/* Helden-Design (neutral, Präfix hd-). Sprache wie mailcheck.moersbergerit.de:
   Haarlinien, Navy-Flächen, Petrol-Akzent, dichte Typografie. Tokens auf :root (Hell, Dunkel per data-theme, Auto per Systemeinstellung).
   Wiederverwendbar: Datei + public/fonts + public/theme-init.js + public/theme.js kopieren. */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/JetBrainsMono-Regular-latin.woff2) format("woff2")}

:root{
  --bg:#f8f8f7;--surface:#fff;--sunk:#f1f1ef;--ink:#14202f;--muted:#4f5b6a;--line:#e3e3e0;--field:#8a8a86;
  --accent:#0a6a72;--on-accent:#fff;--accent-soft:#e4f0f0;
  --band:#0f1b2d;--on-band:#e9edf3;--band-muted:#a9b6c8;--band-line:#2a3a52;
  --ok:#17703f;--warn:#8a5600;--bad:#b3261e;--ok-bg:#e3f1e8;--warn-bg:#f6ecd6;--bad-bg:#f8e1de;
  --shadow:none;
  --ease:cubic-bezier(.23,1,.32,1);
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0c121b;--surface:#131b27;--sunk:#0f1620;--ink:#e9edf3;--muted:#9facbd;--line:#223045;--field:#566a88;
  --accent:#5cc3cb;--on-accent:#06222a;--accent-soft:#12292e;
  --band:#111b2a;--band-line:#25364d;
  --ok:#62c68f;--warn:#e8b24d;--bad:#f19489;--ok-bg:#14281e;--warn-bg:#2a2210;--bad-bg:#2d1816;
  --shadow:none;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c121b;--surface:#131b27;--sunk:#0f1620;--ink:#e9edf3;--muted:#9facbd;--line:#223045;--field:#566a88;
    --accent:#5cc3cb;--on-accent:#06222a;--accent-soft:#12292e;
    --band:#111b2a;--band-line:#25364d;
    --ok:#62c68f;--warn:#e8b24d;--bad:#f19489;--ok-bg:#14281e;--warn-bg:#2a2210;--bad-bg:#2d1816;
    --shadow:none;
    color-scheme:dark;
  }
}

/* Basis */
html{-webkit-tap-highlight-color:transparent;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 .9375rem/1.55 var(--sans);font-feature-settings:"cv11","ss03";-webkit-font-smoothing:antialiased;overflow-wrap:break-word;overflow-x:clip}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--ink);hyphens:manual;overflow-wrap:break-word}
h1{font-size:clamp(1.5rem,1.15rem + 1.5vw,2rem);letter-spacing:-.03em;font-weight:650;line-height:1.15}
h2{font-size:1.0625rem}
h3{font-size:.9375rem;letter-spacing:-.01em}
a{color:var(--accent);text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
button{font-family:inherit}
button,a,label,summary{touch-action:manipulation}
.hd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hd-skip{position:absolute;left:1rem;top:-4rem;z-index:300;background:var(--surface);color:var(--ink)!important;padding:.6rem 1rem;border:2px solid var(--accent);border-radius:8px}
.hd-skip:focus{top:.75rem}
.hd-muted{color:var(--muted)}
.hd-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hd-eyebrow{font:500 .8125rem/1.35 var(--sans);color:var(--muted);margin:0 0 .5rem}

/* Kopfzeile (öffentliche Seiten) */
.hd-kopf{border-bottom:1px solid var(--line);background:var(--bg)}
.hd-kopf-in{width:100%;max-width:68rem;margin:0 auto;padding:0 1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:1rem}
@media (min-width:640px){.hd-kopf-in{padding:0 1.5rem}}
.hd-marke{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink)!important;text-decoration:none;min-height:3.5rem}
.hd-marke img{width:1.75rem;height:1.75rem;flex:none}
.hd-marke b{display:block;font-weight:650;font-size:1.0625rem;letter-spacing:-.02em;line-height:1.15}
.hd-marke small{display:block;font:500 .6875rem/1.2 var(--mono);letter-spacing:.04em;color:var(--muted)}
.hd-kopf-r{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.hd-nav{display:flex;gap:.125rem;align-items:stretch}
.hd-nav a{display:inline-flex;align-items:center;color:var(--muted);text-decoration:none;padding:0 .7rem;min-height:3.5rem;font:500 .875rem var(--sans);position:relative;white-space:nowrap}
.hd-nav a.active,.hd-nav a[aria-current="page"]{color:var(--ink)}
.hd-nav a.active::after,.hd-nav a[aria-current="page"]::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:-1px;height:2px;background:var(--accent);border-radius:2px 2px 0 0}
@media (hover:hover) and (pointer:fine){.hd-nav a:hover{color:var(--ink)}}
.hd-theme{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:2.25rem;height:2.25rem;border-radius:8px;cursor:pointer;display:inline-grid;place-items:center;padding:0;margin-left:.5rem;flex:none;transition:border-color .15s}
.hd-theme svg{width:1.05rem;height:1.05rem}
.hd-theme .sonne{display:none}
:root[data-theme="dark"] .hd-theme .mond{display:none}
:root[data-theme="dark"] .hd-theme .sonne{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hd-theme .mond{display:none}:root:not([data-theme="light"]) .hd-theme .sonne{display:block}}
@media (hover:hover) and (pointer:fine){.hd-theme:hover{border-color:var(--muted)}}
@media (pointer:coarse){.hd-theme{width:2.75rem;height:2.75rem}}
@media (max-width:560px){
  .hd-marke small{display:none}
  .hd-nav a{padding:0 .5rem;font-size:.8125rem}
}

