/* ═══════════════════════════════════════════════════════════════════
   Streaminghistorie — schwarzer Saal, zwei Projektorkegel

    1  Marken (Farben, Schriften, Maße)
    2  Grundlage
    3  Hintergrund: Projektorlicht
    4  Umlaufender Glow
    5  Knöpfe und Felder
    6  Anmeldung
    7  Kopf und Leiste
    8  Regal und Karten
    9  Formular-Fenster
   10  TMDB-Suche
   11  Bewegung
   12  Breite
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 Marken ───────────────────────────────────────────────────── */
:root {
  --nacht:  #000000;   /* Seitengrund */
  --kohle:  #0B0B0F;   /* Kartenfläche */
  --rauch:  #15151C;   /* erhöhte Fläche */

  --kante:       rgba(255, 255, 255, .78);   /* weißer Rand der großen Kacheln */
  --kante-leise: rgba(255, 255, 255, .13);   /* Trenner, kleine Ränder */

  --lamp:   #F2B23C;   /* Projektor-Amber → Filme */
  --signal: #D96FA8;   /* Testbild-Magenta → Serien */
  --birne:  #F7DC8A;   /* Marquee-Lampe → Quiz */
  --chalk:  #F3F1F7;
  --mute:   #8B879B;

  /* Der Bereichston. Wird von .app, .blatt und .karte überschrieben. */
  --akzent: #E9E5F2;
  --glut:   var(--akzent);

  --display: "Cinzel", "Trajan Pro", "Palatino Linotype", Georgia, serif;
  --body:    "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --rand: 12px;
  --spur: .14em;
  --takt: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ── 2 Grundlage ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--nacht);
  color: var(--chalk);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

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

::selection { background: var(--akzent); color: #000; }

/* ── 3 Hintergrund: Projektorlicht ──────────────────────────────── */

/* Zwei Lichtkegel in den Tönen der Bereiche — Amber für Filme,
   Magenta für Serien — die langsam gegeneinander schwenken. Darüber
   Staub in der Luft und ein Hauch Filmkorn. */
.kino {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.kino__strahl {
  position: absolute;
  top: -50vh;
  width: 46vw;
  height: 165vh;
  transform-origin: 50% 10%;
  filter: blur(55px);
}

.kino__strahl--eins {
  left: -4vw;
  background: linear-gradient(to bottom,
              rgba(242, 178, 60, .42), rgba(242, 178, 60, .12) 42%, transparent 74%);
  animation: schwenken-links 22s ease-in-out infinite alternate;
}

.kino__strahl--zwei {
  right: -4vw;
  background: linear-gradient(to bottom,
              rgba(217, 111, 168, .38), rgba(217, 111, 168, .10) 42%, transparent 74%);
  animation: schwenken-rechts 27s ease-in-out infinite alternate;
}

.kino__staub {
  position: absolute;
  inset: -20%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .55) .8px, transparent 1.4px);
  background-size: 150px 150px;
  opacity: .07;
  animation: treiben 60s linear infinite;
}

/* Das Korn liegt ruhig. Bewegt man es, blitzen an den Rändern die
   unbedeckten Streifen auf — das flackerte wie ein Wackelkontakt. */
.kino__korn {
  position: absolute;
  inset: 0;
  opacity: .045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ── 4 Umlaufender Glow ─────────────────────────────────────────── */

/* Zwei Lichtpunkte, einander gegenüber, wandern langsam am Rand
   entlang. Der Winkel wird als eigene Eigenschaft animiert — sonst
   ließe sich ein conic-gradient nicht weich drehen. */
@property --umlauf {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.umkreist { position: relative; }

.umkreist::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--umlauf),
              transparent 0 4%,
              var(--glut) 9%,
              transparent 15% 54%,
              var(--glut) 59%,
              transparent 65% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 7px var(--glut));
  animation: umlauf 16s linear infinite;
  pointer-events: none;
}

@keyframes umlauf { to { --umlauf: 360deg; } }

/* ── 5 Knöpfe und Felder ────────────────────────────────────────── */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .6rem 1.05rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--takt), border-color var(--takt),
              color var(--takt), transform .12s ease;
}
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .55; cursor: default; }
/* Auch als Verweis soll er wie ein Knopf aussehen, nicht wie Text. */
a.knopf { text-decoration: none; }

.knopf--haupt {
  background: var(--akzent);
  color: #0A0A0C;
  font-weight: 500;
}
.knopf--haupt:hover:not(:disabled) { filter: brightness(1.12); }

.knopf--leise {
  background: transparent;
  border-color: var(--kante-leise);
  color: var(--mute);
}
.knopf--leise:hover:not(:disabled) { border-color: var(--kante); color: var(--chalk); }

.knopf--breit { width: 100%; padding-block: .82rem; }

/* Der Eingang. Er führt zur Anmeldekarte und trägt deshalb deren
   Zeichen: denselben umlaufenden Lichtschein, der dort um den Kreis
   kreist. Wer ihn drückt, sieht auf der nächsten Seite dasselbe Licht
   wieder — das ist keine Verzierung, sondern eine Zusage.

   Bernstein statt heller Platte: das ist die Farbe, die auf dieser
   Seite überall Film bedeutet. Die helle Platte war das Lauteste auf
   einer schwarzen Seite und rief lauter als das Banner.

   Beim Zeigen geht das Licht an — der Schriftzug wird hell, der Grund
   glimmt. Mehr passiert nicht; ein Knopf muss nicht springen. */
.knopf--eingang {
  --glut: var(--lamp);
  position: relative;
  background: rgba(242, 178, 60, .07);
  border-color: color-mix(in srgb, var(--lamp) 45%, transparent);
  color: var(--lamp);
  padding: .62rem 1.3rem;
  transition: background var(--takt), border-color var(--takt),
              color var(--takt), box-shadow var(--takt);
}
.knopf--eingang:hover,
.knopf--eingang:focus-visible {
  background: rgba(242, 178, 60, .16);
  border-color: var(--lamp);
  color: #FFF3DC;
  box-shadow: 0 0 22px rgba(242, 178, 60, .28);
}

/* Der Ring läuft enger und schneller als um die großen Karten — an
   einem Knopf von zwei Zentimetern wären sechzehn Sekunden je Runde
   eine Ewigkeit. */
.knopf--eingang.umkreist::after {
  inset: -1px;
  padding: 1px;
  filter: drop-shadow(0 0 5px var(--glut));
  animation-duration: 7s;
}

/* Felder */
.feld { display: flex; flex-direction: column; gap: .4rem; }

.feld__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

.feld__eingabe {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--kante-leise);
  border-radius: 8px;
  padding: .62rem .75rem;
  color: var(--chalk);
  transition: border-color var(--takt), background var(--takt);
  min-width: 0;
}
.feld__eingabe::placeholder { color: #5E5A70; }
.feld__eingabe:hover { border-color: rgba(255, 255, 255, .28); }
.feld__eingabe:focus {
  outline: none;
  border-color: var(--akzent);
  background: rgba(255, 255, 255, .07);
}
.feld__eingabe--mono { font-family: var(--mono); }

/* Nicht zu tippen, nur zu lesen — sieht deshalb auch nicht aus wie ein
   Feld, das auf Eingaben wartet. */
.feld__eingabe--fest {
  color: var(--mute);
  font-family: var(--mono);
  font-size: .78rem;
  cursor: default;
  text-overflow: ellipsis;
}
.feld__eingabe--fest:hover { border-color: var(--kante-leise); }
.feld__eingabe--fest:focus { background: rgba(255, 255, 255, .04); }
/* Groß genug, um ein paar Sätze am Stück zu sehen — an der unteren
   Kante lässt sie sich weiter aufziehen. */
.feld__eingabe--flaeche { resize: vertical; min-height: 8.5rem; line-height: 1.45; width: 100%; }

select.feld__eingabe {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%),
                    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
select.feld__eingabe option { background: var(--rauch); color: var(--chalk); }

.feld__hinweis { font-size: .76rem; color: var(--mute); line-height: 1.35; }
.feld__hinweis--fehler { color: #FF8A8A; }
.feld__hinweis--warnung { color: var(--lamp); }
.feld__hinweis code { font-family: var(--mono); font-size: .95em; color: var(--akzent); }

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Nebensachen dürfen kleiner sein als der Titel */
.feld-paar--klein .feld__label { font-size: .62rem; }
.feld-paar--klein .feld__eingabe { padding: .45rem .6rem; font-size: .86rem; }
.feld-paar--klein select.feld__eingabe { padding-right: 1.8rem; }

/* Sterne */
.sterne { font-family: var(--mono); letter-spacing: .1em; color: var(--akzent); }
.sterne--wahl { display: flex; gap: .15rem; }
.sterne__knopf {
  background: none;
  border: 0;
  padding: .1rem .12rem;
  font-size: 1.35rem;
  line-height: 1;
  color: #35323F;
  cursor: pointer;
  transition: color var(--takt), transform .12s ease;
}
.sterne__knopf:hover { transform: scale(1.14); }
.sterne__knopf--an { color: var(--akzent); }

/* ── 5b Die Vorstellung ─────────────────────────────────────────────
   Was ohne Sitzung zuerst dasteht. Fünf Abschnitte, links der Text,
   rechts das Bild — die Bilder liegen im Plakatformat 2:3, weil auf
   dieser Seite ohnehin alles Plakat ist.

   Gescrollt wird die ganze Seite, und was von unten hereinkommt,
   blendet sich auf. Den Auftakt macht der erste Abschnitt, der ohne
   Zutun dasteht: eine Seite, die beim Aufschlagen leer ist, sieht
   kaputt aus und nicht elegant.
   ────────────────────────────────────────────────────────────────── */

.start {
  position: relative;
  z-index: 1;
  max-width: 74rem;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 5.5rem;
}

.start__kopf {
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--kante-leise);
  margin-bottom: 1rem;
}

/* Der Schriftzug ist überall dasselbe Bild — auf der Vorstellung, in
   der Anmeldekarte und im Kopf der Sammlung. Der weiße Rand ist
   derselbe, den auch die Plakate und Quizkacheln tragen; er hebt das
   Bild vom schwarzen Grund ab, ohne ein zweites Weiß einzuführen.

   Wie breit es sein darf, entscheidet jede Stelle für sich — hier steht
   nur, wie es aussieht. */
.bannerbild {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--kante);
  border-radius: 8px;
}

/* VERSUCH: das Banner über die ganze Breite, der Knopf liegt darauf.

   Vorher stand das Bild auf 26rem begrenzt in der Mitte einer
   Dreispalten-Zeile, der Knopf rechts daneben. Jetzt nimmt es die
   volle Breite des Satzspiegels ein und der Knopf sitzt in seiner
   oberen rechten Ecke.

   Der Kopf wird dafür zum Bezugsrahmen — `position: relative` —, und
   weil das Bild als einziges darin steht, ist dessen Ecke auch seine. */
.start__kopf {
  display: block;
  position: relative;
}
.start__kopf .knopf {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
}

/* Auf dem Bild braucht der Knopf einen eigenen Grund. Genau unter ihm
   steht die Studiolampe — die hellste Stelle des ganzen Banners; das
   durchscheinende Bernstein von vorher wäre dort nicht zu lesen.

   Deshalb schwarz und fast deckend, mit einer Unschärfe darunter: so
   liegt er auf dem Bild, statt ein Loch hineinzuschneiden. Die Schrift
   und der umlaufende Schein bleiben, wie sie sind — er führt ja
   weiterhin an dieselbe Stelle. */
.start__kopf .knopf--eingang {
  background: rgba(6, 6, 8, .82);
  backdrop-filter: blur(6px);
  border-color: color-mix(in srgb, var(--lamp) 62%, transparent);
  /* Ein dünner schwarzer Ring hinter dem goldenen. Er trennt die Kante
     vom Bild, damit das Gold nicht in den hellen Stellen der Lampe
     ausfranst — dieselbe Aufgabe, die der weiße Rand bei den Plakaten
     hat, nur andersherum.

     Als Schlagschatten mit Spreizung, nicht als outline: die ist für
     den Fokusring reserviert und dürfte davon nicht verdeckt werden. */
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .9);
}
.start__kopf .knopf--eingang:hover,
.start__kopf .knopf--eingang:focus-visible {
  background: rgba(6, 6, 8, .92);
  border-color: var(--lamp);
  /* Der Ring bleibt beim Überfahren stehen — sonst spränge die Kante. */
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .9),
              0 0 22px rgba(242, 178, 60, .28);
}

.start__marke {
  margin: 0;
  min-width: 0;
  line-height: 0;
}
/* Keine Grenze mehr — das Bild ist 2064 Pixel breit und reicht damit
   auch für den Satzspiegel von 71rem. */
.start__marke .bannerbild { max-width: none; }

/* Die Frage, auf die die fünf Abschnitte antworten. Sie steht allein
   auf ihrer Zeile, mittig, und trägt den Strich, der sie vom ersten
   Kapitel trennt. */
.start__frage {
  position: relative;
  text-align: center;
  padding: .5rem 0 1rem;
}

.start__frage-wort {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chalk);
  text-shadow: 0 0 30px rgba(255, 255, 255, .12);
  /* Sonst steht auf dem Handy ein einsames „auf" in der zweiten Zeile.
     Wo der Browser das nicht kennt, bricht er wie bisher um. */
  text-wrap: balance;
}

.start__frage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.75rem;
  height: 1px;
  background: var(--kante-leise);
}

/* Der Schlussstein über die ganze Breite. Das Bild kommt quadratisch
   und wird zu einem Band beschnitten — etwas oberhalb der Mitte, weil
   dort die Köpfe stehen. Der Strich liegt darüber und schließt die
   Reihe der Abschnitte ab. */
/* Das Band ist so hoch, wie es sein darf, ohne den ersten Abschnitt aus
   dem Bild zu schieben. Das Bild kommt quadratisch, ein Band zeigt also
   immer nur einen Ausschnitt — bei 2:1 knapp die Hälfte statt eines
   Drittels wie zuvor. Der Ausschnitt sitzt etwas oberhalb der Mitte,
   weil dort die Köpfe stehen und die unten sonst als Erstes wegfallen. */
.start__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 34rem;
  overflow: hidden;
  border-radius: var(--rand);
  border: 1px solid var(--kante);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.start__banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.start__banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2.75rem;
  height: 1px;
  background: var(--kante-leise);
}

/* Text und Bild teilen sich die Breite. Das Bild steht rechts und
   bleibt dort — abwechselnd links und rechts wäre lebhafter, aber die
   Augen müssten bei jedem Abschnitt neu suchen, wo der Text anfängt. */
.start__block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}

/* Der Strich in der Mitte, zwischen Wort und Bild. Er reicht in die
   Lücken zwischen den Abschnitten hinein, damit er als eine Linie
   durchläuft und nicht als Reihe von Strichen erscheint. Oben und
   unten hört er auf: sonst liefe er in den Aufmacher und über das
   Seitenende hinaus. */
.start__block::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.75rem;
  bottom: -2.75rem;
  width: 1px;
  background: var(--kante-leise);
  pointer-events: none;
}
.start__block:first-of-type::before { top: 0; }
.start__block:last-of-type::before  { bottom: 0; }

.start__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 34rem;
}

.start__nummer {
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: var(--spur);
  color: color-mix(in srgb, var(--akzent) 70%, transparent);
}

.start__titel {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chalk);
}

.start__text p:not(.start__nummer) {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #C7C3D4;
}

/* Der Rahmen steht, ob das Bild kommt oder nicht — sonst springt das
   Raster, während die Seite lädt. */
.start__bild {
  position: relative;
  aspect-ratio: 2 / 3;
  max-height: 32rem;
  justify-self: center;
  width: 100%;
  max-width: 22rem;
  overflow: hidden;
  border-radius: var(--rand);
  border: 1px solid var(--kante);
  background: linear-gradient(160deg, #1B1A22, #0A0A0D);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.start__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fehlt das Bild, tritt der Abschnittsname an seine Stelle — wie die
   typografische Kachel im Regal. js/start.js setzt die Marke. */
.start__bild--ohne::after {
  content: attr(data-wort);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--chalk) 45%, transparent);
}

