/* ===========================================================================
   KinoGrid – Design-System
   Umsetzung von Kapitel 13 des Master-Briefings.

   Aufbau:
     1  Tokens
     2  Reset und Basis
     3  Layout
     4  Typografie
     5  Header
     6  Buttons
     7  Chips, Badges, Pills
     8  Suche
     9  Hero
    10  Filmkarten und Raster
    11  Detailseite
    12  Listenseiten und Filter
    13  Formulare
    14  Hinweise und Meldungen
    15  Fußzeile
    16  Werbeflächen
    17  Hilfsklassen
    18  Responsive
    19  Bewegung
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1  Tokens
   --------------------------------------------------------------------------- */
:root {
  /* Farben – exakt aus Briefing 13.3 */
  --kg-ink: #15171c;
  --kg-soft-ink: #656b76;
  --kg-faint-ink: #8d929b;
  --kg-paper: #f3f5f8;
  --kg-surface: rgba(255, 255, 255, 0.78);
  --kg-solid: #ffffff;
  --kg-line: rgba(24, 28, 36, 0.09);
  --kg-line-strong: rgba(24, 28, 36, 0.15);
  --kg-black: #121318;
  --kg-purple: #7957f6;
  --kg-blue: #77baf7;
  --kg-mint: #85ddd0;
  --kg-peach: #f0ae88;
  --kg-yellow: #f4d77d;
  --kg-red: #e46b72;
  --kg-shadow: 0 24px 70px rgba(38, 42, 51, 0.12);

  /* Abgeleitete Farbwerte für Zustände */
  --kg-purple-soft: rgba(121, 87, 246, 0.10);
  --kg-purple-line: rgba(121, 87, 246, 0.22);
  --kg-purple-ink: #5a3ad0;          /* dunkler für Text auf hellem Grund */
  --kg-mint-soft: rgba(133, 221, 208, 0.18);
  --kg-mint-ink: #0f6b5c;
  --kg-yellow-soft: rgba(244, 215, 125, 0.22);
  --kg-yellow-ink: #7a5a12;
  --kg-red-soft: rgba(228, 107, 114, 0.14);
  --kg-red-ink: #b03a41;

  /* Radien – Briefing 13.6 */
  --radius-sm: 9px;
  --radius-control: 12px;
  --radius-button: 13px;
  --radius-card: 17px;
  --radius-panel: 23px;
  --radius-hero: 28px;
  --radius-pill: 999px;

  /* Wie weit der Inhalt der Kopfleisten-Pille von deren Aussenkante einrückt.

     Die Pille ist eine Glasfläche mit eigenem Innenabstand; Logo und
     Merkzeichen sitzen deshalb nicht auf der Kante der Seite, sondern um
     diesen Betrag weiter innen. Der Hero richtet seinen Text an derselben
     Linie aus – auf dem Logo, nicht auf der Pillenkante, denn die sieht
     niemand. Steht der Wert an einer Stelle, können die beiden nicht
     auseinanderlaufen. Der Rahmen von 1px kommt beim Gebrauch dazu. */
  --header-inset: 18px;

  /* Wo die Überschrift steht – gemessen im Hero der Startseite.

     Dort ergibt sich die Höhe aus drei Teilen: 48 Pixel Polsterung des
     Heros, die 26 Pixel hohe Vertrauenszeile und 24 Pixel Abstand. Macht
     98. Auf dem Handy ist die Vertrauenszeile drei Pixel flacher, deshalb
     dort 95.

     Die Unterseiten rechnen ihre Kopfpolsterung daraus zurück, statt eine
     eigene Zahl zu führen. Ändert sich der Hero, ist dies die eine Stelle,
     an der nachgemessen werden muss. */
  --titel-hoehe: 98px;

  /* Was von der Titelhöhe nach der Brotkrumenzeile noch übrig bleibt:
     deren Abstand zur Kopfleiste, ihre Zeile und ihr Abstand nach unten
     sind schon verbraucht. Als Rechnung notiert, damit die Überschrift auf
     ihrer Linie bleibt, wenn an der Brotkrume etwas geändert wird. */
  --kopf-polster: calc(
    var(--titel-hoehe) - var(--space-7) - 24px - var(--space-4)
  );

  /* Kantenlänge der Melde-Schaltfläche in der Anbieterzeile. Steht hier,
     weil die Anzeigenzeile denselben Platz freihalten muss – sonst laufen
     die Knöpfe der beiden Zeilentypen um genau diesen Betrag auseinander. */
  --offer-report-size: 34px;

  /* Schatten – Briefing 13.7: weich, breit, wenig deckend */
  --shadow-card: 0 14px 34px rgba(30, 35, 46, 0.11);
  --shadow-panel: 0 24px 70px rgba(38, 42, 51, 0.12);
  --shadow-glass: 0 10px 28px rgba(38, 42, 51, 0.06);
  --shadow-hover: 0 20px 44px rgba(30, 35, 46, 0.15);

  /* Layout – Briefing 13.2 */
  --container: 1120px;
  --gutter: 24px;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Typografie – Briefing 13.4: nur die Gewichte 400 und 500 */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Bewegung – Briefing 13.11 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 180ms;
}

/* ---------------------------------------------------------------------------
   2  Reset und Basis
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Sprungmarken sollen nicht bündig an der Fensterkante kleben –
     sonst wirkt die Überschrift wie abgeschnitten. */
  scroll-padding-top: var(--space-6);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--kg-ink);
  background: var(--kg-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Weiche radiale Farbakzente auf der Produktfläche, Briefing 13.2 */
  background-image:
    radial-gradient(58rem 40rem at 78% -8%, rgba(121, 87, 246, 0.10), transparent 62%),
    radial-gradient(46rem 34rem at 6% 4%, rgba(119, 186, 247, 0.12), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;

  /* Kein horizontales Scrollen, Briefing 13.12 */
  overflow-x: hidden;
  min-width: 320px;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-color: var(--kg-line-strong);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Sichtbarer Fokus – Briefing 22, WCAG 2.2 */
:focus-visible {
  outline: 2px solid var(--kg-purple);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--kg-purple-soft);
}

/* Sprunglink für Tastatur- und Screenreader-Nutzung */
.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 100;
  padding: 10px 18px;
  background: var(--kg-black);
  color: #fff;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: top var(--duration) var(--ease);
}

.skip-link:focus {
  top: 12px;
}

/* ---------------------------------------------------------------------------
   3  Layout
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  margin-block: var(--space-9);
}

.section--tight {
  margin-block: var(--space-7);
}

/* Noch enger: für Blöcke, die inhaltlich zusammengehören und deshalb nicht
   wie eigenständige Abschnitte auseinanderfallen sollen. */
.section--snug {
  margin-block: var(--space-5);
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.section__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.022em;
}

.section__subtitle {
  margin: var(--space-1) 0 0;
  color: var(--kg-soft-ink);
  font-size: 0.9375rem;
}

.section__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--kg-ink);
  text-decoration: none;
  white-space: nowrap;
}

.section__link:hover {
  text-decoration: underline;
}

/* Glasfläche – Briefing 13.5, gezielt eingesetzt, nicht überall */
.glass {
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  box-shadow: var(--shadow-glass);
}

.panel {
  background: var(--kg-solid);
  border: 1px solid var(--kg-line);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.panel--glass {
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.panel__title {
  margin: 0 0 var(--space-4);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.018em;
}

/* Überschrift mit Trennlinie darunter. Bewusst als eigene Klasse und
   nicht auf .panel__title allgemein: Die Klasse steht an gut zwanzig
   Stellen quer über die Seite, teils in Kästen, die nur eine kurze Liste
   enthalten – dort wäre die Linie reiner Zierrat. */
.panel__title--divided {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--kg-line);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* Zwei gleich hohe Kästen statt zweier verschieden hoher.
   Bewusst als Zusatz und nicht in .grid-2 selbst: Auf Artikel-, Autor- und
   Staffelseiten steht dort eine Hauptspalte neben einer Seitenspalte, und
   die soll gerade NICHT auf Hauptspaltenhöhe mitwachsen. */
.grid-2--gleich { align-items: stretch; }

/* Und die Knopfreihen auf eine Linie: Bei gleich hohen Kästen fällt sofort
   auf, wenn der eine Knopf 15 Pixel höher sitzt als der andere. Beide Kästen
   werden dafür zur Spalte, die Knopfreihe wandert ans untere Ende. */
.grid-2--gleich > .panel {
  display: flex;
  flex-direction: column;
}

.grid-2--gleich > .panel > .btn-row { margin-top: auto; }

/* ---------------------------------------------------------------------------
   4  Typografie
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 500;              /* keine ultrafetten Überschriften */
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.05rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p {
  margin: 0 0 var(--space-4);
  max-width: 68ch;               /* kurze Zeilenlängen, Briefing 13.4 */
}

.lead {
  font-size: 1.0625rem;
  color: var(--kg-soft-ink);
  max-width: 56ch;
}

.muted {
  color: var(--kg-soft-ink);
}

.small {
  font-size: 0.875rem;
}

/* --kg-faint-ink erreicht auf --kg-paper nur 2,8:1 und ist damit für
   Fließtext zu kontrastarm. Deshalb ausschließlich dekorativ verwenden
   (Trennpunkte, Rahmen) – nie für Inhalte. */
.dot-separator {
  color: var(--kg-faint-ink);
  padding-inline: 6px;
}

.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: var(--space-7); font-size: 1.375rem; }
.prose h3 { margin-top: var(--space-6); font-size: 1.125rem; }
.prose ul,
.prose ol { margin: 0 0 var(--space-4); padding-left: 1.3em; max-width: 68ch; }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--kg-purple-ink); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: 0.9375rem;
}
.prose th,
.prose td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--kg-line);
}

/* ---------------------------------------------------------------------------
   5  Header – im Container, nicht bildschirmfüllend (Briefing 10.2)
   --------------------------------------------------------------------------- */
.site-header {
  padding-top: var(--space-5);
  position: relative;
  z-index: 40;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px var(--header-inset);
  border-radius: var(--radius-panel);
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  box-shadow: var(--shadow-glass);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--kg-ink);
  flex-shrink: 0;
}

/*
 * Das Logo trägt seine Fläche im SVG. Der früher hier gesetzte dunkle
 * Hintergrund entfällt deshalb, er läge sonst doppelt.
 *
 * Auf schmalen Geräten steht derselbe Schriftzug, nur kleiner: Die
 * Hauptnavigation ist dort ohnehin ausgeblendet, neben dem Logo
 * bleiben rund 270px frei – der Schriftzug braucht 150.
 */
.brand__logo {
  display: block;
  width: auto;
  height: 34px;
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  gap: var(--space-1);
  margin-inline: auto;
}

.main-nav__link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--kg-soft-ink);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.main-nav__link:hover {
  background: rgba(24, 28, 36, 0.05);
  color: var(--kg-ink);
}

.main-nav__link[aria-current="page"] {
  background: rgba(24, 28, 36, 0.06);
  color: var(--kg-ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Menü für schmale Geräte

   Unter 900px ist die Hauptnavigation ausgeblendet. Statt der Merkliste
   steht dort ein Menüknopf, der beide enthält – oben bleibt ein Knopf.
   Auf dem Desktop ist das Menü unsichtbar und die Merkliste wieder da.
   --------------------------------------------------------------------------- */
.mobile-menu { display: none; position: relative; }

/* Das Dreieck des <details> weg – der Knopf trägt sein eigenes Zeichen. */
.mobile-menu__button { list-style: none; }
.mobile-menu__button::-webkit-details-marker { display: none; }
.mobile-menu__button::marker { content: ''; }

.mobile-menu__icon--close { display: none; }
.mobile-menu[open] .mobile-menu__icon--open { display: none; }
.mobile-menu[open] .mobile-menu__icon--close { display: block; }

.mobile-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 208px;
  display: grid;
  gap: 2px;
  padding: var(--space-2);
  border-radius: var(--radius-panel);
  /*
   * Deckend, nicht als Glasfläche.
   *
   * Das Menü legt sich über Filmplakate. Selbst mit funktionierender
   * Unschärfe bliebe deren Farbe darunter sichtbar und die Einträge
   * würden schwer lesbar – das war im Test auch genau so.
   */
  background: #fff;
  border: 1px solid var(--kg-line);
  box-shadow: var(--shadow-glass);
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-control);
  color: var(--kg-ink);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: background var(--duration) var(--ease);
}

.mobile-menu__link:hover { background: var(--kg-solid); }
.mobile-menu__link[aria-current="page"] { background: var(--kg-solid); font-weight: 500; }

/* Die Merkliste ist der Fremdkörper in der Reihe – eine Linie trennt sie. */
.mobile-menu__link--merkliste {
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--kg-line);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
}

@media (max-width: 900px) {
  .mobile-menu { display: block; }

  /*
   * Über den Elternteil adressiert, nicht über die Klasse allein:
   * .icon-button setzt display:grid und steht weiter unten in dieser
   * Datei – bei gleicher Spezifität gewinnt die spätere Regel.
   */
  .header-actions > .header-actions__watchlist { display: none; }
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--kg-line);
  background: var(--kg-solid);
  cursor: pointer;
  color: var(--kg-ink);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.icon-button:hover {
  border-color: var(--kg-line-strong);
  box-shadow: var(--shadow-glass);
}

.icon-button svg { width: 19px; height: 19px; }

/* ---------------------------------------------------------------------------
   6  Buttons – Briefing 13.10
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              background var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}

.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary {
  background: var(--kg-black);
  color: #fff;
}

.btn--primary:hover {
  background: #1e2028;
  box-shadow: var(--shadow-card);
}

.btn--secondary {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--kg-line);
  color: var(--kg-ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.btn--secondary:hover {
  border-color: var(--kg-line-strong);
  box-shadow: var(--shadow-glass);
}

.btn--ghost {
  background: transparent;
  border-color: var(--kg-line);
  color: var(--kg-soft-ink);
}

.btn--ghost:hover {
  color: var(--kg-ink);
  border-color: var(--kg-line-strong);
}

.btn--danger {
  background: var(--kg-red-soft);
  border-color: rgba(228, 107, 114, 0.3);
  color: var(--kg-red-ink);
}

.btn--small {
  padding: 8px 14px;
  font-size: 0.875rem;
  border-radius: var(--radius-control);
}

.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------------------------------------------------------------------------
   7  Chips, Badges, Pills
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--kg-line);
  font-size: 0.875rem;
  color: var(--kg-soft-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

/* Namen als Chip-Link – ohne Unterstrich, der Rahmen trägt die Klickbarkeit. */
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--kg-ink); }

.chip:hover {
  border-color: var(--kg-line-strong);
  color: var(--kg-ink);
}

.chip--active,
.chip[aria-pressed="true"],
.chip[aria-current="page"] {
  background: var(--kg-black);
  border-color: var(--kg-black);
  color: #fff;
}

/* Für reine Aufzählungen wie Darstellernamen: gleiche Form, weniger Gewicht. */
.chip--small {
  padding: 4px 11px;
  font-size: 0.8125rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Statusbadge – Bedeutung steht immer im Text, nie nur in der Farbe */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

/* Ohne diese Zeile wirkt das Attribut hidden an einem Schildchen nicht: Die
   Browser-Vorgabe [hidden] { display: none } ist nur die unterste Schicht und
   verliert gegen jede eigene display-Regel. Am 06.10.2026 stand deshalb „App
   nötig“ auch am Rechner, wo es nicht stimmt – kinogrid.js blendet es nur auf
   Handy und Tablet ein. */
.badge[hidden] { display: none; }

/* Abzeichen als Link – ohne Unterstrich, sonst sieht der Rahmen zerrissen aus. */
a.badge { text-decoration: none; }
a.badge:hover { filter: brightness(0.96); }

.badge svg { width: 15px; height: 15px; }

.badge--free {
  background: var(--kg-purple-soft);
  color: var(--kg-purple-ink);
  border: 1px solid var(--kg-purple-line);
}

.badge--soft {
  background: var(--kg-mint-soft);
  color: var(--kg-mint-ink);
  border: 1px solid rgba(133, 221, 208, 0.4);
}

.badge--warn {
  background: var(--kg-yellow-soft);
  color: var(--kg-yellow-ink);
  border: 1px solid rgba(244, 215, 125, 0.5);
}

.badge--neutral {
  background: rgba(119, 186, 247, 0.16);
  color: #15537f;
  border: 1px solid rgba(119, 186, 247, 0.36);
}

.badge--muted {
  background: rgba(24, 28, 36, 0.05);
  color: var(--kg-soft-ink);
  border: 1px solid var(--kg-line);
}

.badge--small {
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* ---------------------------------------------------------------------------
   8  Suche
   --------------------------------------------------------------------------- */
.search {
  position: relative;
  max-width: 560px;

  /* Die Rundung des Feldes als Marke, nicht als fester Wert.

     Sie steht an drei Stellen: am Feld, an den oberen Ecken des geöffneten
     Feldes und an den unteren Ecken der Vorschlagsliste – und sie ist auf
     dem Handy eine andere als am Schreibtisch. An jeder Stelle als Wert
     wiederholt, trüge die Liste dort weiter --radius-panel und wäre unten
     runder als das Feld oben. */
  --search-radius: var(--radius-panel);
}

.search__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 8px 8px 18px;
  border-radius: var(--search-radius);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.search__icon {
  width: 19px;
  height: 19px;
  color: var(--kg-soft-ink);
  flex-shrink: 0;
}

.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-size: 1rem;              /* nie unter 16px, sonst zoomt iOS */
  outline: none;
}

.search__input::placeholder { color: var(--kg-soft-ink); }

.search__submit { flex-shrink: 0; }

/* Geöffneter Zustand: Feld und Vorschlagsliste sind EIN Gegenstand.

   Vorher schwebte die Liste zehn Pixel unter dem Feld, mit anderem Radius
   (17 gegen 23) und anderem Material (deckend gegen Milchglas). Drei
   Signale, die alle dasselbe sagten: Ich gehöre nicht dazu, ich liege nur
   drauf. Genau so sah es dann auch aus.

   Jetzt wächst das Feld nach unten: unten eckig, die Liste schliesst ohne
   Lücke an und trägt die Rundung des Feldes an ihrer Unterkante.

   Die Unschärfe fällt dabei weg, und sie muss: Die Liste ist deckend, weil
   Text über einem bewegten Hintergrund unruhig wird – ein milchiges Feld
   auf einer deckenden Liste wären wieder zwei Materialien.

   Der Schatten bleibt derweil am Feld und wird von der Liste verdeckt: Sie
   ist absolut positioniert und deckend, malt also darüber. So hat der ganze
   Gegenstand oben und an den Seiten Auftrieb und an der Naht keine Kante.

   Die höhere Spezifität ist Absicht: Weiter unten setzt die Handy-Regel
   den Radius des Feldes neu, und die steht später in der Datei. Mit nur
   einer Klasse verlöre die geöffnete Fassung dort gegen sie. */
.search.search--offen { z-index: 46; }

.search.search--offen .search__form {
  border-radius: var(--search-radius) var(--search-radius) 0 0;
  background: var(--kg-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--kg-line);
}

/* Autocomplete nach Combobox-Muster (Briefing 22) */
.search__results {
  position: absolute;
  left: 0;
  right: 0;

  /* Ein Pixel Überlappung: So fallen die Unterkante des Feldes und die
     Oberkante der Liste auf dieselbe Linie, statt zwei Striche zu ergeben. */
  top: calc(100% - 1px);
  z-index: 45;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: var(--kg-solid);
  border: 1px solid var(--kg-line);
  border-radius: 0 0 var(--search-radius) var(--search-radius);
  box-shadow: var(--shadow-panel);

  /* Nur der Notnagel, falls das Skript die Höhe nicht setzen kann. Im
     Regelfall überschreibt kinogrid.js sie mit dem tatsächlich freien Platz
     unter dem Feld.

     60vh war der Fehler: 60 Prozent des GANZEN Fensters, während die Liste
     erst rund 60 Prozent weit unten darin beginnt. Der Wert fragte nie, wie
     viel Platz unter dem Feld überhaupt ist. Gemessen ragte die Liste am
     Schreibtisch 187 und am Telefon 146 Pixel unter den Fensterrand – und
     zwar bei jeder Suche, weil acht Treffer immer die volle Höhe füllen. */
  max-height: 45vh;
  overflow-y: auto;

  /* Am Ende der Liste nicht heimlich die Seite dahinter weiterschieben. */
  overscroll-behavior: contain;
}

.search__results[hidden] { display: none; }

/* Der Schleier hinter der geöffneten Suche.

   Er dreht die Bedeutung der Überlappung um: Aus "liegt über der
   Überschrift" wird "die Seite ist gerade im Suchmodus". Die Überlappung
   verschwindet damit nicht, sie wird zur Absicht.

   Bewusst leicht – 28 Prozent und zwei Pixel Unschärfe. Ein satter Schleier
   nach drei getippten Zeichen fühlte sich nach Modaldialog an, und das ist
   eine Suche nicht.

   pointer-events erst mit der Sichtbarkeit: Der Schleier bleibt nach dem
   Schliessen als durchsichtige Fläche liegen, und ohne diese Zeile
   schluckte er jeden weiteren Klick auf der Seite. */
.search-schleier {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(21, 23, 28, 0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.search-schleier--sichtbar { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .search-schleier { transition: none; }
}

.search__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.search__option:hover,
.search__option[aria-selected="true"] {
  background: rgba(24, 28, 36, 0.05);
}

.search__option img {
  width: 28px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--kg-paper);
}

.search__option-body { min-width: 0; flex: 1; }

.search__option-title {
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search__option-meta {
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
}

.search__empty {
  padding: 14px 12px;
  font-size: 0.9375rem;
  color: var(--kg-soft-ink);
}

/* Der Ausgang zur vollen Ergebnisseite.

   Es gibt höchstens acht Vorschläge, und bis hierher führte kein sichtbarer
   Weg zu allen Treffern – nur die Eingabetaste, die man kennen muss. Viele
   Leute rollen ans Ende einer Vorschlagsliste und suchen genau das.

   Kein role="option": Die Zeile ist kein Vorschlag, und in der Reihenfolge
   der Pfeiltasten hätte sie nichts verloren. Erreichbar ist sie mit der Maus
   und per Tabulator; wer die Eingabetaste drückt, landet ohnehin dort. */
.search__alle {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--kg-line);
}

.search__alle a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--kg-purple-ink);
  text-decoration: none;
}

