:root {
    /* --- Basis Farben --- */
    --color-bg: #ffffff;
    --color-bg-light: #f5f5f5; /* Wird für Header/Footer genutzt */
    --color-text: #2c3e50;
    --color-border: #ddd;
    --color-accent: #3498db;
    --color-secondary: #e67e22; /* Neu: Standard Sekundärfarbe */
    
    /* --- Schriftarten --- */
    --font-heading: 'Helvetica Neue', sans-serif;
    --font-body: 'Arial', sans-serif;
    --font-mono: 'Courier New', monospace; /* Neu */

    /* --- Komponenten Zuweisung --- */
    --header-bg: var(--color-bg-light); 
    --footer-bg: var(--color-bg-light);

    /* --- SEMANTISCHE VARIABLEN --- */
    /* Standardmäßig erben sie einfach von deinen Basis-Farben */
    --header-bg: var(--color-bg-light);
    --nav-bg: var(--color-bg-light);
    --footer-bg: var(--color-bg-light);
    --card-bg: var(--color-bg-light);
    --card-border: var(--color-border);
}

[data-theme="dark"] {
    --color-bg: #1a1a1a;
    --color-bg-light: #2d2d2d;
    --color-text: #e0e0e0;
    --color-border: #404040;
    --color-accent: #64b5f6;
    
    --header-bg: #2d2d2d;
    --footer-bg: #2d2d2d;
    
    /* Im Dark Mode mappen wir sie neu */
    --header-bg: #2d2d2d; /* oder var(--color-bg-light) */
    --nav-bg: #2d2d2d;
    --footer-bg: #1a1a1a; /* Footer oft dunkler */
    --card-bg: #2d2d2d;
}

/* BESSER: Transition nur auf body und theme-relevanten Containern */
body, .site-header, .site-footer, .btn, .card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}