/* 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).
   Statische Seiten (Ratgeber): Datei + public/fonts + public/theme.js. */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/InterVariable-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:0 1px 2px rgba(15,27,45,.05),0 10px 28px -16px rgba(15,27,45,.22);
  --ease:cubic-bezier(.23,1,.32,1);
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  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:0 1px 2px rgba(0,0,0,.3),0 10px 28px -16px rgba(0,0,0,.6);
  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:0 1px 2px rgba(0,0,0,.3),0 10px 28px -16px rgba(0,0,0,.6);
    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);letter-spacing:0;color:var(--muted);margin:0 0 .5rem}


/* Kopfleiste der statischen Seiten (gleiche Optik wie hd-kopf in der App) */
header.topbar{background:var(--bg);background-image:none;border-bottom:1px solid var(--line);padding:0}
.topbar .container{max-width:68rem;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.5rem}
@media (min-width:640px){.topbar .container{padding:0 1.5rem}}
.topbar a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--ink);font-weight:650;font-size:1.0625rem;letter-spacing:-.02em;text-decoration:none}
.topbar a img{width:1.625rem;height:1.625rem;flex:none}
.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;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}}

/* Inhalt: überschreibt ratgeber.css und die Inline-Farben der Seiten mit den Tokens */
:root{--primary:var(--accent);--primary-dark:var(--accent);--text:var(--ink);--border:var(--line);--secondary:var(--ok)}
body{font-size:1rem;line-height:1.65}
header.topbar a{color:var(--ink);font-weight:650;font-size:1.0625rem;letter-spacing:-.02em}
p,ul,ol,.tabelle table{color:var(--ink)}
strong{color:var(--ink)}
h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.1rem);line-height:1.15;letter-spacing:-.03em;font-weight:650;margin-bottom:.9rem}
h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
h3{font-size:1.0625rem;font-weight:600;color:var(--ink)}
.breadcrumb,.quelle,.lead,.disclaimer{color:var(--muted)}
.breadcrumb a,.related a,footer.site a{color:var(--accent)}
.disclaimer{border-top-color:var(--line)}
.cta{background:var(--band);color:var(--on-band);border:1px solid var(--band-line);border-left:1px solid var(--band-line);border-radius:12px}
.cta h3,.cta p{color:var(--on-band)}
.btn,.muster button{background:var(--accent);color:var(--on-accent)!important;border-radius:8px;font-weight:600}
.btn:hover,.muster button:hover{background:var(--accent);filter:brightness(1.1)}
.related{background:var(--sunk);border-top:1px solid var(--line)}
footer.site{color:var(--muted);border-top-color:var(--line)}
.card{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow)}
.card h2{color:var(--accent)}
th,td{border-color:var(--line)}
th{background:var(--sunk);color:var(--ink)}
table{font-variant-numeric:tabular-nums}
pre.vorlage{background:var(--sunk);border-color:var(--line);color:var(--ink)}
details{background:var(--surface);border-color:var(--line)}
.autor-box{background:var(--sunk)!important;border-color:var(--line)!important;color:var(--muted)!important}
.autor-box a{color:var(--accent)}
.rg-foot{border-top-color:var(--line)!important;color:var(--muted)!important}
.rg-foot a{color:var(--muted)!important}