/* =====================================================================
   ui.css · Ripping Sheet · die Bausteine
   ---------------------------------------------------------------------
   Hier steht KEIN roher Farb-, Pixel- oder Zeitwert — nur var(--…) aus
   tokens.css. Jeder Baustein ist im Katalog (katalog.html) in allen
   Zuständen zu sehen und in DESIGN.md beschrieben.

   Zustand eines Bausteins kommt aus dem, was er IST, nicht aus Klassen:
     :hover · :active · :focus-visible · [disabled] · [aria-busy="true"]
     [aria-pressed] · [aria-selected] · [aria-current] · [aria-expanded]
     [data-zustand="dran|laeuft|fertig|fehler|ruht"]   der EINE Schalter
   Nur für den Katalog gibt es drei Schau-Klassen, die einen Zustand
   festhalten:  .zeigt-ueberfahren  .zeigt-gedrueckt  .zeigt-fokus

   Kein Baustein kennt sein Schema (hell oder dunkel): er fragt nur nach
   Rollen. Was immer dunkel bleibt (Bühne), regelt tokens.css.

   Inhalt
     0  Grundlage (.ui), Fokus, Hilfen     16  Leer- und Fehler-Zustand
     1  Zustand (data-zustand)             17  Lade-Platzhalter
     2  Symbol, Logo-Zeichen               18  Fortschritts-Balken
     3  Knopf, Verweis                     19  Dialog, Seitenfach
     4  Abzeichen, Etikett, Zähler         20  Kurzmeldung
     5  Segment-Schalter, Reiter           21  Menü, Brand-Umschalter
     6  Eingabefeld, Textfeld, Auswahl     22  Gerüst, Seitenleiste, Server-Kasten
     7  Haken, Schalter, Wahl-Karte        23  Seitenkopf, Stand-Angabe
     8  Bild: Schild, Daumen               24  Handlungs-Leiste
     9  Medien-Karte, Karten-Raster        25  Video-Bühne, Zeitschiene, Sichtung
    10  Projekt-Karte                      26  Bedenken-Liste
    11  Liste, Zeile, Zustands-Schiene     27  Kasten, Angaben, Aufzählung,
    12  Schritt-Schiene                        Lesetext, Textblock, Kennzahl
    13  Tabelle                            28  Anmeldung
    14  Aufklapp-Kasten                    29  Schmale Fenster
    15  Hinweis-Kasten
   ===================================================================== */


/* 0 · Grundlage ---------------------------------------------------------
   Alles in diesem Abschnitt gilt nur INNERHALB von .ui. Während des Umbaus
   trägt nur der umgebaute Behälter die Klasse, am Ende <body>. So ändert
   das Einbinden von ui.css keine Ansicht, die noch aus der alten style.css
   lebt (siehe DESIGN.md, „Umbau in Stufen“). Die Regeln haben das Gewicht
   null (:where), jeder Baustein gewinnt gegen sie.                        */

:where(.ui),
:where(.ui) *,
:where(.ui) *::before,
:where(.ui) *::after { box-sizing: border-box; }

:where(.ui) {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--schrift-grund);
  line-height: var(--zeile-grund);
  font-weight: var(--gewicht-normal);
  font-feature-settings: var(--schrift-merkmale);
  font-optical-sizing: auto;
  letter-spacing: var(--laufweite-grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-bedien) transparent;
}
body:where(.ui) { margin: 0; }
:where(.ui) ::selection { background: var(--gewaehlt-marke); color: var(--gewaehlt-schrift); }
:where(.ui) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.ui) :where(h1, h2, h3, h4) { font-size: inherit; line-height: inherit; font-weight: inherit; }
:where(.ui) :where(ul, ol) { padding: 0; list-style: none; }
:where(.ui) :where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; color: inherit; }
:where(.ui) :where(img, video) { display: block; max-inline-size: 100%; }
:where(.ui) [hidden],
:where(.ui)[hidden] { display: none !important; }

/* Eine Insel mit eigenem Schema trägt ihren eigenen Grund und Text. */
:where(.ui) [data-schema] { background: var(--grund); color: var(--text); }

/* Tastatur-Fokus: EIN Ring, überall derselbe, hell und neutral.
   Er sitzt mit Abstand um das Element und berührt nur den Untergrund. */
:where(.ui) :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; }
:where(.ui) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.zeigt-fokus {
  outline: var(--strich-stark) solid var(--fokus);
  outline-offset: var(--strich-stark);
}

/* Hilfsklassen */
.ziffern { font-variant-numeric: var(--ziffern-gleich); }
.leise { color: var(--text-leise); }
.stark { font-weight: var(--gewicht-stark); }
.kuerzt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reihe { display: flex; align-items: center; gap: var(--raum-2); min-inline-size: 0; }
.reihe--umbruch { flex-wrap: wrap; }
.reihe--weit { gap: var(--raum-4); }
.reihe--oben { align-items: flex-start; }
.stapel { display: flex; flex-direction: column; gap: var(--raum-2); min-inline-size: 0; }
.stapel--weit { gap: var(--raum-4); }
.luecke { flex: 1 1 auto; }
.nur-vorlesen {
  position: absolute;
  inline-size: var(--strich);
  block-size: var(--strich);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.trenner {
  flex: none;
  align-self: center;
  inline-size: var(--strich);
  block-size: var(--raum-5);
  background: var(--linie);
}


/* 1 · Zustand ----------------------------------------------------------------
   data-zustand ist der EINE Schalter. Er setzt sechs Töne; Zeile, Abzeichen,
   Zähler, Hinweis, Kurzmeldung, Glied und Balken lesen nur diese sechs.
   (Dazu --z-text-leiste: das Wort, wo es ohne eigene Fläche auf dem Grund
   der Seitenleiste steht. Nur bei „wartet auf dich“ weicht es ab: dort
   bleibt es in beiden Schemata blau.)
   Ein Zustand ist nie nur Farbe: dazu gehören immer Symbol und Wort
   (die Helfer in bausteine.js setzen beides).                              */

[data-zustand="dran"] {
  --z-flaeche: var(--dran-flaeche);
  --z-flaeche-hover: var(--dran-flaeche-hover);
  --z-linie: var(--dran-linie);
  --z-kraeftig: var(--dran-kraeftig);
  --z-text: var(--dran-text);
  --z-text-leiste: var(--dran-text-leiste);
  --z-zeichen: var(--dran-zeichen);
}
[data-zustand="laeuft"] {
  --z-flaeche: var(--laeuft-flaeche);
  --z-flaeche-hover: var(--laeuft-flaeche-hover);
  --z-linie: var(--laeuft-linie);
  --z-kraeftig: var(--laeuft-kraeftig);
  --z-text: var(--laeuft-text);
  --z-text-leiste: var(--laeuft-text);
  --z-zeichen: var(--laeuft-zeichen);
}
[data-zustand="fertig"] {
  --z-flaeche: var(--fertig-flaeche);
  --z-flaeche-hover: var(--fertig-flaeche-hover);
  --z-linie: var(--fertig-linie);
  --z-kraeftig: var(--fertig-kraeftig);
  --z-text: var(--fertig-text);
  --z-text-leiste: var(--fertig-text);
  --z-zeichen: var(--fertig-zeichen);
}
[data-zustand="fehler"] {
  --z-flaeche: var(--fehler-flaeche);
  --z-flaeche-hover: var(--fehler-flaeche-hover);
  --z-linie: var(--fehler-linie);
  --z-kraeftig: var(--fehler-kraeftig);
  --z-text: var(--fehler-text);
  --z-text-leiste: var(--fehler-text);
  --z-zeichen: var(--fehler-zeichen);
}
[data-zustand="ruht"] {
  --z-flaeche: var(--ruht-flaeche);
  --z-flaeche-hover: var(--ruht-flaeche-hover);
  --z-linie: var(--ruht-linie);
  --z-kraeftig: var(--ruht-kraeftig);
  --z-text: var(--ruht-text);
  --z-text-leiste: var(--ruht-text);
  --z-zeichen: var(--ruht-zeichen);
}
/* Eigenständige Bausteine erben den Zustand ihres Trägers NICHT:
   ein Etikett oder Zähler ohne eigenes data-zustand bleibt neutral.
   (Glieder und Balken in einer Zeile erben ihn mit Absicht.)             */
:where(.abzeichen, .zaehler, .hinweis, .meldung, .leerzustand, .zeile, .fach, .fusszeile, .standangabe, .kasten, .serverkasten, .station):not([data-zustand]) {
  --z-zeichen: initial;
  --z-flaeche: initial;
  --z-flaeche-hover: initial;
  --z-linie: initial;
  --z-kraeftig: initial;
  --z-text: initial;
  --z-text-leiste: initial;
}


/* 2 · Symbol ------------------------------------------------------------------
   Kommt aus symbole.js: symbol("name", 16). Lucide-Raster 24, Strich 2,
   runde Enden, Farbe über currentColor. Größe steht am SVG (14·16·20·32). */

.symbol { flex: none; display: inline-block; vertical-align: middle; }
.symbol--dreht {
  animation: ui-kreis var(--dauer-kreis) var(--kurve-gleich) infinite;
  animation-play-state: var(--lauf);
}
@keyframes ui-kreis { to { transform: rotate(360deg); } }

/* Platzhalter im festen Markup (<i data-s="parken" data-g="16">): hält den
   Platz des Symbols frei, bis UI.symboleEinsetzen es einsetzt. So rückt beim
   Laden kein Name zur Seite, auch wenn das Skript erst später kommt.       */
:where(.ui) i[data-s] {
  display: inline-block;
  flex: none;
  inline-size: var(--symbol-m);
  block-size: var(--symbol-m);
  vertical-align: middle;
}
:where(.ui) i[data-s][data-g="14"] { inline-size: var(--symbol-s); block-size: var(--symbol-s); }
:where(.ui) i[data-s][data-g="20"] { inline-size: var(--symbol-l); block-size: var(--symbol-l); }
:where(.ui) i[data-s][data-g="24"] { inline-size: var(--raum-6); block-size: var(--raum-6); }
:where(.ui) i[data-s][data-g="32"] { inline-size: var(--symbol-xl); block-size: var(--symbol-xl); }

/* Logo-Zeichen „R mit Schiene“: neutrale Kachel, das R darauf, die Schiene
   (sein Stamm) klar abgesetzt. Dasselbe Zeichen wie favicon.svg. Nie blau. */
.symbol[data-symbol="logo"] { border-radius: var(--ecke-s); }
.symbol[data-symbol="logo"] > .symbol__kachel { fill: var(--logo-kachel); stroke: none; }
.symbol[data-symbol="logo"] > .symbol__zeichen { stroke: var(--logo-zeichen); }
.symbol[data-symbol="logo"] > .symbol__schiene { stroke: var(--logo-schiene); }


/* 3 · Knopf --------------------------------------------------------------------
   Ränge:   .knopf           Neben (Standard): graue Fläche, Rand 3 : 1
            .knopf--haupt    die Haupthandlung: blau gefüllt, dunkle Schrift
            .knopf--leise    nur Schrift; Fläche erst unter der Hand
            .knopf--gefahr   löscht oder verwirft etwas
   Größen: .knopf--klein 28 · Standard 36 · .knopf--gross 44
   Form:    .knopf--symbol   nur ein Symbol (quadratisch, braucht aria-label)
            .knopf--breit    füllt die Zeile
   Lädt:    aria-busy="true" (Helfer knopfLaedt): Symbol dreht; der Helfer
            sperrt den Knopf zusätzlich (disabled), damit auch Enter und
            Leertaste nichts zweimal auslösen
   Raster:  .knopf--folgt    in Ruhe Rang Neben; wird zur Haupthandlung, wenn
                             seine Karte oder Zeile unter Maus ODER Tastatur ist */

.knopf {
  --k-flaeche: var(--flaeche-bedien);
  --k-flaeche-hover: var(--flaeche-bedien-hover);
  --k-flaeche-aktiv: var(--flaeche-bedien-aktiv);
  --k-rand: var(--linie-bedien);
  --k-rand-hover: var(--linie-bedien-hover);
  --k-schrift: var(--text);
  --k-schrift-hover: var(--text);

  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-inline-size: var(--mass-bedien-m);
  block-size: var(--mass-bedien-m);
  padding-inline: var(--raum-4);
  border: var(--strich) solid var(--k-rand);
  border-radius: var(--ecke-m);
  background: var(--k-flaeche);
  color: var(--k-schrift);
  font-size: var(--schrift-grund);
  line-height: var(--zeile-grund);
  font-weight: var(--gewicht-mittel);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    border-color var(--dauer-kurz) var(--kurve),
    color var(--dauer-kurz) var(--kurve),
    transform var(--dauer-kurz) var(--kurve);
}
/* An der Seite, an der ein Symbol steht, ist der Rand eine Stufe schmaler.
   (Der Text eines Knopfs steht in einem <span> — das macht der Helfer knopf().) */
.knopf:where(:has(> .symbol:first-child)) { padding-inline-start: var(--raum-3); }
.knopf:where(:has(> .symbol:last-child:not(:first-child))) { padding-inline-end: var(--raum-3); }
.knopf:hover,
.knopf.zeigt-ueberfahren {
  background: var(--k-flaeche-hover);
  border-color: var(--k-rand-hover);
  color: var(--k-schrift-hover);
}
.knopf:active,
.knopf.zeigt-gedrueckt {
  background: var(--k-flaeche-aktiv);
  transform: scale(var(--druck));
}
.knopf:disabled,
.knopf[aria-disabled="true"] {
  opacity: var(--deckkraft-gesperrt);
  cursor: not-allowed;
  pointer-events: none;
}
.knopf[aria-busy="true"] { cursor: progress; pointer-events: none; opacity: 1; }
.knopf[aria-busy="true"] > .symbol:first-child {
  animation: ui-kreis var(--dauer-kreis) var(--kurve-gleich) infinite;
  animation-play-state: var(--lauf);
}
/* Umschalt-Knopf „an“: hellere Fläche UND heller Rand (11 : 1 gegen die
   Füllung) — an und aus sind auch ohne Farbe klar zu unterscheiden.
   Der Helfer setzt bei „an“ zusätzlich einen Haken davor.                 */
.knopf[aria-pressed="true"] {
  --k-flaeche: var(--gewaehlt-flaeche);
  --k-flaeche-hover: var(--gewaehlt-flaeche);
  --k-rand: var(--gewaehlt-marke);
  --k-rand-hover: var(--gewaehlt-marke);
  --k-schrift: var(--text);
}
.knopf[aria-pressed="false"] > .knopf__an { display: none; }

.knopf--haupt,
.knopf--folgt {
  font-weight: var(--gewicht-stark);
}
.knopf--haupt,
:is(.medienkarte, .zeile, .projektkarte):hover .knopf--folgt,
:is(.medienkarte, .zeile, .projektkarte):has(:focus-visible) .knopf--folgt,
:is(.medienkarte, .zeile, .projektkarte).zeigt-ueberfahren .knopf--folgt,
:is(.medienkarte, .zeile, .projektkarte).zeigt-fokus .knopf--folgt {
  --k-flaeche: var(--akzent);
  --k-flaeche-hover: var(--akzent-hover);
  --k-flaeche-aktiv: var(--akzent);
  --k-rand: var(--akzent-rand);
  --k-rand-hover: var(--akzent-rand);
  --k-schrift: var(--akzent-schrift);
  --k-schrift-hover: var(--akzent-schrift);
}
/* Nie zwei blaue Knöpfe zugleich: Steht im Raster oder in der Liste ein
   sichtbarer Tastatur-Fokus, hebt die Maus daneben nichts mehr.          */
:is(.kartenraster, .liste):has(:focus-visible) :is(.medienkarte, .zeile, .projektkarte):hover:not(:has(:focus-visible)) .knopf--folgt {
  --k-flaeche: var(--flaeche-bedien);
  --k-flaeche-hover: var(--flaeche-bedien-hover);
  --k-flaeche-aktiv: var(--flaeche-bedien-aktiv);
  --k-rand: var(--linie-bedien);
  --k-rand-hover: var(--linie-bedien-hover);
  --k-schrift: var(--text);
  --k-schrift-hover: var(--text);
}

/* Gesperrte Haupt-Taste: grau statt halb-blau, damit man lesen kann, WAS
   gesperrt ist (7,6 : 1). Steht mit festen Eigenschaften da, damit keine
   Regel der Karte oder Zeile sie wieder blau färbt. Lädt sie, bleibt sie blau. */
.knopf--haupt:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]),
.knopf--folgt:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
  border-color: var(--linie);
  background: var(--flaeche-bedien);
  color: var(--text-leise);
  opacity: 1;
}

