/* ============================================================
   cagatay.io · System-Bau · Gate 1 · Token-Fundament
   Wahrheit: PHASE2-AUFTRAG.md §1 FIXWERTE. Fixwerte sind unverändert
   übernommen; jeder ABGELEITETE Wert trägt seine Herleitung als Kommentar.
   Night-Shift-Regel (§1.1): jede Paarung hält Hierarchie auch ohne
   Blau-Kanal — Kontraste laufen primär über Lightness, nie über Hue allein.
   ============================================================ */

@import url("fonts.css");

:root {

  /* ---- 1 · Bühne (FIX §1.1 + EIN-DUNKEL-RULING, Chuck final 2026-06-12) --
     Es gibt genau EIN Dunkel im System: --tinte (#10161E) — für ALLES auf
     hellem Grund, Typografie eingeschlossen (Text, Figuren, Logo, Blasen,
     Szenen-Objekte, Marker, Linien). Auf der Tinte trägt alles Helle
     --grund. #15171A ist ersatzlos ENTFALLEN; --ink steht nur noch als
     Alias auf --tinte (Alt-Aufrufe) — neue Aufrufe nutzen --tinte direkt.
     Kein Schwarz, nirgends.
     EIN-HELL (Chuck final 2026-06-13, Korrektur A4): Spiegel zu EIN-DUNKEL —
     einziges Hell = --grund #EFF0EC. #E9EDF2 ist ersatzlos ENTFALLEN; --tinte-ink
     steht nur noch als Alias auf --grund. ALLES Helle auf der Tinte (Text,
     Statement, Figuren-Inversion, Logo-auf-Tinte) trägt --grund. */
  --grund:      #EFF0EC;   /* das EINE Hell: Grund UND Ink auf Tinte */
  --tinte:      #10161E;   /* das EINE Dunkel: Tintenwand UND Ink auf Hell */
  --tinte-ink:  var(--grund); /* ALIAS (EIN-HELL-RULING) — nicht neu verwenden */
  --ink:        var(--tinte); /* ALIAS (EIN-DUNKEL-RULING) — nicht neu verwenden */
  /* EIN Muted pro Material (TOKEN-DIFF.md, Chuck B=70%, 2026-06-13):
     KEINE neue Graustufe — das EINE Muted war zu hell und wird UMDEFINIERT,
     nicht ergänzt. Neutral auf der Tinte↔Grund-Achse (systemtreuer als der
     alte grünliche M2-Ton #8F938F). Wirkt automatisch in allen 18 Karten,
     da sie nur `--ink-soft`/`--tinte-soft` lesen, nie den rohen Hex. */
  --ink-soft:   color-mix(in srgb, var(--tinte) 70%, var(--grund));  /* Muted auf Hell — lesbar (~5.3:1) */
  --tinte-soft: color-mix(in srgb, var(--grund) 73%, var(--tinte));  /* Muted auf Tinte — lesbar */

  /* Abgeleitete Ink-Stufen (Inventar §A.6 verlangt Skala voll/soft/faint).
     Herleitung: faint = Mischpunkt ink-soft→Trägerfläche (~55 % Richtung
     Fläche) — eine Stufe leiser als soft, noch lesbar als Form, nie als Text.
     Linie = 14 % Ink über Fläche (Wert aus der abgenommenen Bewegungs-
     Referenz übernommen, dort die Meta-Trennlinie). */
  --ink-faint:   #BBBDB9;
  --tinte-faint: #3A434E;
  --linie:       color-mix(in srgb, var(--tinte) 14%, transparent);
  --tinte-linie: color-mix(in srgb, var(--tinte-ink) 16%, transparent);

  /* Weiche Zonen (Struktur-Regel: keine Boxen/Karten — Flächen entstehen
     als Tönung der Trägerfläche, nie als Rahmen).
     Herleitung: 5 % Ink-Beimischung = gerade sichtbare Verdichtung des
     Grunds; selected verdoppelt die Dichte statt eine Kante zu ziehen. */
  --zone:          color-mix(in srgb, var(--tinte) 5%, var(--grund));
  --zone-selected: color-mix(in srgb, var(--tinte) 10%, var(--grund));
  --zone-tinte:    color-mix(in srgb, var(--tinte-ink) 6%, var(--tinte));

  /* ---- 2 · Akzent (FIX §1.2: Basis wörtlich; Skala = Lieferauftrag) ----- */
  /* Abstufungs-/Nachklang-Skala im OKLCH-Raum.
     Herleitung: Nachklang = Chroma halbiert sich pro Echo-Stufe, Lightness
     wandert Richtung Trägerfläche — der Akzent VERKLINGT in die Bühne,
     statt eine zweite Farbe zu werden. Auf Tinte steigt L (0.66), damit
     der Moment auf #10161E dieselbe Lautstärke hat wie 0.55 auf Grund.
     Night-Shift: Identität des Moments hängt an L-Sprung + Form (Ring,
     Feder-Puls), nicht am Blau-Kanal. */
  --akzent:        oklch(0.55 0.23 250);   /* FIX · Entscheidungs-/Signature-Momente */
  --akzent-tief:   oklch(0.46 0.21 250);   /* gedrückt / aktiver Grip */
  --akzent-hell:   oklch(0.66 0.19 250);   /* der Moment auf Tinte */
  --akzent-echo-1: oklch(0.57 0.115 250);  /* Nachklang stark (Artefakt rastet ein) */
  --akzent-echo-2: oklch(0.68 0.06 250);   /* Nachklang leise (Spur im Verlauf) */
  --akzent-spur:   oklch(0.84 0.03 250);   /* Ausklang auf Grund (fast Fläche) */
  --akzent-echo-1-tinte: oklch(0.50 0.115 250);
  --akzent-spur-tinte:   oklch(0.28 0.05 250);

  /* Gedämpfte Spiel-Zustandsfarben (Inventar §K.2: Marken-Akzent ≠
     Spiel-Rollenfarben; mehrere Figuren gleichzeitig farbcodiert).
     Herleitung: eine Chroma (0.06) und eine Lightness (0.56) für alle
     → harmonisch und klar leiser als der Akzent (C 0.23); Hues meiden das
     Schutzband 210–290 um den Akzent. Form trägt Identität: jede Figur
     bleibt in jeder dieser Flächenfarben dieselbe Silhouette (FIX §1.3).
     Auf Tinte: L +0.16 bei gleicher Chroma (Lesbarkeits-Parität). */
  --zustand-a: oklch(0.56 0.06 30);    /* Ton  (warm) */
  --zustand-b: oklch(0.56 0.06 110);   /* Oliv */
  --zustand-c: oklch(0.56 0.06 165);   /* Grün */
  --zustand-d: oklch(0.56 0.06 300);   /* Veilchen */
  --zustand-e: oklch(0.56 0.06 350);   /* Malve */
  --zustand-a-tinte: oklch(0.72 0.06 30);
  --zustand-b-tinte: oklch(0.72 0.06 110);
  --zustand-c-tinte: oklch(0.72 0.06 165);
  --zustand-d-tinte: oklch(0.72 0.06 300);
  --zustand-e-tinte: oklch(0.72 0.06 350);

  /* Verlust-/Warn-Schraffur (B2.4): kein eigener Rotwert — Schraffur ist
     FORM (45°-Streifen aus Ink), damit die Warnung Night-Shift-fest ist. */
  --schraffur: repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--tinte) 22%, transparent) 0 3px,
      transparent 3px 9px); /* @kind other */

  /* ---- 3 · Typografie (FIX §1.4) --------------------------------------- */
  --schrift: "Mona Sans", "Helvetica Neue", sans-serif; /* @kind font */

  /* Display: 108 % Breite (FIX), Zeilenhöhe ≤ 1.0 → 0.98 gewählt: tiefster
     Wert, bei dem Ç-Cedille und ğ-Breve in zwei Zeilen nicht kollidieren
     (Probe in der Typo-Karte mit „Çağatay Ünlü“). Statements 8–15× Body:
     122 / 14 ≈ 8.7× am Desktop. */
  --display-stretch: 108%; /* @kind font */
  --display-gewicht: 640; /* @kind font */
  --t-statement: clamp(54px, 8.5vw, 122px); /* @kind font */
  --t-statement-lh: 0.98; /* @kind font */
  --t-statement-ls: -0.015em; /* @kind font */

  /* Claim (Hero-Absatz): eigene Rolle unterhalb der Statement-Schwelle —
     mehrzeiliger Lauftext im Display-Schnitt braucht Luft, die lh-≤1.0-
     Regel gilt für Statements (Einzeiler-Maßstab), nicht für den Claim. */
  --t-claim: clamp(23px, 2.6vw, 37px); /* @kind font */
  --t-claim-lh: 1.2; /* @kind font */
  --t-claim-gewicht: 520; /* @kind font */

  /* Frage-/Titel-Ebene (In-Game-Frage, Sektions-Zwischenebene) */
  --t-frage: clamp(20px, 1.8vw, 26px); /* @kind font */

  /* Body: klein und ruhig (FIX). 14 px / 1.55 — Wert aus der abgenommenen
     Referenz-Familie (13.5–14), auf 14 gerundet für 390-Lesbarkeit. */
  --t-body: 14px; /* @kind font */
  --t-body-lh: 1.55; /* @kind font */
  --t-body-s: 12.5px; /* @kind font */

  /* Zweitstimme (ENTSCHIEDEN Z1: Mona Sans, weite Laufweite, Versalien) */
  --zweit-stretch: 100%; /* @kind font */
  --zweit-ls: 0.06em; /* @kind font */
  --zweit-gewicht: 480; /* @kind font */
  --t-zweit: 11px; /* @kind font */
  --t-zweit-l: 12.5px; /* @kind font */

  /* In-Game-Feedback: am Geschehen, eine Spur über Body-Small, nie Fußnote */
  --t-feedback: 13.5px; /* @kind font */

  /* ---- 4 · Spacing (H6: 4er-Basis, geometrisch verdichtet) -------------- */
  /* Herleitung: 4-px-Basisraster; Stufen ~×1.5 — grob genug, dass jede
     Wahl eindeutig ist (keine Zwischenwerte zu raten). */
  --s-0: 4px;  --s-1: 8px;  --s-2: 12px; --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

  /* Rhythmus-Anker (Sektion / Block / Zeile), fluid zwischen 390 und 1440 */
  --rand-x:    clamp(20px, 4.5vw, 64px); /* @kind spacing */
  --sektion-y: clamp(56px, 9vw, 128px); /* @kind spacing */
  --block-y:   clamp(24px, 3vw, 42px); /* @kind spacing */
  --zeile-y:   var(--s-2);

  /* ---- 5 · Radius ------------------------------------------------------- */
  /* Weiche Zonen: Radius groß genug, dass keine Box-Ecke entsteht;
     Blase klein gehalten (Mikro-Text-Form, B2.2); Chip = Pille. */
  --r-zone: 22px;
  --r-blase: 12px;
  --r-chip: 999px;
  --r-karte: 16px;

  /* ---- 6 · Motion (FIX §1.7, Werte wörtlich bzw. Klassen belegt) -------- */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --feder: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-mikro-s: 120ms; /* @kind other */ /* Konsequenz am Objekt, hart */
  --dur-mikro:   240ms; /* @kind other */ /* Klasse mikro < 300ms (FIX) */
  --dur-mittel:  600ms; /* @kind other */ /* Übergänge, Einblendungen */
  --dur-moment: 1200ms; /* @kind other */ /* großer Moment, Deckel ~1.3s (FIX) */
  --stagger: 35ms;      /* @kind other */ /* Beleg: Zonen-Strömen g1 (Zensus) */
  --hitstop: 70ms;      /* @kind other */ /* Beleg: Hit-Stop 60–80ms (Zensus) */
  --idle-hub: 4px;      /* @kind other */ /* Idle-Amplitude Bob (Bewegungs-Referenz) */
  --idle-takt: 9s;      /* @kind other */ /* menschlich-ruhig */

  /* ---- 7 · Z-Ebenen ------------------------------------------------------ */
  /* Beat-/Header-Texte kollidieren nie mit Szenen (Struktur-Regel):
     eigene Ebene über Blasen, unter Chrome. */
  --z-szene: 0;      /* @kind other */
  --z-figur: 10;     /* @kind other */
  --z-blase: 20;     /* @kind other */
  --z-beat: 30;      /* @kind other */
  --z-chrome: 40;    /* @kind other */
  --z-schicht: 60;   /* @kind other */ /* Sheets/Overlays */
  --z-werkzeug: 90;  /* @kind other */ /* Annotate/Tweaks */

  /* ---- 8 · Kontext-Aliase (Material-Logik Hell/Tinte) ------------------- */
  --k-flaeche: var(--grund);
  --k-ink:     var(--tinte);
  --k-soft:    var(--ink-soft);
  --k-faint:   var(--ink-faint);
  --k-linie:   var(--linie);
  --k-zone:    var(--zone);
  --k-akzent:  var(--akzent);
  --k-echo:    var(--akzent-echo-1);
  --k-spur:    var(--akzent-spur);
}

