/* ============================================================================
   Layout und Screens. tokens.css liefert Werte und Bausteine, diese Datei
   setzt sie zu Seiten zusammen.

   Stand: Grundgerüst für Kopf, Fuß, Brotkrume, Karten, Filterleiste.
   Die Screens F1–F7 und B1–B7 werden hier ergänzt — Maße pixelgenau nach
   den Referenzen in design-referenz/.
   ========================================================================== */

/* --- Schriften: selbst gehostet (DSGVO, kein Google-CDN) -------------------
   Aus den Original-TTF nach woff2 konvertiert, zusammen 285 KB.
   Lizenztexte liegen als OFL-*.txt daneben und müssen mit ausgeliefert werden
   (SIL Open Font License).
   Nur die tatsächlich benutzten Schnitte — keine Kursiven, keine Condensed. */

@font-face { font-family:"Familjen Grotesk"; src:url(/assets/fonts/familjen-grotesk-400.woff2) format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Familjen Grotesk"; src:url(/assets/fonts/familjen-grotesk-500.woff2) format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Familjen Grotesk"; src:url(/assets/fonts/familjen-grotesk-600.woff2) format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Familjen Grotesk"; src:url(/assets/fonts/familjen-grotesk-700.woff2) format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }

@font-face { font-family:"Instrument Sans"; src:url(/assets/fonts/instrument-sans-400.woff2) format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url(/assets/fonts/instrument-sans-500.woff2) format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url(/assets/fonts/instrument-sans-600.woff2) format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }

@font-face { font-family:"JetBrains Mono"; src:url(/assets/fonts/jetbrains-mono-400.woff2) format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url(/assets/fonts/jetbrains-mono-500.woff2) format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url(/assets/fonts/jetbrains-mono-700.woff2) format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.kopf { border-bottom: 1px solid var(--rahmen-linie); }

.kopf__zeile {
  display: flex; align-items: flex-end; gap: var(--a-5);
  padding-block: var(--a-4);
}

.kopf__marke img { height: 102px; width: auto; }

.kopf__navigation {
  display: flex; gap: var(--a-5); margin-inline-start: auto;
  font-size: var(--t-navigation); font-weight: 500;
}
.kopf__navigation a { color: var(--schrift-2); padding-block: var(--a-2); }
/* Ohne text-decoration greift der Unterstrich aus tokens.css. Der stiess
   sich mit dem goldenen Strich der aktiven Seite - zwei Linien
   uebereinander, verschieden dick und verschieden weit weg. */
.kopf__navigation a:hover { color: var(--gold-hell); text-decoration: none; }
/* Aktiv: weisse Schrift mit abgesetztem goldenem Unterstrich, nicht golde
   Schrift - so steht es in der Vorlage. */
.kopf__navigation a[aria-current="page"] {
  color: var(--schrift);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--gold);
}

.kopf__menue {
  display: none;
  min-width: var(--tippziel); min-height: var(--tippziel);
  align-items: center; justify-content: center;
  margin-inline-start: auto;
  border: 1px solid var(--rahmen); border-radius: var(--r-chip);
  background: transparent; color: var(--schrift); cursor: pointer;
}

.menue {
  border-top: 1px solid var(--rahmen-linie);
  padding: var(--a-4) var(--seiten-polster);
  display: grid; gap: var(--a-3);
}
.menue hr { border: 0; border-top: 1px solid var(--rahmen-linie); margin: var(--a-2) 0; }

@media (max-width: 1023px) {
  .kopf__navigation { display: none; }
  .kopf__menue      { display: inline-flex; }
  .kopf__marke img  { height: 51px; }
}

/* ==========================================================================
   Brotkrume
   ========================================================================== */

/* Feste Hoehe: auf der Einzelseite sitzt die Seriennavigation in dieser
   Zeile und machte sie 7 px hoeher als anderswo. Der Kopfbereich darunter
   begann dadurch auf jeder Seitenart woanders (Stephan, 11.08.2026). Die
   Hoehe richtet sich nach dem hoechsten Fall, den Navigationsknoepfen. */
.brotkrume {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--a-3); padding-block: var(--a-3);
  min-height: calc(34px + 2 * var(--a-3));
}
.brotkrume ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--a-2);
  font-size: var(--t-text-klein); color: var(--meta);
}
.brotkrume li + li::before { content: "›"; margin-inline-end: var(--a-2); color: var(--meta); }
.brotkrume a { color: var(--schrift-2); }

/* ==========================================================================
   Karten
   ========================================================================== */

.sterne__defs { position: absolute; }

.bandkarte, .seriekarte { display: flex; flex-direction: column; }

.bandkarte__bild, .seriekarte__bild {
  position: relative; display: block; padding: var(--a-1);
}

.bandkarte__text  { padding: 9px 10px 10px; }
.bandkarte__titel {
  font-size: var(--t-kartentitel-s); font-weight: 600;
  margin: 0 0 var(--a-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bandnummer { display: block; padding: 0 var(--a-1) var(--a-1); font-weight: 700; font-size: var(--t-label); color: var(--gold); }
.bandnummer__variant { margin-inline-start: 4px; font-weight: 400; color: var(--meta); }

.bandkarte__verlag {
  margin: 0; font-size: var(--t-rubrik); color: var(--meta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Bewertungs-Overlay: volle Cover-Flaeche, 60% Deckkraft in der Ampelfarbe
   (siehe .bewertung--N in tokens.css), grosse Zahl mittig. */
.bandkarte__bewertung, .seriekarte__bewertung {
  position: absolute; inset: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; height: auto; padding: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}

/* Serien-Fähnchen oben links, Zählstand unten rechts */
.faehnchen {
  position: absolute; top: var(--a-2); inset-inline-start: var(--a-2);
  padding: 2px var(--a-2); border-radius: var(--r-badge);
  background: var(--gold); color: var(--rumpf-oben);
}
.zaehlstand {
  position: absolute; bottom: var(--a-2); inset-inline-end: var(--a-2);
  padding: 2px var(--a-2); border-radius: var(--r-badge);
  background: rgba(7, 8, 13, .78); color: var(--schrift);
  font-size: var(--t-label);
}

/* ==========================================================================
   Listenansicht (Sammlung)
   ========================================================================== */

.bandzeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2) var(--a-4);
  padding: var(--a-3) var(--a-3);
  border-bottom: 1px solid var(--rahmen-linie);
  color: var(--schrift);
}
/* Die ganze Zeile ist schon hervorgehoben - der Unterstrich aus tokens.css
   waere ein zweites Signal fuer dieselbe Sache (Stephan, 11.08.2026). */
.bandzeile:hover { text-decoration: none; }
.bandzeile__cover {
  width: 38px; flex: none; align-self: flex-start;
  aspect-ratio: var(--cover-verhaeltnis); border-radius: var(--r-badge); overflow: hidden;
}
.bandzeile__cover .cover { width: 100%; height: 100%; border-radius: 0; }
.bandzeile__cover .cover--fehlt { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; }

/* Titel und Untertitel teilen sich eine Spalte, damit der Untertitel unter
   dem Titel steht und nicht die Metaspalten verschiebt. */
.bandzeile__text { flex: 1 1 200px; min-width: 150px; display: flex; flex-direction: column; gap: 1px; }
.bandzeile__titel {
  font-weight: 600; font-size: var(--t-text-klein); color: var(--schrift);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Im Raster gibt das Cover den Ton an, dort bleibt der Text kurz. In der
   Liste ist Platz - aber erst ab Tablet, mobil wuerde die Zeile umbrechen. */
.bandzeile__subtitel { display: none; }
@media (min-width: 768px) {
  .bandzeile__subtitel {
    display: block;
    font-size: var(--t-rubrik); color: var(--meta); font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
.bandzeile__faehnchen { position: static; display: inline-flex; margin-inline-end: var(--a-2); vertical-align: middle; }

/* Feste Spaltenbreiten statt mitwachsender Flex-Kinder: sonst haengt die
   Ausrichtung am Inhalt und die hinteren Zeichen stehen von Zeile zu Zeile
   woanders, sobald eine Angabe fehlt (Stephan, 08.08.2026). */
.bandzeile__meta {
  display: grid; grid-auto-flow: column; align-items: center;
  gap: var(--a-4); flex: 0 0 auto; margin-inline-start: auto;
}
.bandzeile__verlag {
  width: 120px;
  font-family: var(--f-mono); font-size: var(--t-rubrik); color: var(--meta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bandzeile__jahr { width: 58px; font-family: var(--f-mono); font-size: var(--t-rubrik); color: var(--meta); }
.bandzeile__status--leer { background: none; }
.bandzeile__bewertung { min-width: 44px; height: 24px; flex: none; }
.bandzeile__bewertung-leer { width: 44px; height: 24px; flex: none; }
/* Feste Breite und rechtsbuendig: "2/6" und "100/X" sind verschieden
   lang, und ohne feste Spalte verschoebe sich alles dahinter. */
.bandzeile__zaehlstand {
  flex: none; width: 48px; text-align: end;
  color: var(--gold); font-size: var(--t-rubrik);
}

.bandzeile__status {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-content: center; color: var(--rumpf-oben);
}
.bandzeile__status--gelesen   { background: var(--gelesen); }
.bandzeile__status--ungelesen { background: var(--ungelesen); }
.bandzeile__status--rezension { background: var(--rezension); }


/* ==========================================================================
   Filter- und Sortierleiste
   ========================================================================== */

.steuerleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3);
  padding-block: var(--a-4);
}
.steuerleiste__rechts { margin-inline-start: auto; display: flex; gap: var(--a-2); }

.filter-mobil { display: none; padding-block-start: var(--a-4); }
@media (max-width: 1023px) {
  .filter-mobil { display: flex; gap: var(--a-2); }
}

.trefferzahl {
  display: inline-grid; place-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-chip); background: var(--gold); color: var(--rumpf-oben);
  font-family: var(--f-mono); font-size: 11px;
}

/* --- Rechtsseiten (AP 11) -------------------------------------------------- */
.rechtstext {
  display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px);
  padding-block: var(--a-6) var(--a-7);
}
.rechtstext__kopf { display: flex; flex-direction: column; gap: var(--a-2); }
.rechtstext__kopf h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.8px; }
/* .rechtstext__platzhalter entfernt am 03.09.2026: der Kasten markierte die
   noch auszufuellenden Stellen in Impressum und Datenschutzerklaerung. Beide
   sind gefuellt, damit hat er ausgedient. */
.rechtstext__abschnitt { display: flex; flex-direction: column; gap: var(--a-3); }
.rechtstext__abschnitt h2 { font-size: var(--t-abschnitt); letter-spacing: -.4px; }
.rechtstext__abschnitt p { max-width: 72ch; color: var(--schrift-2); }
.rechtstext__liste { max-width: 72ch; margin: 0; padding-inline-start: var(--a-5); color: var(--schrift-2); }
.rechtstext__liste li { margin-block: var(--a-2); }

.rechtskarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.rechtskarte {
  display: flex; flex-direction: column; gap: var(--a-2);
  padding: 18px; border-radius: 14px;
  border: 1px solid var(--rahmen); background: rgba(18, 32, 54, .45);
}

/* Zweispaltig mit mitlaufendem Inhaltsverzeichnis (nur Datenschutz) */
.rechtstext__raster { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 899px) { .rechtstext__raster { grid-template-columns: 1fr; } }
.rechtstext__spalte { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); }
.rechtstext__inhalt {
  position: sticky; top: var(--a-4);
  display: flex; flex-direction: column; gap: var(--a-2);
  padding: 18px; border-radius: 14px;
  border: 1px solid var(--rahmen); background: rgba(18, 32, 54, .45);
}
.rechtstext__inhalt a {
  font-size: var(--t-navigation); color: var(--schrift-2);
  padding: 6px 0 6px 12px; border-inline-start: 2px solid transparent;
}
.rechtstext__inhalt a:hover { color: var(--schrift); border-inline-start-color: var(--gold); text-decoration: none; }

.merkmalzeile { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.merkmal {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: var(--r-chip); border: 1px solid var(--gelesen);
  background: rgba(52, 199, 89, .1);
  font-size: var(--t-text-klein); color: var(--gelesen);
}

/* --- Filterleiste: Chips, native <select> im Chip-Look, Dropdowns -------- */
/* Abstand zur Ueberschrift: --a-4 sass zu eng unter der Headline (Stephan). */
.filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3); padding-block-start: var(--a-6); }
/* Unter 1024 px ersetzen die beiden Ausloeser oben die ganze Leiste; Serie und
   Rezensionen behalten ihre eigene Leiste und bekommen die Klasse nicht (docs/03). */
