/* ergoMergo — Instrumenten-Optik: dunkel, kontraststark, Tabellenziffern.
   Primärfall: Handy quer am Lenker, schweißige Daumen, Blick aus Distanz. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--schrift);
  font-size: var(--text-base); line-height: 1.5;
  overscroll-behavior: none; user-select: none;
}
.screen { min-height: 100dvh; padding: max(var(--abstand-3), env(safe-area-inset-top)) var(--abstand-4) var(--abstand-4); max-width: 52rem; margin: 0 auto; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
/* Links (selten: Prüfbericht) — Akzentfarbe, als Hinweiszeile 44 px hoch tippbar */
a { color: var(--accent); }
.hint a { display: inline-flex; align-items: center; min-height: var(--tippflaeche); }

/* ---------- Rollen (docs/stil.md) ----------
   Wiederkehrende Muster EINMAL definiert; Bausteine ergänzen nur, was
   abweicht (Farbe, Gewicht, Abstand). */
/* Versal-Beschriftung: Abschnitte, Feldnamen, Kicker */
.gruppe-titel, .lk-kopf, .g-rolle, .bilanz-head, .tile-kicker, .metric .label,
.listhead, .monat .m-titel, .woche .w-titel {
  font-size: var(--text-xs); font-weight: 400; color: var(--ink3);
  text-transform: uppercase; letter-spacing: var(--sperrung-versal);
}
/* Karte: eigenständiger Block auf dem Hintergrund */
.tile, .plan-karte, .bilanz, .sessions li, .compliance, dialog {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
}
/* Zeile: Eintrag auf einer Karte oder in einem Panel */
.schalter-zeile, .fo-zeile, .ziel-wahl label, .geraete li, .lk-karte, .toast, .d-actions button, .diagnose button {
  background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-m);
}
/* Listenzeilen (Schalter, Geräte, Panel): gleicher Innenabstand, Höhe über min-height */
.schalter-zeile, .fo-zeile, .ziel-wahl label, .geraete li { padding: var(--abstand-15) var(--abstand-3); }

/* ---------- Start ---------- */
.brand { display: flex; align-items: baseline; gap: var(--abstand-3); margin-bottom: var(--abstand-4); }
.brand h1 { font-size: var(--text-xl); font-weight: 400; letter-spacing: 0; margin: 0; }
.brand h1 b { font-weight: 700; color: var(--accent); }
.hint { font-size: var(--text-xs); color: var(--ink3); }
.hint code { font-size: var(--text-xs); color: var(--ink2); word-break: break-all; }
/* .hint .copy-btn: bewusst spezifischer als die Rubrik-Regel „.diagnose button",
   damit der Button in Einstellungen und Header identisch aussieht */
.hint .copy-btn {
  background: none; border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--accent); padding: var(--abstand-1) var(--abstand-2); line-height: 0;
  cursor: pointer; vertical-align: middle; margin: 0 var(--abstand-05);
}
.hint .copy-btn svg, .hint .copy-btn .si { width: .85rem; height: .85rem; display: inline-block; font-style: normal; }
.back { background: none; color: var(--ink2); font-size: var(--text-base); padding: var(--abstand-1) var(--abstand-25) var(--abstand-1) 0; }

.tiles {
  display: grid; gap: var(--abstand-3);
  /* explizite minmax(0,1fr)-Spur: die implizite auto-Spur würde sich an
     max-content breiter Kinder (Geräte-Leiste) über den Viewport dehnen */
  grid-template-columns: minmax(0, 1fr);
}
.top-tiles { display: grid; gap: var(--abstand-2); grid-template-columns: 1fr; }
.top-tiles:has(#start-last:not([hidden])) { grid-template-columns: 1fr 1fr; }
.top-tiles .tile-title { font-size: var(--text-lg); }

.version-tag {
  /* unten-bündig: sitzt auf derselben Schriftlinie wie der Markenname */
  font-size: var(--text-2xs); font-weight: 500; color: var(--ink3);
  margin-left: var(--abstand-2); vertical-align: baseline; letter-spacing: var(--sperrung-leicht);
}
.demo-link {
  background: none; border: none; color: var(--ink3);
  font-size: var(--text-sm); padding: var(--abstand-15) var(--abstand-2); margin: var(--abstand-05) auto var(--abstand-1);
  display: block; min-height: var(--tippflaeche); text-align: center; cursor: pointer;
}
.demo-link span { color: var(--ink3); opacity: .75; }
.demo-link:hover { border-color: var(--accent); color: var(--accent); }

/* Einklappbare Rubriken: Überschrift toggelt, Zustand wird gemerkt */
details.rubrik { border: 0; }
details.rubrik summary.listhead {
  cursor: pointer; list-style: none; user-select: none; margin: var(--abstand-15) 0 var(--abstand-2);
  min-height: var(--tippflaeche); display: flex; align-items: center;
}
details.rubrik summary.listhead::-webkit-details-marker { display: none; }
details.rubrik summary.listhead::before {
  content: '▸'; display: inline-block; margin-right: var(--abstand-2);
  transition: transform var(--dauer-kurz); color: var(--accent);
}
details.rubrik[open] summary.listhead::before { transform: rotate(90deg); }
.tile {
  border-radius: var(--radius-l);
  padding: var(--abstand-4) var(--abstand-5); text-align: left; display: grid; gap: var(--abstand-05);
}
.tile-primary { border-color: var(--accent); }
.tile-kicker { color: var(--accent); }
.tile-title { font-size: var(--text-2xl); font-weight: 700; }
.tile-sub { font-size: var(--text-md); color: var(--ink2); }

.gear {
  margin: calc(-1 * var(--abstand-2)) calc(-1 * var(--abstand-2)) calc(-1 * var(--abstand-2)) auto; background: none; color: var(--ink3); font-size: var(--text-xl);
  min-width: var(--tippflaeche); min-height: var(--tippflaeche); display: grid; place-items: center;
}
.tiles-programme { display: grid; gap: var(--abstand-2); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.tiles-programme .tile { padding: var(--abstand-3) var(--abstand-4); }
.tiles-programme .tile-title { font-size: var(--text-lg); }
.tile-profile { width: 100%; height: 36px; margin-top: var(--abstand-2); display: block; }
/* Eigene Workouts: Löschknopf NEBEN der Kachel (kein Knopf im Knopf), 44 px */
.tile-rahmen { position: relative; display: grid; }
.tile-rahmen > .tile { height: 100%; }
.tile-x {
  position: absolute; top: 0; right: 0; width: var(--tippflaeche); height: var(--tippflaeche);
  background: none; border: 0; color: var(--ink3); font-size: var(--text-md); cursor: pointer;
}
.tile-x:hover { color: var(--danger); }
.listhead .chip { margin-left: var(--abstand-25); vertical-align: middle; }
#dlg-preview { width: 100%; height: 76px; display: block; margin: var(--abstand-1) 0 var(--abstand-3); background: var(--surface2); border-radius: var(--radius-s); }
/* Fartlek: Würfel-Button rechts in der Titelzeile des Startdialogs */
.dlg-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); margin-bottom: var(--abstand-3); }
.dlg-kopf h2 { margin: 0; }
.dlg-wuerfeln { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; padding: var(--abstand-2); border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface2); color: var(--ink); cursor: pointer; }
.dlg-wuerfeln svg { display: block; width: 100%; height: 100%; }

dialog {
  color: var(--ink); border-radius: var(--radius-l); padding: var(--abstand-5) var(--abstand-6); min-width: min(20rem, 90vw);
  max-height: 90dvh; overflow-y: auto;
  overscroll-behavior: contain;   /* Scroll-Ende reicht nicht an die Seite durch */
}
/* Offener Modal-Dialog riegelt den Seiten-Scroll ab (Backdrop-Touch inklusive) */
body:has(dialog[open]) { overflow: hidden; }
/* Einstellungen: feste Maße — auf-/zuklappende Rubriken dürfen das
   Fenster nicht umher-resizen, der Inhalt scrollt intern */