.search__alle a:hover,
.search__alle a:focus-visible { background: rgba(121, 87, 246, 0.08); }

/* ---------------------------------------------------------------------------
   9  Hero
   --------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-9) var(--space-8);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  color: var(--kg-soft-ink);
  margin-bottom: var(--space-5);
}

.hero__eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kg-purple);
  box-shadow: 0 0 0 5px var(--kg-purple-soft);
}

.hero__title { margin-bottom: var(--space-4); }

.hero__kicker {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  margin: 0 0 var(--space-4);
  color: var(--kg-ink);
}

.hero__intro {
  font-size: 1.0625rem;
  color: var(--kg-soft-ink);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

/* Hero-Bild: Poster mit schwebender Verfügbarkeitskarte */
.hero__art {
  position: relative;
  justify-self: center;
  width: min(100%, 340px);
}

.hero__art::before {
  content: "";
  position: absolute;
  inset: -14% -18%;
  border-radius: 50%;
  border: 1px solid var(--kg-purple-line);
  opacity: 0.55;
}

.hero__poster {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
  border-radius: var(--radius-hero);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  transform: rotate(-2.5deg);
}

.hero__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__float {
  position: absolute;
  right: -18px;
  bottom: 18%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px 12px 12px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  max-width: 260px;
  /* Kein Unterstrich: Die Marke ist ein Kasten mit Symbol, Rahmen und
     Schatten – sie sieht schon anklickbar aus. Ein Unterstrich quer durch
     zwei Zeilen zerschneidet sie nur.

     Als Ersatz für den Hinweis, dass hier ein Link liegt, hebt sie sich
     beim Überfahren leicht an. Ohne jede Rückmeldung dürfte sie nicht
     bleiben. */
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.hero__float:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(24, 28, 36, 0.16);
}

.hero__float:focus-visible {
  outline: 2px solid var(--kg-purple);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero__float { transition: none; }
  .hero__float:hover { transform: none; }
}

.hero__float-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--kg-black);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hero__float-icon svg { width: 16px; height: 16px; }

.hero__float-title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

.hero__float-meta {
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
}

/* ---------------------------------------------------------------------------
   10  Filmkarten und Raster – Briefing 13.9
   --------------------------------------------------------------------------- */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.movie-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.movie-grid--compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.movie-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.movie-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: var(--radius-card);
}

/* Hover: höchstens 4px anheben, Schatten leicht verstärken */
.movie-card__poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(180deg, #e7ecf3, #dde4ee);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.movie-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.movie-card__link:hover .movie-card__poster,
.movie-card__link:focus-visible .movie-card__poster {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.movie-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.movie-card__provider {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--kg-ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bewertung unten rechts auf dem Poster.

   Dieselbe dunkle Glasfläche wie der Ablaufhinweis gegenüber: Beide liegen
   auf einem Bild, dessen Helligkeit niemand kennt, und nur ein eigener
   Untergrund macht die Zahl darauf zuverlässig lesbar. */
.movie-card__score {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(18, 19, 24, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.movie-card__score svg { color: var(--kg-yellow); }
/*
 * Oben links, nicht unten.
 *
 * Unten sitzt rechts die Bewertung. Ein kurzer Countdown ("noch 5 Tage")
 * ging sich dort gerade noch aus, ein Datum ("verfügbar bis 28.08.") stösst
 * an die Bewertung an. Oben hat der Hinweis die ganze Kartenbreite für sich,
 * und die beiden Marken liegen diagonal auseinander statt nebeneinander.
 */
.movie-card__expiry {
  position: absolute;
  left: 10px;
  top: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(18, 19, 24, 0.82);
  color: #fff;
  font-size: 0.75rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.movie-card__title {
  /* Trägt jetzt selbst den Abstand zum Poster. Vorher kam er von den
     Meta-Zeilen darunter, die es nicht mehr gibt – ohne ihn klebte der
     Name am Bild. */
  margin-top: var(--space-3);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  /* Lange deutsche Titel dürfen nicht das Raster sprengen */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.movie-card__meta {
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.movie-card__note {
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   11  Detailseite
   --------------------------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;

  /* Oben 48 Pixel, links auf der Logokante.

     Beides kommt von der Startseite: Dort beginnt die Vertrauenszeile
     ("100 % legal · Kostenlos") genau 48 Pixel unter der Kopfleiste und
     steht auf der Kante des Logos. Sie ist auf der Startseite dasselbe wie
     die Brotkrume hier – die kleine Zeile, mit der der Seitenkopf anfängt –
     und beide sollen gleich ansetzen. Vorher waren es 32 Pixel und die
     Spaltenkante, also sechzehn Pixel zu hoch und neunzehn zu weit links.

     Der Einzug ist dieselbe Rechnung wie überall: Innenabstand der
     Kopfleisten-Pille plus deren Rahmen, 19 Pixel am Schreibtisch und 13
     auf dem Handy. Die 48 gelten auf beiden Breiten, weil auch der Hero
     der Startseite dort padding-top: 48px trägt. */
  margin: var(--space-7) 0 var(--space-4) calc(var(--header-inset) + 1px);
  font-size: 0.9375rem;
  color: var(--kg-soft-ink);
}

.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs__sep { color: var(--kg-faint-ink); }
.breadcrumbs li[aria-current="page"] { color: var(--kg-ink); }

/* Überschrift in eigener Box, über dem Kopfbereich.
   Bewusst leicht gehalten: Eine ganze Box für eine Zeile Text darf nicht
   schwerer wirken als der Inhalt darunter. Deshalb kleinerer Radius,
   flacherer Schatten und deutlich weniger Innenabstand als früher. */
.title-head {
  background: var(--kg-surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-glass);
  padding: var(--space-4) var(--space-5);
}

/* Kein oberer Abstand: Der stammte vom Abzeichen, das früher darüber
   stand. Ohne das Abzeichen wäre er nur noch Leerraum in einer Box, die
   ausser der Überschrift nichts mehr enthält. */
.title-head__h1 {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  line-height: 1.2;
  text-wrap: balance;
}

/* =========================================================================
   Zweispaltiger Aufbau der Detailseite
   ========================================================================= */

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* Die Abschnitte in der linken Spalte bringen ihre eigene .container-Klasse
   mit. Hier gibt die äußere Hülle die Breite vor – die inneren sollen die
   Spalte nur ausfüllen, nicht ein zweites Mal zentrieren und einrücken. */
.detail-layout__main .container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.detail-layout__main > .container:first-child { margin-top: 0; }

.detail-layout__main { min-width: 0; }

/* Ohne Listen gibt es nichts, wofür ein Drittel freigehalten werden müsste –
   der Inhalt bekommt dann die volle Breite zurück. */
.detail-layout--single { grid-template-columns: 1fr; }

/* Scrollt normal mit. Die erste Box steht oben bündig mit der ersten Box
   der linken Spalte – deshalb hier kein Abstand nach oben und keine
   Überschrift, die sie nach unten schieben würde. */
.detail-layout__rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Kopfbild der Listenseite. Trägt keinen Text – deshalb ohne Abdunklung. */
/* -------------------------------------------------------------------------
   Listenseite: Bühne, Kurzantwort, Datenblatt

   Die Bühne ersetzt das frühere .list-banner – einen 260 Pixel hohen
   Bildstreifen ohne Inhalt, der die Überschrift nach unten schob, ohne
   selbst etwas zu sagen. Jetzt trägt das Bild Titel und Unterzeile, wie
   es der Kopfbereich der Titelseiten vormacht.
   ------------------------------------------------------------------------- */
.list-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(240px, 26vw, 320px);
  border-radius: var(--radius-panel);
  overflow: hidden;
  isolation: isolate;
  background: var(--kg-black);
  box-shadow: var(--shadow-card);
}

/* Ohne hochgeladenes Bild bleibt eine ruhige Fläche statt einer Lücke. */
.list-stage--plain {
  background: linear-gradient(135deg, #1b1e26 0%, #101218 100%);
  min-height: clamp(180px, 18vw, 230px);
}

.list-stage__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Dieselbe Abdunklung wie im Kopfbereich der Detailseiten: Sonst
   entscheidet der Zufall des Bildausschnitts, ob die Überschrift
   lesbar ist. */
.list-stage__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(10, 13, 17, 0.93) 0%,
    rgba(10, 13, 17, 0.80) 42%,
    rgba(10, 13, 17, 0.38) 78%,
    rgba(10, 13, 17, 0.18) 100%);
}

.list-stage__body {
  position: relative;
  padding: var(--space-6);
  color: #fff;
  max-width: 76%;
}

.list-stage__headline {
  margin: 0 0 var(--space-3);
  color: #fff;
  font-size: clamp(1.7rem, 1.15rem + 2vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}

.list-stage__subline {
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  color: rgba(255, 255, 255, 0.90);
}

.list-stage__checked {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: var(--space-4) 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

.list-stage__checked svg { flex: none; }
.list-stage__checked a { color: inherit; text-underline-offset: 2px; }

/* Text und Daten als gleichwertiges Paar – auch in der Höhe. Vorher stand
   hier align-items: start, dann endete die schmalere Box irgendwo auf
   halber Strecke und das Paar sah aus wie zwei Dinge, die nichts
   miteinander zu tun haben. */
.list-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.list-brief--single { grid-template-columns: minmax(0, 1fr); }

/* Die Tabelle bringt ihre eigene Polsterung mit, damit die Trennlinien
   bis an den Rand laufen. */
.list-brief__facts { padding: 0; overflow: hidden; }

/* Der Satz, den ein Sprachmodell zitiert: abgeschlossen, mit Anbietern,
   und das Prüfdatum steht in der Bühne darüber. */
.list-answer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}

.list-answer__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kg-mint-soft);
  color: var(--kg-mint-ink);
}

/* Trennlinie zwischen der Kurzantwort und dem Einleitungstext: Das eine ist
   eine geprüfte Aussage über Verfügbarkeit, das andere redaktioneller Text.
   Die Linie sagt, wo das eine aufhört.

   Nur wenn wirklich etwas folgt – sonst stünde ein Strich am Boxenrand und
   verspräche einen Abschnitt, den es nicht gibt. */
.list-brief__text .list-answer:not(:last-child) {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--kg-line);
}

.list-brief__intro {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--kg-soft-ink);
}

/* Label-Wert-Paare als echte Tabelle: In dieser Form werden sie von
   Sprachmodellen deutlich zuverlässiger korrekt ausgelesen als dieselben
   Angaben im Fliesstext. */
.list-facts { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.list-facts caption {
  padding: var(--space-5) var(--space-5) var(--space-2);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kg-faint-ink);
}

.list-facts th,
.list-facts td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--kg-line);
}

.list-facts tr:last-child th,
.list-facts tr:last-child td { border-bottom: 0; padding-bottom: var(--space-5); }

.list-facts th { width: 46%; font-weight: 400; color: var(--kg-soft-ink); }
.list-facts td { font-weight: 500; }

@media (max-width: 900px) {
  .list-brief { grid-template-columns: minmax(0, 1fr); }
  .list-stage__body { max-width: 100%; }
}

@media (max-width: 650px) {
  .list-stage__body { padding: var(--space-5); }
}

/* -------------------------------------------------------------------------
   Kennzahlenband auf Textseiten

   Vier Zahlen nebeneinander, jede mit Beschriftung und einer Zeile
   Erläuterung darunter. Bewusst keine Kacheln mit Rahmen: Die Zahlen sind
   Teil des Fliesstexts der Seite und keine eigenständigen Kästen, die vom
   Text ablenken. Getrennt werden sie von Linien, nicht von Flächen.

   Auf schmalen Geräten zwei nebeneinander statt vier – vier hätten je gut
   achtzig Pixel, und eine vierstellige Zahl passt da nicht hinein.
   ------------------------------------------------------------------------- */
.fact-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--kg-solid);
  border: 1px solid var(--kg-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
}

.fact-band__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Trennlinien zwischen den Werten, nicht aussen herum. */
.fact-band__item + .fact-band__item {
  padding-left: var(--space-5);
  border-left: 1px solid var(--kg-line);
}

.fact-band__value {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.fact-band__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--kg-ink);
}

.fact-band__note {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--kg-faint-ink);
}

@media (max-width: 780px) {
  .fact-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-5);
  }

  /* Bei zwei Spalten trennt die Linie nur innerhalb einer Reihe. */
  .fact-band__item + .fact-band__item { padding-left: 0; border-left: 0; }
  .fact-band__item:nth-child(2n) {
    padding-left: var(--space-4);
    border-left: 1px solid var(--kg-line);
  }
}

/* -------------------------------------------------------------------------
   Listenübersicht: Karten mit Posterstreifen

   Eine Übersicht hat genau eine Aufgabe: dem Besucher die Wahl abnehmen.
   Die Kachel der Startseite kann das hier nicht leisten – sie zeigt
   Überschrift und Anzahl, also nichts darüber, WAS in der Liste steht.
   Deshalb eine eigene Form: Bild links, daneben Unterzeile, Eckdaten und
   die ersten Poster. Wer die Namen sieht, entscheidet in einer halben
   Sekunde, ob das seine Ecke ist.

   Gestapelt statt nebeneinander, weil die Zeile sonst zu wenig Platz für
   Überschrift UND Streifen hätte – und weil zwanzig Karten untereinander
   lesbar bleiben, zwanzig Kacheln aber nicht.
   ------------------------------------------------------------------------- */
/* Kopf der Übersicht: Text links, eine herausgegriffene Liste rechts.
   Der Platz neben der Überschrift stand vorher leer – und eine Seite, die
   Listen führt, kann dort gleich eine zeigen statt nur über sie zu reden.

   Die rechte Spalte ist die schmalere: Die Überschrift ist das, wonach
   jemand gesucht hat, der Anreisser das Angebot obendrauf. */
.list-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--space-6);

  /* Oben bündig statt mittig.

     Mittig hing die Überschrift an der Höhe des Anreissers daneben und
     stand dadurch auf dieser einen Seite 36 Pixel tiefer als auf allen
     anderen – ein Abstand, den niemand gewählt hatte, sondern der sich
     aus der Höhe einer Kachel ergab.

     Der obere Abstand wandert dafür von der Kopfpolsterung an die Reihe.
     So beginnen beide Spalten auf derselben Linie, auf der auch sonst die
     Überschrift beginnt, statt dass der Anreisser 64 Pixel darüber
     anfinge. */
  align-items: start;
  padding-block-start: var(--kopf-polster);
}

/* Ohne Anreisser bleibt der Kopf, was er war: eine Textspalte. */
.list-intro--allein { grid-template-columns: minmax(0, 1fr); }

/* Die Reihe trägt den oberen Abstand jetzt selbst, der Kopf gibt ihn hier
   deshalb ab – sonst käme er doppelt. */
.list-intro .page-head { padding-block: 0; }

@media (max-width: 900px) {
  .list-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .list-intro .page-head { padding-bottom: var(--space-2); }
}

