/* ================= Dark Mode ================= */
/* Reagiert automatisch auf die Systemeinstellung (prefers-color-scheme),
   kein Umschalter in der App nötig. Statt jede einzelne Stelle in HTML/JS
   anzufassen, werden hier die immer wiederkehrenden Tailwind-Klassen
   gezielt für den Dark-Modus überschrieben - deutlich wartungsärmer als
   überall "dark:" Klassen zu ergänzen. */
@media (prefers-color-scheme: dark) {
    body { background-color: #0f172a; }

    /* NEU: native Auswahlfelder (select/option) nutzen ohne diesen Hinweis
       oft weiterhin schwarze Schrift, unabhängig von unseren eigenen
       Farbklassen - color-scheme sagt dem Browser, selbst helle Text-
       farben für seine eingebauten Bedienelemente zu verwenden. */
    select, option { color-scheme: dark; }

    /* Flächen / Karten */
    .bg-white { background-color: #1e293b !important; }
    /* FIX: war identisch zur Seiten-Hintergrundfarbe (siehe body-Regel
       unten). Für den App-Rahmen selbst fiel das nie auf (er deckt am
       Handy die komplette Fläche ab, man sieht den body dahinter also nie).
       Genau dieselbe Klasse wird aber auch als "eingelassene" Füllung von
       Eingabefeldern/Dropdowns auf weißen Karten benutzt (z.B. die
       Einstellungen-Felder) - dort verschmolz das Feld dadurch optisch
       komplett mit der Seite dahinter und war praktisch nicht mehr zu
       erkennen. Jetzt ein eigener, etwas hellerer Ton: dunkler als die
       Karte (#1e293b), aber klar heller als der reine Seitenhintergrund. */
    .bg-slate-50 { background-color: #172236 !important; }
    .bg-slate-100 { background-color: #334155 !important; }
    .bg-slate-200 { background-color: #334155 !important; }

    /* FIX: Tailwind-Klassen MIT Transparenzangabe (z.B. "bg-slate-50/95")
       sind für CSS eigene Klassennamen und wurden von den Regeln darüber
       NICHT miterfasst - die klebende Kopfzeile im Reader blieb dadurch
       im Dark-Modus fast weiß, während der Rest dunkel war. Farbwert an
       die obige .bg-slate-50-Anpassung angeglichen, damit die Kopfzeile
       beim Scrollen weiter nahtlos mit der Seite dahinter verschmilzt. */
    .bg-slate-50\/95 { background-color: rgba(23, 34, 54, 0.95) !important; }

    /* Text */
    .text-slate-900 { color: #f1f5f9 !important; }
    .text-slate-800 { color: #e2e8f0 !important; }
    .text-slate-700 { color: #cbd5e1 !important; }
    .text-slate-600 { color: #94a3b8 !important; }
    .text-slate-500 { color: #94a3b8 !important; }
    .text-slate-400 { color: #64748b !important; }
    .text-slate-300 { color: #475569 !important; }

    /* Rahmen */
    .border-slate-100 { border-color: #334155 !important; }
    .border-slate-200 { border-color: #334155 !important; }
    .border-slate-300 { border-color: #475569 !important; }

    /* Platzhaltertext in Eingabefeldern */
    input::placeholder { color: #64748b; }

    /* Farbige Hervorhebungs-Karten (Indigo/Amber/Rot/Grün/Lila) -
       dunklerer, gedämpfter Hintergrund statt der hellen Pastelltöne */
    .bg-indigo-50, .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !important; }
    .bg-amber-50, .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15) !important; }
    .bg-red-50, .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; }
    .bg-emerald-50, .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.15) !important; }
    .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; }

    .text-indigo-600, .text-indigo-700, .text-indigo-800, .text-indigo-900 { color: #a5b4fc !important; }
    .text-amber-600, .text-amber-800 { color: #fcd34d !important; }
    .text-red-500, .text-red-600, .text-red-700, .text-red-800 { color: #fca5a5 !important; }
    .text-emerald-700, .text-emerald-800, .text-emerald-900 { color: #6ee7b7 !important; }
    .text-purple-800, .text-purple-900, .text-purple-950 { color: #d8b4fe !important; }

    /* FIX: die etwas kräftigeren *-200-Töne werden ausschließlich als
       Hover-Farbe genutzt (z.B. "hover:bg-indigo-200"). Ohne diese Zeilen
       sprang ein Knopf im Dark-Modus beim Überfahren auf helles Pastell,
       während seine Schrift durch die Regeln oben hell blieb - die
       Beschriftung war dann für einen Moment praktisch unlesbar. */
    .bg-indigo-200 { background-color: rgba(99, 102, 241, 0.3) !important; }
    .bg-amber-200 { background-color: rgba(245, 158, 11, 0.3) !important; }
    .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.3) !important; }

    /* FIX: Erstleser-Textfeld (bg-indigo-50/50) - siehe Hinweis zu
       bg-slate-50/95 oben: heller Kasten mit hellem Text war die Folge. */
    .bg-indigo-50\/50 { background-color: rgba(99, 102, 241, 0.12) !important; }

    .border-indigo-100 { border-color: rgba(99, 102, 241, 0.3) !important; }
    .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; }
    .border-emerald-100, .border-emerald-300 { border-color: rgba(16, 185, 129, 0.3) !important; }
    /* FIX: fehlte als einziger der farbigen Rahmen - die Bildbeschreibungs-
       Karte hatte dadurch einen grell hellen Rand auf dunklem Grund. */
    .border-purple-100 { border-color: rgba(168, 85, 247, 0.3) !important; }
}

.view-hidden { display: none !important; }

/* NEU: Hervorhebung des gerade vorgelesenen Wortes (Speedreader-Stil) */
.speech-word.speech-highlight {
    background-color: var(--speech-highlight-color, #fde047);
    color: #1e293b;
    border-radius: 4px;
    padding: 0 2px;
    transition: background-color 0.1s ease;
}
@media (prefers-color-scheme: dark) {
    /* FIX: hier stand vorher eine fest verdrahtete Farbe (#ca8a04). Dadurch
       war die Farbauswahl aus den Einstellungen im Dark-Modus komplett
       wirkungslos - man stellte etwas ein und sah abends keinen Unterschied.
       Jetzt zählt dieselbe Variable wie im hellen Modus; der gedämpfte
       Amber-Ton bleibt nur noch Rückfall, falls nie eine Farbe gewählt
       wurde. Die dunkle Schriftfarbe der Grundregel passt zu allen zur
       Auswahl stehenden (hellen) Markierfarben. */
    .speech-word.speech-highlight { background-color: var(--speech-highlight-color, #ca8a04); }
}
.view-transition { transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; }

/* NEU: Mitmachmodus - Emoji pulsiert während der Sprechpause, damit klar
   ist, dass jetzt das Kind an der Reihe ist zu raten/mitzusprechen. */
.mitmach-emoji.mitmach-active {
    display: inline-block;
    animation: mitmachPulse 0.7s ease-in-out infinite;
}
@keyframes mitmachPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}

/* NEU: Zweiseitiges Layout (Option, siehe Einstellungen) - Bild links,
   Text rechts wie ein aufgeschlagenes Buch. Greift bewusst erst ab
   Tablet-Breite (768px, entspricht Tailwinds "md"-Breakpoint) - auf dem
   Handy ist nebeneinander schlicht zu schmal, da bleibt es untereinander. */
@media (min-width: 768px) {
    #viewReader.two-page-layout {
        max-width: 64rem;
    }
    #viewReader.two-page-layout #readerLayoutGrid {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
    }
    #viewReader.two-page-layout #readerImageContainer {
        flex: 0 0 45%;
        max-height: none;
        margin-bottom: 0;
        position: sticky;
        top: 5rem;
    }
    #viewReader.two-page-layout #readerTabArea {
        flex: 1;
        min-width: 0;
    }
}

/* NEU: Kino-Modus im Vollbild-Vorlese-Modus (siehe docs/KONZEPT-Video.md,
   Abschnitt 3, Stufe 1) - Ken-Burns-Zoom übers Seitenbild + Kreuzblende beim
   Seitenwechsel. Zwei übereinanderliegende <img> (#focusImg/#focusImgB)
   wechseln sich per Opacity/z-index ab, gesteuert von app.render.focusMode()
   in js/render/reader.js. Reine CSS-Animation, rührt die Wort-Hervorhebung
   im Untertitel-Bereich (eigenes Element, eigenes rAF/boundary-Event) nicht an. */
.focus-kenburns-img {
    position: absolute;
    inset: 0;
    margin: auto;
    opacity: 0;
    z-index: 1;
    transform-origin: center center;
}
/* Vier leicht unterschiedliche Zoom-Richtungen, zyklisch nach Seitenindex
   gewählt (siehe app.render.focusMode()) - sonst wirkt der immer gleiche
   Schwenk über mehrere Seiten hinweg schnell mechanisch. */
.focus-kenburns-img.focus-kb-0 { animation: focusKenBurns0 20s ease-in-out forwards; }
.focus-kenburns-img.focus-kb-1 { animation: focusKenBurns1 20s ease-in-out forwards; }
.focus-kenburns-img.focus-kb-2 { animation: focusKenBurns2 20s ease-in-out forwards; }
.focus-kenburns-img.focus-kb-3 { animation: focusKenBurns3 20s ease-in-out forwards; }

@keyframes focusKenBurns0 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
@keyframes focusKenBurns1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(2%, -1.5%); } }
@keyframes focusKenBurns2 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 1.5%); } }
@keyframes focusKenBurns3 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(2%, 1.5%); } }

/* Custom scrollbar for clean mobile experience */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* Pulse animations for magic elements */
@keyframes magicGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 25px rgba(168, 85, 247, 0.7); }
}
.magic-glow { animation: magicGlow 3s infinite; }

