/* ============================================================================
   Design-Tokens — Comicsammlung
   Quelle: "Tokens und Komponenten Design.dc.html" und "Handoff Notizen.md".
   Alle Werte sind verbindlich. Keine Zwischentöne, keine zusätzlichen Stufen.
   ========================================================================== */

:root {
  /* --- Marke & Interaktion ------------------------------------------------ */
  --gold:            #FFC300;   /* Akzent, Auswahl, Primärbutton              */
  --gold-hell:       #FFD23F;   /* Hover auf Goldflächen, Textlink-Hover      */
  --gold-dunkel:     #E0A800;   /* gedrückter Zustand                         */
  --fokus:           #4C8DFF;   /* NUR Fokusring — nie Fläche, nie Auswahl    */

  /* --- Frontend: Flächen, Rahmen, Schrift --------------------------------- */
  --seite:           #05060A;
  --rumpf-oben:      #07080D;   /* Verlauf-Start, Schrift auf Abzeichen       */
  --karte:           #0B0E16;
  --karte-erhoeht:   #122036;   /* Chips, Kacheln, Statistikkästen            */
  --rahmen:          #24395C;
  --rahmen-linie:    rgba(36, 57, 92, .55);   /* Trennlinien, 55 % Deckkraft  */
  --schrift:         #F4F6FA;
  --schrift-2:       #ADB5C2;
  /* Sekundaertext. Der Wert ist nicht frei gewaehlt, sondern der hellste
     Untergrund gibt ihn vor: auf --karte-erhoeht (#122036) erreicht #808795
     genau 4.53:1 und damit WCAG 1.4.3 auf Stufe AA. Auf den dunkleren
     Gruenden liegt er entsprechend hoeher (bis 5.61:1 auf --seite).
     Vorher stand hier #6B7280 - das ergab 3.38:1 bis 4.19:1 und ist damit
     auf JEDEM Untergrund durchgefallen (gemessen am 03.09.2026).
     Wer den Wert dunkler stellt, nimmt die AA-Konformitaet mit. */
  --meta:            #808795;
  --stern-leer:      #38445F;

  /* --- Pflegebereich /cs-office/: neutrales Grau -------------------------- */
  --office-seite:    #0E0F13;
  --office-karte:    #15161A;
  --office-panel:    #1E2026;
  --office-tile:     #262932;
  --office-rahmen:   #343640;

  /* --- Status ------------------------------------------------------------- */
  --gelesen:         #34C759;
  --ungelesen:       #D9504A;   /* zugleich Fehler und Löschen               */
  --rezension:       #FFC300;

  /* --- Bewertung: 5 Stufen, gebündelt ------------------------------------- */
  --bew-5:           #34C759;   /* 4,5 + 5,0 */
  --bew-4:           #9DBF3B;   /* 3,5 + 4,0 */
  --bew-3:           #E8C22E;   /* 2,5 + 3,0 */
  --bew-2:           #E07A2E;   /* 1,5 + 2,0 */
  --bew-1:           #D9504A;   /* 0,5 + 1,0 */
  --bew-schrift:     #07080D;

  /* --- Typografie --------------------------------------------------------- */
  --f-display:  "Familjen Grotesk", system-ui, sans-serif;  /* 400/500/600/700 */
  --f-text:     "Instrument Sans", system-ui, sans-serif;   /* 400/500/600     */
  --f-mono:     "JetBrains Mono", ui-monospace, monospace;  /* 400/500/700     */

  --t-seitentitel:   clamp(26px, 3.4vw, 40px);
  --t-abschnitt:     22px;
  --t-kartentitel:   18px;
  --t-kartentitel-s: 15px;
  --t-text:          15px;
  --t-text-klein:    13px;
  --t-navigation:    14px;
  --t-label:         12px;
  --t-rubrik:        11px;

  --lh-text:         27px;
  --sperrung-rubrik: .5px;

  /* --- Radien ------------------------------------------------------------- */
  --r-badge:  6px;
  --r-cover:  8px;
  --r-feld:  10px;
  --r-karte: 12px;
  --r-sheet: 18px;
  --r-chip: 999px;

  /* --- Abstände (4er-Raster) ---------------------------------------------- */
  --a-1:  4px;   /* innerhalb einer Zeile        */
  --a-2:  8px;   /* Label zu Feld, Icon zu Text  */
  --a-3: 12px;   /* Kartenraster-Gap, Chipreihen */
  --a-4: 16px;   /* Kartenpolsterung             */
  --a-5: 20px;   /* Scroll-Reihen, Statistik     */
  --a-6: 32px;   /* Abschnitt zu Abschnitt       */
  --a-7: 48px;   /* große Blocktrennung          */

  /* --- Raster ------------------------------------------------------------- */
  --inhalt-max:      1440px;
  --seiten-polster:  clamp(20px, 4vw, 56px);
  --raster-min:      150px;   /* repeat(auto-fill, minmax(150px, 1fr)) */
  --cover-verhaeltnis: 2 / 3;
  --tippziel:        44px;

  /* --- Bewegung ----------------------------------------------------------- */
  --uebergang-farbe:   120ms ease-out;
  --uebergang-bewegung: 160ms ease-out;
}

