/*
 * Stil der Kundenseite verify.neumann-feuerwerk.de.
 *
 * Farben aus dem echten Shop-Stylesheet abgeleitet (tpl_feuerwerk/stylesheet.min.css, Stand
 * 27.08.2026), damit die Seite nicht wie ein fremdes Formular wirkt, in das jemand seinen
 * Ausweis lädt: Akzent #e32828, Blau #296aab, Gelb #ffab00, Grün #43c875.
 *
 * DIESE SEITE GEHÖRT NICHT INS COCKPIT-DUNKEL. Sie ist eine Kundenseite und sieht aus wie der
 * Shop, nicht wie ein Verwaltungswerkzeug.
 *
 * KEINE FREMDE QUELLE: keine Schriftart, kein Bild, kein Skript von außerhalb (Konzept 9.3).
 * Die Schriftfamilie ist deshalb ein Systemstapel und kein Webfont — und das ist hier kein
 * Verzicht: Wer gerade ein 12-MB-Foto hochlädt, soll nicht zusätzlich auf eine Schriftdatei
 * warten, und ein Webfont brächte auf der Seite, die stabil wirken muss, ein Flackern beim
 * Nachladen mit.
 *
 * ==> DREI DINGE HABEN SICH AM 31.08.2026 GEÄNDERT <==
 *
 * 1. FÜLLFARBE IST NICHT TEXTFARBE. Das Grün #43c875 misst auf Weiß 2,15:1 und war trotzdem
 *    die Farbe der Häkchen, also der einzigen Erfolgsmeldung der Seite. Gelb lag bei 1,90:1,
 *    der Grauton der Formatangaben bei 3,32:1. Alle drei fielen durch WCAG AA. Die Palette
 *    trennt jetzt: die hellen Werte füllen Flächen, für Text und Striche gibt es dunkle
 *    Varianten.
 * 2. EIN BLATT STATT SECHS KISTEN. Vorher lagen sechs weiße Kästen mit demselben 1px-Rahmen
 *    ineinander, teils drei Ebenen tief. Wenn alles gleich schwer umrandet ist, ist nichts
 *    wichtiger als etwas anderes, und genau das ergab den behördlichen Eindruck. Tiefe wird
 *    jetzt genau einmal eingesetzt, für das Blatt; alles darin trennen Haarlinien und Weißraum.
 * 3. DER UPLOAD IST DIE HAUPTSACHE. Aus einem blassen Knopf in einem halbleeren Kasten ist
 *    eine Fläche über die volle Breite geworden, mit Symbol, zwei getrennten Ladephasen,
 *    Vorschau und Häkchen.
 */