/* Knöpfe */
.hd-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.75rem;padding:0 1rem;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent)!important;font:600 .875rem/1 var(--sans);text-decoration:none!important;cursor:pointer;transition:transform .14s var(--ease),background-color .15s,border-color .15s,filter .15s}
.hd-btn:active{transform:scale(.97)}
.hd-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
@media (hover:hover) and (pointer:fine){.hd-btn:hover:not(:disabled){filter:brightness(1.1)}}
.hd-btn.zweit{background:var(--surface);color:var(--ink)!important;border-color:var(--field)}
.hd-btn.breit{width:100%}

/* Meldungen, Ampel, Badge */
.hd-fehler,.hd-erfolg,.hd-hinweis{border:1px solid;border-radius:10px;padding:.7rem .9rem;font-size:.875rem;margin:0 0 1rem;line-height:1.5}
.hd-fehler{color:var(--bad);background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,var(--bg))}
.hd-erfolg{color:var(--ok);background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,var(--bg))}
.hd-hinweis{color:var(--ink);background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,var(--bg))}
.hd-badge{display:inline-flex;align-items:center;font:500 .75rem/1 var(--mono);letter-spacing:.02em;padding:.3rem .55rem;border-radius:999px;border:1px solid var(--line);background:var(--sunk);color:var(--muted)}
.hd-badge.ok{color:var(--ok);background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 30%,var(--bg))}
.hd-badge.warn{color:var(--warn);background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,var(--bg))}
.hd-badge.bad{color:var(--bad);background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 30%,var(--bg))}