/* Breakpoints (als Referenz — Media Queries können keine Variablen nutzen)
   mobil  < 768px
   Tablet 768–1023px
   Desktop ≥ 1024px    → ab hier volle Hauptnavigation, darunter Burger-Menü  */

/* ==========================================================================
   Grundlagen
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

/* app.js blendet Overlays ausschliesslich ueber das hidden-Attribut aus.
   Muss jede unbedingte display-Regel eines Bausteins schlagen koennen. */
[hidden] { display: none !important; }

html {
  background: var(--seite);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Die drei weichen Lichter aus der Design-Vorlage, darunter der senkrechte
     Verlauf. Vorher stand hier nur der Verlauf - die Flaeche wirkte flach. */
  background:
    radial-gradient(900px 520px at 78% -6%, rgba(22, 38, 63, .85), transparent 70%),
    radial-gradient(700px 480px at 4% 34%, rgba(11, 20, 38, .9), transparent 72%),
    radial-gradient(1100px 700px at 50% 112%, rgba(18, 32, 54, .75), transparent 70%),
    linear-gradient(180deg, #07080D 0%, #05060A 46%, #080A11 100%);
  background-attachment: fixed;
  color: var(--schrift);
  font-family: var(--f-text);
  font-size: var(--t-text);
  line-height: var(--lh-text);
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  margin: 0;
}
h1 { font-size: var(--t-seitentitel); letter-spacing: -.6px; }
h2 { font-size: var(--t-abschnitt);   letter-spacing: -.4px; }
h3 { font-size: var(--t-kartentitel); letter-spacing: -.3px; }

p { margin: 0 0 var(--a-3); max-width: 72ch; color: var(--schrift-2); }

a { color: var(--schrift); text-decoration: none; }
a:hover { color: var(--gold-hell); text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; display: block; }

.rubrik {
  font-family: var(--f-mono);
  font-size: var(--t-rubrik);
  font-weight: 400;
  letter-spacing: var(--sperrung-rubrik);
  text-transform: uppercase;
  color: var(--meta);
}

.zahl { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.inhalt {
  max-width: var(--inhalt-max);
  margin-inline: auto;
  padding-inline: var(--seiten-polster);
}

/* Nur für Screenreader */
.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Zustände — Variante 2a, verbindlich für alle Screens
   ========================================================================== */

.interaktiv {
  transition: background-color var(--uebergang-farbe),
              border-color     var(--uebergang-farbe),
              color            var(--uebergang-farbe);
}

/* Hover: Rahmen Gold, Fläche +6 %. Keine Bewegung, kein Schatten. */
@media (hover: hover) {
  .interaktiv:hover {
    border-color: var(--gold);
    background-image: linear-gradient(rgba(255, 195, 0, .06), rgba(255, 195, 0, .06));
  }
}

/* Fokus: ausschließlich Tastatur, ausschließlich Blau. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Aktiv/gedrückt */
.interaktiv:active {
  background: var(--gold-dunkel);
  transform: translateY(1px);
}

/* Ausgewählt: Gold dauerhaft, gleiche Sprache wie Hover */
.gewaehlt {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--rumpf-oben);
}

/* Deaktiviert */
[aria-disabled="true"],
:disabled,
.gesperrt {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Bausteine
   ========================================================================== */

/* --- Buttons: Höhe 44, Radius 999, Polsterung 0/20, Familjen Grotesk 600/14 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2);
  min-height: var(--tippziel); padding: 0 var(--a-5);
  border: 1px solid var(--rahmen); border-radius: var(--r-chip);
  background: transparent; color: var(--schrift);
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-navigation);
  cursor: pointer;
  transition: background-color var(--uebergang-farbe), border-color var(--uebergang-farbe);
}
.btn--primaer { background: var(--gold); border-color: var(--gold); color: var(--rumpf-oben); }
/* Farbe und Unterstreichung ausdruecklich setzen: das globale a:hover ist
   spezifischer als .btn--primaer und faerbte die Schrift sonst golden - auf
   goldener Flaeche verschwindet sie damit. */
.btn--primaer:hover { background: var(--gold-hell); color: var(--rumpf-oben); text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn--loeschen { border-color: var(--ungelesen); color: var(--ungelesen); }
.btn--loeschen:hover { background: var(--ungelesen); color: var(--schrift); }
.btn:active { background: var(--gold-dunkel); transform: translateY(1px); }

/* --- Chips & Filter: Höhe 34, Polsterung 0/14, 13px ---------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--a-2);
  height: 34px; padding: 0 14px;
  border: 1px solid var(--rahmen); border-radius: var(--r-chip);
  background: var(--karte-erhoeht); color: var(--schrift-2);
  font-size: var(--t-text-klein); cursor: pointer;
  transition: background-color var(--uebergang-farbe), border-color var(--uebergang-farbe);
}
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--rumpf-oben); }
.chip[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.chip svg { width: 14px; height: 14px; }

/* --- Karte ---------------------------------------------------------------- */
.karte {
  border: 1px solid var(--rahmen); border-radius: var(--r-karte);
  background: var(--karte); overflow: hidden;
}

/* --- Kartenraster --------------------------------------------------------- */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--raster-min), 1fr));
  gap: var(--a-3);
}

