/* JBC Dark Mode – zentral, automatisch (OS) + Umschalter. v3 */
html{color-scheme:light dark}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){ --white:#0F1621; --paper:#151E29; --ink:#EAEFF4; --line:#2A3644; --navy:#EAEFF4; --steel:#BAC6D2; --grey:#A6B2BE; --accent-deep:#F0C64A; --anthracite:#0B1017; }
:root:not([data-theme="light"]) body{background:var(--white);color:var(--ink)}
:root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .ucard,:root:not([data-theme="light"]) .modcard,:root:not([data-theme="light"]) .faq details,:root:not([data-theme="light"]) .cform,:root:not([data-theme="light"]) form.cf,:root:not([data-theme="light"]) .faqq,:root:not([data-theme="light"]) .eeat,:root:not([data-theme="light"]) .chartbox,:root:not([data-theme="light"]) .rg-card,:root:not([data-theme="light"]) .svc,:root:not([data-theme="light"]) .ort details,:root:not([data-theme="light"]) .wizcard,:root:not([data-theme="light"]) .opt{background:#141D28}
:root:not([data-theme="light"]) .keybox{background:linear-gradient(180deg,#151E2A,#121A24)}
:root:not([data-theme="light"]) .partner{background:#0F1621}
:root:not([data-theme="light"]) .card:hover,:root:not([data-theme="light"]) .modcard:hover,:root:not([data-theme="light"]) .svc:hover,:root:not([data-theme="light"]) .rg-card:hover{border-color:#3A4A59}
:root:not([data-theme="light"]) .card .cic,:root:not([data-theme="light"]) .oneband .ck,:root:not([data-theme="light"]) .krow .kic,:root:not([data-theme="light"]) .vitem .vc,:root:not([data-theme="light"]) .svc .svc-ic,:root:not([data-theme="light"]) .opt .oic,:root:not([data-theme="light"]) .eeat-badge{background:#22344A}
:root:not([data-theme="light"]) .eeat-badge{color:var(--accent)}
:root:not([data-theme="light"]) table.rtab thead th{background:#16283A}
:root:not([data-theme="light"]) .step .no{background:#141D28}
:root:not([data-theme="light"]) .ablauf,:root:not([data-theme="light"]) .contact,:root:not([data-theme="light"]) .genhero{background:#0C1723}
:root:not([data-theme="light"]) .rbox{background:#16283A}
:root:not([data-theme="light"]) .btn-accent{color:#14263A}
:root:not([data-theme="light"]) .skip-link{color:#14263A}
:root:not([data-theme="light"]) .plogo,:root:not([data-theme="light"]) .brand{background:#fff}
:root:not([data-theme="light"]) .brand b{color:#1E364A}
:root:not([data-theme="light"]) .brand span{color:#5C6773}
:root:not([data-theme="light"]) .cform input,:root:not([data-theme="light"]) .cform select,:root:not([data-theme="light"]) .cform textarea,:root:not([data-theme="light"]) form.cf input,:root:not([data-theme="light"]) form.cf select,:root:not([data-theme="light"]) form.cf textarea,:root:not([data-theme="light"]) .wform input,:root:not([data-theme="light"]) .wform textarea{background:#0F1621;color:var(--ink);border-color:#2C3745}
:root:not([data-theme="light"]) .opt.sel{background:#26260F}
:root:not([data-theme="light"]) .form-status.ok{background:#12321C;color:#BFF0CC;border-color:#1F5233}
:root:not([data-theme="light"]) .form-status.err,:root:not([data-theme="light"]) .wizerr{background:#3A1618;color:#F6CCCC;border-color:#6A2530}
:root:not([data-theme="light"]) .note{background:#2A2410;color:#E7D9A6;border-bottom-color:#4A3F18}
:root:not([data-theme="light"]) header.stuck{background:rgba(8,14,20,.85);border-bottom-color:rgba(255,255,255,.08)}
:root:not([data-theme="light"]) .gitem{background:#1A222C}
}
:root[data-theme="dark"]{ --white:#0F1621; --paper:#151E29; --ink:#EAEFF4; --line:#2A3644; --navy:#EAEFF4; --steel:#BAC6D2; --grey:#A6B2BE; --accent-deep:#F0C64A; --anthracite:#0B1017; }
:root[data-theme="dark"] body{background:var(--white);color:var(--ink)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .ucard,:root[data-theme="dark"] .modcard,:root[data-theme="dark"] .faq details,:root[data-theme="dark"] .cform,:root[data-theme="dark"] form.cf,:root[data-theme="dark"] .faqq,:root[data-theme="dark"] .eeat,:root[data-theme="dark"] .chartbox,:root[data-theme="dark"] .rg-card,:root[data-theme="dark"] .svc,:root[data-theme="dark"] .ort details,:root[data-theme="dark"] .wizcard,:root[data-theme="dark"] .opt{background:#141D28}
:root[data-theme="dark"] .keybox{background:linear-gradient(180deg,#151E2A,#121A24)}
:root[data-theme="dark"] .partner{background:#0F1621}
:root[data-theme="dark"] .card:hover,:root[data-theme="dark"] .modcard:hover,:root[data-theme="dark"] .svc:hover,:root[data-theme="dark"] .rg-card:hover{border-color:#3A4A59}
:root[data-theme="dark"] .card .cic,:root[data-theme="dark"] .oneband .ck,:root[data-theme="dark"] .krow .kic,:root[data-theme="dark"] .vitem .vc,:root[data-theme="dark"] .svc .svc-ic,:root[data-theme="dark"] .opt .oic,:root[data-theme="dark"] .eeat-badge{background:#22344A}
:root[data-theme="dark"] .eeat-badge{color:var(--accent)}
:root[data-theme="dark"] table.rtab thead th{background:#16283A}
:root[data-theme="dark"] .step .no{background:#141D28}
:root[data-theme="dark"] .ablauf,:root[data-theme="dark"] .contact,:root[data-theme="dark"] .genhero{background:#0C1723}
:root[data-theme="dark"] .rbox{background:#16283A}
:root[data-theme="dark"] .btn-accent{color:#14263A}
:root[data-theme="dark"] .skip-link{color:#14263A}
:root[data-theme="dark"] .plogo,:root[data-theme="dark"] .brand{background:#fff}
:root[data-theme="dark"] .brand b{color:#1E364A}
:root[data-theme="dark"] .brand span{color:#5C6773}
:root[data-theme="dark"] .cform input,:root[data-theme="dark"] .cform select,:root[data-theme="dark"] .cform textarea,:root[data-theme="dark"] form.cf input,:root[data-theme="dark"] form.cf select,:root[data-theme="dark"] form.cf textarea,:root[data-theme="dark"] .wform input,:root[data-theme="dark"] .wform textarea{background:#0F1621;color:var(--ink);border-color:#2C3745}
:root[data-theme="dark"] .opt.sel{background:#26260F}
:root[data-theme="dark"] .form-status.ok{background:#12321C;color:#BFF0CC;border-color:#1F5233}
:root[data-theme="dark"] .form-status.err,:root[data-theme="dark"] .wizerr{background:#3A1618;color:#F6CCCC;border-color:#6A2530}
:root[data-theme="dark"] .note{background:#2A2410;color:#E7D9A6;border-bottom-color:#4A3F18}
:root[data-theme="dark"] header.stuck{background:rgba(8,14,20,.85);border-bottom-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .gitem{background:#1A222C}

/* Mobile Header/Menue im Dark-Mode: mobile.css nutzt background:var(--navy)!important -> im Dark hell. Fix: */
@media (max-width:900px){ :root[data-theme="dark"] header, :root[data-theme="dark"] header nav{background:#16283A !important} }
@media (max-width:900px) and (prefers-color-scheme:dark){ :root:not([data-theme="light"]) header, :root:not([data-theme="light"]) header nav{background:#16283A !important} }

#themeToggle{position:fixed;right:18px;bottom:18px;z-index:9999;display:inline-flex;align-items:center;gap:8px;background:#FFD024;color:#14263A;border:none;border-radius:999px;padding:11px 16px;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 10px 26px -8px rgba(0,0,0,.5)}
#themeToggle:hover{background:#E6B500}
#themeToggle svg{width:18px;height:18px;stroke:#14263A;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){#themeToggle .tlabel{display:none}#themeToggle{padding:12px;border-radius:50%}}