/* huelle.css — die Huelle „ERP“ (Kopfleiste, Menue, Fenster, Hülle M). DIESELBEN REGELN WIE olymp.css: jede Regel traegt
   `:root[data-huelle="glas"]`; Farben, Grade, Gewichte, Dauern und Stapel nur als Rollen aus rollen.css (Test 35h); KEINE
   Breiten-Medienabfrage (`@container`), Bewegung nur am Faktor `--u-bewegung`. EIGENE GRENZE (`HUELLE_CSS_BYTES_MAX`, Test
   35g-huelle). Komponentenvariablen `--u-sparte`, `--u-mandant`. Langfassung und Geschichte: docs/oberflaeche-huelle.md §1d–§1g. */

/* ── Grund ── flach dunkel (seit H3 ohne den violetten Schein des Entwurfs F); `isolation` wie bis H1. */
:root[data-huelle="glas"] body { min-height: 100svh; background: var(--u-surface-2); isolation: isolate; }

/* ── Farben je Bereich und Mandant ── */
:root[data-huelle="glas"] [data-sparte] { --u-sparte: var(--u-text-2); }
:root[data-huelle="glas"] [data-sparte="start"] { --u-sparte: var(--u-ok-fg); }
:root[data-huelle="glas"] [data-sparte="verkauf"] { --u-sparte: var(--u-sparte-verkauf); }
:root[data-huelle="glas"] [data-sparte="einkauf"] { --u-sparte: var(--u-sparte-einkauf); }
:root[data-huelle="glas"] [data-sparte="lager"] { --u-sparte: var(--u-sparte-lager); }
:root[data-huelle="glas"] [data-sparte="buchhaltung"] { --u-sparte: var(--u-sparte-buchhaltung); }
:root[data-huelle="glas"] [data-sparte="postfach"] { --u-sparte: var(--u-sparte-postfach); }
:root[data-huelle="glas"] [data-sparte="service"] { --u-sparte: var(--u-sparte-service); }
:root[data-huelle="glas"] [data-sparte="system"] { --u-sparte: var(--u-sparte-system); }
:root[data-huelle="glas"] [data-sparte="verwaltung"] { --u-sparte: var(--u-sparte-verwaltung); }
:root[data-huelle="glas"] [data-sparte="it"] { --u-sparte: var(--u-sparte-it); }
:root[data-huelle="glas"] [data-sparte="entwicklung"] { --u-sparte: var(--u-sparte-entwicklung); }
:root[data-huelle="glas"] [data-sparte="agenten"] { --u-sparte: var(--u-sparte-agenten); }
:root[data-huelle="glas"] [data-mandant-farbe="1"] { --u-mandant: var(--u-mandant-1); }
:root[data-huelle="glas"] [data-mandant-farbe="2"] { --u-mandant: var(--u-mandant-2); }
:root[data-huelle="glas"] [data-mandant-farbe="3"] { --u-mandant: var(--u-mandant-3); }
:root[data-huelle="glas"] [data-mandant-farbe="4"] { --u-mandant: var(--u-mandant-4); }
:root[data-huelle="glas"] [data-mandant-farbe="5"] { --u-mandant: var(--u-mandant-5); }
:root[data-huelle="glas"] [data-mandant-farbe="6"] { --u-mandant: var(--u-mandant-6); }

/* ── Kopfleiste ── klebend, ein Behaelter (`kopf`) fuer die Umschaltung am Telefon; kein Weichzeichner (13v: nur `.glas`). */
:root[data-huelle="glas"] .kopfleiste {
  position: sticky;
  top: 0;
  z-index: var(--u-z-topbar);
  container: kopf / inline-size;
}
:root[data-huelle="glas"] .kopf-leiste {
  display: flex;
  align-items: stretch;
  min-height: calc(var(--u-topbar-h) - 3px - var(--u-fensterleiste-h, 0px));
  border-bottom: 1px solid var(--u-border);
  background: var(--u-kopf);
  color: var(--u-text);
  font-family: var(--u-font-body);
}
/* Der Streifen des Mandanten dünn und gedämpft (H3); „Alle Mandanten“ neutral statt des Neonverlaufs. */
:root[data-huelle="glas"] .kopf-streifen { height: 2px; background: linear-gradient(90deg, var(--u-mandant), transparent 45%); opacity: .6; }
:root[data-huelle="glas"] .kopf-streifen[data-mandant-farbe="0"] { background: linear-gradient(90deg, var(--u-text-muted), transparent 45%); }
:root[data-huelle="glas"] .kopfleiste .sym { width: var(--u-s-6); height: var(--u-s-6); flex: none; }
:root[data-huelle="glas"] .kopfleiste .kopf-winkel { width: var(--u-s-5); height: var(--u-s-5); color: var(--u-text-muted); transition: rotate calc(var(--u-dur-2) * var(--u-bewegung)) var(--u-ease); }
:root[data-huelle="glas"] .kopfleiste details[open] > summary .kopf-winkel { rotate: 180deg; }
:root[data-huelle="glas"] .kopfleiste summary { list-style: none; cursor: pointer; }
:root[data-huelle="glas"] .kopfleiste summary::-webkit-details-marker { display: none; }

/* Die Marke: das Zeichen, das Wort gesperrt in der HUD-Schrift — seit H3 flach, ohne Verlauf und Schein. */
:root[data-huelle="glas"] .kopf-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-4);
  padding: 0 var(--u-s-7);
  border-right: 1px solid var(--u-border);
  color: var(--u-text);
  font-family: var(--u-font-marke);
  font-size: var(--u-t-lg);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-wide);
  text-decoration: none;
  text-transform: uppercase;
}
:root[data-huelle="glas"] .kopf-marke .marke-zeichen { width: var(--u-s-8); height: var(--u-s-8); background: var(--u-brand); box-shadow: none; }
:root[data-huelle="glas"] .kopf-marke .marke-logo { flex: none; width: var(--u-s-9); height: var(--u-s-9); object-fit: contain; }
:root[data-huelle="glas"] .kopf-marke:hover { color: var(--u-text); }

/* ── Mandantenwahl ── „Mandant · Name ▾" mit dem Punkt in der Farbe des Mandanten; das Blatt ist das Formular POST /sicht. */
:root[data-huelle="glas"] .kopf-mandant { position: relative; border-right: 1px solid var(--u-border); }
:root[data-huelle="glas"] .kopf-mandant-knopf {
  display: flex;
  align-items: center;
  gap: var(--u-s-4);
  height: 100%;
  min-height: max(var(--u-s-10), var(--u-ziel-min));
  padding: 0 var(--u-s-6);
  transition: background var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .kopf-mandant-knopf:hover,
:root[data-huelle="glas"] .kopf-mandant[open] > .kopf-mandant-knopf { background: var(--u-hover); }
:root[data-huelle="glas"] .kopf-mandant-punkt {
  flex: none;
  width: var(--u-s-5);
  height: var(--u-s-5);
  border-radius: var(--u-r-full);
  background: var(--u-mandant, var(--u-text-muted));
}
:root[data-huelle="glas"] [data-mandant-farbe="0"] .kopf-mandant-punkt,
:root[data-huelle="glas"] .kopf-mandant-eintrag[data-mandant-farbe="0"] .kopf-mandant-punkt { background: var(--u-text-muted); }
:root[data-huelle="glas"] .kopf-mandant-text { display: flex; flex-direction: column; line-height: var(--u-lh-tight); }
:root[data-huelle="glas"] .kopf-mandant-etikett {
  color: var(--u-text-muted);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-strong);
  letter-spacing: var(--u-track-wide);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .kopf-mandant-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; font-size: var(--u-t-md); font-weight: var(--u-w-heavy); white-space: nowrap; }
/* Das Kuerzel des Mandanten steht nur am schmalsten Telefon (unter 30rem) statt des Namens; vorgelesen wird immer der Name. */
:root[data-huelle="glas"] .kopf-mandant-kurz { display: none; font-family: var(--u-font-hud); font-size: var(--u-t-sm); font-weight: var(--u-w-heavy); letter-spacing: var(--u-track-hud); }
:root[data-huelle="glas"] .kopf-mandant-blatt { left: 0; }
:root[data-huelle="glas"] .kopf-mandant-eintrag small { display: block; color: var(--u-text-muted); font-size: var(--u-t-xs); font-weight: var(--u-w-normal); }
:root[data-huelle="glas"] .kopf-mandant-eintrag[aria-current="true"] { background: var(--u-slot); }
:root[data-huelle="glas"] .kopf-mandant-eintrag[aria-current="true"]::after { content: "✓" / ""; color: var(--u-kopf-akzent); font-weight: var(--u-w-heavy); }

/* ── Menue ── Start, die Bereiche des Mandanten, ein Trenner, die Plattform-Bereiche; je Bereich ein Aufklapper. */
:root[data-huelle="glas"] .kopf-menue { display: flex; align-items: stretch; min-width: 0; }
:root[data-huelle="glas"] .kopf-klapp { display: none; }
/* Das Zeichen „Menue" (☰) aus drei Kanten statt eines Schriftzeichens: Kanten bleiben auch unter erzwungenen Farben stehen. */
:root[data-huelle="glas"] .kopf-klapp-zeichen { position: relative; display: block; flex: none; width: var(--u-s-6); height: var(--u-s-5); border-block: 2px solid currentColor; }
:root[data-huelle="glas"] .kopf-klapp-zeichen::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; border-top: 2px solid currentColor; translate: 0 -50%; }
:root[data-huelle="glas"] .kopf-liste { display: flex; align-items: stretch; margin: 0; padding: 0 var(--u-s-2); list-style: none; }
:root[data-huelle="glas"] .kopf-punkt { position: relative; display: flex; }
:root[data-huelle="glas"] .kopf-bereich { display: flex; }
:root[data-huelle="glas"] .kopf-ziel {
  display: flex;
  align-items: center;
  gap: var(--u-s-3);
  min-height: max(var(--u-s-10), var(--u-ziel-min));
  padding: 0 var(--u-s-5);
  color: var(--u-text-2);
  font-size: var(--u-t-md);
  font-weight: var(--u-w-strong);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--u-dur-2) var(--u-ease), box-shadow var(--u-dur-2) var(--u-ease), color var(--u-dur-2) var(--u-ease);
}
/* Ruhig (H3): Zeichen einfarbig gedämpft; Schweben und offener Aufklapper eine leise Fläche; der aktive Punkt nur heller mit feiner
   Unterlinie in der einen neutralen Akzentfarbe. */
:root[data-huelle="glas"] .kopf-ziel > .sym:first-child { color: var(--u-text-muted); }
:root[data-huelle="glas"] .kopf-ziel:hover,
:root[data-huelle="glas"] .kopf-bereich[open] > .kopf-ziel { background: var(--u-slot); color: var(--u-text); }
:root[data-huelle="glas"] .kopf-ziel[aria-current="page"],
:root[data-huelle="glas"] .kopf-ziel[data-aktiv] { box-shadow: inset 0 -2px 0 var(--u-kopf-akzent); color: var(--u-text); }
:root[data-huelle="glas"] .kopf-trenner { width: 1px; margin: var(--u-s-5) var(--u-s-3); background: var(--u-border); }

/* Das Blatt eines Aufklappers (auch Mandantenwahl und Benutzermenue): oben die Kante in der Farbe des Bereichs. */
/* Ein geschlossener Aufklapper zeichnet sein Blatt gar nicht (nicht nur verborgen): seine Einträge sind dann weder Ziel noch
   Fläche, die jemand misst oder anspringt. */
:root[data-huelle="glas"] details[data-kopf-klapp]:not([open]) > :not(summary) { display: none; }
:root[data-huelle="glas"] .kopf-blatt {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--u-z-nav);
  min-width: var(--u-menue-breite);
  max-height: calc(100dvh - var(--u-topbar-h) - var(--u-s-6));
  margin: 0;
  padding: var(--u-s-3);
  overflow-y: auto;
  border: 1px solid var(--u-border);
  border-radius: 0 0 var(--u-r-lg) var(--u-r-lg);
  /* MB-B3: eigener deckender Hintergrund, unabhängig vom Fenster darunter. */
  background: var(--u-surface-hoch);
  color: var(--u-text);
  opacity: 1;
  isolation: isolate;
  box-shadow: var(--u-e-4);
  animation: huelle-kopf-auf calc(var(--u-dur-3) * var(--u-bewegung)) var(--u-ease);
}
@keyframes huelle-kopf-auf { from { transform: translateY(calc(-6px * var(--u-bewegung))); } }
:root[data-huelle="glas"] .kopf-gruppe {
  margin: var(--u-s-5) var(--u-s-4) var(--u-s-2);
  color: var(--u-text-muted);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-wide);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .kopf-blatt > .kopf-gruppe:first-child,
:root[data-huelle="glas"] .kopf-blatt > input + .kopf-gruppe { margin-top: var(--u-s-3); }
:root[data-huelle="glas"] .kopf-eintraege { margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .kopf-eintrag {
  display: flex;
  align-items: center;
  gap: var(--u-s-5);
  width: 100%;
  min-height: max(var(--u-s-10), var(--u-ziel-min));
  padding: var(--u-s-3) var(--u-s-4);
  border: 0;
  border-radius: var(--u-r-sm);
  background: transparent;
  color: var(--u-text);
  font: inherit;
  font-size: var(--u-t-md);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--u-dur-1) var(--u-ease);
}
:root[data-huelle="glas"] .kopf-eintrag > .sym { color: var(--u-text-muted); transition: color var(--u-dur-1) var(--u-ease); }
:root[data-huelle="glas"] .kopf-eintrag:hover,
:root[data-huelle="glas"] .kopf-eintrag:focus-visible { background: var(--u-hover); color: var(--u-text); }
:root[data-huelle="glas"] .kopf-eintrag:hover > .sym { color: var(--u-text); }
:root[data-huelle="glas"] .kopf-eintrag[aria-current="page"] > .sym { color: var(--u-kopf-akzent); }
:root[data-huelle="glas"] .kopf-eintrag[aria-current="page"] { box-shadow: inset 2px 0 0 var(--u-kopf-akzent); }
:root[data-huelle="glas"] .kopf-eintrag-wort { flex: 1 1 auto; min-width: 0; }
:root[data-huelle="glas"] :is(.kopf-zahl, .start-zahl) {
  flex: none;
  min-width: var(--u-s-8);
  padding: var(--u-s-1) var(--u-s-3);
  border-radius: var(--u-r-full);
  background: var(--u-sparte, var(--u-brand-text));
  color: var(--u-surface-2);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-heavy);
  line-height: var(--u-lh-caps);
  text-align: center;
}

/* Der Agent des Bereichs: Bild, „<Name> kümmert sich um <Bereich>", Knöpfe „Fragen“ und „Profil“ — seit H3 neutral (keine
   Bereichsfarbe in der Leiste). */
:root[data-huelle="glas"] .kopf-agent {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--u-s-5);
  margin-bottom: var(--u-s-2);
  padding: var(--u-s-4) var(--u-s-4);
  border-radius: var(--u-r-md);
  isolation: isolate;
}
:root[data-huelle="glas"] .kopf-agent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--u-z-dahinter);
  border-radius: inherit;
  background: var(--u-slot);
}
:root[data-huelle="glas"] .kopf-agent-bild {
  flex: none;
  width: var(--u-s-11);
  height: var(--u-s-11);
  border-radius: var(--u-r-full);
  object-fit: cover;
  object-position: top;
  box-shadow: 0 0 0 1px var(--u-border-strong);
}
:root[data-huelle="glas"] .kopf-agent-kuerzel {
  display: grid;
  place-items: center;
  background: var(--u-surface-alt);
  color: var(--u-text-2);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-heavy);
}
:root[data-huelle="glas"] .kopf-agent-text { flex: 1 1 auto; min-width: 0; }
:root[data-huelle="glas"] .kopf-agent-satz { margin: 0; color: var(--u-text-2); font-size: var(--u-t-sm); line-height: var(--u-lh-tight); }
:root[data-huelle="glas"] .kopf-agent-wege { display: flex; gap: var(--u-s-3); margin: var(--u-s-3) 0 0; }
:root[data-huelle="glas"] .kopf-agent-satz b { color: var(--u-text); font-weight: var(--u-w-heavy); }
:root[data-huelle="glas"] :is(.kopf-agent-fragen, .kopf-agent-profil) {
  position: relative;
  flex: none;
  padding: var(--u-s-2) var(--u-s-4);
  border: 1px solid var(--u-border-strong);
  border-radius: var(--u-r-sm);
  color: var(--u-text);
  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-decoration: none;
  transition: background var(--u-dur-2) var(--u-ease), color var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] :is(.kopf-agent-fragen, .kopf-agent-profil):hover { border-color: var(--u-kopf-akzent); background: var(--u-hover); color: var(--u-text); }
:root[data-huelle="glas"] .kopf-agent-profil { border-color: var(--u-border); color: var(--u-text-2); }

/* ── Rechts ── Schnellsuche (Strg K), Freigaben mit Zahl, Gespraeche, Benutzermenue. */
:root[data-huelle="glas"] .kopf-rechts { display: flex; align-items: center; gap: var(--u-s-4); margin-left: auto; padding: 0 var(--u-s-6) 0 var(--u-s-4); }
:root[data-huelle="glas"] .kopf-schnellsuche {
  display: flex;
  align-items: center;
  gap: var(--u-s-4);
  width: 15rem;
  min-height: max(var(--u-s-10), var(--u-ziel-min));
  padding: 0 var(--u-s-5);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface-3);
  color: var(--u-text-muted);
  font-size: var(--u-t-sm);
  text-decoration: none;
  transition: border-color var(--u-dur-2) var(--u-ease), color var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .kopf-schnellsuche:hover { border-color: var(--u-kopf-akzent); color: var(--u-text); }
:root[data-huelle="glas"] .kopf-schnellsuche kbd {
  margin-left: auto;
  padding: 0 var(--u-s-2);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-xs);
  color: var(--u-text-muted);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
}
:root[data-huelle="glas"] .kopf-knopf {
  position: relative;
  display: grid;
  place-items: center;
  width: max(var(--u-s-10), var(--u-ziel-min));
  height: max(var(--u-s-10), var(--u-ziel-min));
  border-radius: var(--u-r-md);
  color: var(--u-text-muted);
  transition: background var(--u-dur-2) var(--u-ease), color var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .kopf-knopf:hover,
:root[data-huelle="glas"] .kopf-knopf[aria-current="page"] { background: var(--u-slot); color: var(--u-text); }
:root[data-huelle="glas"] .kopf-knopf .kopf-zahl,
:root[data-huelle="glas"] .kopf-griff .dock-zahl { position: absolute; top: calc(-1 * var(--u-s-1)); right: calc(-1 * var(--u-s-1)); }
:root[data-huelle="glas"] .kopfleiste .kopf-zahl { background: var(--u-kopf-akzent); }
:root[data-huelle="glas"] .kopf-griff .dock-zahl {
  min-width: var(--u-s-8);
  padding: var(--u-s-1) var(--u-s-3);
  border-radius: var(--u-r-full);
  background: var(--u-kopf-akzent);
  color: var(--u-surface-2);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-heavy);
  line-height: var(--u-lh-caps);
  text-align: center;
}
:root[data-huelle="glas"] .kopfleiste .kopf-zahl-anderswo { background: var(--u-warn-fg); }
:root[data-huelle="glas"] .kopf-benutzer { position: relative; }
:root[data-huelle="glas"] .kopf-benutzer-knopf {
  display: flex;
  align-items: center;
  gap: var(--u-s-4);
  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-3);
  border-radius: var(--u-r-full);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
  transition: background var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .kopf-benutzer-knopf:hover,
:root[data-huelle="glas"] .kopf-benutzer[open] > .kopf-benutzer-knopf { background: var(--u-slot); }
:root[data-huelle="glas"] .kopf-benutzer-bild {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--u-s-10);
  height: var(--u-s-10);
  border-radius: var(--u-r-full);
  background: var(--u-surface-alt);
  box-shadow: inset 0 0 0 1px var(--u-border-strong);
  color: var(--u-text);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-2xs);
  font-weight: var(--u-w-heavy);
}
:root[data-huelle="glas"] .kopf-benutzer-blatt { right: 0; left: auto; }
:root[data-huelle="glas"] .kopf-benutzer-blatt form { margin: var(--u-s-2) 0 0; padding-top: var(--u-s-2); border-top: 1px solid var(--u-border); }
/* ── Farbmodus (H4) ── ☀/☾ vor dem Benutzermenue. */
:root[data-huelle="glas"] .kopf-farbe { display: flex; margin: 0; }
:root[data-huelle="glas"] button.kopf-knopf { border: 0; background: transparent; cursor: pointer; font: inherit; }
:root[data-huelle="glas"] .kopf-farbe-hell { display: var(--u-farbe-zu-hell); }
:root[data-huelle="glas"] .kopf-farbe-dunkel { display: var(--u-farbe-zu-dunkel); }
:root[data-huelle="glas"] .kopf-farbe .sym { width: 20px; height: 20px; }
:root[data-huelle="glas"] .kopf-farbwahl-reihe { display: flex; gap: var(--u-s-2); padding: 0 var(--u-s-3) var(--u-s-2); }
:root[data-huelle="glas"] .kopf-farbwahl-knopf {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--u-s-1);
  min-height: max(var(--u-s-11), var(--u-ziel-min));
  padding: var(--u-s-2);
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-sm);
  background: transparent;
  color: var(--u-text-2);
  cursor: pointer;
  font: inherit;
  font-size: var(--u-t-xs);
}
:root[data-huelle="glas"] .kopf-farbwahl-knopf:hover { background: var(--u-slot); color: var(--u-text); }
:root[data-huelle="glas"] .kopf-farbwahl-knopf[aria-pressed="true"] { border-color: var(--u-kopf-akzent); color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .kopf-farbwahl-knopf .sym { width: 18px; height: 18px; }

/* ── Startseite ── die Bereiche des Menues als Kachelgruppen (module/system/ansichten/start.php); keine Kennzahlen (H2). */
:root[data-huelle="glas"] .start-bereiche { display: flex; flex-direction: column; gap: var(--u-s-8); }
:root[data-huelle="glas"] .start-bereich-kopf { display: flex; align-items: center; gap: var(--u-s-5); margin-bottom: var(--u-s-5); }
:root[data-huelle="glas"] .start-bereich-kopf::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--u-border), transparent); }
:root[data-huelle="glas"] .start-bereich-kopf h2 {
  margin: 0;
  color: var(--u-text-muted);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-heavy);
  letter-spacing: var(--u-track-wide);
  text-transform: uppercase;
}
:root[data-huelle="glas"] .start-agent {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--u-s-3);
  padding: var(--u-s-1) var(--u-s-4) var(--u-s-1) var(--u-s-1);
  border-radius: var(--u-r-full);
  color: var(--u-sparte);
  font-family: var(--u-font-hud);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  isolation: isolate;
}
:root[data-huelle="glas"] .start-agent::before { content: ""; position: absolute; inset: 0; z-index: var(--u-z-dahinter); border-radius: inherit; background: var(--u-sparte); opacity: .11; }
:root[data-huelle="glas"] .start-agent img,
:root[data-huelle="glas"] .start-agent-kuerzel { width: var(--u-s-8); height: var(--u-s-8); border-radius: var(--u-r-full); object-fit: cover; object-position: top; }
:root[data-huelle="glas"] .start-agent-kuerzel { display: grid; place-items: center; background: var(--u-surface-alt); font-size: var(--u-t-2xs); }
:root[data-huelle="glas"] .start-kacheln { display: flex; flex-wrap: wrap; gap: var(--u-s-3); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .start-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u-s-4);
  width: 7rem;
  padding: var(--u-s-4) var(--u-s-2);
  border-radius: var(--u-r-lg);
  color: var(--u-text);
  font-size: var(--u-t-xs);
  font-weight: var(--u-w-strong);
  line-height: var(--u-lh-tight);
  text-align: center;
  text-decoration: none;
  transition: background var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .start-kachel:hover { background: var(--u-slot); color: var(--u-text); }
:root[data-huelle="glas"] .start-kachel-zeichen {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--u-s-12);
  height: var(--u-s-12);
  border-radius: var(--u-r-lg);
  background: var(--u-surface-3);
  box-shadow: 0 0 18px -6px var(--u-sparte);
  color: var(--u-sparte);
  isolation: isolate;
  transition: translate var(--u-dur-2) var(--u-ease), box-shadow var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .start-kachel-zeichen::before,
:root[data-huelle="glas"] .start-kachel-zeichen::after { content: ""; position: absolute; inset: 0; z-index: var(--u-z-dahinter); border-radius: inherit; }
:root[data-huelle="glas"] .start-kachel-zeichen::before { background: var(--u-sparte); opacity: .18; }
:root[data-huelle="glas"] .start-kachel-zeichen::after { border: 1px solid var(--u-sparte); opacity: .5; }
:root[data-huelle="glas"] .start-kachel-zeichen .sym { width: var(--u-s-8); height: var(--u-s-8); }
:root[data-huelle="glas"] .start-kachel:hover .start-kachel-zeichen { translate: 0 calc(-2px * var(--u-bewegung)); box-shadow: 0 0 22px -4px var(--u-sparte); }
:root[data-huelle="glas"] .auftrag-betrag { color: var(--u-geld); }

/* ── Zeichen und Kacheln (H3) ── `sym-duo` = Phosphor-Zeichen als Fläche; Startkacheln nach `data-kachelstil` (A Duotone, B App-Icon). */
:root[data-huelle="glas"] .sym-duo { fill: currentColor; fill-opacity: .2; stroke: none; }
:root[data-huelle="glas"] [data-kachelstil] .start-kachel-zeichen::after { display: none; }
:root[data-huelle="glas"] [data-kachelstil="a"] .start-kachel-zeichen {
  background: linear-gradient(160deg, var(--u-surface-alt), var(--u-surface-3));
  box-shadow: inset 0 1px 0 var(--u-hairline), inset 0 -1px 0 var(--u-scrim-mitte), 0 6px 14px -8px var(--u-scrim-ruhe);
  color: var(--u-sparte);
}
:root[data-huelle="glas"] [data-kachelstil="a"] .start-kachel-zeichen::before { background: linear-gradient(160deg, var(--u-sparte), transparent 110%); opacity: .3; }
:root[data-huelle="glas"] [data-kachelstil="a"] .start-kachel-zeichen .sym-duo { fill-opacity: .35; }
:root[data-huelle="glas"] [data-kachelstil="a"] .start-kachel:hover .start-kachel-zeichen { box-shadow: inset 0 1px 0 var(--u-hairline-strong), inset 0 -1px 0 var(--u-scrim-mitte), 0 8px 16px -8px var(--u-scrim-ruhe); }
:root[data-huelle="glas"] [data-kachelstil="b"] .start-kachel-zeichen { background: var(--u-sparte); box-shadow: inset 0 1px 0 var(--u-glanz), inset 0 -2px 6px var(--u-scrim-mitte), 0 8px 16px -8px var(--u-scrim-ruhe); color: var(--u-text-on-brand); }
:root[data-huelle="glas"] [data-kachelstil="b"] .start-kachel-zeichen::before { inset: 2px 2px 50%; background: linear-gradient(var(--u-glanz), transparent); opacity: 1; }
:root[data-huelle="glas"] [data-kachelstil="b"] .start-kachel-zeichen .sym-duo { fill-opacity: .45; }

