/* ==========================================================================
   Rubin-Film – Stylesheet
   Schrift: Lato (SIL Open Font License), lokal gehostet unter /fonts/
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------ */
@font-face{font-family:Lato;font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/lato-300.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/lato-300-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/lato-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/lato-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/lato-400i.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/lato-400i-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/lato-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/lato-700-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Farben & Tokens ---------------------------------------------------- */
:root{
  --rubin:#b3193d;
  --rubin-hell:#e02954;
  --rubin-dunkel:#8f1431;
  --rubin-zart:#fdeff2;

  /* Grundton ist ein helles, leicht warmes Grau – kein reines Weiß.
     Die Karten heben sich hell davon ab, damit die Bilder wirken. */
  --bg:#e9e7e5;
  --bg-gedaempft:#dedbd8;
  --bg-karte:#f8f7f6;
  --text:#23201f;
  --text-leise:#57504d;
  --linie:#cfcbc7;
  --akzent:var(--rubin);
  --akzent-text:#9c1635;
  --schatten:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.07);

  --breite:68rem;
  --breite-schmal:44rem;
  --radius:4px;

  /* Überschriftbänder wie auf der alten Seite: Das Bild blendet gegen die
     helle Seitenfarbe aus, die Überschrift ist weiß. Deckkraft .7 ist der
     Wert, den die alte Seite hatte.

     Der Unterschied zu früher liegt im Schatten hinter der Schrift.
     Früher wirkte die Deckkraft auf das ganze Band, also auch auf die
     Schrift – aus Weiß wurde #eeeeee, und über hellen Bildstellen war die
     Überschrift rechnerisch unsichtbar (nachgemessen: bis 1.0:1, bei
     vr.jpg auf 87% der Textfläche unter 3:1).

     Jetzt bleibt die Schrift echtes Weiß, und ein weicher dunkler Schein
     dahinter verdunkelt nur die unmittelbare Umgebung der Buchstaben.
     Das Band bleibt hell, die Überschrift trägt auch über hellem Himmel. */
  --band-deckkraft:.7;
  --band-schleier:0;
  --band-grund:var(--bg);

  /* Das Einstiegsbild blasser als die Bänder. Hinter "RUBIN FILM" ist das
     Foto von Haus aus dunkel (mittlere Helligkeit 0.129), nur die
     Spiegelung auf dem See ist hell – die fängt der Schatten ab.
     Nachgemessen in der Titelzeile, weiße Schrift:
        .50 -> schlechtester 3.70:1, Mittel 6.97:1, 0% unter 3:1  (eingestellt)
        .40 -> schlechtester 3.75:1, Mittel 6.20:1, 0% unter 3:1
        .70 -> schlechtester 3.59:1, Mittel 8.85:1, 0% unter 3:1 */
  --hero-deckkraft:.5;

  /* Schatten der großen weißen Titel – auf dem Einstiegsbild wie auf den
     Bändern derselbe, damit beides zusammenpasst. Eine enge Lage zeichnet
     die Buchstabenkanten nach, eine weite dunkelt die Fläche ringsum ab.
     An den drei Bandbildern nachgemessen (Mittel / Anteil unter 3:1):
        weite Lage 30%  ->  7.4-8.3:1,  bis 0.5% unter 3:1
        weite Lage 45%  ->  9.8-10.7:1, 0% unter 3:1   (eingestellt) */
  --titel-schatten:
    0 1px 3px rgba(0,0,0,.5),
    0 0 24px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#1a1817;
    --bg-gedaempft:#141211;
    --bg-karte:#242120;
    --text:#ece8e6;
    --text-leise:#aaa29e;
    --linie:#38332f;
    --akzent-text:#ef7d97;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

/* --- Grundlagen --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.9rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
h3{font-size:1.25rem}
p{margin:0 0 1.1em}
img{max-width:100%;height:auto;display:block}

a{color:var(--akzent-text);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--rubin-dunkel)}
@media (prefers-color-scheme: dark){a:hover{color:#f8a9bb}}

:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:2px}

.skip-link{
  position:absolute;left:.5rem;top:-4rem;z-index:100;
  background:var(--rubin);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius);
  text-decoration:none;font-weight:700;transition:top .15s;
}
.skip-link:focus{top:.5rem;color:#fff}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Layout ------------------------------------------------------------- */
.wrap{width:min(100% - 2.5rem, var(--breite));margin-inline:auto}
.wrap-schmal{width:min(100% - 2.5rem, var(--breite-schmal));margin-inline:auto}

.abschnitt{padding-block:clamp(3rem,2rem + 5vw,5.5rem)}
.abschnitt--gedaempft{background:var(--bg-gedaempft)}

.abschnitt-kopf{margin-bottom:2.5rem}
.abschnitt-kopf h2{margin-bottom:.25rem}
/* Keine Breitenbegrenzung: Der Einleitungssatz soll die volle Spaltenbreite
   nutzen und nur umbrechen, wenn der Platz wirklich nicht reicht. */
.abschnitt-kopf p{color:var(--text-leise);margin:0}

.augenbraue{
  display:block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--akzent-text);margin-bottom:.4rem;
}

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, background .2s;
}
.kopf[data-gescrollt="ja"]{border-bottom-color:var(--linie)}

