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

/* Das Beta neben der Marke. Ein Nachbar im Flex-Fluss, kein Overlay:
   Der erste Anlauf legte es quer darueber und sah nach Marcus' Urteil
   "recht kacke" aus. Als Nachbar liegt es ausserdem IM Link und macht
   dessen Klickflaeche groesser statt kleiner; das `pointer-events: none`
   von vorher erledigt sich damit.

   `line-height: 1` und `align-self: center`, damit die Pille auf der
   Mittellinie des Schriftzugs sitzt und nicht an dessen Grundlinie
   klebt. Der Schriftzug ist 21px, die Pille 11px. */
.beta-marke {
  align-self: center;
  flex: none;
  padding: 2px 7px 3px;
  border: 1px solid var(--red);
  border-radius: var(--r-pill);
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  /* Die Marke erbt -0.3px, das staucht Versalien unleserlich. */
  letter-spacing: 1.4px;
  text-transform: uppercase;

  /* OPTISCHER AUSGLEICH, 1.5px nach unten, und der Wert ist gemessen,
     nicht geschaetzt.

     `align-self: center` zentriert die BOXEN, und die Box des
     Schriftzugs reicht bis zur Unterlaenge des g in "Regal" hinunter.
     Seine Versalmitte liegt damit unter der Boxmitte. Die Pille hat
     keine Unterlaengen, ihre Versalmitte ist gleich der Boxmitte. Zwei
     exakt zentrierte Boxen, und die Buchstaben stehen trotzdem nicht auf
     einer Linie.

     Gemessen am 27.08.2026 an der laufenden Seite, ueber die echte
     Grundlinie (ein leeres Inline-Block-Element auf `baseline`) und die
     Versalhoehe aus `measureText('H').actualBoundingBoxAscent`:
     Versalmitte Schriftzug 34.0, Versalmitte Beta 32.5.

     `transform` und nicht `margin`, weil es das Layout nicht anfasst und
     der Wert direkt die Verschiebung ist. Bei `align-self: center` haette
     ein `margin-top` nur die HALBE Wirkung, was beim naechsten Lesen
     niemand erwartet. */
  transform: translateY(1.5px);
}
.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; }

/* Der Satz unter den Knöpfen sagt, was beim Klick passiert, und ist damit
   die Grundlage der Einwilligung. Er muss lesbar sein, nicht versteckt:
   Ein Hinweis in Grau auf Grau wäre juristisch derselbe Text und
   praktisch keiner. Deshalb dieselbe Farbe wie andere Hinweise auf der
   Seite und nur eine Stufe kleiner. */
.social-hinweis {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}
.social-hinweis a { white-space: nowrap; }

.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; }
/* `relative`, damit das i zur Herkunft des Covers in seiner Ecke sitzt. */
.serie-bild { flex: 0 0 190px; position: relative; }
.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;
}

/* ── Bis hierhin gesehen ────────────────────────────────────────────
   Steht unter der Folgenliste und ist eingeklappt: der seltenere Weg,
   der die Liste darüber nicht verdrängen soll. Der Pfeil dreht sich
   beim Aufklappen, damit auch ohne Fokus sichtbar ist, was passiert. */
.bis-hierhin { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.bis-hierhin > summary {
  display: flex; align-items: center; gap: 7px;
  color: var(--text-dim); font-size: 13px; cursor: pointer;
  list-style: none; user-select: none;
}
.bis-hierhin > summary::-webkit-details-marker { display: none; }
.bis-hierhin > summary::marker { content: ''; }
.bis-hierhin > summary::before {
  content: '\203A'; display: inline-block; color: var(--text-dim);
  font-size: 15px; line-height: 1; transition: transform .15s;
}
.bis-hierhin[open] > summary::before { transform: rotate(90deg); color: var(--accent); }
.bis-hierhin > summary:hover { color: var(--accent); }
.bis-hierhin .hinweis { margin: 9px 0 10px; }
.bis-hierhin .folgenwahl { max-width: 340px; }
.bis-hierhin button { margin-top: 11px; }

.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: 6px; }
.reiter.arten a {
  padding: 6px 14px; font-size: 13px;
  background: transparent;
}
.reiter.arten a.aktiv {
  background: transparent; color: var(--accent); border-color: var(--accent);
}

/* Was im aktiven Reiter zu sehen ist, in einem Satz. Zwei Wörter am
   Reiter allein haben es nicht getragen: Ein Tester hielt beide Listen
   für dasselbe und suchte in der Serienliste nach seinem Namen. Steht
   eingerückt auf Höhe der Reiterbeschriftung, damit es zu ihr gehört
   und nicht zur Überschrift darüber. */
.reiter-hilfe {
  margin: 0 0 14px 15px;
  color: var(--text-dim);
  font-size: 12.5px;
}

/* ── 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; }
/* DIE MASSE STEHEN ALS VARIABLEN, weil das i zur Herkunft des Covers
   absolut liegt: Es steht NEBEN dem Zeilenverweis (ein Verweis in einem
   Verweis geht nicht) und muss seine Ecke selbst ausrechnen. So rutscht
   es nicht weg, sobald hier jemand ein Maß ändert. */
.beliebt-karte {
  position: relative; border-bottom: 1px solid var(--border);
  --rand: 6px; --platz: 34px; --luecke: 14px;
  --bild-breite: 40px; --bild-hoehe: 57px;
}
.beliebt-karte:last-child { border-bottom: none; }
/* `:not(.bildquelle)`, weil das i als eigener Verweis direkt in der Zeile
   steht: Ohne die Ausnahme bekommt es das Polster der Zeile und wird
   eifoermig statt rund. Beim Bauen genau so gemessen (14 auf 20 Pixel). */
.beliebt-karte > a:not(.bildquelle),
.beliebt-karte > div {
  display: flex; align-items: center; gap: var(--luecke);
  padding: 9px var(--rand); color: var(--text);
}

/* Die Ecke des kleinen Bildes, von links her gerechnet. */
.beliebt-karte > .bildquelle {
  left: calc(var(--rand) + var(--platz) + var(--luecke) + var(--bild-breite) - 2px);
  right: auto;
  top: calc(50% + var(--bild-hoehe) / 2 - 2px);
  bottom: auto;
  transform: translate(-100%, -100%);
}
.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 var(--platz); 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: var(--bild-breite); height: var(--bild-hoehe);
  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); }