/* --- Cover ---------------------------------------------------------------- */
.cover {
  aspect-ratio: var(--cover-verhaeltnis);
  object-fit: cover;             /* Übersichten beschneiden auf 2:3           */
  width: 100%;
  height: auto;                  /* sonst gewinnt das height-Attribut des <img> gegen aspect-ratio */
  border-radius: var(--r-cover);
  background: var(--karte-erhoeht);
}
.cover--voll {                    /* Einzelseite: vollständig, kein Beschnitt */
  aspect-ratio: auto;
  object-fit: contain;
  height: 460px; width: auto;
  /* Nie hoeher als das Fenster: quer gehaltenes Telefon hat 402 px Hoehe,
     das Cover ging darueber hinaus und war nicht ganz zu sehen (Stephan,
     12.08.2026). Als Deckelung an der Basisregel statt in einer
     Medienabfrage - so kann sie an keiner Bedingung vorbeilaufen. */
  max-height: 70vh;
}
.cover--fehlt {
  display: grid; place-content: center;
  aspect-ratio: var(--cover-verhaeltnis);
  border: 1px dashed var(--rahmen); border-radius: var(--r-cover);
  background: var(--karte-erhoeht);
  color: var(--meta); font-size: var(--t-text-klein); text-align: center;
}

/* --- Statusabzeichen: rund, 22px, oben rechts ---------------------------- */
.abzeichen {
  position: absolute; top: var(--a-2); inset-inline-end: var(--a-2);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-content: center;
  color: var(--rumpf-oben);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.abzeichen--gelesen   { background: var(--gelesen); }
.abzeichen--ungelesen { background: var(--ungelesen); }
.abzeichen--rezension { background: var(--rezension); inset-inline-end: calc(var(--a-2) + 26px); }

/* --- Bewertungs-Badge ---------------------------------------------------- */
.bewertung {
  display: inline-grid; place-content: center;
  min-width: 34px; height: 22px; padding: 0 var(--a-2);
  border-radius: var(--r-badge);
  color: var(--bew-schrift);
  font-family: var(--f-mono); font-weight: 700; font-size: var(--t-label);
}
.bewertung--5 { background: color-mix(in srgb, var(--bew-5) 60%, transparent); }
.bewertung--4 { background: color-mix(in srgb, var(--bew-4) 60%, transparent); }
.bewertung--3 { background: color-mix(in srgb, var(--bew-3) 60%, transparent); }
.bewertung--2 { background: color-mix(in srgb, var(--bew-2) 60%, transparent); }
.bewertung--1 { background: color-mix(in srgb, var(--bew-1) 60%, transparent); }

/* --- Sterne: SVG im 24er-Raster ------------------------------------------ */
.sterne { display: inline-flex; gap: 3px; }
.sterne svg { width: 14px; height: 14px; }          /* Karten                */
.sterne--einzelseite svg { width: 20px; height: 20px; }
.sterne--eingabe svg     { width: 26px; height: 26px; }

/* --- Scroll-Reihen (Startseite) ------------------------------------------ */
[data-scrollrow] {
  display: flex; gap: var(--a-5);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Die Wischgeste bleibt in der Reihe. Ohne das reicht iOS sie an die Seite
     weiter, sobald die Reihe am Ende ist - die Startseite liess sich dann
     seitlich aus dem Bild schieben, obwohl rechts nichts steht. Sie ist die
     einzige Seite mit waagerechten Reihen, was zu der Beobachtung passte,
     dass die Unterseiten sich nicht schieben liessen (Stephan, 12.08.2026).
     contain und nicht none: senkrechtes Weiterreichen soll bleiben, sonst
     bliebe die Seite beim Wischen ueber einer Reihe stehen. */
  overscroll-behavior-x: contain;
  /* Und der Inhalt bleibt auch beim Malen drin. overflow-x: auto allein
     genuegte nicht: ragte eine Karte aus der Reihe - ab der vierten
     Rezension war das der Fall -, wuchs das ganze Dokument mit und der
     Browser zeigte einen waagerechten Rollbalken, obwohl rechts nichts
     steht (Stephan, 12.08.2026). Mit contain: paint ist der Ueberstand
     sofort weg; nachgemessen ueber window.scrollX. */
  contain: paint;
  /* Weiches Scrollen gehoert hierher, nicht ins JavaScript: so schaltet die
     prefers-reduced-motion-Regel weiter unten es zuverlaessig ab. */
  scroll-behavior: smooth;
}
[data-scrollrow]::-webkit-scrollbar { display: none; }
[data-scrollrow] > * { scroll-snap-align: start; flex: 0 0 auto; }
[data-scrollrow="cover"]     > * { width: clamp(150px, calc((100% - 5 * var(--a-5)) / 6), 200px); }
[data-scrollrow="rezension"] > * { width: calc((100% - 40px) / 3); min-width: 260px; }
/* Mobil eine Karte je Bildschirm. Die 260 px Mindestbreite passten nicht in
   eine 362 px breite Reihe; die Karten ragten hinaus und machten das ganze
   Dokument breiter als das Fenster - die Seite liess sich seitlich
   wegschieben, obwohl rechts nichts steht (Stephan, 12.08.2026). */
@media (max-width: 767px) {
  [data-scrollrow="rezension"] > * { width: 100%; min-width: 0; }
}

/* --- Ladekringel: reines CSS, 1s linear, erst nach 300ms ----------------- */
.kringel {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 195, 0, .18);
  border-top-color: var(--gold);
  animation: kringel 1s linear infinite, einblenden .01s linear 300ms both;
}
.kringel--button { width: 16px; height: 16px; border-width: 2px; animation-delay: 0s, 0s; }
@keyframes kringel   { to { transform: rotate(360deg); } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kringel { animation: none; opacity: 1; }
}

