/* User Provided Stylesheet */

/* ===== Farben / Variablen (global, keine Styles) ===== */
/* ===== Farbpalette + semantische Tokens ===== */
:root {
    /* Palette */
    --c-schwarz: #04151f;
    --c-dunkelgruen: #183a37; /* dunkelgrün */
    --c-hellgruen: #848872; /* hellgrün  */
    --c-beige: #efd6ac;
    --c-orange: #c44900;
    --c-gelb: #fce47b;
    --c-aubergine: #432534; /* angepasst auf deine Palette */
    --c-weiss: #ffffff;

    /* Semantik (werden im White-Mode-CSS verwendet) */
    --hl-bg: var(--c-beige); /* Menü-Highlight-Hintergrund */
    --hl-outline: var(--c-gelb); /* Outline-/Focus-Farbe */
    --icon-hover-bg: var(--c-weiss);
    --icon-hover-stroke: var(--c-dunkelgruen);

    /* Kompatibilität (falls irgendwo noch genutzt) */
    --menu-active-bg-light: var(--c-beige);
}

/* ===== WHITE / LIGHT MODE ONLY ===== */
html:not(.dark) {
    /* Header-Leiste */
    .sticky.top-0.z-30 {
        background: var(--c-dunkelgruen) !important;
        color: var(--c-weiss);
        --icon-hover-bg: var(--c-weiss);
        --icon-hover-stroke: var(--c-dunkelgruen);
    }

    /* "Nächster Beitrag"-Box */
    a.border-gray-200 {
        border: 1px dashed var(--c-hellgruen) !important;
    }
    a.border-gray-200[class*="hover:text-blue-"]:hover,
    a.border-gray-200[class*="hover:text-blue-"]:hover * {
        color: var(--c-dunkelgruen) !important;
    }

    /* Menü-Highlight: Hintergrund + Text */
    .collapsible-content
        a:is(.active, [aria-current="page"], .bg-blue-300\/30) {
        background: var(--hl-bg) !important;
        color: var(--c-dunkelgruen) !important;
    }
    .collapsible-content
        a:is(.active, [aria-current="page"], .bg-blue-300\/30)
        * {
        color: inherit !important;
    }

    /* Outline: aktiv & Fokus (Tailwind focus:outline …) */
    .collapsible-content a:is(.active, [aria-current="page"]),
    .collapsible-content
        a:is(.outline-blue-200, .outline-2):is(:focus, :focus-visible) {
        outline: 2px solid var(--hl-outline) !important;
        outline-offset: 0;
    }

    /* Falls das Theme text-blue-800 am aktiven Eintrag setzt */
    .collapsible-content .text-blue-800,
    .collapsible-content
        .text-blue-800:is(:link, :visited, :hover, :focus, :focus-visible) {
        color: var(--c-dunkelgruen) !important;
    }
    .collapsible-content .text-blue-800 * {
        color: inherit !important;
    }

    /* Trigger-Zeile ("Anleitungen") einfärben, wenn folgendes Panel aktiv enthält
     (funktioniert mit forceMount; ohne forceMount siehe JS-Fallback in vorheriger Nachricht) */
    :is(a, button, div):has(
        + .collapsible-content
            a:is(
                .active,
                [aria-current="page"],
                .bg-blue-300\/30,
                .text-blue-800
            )
    ) {
        color: var(--c-dunkelgruen) !important;
    }
    :is(a, button, div):has(
            + .collapsible-content
                a:is(
                    .active,
                    [aria-current="page"],
                    .bg-blue-300\/30,
                    .text-blue-800
                )
        )
        * {
        color: inherit !important;
    }

    /* Titel immer grün, auch wenn Panel leer/geschlossen (direkter Selektor auf die Titelzeile) */
    .w-full > .flex.flex-row .text-blue-800,
    .w-full
        > .flex.flex-row
        .text-blue-800:is(:link, :visited, :hover, :focus, :focus-visible) {
        color: var(--c-dunkelgruen) !important;
    }

    /* Optional: falls irgendwo noch bg-blue-300/30 im Menü/Trigger auftaucht */
    [class*="bg-blue-300/30"] {
        background: var(--hl-bg) !important;
        color: var(--c-dunkelgruen) !important;
    }
    /* Optional: gelegentlich verwendetes 400/20 */
    [class*="bg-blue-400/20"] {
        background: var(--hl-bg) !important;
        color: var(--c-dunkelgruen) !important;
    }
}

/* Header-Icon (weiß + invert on hover) */
.sticky.top-0.z-30 svg[data-slot="icon"],
.sticky.top-0.z-30 svg[data-slot="icon"] * {
    stroke: var(--c-weiss) !important;
    color: var(--c-weiss) !important;
   # fill: none !important;
}
.sticky.top-0.z-30 :is(button, a, div):has(> svg[data-slot="icon"]) {
    border-color: var(--c-weiss) !important;
    outline-color: var(--c-weiss) !important;
    --tw-ring-color: var(--c-weiss) !important;
    --tw-ring-offset-color: #ffffff00 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
}
.sticky.top-0.z-30 :is(button, a, div):has(> svg[data-slot="icon"]):hover {
    background: var(--icon-hover-bg) !important;
   /* border-radius: 9999px !important; */
    line-height: 10 !important;
}
.sticky.top-0.z-30
    :is(button, a, div):has(> svg[data-slot="icon"]):hover
    svg[data-slot="icon"],
.sticky.top-0.z-30
    :is(button, a, div):has(> svg[data-slot="icon"]):hover
    svg[data-slot="icon"]
    * {
    stroke: var(--icon-hover-stroke) !important;
    color: var(--icon-hover-stroke) !important;
}

/* TOC anpassen */
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(196 76 0/var(--tw-text-opacity));
}