:root{
  /* ---------- FLÄCHEN ----------------------------------------------------------------------
     Der Grund ist minimal warm (Papier statt Aktendeckel). #f5f5f5 war neutral-kalt und damit
     exakt der Grauton jedes Verwaltungswerkzeugs. */
  --grund:#f4f2ef; --flaeche:#ffffff; --tief:#faf8f6;

  /* ---------- LINIEN ----------
     --linie-k ist Pflicht für die gestrichelte Kante des Upload-Feldes: Die trägt Bedeutung,
     also gilt WCAG 1.4.11 mit 3:1 (3,44:1 auf --tief). */
  --linie:#e6e1db; --linie-m:#d5cec6; --linie-k:#8d857a;

  /* ---------- TEXT ----------
     --ink3 ist die kleinste zulässige Textfarbe, 4,83:1 auf Weiß. Nichts darunter. */
  --ink:#24262a; --ink2:#55585e; --ink3:#6e727a;

  /* ---------- ROT (aus dem Shop: #e32828) ----------
     --rot füllt (Weiß darauf 4,56:1), --rot-d ist die Textfarbe (6,45:1 auf Weiß). */
  --rot:#e32828; --rot-d:#b81f1f; --rot-t:#8f1717; --rot-h:#fdf2f1;

  /* ---------- BLAU (aus dem Shop: #296aab) ---------- */
  --blau:#296aab; --blau-d:#1f5386; --blau-h:#f1f6fb;

  /* ---------- GRÜN und GELB: hell füllt, dunkel schreibt ---------- */
  --gruen:#43c875; --gruen-d:#157a45; --gruen-h:#f1f9f3;
  --gelb:#ffab00;  --gelb-d:#8a5a00;  --gelb-h:#fdf6e8;

  /* ---------- MASSE ----------
     6px Radius auf einer 700px breiten Fläche liest sich billig: zu klein für Absicht, zu groß
     für scharf. Der Radius wächst mit der Fläche. */
  --rad-s:8px; --rad-m:12px; --rad-l:16px; --pille:999px;

  --takt1:120ms; --takt2:180ms; --takt3:260ms; --takt4:420ms;
  --aus:cubic-bezier(.2,.8,.3,1); --weich:cubic-bezier(.4,0,.2,1); --tick:cubic-bezier(.34,1.3,.64,1);

  /* AUSDRÜCKLICH HELL. Ohne diese Zeile rendern iOS und Chrome bei Systemdunkel den
     Datumswähler und die Ausfüllflächen dunkel in ein helles Formular hinein, und der Kunde
     sieht zwei sich widersprechende Farbwelten in einem Feld. */
  color-scheme:light;
}
*{box-sizing:border-box}
/* `[hidden]` ist eine Regel des Browsers mit sehr niedriger Spezifitaet: Schon `.waehlen`
   schlaegt sie und blendet ein verstecktes Element wieder ein. Auf dieser Seite betraf das
   den Kameraweg, der am Schreibtisch verborgen bleiben soll. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grund); color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --- Kopf ---------------------------------------------------------------------------------- */
.kopf{background:#fff; border-bottom:1px solid var(--linie)}
.kopf-in{display:flex; align-items:center; gap:12px; padding:14px 20px; flex-wrap:wrap;
  max-width:760px; margin:0 auto}
.logo{display:block; height:30px; width:auto; flex:0 0 auto}
.kopf-titel{
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink3); padding-left:12px; border-left:1px solid var(--linie);
}
.kopf-konto{margin-left:auto; color:var(--ink3); font-size:.8125rem}
/* „Das bin nicht ich": bewusst unauffaellig, aber ein echtes Antippziel (WCAG 2.5.8).
   Er ist der Ausweg fuer ein geteiltes Geraet, nicht der Hauptweg. */
.kopf-abmelden{
  display:inline-block; margin-left:8px; padding:6px 4px; min-height:24px;
  font-size:.8125rem; color:var(--ink2); text-decoration:underline; text-underline-offset:2px;
}
.kopf-abmelden:hover{color:var(--ink)}

/* --- Das Blatt ----------------------------------------------------------------------------- */
main{display:block; padding-bottom:12px}
.blatt{
  background:var(--flaeche); margin:20px; border-radius:var(--rad-l);
  box-shadow:0 12px 34px -14px rgba(40,32,24,.20), 0 1px 2px rgba(40,32,24,.05);
  overflow:hidden;
}
.inhalt{padding:26px 22px 30px}
@media (min-width:760px){
  .blatt{max-width:720px; margin:28px auto}
  .inhalt{padding:36px 40px 42px}
}

/* --- Grundbausteine ------------------------------------------------------------------------ */
h1{font-size:clamp(1.625rem,1.15rem+2.1vw,2rem); line-height:1.22; margin:0 0 12px;
  letter-spacing:-.015em; text-wrap:balance}
h2{font-size:1.375rem; line-height:1.25; margin:0 0 10px; letter-spacing:-.01em}
h3{font-size:1.0625rem; margin:0 0 8px}
p{margin:0 0 14px; max-width:62ch}
.lead{font-size:1.1875rem; color:var(--ink2); margin:0 0 22px; max-width:62ch}
.hilf{font-size:.9375rem; color:var(--ink2)}
/* 15px, nicht 12,8px: Fuer eine Zielgruppe mit vielen ueber 40 ist alles darunter keine
   Information mehr, sondern Dekoration — und „bis 15 MB" liest man wirklich. */
.fein{font-size:.875rem; color:var(--ink3); margin:6px 0 0}
.rechtsbuendig{text-align:right}
.kicker{text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:var(--ink3);
  margin:0 0 6px; font-weight:700}
