/* Amperatec · Ergebnisbild im Hero und Abschnitt „So funktioniert es“ (29.09.2026, Umstellung auf Nutzen, Anweisung Leo)
   Präfixe: .hero-ergebnis (Karte im Hero) und .ab- (Ablauf und die Fensterinhalte, die Hero und Szene 3 teilen).
   Setzt tokens.css und bundle.css voraus: .fenster mit __leiste/__punkte/__titel/__status/__inhalt/__fuss, .kennzeichnung,
   .karte, .textblock, .plakette, .titel, .symbol. Farben, Radien, Abstände, Schatten und Zeiten nur über die Tokens;
   Schriftgrößen sind die Stufen aus tokens.css (ui-label 11, ui-sub 12, value 13, ui-row 14, ui-title 15, kpi-mono 22,
   axis 10). Am Desktop steht keine Schrift unter 11 px; 10 px nur für Achswerte in Fenstern unter 480 px Breite.
   Grundsatz wie die frühere Hero-Bühne (design/amperatec/components/hero.css): Das CSS zeigt das Endbild. ablauf.js
   legt den Ablauf mit der Web Animations API darüber (Deckkraft, Versatz, Maßstab; die Kurven decken gegenläufig
   verschobene Ebenen auf). Ohne Skript, bei reduzierter Bewegung und im Druck steht das Endbild; ohne Skript stehen die
   drei Szenen untereinander. Das Ergebnisbild im Hero blendet einmal per CSS ein (Abschnitt F).
   Aufbau: A Fensterinhalte · B Szene 1 Aufbau · C Szene 2 Sequenz · D Auswertung (Szene 3 und Hero) · E Hero-Karte ·
   F Einblenden im Hero · G Bühne mit Reitern und Knopf · H Druck. */


/* ================================================================ A Fensterinhalte (Hero und Ablauf) */

.ab-fenster { text-align: left; }
.ab-fenster .fenster__inhalt { display: flex; flex-direction: column; }
.ab-fw {
  --ab-px: var(--space-14);
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--text-value);
  line-height: 1.45;
  color: var(--ink-2);
}
@container fenster (min-width: 560px) { .ab-fw { --ab-px: var(--space-20); } }
.ab-fw :where(p, ul, ol) { margin: 0; }
.ab-fw :where(ul, ol) { padding: 0; list-style: none; }

.ab-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-i--voll { fill: currentColor; stroke: none; }

.ab-label {
  font-size: var(--text-ui-label);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ab-tag {
  display: inline-block;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--tag-bg);
  font-size: var(--text-ui-label);
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Stapel: Zustände liegen übereinander in einer Zelle, Breite und Höhe richten sich nach dem größten; sichtbar ist im
   Endbild die letzte Schicht (ablauf.js blendet die früheren im Ablauf nacheinander über). */
.ab-stapel { display: inline-grid; }
.ab-stapel > * { grid-area: 1 / 1; }
.ab-stapel > :not(:last-child) { opacity: 0; }

/* Status-Pillen der Titelleiste, ebenso gestapelt */
.ab-status { display: inline-grid; justify-items: end; max-width: 100%; margin-left: auto; }
.ab-status > * { grid-area: 1 / 1; }
.ab-status > :not(:last-child) { opacity: 0; }
/* Passt die Pille nicht neben den Titel, steht sie in allen Szenen gleich in einer zweiten Zeile links (die Titelleiste
   ist dann in jeder Szene gleich hoch, beim Überblenden springt keine Linie). */
@container fenster (max-width: 599.98px) {
  .ab-fenster .ab-status { flex-basis: 100%; justify-items: start; margin-left: 0; }
  .ab-fenster .fenster__punkte { display: none; }
}

/* Fensterfuß: gleiche Mindesthöhe in allen Szenen */
.ab-fenster .fenster__fuss { min-height: 54px; }
.ab-fenster .fenster__fuss .kennzeichnung { margin: 0 0 0 auto; }
.ab-knoepfe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }

/* Knöpfe im Fenster: Nachbildungen ohne Funktion */
.ab-knopfbild {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 30px;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink-a15);
  font-size: var(--text-ui-sub);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.ab-knopfbild .ab-i { width: 13px; height: 13px; }