.knopf--leise {
  --k-flaeche: transparent;
  --k-flaeche-hover: var(--flaeche-bedien-hover);
  --k-flaeche-aktiv: var(--flaeche-bedien-aktiv);
  --k-rand: transparent;
  --k-rand-hover: transparent;
  --k-schrift: var(--text-leise);
  --k-schrift-hover: var(--text);
}
.knopf--leise[aria-pressed="true"] {
  --k-flaeche: var(--gewaehlt-flaeche);
  --k-rand: var(--gewaehlt-marke);
  --k-rand-hover: var(--gewaehlt-marke);
  --k-schrift: var(--text);
}

.knopf--gefahr {
  --k-flaeche: var(--fehler-flaeche);
  --k-flaeche-hover: var(--fehler-flaeche-hover);
  --k-flaeche-aktiv: var(--fehler-flaeche);
  --k-rand: var(--fehler-kraeftig);
  --k-rand-hover: var(--fehler-text);
  --k-schrift: var(--fehler-text);
  --k-schrift-hover: var(--fehler-text);
}

.knopf--klein {
  gap: calc(var(--raum-1) + var(--strich-stark));
  min-inline-size: var(--mass-bedien-s);
  block-size: var(--mass-bedien-s);
  padding-inline: var(--raum-3);
}
.knopf--klein:where(:has(> .symbol:first-child)) { padding-inline-start: calc(var(--raum-2) + var(--strich-stark)); }
.knopf--klein:where(:has(> .symbol:last-child:not(:first-child))) { padding-inline-end: calc(var(--raum-2) + var(--strich-stark)); }
.knopf--gross {
  min-inline-size: var(--mass-bedien-l);
  block-size: var(--mass-bedien-l);
  padding-inline: var(--raum-6);
  font-size: var(--schrift-betont);
  line-height: var(--zeile-betont);
}
.knopf--gross:where(:has(> .symbol:first-child)) { padding-inline-start: var(--raum-5); }
.knopf--gross:where(:has(> .symbol:last-child:not(:first-child))) { padding-inline-end: var(--raum-5); }
.knopf.knopf--symbol { padding-inline: 0; }
.knopf--breit { flex: 1 1 auto; inline-size: 100%; }

/* Verweis: unterstrichen. Nach aussen mit dem Symbol „aussen“ dahinter.
   Knöpfe sind nie unterstrichen, Verweise immer.                          */
.verweis {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  min-block-size: var(--mass-klick-min);
  border-radius: var(--ecke-s);
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--linie-bedien);
  text-decoration-thickness: var(--strich);
  text-underline-offset: var(--raum-1);
  white-space: nowrap;
  cursor: pointer;
  transition: text-decoration-color var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve);
}
.verweis:hover,
.verweis.zeigt-ueberfahren { text-decoration-color: var(--text); }
.verweis:active,
.verweis.zeigt-gedrueckt { color: var(--text-leise); }
.verweis > .symbol { color: var(--text-leise); }
.verweis--leise { color: var(--text-leise); }
.verweis--leise:hover,
.verweis--leise.zeigt-ueberfahren { color: var(--text); }
.verweis[aria-disabled="true"] { opacity: var(--deckkraft-gesperrt); pointer-events: none; }


/* 4 · Abzeichen, Etikett, Zähler -------------------------------------------------
   Zustand und Eigenschaft sehen absichtlich verschieden aus:
     .abzeichen  ZUSTAND      Pille, getönte Fläche, Farbe + Symbol + Wort,
                              in Grundgröße; höchstens zwei, drei Worte —
                              die längere Angabe steht daneben
     .etikett    EIGENSCHAFT  Rechteck mit feinem Rand, grau, nie farbig
     .zaehler    ZAHL         in Ruhe nur die Zahl (klein); mit data-zustand
                              als Pille mit Symbol und Wort („1 wartet auf dich“) */

.abzeichen {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--raum-1);
  block-size: var(--mass-abzeichen);
  padding-inline: calc(var(--raum-1) + var(--strich-stark)) calc(var(--raum-2) + var(--strich-stark));
  border-radius: var(--ecke-rund);
  background: var(--z-flaeche, var(--ruht-flaeche));
  color: var(--z-text, var(--ruht-text));
  font-size: var(--schrift-grund);
  line-height: var(--zeile-grund);
  font-weight: var(--gewicht-mittel);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}
.abzeichen > .symbol,
.zaehler > .symbol { color: var(--z-zeichen, currentColor); }
.abzeichen[data-zustand="laeuft"] > .symbol {
  animation: ui-kreis var(--dauer-kreis) var(--kurve-gleich) infinite;
  animation-play-state: var(--lauf);
}
/* groß: im Seitenkopf und in der Handlungs-Leiste */
.abzeichen--gross {
  gap: var(--raum-2);
  block-size: var(--mass-bedien-s);
  padding-inline: var(--raum-2) var(--raum-3);
  font-weight: var(--gewicht-stark);
}
/* schlicht: ohne Fläche — für dichte Stellen (Tabelle) */
.abzeichen--schlicht {
  block-size: auto;
  min-block-size: var(--zeile-grund);
  padding-inline: 0;
  border-radius: 0;
  background: transparent;
}

.etikett {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--raum-1);
  block-size: var(--mass-etikett);
  padding-inline: var(--raum-2);
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-s);
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
  white-space: nowrap;
}

.zaehler {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--raum-1);
  min-inline-size: var(--mass-etikett);
  block-size: var(--mass-etikett);
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}
.zaehler:empty { display: none; }
/* mit Zustand: Pille wie das Abzeichen, in Grundgröße — das Wort gehört dazu */
.zaehler[data-zustand] {
  block-size: var(--mass-abzeichen);
  padding-inline: calc(var(--raum-1) + var(--strich-stark)) calc(var(--raum-2) + var(--strich-stark));
  border-radius: var(--ecke-rund);
  background: var(--z-flaeche);
  color: var(--z-text);
  font-size: var(--schrift-grund);
  line-height: var(--zeile-grund);
  letter-spacing: var(--laufweite-grund);
}
/* schlicht: ohne Fläche — die Signale unter einer Station der Seitenleiste.
   Grundgröße und 16er-Symbol: das ist der Grund, warum man hinsieht.      */
.zaehler--schlicht[data-zustand] {
  block-size: auto;
  min-block-size: var(--zeile-grund);
  padding-inline: 0;
  border-radius: 0;
  background: transparent;
}
.zaehler[data-zustand="laeuft"] > .symbol {
  animation: ui-kreis var(--dauer-kreis) var(--kurve-gleich) infinite;
  animation-play-state: var(--lauf);
}


/* 5 · Segment-Schalter und Reiter --------------------------------------------------
   Segment: zwei bis sechs Möglichkeiten, eine gilt (Filter, Format Video | Bild).
   Reiter:  wechselt den Inhalt darunter (Zeilen-Vergleich, Gate-Abschnitte).
   Gewählt ist NEUTRAL: hellere Fläche und Linie mit 3 : 1, nie blau.       */

.segment {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  gap: var(--strich-stark);
  block-size: var(--mass-bedien-m);
  padding: var(--raum-1);
  border-radius: var(--ecke-m);
  background: var(--flaeche-bedien);
}
.segment--breit { display: flex; }
/* klein: 28 hoch, für Stellen am Rand (Darstellung im Fuß der Seitenleiste) */
.segment--klein { block-size: var(--mass-bedien-s); padding: var(--strich-stark); }
.segment--klein > .segment__feld { min-inline-size: var(--mass-klick-min); padding-inline: var(--raum-2); justify-content: center; }
.segment--breit > .segment__feld { flex: 1 1 0; justify-content: center; }
.segment__feld {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding-inline: var(--raum-3);
  border: 0;
  border-radius: var(--ecke-s);
  background: transparent;
  color: var(--text-leise);
  font-weight: var(--gewicht-mittel);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dauer-mittel) var(--kurve),
    box-shadow var(--dauer-mittel) var(--kurve),
    color var(--dauer-kurz) var(--kurve);
}
.segment__feld:hover,
.segment__feld.zeigt-ueberfahren { background: var(--flaeche-bedien-hover); color: var(--text); }
.segment__feld:active,
.segment__feld.zeigt-gedrueckt { background: var(--flaeche-bedien-aktiv); }
.segment__feld[aria-pressed="true"],
.segment__feld[aria-selected="true"] {
  background: var(--gewaehlt-flaeche);
  box-shadow: inset 0 0 0 var(--strich) var(--gewaehlt-linie);
  color: var(--text);
  font-weight: var(--gewicht-stark);
}
.segment__feld:disabled { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; }
.segment__feld > .zaehler { min-inline-size: 0; }
.segment__feld[aria-pressed="true"] > .zaehler:not([data-zustand]),
.segment__feld[aria-selected="true"] > .zaehler:not([data-zustand]) { color: var(--text); }

.reiter {
  display: flex;
  align-items: stretch;
  gap: var(--raum-5);
  border-block-end: var(--strich) solid var(--linie);
}
.reiter__feld {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  block-size: var(--mass-bedien-m);
  padding: 0;
  border: 0;
  border-radius: var(--ecke-s);
  background: transparent;
  color: var(--text-leise);
  font-weight: var(--gewicht-mittel);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dauer-kurz) var(--kurve);
}
.reiter__feld::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--strich) * -1);
  block-size: var(--strich-stark);
  background: transparent;
  transition: background-color var(--dauer-mittel) var(--kurve);
}
.reiter__feld:hover,
.reiter__feld.zeigt-ueberfahren { color: var(--text); }
.reiter__feld:hover::after,
.reiter__feld.zeigt-ueberfahren::after { background: var(--linie-bedien); }
.reiter__feld[aria-selected="true"] { color: var(--text); font-weight: var(--gewicht-stark); }
.reiter__feld[aria-selected="true"]::after { background: var(--gewaehlt-marke); }
.reiter__feld:disabled { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; }


/* 6 · Eingabefeld, Textfeld, Auswahl ------------------------------------------------
   Rand mit 3 : 1 (--linie-eingabe). Fokus: Rand und Ring hell-neutral.     */

.feld { display: flex; flex-direction: column; gap: var(--raum-1); min-inline-size: 0; }
.feld__name {
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
}
.feld__hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-1);
  color: var(--text-leise);
}
.feld__hinweis > .symbol { margin-block-start: calc((var(--zeile-grund) - var(--symbol-s)) / 2); }
.feld__hinweis[data-zustand] { color: var(--z-text); }

.eingabe {
  inline-size: 100%;
  block-size: var(--mass-bedien-m);
  padding-inline: var(--raum-3);
  border: var(--strich) solid var(--linie-eingabe);
  border-radius: var(--ecke-m);
  background: var(--flaeche-bedien);
  color: var(--text);
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    border-color var(--dauer-kurz) var(--kurve);
}
.eingabe::placeholder { color: var(--text-leise); opacity: 1; }
.eingabe:hover,
.eingabe.zeigt-ueberfahren { border-color: var(--linie-eingabe-hover); background: var(--flaeche-bedien-hover); }
/* Fokus am Feld: der Ring liegt AUF dem Rand — ein klarer heller Strich statt zwei */
.eingabe:focus-visible,
.eingabe.zeigt-fokus {
  border-color: var(--fokus);
  background: var(--flaeche-bedien);
  outline-offset: calc(var(--strich) * -1);
}
.eingabe:disabled { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; }
.eingabe[aria-invalid="true"] { border-color: var(--fehler-kraeftig); }
.eingabe[readonly] { border-color: var(--linie); background: transparent; }
/* Der Browser färbt selbst ausgefüllte Felder sonst hellblau oder gelb —
   das wäre das einzige Blau, das nicht „Handeln“ heißt.                    */
.eingabe:-webkit-autofill,
.eingabe:-webkit-autofill:hover,
.eingabe:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: inset 0 0 0 var(--flut) var(--flaeche-bedien);
}

.eingabe-mit-symbol { position: relative; display: block; }
.eingabe-mit-symbol > .symbol {
  position: absolute;
  inset-block-start: calc(50% - var(--symbol-m) / 2);
  inset-inline-start: var(--raum-3);
  color: var(--text-leise);
  pointer-events: none;
}
.eingabe-mit-symbol > .eingabe { padding-inline-start: calc(var(--raum-3) + var(--symbol-m) + var(--raum-2)); }

/* Textfeld, das mit seinem Inhalt wächst — ohne Skript-Maße:
   Die Hülle ist ein Raster; ihr ::after trägt denselben Text unsichtbar
   (data-wert, vom Helfer textfeld() gepflegt) und gibt die Höhe vor.       */
