/* Helden-Design (neutral, Präfix hd-) für die statischen AnspruchHeld-Seiten (Ratgeber). Tokens wie die App (src/helden-design.css). */

@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.3 var(--mono);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);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:12px;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:12px;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 .6875rem/1.3 var(--mono);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:12px;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}


/* Kopfzeile statischer Seiten: mobil Navigation in zweiter Zeile, waagerecht scrollbar */
@media (max-width:760px){
  .hd-kopf-r{display:contents}
  .hd-theme{order:2;margin-left:0}
  .hd-nav{order:3;flex-basis:100%;margin:0 -.5rem;overflow-x:auto;scrollbar-width:none}
  .hd-nav::-webkit-scrollbar{display:none}
  .hd-nav a{min-height:2.75rem;padding:0 .6rem}
  .hd-nav a.active::after,.hd-nav a[aria-current="page"]::after{left:.6rem;right:.6rem}
  .hd-marke{margin-right:auto}
}
.hd-marke span{display:block;font-weight:650;font-size:1.0625rem;letter-spacing:-.02em;line-height:1.15}
.hd-marke span small{margin-top:.1rem}

.hd-marke span{display:block;font-weight:650;font-size:1.0625rem;letter-spacing:-.02em;line-height:1.15}
.hd-marke span small{margin-top:.1rem}

/* === Ratgeberseiten === */
html{scroll-behavior:smooth}
body{font:400 1rem/1.65 var(--sans)}
main#main{max-width:46rem;margin:0 auto;padding:1.75rem 1rem 4rem}
@media (min-width:640px){main#main{padding:2.5rem 1.5rem 4rem}}
.crumb{font:500 .8125rem/1.4 var(--mono);color:var(--muted);margin:0 0 1.25rem;letter-spacing:.02em}
.crumb a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:2rem}
.crumb a:hover{color:var(--ink);text-decoration:underline}
h1{margin:0 0 1.1rem}
h2{font-size:1.3125rem;margin:2.5rem 0 .75rem;scroll-margin-top:1rem}
h3{font-size:1.0625rem;margin:1.75rem 0 .4rem}
p{margin:0 0 1.05rem}
.lede{font-size:1.0625rem;color:var(--ink)}
article ul,article ol{padding-left:1.4rem;margin:0 0 1.2rem}
li{margin:0 0 .5rem}
li::marker{color:var(--muted)}
table{width:100%;border-collapse:collapse;background:var(--surface);margin:0 0 1.4rem;font-size:.9375rem}
th,td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top;overflow-wrap:anywhere}
th{background:var(--sunk);font-weight:600}
.big{font-weight:650}
.ctabox{background:var(--band);color:var(--on-band);border:1px solid var(--band-line);border-radius:12px;padding:1.4rem 1.2rem;margin:2rem 0;text-align:center}
.ctabox p{margin:0 0 .9rem;color:var(--on-band)}
.ctabox a{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.3rem;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font:600 .9375rem/1 var(--sans);text-decoration:none;transition:transform .14s var(--ease),filter .15s}
.ctabox a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ctabox a:hover{filter:brightness(1.1)}}
.faq{border-top:1px solid var(--line);margin-top:2.2rem;padding-top:.2rem}
.faq details{border-bottom:1px solid var(--line);padding:.8rem 0}
.faq summary{font-weight:600;cursor:pointer;min-height:2.25rem}
.faq p{color:var(--muted);margin:.5rem 0 0}
.related{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem;margin-top:2.2rem;box-shadow:var(--shadow)}
.related h2{margin:0 0 .4rem;font-size:1.0625rem}
.related a{display:flex;align-items:center;min-height:2.5rem}
.geprueft{font:400 .8125rem/1.5 var(--mono);color:var(--muted);margin-top:1.75rem}
.disclaimer{background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;font-size:.875rem;color:var(--muted);margin-top:1.5rem}
.autor-box{margin:1.5rem 0 0;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.875rem;line-height:1.55;color:var(--muted)}
.autor-box p{margin:0}
.autor-box strong{color:var(--ink)}
.rcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;text-decoration:none;color:var(--ink);margin-bottom:.75rem;box-shadow:var(--shadow);transition:border-color .15s}
.rcard b{display:block;font-weight:600}
.rcard small{display:block;color:var(--muted);font-size:.875rem;margin-top:.2rem}
@media (hover:hover) and (pointer:fine){.rcard:hover{border-color:var(--accent)}}
footer{max-width:46rem;margin:0 auto;padding:1.25rem 1rem 2.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem;text-align:left}
footer a{color:var(--muted);margin:0 1rem 0 0;display:inline-flex;align-items:center;min-height:2.25rem}
footer a:hover{color:var(--ink)}
@media (max-width:30rem){table,th,td{font-size:.875rem}}

/* Kinderzuschlag-Schnellcheck (Werkzeug im Ratgeber) */
.tool{border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;padding:1.2rem;margin:1.6rem 0;background:var(--surface);box-shadow:var(--shadow)}
.tool h2{margin:0 0 .3rem;font-size:1.1875rem}
.tool label{display:block;font-weight:600;font-size:.9rem;margin:.8rem 0 .3rem}
.tool input,.tool select{width:100%;min-height:2.75rem;padding:.5rem .75rem;font:400 1rem var(--sans);border:1px solid var(--field);border-radius:8px;background:var(--bg);color:var(--ink)}
.tool .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:35rem){.tool .row{grid-template-columns:1fr}}
.tool small{display:block;color:var(--muted);font-size:.8125rem;margin-top:.3rem}
.tool button{margin-top:1rem;min-height:2.75rem;background:var(--accent);color:var(--on-accent);font:600 .9375rem var(--sans);border:1px solid var(--accent);padding:0 1.3rem;border-radius:8px;cursor:pointer}
.result{margin-top:1rem;padding:.9rem 1rem;border-radius:10px;background:var(--sunk);border:1px solid var(--line)}
.result.ok{background:var(--ok-bg);border-color:var(--ok)}
.result.bad{background:var(--bad-bg);border-color:var(--bad)}
.result .big{font-size:1.25rem;font-weight:650;margin:0 0 .3rem}
.result p{margin:.4rem 0}
.result .go{display:inline-flex;align-items:center;min-height:2.75rem;background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 1.2rem;border-radius:8px;text-decoration:none;margin-top:.5rem}
.result .go.alt{background:transparent;color:var(--accent);border:1px solid var(--accent);margin-left:.4rem}