#dlg-settings { width: min(30rem, 92vw); height: min(46rem, 90dvh); }
dialog::backdrop { background: var(--abdunkeln); }
dialog h2 { margin: 0 0 var(--abstand-3); font-size: var(--text-lg); }
.dlg-fields { display: grid; gap: var(--abstand-3); }
.dlg-fields label { display: grid; gap: var(--abstand-1); font-size: var(--text-md); color: var(--ink2); }
.dlg-fields input {
  background: var(--surface2); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: var(--abstand-2) var(--abstand-3); font: inherit; font-variant-numeric: tabular-nums;
}
/* Zahlenfeld mit Erklärung darunter (Pulsgrenze): Hinweis eng am Feld */
.feld-hinweis { display: grid; gap: var(--abstand-1); }
.feld-hinweis .hint { margin: 0; }
#dlg-graph { width: min(96vw, 60rem); max-width: 96vw; min-width: 0; padding: var(--abstand-3); }
#dlg-graph:focus, #dlg-graph:focus-visible { outline: none; }
.diagnose { margin-top: var(--abstand-4); border-top: 1px solid var(--line); padding-top: var(--abstand-25); }
/* In den aufklappbaren Rubriken der Einstellungen enger an den Text */
.diagnose .dlg-fields, .diagnose .dlg-actions { margin-top: var(--abstand-2); }
.diagnose summary { cursor: pointer; font-size: var(--text-md); color: var(--ink2); padding: var(--abstand-25) 0; }   /* Tippfläche */
#log-view {
  max-height: 40dvh; overflow: auto; background: var(--surface2); border-radius: var(--radius-s);
  padding: var(--abstand-2) var(--abstand-25); font-family: monospace; font-size: var(--text-xs); line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; margin: var(--abstand-2) 0 0;
}
.diagnose button { border-radius: var(--radius-s); padding: var(--abstand-2) var(--abstand-4); }
/* Ein/Aus-Einstellungen als Zeile: Titel + Erklärung links, Schiebeschalter rechts */
.einstell-gruppe { margin-top: var(--abstand-4); display: grid; gap: var(--abstand-2); }
/* Abschnittsbeschriftung wie .g-rolle (TRAINER/LENKER darüber) */
.gruppe-titel { margin: 0; }
.einstell-gruppe .hint { margin: 0 0 var(--abstand-05); }
.schalter-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3);
  cursor: pointer;
}
.dlg-fields .schalter-zeile { display: flex; gap: var(--abstand-3); color: var(--ink); }
.schalter-text { display: grid; gap: var(--abstand-05); font-size: var(--text-md); color: var(--ink); flex: 1; min-width: 0; }
.schalter-text small { font-size: var(--text-xs); color: var(--ink3); }
input.schalter {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0; padding: 0;
  width: 2.6rem; height: 1.5rem; border-radius: var(--radius-pill); position: relative; cursor: pointer;
  background: var(--line); border: 1px solid var(--ink3); transition: background var(--dauer-kurz), border-color var(--dauer-kurz);
}
input.schalter::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px);
  border-radius: 50%; background: var(--ink2); transition: transform var(--dauer-kurz), background var(--dauer-kurz);
}
input.schalter:checked { background: var(--accent); border-color: var(--accent); }
input.schalter:checked::after { transform: translateX(1.1rem); background: var(--bg); }
input.schalter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Tasten zuordnen (Lern-Modus): feste Zeilen — Schritt (Kicker), Marke +
   Aktion, Rückmeldung; keine bricht um, keine wächst. Quer steht die
   Lenkeransicht rechts daneben (siehe Querformat unten) */
/* Breiter als andere Dialoge (8 px Rand), damit Rückmeldung und Knöpfe in
   eine Zeile passen */
#dlg-mapping { width: min(30rem, calc(100vw - var(--abstand-4))); max-width: none; padding-inline: var(--abstand-4); }
.map-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
.map-raster > h2 { margin-bottom: var(--abstand-2); }
.map-aufforderung p { margin: 0; }
#map-schritt {
  display: flex; align-items: center; gap: var(--abstand-2); font-size: var(--text-lg); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#map-schritt .lk-marke { flex: none; }
.map-status { margin: var(--abstand-1) 0 var(--abstand-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-status.fehler { white-space: normal; color: var(--danger); }   /* Ende des Ablaufs: Hinweis darf umbrechen */
#dlg-mapping .dlg-actions { margin-top: var(--abstand-3); }
#dlg-mapping .dlg-actions button { padding-inline: var(--abstand-2); }   /* „Ohne Belegung weiter" + „Abbrechen" in einer Zeile */
/* Umschalter Lenker ↔ Liste: beide Ansichten in derselben Zelle, die
   verdeckte hält ihren Platz (visibility) — Umschalten verschiebt nichts */
.belegung-ansicht { display: grid; }
.belegung-ansicht > * { grid-area: 1 / 1; min-width: 0; }
.belegung-ansicht[data-ansicht="liste"] > :first-child,
.belegung-ansicht[data-ansicht="karte"] > :last-child { visibility: hidden; }
.belegung-umschalter { margin-left: auto; font-size: var(--text-sm); white-space: nowrap; }
.belegung-kopf { display: flex; align-items: center; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.belegung-kopf .gruppe-titel { margin: 0; }
.belegung-kopf .text-aktion { background: none; border: 0; padding: 0 var(--abstand-1); }   /* schlägt die Rubrik-Regel „.diagnose button" */
#dlg-belegung .dlg-kopf { margin-bottom: 0; }   /* der Umschalter bringt mit 44 px eigenen Abstand mit */
.belegung-aendern { margin: var(--abstand-2) 0 0; }
#dlg-belegung .dlg-actions { margin-top: var(--abstand-2); }
.belegung { list-style: none; margin: var(--abstand-15) 0 0; padding: 0; display: grid; gap: var(--abstand-15); font-size: var(--text-md); }
.belegung li { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-25); color: var(--ink2); }
/* Mehrere Tasten je Aktion: untereinander, rechtsbündig; passt es nicht neben
   die Aktion, rutschen sie in die Zeile darunter */
.belegung li { flex-wrap: wrap; }
.belegung-tasten { display: grid; justify-items: start; gap: var(--abstand-1); margin-left: auto; }
.belegung-taste { display: inline-flex; align-items: center; gap: var(--abstand-2); }
.belegung-taste small { font-size: var(--text-xs); color: var(--ink3); }
.belegung .leer { font-size: var(--text-xs); color: var(--ink3); }
/* Tastensymbole, dem Zwift-Lenker nachempfunden (tasten-symbol.js) */
.ts {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-05); flex: 0 0 auto;
  height: 1.5rem; min-width: 1.5rem; padding: 0 var(--abstand-1); box-sizing: border-box; vertical-align: middle;
  border-radius: var(--radius-s); border: 1px solid var(--ink3); background: var(--bg); color: var(--ink);
  font-size: var(--text-xs); font-weight: 700; line-height: 1;
}
.ts svg { width: var(--icon-s); height: var(--icon-s); }
/* Pillen: gleicher Innenabstand links/rechts, fester Abstand Symbol ↔ L/R */
.ts-pill { border-radius: var(--radius-pill); padding: 0 var(--abstand-2); gap: var(--abstand-1); }
.ts-pill svg { width: var(--icon-s); height: var(--icon-s); }
.ts-rund { border-radius: 50%; width: 1.5rem; padding: 0; border: none; color: var(--auf-accent); font-size: var(--text-sm); }
.ts-gruen { background: var(--taste-gruen); }
.ts-magenta { background: var(--taste-magenta); }
.ts-blau { background: var(--taste-blau); }
.ts-orange { background: var(--taste-orange); }
.ts-orange-rand { border-color: var(--taste-orange); color: var(--taste-orange); }
/* Größe folgt dem Lenker: das Paddle ist die große Hebel-Vorderseite, die Schalttasten
   und Drop-Tasten sind kleine Knöpfe */
.ts-paddle { gap: var(--abstand-1); min-width: 3.4rem; height: 1.6rem; border-width: 2px; border-radius: var(--radius-s); font-size: var(--text-sm); }
.ts-klein { height: 1.2rem; padding: 0 var(--abstand-15); gap: var(--abstand-1); font-size: var(--text-2xs); }
.ts-klein svg { width: var(--icon-xs); height: var(--icon-xs); }
/* Lenkeransicht: Seite links | Zone (Piktogramm) | Seite rechts — kompakt,
   damit sie samt Kopf und Knöpfen auf eine Bildschirmseite passt (die
   Tasten sind hier nur Anzeige, keine Tippflächen) */
.lk-karte {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: var(--abstand-2); row-gap: var(--abstand-15);
  padding: var(--abstand-15) var(--abstand-2) var(--abstand-2);
}
.lk-kopf { line-height: 1.2; }
.lk-kopf:first-child { justify-self: end; }
/* Mittelspalte schmal halten, Zonenname einzeilig */
.lk-zone { display: grid; justify-items: center; max-width: 4.6rem; }
.lk-zone small { font-size: var(--text-2xs); line-height: 1.15; color: var(--ink3); text-align: center; white-space: nowrap; }
.lk-leer { margin: var(--abstand-2) 0; }
.lk-pikto { width: var(--icon-pikto); height: var(--icon-pikto); }
.lk-pikto .lk-form { fill: var(--bg); stroke: var(--ink2); stroke-width: 1.5; stroke-linejoin: round; }
.lk-pikto .lk-lenker { fill: none; stroke: var(--ink3); stroke-width: 3; stroke-linecap: round; opacity: .55; }
/* Zonenmarkierung in Akzentfarbe — Orange steht für orange Tasten */
.lk-pikto .lk-an { fill: var(--accent); }
.lk-pikto .lk-an-linie { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; }
.lk-gruppe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; }
.lk-links { justify-content: flex-end; }
.lk-rechts { justify-content: flex-start; }
/* Paddle mit verschieden belegten Richtungen: beide Richtungen übereinander,
   jede mit ihrer Marke außen (← oben, → unten) */