a{color:var(--blau-d); text-underline-offset:2px}
b,strong{color:var(--ink)}

/* Nur fuer die Sprachausgabe. Das Gegenstueck zu jedem `aria-hidden` an einem Zeichen: Das
   Symbol ist Bild, der Zustand steht als Wort daneben. */
.nur-vorlesen{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* --- Fortschrittskopf ---------------------------------------------------------------------- */
/* NUR AUF DEN FUENF SCHRITTEN. Auf der Status-, Bestaetigungs- und Datenschutzseite waere er
   falsch, dort gibt es keinen Fortschritt. */
.fortschritt{
  position:sticky; top:0; z-index:5; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--linie); padding:13px 22px 0;
}
@media (min-width:760px){ .fortschritt{padding:15px 40px 0} }
/* Bei starkem Zoom (WCAG 1.4.10 rechnet mit 320 x 256 CSS-Pixeln) frisst ein klebender Kopf
   von 75px fast ein Drittel der Hoehe. Dann steht er lieber mit. */
@media (max-height:480px){ .fortschritt{position:static} }
.fs-zeile{display:flex; align-items:baseline; gap:10px; margin-bottom:11px; flex-wrap:wrap}
.fs-zahl{font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--rot-d)}
.fs-name{font-size:.9375rem; font-weight:600}
.fs-rest{margin-left:auto; font-size:.8125rem; color:var(--ink3)}
.fs-bahn{display:flex; gap:5px; padding-bottom:12px}
.fs-bahn span{flex:1; height:4px; border-radius:var(--pille); background:var(--linie);
  transition:background var(--takt3) var(--aus)}
.fs-bahn span.da{background:var(--gruen)}
.fs-bahn span.jetzt{background:var(--rot)}

/* --- Hinweise ------------------------------------------------------------------------------ */
.hinweis{
  border:1px solid var(--linie); background:var(--tief); border-radius:var(--rad-m);
  padding:14px 16px; margin:0 0 20px; font-size:.9375rem; line-height:1.6;
}
/* NUR DIE ERSTE ZEILE IST DIE UEBERSCHRIFT. Vorher wurde jedes <b> im Fliesstext zum Block,
   und aus „die Zugangsnummer (sechs Zeichen ...)" wurden drei Zeilen mit zwei Umbruechen
   mitten im Satz. */