.list-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.list-card {
  display: grid;
  grid-template-columns: clamp(220px, 26%, 320px) minmax(0, 1fr);
  background: var(--kg-solid);
  border: 1px solid var(--kg-line);
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.list-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Die Bildspalte trägt kein eigenes Verhältnis: Sie streckt sich auf die
   Höhe des Textes daneben. Ohne Bild bleibt eine ruhige Fläche – die Karte
   darf nicht davon abhängen, dass jemand ein Bild hochgeladen hat. */
.list-card__image {
  position: relative;
  display: block;
  min-height: 210px;
  background: linear-gradient(135deg, #1b1e26 0%, #101218 100%);
}

.list-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.list-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
}

.list-card__headline {
  margin: 0;
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: balance;
}

/* Kein aufgespannter Link über die ganze Karte: Der deckt beim Markieren
   den Text ab. Stattdessen zeigen Bild, Überschrift und Fusszeile je für
   sich auf dasselbe Ziel; das Bild ist dabei aus Tabfolge und
   Vorlesereihenfolge genommen, damit die Karte nur einmal angesagt wird. */
/* Ohne Unterstreichung beim Überfahren: Die Karte hebt sich als Ganzes an
   und wirft einen tieferen Schatten – zwei Rückmeldungen für dieselbe
   Bewegung wären eine zu viel. */
.list-card__headline a {
  color: inherit;
  text-decoration: none;
}

.list-card__subline {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--kg-soft-ink);
}

/* Genres, Jahre, Anbieter und Prüfdatum in einer Zeile. Auf der Detailseite
   steht dasselbe als Tabelle; hier fehlt der Platz dafür, der Inhalt aber
   nicht. */
.list-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--kg-faint-ink);
}

.list-card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: 6px;
}

.list-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-2);
}

.list-strip {
  display: flex;
  gap: 7px;
  min-width: 0;
}

.list-strip img {
  width: 46px;
  height: 69px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(30, 35, 46, 0.16);
}

.list-strip__more {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 69px;
  border-radius: var(--radius-sm);
  background: rgba(24, 28, 36, 0.06);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--kg-soft-ink);
}

.list-card__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kg-purple-ink);
  text-decoration: none;
  white-space: nowrap;
}

.list-card__go svg { flex: none; }

/* Kurzantwort und Marken der Übersicht. Die Genres sind der einzige Weg
   von hier tiefer in den Bestand – ohne sie endet die Seite bei den
   Listen. */
.list-overview .list-answer { margin-bottom: var(--space-4); }
.list-overview__marks { row-gap: var(--space-2); }

.chip__n { font-weight: 600; color: var(--kg-ink); }

.chip--checked {
  background: var(--kg-mint-soft);
  border-color: transparent;
  color: var(--kg-mint-ink);
}

.chip--checked svg { flex: none; }

@media (max-width: 780px) {
  /* Unter dieser Breite reicht die Textspalte nicht mehr für Überschrift
     und Streifen nebeneinander: Bild nach oben, Text darunter. */
  .list-card { grid-template-columns: minmax(0, 1fr); }
  .list-card__image { min-height: 0; aspect-ratio: 16 / 7; }
  .list-card__body { padding: var(--space-5); }

  .list-card__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* -------------------------------------------------------------------------
   WhatsApp-Kanal

   Steht dort, wo bis zum Umbau die Newsletter-Box stand. Bewusst dieselbe
   Panel-Grundform wie der Kasten daneben – es ist ein gleichwertiges Angebot
   und kein Werbebanner. Die Kanalfarbe taucht nur im Knopf auf.
   ------------------------------------------------------------------------- */
.wa-box { display: flex; flex-direction: column; gap: var(--space-4); }

/* Die Knopfreihe unten halten: So enden beide Kästen der Reihe auf
   derselben Linie, statt dass der eine Knopf in der Luft hängt. */
.wa-box .btn-row { margin-top: auto; }

.wa-box__kopf {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.wa-box__bild {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kg-paper);
}

.wa-box__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--kg-mint-soft);
  color: var(--kg-mint-ink);
}

/* Kanalname und Followerzahl: die Angaben, die von WhatsApp kommen. */
.wa-box__kanal {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--kg-soft-ink);
}

.wa-box__kanal b { color: var(--kg-ink); font-weight: 600; }

/* WhatsApp-Grün, aber nur hier: Der Knopf soll erkennbar dorthin führen,
   ohne dass die Seite ihre eigene Farbigkeit aufgibt. */
.wa-box__knopf {
  background: #1fa855;
  border-color: #1fa855;
}

.wa-box__knopf:hover { background: #18904a; border-color: #18904a; }

/* Klickverlauf im Admin: dreissig Balken, ohne Diagrammbibliothek. */
.wa-verlauf {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 90px;
  margin-top: var(--space-4);
}

.wa-verlauf__balken {
  flex: 1;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--kg-purple);
  opacity: 0.75;
}

/* Detail-Kopf: das Szenenbild liegt hinter dem Inhalt, nicht darüber.
   Der Unterschied ist der ganze Punkt: Ein Banner, der Bild UND Textgrund
   sein muss, braucht Mindesthöhe und einen kräftigen Verlauf. Hier trägt
   der Block ohnehin vorhandenen Inhalt – das Bild kostet keine Höhe. */
.title-tint {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-panel);
  background: var(--kg-black);
  box-shadow: var(--shadow-card);
}

/* Leicht vergrößert, weil die Unschärfe sonst die Kanten ausfranst. */
.title-tint__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: blur(3px);
  transform: scale(1.05);
}

/* Ohne diese Abdunklung hinge die Lesbarkeit vom Bildausschnitt ab. */
.title-tint__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 13, 17, 0.82);
}

.title-tint--plain {
  background: linear-gradient(135deg, #1b1e26 0%, #101218 100%);
}

.title-tint__inner {
  position: relative;
  padding: var(--space-5) var(--space-6);
  color: #fff;
}

.title-tint__head {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
}

.title-tint__poster {
  width: 104px;
  height: 156px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.title-tint__body { min-width: 0; }

/* Dritte Spalte: Bewertung oben, Merken unten in der Ecke.

   align-self: stretch zieht die Spalte auf die volle Höhe des Kopfblocks –
   das Raster steht auf align-items: start, damit das Poster nicht verzerrt
   wird, und diese Ausnahme gilt nur hier. Den Knopf drückt margin-top: auto
   nach unten; das wirkt auch dann, wenn keine Bewertung vorliegt und er
   allein in der Spalte steht. */
.title-tint__side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.title-tint__side > .btn { margin-top: auto; }

.title-tint__work {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.title-tint__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
}

/* Punkt und Wert als eine Einheit – der Umbruch kann nur zwischen den
   Einheiten stattfinden, nie zwischen Punkt und zugehörigem Wert. */
.title-tint__metaItem {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}

.title-tint__meta .dot-separator { color: rgba(255, 255, 255, 0.34); }

.title-tint__tagline {
  margin: var(--space-3) 0 0;
  max-width: 52ch;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}


.title-tint__genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Der helle Standard-Chip wäre auf dunklem Grund nicht zu sehen. */
.chip--onDark {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}

.chip--onDark:hover,
.chip--onDark:focus-visible {
  background: rgba(255, 255, 255, 0.19);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

/* Schliessen-Knopf der Flash-Meldung. Sie verschwindet zwar ohnehin beim
   nächsten Aufruf – aber wer sie jetzt weghaben will, soll das können. */
.notice { position: relative; }

.notice__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}

.notice__close:hover { opacity: 1; background: rgba(24, 28, 36, 0.07); }
.notice__close:focus-visible { outline: 2px solid var(--kg-purple); outline-offset: 2px; }

/* Platz für den Knopf, damit er nicht auf dem Text sitzt. */
.notice > p { padding-right: var(--space-6); }

.rating-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  white-space: nowrap;
}

.rating-inline svg { color: var(--kg-yellow); }
.rating-inline strong { font-weight: 600; }

/* Angebotszeile: die Antwort auf die Frage, mit der jemand hergekommen ist. */
/* Angebotstext oben, Knöpfe darunter – und zwar immer.

   Vorher standen beide nebeneinander und rutschten nur dann
   übereinander, wenn der Trailer-Knopf die Zeile zu breit machte. Damit
   sah dieselbe Box je nach Datenlage anders aus. Eine feste Spalte hält
   die Anordnung gleich, egal ob ein Trailer vorhanden ist. */
.title-tint__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Volle Breite, damit ein langer Titel innerhalb der Box umbricht statt
   über ihren Rand hinauszulaufen – in einer Spalte mit
   align-items: flex-start bekäme er sonst nur seine Inhaltsbreite. */
.title-tint__offer {
  width: 100%;
  min-width: 0;
}

.title-tint__offerName {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

.title-tint__offerFacts {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
}

.title-tint__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Der dunkle Standardknopf verschwände hier im Hintergrund. */
.title-tint .btn--primary {
  background: #fff;
  color: var(--kg-ink);
}

.title-tint .btn--primary:hover {
  background: rgba(255, 255, 255, 0.87);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.btn--onDark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.42);
}

.btn--onDark[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--kg-ink);
}

/* Knopf ohne Beschriftung – der Name steht für Screenreader daneben. */
.btn--square { padding-inline: 12px; }

/* =========================================================================
   Inhalt unter dem Kopf – ohne eigene Box
   ========================================================================= */

/* Inhaltsangabe in einem eigenen Kasten – in Breite, Innenabstand und
   Schatten identisch zu .panel, damit alle Kästen der Seite dieselbe
   Sprache sprechen.

   Keine eigene Maximalbreite: Die Lesezeile begrenzt die allgemeine
   Regel p { max-width: 68ch } innerhalb des Kastens, genau wie in den
   Panels weiter unten. Eine Begrenzung am Kasten selbst hätte ihn
   schmaler gemacht als seine Nachbarn. */
.title-body {
  padding: var(--space-6);
  background: var(--kg-solid);
  border: 1px solid var(--kg-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
}

/* Trennlinie zwischen Text, Eckdaten und Besetzung.

   Sie sitzt am jeweils folgenden Teil, nicht am vorangehenden: Damit
   bekommt der letzte Teil nie eine Linie unter sich, egal ob die
   Besetzung, die Eckdaten oder nur der Text vorhanden sind. Der Abstand
   über der Linie kommt weiterhin aus dem Aussenabstand der Teile, der
   darunter von hier – so liegt sie mittig zwischen beiden. */
.title-body > * + * {
  /* Die allgemeine Regel p { max-width: 68ch } hält Lesezeilen kurz. Bei
     den Eckdaten – ebenfalls ein <p>, aber kleiner gesetzt – ergibt das
     eine schmalere Box als bei der Besetzung, die ein <div> ist. Weil die
     Linie an der Elementbreite hängt, waren die beiden Trenner
     unterschiedlich lang. Hier zählt die Breite des Kastens, nicht die
     Lesbarkeit einer Zeile: Aufzählungen sind keine Fliesstexte.

     Der Absatz darüber ist der erste Kindknoten und wird von diesem
     Selektor nicht erfasst – sein Lesemaß bleibt also unangetastet. */
  max-width: none;
  border-top: 1px solid var(--kg-line);
  padding-top: var(--space-4);
}

.title-body__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.title-body__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-3);
  margin: var(--space-4) 0 0;
  font-size: 0.875rem;
  color: var(--kg-ink);
}

.title-body__facts .dot-separator { color: var(--kg-faint-ink); }

.title-body__factLabel { color: var(--kg-soft-ink); }

.title-body__cast {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Anbieterlogo in der Angebotszeile. Fester Kasten, damit unterschiedlich
   proportionierte Logos die Zeile nicht verschieben. */
.offer-row__logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.offer-row__provider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Logo im Kopf der Anbieterseite. Fester Kasten mit heller Fläche darunter,
   damit auch ein freigestelltes dunkles Logo sichtbar bleibt. */
.provider-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: 10px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--kg-solid);
  box-shadow: var(--shadow-glass);
}

/* =========================================================================
   Melden direkt an der Angebotszeile
   ========================================================================= */

.report-drop { position: relative; }

.report-drop__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--offer-report-size);
  height: var(--offer-report-size);
  border-radius: var(--radius-pill);
  color: var(--kg-soft-ink);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Das Standard-Dreieck von <details> stört hier. */
.report-drop__toggle::-webkit-details-marker { display: none; }
.report-drop__toggle::marker { content: ''; }

.report-drop__toggle:hover,
.report-drop[open] > .report-drop__toggle {
  background: rgba(24, 28, 36, 0.06);
  color: var(--kg-ink);
}

.report-drop__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 232px;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--kg-surface);
  box-shadow: var(--shadow-panel);
  border: 1px solid var(--kg-line);
}

.report-drop__title {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kg-soft-ink);
}

.report-drop__form { display: grid; gap: 2px; }

.report-drop__reason {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--kg-ink);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.report-drop__reason:hover,
.report-drop__reason:focus-visible {
  background: rgba(24, 28, 36, 0.06);
}

/* =========================================================================
   Trailer-Fenster
   ========================================================================= */

.trailer {
  width: min(920px, 94vw);
  padding: 0;
  border: 0;
  border-radius: var(--radius-hero);
  background: #0d1014;
  color: #fff;
  overflow: hidden;
}

.trailer::backdrop { background: rgba(9, 12, 17, 0.78); }

.trailer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.trailer__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trailer__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.trailer__close:hover { background: rgba(255, 255, 255, 0.2); }

.trailer__frame { aspect-ratio: 16 / 9; background: #000; }
.trailer__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.trailer__fallback {
    margin: 0;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}

.trailer__fallback a { color: rgba(255, 255, 255, 0.9); }

/* Verfügbarkeitsmatrix */
.availability { display: grid; gap: var(--space-3); }

.offer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--kg-line);
}

.offer-row:last-child { border-bottom: 0; padding-bottom: 0; }

.offer-row__body { min-width: 0; }

.offer-row__provider {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 3px;
}

.offer-row__facts {
  font-size: 0.875rem;
  color: var(--kg-soft-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.offer-row__requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.offer-row__checked {
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
  margin-top: 6px;
}

/* Stream-Knopf und Melde-Symbol nebeneinander. */
.offer-row__action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.affiliate-note {
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
  margin-top: 6px;
}

/* Trennlinie zu Testabos und Paid – Briefing 4.2 */
.offer-divider {
  margin: var(--space-6) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--kg-line-strong);
}

.offer-divider__label {
  font-size: 0.875rem;
  color: var(--kg-soft-ink);
  margin: 0 0 var(--space-3);
}

/* Belegbare Bestandsaussage auf Übersichtsseiten. Steht bewusst früh und
   in ganzen Sätzen – das ist die Form, die KI-Suchmaschinen übernehmen. */
.lead-answer {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--kg-ink);
  max-width: 68ch;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--kg-purple);
  background: rgba(121, 87, 246, 0.05);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Kurzantwort
   Der erste Block auf einer Titelseite. Beantwortet die Suchfrage direkt
   und ist zugleich der Textbaustein, den KI-Suchmaschinen zitieren.
   --------------------------------------------------------------------------- */
.answer-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-panel);
  background: var(--kg-solid);
  border: 1px solid var(--kg-line);
  box-shadow: var(--shadow-card);
}

.answer-box__verdict {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.answer-box__verdict--yes {
  background: var(--kg-purple-soft);
  color: var(--kg-purple-ink);
}

.answer-box__verdict--no {
  background: rgba(24, 28, 36, 0.05);
  color: var(--kg-soft-ink);
}

.answer-box__body { min-width: 0; }

/* Bewusst groß: Das ist die Antwort, wegen der jemand hier ist. */
.answer-box__sentence {
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: -0.011em;
  margin: 0 0 var(--space-3);
  max-width: 62ch;
}

.answer-box__detail {
  color: var(--kg-soft-ink);
  font-size: 0.9375rem;
  margin: 0 0 var(--space-3);
  max-width: 62ch;
}

.answer-box__checked {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
  margin: 0;
}

.answer-box__checked a { color: var(--kg-soft-ink); }

/* Label-Wert-Tabelle: das Format, das Sprachmodelle am zuverlässigsten
   korrekt auslesen. */
.answer-box__facts {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  font-size: 0.9375rem;
}

.answer-box__facts th,
.answer-box__facts td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--kg-line);
  vertical-align: top;
}

.answer-box__facts th {
  font-weight: 400;
  color: var(--kg-soft-ink);
  width: 40%;
  padding-right: var(--space-4);
}

.answer-box__facts tr:last-child th,
.answer-box__facts tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   Häufige Fragen
   --------------------------------------------------------------------------- */
.faq { display: grid; }

.faq__item {
  border-bottom: 1px solid var(--kg-line);
  padding: var(--space-4) 0;
}

.faq__item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq__item:first-child { padding-top: 0; }

.faq__question {
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-right: var(--space-4);
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::before {
  content: "+";
  flex-shrink: 0;
  width: 20px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--kg-soft-ink);
}

.faq__item[open] .faq__question::before { content: "–"; }

.faq__question:focus-visible {
  outline: 2px solid var(--kg-purple);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.faq__answer {
  padding: var(--space-3) 0 0 32px;
  color: var(--kg-soft-ink);
  max-width: 68ch;
}

/* Faktentabelle */
.facts { display: grid; gap: 0; }

.facts__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--kg-line);
  font-size: 0.9375rem;
}