.lk-stapel { flex-direction: column; gap: var(--abstand-1); }
.lk-links.lk-stapel { align-items: flex-end; }
.lk-rechts.lk-stapel { align-items: flex-start; }
/* Kreuz/Raute bzw. Schalttasten übereinander: festes Raster aus der Tabelle */
.lk-raster { display: grid; grid-auto-columns: 1.4rem; grid-auto-rows: 1.4rem; gap: var(--abstand-1); place-items: center; }
.lk-links.lk-raster { justify-content: end; }
.lk-rechts.lk-raster { justify-content: start; }
.lk-raster .ts:not(.ts-pill) { width: 1.35rem; height: 1.35rem; min-width: 0; padding: 0; }   /* Pfeile quadratisch */
/* Belegt = volle Deckkraft + Aktionsmarke seitlich außen; unbelegt gedimmt.
   Außen liegt im Kreuz/in der Raute immer ein freies Feld — keine Überdeckung */
.lk-taste { position: relative; display: inline-flex; opacity: .35; }
.lk-taste.belegt { opacity: 1; }
.lk-taste .lk-marke { position: absolute; top: 50%; transform: translateY(-50%); }
.lk-links .lk-marke { right: calc(100% + .15rem); }
.lk-rechts .lk-marke { left: calc(100% + .15rem); }
.lk-marke {
  display: inline-block; min-width: 1rem; height: 1rem; padding: 0 var(--abstand-1); box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--auf-accent);
  font-size: var(--text-2xs); line-height: 1rem; text-align: center; font-weight: 700;
}
.lk-taste.blink { animation: lk-blink .9s ease-out 2; opacity: 1; }
@keyframes lk-blink { 0% { filter: drop-shadow(0 0 0 var(--accent)); transform: scale(1.25); } 100% { filter: none; transform: scale(1); } }
/* Legende: so viele Einträge je Zeile wie passen (alle fünf brauchen ab
   ~430 px eine Zeile, schmaler zwei) */
.lk-legende {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-05) var(--abstand-3);
  padding-top: var(--abstand-15); border-top: 1px solid var(--line); font-size: var(--text-xs); line-height: 1.5; color: var(--ink2);
}
.lk-legende span { display: inline-flex; align-items: center; gap: var(--abstand-1); }
/* Schmale Geräte (≤ 380 px): Kreuz/Raute etwas kleiner, damit die seitlichen
   Marken innerhalb der Karte bleiben */
@media (max-width: 380px) {
  .lk-karte { column-gap: var(--abstand-15); padding-inline: var(--abstand-15); }
  .lk-zone { max-width: 4.1rem; }
}
.geraete { list-style: none; margin: var(--abstand-2) 0 0; padding: 0; display: grid; gap: var(--abstand-2); font-size: var(--text-md); }
.geraete li { display: flex; align-items: center; gap: var(--abstand-3); }
.g-icon {
  width: 2rem; height: 2rem; display: grid; place-items: center; flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--accent); font-size: var(--text-base);
}
.g-info { display: grid; gap: var(--abstand-05); flex: 1; min-width: 0; }
.g-name { display: flex; align-items: center; gap: var(--abstand-15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-fw { color: var(--ink3); font-size: var(--text-xs); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); flex: none; display: inline-block; }
.dot.on { background: var(--ok); }
.geraete button {
  padding: var(--abstand-15) var(--abstand-3); font-size: var(--text-sm); flex: none;
  background: var(--accent); color: var(--auf-accent); border: 0; border-radius: var(--radius-s); font-weight: 600;
}
.geraete button.ghost { background: none; color: var(--ink3); border: 1px solid var(--line); font-weight: 400; }

.graph-title { margin: 0 0 var(--abstand-2); font-size: var(--text-base); font-weight: 600; }
.graph-title span { color: var(--ink3); font-weight: 400; }
/* Höhe an Breite gekoppelt: Zeitreihe bleibt auch hochkant ein Querformat */
.graph-hinweis { text-align: center; margin: var(--abstand-2) 0 0; }
#graph-big { width: 100%; height: min(62dvh, 58vw, 30rem); display: block; background: var(--surface2); border-radius: var(--radius-s); }

/* row-reverse: Primärbutton steht im DOM zuerst (Default-Submit für Enter),
   optisch aber rechts */
.dlg-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: var(--abstand-2); margin-top: var(--abstand-4); }
.dlg-actions button { border-radius: var(--radius-m); padding: var(--abstand-25) var(--abstand-4); font-weight: 600; }
.dlg-actions .ghost { background: none; color: var(--ink2); }
/* Leise Hauptaktion: der Schritt nach vorn in einem Ablauf (Tasten lernen:
   „Weiter") — Akzentschrift, keine Fläche */
.dlg-actions .ghost.haupt { color: var(--accent); }
.dlg-actions .primary { background: var(--accent); color: var(--auf-accent); }

.listhead-zusatz { text-transform: none; letter-spacing: 0; opacity: .8; margin-left: var(--abstand-1); }   /* Summary ist flex: Leerzeichen davor fällt weg */
.listhead { font-size: var(--text-sm); margin: var(--abstand-6) 0 var(--abstand-2); }
.bilanz {
  padding: var(--abstand-2) var(--abstand-4) var(--abstand-25); margin: 0 0 var(--abstand-2); font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}
.bilanz-head { display: block; margin-bottom: var(--abstand-15); }
.bilanz-head i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
/* Fahrzeit je Woche: 8 Balken, Wert oben, KW unten, aktuelle Woche in Akzentfarbe */
.wochen-balken { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--abstand-15); align-items: end; }
.wb { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-05); min-width: 0; }
.wb b { font-size: var(--text-2xs); font-weight: 600; color: var(--ink2); white-space: nowrap; min-height: 1em; line-height: 1; }
.wb i { display: block; width: 100%; max-width: 2.2rem; min-height: 2px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--ink3); opacity: .55; }
.wb s { text-decoration: none; font-size: var(--text-2xs); color: var(--ink3); line-height: 1.2; }
.wb.jetzt i { background: var(--accent); opacity: 1; }
.wb.jetzt s { color: var(--accent); }
.bilanz-fuss { display: block; margin-top: var(--abstand-15); color: var(--ink3); font-size: var(--text-xs); }

.zonen { display: flex; width: 100%; border-radius: var(--radius-xs); overflow: hidden; }
.zonen i { display: block; height: 100%; }

.sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.sessions li {
  padding: var(--abstand-25) var(--abstand-4); display: grid; gap: var(--abstand-15); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.sessions .zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-3); min-width: 0; }
.sessions .datum { white-space: nowrap; }
.sessions .prog { color: var(--ink2); font-size: var(--text-md); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Marke „Plan": Fahrt aus dem Trainingsplan (Liste, Detail) — Hinweis, kein Knopf */
.plan-marke {
  display: inline-block; margin-right: var(--abstand-15); padding: 0 var(--abstand-15);
  border: 1px solid var(--accent); border-radius: var(--radius-pill); color: var(--accent);
  font-size: var(--text-2xs); letter-spacing: var(--sperrung-leicht); line-height: 1.6; vertical-align: 1px;
}
.d-programm { margin: calc(-1 * var(--abstand-2)) 0 var(--abstand-2); display: grid; gap: var(--abstand-1); font-size: var(--text-md); color: var(--ink2); }
.d-plan { color: var(--ink3); font-size: var(--text-sm); }
.sessions .meta { color: var(--ink2); font-size: var(--text-sm); margin-top: calc(-1 * var(--abstand-1)); }
/* Probefahrten/Fehlstarts unter 2 min: bleiben da, drängen sich aber nicht vor */
.sessions li.kurz { opacity: .55; }
/* Home: Sprung in die Fahrten-Historie */
.alle-fahrten {
  display: block; width: 100%; min-height: var(--tippflaeche); margin: var(--abstand-2) 0 0; padding: var(--abstand-25) var(--abstand-4); text-align: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-m); color: var(--accent); font-size: var(--text-md);
}
#wochenbilanz { cursor: pointer; }

