/* olymp.css — die Standardbausteine. Farbe, Schriftgrad, Stapel: nur Rollen, sonst kein zweites Thema (61 §4;
   13a, 13b, 12c). Ein Baustein je Aufgabe (61 §7). Vor rollen.css laden (61 §2). Langfassung: docs §15.1. */

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

html {
  /* Reserve fuer den Tastaturfokus unter einer klebenden Kopfleiste (2.4.11 AA); glas setzt den Wert aus `--u-topbar-h`
     neu. Langfassung: docs §15.107. */
  scroll-padding-top: calc(var(--u-s-14) + var(--u-s-6));
}

body {
  margin: 0;
  /* DAS KORN LIEGT JETZT AUCH AUF DEM HELLEN PAPIER: dieselbe Turbulenz wie auf dunklem Grund, nur leiser.
     Langfassung: docs §15.108. */
  background: url("img/korn-hell.svg"), var(--u-surface-2);
  color: var(--u-text);
  font-family: var(--u-font-body);
  /* 15 UND NICHT 14: schriften.css waehlt Hanken Grotesk fuer den Fliesstext bei 15px; Tabelle und Knopf
     setzen ihre Grade selbst, die Dichte bleibt. Langfassung: docs §15.83. */
  font-size: var(--u-t-lg);
  line-height: var(--u-lh);
  -webkit-font-smoothing: antialiased;
  /* Die Seite rollt NIE waagerecht (61 §13 Punkt 12). Breite Inhalte rollen in
     ihrem eigenen Behaelter, siehe .tabelle-rahmen. */
  overflow-x: hidden;
}

/* Verweise im Fliesstext bleiben unterstrichen: ihre Farbe allein hebt sie nicht genug ab (1.4.1 A). Bausteine,
   deren Verweis an der Form erkennbar ist, nehmen die Linie selbst weg. Langfassung: docs §15.84. */
a { color: var(--u-brand-text); text-underline-offset: 2px; }
a:hover { color: var(--u-text); }

/* Fokus: sichtbar, mit Flaeche, und NIE entfernt ohne Ersatz in derselben
   Regelgruppe (61 §11 Punkt 1). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--u-brand-text);
  outline-offset: 2px;
  border-radius: var(--u-r-xs);
}
/* AUF DUNKLEM GRUND DIE HELLE STUFE: auf der Blase des Menschen traegt der Ring `--u-brand-hell` (die Marke hielte dort
   nur 1,5 bis 1,8:1). Langfassung: docs §15.109. */
.nachricht-mensch :focus-visible { outline-color: var(--u-brand-hell); }

/* Reduzierte Bewegung EINMAL global, ueber alle Elemente und Pseudoelemente.
   Wer sie je Stilblatt nachbaut, erzeugt Ausnahmen (61 §11 Punkt 2). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* DER STERN ERREICHT DIESE HIER NICHT: Uebergangs-Pseudoelemente haengen an einem eigenen Baum.
     So muss chat.js von reduzierter Bewegung nichts wissen. Langfassung: docs §15.4. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* „BEWEGUNG AUS" IM PROFIL: der Zwilling des Blocks darueber, je Mensch statt je Geraet. Er steht DANACH, weil
   16-ruhe die Seitenuebergaenge im ersten Block sucht. Langfassung: docs §15.85. */
:root[data-bewegung="aus"] *,
:root[data-bewegung="aus"] *::before,
:root[data-bewegung="aus"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
:root[data-bewegung="aus"]::view-transition-group(*),
:root[data-bewegung="aus"]::view-transition-old(*),
:root[data-bewegung="aus"]::view-transition-new(*) { animation: none !important; }
/* DER INHALT IST EIN BEHAELTER (17): Umschaltungen fragen seine Breite, nicht das Fenster. Nie `.karte` — das
   braeche klebende Tabellenkoepfe. Langfassung: docs §15.6. */
.inhalt {
  container: inhalt / inline-size;
  padding: var(--u-d-rand);
  max-width: 96rem;
  width: 100%;
}

/* Die Auswahl traegt die Marke — eine Kleinigkeit, die eine Oberflaeche zu einer
   gestalteten macht statt zu einer zusammengesetzten. */
::selection { background: var(--u-brand-wash); }
/* Auf dunklem Grund waere die Toenung unsichtbar (1,04:1) — dort die eigene Stufe. */
.nachricht-mensch ::selection { background: var(--u-brand-auswahl-inv); }
/* Das Zeichen der Marke: das Logo (Variante D, 11.10.2026) aus img/marke.svg — dieselbe Quelle wie die App-Symbole
   (bin/symbole_bauen.php), und die App-Schale hält die Datei im Vorrat, damit die Offline-Seite es ohne Netz zeigt. */
.marke-zeichen {
  display: inline-flex;
  flex: none;
  width: var(--u-s-10);
  height: var(--u-s-10);
  background: url("img/marke.svg") center / contain no-repeat;
}

/* Das Symbolblatt: null Pixel und aus dem Fluss. `hidden` wirkt an SVG nicht, und
   `display:none` kappt in manchen Browsern die <use>-Verweise (siehe symbole.php). */
.symbolblatt { position: absolute; overflow: hidden; }

/* BERUEHRZIELE STEHEN IN DEN DEKLARATIONEN (`--u-ziel-min`, rollen.css): ein eigener Block hier verlor
   gegen jede spaetere Regel gleicher Spezifitaet. Langfassung: docs §15.10. */

/* ── Seitenkopf ── Die Aktionen der Seite stehen hier (60 §7, 3.2.6 A); die h1-Zeile gehoert der Huelle,
   daher keine eigene Karte. Langfassung: docs §15.11. */
.seitenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-s-6);
  flex-wrap: wrap;
  margin: 0 var(--u-s-2) var(--u-s-6);
}
.karte h1 {
  margin: 0;
  color: var(--u-text);
  font-family: var(--u-font-display);
  font-size: var(--u-t-2xl);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-tight);
  line-height: var(--u-lh-tight);
}
.seitenkopf .einordnung {
  margin: 0;
  max-width: 60rem;
  color: var(--u-text-muted);
  font-size: var(--u-t-md);
}
.seitenkopf-aktionen { display: flex; gap: var(--u-s-4); flex-wrap: wrap; margin-left: auto; }

/* Die Pfadzeile ueber dem Seitenkopf: woher man kommt, als eine leise Zeile. */
.brotkrumen {
  margin: 0 0 var(--u-s-4) var(--u-s-2);
  color: var(--u-text-muted);
  font-size: var(--u-t-xs);
}
.brotkrumen a { color: var(--u-brand-text); font-weight: var(--u-w-medium); text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }

/* ── Karte ── Der Titel BENENNT die Flaeche: normale Schreibweise, Versalien nur fuer Etiketten und Marke.
   Langfassung: docs §15.12. */
.karte {
  margin-bottom: var(--u-d-luecke);
  padding: var(--u-d-block);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  box-shadow: var(--u-e-2);
}
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }
.karte h2 {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  margin: 0 0 var(--u-s-6);
  color: var(--u-text);
  font-family: var(--u-font-display);
  font-size: var(--u-t-lg);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-tight);
}
.karte h3 {
  margin: var(--u-s-7) 0 var(--u-s-3);
  font-size: var(--u-t-lg);
  font-weight: var(--u-w-strong);
}
.karte p { margin: 0 0 var(--u-s-5); }
/* Bloecke ohne eigenen Aussenabstand bekommen ihn in der Karte; :where() bleibt unter `.karte > :last-child`.
   Langfassung: docs §15.113. */
.karte > :where(.paare, pre, form) { margin-block: var(--u-s-5); }
.karte-fehler { border-left: 3px solid var(--u-danger); }
/* Eine Karte, deren Inhalt randlos ist -- eine Tabelle, die bis an die Kante
   laeuft. Nur der Titel, Hinweise und ein Leerzustand bekommen Innenabstand. */
.karte-flach { padding: 0; overflow: hidden; }
.karte-flach > h2 { margin: 0; padding: var(--u-s-7) var(--u-s-8) var(--u-s-5); }
.karte-flach > p { margin: 0; padding: 0 var(--u-s-8) var(--u-s-5); }
.karte-flach > .leer { margin: 0 var(--u-s-8) var(--u-s-8); }
.karte-flach .tabelle-rahmen { border: 0; border-radius: 0; box-shadow: none; }
/* Was in einer flachen Karte NICHT randlos ist -- ein Formular unter der Tabelle, ein
   Streifen ueber ihr --, steht in .karte-innen und bekommt den Abstand der Karte zurueck. */
.karte-flach > .karte-innen { margin: 0; padding: var(--u-s-6) var(--u-s-8) var(--u-s-8); }
.karte-flach > .tabelle-rahmen + .karte-innen { border-top: 1px solid var(--u-border-soft); }
/* ── Passwort aendern (`.anmelden`) ── Nur noch /passwort in der Glas-Huelle; die Anmeldung traegt seit P3-B `.eingang`
   (EINGANG). Hier steht, was dort nachweislich noch wirkt (Wirkungsprobe P3-B, docs/oberflaeche-huelle.md §1c), den
   Rest setzen die Glas-Regeln an `.anmelden`. Geschichte: docs §15.14, §15.86. */
body:has(.anmelden) { min-height: 100svh; color: var(--u-text-on-inv); }
.anmelden { border-radius: var(--u-r-xl); }
.anmelden h2 { color: var(--u-text-on-inv-stark); font-size: var(--u-t-2xl); line-height: var(--u-lh-tight); }
.anmelden input:focus { box-shadow: 0 0 0 3px var(--u-brand-glow); }
.anmelden .knopfreihe { margin-top: var(--u-s-7); }
.gitter {
  display: grid;
  gap: var(--u-s-7);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-bottom: var(--u-s-7);
}
.gitter > .karte { margin-bottom: 0; }

/* Kennwert: eine Zahl mit ihrer Bedeutung als Kachel; wo nichts gemessen wurde, ein Strich statt einer Null (61 §8).
   Langfassung: docs §15.114. */
/* DER MARKENSTREIFEN FAEHRT EIN, statt dauernd dazustehen: die Marke ist rationiert (Zeigestufe, nie die helle Stufe
   auf Papier). Langfassung: docs §15.115. */
.kennwert {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--u-s-2);
  padding: var(--u-s-7) var(--u-s-8);
  overflow: hidden;
  transition: box-shadow var(--u-dur-2) var(--u-ease), border-color var(--u-dur-2) var(--u-ease);
}
.kennwert::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--u-brand), var(--u-brand-2));
  opacity: 0;
  transition: opacity var(--u-dur-2) var(--u-ease);
}
.kennwert:hover { border-color: var(--u-brand-line); box-shadow: var(--u-e-3); }
.kennwert:hover::after { opacity: 1; }
.kennwert p { margin: 0; }
.kennwert-name {
  color: var(--u-text-muted);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-medium);
}
.kennwert-zahl {
  margin-top: var(--u-s-2);
  color: var(--u-text);
  font-family: var(--u-font-display);
  font-size: var(--u-t-4xl);
  font-weight: var(--u-w-heavy);
  line-height: var(--u-lh-tight);
  letter-spacing: var(--u-track-display);
  font-variant-numeric: tabular-nums;
}
.kennwert-zahl a { color: inherit; text-decoration: none; }
.kennwert-zahl a:hover { color: var(--u-brand-text); }
.kennwert-unter {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  flex-wrap: wrap;
  color: var(--u-text-muted);
  font-size: var(--u-t-xs);
}

/* ── Etikett (Abzeichen) ── runde Pille ohne Rand, ein Zustand mit Farbpunkt: der eckige Randstempel war das
   Unruhigste der Seite. Langfassung: docs §15.15. */
.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-3);
  padding: var(--u-s-1) var(--u-s-4);
  border: 1px solid transparent;
  border-radius: var(--u-r-full);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-tight);
  white-space: nowrap;
}
/* „neutral" ist GRAU und nicht gruen: eine Ampel ohne Messung ist grau, und
   „nicht pruefbar" ist nie „bestanden" (61 §13 Punkt 10). */
.abzeichen-neutral { background: var(--u-surface-3); color: var(--u-text-2); }
.abzeichen-gut     { background: var(--u-ok-bg);     color: var(--u-ok-fg); }
.abzeichen-warn    { background: var(--u-warn-bg);   color: var(--u-warn-fg); }
.abzeichen-gefahr  { background: var(--u-danger-bg); color: var(--u-danger-fg); }
.abzeichen-hinweis { background: var(--u-info-bg);   color: var(--u-info-fg); }
/* Das Bereichs-Etikett: derselbe Fachbereich traegt ueberall dieselbe Farbe (bereich_rolle()).
   Kein Punkt davor — es ist kein Zustand. */
.abzeichen-bereich-1 { background: var(--u-bereich-1-bg); color: var(--u-bereich-1-fg); }
.abzeichen-bereich-2 { background: var(--u-bereich-2-bg); color: var(--u-bereich-2-fg); }
.abzeichen-bereich-3 { background: var(--u-bereich-3-bg); color: var(--u-bereich-3-fg); }
.abzeichen-bereich-4 { background: var(--u-bereich-4-bg); color: var(--u-bereich-4-fg); }
.abzeichen-bereich-5 { background: var(--u-bereich-5-bg); color: var(--u-bereich-5-fg); }
.abzeichen-bereich-6 { background: var(--u-bereich-6-bg); color: var(--u-bereich-6-fg); }
/* Der Punkt sagt „Zustand". Die Farbe steht nie allein — das Wort daneben nennt ihn. */
.abzeichen-gut::before,
.abzeichen-warn::before,
.abzeichen-gefahr::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--u-r-full);
  background: currentColor;
}
/* Die Marken-Pille: getönt, rund, in Fließschrift. Sie trägt Kennungen wie ein Modell; Festbreite
   machte daraus Technik-Zierrat, und die Schreibweise bleibt auch ohne sie erhalten. */
.abzeichen-marke {
  background: var(--u-brand-wash); color: var(--u-brand-text);
  font-weight: var(--u-w-strong);
  letter-spacing: 0; text-transform: none;
}

/* ── Meldungsstreifen ── */
.streifen {
  display: flex;
  gap: var(--u-s-4);
  margin-bottom: var(--u-s-5);
  padding: var(--u-s-5) var(--u-s-6);
  border: 1px solid var(--u-border);
  border-left-width: 3px;
  border-radius: var(--u-r-sm);
  font-size: var(--u-t-md);
}
.streifen p { margin: 0; }
.streifen-hinweis {
  background: var(--u-info-bg); border-color: var(--u-info-line); border-left-color: var(--u-info);
  color: var(--u-info-fg);
}
.streifen-warn {
  background: var(--u-warn-bg); border-color: var(--u-warn-line); border-left-color: var(--u-warn);
  color: var(--u-warn-fg);
}
.streifen-gefahr {
  background: var(--u-danger-bg); border-color: var(--u-danger-line); border-left-color: var(--u-danger);
  color: var(--u-danger-fg);
}
.streifen-gut {
  background: var(--u-ok-bg); border-color: var(--u-ok-line); border-left-color: var(--u-ok);
  color: var(--u-ok-fg);
}

/* ── Leerzustand ── PFLICHT auf jeder Flaeche, die leer sein kann: WAS fehlt, WARUM, WAS man tun kann — und
   NIEMALS erfundene Daten (61 §8). Langfassung: docs §15.87. */
.leer {
  padding: var(--u-s-10) var(--u-s-8);
  border: 1px dashed var(--u-border-strong);
  border-radius: var(--u-r-md);
  background: var(--u-surface-alt);
  text-align: center;
}
.leer-titel { margin: 0 0 var(--u-s-3); font-size: var(--u-t-lg); font-weight: var(--u-w-strong); }
.leer-text {
  margin: 0 auto var(--u-s-5); max-width: 34rem;
  color: var(--u-text-muted); font-size: var(--u-t-md);
}
.leer-weg { display: flex; gap: var(--u-s-4); justify-content: center; flex-wrap: wrap; }

/* ── Filterzeile ── Felder und ihr Knopf in EINER Reihe, auch ein ganzes Formular darin (Suche ueber GET).
   Langfassung: docs §15.88. */
.filterzeile {
  display: flex;
  align-items: flex-end;
  gap: var(--u-s-6) var(--u-s-8);
  flex-wrap: wrap;
  margin-bottom: var(--u-d-luecke);
  padding: var(--u-d-zeile) var(--u-d-zeile-x);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  box-shadow: var(--u-e-2);
}
.filterzeile .feld { margin: 0; }
.filterzeile > form,
.formular-reihe {
  display: flex;
  align-items: flex-end;
  gap: var(--u-s-5);
  flex-wrap: wrap;
  margin: 0;
}
.filterzeile > form { flex: 1 1 22rem; }
/* KNOPF UND FELD IN EINER REIHE: die Basisregel haelt den Knopf bei 40 px, in der Huelle gleicht INHALT V2 ihn dem Feld
   an. Langfassung: docs §15.116. */
.filterzeile .knopf,
.formular-reihe .knopf { min-height: var(--u-s-11); }
/* Ein Hilfetext zur ganzen Zeile steht UNTER ihr, nicht im Feld: dort schob er den Knopf mit nach unten. */
.filterzeile-hilfe { flex-basis: 100%; }
/* SUCHE, FILTER UND TABELLE SIND EINE KARTE (Sichtprüfung 15.09.2026): folgen sie aufeinander, verschmelzen
   sie; steht etwas dazwischen, bleiben es getrennte Flächen. Langfassung: docs §15.89. */
.filterzeile:has(+ .filterzeile),
.filterzeile:has(+ .tabelle-rahmen) {
  margin-bottom: 0;
  border-bottom-color: var(--u-border-soft);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
.filterzeile + .filterzeile,
.filterzeile + .tabelle-rahmen {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Die Beschriftung einer Filtergruppe steht VOR ihren Pillen, nicht darüber. */
.filterzeile > div:has(> .filter-gruppe) { display: flex; align-items: center; gap: var(--u-s-4); flex-wrap: wrap; }
.filterzeile > div:has(> .filter-gruppe) > .leise { margin: 0; }
.filterzeile > form > .feld,
.formular-reihe > .feld { flex: 1 1 12rem; }
.filter-gruppe { display: flex; align-items: center; gap: var(--u-s-3); flex-wrap: wrap; }
.filter-wahl {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-3);
  /* Auch als <button> verwendet (Sicht-Schalter): ohne `font-family: inherit`
     erbt ein Knopf die Systemschrift des Browsers und nicht die der Seite. */
  cursor: pointer;
  font-family: inherit;
  min-height: max(var(--u-s-9), var(--u-ziel-min));
  padding: 0 var(--u-s-5);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-full);
  background: var(--u-surface);
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
  text-decoration: none;
  transition: background var(--u-dur-1) var(--u-ease), border-color var(--u-dur-1) var(--u-ease);
}
.filter-wahl:hover { border-color: var(--u-border-strong); background: var(--u-surface-alt); color: var(--u-text); }
/* Die gewaehlte Pille ist VOLL blau mit weisser Schrift (5,17:1) -- eine
   Toenung allein waere neben den getoenten Etiketten nicht als „gewaehlt" zu
   erkennen. */
/* MARKEN-DIAET: die aktive Pille traegt Toenung und Textstufe; die volle Markenflaeche gehoert dem Hauptknopf.
   Langfassung: docs §15.117. */
.filter-wahl[aria-current="true"] {
  border-color: var(--u-brand-line);
  background: var(--u-brand-wash);
  color: var(--u-brand-text);
  font-weight: var(--u-w-strong);
}
/* Verbunden: die Pillen einer Gruppe stehen in EINER Schiene (Variante der Filter-Pille, kein eigener Baustein).
   Langfassung: docs §15.118. */
.filter-gruppe-verbunden {
  gap: 0;
  padding: var(--u-s-1);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-full);
  background: var(--u-surface-alt);
}
.filter-gruppe-verbunden .filter-wahl { border-color: transparent; background: transparent; }
.filter-gruppe-verbunden .filter-wahl:hover { background: var(--u-surface-3); }
.filter-gruppe-verbunden .filter-wahl[aria-current="true"] {
  border-color: var(--u-brand-line);
  background: var(--u-brand-wash);
  color: var(--u-brand-text);
}
/* Nur ein Symbol: quadratisch, der Name steht fuer Hilfsmittel und als Titel daneben. */

/* ── Tabelle ── EIN Baustein mit Sortierung, Suche, Seitenweise; breite Tabellen rollen in IHREM Behaelter (61 §9).
   Langfassung: docs §15.17. */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  box-shadow: var(--u-e-2);
}
/* DIE TABELLE IST EINE ARBEITSANSICHT und bekommt die dichte Stufe; Lesetext (`.karte p`, `pre`) behaelt seine Hoehe.
   Langfassung: docs §15.119. */
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--u-t-md); line-height: var(--u-d-lh); }
.tabelle th, .tabelle td {
  padding: var(--u-d-zeile) var(--u-d-zeile-x);
  border-bottom: 1px solid var(--u-border-soft);
  text-align: left;
  vertical-align: middle;
}
.tabelle thead th {
  position: sticky;
  top: 0;
  z-index: var(--u-z-sticky);
  background: var(--u-surface-alt);
  /* ALS SCHATTEN UND NICHT ALS RAND: mit `border-collapse` verliert eine klebende Kopfzeile ihre Randlinie (Chromium).
     Langfassung: docs §15.120. */
  box-shadow: inset 0 -1px 0 var(--u-border);
  color: var(--u-text-muted);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-caps);
  white-space: nowrap;
}
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle tbody tr { transition: background var(--u-dur-1) var(--u-ease); }
/* DAS SCHWEBEN IST NEUTRAL, DER ZUSTAND IST DIE MARKE (20.09.2026): wenn alles Marke ist, markiert die Marke
   nichts. Langfassung: docs §15.90. */
/* Zebra UND Haarlinien-Trenner waeren Doppelkodierung. Welche der beiden traegt,
   entscheidet der Entwurf ueber die Rolle -- in „Kanzlei" die Linie. */
.tabelle tbody tr:nth-child(even) { background: var(--u-zeile-zebra); }
.tabelle tbody tr:hover { background: var(--u-hover); }
.tabelle td a { display: inline-flex; align-items: center; min-height: max(0px, var(--u-ziel-min)); color: var(--u-text); font-weight: var(--u-w-strong); text-decoration: none; }
.tabelle td a:hover { color: var(--u-brand-text); text-decoration: underline; }
.tabelle td form { margin: 0; }
.tabelle-sort {
  display: inline-flex; gap: var(--u-s-2);
  color: var(--u-text-muted); text-decoration: none;
}
.tabelle-sort:hover { color: var(--u-brand-text); }
/* Die Richtung ist am Kopf SICHTBAR und fuer Hilfsmittel ausgezeichnet --
   aria-sort steht im Baustein, damit es nicht in 23 Tabellen fehlt. */
.tabelle th[aria-sort="ascending"] .tabelle-sort::after { content: " ▲"; }
.tabelle th[aria-sort="descending"] .tabelle-sort::after { content: " ▼"; }
.tabelle th[aria-sort] .tabelle-sort { color: var(--u-brand-text); }
.tabelle-zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Zweite Zeile einer Zelle: Kennung, Zeitpunkt, Urheber. */
.zelle-unter {
  display: block;
  margin-top: var(--u-s-1);
  color: var(--u-text-muted);
  font-size: var(--u-t-xs);
}
.zelle-unter.mono { font-family: var(--u-font-mono); }
/* Festbreite bleibt, wo sie Information ist (Netz, Präfix, Takt) — kleiner und eine Stufe leiser, damit
   sie neben Fließschrift nicht schwerer wirkt als der Name in derselben Zeile. */
.tabelle td .mono { font-size: var(--u-t-xs); color: var(--u-text-2); }

/* Zelle „person": Kuerzel-Avatar, Name, Kennung darunter. Das Kuerzel ist fuer
   Hilfsmittel versteckt -- der Name steht daneben, zweimal vorgelesen waere er
   nur laenger. */
.person { display: flex; align-items: center; gap: var(--u-s-5); min-width: 12rem; }
.person-bild {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--u-s-11);
  height: var(--u-s-11);
  border-radius: var(--u-r-full);
  background: var(--u-brand-wash);
  box-shadow: inset 0 0 0 1px var(--u-brand-line);
  color: var(--u-brand-text);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-caps);
}
.person-text { display: flex; flex-direction: column; gap: var(--u-s-1); min-width: 0; }
.person-name { color: var(--u-text); font-weight: var(--u-w-strong); }
.person-kennung { color: var(--u-text-muted); font-size: var(--u-t-xs); }
/* DAS GESICHT IN DER ZELLE: hat der Agent ein Bild, steht es statt des Kuerzels; der Ring traegt seinen Bereich.
   Langfassung: docs §15.121. */
img.person-bild { object-fit: cover; box-shadow: var(--u-e-1); }
.person-bild.bereich-1 { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich-1); }
.person-bild.bereich-2 { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich-2); }
.person-bild.bereich-3 { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich-3); }
.person-bild.bereich-4 { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich-4); }
.person-bild.bereich-5 { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich-5); }
.person-bild.bereich-6 { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich-6); }

/* Zelle „anteil": EIN <progress> statt einer Breite im Markup, die die Inhaltsrichtlinie still verwuerfe; der
   Balken ist fuer Hilfsmittel versteckt, die Zahl traegt den Wert. Langfassung: docs §15.91. */
.anteil { display: flex; flex-direction: column; gap: var(--u-s-2); min-width: 8rem; }
.anteil-text { color: var(--u-text-2); font-size: var(--u-t-xs); font-variant-numeric: tabular-nums; }
.anteil progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--u-s-3);
  overflow: hidden;
  border: 0;
  border-radius: var(--u-r-full);
  background: var(--u-surface-3);
  color: var(--u-info);
}
.anteil progress::-webkit-progress-bar { background: var(--u-surface-3); border-radius: var(--u-r-full); }
.anteil progress::-webkit-progress-value { background: currentColor; border-radius: var(--u-r-full); }
.anteil progress::-moz-progress-bar { background: currentColor; border-radius: var(--u-r-full); }
.anteil-gut progress     { color: var(--u-ok); }
.anteil-warn progress    { color: var(--u-warn); }
.anteil-gefahr progress  { color: var(--u-danger); }
.anteil-hinweis progress { color: var(--u-info); }
.anteil-neutral progress { color: var(--u-text-faint); }

/* ── Seitenweise ── */
.blaettern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-s-5);
  flex-wrap: wrap;
  margin-top: var(--u-s-5);
  color: var(--u-text-muted);
  font-size: var(--u-t-sm);
}

/* ── Formular und Feld ── JEDES Feld hat eine sichtbare, verknuepfte Beschriftung; ein Platzhalter ist keine
   (61 §10). Langfassung: docs §15.18. */
.formular { display: flex; flex-direction: column; gap: var(--u-s-6); max-width: 48rem; }
.formular-breit { max-width: none; }
.feld { display: flex; flex-direction: column; gap: var(--u-s-3); }
.feld > label {
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
}
.feld-pflicht { color: var(--u-danger-fg); }
.feld-hilfe { margin: 0; color: var(--u-text-muted); font-size: var(--u-t-sm); }
/* Der Fehler steht AM FELD, nicht nur oben. Oben steht die Zusammenfassung,
   am Feld die Ursache (61 §10 Punkt 1). */
.feld-fehler {
  color: var(--u-danger-fg); font-size: var(--u-t-sm);
  font-weight: var(--u-w-medium);
}

/* EINGABEELEMENTE IM INHALT, OHNE WRAPPER-PFLICHT: ein Feld ohne .feld sieht nicht roh aus; :where() haelt die
   Regel so schwach wie `.inhalt` allein, damit Bausteine sie schlagen. Langfassung: docs §15.92. */
.inhalt :where(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  width: 100%;
  min-height: max(var(--u-d-feld), var(--u-ziel-min));
  padding: var(--u-s-3) var(--u-s-5);
  border: 1px solid var(--u-border-strong);
  border-radius: var(--u-r-sm);
  background: var(--u-surface);
  color: var(--u-text);
  font-family: inherit;
  font-size: var(--u-t-md);
  transition: border-color var(--u-dur-1) var(--u-ease), box-shadow var(--u-dur-1) var(--u-ease);
}
.inhalt :where(select) { cursor: pointer; }
/* Der Fokusring bleibt der globale; das Feld hebt zusaetzlich seinen Rand. */
.inhalt :where(input, select, textarea):focus-visible {
  border-color: var(--u-brand-text);
  box-shadow: 0 0 0 3px var(--u-brand-wash);
}
/* FESTBREITE IST HIER INFORMATION: im grossen Textfeld stehen Markdown, Persona oder Auftrag, deren Einrueckungen
   stehen muessen. Wo ein Textfeld eine ZEILE ist, gilt die Fliessschrift. Langfassung: docs §15.93. */
.inhalt :where(textarea) {
  min-height: calc(var(--u-s-14) * 2);
  font-family: var(--u-font-mono);
  font-size: var(--u-t-sm);
  line-height: var(--u-lh-loose);
  resize: vertical;
}
.inhalt :where(input, textarea)::placeholder { color: var(--u-text-faint); }
.inhalt :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--u-danger); }
.inhalt :where(input, select, textarea):disabled { background: var(--u-field-off); color: var(--u-text-muted); }
.inhalt :where(input[type="file"]) { color: var(--u-text-2); font-family: inherit; font-size: var(--u-t-sm); }
.inhalt :where(input[type="file"])::file-selector-button {
  margin-right: var(--u-s-5);
  padding: var(--u-s-3) var(--u-s-6);
  border: 1px solid var(--u-border-strong);
  border-radius: var(--u-r-sm);
  background: var(--u-knopf);
  color: var(--u-text);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--u-w-strong);
}
.wahlfeld { display: flex; flex-direction: column; gap: var(--u-s-3); }
/* Ein <fieldset> bringt eigene Abstaende und einen Rahmen mit. Der Ruecksetzer
   steht HIER und nicht als Stilangabe am Element (61 §13 Punkt 5). */
.feld-gruppe { margin: 0; padding: 0; border: 0; }
.feld-gruppe > legend { padding: 0; font-size: var(--u-t-md); font-weight: var(--u-w-medium); }
.wahl { display: flex; align-items: flex-start; gap: var(--u-s-4); font-size: var(--u-t-md); }
.wahl input { min-height: var(--u-s-8); min-width: var(--u-s-8); margin: 0; accent-color: var(--u-brand-text); }

/* ── Knoepfe ── nach GodCore: Nebenknopf hell mit Rand, Hauptknopf in der Marke, Zeilenaktion als Pille,
   Symbolknopf quadratisch. Langfassung: docs §15.19. */
.knopfreihe { display: flex; gap: var(--u-s-4); flex-wrap: wrap; align-items: center; }
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u-s-3);
  min-height: max(var(--u-d-ziel), var(--u-ziel-min));
  padding: var(--u-s-3) var(--u-s-7);
  border: 1px solid var(--u-border-strong);
  border-radius: var(--u-r-sm);
  background: var(--u-knopf);
  color: var(--u-text);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-tight);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--u-dur-1) var(--u-ease), box-shadow var(--u-dur-2) var(--u-ease),
    border-color var(--u-dur-1) var(--u-ease), translate var(--u-dur-1) var(--u-ease);
}
.knopf:hover { border-color: var(--u-brand-line); background: var(--u-surface-3); color: var(--u-text); }
/* JEDER KNOPF DRUECKT SICH: ein Pixel. Das kostet nichts und ist der Unterschied
   zwischen einer Flaeche und einem Bedienelement. */
.knopf:active { translate: 0 1px; }
/* DIE KANTE SPRINGT VON OBEN NACH INNEN: beim Druck faellt das Licht nach innen, der Knopf gibt nach.
   Langfassung: docs §15.122. */
.knopf-haupt:active {
  box-shadow: inset 0 1px 3px var(--u-hairline-strong), 0 0 0 1px var(--u-brand-line);
}
/* DER HAUPTKNOPF IST DIE MARKE: Verlauf in die Zeigestufe, weisse Schrift, beim Zeigen DUNKLER. Die helle
   Stufe nie hinein (1,97:1, 14-marke-verlauf). Langfassung: docs §15.20. */
.knopf-haupt {
  border: 0;
  padding-block: calc(var(--u-s-3) + 1px);
  background: linear-gradient(135deg, var(--u-knopf-haupt), var(--u-brand-2));
  color: var(--u-knopf-haupt-text);
  /* KEIN LEUCHTEN AUF PAPIER: statt Schein die Glanzkante oben und eine Haarlinie der Marke.
     Langfassung: docs §15.123. */
  box-shadow: inset 0 1px 0 var(--u-sheen), 0 0 0 1px var(--u-brand-line);
}
.knopf-haupt:hover {
  background: var(--u-knopf-haupt-hover);
  color: var(--u-knopf-haupt-text);
  box-shadow: inset 0 1px 0 var(--u-sheen), 0 0 0 1px var(--u-brand);
}
.knopf-gefahr {
  border-color: var(--u-danger-line); background: var(--u-surface);
  color: var(--u-danger-fg);
}
.knopf-gefahr:hover { border-color: var(--u-danger); background: var(--u-danger-bg); color: var(--u-danger-fg); }
.knopf-leise { border-color: transparent; background: transparent; color: var(--u-text-2); }
.knopf-leise:hover { border-color: transparent; background: var(--u-surface-3); color: var(--u-text); }
/* Klein und rund: Aktionen in Tabellenzeilen und Kartenkoepfen. */
.knopf-klein {
  /* DIESE ZEILE WAR DER BUG: sie schlug die alte Beruehrziel-Regel ueber die Reihenfolge; jetzt traegt die Deklaration
     ihre Untergrenze selbst. Langfassung: docs §15.124. */
  min-height: max(var(--u-s-9), var(--u-ziel-min));
  padding: 0 var(--u-s-5);
  border-radius: var(--u-r-sm);
  font-size: var(--u-t-xs);
}
.knopf-klein:not(.knopf-haupt):not(.knopf-gefahr) { background: var(--u-surface); }
/* Nur ein Symbol: ein Quadrat mit Rand. Der Name steht als Titel und fuer Hilfsmittel. */
.knopf-symbol { width: var(--u-s-10); padding: 0; background: var(--u-surface); }
/* Umriss in der Marke: eine Nebenhandlung, die zum Haus gehört („+ Neu" im AI Hub, wie im Vorgänger).
   Zwei Klassen, damit das Zeigen die weiße Fläche von .knopf-klein schlägt. */
.knopf.knopf-umriss { border-color: var(--u-brand-line); color: var(--u-brand-text); }
.knopf.knopf-umriss:hover { border-color: var(--u-brand-text); background: var(--u-brand-wash); color: var(--u-brand-text); }

/* ── Kleinteile ── */
.leise { color: var(--u-text-muted); font-size: var(--u-t-sm); }
.mono, code, pre { font-family: var(--u-font-mono); font-size: var(--u-t-sm); }
code {
  padding: 0 var(--u-s-2);
  border-radius: var(--u-r-xs);
  background: var(--u-surface-3);
}
pre code { padding: 0; background: transparent; }
pre {
  overflow-x: auto;
  margin: 0;
  padding: var(--u-s-6) var(--u-s-7);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-sm);
  background: var(--u-surface-alt);
  line-height: var(--u-lh-loose);
  white-space: pre-wrap;
  word-break: break-word;
}
.sym {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
.paare {
  display: grid; gap: var(--u-s-4) var(--u-s-7);
  grid-template-columns: auto 1fr; align-items: center; margin: 0;
}
.paare dt {
  color: var(--u-text-muted);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-caps);
}
.paare dd { margin: 0; font-size: var(--u-t-md); }
.kette {
  display: flex; flex-direction: column; gap: var(--u-s-2);
  margin: 0; padding: 0; list-style: none;
}
.kette li { display: flex; align-items: center; gap: var(--u-s-4); font-size: var(--u-t-md); }
.kette-stufe {
  color: var(--u-text-faint); font-family: var(--u-font-mono);
  font-size: var(--u-t-xs);
}
/* Fuer Hilfsmittel sichtbar, fuer Augen nicht -- ohne Groesse 0, weil das
   manche Vorleser ueberspringen. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* `hidden` GEWINNT IMMER: jede Autorenregel zum Anzeigemodus schlaegt die Browser-Regel, deshalb diese Zeile (61 §12).
   Langfassung: docs §15.125. */
[hidden] { display: none !important; }

/* ── Rueckfrage (Dialog) ── EIN Baustein fuer jede Rueckfrage (61 §7); geschlossen `display: none`, sonst
   layoutet er Leerraum (61 §12). Langfassung: docs §15.21. */
.dialog {
  /* `100vw` zaehlt am Schreibtisch die Rollleiste mit und schiebt den Dialog nach links. */
  width: min(32rem, calc(100% - 2 * var(--u-s-8)));
  padding: var(--u-s-8);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  /* EINE RUECKFRAGE IST EIN LESEMOMENT, kein Arbeitsschritt -- und sie liegt in
     der obersten Schicht, erbt ihre Rollen also von `:root` und nicht vom
     Inhalt. Beides muss hier ausdruecklich stehen. */
  --u-d-block: var(--u-d-block-lesen);
  /* WAS UEBER DER SEITE SCHWEBT, IST HELLER ALS ALLES ANDERE. Seit die Karte
     cremefarben ist, ist das der Unterschied, den sie nicht mehr macht. */
  background: var(--u-surface-hoch);
  color: var(--u-text);
  box-shadow: var(--u-e-4);
}
.dialog:not([open]) { display: none; }
.dialog::backdrop { background: var(--u-surface-inv); opacity: .55; }
.dialog h2 {
  margin: 0;
  color: var(--u-text);
  font-family: var(--u-font-display);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-tight);
}
.dialog p { margin: 0; }
.dialog .knopfreihe { justify-content: flex-end; }

/* ── Toast ── nur Erfolg (Fehler bleiben Streifen im Inhalt); Ausblenden per CSS: wirkt ohne Skript, Zeiger oder
   Fokus halten es an. Langfassung: docs §15.22. */
.toast-stapel {
  position: fixed;
  right: var(--u-s-8);
  bottom: var(--u-s-8);
  z-index: var(--u-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--u-s-4);
  width: min(26rem, calc(100% - 2 * var(--u-s-8)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--u-s-4);
  padding: var(--u-s-5) var(--u-s-6);
  border: 1px solid var(--u-ok-line);
  border-left: 3px solid var(--u-ok);
  border-radius: var(--u-r-sm);
  background: var(--u-ok-bg);
  color: var(--u-ok-fg);
  box-shadow: var(--u-e-3);
  pointer-events: auto;
  animation: toast-an var(--u-dur-3) var(--u-ease-play),
             toast-weg var(--u-dur-3) var(--u-ease) 8s forwards;
}
.toast:hover,
.toast:focus-within { animation-play-state: paused; }
.toast p { flex: 1; margin: 0; }
.toast .knopf-leise { color: var(--u-ok-fg); }
/* ANKOMMEN UND GEHEN SIND ZWEI BEWEGUNGEN: der Toast kommt federnd (`--u-ease-play` schiesst leicht ueber)
   und geht weich. Langfassung: docs §15.94. */
@keyframes toast-an { from { opacity: 0; translate: 0 var(--u-s-4); } }
@keyframes toast-weg { to { opacity: 0; visibility: hidden; } }

/* Ladezustand: der Knopf, der gerade abgeschickt hat, ist gesperrt und sagt es (61 §10 Punkt 6). */
.knopf:disabled { cursor: not-allowed; opacity: .6; }
.knopf[aria-busy="true"] { cursor: progress; }

/* Einmal-Anzeige einer Kennung: ein Klick markiert den ganzen Wert, ein langer Wert bricht (Markierung statt
   Kopierknopf). Langfassung: docs §15.126. */
.einmal-wert {
  margin: 0 0 var(--u-s-5);
  padding: var(--u-s-5) var(--u-s-6);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-sm);
  background: var(--u-surface-3);
  font-size: var(--u-t-md);
  user-select: all;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Chat ── */
/* Der Verlauf scrollt in sich, damit die Eingabe sichtbar bleibt. Das Skript hält ihn unten, solange
 * der Mensch unten ist — wer hochgescrollt hat, liest und wird nicht weggerissen. */
/* DER TAKT TRAEGT DIE GLIEDERUNG: acht Pixel innerhalb eines Redeblocks, zwanzig beim
   Sprecherwechsel. Ein gleichfoermiger Abstand macht aus einem Gespraech eine Liste. */
.chat-verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--u-s-4);
  max-height: 62dvh;
  overflow-y: auto;
  padding: var(--u-s-2) var(--u-s-1) var(--u-s-5);
}
/* Eine Nachricht ist eine ZEILE (Avatar + Blase); die Blase traegt die Flaeche.
   Mensch rechts auf der Markenflaeche, Agent links mit Avatar, System leise mittig. */
.nachricht {
  display: flex;
  align-items: flex-start;
  gap: var(--u-s-5);
  width: 100%;
}
.nachricht + .nachricht:not(.nachricht-anschluss) { margin-top: var(--u-s-5); }
/* DIE KAPPUNG GEHOERT NUR DORTHIN, WO SIE ETWAS SAGT: die eigene Nachricht ist eine schmale Sprechblase, die
   Systemnotiz eine Randbemerkung; die Antwort des Agenten ist ein Dokument. Langfassung: docs §15.95. */
.nachricht-mensch { align-self: flex-end; max-width: min(520px, 90%); }
.nachricht-agent { align-self: flex-start; }
.nachricht-system { align-self: center; max-width: min(80ch, 96%); }
/* Die Spalte: Absenderzeile oben, Blase darunter. */
.nachricht-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--u-s-2);
  flex: 1 1 auto;
  min-width: 0;
}
.nachricht-mensch .nachricht-spalte { align-items: flex-end; }
/* Ein Anschlussbeitrag haelt die Flucht des Avatars, ohne ihn zu wiederholen. */
.nachricht-avatar-platz { flex: none; width: 32px; }
.nachricht-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--u-e-1);
}
span.nachricht-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--u-brand-wash);
  color: var(--u-brand-text);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-caps);
}
/* DIE ASYMMETRIE TRAEGT DIE ORIENTIERUNG: der Agent schreibt ein helles Dokument, der Mensch eine dunkle Blase rechts.
   Langfassung: docs §15.127. */
.nachricht-blase {
  min-width: 0;
  padding: var(--u-s-5) var(--u-s-6);
  border: 1px solid var(--u-border-soft);
  border-radius: 5px var(--u-r-md) var(--u-r-md) var(--u-r-md);
  background: var(--u-surface);
  line-height: var(--u-lh-loose);
}
/* Die Mensch-Blase ist DUNKEL wie im Vorbild (Knopf-Navy, im Dunkelthema Blau),
   der eigene Avatar steht rechts von ihr. */
.nachricht-mensch { max-width: min(520px, 90%); }
.nachricht-mensch .nachricht-blase {
  border: 0;
  border-radius: var(--u-r-md) var(--u-r-md) 5px var(--u-r-md);
  background: linear-gradient(140deg, var(--u-surface-inv-3), var(--u-surface-inv-2));
  color: var(--u-text-on-inv-stark);
}
/* Keine Absenderzeile ueber der eigenen Blase — nur die Uhrzeit, unten rechts darin.
   Bewusst --u-text-on-inv (.72) und nicht die schwaechere Stufe: elf Pixel auf dunkel
   bei .38 reissen die Lesbarkeitsgrenze. */
.nachricht-zeit-eigen {
  display: block;
  margin-top: var(--u-s-3);
  text-align: right;
  color: var(--u-text-on-inv);
  font-size: var(--u-t-2xs);
  font-variant-numeric: tabular-nums;
}
.nachricht-mensch .nachricht-kopf { color: var(--u-text-on-inv); }
.nachricht-mensch .nachricht-name { color: var(--u-text-on-inv-stark); }
.nachricht-mensch .nachricht-text a { color: var(--u-brand-hell); }
.nachricht-mensch .nachricht-text pre,
.nachricht-mensch .nachricht-text code { background: var(--u-line-on-inv); color: var(--u-text-on-inv-stark); }
.nachricht-system .nachricht-blase {
  border: 0;
  border-radius: var(--u-r-sm);
  padding: var(--u-s-3) var(--u-s-5);
  background: var(--u-surface-3);
  color: var(--u-text-muted);
  font-style: italic;
}
/* Die Notiz zieht den groesseren Lesegrad NICHT mit: sie ist eine Randbemerkung. */
.nachricht-system .nachricht-text { font-size: var(--u-t-sm); line-height: var(--u-lh); }
.nachricht-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--u-s-4);
  padding: 0 var(--u-s-2);
  color: var(--u-text-muted);
  font-size: var(--u-t-2xs);
  font-variant-numeric: tabular-nums;
}
.nachricht-name { color: var(--u-text-2); font-weight: var(--u-w-strong); font-size: var(--u-t-xs); }
/* DER VERLAUF IST DIE LESESTRECKE DER SEITE und traegt den groessten Grad im Modul; die Zeilenhoehe setzt die Blase.
   Langfassung: docs §15.128. */
.nachricht-text { overflow-wrap: anywhere; font-size: var(--u-t-lg); line-height: var(--u-lh-loose); }
.nachricht-text > :first-child { margin-top: 0; }
.nachricht-text > :last-child { margin-bottom: 0; }
.nachricht-text pre { overflow-x: auto; }
/* TABELLEN IN NACHRICHTEN (15.09.2026): Agenten antworten gern in Tabellen, und bis dahin standen dort
   rohe Striche. Die Tabelle rollt in ihrem eigenen Rahmen, nie die Blase (61 §9). */
.nachricht-text .md-tabelle {
  overflow-x: auto;
  margin: var(--u-s-5) 0;
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-sm);
}
.nachricht-text .md-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--u-t-md);
  line-height: var(--u-lh);
}
.nachricht-text .md-tabelle th,
.nachricht-text .md-tabelle td {
  padding: var(--u-s-3) var(--u-s-5);
  border-bottom: 1px solid var(--u-border-soft);
  text-align: left;
  vertical-align: top;
}
.nachricht-text .md-tabelle th { background: var(--u-surface-alt); color: var(--u-text-2); font-weight: var(--u-w-strong); }
.nachricht-text .md-tabelle tbody tr:last-child td { border-bottom: 0; }
.nachricht-text .md-tabelle tbody tr:nth-child(even) td { background: var(--u-surface-alt); }
.nachricht-text .md-tabelle .md-mitte { text-align: center; }
.nachricht-text .md-tabelle .md-rechts { text-align: right; font-variant-numeric: tabular-nums; }
.nachricht-mensch .md-tabelle,
.nachricht-mensch .md-tabelle th,
.nachricht-mensch .md-tabelle td { border-color: var(--u-line-on-inv); }
.nachricht-mensch .md-tabelle th { background: var(--u-line-on-inv); color: var(--u-text-on-inv-stark); }
.nachricht-mensch .md-tabelle tbody tr:nth-child(even) td { background: transparent; }
.nachricht-text blockquote {
  margin: var(--u-s-4) 0;
  padding-left: var(--u-s-5);
  border-left: 3px solid var(--u-border-strong);
  color: var(--u-text-2);
}
/* ── Das Zeilenmenue ──
   EIN <details>, kein Skript: oeffnet ohne JavaScript, olymp.js schliesst es nur (Klick daneben,
   Escape). Langfassung: docs §15.23. */
.zeilenmenue { position: relative; flex: none; }
.zeilenmenue > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--u-s-10);
  height: var(--u-s-10);
  border-radius: var(--u-r-sm);
  color: var(--u-text-muted);
  cursor: pointer;
  list-style: none;
}
.zeilenmenue > summary::-webkit-details-marker { display: none; }
.zeilenmenue > summary:hover { background: var(--u-hover); }
.zeilenmenue[open] > summary { background: var(--u-brand-wash); color: var(--u-brand-text); }
.zeilenmenue-blatt {
  position: absolute;
  top: calc(100% + var(--u-s-2));
  right: 0;
  z-index: var(--u-z-menu);
  min-width: 12rem;
  padding: var(--u-s-2);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface-hoch);
  box-shadow: var(--u-e-3);
}
.zeilenmenue-blatt form { margin: 0; }
.zeilenmenue-punkt {
  display: flex;
  align-items: center;
  gap: var(--u-s-4);
  width: 100%;
  padding: var(--u-s-3) var(--u-s-4);
  border: 0;
  border-radius: var(--u-r-xs);
  background: transparent;
  color: var(--u-text);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--u-t-sm);
  text-align: left;
}
.zeilenmenue-punkt:hover { background: var(--u-hover); }
.zeilenmenue-punkt .sym { flex: none; width: 16px; height: 16px; color: var(--u-text-muted); }
.zeilenmenue-gefahr { color: var(--u-danger-fg); }
.zeilenmenue-gefahr:hover { background: var(--u-danger-bg); }
.zeilenmenue-gefahr .sym { color: var(--u-danger-fg); }
.zeilenmenue-punkt[aria-current="true"] { background: var(--u-brand-wash); color: var(--u-brand-text); font-weight: var(--u-w-strong); }
/* Der Eintrag und sein Menue stehen nebeneinander; das Menue zeigt sich erst beim Zeigen
   (auf Zeigegeraeten ohne Schweben dauerhaft, sonst waere es dort unerreichbar). */
.chat-leiste-zeile { position: relative; display: flex; align-items: center; }
.chat-leiste-zeile > .chat-leiste-eintrag { flex: 1; min-width: 0; }
.chat-leiste-zeile > .zeilenmenue { position: absolute; top: var(--u-s-2); right: var(--u-s-3); opacity: 0; }
.chat-leiste-zeile > .zeilenmenue > summary { width: var(--u-s-8); height: var(--u-s-8); }
.chat-leiste-zeile:hover > .zeilenmenue,
.chat-leiste-zeile:focus-within > .zeilenmenue,
.chat-leiste-zeile > .zeilenmenue[open] { opacity: 1; }
@media (hover: none) {
  .chat-leiste-zeile > .zeilenmenue { opacity: 1; }
}

/* Titel und Thema im Kopf: Anzeige und Formular am selben Platz. Ohne Skript steht das
   Formular da (die Funktion fehlt nie), mit Skript klappt es auf Klick auf. */
.chat-kopf-thema[data-oeffnet],
.chat-kopf-themawahl[data-oeffnet] { cursor: text; }
.chat-kopf-thema[data-oeffnet]:hover,
.chat-kopf-themawahl[data-oeffnet]:hover { background: var(--u-hover); border-radius: var(--u-r-xs); }
.chat-kopf-formular { display: inline-flex; align-items: center; gap: var(--u-s-3); }
.chat-kopf-formular input { width: auto; min-width: 8rem; flex: 0 1 18rem; }

/* ── Der Beitrag, der gerade entsteht ── gestrichelt, mit Schreibmarke, IM Verlauf: ein Kasten darunter las sich
   als Systemhinweis. Langfassung: docs §15.24. */
#chat-laufend,
[data-chat-teil="laufend"] { display: flex; flex-direction: column; }
#chat-laufend:has(.nachricht-laufend),
[data-chat-teil="laufend"]:has(.nachricht-laufend) { margin-top: var(--u-s-5); }
.nachricht-laufend .nachricht-blase {
  border-style: dashed;
  border-color: var(--u-border-strong);
}
/* DIE SCHREIBMARKE sitzt am ENDE des letzten Absatzes und blinkt hart (`steps(2)`), nicht wie eine Ladeanzeige.
   Langfassung: docs §15.129. */
.nachricht-laufend .nachricht-text > :last-child::after {
  content: "▌";
  margin-left: var(--u-s-1);
  color: var(--u-brand-text);
  animation: schreibmarke 1s steps(2, start) infinite;
}
@keyframes schreibmarke { 50% { opacity: 0; } }
/* Der Zustand pulst mit: die EINZIGE Dauerbewegung der Seite; das Wort daneben sagt, was (61 §8).
   Langfassung: docs §15.130. */
.abzeichen-puls::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: laufpuls 1.6s var(--u-ease) infinite;
}
@keyframes laufpuls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* Ohne Bewegung bleiben beide sichtbar statt in einem zufaelligen Halbbild stehen. */
@media (prefers-reduced-motion: reduce) {
  .nachricht-laufend .nachricht-text > :last-child::after,
  .abzeichen-puls::before { opacity: 1; }
}
.chat-laufend-kopf { flex-wrap: wrap; margin: 0; }
/* OHNE LEBENSZEICHEN STEHT AUCH DIE SCHREIBMARKE: der Server setzt die Klasse, wenn der Lauf nicht lebt
   (`laufanzeige()`). Langfassung: docs §15.131. */
.nachricht-laufend-still .nachricht-text > :last-child::after { animation: none; opacity: .35; }
/* ── Chat-Flaeche ── Leiste und Gespraech nebeneinander; chat.js wechselt ohne Neuladen, ohne Skript sind es
   Verweise. Langfassung: docs §15.25. */
/* EINE KARTE, ZWEI SPALTEN: innen trennt eine Linie die Gespraechsliste vom Gespraech. Langfassung: docs §15.132. */
/* Der 96rem-Deckel des Inhalts gilt fuer Tabellen und Panels — nicht fuer einen Raum,
   der die Fensterhoehe ohnehin ausfuellt. Dasselbe Muster wie im Vorgaenger. */
.inhalt:has(.chat-flaeche) { max-width: none; }
.chat-flaeche {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  /* DIE EINE STELLE, AN DER ES ZAEHLT: `dvh` folgt der Tastatur nur auf Chromium und springt mit der
     Browserleiste; `--u-sicht-h` stimmt ueberall. Langfassung: docs §15.26. */
  height: calc(var(--u-sicht-h, 100dvh) - var(--u-rahmen-h));
  min-height: 30rem;
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-lg);
  background: var(--u-surface);
  box-shadow: var(--u-e-2);
}
.chat-leiste {
  display: flex;
  flex-direction: column;
  gap: var(--u-s-4);
  min-height: 0;
  /* Eine dichte Liste MITTEN in einer Leseansicht: die Rollen werden hier
     oertlich neu erklaert. Das geht, weil Dichte eine Rolle ist und keine
     Klasse -- es braucht kein `:has()` und keine zweite Leiter. */
  --u-d-zeile:   var(--u-s-3);
  --u-d-zeile-x: var(--u-s-5);
  --u-d-lh:      var(--u-lh-tight);
  padding: var(--u-s-5);
  border-right: 1px solid var(--u-border-soft);
  background: var(--u-surface-alt);
}
.chat-haupt { display: flex; flex-direction: column; min-height: 0; }
.chat-haupt noscript p { margin: var(--u-s-3) 0 0; }
.chat-karte {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Kopf und Eingabe stehen auf der Kartenflaeche, der Verlauf auf dem Papier —
   so liegen die Blasen auf einem Grund und nicht im Nichts. */
.chat-karte > .chat-kopfzeile { margin: 0; padding: var(--u-s-6) var(--u-s-7); background: var(--u-surface); }
.chat-karte .chat-verlauf {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  padding: var(--u-s-7);
  background: var(--u-surface-2);
}
/* DIE ZEILE GEHT DURCH: die Eingabe eines Raums nimmt die 48rem-Deckelung von `.formular` zurueck.
   Langfassung: docs §15.133. */
.chat-karte .chat-eingabe,
.chat-karte .chat-instanz-eingabe {
  max-width: none;
  margin: 0;
  padding: var(--u-s-6) var(--u-s-7);
  border-top: 1px solid var(--u-border-soft);
  background: var(--u-surface);
}
.chat-karte > .leise { margin: 0; padding: var(--u-s-4) var(--u-s-7); }
.chat-karte .chat-verlauf { flex: 1 1 auto; max-height: none; min-height: 0; }
.chat-karte .chat-eingabe,
.chat-karte .chat-instanz-eingabe { margin-top: auto; }
.chat-leiste-liste {
  display: flex;
  flex-direction: column;
  gap: var(--u-s-2);
  overflow-y: auto;
  min-height: 0;
  padding: var(--u-s-1);
}
.chat-leiste-eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--u-s-4);
  min-width: 0;
  padding: var(--u-d-zeile) var(--u-d-zeile-x);
  border: 1px solid transparent;
  border-radius: var(--u-r-md);
  color: var(--u-text);
  text-decoration: none;
  transition: background var(--u-dur-1) var(--u-ease);
}
/* Der Eintrag traegt keine eigene Flaeche, bis er gemeint ist: beim Zeigen die
   Toenung der Marke, aktiv eine WEISSE KARTE, die sich aus der cremefarbenen
   Liste heraushebt. */
.chat-leiste-eintrag:hover { background: var(--u-hover); }
.chat-leiste-eintrag[aria-current="page"] {
  border-color: var(--u-brand-line);
  background: var(--u-surface);
  box-shadow: var(--u-e-2);
}
/* Suchzeile der Leiste (rein clientseitig): sie steht AUSSERHALB von [data-gespraech-leiste], damit der Wechsel sie
   nicht ersetzt. Langfassung: docs §15.134. */
/* ZWEI ZEILEN STATT ZWEIER HALBER FELDER: nebeneinander blieben in einer 19rem breiten
   Leiste je 8,5rem — zu wenig fuer einen Agentennamen und zu wenig fuer einen Suchbegriff. */
.chat-leiste-suchzeile { display: flex; flex-direction: column; gap: var(--u-s-3); }
.chat-leiste-suchzeile input,
.chat-leiste-suchzeile select { width: 100%; min-width: 0; }
.chat-leiste-suchzeile select { min-height: var(--u-s-10); font-size: var(--u-t-sm); }
/* Das Suchfeld trägt sein Symbol IN sich (Vorbild v1): der Rahmen liegt am Behälter, das Feld ist randlos
   darin, und der Fokusring liegt um beides. */
.chat-leiste-suche {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  padding-inline: var(--u-s-4);
  border: 1px solid var(--u-border-strong);
  border-radius: var(--u-r-sm);
  background: var(--u-surface);
  color: var(--u-text-muted);
  transition: border-color var(--u-dur-1) var(--u-ease), box-shadow var(--u-dur-1) var(--u-ease);
}
.chat-leiste-suche:focus-within { border-color: var(--u-brand-text); box-shadow: 0 0 0 3px var(--u-brand-wash); }
.chat-leiste-suche .sym { width: 16px; height: 16px; }
.chat-leiste-suchzeile .chat-leiste-suche input {
  min-height: var(--u-s-10);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--u-t-sm);
}
.chat-leiste-suchzeile .chat-leiste-suche input:focus-visible { outline: none; box-shadow: none; }
/* REITER AKTIV/ARCHIV: eine Schiene, zwei gleich breite Hälften (Vorbild v1, 15.09.2026). */
.chat-leiste-reiter { display: flex; }
.chat-leiste-reiter .filter-wahl { flex: 1; justify-content: center; min-height: var(--u-s-9); }
.chat-leiste-reiter .sym { width: 14px; height: 14px; }
/* THEMEN-CHIPS: klein und umbrechend — sie filtern die Leiste, sie sind keine Navigation. */
.chat-leiste-themen { display: flex; flex-wrap: wrap; gap: var(--u-s-2); }
.chat-leiste-themen .filter-wahl { min-height: var(--u-s-8); padding: 0 var(--u-s-4); font-size: var(--u-t-xs); }
.chat-leiste-ablage { display: flex; flex-direction: column; gap: var(--u-s-2); }
.chat-leiste-leer-ablage { margin: var(--u-s-6) var(--u-s-3) 0; }
.chat-leiste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-s-4);
  padding-bottom: var(--u-s-5);
  border-bottom: 1px solid var(--u-border-soft);
}
/* Bewusst KEINE Versalien: die Leiste ist Fliesstext-Umgebung, ein schreiender Titel
   je Eintrag war der Hauptgrund, warum die Seite billiger wirkte als das alte Olymp. */
.chat-leiste-ueberschrift {
  margin: 0;
  font-family: var(--u-font-display);
  font-size: var(--u-t-xl);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-tight);
  text-transform: none;
}
.chat-leiste-gruppe {
  display: flex;
  align-items: center;
  gap: var(--u-s-2);
  margin: var(--u-s-6) 0 var(--u-s-2);
  color: var(--u-text-muted);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-caps);
  text-transform: uppercase;
  line-height: var(--u-lh-caps);
}

.chat-leiste-gruppe .sym { width: 12px; height: 12px; color: var(--u-brand-text); }

/* Die Kopfzeile des Gespraechs: Avatar, Name, Modell — und rechts der Weg zum Agenten. */
.chat-kopfzeile {
  display: flex;
  align-items: center;
  gap: var(--u-s-5);
  margin-bottom: var(--u-s-5);
  padding-bottom: var(--u-s-5);
  border-bottom: 1px solid var(--u-border-soft);
}
/* WEN SCHREIBE ICH AN: der Avatar ist hier so gross wie sonst nirgends; der Ring traegt den Zustand.
   Langfassung: docs §15.135. */
.chat-kopf-avatar {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}
span.chat-kopf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--u-brand-wash);
  color: var(--u-brand-text);
  font-size: var(--u-t-2xl);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-caps);
}
.chat-kopf-avatar-gut     { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-ok); }
.chat-kopf-avatar-warn    { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-warn); }
.chat-kopf-avatar-gefahr  { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-danger); }
.chat-kopf-avatar-neutral { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-border-strong); }
.chat-kopf-titel { display: flex; flex-direction: column; gap: var(--u-s-2); min-width: 0; }
/* Der Name im Gesprächskopf ist bewusst LEISE (eine h2). ACHTUNG SPEZIFITÄT: `.karte h2` schlägt eine Klasse — deshalb
   zwei. Langfassung: docs §15.136. */
.chat-kopfzeile .chat-kopfzeile-name {
  display: block;
  margin: 0;
  font-size: var(--u-t-xl);
  font-weight: var(--u-w-strong);
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Die Unterzeile ist eine ZEILE AUS TEILEN, kein Satz: Kennung, Haus, Fach, Thema —
   jedes fuer sich lesbar und einzeln wegzulassen, wenn es das Feld nicht gibt. */
.chat-kopf-unter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--u-s-4);
  min-width: 0;
  color: var(--u-text-muted);
  font-size: var(--u-t-xs);
}
.chat-kopf-mandant { display: inline-flex; align-items: center; gap: var(--u-s-2); }
.chat-kopf-mandant .sym { width: 14px; height: 14px; }
.chat-kopf-thema { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
.chat-kopfzeile-frei { flex: 1; }
.chat-kopf-modell { display: inline-flex; align-items: center; gap: var(--u-s-3); }
.chat-kopf-nadel { width: 15px; height: 15px; margin-left: var(--u-s-3); color: var(--u-brand-text); vertical-align: -1px; }
/* Das Menü im Kopf ist ein Knopf mit Rand wie im Vorgänger — in der Liste bleibt es randlos. */
.chat-kopfzeile > .zeilenmenue > summary { border: 1px solid var(--u-border); background: var(--u-surface); }
.chat-leiste-fuss { margin: 0; text-align: center; font-size: var(--u-t-xs); }
.chat-leiste-fuss a { color: var(--u-text-muted); text-decoration: none; }
.chat-leiste-fuss a:hover { color: var(--u-brand-text); text-decoration: underline; }
/* OB DIE GESPRAECHSLEISTE PLATZ HAT, entscheidet der Inhalt (Behaelter), nicht das Fenster: eine Fensterschwelle
   meint je Rahmen andere Breiten. Langfassung: docs §15.28. */
/* Der Griff zur Gespraechsliste steht im Chat-Kopf und NUR am Telefon. Die Grundregel steht
   VOR dem Behaelterblock — gleiche Spezifitaet, die spaetere gewinnt (Lehre aus 13t). */
.chat-leiste-griff { display: none; flex: none; }
@container inhalt (width < 58rem) {
  .chat-flaeche { grid-template-columns: minmax(0, 1fr); }
  .chat-leiste-griff { display: inline-flex; }
  /* DIE LISTE WIRD EINE SCHUBLADE, nicht unsichtbar: sonst fehlten „+ Neu" und „Alle Gespraeche". Ohne eigenen
     Verlaufseintrag. Langfassung: docs §15.29. */
  .chat-leiste {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--u-z-drawer);
    width: min(20rem, 86vw);
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 0;
    background: var(--u-surface-hoch);
    box-shadow: var(--u-e-3);
    translate: -100% 0;
    visibility: hidden;
    transition: translate var(--u-dur-4) var(--u-ease-play),
                visibility 0s var(--u-dur-4);
  }
  [data-chatleiste="auf"] .chat-leiste {
    translate: 0 0;
    visibility: visible;
    transition: translate var(--u-dur-4) var(--u-ease-play), visibility 0s;
  }
  .chat-karte .chat-verlauf { max-height: 62dvh; }
}

/* Die Eingabe als Zeile unter dem Verlauf: Feld und Senden nebeneinander, wie im
   alten AI Hub — der Knopf steht dort, wo der Blick nach dem Tippen ohnehin ist. */
.chat-eingabe { margin-top: var(--u-s-5); padding-top: var(--u-s-5); border-top: 1px solid var(--u-border-soft); }
.chat-eingabe-reihe { display: flex; align-items: flex-end; gap: var(--u-s-5); }
/* Eine Nachricht ist Sprache, kein Quelltext: Fliessschrift im selben Grad wie die
   Blasen, in die sie gleich wandert. */
.inhalt .chat-eingabe-reihe textarea {
  flex: 1;
  min-height: var(--u-s-12);
  padding: var(--u-s-5) var(--u-s-6);
  resize: none;
  border-radius: var(--u-r-md);
  font-family: var(--u-font-body);
  font-size: var(--u-t-md);
  line-height: var(--u-lh);
}
/* DER SENDEKNOPF TRAEGT NUR SEINEN NAMEN, kein Symbol (.chat-senden-rund ist ein alter Name, rund ist er nicht mehr).
   Langfassung: docs §15.137. */
.chat-senden { flex: none; min-height: var(--u-s-12); padding-inline: var(--u-s-8); }
.chat-eingabe .feld-hilfe { margin: var(--u-s-3) 0 0; }

/* ── Plan-Modus (Register A151) ── ein Schalter neben Senden, die Plan-Karte mit Markenkante. Das
   Kontrollkaestchen ist nur unsichtbar gemacht: Tastatur und Vorleser erreichen es. Langfassung: docs §15.96. */
.plan-schalter {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--u-s-3);
  min-height: var(--u-s-12);
  color: var(--u-text-muted);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.plan-schalter-feld { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.plan-schalter-bahn {
  position: relative;
  flex: none;
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--u-border-strong);
  transition: background var(--u-dur-2) var(--u-ease);
}
.plan-schalter-knauf {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--u-surface);
  transition: transform var(--u-dur-2) var(--u-ease-play);
}
.plan-schalter-feld:checked + .plan-schalter-bahn { background: var(--u-brand); }
.plan-schalter-feld:checked + .plan-schalter-bahn .plan-schalter-knauf { transform: translateX(17px); }
.plan-schalter-feld:focus-visible + .plan-schalter-bahn { outline: 2px solid var(--u-brand-text); outline-offset: 2px; }
.chat-eingabe.ist-plan .plan-schalter { color: var(--u-brand-text); }
.inhalt .chat-eingabe.ist-plan .chat-eingabe-reihe textarea,
.inhalt .chat-instanz-eingabe.ist-plan .chat-eingabe-reihe textarea {
  border-color: var(--u-brand-line);
  box-shadow: 0 0 0 3px var(--u-brand-wash);
}
.abzeichen-plan { background: var(--u-brand-wash); color: var(--u-brand-text); }
/* Der Schalter sitzt in der Chat-Eingabe; wie viel Platz sein Wort hat, entscheidet
   die Chatflaeche. */
@container inhalt (width < 34rem) {
  .plan-schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Die Plan-Karte: dieselbe flache Agenten-Flaeche, mit Markenkante, Kopf und Entscheidungsleiste. */
.nachricht-plan .nachricht-spalte { max-width: min(760px, 100%); }
.nachricht-plan .nachricht-blase {
  border-color: var(--u-brand-line);
  border-left: 3px solid var(--u-brand-text);
  background: linear-gradient(180deg, var(--u-brand-wash), transparent 42%), var(--u-surface);
}
.plan-kopf {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  margin: 0 0 var(--u-s-4);
  padding-bottom: var(--u-s-3);
  border-bottom: 1px solid var(--u-brand-line);
  color: var(--u-brand-text);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-heavy);
}
.plan-fuss { margin-top: var(--u-s-5); padding-top: var(--u-s-4); border-top: 1px solid var(--u-border-soft); }
.plan-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--u-s-3); }
.plan-aktionen form { margin: 0; }
.plan-weiter > summary { list-style: none; cursor: pointer; }
.plan-weiter > summary::-webkit-details-marker { display: none; }
.plan-weiter[open] { flex-basis: 100%; }
.plan-weiter-formular { display: grid; gap: var(--u-s-3); margin-top: var(--u-s-3); }
.plan-weiter-formular textarea { width: 100%; resize: vertical; font-family: var(--u-font-body); font-size: var(--u-t-md); }
.plan-weiter-formular .knopf { justify-self: start; }
.plan-zustand { display: flex; flex-wrap: wrap; gap: var(--u-s-3); margin: 0; color: var(--u-text-muted); font-size: var(--u-t-xs); }
.plan-uebernehmen { margin: var(--u-s-3) 0 0; }
.plan-fortsetzen { margin: var(--u-s-3) 0 0; }

/* ── Die Freigabekarte im Verlauf ── in der Blase, die sie ankuendigt; `warn`, nicht `brand`: sie haelt einen
   Lauf an. Langfassung: docs §15.30. */
.freigabe-karten { display: grid; gap: var(--u-s-4); margin-top: var(--u-s-5); }
.freigabe-karte {
  padding: var(--u-s-4);
  border: 1px solid var(--u-warn-line);
  border-left: 3px solid var(--u-warn);
  border-radius: var(--u-r-sm);
  background: var(--u-warn-bg);
}
.freigabe-kopf {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  margin: 0 0 var(--u-s-3);
  color: var(--u-warn-fg);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-heavy);
}
.freigabe-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--u-s-3); margin: 0 0 var(--u-s-3); }
.freigabe-paket {
  overflow-x: auto;
  max-height: 11rem;
  margin: 0 0 var(--u-s-4);
  padding: var(--u-s-3);
  border-radius: var(--u-r-xs);
  background: var(--u-surface-alt);
  font-family: var(--u-font-mono);
  font-size: var(--u-t-xs);
}
.freigabe-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--u-s-3); }
.freigabe-aktionen form { margin: 0; }
.freigabe-weiter > summary { list-style: none; cursor: pointer; }
.freigabe-weiter > summary::-webkit-details-marker { display: none; }
.freigabe-weiter[open] { flex-basis: 100%; }
.freigabe-weiter form { display: grid; gap: var(--u-s-3); margin-top: var(--u-s-3); }
.freigabe-weiter textarea { width: 100%; resize: vertical; font-family: var(--u-font-body); font-size: var(--u-t-md); }
.freigabe-weiter .knopf { justify-self: start; }

/* ── Anhänge (Register A153) ── die Büroklammer links neben dem Feld, darüber die wartenden Anhänge; im Verlauf
   Rasterbilder als Vorschau (höchstens 210 px), alles andere als Chip. Langfassung: docs §15.97. */
.chat-anhang-knopf { position: relative; flex: none; min-width: var(--u-s-12); min-height: var(--u-s-12); justify-content: center; cursor: pointer; }
.chat-anhang-feld { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chat-anhang-knopf:focus-within { outline: 2px solid var(--u-brand-text); outline-offset: 2px; }
.chat-anhaenge { display: flex; flex-wrap: wrap; gap: var(--u-s-3); margin: 0 0 var(--u-s-4); padding: 0; list-style: none; }
.chat-anhang {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-3);
  max-width: 100%;
  padding: var(--u-s-2) var(--u-s-2) var(--u-s-2) var(--u-s-4);
  border: 1px solid var(--u-border);
  border-radius: 999px;
  background: var(--u-surface-alt);
  font-size: var(--u-t-xs);
}
.chat-anhang-name { overflow: hidden; max-width: 24ch; font-weight: var(--u-w-strong); text-overflow: ellipsis; white-space: nowrap; }
.chat-anhang-groesse { color: var(--u-text-muted); font-variant-numeric: tabular-nums; }
.chat-anhang progress { width: 5rem; height: 6px; accent-color: var(--u-brand-text); }
.chat-anhang.ist-fehler { border-color: var(--u-danger); background: var(--u-danger-bg); color: var(--u-danger-fg); }
.chat-anhang.ist-fehler .chat-anhang-groesse { color: var(--u-danger-fg); }
.chat-anhang-weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--u-text-muted);
  font-size: var(--u-t-md);
  line-height: 1;
  cursor: pointer;
}
.chat-anhang-weg:hover { background: var(--u-border-soft); color: var(--u-text); }
.chat-karte.ist-ziehen { outline: 2px dashed var(--u-brand-text); outline-offset: -8px; }
.nachricht-text:empty { display: none; }
.nachricht-anhaenge { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--u-s-3); margin-top: var(--u-s-3); }
.nachricht-text:empty + .nachricht-anhaenge { margin-top: 0; }
.anhang-bild { display: block; line-height: 0; }
.anhang-bild img {
  width: auto;
  height: auto;
  max-width: 210px;
  max-height: 210px;
  border: 1px solid var(--u-border-soft);
  border-radius: var(--u-r-sm);
  object-fit: cover;
}
.anhang-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-3);
  max-width: 100%;
  padding: var(--u-s-3) var(--u-s-4);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-sm);
  background: var(--u-surface);
  color: var(--u-text);
  font-size: var(--u-t-sm);
  text-decoration: none;
}
.anhang-chip:hover { border-color: var(--u-brand-line); }
.anhang-chip-name { overflow: hidden; max-width: 28ch; font-weight: var(--u-w-strong); text-overflow: ellipsis; white-space: nowrap; }
.anhang-chip-groesse { color: var(--u-text-muted); font-size: var(--u-t-xs); }
.nachricht-mensch .anhang-chip { border-color: transparent; background: var(--u-line-on-inv); color: var(--u-text-on-inv-stark); }
.nachricht-mensch .anhang-chip-groesse { color: var(--u-text-on-inv); }

/* ── Werkzeuge eines Agentenbeitrags (19.09.2026) ──
   Ruhig, was fertig ist; das laufende Werkzeug traegt Farbe und, solange der Lauf lebt, den Puls.
   Langfassung: docs §15.31. */
.werkzeug-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-s-2) var(--u-s-6);
  margin-top: var(--u-s-4);
  padding-top: var(--u-s-3);
  border-top: 1px solid var(--u-hairline);
}
/* Ohne Text darueber (der Agent hat noch nichts geschrieben) keine Linie und kein Abstand. */
.nachricht-blase > .werkzeug-leiste:first-child,
.nachricht-text:empty + .werkzeug-leiste { margin-top: 0; padding-top: 0; border-top: 0; }
/* Je Gate eine Gruppe (ohne / über olymp2-Gate), jede mit ihrer Beschriftung. */
.werkzeug-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2) var(--u-s-3); }
.werkzeug-leiste-titel {
  margin-right: var(--u-s-1);
  color: var(--u-text-muted);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-caps);
}
/* POSITION: RELATIVE IST PFLICHT (Review 19.09.2026): ohne positionierten Vorfahren bleibt `.nur-vorlesen` an
   seiner ungescrollten Stelle und dehnt die Seite (scrollHeight 5.243 statt 854). Langfassung: docs §15.98. */
.werkzeug-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-2);
  max-width: 100%;
  padding: var(--u-s-1) var(--u-s-3);
  border-radius: var(--u-r-full);
  background: var(--u-surface-3);
  color: var(--u-text-2);
  font-size: var(--u-t-xs);
  line-height: var(--u-lh-tight);
  white-space: nowrap;
}
.werkzeug-name { overflow: hidden; max-width: 32ch; text-overflow: ellipsis; }
.werkzeug-quelle,
.werkzeug-mass { color: var(--u-text-muted); font-variant-numeric: tabular-nums; }
.werkzeug-zeichen { font-weight: var(--u-w-heavy); }
.werkzeug-chip-fertig .werkzeug-zeichen { color: var(--u-ok-fg); }
.werkzeug-chip-laeuft { background: var(--u-info-bg); color: var(--u-info-fg); font-weight: var(--u-w-strong); }
/* Quelle und Maß im laufenden Chip über das Gewicht absetzen, nicht über Deckkraft: 75 % Info-Blau auf Info-Grund
   ergaben 3,72:1, unter AA (Review 19.09.2026). */
.werkzeug-chip-laeuft .werkzeug-quelle,
.werkzeug-chip-laeuft .werkzeug-mass { color: inherit; font-weight: var(--u-w-normal); }
/* Der Punkt des laufenden Werkzeugs steht immer da; `abzeichen-puls` (nur bei lebendem Lauf) laesst ihn pulsieren. */
.werkzeug-chip-laeuft::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--u-r-full);
  background: currentColor;
}
.werkzeug-chip-fehler { background: var(--u-warn-bg); color: var(--u-warn-fg); }

/* ── Wissensbasis: Versionsvergleich und Bildvorschau ──
   Die Zeilen tragen Zeichen (−/+) UND Farbe: die Farbe allein erreicht nicht jeden. */
.vergleich td { vertical-align: top; }
.vergleich-text { font-family: var(--u-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.vergleich-zeichen { width: 2ch; text-align: center; font-family: var(--u-font-mono); }
.vergleich tbody tr.vergleich-weg { background: var(--u-danger-bg); color: var(--u-danger-fg); }
.vergleich tbody tr.vergleich-neu { background: var(--u-ok-bg); color: var(--u-ok-fg); }
.vergleich tbody tr.vergleich-luecke td { color: var(--u-text-muted); font-style: italic; }
.anhang-vorschau {
  display: block;
  max-width: 12rem;
  max-height: 8rem;
  margin-bottom: var(--u-s-2);
  border: 1px solid var(--u-border-strong);
  border-radius: var(--u-r-xs);
}

/* ── Kanban ── Spalten rollen in IHREM Behaelter (61 §13 Punkt 12); ohne Maus fuehren Pfeile, beim Ziehen ein
   Platzhalter statt Stilangabe. Langfassung: docs §15.32. */
.kanban-rahmen { overflow-x: auto; padding-bottom: var(--u-s-4); }
.kanban-spalten { display: flex; align-items: flex-start; gap: var(--u-s-6); width: max-content; min-width: 100%; }
.kanban-spalte {
  display: flex;
  flex: 0 0 18rem;
  flex-direction: column;
  gap: var(--u-s-4);
  width: 18rem;
  padding: var(--u-s-5);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface-alt);
}
.karte .kanban-spalte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3); margin: 0; }
.kanban-spalte-name { overflow-wrap: anywhere; }
.kanban-liste {
  display: flex;
  flex-direction: column;
  gap: var(--u-s-4);
  min-height: var(--u-s-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kanban-karte {
  display: flex;
  flex-direction: column;
  gap: var(--u-s-3);
  padding: var(--u-s-5) var(--u-s-6);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-sm);
  background: var(--u-surface);
  box-shadow: var(--u-e-1);
}
[data-ziehbar="1"] .kanban-karte { cursor: grab; }
.kanban-karte:focus-within { border-color: var(--u-brand-line); }
.kanban-karte p { margin: 0; }
.kanban-karte-titel { color: var(--u-text); font-weight: var(--u-w-strong); overflow-wrap: anywhere; text-decoration: none; }
.kanban-karte-titel:hover { color: var(--u-brand-text); text-decoration: underline; }
.kanban-karte-merkmale { display: flex; flex-wrap: wrap; gap: var(--u-s-2); }
.kanban-karte-leute { color: var(--u-text-muted); font-size: var(--u-t-xs); overflow-wrap: anywhere; }
.kanban-zuege { display: flex; justify-content: flex-end; gap: var(--u-s-1); }
.kanban-zuege .knopf-klein { min-height: var(--u-s-7); padding: 0 var(--u-s-3); }
.kanban-zieht { opacity: .45; }
.kanban-platzhalter {
  min-height: var(--u-s-10);
  border: 2px dashed var(--u-brand-line);
  border-radius: var(--u-r-sm);
  background: var(--u-brand-wash);
}
.kanban-ziehen-aktiv,
.kanban-ziehen-aktiv * { cursor: grabbing; user-select: none; }
.kanban-leer { margin: 0; color: var(--u-text-muted); font-size: var(--u-t-xs); text-align: center; }
.kanban-beschreibung { white-space: pre-wrap; overflow-wrap: anywhere; }
.kanban-spaltenliste { display: flex; flex-direction: column; gap: var(--u-s-4); margin: 0 0 var(--u-s-6); padding: 0; list-style: none; }
.kanban-spaltenzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--u-s-5);
  padding-bottom: var(--u-s-4);
  border-bottom: 1px solid var(--u-border-soft);
}
.kanban-kommentar { padding: var(--u-s-5) 0; border-top: 1px solid var(--u-border-soft); }
.kanban-kommentar-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--u-s-3); }


/* ── Der Gespraechswechsel ── Die zweite Regel laesst die Markierung WANDERN statt springen. Namen nur, wo
   hoechstens EIN Element trifft: ein doppelter Name bricht den Uebergang still ab. Langfassung: docs §15.34. */
#chat-haupt { view-transition-name: gespraech; }
.chat-leiste-eintrag[aria-current="page"] { view-transition-name: marke-aktuell; }

/* ── Der Weg zurueck nach unten ── der Verlauf rollt nur mit, wenn man unten STEHT; wer hochscrollt, braucht
   den Weg zurueck. Langfassung: docs §15.101. */
.chat-karte { position: relative; }
.chat-springen {
  /* Ueber der Eingabe, nicht auf ihr (Pruefbefund H1): chat.js misst den Abstand vom Verlauf bis zum
     Kartenrand (`--u-springen-unten`); `sym-winkel` zeigt schon nach unten, es wird nicht gedreht. */
  position: absolute;
  left: 50%;
  bottom: calc(var(--u-springen-unten, var(--u-s-14)) + var(--u-s-4));
  translate: -50% 0;
  z-index: var(--u-z-sticky);
  box-shadow: var(--u-e-3);
  background: var(--u-surface-hoch);
}

/* ── Zwei Belegungen, eine Aussage ── COARSE UND NICHT FINE: ein Tablet mit Tastatur behaelt Enter zum Senden;
   chat.js prueft dasselbe. Langfassung: docs §15.36. */
.nur-bei-grob { display: none; }
@media (any-pointer: coarse) and (not (any-pointer: fine)) {
  .nur-bei-fein { display: none; }
  .nur-bei-grob { display: inline; }
}

/* ── Codeblock und Tabelle im Verlauf ── Die Tabelle rollt in sich: die Seite rollt nie waagerecht
   (61 §13 Punkt 12). Der angeschnittene rechte Rand zeigt, dass es weitergeht. Langfassung: docs §15.37. */
.md-code {
  margin: var(--u-s-5) 0;
  border: 1px solid var(--u-border-soft);
  border-radius: var(--u-r-sm);
  background: var(--u-surface-alt);
  overflow: hidden;
}
.md-code-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u-s-4);
  margin: 0;
  padding: var(--u-s-2) var(--u-s-3) var(--u-s-2) var(--u-s-5);
  border-bottom: 1px solid var(--u-border-soft);
}
.md-code-sprache {
  color: var(--u-text-muted);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-caps);
  text-transform: uppercase;
  line-height: var(--u-lh-caps);
}
.md-code pre { margin: 0; border: 0; border-radius: 0; background: transparent; }
.md-tabelle { overflow-x: auto; padding-inline-end: var(--u-s-7); }
.md-tabelle:focus-visible { outline: 2px solid var(--u-brand-text); outline-offset: 2px; }
/* Diese Regel steht spaeter als der Ring fuer dunklen Grund oben und haette ihn in der
   Blase des Menschen zurueckgesetzt (1,47:1) — dort die helle Stufe (7,80:1). */
.nachricht-mensch .md-tabelle:focus-visible { outline-color: var(--u-brand-hell); }

/* ── Die Arbeitsspur ── DICHTE Stufe auch im Chat (Rollen oertlich): dreissig Schritte mit Leseluft waeren drei
   Bildschirme. Langfassung: docs §15.38. */
.spur {
  --u-d-zeile:   var(--u-s-2);
  --u-d-zeile-x: var(--u-s-5);
  --u-d-lh:      var(--u-lh-tight);
  margin-top: var(--u-s-4);
  border: 1px solid var(--u-border-soft);
  border-radius: var(--u-r-sm);
  background: var(--u-surface-alt);
  overflow: hidden;
}
.spur-kopf {
  display: flex;
  align-items: center;
  gap: var(--u-s-4);
  min-height: max(var(--u-s-9), var(--u-ziel-min));
  padding: var(--u-d-zeile) var(--u-d-zeile-x);
  cursor: pointer;
  list-style: none;
  color: var(--u-text-2);
  font-size: var(--u-t-xs);
  transition: background var(--u-dur-1) var(--u-ease);
}
.spur-kopf::-webkit-details-marker { display: none; }
.spur-kopf:hover { background: var(--u-hover); }
.spur-satz { font-variant-numeric: tabular-nums; }
.spur-auf {
  margin-left: auto;
  color: var(--u-text-muted);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-caps);
  text-transform: uppercase;
  line-height: var(--u-lh-caps);
}
.spur[open] .spur-auf::after  { content: " \25B4"; }
.spur:not([open]) .spur-auf::after { content: " \25BE"; }
.spur-punkt { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--u-text-muted); }
.spur-punkt-laeuft { background: var(--u-info); }
.spur-punkt-fehler { background: var(--u-danger); }
.spur-punkt-fertig { background: var(--u-ok); }
.spur-hinweis { margin: 0; padding: var(--u-s-3) var(--u-d-zeile-x); border-top: 1px solid var(--u-hairline); font-size: var(--u-t-2xs); }
.spur-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--u-border-soft); }
.spur-schritt {
  /* POSITION: RELATIVE IST PFLICHT, wie am Werkzeug-Chip: sonst dehnt `.nur-vorlesen` die Seite, bei dreissig
     Schritten je Beitrag dreissigmal. Langfassung: docs §15.103. */
  position: relative;
  display: grid;
  /* DIE BALKENSPALTE BRAUCHT BREITE, sonst ist sie keine Zeitachse, sondern ein Strich: bei
     72 Pixeln lagen zwischen 5 und 10 Prozent noch vier Pixel. Am Bild gemessen, nicht geschaetzt. */
  grid-template-columns: 14px 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--u-s-4);
  padding: var(--u-d-zeile) var(--u-d-zeile-x);
  border-top: 1px solid var(--u-hairline);
  font-size: var(--u-t-xs);
  line-height: var(--u-d-lh);
}
.spur-schritt:first-child { border-top: 0; }
.spur-flach .spur-schritt { grid-template-columns: 14px minmax(0, 1fr) auto; }
.spur-marke { text-align: center; font-weight: var(--u-w-heavy); font-size: var(--u-t-2xs); }
.spur-fertig .spur-marke { color: var(--u-ok-fg); }
.spur-fehler .spur-marke { color: var(--u-danger-fg); }
.spur-wartet .spur-marke { color: var(--u-warn-fg); }
.spur-laeuft .spur-marke { color: var(--u-info-fg); }
.spur-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spur-quelle { color: var(--u-text-muted); }
/* „ohne Gate" ist eine Aussage ueber Rechte und darum eine WARNUNG, keine Nebenbemerkung. */
.spur-fremd {
  margin-left: var(--u-s-2);
  padding: 0 var(--u-s-3);
  border-radius: var(--u-r-full);
  background: var(--u-warn-bg);
  color: var(--u-warn-fg);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-strong);
  white-space: nowrap;
}
.spur-mass { color: var(--u-text-muted); font-size: var(--u-t-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* DER BALKEN IN FUENF-PROZENT-SCHRITTEN: Stilangaben am Element verwirft die Inhaltsrichtlinie (13e), daher
   Rasterklassen — kein Aufraeumfall. Langfassung: docs §15.39. */
.spur-balken { position: relative; height: 6px; border-radius: 3px; background: var(--u-surface-3); }
.spur-balken::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5%; border-radius: 3px; background: var(--u-text-muted); }
.spur-fertig .spur-balken::after { background: var(--u-ok); }
.spur-fehler .spur-balken::after { background: var(--u-danger); }
.spur-wartet .spur-balken::after { background: var(--u-warn); }
.spur-laeuft .spur-balken::after { background: var(--u-info); }
.spur-l0::after { left: 0%; }
.spur-l5::after { left: 5%; }
.spur-l10::after { left: 10%; }
.spur-l15::after { left: 15%; }
.spur-l20::after { left: 20%; }
.spur-l25::after { left: 25%; }
.spur-l30::after { left: 30%; }
.spur-l35::after { left: 35%; }
.spur-l40::after { left: 40%; }
.spur-l45::after { left: 45%; }
.spur-l50::after { left: 50%; }
.spur-l55::after { left: 55%; }
.spur-l60::after { left: 60%; }
.spur-l65::after { left: 65%; }
.spur-l70::after { left: 70%; }
.spur-l75::after { left: 75%; }
.spur-l80::after { left: 80%; }
.spur-l85::after { left: 85%; }
.spur-l90::after { left: 90%; }
.spur-l95::after { left: 95%; }
.spur-b5::after { width: 5%; }
.spur-b10::after { width: 10%; }
.spur-b15::after { width: 15%; }
.spur-b20::after { width: 20%; }
.spur-b25::after { width: 25%; }
.spur-b30::after { width: 30%; }
.spur-b35::after { width: 35%; }
.spur-b40::after { width: 40%; }
.spur-b45::after { width: 45%; }
.spur-b50::after { width: 50%; }
.spur-b55::after { width: 55%; }
.spur-b60::after { width: 60%; }
.spur-b65::after { width: 65%; }
.spur-b70::after { width: 70%; }
.spur-b75::after { width: 75%; }
.spur-b80::after { width: 80%; }
.spur-b85::after { width: 85%; }
.spur-b90::after { width: 90%; }
.spur-b95::after { width: 95%; }

/* ── Was die Huelle an Hoehe wegnimmt ── eine Rolle statt einer Zahl in der Rechnung der Chatflaeche; glas
   setzt sie neu. Langfassung: docs §15.40. */
:root { --u-rahmen-h: 7.5rem; }

/* ── Felder unter dem Daumen ── 16 px fuers Daumentippen, nur bei grobem Zeiger; der Schreibtisch behaelt 14
   (61 §11 Punkt 3). Langfassung: docs §15.41. */
@media (any-pointer: coarse) {
  .inhalt :where(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
    font-size: var(--u-t-feld);
  }
}

/* ── Der Schirm ── EIN Element fuer alles, was ueber der Seite liegt: zwei Abdunklungen uebereinander waeren
   doppelt so dunkel. Langfassung: docs §15.104. */
.schirm {
  position: fixed;
  inset: 0;
  z-index: var(--u-z-scrim);
  background: var(--u-surface-inv);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--u-dur-3) var(--u-ease);
}
[data-chatleiste="auf"] .schirm,
[data-ebene="auf"] .schirm { opacity: .55; pointer-events: auto; }
/* Die Dock-Reserve (`--u-dock-h`) hob bis H1 Toast und Fokus ueber das Dock; seit der Huelle „ERP“ gibt es kein Dock, sie
   bleibt 0 (der Haken bleibt fuer ein Fenster am unteren Rand, H3). Langfassung: docs §15.139. */
:root { --u-dock-h: 0px; --u-fensterleiste-h: 0px; }
/* Q5 (Rahmen): mit Dock und Fensterleiste tragen beide Rollen ihre Höhe — die Fensterhöhe, Toasts und die Chat-Ebene rechnen damit. */
:root[data-huelle="glas"]:has(> body > .rdock) { --u-dock-h: calc(3.5rem + var(--u-s-6)); }
:root[data-huelle="glas"]:has(> body > .rdock[data-auto]) { --u-dock-h: var(--u-s-3); }
:root[data-huelle="glas"]:has(.kopfleiste > .fensterleiste) { --u-fensterleiste-h: 2.25rem; }
/* Die Kulisse je Thema (Einstellung oberflaeche.kulisse je Mandant, data-kulisse am <html>): je Thema ein Bildpaar Tag/Abend. */
:root[data-kulisse="telekom"] { --u-kulisse-tag: url("/assets/design/kulisse-telekom-tag.webp"); --u-kulisse-abend: url("/assets/design/kulisse-telekom-abend.webp"); }
.inhalt { padding-bottom: calc(var(--u-d-rand) + var(--u-dock-h)); }
.toast-stapel { bottom: calc(var(--u-s-8) + var(--u-dock-h)); }
html { scroll-padding-bottom: var(--u-dock-h); }

/* ── Touch-Hygiene ── touch-action nie global (in der App bliebe die Tastatur aus), overscroll-behavior am rollenden
   Element, Tipp-Hervorhebung nur mit :active. Langfassung: docs §15.43. */
.knopf,
.filter-wahl,
.zeilenmenue > summary,
.chat-leiste-eintrag,
.zeilenmenue-punkt,
.spur-kopf,
.tabelle td a {
  touch-action: manipulation;
}
#chat-verlauf, [data-chat-teil="verlauf"], .chat-leiste-liste, .tabelle-rahmen, .md-tabelle {
  overscroll-behavior: contain;
}
body { overscroll-behavior-y: contain; }

@media (hover: none) {
  .knopf,
  .filter-wahl,
  .zeilenmenue > summary,
  .chat-leiste-eintrag,
  .zeilenmenue-punkt,
  .spur-kopf {
    -webkit-tap-highlight-color: transparent;
  }
  /* Die eigene Antwort, ohne die das Abschalten oben ein Rueckschritt waere. */
  .filter-wahl:active,
  .chat-leiste-eintrag:active,
  .zeilenmenue-punkt:active,
  .spur-kopf:active {
    background: var(--u-hover);
  }
  .knopf:active, .zeilenmenue > summary:active { translate: 0 1px; }
}

/* APP-SCHALE — was nur die Offline-Seite und der Fassungs-Toast brauchen; angehaengt, nicht eingeschoben.
   Langfassung: docs §15.140. */

/* EIN TOAST, DER BLEIBT: „Eine neue Fassung liegt bereit" ist eine Frage und darf nicht verschwinden; nur die
   zweite Bewegung fehlt. Langfassung: docs §15.105. */
.toast-bleibt { animation: toast-an var(--u-dur-3) var(--u-ease-play); }

/* DIE OFFLINE-SEITE steht ohne Rahmen (auch mit Sitzung) und braucht deshalb ihre eigene Breitenbegrenzung.
   Langfassung: docs §15.141. */
.offline {
  max-width: 34rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u-s-6);
  text-align: center;
}
.offline .marke-zeichen { flex: none; }
/* Die Karte darin traegt Fliesstext: zentriert gesetzte Aufzaehlungen liest niemand gern. */
.offline .karte { width: 100%; text-align: start; }
.offline-liste { margin: 0; padding-inline-start: var(--u-s-6); }
.offline-liste li + li { margin-top: var(--u-s-3); }

/* BEARBEITBAR MUSS OHNE ZEIGER AUSSEHEN WIE BEARBEITBAR: am Telefon fehlen Zeiger, Schwebeton und `title`.
   Langfassung: docs §15.45. */
@media (hover: none) {
  .chat-kopf-thema[data-oeffnet],
  .chat-kopf-themawahl[data-oeffnet] {
    text-decoration: underline dashed var(--u-hairline-strong);
    text-underline-offset: 3px;
  }
}

/* DIE TABELLE ALS KARTENSTAPEL (Inhalt < 44rem): Querrollen verlor die erste Spalte, die die Zeile benennt; `role`
   im Baustein haelt die Semantik. Langfassung: docs §15.46. */
@container inhalt (width < 44rem) {
  .tabelle-rahmen {
    overflow-x: visible;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: auto; }
  /* Die Kopfzeile steht ab hier in jeder Zelle; die Sortierung entfaellt am Telefon. Langfassung: docs §15.142. */
  .tabelle thead { display: none; }
  .tabelle tbody tr {
    margin-bottom: var(--u-s-4);
    border: 1px solid var(--u-border);
    border-radius: var(--u-r-md);
    background: var(--u-surface);
    box-shadow: var(--u-e-2);
  }
  /* Zebra und Schweben gehoeren zur ZEILE in einer Tabelle; zwischen Karten waere beides
     Unruhe, und der Schwebeton traefe am Telefon ohnehin nie. */
  .tabelle tbody tr:nth-child(even) { background: var(--u-surface); }
  .tabelle tbody tr:last-child td { border-bottom: none; }
  .tabelle td {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: var(--u-s-2) var(--u-s-4);
    align-items: baseline;
    text-align: start;
  }
  .tabelle td::before {
    content: attr(data-titel);
    color: var(--u-text-2);
    font-size: var(--u-t-xs);
  }
  /* Eine Zelle ohne Inhalt bekaeme sonst eine Beschriftung und stuende als „Aktion —"
     herum. Welche leer ist, entscheiden die Daten im Baustein, nicht `:empty`. */
  .tabelle .tabelle-zelle-leer { display: none; }
  /* Rechtsbuendig war eine Aussage ueber die SPALTE. Ohne Spalte ist sie keine mehr —
     die Ziffernbreite bleibt, die Ausrichtung geht zurueck an den Anfang. */
  .tabelle-zahl { text-align: start; }
  /* Die zweite Zeile einer Zelle rutscht unter den WERT, nicht unter die Beschriftung. */
  .tabelle td .zelle-unter { grid-column: 2; }
  .tabelle td .knopfreihe { grid-column: 2; }
}

/* MELDUNGEN: die Geraeteliste im Profil.
   NICHT `.kette`: die legt ihre Eintraege waagerecht nebeneinander (`display: flex`), und
   hier steht unter jedem Geraet eine Reihe Schalter und zwei Knoepfe. */
.push-geraete { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--u-s-6); }
.push-geraete > li {
  display: flex;
  flex-direction: column;
  gap: var(--u-s-4);
  padding-top: var(--u-s-6);
  border-top: 1px solid var(--u-border-soft);
}
.push-geraete > li:first-child { padding-top: 0; border-top: none; }
.push-geraete p { margin: 0; display: flex; align-items: center; gap: var(--u-s-3); flex-wrap: wrap; }

/* `.feld-wahl` stand ab 14.09.2026 im Markup, ohne dass das Stilblatt sie kannte (13d zaehlt nur rohe Knoepfe
   und Tabellen). Hier steht sie einmal, fuer beide Stellen. Langfassung: docs §15.106. */
.feld-wahl {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-3);
  min-height: max(var(--u-s-8), var(--u-ziel-min));
  font-size: var(--u-t-md);
  cursor: pointer;
}
.feld-wahl input[type="checkbox"] { width: var(--u-s-6); height: var(--u-s-6); accent-color: var(--u-brand-text); flex: none; }

/* ══ EINGANG ══ (P3-B) Gast-Seiten ohne Huelle: die Anmeldung als helle Papierkarte auf dem Bild der Lobby, die
   Gast-Fehlerseite als dieselbe Karte auf Papier. Jede Regel beginnt mit `:root:not([data-huelle])` — eine Gast-Seite
   traegt nie `data-huelle`, und angemeldet gilt hier nichts. Langfassung: docs/oberflaeche-huelle.md §1c. */
/* Mitte aus zwei dehnbaren Platzhaltern statt `justify-content`: ist die Spalte hoeher als das Fenster, sind sie 0. */
:root:not([data-huelle]) body:has(.eingang) {
  display: flex; flex-direction: column; align-items: center; min-height: 100svh; isolation: isolate;
}
:root:not([data-huelle]) body:has(.eingang)::before,
:root:not([data-huelle]) body:has(.eingang)::after { content: ""; flex: 1 0 0; }
:root:not([data-huelle]) body:has(.eingang) > .inhalt { position: relative; }
/* Das Zeichen anderthalbfach; der Radius bleibt an --u-r-marke gepinnt. */
:root:not([data-huelle]) :is(.eingang, .karte-fehler[data-leer]) {
  width: min(26rem, 100%); margin: 0 auto; padding: clamp(var(--u-s-7), 8cqi, var(--u-s-10));
  border: 1px solid var(--u-border); border-radius: var(--u-r-xl); background: var(--u-surface-hoch);
  box-shadow: var(--u-e-3);
}
:root:not([data-huelle]) .eingang h1 { margin-bottom: var(--u-s-6); }
:root:not([data-huelle]) .eingang .knopfreihe { margin-top: var(--u-s-4); }
:root:not([data-huelle]) .eingang .knopf-haupt { width: 100%; }
:root:not([data-huelle]) body:has(.eingang) .inhalt > .streifen { width: min(26rem, 100%); margin-inline: auto; }
/* Gast-Fehlerseite: die Ordnung des Leerzustands, dessen Regeln den Glas-Vorsatz tragen. */
:root:not([data-huelle]) .karte-fehler[data-leer] {
  width: min(30rem, 100%); margin: var(--u-s-14) auto; text-align: center;
}
:root:not([data-huelle]) .karte-fehler[data-leer] > h2 { justify-content: center; font-size: var(--u-t-xl); }
:root:not([data-huelle]) .karte-fehler .leer-symbol {
  display: block; width: var(--u-s-10); height: var(--u-s-10); margin: 0 auto var(--u-s-5); color: var(--u-text-2);
}
/* Am Telefon der Weg ueber die volle Breite wie im Glas-Leerzustand (dessen Regel darf als INHALT V2 nur Glas, 29i). */
@container inhalt (width < 44rem) {
  :root:not([data-huelle]) .karte-fehler[data-leer] .leer-weg > .knopf { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  /* Der Hauptknopf hat keinen Rand (`border: 0`) — ohne Verlauf stuende er als nackter Text da; /offline ebenso (E19 e). */
  :root:not([data-huelle]) :is(.eingang, .offline) .knopf-haupt { border: 1px solid ButtonText; }
}
/* ══ ENDE EINGANG ══ */

/* ══ DIE HUELLE (seit Phase 2; seit H1 die Huelle „ERP“, die Kopfleiste steht in huelle.css) ══
   Jede Regel beginnt mit `:root[data-huelle="glas"]`, in jedem Listenteil — ausser den `:root[lang]`-Regeln des
   schmalen Chats (34a). Das Attribut steht nur angemeldet, Gast-Seiten bleiben rahmenlos. DREI REGELN AUS DER KRITIK:
   1. `main` IST KEIN GLAS [K 1]: nichts, was es zum Bezugsrahmen fuer `position: fixed` oder zum Stapelkontext
      macht (26m).
   2. KEIN `contain: paint` AN `.glas` [K 2]: Aufklapper muessen ueber den Rand.
   3. WEICHZEICHNER NUR AN `.glas`/`.glas-2` (13v); kein Glas im Glas (26c). Glas steht seit H1 nur noch an Resten im
      Inhalt (H4 baut sie ab).
   Langfassung: docs §15.47. */

/* Rahmenrollen [K 10, 14]: aus `--u-rahmen-h` rechnet die Chatflaeche ihre Hoehe — seit H1 Kopfleiste, Polsterung des
   Inhaltsrahmens und die h1-Zeile (kein Dock mehr). Langfassung: docs §15.48. */
:root[data-huelle="glas"] {
  --u-rahmen-h: calc(var(--u-topbar-h) + var(--u-s-6) + var(--u-glasfenster-kopf-h) + var(--u-s-8));
  scroll-padding-top: calc(var(--u-topbar-h) + var(--u-s-4));
}

/* ── Glas ──
   Erst der FESTE Grund (13v), dann der Weichzeichner nur im @supports, nie bei „Glas aus" oder „Ruhe"
   (:not(), keine allgemeine `backdrop-filter: none`-Regel; nur der Geraetewunsch nimmt ihn im Block darunter
   zurueck). Langfassung: docs §15.50. */
:root[data-huelle="glas"] .glas,
:root[data-huelle="glas"] .raum-kopf {
  background: var(--u-glas-1-fest);
  border: 1px solid var(--u-glas-kante);
  border-radius: var(--u-r-glas);
  box-shadow: var(--u-e-glas), inset 0 1px 0 var(--u-glas-schein);
  color: var(--u-text);
}
:root[data-huelle="glas"] .glas-2 {
  background: var(--u-glas-2-fest);
  border: 1px solid var(--u-glas-kante);
  border-radius: var(--u-r-glas);
  box-shadow: var(--u-e-glas), inset 0 1px 0 var(--u-glas-schein);
  color: var(--u-text);
}
:root[data-huelle="glas"]:not([data-glas="aus"]):not([data-ruhe="an"]) .glas { background: var(--u-glas-1-fest); }
:root[data-huelle="glas"]:not([data-glas="aus"]):not([data-ruhe="an"]) .glas-2 { background: var(--u-glas-2-fest); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root[data-huelle="glas"]:not([data-glas="aus"]):not([data-ruhe="an"]) .glas {
    background: var(--u-glas-1);
    -webkit-backdrop-filter: blur(var(--u-glas-blur)) saturate(var(--u-glas-saettigung));
    backdrop-filter: blur(var(--u-glas-blur)) saturate(var(--u-glas-saettigung));
  }
  :root[data-huelle="glas"]:not([data-glas="aus"]):not([data-ruhe="an"]) .glas-2 {
    background: var(--u-glas-2);
    -webkit-backdrop-filter: blur(var(--u-glas-blur)) saturate(var(--u-glas-saettigung));
    backdrop-filter: blur(var(--u-glas-blur)) saturate(var(--u-glas-saettigung));
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    :root[data-huelle="glas"]:not([data-glas="aus"]):not([data-ruhe="an"]) .glas {
      background: var(--u-glas-1-fest);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    :root[data-huelle="glas"]:not([data-glas="aus"]):not([data-ruhe="an"]) .glas-2 {
      background: var(--u-glas-2-fest);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}
/* Erzwungene Farben: das System malt, Glas und Schatten waeren nur Rauschen (26j). */
@media (forced-colors: active) {
  :root[data-huelle="glas"] .glas,
  :root[data-huelle="glas"] .glas-2,
  :root[data-huelle="glas"] main.glasfenster,
  :root[data-huelle="glas"] .raum-kopf {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }
}

/* ── Inhaltsrahmen ── [K 1, 36, 39] seit H1 OHNE GLAS (die Klassen `glasfenster` blieben, damit das Markup jeder Seite
   Byte fuer Byte bleibt): der Inhalt steht direkt auf dem dunklen Grund unter der Kopfleiste, ueber die volle Breite, mit
   den Raendern von M1-B; die Karten darin tragen die Flaeche. `position: relative` OHNE z-index, kein Stapelkontext (26m).
   Langfassung: docs §15.53. */
:root[data-huelle="glas"] main.glasfenster {
  position: relative;
  width: 100%;
  max-width: var(--u-inhalt-max);
  margin: 0 auto;
  padding: var(--u-s-6) var(--u-s-8) var(--u-s-8);
  color: var(--u-text);
}
:root[data-huelle="glas"] .glasfenster-koerper { color: var(--u-text); }
/* Der Fokus kommt beim Seitenwechsel programmgesteuert (Schritt 3) — dort kein Ring um den ganzen
   Rahmen bzw. den Raum; mit der Tastatur bleibt er. */
:root[data-huelle="glas"] main.glasfenster:focus:not(:focus-visible),
:root[data-huelle="glas"] main.raum:focus:not(:focus-visible) { outline: none; }
/* Die h1-Zeile hat eine FESTE Hoehe, damit `--u-rahmen-h` stimmt: einzeilig, mit Auslassung. */
:root[data-huelle="glas"] .glasfenster-titel {
  block-size: calc(var(--u-glasfenster-kopf-h) - var(--u-s-4));
  margin: 0 0 var(--u-s-4);
  padding-inline: var(--u-s-2);
  overflow: hidden;
  color: var(--u-text);
  font-family: var(--u-font-display);
  font-size: var(--u-t-2xl);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-tight);
  line-height: calc(var(--u-glasfenster-kopf-h) - var(--u-s-4));
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* AUF EINER AKTE (H4, Akten-Rahmen des ERP) steht der Name sichtbar im Kopf der Akte; das h1 bleibt fuer Vorleser (Vorlese-Muster). */
:root[data-huelle="glas"] .glasfenster-koerper:has(> .akte:not(.akte-panel), > .start > :first-child:not(.start-alle)) > .glasfenster-titel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* main.raum (P4-E): kein Fenster, das Raster und der Raumkopf sind Kinder (Block RAUM); `position: relative` OHNE z-index,
   kein Stapelkontext (26m). (Bis H1 stand hier auch main.lobby.) */
:root[data-huelle="glas"] main.raum { position: relative; margin-inline: auto; }
/* VOLLE BREITE (M1-B): Fenster und Raum ohne Deckel, die Raender bleiben; die Lesebreite tragen Fliesstext,
   Hilfe, Wertepaare, die Einordnung im Seitenkopf und Formularreihen selbst. Langfassung: docs §15.179. */
:root[data-huelle="glas"] main.glasfenster :where(.glasfenster-koerper, .karte, .streifen, .streifen > div, .ausschluss, .filterzeile)
  > :where(p:not([class]), p.leise, p.mono, p.feld-hilfe, dl.paare, ul.kette, .nachricht-text) { max-width: var(--u-lesebreite); }
:root[data-huelle="glas"] main.glasfenster .seitenkopf .einordnung { max-width: var(--u-lesebreite); }
:root[data-huelle="glas"] main.glasfenster .karte > .formular-reihe { max-width: 48rem; }

/* ── Chat-Ebene (P4-M) ── docs §21e. */
:root[data-huelle="glas"] .chat-ebene { position: fixed; right: var(--u-s-5); bottom: calc(var(--u-s-4) + env(safe-area-inset-bottom)); z-index: var(--u-z-widget); display: flex; flex-direction: column; align-items: flex-end; max-inline-size: calc(50% - 10.5rem - var(--u-s-8)); }
:root[data-huelle="glas"] .ebene-blatt { position: absolute; right: 0; bottom: calc(100% + var(--u-s-3)); display: flex; flex-direction: column; padding: var(--u-s-3); inline-size: min(26rem, calc(100vw - var(--u-s-8))); block-size: min(44rem, calc(.7 * var(--u-sicht-h)), calc(var(--u-sicht-h) - var(--u-topbar-h) - var(--u-dock-h) - var(--u-s-6))); }
:root[data-huelle="glas"]:has(.raum-raster) .ebene-blatt { right: var(--ebene-versatz, 0px); }
:root[data-huelle="glas"] .toast-stapel { right: max(var(--u-s-8), var(--u-ebene-b)); bottom: calc(var(--u-s-8) + var(--u-dock-h) + var(--u-ebene-h)); }

/* ── Bewegung ── jede Strecke am Faktor `--u-bewegung` (bis H1 flogen hier Dock und Pille beim ersten Aufbau ein).
   Langfassung: docs §15.145. */
/* ── Chat im schmalen Glasfenster ── unter 44rem (17) Kopf umbrochen, Textfeld ueber der Knopfreihe; `:root[lang]`
   haelt 0,3,1 (34a). Langfassung: docs §15.56. */
/* Das Kopfmenue ist in JEDER Breite ein Tipp-Ziel (Pruefbefund 24.09.2026: Tablet 820 px mit Touch mass 32×32).
   Mit Maus ist `--u-ziel-min` 0 — der Schreibtisch behaelt seine 32 px. Nur glas. */
:root[data-huelle="glas"] .chat-kopfzeile > .zeilenmenue > summary {
  width: max(var(--u-s-10), var(--u-ziel-min));
  height: max(var(--u-s-10), var(--u-ziel-min));
}
@container inhalt (width < 44rem) {
  :root[lang] .chat-karte > .chat-kopfzeile { flex-wrap: wrap; gap: var(--u-s-3) var(--u-s-4); }
  :root[lang] .chat-kopfzeile .chat-kopf-avatar { width: 40px; height: 40px; }
  :root[lang] .chat-kopfzeile span.chat-kopf-avatar { font-size: var(--u-t-md); }
  :root[lang] .chat-kopfzeile .chat-kopf-titel { flex: 1 1 0; min-width: 0; }
  :root[lang] .chat-kopfzeile .chat-kopfzeile-name { font-size: var(--u-t-lg); }
  /* Die Unterzeile bricht zwischen ihren TEILEN um, nie im Teil: jedes Teil hoechstens so breit wie die Spalte. */
  :root[lang] .chat-kopf-unter { gap: var(--u-s-2) var(--u-s-3); }
  :root[lang] .chat-kopf-unter > * { min-width: 0; max-width: 100%; }
  :root[lang] .chat-kopf-unter > .chat-kopf-mandant { overflow: hidden; white-space: nowrap; }
  /* Der Zeilenumbrecher: volle Breite, keine Hoehe — Modell, Agent und Menue rutschen in die zweite Zeile. */
  :root[lang] .chat-kopfzeile > .chat-kopfzeile-frei { flex: 0 0 100%; height: 0; }
  :root[lang] .chat-kopfzeile > .chat-kopf-modell { flex: 1 1 0; min-width: 0; }
  :root[lang] .chat-kopf-modell > .abzeichen {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :root[lang] .chat-kopfzeile-frei + .zeilenmenue { margin-left: auto; }
  /* Die Eingabe: das Feld oben ueber die volle Breite (Mindesthoehe bleibt), darunter Klammer, Schalter, Senden. */
  :root[lang] .chat-eingabe-reihe { flex-wrap: wrap; align-items: center; gap: var(--u-s-4); }
  :root[lang] .chat-eingabe-reihe textarea { flex: 1 1 100%; }
  :root[lang] .chat-eingabe-reihe .chat-anhang-knopf {
    min-width: max(var(--u-s-12), var(--u-ziel-min));
    min-height: max(var(--u-s-12), var(--u-ziel-min));
  }
  :root[lang] .chat-eingabe-reihe .plan-schalter {
    justify-content: center;
    min-width: max(var(--u-s-12), var(--u-ziel-min));
    min-height: max(var(--u-s-12), var(--u-ziel-min));
  }
  :root[lang] .chat-eingabe-reihe .chat-senden {
    min-height: max(var(--u-s-12), var(--u-ziel-min));
    margin-left: auto;
  }
}

/* ══ INHALT V2 (Phase 2b „Inhaltsbausteine") ══ Die Bausteine der Glas-Huelle (S1–S7). Regeln (29i, 35a–35g):
   1. Jede Regel beginnt mit `:root[data-huelle="glas"]`, in jedem Listenteil.
   2. Kein `container`, kein `backdrop-filter`; umgeschaltet wird ueber `@container inhalt` (17).
   3. main / .inhalt / .glasfenster-koerper als Vorfahr nur im HUD (35b): Raum-Panels in Phase 4.
   4. Animation nur `huelle-*`; Strecke, Dauer, Verzoegerung × var(--u-bewegung) (26g, 35f).
   5. Nur `--u-*`-Rollen (35a); `--u-text-muted` nie (26h), Neon, Glow, Zustandsgrau nie als Schrift (29h).
   6. Ziele max(var(--u-s-8), var(--u-ziel-min)).
   7. Flaechen malende Pseudo-Elemente stehen im Block fuer erzwungene Farben (35c).
   8. BUDGET (35g): `olymp.css` hoechstens `PI35_BYTES_MAX` Bytes, gepackt hoechstens `PI35_GZ_MAX`.
   Langfassung: docs §15.57. */

/* ── HUD am Glasfenster (v4 §11.4) — Seitenregel ── Verlaufskante (::before, per Maske) und Eckklammern (::after);
   ohne filter/transform/z-index (26m). Langfassung: docs §15. */
:root[data-huelle="glas"] .raum-kopf::after,
:root[data-huelle="glas"] .begleiter-karte::after {
  content: "";
  position: absolute;
  inset: var(--u-s-2);
  background:
    linear-gradient(var(--u-neon-petrol), var(--u-neon-petrol)) top left / 14px 2px no-repeat,
    linear-gradient(var(--u-neon-petrol), var(--u-neon-petrol)) top left / 2px 14px no-repeat,
    linear-gradient(var(--u-neon-violett), var(--u-neon-violett)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--u-neon-violett), var(--u-neon-violett)) bottom right / 2px 14px no-repeat;
  pointer-events: none;
}

/* ── Knoepfe (seit H4 im ERP-Stil, Entwurf J/H) ── Satzschrift statt HUD-Versal; der Hauptknopf eine ruhige Markenflaeche ohne
   Glanz und Schein, Nebenknoepfe mit feiner Kante, beim Zeigen nur die Flaeche; umbrechend. Langfassung: docs §6, §15. */
:root[data-huelle="glas"] .knopf {
  max-width: 100%;
  border-radius: var(--u-r-sm);
  font-weight: var(--u-w-strong);
  text-align: center;
  white-space: normal;
}
:root[data-huelle="glas"] .knopf-haupt { background: var(--u-knopf-haupt); color: var(--u-knopf-haupt-text); }
@media (hover: hover) {
  :root[data-huelle="glas"] .knopf-haupt:where(:not(:disabled)):hover { background: var(--u-knopf-haupt-hover); color: var(--u-knopf-haupt-text); }
  :root[data-huelle="glas"] .knopf:not(.knopf-haupt, .knopf-gefahr, .knopf-leise):where(:not(:disabled)):hover { border-color: var(--u-border-strong); background: var(--u-hover); }
}
/* Die Pfeilknoepfe im Kanban (Basisregel `--u-s-7` hoch) sind in HUD-Schrift schmaler geworden (↑ 23 → 20 px):
   Zielgroesse wie ueberall, 24 px am feinen Zeiger (2.5.8), 48 px am Finger. */
:root[data-huelle="glas"] .kanban-zuege .knopf-klein {
  min-width: max(var(--u-s-8), var(--u-ziel-min));
  min-height: max(var(--u-s-8), var(--u-ziel-min));
  font-family: var(--u-font-body);
  font-size: var(--u-t-lg);
  line-height: 1;
}

/* ── Abzeichen (seit H4 als Pille, Entwurf J `.st`) ── runde getoente Pille in Satzschrift; Varianten setzen nur
   `--u-abz-bg`/`--u-abz-fg` (14-hell); den Zustandspunkt davor setzt die Basisregel.
   Langfassung: docs §6, §15. */
:root[data-huelle="glas"] .abzeichen {
  --u-abz-bg: var(--u-surface-3);
  --u-abz-fg: var(--u-text-2);
  border-radius: var(--u-r-full);
  background: var(--u-abz-bg);
  color: var(--u-abz-fg);
  font-weight: var(--u-w-strong);
}
:root[data-huelle="glas"] .abzeichen-neutral,
:root[data-huelle="glas"] .abzeichen-bereich-0 { --u-abz-bg: var(--u-surface-3); --u-abz-fg: var(--u-text-2); }
:root[data-huelle="glas"] .abzeichen-gut     { --u-abz-bg: var(--u-ok-bg);     --u-abz-fg: var(--u-ok-fg); }
:root[data-huelle="glas"] .abzeichen-warn    { --u-abz-bg: var(--u-warn-bg);   --u-abz-fg: var(--u-warn-fg); }
:root[data-huelle="glas"] .abzeichen-gefahr  { --u-abz-bg: var(--u-danger-bg); --u-abz-fg: var(--u-danger-fg); }
:root[data-huelle="glas"] .abzeichen-hinweis { --u-abz-bg: var(--u-info-bg);   --u-abz-fg: var(--u-info-fg); }
:root[data-huelle="glas"] .abzeichen-bereich-1 { --u-abz-bg: var(--u-bereich-1-bg); --u-abz-fg: var(--u-bereich-1-fg); }
:root[data-huelle="glas"] .abzeichen-bereich-2 { --u-abz-bg: var(--u-bereich-2-bg); --u-abz-fg: var(--u-bereich-2-fg); }
:root[data-huelle="glas"] .abzeichen-bereich-3 { --u-abz-bg: var(--u-bereich-3-bg); --u-abz-fg: var(--u-bereich-3-fg); }
:root[data-huelle="glas"] .abzeichen-bereich-4 { --u-abz-bg: var(--u-bereich-4-bg); --u-abz-fg: var(--u-bereich-4-fg); }
:root[data-huelle="glas"] .abzeichen-bereich-5 { --u-abz-bg: var(--u-bereich-5-bg); --u-abz-fg: var(--u-bereich-5-fg); }
:root[data-huelle="glas"] .abzeichen-bereich-6 { --u-abz-bg: var(--u-bereich-6-bg); --u-abz-fg: var(--u-bereich-6-fg); }
:root[data-huelle="glas"] .abzeichen-marke,
:root[data-huelle="glas"] .abzeichen-plan {
  --u-abz-bg: var(--u-brand-wash-deckend);
  --u-abz-fg: var(--u-brand-text);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Karten und Kennwerte (seit H4 ruhig) ── Titel umbrechend; die Kennzahl ohne Neonstrich und ohne Hub, die Zahl in der
   Anzeigeschrift ueber `12cqi` begrenzt (§13.8). Langfassung: docs §6, §15. */
:root[data-huelle="glas"] .karte > h2 {
  flex-wrap: wrap;
  font-size: var(--u-t-lg);
  letter-spacing: var(--u-track-tight);
  overflow-wrap: anywhere;
}
:root[data-huelle="glas"] .kennwert::after { content: none; }
:root[data-huelle="glas"] .kennwert-name { color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .kennwert-zahl { font-family: var(--u-font-display); font-size: min(var(--u-t-kpi), 12cqi); letter-spacing: 0; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .kennwert-unter { color: var(--u-text-2); }

/* ── Paare, Kette, Pfad, gedaempfte Schrift (seit H4 in Satzschrift) ── Etiketten in `--u-text-2`; Paare: Etikett hoechstens
   40 %, der Wert bricht nur Woerter. Langfassung: docs §6, §15. */
:root[data-huelle="glas"] .paare dt { color: var(--u-text-2); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .paare { grid-template-columns: fit-content(40%) minmax(0, 1fr); }
:root[data-huelle="glas"] .paare dd { overflow-wrap: break-word; }
:root[data-huelle="glas"] .kette-stufe {
  padding: 0 var(--u-s-3);
  border-radius: var(--u-r-xs);
  background: var(--u-surface-3);
  color: var(--u-text-2);
  font-weight: var(--u-w-strong);
  font-variant-numeric: tabular-nums;
}
:root[data-huelle="glas"] .brotkrumen { color: var(--u-text-2); }
:root[data-huelle="glas"] .brotkrumen a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: max(var(--u-s-8), var(--u-ziel-min));
  min-height: max(var(--u-s-8), var(--u-ziel-min));
  overflow-wrap: anywhere;
  vertical-align: middle;
}
:root[data-huelle="glas"] .leise,
:root[data-huelle="glas"] .seitenkopf .einordnung { color: var(--u-text-2); }

/* ── Seitenkopf ── Die Augenbraue (`etikett`) steht als eigene leise Zeile unter dem h1 (seit H4 ohne Neonstrich, in
   Satzschrift). Langfassung: docs §15.146. */
:root[data-huelle="glas"] .seitenkopf-etikett {
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  gap: var(--u-s-3);
  margin: 0;
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-caps);
}
:root[data-huelle="glas"] .seitenkopf-etikett .sym { width: 14px; height: 14px; }

/* ── Leerzustand (v4 §4.15) ── gestrichelt, Symbol, Titel, Wege; Text mittig. Langfassung: docs §15. */
:root[data-huelle="glas"] .leer { border-radius: var(--u-r-lg); }
:root[data-huelle="glas"] .leer-symbol {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto var(--u-s-4);
  color: var(--u-text-2);
}
:root[data-huelle="glas"] .leer-titel {
  font-family: var(--u-font-display);
  font-size: var(--u-t-xl);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-tight);
}
:root[data-huelle="glas"] .leer-text { margin-inline: auto; color: var(--u-text-2); }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .leer-weg > .knopf { flex: 1 1 100%; }
  :root[data-huelle="glas"] .leer-weg > form { display: grid; flex: 1 1 100%; }
}

/* ── Blaettern (seit H4 die Fusszeile der Liste, Entwurf J `.fuss`) ── links die Seitengroesse, rechts „x bis y von z“ und
   die Seiten; Zaehler und Segmente bleiben stumm im Markup und sind ausgeblendet. Folgt sie einer Liste, ist sie deren unterer
   Rand (eine Flaeche mit der Tabelle). Am Telefon nur erste, aktuelle und letzte Seite (`data-fern`). Langfassung: docs §5, §15. */
:root[data-huelle="glas"] .blaettern {
  flex-wrap: wrap;
  gap: var(--u-s-3) var(--u-s-6);
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
}
:root[data-huelle="glas"] .zeilenkarten-rahmen + .blaettern {
  margin-top: 0;
  padding: var(--u-s-3) var(--u-s-5);
  border: 1px solid var(--u-border);
  border-top: 0;
  border-radius: 0 0 var(--u-r-md) var(--u-r-md);
  background: var(--u-surface);
}
:root[data-huelle="glas"] .blaettern-groesse { display: flex; align-items: center; gap: var(--u-s-3); margin: 0 auto 0 0; }
:root[data-huelle="glas"] .blaettern-groesse label { display: flex; align-items: center; gap: var(--u-s-3); margin: 0; }
:root[data-huelle="glas"] .blaettern-groesse select { width: auto; min-height: max(var(--u-s-8), var(--u-ziel-min)); padding-block: 0; }
:root[data-huelle="glas"] .blaettern-zaehler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3); margin: 0 0 0 auto; }
:root[data-huelle="glas"] :is(.blaettern-seite-nr, .blaettern-segmente) { display: none; }
:root[data-huelle="glas"] .blaettern-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2); }
:root[data-huelle="glas"] .blaettern-seite {
  display: inline-grid;
  place-items: center;
  min-width: max(var(--u-s-8), var(--u-ziel-min));
  min-height: max(var(--u-s-8), var(--u-ziel-min));
  padding: 0 var(--u-s-3);
  border: 1px solid transparent;
  border-radius: var(--u-r-sm);
  color: var(--u-text-2);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
:root[data-huelle="glas"] .blaettern-seite:hover { background: var(--u-hover); color: var(--u-text); }
:root[data-huelle="glas"] .blaettern-seite[aria-current="page"],
:root[data-huelle="glas"] .blaettern-seite[aria-current="page"]:hover { border-color: var(--u-border-strong); background: var(--u-surface-alt); color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .blaettern-luecke { padding: 0 var(--u-s-2); color: var(--u-text-2); }
@container inhalt (width < 30rem) {
  :root[data-huelle="glas"] .blaettern-knoepfe [data-fern] { display: none; }
}

/* ── Streifen ── Die Kante links traegt die Art, das Wort im Satz nennt sie; nur runder und mit Haarlinie. */
:root[data-huelle="glas"] .streifen {
  border-left-width: 4px;
  border-radius: var(--u-r-sm);
  box-shadow: var(--u-e-1);
}

/* ── Erfolgsmeldung (GZ 30, nur Aussehen) ── Papier, Zustandskante, stummes HUD-Etikett. Langfassung: docs §15. */
:root[data-huelle="glas"] .toast {
  flex-wrap: wrap;
  border-color: var(--u-border);
  border-left: 3px solid var(--u-ok);
  border-radius: var(--u-r-md);
  background: var(--u-surface-hoch);
  color: var(--u-text);
  box-shadow: var(--u-e-3);
}
:root[data-huelle="glas"] .toast-gut::before {
  content: "Erledigt" / "";
  flex: 1 0 100%;
  color: var(--u-ok-fg);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-caps);
}
:root[data-huelle="glas"] .toast .knopf-leise { color: var(--u-text-2); }

/* ── Fokus ── Der Doppelring bleibt (Umriss der Marke, Abstand 2 px). Auf einer Verlaufsflaeche liegt sonst der
   Markenschein im Abstand und schluckt den Ring — dort kommt ein Innenring aus Papier dazu. */
:root[data-huelle="glas"] .knopf-haupt:focus-visible { box-shadow: 0 0 0 2px var(--u-surface); }

/* ── Eintritt ── seit H4 treten Karten und Kennzahlen nicht mehr ein (ruhiger ERP-Stil); die Keyframes tragen Raum, Pins und Begleiter. */
@keyframes huelle-karte-ein { from { opacity: 0; transform: translateY(calc(8px * var(--u-bewegung))); } }

/* ── Werkzeugleiste (seit H4 die Filterleiste des ERP, Entwurf J `.lk`) ── eine ruhige Reihe ohne Rahmen: Suchfeld, Auswahlen,
   Knopf; Etiketten klein in Satzschrift. Die Filtergruppe (Arbeitsmengen, Zustaende) ist die Reiter-Leiste (Entwurf J `.reiter2`):
   eine Schiene, der gewaehlte Reiter hell abgesetzt, die Zahl leise daneben. Am Telefon rollt jede Gruppe in einer Zeile.
   Langfassung: docs §9, §15. */
:root[data-huelle="glas"] .filterzeile {
  align-items: flex-end;
  gap: var(--u-s-3) var(--u-s-4);
  margin: 0 0 var(--u-s-5);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-huelle="glas"] .filterzeile:has(+ .filterzeile) { margin-bottom: var(--u-s-3); }
:root[data-huelle="glas"] .filterzeile .feld > label,
:root[data-huelle="glas"] .filterzeile > div:has(> .filter-gruppe) > .leise {
  color: var(--u-text-2);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-caps);
}
:root[data-huelle="glas"] .filterzeile .feld:has(> input[type="search"]) { flex: 1 1 14rem; max-width: 28rem; }
:root[data-huelle="glas"] .filterzeile .feld > :is(input, select) { min-height: max(var(--u-s-10), var(--u-ziel-min)); border-radius: var(--u-r-sm); }
:root[data-huelle="glas"] .filterzeile .feld > input[type="search"] { min-height: max(var(--u-d-feld), var(--u-ziel-min)); padding-inline: var(--u-s-5); }
:root[data-huelle="glas"] .filterzeile .filter-gruppe {
  gap: var(--u-s-1);
  padding: var(--u-s-1);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
}
:root[data-huelle="glas"] .filterzeile .filter-wahl {
  justify-content: center;
  min-width: max(var(--u-s-9), var(--u-ziel-min));
  min-height: max(var(--u-s-9), var(--u-ziel-min));
  border-color: transparent;
  border-radius: var(--u-r-sm);
  background: transparent;
  color: var(--u-text-2);
  font-weight: var(--u-w-medium);
}
:root[data-huelle="glas"] .filterzeile .filter-wahl:hover { border-color: transparent; background: var(--u-hover); color: var(--u-text); }
:root[data-huelle="glas"] .filterzeile .filter-wahl[aria-current="true"],
:root[data-huelle="glas"] .filterzeile .filter-wahl[aria-current="true"]:hover {
  border-color: var(--u-border);
  background: var(--u-surface-alt);
  color: var(--u-text);
  font-weight: var(--u-w-strong);
}
/* Die Zahl eines Reiters: leise, ohne Flaeche; Klaerfaelle in der Warnfarbe (das Wort „Klaerfaelle“ steht davor). */
:root[data-huelle="glas"] .filterzeile .filter-wahl > .abzeichen { padding: 0; background: none; color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .filterzeile .filter-wahl > .abzeichen::before { content: none; }
:root[data-huelle="glas"] .filterzeile .filter-wahl > .abzeichen-warn { color: var(--u-warn-fg); }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .filterzeile .feld:has(> input[type="search"]) { flex: 1 1 12rem; max-width: none; }
  /* EINSPALTIG OHNE UMBRUCH (sonst 823 px bei 352 px Platz). Langfassung: docs §15. */
  :root[data-huelle="glas"] .filterzeile > div:has(> .filter-gruppe) {
    flex: 1 1 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--u-s-2);
    min-width: 0;
  }
  :root[data-huelle="glas"] .filterzeile .filter-gruppe {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-padding-inline: var(--u-s-4);
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  :root[data-huelle="glas"] .filterzeile .filter-gruppe > .filter-wahl { flex: none; scroll-snap-align: start; }
}
/* DIE LEISTE (H4): Reiter und Filter einer Liste in EINER Reihe; die Etiketten der Filter stehen dort nur fuer Vorleser. */
:root[data-huelle="glas"] .erp-leiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--u-s-3) var(--u-s-5); margin-bottom: var(--u-s-5); }
:root[data-huelle="glas"] .erp-leiste > .filterzeile,
:root[data-huelle="glas"] .erp-leiste > .filter-klapp { margin: 0; }
:root[data-huelle="glas"] .erp-leiste > .filter-klapp { flex: 1 1 30rem; min-width: 0; }

/* ── Werkzeugleiste zum Aufklappen (S2, zweite Stufe zu GZ 13) ── `details.filter-klapp` (Baustein
   _huelle/werkzeugleiste_auf), NIE von selbst offen, der Kopf nennt die Einschraenkungen; ab 44rem und ueber 30rem Hoehe
   ohne Kopf, immer offen (`::details-content` unter `@supports`), mit Fokus darin bleibt sie. Langfassung: docs §9, §14, §15. */
:root[data-huelle="glas"] .filter-klapp { margin-bottom: var(--u-s-5); }
:root[data-huelle="glas"] .filter-klapp > .filter-klapp-kopf {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-s-1) var(--u-s-3);
  min-height: max(var(--u-s-10), var(--u-ziel-min));
  padding: var(--u-s-2) calc(var(--u-s-5) + 1.5em) var(--u-s-2) var(--u-s-5);
  border: 1px solid var(--u-border-strong);
  border-radius: var(--u-r-xs);
  background: var(--u-surface-alt);
  color: var(--u-text-2);
  cursor: pointer;
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
  list-style: none;
}
:root[data-huelle="glas"] .filter-klapp > .filter-klapp-kopf::-webkit-details-marker { display: none; }
:root[data-huelle="glas"] .filter-klapp > .filter-klapp-kopf::after {
  content: "▾" / "";
  position: absolute;
  top: calc(50% - .75em);
  right: var(--u-s-5);
  line-height: 1.5;
  transition: rotate var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .filter-klapp[open] > .filter-klapp-kopf::after { rotate: 180deg; }
:root[data-huelle="glas"] .filter-klapp > .filter-klapp-kopf .sym { flex: none; width: 14px; height: 14px; }
:root[data-huelle="glas"] .filter-klapp > .filter-klapp-kopf:hover,
:root[data-huelle="glas"] .filter-klapp[open] > .filter-klapp-kopf { border-color: var(--u-border-strong); background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .filter-klapp-zahl {
  padding: 0 var(--u-s-3);
  border-radius: var(--u-r-full);
  background: var(--u-surface-3);
  color: var(--u-text);
}
/* Was gilt, in Woertern (Suche, Zustand, Archiv …): eine eigene Zeile unter dem Titel, in Satzschrift. */
:root[data-huelle="glas"] .filter-klapp-was {
  flex: 1 1 100%;
  min-width: 0;
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-medium);
  overflow-wrap: anywhere;
}
:root[data-huelle="glas"] .filter-klapp[open] > .filter-klapp-kopf + .filterzeile { margin-top: var(--u-s-3); }
:root[data-huelle="glas"] .filter-klapp > .filterzeile:last-child { margin-bottom: 0; }
@supports selector(details::details-content) {
  @container inhalt (width >= 44rem) {
    @media (height > 30rem) {
      :root[data-huelle="glas"] .filter-klapp::details-content { content-visibility: visible; }
      :root[data-huelle="glas"] .filter-klapp > .filter-klapp-kopf { display: none; }
    }
  }
  :root[data-huelle="glas"] .filter-klapp:has(> :not(.filter-klapp-kopf):focus-within)::details-content { content-visibility: visible; }
  :root[data-huelle="glas"] .filter-klapp:not([open]):has(> :not(.filter-klapp-kopf):focus-within) > .filter-klapp-kopf { display: none; }
}

/* ── Liste im ERP-Stil (H4, Entwurf J; bis H4 Zeilenkarten) ── EINE Flaeche, feine Linien, kein Rand links; die ganze Zeile ist
   ihr Verweis (`a[data-zeile]::after`), Bedienbares liegt darueber; der Kern kuerzt einzeilig; kein `order`, Rahmen ohne
   `overflow` (R4). Unter 44rem fliessen die Zellen. Langfassung: docs §9, §24. */
:root[data-huelle="glas"] .zeilenkarten-rahmen { display: flex; flex-direction: column; gap: var(--u-s-3); min-width: 0; margin-bottom: var(--u-s-5); }
:root[data-huelle="glas"] .zeilenkarten-rahmen:has(+ .blaettern) { margin-bottom: 0; }
:root[data-huelle="glas"] .zeilenkarten-kopf { display: flex; justify-content: flex-end; }
:root[data-huelle="glas"] .karte-flach:has(> .zeilenkarten-rahmen, > .verlaufsliste-rahmen) { overflow: visible; }
:root[data-huelle="glas"] .karte-flach > .zeilenkarten-rahmen { margin: 0 var(--u-s-6) var(--u-s-6); }
:root[data-huelle="glas"] .erp {
  width: 100%;
  border: 1px solid var(--u-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  font-size: var(--u-t-md);
  line-height: var(--u-d-lh);
}
:root[data-huelle="glas"] .zeilenkarten-rahmen:has(+ .blaettern) > .erp { border-radius: var(--u-r-md) var(--u-r-md) 0 0; }
:root[data-huelle="glas"] .erp th {
  /* Luftiger wie im alten ERP (Manuel 07.10.2026): Kopf 12/16, Zeilen 16/16, Bild 44 px. */
  padding: var(--u-s-5) var(--u-s-6);
  border-bottom: 1px solid var(--u-border);
  background: var(--u-surface-alt);
  color: var(--u-text-2);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-caps);
  text-align: left;
  white-space: nowrap;
}
:root[data-huelle="glas"] .erp th:first-child { border-top-left-radius: var(--u-r-md); }
:root[data-huelle="glas"] .erp th:last-child { border-top-right-radius: var(--u-r-md); }
:root[data-huelle="glas"] .erp td {
  padding: var(--u-s-6) var(--u-s-6);
  border-bottom: 1px solid var(--u-border-soft);
  overflow-wrap: break-word;
  vertical-align: middle;
}
:root[data-huelle="glas"] .erp > tbody > tr { position: relative; }
:root[data-huelle="glas"] .erp > tbody > tr:last-child > td { border-bottom: 0; }
:root[data-huelle="glas"] .erp > tbody > tr:has(a[data-zeile]):hover > td,
:root[data-huelle="glas"] .erp > tbody > tr:focus-within > td { background: var(--u-hover); }
/* Eine Zeile mit offenem Menue liegt ueber den folgenden (die spaeteren Zeilen malten sonst ueber das Blatt). */
:root[data-huelle="glas"] .erp > tbody > tr:has(> td details[open]) { z-index: var(--u-z-menu); }
:root[data-huelle="glas"] .erp a[data-zeile]::after { content: ""; position: absolute; inset: 0; }
:root[data-huelle="glas"] .erp td :is(a:not([data-zeile]), button, summary, input, select, label) { position: relative; z-index: var(--u-z-zeile); }
:root[data-huelle="glas"] .erp td.zelle-kern { width: 100%; max-width: 0; }
:root[data-huelle="glas"] .erp :is(.zeile-kern, .person-name) {
  display: block;
  overflow: hidden;
  color: var(--u-text);
  font-weight: var(--u-w-strong);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root[data-huelle="glas"] .erp a:is(.zeile-kern, .person-name):hover { color: var(--u-text); text-decoration: none; }
:root[data-huelle="glas"] .erp .person { gap: var(--u-s-6); min-width: 0; }
:root[data-huelle="glas"] .erp .person-bild { width: 44px; height: 44px; border-radius: var(--u-r-sm); }
:root[data-huelle="glas"] .erp span.person-bild { background: var(--u-surface-alt); box-shadow: inset 0 0 0 1px var(--u-border); color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .erp .person-bild[class*="bereich-"] { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 3px var(--u-bereich, var(--u-zustand-grau)); }
:root[data-huelle="glas"] .erp .person-bild.bereich-1 { --u-bereich: var(--u-bereich-1); }
:root[data-huelle="glas"] .erp .person-bild.bereich-2 { --u-bereich: var(--u-bereich-2); }
:root[data-huelle="glas"] .erp .person-bild.bereich-3 { --u-bereich: var(--u-bereich-3); }
:root[data-huelle="glas"] .erp .person-bild.bereich-4 { --u-bereich: var(--u-bereich-4); }
:root[data-huelle="glas"] .erp .person-bild.bereich-5 { --u-bereich: var(--u-bereich-5); }
:root[data-huelle="glas"] .erp .person-bild.bereich-6 { --u-bereich: var(--u-bereich-6); }
:root[data-huelle="glas"] .erp .person-bild .sym { width: 18px; height: 18px; }
:root[data-huelle="glas"] .erp :is(.person-kennung, .zeile-neben) {
  display: block;
  margin-top: var(--u-s-2);
  overflow: hidden;
  color: var(--u-text-2);
  font-size: var(--u-t-xs);
  text-overflow: ellipsis;
}
:root[data-huelle="glas"] .erp :is(.person-kennung, .zeile-neben) { white-space: nowrap; }
:root[data-huelle="glas"] .erp :is(.person-kennung, .zeile-neben).mono { font-family: var(--u-font-mono); }
:root[data-huelle="glas"] .erp .zeile-zusatz { color: var(--u-ok-fg); }
:root[data-huelle="glas"] .erp .zeile-nummer { color: var(--u-text-2); font-family: var(--u-font-mono); font-size: var(--u-t-xs); text-decoration: none; }
:root[data-huelle="glas"] .erp td a:not([data-zeile], .zeile-nummer, .knopf) { color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .erp td.zelle-zeit { white-space: nowrap; }
:root[data-huelle="glas"] .erp .zeile-datum { display: block; }
:root[data-huelle="glas"] .erp .zeile-uhr { display: block; color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .erp :is(td.zelle-kennzahl, th[data-rolle="kennzahl"]) { text-align: right; white-space: nowrap; }
:root[data-huelle="glas"] .erp td.zelle-kennzahl { font-weight: var(--u-w-strong); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .erp td:is(.zelle-nummer, .zelle-zustand, .zelle-menue, .zelle-oeffnen) { width: 1%; white-space: nowrap; }
:root[data-huelle="glas"] .erp :is(td.zelle-menue, td.zelle-oeffnen, th[data-rolle="oeffnen"], th[data-rolle="aktion"]) { text-align: right; }
:root[data-huelle="glas"] .erp .abzeichen { padding: var(--u-s-1) var(--u-s-4); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .erp td.zelle-zustand .abzeichen::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--u-r-full); background: currentColor; }
:root[data-huelle="glas"] .zeile-kanal { font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] .zeile-kanal[data-kanal="kaufland"] { color: var(--u-kanal-kaufland); }
:root[data-huelle="glas"] .zeile-kanal[data-kanal="ebay"] { color: var(--u-kanal-ebay); }
:root[data-huelle="glas"] .zeile-kanal[data-kanal="amazon"] { color: var(--u-kanal-amazon); }
:root[data-huelle="glas"] .zeile-kanal[data-kanal="shop"] { color: var(--u-kanal-shop); }
/* Die Zeichen unter dem Status (Versand, Rechnung, Nachricht): stumm, aus = Grafikgrau, an = gedaempfte Schrift; die Woerter
   stehen fuer Vorleser daneben. */
:root[data-huelle="glas"] .zeile-zeichen { display: flex; gap: var(--u-s-3); margin-top: var(--u-s-2); }
:root[data-huelle="glas"] .zeile-zeichen .sym { width: 14px; height: 14px; color: var(--u-text-faint); }
:root[data-huelle="glas"] .zeile-zeichen .sym[data-an] { color: var(--u-text-2); }
/* „Öffnen“ (Entwurf J): Teil der Zeilenflaeche, sieht aus wie ein leiser Knopf. */
:root[data-huelle="glas"] .zeile-oeffnen {
  display: inline-block;
  padding: var(--u-s-2) var(--u-s-5);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-sm);
  color: var(--u-text);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-medium);
  white-space: nowrap;
}
:root[data-huelle="glas"] .erp > tbody > tr:hover .zeile-oeffnen { border-color: var(--u-border-strong); background: var(--u-surface); }
/* NIE NUR FARBE (WCAG 1.4.1): die wartende Zeile sagt es in Worten, davor der Magenta-Punkt (E11). */
:root[data-huelle="glas"] :is(.erp, .verlaufsliste) .zeile-wartet {
  display: block;
  margin-top: var(--u-s-1);
  color: var(--u-text-2);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-heavy);
  line-height: var(--u-lh-caps);
}
:root[data-huelle="glas"] .erp > tbody > tr[data-wartet] .zeile-wartet::before {
  content: "";
  display: inline-block;
  width: var(--u-s-3);
  height: var(--u-s-3);
  margin-right: var(--u-s-2);
  border-radius: 50%;
  background: var(--u-neon-magenta);
}
/* Das Zeilenmenue (E18): Zielgroesse wie ueberall; ein einzelner Knopf steht als Knopf da. */
:root[data-huelle="glas"] .erp td.zelle-menue > .zeilenmenue > summary {
  width: max(var(--u-s-10), var(--u-ziel-min));
  height: max(var(--u-s-10), var(--u-ziel-min));
}
:root[data-huelle="glas"] .erp td.zelle-menue > form { display: inline-block; margin: 0; }
:root[data-huelle="glas"] .erp td.zelle-menue .knopf { white-space: nowrap; }
:root[data-huelle="glas"] .erp .zeilenmenue-punkt { min-height: max(var(--u-s-9), var(--u-ziel-min)); }
/* In den letzten zwei Zeilen klappt das Blatt nach oben. Langfassung: docs §15.149. */
:root[data-huelle="glas"] .erp > tbody > tr:nth-last-child(-n + 2) .zeilenmenue-blatt {
  top: auto;
  bottom: calc(100% + var(--u-s-2));
}
/* AM TELEFON: die Zellen einer Zeile fliessen; der Kern bekommt eine eigene Zeile, der Kopf steht nur fuer Vorleser da
   (Vorlese-Muster, nicht `display: none` — sonst fiele die Zuordnung Kopf → Zelle weg), eine leere Zelle ebenso. */
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] :is(.erp, .erp > tbody) { display: block; }
  :root[data-huelle="glas"] :is(.erp > thead, .erp td.zelle-leer) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  :root[data-huelle="glas"] .erp > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--u-s-2) var(--u-s-5);
    padding: var(--u-s-4) var(--u-s-5);
    border-bottom: 1px solid var(--u-border-soft);
  }
  :root[data-huelle="glas"] .erp > tbody > tr:last-child { border-bottom: 0; }
  :root[data-huelle="glas"] .erp td { display: block; padding: 0; border: 0; }
  :root[data-huelle="glas"] .erp td.zelle-kern { flex: 1 1 100%; width: auto; max-width: 100%; }
  :root[data-huelle="glas"] .erp td:is(.zelle-kennzahl, .zelle-menue) { text-align: left; }
  :root[data-huelle="glas"] .erp td:is(.zelle-nummer, .zelle-zustand, .zelle-menue, .zelle-oeffnen) { width: auto; }
  :root[data-huelle="glas"] .erp td.zelle-menue { margin-left: auto; }
  :root[data-huelle="glas"] .erp .zeile-uhr { display: inline; margin-left: var(--u-s-3); }
  :root[data-huelle="glas"] .erp td.zelle-oeffnen { display: none; }
}

/* ── Ziele in Verlaeufen, Ketten und Karten (aus den Zeilenkarten, seit H4 ohne sie) ── Verweise sind ganze Ziele (2.5.8): es
   waechst die TREFFERFLAECHE (`::after`), nicht die Box — auch an der Zahl einer Kennzahl-Zelle der Liste (Zaehlmarke, P4-C).
   Langfassung: docs §15. */
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) a:is(.zeile-kern, .person-name, .zeile-nummer, .verlaufsliste-titel),
:root[data-huelle="glas"] :is(.akte ol.kette, .kanban-verlauf, .freigabe-karte .freigabe-kopf, .chat-laufend-kopf) a,
:root[data-huelle="glas"] .kanban-karte :is(.kanban-karte-titel, a.abzeichen) {
  position: relative;
  max-width: 100%;
}
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) a:is(.zeile-kern, .person-name, .zeile-nummer, .verlaufsliste-titel)::after,
:root[data-huelle="glas"] .erp .zelle-kennzahl > a::after,
:root[data-huelle="glas"] :is(.akte ol.kette, .kanban-verlauf, .freigabe-karte .freigabe-kopf, .chat-laufend-kopf) a::after,
:root[data-huelle="glas"] .kanban-karte :is(.kanban-karte-titel, a.abzeichen)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--u-s-8), var(--u-ziel-min));
  height: max(100%, var(--u-s-8), var(--u-ziel-min));
  translate: -50% -50%;
}
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) .zeile-nummer {
  display: inline-block;
  padding: 0 var(--u-s-3);
  border-radius: var(--u-r-xs);
  background: var(--u-surface-3);
  color: var(--u-text-2);
  font-weight: var(--u-w-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  text-decoration: none;
}
/* EINTRITT der Verlaeufe: gestaffelt (hoechstens zwoelf Stufen, an `--u-bewegung`); eine neue Abfrage tritt nicht erneut ein. Die
   Liste tritt seit H4 nicht mehr ein (ruhig, dicht). Langfassung: docs §15.151. */
@keyframes huelle-zeile-ein { from { opacity: 0; transform: translateY(calc(8px * var(--u-bewegung))); } }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > * {
  animation: huelle-zeile-ein calc(var(--u-dur-5) * var(--u-bewegung)) var(--u-ease-play) backwards;
}
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(2) { animation-delay: calc(1 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(3) { animation-delay: calc(2 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(4) { animation-delay: calc(3 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(5) { animation-delay: calc(4 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(6) { animation-delay: calc(5 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(7) { animation-delay: calc(6 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(8) { animation-delay: calc(7 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(9) { animation-delay: calc(8 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(10) { animation-delay: calc(9 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(11) { animation-delay: calc(10 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] :is(.verlaufsliste, .verlauf) > :nth-child(n + 12) { animation-delay: calc(11 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"][data-gleicher-pfad] :is(.verlaufsliste, .verlauf) > * { animation-name: none; }

/* ── Sortier-Pille (E5; seit H4 ruhig) ── Die EINE Sortierbedienung der Liste: ein Chip mit dem Blatt des Zeilenmenues.
   Langfassung: docs §15.152. */
:root[data-huelle="glas"] .zeilenkarten-kopf > .sortier-pille { min-width: 0; max-width: 100%; }
:root[data-huelle="glas"] .sortier-pille > summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-s-2);
  max-width: 100%;
  width: auto;
  height: auto;
  min-height: max(var(--u-s-9), var(--u-ziel-min));
  padding: 0 var(--u-s-5);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-sm);
  background: var(--u-surface);
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
}
:root[data-huelle="glas"] .sortier-pille > summary b { color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .sortier-pille > summary .sym { width: 14px; height: 14px; transition: rotate var(--u-dur-2) var(--u-ease); }
:root[data-huelle="glas"] .sortier-pille > summary:hover,
:root[data-huelle="glas"] .sortier-pille[open] > summary { border-color: var(--u-border-strong); color: var(--u-text); }
:root[data-huelle="glas"] .sortier-pille[open] > summary .sym { rotate: 180deg; }
:root[data-huelle="glas"] .sortier-pille > .zeilenmenue-blatt { min-width: 15rem; }
:root[data-huelle="glas"] .zeilenkarten-rahmen a.zeilenmenue-punkt {
  min-height: max(var(--u-s-9), var(--u-ziel-min));
  color: var(--u-text);
  text-decoration: none;
}
:root[data-huelle="glas"] .zeilenkarten-rahmen .zeilenmenue-punkt[aria-current="true"]::before { content: "✓" / ""; font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] .sortier-pille-umkehren { margin-top: var(--u-s-2); border-top: 1px solid var(--u-border-soft); }

/* ── Tabellenform (`darstellung => tabelle`, seit H4 ohne HUD) ── Dasselbe Markup wie die Basis, Haarlinien, Ziffern in
   Tabellenbreite; Kartenstapel nur mit `role`. Langfassung: docs §15. */
:root[data-huelle="glas"] .tabelle-rahmen { border-color: var(--u-border); box-shadow: none; }
:root[data-huelle="glas"] .tabelle thead th { color: var(--u-text-2); }
:root[data-huelle="glas"] .tabelle-sort { color: var(--u-text-2); }
:root[data-huelle="glas"] .tabelle td.tabelle-zahl { font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .tabelle .zelle-unter { color: var(--u-text-2); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .tabelle td a { min-height: max(var(--u-s-8), var(--u-ziel-min)); }

/* ── Kachelraster (Katalog, Mandanten; Einschub `data-kacheln`) ── seit H4 ruhig: beim Ueberfahren und mit der Tastatur nur die
   staerkere Kante, kein Hub, kein Schein. */
:root[data-huelle="glas"] [data-kacheln] > .karte { transition: border-color var(--u-dur-2) var(--u-ease); }
:root[data-huelle="glas"] [data-kacheln] > .karte:is(:hover, :focus-within) { border-color: var(--u-border-strong); }

/* ── Mandate (`article.block-eng`) in Zeilenkarten-Optik ── Was hier steht, GILT: die Leiste traegt `--u-ok` (E16).
   Langfassung: docs §15.153. */
:root[data-huelle="glas"] .block-eng {
  margin-block: var(--u-s-3);
  padding: var(--u-s-5) var(--u-s-6);
  border: 1px solid var(--u-border-soft);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  box-shadow: inset 4px 0 0 var(--u-ok), var(--u-e-1);
  overflow-wrap: anywhere;
}
:root[data-huelle="glas"] .block-eng > p:first-child > strong.mono { font-family: var(--u-font-hud); font-size: var(--u-t-lg); }

/* ── Fehlerseite (403/404, Einschub `data-leer`) ── Die Optik des Leerzustands: gestrichelt, Schild-Symbol, Titel in
   Bricolage, der Vorgang als Beleg, ein Weg zur Startseite. */
:root[data-huelle="glas"] .karte-fehler[data-leer] {
  border: 1px dashed var(--u-border-strong);
  border-radius: var(--u-r-lg);
  box-shadow: none;
  text-align: center;
}
:root[data-huelle="glas"] .karte-fehler[data-leer] > h2 {
  justify-content: center;
  font-family: var(--u-font-display);
  font-weight: var(--u-w-heavy);
}
:root[data-huelle="glas"] .karte-fehler[data-leer] > .leer-weg { justify-content: center; }
:root[data-huelle="glas"] .karte-fehler[data-leer] > p { margin-inline: auto; max-width: 40rem; color: var(--u-text-2); }

/* ── Herkunftskette im schmalen Fenster ── bricht in glas um. Langfassung: docs §15. */
:root[data-huelle="glas"] .kette li { flex-wrap: wrap; min-width: 0; }
:root[data-huelle="glas"] .kette li > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* ── Akte (S3, E6/E7/E15, v4 §4.16, §12.4, Bauplan §11.3) ── Kopf (Kachel, Avatar oder Charakterkarte), Kennzahlen,
   Sprungleiste, Abschnitte; Neon nur Kante/Strich/Schein; `p.akte-name` ueber `10cqi` begrenzt (§13.8). Langfassung: docs §10, §15. */
:root[data-huelle="glas"] {
  /* Komponentenvariablen der Akte und der klebenden Reihen (Sprungleiste, Reihe, Abstand ueber dem Dock).
     Langfassung: docs §15.154. */
  --u-akte-sprung-h: calc(max(var(--u-s-10), var(--u-ziel-min)) + 2 * var(--u-s-2) + 1px);
  --u-klebe-h: calc(max(var(--u-s-10), var(--u-ziel-min)) + 2 * var(--u-s-3));
  --u-klebe-unten: var(--u-dock-h);
  --u-tastatur-versatz: 0px;
  /* chat-kern.js (P4-M) */
  --u-ebene-h: 0px;
  --u-ebene-b: 0px;
  /* Die wirkliche Sichthoehe schreibt olymp.js (visualViewport); ohne Skript die dynamische (P4-J: Gespraech im Raum). */
  --u-sicht-h: 100dvh;
}
/* SEITENREGEL (§13.1, GZ 7): scroll-padding-top rechnet die klebende Sprungleiste ein (2.4.11). Langfassung: docs §15. */
:root[data-huelle="glas"]:has(.akte-sprung) {
  scroll-padding-top: calc(var(--u-topbar-h) + var(--u-akte-sprung-h) + var(--u-s-4));
}
/* SEITENREGEL: die klebende Entscheidungsreihe ebenso, am unteren Rand — und seit S4 die des Blatt-Formulars. */
:root[data-huelle="glas"]:has(.blatt-formular, .entscheidung) {
  scroll-padding-bottom: calc(var(--u-klebe-unten) + var(--u-klebe-h) + var(--u-s-4));
}
:root[data-huelle="glas"] .akte { display: flex; flex-direction: column; gap: var(--u-s-5); min-width: 0; }
:root[data-huelle="glas"] .akte-inhalt { min-width: 0; }
/* DER AKTEN-RAHMEN DES ERP (H4, Entwurf H): Kopf als Karte, Aktionsleiste, links der Koerper, rechts die Seitenspalte; nur als
   Seite, das Raum-Panel bleibt. Langfassung: docs oberflaeche-inhalt.md §24. */
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf:not(.charakterkarte, .profil-kopf) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--u-s-4) var(--u-s-7);
  padding: var(--u-s-6) var(--u-s-7);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
}
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf:not(.charakterkarte, .profil-kopf) > .akte-kopf-text {
  display: grid;
  grid-template-areas: "etikett etikett" "name zeile" "kennung kennung" "satz satz" "werte werte";
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--u-s-2) var(--u-s-5);
}
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-kopf-text > .akte-etikett { grid-area: etikett; }
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-kopf-text > .akte-name { grid-area: name; }
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-kopf-text > .akte-zeile { grid-area: zeile; }
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-kopf-text > .akte-kennung { grid-area: kennung; }
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-kopf-text > .akte-satz { grid-area: satz; }
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-kopf-text > .werte { grid-area: werte; }
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-symbol { width: 48px; height: 48px; border-radius: var(--u-r-md); }
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-symbol .sym { width: 24px; height: 24px; }
:root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf .akte-bild { width: 56px; height: 56px; }
:root[data-huelle="glas"] .akte-kopf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--u-s-4); min-width: 0; }
:root[data-huelle="glas"] .akte-haupt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--u-s-1);
  margin: 0;
  padding: var(--u-s-4) var(--u-s-6);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface-alt);
  text-align: right;
}
:root[data-huelle="glas"] .akte-haupt-wort { color: var(--u-text-2); font-size: var(--u-t-2xs); font-weight: var(--u-w-heavy); letter-spacing: var(--u-track-caps); text-transform: uppercase; }
:root[data-huelle="glas"] .akte-haupt-wert { color: var(--u-geld); font-family: var(--u-font-display); font-size: var(--u-t-2xl); font-weight: var(--u-w-heavy); font-variant-numeric: tabular-nums; line-height: 1.1; }
:root[data-huelle="glas"] .akte-haupt-wert.kennzahl-nicht { color: var(--u-text-2); }
:root[data-huelle="glas"] .akte-haupt small { color: var(--u-text-2); font-size: var(--u-t-xs); }
/* DIE AKTIONSLEISTE: echte Aktionen als Kacheln, die uebrigen gestrichelt mit ihrem Grund. */
:root[data-huelle="glas"] .akte-aktionen { display: flex; flex-wrap: wrap; gap: var(--u-s-3); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .akte-aktionen > li { display: flex; flex: 0 1 auto; min-width: 0; }
:root[data-huelle="glas"] .akte-aktion {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--u-s-4);
  min-width: 11rem;
  min-height: max(var(--u-s-11), var(--u-ziel-min));
  padding: var(--u-s-3) var(--u-s-5);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  color: var(--u-text);
  text-decoration: none;
}
:root[data-huelle="glas"] .akte-aktion .sym { flex: none; width: 18px; height: 18px; color: var(--u-text-2); }
:root[data-huelle="glas"] .akte-aktion-text { display: flex; flex-direction: column; min-width: 0; }
:root[data-huelle="glas"] .akte-aktion-text > b { font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .akte-aktion small { color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] :is(a, button).akte-aktion:hover { border-color: var(--u-border-strong); background: var(--u-hover); }
:root[data-huelle="glas"] span.akte-aktion { border-style: dashed; color: var(--u-text-2); }
/* DAS RASTER: ab 60rem rechts die Seitenspalte (dort jedes Gitter einspaltig). */
:root[data-huelle="glas"] .akte-raster { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--u-s-5); }
:root[data-huelle="glas"] .akte-seite { display: flex; flex-direction: column; gap: var(--u-s-5); min-width: 0; }
:root[data-huelle="glas"] .akte-seite > .karte,
:root[data-huelle="glas"] .akte-seite > .gitter { margin: 0; }
:root[data-huelle="glas"] .akte .akte-seite .gitter { grid-template-columns: minmax(0, 1fr); }
:root[data-huelle="glas"] .akte-seite > .akte-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
@container inhalt (width >= 60rem) {
  :root[data-huelle="glas"] .akte-raster { grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); }
}
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf:not(.charakterkarte, .profil-kopf) { grid-template-columns: auto minmax(0, 1fr); padding: var(--u-s-5); }
  :root[data-huelle="glas"] .akte-kopf-rechts { grid-column: 1 / -1; align-items: stretch; }
  :root[data-huelle="glas"] .akte-haupt { align-items: flex-start; text-align: left; }
  :root[data-huelle="glas"] .akte:not(.akte-panel) > .akte-kopf:not(.charakterkarte, .profil-kopf) > .akte-kopf-text {
    grid-template-areas: "etikett" "name" "zeile" "kennung" "satz" "werte";
    grid-template-columns: minmax(0, 1fr);
  }
  :root[data-huelle="glas"] .akte-aktionen > li { flex: 1 1 100%; }
  :root[data-huelle="glas"] .akte-posten .zelle-kennzahl[data-titel]:not(:has(.nur-vorlesen))::before { content: attr(data-titel) " "; color: var(--u-text-2); font-size: var(--u-t-xs); }
  :root[data-huelle="glas"] .akte-posten tfoot tr { display: flex; flex-wrap: wrap; gap: var(--u-s-2) var(--u-s-5); padding: var(--u-s-4); }
  :root[data-huelle="glas"] .akte-posten tfoot td { padding: 0; border: 0; }
}
/* AKTENDESIGN (MB-L2). Gemeinsame Bausteine nach Entwurf L; ausdrücklich mit stil=design gewählt.
   Maße, Farbrollen und Spezifität bleiben erhalten. Listenregeln darunter bleiben fachlich getrennt. */
:root[data-huelle="glas"] .akte-satz b { color: var(--u-text); }
:root[data-huelle="glas"] .akte-zusatz { color: var(--u-ok-fg); }
:root[data-huelle="glas"] .akte-kopf-rechts:has(> span.akte-aktion) { flex-flow: row wrap; align-items: center; }
:root[data-huelle="glas"] .akte-aktion-form { display: flex; flex: 1 1 auto; margin: 0; }
:root[data-huelle="glas"] button.akte-aktion { font: inherit; text-align: left; cursor: pointer; }
:root[data-huelle="glas"] .akte-posten tfoot td { border-top: 1px solid var(--u-border); font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] .akte-design { gap: 18px; }
:root[data-huelle="glas"] .akte-design input::placeholder { color: var(--u-text-2); opacity: 1; }
/* Zählmarken aktiver Reiter tragen dieselbe kontrastreiche Schrift wie ihr Markenband (MB-L3). */
:root[data-huelle="glas"] .akte-design .filter-wahl .abzeichen { opacity: 1; }
:root[data-huelle="glas"] .akte-design .filter-wahl[aria-current="true"] .abzeichen { color: inherit; background: transparent; }
/* HM4 (Entwurf M): der Kopf der Akte ist hell und randlos auf der Fläche des Fensters — kein violettes Band, keine Eckklammern. */
:root[data-huelle="glas"] .akte-design:not(.akte-panel) > .akte-kopf:not(.charakterkarte, .profil-kopf) {
  position: relative;
  margin: 0 calc(-1 * var(--u-s-8));
  padding: var(--u-s-4) var(--u-s-8) var(--u-s-6);
  border: 0;
  border-bottom: 1px solid var(--u-border);
  border-radius: 0;
  background: var(--u-surface);
  color: var(--u-text);
}
:root[data-huelle="glas"] .akte-design:not(.akte-panel) > .akte-kopf:not(.charakterkarte, .profil-kopf) > .akte-kopf-text { grid-template-areas: "etikett" "name" "satz" "zeile" "kennung" "werte"; grid-template-columns: minmax(0, 1fr); }
:root[data-huelle="glas"] .akte-design .akte-name { font-family: var(--u-font-display); font-size: var(--u-t-akte-titel); color: inherit; }
:root[data-huelle="glas"] .akte-design .akte-kopf :is(.akte-etikett, .akte-satz, .akte-satz b, .akte-zusatz, .akte-haupt-wort, .akte-haupt-wert, .akte-haupt small) { color: inherit; }
:root[data-huelle="glas"] .akte-design .akte-kopf .akte-satz { color: var(--u-text-2); }
:root[data-huelle="glas"] .akte-design .akte-symbol { border: 1px solid var(--u-border); background: var(--u-surface-alt); color: var(--u-brand-text); }
:root[data-huelle="glas"] .akte-design .akte-haupt { padding: 0; border: 0; border-radius: 0; background: transparent; }
:root[data-huelle="glas"] .akte-design .akte-haupt-wert { font-size: var(--u-t-akte-haupt); }
:root[data-huelle="glas"] .akte-design .akte-kopf .abzeichen { border-radius: var(--u-r-full); }
:root[data-huelle="glas"] .akte-design .akte-kopf .abzeichen-neutral { border: 1px solid var(--u-border); background: var(--u-surface-alt); color: var(--u-text-2); }
:root[data-huelle="glas"] .akte-design .akte-kopf .auftrag-kanal { background: var(--u-surface); }
:root[data-huelle="glas"] .akte-design .akte-kopf .auftrag-kanal[data-kanal="kaufland"] { color: var(--u-kanal-kaufland); }
:root[data-huelle="glas"] .akte-design .akte-kopf .auftrag-kanal[data-kanal="ebay"] { color: var(--u-kanal-ebay); }
:root[data-huelle="glas"] .akte-design .akte-kopf .auftrag-kanal[data-kanal="amazon"] { color: var(--u-kanal-amazon); }
:root[data-huelle="glas"] .akte-design .akte-kopf .auftrag-kanal[data-kanal="shop"] { color: var(--u-kanal-shop); }
:root[data-huelle="glas"] .akte-design :is(.abzeichen, .akte-haupt-wort, .akte-kacheln dt, .akte-aktion b, .knopf, .paare dt),
:root[data-huelle="glas"] :is(.auftrag-liste, .retouren-ansicht) :is(.filter-wahl, .abzeichen, .auftrag-kanal, .knopf) { font-family: var(--u-font-hud); letter-spacing: normal; }
:root[data-huelle="glas"] .akte-fortschritt { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .akte-fortschritt li { border-top: 4px solid var(--u-akte-schritt-rand); padding-top: 9px; min-width: 0; }
:root[data-huelle="glas"] .akte-fortschritt b { display: block; color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .akte-fortschritt small { display: block; color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .akte-fortschritt li { border-top-color: var(--u-border); border-radius: var(--u-r-xs) var(--u-r-xs) 0 0; }
:root[data-huelle="glas"] .akte-fortschritt li[data-stand="ok"] { border-color: var(--u-ok); }
:root[data-huelle="glas"] .akte-fortschritt li[data-stand="jetzt"] { border-color: var(--u-brand-text); }
:root[data-huelle="glas"] .akte-fortschritt li[data-stand="jetzt"] b { color: var(--u-brand-text); }
:root[data-huelle="glas"] .akte-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
:root[data-huelle="glas"] .akte-kacheln > div { min-width: 0; padding: 14px 16px; border: 1px solid var(--u-border); background: var(--u-surface); }
:root[data-huelle="glas"] .akte-kacheln dt { color: var(--u-text-2); text-transform: uppercase; font-size: var(--u-t-2xs); }
:root[data-huelle="glas"] .akte-kacheln dd { margin: 3px 0 0; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .akte-kacheln b { font-size: var(--u-t-akte-kennzahl); font-family: var(--u-font-display); }
:root[data-huelle="glas"] .akte-kacheln small { display: block; margin-top: 3px; font-size: var(--u-t-2xs); color: var(--u-text-2); }
:root[data-huelle="glas"] .akte-design .akte-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
:root[data-huelle="glas"] .akte-design .akte-aktionen > li { min-width: 0; }
:root[data-huelle="glas"] .akte-design .akte-aktionen:has(> li:nth-child(7)) { grid-template-columns: 1.3fr repeat(6, minmax(0, 1fr)); }
:root[data-huelle="glas"] .akte-design .akte-aktionen .akte-aktion { position: relative; gap: 10px; min-width: 0; width: 100%; height: 72px; min-height: 72px; padding: 12px 10px; border-radius: 0; border-style: solid; }
:root[data-huelle="glas"] .akte-design .aktion-bild { flex: none; width: 44px; height: 44px; object-fit: contain; }
:root[data-huelle="glas"] .akte-design .akte-aktion b { font-size: var(--u-t-xs); line-height: 1.2; }
:root[data-huelle="glas"] .akte-design .akte-aktion small { font-size: var(--u-t-2xs); line-height: 1.3; margin-top: 4px; }
:root[data-huelle="glas"] .akte-design .aktion-etikett,
:root[data-huelle="glas"] .akte-design .aktion-naechste { position: absolute; right: 6px; top: 4px; padding: 1px 5px; background: var(--u-slot); color: var(--u-text-2); font: var(--u-w-medium) var(--u-t-2xs) var(--u-font-hud); letter-spacing: .08em; }
:root[data-huelle="glas"] .akte-design .aktion-naechste { top: auto; bottom: 4px; color: inherit; background: var(--u-akte-naechste-grund); text-transform: uppercase; }
/* AA: Der Hauptblock behält auch bei Hover/Fokus seine dunkle Markenfläche. */
:root[data-huelle="glas"] .akte-design .aktion-haupt,
:root[data-huelle="glas"] .akte-design :is(a, button).aktion-haupt:is(:hover, :focus-visible) { border-color: transparent; background: linear-gradient(115deg, var(--u-brand), var(--u-brand-2)); color: var(--u-text-on-brand); box-shadow: 0 0 14px var(--u-akte-aktion-schein); }
:root[data-huelle="glas"] .akte-design .aktion-haupt small { color: inherit; }
:root[data-huelle="glas"] .akte-design .aktion-haupt .aktion-etikett { display: none; }
:root[data-huelle="glas"] .akte-design .aktion-gedaempft { color: var(--u-text-2); }
:root[data-huelle="glas"] .akte-design .aktion-gedaempft img { opacity: .7; }
:root[data-huelle="glas"] .akte-design .karte { border: 1px solid var(--u-border); border-radius: var(--u-r-lg); box-shadow: none; padding: 18px; }
:root[data-huelle="glas"] .akte-design .karte > h2 { margin: -18px -18px 16px; padding: 14px 18px; border-bottom: 1px solid var(--u-border-soft); font-size: var(--u-t-md); }
/* Aufklappbare Aktenkarten verwenden denselben Kopf wie feste Karten (MB-L4). */
:root[data-huelle="glas"] .akte-design details.karte > summary { padding: 0; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .akte-design details.karte[open] > summary { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--u-border); }
/* Manuel 05.10.2026: Positionstabelle bündig in der Karte, ohne eigenen Rahmen und ohne runde Ecken; Kacheltitel fett. */
:root[data-huelle="glas"] .akte-design .karte > .zeilenkarten-rahmen { margin: -16px -18px 0; }
:root[data-huelle="glas"] .akte-design .karte > .zeilenkarten-rahmen:last-child { margin-bottom: -18px; }
:root[data-huelle="glas"] .akte-design .karte > .zeilenkarten-rahmen > .erp { border: 0; border-radius: 0; }
:root[data-huelle="glas"] .akte-design .karte > .zeilenkarten-rahmen + p { margin-top: 14px; }
:root[data-huelle="glas"] .akte-design .akte-aktion-text > b { font-weight: var(--u-w-titel); }
/* Links und technische Kennungen behalten den AA-Kontrast ihrer Markenfläche. */
:root[data-huelle="glas"] .akte-design .akte-kopf :is(.akte-kennung, .mono) { color: inherit; }
:root[data-huelle="glas"] .akte-design .werte { color: var(--u-text); }
:root[data-huelle="glas"] .akte-design .tabelle .mono { overflow-wrap: anywhere; }
:root[data-huelle="glas"] .akte-paar { align-items: stretch; grid-auto-rows: 1fr; }
:root[data-huelle="glas"] .akte-paar > .karte { height: 100%; margin: 0; }
:root[data-huelle="glas"] .akte-design .akte-kunde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:root[data-huelle="glas"] .kunde-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--u-text-on-brand); background: var(--u-verlauf-marke); }
:root[data-huelle="glas"] .akte-design .akte-posten .zeile-zusatz { display: inline-block; border-radius: 100px; background: var(--u-ok-bg); color: var(--u-ok-fg); padding: 1px 7px; }
:root[data-huelle="glas"] .akte-design .akte-agent h2 { display: flex; align-items: center; gap: 12px; border: 0; margin-bottom: 0; font-family: var(--u-font-hud); font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .akte-kira img,
:root[data-huelle="glas"] .akte-agent img { width: 58px; height: 58px; border: 2px solid var(--u-neon-violett); padding: 2px; border-radius: 16px; box-shadow: 0 0 14px var(--u-akte-agent-schein); object-fit: cover; object-position: top; }
:root[data-huelle="glas"] .akte-agent-satz { padding: 13px; background: linear-gradient(120deg, var(--u-surface-alt), var(--u-ok-bg)); border: 1px solid var(--u-border); border-radius: 0 12px 12px; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .akte-agent-cursor { display: inline-block; margin-left: 6px; width: 2px; height: 1em; background: var(--u-brand); vertical-align: text-bottom; }
:root[data-huelle="glas"] .akte-design .knopf-haupt { background: linear-gradient(115deg, var(--u-brand), var(--u-brand-2)); }
:root[data-huelle="glas"] .auftrag-leer { display: flex; align-items: center; gap: 12px; color: var(--u-text-2); font-size: var(--u-t-sm); min-height: 80px; }
:root[data-huelle="glas"] .auftrag-leer .sym { flex: none; width: 32px; height: 32px; padding: 6px; background: var(--u-surface-alt); color: var(--u-brand-text); }
:root[data-huelle="glas"] .akte-lauf { margin: 0; padding: 0 0 0 5px; list-style: none; }
:root[data-huelle="glas"] .akte-lauf > li { position: relative; padding: 0 0 18px 20px; border-left: 2px solid var(--u-border); }
:root[data-huelle="glas"] .akte-lauf > li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border: 2px solid var(--u-border-strong); border-radius: 50%; background: var(--u-surface); }
:root[data-huelle="glas"] .akte-lauf > li[data-stand="ok"]::before { border-color: var(--u-neon-petrol); background: var(--u-neon-petrol); box-shadow: 0 0 8px var(--u-neon-petrol); }
:root[data-huelle="glas"] .akte-lauf > li[data-stand="jetzt"]::before { border-color: var(--u-neon-violett); background: var(--u-neon-violett); box-shadow: 0 0 8px var(--u-neon-violett); }
:root[data-huelle="glas"] .akte-lauf > li[data-stand="stopp"]::before { border-color: var(--u-danger); }
:root[data-huelle="glas"] .akte-lauf > li:last-child { padding-bottom: 0; border-color: transparent; }
:root[data-huelle="glas"] .akte-lauf small { display: block; color: var(--u-text-2); font-size: var(--u-t-2xs); }
:root[data-huelle="glas"] .auftrag-quelldetails { padding: 14px 18px; border: 1px solid var(--u-border); background: var(--u-surface); }
:root[data-huelle="glas"] .auftrag-listenkopf { display: flex; align-items: center; gap: 14px; padding: 22px 0 14px; }
:root[data-huelle="glas"] .auftrag-listenkopf .seitenkopf { margin: 0; }
:root[data-huelle="glas"] .auftrag-listenzeichen { order: -1; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--u-brand); border-radius: 50%; color: var(--u-brand-text); }
:root[data-huelle="glas"] :is(.auftrag-liste, .retouren-ansicht) .filter-wahl { border-radius: 100px; }
:root[data-huelle="glas"] :is(.auftrag-liste, .retouren-ansicht) .filter-wahl[aria-current="true"] { color: var(--u-text-on-brand); background: linear-gradient(110deg, var(--u-akte-reiter-akzent), var(--u-brand)); box-shadow: 0 3px 8px var(--u-akte-reiter-schein); }
:root[data-huelle="glas"] .auftrag-liste .zelle-zustand .abzeichen::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@container inhalt (width < 90rem) {
  :root[data-huelle="glas"] .akte-design .akte-aktionen,
  :root[data-huelle="glas"] .akte-design .akte-aktionen:has(> li:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container inhalt (width < 60rem) {
  :root[data-huelle="glas"] .akte-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .akte-design .akte-paar { grid-auto-rows: auto; }
  :root[data-huelle="glas"] .akte-design .erp .zeile-neben { white-space: normal; overflow-wrap: anywhere; }
  :root[data-huelle="glas"] .akte-design:not(.akte-panel) > .akte-kopf:not(.charakterkarte, .profil-kopf) { margin-inline: calc(-1 * var(--u-s-5)); padding: 18px var(--u-s-5); }
  :root[data-huelle="glas"] .akte-design .akte-name { font-size: var(--u-t-2xl); }
  :root[data-huelle="glas"] .akte-design .akte-kopf .akte-zeile { display: flex; flex-wrap: wrap; gap: 5px; }
  :root[data-huelle="glas"] .akte-design .akte-haupt-wert { font-size: var(--u-t-akte-titel); }
  :root[data-huelle="glas"] .akte-design:not(.akte-panel) > .akte-kopf:not(.charakterkarte, .profil-kopf) > .akte-kopf-text { grid-template-areas: "etikett" "name" "satz" "zeile" "kennung" "werte"; }
  :root[data-huelle="glas"] .akte-fortschritt { grid-template-columns: 1fr; gap: 5px; }
  :root[data-huelle="glas"] .akte-fortschritt li { display: flex; justify-content: space-between; gap: 8px; padding-top: 5px; border-top-width: 2px; }
  :root[data-huelle="glas"] .akte-kacheln,
  :root[data-huelle="glas"] .akte-design .akte-aktionen,
  :root[data-huelle="glas"] .akte-design .akte-aktionen:has(> li:nth-child(7)),
  :root[data-huelle="glas"] .akte-paar { grid-template-columns: minmax(0, 1fr); }
}
/* Listenrahmen und rollende Reiter bleiben innerhalb des schmalen Fensters. */
:root[data-huelle="glas"] .auftrag-listentitel { margin: 0; font: var(--u-w-titel) var(--u-t-3xl) var(--u-font-display); }
:root[data-huelle="glas"] .auftrag-liste .erp-leiste,
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter,
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter > div { min-width: 0; max-width: 100%; }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .filter-gruppe { max-width: 100%; overflow-x: auto; justify-content: flex-start; }
:root[data-huelle="glas"] .akte-design .zeilenkarten-rahmen,
:root[data-huelle="glas"] .auftrag-liste .zeilenkarten-rahmen { border-radius: 0; }
@media (forced-colors: active) {
  :root[data-huelle="glas"] .akte-design > .akte-kopf::before,
  :root[data-huelle="glas"] .akte-design > .akte-kopf::after { display: none; }
}
/* ENDE AKTENDESIGN MB-L2 */
:root[data-huelle="glas"] [data-akte-abschnitt] { scroll-margin-top: var(--u-s-2); }
/* Ein Sprung fokussiert den Abschnitt (olymp.js): kein Ring nach Mausklick. */
:root[data-huelle="glas"] [data-akte-abschnitt]:focus:not(:focus-visible) { outline: none; }
:root[data-huelle="glas"] .akte-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--u-s-5) var(--u-s-7); min-width: 0; }
:root[data-huelle="glas"] .akte-kopf.bereich-1, :root[data-huelle="glas"] .pin.bereich-1, :root[data-huelle="glas"] .raum-raster.bereich-1 { --u-bereich: var(--u-bereich-1); --u-bereich-bg: var(--u-bereich-1-bg); --u-bereich-fg: var(--u-bereich-1-fg); }
:root[data-huelle="glas"] .akte-kopf.bereich-2, :root[data-huelle="glas"] .pin.bereich-2, :root[data-huelle="glas"] .raum-raster.bereich-2 { --u-bereich: var(--u-bereich-2); --u-bereich-bg: var(--u-bereich-2-bg); --u-bereich-fg: var(--u-bereich-2-fg); }
:root[data-huelle="glas"] .akte-kopf.bereich-3, :root[data-huelle="glas"] .pin.bereich-3, :root[data-huelle="glas"] .raum-raster.bereich-3 { --u-bereich: var(--u-bereich-3); --u-bereich-bg: var(--u-bereich-3-bg); --u-bereich-fg: var(--u-bereich-3-fg); }
:root[data-huelle="glas"] .akte-kopf.bereich-4, :root[data-huelle="glas"] .pin.bereich-4, :root[data-huelle="glas"] .raum-raster.bereich-4 { --u-bereich: var(--u-bereich-4); --u-bereich-bg: var(--u-bereich-4-bg); --u-bereich-fg: var(--u-bereich-4-fg); }
:root[data-huelle="glas"] .akte-kopf.bereich-5, :root[data-huelle="glas"] .pin.bereich-5, :root[data-huelle="glas"] .raum-raster.bereich-5 { --u-bereich: var(--u-bereich-5); --u-bereich-bg: var(--u-bereich-5-bg); --u-bereich-fg: var(--u-bereich-5-fg); }
:root[data-huelle="glas"] .akte-kopf.bereich-6, :root[data-huelle="glas"] .pin.bereich-6, :root[data-huelle="glas"] .raum-raster.bereich-6 { --u-bereich: var(--u-bereich-6); --u-bereich-bg: var(--u-bereich-6-bg); --u-bereich-fg: var(--u-bereich-6-fg); }
:root[data-huelle="glas"] .akte-bild {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: var(--u-r-lg);
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich, var(--u-zustand-grau)), var(--u-e-1);
}
/* Die Symbolkachel (seit H4 ruhig): gedaempfte Flaeche mit Kante. */
:root[data-huelle="glas"] .akte-symbol,
:root[data-huelle="glas"] [data-figur-rahmen] .figur-kuerzel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--u-r-lg);
  background: var(--u-surface-alt);
  box-shadow: inset 0 0 0 1px var(--u-border);
  color: var(--u-text-2);
  font-family: var(--u-font-display);
  font-size: var(--u-t-2xl);
  font-weight: var(--u-w-heavy);
}
:root[data-huelle="glas"] .akte-symbol .sym { width: 40px; height: 40px; }
:root[data-huelle="glas"] .akte-kopf-text { display: flex; flex: 1 1 18rem; flex-direction: column; gap: var(--u-s-3); min-width: 0; }
:root[data-huelle="glas"] :is(.akte-etikett, .verlaufsliste-tag) {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  margin: 0;
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-medium);
  line-height: var(--u-lh-caps);
  overflow-wrap: anywhere;
}
:root[data-huelle="glas"] .akte-name {
  margin: 0;
  color: var(--u-text);
  font-family: var(--u-font-display);
  font-size: min(var(--u-t-3xl), 9cqi);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-display);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
:root[data-huelle="glas"] .akte-kennung { margin: 0; color: var(--u-text-2); overflow-wrap: anywhere; }
/* Bildsatz E: lange Werkzeugnamen der Einordnung brechen (390 px). */
:root[data-huelle="glas"] .seitenkopf .einordnung { min-width: 0; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .akte-kennung .mono { color: inherit; }
:root[data-huelle="glas"] .akte-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2) var(--u-s-3); margin: 0; min-width: 0; }
:root[data-huelle="glas"] .akte-zeile > * { max-width: 100%; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .akte-seit { color: var(--u-text-2); font-size: var(--u-t-sm); }
/* „Wartet auf dich" (E11): Schein am Abzeichen UND das Wort — nie nur Farbe. */
:root[data-huelle="glas"] .akte-zeile .abzeichen[data-wartet] {
  box-shadow: 0 0 0 2px var(--u-neon-magenta);
  filter: drop-shadow(0 0 6px var(--u-neon-magenta-glow));
}
:root[data-huelle="glas"] .akte-wartet { color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] .akte-satz { max-width: 70ch; margin: 0; color: var(--u-text-2); font-size: var(--u-t-md); }
/* Verweise im Kopf (Lauf → seine offene Freigabe, Gegenprüfung E): Knöpfe, die umbrechen. */
:root[data-huelle="glas"] .akte-wege { display: flex; flex-wrap: wrap; gap: var(--u-s-2) var(--u-s-3); margin: 0; }
:root[data-huelle="glas"] :is(.akte, .entscheidung, .auftraege, .erp) .werkzeug-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-2);
  max-width: 100%;
  padding: 0 var(--u-s-3) 0 var(--u-s-2);
  border: 1px solid var(--u-brand-line);
  border-radius: var(--u-r-xs);
  background: var(--u-brand-wash);
  color: var(--u-brand-text);
  line-height: 1.6;
  /* In der Akte bricht der Chat-Chip um (Bildsatz E: 60 Zeichen bei 390 px). */
  white-space: normal;
}
:root[data-huelle="glas"] :is(.akte, .entscheidung, .auftraege, .erp) .werkzeug-chip .sym { flex: none; width: 13px; height: 13px; }
:root[data-huelle="glas"] :is(.akte, .entscheidung, .auftraege, .erp) .werkzeug-chip .mono { min-width: 0; color: inherit; font-size: var(--u-t-xs); overflow-wrap: anywhere; }

/* CHARAKTERKARTE (E7, v4 §12.4): Figur im Neonrahmen mit Bereichsring, Klassen-Schild. Langfassung: docs §15. */
:root[data-huelle="glas"] .charakterkarte {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--u-s-10);
  padding: var(--u-s-7) var(--u-s-7) var(--u-s-8);
  border-radius: var(--u-r-lg);
  background: linear-gradient(120deg, var(--u-bereich-bg, var(--u-surface-alt)) 0%, var(--u-surface) 60%);
  box-shadow: inset 0 0 0 1px var(--u-border);
}
:root[data-huelle="glas"] .charakter-bild {
  position: relative;
  margin-bottom: var(--u-s-5);
  padding: 3px;
  border-radius: var(--u-r-lg);
  background: var(--u-verlauf-neon-hoch);
  box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich, var(--u-zustand-grau)), 0 12px 30px var(--u-neon-violett-glow);
}
:root[data-huelle="glas"] .charakter-buehne {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: calc(var(--u-r-lg) - 3px);
  background: var(--u-raster-punkte) 0 0 / var(--u-raster-mass), var(--u-verlauf-marke);
}
:root[data-huelle="glas"] .charakter-figur { display: block; width: 150%; max-width: none; height: auto; margin-left: -24%; }
:root[data-huelle="glas"] .charakter-schild {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max-content;
  max-width: calc(100% - 2 * var(--u-s-4));
  margin: 0;
  padding: var(--u-s-2) var(--u-s-6);
  isolation: isolate;
  color: var(--u-text-on-brand);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-hud);
  line-height: var(--u-lh-caps);
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
  translate: -50% 50%;
}
:root[data-huelle="glas"] .charakter-schild::before,
:root[data-huelle="glas"] .vn-schild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--u-z-dahinter);
  border-radius: var(--u-r-xs);
  background: var(--u-bereich-fg, var(--u-brand));
  box-shadow: var(--u-glow-marke);
  transform: skewX(-14deg);
}
:root[data-huelle="glas"] .charakterkarte .akte-kopf-text { gap: var(--u-s-4); }
/* FIGUR-ERSATZ (P5-B): laedt die Figur nicht, setzt olymp.js Avatar bzw. Kuerzel als Kreis in ihren Rahmen. Langfassung: docs §22. */
:root[data-huelle="glas"] [data-figur-rahmen] .figur-ersatz {
  display: grid;
  place-items: center;
  inline-size: var(--figur-ersatz-mass, 6rem);
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: var(--u-r-full);
  box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich, var(--u-zustand-grau));
  object-fit: cover;
}
:root[data-huelle="glas"] .charakter-bild[data-figur-fehlt] { --figur-ersatz-mass: 5.5rem; }
:root[data-huelle="glas"] .charakter-bild[data-figur-fehlt] .charakter-buehne { aspect-ratio: auto; padding: var(--u-s-5) 0 var(--u-s-7); overflow: visible; }

/* WERTE (E15): der Balken ist Beikodierung (aria-hidden), Zehntel ueber `[data-zehntel]`, Bahn nie auf -3. Langfassung: docs §15. */
:root[data-huelle="glas"] .werte {
  display: flex;
  flex-direction: column;
  gap: var(--u-s-5);
  margin-top: var(--u-s-2);
  padding: var(--u-s-5) var(--u-s-6) var(--u-s-6);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  box-shadow: inset 0 0 0 1px var(--u-border), var(--u-e-1);
}
:root[data-huelle="glas"] .werte-titel,
:root[data-huelle="glas"] .widget-titel {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  margin: 0;
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
}
:root[data-huelle="glas"] .werte-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u-s-6); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .balken { display: grid; gap: var(--u-s-2); min-width: 0; }
:root[data-huelle="glas"] .balken-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--u-s-1) var(--u-s-3); margin: 0; }
:root[data-huelle="glas"] .balken-wort,
:root[data-huelle="glas"] .balken-urteil { color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .balken-zahl { font-family: var(--u-font-display); font-size: var(--u-t-md); font-weight: var(--u-w-heavy); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .balken-gut .balken-urteil { color: var(--u-ok-fg); }
:root[data-huelle="glas"] .balken-warn .balken-urteil { color: var(--u-warn-fg); }
:root[data-huelle="glas"] .balken-gefahr .balken-urteil { color: var(--u-danger-fg); }
:root[data-huelle="glas"] .balken-neben { margin: 0; color: var(--u-text-2); font-size: var(--u-t-sm); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .balken-bahn {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: var(--u-r-xs);
  background: var(--u-surface-2);
  box-shadow: inset 0 0 0 1px var(--u-border-soft);
}
:root[data-huelle="glas"] .balken-bahn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--u-surface-2) calc(10% - 2px) 10%);
  pointer-events: none;
}
@keyframes huelle-balken { from { transform: scaleX(calc(1 - var(--u-bewegung))); } }
:root[data-huelle="glas"] .balken-wert {
  width: 0;
  height: 100%;
  background: var(--u-verlauf-neon);
  transform-origin: left center;
  animation: huelle-balken calc(var(--u-dur-6) * var(--u-bewegung)) var(--u-ease) backwards;
  animation-delay: calc(4 * var(--u-staffel) * var(--u-bewegung));
}
:root[data-huelle="glas"] .balken-warn .balken-wert { background: var(--u-warn); }
:root[data-huelle="glas"] .balken-gefahr .balken-wert { background: var(--u-danger); }
:root[data-huelle="glas"] .balken-neutral .balken-wert { background: var(--u-zustand-grau); }
:root[data-huelle="glas"] .balken[data-zehntel="1"] .balken-wert { width: 10%; }
:root[data-huelle="glas"] .balken[data-zehntel="2"] .balken-wert { width: 20%; }
:root[data-huelle="glas"] .balken[data-zehntel="3"] .balken-wert { width: 30%; }
:root[data-huelle="glas"] .balken[data-zehntel="4"] .balken-wert { width: 40%; }
:root[data-huelle="glas"] .balken[data-zehntel="5"] .balken-wert { width: 50%; }
:root[data-huelle="glas"] .balken[data-zehntel="6"] .balken-wert { width: 60%; }
:root[data-huelle="glas"] .balken[data-zehntel="7"] .balken-wert { width: 70%; }
:root[data-huelle="glas"] .balken[data-zehntel="8"] .balken-wert { width: 80%; }
:root[data-huelle="glas"] .balken[data-zehntel="9"] .balken-wert { width: 90%; }
:root[data-huelle="glas"] .balken[data-zehntel="10"] .balken-wert { width: 100%; }

/* KENNZAHLEN (RT 17, GZ 2/14): eine Liste, die Kachel mit Ziel ist ein Verweis; ohne Messung „—", nie eine 0.
   Langfassung: docs §15.156. */
:root[data-huelle="glas"] .akte-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--u-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
:root[data-huelle="glas"] .akte-kennzahlen > li { display: flex; min-width: 0; }
:root[data-huelle="glas"] .kennzahl {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--u-s-1);
  min-width: 0;
  min-height: max(var(--u-s-8), var(--u-ziel-min));
  padding: var(--u-s-4) var(--u-s-5);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  box-shadow: inset 0 0 0 1px var(--u-border);
  color: var(--u-text);
  text-decoration: none;
}
:root[data-huelle="glas"] .kennzahl-kpi {
  font-family: var(--u-font-display);
  font-size: min(var(--u-t-2xl), 10cqi);
  font-weight: var(--u-w-heavy);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
:root[data-huelle="glas"] .kennzahl-nicht { color: var(--u-text-2); }
:root[data-huelle="glas"] .kennzahl-lang { font-size: min(var(--u-t-2xl), 8cqi); line-height: 1.15; }
:root[data-huelle="glas"] .kennzahl-wort { color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); overflow-wrap: anywhere; }
:root[data-huelle="glas"] a.kennzahl .kennzahl-wort { text-decoration: underline; text-decoration-color: var(--u-brand-line); text-underline-offset: 3px; }
:root[data-huelle="glas"] a.kennzahl:hover { background: var(--u-hover); box-shadow: inset 0 0 0 1px var(--u-border-strong); }

/* SPRUNGLEISTE (E6, GZ 23): klebende Reiter; `aria-current="location"` dreifach (Platte, Rand, Haken); rollt mit
   Rastpunkten, kein `scroll-behavior` (RT 21). Langfassung: docs §10, §15. */
/* Gegenprüfung E: klebt direkt an der Kopfleiste, Polster IN der rollenden Liste. Langfassung: docs §15. */
:root[data-huelle="glas"] .akte-sprung {
  position: sticky;
  top: var(--u-topbar-h);
  z-index: var(--u-z-sticky);
  margin-inline: calc(-1 * var(--u-s-2));
  padding: var(--u-s-2) var(--u-s-2) 0;
  border-bottom: 1px solid var(--u-border-soft);
  background: var(--u-surface);
}
:root[data-huelle="glas"] .akte-sprung-liste {
  display: flex;
  gap: var(--u-s-2);
  margin: 0;
  padding: var(--u-s-2) var(--u-s-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--u-s-3);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  list-style: none;
}
:root[data-huelle="glas"] .akte-sprung-liste > li { flex: none; scroll-snap-align: start; }
:root[data-huelle="glas"] .akte-sprung-ziel {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-2);
  min-width: max(var(--u-s-10), var(--u-ziel-min));
  min-height: max(var(--u-s-10), var(--u-ziel-min));
  padding: 0 var(--u-s-5);
  border-bottom: 3px solid transparent;
  isolation: isolate;
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-medium);
  text-decoration: none;
  white-space: nowrap;
}
:root[data-huelle="glas"] .akte-sprung-ziel:hover { color: var(--u-text); }
:root[data-huelle="glas"] .akte-sprung-ziel[data-akte-art="gefahr"] { color: var(--u-danger-fg); }
:root[data-huelle="glas"] .akte-sprung-ziel[data-akte-art="betont"] { border-bottom-color: var(--u-neon-magenta); }
:root[data-huelle="glas"] .akte-sprung-ziel[aria-current="location"] { border-bottom-color: var(--u-kopf-akzent); color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .akte-sprung-ziel[aria-current="location"]::after { content: "✓" / ""; }
:root[data-huelle="glas"] .akte-sprung-zahl {
  padding: 0 var(--u-s-2);
  border-radius: var(--u-r-xs);
  background: var(--u-surface);
  color: var(--u-text-2);
  font-variant-numeric: tabular-nums;
}

/* ABSCHNITTE: gefahr mit roter Kante, betont (nur mit Recht, E11) mit Magenta-Kante; die Entscheidungsreihe klebt ueber
   dem Dock. Langfassung: docs §15.157. */
:root[data-huelle="glas"] .karte[data-akte-art="gefahr"] { box-shadow: inset 4px 0 0 var(--u-danger), var(--u-e-2); }
:root[data-huelle="glas"] .karte[data-akte-art="betont"] { box-shadow: inset 4px 0 0 var(--u-neon-magenta), var(--u-e-2); }
:root[data-huelle="glas"] .entscheidung-etikett {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-2);
  margin: 0 0 var(--u-s-4) var(--u-s-2);
  padding: var(--u-s-1) var(--u-s-5);
  isolation: isolate;
  color: var(--u-text-on-brand);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-hud);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .entscheidung-etikett::before,
:root[data-huelle="glas"] .entscheidung-etikett::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--u-r-xs);
  transform: skewX(-14deg);
}
:root[data-huelle="glas"] .entscheidung-etikett::before { z-index: var(--u-z-dahinter); background: var(--u-verlauf-marke); box-shadow: var(--u-glow-marke); }
:root[data-huelle="glas"] .entscheidung-etikett::after { z-index: var(--u-z-dahinter-2); background: var(--u-neon-magenta); translate: 4px 4px; }
:root[data-huelle="glas"] .entscheidung-etikett .sym { width: 14px; height: 14px; }
:root[data-huelle="glas"] .blatt-formular > .knopfreihe:last-child,
:root[data-huelle="glas"] .entscheidung > .knopfreihe:last-child {
  position: sticky;
  bottom: var(--u-klebe-unten);
  z-index: var(--u-z-sticky);
  margin-inline: calc(-1 * var(--u-s-3));
  padding: var(--u-s-3);
  border-top: 1px solid var(--u-border-soft);
  border-radius: var(--u-r-sm);
  background: var(--u-surface);
  box-shadow: var(--u-e-klebend);
}
:root[data-huelle="glas"] .freigabe-parameter {
  padding: var(--u-s-4) var(--u-s-5);
  border-radius: var(--u-r-sm);
  background: var(--u-surface-alt);
  box-shadow: inset 0 0 0 1px var(--u-border-soft);
}
:root[data-huelle="glas"] .freigabe-parameter dd { overflow-wrap: anywhere; white-space: pre-wrap; }
/* Der Schlüssel steht, wie er im Paket steht — nicht versal wie die Etiketten der übrigen Paare (Groß- und
   Kleinschreibung ist Teil des Pakets). */
:root[data-huelle="glas"] .freigabe-parameter dt { overflow-wrap: anywhere; text-transform: none; letter-spacing: normal; }

/* KETTE IN DER AKTE: Stufen-Zeitleiste nur an `ol.kette` (einer echten Abfolge), nie an `ul.kette`. Langfassung: docs §15. */
:root[data-huelle="glas"] .akte ol.kette { position: relative; gap: var(--u-s-3); padding-left: var(--u-s-6); }
:root[data-huelle="glas"] .akte ol.kette::before {
  content: "";
  position: absolute;
  left: 5px;
  top: var(--u-s-3);
  bottom: var(--u-s-3);
  width: 2px;
  border-radius: 1px;
  background: var(--u-border);
}
:root[data-huelle="glas"] .akte ol.kette > li { position: relative; }
:root[data-huelle="glas"] .akte ol.kette > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--u-s-6) + 1px);
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--u-surface);
  box-shadow: 0 0 0 2px var(--u-log-farbe, var(--u-zustand-grau));
}
:root[data-huelle="glas"] .akte .gitter { grid-template-columns: minmax(0, 1fr); align-items: start; }
@container inhalt (width >= 44rem) {
  :root[data-huelle="glas"] .akte .gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-huelle="glas"] .werte-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u-s-6) var(--u-s-8); }
}
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .charakterkarte { grid-template-columns: minmax(0, 1fr); gap: var(--u-s-9); padding: var(--u-s-5) var(--u-s-5) var(--u-s-6); }
  :root[data-huelle="glas"] .charakter-bild { width: min(100%, 12rem); }
  :root[data-huelle="glas"] .charakter-schild { padding-inline: var(--u-s-4); font-size: var(--u-t-xs); }
  :root[data-huelle="glas"] .werte { padding: var(--u-s-4) var(--u-s-5) var(--u-s-5); }
  /* Gegenprüfung E: gleich breit (Grundmaß 0, `min-width: min-content`), bricht erst bei 320 px um. Langfassung: docs §15. */
  :root[data-huelle="glas"] .entscheidung > .knopfreihe:last-child { flex-wrap: wrap; gap: var(--u-s-2); }
  :root[data-huelle="glas"] .entscheidung > .knopfreihe:last-child > .knopf { flex: 1 1 0; min-width: min-content; padding-inline: var(--u-s-3); letter-spacing: normal; }
  :root[data-huelle="glas"] .blatt-formular > .knopfreihe:last-child > .knopf { flex: 1 1 auto; }
}
/* WENIG HOEHE OHNE TASTATUR (E17): die eine Hoehen-Abfrage; jeder Selektor mit `:not([data-tastatur="1"])`, gesetzt nur
   `position` und die zwei Versatz-Variablen auf 0. Langfassung: docs §15. */
@media (max-height: 30rem) {
  :root[data-huelle="glas"]:not([data-tastatur="1"]) { --u-akte-sprung-h: 0px; --u-klebe-h: 0px; }
  :root[data-huelle="glas"]:not([data-tastatur="1"]) .akte-sprung,
  :root[data-huelle="glas"]:not([data-tastatur="1"]) .blatt-formular > .knopfreihe:last-child,
  :root[data-huelle="glas"]:not([data-tastatur="1"]) .entscheidung > .knopfreihe:last-child { position: static; }
}

/* ── Blatt-Formular (S4, v4 §4.17/§12.4, Bauplan §11.4) ── Blatt ohne Rand, Abschnitte mit Raute, klebende Reihe; nie
   Rueckfrage oder Chat-Eingabe (32e). Langfassung: docs §11, §15. */
:root[data-huelle="glas"][data-tastatur="1"] { --u-klebe-unten: var(--u-tastatur-versatz); }
:root[data-huelle="glas"] .karte:has(> .blatt-formular) { padding: 0; border: 0; background: none; box-shadow: none; }
:root[data-huelle="glas"] .blatt-formular { max-width: 52rem; gap: var(--u-s-8); }
:root[data-huelle="glas"] .formular-abschnitt { display: flex; flex-direction: column; gap: var(--u-s-6); min-width: 0; }
/* Feldraster des Blatts: kurze Felder ab 2 × 14rem nebeneinander, der Rest volle Breite; DOM = Sicht. Langfassung: docs §15. */
:root[data-huelle="glas"] .blatt-formular .formular-abschnitt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }
:root[data-huelle="glas"] .blatt-formular .formular-abschnitt > :not(.feld),
:root[data-huelle="glas"] .blatt-formular .formular-abschnitt > .feld:is(fieldset, :has(textarea, .wahlfeld, .formular-reihe, .wahl)) { grid-column: 1 / -1; }
/* Der Fehlerstreifen über einem Blatt ist so breit wie das Blatt (v4: er liegt im Blatt). */
:root[data-huelle="glas"] :is(.streifen:has(~ .karte > .blatt-formular), .karte:has(> .blatt-formular) > .streifen) { max-width: 52rem; }
/* Felder mit Hilfe- oder Fehlertext verschieben ihre Nachbarn nicht: im Blatt und in der Akte oben bündig.
   Langfassung: docs §15.158. */
:root[data-huelle="glas"] :is(.blatt-formular, .akte) div.formular-reihe { align-items: flex-start; }
:root[data-huelle="glas"] .abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2) var(--u-s-4); padding-bottom: var(--u-s-4); border-bottom: 1px solid var(--u-border); }
:root[data-huelle="glas"] .abschnitt-nummer { display: grid; place-items: center; flex: none; width: var(--u-s-10); height: var(--u-s-10); border-radius: 50%; background: var(--u-surface-3); color: var(--u-text); font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] .abschnitt-kopf > :is(h2, h3) { flex: 1 1 12rem; margin: 0; font-family: var(--u-font-display); font-size: var(--u-t-xl); overflow-wrap: anywhere; }
:root[data-huelle="glas"] :is(.abschnitt-fortschritt, .schritt-stand) { color: var(--u-text-2); font-size: var(--u-t-xs); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .formular-abschnitt:has([aria-invalid="true"], .feld-fehler) .abschnitt-nummer { background: var(--u-danger-fg); color: var(--u-surface-2); }
:root[data-huelle="glas"] .formular-abschnitt:has([aria-invalid="true"], .feld-fehler) .abschnitt-fortschritt,
:root[data-huelle="glas"] .schritt[data-zustand="fehler"] :is(.schritt-nr, .schritt-stand) { color: var(--u-danger-fg); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .schritte { display: flex; flex-direction: column; gap: var(--u-s-5); padding: var(--u-s-5) var(--u-s-6) var(--u-s-6); border: 1px solid var(--u-border); border-radius: var(--u-r-md); background: var(--u-surface-alt); }
:root[data-huelle="glas"] .schritte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--u-s-3) var(--u-s-6); margin: 0; color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .schritte-titel { font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .schritte-summe b { color: var(--u-text); font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .schritte-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--u-s-5) var(--u-s-4); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .schritt { position: relative; display: flex; gap: var(--u-s-3); min-width: 0; padding-top: var(--u-s-5); }
:root[data-huelle="glas"] .schritt::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: 1px; background: var(--u-surface-3); transform: skewX(-20deg); transform-origin: left; animation: huelle-segment calc(var(--u-dur-6) * var(--u-bewegung)) var(--u-ease) backwards; }
:root[data-huelle="glas"] .schritt[data-zustand="fertig"]::before { background: var(--u-ok); }
:root[data-huelle="glas"] .schritt[data-zustand="fehler"]::before { background: var(--u-danger); }
:root[data-huelle="glas"][data-gleicher-pfad] .schritt::before { animation-name: none; }
@keyframes huelle-segment { from { transform: skewX(-20deg) scaleX(calc(1 - var(--u-bewegung))); } }
:root[data-huelle="glas"] .schritt-nr { color: var(--u-text-2); font-family: var(--u-font-display); font-size: var(--u-t-xl); font-weight: var(--u-w-heavy); line-height: 1; }
:root[data-huelle="glas"] .schritt-text { display: flex; flex-direction: column; gap: var(--u-s-1); min-width: 0; }
:root[data-huelle="glas"] .schritt-wort { font-size: var(--u-t-sm); font-weight: var(--u-w-strong); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .feld-hilfe { color: var(--u-text-2); }
:root[data-huelle="glas"] .feld-fehler { margin: 0; padding-left: var(--u-s-4); border-left: 3px solid var(--u-danger); }
:root[data-huelle="glas"] .feld:has(> :is(input, select, textarea)[required]) > label:not(:has(.feld-pflicht))::after,
:root[data-huelle="glas"] .feld-gruppe:has(> .wahlfeld input[required]) > legend:not(:has(.feld-pflicht))::after { content: " *" / ""; color: var(--u-danger-fg); }
:root[data-huelle="glas"] .feld-gruppe > legend { position: relative; margin-bottom: var(--u-s-3); color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .feld-zaehler { margin-left: var(--u-s-3); font-variant-numeric: tabular-nums; text-transform: none; }
:root[data-huelle="glas"] .wahlfeld { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
:root[data-huelle="glas"] .wahl { align-items: center; min-width: 0; padding: var(--u-s-3) var(--u-s-5); border: 1px solid var(--u-border-strong); border-radius: var(--u-r-sm); background: var(--u-surface); cursor: pointer; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .wahl:hover { border-color: var(--u-text-2); }
:root[data-huelle="glas"] .wahl:has(input:checked) { border-color: var(--u-brand-text); background: var(--u-brand-wash); }
:root[data-huelle="glas"] .wahl-bild { width: 48px; height: 48px; border-radius: var(--u-r-md); }
:root[data-huelle="glas"] .formular-fehler-liste { margin: var(--u-s-2) 0 0; padding-left: var(--u-s-7); }
:root[data-huelle="glas"] .formular-fehler-liste a { color: inherit; font-weight: var(--u-w-strong); }
/* Passwort: die dunkle Anmeldekarte wird ein Blatt auf Papier; ihr h2 wiederholte nur den Fenstertitel. */
:root[data-huelle="glas"] .karte.anmelden { max-width: none; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--u-text); }
:root[data-huelle="glas"] .karte.anmelden > h2 { display: none; }
:root[data-huelle="glas"] .anmelden .feld > label { color: var(--u-text); }
:root[data-huelle="glas"] .anmelden input { border-color: var(--u-border-strong); background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .anmelden input:focus { border-color: var(--u-brand-text); }

/* ── Zeitleiste (S5, E8, Bauplan §11.5) ── Linie und Marke mit Ring nach dem Zustand, das Wort steht immer daneben.
   Langfassung: docs §15.159. */
:root[data-huelle="glas"] .verlaufsliste { margin: 0 0 var(--u-s-5); padding: 0; list-style: none; }
:root[data-huelle="glas"] :is(.verlaufsliste-eintrag, .verlauf-zeile, .kanban-verlauf > li) { --u-marke: var(--u-s-11); --u-log-farbe: var(--u-zustand-grau); position: relative; display: grid; grid-template-columns: var(--u-marke) minmax(0, 1fr); gap: var(--u-s-2) var(--u-s-5); padding: 0 0 var(--u-s-6); border: 0; }
:root[data-huelle="glas"] :is(.verlaufsliste-eintrag, .verlauf-zeile, .kanban-verlauf > li):is(:not(:last-child), [data-anschluss])::before { content: ""; position: absolute; left: calc(var(--u-marke) / 2 - 1px); top: var(--u-marke); bottom: 0; width: 2px; background: var(--u-border); }
/* Anschluss: Faden durch den Kopf, am Ende bis zur Mitte (33d). */
:root[data-huelle="glas"] .verlaufsliste > .verlaufsliste-eintrag[data-anschluss]::before { top: 0; }
:root[data-huelle="glas"] .verlaufsliste > [data-anschluss]:last-child::before { bottom: auto; height: var(--u-s-7); }
:root[data-huelle="glas"] .verlaufsliste-eintrag:has(+ [data-anschluss]) { padding-bottom: var(--u-s-3); }
:root[data-huelle="glas"] [data-anschluss] > .verlaufsliste-marke { visibility: hidden; }
:root[data-huelle="glas"] :is(.verlaufsliste-marke, .verlauf-marke) { display: grid; place-items: center; width: var(--u-marke); height: var(--u-marke); overflow: hidden; border-radius: 50%; background: var(--u-surface); box-shadow: 0 0 0 2px var(--u-log-farbe); color: var(--u-text-2); font-family: var(--u-font-hud); font-size: var(--u-t-sm); font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] :is(.verlaufsliste-marke, .verlauf-marke) .sym { width: 18px; height: 18px; }
:root[data-huelle="glas"] :is(.verlaufsliste-eintrag, .verlauf-zeile)[data-art="gut"], :root[data-huelle="glas"] .akte ol.kette > li:has(> .abzeichen-gut), :root[data-huelle="glas"] .akte .spur-fertig { --u-log-farbe: var(--u-ok); }
:root[data-huelle="glas"] :is(.verlaufsliste-eintrag, .verlauf-zeile)[data-art="warn"], :root[data-huelle="glas"] .akte ol.kette > li:has(> .abzeichen-warn), :root[data-huelle="glas"] .akte .spur-wartet { --u-log-farbe: var(--u-warn); }
:root[data-huelle="glas"] :is(.verlaufsliste-eintrag, .verlauf-zeile)[data-art="gefahr"], :root[data-huelle="glas"] .akte ol.kette > li:has(> .abzeichen-gefahr), :root[data-huelle="glas"] .akte .spur-fehler { --u-log-farbe: var(--u-danger); }
:root[data-huelle="glas"] :is(.verlaufsliste-eintrag, .verlauf-zeile)[data-art="hinweis"], :root[data-huelle="glas"] .akte .spur-laeuft { --u-log-farbe: var(--u-info); }
:root[data-huelle="glas"] .verlaufsliste-eintrag[data-wartet] { --u-log-farbe: var(--u-neon-magenta); }
:root[data-huelle="glas"] .verlaufsliste-eintrag[data-wartet] > .verlaufsliste-marke { box-shadow: 0 0 0 2px var(--u-log-farbe), 0 0 10px var(--u-neon-magenta-glow); }
:root[data-huelle="glas"] .verlaufsliste-koerper { display: flex; flex-direction: column; gap: var(--u-s-3); min-width: 0; padding-top: var(--u-s-2); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .verlaufsliste-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2) var(--u-s-4); min-height: var(--u-s-10); margin: 0; }
:root[data-huelle="glas"] .verlaufsliste-kopf:has(> a.zeile-nummer ~ a.verlaufsliste-titel) { row-gap: calc(var(--u-s-2) + var(--u-ziel-min) / 2); }
:root[data-huelle="glas"] .verlaufsliste-titel { flex: 1 1 12rem; min-width: 0; color: var(--u-text); font-family: var(--u-font-display); font-size: var(--u-t-md); font-weight: var(--u-w-strong); text-decoration: none; }
:root[data-huelle="glas"] a.verlaufsliste-titel:hover { color: var(--u-brand-text); text-decoration: underline; }
:root[data-huelle="glas"] .verlaufsliste-zeit { margin-left: auto; color: var(--u-text-2); font-size: var(--u-t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-huelle="glas"] :is(.verlaufsliste-text, .verlaufsliste-fakten) { margin: 0; color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .verlaufsliste-fakten { display: flex; flex-wrap: wrap; gap: var(--u-s-2) var(--u-s-6); padding: 0; list-style: none; }
:root[data-huelle="glas"] .verlaufsliste-etikett { margin-right: var(--u-s-2); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .verlaufsliste-detail > summary { display: inline-flex; align-items: center; min-width: max(var(--u-s-8), var(--u-ziel-min)); min-height: max(var(--u-s-8), var(--u-ziel-min)); color: var(--u-brand-text); font-size: var(--u-t-sm); cursor: pointer; }
:root[data-huelle="glas"] .verlaufsliste-detail pre { margin-top: var(--u-s-2); padding: var(--u-s-4) var(--u-s-5); font-size: var(--u-t-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .verlaufsliste-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3); }
:root[data-huelle="glas"] .verlaufsliste-tag { margin: var(--u-s-6) 0 var(--u-s-4); }
:root[data-huelle="glas"] .verlaufsliste-rahmen > .verlaufsliste-tag:first-child { margin-top: 0; }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .verlaufsliste-zeit { flex-basis: 100%; margin-left: 0; }
}
/* Schritte der Lauf-Akte: das Zeichen wird die Marke, der Balken bleibt die Zeitachse. */
:root[data-huelle="glas"] .akte .spur-schritt { grid-template-columns: var(--u-s-8) 132px minmax(0, 1fr) auto; border-top: 0; }
:root[data-huelle="glas"] .akte .spur-flach .spur-schritt { grid-template-columns: var(--u-s-8) minmax(0, 1fr) auto; }
:root[data-huelle="glas"] .akte .spur-schritt:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--u-d-zeile-x) + var(--u-s-8) / 2 - 1px); top: 50%; height: 100%; width: 2px; background: var(--u-border); }
:root[data-huelle="glas"] .akte .spur-marke { position: relative; display: grid; place-items: center; height: var(--u-s-8); border-radius: 50%; background: var(--u-surface); box-shadow: 0 0 0 2px var(--u-log-farbe, var(--u-zustand-grau)); }

/* ── Chat (S6; Bauplan §9.2, Rezepte §11.6; E9, E10, E19, E20, E21) ── Teile und Gruende: docs/oberflaeche-inhalt.md
   §13. Langfassung: docs §15.160. */
:root[data-huelle="glas"] .chat-flaeche { border-color: var(--u-hairline); box-shadow: var(--u-e-1); }
:root[data-huelle="glas"] .chat-karte .chat-verlauf { padding: var(--u-s-7) var(--u-s-7) var(--u-s-8); }
:root[data-huelle="glas"] .nachricht-kopf { color: var(--u-text-2); }
:root[data-huelle="glas"] .nachricht-kopf .nachricht-name { color: var(--u-text); font-family: var(--u-font-hud); letter-spacing: var(--u-track-hud); text-transform: uppercase; }
/* Tagestrenner: HUD versal zwischen zwei Haarlinien (GZ 16 d). */
:root[data-huelle="glas"] .nachricht-tag {
  display: flex;
  align-items: center;
  gap: var(--u-s-4);
  margin: var(--u-s-5) 0 0;
  color: var(--u-text-2);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-hud);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .nachricht-tag::before,
:root[data-huelle="glas"] .nachricht-tag::after { content: ""; flex: 1; height: 1px; background: var(--u-hairline-strong); }
/* Avatar, Initialen, Platzhalter: 36 px, abgerundet-quadratisch; der Agent mit Neon-Ring, der Mensch im Markenverlauf. */
:root[data-huelle="glas"] .nachricht :is(.nachricht-avatar, .nachricht-initialen, .nachricht-avatar-platz) { flex: none; width: 36px; height: 36px; border-radius: var(--u-r-md); }
:root[data-huelle="glas"] .nachricht .nachricht-avatar { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 3px var(--u-neon-violett); }
:root[data-huelle="glas"] .nachricht :is(span.nachricht-avatar, .nachricht-initialen) {
  display: grid;
  place-items: center;
  background: var(--u-verlauf-marke);
  color: var(--u-text-on-brand);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-hud);
}
:root[data-huelle="glas"] .nachricht .nachricht-avatar-platz { height: 1px; }
/* Eine kurze Antwort ist eine Blase und kein Balken ueber die volle Breite (auch die entstehende); ein Dokument (E9)
   behaelt die volle Lesebreite. */
:root[data-huelle="glas"] .nachricht-agent > .nachricht-spalte { flex: 0 1 auto; max-width: min(46rem, 100%); }
:root[data-huelle="glas"] .nachricht-agent:has(> .nachricht-spalte > .nachricht-blase > .nachricht-text :is(.md-tabelle, pre), > .nachricht-spalte > .nachricht-blase > .plan-kopf) > .nachricht-spalte { flex-grow: 1; max-width: none; }
/* Die Blasen. Grundwerte je Art als Komponentenvariablen; die Dokument-Blase und der laufende Beitrag setzen sie um. */
:root[data-huelle="glas"] :where(.nachricht-agent, .nachricht-mensch) .nachricht-blase {
  --u-blase-bg: var(--u-verlauf-marke);
  --u-blase-fg: var(--u-text-on-brand);
  --u-blase-neben: var(--u-text-on-brand-2);
  --u-blase-link: var(--u-text-on-brand);
  --u-blase-code: var(--u-brand-2);
  --u-blase-spitze: var(--u-brand);
  position: relative;
  padding: var(--u-s-6) var(--u-s-7);
  border: 0;
  border-radius: var(--u-r-blase);
  border-start-start-radius: var(--u-r-sm);
  background: var(--u-blase-bg);
  box-shadow: none;
  color: var(--u-blase-fg);
}
:root[data-huelle="glas"] .nachricht-agent:not(.nachricht-anschluss) .nachricht-blase::before,
:root[data-huelle="glas"] .nachricht-mensch:not(.nachricht-anschluss) .nachricht-blase::before {
  content: "";
  position: absolute;
  top: var(--u-s-5);
  left: -8px;
  width: 9px;
  height: 14px;
  background: var(--u-blase-spitze);
  clip-path: polygon(100% 0, 0 40%, 100% 100%);
  pointer-events: none;
}
/* Im Verlauf: Links weiss unterstrichen, Code auf der zweiten Markenstufe, Nebenschrift .85, Fokusring weiss (E20);
   auf Papier (Dokument-, Du-, laufende Blase) dieselben Regeln mit den Werten des Papiers. */
:root[data-huelle="glas"] .nachricht-blase .nachricht-text :is(a, a:hover) { color: var(--u-blase-link); text-decoration: underline; text-underline-offset: 3px; }
:root[data-huelle="glas"] .nachricht-blase .nachricht-text :not(pre) > code { background: var(--u-blase-code); color: var(--u-blase-fg); }
:root[data-huelle="glas"] .nachricht-blase .nachricht-text :is(blockquote, hr) { border-color: var(--u-blase-neben); color: var(--u-blase-neben); }
:root[data-huelle="glas"] .nachricht-blase .nachricht-text :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
:root[data-huelle="glas"] .nachricht-blase :focus-visible { outline-color: var(--u-blase-link); }
/* DOKUMENT-BLASE (E9): nur der EIGENE Text zaehlt — das `pre.freigabe-paket` einer Freigabekarte macht keine (GZ 17). */
:root[data-huelle="glas"] .nachricht-agent:not(.nachricht-laufend) .nachricht-blase:has(> .nachricht-text :is(.md-tabelle, pre), > .plan-kopf) {
  --u-blase-bg: linear-gradient(var(--u-brand), var(--u-brand)) left / 3px 100% no-repeat, var(--u-surface);
  --u-blase-fg: var(--u-text);
  --u-blase-neben: var(--u-text-2);
  --u-blase-link: var(--u-brand-text);
  --u-blase-code: var(--u-surface-3);
  box-shadow: inset 0 0 0 1px var(--u-brand-line);
}
/* Tabellen rollen in ihrem Rahmen, statt Zahlen und Woerter zu zerreissen (`overflow-wrap: anywhere` der Blase erbte in die
   Zellen, die Tabelle wurde nie breiter als die Blase — Pruefbefund H1). */
:root[data-huelle="glas"] .nachricht-text .md-tabelle :is(th, td) { overflow-wrap: normal; }
:root[data-huelle="glas"] .nachricht-text .md-tabelle .md-rechts { white-space: nowrap; }
:root[data-huelle="glas"] .nachricht-plan .plan-kopf { border-color: var(--u-brand-line); font-family: var(--u-font-hud); letter-spacing: var(--u-track-hud); text-transform: uppercase; }
/* Du-Blase rechts (`--u-surface-3`, Haarkante), Spitze rechts; die dunklen Basisregeln der eigenen Blase zurueck. */
:root[data-huelle="glas"] .nachricht-mensch .nachricht-blase {
  --u-blase-bg: var(--u-surface-3);
  --u-blase-fg: var(--u-text);
  --u-blase-neben: var(--u-text-2);
  --u-blase-link: var(--u-brand-text);
  --u-blase-code: var(--u-surface);
  --u-blase-spitze: var(--u-surface-3);
  border-start-start-radius: var(--u-r-blase);
  border-start-end-radius: var(--u-r-sm);
  box-shadow: inset 0 0 0 1px var(--u-hairline);
}
:root[data-huelle="glas"] .nachricht-mensch:not(.nachricht-anschluss) .nachricht-blase::before { right: -8px; left: auto; clip-path: polygon(0 0, 100% 40%, 0 100%); }
:root[data-huelle="glas"] .nachricht-mensch :is(.nachricht-kopf, .nachricht-zeit-eigen) { color: var(--u-text-2); }
:root[data-huelle="glas"] .nachricht-mensch .nachricht-kopf .nachricht-name { color: var(--u-text); }
:root[data-huelle="glas"] .nachricht-mensch .nachricht-text pre { background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .nachricht-mensch .md-tabelle :is(table, th, td) { border-color: var(--u-border); }
:root[data-huelle="glas"] .nachricht-mensch .md-tabelle th { background: var(--u-surface); color: var(--u-text-2); }
:root[data-huelle="glas"] .nachricht-mensch .anhang-chip { border-color: var(--u-border); background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .nachricht-mensch .anhang-chip-groesse { color: var(--u-text-2); }
/* Ein ANDERER Mensch (Besprechung, zweiter Mensch im Mandanten): links, neutral auf Papier, mit seinem Kuerzel. */
:root[data-huelle="glas"] .nachricht-mensch.nachricht-fremd { align-self: flex-start; }
:root[data-huelle="glas"] .nachricht-fremd .nachricht-spalte { align-items: flex-start; }
:root[data-huelle="glas"] .nachricht-fremd .nachricht-blase { --u-blase-bg: var(--u-surface); --u-blase-code: var(--u-surface-3); --u-blase-spitze: var(--u-surface); border-start-start-radius: var(--u-r-sm); border-start-end-radius: var(--u-r-blase); }
:root[data-huelle="glas"] .nachricht-fremd:not(.nachricht-anschluss) .nachricht-blase::before { right: auto; left: -8px; clip-path: polygon(100% 0, 0 40%, 100% 100%); }
:root[data-huelle="glas"] .nachricht-fremd span.nachricht-initialen { background: var(--u-surface-3); color: var(--u-text); box-shadow: inset 0 0 0 1px var(--u-hairline-strong); }
/* Die Systemnotiz: Pille mittig, gedaempft auf Papier (`--u-text-2`, nie `--u-text-muted` — E13). */
:root[data-huelle="glas"] .nachricht-system .nachricht-blase { border-radius: var(--u-r-full); background: var(--u-surface-3); color: var(--u-text-2); }
/* EINLEGER in einer Blase: deckend auf Papier, eigene Schrift — nichts davon erbt Weiss vom Verlauf. */
:root[data-huelle="glas"] .nachricht-blase :is(.spur, .freigabe-karte, .anhang-chip, .plan-fuss) { background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .nachricht-blase .plan-fuss { margin-inline: calc(-1 * var(--u-s-4)); padding: var(--u-s-4); border-radius: var(--u-r-md); }
:root[data-huelle="glas"] .spur { border-color: var(--u-hairline-strong); border-radius: var(--u-r-md); }
:root[data-huelle="glas"] .spur-kopf { color: var(--u-text-2); font-family: var(--u-font-hud); letter-spacing: var(--u-track-hud); }
:root[data-huelle="glas"] .spur-auf { color: var(--u-brand-text); font-family: var(--u-font-hud); }
:root[data-huelle="glas"] .spur :is(.spur-quelle, .spur-mass, .spur-hinweis) { color: var(--u-text-2); }
:root[data-huelle="glas"] .nachricht-blase :is(.spur, .freigabe-karte, .anhang-chip, .plan-fuss) :focus-visible { outline-color: var(--u-brand-text); }
/* FREIGABEKARTE ALS SPIELKARTE (GZ 16 c): die Magenta-Kante nur mit `data-wartet` (E11), sonst `--u-border-strong`.
   Langfassung: docs §15.161. */
:root[data-huelle="glas"] .freigabe-karte {
  padding: var(--u-s-5) var(--u-s-6);
  border: 1px solid var(--u-border);
  border-left: 3px solid var(--u-border-strong);
  border-radius: var(--u-r-lg);
  background: var(--u-surface);
  box-shadow: var(--u-e-1);
  color: var(--u-text);
}
:root[data-huelle="glas"] .freigabe-karte[data-wartet] { border-left-color: var(--u-neon-magenta); box-shadow: var(--u-e-1), -6px 0 18px -10px var(--u-neon-magenta-glow); }
:root[data-huelle="glas"] .freigabe-karte-kopf { display: flex; align-items: center; gap: var(--u-s-4); margin-bottom: var(--u-s-4); }
:root[data-huelle="glas"] .freigabe-karte-portrait {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--u-r-md);
  background: var(--u-verlauf-marke);
  box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 3px var(--u-neon-violett);
  color: var(--u-text-on-brand);
  font-family: var(--u-font-hud);
  object-fit: cover;
}
:root[data-huelle="glas"] .freigabe-karte .freigabe-kopf { margin: 0; color: var(--u-text); font-family: var(--u-font-hud); letter-spacing: var(--u-track-hud); text-transform: uppercase; }
:root[data-huelle="glas"] .freigabe-karte .freigabe-kopf .sym { color: var(--u-brand-text); }
:root[data-huelle="glas"] .freigabe-karte .freigabe-kopf a { color: var(--u-brand-text); }
:root[data-huelle="glas"] .freigabe-zeile { align-items: center; gap: var(--u-s-3); }
:root[data-huelle="glas"] .freigabe-klasse { color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .freigabe-karte .werkzeug-chip {
  gap: var(--u-s-2);
  padding: 0 var(--u-s-3) 0 var(--u-s-2);
  border: 1px solid var(--u-brand-line);
  border-radius: var(--u-r-xs);
  background: var(--u-brand-wash);
  color: var(--u-brand-text);
  white-space: normal;
}
:root[data-huelle="glas"] .freigabe-karte .werkzeug-chip .sym { flex: none; width: 13px; height: 13px; }
:root[data-huelle="glas"] .freigabe-karte .werkzeug-chip .mono { min-width: 0; font-size: var(--u-t-xs); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .freigabe-karte :is(.freigabe-parameter, .freigabe-paket) { margin: 0 0 var(--u-s-4); padding: var(--u-s-3) var(--u-s-4); border-radius: var(--u-r-sm); background: var(--u-surface-alt); }
/* DER LAUFENDE BEITRAG: hell, gestrichelt; oben der Arbeitsstand in HUD, ohne Leben stumm (E21). */
:root[data-huelle="glas"] .nachricht-laufend .nachricht-blase {
  --u-blase-bg: var(--u-surface);
  --u-blase-fg: var(--u-text);
  --u-blase-neben: var(--u-text-2);
  --u-blase-link: var(--u-brand-text);
  --u-blase-code: var(--u-surface-3);
  --u-blase-spitze: var(--u-brand-line);
  border: 1px dashed var(--u-brand-line);
}
:root[data-huelle="glas"] .nachricht-laufend .nachricht-text > :last-child::after { color: var(--u-brand-text); }
:root[data-huelle="glas"] .laufend-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-s-2) var(--u-s-3);
  margin: 0 0 var(--u-s-3);
  color: var(--u-text-2);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--u-track-hud);
}
:root[data-huelle="glas"] .laufend-stand > span:not(.abzeichen) + span::before { content: "·" / ""; margin-right: var(--u-s-3); }
:root[data-huelle="glas"] .laufend-stand + :is(.tipp-punkte, .nachricht-text, .spur) { margin-top: var(--u-s-2); }
:root[data-huelle="glas"] .tipp-punkte { display: inline-flex; gap: 4px; padding: var(--u-s-2) 0; }
:root[data-huelle="glas"] .tipp-punkte > span { width: 6px; height: 6px; border-radius: var(--u-r-full); background: var(--u-brand); animation: huelle-tipp calc(var(--u-takt-puls) / 2 * var(--u-bewegung)) var(--u-ease) infinite; }
:root[data-huelle="glas"] .tipp-punkte > span:nth-child(2) { animation-delay: calc(var(--u-takt-puls) / 16 * var(--u-bewegung)); }
:root[data-huelle="glas"] .tipp-punkte > span:nth-child(3) { animation-delay: calc(var(--u-takt-puls) / 8 * var(--u-bewegung)); }
@keyframes huelle-tipp { 0%, 60%, 100% { opacity: .45; } 30% { opacity: 1; transform: translateY(calc(-3px * var(--u-bewegung))); } }
/* KOPF = SPRECH-KOPF: Figurkachel 88×88 ab 44rem (darunter der Avatar), Namensschild auf schraeger Platte mit der
   Welle. Langfassung: docs §15.162. */
:root[data-huelle="glas"] .chat-karte > .chat-kopfzeile { padding-block: clamp(var(--u-s-3), 2.5dvh, var(--u-s-6)); border-bottom: 0; box-shadow: inset 0 -2px 0 var(--u-hairline); }
:root[data-huelle="glas"] .chat-kopf-figur {
  flex: none;
  width: clamp(54px, 14dvh, 88px);
  height: clamp(54px, 14dvh, 88px);
  border-radius: var(--u-r-lg);
  background: var(--u-raster-punkte) 0 0 / var(--u-raster-mass), var(--u-verlauf-marke);
  object-fit: cover;
  object-position: 50% 0;
  object-view-box: inset(2% 18% 62% 18%);
}
:root[data-huelle="glas"] .chat-kopfzeile:has(> .chat-kopf-figur) > .chat-kopf-avatar { display: none; }
:root[data-huelle="glas"] .chat-kopfzeile .chat-kopfzeile-name,
:root[data-huelle="glas"] .figur-schild {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-4);
  max-width: 100%;
  padding: var(--u-s-1) var(--u-s-6);
  color: var(--u-text-on-brand);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xl);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-hud);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .chat-kopfzeile .chat-kopfzeile-name::before,
:root[data-huelle="glas"] .figur-schild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--u-z-dahinter);
  border-radius: var(--u-r-xs);
  background: var(--u-verlauf-marke);
  box-shadow: var(--u-glow-marke);
  transform: skewX(-14deg);
}
:root[data-huelle="glas"] .chat-kopfzeile-name .chat-kopf-nadel { color: var(--u-text-on-brand); }
/* Die Spalte bleibt `stretch` (sonst bekaemen Unterzeile und Schild ihre max-content-Breite und liefen ueber — L1a,
   Pruefbefund H1); nur das Schild steht links und bricht um. */
:root[data-huelle="glas"] .chat-kopf-titel > .chat-kopfzeile-name { align-self: flex-start; white-space: normal; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .chat-kopf-unter { row-gap: var(--u-s-2); color: var(--u-text-2); }
/* DIE WELLE (E10): ein laufendes Stabmuster, sichtbar nur, solange ein lebender Lauf im Verlauf steht.
   Langfassung: docs §15.163. */
:root[data-huelle="glas"] .sprech-welle { display: none; position: relative; overflow: hidden; flex: none; width: 36px; height: 16px; }
:root[data-huelle="glas"] .chat-karte:has(.nachricht-laufend:not(.nachricht-laufend-still)) .sprech-welle { display: inline-block; }
:root[data-huelle="glas"] .sprech-welle::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  background:
    linear-gradient(90deg, var(--u-text-on-brand) 0 3px, transparent 3px) 0 50% / 18px 40% repeat-x,
    linear-gradient(90deg, var(--u-text-on-brand) 0 3px, transparent 3px) 6px 50% / 18px 100% repeat-x,
    linear-gradient(90deg, var(--u-text-on-brand) 0 3px, transparent 3px) 12px 50% / 18px 65% repeat-x;
  animation: huelle-welle calc(var(--u-takt-puls) * var(--u-bewegung)) linear infinite;
}
@keyframes huelle-welle { to { transform: translateX(calc(-50% * var(--u-bewegung))); } }
/* BEGRUESSUNGSKARTE (GZ 16 a): Papier, Figur 120×120, Name in Bricolage, Fachbereich, Persona-Satz, zwei Zahlen ohne Ziel. */
:root[data-huelle="glas"] .chat-karte:has(> .chat-begruessung) { background: var(--u-surface-2); }
:root[data-huelle="glas"] .chat-karte:has(> .chat-begruessung) > .chat-verlauf { flex: 0 1 auto; padding: 0; }
:root[data-huelle="glas"] .chat-begruessung { display: grid; gap: var(--u-s-5); margin: auto var(--u-s-7); padding: var(--u-s-6) 0; }
:root[data-huelle="glas"] .chat-begruessung-agent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-s-6);
  padding: var(--u-s-6);
  border-radius: var(--u-r-lg);
  background: var(--u-surface);
  box-shadow: inset 3px 0 0 var(--u-neon-violett), var(--u-e-1);
}
:root[data-huelle="glas"] .chat-begruessung-bild {
  display: grid;
  flex: none;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: var(--u-r-lg);
  background: var(--u-raster-punkte) 0 0 / var(--u-raster-mass), var(--u-verlauf-marke);
  color: var(--u-text-on-brand);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xl);
  object-fit: cover;
}
:root[data-huelle="glas"] .chat-begruessung-bild.ist-figur { object-position: 50% 0; object-view-box: inset(2% 18% 62% 18%); }
:root[data-huelle="glas"] .chat-begruessung-text { display: grid; flex: 1 1 16rem; gap: var(--u-s-3); min-width: 0; }
:root[data-huelle="glas"] .chat-begruessung-text p { margin: 0; }
:root[data-huelle="glas"] .chat-begruessung-name { font-family: var(--u-font-display); font-size: var(--u-t-2xl); font-weight: var(--u-w-heavy); letter-spacing: var(--u-track-tight); }
:root[data-huelle="glas"] .chat-begruessung-satz { color: var(--u-text-2); }
:root[data-huelle="glas"] .chat-begruessung-werte { display: flex; flex-wrap: wrap; gap: var(--u-s-3) var(--u-s-6); margin: 0; padding: 0; list-style: none; color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .chat-begruessung-werte b { color: var(--u-text); font-family: var(--u-font-hud); font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .chat-begruessung-leer { margin: 0; color: var(--u-text-2); text-align: center; }
/* EINGABE: deckend, Oberkante im Neonverlauf, Textfeld als Pille, Fokus Marke + violetter Schein; Senden mit Wort. */
:root[data-huelle="glas"] .chat-karte .chat-eingabe,
:root[data-huelle="glas"] .chat-karte .chat-instanz-eingabe { position: relative; border-top: 0; }
:root[data-huelle="glas"] .chat-karte .chat-eingabe::before,
:root[data-huelle="glas"] .chat-karte .chat-instanz-eingabe::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--u-verlauf-neon); }
:root[data-huelle="glas"] .chat-eingabe-reihe textarea { border-radius: var(--u-r-xl); padding-inline: var(--u-s-7); }
/* Ab 100rem steht das Gespraech auf /gespraeche in einer Lesespalte; Flaeche und Neonlinie bleiben breit (M1-B). */
@container inhalt (width >= 100rem) {
  :root[data-huelle="glas"] .chat-flaeche .chat-karte :where(.chat-verlauf, .chat-eingabe) { padding-inline: max(var(--u-s-7), (100% - var(--u-gespraech-breite)) / 2); }
}
:root[data-huelle="glas"] .chat-eingabe-reihe textarea:focus-visible { border-color: var(--u-brand-text); box-shadow: 0 0 0 3px var(--u-neon-violett-glow); }
:root[data-huelle="glas"] .chat-eingabe .plan-schalter,
:root[data-huelle="glas"] .chat-eingabe.ist-plan .plan-schalter,
:root[data-huelle="glas"] .chat-instanz-eingabe .plan-schalter { color: var(--u-text-2); font-family: var(--u-font-hud); letter-spacing: var(--u-track-hud); }
:root[data-huelle="glas"] .plan-schalter-feld:checked + .plan-schalter-bahn { background: var(--u-verlauf-marke); box-shadow: var(--u-glow-marke); }
:root[data-huelle="glas"] .chat-eingabe .chat-anhang-knopf,
:root[data-huelle="glas"] .chat-instanz-eingabe .chat-anhang-knopf { border-radius: var(--u-r-full); }
/* ANHAENGE: HUD-Chips; das „×" als Ziel (24 px am feinen Zeiger, 48 am Finger); ein Fehler mit Wort und Kante. */
:root[data-huelle="glas"] .chat-anhang { border-radius: var(--u-r-sm); background: var(--u-surface); font-family: var(--u-font-hud); }
:root[data-huelle="glas"] .chat-anhang-groesse { color: var(--u-text-2); }
:root[data-huelle="glas"] .chat-anhang-weg { width: max(var(--u-s-8), var(--u-ziel-min)); height: max(var(--u-s-8), var(--u-ziel-min)); border-radius: var(--u-r-sm); color: var(--u-text-2); }
:root[data-huelle="glas"] .chat-anhang.ist-fehler { box-shadow: inset 3px 0 0 var(--u-danger); }
:root[data-huelle="glas"] .chat-anhang.ist-fehler .chat-anhang-groesse::before { content: "Fehler: "; font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .anhang-chip { border-radius: var(--u-r-sm); font-family: var(--u-font-hud); }
:root[data-huelle="glas"] .anhang-chip-groesse { color: var(--u-text-2); }
/* LEISTE: Zeitgruppen HUD, der aktive Eintrag wie in der Landkarte; nur sein Titel bricht um.
   Langfassung: docs §15.164. */
:root[data-huelle="glas"] .chat-leiste-ueberschrift { font-family: var(--u-font-hud); font-size: var(--u-t-lg); letter-spacing: var(--u-track-hud); text-transform: uppercase; }
:root[data-huelle="glas"] .chat-leiste-gruppe { color: var(--u-text-2); font-family: var(--u-font-hud); letter-spacing: var(--u-track-hud); }
:root[data-huelle="glas"] .chat-leiste-fuss a { color: var(--u-text-2); }
:root[data-huelle="glas"] .chat-leiste-eintrag { position: relative; border-radius: var(--u-r-md); }
:root[data-huelle="glas"] .chat-leiste-eintrag[aria-current="page"] { border-color: transparent; background: var(--u-surface); box-shadow: inset 0 0 0 1px var(--u-neon-violett), var(--u-e-1); }
:root[data-huelle="glas"] .chat-leiste-eintrag[aria-current="page"]::before { content: ""; position: absolute; top: var(--u-s-4); bottom: var(--u-s-4); left: -1px; width: 3px; border-radius: 0 3px 3px 0; background: var(--u-verlauf-neon-hoch); }
/* EINTRITT: die letzten zwoelf Nachrichten gestaffelt von unten (× `--u-bewegung`); Eingefuegtes tritt sofort ein.
   Langfassung: docs §15.165. */
@keyframes huelle-nachricht-ein { from { opacity: 0; transform: translateY(calc(12px * var(--u-bewegung))); } }
:root[data-huelle="glas"] .chat-verlauf > :is(article:nth-last-of-type(-n + 12), p[data-eingefuegt]) {
  animation: huelle-nachricht-ein calc(var(--u-dur-5) * var(--u-bewegung)) var(--u-ease-play) backwards;
  animation-delay: calc((12 - var(--u-nr, 12)) * 2 * var(--u-staffel) * var(--u-bewegung));
}
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(1) { --u-nr: 1; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(2) { --u-nr: 2; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(3) { --u-nr: 3; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(4) { --u-nr: 4; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(5) { --u-nr: 5; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(6) { --u-nr: 6; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(7) { --u-nr: 7; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(8) { --u-nr: 8; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(9) { --u-nr: 9; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(10) { --u-nr: 10; }
:root[data-huelle="glas"] .chat-verlauf > article:nth-last-of-type(11) { --u-nr: 11; }
:root[data-huelle="glas"] .chat-verlauf > :is(article, p)[data-eingefuegt] { animation-delay: calc(0s * var(--u-bewegung)); }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .chat-kopf-figur { display: none; }
  :root[data-huelle="glas"] .chat-kopfzeile:has(> .chat-kopf-figur) > .chat-kopf-avatar { display: inline-flex; }
  :root[data-huelle="glas"] .chat-kopfzeile .chat-kopfzeile-name { font-size: var(--u-t-lg); }
  :root[data-huelle="glas"] .chat-karte .chat-verlauf { padding: var(--u-s-5) var(--u-s-4) var(--u-s-6); }
  :root[data-huelle="glas"] .nachricht { gap: var(--u-s-4); }
  :root[data-huelle="glas"] .nachricht-mensch { max-width: 92%; }
  :root[data-huelle="glas"] .nachricht:is(.nachricht-agent, .nachricht-mensch) .nachricht-blase { padding: var(--u-s-5) var(--u-s-6); }
  :root[data-huelle="glas"] .chat-begruessung { margin-inline: var(--u-s-4); }
  :root[data-huelle="glas"] .chat-begruessung-bild { width: 88px; height: 88px; }
}
/* EINE SPALTE (P4-M2): feste Hoehe, Eingabe ueber dem Dock, Kopf in einer Zeile. Langfassung: docs §15.29a. */
@container inhalt (width < 58rem) {
  :root[data-huelle="glas"] .chat-flaeche { min-height: 10rem; }
  :root[data-huelle="glas"][data-tastatur="1"] .chat-flaeche { height: calc(var(--u-sicht-h) - var(--u-rahmen-h) + var(--u-dock-h)); }
  :root[data-huelle="glas"][data-tastatur="1"] .chat-flaeche .chat-kopfzeile:not(:focus-within),
  :root[data-huelle="glas"] .chat-flaeche .chat-kopfzeile:focus-within ~ .chat-springen,
  :root[data-huelle="glas"] .chat-flaeche :is(.chat-kopfzeile > :is(.chat-kopf-figur, .chat-kopfzeile-frei, .chat-kopf-modell, a), .chat-kopf-unter > :is(.chat-kopf-mandant, .chat-kopf-themawahl, [class*="-bereich-"])) { display: none; }
  :root[data-huelle="glas"] .chat-flaeche .chat-verlauf { max-height: none; padding-block: var(--u-s-3); }
  :root[data-huelle="glas"] .chat-flaeche .chat-begruessung { min-height: 0; overflow-y: auto; }
  :root[data-huelle="glas"] .chat-flaeche .chat-eingabe { padding-block: var(--u-s-4); }
  :root[data-huelle="glas"] .chat-flaeche .chat-kopfzeile { flex-wrap: nowrap; padding: var(--u-s-3) var(--u-s-5); }
  :root[data-huelle="glas"] .chat-flaeche .chat-kopfzeile > .chat-kopf-avatar { display: inline-flex; width: var(--u-s-10); height: var(--u-s-10); }
  :root[data-huelle="glas"] .chat-flaeche .chat-kopf-titel { flex: 1 1 0; }
  :root[data-huelle="glas"] .chat-flaeche .chat-kopf-titel > .chat-kopfzeile-name { display: block; padding-inline: var(--u-s-4); overflow: clip; overflow-clip-margin: var(--u-s-2); font-size: var(--u-t-md); text-overflow: ellipsis; white-space: nowrap; }
  :root[data-huelle="glas"] .chat-flaeche .chat-kopf-unter:has(> .chat-kopf-thema):not(:has(> .chat-kopf-thema ~ :not([hidden], .chat-kopf-themawahl))) { flex-wrap: nowrap; margin: calc(-1 * var(--u-s-2)); padding: var(--u-s-2); overflow: hidden; }
  :root[data-huelle="glas"] .chat-flaeche .chat-kopf-unter > :not(.chat-kopf-thema) { flex: none; }
  :root[data-huelle="glas"] .chat-flaeche .chat-kopf-thema { flex: 1 1 0; min-inline-size: max(var(--u-s-10), var(--u-ziel-min)); max-inline-size: fit-content; }
  :root[data-huelle="glas"] .chat-flaeche .chat-kopf-formular { flex-wrap: wrap; }
}

/* ── Kanban (S6/H2; Bauplan §9.3, Rezepte §11.7; docs/oberflaeche-inhalt.md §14) ── Die Leiste der Karte traegt NUR die
   Frist (GZ 18). Langfassung: docs §15.166. */
:root[data-huelle="glas"] .kanban-rahmen { padding: var(--u-s-3) var(--u-s-2) var(--u-s-5); scroll-padding-inline: var(--u-s-2); }
:root[data-huelle="glas"] .kanban-spalte { flex-grow: 1; max-width: 26rem; border-color: var(--u-hairline); border-radius: var(--u-r-lg); background: var(--u-verlauf-neon) top / 100% 3px no-repeat, var(--u-surface-alt); box-shadow: var(--u-e-1); }
:root[data-huelle="glas"] .kanban-spalte-ende { background: linear-gradient(var(--u-ok), var(--u-ok)) top / 100% 3px no-repeat, var(--u-surface-alt); }
:root[data-huelle="glas"] .karte .kanban-spalte-kopf,
:root[data-huelle="glas"] .kanban-kommentar-kopf > strong { font-family: var(--u-font-hud); font-size: var(--u-t-md); letter-spacing: var(--u-track-hud); text-transform: uppercase; }
:root[data-huelle="glas"] .kanban-karte { --u-log-farbe: transparent; padding: var(--u-s-5) var(--u-s-5) var(--u-s-4) var(--u-s-6); border-color: var(--u-border-soft); border-radius: var(--u-r-md); box-shadow: inset 4px 0 0 var(--u-log-farbe), var(--u-e-1); transition: translate var(--u-dur-2) var(--u-ease-play), box-shadow var(--u-dur-2) var(--u-ease); }
:root[data-huelle="glas"] .kanban-karte:has(.kanban-frist.abzeichen-gut) { --u-log-farbe: var(--u-ok); }
:root[data-huelle="glas"] .kanban-karte:has(.kanban-frist.abzeichen-warn) { --u-log-farbe: var(--u-warn); }
:root[data-huelle="glas"] .kanban-karte:has(.kanban-frist.abzeichen-gefahr) { --u-log-farbe: var(--u-danger); }
@media (hover: hover) {
  :root[data-huelle="glas"] .kanban-karte:hover { translate: 0 calc(-2px * var(--u-bewegung)); box-shadow: inset 4px 0 0 var(--u-log-farbe), var(--u-e-1), var(--u-glow-neon); }
}
:root[data-huelle="glas"] .kanban-karte:focus-within { border-color: var(--u-neon-violett); box-shadow: inset 4px 0 0 var(--u-log-farbe), var(--u-e-1), var(--u-glow-neon); }
:root[data-huelle="glas"] .kanban-karte[data-konflikt] { outline: 2px solid var(--u-warn); outline-offset: 2px; }
:root[data-huelle="glas"] .kanban-karte[data-konflikt]::before,
:root[data-huelle="glas"] .kanban-karte-leute { color: var(--u-text-2); font-family: var(--u-font-hud); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); letter-spacing: var(--u-track-hud); }
:root[data-huelle="glas"] .kanban-karte[data-konflikt]::before { content: "Nicht verschoben · neuer Stand" / ""; color: var(--u-warn-fg); text-transform: uppercase; }
:root[data-huelle="glas"] .kanban-karte-titel { font-size: var(--u-t-md); line-height: var(--u-lh-tight); }
:root[data-huelle="glas"] .kanban-karte a.abzeichen { text-decoration: underline; }
/* Prüfkorrektur H2: Abstand am Finger (Lauf-Verweis), Pfeilreihe über dem Titel-Ziel, Ring am Rahmen. docs §14. */
:root[data-huelle="glas"] .kanban-karte-merkmale:has(> a) { row-gap: max(var(--u-s-2), var(--u-ziel-min) / 2 - 9px); margin-block: max(0px, var(--u-ziel-min) / 2 - 15px); }
:root[data-huelle="glas"] .kanban-zuege { position: relative; }
:root[data-huelle="glas"] .kanban-zuege :where(.knopf-klein:not(:disabled)) { box-shadow: inset 0 0 0 1px var(--u-hairline-strong); }
:root[data-huelle="glas"] .kanban-rahmen:focus-visible { outline: 2px solid var(--u-brand-text); outline-offset: 2px; }
:root[data-huelle="glas"] .kanban-wischen { display: none; }
:root[data-huelle="glas"] .kanban-karte-leute { display: flex; align-items: center; gap: var(--u-s-3); }
:root[data-huelle="glas"] .kanban-karte-bilder { display: flex; flex: none; }
:root[data-huelle="glas"] .kanban-karte-bilder > * { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; background: var(--u-verlauf-marke); box-shadow: 0 0 0 2px var(--u-surface); color: var(--u-text-on-brand); object-fit: cover; }
:root[data-huelle="glas"] .kanban-karte-bilder > :first-child { margin-left: 0; }
:root[data-huelle="glas"] .kanban-leer { padding: var(--u-s-5); border: 1px dashed var(--u-border-strong); border-radius: var(--u-r-md); color: var(--u-text-2); }
:root[data-huelle="glas"] .kanban-platzhalter { border-color: var(--u-neon-violett); border-radius: var(--u-r-md); box-shadow: var(--u-glow-neon); }
:root[data-huelle="glas"] .kanban > p[role="status"]:not(:empty) { padding: var(--u-s-3) var(--u-s-5); border-left: 3px solid var(--u-brand-text); background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .kanban:has([data-konflikt]) > p[role="status"] { border-left-color: var(--u-warn); }
/* Einrichten: eine lange Kennung (Erinnerungen) bricht um — sonst rollte das Board bei 390 px quer (392 px); die
   kleinen Knoepfe sind ganze Ziele. */
:root[data-huelle="glas"] .kanban-spaltenzeile > span { min-width: 0; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .kanban-spaltenzeile .knopf-klein { min-width: max(var(--u-s-8), var(--u-ziel-min)); min-height: max(var(--u-s-8), var(--u-ziel-min)); }
:root[data-huelle="glas"] .kanban-kommentar { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--u-s-2) var(--u-s-4); justify-items: start; border: 0; }
:root[data-huelle="glas"] .kanban-kommentar-marke { display: grid; grid-row: span 2; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: var(--u-r-md); background: var(--u-verlauf-marke); color: var(--u-text-on-brand); font-family: var(--u-font-hud); font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] .kanban-kommentar[data-art="agent"] > .kanban-kommentar-marke { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 3px var(--u-neon-violett); }
:root[data-huelle="glas"] .kanban-kommentar[data-art="mensch"]:not([data-eigen]) > .kanban-kommentar-marke { background: var(--u-surface-3); color: var(--u-text); box-shadow: inset 0 0 0 1px var(--u-hairline-strong); }
:root[data-huelle="glas"] .kanban-kommentar > p { margin: 0; }
:root[data-huelle="glas"] .kanban-kommentar-kopf { color: var(--u-text-2); }
:root[data-huelle="glas"] .kanban-kommentar > .kanban-beschreibung { max-width: min(40rem, 100%); padding: var(--u-s-4) var(--u-s-6); border-radius: var(--u-r-sm) var(--u-r-blase) var(--u-r-blase); background: var(--u-surface); box-shadow: inset 0 0 0 1px var(--u-hairline); }
:root[data-huelle="glas"] .kanban-kommentar[data-art="agent"] > .kanban-beschreibung { background: var(--u-verlauf-marke); box-shadow: none; color: var(--u-text-on-brand); }
:root[data-huelle="glas"] .kanban-kommentar[data-eigen] { grid-template-columns: minmax(0, 1fr) 36px; justify-items: end; }
:root[data-huelle="glas"] .kanban-kommentar[data-eigen] > .kanban-kommentar-marke { grid-area: 1 / 2 / span 2; }
:root[data-huelle="glas"] .kanban-kommentar[data-eigen] > :not(.kanban-kommentar-marke) { grid-column: 1; }
:root[data-huelle="glas"] .kanban-kommentar[data-eigen] > .kanban-beschreibung { border-radius: var(--u-r-blase) var(--u-r-sm) var(--u-r-blase) var(--u-r-blase); background: var(--u-surface-3); }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .kanban-rahmen { scroll-snap-type: x mandatory; }
  :root[data-huelle="glas"] .kanban-spalte { flex: 0 0 min(18rem, 100cqi - 7.5rem); padding: var(--u-s-4); scroll-snap-align: start; }
  :root[data-huelle="glas"] .kanban-karte { padding-inline: var(--u-s-5); }
  :root[data-huelle="glas"] .kanban-zuege { gap: 0; }
  :root[data-huelle="glas"] .kanban-wischen { display: block; }
}

/* ── Abschluss (S7, Commit I; docs §17) ── Ziele aus dem vollen Bildsatz, Sicht-Pille schrumpft, Handtabelle ohne
   `role` rollt am Telefon als Tabelle (E16). Langfassung: docs §15. */
:root[data-huelle="glas"] :is(.filterzeile, .formular-reihe) .knopf { min-height: max(var(--u-d-feld), var(--u-ziel-min)); }
:root[data-huelle="glas"] :is(.filterzeile, .formular-reihe) :is(select, input[type="file"]) { height: max(var(--u-d-feld), var(--u-ziel-min)); }
:root[data-huelle="glas"] .wahl { min-height: max(var(--u-s-8), var(--u-ziel-min)); }
/* Das Mausrad rollt ueber einer Tabelle die Seite weiter (die Basisregel bindet mit `contain` beide Achsen).
   Langfassung: docs §15. */
:root[data-huelle="glas"] :is(.tabelle-rahmen, .md-tabelle) { overscroll-behavior-y: auto; }
:root[data-huelle="glas"] :where(.zeilenmenue-punkt, .anhang-chip, details.block-eng > summary, .feld input[type="file"]) { min-height: max(var(--u-s-8), var(--u-ziel-min)); }
:root[data-huelle="glas"] .entscheidung .feld > label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: var(--u-s-4); min-height: max(var(--u-s-8), var(--u-ziel-min)); }
:root[data-huelle="glas"] :is(ul.kette li, [data-kacheln] > .karte > h2) > a { display: inline-flex; align-items: center; min-width: max(var(--u-s-8), var(--u-ziel-min)); min-height: max(var(--u-s-8), var(--u-ziel-min)); }
:root[data-huelle="glas"] .tabelle td a { min-width: max(var(--u-s-8), var(--u-ziel-min)); }
/* Titel und Thema im Chat-Kopf (role=button) mindestens 24 px hoch (2.5.8); 48 am Finger kaeme mit dem Kopfumbau (§19). */
:root[data-huelle="glas"] .chat-kopf-thema[data-oeffnet] { line-height: var(--u-s-8); }
:root[data-huelle="glas"] .chat-kopf-themawahl[data-oeffnet] { min-height: var(--u-s-8); }
/* Pruefkorrektur I (docs §17): Rechte ueber beide Spalten der Akte; Paare mit Abstand zum Folgenden; Nebenwege des
   Seitenkopfs am Telefon im Menue (seitenkopf.php). */
:root[data-huelle="glas"] .akte .gitter > #akte-rechte { grid-column: 1 / -1; }
:root[data-huelle="glas"] .paare:not(:last-child) { margin-bottom: var(--u-s-6); }
/* Das Blatt haengt an der Reihe, nicht am Menue: bricht das Menue am Telefon in eine eigene Zeile, stuende es sonst links
   ausserhalb des Fensters (360 px: -121). */
:root[data-huelle="glas"] .seitenkopf-aktionen { position: relative; }
:root[data-huelle="glas"] .seitenkopf-mehr { display: none; position: static; }
:root[data-huelle="glas"] .seitenkopf-mehr a.zeilenmenue-punkt { color: var(--u-text); text-decoration: none; }
:root[data-huelle="glas"] .seitenkopf-mehr > summary { width: max(var(--u-s-10), var(--u-ziel-min)); height: max(var(--u-s-10), var(--u-ziel-min)); }

@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .tabelle-rahmen:has(> .tabelle:not([role])) { overflow-x: auto; border: 1px solid var(--u-border-soft); border-radius: var(--u-r-md); background: var(--u-surface); }
  :root[data-huelle="glas"] .tabelle:not([role]) { display: table; }
  :root[data-huelle="glas"] .tabelle:not([role]) > thead { display: table-header-group; }
  :root[data-huelle="glas"] .tabelle:not([role]) > tbody { display: table-row-group; }
  :root[data-huelle="glas"] .tabelle:not([role]) tr { display: table-row; margin: 0; border: 0; box-shadow: none; }
  :root[data-huelle="glas"] .tabelle:not([role]) td { display: table-cell; }
  :root[data-huelle="glas"] .tabelle:not([role]) td::before { content: none; }
  :root[data-huelle="glas"] .seitenkopf-aktionen > .knopf-mehr { display: none; }
  :root[data-huelle="glas"] .seitenkopf-mehr { display: block; }
  :root[data-huelle="glas"] .chat-kopfzeile > .chat-kopf-modell { flex-basis: 100%; }
}
/* ── Erzwungene Farben ── Das System malt; Zier entfaellt, Abzeichen und Hauptknopf bekommen eine Systemkante (das
   Wort bleibt). Langfassung: docs §15. */
@media (forced-colors: active) {
  :root[data-huelle="glas"] .begleiter-karte::after,
  :root[data-huelle="glas"] .erp td.zelle-zustand .abzeichen::before,
  :root[data-huelle="glas"] .blaettern-segmente { display: none; }
  :root[data-huelle="glas"] .abzeichen {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  :root[data-huelle="glas"] .blaettern-seite[aria-current="page"] { border: 2px solid CanvasText; }
  :root[data-huelle="glas"] .knopf-haupt { border: 1px solid ButtonText; }
  :root[data-huelle="glas"] .akte-lauf li::before { border-color: CanvasText; }
  /* H4 Liste: die Zeile behaelt ihre Trennlinie (das System malt sie), der Magenta-Punkt der wartenden Zeile wird Highlight —
     das Wort „wartet auf dich“ steht daneben; der gewaehlte Reiter einen kraeftigen Rand. */
  :root[data-huelle="glas"] .erp > tbody > tr[data-wartet] .zeile-wartet::before { forced-color-adjust: none; background: Highlight; }
  :root[data-huelle="glas"] .erp > tbody > tr[data-wartet] > td.zelle-zustand .abzeichen { outline: 2px solid Highlight; outline-offset: 2px; }
  :root[data-huelle="glas"] .filterzeile .filter-wahl[aria-current="true"],
  :root[data-huelle="glas"] .sortier-pille[open] > summary { border: 2px solid CanvasText; }
  /* S3 Akte: Platten, Striche und Glanz entfallen; die Markierung der Sprungleiste bleibt als Rand (dazu der Haken),
     der Balken wird eine Systemlinie — das Wort daneben traegt die Aussage. */
  :root[data-huelle="glas"] .charakter-schild::before,
  :root[data-huelle="glas"] .vn-schild::before,
  :root[data-huelle="glas"] .entscheidung-etikett::before,
  :root[data-huelle="glas"] .entscheidung-etikett::after,
  :root[data-huelle="glas"] .schritt::before,
  :root[data-huelle="glas"] .balken-bahn::after { display: none; }
  :root[data-huelle="glas"] .akte-sprung-ziel { border: 1px solid CanvasText; }
  :root[data-huelle="glas"] .akte-sprung-ziel[aria-current="location"] { border-bottom: 3px solid Highlight; }
  :root[data-huelle="glas"] .kennzahl,
  :root[data-huelle="glas"] .akte-symbol,
  :root[data-huelle="glas"] [data-figur-rahmen] .figur-ersatz,
  :root[data-huelle="glas"] .entscheidung-etikett { border: 1px solid CanvasText; }
  :root[data-huelle="glas"] .balken-bahn { border: 1px solid CanvasText; }
  /* Auch warn/gefahr/neutral (Gegenprüfung E): deren Farbregeln sind spezifischer als ein nacktes `.balken-wert`. */
  :root[data-huelle="glas"] .balken .balken-wert,
  :root[data-huelle="glas"] :is(.balken-warn, .balken-gefahr, .balken-neutral) .balken-wert { forced-color-adjust: none; background: CanvasText; }
  :root[data-huelle="glas"] .akte-zeile .abzeichen[data-wartet] { outline: 2px solid Highlight; outline-offset: 2px; }
  /* S5: Ringe entfallen — Systemrand, wartend Highlight; der Faden (Hintergrund, vom System ersetzt) wird Systemfarbe. */
  :root[data-huelle="glas"] :is(.verlaufsliste-marke, .verlauf-marke, .akte .spur-marke),
  :root[data-huelle="glas"] .akte ol.kette > li::before { border: 2px solid CanvasText; }
  :root[data-huelle="glas"] .verlaufsliste-eintrag[data-wartet] > .verlaufsliste-marke { border-color: Highlight; }
  :root[data-huelle="glas"] :is(.verlaufsliste-eintrag, .verlauf-zeile, .kanban-verlauf > li, .akte .spur-schritt):is(:not(:last-child), [data-anschluss])::before,
  :root[data-huelle="glas"] .akte ol.kette::before { forced-color-adjust: none; background: CanvasText; }
  /* S6 Chat: Zierrat entfaellt, Blasen und Karten bekommen eine Systemkante. Langfassung: docs §15.167. */
  :root[data-huelle="glas"] :is(.nachricht-blase, .chat-kopfzeile-name, .chat-eingabe, .chat-instanz-eingabe)::before,
  :root[data-huelle="glas"] .sprech-welle { display: none; }
  :root[data-huelle="glas"] :is(.nachricht-blase, .freigabe-karte, .chat-begruessung-agent, .nachricht-initialen, .chat-kopfzeile-name) { border: 1px solid CanvasText; }
  :root[data-huelle="glas"] :is(.freigabe-karte[data-wartet], .chat-leiste-eintrag[aria-current="page"]) { border: 2px solid Highlight; }
  :root[data-huelle="glas"] .chat-leiste-eintrag[aria-current="page"]::before,
  :root[data-huelle="glas"] .nachricht-tag::before,
  :root[data-huelle="glas"] .nachricht-tag::after { forced-color-adjust: none; background: CanvasText; }
  /* H2 Kanban: Leiste, Neonkante und Schein entfallen (Frist und „Ende" stehen als Wort), Blasen bekommen eine Systemkante. */
  :root[data-huelle="glas"] :is(.kanban-kommentar > .kanban-beschreibung, .kanban-kommentar-marke) { border: 1px solid CanvasText; }
}

/* ══ LOBBY ══ Die Rahmen der Widgets (P3-E, Bauplan Phase 3 §5). Bis H1 war das die Startseite als Lagezentrum; die Lobby
   ist mit der Huelle „ERP“ entfallen, ihre Spalten mit ihr. Was bleibt, tragen die Raumseite (Lage) und ab H2 die Startseite
   mit Kennzahlen. NUR KLASSENSELEKTOREN: hier nennt keine Regel main, .inhalt oder [data-modus] (35b, 36g). Die DOM-Folge
   ist Vorlese-, Tab- und Stapelfolge an jeder Breite — keine `order`. Langfassung: docs/oberflaeche-inhalt.md §20. */
:root[data-huelle="glas"] .glas-widget .widget-teil { display: flex; flex-direction: column; gap: var(--u-s-6); min-width: 0; }
/* .widget-teil NUR im Rahmen: /status (P3-D) bettet dieselben Teilvorlagen samt Wurzel ein und bleibt unberuehrt
   (Wirkungsprobe ausser start*). */
:root[data-huelle="glas"] .glas-widget .widget-teil { gap: var(--u-s-4); }
/* Den Abstand im Teil setzt gap; die Streifen im Rahmen sind dichter als auf /status. Langfassung: docs §15.168. */
:root[data-huelle="glas"] .glas-widget .widget-teil > p { margin: 0; }
:root[data-huelle="glas"] .glas-widget .widget-teil > .streifen { padding-block: var(--u-s-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .widget-streifen,
:root[data-huelle="glas"] .raum-kopf > .streifen { flex-wrap: wrap; align-items: center; margin: 0; }
/* WIDGET-RAHMEN (§5.3): Glas ist der Rahmen, der Inhalt Papier; der Server liefert ihn leer, die Mindesthoehe haelt den
   Platz. Langfassung: docs §15.170. */
:root[data-huelle="glas"] .glas-widget { display: flex; flex-direction: column; gap: var(--u-s-4); min-width: 0; padding: var(--u-s-5); }
:root[data-huelle="glas"] .widget-mitte { padding: 0; }
:root[data-huelle="glas"] .widget-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--u-s-4); min-width: 0; }
:root[data-huelle="glas"] .widget-mitte > .widget-kopf { align-self: center; width: min(100%, 40rem); padding: var(--u-s-2) var(--u-s-2) var(--u-s-2) var(--u-s-5); }
:root[data-huelle="glas"] .widget-titel { color: var(--u-glas-text-2); }
:root[data-huelle="glas"] .widget-knoepfe { display: flex; gap: var(--u-s-2); }
:root[data-huelle="glas"] .widget-knopf {
  min-width: max(2.75rem, var(--u-ziel-min));
  padding: 0;
  border-color: var(--u-glas-kante);
  background: var(--u-surface);
  color: var(--u-text);
  font-size: var(--u-t-lg);
}
/* Der Klappknopf heisst wie sein Widget, offen oder zu sagt aria-expanded. Langfassung: docs §15.171. */
:root[data-huelle="glas"] .widget-knopf[aria-expanded="true"]::before { content: "–"; content: "–" / ""; }
:root[data-huelle="glas"] .widget-knopf[aria-expanded="false"]::before { content: "+"; content: "+" / ""; }
:root[data-huelle="glas"] .widget-inhalt {
  min-width: 0;
  min-block-size: 6rem;
  padding: var(--u-s-4);
  border-radius: var(--u-r-lg);
  background: var(--u-surface);
  box-shadow: var(--u-e-1);
}
:root[data-huelle="glas"] .widget-mitte > .widget-inhalt { min-block-size: 12rem; padding: 0; background: none; box-shadow: none; }
:root[data-huelle="glas"] .widget-fuss {
  display: flex;
  justify-content: space-between;
  gap: var(--u-s-4);
  margin: 0;
  color: var(--u-glas-text-2);
  font-size: var(--u-t-2xs);
  font-variant-numeric: tabular-nums;
}
/* Ein Tausch im Takt ist kein Eintritt: ab dem zweiten Einsetzen traegt der Rahmen das Merkmal (widgets.js), und was
   darin neu steht, tritt nicht noch einmal ein. */
:root[data-huelle="glas"] [data-takt-tausch] * { animation-name: none; }
/* DIE LOBBY-ZIELE sind auch am Schreibtisch mindestens 44 px hoch (§5, K4) — am Baustein, nicht ueber .knopf-klein. */
:root[data-huelle="glas"] :is(.widget-knopf, .pin, .hausmeister, .lobby-weiter, .auftrag-zeile > .knopf, .auftrag-zeile > a.auftrag-titel,
    .auftraege-zaehlung > .filter-wahl) {
  min-block-size: max(2.75rem, var(--u-ziel-min));
}
/* „+N weitere" (Systemstatus, Auftraege, Hausmeister — Markup P3-D): ein Verweis allein in seiner Zeile ist ein Ziel,
   kein Satzteil. Ohne display wirkte min-block-size an einem Inline-Verweis nicht. */
:root[data-huelle="glas"] .glas-widget :is(.widget-teil > .leise, .hausmeister-mehr) > a {
  display: inline-flex;
  align-items: center;
  min-block-size: max(2.75rem, var(--u-ziel-min));
}
/* Die Titel der Zeitleiste sind im Rahmen Ziele (24 px); /status und die Verlaeufe bleiben unveraendert.
   Langfassung: docs §15.172. */
:root[data-huelle="glas"] .glas-widget .verlaufsliste-titel { display: inline-block; min-block-size: max(1.5rem, var(--u-ziel-min)); }
/* ERST FUELLEN, DANN ZEIGEN (P3-K, E58): was einem offenen, leeren Inhalt folgt (sein Fuss; bis H1 auch die naechsten
   Rahmen und Spalten der Lobby), bleibt unsichtbar, bis er Inhalt oder Zustand hat — sonst rueckte es beim ersten Fuellen
   im Bild (CLS). Nur mit Skript: ohne fuellt nichts (E29). Laeuft das Skript nie, deckt die Stufe nach GEDULD (widgets.js)
   auf; sie bewegt nichts, daher roh. Langfassung: docs §20. */
@keyframes huelle-aufdecken { to { visibility: visible; } }
@media (scripting: enabled) {
  :root[data-huelle="glas"] .glas-widget:not([data-zustand]) > .widget-inhalt:empty ~ * {
    visibility: hidden; animation: huelle-aufdecken 0s 20s forwards;
  }
}

/* Kurzform nur unter 44rem; Hochzaehlen: der Zwischenstand ist nur Bild (P3-G). */
:root[data-huelle="glas"] .akte-kennzahlen > .kennzahl-kurz { display: none; }
:root[data-huelle="glas"] [data-zaehlen] { color: transparent; }
:root[data-huelle="glas"] [data-zaehlen]::before { content: attr(data-zaehlen) / ""; position: absolute; color: var(--u-text); }

/* Funkenlinie der Infrastruktur (P3-G, §4.4): die Zahlen stehen im <title>, der Strich ist currentColor. */
:root[data-huelle="glas"] .funkenlinie { display: block; inline-size: 100%; block-size: var(--u-s-9); color: var(--u-brand-text); }

/* AUFTRAG-ZEILE (§5.5): der Punkt ist Beikodierung, das Wort steht daneben; Magenta nur fuer „wartet auf dich".
   Langfassung: docs §15.173. */
:root[data-huelle="glas"] .auftraege { display: flex; flex-direction: column; gap: var(--u-s-2); margin: 0; padding: 0; list-style: none; }
/* Die Zaehlzeile ist EINE Rollzeile (umbrochen schob sie „Entscheiden" unter den Falz, docs §20); jede Pille per Tab
   erreichbar, der Innenabstand traegt ihren Fokusring ganz. */
:root[data-huelle="glas"] .auftraege-zaehlung {
  flex-wrap: nowrap;
  padding: var(--u-s-2);
  scroll-padding-inline: var(--u-s-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
:root[data-huelle="glas"] .auftraege-zaehlung > .filter-wahl { flex: none; }
/* Die Zahl des Chips (P3-D) ist die Aussage, das Wort ihr Etikett. */
:root[data-huelle="glas"] .auftrag-zahl { font-variant-numeric: tabular-nums; font-weight: var(--u-w-heavy); }
/* Die Zeit oben rechts neben dem Titel, der Zustand darunter ueber die volle Breite (sonst draengte
   „Außenwirkung unbekannt" ueber den Rand). Langfassung: docs §15.174. */
:root[data-huelle="glas"] .auftrag-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "punkt titel zeit" "punkt zustand zustand" "punkt vorschau vorschau" "punkt knopf knopf";
  align-items: center;
  gap: var(--u-s-1) var(--u-s-4);
  padding: var(--u-s-3) var(--u-s-4);
  border-radius: var(--u-r-md);
  background: var(--u-surface-alt);
  box-shadow: inset 0 0 0 1px var(--u-border-soft);
}
:root[data-huelle="glas"] .auftrag-zeile > .punkt { grid-area: punkt; align-self: start; margin-top: var(--u-s-2); }
:root[data-huelle="glas"] .auftrag-titel { grid-area: titel; min-width: 0; font-weight: var(--u-w-strong); overflow-wrap: anywhere; }
/* Gekappt wird nur ein Lauf-Titel; der Karten-Titel (Werkzeug, wer, Stufe) bricht um (WCAG 1.4.10). */
:root[data-huelle="glas"] a.auftrag-titel { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
:root[data-huelle="glas"] span.auftrag-titel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-1) var(--u-s-3); }
:root[data-huelle="glas"] :is(.auftrag-wer, .auftrag-zustand, .auftrag-zeit) { color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-normal); }
:root[data-huelle="glas"] .auftrag-zustand { grid-area: zustand; min-width: 0; }
:root[data-huelle="glas"] .auftrag-zeit { grid-area: zeit; align-self: start; font-variant-numeric: tabular-nums; text-align: right; }
:root[data-huelle="glas"] .auftrag-zeile > .knopf { grid-area: knopf; justify-self: start; margin-top: var(--u-s-2); }
:root[data-huelle="glas"] .auftrag-vorschau { grid-area: vorschau; min-width: 0; color: var(--u-text-2); font-size: var(--u-t-xs); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .auftrag-zeile .abzeichen { max-width: 100%; white-space: normal; }
/* Das Gesicht im Titel ist klein und steht in der Zeile — der Baustein .person-bild ist sonst ein 40-px-Block. */
:root[data-huelle="glas"] .auftrag-titel .person-bild {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-end: var(--u-s-2);
  font-size: var(--u-t-2xs);
  vertical-align: middle;
}
:root[data-huelle="glas"] .punkt { display: block; width: 10px; height: 10px; border-radius: var(--u-r-full); background: var(--u-zustand-grau); }
:root[data-huelle="glas"] .punkt-gut { background: var(--u-ok); }
:root[data-huelle="glas"] .punkt-warn { background: var(--u-warn); }
:root[data-huelle="glas"] .punkt-wartet { background: var(--u-neon-magenta); box-shadow: 0 0 0 3px var(--u-surface), 0 0 10px var(--u-neon-magenta-glow); }

/* GEBAEUDE (§5.6): jede Karte ist Glas mit schraegem Schild, Raeume sind Papier-Chips; „N warten auf dich" leuchtet
   ruhend. Langfassung: docs §15.175. */
:root[data-huelle="glas"] .widget-mitte .widget-teil { align-items: center; gap: var(--u-s-8); padding-top: var(--u-s-4); }
:root[data-huelle="glas"] .gebaeude { position: relative; width: min(100%, 40rem); padding: var(--u-s-7) var(--u-s-6) var(--u-s-6); }
:root[data-huelle="glas"] .gebaeude-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--u-s-3);
  min-height: var(--u-s-6);
  margin: calc(-1 * var(--u-s-3)) 0 var(--u-s-4);
}
:root[data-huelle="glas"] .gebaeude-titel {
  position: absolute;
  top: 0;
  left: var(--u-s-6);
  isolation: isolate;
  max-width: calc(100% - 2 * var(--u-s-6));
  margin: 0;
  translate: 0 -50%;
  font-family: var(--u-font-hud);
  font-size: var(--u-t-sm);
  letter-spacing: var(--u-track-hud);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .gebaeude-titel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--u-z-dahinter);
  border-radius: var(--u-r-xs);
  background: var(--u-verlauf-marke);
  box-shadow: var(--u-glow-marke);
  transform: skewX(-14deg);
}
:root[data-huelle="glas"] .gebaeude-titel a {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-3);
  min-block-size: max(var(--u-s-8), var(--u-ziel-min));
  padding: var(--u-s-2) var(--u-s-6) var(--u-s-2) var(--u-s-5);
  color: var(--u-text-on-brand);
  text-decoration: none;
}
:root[data-huelle="glas"] .gebaeude-titel .sym { width: 16px; height: 16px; }
/* Auf dem Glas der Karte nur die Zahlenzeile (26h: nie gedaempfter Papiertext); ein Satz steht auf Papier (36i). */
:root[data-huelle="glas"] .gebaeude-zahlen { margin: 0 0 var(--u-s-4); color: var(--u-glas-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .gebaeude .leise { margin: 0; padding: var(--u-s-2) var(--u-s-4); border-radius: var(--u-r-sm); background: var(--u-surface); box-shadow: inset 0 0 0 1px var(--u-border-soft); color: var(--u-text-2); font-size: var(--u-t-sm); }
/* Ruhender Ring statt Puls: Endlos-Bewegung nur an Welle und Tipp-Punkten (E19, 34e). */
:root[data-huelle="glas"] .gebaeude-kopf .abzeichen[data-wartet] {
  box-shadow: 0 0 0 2px var(--u-neon-magenta), 0 0 8px var(--u-neon-magenta-glow);
}
:root[data-huelle="glas"] :is(.pins, .hausmeister-liste) { display: flex; flex-wrap: wrap; gap: var(--u-s-3); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .hausmeister-liste { justify-content: center; }
:root[data-huelle="glas"] :is(.pins, .hausmeister-liste) > li { animation: huelle-karte-ein calc(var(--u-dur-5) * var(--u-bewegung)) var(--u-ease) backwards; }
:root[data-huelle="glas"] .pins > li:nth-child(2) { animation-delay: calc(1 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] .pins > li:nth-child(3) { animation-delay: calc(2 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] .pins > li:nth-child(n + 4) { animation-delay: calc(3 * var(--u-staffel) * var(--u-bewegung)); }
:root[data-huelle="glas"] .pin {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-3);
  padding: 0 var(--u-s-4) 0 var(--u-s-3);
  border-radius: var(--u-r-sm);
  background: var(--u-surface);
  box-shadow: inset 0 0 0 1px var(--u-border-soft), var(--u-e-1);
  color: var(--u-text);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
  text-decoration: none;
}
:root[data-huelle="glas"] .pin-ring {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--u-r-full);
  background: var(--u-bereich-bg, var(--u-surface));
  box-shadow: 0 0 0 2px var(--u-bereich, var(--u-zustand-grau)), 0 0 8px var(--u-bereich, var(--u-zustand-grau));
}
:root[data-huelle="glas"] .pin-zahl { color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-normal); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .pin-freigabe {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-1);
  padding: 0 var(--u-s-3) 0 var(--u-s-2);
  border-radius: var(--u-r-xs);
  background: var(--u-verlauf-marke);
  box-shadow: 0 0 0 2px var(--u-neon-magenta), 0 0 10px var(--u-neon-magenta-glow);
  color: var(--u-text-on-brand);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-heavy);
  line-height: 18px;
}
:root[data-huelle="glas"] .pin-freigabe .sym { width: 12px; height: 12px; }
/* Auf Foto bzw. Platte traegt ein Papierhof den Ring (8,5:1, §5.6). */
:root[data-huelle="glas"] :is(.hausmeister, .gebaeude-titel a):focus-visible { box-shadow: 0 0 0 6px var(--u-surface); }
/* Der Hausmeister ist der Baustein .person im Glas-Chip (§5.4); auf Glas nie gedaempfter Papiertext (26h). */
:root[data-huelle="glas"] .hausmeister {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-5);
  padding: var(--u-s-3) var(--u-s-5) var(--u-s-3) var(--u-s-3);
  border-radius: var(--u-r-lg);
  color: var(--u-text);
  text-decoration: none;
}
:root[data-huelle="glas"] .hausmeister .person { min-width: 0; }
:root[data-huelle="glas"] .hausmeister .person-kennung { color: var(--u-glas-text-2); }
@media (hover: hover) {
  :root[data-huelle="glas"] :is(.glas-widget:not(.widget-mitte), .gebaeude, .hausmeister):hover {
    box-shadow: var(--u-e-glas), inset 0 1px 0 var(--u-glas-schein), var(--u-glow-neon);
  }
  :root[data-huelle="glas"] .pin:hover { box-shadow: inset 0 0 0 1px var(--u-bereich, var(--u-neon-violett)), var(--u-glow-neon); }
}

/* Ab 70rem Behaelterbreite: drei Spalten, das Oberband oben in der Mitte (v4); Seitenspalten 18–22rem (K3).
   Langfassung: docs §15.176. */
@container inhalt (width >= 70rem) {
  /* 40svh statt 45 (§5.3 „z. B."): bei 1440 × 900 steht auch der erste Knopf „Entscheiden" ueber dem Dock (E-E2). */
  :root[data-huelle="glas"] .glas-widget:not(.widget-mitte) > .widget-inhalt {
    max-block-size: min(28rem, 40svh);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Leer, Skript laeuft (Fuss sichtbar), noch kein Zustand: volle Rollhoehe vorhalten, sonst rueckt die Flaeche darunter
     nach (CLS, docs §20). Mit Fehler oder Ende bleibt der Rahmen klein. */
  :root[data-huelle="glas"] .glas-widget:not(.widget-mitte):not([data-zustand]) > .widget-inhalt:empty:has(+ .widget-fuss:not([hidden])) {
    min-block-size: min(28rem, 40svh);
  }
}
/* LOBBY AB 105rem (volle Breite, M1-B): Seitenspalten bis 26rem; die Gebaeude stehen nebeneinander, je ab 40rem (die
   bisherige Kartenbreite - schmaler ragte das Schild eines langen Namens ueber die Abzeichen), und fuellen mit Kopf und
   Rundgang-Angebot die Mitte. Eine Karte allein in ihrer Zeile nimmt die Zeile; Hausmeister, Leerkarte und „+N" je eine
   eigene Zeile. Langfassung: docs §15.179. */
@container inhalt (width >= 105rem) {
  :root[data-huelle="glas"] .widget-mitte > .widget-kopf { width: 100%; }
  :root[data-huelle="glas"] .widget-mitte .widget-teil { flex-flow: row wrap; align-items: stretch; }
  :root[data-huelle="glas"] .widget-mitte .widget-teil > * { flex: 1 1 100%; }
  :root[data-huelle="glas"] .widget-mitte .widget-teil > .gebaeude { flex-basis: 40rem; width: auto; }
  :root[data-huelle="glas"] .widget-mitte .widget-teil > .karte { max-inline-size: max-content; margin-inline: auto; }
  :root[data-huelle="glas"] .widget-mitte .widget-teil > .gebaeude + .karte { max-inline-size: none; text-align: center; }
}
/* Schmal: das Schild bekommt die erste Zeile der Karte, der Knopf der Auftrag-Zeile die ganze Breite (P3-G).
   Langfassung: docs §15.177. */
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .auftrag-zeile > .knopf { justify-self: stretch; }
  :root[data-huelle="glas"] .gebaeude-kopf { justify-content: flex-start; margin-top: var(--u-s-5); }
  :root[data-huelle="glas"] .glas-widget [data-widget-teil="systemstatus"] > :not(.akte-kennzahlen) { display: none; }
  :root[data-huelle="glas"] .glas-widget .akte-kennzahlen {
    display: flex;
    padding: var(--u-s-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--u-s-2);
    scroll-snap-type: x mandatory;
  }
  :root[data-huelle="glas"] .glas-widget .akte-kennzahlen > li { display: flex; flex: none; max-width: 15rem; scroll-snap-align: start; }
  :root[data-huelle="glas"] .glas-widget .kennzahl { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: var(--u-s-3); padding-block: var(--u-s-2); }
  :root[data-huelle="glas"] .pins { flex-direction: column; }
  :root[data-huelle="glas"] .pin { display: flex; }
}
/* Erzwungene Farben: Platten, Punkte, Ringe und Schein entfallen, das Wort traegt die Aussage; „wartet auf dich" wird
   ein Systemrahmen (35c). */
@media (forced-colors: active) {
  :root[data-huelle="glas"] .widget-titel::before,
  :root[data-huelle="glas"] .gebaeude-titel::before { display: none; }
  :root[data-huelle="glas"] :is(.glas > .widget-inhalt, .auftrag-zeile, .pin) { border: 1px solid CanvasText; }
  :root[data-huelle="glas"] :is(.auftrag-zeile[data-wartet], .gebaeude-kopf .abzeichen[data-wartet], .pin-freigabe) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
/* ══ ENDE LOBBY ══ */

/* ══ BLATT ══ Das Entscheiden-Blatt der Lobby (P3-F, Bauplan Phase 3 §5.8): modaler Dialog aus widgets.js mit dem vollen
   Kern der Kartenseite; am Schreibtisch ein Glasfenster, im Behaelter unter 44rem ein Blatt von unten. Der Koerper rollt,
   die Knopfreihe klebt an SEINEM Rand. Keine Griffleiste (ohne Wischgeste eine Attrappe). Langfassung: docs §20a. */
:root[data-huelle="glas"] .entscheid-blatt[open] {
  --u-klebe-unten: 0px;
  display: flex;
  flex-direction: column;
  inline-size: min(48rem, 100%);
  max-block-size: 90dvh;
  padding: 0;
  overflow: hidden;
  animation: huelle-nachricht-ein calc(var(--u-dur-5) * var(--u-bewegung)) var(--u-ease) both;
}
:root[data-huelle="glas"] .entscheid-blatt::backdrop { background: var(--u-scrim-oben); }
:root[data-huelle="glas"] .blatt-kopf { display: flex; justify-content: flex-end; padding: var(--u-s-3) var(--u-s-4) 0; }
:root[data-huelle="glas"] .blatt-zu { min-block-size: max(2.75rem, var(--u-ziel-min)); }
:root[data-huelle="glas"] .blatt-koerper {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--u-s-2) var(--u-s-6) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block-end: calc(var(--u-klebe-h) + var(--u-s-4));
}
/* Das Polster unten traegt der Inhalt, nicht der Rollbereich: sonst klebte die Reihe 16 px ueber dem Rand. */
:root[data-huelle="glas"] .blatt-koerper > :last-child { padding-block-end: var(--u-s-6); }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .entscheid-blatt[open] {
    inline-size: 100%;
    max-inline-size: 100%;
    max-block-size: 85dvh;
    margin: auto 0 0;
    padding-block-end: env(safe-area-inset-bottom);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  :root[data-huelle="glas"] .blatt-koerper > :last-child { padding-block-end: var(--u-s-4); }
}
:root[data-huelle="glas"][data-tastatur="1"] .entscheid-blatt[open] {
  max-block-size: calc(100dvh - var(--u-tastatur-versatz));
  margin-block-end: var(--u-tastatur-versatz);
  padding-block-end: 0;
}
/* ══ ENDE BLATT ══ */

/* ══ BEGLEITER ══ Rundgang der Lobby (P5-C, Bauplan Phase 5 §5.4/§5.5): Angebot (opak, zwei Knoepfe); Dialog ueber der ganzen
   Sicht, den Schleier malt das LOCH (Schatten um das Ziel); VN-KASTEN (Schild, Figur, getippter Satz — wiederverwendbar).
   Loch, Lage und Seite setzt begleiter.js. Langfassung: docs §23. */
:root[data-huelle="glas"] .begleiter-angebot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2) var(--u-s-4); padding: var(--u-s-3) var(--u-s-5); border: 1px solid var(--u-border); border-radius: var(--u-r-lg); background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .begleiter-angebot > p { flex: 1 1 16rem; margin: 0; }
:root[data-huelle="glas"] :is(.begleiter-angebot-knoepfe, .begleiter-knoepfe, .begleiter-neu, .profil-rundgang) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2); margin: 0; }
:root[data-huelle="glas"] :is(.begleiter-angebot, .begleiter-knoepfe) .knopf { min-block-size: max(2.75rem, var(--u-ziel-min)); }
:root[data-huelle="glas"] .begleiter[open] { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; }
:root[data-huelle="glas"] .begleiter::backdrop { background: transparent; }
:root[data-huelle="glas"] .begleiter-loch { position: absolute; inset: var(--loch-y, 50%) auto auto var(--loch-x, 50%); inline-size: var(--loch-b, 0px); block-size: var(--loch-h, 0px); border-radius: var(--u-r-glas); box-shadow: 0 0 0 calc(100dvh + 100dvw) var(--u-scrim-ruhe); }
:root[data-huelle="glas"] .begleiter[data-ohne-loch] .begleiter-loch { box-shadow: 0 0 0 3px var(--u-neon-petrol), 0 0 0 calc(100dvh + 100dvw) var(--u-scrim-mitte); }
:root[data-huelle="glas"] .begleiter-karte:is([data-niedrig], [data-figur-weg]) .vn-figur { display: none; }
/* VN-Kasten: opaker Koerper (Glas traegt nie Fliesstext), HUD-Ecken und Schild-Platte als Listenteile. */
:root[data-huelle="glas"] .vn-kasten { position: relative; display: flex; flex-direction: column; gap: var(--u-s-2); padding: var(--u-s-5); border: 1px solid var(--u-border-strong); border-radius: var(--u-r-glas); background: var(--u-surface); color: var(--u-text); box-shadow: var(--u-e-3); }
:root[data-huelle="glas"] .vn-kasten > :is(p, h2) { margin: 0; }
:root[data-huelle="glas"] .vn-schild { position: relative; align-self: flex-start; padding: var(--u-s-1) var(--u-s-5); isolation: isolate; color: var(--u-text-on-brand); font-family: var(--u-font-hud); font-size: var(--u-t-sm); font-weight: var(--u-w-heavy); letter-spacing: var(--u-track-hud); text-transform: uppercase; }
:root[data-huelle="glas"] .vn-text { font-size: var(--u-t-md); line-height: var(--u-lh-loose); }
:root[data-huelle="glas"] .vn-rest { color: transparent; }
:root[data-huelle="glas"] .vn-figur { position: absolute; inset: auto 0 0 auto; inline-size: 11rem; block-size: auto; pointer-events: none; filter: var(--u-e-figur); }
/* Karte gegenueber dem Ziel (Lage), Figur an ihrer Seite zum Ziel, ueber die Oberkante; links gespiegelt. */
:root[data-huelle="glas"] .begleiter-karte { position: absolute; inset: auto var(--u-s-5) calc(var(--u-dock-h) + var(--u-s-3)) auto; inline-size: min(38rem, 100% - 2 * var(--u-s-5)); max-block-size: calc(100% - var(--u-dock-h) - var(--u-topbar-h) - 2 * var(--u-s-3)); padding-inline-end: 11rem; animation: huelle-karte-ein calc(var(--u-dur-4) * var(--u-bewegung)) var(--u-ease) backwards; }
:root[data-huelle="glas"] .begleiter-karte[data-lage="oben"] { inset-block: calc(var(--u-topbar-h) + var(--u-s-6)) auto; }
:root[data-huelle="glas"] .begleiter-karte[data-seite="links"] { inset-inline: var(--u-s-5) auto; padding-inline: 11rem var(--u-s-5); }
:root[data-huelle="glas"] .begleiter-karte[data-seite="links"] .vn-figur { inset-inline: 0 auto; scale: -1 1; }
:root[data-huelle="glas"] .begleiter-karte:is([data-niedrig], [data-figur-weg]) { padding-inline: var(--u-s-5); overflow-y: auto; }
:root[data-huelle="glas"] .begleiter-titel { font-family: var(--u-font-display); font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .begleiter-neu { font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .begleiter-punkte { display: flex; gap: var(--u-s-2); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .begleiter-punkte > li { inline-size: .5rem; block-size: .5rem; border-radius: var(--u-r-full); background: var(--u-border-strong); }
:root[data-huelle="glas"] .begleiter-punkte > li[data-aktiv] { inline-size: 1.5rem; background: var(--u-verlauf-marke); }
:root[data-huelle="glas"] .begleiter-knoepfe { justify-content: flex-end; }
/* Unter 44rem: kein Angebot (Start ueber das Profil), die Karte ueber die volle Breite, die Figur als Brustbild-Kreis. */
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .begleiter-karte,
  :root[data-huelle="glas"] .begleiter-karte[data-seite="links"] { inset-inline: var(--u-s-3); inline-size: auto; padding: var(--u-s-4); overflow-y: auto; }
  :root[data-huelle="glas"] .begleiter-karte .vn-figur,
  :root[data-huelle="glas"] .begleiter-karte[data-seite="links"] .vn-figur { inset: var(--u-s-3) var(--u-s-3) auto auto; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--u-r-full); object-fit: cover; object-view-box: inset(2% 18% 62% 18%); scale: none; background: var(--u-verlauf-marke); }
  :root[data-huelle="glas"] .begleiter-knoepfe > .knopf { flex: 1 1 auto; }
  :root[data-huelle="glas"] .begleiter-angebot { display: none; }
}
@media (forced-colors: active) {
  :root[data-huelle="glas"] .begleiter-loch { box-shadow: none; outline: 3px solid Highlight; }
  :root[data-huelle="glas"] .vn-kasten,
  :root[data-huelle="glas"] .begleiter-punkte > li { border: 1px solid CanvasText; }
  :root[data-huelle="glas"] .begleiter-punkte > li[data-aktiv] { forced-color-adjust: none; background: Highlight; }
}
/* ══ ENDE BEGLEITER ══ */

/* ══ KURZFUEHRUNG ══ Raum-Kurzfuehrung (P5-C2): leises Angebot im Raumkopf; ohne Figur Avatar bzw. Kuerzel im Schild.
   Langfassung: docs §23. */
:root[data-huelle="glas"] .raum-angebot { grid-column: 1 / -1; padding: 0; border: 0; background: none; }
:root[data-huelle="glas"] .vn-schild-bild { display: inline-grid; place-items: center; inline-size: 1.75em; block-size: 1.75em; margin-inline-end: var(--u-s-2); border: 1px solid; border-radius: var(--u-r-full); vertical-align: middle; }
/* ══ ENDE KURZFUEHRUNG ══ */

/* ══ RAUM ══ Die Raumseite (P4-E, Bauplan Phase 4 §5). Nur Klassenselektoren (35b, 37p), keine `order`, nur einmalige
   Bewegungen; main.raum steht in GLAS-HUELLE. Langfassung: docs/oberflaeche-inhalt.md §21a. */
:root[data-huelle="glas"] .raum-raster {
  --raum-scheibe: max(2.75rem, var(--u-ziel-min));
  --raum-chat-h: max(20rem, calc(var(--u-sicht-h) - var(--u-topbar-h) - var(--u-dock-h) - 2 * var(--u-s-4)));
  --u-x: 50%;
  --u-y: 50%;
  --u-b: 25%;
  display: grid;
  gap: var(--u-s-5);
  min-width: 0;
}
:root[data-huelle="glas"] .raum-spalte { display: flex; flex-direction: column; gap: var(--u-s-5); min-width: 0; }
/* KOPF: fest, HUD-Ecken als Listenteil. */
:root[data-huelle="glas"] .raum-kopf {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--u-s-3) var(--u-s-6);
  padding: var(--u-s-6) var(--u-s-8);
}
:root[data-huelle="glas"] .raum-etikett {
  flex-basis: 100%;
  margin: 0;
  color: var(--u-glas-text-2);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-hud);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .raum-titel {
  display: flex;
  align-items: center;
  gap: var(--u-s-5);
  min-width: 0;
  margin: 0;
  font-family: var(--u-font-display);
  font-size: var(--u-t-3xl);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-display);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
:root[data-huelle="glas"] :is(.raum-fakten, .raum-satz) { margin: 0; color: var(--u-glas-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .raum-satz { flex-basis: 100%; }
:root[data-huelle="glas"] .raum-zahl { color: var(--u-text); font-weight: var(--u-w-strong); }
/* Zielgroesse ohne Zeilenhoehe (§21a). */
:root[data-huelle="glas"] a.raum-zahl {
  position: relative;
  display: inline-block;
  min-inline-size: max(2.75rem, var(--u-ziel-min));
  padding-block: calc((max(2.75rem, var(--u-ziel-min)) - 1lh) / 2);
  margin-block: calc((max(2.75rem, var(--u-ziel-min)) - 1lh) / -2);
}
:root[data-huelle="glas"] .raum-wege { display: flex; flex-wrap: wrap; gap: var(--u-s-3); margin: 0 0 0 auto; }
/* Chips (26c); der Sprungverweis am Schreibtisch nur mit Tastaturfokus sichtbar (2.4.7). */
:root[data-huelle="glas"] :is(.pille-frei, .raum-zum-gespraech) {
  display: inline-flex;
  align-items: center;
  min-block-size: max(2.75rem, var(--u-ziel-min));
  padding: 0 var(--u-s-6);
  border: 1px solid var(--u-glas-kante);
  border-radius: var(--u-r-full);
  background: var(--u-surface);
  box-shadow: var(--u-e-1);
  color: var(--u-text);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-hud);
  text-decoration: none;
  text-transform: uppercase;
}
:root[data-huelle="glas"] .raum-zum-gespraech:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  min-block-size: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:root[data-huelle="glas"] .raum-kopf > .streifen { flex-basis: 100%; }
/* CHARAKTERKARTE (§5.3): die Figur ragt ueber den Rand; die Bereiche ordnen nur das Bild, gelesen wird die DOM-Folge. */
:root[data-huelle="glas"] .figur-karte {
  display: grid;
  grid-template-areas: "bild" "name" "klasse" "zustand" "werte" "agenten";
  gap: var(--u-s-4);
  margin-block-start: var(--u-s-11);
  padding: var(--u-s-5) var(--u-s-6) var(--u-s-6);
}
:root[data-huelle="glas"] .figur-schild { grid-area: name; justify-self: start; margin: 0; }
:root[data-huelle="glas"] .figur-schild a { color: inherit; text-decoration: none; }
/* Trefferflaeche ohne Hoehe, malt nichts (§21a). */
:root[data-huelle="glas"] .figur-schild a::after { content: ""; position: absolute; inset: calc((100% - max(2.75rem, var(--u-ziel-min))) / 2) 0; }
:root[data-huelle="glas"] .figur-schild :focus-visible { outline-color: var(--u-text-on-brand); }
:root[data-huelle="glas"] .figur-karte[data-arbeitet] .sprech-welle { display: inline-block; }
:root[data-huelle="glas"] .figur-klasse { grid-area: klasse; margin: 0; color: var(--u-glas-text-2); font-size: var(--u-t-sm); overflow-wrap: anywhere; }
:root[data-huelle="glas"] :is(.figur-bild, .figur-avatar) {
  grid-area: bild;
  justify-self: center;
  pointer-events: none;
  animation: huelle-karte-ein calc(var(--u-dur-3) * var(--u-bewegung)) var(--u-ease) backwards;
}
:root[data-huelle="glas"] .figur-bild {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: 17rem;
  margin-block-start: calc(-1 * var(--u-s-14));
  object-fit: contain;
  filter: var(--u-e-figur);
}
:root[data-huelle="glas"] .figur-avatar { width: 96px; height: 96px; font-size: var(--u-t-2xl); }
:root[data-huelle="glas"] .figur-karte:is([data-zustand="pause"], [data-zustand="aus"]) :is(.figur-bild, .figur-avatar, .figur-ersatz), :root[data-huelle="glas"] .figur-ruht { filter: saturate(.2) var(--u-e-figur); }
:root[data-huelle="glas"] .figur-zustand { grid-area: zustand; display: flex; flex-wrap: wrap; gap: var(--u-s-3); margin: 0; }
:root[data-huelle="glas"] .figur-werte {
  grid-area: werte;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--u-s-5) var(--u-s-4);
  margin: 0;
  padding: var(--u-s-5);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  box-shadow: inset 0 0 0 1px var(--u-border), var(--u-e-1);
}
:root[data-huelle="glas"] .figur-wert { display: grid; align-content: start; gap: var(--u-s-1); min-width: 0; }
:root[data-huelle="glas"] .figur-wert dt {
  color: var(--u-text-2);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-hud);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .figur-wert dd { margin: 0; font-family: var(--u-font-hud); font-size: var(--u-t-lg); font-weight: var(--u-w-heavy); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .figur-wert .balken { margin-block: var(--u-s-2); }
:root[data-huelle="glas"] .figur-wert-unter { display: block; color: var(--u-text-2); font-family: var(--u-font-body); font-size: var(--u-t-xs); font-weight: var(--u-w-normal); }
/* AVATAR-REIHE */
:root[data-huelle="glas"] .raum-agenten { grid-area: agenten; display: flex; flex-wrap: wrap; gap: var(--u-s-3); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .raum-agent {
  display: grid;
  justify-items: center;
  gap: var(--u-s-2);
  min-inline-size: max(2.75rem, var(--u-ziel-min));
  padding: var(--u-s-3);
  border-radius: var(--u-r-md);
  color: var(--u-text);
  font-size: var(--u-t-xs);
  text-decoration: none;
}
:root[data-huelle="glas"] .raum-agent[aria-current="true"] { background: var(--u-surface); box-shadow: inset 0 0 0 1px var(--u-neon-violett); }
:root[data-huelle="glas"] .raum-agent-bild {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--u-r-full);
  background: var(--u-bereich-bg);
  box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-bereich);
  color: var(--u-bereich-fg);
  font-family: var(--u-font-hud);
  font-weight: var(--u-w-heavy);
  object-fit: cover;
}
:root[data-huelle="glas"] .raum-agent-name { max-inline-size: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .raum-agenten-satz { grid-area: agenten; margin: 0; color: var(--u-glas-text-2); font-size: var(--u-t-sm); }
/* BUEHNE (§5.4): der Rahmen schrumpft auf das Bild. */
:root[data-huelle="glas"] .buehne { min-width: 0; animation: huelle-karte-ein calc(var(--u-dur-3) * var(--u-bewegung)) var(--u-ease) backwards; }
:root[data-huelle="glas"][data-gleicher-pfad] .buehne { animation-name: none; }
:root[data-huelle="glas"] .buehne-bild-rahmen { position: relative; }
:root[data-huelle="glas"] .buehne-bild { display: block; inline-size: 100%; block-size: auto; filter: var(--u-e-buehne); }
:root[data-huelle="glas"] .buehne-rohbau { position: relative; aspect-ratio: 1200 / 1133; }
:root[data-huelle="glas"] .buehne-rohbau::before,
:root[data-huelle="glas"] .buehne-rohbau::after {
  content: "";
  position: absolute;
  inset: 12% 4% 6%;
  background: var(--u-bereich);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
:root[data-huelle="glas"] .buehne-rohbau::after {
  inset: calc(12% + 4px) calc(4% + 4px) calc(6% + 4px);
  background: repeating-linear-gradient(135deg, var(--u-surface-2) 0 14px, var(--u-surface-3) 14px 28px);
}
:root[data-huelle="glas"] :is(.buehne-rohbau-wort, .wandschirm-titel) {
  margin: 0;
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-hud);
  text-transform: uppercase;
}
:root[data-huelle="glas"] :is(.buehne-rohbau-wort, .buehne-leer, .raum-panel-wege) { inline-size: fit-content; margin: var(--u-s-4) auto 0; padding: var(--u-s-2) var(--u-s-5); border-radius: var(--u-r-sm); background: var(--u-glas-1-fest); color: var(--u-text); text-align: center; }
:root[data-huelle="glas"] .buehne-leer { font-size: var(--u-t-sm); }
/* STATIONEN (§5.5): ohne Platzierung eine Tap-Liste; Magenta nur mit data-wartet, aussen, ruhend, mit Zeichen und Wort. */
:root[data-huelle="glas"] .hotspots { display: grid; gap: var(--u-s-3); margin: var(--u-s-5) 0 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .hotspot {
  display: flex;
  align-items: center;
  gap: var(--u-s-5);
  min-block-size: max(3rem, var(--u-ziel-min));
  padding: var(--u-s-2) var(--u-s-6) var(--u-s-2) var(--u-s-3);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  box-shadow: inset 0 0 0 1px var(--u-border-soft), var(--u-e-1);
  color: var(--u-text);
  text-decoration: none;
}
:root[data-huelle="glas"] a.hotspot::after { content: "›" / ""; margin-inline-start: auto; color: var(--u-text-2); font-size: var(--u-t-xl); }
:root[data-huelle="glas"] .hotspot-scheibe {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--raum-scheibe);
  height: var(--raum-scheibe);
  border-radius: var(--u-r-full);
  background: var(--u-bereich-bg);
  box-shadow: 0 0 0 2px var(--u-bereich), 0 0 0 4px var(--u-surface-hoch);
  color: var(--u-bereich-fg);
  transition: translate var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .hotspot[data-wartet] .hotspot-scheibe {
  box-shadow: 0 0 0 2px var(--u-bereich), 0 0 0 4px var(--u-surface-hoch), 0 0 0 7px var(--u-neon-magenta), 0 0 14px var(--u-neon-magenta-glow);
}
:root[data-huelle="glas"] .hotspot:is(:hover, :focus-visible) .hotspot-scheibe { translate: 0 calc(-2px * var(--u-bewegung)); }
:root[data-huelle="glas"] .hotspot-schild { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--u-s-1) var(--u-s-4); min-width: 0; }
:root[data-huelle="glas"] .hotspot-wort { font-family: var(--u-font-hud); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); letter-spacing: var(--u-track-hud); text-transform: uppercase; }
:root[data-huelle="glas"] .hotspot-zahl { font-weight: var(--u-w-strong); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .hotspot-zeichen { width: 14px; height: 14px; margin-inline-end: var(--u-s-2); vertical-align: -2px; }
/* Einmal aufleuchten (widgets.js data-frisch). */
@keyframes huelle-frisch { 25% { background-color: var(--u-brand-wash-deckend); transform: translateY(calc(-1px * var(--u-bewegung))); } }
:root[data-huelle="glas"] :is([data-frisch] [data-verteilt-inhalt], .figur-werte[data-frisch] > .figur-wert) {
  border-radius: var(--u-r-xs);
  animation: huelle-frisch calc(var(--u-dur-5) * var(--u-bewegung)) var(--u-ease);
}
/* WANDSCHIRM (§5.4): Balken = Gebaeude gegen seinen Deckel. */
:root[data-huelle="glas"] .wandschirm {
  --u-surface-2: var(--u-surface-inv-3);
  display: grid;
  gap: var(--u-s-2);
  margin-block-start: var(--u-s-4);
  padding: var(--u-s-4) var(--u-s-5);
  border: 1px solid var(--u-line-on-inv);
  border-radius: var(--u-r-md);
  background: var(--u-surface-inv);
  box-shadow: var(--u-e-3);
  color: var(--u-text-on-inv-stark);
}
:root[data-huelle="glas"] .wandschirm-titel { color: var(--u-text-on-inv); }
:root[data-huelle="glas"] .wandschirm-betrag { margin: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .wandschirm-betrag > b { font-family: var(--u-font-hud); font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .wandschirm .balken-text { font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .wandschirm :is(.balken-wort, .balken-urteil) { color: var(--u-text-on-inv); font-size: var(--u-t-2xs); }
:root[data-huelle="glas"] .wandschirm .balken-zahl { font-size: var(--u-t-sm); }
/* GESPRAECHSSPALTE, UMSCHALTER, PANELS (§5.6): Schiebeschalter der Filter-Pillen; das Panel ist Behaelter inhalt (17-karte). */
:root[data-huelle="glas"] :is(.raum-gespraech, .raum-panel) { display: flex; flex-direction: column; gap: var(--u-s-5); padding: var(--u-s-6); }
:root[data-huelle="glas"] :is(.raum-gespraech, .raum-panel-titel):focus:not(:focus-visible) { outline: none; }
:root[data-huelle="glas"] .raum-umschalter .filter-wahl { flex: 1; justify-content: center; min-block-size: max(2.75rem, var(--u-ziel-min)); }
:root[data-huelle="glas"] .raum-panel { container: inhalt / inline-size; --u-klebe-unten: 0px; }
:root[data-huelle="glas"] .raum-panel-koerper { margin: 0; }
:root[data-huelle="glas"] :is(.raum-gespraech-titel, .raum-panel-titel) { margin: 0; font-family: var(--u-font-display); font-size: var(--u-t-xl); font-weight: var(--u-w-heavy); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .raum-gespraech-karte { display: grid; justify-items: start; gap: var(--u-s-4); margin: 0; }
:root[data-huelle="glas"] :is(.raum-gespraech-name, .raum-gespraech-zeit) { margin: 0; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .raum-gespraech-name { font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .raum-gespraech-zeit { color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .raum-gespraech-neu { display: grid; justify-items: start; gap: var(--u-s-4); }
/* GESPRAECH (P4-J, §21d) */
:root[data-huelle="glas"] :is(.raum-gespraech-neu, .raum-gespraech-neu > .feld) { justify-self: stretch; }
:root[data-huelle="glas"] .raum-gespraech:has(> .chat-instanz) { block-size: var(--raum-chat-h); }
:root[data-huelle="glas"] .raum-gespraech .chat-instanz { container: inhalt / inline-size; display: flex; flex: 1 1 auto; flex-direction: column; min-block-size: 0; }
:root[data-huelle="glas"] .raum-gespraech .chat-karte { border-radius: var(--u-r-lg); overflow: hidden; }
:root[data-huelle="glas"] .raum-gespraech .chat-verlauf { max-height: none; }
:root[data-huelle="glas"][data-tastatur="1"] .raum-gespraech:has(> .chat-instanz:focus-within) :is(.raum-gespraech-titel, .chat-kopfzeile, .chat-kopfzeile + .leise) { display: none; }
/* Werkzeug-Station (P4-G): der Zusatz auf eigener Zeile im Schild. */
:root[data-huelle="glas"] .hotspot-zusatz { flex-basis: 100%; font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); }
/* RASTER: ab 44rem zwei, ab 70rem drei Spalten; nur hier stehen Stationen auf dem Bild, der Kasten mittig um den Anker — nur im Bildrahmen, die Liste „Weitere" darunter bleibt Liste. */
@container inhalt (width >= 44rem) {
  :root[data-huelle="glas"] .raum-raster { align-items: start; }
  :root[data-huelle="glas"] .raum-kopf { display: grid; grid-template-columns: minmax(0, max-content) minmax(8rem, 1fr) auto; }
  :root[data-huelle="glas"] :is(.raum-etikett, .raum-satz) { grid-column: 1 / 3; }
  :root[data-huelle="glas"] .raum-kopf > .streifen { grid-column: 1 / -1; }
  :root[data-huelle="glas"] .raum-wege { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  :root[data-huelle="glas"] .raum-kopf { grid-area: kopf; }
  :root[data-huelle="glas"] .raum-spalte[data-spalte="links"] { grid-area: links; }
  :root[data-huelle="glas"] .buehne { grid-area: buehne; }
  :root[data-huelle="glas"] .raum-spalte[data-spalte="rechts"] { grid-area: rechts; }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .hotspots { position: absolute; inset: 0; margin: 0; pointer-events: none; }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen :is(.hotspot, .wandschirm, .buehne-rohbau-wort) {
    position: absolute;
    top: var(--u-y);
    left: var(--u-x);
    margin: 0;
    translate: -50% -50%;
  }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .hotspot {
    inline-size: max-content;
    gap: var(--u-s-3);
    min-block-size: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    pointer-events: auto;
  }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen a.hotspot::after { content: none; }
  /* Fokus: Papierband um den Ring (1.4.11). */
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .hotspot:focus-visible { border-radius: var(--u-r-full); box-shadow: 0 0 0 6px var(--u-surface-hoch); }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .hotspot-schild {
    padding: var(--u-s-2) var(--u-s-4);
    border-radius: var(--u-r-sm);
    background: var(--u-bereich-bg);
    box-shadow: 0 0 0 1px var(--u-bereich), var(--u-e-1);
    color: var(--u-bereich-fg);
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .hotspot-werkzeug .hotspot-schild { display: grid; }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .hotspot:is(:hover, :focus-visible) .hotspot-schild { box-shadow: 0 0 0 1px var(--u-bereich), var(--u-glow-neon); }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .wandschirm { inline-size: max(var(--u-b), 9.5rem); gap: var(--u-s-1); padding: var(--u-s-3) var(--u-s-4); }
  /* Kasten-Probe ohne Uebergang. */
  :root[data-huelle="glas"] .buehne[data-messen] * { transition-property: none; }
}
@container inhalt (44rem <= width < 70rem) {
  :root[data-huelle="glas"] .raum-raster { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); grid-template-areas: "kopf kopf" "links buehne" "rechts rechts"; }
}
@container inhalt (width >= 70rem) {
  :root[data-huelle="glas"] .raum-raster {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.4fr) minmax(22rem, 1.5fr);
    grid-template-areas: "kopf kopf rechts" "links buehne rechts";
    grid-template-rows: auto 1fr;
  }
  :root[data-huelle="glas"] .raum-spalte:has(> .raum-gespraech:not([hidden]) > .chat-instanz) { position: sticky; top: calc(var(--u-topbar-h) + var(--u-s-4)); block-size: var(--raum-chat-h); }
  :root[data-huelle="glas"] .raum-spalte > .raum-gespraech:has(> .chat-instanz) { flex: 1 1 auto; block-size: auto; min-block-size: 0; }
}
/* Ab 105rem (volle Breite, M1-B): Figur schmal, Buehne, rechte Spalte ab 36rem. */
@container inhalt (width >= 105rem) {
  :root[data-huelle="glas"] .raum-raster { grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.75fr) minmax(36rem, 2fr); }
}
/* AUFTRAEGE IM RAUM (M1-C): Panel-Zeilen schmal als Karte, ab 44rem Behaelter als Tabellenzeile (Entwurf C); Kanalwort in
   geliehenen Textstufen, Zeichen blass (3:1) = nicht belegt; Kostenwarnung als zweiter Schirm-Balken; Hochzaehlen der Raumzahlen
   (widgets.js). Langfassung: docs §15.180. */
:root[data-huelle="glas"] .auftrag-reiter .reiter-zahl { font-variant-numeric: tabular-nums; opacity: .8; }
:root[data-huelle="glas"] .auftrag-zeilen { display: grid; gap: var(--u-s-3); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .auftrag-zeilen + .raum-panel-kopf { margin-block-start: var(--u-s-6); }
:root[data-huelle="glas"] .auftrag-zeilen-kopf { display: none; }
:root[data-huelle="glas"] .auftrag-zeile { display: grid; grid-template: "bild kern kern" "bild kunde betrag" "bild stand stand" / 3rem minmax(0, 1fr) auto; gap: var(--u-s-1) var(--u-s-4); padding: var(--u-s-3) var(--u-s-4); border-inline-start: 3px solid var(--u-bereich); border-radius: var(--u-r-md); background: var(--u-surface); box-shadow: var(--u-e-1); }
:root[data-huelle="glas"] .auftrag-bild { grid-area: bild; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--u-r-sm); background: var(--u-surface-alt); box-shadow: inset 0 0 0 1px var(--u-border); font-family: var(--u-font-hud); font-size: var(--u-t-lg); font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] .auftrag-kern { grid-area: kern; display: grid; gap: 2px; min-inline-size: 0; }
:root[data-huelle="glas"] .auftrag-kopf { display: flex; flex-wrap: wrap; gap: 0 var(--u-s-3); align-items: baseline; }
:root[data-huelle="glas"] :is(.auftrag-kanal, .auftrag-bild) { color: var(--u-text-2); }
:root[data-huelle="glas"] .auftrag-kanal { font-family: var(--u-font-hud); font-size: var(--u-t-sm); letter-spacing: var(--u-track-hud); }
:root[data-huelle="glas"] :is(.auftrag-kanal, .auftrag-bild)[data-kanal="kaufland"] { color: var(--u-kanal-kaufland); }
:root[data-huelle="glas"] :is(.auftrag-kanal, .auftrag-bild)[data-kanal="ebay"] { color: var(--u-kanal-ebay); }
:root[data-huelle="glas"] :is(.auftrag-kanal, .auftrag-bild)[data-kanal="amazon"] { color: var(--u-kanal-amazon); }
:root[data-huelle="glas"] :is(.auftrag-kanal, .auftrag-bild)[data-kanal="shop"] { color: var(--u-kanal-shop); }
:root[data-huelle="glas"] :is(.auftrag-zeit, .auftrag-nummer) { color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .auftrag-artikel { overflow: hidden; color: var(--u-text); font-weight: var(--u-w-heavy); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .auftrag-artikel:hover { text-decoration: underline; }
:root[data-huelle="glas"] .auftrag-nummer { font-family: var(--u-font-mono); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .auftrag-bezug { color: var(--u-bereich-fg); }
:root[data-huelle="glas"] .auftrag-kunde { grid-area: kunde; min-inline-size: 0; font-size: var(--u-t-sm); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .auftrag-betrag { grid-area: betrag; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
:root[data-huelle="glas"] .auftrag-stand { grid-area: stand; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--u-s-2) var(--u-s-4); }
:root[data-huelle="glas"] .auftrag-zeichen { display: inline-flex; gap: var(--u-s-3); }
:root[data-huelle="glas"] .auftrag-zeichen-eins { position: relative; display: inline-flex; color: var(--u-text-faint); }
:root[data-huelle="glas"] .auftrag-zeichen-eins[data-an] { color: var(--u-text); }
:root[data-huelle="glas"] .auftrag-zeichen-eins .sym { inline-size: 1rem; block-size: 1rem; }
@container inhalt (width >= 44rem) {
  :root[data-huelle="glas"] :is(.auftrag-zeilen-kopf, .auftrag-zeile) { grid-template: "bild kern kunde betrag stand" / 3rem minmax(0, 1fr) 10rem 6rem 10rem; align-items: center; }
  :root[data-huelle="glas"] .auftrag-zeilen-kopf { display: grid; gap: var(--u-s-4); padding-inline: var(--u-s-4); color: var(--u-text-2); font-family: var(--u-font-hud); font-size: var(--u-t-2xs); letter-spacing: var(--u-track-hud); text-transform: uppercase; }
  :root[data-huelle="glas"] .auftrag-zeilen-kopf > :nth-child(4) { text-align: end; }
  :root[data-huelle="glas"] .auftrag-kunde { display: grid; }
  :root[data-huelle="glas"] .auftrag-stand { flex-direction: column; align-items: start; }
}
:root[data-huelle="glas"] .wandschirm .balken + .balken { margin-block-start: var(--u-s-3); }
:root[data-huelle="glas"] :is(.lage-zahl, .figur-wert b, .wandschirm-betrag > b)[data-zaehlen] { position: relative; }
/* TELEFON (<44rem): Bild aus, Werte eine Zeile (das Wort zu „—" bleibt), Avatare als Chips, Buehne 2:1 (Falz 390 x 844). */
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .raum-zum-gespraech:not(:focus-visible) { position: static; width: auto; height: auto; min-block-size: max(2.75rem, var(--u-ziel-min)); clip-path: none; }
  :root[data-huelle="glas"] .raum-wege { margin: 0; }
  :root[data-huelle="glas"] .raum-fakten + .raum-wege { margin-block-start: var(--u-s-4); }
  :root[data-huelle="glas"] .figur-karte { gap: var(--u-s-3); margin-block-start: 0; }
  :root[data-huelle="glas"] :is(.figur-bild, .figur-avatar, .figur-karte .figur-ersatz) { display: none; }
  :root[data-huelle="glas"] .figur-werte { display: flex; flex-wrap: wrap; gap: var(--u-s-1) var(--u-s-5); padding: var(--u-s-3) var(--u-s-4); }
  :root[data-huelle="glas"] .figur-wert { display: flex; align-items: baseline; gap: var(--u-s-2); }
  :root[data-huelle="glas"] .figur-wert dd { font-size: var(--u-t-md); }
  :root[data-huelle="glas"] .figur-wert :is(.balken, .figur-wert-unter:not(.figur-wert-grund)) { display: none; }
  :root[data-huelle="glas"] .figur-wert-grund { display: inline; }
  :root[data-huelle="glas"] .raum-agent { grid-auto-flow: column; align-items: center; min-block-size: max(2.75rem, var(--u-ziel-min)); padding: var(--u-s-1) var(--u-s-4) var(--u-s-1) var(--u-s-1); }
  :root[data-huelle="glas"] .raum-agent-bild { width: 32px; height: 32px; }
  :root[data-huelle="glas"] :is(.buehne-bild, .buehne-rohbau) { aspect-ratio: 2 / 1; }
  :root[data-huelle="glas"] .buehne-bild { object-fit: cover; }
  :root[data-huelle="glas"][data-tastatur="1"] .raum-gespraech:has(> .chat-instanz:focus-within) { block-size: calc(var(--u-sicht-h) - var(--u-topbar-h)); padding: var(--u-s-2); }
}
/* ── PARALLAX (P5-D) ── Buehne gegen, Figur mit dem Zeiger; Werte nur an den zwei Traegern, scharf erst mit data-parallax,
   eine Ebene nur fuer die Buehne, kein z-index. Langfassung: docs/oberflaeche-huelle.md §4i. */
@property --u-px { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --u-py { syntax: '<number>'; inherits: false; initial-value: 0; }
@media (hover: hover) and (pointer: fine) {
  @container inhalt (width >= 70rem) {
    :root[data-huelle="glas"] .raum-raster[data-parallax] .buehne-bild-rahmen { translate: calc(var(--u-px) * -1 * var(--u-parallax-buehne) * var(--u-bewegung)) calc(var(--u-py) * -1 * var(--u-parallax-buehne) * var(--u-bewegung)); transition: translate var(--u-dur-4) var(--u-ease); will-change: translate; }
    :root[data-huelle="glas"] .raum-raster[data-parallax] .figur-bild { translate: calc(var(--u-px) * var(--u-parallax-figur) * var(--u-bewegung)) calc(var(--u-py) * var(--u-parallax-figur) * var(--u-bewegung)); transition: translate var(--u-dur-4) var(--u-ease); }
  }
}
/* ── ENDE PARALLAX ── */
/* Erzwungene Farben: Systemkanten statt Ring und Schein, Magenta als Highlight; die Liste rahmt die Zeile. */
@media (forced-colors: active) {
  :root[data-huelle="glas"] .raum-kopf::after,
  :root[data-huelle="glas"] .figur-schild::before,
  :root[data-huelle="glas"] .buehne-rohbau::before,
  :root[data-huelle="glas"] .buehne-rohbau::after { display: none; }
  :root[data-huelle="glas"] :is(.hotspot-scheibe, .raum-agent-bild, .wandschirm, .buehne-rohbau, .buehne[data-platziert] .buehne-bild-rahmen .hotspot-schild) { border: 2px solid CanvasText; }
  :root[data-huelle="glas"] :is(.buehne:not([data-platziert]), .buehne-weitere) .hotspot { border: 1px solid CanvasText; }
  :root[data-huelle="glas"] :is(.buehne:not([data-platziert]), .buehne-weitere) .hotspot[data-wartet],
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .hotspot[data-wartet] :is(.hotspot-scheibe, .hotspot-schild) { outline: 3px solid Highlight; outline-offset: 2px; }
  :root[data-huelle="glas"] .buehne[data-platziert] .buehne-bild-rahmen .hotspot:focus-visible { background: Canvas; outline: 3px solid CanvasText; outline-offset: 0; }
  :root[data-huelle="glas"] .raum-agent[aria-current="true"] { outline: 2px solid Highlight; }
  :root[data-huelle="glas"] .raum-umschalter .filter-wahl[aria-current="true"] { outline: 2px solid Highlight; }
}
/* ══ ENDE RAUM ══ */

/* ══ EBENE ══ docs §21e */
:root[data-huelle="glas"] .ebene-leiste { display: flex; align-items: center; gap: var(--u-s-3); max-inline-size: 100%; padding: 0 var(--u-s-3); border-radius: var(--u-r-xl); }
:root[data-huelle="glas"] .ebene-reiter-liste { display: flex; gap: var(--u-s-2); min-inline-size: 0; margin: 0; padding: var(--u-s-2); overflow-x: auto; overscroll-behavior: contain; list-style: none; }
:root[data-huelle="glas"] .ebene-reiter { display: flex; flex: none; align-items: center; }
:root[data-huelle="glas"] .ebene-reiter-knopf { display: inline-flex; align-items: center; gap: var(--u-s-3); min-block-size: max(var(--u-s-11), var(--u-ziel-min)); max-inline-size: 13rem; padding: var(--u-s-1) var(--u-s-4) var(--u-s-1) var(--u-s-1); border: 0; border-radius: var(--u-r-full); background: var(--u-slot); color: var(--u-text); font-family: inherit; font-size: var(--u-t-sm); font-weight: var(--u-w-strong); cursor: pointer; }
:root[data-huelle="glas"] .ebene-reiter-knopf[aria-current="true"] { background: var(--u-surface); box-shadow: inset 0 0 0 2px var(--u-neon-violett); color: var(--u-brand-text); }
:root[data-huelle="glas"] :is(.ebene-reiter-bild, .ebene-reiter-zu) { display: inline-grid; flex: none; place-items: center; border-radius: var(--u-r-full); }
:root[data-huelle="glas"] .ebene-reiter-bild { inline-size: var(--u-s-11); block-size: var(--u-s-11); background: var(--u-surface-2); box-shadow: 0 0 0 2px var(--u-neon-violett); font-family: var(--u-font-hud); font-size: var(--u-t-2xs); object-fit: cover; }
:root[data-huelle="glas"] .ebene-reiter[data-wartet] .ebene-reiter-bild { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-neon-magenta); }
:root[data-huelle="glas"] .ebene-reiter-freigabe { inline-size: 16px; block-size: 16px; color: var(--u-text); }
:root[data-huelle="glas"] .ebene-reiter-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .ebene-reiter-zustand { color: var(--u-text-2); font-size: var(--u-t-2xs); white-space: nowrap; }
:root[data-huelle="glas"] .ebene-reiter-zu { inline-size: max(var(--u-s-12), var(--u-ziel-min)); block-size: max(var(--u-s-12), var(--u-ziel-min)); padding: 0; border: 0; background: none; color: var(--u-text-2); font-size: var(--u-t-lg); cursor: pointer; }
:root[data-huelle="glas"] .ebene-satz { margin: 0; max-inline-size: 14rem; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] :is(.ebene-inhalt, .ebene-inhalt > .chat-instanz) { display: flex; flex: 1 1 auto; flex-direction: column; min-block-size: 0; }
:root[data-huelle="glas"] .ebene-inhalt { max-width: none; padding: 0; }
:root[data-huelle="glas"] .ebene-inhalt .chat-karte { border-radius: var(--u-r-lg); overflow: hidden; }
@media (forced-colors: active) {
  :root[data-huelle="glas"] :is(.ebene-reiter-neu, .ebene-reiter-freigabe, .ebene-reiter-bild) { border: 1px solid CanvasText; }
  :root[data-huelle="glas"] .ebene-reiter-knopf[aria-current="true"] { outline: 2px solid Highlight; }
  :root[data-huelle="glas"] .ebene-reiter[data-wartet] .ebene-reiter-bild { outline: 3px solid Highlight; outline-offset: 2px; }
}
/* ══ ENDE EBENE ══ */

/* MB-B35: Belegakte */
/* Prüfplatz nach dem Vorbild der Belegprüfung in Lexware (Manuel 06.10.2026): dunkle Kopf- und Fußzeile, links Werkzeuge,
   Mitte das Original, rechts Karten mit umrandeten Feldern (Beschriftung im Rahmen). Nur Rollen; die Leistenfarben
   stehen einmal als lokale Größen. */
:root[data-huelle="glas"] .bp {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: max(40rem, calc(var(--u-sicht-h, 100dvh) - var(--u-rahmen-h, 9rem)));
    background: var(--u-surface-2);
    color: var(--u-text);
    border-radius: var(--u-r-md);
    overflow: hidden;
}
/* Der Prüfplatz füllt das Fenster bis an die Ränder (Manuel 07.10.2026): die Akte hebt den Innenabstand des Fensterkörpers
   (--u-s-8 seitlich und unten) auf und schließt an die Titelleiste an; die Höhe wächst um den gewonnenen unteren Rand. */
:root[data-huelle="glas"] .akte-pruefplatz { margin: -1px calc(-1 * var(--u-s-8)) calc(-1 * var(--u-s-8)); }
:root[data-huelle="glas"] .akte-pruefplatz > .bp { border-radius: 0; height: max(40rem, calc(var(--u-sicht-h, 100dvh) - var(--u-rahmen-h, 9rem) + var(--u-s-8))); }
:root[data-huelle="glas"] .bp .sym { width: 1.25rem; height: 1.25rem; }
:root[data-huelle="glas"] .bp > *,
:root[data-huelle="glas"] .bp-mitte > *,
:root[data-huelle="glas"] .bp-seite > * { min-width: 0; }

/* Hinweise belegen nur bei Bedarf eine zusätzliche Rasterzeile. */
:root[data-huelle="glas"] .bp:has(> .bp-hinweise) { grid-template-rows: auto auto minmax(0, 1fr) auto; }
/* Kopf */
:root[data-huelle="glas"] .bp-haupt { margin-inline-end: var(--u-s-2); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bp-kopf {
    display: flex; align-items: center; gap: var(--u-s-3);
    min-height: 3.5rem; padding: 0 var(--u-s-4) 0 var(--u-s-2);
    background: var(--u-pruef-leiste); color: var(--u-pruef-text);
}
:root[data-huelle="glas"] .bp-rund {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    color: var(--u-pruef-text); text-decoration: none;
}
:root[data-huelle="glas"] a.bp-rund:hover { background: var(--u-pruef-hover); }
:root[data-huelle="glas"] .bp-rund.bp-aus { opacity: .35; }
:root[data-huelle="glas"] .bp-pfeil { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Der Prüfplatz trägt seine eigene Kopfzeile; der Fenstertitel bleibt nur für Vorleser. */
:root[data-huelle="glas"] .bp-titel {
    margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: var(--u-w-medium) var(--u-t-feld)/1.3 var(--u-font-body); letter-spacing: .01em; color: var(--u-pruef-text);
}
:root[data-huelle="glas"] .bp-titel span { color: var(--u-pruef-leise); margin: 0 .2rem; }
:root[data-huelle="glas"] .bp-kopf-rechts { margin-inline-start: auto; display: flex; align-items: center; gap: .25rem; flex: none; }
:root[data-huelle="glas"] .bp-chip { margin-inline-end: var(--u-s-2); padding: .2rem .75rem; border: 1px solid var(--u-pruef-linie); border-radius: 999px; font-size: var(--u-t-xs); font-weight: var(--u-w-hud); }
:root[data-huelle="glas"] .bp-zaehler { margin-inline-end: .35rem; font-size: var(--u-t-lg); white-space: nowrap; }
:root[data-huelle="glas"] .bp-hinweise { padding: var(--u-s-2) var(--u-s-4) 0; }
:root[data-huelle="glas"] .bp-hinweise .streifen { margin: 0 0 var(--u-s-2); }

/* Mitte: Leiste | Bühne | Seite */
:root[data-huelle="glas"] .bp-mitte {
    display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(24rem, 36rem); min-height: 0;
}
:root[data-huelle="glas"] .bp-leiste { display: flex; flex-direction: column; align-items: center; gap: .65rem; padding: var(--u-s-5) 0; }
:root[data-huelle="glas"] .bp-gruppe { display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 999px; background: var(--u-surface); box-shadow: var(--u-e-1); }
:root[data-huelle="glas"] .bp-gruppe button,
:root[data-huelle="glas"] .bp-gruppe a {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--u-text-2); cursor: pointer;
}
:root[data-huelle="glas"] .bp-gruppe button:hover:not(:disabled),
:root[data-huelle="glas"] .bp-gruppe a:hover { background: var(--u-hover); color: var(--u-text); }
:root[data-huelle="glas"] .bp-gruppe button:disabled { opacity: .4; cursor: not-allowed; }

:root[data-huelle="glas"] .bp-buehne { position: relative; overflow: auto; padding: 2.6rem var(--u-s-6) var(--u-s-8); }
:root[data-huelle="glas"] .bp-status {
    position: sticky; top: -1.6rem; z-index: var(--u-z-zeile); display: table; margin: -1.6rem auto .6rem;
    padding: .35rem 1rem; border-radius: 999px; font-size: var(--u-t-xs); font-weight: var(--u-w-titel); letter-spacing: .05em; text-transform: uppercase;
    box-shadow: var(--u-e-3);
}
:root[data-huelle="glas"] .bp-status-pruefen { background: var(--u-pruef-orange); color: var(--u-pruef-weiss); }
:root[data-huelle="glas"] .bp-status-ruhig { background: var(--u-surface); color: var(--u-text-2); }
:root[data-huelle="glas"] .bp-seiten { display: grid; justify-items: center; gap: var(--u-s-5); transform-origin: top center; }
:root[data-huelle="glas"] .bp-blatt {
    display: block; width: calc(min(100%, 52rem) * var(--bp-zoom, 1)); max-width: none; height: auto; background: var(--u-pruef-weiss);
    transform: rotate(var(--bp-drehung, 0deg)); transition: width calc(var(--u-dur-2) * var(--u-bewegung)) var(--u-ease), transform calc(var(--u-dur-2) * var(--u-bewegung)) var(--u-ease);
    box-shadow: var(--u-e-3);
}
:root[data-huelle="glas"] .bp-leerblatt {
    width: min(100%, 52rem); aspect-ratio: 1 / 1.414; margin: 0 auto;
    display: grid; place-content: center; justify-items: center; gap: var(--u-s-5); padding: var(--u-s-8);
    background: var(--u-surface); box-shadow: var(--u-e-3); text-align: center;
}
:root[data-huelle="glas"] .bp-skizze {
    width: 9rem; aspect-ratio: 1 / 1.414; display: grid; align-content: start; gap: .5rem; padding: 1.2rem 1rem;
    border: 1px solid var(--u-border); border-radius: var(--u-r-sm); background: var(--u-surface-2);
}
:root[data-huelle="glas"] .bp-skizze i { display: block; height: .4rem; border-radius: 999px; background: var(--u-surface-3); }
:root[data-huelle="glas"] .bp-skizze i:nth-child(1) { width: 55%; height: .65rem; }
:root[data-huelle="glas"] .bp-skizze i:nth-child(2) { width: 80%; margin-block-end: .5rem; }
:root[data-huelle="glas"] .bp-skizze i:nth-child(5) { width: 70%; }
:root[data-huelle="glas"] .bp-skizze i:nth-child(6) { width: 40%; margin-inline-start: auto; margin-block-start: .7rem; }
:root[data-huelle="glas"] .bp-leerblatt p { max-width: 24rem; margin: 0; color: var(--u-text-2); font-size: var(--u-t-sm); line-height: 1.55; }
:root[data-huelle="glas"] .bp-leerblatt strong { display: block; margin-block-end: .25rem; color: var(--u-text); font-size: var(--u-t-md); }

/* Rechte Seite */
:root[data-huelle="glas"] .bp-karte > .bp-status-zeile { margin: 0 0 var(--u-s-5); }

:root[data-huelle="glas"] .bp-seite { overflow: auto; display: flex; flex-direction: column; gap: .9rem; padding: var(--u-s-4) var(--u-s-4) var(--u-s-6) 2px; }
:root[data-huelle="glas"] .bp-formular { display: contents; }
:root[data-huelle="glas"] .bp-formular-felder { display: flex; flex-direction: column; gap: .9rem; min-width: 0; margin: 0; padding: 0; border: 0; }
:root[data-huelle="glas"] .bp-karte {
    margin: 0; padding: 1.25rem 1.35rem; border-radius: 10px; background: var(--u-surface);
    box-shadow: var(--u-e-3); min-width: 0;
}
:root[data-huelle="glas"] .bp-karte > h2 {
    display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; padding: 0; border: 0;
    font: var(--u-w-hud) var(--u-t-xl)/1.25 var(--u-font-display); letter-spacing: .005em;
}
:root[data-huelle="glas"] .bp-modus {
    margin-inline-start: auto; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px;
    background: var(--u-info-bg); color: var(--u-info-fg); font: var(--u-w-hud) var(--u-t-xs)/1.2 var(--u-font-body); letter-spacing: .04em; text-transform: uppercase;
}
:root[data-huelle="glas"] .bp-modus .sym { width: .9rem; height: .9rem; }
:root[data-huelle="glas"] .bp-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1rem; }
:root[data-huelle="glas"] .bp-breit { grid-column: 1 / -1; }

/* Umrandetes Feld, Beschriftung im Rahmen */
:root[data-huelle="glas"] .bp-feld { min-width: 0; }
:root[data-huelle="glas"] .bp-rahmen {
    position: relative; display: flex; align-items: center; gap: .55rem; height: 3.4rem; padding: 0 .85rem;
    border: 1px solid var(--u-border-strong); border-radius: 6px; background: var(--u-surface);
    transition: border-color calc(var(--u-dur-2) * var(--u-bewegung)) var(--u-ease), box-shadow calc(var(--u-dur-2) * var(--u-bewegung)) var(--u-ease);
}
:root[data-huelle="glas"] .bp-rahmen:focus-within { border-color: var(--u-brand-text); box-shadow: 0 0 0 1px var(--u-brand-text); }
:root[data-huelle="glas"] .bp-rahmen label {
    position: absolute; left: .55rem; top: -.6rem; padding: 0 .3rem; background: var(--u-surface);
    font-size: var(--u-t-xs); color: var(--u-text-2); pointer-events: none; white-space: nowrap;
}
:root[data-huelle="glas"] .bp-rahmen input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
    color: var(--u-text); font: var(--u-w-normal) var(--u-t-feld)/1 var(--u-font-body);
}
:root[data-huelle="glas"] .bp-rahmen input[readonly] { color: var(--u-text-2); }
:root[data-huelle="glas"] .bp-rahmen input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bp-rahmen .bp-vorn { color: var(--u-text-2); }
:root[data-huelle="glas"] .bp-funken { width: 1.1rem; height: 1.1rem; fill: var(--u-brand-text); flex: none; }
:root[data-huelle="glas"] .bp-rahmen .bp-funken { display: none; }
:root[data-huelle="glas"] .bp-karte > h2 .bp-funken { width: 1.2rem; height: 1.2rem; }
:root[data-huelle="glas"] .bp-hilfe { display: block; margin: .3rem .2rem 0 0; text-align: right; font-size: var(--u-t-xs); color: var(--u-text-2); }
:root[data-huelle="glas"] .bp-hilfe b { font-weight: var(--u-w-hud); color: var(--u-text-2); }
/* Vom Agenten eingetragen: violetter Rand innen links, Funken im Feld, Begründung darunter. */
:root[data-huelle="glas"] .bp-feld.ist-vorschlag .bp-rahmen { border-color: var(--u-brand-text); box-shadow: inset 3px 0 0 var(--u-brand-text); }
:root[data-huelle="glas"] .bp-feld.ist-vorschlag .bp-rahmen label { color: var(--u-brand-text); }
:root[data-huelle="glas"] .bp-feld.ist-vorschlag .bp-rahmen .bp-funken { display: block; }
:root[data-huelle="glas"] .bp-verwerfen {
    display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--u-text-2); cursor: pointer; flex: none;
}
:root[data-huelle="glas"] .bp-verwerfen:hover { background: var(--u-hover); }
:root[data-huelle="glas"] .bp-verwerfen[hidden] { display: none; }
:root[data-huelle="glas"] .bp-verwerfen .sym { width: .85rem; height: .85rem; }
:root[data-huelle="glas"] .bp-vorschlag { display: block; margin: .3rem 0 0 .15rem; font-size: var(--u-t-xs); color: var(--u-brand-text); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .bp-vorschlag::before { content: attr(data-agent) ": "; font-weight: var(--u-w-hud); }
:root[data-huelle="glas"] .bp-vorschlag[hidden] { display: none; }
:root[data-huelle="glas"] .bp-versteckt { display: none; }

/* Kategorisierung */
:root[data-huelle="glas"] .bp-positionen { display: grid; gap: 1rem; counter-reset: bp-pos; }
:root[data-huelle="glas"] .bp-position { display: grid; gap: 1.15rem; margin: 0; padding: 0; border: 0; min-width: 0; counter-increment: bp-pos; }
:root[data-huelle="glas"] .bp-positionen:has(.bp-position + .bp-position) .bp-position {
    padding: 1.1rem 1rem .6rem; border: 1px solid var(--u-border-soft); border-radius: 8px;
}
:root[data-huelle="glas"] .bp-positionen:has(.bp-position + .bp-position) .bp-position::before {
    content: "Position " counter(bp-pos); margin-block-end: -.4rem; font-size: var(--u-t-xs); font-weight: var(--u-w-hud); color: var(--u-text-2);
}
:root[data-huelle="glas"] .bp-position-nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-huelle="glas"] .bp-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: 1rem; }
:root[data-huelle="glas"] .bp-zeile-betrag { grid-template-columns: 10rem minmax(0, 1fr); }
:root[data-huelle="glas"] .bp-position-weg {
    justify-self: end; display: none; align-items: center; gap: .35rem; padding: .3rem .5rem; border: 0; border-radius: 6px;
    background: transparent; color: var(--u-text-2); font: var(--u-w-hud) var(--u-t-xs)/1 var(--u-font-body); cursor: pointer;
}
:root[data-huelle="glas"] .bp-positionen:has(.bp-position + .bp-position) .bp-position-weg { display: inline-flex; }
:root[data-huelle="glas"] .bp-position-weg:hover { background: var(--u-danger-bg); color: var(--u-danger-fg); }
:root[data-huelle="glas"] .bp-position-weg .sym { width: 1rem; height: 1rem; }
:root[data-huelle="glas"] .bp-summe {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-block-start: 1rem; padding-block-start: .85rem;
    border-top: 1px solid var(--u-border-soft); font-size: var(--u-t-md);
}
:root[data-huelle="glas"] .bp-summe[hidden] { display: none; }
:root[data-huelle="glas"] .bp-summe b { font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bp-summe small { margin-inline-start: .35rem; color: var(--u-text-2); }
:root[data-huelle="glas"] .bp-abgleich { margin-inline-start: auto; padding: .15rem .6rem; border-radius: 999px; font-size: var(--u-t-xs); font-weight: var(--u-w-hud); }
:root[data-huelle="glas"] .bp-abgleich[data-stand="ok"] { background: var(--u-ok-bg); color: var(--u-ok-fg); }
:root[data-huelle="glas"] .bp-abgleich[data-stand="warn"] { background: var(--u-warn-bg); color: var(--u-warn-fg); }
:root[data-huelle="glas"] .bp-textlink { display: flex; justify-content: flex-end; margin-block-start: .9rem; }
:root[data-huelle="glas"] .bp-textlink button {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 0; border-radius: 6px; background: transparent;
    color: var(--u-text); font: var(--u-w-titel) var(--u-t-sm)/1 var(--u-font-body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
:root[data-huelle="glas"] .bp-textlink button:hover { background: var(--u-hover); }
:root[data-huelle="glas"] .bp-status-zeile { margin: 0 .3rem; font-size: var(--u-t-sm); color: var(--u-text-2); }
:root[data-huelle="glas"] .bp-bestaetigen { display: flex; gap: .5rem; align-items: center; font-size: var(--u-t-md); }
:root[data-huelle="glas"] .bp-abweichungen { padding: .9rem 1.1rem; background: var(--u-warn-bg); }
:root[data-huelle="glas"] .bp-abweichungen summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: var(--u-w-hud); font-size: var(--u-t-md); color: var(--u-warn-fg); }
:root[data-huelle="glas"] .bp-abweichungen ul { display: grid; gap: .3rem; margin: .7rem 0 0; padding: 0; list-style: none; font-size: var(--u-t-md); }
:root[data-huelle="glas"] .bp-abweichungen li { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .bp-abweichungen li span,
:root[data-huelle="glas"] .bp-abweichungen li s { color: var(--u-text-2); }

/* Bankzuordnung */
:root[data-huelle="glas"] .bp-leer { margin: 0; color: var(--u-text-2); font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .bp-bank {
    display: flex; align-items: center; gap: 1rem; margin: 0 -1.35rem -1.25rem; padding: 1rem 1.35rem;
    border-top: 1px solid var(--u-border-soft); border-radius: 0 0 10px 10px; background: var(--u-surface-alt); color: var(--u-text); text-decoration: none;
}
:root[data-huelle="glas"] .bp-bank + .bp-bank { margin-block-start: 1.25rem; }
:root[data-huelle="glas"] .bp-bank:hover { background: var(--u-hover); }
:root[data-huelle="glas"] .bp-bank-symbol { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--u-ok-bg); color: var(--u-ok-fg); }
:root[data-huelle="glas"] .bp-bank-text { min-width: 0; }
:root[data-huelle="glas"] .bp-bank-text b { display: block; font-size: var(--u-t-feld); }
:root[data-huelle="glas"] .bp-bank-text small { display: block; margin-block-start: .15rem; font-size: var(--u-t-sm); color: var(--u-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .bp-bank-betrag { margin-inline-start: auto; flex: none; text-align: right; font-weight: var(--u-w-titel); font-size: var(--u-t-feld); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bp-bank-betrag.bp-minus { color: var(--u-danger); }
:root[data-huelle="glas"] .bp-bank-betrag small { display: block; font-weight: var(--u-w-normal); font-size: var(--u-t-xs); color: var(--u-ok-fg); }

/* Gespräch */
:root[data-huelle="glas"] .bp-mira-kopf { display: flex; align-items: center; gap: .8rem; margin-block-end: .9rem; }
:root[data-huelle="glas"] .bp-mira-kopf img { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--u-brand-line); }
:root[data-huelle="glas"] .bp-mira-symbol { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--u-brand-wash); color: var(--u-brand-text); }
:root[data-huelle="glas"] .bp-mira-kopf b { font-size: var(--u-t-feld); }
:root[data-huelle="glas"] .bp-mira-kopf small { display: block; color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .bp-mira .chat-instanz { min-height: 18rem; }
:root[data-huelle="glas"] .bp-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-end: .7rem; }
:root[data-huelle="glas"] .bp-chips button {
    padding: .35rem .75rem; border: 1px solid var(--u-border); border-radius: 999px; background: var(--u-surface);
    color: var(--u-text-2); font: var(--u-w-medium) var(--u-t-sm)/1.2 var(--u-font-body); cursor: pointer;
}
:root[data-huelle="glas"] .bp-chips button:hover { border-color: var(--u-brand-text); color: var(--u-brand-text); }
:root[data-huelle="glas"] .bp-eingabe {
    display: flex; align-items: flex-end; gap: .5rem; padding: .3rem .3rem .3rem .9rem;
    border: 1px solid var(--u-border-strong); border-radius: 1.4rem; background: var(--u-surface);
}
:root[data-huelle="glas"] .bp-eingabe:focus-within { border-color: var(--u-brand-text); box-shadow: 0 0 0 1px var(--u-brand-text); }
:root[data-huelle="glas"] .bp-eingabe textarea {
    flex: 1; min-width: 0; min-height: 2.3rem; max-height: 9rem; padding: .55rem 0; border: 0; outline: none; resize: none;
    background: transparent; color: var(--u-text); font: var(--u-w-normal) var(--u-t-lg)/1.35 var(--u-font-body);
}
:root[data-huelle="glas"] .bp-eingabe button {
    flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%;
    background: var(--u-knopf-haupt); color: var(--u-knopf-haupt-text); cursor: pointer;
}

/* Weitere Angaben */
:root[data-huelle="glas"] .bp-mehr { padding: 0; }
:root[data-huelle="glas"] .bp-mehr > summary { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.35rem; cursor: pointer; list-style: none; font-weight: var(--u-w-hud); font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .bp-mehr > summary::-webkit-details-marker { display: none; }
:root[data-huelle="glas"] .bp-mehr > summary .sym { color: var(--u-text-2); }
:root[data-huelle="glas"] .bp-mehr > summary::after {
    content: ""; margin-inline-start: auto; width: .5rem; height: .5rem;
    border-right: 2px solid var(--u-text-2); border-bottom: 2px solid var(--u-text-2); transform: rotate(45deg); transition: transform calc(var(--u-dur-2) * var(--u-bewegung)) var(--u-ease);
}
:root[data-huelle="glas"] .bp-mehr[open] > summary::after { transform: rotate(-135deg); }
:root[data-huelle="glas"] .bp-mehr > :not(summary) { margin: 0 1.35rem 1.1rem; }
:root[data-huelle="glas"] .bp-mehr h3 { margin: .4rem 0 .5rem; font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .bp-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: var(--u-t-md); }
:root[data-huelle="glas"] .bp-liste li { display: flex; justify-content: space-between; gap: 1rem; }

/* Fuß */
:root[data-huelle="glas"] .bp-fuss {
    display: flex; align-items: center; gap: var(--u-s-3); min-height: 3.75rem; padding: 0 var(--u-s-5);
    background: var(--u-pruef-leiste); color: var(--u-pruef-text);
}
:root[data-huelle="glas"] .bp-seitenzahl { font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .bp-fuss-rechts { margin-inline-start: auto; display: flex; align-items: center; gap: .6rem; }
:root[data-huelle="glas"] .bp-flach {
    padding: .6rem 1rem; border-radius: 6px; color: var(--u-pruef-text); text-decoration: none;
    font: var(--u-w-titel) var(--u-t-md)/1 var(--u-font-body); letter-spacing: .07em; text-transform: uppercase;
}
:root[data-huelle="glas"] .bp-flach:hover { background: var(--u-pruef-hover); }
:root[data-huelle="glas"] .bp-speichern { display: inline-flex; border-radius: 6px; overflow: hidden; background: var(--u-pruef-gruen); }
:root[data-huelle="glas"] .bp-speichern button {
    padding: .75rem 1.15rem; border: 0; background: transparent; color: var(--u-pruef-weiss); cursor: pointer;
    font: var(--u-w-titel) var(--u-t-md)/1 var(--u-font-body); letter-spacing: .07em; text-transform: uppercase;
}
:root[data-huelle="glas"] .bp-speichern button:hover { background: var(--u-pruef-druck); }
:root[data-huelle="glas"] .bp-speichern .bp-nur { border-inline-start: 1px solid var(--u-pruef-linie); font-weight: var(--u-w-hud); letter-spacing: .03em; text-transform: none; }

@media (forced-colors: active) {
  :root[data-huelle="glas"] .bp-mehr > summary::after { border-color: ButtonText; }
}
/* ENDE MB-B35 */

/* ══ DAS TELEFON HAT DAS LETZTE WORT ══
   Die EINE Breiten-Medienabfrage (17) steht am ENDE: sie gibt keiner Regel Spezifitaet dazu, eine
   spaetere Grundregel gewaenne auf jeder Breite (13t). Langfassung: docs §15.66. */
@media (max-width: 60rem) {
  /* Q5: am Telefon ist das Dock die Leiste am unteren Rand über die ganze Breite (rollt waagerecht), ohne Agentengruppe. */
  :root[data-huelle="glas"] body > .rdock, :root[data-huelle="glas"] body > .rdock[data-auto]:not(:hover, :focus-within) { left: 0; right: 0; bottom: 0; max-inline-size: none; transform: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  :root[data-huelle="glas"] body > .rdock > .rdock-ziele { flex: 1 1 auto; }
  :root[data-huelle="glas"] body > .rdock > .rdock-agenten, :root[data-huelle="glas"] .fl-tat .fl-wort { display: none; }
  /* MB-B35 TELEFON */
  :root[data-huelle="glas"] .akte-pruefplatz { margin: 0; }
  :root[data-huelle="glas"] .akte-pruefplatz > .bp { height: auto; }
  :root[data-huelle="glas"] .bp { height: auto; grid-template-rows: auto auto auto auto; margin: calc(-1 * var(--u-s-3)) calc(-1 * var(--u-s-3)) 0; }
  :root[data-huelle="glas"] .bp-chip { display: none; }
  :root[data-huelle="glas"] .bp { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .bp-mitte { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .bp-leiste { flex-wrap: wrap; }
  :root[data-huelle="glas"] .bp-leiste { flex-direction: row; justify-content: center; padding: var(--u-s-3) 0 0; }
  :root[data-huelle="glas"] .bp-gruppe { flex-direction: row; }
  :root[data-huelle="glas"] .bp-buehne { overflow: visible; padding: 2.4rem var(--u-s-3) var(--u-s-4); }
  :root[data-huelle="glas"] .bp-leerblatt { aspect-ratio: auto; padding: var(--u-s-5); grid-auto-flow: column; justify-content: start; text-align: start; }
  :root[data-huelle="glas"] .bp-skizze { width: 4.5rem; padding: .6rem .5rem; gap: .3rem; }
  :root[data-huelle="glas"] .bp-skizze i { height: .25rem; }
  :root[data-huelle="glas"] .bp-seite { overflow: visible; padding: 0 var(--u-s-3) var(--u-s-4); }
  :root[data-huelle="glas"] .bp-raster,
  :root[data-huelle="glas"] .bp-zeile,
  :root[data-huelle="glas"] .bp-zeile-betrag { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .bp-fuss { position: sticky; bottom: var(--u-dock-h, 0px); z-index: var(--u-z-sticky); padding: 0 var(--u-s-3); }
  :root[data-huelle="glas"] .bp-seitenzahl { font-size: var(--u-t-sm); }
  :root[data-huelle="glas"] .bp-speichern { flex-wrap: wrap; justify-content: flex-end; }
  :root[data-huelle="glas"] .bp-speichern button { padding: .75rem .8rem; letter-spacing: .03em; }
  :root[data-huelle="glas"] .bp-abweichungen li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :root[data-huelle="glas"] .bp-kopf { flex-wrap: wrap; padding-block: var(--u-s-2); }
  :root[data-huelle="glas"] .bp-titel { flex: 1; }
  :root[data-huelle="glas"] .bp-kopf-rechts { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
  :root[data-huelle="glas"] .bp-fuss { flex-wrap: wrap; padding-block: var(--u-s-2); }
  :root[data-huelle="glas"] .bp-fuss-rechts { flex-wrap: wrap; }
  :root[data-huelle="glas"] .bp-bank { flex-wrap: wrap; }
  :root[data-huelle="glas"] .bp-kopf { position: relative; }
  :root[data-huelle="glas"] .bp-titel { padding-inline-end: 2.5rem; }
    /* ENDE MB-B35 TELEFON */
  :root { --u-rahmen-h: 9rem; }
  /* Langformen, KEIN `padding`: die Kurzschreibweise setzte auch padding-bottom (Grundregel
     `.inhalt { padding-bottom: … --u-dock-h }`, seit H1 ohne Dock 0). */
  .inhalt { padding-top: var(--u-s-6); padding-inline: var(--u-s-6); }

  /* DIE HUELLE AM TELEFON: Rollen mit DEMSELBEN Selektor wie ausserhalb (26i), ein blosses `:root` verloere. Glas (Reste
     im Raum) ohne Weichzeichner [K 4]; die Abschaltung ist so spezifisch wie der Setzer plus eine Klasse, der feste Grund
     davor erfuellt 13v. Die Kopfleiste schaltet sich selbst um (huelle.css, `@container kopf`). Langfassung: docs §15.67. */
  :root[data-huelle="glas"] {
    --u-glas-blur: 8px;
    --u-rahmen-h: calc(var(--u-topbar-h) + var(--u-s-4) + var(--u-glasfenster-kopf-h) + var(--u-s-5));
  }
  :root[data-huelle="glas"]:not([data-glas="aus"]):not([data-ruhe="an"]) main.raum :is(.glas, .glas-2) { background: var(--u-glas-1-fest); }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    :root[data-huelle="glas"]:not([data-glas="aus"]):not([data-ruhe="an"]) main.raum :is(.glas, .glas-2) {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  /* Am Telefon zaehlt jeder Pixel Inhaltsbreite (Tabellen mit Personenspalte liefen bei 360 px sonst ueber): 12 px Rand. */
  :root[data-huelle="glas"] main.glasfenster { padding: var(--u-s-4) var(--u-s-5) var(--u-s-5); }
  /* DIE CHAT-EBENE (P4-M) */
  :root[data-huelle="glas"] .chat-ebene { inset-inline: var(--u-s-3); bottom: calc(var(--u-dock-h) + var(--u-s-3)); z-index: var(--u-z-drawer); display: none; align-items: stretch; max-inline-size: none; block-size: calc(.6 * var(--u-sicht-h)); }
  :root[data-huelle="glas"][data-ebene="auf"] .chat-ebene { display: flex; }
  :root[data-huelle="glas"][data-ebene="auf"][data-tastatur="1"] .chat-ebene { top: 0; bottom: var(--u-tastatur-versatz); block-size: auto; }
  :root[data-huelle="glas"][data-tastatur="1"] .ebene-inhalt .chat-kopfzeile { display: none; }
  :root[data-huelle="glas"] .ebene-blatt { position: static; flex: 1 1 auto; inline-size: auto; block-size: auto; min-block-size: 0; }
}

/* MB-B9 PREISLISTEN: vorhandene Karten, Felder und Tabellen im ruhigen Raster. */
:root[data-huelle="glas"] .preisliste-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--u-s-5);
  max-width: none;
  min-width: 0;
}
:root[data-huelle="glas"] .preisliste-raster > .karte { margin: 0; min-width: 0; }
:root[data-huelle="glas"] .preisliste-weit { grid-column: 1 / -1; }
:root[data-huelle="glas"] .preisliste-raster > details > summary {
  padding-block: var(--u-s-2);
  font-weight: var(--u-w-strong);
  font-size: var(--u-t-md);
  cursor: pointer;
}
:root[data-huelle="glas"] .preisliste-felder {
  display: grid;
  gap: var(--u-s-5);
  margin-top: var(--u-s-5);
  min-width: 0;
}
:root[data-huelle="glas"] .preisliste-feldraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--u-s-4);
  min-width: 0;
}
:root[data-huelle="glas"] .preisliste-feldraster .feld,
:root[data-huelle="glas"] .preisliste-mapping .feld { min-width: 0; margin: 0; }
:root[data-huelle="glas"] .preisliste-takt {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  min-width: 0;
}
:root[data-huelle="glas"] .preisliste-takt > .feld { flex: 1; min-width: 0; }
:root[data-huelle="glas"] .preisliste-mapping { table-layout: fixed; width: 100%; }
:root[data-huelle="glas"] .preisliste-mapping th:nth-child(1) { width: 22%; }
:root[data-huelle="glas"] .preisliste-mapping th:nth-child(2) { width: 22%; }
:root[data-huelle="glas"] .preisliste-mapping th:nth-child(3) { width: 36%; }
:root[data-huelle="glas"] .preisliste-mapping th:nth-child(4) { width: 20%; }
:root[data-huelle="glas"] .preisliste-mapping td { vertical-align: top; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .preisliste-mapping details > summary { cursor: pointer; white-space: normal; }
:root[data-huelle="glas"] .preisliste-mapping .preisliste-schritt {
  margin-top: var(--u-s-5);
  padding-top: var(--u-s-4);
  border-top: 1px solid var(--u-border);
}
:root[data-huelle="glas"] .preisliste-vorschau tr:has(.abzeichen-gefahr) { background: var(--u-danger-bg); }
:root[data-huelle="glas"] .preisliste-vorschau .abzeichen { white-space: normal; }
@container inhalt (width >= 64rem) {
  :root[data-huelle="glas"] .preisliste-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-huelle="glas"] .preisliste-feldraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .preisliste-mapping td[data-titel="Umformungen"] { grid-template-columns: minmax(0, 1fr); }
}
/* ENDE MB-B9 PREISLISTEN */

/* BANK-EXPORT (Plan „Bank + Offene Posten nativ“ 1.6): Reiter „Export“ und Karten „Bank-CSV bereit“ / „Salden prüfen“
   (module/bank/ansichten/export.php, export_karten.php; Bildentwurf 1920_light_export, 390_light_export). Nur vorhandene Rollen;
   Zeilenhöhe der Tabellen aus der Dichte der Hülle (.tabelle), Ziffern in --u-font-mono bzw. tabellarisch. */
/* Kanalpunkt (.bank-kanal > i) und Betrag (.bank-betrag) stehen EINMAL im Bank-Block von huelle.css (Integration Bank 6): mit einem
   eigenen ::before hier trug jedes Kontowort der Bankseite zwei Punkte. */
.bank-export-reiter { display: grid; gap: var(--u-d-luecke); min-width: 0; }
.bank-export { display: grid; gap: var(--u-s-6); min-width: 0; }
.bank-export > .karte { margin-bottom: 0; }
.bank-export-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-5) var(--u-s-6); }
.bank-export-kopf h2 { margin: 0; font-size: var(--u-t-lg); font-weight: var(--u-w-titel); }
.bank-export-kopf p { margin: var(--u-s-1) 0 0; }
.bank-export-aktionen { margin-left: auto; }
.bank-export-aktionen form { margin: 0; }
.bank-export-schritte {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--u-border); border-radius: var(--u-r-md); background: var(--u-surface);
}
.bank-export-schritte > li { display: flex; align-items: flex-start; gap: var(--u-s-4); padding: var(--u-s-5) var(--u-s-6); font-size: var(--u-t-sm); color: var(--u-text-2); }
.bank-export-schritte > li + li { border-left: 1px solid var(--u-border-soft); }
.bank-export-schritte b { display: block; color: var(--u-text); }
.bank-export-nr {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--u-s-9); height: var(--u-s-9);
  border: 1px solid var(--u-border); border-radius: 50%; font-variant-numeric: tabular-nums; font-weight: var(--u-w-strong);
}
.bank-export-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u-s-6); scroll-margin-top: var(--u-s-12); }
.bank-export-karte { display: flex; flex-direction: column; gap: var(--u-s-5); margin-bottom: 0; min-width: 0; }
.bank-export-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3) var(--u-s-5); }
.bank-export-karte-kopf h3 { margin: 0; font-size: var(--u-t-md); }
.bank-export-datei { min-width: 0; overflow-wrap: anywhere; color: var(--u-text-muted); }
.bank-export-karte-kopf .abzeichen { margin-left: auto; }
.bank-export-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--u-s-4) var(--u-s-6); margin: 0; }
.bank-export-zahlen dt { color: var(--u-text-muted); font-size: var(--u-t-xs); }
.bank-export-zahlen dd { margin: var(--u-s-1) 0 0; font-size: var(--u-t-lg); font-weight: var(--u-w-titel); font-variant-numeric: tabular-nums; }
.bank-export-zahlen dd small { color: var(--u-text-muted); font-size: var(--u-t-xs); font-weight: var(--u-w-normal); }
.bank-export-pruef { display: grid; gap: var(--u-s-3); margin: 0; padding: var(--u-s-5) 0 0; list-style: none; border-top: 1px solid var(--u-border-soft); }
.bank-export-pruef > li, .bank-salden-befund { display: flex; align-items: flex-start; gap: var(--u-s-3); margin: 0; font-size: var(--u-t-sm); }
.bank-export-pruef .sym, .bank-salden-befund .sym { flex: none; width: 1.1em; height: 1.1em; margin-top: .15em; }
.bank-export-pruef > li[data-ton="gut"] .sym { color: var(--u-ok-fg); }
:is(.bank-export-pruef > li, .bank-salden-befund)[data-ton="warn"] .sym { color: var(--u-warn-fg); }
.bank-export-pruef > li[data-ton="gefahr"] .sym { color: var(--u-danger-fg); }
.bank-export-pruef > li[data-ton="hinweis"] .sym { color: var(--u-info-fg); }
.bank-export-verweise { display: inline-flex; flex-wrap: wrap; gap: 0 var(--u-s-3); }
.bank-export-verweise a { color: var(--u-brand-text); }
.bank-export-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-4); margin-top: auto; padding-top: var(--u-s-5); border-top: 1px solid var(--u-border-soft); }
.bank-export-fuss > p { flex: 1 1 14rem; margin: 0; }
.bank-export-fuss .knopfreihe { margin-left: auto; }
.bank-export-fuss form { margin: 0; }
.bank-export-verwerfen { position: relative; }
.bank-export-verwerfen > summary { list-style: none; cursor: pointer; }
.bank-export-verwerfen > summary::-webkit-details-marker { display: none; }
.bank-export-verwerfen-form {
  display: grid; gap: var(--u-s-4); width: min(28rem, calc(100vw - 2 * var(--u-s-8))); margin-top: var(--u-s-3); padding: var(--u-s-5);
  border: 1px solid var(--u-border); border-radius: var(--u-r-md); background: var(--u-surface); box-shadow: var(--u-e-3);
}
@media (min-width: 44rem) { .bank-export-verwerfen[open] > .bank-export-verwerfen-form { position: absolute; right: 0; bottom: 100%; z-index: var(--u-z-sticky); } }
.bank-export-verwerfen-form .wahl { font-size: var(--u-t-sm); }
.bank-export-ohne { display: grid; gap: var(--u-s-3); margin: 0; padding: 0; list-style: none; }
.bank-export-ohne > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3) var(--u-s-5); padding: var(--u-s-4) var(--u-s-6);
  border: 1px dashed var(--u-border); border-radius: var(--u-r-md); font-size: var(--u-t-sm); color: var(--u-text-2);
}
.bank-export-block { display: grid; gap: var(--u-s-5); margin-bottom: 0; min-width: 0; }
.bank-export-block-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--u-s-2) var(--u-s-5); }
.bank-export-block-kopf h3 { display: inline-flex; align-items: center; gap: var(--u-s-3); margin: 0; font-size: var(--u-t-md); }
.bank-export-block-kopf small { color: var(--u-text-muted); font-size: var(--u-t-sm); }
.bank-export-block > p { margin: 0; }
.bank-salden, .bank-mess, .bank-karte-dateien, .bank-karte-salden { display: grid; gap: var(--u-s-4); margin: 0; padding: 0; list-style: none; }
.bank-salden-konto { display: grid; gap: var(--u-s-3); padding: var(--u-s-5) 0 0; border-top: 1px solid var(--u-border-soft); }
.bank-salden-konto:first-child { padding-top: 0; border-top: 0; }
.bank-salden-konto > p { margin: 0; }
.bank-salden-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3) var(--u-s-5); }
.bank-mess > li { display: grid; grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 1fr) minmax(6rem, 1fr) auto; align-items: center; gap: var(--u-s-3) var(--u-s-6); font-size: var(--u-t-sm); }
.bank-mess-balken { width: 100%; height: var(--u-s-4); }
.bank-mess-quote { font-weight: var(--u-w-titel); font-variant-numeric: tabular-nums; text-align: right; }
.bank-export-tabelle td { vertical-align: top; }
.bank-export-tabelle .bank-kanal { white-space: nowrap; }
.bank-export-erneut { margin-top: var(--u-s-2); font-size: var(--u-t-sm); }
.bank-export-erneut > summary { cursor: pointer; }
.bank-export-erneut[open] { display: grid; gap: var(--u-s-3); max-width: 28rem; }
.bank-export-alt td { color: var(--u-text-muted); }
.bank-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: var(--u-s-6); align-items: start; }
.bank-karten:empty { display: none; }
.bank-karte { display: grid; gap: var(--u-s-5); margin-bottom: 0; }
.bank-karte > p { margin: 0; }
.bank-karte-kopf { display: flex; align-items: flex-start; gap: var(--u-s-4); }
.bank-karte-kopf h3 { margin: 0; font-size: var(--u-t-md); }
.bank-karte-kopf small { display: block; color: var(--u-text-muted); font-size: var(--u-t-xs); }
.bank-karte-kopf .abzeichen { margin-left: auto; }
.bank-karte-avatar {
  display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--u-s-10); height: var(--u-s-10);
  border-radius: 50%; background: var(--u-brand-wash); color: var(--u-brand-text); font-weight: var(--u-w-titel);
}
.bank-karte-dateien > li, .bank-karte-salden > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2) var(--u-s-5); padding: var(--u-s-4) var(--u-s-5);
  border-radius: var(--u-r-sm); background: var(--u-surface-3); font-size: var(--u-t-sm);
}
.bank-karte-dateien .mono { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; color: var(--u-text-muted); }
.bank-karte-dateien .bank-betrag { margin-left: auto; font-weight: var(--u-w-strong); }
.bank-karte-salden > li[data-ampel="gelb"] { box-shadow: inset 3px 0 0 var(--u-warn); }
.bank-karte-salden > li[data-ampel="gruen"] { box-shadow: inset 3px 0 0 var(--u-ok); }
.bank-karte-befund { flex-basis: 100%; color: var(--u-warn-fg); }
@media (max-width: 70rem) {
  .bank-export-karten { grid-template-columns: minmax(0, 1fr); }
  .bank-export-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-export-schritte > li:nth-child(3) { border-left: 0; }
  .bank-export-schritte > li:nth-child(n+3) { border-top: 1px solid var(--u-border-soft); }
}
@media (max-width: 44rem) {
  .bank-export-aktionen { width: 100%; margin-left: 0; }
  .bank-export-aktionen > * { flex: 1 1 100%; }
  .bank-export-aktionen .knopf { width: 100%; }
  .bank-export-schritte { grid-template-columns: minmax(0, 1fr); }
  .bank-export-schritte > li + li { border-left: 0; border-top: 1px solid var(--u-border-soft); }
  .bank-export-fuss .knopfreihe { width: 100%; margin-left: 0; }
  .bank-mess > li { grid-template-columns: minmax(0, 1fr) auto; }
  .bank-mess-text, .bank-mess-satz { grid-column: 1 / -1; }
}
/* ENDE BANK-EXPORT */

/* MB-B33: Artikelkennungen und Bestellnummer auch auf Telefonbreite vollständig. */
:root[data-huelle="glas"] .auftrag-liste .erp .person-kennung,
:root[data-huelle="glas"] .akte-posten .person-kennung {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* MB-B38: wahlfreie Kopfkennzahlen, dieselben Rollen in hellen und dunklen Akten. */
:root[data-huelle="glas"] .akte-kacheln.kopfkennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:root[data-huelle="glas"] .kopfkennzahlen > .kopfkennzahl { --kennzahl-akzent: var(--u-text-2); --kennzahl-grund: var(--u-surface-alt); --kennzahl-rand: var(--u-border-strong); padding: 16px; border-radius: 10px; border-left: 3px solid var(--kennzahl-rand); }
:root[data-huelle="glas"] .kopfkennzahl[data-art="gut"] { --kennzahl-akzent: var(--u-ok-fg); --kennzahl-grund: var(--u-ok-bg); --kennzahl-rand: var(--u-ok-line); }
:root[data-huelle="glas"] .kopfkennzahl[data-art="warn"] { --kennzahl-akzent: var(--u-warn-fg); --kennzahl-grund: var(--u-warn-bg); --kennzahl-rand: var(--u-warn-line); }
:root[data-huelle="glas"] .kopfkennzahl[data-art="gefahr"] { --kennzahl-akzent: var(--u-danger-fg); --kennzahl-grund: var(--u-danger-bg); --kennzahl-rand: var(--u-danger-line); }
:root[data-huelle="glas"] .kopfkennzahl dt { display: flex; align-items: center; gap: 9px; min-height: 30px; letter-spacing: .06em; }
:root[data-huelle="glas"] .kopfkennzahl-symbol { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; height: 30px; border-radius: 9px; color: var(--kennzahl-akzent); background: var(--kennzahl-grund); }
:root[data-huelle="glas"] .kopfkennzahl-symbol .sym { width: 19px; height: 19px; }
:root[data-huelle="glas"] .kopfkennzahl dd { margin-top: 10px; }
:root[data-huelle="glas"] .kopfkennzahl b { display: block; line-height: 1.2; font-size: var(--u-t-3xl); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .kopfkennzahl small { margin-top: 7px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .sendung-verfolgen { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; margin-left: 6px; min-width: 26px; min-height: 26px; color: var(--u-text-2); }
@container inhalt (width < 60rem) {
  :root[data-huelle="glas"] .akte-kacheln.kopfkennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container inhalt (width < 30rem) {
  :root[data-huelle="glas"] .akte-kacheln.kopfkennzahlen { gap: 8px; }
  :root[data-huelle="glas"] .kopfkennzahlen > .kopfkennzahl { padding: 10px; }
  :root[data-huelle="glas"] .kopfkennzahl dt { gap: 6px; letter-spacing: .02em; }
  :root[data-huelle="glas"] .kopfkennzahl-symbol { flex-basis: 24px; height: 24px; border-radius: 7px; }
  :root[data-huelle="glas"] .kopfkennzahl b { font-size: var(--u-t-akte-kennzahl); }
}

:root[data-huelle="glas"] .gitter.auftrag-belege-mit-sendungen { grid-template-columns: minmax(0, 1fr); }
:root[data-huelle="glas"] .auftrag-belege-mit-sendungen .mono { white-space: normal; overflow-wrap: anywhere; }

/* Gemeinsame Rechenleiste: ruhige Betragsachse und hervorgehobene Summe. */
.rechenleiste { grid-template-columns: minmax(0, 1fr) max-content; align-items: center; }
.rechenleiste dt { min-width: 0; }
.rechenleiste dt small { text-transform: none; letter-spacing: normal; display: block; font-size: var(--u-t-xs); color: var(--u-text-2); font-weight: var(--u-w-normal); }
.rechenleiste dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechenleiste .rechenleiste-summe { border-top: 1px solid var(--u-border); padding-top: .75rem; margin-top: .25rem; font-weight: var(--u-w-strong); }
.rechenleiste dd.rechenleiste-summe { font-size: var(--u-t-lg); }

/* ── Packtisch: Empfängerkarte am DHL-Label (12.10.2026) ── Reihenfolge wie auf dem Etikett, sechs Spalten,
   unter 40rem einspaltig. Nur Variablen des Design-Vertrags. */
:is(.pt-adresse, .pt-karte) {
  margin: var(--u-s-5) 0 var(--u-s-6);
  padding: var(--u-s-6);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface-2, var(--u-surface));
}
:is(.pt-adresse-kopf, .pt-karte-kopf) { display: flex; align-items: center; gap: var(--u-s-4); width: 100%; margin-bottom: var(--u-s-5); }
:is(.pt-adresse-titel, .pt-karte-titel) { display: inline-flex; align-items: center; gap: var(--u-s-3); font-weight: var(--u-w-strong); }
.pt-adresse-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--u-s-4) var(--u-s-5); }
:is(.pt-adresse-raster, .pt-adresse-fuss) > .feld > span { color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-medium); }
.pt-s1 { grid-column: span 1; } .pt-s2 { grid-column: span 2; } .pt-s3 { grid-column: span 3; }
.pt-s4 { grid-column: span 4; } .pt-s6 { grid-column: span 6; }
.pt-adresse-raster > p.pt-s3 { align-self: end; margin: 0; }
.pt-adresse-mehr { margin-top: var(--u-s-5); }
.pt-adresse-mehr > summary { cursor: pointer; color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-medium); }
.pt-adresse-mehr[open] > summary { margin-bottom: var(--u-s-4); }
.pt-adresse-fuss { display: flex; align-items: flex-end; gap: var(--u-s-4); margin-top: var(--u-s-6); padding-top: var(--u-s-5); border-top: 1px solid var(--u-border); }
.pt-adresse-grund { flex: 1 1 auto; }
.pt-adresse-fuss > .knopf { flex: 0 0 auto; }
@media (max-width: 40rem) {
  .pt-adresse-raster { grid-template-columns: minmax(0, 1fr); }
  .pt-adresse-raster > * { grid-column: 1 / -1; }
  .pt-adresse-fuss { flex-direction: column; align-items: stretch; }
}

/* ── Packtisch: Positionen und Paket als Karten (12.10.2026) ── */
.pt-positionen { display: flex; flex-direction: column; gap: var(--u-s-3); margin: 0; padding: 0; list-style: none; }
.pt-position {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--u-s-5);
  padding: var(--u-s-4) var(--u-s-5); border: 1px solid var(--u-border); border-radius: var(--u-r-md);
  background: var(--u-surface); cursor: pointer;
}
.pt-position:has(input:checked) { border-color: var(--u-ok-fg); background: var(--u-ok-bg); }
.pt-position-bild {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none;
  border-radius: var(--u-r-sm); background: var(--u-surface-3); object-fit: contain;
}
.pt-position-text { display: flex; flex-direction: column; gap: var(--u-s-2); min-width: 0; }
.pt-position-titel { font-weight: var(--u-w-strong); }
.pt-menge { color: var(--u-brand-text); }
.pt-position-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3); color: var(--u-text-2); font-size: var(--u-t-sm); }
.pt-position-hinweis { font-size: var(--u-t-sm); }
.pt-pruef { display: inline-flex; align-items: center; gap: var(--u-s-3); font-weight: var(--u-w-medium); white-space: nowrap; cursor: pointer; }
.pt-pruef input { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--u-brand-text); }
.pt-trotzdem { display: flex; flex-direction: column; gap: var(--u-s-3); margin-bottom: var(--u-s-5); padding: var(--u-s-4) var(--u-s-5);
  border-radius: var(--u-r-md); background: var(--u-warn-bg); }
.pt-versand-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--u-s-5); }
.pt-versand-zeile > .feld > span { color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-medium); }
.pt-gewicht { flex: 0 0 11rem; }
.pt-verbindung { flex: 0 1 16rem; }
.pt-einheit { position: relative; display: block; }
.pt-einheit > input { width: 100%; padding-right: 2.6rem; }
.pt-einheit > span { position: absolute; right: var(--u-s-4); top: 50%; transform: translateY(-50%); color: var(--u-text-muted); pointer-events: none; }
.pt-label-knopf { margin-left: auto; }
.pt-hinweise { margin: var(--u-s-5) 0 0; padding-left: var(--u-s-6); color: var(--u-text-muted); font-size: var(--u-t-sm); }
.pt-hinweise > li + li { margin-top: var(--u-s-2); }
@media (max-width: 40rem) {
  .pt-position { grid-template-columns: auto minmax(0, 1fr); }
  .pt-pruef { grid-column: 1 / -1; }
  .pt-versand-zeile > * { flex: 1 1 100%; }
  .pt-label-knopf { margin-left: 0; }
}