/* ============================================================================
   glass.css — Liquid-Glass DESIGN-TOKENS (Single Source of Truth)
   Plan 37 / Stufe 4 Runde 1 · BP-1 (Tokens-Ebene, additiv NEBEN hlidskjalf.css).

   Diese Datei ist AUSSCHLIESSLICH die Tokens-Ebene: `:root` (light) + die
   `[data-theme="dark"]`-Spiegelung. Komponenten-Stile (Sidebar, Content-Karte,
   Nav, Tabellen …) folgen in BP-3/BP-4 in templates/glass/* und referenzieren
   NUR diese Custom Properties. Keine Hartcodierung von Farben/Abstaenden/Radien/
   Typo ausserhalb der Token-Bloecke — Marke NUR aus --brand-primary/--brand-accent,
   alle Ableitungen via color-mix(). Dark = gespiegelte Tokens im SELBEN System.

   Deckungsgleich mit:
     - Referenz-Mockup id 6 (plan 34, dashboard-liquid-glass) Z.14-74
     - Vorlage `liquid-glass` §2 (vorlage:1, active v2)

   ----------------------------------------------------------------------------
   A10 — VORLAGE-DRIFT-STEMPEL (maschinenlesbar, KEIN Marken-String).
   Der folgende Pin traegt den content_hash der vorlage:1-active-Version, gegen
   den zur Bauzeit die Token-Werte destilliert wurden. Ein KONKRETER Drift-Test
   (backend/tests/test_glass_tokens.py::test_vorlage_pin_matches_active_hash)
   liest diesen Pin und vergleicht ihn gegen die LIVE Asgard-API
   (GET /v1/vorlagen/1 -> active version content_hash) und SCHLAEGT FEHL bei
   Mismatch. Bei einer Vorlage-Aktualisierung: Tokens neu abgleichen, dann diesen
   Pin auf den neuen active-hash setzen.

   @vorlage-pin vorlage:1 active content_hash sha256:a0f2a2dd036e504c1a6a73590028fa591f6c05c96a3fc986d41f68f186f1682a
   ========================================================================== */

:root{
  /* -- Marke (im Umbau aus White-Label injiziert; hier fixe Demo-Marke) -- */
  --brand-primary:#2563eb;
  --brand-accent:#1d4ed8;
  --brand-primary-soft:color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --brand-primary-tint:color-mix(in srgb, var(--brand-primary) 8%, white);
  --brand-gradient:linear-gradient(180deg, var(--brand-primary), var(--brand-accent));

  /* -- Neutrale Ink-Skala (Text/Linien) --
     A18 (BP-8, journal 349): ink-300/ink-400 gegen den Vorlage-§2-Beispiel-Hex (#a7a7b2/#84848f)
     ABGEDUNKELT bis >= 4.5:1 Normaltext-Kontrast auf dem Worst-Case-Glas (Opazitaets-Boden .55
     ueber dem dunkelsten gesampelten Ambient (194,210,243) -> bg (228,235,250)). Bewusster Drift
     zu §2 (§5-DoD AA hat Vorrang, Vorlagen-Anwende-Doktrin); Messwerte: ink-300 4.66:1,
     ink-400 4.95:1. */
  --ink-900:#0b0b0f; --ink-700:#2b2b31; --ink-500:#5b5b66;
  --ink-400:#63636d; --ink-300:#676771;
  --line:rgba(20,20,30,.08);

  /* -- Status (Rot NUR fuer echte Gefahr) -- */
  --ok:#059669; --warn:#b45309; --danger:#dc2626;
  --ok-soft:color-mix(in srgb, var(--ok) 14%, transparent);
  --danger-soft:color-mix(in srgb, var(--danger) 14%, transparent);

  /* -- A18 (BP-8 + Vollsweep) AA-Text-Varianten: Brand/OK/Warn/Danger als KLEINER Text auf Glas.
     --brand-primary/--ok/--warn/--danger bleiben die vividen Flaechen-/Fuell-/Rand-Farben (aktive
     Nav auf WEISS 5.17:1, Fortschritt, Chrome, Badge-Raender, *-soft-Banner-Fuellungen). Sitzt eine
     Marken-/Statusfarbe dagegen als Normaltext AUF Glas — und besonders auf ihrem eigenen -soft-
     GETOENTEN Glas (Banner/Pill) —, verlangt AA >= 4.5:1. Diese Varianten sind gegen den WORST-CASE
     (Ton ueber Glas am Opazitaets-Boden) gepruft: brand-text 4.91:1 (auf brand-soft), ok-text
     5.33:1 (auf ok-soft), warn-text 5.23:1 (auf warn-soft), danger-text 5.08:1 (auf danger-soft).
     --on-danger = Vordergrund AUF einem SOLIDEN --danger-Button (Light: weiss, 4.83:1). --focus-ring
     = Fokus-INDIKATOR (Non-Text >= 3:1); Light = Marke, Dark aufgehellt (siehe [data-theme=dark]). */
  --brand-text:#1b4fce;
  --ok-text:#05623e;
  --warn-text:#8a3f07;
  --danger-text:#a81717;
  --on-danger:white;
  --focus-ring:var(--brand-primary);

  /* -- Glas-Ebene (nur Nav-/Steuerebene) -- */
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-brd:rgba(255,255,255,.65);
  --glass-blur:blur(30px) saturate(1.8);
  --glass-shadow:0 20px 50px -20px rgba(20,25,60,.35), 0 4px 12px -6px rgba(20,25,60,.18);
  --track:rgba(20,20,30,.08);

  /* -- Ambient-Hintergrund (§2.5) -- */
  --amb-base:#eef1f6;
  --amb-c1:color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --amb-c2:color-mix(in srgb, var(--brand-accent) 16%, transparent);
  --amb-c3:rgba(255,255,255,.7);

  /* -- Radien / Raster / Typo (§2.4) -- */
  --radius:22px; --radius-sm:14px; --radius-xs:11px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;

  /* -- 4-px-Raster (Vorlage §2.4) -- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* ------------------------------------------------------------------------
     A9 — GLAS-PANEL-OPAZITAETS-BODEN (BUILD-Anteil, Voraussetzung Stage-6-WCAG).
     Untergrenze der Deckkraft JEDES text-tragenden Glas-Panels. Kein Glas-BG-
     Token, unter dem Text sitzt, darf eine kleinere Alpha haben als dieser Boden;
     der Invariant-Test erzwingt das. Zusammen mit dem @supports-Fallback unten
     (voll deckende Unterlage, wenn backdrop-filter fehlt) sitzt Text nie auf
     purem backdrop-filter ohne kontrastsichere Unterlage.
     ---------------------------------------------------------------------- */
  --glass-opacity-floor:.55;
}

/* -- Dark: gespiegelte Tokens, invertierte Ink, dunkle Glas-Werte -- */
[data-theme="dark"]{
  /* A18 (BP-8 + Vollsweep): ink-300 gegen §2-Beispiel-Hex (#5c5e6d) AUFGEHELLT bis >= 4.5:1 auf dem
     Worst-Case-Dunkelglas (Boden .55 ueber dem hellsten gesampelten Ambient (22,48,106) -> bg
     (28,40,74)); ink-300 4.57:1. ink-400 (§2 #7f8191, 3.75:1 am strengen Boden) aufgehellt auf
     #9a9cac (5.31:1) — stellt zugleich die monotone Reihenfolge ink-300 < ink-400 < ink-500 wieder
     her (behebt die BP-8-Skalen-Kompression). */
  --ink-900:#f4f5f8; --ink-700:#d5d7e0; --ink-500:#a2a4b3;
  --ink-400:#9a9cac; --ink-300:#8e90a0;
  --line:rgba(255,255,255,.10);

  --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
  --ok-soft:color-mix(in srgb, var(--ok) 18%, transparent);
  --danger-soft:color-mix(in srgb, var(--danger) 20%, transparent);

  /* A18 AA-Text-Varianten (dunkles Glas): brand-text aufgehellt (5.14:1 auf brand-soft); ok-text =
     vivides #34d399 (5.19:1 auf ok-soft); warn-text = #fbbf24 (warn ist in Dark schon AA, 5.88:1 auf
     warn-soft); danger-text aufgehellt auf #fb8a8a (4.70:1 auf danger-soft20). --on-danger = dunkler
     Vordergrund auf dem SOLIDEN Dark-Danger-Button #f87171 (weiss waere nur 2.77:1; #2b0808 = 6.65:1).
     focus-ring aufgehellt bis >= 3:1 Non-Text (Dark-Fokusring war 2.92:1); 5.26:1. */
  --brand-text:#7aa2f7;
  --ok-text:#34d399;
  --warn-text:#fbbf24;
  --danger-text:#fb8a8a;
  --on-danger:#2b0808;
  --focus-ring:#6f9bf2;

  --glass-bg:rgba(32,34,48,.55);
  --glass-bg-strong:rgba(26,28,40,.68);
  --glass-brd:rgba(255,255,255,.14);
  --glass-shadow:0 24px 60px -20px rgba(0,0,0,.6), 0 4px 14px -6px rgba(0,0,0,.5);
  --track:rgba(255,255,255,.10);

  --amb-base:#0c0e16;
  --amb-c1:color-mix(in srgb, var(--brand-primary) 40%, transparent);
  --amb-c2:color-mix(in srgb, var(--brand-accent) 34%, transparent);
  --amb-c3:rgba(90,120,200,.20);
}

/* ============================================================================
   W1 (P11) + A9 — DECKENDE FALLBACK-UNTERLAGE ohne backdrop-filter.
   Fehlt backdrop-filter, gibt es keine Blur-Unterlage: die Glas-BG-Token werden
   auf VOLL DECKENDE Werte umdefiniert, damit Text stets auf einer kontrast-
   sicheren Unterlage sitzt (A9). Diese Werte sind AUSSCHLIESSLICH aus --amb-base
   via color-mix() abgeleitet — KEIN Farb-Hardcode (die Mockup-Dark-Hardcodes
   #191b28 / #15171f werden bewusst NICHT uebernommen). Nur die BG-Token werden
   angefasst; Blur/Schatten/Rand bleiben unveraendert.
   ========================================================================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{
    --glass-bg:color-mix(in srgb, var(--amb-base) 12%, white);
    --glass-bg-strong:color-mix(in srgb, var(--amb-base) 6%, white);
  }
  [data-theme="dark"]{
    --glass-bg:color-mix(in srgb, var(--amb-base) 95%, white);
    --glass-bg-strong:color-mix(in srgb, var(--amb-base) 96%, white);
  }
}

/* ============================================================================
   P3 (Loki L1) — JS-FREIER Default-Theme via prefers-color-scheme (Plan 37 BP-3).
   Ohne JS (der manuelle Umschalter kommt erst in BP-5/glass.js) folgt das Token-
   Set der OS-Praeferenz: bei `dark` werden die [data-theme="dark"]-Werte auf :root
   gespiegelt, damit die Seite bei DEAKTIVIERTEM JS lesbar UND themengerecht
   gestylt bleibt (ein JS-Fehler kann die Seite nie ungestylt/unlesbar machen).
   BP-5 realisiert die angekuendigte "nachgelagerte Regel": der Umschalter setzt
   data-theme explizit auf <html>, und dieser Media-Block ist auf
   `:root:not([data-theme])` verengt — die OS-Praeferenz greift also NUR solange
   keine explizite Wahl gesetzt ist. So gewinnt eine ausdrueckliche Hell-Wahl auch
   auf einem Dark-OS (sonst ueberschriebe dieser Block das :root-Hell). A11-konform:
   die Farb-Literale stehen ausschliesslich im `:root`-basierten Token-Selektor.
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    /* A18 (BP-8): spiegelt die AA-Haertung des [data-theme=dark]-Blocks fuer den OS-Dark-Default
       (kein explizites data-theme) — sonst griffe hier der dunkle §2-Hex/der Light-brand-text. */
    --ink-900:#f4f5f8; --ink-700:#d5d7e0; --ink-500:#a2a4b3;
    --ink-400:#9a9cac; --ink-300:#8e90a0;
    --line:rgba(255,255,255,.10);

    --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
    --ok-soft:color-mix(in srgb, var(--ok) 18%, transparent);
    --danger-soft:color-mix(in srgb, var(--danger) 20%, transparent);

    --brand-text:#7aa2f7;
    --ok-text:#34d399;
    --warn-text:#fbbf24;
    --danger-text:#fb8a8a;
    --on-danger:#2b0808;
    --focus-ring:#6f9bf2;

    --glass-bg:rgba(32,34,48,.55);
    --glass-bg-strong:rgba(26,28,40,.68);
    --glass-brd:rgba(255,255,255,.14);
    --glass-shadow:0 24px 60px -20px rgba(0,0,0,.6), 0 4px 14px -6px rgba(0,0,0,.5);
    --track:rgba(255,255,255,.10);

    --amb-base:#0c0e16;
    --amb-c1:color-mix(in srgb, var(--brand-primary) 40%, transparent);
    --amb-c2:color-mix(in srgb, var(--brand-accent) 34%, transparent);
    --amb-c3:rgba(90,120,200,.20);
  }
}
/* A9/W1 fuer den JS-freien Dark-Default OHNE backdrop-filter: voll deckende
   Unterlage aus --amb-base (kein Text auf halbtransparentem Glas ohne Blur). */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (prefers-color-scheme: dark){
    :root:not([data-theme]){
      --glass-bg:color-mix(in srgb, var(--amb-base) 95%, white);
      --glass-bg-strong:color-mix(in srgb, var(--amb-base) 96%, white);
    }
  }
}