/* Fahrten-Screen: Monate als aufklappbare Bereiche mit Summenzeile */
.monat { margin: 0 0 var(--abstand-25); }
.monat > summary {
  display: flex; align-items: baseline;
  padding: var(--abstand-3) var(--abstand-1) var(--abstand-2); cursor: pointer; list-style: none; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.monat > summary::-webkit-details-marker { display: none; }
/* Aufklapp-Symbol wie bei den Rubriken auf Home: ▸, gedreht wenn offen */
.monat > summary::before {
  content: '▸'; display: inline-block; color: var(--accent); margin-right: var(--abstand-2); font-size: var(--text-sm);
  transition: transform var(--dauer-kurz);
}
.monat[open] > summary::before { transform: rotate(90deg); }
.monat .m-titel { font-size: var(--text-md); font-weight: 600; color: var(--ink); margin-right: auto; }
.monat .m-summe { font-size: var(--text-sm); color: var(--ink3); margin-left: var(--abstand-3); white-space: nowrap; }
.monat > .sessions { margin-top: var(--abstand-1); }

.sessions li.woche {
  /* fest zweizeilig (Name, darunter Summen) — einzeilig bräche je nach Länge mal um, mal nicht */
  background: none; border: 0; padding: var(--abstand-3) var(--abstand-05) 0; cursor: default; gap: 0;
}
.sessions li.woche:first-child { padding-top: 0; }
.woche .w-titel { font-weight: 600; color: var(--ink2); }
.woche .w-titel i { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink3); }
.woche .w-summe { font-size: var(--text-sm); color: var(--ink3); }
.sessions .empty { border-style: dashed; color: var(--ink3); cursor: default; justify-content: center; }

/* ---------- Trainingsplan ---------- */
/* Karte oben auf Home: heutige Einheit (tippbar), Wochenstreifen, Hinweis */
.plan-karte { display: grid; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-4) var(--abstand-4); border-color: var(--accent); border-radius: var(--radius-l); }
.plan-kopf { display: flex; align-items: center; justify-content: space-between; margin-right: calc(-1 * var(--abstand-3)); }
.plan-mehr { flex: none; width: var(--tippflaeche); height: var(--tippflaeche); background: none; color: var(--ink3); display: grid; place-items: center; }
.plan-mehr svg { width: var(--icon-l); height: var(--icon-l); }
.plan-heute { display: grid; gap: var(--abstand-05); padding: 0; background: none; text-align: left; }
.plan-heute:disabled { opacity: 1; }
.plan-karte .tile-title { font-size: var(--text-lg); }
/* Nichts springt beim Tageswechsel (docs/stil.md): solange der Wochenstreifen
   steht, enden Titel und Erklärung nach 2 Zeilen mit „…"; die Höhe des Text-
   blocks misst plan-ui.js über alle Tage der Woche (längster Tag), Profil und
   Knopfzeile bleiben stehen */
.plan-text { display: grid; gap: var(--abstand-05); align-content: start; }
.plan-karte:has(> .plan-woche:not([hidden])) .plan-text > * { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tile-profile.frei { visibility: hidden; }   /* freier Tag: Platz bleibt, kein Profil */
/* Wochenstreifen: je Tag ein Balken in der Zonenfarbe, Höhe = Dauer */
/* 7 Spalten lückenlos: bei 360 px sind die Zellen ~42 px breit (Ausnahme, docs/stil.md) */
.plan-woche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; }
.plan-tag { display: grid; justify-items: center; gap: var(--abstand-1); font-size: var(--text-2xs); color: var(--ink3); }
/* Tage mit Einheit sind Knöpfe (öffnen das Blatt „Einheit ändern"), Tippfläche 44 px */
.plan-tag button {
  width: 100%; min-height: var(--tippflaeche); padding: 0; background: none; color: inherit; font: inherit;
  display: grid; justify-items: center; align-content: end; gap: var(--abstand-1);
}
.plan-tag[data-status="ausgelassen"] i { opacity: .2; }
/* Gewählter Tag (Kalender): umrandet, wenn es nicht heute ist (heute ist schon
   hervorgehoben); seine Einheit steht darüber in der Karte */
.plan-tag.gewaehlt:not(.heute) button { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: var(--radius-s); }
.plan-aktionen { display: flex; align-items: center; min-height: var(--tippflaeche); margin: calc(-1 * var(--abstand-1)) calc(-1 * var(--abstand-2)); }
/* Leise Text-Aktionen wie „Alle Fahrten ›": keine Fläche, Tippfläche trotzdem 44 px */
.text-aktion { display: inline-flex; align-items: center; min-height: var(--tippflaeche); padding: 0 var(--abstand-1); background: none; border: 0; color: var(--accent); font: inherit; }
.plan-haupt, .plan-neben { min-height: var(--tippflaeche); padding: 0 var(--abstand-2); background: none; font-size: var(--text-md); }
.plan-haupt { margin-left: auto; color: var(--accent); font-weight: 600; }
.plan-haupt:disabled { color: var(--ink3); font-weight: 400; }
.plan-neben { order: -1; color: var(--ink2); }
.plan-tag[data-status="ausgelassen"] span { text-decoration: line-through; }
.plan-tag i { display: block; width: 100%; max-width: 2rem; height: var(--hoehe, 2px); border-radius: var(--radius-xs); background: var(--farbe, var(--line)); }
.plan-tag[data-status="geplant"] i { opacity: .5; }
.plan-tag[data-status="verpasst"] i { background: none; border: 1px dashed var(--ink3); opacity: .7; }
.plan-tag[data-status="erledigt"] { color: var(--ok); }
.plan-tag.heute { color: var(--accent); font-weight: 600; }
.plan-tag.heute i { opacity: 1; }
.plan-hinweis { margin: 0; font-size: var(--text-xs); color: var(--ink2); display: grid; gap: var(--abstand-2); }
.plan-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
/* Dialog: Wochentage und Dauer als Umschalter, Ziel als Zeilen */
#dlg-plan { width: min(30rem, 92vw); }
.plan-form { display: grid; gap: var(--abstand-2); }
.plan-form .gruppe-titel { margin-top: var(--abstand-2); }
.tag-wahl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--abstand-05); }
.segment { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: var(--abstand-1); }
.tag-wahl label, .segment label {
  position: relative; min-height: var(--tippflaeche); display: grid; place-items: center; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--ink2); font-size: var(--text-sm);
}
.tag-wahl input, .segment input, .ziel-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.tag-wahl label:has(:checked), .segment label:has(:checked), .ziel-wahl label:has(:checked) {
  border-color: var(--accent); background: var(--accent-flaeche); color: var(--ink);
}
.tag-wahl label:has(:focus-visible), .segment label:has(:focus-visible), .ziel-wahl label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ziel-wahl { display: grid; gap: var(--abstand-15); }
.ziel-wahl label { position: relative; display: flex; align-items: center; min-height: var(--tippflaeche-zeile); cursor: pointer; }
.plan-vorschau { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-1); font-size: var(--text-md); }
.plan-vorschau li { display: flex; align-items: center; gap: var(--abstand-2); }
.plan-vorschau i { flex: none; width: var(--abstand-2); height: var(--abstand-2); border-radius: 50%; background: var(--farbe); }
.plan-vorschau b { min-width: 2.2ch; color: var(--ink2); font-weight: 600; }
.plan-verwalten { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-4); }
.plan-verwalten:not(:has(> :not([hidden]))) { display: none; }
.chip.danger { color: var(--danger); border-color: var(--danger); }
.dlg-actions .danger { color: var(--danger); }
/* Blatt von unten (Einheit ändern): volle Breite, am unteren Rand */
dialog.sheet {
  margin: auto auto 0; width: min(32rem, 100vw); max-width: 100vw;
  border-radius: var(--radius-l) var(--radius-l) 0 0; border-bottom: 0;
  padding-bottom: max(var(--abstand-5), env(safe-area-inset-bottom));
}
/* Blatt in der Fahrt (Tastenbelegung): nicht modal, ohne Abdunkeln — sitzt
   zwischen Kopfzeile und Bedienleiste bzw. quer links neben ihr (Lage setzt ride.js);
   −10/+10/STOPP/Beenden bleiben frei */
