/* ===========================================================================
   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;

  /* 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 18px;
  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;
}

/* 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;
}

.search__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 8px 8px 18px;
  border-radius: var(--radius-panel);
  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; }

/* Autocomplete nach Combobox-Muster (Briefing 22) */
.search__results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 45;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: var(--kg-solid);
  border: 1px solid var(--kg-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
  max-height: 60vh;
  overflow-y: auto;
}

.search__results[hidden] { display: none; }

.search__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 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: 36px;
  height: 54px;
  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);
}

/* ---------------------------------------------------------------------------
   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;
  margin: var(--space-6) 0 var(--space-4);
  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);
  align-items: center;
}

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

/* Die Polsterung des Kopfes trägt hier die Reihe, sonst stünde der
   Anreisser tiefer als der Text neben ihm. */
.list-intro .page-head { padding-bottom: 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: 34px;
  height: 34px;
  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
   --------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--space-8) var(--space-6);
  max-width: 62ch;
}

.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/ */
.expiry-group { margin-bottom: var(--space-8); }

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

.expiry-group__title { margin: 0; font-size: 1.25rem; }
.expiry-group__count { font-size: 0.875rem; color: var(--kg-soft-ink); }

.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) {
  :root { --gutter: 12px; }

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

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

  .search__form { padding: 6px 6px 6px 14px; border-radius: var(--radius-card); }
  .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;
}

.glass-pill--lead svg { color: var(--kg-orange, #e8663c); 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. */
.provider-filter {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-5);
  overflow-x: auto;
  padding-bottom: 5px;
  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;
  box-shadow: 0 1px 3px rgba(24, 28, 36, 0.14);
}

.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 {
  box-shadow: 0 4px 12px rgba(24, 28, 36, 0.2);
}

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

/* Der gewählte Anbieter trägt einen kräftigen Rahmen statt einer Füllung:
   Eine dunkle Fläche hinter einem farbigen Logo verschluckt es. */
.provider-filter__item--active {
  border-color: var(--kg-ink);
  box-shadow: inset 0 0 0 1px var(--kg-ink);
  color: var(--kg-ink);
}

.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: volle Breite des Textbereichs, festes 16:9.
   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-6);
  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; }
}