/* ═══════════════════════════════════════════════════════════════════
   HELLMODUS — die gedruckte Ausgabe
   ═══════════════════════════════════════════════════════════════════

   Der Dunkelentwurf ist der Kaninchenbau: leuchtende Tusche auf tiefem
   Grund. Die helle Fassung ist dasselbe Buch als Druck — warmes Papier,
   schwarze Tusche, eine zweite Druckplatte je Station.

   Grundlage: Entwurfsstudie A vom 13.08.2026, in der von Oliver
   freigegebenen Fassung. Bewusst NICHT uebernommen wurden Initiale,
   Linie unter dem Stationstitel, Kapitaelchen und Mediaevalziffern —
   diese Elemente gibt es im Dunkel-Original nicht.

   Wird ZULETZT geladen und greift nur unter [data-theme="light"].
   Der Dunkelentwurf bleibt unberuehrt.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --papier:       #FAF6EF;
  --papier-tief:  #F4EEE3;
  --tinte:        #1C1815;
  --tinte-text:   #423A32;
  --tinte-leise:  #655C53;
  --tinte-hauch:  rgba(28, 24, 21, 0.13);

  /* Zweite Druckplatte, je Station eine. */
  --platte:        #27476B;
  --platte-pik:    #27476B;
  --platte-karo:   #5B3A72;
  --platte-stahl:  #3B5468;
  --platte-kreuz:  #2C5C42;
  --platte-herz:   #7C4A28;
  --platte-coral:  #8A3340;

  /* Die Akzentfarben des Dunkelentwurfs, auf Papier lesbar gemacht.
     Rollen bleiben gleich: Kupfer warm, Koralle rot, Salbei gruen. */
  --druck-kupfer: #7C5230;
  --druck-koralle: #8F4450;
  --druck-salbei: #2C5C42;

  /* Satzbreite: begrenzt die Zeilenlaenge auf rund 68 Zeichen. Laengere
     Zeilen lassen das Auge beim Ruecksprung die Zeile verlieren. */
  --spalte: 68ch;
}

[data-theme="light"] .station-blue   { --platte: var(--platte-pik); }
[data-theme="light"] .station-purple { --platte: var(--platte-karo); }
[data-theme="light"] .station-steel  { --platte: var(--platte-stahl); }
[data-theme="light"] .station-green  { --platte: var(--platte-kreuz); }
[data-theme="light"] .station-copper { --platte: var(--platte-herz); }
[data-theme="light"] .station-coral  { --platte: var(--platte-coral); }

/* Die Papierstruktur (feines Rauschen ueber der Seite) ist auf Olivers
   Wunsch entfernt (13.08.). Das Papier traegt allein ueber den Farbton. */

/* ───────────────────────────────────────────────────────────────────
   Die Stiche als Buchtafeln

   Tenniel-Stiche sind schwarze Tusche auf weissem Grund. multiply
   loescht den weissen Grund gegen das Papier weg. Kein invert, kein
   brightness — beides erzeugte den grauen Kasten.
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .station-hero-img,
[data-theme="light"] .hero-illustration .alice-img,
[data-theme="light"] .alice-filter-blue,
[data-theme="light"] .alice-filter-purple,
[data-theme="light"] .alice-filter-steel,
[data-theme="light"] .alice-filter-green,
[data-theme="light"] .alice-filter-copper,
[data-theme="light"] .alice-filter-coral {
  mix-blend-mode: multiply;
  filter: contrast(1.04);
  -webkit-mask-image: none;
  mask-image: none;
}

[data-theme="light"] .card-blue,
[data-theme="light"] .card-purple,
[data-theme="light"] .card-steel,
[data-theme="light"] .card-green,
[data-theme="light"] .card-copper,
[data-theme="light"] .card-coral {
  background-color: var(--papier-tief);
  border-color: var(--tinte-hauch);
}

/* ───────────────────────────────────────────────────────────────────
   Satzbreite und Fliesstext
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .gap-intro p,
[data-theme="light"] .content-section p,
[data-theme="light"] .ai-intro-text,
[data-theme="light"] .gap-lead {
  max-width: var(--spalte);
  text-align: left;
  hyphens: auto;
}

/* ───────────────────────────────────────────────────────────────────
   Das Zitat als eigenes Satzbild

   Linie darueber in der Farbe der Station, haengende Anfuehrung, sodass
   das oeffnende Zeichen in den Rand ragt. Von Oliver ausdruecklich
   behalten; Uebertragung in den Dunkelmodus ist als naechster Schritt
   vorgemerkt.
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .accent-quote {
  color: var(--tinte);
  max-width: var(--spalte);
}

[data-theme="light"] .accent-quote::before {
  background: var(--platte);
}

/* ───────────────────────────────────────────────────────────────────
   Flaechen: Haarlinien und Weissraum statt Karten mit Schlagschatten
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .gap-chart-block {
  background: var(--papier-tief);
  border: 1px solid var(--tinte-hauch);
}

[data-theme="light"] .gap-insight-card,
[data-theme="light"] .benchmark-block,
[data-theme="light"] .bm-detail-card,
[data-theme="light"] .quiz-cta-block,
[data-theme="light"] .matrix-result {
  border-color: var(--tinte-hauch);
}

/* Das Punktraster ueber den Jahresbloecken ist entfernt (13.08.).
   Es gibt im Dunkel-Original keine Entsprechung. */