@media (max-width: 860px) {
  .start { gap: 3.5rem; padding-bottom: 3.5rem; }
  /* Bild über den Text: erst hinsehen, dann lesen. */
  .start__block { grid-template-columns: 1fr; gap: 1.4rem; }
  /* Untereinander gibt es keine Mitte mehr zu trennen. */
  .start__block::before { display: none; }
  .start__banner { aspect-ratio: 4 / 3; }
  .start__banner::after { top: -1.75rem; }
  .start__frage::after { bottom: -1.75rem; }
  .start__frage { padding: .2rem 0 .4rem; }
  .start__bild { grid-row: 1; max-width: 15rem; }
  .start__text { max-width: none; }
  .start__titel { font-size: clamp(1.35rem, 6vw, 1.8rem); }
  .start__text p:not(.start__nummer) { font-size: .95rem; line-height: 1.6; }
}

@media (max-width: 560px) {
  .start { padding: 1.2rem 1rem 3rem; }
  /* Auf dem Handy tritt der Knopf vom Banner herunter.

     Dort ist es nur noch gut neunzig Pixel hoch; ein Knopf darauf nähme
     ein gutes Drittel davon ein und bliebe mit 31 Pixeln Höhe unter
     dem, was eine Fingerkuppe sicher trifft. Also wieder übereinander:
     der Knopf oben rechts, der Schriftzug darunter über die ganze
     Breite.

     Damit fällt auch der Grund weg, den der Knopf auf dem Bild
     brauchte — hier steht er wieder auf Schwarz, und dort genügt der
     leise Bernsteinschimmer von überall sonst. */
  .start__kopf {
    display: grid;
    grid-template-columns: 1fr;
  }
  .start__kopf .knopf {
    position: static;
    grid-row: 1;
    justify-self: end;
  }
  .start__kopf .knopf--eingang {
    background: rgba(242, 178, 60, .07);
    border-color: color-mix(in srgb, var(--lamp) 45%, transparent);
    backdrop-filter: none;
    box-shadow: none;
  }
  .start__kopf .knopf--eingang:hover,
  .start__kopf .knopf--eingang:focus-visible {
    background: rgba(242, 178, 60, .16);
    border-color: var(--lamp);
    box-shadow: 0 0 22px rgba(242, 178, 60, .28);
  }
  .start__marke { grid-row: 2; }

  .start__bild { max-width: 12rem; }
}

/* ── 6 Anmeldung ────────────────────────────────────────────────── */
.tuner {
  position: relative;
  z-index: 1;
  /* Der Fuß mit Impressum und TMDB-Hinweis soll gerade noch ins Bild
     ragen, statt vollständig unter der Kante zu verschwinden. */
  min-height: calc(100vh - 7rem);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vh, 2rem) 1.25rem;
}

/* Der Rückweg unter der Karte. Die Ansicht ist ein Raster mit einer
   Zelle; Karte und Knopf teilen sich diese Zelle als Zeilen, damit die
   Karte weiter in der Mitte steht und der Knopf darunter hängt. */
.tuner { grid-auto-flow: row; gap: 1.3rem; align-content: center; }

.tuner__zurueck { justify-self: center; }

.tuner__karte {
  /* Die dritte Grenze ist die Fensterhöhe: der Kreis ist so hoch wie
     breit, und darunter muss noch der Fuß Platz haben, ohne dass die
     Seite scrollt. */
  width: min(92vw, 33rem, calc(100vh - 10rem));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--kante);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .06), transparent 62%),
    radial-gradient(circle at 50% 50%, #131318, #050507 72%);
  box-shadow: 0 0 70px rgba(0, 0, 0, .9), inset 0 0 60px rgba(0, 0, 0, .7);
  display: grid;
  place-items: center;
  padding: clamp(1.8rem, 5.5vh, 3.4rem);
  --glut: rgba(242, 178, 60, .95);
  animation: aufblenden .5s ease both;
}

/* Doppelte Umrandung: außen die weiße Linie, darin ein schwarzer Ring.
   In diesem Ring läuft der Glow — und strahlt nach außen ab. */
.tuner__karte::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 11px solid #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  pointer-events: none;
}

.tuner__karte.umkreist::after {
  inset: 13px;
  padding: 5px;
  filter: drop-shadow(0 0 8px var(--glut))
          drop-shadow(0 0 24px var(--glut))
          drop-shadow(0 0 52px rgba(242, 178, 60, .5));
  animation-duration: 13s;
}

.tuner__mitte {
  width: min(100%, 17.5rem);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  text-align: center;
}

/* In der Anmeldekarte trägt das Bild den Namen. Es steht mittig und
   nimmt die Breite der Karte — mehr ist dort ohnehin nicht. */
.tuner__marke {
  margin: 0;
  line-height: 0;
}

.tuner__unterzeile {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: .4rem;
}

.tuner__karte .feld { gap: .25rem; }
.tuner__karte .feld__label { font-size: .58rem; }
.tuner__karte .feld__eingabe { text-align: center; padding-block: .5rem; }

.tuner__fehler {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  color: #FF8A8A;
}
.tuner__fehler-titel {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
}
.tuner__fehler-text { font-size: .74rem; color: var(--mute); line-height: 1.3; }

.tuner--stoerung .tuner__karte { animation: stoerung .42s steps(2) 2; }

.sweep {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom,
              transparent 0%, rgba(255, 255, 255, .04) 45%,
              rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .04) 55%, transparent 100%);
}
.sweep--an { animation: durchlauf .6s ease-in forwards; }

/* ── 7 Kopf und Leiste ──────────────────────────────────────────── */
.app {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 7rem);
  max-width: 82rem;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 3rem;
  animation: aufblenden .4s ease both;
}
.app[data-typ="alle"]  { --akzent: #E9E5F2; }
.app[data-typ="film"]  { --akzent: var(--lamp); }
.app[data-typ="serie"] { --akzent: var(--signal); }
.app[data-typ="quiz"]  { --akzent: var(--birne); }
/* Ein eigener Ton für GAMES: kühles Grün gegen das Bernstein der Filme
   und das Magenta der Serien — ein Bereich, der nichts mit beiden zu
   tun hat, soll sich auch nicht so anfühlen. */
.app[data-typ="games"] { --akzent: #7FD9C4; }

/* Und einer für WISSEN: ein kühles Blau, das weder nach Film noch
   nach Musik noch nach Spielen aussieht. */
.app[data-typ="wissen"] { --akzent: #8FB8F0; }

/* Drei Spalten statt space-between: der Schriftzug soll in der Mitte
   der Seite stehen und nicht in der Mitte zwischen Klapper und Profil.
   Links ist ein Knopf von 38 px, rechts eine Gruppe von gut 200 — mit
   space-between säße er über hundert Pixel daneben.

   Das Menü hängt auch hier drin, ist aber absolut gesetzt und nimmt
   deshalb keine Spalte. */
.kopf {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--kante-leise);
}
.kopf__rechts { justify-self: end; }

/* Dieselbe Kugel wie unten am Fuß, nur gegenläufig: oben von rechts
   nach links. Dieselben Keyframes, rückwärts abgespielt. */
.kopf::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glut);
  filter: drop-shadow(0 0 7px var(--glut));
  transform: translate(-50%, 50%);
  animation: kugel-lauf 11s linear infinite reverse;
  pointer-events: none;
}

/* Im Kopf der Sammlung steht das Bild zwischen Klapper und Profil und
   damit von selbst in der Mitte. Schmaler als auf der Vorstellung:
   hier ist es die Marke der Seite und nicht ihr Aufmacher. */
.kopf__marke {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 0;
}
.kopf__marke .bannerbild { max-width: 16rem; }

.kopf__rechts { display: flex; align-items: center; gap: .9rem; }

/* Profilknopf: Symbol und Name führen ins eigene Profil */
.profilknopf {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .25rem .6rem .25rem .25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--takt), background var(--takt);
}
.profilknopf:hover { border-color: var(--kante-leise); background: rgba(255, 255, 255, .04); }
.profilknopf:hover .kopf__nutzer { color: var(--chalk); }

.profilknopf__bild,
.profil__bild {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--kante);
  background: linear-gradient(160deg, #1F1A2E, #0A0A0D);
  flex: 0 0 auto;
}
.profilknopf__bild { width: 2rem; height: 2rem; font-size: 1rem; }
.profilknopf__bild img,
.profil__bild img { width: 100%; height: 100%; object-fit: cover; }
.profilknopf__bild .kuerzel,
.profil__bild .kuerzel {
  font-family: var(--display);
  font-weight: 700;
  color: var(--akzent);
}
.profilknopf__bild .kuerzel { font-size: .78rem; }
.kopf__nutzer {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

/* ── Der Klapper und sein Menü ──────────────────────────────────────
   Auf breiten Schirmen eine Zugabe: die Reiterleiste bleibt, wie sie
   war, und wer lieber klappt, klappt. Unter 900 px tritt das Menü an
   ihre Stelle — sieben Reiter nebeneinander sind dort keine Leiste
   mehr, sondern ein Versteck.
   ────────────────────────────────────────────────────────────────── */

.klapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0 .45rem;
  background: none;
  border: 1px solid var(--kante-leise);
  border-radius: 9px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color var(--takt);
}
.klapper:hover,
.klapper:focus-visible { border-color: var(--akzent); }

.klapper__strich {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--chalk);
  transition: transform var(--takt), opacity var(--takt);
}

/* Offen wird aus den drei Strichen ein Kreuz: der mittlere geht, die
   äußeren legen sich übereinander. */
.klapper[aria-expanded="true"] .klapper__strich:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.klapper[aria-expanded="true"] .klapper__strich:nth-child(2) { opacity: 0; }
.klapper[aria-expanded="true"] .klapper__strich:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menue {
  position: absolute;
  z-index: 40;
  top: calc(100% - .8rem);
  left: 0;
  width: min(17rem, calc(100vw - 2rem));
  padding: .5rem;
  background: var(--kohle);
  border: 1px solid var(--kante-leise);
  border-radius: var(--rand);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  animation: menue-auf .18s cubic-bezier(.2, .8, .3, 1);
}

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

.menue__liste { list-style: none; margin: 0; padding: 0; }

/* Die Haarlinie vor den Quizzen: hier hört die Sammlung auf. */
.menue__zeile--gruppe {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid var(--kante-leise);
}

/* Drei Spalten, damit alles untereinander steht: Zeichen, Wort, Zahl.
   Ein Raster statt space-between — sonst tanzen die Wörter je nach
   Länge der Zahl daneben. */
.menue__punkt {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .7rem;
  background: none;
  border: 0;
  border-radius: 9px;
  text-align: left;
  text-decoration: none;
  color: var(--mute);
  cursor: pointer;
  transition: background var(--takt), color var(--takt);
}
.menue__punkt:hover,
.menue__punkt:focus-visible { background: rgba(255, 255, 255, .06); color: var(--chalk); }

/* Das Zeichen steht neben dem Wort, nicht an seiner Stelle — ein
   Bildchen allein muss man raten. Etwas zurückgenommen, damit es die
   Zeile begleitet und nicht anführt. */
.menue__zeichen {
  font-size: .95rem;
  line-height: 1;
  text-align: center;
  opacity: .8;
  filter: saturate(.85);
}

/* Dieselbe Schrift wie auf den Reitern — das Menü tritt ja an ihre
   Stelle und soll nicht wie ein Fremdkörper wirken. */
.menue__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menue__punkt--hier {
  color: var(--chalk);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 2px 0 0 var(--akzent);
}
.menue__punkt--hier .menue__zeichen { opacity: 1; filter: none; }

/* Die Farbe der Zeile folgt derselben Ordnung wie überall: Amber heißt
   Film, Magenta Serie, die Marquee-Lampe steht fürs Quiz. Wer die
   Karten kennt, kennt das Menü. */
.menue__punkt[data-typ="film"]:hover  .menue__name,
.menue__punkt[data-typ="film"]:focus-visible  .menue__name { color: var(--lamp); }
.menue__punkt[data-typ="serie"]:hover .menue__name,
.menue__punkt[data-typ="serie"]:focus-visible .menue__name { color: var(--signal); }
.menue__punkt[data-typ="quiz"]:hover  .menue__name,
.menue__punkt[data-typ="quiz"]:focus-visible  .menue__name,
.menue__punkt[data-typ="songquiz"]:hover .menue__name,
.menue__punkt[data-typ="songquiz"]:focus-visible .menue__name { color: var(--birne); }

.menue__zahl { font-family: var(--mono); font-size: .72rem; color: var(--mute); }

/* Das Impressum steht abgesetzt: es gehört zur Seite, nicht zur
   Sammlung. */
.menue__anhang {
  margin-top: .4rem;
  padding-top: .4rem;
  border-top: 1px solid var(--kante-leise);
}
.menue__punkt--leise { font-size: .84rem; }

.menue__schleier {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .35);
}

.leiste {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 1.5rem 0 1.2rem;
}

/* Die Leiste rollt in sich selbst, nicht die Seite. Sieben Reiter
   passen nicht in jedes Fenster; sie zu stauchen oder umzubrechen
   bräche den gleitenden Unterstrich, und ohne das Eigenrollen schöbe
   `scrollIntoView` beim Reiterwechsel die ganze Seite seitwärts —
   Kopfzeile und Regal mit.

   Die Bildlaufleiste bleibt unsichtbar; gewischt wird ohnehin. Und
   bewusst ohne `scroll-behavior: smooth`: das weiche Rollen wird
   nicht überall ausgeführt, und dann käme der gewählte Reiter gar
   nicht ins Bild. Sofort ankommen ist hier mehr wert als sanft. */
.reiter {
  position: relative;
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter__knopf { flex: 0 0 auto; }

.reiter__knopf {
  background: none;
  border: 0;
  padding: .2rem .55rem .55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt);
}
.reiter__knopf:hover { color: var(--chalk); }
.reiter__knopf[aria-selected="true"] { color: var(--chalk); }

.reiter__zahl {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .04em;
  vertical-align: super;
  color: var(--mute);
}
.reiter__knopf[aria-selected="true"] .reiter__zahl { color: var(--akzent); }

/* Breite und Versatz kommen aus JavaScript. Beide sind als Länge
   angemeldet — sonst bliebe eine Überblendung von `width` beim
   Startwert stehen, und der Strich wäre nie zu sehen. */
@property --w { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --x { syntax: "<length>"; inherits: false; initial-value: 0px; }

.reiter__strich {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--w);
  background: var(--akzent);
  box-shadow: 0 0 10px var(--akzent);
  transform: translateX(var(--x));
  transition: --w var(--takt), --x var(--takt), background var(--takt);
}

.werkzeuge { display: flex; align-items: center; gap: .5rem; }
.werkzeuge__suche { width: 16rem; }
.werkzeuge__suche,
.werkzeuge__sortierung {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--kante-leise);
  border-radius: 8px;
  padding: .55rem .75rem;
  font-size: .85rem;
  transition: border-color var(--takt);
}
.werkzeuge__suche:focus,
.werkzeuge__sortierung:focus { outline: none; border-color: var(--akzent); }
.werkzeuge__suche::placeholder { color: #5E5A70; }
.werkzeuge__sortierung {
  appearance: none;
  cursor: pointer;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%),
                    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.werkzeuge__sortierung option { background: var(--rauch); color: var(--chalk); }

/* Der Pfeil dreht die gewählte Sortierung um. Quadratisch und so hoch
   wie das Auswahlfeld daneben. */
.werkzeuge__richtung {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--kante-leise);
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1;
  color: var(--mute);
  cursor: pointer;
  transition: border-color var(--takt), color var(--takt);
}
.werkzeuge__richtung:hover { color: var(--chalk); border-color: rgba(255, 255, 255, .28); }
.werkzeuge__richtung:focus-visible { outline: none; border-color: var(--akzent); color: var(--akzent); }

/* ── 8 Regal und Karten ─────────────────────────────────────────── */
.regal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.1rem;
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: var(--rand);
  overflow: hidden;
  cursor: pointer;
  animation: karte-auf .34s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform var(--takt), box-shadow var(--takt), border-color var(--takt);
}
.karte[data-typ="film"]  { --akzent: var(--lamp); }
.karte[data-typ="serie"] { --akzent: var(--signal); }

