/* Animeregal Online, handgeschrieben.
   Bewusst ohne Tailwind und ohne Bauschritt: auf dem Webhosting gibt es
   kein Node, und eine Datei, die einfach mit hochgeladen wird, kann beim
   Uebertragen nicht kaputtgehen. */

:root {
  --ink-900: #0d0a14;
  --ink-800: #14101f;
  --ink-700: #1b1629;
  --ink-600: #241d36;
  --border: rgba(255, 255, 255, 0.10);
  --text: #f2eefb;
  --text-dim: #a79fc0;
  --accent: #f47521;
  --accent-soft: rgba(244, 117, 33, 0.22);
  --grape: #9b6dff;
  --green: #2fcf7a;
  --red: #ff5c6c;
  /* Vier Toene fuer die Genre-Chips, wie in der lokalen App. Die Farbe
     wird aus dem Namen abgeleitet und bleibt damit je Genre gleich. */
  --pink: #ff6ea9;
  --teal: #25cfc1;
  --sky: #43b0ff;
  --gold: #ffc63f;
  /* Die drei Ränge der Rangliste. Auf dem dunklen Grund muss Silber
     deutlich heller sein als der Fließtext, sonst liest es sich wie
     ausgegraut statt wie zweiter Platz. */
  --silber: #c8cdd6;
  --bronze: #cd7f4a;
  --ink-500: #3a3252;
  /* Crunchyroll traegt das Orange des Akzents, ADN sein Blau. Werte aus
     der lokalen App uebernommen, damit beide Fassungen gleich aussehen. */
  --adn: #2f7fe0;
  --adn-hell: #5aa0ff;
  --r-sm: 8px;
  --r-md: 14px;
  --r-pill: 999px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(244, 117, 33, 0.18), transparent 60%),
    radial-gradient(50% 45% at 88% 8%, rgba(155, 109, 255, 0.20), transparent 60%),
    var(--ink-900);
  background-attachment: fixed;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Kopfzeile ─────────────────────────────────────────────────────── */
/* Kopfzeile mit demselben schimmernden Verlauf wie die lokale App auf
   Stufe "knallbunt". */
header.top {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 22px;
  background:
    linear-gradient(92deg, rgba(244, 117, 33, 0.12), rgba(155, 109, 255, 0.12) 60%, rgba(67, 176, 255, 0.12)),
    rgba(20, 16, 31, 0.72);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 21px; font-weight: 800; letter-spacing: -0.3px;
  color: var(--text); text-decoration: none;
}
.brand-logo { width: 34px; height: 34px; display: block; flex: none; }
/* Der Schriftzug im Farbverlauf. `background-clip: text` faerbt die
   Buchstaben, deshalb muss die eigene Textfarbe durchsichtig sein. */