/* Karte, Kennzahlenband, Navy-Fläche */
.hd-karte{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1.25rem;box-shadow:var(--shadow)}
.hd-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.hd-band>*{padding:.9rem 1rem;border-left:1px solid var(--line)}
.hd-band>*:first-child{border-left:0}
.hd-band dt,.hd-band .k{font:500 .8125rem/1.3 var(--sans);color:var(--muted)}
.hd-band dd,.hd-band .v{margin:.2rem 0 0;font:600 1.25rem/1.2 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hd-navy{background:var(--band);color:var(--on-band);border:1px solid var(--band-line);border-radius:8px;padding:1.25rem}
.hd-navy h1,.hd-navy h2,.hd-navy h3{color:var(--on-band)}
.hd-navy .hd-eyebrow,.hd-navy .hd-muted{color:var(--band-muted)}

/* Anmeldung: zwei Spalten mit Navy-Infofläche */
.hd-auth{display:grid;gap:1.5rem;width:100%;max-width:62rem;margin:0 auto;padding:1.75rem 1rem 3rem}
@media (min-width:640px){.hd-auth{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:900px){.hd-auth{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:2.5rem;align-items:start;padding-top:3rem}.hd-auth.rechts{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}}
.hd-panel{background:var(--band);color:var(--on-band);border:1px solid var(--band-line);border-radius:14px;padding:1.5rem}
.hd-panel h2{color:var(--on-band);font-size:1.25rem;letter-spacing:-.025em}
.hd-panel p{color:var(--band-muted)}
.hd-panel ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.hd-panel li{display:flex;gap:.6rem;font-size:.875rem;color:var(--on-band)}
.hd-panel li::before{content:"";flex:none;width:.5rem;height:.5rem;margin-top:.5rem;border-radius:50%;background:var(--accent)}
.hd-proto{margin-top:1.25rem;border:1px solid var(--band-line);border-radius:10px;padding:.8rem .9rem;font:400 .8125rem/1.6 var(--mono);color:var(--on-band);background:color-mix(in srgb,var(--band) 70%,#000)}
.hd-proto span{color:var(--band-muted)}
.hd-proto b{font-weight:500;color:#7fd8de}

/* === Statische Seiten (Ratgeber, Kostenlos-Rechner) ===
   Alle Regeln hängen an body.hd-seite und schlagen damit die alten Inline-<style>-Blöcke einzelner Seiten.
   Quelle: held-ops/ratgeber/helden-seiten.css – build.py kopiert die Datei in jedes public/. Nicht in der App ändern. */
body.hd-seite{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.65;font-size:1rem;margin:0}
.hd-seite .hd-kopf{position:static}
.hd-seite .wrap{max-width:46rem;margin:0 auto;padding:1.75rem 1.25rem 3rem}
.hd-seite .wrap.breit{max-width:68rem}
.hd-seite .crumb{font-size:.8125rem;color:var(--muted);margin:0 0 .25rem}
.hd-seite .crumb a{color:var(--muted)}
.hd-seite h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.1rem);letter-spacing:-.03em;font-weight:650;line-height:1.15;color:var(--ink);margin:.9rem 0 .4rem;hyphens:manual}
.hd-seite h2{font-size:1.3rem;letter-spacing:-.02em;font-weight:600;line-height:1.25;color:var(--ink);margin:2.1rem 0 .6rem;hyphens:manual}
.hd-seite h3{font-size:1.05rem;letter-spacing:-.01em;font-weight:600;color:var(--ink);margin:1.4rem 0 .4rem}
.hd-seite .lead{font-size:1.1rem;color:var(--muted)}
.hd-seite p{margin:.75rem 0}
.hd-seite a{color:var(--accent);text-underline-offset:.18em}
.hd-seite ul,.hd-seite ol{padding-left:1.4rem}
.hd-seite li{margin:.3rem 0}
.hd-seite .step{border-left:2px solid var(--accent);padding:.25rem 0 .25rem 1rem;margin:.9rem 0}
.hd-seite .box{background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;padding:1rem 1.15rem;margin:1.25rem 0;color:var(--ink)}
.hd-seite .box.tip,.hd-seite .tip{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,var(--bg))}
.hd-seite .box.warn,.hd-seite .warn{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,var(--bg))}
.hd-seite .tbl{overflow-x:auto}
.hd-seite table{border-collapse:collapse;width:100%;margin:.9rem 0;font-size:.95rem;font-variant-numeric:tabular-nums}
.hd-seite th,.hd-seite td{border:1px solid var(--line);padding:.5rem .65rem;text-align:left;vertical-align:top;color:var(--ink)}
.hd-seite th{background:var(--sunk);font-weight:600}
.hd-seite details{border-bottom:1px solid var(--line);padding:.75rem 0}
.hd-seite summary{font-weight:600;cursor:pointer;color:var(--ink)}
.hd-seite .disc{font-size:.85rem;color:var(--muted);margin-top:1.75rem}

/* Handlungsaufruf: Navy-Fläche */
.hd-seite .cta{margin:2.1rem 0;padding:1.5rem;border:1px solid var(--band-line);border-radius:8px;background:var(--band);color:var(--on-band);text-align:center}
.hd-seite .cta h2{border:0;margin:.4rem 0;color:var(--on-band)}
.hd-seite .cta p{margin:0;color:var(--band-muted)}
.hd-seite .cta .cta-k{font:500 .8125rem/1.35 var(--sans);color:var(--band-muted)}
.hd-seite .cta a{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;margin-top:.9rem;padding:0 1.25rem;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:.9375rem;border-radius:8px;text-decoration:none}
@media (hover:hover) and (pointer:fine){.hd-seite .cta a:hover{filter:brightness(1.1)}}
.hd-seite .related{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem 1.25rem;margin-top:2.1rem}
.hd-seite .related h2{margin:0 0 .5rem;font-size:1.05rem}
.hd-seite .related a{display:block;padding:.3rem 0}
.hd-seite .rcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem 1.15rem;text-decoration:none;color:var(--ink);margin-bottom:.75rem;box-shadow:var(--shadow);transition:border-color .15s}
.hd-seite .rcard b{display:block;color:var(--ink);font-weight:600}
.hd-seite .rcard small{display:block;color:var(--muted);font-size:.875rem;margin-top:.15rem}
@media (hover:hover) and (pointer:fine){.hd-seite .rcard:hover{border-color:var(--accent)}}
.hd-seite .autor-box{margin:1.75rem 0 0;padding:.9rem 1.15rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.92rem;line-height:1.5;color:var(--muted)}
.hd-seite .autor-box p{margin:0}
.hd-seite .autor-box p+p{margin-top:.6rem}
.hd-seite .autor-box strong{color:var(--ink)}
.hd-seite .rg-foot{max-width:46rem;margin:1.5rem auto 0;padding:1rem 1.25rem 2rem;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted);text-align:center}
.hd-seite .rg-foot a{color:var(--muted);display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .35rem}