/* Barrierefreiheit: Personen, die in ihrem Betriebssystem reduzierte
   Bewegung eingestellt haben (z.B. wegen vestibulärer Beschwerden),
   bekommen die Puls-/Glow-Animationen nicht angezeigt. */
@media (prefers-reduced-motion: reduce) {
    .magic-glow { animation: none; box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); }
    .animate-pulse { animation: none; }
    .mitmach-emoji.mitmach-active { animation: none; }
    /* NEU: Kino-Modus - kein Ken-Burns-Zoom und keine Überblendungs-Animation,
       harter Schnitt statt Bewegung. app.render.focusMode() prüft dasselbe
       Betriebssystem-Merkmal zusätzlich per JS (siehe js/render/reader.js),
       diese Regel ist die Absicherung, falls irgendwo trotzdem eine
       Übergangs-Dauer per Inline-Style gesetzt würde. */
    .focus-kenburns-img { transition: none !important; animation: none !important; transform: none !important; }
}

/* ================= Kinder-Lesemodus (v0.42.0-beta) ================= */
/* NEU: body.kid-mode wird von js/actions/kidMode.js gesetzt. Alles, was nur
   Eltern bedienen sollen, trägt im HTML data-parent-only und verschwindet
   hier - auch dann, wenn JS die "hidden"-Klasse gerade entfernt hat
   (z.B. Backup-Erinnerung). data-kid-only ist das Gegenstück (🔒 Eltern-Knopf). */
body.kid-mode [data-parent-only] { display: none !important; }
body:not(.kid-mode) [data-kid-only] { display: none !important; }
body.kid-mode [data-kid-only] { display: flex; }