.kopf-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}

.marke{
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.95rem;
  color:var(--text);text-decoration:none;white-space:nowrap;
}
.marke:hover{color:var(--akzent-text)}
.marke span{color:var(--akzent-text)}

.nav-schalter{
  display:none;align-items:center;gap:.5rem;
  background:none;border:1px solid var(--linie);border-radius:var(--radius);
  color:var(--text);font:inherit;font-size:.9rem;padding:.45rem .7rem;cursor:pointer;
}
.nav-schalter:hover{border-color:var(--akzent)}
.nav-schalter svg{width:1.1rem;height:1.1rem;fill:currentColor}

.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:.5rem .8rem;border-radius:var(--radius);
  color:var(--text);text-decoration:none;font-size:.95rem;
}
.nav a:hover{background:var(--rubin);color:#fff}
.nav a[aria-current="page"]{color:var(--akzent-text);font-weight:700}

/* Die Bereichsnamen sind lang ("Multimedia-Projekte"), die Leiste braucht
   rund 670 px. Unterhalb von 58rem (928 px) klappt sie deshalb ins Menü –
   sonst stünden die Punkte gequetscht am Rand. */
@media (max-width: 58rem){
  .nav-schalter{display:inline-flex}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--linie);box-shadow:var(--schatten);
  }
  .nav[data-offen="ja"]{display:block}
  .nav ul{flex-direction:column;gap:0;padding:.5rem 1.25rem 1rem}
  .nav a{padding:.7rem .25rem;border-bottom:1px solid var(--linie)}
  .nav li:last-child a{border-bottom:0}
  .nav a:hover{background:none;color:var(--akzent-text)}
}

/* --- Hero --------------------------------------------------------------- */
.hero{
  position:relative;display:grid;place-items:center;text-align:center;
  min-height:min(82vh, 40rem);
  padding:4rem 1.25rem;
  color:#fff;
  /* Das Bild blendet gegen die helle Seitenfarbe aus – wie die Bänder,
     nur noch blasser. Deshalb kein dunkler Verlauf mehr darüber. */
  background-color:var(--bg);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:var(--hero-bild);
  background-size:cover;background-position:center;
  opacity:var(--hero-deckkraft);
}
.hero-inhalt{position:relative;z-index:1;max-width:40rem}
.hero h1{
  font-size:clamp(1.8rem,1rem + 4.2vw,3.6rem);
  letter-spacing:clamp(.1em,.05em + .6vw,.28em);
  margin:0 0 1rem;text-transform:uppercase;
  /* Trägt jetzt den Kontrast allein – der dunkle Verlauf ist entfallen. */
  text-shadow:var(--titel-schatten);
}
.hero p{
  font-size:clamp(.95rem,.85rem + .4vw,1.2rem);
  letter-spacing:.1em;text-transform:uppercase;font-weight:300;
  /* Kleiner als der Titel, daher gilt hier nicht 3:1 sondern 4.5:1.
     Deshalb der kräftigere Schatten. */
  margin:0;
  text-shadow:
    0 1px 3px rgba(0,0,0,.6),
    0 0 16px rgba(0,0,0,.55);
}
/* --- Bildband (Bereichstrenner mit Foto) -------------------------------- *
 * Ein Foto über die ganze Breite, darauf der Titel des Bereichs.
 * Der Verlauf darunter sichert den Kontrast der Schrift – anders als früher,
 * wo das Bild nur abgeblendet war und heller Text auf hellem Himmel stand.  */
