/* ============================================================
   Filmwelt – Stylesheet
   Dunkles Blau als Grundton, Weiß als Sekundärfarbe.
   Große Grotesk-Überschriften, ruhige Flächen, viel Schwarzraum.
   ============================================================ */

:root {
  /* --- Farben --- */
  --grund:    #050D1C;   /* Grundfläche der Seite */
  --grund-2:  #08142A;   /* abgesetzte Abschnitte, Karten */
  --grund-3:  #0D1E3B;   /* Eingabefelder, Hover */

  --weiss:    #FFFFFF;
  --weiss-70: rgba(255, 255, 255, 0.70);
  --weiss-45: rgba(255, 255, 255, 0.45);
  --weiss-28: rgba(255, 255, 255, 0.28);

  --gedimmt:  rgba(255, 255, 255, 0.40);  /* zweite Zeile der Schlagzeile */

  --linie:      rgba(255, 255, 255, 0.09);
  --linie-hell: rgba(255, 255, 255, 0.22);

  --stern:      #FFFFFF;
  --stern-leer: rgba(255, 255, 255, 0.20);

  /* --- Typografie --- */
  --schrift-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Maße --- */
  --kopf-hoehe:  72px;
  --breite:      1240px;
  --breite-text: 66ch;
  --radius:      2px;
  --uebergang:   180ms ease;
}

* { box-sizing: border-box; }

/* Schwarz hinter der Seite, damit das Einblenden aus dem Dunkel kommt */
html { scroll-behavior: smooth; background: #000; }

body {
  margin: 0;
  background: var(--grund);
  animation: einblenden 340ms ease both;
  color: var(--weiss-70);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--weiss); text-decoration: none; }

/* ---------- Schnitt auf Schwarz ---------- */

@keyframes einblenden {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Schwarzer Schleier zum Abblenden vor dem Seitenwechsel (aus app.js) */
.blende {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.blende--zu { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .blende { transition: none; }
}

/* ---------- Filmkorn ----------
   Ein feines, unbewegtes Rauschen über allem. Man sieht es nicht als
   Muster – es nimmt den Flächen nur die Bildschirmglätte. */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

::selection { background: var(--weiss); color: var(--grund); }

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

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--weiss);
  margin: 0;
}

/* ---------- Layout-Helfer ---------- */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 32px;
}

.abschnitt { padding: 110px 0; }
.abschnitt--dunkel { background: var(--grund-2); }

.abschnitt-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 52px;
}

.abschnitt-kopf h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.02;
}

/* Mittig gesetzter Abschnittskopf, Weiterlink darunter statt daneben */
.abschnitt-kopf--mitte {
  justify-content: center;
  text-align: center;
}

.abschnitt-fuss {
  margin: 48px 0 0;
  text-align: center;
}

/* Empfehlungsblock und Essayliste auf der Startseite: schmaler und mittig */
#empfehlung-der-woche .aushang { max-width: 1100px; margin: 0 auto; }
#empfehlung-der-woche .hinweis { text-align: center; }
.liste--mitte { max-width: 880px; margin: 0 auto; }

/* Feste Kartenbreite, als Gruppe mittig – statt über die volle Breite gestreckt */
.raster.raster--mitte {
  grid-template-columns: repeat(auto-fit, 240px);
  justify-content: center;
}


.kapitel {
  font-family: var(--schrift-text);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--weiss-45);
  margin: 0 0 18px;
}

.gedimmt { color: var(--gedimmt); }

.mehr {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--weiss-45);
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--linie);
  transition: color var(--uebergang), border-color var(--uebergang);
}
.mehr:hover { color: var(--weiss); border-bottom-color: var(--weiss); }

/* ---------- Pill-Schaltflächen ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 15px 30px;
  font-family: var(--schrift-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang),
    border-color var(--uebergang), transform var(--uebergang);
}
.knopf span { font-size: 0.9em; opacity: 0.6; }

.knopf--voll { background: var(--weiss); color: var(--grund); }
.knopf--voll:hover { color: var(--grund); transform: translateY(-2px); }

.knopf--rand { background: transparent; border-color: var(--linie-hell); color: var(--weiss); }
.knopf--rand:hover {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--grund);
  transform: translateY(-2px);
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 42px 0 0;
}

/* ---------- Kopfzeile ---------- */

/* Ganz oben durchsichtig, beim Scrollen legt sich die milchige
   Fläche darunter (Klasse kommt aus app.js). */
.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease;
}

.kopf--gescrollt {
  background: rgba(5, 13, 28, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: transparent;
}

.kopf-inhalt {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: var(--kopf-hoehe);
}

.marke {
  font-family: var(--schrift-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--weiss);
  line-height: 1;
  justify-self: start;
}
.marke span { color: var(--weiss-45); font-weight: 500; }

/* Bildlogo statt Schriftzug (assets/logo.png ist freigestellt). */
.marke--bild { display: inline-flex; align-items: center; line-height: 0; }

.marke-bild { height: 40px; width: auto; }
.fuss .marke-bild { height: 34px; }

.nav {
  display: flex;
  gap: 34px;
  align-items: center;
  justify-self: center;
}

.nav a {
  font-size: 0.88rem;
  color: var(--weiss-45);
  padding: 4px 0;
  transition: color var(--uebergang);
}
.nav a:hover { color: var(--weiss); }
.nav a.aktiv { color: var(--weiss); }

.kopf-aktion {
  justify-self: end;
  padding: 11px 20px;
  font-size: 0.66rem;
  background: var(--weiss);
  color: var(--grund);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--uebergang);
}
.kopf-aktion:hover { color: var(--grund); transform: translateY(-1px); }

/* Lupe in der Navigation */
.nav-suche {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
  padding: 6px;
  background: none;
  border: 0;
  color: var(--weiss-45);
  cursor: pointer;
  font-family: inherit;
  transition: color var(--uebergang);
}
.nav-suche:hover { color: var(--weiss); }
.nav-suche svg { display: block; }
.nav-suche-text { display: none; }

/* ---------- Such-Overlay ---------- */

.suche-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 40px;
  background: rgba(5, 13, 28, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.suche-overlay--offen { display: flex; }
body.suche-aktiv { overflow: hidden; }

.suche-kasten {
  width: 100%;
  max-width: 640px;
  background: var(--grund-2);
  border: 1px solid var(--linie-hell);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: suche-auf 180ms ease both;
}

@keyframes suche-auf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.suche-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px 6px 20px;
  border-bottom: 1px solid var(--linie);
  color: var(--weiss-45);
}

.suche-feld {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--weiss);
  font-family: inherit;
  font-size: 1.05rem;
}
.suche-feld::placeholder { color: var(--weiss-28); }
.suche-feld::-webkit-search-cancel-button { display: none; }

.suche-schliessen {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--weiss-45);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang);
}
.suche-schliessen:hover { background: var(--grund-3); color: var(--weiss); }

.suche-treffer { max-height: 56vh; overflow-y: auto; }

.suche-gruppe {
  margin: 0;
  padding: 14px 20px 6px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--weiss-28);
}

.suche-eintrag {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px 20px;
  transition: background var(--uebergang);
}
.suche-eintrag:hover,
.suche-eintrag--aktiv { background: var(--grund-3); }

.suche-eintrag:not(:has(.suche-mini)) { grid-template-columns: 1fr auto; }

.suche-mini .poster { border-radius: 4px; }
.suche-mini .poster-platzhalter { padding: 2px; gap: 0; }
.suche-mini .pp-titel { font-size: 0.4rem; line-height: 1; }
.suche-mini .pp-jahr { display: none; }

.suche-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suche-titel {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.015em;
  color: var(--weiss);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suche-meta { font-size: 0.74rem; color: var(--weiss-28); }
.suche-wert .sterne { font-size: 0.8rem; }
.suche-wert .zahl { display: none; }

.suche-leer {
  margin: 0;
  padding: 28px 20px;
  color: var(--weiss-45);
  font-size: 0.94rem;
}

.suche-hinweis {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--linie);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--weiss-28);
}

.nav-schalter {
  display: none;
  justify-self: end;
  background: none;
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  color: var(--weiss);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- Bühne ---------- */

.buehne {
  position: relative;
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}

.buehne h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.0;
}

.buehne p { margin: 0; }

/* Große Startseiten-Variante mit Hintergrundbild und Laufband.
   Wird um die Höhe der Kopfleiste nach oben gezogen, damit das Bild
   hinter der durchsichtigen Navigation beginnt. */
.buehne--gross {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  margin-top: calc(-1 * var(--kopf-hoehe) - 1px); /* -1px: Trennlinie der Leiste */
  padding: calc(120px + var(--kopf-hoehe)) 0 0;
  text-align: center;
}

.buehne--gross h1 {
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
}

/* Beilabel im Hero deutlich über der Schlagzeile absetzen */
.buehne--gross .kapitel { margin-bottom: 40px; }

/* Markenname: Inter, weit gesperrt, dicht über der Zeile darunter */
/* Vorspann-Zeile über dem Titel, wie ein „presents“ im Filmvorspann */
.buehne--gross .hero-presents {
  margin: 0 0 20px;
  font-family: var(--schrift-text);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--weiss-28);
}

/* Haupttitel wie eine Vorspann-Einblendung: dünn, sehr weit gesperrt */
/* Der Name: aufrechte Serife, groß, eng gesetzt – wie ein Zeitungskopf */
.buehne--gross .hero-marke {
  font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 88px);
  letter-spacing: 0.02em;
  text-indent: 0.02em; /* gleicht den Nachlauf des letzten Buchstabens aus */
  line-height: 1;
  text-transform: uppercase;
  color: var(--weiss);
  margin-bottom: 18px;
}

/* Die Zeile darunter wie die CineQuiz-Überschrift (Playfair Display, aufrecht, halbfett) */
/* Der Slogan darunter: fein und kursiv, deutlich zurückgenommen */
.buehne--gross h1.hero-titel {
  font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--weiss-70);
}