dialog.sheet.blatt-fahrt { position: fixed; inset: auto 0 0; z-index: 50; box-shadow: var(--schatten-panel); }
.ein-aktionen { display: grid; gap: var(--abstand-15); margin-top: var(--abstand-3); }
.ein-aktionen .fo-zeile:disabled { opacity: .5; }
.ein-ziele { margin-top: var(--abstand-3); display: grid; gap: var(--abstand-2); }
.ziel-tage { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: var(--abstand-1); }
.ziel-tage button {
  min-height: var(--tippflaeche-zeile); padding: var(--abstand-1); display: grid; place-items: center; gap: 0;
  background: var(--surface2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--ink); font-size: var(--text-sm);
}
.ziel-tage small { font-size: var(--text-2xs); color: var(--ink3); }
.ziel-tage [data-ziel="tausch"] { border-color: var(--accent); }
.ziel-tage button:disabled { opacity: .4; }

/* ---------- Fahrt ---------- */
#screen-ride { padding: 0; max-width: none; overflow: hidden; }
body:has(#screen-ride:not([hidden])) { overflow: hidden; }
.ride-grid {
  height: 100dvh; display: grid; gap: 0;
  /* Graph-Zeile flexibel (min 60 px, sonst bis 22vh/180 px): wird es eng
     (kleines Handy, Chip-Zeile bricht um), schrumpft der Graph — −10/+10/STOPP
     bleiben immer im Bild */
  grid-template-rows: auto 1fr auto minmax(60px, clamp(90px, 22vh, 180px)) auto;
  /* Benannte Bereiche: blendet ein Fokus-Modus die Chips aus (display:none),
     rutschen die übrigen Kinder sonst eine Zeile nach oben */
  grid-template-areas: "kopf" "metrics" "chips" "chart" "controls";
}
.ride-grid > .ride-kopf { grid-area: kopf; }
.ride-grid > .metrics { grid-area: metrics; }
.ride-grid > .row-actions { grid-area: chips; }
.ride-grid > #live-chart { grid-area: chart; }
.ride-grid > .controls { grid-area: controls; }
.metrics {
  display: grid; align-content: center; justify-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "power power" "target time" "sec sec" "status status";
  padding: var(--abstand-2) var(--abstand-4) 0;
}
.metrics > .led-tafel { grid-area: status; margin: var(--abstand-2) auto 0; }
.metric { display: grid; justify-items: center; gap: 0; font-variant-numeric: tabular-nums; }
.metric .value {
  font-weight: 700; line-height: 1.05;
  /* Festes Ziffernfeld: 99→100 darf Nachbarn nicht verschieben */
  min-width: 3ch; text-align: center;
}
.metric .value-time { min-width: 4.5ch; }
.metric .unit { font-size: var(--text-xs); color: var(--ink3); }
.metric-power { grid-area: power; }
.metric-power .value { font-size: clamp(4.5rem, 22vmin, 9rem); transition: color .5s; }
.metric-target { grid-area: target; }
.metric-time { grid-area: time; }
.metric:not(.metric-power) .value { font-size: clamp(1.8rem, 8vmin, 3rem); }
.demo-badge, .demo-beispiel {
  border-radius: var(--radius-pill); padding: var(--abstand-05) var(--abstand-3); font-size: var(--text-xs); letter-spacing: var(--sperrung-leicht);
  line-height: 1.5; white-space: nowrap;
}
.demo-badge { background: var(--warn-flaeche); color: var(--warn); border: 1px solid var(--warn); }
/* Fahrbildschirm im Demo: Badge + Sprung zur Beispielfahrt mittig in der Kopfzeile */
.demo-leiste { grid-area: demo; display: flex; gap: var(--abstand-15); align-items: center; justify-content: center; }
.demo-beispiel { background: none; color: var(--accent); border: 1px solid var(--accent); }
/* Detailansicht: Badge als eigene Zeile unter dem Kopf — neben Zurück und
   Datum wäre bei 360 px kein Platz */
#screen-detail .brand, #screen-fahrten .brand { flex-wrap: wrap; }
.brand .demo-badge { order: 3; margin-top: calc(-1 * var(--abstand-2)); }
/* Beispielfahrten: Badge + Sprung in die Demo-Fahrt als eigene Zeile */
.brand .demo-kopf { order: 3; margin-top: calc(-1 * var(--abstand-2)); display: flex; gap: var(--abstand-15); flex-basis: 100%; }
.brand .demo-kopf .demo-badge { order: 0; margin-top: 0; }
.metrics { position: relative; cursor: pointer; }

/* Kopfzeile wie eine Handy-Statusleiste: Geräte links, Demo mittig, „⋯"
   rechts. Schmale Schirme mit Demo: Demo in eine eigene zweite Zeile (drei
   Geräte + Badge + Beispielfahrten + ⋯ passen bei 360 px nicht nebeneinander) */
.ride-kopf {
  display: grid; align-items: center;
  /* Seitenspalten gleich breit (1fr), damit die Mitte wirklich mittig ist —
     links stehen drei Symbole, rechts nur eines */
  grid-template-columns: 1fr auto 1fr; grid-template-areas: "geraete demo mehr";
  padding: max(var(--abstand-05), env(safe-area-inset-top)) var(--abstand-15) 0;
}
.kopf-geraete { grid-area: geraete; display: flex; }
/* Rechts: Bild-in-Bild (falls verfügbar) links neben „⋯" */
.kopf-rechts { grid-area: mehr; justify-self: end; display: flex; }
@media (max-width: 420px) {
  .ride-kopf:has(.demo-leiste:not([hidden])) { grid-template-areas: "geraete . mehr" "demo demo demo"; }
}
/* Geräte-Symbol ohne Rahmen: Icon + Zustandspunkt, Tippfläche 44 px */
.kopf-geraet, .kopf-pip, .kopf-mehr {
  width: var(--tippflaeche); height: var(--tippflaeche); padding: 0; background: none; color: var(--ink2);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
}
.kopf-geraet > span { display: flex; }
.kopf-geraet svg, .kopf-pip svg { width: var(--icon-m); height: var(--icon-m); }
.kopf-mehr svg { width: var(--icon-l); height: var(--icon-l); }
/* Bild-in-Bild offen: Symbol in Akzentfarbe (aktueller Zustand), keine Fläche */
.kopf-pip[aria-pressed="true"] { color: var(--accent); }

/* Countdown-Balken unter der Intervall-Restzeit: leert sich mit dem Block */
.restbalken {
  width: 100%; max-width: 9rem; height: 3px; margin-top: var(--abstand-1);
  background: var(--surface2); border-radius: var(--radius-xs); overflow: hidden; display: block;
}
.restbalken i {
  display: block; height: 100%; background: var(--balken-farbe, var(--accent));
  width: 100%; transition: width .9s linear;
}

/* Nebenwerte als festes Raster statt fließendem Umbruch (der brach je nach
   Breite 3+2 oder 2+2+1): hochkant 2×2, ab 440 px und quer 4 nebeneinander */
.row-secondary {
  grid-area: sec; display: grid; grid-template-columns: repeat(2, auto);
  justify-content: center; justify-items: start;
  gap: var(--abstand-1) var(--abstand-8); margin-top: var(--abstand-15);
  color: var(--ink3); font-size: var(--text-md); font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (min-width: 440px) { .row-secondary { grid-template-columns: repeat(4, auto); } }
/* Gesamtzeit klein unter der Blockzeit */
.gesamt { font-size: var(--text-sm); color: var(--ink3); margin-top: var(--abstand-05); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gesamt b { color: var(--ink2); font-weight: 600; display: inline-block; min-width: 7ch; text-align: right; }   /* bis 1:02:15 ohne Verschieben */
/* LED-Tafel (Statuszeile der Fahrt): eingelassen, FESTE Höhe — immer
   sichtbar, damit klar ist, wo Meldungen erscheinen; eine Meldung verschiebt
   nichts. Schrift als Punktmatrix (led-zeile.js): rot = Problem, grün =
   kurze Info. Ortsunabhängig; die Lage setzt der Elternbaustein. */
.led-tafel {
  display: block; width: 100%; max-width: 16rem; box-sizing: border-box;
  height: 1.9rem; padding: var(--abstand-05) var(--abstand-2); position: relative;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--status-mulde);
  box-shadow: var(--schatten-mulde);
}
.led-tafel .led { display: block; width: 100%; height: 100%; }
/* Text nur für Screenreader (die LED-Schrift ist ein Bild) */
.sr-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Chips: Basis zuerst, Varianten danach (sonst gewinnt die spätere
   Basisregel — .chip-fahrt war blass statt gefüllt) */
.chip {
  background: none; border: 1px solid var(--line); color: var(--ink3);
  border-radius: var(--radius-pill); padding: var(--abstand-05) var(--abstand-25); font-size: var(--text-sm);
  min-height: var(--tippflaeche); display: inline-flex; align-items: center; justify-content: center;
}
/* Aktions-Chips in eigener Zeile, fahrtauglich groß. Abstände und Polster so
   knapp, dass die vier Chips (3 Block-Aktionen + ⋯) auch bei 360 px in EINE
   Zeile passen — ein allein umgebrochenes ⋯ kostete eine ganze Zeile */
.row-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--abstand-2) var(--abstand-25); margin: var(--abstand-2) var(--abstand-2) 0;
}
.row-actions .chip {
  min-height: var(--tippflaeche); min-width: var(--tippflaeche); padding: var(--abstand-15) var(--abstand-4); font-size: var(--text-md);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Fahr-Aktionen (häufig) gefüllt und zuerst; „⋯" (selten) zurückhaltend */
.chip-fahrt { background: var(--surface2); border-color: var(--ink3); color: var(--ink); font-weight: 600; }
/* Keine sichtbaren Chips (freies Fahren, Programm vorbei): Zeile fällt weg */
.row-actions:not(:has(> :not([hidden]))) { display: none; }

/* Optionen der Fahrt: kleines Panel unter „⋯" (Lage setzt ride.js), nicht
   modal — liegt über dem Fahrbildschirm, ohne ihn zu sperren */
dialog.fahrt-optionen {
  position: fixed; inset: auto; margin: 0; padding: 0; z-index: 50;
  width: min(20rem, calc(100vw - 16px)); min-width: 0;
  box-shadow: var(--schatten-panel); overflow-y: auto; overscroll-behavior: contain;
}
.fahrt-optionen::backdrop { background: var(--abdunkeln-leicht); }
.fahrt-optionen-inhalt {
  display: grid; gap: var(--abstand-3); padding: var(--abstand-25);
  grid-template-areas: "geraete" "toene";
}
.fo-gruppe { display: grid; gap: var(--abstand-15); align-content: start; }
.fo-geraete { grid-area: geraete; }
.fo-toene { grid-area: toene; }
.fahrt-optionen .schalter-zeile { min-height: var(--tippflaeche-zeile); }
.fo-text { flex: 1; min-width: 0; }
/* Geräte- und Aktionszeile: sieht aus wie eine Schalter-Zeile, ist aber ein Knopf */
.fo-zeile {
  display: flex; align-items: center; gap: var(--abstand-3); width: 100%; min-height: var(--tippflaeche-zeile); text-align: left;
  color: var(--ink); font: inherit;
}
.fo-text { display: grid; gap: var(--abstand-05); font-size: var(--text-md); }
.fo-text b { font-weight: 600; }
.fo-text small { font-size: var(--text-xs); color: var(--ink3); }
.fo-zeile[data-zustand="fehler"] small { color: var(--danger); }
/* Rückmeldung auf einen Tipp: feste Höhe (2 Zeilen), damit das Panel nie
   wächst — aber ohne eigene Lücke. Hochkant liegt sie in der Zelle der
   Töne-Gruppe über deren Beschriftung (Abstand + „TÖNE" + Abstand = 36 px,
   der Hinweis ist 28 px hoch und darin mittig); die Beschriftung macht
   solange Platz. Quer steht sie unter den Tönen (die Spalte ist kürzer) */
.fo-hinweis {
  grid-area: toene; align-self: start; margin: calc(-1 * var(--abstand-2)) 0 0;
  height: 2.3em; font-size: var(--text-xs); line-height: 1.15; color: var(--ink2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fahrt-optionen-inhalt:has(> .fo-hinweis:not(:empty)) .fo-toene > .gruppe-titel { visibility: hidden; }
.fo-hinweis.err { color: var(--danger); }
.fo-hinweis.ok { color: var(--ok); }
.opt-icon { display: flex; color: var(--ink2); }
.opt-icon svg { width: var(--icon-l); height: var(--icon-l); }
/* Feste Feldbreiten für den größten Wert (Ziffern sind tabellarisch):
   2- oder 3-stellige Werte, „85–95" oder „100–110", „33:17" oder „1:02:15"
   verschieben weder Nachbarn noch den Zeilenumbruch */
.row-secondary b {
  color: var(--ink2); font-weight: 600;
  display: inline-block; text-align: right;
}
/* Mindestbreiten für die üblichen Maxima (seltene Ausreißer wie > 99,9 km
   dürfen wachsen statt den Nachbarn zu überlappen) */
#m-hr { min-width: 3ch; }   /* rpm: .rpm-wert bei „Im Bereich" unten; Pulsgrenze: [data-grenze] */
#m-kj, #m-km { min-width: 4ch; }
#m-total-label { display: inline-block; width: 7.5ch; text-align: left; }   /* „gesamt"/„Fahrzeit" */

#live-chart { width: 100%; height: 100%; min-height: 0; display: block; }

.controls {
  /* Feste Spalten für STOPP/Beenden: Textwechsel (GESTOPPT/WEITER/Sicher?)
     dürfen die Leiste nicht verschieben. Gruppenabstände als explizite
     Abstands-Spuren im Template — Margins auf Grid-Items (width:100%)
     würden über den Displayrand hinausschieben. Vor STOPP und vor
     Beenden gleich viel Luft: die gefährlichste Nachbarschaft braucht
     den größten Abstand. */
  display: grid;
  /* −10/+10 quadratisch (Seite = --bedien-hoehe), Restraum als flexible Spur
     davor Stopp/Beenden. Deren Slots sind auf 7rem gedeckelt (Textwechsel
     verschiebt nichts), dürfen aber auf schmalen Displays gleichmäßig
     schrumpfen — feste 7rem liefen rechts über den Rand (408px auf 360px) */
  grid-template-columns: var(--bedien-hoehe) .5rem var(--bedien-hoehe) minmax(.6rem, 1fr)
    minmax(4.5rem, 7rem) minmax(.5rem, .9rem) minmax(4.5rem, 7rem);
  column-gap: 0; row-gap: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-25) calc(var(--abstand-25) + env(safe-area-inset-bottom));
}
#btn-minus { grid-column: 1; }
#btn-plus { grid-column: 3; }
#btn-stop { grid-column: 5; }
#btn-end { grid-column: 7; }
.ctl {
  min-height: var(--bedien-hoehe); min-width: 0; width: 100%; border-radius: var(--radius-l);
  font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface2); border: 1px solid var(--line);
}
.ctl:active { background: var(--accent); color: var(--auf-accent); }
.ctl-stop { background: var(--danger); color: var(--auf-danger); font-size: var(--text-base); letter-spacing: var(--sperrung-leicht); }
.ctl-stop:active { background: var(--danger-aktiv); color: var(--auf-danger); }
/* Sperrzustand GESTOPPT: klar als "gerade nichts tappbar" erkennbar */
.ctl-stop:disabled {
  opacity: 1; background: var(--surface2); color: var(--danger);
  border: 2px solid var(--danger);
  font-size: var(--text-sm); letter-spacing: var(--sperrung-leicht);   /* "GESTOPPT" passt in den Slot */
}
button:disabled { cursor: default; }
.ctl-weiter { background: var(--ok); color: var(--auf-accent); font-size: var(--text-base); letter-spacing: var(--sperrung-leicht); }
.ctl-weiter:active { background: var(--ok-aktiv); color: var(--auf-accent); }
.ctl-end { background: none; border: 1px solid var(--line); color: var(--ink2); font-size: var(--text-base); font-weight: 500; }
.ctl-end.armiert { border-color: var(--danger); color: var(--danger); font-weight: 700; }

/* Fokus-Zustände (symmetrisch): Tap auf die Wattzahl → Werte groß, Graph
   als Orientierungsstreifen; Tap auf den Graphen → Graph groß in voller
   Detailstufe (inline), Werte kompakt. Erneuter Tap zurück. */
.ride-grid.fokus-werte .metric-power .value { font-size: clamp(6rem, 28vmin, 12rem); }
.ride-grid.fokus-werte .metric:not(.metric-power) .value { font-size: clamp(2.4rem, 11vmin, 4.5rem); }
/* Graph-Streifen gibt auf kleinen Schirmen zuerst nach (bis 48 px), damit
   die Bedienleiste nicht nach unten rutscht */
.ride-grid.fokus-werte { grid-template-rows: auto 1fr auto minmax(48px, 74px) auto; }
.ride-grid.fokus-werte .row-actions { display: none; }
/* Sekundärzeile vollwertig und fahrtauglich groß (inkl. kJ und gesamt) —
   die Icons skalieren per em mit */
.ride-grid.fokus-werte .row-secondary { font-size: clamp(1.1rem, 4.2vmin, 1.6rem); gap: var(--abstand-1) var(--abstand-5); }
.ride-grid.fokus-werte .row-secondary .si,
.ride-grid.fokus-graph .row-secondary .si { width: 1em; height: 1em; vertical-align: -.12em; }

/* Graph nimmt nur den Restplatz: mit fester Höhe (vorher 52vh) rutschten
   hochkant −10/+10/STOPP unter den Bildschirmrand, sobald die Chips zwei,
   drei Zeilen brauchten — STOPP war dann unerreichbar */
.ride-grid.fokus-graph { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }

.ride-grid.fokus-graph .metric-power .value { font-size: clamp(2.2rem, 9vmin, 3.4rem); }
.ride-grid.fokus-graph .metric:not(.metric-power) .value { font-size: clamp(1.3rem, 5.5vmin, 2rem); }
.ride-grid.fokus-graph .row-secondary { font-size: clamp(.95rem, 3vmin, 1.15rem); }
.ride-grid.fokus-graph .restbalken { display: none; }

/* Querformat: wie Hochformat rotiert — Werte als Zeile oben, Chart in
   voller Breite darunter (Resthöhe), Chips als schmale Leiste, Bedienung
   rechts. Schwelle 620px: auch große Handys/Foldables quer sollen dieses
   Layout bekommen statt des breitgezogenen Portrait-Stapels. */
@media (orientation: landscape) and (max-height: 620px) {
  .ride-grid {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "kopf controls" "metrics controls" "chart controls" "chips controls";
  }
  .metrics {
    grid-area: metrics;
    grid-template-columns: auto auto auto;
    grid-template-areas: "power target time" "sec sec sec" "status status status";
    column-gap: clamp(var(--abstand-4), 5vw, var(--abstand-12));
    /* oben ausgerichtet: Beschriftungen auf einer Linie statt treppenförmig
       (der Restbalken unter der Zeit machte die Spalte höher) */
    justify-content: center; align-items: start;
    padding: var(--abstand-1) var(--abstand-25) 0;
  }
  /* Kopfzeile quer flacher: die Höhe gehört dem Graphen */
  .ride-kopf { padding-top: 0; }
  .kopf-geraet, .kopf-pip, .kopf-mehr { height: 38px; }   /* Ausnahme von --tippflaeche: quer zählt jede Zeile; Breite bleibt 44 px */
  /* Blatt „Tastenbelegung" quer: Lenkeransicht bzw. Liste links, Titel,
     Umschalter, Hinweis und Schließen rechts — sonst ragt es unten hinaus */
  dialog.sheet.blatt-fahrt { width: min(40rem, 100vw); }
  #dlg-belegung > form {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); column-gap: var(--abstand-5);
    grid-template-areas: "ansicht kopf" "ansicht hinweis" "ansicht aktionen"; grid-template-rows: auto auto 1fr;
  }
  #dlg-belegung .dlg-kopf { grid-area: kopf; flex-wrap: wrap; row-gap: 0; }
  #dlg-belegung .belegung-umschalter { margin-left: calc(-1 * var(--abstand-1)); }
  #dlg-belegung .belegung-ansicht { grid-area: ansicht; }
  .belegung-aendern { grid-area: hinweis; }
  #dlg-belegung .dlg-actions { grid-area: aktionen; align-self: end; }
  /* Tasten zuordnen quer: Text und Knöpfe links, Lenkeransicht rechts */
  #dlg-mapping { width: min(46rem, 96vw); }
  .map-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: var(--abstand-5);
    grid-template-areas: "titel karte" "aufforderung karte" "status karte" "aktionen karte"; grid-template-rows: auto auto auto 1fr;
  }
  .map-raster > h2 { grid-area: titel; }
  .map-aufforderung { grid-area: aufforderung; }
  .map-status { grid-area: status; }
  #map-karte { grid-area: karte; }
  .map-raster > .dlg-actions { grid-area: aktionen; align-self: end; flex-wrap: wrap; }
  /* Panel quer zweispaltig (Geräte | Töne), sonst ragt es unten hinaus */
  dialog.fahrt-optionen { width: min(36rem, calc(100vw - 16px)); }
  .fahrt-optionen-inhalt { grid-template-columns: 1fr 1fr; grid-template-areas: "geraete toene" "geraete hinweis"; grid-template-rows: auto 1fr; }
  .fo-hinweis { grid-area: hinweis; margin: 0; }
  .fahrt-optionen-inhalt:has(> .fo-hinweis:not(:empty)) .fo-toene > .gruppe-titel { visibility: visible; }
  .metric-power .value { font-size: clamp(2.4rem, 13vmin, 4rem); }
  .metric:not(.metric-power) .value { font-size: clamp(1.5rem, 8vmin, 2.4rem); }
  .row-secondary { grid-template-columns: repeat(4, auto); gap: var(--abstand-1) var(--abstand-6); font-size: var(--text-md); margin-top: 0; }
  #live-chart { grid-area: chart; height: 100%; min-height: 0; }
  .row-actions {
    grid-area: chips; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    justify-content: safe center;
    margin: var(--abstand-1) 0 calc(var(--abstand-15) + env(safe-area-inset-bottom));
    padding: 0 max(var(--abstand-1), env(safe-area-inset-right)) 0 max(var(--abstand-1), env(safe-area-inset-left));
    /* Überlaufende Chips als „da ist mehr" lesbar machen statt abgeschnitten */
    mask-image: linear-gradient(to right, transparent, black 1rem, black calc(100% - 1.5rem), transparent);
  }
  .row-actions::-webkit-scrollbar { display: none; }
  /* Nur noch eine kurze Chip-Zeile (Block-Aktionen + ⋯): die volle
     Tippfläche von 44 px ist quer bezahlbar */
  .row-actions .chip { flex: 0 0 auto; padding: var(--abstand-1) var(--abstand-3); font-size: var(--text-sm); }
  .controls { grid-area: controls; grid-template-columns: 1fr; align-content: center; padding-right: max(var(--abstand-25), env(safe-area-inset-right)); }
  /* Portrait-Spurzuweisung aufheben — per ID, sonst verliert der Reset
     den Spezifitätsvergleich gegen #btn-stop { grid-column: 5 } */
  #btn-minus, #btn-plus, #btn-stop, #btn-end { grid-column: 1; }
  .controls #btn-stop { margin-top: var(--abstand-4); } /* vertikal: kein Overflow möglich */
  .controls #btn-end { margin-top: var(--abstand-4); }
  .ctl { min-width: 96px; }
  /* Fokus quer: nur Schriftgrößen kippen — der Chart behält die volle
     Restfläche (fokus-werte blendet die Chips aus, 1fr wächst von selbst) */
  .ride-grid.fokus-werte .metric-power .value { font-size: clamp(3.2rem, 18vmin, 5.5rem); }
  .ride-grid.fokus-werte .metric:not(.metric-power) .value { font-size: clamp(1.8rem, 9vmin, 3rem); }
  /* Hochkant-Zeilenvorgaben der Fokus-Modi gelten quer nicht (eigenes Raster) */
  .ride-grid.fokus-werte, .ride-grid.fokus-graph { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .ride-grid.fokus-graph .metric-power .value { font-size: clamp(1.8rem, 8vmin, 2.6rem); }
  .ride-grid.fokus-graph .metric:not(.metric-power) .value { font-size: clamp(1.1rem, 5vmin, 1.6rem); }
  /* Graph-Fokus quer: der Graph soll der größte sein — Sekundärzeile kleiner */
  .ride-grid.fokus-graph .row-secondary { font-size: var(--text-sm); }
  .ride-grid.fokus-graph .metric .unit,
  .ride-grid.fokus-graph .gesamt { display: none; }   /* die Kopfzeile kostet quer eine Zeile — hier zurückholen */
  /* +10 oben, −10 direkt über STOPP: verrutscht der Daumen Richtung STOPP,
     trifft er die harmlose Richtung */
  .controls #btn-plus { order: -1; }
}