/* ── Fensterkopf (H3, Entwurf H) ── über dem Titel jeder Seite: ← und der Pfad links, ⧉ und ✕ rechts; Knöpfe als Kästchen mit Rand. */
:root[data-huelle="glas"] .fensterkopf { display: flex; align-items: center; gap: var(--u-s-4); margin: 0 0 var(--u-s-3); color: var(--u-text-muted); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .fenster-pfad { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--u-s-1) var(--u-s-3); min-width: 0; margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .fenster-pfad li { display: inline-flex; align-items: center; gap: var(--u-s-3); min-width: 0; }
:root[data-huelle="glas"] .fenster-pfad li + li::before { content: "›" / ""; color: var(--u-text-muted); }
:root[data-huelle="glas"] .fenster-pfad a { position: relative; color: var(--u-text-2); text-decoration: none; }
:root[data-huelle="glas"] .fenster-pfad a::after { content: ""; position: absolute; inset: 50% auto auto 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"] .fenster-pfad a:hover { color: var(--u-text); text-decoration: underline; }
:root[data-huelle="glas"] .fenster-pfad [aria-current] { overflow: hidden; color: var(--u-text); font-weight: var(--u-w-strong); text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .fenster-knoepfe { display: flex; flex: none; gap: var(--u-s-3); margin-left: auto; }
:root[data-huelle="glas"] .fenster-knopf {
  display: grid;
  flex: none;
  place-items: center;
  width: max(var(--u-s-10), var(--u-ziel-min));
  height: max(var(--u-s-10), var(--u-ziel-min));
  padding: 0;
  border: 1px solid var(--u-border);
  border-radius: var(--u-r-md);
  background: var(--u-surface);
  color: var(--u-text-2);
  cursor: pointer;
  transition: border-color var(--u-dur-2) var(--u-ease), color var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .fenster-knopf:hover,
:root[data-huelle="glas"] .fenster-knopf:focus-visible,
:root[data-huelle="glas"] .fenster-knopf[aria-pressed="true"] { border-color: var(--u-kopf-akzent); color: var(--u-text); background: var(--u-slot); }
:root[data-huelle="glas"] :is(.fenster-knopf, .ebene-fenster-knopf) .sym { width: var(--u-s-7); height: var(--u-s-7); }

/* ── Fenster (H8; seit HM5c mit Rand und Rundung) ── jede Arbeitsseite steht in EINEM hellen Fenster unter der dunklen Kopfleiste;
   helle Rollen nur im Körper (rollen-hell.css). Langfassung: docs/oberflaeche-huelle.md §1g. */
:root[data-huelle="glas"] main.glasfenster:has(> .glasfenster-koerper > .fensterkopf > .fenster-name) { padding: 0; }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .fensterkopf > .fenster-name) {
  padding: 0 var(--u-s-8) var(--u-s-8);
  border-radius: 0;
  background: var(--u-surface-2);
  box-shadow: none;
  color: var(--u-text);
}
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) {
  gap: var(--u-s-4);
  margin: 0 calc(-1 * var(--u-s-8));
  padding: var(--u-s-2) var(--u-s-3) var(--u-s-2) var(--u-s-6);
  border-bottom: 1px solid var(--u-fenster-titel-linie);
  border-radius: 0;
  background: var(--u-fenster-titel);
  color: var(--u-fenster-titel-text);
}
:root[data-huelle="glas"] .fenster-zeichen { flex: none; width: var(--u-s-7); height: var(--u-s-7); color: var(--u-fenster-titel-zeichen); }
:root[data-huelle="glas"] .fenster-name { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--u-fenster-titel-text); font-size: var(--u-t-md); font-weight: var(--u-w-strong); text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-pfad { flex-wrap: nowrap; overflow: hidden; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-pfad :is(li, a),
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-pfad li + li::before { color: var(--u-fenster-titel-leise); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-pfad :is(a:hover, [aria-current]) { color: var(--u-fenster-titel-text); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-knoepfe { gap: var(--u-s-2); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-knopf {
  width: max(var(--u-s-10), var(--u-ziel-min));
  height: max(var(--u-s-10), var(--u-ziel-min));
  border-color: var(--u-fenster-titel-linie);
  border-radius: var(--u-r-sm);
  background: var(--u-fenster-titel-knopf);
  color: var(--u-fenster-titel-text);
}
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-knopf:is(:hover, :focus-visible, [aria-pressed="true"]) { border-color: var(--u-fenster-titel-leise); background: var(--u-fenster-titel-hover); color: var(--u-fenster-titel-text); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-zu:is(:hover, :focus-visible) { border-color: var(--u-fenster-zu); background: var(--u-fenster-zu); color: var(--u-text-on-brand); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) .fenster-knopf .sym { width: var(--u-s-6); height: var(--u-s-6); }
:root[data-huelle="glas"] .fenster-knopf[aria-pressed="true"] .fenster-gross-an,
:root[data-huelle="glas"] .fenster-knopf:not([aria-pressed="true"]) .fenster-gross-aus { display: none; }
:root[data-huelle="glas"][data-fenster-gross] main.glasfenster:has(> .glasfenster-koerper > .fensterkopf > .fenster-name) { padding: 0; }
:root[data-huelle="glas"][data-fenster-gross] .glasfenster-koerper:has(> .fensterkopf > .fenster-name) { min-height: calc(100svh - var(--u-topbar-h)); border-radius: 0; box-shadow: none; }
:root[data-huelle="glas"][data-fenster-gross] .fensterkopf:has(> .fenster-name) { border-radius: 0; }

/* ── Chat-Ebene (H3) ── die Leiste ohne „Zuklappen“ und in voller Breite rechts (es gibt kein Dock mehr), die Akten-Reiter vor den
   Gesprächen, die Fensterknöpfe im Kopf des Reiters, ⤢ größer (`data-gross`, nur am Schreibtisch — chat-kern.js). */
:root[data-huelle="glas"] .chat-ebene { max-inline-size: calc(100% - 2 * var(--u-s-5)); }
:root[data-huelle="glas"] .ebene-akten { 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-liste:empty { display: none; }
:root[data-huelle="glas"] .ebene-akten:not([hidden]) + .ebene-reiter-liste:not(:empty) { padding-left: var(--u-s-4); border-left: 1px solid var(--u-border); }
:root[data-huelle="glas"] .ebene-akte { display: flex; flex: none; align-items: center; }
:root[data-huelle="glas"] .ebene-akte-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: 14rem;
  padding: 0 var(--u-s-4);
  border-radius: var(--u-r-md);
  background: var(--u-slot);
  color: var(--u-text-2);
  font-size: var(--u-t-sm);
  font-weight: var(--u-w-strong);
  text-decoration: none;
}
:root[data-huelle="glas"] .ebene-akte-knopf:hover { background: var(--u-hover); color: var(--u-text); }
:root[data-huelle="glas"] .ebene-akte-knopf[aria-current="page"] { background: var(--u-surface); box-shadow: inset 0 -2px 0 var(--u-kopf-akzent); color: var(--u-text); }
:root[data-huelle="glas"] .ebene-akte-zeichen { flex: none; width: var(--u-s-7); height: var(--u-s-7); color: var(--u-text-muted); }
:root[data-huelle="glas"] .ebene-akte-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .ebene-akte-zu { display: inline-grid; flex: none; place-items: center; inline-size: max(var(--u-s-10), var(--u-ziel-min)); block-size: max(var(--u-s-10), var(--u-ziel-min)); padding: 0; border: 0; border-radius: var(--u-r-full); background: none; color: var(--u-text-2); font-size: var(--u-t-lg); cursor: pointer; }
:root[data-huelle="glas"] .ebene-fenster { display: inline-flex; flex: none; gap: var(--u-s-1); }
/* Der Name im Kopf des Reiters bricht nicht mitten im Wort (neben den Knöpfen ist das Blatt schmal): eine Zeile, sonst Auslassung. */
:root[data-huelle="glas"] .chat-ebene .chat-kopf-titel { min-inline-size: 0; }
:root[data-huelle="glas"] .chat-ebene .chat-kopf-titel > .chat-kopfzeile-name { max-inline-size: 100%; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .ebene-fenster-knopf { display: inline-grid; flex: none; place-items: center; inline-size: max(var(--u-s-10), var(--u-ziel-min)); block-size: max(var(--u-s-10), var(--u-ziel-min)); padding: 0; border: 0; border-radius: var(--u-r-sm); background: transparent; color: var(--u-text-2); cursor: pointer; }
:root[data-huelle="glas"] :is(.ebene-fenster-knopf, .ebene-akte-zu):hover,
:root[data-huelle="glas"] :is(.ebene-fenster-knopf, .ebene-akte-zu):focus-visible { background: var(--u-hover); color: var(--u-text); }
:root[data-huelle="glas"] .ebene-fenster-knopf[data-ebene-fenster="zu"]:hover { color: var(--u-danger-fg); }
:root[data-huelle="glas"] .chat-ebene:not([data-gross]) .ebene-fenster-ab,
:root[data-huelle="glas"] .chat-ebene[data-gross] .ebene-fenster-auf { display: none; }
:root[data-huelle="glas"] .chat-ebene[data-gross] .ebene-blatt { inline-size: min(52rem, calc(100vw - 2 * var(--u-s-8))); block-size: calc(var(--u-sicht-h) - var(--u-topbar-h) - 2 * var(--u-s-12)); }

/* ── Alle Mandanten (H7, Entwurf G3) ── je Mandant eine Karte nebeneinander: Kopf mit Punkt und „wechseln →“, Kacheln, Umsatz,
   Agenten; oben die Kante in der (gedämpften) Farbe des Mandanten. */
:root[data-huelle="glas"] .start-alle { display: flex; flex-direction: column; gap: var(--u-s-5); min-width: 0; }
:root[data-huelle="glas"] .start-alle-hinweis { margin: 0; color: var(--u-text-muted); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .start-mandanten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--u-s-6); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .start-mandant { position: relative; display: flex; flex-direction: column; gap: var(--u-s-4); padding: var(--u-s-5) var(--u-s-6); overflow: hidden; border: 1px solid var(--u-border); border-radius: var(--u-r-lg); background: var(--u-surface); isolation: isolate; }
:root[data-huelle="glas"] .start-mandant::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--u-mandant); opacity: .7; }
:root[data-huelle="glas"] .start-mandant-kopf { display: flex; align-items: center; gap: var(--u-s-4); }
:root[data-huelle="glas"] .start-mandant-kopf h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--u-t-lg); }
:root[data-huelle="glas"] .start-mandant-wechseln { position: relative; flex: none; color: var(--u-text-2); font-size: var(--u-t-sm); text-decoration: none; }
:root[data-huelle="glas"] .start-mandant-wechseln:hover { color: var(--u-text); text-decoration: underline; }
:root[data-huelle="glas"] .start-mandant-wechseln::after { content: ""; position: absolute; inset: 50% auto auto 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"] .start-mandant .start-kpi { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); }
:root[data-huelle="glas"] .start-mandant .start-kpi > li:last-child:nth-child(odd) { grid-column: auto; }
:root[data-huelle="glas"] :is(.start-mandant-umsatz, .start-mandant-agenten, .start-mandant-leer) { margin: 0; color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .start-mandant-umsatz a { color: inherit; }
:root[data-huelle="glas"] .start-mandant-umsatz b { margin-left: var(--u-s-2); }
:root[data-huelle="glas"] .start-mandant-agenten b { color: var(--u-text); font-weight: var(--u-w-strong); }
/* Die Firma eines Treffers im Katalog (Suche): ein langer Name endet mit Auslassung in seiner Karte (vorgelesen wird er ganz). */
:root[data-huelle="glas"] .start-kachel-zeichen .start-zahl { position: absolute; top: calc(-1 * var(--u-s-3)); right: calc(-1 * var(--u-s-4)); }
:root[data-huelle="glas"] .start-zahl[data-wartet] { background: var(--u-neon-magenta); }

/* ── Kennzahlenleiste (H2, Entwurf G) ── rechts neben den Kachelgruppen, am Telefon darunter (@container inhalt): oben die Kacheln
   der Module in einem Raster, darunter ihre Karten (Zeile: Bild oder Punkt, Wort, Unterzeile, Wert, Abzeichen). */
:root[data-huelle="glas"] .start:has(> .start-leiste) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); align-items: start; gap: var(--u-s-8); }
:root[data-huelle="glas"] :is(.start-leiste, .profil-werte) { display: flex; flex-direction: column; gap: var(--u-s-5); min-width: 0; }
:root[data-huelle="glas"] .start-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--u-border); border-radius: var(--u-r-md); background: var(--u-border); list-style: none; }
:root[data-huelle="glas"] :is(.start-kpi, .profil-werte .akte-kennzahlen) > li:last-child:nth-child(odd) { grid-column: span 2; }
:root[data-huelle="glas"] .start-kpi-kachel { display: flex; flex-direction: column; align-items: center; gap: var(--u-s-2); height: 100%; padding: var(--u-s-5) var(--u-s-3); background: var(--u-surface); color: var(--u-text-2); font: var(--u-w-strong) var(--u-t-2xs) var(--u-font-hud); letter-spacing: var(--u-track-hud); text-align: center; text-decoration: none; text-transform: uppercase; }
:root[data-huelle="glas"] a.start-kpi-kachel:hover { background: var(--u-surface-alt); }
:root[data-huelle="glas"] .start-kpi-wert { color: var(--u-text); font-family: var(--u-font-display); font-size: var(--u-t-2xl); letter-spacing: 0; line-height: var(--u-lh-caps); }
:root[data-huelle="glas"] :is(.start-karte, .profil-karte) { padding: var(--u-s-2) var(--u-s-5) var(--u-s-3); border: 1px solid var(--u-border); border-radius: var(--u-r-md); background: var(--u-surface); }
:root[data-huelle="glas"] :is(.start-karte-kopf, .profil-karte-kopf) { display: flex; align-items: baseline; gap: var(--u-s-3); padding: var(--u-s-3) 0; }
:root[data-huelle="glas"] :is(.start-karte-kopf h3, .profil-karte-kopf h2) { flex: 1 1 auto; margin: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] :is(.start-karte-zusatz, .profil-karte-kopf span) { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] :is(.start-karte-alle, .profil-karte-kopf a) { position: relative; color: var(--u-geld); font-size: var(--u-t-xs); text-decoration: none; }
:root[data-huelle="glas"] :is(.start-zeilen, .profil-zeilen, .profil-chips) { margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] :is(.start-zeile, .profil-zeile) { position: relative; display: flex; align-items: center; gap: var(--u-s-4); min-height: max(var(--u-s-12), var(--u-ziel-min)); padding: var(--u-s-2) 0; border-top: 1px solid var(--u-border); color: var(--u-text); font-size: var(--u-t-sm); line-height: var(--u-lh-tight); text-decoration: none; }
:root[data-huelle="glas"] a:is(.start-zeile, .profil-zeile):hover :is(.start-zeile-wort, .profil-zeile-wort) { text-decoration: underline; }
:root[data-huelle="glas"] a.start-agent { text-decoration: none; }
:root[data-huelle="glas"] :is(a.start-agent, .start-karte-alle, .profil-karte-kopf a)::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--u-s-8), var(--u-ziel-min)); height: max(var(--u-s-8), var(--u-ziel-min)); translate: -50% -50%; }
:root[data-huelle="glas"] :is(.start-zeile-text, .profil-zeile-text) { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--u-s-1); min-width: 0; overflow-wrap: anywhere; }
:root[data-huelle="glas"] :is(.start-zeile-text, .profil-zeile-text) small { color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .start-zeile-wert { flex: none; font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .start-zeile-bild { flex: none; width: var(--u-s-10); height: var(--u-s-10); border-radius: var(--u-r-full); object-fit: cover; object-position: top; box-shadow: 0 0 0 2px var(--u-brand-line); }
:root[data-huelle="glas"] .start-punkt { flex: none; width: var(--u-s-3); height: var(--u-s-3); border-radius: var(--u-r-full); background: currentColor; }

/* ── Profilseite (H5, Entwurf G2) ── die Charakterkarte als Profil: Figur frei, Name gross, Leitsatz, Chips, Knoepfe, rechts die
   Werte; darunter drei Karten. Das h1 des Fensters bleibt fuer Vorleser, sichtbar steht der Name im Kopf. */
:root[data-huelle="glas"] .glasfenster-koerper:has(.profil-kopf) > .glasfenster-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-huelle="glas"] .profil-kopf { grid-template-columns: minmax(10rem, 20rem) minmax(0, 1fr) minmax(12rem, 17rem); align-items: center; padding-block: var(--u-s-5); }
:root[data-huelle="glas"] .profil-kopf .charakter-bild { margin: 0; padding: 0; background: none; box-shadow: none; }
:root[data-huelle="glas"] .profil-kopf .charakter-buehne { aspect-ratio: auto; overflow: visible; background: none; }
:root[data-huelle="glas"] .profil-kopf .charakter-schild { display: none; }
:root[data-huelle="glas"] .profil-kopf .akte-etikett { flex-wrap: wrap; row-gap: var(--u-s-1); }
:root[data-huelle="glas"] .profil-kopf .charakter-figur { width: 100%; max-height: 30rem; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 10px 28px var(--u-brand-glow)); }
:root[data-huelle="glas"] .profil-name { margin: 0; font: var(--u-w-heavy) calc(var(--u-t-kpi) * 1.5) / var(--u-lh-caps) var(--u-font-hud); letter-spacing: var(--u-track-hud); overflow-wrap: anywhere; text-transform: uppercase; }
:root[data-huelle="glas"] .profil-leitsatz { margin: 0; color: var(--u-brand-text); font: italic var(--u-t-xl) var(--u-font-display); }
:root[data-huelle="glas"] .profil-chips { display: flex; flex-wrap: wrap; gap: var(--u-s-3); }
:root[data-huelle="glas"] .profil-chips li { display: flex; flex-direction: column; 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-alt); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] :is(.profil-chip-wort, .profil-marke, .profil-zustand) { flex: none; color: var(--u-text-2); font: var(--u-w-heavy) var(--u-t-2xs) var(--u-font-hud); letter-spacing: var(--u-track-caps); text-transform: uppercase; }
:root[data-huelle="glas"] :is(.profil-chip-zustand, .profil-zustand, .profil-marke)[data-art="gut"] { color: var(--u-ok-fg); }
:root[data-huelle="glas"] :is(.profil-chip-zustand, .profil-zustand)[data-art="warn"], :root[data-huelle="glas"] .profil-marke[data-art="freigabe"] { color: var(--u-warn-fg); }
:root[data-huelle="glas"] :is(.profil-chip-zustand, .profil-zustand)[data-art="gefahr"] { color: var(--u-danger-fg); }
:root[data-huelle="glas"] .profil-marke[data-art="lesen"] { color: var(--u-geld); }
:root[data-huelle="glas"] .profil-mehr { margin: 0; color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .profil-werte .akte-kennzahlen { grid-template-columns: 1fr 1fr; }
:root[data-huelle="glas"] .profil-werte .werte-liste { grid-template-columns: minmax(0, 1fr); }
:root[data-huelle="glas"] .profil-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--u-s-6); }
:root[data-huelle="glas"] .profil-karte-fuss { margin: var(--u-s-3) 0 0; font-size: var(--u-t-xs); }

/* Schmaler Inhalt (Telefon, Tablet hochkant): die Leiste unter die Kacheln, das Profil in einer Spalte (Figur kleiner). */
@container inhalt (width < 56rem) {
  :root[data-huelle="glas"] .start:has(> .start-leiste), :root[data-huelle="glas"] .profil-kopf { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .profil-kopf .charakter-figur { width: auto; max-height: 16rem; }
}

/* ── Reiterleiste (HM2, Entwurf M) ── */
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-reiter) { align-items: flex-end; gap: var(--u-s-4); padding: var(--u-s-3) var(--u-s-4) 0 var(--u-s-5); border-bottom-color: var(--u-fenster-titel-linie); background: var(--u-fenster-titel); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-reiter) > .fenster-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-reiter) .fenster-knoepfe { align-self: center; gap: var(--u-s-1); padding-bottom: var(--u-s-2); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-reiter) .fenster-knopf { width: max(var(--u-s-9), var(--u-ziel-min)); height: max(var(--u-s-9), var(--u-ziel-min)); border-color: transparent; background: transparent; color: var(--u-fenster-titel-leise); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-reiter) .fenster-knopf:is(:hover, :focus-visible, [aria-pressed="true"]) { border-color: transparent; background: var(--u-fenster-titel-hover); color: var(--u-fenster-titel-text); }
:root[data-huelle="glas"] .fenster-reiter { display: flex; flex: 1 1 auto; gap: var(--u-s-1); min-width: 0; margin: 0 0 -1px; padding: 0; overflow-x: auto; overflow-y: hidden; list-style: none; scrollbar-width: none; }
:root[data-huelle="glas"] .fenster-reiter-eintrag { display: flex; flex: 0 1 auto; align-items: center; min-width: 0; max-width: 16rem; border: 1px solid transparent; border-bottom: 0; border-radius: var(--u-r-md) var(--u-r-md) 0 0; color: var(--u-fenster-titel-leise); }
:root[data-huelle="glas"] .fenster-reiter-eintrag:hover { background: var(--u-fenster-titel-hover); color: var(--u-fenster-titel-text); }
:root[data-huelle="glas"] .fenster-reiter-eintrag[aria-current] { border-color: var(--u-fenster-titel-linie); background: var(--u-surface-2); color: var(--u-fenster-titel-text); }
:root[data-huelle="glas"] .fenster-reiter-eintrag > a { display: flex; flex: 1 1 auto; align-items: center; gap: var(--u-s-3); min-width: 0; min-height: max(var(--u-s-10), var(--u-ziel-min)); padding: 0 var(--u-s-4) 0 var(--u-s-5); color: inherit; font-size: var(--u-t-sm); font-weight: var(--u-w-medium); text-decoration: none; }
:root[data-huelle="glas"] .fenster-reiter-eintrag[aria-current] > a { font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .fenster-reiter-eintrag.ist-akte > a { padding-right: var(--u-s-1); }
:root[data-huelle="glas"] .fenster-reiter-wort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .fenster-reiter .fenster-zeichen { width: var(--u-s-7); height: var(--u-s-7); }
:root[data-huelle="glas"] .fenster-reiter-punkt { flex: none; width: var(--u-s-3); height: var(--u-s-3); border-radius: var(--u-r-full); background: var(--u-fenster-titel-zeichen); }
:root[data-huelle="glas"] .fenster-reiter-zu { display: flex; margin: 0 var(--u-s-2) 0 0; }
:root[data-huelle="glas"] .fenster-reiter-zu button { display: grid; place-items: center; width: max(var(--u-s-8), var(--u-ziel-min)); height: max(var(--u-s-8), var(--u-ziel-min)); padding: 0; border: 0; border-radius: var(--u-r-sm); background: transparent; color: var(--u-fenster-titel-leise); cursor: pointer; }
:root[data-huelle="glas"] .fenster-reiter-zu button:is(:hover, :focus-visible) { background: var(--u-fenster-titel-hover); color: var(--u-fenster-titel-text); }
:root[data-huelle="glas"] .fenster-reiter-zu .sym { width: var(--u-s-5); height: var(--u-s-5); }
@media (forced-colors: active) {
  :root[data-huelle="glas"] .fenster-reiter-eintrag[aria-current] { border-color: CanvasText; }
}

/* ── Liste nach Entwurf M (HM3) ── */
:root[data-huelle="glas"] .glasfenster-pfad { margin: calc(-1 * var(--u-s-4)) 0 var(--u-s-5); padding-inline: var(--u-s-2); color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .akte:not(.akte-panel), > .start > :first-child:not(.start-alle)) > .glasfenster-pfad { display: none; }
:root[data-huelle="glas"] .auftrag-liste .erp-leiste { align-items: center; gap: var(--u-s-4); }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter { flex: 1 1 100%; margin: 0 0 var(--u-s-2); border-bottom: 1px solid var(--u-border); }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .filter-gruppe { display: flex; gap: var(--u-s-1); padding: 0; overflow-y: hidden; background: none; border: 0; box-shadow: none; scrollbar-width: none; }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .filter-gruppe::-webkit-scrollbar { display: none; }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .filter-wahl { letter-spacing: normal; position: relative; display: inline-flex; align-items: center; gap: var(--u-s-3); min-height: max(var(--u-s-11), var(--u-ziel-min)); padding: 0 var(--u-s-5); border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--u-text-muted); font-size: var(--u-t-md); font-weight: var(--u-w-medium); white-space: nowrap; }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .filter-wahl:hover { color: var(--u-text); background: none; }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .filter-wahl[aria-current="true"] { color: var(--u-text); background: none; }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .filter-wahl[aria-current="true"]::after { content: ""; position: absolute; inset: auto var(--u-s-3) 0; height: 2px; border-radius: var(--u-r-xs); background: var(--u-brand-text); }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .reiter-zahl { min-width: var(--u-s-9); justify-content: center; opacity: 1; }
:root[data-huelle="glas"] .auftrag-liste .auftrag-reiter .filter-wahl[aria-current="true"] .reiter-zahl { border-color: var(--u-knopf-haupt); background: var(--u-knopf-haupt); color: var(--u-knopf-haupt-text); }
:root[data-huelle="glas"] .auftrag-liste .filter-trenner { flex: none; align-self: center; width: 1px; height: var(--u-s-8); margin: 0 var(--u-s-3); background: var(--u-border); }
:root[data-huelle="glas"] .auftrag-liste .erp-leiste > .filter-klapp { flex: 1 1 40rem; }
:root[data-huelle="glas"] .auftrag-liste .erp-leiste form.filterzeile { flex-wrap: nowrap; align-items: center; }
:root[data-huelle="glas"] .auftrag-liste .erp-leiste form.filterzeile .feld-suche { flex: 1 1 16rem; min-width: 10rem; }
/* HM3: main füllt die Höhe, das Fenster scrollt in sich; --u-fensterkopf-h = Versatz für alles, was darunter klebt. */
:root[data-huelle="glas"] main.glasfenster:has(> .glasfenster-koerper > .fensterkopf > .fenster-reiter) { height: calc(100dvh - var(--u-topbar-h) - var(--u-dock-h)); overflow: clip; }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .fensterkopf > .fenster-reiter) {
  --u-fensterkopf-h: calc(max(var(--u-s-10), var(--u-ziel-min)) + var(--u-s-3) + 1px);
  height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-reiter) { position: sticky; top: 0; z-index: var(--u-z-sticky); }
