/* Hell- und Dunkelmodus (Stand 01.11.2026). Schaltet nur die Farben um, Aufbau bleibt gleich. */
:root{--kf-fest:#c67139;--kt-fest:#8c491a;--kf-buehne:#8a3b5a;--kt-buehne:#8a3b5a;--kf-wissen:#56633f;--kt-wissen:#56633f;--kf-familie:#a67c12;--kt-familie:#7a5a0a;--kf-sport:#2f6f7a;--kt-sport:#2f6f7a;--kf-x:#a19786;--kt-x:#645c50}
:root[data-theme="dark"]{
  color-scheme:dark;
  --color-bg:#1a1613;--color-surface:#262019;--color-text:#efe6d8;
  --color-accent:#d27a40;--color-accent-2:#8fa073;
  --color-divider:color-mix(in srgb,#efe6d8 16%,transparent);
  --color-neutral-100:#25201a;--color-neutral-200:#2e2822;--color-neutral-300:#40372d;--color-neutral-400:#5a4f42;--color-neutral-500:#8a7f6f;--color-neutral-600:#a99f8e;--color-neutral-700:#c4baa8;--color-neutral-800:#ddd3c2;--color-neutral-900:#f1e9db;
  --color-accent-100:#35221a;--color-accent-200:#4a2c1c;--color-accent-300:#6b3f23;--color-accent-400:#e08a55;--color-accent-500:#e0925f;--color-accent-600:#eea272;--color-accent-700:#f4b690;--color-accent-800:#fad0b4;--color-accent-900:#ffe6d6;
  --color-accent-2-100:#273020;--color-accent-2-200:#33402a;--color-accent-2-300:#4a5a38;--color-accent-2-400:#6b7d52;--color-accent-2-500:#8a9c6e;--color-accent-2-600:#a3b588;--color-accent-2-700:#bccda2;--color-accent-2-800:#d3e2bb;--color-accent-2-900:#e6f2d4;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 3px 10px rgba(0,0,0,.5);--shadow-lg:0 12px 32px rgba(0,0,0,.6);
  --kf-fest:#e0925f;--kt-fest:#f0a878;--kf-buehne:#d489a6;--kt-buehne:#e8a6bf;--kf-wissen:#a3b588;--kt-wissen:#bccda2;--kf-familie:#e3a92b;--kt-familie:#f0c25a;--kf-sport:#5fb0be;--kt-sport:#86cbd6;--kf-x:#8a7f6f;--kt-x:#c4baa8;
}
/* Fest eingestellte Farben in den Seiten */
:root[data-theme="dark"] .vb-hero-ov{background:linear-gradient(90deg,rgba(26,22,19,.88) 0%,rgba(26,22,19,.6) 45%,rgba(26,22,19,.1) 100%)!important}
:root[data-theme="dark"] .vb-k-intro{color:#efe6d8!important;text-shadow:0 0 8px rgba(26,22,19,.95),0 0 16px rgba(26,22,19,.9)!important}
:root[data-theme="dark"] img{filter:brightness(.92)}
:root[data-theme="dark"] .vbk-logo img{filter:none}
:root[data-theme="dark"] a{color:var(--color-accent-600)}
:root[data-theme="dark"] .vbk-brand,:root[data-theme="dark"] .vbk-nav a{color:var(--color-neutral-800)}
:root[data-theme="dark"] .vbk-nav a:hover,:root[data-theme="dark"] .vbk-nav a[aria-current]{color:var(--color-accent-800)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--color-neutral-100);color:var(--color-text)}
/* Umschalter */
.vb-thema{position:fixed;left:clamp(10px,2vw,20px);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40;width:44px;height:44px;border-radius:999px;border:1px solid var(--color-divider);background:var(--color-neutral-100);color:var(--color-neutral-900);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md);padding:0}
.vb-thema:hover{background:var(--color-accent-200)}
.vb-thema svg{width:22px;height:22px}
.vb-thema .sonne{display:none}
:root[data-theme="dark"] .vb-thema .mond{display:none}
:root[data-theme="dark"] .vb-thema .sonne{display:block}
/* Orange Knöpfe im Dunkelmodus: hellere Fläche, dunkle Schrift (gut lesbar) */
:root[data-theme="dark"]{--color-accent:#e8a070}
:root[data-theme="dark"] [style*="background:var(--color-accent)"],:root[data-theme="dark"] [style*="background: var(--color-accent);"],:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .vbk-ko,:root[data-theme="dark"] a.knopf,:root[data-theme="dark"] .knopf,:root[data-theme="dark"] .aktiv{color:#2a1608!important}
:root[data-theme="dark"] [style*="background:var(--color-accent)"] *,:root[data-theme="dark"] [style*="background: var(--color-accent);"] *{color:inherit!important}
/* Auswahl "Worum geht es?" im Kontaktformular */
:root[data-theme="dark"] #kontakt button[aria-pressed]{box-shadow:inset 0 0 0 1.5px #a3b588}
:root[data-theme="dark"] #kontakt button[aria-pressed="false"]{background:#46553a!important;color:#f3ecdf!important}
:root[data-theme="dark"] #kontakt button[aria-pressed="false"]:hover{background:#566847!important}
:root[data-theme="dark"] #kontakt button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #fff8f2}
/* Knopf "Termin melden" im Kasten "Dein Termin fehlt?" (Termine-Seite) */
:root[data-theme="dark"] [style*="background:var(--color-accent-2-800)"]{color:#1f2616!important}
:root[data-theme="dark"] a[href$="#termin-melden"]{color:#1f2616!important}
/* Helle Zweitknöpfe (z. B. "Link kopieren") */
:root[data-theme="dark"] .knopf.hell{background:#4a2c1c!important;color:#fad0b4!important}
/* Zeitraum-Auswahl (30 Tage, 3 Monate, Jahr, Alles): aktiver Knopf gut sichtbar */
:root[data-theme="dark"] .vb-span[aria-pressed="true"]{background:#e8a070!important;color:#2a1608!important;font-weight:700!important}