/* Oberflow — Stylesheet
 *
 * Gebaut nach der Recherche vom 28.07.2026. Die drei Befunde, die alles treiben:
 *
 * 1. ABSTAENDE WAREN KAPUTT. Vorher: 99px Sektionspolster, also 198px zwischen
 *    zwei Sektionen — bei einer groessten Stufe von 60px im GOV.UK-System.
 *    Dazu 27px Abstand INNERHALB einer Gruppe gegen 198px ZWISCHEN Gruppen:
 *    Verhaeltnis 7:1, wo die Gestalt-Regel etwa 2:1 bis 3:1 verlangt.
 *    Jetzt: feste Stufenleiter, Sektionsabstand ~96px, Verhaeltnis 3:1.
 *
 * 2. TOTER RAUM RECHTS. Eine 68ch-Textspalte (~612px) in einer 1242px-Huelle
 *    liess 630px leer. Jetzt zwei Huellenbreiten: schmal fuer Fliesstext,
 *    breit nur fuer Raster — und Zweispalter, die die Breite wirklich nutzen.
 *
 * 3. KEIN RHYTHMUS. Sechs Sektionen, alle dasselbe Kartenraster. Jetzt
 *    wechselnde Muster, darunter eine dunkle Vollbreiten-Sektion als Zaesur.
 *
 * Unveraendert gilt: keine externen Ressourcen, kein JavaScript, keine
 * Webfonts. outline:none kommt nirgends vor. Grafiken sind Inline-SVG.
 */

/* ---------- Token ---------- */
:root {
  --text: #16324F;
  --text-leise: #5A6672;
  --aktion: #1D7268;
  --aktion-dunkel: #155a52;
  --akzent: #2A9D8F;
  --flaeche: #F4F6F8;
  --dunkel: #16324F;
  --auf-dunkel-leise: #C3D0DC;
  --weiss: #ffffff;
  --rahmen: #DCE3E9;
  --rahmen-stark: #B8C4CE;

  /* Stufenleiter — jeder Abstand kommt hieraus, nichts wird frei erfunden */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;     --s7: 2.5rem;  --s8: 3rem;

  /* Sektionspolster: 38px mobil bis 49px Desktop -> ~98px zwischen Sektionen.
     Gegen die Gruppen-Luecke von 34px ergibt das 2.9:1 — im Zielband der
     Gestalt-Regel (aussen > innen, aber nicht um ein Vielfaches). */
  --luft: clamp(2.25rem, 3.5vw, 2.875rem);

  --huelle-breit: 71rem;
  --huelle-schmal: 42rem;
  --spalte: 66ch;

  --radius: 8px;
  --schatten: 0 1px 2px rgba(22,50,79,.06), 0 4px 12px rgba(22,50,79,.05);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }  /* 17px Basis */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--weiss);
  overflow-wrap: break-word;
}

/* Typo-Stufenleiter, Verhaeltnis 1.25 (Major Third) — traegt Fliesstext und
   dichte Oberflaechen gleichermassen, laut Recherche die sichere Wahl. */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 var(--s3); }
h1 { font-size: clamp(1.95rem, 4.4vw, 2.85rem); letter-spacing: -0.022em; }
h2 { font-size: clamp(1.45rem, 2.9vw, 1.95rem); letter-spacing: -0.014em; }
h3 { font-size: clamp(1.08rem, 1.7vw, 1.2rem);  letter-spacing: -0.006em; }

p, li { max-width: var(--spalte); }
p { margin: 0 0 var(--s4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--aktion); text-underline-offset: 0.18em; }
a:hover { color: var(--aktion-dunkel); }

