/* ==========================================================================
   Sprach- (DE/TR) und Theme-Toggle (Hell/Dunkel)
   Nach style.css bzw. admin-modern.css einbinden, damit die Regeln greifen.

   WICHTIG: Beide Seiten sind standardmäßig dunkel (style.css: --bg:#0a0f0d…,
   admin-modern.css: fest dunkel). "Hell" ist deshalb überall der Override,
   nicht "Dunkel" — der Toggle startet ohne gespeicherte Wahl immer im
   bestehenden Dunkelmodus, damit sich für heutige Besucher nichts ändert.
   ========================================================================== */

/* Für data-shown-by in lang-theme-toggle.js: blendet Optionen aus, die ohne
   eine andere Auswahl (z.B. "Leuchteffekt aktivieren") keinen Sinn ergeben. */
.mv-cond-hidden { display: none !important; }

/* ==========================================================================
   Floating Action Button (Sprache/Hell-Dunkel/Automatik)
   Liegt fix über der ganzen Seite statt oben im Menü, damit die Umschalter
   auf jeder Seite gleich erreichbar sind, unabhängig vom Scroll-Stand.
   ========================================================================== */
.mv-fab-wrap {
    position: fixed;
    right: 18px;
    bottom: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.mv-fab-trigger {
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: none;
    background: #00a473;
    color: #001912;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform .15s ease, background .15s ease;
}
.mv-fab-trigger:hover { background: #00fcb1; }
.mv-fab-trigger:active { transform: scale(0.94); }
html[data-theme="light"] .mv-fab-trigger { background: #00a473; color: #ffffff; }
html[data-theme="light"] .mv-fab-trigger:hover { background: #00875f; }

.mv-fab-wrap .mv-toggles {
    order: -1;
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.mv-fab-wrap.open .mv-toggles {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

@media (max-width: 600px) {
    .mv-fab-wrap { right: 14px; bottom: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

.mv-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(0, 252, 177, 0.1);
    border: 1px solid rgba(0, 252, 177, 0.3);
}

.mv-toggles button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: 0.55;
    transition: opacity .15s ease, background .15s ease, transform .1s ease;
}

.mv-toggles button:hover { opacity: 0.85; }
.mv-toggles button:active { transform: scale(0.93); }

.mv-toggles button[data-lang-btn].active {
    opacity: 1;
    background: #17221d;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Sprachumschaltung: keine Flaggen mehr, sondern grüne DE/TR-Kürzel — und
   zwar wird jeweils nur die NICHT aktive Sprache angezeigt (Klick = Wechsel
   in diese Sprache). Der Button der aktuell aktiven Sprache bleibt daher
   ausgeblendet, statt hervorgehoben zu werden. */
.mv-toggles button[data-lang-btn] {
    width: auto;
    min-width: 30px;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #00fcb1;
    opacity: 1;
    background: transparent;
}
.mv-toggles button[data-lang-btn]:hover {
    opacity: 0.8;
    background: rgba(0, 252, 177, 0.12);
}
.mv-toggles button[data-lang-btn].active {
    display: none;
    box-shadow: none;
}
html[data-theme="light"] .mv-toggles button[data-lang-btn] { color: #00875f; }
html[data-theme="light"] .mv-toggles button[data-lang-btn]:hover { background: rgba(0, 164, 115, 0.12); }

.mv-toggles .mv-toggle-sep {
    width: 1px;
    height: 18px;
    background: rgba(0, 252, 177, 0.3);
    margin: 0 2px;
}

/* Hell/Dunkel-Umschalter: grüne SVG-Sonne/-Halbmond statt Emoji */
.mv-toggles button[data-theme-btn] { opacity: 1; color: #00fcb1; }
.mv-toggles button[data-theme-btn] svg { display: block; }
.mv-toggles button[data-theme-btn] .icon-moon { display: none; }
html[data-theme="dark"] .mv-toggles button[data-theme-btn] .icon-sun { display: none; }
html[data-theme="dark"] .mv-toggles button[data-theme-btn] .icon-moon { display: block; }

/* Helle Variante des Widgets selbst (Kontrast auf hellem Grund) */
html[data-theme="light"] .mv-toggles {
    background: rgba(0, 164, 115, 0.08);
    border-color: rgba(0, 164, 115, 0.25);
}
html[data-theme="light"] .mv-toggles button[data-lang-btn].active {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .mv-toggles button[data-theme-btn] { color: #00875f; }

/* ==========================================================================
   Hellmodus — Startseite (index.html)
   style.css baut fast alles auf CSS-Variablen auf, daher reicht es, die
   Variablen für den hellen Zustand neu zu setzen statt einzelne Klassen
   zu überschreiben. Deutlich robuster als feste Farben pro Klasse.
   ========================================================================== */

html[data-theme="light"] {
    --bg: #f6f8f6;
    --bg-2: #eef1ee;
    --panel: #ffffff;
    --panel-2: #f5f7f5;
    --border: #e1e6e2;
    --text: #17211b;
    --muted: #57685f;
    --muted-2: #67746d;
    --primary: #00a473;
    --glow: #00805a;
}

/* Das Hintergrund-Glow-Overlay (body::before) ist im Dunkelmodus subtil,
   im Hellmodus reicht ein noch dezenterer Abklatsch, sonst wirkt die
   Seite fleckig. */
html[data-theme="light"] body::before { opacity: 0.5; }

/* Primär-Button: im Dunkelmodus ist der Text auf --glow bewusst sehr
   dunkel (#001912), das funktioniert nur, weil --glow dort sehr hell ist.
   Im Hellmodus ist --glow bewusst dunkler (Lesbarkeit als Fließtext/Icon),
   deshalb hier auf weiße Schrift umstellen, sonst zu wenig Kontrast. */
html[data-theme="light"] .btn-primary { color: #ffffff; }

/* Menüleiste ganz oben: der halbtransparente Hintergrund war fest auf den
   dunklen Farbwert gesetzt (rgba auf Basis von --bg dunkel) und wechselte
   dadurch nicht mit dem Theme. Hier auf einen hellen, halbtransparenten
   Hintergrund umstellen; Rand und Linktexte hängen bereits an --border/
   --muted/--text und wechseln automatisch mit. */
html[data-theme="light"] .nav {
    background: rgba(246, 248, 246, 0.86);
}

/* Handy-Mockup (.device-screen) und Theme-Vorschaukärtchen (.theme-preview)
   hatten einen fest verdrahteten dunklen Bildschirm-Hintergrund (Hex-Werte
   statt Variablen) und blieben deshalb im Hellmodus dunkel. Jetzt auf einen
   hellen Screen-Hintergrund umgestellt; Uhrzeit, Labels und Punkte hängen
   bereits an var(--glow)/var(--text)/var(--muted) und wechseln automatisch. */
html[data-theme="light"] .device-screen {
    background: radial-gradient(120% 140% at 15% 0%, #ffffff 0%, #f3f6f4 100%);
    border-color: var(--border);
}
html[data-theme="light"] .device-card {
    background: rgba(0, 0, 0, 0.035);
}
/* Aktive Zeitkachel: Text war fest auf sehr dunkles Grün (#001912) gesetzt,
   was nur zum hellen --glow im Dunkelmodus passt. Im Hellmodus ist --glow
   selbst schon dunkel, deshalb hier auf weiße Schrift umstellen (WCAG-
   Kontrast gegen den dunkelgrünen Kachel-Hintergrund). */
html[data-theme="light"] .device-card.active .dl,
html[data-theme="light"] .device-card.active .dt {
    color: #ffffff;
}
html[data-theme="light"] .theme-preview {
    background: #ffffff;
}

/* ==========================================================================
   Hellmodus — Admin-Bereich (admin-modern.css ist standardmäßig dunkel)
   ========================================================================== */

/* Grundlegender Fix: admin-modern.css baut fast alle Komponenten (Checkbox-/
   Radio-Auswahlkästen .theme-choice, Farbfelder .color-input, Regler,
   aufklappbare Unterkarten .mv-subcard, Tabellen, Autocomplete-Ergebnisse
   usw.) auf den --mv-*-Variablen auf. Werden nur einzelne Klassen wie
   .card oder input[type=text] überschrieben (wie es hier vorher der Fall
   war), bleiben alle anderen Komponenten weiterhin dunkel-auf-dunkel und
   damit unlesbar. Die Variablen selbst umzudefinieren behebt das für ALLE
   Komponenten auf einmal, auch neu hinzukommende. */
html[data-theme="light"] {
    --mv-bg: #f6f7f5;
    --mv-bg-2: #eef1ee;
    --mv-panel: #ffffff;
    --mv-panel-2: #f5f7f5;
    --mv-border: #dbe1dc;
    --mv-border-soft: #eef1ee;
    --mv-text: #16201b;
    --mv-muted: #5b6a61;
    /* Fehlten bisher komplett im Hellmodus, wodurch alles, was direkt auf
       --mv-glow/--mv-danger aufbaut (Aufklapp-Pfeil, ausgewählte
       .theme-choice-Labels wie "Dauerhaft anzeigen", Hover-Farben) im
       hellen Neongrün der dunklen Variante hängen blieb und auf hellem
       Grund kaum lesbar war. */
    --mv-primary: #00a473;
    --mv-glow: #00875f;
    --mv-danger: #c72f4a;
    --mv-warn: #a35b00;
    /* Theme-Vorschaukärtchen: heller "Bildschirm" statt fix dunkel. */
    --mv-theme-preview-bg: #ffffff;
    --mv-theme-preview-ink: #16201b;
    --mv-theme-preview-accent: #00875f;
}

html[data-theme="light"] body {
    background: #f6f7f5 !important;
    color: #16201b !important;
}
html[data-theme="light"] body::before { content: none !important; }

html[data-theme="light"] .topnav {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: #e2e7e3 !important;
}
html[data-theme="light"] .nav-links a:not(.icon-link),
html[data-theme="light"] .nav-links .link-muted,
html[data-theme="light"] .link-muted,
html[data-theme="light"] .section-sub {
    color: #5b6a61 !important;
}

html[data-theme="light"] .hero h1 {
    background: linear-gradient(90deg, #00a473, #007a56);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .hero p { color: #5b6a61 !important; }

html[data-theme="light"] .card,
html[data-theme="light"] details.card,
html[data-theme="light"] .mv-subcard,
html[data-theme="light"] .mv-tabs {
    background: #ffffff !important;
    border-color: #e2e7e3 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .section-title { color: #16201b !important; }

html[data-theme="light"] label { color: #16201b !important; }

html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #f6f7f5 !important;
    border-color: #dbe1dc !important;
    color: #16201b !important;
}
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"] {
    color-scheme: light;
}

html[data-theme="light"] select option {
    color: #16201b;
    background: #ffffff;
}

html[data-theme="light"] .mv-ac-results {
    background: #ffffff !important;
    border-color: #e2e7e3 !important;
}
html[data-theme="light"] .mv-ac-item { border-bottom-color: #eef1ee !important; }
html[data-theme="light"] .mv-ac-item:hover,
html[data-theme="light"] .mv-ac-item.active { background: rgba(0, 164, 115, 0.1) !important; }
html[data-theme="light"] .mv-ac-empty { color: #5b6a61 !important; }

html[data-theme="light"] .btn-secondary {
    background: #f0f2f0 !important;
    color: #16201b !important;
    border-color: #dbe1dc !important;
}

/* .btn-danger (u.a. "Löschen" bei Logo/Ankündigung) nutzt in admin-modern.css
   fest verdrahtete helle Textfarben (#ffc7cd auf blass-rotem Grund), die nur
   auf dunklem Hintergrund lesbar sind - hier für Hell überschreiben. */
html[data-theme="light"] .btn-danger {
    background: rgba(199, 47, 74, 0.1) !important;
    color: #9c1f38 !important;
    border-color: rgba(199, 47, 74, 0.35) !important;
}
html[data-theme="light"] .btn-danger:hover { background: rgba(199, 47, 74, 0.18) !important; }

/* Gleiches Problem bei Erfolgs-/Fehlermeldungen und Badges: helle Textfarben
   (#baffe4 / #ffc7cd), die im Hellmodus auf dem jeweils blassen Grund kaum
   noch Kontrast haben. */
html[data-theme="light"] .alert-success { color: #00593f !important; border-color: rgba(0, 164, 115, 0.35) !important; }
html[data-theme="light"] .alert-error { color: #9c1f38 !important; border-color: rgba(199, 47, 74, 0.35) !important; }
html[data-theme="light"] .badge-approved { color: #00593f !important; }
html[data-theme="light"] .mv-ac-current { color: #00593f !important; }

html[data-theme="light"] table { color: #16201b; }
html[data-theme="light"] th { color: #5b6a61 !important; }
html[data-theme="light"] th, html[data-theme="light"] td { border-bottom-color: #eef1ee !important; }
html[data-theme="light"] tr:hover td { background: rgba(0, 0, 0, 0.02) !important; }

html[data-theme="light"] .mv-preview-box { background: #f6f7f5 !important; border-color: #dbe1dc !important; }

/* ==========================================================================
   Bessere Sichtbarkeit von Menü/Menüpunkten in beiden Modi
   (Topnav-Links im Admin/Superadmin/Dashboard, Startseiten-Nav, Tab-Leiste).
   Vorher zu blass/kontrastarm auf dem jeweiligen Hintergrund.
   ========================================================================== */
.topnav .nav-links a:not(.icon-link),
.nav-links .navlink,
.nav-links a:not(.icon-link) {
    font-weight: 700;
}

html[data-theme="dark"] .topnav .nav-links a:not(.icon-link),
html[data-theme="dark"] .nav-links .navlink,
html[data-theme="dark"] .mv-tab-btn {
    color: #cfe3da;
}
html[data-theme="dark"] .topnav .nav-links a:not(.icon-link):hover,
html[data-theme="dark"] .nav-links .navlink:hover {
    color: #00fcb1;
}

html[data-theme="light"] .topnav .nav-links a:not(.icon-link),
html[data-theme="light"] .nav-links .navlink {
    color: #24352c !important;
}
html[data-theme="light"] .topnav .nav-links a:not(.icon-link):hover,
html[data-theme="light"] .nav-links .navlink:hover {
    color: #00a473 !important;
}
html[data-theme="light"] .mv-tab-btn { color: #46584e !important; }
html[data-theme="light"] .mv-tab-btn:hover { color: #16201b !important; background: #eef1ee !important; }
html[data-theme="light"] .mv-tab-btn.active { color: #001912 !important; }