.textfeld { display: grid; min-inline-size: 0; }
.textfeld::after,
.textfeld > textarea {
  grid-area: 1 / 1;
  min-inline-size: 0;
  min-block-size: calc(var(--zeile-lesen) * 2 + var(--raum-2) * 2 + var(--strich) * 2);
  padding: var(--raum-2) var(--raum-3);
  border: var(--strich) solid transparent;
  font: inherit;
  line-height: var(--zeile-lesen);
  letter-spacing: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.textfeld::after { content: attr(data-wert) " "; visibility: hidden; }
.textfeld > textarea {
  block-size: auto;
  border-color: var(--linie-eingabe);
  resize: none;
  overflow: hidden;
}
.textfeld > textarea[readonly] { border-color: var(--linie); }

/* Auswahl: ein echtes <select>, damit Tastatur und Vorlesen stimmen. */
.auswahl { position: relative; display: inline-block; min-inline-size: 0; }
.auswahl--breit { display: block; }
.auswahl > select {
  appearance: none;
  inline-size: 100%;
  block-size: var(--mass-bedien-m);
  padding-inline: var(--raum-3) calc(var(--raum-3) + var(--symbol-m) + var(--raum-2));
  border: var(--strich) solid var(--linie-eingabe);
  border-radius: var(--ecke-m);
  background: var(--flaeche-bedien);
  color: var(--text);
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    border-color var(--dauer-kurz) var(--kurve);
}
.auswahl > select:hover,
.auswahl.zeigt-ueberfahren > select { border-color: var(--linie-eingabe-hover); background: var(--flaeche-bedien-hover); }
.auswahl > select:focus-visible,
.auswahl.zeigt-fokus > select {
  border-color: var(--fokus);
  outline: var(--strich-stark) solid var(--fokus);
  outline-offset: calc(var(--strich) * -1);
}
.auswahl.zeigt-fokus { outline: none; }
.auswahl > select:disabled { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; }
.auswahl > .symbol {
  position: absolute;
  inset-block-start: calc(50% - var(--symbol-m) / 2);
  inset-inline-end: var(--raum-3);
  color: var(--text-leise);
  pointer-events: none;
}


/* 7 · Haken und Schalter --------------------------------------------------------------
   Haken:    mehrere auswählen (Aufträge bündeln, Ads zusammen hochladen).
   Schalter: etwas ist an oder aus, wirkt sofort.
   An / gewählt ist hell-neutral gefüllt, nie blau.                          */

.haken {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-inline-size: var(--mass-klick-min);
  min-block-size: var(--mass-klick-min);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.haken > input {
  position: absolute;
  inset-block-start: calc(50% - var(--raum-5) / 2);
  inset-inline-start: 0;
  inline-size: var(--raum-5);
  block-size: var(--raum-5);
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.haken__feld {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--raum-5);
  block-size: var(--raum-5);
  border: var(--strich) solid var(--linie-eingabe);
  border-radius: var(--ecke-s);
  background: var(--flaeche-bedien);
  color: transparent;
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    border-color var(--dauer-kurz) var(--kurve),
    color var(--dauer-kurz) var(--kurve);
}
.haken:hover > .haken__feld,
.haken.zeigt-ueberfahren > .haken__feld { border-color: var(--linie-eingabe-hover); background: var(--flaeche-bedien-hover); }
.haken > input:checked + .haken__feld {
  border-color: var(--gewaehlt-marke);
  background: var(--gewaehlt-marke);
  color: var(--gewaehlt-schrift);
}
.haken > input:focus-visible + .haken__feld,
.haken.zeigt-fokus > .haken__feld {
  outline: var(--strich-stark) solid var(--fokus);
  outline-offset: var(--strich-stark);
}
.haken.zeigt-fokus { outline: none; }
.haken:has(> input:disabled) { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; }

.schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-block-size: var(--mass-klick-min);
  padding: 0;
  border: 0;
  border-radius: var(--ecke-m);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.schalter__bahn {
  display: flex;
  flex: none;
  align-items: center;
  inline-size: calc(var(--raum-7) + var(--raum-1));
  block-size: var(--raum-5);
  padding-inline: var(--strich-stark);
  border: var(--strich) solid var(--linie-eingabe);
  border-radius: var(--ecke-rund);
  background: var(--flaeche-bedien);
  transition:
    background-color var(--dauer-mittel) var(--kurve),
    border-color var(--dauer-mittel) var(--kurve);
}
.schalter__bahn::after {
  content: "";
  inline-size: var(--symbol-s);
  block-size: var(--symbol-s);
  border-radius: var(--ecke-rund);
  background: var(--text-leise);
  transition:
    transform var(--dauer-mittel) var(--kurve),
    background-color var(--dauer-mittel) var(--kurve);
}
.schalter:hover .schalter__bahn,
.schalter.zeigt-ueberfahren .schalter__bahn { border-color: var(--linie-eingabe-hover); background: var(--flaeche-bedien-hover); }
.schalter[aria-checked="true"] .schalter__bahn { border-color: var(--gewaehlt-marke); background: var(--gewaehlt-marke); }
.schalter[aria-checked="true"] .schalter__bahn::after {
  background: var(--gewaehlt-schrift);
  transform: translateX(var(--raum-4));
}
.schalter:disabled { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; }

/* Wahl-Karte: eine Möglichkeit mit erklärendem Satz darunter (Rip-Dialog,
   Gates). Bricht um. Gewählt ist neutral: hellere Fläche, heller Rand, Haken. */
.wahlkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mass-karte-min), 1fr)); gap: var(--raum-2); min-inline-size: 0; }
.wahlkarten--gestapelt { grid-template-columns: minmax(0, 1fr); }
.wahlkarte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  min-inline-size: 0;
  padding: var(--raum-3) var(--raum-4);
  border: var(--strich) solid var(--linie-bedien);
  border-radius: var(--ecke-m);
  background: var(--flaeche-bedien);
  color: var(--text);
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    border-color var(--dauer-kurz) var(--kurve),
    box-shadow var(--dauer-kurz) var(--kurve);
}
.wahlkarte:hover,
.wahlkarte.zeigt-ueberfahren { border-color: var(--linie-bedien-hover); background: var(--flaeche-bedien-hover); }
.wahlkarte:active,
.wahlkarte.zeigt-gedrueckt { background: var(--flaeche-bedien-aktiv); }
.wahlkarte[aria-pressed="true"] {
  border-color: var(--gewaehlt-marke);
  background: var(--gewaehlt-flaeche);
  box-shadow: inset 0 0 0 var(--strich) var(--gewaehlt-marke);
}
.wahlkarte:disabled { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; }
.wahlkarte__titel { display: flex; align-items: center; gap: var(--raum-2); font-weight: var(--gewicht-stark); }
.wahlkarte__titel > span { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
.wahlkarte__titel > .symbol:first-child { color: var(--text-leise); }
.wahlkarte[aria-pressed="false"] .wahlkarte__haken { visibility: hidden; }
.wahlkarte__satz { color: var(--text-leise); overflow-wrap: anywhere; }


/* 8 · Bild: Schild und Daumen ---------------------------------------------------------
   Auf einem Bild liegt höchstens EIN kleines Schild, unten. Oben nie etwas. */

.bildschild {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  block-size: var(--mass-etikett);
  padding-inline: var(--raum-1) var(--raum-2);
  border-radius: var(--ecke-s);
  background: var(--bild-schild);
  backdrop-filter: blur(var(--raum-2));
  color: var(--bild-schrift);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}

/* Daumen: kleines Hochkant-Bild für Zeilen */
.daumen {
  position: relative;
  flex: none;
  overflow: hidden;
  inline-size: var(--mass-daumen);
  aspect-ratio: var(--format-hoch);
  border-radius: var(--ecke-s);
  background: var(--bild-grund);
}
.daumen > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.daumen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--strich) var(--bild-linie);
  pointer-events: none;
}


/* 9 · Medien-Karte und Karten-Raster -----------------------------------------------------
   Für Parken und TrendTrack. In Ruhe OHNE Kasten: nur Bild und Text.
   Unter der Hand (Maus oder Tastatur) bekommt sie Fläche und Linie und ihr
   Knopf wird zur Haupthandlung. Sie bewegt sich dabei NICHT — sonst pendeln
   mouseenter und mouseleave am Rand und das Vorschau-Video lädt im Wechsel.
   Das Bild ist oben angeschlagen und auf 4 : 5 zugeschnitten, damit bei
   1440 × 900 zwei Reihen ganz ins Bild passen; das volle Hochkant-Bild
   zeigt die Vorschau.
     Vorschau-Video             liegt immer ÜBER dem Poster, egal an welcher
                                Stelle es eingesetzt wird; Schild und Haken
                                liegen darüber. [data-vorschau] zeigt den Rahmen.
     Haken .medienkarte__wahl   gewählt = neutrale Linie mit 3 : 1; der Haken
                                selbst ist eine dunkle Insel (liegt auf dem Bild)
     ohne Bild                  ein Symbol in der leeren Bild-Fläche          */

.kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--mass-karte-min), 1fr));
  gap: var(--raum-1);
  /* Die Karten haben 8 Innenabstand; das Raster rückt um 8 aus, damit die
     BILDER auf der Kante des Seitenkopfs stehen. */
  margin-inline: calc(var(--raum-2) * -1);
}

.medienkarte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  min-inline-size: 0;
  padding: var(--raum-2);
  border-radius: var(--ecke-l);
  background: transparent;
  box-shadow: inset 0 0 0 var(--strich) transparent;
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    box-shadow var(--dauer-kurz) var(--kurve);
}
.medienkarte:hover,
.medienkarte:has(:focus-visible),
.medienkarte.zeigt-ueberfahren,
.medienkarte.zeigt-fokus,
.medienkarte[data-vorschau] {
  background: var(--flaeche-bedien);
  box-shadow: inset 0 0 0 var(--strich) var(--linie);
}
.medienkarte.zeigt-fokus { outline: none; }
.medienkarte:has(.medienkarte__wahl > input:checked),
.medienkarte[data-gewaehlt] {
  background: var(--flaeche-bedien);
  box-shadow: inset 0 0 0 var(--strich-stark) var(--gewaehlt-linie);
}

.medienkarte__bild {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: var(--format-karte);
  border-radius: var(--ecke-s);
  background: var(--bild-grund);
  color: var(--buehne-text-leise);
}
.medienkarte__bild > img,
.medienkarte__bild > video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top;
}
.medienkarte__bild > video { z-index: var(--ebene-innen-1); }
/* ohne Bild: das Symbol des Formats mittig in der leeren Fläche */
.medienkarte__bild > .symbol { position: absolute; inset: 0; margin: auto; }
.medienkarte__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--ebene-innen-2);
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--strich) var(--bild-linie);
  pointer-events: none;
}
.medienkarte__bild > .bildschild {
  position: absolute;
  inset-block-end: var(--raum-2);
  inset-inline-start: var(--raum-2);
  z-index: var(--ebene-innen-2);
}
/* Auswahl-Haken: unten rechts auf dem Bild, auf eigenem dunklem Grund */
.medienkarte__wahl {
  position: absolute;
  inset-block-end: var(--raum-1);
  inset-inline-end: var(--raum-1);
  z-index: var(--ebene-innen-2);
  justify-content: center;
  inline-size: var(--mass-bedien-s);
  block-size: var(--mass-bedien-s);
  border-radius: var(--ecke-s);
  background: var(--bild-schild);
  backdrop-filter: blur(var(--raum-2));
}
.medienkarte__wahl > input { inset: 0; inline-size: 100%; block-size: 100%; }
.medienkarte[data-vorschau] .medienkarte__bild::after { box-shadow: inset 0 0 0 var(--strich-stark) var(--gewaehlt-marke); }

.medienkarte__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--raum-2);
  min-inline-size: 0;
}
/* Fremdtext, einzeilig: der volle Wortlaut steht im title (Helfer medienkarte) */
.medienkarte__titel {
  overflow: hidden;
  font-weight: var(--gewicht-stark);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* zweite Zeile: Grundgröße in leiser Farbe — nie Kleinschrift */
.medienkarte__zeile {
  overflow: hidden;
  margin-block-start: calc(var(--raum-2) * -1);
  color: var(--text-leise);
  font-variant-numeric: var(--ziffern-gleich);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.medienkarte__marken {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  min-inline-size: 0;
  block-size: var(--mass-etikett);
  overflow: hidden;
}
.medienkarte__handlung {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  margin-block-start: auto;
}
.medienkarte__handlung > .knopf:first-child { flex: 1 1 auto; }
/* Knöpfe in der Karte: klein (28), damit zwei Reihen samt Erklär-Zeile bei
   1440 × 900 ganz ins Bild passen; konzentrisch: Karte 14 − Innenabstand 8 = 6 */
.medienkarte__handlung > .knopf { min-inline-size: var(--mass-bedien-s); block-size: var(--mass-bedien-s); border-radius: var(--ecke-s); }


/* 10 · Projekt-Karte ------------------------------------------------------------------------
   Für die Übersichten von Review und Uploader: ein Projekt, sein Stand,
   seine eine Handlung. Liegend: Hochkant-Bild links, Text, Handlung rechts. */

.projektkarte {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-3) var(--raum-4) var(--raum-3) var(--raum-3);
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-l);
  background: var(--flaeche);
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    border-color var(--dauer-kurz) var(--kurve);
}
/* mit Auswahl-Haken davor (Uploader: „zusammen hochladen“) */
.projektkarte--wahl { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.projektkarte--bedienbar { cursor: pointer; }
.projektkarte--bedienbar:hover,
.projektkarte.zeigt-ueberfahren { border-color: var(--linie-bedien); background: var(--flaeche-bedien); }
.projektkarte:has(> .haken > input:checked),
.projektkarte[aria-selected="true"] { border-color: var(--gewaehlt-linie); background: var(--flaeche-bedien); }
.projektkarte__bild {
  position: relative;
  overflow: hidden;
  inline-size: var(--raum-9);
  aspect-ratio: var(--format-hoch);
  border-radius: var(--ecke-s);
  background: var(--bild-grund);
}
.projektkarte__bild > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.projektkarte__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--strich) var(--bild-linie);
  pointer-events: none;
}
.projektkarte__text { display: flex; flex-direction: column; gap: var(--raum-1); min-inline-size: 0; }
.projektkarte__titel {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  font-size: var(--schrift-betont);
  line-height: var(--zeile-betont);
  font-weight: var(--gewicht-stark);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}
.projektkarte__zusatz { color: var(--text-leise); font-weight: var(--gewicht-normal); }
.projektkarte__zeile { overflow: hidden; color: var(--text-leise); text-overflow: ellipsis; white-space: nowrap; }
.projektkarte__marken { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1); margin-block-start: var(--raum-1); }
.projektkarte__handlung { display: flex; align-items: center; gap: var(--raum-2); }
/* unten: über die volle Breite der Karte (Hochlade-Balken, Nutzungsbilanz) */
.projektkarte__unten { grid-column: 1 / -1; min-inline-size: 0; }


/* 11 · Liste, Zeile, Zustands-Schiene ---------------------------------------------------------
   Eine Zeile je Ding (Projekt im Rip, Auftrag, Posten der Upload-Schlange).
   Am Zeilenanfang steht die Zustands-Schiene (3 px). Sie zeigt den Zustand
   in Farbe UND Form:
     durchgezogen   wartet auf dich · fertig · ruht
     wandernd       läuft
     unterbrochen   Fehler / steht
   Die Spalten legt die Ansicht an der LISTE fest:  --zeile-spalten  (in
   style.css). Alle Zeilen einer Liste teilen sich dieselben Spalten
   (subgrid) — so stehen Abzeichen, Glieder und Knöpfe untereinander.       */

.liste {
  --zeile-spalten: auto minmax(0, 1fr) auto;   /* Stellschraube der Ansicht */
  display: grid;
  grid-template-columns: var(--zeile-spalten);
  min-inline-size: 0;
}
.liste > * { grid-column: 1 / -1; }
.liste > .zeile { grid-template-columns: subgrid; }
.liste > * + * { border-block-start: var(--strich) solid var(--linie-leise); }
.liste--kasten {
  overflow: hidden;
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-l);
  background: var(--flaeche);
}