/* ── Woher das Cover kommt ─────────────────────────────────────────────
   MyAnimeLists Erlaubnis verlangt die Namensnennung dort, wo seine Daten
   stehen (08.09.2026). Das kleine i sitzt deshalb im Cover selbst und
   führt zum Eintrag genau dieser Serie.

   Unten rechts, weil oben links die Statusmarke sitzt und oben rechts der
   Anbieter. Es liegt NEBEN dem Bildverweis im Quelltext, nicht darin: Ein
   Verweis in einem Verweis geht nicht. */
.bildquelle {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(13, 10, 20, 0.82); border: 1px solid var(--border);
  backdrop-filter: blur(3px);
  color: var(--text-dim); font-size: 12px; font-weight: 700; font-style: italic;
  line-height: 1;
}
.bildquelle:hover,
.bildquelle:focus-visible {
  color: var(--text); border-color: var(--accent); text-decoration: none;
}

/* Kleine Fassung für kleine Bilder: die Zeilen der Ranglisten ab Platz 4
   (40 px breit) und die Vorschaubilder der Verwaltung. Marcus, 23.09.2026:
   „mach das i ab Platz 4 einfach ein Drittel kleiner". */
.bildquelle.klein {
  right: 2px; bottom: 2px;
  width: 13px; height: 13px; font-size: 9px; border-width: 1px;
}

/* Der Vermerk beim Zeigen. Er klappt nach oben auf und bleibt schmal
   genug, dass er auch in einer Kachel steht: `.serie` schneidet ab. */
.bildquelle-text {
  position: absolute; right: 0; bottom: calc(100% + 6px);
  width: max-content; max-width: 150px;
  padding: 5px 8px; border-radius: var(--r-sm);
  background: var(--ink-800); border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text); font-size: 11.5px; font-weight: 600; font-style: normal;
  line-height: 1.3; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
  pointer-events: none;
}
.bildquelle:hover .bildquelle-text,
.bildquelle:focus-visible .bildquelle-text { opacity: 1; visibility: visible; }

/* Die Hülle um ein Bild, das selbst kein Verweis ist: Sie gibt dem i den
   Bezugspunkt. `line-height: 0` verhindert die Lücke unter dem Bild, die
   sonst das i nach unten schiebt. */
.bildfeld {
  position: relative; display: inline-block; line-height: 0;
}

/* Auf dem Podest heisst die Huelle NICHT `podest-bild...`: Die Tests
   zaehlen die Karten ueber `podest-bild`, und ein Klassenname mit
   demselben Anfang zaehlt dort doppelt. Genau das ist beim Bauen
   passiert, sichtbar nur im Test der Nachladeportionen. */
.podest-huelle { margin-top: 10px; }
.podest-anime .podest-huelle .podest-bild { margin-top: 0; }

.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; }
/* DIE UEBERSCHRIFT STEHT UEBER IHRER SPALTE, nicht in deren Mitte.

   `th` ist im Browser von Haus aus zentriert. Bei einer breiten Spalte
   steht die Ueberschrift dadurch weit rechts, waehrend der Wert darunter
   links anfaengt: Genau das hat Marcus am 11.08.2026 in der
   Personenliste gesehen („Die bestehenden Daten scheinen verschoben oder
   durch die zu grosze Oberflaeche zu weit auseinander."). */
table.liste th { text-align: left; font-weight: 600; }
table.liste th.rechts { text-align: right; }
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; }
/* Die Rollenspalte traegt ein Wort oder ein Auswahlfeld; ohne Breite
   nimmt sich die Namensspalte den ganzen Rest und reiszt die Zeile
   auseinander. */
table.liste .rollen-spalte { width: 240px; }
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); }
/* Ohne feste Grenze: In der schmalen Spalte begrenzt die Karte, auf
   einem breiten Reiter darf die Liste die Breite nutzen (Marcus,
   08.08.2026). */
.aenderungen table { margin-top: 6px; }
.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);
  /* Anker für das X. Ohne das bezöge sich sein `absolute` auf die Seite. */
  position: relative;
}
.angeheftet summary {
  cursor: pointer; padding: 8px 12px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  /* Platz für das X, damit die Beschriftung nicht darunter läuft. */
  padding-right: 34px;
}

/* Das X zum Lösen, oben rechts.
   Liegt ÜBER dem `summary` statt darin: Ein Klick im `summary` klappt die
   Karte zu, und ein Formular, das erst den Aufklapper auslöst und dann
   sich selbst, bräuchte ein Skript. So braucht es keins. */
.angeheftet .loesen {
  position: absolute; top: 4px; right: 6px; margin: 0; z-index: 1;
}
.angeheftet .loesen button {
  border: none; background: none; cursor: pointer;
  color: var(--text-dim); font-size: 19px; line-height: 1;
  padding: 3px 7px; border-radius: var(--r-sm);
}
.angeheftet .loesen button:hover {
  color: var(--text); background: rgba(255, 255, 255, 0.08);
}
/* Die Tastatur muss sehen, wo sie steht: Der Knopf hat keinen Rahmen. */
.angeheftet .loesen button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.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,
/* AUCH IM STAMMDATENBOGEN (09.09.2026). Er setzt die Klasse seit jeher
   und sagt es in seinem eigenen Kommentar zu, hing aber nicht an dieser
   Regel: Sie galt nur unter `.buchung-form`, der Bogen traegt `karte`.
   Aufgefallen beim Nachsehen, nachdem die Firma Pflicht wurde. */
#stammdaten 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); }

/* Ein Hinweis, der auffallen soll, ohne wie ein Fehler auszusehen. Gold
   und nicht Rot: Rot heisst hier "etwas ist schiefgegangen", und
   schiefgegangen ist nichts. Es ist eine Bitte, keine Fehlermeldung.
   `achtung` ist derselbe Modifikator wie am Steckbrief, damit es nicht
   zwei Namen fuer dieselbe Absicht gibt. */