/* ───────────────────────────────────────────────────────────────────
   Inline-Farben aus der Dunkelzeit

   Diese Werte stehen als style-Attribut im HTML und sind nur so
   erreichbar. Die Legendenfelder muessen zu den Kurven passen; die
   Jahreszahlen behalten ihre Rollen aus dem Dunkelmodus (Koralle,
   Kupfer, Salbei) in der auf Papier lesbaren Fassung.
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .gap-legend-item:nth-child(1) .gap-legend-swatch {
  background: var(--platte) !important;
}
[data-theme="light"] .gap-legend-item:nth-child(3) .gap-legend-area {
  background-color: rgba(160, 85, 95, 0.3) !important;
}

[data-theme="light"] .gap-insight-card:nth-child(1) .gap-insight-year {
  color: var(--druck-koralle) !important;
}
[data-theme="light"] .gap-insight-card:nth-child(2) .gap-insight-year {
  color: var(--druck-kupfer) !important;
}
[data-theme="light"] .gap-insight-card:nth-child(3) .gap-insight-year {
  color: var(--druck-salbei) !important;
}

/* ───────────────────────────────────────────────────────────────────
   Die Espresso-Einladung

   Tasse, Dampf und Partikel stehen als Inline-SVG im HTML, alle Linien
   fest verdrahtet als rgba(225,185,145, 0.15 bis 0.5) — warmer Sand bei
   niedriger Deckung, gedacht zum Leuchten auf dunklem Grund. Auf Papier
   bleibt davon fast nichts. CSS schlaegt Praesentationsattribute, darum
   lassen sich die Striche hier neu setzen, ohne das HTML anzufassen.

   Die Abstufung bleibt erhalten: Tasse am kraeftigsten, Untertasse
   leiser, Dampf am leisesten.
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .gap-espresso-icon svg path {
  stroke: var(--druck-kupfer);
}
[data-theme="light"] .gap-espresso-icon svg path:nth-of-type(1),
[data-theme="light"] .gap-espresso-icon svg path:nth-of-type(2) {
  stroke-width: 2;
  stroke-opacity: 1;
}
[data-theme="light"] .gap-espresso-icon svg path:nth-of-type(3) {
  stroke-width: 2;
  stroke-opacity: 0.85;
}
[data-theme="light"] .gap-espresso-icon svg path:nth-of-type(4) {
  stroke-width: 1.4;
  stroke-opacity: 0.5;
}
/* Dampf */
[data-theme="light"] .gap-espresso-icon svg path:nth-of-type(n+5) {
  stroke-width: 1.2;
  stroke-opacity: 0.42;
}
/* Die Partikel darueber gehoeren zur zweiten Platte. */
[data-theme="light"] .gap-espresso-icon svg circle {
  fill: var(--platte);
  fill-opacity: 0.75;
}
[data-theme="light"] .gap-espresso-icon svg line {
  stroke: var(--platte);
  stroke-opacity: 0.4;
  stroke-width: 0.7;
}
/* Der Lichtschein hinter der Tasse ist ein Leucht-Effekt fuer dunklen
   Grund. Auf Papier wuerde daraus eine sichtbare Scheibe — er entfaellt. */
