/* ==========================================================================
   1. THEME-VARIABLEN (LIGHT & DARK MODE)
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    --header-height: 115px;
    
    /* Hauptfarben */
    --brand-red: #dd5a5a;
    --brand-orange: #ff5733;
    
    /* Identischer Slate-Grau Ton für Header & Footer im Light Mode */
    --bg-header-footer: #f1f5f9;
    --text-header-footer: #1e293b;
    --text-muted-footer: #64748b;

    /* Inhaltsbereich (Clean Light Mode) */
    --bg-body: #f8fafc;                  /* Ein weiches, modernes Hellgrau für den Hauptbereich */
    --bg-card: #ffffff;                  /* Karten heben sich strahlend weiß ab */
    --bg-monatsbox: #ffffff;             /* Monatsbox ebenfalls in klarem Weiß */
    --bg-ticker: #f1f5f9;                /* Ticker-Hintergrund passend zum Header */
    --bg-sidebar: #f1f5f9;               /* Dezent abgesetzter Sidebar-Hintergrund */
    
    /* Textfarben & Rahmen (Dunkler Text für hellen Hintergrund) */
    --text-main: #1e293b;                /* Tiefes Anthrazit für perfekte Lesbarkeit */
    --border-card: rgba(221, 90, 90, 0.3);
    --border-monatsbox: #e2e8f0;
    --border-sidebar: #e2e8f0;
    --color-brand: #dc3545;
    --color-th: #0d6efd;
    --badge-demnaechst-bg: #ff5733;
    --badge-demnaechst-text: #ffffff;
    
    /* Bootstrap Standard-Farben */
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-main);
}

/* Dark Mode */
[data-bs-theme="dark"] {
    --brand-red: #dd5a5a;
    --brand-orange: #ff5733;

    /* Identischer Anthrazit-Ton für Header & Footer im Dark Mode */
    --bg-header-footer: #0b0d0e;
    --text-header-footer: #f8fafc;
    --text-muted-footer: rgba(241, 245, 249, 0.65);

    /* Inhaltsbereich */
    --bg-body: #12161a;             
    --bg-card: #1e2329;             
    --bg-monatsbox: #2a3440;        
    --bg-ticker: #8c1d1d;           
    --bg-sidebar: rgba(255, 255, 255, 0.05);
    
    /* Textfarben & Rahmen */
    --text-main: #f1f5f9;
    --border-card: #333c48;
    --border-monatsbox: #475569;
    --border-sidebar: rgba(255, 255, 255, 0.08);
    --color-brand: #ff6b6b; /* Ein helleres, leuchtendes Rot für Dark Mode */
    --color-th: #38bdf8;
    --badge-demnaechst-bg: #e64a19;
    --badge-demnaechst-text: #ffffff;

    /* Bootstrap Standard-Farben */
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-main);
}