.zeile {
  position: relative;
  display: grid;
  grid-template-columns: var(--zeile-spalten, auto minmax(0, 1fr) auto);
  align-items: center;
  gap: var(--raum-4);
  min-block-size: var(--mass-zeile);
  padding: var(--raum-1) var(--raum-3) var(--raum-1) calc(var(--strich-schiene) + var(--raum-3));
  transition: background-color var(--dauer-kurz) var(--kurve);
}
.zeile::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--strich-schiene);
  background: var(--z-kraeftig, transparent);
}
.zeile[data-zustand="laeuft"]::before {
  background-image: linear-gradient(to bottom, var(--z-kraeftig) 0% 38%, transparent 38% 50%, var(--z-kraeftig) 50% 88%, transparent 88% 100%);
  background-color: transparent;
  background-size: 100% 200%;
  animation: ui-wandern var(--dauer-wandern) var(--kurve-gleich) infinite;
  animation-play-state: var(--lauf);
}
.zeile[data-zustand="fehler"]::before {
  background: repeating-linear-gradient(to bottom, var(--z-kraeftig) 0 var(--raum-2), transparent var(--raum-2) var(--raum-3));
}
@keyframes ui-wandern { from { background-position: 0 0; } to { background-position: 0 -200%; } }

/* Unter der Hand: spürbar hellere Fläche (mindestens 1,15 : 1 gegen ihren
   Grund). Gewählt: eine Stufe höher UND eine Linie mit 3 : 1 ringsum — auch
   ohne Haken ein Zeichen. Die Zustands-Schiene links bleibt frei.          */
.zeile--bedienbar { cursor: pointer; }
.zeile--bedienbar:hover,
.zeile.zeigt-ueberfahren { background: var(--flaeche-hover); }
.zeile[aria-expanded="true"] { background: var(--flaeche); }
.liste--kasten > .zeile--bedienbar:hover,
.liste--kasten > .zeile.zeigt-ueberfahren { background: var(--flaeche-bedien-hover); }
.liste--kasten > .zeile[aria-expanded="true"] { background: var(--flaeche-bedien); }
.zeile:has(> .haken > input:checked),
.zeile[aria-selected="true"],
.liste--kasten > .zeile:has(> .haken > input:checked),
.liste--kasten > .zeile[aria-selected="true"] {
  background: var(--gewaehlt-flaeche);
  box-shadow: inset 0 0 0 var(--strich) var(--gewaehlt-linie);
}
.zeile:focus-visible,
.zeile.zeigt-fokus { outline-offset: calc(var(--strich-stark) * -1); }

.zeile__haupt,
.zeile__stand { display: flex; flex-direction: column; min-inline-size: 0; }
.zeile__titel {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-inline-size: 0;
  font-weight: var(--gewicht-stark);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}
/* wird es eng, kürzt der Text mit „…“ — er läuft nie in die Nachbar-Spalte */
.zeile__titel > * { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.zeile__titel > .abzeichen,
.zeile__titel > .etikett { flex: none; }
/* Der Zusatz (Datum) gibt zuerst nach: der Name des Dings bleibt am längsten stehen */
.zeile__titel > .zeile__zusatz { flex: 0 99 auto; }
.zeile__zusatz { color: var(--text-leise); font-weight: var(--gewicht-normal); }
/* zweite Zeile: Grundgröße in leiser Farbe — nie Kleinschrift. Sie darf in
   jeder Spalte zwei Zeilen brauchen; was dann noch gekürzt wird, nennt den
   vollen Wortlaut im title (bausteine.js setzt ihn unter der Maus).
   --frei: ohne Deckel, für mehrere Fehler-Sätze je Ding (Gates).           */
.zeile__zweite {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-leise);
  font-variant-numeric: var(--ziffern-gleich);
  overflow-wrap: anywhere;
}
.zeile__zweite--frei { display: block; overflow: visible; }
/* Abhilfe steht in der Stand-Spalte hinter der Ursache (wie im Hinweis:
   Ursache, dann Abhilfe) — so zieht EIN Knopf nicht die letzte Spalte
   aller Zeilen auf.                                                        */
.zeile__stand > .knopf { align-self: flex-start; margin-block-start: var(--raum-1); }
.zeile__fortschritt { display: flex; flex-direction: column; gap: var(--raum-2); min-inline-size: 0; }
/* letzte Spalte: nur der Aufklapp-Winkel oder EIN kleiner Knopf */
.zeile__handlung { display: flex; align-items: center; justify-content: flex-end; gap: var(--raum-2); }

/* Fach: der aufgeklappte Teil unter einer Zeile. Die Schiene läuft durch. */
.fach {
  position: relative;
  padding: var(--raum-4) var(--raum-4) var(--raum-5) calc(var(--strich-schiene) + var(--raum-3));
  background: var(--flaeche);
  animation: ui-auftauchen var(--dauer-mittel) var(--kurve);
}
.liste > .fach { border-block-start-color: var(--linie); }
.liste--kasten > .fach { background: var(--flaeche-bedien); }
.fach::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--strich-schiene);
  background: var(--z-kraeftig, transparent);
  opacity: var(--deckkraft-gedimmt);
}

/* Abschnitt: Gruppe mit Überschrift („Braucht dich · 2“) */
.abschnitt { display: flex; flex-direction: column; gap: var(--raum-2); min-inline-size: 0; }
.abschnitt + .abschnitt { margin-block-start: var(--raum-6); }
.abschnitt__kopf { display: flex; align-items: center; gap: var(--raum-2); min-block-size: var(--mass-klick-min); }
.abschnitt__titel { font-weight: var(--gewicht-stark); }


/* 12 · Schritt-Schiene -----------------------------------------------------------------------------
   Waagerecht (.schritte): ein Glied je Schritt — Kurzform in der Zeile.
   Ein Gate ist ein höheres Glied (data-gate); der Name steht im title.
   Senkrecht (.schrittliste): dieselben Schritte mit Namen und einer Angabe
   rechts (heute das Stand-Wort) — Langform im aufgeklappten Fach.
   Stand eines Glieds / Schritts:  data-stand="erledigt|hier|offen|uebersprungen"
   Die Farbe von „hier“ ist der Zustand des Trägers (data-zustand an der
   Zeile, am Fach oder an .schritte selbst). Je Schiene EIN farbiges Glied. */

.schritte {
  display: flex;
  align-items: center;
  gap: var(--strich-stark);
  inline-size: 100%;
  min-block-size: calc(var(--mass-glied) + var(--raum-1));
}
.schritte > * {
  flex: 1 1 0;
  block-size: var(--mass-glied);
  border-radius: var(--ecke-rund);
  background: var(--neutral-leer);
}
.schritte > [data-gate] { block-size: calc(var(--mass-glied) + var(--raum-1)); }
.schritte > [data-stand="erledigt"] { background: var(--neutral); }
.schritte > [data-stand="hier"] { background: var(--z-kraeftig, var(--text)); }
.schritte > [data-stand="uebersprungen"] {
  background: transparent;
  box-shadow: inset 0 0 0 var(--strich) var(--neutral);
}
[data-zustand="fertig"] .schritte > [data-stand="erledigt"],
.schritte[data-zustand="fertig"] > [data-stand="erledigt"] { background: var(--fertig-kraeftig); }

.schrittliste {
  --knoten-grund: var(--flaeche);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  min-inline-size: 0;
}
.liste--kasten .schrittliste { --knoten-grund: var(--flaeche-bedien); }
/* die Schiene: eine Linie durch alle Knoten */
.schrittliste::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--mass-bedien-s) / 2);
  inset-inline-start: calc(var(--raum-2) + var(--symbol-m) / 2 - var(--strich) / 2);
  z-index: var(--ebene-innen-1);
  inline-size: var(--strich);
  background: var(--linie);
}
.schritt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-block-size: var(--mass-bedien-s);
  padding-inline: var(--raum-2) var(--raum-3);
  border-radius: var(--ecke-m);
  color: var(--text);
}
.schritt > .symbol {
  position: relative;
  z-index: var(--ebene-innen-2);
  box-sizing: content-box;
  padding-block: var(--raum-1);
  background: var(--knoten-grund);
  color: var(--text-leise);
}
.schritt__name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schritt__angabe {
  flex: none;
  color: var(--text-leise);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}
.schritt[data-stand="offen"],
.schritt[data-stand="uebersprungen"] { color: var(--text-leise); }
.schritt[data-stand="hier"] {
  --knoten-grund: var(--z-flaeche, var(--flaeche-bedien-aktiv));
  background: var(--z-flaeche, var(--flaeche-bedien-aktiv));
  font-weight: var(--gewicht-stark);
}
.schritt[data-stand="hier"] > .symbol { color: var(--z-zeichen, var(--text)); }
.schritt[data-stand="hier"] > .schritt__angabe { color: var(--z-text, var(--text)); }
.schritt[data-stand="hier"][data-zustand="laeuft"] > .symbol,
[data-zustand="laeuft"] > .schrittliste > .schritt[data-stand="hier"]:not([data-zustand]) > .symbol {
  animation: ui-kreis var(--dauer-kreis) var(--kurve-gleich) infinite;
  animation-play-state: var(--lauf);
}


/* 13 · Tabelle --------------------------------------------------------------------------------------
   Für Projekte: viele Zeilen, dicht (40 px), Kopf klebt beim Rollen.
   .tabelle-rahmen rollt selbst; ohne Rahmen klebt der Kopf unter dem
   Seitenkopf (--tabelle-kopf-oben setzt die Ansicht).                       */

.tabelle-rahmen {
  overflow: auto;
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-l);
  scrollbar-width: thin;
  scrollbar-color: var(--linie-bedien) transparent;
}
/* --lesen: wenige Spalten (Ordner-Ansicht). Die Tabelle bleibt so schmal, dass Name
   links und Angaben rechts im selben Blick liegen; linksbündig am Seitenrand. */
.tabelle-rahmen--lesen { max-inline-size: var(--mass-tabelle-lesen); }
.tabelle {
  --tabelle-kopf-oben: 0;   /* Stellschraube der Ansicht: wie weit unter dem Fensterrand der Kopf klebt */
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: var(--ziffern-gleich);
}
.tabelle th,
.tabelle td {
  block-size: var(--mass-zeile-dicht);
  padding-inline: var(--raum-3);
  border-block-end: var(--strich) solid var(--linie-leise);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
}
.tabelle thead th {
  position: sticky;
  inset-block-start: var(--tabelle-kopf-oben);
  z-index: var(--ebene-innen-1);
  block-size: var(--mass-bedien-m);
  border-block-end-color: var(--linie);
  background: var(--grund-leiste);
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
}
.tabelle tbody tr { transition: background-color var(--dauer-kurz) var(--kurve); }
.tabelle tbody tr:hover,
.tabelle tbody tr.zeigt-ueberfahren { background: var(--flaeche-hover); }
.tabelle tbody tr:last-child > * { border-block-end: 0; }
/* Zustands-Schiene an der ersten Zelle */
.tabelle tr[data-zustand] > :first-child { box-shadow: inset var(--strich-schiene) 0 0 var(--z-kraeftig); }
/* gewählt: hellere Fläche UND eine Linie mit 3 : 1 oben und unten */
.tabelle tbody tr[aria-selected="true"],
.tabelle tbody tr:has(.haken > input:checked) { background: var(--gewaehlt-flaeche); }
.tabelle tbody tr[aria-selected="true"] > *,
.tabelle tbody tr:has(.haken > input:checked) > * {
  box-shadow: inset 0 var(--strich) 0 var(--gewaehlt-linie), inset 0 calc(var(--strich) * -1) 0 var(--gewaehlt-linie);
}
.tabelle tbody tr[aria-selected="true"][data-zustand] > :first-child,
.tabelle tbody tr[data-zustand]:has(.haken > input:checked) > :first-child {
  box-shadow: inset var(--strich-schiene) 0 0 var(--z-kraeftig), inset 0 var(--strich) 0 var(--gewaehlt-linie), inset 0 calc(var(--strich) * -1) 0 var(--gewaehlt-linie);
}
/* --umbruch: Zellen dürfen umbrechen (Text im Bild, Dateinamen der Ordner-Ansicht) */
.tabelle--umbruch td {
  block-size: auto;
  min-block-size: var(--mass-zeile-dicht);
  padding-block: var(--raum-2);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* ein Verweis in einer Umbruch-Zelle bricht mit um (Dateinamen der Ordner-Ansicht);
   __einzeilig: diese Zelle bleibt trotzdem in einer Zeile (Größe, Stand)   */
.tabelle--umbruch td > .verweis { white-space: normal; }
.tabelle--umbruch td.tabelle__einzeilig { white-space: nowrap; overflow-wrap: normal; }
.tabelle .tabelle__zahl { text-align: end; }
.tabelle__schmal { inline-size: var(--strich); }
.tabelle__weit { inline-size: 100%; max-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.tabelle__leise { color: var(--text-leise); }
.tabelle__stark { font-weight: var(--gewicht-stark); }
/* Gruppen-Zeile: ein Ordner je Konzept */
.tabelle__gruppe > th {
  background: var(--flaeche);
  color: var(--text);
  font-weight: var(--gewicht-stark);
}
.tabelle__gruppe > th > .reihe { gap: var(--raum-2); }


/* 14 · Aufklapp-Kasten ----------------------------------------------------------------------------------
   Für Technik auf Abruf: Dateipfade, Protokoll, „Technische Angaben“.     */

.aufklapp {
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-m);
  background: var(--flaeche);
}
.aufklapp > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-block-size: var(--mass-bedien-m);
  padding-inline: var(--raum-3);
  /* ausdrücklich: „inherit“ erbt am summary nicht vom details, die Zeile bliebe eckig */
  border-radius: calc(var(--ecke-m) - var(--strich));
  color: var(--text);
  font-weight: var(--gewicht-mittel);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dauer-kurz) var(--kurve);
}
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary:focus-visible,
.aufklapp > summary.zeigt-fokus { outline-offset: calc(var(--strich-stark) * -1); }
.aufklapp > summary:hover,
.aufklapp.zeigt-ueberfahren > summary { background: var(--flaeche-bedien); }
.aufklapp > summary > .symbol:first-child {
  color: var(--text-leise);
  transition: transform var(--dauer-mittel) var(--kurve);
}
.aufklapp[open] > summary > .symbol:first-child { transform: rotate(90deg); }
.aufklapp__inhalt {
  padding: var(--raum-1) var(--raum-3) var(--raum-3) calc(var(--raum-3) + var(--symbol-m) + var(--raum-2));
  color: var(--text-leise);
}
.aufklapp[open] > .aufklapp__inhalt { animation: ui-auftauchen var(--dauer-mittel) var(--kurve); }
.aufklapp--leise { border: 0; background: transparent; }
.aufklapp--leise > summary { padding-inline: var(--raum-1); border-radius: var(--ecke-s); color: var(--text-leise); font-weight: var(--gewicht-normal); }
.aufklapp--leise > .aufklapp__inhalt { padding-inline-start: calc(var(--raum-1) + var(--symbol-m) + var(--raum-2)); }

@keyframes ui-auftauchen { from { opacity: 0; transform: translateY(var(--raum-1)); } }


/* 15 · Hinweis-Kasten ---------------------------------------------------------------------------------------
   Sagt in EINER Zeile, was los ist und was hilft: Symbol · Ursache ·
   Abhilfe-Knopf. Farbe und Symbol kommen aus data-zustand; ohne Zustand
   ist es eine neutrale Auskunft.                                           */