@media (max-width: 1023px) {
  .filterleiste--ersetzbar { display: none; }
}

/* Die Sortierung traegt ausgeschriebene Bezeichnungen und braucht mehr Platz. */
.chip--breit { max-width: 260px; }
select.chip {
  appearance: none; padding-inline-end: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7280' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

.dropdown { position: relative; }
.dropdown > summary {
  list-style: none;
}
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown[open] > summary { border-color: var(--gold); background: rgba(255, 195, 0, .1); color: var(--gold); }

.dropdown__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 15;
  min-width: 240px; max-width: 320px;
  border-radius: var(--r-karte); border: 1px solid var(--rahmen);
  background: var(--karte-erhoeht); box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  padding: var(--a-2) 0;
}
/* Suche in den langen Listen (Verlag, Kreative) */
.dropdown__suche {
  display: block; width: calc(100% - 28px); margin: var(--a-1) 14px var(--a-2);
  height: 34px; padding: 0 12px;
  border: 1px solid var(--rahmen); border-radius: var(--r-feld);
  background: var(--karte); color: var(--schrift);
  font-family: var(--f-text); font-size: var(--t-text-klein);
}
.dropdown__suche:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.dropdown__leer { padding: var(--a-2) 14px; font-size: var(--t-text-klein); color: var(--meta); }
.dropdown__optionen { max-height: 320px; overflow-y: auto; padding: var(--a-1) 0; }
.dropdown__option {
  display: flex; align-items: center; gap: var(--a-2);
  padding: var(--a-2) 14px; font-size: var(--t-text-klein); cursor: pointer;
}
.dropdown__option:hover { background: rgba(255, 195, 0, .08); }
.dropdown__fuss {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
  padding: var(--a-2) 14px; border-top: 1px solid var(--rahmen);
}
.dropdown__zuruecksetzen {
  font-size: var(--t-label); color: var(--meta); background: none; border: 0; padding: 0; cursor: pointer;
}
.dropdown__zuruecksetzen:hover { color: var(--schrift); }
.dropdown__anwenden { height: 32px; padding: 0 15px; font-size: var(--t-label); }

/* Derselbe Vorlauf wie am Kopfkasten von Serie und Einzelseite (.bandkopf),
   damit der Inhalt auf allen Seitenarten auf derselben Hoehe beginnt. */
.sammlung-kopf { padding-block-start: var(--a-6); }
/* Ueberschrift und Zahl nebeneinander auf der Grundlinie. Als Inline-Spanne
   in der h1 zog die eigene Schrift die Zeilenhoehe auf - die Ueberschrift hat
   bewusst eine engere Zeilenhoehe als ihre Schriftgroesse, jede fremde
   Schrift darin sprengt sie. Die Filterleiste stand dadurch 10 px tiefer als
   auf der Sammlungsseite (Stephan, 11.08.2026). */
.kopfzeile-mit-zahl { display: flex; align-items: baseline; gap: var(--a-2); flex-wrap: wrap; }
.rezensionen-anzahl {
  font-family: var(--f-text); font-weight: 600; font-size: var(--t-kartentitel);
  /* line-height: 0 laesst die Zahl auf der Grundlinie stehen, ohne dass ihr
     Zeilenkasten den Kopfbereich hoeher macht - sonst begaenne die
     Filterleiste 5 px tiefer als in der Sammlung. */
  color: var(--meta); line-height: 0;
}

/* --- Buchstaben-Reihe (Rezensionen) --------------------------------------- */
.buchstaben-reihe { display: flex; flex-wrap: wrap; gap: var(--a-1); padding-block-start: var(--a-4); }
.buchstabe {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: var(--r-badge); border: 1px solid var(--rahmen);
  font-family: var(--f-mono); font-weight: 600; font-size: var(--t-label); color: var(--schrift-2);
}
.buchstabe.gewaehlt { background: var(--gold); border-color: var(--gold); color: var(--rumpf-oben); }
/* Nicht belegte Anfangsbuchstaben. Das sind <span aria-hidden="true"> ohne
   Verweis, also inaktive Elemente, fuer die 1.4.3 formal gar nicht gilt.
   Trotzdem auf volle 4.5:1 gebracht (vorher #3A4356 mit 2.04:1), damit die
   Seite ueberall dieselbe Regel erfuellt und keine Ausnahme erklaeren muss.
   Die Rangfolge bleibt sichtbar: belegte Buchstaben stehen bei 9.80:1, die
   leeren bei 4.50:1 - immer noch gut Faktor zwei Unterschied. */
.buchstabe--leer { color: #6E778A; border-color: var(--rahmen-linie); }

/* --- Rezensionsraster ------------------------------------------------------ */
.rezensionsraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--a-4); padding-block: var(--a-6);
}
.rezensionskarte {
  display: flex; gap: var(--a-4); padding: var(--a-4);
  border-radius: var(--r-karte); border: 1px solid var(--rahmen);
  background: linear-gradient(150deg, rgba(22, 38, 63, .9), rgba(11, 20, 38, .6));
  color: var(--schrift);
}
.rezensionskarte__cover { width: 90px; flex: none; align-self: flex-start; aspect-ratio: var(--cover-verhaeltnis); border-radius: var(--r-cover); overflow: hidden; border: 1px solid var(--rahmen); }
.rezensionskarte__cover .cover { border-radius: 0; }
.rezensionskarte__cover .cover--fehlt { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.rezensionskarte__text { display: flex; flex-direction: column; gap: var(--a-2); min-width: 0; flex: 1; }
.rezensionskarte__titel { font-family: var(--f-display); font-weight: 700; font-size: var(--t-kartentitel); letter-spacing: -.3px; color: var(--schrift); }
.rezensionskarte__bewertung { display: flex; align-items: center; gap: var(--a-2); }
.rezensionskarte__auszug { font-size: var(--t-text-klein); color: var(--schrift-2); }
.rezensionskarte__weiterlesen { margin-block-start: auto; font-family: var(--f-display); font-weight: 600; font-size: var(--t-text-klein); color: var(--gold); }
/* Auf schmalen Schirmen steht das Cover ueber dem Text statt daneben: bei
   90 px Cover plus Polster blieben dem Text keine 200 px, lange Woerter wie
   "Wimmelbildfaktor" passten in keine Zeile und liefen aus der Karte
   (Stephan, 12.08.2026). Uebereinander hat der Text die volle Kartenbreite.
   Der erzwungene Umbruch bleibt trotzdem als Sicherung - es gibt laengere
   Woerter als diese Karte breit ist. */
@media (max-width: 767px) {
  /* Nur die Anordnung kippt, das Cover behaelt seine Groesse. Es auf volle
     Kartenbreite zu ziehen war falsch: es wurde 610 x 914 gross und musste
     dafuer quer beschnitten werden. Gemeint war, dass der Text die volle
     Breite bekommt, nicht das Bild. */
  .rezensionskarte { flex-direction: column; }
}
.rezensionskarte__titel, .rezensionskarte__auszug { overflow-wrap: anywhere; }

/* Die Karte ist ein <a>; ohne das greift das globale a:hover und
   unterstreicht den kompletten Text. Gold werden soll nur der Rahmen. */
.rezensionskarte:hover { text-decoration: none; color: var(--schrift); }
.rezensionskarte:hover .rezensionskarte__weiterlesen { color: var(--gold-hell); text-decoration: underline; text-underline-offset: 3px; }
.sammlung-raster { padding-block: var(--a-6); }
.sammlung-liste { padding-block: var(--a-6) 0; display: flex; flex-direction: column; }
.steuerleiste--ende { justify-content: flex-end; padding-block-end: var(--a-7); }

/* --- Umschalter als Linkgruppe (Raster/Liste/Kompakt) -------------------- */
.segment {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-chip); border: 1px solid var(--rahmen); background: var(--karte-erhoeht);
}
.segment .chip { height: 32px; border-color: transparent; background: transparent; }
.segment .chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   Abschnitte, Scroll-Reihen, Statistik
   ========================================================================== */

.abschnitt { padding-block: var(--a-6); }
.abschnitt + .abschnitt { border-top: 1px solid var(--rahmen-linie); }
.abschnitt__kopf {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--a-4) var(--a-5);
  margin-bottom: var(--a-5);
}
.abschnitt__kopf .btn { margin-inline-start: auto; }

.statistikraster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--a-5);
}
.statistikkasten {
  background: linear-gradient(160deg, rgba(22, 38, 63, .85), rgba(11, 20, 38, .55));
  border: 1px solid var(--rahmen);
  border-radius: var(--r-karte); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
}
/* Anzeigeschrift statt Mono und kleiner als bisher (Vorlage: 40 px). */
.statistikkasten .wert {
  font-family: var(--f-display); font-weight: 700; font-size: 40px;
  line-height: 1; display: block;
}
.wert--gelesen   { color: var(--gelesen); }
.wert--ungelesen { color: var(--ungelesen); }