.karte:hover,
.karte:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .8), 0 0 0 1px var(--akzent);
}

.karte__bild {
  position: relative;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #1B1A22, #0A0A0D);
  overflow: hidden;
}
/* Absolut positioniert aus demselben Grund wie bei der Besetzung:
   sonst hängt die Höhe am Seitenverhältnis des Bildes statt an der
   Kachel, und krumme Poster brechen das Raster auf. */
.karte__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.karte:hover .karte__poster { transform: scale(1.04); }

.karte__ersatz { display: none; }
.karte--ohne-bild .karte__ersatz {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: .9rem .9rem 1.1rem 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--akzent) 60%, var(--chalk));
}
.karte--ohne-bild .karte__titel { display: none; }

/* Oben mittig, zwischen den beiden Knöpfen an den Ecken. Links saß es
   früher allein; seit dort „Wo ist das zu sehen?" sitzt, ist die Mitte
   der einzige Platz, an dem es niemandem im Weg steht. */
.karte__art {
  position: absolute;
  top: .55rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  max-width: calc(100% - 5.4rem);   /* lässt beide Eckknöpfe frei */
  white-space: nowrap;
  padding: .16rem .5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  border: 1px solid var(--akzent);
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
}
.app[data-typ="alle"] .karte__art { display: block; }

.karte__text {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  padding: .75rem .85rem .9rem;
  border-top: 1px solid var(--kante-leise);
}
.karte__titel {
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.22;
  letter-spacing: .01em;
}
.karte__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.karte__genre { color: var(--akzent); opacity: .85; }
.karte__datum { color: #5E5A70; }

/* Der Kinostart auf der Watchlist. Heller als das Sehdatum in der
   Sammlung: dort ist das Datum eine Fußnote, hier ist es der Grund,
   warum der Titel überhaupt noch wartet. */
.karte__datum--kommt {
  color: var(--mute);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .02em;
}

/* Beide Daten tragen auf der Watchlist jetzt eine Beschriftung und
   werden dadurch länger als der Platz neben den Sternen. Umbrechen
   statt abschneiden. */
.regal--watchlist .karte__sterne {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  align-items: baseline;
}
.karte__sterne { font-size: .82rem; }

/* Der Haken der Watchlist sitzt, wo sonst der Stern sitzt — er tritt an
   dessen Stelle. Grün, weil er etwas abschließt statt auszuzeichnen. */
.karte__haken {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 3;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(0, 0, 0, .68);
  border: 1px solid var(--kante-leise);
  border-radius: 50%;
  font-size: .95rem;
  line-height: 1;
  color: #6A6580;
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt),
              background var(--takt), transform .12s ease;
}
.karte:hover .karte__haken { border-color: var(--kante); }
.karte__haken:hover {
  transform: scale(1.12);
  color: #7FD98F;
  border-color: #7FD98F;
  text-shadow: 0 0 10px #7FD98F;
}
.karte__haken:disabled { opacity: .5; cursor: default; transform: none; }

/* Noch nicht gesehen: das Plakat tritt einen Schritt zurück, bis der
   Haken sitzt. */
.karte--offen .karte__poster,
.karte--offen .karte__ersatz { opacity: .72; }
.karte--offen:hover .karte__poster,
.karte--offen:hover .karte__ersatz { opacity: 1; }


/* ── Wo ist das zu sehen? ───────────────────────────────────────── */

/* Der Knopf oben links auf dem Plakat, gegenüber vom Stern. Dieselbe
   runde Form — er tut nur etwas anderes: fragt, statt auszuzeichnen. */
.karte__wo {
  position: absolute;
  left: .5rem;
  top: .5rem;
  z-index: 3;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(0, 0, 0, .68);
  border: 1px solid var(--kante-leise);
  border-radius: 50%;
  font-size: .72rem;
  line-height: 1;
  color: #6A6580;
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt),
              background var(--takt), transform .12s ease;
}
.karte:hover .karte__wo { border-color: var(--kante); }
.karte__wo:hover,
.karte__wo:focus-visible { transform: scale(1.12); color: var(--lamp); }
.karte__wo:disabled { cursor: default; transform: none; }

/* Während gefragt wird. Kein Spinner — ein Puls sagt dasselbe und
   braucht kein zweites Element. */
.karte__wo--laeuft { animation: wopuls 1s ease-in-out infinite; }
@keyframes wopuls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Die Antwort sitzt unter dem Knopf, an derselben Kante. Sie steht auf
   dem Plakat und braucht deshalb einen eigenen Grund — ein Logo auf
   einem Filmplakat ist sonst nirgends. */
.karte__anbieter {
  position: absolute;
  left: .5rem;
  top: 2.7rem;
  z-index: 3;
  display: none;
}
.karte__anbieter--da { display: block; }

.anbieter {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.anbieter__logo {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 7px;
  border: 1px solid var(--kante-leise);
  background: rgba(0, 0, 0, .5);
  object-fit: cover;
}

.anbieter__nichts {
  display: inline-block;
  max-width: 6.5rem;
  padding: .18rem .38rem;
  background: rgba(0, 0, 0, .68);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: .55rem;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--mute);
}

/* In der Staffelliste liegen die Logos in der Zeile statt auf einem
   Bild, rechts neben dem Text und vor den Knöpfen. `row-reverse` legt
   das erste Logo an den Knopf und lässt weitere nach innen wachsen —
   die rechte Kante bleibt ruhig, egal wie viele es sind. */
.anbieter--zeile {
  flex: 0 0 auto;
  flex-direction: row-reverse;
  align-self: center;
  gap: .3rem;
}
.anbieter--zeile .anbieter__logo {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 6px;
}
/* Der Stern für die Top Ten — unten rechts auf dem Plakat */
.karte__stern {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 3;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(0, 0, 0, .68);
  border: 1px solid var(--kante-leise);
  border-radius: 50%;
  font-size: .92rem;
  line-height: 1;
  color: #6A6580;
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt),
              background var(--takt), transform .12s ease;
}
.karte:hover .karte__stern { border-color: var(--kante); }
.karte__stern:hover { transform: scale(1.12); color: var(--lamp); }
.karte__stern[aria-pressed="true"] {
  color: var(--lamp);
  border-color: var(--lamp);
  background: rgba(0, 0, 0, .82);
  text-shadow: 0 0 10px var(--lamp);
}

.karte__weg {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 3;
  background: rgba(0, 0, 0, .74);
  border: 1px solid var(--kante-leise);
  border-radius: 999px;
  padding: .2rem .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--mute);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--takt), color var(--takt), border-color var(--takt);
}
.karte:hover .karte__weg,
.karte:focus-within .karte__weg { opacity: 1; }
.karte__weg:hover { color: #FF8A8A; border-color: #FF8A8A; }
.karte__weg--frage { opacity: 1; color: #FF8A8A; border-color: #FF8A8A; }

/* Blättern — höchstens zwei Reihen je Seite, Leiste oben und unten */
.blaetterer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .3rem;
  padding: 1rem 0;
}
.blaetterer--oben { padding-top: 0; }

.blaetterer__knopf {
  min-width: 2.2rem;
  padding: .4rem .55rem;
  background: transparent;
  border: 1px solid var(--kante-leise);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--mute);
  cursor: pointer;
  transition: border-color var(--takt), color var(--takt), background var(--takt);
}
.blaetterer__knopf:hover:not(:disabled) { border-color: var(--kante); color: var(--chalk); }
.blaetterer__knopf:disabled { opacity: .3; cursor: default; }
.blaetterer__knopf[aria-current="page"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #0A0A0C;
  box-shadow: 0 0 12px color-mix(in srgb, var(--akzent) 45%, transparent);
}

.blaetterer__luecke {
  padding: 0 .15rem;
  font-family: var(--mono);
  font-size: .72rem;
  color: #5E5A70;
}

.blaetterer__stand {
  margin-left: .7rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: #5E5A70;
}

/* Leerer Zustand */
.leere {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  padding: 3.5rem 0 2rem;
  border-top: 1px dashed var(--kante-leise);
}
.leere__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.leere__text { color: var(--mute); font-size: .92rem; max-width: 38ch; }

/* ── 8b Quiz ────────────────────────────────────────────────────── */
.quiz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.1rem;
  padding: .4rem 0 1rem;
}

/* Das Logo steht auf demselben Schwarz wie die Seite. Statt eines
   Rahmens bekommt es nur den Schein seiner eigenen Lampen. */
.quiz__logo {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 30px rgba(247, 220, 138, .2));
}

/* ── Die beiden Regler ──────────────────────────────────────────── */
.quiz__regler {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .6rem 1rem;
}

.regler__marke {
  justify-self: end;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

.regler {
  position: relative;
  display: flex;
  padding: 3px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--kante-leise);
  border-radius: 999px;
}

/* Maß und Ort des Läufers kommen aus JavaScript — die Felder sind
   verschieden breit, „Meine Sammlung" braucht mehr als „Gesamt".
   Beide als Länge angemeldet, sonst bliebe die Überblendung beim
   Startwert stehen, wie beim Reiterstrich. */
@property --lauf-w { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --lauf-x { syntax: "<length>"; inherits: false; initial-value: 0px; }

.regler__lauf {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--lauf-w);
  border-radius: 999px;
  background: var(--birne);
  box-shadow: 0 0 14px color-mix(in srgb, var(--birne) 40%, transparent);
  transform: translateX(var(--lauf-x));
  transition: --lauf-w var(--takt), --lauf-x var(--takt);
}

.regler__knopf {
  position: relative;   /* über dem Läufer */
  background: none;
  border: 0;
  padding: .42rem 1rem;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt);
}
.regler__knopf:hover { color: var(--chalk); }
.regler__knopf[aria-checked="true"] { color: #0A0A0C; font-weight: 600; }

.quiz__stand {
  margin-top: -1.2rem;
  max-width: 46ch;
  text-align: center;
  font-size: .82rem;
  color: var(--mute);
}
.quiz__stand--knapp { color: color-mix(in srgb, var(--birne) 70%, var(--chalk)); }

/* Drei Zeilen je Kachelreihe: Name, Kachel, Hinweis. */
.quiz__feld {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 150px);
  justify-content: center;
  gap: 1.7rem 2.1rem;
}

/* Die drei Zeilen kommen aus dem Feld darüber, nicht aus dem Platz
   selbst. Nur so stehen die Kacheln einer Reihe auf gleicher Höhe,
   auch wenn der eine Name zwei und der andere drei Zeilen braucht. */
.quiz__platz {
  grid-row: span 3;
  display: grid;
  /* Eine Spalte, die nicht breiter wird als der Platz selbst — sonst
     schiebt ein langes Wort im Hinweis die Kachel aus der Reihe. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  row-gap: .5rem;
  justify-items: center;
  text-align: center;
}

.quiz__name {
  align-self: end;
  /* `anywhere` bricht notfalls mitten im Wort — bei „Zwei Songs
     übereinander" auf einem schmalen Schirm kam dabei
     „ÜBEREINANDE|R" heraus. Silbentrennung zuerst, das Brechen
     bleibt als letzter Ausweg für Wörter ohne Trennstelle. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chalk);
}

.quiz__kachel {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 0;
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: var(--rand);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--takt), box-shadow var(--takt);
}
.quiz__kachel:hover,
.quiz__kachel:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--birne),
              0 0 24px color-mix(in srgb, var(--birne) 40%, transparent);
}

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

/* Noch kein Quiz dahinter: das Bild tritt zurück, ein Band sagt warum.
   Anklicken geht trotzdem — dann kommt die Meldung. */
.quiz__kachel--bald .quiz__bild { opacity: .35; filter: grayscale(.7); }
.quiz__kachel--bald:hover .quiz__bild { opacity: .5; }

.quiz__bald {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .2rem 0 .25rem;
  background: rgba(0, 0, 0, .72);
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--birne);
}

/* Platzhalter, solange bilder/quiz/<schluessel>.jpg noch fehlt. */
.quiz__nummer {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.1rem;
  color: color-mix(in srgb, var(--birne) 45%, transparent);
}

.quiz__hinweis {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--mute);
}

/* ── 8c Rangliste ───────────────────────────────────────────────────
   Unter den Kacheln: wer führt wo. Die Bestwerte im Profil zeigen den
   eigenen Stand, hier steht er neben den anderen. Ausgezeichnet wird
   immer nur der erste Platz — mit der Marquee-Lampe, die schon auf
   der ganzen Quizseite für „hier zählt es" steht.
   ────────────────────────────────────────────────────────────────── */

.rangliste {
  width: min(100%, 46rem);
  padding-top: 1.9rem;
  border-top: 1px solid var(--kante-leise);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.rangliste__marke {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--birne);
}

.rangliste__leer {
  margin: 0;
  text-align: center;
  font-size: .85rem;
  color: var(--mute);
}

/* Der Auftritt: Tafeln und Karten kommen erst, wenn man zu ihnen
   scrollt. Gesetzt und wieder abgenommen wird die Marke in js/app.js;
   ohne sie steht alles da, wo es hingehört. */
.aufblende {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1);
  transition-delay: var(--verzug, 0ms);
  will-change: opacity, transform;
}
.aufblende--da {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Die Gesamtwertung: eine Tafel je Konto, das gespielt hat. */
.rangliste__wertung {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}

.wertung__zeile {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .55rem;
  padding: .5rem .85rem;
  border: 1px solid var(--kante-leise);
  border-radius: var(--rand);
  background: rgba(255, 255, 255, .03);
}

/* Vorn steht, wer die meisten Quizze anführt — sortiert kommt die
   Liste schon vom Server, hier wird sie nur beleuchtet. */
.rangliste__wertung li:first-child {
  border-color: color-mix(in srgb, var(--birne) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--birne) 15%, transparent);
}

.wertung__zeile--ich { background: rgba(255, 255, 255, .07); }
.wertung__zeile--ich .wertung__name::after {
  content: " · du";
  font-weight: 400;
  color: var(--mute);
}

.wertung__platz,
.wertung__bild { grid-row: 1 / span 2; }

.wertung__platz {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--mute);
}
.rangliste__wertung li:first-child .wertung__platz { color: var(--birne); }

.wertung__bild {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--kante-leise);
  background: linear-gradient(160deg, #1F1A2E, #0A0A0D);
  font-size: 1rem;
}
.wertung__bild img { width: 100%; height: 100%; object-fit: cover; }
.wertung__bild .kuerzel {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  color: var(--akzent);
}

.wertung__name {
  grid-column: 3;
  font-family: var(--display);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--chalk);
}

.wertung__siege {
  grid-column: 4;
  padding-left: .8rem;
  font-family: var(--mono);
  font-size: .72rem;
  white-space: nowrap;
  color: var(--birne);
}

.wertung__summe {
  grid-column: 3 / span 2;
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--mute);
}

/* Je Quiz eine Karte, in derselben Reihenfolge wie die Kacheln. */
.rangliste__feld {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .8rem;
}

.rangkarte {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .8rem .85rem;
  border: 1px solid var(--kante-leise);
  border-radius: var(--rand);
  background: var(--kohle);
}

.rangkarte__kopf {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--chalk);
}

.rangkarte__nummer {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .62rem;
  color: color-mix(in srgb, var(--birne) 70%, transparent);
}

.rangkarte__leer {
  margin: 0;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--mute);
}

.rangkarte__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.rangzeile {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .32rem .4rem;
  border-radius: 9px;
}
.rangzeile--ich { background: rgba(255, 255, 255, .05); }

.rangzeile__platz {
  width: 1ch;
  text-align: center;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--mute);
}
.rangzeile--erster .rangzeile__platz { color: var(--birne); }

.rangzeile__bild {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--kante-leise);
  background: linear-gradient(160deg, #1F1A2E, #0A0A0D);
  font-size: .8rem;
}
.rangzeile__bild img { width: 100%; height: 100%; object-fit: cover; }
.rangzeile__bild .kuerzel {
  font-family: var(--display);
  font-weight: 700;
  font-size: .68rem;
  color: var(--akzent);
}

.rangzeile__text { display: flex; flex-direction: column; min-width: 0; }

.rangzeile__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .82rem;
  font-weight: 500;
  color: var(--chalk);
}