/* Zeile unter der Schlagzeile: kleiner, gedimmt */
.buehne-untertitel {
  margin: 20px 0 0 !important;
  font-family: var(--schrift-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  letter-spacing: 0.22em;
  line-height: 1.3;
  color: var(--gedimmt);
}

/* Ohne Einleitungstext brauchen die Schaltflächen etwas mehr Luft */
.buehne--gross .knopf-reihe { margin-top: 68px; }

.buehne-inhalt {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.buehne-text {
  max-width: 54ch;
  margin: 26px auto 0 !important;
  font-size: 1.02rem;
  color: var(--weiss-45);
}

/* Bühnenvorhang als Hintergrund der Startseite */
.hero-bild {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("../start-hintergrund.jpg") center / cover no-repeat;
  opacity: 0.55; /* gedimmt, damit die durchsichtige Kopfleiste lesbar bleibt */
}

/* Oben zusätzlich abdunkeln (Navigation), unten in die Seitenfarbe auslaufen */
.hero-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(5, 13, 28, 0.85) 0%,
      rgba(5, 13, 28, 0.35) 18%,
      rgba(5, 13, 28, 0.05) 42%,
      rgba(5, 13, 28, 0.60) 68%,
      var(--grund) 100%
    );
}

/* ---------- Ticker (Filmplakate) ---------- */

.ticker {
  position: relative;
  z-index: 2;
  padding: 40px 0 44px;
  overflow: hidden;
}

/* Kein Trennstrich über oder unter dem Laufband, dafür mehr Abstand. */
.buehne--gross { border-bottom: none; }
.buehne--gross .ticker { padding: 98px 0 40px; }

/* Die Plakate selbst laufen an den Seiten aus – eine Maske statt
   aufgelegter Farbflächen, damit vor einem Hintergrundbild kein
   Kasten entsteht. */
.ticker {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

.ticker-spur {
  display: flex;
  width: max-content;
  gap: 22px;
  animation: laufband 60s linear infinite;
}
/* Läuft beim Darüberfahren weiter; hält nur an, wenn ein Plakat per
   Tastatur fokussiert wird, damit man es auch anklicken kann. */
.ticker-spur:focus-within { animation-play-state: paused; }

@keyframes laufband {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-spur { animation: none; }
  .ticker { overflow-x: auto; }
}

.ticker-karte {
  flex: 0 0 auto;
  width: 156px;
  display: block;
  opacity: 0.42;
  filter: grayscale(1);
  transition: opacity var(--uebergang), filter var(--uebergang),
    transform var(--uebergang);
}
.ticker-karte:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-5px);
}

.ticker-karte .poster { margin-bottom: 0; }


/* ---------- Poster ---------- */

.poster {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--grund-2);
  border: 1px solid var(--linie);
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.poster-platzhalter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--grund-3), transparent 70%),
    var(--grund-2);
}

.poster-platzhalter .pp-titel {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--weiss-70);
}
.poster-platzhalter .pp-jahr {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--weiss-28);
}

/* ---------- Sterne ---------- */

.sterne {
  display: inline-flex;
  gap: 0.18em;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.sterne--gross { font-size: 1.4rem; }

/* Ein Stern: die Form kommt als Maske aus assets/stern.png (weiche,
   abgerundete Spitzen). Grauer Grund, darüber die weiße Füllung, deren
   Breite in Prozent die halben Sterne ergibt – die Maske bleibt links
   verankert, sodass sie exakt an derselben Stelle abschneidet. */
.stern {
  position: relative;
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
}
.stern-hg,
.stern-vg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -webkit-mask: url("../stern.png") left center / 1.1em 1.1em no-repeat;
  mask: url("../stern.png") left center / 1.1em 1.1em no-repeat;
}
.stern-hg { width: 100%; background: var(--stern-leer); }
.stern-vg { background: var(--stern); }

.bewertung { display: inline-flex; align-items: center; gap: 11px; }
.bewertung .zahl {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--weiss-28);
}

/* ---------- FSK und Marken ---------- */

.karte-marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin: 0;
}

.fsk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--linie-hell);
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--weiss-45);
}

.merker {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--weiss-45);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 3px 10px;
}

.empfehlung-hinweis { margin: 24px 0 0; }
.empfehlung-hinweis .marker,
.empfehlung .marker {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grund);
  background: var(--weiss);
  padding: 6px 14px;
  border-radius: 999px;
}

/* ---------- Raster und Karten ---------- */

.raster {
  display: grid;
  gap: 48px 30px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.karte { display: block; }
.karte .poster { margin-bottom: 18px; }
.karte:hover .poster img { transform: scale(1.05); }

.karte h3 {
  font-size: 1.18rem;
  line-height: 1.2;
  margin: 0 0 7px;
  letter-spacing: -0.02em;
}

.karte .meta {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--weiss-28);
  margin-bottom: 13px;
}

.karte .teaser {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--weiss-45);
  margin: 13px 0 0;
}

/* ---------- Empfehlung der Woche ---------- */

.empfehlung {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: center;
}

.empfehlung .marker-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
}

.empfehlung .woche {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--weiss-28);
}

.empfehlung h3 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.02;
  margin: 0 0 12px;
}

.empfehlung .meta {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--weiss-28);
  margin-bottom: 20px;
}

.empfehlung .begruendung {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--weiss-70);
  max-width: 58ch;
}

/* ---------- Listen (Essays, Archiv) ---------- */

.liste { border-top: 1px solid var(--linie); }

.listen-eintrag {
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 36px;
  align-items: baseline;
  padding: 34px 0;
  border-bottom: 1px solid var(--linie);
  transition: background var(--uebergang);
}
.listen-eintrag:hover { background: rgba(255, 255, 255, 0.025); }

.listen-eintrag .datum {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--weiss-28);
}

.listen-eintrag h3 {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 9px;
}

.listen-eintrag p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--weiss-45);
  max-width: 60ch;
}

.listen-eintrag .pfeil {
  color: var(--weiss-28);
  font-size: 1.1rem;
  transition: transform var(--uebergang), color var(--uebergang);
}
.listen-eintrag:hover .pfeil { transform: translateX(6px); color: var(--weiss); }

/* ---------- Werkzeugleiste und Filter ---------- */

.werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 16px;
  align-items: flex-end;
  margin-bottom: 68px;
}


.facetten { display: flex; flex-wrap: wrap; gap: 44px 30px; }
.facette { display: flex; flex-direction: column; gap: 7px; }

.facette-titel {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--weiss-28);
}

.feld {
  flex: 1 1 240px;
  max-width: 340px;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--weiss);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 12px 20px;
  transition: border-color var(--uebergang);
}
.feld::placeholder { color: var(--weiss-28); }
.feld:focus { border-color: var(--linie-hell); outline: none; }

select.feld {
  flex: 0 0 auto;
  max-width: none;
  padding-right: 40px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.45) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.45) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.feld option { background: var(--grund-2); color: var(--weiss); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }

.chip {
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--weiss-45);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 20px;
  cursor: pointer;
  transition: all var(--uebergang);
}
.chip:hover { border-color: var(--linie-hell); color: var(--weiss); }
.chip.aktiv { background: var(--weiss); border-color: var(--weiss); color: var(--grund); }

/* ---------- Detailseite Film ---------- */

/* Bühne der Detailseite: trägt das optionale Banner gedimmt im Hintergrund. */
.film-buehne {
  position: relative;
  overflow: hidden;
}

.film-hintergrund {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0.3;
}

/* Legt sich über das Bild, damit die Schrift lesbar bleibt und der
   Übergang zur Kritik weich ausläuft. */
.film-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(5, 13, 28, 0.30) 0%,
      rgba(5, 13, 28, 0.68) 55%,
      var(--grund) 100%
    ),
    linear-gradient(to right, rgba(5, 13, 28, 0.55), transparent 55%);
}

.film-buehne .huelle { position: relative; }

/* ---------- Szenenbild im Kinoformat ----------
   Echtes Breitbild 2,39:1 auf schwarzem Grund mit schmalen Balken
   oben und unten, dazu Vignette und ein sehr langsamer Drift. */

.kinoformat {
  position: relative;
  margin: 56px 0 0;
  padding: 12px 0;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}

.kinoformat-bild {
  aspect-ratio: 2.39 / 1;
  background-size: cover;
  background-position: center;
  transform-origin: center;
  animation: kino-drift 70s ease-in-out infinite alternate;
}

@keyframes kino-drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.4%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .kinoformat-bild { animation: none; transform: none; }
}

/* Projektionslicht, das zum Rand hin nachlässt */
.kinoformat-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.35));
}

.film-kopf {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
  padding: 80px 0;
  border-bottom: 1px solid var(--linie);
}

.film-kopf h1 {
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1.0;
  margin: 0 0 26px;
}

.daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px 30px;
  margin: 34px 0;
  padding: 30px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.daten dt {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--weiss-28);
  margin-bottom: 7px;
}
.daten dd { margin: 0; font-size: 0.94rem; color: var(--weiss); }

.zurueck {
  display: inline-block;
  margin: 40px 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--weiss-28);
  transition: color var(--uebergang);
}
.zurueck:hover { color: var(--weiss); }

/* ---------- Fließtext ---------- */

.text { max-width: var(--breite-text); padding: 76px 0; }

.text > p {
  margin: 0 0 1.5em;
  font-size: 1.06rem;
  line-height: 1.82;
  color: var(--weiss-70);
}

.text > p.auftakt::first-letter {
  float: left;
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.85;
  padding: 0.04em 0.1em 0 0;
  color: var(--weiss);
}

.text h2 {
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 2.4em 0 0.8em;
}

.text ul { margin: 0 0 1.5em; padding-left: 1.3em; color: var(--weiss-70); }
.text ul li { margin-bottom: 0.5em; line-height: 1.8; }