/* Fortschritt im Kasten "Gelesen" */
.anteilszeile { display: flex; align-items: center; gap: var(--a-3); }
.anteilsbalken {
  flex: 1; height: 6px; border-radius: var(--r-chip);
  background: rgba(36, 57, 92, .8); overflow: hidden;
}
.anteilsbalken__fuellung {
  display: block; width: 0; height: 100%;
  background: var(--gelesen); border-radius: var(--r-chip);
  transition: width var(--uebergang-bewegung);
}
.anteilszeile__wert { font-size: var(--t-label); color: var(--schrift-2); }
.statistikraster-abschnitt { padding-block-start: var(--a-2); }

.scrollpfeile { display: flex; align-items: center; gap: var(--a-2); margin-inline-start: auto; }
/* Textlink hinter den Pfeilen, kein Knopf (Vorlage). */
.textlink {
  margin-inline-start: var(--a-2);
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-text-klein);
  color: var(--gold);
}
.abschnitt__titel { display: flex; flex-direction: column; gap: var(--a-2); }

/* ==========================================================================
   Einzelseite
   ========================================================================== */

.bandkopf {
  position: relative; overflow: hidden; isolation: isolate;
  /* Eigenes Innenpolster: das Seitenpolster kommt jetzt vom .inhalt-Rahmen
     darum herum, nicht mehr von diesem Element selbst. */
  padding: var(--a-6) var(--a-5);
  border-radius: var(--r-karte); border: 1px solid var(--rahmen);
  /* a-6, nicht a-4: derselbe Vorlauf wie .sammlung-kopf auf den
     Listenseiten. Vorher begann der Kasten 16 px hoeher als die
     Ueberschriften daneben (Stephan, 11.08.2026). */
  margin-block-start: var(--a-6);
}
/* Cover weichgezeichnet als Kopf-Hintergrund, nach unten auslaufend */
.bandkopf__hintergrund {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: blur(40px) brightness(.35);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}
.bandkopf__raster {
  display: grid; grid-template-columns: auto 1fr; gap: var(--a-7);
  align-items: end;
}
@media (max-width: 767px) {
  .bandkopf__raster { grid-template-columns: 1fr; gap: var(--a-5); }
  /* width: auto statt 100%: mit fester Breite und object-fit: contain wurde
     das Bild in einen breiteren Kasten eingepasst und sass mittig mit
     Leerraum links und rechts, sobald max-height die Hoehe begrenzte
     (Stephan, 12.08.2026). So nimmt es die Breite aus dem Seitenverhaeltnis
     und steht buendig links. */
  .cover--voll { height: auto; width: auto; max-width: 100%; }
}
/* Der Kopfkasten richtet seine Zeile unten aus; das Cover soll dabei am
   linken Rand seiner Spalte stehen, nicht in ihr zentriert werden. */
.bandkopf__cover-voll { justify-self: start; }


.bandkopf__text { display: flex; flex-direction: column; gap: var(--a-3); }
.bandkopf__text h1 { line-height: 1.05; }
.rubrik--gold { color: var(--gold); }

.bandkopf__meta {
  display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5);
  font-size: var(--t-rubrik); color: var(--schrift-2);
}
.bandkopf__meta-hell { color: var(--schrift); }
.bandkopf__schnitt { display: flex; align-items: center; gap: var(--a-2); }

.bandkopf__fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3); }
.bandkopf__fortschritt-text { font-size: var(--t-text-klein); color: var(--schrift-2); }
.bandkopf__fehlen { color: var(--ungelesen); }
.fortschrittsbalken {
  flex: 1 1 160px; max-width: 280px; height: 8px; border-radius: var(--r-chip);
  background: var(--karte-erhoeht); overflow: hidden; display: block;
}
.fortschrittsbalken span { display: block; height: 100%; background: var(--gelesen); border-radius: var(--r-chip); }

.bandkopf__cover-voll { flex: none; }
.bandkopf__cover-link { position: relative; display: block; }
.bandkopf__cover-link .cover--fehlt { height: 300px; width: 200px; }
.bandkopf__vergroessern {
  position: absolute; bottom: var(--a-2); inset-inline-end: var(--a-2);
  display: inline-flex; align-items: center; gap: var(--a-1);
  height: 28px; padding: 0 10px; border-radius: 8px;
  background: rgba(5, 6, 10, .85); border: 1px solid var(--rahmen);
  font-family: var(--f-mono); font-size: 10px; color: var(--schrift);
}
/* Ohne Zeigegeraet gibt es kein Vergroessern: vertikal fuellt das Cover
   ohnehin die Breite, quer wuerde der Griff danach es eher verkleinern.
   Die Regel muss hinter .bandkopf__vergroessern stehen - davor gewinnt
   deren display: inline-flex, und der Knopf blieb sichtbar, obwohl die
   Funktion schon weg war (Stephan, 12.08.2026). */
@media (hover: none) {
  .bandkopf__vergroessern { display: none; }
}

.bandkopf__punkt { color: var(--meta); }
.chip--variant {
  display: inline-flex; height: auto; padding: 2px 8px; margin-inline-start: var(--a-2);
  border-color: var(--gold); color: var(--gold); font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; vertical-align: middle;
}

.statuspille {
  display: inline-flex; align-items: center; gap: var(--a-2);
  height: 34px; padding: 0 var(--a-4); border-radius: var(--r-chip);
  font-weight: 600; font-size: var(--t-text-klein);
}
.statuspille--gelesen   { background: var(--gelesen);   color: var(--rumpf-oben); }
.statuspille--ungelesen { background: var(--ungelesen); color: var(--schrift); }

.beschreibung-kreative {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--a-6); align-items: start; padding-block: var(--a-6);
}
.beschreibung-kreative > div { display: flex; flex-direction: column; gap: var(--a-3); }
.beschreibung-kreative p { max-width: 64ch; margin: 0; }
.kreativ-liste { display: flex; flex-wrap: wrap; gap: var(--a-2); }
/* Die Chips duerfen wachsen: .chip hat eine feste Hoehe von 34 px, und
   sobald ein Chip mit vielen Namen umbrach, stand der Text oben und unten
   ueber dem Rahmen (Stephan, 13.08.2026). Beispiel 100% DC 15, Flash. */
.kreativ-liste .chip {
  cursor: default;
  height: auto; min-height: 34px; padding-block: 6px;
  align-items: baseline;
}
.kreativ-liste .chip .rubrik { margin-inline-end: var(--a-2); }

.rezensionsblock {
  margin-block: var(--a-6);
  padding: var(--a-5); border-radius: var(--r-karte); border: 1px solid var(--rahmen);
  background: linear-gradient(150deg, var(--karte-erhoeht), var(--karte));
  display: flex; flex-direction: column; gap: var(--a-4);
}
.rezensionsblock__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-3); flex-wrap: wrap; }
.rezensionsblock__bewertung { display: flex; align-items: center; gap: var(--a-3); flex-wrap: wrap; }
.rezensionsblock__trenner { width: 1px; height: 18px; background: var(--rahmen); }
.rezensionsblock__titel { font-family: var(--f-display); font-weight: 700; font-size: var(--t-kartentitel); letter-spacing: -.3px; }
.rezensionsblock__text p { max-width: 72ch; }

.infokasten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--a-3);
  margin-block: var(--a-5);
}
.infokasten > div {
  display: flex; flex-direction: column; gap: var(--a-1);
  background: var(--karte-erhoeht); border: 1px solid var(--rahmen);
  border-radius: var(--r-karte); padding: var(--a-3) var(--a-4);
}
.infokasten dt { margin: 0; }
.infokasten dd { margin: 0; font-family: var(--f-mono); font-size: var(--t-text-klein); }

/* --- Umschalter-Link: sieht wie ein Schalter aus, ist aber ein <a> ------- */
.umschalter { display: inline-flex; align-items: center; gap: var(--a-2); font-size: var(--t-text-klein); color: var(--schrift-2); }
.umschalter:hover { color: var(--schrift); text-decoration: none; }
.umschalter__spur {
  position: relative; width: 38px; height: 22px; flex: none;
  border-radius: var(--r-chip); border: 1px solid var(--rahmen); background: var(--karte-erhoeht);
  transition: background-color var(--uebergang-farbe), border-color var(--uebergang-farbe);
}
.umschalter__knopf {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--meta); transition: transform var(--uebergang-bewegung), background-color var(--uebergang-farbe);
}
.umschalter[aria-pressed="true"] .umschalter__spur { background: rgba(255, 195, 0, .2); border-color: var(--gold); }
.umschalter[aria-pressed="true"] .umschalter__knopf { background: var(--gold); transform: translateX(16px); }

.serien-navigation { display: flex; gap: var(--a-3); margin-inline-start: auto; }
/* Die Knoepfe tragen "‹ #12" als eine Einheit - ohne das Umbruchverbot
   rutschte der Pfeil auf eine zweite Zeile (Stephan, 12.08.2026). */
.serien-navigation .chip { white-space: nowrap; }

@media (max-width: 767px) {
  /* Auf schmalen Schirmen steht die Navigation unter der Brotkrume statt
     neben ihr. Daneben blieb ihr nur ein Rest, sobald der Serientitel
     umbrach - bei "100 Bullets (Deluxe Edition)" schon mit einem einzigen
     Knopf. */
  .brotkrume { flex-wrap: wrap; align-items: flex-start; }
  .brotkrume ol { flex: 1 1 100%; }
  .serien-navigation { margin-inline-start: 0; }
}

/* ==========================================================================
   Mobiles Filter-Sheet (AP 7)
   ========================================================================== */

.sheet-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(3, 4, 8, .72);
}
/* Ab 1024 px uebernimmt wieder die Desktop-Leiste. Bleibt das Sheet beim
   Vergroessern des Fensters offen, darf es nicht darueber stehen bleiben. */
@media (min-width: 1024px) {
  .sheet-overlay { display: none; }
}
.sheet-overlay .sheet {
  position: static; width: 100%; max-width: 560px;
  display: flex; flex-direction: column;
  border: 1px solid var(--rahmen); border-bottom: none;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
}