:focus-visible {
  outline: 2px solid var(--aktion);
  outline-offset: 2px;
  border-radius: 3px;
}
.dunkel :focus-visible { outline-color: #7FD4C6; }

img, svg { max-width: 100%; }

/* ---------- Skip-Link ---------- */
.skip {
  position: absolute; left: 0; top: 0; z-index: 20;
  transform: translateY(-120%);
  background: var(--aktion); color: var(--weiss);
  padding: var(--s3) var(--s5);
  font-weight: 600; text-decoration: none;
}
.skip:focus { transform: translateY(0); color: var(--weiss); }

/* ---------- Huellen ---------- */
.huelle, .huelle-schmal {
  width: 100%; margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.huelle { max-width: var(--huelle-breit); }
.huelle-schmal { max-width: var(--huelle-schmal); }

section { padding-block: var(--luft); }
.flaeche { background: var(--flaeche); }

.dunkel {
  background: var(--dunkel);
  color: var(--weiss);
}
.dunkel h2, .dunkel h3 { color: var(--weiss); }
.dunkel a { color: #7FD4C6; }
.dunkel a:hover { color: var(--weiss); }
.dunkel .leise { color: var(--auf-dunkel-leise); }

/* Sektionskopf — Abstand nach unten aus der Leiter, nicht frei gegriffen */
.kopf-block { max-width: var(--spalte); margin-bottom: var(--s6); }
.kopf-block > p { color: var(--text-leise); font-size: 1.02rem; margin-bottom: 0; }
.dunkel .kopf-block > p { color: var(--auf-dunkel-leise); }

.augenbraue {
  display: block;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--aktion);
  margin-bottom: var(--s2);
}
.dunkel .augenbraue { color: #7FD4C6; }

/* ---------- Kopfzeile ---------- */
.seitenkopf { border-bottom: 1px solid var(--rahmen); }
.seitenkopf .huelle {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s3) var(--s5);
  padding-block: var(--s3);
}
.marke {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; text-decoration: none; color: var(--text);
}
.marke-name { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.marke-zusatz { font-size: 0.78rem; color: var(--text-leise); }

.navi ul {
  display: flex; flex-wrap: wrap; gap: 0 var(--s5);
  list-style: none; margin: 0; padding: 0;
}
.navi a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-weight: 600; font-size: 0.98rem;
  color: var(--text); border-bottom: 3px solid transparent;
}
.navi a:hover { color: var(--aktion); }
.navi a[aria-current="page"] { border-bottom-color: var(--akzent); }

/* ---------- Schaltflaechen ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: var(--s3) var(--s6);
  background: var(--aktion); color: var(--weiss);
  font-size: 1.02rem; font-weight: 600; text-decoration: none;
  border: 2px solid var(--aktion); border-radius: var(--radius);
}
.knopf:hover { background: var(--aktion-dunkel); border-color: var(--aktion-dunkel); color: var(--weiss); }

.dunkel .knopf { background: #7FD4C6; border-color: #7FD4C6; color: #0E2438; }
.dunkel .knopf:hover { background: var(--weiss); border-color: var(--weiss); color: #0E2438; }

.knopf-zweit {
  display: inline-flex; align-items: center; min-height: 50px;
  font-weight: 600; text-decoration: underline;
}

.tat {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4) var(--s5); margin-top: var(--s5);
}
.tat .neben { font-size: 0.92rem; color: var(--text-leise); max-width: 32ch; margin: 0; }
.dunkel .tat .neben { color: var(--auf-dunkel-leise); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 5.5vw, 4rem) var(--luft); }
.hero-raster {
  display: grid; gap: var(--s7) var(--s8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  .hero-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.hero h1 { margin-bottom: var(--s4); }
.hero .subline {
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  max-width: 46ch; color: var(--text-leise); margin-bottom: 0;
}
.frist {
  display: block; max-width: 52ch; margin-bottom: var(--s5);
  padding-left: var(--s3); border-left: 3px solid var(--akzent);
  font-size: 0.94rem; color: var(--text-leise);
}
.vertrauen {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  font-size: 0.92rem; color: var(--text-leise);
}
.vertrauen li { max-width: none; display: flex; align-items: center; gap: var(--s2); }
.vertrauen li::before {
  content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem;
  border-radius: 50%; background: var(--akzent);
}

/* ---------- Zweispalter Text + Grafik ---------- */
.zwei {
  display: grid; gap: var(--s7) var(--s8);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 56rem) {
  .zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zwei.gedreht > :first-child { order: 2; }
}
.zwei > * { min-width: 0; }
.zwei p, .zwei li { max-width: 46ch; }

/* ---------- Raster ---------- */
.raster {
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.raster > li, .raster > div { max-width: none; min-width: 0; }

.karte {
  background: var(--weiss);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--schatten);
}
.karte h3 { margin-bottom: var(--s2); }
.karte p, .karte li { max-width: none; font-size: 0.98rem; }
.dunkel .karte {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}

.karte-betont { border: 2px solid var(--aktion); }
.marke-band {
  display: inline-block; margin-bottom: var(--s3);
  padding: 0.1rem 0.55rem; background: var(--aktion); color: var(--weiss);
  border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* ---------- Preise ---------- */
.preis {
  display: block; margin: var(--s4) 0 var(--s1);
  font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em;
}
.preis-zusatz {
  display: block; font-size: 0.86rem; color: var(--text-leise);
}
.dunkel .preis-zusatz { color: var(--auf-dunkel-leise); }

.preistabelle { width: 100%; border-collapse: collapse; margin-top: var(--s5); font-size: 0.97rem; }
.preistabelle caption { text-align: left; color: var(--text-leise); font-size: 0.9rem; margin-bottom: var(--s3); }
.preistabelle th, .preistabelle td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rahmen); }
.preistabelle thead th { border-bottom: 2px solid var(--rahmen-stark); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.preistabelle td + td, .preistabelle th + th { text-align: right; white-space: nowrap; }
.tabellenrahmen { overflow-x: auto; }

/* ---------- Listen ---------- */
.haken { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.haken li { position: relative; padding-left: var(--s5); margin-bottom: var(--s2); }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.62rem; height: 0.62rem;
  border-left: 2px solid var(--aktion); border-bottom: 2px solid var(--aktion);
  transform: rotate(-45deg);
}
.dunkel .haken li::before { border-color: #7FD4C6; }

/* Nummerierte Liste — noetig, wo der Fliesstext auf (1)/(2)/(3) verweist.
   Ohne sichtbare Nummern laeuft so ein Verweis ins Leere (Fund 30.07.). */
.nummeriert { margin: var(--s4) 0 0; padding-left: var(--s5); }
.nummeriert li { margin-bottom: var(--s2); padding-left: var(--s1); }

/* Folgt eine Ueberschrift direkt auf eine Liste, klebt sie sonst am Block
   darueber statt an dem, den sie einleitet — die Gliederung kippt optisch.
   Kein Werkzeug meldet das; gefunden im Selbst-Audit-Gate 30.07. */
.haken + h2, .haken + h3,
.nein + h2, .nein + h3,
.nummeriert + h2, .nummeriert + h3 { margin-top: var(--s6); }

.nein { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.nein li { position: relative; padding-left: var(--s5); margin-bottom: var(--s2); }
.nein li::before {
  content: ""; position: absolute; left: 0.05rem; top: 0.72em;
  width: 0.7rem; height: 2px; background: var(--rahmen-stark);
}

/* ---------- Ablauf ---------- */
.ablauf {
  counter-reset: schritt; list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.ablauf > li {
  counter-increment: schritt; max-width: none;
  padding-top: var(--s4); border-top: 3px solid var(--akzent);
}
.ablauf > li::before {
  content: counter(schritt);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin-bottom: var(--s3);
  border-radius: 50%; background: var(--aktion); color: var(--weiss);
  font-size: 0.92rem; font-weight: 700;
}
.ablauf h3 { margin-bottom: var(--s1); }
.ablauf p { font-size: 0.96rem; margin-bottom: var(--s1); }
.ablauf .dauer { font-size: 0.88rem; color: var(--text-leise); }

/* ---------- Grafiken ---------- */
.grafik {
  margin: 0;
  background: var(--weiss);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--schatten);
}
.grafik svg { display: block; width: 100%; height: auto; }
.grafik figcaption {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--rahmen);
  font-size: 0.88rem; color: var(--text-leise);
}
.dunkel .grafik {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.dunkel .grafik figcaption { color: var(--auf-dunkel-leise); border-top-color: rgba(255,255,255,.16); }

/* ---------- Befund-Beispiel ---------- */
.befund {
  margin: var(--s6) 0 0; padding: var(--s5);
  background: var(--weiss); border: 1px solid var(--rahmen);
  border-left: 4px solid var(--akzent); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.befund p:last-child { margin-bottom: 0; }
.befund figcaption { margin-top: var(--s4); font-size: 0.88rem; color: var(--text-leise); }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--rahmen); }
.faq details:first-of-type { border-top: 1px solid var(--rahmen); }
.faq summary {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: var(--s4) 0;
  font-weight: 600; font-size: 1.02rem; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--aktion); border-bottom: 2px solid var(--aktion);
  transform: rotate(45deg); margin-top: -0.2rem;
}
.faq details[open] summary::before { transform: rotate(-135deg); margin-top: 0.2rem; }
.faq .antwort { padding: 0 0 var(--s5) var(--s5); }

/* ---------- Kontakt ---------- */
.kontakt {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.kontakt > li { max-width: none; }
.kontakt .art {
  display: block; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: var(--s1);
}
.dunkel .kontakt .art { color: var(--auf-dunkel-leise); }
.kontakt a { display: inline-flex; align-items: center; min-height: 40px; font-size: 1.05rem; font-weight: 600; }
.kontakt .hinweis { display: block; font-size: 0.87rem; color: var(--text-leise); margin-top: 0; }
.dunkel .kontakt .hinweis { color: var(--auf-dunkel-leise); }

/* ---------- Fuss ---------- */
.fuss {
  border-top: 1px solid var(--rahmen);
  padding-block: var(--s7) var(--s8);
  font-size: 0.92rem; color: var(--text-leise);
}
.fuss .huelle > * + * { margin-top: var(--s4); }
.fuss ul { display: flex; flex-wrap: wrap; gap: 0 var(--s5); list-style: none; margin: 0; padding: 0; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.fuss p { max-width: var(--spalte); }

/* ---------- Kontakt in der Kopfzeile (Rang 2) ----------
   Der staerkste Erstkontaktkanal gehoert auf jede Seite, nicht nur auf zwei. */
.kopf-kontakt {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; font-size: 0.94rem; font-weight: 600;
  text-decoration: none; color: var(--text); white-space: nowrap;
}
.kopf-kontakt:hover { color: var(--aktion); }
.kopf-kontakt .zeiten { font-weight: 400; color: var(--text-leise); font-size: 0.86rem; }
@media (max-width: 40rem) { .kopf-kontakt .zeiten { display: none; } }

/* ---------- Ausweg unter jedem Knopf (Rang 2) ---------- */
.ausweg {
  margin: var(--s3) 0 0; font-size: 0.9rem; color: var(--text-leise);
  max-width: 52ch;
}
.dunkel .ausweg { color: var(--auf-dunkel-leise); }
.ausweg a { font-weight: 600; }

/* ---------- Wer das macht (Rang 4) ---------- */
.person {
  border-left: 3px solid var(--akzent);
  padding-left: var(--s5);
  max-width: var(--spalte);
}
.person h2 { margin-bottom: var(--s3); }

/* ---------- Der Satz zum Weitersagen (Rang 12) ---------- */
.merksatz {
  margin: var(--s4) 0 0; padding: var(--s5);
  background: rgba(255,255,255,.08);
  border-left: 4px solid #7FD4C6;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.06rem; line-height: 1.5;
}
.merksatz p { max-width: none; margin: 0; }
section:not(.dunkel) .merksatz {
  background: var(--flaeche); border-left-color: var(--aktion);
}

/* ---------- Arbeitsschritte (Rang 5) ---------- */
.schritte { counter-reset: sr; list-style: none; margin: var(--s4) 0 0; padding: 0; }
.schritte > li {
  counter-increment: sr; position: relative;
  padding-left: var(--s7); margin-bottom: var(--s4); max-width: var(--spalte);
}
.schritte > li::before {
  content: counter(sr);
  position: absolute; left: 0; top: 0.05em;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--aktion); color: var(--weiss);
  font-size: 0.85rem; font-weight: 700;
}
.dunkel .schritte > li::before { background: #7FD4C6; color: #0E2438; }

/* ---------- Ampel-PDF (Rang 1) ---------- */
.ampel-blatt {
  background: var(--weiss); border: 1px solid var(--rahmen-stark);
  border-radius: 4px; padding: var(--s5); box-shadow: var(--schatten);
  max-width: 30rem;
}
.ampel-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); padding-bottom: var(--s3);
  border-bottom: 2px solid var(--dunkel); margin-bottom: var(--s4);
}
.ampel-kopf strong { font-size: 1.05rem; }
.ampel-kopf span { font-size: 0.8rem; color: var(--text-leise); }
.ampel-zeile {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--s3); align-items: start;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rahmen);
  font-size: 0.92rem;
}
.ampel-zeile:last-of-type { border-bottom: 0; }
.punkt {
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  margin-top: 0.32em; flex: 0 0 auto;
}
.punkt-rot   { background: #B3261E; }
.punkt-gelb  { background: #8A6100; }
.punkt-gruen { background: var(--aktion); }
.ampel-stufe { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }

/* ---------- Befundtabelle (Pruefbericht) ---------- */
.befundtabelle { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-top: var(--s4); }
.befundtabelle caption { text-align: left; color: var(--text-leise); font-size: 0.88rem; margin-bottom: var(--s3); }
.befundtabelle th, .befundtabelle td {
  text-align: left; padding: var(--s3); border-bottom: 1px solid var(--rahmen);
  vertical-align: top;
}
.befundtabelle thead th {
  border-bottom: 2px solid var(--rahmen-stark);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.status::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.status-behoben::before { background: var(--aktion); }
.status-offen::before   { background: #8A6100; }
.status-offen  { color: #8A6100; }

/* ---------- Quellenangaben (Rang 11) ---------- */
.quellen { list-style: none; margin: var(--s4) 0 0; padding: 0; font-size: 0.92rem; }
.quellen li { margin-bottom: var(--s2); max-width: var(--spalte); }
.quellen a { font-weight: 600; }

/* ---------- Hilfen ---------- */
.eng   { margin-top: var(--s4); }
.weit  { margin-top: var(--s6); }
.textbreite { max-width: var(--spalte); }
.leise { color: var(--text-leise); }

.nur-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Hero-Szene: der Kunde, der nicht durchkommt ----------
   Bewegte Erklaerung ohne Videodatei und ohne JavaScript — reines CSS
   auf dem Inline-SVG. Kein Drittserver, wenige hundert Byte statt MB.

   Sie laeuft EINMAL in 4,2 s und bleibt dann stehen (forwards).
   Damit greift WCAG 2.2.2 (Pause, Stop, Hide) nicht: die Vorschrift
   gilt erst fuer Bewegung, die laenger als 5 s laeuft.

   prefers-reduced-motion braucht hier KEINE eigene Regel: die globale
   Regel unten drueckt jede Dauer auf 0,01 ms, und weil alle Keyframes
   mit forwards enden, steht dann sofort der Endzustand — drei Haken,
   der rote Schlusspunkt, kein Blinken. Das ist Absicht, nicht Zufall.

   Kontraste im Verlauf gerechnet (Nicht-Text, Mindestwert 3:1):
   #6E7C8B auf #F4F6F8 = 3.94:1 · #1D7268 auf #F4F6F8 = 5.30:1
   #B3261E auf #F4F6F8 = 6.03:1 · Weiss auf #6E7C8B  = 4.27:1        */

.szene .fokus {
  fill: none;
  stroke: #1D7268;
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  opacity: 0;
  animation: szene-fokus 4.2s linear forwards;
}

.szene .halt   { fill: #6E7C8B; }
.szene .halt-1 { animation: szene-halt-1 4.2s linear forwards; }
.szene .halt-2 { animation: szene-halt-2 4.2s linear forwards; }
.szene .halt-3 { animation: szene-halt-3 4.2s linear forwards; }

.szene .haken   { opacity: 0; }
.szene .haken-1 { animation: szene-haken-1 4.2s linear forwards; }
.szene .haken-2 { animation: szene-haken-2 4.2s linear forwards; }
.szene .haken-3 { animation: szene-haken-3 4.2s linear forwards; }

.szene .sperre  { fill: #6E7C8B; animation: szene-sperre 4.2s linear forwards; }
.szene .kreuz   { opacity: 0; animation: szene-schluss 4.2s linear forwards; }
.szene .schluss { opacity: 0; animation: szene-schluss 4.2s linear forwards; }

/* Der Fokusrahmen wandert Station fuer Station nach unten und bleibt
   beim dritten Schritt stehen. Ab 61 % schlaegt er zweimal kurz nach
   Warnrot um, ohne sich zu bewegen: zweimal Tabulator gedrueckt,
   nichts passiert. Genau so verhaelt sich eine echte Tastatursperre —
   der Fokus ruckt nicht, er kommt gar nicht erst weiter.

   Warum Farbwechsel und nicht Ausblenden: Ein Aufblitzen ueber die
   Transparenz haette den Rahmen kurz auf 1.32:1 gedrueckt und damit
   unter den 3:1-Mindestwert fuer Nicht-Text. Beide Farben halten:
   #1D7268 = 5.30:1, #B3261E = 6.03:1 gegen #F4F6F8.
   Zwei Wechsel in 4,2 s liegen zudem weit unter der Drei-Blitze-
   Grenze aus WCAG 2.3.1.                                             */
@keyframes szene-fokus {
  0%              { opacity: 0; transform: translateY(0);    stroke: #1D7268; }
  4%, 18%         { opacity: 1; transform: translateY(0);    stroke: #1D7268; }
  20%, 38%        { opacity: 1; transform: translateY(49px); stroke: #1D7268; }
  40%, 61%        { opacity: 1; transform: translateY(98px); stroke: #1D7268; }
  64%, 66%        { opacity: 1; transform: translateY(98px); stroke: #B3261E; }
  69%, 71%        { opacity: 1; transform: translateY(98px); stroke: #1D7268; }
  74%, 76%        { opacity: 1; transform: translateY(98px); stroke: #B3261E; }
  79%, 100%       { opacity: 1; transform: translateY(98px); stroke: #1D7268; }
}

@keyframes szene-halt-1 { 0%, 16% { fill: #6E7C8B; } 19%, 100% { fill: #1D7268; } }
@keyframes szene-halt-2 { 0%, 36% { fill: #6E7C8B; } 39%, 100% { fill: #1D7268; } }
@keyframes szene-halt-3 { 0%, 56% { fill: #6E7C8B; } 59%, 100% { fill: #1D7268; } }

@keyframes szene-haken-1 { 0%, 17% { opacity: 0; } 21%, 100% { opacity: 1; } }
@keyframes szene-haken-2 { 0%, 37% { opacity: 0; } 41%, 100% { opacity: 1; } }
@keyframes szene-haken-3 { 0%, 57% { opacity: 0; } 61%, 100% { opacity: 1; } }

@keyframes szene-sperre  { 0%, 80% { fill: #6E7C8B; } 88%, 100% { fill: #B3261E; } }
@keyframes szene-schluss { 0%, 82% { opacity: 0; }    90%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}