.ab-knopfbild--s { min-height: 26px; padding: var(--space-2) var(--space-10); font-size: var(--text-ui-label); }
.ab-knopfbild--voll { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.ab-knopfbild--akzent { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.ab-knopfbild--aus { background: var(--surface-3); color: var(--muted); box-shadow: none; }
.ab-knopfbild--ok { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.ab-knopfbild--aktiv { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.ab-livepunkt { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.ab-wort { font-size: var(--text-ui-sub); line-height: 1.4; font-weight: 600; white-space: nowrap; }
.ab-wort--ok { color: var(--ok); }
.ab-wort--offen { color: var(--muted); }

/* Eingabefelder. Der getippte Text liegt über einer unsichtbaren Reserve mit dem ganzen Text, damit das Feld beim
   Tippen weder Breite noch Höhe ändert. Schreibmarke und Fokusring zeigt nur der Ablauf. */
.ab-feld {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: var(--text-value);
  line-height: 1.5;
  color: var(--ink);
}
.ab-feld > .ab-i { color: var(--muted); }
.ab-feld__text { display: grid; flex: 1 1 auto; min-width: 0; }
.ab-feld__text > * { grid-area: 1 / 1; min-width: 0; }
.ab-feld__reserve { visibility: hidden; }
.ab-feld__platzhalter { overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; opacity: 0; }
.ab-feld__marke {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -.2em;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
}
.ab-feld__fokus {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--accent);
  border-radius: inherit;
  box-shadow: 0 0 0 3px var(--accent-a15);
  opacity: 0;
  pointer-events: none;
}


/* ================================================================ B Szene 1 · Aufbau */

.ab-aufbau { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.ab-katalog {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-14) var(--ab-px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ab-katalog__zahl { font-size: var(--text-ui-sub); line-height: 1.4; color: var(--muted); }
/* Schmales Fenster (Telefon): Trefferzahl, Gerätetags und die Anschlusszeilen der vorhandenen Geräte weg, damit das
   Fenster nicht höher wird als der Bildschirm. Anschluss und Adresse des neuen Netzteils bleiben. */
@container fenster (max-width: 479.98px) {
  .ab-katalog__zahl { display: none; }
  .ab-g__kopf > .ab-tag { display: none; }
  .ab-g:not(.ab-g--neu) > .ab-g__anschluss { display: none; }
}
.ab-treffer {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-8) var(--space-10) var(--space-8) var(--space-6);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.ab-treffer__name { flex: 1 1 auto; min-width: 0; font-size: var(--text-value); line-height: 1.4; font-weight: 600; color: var(--ink); }
.ab-griff { color: var(--subtle); fill: currentColor; stroke: none; }
/* Das gezogene Abbild des Treffers. Lage und Weg setzt ablauf.js; im Endbild unsichtbar. */
.ab-geist {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 200px;
  border-color: var(--accent-line);
  box-shadow: var(--shadow-window);
  opacity: 0;
  pointer-events: none;
}

.ab-geraete { container: ab-geraete / inline-size; min-width: 0; padding: var(--space-14) var(--ab-px) var(--space-16); }
.ab-liste { margin-top: var(--space-2); }
.ab-g {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas: "feld kopf status" "feld ansch ansch" ". detail detail";
  align-items: center;
  column-gap: var(--space-10);
  row-gap: var(--space-2);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--line);
}
.ab-g__feld {
  grid-area: feld;
  align-self: start;
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
  color: var(--ok);
}
.ab-g__warte {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: var(--surface-3);
  color: var(--muted);
  opacity: 0;
}
.ab-g__warte .ab-i { fill: currentColor; stroke: none; }
.ab-g__kopf { grid-area: kopf; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); min-width: 0; }
.ab-g__name { font-size: var(--text-ui-row); line-height: 1.4; font-weight: 600; color: var(--ink); }
.ab-g__anschluss { grid-area: ansch; min-width: 0; font-size: var(--text-ui-sub); line-height: 1.45; color: var(--muted); }
.ab-g__status { grid-area: status; align-self: start; justify-items: end; padding-top: var(--space-4); }
/* Bestätigungszeile unter dem neuen Gerät, als Stapel: „Noch nicht geprüft“ mit Knopf, dann die Antwort auf *IDN? */
.ab-g__detail {
  grid-area: detail;
  display: grid;
  margin-top: var(--space-6);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  font-size: var(--text-ui-sub);
  line-height: 1.45;
  color: var(--ink-2);
}
.ab-g__detail > p { display: flex; gap: var(--space-6); align-items: flex-start; min-width: 0; }
.ab-g__detail .ab-i { width: 13px; height: 13px; margin-top: 2px; color: var(--ok); }
.ab-g__offen { align-items: center; color: var(--muted); }
.ab-g__offen .ab-i { margin-top: 0; color: var(--subtle); }
.ab-g__pruefen { margin-left: auto; }
/* Leerer Platz im Aufbau (Anfang des Ablaufs) und Hervorhebung beim Ziehen, über der ganzen Reihe samt
   Bestätigungszeile, damit am Anfang keine Lücke darunter steht */
.ab-g__platz, .ab-g__ziel {
  grid-column: 1 / -1;
  grid-row: 1 / 4;
  align-self: stretch;
  margin: calc(-1 * var(--space-4)) 0;
  border-radius: var(--radius-control);
  opacity: 0;
  pointer-events: none;
}
.ab-g__platz {
  display: flex;
  align-items: center;
  padding: 0 var(--space-12);
  border: 1px dashed var(--line-strong);
  font-size: var(--text-ui-sub);
  line-height: 1.4;
  color: var(--muted);
}
.ab-g__ziel { border: 1px dashed var(--accent); background: var(--accent-soft); }

/* Adressfeld in der Reihe des Netzteils */
.ab-feld--adresse {
  display: inline-flex;
  vertical-align: middle;
  margin-block: calc(-1 * var(--space-2));
  padding: 0 var(--space-6);
  border-color: var(--line-2);
  border-radius: var(--radius-xs);
  font-size: var(--text-ui-sub);
  line-height: 1.6;
}
.ab-feld--adresse .ab-feld__platzhalter { font-family: var(--font-sans); }

/* Fähigkeiten: Beschriftung und Chips in einem Fluss (spart eine Zeile) */
.ab-kann { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-14); }
.ab-kann > .ab-label { margin-right: var(--space-4); }
.ab-chips { display: contents; }
.ab-chip {
  padding: var(--space-4) var(--space-10);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-ui-sub);
  line-height: 1.45;
  color: var(--ink-2);
}

/* Sehr breite Liste: jede Reihe einzeilig, Bestätigung darunter */
@container ab-geraete (min-width: 680px) {
  .ab-g {
    grid-template-columns: 28px minmax(0, 1.05fr) minmax(0, 1fr) auto;
    grid-template-areas: "feld kopf ansch status" ". detail detail detail";
    column-gap: var(--space-14);
  }
  .ab-g__status { align-self: center; padding-top: 0; }
  .ab-g__platz, .ab-g__ziel { grid-row: 1 / 3; }
}
/* Katalog als Seitenleiste neben dem Aufbau (ab 600 px Fensterbreite, also auch am Tablet) */
@container fenster (min-width: 600px) {
  .ab-aufbau { grid-template-columns: minmax(180px, 29%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .ab-katalog { padding: var(--space-16); border-bottom: 0; border-right: 1px solid var(--line-strong); }
  .ab-geraete { padding: var(--space-16) var(--ab-px) var(--space-16); }
}


/* ================================================================ C Szene 2 · Sequenz */

.ab-sequenz { display: flex; flex-direction: column; }
.ab-streifen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-16);
  padding: var(--space-10) var(--ab-px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--text-ui-sub);
  line-height: 1.5;
  color: var(--muted);
}
.ab-streifen__kopf, .ab-streifen__rechts { font-weight: 600; color: var(--ink-2); }

.ab-sequenz__raster { display: grid; gap: var(--space-14); padding: var(--space-14) var(--ab-px) 0; }
.ab-beschreibung, .ab-vorschlag { display: grid; align-content: start; gap: var(--space-6); min-width: 0; }
.ab-feld--text { align-items: flex-start; padding: var(--space-10) var(--space-12); line-height: 1.55; }
@container fenster (min-width: 600px) {
  .ab-sequenz__raster { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--space-20); }
}
@container fenster (min-width: 700px) { .ab-feld--text { font-size: var(--text-ui-row); } }

.ab-bausteine { display: grid; gap: var(--space-6); }
.ab-b {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  grid-template-areas: "nr name rolle" "nr werte werte";
  align-items: baseline;
  gap: var(--space-2) var(--space-10);
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.ab-b__nr {
  grid-area: nr;
  align-self: start;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  font-size: var(--text-ui-label);
  line-height: 1;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ab-b__name { grid-area: name; font-size: var(--text-value); line-height: 1.45; font-weight: 600; color: var(--ink); }
.ab-b__rolle { grid-area: rolle; font-size: var(--text-ui-sub); line-height: 1.45; color: var(--muted); white-space: nowrap; }
.ab-b__werte { grid-area: werte; font-size: var(--text-ui-sub); line-height: 1.55; color: var(--ink-2); }
/* Annahmen der KI: gestrichelt umrandet, damit sie beim Prüfen ins Auge fallen, ohne wie ein Fehler auszusehen */
.ab-annahme {
  display: inline-block;
  margin-left: var(--space-4);
  padding: 0 var(--space-6);
  border: 1px dashed var(--subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-ui-label);
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.ab-messen { padding: var(--space-4) var(--space-10) 0; font-size: var(--text-ui-sub); line-height: 1.55; color: var(--ink-2); }
.ab-messen__kopf { font-weight: 600; color: var(--ink); }

.ab-pruefung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-6) var(--space-16);
  margin: var(--space-14) var(--ab-px) 0;
  padding-top: var(--space-12);
  border-top: 1px solid var(--line);
}
.ab-pruefung__liste { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-16); }
.ab-pruefung__liste > li { display: inline-flex; align-items: center; gap: var(--space-6); font-size: var(--text-ui-sub); line-height: 1.45; color: var(--ink-2); }
.ab-pk { display: inline-grid; color: var(--ok); }
.ab-pk > * { grid-area: 1 / 1; }
.ab-pk__offen { color: var(--subtle); opacity: 0; }

.ab-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-14);
  margin-top: auto;
  padding: var(--space-16) var(--ab-px);
}
.ab-freigabe, .ab-start { justify-items: start; }
/* Schmales Fenster (Telefon): Aufbau-Hinweis im Streifen und der Zusatz der Vorschlagsbeschriftung weg, Bausteine
   enger. Der Zusatz „Sie prüfen und geben frei“ steht dort im Nutzen-Satz unter dem Fenster. */