.facts__row:last-child { border-bottom: 0; }
.facts__label { color: var(--kg-soft-ink); }
.facts__value { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   12  Listenseiten und Filter
   --------------------------------------------------------------------------- */
/* Der Kopfbereich der Unterseiten.

   Zwei Dinge sollen auf jeder Unterseite gleich sein: wo der Kopf anfängt
   und wo sein Text steht. Vorher war beides gewachsen statt gesetzt.

   Der Abstand zur Kopfleiste ergab sich aus der Summe dessen, was zufällig
   darüber stand, und kam auf vier verschiedene Werte – gemessen bei 1440
   Pixeln, jeweils von der Unterkante der Kopfleiste bis zur Überschrift:

     136   Listenseiten, Magazin, Merkliste, Letzte Chance
     168   Textseiten wie /so-pruefen-wir/ – deren Abschnitt trägt
           section--tight und damit 48 Pixel Aussenabstand obendrauf
     172   /listen/ – dort ist der Kopf eine Rasterzelle und wurde gegen
           den Anreisser daneben mittig gestellt
     224   Anbieterseiten – dort steht das Logo mit im Kopf

   Der Einzug nach rechts ist derselbe wie im Hero der Startseite: der
   Innenabstand der Kopfleisten-Pille plus deren Rahmen, also 19 Pixel bei
   1440 und 13 auf dem Handy. Damit steht die Überschrift auf der Kante des
   Logos darüber und nicht 19 Pixel links davon.

   Bewusst nur der Kopftext: Die Brotkrume darüber bleibt an der
   Spaltenkante, ebenso alles darunter – Filter, Raster, Kästen. Sie sind
   keine Überschrift, und ein eingerücktes Raster wäre eine andere
   Änderung als die hier gewollte. */
.page-head {
  padding-block: var(--kopf-polster) var(--space-6);
  max-width: 62ch;
  margin-inline-start: calc(var(--header-inset) + 1px);
}

/* Der Abschnitt, der den Kopf trägt, bringt keinen eigenen oberen Abstand
   mit – sonst addiert sich seine Aussenpolsterung zu der des Kopfes, und
   genau daher kamen die 168 Pixel der Textseiten.

   :has() ist der erste Einsatz in dieser Datei. Die Alternative wäre eine
   zusätzliche Klasse in fünfzehn Vorlagen gewesen – für eine Regel, die
   sich hier in zwei Zeilen sagen lässt. Der untere Abstand bleibt
   unangetastet, es geht allein um den Anfang. */
/* .container und nicht section: Der Kopf sitzt je nach Seite in einem
   section, auf den Magazinseiten aber in einem article. Mit section davor
   griff die Regel dort nicht, und der Artikelkopf begann 32 Pixel tiefer als
   alle anderen – gemessen, nachdem der Rest schon stimmte. Gemeinsam haben
   alle Träger die Klasse .container. */
.container:has(> .page-head),
.container:has(> .list-intro) {
  margin-block-start: 0;
}

/* Seiten ohne Brotkrume bekommen deren Platz als Polsterung.

   Bisher betrifft das nur die Suchergebnisse. Dort begann die Überschrift 64
   Pixel unter der Kopfleiste statt bei 136 – sie klebte sichtbar an der
   Navigation, während sie auf jeder anderen Unterseite tiefer stand.

   Die drei Summanden sind genau das, was die Brotkrumenzeile sonst einnimmt:
   ihr oberer Abstand (space-6), ihre Zeilenhöhe (24px) und ihr unterer
   Abstand (space-4). Als Rechnung notiert und nicht als eine Zahl, damit beim
   nächsten Griff an die Brotkrume erkennbar bleibt, woher sie kommt. */
main > *:first-child > .page-head {
  padding-block-start: var(--titel-hoehe);
}

.page-head h1 { margin-bottom: var(--space-4); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  box-shadow: var(--shadow-glass);
  margin-bottom: var(--space-6);
}

.filter-bar__group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar__label {
  font-size: 0.875rem;
  color: var(--kg-soft-ink);
}

.select {
  appearance: none;
  padding: 9px 34px 9px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--kg-line);
  background: var(--kg-solid)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23656b76' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  font-size: 0.9375rem;
  cursor: pointer;
}

.result-count {
  font-size: 0.9375rem;
  color: var(--kg-soft-ink);
  margin-bottom: var(--space-5);
}

/* Gruppen auf /nur-noch-kurze-zeit/ */
/* ------------------------------------------------------------------
   "Nur noch kurze Zeit"

   Die Seite lebt von einer einzigen Grösse: der Restzeit. Deshalb ist sie
   auch das Ordnungsprinzip der Gestaltung – von heiss (Rot, 48 Stunden)
   nach ruhig (Grau, dieser Monat). Wer die Seite überfliegt, sieht die
   Dringlichkeit, bevor er ein Wort gelesen hat.
   ------------------------------------------------------------------ */

/* Kurzantwort ------------------------------------------------------- */
.expiry-answer {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--kg-purple-line);
  border-radius: var(--radius-card);
  background: var(--kg-purple-soft);
}

.expiry-answer__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.expiry-answer__text strong { font-weight: 600; }

.expiry-answer__stamp {
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
}

/* Sprungmarken ------------------------------------------------------ */
.expiry-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--kg-line);
}

.expiry-jump__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--kg-line);
  border-radius: var(--radius-pill);
  background: var(--kg-solid);
  color: var(--kg-soft-ink);
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.expiry-jump__chip:hover,
.expiry-jump__chip:focus-visible {
  border-color: var(--kg-line-strong);
  color: var(--kg-ink);
}

.expiry-jump__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--kg-faint-ink);
}

.expiry-jump__count {
  color: var(--kg-ink);
  font-variant-numeric: tabular-nums;
}

.expiry-jump__chip--now .expiry-jump__dot,
.expiry-jump__chip--urgent .expiry-jump__dot { background: var(--kg-red); }
.expiry-jump__chip--soon .expiry-jump__dot   { background: var(--kg-peach); }
.expiry-jump__chip--later .expiry-jump__dot  { background: var(--kg-blue); }
.expiry-jump__chip--calm .expiry-jump__dot   { background: var(--kg-faint-ink); }

.expiry-jump__chip--now,
.expiry-jump__chip--urgent {
  border-color: rgba(228, 107, 114, 0.28);
  background: var(--kg-red-soft);
  color: var(--kg-red-ink);
}

.expiry-jump__chip--now .expiry-jump__count,
.expiry-jump__chip--urgent .expiry-jump__count { color: var(--kg-red-ink); }

/* Bänder ------------------------------------------------------------ */
.expiry-group {
  margin-bottom: var(--space-8);
  scroll-margin-top: var(--space-6);
}

.expiry-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.expiry-group__title {
  margin: 0;
  font-size: 1.25rem;
}

.expiry-group__count {
  font-size: 0.875rem;
  color: var(--kg-soft-ink);
  font-variant-numeric: tabular-nums;
}

.expiry-group__sub {
  margin: 4px 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--kg-soft-ink);
}

/* Die Überschrift trägt die Farbe, nicht die Fläche: Ein rot hinterlegtes
   Band würde die Poster erschlagen, um die es hier eigentlich geht. */
.expiry-group--now .expiry-group__title,
.expiry-group--urgent .expiry-group__title { color: var(--kg-red-ink); }
.expiry-group--soon .expiry-group__title   { color: #8a5326; }

/* Restzeitbalken ----------------------------------------------------

   Die Balken müssen in einer Reihe auf gleicher Höhe liegen, sonst wirkt
   das Raster unruhig. Titel sind aber mal ein-, mal zweizeilig.

   Deshalb wird die Karte zur Spalte, die sich über die volle Zeilenhöhe
   streckt – das Raster gibt allen Karten einer Reihe ohnehin dieselbe Höhe –,
   und der Balken bekommt "margin-top: auto". Damit sitzt er immer am Fuss,
   unabhängig davon, wie lang der Titel darüber ist. */
.expiry-group .movie-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.movie-card__runway {
  display: block;
  height: 3px;
  margin-top: auto;
  border-radius: 2px;
  background: var(--kg-line);
  overflow: hidden;
}

/* Der Abstand gehört jetzt an den Titel: Er trennt Text und Balken auch
   dann, wenn der Balken nach unten weggeschoben wurde. Nur hier – auf den
   übrigen Seiten bleibt die Karte, wie sie war. */
.expiry-group .movie-card__title { padding-bottom: var(--space-2); }

.movie-card__runway i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--kg-faint-ink);
}

.expiry-group--now .movie-card__runway i,
.expiry-group--urgent .movie-card__runway i { background: var(--kg-red); }
.expiry-group--soon .movie-card__runway i   { background: var(--kg-peach); }
.expiry-group--later .movie-card__runway i  { background: var(--kg-blue); }

/* Tabelle ----------------------------------------------------------- */
.expiry-table-wrap { margin: var(--space-9) 0 var(--space-8); }
.expiry-table-wrap h2 { margin-bottom: var(--space-4); font-size: 1.25rem; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.expiry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 34rem;
}

.expiry-table th,
.expiry-table td {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--kg-line);
  vertical-align: top;
}

.expiry-table thead th {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--kg-soft-ink);
  border-bottom-color: var(--kg-line-strong);
  white-space: nowrap;
}

.expiry-table tbody th { font-weight: 500; }
.expiry-table tbody tr:last-child th,
.expiry-table tbody tr:last-child td { border-bottom: 0; }
.expiry-table__days {
  color: var(--kg-red-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Häufige Fragen ---------------------------------------------------- */
.expiry-faq { margin-bottom: var(--space-9); }
.expiry-faq h2 { margin-bottom: var(--space-4); font-size: 1.25rem; }
.expiry-faq h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1rem;
}
.expiry-faq p {
  margin: 0;
  color: var(--kg-soft-ink);
  max-width: 68ch;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.pagination__link {
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--kg-line);
  background: var(--kg-solid);
  text-decoration: none;
  font-size: 0.9375rem;
}

.pagination__link[aria-current="page"] {
  background: var(--kg-black);
  border-color: var(--kg-black);
  color: #fff;
}

.pagination__ellipsis { color: var(--kg-soft-ink); padding-inline: 4px; }

/* Leerzustand */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  border-radius: var(--radius-panel);
  border: 1px dashed var(--kg-line-strong);
  background: rgba(255, 255, 255, 0.5);
}

.empty-state h2 { font-size: 1.25rem; }
.empty-state p { margin-inline: auto; color: var(--kg-soft-ink); }

/* ---------------------------------------------------------------------------
   13  Formulare
   --------------------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }

.field__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.field__hint {
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
  margin-top: 5px;
}

.field__error {
  font-size: 0.8125rem;
  color: var(--kg-red-ink);
  margin-top: 5px;
}

.input,
.textarea,
select.input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--kg-line-strong);
  background: var(--kg-solid);
  font-size: 1rem;              /* nie unter 16px auf Mobile */
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--kg-purple);
  box-shadow: 0 0 0 3px var(--kg-purple-soft);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--kg-red);
}

.textarea { min-height: 130px; resize: vertical; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  cursor: pointer;
}

.checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--kg-purple);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}

/* Newsletter */

.newsletter__note {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
}

/* ---------------------------------------------------------------------------
   14  Hinweise und Meldungen
   --------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  border: 1px solid var(--kg-line);
  background: var(--kg-solid);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}

.notice svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; }
.notice p:last-child { margin-bottom: 0; }

.notice--success { background: var(--kg-mint-soft); border-color: rgba(133, 221, 208, 0.45); color: var(--kg-mint-ink); }
.notice--warning { background: var(--kg-yellow-soft); border-color: rgba(244, 215, 125, 0.55); color: var(--kg-yellow-ink); }
.notice--error   { background: var(--kg-red-soft); border-color: rgba(228, 107, 114, 0.35); color: var(--kg-red-ink); }
.notice--info    { background: var(--kg-purple-soft); border-color: var(--kg-purple-line); color: var(--kg-purple-ink); }

.demo-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: repeating-linear-gradient(45deg, rgba(244, 215, 125, 0.3) 0 8px, rgba(244, 215, 125, 0.15) 8px 16px);
  border: 1px solid rgba(244, 215, 125, 0.6);
  color: var(--kg-yellow-ink);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Demo-Modus: durchgehendes Band ganz oben, damit niemand die Testdaten
   für echte Verfügbarkeiten hält. */
.demo-banner {
  background: var(--kg-yellow-soft);
  border-bottom: 1px solid rgba(244, 215, 125, 0.6);
  color: var(--kg-yellow-ink);
  font-size: 0.875rem;
}

.demo-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 10px;
}

.demo-banner svg { flex-shrink: 0; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   15  Fußzeile
   --------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-9);
  padding-block: var(--space-8) var(--space-6);
  border-top: 1px solid var(--kg-line);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.site-footer__claim {
  font-size: 0.9375rem;
  color: var(--kg-soft-ink);
  margin-top: var(--space-3);
  max-width: 26ch;
}

.site-footer__group h3 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kg-soft-ink);
  margin-bottom: var(--space-3);
}

.site-footer__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.site-footer__group a {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--kg-ink);
}

.site-footer__group a:hover { text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--kg-line);
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
}

.site-footer__attribution {
  max-width: 62ch;
  line-height: 1.5;
}

.site-footer__attribution a { color: var(--kg-soft-ink); }

/* ---------------------------------------------------------------------------
   16  Werbeflächen – klar abgesetzt, nie vor der Kernantwort (Briefing 4.3)
   --------------------------------------------------------------------------- */
.ad-slot {
  margin-block: var(--space-7);
  padding: var(--space-4);
  border: 1px dashed var(--kg-line-strong);
  border-radius: var(--radius-card);
  text-align: center;
  background: rgba(255, 255, 255, 0.45);
}

.ad-slot__label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--kg-soft-ink);
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------------
   17  Hilfsklassen
   --------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Waagerecht scrollbare Bereiche brechen nie das Seitenlayout */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
   18  Responsive – Briefing 13.12
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .movie-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .movie-grid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .main-nav { display: none; }

  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    padding-block: var(--space-7) var(--space-6);
  }

  .hero__art { order: -1; width: min(100%, 260px); }
  .hero__poster { transform: none; }
  .hero__float { right: -12px; bottom: 10%; }

  .movie-grid,
  .movie-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .movie-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .grid-2 { grid-template-columns: 1fr; }

  /* Eine Spalte: Die Seitenspalte rutscht unter den Inhalt und hört auf,
     stehen zu bleiben – festgeklebt hätte sie hier nichts, woran sie klebt. */
  .detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .detail-layout__rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
  }

  .title-tint__inner { padding: var(--space-5); }

  .title-head { padding: var(--space-4) var(--space-5); }

  .section { margin-block: var(--space-8); }
}

@media (max-width: 650px) {
  /* Auch der Einzug der Kopfleiste schrumpft hier. Er steht als Token, weil
     der Hero-Text sich daran ausrichtet – stünde die 12 zweimal im
     Stylesheet, liefe die Flucht beim nächsten Anfassen auseinander. */
  :root { --gutter: 12px; --header-inset: 12px; --titel-hoehe: 95px; }

  .site-header { padding-top: var(--space-4); }
  .site-header__inner { padding: 10px var(--header-inset); gap: var(--space-2); }
  .brand__logo { height: 30px; }

  .hero { padding-block: var(--space-6); }
  .hero__intro { margin-bottom: var(--space-5); }

  .search { --search-radius: var(--radius-card); }
  .search__form { padding: 6px 6px 6px 14px; }
  .search__submit { padding: 11px 15px; }
  .search__submit span { display: none; }

  .movie-grid,
  .movie-grid--wide,
  .movie-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

  /* Detail-Kopf auf dem Handy.

     Drei Spalten nebeneinander lassen für den Titel nichts übrig, deshalb
     zwei. Entscheidend ist aber die Zeilenaufteilung: Neben dem Poster
     steht nur, was auch neben ein Poster passt – Titel, Eckdaten,
     Bewertung und Merken. Alles Breitere rutscht darunter auf die volle
     Breite.

     Vorher lief die Textspalte unter dem Poster weiter. Links daneben
     blieb dann eine hohe leere Fläche stehen, und die linke Kante sprang
     im Wechsel zwischen 0 und 100 Pixeln – das war der unruhige Eindruck. */
  .title-tint__inner { padding: var(--space-4); }

  /* Dritte Spalte nur für den Merken-Knopf: "auto" macht sie genau so
     breit wie er und keinen Pixel breiter. Titel, Eckdaten und Bewertung
     laufen über Spalte 2 und 3 hinweg, die Genres über 1 und 2 – so bleibt
     der Knopf allein rechts aussen auf der Genre-Zeile stehen. */
  .title-tint__head {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    align-items: start;
  }

  /* Hebt den Textblock als Kasten auf, damit seine Kinder selbst zu
     Rasterfeldern werden und sich auf eigene Zeilen legen lassen. */
  .title-tint__body { display: contents; }

  /* Als Rasterfelder addieren sich ihre eigenen Aussenabstände zum
     Rasterabstand – daraus wurden ungleiche Sprünge von 17 bis 28 Pixeln.
     Den Abstand bestimmt jetzt allein das Raster. */
  .title-tint__meta,
  .title-tint__tagline,
  .title-tint__genres { margin: 0; }

  .title-tint__poster {
    width: 84px;
    height: 126px;
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .title-tint__work { grid-column: 2 / -1; grid-row: 1; }

  /* Etwas kleiner und enger gesetzt, damit "2017 · 81 Min. · FSK 12"
     neben dem Poster in eine Zeile passt. Bricht sie doch, wandert der
     Trennpunkt mit seinem Wert – hängen bleiben kann er nicht mehr. */
  .title-tint__meta {
    grid-column: 2 / -1;
    grid-row: 2;
    gap: 0 var(--space-2);
    font-size: 0.875rem;
  }

  .title-tint__metaItem { gap: var(--space-2); }

  /* Auch die Seitenspalte wird aufgelöst: Bewertung und Merken-Knopf
     stehen auf dem Handy in verschiedenen Zeilen und müssen deshalb
     einzeln im Raster liegen. */
  .title-tint__side { display: contents; }

  .rating-inline {
    grid-column: 2 / -1;
    grid-row: 3;
    justify-self: start;
    align-self: end;
  }

  /* Volle Breite: Die Tagline braucht mehr Platz, als neben dem Poster
     übrig ist, und steht damit auf derselben Kante wie die Angebotsleiste. */
  .title-tint__tagline { grid-column: 1 / -1; grid-row: 4; }

  /* Genres links, Merken-Knopf rechts aussen – gemeinsame Zeile. */
  .title-tint__genres {
    grid-column: 1 / 3;
    grid-row: 5;
  }

  /* Unten statt mittig ausgerichtet: Passen die drei Chips nicht in eine
     Reihe, brechen sie um – zentriert schwebte der Knopf dann zwischen
     den beiden Reihen. So steht er in jedem Fall in der unteren rechten
     Ecke, bündig mit der letzten Chip-Reihe. */
  .title-tint__side > .btn,
  [data-watch-toggle] {
    grid-column: 3;
    grid-row: 5;
    margin-top: 0;
    align-self: end;
    justify-self: end;
  }

  .title-tint__bar { gap: var(--space-3); }

  /* Die Knöpfe teilen sich die Zeile, statt einzeln umzubrechen. */
  .title-tint__actions { width: 100%; }
  .title-tint__actions .btn { flex: 1 1 auto; }
  .title-tint__actions .btn--square { flex: 0 0 auto; }

  .title-head { padding: var(--space-4); }
  .title-head__h1 { font-size: 1.3rem; }

  /* Gleiche Werte wie .panel weiter oben in diesem Block. */
  .title-body { padding: var(--space-5) var(--space-4); border-radius: var(--radius-card); }
  .title-body__text { font-size: 1rem; }

  .answer-box {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-4);
  }

  .answer-box__sentence { font-size: 1.0625rem; }
  .answer-box__facts th { width: 46%; }

  .faq__answer { padding-left: 0; }

  .offer-row {
    grid-template-columns: auto 1fr;
    row-gap: var(--space-3);
  }

  .offer-row__action { grid-column: 1 / -1; }
  .offer-row__action .btn { flex: 1; }

  .facts__row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }

  .panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius-card); }

  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-5); }


  .filter-bar { padding: var(--space-3); }
}

