/* ===== THEME.CSS - Globales Theme-System ===== */
/* Erstellt: 2025-12-11 | Farbthemen fuer alle Lektionsseiten */

/* ========== THEME VARIABLEN ========== */
/* Basis-Theme - alle Themes erben diese Struktur */
[data-theme],
.theme-pink, .theme-purple, .theme-cyan, .theme-violet, .theme-emerald, .theme-blue {
    --theme-color: var(--color-emerald);
    --theme-color-light: var(--color-emerald-light);
    --theme-color-dark: var(--color-emerald-dark);
    --theme-gradient: linear-gradient(135deg, var(--color-emerald) 0%, var(--color-teal) 100%);
}

/* Pink Theme */
.theme-pink, [data-theme="pink"] {
    --theme-color: var(--color-pink);
    --theme-color-light: var(--color-pink-light);
    --theme-color-dark: var(--color-pink-dark);
    --theme-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Purple Theme */
.theme-purple, [data-theme="purple"] {
    --theme-color: #667eea;
    --theme-color-light: #ede9fe;
    --theme-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Cyan Theme */
.theme-cyan, [data-theme="cyan"] {
    --theme-color: #30cfd0;
    --theme-color-light: #e0f7fa;
    --theme-color-dark: #330867;
    --theme-gradient: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

/* Violet Theme */
.theme-violet, [data-theme="violet"] {
    --theme-color: #8b5cf6;
    --theme-color-light: #ede9fe;
    --theme-color-dark: #7c3aed;
    --theme-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Emerald Theme (Default) */
.theme-emerald, [data-theme="emerald"] {
    --theme-color: #10b981;
    --theme-color-light: #d1fae5;
    --theme-color-dark: #059669;
    --theme-gradient: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
}

/* Blue Theme */
.theme-blue, [data-theme="blue"] {
    --theme-color: #4facfe;
    --theme-color-light: #dbeafe;
    --theme-color-dark: #1976d2;
    --theme-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* ========== THEME-ABHAENGIGE KOMPONENTEN ========== */
/* Buttons mit Theme-Farben */
[data-theme] .back-to-overview,
[data-theme] .btn-primary,
[data-theme] .step-number,
[data-theme] .exercise-number-badge,
[data-theme] .progress-fill,
[data-theme] .difficulty-tab.active {
    background: var(--theme-gradient);
}

/* Step Cards mit Theme-Farben */
[data-theme] .step-card {
    border-color: var(--theme-color);
    background: linear-gradient(135deg, var(--theme-color-light) 0%, white 100%);
}

/* Titel mit Theme-Farben */
[data-theme] .step-title,
[data-theme] .section-title {
    color: var(--theme-color);
    border-bottom-color: var(--theme-color);
}

/* Alltagsbezug Box mit Theme-Farben */
[data-theme] .alltagsbezug-box {
    border-left-color: var(--theme-color);
    background: linear-gradient(135deg, var(--theme-color-light) 0%, white 100%);
}

/* Border-Elemente mit Theme-Farben */
[data-theme] .difficulty-tab,
[data-theme] .answer-input input,
[data-theme] .btn-secondary {
    border-color: var(--theme-color);
}

/* Hover-States */
[data-theme] .difficulty-tab:hover:not(.active) {
    background: var(--theme-color-light);
}

[data-theme] .btn-secondary:hover {
    background: var(--theme-gradient);
    color: white;
}