/* HM5c/d Fensteroptik: Rand zur Hülle (▢, Telefon randlos); die Spalte der Rollleiste trägt oben die Kopfflächen. */
:root[data-huelle="glas"] main.glasfenster:has(> .glasfenster-koerper > .fensterkopf > .fenster-reiter) { padding: clamp(0px, calc((100vw - 48rem) / 24), var(--u-s-6)); }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .fensterkopf > .fenster-reiter) { border-radius: var(--u-r-lg); box-shadow: var(--u-e-fenster); scrollbar-width: thin; scrollbar-color: var(--u-border) transparent; background-image: linear-gradient(var(--u-fenster-titel) calc(max(var(--u-s-10), var(--u-ziel-min)) + var(--u-s-3) + 1px), var(--u-surface) 0 var(--u-fensterkopf-h), transparent 0); background-repeat: no-repeat; }
:root[data-huelle="glas"][data-fenster-gross] main.glasfenster:has(> .glasfenster-koerper > .fensterkopf > .fenster-reiter) { padding: 0; }
:root[data-huelle="glas"] .auftrag-liste .erp thead th { position: sticky; top: var(--u-fensterkopf-h, 0); z-index: var(--u-z-sticky); background: var(--u-surface-alt); box-shadow: inset 0 -1px 0 var(--u-border); }
:root[data-huelle="glas"] .auftrag-liste .auswahl-leiste { position: sticky; bottom: 0; z-index: var(--u-z-sticky); background: var(--u-surface); }
:root[data-huelle="glas"] .auftrag-liste .auswahl-leiste:has(.auswahl-zahl[data-n]) { background: var(--u-brand-wash-deckend); }
:root[data-huelle="glas"] .liste-treffer { margin: 0 0 0 auto; color: var(--u-text-muted); font-size: var(--u-t-sm); white-space: nowrap; }
:root[data-huelle="glas"] .liste-treffer b { color: var(--u-text); font-weight: var(--u-w-strong); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .datenstand-klapp { position: relative; flex: none; }
:root[data-huelle="glas"] .datenstand-klapp > summary { cursor: pointer; list-style: none; }
:root[data-huelle="glas"] .datenstand-klapp > summary::-webkit-details-marker { display: none; }
:root[data-huelle="glas"] .datenstand-blatt { position: absolute; z-index: var(--u-z-menu); top: calc(100% + var(--u-s-2)); left: 0; width: min(28rem, 80vw); padding: var(--u-s-5) var(--u-s-6); border: 1px solid var(--u-border); border-radius: var(--u-r-md); background: var(--u-surface-hoch); box-shadow: var(--u-e-3); color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .datenstand-blatt p { margin: 0; }
:root[data-huelle="glas"] .auftrag-liste .liste-flaeche { padding: 0; overflow: visible; }

:root[data-huelle="glas"] .auftrag-liste .zeile-kanal { display: inline-flex; align-items: center; gap: var(--u-s-3); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .auftrag-liste .zeile-kanal::before { content: ""; width: var(--u-s-4); height: var(--u-s-4); border-radius: var(--u-r-xs); background: currentColor; }
:root[data-huelle="glas"] .auftrag-liste .zeile-zeichen { display: none; }
:root[data-huelle="glas"] .auftrag-liste .erp td { padding-block: var(--u-s-4); }
:root[data-huelle="glas"] .auftrag-liste .erp .person-bild { width: var(--u-s-11); height: var(--u-s-11); }
:root[data-huelle="glas"] .auftrag-liste .erp .person-text { min-width: 0; }
:root[data-huelle="glas"] .auftrag-liste .erp :is(.person-kennung, .zeile-neben) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .auftrag-liste .erp tbody tr:nth-child(even) { background: var(--u-zeile-zebra); }
:root[data-huelle="glas"] .erp .zeile-knopf { min-width: 8.5rem; justify-content: center; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .erp :is(th, td).zelle-auswahl { width: 1%; padding-inline: var(--u-s-6) var(--u-s-2); }
:root[data-huelle="glas"] .erp .zelle-auswahl input { width: var(--u-s-7); height: var(--u-s-7); margin: 0; accent-color: var(--u-knopf-haupt); cursor: pointer; }
:root[data-huelle="glas"] .erp tbody tr:has(.zelle-auswahl input:checked) { background: var(--u-brand-wash); }
:root[data-huelle="glas"] .auswahl-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-4); padding: var(--u-s-4) var(--u-s-6); border-top: 1px solid var(--u-border); color: var(--u-text-muted); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .auswahl-leiste .knopf { letter-spacing: normal; }
:root[data-huelle="glas"] .auswahl-leiste:has(.auswahl-zahl[data-n]) { background: var(--u-brand-wash); color: var(--u-text); }
:root[data-huelle="glas"] .auswahl-tasten { display: inline-flex; align-items: center; gap: var(--u-s-2); margin-left: auto; color: var(--u-text-faint); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .auswahl-tasten kbd { padding: 0 var(--u-s-2); border: 1px solid var(--u-border-strong); border-bottom-width: 2px; border-radius: var(--u-r-xs); background: var(--u-surface); font: var(--u-w-medium) var(--u-t-2xs) var(--u-font-mono); }
:root[data-huelle="glas"] .erp tbody tr:focus-within { outline: 2px solid var(--u-brand-line); outline-offset: -2px; }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .auswahl-tasten, :root[data-huelle="glas"] .erp :is(th, td).zelle-auswahl { display: none; }
}

:root[data-huelle="glas"] .liste-mit-vorschau { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u-s-6); align-items: start; }
:root[data-huelle="glas"] [data-vorschau-offen] .liste-mit-vorschau { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: 0; margin-right: calc(-1 * var(--u-s-8)); }
:root[data-huelle="glas"] [data-vorschau-offen] .liste-flaeche { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
:root[data-huelle="glas"] .liste-flaeche .blaettern { padding-right: var(--u-s-6); }
:root[data-huelle="glas"] .liste-vorschau { position: sticky; top: var(--u-fensterkopf-h, 0px); height: calc(100dvh - var(--u-topbar-h) - var(--u-fensterkopf-h, 0px)); overflow: auto; border-top: 1px solid var(--u-border); border-left: 1px solid var(--u-border); background: var(--u-surface); }
:root[data-huelle="glas"] [data-vorschau-offen] .erp :is(th[data-rolle="aktion"], td.zelle-menue) { display: none; }
:root[data-huelle="glas"] .erp tbody tr.ist-vorschau { background: var(--u-brand-wash); box-shadow: inset 2px 0 var(--u-brand-text); }
:root[data-huelle="glas"] .vorschau-akte { display: grid; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .vorschau-kopf { display: flex; justify-content: space-between; gap: var(--u-s-4); padding: var(--u-s-6) var(--u-s-6) var(--u-s-3); }
:root[data-huelle="glas"] .vorschau-kopf > .abzeichen { flex: none; align-self: flex-start; }
:root[data-huelle="glas"] .vorschau-paare { display: grid; gap: var(--u-s-2); margin: 0; }
:root[data-huelle="glas"] .vorschau-paare dt { color: var(--u-text-muted); }
:root[data-huelle="glas"] .vorschau-titel { margin: var(--u-s-2) 0 0; font-size: var(--u-t-lg); font-weight: var(--u-w-titel); }
:root[data-huelle="glas"] .vorschau-zeile { margin: var(--u-s-1) 0 0; color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .vorschau-aktionen { display: flex; flex-wrap: wrap; gap: var(--u-s-3); padding: 0 var(--u-s-6) var(--u-s-6); border-bottom: 1px solid var(--u-border-soft); }
:root[data-huelle="glas"] .vorschau-teil { padding: var(--u-s-5) var(--u-s-6); border-bottom: 1px solid var(--u-border-soft); }
:root[data-huelle="glas"] .vorschau-teil:last-child { border-bottom: 0; }
:root[data-huelle="glas"] .vorschau-teil h3 { margin: 0 0 var(--u-s-4); 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; }
:root[data-huelle="glas"] .vorschau-adresse b { color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .vorschau-summe { margin-top: var(--u-s-2); padding-top: var(--u-s-3); border-top: 1px solid var(--u-border); font-weight: var(--u-w-titel); }
:root[data-huelle="glas"] .vorschau-paare .vorschau-summe dt { color: var(--u-text); }
:root[data-huelle="glas"] .vorschau-positionen { display: grid; gap: var(--u-s-4); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .vorschau-positionen li { display: flex; justify-content: space-between; gap: var(--u-s-4); }
:root[data-huelle="glas"] .vorschau-position-text { display: grid; min-width: 0; }
:root[data-huelle="glas"] .vorschau-position-text b { font-weight: var(--u-w-strong); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .vorschau-menge { flex: none; font-weight: var(--u-w-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-huelle="glas"] .vorschau-adresse { margin: 0; line-height: var(--u-lh); }
:root[data-huelle="glas"] .vorschau-warn { margin: 0; color: var(--u-danger-fg); }
:root[data-huelle="glas"] .vorschau-paare > div { display: flex; justify-content: space-between; gap: var(--u-s-4); }
:root[data-huelle="glas"] .vorschau-paare dd { margin: 0; font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .erp-leiste > .sortier-pille > summary { min-height: max(var(--u-s-10), var(--u-ziel-min)); padding: 0 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-muted); font-size: var(--u-t-sm); letter-spacing: normal; }
:root[data-huelle="glas"] .erp-leiste > .sortier-pille > summary:hover, :root[data-huelle="glas"] .erp-leiste > .sortier-pille[open] > summary { border-color: var(--u-text-faint); background: var(--u-surface); }
:root[data-huelle="glas"] .erp-leiste > .sortier-pille > .zeilenmenue-blatt { right: 0; left: auto; }
:root[data-huelle="glas"] .erp thead th[aria-sort] { color: var(--u-text); }
:root[data-huelle="glas"] .erp thead th[aria-sort="descending"]::after { content: " ↓" / ""; color: var(--u-brand-text); }
:root[data-huelle="glas"] .erp thead th[aria-sort="ascending"]::after { content: " ↑" / ""; color: var(--u-brand-text); }
/* ── Akte nach Entwurf M (HM4) ── Knopfleiste im Kopf, Fortschritt darunter. */
:root[data-huelle="glas"] .akte-knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3); }
:root[data-huelle="glas"] .akte-knoepfe .knopf { letter-spacing: normal; }
:root[data-huelle="glas"] .akte-knoepfe .knopf-aus { border-style: dashed; color: var(--u-text-faint); cursor: not-allowed; }
:root[data-huelle="glas"] .akte-knopf-form { display: contents; }
:root[data-huelle="glas"] .akte-weitere { position: relative; }
:root[data-huelle="glas"] .akte-knoepfe .akte-weitere > summary { margin: 0; width: auto; height: auto; display: inline-flex; align-items: center; gap: var(--u-s-2); min-height: max(var(--u-d-ziel), var(--u-ziel-min)); padding: 0 var(--u-s-6); border: 1px solid var(--u-border); border-radius: var(--u-r-sm); color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); cursor: pointer; list-style: none; }
:root[data-huelle="glas"] .akte-knoepfe .akte-weitere > summary:hover, :root[data-huelle="glas"] .akte-knoepfe .akte-weitere[open] > summary { background: var(--u-hover); color: var(--u-text); }
:root[data-huelle="glas"] .akte-weitere .zeilenmenue-punkt { text-decoration: none; }
:root[data-huelle="glas"] .akte-datenstand { align-self: flex-start; }
:root[data-huelle="glas"] .akte-weitere > summary::-webkit-details-marker { display: none; }
:root[data-huelle="glas"] .akte-weitere > summary .sym { width: var(--u-s-6); height: var(--u-s-6); }
:root[data-huelle="glas"] .akte-weitere .zeilenmenue-punkt.knopf-aus { color: var(--u-text-faint); }
:root[data-huelle="glas"] .akte-design .akte-kopf .akte-name { font-size: var(--u-t-2xl); font-weight: var(--u-w-titel); }
:root[data-huelle="glas"] .akte-design .akte-kopf .akte-haupt-wert { color: var(--u-text); }
/* Das Fenster am Telefon (H8): randlos, ohne Ecken und Schatten, die Titelleiste knapp — Zeichen, Titel und Knöpfe, ohne Pfad und
   ohne ▢ (es gibt nichts zu maximieren). Die Titelleiste dockt wie am Desktop bündig an. */
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .glasfenster-koerper:has(> .fensterkopf > .fenster-name) {
    margin: 0;
    padding: 0 var(--u-s-5) var(--u-s-8);
    border-radius: 0;
    box-shadow: none;
  }
  :root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) { gap: var(--u-s-3); margin-inline: calc(-1 * var(--u-s-5)); padding-left: var(--u-s-5); border-radius: 0; }
  :root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) :is(.fenster-pfad, .fenster-knopf[data-fenster-gross]) { display: none; }
  /* HM2: am Telefon rollt die Reiterleiste waagerecht; jeder Reiter behält sein Wort, der aktive mehr Platz. */
  :root[data-huelle="glas"] .fenster-reiter-eintrag { flex: none; max-width: 9rem; }
  :root[data-huelle="glas"] .fenster-reiter-eintrag[aria-current] { max-width: 13rem; }
}

/* ── Erzwungene Farben ── das System malt; Verlaeufe und Scheine entfallen, Kanten bleiben (26j). */
@media (forced-colors: active) {
:root[data-huelle="glas"] .glasfenster-koerper:has(> .fensterkopf > .fenster-name) { border: 1px solid CanvasText; }
  :root[data-huelle="glas"] .fensterkopf:has(> .fenster-name) { border-bottom: 1px solid CanvasText; }
  :root[data-huelle="glas"] .kopf-leiste { border-bottom: 1px solid CanvasText; }
  :root[data-huelle="glas"] .kopf-streifen,
  :root[data-huelle="glas"] .kopf-agent::before,
  :root[data-huelle="glas"] .start-agent::before,
  :root[data-huelle="glas"] .start-kachel-zeichen::before { display: none; }
  :root[data-huelle="glas"] .kopf-ziel[aria-current="page"],
  :root[data-huelle="glas"] .kopf-ziel[data-aktiv],
  :root[data-huelle="glas"] .ebene-akte-knopf[aria-current="page"],
  :root[data-huelle="glas"] .fenster-knopf[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  :root[data-huelle="glas"] .kopf-zahl,
  :root[data-huelle="glas"] .kopf-griff .dock-zahl { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* ── Mittlere Breiten ── die Leiste wird in Stufen knapper. */
@container kopf (width < 100rem) {
  :root[data-huelle="glas"] .kopf-schnellsuche-wort,
  :root[data-huelle="glas"] .kopf-schnellsuche kbd,
  :root[data-huelle="glas"] .kopf-benutzer-wort { display: none; }
  :root[data-huelle="glas"] .kopf-schnellsuche { justify-content: center; width: max(var(--u-s-10), var(--u-ziel-min)); padding: 0; }
  :root[data-huelle="glas"] .kopf-mandant-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
  :root[data-huelle="glas"] .kopf-rechts { gap: var(--u-s-2); padding-right: var(--u-s-4); }
  /* HM2: bei 90rem (1440 px) lief das Menü in die Knöpfe rechts — die Zeichen der Bereiche fallen schon hier weg. */
  :root[data-huelle="glas"] .kopf-ziel { padding: 0 var(--u-s-4); }
  :root[data-huelle="glas"] .kopf-ziel > .sym:first-child { display: none; }
}
@container kopf (width < 88rem) {
  :root[data-huelle="glas"] .kopf-marke-wort { display: none; }
  :root[data-huelle="glas"] .kopf-marke { padding: 0 var(--u-s-5); }
  :root[data-huelle="glas"] .kopf-mandant-name { max-width: 10rem; }
  :root[data-huelle="glas"] .kopf-ziel { padding: 0 var(--u-s-4); }
  :root[data-huelle="glas"] .kopf-ziel > .sym:first-child { display: none; }
}
@container kopf (width < 72rem) {
  :root[data-huelle="glas"] .kopf-ziel > .kopf-winkel { display: none; }
  :root[data-huelle="glas"] .kopf-mandant-name { max-width: 7rem; }
  :root[data-huelle="glas"] .kopf-mandant-etikett { display: none; }
}

/* ── Telefon und schmales Fenster ── die Kopfleiste fragt ihre eigene Breite (Behaelter `kopf`); unter 60rem klappt das Menue unter der Leiste auf. */
@container kopf (width < 60rem) {
  :root[data-huelle="glas"] .kopf-marke { padding: 0 var(--u-s-5); }
  :root[data-huelle="glas"] .kopf-marke-wort,
  :root[data-huelle="glas"] .kopf-schnellsuche-wort,
  :root[data-huelle="glas"] .kopf-schnellsuche kbd,
  :root[data-huelle="glas"] .kopf-benutzer-wort,
  :root[data-huelle="glas"] .kopf-mandant-etikett { display: none; }
  :root[data-huelle="glas"] .kopf-mandant { min-width: 0; }
  :root[data-huelle="glas"] .kopf-mandant-knopf { padding: 0 var(--u-s-4); }
  :root[data-huelle="glas"] .kopf-mandant-name { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
  :root[data-huelle="glas"] .kopf-schnellsuche { justify-content: center; width: max(var(--u-s-10), var(--u-ziel-min)); padding: 0; border: 0; background: transparent; }
  :root[data-huelle="glas"] .kopf-rechts { gap: var(--u-s-1); padding: 0 var(--u-s-3) 0 0; }
  :root[data-huelle="glas"] .kopf-menue { position: static; }
  :root[data-huelle="glas"] .kopf-klapp {
    display: flex;
    align-items: center;
    gap: var(--u-s-3);
    min-height: max(var(--u-s-10), var(--u-ziel-min));
    padding: 0 var(--u-s-4);
    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"] .kopf-liste {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: var(--u-z-nav);
    display: none;
    flex-direction: column;
    max-height: calc(100dvh - var(--u-topbar-h));
    padding: var(--u-s-3);
    overflow-y: auto;
    border-bottom: 1px solid var(--u-border);
    background: var(--u-surface-hoch);
    box-shadow: var(--u-e-4);
  }
  :root[data-huelle="glas"] .kopf-menue:target .kopf-liste,
  :root[data-huelle="glas"] .kopf-menue[data-offen] .kopf-liste { display: flex; }
  :root[data-huelle="glas"] .kopf-menue:target .kopf-klapp,
  :root[data-huelle="glas"] .kopf-menue[data-offen] .kopf-klapp { background: var(--u-slot); }
  :root[data-huelle="glas"] .kopf-punkt,
  :root[data-huelle="glas"] .kopf-bereich { display: block; }
  :root[data-huelle="glas"] .kopf-ziel { padding: 0 var(--u-s-4); border-radius: var(--u-r-sm); }
  :root[data-huelle="glas"] .kopf-ziel[aria-current="page"],
  :root[data-huelle="glas"] .kopf-ziel[data-aktiv],
  :root[data-huelle="glas"] .kopf-bereich[open] > .kopf-ziel { box-shadow: inset 3px 0 0 var(--u-sparte); }
  /* Im aufgeklappten Menue stehen Zeichen und Winkel wieder (die mittleren Stufen nehmen sie nur der Leiste). */
  :root[data-huelle="glas"] .kopf-ziel > .sym:first-child,
  :root[data-huelle="glas"] .kopf-ziel > .kopf-winkel { display: block; }
  :root[data-huelle="glas"] .kopf-ziel .kopf-winkel { margin-left: auto; }
  :root[data-huelle="glas"] .kopf-liste .kopf-blatt { position: static; min-width: 0; max-height: none; margin: 0 0 var(--u-s-3) var(--u-s-5); border-top-width: 1px; border-radius: var(--u-r-md); box-shadow: none; }
  :root[data-huelle="glas"] .kopf-trenner { width: auto; height: 1px; margin: var(--u-s-3) var(--u-s-4); }
  :root[data-huelle="glas"] .kopf-mandant-blatt,
  :root[data-huelle="glas"] .kopf-benutzer-blatt { position: fixed; top: var(--u-topbar-h); right: var(--u-s-3); left: var(--u-s-3); min-width: 0; }
}
/* ── Schmalstes Telefon (unter 30rem, 390 px) ── die Schnellsuche faellt weg (der Katalog steht im Menue unter Agenten), der
   Mandant zeigt sein Kuerzel (der Name bleibt fuer Vorleser), die Marke nur ihr Zeichen. */
@container kopf (width < 30rem) {
  :root[data-huelle="glas"] .kopf-schnellsuche { display: none; }
  :root[data-huelle="glas"] .kopf-marke { justify-content: center; min-width: var(--u-ziel-min); padding: 0 var(--u-s-3); }
  :root[data-huelle="glas"] .kopf-mandant-knopf { gap: var(--u-s-2); padding: 0 var(--u-s-3); }
  :root[data-huelle="glas"] .kopf-mandant-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root[data-huelle="glas"] .kopf-mandant-kurz { display: inline; }
  :root[data-huelle="glas"] .kopf-klapp { padding: 0 var(--u-s-3); }
  :root[data-huelle="glas"] .kopf-rechts { padding-right: var(--u-s-2); }
}

/* MB-B37b: Warenbestellung, vorhandene Karten und ERP-Tabelle in einem Formular. */
:root[data-huelle="glas"] .warenbestellung-ansicht { container-type: inline-size; padding: 0 var(--u-s-8); }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .fensterkopf > .fenster-name):has(.warenbestellung-ansicht) { background-color: var(--u-surface); }
:root[data-huelle="glas"] .warenbestellung-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--u-s-5) 0; border-bottom: 1px solid var(--u-border); }
:root[data-huelle="glas"] .warenbestellung-kopf h1 { margin: 0; font-size: var(--u-t-xl); }
:root[data-huelle="glas"] .warenbestellung-kopf p { margin: .25rem 0 0; font-size: var(--u-t-md); }
:root[data-huelle="glas"] .warenbestellung-livehinweis { display: grid; gap: .3rem; }
:root[data-huelle="glas"] .warenbestellung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem); gap: var(--u-s-8); }
:root[data-huelle="glas"] .warenbestellung-positionen { display: grid; align-content: start; gap: var(--u-s-6); min-width: 0; padding: var(--u-s-5) 0 var(--u-s-8); }
:root[data-huelle="glas"] .warenbestellung .karte { margin: 0; box-shadow: none; }
:root[data-huelle="glas"] .warenbestellung .warenbestellung-position { padding: 0; border: 0; border-radius: 0; background: none; }
:root[data-huelle="glas"] .warenbestellung-position .zeilenkarten-rahmen > .erp { border: 1px solid var(--u-border-soft); border-radius: var(--u-r-sm); }
:root[data-huelle="glas"] .warenbestellung-produkt { display: flex; gap: 1rem; padding: 0 0 var(--u-s-4); }
:root[data-huelle="glas"] .warenbestellung-produkt > div { min-width: 0; }
:root[data-huelle="glas"] .warenbestellung-produkt h2 { margin: 0 0 .35rem; font-size: var(--u-t-feld); line-height: 1.4; }
:root[data-huelle="glas"] .warenbestellung-produkt p { margin: 0 0 .45rem; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung-produkt img, :root[data-huelle="glas"] .warenbestellung-bildleer { width: 4rem; height: 4rem; flex: 0 0 4rem; object-fit: contain; border-radius: .5rem; background: var(--u-surface-alt); }
:root[data-huelle="glas"] .warenbestellung-bildleer { display: grid; place-items: center; color: var(--u-text-muted); }
:root[data-huelle="glas"] .warenbestellung-preise { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung-preise .chip { border: 1px solid var(--u-hairline-strong); border-radius: 2rem; padding: .15rem .5rem; min-height: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung .zeilenkarten { width: 100%; }
/* Handweg (12.10.2026): Artikelvorschlag und „Andere Bezugsquelle eintragen“. */
:root[data-huelle="glas"] .warenbestellung-handkarte { display: grid; gap: var(--u-s-3); justify-items: start; margin: 0 0 var(--u-s-4); padding: var(--u-s-4); border: 1px solid var(--u-border-soft); border-radius: var(--u-r-sm); background: var(--u-surface-alt); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung-handkarte p { margin: 0; }
:root[data-huelle="glas"] .warenbestellung-hand { margin: 0 0 var(--u-s-4); padding: var(--u-s-3) var(--u-s-4); border: 1px dashed var(--u-border); border-radius: var(--u-r-sm); }
:root[data-huelle="glas"] .warenbestellung-hand summary { cursor: pointer; font-weight: var(--u-w-strong); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung-hand p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: var(--u-s-3) 0 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung-handfelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--u-s-3); margin-top: var(--u-s-3); }
:root[data-huelle="glas"] .warenbestellung-handfelder .feld { display: grid; gap: .3rem; min-width: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung-handfelder input, :root[data-huelle="glas"] .warenbestellung-handfelder select { width: 100%; min-width: 0; box-sizing: border-box; }
/* Marktpreisleiste (12.10.2026): je Quelle eine Kachel, netto groß (vergleichbar mit dem HEK), brutto klein; günstigste hervorgehoben. */
:root[data-huelle="glas"] .markt { display: grid; gap: var(--u-s-3); margin: 0 0 var(--u-s-5); }
:root[data-huelle="glas"] .markt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .markt-kopf b { font-size: var(--u-t-md); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .markt-wert { padding: .1rem .55rem; border-radius: var(--u-r-full); background: var(--u-surface-alt); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .markt-wert[data-ton="gruen"] { background: var(--u-ok-bg); color: var(--u-ok-fg); }
:root[data-huelle="glas"] .markt-wert[data-ton="rot"] { background: var(--u-warn-bg); color: var(--u-danger-fg); }
:root[data-huelle="glas"] .markt-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--u-s-2); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .markt-kachel > a, :root[data-huelle="glas"] .markt-kachel > div {
  display: grid; align-content: start; gap: .1rem; height: 100%; box-sizing: border-box; padding: var(--u-s-2) var(--u-s-3);
  border: 1px solid var(--u-border-soft); border-radius: var(--u-r-sm); background: var(--u-surface); color: var(--u-text); text-decoration: none;
  transition: border-color var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .markt-kachel > a:hover { border-color: var(--u-border-strong); }
:root[data-huelle="glas"] .markt-kachel > a:focus-visible { outline: 2px solid var(--u-brand-focus); outline-offset: 2px; }
:root[data-huelle="glas"] .markt-kachel small { color: var(--u-text-2); font-size: var(--u-t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-huelle="glas"] .markt-kachel b { font-size: var(--u-t-md); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .markt-kachel span { color: var(--u-text-2); font-size: var(--u-t-xs); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .markt-kachel[data-bester] > a, :root[data-huelle="glas"] .markt-kachel[data-bester] > div { border-color: var(--u-ok); background: var(--u-ok-bg); }
:root[data-huelle="glas"] .markt-kachel[data-zustand="leer"], :root[data-huelle="glas"] .markt-kachel[data-zustand="veraltet"] { opacity: .6; }
:root[data-huelle="glas"] .markt-laedt { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border: 2px solid var(--u-border-strong); border-top-color: transparent; border-radius: 50%; animation: markt-drehen 1s linear infinite; vertical-align: -.05rem; }
@keyframes markt-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { :root[data-huelle="glas"] .markt-laedt { animation: none; } }
@container (max-width: 40rem) { :root[data-huelle="glas"] .markt-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:root[data-huelle="glas"] .warenbestellung .zeile-kern, :root[data-huelle="glas"] .warenbestellung .zeile-kern-text { white-space: normal; overflow: visible; text-overflow: clip; }
:root[data-huelle="glas"] .warenbestellung .zeile-neben { white-space: normal; font-size: var(--u-t-xs); line-height: 1.4; }
/* EDI als Kippschalter wie im alten ERP (Manuel 07.10.2026): das Kästchen mit role=switch wird zur Schiene mit Knopf. */
:root[data-huelle="glas"] .warenbestellung-schalter { display: flex; align-items: center; gap: .7rem; font-weight: var(--u-w-strong); cursor: pointer; }
:root[data-huelle="glas"] .warenbestellung-schalter input[role="switch"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.6rem; height: 1.45rem; margin: 0;
  border: 1px solid var(--u-border-strong); border-radius: 999px; background: var(--u-surface-3); cursor: pointer;
  transition: background-color var(--u-dur-2) var(--u-ease), border-color var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .warenbestellung-schalter input[role="switch"]::before {
  content: ""; position: absolute; top: 50%; left: .15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--u-surface); box-shadow: var(--u-e-1); transform: translateY(-50%);
  transition: left var(--u-dur-2) var(--u-ease);
}
:root[data-huelle="glas"] .warenbestellung-schalter input[role="switch"]:checked { background: var(--u-ok); border-color: var(--u-ok); }
:root[data-huelle="glas"] .warenbestellung-schalter input[role="switch"]:checked::before { left: calc(100% - 1.2rem); }
:root[data-huelle="glas"] .warenbestellung-schalter input[role="switch"]:focus-visible { outline: 2px solid var(--u-brand-focus); outline-offset: 2px; }
:root[data-huelle="glas"] .warenbestellung-schalter input[role="switch"]:disabled { opacity: .5; cursor: not-allowed; }
@media (forced-colors: active) { :root[data-huelle="glas"] .warenbestellung-schalter input[role="switch"] { appearance: auto; } :root[data-huelle="glas"] .warenbestellung-schalter input[role="switch"]::before { content: none; } }
:root[data-huelle="glas"] .warenbestellung .zelle-aktion { width: 4rem; }
:root[data-huelle="glas"] .warenbestellung tr:has(input[type="radio"]:checked) { background: var(--u-ok-bg); }
:root[data-huelle="glas"] .warenbestellung input[type="radio"], :root[data-huelle="glas"] .warenbestellung input[type="checkbox"] { accent-color: var(--u-pruef-gruen); }
:root[data-huelle="glas"] .warenbestellung-alt, :root[data-huelle="glas"] .warenbestellung-hinweis { margin: 0; padding: var(--u-s-4) 0; color: var(--u-text-2); }
:root[data-huelle="glas"] .warenbestellung-sperre { padding: var(--u-s-3) var(--u-s-4); border-radius: var(--u-r-sm); background: var(--u-warn-bg); color: var(--u-warn-fg); }
:root[data-huelle="glas"] .warenbestellung-abschluss { min-width: 0; margin: 0 calc(-1 * var(--u-s-8)) 0 0; padding: var(--u-s-5) var(--u-s-6); border-left: 1px solid var(--u-border-soft); background: var(--u-surface-alt); }
:root[data-huelle="glas"] .warenbestellung-abschluss > .karte { position: sticky; top: calc(var(--u-fensterkopf-h) + var(--u-s-5)); display: grid; gap: 1rem; padding: 0; border: 0; border-radius: 0; background: none; }
:root[data-huelle="glas"] .warenbestellung-abschluss h2 { font-size: var(--u-t-feld); margin: 0; padding-bottom: .75rem; border-bottom: 1px solid var(--u-hairline); }
:root[data-huelle="glas"] .warenbestellung-abschluss h3 { font-size: var(--u-t-sm); color: var(--u-text-muted); margin: 0 0 .5rem; }
:root[data-huelle="glas"] .warenbestellung-abschluss p { margin: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung-abschluss address { font-style: normal; font-size: var(--u-t-md); line-height: 1.6; }
:root[data-huelle="glas"] .warenbestellung-abschluss label { font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .warenbestellung-abschluss .feld { display: grid; gap: .3rem; min-width: 0; }
:root[data-huelle="glas"] .warenbestellung-abschluss input:not([type="checkbox"]), :root[data-huelle="glas"] .warenbestellung-abschluss select { width: 100%; min-width: 0; box-sizing: border-box; }
:root[data-huelle="glas"] .warenbestellung-adresse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, .45fr); gap: .7rem; padding: 0; margin: 0; border: 0; }
:root[data-huelle="glas"] .warenbestellung-adresse legend { padding: 0 0 .6rem; font-weight: 600; }
:root[data-huelle="glas"] .warenbestellung-adresse .warenbestellung-adressfeld-empfaenger,
:root[data-huelle="glas"] .warenbestellung-adresse .warenbestellung-adressfeld-firma,
:root[data-huelle="glas"] .warenbestellung-adresse .warenbestellung-adressfeld-zusatz,
:root[data-huelle="glas"] .warenbestellung-adresse .warenbestellung-adressfeld-land,
:root[data-huelle="glas"] .warenbestellung-adresse > p { grid-column: 1 / -1; }
:root[data-huelle="glas"] .warenbestellung-adresse .warenbestellung-adressfeld-plz { grid-column: 1; }
:root[data-huelle="glas"] .warenbestellung-schalter { display: flex; align-items: start; gap: .5rem; font-weight: 600; }
:root[data-huelle="glas"] .warenbestellung-test { padding: .6rem; border-radius: .4rem; background: var(--u-info-bg); color: var(--u-info-fg); }
:root[data-huelle="glas"] .warenbestellung [data-waren-edi-lieferanten] { display: grid; gap: .5rem; margin-top: .65rem; }
:root[data-huelle="glas"] .warenbestellung .warenbestellung-abschlussknopf .knopf-haupt { width: 100%; min-height: 2.8rem; background: var(--u-pruef-gruen); color: var(--u-knopf-haupt-text); border-color: var(--u-pruef-gruen); }
:root[data-huelle="glas"] .warenbestellung-abschlussknopf-mobil { display: none; }
:root[data-huelle="glas"] .warenbestellung [hidden] { display: none !important; }
@container (max-width: 68rem) {
  :root[data-huelle="glas"] .warenbestellung { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .warenbestellung-abschluss { position: static; margin: 0 calc(-1 * var(--u-s-8)); border-left: 0; border-top: 1px solid var(--u-border-soft); }
  :root[data-huelle="glas"] .warenbestellung-abschluss .warenbestellung-abschlussknopf { display: none; }
  :root[data-huelle="glas"] .warenbestellung-abschlussknopf-mobil { display: block; position: sticky; bottom: .5rem; z-index: var(--u-z-sticky); padding: .5rem 0; background: var(--u-surface); }
  :root[data-huelle="glas"] .warenbestellung-abschluss > .karte { overflow: visible; }
  :root[data-huelle="glas"] .warenbestellung-kopf { align-items: start; flex-direction: column; }
}
@container (max-width: 30rem) {
  :root[data-huelle="glas"] .warenbestellung-ansicht { padding-inline: var(--u-s-4); }
  :root[data-huelle="glas"] .warenbestellung-abschluss { margin-inline: calc(-1 * var(--u-s-4)); }
  :root[data-huelle="glas"] .warenbestellung-produkt { padding: .75rem; gap: .6rem; }
  :root[data-huelle="glas"] .warenbestellung-produkt img, :root[data-huelle="glas"] .warenbestellung-bildleer { width: 3rem; height: 3rem; flex-basis: 3rem; }
  :root[data-huelle="glas"] .warenbestellung-produkt h2 { font-size: var(--u-t-lg); }
}
@container (min-width: 68rem) {
  :root[data-huelle="glas"] .warenbestellung .erp td.zelle-kern { width: 38%; max-width: none; }
  :root[data-huelle="glas"] .warenbestellung .erp td.zelle-neben { min-width: 8rem; }
  :root[data-huelle="glas"] .warenbestellung .erp td.zelle-kennzahl { min-width: 11rem; }
}
/* Ende MB-B37b. */

/* MB-B42b: Retourenakte, Retourenliste und Retourenteil der Auftragsakte (Aufbau wie Warenbestellung). */
:root[data-huelle="glas"] :is(.retoure-ansicht, .retouren-ansicht) { container-type: inline-size; }
:root[data-huelle="glas"] .retoure-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; flex-wrap: wrap; }
:root[data-huelle="glas"] .retoure-kopf-titel { display: flex; align-items: center; gap: .9rem; min-width: 0; }
:root[data-huelle="glas"] .retoure-kopf-symbol { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; border-radius: .7rem; background: var(--u-warn-bg); color: var(--u-warn-fg); }
:root[data-huelle="glas"] .retoure-kopf-symbol .sym { width: 1.5rem; height: 1.5rem; }
:root[data-huelle="glas"] .retoure-kopf h1 { margin: 0; font-size: var(--u-t-xl); }
:root[data-huelle="glas"] .retoure-kopf p { margin: .25rem 0 0; font-size: var(--u-t-md); }
:root[data-huelle="glas"] .retoure-kopf-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; }
:root[data-huelle="glas"] .retoure-kopf-zeile .auftrag-kanal { border: 1px solid var(--u-hairline-strong); border-radius: 2rem; padding: .1rem .55rem; }

/* Schrittleiste: erledigte Schritte grün, der aktuelle betont, offene gedämpft. */
:root[data-huelle="glas"] .retoure-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 1rem 1rem; padding: 0; list-style: none; border: 1px solid var(--u-hairline); border-radius: .75rem; background: var(--u-surface); overflow: hidden; }
:root[data-huelle="glas"] .retoure-schritt { position: relative; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; min-width: 0; }
:root[data-huelle="glas"] .retoure-schritt + .retoure-schritt { border-left: 1px solid var(--u-hairline); }
:root[data-huelle="glas"] .retoure-schritt-punkt { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem; border-radius: 50%; background: var(--u-surface-3); color: var(--u-text-muted); }
:root[data-huelle="glas"] .retoure-schritt-punkt .sym { width: 1.1rem; height: 1.1rem; }
:root[data-huelle="glas"] .retoure-schritt-text { display: grid; min-width: 0; }
:root[data-huelle="glas"] .retoure-schritt-text b { font-size: var(--u-t-md); }
:root[data-huelle="glas"] .retoure-schritt-text small { color: var(--u-text-muted); font-size: var(--u-t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .retoure-schritt-erledigt .retoure-schritt-punkt { background: var(--u-ok-bg); color: var(--u-ok-fg); }
:root[data-huelle="glas"] .retoure-schritt-aktuell { background: var(--u-surface-2); }
:root[data-huelle="glas"] .retoure-schritt-aktuell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--u-pruef-gruen); }
:root[data-huelle="glas"] .retoure-schritt-aktuell .retoure-schritt-punkt { background: var(--u-pruef-gruen); color: var(--u-knopf-haupt-text); }
:root[data-huelle="glas"] .retoure-schritt-offen .retoure-schritt-text b { color: var(--u-text-muted); font-weight: 500; }

/* Raster: Positionen links, nächster Schritt rechts (wie Warenbestellung). */
:root[data-huelle="glas"] .retoure-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); gap: 1rem; padding: 0 1rem 1rem; align-items: start; }
:root[data-huelle="glas"] :is(.retoure-haupt, .retoure-formular) { display: grid; gap: 1rem; min-width: 0; }
:root[data-huelle="glas"] :is(.retoure-raster, .retouren-ansicht) .karte { margin: 0; box-shadow: none; }
:root[data-huelle="glas"] .retoure-schatten { display: flex; gap: .7rem; align-items: start; margin: 0; padding: .75rem 1rem; border-radius: .6rem; background: var(--u-info-bg); color: var(--u-info-fg); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .retoure-schatten .sym { width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; margin-top: .1rem; }
:root[data-huelle="glas"] .retoure-position { padding: 0; overflow: hidden; }
:root[data-huelle="glas"] .retoure-produkt { display: flex; gap: 1rem; padding: 1rem; align-items: start; }
:root[data-huelle="glas"] .retoure-bildleer { display: grid; place-items: center; width: 4rem; height: 4rem; flex: 0 0 4rem; border-radius: .5rem; background: var(--u-surface-alt); color: var(--u-text-muted); }
:root[data-huelle="glas"] .retoure-bildleer .sym { width: 1.6rem; height: 1.6rem; }
:root[data-huelle="glas"] .retoure-bild { width: 4rem; height: 4rem; flex: 0 0 4rem; object-fit: contain; border-radius: .5rem; background: var(--u-pruef-weiss); border: 1px solid var(--u-hairline); }
:root[data-huelle="glas"] :is(.retoure-bild, .retoure-bildleer).retoure-bild-klein { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; }
:root[data-huelle="glas"] .retoure-bildleer.retoure-bild-klein .sym { width: 1.2rem; height: 1.2rem; }
:root[data-huelle="glas"] .retouren-artikelzelle { display: flex; gap: .75rem; align-items: center; min-width: 0; }
:root[data-huelle="glas"] .retoure-produkt-text { flex: 1 1 auto; min-width: 0; }
:root[data-huelle="glas"] .retoure-produkt h2 { margin: 0 0 .25rem; font-size: var(--u-t-feld); line-height: 1.4; }
:root[data-huelle="glas"] .retoure-produkt .mono { margin: 0 0 .7rem; font-size: var(--u-t-xs); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .retoure-merkmale { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .retoure-merkmal { display: grid; gap: .15rem; justify-items: start; }
:root[data-huelle="glas"] .retoure-merkmal small { color: var(--u-text-muted); font-size: var(--u-t-xs); text-transform: uppercase; letter-spacing: .05em; }
:root[data-huelle="glas"] .retoure-menge { display: grid; justify-items: center; min-width: 4rem; padding: .45rem .7rem; border-radius: .6rem; background: var(--u-surface-2); }
:root[data-huelle="glas"] .retoure-menge b { font-size: var(--u-t-xl); line-height: 1.1; }
:root[data-huelle="glas"] .retoure-menge small { color: var(--u-text-muted); font-size: var(--u-t-xs); }

/* Warenprüfung: Auswahl als Segmentknöpfe statt Auswahllisten. */
:root[data-huelle="glas"] .retoure-pruefung { display: grid; gap: .9rem; padding: 1rem; border-top: 1px solid var(--u-hairline); background: var(--u-surface-alt); }
:root[data-huelle="glas"] .retoure-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
:root[data-huelle="glas"] .retoure-wahl legend { padding: 0 0 .4rem; font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .retoure-wahl-feld { position: relative; cursor: pointer; }
:root[data-huelle="glas"] .retoure-wahl-feld input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
:root[data-huelle="glas"] .retoure-wahl-feld span { display: inline-block; padding: .38rem .8rem; border: 1px solid var(--u-hairline-strong); border-radius: 2rem; background: var(--u-surface); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .retoure-wahl-feld input:checked + span { background: var(--u-surface-3); border-color: var(--u-text-2); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .retoure-wahl-gut input:checked + span { background: var(--u-ok-bg); color: var(--u-ok-fg); border-color: var(--u-ok-fg); }
:root[data-huelle="glas"] .retoure-wahl-warn input:checked + span { background: var(--u-warn-bg); color: var(--u-warn-fg); border-color: var(--u-warn-fg); }
:root[data-huelle="glas"] .retoure-wahl-gefahr input:checked + span { background: var(--u-danger-bg); color: var(--u-danger-fg); border-color: var(--u-danger-fg); }
:root[data-huelle="glas"] .retoure-wahl-feld input:focus-visible + span { outline: 2px solid var(--u-brand-focus); outline-offset: 2px; }
:root[data-huelle="glas"] .retoure-platz { display: grid; gap: .3rem; max-width: 24rem; font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }

/* Seitenspalte */
:root[data-huelle="glas"] .retoure-seite { display: grid; gap: 1rem; position: sticky; top: 1rem; min-width: 0; }
:root[data-huelle="glas"] .retoure-seite > .karte { padding: 1rem; display: grid; gap: .75rem; }
:root[data-huelle="glas"] .retoure-seite h2 { display: flex; align-items: center; gap: .5rem; margin: 0; }
:root[data-huelle="glas"] .retoure-seite h2 .sym { width: 1.15rem; height: 1.15rem; color: var(--u-text-muted); }
:root[data-huelle="glas"] .retoure-seite h2 small { margin-left: auto; font-weight: 400; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .retoure-seite p { margin: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .retoure-schritt-karte .knopf-haupt { width: 100%; min-height: 2.8rem; background: var(--u-pruef-gruen); color: var(--u-knopf-haupt-text); border-color: var(--u-pruef-gruen); }
:root[data-huelle="glas"] .retoure-seite .knopf { width: 100%; justify-content: center; }
:root[data-huelle="glas"] .retoure-fertig { display: flex; align-items: center; gap: .5rem; color: var(--u-ok-fg); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .retoure-fertig .sym { width: 1.2rem; height: 1.2rem; }
:root[data-huelle="glas"] .retoure-vorschlag { display: flex; gap: .75rem; padding: .75rem; border: 1px solid var(--u-hairline); border-radius: .6rem; }
:root[data-huelle="glas"] .retoure-vorschlag-symbol { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: .5rem; background: var(--u-info-bg); color: var(--u-info-fg); }
:root[data-huelle="glas"] .retoure-vorschlag-symbol .sym { width: 1.05rem; height: 1.05rem; }
:root[data-huelle="glas"] .retoure-vorschlag h3 { margin: 0 0 .2rem; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .retoure-vorschlag p { color: var(--u-text-2); font-size: var(--u-t-xs); line-height: 1.45; }
:root[data-huelle="glas"] .retoure-paare { margin: 0; font-size: var(--u-t-sm); }

/* Retourenliste */
:root[data-huelle="glas"] .retouren-mengen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: 0 1rem 1rem; }
:root[data-huelle="glas"] .retouren-menge { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--u-hairline); border-radius: .75rem; background: var(--u-surface); color: inherit; text-decoration: none; min-width: 0; }
:root[data-huelle="glas"] .retouren-menge:hover { border-color: var(--u-hairline-strong); background: var(--u-surface-2); }
:root[data-huelle="glas"] .retouren-menge[aria-current="page"] { border-color: var(--u-pruef-gruen); box-shadow: inset 0 -3px 0 var(--u-pruef-gruen); }
:root[data-huelle="glas"] .retouren-menge-symbol { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: .65rem; background: var(--u-surface-3); color: var(--u-text-2); }
:root[data-huelle="glas"] .retouren-menge-symbol .sym { width: 1.3rem; height: 1.3rem; }
:root[data-huelle="glas"] .retouren-menge-hinweis .retouren-menge-symbol { background: var(--u-info-bg); color: var(--u-info-fg); }
:root[data-huelle="glas"] .retouren-menge-warn .retouren-menge-symbol { background: var(--u-warn-bg); color: var(--u-warn-fg); }
:root[data-huelle="glas"] .retouren-menge-gut .retouren-menge-symbol { background: var(--u-ok-bg); color: var(--u-ok-fg); }
:root[data-huelle="glas"] .retouren-menge-text { display: grid; min-width: 0; }
:root[data-huelle="glas"] .retouren-menge-text small { color: var(--u-text-muted); font-size: var(--u-t-xs); text-transform: uppercase; letter-spacing: .05em; }
:root[data-huelle="glas"] .retouren-menge-text b { font-size: var(--u-t-akte-kennzahl, 1.6rem); line-height: 1.15; }
:root[data-huelle="glas"] .retouren-menge-text .leise { font-size: var(--u-t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-huelle="glas"] .retouren-leiste { display: flex; align-items: center; gap: .75rem; padding: 0 1rem 1rem; flex-wrap: wrap; }
:root[data-huelle="glas"] .retouren-leiste .knopf[aria-current="page"] { border-color: var(--u-pruef-gruen); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .retouren-leiste .filterzeile { flex: 1 1 18rem; margin: 0; }
:root[data-huelle="glas"] .retouren-karte { margin: 0 1rem 1rem !important; padding: 0; overflow: hidden; }
:root[data-huelle="glas"] .retouren-tabelle { width: 100%; border-collapse: collapse; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .retouren-tabelle th { padding: .7rem 1rem; text-align: left; font-size: var(--u-t-xs); font-weight: var(--u-w-strong); color: var(--u-text-muted); border-bottom: 1px solid var(--u-hairline); }
:root[data-huelle="glas"] .retouren-tabelle td { padding: .75rem 1rem; vertical-align: top; border-bottom: 1px solid var(--u-hairline); }
:root[data-huelle="glas"] .retouren-tabelle tbody tr:hover { background: var(--u-surface-2); }
/* Ganze Zeile öffnet die Retoure: Verweis der Nummer über die Zeile gespannt, der Auftragsverweis liegt darüber. */
:root[data-huelle="glas"] .retouren-zeile { position: relative; cursor: pointer; }
:root[data-huelle="glas"] .retouren-zeile a[data-zeile]::after { content: ""; position: absolute; inset: 0; }
:root[data-huelle="glas"] .retouren-zeile a:not([data-zeile]) { position: relative; z-index: var(--u-z-zeile); }
:root[data-huelle="glas"] .retouren-grund { color: var(--u-text-2); }
:root[data-huelle="glas"] .retouren-tabelle .tabelle-zahl { text-align: right; }
:root[data-huelle="glas"] .retouren-nummer { font-weight: var(--u-w-strong); color: inherit; text-decoration: none; }
:root[data-huelle="glas"] .retouren-nummer:hover { text-decoration: underline; }
:root[data-huelle="glas"] .retouren-unter { display: flex; gap: .5rem; align-items: center; margin-top: .25rem; color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .retouren-alt { color: var(--u-warn-fg); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .retouren-artikel { display: block; max-width: 36rem; }

/* Retourenteil in der Auftragsakte */
:root[data-huelle="glas"] .retoure-faelle { display: grid; gap: .5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .retoure-fall { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border: 1px solid var(--u-hairline); border-radius: .6rem; color: inherit; text-decoration: none; }
:root[data-huelle="glas"] .retoure-fall:hover { background: var(--u-surface-2); border-color: var(--u-hairline-strong); }
:root[data-huelle="glas"] .retoure-fall-symbol { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: .5rem; background: var(--u-warn-bg); color: var(--u-warn-fg); }
:root[data-huelle="glas"] .retoure-fall-symbol .sym { width: 1.05rem; height: 1.05rem; }
:root[data-huelle="glas"] .retoure-fall-text { display: grid; flex: 1 1 auto; min-width: 0; }
:root[data-huelle="glas"] .retoure-fall-text small { color: var(--u-text-muted); font-size: var(--u-t-xs); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .retoure-fall-stand { display: flex; gap: 3px; }
:root[data-huelle="glas"] .retoure-fall-stand i { width: 1.1rem; height: 4px; border-radius: 2px; background: var(--u-surface-3); }
:root[data-huelle="glas"] .retoure-fall-stand i.an { background: var(--u-pruef-gruen); }
:root[data-huelle="glas"] .retoure-erfassen { margin-top: .9rem; border: 1px dashed var(--u-hairline-strong); border-radius: .6rem; }
:root[data-huelle="glas"] .retoure-erfassen > summary { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; cursor: pointer; font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .retoure-erfassen > summary .sym { width: 1.1rem; height: 1.1rem; color: var(--u-text-muted); }
:root[data-huelle="glas"] .retoure-erfassen[open] { border-style: solid; }
:root[data-huelle="glas"] .retoure-erfassen form { display: grid; gap: .8rem; padding: 0 .85rem .85rem; }
:root[data-huelle="glas"] .retoure-erfassen form > p { margin: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .retoure-erfassen-zeilen { display: grid; border: 1px solid var(--u-hairline); border-radius: .5rem; overflow: hidden; }
:root[data-huelle="glas"] .retoure-erfassen-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 7rem minmax(10rem, 15rem) minmax(10rem, 15rem); gap: .75rem; align-items: end; margin: 0; padding: .75rem; border: 0; min-width: 0; }
:root[data-huelle="glas"] .retoure-erfassen-zeile + .retoure-erfassen-zeile { border-top: 1px solid var(--u-hairline); }
:root[data-huelle="glas"] .retoure-erfassen-artikel { display: flex; gap: .75rem; align-items: center; align-self: center; min-width: 0; }
:root[data-huelle="glas"] .retoure-erfassen-artikel > span:last-child { display: grid; gap: .15rem; min-width: 0; }
:root[data-huelle="glas"] .retoure-erfassen-artikel small { font-size: var(--u-t-xs); }
:root[data-huelle="glas"] :is(.retoure-erfassen-zeile, .retoure-erfassen-fuss) .feld { display: grid; gap: .3rem; min-width: 0; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] :is(.retoure-erfassen-zeile, .retoure-erfassen-fuss) :is(input, select) { width: 100%; min-width: 0; box-sizing: border-box; }
:root[data-huelle="glas"] .retoure-erfassen-fuss { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
:root[data-huelle="glas"] .retoure-erfassen-fuss .feld { flex: 0 1 26rem; }

@container (width < 52rem) {
  :root[data-huelle="glas"] .retoure-raster { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .retoure-seite { position: static; }
  :root[data-huelle="glas"] .retouren-mengen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (width < 34rem) {
  :root[data-huelle="glas"] .retoure-schritt { flex-direction: column; gap: .35rem; padding: .7rem .2rem; text-align: center; }
  :root[data-huelle="glas"] .retoure-schritt-text b { font-size: var(--u-t-xs); }
  :root[data-huelle="glas"] .retoure-schritt-text small { display: none; }
  :root[data-huelle="glas"] .retoure-produkt { gap: .75rem; }
  :root[data-huelle="glas"] .retoure-produkt > :is(.retoure-bild, .retoure-bildleer) { width: 3rem; height: 3rem; flex-basis: 3rem; }
  :root[data-huelle="glas"] .retouren-menge { padding: .7rem; gap: .6rem; }
  :root[data-huelle="glas"] .retouren-menge-symbol { display: none; }
  :root[data-huelle="glas"] .retouren-tabelle thead { display: none; }
  :root[data-huelle="glas"] .retouren-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--u-hairline); }
  :root[data-huelle="glas"] .retouren-tabelle td { display: block; padding: 0; border: 0; }
  :root[data-huelle="glas"] .retouren-tabelle td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  :root[data-huelle="glas"] .retouren-tabelle td:nth-child(3) { display: none; }
  :root[data-huelle="glas"] .retoure-kopf .knopfleiste { width: 100%; }
  :root[data-huelle="glas"] .retoure-kopf .knopfleiste .knopf { flex: 1 1 0; justify-content: center; }
  :root[data-huelle="glas"] .retouren-tabelle td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  :root[data-huelle="glas"] .retouren-tabelle td:nth-child(5) { grid-column: 1 / -1; font-size: var(--u-t-xs); }
}
@container inhalt (width < 40rem) {
  :root[data-huelle="glas"] .retoure-erfassen-zeile { grid-template-columns: minmax(0, 1fr) 6rem; }
  :root[data-huelle="glas"] .retoure-erfassen-artikel { grid-column: 1 / -1; }
  :root[data-huelle="glas"] .retoure-fall-stand { display: none; }
}
:root[data-huelle="glas"] .retouren-ansicht .erp-leiste > form.filterzeile { flex: 1 1 26rem; flex-wrap: nowrap; align-items: center; }
:root[data-huelle="glas"] .retouren-ansicht .erp-leiste > form.filterzeile .feld-suche { flex: 1 1 auto; min-width: 0; }

/* MB-B42: Retourenakte im Design-Stil der Auftragsakte — Positionen als Zeilen in einem Bannerabschnitt. */
:root[data-huelle="glas"] .retoure-ansicht .retoure-raster { padding: 0; }
:root[data-huelle="glas"] .retoure-positionen { padding: 0; overflow: hidden; }
:root[data-huelle="glas"] .retoure-positionen > h2 { margin: 0; padding: var(--u-s-6) var(--u-s-6) var(--u-s-4); }
:root[data-huelle="glas"] .retoure-positionen .retoure-position { border: 0; border-top: 1px solid var(--u-border-soft); border-radius: 0; box-shadow: none; margin: 0; }
:root[data-huelle="glas"] .retoure-positionen .retoure-formular { gap: 0; }
:root[data-huelle="glas"] .retoure-positionen .retoure-position { padding: 0; }
:root[data-huelle="glas"] .retoure-positionen .retoure-schatten { margin: 0; }
:root[data-huelle="glas"] .retoure-seite > .karte > h2 small { margin-left: auto; }
/* B-TC: Ticket-Nachrichten als fortlaufender Chat (wie Kaufland), Agentenvorschläge markiert. */
:root[data-huelle="glas"] .ticket-chat { display: flex; flex-direction: column; gap: var(--u-s-6); padding: var(--u-s-4) 0; }
:root[data-huelle="glas"] .ticket-chat-tag { display: flex; align-items: center; gap: var(--u-s-5); margin: var(--u-s-4) 0 0; color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .ticket-chat-tag::before, :root[data-huelle="glas"] .ticket-chat-tag::after { content: ""; flex: 1; border-top: 1px solid var(--u-border-soft); }
:root[data-huelle="glas"] .ticket-blase { max-width: min(46rem, 82%); padding: var(--u-s-6) var(--u-s-7); border-radius: 14px; background: var(--u-surface-alt); box-shadow: inset 0 0 0 1px var(--u-border-soft); }
:root[data-huelle="glas"] .ticket-blase > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--u-s-3) var(--u-s-4); margin-bottom: var(--u-s-4); }
:root[data-huelle="glas"] .ticket-blase > header small { color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .ticket-blase-text { line-height: 1.6; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .ticket-blase > footer { margin-top: var(--u-s-4); color: var(--u-text-2); text-align: right; }
:root[data-huelle="glas"] .ticket-blase-kunde { align-self: flex-start; border-top-left-radius: 4px; }
:root[data-huelle="glas"] .ticket-blase-antwort { align-self: flex-end; border-top-right-radius: 4px; background: var(--u-info-bg); box-shadow: inset 0 0 0 1px var(--u-info-line); }
:root[data-huelle="glas"] .ticket-blase-intern { align-self: center; max-width: min(40rem, 90%); background: var(--u-warn-bg); box-shadow: none; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .ticket-blase-vorschlag { align-self: flex-end; border-top-right-radius: 4px; background: var(--u-surface); box-shadow: none; border: 2px dashed var(--u-brand); }
:root[data-huelle="glas"] .ticket-vorschlag-marke { display: inline-flex; align-items: center; gap: var(--u-s-3); padding: 3px 10px 3px 8px; border-radius: 100px; color: var(--u-text-on-brand); background: linear-gradient(110deg, var(--u-akte-reiter-akzent), var(--u-brand)); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .ticket-vorschlag-marke .sym { width: 14px; height: 14px; }
:root[data-huelle="glas"] .ticket-vorschlag-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--u-s-4); margin-top: var(--u-s-6); }
:root[data-huelle="glas"] .ticket-vorschlag-knoepfe .knopf-haupt { background: var(--u-pruef-gruen); border-color: var(--u-pruef-gruen); color: var(--u-knopf-haupt-text); }
:root[data-huelle="glas"] .ticket-vorschlag-hinweis { margin: var(--u-s-4) 0 0; color: var(--u-text-2); font-size: var(--u-t-xs); text-align: right; }
:root[data-huelle="glas"] .ticket-blase-anhaenge { display: flex; flex-wrap: wrap; gap: var(--u-s-3) var(--u-s-6); margin: var(--u-s-5) 0 0; padding: var(--u-s-4) 0 0; border-top: 1px solid var(--u-border-soft); list-style: none; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .ticket-blase-anhaenge .sym { width: 14px; height: 14px; }
:root[data-huelle="glas"] .ticket-chat-system { align-self: center; display: flex; align-items: flex-start; gap: var(--u-s-4); max-width: min(42rem, 92%); padding: var(--u-s-3) var(--u-s-5); border-radius: 10px; color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .ticket-chat-system p { margin: 0; }
:root[data-huelle="glas"] .ticket-chat-system .sym { flex: none; width: 14px; height: 14px; margin-top: 2px; }
:root[data-huelle="glas"] .ticket-chat-system time { flex: none; margin-left: var(--u-s-4); }
:root[data-huelle="glas"] .ticket-chat-eingabe { display: grid; gap: var(--u-s-4); margin-top: var(--u-s-6); padding-top: var(--u-s-6); border-top: 1px solid var(--u-border-soft); }
:root[data-huelle="glas"] .ticket-chat-eingabe textarea { width: 100%; box-sizing: border-box; resize: vertical; }
:root[data-huelle="glas"] .ticket-chat-eingabe .knopfreihe { justify-content: flex-end; }
:root[data-huelle="glas"] .ticket-chat-eingabe p { margin: 0; text-align: right; font-size: var(--u-t-xs); }
@container (width < 40rem) { :root[data-huelle="glas"] .ticket-blase { max-width: 94%; } }
:root[data-huelle="glas"] .ticket-chat-eingabe textarea { font: inherit; }

:root[data-huelle="glas"] .ticket-vorschlag-anhaenge { display: grid; gap: var(--u-s-3); margin: var(--u-s-5) 0 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .ticket-vorschlag-anhaenge li { display: flex; align-items: center; gap: var(--u-s-5); padding: var(--u-s-3) var(--u-s-4); border: 1px solid var(--u-border); border-radius: 10px; background: var(--u-surface-alt); }
:root[data-huelle="glas"] .ticket-vorschlag-anhaenge li > span:nth-child(2) { display: grid; flex: 1; min-width: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .ticket-vorschlag-anhaenge small { color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .ticket-datei-symbol { display: grid; place-items: center; width: 36px; height: 40px; flex: none; border-radius: 6px; background: var(--u-danger-bg); color: var(--u-danger-fg); font-size: var(--u-t-2xs); font-weight: var(--u-w-heavy); letter-spacing: .05em; }
:root[data-huelle="glas"] .ticket-ablage { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--u-s-4); padding: var(--u-s-6); border: 2px dashed var(--u-border-strong); border-radius: 10px; color: var(--u-text-2); font-size: var(--u-t-sm); cursor: pointer; }
:root[data-huelle="glas"] .ticket-ablage input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
:root[data-huelle="glas"] .ticket-ablage .sym { width: 16px; height: 16px; }
:root[data-huelle="glas"] .ticket-belege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-4); font-size: var(--u-t-sm); }

:root[data-huelle="glas"] .ticket-frist-hinweis { display: flex; align-items: center; gap: var(--u-s-4); margin: 0; padding: var(--u-s-4) var(--u-s-5); border-radius: 10px; background: var(--u-warn-bg); color: var(--u-warn-fg); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .ticket-frist-hinweis .sym { flex: none; width: 16px; height: 16px; }
:root[data-huelle="glas"] .ticket-frist-offen { background: var(--u-surface-alt); color: var(--u-text-2); }

/* Auftragsliste: Arbeitsmengen-Kacheln wie Retouren (innerhalb der Akte ohne eigenen Seitenrand). */
:root[data-huelle="glas"] .auftrag-mengen { padding: 0; margin-bottom: var(--u-s-6); }

/* HM3i: Reiterleiste ausgebaut (hu/BAUPLAN_HUELLE_M.md). */
:root[data-huelle="glas"] .fenster-reiter-eintrag.ist-fest { flex: none; }
:root[data-huelle="glas"] .fenster-reiter-eintrag.ist-fest > a { padding: 0 var(--u-s-4); }
:root[data-huelle="glas"] .fenster-reiter-eintrag.ist-fest .fenster-zeichen { color: var(--u-fenster-titel-zeichen); }
:root[data-huelle="glas"] .fenster-reiter-mehr { position: relative; flex: none; align-self: center; margin: 0 0 var(--u-s-2); }
:root[data-huelle="glas"] .fenster-reiter-mehr > summary { display: inline-flex; align-items: center; gap: var(--u-s-2); width: auto; min-width: max(var(--u-s-9), var(--u-ziel-min)); height: max(var(--u-s-9), var(--u-ziel-min)); padding: 0 var(--u-s-3); border-radius: var(--u-r-sm); color: var(--u-fenster-titel-leise); font-size: var(--u-t-sm); font-weight: var(--u-w-medium); }
:root[data-huelle="glas"] .fenster-reiter-mehr > summary:is(:hover, :focus-visible), :root[data-huelle="glas"] .fenster-reiter-mehr[open]:not(.ist-kontext) > summary { background: var(--u-fenster-titel-hover); color: var(--u-fenster-titel-text); }
:root[data-huelle="glas"] .fenster-reiter-zahl { display: inline-grid; place-items: center; min-width: var(--u-s-7); height: var(--u-s-7); padding: 0 var(--u-s-2); border-radius: var(--u-r-full); background: var(--u-brand); color: var(--u-text-on-brand); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .fenster-reiter-mehr > .zeilenmenue-blatt { min-width: 16rem; }
:root[data-huelle="glas"] .fenster-reiter-mehr .zeilenmenue-punkt { text-decoration: none; }
:root[data-huelle="glas"] .fenster-reiter-mehr.ist-kontext > .zeilenmenue-blatt { position: fixed; top: var(--u-kontext-y); right: auto; left: var(--u-kontext-x); }
:root[data-huelle="glas"] .fenster-reiter-mehr.ist-kontext .fenster-reiter-ueberlauf { display: none; }
:root[data-huelle="glas"] .zeilenmenue-linie { height: 1px; margin: var(--u-s-2) 0; background: var(--u-border); }
:root[data-huelle="glas"] .fenster-reiter-tasten { margin: var(--u-s-2) 0 0; padding: var(--u-s-3) var(--u-s-4) var(--u-s-1); border-top: 1px solid var(--u-border-soft); color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .fenster-reiter-tasten span { display: block; line-height: 1.7; }
:root[data-huelle="glas"] .fenster-reiter-tasten kbd { padding: 0 var(--u-s-1); border: 1px solid var(--u-border); border-radius: var(--u-r-xs); font-family: var(--u-font-mono); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-reiter-mehr[open]) { z-index: var(--u-z-menu); }

/* HM4b: Auftragsakte nach Entwurf O2 (hu/BAUPLAN_HUELLE_M.md); Farben nur über Rollen --u-buehne-*, --u-ton-*. */



/* Kennzahlkacheln und Töne */

/* Karten der Akte im Stil O2 */

:root[data-huelle="glas"] .akte-angebote { display: grid; gap: var(--u-s-4); margin: var(--u-s-6) 0 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .akte-angebot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--u-s-5); padding: var(--u-s-5) var(--u-s-6); border: 1px solid var(--u-border); border-radius: 16px; }
:root[data-huelle="glas"] .akte-angebot.ist-best { border-color: var(--u-ton-gruen); box-shadow: 0 0 0 3px var(--u-ton-gruen-bg); }

:root[data-huelle="glas"] .akte-angebot-text, :root[data-huelle="glas"] .akte-angebot-preis { display: grid; min-width: 0; }
:root[data-huelle="glas"] .akte-angebot-preis { text-align: right; font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .akte-angebot small { color: var(--u-text-2); font-size: var(--u-t-xs); }

:root[data-huelle="glas"] .akte-markt { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: var(--u-s-5) 0 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .akte-markt li { display: grid; align-content: start; padding: var(--u-s-2) var(--u-s-5); border-left: 1px solid var(--u-border-soft); }
:root[data-huelle="glas"] .akte-markt li:first-child { padding-left: 0; border: 0; }
:root[data-huelle="glas"] .akte-markt small, :root[data-huelle="glas"] .akte-markt span { color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .akte-markt li[data-ton="gruen"] b { color: var(--u-ton-gruen); }
:root[data-huelle="glas"] .akte-markt li[data-ton="rot"] b { color: var(--u-ton-rot); }
:root[data-huelle="glas"] .akte-posten .person-bild { width: 3.5rem; height: 3.5rem; border-radius: 12px; }
:root[data-huelle="glas"] .akte-posten .akte-chip { display: inline-flex; width: fit-content; margin-top: var(--u-s-2); padding: 0 var(--u-s-3); border-radius: 8px; background: var(--u-ton-orange-bg); color: var(--u-ton-orange); font-weight: var(--u-w-strong); }

/* Vorgang mit Segmentreitern (olymp.js blendet je Fenster eine Tafel ein; ohne Skript stehen alle untereinander) */

/* Seitenspalte: Kunde, Marge */

:root[data-huelle="glas"] .akte-gleich { display: inline-flex; align-items: center; gap: var(--u-s-2); margin: 0; padding: var(--u-s-1) var(--u-s-4); border-radius: 9px; background: var(--u-ton-gruen-bg); color: var(--u-ton-gruen); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .akte-gleich .leise { color: inherit; font-weight: var(--u-w-normal); }

:root[data-huelle="glas"] .akte-marge .rechenleiste i { display: inline-block; width: .6rem; height: .6rem; margin-right: var(--u-s-2); border-radius: 3px; }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .akte-angebot { grid-template-columns: auto minmax(0, 1fr); }
  :root[data-huelle="glas"] .akte-angebot-preis { grid-column: 2; text-align: left; }
  
}

/* HM6A: dieselbe HM3-Liste für weitere Fachbereiche. Der sichtbare Titel steht in der Fenster-Reiterleiste. */
:root[data-huelle="glas"] .glasfenster-koerper:has(> .liste-ansicht) > .glasfenster-titel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .liste-ansicht) > .glasfenster-pfad { display: none; }
:root[data-huelle="glas"] .liste-ansicht .erp-leiste > form.filterzeile { flex: 1 1 26rem; min-width: 0; }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .liste-ansicht .erp-leiste > form.filterzeile { flex-wrap: wrap; }
}

/* HM6B: bestehende Sammel-Packliste auch am Telefon bedienbar; lange Packhinweise bleiben lesbar. */
:root[data-huelle="glas"] .packtisch-liste .erp td.zelle-neben .zeile-neben { white-space: normal; }
@container inhalt (width >= 44rem) {
  :root[data-huelle="glas"] .packtisch-liste .erp td.zelle-neben { min-width: 20rem; }
}
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .packtisch-liste .erp td.zelle-auswahl { display: flex; align-items: center; width: auto; padding: var(--u-s-2); }
}

/* HM5a: Auftragsakte nach Entwurf P3 und Modulleiste (hu/BAUPLAN_HUELLE_M.md). */
/* HM5c: Modulleiste klebt am Fensterkopf, aktiver Reiter geht in sie über; Versatz wächst um ihre Höhe. */
:root[data-huelle="glas"] .glasfenster-koerper:has(> .fensterkopf > .fenster-reiter):has(> .modulleiste) { --u-fensterkopf-h: calc(max(var(--u-s-10), var(--u-ziel-min)) + var(--u-s-3) + 1px + max(var(--u-s-11), var(--u-ziel-min)) + 1px); }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .modulleiste) .fenster-reiter-eintrag[aria-current] { background: var(--u-surface); }
:root[data-huelle="glas"] .modulleiste { position: sticky; top: calc(max(var(--u-s-10), var(--u-ziel-min)) + var(--u-s-3) + 1px); z-index: var(--u-z-sticky); display: flex; align-items: center; gap: var(--u-s-2); height: calc(max(var(--u-s-11), var(--u-ziel-min)) + 1px); padding: 0 var(--u-s-5); border-bottom: 1px solid var(--u-border); background: var(--u-surface); box-shadow: var(--u-e-karte); }
:root[data-huelle="glas"] .modulleiste-seiten { display: flex; flex: 1 1 auto; align-items: center; gap: var(--u-s-1); min-width: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
:root[data-huelle="glas"] .modulleiste-seiten a, :root[data-huelle="glas"] .modulleiste-einstellungen > summary { display: flex; align-items: center; gap: var(--u-s-3); height: max(var(--u-s-10), var(--u-ziel-min)); padding: 0 var(--u-s-4); border-radius: 0; 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"] .modulleiste-seiten a:is(:hover, :focus-visible), :root[data-huelle="glas"] .modulleiste-einstellungen > summary:is(:hover, :focus-visible) { background: var(--u-surface-alt); color: var(--u-text); }
:root[data-huelle="glas"] .modulleiste-seiten a[aria-current="page"] { background: var(--u-brand-wash); color: var(--u-brand-text); font-weight: var(--u-w-strong); box-shadow: inset 3px 0 0 var(--u-brand-text); }
:root[data-huelle="glas"] .modulleiste .sym { width: var(--u-s-6); height: var(--u-s-6); color: var(--u-text-muted); }
:root[data-huelle="glas"] .modulleiste :is(a[aria-current="page"], a:hover, summary:hover) .sym { color: inherit; }
/* Mit Modulleiste trägt sie die Arbeitsmengen; die Reiterzeile der Auftragsliste bleibt nur im Markup (ohne Skript, Prüfungen). */
:root[data-huelle="glas"] .glasfenster-koerper:has(> .modulleiste) .auftrag-reiter { display: none; }
:root[data-huelle="glas"] .modulleiste-zahl { min-width: var(--u-s-7); padding: 0 var(--u-s-2); border-radius: var(--u-r-full); background: var(--u-surface-alt); color: var(--u-text-2); font-size: var(--u-t-2xs); font-variant-numeric: tabular-nums; text-align: center; }
:root[data-huelle="glas"] .modulleiste-seiten a[aria-current="page"] .modulleiste-zahl { background: var(--u-surface); color: var(--u-brand-text); }
:root[data-huelle="glas"] .modulleiste-einstellungen { position: relative; flex: none; }
:root[data-huelle="glas"] .modulleiste:has(.modulleiste-einstellungen[open]) { z-index: var(--u-z-menu); }
:root[data-huelle="glas"] .modulleiste-einstellungen > summary { width: auto; cursor: pointer; }
:root[data-huelle="glas"] .modulleiste-einstellungen[open] > summary { background: var(--u-brand-wash); color: var(--u-text); }
:root[data-huelle="glas"] .modulleiste-einstellungen > .zeilenmenue-blatt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u-s-2) var(--u-s-6); width: min(34rem, 92vw); padding: var(--u-s-5); }
:root[data-huelle="glas"] .modulleiste-gruppe-wort { margin: var(--u-s-2) var(--u-s-3); color: var(--u-text-2); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); letter-spacing: .08em; text-transform: uppercase; }
:root[data-huelle="glas"] .modulleiste-gruppe .zeilenmenue-punkt { text-decoration: none; }
:root[data-huelle="glas"] .modulleiste-gruppe .zeilenmenue-punkt span { display: grid; }
:root[data-huelle="glas"] .modulleiste-gruppe .zeilenmenue-punkt small { color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .modulleiste-fuss { grid-column: 1 / -1; margin: var(--u-s-2) 0 0; padding-top: var(--u-s-3); border-top: 1px solid var(--u-border-soft); color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .modulleiste) > .modulleiste { margin: 0 calc(-1 * var(--u-s-8)) var(--u-s-5); }

/* Kopf (akte_kopf `erp`) */
:root[data-huelle="glas"] .akte-design:not(.akte-panel) > .akte-kopf.akte-erp { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--u-s-3) var(--u-s-6); padding-top: var(--u-s-3); padding-bottom: var(--u-s-4); }
:root[data-huelle="glas"] .akte-erp .akte-symbol { width: var(--u-s-10); height: var(--u-s-10); }
:root[data-huelle="glas"] .akte-erp .akte-name { font-size: var(--u-t-2xl); }
:root[data-huelle="glas"] .akte-erp .akte-satz { display: none; }
:root[data-huelle="glas"] .akte-erp .akte-haupt { display: flex; flex-direction: row; align-items: baseline; gap: var(--u-s-3); }
:root[data-huelle="glas"] .akte-erp .akte-haupt-wert { font-size: var(--u-t-2xl); }
:root[data-huelle="glas"] .akte-erp .akte-knoepfe { grid-column: 1 / 3; }
:root[data-huelle="glas"] .akte-erp .akte-fortschritt { grid-column: 3; display: flex; gap: var(--u-s-2); }
:root[data-huelle="glas"] .akte-erp .akte-fortschritt li { display: flex; align-items: center; padding: var(--u-s-2) var(--u-s-5); border: 1px solid var(--u-border); border-radius: var(--u-r-full); background: var(--u-surface-alt); }
:root[data-huelle="glas"] .akte-erp .akte-fortschritt li small { display: none; }
:root[data-huelle="glas"] .akte-erp .akte-fortschritt b { font-size: var(--u-t-xs); font-weight: var(--u-w-medium); white-space: nowrap; }
:root[data-huelle="glas"] .akte-erp .akte-fortschritt li[data-stand="ok"] { border-color: transparent; background: var(--u-ok-bg); }
:root[data-huelle="glas"] .akte-erp .akte-fortschritt li[data-stand="ok"] b { color: var(--u-ok-fg); }
:root[data-huelle="glas"] .akte-erp .akte-fortschritt li[data-stand="jetzt"] { border-color: var(--u-brand); background: var(--u-brand); }
:root[data-huelle="glas"] .akte-erp .akte-fortschritt li[data-stand="jetzt"] b { color: var(--u-text-on-brand); font-weight: var(--u-w-strong); }

/* Raster: Unternavigation | Inhalt; die Seitenspalte trägt den Chat */
:root[data-huelle="glas"] .akte-design:has(> .akte-erp) .akte-raster { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); }
/* HM5e/g: Akte aus einem Guss. */
:root[data-huelle="glas"] .akte-teil h3 .akte-kunde-link { display: inline-flex; align-items: center; gap: var(--u-s-2); margin-left: var(--u-s-4); font-weight: var(--u-w-normal); letter-spacing: 0; text-transform: none; }
:root[data-huelle="glas"] .akte-kunde-link .sym { width: var(--u-s-7); height: var(--u-s-7); }
:root[data-huelle="glas"] .akte-teil h3:has(.akte-kunde-link) { display: flex; align-items: center; }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .fensterkopf > .fenster-name):has(.akte-erp-raster) { display: flex; flex-direction: column; background-color: var(--u-surface); }
/* HM5i: Seitenspalten bis zum Fensterboden. */
:root[data-huelle="glas"] .glasfenster-koerper:has(.akte-erp-raster) > * { flex-shrink: 0; }
:root[data-huelle="glas"] .akte-design:has(> .akte-erp) { flex: 1 0 auto; }
:root[data-huelle="glas"] .akte-design:has(> .akte-erp) :is(.akte-raster, .akte-inhalt) { flex: 1 0 auto; display: grid; align-items: stretch; }
:root[data-huelle="glas"] .akte-erp-raster { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--u-s-8); }
:root[data-huelle="glas"] .akte-unternav { margin: 0 0 calc(-1 * var(--u-s-8)) calc(-1 * var(--u-s-8)); padding: var(--u-s-5) var(--u-s-3) var(--u-s-5) var(--u-s-6); border-right: 1px solid var(--u-border-soft); background: var(--u-surface-alt); }
:root[data-huelle="glas"] .akte-unternav > * { position: sticky; top: calc(var(--u-fensterkopf-h) + var(--u-s-4)); }
:root[data-huelle="glas"] .akte-unternav-wort { margin: 0 0 var(--u-s-3); padding: 0 var(--u-s-3); font-size: var(--u-t-md); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .akte-unternav ul { top: calc(var(--u-fensterkopf-h) + var(--u-s-11)); display: grid; gap: var(--u-s-1); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .akte-unternav a { display: flex; align-items: center; gap: var(--u-s-4); min-height: max(var(--u-s-11), var(--u-ziel-min)); padding: 0 var(--u-s-4); border-radius: 0; color: var(--u-text-2); font-size: var(--u-t-sm); text-decoration: none; }
:root[data-huelle="glas"] .akte-unternav a:is(:hover, :focus-visible) { background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .akte-unternav a[aria-current="true"] { background: var(--u-surface); color: var(--u-brand-text); font-weight: var(--u-w-strong); box-shadow: inset 3px 0 0 var(--u-brand-text), var(--u-e-karte); }
:root[data-huelle="glas"] .akte-unternav .sym { flex: none; width: var(--u-s-7); height: var(--u-s-7); color: var(--u-text-muted); }
:root[data-huelle="glas"] .akte-unternav a:is([aria-current="true"], :hover) .sym { color: inherit; }
:root[data-huelle="glas"] .akte-unternav-zahl { margin-left: auto; min-width: var(--u-s-7); padding: 0 var(--u-s-2); border-radius: var(--u-r-full); background: var(--u-surface); color: var(--u-text-2); font-size: var(--u-t-2xs); font-variant-numeric: tabular-nums; text-align: center; }
:root[data-huelle="glas"] .akte-unternav a[aria-current="true"] .akte-unternav-zahl { background: var(--u-brand-wash); color: var(--u-brand-text); }
:root[data-huelle="glas"] .akte-design:has(> .akte-erp) { gap: 0; }
:root[data-huelle="glas"] .akte-erp-inhalt { display: grid; gap: var(--u-s-8); min-width: 0; padding-top: var(--u-s-5); }
:root[data-huelle="glas"] .akte-erp-inhalt > [data-tafel]:not([hidden]) { display: grid; gap: var(--u-s-8); min-width: 0; }
:root[data-huelle="glas"] .akte-abschnitt { margin: 0; padding: 0; scroll-margin-top: calc(var(--u-fensterkopf-h) + var(--u-s-4)); }
:root[data-huelle="glas"] .akte-abschnitt-kopf { display: flex; align-items: center; gap: var(--u-s-4); min-height: 2.75rem; border-bottom: 1px solid var(--u-border); }
:root[data-huelle="glas"] .akte-abschnitt-kopf h2 { display: flex; align-items: center; gap: var(--u-s-3); margin: 0; padding: 0; border: 0; font-size: var(--u-t-md); }
:root[data-huelle="glas"] .akte-abschnitt-kopf h2 small { color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-normal); }
:root[data-huelle="glas"] .akte-abschnitt-kopf .knopf { margin-left: auto; }
:root[data-huelle="glas"] .akte-teile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--u-s-8); }
:root[data-huelle="glas"] .akte-teil { min-width: 0; padding: var(--u-s-5) 0 var(--u-s-2); }
:root[data-huelle="glas"] .akte-teil h3 { margin: 0 0 var(--u-s-3); color: var(--u-text-2); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); letter-spacing: .08em; text-transform: uppercase; }
:root[data-huelle="glas"] .akte-zeilen { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); margin: 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .akte-zeilen dt, :root[data-huelle="glas"] .akte-zeilen dd { min-width: 0; padding: var(--u-s-2) 0; border-bottom: 1px dashed var(--u-border-soft); }
:root[data-huelle="glas"] .akte-zeilen dt { color: var(--u-text-2); }
:root[data-huelle="glas"] .akte-zeilen dd { margin: 0; color: var(--u-text); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .akte-paar-p3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--u-s-6); align-items: start; }
:root[data-huelle="glas"] .akte-abschnitt .rechenleiste { padding: var(--u-s-3) 0 var(--u-s-4); }
:root[data-huelle="glas"] .akte-zahlart { display: flex; align-items: center; gap: var(--u-s-3); margin-bottom: var(--u-s-5); color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .akte-abschnitt .akte-lauf { padding-block: var(--u-s-4); }
/* HM5h: unterhalb der Positionen dieselbe Ordnung — verschachtelte Karten flach, ihr Titel wie „BESTELLUNG“; eine Karte ohne
   Abschnittskopf (Rechnung) bekommt den Abschnittskopf; Preisverlauf Diagramm | Legende; Margenrechnung als ruhige Zeilen. */
:root[data-huelle="glas"] :is(.akte-erp-inhalt [data-tafel] > .karte:not(.akte-abschnitt), .akte-erp-inhalt .akte-abschnitt .karte) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-huelle="glas"] .akte-erp-inhalt [data-tafel] > .karte:not(.akte-abschnitt) > h2 { display: flex; align-items: center; min-height: 2.75rem; margin: 0 0 var(--u-s-4); padding: 0; border-bottom: 1px solid var(--u-border); font-size: var(--u-t-md); }
:root[data-huelle="glas"] .akte-erp-inhalt .akte-abschnitt :is(.karte, section) > :is(h2, h3) { margin: var(--u-s-6) 0 var(--u-s-3); padding: 0; border: 0; color: var(--u-text-2); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); letter-spacing: .08em; text-transform: uppercase; }
:root[data-huelle="glas"] .akte-erp-inhalt .karte:has(> svg) { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); column-gap: var(--u-s-8); align-items: center; }
:root[data-huelle="glas"] .akte-erp-inhalt .karte:has(> svg) > :not(svg, dl) { grid-column: 1 / -1; }
:root[data-huelle="glas"] .akte-erp-inhalt .karte > svg { height: 11rem; }
:root[data-huelle="glas"] .akte-erp-inhalt .karte > p.leise { margin: var(--u-s-2) 0; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .akte-erp-inhalt .rechenleiste :is(dt, dd) { margin: 0; padding: var(--u-s-2) 0; border-bottom: 1px dashed var(--u-border-soft); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .akte-erp-inhalt .rechenleiste dt small { display: inline; margin-left: var(--u-s-3); }
:root[data-huelle="glas"] .akte-erp-inhalt .rechenleiste .rechenleiste-summe { border-bottom: 0; }
:root[data-huelle="glas"] .akte-erp-inhalt .rechenleiste { gap: 0; align-items: stretch; }
:root[data-huelle="glas"] .akte-erp-inhalt .auftrag-quelldetails { padding: var(--u-s-4) 0 0; border: 0; background: none; }
:root[data-huelle="glas"] .akte-erp-inhalt .karte > .zeilenkarten-rahmen { margin: 0 0 var(--u-s-4); }
:root[data-huelle="glas"] .akte-erp-inhalt .karte > .zeilenkarten-rahmen > .erp { border: 1px solid var(--u-border-soft); border-radius: var(--u-r-sm); }
:root[data-huelle="glas"] .akte-erp-inhalt .retoure-erfassen:not([open]) { display: inline-block; border: 1px solid var(--u-border); border-radius: var(--u-r-sm); }
:root[data-huelle="glas"] .akte-erp-inhalt .retoure-erfassen:not([open]) > summary { padding: var(--u-s-3) var(--u-s-5); font-weight: var(--u-w-medium); }
:root[data-huelle="glas"] .akte-erp .akte-kopf-text > .akte-hinweis-zeile { grid-area: kennung; justify-self: start; }

/* Agentenchat in der Seitenspalte */
:root[data-huelle="glas"] .akte-design:has(> .akte-erp) .akte-seite { align-self: stretch; margin: 0 calc(-1 * var(--u-s-8)) calc(-1 * var(--u-s-8)) 0; padding: var(--u-s-5) var(--u-s-6); border-left: 1px solid var(--u-border-soft); background: var(--u-surface-alt); }
:root[data-huelle="glas"] .akte-chat { position: sticky; top: calc(var(--u-fensterkopf-h) + var(--u-s-5)); display: flex; flex-direction: column; margin: 0; padding: 0; background: none; }
:root[data-huelle="glas"] .akte-chat-kopf { display: flex; align-items: center; gap: var(--u-s-4); padding-bottom: var(--u-s-4); border-bottom: 1px solid var(--u-border); }
:root[data-huelle="glas"] .akte-chat-kopf img, :root[data-huelle="glas"] .akte-chat-bild { width: 2.25rem; height: 2.25rem; border-radius: var(--u-r-full); }
:root[data-huelle="glas"] .akte-chat-bild { display: grid; place-items: center; background: var(--u-brand-wash); color: var(--u-brand-text); }
:root[data-huelle="glas"] .akte-chat-kopf h2 { display: grid; margin: 0; padding: 0; border: 0; font-size: var(--u-t-md); }
:root[data-huelle="glas"] .akte-chat-kopf h2 small { color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-normal); }
:root[data-huelle="glas"] .akte-chat-kontext { display: flex; align-items: center; gap: var(--u-s-2); margin: var(--u-s-4) 0 0; padding: var(--u-s-2) var(--u-s-4); border: 1px solid var(--u-border); border-radius: var(--u-r-sm); background: var(--u-surface-alt); color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .akte-chat-verlauf { padding: var(--u-s-5) 0; }
:root[data-huelle="glas"] .akte-chat-nachricht { padding: var(--u-s-4) var(--u-s-5); border: 1px solid var(--u-border-soft); border-radius: var(--u-r-lg) var(--u-r-lg) var(--u-r-lg) var(--u-r-xs); background: var(--u-surface-alt); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .akte-chat-nachricht .akte-agent-satz { margin: 0; }
:root[data-huelle="glas"] .akte-chat .akte-angebot { grid-template-columns: minmax(0, 1fr) auto; padding: var(--u-s-3) var(--u-s-4); background: var(--u-surface); }
:root[data-huelle="glas"] .akte-chat .akte-angebote { margin-top: var(--u-s-4); }
:root[data-huelle="glas"] .akte-chat .knopfreihe { margin: var(--u-s-4) 0 0; }
:root[data-huelle="glas"] .akte-chat-eingabe { display: grid; gap: var(--u-s-3); margin: 0; padding: var(--u-s-4) 0 0; border-top: 1px solid var(--u-border-soft); }
:root[data-huelle="glas"] .akte-chat-eingabe p { margin: 0; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .akte-chat-eingabe .knopf { justify-content: center; }
@container inhalt (width < 60rem) {
  :root[data-huelle="glas"] .akte-erp-raster { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .akte-design:has(> .akte-erp) .akte-raster { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] :is(.akte-unternav, .akte-design:has(> .akte-erp) .akte-seite) { margin: 0; border: 0; }
  :root[data-huelle="glas"] .akte-unternav > *, :root[data-huelle="glas"] .akte-chat { position: static; }
  :root[data-huelle="glas"] .akte-unternav ul { display: flex; overflow-x: auto; }
  :root[data-huelle="glas"] .akte-unternav a { white-space: nowrap; }
  :root[data-huelle="glas"] .akte-design:not(.akte-panel) > .akte-kopf.akte-erp { grid-template-columns: auto minmax(0, 1fr); }
  :root[data-huelle="glas"] .akte-erp .akte-knoepfe, :root[data-huelle="glas"] .akte-erp .akte-fortschritt { grid-column: 1 / -1; }
  :root[data-huelle="glas"] .akte-erp .akte-fortschritt { overflow-x: auto; }
}
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .akte-teile { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .akte-zeilen { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .akte-zeilen dt { padding-bottom: 0; border-bottom: 0; font-size: var(--u-t-xs); }
  :root[data-huelle="glas"] .modulleiste-einstellungen > .zeilenmenue-blatt { grid-template-columns: minmax(0, 1fr); }
}

/* HM6D: kompakte Listenhinweise und vollständiger Protokollkontext; vorhandene HM3-Flächen bleiben das Grundraster. */
:root[data-huelle="glas"] .liste-ansicht .liste-hinweis { margin-block: var(--u-s-2); color: var(--u-text-2); }
:root[data-huelle="glas"] .liste-ansicht .liste-flaeche > h2 { padding: var(--u-s-3) var(--u-s-4); margin: 0; }
:root[data-huelle="glas"] .zeile-details { position: relative; z-index: var(--u-z-zeile); margin-top: var(--u-s-1); }
:root[data-huelle="glas"] .zeile-details pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60ch; color: var(--u-text); }
:root[data-huelle="glas"] .akte-design .karte:is(.akte-abschnitt, .akte-chat) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root[data-huelle="glas"] .akte-design .karte.akte-abschnitt > .zeilenkarten-rahmen { margin: 0; }
:root[data-huelle="glas"] .akte-design .karte.akte-abschnitt > .zeilenkarten-rahmen:last-child { margin-bottom: 0; }
:root[data-huelle="glas"] .akte-design .karte.akte-abschnitt > section { margin-inline: 0; }

/* HM10 AB:root[data-huelle="glas"]ESTIMMTE ÜBER:root[data-huelle="glas"]ÄN:root[data-huelle="glas"]E (Manuel 11.10.2026): beim Seitenwechsel stehen Kopfleiste, Reiter- und Modulleiste still (feste Namen),
   der Fensterinhalt (Klasse hm-inhalt, olymp.js inhaltBenennen()) gleitet — vorwärts von rechts, zurück von links. Die Markierung der
   Modulleiste wandert. Tafeln blenden ein, Aufklapper öffnen weich, beim Warten läuft oben ein Ladebalken. Alles × --u-bewegung. */
:root[data-huelle="glas"] .kopfleiste { view-transition-name: hm-kopf; }
:root[data-huelle="glas"] .fensterkopf:has(> .fenster-reiter) { view-transition-name: hm-reiter; }
:root[data-huelle="glas"] .modulleiste { view-transition-name: hm-modul; }
:root[data-huelle="glas"] .modulleiste-seiten a[aria-current="page"] { view-transition-name: hm-modul-aktiv; }
:root[data-huelle="glas"]::view-transition-group(hm-modul-aktiv) { animation-duration: calc(var(--u-dur-3) * var(--u-bewegung)); animation-timing-function: var(--u-ease); }
:root[data-huelle="glas"]::view-transition-old(*.hm-inhalt) { animation: huelle-inhalt-raus calc(var(--u-dur-2) * var(--u-bewegung)) var(--u-ease-in) both; }
:root[data-huelle="glas"]::view-transition-new(*.hm-inhalt) { animation: huelle-inhalt-rein calc(var(--u-dur-3) * var(--u-bewegung)) var(--u-ease) both; }
:root[data-huelle="glas"]:active-view-transition-type(zurueck)::view-transition-old(*.hm-inhalt) { animation-name: huelle-inhalt-raus-zurueck; }
:root[data-huelle="glas"]:active-view-transition-type(zurueck)::view-transition-new(*.hm-inhalt) { animation-name: huelle-inhalt-rein-zurueck; }
:root[data-huelle="glas"]:active-view-transition-type(gleich)::view-transition-old(*.hm-inhalt) { animation-name: huelle-inhalt-blende-raus; }
:root[data-huelle="glas"]:active-view-transition-type(gleich)::view-transition-new(*.hm-inhalt) { animation-name: huelle-inhalt-blende-rein; }
@keyframes huelle-inhalt-blende-raus { to { opacity: 0; } }
@keyframes huelle-inhalt-blende-rein { from { opacity: 0; } }
@keyframes huelle-inhalt-raus { to { opacity: 0; transform: translateX(calc(-8px * var(--u-bewegung))); } }
@keyframes huelle-inhalt-rein { from { opacity: 0; transform: translateX(calc(14px * var(--u-bewegung))); } }
@keyframes huelle-inhalt-raus-zurueck { to { opacity: 0; transform: translateX(calc(8px * var(--u-bewegung))); } }
@keyframes huelle-inhalt-rein-zurueck { from { opacity: 0; transform: translateX(calc(-14px * var(--u-bewegung))); } }
:root[data-huelle="glas"] [data-tafeln-an] .akte-erp-inhalt > [data-tafel][data-eingeblendet]:not([hidden]) { animation: huelle-tafel-ein calc(var(--u-dur-3) * var(--u-bewegung)) var(--u-ease); }
@keyframes huelle-tafel-ein { from { opacity: 0; transform: translateY(calc(6px * var(--u-bewegung))); } }
:root[data-huelle="glas"] .zeilenmenue[open] > .zeilenmenue-blatt { animation: huelle-blatt-auf calc(var(--u-dur-2) * var(--u-bewegung)) var(--u-ease); transform-origin: top right; }
@keyframes huelle-blatt-auf { from { opacity: 0; transform: scale(.98) translateY(calc(-4px * var(--u-bewegung))); } }
:root[data-huelle="glas"] main.glasfenster[aria-busy="true"]::after { content: ""; position: fixed; z-index: var(--u-z-menu); top: var(--u-topbar-h); left: 0; width: 100%; height: 2px; background: var(--u-brand); transform-origin: left; animation: huelle-laden calc(var(--u-dur-6) * var(--u-bewegung)) var(--u-ease) calc(var(--u-dur-2) * var(--u-bewegung)) both; }
@keyframes huelle-laden { from { transform: scaleX(0); } to { transform: scaleX(.85); } }

/* HM11: Tafeln bleiben am oberen Rand. Das bis zum Fensterboden gestreckte Aktenraster darf kurze Hinweise und einzelne Abschnitte nicht auf die Resthöhe verteilen. */
:root[data-huelle="glas"] .akte-erp-inhalt > [data-tafel]:not([hidden]) { align-content: start; align-items: start; }
/* Der Fensterkörper hat am Telefon den kleineren Innenrand; die Modulleiste bleibt bündig. */
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .glasfenster-koerper:has(.akte-erp-raster) > .modulleiste { margin-inline: calc(-1 * var(--u-s-5)); }
}
/* Vorlesetexte bleiben im jeweiligen Reiterknopf, auch wenn weitere Reiter seitlich aus dem sichtbaren Streifen rücken. */
:root[data-huelle="glas"] .glasfenster-koerper:has(.akte-erp-raster) .fenster-reiter-knopf { position: relative; }
/* Lange Plattformkennungen dürfen den Mindestinhalt einer Tafel nicht verbreitern. */
:root[data-huelle="glas"] .akte-erp-inhalt > [data-tafel] > .akte-abschnitt { min-width: 0; overflow-wrap: anywhere; }
/* Untereinander stehende Leiste und Seitenspalte bekommen am Telefon nur ihre Inhaltshöhe. */
@container inhalt (width < 60rem) {
  :root[data-huelle="glas"] .akte-design:has(> .akte-erp) :is(.akte-raster, .akte-erp-raster) { align-content: start; }
}
/* Die Packbestätigung bleibt neben der umbrechenden Artikelbeschreibung lesbar. */
:root[data-huelle="glas"] .akte-erp-inhalt [data-tafel="packen"] .person > span:has(> input[type="checkbox"]) { flex-shrink: 0; }

/* HM14a (tricoma-Einstellungen, 11.10.2026): der Verwaltungsrahmen als feste Spalte links (Gruppen als Aufklapper, die aktuelle offen),
   rechts der Inhalt — dieselbe getönte, bündige Spalte wie die Unternavigation der Akten. Schmal: Spalte oben, ohne Rahmenlinie. */
:root[data-huelle="glas"] .verwaltung-raster { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--u-s-8); min-height: 100%; }
:root[data-huelle="glas"] .verwaltung-nav { margin: 0 0 calc(-1 * var(--u-s-8)) calc(-1 * var(--u-s-8)); padding: var(--u-s-5) var(--u-s-3) var(--u-s-5) var(--u-s-6); border-right: 1px solid var(--u-border-soft); background: var(--u-surface-alt); }
:root[data-huelle="glas"] .verwaltung-nav-wort { margin: 0 0 var(--u-s-3); padding: 0 var(--u-s-3); font-size: var(--u-t-md); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .verwaltung-gruppe summary { display: flex; align-items: center; gap: var(--u-s-4); min-height: max(var(--u-s-11), var(--u-ziel-min)); padding: 0 var(--u-s-4); color: var(--u-text); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); list-style: none; cursor: pointer; }
:root[data-huelle="glas"] .verwaltung-gruppe summary::-webkit-details-marker { display: none; }
:root[data-huelle="glas"] .verwaltung-gruppe summary:is(:hover, :focus-visible) { background: var(--u-surface); }
:root[data-huelle="glas"] .verwaltung-gruppe .sym { flex: none; width: var(--u-s-7); height: var(--u-s-7); color: var(--u-text-muted); }
:root[data-huelle="glas"] .verwaltung-gruppe summary[aria-current] .sym { color: var(--u-brand-text); }
:root[data-huelle="glas"] .verwaltung-gruppe ul { display: grid; gap: 0; margin: 0 0 var(--u-s-3); padding: 0; list-style: none; }
:root[data-huelle="glas"] .verwaltung-gruppe a { display: flex; align-items: center; min-height: var(--u-ziel-min); padding: var(--u-s-1) var(--u-s-4) var(--u-s-1) calc(var(--u-s-4) + var(--u-s-7) + var(--u-s-4)); color: var(--u-text-2); font-size: var(--u-t-sm); text-decoration: none; }
:root[data-huelle="glas"] .verwaltung-gruppe a:is(:hover, :focus-visible) { background: var(--u-surface); color: var(--u-text); }
:root[data-huelle="glas"] .verwaltung-gruppe a[aria-current="page"] { background: var(--u-surface); color: var(--u-brand-text); font-weight: var(--u-w-strong); box-shadow: inset 3px 0 0 var(--u-brand-text), var(--u-e-karte); }
:root[data-huelle="glas"] .verwaltung-inhalt { min-width: 0; padding-top: var(--u-s-5); }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .verwaltung-raster) > .glasfenster-pfad { display: none; }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .verwaltung-raster) > .glasfenster-titel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container inhalt (width < 60rem) {
  :root[data-huelle="glas"] .verwaltung-raster { grid-template-columns: minmax(0, 1fr); gap: var(--u-s-4); }
  :root[data-huelle="glas"] .verwaltung-nav { margin: 0; border: 0; }
  :root[data-huelle="glas"] :is(.verwaltung-nav-wort, .verwaltung-gruppe:not(:has(> summary[aria-current]))) { display: none; }
  :root[data-huelle="glas"] .verwaltung-gruppe ul { display: flex; overflow-x: auto; margin: 0; }
  :root[data-huelle="glas"] .verwaltung-gruppe a { padding-inline: var(--u-s-4); white-space: nowrap; }
}

/* Offene Posten nach dem Bildentwurf (Plan „Bank + Offene Posten nativ“, Oberfläche): Summen, Reiter nach „wer handelt“ mit Zählern,
   Altersleiste (SVG, Breiten als Attribute — die Sicherheitsrichtlinie lässt keinen Inline-Stil zu), Kette als Punkte, Vorschau und Akte.
   Nur --u-*-Rollen; die Reiter heißen nicht auftrag-reiter, weil die Hülle jene unter der Modulleiste ausblendet. */
:root[data-huelle="glas"] .opos-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--u-s-3) var(--u-s-6); margin: 0 0 var(--u-s-3); }
:root[data-huelle="glas"] .opos-summen { display: flex; gap: var(--u-s-8); margin: 0 auto 0 0; }
:root[data-huelle="glas"] .opos-summen dt { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .opos-summen dd { margin: 0; font-size: var(--u-t-xl); font-weight: var(--u-w-titel); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .opos-reiter { display: flex; align-items: center; gap: var(--u-s-1); margin: 0; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--u-border); scrollbar-width: none; }
:root[data-huelle="glas"] .opos-reiter-wahl { position: relative; display: inline-flex; flex: none; align-items: center; gap: var(--u-s-3); min-height: max(var(--u-s-11), var(--u-ziel-min)); padding: 0 var(--u-s-4); 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"] .opos-reiter-wahl:is(:hover, :focus-visible) { color: var(--u-text); }
:root[data-huelle="glas"] .opos-reiter-wahl[aria-current="true"] { color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .opos-reiter-wahl[aria-current="true"]::after { content: ""; position: absolute; inset: auto var(--u-s-3) 0; height: 2px; border-radius: var(--u-r-xs); background: var(--u-brand-text); }
:root[data-huelle="glas"] .opos-zahl { min-width: var(--u-s-9); padding: 0 var(--u-s-2); border-radius: var(--u-r-full); background: var(--u-surface-alt); color: var(--u-text-2); font-size: var(--u-t-2xs); font-variant-numeric: tabular-nums; line-height: 1.6; text-align: center; }
:root[data-huelle="glas"] .opos-zahl[data-art="warn"] { background: var(--u-warn-bg); color: var(--u-warn-fg); }
:root[data-huelle="glas"] .opos-zahl[data-art="gefahr"] { background: var(--u-danger-bg); color: var(--u-danger-fg); }
:root[data-huelle="glas"] .opos-zahl[data-art="hinweis"] { background: var(--u-info-bg); color: var(--u-info-fg); }
:root[data-huelle="glas"] .opos-reiter-wahl[aria-current="true"] .opos-zahl { background: var(--u-knopf-haupt); color: var(--u-knopf-haupt-text); }
:root[data-huelle="glas"] .opos-trenner { flex: none; width: 1px; height: var(--u-s-8); margin: 0 var(--u-s-2); background: var(--u-border); }
:root[data-huelle="glas"] .opos-legende { display: flex; flex-wrap: wrap; gap: var(--u-s-2) var(--u-s-3); margin: var(--u-s-3) 0 var(--u-s-4); font-size: var(--u-t-2xs); }
:root[data-huelle="glas"] .opos-alter { display: grid; gap: var(--u-s-3); margin: 0 0 var(--u-s-5); padding: var(--u-s-4) 0 0; }
:root[data-huelle="glas"] .opos-alter > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--u-s-3) var(--u-s-5); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .opos-alter > header span { color: var(--u-text-muted); font-size: var(--u-t-xs); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .opos-alter-leiste { display: block; width: 100%; height: var(--u-s-3); }
:root[data-huelle="glas"] .opos-alter :is(rect, i)[data-stufe="0-7"], :root[data-huelle="glas"] .opos-alter [data-stufe="0-7"] i { fill: var(--u-ok); background: var(--u-ok); }
:root[data-huelle="glas"] .opos-alter :is(rect, i)[data-stufe="8-14"], :root[data-huelle="glas"] .opos-alter [data-stufe="8-14"] i { fill: var(--u-ton-tuerkis); background: var(--u-ton-tuerkis); }
:root[data-huelle="glas"] .opos-alter :is(rect, i)[data-stufe="15-30"], :root[data-huelle="glas"] .opos-alter [data-stufe="15-30"] i { fill: var(--u-warn); background: var(--u-warn); }
:root[data-huelle="glas"] .opos-alter :is(rect, i)[data-stufe="31-60"], :root[data-huelle="glas"] .opos-alter [data-stufe="31-60"] i { fill: var(--u-ton-orange); background: var(--u-ton-orange); }
:root[data-huelle="glas"] .opos-alter :is(rect, i)[data-stufe="ueber60"], :root[data-huelle="glas"] .opos-alter [data-stufe="ueber60"] i { fill: var(--u-danger); background: var(--u-danger); }
:root[data-huelle="glas"] .opos-alter-stufen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--u-s-2); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .opos-alter-stufen a { display: grid; gap: var(--u-s-1); padding: var(--u-s-2) var(--u-s-3); border: 1px solid transparent; border-radius: var(--u-r-sm); color: var(--u-text-2); font-size: var(--u-t-xs); font-variant-numeric: tabular-nums; text-decoration: none; }
:root[data-huelle="glas"] .opos-alter-stufen a:is(:hover, :focus-visible) { background: var(--u-surface-alt); color: var(--u-text); }
:root[data-huelle="glas"] .opos-alter-stufen a[aria-current="true"] { border-color: var(--u-brand-line); background: var(--u-brand-wash); color: var(--u-text); }
:root[data-huelle="glas"] .opos-alter-stufen b { display: inline-flex; align-items: center; gap: var(--u-s-2); color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .opos-alter-stufen i { flex: none; width: var(--u-s-3); height: var(--u-s-3); border-radius: var(--u-r-xs); }
:root[data-huelle="glas"] .opos-liste .opos-chips { flex: 0 1 auto; min-width: 0; }
:root[data-huelle="glas"] .opos-liste .erp td:is([data-titel="Alter"], [data-titel="Rest"]) { white-space: nowrap; }
:root[data-huelle="glas"] .opos-rf .erp td[data-titel="Grund"] { min-width: 22rem; }
:root[data-huelle="glas"] .opos-liste .erp .person-bild { width: var(--u-s-8); height: var(--u-s-8); font-size: var(--u-t-2xs); }
:root[data-huelle="glas"] .opos-liste .erp .zelle-neben .leise { white-space: nowrap; }
/* Die Spalte „Kette“ weicht der offenen Vorschau nur, wo der Platz fehlt (H7: ab etwa 1600 px Fensterbreite stehen beide). */
@container inhalt (width < 90rem) {
  :root[data-huelle="glas"] [data-vorschau-offen].opos-liste .erp[data-folge="eigen"] :is(th, td):nth-child(6) { display: none; }
}
:root[data-huelle="glas"] .opos-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--u-s-3); margin: 0; padding: var(--u-s-3) var(--u-s-6); border-top: 1px solid var(--u-border-soft); color: var(--u-text-muted); font-size: var(--u-t-xs); }
/* Die Kette als Punkte mit Verbindern (Zellfeld `kette` des Tabellenbausteins): gefüllt = belegt, Ring = offen, gelb/rot = dort handeln. */
:root[data-huelle="glas"] .zeile-kette { display: inline-flex; align-items: center; margin-right: var(--u-s-3); vertical-align: middle; }
:root[data-huelle="glas"] .zeile-kette i { flex: none; width: var(--u-s-3); height: var(--u-s-3); border: 1.5px solid var(--u-ok); border-radius: var(--u-r-full); background: var(--u-ok); }
:root[data-huelle="glas"] .zeile-kette i[data-stand="offen"] { border-color: var(--u-text-faint); background: transparent; }
:root[data-huelle="glas"] .zeile-kette i[data-stand="leer"] { border-style: dashed; border-color: var(--u-border-strong); background: transparent; }
:root[data-huelle="glas"] .zeile-kette i[data-stand="warn"] { border-color: var(--u-warn); background: var(--u-warn); }
:root[data-huelle="glas"] .zeile-kette i[data-stand="gefahr"] { border-color: var(--u-danger); background: var(--u-danger); }
:root[data-huelle="glas"] .zeile-kette b { flex: none; width: var(--u-s-3); height: 1px; background: var(--u-border-strong); }
/* Rechnung fehlt: das Band nennt Anzahl und Summe genau der Zeilen. */
:root[data-huelle="glas"] .opos-rf { display: grid; gap: var(--u-s-4); }
:root[data-huelle="glas"] .opos-hinweisband { padding: var(--u-s-4) var(--u-s-5); border: 1px solid var(--u-warn-line); border-radius: var(--u-r-md); background: var(--u-warn-bg); color: var(--u-text); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .opos-hinweisband p { margin: 0; }
/* Kette senkrecht (Vorschau und Akte). */
:root[data-huelle="glas"] .opos-kette-v { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .opos-kette-v li { position: relative; display: grid; grid-template-columns: var(--u-s-7) minmax(0, 1fr); gap: var(--u-s-3); padding: 0 0 var(--u-s-4); }
:root[data-huelle="glas"] .opos-kette-v li:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--u-s-7) / 2 - 1px); top: var(--u-s-6); bottom: 0; width: 2px; background: var(--u-border); }
:root[data-huelle="glas"] .opos-kette-punkt { width: var(--u-s-7); height: var(--u-s-7); border: 2px solid var(--u-ok); border-radius: var(--u-r-full); background: var(--u-ok-bg); }
:root[data-huelle="glas"] .opos-kette-v li[data-stand="offen"] .opos-kette-punkt { border-color: var(--u-text-faint); background: var(--u-surface); }
:root[data-huelle="glas"] .opos-kette-v li[data-stand="leer"] .opos-kette-punkt { border-style: dashed; border-color: var(--u-border-strong); background: var(--u-surface); }
:root[data-huelle="glas"] .opos-kette-v li[data-stand="warn"] .opos-kette-punkt { border-color: var(--u-warn); background: var(--u-warn-bg); }
:root[data-huelle="glas"] .opos-kette-v li[data-stand="gefahr"] .opos-kette-punkt { border-color: var(--u-danger); background: var(--u-danger-bg); }
:root[data-huelle="glas"] .opos-kette-text { display: grid; min-width: 0; }
:root[data-huelle="glas"] .opos-kette-text b { font-weight: var(--u-w-strong); overflow-wrap: anywhere; }
:root[data-huelle="glas"] .opos-kette-text small { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .opos-vorschau-rest { display: grid; margin: 0; padding: 0 var(--u-s-6) var(--u-s-4); }
:root[data-huelle="glas"] .opos-vorschau-rest b { font-size: var(--u-t-xl); font-weight: var(--u-w-titel); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .opos-vorschau-rest small, :root[data-huelle="glas"] .opos-schritt small { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .opos-schritt { display: grid; margin: 0 0 var(--u-s-2); }
:root[data-huelle="glas"] .opos-karte { display: grid; gap: var(--u-s-2); margin-top: var(--u-s-3); padding: var(--u-s-4); border: 1px solid var(--u-border); border-radius: var(--u-r-md); background: var(--u-surface); }
:root[data-huelle="glas"] .opos-karte p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3); margin: 0; }
:root[data-huelle="glas"] .opos-karte .knopf { justify-self: start; }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .opos-summen { gap: var(--u-s-5); }
  :root[data-huelle="glas"] .opos-summen dd { font-size: var(--u-t-lg); }
  :root[data-huelle="glas"] .opos-alter-stufen { gap: var(--u-s-1); }
  :root[data-huelle="glas"] .opos-alter-stufen a { padding: var(--u-s-1); }
  :root[data-huelle="glas"] .opos-alter-betrag { display: none; }
}

/* „Vorbereitet“ (12.10.2026): Agenten-Vorschläge mit Sammelfreigabe. Ruhig, dicht, eine Akzentfarbe (Sparte „vorbereitet“). */
:root[data-huelle="glas"] .vb { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u-s-5); padding: var(--u-s-5) var(--u-s-8) var(--u-s-8); container-type: inline-size; }
:root[data-huelle="glas"] .vb-einordnung { margin: 0; color: var(--u-text-2); font-size: var(--u-t-sm); max-width: 70ch; }
:root[data-huelle="glas"] .vb-filter { display: flex; flex-wrap: wrap; gap: .4rem; }
:root[data-huelle="glas"] .vb-filterknopf { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border: 1px solid var(--u-border-soft); border-radius: var(--u-r-full); color: var(--u-text); text-decoration: none; font-size: var(--u-t-sm); background: var(--u-surface); }
:root[data-huelle="glas"] .vb-filterknopf small { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .vb-filterknopf[aria-current="page"] { border-color: var(--u-sparte-vorbereitet); box-shadow: inset 0 0 0 1px var(--u-sparte-vorbereitet); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .vb-agenten { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--u-s-3); }
:root[data-huelle="glas"] .vb-agentkachel { display: grid; gap: .5rem; padding: var(--u-s-4); border: 1px solid var(--u-border-soft); border-radius: var(--u-r-md); background: var(--u-surface); }
:root[data-huelle="glas"] .vb-agentkachel dl { display: flex; gap: 1.5rem; margin: 0; }
:root[data-huelle="glas"] .vb-agentkachel dt { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .vb-agentkachel dd { margin: 0; font-size: var(--u-t-lg); font-weight: var(--u-w-strong); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .vb-agent { display: inline-flex; align-items: center; gap: .55rem; }
:root[data-huelle="glas"] .vb-agent img, :root[data-huelle="glas"] .vb-agent-kuerzel { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; object-fit: cover; background: var(--u-surface-alt); box-shadow: 0 0 0 2px var(--u-sparte-vorbereitet); }
:root[data-huelle="glas"] .vb-agent-kuerzel { display: grid; place-items: center; font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .vb-gruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u-s-4); margin: 0; padding: var(--u-s-5); border-left: 3px solid var(--u-sparte-vorbereitet); }
:root[data-huelle="glas"] .vb-gruppenkopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
:root[data-huelle="glas"] .vb-gruppentitel { flex: 1 1 18rem; min-width: 0; }
:root[data-huelle="glas"] .vb-gruppentitel h2 { margin: 0; font-size: var(--u-t-feld); display: flex; align-items: center; gap: .5rem; }
:root[data-huelle="glas"] .vb-gruppentitel p { margin: .2rem 0 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .vb-anzahl { display: inline-grid; place-items: center; min-width: 1.6rem; padding: 0 .45rem; border-radius: var(--u-r-full); background: var(--u-sparte-vorbereitet); color: var(--u-surface); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .vb-verlust { color: var(--u-danger-fg); }
:root[data-huelle="glas"] .vb-stichprobe td.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .vb-gesehen { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .vb-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
:root[data-huelle="glas"] .vb-aktionen form { display: flex; align-items: center; gap: .5rem; margin: 0; }
:root[data-huelle="glas"] .vb-aktionen p { flex-basis: 100%; margin: 0; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .vb-ablehnen input[name="grund"] { min-width: 0; flex: 1 1 12rem; }
:root[data-huelle="glas"] .vb-aktionen form.vb-ablehnen { flex: 1 1 20rem; }
:root[data-huelle="glas"] .vb-aktionen button { white-space: nowrap; }
:root[data-huelle="glas"] .vb-aktenkopf { display: flex; align-items: center; gap: 1rem; padding-bottom: var(--u-s-4); border-bottom: 1px solid var(--u-border); }
:root[data-huelle="glas"] .vb-aktenkopf img { border-radius: 50%; box-shadow: 0 0 0 2px var(--u-sparte-vorbereitet); }
:root[data-huelle="glas"] .vb-aktenkopf div { flex: 1; min-width: 0; }
:root[data-huelle="glas"] .vb-aktenkopf h1 { margin: 0; font-size: var(--u-t-xl); }
:root[data-huelle="glas"] .vb-aktenkopf p { margin: .2rem 0 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .vb-aktenraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: var(--u-s-6); align-items: start; }
:root[data-huelle="glas"] .vb-aktenraster > div { display: grid; gap: var(--u-s-5); min-width: 0; }
:root[data-huelle="glas"] .vb-vergleich { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--u-s-3); margin: 0; }
:root[data-huelle="glas"] .vb-vergleich dt { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .vb-vergleich dd { margin: .15rem 0 0; font-size: var(--u-t-md); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .vb-vergleich .vb-ziel dd { font-size: var(--u-t-lg); font-weight: var(--u-w-strong); color: var(--u-sparte-vorbereitet); }
:root[data-huelle="glas"] .vb-begruendung { font-size: var(--u-t-sm); line-height: 1.6; }
:root[data-huelle="glas"] .vb-entscheidung .akte-abschnitt { display: grid; gap: var(--u-s-4); position: sticky; top: calc(var(--u-fensterkopf-h) + var(--u-s-5)); }
:root[data-huelle="glas"] .vb-entscheidung form { display: grid; gap: .5rem; margin: 0; }
:root[data-huelle="glas"] .vb-entscheidung .feld { display: grid; gap: .3rem; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .vb-entscheidung input { width: 100%; box-sizing: border-box; }
@container (max-width: 52rem) { :root[data-huelle="glas"] .vb-aktenraster { grid-template-columns: 1fr; } :root[data-huelle="glas"] .vb-entscheidung .akte-abschnitt { position: static; } }
@container inhalt (width < 40rem) { :root[data-huelle="glas"] .vb { padding: var(--u-s-4); } }
@container (max-width: 40rem) { :root[data-huelle="glas"] .vb-stichprobe td:nth-child(5) { display: none; } }

:root[data-huelle="glas"] .vb-akte .akte-abschnitt { padding-bottom: var(--u-s-5); }
:root[data-huelle="glas"] .vb-akte .akte-abschnitt > :is(dl, div, form, p) { margin-inline: var(--u-s-5); }
:root[data-huelle="glas"] .vb-akte .akte-abschnitt > .preis-verlauf, :root[data-huelle="glas"] .vb-akte .akte-abschnitt > section { margin-inline: var(--u-s-5); }

/* ── Bank (Bildentwurf Bank + Offene Posten nativ, abgenommen 13.10.2026; Hülle M, Referenz Auftragsakte) ── Kontokarten als schmale,
   einklappbare Leiste (am Telefon Wischleiste), Chips nach Konto und Ursache, Klärliste 40/52 px mit Vorschau-Schublade, Akte und
   Konto-Tafel. Nur Rollen (--u-*), keine festen Farben; der Kanal als Punkt in der Farbrolle --u-kanal-*. */
:root[data-huelle="glas"] .bank-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--u-s-3) var(--u-s-4); margin: 0 0 var(--u-s-4); }
:root[data-huelle="glas"] .bank-konten-knopf { letter-spacing: normal; }
:root[data-huelle="glas"] .bank-kanal { display: inline-flex; align-items: center; gap: var(--u-s-3); min-width: 0; color: var(--u-text-2); font-weight: var(--u-w-strong); white-space: nowrap; }
:root[data-huelle="glas"] .bank-kanal > i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--u-text-faint); }
:root[data-huelle="glas"] .bank-kanal[data-kanal="kaufland"] > i { background: var(--u-kanal-kaufland); }
:root[data-huelle="glas"] .bank-kanal[data-kanal="ebay"] > i { background: var(--u-kanal-ebay); }
:root[data-huelle="glas"] .bank-kanal[data-kanal="amazon"] > i { background: var(--u-kanal-amazon); }
:root[data-huelle="glas"] .bank-kanal[data-kanal="paypal"] > i { background: var(--u-kanal-paypal); }
:root[data-huelle="glas"] .bank-kanal[data-kanal="shop"] > i { background: var(--u-kanal-shop); }
:root[data-huelle="glas"] .zeile-kanal[data-kanal="paypal"],
:root[data-huelle="glas"] :is(.auftrag-kanal, .auftrag-bild)[data-kanal="paypal"],
:root[data-huelle="glas"] .akte-design .akte-kopf .auftrag-kanal[data-kanal="paypal"] { color: var(--u-kanal-paypal); }

:root[data-huelle="glas"] .bank-konten { margin: 0 0 var(--u-s-5); }
:root[data-huelle="glas"] .bank-konten-griff { display: inline-flex; align-items: center; gap: var(--u-s-3); padding: var(--u-s-2) 0; color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); cursor: pointer; list-style: none; }
:root[data-huelle="glas"] .bank-konten-griff::-webkit-details-marker { display: none; }
:root[data-huelle="glas"] .bank-konten-griff::before { content: "▾" / ""; color: var(--u-text-faint); }
:root[data-huelle="glas"] .bank-konten:not([open]) > .bank-konten-griff::before { content: "▸" / ""; }
:root[data-huelle="glas"] .bank-konten-griff small { font-weight: var(--u-w-medium); }
/* Unter der Breite der Hülle die VOLLE Kartenform als Wischleiste (Blocker B3: vorher ein Raster, das bei sieben Konten zwei Reihen und
   266 px hoch war); ab der Breite die einzeilige Leiste (Block „DIE KONTOLEISTE EINZEILIG“ unten). */
:root[data-huelle="glas"] .bank-kontokarten { display: flex; gap: var(--u-s-4); margin: var(--u-s-3) 0 0; padding: 0 0 var(--u-s-2); overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: none; }
:root[data-huelle="glas"] .bank-kontokarte { flex: 0 0 17rem; min-width: 0; scroll-snap-align: start; }
:root[data-huelle="glas"] .bank-kk-weitere { flex-basis: auto; align-self: center; }
:root[data-huelle="glas"] .bank-kk-weitere a { display: inline-flex; align-items: center; min-height: max(var(--u-s-10), var(--u-ziel-min)); padding: 0 var(--u-s-4); color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); white-space: nowrap; }
:root[data-huelle="glas"] .bank-kk-ziel { display: grid; gap: var(--u-s-2); height: 100%; 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); color: inherit; text-decoration: none; }
:root[data-huelle="glas"] .bank-kk-ziel:hover { border-color: var(--u-border-strong); box-shadow: var(--u-e-karte); }
:root[data-huelle="glas"] .bank-kk-ziel[aria-current="true"] { border-color: var(--u-brand-line); box-shadow: 0 0 0 3px var(--u-brand-wash); }
:root[data-huelle="glas"] .bank-kontokarte.ist-ruhend .bank-kk-ziel { background: var(--u-surface-alt); }
:root[data-huelle="glas"] .bank-kk-kopf { display: flex; align-items: center; gap: var(--u-s-3); min-width: 0; }
:root[data-huelle="glas"] .bank-kk-kopf .bank-kanal { flex: 1 1 auto; overflow: hidden; }
:root[data-huelle="glas"] .bank-kk-kopf .bank-kanal b { overflow: hidden; color: var(--u-text); text-overflow: ellipsis; }
:root[data-huelle="glas"] .bank-ampel { flex: none; display: inline-flex; align-items: center; gap: var(--u-s-2); color: var(--u-text-muted); font-size: var(--u-t-xs); white-space: nowrap; }
:root[data-huelle="glas"] .bank-ampel > i { width: 8px; height: 8px; border-radius: 50%; background: var(--u-ok); }
:root[data-huelle="glas"] .bank-ampel[data-art="warn"] { color: var(--u-warn-fg); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .bank-ampel[data-art="warn"] > i { background: var(--u-warn); }
:root[data-huelle="glas"] .bank-ampel[data-art="aus"] { padding: 0 var(--u-s-3); border-radius: var(--u-r-full); background: var(--u-info-bg); color: var(--u-info-fg); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .bank-ampel[data-art="aus"] > i { width: 6px; height: 6px; background: currentColor; }
:root[data-huelle="glas"] .bank-kk-saldo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--u-s-3); }
:root[data-huelle="glas"] .bank-kk-saldo small { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .bank-kk-saldo b { font-size: var(--u-t-lg); font-weight: var(--u-w-titel); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bank-kk-lexware { margin-left: auto; }
:root[data-huelle="glas"] .bank-kk-zahlen { display: flex; flex-wrap: wrap; gap: 0 var(--u-s-5); padding-top: var(--u-s-2); border-top: 1px solid var(--u-border-soft); color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .bank-kk-zahlen b { color: var(--u-text); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bank-kk-zahlen .ist-warn b { color: var(--u-warn-fg); }

/* DIE REITER DER BANKSEITE bleiben sichtbar: die Hülle blendet die Reiterzeile der Listen aus, sobald die Modulleiste da ist (deren
   Arbeitsmengen stehen dann dort) — Klärliste · Vorbereitet · Export · Alle Buchungen sind aber Ansichten DIESER Seite, keine Menüpunkte. */
:root[data-huelle="glas"] .glasfenster-koerper:has(> .modulleiste) .bank-seite .auftrag-reiter.bank-reiter { display: flex; }
:root[data-huelle="glas"] .bank-chips { display: flex; flex-wrap: wrap; gap: var(--u-s-3) var(--u-s-7); margin: 0 0 var(--u-s-4); }
:root[data-huelle="glas"] .bank-chipgruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2) var(--u-s-3); min-width: 0; }
:root[data-huelle="glas"] .bank-chipgruppe > small { color: var(--u-text-faint); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); letter-spacing: var(--u-track-caps); text-transform: uppercase; }
:root[data-huelle="glas"] .bank-chip { display: inline-flex; align-items: center; gap: var(--u-s-2); min-height: max(var(--u-s-9), var(--u-ziel-min)); padding: 0 var(--u-s-4); 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; white-space: nowrap; }
:root[data-huelle="glas"] .bank-chip:hover { border-color: var(--u-border-strong); }
:root[data-huelle="glas"] .bank-chip[aria-current="true"] { border-color: var(--u-brand-line); background: var(--u-brand-wash); color: var(--u-brand-text); }
:root[data-huelle="glas"] .bank-chip .bank-kanal > i { width: 7px; height: 7px; }
:root[data-huelle="glas"] .bank-chip-zahl { color: var(--u-text-muted); font-weight: var(--u-w-medium); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bank-chip[aria-current="true"] .bank-chip-zahl { color: inherit; }
:root[data-huelle="glas"] .bank-chip-hinweis { flex-basis: 100%; margin: 0; font-size: var(--u-t-sm); }

/* DIE KLÄRLISTE IN 40 PX (Hülle M, Entwurf: dicht, Zebra); „Zeilen weit“ (bank.js, je Browser) gibt 52 px samt Referenz. */
:root[data-huelle="glas"] .bank-tabelle.erp td { height: var(--u-s-11); padding-block: var(--u-s-2); }
:root[data-huelle="glas"] [data-bank-dichte="weit"] .bank-tabelle.erp td { height: calc(var(--u-s-12) + var(--u-s-2)); padding-block: var(--u-s-3); }
/* Die Referenz nur in der weiten Dichte — stärker als die Unterzeile der Listen (.auftrag-liste .erp .zeile-neben zeigt sie sonst). */
:root[data-huelle="glas"] .bank-seite .erp.bank-tabelle .zeile-neben.bank-ref { display: none; }
:root[data-huelle="glas"] .bank-seite[data-bank-dichte="weit"] .erp.bank-tabelle .zeile-neben.bank-ref { display: block; margin-top: 0; }
:root[data-huelle="glas"] .bank-tabelle .zeile-kern { font-weight: var(--u-w-medium); }
:root[data-huelle="glas"] .bank-tabelle tbody tr:nth-child(even) { background: var(--u-zeile-zebra); }
:root[data-huelle="glas"] .bank-tabelle td.zelle-zustand { white-space: nowrap; }
:root[data-huelle="glas"] .bank-tabelle td.zelle-zustand .abzeichen + .abzeichen { margin-left: var(--u-s-2); }
:root[data-huelle="glas"] .bank-tabelle td.zelle-zustand .zeile-neben { display: inline; margin: 0 0 0 var(--u-s-3); }
:root[data-huelle="glas"] .bank-tag { color: var(--u-text-2); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bank-betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-huelle="glas"] .bank-betrag.ist-minus { color: var(--u-text-2); }
:root[data-huelle="glas"] .bank-agentspalte { width: 1%; white-space: nowrap; }
:root[data-huelle="glas"] .bank-konfidenz { display: inline-flex; align-items: center; gap: var(--u-s-3); color: var(--u-text-2); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .bank-konfidenz.ist-unsicher { color: var(--u-text-muted); font-weight: var(--u-w-medium); }
:root[data-huelle="glas"] .bank-balken { position: relative; width: 30px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--u-border); }
:root[data-huelle="glas"] .bank-balken > b { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--u-brand-text); }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="10"] { width: 10%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="20"] { width: 20%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="30"] { width: 30%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="40"] { width: 40%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="50"] { width: 50%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="60"] { width: 60%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="70"] { width: 70%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="80"] { width: 80%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="90"] { width: 90%; }
:root[data-huelle="glas"] .bank-balken > b[data-anteil="100"] { width: 100%; }
:root[data-huelle="glas"] .bank-fuss-satz { font-size: var(--u-t-xs); }

/* Schublade und Akte: Bankzeile, Vorschlag, Kandidaten, Differenz. */
:root[data-huelle="glas"] .bank-vorschau .vorschau-kopf > .knopf { align-self: flex-start; }
:root[data-huelle="glas"] .bank-vorschau-betrag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3); margin: var(--u-s-2) 0 0; }
:root[data-huelle="glas"] .bank-vorschau-betrag b { font-size: var(--u-t-xl); font-weight: var(--u-w-titel); font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bank-vorschau-zweck { margin: 0; color: var(--u-text-2); line-height: var(--u-lh); }
:root[data-huelle="glas"] .bank-ref { margin: var(--u-s-2) 0 0; word-break: break-all; }
:root[data-huelle="glas"] .bank-vorschlag { display: grid; gap: var(--u-s-3); padding: var(--u-s-4) var(--u-s-5); border: 1px solid var(--u-brand-line); border-radius: var(--u-r-md); background: var(--u-brand-wash); color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .bank-agent .bank-vorschlag { margin: var(--u-s-3) var(--u-s-5); }
:root[data-huelle="glas"] .bank-vorschlag p { margin: 0; }
:root[data-huelle="glas"] .bank-vorschlag b { color: var(--u-text); }
:root[data-huelle="glas"] .bank-vorschlag .knopfreihe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--u-s-3); }
:root[data-huelle="glas"] .bank-vorschlag form { margin: 0; }
:root[data-huelle="glas"] .bank-ablehnen > summary { list-style: none; }
:root[data-huelle="glas"] .bank-ablehnen > summary::-webkit-details-marker { display: none; }
:root[data-huelle="glas"] .bank-ablehnen[open] form { display: grid; gap: var(--u-s-2); margin-top: var(--u-s-3); }
:root[data-huelle="glas"] .bank-ablehnen .feld { display: grid; gap: var(--u-s-1); }
/* Weitere offene Vorschläge (B1): nur zur Ansicht, ohne Knopf — gestrichelt, damit sie nicht wie der übernehmbare Vorschlag aussehen. */
:root[data-huelle="glas"] .bank-agent .bank-weitere { margin: 0 var(--u-s-5) var(--u-s-3); }
:root[data-huelle="glas"] .bank-weitere-kopf { margin: 0 0 var(--u-s-2); color: var(--u-text-2); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] :is(.bank-weitere ul, .bank-weitere-liste) { display: grid; gap: var(--u-s-2); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .bank-weitere-liste { margin-top: var(--u-s-3); }
:root[data-huelle="glas"] :is(.bank-weitere, .bank-weitere-liste) li { display: grid; gap: var(--u-s-1); padding: var(--u-s-3) var(--u-s-4); border: 1px dashed var(--u-border); border-radius: var(--u-r-md); color: var(--u-text-2); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] :is(.bank-weitere, .bank-weitere-liste) li b { color: var(--u-text); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] :is(.bank-weitere, .bank-weitere-liste) li small { color: var(--u-text-muted); }
:root[data-huelle="glas"] .bank-agent .bank-vorschlag-ohne { border-style: dashed; background: none; }
/* Verlauf der Konto-Tafel (H8): je geändertem Feld eine Zeile „Feld alt → neu“. */
:root[data-huelle="glas"] .bank-verlauf-felder { display: grid; gap: var(--u-s-1); margin: var(--u-s-2) 0 0; padding: 0; list-style: none; font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .bank-verlauf-felder span { color: var(--u-text-muted); }
:root[data-huelle="glas"] .bank-kandidaten { display: grid; gap: var(--u-s-2); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .bank-kandidaten li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--u-s-3); padding: var(--u-s-3) var(--u-s-4); border: 1px solid var(--u-border); border-radius: var(--u-r-md); background: var(--u-surface); }
:root[data-huelle="glas"] .bank-kandidaten li[data-im-vorschlag] { border-color: var(--u-brand-line); background: var(--u-brand-wash); }
:root[data-huelle="glas"] .bank-kandidaten li b { font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bank-kandidaten li small { grid-column: 1 / -1; color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .bank-summe { display: flex; align-items: center; gap: var(--u-s-3); margin: var(--u-s-4) 0 0; padding: var(--u-s-3) var(--u-s-4); border-radius: var(--u-r-md); background: var(--u-warn-bg); color: var(--u-warn-fg); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .bank-summe.ist-gleich { background: var(--u-ok-bg); color: var(--u-ok-fg); }
:root[data-huelle="glas"] .bank-akte-nav { display: flex; align-items: center; gap: var(--u-s-3); margin: 0 0 var(--u-s-3); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .bank-akte-nav > a:first-child { margin-right: auto; }

/* Reiter „Vorbereitet“: die eingebettete Liste von /vorbereitet, ohne deren eigene Einordnung und Bereichswahl. */
:root[data-huelle="glas"] .bank-vorbereitet .vb { padding-inline: 0; }
:root[data-huelle="glas"] .bank-vorbereitet :is(.vb-einordnung, .vb-filter) { display: none; }
:root[data-huelle="glas"] .bank-hinweisband { display: flex; align-items: flex-start; gap: var(--u-s-3); margin: 0 0 var(--u-s-4); 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-alt); color: var(--u-text-2); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .bank-markiert { margin: 0 0 var(--u-s-4); padding: var(--u-s-4) var(--u-s-5); }
:root[data-huelle="glas"] .bank-markiert h2 { margin: 0 0 var(--u-s-3); font-size: var(--u-t-md); }
:root[data-huelle="glas"] .bank-markiert-liste { margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .bank-markiert-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3) var(--u-s-4); padding: var(--u-s-3) 0; border-bottom: 1px solid var(--u-border-soft); }

/* Konto-Tafel: links die Konten, rechts die Abschnitte; die Speichern-Leiste klebt unten. */
:root[data-huelle="glas"] .bank-zurueck { margin: 0 0 var(--u-s-4); }
:root[data-huelle="glas"] .bank-zurueck a { display: inline-flex; align-items: center; gap: var(--u-s-2); }
:root[data-huelle="glas"] .bank-konten-raster { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: var(--u-s-6); align-items: start; }
:root[data-huelle="glas"] .bank-konten-liste { position: sticky; top: calc(var(--u-fensterkopf-h, 0px) + var(--u-s-4)); }
:root[data-huelle="glas"] .bank-konten-gruppe { margin: var(--u-s-4) 0 var(--u-s-2); color: var(--u-text-faint); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); letter-spacing: var(--u-track-caps); text-transform: uppercase; }
:root[data-huelle="glas"] .bank-konten-liste ul { display: grid; gap: var(--u-s-1); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .bank-konten-liste a { display: grid; gap: var(--u-s-1); padding: var(--u-s-3) var(--u-s-4); border-radius: var(--u-r-sm); color: inherit; text-decoration: none; }
:root[data-huelle="glas"] .bank-konten-liste a:hover { background: var(--u-hover); }
:root[data-huelle="glas"] .bank-konten-liste a[aria-current="page"] { background: var(--u-surface); box-shadow: inset 2px 0 var(--u-brand-text), var(--u-e-1); }
:root[data-huelle="glas"] .bank-konten-liste small { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .bank-tafel { display: grid; gap: var(--u-s-4); min-width: 0; }
:root[data-huelle="glas"] .bank-tafel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3); }
:root[data-huelle="glas"] .bank-tafel-kopf h2 { margin: 0; font-size: var(--u-t-xl); }
:root[data-huelle="glas"] .bank-tafel-form { display: grid; gap: var(--u-s-4); margin: 0; }
:root[data-huelle="glas"] .bank-tafel-abschnitt { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--u-s-6); margin: 0; padding: var(--u-s-5) var(--u-s-6); }
:root[data-huelle="glas"] .bank-tafel-erkl h3 { margin: 0 0 var(--u-s-2); font-size: var(--u-t-md); }
:root[data-huelle="glas"] .bank-tafel-erkl p { margin: 0; color: var(--u-text-2); font-size: var(--u-t-sm); line-height: var(--u-lh); }
:root[data-huelle="glas"] .bank-tafel-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--u-s-5); }
:root[data-huelle="glas"] .bank-tafel-feld { display: grid; align-content: start; gap: var(--u-s-2); min-width: 0; }
:root[data-huelle="glas"] .bank-tafel-feld > :is(label, .bank-tafel-wort) { font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .bank-tafel-feld p { margin: 0; }
:root[data-huelle="glas"] .bank-tafel-feld small { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .bank-tafel-feld :is(input, select) { width: 100%; box-sizing: border-box; }
:root[data-huelle="glas"] .bank-tafel-breit { grid-column: 1 / -1; }
:root[data-huelle="glas"] .bank-tafel-stand b { font-variant-numeric: tabular-nums; }
:root[data-huelle="glas"] .bank-speichern-leiste { position: sticky; bottom: 0; z-index: var(--u-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-3) var(--u-s-4); 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); }
:root[data-huelle="glas"] .bank-speichern-leiste p { display: grid; margin: 0 auto 0 0; font-size: var(--u-t-sm); }
:root[data-huelle="glas"] form[data-geaendert] .bank-speichern-leiste { background: var(--u-brand-wash-deckend); }

/* ROLLENDE LEISTEN (Kontoleiste, Reiter der Offenen Posten; bank.js): Auslauf auf der Seite, auf der es weitergeht, und Pfeile — beides
   erst mit Skript (data-mehr-*, die Pfeile sind sonst verborgen). Der Auslauf ist eine Maske, keine Farbe. */
:root[data-huelle="glas"] :is(.bank-rollleiste, .opos-rollleiste) { position: relative; min-width: 0; }
:root[data-huelle="glas"] .bank-rollpfeil { position: absolute; top: 50%; z-index: var(--u-z-zeile); display: inline-grid; place-items: center; width: var(--u-s-9); height: var(--u-s-9); padding: 0; border: 1px solid var(--u-border); border-radius: var(--u-r-full); background: var(--u-surface); color: var(--u-text-2); box-shadow: var(--u-e-1); font-size: var(--u-t-md); line-height: 1; transform: translateY(-50%); cursor: pointer; }
:root[data-huelle="glas"] .bank-rollpfeil:is(:hover, :focus-visible) { border-color: var(--u-border-strong); color: var(--u-text); }
:root[data-huelle="glas"] .bank-rollpfeil[data-rollpfeil="-1"] { left: 0; }
:root[data-huelle="glas"] .bank-rollpfeil[data-rollpfeil="1"] { right: 0; }
:root[data-huelle="glas"] [data-rollleiste][data-mehr-rechts] > [data-rollbahn] { mask-image: linear-gradient(to right, var(--u-text) calc(100% - var(--u-s-12)), transparent); }
:root[data-huelle="glas"] [data-rollleiste][data-mehr-links] > [data-rollbahn] { mask-image: linear-gradient(to left, var(--u-text) calc(100% - var(--u-s-12)), transparent); }
:root[data-huelle="glas"] [data-rollleiste][data-mehr-links][data-mehr-rechts] > [data-rollbahn] { mask-image: linear-gradient(to right, transparent, var(--u-text) var(--u-s-12), var(--u-text) calc(100% - var(--u-s-12)), transparent); }

/* DIE KONTOLEISTE EINZEILIG (Blocker B3 des Gutachtens design: mit sieben Konten blieben bei 1440×900 nur zwei Zeilen der Klärliste
   sichtbar). Ab etwa 1180 px Fensterbreite je Konto ein kompakter Eintrag in EINER Zeile — Kanalpunkt, Name, Kontostand, offen,
   Ampelpunkt; Lexware-Stand, „wartet auf Export“ und „wartet auf Gebührenrechnung“ stehen im title und bleiben für Vorleser im Text
   (nur visuell verborgen). Der Griff „Konten“ steht mit in der Zeile (details mit ::details-content; ohne diese Fähigkeit eine kleine
   Zeile darüber). Bei Überlauf rollt die Leiste waagerecht (Auslauf und Pfeile, bank.js). */
@container inhalt (width >= 70rem) {
  :root[data-huelle="glas"] .bank-konten { margin: 0 0 var(--u-s-4); }
  :root[data-huelle="glas"] .bank-konten-griff { flex: none; padding: 0; }
  :root[data-huelle="glas"] .bank-konten-griff small { display: none; }
  :root[data-huelle="glas"] .bank-kontokarten { gap: var(--u-s-2); margin: 0; padding: 0; scroll-snap-type: none; }
  :root[data-huelle="glas"] .bank-kontokarte { flex: none; }
  :root[data-huelle="glas"] .bank-kk-ziel { position: relative; display: flex; align-items: center; gap: var(--u-s-3); height: auto; min-height: max(var(--u-s-10), var(--u-ziel-min)); padding: 0 var(--u-s-4); border-radius: var(--u-r-full); white-space: nowrap; }
  :root[data-huelle="glas"] :is(.bank-kk-kopf, .bank-kk-saldo, .bank-kk-zahlen) { display: contents; }
  :root[data-huelle="glas"] .bank-kk-ziel .bank-kanal { order: 1; flex: none; }
  :root[data-huelle="glas"] .bank-kk-ziel .bank-kanal b { color: var(--u-text); }
  :root[data-huelle="glas"] .bank-kk-saldo b { order: 2; font-size: var(--u-t-sm); font-weight: var(--u-w-strong); }
  :root[data-huelle="glas"] .bank-kk-offen { order: 3; padding: 0 var(--u-s-3); border-radius: var(--u-r-full); background: var(--u-surface-alt); color: var(--u-text-muted); font-size: var(--u-t-xs); }
  :root[data-huelle="glas"] .bank-kk-offen.ist-warn { background: var(--u-warn-bg); color: var(--u-warn-fg); }
  :root[data-huelle="glas"] .bank-kk-offen.ist-warn b { color: inherit; }
  :root[data-huelle="glas"] .bank-kk-ziel .bank-ampel { order: 4; padding: 0; background: none; }
  :root[data-huelle="glas"] .bank-kk-ziel .bank-ampel[data-art="aus"] > i { width: 8px; height: 8px; background: var(--u-info-fg); }
  :root[data-huelle="glas"] :is(.bank-kk-saldo small, .bank-kk-zahlen > span:not(.bank-kk-offen), .bank-kk-ampelwort) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container inhalt (width >= 70rem) {
  @supports selector(::details-content) {
    :root[data-huelle="glas"] .bank-konten[open] { display: flex; align-items: center; gap: var(--u-s-4); }
    :root[data-huelle="glas"] .bank-konten[open]::details-content { flex: 1 1 auto; min-width: 0; }
  }
}

/* H7: bei offener Schublade nur EINE Ursache-Pille — sonst kürzte die zweite den Zweck so, dass die Bestellnummer fehlte. */
:root[data-huelle="glas"] .bank-seite[data-vorschau-offen] .bank-tabelle td.zelle-zustand .abzeichen + .abzeichen { display: none; }

/* H2 (Gutachten design): Titel mit Pfad, Datenstand und „Konten“ in EINER Zeile. Wie die Auftragsliste trägt die Seite den Titel der
   Hülle samt Pfad (die Listenhülle blendet beide sonst aus, HM6A); er fließt links, die Kopfzeile der Seite (eigener Formatierungskontext,
   Flex) steht rechts daneben, alles Weitere beginnt darunter. Am Telefon bleibt der Titel im Fensterreiter. */
@container inhalt (width >= 44rem) {
  :root[data-huelle="glas"] .glasfenster-koerper:has(> .bank-seite:not(.bank-konten-seite), > .opos-liste) > .glasfenster-titel {
    position: static; float: left; clear: left; width: auto; max-width: 40%; block-size: calc(var(--u-glasfenster-kopf-h) - var(--u-s-4));
    margin: 0 var(--u-s-6) 0 0; padding: 0 var(--u-s-2); overflow: hidden; clip-path: none;
  }
  :root[data-huelle="glas"] .glasfenster-koerper:has(> .bank-seite:not(.bank-konten-seite), > .opos-liste) > .glasfenster-pfad {
    display: block; float: left; clear: left; max-width: 40%; margin: 0 var(--u-s-6) var(--u-s-4) 0;
  }
  :root[data-huelle="glas"] .bank-seite:not(.bank-konten-seite) > .bank-kopf,
  :root[data-huelle="glas"] .opos-liste > .opos-kopf { min-height: calc(var(--u-glasfenster-kopf-h) - var(--u-s-4)); }
  :root[data-huelle="glas"] .bank-seite:not(.bank-konten-seite) > :not(.bank-kopf),
  :root[data-huelle="glas"] .opos-liste > :not(.opos-kopf) { clear: both; }
}

/* AM TELEFON: Kontokarten als Wischleiste (Entscheidung zum Entwurf), Chips rollen, die Tafel einspaltig. */
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .bank-kontokarten { gap: var(--u-s-3); scroll-snap-type: x mandatory; }
  :root[data-huelle="glas"] .bank-kontokarte { flex: 0 0 82%; }
  :root[data-huelle="glas"] .bank-kk-weitere { flex: none; }
  :root[data-huelle="glas"] .bank-chipgruppe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  :root[data-huelle="glas"] .bank-fuss-satz { display: none; }
  :root[data-huelle="glas"] .bank-tabelle.erp td { height: auto; }
}
@container inhalt (width < 52rem) {
  :root[data-huelle="glas"] .bank-konten-raster { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .bank-konten-liste { position: static; }
  :root[data-huelle="glas"] .bank-konten-liste ul { display: flex; overflow-x: auto; scrollbar-width: none; }
  :root[data-huelle="glas"] .bank-konten-liste a { white-space: nowrap; }
  :root[data-huelle="glas"] .bank-tafel-abschnitt { grid-template-columns: minmax(0, 1fr); gap: var(--u-s-3); }
}

/* ══ Q1 SCHREIBTISCH-RAHMEN (Design-Linie „Schreibtisch“, Manuel 16.10.2026, Bauplan Q1) ══ Die Kulisse liegt hinter dem Start, die
   Kopfleiste und die Tafeln des Starts sind Glas darüber. Der Fensterinhalt bleibt deckend (Glas trägt nie Fließtext einer Akte).
   Glas nach dem Rezept 13v: erst die deckende Fläche aus einer Rolle, dann im @supports der Weichzeichner mit der Glasrolle.
   Die Kopfleiste folgt dem Farbmodus (rollen-hell.css setzt ihren hellen Satz). Hier stehen nur Rollen. */
:root[data-huelle="glas"] body:has(> main.glasfenster) {
  background: linear-gradient(var(--u-kulisse-scrim), var(--u-kulisse-scrim)) fixed, var(--u-surface-2) var(--u-kulisse) center / cover no-repeat fixed;
}
:root[data-huelle="glas"] .glasfenster-koerper:has(> .start) { color: var(--u-text); }
:root[data-huelle="glas"] .start-bereiche { padding: var(--u-s-8) var(--u-s-9); border: 1px solid var(--u-glas-kante); border-radius: var(--u-r-xl); background: var(--u-glas-panel-fest); box-shadow: var(--u-e-3); }
:root[data-huelle="glas"] :is(.start-karte, .start-kpi) { background: var(--u-glas-panel-fest); }
:root[data-huelle="glas"] .start-kpi-kachel { background: transparent; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-huelle="glas"] .kopf-leiste { background: var(--u-kopf-glas); -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"] .start-bereiche { background: var(--u-glas-panel); -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"] :is(.start-karte, .start-kpi) { background: var(--u-glas-panel); -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)); }
}
/* Weniger Transparenz gewünscht (Betriebssystem): deckende Flächen statt Glas — hinter einer deckenden Fläche bleibt der Weichzeichner
   unsichtbar, deshalb ohne eigenes `backdrop-filter` (sonst zählte die Abschaltung als weitere Weichzeichner-Regel, 13v). */
@media (prefers-reduced-transparency: reduce) {
  :root[data-huelle="glas"] .kopf-leiste { background: var(--u-kopf); }
  :root[data-huelle="glas"] .start-bereiche { background: var(--u-glas-panel-fest); }
  :root[data-huelle="glas"] :is(.start-karte, .start-kpi) { background: var(--u-glas-panel-fest); }
}
/* ══ ENDE Q1 ══ */

/* ══ Q2 SCHREIBTISCH-GALERIE (GET /schreibtisch) ══ die zwei Leisten nebeneinander, darunter die freien Widgets nach Gruppen; jede
   Zeile Zeichen, Name mit Gruppe und Takt, rechts kleine Formulare. Nur Rollen, Breite über @container. */
:root[data-huelle="glas"] .schreibtisch-galerie { display: flex; flex-direction: column; gap: var(--u-s-6); max-width: 72rem; }
:root[data-huelle="glas"] .schreibtisch-leisten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u-s-6); }
:root[data-huelle="glas"] :is(.schreibtisch-leiste, .schreibtisch-frei) { margin: 0; }
:root[data-huelle="glas"] :is(.schreibtisch-leiste, .schreibtisch-frei) h2 { display: flex; align-items: baseline; gap: var(--u-s-4); margin: 0 0 var(--u-s-4); font-size: var(--u-t-md); }
:root[data-huelle="glas"] .schreibtisch-zahl { color: var(--u-text-muted); font-size: var(--u-t-xs); font-weight: var(--u-w-normal); }
:root[data-huelle="glas"] .schreibtisch-gruppe { margin: var(--u-s-5) 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; }
:root[data-huelle="glas"] .schreibtisch-liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .schreibtisch-eintrag { display: flex; align-items: center; gap: var(--u-s-5); min-height: max(var(--u-s-12), var(--u-ziel-min)); padding: var(--u-s-2) 0; border-top: 1px solid var(--u-border); }
:root[data-huelle="glas"] .schreibtisch-zeichen { display: grid; flex: none; place-items: center; width: var(--u-s-10); height: var(--u-s-10); border-radius: var(--u-r-md); background: var(--u-surface-alt); color: var(--u-brand-text); }
:root[data-huelle="glas"] .schreibtisch-wort { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
:root[data-huelle="glas"] .schreibtisch-wort small { color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .schreibtisch-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--u-s-2); }
:root[data-huelle="glas"] .schreibtisch-aktion { margin: 0; }
:root[data-huelle="glas"] :is(.schreibtisch-hinweis, .schreibtisch-leer) { margin: 0; color: var(--u-text-muted); font-size: var(--u-t-sm); }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .schreibtisch-leisten { grid-template-columns: minmax(0, 1fr); }
  :root[data-huelle="glas"] .schreibtisch-eintrag { flex-wrap: wrap; }
}
/* ══ ENDE Q2 ══ */

/* ══ Q3 SCHREIBTISCH (Start mit Widget-Leisten) ══ `div.start` ist die Widget-Wurzel; das Raster setzt Kacheln in die Mitte, die
   Kennzahlen und die rechte Leiste in die rechte Spalte, die linke Leiste links. Eingeklappt bleibt die Mitte leer (Kulisse). Die
   Rahmen sind `.glas` (Glas und deckender Rückfall stehen schon in olymp.css, hier kein neuer Weichzeichner). Breiten über @container. */
:root[data-huelle="glas"] .start[data-widget-wurzel] { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; grid-template-areas: "kopf kopf" "mitte kz" "mitte rechts"; grid-template-rows: auto auto 1fr; align-items: start; gap: var(--u-s-6); }
:root[data-huelle="glas"] .start[data-widget-wurzel]:has(> .schreibtisch-leiste[data-seite="links"]) { grid-template-columns: 19rem minmax(0, 1fr) 19rem; grid-template-areas: "kopf kopf kopf" "links mitte kz" "links mitte rechts"; }
:root[data-huelle="glas"] .start[data-widget-wurzel] > * { grid-area: mitte; min-width: 0; }
:root[data-huelle="glas"] .start[data-widget-wurzel] > .schreibtisch-kopf { grid-area: kopf; justify-self: end; display: flex; flex-wrap: wrap; gap: var(--u-s-2); padding: var(--u-s-2); }
:root[data-huelle="glas"] .start[data-widget-wurzel] > .start-leiste { grid-area: kz; }
:root[data-huelle="glas"] .start[data-widget-wurzel] > .schreibtisch-leiste[data-seite="links"] { grid-area: links; }
:root[data-huelle="glas"] .start[data-widget-wurzel] > .schreibtisch-leiste[data-seite="rechts"] { grid-area: rechts; }
:root[data-huelle="glas"] .schreibtisch-leiste { display: flex; flex-direction: column; gap: var(--u-s-5); }
:root[data-huelle="glas"] .schreibtisch-schalter { margin: 0; }
:root[data-huelle="glas"] .schreibtisch-kopf .knopf { display: inline-flex; align-items: center; gap: var(--u-s-2); }
@container inhalt (width < 75rem) {
  :root[data-huelle="glas"] .start[data-widget-wurzel], :root[data-huelle="glas"] .start[data-widget-wurzel]:has(> .schreibtisch-leiste[data-seite="links"]) { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-areas: "kopf kopf" "mitte kz" "mitte links" "mitte rechts"; grid-template-rows: auto auto auto 1fr; }
}
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .start[data-widget-wurzel], :root[data-huelle="glas"] .start[data-widget-wurzel]:has(> .schreibtisch-leiste[data-seite="links"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "mitte" "kz" "links" "rechts"; grid-template-rows: none; }
}
/* ══ ENDE Q3 ══ */

/* ══ Q4 WIDGETS DER ERSTEN FASSUNG (Uhr, Notiz, Zuletzt, Kosten, Umsatz) ══ nur Rollen; Balken als <meter>/SVG ohne Inline-Stil. */
:root[data-huelle="glas"] .tisch-gross { margin: 0; font-size: var(--u-t-2xl); font-weight: var(--u-w-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
:root[data-huelle="glas"] .tisch-unter { margin: 0; color: var(--u-text-muted); font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .tisch-uhr .tisch-gross { font-size: var(--u-t-3xl); }
:root[data-huelle="glas"] .tisch-meter { display: block; inline-size: 100%; block-size: var(--u-s-3); margin-block: var(--u-s-2); }
:root[data-huelle="glas"] .tisch-kosten + .tisch-kosten { padding-block-start: var(--u-s-3); border-top: 1px solid var(--u-border); }
:root[data-huelle="glas"] .tisch-saeulen { display: block; inline-size: 100%; block-size: var(--u-s-12); }
:root[data-huelle="glas"] .tisch-saeule { fill: var(--u-brand-line); }
:root[data-huelle="glas"] .tisch-saeule-heute { fill: var(--u-brand-hell); }
:root[data-huelle="glas"] .tisch-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; color: var(--u-text-muted); font-size: var(--u-t-2xs); text-align: center; }
:root[data-huelle="glas"] .tisch-notiz form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--u-s-2); margin: 0; }
:root[data-huelle="glas"] .tisch-notiz textarea { box-sizing: border-box; font: inherit; inline-size: 100%; min-block-size: 6rem; resize: vertical; }
:root[data-huelle="glas"] .tisch-liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .tisch-liste a { display: flex; align-items: center; gap: var(--u-s-3); min-block-size: max(2.75rem, var(--u-ziel-min)); }
/* ══ ENDE Q4 ══ */

/* ══ Q5 RAHMEN: FENSTERLEISTE UND DOCK ══ Glas über die Klasse `.glas` (Weichzeichner und deckender Rückfall stehen in olymp.css, hier
   kein neuer). Die Fensterleiste ist die zweite Zeile der Kopfleiste (Höhe --u-fensterleiste-h), das Dock schwebt unten in der Mitte
   (Höhe --u-dock-h). Nur Rollen. */
:root[data-huelle="glas"] .fensterleiste { display: flex; align-items: center; gap: var(--u-s-4); block-size: var(--u-fensterleiste-h); padding-inline: var(--u-s-6); border-width: 0 0 1px; border-radius: 0; box-shadow: none; font-size: var(--u-t-xs); overflow: hidden; }
:root[data-huelle="glas"] .fensterleiste-chips { display: flex; flex: 1 1 auto; gap: var(--u-s-2); min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
:root[data-huelle="glas"] :is(.fl-chip, .fl-tat) { display: inline-flex; align-items: center; gap: var(--u-s-2); min-block-size: 1.75rem; padding: 0 var(--u-s-3); border: 1px solid transparent; border-radius: var(--u-r-md); background: none; color: var(--u-text); font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
:root[data-huelle="glas"] .fl-chip { border-color: var(--u-border); background: var(--u-surface); }
:root[data-huelle="glas"] .fl-chip[aria-current] { border-color: var(--u-brand-line); background: var(--u-brand-wash); }
:root[data-huelle="glas"] .fl-chip :is(small, .fl-zustand) { color: var(--u-text-muted); }
:root[data-huelle="glas"] .fl-chip.ist-geloest { border-style: dashed; }
:root[data-huelle="glas"] .fl-tat { color: var(--u-text-muted); }
:root[data-huelle="glas"] :is(.fl-chip, .fl-tat):hover { color: var(--u-text); background: var(--u-surface-alt); }
:root[data-huelle="glas"] .fensterleiste-taten { display: flex; flex: none; gap: var(--u-s-2); }
:root[data-huelle="glas"] .fl-zu { margin: 0; }
/* B2/B5: Tab-Leiste (_huelle/htabs) und .tel-nur nur am Telefon (telefon.css). */
:root[data-huelle="glas"] :is(.htabs, .tel-nur) { display: none; }
:root[data-huelle="glas"] .rdock { position: fixed; left: 50%; bottom: var(--u-s-3); z-index: var(--u-z-widget); display: flex; align-items: center; gap: var(--u-s-4); max-inline-size: calc(100vw - 2 * var(--u-s-5)); padding: var(--u-s-2) var(--u-s-4); transform: translateX(-50%); transition: transform calc(.2s * var(--u-bewegung, 1)); }
:root[data-huelle="glas"] .rdock[data-auto]:not(:hover, :focus-within) { transform: translate(-50%, calc(100% - var(--u-s-2))); }
:root[data-huelle="glas"] :is(.rdock-ziele, .rdock-agenten) { display: flex; align-items: center; gap: var(--u-s-2); margin: 0; padding: 0; list-style: none; }
:root[data-huelle="glas"] .rdock-ziele { overflow-x: auto; scrollbar-width: none; }
:root[data-huelle="glas"] .rdock-agenten { padding-inline-start: var(--u-s-4); border-inline-start: 1px solid var(--u-border); }
:root[data-huelle="glas"] :is(.rdock-ziel, .rdock-plus) { position: relative; display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: var(--u-r-md); color: var(--u-text); text-decoration: none; }
:root[data-huelle="glas"] .rdock-ziel:hover { background: var(--u-surface-alt); }
:root[data-huelle="glas"] .rdock-ziel[aria-current]::after { content: ""; position: absolute; bottom: 1px; inline-size: 1.25rem; block-size: 3px; border-radius: 2px; background: var(--u-brand-hell); }
:root[data-huelle="glas"] .rdock-kachel { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--u-r-md); background: var(--u-surface-alt); color: var(--u-brand-text); }
:root[data-huelle="glas"] .rdock-plus { inline-size: 2.5rem; block-size: 2.5rem; border: 1px dashed var(--u-border); color: var(--u-text-muted); }
:root[data-huelle="glas"] .rdock-zahl { position: absolute; top: 0; right: 0; min-inline-size: 1.25rem; padding: 0 var(--u-s-1); border-radius: 999px; background: var(--u-surface); box-shadow: var(--u-e-1); color: var(--u-text); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); line-height: 1.25rem; text-align: center; }
:root[data-huelle="glas"] .rdock-name { position: absolute; bottom: calc(100% + var(--u-s-2)); padding: var(--u-s-1) var(--u-s-3); border-radius: var(--u-r-sm); background: var(--u-surface); box-shadow: var(--u-e-2); color: var(--u-text); font-size: var(--u-t-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity calc(.15s * var(--u-bewegung, 1)); }
:root[data-huelle="glas"] :is(.rdock-ziel, .rdock-plus):is(:hover, :focus-visible) .rdock-name { opacity: 1; }
:root[data-huelle="glas"] .rdock-agent { display: flex; align-items: center; gap: var(--u-s-2); padding: var(--u-s-1) var(--u-s-3) var(--u-s-1) var(--u-s-1); border-radius: 999px; color: var(--u-text); text-decoration: none; }
:root[data-huelle="glas"] .rdock-agent:hover { background: var(--u-surface-alt); }
:root[data-huelle="glas"] .rdock-agent :is(img, .rdock-agent-kuerzel) { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; object-fit: cover; background: var(--u-surface-alt); box-shadow: 0 0 0 2px var(--u-border); }
:root[data-huelle="glas"] .rdock-agent-text { display: flex; flex-direction: column; max-inline-size: 9rem; line-height: 1.2; }
:root[data-huelle="glas"] .rdock-agent-text :is(b, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .rdock-agent-text small { color: var(--u-text-muted); font-size: var(--u-t-2xs); }
:root[data-huelle="glas"] .chat-ebene { bottom: calc(var(--u-dock-h) + var(--u-s-2) + env(safe-area-inset-bottom)); }
:root[data-huelle="glas"] .schreibtisch-dock-taten { margin-block-start: var(--u-s-4); }
/* Q5 Teil 2: die Seitenleiste neben dem angedockten Fenster (in main, rechts). Offen 19rem, eingeklappt nur Zeichen. */
:root[data-huelle="glas"] main.glasfenster:has(> .seitenleiste) { display: flex; gap: var(--u-s-5); max-width: none; }
:root[data-huelle="glas"] main.glasfenster:has(> .seitenleiste) > .glasfenster-koerper { flex: 1 1 auto; min-width: 0; }
:root[data-huelle="glas"] .seitenleiste { display: flex; flex: 0 0 19rem; flex-direction: column; gap: var(--u-s-4); min-height: 0; overflow-y: auto; scrollbar-width: thin; }
:root[data-huelle="glas"] .seitenleiste.ist-zu { flex-basis: 3rem; align-items: center; }
:root[data-huelle="glas"] .seitenleiste-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--u-s-2); color: var(--u-glas-text-2); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); letter-spacing: var(--u-track-caps); text-transform: uppercase; }
:root[data-huelle="glas"] .seitenleiste-titel { display: inline-flex; align-items: center; gap: var(--u-s-2); }
:root[data-huelle="glas"] .seitenleiste-schalter { margin: 0; }
:root[data-huelle="glas"] .seitenleiste-schalter .knopf { display: inline-flex; align-items: center; gap: var(--u-s-2); }
:root[data-huelle="glas"] .seitenleiste-zeichen { display: flex; flex-direction: column; align-items: center; gap: var(--u-s-2); margin: 0; padding: var(--u-s-2) 0; list-style: none; }
:root[data-huelle="glas"] .seitenleiste-zeichen :is(a, span) { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--u-r-md); color: var(--u-brand-text); }
:root[data-huelle="glas"] .seitenleiste-zeichen a:hover { background: var(--u-surface-alt); }
:root[data-huelle="glas"] .seitenleiste .glas-widget { flex: none; }
@container inhalt (width < 60rem) {
  :root[data-huelle="glas"] main.glasfenster > .seitenleiste { display: none; }
}
/* Q5 Teil 3: gelöste Fenster (olymp.js, Block RAHMEN), Minimieren und Nebeneinander. Lage und Größe setzt das Skript per CSSOM. */
:root[data-huelle="glas"] .fenster-frei { position: fixed; z-index: 41; display: flex; flex-direction: column; min-inline-size: 22.5rem; min-block-size: 15rem; max-inline-size: 100vw; max-block-size: calc(100dvh - var(--u-topbar-h)); overflow: hidden; resize: both; border: 1px solid var(--u-border); border-radius: var(--u-r-lg); background: var(--u-surface); box-shadow: var(--u-e-fenster); color: var(--u-text); }
:root[data-huelle="glas"] .frei-kopf { display: flex; flex: none; align-items: center; gap: var(--u-s-3); min-block-size: max(var(--u-s-10), var(--u-ziel-min)); padding-inline: var(--u-s-4) var(--u-s-2); background: var(--u-fenster-titel); cursor: grab; touch-action: none; user-select: none; }
:root[data-huelle="glas"] .frei-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: var(--u-w-strong); text-overflow: ellipsis; white-space: nowrap; }
:root[data-huelle="glas"] .frei-koerper { container: inhalt / inline-size; flex: 1 1 auto; min-height: 0; padding: var(--u-s-5) var(--u-s-6); overflow: auto; overscroll-behavior: contain; }
:root[data-huelle="glas"] .frei-koerper > :is(.glasfenster-titel, .glasfenster-pfad) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
:root[data-huelle="glas"] .frei-koerper[aria-busy="true"] { opacity: .6; }
:root[data-huelle="glas"] .fenster-knopf-wort { font-size: var(--u-t-xs); }
:root[data-huelle="glas"] :is(.fensterkopf, .frei-kopf) [data-fenster-loesen], :root[data-huelle="glas"] [data-frei-andocken] { display: inline-flex; flex-direction: row; align-items: center; inline-size: auto; padding-inline: var(--u-s-3); gap: var(--u-s-2); }
:root[data-huelle="glas"][data-fenster-min] main.glasfenster:has(> .glasfenster-koerper > .fensterkopf > .fenster-reiter) { visibility: hidden; }
:root[data-huelle="glas"][data-nebeneinander] main.glasfenster:has(> .glasfenster-koerper > .fensterkopf > .fenster-reiter) { padding-inline-end: calc(50vw + var(--u-s-2)); }
:root[data-huelle="glas"][data-nebeneinander] main.glasfenster > .seitenleiste { display: none; }
:root[data-huelle="glas"] .fl-chip.ist-weg :is(.fl-wort)::after { content: " · minimiert"; content: " · minimiert" / ""; color: var(--u-text-muted); }
/* Die obere Leiste liegt über der Fensterleiste: ihre Aufklapper (Menü, Mandant, Benutzer) öffnen nach unten über sie hinweg. */
:root[data-huelle="glas"] .kopfleiste > .kopf-leiste { position: relative; z-index: 2; }
/* ══ ENDE Q5 Teil 1 ══ */

/* ══ Q6 AGENTEN-HUB (Manuel 16.10.2026: „das innere Fenster bitte raus … auf die ganze Fenstergröße“) ══ Die Gesprächsfläche ist
   keine Karte im Fenster mehr: sie füllt den Körper bündig bis an die Ränder (die Polsterung des Körpers wird aufgehoben), ihre Höhe
   kommt aus dem Fenster statt aus `--u-rahmen-h`. Titel und Pfad bleiben für Vorleser. Kopf: runder Avatar mit Zustandsring statt
   Figurkachel, der Name ohne Schild. Antworten des Agenten als ruhige Karte, die eigenen auf getönter Fläche. Nur Rollen. */
:root[data-huelle="glas"] .glasfenster-koerper:has(> .chat-flaeche) { display: flex; flex-direction: column; }
:root[data-huelle="glas"] .glasfenster-koerper:has(> .chat-flaeche) > :is(.glasfenster-titel, .glasfenster-pfad) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
:root[data-huelle="glas"] .glasfenster-koerper > .chat-flaeche { flex: 1 1 auto; height: auto; min-height: 24rem; margin: 0 calc(-1 * var(--u-s-8)) calc(-1 * var(--u-s-8)); border: 0; border-radius: 0; box-shadow: none; }
:root[data-huelle="glas"] .chat-flaeche .chat-kopfzeile > .chat-kopf-figur { display: none; }
:root[data-huelle="glas"] .chat-flaeche .chat-kopfzeile:has(> .chat-kopf-figur) > .chat-kopf-avatar { display: inline-flex; }
:root[data-huelle="glas"] .chat-flaeche .chat-kopfzeile > .chat-kopf-avatar { inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; object-fit: cover; }
:root[data-huelle="glas"] .chat-karte .chat-kopfzeile .chat-kopfzeile-name { padding: 0; color: var(--u-text); font-family: inherit; font-size: var(--u-t-xl); font-weight: var(--u-w-strong); letter-spacing: 0; text-transform: none; }
:root[data-huelle="glas"] .chat-karte .chat-kopfzeile .chat-kopfzeile-name::before { content: none; }
:root[data-huelle="glas"] .chat-karte .nachricht-agent .nachricht-blase { --u-blase-bg: var(--u-surface); --u-blase-fg: var(--u-text); --u-blase-neben: var(--u-text-muted); --u-blase-link: var(--u-brand-text); --u-blase-code: var(--u-surface-3); --u-blase-spitze: var(--u-surface); border: 1px solid var(--u-border); }
:root[data-huelle="glas"] .chat-karte .nachricht-mensch .nachricht-blase { --u-blase-bg: var(--u-surface-3); --u-blase-fg: var(--u-text); --u-blase-neben: var(--u-text-muted); --u-blase-link: var(--u-brand-text); --u-blase-code: var(--u-surface-alt); --u-blase-spitze: var(--u-surface-3); }
:root[data-huelle="glas"] .chat-reiter { display: flex; flex: none; gap: var(--u-s-2); padding: 0 var(--u-s-7); border-bottom: 1px solid var(--u-border); background: var(--u-surface); overflow-x: auto; scrollbar-width: none; }
:root[data-huelle="glas"] .chat-reiter-ziel { display: inline-flex; align-items: center; gap: var(--u-s-2); min-block-size: max(2.5rem, var(--u-ziel-min)); padding: 0 var(--u-s-3); border-bottom: 2px solid transparent; color: var(--u-text-muted); font-size: var(--u-t-sm); text-decoration: none; white-space: nowrap; }
:root[data-huelle="glas"] .chat-reiter-ziel:hover { color: var(--u-text); }
:root[data-huelle="glas"] .chat-reiter-ziel[aria-current] { border-bottom-color: var(--u-brand-hell); color: var(--u-text); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .werkzeug-aufklapper { margin-block-start: var(--u-s-3); }
:root[data-huelle="glas"] .werkzeug-aufklapper > summary { display: inline-flex; align-items: center; gap: var(--u-s-2); color: var(--u-blase-neben, var(--u-text-muted)); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); cursor: pointer; }
:root[data-huelle="glas"] .werkzeug-aufklapper > .werkzeug-leiste { margin-block-start: var(--u-s-2); }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .glasfenster-koerper > .chat-flaeche { margin-inline: calc(-1 * var(--u-s-5)); }
}
/* ══ ENDE Q6 ══ */

/* ══ AVATAR-BAUSTEIN (_huelle/avatar): der Zustandsring hängt an data-zustand, gleich an jeder Stelle. ══ */
:root[data-huelle="glas"] :is(img, span)[data-zustand="wartet"] { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-neon-magenta); }
:root[data-huelle="glas"] :is(img, span)[data-zustand="arbeitet"] { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-ok); }
:root[data-huelle="glas"] :is(img, span)[data-zustand="pause"] { box-shadow: 0 0 0 2px var(--u-surface), 0 0 0 4px var(--u-warn); }
:root[data-huelle="glas"] .start-agent-bild { flex: none; inline-size: 24px; block-size: 24px; border-radius: 50%; object-fit: cover; }
:root[data-huelle="glas"] .rdock-agent-bild { flex: none; }
/* ══ ENDE AVATAR ══ */

/* ══ AGENTENSPALTE DER AKTEN (Reste nach Q7): Avatar im Kopf, Konfidenzbalken ══ */
:root[data-huelle="glas"] .akte-chat-avatar { flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; object-fit: cover; }
:root[data-huelle="glas"] span.akte-chat-avatar { display: grid; place-items: center; background: var(--u-surface-alt); color: var(--u-brand-text); font-size: var(--u-t-xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .konfidenz { display: inline-flex; align-items: center; gap: var(--u-s-2); }
:root[data-huelle="glas"] .konfidenz-balken { inline-size: 5rem; block-size: var(--u-s-2); }
/* ══ ENDE AGENTENSPALTE ══ */

/* ══ WIDGET-RAHMEN (Manuel 16.10.2026: „moderner, besser ins Design, Knöpfe kleiner und wie bei den Fenstern“) ══ Kopf als kleine
   Überschrift mit Bereichszeichen, Knöpfe als randlose Zeichenknöpfe wie in der Titelleiste (am Touchgerät wieder voll groß über
   --u-ziel-min), der Inhalt liegt direkt auf der Widget-Fläche statt in einem zweiten Kasten, der Fuß als feine Zeile. Die Lobby-Regel
   der Zielgröße in olymp.css bleibt (Prüfung pruefe_lobby), hier nur die Darstellung. */
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) { gap: var(--u-s-3); padding: var(--u-s-4) var(--u-s-5) var(--u-s-3); border-radius: var(--u-r-xl); }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) > .widget-kopf { min-block-size: 1.75rem; }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) .widget-titel { display: inline-flex; align-items: center; gap: var(--u-s-2); min-width: 0; margin: 0; 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; }
:root[data-huelle="glas"] .widget-zeichen { flex: none; inline-size: 1rem; block-size: 1rem; color: var(--u-brand-text); }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) .widget-knoepfe { gap: 2px; }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) .widget-knopf { display: inline-grid; place-items: center; min-width: 0; min-block-size: 0; inline-size: max(1.75rem, var(--u-ziel-min)); block-size: max(1.75rem, var(--u-ziel-min)); padding: 0; border: 0; border-radius: var(--u-r-sm); background: transparent; box-shadow: none; color: var(--u-text-muted); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) .widget-knopf:is(:hover, :focus-visible) { background: var(--u-surface-alt); color: var(--u-text); }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) .widget-knopf .sym { grid-area: 1 / 1; inline-size: 1rem; block-size: 1rem; }
/* Klappen mit demselben Zeichen wie „Minimieren“ im Fensterkopf (ph-minus); zugeklappt setzt ein Strich das Plus (kein ph-plus im Blatt). */
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) .widget-knopf[aria-expanded]::before { content: none; }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) .widget-knopf[aria-expanded="false"]::after { content: ""; grid-area: 1 / 1; inline-size: 1.5px; block-size: 0.625rem; border-radius: 1px; background: currentColor; }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) > .widget-inhalt { min-block-size: 3rem; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-huelle="glas"] .glas-widget:not(.widget-mitte) > .widget-fuss { padding-block-start: var(--u-s-2); border-top: 1px solid var(--u-border); }
/* Die Karten der Kennzahlenspalte (Umsatz, Nach Marktplatz, Agenten, Läufe) im selben Rahmen wie die Widgets (Manuel 16.10.2026). */
:root[data-huelle="glas"] .start-leiste :is(.start-karte, .start-kpi) { border-radius: var(--u-r-xl); }
:root[data-huelle="glas"] .start-leiste .start-karte { padding: var(--u-s-4) var(--u-s-5) var(--u-s-3); }
:root[data-huelle="glas"] .start-leiste .start-karte-kopf { align-items: center; min-block-size: 1.75rem; padding: 0 0 var(--u-s-2); }
:root[data-huelle="glas"] .start-leiste .start-karte-kopf h3 { 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; }
/* ══ ENDE WIDGET-RAHMEN ══ */

/* ══ F3 FENSTER JE BEREICH (Manuel 16.10.2026: „alles aus Verkauf bleibt in einem Fenster … Fenster für den Bereich minimieren“) ══
   Im Fensterkopf steht vor den Reitern der Bereich des Fensters; in der Fensterleiste je Fenster ein Chip mit der Zahl seiner Reiter und
   einem ✕ (das ganze Fenster schließen). Nicht gezeigte Fenster stehen gedämpft (minimiert). */
:root[data-huelle="glas"] .fenster-bereich { display: inline-flex; flex: none; align-items: center; gap: var(--u-s-2); margin-inline-end: var(--u-s-2); padding-inline-end: var(--u-s-4); border-right: 1px solid var(--u-fenster-titel-leise); color: var(--u-fenster-titel-text); font-size: var(--u-t-sm); font-weight: var(--u-w-strong); white-space: nowrap; }
:root[data-huelle="glas"] .fenster-bereich .fenster-bereich-zeichen { width: var(--u-s-7); height: var(--u-s-7); }
:root[data-huelle="glas"] .fl-fenster { position: relative; display: flex; flex: none; }
:root[data-huelle="glas"] .fl-fenster > .fl-chip { padding-inline-end: var(--u-s-8); }
:root[data-huelle="glas"] .fl-chip.ist-minimiert { color: var(--u-text-muted); }
:root[data-huelle="glas"] .fl-zahl { min-inline-size: 1.125rem; padding: 0 var(--u-s-1); border-radius: var(--u-r-full); background: var(--u-surface-alt); color: var(--u-text-muted); font-size: var(--u-t-2xs); font-variant-numeric: tabular-nums; text-align: center; }
:root[data-huelle="glas"] .fl-chip[aria-current] .fl-zahl { background: var(--u-brand-line); color: var(--u-text); }
:root[data-huelle="glas"] .fl-chip-zu { position: absolute; inset-block: 0; inset-inline-end: 2px; display: flex; align-items: center; margin: 0; }
:root[data-huelle="glas"] .fl-chip-knopf { display: inline-grid; place-items: center; inline-size: max(1.25rem, var(--u-ziel-min)); block-size: max(1.25rem, var(--u-ziel-min)); padding: 0; border: 0; border-radius: var(--u-r-sm); background: transparent; color: var(--u-text-muted); cursor: pointer; opacity: .6; }
:root[data-huelle="glas"] .fl-chip-knopf:is(:hover, :focus-visible) { background: var(--u-surface-alt); color: var(--u-text); opacity: 1; }
:root[data-huelle="glas"] .fl-chip-knopf .sym { inline-size: .75rem; block-size: .75rem; }
@container inhalt (width < 44rem) {
  :root[data-huelle="glas"] .fenster-bereich-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* ══ ENDE F3 ══ */
/* Olymp-Team (17.10.2026): die Berufsbezeichnung im Gesprächskopf, vor Zustand und Mandant. */
:root[data-huelle="glas"] .chat-kopf-beruf { color: var(--u-text-2); font-weight: var(--u-w-strong); }
/* Olymp-Team (17.10.2026): die Berufsbezeichnung als eigene, dezente Zeile unter dem Namen in der Agentengruppe des Docks
   (Manuel: „in eine neue Zeile“) — Name, Beruf, Zustand. */
:root[data-huelle="glas"] .rdock-agent-text { max-inline-size: 11rem; line-height: 1.15; }
:root[data-huelle="glas"] .rdock-agent-text .rdock-agent-beruf { color: var(--u-brand-text); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); letter-spacing: .02em; }
/* Dock-Overlay (17.10.2026): der Agent im Dock ist ein Knopf in einem Formular (öffnet sein Gespräch als Blase) — sieht aus wie der Verweis. */
:root[data-huelle="glas"] .rdock-agent-form { display: contents; }
:root[data-huelle="glas"] button.rdock-agent { border: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; }
:root[data-huelle="glas"] button.rdock-agent:focus-visible { background: var(--u-surface-alt); }
/* Dock-Overlay: ⤢ in der Blase heißt jetzt „Im AI Hub öffnen (Vollbild)“ (Manuel 17.10.2026); das Vergrößern der Blase entfällt sichtbar,
   sonst stünden zwei gleiche Zeichen nebeneinander. */
:root[data-huelle="glas"] .ebene-fenster-knopf[data-ebene-fenster="gross"] { display: none; }
/* Dock-Overlay als SPRECHBLASE (Manuel 17.10.2026): das Blatt der Chat-Ebene steht über dem angeklickten Agenten im Dock, mit Zipfel auf ihn
   (`data-blase` am <html>, Lage per CSSOM aus olymp.js Block RAHMEN). Die Reiterleiste der Ebene ruht — der Agent im Dock ist der Reiter. */
:root[data-huelle="glas"][data-blase] .ebene-blatt { position: fixed; right: auto; left: var(--blase-links, 50%); bottom: calc(var(--u-dock-h) + var(--u-s-6) + env(safe-area-inset-bottom)); inline-size: min(24rem, calc(100vw - var(--u-s-8))); block-size: min(32rem, calc(.62 * var(--u-sicht-h))); overflow: visible; }

:root[data-huelle="glas"][data-blase] .ebene-leiste { display: none; }
/* Die Blase im Stil der Widgets (Manuel 17.10.2026: „grafisch an die Seite und den Stil angepasst“): im hellen Modus helles Glas über
   den hellen Rollensatz (rollen-hell.css), Rundung wie ein Widget, ruhiger Schatten. */
/* COMIC-SPRECHBLASE (Manuel 17.10.2026: „mehr als klassische Sprechblase im Comic-/Anime-Stil … soll darstellen, dass der Agent mir gerade
   was sagen will“): kräftige Tuschelinie in der Textfarbe (hell im dunklen Modus), stark gerundet, harter versetzter Schatten in der
   Markenfarbe statt des weichen Glasschattens, und ein schräger Zipfel mit derselben Linie zum Agenten im Dock: ::before ist die Linie,
   ::after die Füllung, beide als Dreieck (clip-path), die Füllung um die Linienstärke kleiner. */
:root[data-huelle="glas"][data-blase] .ebene-blatt { border: 3px solid var(--u-text); border-radius: 1.75rem; background: var(--u-surface); box-shadow: 6px 7px 0 var(--u-brand-line); }
:root[data-huelle="glas"][data-blase] .ebene-blatt::before,
:root[data-huelle="glas"][data-blase] .ebene-blatt::after { content: ""; position: absolute; left: var(--blase-zipfel, 50%); clip-path: polygon(0 0, 100% 0, 18% 100%); pointer-events: none; }
:root[data-huelle="glas"][data-blase] .ebene-blatt::before { bottom: -26px; inline-size: 34px; block-size: 27px; translate: -40% 0; background: var(--u-text); }
:root[data-huelle="glas"][data-blase] .ebene-blatt::after { bottom: -19px; inline-size: 25px; block-size: 21px; translate: calc(-40% + 1px) 0; background: var(--u-surface); }
/* Die Eingabe der Sprechblase kompakt (Manuel 17.10.2026: „Senden-Knöpfe etwas kleiner und besser ins Design“): EINE Zeile — Feld, Klammer,
   Plan-Schalter ohne Wort, Senden als kleine Pille in der Markenfarbe; ohne den Neon-Strich darüber. */
:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe::before { display: none; }
:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe .chat-eingabe-reihe { flex-wrap: nowrap; align-items: center; gap: var(--u-s-2); }
:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe .chat-eingabe-reihe textarea { flex: 1 1 auto; min-inline-size: 0; min-block-size: 2.25rem; padding: var(--u-s-2) var(--u-s-5); border-radius: 1.125rem; font-size: var(--u-t-sm); }
:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe .chat-anhang-knopf { flex: none; inline-size: max(2rem, var(--u-ziel-min)); block-size: max(2rem, var(--u-ziel-min)); min-inline-size: 0; min-block-size: 0; padding: 0; border: 0; background: transparent; color: var(--u-text-muted); }
:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe .chat-anhang-knopf:hover { background: var(--u-surface-alt); color: var(--u-text); }
:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe .plan-schalter { flex: none; gap: 0; }
:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe .plan-schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe .chat-senden { flex: none; min-inline-size: 0; min-block-size: max(2rem, var(--u-ziel-min)); padding: 0 var(--u-s-5); border-radius: var(--u-r-full); font-size: var(--u-t-sm); }

:root[data-huelle="glas"][data-blase] .chat-instanz-eingabe .chat-eingabe-reihe textarea::placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ══ ZURUFE IM DOCK (Z2/Z3, Manuel 17.10.2026) ══ Puls und Zahl am Agenten (`data-zuruf`), Freigabe in Magenta und bis zur Entscheidung
   (`data-freigabe`), dringend kräftiger; Vorschau-Blase über dem Agenten im Comic-Stil der Sprechblase; Block „Andere“ mit Mandantenring;
   „Nicht stören“ als Mond. Bewegung immer × --u-bewegung (aus = kein Puls, die Zahl bleibt). */
@keyframes zuruf-puls { 0% { box-shadow: 0 0 0 0 var(--u-neon-violett-glow); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes zuruf-puls-freigabe { 0% { box-shadow: 0 0 0 0 var(--u-neon-magenta-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
:root[data-huelle="glas"] :is(.rdock-agent, .rdock-fremd-knopf) { position: relative; }
:root[data-huelle="glas"] :is(.rdock-agent, .rdock-fremd-knopf)[data-zuruf] :is(.rdock-agent-bild, .rdock-fremd-bild) { animation: zuruf-puls calc(1.8s * var(--u-bewegung)) var(--u-ease) infinite; }
:root[data-huelle="glas"] :is(.rdock-agent, .rdock-fremd-knopf)[data-freigabe] :is(.rdock-agent-bild, .rdock-fremd-bild) { outline: 2px solid var(--u-neon-magenta); outline-offset: 1px; animation: zuruf-puls-freigabe calc(1.4s * var(--u-bewegung)) var(--u-ease) infinite; }
:root[data-huelle="glas"] :is(.rdock-agent, .rdock-fremd-knopf)[data-dringend] :is(.rdock-agent-bild, .rdock-fremd-bild) { animation-duration: calc(.9s * var(--u-bewegung)); }
:root[data-huelle="glas"] .rdock-zuruf-zahl { position: absolute; inset-block-start: -2px; inset-inline-start: 1.6rem; min-inline-size: 1.1rem; padding: 0 var(--u-s-1); border-radius: var(--u-r-full); background: var(--u-brand); color: var(--u-text-on-brand); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); line-height: 1.1rem; text-align: center; }
:root[data-huelle="glas"] [data-freigabe] > .rdock-zuruf-zahl { background: var(--u-neon-magenta); }
:root[data-huelle="glas"] .rdock-ruhe { display: contents; }
:root[data-huelle="glas"] .rdock-ruhe-knopf { display: inline-grid; place-items: center; align-self: center; inline-size: max(1.75rem, var(--u-ziel-min)); block-size: max(1.75rem, var(--u-ziel-min)); margin-inline-start: var(--u-s-2); padding: 0; border: 0; border-radius: var(--u-r-full); background: transparent; color: var(--u-text-muted); cursor: pointer; }
:root[data-huelle="glas"] .rdock-ruhe-knopf:is(:hover, :focus-visible) { background: var(--u-surface-alt); color: var(--u-text); }
:root[data-huelle="glas"] .rdock-ruhe-knopf[aria-pressed="true"] { background: var(--u-brand-wash); color: var(--u-brand-text); }
:root[data-huelle="glas"] .rdock-ruhe-knopf .sym { inline-size: 1rem; block-size: 1rem; }
:root[data-huelle="glas"] .rdock-fremd { display: flex; align-items: center; gap: var(--u-s-2); margin: 0; padding: 0 0 0 var(--u-s-3); border-inline-start: 1px dashed var(--u-border); list-style: none; }
:root[data-huelle="glas"] .rdock-fremd-knopf { display: grid; place-items: center; padding: 2px; border: 0; border-radius: var(--u-r-full); background: transparent; cursor: pointer; }
:root[data-huelle="glas"] .rdock-fremd-bild { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; object-fit: cover; background: var(--u-surface-alt); box-shadow: 0 0 0 2px var(--u-border); font-size: var(--u-t-2xs); }
:root[data-huelle="glas"] [data-mandant-farbe="1"] .rdock-fremd-bild { box-shadow: 0 0 0 2px var(--u-mandant-1); }
:root[data-huelle="glas"] [data-mandant-farbe="2"] .rdock-fremd-bild { box-shadow: 0 0 0 2px var(--u-mandant-2); }
:root[data-huelle="glas"] [data-mandant-farbe="3"] .rdock-fremd-bild { box-shadow: 0 0 0 2px var(--u-mandant-3); }
:root[data-huelle="glas"] [data-mandant-farbe="4"] .rdock-fremd-bild { box-shadow: 0 0 0 2px var(--u-mandant-4); }
:root[data-huelle="glas"] [data-mandant-farbe="5"] .rdock-fremd-bild { box-shadow: 0 0 0 2px var(--u-mandant-5); }
:root[data-huelle="glas"] [data-mandant-farbe="6"] .rdock-fremd-bild { box-shadow: 0 0 0 2px var(--u-mandant-6); }
:root[data-huelle="glas"] .rdock-vorschau { position: fixed; z-index: var(--u-z-widget); left: var(--vorschau-links, 50%); bottom: calc(var(--u-dock-h) + var(--u-s-6) + env(safe-area-inset-bottom)); display: grid; gap: var(--u-s-2); inline-size: min(18rem, calc(100vw - var(--u-s-8))); padding: var(--u-s-4) var(--u-s-5); border: 3px solid var(--u-text); border-radius: 1.5rem; background: var(--u-surface); box-shadow: 5px 6px 0 var(--u-brand-line); color: var(--u-text); animation: huelle-kopf-auf calc(var(--u-dur-3) * var(--u-bewegung)) var(--u-ease); }
:root[data-huelle="glas"] .rdock-vorschau::before,
:root[data-huelle="glas"] .rdock-vorschau::after { content: ""; position: absolute; left: var(--vorschau-zipfel, 50%); clip-path: polygon(0 0, 100% 0, 18% 100%); pointer-events: none; }
:root[data-huelle="glas"] .rdock-vorschau::before { bottom: -22px; inline-size: 28px; block-size: 23px; translate: -40% 0; background: var(--u-text); }
:root[data-huelle="glas"] .rdock-vorschau::after { bottom: -15px; inline-size: 20px; block-size: 17px; translate: calc(-40% + 1px) 0; background: var(--u-surface); }
:root[data-huelle="glas"] .rdock-vorschau[data-dringend] { border-color: var(--u-neon-magenta); box-shadow: 5px 6px 0 var(--u-neon-magenta-glow); }
:root[data-huelle="glas"] .rdock-vorschau-kopf { display: flex; align-items: center; gap: var(--u-s-2); margin: 0; padding-inline-end: var(--u-s-6); font-size: var(--u-t-sm); }
:root[data-huelle="glas"] .rdock-vorschau-mandant { padding: 0 var(--u-s-2); border-radius: var(--u-r-full); background: var(--u-surface-alt); color: var(--u-text-2); font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); }
:root[data-huelle="glas"] .rdock-vorschau-mandant[data-mandant-farbe="1"] { box-shadow: inset 0 0 0 1px var(--u-mandant-1); }
:root[data-huelle="glas"] .rdock-vorschau-mandant[data-mandant-farbe="2"] { box-shadow: inset 0 0 0 1px var(--u-mandant-2); }
:root[data-huelle="glas"] .rdock-vorschau-satz { margin: 0; font-size: var(--u-t-sm); line-height: 1.35; }
:root[data-huelle="glas"] .rdock-vorschau-taten { display: flex; align-items: center; gap: var(--u-s-2); margin: 0; }
:root[data-huelle="glas"] .rdock-vorschau-knopf { display: inline-flex; align-items: center; min-block-size: max(1.75rem, var(--u-ziel-min)); padding: 0 var(--u-s-4); border: 1px solid var(--u-border); border-radius: var(--u-r-full); background: var(--u-surface); color: var(--u-text); font: inherit; font-size: var(--u-t-xs); font-weight: var(--u-w-strong); text-decoration: none; cursor: pointer; }
:root[data-huelle="glas"] .rdock-vorschau-knopf.ist-haupt { border-color: transparent; background: var(--u-brand); color: var(--u-text-on-brand); }
:root[data-huelle="glas"] .rdock-vorschau-zu { position: absolute; inset-block-start: var(--u-s-2); inset-inline-end: var(--u-s-2); display: grid; place-items: center; inline-size: max(1.5rem, var(--u-ziel-min)); block-size: max(1.5rem, var(--u-ziel-min)); padding: 0; border: 0; border-radius: var(--u-r-full); background: transparent; color: var(--u-text-muted); cursor: pointer; }
:root[data-huelle="glas"] .rdock-vorschau-zu .sym { inline-size: .85rem; block-size: .85rem; }
/* ══ ENDE ZURUFE IM DOCK ══ */
/* ══ GEFÜHRTER MODUS (G1, Manuel 17.10.2026) ══ Agenten-Zeiger aus public/assets/fuehrung.js: Avatar mit Pfeil gleitet zum Ziel, Ring
   darum, Satz als Mini-Sprechblase im Stil der Vorschau. NICHT modal — kein Schleier, die Seite bleibt bedienbar (nur der Stopp-Knopf
   nimmt Zeiger). Lage per CSSOM (`--fz-*`), Gleiten × `--u-bewegung`. */
:root[data-huelle="glas"] .fuehrung { position: fixed; inset: 0; z-index: var(--u-z-menu); pointer-events: none; }
:root[data-huelle="glas"] .fuehrung-ring { position: absolute; inset: var(--fz-ry, 0) auto auto var(--fz-rx, 0); inline-size: var(--fz-rb, 0); block-size: var(--fz-rh, 0); border-radius: var(--u-r-md); box-shadow: 0 0 0 3px var(--u-brand), 0 0 0 7px var(--u-brand-line); transition: inset calc(var(--u-dur-4) * var(--u-bewegung)) var(--u-ease), inline-size calc(var(--u-dur-4) * var(--u-bewegung)) var(--u-ease), block-size calc(var(--u-dur-4) * var(--u-bewegung)) var(--u-ease); animation: fuehrung-puls calc(1600ms * var(--u-bewegung)) var(--u-ease) infinite; }
:root[data-huelle="glas"] .fuehrung-zeiger { position: absolute; inset: var(--fz-y, auto) auto auto var(--fz-x, 50%); display: flex; align-items: flex-start; gap: var(--u-s-2); inline-size: min(17rem, calc(100vw - var(--u-s-6))); transition: inset calc(var(--u-dur-4) * var(--u-bewegung)) var(--u-ease); }
:root[data-huelle="glas"] .fuehrung-figur { position: relative; flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 3px solid var(--u-text); border-radius: var(--u-r-full); background: var(--u-surface); color: var(--u-text); font-size: var(--u-t-xs); font-weight: var(--u-w-heavy); box-shadow: 3px 4px 0 var(--u-brand-line); overflow: visible; }
:root[data-huelle="glas"] .fuehrung-figur img { inline-size: 100%; block-size: 100%; border-radius: inherit; object-fit: cover; }
/* Der Pfeil: zeigt vom Avatar schräg nach oben links aufs Ziel (über dem Ziel: nach unten). */
:root[data-huelle="glas"] .fuehrung-figur::before { content: ""; position: absolute; inset: -14px auto auto -12px; inline-size: 16px; block-size: 16px; background: var(--u-brand); clip-path: polygon(0 0, 100% 45%, 45% 100%); }
:root[data-huelle="glas"] .fuehrung-zeiger[data-oben] .fuehrung-figur::before { inset: auto auto -14px -12px; clip-path: polygon(0 100%, 45% 0, 100% 55%); }
:root[data-huelle="glas"] .fuehrung-blase { display: grid; gap: var(--u-s-1); min-inline-size: 0; padding: var(--u-s-3) var(--u-s-4); border: 3px solid var(--u-text); border-radius: 1.25rem; background: var(--u-surface); box-shadow: 4px 5px 0 var(--u-brand-line); color: var(--u-text); }
:root[data-huelle="glas"] .fuehrung-name { font-size: var(--u-t-xs); }
:root[data-huelle="glas"] .fuehrung-satz { margin: 0; font-size: var(--u-t-sm); line-height: 1.35; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .fuehrung-stopp { justify-self: start; min-block-size: max(1.5rem, var(--u-ziel-min)); padding: 0 var(--u-s-3); border: 1px solid var(--u-border); border-radius: var(--u-r-full); background: var(--u-surface); color: var(--u-text); font: inherit; font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); cursor: pointer; pointer-events: auto; }
/* Vom Agenten vorausgefüllte Felder bleiben markiert, bis der Mensch sie ändert oder absendet. */
:root[data-huelle="glas"] [data-fuehrung-gefuellt] { outline: 2px dashed var(--u-brand); outline-offset: 2px; }
@keyframes fuehrung-puls { 50% { box-shadow: 0 0 0 3px var(--u-brand), 0 0 0 11px transparent; } }
@media (forced-colors: active) {
  :root[data-huelle="glas"] .fuehrung-ring { box-shadow: none; outline: 3px solid Highlight; }
}
/* G2: „Zeig’s mir“ im Kopf der Sprechblase — Pille, an = Markenfarbe. */
:root[data-huelle="glas"] .ebene-fuehrung { min-block-size: max(1.5rem, var(--u-ziel-min)); margin-inline-end: var(--u-s-2); padding: 0 var(--u-s-3); border: 1px solid var(--u-border); border-radius: var(--u-r-full); background: var(--u-surface); color: var(--u-text-2); font: inherit; font-size: var(--u-t-2xs); font-weight: var(--u-w-strong); white-space: nowrap; cursor: pointer; }
:root[data-huelle="glas"] .ebene-fuehrung[aria-pressed="true"] { border-color: transparent; background: var(--u-brand); color: var(--u-text-on-brand); }
/* ══ ENDE GEFÜHRTER MODUS ══ */
/* Leiste „Wartet auf dich“ (19.10.2026): klebt über dem Eingabefeld; Sprungziel einer Karte aus Push/Leiste hervorgehoben. */
:root[data-huelle="glas"] .chat-wartet { position: sticky; bottom: 0; z-index: var(--u-z-sticky); display: grid; gap: var(--u-s-2); margin-top: var(--u-s-3); padding: var(--u-s-2) var(--u-s-3); border: 1px solid var(--u-neon-magenta); border-radius: var(--u-r-md); background: var(--u-surface); }
:root[data-huelle="glas"] .chat-wartet-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-s-2); }
:root[data-huelle="glas"] .chat-wartet-text { flex: 1 1 16rem; margin: 0; overflow-wrap: anywhere; }
:root[data-huelle="glas"] .freigabe-karte:target { outline: 2px solid var(--u-neon-magenta); outline-offset: 2px; }
/* Unter Kollegen (19.10.2026): Rückfrage/Antwort zwischen Agenten im Gespräch — gedämpfte Blase. */
:root[data-huelle="glas"] .nachricht-kollege .nachricht-blase { border-style: dashed; background: var(--u-surface-alt); }
:root[data-huelle="glas"] .kollege-kopf { display: flex; align-items: center; gap: var(--u-s-1); margin: 0 0 var(--u-s-1); color: var(--u-text-2); font-size: var(--u-t-2xs); }