@media (max-width: 380px) {
  .movie-grid,
  .movie-grid--wide,
  .movie-grid--compact { gap: var(--space-3); }

  .btn { padding: 11px 16px; }
  .site-footer__top { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   19  Bewegung – Briefing 13.11
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .movie-card__link:hover .movie-card__poster { transform: none; }
}

/* Druckausgabe: Poster und Navigation weglassen, Links ausschreiben */
@media print {
  body { background: #fff; }
  .site-header, .site-footer, .ad-slot, .search, .btn { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* =========================================================================
   Schnellwahl über dem Bestandssatz: Glas-Knöpfe

   Der Glaseindruck entsteht aus drei Schichten, nicht aus einer Farbe:
   einer halbdurchsichtigen Fläche, einer Unschärfe dahinter und einem
   hellen Rand, der oben heller ist als unten. Ohne den Verlauf im Rand
   sieht die Fläche flach aus, egal wie stark die Unschärfe ist.

   Die Reihe scrollt seitlich statt umzubrechen. Sieben Knöpfe in zwei
   Zeilen wirken wie eine Navigationsleiste; in einer Zeile bleiben sie
   das, was sie sind – ein Angebot zum Weiterstöbern.
   ========================================================================= */
.glass-row {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.glass-row::-webkit-scrollbar { display: none; }

/* Die Knöpfe teilen sich die Zeile zu gleichen Teilen und füllen sie aus.

   flex: 1 0 auto und nicht 1 1 auto – wachsen ja, schrumpfen nein. Passen
   sie bei ihrer natürlichen Breite nicht mehr nebeneinander, soll die Reihe
   seitlich scrollen, statt die Beschriftungen zusammenzuquetschen. */
/* Der Glaseindruck kommt hier NICHT aus der Unschärfe.

   backdrop-filter verwischt, was dahinterliegt – und dahinter liegt an
   dieser Stelle ein ruhiger heller Verlauf. Da ist nichts zu verwischen.
   Was Glas ausmacht, ist stattdessen seine Kante: eine helle Lichtlinie
   oben, wo das Licht auf die Fläche trifft, und ein Schattensaum unten,
   wo die Fläche Dicke hat. Beides sind innere Schatten und wirken
   unabhängig davon, was dahinter steht.

   Die Fläche selbst ist durchsichtiger als vorher – zusammen mit der
   höheren Sättigung nimmt sie die Farbe des Untergrunds auf, statt sie
   mit Weiss zuzudecken. */
.glass-pill {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 18px var(--space-5);
  border-radius: 22px;
  position: relative;
  /* Alles wird auf die Rundung beschnitten – die eingeblendete Schicht wie
     auch der Weichzeichner.

     Vorher stand hier isolation: isolate, und die Schicht lag auf
     z-index: -1. Diese Kombination bringt Browser dazu, backdrop-filter
     nicht mehr auf die abgerundete Form zu beschneiden: Der Weichzeichner
     wird dann als Rechteck gezeichnet und guckt an den Ecken heraus.
     Ohne negativen z-index tritt das nicht auf. */
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  /* Durchgehend fallend, ohne Umkehr. Die vorige Fassung ging von 0,62 auf
     0,34 und wieder hoch auf 0,44 – diese Kehrtwende in der Mitte zog eine
     sichtbare Falte quer durch die Fläche. Sechs Stützstellen bilden jetzt
     eine weiche Kurve nach; zwei allein wirken an den Enden hart. */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.66) 0%,
    rgba(255, 255, 255, 0.60) 18%,
    rgba(255, 255, 255, 0.51) 40%,
    rgba(255, 255, 255, 0.43) 62%,
    rgba(255, 255, 255, 0.38) 82%,
    rgba(255, 255, 255, 0.36) 100%
  );
  backdrop-filter: blur(24px) saturate(190%) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.04);
  box-shadow:
    /* Aussen: die Kachel liegt auf der Seite, nicht in ihr */
    0 2px 10px rgba(24, 28, 36, 0.07),
    /* Lichtkante oben */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    /* Dicke: Schattensaum an der Unterkante */
    inset 0 -1px 0 rgba(24, 28, 36, 0.06),
    /* Weiches Streulicht im Inneren, dort wo Glas sammelt */
    inset 0 12px 22px -14px rgba(255, 255, 255, 0.9);
  color: var(--kg-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.24s ease;
}

/* Symbol und Beschriftung müssen über der eingeblendeten Schicht liegen –
   ohne z-index würde sie den Text verdecken. */
.glass-pill > * { position: relative; z-index: 1; }

.glass-pill svg { flex: 0 0 auto; opacity: 0.75; }

/* Trending trägt etwas mehr Gewicht – es ist der einzige Knopf, der nicht
   auf ein Genre führt, und soll sich davon merklich abheben. */
.glass-pill--lead {
  border-color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.56) 55%,
    rgba(255, 255, 255, 0.66) 100%
  );
  font-weight: 600;
}

/* Violett statt Orange: dieselbe Akzentfarbe wie die Eckfahne der
   Filmkarte, der Knopf "Alle" in der Anbieterleiste und das hervorgehobene
   Wort in der Überschrift. Das Orange war die einzige Stelle, an der die
   Seite eine zweite Signalfarbe führte. */
.glass-pill--lead svg { color: var(--kg-purple); opacity: 1; }

/* Die hellere Fläche beim Überfahren liegt als eigene Schicht darüber und
   wird eingeblendet.

   Der Grund ist handfest: Ein Verlauf lässt sich in CSS nicht weich
   überblenden – background-image kennt keine Zwischenschritte. Die alte
   Fassung listete zwar "background" in der Übergangsangabe, der Browser
   ignoriert das aber und schaltet hart um, während sich Anhebung und
   Schatten weich bewegen. Genau dieses Auseinanderlaufen sieht man als
   Ruckeln. Deckkraft dagegen lässt sich überblenden. */
/* Etwas über den Rand hinaus, damit an den Rundungen keine Haarlinie der
   Grundfläche stehen bleibt – overflow: hidden schneidet den Überstand ab. */
.glass-pill::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.84) 18%,
    rgba(255, 255, 255, 0.72) 40%,
    rgba(255, 255, 255, 0.62) 62%,
    rgba(255, 255, 255, 0.56) 82%,
    rgba(255, 255, 255, 0.54) 100%
  );
  opacity: 0;
  transition: opacity 0.24s ease;
}

.glass-pill:hover::after { opacity: 1; }

.glass-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(24, 28, 36, 0.12),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(24, 28, 36, 0.06),
    inset 0 12px 22px -14px rgba(255, 255, 255, 0.95);
}

.glass-pill:focus-visible {
  outline: 2px solid var(--kg-purple);
  outline-offset: 2px;
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .glass-pill,
  .glass-pill::after { transition: none; }
  .glass-pill:hover { transform: none; }
}

@media (max-width: 650px) {
  .glass-pill {
    flex: 0 0 auto;
    padding: 15px var(--space-4);
    font-size: 0.875rem;
  }
}

/* =========================================================================
   Anbieterfilter unter "Die neusten kostenlosen Filme"

   Bewusst schlichter als die Glas-Knöpfe oben: Die stehen für sich, dieser
   Filter gehört zu der Liste darunter. Zwei gleich auffällige Reihen auf
   einer Seite konkurrieren miteinander, statt sich zu ergänzen.
   ========================================================================= */

/* =========================================================================
   Listen-Anreisser auf der Startseite

   Zwei liegende Kacheln nebeneinander: Überschrift links auf farbiger
   Fläche, das Bild der Liste rechts. Der Verlauf dazwischen ist nicht
   Zierde – ohne ihn träfe weisse Schrift auf eine harte Bildkante, und je
   nach hochgeladenem Bild wäre sie dort nicht mehr lesbar.
   ========================================================================= */
.list-teaser-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

/* Steht nur eine Kachel da, nimmt sie beide Spalten. Sonst bliebe daneben
   eine leere Hälfte stehen – und das passiert regelmässig: unter einer
   Liste sind es die anderen veröffentlichten Listen, und solange es wenige
   gibt, bleibt oft nur eine übrig. */
.list-teaser-row > .list-teaser:only-child { grid-column: 1 / -1; }

.list-teaser {
  position: relative;
  display: block;
  min-height: 210px;
  padding: var(--space-6);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: rgb(var(--teaser-rgb));
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Die Farbe steht als RGB-Anteile da, nicht als Hexwert.
   Nur so lässt sich derselbe Ton mit Deckkraft 0 schreiben – und genau das
   braucht ein sauberer Verlauf. Endet er auf dem Schlüsselwort
   "transparent", ist das transparentes SCHWARZ, und die Farbe gräult auf dem
   Weg dorthin sichtbar ab. */
.list-teaser--purple { --teaser-rgb: 83 64 196; }
.list-teaser--ink    { --teaser-rgb: 38 48 66; }

/* Das Bild liegt über die ganze Kachel, nicht nur über die rechte Hälfte.
   Vorher begann es hart bei 58 % und zog eine sichtbare senkrechte Kante
   quer durchs Motiv. Jetzt gibt es keine Kante mehr, die man sehen könnte –
   den Übergang macht allein der Verlauf darüber. */
.list-teaser__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Viele Stützstellen statt zweier: Ein linearer Verlauf von voll nach null
   wirkt in der Mitte flau und an den Enden abrupt. Die abgestuften Werte
   bilden eine weiche Kurve nach. */
.list-teaser__fade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgb(var(--teaser-rgb) / 1)    0%,
    rgb(var(--teaser-rgb) / 1)    26%,
    rgb(var(--teaser-rgb) / 0.97) 36%,
    rgb(var(--teaser-rgb) / 0.88) 45%,
    rgb(var(--teaser-rgb) / 0.72) 54%,
    rgb(var(--teaser-rgb) / 0.5)  64%,
    rgb(var(--teaser-rgb) / 0.28) 74%,
    rgb(var(--teaser-rgb) / 0.1)  86%,
    rgb(var(--teaser-rgb) / 0)    100%
  );
}

.list-teaser__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 162px;
  max-width: 60%;
}

.list-teaser__headline {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.list-teaser__foot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
  font-weight: 500;
}

.list-teaser__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.list-teaser:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(24, 28, 36, 0.18);
}

.list-teaser:focus-visible {
  outline: 2px solid var(--kg-purple);
  outline-offset: 3px;
}

/* Ohne Bild darf der Text die ganze Breite nutzen. */
.list-teaser--plain .list-teaser__body { max-width: none; }

/* -------------------------------------------------------------------------
   Schmale Form für die Seitenspalte der Detailseiten

   Nichts als kleinere Masse: Farbe, Verlaufsrichtung und Aufbau bleiben
   die der Startseite, damit dieselbe Liste auf beiden Seiten dieselbe
   Kachel ist.

   Eine frühere Fassung drehte den Verlauf hier senkrecht, mit dem
   Argument, quer bliebe vom Bild in einer Spalte von gut einem Drittel
   Breite zu wenig übrig. Nachgemessen stimmt das nicht: Quer bekommt das
   Bild rund 139 auf 240 Pixel unverdeckt, senkrecht nur 347 auf 48 – die
   sichtbare Fläche ist quer fast doppelt so gross. Was quer wirklich
   kostet, ist Breite für die Überschrift; die bricht öfter um. Das ist
   der Preis, und er ist geringer als eine zweite Bildsprache.
   ------------------------------------------------------------------------- */
.list-teaser--rail {
  /* flex, damit der Körper die Höhe der Kachel ausfüllt. Über min-height
     am Körper ginge es auch, aber dann stünde die Innenhöhe als
     ausgerechnete Zahl da und wäre beim nächsten Polsterwechsel still
     falsch. */
  display: flex;
  /* Eine Untergrenze, keine Höhe: Reicht der Platz für eine lange
     Überschrift nicht, wächst die Kachel mit, statt den Text
     abzuschneiden. Untereinander in einer Spalte dürfen sie
     unterschiedlich hoch sein. */
  min-height: 200px;
  padding: var(--space-5);
  border-radius: var(--radius-card);
}

.list-teaser--rail .list-teaser__body {
  flex: 1;
  min-height: 0;
  gap: var(--space-3);
}

/* Kleiner als auf der Startseite: Der Text hat hier gut 180 statt 280
   Pixel Breite. */
.list-teaser--rail .list-teaser__headline {
  font-size: 1.0625rem;
  line-height: 1.3;
}

/* Steht nur, wo es belegt ist: bei einer Liste, die diesen Titel wirklich
   enthält. Beim Auffüllen nach Genre wäre es eine Behauptung. */
.list-teaser__kicker {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .list-teaser { transition: none; }
  .list-teaser:hover { transform: none; }
}

@media (max-width: 900px) {
  .list-teaser-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 650px) {
  .list-teaser { padding: var(--space-5); min-height: 180px; }
  .list-teaser__body { min-height: 140px; max-width: 68%; }
}

/* =========================================================================
   Anbieterwahl als Logo-Reihe unter der Filterleiste

   Nur das Logo, kein Name: In einer Reihe aus wenigen bekannten Marken
   trägt das Bild schneller als der Text. Für alle, die eine Marke nicht am
   Logo erkennen, steht der Name im title-Attribut, und für Screenreader
   liegt er versteckt im Link – ein Bild allein wäre dort stumm.
   ========================================================================= */
/* Eine Zeile, die seitlich wandert – wie die Genre-Schnellwahl darüber.

   Vorher stand hier flex-wrap: wrap. Auf einem Telefon reichte die Breite
   nie für alle Anbieter, also brachen sie um und standen zu zweit oder zu
   dritt untereinander; die Reihe wurde dabei höher als der Inhalt, den sie
   filtert. Gescrollt wird jetzt statt umgebrochen, mit denselben Mitteln
   wie bei .glass-row: kein Umbruch, waagerechter Überlauf, Rollbalken
   ausgeblendet.

   Die kleine Polsterung unten ist kein Zierrat: Der Container schneidet
   ab, was übersteht, und die Kacheln werfen einen Schatten. Ohne sie wäre
   er an der Unterkante abgeschnitten. */
/* Die Anbieterzeile steht in einem eigenen Kasten.

   Ohne ihn schwebten die Logos frei über dem Seitenhintergrund und lasen
   sich wie ein Rest der Überschrift darüber. Der Kasten fasst sie zu einem
   Bedienelement zusammen: eine Leiste, mit der man das Raster darunter
   filtert.

   Der Kasten ist zugleich der Rollbereich – passt die Reihe nicht mehr,
   wandert sie innerhalb ihrer Kanten und nicht über die Seite hinaus.
   Deshalb liegt der seitliche Innenabstand hier und nicht am Inhalt. */
.provider-filter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  /* Dieselbe Glasfläche wie die Genre-Pillen darüber: heller Verlauf,
     weisser Rand, Unschärfe dahinter. Kein neuer Effekt, sondern der, den
     die Seite schon spricht – zwei verschiedene Glasarten auf einer Seite
     wirken wie ein Versehen. */
  background: linear-gradient(rgba(255, 255, 255, 0.82) 0%,
                              rgba(255, 255, 255, 0.56) 55%,
                              rgba(255, 255, 255, 0.66) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-panel);
  backdrop-filter: blur(24px) saturate(1.9) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(1.9) brightness(1.04);
  box-shadow: 0 2px 10px rgba(24, 28, 36, 0.07),
              inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
              inset 0 -1px 0 rgba(24, 28, 36, 0.06);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.provider-filter::-webkit-scrollbar { display: none; }

.provider-filter__item {
  display: inline-flex;
  /* Wachsen nein, schrumpfen nein: Passt die Reihe nicht mehr, soll sie
     wandern und nicht die Kacheln zusammendrücken. */
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--kg-line);
  border-radius: 14px;
  background: var(--kg-solid);
  color: var(--kg-soft-ink);
  font-size: 0.875rem;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

/* Der Logo-Knopf IST das Logo: keine weisse Fläche darum, kein Rahmen quer
   über die Bildkante. Die Marken liegen quadratisch vor, deshalb füllen sie
   den quadratischen Knopf ohne Beschnitt.

   Die Rundung übernimmt der Knopf per overflow, nicht das Bild – sonst
   müssten beide Radien von Hand gleich gehalten werden. */
.provider-filter__item--logo {
  min-width: 46px;
  width: 46px;
  padding: 0;
  overflow: hidden;
  /* Kein Rahmen, auch kein durchsichtiger: Er wäre 1 px breit und liesse
     ringsum die Seitenfarbe durchscheinen – das Logo säße dann in einem
     schmalen hellen Saum statt bündig im Knopf. */
  border: none;
  background: transparent;
  /* Ein Schatten für die Kante, ein zweiter als leiser violetter Schein
     dahinter. Der Schein ist im Ruhezustand kaum zu sehen und dafür da,
     dass beim Zeigen nichts aus dem Nichts auftaucht, sondern nur heller
     wird. */
  box-shadow: 0 1px 3px rgba(24, 28, 36, 0.14),
              0 0 14px -4px rgba(121, 87, 246, 0.28);
}

.provider-filter__item--logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kein Ring um den gewählten Anbieter.

   Stattdessen treten die übrigen zurück – aber nur, solange überhaupt einer
   gewählt ist. Ist "Alle" aktiv, stehen alle Logos gleichberechtigt in
   voller Farbe da; sie abzudunkeln würde einen Zustand behaupten, den es
   nicht gibt. Die Klasse dafür setzt die Ansicht, nicht das CSS: Ein
   Zustand, den der Server kennt, gehört nicht in eine Auswahlregel. */
.provider-filter--gefiltert .provider-filter__item--logo {
  opacity: 0.35;
}

.provider-filter--gefiltert .provider-filter__item--logo.provider-filter__item--active,
.provider-filter--gefiltert .provider-filter__item--logo:hover {
  opacity: 1;
}

.provider-filter__item--logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(121, 87, 246, 0.5),
              0 2px 6px rgba(24, 28, 36, 0.18);
}

.provider-filter__item:hover {
  border-color: var(--kg-line-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 28, 36, 0.08);
}

/* "Alle" ist immer violett – auch dann, wenn gerade ein Anbieter gewählt ist.

   Der Knopf ist kein Zustandsanzeiger, sondern der Weg zurück. Wechselte er
   beim Filtern die Farbe, sähe er aus wie deaktiviert; tatsächlich ist er
   genau dann am nützlichsten. Er tritt stattdessen zurück wie die Logos
   daneben – gleiche Sprache für dieselbe Aussage: "gerade nicht gewählt".

   Ein Logo bekommt bewusst keinen Ring und keine Füllung. Eine Fläche
   hinter einem farbigen Logo verschluckt es, und ein Ring lag als zweiter
   Rahmen um eine Marke, die selbst schon eine Kante hat. Dass eines gewählt
   ist, sagt die volle Deckkraft neben den verblassten Nachbarn deutlich
   genug – ohne zusätzliches Zeichen. */
.provider-filter__item:not(.provider-filter__item--logo) {
  background: var(--kg-purple);
  border-color: var(--kg-purple);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(121, 87, 246, 0.55);
}

