/* Eigenes Formular /pruefen/ (blitzer/pruefen.py) – übernommen aus prototyp/pruefen/pruefen.css, ohne Prototyp-Teile. */
/* Prototyp „Bescheid prüfen lassen“ – Farben, Schrift und Radien wie blitzerkanzlei.de (site.css), aber eigenständig. */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/schrift/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/schrift/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --rot: #C1001F; --rot-dunkel: #A40019; --rot-ton: #FBE9EC; --rot-rand: #F3C9D1;
  --tinte: #1A1A1A; --text: #4A4A50; --leise: #6C6C73; --blass: #B4B4BC;
  --flaeche: #FFFFFF; --flaeche-2: #F5F5F7; --flaeche-3: #EFEFF2;
  --linie: #E4E4E8; --linie-stark: #DADADF; --gruen: #2E7D46; --gruen-ton: #E8F5EC; --warn: #B4531A; --warn-ton: #FBF0E6;
  --schrift: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius-karte: 12px; --radius-knopf: 12px; --radius-feld: 10px;
  --schatten-karte: 0 18px 40px -26px rgba(20, 20, 22, .4);
  --schatten-cta: 0 14px 30px -14px rgba(193, 0, 31, .7);
  --dauer: .16s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: 400 17px/1.55 var(--schrift); color: var(--tinte); background: var(--flaeche-2);
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--rot); }
a:hover { color: var(--rot-dunkel); }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.rahmen { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 16px; }
main { flex: 1; padding-block: 20px 48px; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hinweisband: deutlich als Prototyp erkennbar */

/* Kopf: Logo links, Vertrauen rechts (Anwalt, kostenlos, Bewertung) – kein Menü, keine Ablenkung */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px;
  background: #fff; border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 20; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--tinte); text-decoration: none; }
.logo img { display: block; }
.kopf-vertrauen { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.kv-foto { position: relative; flex-shrink: 0; }
.kv-foto img { display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--linie); }
.kv-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.kv-text small { font-size: 12.5px; font-weight: 500; color: var(--text); }
.kv-bewertung { display: inline-flex; min-height: 22px; align-items: center; font-size: 12.5px; color: var(--leise); white-space: nowrap; text-decoration: none; }
.kv-bewertung:hover .kv-anzahl { text-decoration: underline; text-underline-offset: 2px; }
.kv-anzahl { color: var(--leise); }
.kv-bewertung > span[aria-hidden] { display: inline-flex; align-items: baseline; gap: 5px; }
.kv-note { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.kv-bewertung .sterne { font-size: 11.5px; letter-spacing: .5px; }
.kv-lang { display: none; }
@media (min-width: 560px) { .kv-kurz { display: none; } .kv-lang { display: inline; } }
@media (max-width: 559px) { .kopf-vertrauen { gap: 8px; } .kv-foto img { width: 32px; height: 32px; } }
@media (max-width: 359px) { .logo span { display: none; } }

/* Einstieg nur auf dem ersten Bildschirm */
.einstieg h1 { font-size: clamp(19px, calc((100vw - 32px) * .064), 38px); line-height: 1.12; letter-spacing: -.025em; margin: 8px 0 18px; text-wrap: balance; }

/* Fortschritt */
.zurueck { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 10px 0 4px; border: 0; background: none;
  font: inherit; font-size: 15px; color: var(--text); cursor: pointer; border-radius: 10px; }
.zurueck:hover { background: var(--flaeche-3); color: var(--tinte); }
.zurueck svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.zurueck[hidden] { display: none; }
/* Fortschritt als Linie an der Unterkante des stehenden Kopfs – bleibt beim Scrollen sichtbar */
.kopf { position: sticky; }
.fortschritt-balken { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--linie); }
.fortschritt-balken[hidden] { display: none; }
.fortschritt-balken span { display: block; height: 100%; background: var(--rot); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }

/* Vorbelegung (Einstieg von einer Messstelle) */
/* Vorbelegt („Leiste“, vom User gewählt 13.10.2026): Kopf des Formular-Kastens, randlos bis an dessen Kanten, durch eine
   Linie von der Frage getrennt. Ortsmarke in Markenrot, Name der Messstelle in einer Zeile (das Wort „Messstelle“ nur für
   Screenreader), darunter die vorbelegten Antworten, rechts „Ändern“ als kleiner Knopf. .vorbelegt-wahl ist nur Hülle
   (display: contents), damit „Ändern“ mit ihr verschwindet. Am Handy auf dem Schnellweg: Ort auf den Kern gekürzt. */
.vorbelegt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1px 12px; margin: -24px -20px 22px;
  padding: 14px 20px; border-radius: 16px 16px 0 0; background: #FAFAFB; border-bottom: 1px solid var(--linie);
  font-size: 14.5px; line-height: 1.4; color: var(--text); }