.sheet__kopf {
  flex: none; display: flex; align-items: center; gap: var(--a-3);
  padding: var(--a-4); border-bottom: 1px solid var(--rahmen-linie);
}
.sheet__titel { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.sheet__schliessen {
  margin-inline-start: auto;
  width: 38px; height: 38px; border-radius: var(--r-chip);
  border: 1px solid var(--rahmen); background: var(--karte-erhoeht); color: var(--schrift-2);
  display: grid; place-content: center; cursor: pointer;
}

.sheet__rumpf { flex: 1; overflow-y: auto; padding: var(--a-1) var(--a-4) var(--a-4); }

.sheetgruppe { border-bottom: 1px solid var(--rahmen-linie); }
.sheetgruppe__zeile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
  padding: var(--a-4) 0; cursor: pointer; list-style: none;
}
.sheetgruppe__zeile::-webkit-details-marker { display: none; }
.sheetgruppe__text { display: flex; flex-direction: column; gap: 3px; }
.sheetgruppe__label { font-weight: 600; font-size: 15px; }
.sheetgruppe__wert { font-family: var(--f-mono); font-size: var(--t-label); color: var(--meta); }
.sheetgruppe__wert--aktiv { color: var(--gold); }
.sheetgruppe__chevron { color: var(--meta); font-size: 18px; transition: transform var(--uebergang-bewegung); }
.sheetgruppe[open] .sheetgruppe__chevron { transform: rotate(90deg); }

.sheetgruppe__optionen { display: flex; flex-direction: column; padding-bottom: var(--a-3); }
.sheetgruppe__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
  padding: var(--a-3) var(--a-2); border-radius: var(--r-feld);
  font-size: var(--t-text-klein); color: var(--schrift-2);
}
.sheetgruppe__option:hover { background: rgba(255, 195, 0, .08); color: var(--schrift); text-decoration: none; }
.sheetgruppe__option--aktiv { color: var(--gold); }

.sheet__sortierung { display: flex; flex-direction: column; gap: var(--a-3); padding-block: var(--a-4) var(--a-1); }
.sheet__chips { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.sheet__zuruecksetzen { font-size: var(--t-text-klein); color: var(--meta); }
.sheet__zuruecksetzen:hover { color: var(--schrift); }

/* ==========================================================================
   Startseite (F1)
   ========================================================================== */

/* minmax(0, …) ist noetig, damit die Bildspalte nicht ueber ihre Basisbreite
   hinaus waechst und die Textspalte zusammenquetscht. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 632px); gap: var(--a-7);
  /* Oben ausgerichtet, damit die Bildkante auf der Ueberschrift sitzt. Bei
     zentrierter Ausrichtung schwebt das hoehere Bild darueber hinaus. */
  align-items: start; padding-block: var(--a-7);
}
@media (max-width: 1023px) { .hero { grid-template-columns: 1fr; gap: var(--a-5); } }
.hero__text { display: flex; flex-direction: column; gap: var(--a-4); }
/* Groesse aus der Vorlage: bis 52 px statt der globalen Seitentitel-Groesse. */
.hero__text h1 {
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -1.2px;
}
.hero__gold { color: var(--gold); }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3); }
.hero__social { display: flex; flex-direction: column; gap: var(--a-2); margin-top: var(--a-3); }
.hero__sociallinks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3); }
/* Die Kreisflaeche folgt currentColor, damit dieselben Pfade alle drei
   Goldtoene der Vorlage abdecken. Kein Unterstrich - das globale a:hover
   zoege sonst eine Linie unter das Icon. */
.soziallink {
  display: inline-flex; color: var(--gold);
  transition: color var(--uebergang-farbe);
}
.soziallink__glyphe { fill: var(--rumpf-oben); }
.soziallink:hover  { color: var(--gold-hell); text-decoration: none; }
.soziallink:active { color: var(--gold-dunkel); }
.soziallink:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 50%; }

/* Das Bild fuellt die Hoehe der Textspalte, damit es oben mit der Ueberschrift
   und unten mit dem Text abschliesst. Ein fester Versatz waere bei jeder
   Textlaenge wieder falsch. Unter 1024 px greift wieder das Seitenverhaeltnis. */
.hero__bild { position: relative; width: min(100%, 632px); align-self: stretch; }
.hero__rahmen {
  display: block; position: relative; height: 100%;
  border-radius: var(--r-karte); overflow: hidden; border: 1px solid var(--rahmen);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
/* object-position statt der Voreinstellung 50% 50%: der Kasten waechst mit
   der Texthoehe daneben, sein Verhaeltnis schwankt zwischen 1,39 (1440 px)
   und 0,83 (1024 px). Bei 0,83 sind nur noch 62 % der Bildbreite zu sehen -
   mittig beschnitten fiele Stephan am rechten Rand heraus. 60 % schiebt das
   Sichtfenster dorthin, wo er steht (04.09.2026). */
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
@media (max-width: 1023px) {
  .hero__bild img { height: auto; aspect-ratio: 632 / 455; }
  .hero__rahmen { height: auto; }
}
/* Feine Linie, nach links oben versetzt hinter dem Bild */
.hero__linie {
  position: absolute; inset: -14px 18px 18px -14px;
  border: 1px solid rgba(36, 57, 92, .8); border-radius: 16px; pointer-events: none;
}

.hero__platzhalter {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a-1);
  aspect-ratio: 632 / 455; border-radius: var(--r-karte);
  border: 1px dashed var(--rahmen); background: var(--karte);
  color: var(--meta);
}

/* --- Lesejahr-Block (F1) ---------------------------------------------------
   Alles in einem Kasten, die Kennzahlen rechts neben der Ueberschrift, der
   Knopf unten rechts im Kasten (Vorlage). */
.lesejahr {
  padding: clamp(20px, 3vw, 32px);
  border-radius: 16px; border: 1px solid var(--rahmen);
  background: linear-gradient(150deg, rgba(22, 38, 63, .75), rgba(7, 13, 26, .85));
}
.lesejahr .abschnitt__kopf { align-items: flex-end; margin-bottom: var(--a-5); }
.lesejahr__zahlen {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--a-4) clamp(20px, 3vw, 40px);
  margin-inline-start: auto;
}
.lesejahr__fuss { display: flex; justify-content: flex-end; margin-top: var(--a-5); }
.lesejahr__fuss .btn { border-color: var(--gold); color: var(--gold); }
.lesejahr__fuss .btn:hover { background: rgba(255, 195, 0, .1); color: var(--gold-hell); }
.lesejahr__kennzahl { display: flex; flex-direction: column; gap: 2px; }
.lesejahr__wert { font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1; }

.jahresdiagramm {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(4px, 1.2vw, 16px); align-items: end; height: 200px;
}
.jahressaeule {
  display: flex; flex-direction: column; align-items: center; gap: var(--a-2);
  height: 100%; justify-content: flex-end; color: inherit;
}
/* Eigene Spur wie bei den Statistik-Saeulen, aus demselben Grund: sonst
   rechnet der Balken gegen eine Hoehe, die ihm gar nicht zur Verfuegung
   steht, und die hohen Monate laufen oben zusammen. */
.jahressaeule__spur { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; }
.jahressaeule:hover { text-decoration: none; }
.jahressaeule:hover .jahressaeule__label { color: var(--gold-hell); }
.jahressaeule__wert { font-size: var(--t-rubrik); color: var(--schrift-2); }
.jahressaeule__balken {
  width: 100%; height: 0; min-height: 2px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--rahmen), rgba(36, 57, 92, .35));
  transition: height 500ms ease-out;
}
.jahressaeule__label { font-size: var(--t-rubrik); color: var(--meta); }
.jahressaeule--hoch .jahressaeule__balken {
  background: linear-gradient(180deg, var(--gold), rgba(255, 195, 0, .35));
  box-shadow: 0 0 28px rgba(255, 195, 0, .25);
}
.jahressaeule--hoch .jahressaeule__wert { color: var(--gold); font-weight: 700; }
/* Kuenftige Monate. Anders als die leeren Buchstaben sind das echte
   <a href> mit Fokus - aktive Bedienelemente ohne Ausnahme von 1.4.3.
   Der Wert traegt Text und braucht 4.5:1, der Balken ist Grafik und
   braucht nach 1.4.11 nur 3:1. Vorher beides #3A4356 mit 2.04:1. */
.jahressaeule--zukunft .jahressaeule__wert { color: #6E778A; }
.jahressaeule--zukunft .jahressaeule__balken { background: #535C6F; }

.startcover { display: flex; flex-direction: column; gap: var(--a-2); color: var(--schrift); }
/* Blauer Rahmen um das Cover, Abzeichen oben rechts (Vorlage). */
.startcover__bild {
  position: relative; display: block; aspect-ratio: var(--cover-verhaeltnis);
  border-radius: var(--r-cover); overflow: hidden;
  border: 1px solid var(--rahmen); box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  transition: border-color var(--uebergang-farbe);
}
.startcover__bild .cover { width: 100%; height: 100%; border-radius: 0; }
/* Nicht in der Leseflow-Reihe: dort sind die Cover keine Verweise, und ein
   goldener Rahmen beim Ueberfahren verspricht einen Klick, den es nicht gibt
   (Stephan, 13.08.2026). Als :not() an der Regel selbst statt als spaetere
   Ausnahme - eine Regel, keine Frage der Reihenfolge. */
.startcover:not(.startcover--nurbild):hover .startcover__bild { border-color: var(--gold); }
.startcover__titel {
  font-size: var(--t-text-klein); font-weight: 600; color: var(--schrift);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.startcover__meta { font-size: var(--t-label); color: var(--meta); }
.startcover:hover { text-decoration: none; }
/* Die Leseflow-Reihe zeigt nur Cover: kein Verweis, keine Beschriftung.
   Ohne die Regel erbte sie den Zeigefinger und den Abstand fuer den
   Titeltext, den es dort gar nicht gibt (Stephan, 13.08.2026). */
.startcover--nurbild { cursor: default; gap: 0; }
.startcover:hover .startcover__titel { color: var(--gold-hell); }

/* Legende unter der Coverreihe */
.coverlegende {
  display: flex; flex-wrap: wrap; gap: var(--a-3) var(--a-5);
  padding-block-start: var(--a-4);
  font-size: var(--t-label); color: var(--meta);
}
.coverlegende > span { display: inline-flex; align-items: center; gap: 7px; }
.coverlegende .abzeichen { position: static; width: 18px; height: 18px; }

/* ==========================================================================
   Statistik (F6/F7)
   ========================================================================== */

/* Derselbe Vorlauf wie die Filterleiste in der Sammlung. Ohne ihn stiess
   der Umschalter an die Ueberschrift: die hat bewusst eine engere
   Zeilenhoehe als ihre Schriftgroesse, die Unterlaengen ragen also aus dem
   Zeilenkasten heraus (Stephan, 11.08.2026). */
.statistik-kopfzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3);
  padding-block-start: var(--a-6);
}
.statistikabschnitt { display: flex; flex-direction: column; gap: var(--a-6); padding-block: var(--a-5) var(--a-7); }

.statistikpanel {
  display: flex; flex-direction: column; gap: var(--a-4);
  padding: var(--a-5); border-radius: var(--r-karte); border: 1px solid var(--rahmen);
  background: linear-gradient(150deg, rgba(22, 38, 63, .9), rgba(11, 20, 38, .6));
}
.statistikpanel--zeile { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--a-3); }
.statistikpanel--mitte { flex-direction: row; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; }
.statistikpanel__titel { font-family: var(--f-display); font-weight: 700; font-size: var(--t-kartentitel); }
.statistikpanel__zahl { font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; }