.provider-filter__item:not(.provider-filter__item--logo):hover {
  border-color: var(--kg-purple);
  box-shadow: 0 8px 20px -4px rgba(121, 87, 246, 0.6);
}

/* Zurückgetreten, solange ein Anbieter gewählt ist – wie die Logos. */
.provider-filter--gefiltert .provider-filter__item:not(.provider-filter__item--logo) {
  opacity: 0.35;
}

.provider-filter--gefiltert .provider-filter__item:not(.provider-filter__item--logo):hover {
  opacity: 1;
}

.provider-filter__item:focus-visible {
  outline: 2px solid var(--kg-purple);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .provider-filter__item { transition: none; }
  .provider-filter__item:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Magazin: Titelbilder

   Die Bilder wurden bisher hochgeladen und gespeichert, aber nie ausgegeben –
   Formular und Ablage waren da, die Anzeige fehlte. Hier steht, wie sie
   aussehen.
   --------------------------------------------------------------------------- */

/* Titelbild im Beitrag: Breite der Textspalte, festes 16:9.

   "Breite der Textspalte" heisst inzwischen wörtlich das – die Figur steht
   seit dem Umbau im Textkasten und nicht mehr über der ganzen Seite. Vorher
   war sie 1120 Pixel breit und damit fast doppelt so breit wie der Beitrag
   darunter; bei 16:9 sind das über sechshundert Pixel Höhe, die den Text auf
   einem Laptop halb aus dem Bild schoben.

   aspect-ratio statt Höhenangabe, damit beim Laden nichts springt – die
   Fläche steht, bevor das Bild da ist. */
.article-hero {
  margin: 0 0 var(--space-5);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--kg-surface);
}

.article-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Kachel in der Übersicht: Bild links, Text rechts – auf dem Handy
   untereinander, weil ein 16:9-Bild neben Text sonst briefmarkengross wäre. */
.magazin-karte--bild {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-4);
}

.magazin-karte__bild {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--kg-surface);
}

.magazin-karte__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 220ms ease;
}

.magazin-karte--bild:hover .magazin-karte__bild img {
  transform: scale(1.03);
}

.magazin-karte__text > :first-child { margin-top: 0; }
.magazin-karte__text > :last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .magazin-karte--bild {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .magazin-karte__bild img { transition: none; }
  .magazin-karte--bild:hover .magazin-karte__bild img { transform: none; }
}


/* Hervorgehobener Menüpunkt -----------------------------------------

   Nur "Letzte Chance" trägt ihn. Bewusst zurückhaltend: ein Punkt in der
   Signalfarbe und etwas mehr Tiefe in der Schrift, kein Aufkleber. Die
   Kopfzeile ist ruhig, und ein lautes Abzeichen darin würde die ganze
   Seite lauter machen, statt diesen einen Punkt wichtiger.
   ------------------------------------------------------------------ */
.main-nav__link--urgent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--kg-ink);
}

.main-nav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  /* Ebenfalls violett. Rot hätte hier "Achtung" gesagt – gemeint ist aber
     "hier tut sich etwas", und dafür steht auf dieser Seite das Violett. */
  background: var(--kg-purple);
}

/* Der Punkt pulst dezent – aber nur, wenn niemand darum gebeten hat,
   Bewegung zu reduzieren. */
@media (prefers-reduced-motion: no-preference) {
  .main-nav__dot { animation: kg-pulse 2.6s ease-in-out infinite; }
}

@keyframes kg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}


/* Amazon-Zeile in der Anbieterbox -------------------------------------

   Sie steht an erster Stelle, noch vor den geprüften Gratis-Angeboten.
   Genau deshalb muss sie sich in derselben Sekunde als Anzeige zu
   erkennen geben, in der jemand die Box überfliegt: eigener Grund,
   eigene Randfarbe, Marke direkt neben dem Namen.

   Kein grelles Banner – die Zeile behält die Geometrie der übrigen
   Anbieterzeilen. Sie soll erkennbar anders sein, nicht lauter.
   -------------------------------------------------------------------- */
/* Ohne farbigen Grund: Die Zeile sieht aus wie die anderen, die Marke
   "Anzeige" trägt die Unterscheidung allein. Sie steht direkt neben dem
   Namen und ist damit dort, wo der Blick zuerst hinfällt. */
.ad-mark {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--kg-line-strong);
  background: var(--kg-solid);
  color: var(--kg-soft-ink);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Platzhalter für die fehlende Melde-Schaltfläche.

   Die normalen Anbieterzeilen tragen rechts neben dem Knopf ein
   Melde-Symbol; die Anzeigenzeile hat keines, weil es dort nichts zu
   melden gibt. Ohne Platzhalter bekäme ihr Knopf den freien Platz und
   liefe um dessen Breite plus Abstand nach rechts aus der Flucht. */
.offer-row__action-spacer {
  flex: none;
  width: var(--offer-report-size);
}

.btn--ad {
  background: var(--kg-ink);
  border-color: var(--kg-ink);
  color: #fff;
}

.btn--ad:hover,
.btn--ad:focus-visible {
  background: var(--kg-black);
  border-color: var(--kg-black);
  color: #fff;
}


/* WhatsApp-Zeile in der Anbieterbox ---------------------------------

   Kein Werbehinweis, weil es der eigene Kanal ist – aber deutlich als
   etwas anderes erkennbar als ein Streamingangebot. Das macht hier die
   Farbe: WhatsApp-Grün am Symbol und am Knopf, sonst dieselbe Zeile wie
   überall.
   -------------------------------------------------------------------- */
/* Eigener Kasten über der Anbieterbox, kein Bestandteil davon mehr.

   Er trägt dieselbe Fläche wie .panel – weisser Grund, feine Linie,
   Panelrundung, weicher Schatten –, damit er sich als Verwandter der Box
   darunter liest und nicht als Fremdkörper.

   Zwei Masse sind bewusst von .panel übernommen und nicht frei gewählt:

     Der seitliche Innenabstand ist var(--space-6), genau wie dort. Nur so
     stehen der Kanalknopf und die Anbieterknöpfe darunter auf derselben
     senkrechten Flucht. Mit einem knapperen Wert rutschte der obere Knopf
     nach aussen, und zwei gestapelte Kästen mit versetzten Knöpfen sehen
     nach Versehen aus.

     Senkrecht dagegen knapper als .panel: Dort umschliesst der Abstand eine
     Überschrift und eine ganze Liste, hier eine einzige Zeile. Mit 32 Pixeln
     oben und unten wirkte der Kasten aufgeblasen.

   Zum Namen: Der Kasten hiess bis hierher .wa-box – genau wie der
   WhatsApp-Anreisser auf der Startseite weiter oben in dieser Datei.
   Zwei Bauteile unter einem Namen, und weil dieser Block der spätere
   ist, erbte der Anreisser still alles, was hier steht: align-items
   center schob seinen Knopf in die Mitte statt an die linke Textkante,
   und margin-bottom nahm ihm 16 Pixel Höhe, sodass er neben dem Kasten
   links zu kurz endete. Beides sah nach Absicht aus und war keine.
   Deshalb hier ein eigener Name statt einer Regel mit mehr Gewicht:
   Ein Spezifitätswettlauf hätte denselben Abend gerettet und beim
   nächsten Zusatz wieder verloren. */
.wa-band {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--kg-solid);
  border: 1px solid var(--kg-line);
  border-radius: var(--radius-panel);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
}

.wa-band .offer-row__provider { align-items: center; }

/* Auf schmalen Schirmen untereinander: Nebeneinander bliebe für den Text
   kaum Platz, und der Knopf müsste umbrechen. */
@media (max-width: 560px) {
  .wa-band {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }

  /* Der Platzhalter für das Melde-Symbol ergibt hier keinen Sinn mehr –
     untereinander gibt es keine Flucht, die er halten müsste. */
  .wa-band .offer-row__action-spacer { display: none; }
}

.wa-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 9px;
  border-radius: var(--radius-sm);
  background: rgba(37, 211, 102, 0.14);
  color: #128c4a;
  flex: none;
}

.wa-zeichen svg { display: block; }

.btn--wa {
  background: #25d366;
  border-color: #25d366;
  color: #06301a;
}

.btn--wa:hover,
.btn--wa:focus-visible {
  background: #1fbe5b;
  border-color: #1fbe5b;
  color: #06301a;
}


/* Gleiche Knopfbreite in der ganzen Anbieterbox ----------------------

   Die Beschriftungen sind verschieden lang – "Kanal folgen" ist kürzer
   als "Jetzt anschauen". Ohne Mindestbreite fiele der eine Knopf schmaler
   aus als der andere, und die Box wirkte unruhig. Der Text steht deshalb
   mittig in einem Knopf fester Mindestbreite.
   -------------------------------------------------------------------- */
.offer-row__action .btn {
  min-width: 11.5rem;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Hero der Startseite, zweigeteilt

   Links Ansage und Suche, rechts das Programm. Die linke Spalte ist die
   schmalere: Sie trägt Text, und Text über die halbe Bildschirmbreite liest
   sich schlecht. Die rechte bekommt den Rest, weil dort das Bild steht.
   --------------------------------------------------------------------------- */
.hero2 {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: var(--space-7);
  /* stretch statt start: Die Karte rechts soll auf derselben Grundlinie
     enden wie das Suchfeld links. Mit "start" hing sie oben und hörte 26
     Pixel zu früh auf – zwei Spalten, die nicht zusammen abschliessen,
     sehen nach Versehen aus. */
  align-items: stretch;
  /* Luft zur Kopfleiste. Sie schwebt als eigene Fläche über der Seite und
     braucht Abstand, sonst klebt der Hero an ihrer Unterkante. */
  padding-top: var(--space-7);
  /* Grosszügiger Abstand nach unten: Der Hero und die Genre-Schnellwahl sind
     zwei getrennte Angebote. Standen sie zu eng, las sich die Pillenreihe wie
     eine Fusszeile der Karte darüber statt als eigener Einstieg. */
  padding-bottom: var(--space-9);
}

/* Spalte statt Block, damit das Suchfeld ans untere Ende wandern kann.

   Der Grund ist die Ausrichtung der beiden Spalten: Sie sollen auf derselben
   Linie enden. Bisher war die Textspalte die höhere und die Karte streckte
   sich – seit die Wortmarken grösser sind, ist es umgekehrt. Ohne dieses
   margin-top:auto bliebe das Suchfeld oben hängen und die Karte ragte
   darunter hinaus. */
.hero2__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Der Textblock rückt auf die Flucht des Logos ein, das Suchfeld nicht.

   Warum nur diese vier Zeilen: Sie bilden mit dem Logo darüber eine
   senkrechte Kante, die das Auge liest. Das Suchfeld ist ein eigener Kasten
   mit eigener Fläche – es gehört auf die Breite der Spalte und nicht auf die
   Schriftkante, sonst stünde seine linke Rundung im Nichts.

   Der Betrag ist nicht gewählt, sondern abgeleitet: Innenabstand der
   Kopfleisten-Pille plus deren Rahmen. */
/* Die drei Zusagen über der Überschrift */
.hero-trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-5) calc(var(--header-inset) + 1px);
  padding: 0;
  list-style: none;
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--kg-ink);
}

/* Nicht nebeneinander, sondern durch eine feine Linie getrennt – sonst
   verschwimmen die drei Zusagen zu einem einzigen langen Satz. */
.hero-trust li + li::before {
  content: "";
  width: 1px;
  height: 15px;
  margin-right: var(--space-3);
  background: var(--kg-line-strong);
}

/* Träger für die drei Zeichen.

   Etwas grösser als der frühere Häkchen-Kreis und mit weicher Ecke statt
   rund: Schild, Blatt und Preisschild sind Umrisszeichnungen mit Innenleben
   und brauchen mehr Fläche als ein Haken, sonst laufen ihre Linien am Rand
   zusammen. */
.hero-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--kg-purple-soft);
  color: var(--kg-purple-ink);
  flex: none;
}

.hero2__title {
  /* Der Einzug steht hier und nicht in einer eigenen Regel davor: Das
     margin-Kurzschreiben setzt alle vier Seiten und würde ein davor
     notiertes margin-left stillschweigend wieder auf null ziehen. */
  margin: 0 0 0 calc(var(--header-inset) + 1px);
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

/* Das hervorgehobene Wort steht in der Zeile und bricht nicht heraus:
   Der Text soll derselbe bleiben, nur eingefärbt. */
.hero__accent {
  font-style: normal;
  color: var(--kg-purple-ink);
}

.hero2__kicker {
  margin: var(--space-4) 0 0 calc(var(--header-inset) + 1px);
  font-size: 1.0625rem;
  font-weight: 500;
}

.hero2__intro {
  margin: var(--space-3) 0 0 calc(var(--header-inset) + 1px);
  color: var(--kg-soft-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 46ch;
}

/* Das Suchformular heisst .search, nicht .search-form – der Baustein
   bringt seine eigene Benennung mit.

   auto statt eines festen Werts: Es schiebt sich ans untere Ende der Spalte
   und trifft damit die Unterkante der Karte gegenüber. Der Mindestabstand
   nach oben bleibt erhalten, damit es bei kurzer Karte nicht am Text klebt. */
.hero2__text .search {
  margin-top: auto;
  padding-top: var(--space-5);
}

/* Die grosse Karte

   Bewusst KEIN aspect-ratio, obwohl es naheliegt und im Entwurf so aussieht.

   Mit fester 16:10-Höhe entschied das Bild über die Höhe und der Text musste
   hineinpassen – tat er aber nicht: gemessen 416 Pixel Inhalt in einer 344
   Pixel hohen Karte. Der Überstand lief nach oben aus dem Kasten, und weil
   overflow auf hidden steht, verschwand als Erstes das "Jetzt kostenlos"
   ganz oben. Ausgerechnet die Zusage, um die es geht.

   Jetzt bestimmt der Inhalt die Höhe, das Bild füllt sie. min-height hält die
   Karte gross, wenn wenig Text da ist; mehr Text lässt sie wachsen, statt ihn
   abzuschneiden. Eine Karte, die zwanzig Pixel höher ist als geplant, fällt
   niemandem auf – eine fehlende Zeile schon. */
.hero2__stage { display: flex; flex-direction: column; min-width: 0; }

.hero-card {
  position: relative;
  display: flex;
  /* Oben verankert, nicht unten.

     Vorher hing der Inhalt an der Unterkante und wanderte damit mit seiner
     eigenen Länge: Ein Filmtitel über zwei Zeilen schob alles nach oben, ein
     kurzer nach unten. Seit die Karte bei jedem Aufruf einen anderen Film
     zeigt, stand nie zweimal dasselbe an derselben Stelle. Von oben her
     gerechnet liegt jede Zeile fest – erst dadurch lässt sich der Inhalt
     überhaupt auf die Zeilen der linken Spalte legen. */
  align-items: flex-start;
  /* Füllt die Spalte: Damit endet die Karte auf derselben Linie wie das
     Suchfeld gegenüber. min-height bleibt als Untergrenze, falls links
     einmal weniger Text steht als hier Bild. */
  flex: 1;
  min-height: clamp(300px, 24vw, 400px);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--kg-black);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-panel);
}

.hero-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Verlauf läuft von links, nicht von unten: Der Text steht links, und
   ein Verlauf von unten verdeckte die Bildmitte, ohne dem Text zu helfen. */
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(9, 11, 15, 0.94) 0%,
    rgba(9, 11, 15, 0.80) 46%,
    rgba(9, 11, 15, 0.12) 100%);
}

/* Im Fluss, nicht absolut gesetzt: Nur so kann die Karte auf den Inhalt
   reagieren, statt ihn abzuschneiden.

   74 statt 66 Prozent – bei 66 brach die Logoreihe auf zwei Zeilen um
   (gemessen 299 Pixel Reihe in 363 Pixel Spalte). Acht Prozentpunkte mehr
   halten die vier Wortmarken und den Zähler auf einer Linie. */
/* Die Innenabstände sind hier keine Gestaltung, sondern Massarbeit.

   Sie setzen die vier Zeilen der Karte auf dieselbe Höhe wie ihre
   Gegenstücke links: Zeichen zur H1-Oberkante, Kartentitel zur H1, Meta zum
   Kicker, Inhaltstext zum Intro. Die Werte sind aus den gemessenen Abständen
   der linken Spalte abgeleitet – ändert sich dort die Überschrift auf drei
   Zeilen, müssen sie nachgeführt werden. */
.hero-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* 72 Pixel oben: Der Titel steht damit mittig im Band der H1 gegenüber –
     die H1 reicht von 194 bis 309, der zweizeilige Titel ist 70 Pixel hoch
     und sitzt folglich von 216 bis 286. Nicht oben bündig, sondern zentriert:
     So wirkt er als eigener Block statt als angehängte Zeile. */
  padding: 72px var(--space-6) var(--space-6);
  max-width: 74%;
}

/* Eckfahne, bündig in der oberen linken Ecke.

   Sie sitzt absolut und liegt damit ausserhalb des Textflusses – das ist der
   eigentliche Zweck: Solange sie im Fluss stand, schob sie alles darunter um
   ihre eigene Höhe nach unten und war der Grund, warum der Text nicht auf die
   Zeilen der linken Spalte zu legen war.

   Auf dieser Höhe trifft sie zugleich die Vertrauenszeile gegenüber, weil
   Karte und Textspalte oben auf derselben Kante beginnen.

   Die Rundungen folgen der Karte: oben links deren voller Radius, damit die
   Fahne nicht über die Ecke hinausragt; unten rechts eine kleinere Rundung,
   damit sie nicht wie ein abgeschnittenes Rechteck wirkt. Die beiden anderen
   Ecken bleiben scharf – sie liegen an der Kartenkante. */
.hero-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--kg-purple);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Die Fahne ist genau so hoch wie die Vertrauenszeile gegenüber – 26
     Pixel, also 6 + 14 Zeilenhöhe + 6. Damit endet sie auf derselben Linie
     wie "100 % legal · Geprüfte Quellen · Kostenlos". */
  line-height: 14px;
  padding: 6px 18px;
  border-radius: var(--radius-panel) 0 var(--radius-card) 0;
}

/* Genau zwei Zeilen, komme was wolle.

   Ohne diese Klammer bestimmte die Länge des Filmtitels, wo alles darunter
   steht – bei "JCVD" eine Zeile, bei "The 12th Man - Kampf ums Überleben"
   zwei. Das Raster hielte dann bei jedem zweiten Film nicht. */
.hero-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
  /* Kein Abstand darüber: Seit die Eckfahne aus dem Fluss ist, ist der Titel
     das erste Element im Block und sitzt direkt auf dem Innenabstand. */
  margin-top: 0;
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.hero-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* 40 Pixel: Die Meta-Zeile sitzt mittig im Band zwischen H1-Unterkante
     (309) und Intro-Oberkante (365) – dort, wo links der Kicker steht. */
  margin-top: 40px;
  font-size: 0.8125rem;
  opacity: 0.86;
}