.rangzeile__wie {
  font-family: var(--mono);
  font-size: .58rem;
  color: var(--mute);
}

.rangzeile__wert {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--mute);
}
.rangzeile--erster .rangzeile__wert {
  color: var(--birne);
  text-shadow: 0 0 14px color-mix(in srgb, var(--birne) 35%, transparent);
}

/* ── 8c-2 Staffeln ──────────────────────────────────────────────────
   Was bei den eigenen Serien gerade läuft. Die Zeile ist mit der
   Rangliste verwandt — Bild, Text, Zahl —, nimmt aber den Filmton
   auf: Serien sind auf dieser Seite überall magenta.
   ────────────────────────────────────────────────────────────────── */

.staffeln {
  --akzent: var(--signal);
  width: min(100%, 46rem);
  margin: 0 auto;
  padding: .4rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.staffeln__kopf { text-align: center; display: flex; flex-direction: column; gap: .35rem; }

.staffeln__marke {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--signal);
}

.staffeln__unter {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--mute);
}

.staffeln__stand {
  margin: 0;
  text-align: center;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--mute);
}
.staffeln__stand--schlecht { color: #FF8A8A; }

/* Der Rückweg für Ausgeblendetes. Leise gesetzt und mittig unter dem
   Kopf — er wird selten gebraucht und soll die Liste nicht anführen. */
.staffeln__abgleich {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.staffeln__abgleichtext {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .02em;
  color: var(--mute);
  opacity: .8;
}

.staffeln__gruppe { display: flex; flex-direction: column; gap: .6rem; }

.staffeln__gruppenmarke,
.staffeln__klappmarke {
  margin: 0;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

/* Der Klappblock. Das Dreieck des Browsers ersetzen wir durch ein
   eigenes Zeichen, das sich mitdreht. */
.staffeln__klappe {
  border-top: 1px solid var(--kante-leise);
  padding-top: 1rem;
}
.staffeln__klappmarke {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.staffeln__klappmarke::-webkit-details-marker { display: none; }
.staffeln__klappmarke::before {
  content: "▸";
  color: var(--signal);
  transition: transform var(--takt);
}
.staffeln__klappe[open] .staffeln__klappmarke::before { transform: rotate(90deg); }
.staffeln__klappe[open] .staffelliste { margin-top: .7rem; }
.staffeln__zahl { font-family: var(--mono); color: var(--mute); }

.staffelliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.staffelzeile {
  display: grid;
  /* Plakat · Text · Anbieterlogos · Knöpfe. Die dritte Spalte fällt auf
     null zusammen, wenn zu der Serie nichts bekannt ist. */
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .8rem;
  padding: .55rem .7rem;
  border: 1px solid var(--kante-leise);
  border-radius: var(--rand);
  background: var(--kohle);
  transition: opacity .25s ease, transform .25s ease;
}

/* Die Vorschlagszeile führt keine Anbieterlogos — ohne die dritte
   Spalte stünden die Knöpfe sonst um eine Fuge zu weit von der Kante.
   Auf schmalen Geräten übernimmt die Regel weiter unten. */
.staffelzeile--post { grid-template-columns: auto minmax(0, 1fr) auto; }

/* Erledigt: die Zeile tritt ab, statt einfach zu verschwinden — sonst
   springt die Liste und man verliert die Stelle. */
.staffelzeile--geht {
  opacity: 0;
  transform: translateX(14px);
}

.staffelzeile__bild {
  display: grid;
  place-items: center;
  width: 2.6rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--rauch);
}
.staffelzeile__bild img { width: 100%; height: 100%; object-fit: cover; }

.staffelzeile__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.staffelzeile__serie {
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .03em;
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--chalk);
}

.staffelzeile__was {
  font-size: .78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--signal) 70%, var(--chalk));
}

.staffelzeile__wann {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .02em;
  color: var(--mute);
}

.staffelzeile__knoepfe {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 0 0 auto;
}

.staffelknopf {
  background: none;
  border: 1px solid var(--kante-leise);
  border-radius: 999px;
  padding: .3rem .7rem;
  font-family: var(--body);
  font-size: .68rem;
  white-space: nowrap;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt);
}
.staffelknopf:hover,
.staffelknopf:focus-visible { color: var(--chalk); border-color: var(--chalk); }
.staffelknopf--merken:hover,
.staffelknopf--merken:focus-visible { color: var(--signal); border-color: var(--signal); }

/* Zurückholen ist die Umkehr des Wegklickens — deshalb dieselbe Form,
   aber in Amber statt Magenta: es nimmt etwas zurück, statt etwas zu
   verschieben. */
.staffelknopf--zurueck:hover,
.staffelknopf--zurueck:focus-visible { color: var(--lamp); border-color: var(--lamp); }



/* ── Trailer: Knopf auf dem Plakat ──────────────────────────────── */

/* Unten links — die vierte und letzte freie Ecke. Oben links fragt
   „wo zu sehen", oben rechts löscht, unten rechts zeichnet aus. */
.karte__trailer {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
  z-index: 3;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(0, 0, 0, .68);
  border: 1px solid var(--kante-leise);
  border-radius: 50%;
  font-size: .78rem;
  line-height: 1;
  filter: grayscale(1) opacity(.62);
  cursor: pointer;
  transition: filter var(--takt), border-color var(--takt),
              transform .12s ease;
}
/* Die Klappe ist ein farbiges Zeichen in einer sonst einfarbigen
   Reihe. Grau gelegt fügt sie sich ein und kommt erst zu Farbe, wenn
   man sie meint. */
.karte:hover .karte__trailer { border-color: var(--kante); }
.karte__trailer:hover,
.karte__trailer:focus-visible {
  transform: scale(1.12);
  filter: none;
  border-color: var(--lamp);
}
.karte__trailer:disabled { cursor: default; transform: none; }
.karte__trailer--laeuft { animation: wopuls 1s ease-in-out infinite; }

/* ── Trailer: das Fenster ───────────────────────────────────────── */

.lichtspiel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(0, 0, 0, .86);
}

.lichtspiel__kasten {
  width: min(62rem, 100%);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.lichtspiel__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.lichtspiel__marke {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .03em;
  color: var(--chalk);
  overflow-wrap: anywhere;
}

.lichtspiel__weg {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 1px solid var(--kante-leise);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt);
}
.lichtspiel__weg:hover,
.lichtspiel__weg:focus-visible { color: #E08A8A; border-color: #E08A8A; }

/* 16:9, ohne dass die Höhe geraten werden muss. */
.lichtspiel__rahmen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--rand);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--kante-leise);
}

.lichtspiel__fenster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lichtspiel__fuss {
  margin: 0;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--mute);
  opacity: .8;
}

/* Solange das Fenster offen ist, scrollt dahinter nichts weg. */
body.steht { overflow: hidden; }

.legende__zeichen--trailer { filter: grayscale(1) opacity(.75); font-size: .82rem; }
/* ── Legende: was die Zeichen auf dem Plakat bedeuten ───────────── */

/* Sie steht unter dem Blätterer und ist bewusst leise gesetzt. Wer sie
   einmal gelesen hat, braucht sie nicht wieder — sie soll das Regal
   nicht beschweren, nur dastehen, wenn man sucht. */
.legende {
  max-width: 62rem;
  margin: 1.6rem auto 0;
  padding: .9rem 1rem;
  border-top: 1px solid var(--kante-leise);
}

.legende__marke {
  margin: 0 0 .7rem;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: .75;
  text-align: center;
}

.legende__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.6rem;
}

.legende__punkt {
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* Rund und gleich groß wie die Knöpfe auf dem Plakat — eine Legende,
   die anders aussieht als das Erklärte, erklärt nichts. Beim Löschen
   ist der Knopf selbst eine Pille statt eines Kreises; das eine Zeichen
   deshalb aus der Reihe tanzen zu lassen, brächte nichts. */
.legende__zeichen {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .68);
  border: 1px solid var(--kante-leise);
  border-radius: 50%;
  font-size: .72rem;
  line-height: 1;
  color: #6A6580;
}

/* Und dieselben Farben wie beim Überfahren des jeweiligen Knopfes. */
.legende__zeichen--wo    { color: var(--lamp); }
.legende__zeichen--stern { color: var(--lamp); font-size: .82rem; }
.legende__zeichen--tipp  { color: #6A6580; font-size: .82rem; }
.legende__zeichen--haken { color: #7FD98F; }
.legende__zeichen--weg   { color: #E08A8A; font-family: var(--mono); }

.legende__wort {
  font-size: .74rem;
  line-height: 1.3;
  color: var(--mute);
}

/* Auf dem Handy bleibt die Legende eine Reihe, die umbricht. Als
   Spalte stand sie fünf Zeilen hoch unter einem Regal, das selbst nur
   eine Reihe hoch ist — die Erklärung nahm mehr Platz als das
   Erklärte. Sie ist eine Fußnote und soll sich auch so verhalten. */
@media (max-width: 480px) {
  .legende { margin-top: 1.1rem; padding: .7rem .5rem; }
  .legende__liste { gap: .35rem .9rem; }
  .legende__marke { margin-bottom: .5rem; }
  .legende__wort { font-size: .68rem; }
}

/* ── Songquiz: die Probierseite ─────────────────────────────────── */

/* WISSEN ist genauso gebaut — Kopf, Auswahl, Spielfeld
   untereinander in einer schmalen Spalte —, deshalb steht es hier
   daneben statt in einer zweiten Fassung derselben Regeln. */
.songquiz,
.wissen {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.songquiz__kopf,
.wissen__kopf { text-align: center; }

/* Die Überschrift ist das Bild. Kein Text daneben — der steht darauf. */
.songquiz__marke { margin: 0 0 .5rem; }

/* Rund beschnitten wie das Quizlogo. Das Bild ist quadratisch, sein
   Kreis liegt darin; die schwarzen Ecken fallen weg, nichts vom
   Motiv. Der Schein darunter nimmt das Violett des Bildes auf —
   beim Filmquiz ist er bernsteinfarben, weil dessen Logo es ist. */
.songquiz__logo {
  /* Bilder stehen hier auf `display: block` — die mittige
     Textausrichtung des Kopfes greift dann nicht. */
  margin-inline: auto;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 30px rgba(138, 110, 240, .28));
}

.songquiz__unter {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--mute);
}

.songquiz__suche {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.songquiz__label {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}

.songquiz__zeile {
  display: flex;
  gap: .5rem;
}
.songquiz__zeile .feld__eingabe { flex: 1 1 auto; min-width: 0; }

.songquiz__stand {
  margin: 0;
  text-align: center;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--mute);
}
.songquiz__stand--schlecht { color: #FF8A8A; }

.songquiz__quelle {
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .02em;
  color: var(--mute);
  opacity: .7;
}


/* ── Songquiz: das Spielfeld ────────────────────────────────────── */

.spielfeld {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}

.spielfeld__buehne {
  display: flex;
  justify-content: center;
  padding: .6rem 0;
}

.knopf--gross {
  padding: .9rem 2.6rem;
  font-size: 1rem;
  letter-spacing: .1em;
}

/* Die Regeln dieses Quiz. Sie stehen einmal oben und ändern sich
   nicht mehr — deshalb leise gesetzt, damit sie den Stand darunter
   nicht überstimmen. */
.spielfeld__regeln {
  margin: 0;
  text-align: center;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--mute);
  opacity: .82;
}

.spielfeld__stand {
  margin: 0;
  text-align: center;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--mute);
  min-height: 1.4rem;
}
/* Während es läuft, zählt die Zeile herunter — dann darf sie auffallen. */
.spielfeld__stand--laeuft {
  font-family: var(--mono);
  letter-spacing: .04em;
  color: var(--lamp);
}
.spielfeld__stand--gut      { color: #7FD98F; }
.spielfeld__stand--fast     { color: var(--birne); }
.spielfeld__stand--schlecht { color: #FF8A8A; }

/* ── Songquiz: die zwei Tippfelder ──────────────────────────────── */

/* `position: relative`, weil die Vorschlagsliste sich daran aufhängt —
   SH.spielwerk.raten setzt sie absolut ins Formular. */
.tipp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.tipp__hinweis {
  margin: 0;
  text-align: center;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--mute);
  opacity: .85;
}

.tipp__feld {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.tipp__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: .2rem;
}



/* ── Songquiz 3: die Zeitlinie ──────────────────────────────────── */

/* Dreißig Sekunden am Stück, davon ist der vordere Teil frei. Ohne sie
   rät man, wie viel von der Probe man überhaupt schon kennt. */
.zeitlinie {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.zeitlinie__bahn {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--rauch);
  border: 1px solid var(--kante-leise);
  overflow: hidden;
}

.zeitlinie__frei {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7C5CF0, #3E9BFF);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* Die Stufen als schmale weiße Striche quer über die Bahn. Alle sind
   zu sehen, auch die noch nicht erreichten — so erkennt man auf einen
   Blick, wie weit es noch geht und wie die Abstände wachsen. */
.zeitlinie__marke {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .55);
  transition: background var(--takt), box-shadow var(--takt);
}

/* Die Stufe, auf der man gerade steht. */
.zeitlinie__marke--dran {
  background: #FFF;
  box-shadow: 0 0 6px rgba(255, 255, 255, .9);
}

/* Der Zeiger wandert beim Abspielen mit — er zeigt, wo im Stück man
   gerade ist, nicht nur wie weit es reicht. */
.zeitlinie__zeiger {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: var(--chalk);
  box-shadow: 0 0 8px rgba(255, 255, 255, .7);
}

.zeitlinie__stand {
  margin: 0;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .02em;
  color: var(--mute);
}

.zeitlinie__stand {
  text-align: right;
  opacity: .7;
}
/* ── Songquiz 4: das Memory-Brett ───────────────────────────────── */

/* Zwei Bretter: acht mal acht zu 64 Pixeln, oder vier mal vier zu 128.
   Beide messen dadurch fast gleich viel — 540 gegen 524 Pixel — und
   passen auf jeden Schirm ab etwa 570.

   Darunter schrumpfen die Kacheln mit, statt umzubrechen: gleich breite
   Spalten, und das Brett wird nur so breit, wie Platz ist. Eine Reihe
   darf hier nicht brechen — bricht sie, stimmt das Raster nicht mehr,
   und die Paare säßen woanders, als man sie sich gemerkt hat.

   Deshalb `1fr` und nicht die feste Kantenlänge: die steht nur in der
   Breite des Bretts und ist dort die Obergrenze. Spaltenzahl und
   Kantenlänge gehören zusammen und stehen deshalb beide am Modifikator
   — js/app.js schaltet nur die Klasse um und rechnet nicht mit. */
.memory {
  --spalten: 8;
  --kachel: 64px;
  --fuge: 4px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--spalten), 1fr);
  gap: var(--fuge);
  width: min(100%, calc(var(--spalten) * var(--kachel)
                        + (var(--spalten) - 1) * var(--fuge)));
}

.memory--klein {
  --spalten: 4;
  --kachel: 128px;
}

/* Die Rückseite liegt als Hintergrund auf der Klasse und nicht als
   <img> in jeder Kachel: ein Bild, vierundsechzig Kacheln — so steht
   die Adresse einmal da statt vierundsechzigmal.

   Und zwar die 128er Fassung, nicht die große daneben: auf
   vierundsechzig Pixeln ist von tausend nichts zu sehen, das Warten
   auf drei Megabyte aber schon.

   `aspect-ratio` statt fester Höhe: die Breite kommt jetzt aus dem
   Raster, die Höhe soll ihr folgen. Sonst stünden auf schmalen
   Schirmen Rechtecke. */
.memory__kachel {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--kante);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--kohle) center / cover no-repeat
              url("../bilder/images/Song_Memory_Kachel_2.jpg");
  transition: transform var(--takt), box-shadow var(--takt), opacity var(--takt);
}

.memory__kachel:hover,
.memory__kachel:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--birne),
              0 0 14px color-mix(in srgb, var(--birne) 40%, transparent);
}

/* Läuft gerade. Der Rand pulst mit — auf einer Kachel, die sonst
   nichts verrät, ist das das einzige sichtbare Zeichen dafür. */