.hinweis {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-block-size: calc(var(--mass-bedien-s) + var(--raum-2) * 2);
  padding: var(--raum-2) var(--raum-2) var(--raum-2) var(--raum-3);
  border: var(--strich) solid var(--z-linie, var(--linie));
  border-radius: var(--ecke-m);
  background: var(--z-flaeche, var(--flaeche-bedien));
  color: var(--text);
}
.hinweis > .symbol { color: var(--z-zeichen, var(--text-leise)); }
.hinweis[data-zustand="laeuft"] > .symbol {
  animation: ui-kreis var(--dauer-kreis) var(--kurve-gleich) infinite;
  animation-play-state: var(--lauf);
}
.hinweis__text { flex: 1 1 auto; min-inline-size: 0; padding-block: var(--raum-1); }
.hinweis__text > b { font-weight: var(--gewicht-stark); }
.hinweis__text > b + span { color: var(--text-leise); }
.hinweis > .knopf { flex: none; }


/* 16 · Leer- und Fehler-Zustand ----------------------------------------------------------------------------------
   Leer:   ein Symbol, ein Titel, ein Satz, EIN Knopf zum nächsten Schritt.
   Fehler: derselbe Baustein mit data-zustand="fehler" — sagt, was NICHT
           geklappt hat, und was jetzt hilft; Technik steht im Aufklapp-Kasten. */

.leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-8) var(--raum-6);
  text-align: center;
}
.leerzustand__symbol {
  display: grid;
  place-items: center;
  inline-size: var(--raum-9);
  block-size: var(--raum-9);
  margin-block-end: var(--raum-2);
  border-radius: var(--ecke-l);
  background: var(--z-flaeche, var(--flaeche-bedien));
  color: var(--z-zeichen, var(--text-leise));
}
.leerzustand__titel {
  font-size: var(--schrift-betont);
  line-height: var(--zeile-betont);
  font-weight: var(--gewicht-stark);
}
.leerzustand__text { max-inline-size: var(--mass-lesen-max); color: var(--text-leise); text-wrap: balance; }
.leerzustand__handlung { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--raum-2); margin-block-start: var(--raum-3); }
.leerzustand > .aufklapp { margin-block-start: var(--raum-3); text-align: start; }


/* 17 · Lade-Platzhalter -----------------------------------------------------------------------------------------------
   Steht dort, wo gleich Inhalt steht, in dessen Form. Atmet ruhig.        */

.platzhalter {
  display: block;
  border-radius: var(--ecke-s);
  background: var(--flaeche-bedien);
  animation: ui-atmen var(--dauer-puls) var(--kurve-atmen) infinite;
  animation-play-state: var(--lauf);
}
.platzhalter--text { block-size: var(--raum-3); margin-block: var(--raum-1); }
.platzhalter--titel { block-size: var(--raum-4); margin-block: var(--raum-1); }
.platzhalter--kurz { inline-size: var(--anteil-kurz); }
.platzhalter--mittel { inline-size: var(--anteil-mittel); }
.platzhalter--lang { inline-size: var(--anteil-lang); }
.platzhalter--knopf { inline-size: var(--raum-9); block-size: var(--mass-bedien-m); border-radius: var(--ecke-m); }
.platzhalter--abzeichen { inline-size: var(--raum-9); block-size: var(--mass-abzeichen); border-radius: var(--ecke-rund); }
.platzhalter--bild { aspect-ratio: var(--format-karte); }
.platzhalter--daumen { inline-size: var(--mass-daumen); aspect-ratio: var(--format-hoch); }
@keyframes ui-atmen { 50% { background: var(--flaeche-bedien-aktiv); } }


/* 18 · Fortschritts-Balken -------------------------------------------------------------------------------------------------
   Ein echtes <progress>: der Wert steht im Element (value / max), nicht in
   einem Stil. Ohne value = Dauer unbekannt (ein Stück wandert).
   Farbe: neutral; mit data-zustand (am Balken oder am Träger) die Zustandsfarbe.
   data-art="geschaetzt": der Wert ist geschätzt, nicht gemessen — der Balken
   ist gestreift, und das Wort „geschätzt“ steht in der Angabe daneben.     */

.fortschritt {
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: var(--mass-balken);
  overflow: hidden;
  border: 0;
  border-radius: var(--ecke-rund);
  background: var(--neutral-leer);
  color: var(--z-kraeftig, var(--neutral));
}
.fortschritt::-webkit-progress-bar { border-radius: var(--ecke-rund); background: var(--neutral-leer); }
.fortschritt::-webkit-progress-value {
  border-radius: var(--ecke-rund);
  background: var(--z-kraeftig, var(--neutral));
  transition: inline-size var(--dauer-ruhig) var(--kurve);
}
.fortschritt::-moz-progress-bar { border-radius: var(--ecke-rund); background: var(--z-kraeftig, var(--neutral)); }
.fortschritt[data-art="geschaetzt"]::-webkit-progress-value {
  background: repeating-linear-gradient(to right, var(--z-kraeftig, var(--neutral)) 0 var(--raum-2), transparent var(--raum-2) var(--raum-3));
}
.fortschritt[data-art="geschaetzt"]::-moz-progress-bar {
  background: repeating-linear-gradient(to right, var(--z-kraeftig, var(--neutral)) 0 var(--raum-2), transparent var(--raum-2) var(--raum-3));
}
/* Dauer unbekannt: ein Stück mit weichen Enden läuft durch die Bahn; es ist
   nie ganz verschwunden. Bei „Bewegung reduzieren“ steht es in der Mitte —
   die Bahn sieht dann nicht aus wie „0 %, nichts passiert“.                */
.fortschritt:indeterminate::-webkit-progress-bar {
  background-image: linear-gradient(to right, transparent, var(--z-kraeftig, var(--neutral)) 25% 75%, transparent);
  background-color: var(--neutral-leer);
  background-size: var(--anteil-kurz) 100%;
  background-repeat: no-repeat;
  animation: ui-unbestimmt var(--dauer-wandern) var(--kurve-gleich) infinite;
}
@keyframes ui-unbestimmt { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fortschritt:indeterminate::-webkit-progress-bar { background-position: 50% 0; animation: none; }
}

/* Balken mit Angabe daneben („4 von 9“) */
.fortschritt-zeile { display: flex; align-items: center; gap: var(--raum-3); inline-size: 100%; min-inline-size: 0; }
.fortschritt-zeile > .fortschritt,
.fortschritt-zeile > .schritte { flex: 1 1 0; inline-size: auto; min-inline-size: var(--raum-8); }
.fortschritt-zeile > span { flex: none; color: var(--text-leise); font-variant-numeric: var(--ziffern-gleich); white-space: nowrap; }


/* 19 · Dialog und Seitenfach ---------------------------------------------------------------------------------------------------
   Dialog:     natives <dialog class="dialog"> mit showModal(). Zwei Arten:
               Rückfrage (eine Frage, eine Entscheidung; ersetzt confirm(),
               Helfer UI.rueckfrage) und Formular-Dialog (wenige Felder und
               EINE Haupthandlung, z. B. der Rip-Dialog; Helfer UI.dialog).
               Auf- und Abgang: der Helfer setzt beim Schließen kurz die
               Klasse .geht, dann close().
   Seitenfach: die Schublade von rechts für Einzelheiten zu EINEM Ding
               (Ad, Auftrag). Als <dialog class="seitenfach"> oder als
               .seitenfach mit .seitenfach-schleier davor.                   */

.dialog {
  inline-size: min(var(--mass-dialog), calc(100% - var(--raum-7)));
  max-block-size: calc(100% - var(--raum-8));
  padding: 0;
  overflow: hidden;
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-l);
  background: var(--flaeche);
  box-shadow: var(--schatten-schwebend);
  color: var(--text);
}
.dialog--breit { inline-size: min(calc(var(--mass-dialog) + var(--raum-9) * 2), calc(100% - var(--raum-7))); }
.dialog[open] { display: flex; flex-direction: column; animation: ui-auftauchen var(--dauer-ruhig) var(--kurve); }
.dialog::backdrop,
dialog.seitenfach::backdrop { background: var(--schleier); animation: ui-einblenden var(--dauer-ruhig) var(--kurve); }
/* Abgang: Dialog, Seitenfach und Menü gehen so ruhig, wie sie kommen */
.dialog.geht,
.seitenfach.geht,
.seitenfach-schleier.geht,
.menue.geht { opacity: 0; transition: opacity var(--dauer-kurz) var(--kurve); }
.dialog.geht::backdrop,
dialog.seitenfach.geht::backdrop { opacity: 0; transition: opacity var(--dauer-kurz) var(--kurve); }
.dialog__kopf {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-5) var(--raum-4) 0 var(--raum-5);
}
.dialog__titel {
  flex: 1 1 auto;
  padding-block: var(--raum-1);
  font-size: var(--schrift-kopf);
  line-height: var(--zeile-kopf);
  font-weight: var(--gewicht-stark);
  letter-spacing: var(--laufweite-kopf);
}
.dialog__inhalt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--raum-4);
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--raum-2) var(--raum-5) var(--raum-5);
  color: var(--text-leise);
}
.dialog__inhalt b { color: var(--text); font-weight: var(--gewicht-stark); }
.dialog__inhalt > .lesetext,
.dialog__inhalt > .aufzaehlung { color: var(--text); }
.dialog__fuss {
  display: flex;
  flex: none;
  justify-content: flex-end;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-5);
  border-block-start: var(--strich) solid var(--linie);
  background: var(--grund-leiste);
}

.seitenfach-schleier {
  position: fixed;
  inset: 0;
  z-index: var(--ebene-fach);
  background: var(--schleier);
  animation: ui-einblenden var(--dauer-ruhig) var(--kurve);
}
.seitenfach {
  position: fixed;
  inset-block: 0;
  inset-inline: auto 0;
  z-index: var(--ebene-fach);
  display: flex;
  flex-direction: column;
  inline-size: min(var(--mass-fach), 100%);
  block-size: 100%;
  max-block-size: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-inline-start: var(--strich) solid var(--linie);
  background: var(--flaeche);
  box-shadow: var(--schatten-schwebend);
  color: var(--text);
  animation: ui-einfahren var(--dauer-ruhig) var(--kurve);
}
dialog.seitenfach:not([open]) { display: none; }
.seitenfach__kopf {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--raum-3);
  min-block-size: var(--mass-kopf);
  padding-inline: var(--raum-5) var(--raum-3);
  border-block-end: var(--strich) solid var(--linie);
}
.seitenfach__titel {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  font-size: var(--schrift-betont);
  line-height: var(--zeile-betont);
  font-weight: var(--gewicht-stark);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seitenfach__inhalt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--raum-5);
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--raum-5);
  scrollbar-width: thin;
  scrollbar-color: var(--linie-bedien) transparent;
}
.seitenfach__teil { display: flex; flex-direction: column; gap: var(--raum-2); }
.seitenfach__teilname {
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
}
.seitenfach__fuss {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--raum-2);
  min-block-size: var(--mass-handlung);
  padding-inline: var(--raum-5);
  border-block-start: var(--strich) solid var(--linie);
  background: var(--grund-leiste);
}
/* Medium im Seitenfach: Bild oder Video in groß. Wie die Bühne in beiden
   Schemata dunkel (dunkle Insel, siehe tokens.css).                        */
.seitenfach__medium {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--ecke-m);
  background: var(--buehne-grund);
  color: var(--buehne-text-leise);
}
.seitenfach__medium > img,
.seitenfach__medium > video { inline-size: auto; max-inline-size: 100%; max-block-size: var(--mass-medium-max); object-fit: contain; }
.seitenfach__medium > .symbol { margin-block: var(--raum-8); }
/* Vorschau-Streifen: mehrere Bilder oder Varianten einer Ad zur Wahl */
.bildstreifen {
  display: flex;
  gap: var(--raum-2);
  overflow-x: auto;
  padding: var(--raum-2);
  border-radius: var(--ecke-m);
  background: var(--buehne-grund);
  scrollbar-width: thin;
  scrollbar-color: var(--linie-bedien) transparent;
}
.bildstreifen__bild {
  position: relative;
  flex: none;
  overflow: hidden;
  inline-size: var(--raum-9);
  aspect-ratio: var(--format-karte);
  padding: 0;
  border: 0;
  border-radius: var(--ecke-s);
  background: var(--bild-grund);
  cursor: pointer;
}
.bildstreifen__bild > img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.bildstreifen__bild[aria-current="true"] { box-shadow: 0 0 0 var(--strich-stark) var(--gewaehlt-marke); }

@keyframes ui-einfahren { from { opacity: 0; transform: translateX(var(--raum-7)); } }
@keyframes ui-einblenden { from { opacity: 0; } }


/* 20 · Kurzmeldung ---------------------------------------------------------------------------------------------------------------
   Bestätigt, was gerade geschah („Auftrag kopiert“). Steht unten rechts,
   geht von selbst. Fehler bleiben, bis man sie schließt.                  */

.meldungen {
  position: fixed;
  inset-block-end: var(--raum-6);
  inset-inline-end: var(--rand-seite);
  z-index: var(--ebene-meldung);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  inline-size: min(var(--mass-meldung), calc(100% - var(--raum-8)));
}
/* Hat die Seite gerade eine feste Handlungs-Leiste, stehen die Meldungen
   darüber — das entscheidet das CSS, nicht der Aufrufer.                   */
body:has(.handlungsleiste:not([hidden])) .meldungen { inset-block-end: calc(var(--mass-handlung) + var(--raum-4)); }
.meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-2) var(--raum-3) var(--raum-4);
  border: var(--strich) solid var(--z-linie, var(--linie));
  border-radius: var(--ecke-m);
  background: var(--flaeche-schwebend);
  box-shadow: var(--schatten-schwebend);
  color: var(--text);
  animation: ui-auftauchen var(--dauer-ruhig) var(--kurve);
}
.meldung > .symbol { margin-block-start: var(--strich-stark); color: var(--z-zeichen, var(--text-leise)); }
.meldung[data-zustand="laeuft"] > .symbol {
  animation: ui-kreis var(--dauer-kreis) var(--kurve-gleich) infinite;
  animation-play-state: var(--lauf);
}
.meldung__text { flex: 1 1 auto; min-inline-size: 0; padding-block: var(--strich); }
.meldung__titel { font-weight: var(--gewicht-mittel); }
.meldung__zusatz { color: var(--text-leise); }
.meldung > .knopf { margin-block: calc(var(--raum-1) * -1); }
.meldung--geht { opacity: 0; transition: opacity var(--dauer-ruhig) var(--kurve); }


/* 21 · Menü und Brand-Umschalter ---------------------------------------------------------------------------------------------------
   Menü: Aufklapp-Liste unter einem Knopf (.menue-anker hält beide; Helfer
   UI.menue öffnet, schließt mit Esc und Klick daneben, pflegt aria-expanded).
   Der gewählte Eintrag trägt einen Haken und ist fett — neutral.          */