/* Tintenwand-Kontext: EIN Klassenwechsel invertiert das Material —
   dieselbe Regel wie die Figuren-Inversion (FIX §1.3), nur für Flächen. */
.auf-tinte {
  --k-flaeche: var(--tinte);
  --k-ink:     var(--tinte-ink);
  --k-soft:    var(--tinte-soft);
  --k-faint:   var(--tinte-faint);
  --k-linie:   var(--tinte-linie);
  --k-zone:    var(--zone-tinte);
  --k-akzent:  var(--akzent-hell);
  --k-echo:    var(--akzent-echo-1-tinte);
  --k-spur:    var(--akzent-spur-tinte);
  background: var(--k-flaeche);
  color: var(--k-ink);
}

/* ============================================================
   Rollen-Klassen (semantische Schicht, maschinenlesbarer Teil;
   Zuordnungs-Regeln: SEMANTIK-REGELN.md)
   ============================================================ */

body {
  margin: 0;
  background: var(--k-flaeche, var(--grund));
  color: var(--k-ink, var(--tinte));
  font-family: var(--schrift);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

/* — Display/Statement (heroischer Maßstab) — */
.t-statement {
  font-size: var(--t-statement);
  line-height: var(--t-statement-lh);
  letter-spacing: var(--t-statement-ls);
  font-weight: var(--display-gewicht);
  font-stretch: var(--display-stretch);
  /* Diakritika-Reserve: lh 0.98 + Überhang sichtbar lassen */
  padding-block: 0.06em;
  overflow: visible;
  text-wrap: balance;
  margin: 0;
}

.t-claim {
  font-size: var(--t-claim);
  line-height: var(--t-claim-lh);
  letter-spacing: -0.01em;
  font-weight: var(--t-claim-gewicht);
  font-stretch: var(--display-stretch);
  text-wrap: pretty;
  margin: 0;
}

.t-frage {
  font-size: var(--t-frage);
  line-height: 1.15;
  font-weight: 600;
  font-stretch: var(--display-stretch);
  margin: 0;
}

/* — Body — */
.t-body   { font-size: var(--t-body);   line-height: var(--t-body-lh); margin: 0; text-wrap: pretty; }
.t-body-s { font-size: var(--t-body-s); line-height: 1.5; margin: 0; }
.t-soft   { color: var(--k-soft, var(--ink-soft)); }

/* — Zweitstimme (Z1) — */
.t-zweit, .t-zweit-l {
  font-stretch: var(--zweit-stretch);
  letter-spacing: var(--zweit-ls);
  font-weight: var(--zweit-gewicht);
  text-transform: uppercase;
  font-size: var(--t-zweit);
  line-height: 1.4;
  margin: 0;
}
.t-zweit-l { font-size: var(--t-zweit-l); text-transform: none; }

/* — Zahlen/Preise: immer tabellarisch (FIX §1.4; Prüfung: Typo-Karte) — */
.t-zahl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* — In-Game-Text-Slots (B2.10) — */
.t-feedback   { font-size: var(--t-feedback); line-height: 1.45; margin: 0; }
.t-erkenntnis { font-size: var(--t-feedback); line-height: 1.45; font-weight: 600; margin: 0; }
.t-hook       { font-size: var(--t-feedback); line-height: 1.45; color: var(--k-soft, var(--ink-soft)); margin: 0; }

/* — Stations-Kopf (Vierklang statisch, §B) — */
.mini-zeile, .steps-zeile { display: block; }
.kicker { color: var(--k-soft, var(--ink-soft)); }

/* — Weiche Zone (B2.4) — */
.zone {
  background: var(--k-zone, var(--zone));
  border-radius: var(--r-zone);
}
.zone.selected { background: var(--zone-selected); }
.zone.dim      { opacity: 0.55; }

/* — Sprechblase (B2.2: Mikro-Text-Form, mit Schwanz) — */
.blase {
  position: relative;
  display: inline-block;
  background: var(--k-ink, var(--tinte));
  color: var(--k-flaeche, var(--grund));
  font-size: var(--t-body-s);
  line-height: 1.35;
  font-weight: 510;            /* R4·3b: Mikro-Text klar lesbar, nicht zu dünn */
  padding: 6px 10px;
  border-radius: var(--r-blase);
  max-width: 200px;
  z-index: var(--z-blase);
}
.blase::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -5px;
  width: 10px; height: 10px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 30% 100%);
}
/* Spiegel-Schwanz: Blase sitzt links vom Kopf, Schwanz zeigt nach rechts-unten
   (Anker-Helfer DS.setzeBlase/figurBlase, Korrektur A4). */
