/* Einspruch-Check – Redesign 2026 (aus bgp-neu/entwuerfe/einspruch-check-v3.html) */

/* Einspruch-Check (Klickstrecke) */
[hidden]{display:none!important}
.hero--check{padding-block:clamp(28px,4vw,56px) clamp(36px,5vw,72px)}
.hero--check .hero__raster{grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:start;gap:32px 56px}
@media (max-width:960px){.hero--check .hero__raster{grid-template-columns:minmax(0,1fr)}}
.hero--check h1{font-size:clamp(32px,3.8vw,50px)}
.hero--check .hero__zusagen{flex-direction:column;gap:8px;font-size:14.5px}
.hero__links{padding-top:clamp(0px,2vw,24px)}
@media (max-width:960px){.hero__links .nur-desktop{display:none}}
.frist-hinweis{display:flex;gap:12px;align-items:flex-start;margin-top:28px;padding:14px 16px;border:1px solid var(--linie-hell);border-radius:var(--radius);font-size:14px;color:rgba(255,255,255,.8);max-width:30em}
.frist-hinweis b{color:#fff}
.frist-hinweis svg{flex:none;margin-top:2px}

/* Karte */
.check{position:relative}
.check::before{content:"";position:absolute;left:50%;top:40%;width:170%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,198,26,.32) 0%,rgba(255,198,26,.14) 32%,rgba(86,174,230,.16) 56%,transparent 100%)}
.karte{position:relative;background:var(--weiss);color:var(--text);border-top:4px solid var(--gelb);border-radius:var(--radius);box-shadow:0 24px 56px rgba(4,20,34,.35);min-height:520px;display:flex;flex-direction:column}
.karte__kopf{display:flex;align-items:center;gap:12px;padding:16px 20px 0}
.zurueck{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--linie);border-radius:50%;background:var(--weiss);color:var(--tinte);cursor:pointer;flex:none}
.zurueck:hover{border-color:var(--tinte)}
.zurueck:disabled{visibility:hidden}
.fortschritt{flex:1;height:6px;border-radius:3px;background:var(--tint);overflow:hidden}
.fortschritt span{display:block;height:100%;width:0;background:var(--gelb);border-radius:3px;transition:width .35s ease}
.schrittzahl{font-size:12px;font-weight:700;color:var(--gedaempft);white-space:nowrap;font-variant-numeric:tabular-nums}
.karte__inhalt{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column}
/* Platz für die erste Frage freihalten, bis das Skript sie einsetzt (sonst springt die Seite, CLS) */
@media (max-width:767px){.karte__inhalt:empty{min-height:312px}}
.frage{font:750 23px/1.2 var(--titel);color:var(--tinte);letter-spacing:-.015em;text-wrap:balance}
.frage__hilfe{margin-top:6px;font-size:14px;color:var(--gedaempft)}
.antworten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.antworten--viele{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:460px){.antworten--viele{grid-template-columns:repeat(2,minmax(0,1fr))}}
.antwort{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:104px;padding:16px 10px;border:1.5px solid var(--linie);border-radius:var(--radius);background:var(--weiss);font:600 14.5px/1.3 var(--schrift);color:var(--tinte);text-align:center;cursor:pointer;transition:border-color .12s,background .12s,transform .12s}
.antwort svg{color:var(--asphalt)}
.antwort:hover{border-color:var(--asphalt);background:var(--tint)}
.antwort:active{transform:scale(.98)}
.antwort[aria-pressed="true"]{border-color:var(--asphalt);background:var(--asphalt);color:#fff}
.antwort[aria-pressed="true"] svg{color:var(--gelb)}
.antworten--liste{grid-template-columns:minmax(0,1fr)}
.antworten--liste .antwort{flex-direction:row;justify-content:flex-start;min-height:0;padding:13px 14px;text-align:left}
.antworten--liste .antwort svg{width:22px;height:22px}
.antwort span{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:600px){
  .antworten,.antworten--viele{grid-template-columns:minmax(0,1fr);gap:8px}
  .antwort{flex-direction:row;justify-content:flex-start;min-height:0;padding:13px 14px;text-align:left}
  .antwort svg{width:22px;height:22px;flex:none}
  .karte{min-height:0}
}

.regler{margin-top:22px;text-align:center}
.regler__wert{font:800 56px/1 var(--titel);color:var(--tinte);font-variant-numeric:tabular-nums}
.regler__wert small{font-size:20px;color:var(--gedaempft);font-weight:700}
.regler input[type=range]{width:100%;margin-top:18px;accent-color:var(--asphalt);height:28px}
.regler__skala{display:flex;justify-content:space-between;font-size:12px;color:var(--gedaempft)}
.regler__stufen{display:flex;justify-content:center;gap:8px;margin-top:14px}
.regler__stufen button{width:44px;height:36px;border:1px solid var(--linie);border-radius:var(--radius);background:var(--weiss);font:700 18px var(--schrift);color:var(--tinte);cursor:pointer}
.vorschau{margin-top:16px;padding:10px 12px;border-radius:var(--radius);background:var(--tint);font-size:13.5px;color:var(--text)}
.vorschau b{color:var(--tinte)}
.weiter{margin-top:auto;padding-top:20px}
.weiter .knopf{width:100%}
.knopf:disabled{opacity:.45;cursor:not-allowed;transform:none}
.knopf--rahmen{background:var(--weiss);border-color:var(--linie);color:var(--tinte)}
.knopf--rahmen:hover{border-color:var(--tinte)}

.upload{margin-top:16px;padding:18px;border:2px dashed #B8C8D6;border-radius:var(--radius);text-align:center;background:#F7FAFC;transition:border-color .15s,background .15s}
.upload.ziehen{border-color:var(--asphalt);background:var(--tint)}
.upload strong{display:block;font:750 16px/1.3 var(--titel);color:var(--tinte)}
.upload p{font-size:13px;color:var(--gedaempft);margin-top:4px}
.upload__knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.dateien{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;text-align:left}
.dateien li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);background:var(--weiss);border:1px solid var(--linie);font-size:13.5px}
.dateien li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinte)}
.dateien li b{font-size:12px;color:var(--ok,#1C7A4A)}
.dateien li.laedt b{color:var(--gedaempft)}
.dateien li.fehler b{color:var(--rot)}
.dateien button{border:0;background:none;padding:0 2px;font-size:16px;color:var(--gedaempft);cursor:pointer}

.hinweisbox{margin-top:14px;padding:10px 12px;border-left:3px solid var(--gelb);background:#FFFBEA;font-size:13.5px;color:var(--text)}

/* Ergebnis */
.ergebnis__kopf{font:750 13px/1 var(--titel);letter-spacing:.12em;text-transform:uppercase;color:var(--ocker)}
.strafmass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px;border:1px solid var(--linie);border-radius:var(--radius)}
.strafmass div{padding:12px 14px}
.strafmass div+div{border-left:1px solid var(--linie)}
.strafmass dt{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gedaempft)}
.strafmass dd{margin:4px 0 0;font:800 22px/1.1 var(--titel);color:var(--tinte);white-space:nowrap;font-variant-numeric:tabular-nums}
.strafmass dd.rot{color:var(--rot)}
.strafmass__fuss{margin-top:6px;font-size:12px;color:var(--gedaempft)}
.kontakt{display:grid;gap:10px;margin-top:18px}
.kontakt h3{font-size:18px}
.kontakt p.sub{font-size:14px;color:var(--gedaempft);margin-top:-4px}
.anrede{display:flex;gap:6px}
.anrede input{position:absolute;opacity:0;pointer-events:none}
.anrede label{padding:8px 16px;border:1px solid var(--linie);border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer}
.anrede input:checked + label{background:var(--asphalt);border-color:var(--asphalt);color:#fff}
.anrede input:focus-visible + label{outline:3px solid var(--gelb);outline-offset:2px}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){.feldpaar{grid-template-columns:minmax(0,1fr)}}
.feld{position:relative}
.feld input{width:100%;height:48px;padding:18px 12px 4px;border:1px solid var(--linie);border-radius:var(--radius);font:500 15px var(--schrift);color:var(--tinte);background:var(--weiss)}
.feld label{position:absolute;left:12px;top:15px;font-size:15px;color:var(--gedaempft);pointer-events:none;transition:all .12s}
.feld input:focus{outline:none;border-color:var(--asphalt);box-shadow:0 0 0 3px rgba(12,58,90,.12)}
.feld input:focus + label,.feld input:not(:placeholder-shown) + label{top:6px;font-size:11px;font-weight:700;letter-spacing:.04em}
.feld input:user-invalid{border-color:var(--rot)}
.vertrauen{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:12.5px;color:var(--gedaempft)}
.vertrauen span::before{content:"✓ ";color:var(--ok,#1C7A4A);font-weight:700}
.rechtlich{font-size:12px;color:var(--gedaempft);line-height:1.5}
.rechtlich a{color:var(--blau)}
.absage{margin-top:16px;padding:14px 16px;border-radius:var(--radius);background:var(--tint);font-size:14.5px;line-height:1.55;color:var(--text)}
.absage strong{display:block;font:750 16px/1.3 var(--titel);color:var(--tinte);margin-bottom:4px}
.alternativen{display:grid;gap:8px;margin-top:14px}
.alternativen a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--linie);border-radius:var(--radius);font-size:14.5px;font-weight:600;color:var(--tinte)}
.alternativen a:hover{border-color:var(--asphalt);color:var(--blau)}
.danke{text-align:center;padding-top:10px}
.danke__haken{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--gelb);display:grid;place-items:center}
.danke h2{font-size:26px}
.danke p{margin-top:8px;color:var(--text)}
.naechste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;text-align:left;counter-reset:n}
.naechste li{counter-increment:n;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:14px}
.naechste li::before{content:counter(n);width:26px;height:26px;border-radius:50%;background:var(--asphalt);color:#fff;display:grid;place-items:center;font:800 12px var(--titel)}
.entwurf-hinweis{margin-top:14px;padding:8px 10px;border-radius:var(--radius);background:#FFF3C7;font-size:12px;color:#6B5200}
.einblenden{animation:rein .25s ease}
@keyframes rein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* Inhalt unten */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:a}
@media (max-width:960px){.ablauf{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}
@media (max-width:540px){.ablauf{grid-template-columns:minmax(0,1fr)}}
.ablauf li{position:relative;padding:34px 24px 0 0;counter-increment:a}
.ablauf li::before{content:"";position:absolute;left:0;right:0;top:13px;height:2px;background:var(--linie)}
.ablauf li::after{content:counter(a);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--gelb);color:var(--asphalt);display:grid;place-items:center;font:800 13px var(--titel)}
.ablauf h3{font-size:18px}
.ablauf p{font-size:14.5px;color:var(--gedaempft);margin-top:6px}
.faq-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 64px}
@media (max-width:900px){.faq-raster{grid-template-columns:minmax(0,1fr)}}
.faq details{border-bottom:1px solid var(--linie)}
.faq details:first-child{border-top:1px solid var(--linie)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:16px 0;font:750 17px/1.35 var(--titel);color:var(--tinte);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);display:grid;place-items:center;font:600 18px/1 var(--schrift);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--gelb)}
.faq details p{margin:0 0 18px;padding-right:44px;font-size:15.5px;color:var(--text)}
.kanzlei{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px 56px;align-items:center}
@media (max-width:900px){.kanzlei{grid-template-columns:minmax(0,1fr)}}
.kanzlei h2{font-size:clamp(26px,3vw,36px);margin-top:6px}
.kanzlei p{color:var(--text);margin-top:12px;max-width:34em}
.kanzlei .knopf{margin-top:22px}
.fehlerhinweis{margin-top:4px;padding:10px 12px;border-radius:var(--radius);background:#FBE9EA;color:#A0302E;font-size:13.5px}
.hero--check .krumen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none;font-size:13px;color:rgba(255,255,255,.6)}
.hero--check .krumen li+li::before{content:"/";margin-right:6px;opacity:.6}
.hero--check .krumen a{color:rgba(255,255,255,.85)}