:root{
  --grund:#F6F3EA; --flaeche:#FFFFFF; --flaeche2:#EEEADF;
  --tinte:#1E251F; --gedaempft:#556056; --leise:#858D80;
  --linie:#DCD6C6; --linie-stark:#C3BBA7;
  --tief:#23392B; --wald:#2F6B45; --licht:#BFDDAE; --licht-grund:#E6F0DE;
  --bluete:#B8436A; --bluete-grund:#F7E3EA; --gold:#B57F16;
  --s-laeuft:#B8436A; --s-faellig:#E28DAB; --s-bald:#E3B34C; --s-kommt:#B9C4B4; --s-vorbei:#DAD3C4; --s-leer:#E9E5DA;
  --frost:#7FA7D6; --frost-stark:#3D6FB0;
  --n-gut:#2F8A4E; --n-mittel:#C59326; --n-gering:#9AA196;
  --schatten:0 1px 2px rgba(30,37,31,.05), 0 10px 30px -18px rgba(30,37,31,.35);
  --rund:7px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:#121512; --flaeche:#1A1E1A; --flaeche2:#232823;
    --tinte:#E8ECE4; --gedaempft:#A3AD9F; --leise:#7C8577;
    --linie:#2E342D; --linie-stark:#424A40;
    --tief:#0F1F15; --wald:#8CCB9E; --licht:#A9D199; --licht-grund:#1B2A1E;
    --bluete:#EE8DB0; --bluete-grund:#35202A; --gold:#E4B650;
    --s-laeuft:#E57AA2; --s-faellig:#A0526F; --s-bald:#B98A2C; --s-kommt:#4A5549; --s-vorbei:#343A33; --s-leer:#262B25;
    --frost:#5E86B8; --frost-stark:#9CC3F0;
    --n-gut:#6CC98A; --n-mittel:#E0B24F; --n-gering:#7C8577;
    --schatten:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --grund:#121512; --flaeche:#1A1E1A; --flaeche2:#232823;
  --tinte:#E8ECE4; --gedaempft:#A3AD9F; --leise:#7C8577;
  --linie:#2E342D; --linie-stark:#424A40;
  --tief:#0F1F15; --wald:#8CCB9E; --licht:#A9D199; --licht-grund:#1B2A1E;
  --bluete:#EE8DB0; --bluete-grund:#35202A; --gold:#E4B650;
  --s-laeuft:#E57AA2; --s-faellig:#A0526F; --s-bald:#B98A2C; --s-kommt:#4A5549; --s-vorbei:#343A33; --s-leer:#262B25;
  --frost:#5E86B8; --frost-stark:#9CC3F0;
  --n-gut:#6CC98A; --n-mittel:#E0B24F; --n-gering:#7C8577;
  --schatten:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--grund); color:var(--tinte);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased}
.huelle{max-width:1100px; margin:0 auto; padding:0 22px}
.schmal{max-width:720px}
img,svg{max-width:100%; height:auto}
a{color:var(--wald); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--bluete)}
:focus-visible{outline:2px solid var(--bluete); outline-offset:3px; border-radius:2px}
.sprung{position:absolute; left:-999px; top:8px; background:var(--flaeche); padding:8px 12px; z-index:9}
.sprung:focus{left:8px}