.memory__kachel--laeuft {
  box-shadow: 0 0 0 1px var(--lamp),
              0 0 16px color-mix(in srgb, var(--lamp) 55%, transparent);
  animation: memoryPuls 1s ease-in-out infinite;
}

@keyframes memoryPuls {
  50% { box-shadow: 0 0 0 2px var(--lamp),
                    0 0 22px color-mix(in srgb, var(--lamp) 70%, transparent); }
}

/* Gefunden: die Hülle liegt oben, die Kachel bleibt liegen und ist
   nicht mehr anklickbar. Der grüne Rand ist derselbe Ton wie in
   `.spielfeld__stand--gut` — was gut ging, sieht überall gleich aus. */
.memory__kachel--gefunden {
  cursor: default;
  border-color: #7FD98F;
  box-shadow: 0 0 0 1px #7FD98F;
  transform: none;
}
.memory__kachel--gefunden:hover { transform: none; }

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

/* Nichts mehr zu holen: das Brett steht noch, aber der Lauf ist vorbei. */
.memory--aus .memory__kachel { cursor: default; opacity: .55; }
.memory--aus .memory__kachel--gefunden { opacity: 1; }

/* Was zuletzt aufgedeckt wurde, in Worten. */
.memory__fund {
  margin: 0;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  color: #7FD98F;
}

/* ── Songquiz: Kopfzeile und Endstand des Spiels ────────────────── */

.spielfeld__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}

/* Das Logo des laufenden Quiz, in der Mitte zwischen Rückweg und
   Zähler. Dieselben Maße wie `.spiel__logo` im Filmquiz, aber
   ausgeschrieben statt geerbt: die Songquizze sollen nicht an einer
   Regel hängen, die für ein anderes Gerüst geschrieben wurde. */
.spielfeld__logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
}

/* Der Zeitregler auf der Spielseite, mit seiner Erklärzeile. */
.spielfeld__regler {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

/* Festgenagelt: sichtbar unbeteiligt, aber nicht unlesbar. */
.regler--fest { opacity: .55; }
.regler--fest .regler__knopf { cursor: default; }

.spielfeld__zeithinweis {
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .02em;
  color: var(--mute);
  opacity: .8;
}

/* Der Stand beim Spielen. Er stand vorher klein und grau in der Ecke
   und wurde übersehen — jetzt trägt er die Punktzahl in der
   Anzeigeschrift, damit man sie im Vorbeigehen liest. */
.spielfeld__zaehler {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--mute);
}

.spielfeld__punkte {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--lamp);
}

/* Was schon im Kasten ist — die eigene Bestmarke zum Vergleich. */
.spielfeld__best {
  opacity: .7;
}

/* Der Endstand. Die Zahl groß, alles andere leise — nach zehn Runden
   will man wissen, was herauskam, nicht wie es sich zusammensetzt. */
.schluss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.4rem 1rem;
  border: 1px solid var(--kante-leise);
  border-radius: var(--rand);
  background: var(--kohle);
  text-align: center;
}

.schluss__marke {
  margin: 0;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}

.schluss__punkte {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--chalk);
}

.schluss__zeile {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--mute);
}

.schluss__zeile--bestwert { color: var(--lamp); }

/* Auf der Übersicht steht nur ein Regler. Die Beschriftung daneben —
   wie beim Filmquiz mit seinen zweien — sähe schief aus: links ein
   Wort, rechts eine Pille, und beides zusammen nicht mittig. Hier
   steht sie deshalb darüber, und alles sitzt in der Mitte. */
#sq-auswahl .quiz__regler {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

/* Der Erklärsatz darunter, auf Lesebreite gebracht: über die ganze
   Seite gezogen zerfiele er in drei kurze, mittig geflatterte
   Zeilen. */
#sq-regelstand {
  max-width: 34rem;
  margin-inline: auto;
}

/* Die Auswahl hat dieselbe Breite wie das Spiel darunter. */
.songquiz__auswahl,
.wissen__auswahl {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
/* ── Songquiz: die Auflösung ────────────────────────────────────── */

.loesung {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.loesung__zeile {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .55rem .7rem;
  border: 1px solid var(--kante-leise);
  border-radius: var(--rand);
  background: var(--kohle);
}

#sq-neu { align-self: center; }
/* ── Songquiz: die Trefferliste ─────────────────────────────────── */

.songliste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.songzeile {
  display: grid;
  /* Abspielen · Hülle · Text · Aufnehmen */
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .55rem .7rem;
  border: 1px solid var(--kante-leise);
  border-radius: var(--rand);
  background: var(--kohle);
}

/* Der Abspielknopf steht vorn, nicht hinten: er ist der Grund, warum
   die Zeile überhaupt da ist. */
.songknopf {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 1px solid var(--kante-leise);
  border-radius: 50%;
  font-size: .72rem;
  line-height: 1;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt),
              transform .12s ease;
}
.songknopf:hover,
.songknopf:focus-visible { color: var(--lamp); border-color: var(--lamp); }
/* Der Knopf zum Aufnehmen, rechts in der Zeile. Grün, weil er etwas
   hinzufügt — dasselbe Grün wie der Haken auf der Watchlist. */
.songknopf--dazu:hover:not(:disabled),
.songknopf--dazu:focus-visible { color: #7FD98F; border-color: #7FD98F; }

/* Steht schon drin: gesperrt und leise, aber lesbar — die Auskunft
   „hast du schon" ist ja der halbe Zweck. */
.songknopf--drin {
  color: #7FD98F;
  border-color: rgba(127, 217, 143, .4);
  opacity: .75;
  cursor: default;
}

.songknopf--laeuft {
  color: var(--lamp);
  border-color: var(--lamp);
  box-shadow: 0 0 0 3px rgba(242, 178, 60, .12);
}

.songzeile__bild {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--rauch);
  border: 1px solid var(--kante-leise);
}
.songzeile__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.songzeile__text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.songzeile__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .03em;
  line-height: 1.25;
  color: var(--chalk);
  overflow-wrap: anywhere;
}

.songzeile__wer {
  font-size: .78rem;
  color: var(--akzent);
  opacity: .85;
  overflow-wrap: anywhere;
}

.songzeile__dazu {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .02em;
  color: var(--mute);
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .songzeile { gap: .55rem; padding: .5rem .55rem; }
  .songzeile__bild { width: 2.4rem; height: 2.4rem; }
}
/* ── 8d Quizseite: Erkenne den Film am Bild ─────────────────────── */
.spiel {
  --akzent: var(--birne);
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.spiel__kopf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.spiel__kopf .knopf { justify-self: start; }

.spiel__logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
}

.spiel__titel {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--chalk);
}

/* Logo und Bestwert gehören zusammen und werden als Paar mittig
   gesetzt — sonst risse die Rasterspalte sie auseinander. */
.spiel__marke {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* In Gold, weil das der einzige Wert auf der Seite ist, den man sich
   verdienen muss. */
.bestwert {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.bestwert__zahl {
  font-family: var(--mono);
  font-size: 1.6rem;
  color: var(--birne);
  text-shadow: 0 0 16px color-mix(in srgb, var(--birne) 45%, transparent);
}

.bestwert__wort {
  margin-top: .2rem;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--birne) 55%, var(--mute));
}

.punktelage {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .03em;
  color: var(--mute);
}
.punktelage--an { color: var(--birne); }

/* ── Punkte im Ergebnis ── */
.endepunkte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .9rem 1.6rem;
  border: 1px solid var(--kante-leise);
  border-radius: 14px;
}
.endepunkte--rekord {
  border-color: var(--birne);
  box-shadow: 0 0 22px color-mix(in srgb, var(--birne) 22%, transparent);
}

.endepunkte__wert {
  font-family: var(--mono);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--birne);
}

.endepunkte__wort {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

.endepunkte__vermerk {
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--mute);
}
.endepunkte--rekord .endepunkte__vermerk { color: var(--birne); }

.spiel__blatt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

.spiel__regeln {
  max-width: 44ch;
  font-size: .95rem;
  color: var(--chalk);
}

/* Nummeriert, weil die drei Schritte wirklich nacheinander kommen. */
.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 42ch;
  text-align: left;
}

.ablauf__schritt {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .6rem;
  align-items: baseline;
  font-size: .88rem;
  color: var(--mute);
}

.ablauf__nr {
  font-family: var(--mono);
  font-size: .7rem;
  text-align: right;
  color: var(--birne);
}

.spiel__notiz {
  max-width: 44ch;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--mute);
}

.spiel__wahl {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.spiel__vorrat {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--mute);
}

/* ── Die laufende Runde ── */
.spiel__leiste {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--kante-leise);
}

.spiel__zaehler {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chalk);
}

.spiel__stand {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--mute);
}

/* Der Bildkasten behält seine Höhe, auch solange nichts drin ist —
   sonst springt beim Laden das halbe Blatt. */
.szene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: var(--rand);
  overflow: hidden;
}

.szene__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.szene--da .szene__bild { opacity: 1; }

.szene__lage {
  position: relative;
  max-width: 30ch;
  padding: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--mute);
}

/* Die Uhr sitzt auf dem Bild. Der Ring ist die Restzeit, --rest läuft
   von 1 auf 0 und kommt aus JavaScript. */
.uhr {
  --uhr-ton: var(--birne);
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--uhr-ton) calc(var(--rest, 1) * 360deg),
                             rgba(255, 255, 255, .18) 0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/* Die dunkle Scheibe in der Mitte macht aus dem Kreis einen Ring —
   und gibt der Zahl ihren Grund, egal wie hell das Standbild ist. */
.uhr::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .78);
}

.uhr__zahl {
  position: relative;
  font-family: var(--mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--chalk);
}

.uhr--knapp { --uhr-ton: #E88B8B; }
.uhr--knapp .uhr__zahl { color: #E88B8B; }

/* ── Quiz 3: die Besetzung tröpfelt herein ── */
.besetzung {
  position: relative;
  width: 100%;
  padding: 1.1rem;
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: var(--rand);
}

.besetzung__kopf {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  padding-right: 4.4rem;      /* Platz für die Uhr */
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--kante-leise);
  text-align: left;
}

.besetzung__art {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--akzent);
}

.besetzung__zahl {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--chalk);
}

.besetzung__wert {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--birne);
}

/* Sechs Plätze stehen von Anfang an; sie füllen sich nur nach und
   nach. So springt beim Einblenden nichts. */
.reihe {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .7rem;
  min-height: 132px;
}

/* Bewusst ohne `both`: die Kachel ist von sich aus sichtbar, das
   Einblenden ist nur Zugabe. Mit `both` bliebe sie auf opacity 0
   stehen, falls die Animation nicht anläuft — dann fehlte ein
   Schauspieler, ohne dass es jemand merkt. */
.darsteller {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  animation: darsteller-auf .4s cubic-bezier(.2, .8, .3, 1);
}

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

.darsteller__bild {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: var(--rauch);
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--mute);
}
.darsteller__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.darsteller__name {
  font-size: .72rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--chalk);
}

.darsteller__platz {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .06em;
  color: var(--mute);
}

/* Die Zuschlagstabelle auf der Einstellungsseite. */
.staffel {
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: .68rem;
}
.staffel__titel {
  padding-bottom: .5rem;
  font-size: .6rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}
.staffel th {
  padding: .18rem 1rem .18rem 0;
  font-weight: 400;
  text-align: left;
  color: var(--mute);
}
.staffel td {
  padding: .18rem 2rem .18rem 0;
  color: var(--birne);
}
.staffel td:last-child { padding-right: 0; }

/* ── Quiz 2: Plakat, Titel und vier Namen ── */
.gesucht {
  width: 100%;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1.4rem;
  align-items: center;
  text-align: left;
}

.plakat {
  position: relative;
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: var(--rand);
  overflow: hidden;
}

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

/* Auf dem schmalen Plakat darf die Uhr kleiner ausfallen. */
.plakat .uhr { width: 40px; height: 40px; top: .5rem; right: .5rem; }
.plakat .uhr__zahl { font-size: .85rem; }

/* Kein Plakat da: der Titel tritt an seine Stelle, wie im Regal. */
.plakat__ersatz {
  padding: .8rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: .04em;
  text-align: center;
  color: var(--mute);
}

.gesucht__art {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--akzent);
}

.gesucht__titel {
  margin-top: .25rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--chalk);
}

.gesucht__frage {
  margin-top: .7rem;
  font-size: .9rem;
  color: var(--mute);
}

.wahlreihe {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

.wahlfeld {
  padding: .8rem 1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--kante-leise);
  border-radius: 10px;
  font-family: var(--body);
  font-size: .92rem;
  color: var(--chalk);
  cursor: pointer;
  transition: border-color var(--takt), background var(--takt), transform var(--takt);
}
.wahlfeld:hover:not(:disabled) {
  border-color: var(--akzent);
  transform: translateY(-1px);
}
.wahlfeld:disabled { cursor: default; }

.wahlfeld--gut {
  border-color: #7FD98F;
  background: rgba(127, 217, 143, .14);
  color: #7FD98F;
}
.wahlfeld--schlecht {
  border-color: #E88B8B;
  background: rgba(232, 139, 139, .12);
  color: #E88B8B;
}

/* ── Quiz 4: vier Plakate, eines fällt raus ── */
.imposter {
  position: relative;
  width: 100%;
  padding: 1.1rem;
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: var(--rand);
}

/* Rechts bleibt Platz, damit die Uhr nicht auf der Frage sitzt. */
.imposter__frage {
  margin-bottom: 1rem;
  padding-right: 4rem;
  text-align: left;
  font-size: .92rem;
  color: var(--mute);
  min-height: 1.4em;
}

.imposter__feld {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}

.imposter__wahl {
  display: grid;
  gap: .35rem;
  align-content: start;
  padding: .5rem .5rem .6rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--kante-leise);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--takt), background var(--takt), transform var(--takt);
}
.imposter__wahl:hover:not(:disabled) {
  border-color: var(--akzent);
  transform: translateY(-2px);
}
.imposter__wahl:disabled { cursor: default; }

.imposter__plakat {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  background: var(--rauch);
  border-radius: 8px;
  overflow: hidden;
}
.imposter__plakat .plakat__ersatz { font-size: .82rem; padding: .5rem; }

.imposter__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.2;
  color: var(--chalk);
  overflow-wrap: anywhere;
}

.imposter__jahr {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--mute);
}

.imposter__wahl--gut {
  border-color: #7FD98F;
  background: rgba(127, 217, 143, .14);
}
.imposter__wahl--gut .imposter__titel { color: #7FD98F; }

.imposter__wahl--schlecht {
  border-color: #E88B8B;
  background: rgba(232, 139, 139, .12);
}
.imposter__wahl--schlecht .imposter__titel { color: #E88B8B; }

/* ── Quiz 5: Jahr gegen Jahr ── */
.duell {
  position: relative;
  width: 100%;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: var(--rand);
}

.duell__paar {
  width: 100%;
  max-width: 34rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
}

.duell__seite {
  display: grid;
  gap: .45rem;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.duell__plakat {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 2 / 3;
  background: var(--rauch);
  border: 1px solid var(--kante-leise);
  border-radius: 10px;
  overflow: hidden;
}
.duell__plakat .plakat__ersatz { font-size: .82rem; padding: .5rem; }

.duell__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.15;
  color: var(--chalk);
  overflow-wrap: anywhere;
}

.duell__jahr {
  font-family: var(--mono);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--birne);
}
.duell__jahr--offen { color: var(--mute); }
.duell__jahr--auf { animation: jahr-auf .35s ease both; }

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

.duell__gegen {
  align-self: center;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

.duell__frage {
  max-width: 42ch;
  text-align: center;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--mute);
}

.duell__wahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}

.duellknopf {
  min-width: 9.5rem;
  padding: .85rem 1.4rem;
  background: rgba(255, 255, 255, .05);
  border-color: var(--kante-leise);
  color: var(--chalk);
  font-size: .82rem;
}
.duellknopf:hover:not(:disabled) { border-color: var(--akzent); }
.duellknopf:disabled { cursor: default; }

.duellknopf--gut {
  border-color: #7FD98F;
  background: rgba(127, 217, 143, .14);
  color: #7FD98F;
}
.duellknopf--schlecht {
  border-color: #E88B8B;
  background: rgba(232, 139, 139, .12);
  color: #E88B8B;
}