.hero-card__fsk {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.72rem;
}

.hero-card__dot { opacity: 0.5; }

/* Drei Zeilen, aus demselben Grund wie beim Titel. Der Anriss wird im
   PHP zusätzlich auf 128 Zeichen gekürzt – die Klammer hier fängt ab, was
   trotzdem umbricht. */
.hero-card__text {
  /* 18 Pixel: setzt die OBERkante des Anrisses auf die Oberkante des Intros
     gegenüber (365). Vorher war es die Unterkante – bei drei Zeilen, die
     enger gesetzt sind als links, ist das nicht dasselbe. */
  margin-top: 19px;
  font-size: 0.85rem;
  line-height: 1.55;
  opacity: 0.88;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.65em;
}

.hero-card__at {
  margin-top: var(--space-5);
  font-size: 0.78rem;
  font-weight: 500;
}

.hero-card__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Luft zwischen den Schriftzügen: Ohne Plättchen fliessen sie sonst
     ineinander und lesen sich als ein einziges Wort.

     14 statt 16 Pixel, zusammen mit der Breitengrenze von 76: Nachgerechnet
     mit den vier breitesten Wortmarken im Bestand – Netzkino, Rakuten, ARTE
     und Pluto nebeneinander – braucht die Reihe damit 337 von 343 Pixeln.
     Mit den vorherigen Werten wären es 353 gewesen, und sie wäre umgebrochen. */
  gap: 14px;
  margin-top: var(--space-3);
}

/* Wortmarken frei auf dem Bild, ohne Plättchen und in Markenfarbe.

   Hier steht bewusst kein Filter mehr. Eine Umfärbung über alles wäre
   einfacher gewesen, hätte aber jede Marke ihre Farbe gekostet – YouTube
   ohne Rot, Rakuten ohne Rot, ARTE ohne Orange.

   Stattdessen tragen die Dateien selbst die Fassung für dunklen Grund: Was
   im Original unbunt und dunkel war – Schwarz, Anthrazit, dunkles Grau –
   ist zu Weiss aufgehellt, jede gesättigte Farbe blieb unangetastet. Der
   Unterschied liegt in der Buntheit, nicht in der Helligkeit: Rakutens
   #bf0000 ist dunkler als manches Grau und muss trotzdem bleiben.

   Bei YouTube liegt sogar die offizielle helle Fassung vor, die die Marke
   für dunkle Hintergründe selbst veröffentlicht. */
.hero-card__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-card__logo img {
  display: block;
  /* 20 statt 17 Pixel. Weiter hinauf geht nicht bedenkenlos: Die Reihe hat
     bei der aktuellen Auswahl 85 Pixel Luft, aber die breitesten Wortmarken
     im Bestand – Netzkino und wedotv – brauchen bei gleicher Höhe fast das
     Doppelte eines Joyn. Träfen vier davon zusammen, bräche die Reihe um.
     Die Obergrenze der Breite fängt genau das ab. */
  height: 20px;
  width: auto;
  max-width: 76px;
  object-fit: contain;
  /* Keine Umfärbung mehr: Die Dateien tragen jetzt selbst die
     Dunkelgrund-Fassung – Markenfarbe, wo es eine gibt, Weiss dort, wo das
     Original schwarz war. Ein Filter über alles hätte YouTube sein Rot und
     Rakuten sein Rot genommen. */
}

/* Exakt so hoch wie ein Logo-Plättchen.

   Der Innenabstand ist um einen Pixel kleiner als dort – 4 statt 5 –, weil
   dieser Kasten zusätzlich einen Rahmen trägt und die Logo-Plättchen keinen.
   Ohne diesen Ausgleich stünde der Zähler zwei Pixel höher als die
   Wortmarken daneben.

   Rechnung: 4 + 15 (Zeilenhöhe) + 4 + 2 (Rahmen) = 25, genau die Höhe eines
   Plättchens aus 5 + 15 + 5. */
.hero-card__more {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  line-height: 20px;
  padding: 0 9px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 0.92;
}

@media (max-width: 1000px) {
  .hero2 {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Oben mehr Platz, weil die Eckfahne dort liegt.

     Auf breiten Schirmen sorgt der Einzug von 50 Pixeln ohnehin dafür, dass
     der Titel unter der Fahne beginnt. Hier fiel der Innenabstand auf 24 –
     und die 40 Pixel hohe Fahne legte sich über die erste Titelzeile.
     Nachgemessen waren es 16 Pixel Überdeckung. */
  .hero-card__body {
    max-width: 100%;
    padding: 56px var(--space-5) var(--space-5);
  }
}

@media (max-width: 640px) {
  /* Auf dem Handy passen die drei Zusagen nicht in eine Zeile.

     Statt sie zu quetschen, brechen sie um – und die Trennstriche entfallen
     dabei, weil ein senkrechter Strich am Zeilenanfang nichts trennt,
     sondern nur wie ein Fehler aussieht. Das eigene Zeichen je Zusage
     übernimmt die Trennung. */
  .hero-trust {
    gap: var(--space-2) var(--space-4);
    font-size: 0.8125rem;
  }

  .hero-trust li + li::before { display: none; }

  .hero-trust__icon { width: 23px; height: 23px; border-radius: 8px; }
}


/* ---------------------------------------------------------------------------
   Leere Suche: der Trichter
   ---------------------------------------------------------------------------

   Zwei Spalten, aber ausdrücklich nicht im Gleichgewicht.

   Die erste Fassung stellte drei gleich grosse Kästen untereinander – Absage,
   Kanal, Weitersuche – und hatte damit einen handfesten Fehler: Der Knopf
   "Kostenlose Filme" im Nebenkasten war schwarz auf weiss und damit das
   kontraststärkste Element der ganzen Seite. Der Ausweg schlug das Ziel.

   Jetzt trägt die Fläche die Rangfolge statt der Knopffarbe: dunkel gegen
   hell, 1,7 gegen 1. Das hält auch dann, wenn später jemand an den Knöpfen
   dreht – eine dunkle Karte bleibt gegenüber einer hellen vorn.
   --------------------------------------------------------------------------- */
.suche-leer {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

/* Ohne hinterlegten Kanal stehen zwei gleichwertige Kästen nebeneinander –
   dann gibt es kein Ziel, dem der Ausweg den Rang ablaufen könnte. */
.suche-leer--ohne-kanal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.suche-leer__kanal {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  padding: var(--space-7) var(--space-7) var(--space-6);
  color: #fff;
  background: linear-gradient(158deg, #12351f 0%, #0d2a18 58%, #0a2114 100%);
  box-shadow: var(--shadow-panel);
}

/* Ein Schimmer in der Ecke, der zum Knopf hin ausläuft. Kein Zierrat: Er
   nimmt der dunklen Fläche die Schwere, die sie sonst neben den hellen
   Panels der Seite hätte. */
.suche-leer__kanal::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 168, 85, 0.45), rgba(31, 168, 85, 0) 68%);
  pointer-events: none;
}

.suche-leer__lage {
  display: inline-block;
  margin: 0 0 var(--space-5);
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.66);
}

.suche-leer__titel {
  margin: 0 0 var(--space-3);
  max-width: 17ch;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: #fff;
}

.suche-leer__text {
  margin: 0 0 var(--space-6);
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.76);
}

.suche-leer__fuss {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.suche-leer__wer {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Die helle Spalte: der Ausweg.

   Kein Knopf darin, und das ist die ganze Idee. Jeder Knopf hier stritte mit
   dem grünen um die Aufmerksamkeit; vier ruhige Zeilen führen weiter, ohne zu
   rufen. */
.suche-leer__stoebern {
  display: flex;
  flex-direction: column;
}

.suche-leer__wege {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.suche-leer__wege a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--kg-ink);
  text-decoration: none;
  transition: background 0.15s ease;
}

.suche-leer__wege a:hover,
.suche-leer__wege a:focus-visible { background: rgba(24, 28, 36, 0.05); }

.suche-leer__wege svg {
  flex: none;
  color: var(--kg-faint-ink);
}

.suche-leer__wege a:hover svg { color: var(--kg-purple-ink); }

@media (prefers-reduced-motion: reduce) {
  .suche-leer__wege a { transition: none; }
}

@media (max-width: 860px) {
  .suche-leer,
  .suche-leer--ohne-kanal { grid-template-columns: minmax(0, 1fr); }

  .suche-leer__kanal { padding: var(--space-6) var(--space-5) var(--space-5); }
  .suche-leer__titel { max-width: none; }
}

/* ===================================================================
   Zwei Reihen von der Startseite: Top 10 und "Läuft bald ab"
   ===================================================================

   Beide sind waagerechte Bahnen statt Raster. Der Grund ist derselbe wie
   in der App: Eine Rangliste ist eine Reihenfolge, kein Feld – und ein
   Querformat-Bild zwischen zwei Posterrastern gibt dem Auge eine Pause.

   Gescrollt wird mit Fingerwisch, Mausrad oder Tabulator; einrastende
   Positionen (scroll-snap) sorgen dafür, dass keine halbe Karte am Rand
   stehen bleibt. Die Bahn reicht bis zum Bildschirmrand, damit sichtbar
   ist, dass rechts noch etwas kommt – der Innenabstand des Containers
   wird dafür kurz aufgehoben.
   ------------------------------------------------------------------- */

.rank-rail,
.still-rail {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  /*
   * Die Bahn bleibt im Container: Sie beginnt unter der Überschrift und
   * endet unter "Alle ansehen". Sie lief zuerst über beide Seitenränder
   * hinaus – auf dem Handy sah das nach App aus, am Rechner ragten die
   * Karten sichtbar aus der Seite heraus (Pascal, 29.09.2026). Der
   * senkrechte Innenabstand bleibt: Er ist der Platz für den Schatten der
   * Karten, den die Bahn sonst abschneidet.
   */
  padding-block: var(--space-2) var(--space-4);
  list-style: none;
  overflow-x: auto;
  /*
   * "proximity" statt "mandatory": Ein kurzer Wisch springt nicht gleich
   * eine ganze Karte weiter, ein längerer rastet sauber ein.
   */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /*
   * Ohne Bildlaufleiste. Gewischt, gescrollt und mit dem Tabulator
   * angesteuert wird trotzdem – und die angeschnittene Karte am rechten
   * Rand sagt deutlicher, dass dort noch etwas kommt, als ein grauer
   * Balken darunter.
   */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rank-rail::-webkit-scrollbar,
.still-rail::-webkit-scrollbar { display: none; }

.rank-rail__item,
.still-rail__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* --- Top 10 ------------------------------------------------------- */

.rank-card {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 2px;
  text-decoration: none;
  color: inherit;
}

/*
 * Die Ziffer sitzt auf der Grundlinie des Posters und darf unten leicht
 * überstehen – so wirkt sie wie gesetzt und nicht wie eingepasst. Der
 * negative Buchstabenabstand hält die zweistellige Zehn zusammen.
 */
.rank-card__number {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: clamp(4.5rem, 13.5vw, 6.5rem);
  line-height: 0.78;
  font-weight: 800;
  letter-spacing: -0.07em;
  color: var(--kg-purple);
  margin-bottom: -0.06em;
}

.rank-card__poster {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: block;
  width: clamp(7rem, 30vw, 9.5rem);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--kg-line);
}

.rank-card__poster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/*
 * Kein Farbwechsel beim Überfahren: In diesen beiden Reihen ist das Bild
 * der Knopf, nicht die Zeile darunter. Pascal, 29.09.2026.
 */
.rank-card__title {
  grid-column: 2;
  grid-row: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--space-2);
  max-width: clamp(7rem, 30vw, 9.5rem);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.rank-card__score,
.still-card__score {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(18, 19, 24, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.rank-card__score svg,
.still-card__score svg { color: var(--kg-yellow); }

/* --- Läuft bald ab ------------------------------------------------ */

.still-card {
  display: block;
  width: clamp(15rem, 72vw, 19rem);
  text-decoration: none;
  color: inherit;
}

.still-card__frame {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--kg-line);
}

/*
 * Fester 16:9-Rahmen. Fehlt das Querformat-Bild, füllt das Poster ihn
 * beschnitten – deshalb object-fit und nicht "auto".
 */
.still-card__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.still-card__expiry {
  position: absolute;
  left: 8px;
  top: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(18, 19, 24, 0.82);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Heute oder morgen vorbei: Das ist keine Angabe mehr, das ist eine Frist. */
.still-card__expiry--knapp { background: var(--kg-red); }

.still-card__title {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.still-card__meta {
  display: block;
  margin-top: 1px;
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
}

@media (min-width: 48rem) {
  .rank-rail,
  .still-rail { gap: var(--space-5); }
}

/* -------------------------------------------------------------------------
   Specials – saisonale Sammlungen (Halloween, Weihnachten …)

   Karte auf der Startseite direkt nach dem Hero und eigene Seite unter
   /special/…/. Die Farbe kommt je Special als --special-farbe aus dem Admin.
   ------------------------------------------------------------------------- */
/* Der Hero bringt unten schon reichlich Luft mit – mit dem vollen
   Abschnittsabstand obendrauf hinge die Reihe verloren im Leeren. */
.special-section { margin-block: 0 var(--space-7); }

.special-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-5);
}

/* Auf dem Handy: mehrere Specials seitwärts wischen statt untereinander. */
@media (max-width: 47.99rem) {
  .special-row:not(.special-row--single) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
  }
  .special-row:not(.special-row--single) > .special-card { scroll-snap-align: start; }
}

/* Grundform (Handy und mehrere Specials nebeneinander): hochkant,
   Text oben, Fächer in der Mitte, Knopf unten über die ganze Breite. */
.special-card {
  --pw: 84px;                       /* Posterbreite im Fächer */
  --spread: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-panel);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #1b1e26 0%, #101218 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.special-card:focus-visible { outline: 3px solid var(--special-farbe); outline-offset: 3px; }

.special-card__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.special-card__fade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(10, 13, 17, 0.72) 0%,
    rgba(10, 13, 17, 0.45) 45%,
    rgba(10, 13, 17, 0.85) 100%);
}

.special-card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.special-etikett {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--special-farbe, var(--kg-purple));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}

.special-card__titel {
  margin-top: 2px;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.special-card__untertitel {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.86);
}

.special-card__cta {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-2);
  padding: 11px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--kg-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: gap 0.2s ease;
}

/* Fächer: die Poster stehen in der Mitte und werden über --x/--r/--y
   (aus der Vorlage) gedreht und versetzt. */
.special-card__faecher {
  position: relative;
  display: block;
  height: calc(var(--pw) * 1.5 + 26px);
}

.special-card__poster {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--pw);
  height: calc(var(--pw) * 1.5);
  margin-left: calc(var(--pw) / -2);
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transform: translateX(calc(var(--x) * var(--pw) * var(--spread))) translateY(var(--y)) rotate(calc(var(--r) * var(--spread)));
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
}

/* Handy: Knopf ans Ende und über die ganze Breite. */
@media (max-width: 47.99rem) {
  .special-card { padding-bottom: calc(var(--space-5) + 54px); }
  .special-card__cta {
    position: absolute;
    left: var(--space-5);
    right: var(--space-5);
    bottom: var(--space-5);
    margin: 0;
  }
}

/* Ab Tablet, ein einzelnes Special: breit, Text links, Fächer rechts. */
@media (min-width: 48rem) {
  .special-row--single .special-card {
    --pw: 118px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 320px;
    padding: var(--space-6) var(--space-7);
  }
  .special-row--single .special-card__fade {
    background: linear-gradient(to right,
      rgba(10, 13, 17, 0.85) 0%,
      rgba(10, 13, 17, 0.55) 55%,
      rgba(10, 13, 17, 0.35) 100%);
  }
  .special-row--single .special-card__faecher { height: calc(var(--pw) * 1.5 + 30px); }
}

/* Nur mit Maus: beim Darüberfahren fächern die Poster weiter auf. */
@media (hover: hover) {
  .special-card:hover { transform: translateY(-2px); }
  .special-card:hover .special-card__image { transform: scale(1.04); }
  .special-card:hover { --spread: 1.28; }
  .special-card:hover .special-card__cta { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .special-card__poster, .special-card__image { transition: none; }
}

/* Seite */
.special-page .special-etikett { margin-bottom: var(--space-3); }

.special-ansicht__zahl {
  margin: 0 0 var(--space-4);
  font-weight: 600;
}

.special-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.special-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-card);
  color: var(--kg-ink);
  text-decoration: none;
  transition: transform 0.18s ease;
}

.special-list__link:hover { transform: translateY(-1px); }

.special-list__nr {
  flex: none;
  width: 2.2ch;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--special-farbe, var(--kg-purple));
  font-variant-numeric: tabular-nums;
}

.special-list__poster {
  flex: none;
  width: 62px;
  height: 93px;
  border-radius: 8px;
  object-fit: cover;
}

.special-list__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.special-list__titel {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}

.special-list__meta {
  font-size: 0.8125rem;
  color: var(--kg-soft-ink);
}

.special-list__note {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--kg-ink);
}

.special-list__cta {
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--kg-black, #121318);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

@media (max-width: 40rem) {
  .special-list__cta { display: none; }
  .special-list__nr { font-size: 1.4rem; }
}

/*
 * "Derzeit nicht abrufbar" – der Vermerk auf einer Karte in kuratierten
 * Listen. Gedeckt statt schwarz und ohne Signalfarbe: Das ist keine Frist,
 * die abläuft, sondern eine Lücke, die sich auch wieder schliessen kann.
 */
.movie-card__expiry--ruht {
  background: rgba(60, 64, 74, 0.72);
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Suche: Kostenlos-Alarm für Titel, die gerade nicht gratis laufen
   ------------------------------------------------------------------------- */
.alarm-vorschlaege__liste {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
}

.alarm-vorschlag {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--kg-surface);
  border: 1px solid var(--kg-line);
  scroll-margin-top: 90px;
}

.alarm-vorschlag__poster {
  flex: none;
  width: 72px;
  height: 108px;
  object-fit: cover;
  border-radius: 8px;
}

.alarm-vorschlag__text { min-width: 0; flex: 1; }
.alarm-vorschlag__titel { margin: 0; font-weight: 600; line-height: 1.25; }
.alarm-vorschlag__meta { margin: 2px 0 var(--space-3); font-size: 0.875rem; color: var(--kg-soft-ink); }
.alarm-vorschlag__details summary { list-style: none; cursor: pointer; display: inline-flex; }
.alarm-vorschlag__details summary::-webkit-details-marker { display: none; }
.alarm-vorschlag__details[open] summary { display: none; }
.alarm-vorschlag__form { gap: var(--space-2); }
.alarm-vorschlag__form .checkbox span { font-size: 0.8125rem; }


/* ---------------------------------------------------------------------------
   Folgen (Personen, Genres) und Such-Pillen
   --------------------------------------------------------------------------- */
.folgen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }
.folgen-knopf { gap: var(--space-2); }
.folgen-knopf__hinweis { margin: 0; }
.folgen-panel { max-width: 620px; margin-inline: auto; }
.folgen-panel__art { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kg-purple); }
.folgen-panel__titel { margin: var(--space-1) 0 var(--space-3); }
.such-pillen { display: grid; gap: var(--space-4); margin: 0 0 var(--space-6); }
.such-pillen__titel { margin: 0 0 var(--space-2); font-size: .8125rem; color: var(--kg-soft-ink); }
.such-pillen__liste { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.such-pille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--kg-solid); border: 1px solid var(--kg-line);
  color: var(--kg-ink); font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.such-pille:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(24, 28, 36, .08); }