/* Rechner und Werkzeuge in Ratgeber-Seiten */
.hd-seite .tool,.hd-seite .af,.hd-seite .nk-tool{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:1.15rem 1.15rem .5rem;margin:1.4rem 0}
.hd-seite .tool h2,.hd-seite .af h2{margin-top:0}
.hd-seite .tool label,.hd-seite .af label{display:block;font-size:.875rem;font-weight:600;color:var(--ink)}
.hd-seite .tool input,.hd-seite .tool select,.hd-seite .af input,.hd-seite .af select{font:inherit;padding:.5rem .65rem;border:1px solid var(--field);border-radius:8px;width:100%;background:var(--surface);color:var(--ink);min-height:2.75rem;margin-top:.2rem}
.hd-seite .tool small{color:var(--muted)}
.hd-seite .tool hr{border:0;border-top:1px solid var(--line)}
.hd-seite .tool button,.hd-seite .btn-kopieren{appearance:none;min-height:2.75rem;margin-top:.9rem;padding:0 1.25rem;background:var(--accent);color:var(--on-accent);font:600 .9375rem var(--sans);border:0;border-radius:8px;cursor:pointer}
.hd-seite .result{margin-top:.9rem;padding:.9rem 1rem;border-radius:10px;background:var(--sunk);border:1px solid var(--line);color:var(--ink)}
.hd-seite .result.ok{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,var(--bg))}
.hd-seite .result.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,var(--bg))}
.hd-seite .result .big{font-size:1.35rem;font-weight:700;color:var(--ink);margin:0 0 .25rem}
.hd-seite .result .go{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.1rem;background:var(--accent);color:var(--on-accent);font-weight:600;border-radius:8px;text-decoration:none;margin-top:.5rem}
.hd-seite table.src th{background:var(--sunk)}
.hd-seite table.src th,.hd-seite table.src td{border-color:var(--line)}
.hd-seite .muster{white-space:pre-wrap;word-wrap:break-word;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:1rem 1.15rem;margin:.9rem 0 .6rem;font-family:var(--mono);font-size:.9rem;line-height:1.55;color:var(--ink)}
.hd-seite .kopiert{margin-left:.6rem;color:var(--ok);font-weight:600}
.hd-seite .af-box,.hd-seite .ge-box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.4rem 1rem;margin-top:.9rem;color:var(--ink)}
.hd-seite .af-box{border-color:var(--accent)}
.hd-seite .af-titel,.hd-seite .ge-titel{font-size:1.2rem;font-weight:700;color:var(--ink);margin:.5rem 0}
.hd-seite .af-ok,.hd-seite .af-offen td:last-child{color:var(--ok);font-weight:600}
.hd-seite .af-schlecht,.hd-seite .af-fehler,.hd-seite .ge-fehler,.hd-seite .af-abgelaufen td:last-child{color:var(--bad);font-weight:600}
.hd-seite .af-warn{color:var(--warn)}
.hd-seite .af-hinweis,.hd-seite .ge-warn{background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 35%,var(--bg));border-radius:10px;padding:.7rem 1rem .7rem 2rem;margin:.9rem 0;font-size:.95rem;color:var(--ink)}
.hd-seite .af-hinweis{padding-left:1rem}
.hd-seite .ge-frei{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 35%,var(--bg))}
.hd-seite .ge-pflicht{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,var(--bg))}
.hd-seite .ge-leer,.hd-seite .ge-fn,.hd-seite .nk-fn,.hd-seite .nk-nr,.hd-seite .nk-leer{color:var(--muted)}
.hd-seite .ge-opt summary{color:var(--ink)}
.hd-seite .ge-grid,.hd-seite .nk-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr))}
.hd-seite .af .row{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.hd-seite #ge-cta a,.hd-seite #nk-cta a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.25rem;background:var(--accent);color:var(--on-accent);font-weight:600;border-radius:8px;text-decoration:none}
.hd-seite .nk-saldo{color:var(--ink);font-family:var(--mono)}
.hd-seite .nk-fristen,.hd-seite .nk-warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 35%,var(--bg));color:var(--ink)}
.hd-seite .nk-fehler{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,var(--bg));color:var(--ink)}
.hd-seite .nk-hinweis{color:var(--ink);background:var(--warn-bg)}
.hd-seite .nk-leer{color:var(--muted)}
@media(max-width:640px){.hd-seite #nk-zeilen tr{border-color:var(--line)}}
@media(max-width:520px){.hd-seite .wrap{padding-left:1rem;padding-right:1rem}}