.hinweis.achtung { color: var(--gold); font-weight: 600; }
.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. */
/* PLATZ FUER DIE FUSSZEILE, solange der Kasten steht.

   Der Kasten haengt fest 16px ueber dem Fensterboden. Alles, was beim
   Herunterscrollen an diese Stelle kommt, liegt darunter und ist nicht
   mehr anklickbar, und ganz unten steht die Fusszeile: Impressum,
   Datenschutz, der Weg fuer Firmen und die Sprachwahl. Getroffen hat es
   damit genau die Leute, die den Kasten noch sehen, also jeden neuen
   Besucher. Bei der Sprachwahl wiegt es doppelt: Wer die Seite nicht
   versteht, kam an die Umschaltung nicht heran.

   Die Seite bekommt deshalb unten so viel Luft, wie der Kasten hoch ist,
   plus seinen Abstand zum Fensterboden. Dann laesst sich die Fusszeile
   ueber ihn hinausschieben. Das genaue Mass misst `einwilligung.js` am
   Kasten selbst, denn seine Hoehe haengt an Sprache und Fensterbreite;
   der Ruecklauf hier traegt, solange kein Skript laeuft. */
body.hat-einwilligung {
  padding-bottom: calc(var(--einwilligung-hoehe, 400px) + 24px);
}

.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); }

/* ── Preiszeilen in der Verwaltung ───────────────────────────────────
   Eine Zeile je Werbeart statt einer Tabelle. Die Einheit steht an
   jedem Feld, weil die Spaltennamen allein offen ließen, ob die Mengen
   in Stück oder in Einheiten zählen (Marcus, 07.08.2026). */
