@font-face{font-family:'PT Sans Narrow';font-weight:400;font-display:swap;src:url(schrift/ptsansnarrow-400-latin.woff2) format('woff2')}
@font-face{font-family:'PT Sans Narrow';font-weight:700;font-display:swap;src:url(schrift/ptsansnarrow-700-latin.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:400;font-display:swap;src:url(schrift/roboto-400-latin.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:500;font-display:swap;src:url(schrift/roboto-500-latin.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:700;font-display:swap;src:url(schrift/roboto-700-latin.woff2) format('woff2')}
:root{--ink:#16233b;--blau:#1976d2;--blau-tief:#0f5aa6;--linie:#d9dfe7;--leise:#5c6b80;--warn:#b3261e;--hinweis:#fff8e1;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.55 Roboto,Arial,sans-serif;display:flex;flex-direction:column;min-height:100dvh}
a{color:var(--blau-tief)}
.kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 20px;border-bottom:1px solid var(--ink)}
.marke{text-decoration:none;color:var(--ink);font:400 17px/1.2 'PT Sans Narrow',Arial,sans-serif}
.marke b{font-size:21px;letter-spacing:.2px}
.marke span{color:var(--leise);margin-left:6px}
.tel{white-space:nowrap;font-weight:500;text-decoration:none}
main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:36px 20px 56px}
.schritt{display:none}
.schritt.aktiv{display:block}
.dach{margin:0 0 8px;font:700 15px/1.2 'PT Sans Narrow',Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--blau)}
h1,h2{font-family:'PT Sans Narrow',Arial,sans-serif;font-weight:700;line-height:1.08;margin:0 0 14px}
h1{font-size:clamp(40px,9vw,58px);letter-spacing:-.5px}
h2{font-size:clamp(30px,6vw,38px)}
.lead{font-size:20px;line-height:1.45;margin:0 0 26px}
.wahl{display:grid;gap:10px;margin:0 0 34px}
.knopf{display:block;width:100%;min-height:54px;padding:13px 18px;border:2px solid var(--blau);border-radius:2px;background:var(--blau);color:#fff;font:500 18px/1.2 Roboto,Arial,sans-serif;text-align:center;cursor:pointer}
.knopf:hover{background:var(--blau-tief);border-color:var(--blau-tief)}
.knopf:disabled{background:var(--linie);border-color:var(--linie);color:var(--leise);cursor:not-allowed}
.variante small{display:block;font:700 15px/1.2 'PT Sans Narrow',Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.variante b{display:block;font:700 25px/1.15 'PT Sans Narrow',Arial,sans-serif}
.variante i{display:block;font:400 15px/1.2 Roboto,Arial,sans-serif;margin-top:2px}
.knopf.leise{background:#fff;color:var(--blau-tief)}
.knopf.leise:hover{background:#eef5fc}
.knopf:focus-visible,.zurueck:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #90caf9;outline-offset:2px}
.zurueck{display:block;width:100%;margin-top:10px;padding:10px;border:0;background:none;color:var(--leise);font:400 16px Roboto,Arial,sans-serif;text-decoration:underline;cursor:pointer}
.person{display:flex;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--linie)}
.person img{border-radius:50%;object-fit:cover;flex:none}
.person p{margin:0;font-size:16px}
.fakten{margin:0;padding:0}
.fakten dt{font-weight:700;padding-top:13px;border-top:1px solid var(--linie)}
.fakten dd{margin:2px 0 13px;color:var(--leise)}
.haken{display:flex;gap:11px;align-items:flex-start;margin:14px 0;font-size:16px}
.haken input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--blau)}
.fern{position:absolute;left:-9999px}
.ablage{padding:16px 0;border-top:1px solid var(--linie)}
.ablage>span{display:block;color:var(--leise);font-size:15px;margin-bottom:10px}
.ablage label{position:relative;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ablage input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.stand{margin:8px 0 0;font-size:16px;font-weight:500;color:var(--blau-tief);min-height:1.2em}
.ablage.fertig .stand{color:#1b6e2e}
.ablage.problem .stand{color:var(--warn)}
.ablage.fertig .stand::before{content:'✓ '}
.feld{padding:12px 0;border-top:1px solid var(--linie)}
.feld label{display:block;font-weight:500;margin-bottom:5px}
.feld input,.feld select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #9aa7b8;border-radius:2px;background:#fff;color:var(--ink);font:400 17px Roboto,Arial,sans-serif}
.feld .hilfe{margin:5px 0 0;color:var(--leise);font-size:14.5px}
.feld.unsicher input,.feld.unsicher select{background:var(--hinweis);border-color:#c79a00}
.feld.unsicher .marke-unsicher{display:block;font-size:14.5px;color:#7a5c00;margin-top:5px}
.marke-unsicher{display:none}
.feld.fehler input,.feld.fehler select{border:2px solid var(--warn)}
.feld .weiss{display:flex;gap:8px;align-items:center;margin-top:7px;font-weight:400;font-size:15.5px}
.feld .weiss input{width:20px;height:20px;min-height:0;accent-color:var(--blau)}
.zaehler{color:var(--leise);margin:-8px 0 12px}
.meldung{color:var(--warn);min-height:1.3em;margin:12px 0}
.balken{height:4px;background:var(--linie);overflow:hidden;margin-top:24px}
.balken i{display:block;width:40%;height:100%;background:var(--blau);animation:lauf 1.4s ease-in-out infinite}
@keyframes lauf{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.balken i{animation:none;width:100%}}
.fuss{display:flex;flex-wrap:wrap;gap:6px 18px;padding:16px 20px;border-top:1px solid var(--linie);font-size:14.5px;color:var(--leise)}
.fuss span{margin-right:auto}
.zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 14px;padding:8px 0;border-top:1px solid var(--linie);font-size:16px}
.zeile>span{color:var(--leise)}
.zeile b{font-weight:500;overflow-wrap:anywhere}
.zeile .hilfe{grid-column:1/-1;margin:0;color:#7a5c00;font-size:14.5px}
.zeile.unsicher{background:var(--hinweis);padding-left:8px;padding-right:8px}
.zwischen{font:700 22px/1.2 'PT Sans Narrow',Arial,sans-serif;margin:22px 0 8px}
#a-hinweis:empty{display:none}
.recht{max-width:760px}
.recht h1{font-size:40px;margin-top:0}
.recht h2{font-size:27px;margin-top:30px}
.recht h3{font:700 18px Roboto,Arial,sans-serif;margin:22px 0 4px}
.recht p,.recht li{font-size:16px}
@media (max-width:520px){.marke span{display:block;margin-left:0}.kopf{padding:12px 16px}main{padding:26px 16px 44px}}