.text blockquote {
  margin: 2.4em 0;
  padding-left: 28px;
  border-left: 1px solid var(--linie-hell);
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--weiss);
}

.essay-kopf {
  padding: 96px 0 48px;
  border-bottom: 1px solid var(--linie);
  max-width: var(--breite-text);
}
.essay-kopf h1 {
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1.0;
  margin: 18px 0 20px;
}
.essay-kopf .untertitel { margin: 0; font-size: 1.05rem; color: var(--weiss-45); }

/* ---------- Essays: Übersicht als Programmheft ---------- */

.abschnitt--programm { padding-top: 70px; }

.programm { border-top: 1px solid var(--linie); }

.programm-eintrag {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 52px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--linie);
}

.programm-still-link { display: block; }

.programm-still {
  display: block;
  padding: 8px 0;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  transition: transform var(--uebergang);
}
.programm-still-link:hover .programm-still { transform: translateY(-3px); }

.programm-still img {
  display: block;
  width: 100%;
  aspect-ratio: 2.39 / 1;
  object-fit: cover;
}

/* Ohne Standbild: dunkler Rahmen mit der Nummer */
.programm-still--leer {
  aspect-ratio: 2.39 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background:
    radial-gradient(70% 90% at 50% 40%, var(--grund-3), transparent 75%),
    #000;
  border: 1px solid var(--linie);
}
.programm-still-nr {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--weiss-28);
}

.programm-zeile {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin-bottom: 14px;
}
.programm-nr {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--weiss-45);
}
.programm-datum {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--weiss-28);
}

.programm h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 14px;
}
.programm h2 a { color: var(--weiss); transition: color var(--uebergang); }
.programm h2 a:hover { color: var(--weiss-70); }

.programm p {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--weiss-45);
  max-width: 56ch;
}

/* ---------- Essay-Seite: Serife, Kinoformat, Zwischentitel ---------- */

.essay-kopf--mitte {
  max-width: none;
  text-align: center;
  padding: 84px 0 44px;
  border-bottom: 0;
}

.titel-serif--essay {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0;
  max-width: 26ch;
  margin: 16px auto;
  overflow-wrap: anywhere;
}

.essay-kopf--mitte .untertitel {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--weiss-45);
}

.kinoformat--essay { max-width: 980px; margin: 0 auto; }

.text--essay { margin: 0 auto; padding-top: 60px; }

.text--essay > p.auftakt::first-letter {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 3.9em;
  padding-right: 0.12em;
}

/* Zwischentitel und Zitate wie Zwischentitel im Stummfilm */
.text--essay h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.55rem;
  letter-spacing: 0;
  text-align: center;
  margin: 2.4em 0 1.6em;
  padding: 22px 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.text--essay blockquote {
  border: 0;
  padding: 0 30px;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.45;
}

.filme-im-essay {
  max-width: var(--breite-text);
  margin: 56px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--linie);
}
.filme-im-essay .kapitel { margin-bottom: 20px; }
.filme-im-essay .raster {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 18px;
}
.filme-im-essay .karte h3 { font-size: 0.92rem; }
.filme-im-essay .karte .meta { font-size: 0.68rem; margin: 0; }

.essay-zurueck {
  max-width: var(--breite-text);
  margin: 0 auto;
  text-align: center;
}

/* ---------- CineQuiz ---------- */

.buehne h1.titel-serif--quiz { font-size: clamp(2.15rem, 4.8vw, 3.7rem); line-height: 1.45; }
.abschnitt--quiz { padding-top: 60px; }

.quiz { max-width: 900px; margin: 0 auto; }

/* Startbildschirm */
.quiz-start { text-align: center; padding: 20px 0 10px; }
.quiz-start-punkte { display: flex; justify-content: center; gap: 56px; margin-bottom: 30px; }
.quiz-start-punkte > div { display: flex; flex-direction: column; gap: 6px; }
.quiz-start-zahl { font-family: var(--schrift-display); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--weiss); letter-spacing: -0.03em; }
.quiz-start-punkte > div > span:last-child { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--weiss-28); }
.quiz-start-text { max-width: 52ch; margin: 0 auto; color: var(--weiss-45); }
.quiz-best { margin: 22px 0 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--weiss-28); text-align: center; }

/* Kopfzeile einer Frage */
.quiz-kopf { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.quiz-zaehler, .quiz-stand { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--weiss-45); white-space: nowrap; }
.quiz-punkte { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.quiz-punkt { width: 22px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.quiz-punkt--aktiv { background: var(--weiss-45); }
.quiz-punkt--richtig { background: var(--weiss); }
.quiz-punkt--falsch { background: rgba(255, 255, 255, 0.3); }

/* Fragekarte */
.quiz-karte {
  padding: 40px;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 16px;
}
.quiz-art { margin-bottom: 12px; }
.quiz-karte h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; margin: 0 0 22px; }

.quiz-zitat {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--weiss);
  margin: 0 0 26px;
  padding-left: 22px;
  border-left: 1px solid var(--linie-hell);
}
.quiz-zitat--emoji { font-family: inherit; font-style: normal; font-size: 3rem; letter-spacing: 0.15em; border: 0; padding: 0; text-align: center; }

/* Bild – mit Stufen der Enthüllung */
.quiz-bild {
  position: relative;
  margin: 0 auto 26px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--linie);
}
.quiz-bild--breit { aspect-ratio: 2.39 / 1; width: 100%; }
.quiz-bild--hoch  { aspect-ratio: 2 / 3; width: 260px; }
.quiz-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease, filter 700ms ease; transform-origin: 50% 40%; }
.quiz-bild--stufe-1 img { transform: scale(2.8); filter: blur(4px) saturate(0.8); }
.quiz-bild--stufe-2 img { transform: scale(1);   filter: blur(22px) brightness(0.6); }
.quiz-bild--stufe-3 img { transform: scale(1);   filter: blur(9px); }
.quiz-bild--poster.quiz-bild--stufe-3 img { filter: blur(16px); }
.quiz-bild--klar img { transform: none; filter: none; }

.quiz-unterschrift {
  margin: -12px 0 26px;
  text-align: center;
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--weiss);
}

.quiz-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.quiz-bilder .quiz-bild { margin: 0; }

.quiz-paar { display: flex; justify-content: center; gap: 28px; margin: 0 0 26px; }
.quiz-paar-film { width: 170px; text-align: center; }
.quiz-paar-film .poster { margin-bottom: 10px; }
.quiz-paar-titel { font-family: var(--schrift-display); font-weight: 600; font-size: 0.9rem; color: var(--weiss); }

/* Drei Hinweise */
.quiz-hinweise { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.quiz-hinweise li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--linie);
  font-size: 0.98rem; color: var(--weiss);
}
.quiz-hinweis--verdeckt { color: var(--weiss-28); font-style: italic; }
.quiz-hinweis-nr {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--schrift-display); font-weight: 600; font-size: 0.7rem;
  background: var(--weiss); color: var(--grund);
}
.quiz-hinweis--verdeckt .quiz-hinweis-nr { background: transparent; color: var(--weiss-28); border: 1px solid var(--linie-hell); }

/* Antworten */
.quiz-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-option {
  padding: 15px 18px;
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  background: transparent;
  color: var(--weiss);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}
.quiz-option:hover:not(:disabled) { background: var(--grund-3); }
.quiz-option:disabled { cursor: default; }
.quiz-option--falsch { color: var(--weiss-28); border-color: var(--linie); text-decoration: line-through; }
.quiz-option--richtig { background: var(--weiss); color: var(--grund); border-color: var(--weiss); }
.quiz-hilfe { margin: 16px 0 0; font-size: 0.78rem; color: var(--weiss-28); }

/* Erklärung nach der Antwort */
.quiz-erklaerung {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
  animation: einblenden 300ms ease both;
}
.quiz-urteil { margin: 0 0 10px; font-family: var(--schrift-display); font-weight: 600; font-size: 1.15rem; color: var(--weiss-45); }
.quiz-erklaerung--richtig .quiz-urteil { color: var(--weiss); }
.quiz-text { margin: 0 0 22px; font-size: 1rem; line-height: 1.75; color: var(--weiss-70); }
.quiz-text strong { color: var(--weiss); }
.quiz-weiter { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; flex-wrap: wrap; }
.quiz-weiter .knopf { margin-left: auto; }

/* Auswertung */
.quiz-ergebnis { text-align: center; }
.quiz-summe { font-family: var(--schrift-display); font-weight: 600; font-size: 3.4rem; line-height: 1; letter-spacing: -0.03em; color: var(--weiss); margin: 0 0 36px; }
.quiz-summe span { display: block; margin-top: 12px; font-family: var(--schrift-text); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--weiss-45); }

.quiz-typ {
  padding: 40px;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 16px;
  margin-bottom: 40px;
}
.quiz-typ-name { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 6px 0 14px; }
.quiz-typ-text { max-width: 54ch; margin: 0 auto 14px; font-size: 1.05rem; line-height: 1.7; color: var(--weiss-70); }
.quiz-typ-regie { margin: 0 0 28px; font-size: 0.92rem; color: var(--weiss-45); }
.quiz-typ-regie strong { color: var(--weiss); font-weight: 600; }

.quiz-dims { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; }
.quiz-dim { display: grid; grid-template-columns: 90px 1fr 40px; align-items: center; gap: 12px; }
.quiz-dim-name { text-align: left; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--weiss-45); }
.quiz-dim-balken { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.quiz-dim-balken span { display: block; height: 100%; background: var(--weiss); border-radius: 999px; }
.quiz-dim-wert { text-align: right; font-size: 0.72rem; color: var(--weiss-45); }

.quiz-empfehlungen { margin-bottom: 40px; }
.quiz-empfehlungen .kapitel { margin-bottom: 26px; }
.quiz-empfehlungen .raster.raster--mitte { grid-template-columns: repeat(auto-fit, 180px); }
.quiz-empfehlungen .karte { text-align: left; }
.quiz-empfehlungen .karte h3 { font-size: 1rem; }

@media (max-width: 820px) {
  .quiz-karte { padding: 24px 18px; border-radius: 12px; }
  .quiz-kopf { flex-wrap: wrap; }
  .quiz-punkte { order: 3; width: 100%; }
  .quiz-optionen { grid-template-columns: 1fr; }
  .quiz-bild--hoch { width: 200px; }
  .quiz-bilder { grid-template-columns: 1fr; }
  .quiz-paar { gap: 14px; }
  .quiz-paar-film { width: 140px; }
  .quiz-start-punkte { gap: 28px; }
  .quiz-typ { padding: 26px 18px; }
  .quiz-dim { grid-template-columns: 70px 1fr 36px; }
  .quiz-empfehlungen .raster.raster--mitte { grid-template-columns: repeat(auto-fit, minmax(120px, 140px)); }
}

/* ---------- Impressum ---------- */

.text--impressum { padding-top: 0; }
.text--impressum > p { font-size: 0.98rem; line-height: 1.75; color: var(--weiss-70); }
.text--impressum > p.auftakt::first-letter {
  float: none;
  font: inherit;
  padding: 0;
  color: inherit;
}
.text--impressum h2 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 2.2em 0 0.7em;
}
.text--impressum h2:first-child { margin-top: 0; }
.text--impressum strong { color: var(--weiss); font-weight: 600; }

/* Links im Fließtext */
.text a {
  color: var(--weiss);
  border-bottom: 1px solid var(--linie-hell);
  transition: border-color var(--uebergang);
  overflow-wrap: anywhere;
}
.text a:hover { border-bottom-color: var(--weiss); }

/* ---------- Insel, Hinweise ---------- */

.insel { max-width: var(--breite-text); font-size: 1.02rem; color: var(--weiss-45); }
.insel p { margin: 0 0 1.4em; }
.insel strong { color: var(--weiss); font-weight: 600; }

/* Mittig gesetzter Seitenkopf (z. B. Über-Seite) */
.buehne--mitte { text-align: center; padding-top: 110px; }

.buehne-text--mitte {
  margin: 26px auto 0 !important;
  max-width: 62ch;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--weiss-70);
}

/* Serifen-Schriftzug für besondere Überschriften */
.titel-serif {
  font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(3rem, 8vw, 6.2rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
}

/* ---------- Über-Seite: Porträt und Vorstellung ---------- */

.portrait-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 64px;
}

/* Rundes Porträt: Ausschnitt so gelegt, dass Gesicht und Weinglas im Kreis liegen */
.portrait {
  margin: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--weiss);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  display: block;
}

.portrait-text { max-width: 62ch; }

.portrait-text p {
  margin: 0 0 1.4em;
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--weiss-70);
}
.portrait-text .kapitel { margin-bottom: 22px; }

.zitat {
  margin: 2.6em 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--linie);
}
.zitat p {
  margin: 0 0 14px;
  font-family: var(--schrift-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--weiss);
}
.zitat cite {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--weiss-45);
}
.zitat cite::before { content: "— "; }

.hinweis { padding: 56px 0; color: var(--weiss-28); font-size: 0.94rem; }

.ladefehler { max-width: var(--breite-text); padding: 110px 0; color: var(--weiss-45); }
.ladefehler h2 { font-size: 1.9rem; margin: 0 0 20px; }
.ladefehler pre {
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 0.84rem;
  color: var(--weiss);
}
.ladefehler .klein { font-size: 0.78rem; color: var(--weiss-28); }

/* ---------- Fußzeile ---------- */

.fuss {
  border-top: 1px solid var(--linie);
  padding: 64px 0 48px;
  margin-top: 40px;
}

.fuss-inhalt {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
}

.fuss .marke { font-size: 1.1rem; }

.fuss-nav { display: flex; flex-wrap: wrap; gap: 28px; }
.fuss-nav a {
  font-size: 0.84rem;
  color: var(--weiss-28);
  transition: color var(--uebergang);
}
.fuss-nav a:hover { color: var(--weiss); }

.fuss .klein {
  width: 100%;
  margin: 30px 0 0;
  font-size: 0.76rem;
  color: var(--weiss-28);
}

/* ---------- Mobil ---------- */

@media (max-width: 1000px) {
  .empfehlung { grid-template-columns: 200px 1fr; gap: 36px; }
  .film-kopf  { grid-template-columns: 230px 1fr; gap: 40px; }
  .nav { gap: 24px; }
  .nav a { font-size: 0.82rem; }
}

@media (max-width: 820px) {
  .huelle { padding: 0 22px; }
  .abschnitt { padding: 76px 0; }

  .kopf-inhalt { grid-template-columns: 1fr auto; }
  .kopf-aktion { display: none; }
  .nav-schalter { display: block; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 14px 22px 24px;
    background: var(--grund);
    border-bottom: 1px solid var(--linie);
  }
  .nav.offen { display: flex; }
  .nav a { width: 100%; padding: 13px 0; font-size: 1rem; }

  /* Im aufgeklappten Menü bekommt die Lupe eine Beschriftung */
  .nav-suche { width: 100%; margin: 4px 0 0; padding: 13px 0; font-size: 1rem; color: var(--weiss-45); }
  .nav-suche-text { display: inline; }

  .suche-overlay { padding: 14px 14px 30px; }
  .suche-hinweis { display: none; }

  .buehne { padding: 64px 0 44px; }
  .buehne--gross { min-height: 0; padding: calc(88px + var(--kopf-hoehe)) 0 0; }

  /* Hochkant-Fassung des Vorhangs, damit beide Hälften im Bild bleiben */
  .hero-bild { background-image: url("../start-hintergrund-mobil.jpg"); }

  .abschnitt-kopf { flex-direction: column; align-items: flex-start; gap: 14px; }
  .abschnitt-kopf--mitte { align-items: center; }

  .empfehlung { grid-template-columns: 1fr; gap: 30px; }
  .empfehlung .poster-spalte { max-width: 190px; }

  .film-kopf { grid-template-columns: 1fr; gap: 32px; padding: 52px 0; }
  .film-kopf .poster-spalte { max-width: 200px; }

  .portrait-block { gap: 48px; }
  .portrait { width: 200px; height: 200px; }

  .programm-eintrag { grid-template-columns: 1fr; gap: 22px; padding: 32px 0; }
  .programm h2 { font-size: 1.6rem; }
  .text--essay h2 { font-size: 1.3rem; }
  .text--essay blockquote { font-size: 1.25rem; padding: 0 10px; }

  .listen-eintrag { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .listen-eintrag .pfeil { display: none; }

  .raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 34px 18px; }
  .raster.raster--mitte { grid-template-columns: repeat(auto-fit, minmax(140px, 160px)); }


  .text { padding: 52px 0; }
  .text > p.auftakt::first-letter { font-size: 2.9em; }

  .ticker-karte { width: 124px; }
}

/* ---------- Aufblende beim Scrollen ----------
   Inhalte unterhalb der Bühne werden erst sichtbar, wenn sie ins Bild
   kommen: leicht angehoben und transparent, dann sanft nach oben in
   die Schärfe. Karten und Listeneinträge folgen einander um je 70 ms
   (Stufe über --stufe). Wer keine Bewegung will, sieht alles sofort. */

.enthuellen {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stufe, 0) * 70ms);
  will-change: opacity, transform, filter;
}
.enthuellen.ist-sichtbar {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Nach der Aufblende alles zurücksetzen, damit Hover-Effekte, Sticky-
   Elemente und der Unschärfefilter sich nicht in die Quere kommen. */
.enthuellen.ist-fertig {
  transition: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .enthuellen { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- Zitat als Bühnen-Überschrift (Kritikenseite) ---------- */
.buehne h1.buehne-zitat {
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  font-family: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.25;
  letter-spacing: 0.12em;
  color: var(--weiss-70);
}
.buehne .buehne-quelle {
  margin: 18px 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--weiss-45);
}
.buehne--ohne-linie { border-bottom: 0; }

/* Startseite auf dem Handy: Titel und Zeilen kleiner setzen. */
@media (max-width: 820px) {
  .buehne--gross .hero-presents { font-size: 0.6rem; letter-spacing: 0.34em; text-indent: 0.34em; }
  .buehne--gross .hero-marke {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
    letter-spacing: 0.02em;
    text-indent: 0.02em;
  }
  .buehne--gross h1.hero-titel { font-size: 1.35rem; letter-spacing: 0.03em; line-height: 1.4; }
}
/* Zeilenumbruch, der nur auf dem Handy wirkt */
.umbruch-mobil { display: none; }
@media (max-width: 820px) { .umbruch-mobil { display: inline; } }

/* Gegenstück: Umbruch, der nur am Desktop wirkt */
.umbruch-desktop { display: inline; }
@media (max-width: 820px) { .umbruch-desktop { display: none; } }

/* ---------- Empfehlungen: Bühne, Aushang der Woche, Spielplan ----------
   Die Seite ist als Kinoprogramm gedacht: oben der Schaukasten mit dem
   Film der Woche, darunter das Archiv als Wochen-Spielplan aus Postern. */

.buehne--empfehlung { padding-bottom: 56px; }

.buehne h1.buehne-serif-kursiv {
  font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--weiss-70);
  margin: 0 0 14px;
}
.buehne .stempel {
  margin: 0;
  font-family: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--weiss-45);
}

/* Aushang: Poster links, Text rechts, das Poster selbst verwischt als Hintergrund */
.abschnitt--aushang { padding-top: 0; }

.aushang {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  padding: 56px;
  border-radius: 14px;
  border: 1px solid var(--linie);
  background: var(--grund);
}
.aushang-hg {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center 30%;
  filter: blur(48px) saturate(0.6) brightness(0.35);
  opacity: 0.9;
  pointer-events: none;
}
.aushang::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 13, 28, 0.15), rgba(5, 13, 28, 0.8));
  pointer-events: none;
}
.aushang > :not(.aushang-hg) { position: relative; z-index: 1; }