.hinweis > b:first-child{display:block; margin-bottom:3px}
.hinweis.info{background:var(--blau-h); border-color:#cfe0f0}
.hinweis.gut{background:var(--gruen-h); border-color:#cdead9}
.hinweis.acht{background:var(--gelb-h); border-color:#f0e0bd}
.hinweis.err{background:var(--rot-h); border-color:#f3cfcc; color:var(--rot-d)}
.hinweis.err b{color:var(--rot-d)}
.hinweis.err > b:first-child{display:block}
.hinweis ul{margin:8px 0 0; padding-left:20px}
.hinweis li{margin:5px 0}
.hinweis p{margin:10px 0 0}
/* Der Knopf im Kasten (Stand noch einmal schicken). */
.hinweis form{margin:10px 0 0}
.hinweis:focus{outline:2px solid var(--blau); outline-offset:3px}

.vertrauen{
  display:flex; gap:11px; align-items:flex-start; padding:13px 15px; margin:0 0 24px;
  background:var(--tief); border:1px solid var(--linie); border-radius:var(--rad-m);
  font-size:.875rem; color:var(--ink2); line-height:1.55;
}
.vertrauen svg{flex:0 0 18px; margin-top:2px; color:var(--gruen-d)}

/* --- Aufklappbares ------------------------------------------------------------------------- */
.klapp{border:1px solid var(--linie); border-radius:var(--rad-m); background:var(--tief);
  margin:0 0 22px}
.klapp summary{
  padding:14px 18px; cursor:pointer; font-weight:600; font-size:.9375rem; list-style:none;
  display:flex; align-items:center; gap:10px; min-height:48px;
}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary svg{transition:transform var(--takt2) var(--aus); color:var(--ink3); flex:0 0 auto}
.klapp[open] summary svg{transform:rotate(90deg)}
.klapp summary:focus-visible{outline:2px solid var(--blau); outline-offset:-2px;
  border-radius:var(--rad-m)}
.klapp .innen{padding:0 18px 16px; font-size:.9375rem; color:var(--ink2)}
.klapp ul{margin:0; padding-left:20px}
.klapp li{margin:6px 0}

/* --- Formularfelder ------------------------------------------------------------------------ */
.felder{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px}
@media (max-width:600px){.felder{grid-template-columns:1fr}}
.feld label{display:block; font-weight:600; font-size:.9375rem; margin-bottom:6px}
/* 16px (1rem), nicht weniger: iOS Safari zoomt bei allem darunter beim Antippen hinein und
   rueckt danach das Layout. Auf einer Seite fuers Telefon vier Felder, vier Rucker. */
.feld input{
  width:100%; padding:12px 14px; border:1px solid var(--linie-m); border-radius:var(--rad-s);
  font:inherit; font-size:1rem; background:#fff; color:var(--ink);
  transition:border-color var(--takt2) var(--weich), box-shadow var(--takt2) var(--weich);
}
/* ECHTES outline, nicht nur der Schein: Im Windows-Kontrastmodus verwirft der Browser jeden
   box-shadow, und uebrig blieb gar kein sichtbarer Fokus (Befund 31.08.2026). */
.feld input:focus{outline:2px solid var(--blau); outline-offset:1px;
  border-color:var(--blau); box-shadow:0 0 0 3px rgba(41,106,171,.30)}
.feld.schlecht input{border-color:var(--rot-d); box-shadow:0 0 0 3px rgba(184,31,31,.14)}
.feldfehler{margin:6px 0 0; font-size:.875rem; color:var(--rot-d); font-weight:600}

/* Der Honigtopf. Nicht `display:none` — manche Skripte überspringen versteckte Felder gerade
   deshalb. Er steht außerhalb des Sichtfelds und ist für die Tastatur nicht erreichbar. */
.topf{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* --- Einwilligung -------------------------------------------------------------------------- */
.haken-block{background:var(--tief); border:1px solid var(--linie); border-radius:var(--rad-m);
  padding:18px 20px; margin-bottom:22px}
/* Das Label umschliesst die ganze Zeile: kein 17px-Ziel in der Praxis. */
.haken{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; cursor:pointer;
  font-size:.9375rem; line-height:1.7}
.haken:last-of-type{margin-bottom:0}
.haken input{flex:0 0 auto; width:20px; height:20px; margin-top:3px; accent-color:var(--rot);
  cursor:pointer}
.haken input:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
/* Der Link steht UNTER dem Haken, nicht darin: Ein Fehlgriff daneben setzte sonst auf dem
   Telefon eine rechtliche Einwilligung. */
.haken-link{margin:-6px 0 14px 32px; font-size:.875rem}
.haken-link a{display:inline-block; padding:6px 2px; min-height:24px}

/* --- Zähler -------------------------------------------------------------------------------- */
.zaehler{display:flex; align-items:center; gap:12px; margin:0 0 18px}
.zaehler-text{font-size:.9375rem; font-weight:600}
.zaehler-pillen{display:flex; gap:6px; margin-left:auto}
.zaehler-pillen i{display:block; width:26px; height:8px; border-radius:var(--pille);
  background:var(--linie-m); transition:background var(--takt3) var(--aus)}
.zaehler-pillen i.da{background:var(--gruen); animation:pille var(--takt3) var(--tick)}
@keyframes pille{0%{transform:scale(1)} 55%{transform:scale(1.14)} 100%{transform:scale(1)}}

/* --- Die Upload-Karte ---------------------------------------------------------------------- */
.doc{
  position:relative; background:var(--tief); border:2px dashed var(--linie-k);
  border-radius:var(--rad-l); padding:18px; margin-bottom:16px; overflow:hidden;
  transition:border-color var(--takt2) var(--aus), background var(--takt2) var(--aus),
             box-shadow var(--takt2) var(--aus);
}
.doc:focus{outline:2px solid var(--blau); outline-offset:3px}
.doc-reihe{display:flex; gap:15px; align-items:flex-start}
.doc-kachel{
  flex:0 0 48px; width:48px; height:48px; border-radius:var(--rad-m);
  background:var(--blau-h); color:var(--blau); display:grid; place-items:center;
  transition:background var(--takt2) var(--aus), color var(--takt2) var(--aus);
}
.doc-koerper{flex:1; min-width:0}
.doc-titel{font-weight:600; font-size:1.0625rem; margin:0 0 5px; display:flex; gap:8px;
  align-items:baseline; flex-wrap:wrap}
.doc-pflicht{color:var(--rot-d); font-size:.8125rem; font-weight:600}
.doc-erklaerung{font-size:.9375rem; color:var(--ink2); margin:0; line-height:1.55; max-width:none}
.doc-format{font-size:.875rem; color:var(--ink3); margin:6px 0 0; max-width:none}

/* Zustand: fertig. DIE KANTE IST ZIERDE, NICHT AUSSAGE: --gruen misst auf Weiss nur 2,15:1
   und traegt damit keinen Zustand. Sie darf das auch nicht muessen, denn derselbe Zustand
   steht zusaetzlich im Haekchen der Kachel (5,02:1), im Befundtext und in der Dateiliste. */
.doc.fertig{background:#fff; border-style:solid; border-color:var(--linie);
  border-left:3px solid var(--gruen)}
.doc.fertig .doc-kachel{background:var(--gruen-h); color:var(--gruen-d)}
.doc.teil{background:#fff; border-style:solid; border-color:var(--linie);
  border-left:3px solid var(--gelb)}
.doc.teil .doc-kachel{background:var(--gelb-h); color:var(--gelb-d)}
/* Zustand: angenommen, aber nicht in Ordnung („Das ist kein Personalausweis"). Weisser Grund
   wie fertig und teil, denn die Datei liegt und der Weg bleibt offen — aber rot in Kante und
   Kachel, damit die Karte nicht das Gegenteil dessen sagt, was im Befund darunter steht.
   Kein Ruetteln: Der Kunde hat nichts falsch gemacht, das die Seite ihm vorwerfen muesste. */
.doc.mangel{background:#fff; border-style:solid; border-color:var(--linie);
  border-left:3px solid var(--rot)}
.doc.mangel .doc-kachel{background:var(--rot-h); color:var(--rot-d)}
.doc.laeuft{background:#fff; border-style:solid; border-color:var(--blau)}
.doc.laeuft .doc-kachel{background:var(--blau); color:#fff}
.doc.fehler{background:var(--rot-h); border-style:solid; border-color:var(--rot-d);
  animation:ruettel 220ms var(--weich)}
.doc.fehler .doc-kachel{background:var(--rot); color:#fff}
.doc.fehler .doc-titel{color:var(--rot-d)}
@keyframes ruettel{
  0%{transform:translateX(0)} 25%{transform:translateX(-6px)} 50%{transform:translateX(5px)}
  75%{transform:translateX(-3px)} 100%{transform:translateX(0)}}

/* Das gezeichnete Häkchen. Der einzige Moment, in dem die Seite Erleichterung zeigen darf. */
.haken-svg .strich{stroke-dasharray:26; stroke-dashoffset:26;
  animation:zeichnen 320ms var(--tick) 60ms forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}

.vorschau{flex:0 0 auto; width:56px; height:72px; border-radius:6px; overflow:hidden;
  border:1px solid var(--linie-m); background:#f7f5f2}
.vorschau img{display:block; width:100%; height:100%; object-fit:cover}

/* --- Die zwei Wege zur Datei --------------------------------------------------------------- */
.doc-wege{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:13px}
.waehlen{display:inline-block}
/* NICHT display:none. Ein so verstecktes Dateifeld faellt aus dem Tab-Fluss, und damit gibt es
   fuer jemanden, der nur mit Tastatur oder Schaltersteuerung arbeitet, KEINEN Weg, eine Datei
   zu waehlen: Der Rest funktioniert, genau der eine Schritt nicht (Befund 31.08.2026).
   Visuell verstecken statt entfernen, dann bleibt es bedienbar. */
.waehlen input[type=file]{position:absolute; opacity:0; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}
/* Der Fokus muss am sichtbaren Teil erscheinen, sonst sieht man ihn nirgends. */
.waehlen input[type=file]:focus-visible + .knopf-umriss{outline:2px solid var(--blau);
  outline-offset:2px}
.knopf-umriss{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:11px 20px;
  border:1px solid var(--linie-m); background:#fff; color:var(--ink); border-radius:var(--pille);
  font-size:.9375rem; font-weight:600; cursor:pointer;
  transition:border-color var(--takt2) var(--weich), color var(--takt2) var(--weich);
}
.knopf-umriss:hover{border-color:var(--blau); color:var(--blau-d)}
/* Der zweite Weg ist bewusst leichter: Auf dem Telefon ist die Kamera der Hauptweg, am
   Schreibtisch blendet das Skript sie ganz aus und dieser hier wird zum einzigen. */
.waehlen.datei .knopf-umriss{border:0; background:none; padding:11px 2px; min-height:44px;
  color:var(--blau-d); text-decoration:underline; text-underline-offset:3px; font-weight:600}
.waehlen.datei .knopf-umriss:hover{color:var(--ink)}
/* Ohne Kameraweg ist dieser hier der Hauptknopf und sieht auch so aus. */
.doc-wege:not(:has(.kamera:not([hidden]))) .waehlen.datei .knopf-umriss{
  border:1px solid var(--linie-m); background:#fff; color:var(--ink); padding:11px 20px;
  text-decoration:none}
/* Ein deaktiviertes Feld darf nicht bedienbar aussehen (fehlende verschluesselte Ablage). */
.waehlen:has(input:disabled) .knopf-umriss{opacity:.5; cursor:default; color:var(--ink3)}

/* --- Ladezustand --------------------------------------------------------------------------- */
/* ==> DER FORTSCHRITT SITZT IN DER KACHEL <==
   Bis zum 04.09.2026 lief eine 4 Pixel hohe blaue Linie am unteren Rand der Karte. Sie lag
   ausserhalb des Blicks (der ruht auf der Kachel und dem gerade gedrueckten Knopf), und ihre
   zwei Phasen sahen fast gleich aus. Der Ring sitzt an der Stelle, an der am Ende das Haekchen
   erscheint: Man sieht dort hin, weil dort die Antwort kommt. */
.ring{display:block}
.ring .spur{stroke:rgba(255,255,255,.32)}
.ring .fahrt{stroke:#fff; transition:stroke-dashoffset 180ms linear}
/* WEITER ALS DIE UEBERTRAGUNG: Phase 2 trennt „Datei reist" von „wir sehen sie uns an".
   Ein Ring, der bei 100 % stehenbliebe, sieht aus wie „fertig, aber haengt" - und genau da
   tippt jemand ein zweites Mal. */
.ring.pruefen .fahrt{
  stroke-dasharray:26 74; stroke-dashoffset:0; transition:none;
  transform-origin:18px 18px; animation:kreisen 900ms linear infinite;
}
@keyframes kreisen{from{transform:rotate(-90deg)} to{transform:rotate(270deg)}}
/* Solange etwas laeuft, gibt es nichts zu waehlen: Ein zweiter Griff zum Knopf schickt
   dieselbe Seite ein zweites Mal, und bei zwoelf Heftseiten faellt das niemandem auf. */
.doc.laeuft .doc-wege{display:none}
.laufzeile{display:block; font-size:.875rem; color:var(--ink2); margin:9px 0 0;
  font-variant-numeric:tabular-nums}
.doc-abbrechen{
  display:block; appearance:none; background:none; border:0; font:inherit; font-size:.875rem;
  font-weight:600; color:var(--ink2); text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; padding:10px 2px; min-height:44px; margin-top:2px;
}
.doc-abbrechen:hover{color:var(--rot-d)}

/* --- Befund der Sofortprüfung -------------------------------------------------------------- */
/* ==> NICHT `display:none` <==
   Ein leerer Bereich mit `display:none` steht NICHT im Barrierefreiheitsbaum. Er entstand
   damit erst in dem Moment, in dem er befuellt wird, und genau dann wird die erste Aenderung
   nicht angesagt: „Wir schauen uns das an ..." kam nie an. Er bleibt also stehen und nimmt
   nur keinen Raum ein. */
.doc-stand{margin-top:0}
.doc-stand:not(:empty){margin-top:11px}
.befund{font-size:.9375rem; line-height:1.55}
.befund b{display:block; margin-bottom:2px}
.befund p{margin:3px 0 0; color:var(--ink2); font-size:.9375rem; max-width:none}
.befund.ok b{color:var(--gruen-d)}
.befund.warn b{color:var(--gelb-d)}
.befund.err b{color:var(--rot-d)}

/* --- Die Häkchenliste ---------------------------------------------------------------------- */
.seiten{list-style:none; margin:13px 0 0; padding:11px 0 0; border-top:1px solid var(--linie);
  font-size:.9375rem}
.seiten.offen-liste{border-top:0; padding-top:0; margin:0 0 18px}
.seiten li{display:flex; gap:9px; align-items:flex-start; padding:4px 0; color:var(--ink2)}
.seiten .hk{flex:0 0 17px; margin-top:3px; color:var(--linie-k); display:block}
.seiten li.da{color:var(--ink)}
.seiten li.da .hk{color:var(--gruen-d)}
.seiten li.fehlt{color:var(--gelb-d); font-weight:600}
.seiten li.fehlt .hk{color:var(--gelb-d)}

/* --- Die Liste der Dateien mit ihrem „entfernen" ------------------------------------------- */
.dateiliste{list-style:none; margin:11px 0 0; padding:11px 0 0; border-top:1px solid var(--linie);
  font-size:.875rem; color:var(--ink3)}
.dateiliste li{display:flex; align-items:center; gap:10px; padding:4px 0}
.dateiliste .name{color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 44px wie alles andere auf dieser Seite, nicht 40. WCAG 2.5.8 verlangt 24, die Hausregel 44. */
.textknopf{
  appearance:none; background:none; border:0; font:inherit; font-size:.875rem; font-weight:600;
  color:var(--blau-d); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  padding:10px 2px; min-height:44px; display:inline-block;
}
.textknopf.weg{color:var(--rot-d); margin-left:auto}
.textknopf:focus-visible{outline:2px solid var(--blau); outline-offset:2px}

/* --- Übersicht (Schritt 5) ----------------------------------------------------------------- */
.uebersicht{border:1px solid var(--linie); border-radius:var(--rad-m); padding:18px 20px;
  margin-bottom:18px}
.uebersicht h3{margin:0 0 12px; font-size:.9375rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink3)}
.angabenliste{display:grid; grid-template-columns:max-content 1fr; gap:6px 20px; margin:0 0 6px;
  font-size:.9375rem}
.angabenliste dt{color:var(--ink3)}
.angabenliste dd{margin:0; font-weight:600}

/* --- Knöpfe -------------------------------------------------------------------------------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; appearance:none; border:0;
  font:inherit; font-weight:700; cursor:pointer; text-decoration:none;
  background:var(--rot); color:#fff; border-radius:var(--pille);
  padding:14px 28px; min-height:52px; font-size:1.0625rem;
  transition:background var(--takt2) var(--weich), transform var(--takt1) var(--weich);
}
.knopf:hover{background:var(--rot-d); color:#fff}
.knopf:active{background:var(--rot-t); transform:translateY(1px)}
.knopf:focus-visible{outline:2px solid var(--blau); outline-offset:3px}
/* Ein grauer Knopf mit weisser Schrift misst 1,47:1 und ist praktisch unlesbar. Gedaempft
   heisst gedaempft, nicht unsichtbar. */
.knopf[disabled]{background:#e6e6e6; color:#5a5a5a; cursor:not-allowed}
.knopf[disabled]:hover{background:#e6e6e6; color:#5a5a5a}
.knopf.voll{width:100%}
.knopf.gross{font-size:1.125rem; padding:16px 32px}
.knopf.still{background:none; color:var(--ink2); font-weight:600; padding:14px 8px}
.knopf.still:hover{background:none; color:var(--ink); text-decoration:underline}
.knopf.still-rahmen{background:none; color:var(--blau-d); border:1px solid var(--linie-m);
  font-size:.9375rem; padding:11px 20px; min-height:44px}
.knopf.still-rahmen:hover{background:var(--blau-h); color:var(--blau-d); border-color:var(--blau)}
.fussleiste{display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:20px;
  border-top:1px solid var(--linie); flex-wrap:wrap}
.fussleiste .rechts{margin-left:auto}

/* --- Abschluss und Status ------------------------------------------------------------------ */
.abschluss{text-align:center; padding:8px 0 4px}
.abschluss p{margin-left:auto; margin-right:auto}
.siegel{width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--gruen-h);
  color:var(--gruen-d); display:grid; place-items:center}
.siegel.schlecht{background:var(--rot-h); color:var(--rot-d)}
.vorgangsnr{margin-top:20px; color:var(--ink3); font-size:.875rem}
.vorgang-no{
  display:inline-block; margin-top:8px; padding:11px 20px; border-radius:var(--rad-m);
  background:var(--tief); border:1px solid var(--linie); color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1.0625rem;
  letter-spacing:.06em;
}
.schritte{list-style:none; margin:22px 0 20px; padding:0}
.schritte li{display:flex; gap:13px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--linie)}
.schritte li:last-child{border-bottom:0}
.schritte .pkt{flex:0 0 20px; margin-top:3px; color:var(--gruen-d)}
.schritte li.offen{color:var(--ink3)}
.schritte li.offen .pkt{color:var(--linie-m)}
.schritte i{display:block; font-style:normal; font-size:.8125rem; color:var(--ink3)}

/* --- Datenschutzerklärung ------------------------------------------------------------------ */
.ds h2{margin:26px 0 8px; font-size:1.0625rem; color:var(--ink)}
.ds ul{padding-left:20px} .ds li{margin:5px 0}
.ds-tab{width:100%; border-collapse:collapse; margin:10px 0 6px; font-size:.9375rem}
.ds-tab th{text-align:left; font-weight:600; padding:8px 12px 8px 0; vertical-align:top;
  width:42%; color:var(--ink2)}
.ds-tab td{padding:8px 0; vertical-align:top}
.ds-tab tr+tr th,.ds-tab tr+tr td{border-top:1px solid var(--linie)}
.ds-stand{margin-top:26px; padding-top:12px; border-top:1px solid var(--linie);
  color:var(--ink3); font-size:.875rem}

/* --- Fuß ----------------------------------------------------------------------------------- */
/* --ink2, nicht --ink3: Der Fuss liegt ausserhalb des Blattes, also auf --grund und nicht
   auf Weiss. Dort misst --ink3 nur 4,32:1 und faellt bei 14px durch AA. */
.fuss{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding:18px 22px 30px;
  color:var(--ink2); font-size:.875rem; max-width:760px; margin:0 auto}
/* Antippziele auch hier: 13,6px inline war unter der Schwelle aus WCAG 2.5.8. */
.fuss a{display:inline-block; padding:6px 2px; min-height:24px}
.fuss-rechts{margin-left:auto}

/* --- Bewegung ------------------------------------------------------------------------------ */
/* Was verschwindet, ist Bewegung: Heben, Ruetteln, Ueberschwingen, Schimmer. Farb- und
   Deckkraftwechsel duerfen bleiben, sie tragen die Bedeutung. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .doc.fehler{animation:none}
  .ring.pruefen .fahrt{animation:none; stroke-dasharray:100; stroke-dashoffset:0}
}

/* Im Windows-Kontrastmodus verwirft der Browser jeden box-shadow und ersetzt Farben systemweit.
   Ein Fokus, der nur aus einem Schein besteht, verschwindet dort restlos. */
@media (forced-colors:active){
  .feld input:focus, .knopf:focus-visible, .textknopf:focus-visible, .doc:focus,
  .haken input:focus-visible, .waehlen input[type=file]:focus-visible + .knopf-umriss{
    outline:3px solid Highlight; outline-offset:2px;
  }
  .doc.fertig,.doc.teil,.doc.mangel{border-left-width:5px}
  .fs-bahn span.da,.fs-bahn span.jetzt{border:2px solid Highlight}
}