/* Vhon – Nachtmodus. Aktiv mit <html data-theme="dark">; der Knopf kommt aus theme.js. */
.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:999px;border:1px solid var(--line,#e4e8ee);background:transparent;color:var(--ink,#0d1117);cursor:pointer;padding:0;transition:transform .15s ease,background-color .2s ease}
.theme-btn:hover{transform:translateY(-1px)}
.theme-btn:focus-visible{outline:3px solid #507CFF;outline-offset:3px}
.theme-btn svg{width:19px;height:19px;display:block}
.theme-btn .moon{display:none}
html[data-theme="dark"] .theme-btn .sun{display:none}
html[data-theme="dark"] .theme-btn .moon{display:block}
.portal-link svg{flex:0 0 18px}
@media(max-width:559px){.portal-link{width:40px;min-width:40px;padding:0!important}}
@media(max-width:374px){.nav .theme-btn,.portal-link{width:36px;min-width:36px;height:36px;min-height:36px}}
.theme-float{position:fixed;right:16px;bottom:16px;z-index:30;background:var(--card,#fff);box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
header .wrap > .theme-btn:last-child{margin-left:auto}
html.theme-anim,html.theme-anim *{transition:background-color .3s ease,border-color .3s ease,color .3s ease!important}

html[data-theme="dark"]{
  --ink:#eef1f5; --ink2:#c3cad5; --muted:#8d97a6; --line:#242b36; --bg:#0b0e13; --card:#121821; --accent:#8da2ff;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}

/* Kopfzeile */
html[data-theme="dark"] .top{background:rgba(11,14,19,.84)}

/* Flächen, die fest weiss waren */
html[data-theme="dark"] .band,html[data-theme="dark"] .chip,html[data-theme="dark"] .list li,html[data-theme="dark"] .card,
html[data-theme="dark"] .card-id,html[data-theme="dark"] .empty,html[data-theme="dark"] .vertraulich,html[data-theme="dark"] .dlg,
html[data-theme="dark"] .browser{background:var(--card)}
html[data-theme="dark"] .card-id,html[data-theme="dark"] .card,html[data-theme="dark"] .dlg{box-shadow:0 1px 2px rgba(0,0,0,.4),0 24px 48px -24px rgba(0,0,0,.7)}
html[data-theme="dark"] input{background:#0d121a;color:var(--ink)}
html[data-theme="dark"] .btn-ghost{background:transparent;color:var(--ink)}
html[data-theme="dark"] .ico{background:rgba(141,162,255,.12)}
html[data-theme="dark"] .grid > a,html[data-theme="dark"] .media{background:#18202b}

/* Knöpfe/Kreise mit var(--ink) als Hintergrund: Text muss dunkel werden */
html[data-theme="dark"] .btn-dark,html[data-theme="dark"] .step::before,html[data-theme="dark"] .tile .n{color:#0d1117}
html[data-theme="dark"] .btn-dark{box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
html[data-theme="dark"] .step .free{background:rgba(22,163,106,.16);color:#5fd6a0}
html[data-theme="dark"] .list svg{color:#4fd197}
html[data-theme="dark"] mark.todo{background:#3a2f0a;color:#ffd970}

/* Grosser Abschluss-Block bleibt dunkel, aber vom Hintergrund abgesetzt */
html[data-theme="dark"] .cta{background:#141b27;color:#fff;border:1px solid var(--line)}
html[data-theme="dark"] .cta .btn-light{background:#fff;color:#0d1117}

/* Avatar-Ring (Über mich) */
html[data-theme="dark"] .avatar::after,html[data-theme="dark"] .ig-bar .av span{background:#0d1117}

/* Handy-Attrappen: Gehäuse dunkel, Bildschirm bleibt eine helle Kundenseite */
html[data-theme="dark"] .phone{background:#05070a;box-shadow:0 0 0 1px #2a313c,0 30px 60px -20px rgba(0,0,0,.8)}
html[data-theme="dark"] .screen{--ink:#0d1117;--ink2:#2a313c;--muted:#5b6573;--line:#e4e8ee;--accent:#3d5cff;--card:#fff;color:#0d1117}
html[data-theme="dark"] .m-go{background:#0d1117;color:#fff}
html[data-theme="dark"] .browser .bar{background:#18202b}
html[data-theme="dark"] .browser .bar i{background:#2c3542}
html[data-theme="dark"] .sk{background:#1d2531}
html[data-theme="dark"] .sk.big{background:linear-gradient(135deg,#1c2440,#14302a)}

/* Kundenportal: Video-Rahmen */
html[data-theme="dark"] .player{background:#000}

/* 404 */
html[data-theme="dark"] body > .box p{color:var(--ink2)}
html[data-theme="dark"] body > .box a{background:#eef1f5;color:#0d1117}

/* Handy-Menü mit mehr Einträgen: seitlich wischbar */
.subnav{overflow-x:auto;justify-content:safe center;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:16px!important;padding-left:12px!important;padding-right:12px!important;font-size:.88rem!important}
.subnav::-webkit-scrollbar{display:none}
.subnav a{white-space:nowrap;flex:0 0 auto}
/* Mittlere Breiten (Tablet): Menüpunkte in die zweite Zeile statt Überlauf */
@media(min-width:760px) and (max-width:1099px){.nav .hide-s{display:none!important}.subnav{display:flex!important}section[id]{scroll-margin-top:112px}}
.nav a:not(.btn){white-space:nowrap}
@media(max-width:400px){.subnav{gap:13px!important;font-size:.85rem!important}}