.menue-anker { position: relative; display: block; }
.menue {
  position: absolute;
  inset-block-start: calc(100% + var(--raum-1));
  inset-inline-start: 0;
  z-index: var(--ebene-menue);
  display: flex;
  flex-direction: column;
  gap: var(--strich);
  min-inline-size: max(100%, var(--mass-menue));
  max-block-size: calc(var(--mass-bedien-m) * 10);
  overflow-y: auto;
  padding: var(--raum-1);
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-m);
  background: var(--flaeche-schwebend);
  box-shadow: var(--schatten-schwebend);
  animation: ui-auftauchen var(--dauer-mittel) var(--kurve);
}
.menue[hidden] { display: none; }
.menue--rechts { inset-inline: auto 0; }
.menue--hoch { inset-block: auto calc(100% + var(--raum-1)); }
.menue--frei { position: static; box-shadow: none; animation: none; }
.menue__gruppe {
  padding: var(--raum-2) var(--raum-2) var(--raum-1);
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
}
.menue__trenner { block-size: var(--strich); margin: var(--raum-1) calc(var(--raum-1) * -1); background: var(--linie); }
.menue__eintrag {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  inline-size: 100%;
  min-block-size: var(--mass-bedien-m);
  padding-inline: var(--raum-2);
  border: 0;
  border-radius: var(--ecke-s);
  background: transparent;
  color: var(--text);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dauer-kurz) var(--kurve);
}
.menue__eintrag:hover,
.menue__eintrag.zeigt-ueberfahren { background: var(--flaeche-bedien-hover); }
.menue__eintrag:active,
.menue__eintrag.zeigt-gedrueckt { background: var(--flaeche-bedien-aktiv); }
.menue__eintrag:focus-visible,
.menue__eintrag.zeigt-fokus { outline-offset: calc(var(--strich-stark) * -1); }
.menue__eintrag:disabled,
.menue__eintrag[aria-disabled="true"] { opacity: var(--deckkraft-gesperrt); cursor: not-allowed; pointer-events: none; }
.menue__eintrag > .symbol { color: var(--text-leise); }
.menue__eintrag > .symbol:last-child { margin-inline-start: auto; color: var(--text); }
.menue__name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.menue__zusatz { color: var(--text-leise); font-variant-numeric: var(--ziffern-gleich); }
.menue__eintrag[aria-checked="true"],
.menue__eintrag[aria-current="true"] { font-weight: var(--gewicht-stark); }
.menue__eintrag--gefahr { color: var(--fehler-text); }
.menue__eintrag--gefahr > .symbol { color: var(--fehler-text); }

/* Kachel: Anfangsbuchstabe einer Brand, eines Kontos oder eines Anbieters */
.kachel {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--raum-6);
  block-size: var(--raum-6);
  border-radius: var(--ecke-s);
  background: var(--gewaehlt-marke);
  color: var(--gewaehlt-schrift);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-stark);
}
.kachel--leise { background: var(--flaeche-bedien-aktiv); color: var(--text); }

/* Brand-Umschalter: welche Brand ist dran? Öffnet ein Menü. Er wird selten
   gebraucht, darum in Ruhe ohne Rand und ohne Fläche (wie der leise Knopf);
   beides kommt erst unter Hand, Fokus oder wenn das Menü offen ist.        */
.brandwahl {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--raum-2);
  inline-size: 100%;
  block-size: var(--mass-bedien-m);
  /* Die Kachel (24) steht in der Symbol-Spalte der Leiste: dieselbe linke Kante wie das Logo,
     dieselbe Mitte wie die Perlen der Stationen; der Name beginnt in der Text-Spalte.
     Der Rand ist ein Schatten nach innen: so verschiebt er die Kachel nicht. */
  padding-inline: var(--raum-1) var(--raum-2);
  border: 0;
  border-radius: var(--ecke-m);
  background: transparent;
  box-shadow: inset 0 0 0 var(--strich) transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    box-shadow var(--dauer-kurz) var(--kurve);
}
.brandwahl:hover,
.brandwahl.zeigt-ueberfahren { background: var(--flaeche-bedien-hover); }
.brandwahl:active,
.brandwahl.zeigt-gedrueckt,
.brandwahl[aria-expanded="true"] { background: var(--flaeche-bedien-aktiv); box-shadow: inset 0 0 0 var(--strich) var(--linie-bedien); }
.brandwahl__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  font-weight: var(--gewicht-stark);
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brandwahl > .symbol { color: var(--text-leise); }


/* 22 · Gerüst, Seitenleiste, Server-Kasten -------------------------------------------------------------------------------------------
   EIN Gerüst für alle Ansichten: links die Seitenleiste, rechts die Seite
   (Seitenkopf · Inhalt · wo nötig die feste Handlungs-Leiste).
   Die Seitenleiste zeigt das Fließband als Schiene; Signale stehen als
   Worte unter der Station („1 wartet auf dich“).

   Die Leiste hat drei Teile, damit bei keiner Fensterhöhe etwas still
   unter den Rand rutscht:
     oben fest    .seitenleiste__kopf, Brand-Umschalter
     Mitte        .seitenleiste__mitte: die Gruppen (Fließband, Ablage) und
                  darunter .seitenleiste__server. Wird es eng, gibt ZUERST
                  der Server-Bereich nach und rollt in sich; reicht auch das
                  nicht (sehr niedriges Fenster), rollt die Mitte.
     unten fest   .seitenleiste__fuss: Darstellung, Konto
   Zwei Spalten gelten für jede Zeile der Leiste: die Symbol-Spalte (Mitte
   bei Leistenrand + 16, dort laufen Logo, Brand-Kachel, Perlen und Schiene)
   und die Text-Spalte (Leistenrand + 36). Rechts endet alles 8 vor dem
   Rand der Zeile.

   EIN Schalter macht die Leiste dicht: --dicht (0 oder 1). Dicht heißt:
   Zeilen 28 statt 36 hoch, Abstände 8 statt 16, Polster weg. Gesetzt wird er
     · in niedrigen Fenstern (bis 800 hoch) und in der schmalen Leiste
       (Abschnitt 29),
     · von der App mit der Klasse .seitenleiste--dicht, wenn ein offener
       Server-Kasten sonst nicht ins Bild passt (renderServerBox in app.js).
   So stehen Fließband, Server und Fuß zusammen im Bild, bevor irgendetwas
   rollt.                                                                   */

.geruest {
  display: grid;
  grid-template-columns: var(--mass-leiste) minmax(0, 1fr);
  min-block-size: var(--hoehe-fenster);
}
.seite { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: var(--hoehe-fenster); }
.seite--fest { block-size: var(--hoehe-fenster); overflow: hidden; }
.seiteninhalt {
  flex: 1 1 auto;
  inline-size: 100%;
  min-block-size: 0;
  padding: var(--raum-6) var(--rand-rechts) var(--raum-8) var(--rand-links);
}

.seitenleiste {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  flex-direction: column;
  block-size: var(--hoehe-fenster);
  --dicht: 0;                      /* 1 = die Leiste rückt zusammen (siehe oben) */
  --leiste-innen: var(--raum-3);   /* Innenabstand oben und unten: der Kopf rechnet daraus seine Höhe */
  --leiste-luecke: calc(var(--raum-4) - var(--dicht) * var(--raum-2));         /* zwischen den Teilen: 16, dicht 8 */
  --leiste-zeile: calc(var(--mass-bedien-m) - var(--dicht) * var(--raum-2));   /* Station, Fußzeile: 36, dicht 28 */
  --leiste-polster: calc(var(--raum-1) - var(--dicht) * var(--raum-1));        /* Luft in den Zeilen: 4, dicht 0 */
  gap: var(--leiste-luecke);
  padding: var(--leiste-innen) var(--raum-3);
  border-inline-end: var(--strich) solid var(--linie);
  background: var(--grund-leiste);
}
.seitenleiste--dicht { --dicht: 1; }
.seitenleiste > * { flex: none; }
/* Kopf: so hoch, dass seine Mitte auf der Mittellinie des Seitenkopfs liegt (Logo neben Seitentitel) */
.seitenleiste__kopf {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--raum-2);
  block-size: calc(var(--mass-kopf) - var(--leiste-innen) * 2);
  padding-inline: var(--raum-1);
}
.seitenleiste > .seitenleiste__mitte {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--leiste-luecke);
  min-block-size: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-bedien) transparent;
}
.seitenleiste__name { font-size: var(--schrift-betont); line-height: var(--zeile-betont); font-weight: var(--gewicht-stark); letter-spacing: var(--laufweite-kopf); white-space: nowrap; }
.seitenleiste__gruppe { display: flex; flex: none; flex-direction: column; gap: var(--raum-1); }
.seitenleiste__gruppenname {
  padding: var(--raum-1) var(--raum-2);
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
  white-space: nowrap;
}
/* in der Leiste folgen Zeilen und Polster dem Schalter --dicht */
.seitenleiste .seitenleiste__gruppenname { padding-block: var(--leiste-polster); }
.seitenleiste .station { --station-hoehe: var(--leiste-zeile); }
.seitenleiste .station__signale { padding-block-end: calc(var(--leiste-polster) * 2); }
.seitenleiste .fusszeile,
.seitenleiste .schemawahl { padding-block: var(--leiste-polster); }

/* Fließband: die Stationen hängen an einer senkrechten Schiene (2 px),
   ihre Symbole sind die Knoten: runde Perlen, hinter denen die Schiene
   durchläuft. Hat eine Station ein Signal, trägt ihre Perle die Farbe des
   Zustands — wie das farbige Glied der Schritt-Schiene.                    */
.fliessband { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--raum-1); }
/* die Schiene: von der Mitte dieser Perle bis zur Mitte der nächsten */
.fliessband > .station:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: var(--ebene-innen-1);
  inset-block: calc(var(--station-hoehe) / 2) calc((var(--station-hoehe) / 2 + var(--raum-1)) * -1);
  inset-inline-start: calc(var(--raum-2) + var(--symbol-m) / 2 - var(--strich-stark) / 2);
  inline-size: var(--strich-stark);
  background: var(--schiene-leise);
  pointer-events: none;
}

/* Station: ein Eintrag der Seitenleiste. */
.station {
  --station-grund: transparent;
  --station-hoehe: var(--mass-bedien-m);
  --knoten-grund: var(--grund-leiste);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(var(--station-hoehe), auto);
  align-items: center;
  column-gap: var(--raum-3);
  inline-size: 100%;
  padding: 0 var(--raum-2);
  border: 0;
  border-radius: var(--ecke-m);
  background: var(--station-grund);
  color: var(--text-leise);
  font-weight: var(--gewicht-mittel);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dauer-kurz) var(--kurve),
    color var(--dauer-kurz) var(--kurve);
}
/* das Symbol ist die Perle: rund, 24 groß, deckt die Schiene dahinter ab */
.station > .symbol {
  position: relative;
  z-index: var(--ebene-innen-2);
  box-sizing: content-box;
  margin: calc(var(--raum-1) * -1);
  padding: var(--raum-1);
  border-radius: var(--ecke-rund);
  background: var(--knoten-grund);
  transition: background-color var(--dauer-kurz) var(--kurve);
}
/* Perle mit Signal: data-zustand an der Station (setzt der Helfer station()) */
.station[data-zustand] > .symbol { background: var(--z-flaeche); color: var(--z-zeichen); }
.station:hover,
.station.zeigt-ueberfahren { --station-grund: var(--flaeche-bedien-hover); --knoten-grund: var(--flaeche-bedien-hover); color: var(--text); }
.station:active,
.station.zeigt-gedrueckt { --station-grund: var(--flaeche-bedien-aktiv); --knoten-grund: var(--flaeche-bedien-aktiv); }
.station:focus-visible,
.station.zeigt-fokus { outline-offset: calc(var(--strich-stark) * -1); }
.station[aria-current="page"] {
  --station-grund: var(--gewaehlt-flaeche);
  --knoten-grund: var(--gewaehlt-flaeche);
  color: var(--text);
  font-weight: var(--gewicht-stark);
}
/* Marke der gewählten Station: heller Strich am Rand, 3 : 1 */
.station[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: var(--raum-2);
  inset-inline-start: 0;
  inline-size: var(--strich-schiene);
  border-radius: var(--ecke-rund);
  background: var(--gewaehlt-marke);
}
.station__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station[aria-current="page"] > .zaehler:not([data-zustand]) { color: var(--text); }
/* Signale: Farbe + Symbol + Wort, unter dem Namen der Station, in Grundgröße */
.station__signale {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-3);
  padding-block-end: var(--raum-2);
  font-weight: var(--gewicht-mittel);
}
.station__signale:empty { display: none; }
/* Das Signal-Wort steht frei auf dem Grund der Leiste: dort bleibt „wartet auf dich“ in beiden
   Schemata blau. Unter der Hand und in der gewählten Station liegt eine Fläche darunter;
   dann gilt das Wort der Rolle (im hellen Schema dunkler, damit der Kontrast hält). */
.station:not(:hover, :active, .zeigt-ueberfahren, .zeigt-gedrueckt, [aria-current="page"]) > .station__signale > .zaehler[data-zustand] { color: var(--z-text-leiste); }

/* Server-Bereich: je Rechner ein Kasten (AX41, jedes Cloud-Bündel). Steht unten in der Mitte,
   über dem Fuß. Hat er mehr zu zeigen, als Platz ist, rollt ER (nicht die Leiste): Fließband und
   Fuß bleiben im Bild. Mindestens zwei Kopfzeilen hoch — so viel steht auch schon, bevor die
   Kästen geladen sind (nichts springt). */
.seitenleiste__server {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--raum-1);
  --server-oben: calc(var(--raum-3) - var(--dicht) * var(--raum-1));   /* Luft unter der Trennlinie: 12, dicht 8 */
  min-block-size: calc(var(--mass-bedien-s) * 2 + var(--raum-1) + var(--server-oben) + var(--strich));
  margin-block-start: auto;
  padding-block-start: var(--server-oben);
  border-block-start: var(--strich) solid var(--linie);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-bedien) transparent;
}
.seitenleiste__server > * { flex: none; }
/* Fuß: Darstellung und Konto, fest am unteren Rand, leise. Schließt dicht an den Server-Bereich an;
   seine zwei Zeilen stehen schon vor dem Laden fest (Mindesthöhe). */