.preiszeile {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.preiszeile:last-of-type { border-bottom: none; }
.preiszeile-was { margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.preiszeile-was .hinweis { margin: 0; }

.preiszeile-felder {
  display: grid; gap: 12px;
  /* GEDECKELT AUF VIER SPALTEN: Ohne Obergrenze zieht auto-fit auf
     breiten Bildschirmen sieben Spalten auf, von denen drei leer
     bleiben, und die Felder stehen verloren am linken Rand. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 720px;
}
.preiszeile-felder label { display: block; margin: 0; }
.preiszeile-felder label > span:first-child {
  display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 4px;
}

/* DIE EINHEIT STEHT EINMAL IN DER KOPFZEILE, nicht in jedem Feld.
   Erster Versuch war sie im Eingabefeld neben der Zahl; sie nahm dort
   die halbe Breite, und schon fuenfstellige Mengen wurden abgeschnitten
   (Marcus, 07.08.2026, mit Bildschirmfoto). Mengenfelder brauchen bis zu
   sieben Stellen. */
.einheit-merker {
  margin-left: auto; font-size: 12.5px; color: var(--text-dim);
}
.preiszeile-felder input { width: 100%; margin: 0; }

/* Die Probe aufs Exempel. Bernstein wie die Lücken am Freigabe-Knopf:
   eine Angabe, die man liest, kein Fehler. */
.preiszeile-probe {
  margin: 10px 0 0; font-size: 13px; color: var(--gold);
}

/* Die Merkmale eines Pakets: alles Wesentliche in einer Reihe.
   Nicht anklickbar, deshalb ohne Zeigefinger und ohne Ausgrau-Zustand
   der auswaehlbaren Chips. */
.paket-merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.paket-merkmale .chip { cursor: default; opacity: 1; }

/* ── Pakete: Anlegen links, Bestand rechts ───────────────────────────
   Marcus, 08.08.2026: „Bitte die erstellten Pakete nach unten schieben
   oder in einen rechten Bereich." Das Anlegen-Formular ist lang; stand
   es unter der Liste, scrollte man an allem vorbei, um ein neues Paket
   zu bauen. */
.paket-bereich { display: grid; gap: 20px; align-items: start; }

@media (min-width: 1100px) {
  /* Das Formular braucht mehr Platz als die Karten, deshalb nicht
     halbe-halbe. */
  .paket-bereich { grid-template-columns: minmax(420px, 3fr) 2fr; }
  /* Beim Blättern durch viele Pakete bleibt der Bogen stehen. */
  .paket-neu { position: sticky; top: 16px; }
}

.paket-liste .karte:first-child { margin-top: 0; }

/* Was ein Paket gegenueber dem Einzelpreis spart (Marcus, 08.08.2026).
   Die Aussage zuerst und kraeftig, der Vergleichspreis daneben gedaempft:
   Beim Ueberfliegen der Liste zaehlt die Zahl, nicht die Herleitung.
   KEIN GRUEN GEGEN ROT. Der Regelfall traegt die normale Textfarbe, nur
   die Ausnahme „teurer als einzeln" leuchtet in Bernstein. */
.paket-rabatt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 6px 0 0; font-size: 13px;
}
.paket-rabatt-wert { font-weight: 600; }
.paket-rabatt-liste { color: var(--text-dim); }
.paket-rabatt.achtung .paket-rabatt-wert { color: var(--gold); }

/* Zwei Felder nebeneinander, wo sie zusammengehoeren (PLZ und Ort, Land
   und Telefon). Auf dem Handy untereinander: Nebeneinander waere jedes
   Feld zu schmal fuer das, was hineingehoert. */
.feldpaar { display: grid; gap: 0 14px; }
@media (min-width: 620px) {
  .feldpaar { grid-template-columns: 1fr 1fr; }
}

/* „freiwillig" neben der Feldbezeichnung. Klein und gedaempft: Es ist
   eine Einschraenkung der Pflicht, keine eigene Ansage. */
label .klein {
  font-style: normal; font-size: 12px; color: var(--text-dim); font-weight: 400;
}

/* Der Hinweis unter gesperrten Feldern. Bernstein wie ueberall, wo
   etwas nicht falsch, aber zu beachten ist. */
.gesperrt-hinweis { color: var(--gold); margin: -4px 0 14px; }
input[readonly] { opacity: .75; cursor: not-allowed; }

/* Das Ablagefeld: Dateien hineinziehen. Gestrichelter Rand, weil er
   sagt „hier hinein" und nicht „hier steht etwas". */
.ablage {
  display: block; border: 2px dashed var(--border); border-radius: 12px;
  padding: 18px; text-align: center; cursor: pointer; transition: .15s;
}
.ablage:hover, .ablage.darueber { border-color: var(--gold); background: rgba(255,198,63,.06); }
.ablage .ablage-titel { display: block; font-weight: 600; margin-bottom: 4px; }
.ablage .hinweis { margin: 0; }
.ablage input[type="file"] { display: none; }
.ablage-liste { display: block; margin-top: 8px; font-size: 13px; color: var(--gold); }
.ablage.hat-dateien { border-style: solid; border-color: var(--gold); }

/* Volle Breite fuer Reiter, die Listen zeigen. Die Karten stehen
   untereinander, jede so breit wie der Inhalt es braucht. */
.voll { display: flex; flex-direction: column; gap: 20px; }
.voll > .spalte { display: contents; }

/* Kompakte Tabellenzeilen. Hiess frueher `schmal` und erbte damit
   `max-width: 440px; margin: 40px auto` von der Klasse fuer schmale
   SEITEN: Die Tabelle stand zusammengequetscht und zentriert in ihrer
   Karte (Marcus, 08.08.2026, mit Bildschirmfoto, als der Regal-Reiter
   die volle Breite bekam und es endlich auffiel). */
table.liste.eng td { padding: 7px 10px; }

/* ── Selbst buchen: der Bogen für Creator ───────────────────────────
   Marcus, 07.08.2026: „Der Preis steht immer sichtbar, nicht erst am
   Ende." Deshalb klebt die Leiste am unteren Rand und läuft mit, statt
   als Zeile unter dem letzten Feld zu stehen. */
.paketwahl {
  display: grid; gap: 10px; margin: 4px 0 6px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.paket-karte {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; cursor: pointer;
  background: var(--ink-800); border: 1px solid var(--border);
  border-radius: var(--r-md); transition: .15s;
}
.paket-karte input { display: none; }
.paket-karte:hover { border-color: var(--accent); }
.paket-karte:has(input:checked) {
  border-color: var(--accent); background: rgba(155, 109, 255, .08);
}
.paket-karte:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.paket-karte b { font-size: 14.5px; }
.paket-karte .paket-preis { font-weight: 700; color: var(--accent); }
.paket-karte .hinweis { margin: 0; font-size: 12.5px; }
/* Gesperrt heißt sichtbar, aber nicht wählbar: Ein Paket, das einfach
   verschwindet, sieht aus wie ein Fehler. */
.paket-karte.gesperrt { opacity: .5; cursor: not-allowed; }
.paket-karte.gesperrt:hover { border-color: var(--border); }
.paket-karte .sperrgrund { color: var(--gold); }

/* Die eigene Anzeige zur Kontrolle: beide Motive untereinander.

   NICHT DIE AUSLIEFERUNG, sondern die Pruefung (Marcus, 11.08.2026:
   „Dort steht nur ein Banner als Vorschau."). Deshalb beide in ihren
   echten Maszen, mit Beschriftung, und nicht das eine je nach
   Bildschirmbreite. */
.motive-vorschau { display: flex; flex-direction: column; gap: 10px; }
.motiv-fassung { margin: 0; }
.motiv-fassung img {
  display: block; max-width: 100%; height: auto;
  border-radius: var(--r-sm); background: var(--ink-800);
}
/* DER PLATZ KOMMT AUS DEM SEITENVERHAELTNIS, nicht aus `width`/`height`
   am Bild: Diese Attributkombination ist das Leaderboard-Mass, und
   generische Filterregeln verstecken Elemente allein daraufhin. Das hat
   uns v0.117.1 schon einmal gekostet und am 11.08.2026 erneut. */
.motiv-fassung.breit img { aspect-ratio: 728 / 90; width: 728px; }
.motiv-fassung.schmal img { aspect-ratio: 320 / 100; width: 320px; }
.motiv-fassung figcaption {
  margin-top: 4px; font-size: 12px; color: var(--text-dim);
}
.motiv-fassung figcaption .hinweis { margin: 0 0 0 6px; display: inline; }
/* Fehlt ein Motiv, bleibt die Luecke stehen: Ein weggelassenes Bild
   saehe aus, als gaebe es nur eines. */
.motiv-leer {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 12px;
  border: 1px dashed var(--border); border-radius: var(--r-sm);
  color: var(--text-dim); font-size: 12.5px;
}

/* Das Mengenfeld traegt eine Zahl, keinen Aufsatz. Ueber die volle
   Breite sah es aus wie ein Textfeld (Marcus, 11.08.2026: „Sinnlos
   groszes Menue"). */
.mengenfeld input { max-width: 220px; }

/* Die beiden Motiv-Ablagen stehen nebeneinander, jede mit ihrer
   Warnzeile darunter. */
.ablage-spalte { display: flex; flex-direction: column; gap: 4px; }
.ablage-spalte .feldwarnung { margin: 0; }

/* Die Mailadresse einer Person: Feld und Knopf in einer Zeile. */
.adresszeile { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.adresszeile input { max-width: 260px; }

/* Die Namensfelder: drei nebeneinander, solange Platz ist. */
.namensfelder {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.namensfelder label { margin: 0; }

/* Der Neukunden-Hinweis in der Freigabe. Bernstein und nicht Rot: Es
   ist keine Stoerung, sondern ein Blick, der sich lohnt. */
.neukunde {
  margin: 12px 0; padding: 12px 14px;
  border: 1px solid var(--gold); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.neukunde .warnzeile { margin: 0; font-weight: 700; color: var(--gold); }

/* Was die Anzeige einbringt (Marcus, 11.08.2026). Steht in der Freigabe
   und dient dem Abgleich gegen den Kontoauszug, deshalb Zahlen mit
   gleichen Ziffernbreiten: Untereinander stehende Betraege lassen sich
   sonst nicht auf einen Blick vergleichen. */
.wertblock {
  margin: 12px 0 18px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--ink-700);
}
.wertblock h3 { margin-top: 0; }
.wertblock .liste { margin: 8px 0; }
.wertblock td, .betrag { font-variant-numeric: tabular-nums; }
.wertblock th { font-weight: 400; text-align: left; }
.wertblock .hinweis { margin: 6px 0 0; }
.wertblock .leise { opacity: .7; font-size: .85em; }

/* Die Summenzeile traegt einen Strich, nicht nur Fettdruck: Wo Betraege
   addiert werden, erwartet das Auge einen. */
.wertblock .summenzeile th, .wertblock .summenzeile td {
  border-top: 1px solid var(--border); font-weight: 700;
}
.wertblock .summenzeile.stark td { font-size: 1.15em; }

.wertblock .zahlstand {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  margin: 10px 0 0;
}
.wertblock .zahlstand dt { opacity: .75; }
.wertblock .zahlstand dd { margin: 0; }

/* Die Gesamtsumme unter der Anzeigenliste. */
p.summenzeile {
  margin: 10px 0; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.betrag .hinweis { margin: 2px 0 0; font-weight: 400; }

/* Der Absende-Knopf, waehrend die Buchung laeuft.

   Er ist zu und sagt es auch: Ein Knopf, der sich nur nicht mehr
   druecken laesst, sieht aus wie ein haengender Knopf, und genau dann
   klickt man wild weiter (Marcus, 11.08.2026). */
.knopf.laeuft, .knopf:disabled {
  opacity: .6; cursor: progress; filter: saturate(.5);
}

/* ZU, WEIL ETWAS FEHLT, und nicht weil gerade etwas laeuft. Die Regel
   darueber bedeutet im ganzen Regal „arbeitet" und zeigt deshalb einen
   Fortschrittszeiger; an der Kasse wartet aber nichts, dort fehlt der
   Haken unter den AGB. Steht bewusst NACH jener Regel: Beide sind gleich
   spezifisch, also entscheidet die Reihenfolge. */
.knopf.gesperrt, .knopf.gesperrt:disabled {
  opacity: .45; cursor: not-allowed; filter: none;
}

/* Die Wahl zwischen Banner und Creator-Kachel.

   DIESELBEN KARTEN WIE BEI DEN PAKETEN, nur sind es Links und keine
   Auswahlfelder: Ein Klick laedt den passenden Bogen. Der gewaehlte
   traegt `aktiv` statt eines angehakten Feldes, deshalb steht die
   Hervorhebung hier noch einmal. */
.formwahl a.paket-karte { text-decoration: none; color: inherit; }
.formwahl a.paket-karte.aktiv {
  border-color: var(--accent); background: rgba(155, 109, 255, .08);
}

.frei-block { margin-top: 6px; }
.frei-block[hidden] { display: none; }

.preisleiste {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; padding: 12px 16px;
  background: var(--ink-900); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 -6px 18px rgba(0,0,0,.35);
  /* Damit die Lücken-Zeile eine eigene Zeile bekommt und Preis und
     Knopf dort bleiben, wo sie waren. */
  flex-wrap: wrap;
}

/* Was zum Abschicken noch fehlt, im Klartext.

   BERNSTEIN, NICHT ROT: Es ist kein Fehler, sondern ein Zwischenstand.
   Rot gehört der abgewiesenen Eingabe (`.feldwarnung`), und im Team ist
   jemand rot-grün-schwach, also muss die Farbe für sich allein stehen
   können. Der Text sagt es ohnehin.

   `order: -1` und volle Breite: Sie steht ÜBER Preis und Knopf. Dorthin
   schaut man, wenn der Knopf nicht reagiert. */
.luecken-zeile {
  flex-basis: 100%; order: -1; margin: 0;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(244, 117, 33, 0.12);
  border: 1px solid rgba(244, 117, 33, 0.45);
  color: var(--accent); font-size: 13px; line-height: 1.45;
}
.preisleiste .preis-zahl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.preisleiste [data-preis-betrag] { font-size: 21px; font-weight: 700; }
.preisleiste .hinweis { margin: 0; }
.preisleiste .knopf { white-space: nowrap; }

/* Die Summe auf der Bezahlseite steht ab, damit sie nicht als vierte
   gleichrangige Zeile untergeht. */
.betrag-liste .summe { border-top: 1px solid var(--border); padding-top: 7px; margin-top: 3px; }
.betrag-liste .summe dd { font-weight: 700; font-size: 17px; }

/* Der Zustand einer Buchung in der Übersicht des Kunden. Bernstein für
   „wartet auf uns", grün für „läuft", gedämpft für alles andere: Ein
   Rot-Grün-Paar wäre für einen Teil der Leute nicht unterscheidbar. */
.lage {
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  background: var(--ink-600); color: var(--text-dim);
}
.lage.wartet { background: rgba(255, 198, 63, .16); color: var(--gold); }
.lage.laufend { background: rgba(37, 207, 193, .16); color: var(--teal); }
.lage.entwurf { background: rgba(155, 109, 255, .16); color: var(--grape); }
/* Geplant steht neben Laufend und muss sich davon auf einen Blick
   unterscheiden. Blau gegen Tuerkis, nicht zwei Gruentoene: Im Team
   arbeitet jemand mit Rot-Gruen-Schwaeche. */
.lage.geplant { background: rgba(67, 176, 255, .16); color: var(--sky); }

.anzeige-karte .karte-kopf { align-items: center; }

/* Was wir dem Kunden zu seiner Anzeige gesagt haben. Eine Spur, keine
   Tabelle: Datum, Satz, bei Bedarf der Grund. Neuestes oben, weil die
   letzte Nachricht die ist, nach der jemand sucht. */
.anzeige-verlauf {
  list-style: none; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.anzeige-verlauf li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
  font-size: 13.5px; line-height: 1.45;
}
.anzeige-verlauf .wann { color: var(--text-dim); white-space: nowrap; }
.anzeige-verlauf .was { font-weight: 600; }
/* Der Grund steht unter dem Satz und ruecht auf dessen Spalte ein. */
.anzeige-verlauf .warum { grid-column: 2; color: var(--text-dim); }

/* Noch nicht gesehen. Kein Rot gegen Gruen, sondern ein heller Strich
   an der Seite: Er faellt auf, ohne dass die Zeile nach Fehler aussieht,
   und funktioniert auch fuer den, der Farben schlecht unterscheidet. */
.anzeige-verlauf li.neu {
  border-left: 3px solid var(--gold);
  margin-left: -10px; padding-left: 7px;
}
.anzeige-verlauf li.neu .was { color: var(--gold); }

/* Was der Kunde selbst gesagt hat, rueckt ein. Der Verlauf ist damit
   ein Gespraech und keine Liste von Vorgaengen: Man sieht auf einen
   Blick, welche Zeile von welcher Seite kommt.

   KEINE ZWEITE FARBE. Der Verlauf hat mit dem Gold fuer „ungelesen"
   schon eine Bedeutung im Rand; eine weitere Farbe daneben waere genau
   das Paar, das niemand mehr auseinanderhaelt. */
.anzeige-verlauf li.gesagt {
  margin-left: 18px; padding-left: 12px;
  border-left: 2px solid var(--border);
}

/* Das Feld fuer die Rueckfrage, unter dem Verlauf. Marcus, 09.08.2026:
   „verweis lieber auf die Anzeigenseite und ermögliche dem User dort
   eine Meldung abzusetzen." */
.anzeige-frage {
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.anzeige-frage label { width: 100%; display: block; }
.anzeige-frage label span {
  display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px;
}
.anzeige-frage textarea { width: 100%; resize: vertical; }
.anzeige-frage .hinweis { margin: 0; }

/* Dasselbe in der Verwaltung, nur enger: Dort sitzt es in der
   Meldungsliste und nicht auf einer eigenen Karte. */
.frage-antwort {
  margin: 8px 0 0; display: flex; flex-direction: column;
  gap: 6px; align-items: flex-start;
}
.frage-antwort textarea { width: 100%; resize: vertical; }

/* Die letzte Nachricht an der Anzeigenkarte. Der ganze Verlauf steht im
   Reiter „Nachrichten"; hier bleibt die eine Zeile, die die Frage
   „warum steht meine Anzeige?" am Ort der Anzeige beantwortet. */
.anzeige-letzte {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.45;
}
.anzeige-letzte .was { font-weight: 600; }
.anzeige-letzte .warum { color: var(--text-dim); }
.anzeige-letzte .wozu { color: var(--text-dim); margin-right: 6px; }
.anzeige-letzte.neu .was { color: var(--gold); }

/* Kachel links, Zahlen rechts. Unter 620 Punkten untereinander, sonst
   wird die Vorschau zum Briefmarkenformat gequetscht.

   OHNE SKALIERUNG UND OHNE FESTE HÖHE (Marcus, 09.08.2026: „Die Anzeige
   wird in der Vorschau abgeschnitten."). Ich hatte die Kachel auf 62
   Prozent geschrumpft und die Bühne auf 190 Punkte gedeckelt. `transform`
   ändert aber nichts am Platzbedarf, und die Kachel ist mit ihren
   Kanalknöpfen höher, als ich gerechnet hatte: Was nicht passte, war
   einfach weg.

   Jetzt steht sie in ihrer echten Breite da und darf so hoch werden, wie
   sie ist. Eine Vorschau, die man nicht ganz sieht, beantwortet die
   Frage nicht, für die sie da ist. */
.anzeige-zeile {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: 214px minmax(0, 1fr);
}
.vorschau-buehne.klein { padding: 12px; }

@media (max-width: 620px) {
  .anzeige-zeile { grid-template-columns: 1fr; }
}

/* Das Kreuz zum Wegräumen einer Nachricht. Klein und gedämpft: Es ist
   Aufräumen, keine Entscheidung. */
.nachricht-rechts { display: flex; align-items: center; gap: 8px; }
.nachricht-rechts form { margin: 0; }
.knopf.winzig {
  padding: 2px 9px; font-size: 15px; line-height: 1.2; border-radius: var(--r-sm);
}

/* Der eigene Reiter: eine Karte je Nachricht, neueste oben. */
.nachrichtenliste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px; }
.nachrichtenliste li { margin: 0; }
.nachrichtenliste li.neu { border-color: var(--gold); }
.nachrichtenliste li.neu .was { color: var(--gold); }
.nachricht-kopf {
  display: flex; gap: 12px; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
}
.nachrichtenliste .welche { margin: 2px 0 0; }
.nachrichtenliste .warum { margin: 8px 0 0; font-size: 14px; }

/* Das Grundfeld am Zustandsformular der Verwaltung. Sichtbar im
   Stylesheet, zugeklappt erst durch `werbung-status.js`: Ohne Skript
   soll ein Feld zu viel dastehen, nicht eines zu wenig. */
.grundfeld { margin: 10px 0; }
.grundfeld[hidden] { display: none; }

/* Was der Kunde von uns gehoert hat, in der Verwaltung. Damit niemand
   zweimal dasselbe schreibt. */
.meldungsliste { list-style: none; margin: 8px 0 0; padding: 0; }
.meldungsliste li {
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.45;
}
.meldungsliste li:last-child { border-bottom: none; }
.anzeige-karte .steckbrief { margin-top: 6px; }

/* Der Sammelknopf über der Nachrichtenliste. Rechtsbündig, damit er
   nicht mit dem Reiter darüber konkurriert, und der Hinweis daneben
   erklärt in einem Satz, was „erledigt" heißt. */
.erledigte-weg {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 8px 12px;
  margin: 0 0 14px;
}
.erledigte-weg .hinweis { margin: 0; flex: 1 1 auto; order: -1; }

@media (max-width: 560px) {
  .erledigte-weg { justify-content: flex-start; }
  .erledigte-weg .hinweis { flex: 1 1 100%; }
}

/* Eine abgeschlossene Anzeige ist eine Zeile, keine Karte. Marcus,
   09.08.2026: „es sollte sich somit auf eine einzeilige Ansicht
   reduzieren (dies gilt für alle beendeten, abgelehnten und somit auch
   vorzeitig beendeten)."

   Gedämpft, aber lesbar: Sie ist Vergangenheit und soll den Blick nicht
   von dem wegziehen, was läuft. Zum Verblassen reicht die Deckkraft
   allein nicht, sonst wäre der Titel bei einer langen Liste kaum noch zu
   entziffern. */
.anzeige-karte.erledigt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
}
.anzeige-karte.erledigt h2 {
  margin: 0; font-size: 16px; font-weight: 600;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-dim);
}
.anzeige-karte.erledigt .lage { flex: 0 0 auto; }
.anzeige-karte.erledigt .knopf { flex: 0 0 auto; }

/* Auf dem Handy darf der Titel umbrechen statt abzuschneiden, sonst
   steht dort von „Nuffi Music Sommerkampagne" nur „Nuffi Mu…". */
@media (max-width: 560px) {
  .anzeige-karte.erledigt { flex-wrap: wrap; }
  .anzeige-karte.erledigt h2 {
    flex: 1 1 100%; white-space: normal; overflow: visible;
  }
}

/* ── Bogen: Bild und Vorschau nebeneinander ─────────────────────────
   Die Ablage links, die mitlaufende Kachel rechts. Auf dem Handy
   untereinander, sonst wäre beides zu schmal. */
.bild-und-vorschau {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 210px;
}
@media (max-width: 620px) {
  .bild-und-vorschau { grid-template-columns: 1fr; }
}

/* ── Was nicht geht ────────────────────────────────────────────────
   Marcus, 08.08.2026: „Das muss schon sichtbar sein ohne aufzuklappen.
   Es sollte auch deutlich sein, also nicht so wie nen AGB wegklicker."

   Deshalb eine eigene Karte mit bernsteinfarbener Kante statt eines
   Aufklappers, und das Häkchen darunter abgesetzt. Bernstein und nicht
   Rot: Es ist noch kein Fehler, es ist eine Ansage. */
.regelkarte { border-left: 3px solid var(--gold); }
.regelliste {
  list-style: none; padding: 0; margin: 10px 0 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.regelliste li {
  position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.45;
}
.regelliste li::before {
  content: '\00d7'; position: absolute; left: 4px; top: -1px;
  color: var(--gold); font-weight: 700; font-size: 15px;
}
.regelhaken {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border); font-weight: 600;
}

/* ── Die Kasse: Kachel, Angaben, Kosten nebeneinander ───────────────
   Marcus, 08.08.2026: „Die beiden Sachen können nun wirklich
   nebeneinander in der Buchungsübersicht. Und vermutlich passt sogar
   noch die Kostenangabe ebenfalls daneben."

   Drei Spalten: die Kachel so breit wie im Regal, die Angaben
   dazwischen, die Kosten mit dem Knopf rechts. Ab 980 Punkten wandert
   die Kachel über die Angaben, darunter steht alles untereinander. */
.kasse {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: 240px minmax(0, 1fr) minmax(280px, 0.9fr);
}
.kasse > .karte { margin: 0; }
.kasse .vorschau-buehne { padding: 12px; }
.kasse-zurueck { margin: 12px 0 0; font-size: 13px; }

@media (max-width: 1180px) {
  .kasse { grid-template-columns: 240px minmax(0, 1fr); }
  .kasse-summe { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .kasse { grid-template-columns: 1fr; }
  .kasse-summe { grid-column: auto; }
}

/* ── Eine Anzeige von innen ─────────────────────────────────────────
   Links die Kachel in ihrer Regalbreite, rechts Angaben und Handgriffe.
   Dieselbe Aufteilung wie in der Kasse, nur ohne die dritte Spalte. */
.anzeige-seite {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: 240px minmax(0, 1fr);
}
.anzeige-seite > .karte { margin: 0; }
.anzeige-seite .vorschau-buehne { padding: 12px; }

@media (max-width: 720px) {
  .anzeige-seite { grid-template-columns: 1fr; }
}

/* Die Knöpfe stehen nebeneinander und brechen um, statt sich zu
   stapeln: Es sind höchstens drei, und jeder ist ein eigenes Formular
   (POST mit CSRF), weshalb sie nicht in einer Reihe von Knöpfen sitzen
   können. */
.handgriffe {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.handgriffe form { margin: 0; }

/* ── Alt gegen Neu in der Freigabe ──────────────────────────────────
   Drei Spalten: Feldname, alter Wert, neuer Wert. Der neue steht in
   Bernstein, weil er die Entscheidung ist; der alte bleibt gedämpft,
   damit man sieht, wovon man sich verabschiedet.

   `white-space: pre-line`, denn Kanäle stehen zeilenweise
   untereinander (siehe `Fassungstext::kanaele`). */
.unterschiede td, .unterschiede th {
  vertical-align: top; white-space: pre-line;
}
.unterschiede th { width: 130px; text-align: left; font-weight: 600; }
.unterschiede .alt { color: var(--text-dim); text-decoration: line-through; }
.unterschiede .neu { color: var(--gold); }

/* Das noch nicht freigegebene Motiv, klein: Es geht ums Prüfen, nicht
   ums Bewundern. */
.fassung-bild {
  display: block; max-width: 190px; margin: 8px 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
}

/* Eine wartende Änderung in der Liste. Bernstein wie überall, wo etwas
   fehlt oder ansteht, nicht Rot: Es ist kein Fehler. */
.marke.achtung { color: var(--gold); border-color: rgba(255, 198, 63, .45); }

/* ── Was die Kachel gebracht hat ────────────────────────────────────
   Drei Zahlen nebeneinander, darunter der Verlauf. Groß genug, um sie
   im Vorbeigehen zu lesen: Es ist die Frage, mit der ein Creator die
   Seite überhaupt aufmacht. */
.zahlenreihe {
  display: flex; flex-wrap: wrap; gap: 28px; margin: 4px 0 6px;
}
.zahlenreihe .zahl {
  display: block; font-size: 26px; font-weight: 700; line-height: 1.2;
}

.kanalliste { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; }
.kanalliste li { padding: 3px 0; }

/* Der Verlauf als Balken, ohne fremde Bibliothek (die Seite erlaubt
   keine externen Skripte). Die Höhe ist der Anteil am besten Tag, der
   hellere Fuß sind die Klicks. */
.tagesbalken {
  display: flex; align-items: flex-end; gap: 4px;
  height: 90px; margin: 16px 0 6px;
}
.tagesbalken .balken {
  flex: 1 1 auto; min-width: 6px; height: var(--hoch);
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 3px 3px 0 0;
  display: flex; align-items: flex-end;
}
.tagesbalken .teil.klicks {
  display: block; width: 100%; height: var(--anteil);
  background: var(--accent); border-radius: 3px 3px 0 0;
}

/* Der Kanalname ist Pflicht und sagt das auch. Der Beispieltext steht
   unter dem Feld, nicht darin: Ein Platzhalter verschwindet beim ersten
   Zeichen, und dann rät man wieder. */
.kanal-hilfe { font-size: 12px; color: var(--text-dim); }

/* ── Woraus sich der Preis zusammensetzt ────────────────────────────
   Über der großen Zahl, in einer Zeile: Menge, Zusatzkanäle, Freibetrag.
   Klein und gedämpft, damit der Betrag die Hauptsache bleibt. */
.preis-posten {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-bottom: 3px; font-size: 12.5px; color: var(--text-dim);
}
.preis-posten[hidden] { display: none; }
.preis-posten .posten { display: inline-flex; gap: 5px; white-space: nowrap; }
.preis-posten .posten b { color: var(--text); font-weight: 600; }

/* ── Die Stelle, an der es noch hakt ────────────────────────────────
   Marcus, 08.08.2026: „dass man zur noch notwendigen Stelle kommt, die
   dann blinkt bis man diese bedient hat."

   PULSIEREN STATT BLINKEN: Ein hartes An-Aus ist auf einer dunklen
   Seite unangenehm und für lichtempfindliche Leute mehr als das. Der
   weiche Ring erreicht dasselbe und lässt sich ansehen.

   BERNSTEIN, wie jedes offene Pflichtfeld im Haus: Es ist noch kein
   Fehler, es fehlt nur noch etwas. Und wer die Bewegung abgestellt hat,
   bekommt denselben Ring, nur ohne Puls. */
@keyframes stelle-pulst {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 198, 63, 0.15); }
  50% { box-shadow: 0 0 0 5px rgba(255, 198, 63, 0.45); }
}
.blinkt {
  border-color: var(--gold) !important;
  outline: none;
  animation: stelle-pulst 1.15s ease-in-out infinite;
  border-radius: var(--r-sm);
}
/* Ein Häkchen hat keinen eigenen Rahmen; dort wirkt der Ring am Kasten. */
input[type="checkbox"].blinkt { border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .blinkt { animation: none; box-shadow: 0 0 0 4px rgba(255, 198, 63, 0.45); }
}

/* ── Selbsttest der Erweiterungsverbindung ─────────────────────────────
   Eine Zeile je Glied der Kette: Name links, Befund rechts.

   BERNSTEIN FÜR „FEHLT", NICHT ROT: Wer gar keine Erweiterung hat, sieht
   hier viermal „fehlt", und das ist völlig in Ordnung. Rot wäre eine
   Anklage. Grün und Bernstein tragen zusätzlich ein Zeichen, damit die
   Unterscheidung nicht allein an der Farbe hängt. */
.test-liste {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.test-liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: var(--ink-700);
  font-size: 13.5px;
}

.test-liste li::before {
  content: "✓";
  margin-right: 8px;
  font-weight: 700;
}

.test-liste li.fehlt::before { content: "!"; }

.test-liste li.ja    { border-left: 3px solid var(--green); }
.test-liste li.fehlt { border-left: 3px solid var(--accent); }
.test-liste li.fehlt::before { color: var(--accent); }

.test-liste li span {
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  text-align: right;
  word-break: break-all;
}

/* Der Rückfall, wenn die Zwischenablage nicht mitspielt. */
.test-abschrift {
  width: 100%;
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* ── Rechtstexte ──────────────────────────────────────────────────────
   Impressum und Datenschutz sind das Gegenteil des Regals: kein Raster,
   keine Kacheln, nur Fließtext, den jemand notgedrungen liest. Er
   braucht deshalb eine Zeilenlänge, die das Auge trägt (rund 75 Zeichen)
   und Abstände, die die Blöcke voneinander trennen. Ohne das steht eine
   Wand aus Absätzen da, in der niemand die Anschrift findet. */
.karte.rechtstext {
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.65;
}

.karte.rechtstext h2 {
  margin: 28px 0 6px;
  font-size: 15px;
  /* Die Überschrift ist hier oft ein ganzer Satz mit Paragraphenangabe
     ("Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV"). Als
     Versalien wäre das unlesbar. */
  letter-spacing: 0;
}

.karte.rechtstext h2:first-of-type { margin-top: 20px; }

.karte.rechtstext p { margin: 0 0 4px; }

/* Die Anschrift steht in einem <address>, und das kippt im Browser von
   Haus aus nach rechts. Ein kursives Impressum liest sich wie ein
   Zitat. */
.karte.rechtstext .anschrift {
  margin: 0 0 4px;
  font-style: normal;
}

/* ── Der Text vom Anbieter ────────────────────────────────────────────
   Die Datenschutzerklärung kommt als fertiges HTML von eRecht24 und
   bringt Elemente mit, die es im selbst geschriebenen Impressum nicht
   gibt: Zwischenüberschriften dritter Ebene und Aufzählungen. Ohne
   eigene Regeln stünden 40.000 Zeichen in einem Block.

   ABSÄTZE BRAUCHEN HIER MEHR LUFT als im Impressum. Dort sind es
   Einzeiler unter einer Überschrift, hier ganze Fließtextblöcke; die
   4px von oben kleben sie zusammen. */
.karte.rechtstext .rechtstext-inhalt p { margin: 0 0 12px; }

/* DIE GLIEDERUNG MUSS EINE TREPPE SEIN, und im Impressum ist sie keine.
   Dort gibt es zwei Überschriften über fünf Absätzen, da fällt nicht
   auf, dass h2 mit 15px kleiner ist als der Fließtext mit 16px. Hier
   sind es 8 Kapitel, 33 Abschnitte und 8 Unterabschnitte auf 42.000
   Zeichen; wer darin etwas sucht, sucht über die Überschriften.

   Am 03.09.2026 live nachgemessen, und es stand auf dem Kopf: h2 15px,
   h3 14px, h4 16px. Die UNTERSTE Ebene war die größte, weil h4 gar
   nicht gesetzt war und auf die Vorgabe des Browsers zurückfiel, und
   die beiden oberen waren kleiner als der Text, den sie überschreiben.

   Deshalb hier eigene Größen statt der Werte von oben. Sie gelten nur
   für den gelieferten Text, das Impressum bleibt, wie es ist. */
.karte.rechtstext .rechtstext-inhalt h2 {
  margin: 34px 0 8px;
  font-size: 20px;
  letter-spacing: 0;
}
/* Der erste Kapiteltitel steht direkt unter der Seitenüberschrift und
   braucht den großen Abstand nach oben nicht. */
.karte.rechtstext .rechtstext-inhalt h2:first-of-type { margin-top: 8px; }

.karte.rechtstext .rechtstext-inhalt h3 {
  margin: 24px 0 6px;
  font-size: 17px;
  letter-spacing: 0;
}

/* Gleich groß wie der Fließtext, unterschieden nur durch das Gewicht.
   Kleiner wäre sie kleiner als das, was sie überschreibt. */
.karte.rechtstext .rechtstext-inhalt h4 {
  margin: 16px 0 4px;
  font-size: 16px;
  letter-spacing: 0;
}

.karte.rechtstext .rechtstext-inhalt ul {
  margin: 0 0 12px;
  padding-left: 22px;
}
.karte.rechtstext .rechtstext-inhalt li { margin: 0 0 4px; }

/* Die Erklärung verweist auf fremde Datenschutzseiten, und deren
   Adressen stehen ausgeschrieben im Text. Ohne Umbruch schiebt eine
   davon die ganze Karte auf schmalen Geräten breiter. */
.karte.rechtstext .rechtstext-inhalt a { overflow-wrap: anywhere; }