/* Niedrige Bildschirme hochkant: Chips enger (Tippfläche bleibt 44 px), damit −10/+10/STOPP im Bild bleiben */
@media (orientation: portrait) and (max-height: 600px) {
  .row-actions { margin-top: var(--abstand-1); gap: var(--abstand-15) var(--abstand-25); }
  .row-actions .chip { padding-block: var(--abstand-1); }
  .metric-power .value { font-size: clamp(3.4rem, 17vmin, 6rem); }
}

/* ---------- Detail ---------- */
.d-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-6); margin: var(--abstand-15) 0 var(--abstand-4); font-variant-numeric: tabular-nums; }
.d-stats .zonen { flex-basis: 100%; }
.d-stats span { color: var(--ink2); font-size: var(--text-md); }
.d-stats b { color: var(--ink); font-size: var(--text-lg); }
.d-stats .hf b { color: var(--hr-line); }   /* zugleich Legende der HF-Kurve */
#detail-chart { width: 100%; height: 180px; background: var(--surface); border-radius: var(--radius-m); }
.compliance { margin-top: var(--abstand-3); }
.compliance summary { padding: var(--abstand-2) var(--abstand-3); cursor: pointer; font-size: var(--text-md); }
.compliance table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.compliance th, .compliance td { text-align: right; padding: var(--abstand-1) var(--abstand-3); border-top: 1px solid var(--line); }
.compliance tr.stopp td { color: var(--ink3); text-align: left; }
.compliance th:first-child, .compliance td:first-child { text-align: left; }
.compliance th { color: var(--ink3); font-weight: 500; font-size: var(--text-xs); }
.compliance .ok { color: var(--ok); }
.compliance .unter { color: var(--z2); }
.compliance .ueber { color: var(--z5); }