.seitenleiste__fuss {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--raum-1);
  min-block-size: calc(var(--leiste-zeile) * 2 + var(--raum-1));
  margin-block-start: calc(var(--raum-1) - var(--leiste-luecke));   /* hebt die Lücke der Leiste bis auf 4 auf */
}
.fusszeile {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-block-size: var(--mass-bedien-s);
  padding: var(--raum-1) var(--raum-2);
  color: var(--text-leise);
}
.fusszeile > .symbol { color: var(--z-zeichen, currentColor); }
.fusszeile[data-zustand] { color: var(--z-text); }
/* eine Störung darf zwei Zeilen brauchen — sie wird nie abgeschnitten */
.fusszeile__name { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
/* der Symbol-Knopf am Ende: sein Symbol endet an der rechten Kante der Zeilen (wie Zähler und Winkel) */
.fusszeile > .knopf { margin-block: calc(var(--raum-1) * -1); margin-inline-end: calc((var(--mass-bedien-s) - var(--symbol-m)) / -2); }

/* Darstellung: Hell · Dunkel · Wie das Gerät (Helfer UI.schemaWahl).
   Die Zeile hat kein Symbol; ihr Wort beginnt trotzdem in der Text-Spalte der Leiste. */
.schemawahl {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-block-size: var(--mass-bedien-s);
  padding: var(--raum-1) var(--raum-2) var(--raum-1) calc(var(--raum-2) + var(--symbol-m) + var(--raum-3));
  color: var(--text-leise);
}
.schemawahl__name { flex: 1 1 auto; min-inline-size: 0; }
/* die drei Felder sind hier quadratisch (24, das kleinste Klickziel): so passen Wort und Schalter in die Zeile */
.schemawahl .segment--klein > .segment__feld { padding-inline: var(--raum-1); }

/* Server-Kasten: ein Rechner (AX41 oder ein Cloud-Bündel) mit seinem Stand,
   seinen Projekten und seinen Handlungen. Ein <details>: die Kopfzeile ist
   immer da (Symbol, Name, Stand als Wort), der Inhalt klappt darunter auf.
   In der schmalen Leiste (Abschnitt 29) schwebt der Inhalt daneben — so
   verschwindet nichts. Eine Störung färbt den ganzen Kasten.               */
.serverkasten { display: flex; flex-direction: column; min-inline-size: 0; border-radius: var(--ecke-m); color: var(--text-leise); }
.serverkasten[data-zustand="fehler"] { background: var(--z-flaeche); box-shadow: inset 0 0 0 var(--strich) var(--z-linie); color: var(--text); }
.serverkasten > summary {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-block-size: var(--mass-bedien-s);
  padding: var(--raum-1) var(--raum-2);
  /* ausdrücklich: „inherit“ erbt am summary nicht vom details, die Zeile bliebe eckig */
  border-radius: var(--ecke-m);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dauer-kurz) var(--kurve);
}
.serverkasten > summary::-webkit-details-marker { display: none; }
.serverkasten > summary:hover,
.serverkasten.zeigt-ueberfahren > summary { background: var(--flaeche-bedien-hover); }
.serverkasten > summary:focus-visible,
.serverkasten > summary.zeigt-fokus { outline-offset: calc(var(--strich-stark) * -1); }
.serverkasten > summary > .symbol:first-child { color: var(--z-zeichen, currentColor); }
.serverkasten__name { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; color: var(--text); font-weight: var(--gewicht-mittel); text-overflow: ellipsis; white-space: nowrap; }
.serverkasten__stand { flex: none; color: var(--z-text, var(--text-leise)); font-variant-numeric: var(--ziffern-gleich); white-space: nowrap; }
/* Nur in der schmalen Leiste zu sehen (Abschnitt 29): das Zeichen des Zustands und die Kurzform
   des Stands („2/5“). In der breiten Leiste sagt das Wort den Zustand. */
.serverkasten__zeichen,
.serverkasten__kurz { display: none; }
.serverkasten__winkel { transition: transform var(--dauer-mittel) var(--kurve); }
.serverkasten[open] > summary > .serverkasten__winkel { transform: rotate(90deg); }
.serverkasten__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-1) var(--raum-2) var(--raum-3) calc(var(--raum-2) + var(--symbol-m) + var(--raum-3));
}
.serverkasten__titel { display: none; color: var(--text); font-weight: var(--gewicht-stark); }
.serverkasten__zeile { overflow-wrap: anywhere; font-variant-numeric: var(--ziffern-gleich); }
.serverkasten__zeile--klar { color: var(--text); }
.serverkasten__handlung { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.serverkasten__projekt { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }


/* 23 · Seitenkopf und Stand-Angabe ------------------------------------------------------------------------------------------------------------
   Titel links · Filter daneben · Stand, Werkzeuge und Haupthandlung rechts.
   Gleiche Höhe (56) und gleicher linker Rand in jeder Ansicht. Wird es
   eng, bricht der Kopf in eine zweite Zeile um — nichts verschwindet.
   Die Trennlinie ist ein Schatten nach innen, kein Rand: so bleibt der
   Innenabstand glatt (10) und nichts sitzt auf halben Pixeln.              */

.seitenkopf {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--ebene-kopf);
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-4);
  min-block-size: var(--mass-kopf);
  padding: calc((var(--mass-kopf) - var(--mass-bedien-m)) / 2) var(--rand-rechts) calc((var(--mass-kopf) - var(--mass-bedien-m)) / 2) var(--rand-links);
  background: var(--glas);
  box-shadow: inset 0 calc(var(--strich) * -1) 0 var(--linie);
  backdrop-filter: blur(var(--raum-4));
}
.seitenkopf__zurueck { margin-inline: calc(var(--raum-3) * -1) calc(var(--raum-2) * -1); }
.seitenkopf__titel {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: var(--raum-3);
  block-size: var(--mass-bedien-m);
  font-size: var(--schrift-titel);
  line-height: var(--mass-bedien-m);
  font-weight: var(--gewicht-stark);
  letter-spacing: var(--laufweite-titel);
  white-space: nowrap;
}
.seitenkopf__zusatz {
  color: var(--text-leise);
  font-size: var(--schrift-kopf);
  line-height: var(--zeile-kopf);
  font-weight: var(--gewicht-normal);
  letter-spacing: var(--laufweite-kopf);
  font-variant-numeric: var(--ziffern-gleich);
}
.seitenkopf__filter,
.seitenkopf__beiwerk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); min-inline-size: 0; }
.seitenkopf__rechts {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--raum-2);
  margin-inline-start: auto;
}
/* Erklär-Zeile: ein bis zwei Sätze, was in dieser Ansicht zu tun ist.
   Volle Breite unter dem Titel, Grundgröße, leise, höchstens zwei Zeilen
   (der volle Wortlaut steht dann im title).                                */
.seitenkopf__erklaerung {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex: none;
  order: 9;
  inline-size: 100%;
  max-inline-size: calc(var(--mass-lesen-max) * 2);
  overflow: hidden;
  color: var(--text-leise);
}
.seitenkopf__erklaerung:empty { display: none; }

/* Stand-Angabe: sagt ehrlich, wie frisch die Daten sind (ein Zeitstempel).
   Nur dort, wo das Sheet den Stand wirklich kennt.                         */
.standangabe {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  letter-spacing: var(--laufweite-klein);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}
.standangabe[data-zustand] { color: var(--z-text); }


/* 24 · Handlungs-Leiste ---------------------------------------------------------------------------------------------------------------------------
   Steht fest am unteren Rand und trägt die EINE Haupthandlung der Ansicht
   (44 px hoch, ganz rechts). Links die Frage und was danach geschieht.    */

.handlungsleiste {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--ebene-handlung);
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-4);
  min-block-size: var(--mass-handlung);
  padding: calc((var(--mass-handlung) - var(--mass-bedien-l)) / 2) var(--rand-rechts) calc((var(--mass-handlung) - var(--mass-bedien-l)) / 2) var(--rand-links);
  background: var(--grund-leiste);
  box-shadow: inset 0 var(--strich) 0 var(--linie);
}
.handlungsleiste__text { display: flex; flex: 1 1 0; flex-direction: column; min-inline-size: 0; }
.handlungsleiste__frage {
  font-size: var(--schrift-betont);
  line-height: var(--zeile-betont);
  font-weight: var(--gewicht-stark);
  letter-spacing: var(--laufweite-kopf);
}
.handlungsleiste__folge { color: var(--text-leise); }
.handlungsleiste__knoepfe {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--raum-3);
  margin-inline-start: auto;
}


/* 25 · Video-Bühne, Zeitschiene, Sichtung ---------------------------------------------------------------------------------------------------------------
   Zwei Hochkant-Flächen nebeneinander (unsere Ad · Original), darunter
   EINE Zeitschiene und EINE Steuer-Zeile. Jedes Video behält seinen Ton
   und die Steuerung des Browsers. Das Bild ist frei: nichts liegt darauf.
   Weiß heißt „hier“ (Abspiel-Marke, gewähltes Bedenken). Blau bleibt frei.

   Die Bühne ist in BEIDEN Schemata dunkel (--buehne-…; was in ihr steht,
   rechnet aus der dunklen Leiter: tokens.css, INSELN). Im dunklen Schema
   verschmilzt sie mit dem Grund, im hellen steht sie als dunkle Fläche.
   Sie ragt um ihren Innenabstand aus, damit die VIDEOS auf der Kante des
   Seitenkopfs stehen (wie die Bilder im Karten-Raster).

   Zeitschiene, Zeit-Anzeige und Sprünge gehören zu UNSERER Ad (das Original
   ist anders lang). „Beide von vorn“ und „Beide anhalten“ wirken auf beide. */

.buehne {
  --buehne-luecke: var(--raum-4);
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  min-inline-size: 0;
  margin: calc(var(--raum-3) * -1);
  padding: var(--raum-3);
  border-radius: var(--ecke-l);
  background: var(--buehne-grund);
  color: var(--buehne-text);
}
.buehne__flaechen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--buehne-luecke);
  min-inline-size: 0;
}
.buehne__flaeche { display: flex; flex-direction: column; gap: var(--raum-2); min-inline-size: 0; }
.buehne__name {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-block-size: var(--zeile-betont);
  white-space: nowrap;
}
.buehne__name > b { font-size: var(--schrift-betont); line-height: var(--zeile-betont); font-weight: var(--gewicht-stark); }
.buehne__name > span { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; color: var(--buehne-text-leise); font-variant-numeric: var(--ziffern-gleich); text-overflow: ellipsis; }
/* „Modelle anzeigen“: welches Modell den gerade gezeigten Clip gemacht hat —
   als Etikett im Namen der Fläche „Unsere Ad“, nie auf dem Bild            */
.buehne__name > .etikett { flex: none; margin-inline-start: auto; }
.buehne__bild {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  aspect-ratio: var(--format-hoch);
  border-radius: var(--ecke-m);
  background: var(--bild-grund);
  color: var(--buehne-text-leise);
}
/* .buehne--hoehe: die Ansicht gibt die HÖHE der Videos vor (--video-hoehe,
   z. B. aus der Fensterhöhe gerechnet); die Breite folgt aus 9 : 16. So
   bleibt die Haupthandlung darunter immer im Bild. Reicht der Platz in der
   Breite nicht (--buehne-platz), gibt die Höhe nach — die Breite platzt nie. */
.buehne--hoehe {
  --video-hoehe: var(--mass-video-min);   /* Stellschraube der Ansicht */
  --buehne-platz: var(--breite-behaelter); /* setzt die Sichtung */
  inline-size: max-content;
  max-inline-size: calc(100% + var(--raum-3) * 2);
}
.buehne--hoehe .buehne__flaechen { grid-template-columns: repeat(2, auto); justify-content: start; }
.buehne--hoehe .buehne__bild {
  inline-size: auto;
  block-size: min(var(--video-hoehe), calc((var(--buehne-platz) - var(--buehne-luecke)) / 2 / (var(--format-hoch))));
}
.buehne--hoehe .buehne__name { inline-size: 0; min-inline-size: 100%; overflow: hidden; }
/* Nur die Videos bestimmen die Breite der Bühne; Schiene, Steuer-Zeile und
   Clip-Liste nehmen diese Breite und brechen darin um.                     */
.buehne--hoehe > :not(.buehne__flaechen) { inline-size: 0; min-inline-size: 100%; }
.buehne__bild > img,
.buehne__bild > video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
/* --frei: Bild-Ads (1 : 1, 4 : 5): das Format kommt aus dem Bild, die Höhe ist gedeckelt */
.buehne__bild--frei { display: grid; place-items: center; aspect-ratio: auto; }
.buehne__bild--frei > img { position: static; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: var(--video-hoehe, var(--mass-medium-max)); }
.buehne--hoehe .buehne__bild--frei { block-size: auto; max-inline-size: calc((var(--buehne-platz) - var(--buehne-luecke)) / 2); }
/* ohne Medium: Symbol und ein Satz, warum es fehlt */
.buehne__bild > .buehne__fehlt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  padding: var(--raum-4);
  text-align: center;
}
.buehne__bild::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--strich) var(--bild-linie);
  pointer-events: none;
}
.buehne__steuer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
  min-block-size: var(--mass-bedien-m);
}
.buehne__zeit {
  padding-inline: var(--raum-2);
  color: var(--buehne-text-leise);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}
.buehne__zeit > b { color: var(--buehne-text); font-weight: var(--gewicht-stark); }
.buehne__angabe { margin-inline-start: auto; color: var(--buehne-text-leise); font-variant-numeric: var(--ziffern-gleich); white-space: nowrap; }
/* Clip-Liste zu „Modelle anzeigen“: ein Sprung-Knopf je Custom Clip */
.buehne__clips { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); }

/* Zeitschiene: ein SVG in Zeit-Einheiten (Helfer zeitschiene()).
   Oben liegen die Bedenken als Abschnitte (halbe Höhe der Schiene: 12 px),
   unten läuft der Weg der Zeit; die Abspiel-Marke geht durch beide.
   Jede Stelle trägt eine unsichtbare Treffer-Fläche über die volle Höhe
   (24 px) und mindestens 24 px breit. Fokus und „gewählt“ sehen verschieden
   aus: gewählt = weiß gefüllt, Fokus = heller Rahmen um die Treffer-Fläche. */