.bildband{
  position:relative;
  display:grid;place-items:center;
  min-height:clamp(13rem, 9rem + 16vw, 22rem);
  padding:3rem 1.25rem;
  text-align:center;color:#fff;
  background-color:var(--band-grund);
  overflow:hidden;
}
/* Gleichmäßiger Schleier über dem Bild – nimmt ihm die letzte Härte und
   sichert den Kontrast der weißen Schrift auch über hellem Himmel. */
.bildband::after{
  content:"";position:absolute;inset:0;
  background:rgba(0,0,0,var(--band-schleier));
}
/* Als echtes Bild statt als CSS-Hintergrund, damit es erst beim Heranscrollen
   geladen wird. Hintergrundbilder laden immer sofort – die drei Bänder hätten
   den Erstaufruf sonst um rund 400 KB beschwert.
   Die Deckkraft nimmt dem Bild die Kraft, wie früher über "opacity". */
.bildband-bild{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:var(--band-deckkraft);
}
.bildband-text{position:relative;z-index:1;max-width:40rem}
.bildband h2{
  margin:0;
  font-size:clamp(1.6rem,1.1rem + 2.2vw,2.6rem);
  letter-spacing:clamp(.06em,.03em + .3vw,.18em);
  text-transform:uppercase;
  color:#fff;
  font-weight:300;
  text-shadow:var(--titel-schatten);
}
.bildband .augenbraue{color:#fff;text-shadow:0 0 12px rgba(0,0,0,.6)}

/* Parallaxe nur beim großen Titelbild.
   Bei den flachen Bändern absichtlich NICHT: "background-attachment: fixed"
   bemisst das Bild am Fenster statt am Element – in einem 13-22rem hohen Band
   sieht man dann nur einen stark vergrößerten Ausschnitt. Ohne die Fixierung
   zeigt jedes Band einen sauberen Bildausschnitt über die volle Breite.
   Auf Mobilgeräten ist die Fixierung ohnehin unzuverlässig. */
@media (min-width:64rem) and (prefers-reduced-motion: no-preference){
  .hero::before{background-attachment:fixed}
}

/* --- Seitenkopf (Unterseiten) ------------------------------------------- */
.seitenkopf{padding-block:clamp(2.5rem,2rem + 3vw,4rem) 0}
.brotkrume{font-size:.9rem;color:var(--text-leise);margin-bottom:1rem}
.brotkrume a{color:var(--text-leise)}
.brotkrume a:hover{color:var(--akzent-text)}

/* --- Karten-Raster ------------------------------------------------------ */
.raster{
  display:grid;gap:1.75rem;
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
  list-style:none;margin:0;padding:0;
}
/* Breitere Kacheln – für den 360°-Bereich, wo mehr Text in der Kachel steht. */
.raster--breit{grid-template-columns:repeat(auto-fill, minmax(19rem, 1fr));gap:2.25rem}

.karte{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-karte);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
  transition:box-shadow .25s, transform .25s;
}
.karte:hover,.karte:focus-within{
  box-shadow:0 2px 4px rgba(0,0,0,.07), 0 12px 28px rgba(0,0,0,.1);
  transform:translateY(-2px);
}
.karte-bild{position:relative;aspect-ratio:16/9;background:var(--linie);overflow:hidden}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.karte:hover .karte-bild img,
.karte:focus-within .karte-bild img{transform:scale(1.04)}

.karte-text{padding:1rem 1.1rem 1.2rem;flex:1}
.karte h3{font-size:1.05rem;margin:0 0 .15rem;letter-spacing:0}
.karte h3 a{color:var(--text);text-decoration:none}
.karte h3 a::after{content:"";position:absolute;inset:0}
.karte:hover h3 a,.karte:focus-within h3 a{color:var(--akzent-text)}
.karte .meta{font-size:.88rem;color:var(--text-leise);margin:0}
.karte-beschreibung{font-size:.92rem;color:var(--text-leise);margin:.5rem 0 0}