@container fenster (max-width: 479.98px) {
  .ab-streifen__rechts, .ab-label__zusatz { display: none; }
  .ab-b { padding: var(--space-6) var(--space-10); }
  .ab-pruefung { gap: var(--space-4); }
  .ab-pruefung__liste { gap: var(--space-4) var(--space-14); }
  .ab-aktionen { gap: var(--space-8) var(--space-12); padding-block: var(--space-12); }
}
.ab-vorpruefung > * { display: inline-flex; align-items: center; gap: var(--space-6); font-size: var(--text-ui-sub); line-height: 1.4; font-weight: 600; white-space: nowrap; }
.ab-vorpruefung__offen { color: var(--muted); }
.ab-vorpruefung__offen .ab-i { color: var(--subtle); }
.ab-vorpruefung__ok { color: var(--ok); }


/* ================================================================ D Auswertung (Szene 3 und Hero) */

.ab-auswertung { display: grid; align-content: start; gap: var(--space-16); padding: var(--space-14) var(--ab-px) var(--space-16); }
@container fenster (min-width: 600px) {
  .ab-auswertung { grid-template-columns: minmax(0, 1fr) minmax(200px, 33%); column-gap: var(--space-20); align-items: start; }
}

.ab-plot { min-width: 0; }
.ab-plot__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-12); margin-bottom: var(--space-8); }
.ab-plot__titel { font-size: var(--text-ui-title); line-height: 1.375; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.ab-plot__unter { font-size: var(--text-ui-sub); line-height: 1.45; color: var(--muted); }
.ab-plot__rahmen { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "yt yt" ". fl" ". xt"; }
.ab-plot__achse { font-size: var(--text-ui-label); line-height: 1.45; color: var(--muted); }
.ab-plot__achse--y { grid-area: yt; margin-bottom: var(--space-6); }
.ab-plot__achse--x { grid-area: xt; justify-self: end; }
.ab-plot__flaeche {
  grid-area: fl;
  position: relative;
  height: 172px;
  margin-bottom: var(--space-20);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
@container fenster (min-width: 480px) {
  .ab-plot__rahmen { grid-template-columns: 34px minmax(0, 1fr); }
  .ab-plot__flaeche { height: 196px; }
}
.ab-plot__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-plot__gitter { stroke: var(--line-strong); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ab-plot__band { fill: var(--line-strong); fill-opacity: .55; }
.ab-plot__bandrand { fill: none; stroke: var(--subtle); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ab-plot__lauf {
  fill: none;
  stroke: var(--trace-1);
  stroke-opacity: .3;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Z11, der neueste Lauf: im Ablauf erst voll gezeichnet (live), danach gedämpft wie die anderen */
.ab-plot__lauf--neu { stroke-opacity: 1; opacity: .3; }
.ab-plot__lauf--z08 { stroke: var(--accent); stroke-opacity: 1; stroke-width: 2; }
/* Ebenen der Kurvengruppen (frühere Läufe, Z11, Z08): Aufdecken von links nach rechts, indem die Ebene (overflow:
   hidden) nach links und ihr Inneres gleich weit nach rechts verschoben wird; die Kurve bleibt stehen */
.ab-plot__ebene { position: absolute; inset: 0; overflow: hidden; }
.ab-plot__ebene-innen { position: absolute; inset: 0; }
.ab-plot__marke {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 6px var(--accent-a15);
}
.ab-plot__tick {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--text-ui-label);
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ab-plot__tick--y { right: 100%; margin-right: var(--space-6); translate: 0 -50%; }
.ab-plot__tick--x { top: 100%; margin-top: var(--space-4); translate: -50% 0; }
@container fenster (max-width: 479.98px) {
  .ab-plot__tick { font-size: var(--text-axis); }
}

.ab-legende { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-14); margin-top: var(--space-2); font-size: var(--text-ui-sub); line-height: 1.45; color: var(--muted); }
.ab-legende > li { display: inline-flex; align-items: center; gap: var(--space-6); }
.ab-legende > li::before { content: ""; flex: none; width: 16px; height: 0; border-top: 2px solid var(--ink-a15); }
.ab-legende > .ab-legende__z08::before { border-top-color: var(--accent); }
.ab-legende > .ab-legende__band::before { height: 8px; border: 1px dashed var(--subtle); background: var(--line-2); }

.ab-seite { display: grid; align-content: start; gap: var(--space-10); min-width: 0; }
.ab-lauf-stapel { display: grid; }
.ab-lauf { display: flex; align-items: flex-start; gap: var(--space-6); font-size: var(--text-ui-sub); line-height: 1.45; font-weight: 600; color: var(--ink-2); }
.ab-lauf > .ab-livepunkt { margin-top: 6px; }
.ab-lauf--live { color: var(--accent); }
.ab-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
@container fenster (min-width: 600px) { .ab-kacheln { grid-template-columns: minmax(0, 1fr); } }
@container fenster (max-width: 479.98px) {
  .ab-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-kachel:nth-child(3) { display: none; }
}
.ab-kachel {
  display: grid;
  min-width: 0;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--line);
  border-radius: var(--radius-tile);
  background: var(--surface-2);
}
.ab-kachel, .ab-kachel__schicht { align-content: space-between; }
.ab-kachel__schicht { display: grid; min-width: 0; }
.ab-kachel__kopf {
  font-size: var(--text-ui-label);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Einheiten und Messwerte nie in Versalien */
.ab-einheit { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; text-transform: none; }
.ab-kachel__wert {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-kpi-mono);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.ab-marker {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: var(--text-ui-sub);
  line-height: 1.5;
  color: var(--ink-2);
}
.ab-marker__ring { flex: none; width: 12px; height: 12px; margin-top: 3px; border: 2px solid var(--accent); border-radius: 50%; }
.ab-marker__kopf { font-weight: 700; color: var(--accent); }


/* ================================================================ E Ergebnisbild im Hero */

.hero-ergebnis {
  position: relative;
  padding: var(--space-16);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-card);
  text-align: left;
}
@media (min-width: 640px) { .hero-ergebnis { padding: var(--space-20); border-radius: var(--radius-card); } }
@media (min-width: 1024px) { .hero-ergebnis { padding: var(--space-24); } }
.hero-ergebnis > .fenster { box-shadow: var(--shadow-window-lg); }


/* ================================================================ F Einblenden des Ergebnisbilds (einmal beim Laden)
   Per CSS, damit das Bild schon beim ersten Zeichnen im Anfangszustand steht (ein Skript mit defer käme erst nach dem
   ersten Bild und ließe das Endbild kurz aufblitzen). Nur mit Skript (html.js), nur am Bildschirm, nicht bei reduzierter
   Bewegung; zusammen 2,5 s. ablauf.js setzt .is-sofort vor dem Drucken. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .hero-ergebnis:not(.is-sofort) :is(.ab-plot__band, .ab-plot__bandrand) { animation: ab-ein var(--dur-state) var(--ease-standard) 200ms both; }
  .js .hero-ergebnis:not(.is-sofort) .ab-legende { animation: ab-ein var(--dur-state) var(--ease-standard) 300ms both; }
  .js .hero-ergebnis:not(.is-sofort) .ab-plot__ebene { animation: ab-vorhang 1000ms var(--ease-out) 400ms both; }
  .js .hero-ergebnis:not(.is-sofort) .ab-plot__ebene-innen { animation: ab-vorhang-innen 1000ms var(--ease-out) 400ms both; }
  .js .hero-ergebnis:not(.is-sofort) .ab-plot__ebene[data-ebene="neu"],
  .js .hero-ergebnis:not(.is-sofort) .ab-plot__ebene[data-ebene="neu"] > .ab-plot__ebene-innen { animation-delay: 480ms; }
  .js .hero-ergebnis:not(.is-sofort) .ab-plot__ebene[data-ebene="z08"],
  .js .hero-ergebnis:not(.is-sofort) .ab-plot__ebene[data-ebene="z08"] > .ab-plot__ebene-innen { animation-duration: 1100ms; animation-delay: 650ms; }
  .js .hero-ergebnis:not(.is-sofort) .ab-plot__marke { animation: ab-pop var(--dur-pop) var(--ease-pop) 1750ms both; }
  .js .hero-ergebnis:not(.is-sofort) .ab-marker { animation: ab-hoch var(--dur-state) var(--ease-item) 1950ms both; }
  .js .hero-ergebnis:not(.is-sofort) .ab-kachel__wert { animation: ab-hoch var(--dur-state) var(--ease-item) 2050ms both; }
  .js .hero-ergebnis:not(.is-sofort) .ab-kachel:nth-child(2) .ab-kachel__wert { animation-delay: 2110ms; }
  .js .hero-ergebnis:not(.is-sofort) .ab-kachel:nth-child(3) .ab-kachel__wert { animation-delay: 2170ms; }
}
/* Liegt das Bild beim Laden ganz unter dem Falz (Telefon), hält ablauf.js das Einblenden mit .is-wartend an, bis es ins
   Bild kommt (Prüfung TEC2-23). Ohne Skript gibt es kein .is-wartend, das Einblenden läuft beim Laden. */
.js .hero-ergebnis.is-wartend * { animation-play-state: paused !important; }
@keyframes ab-ein { from { opacity: 0; } }
@keyframes ab-vorhang { from { transform: translateX(-100%); } }
@keyframes ab-vorhang-innen { from { transform: translateX(100%); } }
@keyframes ab-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes ab-hoch { from { opacity: 0; transform: translateY(6px); } }


/* ================================================================ G Abschnitt „So funktioniert es“: Bühne */

.ab-buehne { container: ab-buehne / inline-size; margin-top: var(--space-36); }
@media (min-width: 1024px) { .ab-buehne { margin-top: var(--space-48); } }
.ab-buehne__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }

/* Ohne Skript: keine Reiter, kein Knopf; die drei Szenen stehen untereinander, jede mit Kopf */
html:not(.js) .ab-reiter, html:not(.js) .ab-unten { display: none; }
.ab-szenen { display: grid; gap: var(--space-48); min-width: 0; }
.ab-szene { min-width: 0; }
.ab-szene__kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-14);
  row-gap: var(--space-4);
  margin-bottom: var(--space-16);
}
.ab-szene__nr {
  grid-row: 1 / span 2;
  font-size: var(--text-h2);
  line-height: .9;
  font-weight: 700;
  letter-spacing: -.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ab-szene__name { font-size: var(--text-h3-l); line-height: 1.3; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.ab-szene__satz { max-width: var(--measure-wide); font-size: var(--text-mittel); line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* Mit Skript: ein Fenster, die Szenen liegen darin übereinander (gleiche Höhe, keine springende Seite); die aktive ist
   sichtbar, beim Wechsel blenden sie über. Rahmen und Schatten trägt die Fläche, die Szenen selbst sind rahmenlos. */
.js .ab-szenen {
  gap: 0;
  background: var(--surface-inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-window-lg);
  overflow: clip;
}
.js .ab-szene {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  transition: opacity var(--dur-state) var(--ease-standard), visibility 0s linear var(--dur-state);
}
.js .ab-szene.is-aktiv { transition-delay: 0s; }
/* Sicherung: Liefe ablauf.js vor site.js, schaltete site.js die Reiter mit und setzte hidden auf die Szenen. Die Szenen
   müssen aber für die gemeinsame Höhe im Raster bleiben; sichtbar ist nur die mit .is-aktiv. */
.js .ab-szene[hidden] { display: flex !important; }
.js .ab-szene:not(.is-aktiv) { opacity: 0; visibility: hidden; }
.js .ab-szene__kopf { display: none; }
.js .ab-szene > .fenster { flex: 1 1 auto; display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.js .ab-szene > .fenster > .fenster__inhalt { flex: 1 1 auto; }
.js .ab-szene:focus-visible { outline: none; }
/* Fokus auf dem Reiterfeld: Der Ring liegt außen um die Fläche. Innen auf der Szene verdeckten ihn Titelleiste, Katalog
   und Fuß des Fensters fast ganz (Prüfung TEC2-04). */
.js .ab-szenen:has(> .ab-szene:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reiter: am Telefon und Tablet drei nebeneinander über dem Fenster (Nummer und Name), der Nutzen-Satz steht unter dem
   Fenster; ab 1060 px Bühnenbreite (Bildschirm ab etwa 1220 px) senkrecht links neben dem Fenster, mit Satz. */
.ab-reiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.ab-reiter__tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: start;
  gap: var(--space-4);
  min-width: 0;
  min-height: 44px;
  padding: var(--space-10) var(--space-10) var(--space-14);
  border-radius: var(--radius-item);
  background: transparent;
  color: var(--ink-2);
  text-align: left;
  transition: background-color var(--dur-ui) var(--ease-standard);
}
.ab-reiter__tab[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--accent); }
/* Die Fläche allein (surface-2 auf Weiß, 1,10:1) zeigte den gewählten Reiter nicht deutlich genug; die Akzentkante hat
   5,1:1 (WCAG 1.4.11, Prüfung TEC2-05). Bei erzwungenen Farben ein Rahmen in der Systemfarbe für Auswahl. */
@media (forced-colors: active) {
  .ab-reiter__tab[aria-selected="true"] { outline: 2px solid SelectedItem; outline-offset: -2px; }
}
@media (hover: hover) {
  .ab-reiter__tab:not([aria-selected="true"]):hover { background: var(--bg); }
}
.ab-reiter__nr {
  font-size: var(--text-stat);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ab-reiter__name { font-size: var(--text-ui-sub); line-height: 1.3; font-weight: 700; color: var(--ink); hyphens: auto; }
.ab-reiter__satz { display: none; }
.ab-reiter__fortschritt {
  position: absolute;
  left: var(--space-10);
  right: var(--space-10);
  bottom: var(--space-6);
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--line-strong);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-standard);
}
.ab-reiter__balken { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.ab-buehne:is([data-zustand="laeuft"], [data-zustand="wartet"], [data-zustand="pausiert"]) .ab-reiter__tab[aria-selected="true"] .ab-reiter__fortschritt { opacity: 1; }

@container ab-buehne (min-width: 560px) {
  .ab-reiter { gap: var(--space-8); }
  .ab-reiter__tab { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-10); padding: var(--space-12) var(--space-14) var(--space-16); }
  .ab-reiter__name { font-size: var(--text-title); line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
  .ab-reiter__fortschritt { left: var(--space-14); right: var(--space-14); bottom: var(--space-8); }
}

/* Über dem Fenster (im Quelltext zwischen Reitern und Fenster, damit der Knopf vor dem bewegten Inhalt erreichbar ist;
   Prüfung TEC2-07 und TEC2-23): Nutzen-Satz des aktiven Schritts (gestapelt, die Höhe richtet sich nach dem längsten)
   und Knopf. Ab 1060 px Bühnenbreite unter den Reitern links. */
.ab-unten { display: grid; justify-items: center; gap: var(--space-8); text-align: center; }
.ab-nutzen { display: grid; max-width: var(--measure); }
.ab-nutzen__satz {
  grid-area: 1 / 1;
  font-size: var(--text-mittel);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease-standard);
}
.ab-nutzen__satz.is-aktiv { opacity: 1; }

/* Steuerknopf (WCAG 2.2.2): Anhalten, Weiter, Nochmal abspielen. Geist-Knopf wie „Anhalten“ in der alten Hero-Bühne. */
.ab-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 40px;
  padding: var(--space-8) var(--space-14);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: var(--text-button);
  line-height: 1.5;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur-ui) var(--ease-standard), box-shadow var(--dur-ui) var(--ease-standard), scale var(--dur-ui) var(--ease-standard);
}
@media (hover: hover) {
  .ab-knopf:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-a15); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ab-knopf:hover { scale: 1.03; }
}
.ab-knopf__symbol { display: none; }
.ab-knopf:is([data-modus="abspielen"], [data-modus="weiter"]) .ab-knopf__symbol--abspielen,
.ab-knopf[data-modus="anhalten"] .ab-knopf__symbol--anhalten,
.ab-knopf[data-modus="nochmal"] .ab-knopf__symbol--nochmal { display: inline-block; }