/* Nach der Antwort sind beide Knöpfe gesperrt. Die Auflösung soll
   trotzdem in voller Farbe stehen, nicht halb ausgeblendet. */
.duellknopf--gut:disabled,
.duellknopf--schlecht:disabled { opacity: 1; }

/* ── Quiz 6: Stück für Stück aufdecken ── */
.enthuellung {
  position: relative;
  width: 100%;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: var(--rand);
}

.enthuellung__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-right: 3.6rem;    /* Platz für die Uhr */
}

.enthuellung__frage {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--chalk);
}

.enthuellung__stand {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  flex: 0 0 auto;
}
.enthuellung__wert {
  font-family: var(--mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--birne);
}
.enthuellung__wort {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

.enthuellung__tipps {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.enthuellung__tipps:empty { display: none; }

.enthuellung__stufe {
  padding: .8rem .9rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--kante-leise);
  border-left: 2px solid var(--akzent);
  border-radius: 8px;
  animation: aufblenden .3s ease both;
}

.enthuellung__marke {
  margin-bottom: .45rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

.enthuellung__text {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--chalk);
}
.enthuellung__text--satz { font-style: italic; color: #C7C3D4; }

/* Die Besetzung als Tipp: dieselben Kacheln wie im Cast-Quiz, nur
   ohne Nummer. Sechs nebeneinander, auf schmalen Geräten drei. */
.enthuellung__reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .7rem;
}

/* Das Plakat ist der letzte Tipp — erkennbar, aber nicht zu lesen. */
.enthuellung__plakatfeld { display: flex; justify-content: center; }
.enthuellung__plakat {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 2 / 3;
  background: var(--rauch);
  border-radius: 10px;
  overflow: hidden;
}
.enthuellung__plakat .plakat__bild {
  filter: blur(9px) saturate(1.1);
  /* Etwas größer, damit die Unschärfe keine hellen Ränder hinterlässt. */
  transform: scale(1.12);
}
.enthuellung__plakat .plakat__ersatz { font-size: .82rem; padding: .5rem; }

.enthuellung__knopf {
  align-self: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  padding: .6rem .95rem;
}
.enthuellung__vorschau {
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: none;
  color: #5E5A70;
}

/* Nach einem Fehlversuch: kein Urteil, nur ein Vermerk — die Frage
   läuft ja weiter. Deshalb gedämpft und nicht rot. */
.enthuellung__fehl {
  font-size: .84rem;
  line-height: 1.4;
  color: var(--mute);
  animation: aufblenden .2s ease both;
}

.raten {
  position: relative;    /* Grund für die Vorschlagsliste */
  width: 100%;
  display: flex;
  gap: .6rem;
}

/* Vorschläge unter dem Eingabefeld. Ort und Breite setzt js/spiel.js,
   damit die Liste am Feld klebt und nicht unter den Knöpfen landet. */
.vorschlaege {
  position: absolute;
  z-index: 6;
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .3rem;
  list-style: none;
  background: var(--rauch);
  border: 1px solid var(--kante-leise);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
  animation: aufblenden .14s ease both;
}

.vorschlag {
  display: block;
  width: 100%;
  padding: .5rem .6rem;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-family: var(--body);
  font-size: .88rem;
  line-height: 1.3;
  text-align: left;
  color: var(--chalk);
  cursor: pointer;
  transition: background var(--takt), color var(--takt);
}
.vorschlag:hover,
.vorschlag--dran {
  background: rgba(255, 255, 255, .08);
  color: var(--akzent);
}

.vorschlaege__rest {
  padding: .45rem .6rem .3rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
  color: #5E5A70;
}
.raten__feld { flex: 1 1 auto; }
.raten__knoepfe { display: flex; gap: .5rem; flex: 0 0 auto; }
.raten .knopf { flex: 0 0 auto; white-space: nowrap; }

.urteil {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--chalk);
}
.urteil--gut      { color: #7FD98F; }
.urteil--schlecht { color: #E88B8B; }

/* ── Ergebnis ── */
.ende__ueberschrift {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--birne);
}

.ende__zahlen {
  display: flex;
  gap: 2.4rem;
}

.ende__zahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}

.ende__wert {
  font-family: var(--mono);
  font-size: 2.4rem;
  line-height: 1;
}
.ende__zahl--gut .ende__wert      { color: #7FD98F; }
.ende__zahl--schlecht .ende__wert { color: #E88B8B; }

.ende__wort {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

.ende__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: left;
}

.ende__zeile {
  display: grid;
  grid-template-columns: 1.2rem 1fr auto;
  gap: .6rem;
  align-items: baseline;
  padding: .4rem .6rem;
  background: rgba(255, 255, 255, .03);
  border-radius: 8px;
  font-size: .85rem;
}

.ende__zeichen { font-family: var(--mono); }
.ende__zeile--gut .ende__zeichen      { color: #7FD98F; }
.ende__zeile--schlecht .ende__zeichen { color: #E88B8B; }

.ende__titel { color: var(--chalk); }
.ende__tipp {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--mute);
}

.ende__knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

/* ── 9 Formular-Fenster ─────────────────────────────────────────── */
.fenster {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.fenster__grund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(3px);
  animation: aufblenden .2s ease both;
}

.blatt {
  position: relative;
  z-index: 1;
  width: min(100%, 52rem);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #17161D, var(--kohle) 34%);
  border: 1px solid var(--kante);
  border-radius: 18px 18px 0 0;
  animation: hochfahren .32s cubic-bezier(.2, .8, .3, 1) both;
}
.blatt[data-typ="film"]  { --akzent: var(--lamp); }
.blatt[data-typ="serie"] { --akzent: var(--signal); }
.blatt[data-typ="game"]  { --akzent: #7FD9C4; }

.blatt__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem 1rem;
}
.blatt__titel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFF;
}
.blatt__zu {
  background: none;
  border: 0;
  padding: .3rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt);
}
.blatt__zu:hover { color: var(--chalk); }

/* Blättern durch die Einträge, ohne das Fenster zu schließen */
.blatt__nav {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
  margin-right: .4rem;
}
.blatt__pfeil {
  min-width: 1.9rem;
  padding: .28rem .45rem;
  background: transparent;
  border: 1px solid var(--kante-leise);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1;
  color: var(--mute);
  cursor: pointer;
  transition: border-color var(--takt), color var(--takt);
}
.blatt__pfeil:hover:not(:disabled) { border-color: var(--kante); color: var(--chalk); }
.blatt__pfeil:disabled { opacity: .3; cursor: default; }
.blatt__zaehler {
  min-width: 5.5rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5E5A70;
}

.blatt__inhalt {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 0 1.6rem 1.6rem;
  overflow-y: auto;
}

.blatt__fuss {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 1rem 1.6rem;
  border-top: 1px solid var(--kante-leise);
  background: rgba(0, 0, 0, .45);
}
.blatt__fehler,
.blatt__gut {
  margin-right: auto;
  font-size: .78rem;
  line-height: 1.3;
  max-width: 30ch;
}
.blatt__fehler { color: #FF8A8A; }
.blatt__gut { color: var(--akzent); }

/* Einzelne Werte, die nur zu lesen sind — etwa die Regie */
.wert {
  font-size: .92rem;
  line-height: 1.4;
  color: var(--chalk);
}

/* Typ-Wahl */
/* Art und Liste stehen nebeneinander: „Film · Serie" und
   „Gesehen · Watchlist" beantworten beide die Frage, was das hier wird. */
.artzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
}

/* Was niemand gesehen hat, lässt sich nicht bewerten. */
.blatt[data-liste="watchlist"] #f-bewertung-paar { display: none; }

.wahl {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--kante-leise);
  border-radius: 9px;
  align-self: flex-start;
}
.wahl__knopf {
  background: none;
  border: 0;
  border-radius: 6px;
  padding: .42rem 1.1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  transition: background var(--takt), color var(--takt);
}
.wahl__knopf[aria-checked="true"] { background: var(--akzent); color: #0A0A0C; }

.wahl--klein { align-self: stretch; }
.wahl--klein .wahl__knopf { padding: .3rem .7rem; font-size: .66rem; }

/* Titelzeile mit TMDB-Knopf */
.titelzeile { display: flex; gap: .5rem; align-items: stretch; }
.titelzeile .feld__eingabe { flex: 1 1 auto; }
.titelzeile .knopf { flex: 0 0 auto; padding-inline: .85rem; }

/* Bildfeld */
.bildfeld { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; align-items: start; }
.bildfeld__links { display: flex; flex-direction: column; gap: .4rem; }

/* Das Jahr steht als Bildunterschrift am Plakat, nicht im Formular —
   es kommt von TMDB und wird nicht von Hand geändert. */
.bildfeld__jahr {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-align: center;
  color: var(--mute);
}
.bildfeld__vorschau {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--kante-leise);
  border-radius: 8px;
  background: linear-gradient(160deg, #1B1A22, #0A0A0D);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.bildfeld__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bildfeld__leer {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5E5A70;
  text-align: center;
  padding: .3rem;
}
.bildfeld__rechts { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.bildfeld__aktionen { display: flex; gap: .4rem; flex-wrap: wrap; }
.bildfeld__aktionen .knopf { padding: .42rem .7rem; font-size: .68rem; }

/* Genre */
.marken { display: flex; flex-wrap: wrap; gap: .4rem; }
.marke {
  border: 1px solid var(--kante-leise);
  border-radius: 999px;
  padding: .22rem .75rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--chalk);
  background: rgba(255, 255, 255, .04);
}

/* Beschreibung — kommt von TMDB, wird nicht bearbeitet */
/* Gedeckelt, damit eine lange Inhaltsangabe nicht alles darunter aus
   dem Blick schiebt. Was nicht hineinpasst, rollt in sich weiter. */
.lesetext {
  font-size: .92rem;
  line-height: 1.6;
  color: #C7C3D4;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--kante-leise);
  border-left: 2px solid var(--akzent);
  border-radius: 8px;
  padding: .85rem .95rem;
  max-height: 11rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Besetzung */
.riege {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .6rem;
}
.riege__person { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
/* Kacheln im Format der TMDB-Portraits (2:3) — so wird nichts
   beschnitten und das Bild füllt die Fläche ganz aus. */
.riege__bild {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--kante-leise);
  background: linear-gradient(160deg, #1B1A22, #0A0A0D);
  display: grid;
  place-items: center;
  transition: border-color var(--takt);
}
.riege__person:hover .riege__bild { border-color: var(--akzent); }

/* Absolut positioniert, weil sich `height: 100%` an einer aus
   aspect-ratio abgeleiteten Höhe nicht auflöst — das Bild ragte sonst
   unten heraus und wurde abgeschnitten. */
.riege__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.riege__kuerzel {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--mute);
}
.riege__name {
  font-size: .68rem;
  line-height: 1.25;
  text-align: center;
  color: var(--mute);
}

/* ── 10 TMDB-Suche ──────────────────────────────────────────────── */
.funde {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .8rem .9rem .7rem;
  border: 1px solid var(--kante-leise);
  border-radius: var(--rand);
  background: rgba(255, 255, 255, .03);
  animation: aufblenden .22s ease both;
}
.funde__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.funde__stand {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}
.funde__stand--fehler { color: #FF8A8A; }
.funde__zu {
  background: none;
  border: 0;
  padding: .2rem;
  line-height: 1;
  font-size: .9rem;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt);
}
.funde__zu:hover { color: var(--chalk); }

.funde__liste {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-height: 17rem;
  overflow-y: auto;
}
.funde__liste:empty { display: none; }

.funde__hinweis { font-size: .8rem; line-height: 1.45; color: var(--mute); }
.funde__hinweis code { font-family: var(--mono); font-size: .95em; color: var(--akzent); }
.funde__hinweis a { color: var(--akzent); }
.funde__quelle { font-size: .64rem; line-height: 1.35; color: #5E5A70; }

.fund {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: .7rem;
  align-items: start;
  text-align: left;
  padding: .45rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  transition: background var(--takt), border-color var(--takt);
}
.fund:hover { background: rgba(255, 255, 255, .05); border-color: var(--akzent); }

/* Schon in der Sammlung — anwählbar bleibt es, aber man sieht es sofort */
.fund--schon { opacity: .62; }
.fund--schon:hover { opacity: 1; }
.fund__stern {
  margin-right: .35em;
  color: var(--lamp);
  font-size: .9em;
}

.fund__bild {
  position: relative;
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(160deg, #1B1A22, #0A0A0D);
}
.fund__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fund__bild--leer::after { content: "—"; font-family: var(--mono); color: #5E5A70; }

.fund__text { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.fund__titel { font-weight: 600; font-size: .95rem; line-height: 1.2; color: var(--chalk); }
.fund__meta {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}
.fund__zeile {
  font-size: .76rem;
  line-height: 1.35;
  color: var(--mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 9b Profil ──────────────────────────────────────────────────── */
.profil__kopf { display: flex; align-items: center; gap: 1.1rem; }
.profil__bild { width: 5rem; height: 5rem; font-size: 2.4rem; }
.profil__bild .kuerzel { font-size: 1.7rem; }

.profil__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFF;
}
.profil__zahlen {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}

.symbole { display: flex; flex-wrap: wrap; gap: .4rem; }
.symbol {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--kante-leise);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color var(--takt), background var(--takt), transform .12s ease;
}
.symbol:hover { transform: translateY(-2px); border-color: var(--kante); }
.symbol[aria-checked="true"] {
  border-color: var(--akzent);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 12px color-mix(in srgb, var(--akzent) 40%, transparent);
}

.zaehler {
  font-family: var(--mono);
  font-size: .95em;
  color: var(--akzent);
  letter-spacing: .04em;
}

/* Filme links, Serien rechts — bis es zu schmal wird */
/* Die beiden Bereiche im Profil. Kleiner als die Hauptreiter oben —
   das hier ist eine Unterteilung, keine zweite Navigation. */
.unterreiter {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--kante-leise);
}

.unterreiter__knopf {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: .4rem .8rem .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt);
}
.unterreiter__knopf:hover { color: var(--chalk); }
.unterreiter__knopf[aria-selected="true"] {
  color: var(--chalk);
  border-bottom-color: var(--akzent);
}

.bestenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.bestenliste__zeile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: center;
  padding: .6rem .8rem;
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
}

.bestenliste__wert {
  font-family: var(--mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--birne);
  text-shadow: 0 0 14px color-mix(in srgb, var(--birne) 35%, transparent);
}

.bestenliste__text { display: flex; flex-direction: column; gap: .15rem; }

.bestenliste__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--chalk);
}

.bestenliste__wie {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .02em;
  color: var(--mute);
}

.bestenliste__leer {
  padding: .8rem 0;
  font-size: .85rem;
  color: var(--mute);
}

.toplisten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.topliste { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; counter-reset: platz; }
.topliste li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .45rem;
  border: 1px solid var(--kante-leise);
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
}
.topliste li::before {
  counter-increment: platz;
  content: counter(platz);
  min-width: 1.2rem;
  text-align: right;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--akzent);
  flex: 0 0 auto;
}
.topliste__bild {
  width: 26px;
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(160deg, #1B1A22, #0A0A0D);
  flex: 0 0 auto;
}
.topliste__bild img { width: 100%; height: 100%; object-fit: cover; }

.topliste__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.topliste__titel {
  font-size: .84rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topliste__jahr { font-family: var(--mono); font-size: .64rem; color: var(--mute); }

.topliste__knoepfe { display: flex; gap: .15rem; flex: 0 0 auto; }
.topliste__knopf {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: .62rem;
  line-height: 1;
  color: var(--mute);
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt), background var(--takt);
}
.topliste__knopf:hover:not(:disabled) {
  color: var(--chalk);
  border-color: var(--kante-leise);
  background: rgba(255, 255, 255, .05);
}
.topliste__knopf:disabled { opacity: .22; cursor: default; }
.topliste__knopf--weg:hover:not(:disabled) { color: #FF8A8A; border-color: #FF8A8A; }

.topliste__leer { font-size: .84rem; color: var(--mute); padding: .3rem 0; line-height: 1.4; }
.topliste__leer::before { content: none; }

/* ── 10b Fuß ────────────────────────────────────────────────────── */
.fuss {
  position: relative;
  z-index: 1;
  max-width: 82rem;
  margin: 0 auto;
  padding: 1.4rem 1.5rem 1.7rem;
  border-top: 1px solid var(--kante-leise);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

/* Ohne den TMDB-Hinweis bleibt nur das Impressum stehen. „space-between"
   schöbe es an den linken Rand, wo es wie vergessen aussähe — allein
   gehört es in die Mitte. */
.fuss--schlicht { justify-content: center; }

/* Dasselbe Licht wie am Rand der Karten, nur geradeaus statt im Kreis:
   eine kleine Kugel wandert auf der Trennlinie von links nach rechts.
   An beiden Enden blendet sie weg, damit der Rücksprung nicht springt. */
.fuss::before {
  content: "";
  position: absolute;
  top: -1px;                 /* mittig auf der 1px-Linie */
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glut);
  filter: drop-shadow(0 0 7px var(--glut));
  transform: translate(-50%, -50%);
  animation: kugel-lauf 11s linear infinite;
  pointer-events: none;
}

@keyframes kugel-lauf {
  0%       { left: 0;    opacity: 0; }
  8%, 92%  { opacity: 1; }
  100%     { left: 100%; opacity: 0; }
}

/* ── Songquiz: der Ausschlag statt der Kugel ────────────────────── */

/* Auf allen anderen Reitern wandert eine kleine Kugel über die
   Trennlinie. Beim Songquiz passt das nicht: dort geht es um Ton, und
   Ton sieht man als Ausschlag. Aus der Kugel wird deshalb eine
   Wellenform, die von der Linie nach oben und unten ausschlägt und
   seitwärts durchläuft.

   Die Balken stecken als SVG im Hintergrundbild und wiederholen sich
   waagerecht; bewegt wird nur die Bildposition. Das ist billiger als
   zwanzig Elemente und läuft auf der Grafikkarte.

   Kein Ausblenden an den Enden wie bei der Kugel — das Muster
   wiederholt sich nahtlos, es gibt keinen Rücksprung zu verstecken. */
/* Der Fuß steht neben `.app`, nicht darin — deshalb einmal
   absteigend und einmal über den Geschwister-Verbinder. */
.app[data-typ="songquiz"] .kopf::after,
.app[data-typ="songquiz"] ~ .fuss::before {
  width: 100%;
  height: 26px;
  border-radius: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'><g fill='%238A6EF0'><rect x='0' y='17' width='2' height='6' rx='1'/><rect x='8' y='13' width='2' height='14' rx='1'/><rect x='16' y='8' width='2' height='24' rx='1'/><rect x='24' y='15' width='2' height='10' rx='1'/><rect x='32' y='4' width='2' height='32' rx='1'/><rect x='40' y='11' width='2' height='18' rx='1'/><rect x='48' y='16' width='2' height='8' rx='1'/><rect x='56' y='6' width='2' height='28' rx='1'/><rect x='64' y='14' width='2' height='12' rx='1'/><rect x='72' y='9' width='2' height='22' rx='1'/><rect x='80' y='2' width='2' height='36' rx='1'/><rect x='88' y='12' width='2' height='16' rx='1'/><rect x='96' y='7' width='2' height='26' rx='1'/><rect x='104' y='15' width='2' height='10' rx='1'/><rect x='112' y='10' width='2' height='20' rx='1'/><rect x='120' y='5' width='2' height='30' rx='1'/><rect x='128' y='14' width='2' height='12' rx='1'/><rect x='136' y='11' width='2' height='18' rx='1'/><rect x='144' y='16' width='2' height='8' rx='1'/><rect x='152' y='8' width='2' height='24' rx='1'/></g></svg>") no-repeat center / 160px 100%;
  filter: drop-shadow(0 0 6px rgba(138, 110, 240, .55));
  opacity: .75;
}

.app[data-typ="songquiz"] .kopf::after {
  transform: translateY(50%);
  animation: welle-lauf 9s linear infinite reverse;
}

.app[data-typ="songquiz"] ~ .fuss::before {
  transform: translateY(-50%);
  animation: welle-lauf 9s linear infinite;
}

/* Ein einziger Ausschlag wandert durch, nicht ein Muster ohne Ende —
   so bleibt es die eine Kugel von früher, nur als Welle. Start und
   Ziel liegen außerhalb, damit sie am Rand nicht abgeschnitten
   auftaucht. */
@keyframes welle-lauf {
  from { background-position-x: -170px; }
  to   { background-position-x: calc(100% + 170px); }
}

/* Satz und Logo bleiben in einer Zeile. Die Schriftgröße gibt so weit
   nach, wie es die Fensterbreite verlangt — erst unter 560px darf der
   Satz umbrechen, sonst müsste die Seite seitwärts scrollen. */
/* Der IGDB-Absatz und der von Wikidata sind Zwillinge des TMDB-
   Absatzes — es steht nie mehr als einer da, also haben alle drei
   dieselbe Form. */
.fuss__tmdb,
.fuss__igdb,
.fuss__wikidata {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  font-size: clamp(.56rem, 1.35vw, .72rem);
  line-height: 1.4;
  color: #5E5A70;
}
.fuss__tmdb span,
.fuss__igdb span,
.fuss__wikidata span { white-space: nowrap; }

/* Der Rückverweis im Satz selbst — so leise wie der Satz, aber als
   Link erkennbar, sobald man darüberfährt. */
.fuss__igdb span a,
.fuss__wikidata span a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fuss__igdb span a:hover,
.fuss__igdb span a:focus-visible,
.fuss__wikidata span a:hover,
.fuss__wikidata span a:focus-visible { color: var(--chalk); }

.fuss__logo {
  display: block;
  flex: 0 0 auto;
  opacity: .85;
  transition: opacity var(--takt);
}
.fuss__logo:hover { opacity: 1; }
.fuss__logo img { width: clamp(58px, 8vw, 88px); height: auto; }

/* Das IGDB-Logo ist deutlich breiter als hoch (330 × 159), das von TMDB
   fast quadratisch (96 × 69). Auf dieselbe Breite gebracht wäre es nur
   halb so hoch — und weil die beiden nie zugleich, aber abwechselnd
   dastehen, spränge der Fuß bei jedem Reiterwechsel um zwanzig Pixel.
   Deshalb hier über die Höhe: dieselben Werte, die die Klammer oben
   für TMDB ergibt, nur direkt gesetzt.

   Die Marke kommt als schwarze Schrift auf Durchsichtigem — auf dieser
   Seite also unsichtbar. Sie bekommt deshalb ihre eigene weiße Fläche,
   knapp umlaufend, damit es nach einer Plakette aussieht und nicht nach
   einem Loch. Umfärben wäre die leisere Lösung, ändert aber eine fremde
   Marke; das steht uns nicht zu.

   Die Höhe ist so gewählt, dass Bild PLUS Polsterung genau das ergibt,
   was die Klammer oben für TMDB liefert — sonst spränge der Fuß
   wieder, nur diesmal andersherum. */
.fuss__igdb .fuss__logo img {
  width: auto;
  height: clamp(31px, 4.35vw, 52px);
  background: #FFF;
  padding: .35rem .5rem;
  border-radius: 6px;
  box-sizing: content-box;
}

.fuss__recht {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
}
.fuss__recht a { color: var(--mute); text-decoration: none; }
.fuss__recht a:hover { color: var(--chalk); text-decoration: underline; }

/* ── 10c Impressum ──────────────────────────────────────────────── */
.seite {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}
.seite__marke {
  display: inline-block;
  margin-bottom: 2.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
}
.seite__marke:hover { color: var(--chalk); }

.seite h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFF;
  margin-bottom: 2rem;
}
.seite h2 {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--akzent);
  margin: 2.2rem 0 .7rem;
}
.seite p { margin-bottom: .9rem; line-height: 1.65; color: #C7C3D4; font-size: .94rem; }
.seite p.anschrift { font-family: var(--mono); font-size: .88rem; line-height: 1.8; color: var(--chalk); }
.seite a { color: var(--akzent); }

/* Was noch einzutragen ist, soll man nicht übersehen können */
.luecke {
  display: inline-block;
  padding: .05em .5em;
  border: 1px dashed var(--lamp);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: .85em;
  color: var(--lamp);
}

.merker {
  border: 1px solid var(--lamp);
  border-radius: var(--rand);
  background: rgba(242, 178, 60, .06);
  padding: 1rem 1.2rem;
  margin-bottom: 2.5rem;
}
.merker p { margin: 0; font-size: .88rem; color: var(--chalk); }

/* ── 10b-2 GAMES ────────────────────────────────────────────────────

   Fast nichts Eigenes: Regal, Karte, Werkzeugleiste und Formular
   tragen dieselben Klassen wie in der Sammlung. Hier steht nur der
   Kopf des Bereichs und die Zahl an den Unterreitern.                */

.games__kopf {
  text-align: center;
  margin-bottom: 1.6rem;
}


/* ── WISSEN: Frage, Uhr, vier Antworten ──────────────────────────
   Der Bereich benutzt die Bausteine des Songquiz — .songquiz__auswahl,
   .quiz__feld, .spielfeld, .regler, .schluss. Neu ist nur, was es dort
   nicht gibt: die Frage mit ihren vier Knöpfen und der Erntekasten. */

/* Das Kachelraster von WISSEN hat so viele Spalten, wie es Kacheln
   gibt — höchstens drei, wie beim Filmquiz. Bei den festen drei
   Spalten der Vorlage standen die beiden Kategorien in Spalte eins
   und zwei eines mittigen Dreierblocks und damit sichtbar links von
   der Mitte. `auto-fit` lässt die leere dritte Spur einfallen, und
   dann trägt `justify-content: center` aus der Vorlage wieder. Kommt
   eine dritte Kategorie dazu, ändert sich hier nichts. */
/* Marke und Regler stehen wie überall in zwei Spalten, aber als
   Paar mittig unter der Überschrift: die vier Stufen sind breit,
   die zwei Längen schmal, und ohne diese Zeile hinge der ganze
   Block sichtbar links. */
#wissen-auswahl .quiz__regler { justify-content: center; }

/* Die Erklärzeile ist auf 46 Zeichen begrenzt und in sich mittig
   gesetzt — ohne diese Zeile hinge der begrenzte Kasten aber am
   linken Rand und der mittige Satz mit ihm. Beim Filmquiz erledigt
   das ein `align-items: center` am Elternteil; hier geht das nicht,
   weil Rangliste und Erntekasten ihre volle Breite behalten
   sollen. */
#wissen-regelstand { margin-inline: auto; }

/* Vier Kacheln in einer Reihe. Die Breite ist genau abgezählt, damit
   auto-fit nicht fünf Spalten aufmacht und die Reihe links klebt —
   das Raster soll unter dem Kopf mittig stehen. */
#wissen-feld {
  grid-template-columns: repeat(auto-fit, 150px);
  max-width: calc(4 * 150px + 3 * 2.1rem);
  margin-inline: auto;
}