/* Kopf: hell in beiden Themen, weil das Logo für hellen Grund gestaltet ist */
.kopf{background:#FBF9F3; color:#1E251F; border-bottom:1px solid #E4DECF}
.kopf .huelle{display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; padding-block:10px}
.marke{display:inline-flex; align-items:center; line-height:0}
.marke img{display:block; height:64px; width:auto}
.navi{display:flex; gap:4px 16px; flex-wrap:wrap; margin-left:auto}
.navi a{color:#2A4E35; text-decoration:none; font-size:14.5px; font-weight:500; padding:4px 0; border-bottom:2px solid transparent}
.navi a:hover{color:#4F8637} .navi a[aria-current]{color:#1E251F; border-color:#4F8637}
@media (max-width:560px){ .marke img{height:50px} .navi{margin-left:0} }

/* Aufmacher */
.aufmacher{background:linear-gradient(180deg,var(--tief) 0%,color-mix(in srgb,var(--tief) 88%,var(--bluete)) 100%); color:#fff; padding:24px 0 38px}
.krumen{font-size:13px; color:var(--licht); margin:0 0 16px; display:flex; flex-wrap:wrap; gap:6px}
.krumen a{color:#D9E8D6; text-decoration:none}
.krumen a:hover{color:#fff; text-decoration:underline}
.krumen span[aria-hidden]{opacity:.55}
.ueberzeile{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--licht); margin:0 0 10px}
h1{font-family:Newsreader,Georgia,serif; font-weight:600; font-size:clamp(32px,5.2vw,54px); line-height:1.06; letter-spacing:-.02em; margin:0 0 14px; max-width:22ch;
  text-wrap:balance; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word}
.vorspann{font-size:clamp(17px,2vw,19.5px); max-width:62ch; margin:0; color:#EAF2E7; line-height:1.55}
.kennzahlen{display:flex; flex-wrap:wrap; gap:20px 36px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18)}
.kennzahl b{display:block; font-family:Newsreader,Georgia,serif; font-size:29px; font-weight:600; line-height:1.12}
.kennzahl span{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--licht)}
.kennzahl.s-laeuft b,.kennzahl.n-gut b{color:#F6B8CE}
.finder{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; max-width:640px; position:relative}
.finder button{font:inherit; font-weight:500; background:#4F8637; color:#fff; border:0; border-radius:var(--rund); padding:11px 16px; cursor:pointer}
.finder button:hover{filter:brightness(1.08)}
.finder input{font:inherit; flex:1 1 260px; min-width:0; padding:11px 14px; border-radius:var(--rund); border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.96); color:#1E251F}
.treffer{list-style:none; margin:0; padding:0; position:absolute; left:0; right:0; top:100%; z-index:5; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); box-shadow:var(--schatten)}
.treffer:empty{display:none}
.treffer a{display:block; padding:9px 13px; color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--linie)}
.treffer a:hover,.treffer a:focus{background:var(--licht-grund)}
.finder-hinweis{font-size:13px; color:#D9E8D6; margin:8px 0 0; min-height:1.3em}

/* Abschnitte */
main{padding-bottom:30px}
section{margin-top:44px}
.kapitel{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--wald); margin:0 0 6px}
h2{font-family:Newsreader,Georgia,serif; font-weight:600; font-size:clamp(24px,3vw,31px); line-height:1.15; letter-spacing:-.015em; margin:0 0 10px; text-wrap:balance}
h3{font-size:17px; margin:22px 0 6px}
.unterzeile{color:var(--gedaempft); margin:0 0 18px; max-width:68ch}
.klein{font-size:13.5px; color:var(--gedaempft)}
p.gross{font-family:Newsreader,Georgia,serif; font-size:clamp(20px,2.4vw,24px); line-height:1.4; margin:0 0 8px; max-width:62ch}
.stand{background:var(--flaeche); border:1px solid var(--linie); border-left:5px solid var(--bluete); border-radius:var(--rund); padding:18px 22px; margin-top:-18px; position:relative; box-shadow:var(--schatten)}
.stand p{margin:6px 0 0}

/* Heute-Block mit Uhr */
.heute-block{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px); gap:28px; align-items:center; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--rund); padding:22px 24px; margin-top:-18px; position:relative; box-shadow:var(--schatten)}
.heute-block h2{display:flex; align-items:center; gap:12px; font-size:clamp(30px,4vw,40px)}
.jzchip{display:inline-block; width:.8em; height:.8em; border-radius:50%; margin-right:8px; vertical-align:-.05em; border:1px solid rgba(0,0,0,.12)}
.heute-block h2 .jzchip{width:26px; height:26px; margin:0}
.uhr-figur{margin:0; width:100%}
.uhr{display:block; width:100%; height:auto}
.uhr .achse{font-size:11px}
@media (max-width:760px){ .heute-block{grid-template-columns:minmax(0,1fr)} .uhr-figur{max-width:340px; margin:0 auto} }

/* Ereigniskarten */
.ekarten{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.ekarte{display:flex; flex-direction:column; gap:3px; background:var(--flaeche); border:1px solid var(--linie); border-top:4px solid var(--s-kommt); border-radius:var(--rund);
  padding:13px 15px 14px; color:var(--tinte); text-decoration:none; transition:transform .12s ease, box-shadow .12s ease}
.ekarte:hover{transform:translateY(-2px); box-shadow:var(--schatten); color:var(--tinte)}
.ekarte.s-laeuft{border-top-color:var(--s-laeuft)} .ekarte.s-faellig{border-top-color:var(--s-faellig)} .ekarte.s-bald{border-top-color:var(--s-bald)} .ekarte.s-vorbei{border-top-color:var(--s-vorbei)}
.ename{font-family:Newsreader,Georgia,serif; font-weight:600; font-size:20px; line-height:1.2}
.ewann{font-weight:500}
.edelta{font-size:13px; color:var(--gedaempft)}

/* Nachtkarten */
.nachtkarten{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.nkarte{display:flex; flex-direction:column; gap:4px; background:var(--flaeche); border:1px solid var(--linie); border-left:5px solid var(--n-gering); border-radius:var(--rund);
  padding:13px 15px; color:var(--tinte); text-decoration:none}
.nkarte:hover{box-shadow:var(--schatten); color:var(--tinte)}
.nkarte.n-gut{border-left-color:var(--n-gut)} .nkarte.n-mittel{border-left-color:var(--n-mittel)} .nkarte.n-frost{border-left-color:var(--frost-stark)} .nkarte.n-kein{border-left-color:var(--s-kommt)}
.nstufe{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gedaempft)}
.n-gut .nstufe{color:var(--n-gut)} .n-mittel .nstufe{color:var(--n-mittel)} .n-frost .nstufe{color:var(--frost-stark)}
.nsatz{font-size:14.5px}

/* Status-Punkte */
.spunkt{display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--s-leer); vertical-align:0; border:1px solid rgba(0,0,0,.08)}
.s-laeuft.spunkt{background:var(--s-laeuft)} .s-faellig.spunkt{background:var(--s-faellig)} .s-bald.spunkt{background:var(--s-bald)} .s-kommt.spunkt{background:var(--s-kommt)} .s-vorbei.spunkt{background:var(--s-vorbei)}
.frueher{color:var(--bluete); font-weight:500} .spaeter{color:var(--gold); font-weight:500}

/* Tabellen */
.tabelle-rahmen{overflow-x:auto; border:1px solid var(--linie); border-radius:var(--rund); background:var(--flaeche)}
.tabelle{width:100%; border-collapse:collapse; font-size:14.5px}
.tabelle th,.tabelle td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--linie); vertical-align:top}
.tabelle thead th{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gedaempft); background:var(--flaeche2); font-weight:500; white-space:nowrap}
.tabelle tbody th{font-weight:500}
.tabelle tr:last-child th,.tabelle tr:last-child td{border-bottom:0}
details.land{border-bottom:1px solid var(--linie); padding:10px 0}
details.land summary{cursor:pointer}
details.land .tabelle-rahmen{margin-top:10px}
details.tabelle-auf{margin-top:12px} details.tabelle-auf summary{cursor:pointer; color:var(--wald)}