/* ============================================================================
   Glas-SHELL — Basis-Komponenten des glass/base.html-Geruests (Plan 37 BP-3).
   NUR Custom-Property-Referenzen + color-mix() (KEINE Farb-Literale ausserhalb
   der Token-Bloecke, A11). Hier steht ausschliesslich die Shell (Body/Ambient/
   Masthead/Nav/Konto/Content-Karte/Banner) + die Durchstich-Tabelle (lagebrett);
   der Per-View-Reskin (Buttons/Formulare/dichte Daten/Zustaende) folgt in BP-4.
   ========================================================================== */
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink-900);
  background:var(--amb-base);
  min-height:100vh;
}
/* ---------------------------------------------------------------------------
   BP-3b — Ambient-Verlauf hinter dem Glas (Vorlage §2.5). Fixiert, z-index:-1 hinter
   allem; NUR Token-/color-mix()-Referenzen (A11). Kein Vorfahr von .content (Sibling).
   --------------------------------------------------------------------------- */
.ambient{
  position:fixed; inset:0; z-index:-1; background:var(--amb-base);
  background-image:
    radial-gradient(60% 55% at 18% 12%, var(--amb-c1), transparent 60%),
    radial-gradient(52% 50% at 88% 22%, var(--amb-c2), transparent 62%),
    radial-gradient(46% 44% at 66% 96%, var(--amb-c3), transparent 60%);
}

/* ---------------------------------------------------------------------------
   BP-3b — Schwebende einklappbare Glas-SIDEBAR (K-G2/§4.1, Operator-Entscheid).
   L3 (Loki): dies ist das EINZIGE position:fixed-Glas-Panel — der backdrop-filter
   sitzt auf ihm SELBST (fixiert) und auf den Blatt-Flaechen (Sektionen/Dialoge/
   Konto-Popover), NIE auf einem Vorfahren der Content-Karte. Damit entsteht ueber
   dem Content-Teilbaum KEIN backdrop-filter-Containing-Block, der position:fixed-
   Nachfahren (Modals/Popover/Sticky) einfaengt; solche fliehen korrekt zum Viewport.
   Der Content scrollt unabhaengig (Body-Scroll) — die fixierte Sidebar bleibt stehen.
   --------------------------------------------------------------------------- */
.sidebar{
  position:fixed; left:var(--s4); top:var(--s4); bottom:var(--s4); z-index:30;
  width:248px; display:flex; flex-direction:column;
  padding:var(--s4); border-radius:var(--radius);
  background:var(--glass-bg); border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}

/* Brand-Block oben (Logo-Marke + Titel + Nav-Collapse). */
.brand{ display:flex; align-items:center; gap:var(--s3); padding:var(--s1) var(--s1) var(--s4); }
.brand-logo{
  width:38px; height:38px; flex:0 0 38px; border-radius:var(--radius-xs);
  background:var(--brand-gradient); color:white; display:grid; place-items:center;
}
.brand-text{ display:flex; flex-direction:column; min-width:0; }
.brand-name{ font-weight:700; letter-spacing:-.2px; }
.brand-sub{
  color:var(--ink-300); font-size:.7em; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Hauptnavigation — vertikal; scrollt bei Bedarf (die 12 Ziele passen sonst nicht in
   die volle Hoehe), waehrend Brand oben und Konto/Theme unten stehen bleiben. */
.mainnav{
  display:flex; flex-direction:column; gap:var(--s1);
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  margin:0 calc(-1 * var(--s1)); padding:0 var(--s1);
}
.mainnav a{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s3); border-radius:var(--radius-xs);
  color:var(--ink-700); text-decoration:none; font-weight:550; white-space:nowrap;
}
.mainnav a .nav-ico{ flex:0 0 19px; color:var(--ink-400); }
.mainnav a:hover{ background:var(--glass-bg); color:var(--ink-900); }
.mainnav a:hover .nav-ico{ color:var(--ink-700); }
/* Aktives Item = weisse/Marken-Flaeche (Mockup id 6). `white` ist ein Keyword, kein
   Farb-Literal (A11); der Schatten kommt aus dem Token. */
.mainnav a.active{ background:white; color:var(--brand-primary); box-shadow:var(--glass-shadow); }
.mainnav a.active .nav-ico{ color:var(--brand-primary); }

/* Sidebar-Fuss: Theme-Umschalter + Konto-Popover. */
.sidebar-foot{ display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3); }

/* Konto-Popover (native <details>, JS-frei) — oeffnet nach OBEN ueber der Konto-Leiste,
   verankert an der fixierten Sidebar (position:absolute, NICHT fixed -> kein neuer CB-Bedarf). */
