/* ============================================================
   1. FARB-VARIABLEN (DAS HERZSTÜCK)
   ============================================================ */
:root {
    /* HELL-MODUS (Standard) */
    --bg-main: #ffffff;
    --text-main: #1a1a1a;
    --heading-color: #000000;

    --nav-bg-sidebar: #ffffff;
    --nav-accent: #c00000;    /* Dein Eastpool-Rot */
    --nav-grey: #9e9e9e;      /* Dein Standard-Grau */
    --nav-white: #ffffff;
    --nav-text-dimmed: #9e9e9e;
    
    --toggle-bg: #f0f0f0;
    --toggle-border: #ccc;
}

[data-theme="dark"]
{
    /* DARK-MODUS */
    --bg-main: #333333;
    --text-main: #e0e0e0;
    --heading-color: #ffffff;

    --nav-bg-sidebar: #1a1a1a;
    --nav-accent: #c00000; 
    --nav-grey: #b0b0b0;
    --nav-white: #121212; 
    --nav-text-dimmed: #cccccc;
    
    --toggle-bg: #333;
    --toggle-border: #555;
}
/* ============================================================
   2. BASIS STYLES & GLOBALER FALLBACK
   ============================================================ */
body, html, .page, .mm-panels, .mm-panel, .mm-navbar {
    background-color: var(--bg-main) !important;
    color: var(--text-main);
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 0;
}

/* FALLBACK für nicht definierte Bereiche (statt Invert-Filter) */
[data-theme="dark"] *:not(a):not(button):not(i):not([class*="mm-"]) {
    /* Wendet Hintergrund & Textfarbe auf fast alle Elemente an, 
       außer Links, Buttons, Icons und mmenu-spezifische Teile */
    border-color: #444; /* Standard-Rahmenfarbe für Tabellen/Linien */
}

/* Spezifische Text-Elemente */
h1, h2, h3, h4, h5, h6, .ce_headline {
    color: var(--heading-color);
    transition: color 0.3s ease;
}

/* Verhindert, dass Bilder im Dark Mode zu grell sind */
[data-theme="dark"] img {
    filter: brightness(0.8) contrast(1.1);
    transition: filter 0.3s ease;
}

/* ============================================================
   3. DER UMSCHALTER (THEME-TOGGLE)
   ============================================================ */
.theme-switch-wrapper {
    top: calc(100% - 84px);
    left: 1px;
    position: fixed !important;
    font-size: 2em;
    color: #9e9e9e;
    cursor: pointer;
    display: inline-block;
    padding: 4px 14px;
    background-color: var(--toggle-bg);
    border: 0.4px solid var(--toggle-border);
    user-select: none;
    transition: all 0.3s ease;
    z-index: 9999;
}

.theme-switch-wrapper:hover {
    color: var(--nav-accent);
    background-color: var(--toggle-bg);
}
.moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: inline; }

/* ============================================================
   4. NAVIGATION (MMENU ANPASSUNGEN)
   ============================================================ */
a, a:hover, a:focus, a:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: all 0.3s;
}

a:hover { 
    color: var(--nav-accent) !important; 
}

.mm-navbar { opacity: 1; }
.mm-navbar__title { 
    pointer-events: none;
    cursor: default;
    opacity: 0;
}

.mm-menu.mm-offcanvas { 
    display: inline; 
    background-color: var(--nav-bg-sidebar) !important;
}

/* Platz für Sidebar schaffen */
.mm-wrapper .mm-slideout { 
    margin-left: 52px;
    width: calc(100% - 52px);
}
.mm-wrapper--opened .mm-slideout { margin-left: 0px !important; }

/* Listen-Styling */
.mm-listview li::before { display: none; }
.mm-listview span::before, .mm-listview a::before {
    top: 2px;
    padding-top: 2px;
    padding-bottom: 6px;
    padding-right: 10px;
    font-size: 1.6em;
}

.mm-listview > li > a, .mm-listview > li > span { 
    color: var(--nav-text-dimmed) !important; 
}

.mm-listview > li > a:hover, .mm-listview .active { 
    color: var(--nav-accent) !important; 
}

.mm-listitem .mm-btn--next { 
    color: var(--nav-text-dimmed) !important; 
}

.mm-listitem__text { padding-left: 12px; }

/* --- BUTTON-FIX --- */
.mmbt {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 9999 !important;
    margin: 0 !important;
    transform: none !important; 
    transition: left 0.4s ease;
    height: 400px;
}

.mm-wrapper--opened .mmbt {
    left: calc(100% - 52px) !important;
    z-index: 1 !important;
}

/* --- HAMBURGER ANIMATION (Das X) --- */
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    margin: 6px 0;
    background-color: var(--nav-grey) !important;
    transition: 0.4s;
}

.mmbt:hover .bar1, .mmbt:hover .bar2, .mmbt:hover .bar3 {
    background-color: var(--nav-accent) !important;
}

/* MENU OPEN TEXT */
.mmbt .bar2::after {
    content: "MENU OPEN";
    width: 120px;
    left: 30px;
    position: absolute;
    padding-left: 26px;
    top: 9px;
    color: var(--nav-text-dimmed);
}

.mm-wrapper--opened .mmbt .bar2::after {
    opacity: 0;
}

/* Transformation zum X */
.mm-wrapper--opened .bar1 {
    background-color: var(--nav-accent) !important;
    transform: rotate(-45deg) translate(-9px, 6px);
}
.mm-wrapper--opened .bar2 {
    opacity: 0;
}
.mm-wrapper--opened .bar3 {
    background-color: var(--nav-accent) !important;
    transform: rotate(45deg) translate(-8px, -8px);
}

.mod_mmenu .active, .mod_mmenu .trail {
    background-color: var(--nav-grey) !important;
    color: var(--nav-white) !important;
}

.mm-listitem:after {
    inset-inline-start: 1px;
}

.mm-btn--prev:before, .mm-btn--next:after {
    border-color: #cccccc;
}
.mm-btn--prev {
    width: 120px;
}

.mm-btn--prev:after {
    content:"Zurück";
    position: absolute!important;
    padding-left: 28px!important;
}

.mm-wrapper__blocker{
    background-color: #000000!important;
}

[data-theme="dark"] img:not(.no-filter) {
    /* Weniger aggressiv, schont die Farben */
    filter: brightness(0.85) saturate(0.9);
    opacity: 0.9;
    transition: all 0.3s ease;
}
/* Abdunkeln von Level 1, wenn ein Submenü (Level 2) aktiv ist */
.mm-menu .mm-panel--parent[inert="true"] {
    position: relative;
    transition: filter 0.3s ease;
}

.mm-menu .mm-panel--parent[inert="true"]::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%!important;
    background-color: rgba(0, 0, 0, 0.1); /* Hier kannst du die Dunkelheit anpassen */
    z-index: 10;
    pointer-events: none;  /*Wichtig: Klicks sollen durchgehen */
}