/* Breite Bühne: Reiter senkrecht links, Knopf unten in derselben Spalte, Fenster rechts */
@container ab-buehne (min-width: 1060px) {
  .js .ab-buehne__raster {
    grid-template-columns: clamp(270px, 28%, 340px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-40);
    row-gap: var(--space-16);
  }
  .js .ab-reiter { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .js .ab-szenen { grid-column: 2; grid-row: 1 / span 2; }
  .js .ab-unten { grid-column: 1; grid-row: 2; align-self: end; justify-items: start; text-align: left; }
  .ab-nutzen { display: none; }
  .ab-knopf { margin-left: calc(-1 * var(--space-4)); }

  .ab-reiter__tab {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-4);
    padding: var(--space-16) var(--space-20) var(--space-20);
    border-radius: var(--radius-inner);
  }
  .ab-reiter__nr { grid-row: 1 / span 2; font-size: var(--text-h2-s); line-height: .95; }
  .ab-reiter__name { font-size: var(--text-h3-l); line-height: 1.3; font-weight: 800; letter-spacing: -.02em; }
  .ab-reiter__satz { display: block; grid-column: 2; font-size: var(--text-small); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
  .ab-reiter__tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }
  .ab-reiter__tab[aria-selected="true"] .ab-reiter__satz { color: var(--ink-2); }
  .ab-reiter__fortschritt { left: calc(var(--space-20) + 48px + var(--space-6)); right: var(--space-20); bottom: var(--space-10); }
}