/* --- Inline-Rückmeldungen ------------------------------------------------ */
.meldung {
  border-radius: var(--r-feld);
  padding: var(--a-3) var(--a-4);
  font-size: var(--t-text-klein);
}
.meldung--fehler { background: color-mix(in srgb, var(--ungelesen) 10%, transparent); color: var(--ungelesen); }

/* --- Pagination: rechtsbündig, oben und unten identisch ------------------ */
.pagination {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; gap: var(--a-2);
}
.pagination a, .pagination span {
  min-width: 32px; height: 32px; border-radius: var(--r-cover);
  display: grid; place-content: center;
  font-family: var(--f-mono); font-size: var(--t-text-klein);
  border: 1px solid var(--rahmen);
}
.pagination [aria-current="page"] { background: var(--gold); border-color: var(--gold); color: var(--rumpf-oben); }

/* --- Mobiles Filter-Sheet ------------------------------------------------ */
.sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  max-height: 88vh; overflow: auto;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--karte); border-top: 1px solid var(--rahmen);
}
.sheet__fuss {
  position: sticky; bottom: 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--a-3);
  padding: var(--a-3) var(--a-4);
  background: var(--karte); border-top: 1px solid var(--rahmen-linie);
}

/* ==========================================================================
   Pflegebereich /cs-office/ — gleiche Regeln auf grauer Basis
   ========================================================================== */