.wissen__unter {
  margin: .4rem 0 0;
  font-size: .9rem;
  color: var(--mute);
}

/* Wie beim Songquiz ist die Überschrift das Bild. Fehlt es, bleibt
   der Alternativtext stehen — und der ist in derselben Schrift
   gesetzt wie die Überschriften der anderen Bereiche. */
.wissen__logo {
  margin-inline: auto;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 30px rgba(143, 184, 240, .28));
}

.wissen__marke {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--akzent);
}

/* Uhr und Stilllegen-Knopf teilen sich eine rechtsbündige Zeile über
   der Frage. Als absoluter Kasten über der Frage lag die Uhr
   ursprünglich schöner, aber bei langen Fragen wurde es eng, und für
   den zweiten Knopf war dort gar kein Platz. */
.wissen__ecke {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  margin-bottom: .9rem;
  min-height: 46px;
}

/* Gebaut wie die Uhr der Filmquizze, nur ohne den Ring — hier läuft
   kein Standbild darunter, das sie überdecken müsste. */
.wissen__uhr {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--kante);
  border-radius: 50%;
  background: var(--kohle);
}

.wissen__uhr-zahl {
  font-family: var(--mono);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--chalk);
}

/* Dieselbe Schwelle wie in den Filmquizzen: die letzten fünf Sekunden
   färben sich, damit sich beide Familien gleich anfühlen. */
.wissen__uhr--knapp { border-color: #E88B8B; }
.wissen__uhr--knapp .wissen__uhr-zahl { color: #E88B8B; }

.wissen__frage {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--chalk);
}

/* Vier Antworten als zwei Blöcke zu zweit — feste zwei Spalten und
   nicht auto-fit: bei drei Spalten stünde die vierte Antwort allein
   in der zweiten Reihe und sähe aus wie ein Nachzügler. Erst auf dem
   Handy wird daraus eine Spalte.

   Antworten sind verschieden lang — „Turin" neben „Vereinigtes
   Königreich" —, deshalb dehnen sich die Knöpfe auf die gleiche Höhe
   statt auf die gleiche Breite. */
.wissen__antworten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.wissen__antwort {
  width: 100%;
  height: 100%;
  min-height: 3.2rem;
  padding: .8rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--chalk);
  background: var(--kohle);
  border: 1px solid var(--kante);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--takt), background var(--takt),
              transform var(--takt);
}

.wissen__antwort:hover:not(:disabled) {
  border-color: var(--akzent);
  transform: translateY(-1px);
}

/* Nach der Antwort bleiben alle vier stehen und werden nur stumm
   geschaltet: die richtige zu zeigen ist der halbe Sinn der Sache,
   und ein verschwundener Knopf verschöbe die anderen. */
.wissen__antwort:disabled { cursor: default; opacity: .6; }

