@charset "utf-8";
/* DATEI: grammatikanimation.css */

:root {
    /* Zentrale Farbdefinitionen für alle Animationen */
    --ga-primary-color: #0056b3;
    --ga-card-bg: #ffffff;
    --ga-border-radius: 8px;
    --ga-shadow: 0 4px 15px rgba(0,0,0,0.08);
    
    /* Grammatik-Farben */
    --ga-rot: #d32f2f;     /* Kräftiges Rot */
    --ga-blau: #1976d2;    /* Kräftiges Blau */
    --ga-gruen: #388e3c;   /* Kräftiges Grün */
    --ga-lila: #7b1fa2;
    --ga-braun: #795548;
    
    /* ÄNDERUNG: Hier ist jetzt der gut lesbare Bernstein-Ton als Standard-Gelb definiert */
    --ga-gelb: #d97706;    
    
    --ga-schwarz: #000;
}

/* Container Layout */
.animation-container {
    background: var(--ga-card-bg);
    width: 100%;
    max-width: 800px;
    border-radius: var(--ga-border-radius);
    box-shadow: var(--ga-shadow);
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    margin-left: auto;
    margin-right: auto;
}

/* Erklärungsbox (oben) */
#erklaerungs-box {
    background-color: #eef2f5;
    padding: 25px;
    border-bottom: 1px solid #ddd;
    height: 150px; 
    overflow-y: auto; 
    font-size: 1.1rem;
    color: #444;
    display: flex;
    flex-direction: column; 
    text-align: left;
    line-height: 1.5;
    scroll-behavior: smooth;
}

.erklaerung-paragraph {
    margin: 0 0 12px 0;
    opacity: 0;
    animation: gaFadeIn 0.5s forwards;
    width: 100%;
}

@keyframes gaFadeIn {
    to { opacity: 1; }
}

/* Beispielbox (Mitte) */
#beispiel-box {
    padding: 40px 30px;
    min-height: 250px;
    font-size: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 25px;
    background-color: #fff;
}

.satz {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.satz.sichtbar {
    opacity: 1;
    transform: translateY(0);
}

/* Steuerung (Buttons) */
.controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.ga-btn {
    background-color: var(--ga-primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.3s, transform 0.1s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.ga-btn:hover {
    background-color: #004494;
    transform: translateY(-1px);
}

.ga-btn:disabled {
    background-color: #b0c4de;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.ga-btn.secondary {
    background-color: #78909c;
}

/* --- GRAMMATIK FARBEN & STYLES --- */

/* Basis-Klassen */
.rot { color: var(--ga-rot); font-weight: bold; }
.blau { color: var(--ga-blau); font-weight: bold; }
.green { color: var(--ga-gruen); font-weight: bold; } 
.gruen { color: var(--ga-gruen); font-weight: bold; }
.lila { color: var(--ga-lila); font-weight: bold; }
.braun { color: var(--ga-braun); font-weight: bold; }
.schwarz { color: var(--ga-schwarz); font-weight: bold; }

/* ÄNDERUNG: Nutzt jetzt die Variable (Bernstein) */
.gelb {
    color: var(--ga-gelb); 
    background-color: transparent;
    font-weight: bold;
}

/* Die Unterstreichungslinie */
.unterstreich {
    border-bottom: 2px solid #333;
    padding-bottom: 1px;
}

.durchgestrichen {
    text-decoration: line-through;
    color: darkred;
	font-weight: bold;
    transition: color 1s ease;
}
.verschwunden {
    opacity: 0;
    pointer-events: none;
}

/* --- ANIMATIONSEFFEKTE --- */

.betonen {
    display: inline-block;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* 
   ÄNDERUNG: :not(.gelb) hinzugefügt!
   Damit wird verhindert, dass gelbe Elemente blau werden.
*/
.betonen:not(.rot):not(.blau):not(.gruen):not(.lila):not(.braun):not(.schwarz):not(.gelb) {
    color: var(--ga-primary-color);
}

/* Spezifische Kombinationen erzwingen die Farbe */
.rot.betonen { color: var(--ga-rot) !important; }
.blau.betonen { color: var(--ga-blau) !important; }
.gruen.betonen { color: var(--ga-gruen) !important; }
.green.betonen { color: var(--ga-gruen) !important; }
.lila.betonen { color: var(--ga-lila) !important; }
.braun.betonen { color: var(--ga-braun) !important; }
.schwarz.betonen { color: var(--ga-schwarz) !important; }

/* ÄNDERUNG: Spezifische Regel für Gelb hinzugefügt */
.gelb.betonen { color: var(--ga-gelb) !important; }


/* Die Zoom-Animation */
.betonen.active {
    animation: gaZoomEffect 1.5s ease-in-out 1s; 
    animation-fill-mode: both; 
}

@keyframes gaZoomEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* --- NEUE FUNKTION: .zeigen (Nur Einblenden) --- */
@keyframes gaNurErscheinen {
    from { opacity: 0; }
    to { opacity: 1; }
}

.zeigen {
    opacity: 0; 
    animation: gaNurErscheinen 2s ease-in forwards;
}

/* --- NEUE FUNKTION: .verschwinden (Ausblenden) --- */
@keyframes gaNurVerschwinden {
    from { opacity: 1; }
    to { opacity: 0; }
}

.verschwinden {
    opacity: 1; 
    animation: gaNurVerschwinden 2s ease-out forwards;
    pointer-events: none; 
}

/* Cursor Effekt */
.typing-cursor::after {
    content: '|';
    animation: gaBlink 1s step-start infinite;
    color: var(--ga-primary-color);
    margin-left: 2px;
    font-weight: bold;
}

@keyframes gaBlink {
    50% { opacity: 0; }
}

/* --- ERGÄNZUNGEN FÜR DATIV ANIMATION (Modern) --- */

.info-label {
    display: inline-block;
    background-color: #f1f3f5; 
    color: #555;
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 10px; 
    font-family: sans-serif;
    letter-spacing: 0.5px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.satz-inhalt {
    display: block;
    line-height: 1.6;
}