.account{ position:relative; }
.account > summary{
  display:flex; align-items:center; gap:var(--s3); cursor:pointer; list-style:none;
  padding:var(--s2); border-radius:var(--radius-sm);
  border:1px solid var(--line); background:color-mix(in srgb, var(--glass-brd) 30%, transparent);
}
.account > summary::-webkit-details-marker{ display:none; }
.account .avatar{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  background:var(--brand-gradient); color:white; display:grid; place-items:center;
}
.account-who{ display:flex; flex-direction:column; min-width:0; }
.account-who b{ font-size:.82em; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-who span{ font-size:.72em; color:var(--ink-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account .chevron{ margin-left:auto; color:var(--ink-400); transition:transform .18s ease; }
.account[open] .chevron{ transform:rotate(180deg); }
.account-panel{
  position:absolute; left:0; right:0; bottom:calc(100% + var(--s2)); z-index:10;
  display:flex; flex-direction:column; gap:var(--s1);
  padding:var(--s2); border-radius:var(--radius-sm);
  background:var(--glass-bg-strong); border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.account-panel .navlink{
  padding:var(--s2) var(--s3); border-radius:var(--radius-xs);
  color:var(--ink-700); text-decoration:none; font-size:.9em;
}
.account-panel .navlink:hover{ background:var(--glass-bg); color:var(--brand-text); }
.account-panel .navlink.active{ background:var(--brand-primary-soft); color:var(--brand-text); }
.logout-form{ margin:0; }
.account-panel .logout{
  font:inherit; cursor:pointer; width:100%; text-align:left;
  padding:var(--s2) var(--s3); border-radius:var(--radius-xs);
  border:1px solid var(--glass-brd); background:var(--glass-bg); color:var(--ink-700);
}
.account-panel .logout:hover{ border-color:var(--danger); color:var(--danger-text); }
/* M2/W1 — sichtbarer, markenkonsistenter Fokusring auf JEDEM interaktiven Element
   (Shell-Default; BP-4 belegt ihn per-View feiner nach). */
:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; }
/* A18 (BP-8, journal 349): in DARK erreicht der brand-primary-Fokusindikator vs Glas nur 2.92:1
   (< 3:1 Non-Text). Die BASIS-Regel oben bleibt --brand-primary (Light 4.31:1, unveraendert); in
   beiden Dunkel-Scopes wird NUR die Indikator-FARBE auf --focus-ring (5.26:1) gehoben. Der globale
   Outline hier; der Feld-Fokus-RAND (input/textarea/login) steht bei seiner Basis-Regel weiter
   unten (K-G10) — die hoehere Spezifitaet des [data-theme]-Scopes gewinnt unabhaengig von der
   Quellreihenfolge. */
[data-theme="dark"] :focus-visible{ outline-color:var(--focus-ring); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) :focus-visible{ outline-color:var(--focus-ring); }
}
/* Content-Karte rechts NEBEN der fixierten Sidebar (Reflow). KEIN backdrop-filter/transform
   auf diesem Wrapper (L3) — die Glas-Flaechen sind die inneren <section>/Dialoge (Blaetter),
   sodass ein position:fixed-Nachfahre im Content NICHT gefangen wird. Body-Scroll = unabhaengig. */
.content{ margin-left:calc(248px + var(--s4) + var(--s4)); padding:var(--s6); min-height:100vh; }
.content > section{
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  padding:var(--s6);
}
.banner{ padding:var(--s3) var(--s4); border-radius:var(--radius-sm); margin-bottom:var(--s4); }
.banner-error{ background:var(--danger-soft); color:var(--danger-text); }
h1{ margin-top:0; }
.intro{ color:var(--ink-500); }
/* Plan 37 · IA-Folge-Quickfix 1a — dichte Tabellen bleiben in ihrer Content-Karte.
   Beleg des Ueberlaufs: Lagebrett-Tabelle 1035px in 1023px Innenraum. Ursache: das
   auto-Table-Layout blaeht Spalten am Inhalt (lange Plan-/Stage-Texte) auf, bis die
   Tabelle die Karte sprengt. `table-layout:fixed` bindet die Tabelle an width:100% ihres
   Containers (die Spalten teilen die Breite) -> sie ueberschreitet NIE die Karte, auf
   KEINER Glas-Innenseite; kein Seiten-/Karten-Horizontalscroll. Reine Layout-Eigenschaft,
   kein Farb-/Token-Eingriff (A11 unberuehrt). */
table.grid{ width:100%; border-collapse:collapse; table-layout:fixed; }
table.grid th, table.grid td{
  padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line);
  text-align:left;
  /* Lange Freitexte brechen IN der Zelle um statt sie zu sprengen (kein Ellipsis: die
     glass/-Templates sind gegen die ALT-Ebene byte-eingefroren — test_glass_views
     test_content_context_equal_alt_vs_glass -, ein `title=`-Attribut fuers volle Wort
     ist dort nicht ergaenzbar; Umbruch zeigt den vollen Text ohne Markup-Eingriff). */
  overflow-wrap:anywhere; word-break:break-word;
}
table.grid th{ color:var(--ink-500); font-weight:600; }
table.grid td.num{ text-align:right; font-variant-numeric:tabular-nums; }
/* routines ist die EINZIGE Grid-Tabelle mit Formular-/Steuerzellen (.ctl). Dort bleibt die
   inhaltsbasierte auto-Breite, damit die Arm-/Control-Formulare NICHT gestaucht werden
   (Usability, decision 0028). Ist :has() nicht verfuegbar, greift der harte Feld-Riegel
   unten und verhindert trotzdem jeden Ueberlauf. */
table.grid:has(.ctl){ table-layout:auto; }
/* Harter Riegel: ein Formularfeld ueberschreitet nie seine Zelle (faengt den :has-losen
   Fallback UND jede kuenftige Feld-in-Zelle ab). */
table.grid input, table.grid select, table.grid textarea{ max-width:100%; box-sizing:border-box; }
.bar{ width:120px; height:var(--s2); border:none; border-radius:var(--radius-xs); background:var(--track); }
.bar-label{ margin-left:var(--s2); color:var(--ink-500); font-size:.85em; }
.empty{ color:var(--ink-400); }

/* ============================================================================
   BP-4 — PER-VIEW KOMPONENTEN-EBENE (Plan 37 Stufe 4 Runde 1).
   Restyled ALLE erreichbaren Datenflaechen- + Direkt-Site-Views (templates/glass/*)
   auf denselben Klassen/ids wie die ALT-Vorlagen (mechanischer Reskin — kein neues
   Markup). NUR Custom-Property-/color-mix()-Referenzen + die Keywords white/black/
   transparent — KEINE Farb-Literale ausserhalb der Token-Bloecke (A11). Gliederung nach
   den verbindlichen Guidelines der Vorlage `liquid-glass` §3: Buttons (K-G9), Formulare
   (K-G10) + M2-Fokusring, dichte Daten (K-G11), Zustaende (K-G12), Vektor-Icons (K-G8).
   ========================================================================== */

/* -- Fliesstext-Links + Ueberschriften -------------------------------------
   A18 (BP-8): Content-Links sind Normaltext AUF Glas -> die AA-Text-Variante --brand-text
   (>= 4.5:1), nicht die vivide Flaechen-Marke --brand-primary. */
.content a{ color:var(--brand-text); text-decoration:none; }
.content a:hover{ text-decoration:underline; }
h2{ margin:var(--s5) 0 var(--s2); font-size:1.1em; }
.actions{ margin:var(--s3) 0; }
.note,.login-note{ color:var(--ink-500); font-size:.85em; margin-top:var(--s4); line-height:1.5; }

/* ---------------------------------------------------------------------------
   K-G9 — Buttons. Ghost-Grundstil fuer JEDEN Button/Aktionslink in der Content-
   Karte; die Haupt-Absende-Aktion einer Form wird zum Marken-Gradient-Primaerbutton;
   Danger-Aktionen tragen die Gefahr-Farbe (Rot NUR fuer echte Gefahr, §3.6).
   --------------------------------------------------------------------------- */
.content button,.content .navlink{
  font:inherit; cursor:pointer; line-height:1; display:inline-flex; align-items:center;
  gap:var(--s2); padding:var(--s2) var(--s4); border:1px solid var(--glass-brd);
  border-radius:var(--radius-xs); background:var(--glass-bg); color:var(--ink-700);
  text-decoration:none;
}
.content button:hover,.content .navlink:hover{ border-color:var(--brand-primary); color:var(--brand-text); }
.filters button[type="submit"],.write-form button[type="submit"],
.login-form button[type="submit"],.backup-form button[type="submit"],
.tokens-form button[type="submit"],.modal-actions button[type="submit"]{
  border:none; background:var(--brand-gradient); color:white; font-weight:600;
}
.modal-actions button[type="submit"]:hover{ color:white; filter:brightness(1.06); }
button.danger,.modal-actions button.danger,.ctl-btn.danger{
  border-color:color-mix(in srgb, var(--danger) 45%, transparent); color:var(--danger-text);
}
/* A18 (Vollsweep): SOLIDER Danger-Button — Vordergrund via --on-danger (Light weiss 4.83:1; Dark
   #f87171-Fuellung traegt weiss nur 2.77:1 -> dunkler Vordergrund 6.65:1). */
.modal-actions button.danger{ border:none; background:var(--danger); color:var(--on-danger); }
.ctl button{ padding:var(--s1) var(--s3); font-size:.85em; }
.ctl-btn{ padding:var(--s1) var(--s3); font-size:.85em; }
.icon-btn{ padding:var(--s2); justify-content:center; }
/* K-G8 — Vektor-Icons erben currentColor (0 Emoji); der Chevron dreht per aria-expanded. */
.chevron{ flex:none; color:var(--ink-400); transition:transform .18s ease; }
[aria-expanded="true"] .chevron{ transform:rotate(90deg); }

/* ---------------------------------------------------------------------------
   K-G10 — Formulare. Ein Feldstil (helle Glas-Unterlage, 1px Linie, Radius);
   Labels als eigene Zeile ueber dem Feld (kein schwebendes Material-Label). M2:
   Fokus = Marken-Rand + Soft-Ring (sichtbar auf JEDEM Feld; der globale
   :focus-visible-Outline oben deckt zusaetzlich alle uebrigen interaktiven Elemente).
   --------------------------------------------------------------------------- */
.filters{ display:flex; gap:var(--s4); align-items:flex-end; flex-wrap:wrap; margin-bottom:var(--s4); }
.filters label{ display:flex; flex-direction:column; gap:var(--s1); color:var(--ink-500); font-size:.85em; }
.write-form,.login-form,.tokens-form,.backup-form{ display:flex; flex-direction:column; gap:var(--s2); max-width:42rem; }
.write-form label,.login-form label,.tokens-form label,.backup-form label,.onboarding-fields label{
  display:flex; flex-direction:column; gap:var(--s1); color:var(--ink-500); font-size:.85em;
}
.pwchange{ max-width:26rem; }
.content input,.content select,.content textarea{
  font:inherit; color:var(--ink-900); padding:var(--s2) var(--s3);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--glass-bg-strong) 82%, white);
}
.content textarea{ resize:vertical; }
/* A18 (Vollsweep): Placeholder NICHT dem Browser-Default (~54% von ink-900, kann < 4.5:1 fallen)
   ueberlassen — AA-festes --ink-500 (Light 5.59 / Dark 5.84:1 auf Worst-Case-Glas) mit voller
   Opazitaet. Felder tragen zusaetzlich echte Labels; der Placeholder ist nie der einzige Name. */
.content input::placeholder,.content textarea::placeholder{ color:var(--ink-500); opacity:1; }
.content input:focus-visible,.content select:focus-visible,.content textarea:focus-visible{
  outline:none; border-color:var(--brand-primary);
  box-shadow:0 0 0 var(--s1) var(--brand-primary-soft);
}
/* A18 (BP-8): in DARK ersetzt der Feld-Fokus den Outline durch den Marken-RAND — dieser Rand ist
   der Fokusindikator und muss >= 3:1 Non-Text halten; brand-primary vs Dunkelglas nur 2.92:1, also
   auf --focus-ring (5.26:1) gehoben. Die box-shadow-Glow (brand-primary-soft) bleibt dekorativ. */
[data-theme="dark"] .content input:focus-visible,
[data-theme="dark"] .content select:focus-visible,
[data-theme="dark"] .content textarea:focus-visible{ border-color:var(--focus-ring); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .content input:focus-visible,
  :root:not([data-theme]) .content select:focus-visible,
  :root:not([data-theme]) .content textarea:focus-visible{ border-color:var(--focus-ring); }
}
details summary{ cursor:pointer; }

/* ---------------------------------------------------------------------------
   K-G11 — Dichte Daten. Caption-Koepfe (uppercase), Zeilen-Hover, Chips/Pills,
   Fortschrittsbalken mit Marken-Fuellung, Baum/Timeline/Detail-Listen, KPI-Zeile.
   --------------------------------------------------------------------------- */
table.grid th{ text-transform:uppercase; font-size:.72em; letter-spacing:.04em; color:var(--ink-300); }
table.grid tbody tr:hover{ background:var(--glass-bg); }
/* Fortschritt: native <progress class="bar"> (BP-2) — Appearance reset + Marken-Fuellung. */
.bar{ -webkit-appearance:none; -moz-appearance:none; appearance:none; overflow:hidden; vertical-align:middle; }
.bar::-webkit-progress-bar{ background:var(--track); border-radius:var(--radius-xs); }
.bar::-webkit-progress-value{ background:var(--brand-gradient); border-radius:var(--radius-xs); }
.bar::-moz-progress-bar{ background:var(--brand-primary); border-radius:var(--radius-xs); }
.bar.overall{ width:16rem; height:var(--s3); }
.plan-overall{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; margin:var(--s2) 0 var(--s4); }
.step-owner{ color:var(--ink-400); font-size:.85em; }
.tree{ list-style:none; margin:var(--s2) 0; padding-left:0; }
.tree .tree{ margin:var(--s2) 0 var(--s2) var(--s5); padding-left:var(--s3); border-left:1px solid var(--line); }
.tree-node{ margin:var(--s2) 0; }
.tree-row{ display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap; }
.tree-id{ color:var(--ink-400); font-size:.85em; }
.tree-title{ font-weight:600; }
.tree-body{ color:var(--ink-500); margin:var(--s1) 0; white-space:pre-wrap; }
.timeline{ list-style:none; margin:var(--s2) 0; padding-left:0; }
.timeline-entry{ display:flex; gap:var(--s3); align-items:baseline; flex-wrap:wrap; padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.timeline-entry .ts{ color:var(--ink-400); font-size:.85em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.entry-content{ white-space:pre-wrap; }
dl.detail{ display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s4); margin:var(--s3) 0; }
dl.detail dt{ color:var(--ink-500); font-weight:600; }
dl.detail dd{ margin:0; }
article.entry-body{ white-space:pre-wrap; word-break:break-word; line-height:1.6; margin:var(--s3) 0; }
pre.vorlage-body{
  white-space:pre-wrap; word-break:break-word; background:var(--glass-bg-strong);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--s4);
  margin:var(--s2) 0 var(--s4); font-family:inherit; line-height:1.5; overflow-x:auto;
}
.breadcrumb{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; margin:var(--s3) 0; color:var(--ink-500); }
.breadcrumb .sep{ color:var(--ink-300); }
.breadcrumb .crumb-current{ font-weight:600; color:var(--ink-700); }

/* Chips / Pills / Badges (dichte Auszeichnungen). */
.pill,.badge,.status-badge{
  display:inline-block; padding:var(--s1) var(--s3); border-radius:999px;
  font-size:.75em; border:1px solid var(--line);
}
.badge,.status-badge{ text-transform:uppercase; letter-spacing:.03em; }
/* A18 (BP-8): Pill-/Badge-TEXT auf Glas -> AA-Text-Varianten (--brand-text/--ok-text); die
   Fuellungen/Raender (--brand-primary-soft/--ok-soft/color-mix(--ok…)) bleiben die vivide Marke. */
.pill{ background:var(--brand-primary-soft); color:var(--brand-text); border-color:transparent; }
.pill.on{ color:var(--ok-text); background:var(--ok-soft); border-color:transparent; }
.pill.off{ color:var(--ink-400); background:transparent; border-color:var(--line); }

/* ---------------------------------------------------------------------------
   K-G12 — Zustaende. Status-Farben (Gruen/Gelb/Rot NUR fuer Status), Info-Banner,
   Leerzustaende. Rot bleibt der echten Gefahr vorbehalten (§3.6).
   --------------------------------------------------------------------------- */