[data-theme="light"] .gap-espresso-icon svg circle:first-of-type {
  fill: transparent;
}

[data-theme="light"] .gap-espresso-cta {
  border-color: var(--tinte-hauch);
}

[data-theme="light"] .gap-espresso-btn {
  border: 1px solid var(--druck-kupfer);
  color: var(--druck-kupfer);
  background: transparent;
}

/* ───────────────────────────────────────────────────────────────────
   Die Spielkarte neben der Kundenstimme

   Rautenmuster und Kante stammen aus rgba(170,125,85, 0.1). Auf Papier
   verschwindet beides, uebrig bleibt ein leerer Kasten mit einem
   Fragezeichen. Muster und Kante bekommen hier die Deckung, die sie im
   Dunkelmodus optisch haben.
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .teaser-card-area {
  background: transparent;
}

[data-theme="light"] .teaser-card-back {
  background: var(--papier-tief);
  border: 1px solid rgba(124, 82, 48, 0.45);
}

[data-theme="light"] .teaser-card-back::before {
  opacity: 0.9;
}

[data-theme="light"] .teaser-card-back::after {
  border: 1px solid rgba(124, 82, 48, 0.35);
}

[data-theme="light"] .teaser-card-symbol {
  color: var(--druck-kupfer);
  opacity: 0.9;
}

[data-theme="light"] .testimonial-teaser {
  border-color: var(--tinte-hauch);
}

[data-theme="light"] .teaser-cta {
  color: var(--druck-kupfer);
  opacity: 1;
}

/* ───────────────────────────────────────────────────────────────────
   Navigation deckend, damit die Tusche nicht durchschlaegt
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .main-nav {
  background: rgba(250, 246, 239, 0.96);
  isolation: isolate;
  border-bottom: 1px solid var(--tinte-hauch);
}

/* ───────────────────────────────────────────────────────────────────
   Restliche Akzente, die als Text auf Papier zu hell blieben
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .benchmark-title .em,
[data-theme="light"] .bm-title .em,
[data-theme="light"] .benchmark-closer .em {
  color: var(--druck-kupfer);
}

[data-theme="light"] .bm-trigger,
[data-theme="light"] .bm-trigger span,
[data-theme="light"] .bm-expand-trigger,
[data-theme="light"] .bm-expand-trigger span,
[data-theme="light"] .station-overline,
[data-theme="light"] .ai-intro-overline {
  color: var(--druck-kupfer);
}

[data-theme="light"] .zone-label {
  color: var(--tinte);
}

[data-theme="light"] .imp-tag,
[data-theme="light"] .dual-function-label,
[data-theme="light"] .card-quote,
[data-theme="light"] .card-station {
  color: var(--platte);
  opacity: 1;
}

[data-theme="light"] .rabbit-quote {
  opacity: 1;
  color: var(--tinte-leise);
}

[data-theme="light"] .dialog-speaker.speaker-cat {
  opacity: 1;
  color: var(--platte-karo);
}

/* ───────────────────────────────────────────────────────────────────
   Schmale Fenster
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  [data-theme="light"] .accent-quote {
    font-size: 23px;
    line-height: 34px;
  }
  [data-theme="light"] .gap-chart-block {
    padding: 20px 16px 16px;
  }
}

/* Die Zeile ueber der Mailadresse lag bei 4.12:1, knapp unter der
   Lesbarkeitsschwelle. */
[data-theme="light"] .gap-espresso-email {
  color: var(--tinte-leise);
}