/* Karte */
.karte-block{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:24px; align-items:start}
.karte-figur{margin:0; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:12px}
.dkarte{display:block; width:100%; max-height:720px}
.dkarte a path{transition:opacity .1s} .dkarte a:hover path{opacity:.7}
.legende p{margin:0 0 8px}
@media (max-width:760px){ .karte-block{grid-template-columns:minmax(0,1fr)} }

/* Grafiken */
figure{margin:0}
.grafik{display:block; width:100%; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund)}
.grafik .gitter,.uhr .gitter{stroke:var(--linie); stroke-width:1}
.grafik .achse,.uhr .achse{fill:var(--gedaempft); font:11.5px "IBM Plex Mono",monospace}
.grafik .achse.stark{fill:var(--tinte); font-weight:500}
.grafik .punkt{fill:var(--wald); opacity:.75}
.grafik .punkt.jetzt{fill:var(--bluete); opacity:1}
.grafik .linie{fill:none; stroke:var(--bluete); stroke-width:2.4}
.grafik .ref{stroke-width:1.6; stroke-dasharray:5 4} .grafik .ref.neu{stroke:var(--tinte)} .grafik .ref.alt{stroke:var(--leise)}
.grafik .balken{fill:var(--wald)}
.uhr .zeiger{stroke:var(--tinte); stroke-width:2.2} .uhr .zeiger-mitte{fill:var(--tinte)}

/* Listen, FAQ, Text */
.liste-kurz{display:flex; flex-wrap:wrap; gap:6px 18px; padding:0; margin:0; list-style:none}
.liste-spalten{columns:3 220px; padding:0; list-style:none; margin:0} .liste-spalten li{margin:0 0 4px; break-inside:avoid}
.faq details{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:12px 16px; margin-bottom:8px}
.faq summary{cursor:pointer; font-weight:500}
.faq p{margin:8px 0 0}
.text h2{margin-top:30px} .text ul{padding-left:20px}
.erklaer{background:var(--licht-grund); border-radius:var(--rund); padding:22px 24px}

/* Fuß */
.fuss-marke{display:inline-block; background:#FBF9F3; border-radius:var(--rund); padding:10px 14px; margin:0 0 18px; line-height:0}
.fuss-marke img{display:block; width:330px; max-width:100%; height:auto}
.fuss{margin-top:56px; background:var(--flaeche2); border-top:1px solid var(--linie); padding:26px 0 36px}
.quellen h2{font-size:20px}
.quellen ul{padding-left:18px; margin:0; font-size:13.5px; color:var(--gedaempft)}
.quellen li{margin-bottom:6px}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }