/* =========================================================================
   Familien der Götter · Heller Modus („Spielschachtel – Tagesausgabe“)
   Aktiv mit <html data-thema="hell"> (Einstellungen oben rechts).
   Idee: dasselbe Brettspiel bei Tageslicht – warmer Papierkarton statt
   Nachtblau, dunkle Tinte als Schrift, die harten Kanten und Schlagschatten
   bleiben. Illustrationen bleiben unverändert: Baum-Hintergründe, Bühnen-
   bilder der Sagen und der Welt, Kraft-Bühne, Kacheln und Weltkarte
   sind „dunkle Inseln“ – darin gelten die Farben der Nachtausgabe weiter.
   Aufbau: 1 Farben · 2 dunkle Inseln · 3 automatisch erzeugte Anpassungen
   (Titeltext in --creme, Akzent als Schrift) · 4 Handarbeit je Baustein.
   Lädt als letzte Datei. Zurücknehmen: Zeile in der Vorlage entfernen.
   ========================================================================= */

/* ---------- 1 · Farben ---------- */
:root{ --x-titel:var(--creme); --x-akzent-ton:var(--akzent); }
html[data-thema="hell"]{
  --tinte:#F3ECDC; --tinte-2:#FFFAEF; --tinte-3:#E8DEC8; --tinte-4:#C9BB9C;
  --papier:#1B1740; --papier-2:#5A5379;
  --kante:#1B1740; --deckel:#FBF5E8; --creme:#FFFCF5; --stein-text:#1B1740;
  --linie:#2A2650;
  --punkte:radial-gradient(rgba(27,23,64,.075) 1.1px,transparent 1.6px) 0 0/14px 14px;
  --x-titel:#1B1740;
  --x-akzent-ton:color-mix(in oklab,var(--akzent) 52%,#140F2E);
  color-scheme:light;
}
html[data-thema="hell"] body{ --x-akzent-ton:color-mix(in oklab,var(--akzent) 52%,#140F2E); }

/* ---------- 2 · Dunkle Inseln: Illustrationen und alles, was direkt darauf liegt ---------- */
html[data-thema="hell"] :is(.welt-karte,.buehne-baum,.stage,.paar,.sage-theater,.wb-theater,.quer-welt,.quer-anim,.vorhang){
  --tinte:#17143B; --tinte-2:#27225A; --tinte-3:#332D6B; --tinte-4:#463E88;
  --papier:#F6EEDC; --papier-2:#B9B1DC; --kante:#0A0820; --deckel:#0C0A26;
  --creme:#F6EEDC; --stein-text:#17143B; --linie:#EDE9FF;
  --punkte:radial-gradient(rgba(255,255,255,.055) 1.1px,transparent 1.6px) 0 0/14px 14px;
  --x-titel:var(--creme); --x-akzent-ton:var(--akzent);
  color-scheme:dark;
}

/* ---------- 3 · Automatisch erzeugt (Titeltext in --creme, Akzent als Schrift) ---------- */
/* aus goetter.css */
:where(html[data-thema="hell"]) .knoten.ist-gewaehlt .etikett-bg{fill:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .verbindung.paar{stroke:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .verbindung.ehe{stroke:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .knotenpunkt{fill:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .rechner__satz em{color:var(--x-akzent-ton)}

/* aus goetter-sagen.css */
:where(html[data-thema="hell"]) .sage-weltknopf svg{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .sage-k--auto[aria-pressed="true"]{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .sage-titelkarte span{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .sw-eintrag__los{color:var(--x-akzent-ton)}

/* aus goetter-suche.css */
:where(html[data-thema="hell"]) .such-feld>svg{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .such-kopf{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .such-pfeil{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .such-chip:hover{color:var(--x-akzent-ton)}

/* aus goetter-schachtel.css */
:where(html[data-thema="hell"]) .sw-teil__kopf svg{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .sw-eintrag__ikon{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .auswahl__titel{color:var(--x-titel)}
:where(html[data-thema="hell"]) .auswahl__titel em{color:var(--x-titel)}
:where(html[data-thema="hell"]) .stage__name{color:var(--x-titel)}
:where(html[data-thema="hell"]) .rechner__titel{color:var(--x-titel)}

/* aus goetter-mehr.css */
:where(html[data-thema="hell"]) .mehr__teil h4 svg{color:var(--x-akzent-ton)}

/* aus goetter-quer.css */
:where(html[data-thema="hell"]) .quer__titel svg{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .quer-link:hover .quer-link__pfeil{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .quer-themen__kopf{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-tab svg{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .quer-inhalt__titel{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-inhalt__ikon{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .quer-abschnitt{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-abschnitt svg{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .quer-karte b{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-wissen__teil h4{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-wissen__teil h4 svg{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .quer-sagen__mehr:hover{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-pop__kopf{color:var(--x-akzent-ton)}
:where(html[data-thema="hell"]) .quer-ueber__m{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-gruppe__kopf h4{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-gruppe__zeile b{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-gruppe__plus{color:var(--x-titel)}
:where(html[data-thema="hell"]) .quer-gruppe__pfeil{color:var(--x-titel)}


/* ---------- 4 · Handarbeit je Baustein ---------- */
/* Wieder hell: Lesefelder und Aufklapp-Felder, die in einer dunklen Insel liegen */
html[data-thema="hell"] :is(.ansicht-panel,.sage-leiste,.wb-leiste,.quer-band){
  --tinte:#F3ECDC; --tinte-2:#FFFAEF; --tinte-3:#E8DEC8; --tinte-4:#C9BB9C;
  --papier:#1B1740; --papier-2:#5A5379; --kante:#1B1740; --deckel:#FBF5E8; --creme:#FFFCF5; --stein-text:#1B1740; --linie:#2A2650;
  --punkte:radial-gradient(rgba(27,23,64,.075) 1.1px,transparent 1.6px) 0 0/14px 14px;
  --x-titel:#1B1740; --x-akzent-ton:color-mix(in oklab,var(--akzent) 52%,#140F2E);
  color-scheme:light;
}

/* Kopfleiste */
html[data-thema="hell"] .leiste{background:rgba(251,245,232,.97);box-shadow:none}
html[data-thema="hell"] .fam-switch__titel{border-left-color:rgba(27,23,64,.18)}

/* Themenbühne: Titel ohne Nachtschatten, Animation als helles Aquarell (Farben umgekehrt, multipliziert) */
html[data-thema="hell"] .quer-inhalt__titel{text-shadow:none}
html[data-thema="hell"] .quer-inhalt__intro{text-shadow:0 0 14px var(--tinte),0 0 4px var(--tinte)}
html[data-thema="hell"] .quer-anim{filter:invert(1) hue-rotate(180deg) saturate(1.3);mix-blend-mode:multiply;opacity:.7}

/* Arten der Querverbindungen (Schilder) */
html[data-thema="hell"] .quer-art--gleich{color:#7A5A12;border-color:#C9A24A}
html[data-thema="hell"] .quer-art--verwandt{color:#1E6B49;border-color:#6DBF98}
html[data-thema="hell"] .quer-art--uebernommen{color:#2E4A9A;border-color:#8EA6E8}

/* Logo in der Kopfleiste: dunkel auf hellem Grund */
html[data-thema="hell"] .leiste__marke img{filter:brightness(0) saturate(100%) invert(9%) sepia(32%) saturate(2300%) hue-rotate(225deg)}

/* Erzählleiste der Sagen und der Welt: heller Karton */
html[data-thema="hell"] .sage-leiste{background:var(--punkte),rgba(251,246,236,.985);box-shadow:0 10px 0 var(--kante),0 24px 60px rgba(27,23,64,.28)}
@media (min-width:861px){ html[data-thema="hell"] .sage-leiste{box-shadow:-14px 0 40px rgba(10,8,32,.35)} }
html[data-thema="hell"] .wb-zitat p{color:var(--papier)!important}
html[data-thema="hell"] .wb-leiste .wb-brauch{border-color:rgba(27,23,64,.14);background:rgba(27,23,64,.04)}
html[data-thema="hell"] .wb-leiste .sage-leiste__eyebrow,html[data-thema="hell"] .wb-kicker{color:color-mix(in oklab,var(--akzent-wb,var(--akzent)) 52%,#140F2E)!important}

/* ---------- Baum bei Tag (Variante B): Hintergründe färbt goetter-hell-baum.js um ---------- */
html[data-thema="hell"] .buehne-baum{--linie:#2A2650;background:#E6E1F0}
html[data-thema="hell"] .band-titel,html[data-thema="hell"] .band-unter{fill:#1B1740}
html[data-thema="hell"] .verbindung{opacity:.62}
html[data-thema="hell"] .verbindung.bund{stroke:#1B1740}
html[data-thema="hell"] .bund-text{fill:#1B1740;stroke:rgba(255,255,255,.6)}
html[data-thema="hell"] .baum.fokus .knoten:not(.hell){opacity:.3}

/* ---------- Startseite bei Tag: Szenen färbt goetter-hell-start.js um, hier der helle Schleier ---------- */
html[data-thema="hell"] .sb-schleier{background:
  linear-gradient(90deg,rgba(246,240,227,.72) 0%,rgba(246,240,227,.4) 28%,rgba(246,240,227,0) 52%),
  linear-gradient(180deg,rgba(246,240,227,.5) 0,rgba(246,240,227,0) 140px),
  linear-gradient(0deg,rgba(246,240,227,.75) 0,rgba(246,240,227,.15) 30%,rgba(246,240,227,0) 46%)}
@media (max-width:760px){ html[data-thema="hell"] .sb-schleier{background:linear-gradient(180deg,rgba(246,240,227,.6) 0,rgba(246,240,227,.12) 40%,rgba(246,240,227,.6) 100%)} }
/* Schrift über der Startszene: Tinte mit hellem Hof statt Creme mit dunklem Schatten */
html[data-thema="hell"] .auswahl__titel,html[data-thema="hell"] body.sb .auswahl__titel{color:#1B1740;text-shadow:0 6px 0 #F5C04A,0 18px 40px rgba(246,240,227,.7)}
html[data-thema="hell"] .auswahl__titel em,html[data-thema="hell"] body.sb .auswahl__titel em{color:#1B1740;text-shadow:0 6px 0 #4FD1C5,0 18px 40px rgba(246,240,227,.7)}
html[data-thema="hell"] body.sb .auswahl__eyebrow,html[data-thema="hell"] .auswahl__eyebrow{color:#4A4370;text-shadow:0 1px 10px rgba(246,240,227,.9)}
html[data-thema="hell"] body.sb .auswahl__text,html[data-thema="hell"] .auswahl__text{color:#2A2550;text-shadow:0 0 12px rgba(246,240,227,.95),0 0 3px rgba(246,240,227,.9)}
html[data-thema="hell"] body.sb .auswahl__fuss,html[data-thema="hell"] .auswahl__fuss{color:#4A4370}
html[data-thema="hell"] .sb-mythos__eyebrow{color:#4A4370;text-shadow:0 1px 10px rgba(246,240,227,.9)}
html[data-thema="hell"] .sb-mythos__name{color:#1B1740;text-shadow:0 6px 0 var(--sb-a),0 20px 44px rgba(246,240,227,.7)}
html[data-thema="hell"] .sb-mythos__text{color:#1B1740;text-shadow:0 0 14px rgba(246,240,227,.95),0 0 3px rgba(246,240,227,.9)}
html[data-thema="hell"] .sb-mythos__los{color:#1B1740;text-shadow:0 0 10px rgba(246,240,227,.9)}