.aushang .plakat { margin: 0; }
.aushang .plakat .poster {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.aushang .marker-zeile { display: flex; gap: 14px; align-items: center; margin: 0 0 22px; }
.aushang .marker {
  display: inline-block;
  border: 1px solid var(--weiss);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--weiss);
  background: none;
}
.aushang .woche {
  font-family: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: var(--weiss-45);
}
.aushang h2 {
  font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.aushang h2 a { color: inherit; text-decoration: none; }
.aushang .meta {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--weiss-45);
  margin: 0 0 18px;
}
.aushang .karte-marken { margin: 0 0 28px; }
.aushang blockquote {
  margin: 0 0 32px;
  padding: 0 0 0 22px;
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--weiss-70);
  max-width: 52ch;
}
.aushang .knopf-reihe { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; margin: 0; }
.knopf--voll { background: var(--weiss); color: var(--grund); border-color: var(--weiss); }
.knopf--voll:hover { background: var(--weiss-70); border-color: transparent; }

/* Spielplan: Posterraster, grau bis zum Hover (wie das Laufband) */
.spielplan-kopf { text-align: center; padding: 0 0 44px; }
.spielplan-kopf h2 { margin: 0 0 8px; }
.spielplan-kopf p { margin: 0; color: var(--weiss-45); }
.spielplan-kopf p.kapitel { color: var(--gedimmt); }

.spielplan {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 28px;
}
.woche-karte { display: block; color: inherit; text-decoration: none; }
.woche-karte .poster {
  opacity: 0.42;
  filter: grayscale(1);
  transition: opacity var(--uebergang), filter var(--uebergang), transform var(--uebergang);
}
.woche-karte:hover .poster,
.woche-karte:focus-visible .poster {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-5px);
}
.woche-karte .kw {
  display: flex;
  justify-content: space-between;
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
  font-family: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--weiss-45);
}
.woche-karte h3 { font-size: 1.05rem; margin: 0 0 6px; }
.woche-karte p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--weiss-45); }
.spielplan-fuss { text-align: center; margin: 56px 0 0; }
.spielplan .hinweis { grid-column: 1 / -1; }

@media (max-width: 1000px) {
  .spielplan { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .buehne h1.buehne-serif-kursiv { font-size: clamp(1.7rem, 9vw, 2.25rem); line-height: 1.3; }
  .aushang { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
  .aushang .plakat { max-width: 240px; margin: 0 auto; }
  .aushang blockquote { font-size: 1.15rem; }
  .spielplan { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
}

/* ---------- Kritiken: Bühnenvorhang (theater_2) als Hintergrund ----------
   Wie auf der Startseite wird die Bühne unter die durchsichtige
   Kopfleiste gezogen; das Bild ist gedimmt und läuft unten in die
   Seitenfarbe aus, damit das Zitat ruhig darüber steht. */
.buehne--kino {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 82vh;
  margin-top: calc(-1 * var(--kopf-hoehe) - 1px);
  padding: calc(120px + var(--kopf-hoehe)) 0 110px;
  overflow: hidden;
}
.buehne--kino .buehne-inhalt { flex: 0 0 auto; }
.hero-bild--kino {
  background-image: url("../kritiken-hintergrund.jpg");
  background-position: center;
  opacity: 0.75;
  filter: none;
}
.hero-bild--kino::after {
  background:
    linear-gradient(
      to bottom,
      rgba(5, 13, 28, 0.7) 0%,
      rgba(5, 13, 28, 0.2) 22%,
      rgba(5, 13, 28, 0.25) 50%,
      rgba(5, 13, 28, 0.7) 80%,
      var(--grund) 100%
    );
}
@media (max-width: 820px) {
  .buehne--kino { min-height: 62vh; padding-bottom: 80px; }
  .hero-bild--kino { background-image: url("../kritiken-hintergrund.jpg"); }
}

/* ---------- Bereich „Essays“ ein- und ausschaltbar ----------
   Alles, was zu den Essays gehört, trägt data-bereich="essays" und ist
   erst sichtbar, wenn app.js nach dem Laden von seite.json die Klasse
   „mit-essays“ an <body> hängt (Schalter „Essays anzeigen“ im CMS). */
body:not(.mit-essays) [data-bereich="essays"] { display: none !important; }

/* ---------- Startseite: Knopf „Empfehlung der Woche“ ----------
   Beim Überfahren leuchtet der Knopf auf: Rand und Schrift werden voll
   weiß, außen entsteht ein weicher Lichtsaum. Keine Bewegung, keine
   Füllung. Ohne Berührung passiert nichts. */
.knopf--licht {
  color: var(--weiss-70);
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(5, 13, 28, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 380ms ease, border-color 380ms ease, box-shadow 380ms ease;
}
.knopf--licht:hover,
.knopf--licht:focus-visible {
  background: rgba(5, 13, 28, 0.25);
  color: #fff;
  border-color: #fff;
  transform: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 26px rgba(255, 255, 255, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .knopf--licht { transition: none; }
}

/* Filmseite mit Banner: Die Bühne rutscht unter die durchsichtige
   Kopfleiste, damit das Szenenbild hinter Logo und Navigation durchläuft
   (wie der Vorhang auf der Startseite). */
.film-buehne--banner {
  margin-top: calc(-1 * var(--kopf-hoehe) - 1px);
  padding-top: var(--kopf-hoehe);
}
.film-buehne--banner .film-schleier {
  background:
    linear-gradient(
      to bottom,
      rgba(5, 13, 28, 0.55) 0%,
      rgba(5, 13, 28, 0.30) 18%,
      rgba(5, 13, 28, 0.68) 60%,
      var(--grund) 100%
    ),
    linear-gradient(to right, rgba(5, 13, 28, 0.55), transparent 55%);
}

/* Kleines Banner (siehe filmSeite): mittig, nicht gekachelt, zum Rand
   hin weich ausblenden, damit kein harter Bildrand entsteht. */
.film-hintergrund--klein {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  opacity: 0.4;
}

/* ---------- Einleitung auf der Startseite ----------
   Wie eine Zwischentitel-Tafel im Stummfilm: ein Schreibmaschinen-
   Kicker zwischen zwei feinen Linien, darunter der Text in kursiver
   Serife, mittig, mit viel Luft. */
.abschnitt--einleitung { padding: 104px 0 88px; text-align: center; }

.einleitung-kicker {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 30px;
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--weiss-45);
}
.einleitung-kicker::before,
.einleitung-kicker::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--linie-hell);
}

.einleitung {
  max-width: 44ch;
  margin: 0 auto;
  font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.55;
  letter-spacing: 0.09em;
  color: var(--weiss-70);
  text-wrap: balance;
}
.einleitung:empty { display: none; }
.einleitung:empty + .einleitung-kicker,
.einleitung-kicker:has(+ .einleitung:empty) { display: none; }

@media (max-width: 820px) {
  .abschnitt--einleitung { padding: 64px 0 8px; }
  .einleitung { font-size: 1.2rem; }
  .einleitung-kicker::before, .einleitung-kicker::after { width: 28px; }
}
/* Epilog unter den neuesten Kritiken: gleiche Tafel, engerer Abstand nach oben */
.abschnitt--epilog { padding-top: 24px; }

/* ---------- Seitennavigation (Kritiken) ---------- */
.seiten {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 64px 0 0;
  flex-wrap: wrap;
}
.seiten[hidden] { display: none; }
.seiten-knopf {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--weiss-70);
  font-family: var(--schrift-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--uebergang), color var(--uebergang), background var(--uebergang);
}
.seiten-knopf:hover:not(:disabled):not(.aktiv) { border-color: var(--linie-hell); color: var(--weiss); }
.seiten-knopf.aktiv { background: var(--weiss); border-color: var(--weiss); color: var(--grund); cursor: default; }
.seiten-knopf:disabled { opacity: 0.3; cursor: default; }
.seiten-pfeil { font-size: 1.3rem; line-height: 1; }
.seiten-punkte { color: var(--weiss-28); padding: 0 4px; }

/* ---------- Herz-Schalter „Nur Empfehlungen“ (Kritikenseite) ----------
   Runder Knopf mit Herz-Umriss. Beim Überfahren leuchtet das Herz rot
   auf und pocht einmal; eingeschaltet bleibt es gefüllt und glüht. */
.chip--herz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  color: var(--weiss-45);
}
.chip--herz .herz {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  transition: fill var(--uebergang), stroke var(--uebergang), transform 220ms ease;
}
.chip--herz:hover,
.chip--herz:focus-visible {
  border-color: #E03131;
  color: #FF4D4D;
  background: rgba(224, 49, 49, 0.10);
  box-shadow: 0 0 18px rgba(255, 77, 77, 0.35);
}
.chip--herz:hover .herz,
.chip--herz:focus-visible .herz {
  fill: #FF4D4D;
  animation: herz-pochen 620ms ease;
}
/* Eingeschaltet: dauerhaft rot gefüllt */
.chip--herz.aktiv {
  background: rgba(224, 49, 49, 0.16);
  border-color: #FF4D4D;
  color: #FF4D4D;
  box-shadow: 0 0 22px rgba(255, 77, 77, 0.40);
}
.chip--herz.aktiv .herz { fill: #FF4D4D; }

@keyframes herz-pochen {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22); }
  55%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .chip--herz .herz { transition: none; animation: none !important; }
}

/* ---------- Abschnittsüberschriften der Startseite als Titelkarte ----------
   Wie ein Haupttitel im Filmvorspann: darüber eine kleine, weit
   gesperrte Zeile („presents“), darunter der Titel in Serife,
   Großbuchstaben, gesperrt, mit feinem Strich als Abschluss. */