.brand-text {
  background: linear-gradient(92deg, #ff9d5c, var(--pink) 45%, var(--grape) 78%, var(--sky));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.brand:hover { text-decoration: none; }
.brand:hover .brand-text { filter: brightness(1.15); }
.top nav { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.top nav a, .top nav button {
  padding: 8px 14px; border-radius: var(--r-pill);
  color: var(--text-dim); font-size: 14px; font-weight: 600;
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font);
}
.top nav a:hover, .top nav button:hover {
  color: var(--text); background: var(--ink-600); text-decoration: none;
}
.top nav a.aktiv { color: var(--accent); background: var(--accent-soft); }

main { padding: 26px 22px 60px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.4px; }
h2 { font-size: 19px; margin: 26px 0 10px; }
.unterzeile { color: var(--text-dim); margin: 0 0 22px; font-size: 14.5px; }

/* ── Karten und Formulare ──────────────────────────────────────────── */
.karte {
  background: rgba(27, 22, 41, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: var(--shadow);
}
.schmal { max-width: 440px; margin: 40px auto; }

label { display: block; font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 14px 0 5px; }
/* ALLE Eingabefelder, nicht einzeln aufgezaehlte Typen.
   Vorher standen hier nur text, email und password. Damit sahen dreizehn
   Zahlenfelder, drei Suchfelder, zwei Adressfelder und ein Datumsfeld
   aus wie vom Browser mitgeliefert: heller Rand, eckig, fremde Schrift.
   Die Ausnahmen sind Knoepfe und Haekchen, die ihre eigene Gestalt
   haben. So ist auch ein spaeter dazukommender Feldtyp gleich dabei. */
/* `:where(...)` und nicht `:not(...)` direkt: Jedes `:not()` zaehlt die
   Spezifitaet seines Arguments mit, fuenf davon haetten diese Regel
   staerker gemacht als jede Klasse. Ein `input.unbekannt` haette dann
   keinen roten Rand bekommen, obwohl es spaeter im Stilbogen steht.
   `:where()` zaehlt null und laesst Zustandsklassen gewinnen. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file])),
select, textarea {
  width: 100%; padding: 11px 13px;
  background: var(--ink-800); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font); font-size: 14.5px;
}

/* Die kleinen Drehpfeile an Zahlenfeldern passen nicht ins Bild und
   verengen das Feld. Getippt wird hier ohnehin. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hinweis { color: var(--text-dim); font-size: 12.5px; margin-top: 5px; }

.knopf {
  display: inline-block; cursor: pointer;
  padding: 11px 20px; border-radius: var(--r-pill);
  background: var(--accent); color: #1a0f04;
  border: 1px solid var(--accent);
  font-family: var(--font); font-weight: 700; font-size: 14.5px;
}
.knopf:hover { filter: brightness(1.08); text-decoration: none; }
/* Crunchyroll-Orange ist der Standard, ADN traegt sein Blau. */
.knopf.adn { background: var(--adn); border-color: var(--adn); color: #f2f7ff; }
.knopf.stumm { background: var(--ink-600); color: var(--text); border-color: var(--border); }
.knopf.stumm:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.knopf.breit { width: 100%; margin-top: 20px; }

/* Trenner zwischen Formular und Anmeldediensten */
.trenner {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 16px; color: var(--text-dim); font-size: 13px;
}
.trenner::before, .trenner::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
/* ── Anmeldedienste ────────────────────────────────────────────────── */
/* Jeder Dienst traegt seine eigene Farbe, damit man ihn am Fleck erkennt
   und nicht erst den Text lesen muss. Google bleibt bewusst weiss statt
   blau: Weiss ist einer der offiziellen Google-Knopfstile, hebt sich auf
   der dunklen Seite am staerksten ab und laesst dem bunten G seine
   Wirkung. Die Logos stecken als SVG im Dokument, siehe
   partials/social-knoepfe.blade.php. */
.social { display: flex; flex-direction: column; gap: 10px; }

.dienst {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 600; font-size: 14.5px; text-align: center;
  transition: filter .12s ease, transform .12s ease;
}
.dienst:hover { filter: brightness(1.07); text-decoration: none; }
.dienst:active { transform: translateY(1px); }

/* Feste Groesse, sonst zieht Flexbox das Zeichen bei langen
   Uebersetzungen schmal. */
.dienst-zeichen { width: 19px; height: 19px; flex: 0 0 19px; }

.dienst-discord { background: #5865f2; color: #ffffff; }
.dienst-google  { background: #ffffff; color: #1f1f1f; }

.postfach-adresse {
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--ink-600); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; word-break: break-all;
}

.fehler {
  background: rgba(255, 92, 108, 0.14); border: 1px solid rgba(255, 92, 108, 0.4);
  color: #ffc4ca; border-radius: var(--r-sm); padding: 11px 14px;
  font-size: 14px; margin-bottom: 16px;
}
.fehler ul { margin: 0; padding-left: 18px; }
.erfolg {
  background: rgba(47, 207, 122, 0.14); border: 1px solid rgba(47, 207, 122, 0.4);
  color: #b6f2d2; border-radius: var(--r-sm); padding: 11px 14px;
  font-size: 14px; margin-bottom: 16px;
}

/* ── Einstellungen ─────────────────────────────────────────────────── */
h2.abschnitt {
  margin: 34px 0 8px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.karte > h2.abschnitt:first-of-type { border-top: none; padding-top: 0; margin-top: 26px; }

.wege { list-style: none; margin: 0 0 4px; padding: 0; }
.wege li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.wege li:last-child { border-bottom: none; }
.wege li > div { flex: 1; min-width: 0; }
.wege strong { display: block; font-size: 14.5px; }
.wege .hinweis { margin-top: 3px; }
.wege form { margin: 0; }
/* Rat, kein Alarm: Ein einziger Anmeldeweg ist erlaubt, aber es sollte
   einem bewusst sein. Deshalb der ruhige Ton statt der Fehlerfarbe. */
.wege-rat {
  margin: 10px 0 0; padding: 10px 14px;
  border-left: 3px solid var(--grape);
  background: rgba(155, 109, 255, 0.10);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-dim); font-size: 13px; line-height: 1.55;
}
/* Gar kein Anmeldeweg ist kein Rat mehr, sondern ein Problem: Nach dem
   Abmelden kommt dieses Konto nicht zurueck. Deshalb die Warnfarbe und
   der volle Kontrast statt des gedaempften Grautons. */
.wege-rat.dringend {
  border-left-color: var(--red);
  background: rgba(255, 92, 108, 0.12);
  color: var(--text);
}
.wege code {
  background: var(--ink-800); border-radius: var(--r-sm);
  padding: 1px 5px; font-size: 12px;
}

.knopf.klein { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.knopf[disabled] { opacity: .4; cursor: not-allowed; }
.knopf[disabled]:hover { border-color: var(--border); color: var(--text); filter: none; }

.notiz {
  margin-top: 24px; padding: 14px 16px;
  background: var(--ink-800); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.notiz p { margin: 0 0 12px; font-size: 13.5px; color: var(--text-dim); }
.notiz form { margin: 0; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Ein Haekchen mit Beschriftung daneben, nicht darunter. */
.schalter {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; font-weight: 600;
}
.schalter input { width: auto; margin: 0; }

/* Ein Schalter, der nichts mehr bewirkt: sichtbar, damit man den Stand
   sieht, aber erkennbar nicht mehr zum Anfassen. */
.schalter.aus { color: var(--text-dim); cursor: default; }
.schalter.aus input { opacity: 0.55; cursor: default; }
.schalter.klein {
  margin-top: 0; font-size: 13px; font-weight: 600;
  color: var(--text-dim); white-space: nowrap;
}

/* Waehrend nachgeladen wird, bleibt das Gitter stehen und wird nur
   blasser. Es wegzublenden liesse die Seite bei jedem Tastendruck
   springen. */
#regal-gitter { transition: opacity .12s ease; }
#regal-gitter.laedt { opacity: .45; }

/* ── Fenster über der Seite ────────────────────────────────────────── */
dialog.fenster {
  width: min(520px, calc(100vw - 32px));
  padding: 22px 24px 26px;
  background: var(--ink-700); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
dialog.fenster::backdrop { background: rgba(6, 4, 12, 0.72); }
.fenster-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.fenster-kopf h2 { margin: 0 0 4px; }

.symbolknopf {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 4px 6px; line-height: 1; font-size: 19px;
  color: var(--text-dim); font-family: var(--font);
  border-radius: var(--r-sm); position: relative;
  transition: color .12s ease, background .12s ease;
}
.symbolknopf:hover { color: var(--text); background: var(--ink-600); }
.symbolknopf .punkt {
  position: absolute; top: -2px; right: -2px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--r-pill); background: var(--accent); color: #1a0f04;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
}

.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.karte-kopf h2 { margin: 0; }

/* ── Sofort-Speichern ──────────────────────────────────────────────── */
.stand-speichern {
  margin: 12px 0 0; font-size: 12.5px; color: var(--green);
}
.stand-speichern.fehlgeschlagen { color: var(--red); }

/* Grosse Sterne auf der Serienseite. */
.sterne.gross { justify-content: flex-start; gap: 6px; margin-bottom: 4px; }
.sterne.gross .stern { font-size: 31px; }

/* ── Statuswahl an der Kachel ──────────────────────────────────────── */
.statuswahl { position: absolute; top: 8px; left: 8px; z-index: 2; }
.statuswahl > summary {
  position: static; cursor: pointer; list-style: none;
  display: inline-block;
}
.statuswahl > summary::-webkit-details-marker { display: none; }
.statuswahl > summary::marker { content: ''; }
.statuswahl[open] > summary { border-color: var(--accent); }
.statuswahl form {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 3;
  display: flex; flex-direction: column; min-width: 132px;
  background: var(--ink-800); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow);
  overflow: hidden; margin: 0;
}
.statuswahl form button {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 8px 12px; text-align: left; white-space: nowrap;
  color: var(--text-dim); font-family: var(--font); font-size: 12.5px; font-weight: 600;
}
.statuswahl form button:hover { background: var(--ink-600); color: var(--text); }
.statuswahl form button.aktiv { color: var(--accent); }

/* ── Meldungen zu einer Serie ──────────────────────────────────────── */
.meldungen { list-style: none; margin: 0 0 20px; padding: 0; }
.meldungen li {
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.meldungen li:last-child { border-bottom: none; }
/* Beschriftung links, Stand und X rechts zusammen.

   Vorher stand hier `space-between`. Mit zwei Elementen sah das richtig
   aus; sobald das X dazukam, zog es die Statusmarke in die Mitte und
   liess 41 Pixel Luft zwischen ihr und dem X. `margin-left: auto` am
   Stand schiebt beide gemeinsam nach rechts, egal ob das X da ist. */
.meldungen .kopf { display: flex; align-items: center; gap: 10px; }
.meldungen .kopf .stand { margin-left: auto; }
.meldungen strong { font-size: 14px; }
.meldungen .text { margin: 7px 0 0; font-size: 13.5px; color: var(--text-dim); }
.meldungen .antwort {
  margin: 8px 0 0; padding: 9px 11px; font-size: 13.5px;
  background: var(--ink-800); border-radius: var(--r-sm);
  border-left: 3px solid var(--accent);
}
.meldungen form { margin-top: 9px; }

/* Der Serientitel steht nur in der Gesamtliste dabei: Im Fenster einer
   Serie weiss man, wo man ist. */
.meldungen .titel {
  display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600;
}

/* Was man noch nicht gelesen hat. Die Marke sitzt IM Text und nicht wie
   `.marke` absolut in einer Kachelecke. */
.meldungen li.neu .antwort { border-left-color: var(--green); }
.meldungen .neu-marke {
  display: inline-block; margin-right: 7px;
  padding: 1px 7px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
  color: var(--green); border: 1px solid var(--green);
}

/* ── Der Steckbrief eines Falls ────────────────────────────────────────
   Das Problem in Lesegroesse, aus strukturierten Angaben. Wer einen Fall
   oeffnet, soll ihn erfassen, ohne den Freitext zu lesen (der womoeglich
   in einer Sprache steht, die er nicht kann). */
/* FARBE: kein Orange hier drin, ausser an echten Verweisen. Orange heisst
   in der Verwaltung durchgehend "hier kann man klicken", und die Art des
   Falls ist eine Beschriftung, kein Knopf. Dieselbe Regel wie bei "Liegt
   bei dir" in v0.35.1. */
.steckbrief {
  margin: 14px 0 18px; padding: 16px 18px;
  background: var(--ink-800); border: 1px solid var(--border);
  border-left: 4px solid var(--grape); border-radius: var(--r-md);
}
.steckbrief .art {
  display: inline-block; margin-bottom: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--grape);
}
.steckbrief .gegenueber {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
}
.steckbrief .seite { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.steckbrief .was {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text-dim);
}
/* Die eigentliche Aussage. Gross genug, um sie im Vorbeigehen zu lesen. */
.steckbrief .gross { font-size: 26px; line-height: 1.15; font-weight: 700; }
.steckbrief .gross.fehlt { color: var(--text-dim); font-weight: 600; font-size: 20px; }
.steckbrief .dazu { font-size: 13px; color: var(--text-dim); }
/* Zaehlt der Anbieter anders als wir, ist genau das der Fall. */
.steckbrief .dazu.achtung { color: var(--gold); font-weight: 600; }
.steckbrief .pfeil {
  align-self: center; font-size: 22px; color: var(--text-dim);
}
.steckbrief .cover-probe {
  width: 64px; border-radius: var(--r-sm); border: 1px solid var(--border);
}
.steckbrief .fundstelle {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13px;
}
/* Stehen zwei Serien untereinander (Dublette), trennt nur die erste
   Zeile den Block ab: Sonst saehe es nach zwei Abschnitten aus. */
.steckbrief .fundstelle + .fundstelle {
  margin-top: 6px; padding-top: 0; border-top: none;
}
/* Der Serienname vor den Kennungen, damit klar ist, wessen sie sind. */
.steckbrief .fundstelle .rolle strong { font-size: 13px; }
.steckbrief .fundstelle code {
  padding: 2px 8px; background: var(--ink-600); border-radius: var(--r-sm);
  font-size: 13px; letter-spacing: 0.3px;
}
/* Beschriftung und Wert bleiben zusammen, auch wenn die Zeile umbricht. */
.steckbrief .fundstelle .paar {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* Der Weg von hier zur Arbeit: Korrekturen, Serie, Konten. Verweise,
   also darf hier Orange stehen. */
.steckbrief .wege {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: 13.5px;
}

/* Die Ticketnummer. Zum Nennen und Wiederfinden, deshalb ueberall in
   derselben Form: Liste, Fall, Karte und beim Melder. */
.ticket {
  display: inline-block; margin-right: 7px;
  padding: 1px 7px; border-radius: var(--r-sm);
  background: var(--ink-600); color: var(--text-dim);
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  vertical-align: middle;
}
h1 .ticket { font-size: 14px; }
.meldungen .ticket { margin: 4px 0 0; }

/* Auf schmalen Fenstern untereinander, der Pfeil zeigt dann nach unten. */
@media (max-width: 560px) {
  .steckbrief .gegenueber { flex-direction: column; gap: 12px; }
  .steckbrief .pfeil { align-self: flex-start; transform: rotate(90deg); }
  .steckbrief .gross { font-size: 22px; }
}

/* In der angehefteten Karte: dieselbe Aussage, nur schmal. Kein eigener
   Kasten mehr, die Karte ist schon einer. */
.steckbrief.schmal {
  margin: 8px 0 10px; padding: 10px 0 0;
  background: none; border: none; border-top: 1px solid var(--border);
  border-radius: 0;
}
.steckbrief.schmal .art { margin-bottom: 8px; font-size: 11px; }
.steckbrief.schmal .gegenueber { flex-direction: column; gap: 8px; }
.steckbrief.schmal .gross { font-size: 19px; }
.steckbrief.schmal .gross.fehlt { font-size: 15px; }
.steckbrief.schmal .pfeil { align-self: flex-start; transform: rotate(90deg); font-size: 15px; }
.steckbrief.schmal .fundstelle { margin-top: 10px; padding-top: 9px; font-size: 12px; }
.steckbrief.schmal .cover-probe { width: 48px; }

/* Der Stand einer Meldung. Farbe sagt auf einen Blick, woran man ist. */
.stand {
  flex: none; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--border); background: var(--ink-800);
}
.stand.open { color: var(--text-dim); }
.stand.in_progress { color: var(--sky); border-color: rgba(67, 176, 255, 0.45); }
.stand.resolved { color: var(--green); border-color: rgba(47, 207, 122, 0.45); }
.stand.rejected { color: var(--text-dim); border-color: rgba(255, 92, 108, 0.35); }

/* ── Kopfleiste des Regals ─────────────────────────────────────────── */
/* Kennzahlen und Reiter teilen sich eine Zeile. Untereinander kostete das
   oberhalb des Regals eine ganze Bildschirmhoehe. */
.regal-kopf {
  display: flex; gap: 18px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.regal-kopf .zahlen { margin: 0; flex: 0 0 auto; }
.regal-kopf .reiter { margin: 0; flex: 1 1 auto; justify-content: flex-end; }
@media (max-width: 700px) {
  .regal-kopf .reiter { justify-content: flex-start; }
}
.reiter .anzahl {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.reiter a.aktiv .anzahl { background: rgba(0, 0, 0, 0.18); }

/* ── Werkzeugleiste im Regal ───────────────────────────────────────── */
.werkzeuge {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.werkzeuge select { flex: 0 1 200px; margin: 0; }
.werkzeuge .knopf { margin-top: 0; }

/* Das Suchfeld traegt denselben Pillen-Rahmen wie die Knoepfe daneben,
   samt Lupe. Ein nacktes Eingabefeld sah daneben wie ein Fremdkoerper aus. */
.suche {
  display: inline-flex; align-items: center; gap: 9px;
  flex: 1 1 240px; min-width: 180px;
  background: var(--ink-800); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 0 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.suche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.suche .lupe { color: var(--text-dim); font-size: 15px; line-height: 1; }
.suche input {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; outline: none; box-shadow: none;
  margin: 0; padding: 10px 0; width: 100%;
  color: var(--text); font-family: var(--font); font-size: 14.5px;
}
.suche input:focus { box-shadow: none; border: none; }
.suche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.filter-leiste {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 18px; color: var(--text-dim); font-size: 13px;
}

/* ── Genre-Chips ───────────────────────────────────────────────────── */
.chips { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

/* Eine Reihe mit Pfeilen links und rechts. Die Pfeile blendet das Skript
   nur ein, wenn wirklich mehr da ist, als hineinpasst. */
.chip-reihe { display: flex; align-items: center; gap: 2px; min-width: 0; }
.chip-reihe.leiste { margin-bottom: 20px; }
.chip-reihe .chips { flex: 1; min-width: 0; }

/* Solange es rechts weitergeht, laeuft die Reihe weich aus. Das zeigt,
   dass da noch etwas kommt, statt einen Chip mitten im Wort zu kappen. */
.chip-reihe.laeuft-aus .chips {
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}

.schieber {
  appearance: none; background: none; border: none; cursor: pointer;
  flex: none; padding: 2px 4px; line-height: 1;
  color: var(--text-dim); font-size: 18px; font-family: var(--font);
  transition: color .12s ease;
}
.schieber:hover { color: var(--accent); }
.schieber[hidden] { display: none; }

@media (pointer: coarse), (max-width: 560px) {
  /* Auf dem Handy wird gewischt. Ein 14 Pixel schmaler Pfeil ist dort
     kaum zu treffen, und auf der Kachel frisst er den Platz, den die
     Genres brauchen. Der weiche Auslauf zeigt weiterhin an, dass rechts
     noch etwas kommt.
     Die Breite steht mit in der Bedingung, weil auf schmalen Fenstern
     dasselbe gilt, egal womit gezeigt wird. */
  .serie .schieber { display: none; }
  .chip-reihe.leiste .schieber { min-width: 30px; min-height: 30px; font-size: 20px; }
}

.chip {
  flex: none; white-space: nowrap;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--ink-800); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; font-weight: 600;
}
.chip:hover { text-decoration: none; border-color: currentColor; }
.chip .anzahl { opacity: .55; margin-left: 3px; }
.chip.ton-0 { color: var(--grape); border-color: rgba(155, 109, 255, 0.42); }
.chip.ton-1 { color: var(--pink); border-color: rgba(255, 110, 169, 0.42); }
.chip.ton-2 { color: var(--teal); border-color: rgba(37, 207, 193, 0.42); }
.chip.ton-3 { color: var(--sky); border-color: rgba(67, 176, 255, 0.42); }
.chip.aktiv {
  background: var(--accent); border-color: var(--accent);
  color: #1a0f04; font-weight: 700;
}
.chip .x { opacity: .7; margin-left: 4px; }

/* ── Sterne ────────────────────────────────────────────────────────── */
/* Zentriert statt ueber die ganze Breite gezogen: auseinandergerissen
   liest sich eine Fuenfer-Reihe nicht mehr als eine Bewertung. */
.sterne {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  width: 100%; margin: 0 0 9px;
}
.stern {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 0 1px; line-height: 1; font-size: 24px;
  color: var(--ink-500);
  transition: color .12s ease, transform .12s ease;
}
.stern.an { color: var(--gold); }
.stern:hover { color: var(--gold); transform: scale(1.18); }
.sterne.fehlgeschlagen .stern { color: var(--red); }

/* ── Sterne, die kommen und gehen ──────────────────────────────────── */
/* Nur als Antwort auf einen Klick, nie beim Laden einer Seite: So bleibt
   die Bewegung eine Rueckmeldung und wird nicht zur Tapete. Auf einem
   oeffentlichen Profil sind die Sterne ohnehin nur <span> ohne Formular,
   dort greift das Skript gar nicht erst.

   Der Versatz steht als `--verzug` am Element, gesetzt vom Skript. Ohne
   `fill-mode: both` waere der Stern waehrend seiner Wartezeit schon in
   voller Groesse da und wuerde erst danach von vorne anfangen. */
.stern.zaehlt-rein {
  animation: stern-rein 260ms cubic-bezier(.2, .9, .3, 1.35) both;
  animation-delay: var(--verzug, 0ms);
}

@keyframes stern-rein {
  0%   { opacity: 0; transform: scale(0); text-shadow: none; }
  /* Der Hoehepunkt: kurz ins Weissliche mit weichem Schein, damit der
     Einschlag Gewicht bekommt, ohne bunt zu werden. */
  55%  { opacity: 1; transform: scale(1.5); color: #fff4d2;
         text-shadow: 0 0 14px rgba(255, 198, 63, .95), 0 0 4px rgba(255, 255, 255, .8); }
  100% { opacity: 1; transform: scale(1); text-shadow: none; }
}

/* Zerspringen: vier Keile des Sterns fliegen auseinander. Sie liegen
   genau ueber dem Knopf, waehrend darunter schon der graue Stern steht.
   Es sieht also aus, als bräche das Gold ab und gäbe den leeren Stern
   frei. Vier echte Kopien, weil ein Textzeichen sich nicht teilen laesst
   und ::before/::after nur zwei waeren. */
.stern { position: relative; }

.splitter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: inherit; line-height: 1; color: var(--gold);
  pointer-events: none;
  animation: splitter-weg 340ms cubic-bezier(.25, .6, .35, 1) forwards;
  animation-delay: var(--verzug, 0ms);
}

/* Jeder Keil bekommt sein Viertel und seine eigene Richtung. Die Werte
   sind bewusst ungleich: gleichmaessig auseinanderfliegende Teile sehen
   nach Blume aus, nicht nach Bruch. */
.splitter:nth-child(1) { clip-path: polygon(50% 50%, 0 0, 100% 0);     --dx: -3px;  --dy: -17px; --dreh: -38deg; }
.splitter:nth-child(2) { clip-path: polygon(50% 50%, 100% 0, 100% 100%); --dx: 16px;  --dy: -6px;  --dreh: 52deg; }
.splitter:nth-child(3) { clip-path: polygon(50% 50%, 100% 100%, 0 100%); --dx: 5px;   --dy: 15px;  --dreh: 24deg; }
.splitter:nth-child(4) { clip-path: polygon(50% 50%, 0 100%, 0 0);     --dx: -15px; --dy: 9px;   --dreh: -61deg; }

@keyframes splitter-weg {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  35%  { opacity: .95; }
  100% { opacity: 0;
         transform: translate(var(--dx), var(--dy)) rotate(var(--dreh)) scale(.55); }
}

/* Wer im System weniger Bewegung eingestellt hat, bekommt den reinen
   Farbwechsel. Das Skript legt die Splitter dann gar nicht erst an, das
   hier ist nur das Netz darunter. */
@media (prefers-reduced-motion: reduce) {
  .stern.zaehlt-rein { animation: none; }
  .splitter { display: none; }
}

/* Auf dem Handy wird getippt statt geklickt. Die Sterne verteilen sich
   ohnehin ueber die volle Breite, hier nur etwas mehr Hoehe. */
@media (pointer: coarse), (max-width: 560px) {
  .sterne { gap: 6px; }
  .stern { font-size: 26px; padding: 2px; }
}

/* ── Fortschritt ───────────────────────────────────────────────────── */
.fortschritt { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fortschritt .balken {
  flex: 1; height: 5px; border-radius: var(--r-pill);
  background: var(--ink-600); overflow: hidden;
}
.fortschritt .fuellung {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), #ff9d5c);
}
.fortschritt .fuellung.adn {
  background: linear-gradient(90deg, var(--adn), var(--adn-hell));
}
.fortschritt .text {
  color: var(--text-dim); font-size: 11.5px; font-weight: 600;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ── Serien-Detail ─────────────────────────────────────────────────── */
.zurueck { margin: 0 0 14px; font-size: 14px; }

.serie-kopf { display: flex; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; }
.serie-bild { flex: 0 0 190px; }
.serie-bild img {
  width: 190px; border-radius: var(--r-md);
  border: 1px solid var(--border); box-shadow: var(--shadow); display: block;
}
.serie-bild .ersatz {
  width: 190px; aspect-ratio: 2 / 3; display: grid; place-items: center;
  background: var(--ink-700); border-radius: var(--r-md); padding: 12px;
  text-align: center; font-size: 13px; color: var(--text-dim);
}
.serie-info { flex: 1 1 320px; min-width: 260px; }
.serie-info h1 { margin-bottom: 4px; }

.merkmale { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.merkmale span {
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--ink-700); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-dim);
}
.genres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.serie-zahlen { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--text-dim); }
.serie-zahlen strong { color: var(--text); font-size: 17px; }

.serie-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.serie-knoepfe .knopf { margin-top: 0; }

.spalten { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 820px) { .spalten { grid-template-columns: 1fr; } }
.spalten .karte { margin: 0; }
.spalten h2:first-child { margin-top: 0; }

/* Zwei feste Spalten statt eines fließenden Rasters: Links, was man am
   Konto TUT, rechts, was man daran SIEHT. Ohne die Container rutscht
   eine Karte je nach Höhe ihrer Nachbarin mal in die eine, mal in die
   andere Spalte. */
.spalten > .spalte { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.knopf.gefahr:hover { border-color: var(--red); color: var(--red); }

/* Folgenliste */
table.folgen { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.folgen td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.folgen tr:last-child td { border-bottom: none; }
table.folgen .nummer { white-space: nowrap; font-weight: 700; width: 62px; color: var(--text-dim); }
table.folgen .titel { color: var(--text-dim); }
table.folgen .zeit, table.folgen .datum { white-space: nowrap; color: var(--text-dim); text-align: right; }
table.folgen tr.gesehen .nummer { color: var(--green); }
table.folgen tr.gesehen .titel { color: var(--text); }

.marke-klein {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: var(--r-pill); background: var(--ink-600);
  font-size: 10.5px; color: var(--text-dim); vertical-align: middle;
}

.staffeln { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.staffeln li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.staffeln li:last-child { border-bottom: none; }
.staffeln .hinweis { display: inline; margin-left: 6px; }

/* ── Verlauf ───────────────────────────────────────────────────────── */
table.verlauf { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.verlauf th {
  text-align: left; padding: 8px; border-bottom: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
table.verlauf td { padding: 9px 8px; border-bottom: 1px solid var(--border); }
table.verlauf .datum, table.verlauf .zeit { white-space: nowrap; color: var(--text-dim); }
table.verlauf .rechts { text-align: right; }
table.verlauf .hinweis { display: inline; margin-left: 5px; }
table.verlauf tr.gesehen .serie-name a { color: var(--text); }
table.verlauf tr.gesehen .serie-name a:hover { color: var(--accent); }

.blaettern { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 22px; }
.blaettern .knopf { margin-top: 0; }
.knopf.aus { opacity: .3; cursor: default; }

/* ── Regal ─────────────────────────────────────────────────────────── */
.reiter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.reiter a {
  padding: 9px 17px; border-radius: var(--r-pill);
  background: var(--ink-700); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 14px; font-weight: 600;
}
.reiter a:hover { color: var(--text); text-decoration: none; }
.reiter a.aktiv { background: var(--accent); border-color: var(--accent); color: #1a0f04; }

/* ── Welche Rangliste ──────────────────────────────────────────────────
   Die obere Reiterreihe wählt die ART der Rangliste, die untere den
   Zeitraum. Sie ist zurückgenommen gestaltet, damit die beiden Reihen
   nicht wie eine einzige lange Auswahl wirken: gleiche Form, weniger
   Gewicht, und der aktive Reiter trägt nur einen Rahmen statt der
   vollen Akzentfarbe. */
.reiter.arten { margin-bottom: 10px; }
.reiter.arten a {
  padding: 6px 14px; font-size: 13px;
  background: transparent;
}
.reiter.arten a.aktiv {
  background: transparent; color: var(--accent); border-color: var(--accent);
}

/* ── Podest der Anime ──────────────────────────────────────────────────
   Dieselben Glaskarten wie beim Schauzeit-Podest, nur trägt hier ein
   Cover die Karte statt eines Namens. Das Bild ist das, was man
   wiedererkennt, und braucht die Fläche, die dort der Schriftzug hat.

   Der Titel darf zwei Zeilen bekommen und wird danach abgeschnitten:
   Anime-Titel sind gern mal ein ganzer Satz („Banished from the Hero's
   Party, I Decided to Live a Quiet Life in the Countryside"), und eine
   Karte, die sich daran hochzieht, reißt die Reihe auseinander. */
.podest-anime .podest-bild {
  display: block; margin-top: 10px; line-height: 0;
}
.podest-anime .podest-bild img,
.podest-anime .ohne-bild {
  display: block; width: 92px; height: 130px;
  border-radius: var(--r-sm); object-fit: cover;
  background: var(--ink-800);
  border: 1px solid color-mix(in srgb, var(--rang) 38%, var(--border));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .38);
}
.podest-anime a.podest-bild:hover img {
  border-color: var(--rang);
}

.podest-anime .podest-wer {
  font-size: 13.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Der Serientitel in der Farbe seiner Trophäe (Marcus, 05.08.2026).

   ÜBER `--schimmer`, NICHT ÜBER `color`. Im Titel steckt ein
   `.schimmert`-Element: Die Schrift selbst ist durchsichtig, sichtbar
   ist der Verlauf dahinter. Eine `color` am äußeren Element ändert
   daran gar nichts, und mein erster Versuch tat genau das - er war im
   Browser messbar gesetzt und trotzdem unsichtbar.

   DER ANLASS war Marcus' Bildschirm: Bei ihm stand der Titel grau da,
   während die Minutenzahl daneben leuchtete. Beide sind schimmernd
   gebaut, nur trug die Zahl `--schimmer: var(--rang)` und der Titel
   das fast weiße `var(--text)`. Seine Dark-Mode-Erweiterung dämpft
   reines Weiß und lässt Buntfarben in Ruhe; damit war die eine Zeile
   lesbar und die andere nicht.

   Gemessen auf dem Seitengrund rgb(13,10,20): Gold 12,5, Silber 12,3,
   Bronze 6,3. Bronze ist die knappste und liegt immer noch weit über
   den 4,5, die für Fließtext gefordert sind. */
.podest-karte .podest-wer .schimmert { --schimmer: var(--rang, var(--text)); }
.podest-anime .podest-zeit { font-size: 18px; }

/* Gold bekommt das größere Cover. Die Spaltenaufteilung und das
   Umsortieren (Gold in die Mitte) kommen aus den Regeln des
   Schauzeit-Podests weiter unten und gelten hier mit. */
@media (min-width: 620px) {
  .podest-anime .rang-gold .podest-bild img,
  .podest-anime .rang-gold .ohne-bild { width: 112px; height: 158px; }
}

/* ── Beliebteste Anime ─────────────────────────────────────────────────
   Karten mit Cover, wie im Regal, aber flach nebeneinander statt als
   Gitter: Eine Rangliste liest man von oben nach unten, und die Position
   in der Reihe IST die Aussage. Ein Gitter würde sie verwischen. */
.beliebt-liste { list-style: none; padding: 0; margin: 0 0 6px; }
.beliebt-karte { border-bottom: 1px solid var(--border); }
.beliebt-karte:last-child { border-bottom: none; }
.beliebt-karte > a,
.beliebt-karte > div {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 6px; color: var(--text);
}
.beliebt-karte > a:hover { text-decoration: none; background: var(--ink-700); }
.beliebt-karte > a:hover .titel { color: var(--accent); }

/* Der Platz links: eine Zahl, ab Platz 4. Davor steht der Pokal, und der
   bringt seine eigene Größe mit. */
.beliebt-karte .platz-marke {
  flex: 0 0 34px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.beliebt-karte .platz-marke .pokal-huelle { width: 26px; height: 26px; }

.beliebt-karte img,
.beliebt-karte .ohne-bild {
  flex: 0 0 auto; width: 40px; height: 57px;
  border-radius: var(--r-sm); object-fit: cover;
  background: var(--ink-800); border: 1px solid var(--border);
}

.beliebt-karte .titel {
  flex: 1 1 auto; font-size: 14.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.beliebt-karte .kennzahl {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
.beliebt-karte .kennzahl strong { font-size: 14px; }
.beliebt-karte .kennzahl small { color: var(--text-dim); font-size: 12px; }

@media (max-width: 480px) {
  /* Der Titel darf schrumpfen, die Kennzahl nicht: Sie ist der Grund,
     warum die Zeile hier steht. */
  .beliebt-karte .titel { font-size: 13.5px; }
  .beliebt-karte > a, .beliebt-karte > div { gap: 10px; }
}

/* ── Anbieter-Rangliste ────────────────────────────────────────────────
   Kein Podest und keine Platznummern: Bei zwei zählbaren Diensten wäre
   Gold, Silber und Bronze eine Behauptung von Wettbewerb, den es nicht
   gibt. Der Balken zeigt das Verhältnis, die Prozentzahl den Anteil. */
.anbieter-liste { list-style: none; padding: 0; margin: 0; }
.anbieter-liste li {
  padding: 13px 16px; margin-bottom: 8px;
  background: var(--ink-700); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.anbieter-liste .kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* Die ganze Zeile führt zu den dort geschauten Serien.

   Als Overlay-Link statt als <a> um den Inhalt: So bleibt die Zeile
   innen frei für alles, was später dazukommt (Logos, eigene Links), und
   der Balken darunter wird nicht Teil der Klickfläche einer Sache, die
   er nur illustriert. */
.anbieter-liste li.klickbar { position: relative; transition: border-color .15s, background .15s; }
.anbieter-liste li.klickbar:hover { border-color: var(--accent); background: var(--ink-600); }
.anbieter-liste .anbieter-weg { position: absolute; inset: 0; border-radius: var(--r-md); }
.anbieter-liste li.klickbar:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Der Hinweis über der gefilterten Liste, mit dem Weg zurück. */
.filter-hinweis a { margin-left: 8px; }

/* DER DOPPELSCHALTER: zwei Blickwinkel auf DIESELBE Liste, keine zwei
   Listen. Deshalb ein zusammenhängendes Element mit gemeinsamer Fassung
   statt zweier freistehender Pillen wie bei den Reitern darüber. Die
   Form sagt das, bevor jemand den Text liest. */
.sortierwahl {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--ink-700); padding: 2px;
}

/* IM DESKTOP LIEGT ER IM TOTEN RAUM ÜBER DER SILBERKARTE.

   Das Podest hebt die Goldkarte an, links daneben bleiben dadurch rund
   50 Pixel ungenutzt. Der negative Abstand zieht das Podest darunter
   wieder hoch, sodass der Schalter genau dort sitzt, statt der Seite
   eine eigene Zeile zu kosten.

   Keine absolute Positionierung: Die bräuchte einen Bezugspunkt im
   Podest, und der Schalter steht im Dokument davor. So bleibt er ein
   normales Element, das nur seinen Nachbarn heranzieht. */
@media (min-width: 701px) {
  .sortierwahl {
    position: relative; z-index: 1;
    /* Zwei Größen, weil sie zwei verschiedene Dinge tun: Der negative
       Abstand zieht das Podest herauf, `top` setzt den Schalter in die
       Lücke, die dabei entsteht.

       Mehr als -42px bringt nichts: Zwischen Schalter und Podest steht
       das SVG mit den Pokal-Verläufen (Höhe null), und dagegen läuft
       der Abstand. Gemessen, nicht geraten. */
    top: 20px; margin-bottom: -42px;
  }
}
.sortierwahl a {
  padding: 5px 13px; border-radius: var(--r-pill);
  font-size: 12.5px; color: var(--text-dim); text-decoration: none;
  white-space: nowrap; transition: background .15s, color .15s;
}
.sortierwahl a:hover { color: var(--text); text-decoration: none; }

/* Dieselben Farben wie beim aktiven Reiter daneben: dunkle Schrift auf
   Orange. Weiß auf Orange hat zu wenig Kontrast, und die Reihe darüber
   macht es schon richtig. */
.sortierwahl a.aktiv {
  background: var(--accent); color: #1a0f04; font-weight: 600;
}

/* Auf schmalen Bildschirmen steht das Podest untereinander, es gibt also
   keinen toten Raum zum Ausnutzen. Der Schalter behält dort seinen
   eigenen Platz über der Liste. */
@media (max-width: 700px) {
  .sortierwahl { margin-bottom: 14px; }
}
.anbieter-liste strong { font-size: 15px; }

/* Die Markenfarbe als Punkt, nicht als Bild: Eine Dunkelmodus-Erweiterung
   färbt kein CSS um, ein <img> schon. Bleibt auch, wenn die Logos
   irgendwann dazukommen, dann als deren Rahmen. */
.anbieter-liste .punkt {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--marke); flex: 0 0 auto;
}

.anbieter-liste .werte {
  margin-left: auto; display: flex; align-items: baseline; gap: 14px;
  font-variant-numeric: tabular-nums; font-size: 13.5px;
}
.anbieter-liste .zeit { color: var(--text); font-weight: 700; }
.anbieter-liste .folgen { color: var(--text-dim); }
.anbieter-liste .anteil {
  color: var(--text); font-weight: 700; min-width: 58px; text-align: right;
}

.anbieter-liste .balken {
  margin-top: 9px; height: 7px; border-radius: var(--r-pill);
  background: var(--ink-800); overflow: hidden;
}
.anbieter-liste .balken span {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--marke), color-mix(in srgb, var(--marke) 55%, #fff));
}

/* Dienste ohne Zählung: sichtbar, aber erkennbar ohne Wert. Sie ganz
   wegzulassen wäre die schlechtere Wahl, dann sähe die Liste vollständig
   aus, obwohl sie es nicht ist. */
.anbieter-liste li.ruht { background: transparent; opacity: 0.62; }
.anbieter-liste li.ruht strong { font-weight: 600; }
.anbieter-liste .ruht-hinweis { color: var(--text-dim); font-size: 12.5px; }

.anbieter-fuss { margin-top: 14px; }

@media (max-width: 560px) {
  /* Auf schmalen Schirmen bricht die Wertespalte unter den Namen statt
     ihn zu quetschen. */
  .anbieter-liste .werte { margin-left: 0; width: 100%; gap: 12px; }
  .anbieter-liste .anteil { margin-left: auto; }
}

.gitter {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* Verlinkt sind Bild und Titel, nicht die ganze Kachel: Sterne und
   Genre-Chips sind eigene Bedienelemente, und ein Formular in einem Link
   waere ungueltiges HTML. */
.serie {
  display: flex; flex-direction: column; color: var(--text);
  background: var(--ink-700); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.serie:hover { transform: translateY(-3px); border-color: var(--accent); }

/* ── Neue Folge da: wabernder grüner Rand ─────────────────────────────
   Aus der lokalen App übernommen. Ohne ihn muss man jede Kachel einzeln
   lesen, um zu sehen, wo noch etwas offen ist; mit ihm sieht man es beim
   Überfliegen. Grün, weil Orange und Blau schon für die Anbieter stehen. */
.serie.hat-rueckstand {
  animation: rueckstand-waber 2.4s ease-out infinite;
}

@keyframes rueckstand-waber {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 2px rgba(47, 207, 122, 0.5), 0 0 12px 1px rgba(47, 207, 122, 0.4); }
  50%      { box-shadow: var(--shadow), 0 0 0 2px rgba(47, 207, 122, 0.95), 0 0 26px 7px rgba(47, 207, 122, 0.7); }
}

/* Wer Bewegung abgestellt hat, bekommt denselben Rand ohne Puls. Die
   Aussage steckt im Rand, nicht in der Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .serie.hat-rueckstand {
    animation: none;
    box-shadow: var(--shadow), 0 0 0 2px rgba(47, 207, 122, 0.85);
  }
}

/* ── Offen, aber nicht frisch ─────────────────────────────────────────
   Ausstrahlung älter als gestern. Derselbe grüne Rand, aber still und
   dünner. Der Puls sagt "hier ist gerade etwas passiert", und das wäre
   bei einer drei Wochen alten Folge schlicht gelogen. Sichtbar bleiben
   muss sie trotzdem, sonst verschwindet der Rückstand aus dem Blick. */
.serie.hat-offene {
  box-shadow: var(--shadow), 0 0 0 1px rgba(47, 207, 122, 0.45);
}

/* Der Text dazu. Grün wie der Rand, damit beides zusammengehört. */
.serie .rueckstand {
  color: var(--green); font-size: 12px; font-weight: 700;
  margin-bottom: 4px;
}

/* Ruhige Fassung: dieselbe Farbe, zurückgenommen. Nicht grau, denn grau
   liest sich als abgeschaltet, und offen ist es ja weiterhin. */
.serie .rueckstand.ruhig { opacity: 0.75; font-weight: 600; }

/* ── Läuft gerade ─────────────────────────────────────────────────────
   Der Liveticker, aus der lokalen App übernommen. Eigene Farbe, weil er
   das Wabern schlägt: Was gerade läuft, ist näher dran als das, was noch
   aussteht, und beides gleich einzufärben verwischt genau das. */
.serie.laeuft {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 2px var(--accent-soft);
}

.serie .live {
  display: flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 12px; font-weight: 700;
  margin-bottom: 4px;
}

/* Der pulsierende Punkt. Er trägt die Aussage nicht allein, daneben
   steht der Prozentwert im Klartext. */
.serie .live .punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
  animation: live-puls 1.4s ease-out infinite;
}

@keyframes live-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .serie .live .punkt { animation: none; }
}
.serie h3 a { color: var(--text); }
.serie h3 a:hover { color: var(--accent); text-decoration: none; }
.serie .bild { display: block; }
.serie .rumpf { display: flex; flex-direction: column; }
.serie .bild { position: relative; aspect-ratio: 2 / 3; background: var(--ink-600); }
.serie .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.serie .ersatz {
  display: flex; align-items: center; justify-content: center; height: 100%;
  padding: 12px; text-align: center; font-size: 13px; color: var(--text-dim);
}
/* Der Rumpf fuellt die Kachel aus, damit der Fuss unten sitzt. */
.serie .rumpf { padding: 11px 13px 13px; flex: 1; }
.serie h3 {
  margin: 0 0 6px; font-size: 14.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.serie .meta {
  display: flex; justify-content: space-between; gap: 8px;
  color: var(--text-dim); font-size: 12.5px;
}
.serie .meta .season { flex: none; opacity: .8; }

/* Alles ausser dem Titel haengt am Fuss: sonst wandert es mit der
   Titellaenge auf und ab, und eine Reihe Kacheln wirkt unruhig. */
.serie .fuss { margin-top: auto; padding-top: 8px; }
.serie .fortschritt { margin-top: 7px; }

/* Weiterschauen direkt auf der Kachel, in der Farbe des Anbieters. */
.weiter {
  display: block; margin-top: 9px; padding: 8px 10px;
  border-radius: var(--r-pill); text-align: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  border: 1px solid transparent;
}
.weiter.cr { background: var(--accent); color: #1a0f04; }
.weiter.adn { background: var(--adn); color: #f2f7ff; }
.weiter:hover { filter: brightness(1.1); text-decoration: none; }

/* Status links, Quelle rechts. Beide links uebereinander gestapelt
   ueberdeckten sich gegenseitig. */
.marke {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.2px;
  background: rgba(13, 10, 20, 0.82); border: 1px solid var(--border);
  backdrop-filter: blur(3px);
}
.marke.quelle { left: auto; right: 8px; }
.marke.quelle.cr { color: var(--accent); border-color: rgba(244, 117, 33, 0.45); }
.marke.quelle.adn { color: var(--adn-hell); border-color: rgba(47, 127, 224, 0.5); }
.marke.watching { color: var(--accent); }
.marke.completed { color: var(--green); }
.marke.paused { color: var(--grape); }
.marke.dropped { color: var(--red); }

/* Im oeffentlichen Profil sind die Sterne nur Anzeige, keine Knoepfe. */
span.stern { cursor: default; }
span.stern:hover { transform: none; color: inherit; }
span.stern.an:hover { color: var(--gold); }

/* ── Kennzahlen ────────────────────────────────────────────────────── */
.zahlen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
/* KEINE feste Mindestbreite: Die breiteste Zahl im Regal ist vierstellig
   und braucht 51px, die Kachel war 130px breit. Die 39px Luft rechts
   neben jeder Zahl fielen sofort auf, und zu dritt schoben sie die
   Reiter aus der Zeile. Die Kachel richtet sich jetzt nach ihrem Inhalt,
   waechst also mit, wenn die Zahlen laenger werden. */
.zahl {
  background: var(--ink-700); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 16px;
}
.zahl .wert { font-size: 23px; font-weight: 800; letter-spacing: -0.5px; }
.zahl .was { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }

/* Heute und gestern teilen sich eine Kachel: zwei einzelne haetten die
   Reihe auseinandergezogen. */
.zahl.doppelt .paar { display: flex; gap: 14px; }
.zahl .wert.klein { font-size: 17px; }
.zahl .wert.blass { color: var(--text-dim); }
.zahl.doppelt .hinweis { margin-top: 6px; }

.leer { color: var(--text-dim); text-align: center; padding: 60px 20px; }

/* ── Fusszeile ─────────────────────────────────────────────────────── */
footer.unten {
  border-top: 1px solid var(--border); margin-top: 50px;
  padding: 20px 22px; color: var(--text-dim); font-size: 13px;
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}
footer.unten small { opacity: .55; font-size: 12px; cursor: help; }

/* Sprachwahl in der Fusszeile. Klein und unaufdringlich, aber auf jeder
   Seite erreichbar, auch vor dem Anmelden. */
.sprachwahl { display: flex; align-items: center; gap: 8px; margin: 0; }
.sprachwahl select {
  margin: 0; padding: 5px 10px; width: auto;
  font-size: 12.5px; border-radius: var(--r-pill);
  background: var(--ink-800); color: var(--text-dim);
}
.sprachwahl select:focus { color: var(--text); }
.sprachwahl .knopf { margin-top: 0; }

/* Nur fuer Vorleseprogramme sichtbar. */
.wegblende {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .gitter { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  main { padding: 18px 14px 40px; }
  header.top { padding: 12px 14px; }
}

/* ── Verwaltung ────────────────────────────────────────────────────── */
/* Kein eigenes Layout, nur eine eigene Leiste: Der Kopf der Seite bleibt,
   wo er ist, und die Marke daneben macht deutlich, dass hier an Daten
   gearbeitet wird, die ALLEN gehoeren. */
.verwaltung-kopf {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 20px;
  background: var(--ink-700); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
/* Die Marke ist zugleich der Weg zur Übersicht "Was ansteht". Sie behält
   ihr Aussehen: Der Bereich, in dem man arbeitet, soll weiterhin auf den
   ersten Blick erkennbar sein, und ein zweiter Reiter neben den Bereichen
   hätte genau das verwässert. */
.verwaltung-marke {
  font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); text-decoration: none;
  padding-right: 12px; border-right: 1px solid var(--border);
}
.verwaltung-marke:hover { color: #fff; }

/* Auf der Übersicht selbst führt sie nirgends hin. Der gedämpfte Zustand
   sagt das, ohne den Link zu entfernen: Ein Element, das mal da ist und
   mal nicht, lässt die Leiste springen. */
.verwaltung-marke.aktiv { cursor: default; }
.verwaltung-marke.aktiv:hover { color: var(--accent); }
.verwaltung-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.verwaltung-nav a {
  padding: 5px 11px; border-radius: var(--r-pill);
  color: var(--text-dim); font-size: 13.5px; text-decoration: none;
}
.verwaltung-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.verwaltung-nav a.aktiv { background: var(--accent); color: #1b1206; font-weight: 700; }
.verwaltung-nav .anzahl {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .1);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.verwaltung-nav a.aktiv .anzahl { background: rgba(0, 0, 0, .2); }

/* Eine Kennzahl, die zu einer Handlung fuehrt, ist anklickbar. Die
   Faerbung sagt, wie dringend: `dringend` wartet auf einen Menschen. */
.zahl.anklickbar { text-decoration: none; color: inherit; transition: border-color .12s ease; }
.zahl.anklickbar:hover { border-color: rgba(255, 255, 255, .28); }
.zahl.dringend { border-color: rgba(244, 117, 33, .55); }
.zahl.dringend .wert { color: var(--accent); }
.zahl.offen .wert { color: var(--gold); }

.karte.betont { border-color: rgba(155, 109, 255, .35); background: rgba(155, 109, 255, .07); }
.karte.betont p { margin: 0; color: var(--text-dim); font-size: 13.5px; }

table.liste { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.liste td {
  padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top;
}
table.liste tr:last-child td { border-bottom: none; }
table.liste .rechts { text-align: right; white-space: nowrap; }
table.liste .datum { white-space: nowrap; color: var(--text-dim); width: 130px; }
table.liste .stand-spalte { width: 120px; }
table.liste .cover-spalte { width: 44px; }
table.liste .cover-spalte img { border-radius: 4px; display: block; }
table.liste .kein-cover { color: var(--ink-500); font-size: 22px; }
table.liste.schmal td { padding: 7px 6px; }
table.liste tr.zurueckgenommen { opacity: .5; }
table.liste form { display: inline-block; margin-left: 4px; }

ul.schlicht { list-style: none; padding: 0; margin: 8px 0; font-size: 13.5px; }
ul.schlicht li { padding: 5px 0; border-bottom: 1px solid var(--border); }
ul.schlicht li:last-child { border-bottom: none; }

ul.meldungen { list-style: none; padding: 0; margin: 0; }
ul.meldungen li { padding: 10px 0; border-bottom: 1px solid var(--border); }
ul.meldungen li:last-child { border-bottom: none; }
ul.meldungen .kopf { display: flex; gap: 10px; align-items: baseline; }
ul.meldungen .text { margin: 4px 0 0; font-size: 13.5px; }

label.haken {
  display: block; padding: 8px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 13.5px;
}
label.haken:last-of-type { border-bottom: none; }
label.haken .hinweis { display: block; margin-left: 24px; }
label.haken input { margin-right: 8px; }

.knopf.gefahr { background: var(--red); color: #2a0a0d; border-color: transparent; }
.knopf.gefahr:hover { filter: brightness(1.08); }

.cover-probe { border-radius: 6px; display: block; margin: 8px 0; }
.abstand { margin-top: 22px; }
.zurueck { display: inline-block; margin-bottom: 10px; color: var(--text-dim); font-size: 13.5px; }

/* Die Staende eines Falls, in denselben Farben wie die Meldungen. */
.stand.new { color: var(--gold); border-color: rgba(255, 198, 63, .45); }
.stand.needs_human { color: var(--accent); border-color: rgba(244, 117, 33, .5); }
.stand.approved { color: var(--sky); border-color: rgba(67, 176, 255, .45); }
.stand.working { color: var(--sky); border-color: rgba(67, 176, 255, .3); }
.stand.waiting { color: var(--text-dim); border-color: var(--border); }
.stand.done { color: var(--green); border-color: rgba(47, 207, 122, .45); }

/* Staffel und Folge nebeneinander, weil sie zusammen gehoeren und
   einzeln jeweils sehr schmal waeren.

   `min-width: 0` ist der entscheidende Teil: Ein Flex-Kind schrumpft von
   sich aus nicht unter die Inhaltsbreite seines Feldes, und ein
   Eingabefeld bringt vom Browser eine Standardbreite von zwanzig Zeichen
   mit. Ohne diese Zeile ragte die Reihe rechts aus ihrer Karte heraus. */
.folgenwahl { display: flex; gap: 12px; }
.folgenwahl > div { flex: 1; min-width: 0; }
.folgenwahl input { min-width: 0; }

/* ── Meldeformular: die Blöcke je Art ──────────────────────────────────
   Zusammengehörende Fragen als eigene Gruppe, damit „Falsch angezeigt
   als" und „Sollte angezeigt werden als" nicht als eine lange Reihe von
   vier Zahlenfeldern erscheinen. Genau daran hing die Verwechslung. */
.feldgruppe {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; margin: 14px 0;
}
.feldgruppe legend {
  padding: 0 6px; font-size: 13px; font-weight: 700;
  color: var(--text-dim); text-transform: none;
}
.feldgruppe > label:first-of-type { margin-top: 0; }

/* Eine Auswahlmöglichkeit mit Punkt davor. */
.wahl {
  display: flex; align-items: center; gap: 9px;
  margin: 8px 0; font-weight: 500; cursor: pointer;
}
.wahl input { width: auto; margin: 0; flex: 0 0 auto; }

/* Zurückgenommen, aber ausdrücklich benutzbar: „weiß ich nicht" soll
   nicht die bequemste Antwort sein. Bewusst NICHT wie deaktiviert
   aussehen und auch nicht `disabled`, das hielte genau die Leute ab, die
   es brauchen, und Screenreader lesen es sonst als nicht verfügbar vor.
   Deshalb nur kleiner und blasser, und beim Überfahren wieder voll da. */
.wahl.gedaempft {
  font-size: 13px; font-weight: 400; opacity: 0.6;
  margin-top: 14px;
}
.wahl.gedaempft:hover, .wahl.gedaempft:focus-within { opacity: 1; }
.nachliefern { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.nachliefern label { margin-top: 0; }

/* Blaettern unter den Listen der Verwaltung. */
.blaettern {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}
.blaettern .stand-text {
  color: var(--text-dim); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.blaettern .knopf.aus { opacity: .35; cursor: default; pointer-events: none; }
label.haken.gesperrt { opacity: .5; cursor: not-allowed; }

/* ── Erklärung je Feld ─────────────────────────────────────────────── */
/* Ein umrundetes i neben der Beschriftung. Als <details> gebaut: klappt
   ohne Javascript auf und braucht keinen Inline-Handler, den die
   Sicherheitsregeln ohnehin blockieren würden. */
details.info { display: inline; }
details.info > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px;
  border: 1px solid var(--text-dim); border-radius: 50%;
  color: var(--text-dim); font-size: 10.5px; font-weight: 700;
  font-style: italic; line-height: 1; cursor: help;
  vertical-align: middle; list-style: none; user-select: none;
}
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary:hover { color: var(--accent); border-color: var(--accent); }
details.info[open] > summary { color: var(--accent); border-color: var(--accent); }
.info-text {
  display: block; margin: 6px 0 2px; padding: 9px 11px;
  background: var(--ink-800); border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--text-dim); font-size: 12.5px; font-weight: 400;
  line-height: 1.5; white-space: normal;
}

/* Titel tippen statt Nummer nachschlagen. Das Zahlenfeld daneben bleibt
   der Weg ohne Skript. */
input[data-serien-suche] { margin-bottom: 6px; }
/* Treffer: beide Felder gruen, damit die Gegenprobe an beiden
   Enden sichtbar ist. */
input.gewaehlt { border-color: var(--green); }

/* Eine Nummer, zu der es keine Serie gibt, muss auffallen, und zwar an
   BEIDEN Feldern. Am Titelfeld allein war es zu leise: Das wird dabei
   leer, waehrend der Blick im Nummernfeld steht.

   Der rote Schein steht auch bei Fokus, sonst mischt sich der orange
   Fokusschein mit dem roten Rand zu einem unklaren Braun. */
input.unbekannt,
input.unbekannt:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 92, 108, 0.28);
}

.feldwarnung {
  margin: 8px 0 0; padding: 9px 12px;
  background: rgba(255, 92, 108, 0.12);
  border: 1px solid rgba(255, 92, 108, 0.45);
  border-radius: var(--r-sm);
  color: #ffc4ca; font-size: 12.5px; line-height: 1.45;
}
#series_id { max-width: 110px; }

/* Die Vorschau auf die Regel im Formular. Die hervorgehobenen Zeilen
   sind die, auf die sie greift: Genau dort sieht man, ob der Sprung an
   der richtigen Stelle sitzt. */
.vorschau-tabelle { margin-top: 12px; }
.vorschau-tabelle th {
  text-align: left; padding: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.vorschau-tabelle td { font-variant-numeric: tabular-nums; }
.vorschau-tabelle tr.greift td { color: var(--gold); font-weight: 700; }
.vorschau-tabelle tr.greift td:first-child { color: var(--text-dim); font-weight: 400; }

/* ── Die zwei Regelwerke, immer nur eines offen ───────────────────────
   Sie lösen verschiedene Probleme und werden trotzdem leicht verwechselt:
   Beide fangen mit einer Serie an und enden bei einer Staffel. Deshalb
   sollen sie sichtbar getrennt sein und nicht als eine lange Kolonne
   Felder untereinander stehen. */
.regelwerk {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 10px; background: var(--ink-800);
}

/* Offen setzt sich der Block ab: Der Rahmen wird zum Akzent, damit man
   auf einen Blick sieht, in welchem der beiden man gerade tippt. */
.regelwerk[open] { border-color: var(--accent-soft); background: transparent; }
.regelwerk > summary {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; cursor: pointer; list-style: none;
}
.regelwerk > summary::-webkit-details-marker { display: none; }
.regelwerk > summary::marker { content: ''; }
.regelwerk > summary:hover strong { color: var(--accent); }
.regelwerk > summary strong { font-size: 15px; }

/* Das Dreieck selbst gezeichnet, weil die eigene Markierung weg ist. */
.regelwerk > summary::before {
  content: '▸'; color: var(--text-dim); font-size: 11px;
  transition: transform .12s ease; flex: 0 0 auto;
}
.regelwerk[open] > summary::before { transform: rotate(90deg); color: var(--accent); }

/* Der Untertitel nur zugeklappt: Offen steht er über den Feldern im Weg,
   und wofür der Block da ist, sieht man dann an ihnen selbst. */
.regelwerk > summary .hinweis { flex: 1 1 100%; margin: 0 0 0 19px; }
.regelwerk[open] > summary .hinweis { display: none; }
.regelwerk > form { padding: 0 14px 14px; }
.regelwerk > form > label:first-of-type { margin-top: 0; }

/* Ausprobieren: ein Abschnitt in der Karte, keine zweite Karte darin.
   Verschachtelte Karten tragen zweimal Innenabstand und Rahmen und
   werden dadurch breiter als ihr Platz. */
.probe-kasten {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border);
}
.probe-kasten h2 { margin-top: 0; }

/* Ein Kasten, zwei Regelwerke. Beide Erklärungen liegen im HTML, sichtbar
   ist die des aktuellen Modus. Nachzuladen wäre Text, den der Server
   ohnehin schon kennt. */
[data-vorschau][data-modus="staffel"] .nur-einzel,
[data-vorschau][data-modus="einzel"] .nur-staffel { display: none; }

/* Die Warnung „überschreibt eine bestehende Korrektur" trägt denselben
   roten Kasten wie die unbekannte Serien-Nummer: Beides ist kein Fehler,
   den man beheben muss, sondern etwas, das man vorher wissen will. */
.probe-kasten .feldwarnung { margin-bottom: 10px; }

/* Auswahl und Zahlenfeld der Zielstaffel gehören zusammen: Die Auswahl
   ist die Hilfe, das Zahlenfeld trägt den Wert. */
[data-staffelwahl] { margin-bottom: 6px; }
#set_season { max-width: 140px; }

/* In der Vorschau: eine Zeile, auf die eine SCHON VORHANDENE Regel
   greift. Ohne diese Unterscheidung sieht man nicht, dass der Bereich
   unter der neuen Grenze längst abgedeckt ist. */
.vorschau-tabelle tr.alte-regel td { color: var(--text-dim); }
.vorschau-tabelle tr.alte-regel .marke { margin-left: 6px; }

/* `.marke` ist für die Ecke einer Kachel gebaut und liegt deshalb
   absolut. In einer Tabelle gibt es keine Ecke, in die sie gehört: Dort
   sprang sie an den nächsten positionierten Vorfahren, also irgendwohin.
   Im Fließtext läuft sie einfach mit. */
table.liste .marke,
.vorschau-tabelle .marke {
  position: static; display: inline-block;
  margin-left: 6px; backdrop-filter: none;
}

/* ── Historie: eine Zeile ist ein Satz ────────────────────────────────
   Vorher standen dort der Schlüssel aus dem Quelltext, ein Tabellenname
   und eine Zeilennummer. */
table.liste.historie td { vertical-align: top; padding-top: 11px; padding-bottom: 11px; }
table.liste.historie .wer { white-space: nowrap; color: var(--text-dim); width: 120px; }

/* Eine markierte Schauzeit in der Nutzeransicht. Nur ein Streifen am
   Rand statt einer eingefärbten Zeile: Es ist ein Verdacht, kein Urteil,
   und die Zeile muss weiter gut lesbar bleiben. */
tr.auffaellig > td:first-child { border-left: 3px solid var(--red); }
tr.auffaellig .grund {
  margin-top: 4px; color: var(--red); font-size: 12px; line-height: 1.45;
}

/* Der Tageskopf über den Schauzeiten. */
.tagkopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 20px 0 6px; font-size: 15px;
}
.tagkopf .hinweis { margin-top: 0; }

/* ── Hinweis auf die Erweiterung ───────────────────────────────────── */
/* Steht über dem Regal und verschwindet, sobald verbunden ist. Deshalb
   ruhig gehalten: Es ist eine Einladung, keine Warnung. */
.erw-hinweis {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 18px;
  background: var(--ink-700); border: 1px solid var(--border);
  border-left: 3px solid var(--grape);
  border-radius: var(--r-md);
}
/* Der zweite Zustand ist der freudige: Die Erweiterung ist schon da,
   es fehlt nur noch ein Klick. */
.erw-hinweis.erw-bereit { border-left-color: var(--green); }
/* Der dritte ist der ärgerliche: Alles eingerichtet, und trotzdem kommt
   nichts an. Orange, weil hier wirklich etwas im Argen liegt, ohne dass
   es kaputt wäre. */
.erw-hinweis.erw-still { border-left-color: var(--accent); }
.erw-hinweis strong { font-size: 15px; }
.erw-hinweis .hinweis { margin-top: 4px; max-width: 60ch; }
.erw-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.erw-knoepfe .knopf { margin-top: 0; }

/* Der Augenblick zwischen Frage und Antwort auf der Anmeldeseite. */
.erw-anmeldung {
  margin: 0 0 16px; padding: 10px 14px;
  background: rgba(47, 207, 122, 0.12);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px;
}

/* Der Kasten nach dem Abmelden. Gruen hiesse "geschafft", hier fehlt
   aber noch ein Klick; deshalb die Akzentfarbe wie an jeder anderen
   Stelle, an der die Seite etwas von einem will. */
.erw-knopf {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.erw-knopf p { margin: 0 0 10px; }
.erw-knopf .knopf { margin: 0; }

/* Der angegebene Grund. Abgesetzt, weil er im Gegensatz zum Satz
   darüber von einem Menschen stammt und wörtlich zu lesen ist. */
table.liste.historie .grund {
  margin-top: 5px; padding: 5px 10px;
  border-left: 2px solid var(--border);
  color: var(--text-dim); font-size: 12.5px; line-height: 1.5;
}

/* Die Sprünge zum betroffenen Ding und zum auslösenden Fall. */
table.liste.historie .wege {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px;
  font-size: 12.5px;
}

.aenderungen { margin-top: 7px; }
.aenderungen > summary {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; list-style: none;
  color: var(--text-dim); font-size: 12.5px;
}
.aenderungen > summary::-webkit-details-marker { display: none; }
.aenderungen > summary::marker { content: ''; }
.aenderungen > summary::before {
  content: '▸'; font-size: 10px; transition: transform .12s ease;
}
.aenderungen[open] > summary::before { transform: rotate(90deg); }
.aenderungen > summary:hover { color: var(--accent); }
.aenderungen table { margin-top: 6px; max-width: 640px; }
.aenderungen .feld { color: var(--text-dim); white-space: nowrap; }

/* Der alte Wert gedämpft und durchgestrichen: Sonst muss man die beiden
   Spalten Zeichen für Zeichen vergleichen, um zu sehen, was weg ist. */
.aenderungen .alt { color: var(--text-dim); text-decoration: line-through; }

/* ── Der Bestand, je Serie ein Aufklapper ─────────────────────────────
   Zugeklappt steht dort nur Name und Nummer. Alles offen wäre bei
   hundert Serien eine Bildschirmlänge, durch die niemand scrollt. */
.serie-gruppe { border-bottom: 1px solid var(--border); }
.serie-gruppe:last-of-type { border-bottom: none; }
.serie-gruppe > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 4px; cursor: pointer;
  font-size: 13.5px; list-style: none;
}
.serie-gruppe > summary::-webkit-details-marker { display: none; }
.serie-gruppe > summary::marker { content: ''; }
.serie-gruppe > summary:hover { color: var(--accent); }

/* Das Dreieck selbst gezeichnet, weil die eigene Markierung oben weg
   ist. Sonst sieht man nicht, dass sich hier etwas öffnen lässt. */
.serie-gruppe > summary::before {
  content: '▸'; color: var(--text-dim); font-size: 11px;
  transition: transform .12s ease; flex: 0 0 auto;
}
.serie-gruppe[open] > summary::before { transform: rotate(90deg); }
.serie-gruppe > summary strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.serie-gruppe > summary .nummer { color: var(--text-dim); font-size: 12px; }

/* Die Anzahl ganz rechts: Sie sagt zugeklappt, ob sich das Aufklappen
   überhaupt lohnt. */
.serie-gruppe > summary .anzahl {
  margin-left: auto; flex: 0 0 auto;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--ink-800); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.gruppe-inhalt { padding: 2px 4px 14px 22px; }
.gruppe-inhalt h3 {
  margin: 12px 0 2px; font-size: 11.5px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em;
}
.gruppe-inhalt .pfeil { color: var(--text-dim); margin: 0 3px; }
.gruppe-inhalt code { font-size: 12.5px; color: var(--gold); }

/* Der Bestand von VOR der Regel: Knopf und Erklärung nebeneinander, damit
   klar ist, dass der Satz zum Knopf gehört und nicht zur Liste darüber.
   Bei schmalem Fenster rutscht er darunter statt den Knopf zu quetschen. */
.nachzug {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.nachzug .hinweis { flex: 1 1 240px; margin: 0; }

/* ── Angehängte Bilder an einer Meldung ───────────────────────────────
   Klein in der Übersicht, groß im neuen Tab. Wer zwanzig Meldungen
   durchgeht, will nicht zwanzig Vollbilder scrollen. */
.anhaenge { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.anhaenge img {
  width: 120px; height: 80px; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.anhaenge a:hover img { border-color: var(--accent); }

/* ── Austausch mit der Routine ────────────────────────────────────────
   Ein Verlauf, keine zwei überschriebenen Felder. Wer von wem spricht,
   muss auf einen Blick erkennbar sein, deshalb die farbige Kante. */
.verlauf { list-style: none; padding: 0; margin: 0 0 16px; }
.verlauf li {
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--ink-700); border-radius: var(--r-sm);
  border-left: 3px solid var(--border);
}
.verlauf li.von-routine { border-left-color: var(--accent); }
.verlauf li.von-mensch { border-left-color: var(--green); }
.verlauf .kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.verlauf .text { margin: 6px 0 0; white-space: pre-line; }

/* Die offene Frage im Verlauf. Sie stand vorher zusätzlich in einem
   Kasten darüber, also zweimal dasselbe auf einer Seite. Jetzt wird sie
   dort hervorgehoben, wo sie ohnehin steht. */
.verlauf li.offen {
  background: var(--ink-600, rgba(255, 255, 255, .05));
  box-shadow: 0 0 0 1px var(--accent-soft, rgba(244, 117, 33, .3));
}
.verlauf li.offen .marke { background: var(--accent); color: #1b1206; }

/* ── Zuständigkeit am Fall ────────────────────────────────────────────
   Steht oben, weil es die erste Frage beim Öffnen ist: Ist das meiner? */
.fall-leiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 18px;
  background: var(--ink-700); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
/* Wer sich kuemmert, auf einen Blick. Gruen heisst "deiner", Blau
   "jemand anderes", Grau "noch niemand". Kein Orange: Das heisst in der
   Verwaltung durchgehend "hier kann man klicken". */
.fall-leiste .wer { font-weight: 700; font-size: 13.5px; margin-right: 4px; }
.fall-leiste .wer.meiner { color: var(--green); }
.fall-leiste .wer.fremd { color: var(--sky); }
.fall-leiste .wer.frei { color: var(--text-dim); }
.fall-leiste select { width: auto; min-width: 150px; margin: 0; }
.fall-leiste form { margin: 0; }

/* ── Der angeheftete Fall ─────────────────────────────────────────────
   Am RECHTEN RAND und nicht unten: Unten liegen auf schmalen Fenstern
   die Knöpfe der Formulare, und etwas, das den Absenden-Knopf verdeckt,
   ist schlimmer als gar nichts. */
.angeheftet {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 40; max-width: 260px;
}
.angeheftet details {
  background: var(--ink-700);
  border: 1px solid var(--border); border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  box-shadow: var(--shadow);
}
.angeheftet summary {
  cursor: pointer; padding: 8px 12px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.angeheftet .inhalt { padding: 0 12px 12px; }
.angeheftet .titel {
  display: block; font-weight: 700; margin-bottom: 4px; color: var(--text);
}
.angeheftet .hinweis { margin: 0 0 8px; font-size: 12px; }
.angeheftet .hinweis.frage { color: var(--accent); font-weight: 700; }

/* Der Inhalt bekommt eine Höchsthöhe und rollt in sich. Ohne das wächst
   die Karte bei vier Wortmeldungen über den Bildschirm hinaus, und
   gerade die Knöpfe unten wären dann nicht mehr erreichbar. */
.angeheftet .inhalt { max-height: 70vh; overflow-y: auto; }

.angeheftet .block { margin-bottom: 10px; }
.angeheftet .was {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px;
}
.angeheftet .text { margin: 0; font-size: 12.5px; }
.angeheftet .block.dazu { border-left: 2px solid var(--green); padding-left: 8px; }

/* Wortmeldungen: knapp, mit derselben Farbzuordnung wie im großen
   Verlauf, damit man nicht zweimal lernen muss, wer wer ist. */
.angeheftet .wortmeldung {
  border-left: 2px solid var(--border); padding: 4px 0 4px 8px;
  margin-bottom: 6px; font-size: 12.5px;
}
.angeheftet .wortmeldung.von-routine { border-left-color: var(--accent); }
.angeheftet .wortmeldung.von-mensch { border-left-color: var(--green); }
.angeheftet .wortmeldung .wer { font-weight: 700; font-size: 11px; }
.angeheftet .wortmeldung p { margin: 2px 0 0; }

/* Der ganze Verlauf, aufgeklappt in sich rollend. */
.angeheftet .mehr summary { font-size: 12px; cursor: pointer; margin-bottom: 6px; }
.angeheftet .rollen { max-height: 200px; overflow-y: auto; }

.angeheftet textarea { font-size: 12.5px; min-height: 0; margin-bottom: 6px; }
.angeheftet select { font-size: 12.5px; margin-bottom: 6px; }
.angeheftet form { margin-bottom: 8px; }

/* Eingeklappt bleibt nur ein schmaler Streifen stehen. */
.angeheftet details:not([open]) summary { padding: 10px 8px; }

/* Auf schmalen Fenstern ganz weg: Dort ist jede feste Fläche im Weg. */
@media (max-width: 700px) {
  .angeheftet { display: none; }
}
/* Grün und nicht orange: Orange bedeutet in der Verwaltung durchgehend
   „hier kann man klicken". Eine Zuständigkeit ist aber kein Link, und
   zwei Bedeutungen für dieselbe Farbe lesen sich als Fehler. */
.liste .meiner { color: var(--green); font-weight: 700; }
/* Dieselbe Aussage wie in der Fall-Leiste, damit man beim Wechsel
   zwischen Liste und Fall nicht umdenken muss. */
.liste .fremd { color: var(--sky); font-weight: 700; }

/* ── Zusammenführen: Richtung in Lesegröße ──────────────────────────────
   Welche Serie verschwindet und welche bleibt, ist die einzige Frage auf
   dieser Seite. Vorher stand sie nur im Erklärtext. */
.richtung { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.richtung .seite { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.richtung .was {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text-dim);
}
.richtung .gross { font-size: 20px; line-height: 1.2; font-weight: 700; }
.richtung .gross.fehlt { color: var(--text-dim); font-weight: 600; font-size: 16px; }
.richtung .pfeil { align-self: center; font-size: 22px; color: var(--text-dim); }

@media (max-width: 560px) {
  .richtung { flex-direction: column; gap: 10px; }
  .richtung .pfeil { align-self: flex-start; transform: rotate(90deg); }
}

/* ── Anzeige am Verwaltungs-Link ──────────────────────────────────────
   Zwei Dinge nebeneinander, die Verschiedenes sagen: der Punkt meldet
   Neues seit dem letzten Hinsehen, die Zahl den offenen Bestand.

   Der Punkt ist bewusst NICHT die Akzentfarbe: Die trägt hier schon der
   aktive Menüpunkt, und zwei Orange nebeneinander heben sich auf. */
header nav .led {
  display: inline-block; width: 8px; height: 8px; margin-left: 5px;
  border-radius: 50%; background: var(--accent);
  /* Der Schein hebt den Punkt von der dunklen Leiste ab, ohne dass er
     größer werden muss. Auf dem Handy ist jeder Pixel Breite knapp. */
  box-shadow: 0 0 0 2px rgba(244, 117, 33, .25);
  vertical-align: middle;
}

header nav .anzahl {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .1);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

header nav a.aktiv .anzahl { background: rgba(0, 0, 0, .2); }

/* Steht man schon IN der Verwaltung, trägt der Link die Akzentfarbe als
   Fläche. Ein oranger Punkt darauf wäre unsichtbar. */
header nav a.aktiv .led {
  background: #1b1206; box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
}

/* ── Rangliste ─────────────────────────────────────────────────────── */
/* Glas nach dem Muster des Pfand-Rechners: Unschärfe dahinter, dunkler
   Schlagschatten darunter, helle Kante oben. Die Kante macht die Tiefe,
   nicht die Perspektive: gekippte Schrift liest sich schlechter, und auf
   dem Handy wird ein geneigtes Treppchen sofort eng. */

/* ── Podest ── */
.podest {
  display: grid; gap: 14px; margin-bottom: 26px;
  grid-template-columns: 1fr; align-items: end;
}

.podest-karte {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 18px 14px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .055);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Der Schein an der Oberkante trägt die Rangfarbe, das Glas bleibt
   neutral: heller Text auf getöntem Glas verliert sonst Kontrast. */
.podest-karte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom,
              var(--rang-schein, transparent) 0, transparent 58%);
}

.podest-karte.rang-gold   { --rang: var(--gold);   --rang-schein: rgba(255, 198, 63, .16); }
.podest-karte.rang-silber { --rang: var(--silber); --rang-schein: rgba(200, 205, 214, .13); }
.podest-karte.rang-bronze { --rang: var(--bronze); --rang-schein: rgba(205, 127, 74, .13); }
.podest-karte:not(.leer) { border-color: color-mix(in srgb, var(--rang) 42%, transparent); }

.podest-karte:not(.leer):hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .42),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}

.podest-karte.eigene { background: var(--accent-soft); }

.podest-karte.leer { opacity: .42; }
.podest-karte.leer .podest-wer { color: var(--text-dim); font-weight: 600; }

.podest-platz {
  margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--rang, var(--text-dim));
}
.podest-wer { margin-top: 4px; font-size: 15px; font-weight: 700; text-align: center; }
.podest-wer .anonym { color: var(--text-dim); font-weight: 600; }
.podest-zeit {
  margin-top: 8px; font-size: 21px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.podest-folgen { margin-top: 2px; font-size: 12.5px; }

/* Die erreichten Werte tragen die Farbe ihres Rangs. Der Rückfallwert
   greift, falls der Schimmer unten nicht zieht (siehe dort). */
.podest-zeit { color: var(--rang); }
.podest-folgen { color: color-mix(in srgb, var(--rang) 72%, var(--text-dim)); }

/* ── Der Lichtschlitz über Text ──

   Anders als beim Pokal geht das nicht über eine zweite Kopie: Text
   zweimal auszugeben hieße, ihn zweimal vorlesen zu lassen. Stattdessen
   liegt ein Verlauf HINTER der Schrift und wird auf die Glyphen
   beschnitten (`background-clip: text`); der helle Streifen darin wandert
   durch. Ergebnis ist dasselbe Bild, nur ohne doppelten Inhalt.

   `--schimmer` ist die Grundfarbe, die der Verlauf links und rechts vom
   Streifen trägt. Sie muss gesetzt sein, sonst bliebe der Text
   durchsichtig. */
.podest-karte .schimmert {
  --schimmer: var(--text);
  /* Fuenf Stufen statt drei: aussen die Grundfarbe, dann eine Mischung,
     in der Mitte ein schmaler voller Kern. Der Reflex lebt vom Kontrast
     in der Mitte, nicht von einer Kante; ein breiter harter Block liest
     sich als Artefakt.

     KEIN ALPHA IM VERLAUF, sondern gemischte Vollfarben. Die Schrift
     selbst ist durchsichtig und lebt allein vom Verlauf dahinter: Ein
     halbtransparentes Weiss wuerde den Text an dieser Stelle
     halbdurchsichtig machen statt heller.

     Der volle Kern misst 4% des Verlaufsbildes, und weil das Bild 320%
     der Textbreite hat, sind das rund 13% der Beschriftung; mit dem
     Auslauf kommt der helle Bereich auf etwa ein Viertel, genauso breit
     wie der Streifen ueber dem Pokal. */
  background-image: linear-gradient(100deg,
    var(--schimmer) 46%,
    color-mix(in srgb, #ffffff 60%, var(--schimmer)) 48%,
    #ffffff 50%,
    color-mix(in srgb, #ffffff 60%, var(--schimmer)) 52%,
    var(--schimmer) 54%);
  background-size: 320% 100%;
  background-repeat: no-repeat;
  /* DIE POSITION MUSS ZWISCHEN 0% UND 100% BLEIBEN.

     Bei Prozentwerten heisst die Angabe nicht "so weit verschieben",
     sondern "diesen Punkt des Bildes auf diesen Punkt des Kastens
     legen". Bei einem Bild, das breiter ist als der Kasten, liegt es
     damit bei 0% buendig links und bei 100% buendig rechts, und in
     beiden Faellen deckt es den Kasten vollstaendig ab.

     Ein erster Anlauf ging auf 135% und -35%, in der Annahme, das
     schoebe den hellen Streifen weit genug hinaus. Es schob das ganze
     Bild hinaus: Bei 135% reichte es nur bis 23% der Textbreite, und
     der Rest des Textes stand ohne Hintergrund da. Weil die Schrift
     selbst durchsichtig ist, war sie dort schlicht weg. Auf dem Podest
     stand "Squ" statt "Squirrelchen" und "14" statt "145,5 Std". */
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-schimmer 6s linear infinite;
}
.podest-karte .podest-zeit.schimmert   { --schimmer: var(--rang); }
.podest-karte .podest-folgen.schimmert { --schimmer: color-mix(in srgb, var(--rang) 72%, var(--text-dim)); }
.podest-karte .anonym.schimmert        { --schimmer: var(--text-dim); }
.podest-karte a.schimmert              { --schimmer: var(--accent); }

/* Gleicher Takt wie der Pokal desselben Rangs: Auf einer Karte soll
   alles zusammen aufblitzen, nicht nacheinander. */
.rang-gold   .schimmert { animation-delay: .6s; }
.rang-silber .schimmert { animation-delay: 2.6s; }
.rang-bronze .schimmert { animation-delay: 4.6s; }

@keyframes text-schimmer {
  /* Von 100% nach 0%: Der helle Streifen sitzt in der Mitte des Bildes
     und wandert dabei von links nach rechts durch die Schrift. Beide
     Endwerte decken den Text voll ab, es kann also nichts verschwinden. */
  0%, 4%       { background-position: 100% 0; }
  14.6%        { background-position: 0% 0; }
  14.61%, 100% { background-position: 100% 0; }
}

/* Rückfall gegen den schlimmsten Fehlerfall: Kann ein Browser den
   Verlauf nicht auf die Glyphen beschneiden, bliebe der Text
   durchsichtig und damit unlesbar. Dann lieber ohne Schimmer. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .podest-karte .schimmert {
    background-image: none; color: var(--schimmer); animation: none;
  }
}

/* Gold ist größer als Silber, Silber größer als Bronze. Die Abstufung
   sitzt an der Pokalgröße und an der Schrift, damit die Karten trotzdem
   auf einer Grundlinie stehen. */
.podest-karte.rang-gold   .pokal-huelle { width: 62px; height: 62px; }
.podest-karte.rang-silber .pokal-huelle { width: 48px; height: 48px; }
.podest-karte.rang-bronze .pokal-huelle { width: 40px; height: 40px; }
.podest-karte.rang-gold   .podest-zeit { font-size: 25px; }
.podest-karte.rang-gold   .podest-wer  { font-size: 17px; }

@media (min-width: 620px) {
  .podest { grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; }
  /* Gold in die Mitte, Silber nach links. Die Reihenfolge im Quelltext
     bleibt 1, 2, 3, damit Vorlesen und Tabulator stimmen. */
  .podest-karte.rang-gold   { order: 2; padding: 26px 18px 22px; }
  .podest-karte.rang-silber { order: 1; }
  .podest-karte.rang-bronze { order: 3; padding-top: 14px; }
}

/* ── Pokal und Lichtschlitz ── */
.pokal-huelle {
  position: relative; display: inline-block;
  width: 22px; height: 22px; vertical-align: -5px; margin-right: 5px;
}
.pokal { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Der Schlagschatten setzt den Pokal von der Karte ab. `drop-shadow`
   folgt dabei der Silhouette, anders als `box-shadow`, das nur das
   umschließende Rechteck kennt. */
.podest-karte .pokal-huelle { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }

.pokal-gold   { color: var(--gold); }
.pokal-silber { color: var(--silber); }
.pokal-bronze { color: var(--bronze); }
.pokal-umriss { color: var(--text-dim); opacity: .5; }

/* Die helle Kopie liegt deckungsgleich über dem Pokal. Sichtbar ist immer
   nur ein schmaler senkrechter Streifen davon, und der wandert. Weil
   `clip-path` die KOPIE beschneidet und nicht die Fläche darum, leuchtet
   nur der Pokal auf und kein Balken darüber. Keine SVG-Maske: genau die
   zerlegen Dark-Mode-Erweiterungen. */
.pokal-glanz {
  /* Reines Weiss statt Creme, dazu ein Schein nach aussen. Das
     `drop-shadow` greift NACH dem Maskieren, leuchtet also mit dem
     Streifen mit und nicht um den ganzen Pokal.

     Der Schein ist bewusst schwach: Bei 85% Deckkraft und 4px Radius
     wuchs er ueber die Zwischenraeume zwischen Kelch, Henkeln und Fuss
     zusammen, und aus dem Lichtschlitz wurde ein weisses Rechteck. */
  color: #ffffff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .40));

  /* MASKE STATT HARTEM AUSSCHNITT.

     Vorher schnitt ein `clip-path` ein Rechteck aus der hellen Kopie.
     Das hat zwei senkrechte Kanten, und die liest man als Artefakt und
     nicht als Reflex. Die Maske laeuft an beiden Seiten aus.

     Aufbau wie beim Text: Das Maskenbild ist DREIMAL so breit wie der
     Pokal und traegt in seiner Mitte den Streifen; ausserhalb davon ist
     es durchsichtig, dort bleibt die helle Kopie also unsichtbar. Weil
     das Bild breiter ist als der Kasten, deckt es ihn bei jeder Position
     zwischen 0% und 100% vollstaendig ab. */
  -webkit-mask-image: linear-gradient(100deg, transparent 46%,
    rgba(0, 0, 0, .5) 48.5%, #000 50%, rgba(0, 0, 0, .5) 51.5%, transparent 54%);
  mask-image: linear-gradient(100deg, transparent 46%,
    rgba(0, 0, 0, .5) 48.5%, #000 50%, rgba(0, 0, 0, .5) 51.5%, transparent 54%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  /* `linear` statt `ease-in-out`: Der Streifen soll gleichmäßig
     durchschießen und nicht am Anfang und Ende bremsen. Bei einem so
     kurzen Durchlauf ist genau das Bremsen die halbe Zeit. */
  animation: pokal-glanz 6s linear infinite;
}
/* Zeitversetzt, sonst blitzen alle drei im Gleichschritt. */
.glanz-gold   { animation-delay: .6s; }
.glanz-silber { animation-delay: 2.6s; }
.glanz-bronze { animation-delay: 4.6s; }

@keyframes pokal-glanz {
  /* Von 100% nach 0%: Der Streifen sitzt in der Mitte des Maskenbildes
     und wandert damit von links nach rechts durch den Pokal. Bei 100%
     liegt er links daneben, bei 0% rechts daneben, in beiden Fällen also
     unsichtbar.

     DIE POSITION BLEIBT ZWISCHEN 0% UND 100%. Alles darüber schöbe das
     Maskenbild aus dem Kasten, und wo keine Maske liegt, ist auch nichts
     zu sehen. Beim Text hat genau das schon einmal die halbe
     Beschriftung verschluckt.

     Der Durchlauf dauert 6,7 Prozent der Sechs-Sekunden-Runde, also 400
     Millisekunden: ein Blitz, kein Wischen. Der Rest ist Ruhe, ein
     Dauerglitzern zöge den Blick von den Zahlen weg. */
  0%, 4%       { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  14.6%        { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  14.61%, 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

/* Nur Gold schwebt. Wenn alle drei wippen, ist der erste Platz nicht
   mehr der erste. */
.podest-karte.rang-gold .pokal-huelle { animation: pokal-schweben 3.4s ease-in-out infinite; }
@keyframes pokal-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── Liste ab Platz 4 ── */
table.rangliste {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 14px; border-radius: var(--r-md); overflow: hidden;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .16);
}
table.rangliste th {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
table.rangliste td { padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
table.rangliste tr:last-child td { border-bottom: none; }
table.rangliste tr:hover td { background: rgba(255, 255, 255, .035); }
table.rangliste .rechts { text-align: right; }
table.rangliste th.platz, table.rangliste td.platz { width: 66px; white-space: nowrap; }

/* Gleiche Ziffernbreite, damit die Zahlen untereinander stehen und die
   Spalte beim Nachladen nicht springt. */
table.rangliste .zeit, table.rangliste .folgen, .platz-zahl {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.rangliste .folgen { color: var(--text-dim); }
table.rangliste .anonym { color: var(--text-dim); }
table.rangliste tr.eigene td { background: var(--accent-soft); }

.platz-zahl { color: var(--text-dim); font-weight: 700; }
table.rangliste tr.eigene .platz-zahl { color: var(--text); }

.marke-du {
  margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--accent); color: #1a0f04; font-size: 11.5px; font-weight: 700;
}

.mehr-laden { display: flex; justify-content: center; margin-top: 20px; min-height: 22px; }
.mehr-laden.laedt::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: dreht .7s linear infinite;
}
@keyframes dreht { to { transform: rotate(360deg); } }

table.rangliste.eigene-zeile { margin-top: 16px; }
.raus-hinweis { margin-top: 20px; }

@media (max-width: 560px) {
  table.rangliste { font-size: 13px; }
  table.rangliste th, table.rangliste td { padding: 10px 7px; }
  table.rangliste th.platz, table.rangliste td.platz { width: 56px; }
  .pokal-huelle { width: 18px; height: 18px; margin-right: 3px; vertical-align: -4px; }
  .marke-du { margin-left: 5px; padding: 1px 6px; font-size: 10.5px; }
  .podest-karte.rang-gold .podest-zeit { font-size: 22px; }
}

/* Wer im System weniger Bewegung eingestellt hat, bekommt keine. Der
   Glanz bleibt dabei ganz aus, statt in einer Zwischenstellung
   stehenzubleiben. */
@media (prefers-reduced-motion: reduce) {
  /* Der Verlauf muss WEG, nicht nur angehalten: Der Text steht auf
     `color: transparent` und lebt allein davon, dass der Verlauf hinter
     ihm sichtbar ist. `--schimmer` traegt je Element schon die richtige
     Farbe, also wird sie hier einfach zur Schriftfarbe. */
  .podest-karte .schimmert {
    animation: none; background-image: none; color: var(--schimmer);
  }
  .pokal-glanz { animation: none; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  .podest-karte.rang-gold .pokal-huelle { animation: none; }
  .podest-karte { transition: none; }
  .podest-karte:not(.leer):hover { transform: none; }
  .mehr-laden.laedt::after { animation: none; }
}

/* Das Band der Probeansicht. Kräftig genug, dass es niemand übersieht:
   Eine Rangliste aus erfundenen Zeilen, die aussieht wie die echte,
   wäre auf einem Bildschirmfoto nicht davon zu unterscheiden. */
.probe-band {
  margin: 0 0 18px; padding: 9px 14px; border-radius: var(--r-sm);
  background: rgba(244, 117, 33, .14); border: 1px dashed var(--accent);
  color: var(--accent); font-size: 13.5px; font-weight: 600;
}

/* ── Pokal-Vitrine (Regal und öffentliches Profil) ─────────────────── */
/* Werkzeuge links, Pokale rechts. Ohne Pokale ist der Kasten leer und
   die Werkzeugleiste nimmt die Zeile wie vorher ganz ein. */
.regal-leiste {
  display: flex; gap: 16px; align-items: center;
  flex-wrap: wrap; margin-bottom: 14px;
}
.regal-leiste .werkzeuge { flex: 1 1 340px; margin-bottom: 0; }

/* Die Suche gibt Breite ab, wenn rechts Pokale stehen. Vorher 240px. */
.regal-leiste .suche { flex: 1 1 170px; min-width: 140px; }

.pokal-vitrine {
  /* `inline-flex`, damit der Kasten nur so breit wird wie sein Inhalt.
     Mit `flex` zog er sich auf dem Profil ueber die ganze Seite, weil er
     dort als Block steht und keine Flex-Zeile ihn begrenzt. */
  display: inline-flex; gap: 12px; align-items: flex-end; flex: 0 0 auto;
  padding: 8px 14px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}

.vitrine-stueck {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.vitrine-stueck.rang-gold   { --rang: var(--gold); }
.vitrine-stueck.rang-silber { --rang: var(--silber); }
.vitrine-stueck.rang-bronze { --rang: var(--bronze); }

.vitrine-stueck .pokal-huelle {
  width: 30px; height: 30px; margin: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
/* Nur Gold schwebt, wie auf dem Podest. */
.vitrine-stueck.rang-gold .pokal-huelle {
  animation: pokal-schweben 3.4s ease-in-out infinite;
}

.vitrine-wann {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--rang); white-space: nowrap;
}

/* Auf dem Profil steht die Vitrine IN der Kennzahl-Reihe. Dort ist Platz,
   und nebeneinander liest sie sich als das, was sie ist: eine Kennzahl
   mehr. Deshalb auch dieselbe Fuellung und Rundung wie eine Kachel,
   statt der eigenen Glasplatte aus dem Regal. */
.zahlen > .pokal-vitrine {
  gap: 18px; padding: 10px 18px; align-items: center;
  background: var(--ink-700); border-color: var(--border);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Groesser als im Regal: Hier drueckt keine Werkzeugleiste daneben. */
.zahlen > .pokal-vitrine .pokal-huelle { width: 42px; height: 42px; }
.zahlen > .pokal-vitrine .vitrine-wann { font-size: 11.5px; margin-top: 2px; }

@media (max-width: 700px) {
  .pokal-vitrine { padding: 7px 11px; gap: 10px; }
  .vitrine-stueck .pokal-huelle { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .vitrine-stueck.rang-gold .pokal-huelle { animation: none; }
}

/* Der Hinweis, dass die Tageswerte privat sind, samt Frage.

   Steht UNTER den Kacheln, nicht darin: In der Kachel zog er sie in die
   Breite und machte aus zwei Zahlen einen unruhigen Kasten.

   Die Farbe ist der Akzent, also dieselbe, die auf dieser Seite überall
   "hier kannst du etwas tun" bedeutet. Ein grauer Hinweis würde
   überlesen, und genau der Klick soll ja auffallen. */
.freigabe-frage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: -6px 0 20px; font-size: 13.5px; color: var(--accent);
}
.freigabe-frage form { display: inline-flex; align-items: center; gap: 8px; }
.freigabe-frage .knopf { margin-top: 0; padding: 3px 12px; font-size: 12px; }

/* Die Feststellung tritt zurück, die Frage daneben trägt den Akzent. */
.freigabe-lage { color: var(--text-dim); }
.freigabe-lage::after { content: ' ·'; color: var(--accent); }

/* Ein Meldungskasten, der gleich die Lösung anbietet. Der Knopf trägt
   den Akzent und hebt sich damit vom Rot des Kastens ab. */
.fehler.mit-frage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
}
.fehler.mit-frage form { display: inline-flex; align-items: center; gap: 8px; }
.fehler.mit-frage .knopf { margin-top: 0; padding: 3px 12px; font-size: 12px; }

/* Die Pokale sind Verweise auf ihre Liste. Sie sollen nicht wie ein
   Textlink aussehen, aber beim Überfahren zeigen, dass da etwas geht. */
a.vitrine-stueck { color: inherit; text-decoration: none; transition: transform .15s ease; }
a.vitrine-stueck:hover { text-decoration: none; transform: translateY(-2px); }
a.vitrine-stueck:hover .vitrine-wann { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  a.vitrine-stueck, a.vitrine-stueck:hover { transition: none; transform: none; }
}

/* Das X an einer erledigten Meldung. Es räumt nur die eigene Liste auf,
   also klein und unaufdringlich; rot wird es erst beim Überfahren, damit
   klar ist, was passiert.

   Es sitzt IN der Kopfzeile und wird nicht darüber gelegt: Absolut
   positioniert lag es auf der Statusmarke, bei "Behoben" sichtbar
   übereinander. */
.weg-form { margin: 0; flex: 0 0 auto; }
.weg-x {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 2px 7px; border-radius: var(--r-sm); line-height: 1;
  color: var(--text-dim); font-size: 19px; font-family: var(--font);
  transition: color .15s ease, background-color .15s ease;
}
.weg-x:hover, .weg-x:focus-visible {
  color: var(--red); background: rgba(255, 92, 108, .14);
}

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

/* ── Die Geraete-PINs im Nutzerbereich ─────────────────────────────────

   Zwei Ansichten in einem Kasten: Der Administrator liest Nummern ab, der
   Moderator tippt eine ein. Beides gehoert optisch zusammen, weil beides
   dieselbe Frage beantwortet, naemlich ob am Telefon wirklich der
   Kontoinhaber sitzt. */
.pin-kasten {
  background: var(--ink-700); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px;
}
.pin-kasten h3 { margin: 0 0 6px; font-size: 15px; }
.pin-kasten .hinweis { margin-bottom: 12px; }
.pin-kasten ul.schlicht { list-style: none; margin: 0; padding: 0; }
.pin-kasten ul.schlicht li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 5px 0;
}

/* Die Nummer selbst wird vorgelesen oder abgeglichen, also gross genug,
   dass man sich beim sechsten Konto nicht vertut. Ziffernbreite fest,
   sonst tanzen die Zahlen untereinander. */
code.pin {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 20px; font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em; color: var(--gold);
  background: rgba(255, 198, 63, 0.10);
  border: 1px solid rgba(255, 198, 63, 0.28);
  border-radius: var(--r-sm); padding: 2px 10px;
}
/* Abgelaufen: dieselbe Form, aber ohne Signalfarbe. Sie ist Beleg, nicht
   Schluessel, und darf nicht so aussehen, als oeffnete sie noch etwas. */
code.pin.ruht {
  color: var(--text-dim); background: transparent;
  border-color: var(--border); font-size: 17px;
}

.alte-pins { margin-top: 12px; }
.alte-pins summary {
  cursor: pointer; color: var(--text-dim); font-size: 13px;
  padding: 4px 0;
}
.alte-pins summary:hover { color: var(--text); }
.alte-pins ul.schlicht { margin-top: 8px; }

/* Das Feld fuer den Moderator. So breit wie vier Ziffern und keinen
   Millimeter breiter: Wer hier eine Mailadresse hineinschreiben will,
   merkt es sofort. */
.pin-feld {
  width: 8ch; text-align: center;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 22px; letter-spacing: 0.2em;
}

/* ── Die Anmeldewege eines Kontos ──────────────────────────────────────

   Marcus, 03.08.2026: "steht zwar: 2 Anmeldewege. Aber nicht welche."
   Jeder Weg als eigene Marke, damit man ihn sieht UND anfassen kann. Das
   X daran ist dasselbe wie an einer erledigten Meldung: klein, grau, rot
   erst beim Ueberfahren. */
.wege {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 18px;
}
.wege-titel { color: var(--text-dim); font-size: 13px; }
.weg {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--ink-700); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 3px 6px 3px 12px;
  font-size: 13px;
}
/* Ohne Knopf darin sitzt der Text sonst aus der Mitte. */
.weg:not(:has(.weg-form)) { padding-right: 12px; }
.weg.rejected { color: var(--red); border-color: rgba(255, 92, 108, .4); }
.weg .weg-x { font-size: 15px; padding: 0 5px; }

/* Bereiche, aus denen es kein Zurueck gibt. Sie sehen anders aus als der
   Rest, damit niemand versehentlich hineingerutscht ist und das erst
   hinterher merkt. */
.gefahrzone {
  border-color: rgba(255, 92, 108, .32);
  background: rgba(255, 92, 108, .05);
}
.gefahrzone h2 { color: #ffc4ca; }

/* ── Die Startseite ────────────────────────────────────────────────────

   Sie sieht nur, wer noch kein Konto hat. Deshalb steht hier zuerst der
   Gruss im Farbverlauf des Logos und dann, was zusammengekommen ist:
   Drei Zahlen beantworten schneller als jeder Werbesatz, ob hier jemand
   ist. */
.startseite {
  max-width: 720px; margin: 50px auto; text-align: center;
}
.start-gruss {
  font-size: clamp(28px, 6vw, 42px); line-height: 1.15;
  margin: 6px 0 0; letter-spacing: -0.5px;
}
.start-text {
  font-size: 16px; max-width: 520px; margin: 16px auto 30px;
}

.start-zahlen {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px;
  margin: 0 0 14px;
}
.start-zahl {
  flex: 1 1 150px; max-width: 210px;
  background: var(--ink-700); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 12px;
}
/* Die Zahl gross, das Wort klein: Beim Ueberfliegen bleiben die Zahlen
   haengen, und genau die sind die Aussage. Feste Ziffernbreite, damit
   die drei Kacheln nicht bei jeder Aktualisierung leicht wandern. */
.start-zahl .wert {
  display: block; font-size: 30px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.start-zahl .was {
  display: block; margin-top: 4px; font-size: 13px; color: var(--text-dim);
}

.start-jahre {
  margin: 0 0 26px; font-size: 15px; font-weight: 600; color: var(--accent);
}
.start-privat { margin-top: 30px; }

/* Der eine Knopf darf gross sein, es gibt ja keinen zweiten daneben. */
.knopf.gross { padding: 13px 30px; font-size: 15.5px; }

/* ── Die Schalter der Erweiterung in den Einstellungen ──────────────────

   Sie stehen hier, weil die wenigsten das Popup der Erweiterung aufmachen
   (Marcus, 05.08.2026): „Viele klemmen sich die Erweiterung nicht oben an
   und wissen somit vermutlich gar nicht, was alles möglich ist."

   Kästchen statt Schiebeschalter, anders als im Popup: Hier stehen acht
   davon untereinander in einem Formular mit Speichern-Knopf, und Kästchen
   sagen „das wird erst beim Speichern wirksam". Ein Schiebeschalter
   verspricht, sofort zu gelten. */
.schalter-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  /* Der generische `label`-Stil setzt 14px oben und fette, gedimmte
     Schrift. Beides passt hier nicht: Diese Beschriftungen sind Zeilen
     einer Liste, keine Feldüberschriften. */
  margin: 0;
  padding: 9px 0;
  font-weight: 400;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

/* Titel und Marke in einer Zeile, die Erklärung darunter. */
.schalter-zeile .kopf {
  display: block;
  font-weight: 600;
}

.schalter-zeile .hinweis {
  display: block;
  font-weight: 400;
}

.schalter-zeile:last-of-type { border-bottom: none; }

.schalter-zeile input[type="checkbox"] {
  /* Bündig mit der ersten Textzeile, nicht mit der Blockmitte: Bei zwei
     Zeilen Erklärung rutschte das Kästchen sonst nach unten weg. */
  /* Bündig mit der ersten Textzeile, nicht mit der Blockmitte. */
  margin-top: 3px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.schalter-zeile > span {
  display: block;
  line-height: 1.35;
}

.schalter-zeile .hinweis { margin-top: 2px; }

/* Die schmale Fassung für die Sprachliste: nur ein Wort je Zeile, keine
   Erklärung, deshalb keine Trennlinien und weniger Luft. */
.schalter-zeile.schmal {
  margin: 0;
  padding: 5px 0;
  border-bottom: none;
  align-items: center;
  font-size: 13.5px;
}

.schalter-zeile.schmal input[type="checkbox"] { margin-top: 0; }

.sprachen-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));

  /* Kein Zeilenabstand: Die Zeilen bringen ihr eigenes Polster mit, und
     ein zusätzliches `gap` riss die Liste vorher weit auseinander. */
  gap: 0 18px;
  margin: 6px 0 16px;
}

/* Was ins Crunchyroll-Konto schreibt oder von selbst navigiert, wird
   ausgezeichnet. Der Unterschied ist echt: Alles andere ändert nur, wie
   die Seite aussieht. */
.schalter-zeile .marke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--accent-soft);
  vertical-align: 1px;
}

/* Ohne Erweiterung im Browser: gedämpft, aber BEDIENBAR.

   Nicht `disabled`: Die Werte hängen am Konto und gelten, sobald eine
   Erweiterung dazukommt. Wer hier auf dem Handy sitzt, soll einstellen
   können, was am Rechner gelten wird. Der Hinweis darüber sagt das. */
#schalterForm.ohne-erweiterung {
  opacity: .62;
}

#schalterForm.ohne-erweiterung:focus-within {
  /* Sobald jemand wirklich hineingeht, volle Deckkraft: Ein gedämpftes
     Feld, in dem man gerade tippt, liest sich wie ein Fehler. */
  opacity: 1;
}

/* ── Die Reiter der Einstellungen ───────────────────────────────────────

   HIER STAND EIN ZWEITER `.reiter`-STIL, und er war ein Fehler.

   Die Klasse gibt es laengst (Zeile 800): Pillen mit orangem Grund im
   aktiven Zustand, benutzt auf sieben Seiten. Mein Block kam spaeter,
   ueberschrieb aber nur `color` und nicht `background` - der offene
   Reiter war danach oranger Text auf orangem Grund und schlicht
   unlesbar.

   Uebrig bleibt genau das, was die Einstellungen zusaetzlich brauchen:
   Auf schmalen Schirmen darf die Reihe seitlich scrollen statt
   umzubrechen. Drei umgebrochene Reiter sehen aus wie eine Liste und
   nicht mehr wie eine Auswahl. */
.karte > .reiter {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 18px;
}

.karte > .reiter::-webkit-scrollbar { display: none; }
.karte > .reiter a { flex: 0 0 auto; white-space: nowrap; }

/* Der erste Abschnitt eines Bereichs braucht oben keine zweite
   Trennlinie: Die Reiterleiste steht schon darueber. */
.reiter + h2.abschnitt,
.reiter + .fehler + h2.abschnitt {
  border-top: none;
  padding-top: 0;
  margin-top: 4px;
}

/* ── Datenauskunft ──────────────────────────────────────────────────
   Je Kategorie eine Karte: Titel mit Anzahl, ein Satz was drinsteht,
   darunter drei Zeilen Wofuer / Wie lange / Wer.

   ALS LISTE UND NICHT ALS TABELLE: Vier Spalten passen auf einem Handy
   nicht nebeneinander, und die Auskunft muss dort genauso lesbar sein.
   Auf breiten Schirmen stehen Frage und Antwort in zwei Spalten, auf
   schmalen untereinander. */
.auskunft { display: grid; gap: 12px; margin: 14px 0 18px; }
.auskunft-karte { padding: 16px 18px; }
.auskunft-karte h3 {
  margin: 0 0 6px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.auskunft-karte > p { margin: 0 0 10px; font-size: 13.5px; color: var(--text); }
.auskunft-karte dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 12.5px;
}
.auskunft-karte dt { color: var(--text-dim); font-weight: 700; }
.auskunft-karte dd { margin: 0; color: var(--text-dim); }

@media (max-width: 560px) {
  .auskunft-karte dl { grid-template-columns: 1fr; gap: 2px; }
  .auskunft-karte dd { margin-bottom: 6px; }
}

/* ── Werbung ────────────────────────────────────────────────────────
   Drei Formen aus einer Datei (partials/einschub.blade.php): Banner
   ueber die volle Rasterbreite, Influencer-Kachel im Raster, Influencer
   als Zeile auf den Seiten ohne Raster.

   NEUTRALE NAMEN, kein `.werbung` und kein `.ad-banner`. Nicht um
   jemanden zu ueberlisten, sondern weil ein Sperrlistenname eine
   Kachel im eigenen Regal wegnehmen wuerde, die gar keine Werbung ist.
   Die Kennzeichnung sitzt sichtbar IM Element, nicht im Klassennamen. */
.einschub { position: relative; }

/* Volle Rasterbreite. `1 / -1` heisst "von der ersten bis zur letzten
   Spalte", unabhaengig davon, wie viele der Browser gerade bildet.
   Genau deshalb muss der Server die Spaltenzahl nicht kennen. */
.gitter > .einschub-tafel { grid-column: 1 / -1; }

/* DIE AEUSSERE HUELLE HAELT NUR DIE ZEILE FREI und ist selbst
   unsichtbar. Sie muss die volle Rasterbreite einnehmen, sonst rutschte
   die Werbung als schmales Element neben eine Serienkachel. Sichtbar
   ist der Rahmen darin, und der ist nur so breit wie das Motiv. */
.einschub-tafel {
  display: flex;
  justify-content: center;
}
/* DIE CREATOR-ZEILE TEILT SICH DIESES AUSSEHEN. Sie traegt dieselbe
   Klasse `einschub-tafel` wie die Bannerzeile und holte sich Hintergrund
   und Rahmen bisher von dort. Nach der Aufteilung in Huelle und Rahmen
   waere sie ohne beides dagestanden; deshalb steht sie hier mit drin,
   statt die Werte ein zweites Mal zu fuehren. */
.einschub-rahmen,
.einschub-zeile {
  position: relative;
  background: var(--ink-700);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  /* Nur so breit wie noetig, aber nie breiter als der Platz. */
  max-width: 100%;
}
.einschub-rahmen img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Haelt den Platz frei, ohne ihn ins Dokument zu schreiben. Der
     Wechsel bei 560 Punkten muss derselbe sein wie am `<source>` im
     Einschub, sonst steht das schmale Motiv in einem Rahmen fuers
     breite. */
  aspect-ratio: 728 / 90;
}
@media (max-width: 560px) {
  .einschub-rahmen img { aspect-ratio: 320 / 100; }
}

/* Die Kennzeichnung. Klein, aber lesbar: Sie muss auffindbar sein, ohne
   das Regal zu dominieren. Auf der Tafel sitzt sie in der Ecke, auf der
   Kachel unter dem Inhalt. */
.einschub-marke {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  white-space: nowrap;
}
/* In der Ecke DES RAHMENS, nicht in der Ecke der Zeile. Damit steht sie
   unmittelbar an der Werbung, auf die sie sich bezieht. */
.einschub-rahmen .einschub-marke,
.einschub-zeile .einschub-marke {
  position: absolute;
  top: 6px;
  right: 8px;
}
/* Auf der Kachel uebernimmt `.marke` das Setzen (oben links), die
   Quellmarke sitzt rechts. Der eigene Hintergrund waere dort doppelt. */
.einschub-kachel .einschub-marke { background: rgba(13, 10, 20, 0.82); }

/* Influencer. Die Markenfarbe kommt als `--kanal` aus der Buchung, damit
   eine neue Plattform ein Eintrag in `config/plattformen.php` bleibt und
   keine Aenderung hier. */
.einschub-kanal { --kanal: var(--grape); }

/* Die Kachel traegt `.serie` mit und erbt damit Rahmen, Rundung und
   den Aufbau aus Bild und Rumpf. Hier steht nur, was ANDERS ist: der
   Streifen in der Markenfarbe oben und das Feld fuer das Zeichen,
   solange kein Profilbild da ist. */
.einschub-kachel { border-top: 3px solid var(--kanal); }

/* Ersatz fuer das Profilbild: das Zeichen gross auf einem Hauch seiner
   Markenfarbe. Es fuellt dasselbe 2:3-Feld, damit die Kachel neben
   ihren Nachbarn nicht aus der Reihe faellt. */
.einschub-zeichenfeld {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background:
    radial-gradient(circle at 50% 40%,
      color-mix(in srgb, var(--kanal) 22%, transparent), transparent 70%),
    var(--ink-600);
}
.einschub-zeichenfeld .plattform-zeichen { width: 56px; height: 56px; }

/* Das Plattformkuerzel oben rechts, wie die Quellmarke einer Serie. */
.einschub-quelle { color: var(--kanal); }

/* Der Knopf unten in der Markenfarbe statt in der des Anbieters. */
.einschub-weiter {
  background: var(--kanal);
  color: #0d0a14;
}
/* Der geerbte Hover ist nur `brightness(1.1)`, und das sieht bei
   kraeftigem Rot fast niemand (Marcus, 07.08.2026: *„Was ich aufgrund
   der roten Farbe nicht erkennen kann. Hat der Auf Youtube ansehen
   Button auch nen Farbhover?"*). Ein Ring in der Kanalfarbe zeigt es
   auch dort, wo die Helligkeit schon am Anschlag ist. */
.einschub-weiter:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanal) 35%, transparent);
}

.einschub-haupt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.einschub-haupt:hover .einschub-name { text-decoration: underline; }

/* DIE BANDEROLE. Links und rechts eine Schraege, mittig der Text, in
   der Farbe des Hauptkanals. `clip-path` statt Bild: gleiche Form bei
   jeder Textlaenge, und der Text bleibt Text.

   Der Farbanteil ist derselbe wie an den Fahnen darunter (26 Prozent),
   damit die Kachel eine Handschrift hat und nicht drei. */
.einschub-band {
  margin: 0 -10px 8px;
  padding: 7px 22px;
  /* NAH AM KNOPF, NICHT NUR VERWANDT (Marcus, 07.08.2026: *„die
     Banderolenfarbe ist aber schon stark abweichend, oder?"*). Bei 26
     Prozent auf dunklem Grund wurde aus YouTube-Rot ein mattes
     Weinrot, waehrend der Knopf darunter das volle Rot trug. Zwei
     Toene derselben Marke in einer Kachel sehen nach Versehen aus.

     72 Prozent statt voller Deckung, damit die Banderole hinter dem
     Knopf zurueckbleibt: Der Knopf ist die Handlung, sie ist die
     Aufschrift. */
  background: color-mix(in srgb, var(--kanal) 72%, transparent);
  border-top: 1px solid var(--kanal);
  border-bottom: 1px solid var(--kanal);
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  text-align: center;
}
.serie h3.einschub-band a,
.einschub-band a {
  /* Weiss mit Schatten: Die Plattformfarben reichen von YouTube-Rot bis
     Bluesky-Blau, und die Hausschrift waere auf dem hellsten davon
     nicht mehr zu lesen. */
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  /* HOECHSTENS ZWEI ZEILEN. Ein Werbetext ist so lang, wie der Kunde
     ihn eintraegt; ohne die Begrenzung waechst die Kachel aus dem
     Raster ihrer Nachbarn heraus. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* WEISS BLEIBT WEISS, AUCH BEIM UEBERFAHREN (Marcus, 07.08.2026:
   *„Jetzt ist es eher so, dass die Schrift beim drübergehen nicht mehr
   lesbar ist."*).

   Die Kachel traegt bewusst die `.serie`-Klassen, damit sie aussieht wie
   ihre Nachbarn. Damit erbt sie auch deren Titel-Hover, und der faerbt
   auf die Akzentfarbe um: Gold auf YouTube-Rot liest niemand mehr. Die
   Banderole hat ihren eigenen Grund und braucht deshalb ihre eigene
   Regel.

   DER SELEKTOR IST ABSICHTLICH SPERRIG. `.einschub-band a:hover` allein
   reichte nicht: `.serie h3 a:hover` weiter oben ist spezifischer und
   gewann. Das faellt bei einer Farbe sofort auf, aber erst im Browser,
   nicht im Quelltext. */
.serie h3.einschub-band a:hover,
.einschub-band a:hover {
  color: #fff;
  text-decoration: underline;
}

.einschub-name {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.einschub-handle { font-size: 12.5px; color: var(--text-dim); }

/* Das Profilbild in der Zeilenform, klein und rund. */
.einschub-kopf {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.plattform-zeichen { width: 20px; height: 20px; color: var(--kanal); }
.plattform-zeichen.gross { width: 40px; height: 40px; }

.einschub-kanaele { display: flex; gap: 8px; }
.einschub-kachel .einschub-kanaele { margin-top: 9px; }

/* EINE FAHNE MIT RUNDEM KOPF: links ein Kreis um das Logo, rechts der
   Text auf demselben Grund, hart abgeschlossen. Untereinander, damit
   jeder Chip die volle Kachelbreite hat.

   Vorher standen hier nur die Symbole nebeneinander. Der Platz war da,
   die Auskunft fehlte: Man sah, DASS es einen zweiten Kanal gibt, aber
   nicht wofuer er steht. */
.einschub-kachel .einschub-kanaele { flex-direction: column; gap: 6px; }

.einschub-kanal {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 2px 10px 2px 2px;
  border-radius: var(--r-pill) var(--r-sm) var(--r-sm) var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--kanal) 38%, transparent);
  background: color-mix(in srgb, var(--kanal) 10%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.einschub-kanal:hover {
  background: color-mix(in srgb, var(--kanal) 20%, transparent);
  border-color: var(--kanal);
}

/* DAS LOGO TRAEGT DIE FARBE, NICHT DER KREIS (Marcus, 07.08.2026:
   *„zumindest fürs Twitch Logo ist die Farbe zu stark"*).

   Vorher war der Kopf voll eingefaerbt und das Logo weiss darauf. Das
   leuchtete staerker als die Serienkacheln daneben und zog den Blick
   auf den Nebenkanal statt auf die Werbung selbst. Jetzt ist der Grund
   ein Hauch der Plattformfarbe und das Logo traegt sie voll: erkennbar,
   aber nicht laut.

   30 Punkte bleiben, damit das Ziel mit dem Daumen zu treffen ist. */
.einschub-kanal .kanal-kopf {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kanal) 26%, transparent);
  color: var(--kanal);
}
.einschub-kanal .kanal-kopf .plattform-zeichen { width: 17px; height: 17px; }

/* EINZEILIG, IMMER. Ein Werbetext ist so lang, wie der Kunde ihn
   eintraegt; ohne diese drei Zeilen bricht die Kachel bei jedem
   laengeren Namen aus dem Raster. */
.einschub-kanal .kanal-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
}

/* In der Zeilenform (Flaechen ohne Kachelraster) bleibt es bei der
   Symbolreihe: Dort steht der Name ohnehin daneben. */
.einschub-zeile .einschub-kanal { padding: 2px; border-radius: var(--r-pill); }
.einschub-zeile .einschub-kanal .kanal-text { display: none; }

/* Dieselben Angaben als Zeile, fuer die Flaechen ohne Kachelraster. */
.einschub-zeile { justify-content: space-between; padding: 14px 18px; }
.einschub-zeile .einschub-haupt { flex-direction: row; align-items: center; gap: 12px; }
.einschub-zeile .einschub-name { font-size: 16px; }
.einschub-zeile .einschub-marke { position: static; }

@media (max-width: 560px) {
  .einschub-zeile { flex-direction: column; gap: 10px; }
}

/* ── Affiliate-Kennzeichnung ────────────────────────────────────────
   Das Sternchen haengt am `rel`-Attribut und NICHT an einer Vorlage.

   Der Grund ist Buchhaltung: Neun Stellen im Haus rendern einen
   Anbieterverweis, und `Anbieterlink::rel()` schreibt an jedem davon
   `sponsored`, sobald in `config/anbieter.php` ein Partnerabkommen
   steht. Wer das Sternchen stattdessen in die Vorlagen tippt, vergisst
   eine. Hier ist es an alle neun zugleich geknuepft, und jede kuenftige
   Stelle bekommt es, ohne dass jemand daran denkt.

   Die Einschuebe sind ausgenommen: Die tragen ihre eigene, deutlichere
   Kennzeichnung und braeuchten keine zweite. */
a[rel~="sponsored"]::after {
  content: "*";
  margin-left: 1px;
  font-size: 0.85em;
  vertical-align: super;
  line-height: 0;
}
.einschub a[rel~="sponsored"]::after { content: none; }

/* Die Erlaeuterung dazu, zwischen Inhalt und Fusszeile. Sie erscheint
   nur, wenn auf der Seite wirklich ein solcher Verweis steht. */
.werbe-fussnote {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 22px 18px;
  font-size: 12px;
  color: var(--text-dim);
}

@media (max-width: 560px) {
  .werbe-fussnote { padding: 0 14px 14px; }
}

/* ── Werbung, Verwaltung ────────────────────────────────────────────
   Ein Kanal ist drei Angaben, die zusammengehoeren: Plattform,
   Anzeigename, Handle. Untereinander sahen sie aus wie neun einzelne
   Felder; nebeneinander sieht man die drei Zeilen als drei Kanaele. */
/* Ein Kanal ist ein Block, keine Zeile.

   Nebeneinander passten die drei Felder in der schmalen Spalte (360
   Punkte) nicht und brachen unregelmaessig um: zwei oben, eins unten in
   voller Breite. Untereinander in einem umrandeten Block sieht man
   dagegen auf einen Blick, was zusammengehoert, und es bleibt in jeder
   Breite gleich. Ein Media Query haette hier nichts genuetzt: Die Spalte
   wird nicht breiter, wenn das Fenster es wird. */
.kanal-zeile {
  display: grid;
  gap: 6px;
  padding: 10px 12px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--ink-800);
}
.kanal-zeile select,
.kanal-zeile input { min-width: 0; margin: 0; }
.kanal-nummer {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kanal-liste {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-dim);
}

/* Die Buehne der Vorschau. Dunkler als die Karte, damit man sieht, dass
   der Einschub darin ein fremder Koerper ist und nicht Teil der
   Verwaltung.

   Die Kachel bekommt die Breite, die sie im Regal hat. Ohne das zoege
   sie sich ueber die ganze Karte, und man pruefte an einem Bild, das es
   so nie gibt. */
.vorschau-buehne {
  background: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px;
  overflow-x: auto;
}
.vorschau-buehne .einschub-kachel { max-width: 190px; }

/* Die hochgeladenen Motive stehen unter dem Feld, nicht hinter einem
   Verweis. Derselbe dunkle Grund wie die Buehne darueber, weil das
   Regal auch dunkel ist: Ein Motiv mit durchsichtigen Raendern sieht
   hier also so aus wie spaeter beim Nutzer.

   ORIGINALGROESSE UND NOTFALLS SCROLLEN, nicht herunterskalieren. Die
   Karte ist im zweispaltigen Layout nur gut 400 Pixel breit; ein auf
   415x53 geschrumpftes Motiv sieht zwar ordentlich aus, beantwortet
   aber genau die Frage nicht, wegen der man hinsieht, naemlich ob die
   Schrift darauf lesbar ist. Dieselbe Ueberlegung steht schon eine
   Karte weiter oben an der `.vorschau-buehne`. */
.motiv-belege {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  overflow-x: auto;
}
.motiv-belege figure { margin: 0; }
.motiv-belege img {
  display: block;
  flex-shrink: 0;
  background: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
/* ── Der Buchungsbogen in zwei Schritten ────────────────────────────
   Marcus, 07.08.2026: „Warum klemmt alles in der linken kleinen
   Spalte?" Der Bogen stand in einer halben Seitenbreite, rechts blieb
   Platz frei. Jetzt laeuft die Seite von oben nach unten und teilt sich
   INNERHALB der Karten auf. */

.schritt { color: var(--text-dim); margin-bottom: 14px; }

.sortenwahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.sortenkarte {
  display: block;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--ink-900);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.sortenkarte:hover, .sortenkarte:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.sortenkarte strong { display: block; margin: 12px 0 4px; font-size: 17px; }

/* Beide Karten gleich hoch und der Text auf einer Linie. Ohne das
   begaenne die eine Beschreibung tiefer als die andere, sobald sie
   unterschiedlich umbrechen. */
.sortenwahl { align-items: stretch; }
.sortenkarte { display: flex; flex-direction: column; }
.sortenkarte strong { margin-top: 0; }
.sortenkarte .hinweis { margin-top: 6px; }

.feld-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 18px;
}
.feld-raster .feld { min-width: 0; }

/* Ausgeklappt wird per Nachbarschaftswaehler, ohne eine Zeile Skript.
   Damit steht es auch dann richtig da, wenn vom Skript nichts ankommt. */
.aufklapp { margin: 10px 0 4px; }
.aufklapp > .inhalt { display: none; padding: 4px 0 10px 26px; }
.aufklapp > label input:checked ~ span { color: var(--accent); }
.aufklapp:has(> label input:checked) > .inhalt { display: block; }

/* Umgekehrt: Hier steht die Warnung fuer den Fall, dass jemand den
   Haken LOEST. Sie ist damit an derselben Stelle wie die Entscheidung
   und nicht in einer Fussnote. */
.aufklapp.umgekehrt:has(> label input:checked) > .inhalt { display: none; }
.aufklapp.umgekehrt > .inhalt { display: block; }

/* ── Motive hineinziehen ──────────────────────────────────────────── */

/* Genres als anklickbare Chips, wie im Regal. Das Kaestchen ist
   versteckt, der Chip IST die Beschriftung: So funktioniert die Wahl
   auch ohne Skript und mit der Tastatur, und der Fokusring sitzt am
   sichtbaren Element statt an einem unsichtbaren Kaestchen. */
.chip-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.chip-wahl .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
  opacity: .45;
  transition: opacity .12s, box-shadow .12s;
}
.chip-wahl .chip input { display: none; }
.chip-wahl .chip b { font-weight: 600; opacity: .7; font-size: .9em; }
.chip-wahl .chip:hover { opacity: .8; }
.chip-wahl .chip:has(input:checked) {
  opacity: 1;
  box-shadow: 0 0 0 2px currentColor;
}
.chip-wahl .chip:focus-within { box-shadow: 0 0 0 2px var(--accent); }

.ablage-paar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  /* GLEICH HOCH UND AUF EINER LINIE (Marcus, 07.08.2026: „Die Banner
     sind nicht in gleicher Höhe."). Die beiden Motive sind
     unterschiedlich hoch, 90 gegen 100 Punkte; ohne `stretch` endet
     jeder Kasten dort, wo sein Bild endet, und die Oberkanten
     verrutschen zusätzlich um den Aussenabstand des Labels. */
  align-items: stretch;
}
.ablage {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 12px;
  border: 2px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--ink-900);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ablage:hover, .ablage.drueber { border-color: var(--accent); }
.ablage.drueber { background: color-mix(in srgb, var(--accent) 12%, var(--ink-900)); }
.ablage.laeuft { opacity: .6; }

.ablage-titel { display: block; font-weight: 600; margin-bottom: 8px; }
.ablage-text {
  display: block;
  /* Schiebt sich nach unten, damit die Zeile in beiden Kaesten auf
     derselben Hoehe steht. */
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Der Platz steht auch leer schon in den Maszen des Motivs. Sonst
   springt die halbe Seite, sobald das erste Bild ankommt. */
.ablage.breit .ablage-bild { width: 728px; height: 90px; }
.ablage.schmal .ablage-bild { width: 320px; height: 100px; }
/* Die Creator-Kachel im Hochformat, so wie sie im Regal steht. */
.ablage.kachel .ablage-bild { width: 190px; height: 285px; }
.ablage-bild {
  display: block;
  max-width: 100%;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
}
.ablage-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ablage-bild img.leer { display: none; }

/* Das Dateifeld bleibt im Bogen, es traegt die Datei beim Speichern
   mit. Sichtbar ist es nur ohne Skript. */
.motiv-form.mit-skript input[type="file"] { display: none; }

/* Der Bogen speichert beim Verlassen eines Feldes. Waehrenddessen ein
   Hauch Zurueckhaltung, damit man sieht, dass etwas laeuft, ohne dass
   die Seite springt. */
.buchung-form.speichert { opacity: .8; }

/* Ein Pflichtfeld, das leer ist, leuchtet. Bernstein und nicht Rot: Es
   ist noch kein Fehler, es fehlt nur noch etwas. Dieselbe Farbe wie die
   Luecke am Freigabe-Knopf, damit beides zusammengehoert. */
.buchung-form input.fehlt {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.pflichtstern { color: var(--gold); font-weight: 700; }

/* Ohne Skript stehen beide Felder da, dann waere ein Stern an beiden
   irrefuehrend. Er kommt erst mit der Steuerung. */
.buchung-form:not(.mit-skript) .pflichtstern { display: none; }
.bogen-meldung { margin-top: 14px; }
.ablage-meldung { margin-top: 12px; }

/* WAS NOCH FEHLT, IST KEIN FEHLER, sondern ein offener Punkt. Deshalb
   Bernstein und nicht Rot: Im Team arbeitet jemand mit Rot-Gruen-
   Schwaeche, und ein roter Satz neben einem grauen Knopf liest sich wie
   eine Stoerung, obwohl nur noch etwas einzutragen ist. */
.hinweis.offen { color: var(--gold); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }

.motiv-belege figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Vier Spalten Zahlen passen in der schmalen Karte nicht immer. Statt
   sie zu quetschen darf die Tabelle in sich schieben; die Seite selbst
   bleibt ohne waagerechten Balken. */
.tabelle-schiebbar { overflow-x: auto; }

/* ── Der Einwilligungsdialog ────────────────────────────────────────
   UNTEN ANGEHEFTET, NICHT MITTIG ÜBER ALLES. Ein Kasten in der
   Bildschirmmitte mit abgedunkeltem Hintergrund zwingt zur Entscheidung,
   bevor man weiss, worueber man entscheidet. Unten am Rand kann man erst
   sehen, was die Seite ueberhaupt ist.

   KEINE FALLE BEI DEN KNOEPFEN: Ablehnen und Speichern sind gleich gross
   und stehen nebeneinander. Ein blasser Textlink neben einem grellen
   Knopf ist genau das, woran Einwilligungen vor Gericht scheitern. */
.einwilligung {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(560px, calc(100vw - 24px));
  background: var(--ink-800);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  padding: 18px 20px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.einwilligung h2 { margin: 0 0 8px; font-size: 17px; }
.einwilligung .schalter-zeile { align-items: flex-start; gap: 10px; margin: 12px 0; }
.einwilligung .schalter-zeile b { display: block; }
.einwilligung .schalter-zeile .hinweis { margin-top: 2px; }

.einwilligung-knoepfe {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.einwilligung-knoepfe .knopf { flex: 1 1 0; text-align: center; }

/* Waehrend gespeichert wird, damit niemand doppelt drueckt. */
.einwilligung-form.speichert { opacity: .7; pointer-events: none; }

/* Der Rahmen mit fremder Werbung. Dieselben Masze wie ein eigenes
   Motiv, damit die Zeile nicht springt, je nachdem wer den Platz
   gerade fuellt. */
.einschub-rahmen.netzwerk { padding: 0; }
.einschub-rahmen.netzwerk iframe {
  display: block;
  border: 0;
  width: 728px;
  max-width: 100%;
  height: 90px;
}
@media (max-width: 560px) {
  .einschub-rahmen.netzwerk iframe { width: 320px; height: 100px; }
}

/* ── Werbenetzwerke in der Verwaltung ────────────────────────────────
   Mehrere Anbieter nebeneinander, jeder mit eigenem Schalter. Der
   Zustand muss auf einen Blick lesbar sein, ohne die Karte zu oeffnen;
   deshalb steht der Schalter in der Kopfzeile und nicht im Klappfach.

   ROT UND GRUEN GEHEN HIER NICHT als Paar: Im Team arbeitet jemand mit
   Rot-Gruen-Schwaeche. „An" ist deshalb die Akzentfarbe mit Fuellung,
   „Aus" ein leiser Rahmen, der Unterschied liegt in Fuellung und
   Kontrast, nicht im Farbton. */
.netzwerk-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.netzwerk-kopf h2 { margin: 0; }
/* GLEICHE BREITE IN BEIDEN ZUSTAENDEN. „An" ist kuerzer als „Aus";
   ohne das Mindestmass springt der Knopf beim Umschalten in der
   Groesse, und in anderen Sprachen faellt das noch staerker aus. */
.netzwerk-schalter { margin: 0; }
.netzwerk-schalter .knopf { min-width: 72px; text-align: center; }
.knopf.netz-an {
  background: var(--accent); color: #07131a;
  border-color: transparent; font-weight: 700;
}
.knopf.netz-an:hover { filter: brightness(1.08); }

.netzwerk-fach { margin-top: 16px; }
.netzwerk-fach > summary {
  cursor: pointer; color: var(--text-dim); font-size: 13.5px;
  padding: 6px 0; user-select: none;
}
.netzwerk-fach > summary:hover { color: var(--accent); }
.netzwerk-fach[open] > summary { margin-bottom: 10px; }

/* Die Adresse des Rahmens: Angabe plus Pruefknopf in einer Zeile. */
.netzwerk-adresse {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 6px;
}
.netzwerk-adresse code {
  background: var(--ink-800); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 9px; font-size: 13px;
}
.netzwerk-adresse form { margin: 0; }

.netzwerk-abweichend { margin: 4px 0 18px; }
.netzwerk-abweichend > summary {
  cursor: pointer; color: var(--text-dim); font-size: 13px; padding: 5px 0;
}
.netzwerk-abweichend > summary:hover { color: var(--accent); }