.abzeichen{
  position:absolute;top:.6rem;right:.6rem;z-index:1;
  display:inline-flex;align-items:center;gap:.3rem;
  background:rgba(20,20,20,.78);color:#fff;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:.25rem .5rem;border-radius:2px;
}
.abzeichen svg{width:.8rem;height:.8rem;fill:currentColor}

/* --- Video: Zwei-Klick-Lösung (DSGVO) ----------------------------------- */
.video{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#141414;border-radius:var(--radius);overflow:hidden;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.video-vorschau{
  position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;
  border:0;background:none;cursor:pointer;color:#fff;
  display:grid;place-items:center;font:inherit;text-align:center;
}
.video-vorschau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.video-vorschau-inhalt{position:relative;z-index:1;padding:1.5rem;max-width:30rem}
.video-vorschau:hover .abspielen,
.video-vorschau:focus-visible .abspielen{background:var(--rubin);transform:scale(1.06)}
.abspielen{
  display:grid;place-items:center;width:4rem;height:4rem;margin:0 auto .9rem;
  background:rgba(179,25,61,.9);border-radius:50%;transition:transform .2s, background .2s;
}
.abspielen svg{width:1.6rem;height:1.6rem;fill:#fff;margin-left:.2rem}
.video-vorschau-titel{display:block;font-weight:700;margin-bottom:.3rem}
.video-vorschau-hinweis{display:block;font-size:.82rem;line-height:1.5;color:#e8e2e0;text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* Kompakte Variante für die Kacheln auf der Startseite */
.video--kompakt .abspielen{width:3rem;height:3rem;margin-bottom:.6rem}
.video--kompakt .abspielen svg{width:1.2rem;height:1.2rem}
.video--kompakt .video-vorschau-inhalt{padding:.9rem}
.video--kompakt .video-vorschau-titel{font-size:.95rem}
.video--kompakt .video-vorschau-hinweis{font-size:.76rem;line-height:1.4}

/* --- Galerie ------------------------------------------------------------ */
.galerie{margin:0}
.galerie-buehne{
  position:relative;aspect-ratio:16/9;background:var(--bg-gedaempft);
  border-radius:var(--radius);overflow:hidden;
}
.galerie-buehne img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.galerie-buehne img[hidden]{display:none!important}

.galerie-steuerung{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:.9rem;
}
.galerie-knopf{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;
  background:none;border:1px solid var(--linie);border-radius:50%;
  color:var(--text);cursor:pointer;
}
.galerie-knopf:hover{border-color:var(--akzent);color:var(--akzent-text)}
.galerie-knopf svg{width:1rem;height:1rem;fill:currentColor}

.galerie-punkte{display:flex;gap:.4rem;margin:0 .5rem}
.galerie-punkt{
  width:.65rem;height:.65rem;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--text-leise);background:none;
}
.galerie-punkt[aria-current="true"]{background:var(--rubin);border-color:var(--rubin)}

.galerie-zaehler{font-size:.85rem;color:var(--text-leise);font-variant-numeric:tabular-nums}

/* --- Filmdetail --------------------------------------------------------- */
.film-kopf{margin-bottom:2rem}
.film-kopf h1{margin-bottom:.3rem}
.film-kopf .untertitel{font-size:1.15rem;color:var(--text-leise);font-style:italic;margin:0}
.film-jahr{
  display:inline-block;font-size:.85rem;letter-spacing:.14em;font-weight:700;
  color:var(--akzent-text);text-transform:uppercase;margin-bottom:.6rem;
}

.film-text{margin-top:2.25rem}

.faktenblock{
  margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--linie);
  display:grid;gap:1.75rem;
}
@media (min-width: 40rem){ .faktenblock{grid-template-columns:1fr 1fr} }
.faktenblock h2{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-text);margin-bottom:.6rem}
.faktenblock ul{margin:0;padding-left:1.1rem}
.faktenblock li{margin-bottom:.3rem}
.faktenblock p{margin:0;color:var(--text-leise)}

.blaettern{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linie);
  font-size:.95rem;
}
.blaettern a{text-decoration:none;max-width:20rem}
.blaettern a:hover{text-decoration:underline}
.blaettern .richtung{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-leise)}

/* --- Listen (Projekte, Festivals) --------------------------------------- */
/* Aufbau und Schriftgrade wie bei den Filmfestivals: breite Spalte,
   ab 44rem zweispaltig, 1rem für die Titel, 0.92rem für den Text. */