body[data-seite="start"] .abschnitt-kopf--mitte .kapitel {
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em; /* gleicht den Nachlauf aus, damit es mittig sitzt */
  color: var(--weiss-28);
  margin-bottom: 22px;
}
body[data-seite="start"] .abschnitt-kopf--mitte h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 0;
  font-family: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.55rem, 2.8vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  text-transform: uppercase;
  color: var(--weiss);
}
@media (max-width: 820px) {
  body[data-seite="start"] .abschnitt-kopf--mitte h2 { letter-spacing: 0.14em; text-indent: 0.14em; }
}

/* ---------- Herz-Knopf zur Empfehlung der Woche (Startseite) ----------
   Gleiche Sprache wie der Herz-Filter auf der Kritikenseite, nur größer:
   feiner Umriss auf dem Vorhang, beim Überfahren rot gefüllt und glühend. */
.herz-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  color: var(--weiss-70);
  background: rgba(5, 13, 28, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: color 380ms ease, border-color 380ms ease, box-shadow 380ms ease, background 380ms ease;
}
.herz-knopf .herz {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill var(--uebergang), transform 220ms ease;
}
.herz-knopf:hover,
.herz-knopf:focus-visible {
  color: #FF4D4D;
  border-color: #FF4D4D;
  background: rgba(224, 49, 49, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 77, 77, 0.35), 0 0 26px rgba(255, 77, 77, 0.35);
}
.herz-knopf:hover .herz,
.herz-knopf:focus-visible .herz {
  fill: #FF4D4D;
  animation: herz-pochen 620ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .herz-knopf, .herz-knopf .herz { transition: none; animation: none !important; }
}

/* ---------- Startseite: mehr Luft zwischen den Abschnitten ----------
   Ab dem Prolog bekommt jeder Block deutlich mehr Abstand, damit die
   Seite ruhiger wirkt und jeder Teil für sich steht. */
body[data-seite="start"] .abschnitt { padding: 150px 0; }
body[data-seite="start"] .abschnitt--einleitung { padding: 130px 0 140px; }
body[data-seite="start"] .abschnitt--epilog { padding-top: 40px; padding-bottom: 140px; }
body[data-seite="start"] .abschnitt-kopf { margin-bottom: 68px; }
body[data-seite="start"] .abschnitt-fuss { margin-top: 62px; }

@media (max-width: 820px) {
  body[data-seite="start"] .abschnitt { padding: 96px 0; }
  body[data-seite="start"] .abschnitt--einleitung { padding: 80px 0 90px; }
  body[data-seite="start"] .abschnitt--epilog { padding-top: 24px; padding-bottom: 90px; }
}

/* ---------- Startseite: Angaben unter den Postern mittig ---------- */
body[data-seite="start"] .raster--mitte .karte { text-align: center; }
body[data-seite="start"] .raster--mitte .karte .karte-marken { justify-content: center; }

/* Über-Seite ohne Bühne: der Redaktionsblock rückt unter die Kopfleiste */
.abschnitt--redaktion { padding-top: 120px; }
@media (max-width: 820px) {
  .abschnitt--redaktion { padding-top: 80px; }
}

/* ---------- Epilog mit Kinobestuhlung im Hintergrund ----------
   Das Foto liegt gedimmt hinter der Tafel und läuft nach oben und
   unten in die Seitenfarbe aus, damit kein harter Kasten entsteht. */
.abschnitt--epilog {
  position: relative;
  overflow: hidden;
}
.epilog-bild {
  position: absolute;
  inset: 0;
  background: url("../epilog-hintergrund.jpg") center 55% / cover no-repeat;
  opacity: 0.32;
  filter: saturate(0.85);
  pointer-events: none;
}
.epilog-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--grund) 0%,
    rgba(5, 13, 28, 0.55) 26%,
    rgba(5, 13, 28, 0.55) 74%,
    var(--grund) 100%
  );
}
.abschnitt--epilog .huelle { position: relative; z-index: 1; }

/* ---------- Prolog mit Kinopublikum im Hintergrund ----------
   Gleiche Behandlung wie beim Epilog: gedimmt, oben und unten in die
   Seitenfarbe auslaufend, damit die Tafel darüber ruhig steht. */
.abschnitt--prolog {
  position: relative;
  overflow: hidden;
}
.prolog-bild {
  position: absolute;
  inset: 0;
  background: url("../prolog-hintergrund.jpg") center 42% / cover no-repeat;
  opacity: 0.36;
  filter: saturate(0.95);
  pointer-events: none;
}
.prolog-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--grund) 0%,
    rgba(5, 13, 28, 0.52) 26%,
    rgba(5, 13, 28, 0.52) 74%,
    var(--grund) 100%
  );
}
.abschnitt--prolog .huelle { position: relative; z-index: 1; }

/* ---------- Handy-Feinschliff ----------
   Größere Tippflächen, zweispaltige Poster auf der Startseite und der
   Cine-Quiz-Link im Klappmenü (die Pille daneben ist dort ausgeblendet). */
.nav-quiz { display: none; }

@media (max-width: 820px) {
  /* Cine-Quiz ist über die Pille nicht erreichbar – im Menü nachreichen */
  .nav-quiz { display: block; }

  /* Tippflächen auf mindestens ~44 px bringen */
  .nav-schalter { min-height: 44px; padding: 11px 16px; }
  .kopf .marke, .fuss .marke { display: inline-flex; align-items: center; padding: 6px; }
  .fuss-nav { gap: 6px 26px; }
  .fuss-nav a { display: inline-block; padding: 11px 2px; }
  .mehr { display: inline-block; padding: 12px 6px; }
  .zurueck { display: inline-block; padding: 10px 4px; }

  /* Startseite: zwei Poster nebeneinander statt eines pro Zeile */
  body[data-seite="start"] .raster--mitte {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 16px;
  }
  body[data-seite="start"] .raster--mitte .karte h3 { font-size: 0.98rem; }
  body[data-seite="start"] .raster--mitte .karte .meta { font-size: 0.68rem; }
  body[data-seite="start"] .raster--mitte .karte .karte-marken { gap: 7px; }
}

/* ---------- Menü-Tafel auf dem Handy ----------
   Statt Klappmenü eine vollflächige Tafel mit Symbolkacheln über einem
   unscharfen Hintergrund. Nur unter 820 px sichtbar – am Desktop bleibt
   die normale Navigationsleiste. */
.menue-tafel {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 88px 22px 40px;
  background: rgba(5, 13, 28, 0.72);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  backdrop-filter: blur(26px) saturate(1.1);
  animation: menue-auf 260ms ease both;
}
.menue-tafel--offen { display: flex; }
body.menue-aktiv { overflow: hidden; }

@keyframes menue-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.menue-schliessen {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  background: transparent;
  color: var(--weiss);
  cursor: pointer;
}

.menue-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.menue-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 118px;
  padding: 22px 12px;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--weiss-70);
  font-family: var(--schrift-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--uebergang), color var(--uebergang),
    background var(--uebergang), transform var(--uebergang);
}
.menue-kachel:hover,
.menue-kachel:focus-visible {
  border-color: var(--linie-hell);
  color: var(--weiss);
  background: rgba(255, 255, 255, 0.08);
}
.menue-kachel:active { transform: scale(0.97); }
.menue-kachel--aktiv {
  border-color: var(--weiss);
  color: var(--weiss);
  background: rgba(255, 255, 255, 0.10);
}
.menue-symbol { width: 30px; height: 30px; }

/* Zwei Kacheln pro Reihe passen auch auf schmale Geräte; auf sehr
   kleinen Displays reicht eine Spalte. */
@media (max-width: 340px) {
  .menue-raster { grid-template-columns: 1fr; }
  .menue-kachel { flex-direction: row; justify-content: flex-start; min-height: 64px; gap: 16px; }
}

/* Sicherheitsnetz: am Desktop bleibt die Tafel immer verborgen */
@media (min-width: 821px) {
  .menue-tafel { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .menue-tafel { animation: none; }
  .menue-kachel { transition: none; }
}

/* Auf dem Handy erscheinen die Elemente langsamer und rücken etwas
   weiter nach – das Scrollen wirkt dadurch ruhiger. */
@media (max-width: 820px) {
  .enthuellen {
    transform: translateY(34px);
    transition-duration: 1400ms;
    transition-delay: calc(var(--stufe, 0) * 120ms);
  }
}

/* ---------- Filter als Knöpfe (Art und Genre) ----------
   Statt Auswahlfeldern stehen die Werte als Chips nebeneinander; der
   aktive Knopf ist weiß gefüllt. Die Gruppe nimmt die volle Breite ein,
   damit die Genres sauber umbrechen. */
.filter-gruppe {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}
.filter-titel {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--weiss-28);
}
.filter-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip--filter {
  padding: 9px 16px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.chip--filter.aktiv {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--grund);
}

@media (max-width: 820px) {
  .filter-knoepfe { gap: 7px; }
  .chip--filter { padding: 10px 13px; font-size: 0.66rem; }
}

/* ---------- Genre-Filter als Kachelleiste ----------
   Seitlich scrollbar wie das Laufband auf der Startseite: die Kacheln
   zeigen ein Szenenbild, der aktive Eintrag ist hell umrandet und
   farbig, die anderen bleiben grau und zurückgenommen. */
.filter-gruppe--breit { width: 100%; min-width: 0; }

/* Hülle für die Pfeile */
.genre-huelle { position: relative; }

.genre-leiste {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  padding: 2px 0 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 2%, #000 96%, transparent);
}
.genre-leiste::-webkit-scrollbar { display: none; }

/* Pfeil am Rand statt Scrollbalken */
.genre-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  background: rgba(5, 13, 28, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--weiss);
  cursor: pointer;
  transition: border-color var(--uebergang), background var(--uebergang);
}
.genre-pfeil:hover { border-color: var(--weiss); background: rgba(5, 13, 28, 0.92); }
.genre-pfeil[hidden] { display: none; }
.genre-pfeil--links { left: -6px; }
.genre-pfeil--rechts { right: -6px; }