.grosszahl { display: flex; flex-direction: column; align-items: center; gap: var(--a-2); }
.grosszahl__wert { font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1; }

.statistikblock { display: flex; flex-direction: column; gap: var(--a-4); }
.statistikblock__kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--a-3); }
.statistik-fussnote { font-size: var(--t-text-klein); color: var(--meta); }

.chip--klein { height: 30px; padding: 0 var(--a-3); font-size: 11px; font-family: var(--f-mono); font-weight: 600; }

/* --- Ringdiagramm ---------------------------------------------------------- */
.ringzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 44px); }
.ringzeile__zahl { display: flex; flex-direction: column; align-items: center; gap: var(--a-1); min-width: 96px; color: var(--schrift-2); }
.ringzeile__gross { font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1; }
.ringzeile__gross[data-farbe="gelesen"] { color: var(--gelesen); }
.ringzeile__gross[data-farbe="ungelesen"] { color: var(--ungelesen); }

/* 25 % groesser als vorher (160-200 -> 200-250) und deutlich duenner:
   der breite Strich klemmte die Prozentzahl in der Mitte ein
   (Stephan, 11.08.2026). */
.ring { position: relative; width: clamp(200px, 25vw, 250px); aspect-ratio: 1; flex: none; }
.ring svg { width: 100%; height: 100%; }

/* Hochformat, nicht nur schmal: das Telefon meldet quer gehalten je nach
   Anzeigezoom weniger als 768 px, und dann griffen diese Regeln, obwohl
   quer alles nebeneinander passt (Stephan, 12.08.2026). Die Bedingung sagt
   jetzt, was gemeint ist - hochkant stapeln, quer nicht - statt es ueber
   eine Breite zu erraten. */
@media (max-width: 767px) and (orientation: portrait) {
  /* Ring und die beiden Zahlen waren nebeneinander breiter als der Schirm
     und brachen unschoen um. Als Raster steht der Ring oben ueber beide
     Spalten, gelesen und ungelesen darunter nebeneinander - untereinander
     sah es zerrissen aus. */
  .ringzeile {
    display: grid; grid-template-columns: 1fr 1fr;
    justify-items: center; gap: var(--a-4) var(--a-3);
  }
  /* order: -1 holt den Ring vor die Zahlen. Im Markup steht "gelesen"
     zuerst, damit die Reihenfolge fuer die Vorlesehilfe stimmt; ohne das
     landete der Ring zwischen den beiden Zahlen. */
  .ring { order: -1; grid-column: 1 / -1; }
}
/* Runde Enden am Bogen, aber butt an der Trennstelle: stroke-linecap gilt
   fuer beide Enden eines Segments. Deshalb liegt die Rundung auf einer
   eigenen Spur unter den Segmenten - siehe .ring__kappe im Template. */
.ring__segment {
  fill: none; stroke-width: 9; stroke-linecap: butt;
  /* Laenger als der uebliche Uebergang: der Bogen soll sich sichtbar
     aufziehen, nicht nur kurz zucken. */
  transition: stroke-dasharray 900ms cubic-bezier(.22, .61, .36, 1);
}
/* Die Kappen erscheinen erst, wenn der Bogen steht - waehrend er waechst,
   staenden sie als zwei lose Punkte im Leeren. Geschaltet wird ueber das
   Attribut stroke-opacity in app.js; der Uebergang hier ist nur Beiwerk und
   darf ausfallen, ohne dass etwas fehlt. */
.ring__segment--rund {
  stroke-linecap: round;
  transition: stroke-opacity 220ms ease-out;
}
.ring__mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--schrift-2);
}
/* Die Mitte bekommt Rand, damit die Zahl nicht am Bogen klebt. */
.ring__mitte { padding-inline: 18%; }
.ring__prozent { font-weight: 700; font-size: clamp(30px, 3.6vw, 42px); color: var(--schrift); }
/* Tortendiagramm: Radius 25 mit 50 breitem Strich fuellt bis zur Mitte.
   Aussenradius 50 auf 120er Flaeche laesst Rand - vorher ragte die Scheibe
   ueber die Zeichenflaeche hinaus und war an allen vier Seiten
   abgeschnitten (Stephan, 11.08.2026). */
.torte { position: relative; width: 50%; min-width: 170px; aspect-ratio: 1; flex: none; }
.torte svg { width: 100%; height: 100%; overflow: visible; }
.torte__segment { fill: none; stroke-width: 50; stroke-linecap: butt; }

