/* --- DARKREADER-STYLE IMPLEMENTATION --- */


@media (prefers-color-scheme: dark) {
  :root {
    /* Die typischen DarkReader Off-Black & Off-White Töne */
    --dr-bg: #181a1b;
    --dr-card: #1e2021;
    --dr-text: #e8e6e3;
    --dr-text-muted: #b2aba1;
    --dr-border: #3c4143;
    
    /* Akzentfarben (etwas entsättigt für den Look) */
    --dr-blue: #3391ff;
    --dr-amber: #ffb133;
    --dr-red: #ff6b6b;
}
    body {
        background-color: var(--dr-bg) !important;
        color: var(--dr-text) !important;
    }

    /* Alle Karten und Glaselemente */
    .glass, 
    [class*="bg-white"], 
    [class*="bg-slate-50"], 
    .bg-gradient-to-br {
        background-color: var(--dr-card) !important;
        background-image: none !important;
        border-color: var(--dr-border) !important;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
    }

    /* --- TEXT-LOGIK (DarkReader-Art) --- */

    /* 1. Alles was dunkel war -> DarkReader Text-Weiß */
    h1, h2, h3, p, span, div,
    .text-slate-900, .text-slate-800, .text-slate-700, .text-black {
        color: var(--dr-text) !important;
    }

    /* 2. Grautöne -> DarkReader Muted-Sepia */
    .text-slate-500, .text-slate-400, .text-gray-400 {
        color: var(--dr-text-muted) !important;
    }

    /* 3. FARB-SCHUTZ: Hier bleiben die Farben bunt */
    /* Blau: Regen & Insights */
    .text-blue-600, .text-blue-500, #insight-text b {
        color: var(--dr-blue) !important;
    }

    /* Gelb/Gold: Sonne & Warnungen */
    .text-amber-600, .text-amber-500, .text-yellow-500 {
        color: var(--dr-amber) !important;
    }

    /* Rot: Frost & Gefahr */
    .text-rose-500, .text-red-600, .text-red-500 {
        color: var(--dr-red) !important;
    }

    /* Icons-Fix: Verhindert, dass bunte Icons weiß werden */
    svg[class*="text-blue"] { fill: var(--dr-blue); color: var(--dr-blue); }
    svg[class*="text-amber"] { fill: var(--dr-amber); color: var(--dr-amber); }
    svg[class*="text-red"] { fill: var(--dr-red); color: var(--dr-red); }

    /* Trennlinien */
    hr, .border-t, .border-slate-100 {
        border-color: var(--dr-border) !important;
    }
}