:root{
  --tinte:#12313a;--text:#1b2a30;--grau:#52606a;--linie:#c7d3d6;
  --akzent:#0e6f73;--akzent-dunkel:#0a5558;--mint:#e3f2f0;--gelb:#f4c542;
  --fehler:#b3261e;--fehler-hell:#fdecea;--bg:#fff;--seite:#eaf3f2
}
*{box-sizing:border-box}
html{font-size:18px;scroll-padding:80px 0 100px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
#app{max-width:680px;margin:0 auto;padding:0 18px 24px;background:var(--bg);min-height:100vh;min-height:100dvh}
h1{font-size:clamp(2rem,8vw,3.1rem);line-height:1.08;letter-spacing:-.025em;font-weight:800;color:var(--tinte);margin:0 0 10px}
h2{font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;color:var(--tinte);margin:26px 0 20px}
h1:focus,h2:focus{outline:none}
p{margin:0 0 14px}
.laden,.hinweis{color:var(--grau);padding:24px 0}
.untertitel{color:var(--grau);font-size:1.1rem;margin:0 0 18px}

/* Knöpfe */
button{font:inherit;font-weight:600;min-height:52px;padding:12px 28px;border-radius:14px;border:2px solid var(--akzent);cursor:pointer;touch-action:manipulation}
button.primaer{background:var(--akzent);color:#fff}
button.primaer:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
button.sekundaer{background:#fff;color:var(--akzent)}
button[disabled]{opacity:.6;cursor:default}
button.link{border:0;background:none;color:var(--grau);font-weight:400;text-decoration:underline;min-height:44px;padding:8px 4px}
:focus-visible{outline:3px solid var(--tinte);outline-offset:2px}
.option input:focus-visible{outline:none}

/* Startseite: dunkles Kopfband mit großem Titel, darunter luftiger Textbereich */
.start{margin:0 -18px}
.kopf{background:var(--tinte);color:#fff;padding:56px 22px 40px}
.kopf h1{color:#fff;margin:0 0 20px}
.kopf .untertitel{color:#cfe3e1;margin:0;font-size:1.15rem;line-height:1.45}
.kopf::after{content:"";display:block;width:56px;height:6px;border-radius:3px;background:var(--gelb);margin-top:28px}
.start-body{padding:32px 22px 8px}
.fakten{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 28px}
.fakten li{background:var(--mint);color:var(--tinte);border-radius:8px;padding:7px 14px;font-weight:600;font-size:.92rem}
.start-body p{margin:0 0 20px}
.start .aktionen{margin-top:32px}
.start-body .klein{font-size:.8rem;line-height:1.5;color:var(--grau);margin:36px 0 0}
.start .aktionen button.primaer{font-size:1.1rem;min-height:58px}

/* Fortschritt */
.fortschritt{position:sticky;top:0;background:var(--bg);padding:12px 0 10px;border-bottom:1px solid var(--linie);z-index:2}
.fortschritt .text{display:flex;justify-content:space-between;font-size:.85rem;color:var(--grau);margin-bottom:7px}
.spur{height:10px;background:#dde7e8;border-radius:5px;overflow:hidden}
.spur>.fuellung{height:100%;background:linear-gradient(90deg,var(--akzent),var(--akzent));border-radius:5px;transition:width .25s}

/* Fragen */
fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}
legend{font-weight:700;padding:0;margin-bottom:12px;font-size:1.08rem;line-height:1.35;color:var(--tinte)}
.zusatz{display:block;font-weight:400;color:var(--grau);font-size:.85rem;margin-top:4px}
fieldset>p.zusatz{margin:14px 0 0}
.option{display:flex;align-items:center;gap:12px;min-height:54px;margin:0 0 8px;padding:10px 14px;border:2px solid var(--linie);border-radius:14px;cursor:pointer;background:#fff}
.option:hover{border-color:var(--akzent)}
.option input{width:24px;height:24px;flex:none;accent-color:var(--akzent);margin:0}
.option:has(input:checked){border-color:var(--akzent);background:var(--mint)}
.option:has(input:focus-visible){outline:3px solid var(--tinte);outline-offset:2px}
fieldset.fehler legend{color:var(--fehler)}
fieldset.fehler .option{border-color:var(--fehler)}
fieldset.folge{margin-top:-12px;margin-left:6px;padding-left:12px;border-left:4px solid #9fcfca}
.meldung{color:var(--fehler);font-weight:600;margin:12px 0 10px}
.fehlerbox{background:var(--fehler-hell);border:2px solid var(--fehler);border-radius:14px;padding:12px 14px;margin:20px 0 28px;color:#5f1410}
.fehlerbox p{margin:0 0 4px}
.nav{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--linie);padding:12px 0 calc(12px + env(safe-area-inset-bottom));display:flex;gap:12px;justify-content:space-between;margin-top:8px}
.nav button{flex:1}
.fuss{text-align:center;margin-top:8px}
.hp,.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Danke */
.danke{text-align:center;padding-top:48px}
.danke .haken{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:20px;background:var(--mint);color:var(--akzent);font-size:2.6rem;line-height:1;margin-bottom:24px}
.danke h1{margin-bottom:14px}
.danke .aktionen{margin-top:32px}
.aktionen{display:flex;flex-direction:column;gap:14px;margin-top:20px}

/* Schmale Handys */
@media (max-width:359px){html{font-size:16px}#app{padding:0 16px 20px}.start{margin:0 -16px}.kopf{padding:40px 16px 32px}.start-body{padding:28px 16px 8px}.start-body .klein{font-size:.85rem}}

/* Tablet und Desktop: Inhalt als ruhige Karte auf getöntem Grund */
@media (min-width:720px){
  body{background:var(--seite)}
  #app{margin:32px auto;border:1px solid var(--linie);border-radius:24px;padding:0 40px 32px;min-height:0}
  .fortschritt{border-radius:24px 24px 0 0;margin:0 -40px;padding:16px 40px 12px}
  .start{margin:0 -40px}
  .kopf{border-radius:23px 23px 0 0;padding:72px 56px 52px}
  .start-body{padding:40px 56px 8px}
  .nav{margin:8px -40px 0;padding:14px 40px;border-radius:0 0 24px 24px}
  .aktionen{flex-direction:row;align-items:center;gap:16px}
  .danke .aktionen{justify-content:center}
}
@media (min-width:720px) and (orientation:landscape) and (max-height:520px){
  #app{margin:0 auto;border-radius:0;border-top:0;border-bottom:0}
  .fortschritt{border-radius:0}
}

@media (prefers-reduced-motion:reduce){.spur>.fuellung{transition:none}}

.freitext{display:block;width:100%;min-height:48px;margin:8px 0 10px;padding:10px 14px;font:inherit;border:2px solid var(--akzent);border-radius:14px}