.zeitschiene {
  display: block;
  inline-size: 100%;
  block-size: var(--mass-klick-min);
  overflow: visible;
}
.zeitschiene__spur { fill: var(--neutral-leer); }
.zeitschiene__weg { fill: var(--neutral); }
.zeitschiene__stelle { cursor: pointer; outline: none; }
.zeitschiene__marke {
  fill: var(--text-leise);
  opacity: var(--deckkraft-gedimmt);
  transition: opacity var(--dauer-kurz) var(--kurve), fill var(--dauer-kurz) var(--kurve);
}
.zeitschiene__treffer {
  fill: transparent;
  stroke: transparent;
  stroke-width: var(--strich-stark);
  vector-effect: non-scaling-stroke;
}
.zeitschiene__stelle:hover > .zeitschiene__marke,
.zeitschiene__stelle.zeigt-ueberfahren > .zeitschiene__marke,
.zeitschiene__stelle:focus-visible > .zeitschiene__marke { opacity: 1; }
.zeitschiene__stelle:focus-visible > .zeitschiene__treffer,
.zeitschiene__stelle.zeigt-fokus > .zeitschiene__treffer { stroke: var(--fokus); }
.zeitschiene__stelle[aria-current="true"] > .zeitschiene__marke { fill: var(--gewaehlt-marke); opacity: 1; }
.zeitschiene__kopf {
  stroke: var(--text);
  stroke-width: var(--strich-stark);
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Zeitmarke: der Sprung-Knopf eines Bedenkens oder Clips (ein .knopf.knopf--klein) */
.zeitmarke { font-variant-numeric: var(--ziffern-gleich); }
.zeitmarke[aria-current="true"],
[aria-current="true"] > .bedenken__kopf > .zeitmarke {
  --k-flaeche: var(--gewaehlt-marke);
  --k-flaeche-hover: var(--gewaehlt-marke);
  --k-flaeche-aktiv: var(--gewaehlt-marke);
  --k-rand: var(--gewaehlt-marke);
  --k-rand-hover: var(--gewaehlt-marke);
  --k-schrift: var(--gewaehlt-schrift);
  --k-schrift-hover: var(--gewaehlt-schrift);
}

/* Sichtung: die Anordnung der Review — Bühne links, Beiwerk (Bedenken)
   rechts. Die Sichtung misst ihre eigene Breite und sagt der Bühne, wie
   viel Platz sie hat; so passt das Beiwerk bei jeder Fensterbreite daneben.
   Bis 1040 px (Abschnitt 29) stapelt sie: Beiwerk unter die Bühne.         */
.sichtung { container-type: inline-size; min-inline-size: 0; }
.sichtung__raster {
  --beiwerk-min: var(--mass-bedenken-min);
  display: grid;
  grid-template-columns: auto minmax(var(--beiwerk-min), 1fr);
  align-items: start;
  gap: var(--raum-6);
  min-inline-size: 0;
}
.sichtung__raster > .buehne--hoehe { --buehne-platz: calc(var(--breite-behaelter) - var(--beiwerk-min) - var(--raum-6)); }
/* ohne Beiwerk: nur die Bühne */
.sichtung__raster--allein { grid-template-columns: minmax(0, 1fr); }
.sichtung__raster--allein > .buehne--hoehe { --buehne-platz: var(--breite-behaelter); }


/* 26 · Bedenken-Liste ----------------------------------------------------------------------------------------------------------------------------------------
   Was die Kette an der fertigen Ad auszusetzen hat. Gegliedert in
   „An einer Stelle · n“ (mit Zeitmarke: springt in unserer Ad auf den
   Clip-Anfang) und „Ganze Ad · n“. Der Text steht in Grundgröße mit ruhiger
   Zeilenhöhe und wird NIE gekürzt oder verändert (Fremdtext): der ganze
   Satz steht da; Zeitmarke und „Clip n“ stehen ZUSÄTZLICH in der Kopfzeile. */

.bedenken { display: flex; flex-direction: column; gap: var(--raum-4); min-inline-size: 0; }
.bedenken__kopfzeile { display: flex; align-items: center; gap: var(--raum-2); min-block-size: var(--mass-bedien-m); }
.bedenken__titel { font-size: var(--schrift-betont); line-height: var(--zeile-betont); font-weight: var(--gewicht-stark); }
.bedenken__gruppe { display: flex; flex-direction: column; min-inline-size: 0; }
.bedenken__gruppenname {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-1) var(--raum-3);
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
}
.bedenken__punkt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-3);
  border-block-start: var(--strich) solid var(--linie-leise);
  transition: background-color var(--dauer-kurz) var(--kurve);
}
.bedenken__punkt:hover,
.bedenken__punkt.zeigt-ueberfahren { background: var(--flaeche-hover); }
.bedenken__punkt[aria-current="true"] { background: var(--flaeche-bedien); }
.bedenken__punkt[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--strich-schiene);
  background: var(--gewaehlt-marke);
}
.bedenken__kopf { display: flex; align-items: center; gap: var(--raum-2); min-inline-size: 0; }
.bedenken__angabe { overflow: hidden; color: var(--text-leise); font-variant-numeric: var(--ziffern-gleich); text-overflow: ellipsis; white-space: nowrap; }
.bedenken__text {
  max-inline-size: var(--mass-lesen-max);
  color: var(--text);
  line-height: var(--zeile-lesen);
  overflow-wrap: anywhere;
}


/* 27 · Kasten, Angaben, Aufzählung, Lesetext, Textblock, Kennzahl ----------------------------------------------------------------------------------------------
   Die kleinen Teile, aus denen Gates, der Warum-Kasten, der Rip-Dialog,
   das Seitenfach und TrendTrack gebaut werden.
     .kasten       ein Block mit Kopf, Inhalt und Fuß; data-zustand färbt den Rand
     .angaben      Merkmal und Wert (Name leise links, Wert rechts, bricht um)
     .aufzaehlung  Liste mit Punkten; --nummern mit Ziffern („So geht es weiter“)
     .lesetext     Fremdtext zum Lesen: Copy, Chat-Zitat, Bedenken (Grundgröße,
                   ruhige Zeile, Umbrüche bleiben); --zitat mit Strich davor
     .textblock    langer Text zum Markieren und Kopieren, rollt: Auftragstext,
                   Protokoll (dieselbe Schrift, kein Schreibmaschinen-Satz)
     .kennzahl     eine große Zahl mit kleinem Namen darunter                 */

.kasten {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: var(--strich) solid var(--z-linie, var(--linie));
  border-radius: var(--ecke-l);
  background: var(--flaeche);
}
.kasten__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
  min-block-size: var(--mass-bedien-l);
  padding: var(--raum-2) var(--raum-4);
}
.kasten__kopf > .symbol:first-child { color: var(--z-zeichen, var(--text-leise)); }
.kasten__titel { flex: 1 1 auto; min-inline-size: 0; font-weight: var(--gewicht-stark); }
.kasten__zusatz { color: var(--text-leise); font-variant-numeric: var(--ziffern-gleich); }
.kasten__inhalt { display: flex; flex-direction: column; gap: var(--raum-3); min-inline-size: 0; padding: var(--raum-4); }
.kasten__kopf + .kasten__inhalt { padding-block-start: 0; }
.kasten__teilname {
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
}
.kasten__teilname:not(:first-child) { margin-block-start: var(--raum-2); }
.kasten__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-4);
  border-block-start: var(--strich) solid var(--linie);
}
/* --leise: ohne Rand und Fläche (ein Kasten in einem Fach) */
.kasten--leise { border: 0; border-radius: 0; background: transparent; }
.kasten--leise > * { padding-inline: 0; }

.angaben {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--raum-1) var(--raum-4);
  min-inline-size: 0;
}
.angaben > dt { color: var(--text-leise); }
.angaben > dd { min-inline-size: 0; overflow-wrap: anywhere; font-variant-numeric: var(--ziffern-gleich); }
/* --gestapelt: Name über dem Wert (schmale Stellen) */
.angaben--gestapelt { grid-template-columns: minmax(0, 1fr); gap: 0; }
.angaben--gestapelt > dd:not(:last-child) { margin-block-end: var(--raum-2); }

.aufzaehlung {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  padding-inline-start: var(--raum-5);
  list-style: disc outside;
  line-height: var(--zeile-lesen);
}
.aufzaehlung--nummern { list-style: decimal outside; }
.aufzaehlung > li { padding-inline-start: var(--raum-1); overflow-wrap: anywhere; }
.aufzaehlung > li::marker { color: var(--text-leise); font-variant-numeric: var(--ziffern-gleich); }

.lesetext {
  max-inline-size: var(--mass-lesen-max);
  color: var(--text);
  line-height: var(--zeile-lesen);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lesetext--zitat { padding-inline-start: var(--raum-3); border-inline-start: var(--strich-stark) solid var(--linie-bedien); }

.textblock {
  max-block-size: var(--mass-textblock-max);
  overflow: auto;
  padding: var(--raum-3);
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-m);
  background: var(--flaeche-bedien);
  color: var(--text);
  line-height: var(--zeile-lesen);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-bedien) transparent;
}

.kennzahlen { display: flex; flex-wrap: wrap; gap: var(--raum-4) var(--raum-7); min-inline-size: 0; }
.kennzahl { display: flex; flex-direction: column; min-inline-size: 0; }
.kennzahl__zahl {
  font-size: var(--schrift-titel);
  line-height: var(--zeile-titel);
  font-weight: var(--gewicht-stark);
  letter-spacing: var(--laufweite-titel);
  font-variant-numeric: var(--ziffern-gleich);
  white-space: nowrap;
}
.kennzahl__name {
  color: var(--text-leise);
  font-size: var(--schrift-klein);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-klein);
}


/* 28 · Anmeldung ----------------------------------------------------------------------------------------------------------------------------------------------------
   Die Anordnung der Login-Seite (kommt aus server.mjs): eine Karte mittig,
   Logo (favicon.svg als Bild), ein Feld je Angabe, EINE Haupthandlung.      */

.anmeldung { display: grid; place-items: center; min-block-size: var(--hoehe-fenster); padding: var(--raum-6); }
.anmeldung__karte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
  inline-size: min(100%, calc(var(--mass-feld) + var(--raum-9) * 2));
  padding: var(--raum-7);
  border: var(--strich) solid var(--linie);
  border-radius: var(--ecke-l);
  background: var(--flaeche);
}
.anmeldung__kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  font-size: var(--schrift-kopf);
  line-height: var(--zeile-kopf);
  font-weight: var(--gewicht-stark);
  letter-spacing: var(--laufweite-kopf);
}
.anmeldung__kopf > img { inline-size: var(--raum-7); block-size: var(--raum-7); }


/* 29 · Schmale Fenster --------------------------------------------------------------------------------------------------------------------------------------------
   Geprüft bei 1920 × 1080, 1440 × 900, 1280 × 720, dazu 1279, 1200, 1101
   und 1000 breit. Regel: nichts verschwindet still, nichts überdeckt sich,
   die Seite rollt nie quer.
     bis 1280  die Seitenleiste klappt auf Symbole ein (64 px), Seitenränder
               20 statt 32. Namen stehen dann im title; Signale bleiben als
               farbiges Symbol mit Zahl; ein Server-Kasten öffnet seinen
               Inhalt schwebend daneben.
     bis 1040  die Sichtung stapelt: Bedenken unter die Bühne.
   Dazu eine Höhe: bis 800 hoch ist die Seitenleiste dicht (Schalter --dicht,
   Abschnitt 22: Stationen 28 statt 36, engere Abstände), damit Fließband,
   Server und Fuß auch auf einem 13-Zoll-Bildschirm zusammen im Bild stehen. */

@media (max-height: 800px) {
  .seitenleiste { --dicht: 1; }
}

@media (max-width: 1280px) {
  :root { --rand-seite: var(--raum-5); --mass-leiste: var(--mass-leiste-schmal); }
  .reiter { gap: var(--raum-4); }
  .buehne { --buehne-luecke: var(--raum-3); }

  /* Alles hier gilt nur IN der Seitenleiste: Stationen und Brand-Umschalter
     an anderer Stelle (Katalog) bleiben, wie sie sind. */
  .seitenleiste { --dicht: 1; --leiste-innen: var(--raum-2); padding-inline: var(--raum-1); }
  .seitenleiste__kopf { justify-content: center; padding-inline: 0; }
  .seitenleiste__name,
  .seitenleiste .brandwahl__name,
  .seitenleiste .brandwahl > .symbol,
  .seitenleiste .station__name,
  .seitenleiste .fusszeile__name,
  .seitenleiste .schemawahl__name,
  .seitenleiste .serverkasten__name,
  .seitenleiste .serverkasten__winkel,
  .seitenleiste .serverkasten__stand > .serverkasten__wort,
  .seitenleiste .zaehler__wort,
  .seitenleiste .segment__name {
    position: absolute;
    inline-size: var(--strich);
    block-size: var(--strich);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* aus dem Gruppen-Namen wird ein Trennstrich */
  .seitenleiste__gruppenname {
    block-size: var(--strich);
    margin-block: var(--raum-1);
    padding: 0;
    overflow: hidden;
    background: var(--linie);
    color: transparent;
  }
  .seitenleiste .brandwahl { justify-content: center; padding-inline: 0; }
  .seitenleiste .segment { flex-direction: column; block-size: auto; }
  .seitenleiste .segment__feld { justify-content: center; min-block-size: var(--mass-bedien-s); padding-inline: 0; }

  /* Station: Symbol und Zahl nebeneinander, Signale als farbiges Symbol mit Zahl darunter */
  .seitenleiste .station {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--raum-1);
    padding-inline: var(--raum-2) var(--raum-1);
  }
  .seitenleiste .station > .zaehler:not([data-zustand]) { justify-self: end; min-inline-size: 0; }
  .seitenleiste .station__signale {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 0 var(--raum-1);
  }
  .seitenleiste .zaehler--schlicht { gap: var(--strich-stark); }
  /* Darstellung: nur die geltende Stellung ist zu sehen; ein Klick darauf
     schaltet zur nächsten (das macht UI.schemaWahl). So bleibt der Fuß bei
     720 px Fensterhöhe ganz im Bild.                                       */
  .seitenleiste .schemawahl .segment__feld[aria-pressed="false"] { display: none; }
  .seitenleiste .fusszeile,
  .seitenleiste .schemawahl { justify-content: center; padding-inline: 0; }
  .seitenleiste .fusszeile > .knopf { margin-inline-end: 0; }
  .seitenleiste .fusszeile:has(> .knopf) > .symbol { display: none; }

  /* Server-Kasten: nur Symbol (und Zahl); der Inhalt schwebt daneben, wenn er offen ist.
     Ein Zustand ist auch hier nie nur Farbe: „wartet auf dich“ zeigt die Hand, „läuft“ das
     drehende Zeichen mit der Kurzform des Stands („2/5“) — wie die Signale der Stationen.
     „hängt“ behält die durchgestrichene Wolke (eigene Form) auf roter Fläche. */
  .seitenleiste .serverkasten > summary { justify-content: center; gap: var(--raum-1); padding-inline: 0; }
  .seitenleiste .serverkasten__kurz { display: inline; }
  .seitenleiste .serverkasten:is([data-zustand="dran"], [data-zustand="laeuft"]) > summary > .serverkasten__zeichen { display: inline-block; color: var(--z-zeichen); }
  .seitenleiste .serverkasten:is([data-zustand="dran"], [data-zustand="laeuft"]) > summary > .symbol:first-child { display: none; }
  .seitenleiste .serverkasten[data-zustand="laeuft"] > summary > .serverkasten__zeichen {
    animation: ui-kreis var(--dauer-kreis) var(--kurve-gleich) infinite;
    animation-play-state: var(--lauf);
  }
  .seitenleiste .serverkasten[data-zustand="fehler"] { background: transparent; box-shadow: none; }
  .seitenleiste .serverkasten[data-zustand="fehler"] > summary { background: var(--z-flaeche); box-shadow: inset 0 0 0 var(--strich) var(--z-linie); }
  .seitenleiste .serverkasten[open] > .serverkasten__inhalt {
    position: fixed;
    inset-block-end: var(--raum-3);
    inset-inline-start: calc(var(--mass-leiste) + var(--raum-2));
    z-index: var(--ebene-menue);
    inline-size: calc(var(--mass-menue) + var(--raum-7));
    max-block-size: calc(var(--hoehe-fenster) - var(--raum-6));
    overflow-y: auto;
    padding: var(--raum-4);
    border: var(--strich) solid var(--linie);
    border-radius: var(--ecke-m);
    background: var(--flaeche-schwebend);
    box-shadow: var(--schatten-schwebend);
    color: var(--text-leise);
    animation: ui-auftauchen var(--dauer-mittel) var(--kurve);
  }
  .seitenleiste .serverkasten__titel { display: block; }

  .handlungsleiste__knoepfe { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 1040px) {
  .sichtung__raster { grid-template-columns: minmax(0, 1fr); }
  .sichtung__raster > .buehne--hoehe { --buehne-platz: var(--breite-behaelter); }
  .angaben { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .angaben > dd:not(:last-child) { margin-block-end: var(--raum-2); }
}