.kategoriebalken-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
@media (max-width: 767px) and (orientation: portrait) {
  /* Volle Breite statt zwei schmale Spalten - so bleibt den Balken Luft
     (Stephan, 12.08.2026). Die Regel steht hier und nicht oben beim Ring:
     die Basisregel kommt spaeter in der Datei und wuerde sonst gewinnen. */
  .kategoriebalken-raster { grid-template-columns: 1fr; }
}
.kategoriebalken { display: flex; flex-direction: column; align-items: center; gap: var(--a-2); }
.kategoriebalken__spur {
  width: 100%; height: 20px; border-radius: var(--r-chip); overflow: hidden;
  background: var(--ungelesen); display: flex; align-items: center; justify-content: space-between;
}
.kategoriebalken__gelesen {
  height: 100%; background: var(--gelesen); border-radius: var(--r-chip) 0 0 var(--r-chip);
  display: flex; align-items: center; padding-inline-start: var(--a-2);
  font-size: 10px; font-weight: 700; color: var(--rumpf-oben); white-space: nowrap; overflow: hidden;
}
.kategoriebalken__ungelesen { padding-inline-end: var(--a-2); font-size: 10px; font-weight: 700; color: #2A1210; margin-inline-start: auto; }
.kategoriebalken > span:first-child { font-weight: 700; font-size: var(--t-kartentitel); }

@media (max-width: 767px) and (orientation: portrait) {
  /* Prozentwert und Kategoriename in eine Zeile, der Balken darunter ueber
     die volle Breite. Vorher standen drei Zeilen je Kategorie untereinander
     und der Name schwebte unter dem Balken (Stephan, 12.08.2026).
     Diese Regeln muessen hinter alle .kategoriebalken-Regeln - davor gewinnt
     deren display: flex, und die Umstellung blieb wirkungslos. */
  .kategoriebalken {
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "prozent name" "balken balken";
    align-items: baseline; justify-items: start; gap: var(--a-2);
  }
  .kategoriebalken > span:first-child { grid-area: prozent; }
  .kategoriebalken__spur { grid-area: balken; }
  .kategoriebalken > span:last-child { grid-area: name; }
}

/* --- Verlage nach Kategorie ------------------------------------------------ */
.verlagsraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.verlagbalken { display: flex; align-items: center; gap: var(--a-3); }
.verlagbalken > span:first-child { width: 74px; flex: none; font-size: var(--t-label); color: var(--schrift-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verlagbalken__spur { flex: 1; height: 20px; background: var(--rumpf-oben); border-radius: var(--r-chip); overflow: hidden; }
.verlagbalken__fuellung {
  display: block; height: 100%; width: 0;
  background: var(--gold); border-radius: var(--r-chip);
  transition: width var(--uebergang-bewegung);
}
/* Die Zahl steht hinter dem Balken, nicht darin: bei Panini reicht der
   Balken fast ueber die volle Breite, bei kleinen Verlagen war er schmaler
   als die Zahl - die verschwand dann im Gold (Stephan, 11.08.2026). Feste
   Breite, damit die Ziffern untereinander stehen. */
.verlagbalken__zahl {
  width: 40px; flex: none; text-align: end;
  font-size: var(--t-label); font-weight: 700; color: var(--schrift);
}

/* --- Format-Ring + Legende, Top bewertet ----------------------------------- */
.statistik-2spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(16px, 2vw, 26px); }
/* Nur intern (B7): Coverwert und Pflegestand ueber dem gespiegelten Rumpf. */
.statistik-2spalten--intern { margin-block: var(--a-5); align-items: start; }
.wertzeile {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px var(--a-3); padding-block: var(--a-2);
  border-bottom: 1px solid var(--office-rahmen); font-size: var(--t-text-klein);
}
.wertzeile:last-of-type { border-bottom: none; }
.wertzeile__zahl { font-size: var(--t-kartentitel); font-weight: 700; color: var(--schrift); }
.wertzeile .statistik-fussnote { grid-column: 1 / -1; }
.formatzeile { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 32px); flex-wrap: wrap; flex: 1; }
.legende { display: flex; flex-direction: column; gap: var(--a-2); flex: 1; min-width: 170px; list-style: none; margin: 0; padding: 0; font-size: var(--t-text-klein); color: var(--schrift-2); }
.legende li { display: flex; align-items: center; gap: var(--a-2); }
.legende li .zahl { margin-inline-start: auto; font-weight: 700; color: var(--schrift); }
/* Rechtsbuendig an der Kastenkante, damit Text und Zahl eine Spalte bilden. */
.legende--rechts { text-align: end; }
.legende--rechts li { justify-content: flex-end; }
.legende--rechts li .zahl { margin-inline-start: var(--a-3); min-width: 3ch; }
.legende__punkt { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legende--zeile { flex-direction: row; flex-wrap: wrap; gap: var(--a-2) var(--a-4); }

.topraster { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--a-2); }
.topraster__karte { position: relative; display: block; aspect-ratio: var(--cover-verhaeltnis); border-radius: var(--r-cover); overflow: hidden; border: 1px solid var(--rahmen); }
.topraster__sterne {
  position: absolute; bottom: 4px; left: 4px; background: rgba(7, 8, 13, .9); color: var(--gold);
  border-radius: var(--r-badge); padding: 1px 5px; font-size: 9px; font-weight: 700;
}

.scrollcover { display: block; border-radius: var(--r-cover); overflow: hidden; border: 1px solid var(--rahmen); }

/* --- Saeulendiagramme (Lesen) -----------------------------------------------
   Die Prozenthoehe des Balkens bezieht sich auf .saeule__spur, nicht auf das
   ganze Diagramm. Vorher war der Balken ein Geschwister von Wert und
   Monatsname und rechnete gegen die volle Diagrammhoehe - die er nie
   erreichen konnte, weil die Beschriftung mit im selben Kasten steht. Alles
   ab etwa 69 % kam gleich hoch heraus, das obere Drittel der Skala gab es
   nicht (Stephan, 16.08.2026). */
.saeulendiagramm { display: flex; align-items: flex-end; gap: clamp(6px, 1vw, 12px); height: 280px; }
.saeule__spur { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; }
.saeule { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; text-decoration: none; color: inherit; }
.saeule:hover { text-decoration: none; }
.saeule__wert { font-size: 12px; color: var(--schrift-2); }

/* Aufschluesselung nach Format, nur beim Ueberfahren oder bei Tastaturfokus.
   Sie liegt ueber der Saeule statt darin, damit sie die Balkenhoehen nicht
   verschiebt. */
.saeule__wertzeile { position: relative; display: flex; justify-content: center; }
.saeule__aufschluesselung {
  position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0;
  display: none; gap: var(--a-2); z-index: 2;
  padding: 5px 8px; border-radius: var(--r-badge);
  background: var(--rumpf-oben); border: 1px solid var(--rahmen);
  font-size: 11px; white-space: nowrap;
}
/* :not([hidden]) ist hier Pflicht, nicht Zierde: die Aufschluesselung gibt es
   seit dem 19.08.2026 zweimal, nach Format und nach Kategorie, und die nicht
   gewaehlte traegt hidden. Ohne die Einschraenkung wuerde dieses display:flex
   das hidden ueberstimmen und beim Ueberfahren staenden beide da. */
.saeule:hover .saeule__aufschluesselung:not([hidden]),
.saeule:focus-visible .saeule__aufschluesselung:not([hidden]) { display: flex; }
/* Ohne Zeigegeraet gibt es kein Ueberfahren. Dort zeigt der gewaehlte Monat
   seine Aufschluesselung dauerhaft: der Griff auf den Balken laedt die Seite
   neu, und mit ihr war die Anzeige sofort wieder weg (Stephan, 12.08.2026). */
@media (hover: none) {
  .saeule--aktiv .saeule__aufschluesselung:not([hidden]) { display: flex; }
}
.saeule__anteil { display: flex; align-items: center; gap: 4px; }
.saeule__anteil .zahl { color: var(--schrift); font-weight: 700; }
.saeule__saeule {
  width: 100%; height: 0; display: flex; flex-direction: column-reverse;
  border-radius: 4px 4px 0 0; overflow: hidden; background: #3A3D46;
  transition: height 500ms ease-out;
  /* Schmale Linie in leeren Monaten, wie auf der Startseite: sonst fehlt an
     der Stelle jede Spur und die Monate wirken uebersprungen
     (Stephan, 11.08.2026). */
  min-height: 2px;
}
/* Ein Stapel je Aufteilung (Format oder Kategorie), einer davon verborgen.
   Er fuellt die Saeule und uebernimmt deren column-reverse, damit das erste
   Segment weiterhin unten liegt. Die Prozenthoehen der Segmente beziehen
   sich damit unveraendert auf die volle Saeulenhoehe. */
.saeule__stapel { width: 100%; height: 100%; display: flex; flex-direction: column-reverse; }
/* Muss hinter der Regel darueber stehen und schlaegt sie ueber die hoehere
   Spezifitaet - sonst ueberstimmt das display:flex das hidden-Attribut. */
.saeule__stapel[hidden] { display: none; }
.legende[hidden] { display: none; }

.saeule__segment { width: 100%; height: 0; transition: height 500ms ease-out; }
.saeule__label { font-size: 12px; color: var(--meta); }
.saeule__label-kurz { display: none; }
@media (max-width: 767px) {
  /* Zwoelf Monatsnamen brauchen mehr Platz als zwoelf Saeulen breit sind -
     die Namen standen nicht mehr unter ihren Balken (Stephan, 12.08.2026).
     Der lange Name bleibt fuer die Vorlesehilfe im Markup. */
  .saeule__label-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .saeule__label-kurz { display: inline; }

  /* Bei den Seiten stehen fuenfstellige Zahlen ueber den Balken. "13.083"
     ist 43 px breit, eine Saeule aber nur 21 - zwoelf davon sprengten das
     Diagramm um 207 px nach rechts. Die Stueckzahlen sind zwei- bis
     dreistellig und passen, die bleiben stehen. */
  .saeulendiagramm--einfarbig .saeule__wert { display: none; }
}
/* Gestapelt bleibt es beim Rahmen - eine goldene Fuellung wuerde genau die
   Formatfarben verdecken, die das Diagramm zeigen soll. */
.saeule--aktiv .saeule__saeule { outline: 2px solid var(--gold); outline-offset: 3px; }
.saeule--aktiv .saeule__wert, .saeule--aktiv .saeule__label { color: var(--schrift); font-weight: 600; }
.saeule--zukunft .saeule__wert { color: var(--meta); }
.saeulendiagramm--einfarbig .saeule__saeule { background: var(--rahmen); }
/* Einfarbig (Seiten je Monat): der aktive Balken wird gefuellt, nicht umrandet. */
.saeulendiagramm--einfarbig .saeule--aktiv .saeule__saeule { outline: none; background: var(--gold); }


.bandkarte--in-sammlung { background: color-mix(in srgb, #4C82C3 16%, var(--karte)); }
.bandkarte--nicht-in-sammlung { background: var(--office-tile); }

/* ==========================================================================
   Statusseiten (404, künftig 403/500 im gleichen Muster)
   ========================================================================== */

.statusseite {
  display: flex; flex-direction: column; align-items: center; gap: var(--a-3);
  max-width: 420px; margin-inline: auto; padding: var(--a-6) var(--a-5);
  text-align: center;
  background: var(--karte-erhoeht); border: 1px solid var(--rahmen);
  border-radius: var(--r-karte);
}
.statusseite__zahl {
  font-family: var(--f-mono); font-weight: 700; font-size: 40px;
  line-height: 1; color: var(--gold);
}
.statusseite p { margin: 0; }
.statusseite .row { display: flex; gap: var(--a-2); margin-top: var(--a-1); }

/* ==========================================================================
   Hinweisbanner und Lightbox
   ========================================================================== */

.hinweisbanner {
  position: fixed; inset-inline: var(--a-4); bottom: var(--a-4); z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3);
  max-width: 640px; margin-inline: auto;
  background: var(--karte-erhoeht); border: 1px solid var(--gold);
  border-radius: var(--r-karte); padding: var(--a-3) var(--a-4);
  font-size: var(--t-text-klein); color: var(--schrift-2);
}
.hinweisbanner span { flex: 1 1 240px; }

.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-content: center; gap: var(--a-4);
  background: rgba(5, 6, 10, .92); padding: var(--a-5);
}
.lightbox img { max-width: min(92vw, 1200px); max-height: 86vh; width: auto; height: auto; }
.lightbox .btn { justify-self: end; }

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.fuss {
  border-top: 1px solid var(--rahmen-linie);
  margin-top: var(--a-7); padding-block: var(--a-6);
}
.fuss .inhalt { display: flex; align-items: flex-end; gap: var(--a-5); flex-wrap: wrap; }
.fuss nav { display: flex; gap: var(--a-4); margin-inline-start: auto; align-items: center; font-size: var(--t-text-klein); }
.fuss a { color: var(--meta); }
.fuss__logo { opacity: .9; }
.fuss__link {
  border: 0; background: transparent; padding: 0; margin: 0;
  color: var(--meta); font: inherit; cursor: pointer;
}
.fuss__link:hover { color: var(--gold-hell); text-decoration: underline; text-underline-offset: 3px; }
.fuss__copyright { color: var(--meta); font-size: var(--t-text-klein); }

/* Mobil bleibt von der Fusszeilen-Navigation nur "Hinweis erneut anzeigen"
   stehen. Die drei Rechtsseiten passten nicht in eine Zeile und quetschten
   den Knopf an den Rand; sie stehen im Burgermenue (Stephan, 12.08.2026). */
@media (max-width: 767px) {
  .fuss nav a { display: none; }
  .fuss nav { margin-inline-start: 0; }
  .fuss .inhalt { gap: var(--a-3); }
}

/* ==========================================================================
   Pflegebereich
   ========================================================================== */

.office-kopf { background: var(--office-seite); border-bottom: 1px solid var(--office-rahmen); }
.office-kopf__zeile { display: flex; align-items: center; gap: var(--a-5); padding-block: var(--a-3); }
.office-kopf__marke { font-family: var(--f-mono); color: var(--gold); }
/* Eigene Klasse statt "office-kopf nav": das Burger-Menue ist ebenfalls ein
   nav im Kopf, und ein display:flex haette dessen hidden ueberstimmt - das
   Menue stuende dann dauerhaft offen. */
.office-kopf__navigation { display: flex; gap: var(--a-4); margin-inline-start: auto; font-size: var(--t-navigation); }

@media (max-width: 1023px) {
  /* Bis hierher wuchs der Kopf mit jedem neuen Punkt in die Breite, statt
     umzubrechen (Stephan, 04.09.2026). Abmelden wandert mit ins Menue -
     zwei Tipps statt einem, dafuer passt die Zeile wieder auf den Schirm. */
  .office-kopf__navigation,
  .office-kopf__abmelden { display: none; }
  /* Das Menue erbt die Farben des Pflegebereichs, nicht die des Frontends. */
  .office .menue { border-top-color: var(--office-rahmen); background: var(--office-seite); }
}
.office-fuss { margin-top: var(--a-7); padding-block: var(--a-4);
               border-top: 1px solid var(--office-rahmen);
               color: var(--meta); font-size: var(--t-text-klein); }

/* --- B2 Sammlung pflegen ---------------------------------------------------- */
.office-kopfzeile {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--a-3) var(--a-5); padding-block: var(--a-5) var(--a-4);
}
.office-kopfzeile h1 { font-size: clamp(24px, 3vw, 34px); margin-bottom: var(--a-1); }
.office-kopfzeile__aktionen { display: flex; gap: var(--a-2); flex-wrap: wrap; }

.office-filterleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2);
  padding-bottom: var(--a-4); border-bottom: 1px solid var(--office-rahmen);
}
/* Alle Bedienelemente der Zeile auf eine Hoehe. Ohne das stehen Suchfeld (42),
   Knopf (44) und Chips (34) nebeneinander und die Zeile wirkt unruhig. */
.office-filterleiste > .suchfeld,
.office-filterleiste > .btn,
.office-filterleiste > .chip { height: var(--tippziel); min-height: var(--tippziel); }
/* Auswahlfelder wachsen sonst mit dem laengsten Eintrag - der Kreativen-Filter
   sprengt damit die Zeile. */
.office-filterleiste > select.chip { max-width: 220px; }

