/* Prüfstrecke — Ladebildschirm mit benannten Schritten.
   v1.0 · 2026-09-10 · Herkunft: Startup Hilfe Dubai V4 (entwurf/assets/css/fall.css)
   Die Farben kommen aus den Marken-Variablen der aufnehmenden Seite; ohne sie
   greifen die Ausweichwerte. */
:root{ --pruef-akzent:var(--blau,#0631EF); --pruef-haken:var(--mint,#10FFC4);
  --pruef-linie:var(--linie,#E2DED7); --pruef-text:var(--text,#16202E);
  --pruef-leise:var(--text-leise,#5A6675); --pruef-akte:var(--schrift-akte,ui-monospace,monospace) }

.pruefstrecke{ max-width:640px; margin-inline:auto; text-align:center;
  padding:clamp(20px,4vh,56px) 0 }
.pruefstrecke .vorzeile{ color:var(--pruef-akzent); margin-bottom:14px }
.pruefstrecke h2{ font-weight:600; letter-spacing:-.015em;
  font-size:clamp(26px,3vw,40px); line-height:1.1; margin-bottom:14px }
.pruefstrecke .was-passiert{ font-size:16px; line-height:1.6; color:var(--pruef-leise);
  max-width:46ch; margin:0 auto clamp(24px,3.5vh,38px) }

.pruefliste{ list-style:none; text-align:left; display:grid; gap:6px }
.pruefliste li{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:14px;
  align-items:center; padding:14px 16px; border:1px solid transparent; border-radius:10px;
  transition:background var(--dauer-ui) var(--ease-out), border-color var(--dauer-ui) var(--ease-out),
             color var(--dauer-ui) var(--ease-out), opacity var(--dauer-ui) var(--ease-out) }
.pruefliste .was{ font-size:15.5px; line-height:1.4 }
.pruefliste .stand{ font-family:var(--pruef-akte); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase }
/* Das Zeichen traegt die drei Zustaende: Punkt (wartet), Kreisel (laeuft),
   Haken (fertig). Ein Zustand, der wie der andere aussieht, ist kein Zustand. */
.pruefliste .zeichen{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--pruef-linie); position:relative }
.pruefliste .zeichen::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--pruef-linie) }

.pruefliste li[data-stand="wartet"]{ opacity:.45 }
.pruefliste li[data-stand="wartet"] .was{ color:var(--pruef-leise) }

.pruefliste li[data-stand="laeuft"]{ background:rgba(6,49,239,.045); border-color:rgba(6,49,239,.30) }
.pruefliste li[data-stand="laeuft"] .was{ font-weight:600 }
.pruefliste li[data-stand="laeuft"] .stand::after{ content:"läuft"; color:var(--pruef-akzent) }
.pruefliste li[data-stand="laeuft"] .zeichen{ border-color:rgba(6,49,239,.35) }
.pruefliste li[data-stand="laeuft"] .zeichen::before{ width:100%; height:100%; background:none;
  border:2px solid rgba(6,49,239,.22); border-top-color:var(--pruef-akzent); border-radius:50%;
  animation:pruef-kreisel var(--dauer-kreisel,700ms) linear infinite }
@keyframes pruef-kreisel{ to{ transform:rotate(360deg) } }

.pruefliste li[data-stand="fertig"] .zeichen{ border-color:var(--pruef-haken); background:var(--pruef-haken) }
.pruefliste li[data-stand="fertig"] .zeichen::before{ content:"✓"; width:auto; height:auto;
  background:none; color:#04352A; font-size:13px; line-height:1 }
.pruefliste li[data-stand="fertig"] .stand::after{ content:"fertig"; color:var(--pruef-leise) }

.pruefzeile{ margin-top:clamp(20px,3vh,30px) }
.pruefbalken{ height:2px; background:var(--pruef-linie); border-radius:2px; overflow:hidden }
.pruefbalken i{ display:block; height:100%; background:var(--pruef-akzent); transform:scaleX(0);
  transform-origin:left center; transition:transform var(--dauer-flaeche,320ms) var(--ease-out) }
.pruefzeile .zeile{ display:flex; justify-content:space-between; margin-top:10px;
  color:var(--pruef-leise) }

/* ==========================================================================

/* Vorzeile, Titel und Erklärzeile — im Erstbau kamen sie aus der Seiten-CSS.
   Hier stehen sie im Bauteil, damit es allein lauffähig ist. */
.pruefstrecke__vorzeile{ font-family:var(--pruef-akte); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pruef-akzent); margin-bottom:14px }
.pruefstrecke__titel{ font-size:clamp(26px,3vw,40px); line-height:1.1; margin-bottom:14px }
.pruefstrecke__was{ font-size:16px; line-height:1.6; color:var(--pruef-leise);
  max-width:46ch; margin:0 auto clamp(24px,3.5vh,38px) }
.pruefzeile .zeile span{ font-family:var(--pruef-akte); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase }

/* v1.1 · Reduzierte Bewegung: sanftere Fassung, nicht null — der Stand bleibt lesbar,
   der Kreisel dreht langsam statt gar nicht, Balken und Zeilen wechseln ohne Fahrt. */
@media (prefers-reduced-motion: reduce){
  .pruefliste li{ transition:background 120ms linear, border-color 120ms linear }
  .pruefliste li[data-stand="laeuft"] .zeichen::before{ animation-duration:2400ms }
  .pruefbalken i{ transition:transform 120ms linear }
}