.genre-kachel {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  height: 136px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 12px;
  outline: 0;
  background: var(--grund-2);
  color: var(--weiss-70);
  font-family: var(--schrift-text);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--uebergang), color var(--uebergang), transform var(--uebergang);
}
.genre-kachel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: grayscale(1);
  transition: opacity var(--uebergang), filter var(--uebergang), transform var(--uebergang);
}
.genre-kachel span {
  position: relative;
  padding: 0 10px;
  text-shadow: 0 1px 10px rgba(5, 13, 28, 0.9);
}
.genre-kachel:hover,
.genre-kachel:focus-visible { color: var(--weiss); }
.genre-kachel:focus-visible { outline: 2px solid var(--weiss); outline-offset: 2px; }
.genre-kachel:hover img,
.genre-kachel:focus-visible img {
  opacity: 0.5;
  filter: grayscale(0.3);
  transform: scale(1.04);
}
/* Aktiv erkennt man am voll sichtbaren, farbigen Bild – ohne Rahmen. */
.genre-kachel.aktiv { color: var(--weiss); }
.genre-kachel.aktiv img { opacity: 0.6; filter: none; }

@media (max-width: 820px) {
  .genre-kachel { width: 190px; height: 112px; font-size: 0.68rem; }
  .genre-leiste { gap: 11px; }
  .genre-pfeil { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .genre-kachel, .genre-kachel img { transition: none; }
  .genre-kachel:hover img { transform: none; }
}

/* Der Facetten-Behälter darf nicht mit der Kachelleiste mitwachsen,
   sonst scrollt die ganze Seite statt der Leiste. */
.facetten { flex: 1 1 100%; min-width: 0; max-width: 100%; }

/* Kacheln, deren Bild den Genre-Namen schon enthält: eigene Schrift
   ausblenden (bleibt für Screenreader) und das Motiv klarer zeigen. */
.genre-kachel--beschriftet span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.genre-kachel--beschriftet img { opacity: 0.68; filter: grayscale(0.35); }
.genre-kachel--beschriftet:hover img,
.genre-kachel--beschriftet:focus-visible img { opacity: 0.88; filter: grayscale(0); }
.genre-kachel--beschriftet.aktiv img { opacity: 1; filter: none; }

/* ---------- Genre-Leiste über die volle Breite ----------
   Wie das Laufband auf der Startseite läuft die Leiste von Rand zu Rand,
   während die Kacheln bündig zur Textspalte beginnen. */
.filter-gruppe--breit {
  --rand: max(24px, calc((100vw - var(--breite)) / 2));
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.filter-gruppe--breit .filter-titel { padding-left: var(--rand); }
.filter-gruppe--breit .genre-leiste {
  padding-left: var(--rand);
  padding-right: var(--rand);
}
.filter-gruppe--breit .genre-pfeil--links { left: 14px; }
.filter-gruppe--breit .genre-pfeil--rechts { right: 14px; }

/* ---------- Kritikenseite: Suche, Art und Jahr mittig ----------
   Die Genre-Leiste bleibt über die volle Breite, alles andere steht
   zentriert darunter. */
.werkzeuge .feld { margin-left: auto; margin-right: auto; }
.facetten { justify-content: center; }
#f-art, .facetten .facette {
  align-items: center;
  text-align: center;
  width: auto;
}
#f-art .filter-knoepfe { justify-content: center; }

/* ---------- Suchfeld auf der Kritikenseite: zurückgenommen ----------
   Nur eine feine Linie statt Kasten, mit kleiner Lupe davor. Beim
   Hineinklicken wird die Linie heller – mehr braucht es nicht. */
.werkzeuge > .feld {
  flex: 0 1 320px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: 10px 6px 10px 30px;
  font-size: 0.84rem;
  text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.3'/%3E%3Cline x1='15.4' y1='15.4' x2='20.5' y2='20.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 2px center;
  background-size: 17px 17px;
  transition: border-color var(--uebergang);
}
.werkzeuge > .feld::placeholder { color: var(--weiss-28); }
.werkzeuge > .feld:focus { border-bottom-color: var(--linie-hell); }

/* ---------- Erscheinungsjahr: zurückgenommenes Auswahlfeld ----------
   Kein gefüllter Kasten mehr, nur Schrift mit feiner Linie darunter –
   passend zum dezenten Suchfeld darüber. */
.facetten select.feld {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: 9px 26px 9px 2px;
  font-size: 0.8rem;
  color: var(--weiss-70);
  background-position: calc(100% - 10px) 52%, calc(100% - 5px) 52%;
  transition: border-color var(--uebergang), color var(--uebergang);
}
.facetten select.feld:hover,
.facetten select.feld:focus {
  border-bottom-color: var(--linie-hell);
  color: var(--weiss);
}

/* Beschriftungen „Art“ und „Erscheinungsjahr“ ausblenden – die Knöpfe
   sprechen für sich. Für Screenreader bleiben sie erhalten. */
#f-art .filter-titel,
#f-genre .filter-titel,
.facetten .facette-titel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Auf dem Handy etwas weniger Luft als am Schreibtisch, sonst muss man
   bis zu den Postern zu weit scrollen. */
@media (max-width: 820px) {
  .werkzeuge { gap: 34px 16px; margin-bottom: 52px; }
  .facetten { gap: 32px 22px; }
}

/* ---------- Aushang: Regie in eigener Zeile ----------
   Der Name soll nicht mit der Genre-Aufzählung verschmelzen, deshalb
   steht er eine Zeile tiefer hinter einem zurückgenommenen Wort „Regie“. */
.aushang .meta:has(+ .meta--regie) { margin-bottom: 7px; }
.aushang .meta--regie { color: var(--weiss-70); }
.aushang .meta--regie .meta-marke {
  margin-right: 12px;
  color: var(--weiss-28);
}

/* ---------- Aushang zurückgenommen ----------
   Der Kasten soll wirken wie ein Aushang im Foyer, nicht wie ein Plakat:
   das Posterbild dahinter nur noch angedeutet, die Auszeichnung ohne
   Pille, Titel und Zitat eine Spur kleiner, der Knopf als feine Linie
   statt weißer Fläche. */
.aushang-hg { opacity: 0.45; filter: blur(52px) saturate(0.5) brightness(0.26); }
.aushang::after {
  background: linear-gradient(90deg, rgba(5, 13, 28, 0.35), rgba(5, 13, 28, 0.85));
}

.aushang .plakat .poster {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Auszeichnung: nur noch Schrift, keine umrandete Pille */
.aushang .marker {
  border: 0;
  border-radius: 0;
  padding: 0;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--weiss-45);
}
.aushang .marker-zeile { gap: 16px; margin-bottom: 18px; }

.aushang h2 {
  font-weight: 500;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.12;
}

.aushang blockquote {
  padding-left: 18px;
  border-left-width: 1px;
  border-left-color: rgba(255, 255, 255, 0.14);
  font-size: 1.12rem;
  line-height: 1.58;
}

/* Knopf als feine Linie – im Quiz bleibt der gefüllte Knopf unberührt */
.aushang .knopf--voll {
  background: transparent;
  color: var(--weiss-70);
  border-color: var(--linie-hell);
}
.aushang .knopf--voll:hover {
  background: transparent;
  color: var(--weiss);
  border-color: var(--weiss);
}

/* ---------- Aushang auf Tablet und Handy ----------
   Bis hinunter zu 700 px bleibt die zweispaltige Desktop-Anordnung, nur
   etwas enger – ein Tablet im Hochformat sieht also aus wie der große
   Bildschirm. Erst auf dem Handy (unter 500 px) steht alles mittig
   untereinander, und die Auszeichnungszeile entfällt. */
@media (min-width: 701px) and (max-width: 820px) {
  .aushang {
    grid-template-columns: 240px 1fr;
    gap: 40px;
    padding: 40px;
  }
  .aushang .plakat { max-width: none; margin: 0; }
}

@media (max-width: 500px) {
  .aushang .marker-zeile { display: none; }

  .aushang > div:not(.aushang-hg) { text-align: center; }
  .aushang .karte-marken { justify-content: center; }
  .aushang .knopf-reihe { justify-content: center; }

  .aushang blockquote {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }
}

/* ---------- Filmkritik: das Plakat als Farbfläche ----------
   Statt eines Szenenbilds liegt das Filmplakat selbst hinter Poster und
   Daten – so stark weichgezeichnet, dass nur noch seine Farben übrig
   bleiben. Der Rahmen reicht bewusst über die Fläche hinaus, sonst wären
   die ausgefransten Ränder der Weichzeichnung zu sehen. Farbiger als im
   Empfehlungskasten: dort stört Farbe, hier ist sie der ganze Zweck. */
.film-hintergrund--plakat {
  inset: -90px;
  background-position: center center;
  filter: blur(64px) saturate(1.5) brightness(0.62);
  opacity: 0.8;
}

/* Der Schleier darüber nur noch so dunkel, wie die Lesbarkeit verlangt –
   und ohne den seitlichen Verlauf, damit die Farbe gleichmäßig trägt. */
.film-buehne--plakat .film-schleier {
  background: linear-gradient(
    to bottom,
    rgba(5, 13, 28, 0.5) 0%,
    rgba(5, 13, 28, 0.26) 22%,
    rgba(5, 13, 28, 0.62) 68%,
    var(--grund) 100%
  );
}

/* ---------- Prolog und Epilog: Bildband über dem Text ----------
   Das Hintergrundbild trägt nur noch die Überschrift. Der eigentliche
   Text steht darunter auf ruhigem Grund und muss sich nicht mehr gegen
   das Motiv behaupten. */
.einleitung-tafel {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  margin-bottom: 56px;
}
.einleitung-tafel .huelle { position: relative; z-index: 1; }
.einleitung-tafel .einleitung-kicker { margin: 0; }

/* Der Abschnitt selbst braucht den Rahmen nicht mehr – der sitzt jetzt
   am Bildband. Oben kein Abstand, sonst entsteht ein Loch über dem Bild. */
.abschnitt--einleitung { padding-top: 0; overflow: visible; }

/* Ohne Text ergibt auch das Bildband keinen Sinn. */
.abschnitt--einleitung:has(.einleitung:empty) .einleitung-tafel { display: none; }

@media (max-width: 820px) {
  .einleitung-tafel { padding: 72px 0; margin-bottom: 40px; }
}

/* Bildbänder höher, damit die Motive wirken – und die Überschrift ohne
   die flankierenden Striche, sie steht für sich. */
.einleitung-tafel { padding: 176px 0; }
.einleitung-tafel .einleitung-kicker::before,
.einleitung-tafel .einleitung-kicker::after { display: none; }
.einleitung-tafel .einleitung-kicker { gap: 0; }

@media (max-width: 820px) {
  .einleitung-tafel { padding: 118px 0; }
}

/* Die Überschrift steht jetzt beim Text, nicht mehr im Bild. Das Band ist
   damit reine Fläche und bekommt eine feste Höhe statt Innenabstand. */
.einleitung-tafel {
  height: clamp(280px, 34vw, 470px);
  padding: 0;
  margin-bottom: 52px;
}
.abschnitt--einleitung .einleitung-kicker::before,
.abschnitt--einleitung .einleitung-kicker::after { display: none; }
.abschnitt--einleitung .einleitung-kicker { gap: 0; margin: 0 0 26px; }

@media (max-width: 820px) {
  .einleitung-tafel { height: clamp(220px, 54vw, 320px); margin-bottom: 38px; }
}

/* Beide Bänder deutlicher: Da der Text nicht mehr darüber liegt, darf das
   Motiv mehr zeigen – höhere Deckkraft, hellerer Schleier, volle Sättigung.
   Oben und unten läuft es weiterhin in die Seitenfarbe aus. */
.prolog-bild { opacity: 0.58; filter: saturate(1); }
.epilog-bild { opacity: 0.54; filter: saturate(1); }
.prolog-bild::after,
.epilog-bild::after {
  background: linear-gradient(
    to bottom,
    var(--grund) 0%,
    rgba(5, 13, 28, 0.3) 24%,
    rgba(5, 13, 28, 0.3) 76%,
    var(--grund) 100%
  );
}

/* Noch etwas mehr Höhe für die beiden Bildbänder. */
.einleitung-tafel { height: clamp(340px, 41vw, 560px); }

@media (max-width: 820px) {
  .einleitung-tafel { height: clamp(260px, 62vw, 380px); }
}

/* Das Bildband soll direkt unter dem Plakat-Laufband anschließen – also
   kein Abstand darüber. Der weiche Übergang oben schrumpft auf wenige
   Pixel, sonst entsteht wieder eine dunkle Zone, die wie eine Lücke wirkt. */
body[data-seite="start"] .abschnitt--einleitung { padding-top: 0; }

.prolog-bild::after,
.epilog-bild::after {
  background: linear-gradient(
    to bottom,
    rgba(5, 13, 28, 0.62) 0%,
    rgba(5, 13, 28, 0.3) 5%,
    rgba(5, 13, 28, 0.3) 76%,
    var(--grund) 100%
  );
}

@media (max-width: 820px) {
  body[data-seite="start"] .abschnitt--einleitung { padding-top: 0; }
}

/* Doch ein wenig Luft über dem Bildband – aber deutlich weniger als die
   130 px von vorher. */
body[data-seite="start"] .abschnitt--einleitung { padding-top: 56px; }

@media (max-width: 820px) {
  body[data-seite="start"] .abschnitt--einleitung { padding-top: 36px; }
}

/* Obere Kante genauso weich auslaufen lassen wie die untere – der Verlauf
   ist jetzt symmetrisch. */
.prolog-bild::after,
.epilog-bild::after {
  background: linear-gradient(
    to bottom,
    var(--grund) 0%,
    rgba(5, 13, 28, 0.3) 24%,
    rgba(5, 13, 28, 0.3) 76%,
    var(--grund) 100%
  );
}

/* ---------- Überschrift und Text wieder auf dem Bild ----------
   Höhe und Platz des Bandes bleiben wie gehabt; der Inhalt steht mittig
   darauf. Aus fester Höhe wird eine Mindesthöhe, damit ein längerer Text
   nie aus dem Bild läuft. */
.einleitung-tafel {
  min-height: clamp(340px, 41vw, 560px);
  height: auto;
  display: flex;
  align-items: center;
  padding: 48px 0;
  margin-bottom: 0;
}
.einleitung-tafel > .huelle { width: 100%; }

/* Etwas zurückgenommen, damit die Schrift gut lesbar bleibt. */
.prolog-bild { opacity: 0.44; }
.epilog-bild { opacity: 0.41; }
.prolog-bild::after,
.epilog-bild::after {
  background: linear-gradient(
    to bottom,
    var(--grund) 0%,
    rgba(5, 13, 28, 0.44) 24%,
    rgba(5, 13, 28, 0.44) 76%,
    var(--grund) 100%
  );
}

@media (max-width: 820px) {
  .einleitung-tafel { min-height: clamp(260px, 62vw, 380px); height: auto; padding: 40px 0; }
}

/* Auf dem Handy dürfen die Bänder deutlich höher sein – auf dem schmalen
   Schirm wirkt ein flacher Streifen sonst verloren. */
@media (max-width: 820px) {
  .einleitung-tafel { min-height: clamp(380px, 96vw, 500px); }
}

/* Prolog: Überschrift und Text etwas tiefer im Bild – die Gesichter im
   oberen Bilddrittel bleiben so frei. */
.abschnitt--prolog .einleitung-tafel > .huelle { transform: translateY(38px); }

@media (max-width: 820px) {
  .abschnitt--prolog .einleitung-tafel > .huelle { transform: translateY(26px); }
}

/* Prolog noch deutlich tiefer. */
.abschnitt--prolog .einleitung-tafel > .huelle { transform: translateY(112px); }

@media (max-width: 820px) {
  .abschnitt--prolog .einleitung-tafel > .huelle { transform: translateY(74px); }
}

/* Prolog noch ein Stück tiefer. */
.abschnitt--prolog .einleitung-tafel > .huelle { transform: translateY(152px); }

@media (max-width: 820px) {
  .abschnitt--prolog .einleitung-tafel > .huelle { transform: translateY(100px); }
}

/* Durch die Verschiebung reicht der Text fast an die Unterkante – das Band
   bekommt daher etwas mehr Höhe, damit unten wieder Luft bleibt. */
.einleitung-tafel { min-height: clamp(380px, 46vw, 630px); }

@media (max-width: 820px) {
  .einleitung-tafel { min-height: clamp(430px, 108vw, 560px); }
}

/* Prolog noch tiefer; das Band wächst entsprechend mit, damit unten
   genug Luft bleibt. */
.abschnitt--prolog .einleitung-tafel > .huelle { transform: translateY(184px); }
.einleitung-tafel { min-height: clamp(410px, 49vw, 672px); }

@media (max-width: 820px) {
  .abschnitt--prolog .einleitung-tafel > .huelle { transform: translateY(122px); }
  .einleitung-tafel { min-height: clamp(470px, 118vw, 610px); }
}

/* Hero auf dem Handy eine Spur kleiner. */
@media (max-width: 820px) {
  .buehne--gross .hero-marke { font-size: clamp(2.1rem, 10.4vw, 3.1rem); }
  .buehne--gross h1.hero-titel { font-size: 1.2rem; }
}

/* „Neueste Kritiken" auf dem Handy eine Spur kleiner. */
@media (max-width: 820px) {
  body[data-seite="start"] .abschnitt-kopf--mitte h2 { font-size: 1.3rem; }
}

/* ---------- Aushang-Hintergrund wie auf der Kritikseite ----------
   Das Plakat liegt stark weichgezeichnet dahinter, die Farben des Films
   tragen die Fläche. Gleiche Werte wie bei den Filmkritiken. */
.aushang-hg {
  inset: -90px;
  background-position: center center;
  filter: blur(64px) saturate(1.5) brightness(0.62);
  opacity: 0.8;
}
.aushang::after {
  background: linear-gradient(
    to bottom,
    rgba(5, 13, 28, 0.42) 0%,
    rgba(5, 13, 28, 0.2) 24%,
    rgba(5, 13, 28, 0.55) 72%,
    rgba(5, 13, 28, 0.75) 100%
  );
}

/* Auf der Startseite steht „Empfehlung der Woche" jetzt als Überschrift
   über dem Kasten – die Auszeichnung darin wäre doppelt. Die Kalenderwoche
   bleibt stehen. */
body[data-seite="start"] #empfehlung-der-woche .aushang .marker { display: none; }

/* ---------- Ohne Haarlinien ----------
   Der Empfehlungskasten und die Poster darin bzw. auf der Kritikseite
   stehen ohne Umrandung – der weiche Schatten genügt als Abgrenzung. */
.aushang { border: 0; }
.aushang .plakat .poster {
  border: 0;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.film-kopf .poster { border: 0; }

/* Auf dem Handy wischt man die Genre-Leiste einfach zur Seite – die
   Pfeile sind dort überflüssig. */
@media (max-width: 820px) {
  .genre-pfeil { display: none; }
}

/* ---------- Prolog und Epilog auf dem Handy ----------
   Die starke Verschiebung nach unten stammt von der Desktop-Ansicht; auf
   dem schmalen Schirm schob sie den Text aus dem Bild heraus. Hier nur
   ein kleiner Versatz, und der Text etwas kleiner, damit beides sicher
   auf dem Motiv liegt. */
@media (max-width: 820px) {
  .abschnitt--einleitung .einleitung { font-size: 1.05rem; }
  .abschnitt--prolog .einleitung-tafel > .huelle,
  .abschnitt--epilog .einleitung-tafel > .huelle { transform: translateY(24px); }
}