.such-pille .muted { font-weight: 400; }
.such-pille--genre { background: var(--kg-purple); border-color: var(--kg-purple); color: #fff; }
@media (prefers-reduced-motion: reduce) { .such-pille { transition: none; } .such-pille:hover { transform: none; } }

/* ---------------------------------------------------------------------------
   Folgen-Glocke, Popup, Alarme in der Merkliste
   --------------------------------------------------------------------------- */
.kopf-mit-glocke { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.kopf-mit-glocke > h1 { margin-bottom: 0; min-width: 0; }
/* Mit Glocke reicht der Kopf bis an den rechten Rand, damit sie dort sitzt;
   der Vorspann bleibt bei seiner Lesebreite. */
.page-head:has(> .kopf-mit-glocke) { max-width: none; margin-inline-end: calc(var(--header-inset) + 1px); }
.page-head:has(> .kopf-mit-glocke) > .lead { max-width: 62ch; }
.folgen-glocke {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-top: .2em; border-radius: 999px;
  background: var(--kg-solid); border: 1px solid var(--kg-line); color: var(--kg-ink);
  box-shadow: var(--shadow-glass); text-decoration: none;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.folgen-glocke:hover { transform: translateY(-1px) scale(1.04); color: var(--kg-purple); }
.folgen-glocke.ist-aktiv { background: var(--kg-purple); border-color: var(--kg-purple); color: #fff; }
.folgen-glocke--klein { width: 28px; height: 28px; margin: -4px -8px -4px 2px; box-shadow: none; background: var(--kg-purple-soft); border-color: transparent; color: var(--kg-purple); }
.folgen-glocke--klein:hover { transform: scale(1.08); }
.such-pille--genre .folgen-glocke--klein { background: rgba(255, 255, 255, .22); color: #fff; }
.such-pille .folgen-glocke--klein.ist-aktiv { background: var(--kg-ink); color: #fff; }
.such-pille__link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
@media (max-width: 47.99rem) { .folgen-glocke { width: 44px; height: 44px; } }

.folgen-dialog {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0;
  border-radius: var(--radius-panel); background: var(--kg-solid); color: var(--kg-ink);
  box-shadow: 0 30px 80px rgba(18, 19, 24, .28);
}
.folgen-dialog::backdrop { background: rgba(18, 19, 24, .45); backdrop-filter: blur(4px); }
.folgen-dialog[open] { animation: folgen-auf .22s ease-out; }
@keyframes folgen-auf { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.folgen-dialog__form { position: relative; display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-5); }
.folgen-dialog__zu { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(24, 28, 36, .06); color: var(--kg-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.folgen-dialog__kopf { display: flex; align-items: center; gap: var(--space-3); padding-right: 40px; }
.folgen-dialog__icon { flex: none; width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--kg-purple-soft); color: var(--kg-purple); }
.folgen-dialog__art { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--kg-purple); }
.folgen-dialog__titel { margin: 2px 0 0; font-size: 1.375rem; line-height: 1.2; }
.folgen-dialog__text { margin: 0; color: var(--kg-soft-ink); }
.folgen-dialog [data-folgen-felder] { display: grid; gap: var(--space-2); }
.folgen-dialog [data-folgen-felder][hidden], .folgen-dialog__fertig[hidden] { display: none; }
.folgen-dialog__einwilligung { margin-top: var(--space-1); }
.folgen-dialog__fehler { margin: 0; color: var(--kg-red-ink); font-size: .875rem; }
.folgen-dialog__senden { width: 100%; justify-content: center; margin-top: var(--space-2); }
.folgen-dialog__fertig { display: grid; gap: var(--space-3); }
.folgen-dialog__fuss { margin: var(--space-1) 0 0; }
@media (prefers-reduced-motion: reduce) { .folgen-dialog[open] { animation: none; } .folgen-glocke { transition: none; } }

/* Hinweis "nur in der App": ein Blatt von unten, kein Fenster in der Mitte.
   Es erscheint nur auf Handy und Tablet (kinogrid.js entscheidet das), denn
   am Rechner spielt der Anbieter im Browser. */
.app-blatt {
  width: min(460px, 100vw); max-width: 100vw; max-height: calc(100dvh - 24px);
  margin: auto auto 0; padding: 0; border: 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: var(--kg-solid); color: var(--kg-ink);
  box-shadow: 0 -20px 60px rgba(18, 19, 24, .26);
}
.app-blatt::backdrop { background: rgba(18, 19, 24, .45); backdrop-filter: blur(4px); }
.app-blatt[open] { animation: app-blatt-auf .24s ease-out; }
@keyframes app-blatt-auf { from { transform: translateY(100%); } to { transform: none; } }
.app-blatt__inhalt {
  position: relative; display: grid; gap: var(--space-3);
  padding: var(--space-4) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
}
.app-blatt__griff { width: 38px; height: 4px; border-radius: 999px; background: var(--kg-line-strong); margin: 0 auto; }
.app-blatt__zu {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 0;
  border-radius: 999px; background: rgba(24, 28, 36, .06); color: var(--kg-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.app-blatt__anbieter { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding-right: 44px; color: var(--kg-soft-ink); font-size: .875rem; }
.app-blatt__logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; background: var(--kg-paper); }
.app-blatt__logo[hidden] { display: none; }
.app-blatt__titel { margin: 0; font-size: 1.125rem; line-height: 1.25; }
.app-blatt__text { margin: 0; color: var(--kg-soft-ink); font-size: .9375rem; }
.app-blatt__holen, .app-blatt__weiter { width: 100%; justify-content: center; }
.app-blatt__store { margin: calc(var(--space-3) * -1 + 2px) 0 0; text-align: center; color: var(--kg-faint-ink); font-size: .75rem; }
.app-blatt__schon { margin: var(--space-2) 0 calc(var(--space-3) * -1 + 2px); text-align: center; color: var(--kg-faint-ink); font-size: .75rem; }
.app-blatt__merken { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--kg-faint-ink); font-size: .75rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .app-blatt[open] { animation: none; } }

.merk-reiter { display: flex; gap: 4px; padding: 4px; max-width: 420px; margin: 0 0 var(--space-6); border-radius: 16px; background: rgba(24, 28, 36, .06); }
.merk-reiter__knopf { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--kg-soft-ink); font: inherit; font-weight: 500; cursor: pointer; }
.merk-reiter__knopf.ist-aktiv { background: var(--kg-solid); color: var(--kg-ink); box-shadow: var(--shadow-glass); }
.merk-reiter__zahl { color: var(--kg-purple); font-size: .8125rem; }
.alarme-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.alarme-gruppe { margin: var(--space-5) 0 var(--space-2); font-size: .8125rem; color: var(--kg-soft-ink); }
.alarme-liste { display: grid; gap: var(--space-2); max-width: 760px; }
.alarm-zeile { display: flex; align-items: center; gap: var(--space-3); padding: 12px; border-radius: var(--radius-card); background: var(--kg-surface); border: 1px solid var(--kg-line); }
.alarm-zeile__poster { flex: none; width: 48px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; background: #e3e8ef; }
.alarm-zeile__rund { flex: none; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--kg-purple-soft); color: var(--kg-purple); }
.alarm-zeile__rund--genre { background: var(--kg-purple); color: #fff; }
.alarm-zeile__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.alarm-zeile__text a { color: var(--kg-ink); font-weight: 500; text-decoration: none; }
.alarm-zeile__text a:hover { text-decoration: underline; }
.alarm-zeile__offen { color: var(--kg-yellow-ink); }
.alarm-zeile__weg { flex: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--kg-faint-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.alarm-zeile__weg:hover { background: var(--kg-red-soft); color: var(--kg-red-ink); }
.alarme-zugang { max-width: 640px; }
.alarme-zugang__titel { margin-top: 0; }
.alarme-zugang__form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.alarme-zugang__form .input { flex: 1 1 240px; }
[data-alarme-link-meldung][hidden], [data-alarme-anmelden][hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Glocke überall gleich: Titel, Suche, Header-Benachrichtigungen
   --------------------------------------------------------------------------- */
.glocke-zeile { display: inline-flex; align-items: center; gap: var(--space-3); }
.glocke-zeile__text { display: grid; gap: 2px; }
.glocke-zeile__text strong { font-weight: 600; }
.glocke-zeile .folgen-glocke { margin-top: 0; }
.glocke-titel { margin-top: var(--space-5); }
.alarm-vorschlag { align-items: center; }
.alarm-vorschlag__meta { margin-bottom: 0; }
.alarm-vorschlag .folgen-glocke { width: 46px; height: 46px; margin-top: 0; }
.alarm-zeile__rund--alarm { background: var(--kg-purple); color: #fff; }

.kopf-glocke { position: relative; }
.kopf-glocke[hidden] { display: none; }
.kopf-glocke__knopf { position: relative; }
.kopf-glocke__zahl {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--kg-red); color: #fff; border: 2px solid var(--kg-solid);
  font-size: 11px; font-weight: 600; line-height: 14px; text-align: center;
}
.kopf-glocke__zahl[hidden] { display: none; }
.kopf-glocke__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 340px;
  padding: var(--space-3); border-radius: var(--radius-card); background: var(--kg-solid);
  border: 1px solid var(--kg-line); box-shadow: var(--shadow-panel);
}
.kopf-glocke__panel[hidden] { display: none; }
.kopf-glocke__titel { margin: 0 var(--space-2) var(--space-2); font-weight: 600; }
.kopf-glocke__meldungen { display: grid; gap: 4px; max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; }
.kopf-glocke__zeile { position: relative; display: flex; align-items: center; border-radius: 12px; }
.kopf-glocke__zeile--gelesen { background: #f1f1f4; }
.kopf-glocke__zeile--gelesen .kopf-glocke__ikon { background: #e4e4ea; color: var(--kg-soft-ink); }
.kopf-glocke__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); padding-right: 0; color: var(--kg-ink); text-decoration: none; border-radius: 12px; }
a.kopf-glocke__link:hover strong { text-decoration: underline; }
.kopf-glocke__weg { flex: none; width: 32px; height: 32px; margin-right: 4px; border: 0; border-radius: 999px; background: transparent; color: var(--kg-faint-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kopf-glocke__weg svg { width: 16px; height: 16px; }
.kopf-glocke__weg:hover { background: rgba(0, 0, 0, .06); color: var(--kg-ink); }
.kopf-glocke__ikon { flex: none; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--kg-purple-soft); color: var(--kg-purple); }
.kopf-glocke__text { display: grid; gap: 1px; min-width: 0; font-size: .875rem; }
.kopf-glocke__text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-glocke__text span { color: var(--kg-soft-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-glocke__leer { margin: 0 var(--space-2) var(--space-2); font-size: .875rem; color: var(--kg-soft-ink); }
.kopf-glocke__alle { display: block; margin-top: var(--space-2); padding: var(--space-2); border-top: 1px solid var(--kg-line); text-align: center; font-size: .875rem; font-weight: 500; color: var(--kg-purple-ink); text-decoration: none; }
/* Glocke wie in der App (05.10.2026) */
.kopf-glocke__panel { padding: var(--space-4); border-radius: 22px; }
.kopf-glocke__griff { display: none; }
.kopf-glocke__titel { display: none; }
.kopf-glocke__schleier { display: none; }
.gl-titel { margin: 0 0 var(--space-3); font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; color: var(--kg-ink); }
.gl-vorteile { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 10px; }
.gl-vorteil { display: flex; align-items: center; gap: var(--space-3); font-size: .875rem; font-weight: 500; color: var(--kg-ink); }
.gl-vorteil__ikon { flex: none; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--kg-purple-soft); color: var(--kg-purple); }
.gl-vorteil__ikon--mint { background: var(--kg-mint-soft, #e3f6ee); color: var(--kg-mint-ink, #0f7a55); }
.gl-form { gap: 0; }
.kopf-glocke__panel .konto-form.gl-form { padding: 0; }
.gl-pille { display: flex; align-items: center; height: 50px; padding: 0 5px 0 18px; border-radius: 999px; background: #fff; border: 1px solid #e6e4ee; }
.gl-pille:focus-within { border-color: var(--kg-purple); box-shadow: 0 0 0 3px var(--kg-purple-soft); }
.gl-pille input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--kg-ink); }
.gl-pille__code { letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.gl-pille__los { flex: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: #121318; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gl-pille__los:disabled { opacity: .7; }
.gl-hinweis { margin: 6px 0 0 4px; font-size: .75rem; color: var(--kg-soft-ink); }
.gl-form .konto-form__fehler { margin: 6px 0 0 4px; }
.gl-form .konto-form__links { margin: 8px 0 0 4px; }
.gl-verwalten { display: flex; align-items: center; justify-content: center; gap: 4px; height: 46px; margin-top: var(--space-4); border-radius: 999px; background: #f3f2f7; color: var(--kg-ink); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.gl-verwalten:hover { background: #ebe9f2; }
.gl-wer { margin: var(--space-2) 0 0; text-align: center; font-size: .75rem; color: var(--kg-faint-ink); }
.gl-abschnitt { margin: var(--space-2) 0 2px; font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--kg-faint-ink); }
.gl-poster { flex: none; width: 40px; height: 60px; border-radius: 8px; object-fit: cover; background: #e3e8ef; }
.gl-poster--ikon { display: inline-flex; align-items: center; justify-content: center; background: var(--kg-purple-soft); color: var(--kg-purple); }
.kopf-glocke__zeile--gelesen .gl-poster { opacity: .55; }
.kopf-glocke__zeile--gelesen .gl-poster--ikon { background: #e7e6ee; color: var(--kg-soft-ink); opacity: 1; }
.kopf-glocke__zeile--gelesen .kopf-glocke__text strong { color: var(--kg-soft-ink); }
.kopf-glocke__zeile { background: #fff; }
.kopf-glocke__zeile--gelesen { background: #f4f3f8; }
.kopf-glocke__text strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gl-punkt { flex: none; width: 9px; height: 9px; margin-left: auto; border-radius: 999px; background: var(--kg-purple); }
.gl-leer { display: grid; justify-items: center; gap: 4px; padding: var(--space-4) 0 var(--space-2); text-align: center; font-size: .875rem; }
.gl-leer strong { font-weight: 500; color: var(--kg-ink); }
.gl-leer span:last-child { color: var(--kg-soft-ink); }
.gl-leer__ikon { width: 52px; height: 52px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--kg-purple-soft); color: var(--kg-purple); margin-bottom: 4px; }
@media (max-width: 47.99rem) {
  .kopf-glocke__schleier:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(17, 17, 24, .4); animation: gl-ein .2s ease; }
  .kopf-glocke__panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 96; width: auto; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; border: 0; animation: gl-hoch .28s cubic-bezier(.2, .9, .3, 1); }
  .kopf-glocke__griff { display: block; width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: #d9d8e0; }
  .kopf-glocke__meldungen { max-height: none; overflow: visible; }
  html.gl-offen { overflow: hidden; }
}
@keyframes gl-hoch { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gl-ein { from { opacity: 0; } to { opacity: 1; } }
.glocke-zeile { cursor: pointer; }

/* Konto: Anmelden in Glocke, Popup und auf der Seite Benachrichtigungen */
.konto-form { display: grid; gap: var(--space-2); }
.konto-form__zeile { display: flex; gap: var(--space-2); }
.konto-form__zeile .input { flex: 1; min-width: 0; }
.konto-form__text { margin: 0; font-size: .875rem; color: var(--kg-soft-ink); }
.konto-form__fehler { margin: 0; font-size: .8125rem; color: var(--kg-red-ink); }
.konto-form__links { display: flex; gap: var(--space-3); font-size: .8125rem; }
.konto-form__links button { padding: 0; border: 0; background: none; color: var(--kg-purple-ink); font: inherit; cursor: pointer; text-decoration: underline; }
.kopf-glocke__panel .konto-form { padding: 0 var(--space-2) var(--space-2); }
.kopf-glocke__wer { margin: var(--space-2) var(--space-2) 0; font-size: .75rem; color: var(--kg-faint-ink); }
.folgen-dialog__code { display: grid; gap: var(--space-2); }
.folgen-dialog__code[hidden] { display: none; }
.folgen-dialog__hinweis { margin: 0; padding: var(--space-3); border-radius: 12px; background: var(--kg-purple-soft); color: var(--kg-purple-ink); font-size: .875rem; }
.folgen-dialog__codefeld, .konto-form__code { font-size: 1.4rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.konto-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--kg-surface); border: 1px solid var(--kg-line); }
.konto-zeile__aktionen { display: flex; gap: var(--space-2); }
.konto-zeile__aktionen .gefahr { color: var(--kg-red-ink); }
.kg-toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #121318; color: #fff; font-size: .9375rem; box-shadow: 0 18px 50px rgba(18,19,24,.3); }
.konto-loeschen { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--kg-line); max-width: 760px; }
.konto-loeschen__link { padding: 0; border: 0; background: none; color: var(--kg-faint-ink); font: inherit; font-size: .8125rem; text-decoration: underline; cursor: pointer; }
.konto-loeschen__kasten { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-card); background: var(--kg-red-soft); max-width: 520px; }
.konto-loeschen__ja { background: var(--kg-red-ink); border-color: var(--kg-red-ink); color: #fff; }
.merk-sichern { margin-top: var(--space-6); max-width: 640px; }
.merk-sichern[hidden] { display: none; }
.merk-sichern__an { display: flex; align-items: center; gap: var(--space-3); }
.merk-sichern__ikon { flex: none; width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--kg-purple-soft); color: var(--kg-purple); }
.merk-sichern__ikon--an { background: var(--kg-mint-soft); color: var(--kg-mint-ink); }

/* Anbieterknopf „Bei … anzeigen“: nie zwei Zeilen. Die Beschriftung wählt
   Offers::knopfText nach Namenslänge, nowrap sichert den Rest. Das TMDB-Logo
   im Fuss ist absichtlich klein (12 px), es ist Pflichtnennung, kein Schmuck. */
.offer-row__action .btn { white-space: nowrap; }
.footer__tmdb { display: block; height: 12px; width: auto; margin-bottom: 6px; }