.d-actions { display: flex; gap: var(--abstand-25); margin-top: var(--abstand-4); }
.d-actions button {
  padding: var(--abstand-3) var(--abstand-4); font-size: var(--text-base);
}
.d-actions .danger { color: var(--danger); }

/* Statuszeile oben: Aktualität · Datenbestand/Speicherschutz */
.statuszeile {
  display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); align-items: center;
  margin: calc(-1 * var(--abstand-1)) 0 var(--abstand-3); font-size: var(--text-xs); color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.statuszeile span:empty { display: none; }
/* Punkt nur zwischen sichtbaren Segmenten — leere und versteckte zählen nicht */
.statuszeile > :not(:empty):not([hidden]):not(.warnung) ~ :not(:empty):not([hidden]):not(.warnung)::before { content: '·'; margin-right: var(--abstand-4); opacity: .5; color: var(--ink3); }
/* „Nur auf diesem Gerät ›" — das Datenschutz-Versprechen sichtbar ohne Tipp.
   Tippfläche 44 px, optisch so hoch wie die Zeile (negativer Rand) */
.statuszeile .text-aktion { font-size: var(--text-xs); color: var(--ink2); padding: 0; margin-block: calc(-1 * var(--abstand-3)); }
/* Warnung in eigener Zeile darunter, ohne Trennpunkt */
.statuszeile .text-aktion.warnung { color: var(--warn); order: 1; flex-basis: 100%; justify-content: flex-start; }
.hint .text-aktion { background: none; border: 0; padding: 0 var(--abstand-1); }   /* schlägt die Rubrik-Regel „.diagnose button" */
.text-aktion .si { width: 1em; height: 1em; margin-right: var(--abstand-1); color: var(--ok); }
.daten-saetze { margin: var(--abstand-3) 0; padding-left: var(--abstand-5); display: grid; gap: var(--abstand-2); color: var(--ink2); }
.chip.update { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Toasts: unten mittig, über allem, kurz sichtbar — im Fahrbildschirm
   oben, sonst verdecken sie −10/+10/STOPP */
.toasts {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 100; display: grid; gap: var(--abstand-15);
  width: min(92vw, 26rem); pointer-events: none;
}
body:has(#screen-ride:not([hidden])) .toasts { bottom: auto; top: calc(.5rem + env(safe-area-inset-top)); }
.toast {
  color: var(--ink); border-left: 3px solid var(--accent); padding: var(--abstand-25) var(--abstand-4);
  font-size: var(--text-md); box-shadow: var(--schatten-toast);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dauer), transform var(--dauer);
}
.toast.zeig { opacity: 1; transform: none; }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--danger); }
/* Toast mit Aktion („Rückgängig"): tippbar, Knopf rechts */
.toast.mit-aktion { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); padding-block: 0; padding-right: var(--abstand-1); }
.toast-aktion { background: none; color: var(--accent); font-weight: 600; min-height: var(--tippflaeche); padding: 0 var(--abstand-3); }