/* ================================================================ H Druck: alle drei Szenen als Endbilder untereinander */
@media print {
  .ab-reiter, .ab-unten { display: none !important; }
  .js .ab-szenen { gap: var(--space-32); border: 0; background: none; box-shadow: none; overflow: visible; }
  .js .ab-szene { grid-area: auto; opacity: 1 !important; visibility: visible !important; }
  .js .ab-szene__kopf { display: grid; }
  .js .ab-szene > .fenster { border: 1px solid var(--line-strong); border-radius: var(--radius-inner); }
  .hero-ergebnis * { animation: none !important; }
}


/* ================================================================ I Vier Schritte und Szene „Über Nacht“ (Leo, 02.10.2026)
   Reiter: vier statt drei; die Uhrzeit des Schritts steht im breiten Layout hinter dem Namen. */
.ab-reiter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-reiter__zeit { display: none; margin-left: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
@container ab-buehne (min-width: 1060px) {
  .ab-reiter__zeit { display: inline; }
}

.ab-nacht { display: grid; align-content: start; gap: var(--space-14); padding: var(--space-16) var(--space-20) var(--space-20); }
.ab-nacht__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.ab-nacht__uhr { font-family: var(--font-mono); font-size: 30px; line-height: 1; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-nacht__plan { --platz: 92px; position: relative; display: grid; gap: var(--space-10); margin-top: var(--space-4); }
.ab-nacht__zeile { display: grid; grid-template-columns: var(--platz) minmax(0, 1fr); align-items: center; column-gap: var(--space-12); }
.ab-nacht__platz { font-size: var(--text-ui-sub); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ab-nacht__bahn { position: relative; height: 44px; border-radius: 10px; background: var(--surface-2); }
.ab-nacht__lauf {
  position: absolute; top: 5px; bottom: 5px; left: var(--von); width: var(--breite);
  overflow: hidden; border-radius: 7px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
  display: flex; align-items: center;
}
.ab-nacht__fuellung { position: absolute; inset: 0; background: var(--accent-soft); transform-origin: left center; }
.ab-nacht__name {
  position: relative; display: block; padding: 0 8px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.3;
  color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-nacht__lauf--z08 { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ab-nacht__lauf--wdh { box-shadow: inset 0 0 0 1px var(--accent-line); }
.ab-nacht__lauf--z08 .ab-nacht__name, .ab-nacht__lauf--wdh .ab-nacht__name { color: var(--accent); font-weight: 600; }
.ab-nacht__marke {
  position: absolute; top: 50%; left: var(--bei); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-a15);
}
.ab-nacht__achse { position: relative; height: 16px; margin-left: calc(var(--platz) + var(--space-12)); font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.ab-nacht__achse span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ab-nacht__achse span:first-child { transform: none; }
.ab-nacht__spur { position: absolute; top: -4px; bottom: 20px; left: calc(var(--platz) + var(--space-12)); right: 0; pointer-events: none; }
.ab-nacht__jetzt { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); }
.ab-nacht__jetzt::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ab-nacht__log { display: grid; gap: 6px; margin-top: var(--space-4); list-style: none; font-size: var(--text-ui-sub); line-height: 1.45; color: var(--ink-2); }
.ab-nacht__log li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--space-8); }
.ab-nacht__log .ab-mono { color: var(--muted); }
.ab-nacht__wache { gap: 6px; }
.ab-nacht__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--space-8); background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius-tile); overflow: hidden; }
.ab-nacht__zahl { display: grid; gap: 2px; padding: 12px 14px; background: var(--surface); }
.ab-nacht__wert { font-family: var(--font-mono); font-size: 24px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.ab-nacht__was { font-size: var(--text-ui-sub); line-height: 1.35; color: var(--muted); }
.ab-nacht__zahl--akzent .ab-nacht__wert { color: var(--accent); }
@container fenster (max-width: 599.98px) {
  .ab-nacht__plan { --platz: 66px; }
  .ab-nacht__uhr { font-size: 24px; }
  .ab-nacht__name { font-size: 10.5px; padding: 0 5px; }
  .ab-nacht__wert { font-size: 20px; }
  .ab-nacht__achse span:nth-child(even) { display: none; }
}


/* Szene 4 „Am Morgen“: Befund der Nacht, Frage an die Läufe, Antwort mit Diagramm und Quelle (Leo, 02.10.2026) */
.ab-morgen { display: grid; align-content: start; gap: var(--space-14); padding: var(--space-16) var(--space-20) var(--space-20); }
.ab-morgen__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius-tile); overflow: hidden; }
.ab-morgen__zahl { display: grid; gap: 2px; padding: 10px 14px; background: var(--surface); }
.ab-morgen__wert { font-family: var(--font-mono); font-size: 22px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.ab-morgen__was { font-size: var(--text-ui-sub); line-height: 1.35; color: var(--muted); }
.ab-morgen__zahl--akzent .ab-morgen__wert { color: var(--accent); }
.ab-morgen__frage { display: flex; align-items: center; gap: var(--space-10); }
.ab-morgen__frage .ab-feld__text { flex: 1 1 auto; min-width: 0; }
.ab-morgen__funke { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.ab-morgen__funke svg { width: 14px; height: 14px; fill: currentColor; }
.ab-morgen__antwort { display: grid; gap: var(--space-14); }
.ab-morgen__legende { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); font-size: var(--text-ui-sub); color: var(--muted); }
.ab-morgen__legende-band { display: inline-flex; align-items: center; gap: 6px; }
.ab-morgen__legende-band i { width: 14px; height: 10px; border-radius: 2px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.ab-morgen__svg { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.ab-morgen__band { fill: var(--accent-soft); }
.ab-morgen__achse { stroke: var(--line-strong); stroke-width: 1; }
.ab-morgen__balken { fill: var(--drawing-dim); transform-box: fill-box; transform-origin: 50% 100%; }
.ab-morgen__balken--akzent { fill: var(--accent); }
.ab-morgen__balkenwert { font-family: var(--font-mono); font-size: 11.5px; fill: var(--ink-2); }
.ab-morgen__balkenwert--akzent { fill: var(--accent); font-weight: 600; }
.ab-morgen__name { font-family: var(--font-mono); font-size: 11.5px; fill: var(--muted); }
.ab-morgen__seite { display: grid; align-content: start; gap: var(--space-12); }
.ab-morgen__befund { padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-tile) var(--radius-tile) 0; background: var(--surface); font-size: var(--text-mittel); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.ab-morgen__befund-kopf { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ab-morgen__befund strong { color: var(--accent); font-weight: 700; }
.ab-morgen__quellen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ab-morgen__quellen-kopf { margin-right: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ab-morgen__chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
@container fenster (min-width: 640px) {
  .ab-morgen__antwort { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--space-20); }
  .ab-morgen__seite { padding-top: 26px; }
}
@container fenster (max-width: 479.98px) {
  .ab-morgen__wert { font-size: 18px; }
}