.page-transition { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

@keyframes flyInStayFade {
    0% { transform: scale(0.2) translateY(50vh); opacity: 0; }
    15% { transform: scale(1.1) translateY(0); opacity: 1; }
    25% { transform: scale(1) translateY(0); opacity: 1; }
    75% { transform: scale(1) translateY(0); opacity: 1; }
    100% { transform: scale(1.5) translateY(-30vh); opacity: 0; }
}
.animate-fly-logo { animation: flyInStayFade 3.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

body { background-color: #f8fafc; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* Mathematischer Web-Font im KaTeX-/LaTeX-Stil. System-Stack: erst die OpenType
   Math-Fonts (Latin Modern Math, STIX, Cambria Math), dann TeX-Gyre Pagella und
   schließlich serif als Fallback. Kein externer Web-Font-Download nötig — die
   Schriften liegen auf modernen Systemen vor (Cambria Math auf Windows, STIX in
   Browsern, Latin Modern Math wenn LaTeX-Distribution installiert). */
.font-math {
    font-family: "Latin Modern Math", "STIX Two Math", "STIX", "XITS Math",
                 "Cambria Math", "TeX Gyre Pagella", "TeX Gyre Termes", Georgia, serif;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-variant-numeric: lining-nums;
}
/* Variante für mathematische Variablen — kursiv (z.B. im Potenzen-Trainer für x, y, z). */
.font-math-italic {
    font-family: "Latin Modern Math", "STIX Two Math", "STIX", "XITS Math",
                 "Cambria Math", "TeX Gyre Pagella", "TeX Gyre Termes", Georgia, serif;
    font-style: italic;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Number-Inputs ohne Spinner-Pfeile — saubere Eingabefelder im Taschenrechner-Stil. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Damit foreignObject im SVG-Baumdiagramm absolute Kinder (z.B. CheckCircle) nicht clippt */
svg foreignObject { overflow: visible; }

/* Pulsierender gelb-oranger Glow um das aktuell aktive Bruch-Eingabefeld
   im Wahrscheinlichkeits-Trainer. Schüler:innen sehen sofort, wo getippt werden soll.
   Die Orange-Phase ist dezent (4px statt 6px), Dauer 2.4s für ruhigeres Pulsieren. */
@keyframes glowAmber {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.55), 0 0 10px 2px rgba(251, 191, 36, 0.3);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.55), 0 0 12px 2px rgba(251, 146, 60, 0.35);
    }
}
.animate-glow-amber { animation: glowAmber 2.4s ease-in-out infinite; border-radius: 0.5rem; }

/* Dezentere Variante des gelb-orangen Glows — für größere Eingabefelder wie das
   Prozent-Feld in Step 3. Schmaler, etwas blasser, gleiche ruhige Frequenz. */
@keyframes glowAmberSubtle {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45), 0 0 8px 1px rgba(251, 191, 36, 0.2);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.45), 0 0 10px 1px rgba(251, 146, 60, 0.25);
    }
}
.animate-glow-amber-subtle { animation: glowAmberSubtle 2.4s ease-in-out infinite; border-radius: 0.5rem; }

/* SVG-Variante des Glows — wird auf reine <rect>-Elemente angewendet (z.B. auf den
   Bruch-Anker im Mobile-Baumdiagramm). box-shadow funktioniert auf SVG-Elementen
   nicht zuverlässig — daher animieren wir hier stroke + stroke-width. */
@keyframes svgPulseAmber {
    0%, 100% { stroke: #fbbf24; stroke-width: 1.6; }
    50% { stroke: #f97316; stroke-width: 2.6; }
}
.svg-pulse-amber { animation: svgPulseAmber 2.4s ease-in-out infinite; }