.projektliste{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
@media (min-width: 44rem){ .projektliste{grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem} }
/* Projekttitel in der Textfarbe – wie die Filmnamen bei den Festivals.
   Die verlinkten erben die Farbe und behalten ihre Unterstreichung,
   der unverlinkte Titel ("So erleben wir es") steht ohne. */
.projektliste h3{font-size:1rem;margin-bottom:.25rem;color:var(--text)}
.projektliste h3 a{color:inherit}
.projektliste h3 a:hover{color:var(--akzent-text)}
.projektliste .zusatz{color:var(--text-leise);font-style:italic;font-size:.92rem;display:block;margin-bottom:.4rem}
.projektliste p{margin:0;font-size:.92rem;color:var(--text-leise)}

.festivalliste{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
@media (min-width: 44rem){ .festivalliste{grid-template-columns:1fr 1fr;gap:1.5rem 2.5rem} }
.festivalliste h3{font-size:1rem;margin-bottom:.25rem}
/* Unterstrichen, damit erkennbar ist, dass die Filmnamen zur jeweiligen
   Filmseite führen. Die Textfarbe bleibt – so heben sie sich weiterhin von
   den Festivaleinträgen darunter ab. */
.festivalliste h3 a{color:var(--text)}
.festivalliste h3 a:hover{color:var(--akzent-text)}
.festivalliste ul{margin:0;padding:0;list-style:none;font-size:.92rem;color:var(--text-leise)}
/* Festivals ohne Aufzählungszeichen und ohne Einzug – sie stehen bündig
   unter dem Filmnamen. Die kleinere, gedämpfte Schrift trennt die beiden
   Ebenen ausreichend.
   Für Aufzählungspunkte: die letzte Zeile aktivieren und bei "ul li"
   padding-left:.9rem sowie position:relative ergänzen.
   Getrennte Selektoren, weil ein gemeinsames ".festivalliste li" auch die
   Filmnamen auf der äußeren Ebene träfe. */
.festivalliste > li{padding-left:0}
.festivalliste ul li{padding-left:0}
/* .festivalliste ul li::before{content:"•";position:absolute;left:0;color:var(--text-leise)} */

/* --- Kontakt ------------------------------------------------------------ */
.kontakt-raster{display:grid;gap:2.5rem}
@media (min-width: 44rem){ .kontakt-raster{grid-template-columns:1fr 1fr} }
/* Der Block sitzt mittig auf der Seite. Innerhalb der Zeilen bleibt der Text
   linksbündig, damit die Symbole untereinander stehen und die dreizeilige
   Anschrift nicht ausfranst. */
.kontaktliste{list-style:none;margin-inline:auto;margin-block:0;padding:0;width:fit-content}
.kontaktliste li{display:flex;gap:.85rem;margin-bottom:.7rem;align-items:flex-start}
.kontaktliste svg{width:1.15rem;height:1.15rem;fill:var(--akzent-text);flex:none;margin-top:.35rem}
.kontaktliste a{color:var(--text)}
.kontaktliste a:hover{color:var(--akzent-text)}

/* --- Fußzeile ----------------------------------------------------------- */
.fuss{
  border-top:1px solid var(--linie);
  padding-block:2rem;margin-top:0;
  font-size:.9rem;color:var(--text-leise);
  background:var(--bg-gedaempft);
}
.fuss-inner{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center}
.fuss ul{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none;margin:0;padding:0}
.fuss a{color:var(--text-leise)}
.fuss a:hover{color:var(--akzent-text)}

/* --- Rechtstexte -------------------------------------------------------- */
.rechtstext h2{font-size:1.3rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--linie)}
.rechtstext h2:first-of-type{margin-top:1rem}
.rechtstext h3{font-size:1.05rem;margin-top:1.75rem}
.rechtstext ul{padding-left:1.2rem}
.rechtstext li{margin-bottom:.3rem}
.rechtstext address{font-style:normal}

/* --- 404 ---------------------------------------------------------------- */
.fehler{text-align:center;padding-block:5rem}
.fehler .nummer{font-size:4rem;font-weight:700;color:var(--akzent-text);line-height:1;margin:0}