.blase--links::after {
  left: auto;
  right: 14px;
  clip-path: polygon(0 0, 100% 0, 70% 100%);
}

/* — Chip/Filter (A.8) · aktiver Filter = Akzent-Kontur + Tick (B3) — */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;          /* tappbar muss tragen (Struktur-Regel) */
  padding: 0 18px;
  border-radius: var(--r-chip);
  font-size: var(--t-body-s);
  background: transparent;
  color: var(--k-ink, var(--tinte));
  box-shadow: inset 0 0 0 1px var(--k-linie, var(--linie));
  cursor: pointer;
  user-select: none;
}
/* Aktiver Filter (B3, gelockt): Akzent-Kontur statt Tinte-Füllung + voran-
   gestellter Akzent-Tick. „Aktive Auswahl" ist der sanktionierte Zweit-Einsatz
   des Akzents (Kontur = leiser als Füllung, kollidiert nie mit einer Akzent-
   Aktions-Pille). Die alte Tinte-Füllung gilt nur noch für nicht-Filter-Toggles
   (`.chip.gewaehlt`). */
.chip.aktiv {
  background: transparent;
  color: var(--k-ink, var(--tinte));
  box-shadow: inset 0 0 0 1.5px var(--k-akzent, var(--akzent));
  font-weight: 560;
}
.chip.aktiv::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--k-akzent, var(--akzent));
  flex: 0 0 auto;
}
/* Nicht-Filter-Toggle (binär an/aus, kein Auswahl-Akzent): Tinte-Füllung. */
.chip.gewaehlt {
  background: var(--k-ink, var(--tinte));
  color: var(--k-flaeche, var(--grund));
  box-shadow: none;
}