@media (max-width: 1023px) {
  /* Unter 1024 uebernimmt das Filter-Sheet, genau wie im Frontend. Die Chips
     stapelten sich sonst ueber mehrere Zeilen. Suchfeld und Kreativen-Auswahl
     bleiben stehen - Begruendung im Template (Stephan, 04.09.2026). */
  .office-filter-chip { display: none; }
}
.suchfeld {
  display: flex; align-items: center; gap: var(--a-2);
  flex: 1 1 220px; max-width: 420px; height: 42px; padding: 0 15px;
  border-radius: var(--r-chip); border: 1px solid var(--office-rahmen);
  background: var(--office-panel); color: var(--meta);
}
.suchfeld__eingabe {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--schrift);
  font-family: var(--f-text); font-size: var(--t-navigation);
}
.suchfeld__eingabe:focus { outline: none; }
.suchfeld:focus-within { border-color: var(--gold); }

.office-steuerleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3);
  padding-block: var(--a-4);
}
.office-steuerleiste--ende { justify-content: flex-end; padding-block-end: var(--a-7); }

.office-raster { padding-block: var(--a-2) var(--a-5); }
.office-liste { display: flex; flex-direction: column; padding-block: var(--a-2) var(--a-5); }
.office-leer { padding-block: var(--a-6); color: var(--schrift-2); }

.neukachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a-3);
  aspect-ratio: 2 / 2.9; border-radius: var(--r-karte);
  border: 1px dashed var(--gold); background: var(--office-tile);
  color: var(--gold); font-family: var(--f-display); font-weight: 600; font-size: var(--t-text-klein);
}
.neukachel:hover { background: rgba(255, 195, 0, .08); text-decoration: none; }
.neukachel__kreis {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: var(--office-seite);
  display: grid; place-content: center;
}

.pflegekarte { display: flex; flex-direction: column; color: var(--schrift); }
.pflegekarte__bild { position: relative; display: block; padding: var(--a-1); }
.pflegekarte__text { display: flex; flex-direction: column; gap: 3px; padding: 0 10px 10px; }
.pflegekarte__titel {
  font-weight: 600; font-size: var(--t-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pflegekarte__zeile { font-family: var(--f-mono); font-size: var(--t-rubrik); color: var(--meta); }
.pflegekarte__offen {
  position: absolute; top: var(--a-2); inset-inline-start: var(--a-2);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--office-seite);
  display: grid; place-content: center;
}
.pflegekarte__marke {
  position: absolute; bottom: var(--a-2); inset-inline-start: var(--a-2);
  padding: 2px 7px; border-radius: var(--r-badge);
  background: rgba(14, 15, 19, .9); border: 1px solid var(--office-rahmen);
  font-family: var(--f-mono); font-size: 9px; color: var(--schrift-2);
}
.pflegekarte__marke--merk { color: var(--gold); border-color: var(--gold); }
.bandzeile__status--offen { background: var(--gold); }

/* --- Anmeldung (B1) -------------------------------------------------------- */
.office--anmeldung { display: grid; place-items: center; min-height: 100vh; }
.anmeldung { width: 100%; padding: var(--a-5); }
.anmeldung__karte {
  width: 100%; max-width: 380px; margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--a-4);
  padding: var(--a-6) var(--a-5);
  border-radius: var(--r-karte); border: 1px solid var(--office-rahmen);
  background: var(--office-panel);
}
.anmeldung__karte--breit { max-width: 520px; }
.anmeldung__marke { font-family: var(--f-mono); font-size: var(--t-label); color: var(--gold); }
.anmeldung__form { display: flex; flex-direction: column; gap: var(--a-4); }
.anmeldung__form .btn { width: 100%; }
.feld--code { font-family: var(--f-mono); font-size: var(--t-kartentitel); letter-spacing: 4px; text-align: center; }

.einrichtung__block { display: flex; flex-direction: column; gap: var(--a-2); }
.einrichtung__block + .einrichtung__block { padding-top: var(--a-4); border-top: 1px solid var(--office-rahmen); }
.einrichtung__secret {
  display: block; padding: var(--a-3); border-radius: var(--r-feld);
  background: var(--office-karte); border: 1px solid var(--office-rahmen);
  font-family: var(--f-mono); font-size: var(--t-kartentitel-s); word-break: break-all; user-select: all;
}
.einrichtung__hinweis { font-size: var(--t-label); color: var(--meta); margin: 0; }
.einrichtung__codes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--a-2); list-style: none; margin: 0; padding: 0;
}
.einrichtung__codes code {
  display: block; padding: var(--a-2); text-align: center;
  border-radius: var(--r-badge); background: var(--office-karte); border: 1px solid var(--office-rahmen);
  font-family: var(--f-mono); font-size: var(--t-text-klein); user-select: all;
}

@media (max-width: 1023px) { .pflege-raster { grid-template-columns: 1fr; } }

.dialog {
  border: 1px solid var(--office-rahmen); border-radius: var(--r-karte);
  background: var(--office-panel); color: var(--schrift);
  max-width: 460px; padding: var(--a-5);
}
.dialog::backdrop { background: rgba(3, 4, 8, .72); }
.dialog h2 { margin-bottom: var(--a-3); }
.dialog__aktionen { display: flex; justify-content: flex-end; gap: var(--a-2); margin-top: var(--a-4); }


/* --- Pflegemaske nach Vorlage ---------------------------------------------- */
.pflegemaske {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 32px);
  align-items: flex-start; padding-block: var(--a-4);
}
.pflegemaske__links { flex: 0 0 clamp(220px, 26%, 300px); min-width: 220px; display: flex; flex-direction: column; gap: var(--a-4); }
.pflegemaske__rechts { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }

.coverkasten {
  position: relative; width: 100%; max-width: 280px; aspect-ratio: var(--cover-verhaeltnis);
  border-radius: var(--r-karte); overflow: hidden;
  border: 1px solid var(--office-rahmen); background: var(--office-panel);
}
.coverkasten img { width: 100%; height: 100%; object-fit: cover; }
.coverkasten__leer { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--meta); font-size: var(--t-text-klein); }
.coverkasten__leiste {
  position: absolute; inset-inline: 0; bottom: 0; padding: var(--a-2);
  background: rgba(14, 15, 19, .82); display: flex; justify-content: center; gap: var(--a-3);
}
.coverkasten__aktion {
  border: 0; background: none; cursor: pointer;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-label); color: var(--gold);
}
.coverkasten__aktion--still { color: var(--schrift-2); }
.coverkasten__aktion:hover { color: var(--gold-hell); }

.panel {
  display: flex; flex-direction: column; gap: var(--a-3);
  padding: var(--a-4); border-radius: var(--r-karte);
  border: 1px solid var(--office-rahmen); background: var(--office-panel);
}
.panel__trenner { height: 1px; background: var(--office-rahmen); margin-block: var(--a-1); }
.feldhinweis { font-size: var(--t-label); line-height: 1.6; color: var(--meta); }
.feldhinweis__betont { color: var(--schrift); font-weight: 600; }

/* Kaestchen "auf Einzelcomics uebernehmen" unter jedem Serienfeld (B4) */
.uebernahme {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-label); line-height: 1.4; color: var(--meta); cursor: pointer;
}
.uebernahme:hover { color: var(--schrift); }
.kaestchen {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none; margin: 0;
  border: 1px solid var(--office-rahmen); border-radius: 4px;
  background: var(--office-seite); cursor: pointer;
  transition: background-color var(--uebergang-farbe), border-color var(--uebergang-farbe);
}
.kaestchen:checked {
  border-color: var(--gold); background-color: var(--gold);
  /* Haken als data-URI - im Stylesheet erlaubt (CSP: img-src 'self' data:) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
  background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
}
.kaestchen:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.uebernahme-steuerung { display: flex; gap: var(--a-2); }
.uebernahme-steuerung .btn { flex: 1 1 0; justify-content: center; }
/* Kompakter im Text, aber weiterhin 44 px hoch - das Tippziel bleibt. */
.btn--klein { padding-inline: var(--a-3); font-size: var(--t-label); }

/* Schalter statt Kaestchen, 44x24 mit Knopf 18 (tokens.css: .schalter) */
.toggle-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
  font-size: var(--t-navigation); color: var(--schrift); cursor: pointer;
}
.toggle-zeile--gesperrt { opacity: .45; cursor: not-allowed; }
.toggle {
  /* inline-block ist noetig: als reines <span> waere die Breite wirkungslos
     und man saehe nur den Knopf, nicht die Schiene. */
  display: inline-block;
  position: relative; width: 44px; height: 24px; flex: none;
  border-radius: var(--r-chip); background: var(--office-rahmen);
  transition: background-color var(--uebergang-farbe);
}
.toggle__knopf {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--meta);
  transition: transform var(--uebergang-bewegung), background-color var(--uebergang-farbe);
}
.toggle__eingabe:checked ~ .toggle { background: var(--gelesen); }
.toggle__eingabe:checked ~ .toggle .toggle__knopf { background: var(--office-seite); transform: translateX(20px); }
.toggle__eingabe:focus-visible ~ .toggle { outline: 3px solid var(--fokus); outline-offset: 2px; }

.feldraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--a-3); }
.feld-block { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.feld-block--voll { grid-column: 1 / -1; }
.feld-block__label { font-size: var(--t-label); color: var(--meta); }
.feld-paar { display: flex; gap: var(--a-2); }
.feld-paar > .feld:first-child { flex: 1 1 auto; min-width: 0; }
.feld--schmal { width: 84px; flex: 0 0 84px; }
.feld--klein { height: 34px; font-size: var(--t-text-klein); }
.feld--hoch { min-height: 220px; }
.feld--toggle { display: flex; align-items: center; }
.feld--toggle .toggle-zeile { width: 100%; }
.feld--knopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-2);
  text-align: start; cursor: pointer; color: var(--schrift);
}
.feld--knopf:hover { border-color: var(--gold); }
.feld--knopf__aktion { margin-inline-start: auto; font-family: var(--f-display); font-weight: 600; font-size: var(--t-label); color: var(--gold); }

.textwerkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); }
.textwerkzeug__knopf {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--office-rahmen); background: var(--office-karte);
  color: var(--schrift-2); cursor: pointer;
  font-family: var(--f-display); font-size: var(--t-navigation);
}
.textwerkzeug__knopf:hover { border-color: var(--gold); background: rgba(255, 195, 0, .06); }
.textwerkzeug__knopf--fett { font-weight: 700; }
.textwerkzeug__knopf--kursiv { font-style: italic; }
.textwerkzeug__hinweis { font-size: var(--t-label); color: var(--meta); margin-inline-start: auto; }

