/* KidsLearningPro — die drei Welten (D-008, D-012). Nur Marken und wenige gezielte Abweichungen;
   die Bauteile sind dieselben. Studio = Grundmarken aus grund.css. Kein Maskottchen (David, 07.10.). */

/* ---------- Entdecker: Grundschule — warm, rund, groß ---------- */
html[data-welt="entdecker"] {
    --grund: #FFF8EC;
    --flaeche: #FFFFFF;
    --flaeche-tief: #FFEFD6;
    --rand: #F1E0C2;
    --tinte: #2B2118;
    --tinte-leise: #7A6650;
    --akzent: #2F7DF6;
    --akzent-tief: #1F63D1;
    --akzent-hell: #E3EEFF;
    --gut: #2FAE5F;
    --gut-hell: #DDF6E5;
    --falsch: #E5484D;
    --falsch-hell: #FDE4E4;
    --gold: #F4A019;
    --gold-hell: #FFF0CC;
    --schrift-titel: "Fredoka", "Lexend", system-ui, sans-serif;
    --text-groesse: 20px;
    --zeilen: 1.65;
    --ziel: 64px;
    --radius: 22px;
    --radius-klein: 16px;
    --schatten: 0 2px 0 rgba(43, 33, 24, .05), 0 8px 24px rgba(43, 33, 24, .07);
    --sockel: 0 5px 0 rgba(43, 33, 24, .14);
    --sockel-akzent: 0 5px 0 #1A4FA8;
    --rail: 112px;
    --unten: 84px;
}
html[data-welt="entdecker"] h1 { font-size: 2.1rem; }
html[data-welt="entdecker"] .karte,
html[data-welt="entdecker"] .kachel { border-width: 2px; }
html[data-welt="entdecker"] .kachel .symbol { width: 64px; height: 64px; font-size: 2.2rem; border-radius: 20px; }
html[data-welt="entdecker"] .leiste a { font-size: .85rem; }
html[data-welt="entdecker"] .leiste a .symbol { font-size: 1.9rem; }
html[data-welt="entdecker"] .knopf:not(.knopf-rund) { font-size: 1.05rem; }
html[data-welt="entdecker"] .frage { font-size: 1.6rem; }

/* Der Lernpfad als Schlangenlinie aus großen Punkten — wie ein Weg auf einer Karte */
html[data-welt="entdecker"] .pfad::before { display: none; }
html[data-welt="entdecker"] .punkt { width: 84px; height: 84px; font-size: 1.6rem; border-width: 5px;
                                     box-shadow: 0 5px 0 rgba(43, 33, 24, .12); }
html[data-welt="entdecker"] .station:nth-child(4n+2) { margin-left: 64px; }
html[data-welt="entdecker"] .station:nth-child(4n+3) { margin-left: 128px; }
html[data-welt="entdecker"] .station:nth-child(4n+4) { margin-left: 64px; }
html[data-welt="entdecker"] .station.fertig .punkt::after {
    content: "★"; position: absolute; top: -10px; right: -8px; font-size: 1.4rem; color: var(--gold);
    text-shadow: 0 2px 0 #fff;
}
@media (max-width: 560px) {
    html[data-welt="entdecker"] .station:nth-child(4n+3) { margin-left: 64px; }
}

/* ---------- Nacht: dunkel mit Leuchtfarben — nur als Wahl ---------- */
html[data-welt="nacht"] {
    --grund: #0F1222;
    --flaeche: #181C33;
    --flaeche-tief: #22274A;
    --rand: #2C3260;
    --tinte: #E9ECF8;
    --tinte-leise: #9AA3C7;
    --akzent: #2EE6D6;
    --akzent-tief: #5FF0E3;
    --akzent-hell: rgba(46, 230, 214, .14);
    --gut: #3DDC84;
    --gut-hell: rgba(61, 220, 132, .16);
    --falsch: #FF5C7A;
    --falsch-hell: rgba(255, 92, 122, .16);
    --gold: #FFD166;
    --gold-hell: rgba(255, 209, 102, .18);
    --ring-farbe: #FF4FD8;
    --schatten: 0 0 0 1px rgba(255, 255, 255, .03), 0 8px 28px rgba(0, 0, 0, .35);
    --sockel-akzent: 0 3px 0 #0E8F84;
    color-scheme: dark;
}
html[data-welt="nacht"] .knopf-haupt,
html[data-welt="nacht"] .blase.ich,
html[data-welt="nacht"] .knopf.knopf-rund.laeuft { color: #0F1222; }
html[data-welt="nacht"] .hinweis-fehler { color: #FFC2CD; }
html[data-welt="nacht"] .hinweis-gut { color: #B9F5D2; }
html[data-welt="nacht"] .antwort { color: #fff; }
/* Lange Texte bleiben hell — auf hellem Grund liest es sich nachweislich besser (NN/g) */
html[data-welt="nacht"] .lesetext { background: #F3F4FA; color: #1D2433; padding: 16px 20px;
                                    border-radius: var(--radius-klein); }
html[data-welt="nacht"] .lesetext a { color: #4343B8; }
/* Dunkle Schrift auf der hellen Markierung — sonst stünde helle Schrift auf Hellgelb (Frage, Antwort, Rückmeldung) */
html[data-welt="nacht"] .wird-gelesen { background: #FFE9A8; box-shadow: 0 0 0 4px #FFE9A8; color: #1D2433; }