.badge.status-open{ color:var(--ink-500); }  /* AA-Text: ink-500 (war ink-400) — 5.61:1 (L) / 5.85:1 (D) auf Worst-Case-Glas */
.badge.status-in_progress{ color:var(--warn-text); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
.badge.status-done{ color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.badge.badge-stale,.badge.status-vorlage-draft{ color:var(--warn-text); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
.badge.status-vorlage-active{ color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.badge.status-vorlage-deprecated{ color:var(--ink-400); }
.badge.status-vorlage-retired{ color:var(--ink-400); text-decoration:line-through; }
.status-badge.status-active{ color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.status-badge.status-inactive{ color:var(--ink-400); }
.banner-ok{ background:var(--ok-soft); color:var(--ok-text); }
.banner-warn{ background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--warn-text); }

/* ---------------------------------------------------------------------------
   Onboarding-Guide + Server-Uebersicht + Dialoge (tokens-View, K-G11/K-G12).
   Aufklappbare Karten (details/accordion), pre-Code-Bloecke, Aktions-Modals.
   --------------------------------------------------------------------------- */
.onboarding-guide,.create-server,.server-row,.mint-result{
  border:1px solid var(--glass-brd); border-radius:var(--radius-sm);
  background:var(--glass-bg); margin:var(--s4) 0;
}
.onboarding-head,.server-head{
  display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; cursor:pointer;
  user-select:none; padding:var(--s3) var(--s4);
}
.onboarding-title,.server-name{ font-weight:600; }
.onboarding-hint,.server-desc{ color:var(--ink-400); font-size:.85em; }
.onboarding-hint{ margin-left:auto; }
.onboarding-body,.server-body{ padding:0 var(--s4) var(--s4); }
.onboarding-body{ border-top:1px solid var(--line); }
.onboarding-lead{ color:var(--ink-500); }
.onboarding-steps{ display:flex; flex-direction:column; gap:var(--s4); margin:var(--s3) 0 0; padding-left:var(--s5); }
.onboarding-steps .step-title{ font-weight:600; }
.onboarding-steps .step-note{ display:block; color:var(--ink-400); font-size:.85em; margin-top:var(--s2); }
.onboarding-cmd{ display:flex; gap:var(--s2); align-items:flex-start; margin-top:var(--s2); }
.onboarding-cmd pre{
  flex:1; margin:0; padding:var(--s2) var(--s3); background:var(--glass-bg-strong);
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow-x:auto;
}
.onboarding-cmd code,pre code{ font-family:monospace; font-size:.85em; white-space:pre; }
.onboarding-fields{ display:flex; flex-direction:column; gap:var(--s1); margin-top:var(--s2); max-width:32rem; }
.create-server{ padding:var(--s3) var(--s4); }
.server-list{ list-style:none; margin:var(--s3) 0; padding:0; }
.server-controls{ margin-left:auto; display:flex; gap:var(--s2); align-items:center; }
.agent-tokens{ border-collapse:collapse; width:100%; margin-top:var(--s3); }
.agent-tokens th,.agent-tokens td{ text-align:left; padding:var(--s1) var(--s3); border-bottom:1px solid var(--line); font-size:.9em; }
.agent-tokens th{ color:var(--ink-500); font-weight:600; text-transform:none; letter-spacing:normal; }
.mint-result{ padding:var(--s4); }
.mint-meta{ color:var(--ink-500); font-size:.9em; margin:0 0 var(--s2); }
.wire-token{ display:flex; flex-direction:column; gap:var(--s1); margin-bottom:var(--s2); }
.wire-token input,.wire-token textarea{ font-family:monospace; }
.wire-token textarea{ width:100%; }
.bundle-copy{ display:flex; gap:var(--s2); align-items:flex-start; }
.bundle-copy textarea{ flex:1; }
dialog.action-modal,dialog.result-modal{
  border:1px solid var(--glass-brd); border-radius:var(--radius); color:var(--ink-900);
  background:var(--glass-bg-strong); box-shadow:var(--glass-shadow); padding:var(--s6);
  max-width:40rem; width:90%;
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
dialog::backdrop{ background:color-mix(in srgb, var(--ink-900) 55%, transparent); }
dialog form{ display:flex; flex-direction:column; gap:var(--s2); }
.modal-actions{ display:flex; gap:var(--s3); margin:var(--s4) 0 0; padding:0; list-style:none; }

/* ---------------------------------------------------------------------------
   Mockup-/Vorlage-Vorschau: Tabs + Chrome-Rahmen um das sandboxed iframe.
   Der Chrome (Label + Meta) ist Eltern-DOM (A5) — reines Restyling, keine Struktur.
   --------------------------------------------------------------------------- */
.mockup-tabs{ list-style:none; margin:var(--s3) 0 var(--s4); padding:0; display:flex; flex-direction:column; gap:var(--s2); }
.content a.mockup-tab{
  display:inline-flex; gap:var(--s2); align-items:baseline; padding:var(--s2) var(--s3);
  border:1px solid var(--line); border-radius:var(--radius-sm); text-decoration:none; color:var(--ink-700);
}
.content a.mockup-tab.active{ border-color:var(--brand-primary); color:var(--brand-text); }
.mockup-tab-title{ font-weight:600; }
.mockup-tab-meta{ color:var(--ink-400); font-size:.85em; margin-left:var(--s2); }
.mockup-chrome{ border:2px solid var(--brand-primary); border-radius:var(--radius-sm); overflow:hidden; margin:var(--s3) 0 var(--s4); }
.mockup-chrome-label{
  background:var(--brand-primary); color:white; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; padding:var(--s2) var(--s4);
}
.mockup-meta{ display:flex; gap:var(--s2); align-items:baseline; flex-wrap:wrap; margin:var(--s2) var(--s4); }
.mockup-desync{ margin:var(--s2) var(--s4); }
.mockup-frame{ display:block; width:100%; height:70vh; border:0; background:white; }

/* ============================================================================
   BP-5 — SHELL-INTERAKTIVITAET (Plan 37 Stufe 4 Runde 1): Theme-Umschalter +
   Nav-Collapse. Das VERHALTEN lebt in der externen, deferten static/glass.js
   (A17: kein Inline-JS; die CSP hat kein script-src). Hier ausschliesslich die
   Praesentation: die JS-only-Sichtbarkeit der Steuerelemente, die Icon+Label-
   Hauptnavigation und der eingeklappte Icon-Rail-Zustand. KEINE Farb-Literale
   (A11) — nur Token-/color-mix()-Referenzen + currentColor + display/layout.
   ========================================================================== */

/* Enhancement-Sichtbarkeit: die Steuerelemente erscheinen NUR bei aktivem JS
   (glass.js setzt html[data-js="on"]). Ohne JS bleiben sie unsichtbar, statt als
   funktionslose Schaltflaeche dazustehen (A17: Toggle/Collapse sind Enhancement;
   der No-JS-Pfad ist die volle beschriftete Navigation + prefers-color-scheme). */
.js-only{ display:none; }
html[data-js="on"] .js-only{ display:flex; }

/* Icon-Schaltflaechen der Sidebar-Werkzeuge (Nav-Collapse + Theme) — Ghost-Stil,
   K-G8-Vektor-Icons erben currentColor. */
.ctl-icon{
  font:inherit; cursor:pointer; align-items:center; justify-content:center; gap:var(--s2);
  line-height:1; padding:var(--s2) var(--s3); border:1px solid var(--glass-brd);
  border-radius:var(--radius-xs); background:var(--glass-bg); color:var(--ink-700);
}
.ctl-icon:hover{ border-color:var(--brand-primary); color:var(--brand-text); }
.ctl-icon svg{ flex:none; }
/* Plan 37 · IA-Folge-Quickfix 1b — globale Icon-Absicherung. Ein Inline-SVG OHNE eigene
   Groessenangabe soll nie als Riesen-Icon rendern -> 16px-Default. Bewusst auf UNbemasste
   SVGs verengt (:not([width]):not([height])): ALLE 32 heutigen Icons tragen explizite
   width=/height=-Attribute (19/18/22/16) — ein nacktes `svg{width;height}` wuerde diese
   Praesentationsattribute ueberschreiben (CSS schlaegt Attribute) und Nav-/Brand-/Toggle-
   Icons verzerren/schrumpfen. So bleiben bemasste Icons EXAKT wie sie sind (die
   spezifischeren Regeln „ueberschreiben" per Attribut weiterhin), und nur kuenftige
   unbemasste Inline-SVGs werden gekappt. Reine Groesse, kein Farb-/Token-Eingriff. */
svg:not([width]):not([height]){ width:16px; height:16px; }
/* Der Nav-Collapse sitzt rechts im Brand-Block. */
.brand .nav-collapse{ flex:0 0 auto; margin-left:auto; padding:var(--s1) var(--s2); }

/* Plan 43 Strang 3 — 3-Wege-Theme-Selektor (Hell | Dunkel | Auto), colibys-Optik: Icon ueber
   Label, je eigener Segment-Knopf mit 1.5px-Rand. Sichtbar NUR bei aktivem JS (.js-only ->
   display:flex, s.o.). Fuellt den Fuss; die Segmente teilen sich die Breite und brechen mobil
   um (flex-wrap). AUSSCHLIESSLICH BP-8-Tokens, KEIN neuer Hex. */
.theme-seg{ width:100%; gap:var(--s2); flex-wrap:wrap; }
.theme-seg-btn{
  flex:1 1 0; min-width:56px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--s1); font:inherit; cursor:pointer; line-height:1;
  padding:var(--s2); border:1.5px solid var(--glass-brd); border-radius:var(--radius-xs);
  background:var(--glass-bg); color:var(--ink-700);
}
.theme-seg-btn svg{ flex:none; }
.theme-seg-btn .seg-label{ font-size:.72em; }
.theme-seg-btn:hover{ border-color:var(--brand-primary); color:var(--brand-text); }
/* Aktiv-Zustand = die AA-bewiesene Trias von .account-panel .navlink.active
   (color:--brand-text auf background:--brand-primary-soft); der --brand-text-Rand traegt den
   nicht-farblichen Aktiv-Cue und haelt >=3:1 (1.4.11) in BEIDEN Themes, da --brand-text auf
   Glas AA-bewiesen ist (>=4.5). Kein neuer Hex, kein neues Kontrast-Paar. */
.theme-seg-btn.active{
  border-color:var(--brand-text); color:var(--brand-text);
  background:var(--brand-primary-soft);
}

/* Eingeklappt = Icon-Rail (BP-3b jetzt VERTIKAL): die Sidebar schrumpft auf eine schmale
   Rail, der Content rueckt nach. NICHT adaptiv (kein Drag/Radial/Mausrad — das ist Runde 2). */
html[data-nav-collapsed="true"] .sidebar{ width:64px; }
html[data-nav-collapsed="true"] .content{ margin-left:calc(64px + var(--s4) + var(--s4)); }

/* Eingeklappt: NUR die Beschriftungen der HAUPTNAVIGATION entfallen visuell. Die Labels
   werden sr-only versteckt statt entfernt -> der zugaengliche Name des Links bleibt erhalten. */
html[data-nav-collapsed="true"] .mainnav .navlabel{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Konsistente Icon-Rail: Brand-Titel + Konto-Text ebenfalls sr-only; Icons zentriert. */
html[data-nav-collapsed="true"] .brand-text,
html[data-nav-collapsed="true"] .account-who{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
html[data-nav-collapsed="true"] .mainnav a,
html[data-nav-collapsed="true"] .account > summary{ justify-content:center; }
html[data-nav-collapsed="true"] .account .chevron{ display:none; }
html[data-nav-collapsed="true"] .brand{ justify-content:center; }

/* ============================================================================
   BP-6 — /login (eigenstaendige Glas-Seite OHNE Nav-Shell, Plan 37 Stufe 4 Runde 1).
   Die Login-Seite erweitert bewusst NICHT glass/base.html (keine Sidebar vor dem
   Login) — daher greift die `.content`-scoped Feld-/Button-Basis (K-G9/K-G10) hier
   NICHT. Dieser Block gibt der zentrierten Glas-Login-Karte dieselbe Feld-/Button-
   Praesentation, ausschliesslich aus Tokens/color-mix() + den Keywords (A11 —
   KEINE Farb-Literale ausserhalb der Token-Bloecke). Die Form-Layout-/Label-/
   Submit-Gradient-/Note-Regeln (.login-form*, .login-note) stehen bereits in der
   BP-4-Ebene oben und werden hier wiederverwendet.
   ========================================================================== */
.login-page{ display:grid; place-items:center; padding:var(--s6); }
.login-card{
  width:100%; max-width:23rem; padding:var(--s8);
  background:var(--glass-bg-strong); border:1px solid var(--glass-brd);
  border-radius:var(--radius); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.login-card .login-brand{ display:flex; flex-direction:column; gap:var(--s1); margin-bottom:var(--s5); }
.login-card h1{ margin:0 0 var(--s4); font-size:1.15em; }
/* K-G10 — Passwortfeld: dieselbe helle Glas-Unterlage/Linie/Radius wie `.content input`,
   nur hier explizit fuer die shell-lose Login-Karte wiederholt. */
.login-card input[type="password"]{
  font:inherit; color:var(--ink-900); padding:var(--s2) var(--s3);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--glass-bg-strong) 82%, white);
}
/* M2 — sichtbarer Marken-Fokusring am Feld (Ersatz fuer den unterdrueckten Outline). */
.login-card input[type="password"]:focus-visible{
  outline:none; border-color:var(--brand-primary);
  box-shadow:0 0 0 var(--s1) var(--brand-primary-soft);
}
/* A18 (BP-8): Dark-Fokusrand des Login-Feldes auf --focus-ring (>= 3:1) — wie die Content-Felder. */
[data-theme="dark"] .login-card input[type="password"]:focus-visible{ border-color:var(--focus-ring); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .login-card input[type="password"]:focus-visible{ border-color:var(--focus-ring); }
}
/* K-G9 — Submit-Basis (Padding/Radius/Cursor); die Marken-Gradient-Fuellung erbt der
   Button aus der `.login-form button[type="submit"]`-Regel der BP-4-Ebene oben. */
.login-card button[type="submit"]{
  font:inherit; cursor:pointer; line-height:1;
  padding:var(--s2) var(--s4); border-radius:var(--radius-xs); margin-top:var(--s2);
}
.login-card button[type="submit"]:hover{ filter:brightness(1.06); }
html[data-nav-collapsed="true"] .brand .nav-collapse{ margin-left:0; }

/* ============================================================================
   Plan 42 §3.2/§4 — PLÄNE-FINDER (drei Spalten aus freistehenden Karten) + die
   wiederverwendbaren Bausteine (Chip / Karte / Filter-Chip-Leiste / Status-Punkt).
   AUSSCHLIESSLICH bestehende Tokens/color-mix() + die Keywords (A11) — KEINE neuen
   Farben. Die Status-Farben spiegeln 1:1 die bestehenden .badge.status-*-Regeln
   (dieselben BP-8-AA-gehaerteten Tokens: done->ok-text, in_progress->warn-text,
   open->ink-500 als TEXT (AA >=4.5:1; der offene Status-PUNKT bleibt ink-400, Non-Text 3:1);
   Gefahr->danger). Interaktion rein server-seitig (Links), CSP unberuehrt.
   ========================================================================== */

/* Der Finder fuellt die Content-Karten-Hoehe; die Spalten scrollen INTERN statt die
   Seite (§3.2). .content traegt padding:s6 -> der Finder ist genau 1 Viewport minus
   Padding hoch, also entsteht KEIN Seiten-Scroll. */
.finder{ display:flex; flex-direction:column; gap:var(--s4); height:calc(100vh - 2 * var(--s6)); min-height:0; }
.finder-head{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.finder-head h1{ margin:0; }

/* Filter-Chip-Leiste (Sofortfilter mit Zaehlern statt Dropdown + Button). */
.filter-chips{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s1) var(--s3); border-radius:999px; font-size:.8em;
  border:1px solid var(--line); color:var(--ink-700);
  background:var(--glass-bg); white-space:nowrap;
}
.chip-count{ color:var(--ink-500); font-variant-numeric:tabular-nums; font-size:.9em; }  /* AA-Text: ink-500 (war ink-400) */
/* Filter-Chips sind Links -> die .content-a-Basis (brand-text/underline) ueberschreiben. */
.content a.chip--filter{ color:var(--ink-700); text-decoration:none; }
.content a.chip--filter:hover{ border-color:var(--brand-primary); color:var(--brand-text); text-decoration:none; }
/* Aktiver Filter-Chip: DECKENDES glass-bg-strong (nicht das 12%-transparente brand-soft — das
   faellt ueber dem Ambient auf 3.95:1); brand-text darauf = 6.15:1 (L) / 6.22:1 (D). Marken-Rand
   + brand-text + aria-current machen den Aktiv-Zustand eindeutig. */
.content a.chip--filter.is-active{ background:var(--glass-bg-strong); border-color:var(--brand-primary); color:var(--brand-text); }
.content a.chip--filter.is-active .chip-count{ color:var(--brand-text); }

/* Drei transparente Spalten. minmax(0,1fr) bindet jede Spalte an den Innenraum ->
   sie ueberschreiten NIE die Content-Breite (kein Horizontalscroll); jede Spalte
   scrollt intern. */
.finder-cols{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--s4); align-items:stretch; flex:1 1 auto; min-height:0;
}
.finder-col{ display:flex; flex-direction:column; min-height:0; min-width:0; }
/* Caption/Empties sitzen DIREKT auf dem Ambient (transparente Spalten, keine Glas-Unterlage) —
   dort erreichen ink-300/ink-400 die 4.5:1 nicht (Worst-Case-Ambient); daher ink-700 (>=8.7:1
   beide Themes). NUR im Finder gescopt, damit das globale .empty (auf Glas) unberuehrt bleibt. */
.col-caption{
  margin:0 0 var(--s2); color:var(--ink-700); font-size:.72em; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
}
.col-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:var(--s1); }
.finder .empty{ color:var(--ink-700); }

/* Freistehende Karte — das Grundfeld (schwebt einzeln ueber dem Ambient-Hintergrund). */
.card{
  display:block; padding:var(--s3) var(--s4); margin-bottom:var(--s3);
  border-radius:var(--radius-sm); background:var(--glass-bg);
  border:1px solid var(--glass-brd); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
/* Karten-Links: .content-a-Basis (brand-text/underline) neutralisieren -> Karte, kein Link-Text. */
.content a.card{ color:var(--ink-900); text-decoration:none; transition:border-color .15s ease; }
.content a.card:hover{ border-color:var(--brand-primary); text-decoration:none; }
.content a.card.is-active{ border-color:var(--brand-primary); background:var(--brand-primary-soft); }

/* Spalte 1 — Plan-Karte: Titel 2-Zeilen-Clamp + Meta-Chips (#Nr, Server). */
.plan-card-title{
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-weight:600; line-height:1.3;
}
.card-meta{ display:flex; gap:var(--s2); margin-top:var(--s2); flex-wrap:wrap; }
.chip--num{ color:var(--ink-500); font-variant-numeric:tabular-nums; }
.chip--server{ color:var(--ink-500); }

/* Spalte 2 — Kontext-Karte (Plan-Titel, Server, Fortschritt) + Schritt-Karten. */
.context-card{ display:flex; flex-direction:column; gap:var(--s2); background:var(--glass-bg-strong); }
.context-title{ font-weight:700; line-height:1.3; }
.context-meta{ color:var(--ink-500); font-size:.85em; }
.context-progress{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.context-detail{ align-self:flex-start; margin-top:var(--s1); }

.step-card{ display:flex; align-items:center; gap:var(--s2); }
.step-card-id{ color:var(--ink-500); font-size:.82em; font-variant-numeric:tabular-nums; flex:none; }  /* AA-Text: ink-500 (war ink-400) */
.step-card-title{ font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.step-card.depth-1{ margin-left:var(--s4); }
.step-card.depth-2{ margin-left:calc(2 * var(--s4)); }
.step-card.depth-3{ margin-left:calc(3 * var(--s4)); }
.step-card.depth-4{ margin-left:calc(4 * var(--s4)); }
.step-card.is-next{ border-color:color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.chip--next{ color:var(--brand-text); background:var(--brand-primary-soft); border-color:transparent; flex:none; }

/* Status-Punkt (erledigt/laeuft/offen) — dieselben Statusfarben wie die .badge.status-*,
   AUSSER dem offenen Punkt: als Nicht-Text-Icon genuegt ihm die 3:1-Schwelle, daher bleibt er
   ink-400 (4.97:1 L / 5.32:1 D auf Worst-Case-Glas), waehrend der TEXT (.badge/.status-chip
   .status-open) auf ink-500 gehoben ist (AA >=4.5:1 Normaltext). */
.status-dot{ flex:none; display:inline-flex; align-items:center; justify-content:center; }
.status-dot.dot-done{ color:var(--ok-text); }
.status-dot.dot-progress{ color:var(--warn-text); }
.status-dot.dot-open{ color:var(--ink-400); }

/* Status-Chip (Baustein) — spiegelt die .badge.status-*-Farbregeln (AA-gehaertet). */
.status-chip{ text-transform:uppercase; letter-spacing:.03em; font-size:.7em; }
.status-chip.status-open{ color:var(--ink-500); }  /* AA-Text: ink-500 (war ink-400), wie .badge.status-open */
.status-chip.status-in_progress{ color:var(--warn-text); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
.status-chip.status-done{ color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }

/* Spalte 3 — Schritt-Detail: der Kartenrahmen STEHT, der lange Text scrollt IM Feld (§3.2). */
.finder-col.is-detail .col-scroll{ overflow-y:hidden; }
.step-detail{ display:flex; flex-direction:column; max-height:100%; background:var(--glass-bg-strong); }
.step-detail-head{ display:flex; align-items:center; gap:var(--s2); flex:none; }
.step-detail-id{ color:var(--ink-400); font-variant-numeric:tabular-nums; }
.step-detail-title{ margin:var(--s2) 0; font-size:1.05em; flex:none; }
.step-detail-owner{ color:var(--ink-500); font-size:.85em; margin:var(--s1) 0; flex:none; }
.step-detail-body{ white-space:pre-wrap; word-break:break-word; line-height:1.6; color:var(--ink-700); overflow-y:auto; min-height:0; flex:1 1 auto; }

/* Gefahr-Signal „HARTER STOPP" — danger-soft-Fuellung + danger-text (AA-gehaertet, §3.6). */
.hard-stop{
  display:flex; align-items:center; gap:var(--s2); margin:var(--s2) 0; flex:none;
  padding:var(--s2) var(--s3); border-radius:var(--radius-sm);
  background:var(--danger-soft); color:var(--danger-text); font-weight:600;
}
.hard-stop svg{ flex:none; }

/* Schmaler Viewport: Spalten stapeln, die Seite scrollt normal (kein H-Scroll). */
@media (max-width: 900px){
  .finder{ height:auto; }
  .finder-cols{ grid-template-columns:1fr; }
  .col-scroll,.finder-col.is-detail .col-scroll{ overflow-y:visible; }
  .step-detail{ max-height:none; }
  .step-detail-body{ overflow-y:visible; }
}

/* ============================================================================
   Plan 42 §3.1/§4 — COMMAND DECK (Lagebrett): KPI-Kacheln + „Braucht Aufmerksamkeit"
   + Plan-Karten nach Server. AUSSCHLIESSLICH bestehende Tokens/color-mix() + die Keywords
   (A11) — KEINE neuen Farben. Captions/Intro/H1 sitzen auf dem AMBIENT (transparente
   Deck-Flaeche, keine Glas-Unterlage) -> ink-700/ink-900 (ink-500 faellt dort auf 3.56:1 L /
   3.47:1 D, < AA — deshalb bewusst NICHT als Ambient-Text). KPI-/Attention-/Karten-Text
   sitzt auf Glas (glass-bg .55-Boden): ink-500 5.12/4.99:1, ink-700 10.75/8.58:1, die
   State-Farben ok/warn/danger-text 5.34–7.38:1 — alle >= AA in BEIDEN Themes. Karten
   schweben einzeln (kein durchgehender Glas-Schlauch, §3.1). Interaktion server-seitig (Links).
   ========================================================================== */
.deck{ display:flex; flex-direction:column; gap:var(--s5); }
.deck-head h1{ margin:0; }
/* Intro sitzt auf dem Ambient -> ink-700 (nicht das .content-.intro-ink-500, das dort < AA faellt). */
.deck-head .intro{ margin:var(--s1) 0 0; color:var(--ink-700); }

/* Caption (Attention-Ueberschrift + Server-Gruppen-Ueberschrift) — auf Ambient -> ink-700. */
.deck-caption{
  display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
  margin:0 0 var(--s3); font-size:1em; color:var(--ink-700);
}
.caption-count{ font-size:.8em; font-weight:600; color:var(--ink-700); }

/* KPI-Kacheln — responsives Raster aus freistehenden Glas-Kacheln (auto-fit -> kein H-Scroll). */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--s3); }
.kpi{
  display:flex; flex-direction:column; gap:var(--s1);
  padding:var(--s4); border-radius:var(--radius-sm);
  background:var(--glass-bg); border:1px solid var(--glass-brd); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.kpi-value{
  font-size:1.9em; font-weight:750; letter-spacing:-.5px; line-height:1;
  color:var(--ink-900); font-variant-numeric:tabular-nums;
}
.kpi-label{ font-size:.8em; color:var(--ink-500); }
/* Zustandsfarbe der grossen Zahl (AA-Text-Varianten; >= 4.5:1 auf Glas in beiden Themes). */
.kpi--ok .kpi-value{ color:var(--ok-text); }
.kpi--warn .kpi-value{ color:var(--warn-text); }
.kpi--danger .kpi-value{ color:var(--danger-text); }

/* „Braucht Aufmerksamkeit" — eine Glas-Karte, Zeilen mit Schwere-Punkt. Die Farbe ist NICHT
   der einzige Kanal (der Text nennt die Sache); Rot bleibt echter Gefahr vorbehalten (§3.6). */
.attn-list{ list-style:none; margin:0; padding:var(--s3) var(--s4); }
.attn-row{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.attn-row:first-child{ padding-top:0; }
.attn-row:last-child{ border-bottom:0; padding-bottom:0; }
.attn-sev{ flex:none; width:10px; height:10px; border-radius:50%; }
.attn--danger .attn-sev{ background:var(--danger); }
.attn--warn .attn-sev{ background:var(--warn); }
.attn--info .attn-sev{ background:var(--brand-primary); }
.attn-text{ color:var(--ink-700); }

/* ============================================================================
   Plan 45 · BP-H — Per-View-Drilldown-Verdrahtung. Die Listen-Zeile (.data-row), die
   KPI-Kachel (.kpi) und die Aufmerksamkeits-Zeile (.attn-row) tragen jetzt ein ECHTES
   <a href> ins Detail bzw. auf den Ziel-Tab. Die Verankerung ist so gebaut, dass das
   Aussehen BYTE-gleich bleibt (die Anker uebernehmen Layout + Innenabstand), nur die
   ganze Flaeche wird tappbar. currentColor/Tokens, kein Farb-Literal; text-decoration
   entfernt (der Titel/Chip traegt die Semantik). Der :focus-visible-Ring (global, Z.336)
   greift automatisch — NIRGENDS outline:none. ASCII-Kommentare. */
.data-row .row-link{
  display:flex; align-items:center; gap:var(--s3); flex:1 1 auto; min-width:0;
  margin:calc(-1 * var(--s3)) calc(-1 * var(--s4));   /* ueber die .data-row-Polsterung bluten -> ganze Karte tappbar */
  padding:var(--s3) var(--s4); border-radius:inherit;
  color:inherit; text-decoration:none;
}
a.kpi{ color:inherit; text-decoration:none; }
.attn-row .attn-link{
  display:flex; align-items:center; gap:var(--s3); flex:1 1 auto; min-width:0;
  color:inherit; text-decoration:none;
}

/* Plan-Karten nach Server — responsives Raster freistehender Karten (nur so hoch wie ihr Inhalt). */
.pcards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--s3); align-items:start; }
.pcard{ display:flex; flex-direction:column; gap:var(--s2); margin-bottom:0; }
.pcard-title{
  font-weight:650; line-height:1.3; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard-progress{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.pcard-purpose{
  color:var(--ink-500); font-size:.88em; line-height:1.4; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pcard-foot{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s1); }
/* Chip-Punkt (Aufgaben gelb / Findings rot) — Non-Text (>=3:1), redundant zum Zahl+Wort-Text. */
.chip-dot{ flex:none; width:7px; height:7px; border-radius:50%; }
.chip-dot.dot-warn{ background:var(--warn); }
.chip-dot.dot-danger{ background:var(--danger); }
/* Stage-Chip: langer Schritt-Titel wird ellipsiert (kein Sprengen der Karte). */
.chip--stage{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Plan-Status-Chip auf der Plan-Karte (Deck) — immer sichtbar, macht den aus den Blaettern
   ABGELEITETEN Plan-Zustand sofort klar (der Plan traegt selbst keinen Status). Traegt die
   .chip-Glasflaeche; Farbe kodiert den Zustand REDUNDANT zum Text-Label (WCAG 1.4.1 — nie
   Farbe als einziges Signal). AUSSCHLIESSLICH BP-8-Text-Tokens (A18-AA auf Worst-Case-Glas
   bewiesen), KEIN Rot (kein Gefahr-Signal). done/in_progress bekommen zusaetzlich einen
   getoenten Rand (color-mix, Muster wie .badge.status-done); not_started/no_steps bleiben am
   neutralen --line-Rand und gedaempft. */
.pcard-status.status-done{ color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.pcard-status.status-in_progress{ color:var(--brand-text); border-color:color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.pcard-status.status-not_started{ color:var(--ink-500); }
.pcard-status.status-no_steps{ color:var(--ink-400); }

/* Plan 42 IA / BP-4a — geteiltes Kachel-Raster (Spiegel von .pcards, kompakter <280px).
   Von den drei Sparse-Views (knowledge_map/palaces/vorlagen) wiederverwendet. */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--s3); align-items:start; }
.card-grid .card{ margin-bottom:0; }

/* Wissenslandkarte (BP-4a) — je Areal eine Kachel: Areal-Slug (Titel) + grosse Eintrags-Zahl
   (.kpi-Optik) + optionales Intake-Rueckstand-Warn-Badge. Der Warn-Zustand ist doppelt kodiert
   (Rand + Badge-Text mit Zaehler), nie Farbe als einziges Signal; --warn-Tokens (kein Rot). */
.map-card{ display:flex; flex-direction:column; gap:var(--s1); }
.map-card-art{ font-weight:650; overflow-wrap:anywhere; }
.map-card-count{ margin-top:var(--s1); }
.map-card--warn{ border-color:color-mix(in srgb, var(--warn) 55%, var(--glass-brd)); }
.badge.map-card-backlog{ align-self:flex-start; margin-top:var(--s2); text-transform:none; letter-spacing:normal; color:var(--warn-text); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }

/* Palaeste (BP-4b) — je Agent eine Identitaets-Karte: agent_avatar (Name) + Meta-Chips
   (#id, server_id). Die ganze Karte ist der „Palast oeffnen"-Link (a.card). */
.palace-card{ display:flex; flex-direction:column; gap:var(--s2); }

/* Vorlagen (BP-4c) — je Vorlage eine Bibliotheks-Karte: slug (Titel) + lifecycle-Badge
   (status-vorlage-<status>) + Meta-Chips (category, v{version}, author, server). Die ganze
   Karte ist der Link auf /vorlagen/<id>. */
.vorlage-card{ display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; }
.vorlage-card-slug{ font-weight:650; overflow-wrap:anywhere; }
.chip--cat,.chip--author{ color:var(--ink-500); }

/* Schmaler Viewport: die Raster reflowen (auto-fit/auto-fill) auf eine Spalte — kein H-Scroll. */

/* ============================================================================
   Plan 42 IA / BP-0 — GEMEINSAMES data-list-FUNDAMENT der sechs IA-Views (Zeilen-Liste,
   Severity-/Status-/Filter-Chips, Agent-Avatar, relative Zeit). AUSSCHLIESSLICH bestehende
   Tokens/color-mix() (A11) — KEINE neuen Farben. Rot bleibt severity_chip(BLOCKER/MAJOR) +
   hard_stop vorbehalten ([C]); rejected/superseded -> ink-400 (gedaempft, NIE Rot). Jeder Chip
   traegt die Glas-Flaeche (.chip: background:var(--glass-bg)) -> nie transparent auf Ambient ([A]).
   ========================================================================== */

/* Zeilen-Liste — freistehende Glas-Zeilen (schweben einzeln, wie .card). #id fix, Titel ellipsiert,
   Chip-Slot scrollt intern statt die Zeile zu sprengen (ueberlauf-sicher). */
.data-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2); }
.data-row{
  display:flex; align-items:center; gap:var(--s3); min-width:0;
  padding:var(--s3) var(--s4); border-radius:var(--radius-sm);
  background:var(--glass-bg); border:1px solid var(--glass-brd); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.data-row .row-id{ flex:none; color:var(--ink-500); font-variant-numeric:tabular-nums; font-size:.85em; }
.data-row .row-title{
  flex:1 1 auto; min-width:0; font-weight:550;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.data-row .row-chips{ flex:none; display:flex; align-items:center; gap:var(--s2); max-width:55%; overflow-x:auto; }

/* Schweregrad-Chip — Rand via color-mix (wie .status-chip.status-done); Text auf der Glas-Flaeche
   der .chip-Basis. sev-blocker/sev-major -> danger, sev-minor -> warn (Rot nur hier + hard_stop, [C]). */
.severity-chip{ text-transform:uppercase; letter-spacing:.03em; font-size:.7em; font-weight:600; }
.sev-blocker,.sev-major{ color:var(--danger-text); border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
.sev-minor{ color:var(--warn-text); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
.sev-unknown{ color:var(--ink-500); }

/* Status-Chip — die zusaetzlichen IA-Vokabulare (open/in_progress/done stehen bereits oben). Farb-
   familien wie vorgegeben; rejected/superseded gedaempft (ink-400), NIE Rot; unbekannt -> neutral. */
.status-chip.status-in_review,
.status-chip.status-submitted{ color:var(--warn-text); border-color:color-mix(in srgb, var(--warn) 45%, transparent); }
.status-chip.status-approved,
.status-chip.status-decided,
.status-chip.status-resolved,
.status-chip.status-accepted,
.status-chip.status-implemented{ color:var(--ok-text); border-color:color-mix(in srgb, var(--ok) 45%, transparent); }
.status-chip.status-rejected,
.status-chip.status-superseded{ color:var(--ink-400); }
.status-chip.status-unknown{ color:var(--ink-500); }

/* Agent-Avatar — dekorativer Punkt (Non-Text, ink-400 >=3:1) + Name als Text (ink-700, sicher auf
   Glas UND Ambient). Langer Name geclamped (L-5: kein Layout-Bruch). */
.agent-avatar{ display:inline-flex; align-items:center; gap:var(--s2); min-width:0; }
.agent-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--ink-400); }
.agent-name{ color:var(--ink-700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:16ch; }

/* Relative Zeit — gedaempft (ink-500 auf Glas, AA), einzeilig; als <time datetime=…> ausgezeichnet ([B]). */
.rel-time{ color:var(--ink-500); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ============================================================================
   A19 (BP-7) — DRUCK: erzwingt das HELLE Token-Set. Ein Dark-Theme-Ausdruck ist auf
   Papier unlesbar (heller Text auf weissem Blatt). Dieser @media-print-Block
   re-deklariert die hellen Ink-/Linien-Token auf JEDEM dunkel-erzeugenden Scope —
   der expliziten [data-theme="dark"]-Wahl UND dem OS-Dark-Default
   :root:not([data-theme]) —, sodass der Ausdruck IMMER hell ist (beide Scopes stehen
   NACH ihren Quellregeln und gewinnen bei gleicher Spezifitaet). Zusaetzlich: die
   fixierte Glas-Sidebar und alle JS-only-Steuerungen (Theme/Collapse — im Druck
   sinnlos) werden ausgeblendet, der Content fuellt die volle Seitenbreite, und die
   druck-feindliche Glas-/Ambient-Chrome (backdrop-filter/Ambient-Wash/Schatten)
   entfaellt. A11: Farb-Literale stehen AUSSCHLIESSLICH in den :root-/[data-theme]-
   Token-Bloecken; ausserhalb nur var()/die Keywords `white`/`none`.
   ========================================================================== */
@media print{
  /* Explizite Dunkel-Wahl -> zurueck auf die hellen Ink-/Linien-Literale (A18-gehaertete Werte). */
  [data-theme="dark"]{
    --ink-900:#0b0b0f; --ink-700:#2b2b31; --ink-500:#5b5b66;
    --ink-400:#63636d; --ink-300:#676771;
    --line:rgba(20,20,30,.16);
  }
  /* OS-Dark-Default ohne explizite Wahl -> ebenfalls hell drucken. */
  :root:not([data-theme]){
    --ink-900:#0b0b0f; --ink-700:#2b2b31; --ink-500:#5b5b66;
    --ink-400:#63636d; --ink-300:#676771;
    --line:rgba(20,20,30,.16);
  }
  /* Weisses Papier, dunkle Schrift; die druck-feindliche Ambient-/Glas-Chrome entfaellt. */
  body{ background:white; color:var(--ink-900); }
  .ambient{ display:none !important; }
  .sidebar{ display:none !important; }
  .js-only{ display:none !important; }
  .content{ margin-left:0 !important; }
  section, dialog, .account-panel, .login-card, .card, .kpi{
    background:white !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  /* Der Pläne-Finder scrollt im Druck nicht intern — volle Hoehe, alle Spalten sichtbar. */
  .finder{ height:auto !important; }
  .col-scroll,.finder-col.is-detail .col-scroll,.step-detail-body{ overflow:visible !important; }
}

/* ============================================================================
   BP-M0 (Plan 43 Strang 1) -> Plan 45 BP-A ABLOESUNG — MOBIL-SHELL-FUNDAMENT.
   Additiv, rein @media(max-width:768px)-gescopt; Desktop (>768px) byte-unberuehrt.
   ASCII-Kommentare (U+2192-Pfeil triggert den Emoji-Guard).

   No-JS-Kontrakt (Plan 45 Gate-Auflage A1 / Step 654, weiterhin BLOCKER): die Navigation
   bleibt OHNE jegliches JS voll erreichbar. Das TRAEGERMEDIUM wechselt: frueher (Strang 1)
   trug die statische Top-Sidebar die No-JS-Nav; jetzt (BP-A) traegt die Bottom-Tab-Bar +
   das "Mehr"-<details>-Sheet die volle No-JS-Nav (alle 12 Bereiche + Konto/Logout als
   echte <a href>/POST). WEIL die Tab-Bar den Kontrakt erfuellt, darf die Sidebar mobil
   display:none werden (der 248px-Fixblock weicht). KEIN Drawer / KEIN Schwebe-Button mehr
   (Strang-2-FAB/Drawer sind unten neutralisiert, A11).
   ========================================================================== */
@media (max-width: 768px){
  /* Die Sidebar-Nav weicht mobil komplett — die Tab-Bar (unten) ist der EINE mobile
     Nav-Eigentuemer. display:none ist hier erlaubt, WEIL die No-JS-Nav auf die Tab-Bar +
     das Sheet uebergegangen ist (nicht mehr die Sidebar). */
  .sidebar{ display:none; }

  /* EIN Scroll-Container: <main class="content"> scrollt, HTML/Body nicht -> die gepinnte
     Tab-Bar (position:fixed unten) bleibt stehen. overscroll-behavior:contain unterbindet
     Scroll-Ketten/Pull-to-Refresh im App-Shell. safe-area-Insets oben (Notch) + unten
     (Home-Indicator) + Tab-Bar-Hoehe als Fusspolster. Kein background-attachment:fixed mobil
     (existiert nirgends; A10-CSS/A12). */
  html, body{ height:100%; overflow:hidden; }
  .content{
    margin-left:0; min-height:0;
    height:100dvh; overflow-y:auto; overscroll-behavior:contain;
    padding:calc(var(--s4) + env(safe-area-inset-top)) var(--s4)
            calc(var(--s4) + 56px + env(safe-area-inset-bottom));
  }
  /* War der Nav-Zustand zuvor auf Desktop eingeklappt, darf der Content mobil NICHT den
     64px-Rail-Rand erben (die Collapse-Regel hat Spezifitaet 0,2,1 > 0,1,0). Selektor-gleich
     neutralisiert -> spaetere Quelle gewinnt margin-left:0. */
  html[data-nav-collapsed="true"] .content{ margin-left:0; }
}

@media (max-width: 430px){
  /* Feinschliff: engeres Content-Padding auf sehr schmalen Viewports (320–430). */
  .content{ padding:var(--s3); }
}

/* ============================================================================
   BP-M1 (Plan 43 · Strang 1 · Step 2.3) — data-list-Zeilen mobil (die 6 IA-Listen).
   Die Glas-Zeile stapelt: der Chip-Slot bricht UNTER den Titel (flex-basis:100%) statt
   intern horizontal zu scrollen; der Titel wird lesbar (Umbruch statt Ellipse). Die
   .rel-time bleibt in der Zeile auf Glas (Carry-Forward MINOR-1 — NICHT auf Ambient
   verschoben). Rein Layout (keine Farben/Tokens).
   ========================================================================== */
@media (max-width: 768px){
  .data-row{ flex-wrap:wrap; align-items:flex-start; }
  /* BP-H: der Zeilen-Anker ist mobil der stapelnde Flex-Container (Chip-Slot bricht unter den
     Titel) und traegt das >=44px-Touch-Ziel (WCAG 2.5.5). */
  .data-row .row-link{ flex-wrap:wrap; align-items:flex-start; min-height:44px; }
  .data-row .row-title{ white-space:normal; overflow:visible; text-overflow:clip; }
  .data-row .row-chips{
    flex-basis:100%; max-width:none; overflow-x:visible; flex-wrap:wrap;
  }
  /* BP-H: KPI-Kachel + Aufmerksamkeits-Zeile als Deep-Link -> Touch-Ziel >= 44px. */
  a.kpi{ min-height:44px; }
  .attn-row .attn-link{ min-height:44px; }
}

/* ============================================================================
   BP-M2 (Plan 43 · Strang 1 · Step 2.4) — Card-Grids + Command-Deck (Lagebrett) mobil.
   Die Karten-Raster (.pcards Plan-Karten, .card-grid knowledge_map/palaces/vorlagen)
   fallen auf EINE Spalte. Die KPI-Kacheln nutzen minmax(min(100%,150px),1fr): 2-up wo
   Platz ist, 1-up wenn schmaler, nie Ueberlauf ueber die Kartenkante. Rein Layout.
   ========================================================================== */
@media (max-width: 768px){
  .pcards{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:1fr; }
  /* P2#1 (Operator-390px-Review) — die Wissenslandkarte hat die dichteste Kennzahl-Kachel
     (art_slug + grosse Zahl + Label): eine Karte je Kennzahl vergeudet mobil vertikalen Raum.
     Nur DIESES Raster (das die .map-card-Kacheln traegt) faellt auf 2 Spalten -- ueber :has,
     damit das GETEILTE .card-grid (auch palaces/vorlagen) unberuehrt einspaltig bleibt und die
     Template-Klasse `class="card-grid"` byte-gleich bleibt (Sparse-Guard). Die Zahl (.kpi-value)
     kompaktiert leicht, damit sie in die halbe Breite passt; das Intake-Rueckstand-Badge bleibt.
     Spezifitaet 0,2,0 schlaegt die 1fr-Regel darueber; rein Layout, mobil-only. */
  .card-grid:has(> .map-card){ grid-template-columns:repeat(2, 1fr); }
  .card-grid:has(> .map-card) .map-card-count{ font-size:1.5em; }
  .kpis{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  /* P1#1 (Operator-390px-Review, Variante A) — die Plan-Karte ist ein Grid-Element in der
     einspaltigen .pcards. Ihr impliziter min-width:auto = min-content-Boden liess sie ueber
     die 1fr-Spur wachsen (gemessen 464px in einem 390px-Viewport) -> Text rechts abgeschnitten.
     min-width:0 loest die klassische Grid-Overflow-Falle (das Element darf unter seinen
     Inhalt schrumpfen); width:100% bindet es an die Spurbreite. Der Inhalt bricht/ellipsiert
     dann INNERHALB der Karte (Titel/Purpose 2-Zeilen-Clamp + overflow-wrap:anywhere; der
     nowrap .chip--stage hat max-width:100% + overflow:hidden). Rein Layout, mobil-only. */
  .pcard{ min-width:0; width:100%; }
}

/* ============================================================================
   BP-M3 (Plan 43 · Strang 1 · Step 2.5) — Finder (Pläne-Drill-down) mobil.
   Der bestehende @media(max-width:900px)-Block (Z.859) stapelt .finder-cols bereits
   einspaltig (grid-template-columns:1fr) und hebt die internen col-scroll/step-detail-
   Overrides auf (overflow:visible, height/max-height:auto). Mit der vollbreiten Shell
   (BP-M0: .content margin-left:0) fuehrt das auf 320–430 als sauberer gestapelter
   Drill-down (Plaene -> Schritte -> Detail). Bestaetigt; kein H-Scroll (die Spalten sind
   minmax(0,1fr), die Schritt-Titel ellipsieren).

   Feinschliff: die tiefen Schritt-Einrueckungen (depth-1..4 = 1..4 × s4 = 16..64px,
   Z.819–822) werden auf sehr schmalen Viewports auf das s3-Raster reduziert, damit tief
   verschachtelte Schritt-Titel mehr Breite behalten (Lesbarkeit; kein H-Scroll — die
   Titel ellipsieren ohnehin). Rein Layout.
   ========================================================================== */
@media (max-width: 430px){
  .step-card.depth-1{ margin-left:var(--s3); }
  .step-card.depth-2{ margin-left:calc(2 * var(--s3)); }
  .step-card.depth-3{ margin-left:calc(3 * var(--s3)); }
  .step-card.depth-4{ margin-left:calc(4 * var(--s3)); }
}

/* ============================================================================
   BP-M4 (Plan 43 · Strang 1 · Step 2.6) — Formulare + Detail-Views + Touch-Ziele mobil.
   Formulare/Filter volle Breite (der 42rem-Cap entfaellt; Filter-Felder stapeln). Die
   Felder selbst fuellen ihre Container bereits per Flex-Column-Stretch (Formulare sind
   display:flex/column; box-sizing:border-box ist global, Z.221). Touch-Ziele >= 44px
   (WCAG 2.5.5) auf Nav-Links, Buttons und Filter-Chips. Rein Layout (keine Farben/Tokens).
   ========================================================================== */
@media (max-width: 768px){
  .write-form,.login-form,.tokens-form,.backup-form,.pwchange{ max-width:none; }
  .filters label{ width:100%; }
  /* Touch-Ziele >= 44px — die Elemente sind flex/inline-flex align-items:center, min-height greift. */
  .mainnav a{ min-height:44px; }
  .content button,.content .navlink{ min-height:44px; }
  .content a.chip--filter{ min-height:44px; }

  /* P2#4 (Operator-390px-Review) — die /plans-Server-Filter-Leiste (Modifier --scroll) wird mobil
     zu EINER horizontal scrollbaren Zeile statt auf zwei Zeilen umzubrechen: flex-wrap:nowrap +
     overflow-x:auto; die Chips schrumpfen nicht (flex:0 0 auto), sonst wuerden sie sich stauchen
     statt zu scrollen. Scrollbar ausgeblendet (scrollbar-width:none + ::-webkit-scrollbar) fuer die
     saubere App-Optik; -webkit-overflow-scrolling:touch fuer Momentum. overscroll-behavior-x:contain
     haelt die Scroll-Kette. (glass-mobile.js L8 entwaffnet die Zurueck-Wisch-Geste ueber genau so
     einem H-Scroller -> kein Konflikt.) Nur mobil; Desktop-.filter-chips (wrap) byte-unberuehrt. */
  .filter-chips--scroll{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .filter-chips--scroll::-webkit-scrollbar{ display:none; }
  .filter-chips--scroll > .chip{ flex:0 0 auto; }

  /* Die shell-lose /login-Seite (BP-6): .login-page ist ein place-items:center-Grid, dessen
     implizite Spalte auf die max-content-Breite der Karte (max-width:23rem) waechst und die
     Karte so auf schmalen Viewports ueber den Rand draengt (Bestand: 320 -> 72px, 375 -> 17px
     H-Ueberlauf, bereits VOR diesem Strang). grid-template-columns:100% bindet die Spalte an
     die Container-Breite; die Karte (width:100%, max-width:23rem) nimmt min(100%, 23rem) und
     ueberschreitet den Viewport nie. Padding s4 statt s6. Rein Layout. */
  .login-page{ grid-template-columns:100%; padding:var(--s4); }
}

/* ============================================================================
   Plan 45 · BP-A — BOTTOM-TAB-BAR + "Mehr"-SHEET (No-JS-Baseline).
   Die Tab-Bar ist auf JEDER Breite per Default verborgen (Desktop zeigt sie NIE) und wird
   NUR mobil enthuellt (unten). KEIN .js-only -> die Tab-Bar + das Sheet
   sind die No-JS-Navigation. DECKENDE Flaechen (--amb-base, KEIN backdrop-filter): so bildet
   die fixierte Tab-Bar KEINEN Containing-Block, der ihr position:fixed-Sheet-Panel einfinge
   (L3-neutral) — das Panel flieht korrekt zum Viewport. ASCII-Kommentare (U+2192-Pfeil
   triggert den Emoji-Guard). Farben nur aus Tokens/currentColor.
   ========================================================================== */
.tabbar{ display:none; }

@media (max-width: 768px){
  /* Die Tab-Bar traegt mobil die Navigation. Fixiert am unteren Rand, gepinnt ueber dem
     scrollenden <main>. safe-area unten (Home-Indicator). z-index 40 (Sheet-Panel 41). */
  .tabbar{
    display:flex; position:fixed; z-index:40;
    left:0; right:0; bottom:0;
    height:calc(56px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    align-items:stretch; justify-content:space-around;
    background:var(--amb-base); border-top:1px solid var(--glass-brd);
    box-shadow:0 -6px 18px -12px color-mix(in srgb, var(--ink-900) 28%, transparent);
    /* Plan 45 BP-C (A10): a permanent identity transform makes the tab-bar a CONTAINING BLOCK, so
       its position:fixed sheet panel positions relative to it (bottom:100%) AND both ride the ONE
       visualViewport re-anchor transform glass-mobile.js writes (keyboard inset + pinch-zoom).
       transform-origin bottom-left keeps the counter-scale anchored at the visual bottom-left. */
    transform:translateX(0); transform-origin:left bottom;
  }
  /* Jede Kachel: gleichmaessige Breite, Icon ueber Label; Touch-Ziel >= 44px hoch. */
  .tabbar .tab{
    flex:1 1 0; min-width:0; min-height:44px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:var(--s1) 0;
    color:var(--ink-500); text-decoration:none; font-weight:600;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .tabbar .tab .tab-ico{ flex:none; color:var(--ink-400); }
  .tabbar .tab .tab-label{
    font-size:.66rem; line-height:1; max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Aktiver Tab: aria-current gespiegelt via .active -> Marken-Faerbung. */
  .tabbar .tab.active,
  .tabbar .tab.active .tab-ico{ color:var(--brand-primary); }

  /* Der "Mehr"-Auslöser ist eine <summary>-Kachel; nativer Disclosure-Marker weg. */
  .more-sheet{ flex:1 1 0; display:flex; min-width:0; }
  .more-sheet > summary.tab{ flex:1 1 auto; list-style:none; }
  .more-sheet > summary.tab::-webkit-details-marker{ display:none; }

  /* P1 (Operator-390px-Review) — GESCHLOSSENES "Mehr"-Panel aus dem Layout nehmen. Modernes
     Chromium haelt den Inhalt eines geschlossenen <details> per content-visibility:hidden (via
     ::details-content) NICHT-gerendert, laesst ihm aber eine Layout-Box: die position:static
     .more-panel liegt dann am rechten Tab-Bar-Rand (x=Viewport-Breite, width:0) und ihre
     .more-link-Kinder ragen mit ihrer Eigenbreite ueber die Viewport-Kante hinaus. Das ist
     NICHT sichtbar (nicht bemalt, kein H-Scroll: scrollWidth==clientWidth) und kein Nutzer-Bug,
     ABER die Overflow-Abnahme (getBoundingClientRect().right>clientWidth) zaehlt diese Phantom-
     Box. display:none stellt die klassische "geschlossen == nicht ausgelegt"-Semantik wieder her
     -> keine Phantom-Box, Abnahme sauber. Beim Oeffnen (No-JS <details open> ODER das
     JS-Modal-Sheet) greift die :not([open])-Bedingung nicht mehr und die Regel darunter
     (.more-sheet[open] > .more-panel) enthuellt das Panel unveraendert. Mobil-only, Desktop
     unberuehrt (.tabbar ist auf Desktop display:none). */
  .more-sheet:not([open]) > .more-panel{ display:none; }

  /* Das "Mehr"-Panel klappt UEBER der Tab-Bar auf (nativ per <details open>). DECKENDE
     Flaeche (--amb-base) -> lesbar, kein Content-Durchscheinen; eigener Scroll, falls die 8
     Links + Konto/Logout nicht passen (overscroll-behavior:contain haelt die Kette). */
  .more-sheet[open] > .more-panel{
    /* position:fixed inside the tab-bar's containing block (BP-C) behaves like absolute relative to
       the tab-bar: bottom:100% sits it directly ABOVE the bar, left/right:0 spans the bar's full
       width, and it rides the same visualViewport transform. */
    position:fixed; z-index:41;
    left:0; right:0; bottom:100%;
    max-height:70dvh; overflow-y:auto; overscroll-behavior:contain;
    padding:var(--s3);
    background:var(--amb-base); border-top:1px solid var(--glass-brd);
    box-shadow:var(--glass-shadow);
  }
  .more-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s2); }
  .more-link{
    display:flex; align-items:center; gap:var(--s3);
    min-height:44px; padding:var(--s2) var(--s3); border-radius:var(--radius-xs);
    color:var(--ink-700); text-decoration:none; font-weight:550;
    background:color-mix(in srgb, var(--glass-brd) 22%, transparent);
  }
  .more-link .nav-ico{ flex:0 0 19px; color:var(--ink-400); }
  .more-link.active,
  .more-link.active .nav-ico{ color:var(--brand-primary); }

  /* Sheet-Fuss: Theme (js-only), Konto-Links, Logout — mobil gefaltet (Sidebar-Ersatz). */
  .sheet-foot{ margin-top:var(--s3); display:flex; flex-direction:column; gap:var(--s2); }
  .sheet-account{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s2); }
  .sheet-foot .logout{ width:100%; min-height:44px; }
  /* Plan 45 BP-I: die Theme-Segmente IM Sheet sind mobile Touch-Ziele -> >=44px (WCAG 2.5.5).
     Auf die .more-panel gescopt -> die Desktop-Sidebar-Segmente bleiben unberuehrt. (Die
     Sheet-Konto-Links tragen die Klasse .more-link und sind damit bereits >=44px, s.o.) */
  .more-panel .theme-seg-btn{ min-height:44px; }
}

/* ============================================================================
   Plan 45 · BP-B — SCREEN-STACK-TRANSITION (Progressive Enhancement via glass-mobile.js).
   glass-mobile.js swaps <main class="content"> in place and adds .screen-push / .screen-pop for
   one animation window. The incoming screen is DECKEND (--amb-base) -> the previous screen never
   shows through (Review 1: keine transparenten Screens). A pure OPACITY cross-fade is used on
   purpose: a `transform` on the scrolling <main> would form a containing block for its
   position:fixed descendants (L3) — opacity does not, so the stack transition stays L3-neutral.
   The class selectors (.content.screen-*) are DISTINCT from the bare `.content` rule, so the L3
   guard (test_glass_sidebar_shell) is untouched. Without JS (or prefers-reduced-motion) there is
   no transition at all. ASCII-only comments. Farben nur aus Tokens.
   ========================================================================== */
@keyframes glass-screen-enter{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width: 768px){
  .content.screen-push,
  .content.screen-pop{
    animation:glass-screen-enter .24s ease both;
    background:var(--amb-base);   /* opaque plane -> no bleed-through of the previous screen */
  }
  @media (prefers-reduced-motion: reduce){
    .content.screen-push,
    .content.screen-pop{ animation:none; }
  }
}

/* ============================================================================
   Plan 45 · BP-C — "Mehr"-Sheet-Scrim + Screen-Wechsel-Live-Region.
   .more-scrim: das Verdunkelungs-Overlay hinter dem offenen Bottom-Sheet. Statisch mit dem
   `hidden`-Attribut ausgeliefert (No-JS: nie sichtbar, das <details> oeffnet ohne Scrim);
   glass-mobile.js blendet es beim Sheet-Oeffnen ein (mobil). z-index 39 < Tab-Bar(40)/Panel(41)
   -> es dunkelt den Content, nicht die Nav. Klick schliesst das Sheet. Farbe nur aus Tokens.
   .sr-live: die visuell versteckte aria-live-Region (A7) fuer Screen-Wechsel-Ansagen; glass-
   mobile.js schreibt die neue Ueberschrift hinein. ASCII-only comments.
   ========================================================================== */
.more-scrim{
  position:fixed; inset:0; z-index:39;
  background:color-mix(in srgb, var(--ink-900) 45%, transparent);
}
.sr-live{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================================
   Plan 45 · BP-D — Zurueck-Pfeil (A7). Fixiert oben links, respektiert die safe-area; eigene
   DECKENDE Flaeche (--amb-base) + eigener Kontrast (H5, kein backdrop-filter). Touch-Ziel 44x44.
   Nur mobil gestylt (Desktop zeigt ihn NIE); das `hidden`-Attribut (JS-gesteuert) muss den
   display:flex UEBERSTIMMEN -> die explizite [hidden]-Regel (Spezifitaet 0,2,0). z-index 38 <
   Scrim(39) -> bei offenem Sheet liegt der Pfeil unter dem Scrim. Farben nur aus Tokens.
   ========================================================================== */
@media (max-width: 768px){
  .screen-back{
    position:fixed; z-index:38;
    top:calc(env(safe-area-inset-top) + var(--s2));
    left:calc(env(safe-area-inset-left) + var(--s2));
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0;
    border-radius:50%; border:1px solid var(--glass-brd);
    background:var(--amb-base); color:var(--ink-700);
    box-shadow:var(--glass-shadow); cursor:pointer;
  }
  .screen-back[hidden]{ display:none; }
}