/* — Primär-Aktion / CTA (B3): Akzent-Füllung + Grund-Text, KEIN Schwanz —
   klar getrennt von der Sprechblase (Stimme = Tinte-Füllung + Schwanz). */
.aktion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--r-chip);
  background: var(--k-akzent, var(--akzent));
  color: var(--grund);
  font-size: var(--t-body);
  font-weight: 560;
  border: 0;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.aktion:active { background: var(--akzent-tief); }
.aktion[disabled] { opacity: .4; cursor: not-allowed; }

/* — Sichtbarer Focus-State (A11y F5): gilt für alle tappbaren/fokussierbaren
   Affordances. Akzent-Ring mit Offset, nie von Sticky/Modal verdeckt; Touch
   und Keyboard gleichwertig. focus-visible, damit Maus-Tap keinen Ring zeigt. */
.chip:focus-visible, .aktion:focus-visible, .affordance:focus-visible,
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, .zeile:focus-visible {
  outline: 2px solid var(--k-akzent, var(--akzent));
  outline-offset: 2px;
  border-radius: 4px;
}

/* — Affordance-Zeile (Play this step.) — */
.affordance {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--t-body);
  font-weight: 560;
  cursor: pointer;
}
.affordance .pfeil { color: var(--k-soft, var(--ink-soft)); }