/* ───────────────────────────────────────────────────────────────────
   Akzent-Tokens als Text auf Papier

   Die Marken-Akzente sind fuer dunklen Grund gemischt. Wo sie
   ausschliesslich als Text auftreten, bekommen sie hier direkt einen
   Papierwert. Wo sie AUCH Flaechen und Kanten faerben, bleibt das
   Token unangetastet und nur die Textstelle wird umgesetzt — sonst
   wuerden getoente Fuellungen zu massiven Bloecken.
   ─────────────────────────────────────────────────────────────────── */

/* Nur als Text im Einsatz (9 Stellen) — direkt umsetzbar. */
[data-theme="light"] {
  --warm-highlight: #8B5E33;
}

/* Auch als Flaeche im Einsatz — darum gezielt je Textstelle. */
[data-theme="light"] .tt-hl-blue,
[data-theme="light"] .tt-card-label--1,
[data-theme="light"] .ai-first-label,
[data-theme="light"] #praxis .hint-open,
[data-theme="light"] .testimonial-hint .hint-open {
  color: var(--platte-stahl);
}

[data-theme="light"] .tt-card-label--2,
[data-theme="light"] #praxis .testimonial-headline,
[data-theme="light"] .matrix-result-badge {
  color: var(--druck-kupfer);
}

[data-theme="light"] .kicker {
  color: var(--druck-koralle);
}

/* ───────────────────────────────────────────────────────────────────
   Die Business-Impact-Matrix

   Die vier Zonen sind mit 6 Prozent Deckung getoent — genug, um sich
   auf dunklem Grund abzuheben, zu wenig auf Papier. Die Farbrollen
   bleiben: Forschungsfeld kupfer, Champion gruen, Quick Win blau,
   Spaeter bewerten stahl. Die gestapelte Deckkraft von 0.72 faellt
   weg, sie hat die Toenung zusaetzlich verduennt.
   ─────────────────────────────────────────────────────────────────── */
[data-theme="light"] .zone { opacity: 1; }

[data-theme="light"] .zone--research  { background: rgba(170, 125, 85, 0.16); }
[data-theme="light"] .zone--champion  { background: rgba(110, 180, 140, 0.20); }
[data-theme="light"] .zone--quickwin  { background: rgba(59, 130, 246, 0.13); }
[data-theme="light"] .zone--reassess  { background: rgba(55, 75, 100, 0.11); }

[data-theme="light"] .zone--research.active  { background: rgba(170, 125, 85, 0.30); border-color: rgba(170, 125, 85, 0.5); }
[data-theme="light"] .zone--champion.active  { background: rgba(110, 180, 140, 0.34); border-color: rgba(110, 180, 140, 0.5); }
[data-theme="light"] .zone--quickwin.active  { background: rgba(59, 130, 246, 0.24); border-color: rgba(59, 130, 246, 0.5); }
[data-theme="light"] .zone--reassess.active  { background: rgba(55, 75, 100, 0.22); border-color: rgba(55, 75, 100, 0.5); }


/* Diese beiden Tokens faerben ueberwiegend Text und nur an ein, zwei
   Stellen eine schmale Flaeche. Auf Papier gelten sie in Druckfarbe;
   die Flaechen werden dadurch ebenfalls satter, was dort richtig ist. */
[data-theme="light"] {
  --warm-copper: #7C5230;
}

/* --db-coral ist auf .station-coral gesetzt, nicht auf :root. Ein Wert
   am Wurzelelement wuerde davon ueberschrieben — die Neudefinition
   gehoert deshalb auf denselben Gueltigkeitsbereich. */
[data-theme="light"] .station.station-coral {
  --db-coral: #A8412C;
}

/* Die Tags stehen auf ihrer eigenen getoenten Flaeche, dadurch sinkt
   der Kontrast gegenueber blankem Papier um rund einen halben Punkt. */
[data-theme="light"] .db-tag-blue  { color: #0B4FBF; }
[data-theme="light"] .db-tag-steel { color: #3A5F85; }

/* Das Abzeichen steht auf getoentem Grund; die Toenung wird auf Papier
   heller gehalten, damit die Schrift traegt. */
[data-theme="light"] .matrix-result-badge {
  background: rgba(170, 125, 85, 0.10);
  border-color: var(--tinte-hauch);
}