/* ---------------------------------------------------------- TUERKIS (hell, Standard) */
:root[data-skin="tuerkis"]{
  --bg:#ffffff; --bg-soft:#f4f7f7; --surface:#ffffff; --fg:#111a1c; --muted:#5c6b6e;
  --line:#dde5e5; --accent:#0d7a72; --accent-ink:#0a5b55; --accent-soft:#e3f1ef; --warm:#c2683a;
  --font-ui:"Manrope","Segoe UI",system-ui,sans-serif;
  --font-text:"Source Serif 4",Georgia,serif; --r:14px;
  color-scheme:light;
}
:root[data-skin="tuerkis"] body{background-image:none;text-shadow:none}

/* Vier alternative Gewaender. Jede Variante ueberschreibt nur Tokens plus wenige Detailregeln. */

/* ---------------------------------------------------------- BUNT */
:root[data-skin="bunt"]{
  --bg:#ffffff; --bg-soft:#f6f2ff; --surface:#ffffff; --fg:#19122b; --muted:#6a5f85;
  --line:#e4daf7; --accent:#d6006e; --accent-ink:#a80057; --accent-soft:#ffe6f2; --warm:#f5a300;
  --font-ui:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-text:"Source Serif 4",Georgia,serif; --r:18px;
}
@media (prefers-color-scheme:dark){:root[data-skin="bunt"]:not([data-theme="light"]){
  --bg:#14101f; --bg-soft:#1c1630; --surface:#1c1630; --fg:#f2ecff; --muted:#aa9ec7;
  --line:#2f2749; --accent:#ff5fae; --accent-ink:#ff9ccd; --accent-soft:#3a1430; color-scheme:dark;}}
:root[data-skin="bunt"][data-theme="dark"]{
  --bg:#14101f; --bg-soft:#1c1630; --surface:#1c1630; --fg:#f2ecff; --muted:#aa9ec7;
  --line:#2f2749; --accent:#ff5fae; --accent-ink:#ff9ccd; --accent-soft:#3a1430; color-scheme:dark;}
:root[data-skin="bunt"] .hero{background:linear-gradient(135deg,#ffe6f2 0%,#e6f0ff 50%,#fff4d6 100%)}
@media (prefers-color-scheme:dark){:root[data-skin="bunt"]:not([data-theme="light"]) .hero{
  background:linear-gradient(135deg,#3a1430 0%,#15213f 50%,#3a2d10 100%)}}
:root[data-skin="bunt"][data-theme="dark"] .hero{
  background:linear-gradient(135deg,#3a1430 0%,#15213f 50%,#3a2d10 100%)}
:root[data-skin="bunt"] .grid .card:nth-child(3n+1){border-color:#d6006e}
:root[data-skin="bunt"] .grid .card:nth-child(3n+2){border-color:#1b9df0}
:root[data-skin="bunt"] .grid .card:nth-child(3n+3){border-color:#f5a300}
:root[data-skin="bunt"] .grid .card:nth-child(3n+1) .num{color:#d6006e}
:root[data-skin="bunt"] .grid .card:nth-child(3n+2) .num{color:#1b9df0}
:root[data-skin="bunt"] .grid .card:nth-child(3n+3) .num{color:#f5a300}
:root[data-skin="bunt"] .branch>summary .step{background:#1b9df0;color:#fff}
:root[data-skin="bunt"] .chip{border-width:2px}

/* ---------------------------------------------------------- SKYNET */
:root[data-skin="skynet"]{
  --bg:#07080a; --bg-soft:#0d1013; --surface:#0f1317; --fg:#dfe6ea; --muted:#7d8a93;
  --line:#1e262c; --accent:#ff2e2e; --accent-ink:#ff6b6b; --accent-soft:#2a0d0f; --warm:#ff8a3d;
  --font-ui:"Chakra Petch","Segoe UI",system-ui,sans-serif;
  --font-text:"Chakra Petch","Segoe UI",system-ui,sans-serif; --r:2px;
  color-scheme:dark;
}
:root[data-skin="skynet"] body{
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;background-position:-1px -1px}
:root[data-skin="skynet"] .site-head,:root[data-skin="skynet"] .hero,
:root[data-skin="skynet"] .site-foot{background:rgba(7,8,10,.92)}
:root[data-skin="skynet"] h1,:root[data-skin="skynet"] h2,:root[data-skin="skynet"] h3{
  text-transform:uppercase;letter-spacing:.02em;font-weight:700}
:root[data-skin="skynet"] h1{font-size:clamp(1.7rem,1.1rem+2.4vw,2.8rem)}
:root[data-skin="skynet"] .eyebrow{color:var(--accent);letter-spacing:.3em}
:root[data-skin="skynet"] .card,:root[data-skin="skynet"] .branch,
:root[data-skin="skynet"] details.faq{background:rgba(15,19,23,.85)}
:root[data-skin="skynet"] .brand .dot{background:var(--accent);color:#07080a;border-radius:2px}
:root[data-skin="skynet"] nav.main a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
:root[data-skin="skynet"] .tag,:root[data-skin="skynet"] td .ft{border:1px solid var(--accent);color:var(--accent);background:transparent}

/* ---------------------------------------------------------- FALLOUT */
:root[data-skin="fallout"]{
  --bg:#0a1109; --bg-soft:#0e180c; --surface:#0e180c; --fg:#7dff8a; --muted:#4f9a56;
  --line:#1d3a1c; --accent:#ffb641; --accent-ink:#ffcd77; --accent-soft:#2a1f08; --warm:#ff7a2f;
  --font-ui:"Share Tech Mono",ui-monospace,"Courier New",monospace;
  --font-text:"Share Tech Mono",ui-monospace,"Courier New",monospace; --r:0px;
  color-scheme:dark;
}
:root[data-skin="fallout"] body{
  background-image:repeating-linear-gradient(to bottom,rgba(125,255,138,.05) 0 1px,transparent 1px 3px);
  text-shadow:0 0 6px rgba(125,255,138,.25)}
:root[data-skin="fallout"] h1,:root[data-skin="fallout"] h2,:root[data-skin="fallout"] h3{
  font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 0 10px rgba(255,182,65,.35)}
:root[data-skin="fallout"] h1{font-size:clamp(1.6rem,1.1rem+2.2vw,2.6rem)}
:root[data-skin="fallout"] .card,:root[data-skin="fallout"] .branch,
:root[data-skin="fallout"] details.faq,:root[data-skin="fallout"] .table-scroll{
  border-color:var(--line);background:rgba(14,24,12,.8)}
:root[data-skin="fallout"] .eyebrow{color:var(--accent)}
:root[data-skin="fallout"] .brand .dot{background:var(--accent);color:#0a1109;border-radius:0}
:root[data-skin="fallout"] nav.main a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
:root[data-skin="fallout"] .lede,:root[data-skin="fallout"] p{max-width:44rem}
:root[data-skin="fallout"] .site-head{border-bottom:2px solid var(--line)}

/* ---------------------------------------------------------- Klappschalter im Kopf */
#skinpick{position:relative;margin-left:.6rem;flex:none}
#skinpick-btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.8rem;
  font-weight:600;cursor:pointer;padding:.32rem .6rem;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);line-height:1}
#skinpick-btn:hover{color:var(--fg);border-color:var(--accent)}
#skinpick-btn[aria-expanded="true"]{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
#skinpick-btn .car{font-size:.7em;opacity:.8}
#skinpick-menu{position:absolute;right:0;top:calc(100% + .4rem);z-index:20;min-width:9.5rem;
  display:flex;flex-direction:column;gap:.1rem;padding:.3rem;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);box-shadow:0 10px 28px rgba(0,0,0,.16)}
#skinpick-menu button{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;
  font:inherit;font-size:.82rem;font-weight:500;cursor:pointer;padding:.4rem .55rem;
  border:0;border-radius:7px;background:transparent;color:var(--fg)}
#skinpick-menu button:hover{background:var(--bg-soft)}
#skinpick-menu button[aria-checked="true"]{color:var(--accent-ink);font-weight:700;background:var(--accent-soft)}
.sw{width:.8rem;height:.8rem;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sw-tuerkis{background:#0d7a72}
.sw-bunt{background:linear-gradient(135deg,#d6006e 0%,#1b9df0 55%,#f5a300 100%)}
.sw-skynet{background:#ff2e2e}
.sw-fallout{background:#ffb641}
/* Schmalere Fenster: Navigation in Zeile 2, Farbwahl bleibt oben rechts in Zeile 1. */
@media (max-width:66rem){
  .site-head .wrap{row-gap:.45rem}
  nav.main{order:3;width:100%;margin-left:0;justify-content:flex-start}
  #skinpick{order:2;margin-left:auto}
}
/* Ohne diese Regel bliebe das Klappmenü auf Seiten ohne eigene Reset-Regel offen. */
#skinpick-menu[hidden]{display:none}