body.office {
  background: var(--office-seite);
}
.office .karte  { background: var(--office-karte);  border-color: var(--office-rahmen); }
.office .chip   { background: var(--office-tile);   border-color: var(--office-rahmen); }
.office .panel  { background: var(--office-panel);  border: 1px solid var(--office-rahmen);
                  border-radius: var(--r-karte); padding: var(--a-4); }
.office .kringel { border-color: var(--office-tile); border-top-color: var(--gold); }

@media (hover: hover) {
  .office .interaktiv:hover { background: var(--office-tile); border-color: var(--gold); }
}

/* Felder: Höhe 42 (46 bei Überschriften-Feld), Radius 10 */
.office .feld {
  width: 100%; height: 42px; padding: 0 var(--a-3);
  border: 1px solid var(--office-rahmen); border-radius: var(--r-feld);
  background: var(--office-karte); color: var(--schrift);
  font-family: var(--f-text); font-size: var(--t-text-klein);
}
.office .feld--gross { height: 46px; font-size: var(--t-kartentitel-s); }
/* Nur schmucklose Labels. Sonst wuerde diese Regel wegen ihrer hoeheren
   Spezifitaet jede Komponentenklasse auf einem <label> ueberstimmen -
   .toggle-zeile, .uebernahme und .feld-block waeren dann wieder block. */
.office label:not([class]) { display: block; font-size: var(--t-label); color: var(--meta); margin-bottom: var(--a-2); }

/* Schalter 44x24, Knopf 18 */

/* Kästchen 18px, Radius 5 */
.kaestchen {
  width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--office-rahmen); background: var(--office-karte);
  appearance: none; cursor: pointer;
}
.kaestchen:checked { background: var(--gold); border-color: var(--gold); }