@media (min-width: 640px) { .vorbelegt { margin: -32px -32px 26px; padding: 16px 32px; } }
.vorbelegt[hidden] { display: none; }
.vorbelegt-ort { display: contents; }
.vorbelegt-pin { display: grid; grid-column: 1; grid-row: 1 / span 2; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--linie); }
.vorbelegt-pin svg { width: 18px; height: 18px; fill: none; stroke: var(--rot); stroke-width: 1.9; stroke-linejoin: round; }
.vorbelegt:not(:has(.vorbelegt-wahl:not([hidden]))) .vorbelegt-pin { grid-row: 1; }
.vorbelegt-name { grid-column: 2 / -1; grid-row: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--tinte); font-weight: 600; }
.vorbelegt:has(.vorbelegt-wahl:not([hidden])) .vorbelegt-name { grid-column: 2; }
.vorbelegt-art { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vorbelegt-wahl { display: contents; }
.vorbelegt-wahl[hidden] { display: none; }
.vorbelegt-werte { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; font-size: 13.5px; color: var(--leise); }
.vorbelegt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* Etikett nur für Screenreader (Name der Liste) */
.vorbelegt-liste { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; min-width: 0; }
.vorbelegt-liste li { white-space: nowrap; color: var(--text); }
.vorbelegt-liste svg { display: none; }
.vorbelegt-liste li + li::before { content: "·"; margin: 0 7px; color: var(--blass); }
.vorbelegt-aendern { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; margin: -2px 0; min-height: 28px; padding: 0 12px;
  border: 1px solid var(--linie-stark); border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 500;
  white-space: nowrap; color: var(--tinte); cursor: pointer; }
.vorbelegt-aendern:hover { border-color: var(--blass); background: var(--flaeche-2); }
@media (max-width: 639px) {
  .vorbelegt { font-size: 13.5px; }
  .vorbelegt:has(.vorbelegt-wahl:not([hidden])) .vorbelegt-zusatz {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Fragen */
.formular { background: #fff; border-radius: 16px; box-shadow: var(--schatten-karte); padding: 24px 20px; }
@media (min-width: 640px) { .formular { padding: 32px; } }
.frage { border: 0; margin: 0; padding: 0; min-width: 0; }
.frage:not([hidden]) ~ .frage:not([hidden]) { margin-top: 32px; }   /* nur zwischen sichtbaren Fragen (Bündel), nicht nach ausgeblendeten */
.mit-js .frage[hidden], .mit-js .aktionen[hidden] { display: none; }
.frage-titel { padding: 0; font-size: clamp(21px, 4vw, 25px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 6px; }
/* Die Überschrift bekommt bei jedem Bildschirm den Fokus (Screenreader lesen die neue Frage vor). Sie ist nicht per
   Tab erreichbar und nicht bedienbar – kein Fokusrahmen (Safari auf dem iPhone zeigte sonst einen roten Rahmen). */
.frage-titel:focus, .frage-titel:focus-visible { outline: none; }
.frage-hinweis { margin: 0 0 16px; color: var(--leise); font-size: 15px; }
.frage-fehlt .frage-titel::after { content: ""; }

.karten { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 640px) { .karten-2, .karten-4 { grid-template-columns: 1fr 1fr; } }
.karte { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 48px 12px 16px;
  border: 1.5px solid var(--linie-stark); border-radius: var(--radius-karte); background: #fff; cursor: pointer;
  transition: border-color var(--dauer) ease, background var(--dauer) ease, box-shadow var(--dauer) ease; }
.karte:hover { border-color: var(--blass); background: var(--flaeche-2); }
.karte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.karte-text { font-size: 17px; line-height: 1.3; }
.karte-symbol { width: 28px; height: 28px; flex-shrink: 0; fill: none; color: var(--leise); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.karte-mit-symbol { min-height: 64px; }
.karte-haken { position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  border: 1.5px solid var(--linie-stark); background: #fff; }
.karte:has(input:checked) { border-color: var(--gruen); background: var(--gruen-ton); box-shadow: 0 0 0 1px var(--gruen) inset; }
.karte:has(input:checked) .karte-haken { border-color: var(--gruen); background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
/* Gewählt: Haken springt kurz auf, damit das Antippen sichtbar ankommt */
@keyframes haken-auf { 0% { transform: scale(.35); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.karte:has(input:checked) .karte-haken { animation: haken-auf .34s cubic-bezier(.16, 1, .3, 1); }
.wechselt .frage { pointer-events: none; }                 /* im Übergang kein zweites Antippen */
.karte:has(input:focus-visible) { outline: 3px solid var(--rot); outline-offset: 2px; }
.karte-vorbelegt::after { content: "Häufig an dieser Messstelle"; position: absolute; top: -10px; right: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--gruen); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; }

/* Kontakt */
.kontakt-raster { display: grid; gap: 24px; }
.kontakt-felder { display: grid; gap: 14px; }
.feld label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.feld input { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; color: var(--tinte); background: #fff;
  border: 1.5px solid var(--linie-stark); border-radius: var(--radius-feld); }
.feld input:focus { border-color: var(--rot); outline: none; box-shadow: 0 0 0 3px var(--rot-ton); }
.feld input[aria-invalid="true"] { border-color: var(--rot); background: #fffafa; }
.feld-hinweis { margin: 4px 0 0; font-size: 13px; color: var(--leise); }
.feld-fehler { margin: 6px 0 0; font-size: 14px; color: var(--rot-dunkel); font-weight: 500; }
.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.datenschutz-hinweis { margin: 0; font-size: 13px; color: var(--leise); }
.sende-fehler { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--rot-ton); color: var(--rot-dunkel); font-size: 15px; }

.sterne { color: #E8A317; letter-spacing: 1px; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 24px;
  border-radius: var(--radius-knopf); border: 0; background: var(--rot); color: #fff; font: inherit; font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; box-shadow: var(--schatten-cta); transition: background var(--dauer) ease; }
.knopf[hidden] { display: none; }
.knopf:hover { background: var(--rot-dunkel); color: #fff; }
.knopf:disabled { background: var(--blass); box-shadow: none; cursor: default; }
.knopf-gross { width: 100%; min-height: 56px; font-size: 17px; }
.knopf-hell { background: #fff; color: var(--tinte); border: 1px solid var(--linie-stark); box-shadow: none; }
.knopf-hell:hover { background: var(--flaeche-2); color: var(--tinte); }
.knopf-klein { min-height: 40px; padding: 0 16px; font-size: 14px; }
.aktionen { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 24px; }
.senden-zeile { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.aktionen .zurueck, .senden-zeile .zurueck { order: 2; align-self: center; font-size: 14px; color: var(--leise); }
@media (min-width: 640px) {
  .aktionen, .senden-zeile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .aktionen .zurueck, .senden-zeile .zurueck { order: 0; font-size: 15px; color: var(--text); }
  .aktionen .knopf { margin-left: auto; min-width: 200px; }
  .senden-zeile .knopf { flex: 1; width: auto; }
  .aktionen-fehler { flex-basis: 100%; }
}
.aktionen-fehler { margin: 0; color: var(--rot-dunkel); font-weight: 500; font-size: 15px; }

/* Danke */
.danke { background: #fff; border-radius: 16px; box-shadow: var(--schatten-karte); padding: 28px 20px; }
@media (min-width: 640px) { .danke { padding: 36px; } }
.danke:focus { outline: none; }
.danke h1 { font-size: clamp(24px, 4.5vw, 30px); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.02em; }
.fallnummer { margin: 0 0 20px; color: var(--text); }
.danke-schritte { margin: 0 0 28px; padding-left: 22px; color: var(--text); }
.danke-schritte li { margin-bottom: 8px; }
.danke-schritte strong { color: var(--tinte); }
.upload { padding-top: 24px; border-top: 1px solid var(--linie); }
.upload h2 { font-size: 21px; margin: 0 0 6px; }
.upload p { margin: 0 0 14px; color: var(--text); }
.danke-hotline { margin: 24px 0 0; font-size: 15px; color: var(--text); }

.fuss { padding-block: 16px 32px; font-size: 13px; color: var(--leise); text-align: center; }
.fuss a { color: var(--leise); }

/* Prototyp-Einstellungen: oben rechts im Hinweisband, scrollt mit weg und verdeckt nie Knöpfe */
.ohne-js .zurueck, .ohne-js .fortschritt-balken, .ohne-js .aktionen { display: none; }


/* Vertrauen: Anwalt beim Kontaktschritt (Wortlaut und Zahlen gibt die Kanzlei frei) */
.autor { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 6px 0 20px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--gruen-ton); color: var(--tinte); font-size: 14.5px; line-height: 1.3; }
.autor svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--gruen); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.autor strong { font-weight: 600; }
@media (max-width: 419px) { .autor-lang { display: none; } .autor { padding: 7px 12px 7px 9px; font-size: 13.5px; border-radius: 16px; } }

/* Danke-Seite: was laut Bußgeldkatalog droht */
.danke-katalog { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--flaeche-2); font-size: 15px; color: var(--text); }
.danke-katalog[hidden] { display: none; }
.danke-katalog strong { color: var(--tinte); }
.danke-test { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--warn-ton); color: var(--warn); font-size: 14px; }
.danke-test[hidden] { display: none; }

/* Unter dem Formular (sichtbar beim Scrollen): Vorteile und „Bekannt aus“, ohne Kasten direkt auf dem grauen Hintergrund;
   Symbole wie auf der Startseite: grauer Kreis, dunkles Symbol */
/* Die Vorteile beginnen immer im untersten Fünftel des Bildschirms (bei 80 % der Höhe): Mindesthöhe von Überschrift und
   Formular = 80 % der Bildschirmhöhe minus Kopfzeile (66 px) und Abstand (32 px). Nur CSS, nichts wird gemessen.
   Ist eine Frage länger, rutschen die Vorteile entsprechend tiefer. flow-root hält den Abstand der Überschrift im Bereich. */
.formular-bereich { display: flow-root; min-height: calc(80vh - 98px); min-height: calc(80svh - 98px); }
.vorteile { margin: 32px 0 0; padding: 0 4px; }
@media (min-width: 640px) { .vorteile { padding: 0 8px; } }
.vorteile[hidden] { display: none; }
.vorteile h2 { margin: 0 0 16px; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; color: var(--tinte); }
.vorteile-liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .vorteile-liste { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.vorteile-liste li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.vorteile-liste strong { display: block; margin-bottom: 1px; font-weight: 600; color: var(--tinte); }
.vorteile-symbol { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--linie); }
.vorteile-symbol svg { width: 20px; height: 20px; fill: none; stroke: var(--tinte); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vorteile-medien-titel { margin: 24px 0 10px; padding-top: 20px; border-top: 1px solid var(--linie-stark); font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--leise); }
.vorteile-medien { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.vorteile-medien img { display: block; width: auto; filter: grayscale(1); opacity: .6; }