/* Weniger Bewegung: Übergänge und Animationen aus — nur das kurze
   Aufblitzen des Zielwerts bleibt (einzige Rückmeldung eines Lenker-Drucks) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  #m-target.blitz { animation: zielblitz .3s ease-out !important; }
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Controller-Tastendruck: Zielwert blitzt kurz in Akzentfarbe */
#m-target.blitz { animation: zielblitz .3s ease-out; }
@keyframes zielblitz {
  0% { color: var(--accent); text-shadow: 0 0 12px var(--accent); }
  100% { color: inherit; text-shadow: none; }
}

/* Wert gegen eine Vorgabe (Kadenz): im Bereich leicht eingefärbt, nach 5 s
   daneben gedämpft — nur die Schriftfarbe wechselt, nichts verschiebt sich */
.row-secondary .rpm-wert { min-width: 3ch; }
.row-secondary [data-bereich="drin"] { color: var(--z2); }
.row-secondary [data-bereich="daneben"] { color: var(--ink3); }
/* Wert über einer eigenen Grenze (Puls ab der Pulsgrenze): nur die Zahl in
   der Farbe ihrer Größe, Symbol und Einheit bleiben neutral — keine Fläche */
.row-secondary [data-grenze="ueber"] { color: var(--hr-line); }
/* Kadenz-Vorgabe dezent neben der rpm-Zahl */
.rpm-range { font-style: normal; color: var(--ink3); font-size: .78em; display: inline-block; width: 7ch; text-align: left; }
.rpm-range[hidden] { display: inline-block !important; visibility: hidden; }   /* Platz bleibt reserviert */

/* Statischer Intro-Absatz: nur für Crawler/Erstbesuch relevant, dezent */
.seo-intro { color: var(--ink3); font-size: var(--text-sm); margin: calc(-1 * var(--abstand-1)) 0 var(--abstand-3); max-width: 44rem; }

/* Geräte-Leiste auf dem Home: ein Chip je Rolle, Zustand am Punkt */
.gl {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-2);
  margin: var(--abstand-1) 0 var(--abstand-4);
  min-width: 0;    /* als Grid-Kind sonst min-width:auto → Overflow statt Umbruch */
}
.gl button {
  display: inline-flex; align-items: center; gap: var(--abstand-15);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink2);
  border-radius: var(--radius-pill); padding: var(--abstand-15) var(--abstand-3); font-size: var(--text-sm); min-height: var(--tippflaeche);
}
.gl .zusatz { padding: var(--abstand-1) var(--abstand-25); }

/* Geräte-Zustand — EINE Regel für Home-Leiste und Statusleiste der Fahrt
   (dort ohne Rahmen: nur Farbe und Punkt wirken):
   fehlt (gestrichelt) | gemerkt (durchgezogen) | verbindet (Punkt gelb,
   pulsiert) | verbunden (grün) | teilweise (Lenker: 1 von 2 Pads) |
   fehler (rot, Trainer nicht erreichbar) */
[data-zustand="fehlt"] { border-style: dashed; color: var(--ink3); }
[data-zustand="verbunden"], [data-zustand="teilweise"] { border-color: var(--ok); color: var(--ink); }
[data-zustand="verbunden"] .dot { background: var(--ok); }
[data-zustand="teilweise"] .dot { background: linear-gradient(90deg, var(--ok) 50%, var(--ink3) 50%); }
[data-zustand="verbindet"] .dot { background: var(--warn); animation: punkt-puls 1s ease-in-out infinite; }
[data-zustand="fehler"] { border-color: var(--danger); color: var(--danger); }
[data-zustand="fehler"] .dot { background: var(--danger); }
/* Pulsieren bleibt gut sichtbar (nicht unter 50 %) — „verbindet" muss auf
   einen Blick vom Punkt „nicht verbunden" zu unterscheiden sein */
@keyframes punkt-puls { 50% { opacity: .5; transform: scale(.8); } }


/* Lucide-Icons in Geräte-Leiste, Geräteliste und Zahnrad */
.gl button svg { width: var(--icon-m); height: var(--icon-m); flex: 0 0 auto; opacity: .8; }
.geraete .g-icon svg { width: var(--icon-l); height: var(--icon-l); display: block; }
.gear svg { width: var(--icon-l); height: var(--icon-l); display: block; }

/* Mini-Icons (Lucide) vor den Sekundärwerten: rpm/HF/Energie */
.row-secondary .si { display: inline-block; width: var(--icon-s); height: var(--icon-s); vertical-align: -2px; margin-right: var(--abstand-1); color: var(--ink3); font-style: normal; }
.row-secondary .si svg { display: block; width: 100%; height: 100%; }