.kreativfelder { display: flex; flex-wrap: wrap; gap: var(--a-3); }
.kreativrolle {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2);
  background: var(--office-karte); border: 1px solid var(--office-rahmen);
  border-radius: var(--r-feld); padding: var(--a-2) 11px;
}
.kreativrolle__titel { flex: none; }
.kreativrolle__chips { display: flex; flex-wrap: wrap; gap: var(--a-1); }
.kreativchip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--office-tile); border: 1px solid var(--office-rahmen);
  border-radius: var(--r-chip); padding: 4px 11px; font-size: var(--t-text-klein);
}
.kreativchip__weg { border: 0; background: none; padding: 0; color: var(--meta); cursor: pointer; }
.kreativchip__weg:hover { color: var(--ungelesen); }
.kreativrolle__eingabe { flex: 1 1 140px; min-width: 120px; }

.lesezeile { display: flex; flex-wrap: wrap; gap: var(--a-3); align-items: flex-end; }
.zaehler {
  display: flex; align-items: center; gap: var(--a-3); height: 42px; padding: 0 var(--a-2) 0 13px;
  border-radius: 9px; border: 1px solid var(--office-rahmen); background: var(--office-karte);
}
.zaehler__knoepfe { display: flex; gap: 4px; margin-inline-start: auto; }
.zaehler__knopf {
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--office-rahmen); background: var(--office-panel);
  color: var(--schrift-2); cursor: pointer;
  font-family: var(--f-mono); font-weight: 600; font-size: var(--t-navigation);
}
.zaehler__knopf:hover { border-color: var(--gold); background: rgba(255, 195, 0, .06); }

.sterneeingabe { display: flex; align-items: center; gap: var(--a-3); flex-wrap: wrap; }
.sterneeingabe .stern { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; }
.sterneeingabe .stern svg { width: 26px; height: 26px; }
.sterneeingabe__wert { font-weight: 700; font-size: var(--t-kartentitel-s); }
.sterneeingabe__weg { border: 0; background: none; padding: 0; color: var(--meta); cursor: pointer; font-size: var(--t-label); }
.sterneeingabe__weg:hover { color: var(--schrift); }

.speichermeldung {
  display: flex; align-items: center; gap: var(--a-3);
  padding: var(--a-3) var(--a-4); border-radius: var(--r-feld);
  margin-block-start: var(--a-4); font-size: var(--t-text-klein);
}
.speichermeldung--erfolg { border: 1px solid var(--gelesen); background: rgba(52, 199, 89, .1); color: var(--schrift); }

/* --- Tabelle einlesen ------------------------------------------------------ */
.importformular { max-width: 720px; }
.importformular .feld[type="file"] { padding-block: 9px; height: auto; }

.berichtliste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--a-2);
  font-size: var(--t-text-klein); color: var(--schrift-2);
  max-height: 380px; overflow-y: auto;
}
.berichtliste .zahl { color: var(--meta); margin-inline-end: var(--a-2); }
.berichtliste code { font-family: var(--f-mono); font-size: var(--t-label); color: var(--schrift); }

.berichtzeile {
  display: flex; flex-direction: column; gap: var(--a-2);
  padding-block: var(--a-3); border-bottom: 1px solid var(--office-rahmen);
}
.berichtzeile:last-of-type { border-bottom: none; }
.berichtzeile__kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--a-3); }

/* Eine Zeile je geaendertem Feld. Der alte Wert bleibt lesbar, damit die
   Durchsicht ihren Zweck erfuellt - durchgestrichen waere er es nicht. */
/* Feste Spaltenbreiten, damit die Pfeile untereinander stehen. Der alte Wert
   bekommt eine begrenzte Spalte, sonst reisst ein kurzer Wert die Zeile weit
   auseinander und alt und neu stehen nicht mehr beieinander. */
.aenderung {
  display: grid; grid-template-columns: 150px minmax(0, 28ch) 18px minmax(0, 1fr);
  align-items: baseline; gap: var(--a-3);
  font-size: var(--t-text-klein); padding-inline-start: var(--a-4);
}
.aenderung__feld { color: var(--meta); font-size: var(--t-label); }
.aenderung__alt  { color: var(--meta); }
.aenderung__pfeil { color: var(--gold); }
.aenderung__neu  { color: var(--schrift); font-weight: 600; }

@media (max-width: 767px) {
  .aenderung { grid-template-columns: 1fr; gap: 2px; }
  .aenderung__pfeil { display: none; }
}

/* Kreative bereinigen ------------------------------------------------------
   Vier Spalten: Name samt Umbenennen-Knopf, Nennungen, die beiden Eingriffe.
   Der Hinweis zur Auffaelligkeit sitzt in einer zweiten Rasterzeile unter dem
   Namen, damit er die Spaltenbreiten nicht mitbestimmt. */
.kreativliste, .kreativgruppe { display: flex; flex-direction: column; }
.kreativgruppe {
  border: 1px solid var(--office-rahmen); border-radius: var(--r-karte);
  padding: var(--a-3) var(--a-4); margin-block-start: var(--a-3);
}
.kreativzeile {
  /* Feste Spalte fuer die Nennungen: sonst richtet sich ihre Breite nach dem
     laengsten Rolleneintrag der jeweiligen Zeile, und die Namensfelder stehen
     innerhalb einer Dublettengruppe unterschiedlich weit. */
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem auto;
  grid-template-areas: "name zahlen aktionen" "hinweis hinweis hinweis";
  align-items: center; gap: var(--a-2) var(--a-3);
  padding-block: var(--a-3); border-bottom: 1px solid var(--office-rahmen);
}
.kreativzeile:last-child { border-bottom: none; }
.kreativzeile--hervor { background: rgba(198, 160, 74, .09); }
.kreativzeile__name {
  grid-area: name; display: flex; align-items: center; gap: var(--a-2); min-width: 0;
}
.kreativzeile__name .feld { flex: 1 1 auto; min-width: 0; }
.kreativzeile__zahlen {
  grid-area: zahlen; display: flex; align-items: baseline; gap: var(--a-2);
  white-space: nowrap; font-size: var(--t-text-klein);
}
.kreativzeile__aktionen { grid-area: aktionen; display: flex; gap: var(--a-2); }
.kreativzeile__hinweis {
  grid-area: hinweis; color: var(--meta); font-size: var(--t-label);
}
@media (max-width: 767px) {
  .kreativzeile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "zahlen" "aktionen" "hinweis";
  }
}

/* Liste der Serien ohne Baende (B2 -> Leere Serien) */
.leereserien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.leereserien__zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--a-3);
  padding-block: var(--a-3); border-bottom: 1px solid var(--office-rahmen);
}
.leereserien__zeile:last-child { border-bottom: none; }
.leereserien__titel { display: flex; align-items: baseline; gap: var(--a-2); min-width: 0; }
.leereserien__titel a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speichermeldung--fehler { border: 1px solid var(--ungelesen); background: rgba(217, 80, 74, .1); color: var(--schrift); }
.speichermeldung__weg { margin-inline-start: auto; border: 0; background: none; color: var(--meta); cursor: pointer; font-family: var(--f-mono); font-size: var(--t-label); }
.aktionsleiste__stand { margin-inline-end: auto; }

/* display nur im geoeffneten Zustand: ein unbedingtes display wuerde die
   Browserregel dialog:not([open]) { display: none } ueberstimmen und den
   Dialog dauerhaft am Seitenende stehen lassen. */
/* Cover zuschneiden: Bild mit aufziehbarem Rahmen */
.dialog--zuschnitt { width: min(560px, 92vw); max-width: none; }
.dialog--zuschnitt[open] { display: flex; flex-direction: column; }
.dialog--zuschnitt form { display: flex; flex-direction: column; gap: var(--a-3); }
/* Der Rahmen wird absolut in diesem Kasten positioniert, gerechnet wird aber
   auf dem Bild. Deshalb muss der Kasten das Bild exakt umschliessen - bei
   zentriertem Inhalt saesse die Auswahl um den Rand daneben. */
.zuschnitt {
  position: relative; display: block; width: fit-content;
  margin-inline: auto; user-select: none; line-height: 0;
}
.zuschnitt__bild {
  display: block; max-width: 100%; max-height: 58vh; height: auto;
  border-radius: var(--r-cover); cursor: crosshair;
}
.zuschnitt__auswahl {
  position: absolute; pointer-events: none;
  border: 2px solid var(--gold); background: rgba(255, 195, 0, .14);
  box-shadow: 0 0 0 9999px rgba(3, 4, 8, .55);
}

.dialog--liste { width: min(520px, 92vw); max-width: none; max-height: 82vh; }
.dialog--liste[open] { display: flex; flex-direction: column; }
.dialog--liste form { display: flex; flex-direction: column; gap: var(--a-3); min-height: 0; }
/* Im Dialog ist die Form eine Spalte, und .suchfeld traegt flex: 1 1 220px -
   das wirkt dort auf die HOEHE. Beim Tippen verschwanden Eintraege aus der
   Liste, der frei werdende Platz fiel ans Suchfeld, und es wurde mit jedem
   Buchstaben hoeher (Stephan, 13.08.2026). Wachsen soll die Liste. */
.dialog--liste .suchfeld { flex: none; max-width: none; }
.dialog--liste .serienliste { flex: 1 1 auto; }
.dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); }
.dialog__schliessen {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--office-rahmen); background: var(--office-panel);
  color: var(--schrift-2); cursor: pointer; display: grid; place-content: center;
}
.suchfeld--dialog { max-width: none; }
.serienliste { overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.serienliste__eintrag {
  display: flex; align-items: center; gap: var(--a-3);
  padding: var(--a-3); border-radius: var(--r-feld); cursor: pointer;
}
.serienliste__eintrag:hover { background: rgba(255, 195, 0, .08); }
.serienliste__titel { flex: 1; min-width: 0; }
.serienliste__eintrag .rubrik { flex: none; }
.serienliste__leer { padding: var(--a-4); color: var(--meta); font-size: var(--t-text-klein); }

.fliesstext p { margin: 0 0 var(--a-3); }
.fliesstext p:last-child { margin-bottom: 0; }

.pflege { display: flex; flex-direction: column; }

.panel > legend { padding: 0 var(--a-2); }
fieldset.panel { border: 1px solid var(--office-rahmen); border-radius: var(--r-karte); padding: var(--a-4); margin: 0; }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-3); }
@media (max-width: 767px) { .feldpaar { grid-template-columns: 1fr; } }
.feld--flaeche { height: auto; padding: var(--a-3); font-family: var(--f-text); line-height: 1.6; resize: vertical; }
.office .feld:focus-visible { border-color: var(--gold); }

.feldzeile { display: grid; gap: var(--a-2); margin-bottom: var(--a-4); }
.schalterzeile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
  padding-block: var(--a-3);
}
.schalterzeile + .schalterzeile { border-top: 1px solid var(--office-rahmen); }

.aktionsleiste {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: var(--a-3);
  padding: var(--a-3) 0; background: var(--office-seite);
  border-top: 1px solid var(--office-rahmen);
}
.aktionsleiste .btn:last-child { margin-inline-start: auto; }