/* — Hairline — */
.linie-h { border: 0; border-top: 1px solid var(--k-linie, var(--linie)); margin: 0; }

/* ============================================================
   Motion-Grundklassen (Werte; Choreografie = Bau-Phase)
   Basis-Regel: Endzustand ist der Grundzustand, animiert wird VON
   verborgen — Print/Reduced sehen immer den fertigen Inhalt.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .anim-eintritt {
    animation: ds-eintritt var(--dur-mittel) var(--ease) both;
  }
  .anim-moment {
    animation: ds-moment var(--dur-moment) var(--feder) both;
  }
  @keyframes ds-eintritt {
    from { opacity: 0; transform: translateY(12px); }
  }
  @keyframes ds-moment {
    0%   { transform: scale(0.92); }
    100% { transform: scale(1); }
  }

  /* Figuren-Idle (Nachtrag-Ruling 2026-06-13): stehende Figuren tragen ein dezentes,
     menschlich-ruhiges Wippen (--idle-hub über --idle-takt). figur.js stempelt die
     Klasse .ds-idle auf das <svg>-Element (HTML-Ebene, KEIN transform-Attribut) und
     staffelt die animation-delay pro Figur — die Killer-Regel (keine CSS-Transform-
     Anim auf SVG-GRUPPEN mit transform-Attribut) bleibt gewahrt. Unter
     prefers-reduced-motion entfällt die Regel ganz: Arme bleiben, Bewegung nicht. */
  .ds-idle {
    display: inline-block;
    transform-origin: center bottom;
    animation: ds-idle var(--idle-takt) var(--ease) infinite;
  }
  @keyframes ds-idle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-1 * var(--idle-hub))); }
  }
}