.wissen__antwort--gut {
  border-color: #7FD98F;
  background: color-mix(in srgb, #7FD98F 14%, var(--kohle));
  opacity: 1;
}

.wissen__antwort--schlecht {
  border-color: #FF8A8A;
  background: color-mix(in srgb, #FF8A8A 12%, var(--kohle));
  opacity: 1;
}

/* Der Stilllegen-Knopf neben der Uhr, zweistufig wie das Löschen
   einer Karte: erst „Wirklich?", dann still. Die Breite steht fest,
   damit die Uhr beim Wechsel der Beschriftung nicht springt. */
.wissen__sperren {
  flex: 0 0 auto;
  min-width: 7.5rem;
  font-size: .78rem;
}

.wissen__sperren--frage { color: #FF8A8A; border-color: #FF8A8A; }

/* Der Erntekasten. Nur die Verwaltung sieht ihn — er holt die Fragen
   bei Wikidata und schreibt in den Vorrat für alle. */
.wissen__ernte {
  margin: 2rem 0 0;
  padding: 1.1rem 1.2rem;
  background: var(--kohle);
  border: 1px dashed var(--kante);
  border-radius: 12px;
}

.wissen__ernte-marke {
  margin: 0;
  font-size: .95rem;
  color: var(--chalk);
}

.wissen__ernte-text {
  margin: .3rem 0 .8rem;
  font-size: .82rem;
  color: var(--mute);
}

.wissen__ernte-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.wissen__ernte-stand {
  margin: .8rem 0 0;
  min-height: 1.2em;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--mute);
}

@media (max-width: 560px) {
  /* Auf dem Handy ist für zwei Spalten kein Platz. */
  .wissen__antworten { grid-template-columns: 1fr; }
  .wissen__uhr { width: 40px; height: 40px; }
  .wissen__ecke { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .wissen__antwort:hover:not(:disabled) { transform: none; }
}
.games__marke {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--akzent);
}

.games__unter {
  margin: .4rem 0 0;
  font-size: .9rem;
  color: var(--mute);
}

/* Die Unterreiter stehen mittig unter dem Kopf — in der Sammlung sitzt
   die Reiterleiste oben, hier gehört sie zum Bereich. */
.games .unterreiter {
  justify-content: center;
  margin-bottom: 1.2rem;
}

/* Luft zwischen Werkzeugleiste und Regal. In der Sammlung kommt sie
   vom Abstand der Leiste, die Werkzeuge und Reiter zusammenhält —
   hier gibt es die nicht, also steht sie direkt dran. Ohne sie sitzen
   die Plakate der Leiste im Nacken. */
.games .werkzeuge { margin-bottom: 1.2rem; }

.games__stand {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .84rem;
  color: var(--mute);
}

/* ── 10c-2 Vorschläge ───────────────────────────────────────────────

   Der Knopf auf dem Plakat, das Fenster mit den Namen, der Hinweis
   nach dem Anmelden. Die Liste im Profil braucht nichts Eigenes — sie
   ist die Staffelzeile aus Abschnitt 8c-2, Zeile für Zeile dieselbe.  */

/* Unten rechts, links vom Stern. Dieselbe runde Form wie seine drei
   Geschwister an den anderen Ecken — es ist derselbe Rang von
   Handgriff, nur in eine andere Richtung: nicht auszeichnen oder
   nachfragen, sondern weitergeben.

   Der Abstand von 2.65rem ist der Stern (1.9) plus sein Rand (0.5)
   plus eine Fuge (0.25). Der Haken der Watchlist sitzt an derselben
   Stelle wie der Stern, deshalb passt der Wert in beiden Fällen. */
.karte__tipp {
  position: absolute;
  right: 2.65rem;
  bottom: .5rem;
  z-index: 3;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(0, 0, 0, .68);
  border: 1px solid var(--kante-leise);
  border-radius: 50%;
  font-size: .82rem;
  line-height: 1;
  color: #6A6580;
  cursor: pointer;
  transition: color var(--takt), border-color var(--takt),
              background var(--takt), transform .12s ease;
}
.karte:hover .karte__tipp { border-color: var(--kante); }
.karte__tipp:hover,
.karte__tipp:focus-visible {
  transform: scale(1.12);
  color: var(--signal);
  border-color: var(--signal);
}
.karte__tipp:disabled { cursor: default; transform: none; }

/* Das Fenster mit den Namen. Schmaler als das Formular — es stellt
   eine Frage, kein Formular. */
.blatt--schmal { width: min(100%, 30rem); }

.tipp__was {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--mute);
}

.tippliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.tippliste__leer {
  padding: .8rem .2rem;
  font-size: .88rem;
  color: var(--mute);
}

.tippknopf {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--kante-leise);
  border-radius: 10px;
  font: inherit;
  color: var(--chalk);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--takt), background var(--takt);
}
.tippknopf:hover:not(:disabled),
.tippknopf:focus-visible {
  border-color: var(--signal);
  background: rgba(255, 255, 255, .06);
}
.tippknopf:disabled { opacity: .45; cursor: default; }

.tippknopf__bild {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--kante-leise);
  background: var(--rauch);
  font-size: 1rem;
}
.tippknopf__bild img { width: 100%; height: 100%; object-fit: cover; }

.tippknopf__name { font-size: .95rem; }

.tippknopf__frei {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--mute);
}
.tippknopf__frei--voll { color: #FF8A8A; }

.tipp__stand {
  margin: 1rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--mute);
}
.tipp__stand--schlecht { color: #FF8A8A; }

.post__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--chalk);
}

/* Die Zahl am Unterreiter. Klein und in der Akzentfarbe — sie sagt
   „hier liegt etwas", nicht „hier ist ein Fehler". */
.unterreiter__zahl {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: .3rem;
  padding: 0 .28rem;
  border-radius: 999px;
  background: var(--signal);
  color: #0A0A0C;
  font-size: .6rem;
  line-height: 1;
}

/* ── 10d Kurzmeldung ────────────────────────────────────────────── */
.meldung {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  z-index: 40;
  transform: translateX(-50%);
  max-width: min(90vw, 34rem);
  padding: .7rem 1.1rem;
  background: #16131F;
  border: 1px solid var(--lamp);
  border-radius: 999px;
  font-size: .84rem;
  line-height: 1.35;
  text-align: center;
  color: var(--chalk);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .8);
  animation: aufblenden .2s ease both;
}

/* ── 11 Bewegung ────────────────────────────────────────────────── */
@keyframes aufblenden {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes karte-auf {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hochfahren {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes durchlauf {
  from { opacity: 1; transform: translateY(-100%); }
  to   { opacity: 0; transform: translateY(100%); }
}
@keyframes stoerung {
  0%   { transform: translate(0, 0); filter: none; }
  25%  { transform: translate(-3px, 1px); filter: hue-rotate(18deg); }
  50%  { transform: translate(2px, -2px); }
  75%  { transform: translate(-1px, 2px); filter: hue-rotate(-12deg); }
  100% { transform: translate(0, 0); filter: none; }
}
@keyframes schwenken-links {
  from { transform: rotate(-18deg); }
  to   { transform: rotate(9deg); }
}
@keyframes schwenken-rechts {
  from { transform: rotate(17deg); }
  to   { transform: rotate(-10deg); }
}
@keyframes treiben {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-150px, -150px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .kino__korn, .kino__staub, .kino__strahl { animation: none; }
  /* Eine Kugel, die nicht wandert, ist nur ein Fleck auf der Linie.
     Ein Ausschlag, der stillsteht, ist immer noch ein Ausschlag —
     der darf bleiben, nur eben ohne zu laufen. */
  .fuss::before, .kopf::after { display: none; }
  .app[data-typ="songquiz"] ~ .fuss::before,
  .app[data-typ="songquiz"] .kopf::after { display: block; }
  .karte:hover { transform: none; }
  .karte:hover .karte__poster { transform: none; }
  .quiz__kachel:hover { transform: none; }
  .memory__kachel:hover { transform: none; }

  /* Der Puls der laufenden Kachel ist das einzige Zeichen dafür, dass
     gerade etwas spielt. Bleibt er stehen, bleibt wenigstens der Rand
     hell — das reicht. */
  .memory__kachel--laeuft { animation: none; }
}

/* ── 12 Breite ──────────────────────────────────────────────────── */
@media (min-width: 721px) {
  .fenster { align-items: center; padding: 2rem; }
  .blatt { border-radius: 18px; }
}

/* Tablet und Handy: das Menü tritt an die Stelle der Reiterleiste.
   Sieben Reiter nebeneinander sind dort keine Leiste mehr, sondern ein
   Versteck — was rechts hinausrollt, findet nur, wer ahnt, dass da noch
   etwas ist. Der Strich unter dem gewählten Reiter geht mit; ohne
   Reiter hat er nichts zu unterstreichen. */
@media (max-width: 900px) {
  .reiter { display: none; }
  .leiste { padding-top: .8rem; }
}

@media (max-width: 720px) {
  .leiste { align-items: stretch; }
  .werkzeuge { width: 100%; }
  .werkzeuge__suche { flex: 1 1 8rem; width: auto; }
  .reiter__knopf { font-size: 1.02rem; padding-inline: .4rem; }

  .riege { grid-template-columns: repeat(3, 1fr); }
  .toplisten { grid-template-columns: 1fr; gap: 1.1rem; }
}

@media (max-width: 560px) {
  .app { padding: 1.2rem 1rem 3rem; }
  .regal { grid-template-columns: repeat(2, 1fr); gap: .8rem; }

  /* Das Brett schrumpft von selbst mit — siehe `.memory`. Nur die Fuge
     tut das nicht: vier Pixel zwischen halb so großen Kacheln sind
     doppelt so viel Luft. */
  .memory { --fuge: 3px; }

  /* Eine Reihe zum Wischen. Sie läuft bis an beide Ränder hinaus —
     eine Karte, die halb am Rand steht, sagt ohne Worte, dass es dort
     weitergeht; ein sauber abschließendes Raster sagt das Gegenteil.

     `proximity` statt `mandatory` beim Einrasten: mandatory reißt
     einem den Daumen an die nächste Karte, auch wenn man nur ein Stück
     schieben wollte. Die Klasse setzt js/app.js, und zwar nur, wenn
     wirklich Karten dastehen — der leere Zustand ist keine Reihe. */
  .regal--reihe {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: -1rem;
    padding-inline: 1rem;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
  }
  /* `pan-x` sperrt die senkrechte Richtung für Wischer, die in der
     Reihe beginnen. Ohne das nimmt ein leicht schräger Daumen die
     Seite mit nach oben oder unten, während die Reihe zur Seite
     läuft — die Plakate wackeln dann beim Wischen. Nach oben und
     unten kommt man über Kopfzeile und Legende, die neben der Reihe
     stehen bleiben. */
  .regal--reihe { touch-action: pan-x; }

  .regal--reihe .karte {
    flex: 0 0 clamp(9rem, 44vw, 12rem);
    scroll-snap-align: start;
  }

  /* Die Werkzeugzeile passt auf eine Zeile — vorher stand der
     Hinzufügen-Knopf hundertvierzig Pixel neben dem Bildschirm und war
     schlicht nicht da. Die Suche gibt nach, der Knopf trägt nur noch
     sein Pluszeichen. */
  .werkzeuge { gap: .4rem; }
  .werkzeuge__suche { flex: 1 1 4rem; width: auto; min-width: 0; }
  .werkzeuge__sortierung {
    flex: 0 1 auto;
    min-width: 0;
    font-size: .8rem;
    padding: .55rem 1.6rem .55rem .55rem;
    background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  }
  /* Der Hinzufügen-Knopf schrumpft auf sein Zeichen — mit dem Wort
     daneben lief er auf schmalen Geräten aus dem Bild. Der Games-Knopf
     steht in derselben Leiste und braucht dasselbe. */
  #neu,
  #games-neu {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;      /* so hoch wie der Pfeil daneben */
    padding: 0;
    justify-content: center;
    font-size: 1.1rem;
  }
  #neu .knopf__wort,
  #games-neu .knopf__wort { display: none; }
  .karte__titel { font-size: .9rem; }
  .karte--ohne-bild .karte__ersatz { font-size: 1.05rem; padding: .7rem .7rem .8rem .8rem; }
  .feld-paar { grid-template-columns: 1fr; }
  .kopf__nutzer { display: none; }
  .bildfeld { grid-template-columns: 72px 1fr; }
  .titelzeile { flex-wrap: wrap; }
  .titelzeile .knopf { width: 100%; }
  .wahl--klein { align-self: flex-start; }

  /* Die Kacheln bleiben 100 px und bleiben zu dritt — enger wird nur
     der Abstand dazwischen. */
  .quiz__logo,
  .songquiz__logo { width: 160px; height: 160px; }
  .quiz__regler { gap: .5rem .7rem; }
  .regler__knopf { padding: .4rem .7rem; font-size: .74rem; }
  .quiz__stand { font-size: .78rem; }

  /* Zwei Knöpfe nebeneinander passen hier nicht mehr neben Bild und
     Text — sie rutschen unter die Zeile und teilen sie sich. */
  .staffelzeile {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: .55rem;
  }
  /* Schmal ist keine Spalte mehr für die Logos übrig. Sie rücken unter
     den Text und bleiben rechtsbündig — dort, wo auf breiten Schirmen
     auch die Knöpfe stehen. */
  .anbieter--zeile {
    grid-column: 2;
    justify-content: flex-start;
  }
  .staffelzeile__knoepfe {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .staffelknopf { flex: 1 1 auto; text-align: center; }

  /* Der Zurück-Knopf frisst sonst die halbe Zeile und presst die
     Überschrift auf vier Zeilen. */
  .spiel__kopf { grid-template-columns: 1fr; justify-items: center; gap: .7rem; }
  .spiel__kopf .knopf { justify-self: start; }
  .spiel__marke { grid-column: 1; grid-row: auto; }
  .bestwert { align-items: center; }
  .spiel__logo { width: 56px; height: 56px; }
  .spiel__titel { grid-column: 1; grid-row: auto; font-size: 1.05rem; }
  .spiel__leiste { flex-wrap: wrap; gap: .4rem .8rem; }
  .raten { flex-direction: column; }
  .raten__knoepfe { width: 100%; }
  .raten .knopf { flex: 1 1 0; }
  .uhr { width: 42px; height: 42px; top: .45rem; right: .45rem; }
  .uhr__zahl { font-size: .9rem; }
  .gesucht { grid-template-columns: 110px 1fr; gap: 1rem; }
  .gesucht__titel { font-size: 1.15rem; }
  .wahlreihe { grid-template-columns: 1fr; }

  /* Vier Plakate nebeneinander wären hier daumennagelgroß. */
  .imposter { padding: .8rem; }
  .imposter__feld { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .imposter__frage { padding-right: 3.2rem; font-size: .85rem; }

  /* Das Duell bleibt nebeneinander — gegenüberstehen ist der Witz.
     Schmaler werden nur die Plakate. */
  .duell { padding: .8rem; }
  .duell__paar { gap: .5rem; }
  .duell__plakat { max-width: 108px; }
  .duell__titel { font-size: .82rem; }
  .duell__jahr { font-size: 1.15rem; }
  .duell__frage { font-size: .84rem; }
  .duell__wahl { width: 100%; }
  .duellknopf { flex: 1 1 0; min-width: 0; padding: .8rem .6rem; }

  /* Sechs nebeneinander wären auf dem Handy briefmarkengroß. */
  .besetzung { padding: .8rem; }
  .reihe { grid-template-columns: repeat(3, 1fr); min-height: 250px; }
  .enthuellung__reihe { grid-template-columns: repeat(3, 1fr); }
  .darsteller__name { font-size: .68rem; }
  .staffel td { padding-right: 1.2rem; }
  .staffel th { padding-right: .6rem; }
  .ende__zahlen { gap: 1.6rem; }
  .ende__zeile { grid-template-columns: 1.2rem 1fr; }
  .ende__tipp { grid-column: 2; }
  /* Die Kacheln geben ein Drittel ab, die Spalten bleiben so breit wie
     bisher: der Name steht über der Kachel und braucht seine Breite
     weiter, sonst bräche „Das schrittweise Enthüllungs-Rätsel" auf
     sechs Zeilen um. Die Kachel steht mittig in ihrer Spalte. */
  .quiz__feld { grid-template-columns: repeat(3, 100px); gap: 1.1rem .55rem; }
  /* Auf dem Handy zwei mal zwei: vier Kacheln nebeneinander wären
     schmaler als der Daumen, der sie treffen soll. */
  #wissen-feld {
    grid-template-columns: repeat(auto-fit, 100px);
    max-width: calc(2 * 100px + 1 * .55rem);
  }
  .quiz__kachel { width: 67px; height: 67px; }
  .quiz__nummer { font-size: 1.5rem; }
  .quiz__name { font-size: .72rem; letter-spacing: .03em; }

  /* Der Schriftzug oben darf zurücktreten — er sagt einem nichts, was
     man nicht schon weiß, und nimmt die Zeile mit dem Klapper ein. */
  .kopf__marke .bannerbild { max-width: 11rem; }

  /* Abgemeldet wird auf dem Handy im Menü. Zwei Wege hinaus, von denen
     einer die Kopfzeile sprengt, sind einer zu viel. */
  #abmelden { display: none; }

  /* Auf dem Handy passt der Satz nicht mehr neben das Logo. Umbrechen
     ist immer noch besser, als die Seite seitwärts zu schieben. */
  .fuss { flex-direction: column; align-items: flex-start; padding: 1.6rem 1rem 2rem; }
  .fuss__tmdb,
  .fuss__igdb { flex-wrap: wrap; font-size: .68rem; }
  .fuss__tmdb span,
  .fuss__igdb span { white-space: normal; }

  /* Ein Kreis wird auf schmalen Geräten zur Zwangsjacke — hier lieber
     eine stark gerundete Kachel, damit das Formular atmen kann. */
  .tuner__karte {
    aspect-ratio: auto;
    width: min(94vw, 26rem);
    border-radius: 30px;
    padding: 2.4rem 1.7rem;
  }

  /* Der schwarze Ring und der Glow darin müssen die Form mitmachen.
     Blieben sie bei 50 %, würde aus dem Kreis auf der hohen Kachel eine
     Ellipse — und deren Rand liefe quer durch den Inhalt. Die Radien
     sind die der Kachel minus dem jeweiligen Einzug, sonst säße die
     Rundung nicht auf der Rundung. */
  .tuner__karte::before { border-radius: 21px; }
  .tuner__karte.umkreist::after { border-radius: 17px; }
}