:root{
  /* Globale Farbwelt fuer native Widget-Chrome (Selects, Date-/Time-Picker, Textareas,
     Scrollbars): folgt dem Theme. OHNE dies ziehen native Formularelemente ohne .fld
     im Hell-Modus dunkle Browser-Defaults (fast-schwarze Inputs auf weisser Karte —
     Christophs Hell-Modus-Bug). Der Switch unten dreht es fuer die helle Welt auf light. */
  color-scheme:dark;
  --rosa:#dc3757; --rosa-hell:#ff6a86; --rosa-dunkel:#a31f30; --rosa-tint:#fbeaec;
  --ink:#15181b; --ink-2:#1b1f23; --karte:#1e2329; --karte-2:#252b31;
  --rand:#2c333a; --rand-zart:#242a30; --rand-betont:#3a434c;
  --text:#eef1f3; --text-2:#aab3bb; --text-3:#727b83;
  --charcoal:#313539;
  --schrift:Arial,"Liberation Sans","DejaVu Sans",sans-serif;
  --r:8px; --r-s:5px;
  --nav-zu:78px; --nav-auf:248px;
  --topbar:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Illu-Tokens — Flaechen/Linien der Kachel-SVGs (dunkle Welt = Standard).
     Werte aus den heutigen Illu-Hex-Werten abgeleitet. Der Theme-Switch unten
     paart sie fuer die helle Welt um → EINE tokenisierte SVG je Kachel, keine
     Doppelpflege. Schulz-Rosa bleibt in BEIDEN Welten identisch (Akzent). */
  --illu-flaeche:      #1b1f23;  /* SVG-Grundflaeche (Chart-/Karten-Body) */
  --illu-flaeche-2:   #252b31;  /* zweite, hellere Flaeche (Header, Chips) */
  --illu-flaeche-3:#2e353c;  /* dritte Flaeche (Ordner-Reiter/Header-Ton) */
  --illu-flaeche-tief:#15181b;  /* tiefster Hintergrund (Hero-Backdrop, unterste Schicht) */
  --illu-linie:       #2c333a;  /* feine Linien/Gitter */
  --illu-linie-2:     #3a434c;  /* betonte Linien/Achsen */
  --illu-beleg:     #f3f4f5;  /* „Papier": Belege/Dokumente/Quittungen */
  --illu-beleg-rand:#c9ced3;  /* Beleg-Kontur */
  --illu-beleg-text:#9aa0a6;  /* Textzeilen-Platzhalter auf Belegen */
  --illu-akzent:    var(--rosa);       /* Schulz-Rosa #dc3757 */
  --illu-akzent-hell: var(--rosa-hell);/* #ff6a86 Highlights */
}
/* ===== Helle Welt (Farbwelten-Switch) — NUR Farbwerte, 1:1 gepaart mit der dunklen Welt oben.
   Inert: greift erst, wenn html[data-theme="hell"] gesetzt ist; ohne Attribut bleibt alles dunkel
   (= aktuelle Oberflaeche unveraendert). Akzent "Schulz-Rosa": Screen #dc3757 / Druck #d84c59.
   Quelle der Wahrheit der Paarung: Skill cockpit-ci. Vollstaendige Tokenisierung der Komponenten
   und die persoenliche Mitarbeiter-Einstellung sind ein eigener, spaeterer Ausbauschritt. ===== */
:root[data-theme="hell"]{
  color-scheme:light;   /* native Widget-Chrome hell (Inputs/Selects/Datepicker/Scrollbars) */
  --rosa:#dc3757; --rosa-hell:#ff6a86; --rosa-dunkel:#b02a44; --rosa-tint:#fdeef1;
  --ink:#f4f5f6; --ink-2:#eef1f3; --karte:#ffffff; --karte-2:#f4f5f6;
  --rand:#e3e6e9; --rand-zart:#eef1f3; --rand-betont:#cfd4d8;
  --text:#1d1d1b; --text-2:#878787; --text-3:#a8adb1;
  --charcoal:#e7eaed;
  /* Illu-Tokens — helle Welt: Flaechen werden hell, Belege bleiben Papier (mit
     klarer Kontur), Linien dunkeln zu Graustufen, damit sie auf Weiss sichtbar
     bleiben. Schulz-Rosa bleibt in BEIDEN Welten #dc3757 (Akzent, nie umfaerben). */
  --illu-flaeche:      #ffffff;
  --illu-flaeche-2:   #f4f5f6;
  --illu-flaeche-3:#eceff2;
  --illu-flaeche-tief:#ffffff;  /* im Hellmodus: Hintergrund bleibt weiss (kein Extra-Dunkel) */
  --illu-linie:       #e3e6e9;
  --illu-linie-2:     #cfd4d8;
  --illu-beleg:     #ffffff;
  --illu-beleg-rand:#cfd4d8;
  --illu-beleg-text:#b8bdc2;
  /* --illu-akzent / -hell erben unveraendert das Schulz-Rosa */
}
/* Wenige global eingebrannte Dunkel-Flaechen, die der Token-Switch (nur Farbwerte)
   nicht erreicht — fuer die helle Welt gezielt nachgezogen, OHNE Komponenten umzubauen:
   das dunkle Gesamthintergrund-Overlay aufhellen und die fix-dunkle Topbar mitnehmen.
   Sanfter Farbuebergang beim Umschalten (nur wenn der Nutzer Bewegung erlaubt). */
:root[data-theme="hell"] body::after{
  background:radial-gradient(1200px 800px at 80% -10%,rgba(244,245,246,.30) 0%,rgba(244,245,246,.62) 68%,rgba(244,245,246,.78) 100%);
}
:root[data-theme="hell"] .topbar{ background:rgba(244,245,246,.78); }

/* --- Sichtbare Komponenten in der hellen Welt nachgezogen ---
   Diese Flaechen tragen hart eingebrannte Dunkelwerte, die der reine Token-Switch
   (nur Farbwerte) nicht erreicht. Hier gezielt fuer html[data-theme="hell"] aufgehellt,
   OHNE die Komponenten umzubauen und OHNE die dunkle Welt zu beruehren. */

/* Seitennavigation: dunkler Verlauf-Endpunkt #16191d -> helle Karten-Token-Paarung. */
:root[data-theme="hell"] .nav{
  background:linear-gradient(180deg,var(--karte),var(--karte-2));
}
:root[data-theme="hell"] .nav-link.aktiv{ color:var(--rosa-dunkel); }
:root[data-theme="hell"] .nav-link:hover{ color:var(--text); }
/* Schulz-Logo im Hellmodus: das normale Voll-Logo hat einen hellen Schriftzug und
   verschwindet auf dem hellen Nav-Grund. Statt einer dunklen Plakette dahinter wird
   im Hellmodus die zweite Variante mit DUNKELGRAUEM Schriftzug eingeblendet
   (Wuerfel-Weiss + Schulz-Rosa bleiben CI-treu). Die Sichtbarkeits-/Hover-Logik der
   aufgeklappten Nav greift fuer beide Varianten identisch (siehe .logo-full-Block). */
:root[data-theme="hell"] .logo-full{ display:none }
:root[data-theme="hell"] .logo-full-dunkel{ display:block }

/* Modul-Hero-Band im Hellmodus: HELLES Band (Direktive Christoph — frueher bewusst dunkel
   belassen, jetzt umgekehrt). Die animierten SVG-Motive sind ueber die --illu-*-Tokens gebaut
   und paaren sich beim Theme-Switch selbst in die helle Welt (helle Flaechen + Rosa-Akzente),
   sodass das Band-Innere im Hellmodus hell leuchtet statt trueb-grau. Darauf abgestimmt unten:
   .hero-anim-Flaeche hell, der graue Lesbarkeits-Schleier (.hero::after) wird fuer .modulhero
   zu einem DEZENTEN Schulz-Rosa-Verlauf, und die (jetzt dunkle) Schrift sowie die Hero-Tabs
   werden weiter unten hell-gescoped umgestellt. Dunkelmodus bleibt vollstaendig unveraendert. */
/* Hero-Netz in der hellen Welt: das Canvas mischt sich (per JS) mit dunklerem Rosa
   und ohne additives "screen", siehe Hero-Block weiter unten — hier nur dokumentiert,
   damit die Hell-Anpassung des Netzes bei den übrigen Hero-Overrides sichtbar ist. */

/* Hero-Text im Hellmodus: der Startseiten-Foto-Hero (.hero-start) traegt weissen Text auf
   dunklem Nacht-Foto. Der Modul-Hero (.modulhero) ist im Hellmodus jetzt ein HELLES Band →
   dort dunkle Schrift (weiter unten spezifischer gesetzt). Darum die globale Weiss-Regel auf
   den Foto-Hero begrenzen (:not(.modulhero)), damit die dunkle Modul-Hero-Schrift greift. */
:root[data-theme="hell"] .hero:not(.modulhero) h1{ color:#fff; }
:root[data-theme="hell"] .hero:not(.modulhero) p{ color:rgba(255,255,255,.86); }
/* Modul-Hero im Hellmodus: dunkle, gut lesbare Schrift auf dem hellen Band; Gruss in Rosa. */
:root[data-theme="hell"] .modulhero h1{ color:#14181d; }
:root[data-theme="hell"] .modulhero p{ color:#39424b; }
:root[data-theme="hell"] .modulhero .gruss{ color:var(--rosa); }

/* Modulkacheln: Grundflaeche (radialer Dunkelverlauf) und unterer Abdunkel-Verlauf.
   Die eingebetteten SVG-Illustrationen sind vollstaendig ueber --illu-*-Tokens
   gebaut (siehe :root) und paaren sich beim Theme-Switch selbst um — in der hellen
   Welt also helle Flaechen + Papier mit klarer Kontur, kein dunkler Fleck. */
:root[data-theme="hell"] .modul-illu{
  background:radial-gradient(130% 100% at 28% 14%,var(--karte) 0%,var(--karte-2) 60%,var(--ink-2) 100%);
}
:root[data-theme="hell"] .modul::after{
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.55) 76%,rgba(255,255,255,.88) 100%);
}
:root[data-theme="hell"] .modul-koerper h3{ color:var(--text); }

/* ===== Button-/Komponenten-Lesbarkeit in der hellen Welt =====
   Etliche Knöpfe, Tabs, Badges und Chips tragen einen halbtransparenten
   WEISS-Schleier (rgba(255,255,255,.05–.14)) mit fest eingebranntem weissem
   Text (color:#fff / helle Pastelltöne). In der dunklen Welt = dezente helle
   Fläche + weisse Schrift (gut lesbar). In der hellen Welt wird der Weiss-Schleier
   nahezu weiss → weisse Schrift verschwindet (Christophs Befund: „Schrift in den
   Buttons sehr hell, schwer lesbar"). Hier gezielt für html[data-theme="hell"]:
   helle Flächen bekommen DUNKLEN Text, der Weiss-Schleier wird zur sichtbaren
   hellen Karten-/Grau-Fläche, farbige Pastelltöne dunkeln auf WCAG-AA-Niveau.
   UNANGETASTET bleiben Flächen mit Schulz-Rosa- oder dunkler Füllung (.btn-primaer,
   aktive Tabs, .nav-link.aktiv, .avatar, .kachel-ic): dort ist weisser Text korrekt
   und bleibt in BEIDER Welt identisch. Die dunkle Welt wird NICHT berührt. */

/* Ghost-Button: weisser Schleier + weisser Text → helle Karte + dunkler Text. */
:root[data-theme="hell"] .btn-ghost,:root[data-theme="hell"] .btn-sekundaer{
  background:var(--karte-2);color:var(--text);border-color:var(--rand-betont);
}
:root[data-theme="hell"] .btn-ghost:hover,:root[data-theme="hell"] .btn-sekundaer:hover{ background:var(--charcoal); }

/* Inaktive Modul-Tabs (rb-/rs-/ae-tab) auf dem jetzt HELLEN Modul-Hero-Band: helle Karte +
   dunkle Schrift. Aktive Tabs bleiben rosa mit weissem Text (CI, erbt aus der Dark-Basisregel
   .modulhero .rb-tab.aktiv) — daher nur die NICHT-aktiven hier umfärben. */
:root[data-theme="hell"] .modulhero .rb-tab:not(.aktiv),
:root[data-theme="hell"] .modulhero .rs-tab:not(.aktiv),
:root[data-theme="hell"] .modulhero .ae-tab:not(.aktiv){
  background:var(--karte-2);color:var(--text);border-color:var(--rand-betont);
}
:root[data-theme="hell"] .modulhero .rb-tab:not(.aktiv):hover,
:root[data-theme="hell"] .modulhero .rs-tab:not(.aktiv):hover,
:root[data-theme="hell"] .modulhero .ae-tab:not(.aktiv):hover{ background:var(--charcoal); }
/* Zähler-Pille im inaktiven Tab: heller Schleier → graue Fläche, dunkler Text.
   Alle Hero-Tab-Familien (rb-/rs-/ae-tab) tragen das Badge als .rb-tab-badge —
   daher alle drei Vorfahren-Klassen einschliessen. */
:root[data-theme="hell"] .modulhero .rb-tab:not(.aktiv) .rb-tab-badge,
:root[data-theme="hell"] .modulhero .rs-tab:not(.aktiv) .rb-tab-badge,
:root[data-theme="hell"] .modulhero .ae-tab:not(.aktiv) .rb-tab-badge{
  background:var(--charcoal);color:var(--text-2);
}
/* Rechtsbündige Setup-/Sofort-Tabs (rs-tab-rechts/-sofort): ihre Trennlinie + Hover sind im
   Dark mit rgba(255,255,255,…) gebaut und verschwinden auf hellem Band. Hier hell nachziehen:
   sichtbare Trennlinie, heller Hover. Der Rosa-Icon-/CTA-Akzent bleibt CI-treu. */
:root[data-theme="hell"] .modulhero .rs-tabs .rs-tab-rechts{
  border-left-color:var(--rand-betont);background:var(--karte-2);
}
:root[data-theme="hell"] .modulhero .rs-tabs .rs-tab-rechts:hover{ background:var(--charcoal); }
:root[data-theme="hell"] .modulhero .rs-tabs .rs-tab-sofort{
  background:var(--karte-2);border-color:var(--rosa);color:var(--rosa-dunkel);
}
:root[data-theme="hell"] .modulhero .rs-tabs .rs-tab-sofort:hover{ background:var(--rosa-tint); }
/* Notfall-/Signal-Tab (ereignismeldung): lokal mit --rosa-hell (#ff6a86) als Schrift +
   Kontur gebaut → auf dem hellen Band zu blass. Auf den AA-tauglichen --rosa-dunkel ziehen,
   Fläche helle Karte (erbt aus dem allg. rs-tab-Override). Aktiv bleibt rosa (CI). */
:root[data-theme="hell"] .modulhero .rs-tabs .rs-tab-notfall:not(.aktiv){
  background:var(--karte-2);color:var(--rosa-dunkel);border-color:var(--rosa);
}
:root[data-theme="hell"] .modulhero .rs-tabs .rs-tab-notfall:not(.aktiv):hover{ background:var(--rosa-tint); }

/* Profil-Menü: Hover-Zeile (weisser Text auf jetzt fast-weisser Karte) → dunkel. */
:root[data-theme="hell"] .menu a:hover{ background:var(--karte-2);color:var(--text); }

/* Graues Badge / Chip: Text auf hellem Grau klarer absetzen (kräftiger als --text-2). */
:root[data-theme="hell"] .badge.grau,
:root[data-theme="hell"] .chip{ background:var(--karte-2);color:var(--text);border-color:var(--rand-betont); }

/* Farbige Badges: helle Pastell-Schrift auf nun fast-weissem Tönungs-Grund ist zu
   blass. Schriftfarbe auf dunklere, AA-taugliche Töne ziehen; Fläche bleibt zart. */
:root[data-theme="hell"] .badge.ok{ color:#1f7a4d; }
:root[data-theme="hell"] .badge.warn{ color:#9a5b00; }
:root[data-theme="hell"] .badge.info{ color:#1f5e9e; }
:root[data-theme="hell"] .badge.neu{ color:var(--rosa-dunkel); }

/* Flash-/Hinweis-Meldungen: gleiche Logik — heller Pastelltext dunkeln, damit er
   auf der zarten Tönung über hellem Grund lesbar bleibt (Fett-Wörter mit). */
:root[data-theme="hell"] .meldung-warnung{ color:#7a4a00; }
:root[data-theme="hell"] .meldung-warnung b{ color:#9a5b00; }
:root[data-theme="hell"] .meldung-fehler{ color:#9e2740; }
:root[data-theme="hell"] .meldung-fehler b{ color:var(--rosa-dunkel); }
:root[data-theme="hell"] .meldung-info{ color:#1f5e9e; }
:root[data-theme="hell"] .meldung-info b{ color:#1a5288; }
:root[data-theme="hell"] .meldung-erfolg{ color:#1f7a4d; }
:root[data-theme="hell"] .meldung-erfolg b{ color:#1a6b42; }

/* ── Weitere hart eingebrannte Dunkel-Flaechen, fuer die helle Welt nachgezogen ──
   Gleiche Logik wie oben: nur ADDITIV fuer html[data-theme="hell"], die dunkle Welt
   bleibt voellig unberuehrt. Tokens 1:1 aus :root[data-theme="hell"]. */

/* Mobile Tab-Leiste unten: harter Dunkelwert rgba(21,24,27,.93) → heller Balken.
   Die inaktiven Tabs tragen bereits --text-3 (gilt in beiden Welten); aktiver Tab
   bleibt rosa (--rosa-hell) und hebt sich auf dem hellen Balken klar ab. */
:root[data-theme="hell"] .tabbar{
  background:rgba(244,245,246,.93);border-top-color:var(--rand);
}
:root[data-theme="hell"] .tabbar a{ color:var(--text-3); }

/* Formularfelder: native Datums-/Datei-/Dropdown-Picker im Hellmodus hell rendern
   (color-scheme:dark steht hart auf .fld). */
:root[data-theme="hell"] .fld{ color-scheme:light; }

/* AI-Panel (KI-Studio, nur DEV-Buehne): Schlagschatten + Dimmer sind fuer dunklen
   Grund gestaltet und wirken auf Hell zu schwer → abmildern. */
:root[data-theme="hell"] #ai-panel{ box-shadow:-8px 0 40px rgba(0,0,0,.18); }
:root[data-theme="hell"] #ai-dimmer{ background:rgba(0,0,0,.18); }

/* KPI-Fuss-Warnhinweis: --rosa-hell (#ff6a86) ist auf Hell zu blass → dunkler Akzent. */
:root[data-theme="hell"] .kpi-fuss .warn{ color:var(--rosa-dunkel); }

/* ── Modul-lokale Tab-/Chip-Klassen ohne eigenen Hell-Override ──
   Diese Klassen sind in den Modul-Templates inline mit Dunkelwerten definiert.
   Der Attribut-Selektor :root[data-theme="hell"] … hat hoehere Spezifitaet als die
   Template-Regeln (.modulhero .af-herotab bzw. .gb-tabs a) und gewinnt daher zentral. */

/* ════════ Hero-Ansicht-Tabs (.af-herotab) — EINE Wahrheit (Dunkel-Basis + Hell) ════════
   Die Dunkel-Basisregeln lagen frueher inline-dupliziert in mehreren Modul-Templates
   (angebote.html, angebote_diagramme.html, aufmass_abrechnung_*, _geruestbuch_tabs …) und
   drifteten bereits (z.B. fehlende .aktiv:hover-Regel in angebote_diagramme.html). Sie leben
   jetzt EINMALIG hier — direkt neben ihrem Hell-Override, damit beide Farbwelten zusammen
   gepflegt werden. Modul-Templates tragen die Klassen nur noch im Markup, kein eigenes CSS.
   Gescopt auf .modulhero (die Tabs sitzen im Modul-Hero-Band), damit die Regel nicht in
   fremde Kontexte streut. Aktiv = Schulz-Rosa (CI), inaktiv = ruhiger Ghost. */
.modulhero .af-subnav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;
  background:transparent;border:none;box-shadow:none;padding:0}
.modulhero .af-herotab{height:40px;padding:0 16px;border-radius:7px;font-family:inherit;
  font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  white-space:nowrap;text-decoration:none;background:rgba(255,255,255,.07);
  border:1px solid var(--rand-betont);color:#fff;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .2s}
.modulhero .af-herotab:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.modulhero .af-herotab.aktiv{background:var(--rosa);border-color:var(--rosa);color:#fff;
  box-shadow:0 10px 26px rgba(220,55,87,.4)}
.modulhero .af-herotab.aktiv:hover{background:var(--rosa);transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(220,55,87,.55)}
.modulhero .af-herotab i{font-size:16px}

/* Aufmass-/Abrechnungs-Kopf-Tabs: inaktiv heller Schleier→helle Karte+dunkler Text;
   aktiv bleibt rosa (CI). Sitzen auf dem bewusst dunkel gehaltenen Modul-Hero-Band —
   helle Karte + dunkler Text ist dort gut lesbar. */
:root[data-theme="hell"] .modulhero .af-herotab:not(.aktiv){
  background:var(--karte-2);color:var(--text);border-color:var(--rand-betont);
}
:root[data-theme="hell"] .modulhero .af-herotab:not(.aktiv) i{ color:var(--text-2); }
:root[data-theme="hell"] .modulhero .af-herotab:not(.aktiv):hover{
  background:var(--charcoal);
}

/* ════════ Segmented-Control (.cp-seg) — EINE Wahrheit fuer Verfeinerungs-Umschalter ════════
   Fuehrt die frueher fast-identischen .ang-seg (Angebote-Uebersicht, <a>) und .adg-seg
   (Angebote-Diagramme, <button>) zusammen. EINE Klasse, beide Element-Arten (Link + Button),
   damit die zwei Wahrheiten nicht auseinanderlaufen. Apple-Muster: ruhige Pillen-Gruppe,
   aktiv = Schulz-Rosa (CI). Nutzbar in jedem Modul als geteilter Baustein. */
.cp-seg{display:inline-flex;background:var(--ink-2);border:1px solid var(--rand-betont);
  border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap;align-self:flex-start}
.cp-seg a,.cp-seg button{height:34px;padding:0 14px;border-radius:7px;font-size:12.5px;
  font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--text-2);white-space:nowrap;font-family:inherit;border:none;background:transparent;
  cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}
.cp-seg a:hover,.cp-seg button:hover{color:var(--text)}
.cp-seg a.aktiv,.cp-seg button.aktiv{background:var(--rosa);color:#fff;
  box-shadow:0 4px 12px rgba(220,55,87,.32)}
.cp-seg a i,.cp-seg button i{font-size:15px}

/* ════════ Dezentes Lade-Feedback bei Server-Navigation (cp-nav) — geteilter Baustein ════════
   Tab-/Gruppier-/Facetten-Klicks sind volle Server-Roundtrips ohne Rueckmeldung → beim
   Klick fuehlt sich die Seite "eingefroren" an, bis der neue Render kommt. Ruhigstes
   Apple-Muster: (1) ein duenner Fortschritts-Schimmer ganz oben am Viewport, der sanft
   nach rechts laeuft, + (2) das geklickte Element wird leicht transparent + zeigt einen
   Mini-Spinner statt seines Icons. Kein Overlay, kein Blockieren — nur ein leises "kommt".
   Angesteuert per cockpit.js (opt-in ueber [data-nav-feedback] am Container). */
#cp-nav-schimmer{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,transparent,var(--rosa),var(--rosa-hell,#ff6a86));
  box-shadow:0 0 8px rgba(220,55,87,.6);opacity:0;pointer-events:none;
  transition:width .2s var(--ease,ease),opacity .2s}
#cp-nav-schimmer.an{opacity:1}
/* Geklicktes Navigations-Element: dezent zuruecknehmen + Mini-Spinner am Icon. */
.cp-nav-laedt{opacity:.6;pointer-events:none;transition:opacity .15s}
.cp-nav-laedt i:first-child{animation:cp-nav-spin .7s linear infinite}
@keyframes cp-nav-spin{to{transform:rotate(360deg)}}
/* Haus-Standard: bei reduced-motion keine Bewegung — der Schimmer erscheint dann als
   statischer, sofort voller Balken (Zustand sichtbar, aber ohne Lauf/Rotation). */
@media (prefers-reduced-motion: reduce){
  #cp-nav-schimmer{transition:opacity .1s;box-shadow:none}
  #cp-nav-schimmer.an{width:100% !important}
  .cp-nav-laedt i:first-child{animation:none}
}

/* Geruestbegehungs-Tabs (.gb-tabs a): inaktiv heller, aktiv (.on) bleibt rosa. */
:root[data-theme="hell"] .gb-tabs a{
  background:var(--karte-2);color:var(--text);border-color:var(--rand);
}
:root[data-theme="hell"] .gb-tabs a.on{
  background:var(--rosa);color:#fff;border-color:var(--rosa);
}

/* Gutschriften-Gruppieren-Buttons (.vg-gbtn): inaktiv helle Karte, aktiv rosa. */
:root[data-theme="hell"] .vg-gbtn{
  background:var(--karte-2);color:var(--text);border-color:var(--rand);
}
:root[data-theme="hell"] .vg-gbtn.aktiv{
  background:var(--rosa);color:#fff;border-color:var(--rosa);
}

/* Eingangspost Hero-Tabs (.ep-ges = Gesellschafts-Tabs, .ep-tab = Bereichs-Tabs):
   Dunkel-Basisregel traegt rgba(255,255,255,.07)+color:#fff — auf dem hellen Band
   unsichtbar. Hellmodus: sichtbare Karte + dunkler Text + klare Kontur; aktiv bleibt
   Rosa (CI, unveraendert). Das inline opacity:.7 auf dem Sub-Kuerzel-Span im ep-ges
   wuerde #fff noch blasser machen → mit opacity:1 zuruecksetzen, Farbe erbt vom Elternteil. */
:root[data-theme="hell"] .modulhero .ep-ges:not(.aktiv){
  background:var(--karte-2);color:var(--text);border-color:var(--rand-betont);
}
:root[data-theme="hell"] .modulhero .ep-ges:not(.aktiv):hover{
  background:var(--charcoal);
}
:root[data-theme="hell"] .modulhero .ep-ges:not(.aktiv) span[style*="opacity"]{
  opacity:1 !important;color:var(--text-2);
}
:root[data-theme="hell"] .modulhero .ep-ges:not(.aktiv) .ep-ges-badge{
  background:var(--charcoal);color:var(--text-2);border-color:var(--rand-betont);
}
:root[data-theme="hell"] .modulhero .ep-tab:not(.aktiv){
  background:var(--karte-2);color:var(--text);border-color:var(--rand-betont);
}
:root[data-theme="hell"] .modulhero .ep-tab:not(.aktiv):hover{
  background:var(--charcoal);
}
:root[data-theme="hell"] .modulhero .ep-tab:not(.aktiv) .ep-tab-badge{
  background:var(--charcoal);color:var(--text-2);border-color:var(--rand-betont);
}

/* Projektakte-Status-Chips: Neon-Gruen/-Blau auf Hell unlesbar → dunklere AA-Toene
   auf zarter Toenung (analog zu .badge.ok/.info oben). */
:root[data-theme="hell"] .chip--aktiv{
  background:rgba(31,122,77,.10);color:#1f7a4d;border-color:rgba(31,122,77,.30);
}
:root[data-theme="hell"] .chip--abgeschlossen{
  background:rgba(31,94,158,.10);color:#1f5e9e;border-color:rgba(31,94,158,.30);
}

@media (prefers-reduced-motion: no-preference){
  body, .topbar, .nav, .modul-illu, .hero-anim{
    transition:background-color .35s var(--ease), color .35s var(--ease);
  }
  /* Hero-Netz beim Farbwelt-Wechsel weich überblenden (Opazität ändert sich hell/dunkel). */
  .hero-net{ transition:opacity .35s var(--ease); }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--schrift);color:var(--text);
  background:var(--ink);
  overflow-x:hidden;
}
/* HAUS-CI-Grundregel: Links sind Schulz-Rosa — NIE Browser-Blau (Christoph, 06.07.2026).
   Bewusst als Element-Selektor (niedrigste Spezifitaet): jeder gestylte Kontext
   (.menu a, .crumb a, .btn, Tabs, inline color:inherit, ...) ueberstimmt diese
   Grundfarbe automatisch. Sie greift genau dort, wo ein Anker bisher nackt war. */
a{color:var(--rosa);text-decoration:none}
a:hover{color:var(--rosa-hell)}
/* fließender Gesamthintergrund (Gerüst-Perspektive, durchscheinend) */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url('../assets/bg_geruest.webp') center/cover no-repeat;
  filter:grayscale(1) contrast(1.08) brightness(1);
  opacity:.14;transform-origin:center;
  animation:bgdrift 38s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(1200px 800px at 80% -10%,rgba(21,24,27,.26) 0%,rgba(21,24,27,.54) 68%,rgba(21,24,27,.66) 100%);
}
@keyframes bgdrift{
  0%{transform:scale(1.12) translate(0,0)}
  50%{transform:scale(1.18) translate(-2.5%,-2%)}
  100%{transform:scale(1.24) translate(2%,-4.5%)}
}
@media (prefers-reduced-motion: reduce){ body::before{animation:none} }
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--rand-betont);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Grundgerüst ---------- */
.shell{display:flex;min-height:100vh}

/* ---------- Seitennavigation (hover-expand) ---------- */
.nav{
  width:var(--nav-zu);flex:0 0 var(--nav-zu);
  background:linear-gradient(180deg,var(--ink-2),#16191d);
  border-right:1px solid var(--rand-zart);
  display:flex;flex-direction:column;padding:14px 12px;gap:6px;
  position:sticky;top:0;height:100vh;z-index:40;
  transition:width .38s var(--ease),flex-basis .38s var(--ease);
  overflow-x:hidden;overflow-y:auto;
}
.nav::-webkit-scrollbar{width:0}
.nav:hover{width:var(--nav-auf);flex-basis:var(--nav-auf)}
.nav-marke{
  display:flex;align-items:center;height:var(--topbar);
  padding:0 8px;margin-bottom:10px;flex:0 0 auto;position:relative;
}
.logo-bereich{position:relative;display:flex;align-items:center;height:44px}
.logo-cube{height:40px;width:auto;display:block;
  transition:opacity .25s var(--ease)}
.logo-full,.logo-full-dunkel{position:absolute;left:-2px;top:50%;height:50px;width:auto;
  transform:translateY(-50%) translateX(-6px);opacity:0;pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(220,55,87,.3));
  transition:opacity .3s var(--ease) .06s,transform .4s var(--ease) .06s}
/* Dunkle Logo-Variante (dunkler Schriftzug) NUR im Hellmodus sichtbar — siehe
   Hell-Overrides oben. Im Dunkelmodus komplett aus. */
.logo-full-dunkel{display:none;filter:none}  /* Hell-Logo OHNE rosa Schlagschatten (Christoph) */
.nav:hover .logo-cube{opacity:0}
.nav:hover .logo-full,.nav:hover .logo-full-dunkel{opacity:1;transform:translateY(-50%) translateX(0)}
/* eigenständiges Würfel-Logo (z. B. Login) */
.wuerfel{height:42px;width:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(220,55,87,.4))}

.nav-grp{font-size:10px;letter-spacing:.18em;color:var(--text-3);
  padding:14px 14px 6px;white-space:nowrap;opacity:0;transition:opacity .3s}
.nav:hover .nav-grp{opacity:1}

.nav-link{
  display:flex;align-items:center;gap:0;height:44px;padding:0 17px;
  border-radius:var(--r-s);color:var(--text-2);text-decoration:none;
  position:relative;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav-link i{font-size:22px;flex:0 0 22px;transition:transform .25s var(--ease)}
.nav-link .lbl{margin-left:16px;opacity:0;transform:translateX(-6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.nav:hover .nav-link .lbl{opacity:1;transform:none}
.nav-link:hover{background:var(--karte-2);color:var(--text)}
.nav-link:hover i{transform:scale(1.12)}
.nav-link.aktiv{background:linear-gradient(90deg,rgba(220,55,87,.18),rgba(220,55,87,.04));color:#fff}
.nav-link.aktiv::before{
  content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;
  border-radius:0;background:var(--rosa);box-shadow:0 0 14px var(--rosa);
}
.nav-link .pill{margin-left:auto;background:var(--rosa);color:#fff;font-size:11px;
  font-weight:600;padding:2px 7px;border-radius:4px;opacity:0;transition:opacity .28s}
.nav:hover .nav-link .pill{opacity:1}
.nav-foot{margin-top:auto}

/* ---------- Hauptspalte ---------- */
.haupt{flex:1;min-width:0;display:flex;flex-direction:column}

/* Topbar */
.topbar{
  height:var(--topbar);display:flex;align-items:center;gap:18px;
  padding:0 28px;position:sticky;top:0;z-index:30;
  background:rgba(21,24,27,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rand-zart);
}
/* Modul-Tabs im Hero-Band (CI-Standard): Button-Look wie „Alle Module ansehen".
   Tab-Container ohne eigenen Kasten; Tabs als Buttons (aktiv = pink mit Glow,
   inaktiv = ghost). .modulhero erhöht die Spezifität gegenüber den Modul-Styles. */
.modulhero .rb-subnav,.modulhero .rs-tabs{display:flex;flex-wrap:wrap;gap:8px;
  margin:16px 0 0;background:transparent;border:none;box-shadow:none;padding:0}
.modulhero .rb-tab,.modulhero .rs-tab{
  height:40px;padding:0 16px;border-radius:7px;font-family:inherit;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid var(--rand-betont);color:#fff;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .2s}
.modulhero .rb-tab:hover,.modulhero .rs-tab:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.modulhero .rb-tab.aktiv,.modulhero .rs-tab.aktiv{
  background:var(--rosa);border-color:var(--rosa);color:#fff;box-shadow:0 10px 26px rgba(220,55,87,.4)}
.modulhero .rb-tab.aktiv:hover,.modulhero .rs-tab.aktiv:hover{
  background:var(--rosa);transform:translateY(-2px);box-shadow:0 16px 34px rgba(220,55,87,.55)}
.modulhero .rb-tab-badge{background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
.modulhero .rb-tab.aktiv .rb-tab-badge{background:rgba(255,255,255,.28);color:#fff}
/* Rechtsbündig abgesetzter Tab (z. B. „Handy einrichten"): wird ans Zeilenende
   geschoben und durch eine zarte Trennlinie + eigenes Icon-Tönung als separater
   Werkzeug-/Setup-Knopf erkennbar gemacht — NICHT als weiterer Inhalts-Tab. */
.modulhero .rs-tabs .rs-tab-rechts{margin-left:auto;
  border-left:1px solid var(--rand-betont);background:rgba(255,255,255,.04)}
.modulhero .rs-tabs .rs-tab-rechts:hover{background:rgba(255,255,255,.12)}
.modulhero .rs-tabs .rs-tab-rechts i{color:var(--rosa-hell,#ff6a86)}
@media(max-width:600px){
  /* Auf schmalen Geräten bricht die Tab-Zeile ohnehin um → nicht erzwungen
     rechtsbündig festklemmen, sonst entsteht eine leere Lücke. */
  .modulhero .rs-tabs .rs-tab-rechts{margin-left:0}
}
/* Sofortmeldungs-Tab (rechtsbündiger Rosa-CTA, z. B. „Handy-Sofortmeldung
   einrichten"). Eine zentrale Definition statt Inline-Kopien je Template. */
.rs-tabs .rs-tab-sofort{margin-left:auto;border-color:var(--rosa);color:var(--rosa-hell,#ff6a86)}
.rs-tabs .rs-tab-sofort:hover{background:rgba(220,55,87,.14);border-color:var(--rosa-hell,#ff6a86)}
@media(max-width:760px){.rs-tabs .rs-tab-sofort{margin-left:0}}
.crumb{font-size:14px;color:var(--text-2)}
.crumb b{color:var(--text);font-weight:600}
.crumb a{color:var(--text-2);text-decoration:none;transition:.2s}
.crumb a:hover{color:var(--rosa-hell)}
.suche{margin-left:auto;position:relative;display:flex;align-items:center}
.suche i{position:absolute;left:14px;color:var(--text-3);font-size:18px;pointer-events:none}
.suche input{
  width:230px;height:42px;border-radius:7px;border:1px solid var(--rand);
  background:var(--ink-2);color:var(--text);padding:0 18px 0 42px;font-family:inherit;
  font-size:14px;outline:none;transition:width .35s var(--ease),border-color .25s,box-shadow .25s;
}
.suche input::placeholder{color:var(--text-3)}
.suche input:focus{width:320px;border-color:var(--rosa);box-shadow:0 0 0 4px rgba(220,55,87,.14)}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--rand);
  background:var(--ink-2);color:var(--text-2);display:grid;place-items:center;
  cursor:pointer;position:relative;transition:.22s var(--ease);font-size:20px;
}
.icon-btn:hover{color:#fff;border-color:var(--rand-betont);transform:translateY(-1px)}
/* Farbwelten-Umschalter: aktiv (helle Welt) zeigt den Schulz-Rosa-Akzent. */
.theme-toggle[aria-pressed="true"]{color:var(--rosa);border-color:var(--rosa)}
:root[data-theme="hell"] .icon-btn:hover{color:var(--text);border-color:var(--rand-betont)}
.dot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;
  background:var(--rosa);box-shadow:0 0 0 3px var(--ink-2)}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rosa);
  animation:puls 1.8s var(--ease) infinite}
@keyframes puls{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}

.profil{position:relative}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--rosa),var(--rosa-dunkel));color:#fff;
  font-weight:600;font-size:14px;cursor:pointer;border:2px solid transparent;transition:.22s}
.avatar:hover{border-color:var(--rosa-hell)}
.menu{
  position:absolute;right:0;top:46px;width:212px;background:var(--karte);
  border:1px solid var(--rand);border-radius:var(--r);padding:8px;
  box-shadow:0 24px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;
  transition:.24s var(--ease);transform-origin:top right;
}
.menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.profil:hover .menu{opacity:1;transform:none;pointer-events:auto}
.menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  color:var(--text-2);text-decoration:none;font-size:14px;transition:.18s}
.menu a:hover{background:var(--karte-2);color:#fff}
.menu .sep{height:1px;background:var(--rand-zart);margin:6px 4px}

/* ---------- Inhalt ---------- */
.inhalt{padding:24px 28px 48px;flex:1}

/* Hero */
.hero{
  position:relative;border-radius:10px;overflow:hidden;min-height:230px;
  display:flex;align-items:flex-end;padding:30px 34px;margin-bottom:24px;
  border:1px solid var(--rand-zart);
}
/* Deko-Hintergrundschichten des Hero (Foto/Verlauf/Diagonale/SVG-Flow) fangen NIE
   Klicks: sie sind rein dekorativ und liegen zwar unter dem Inhalt (z3), aber ein
   transform/Stacking-Context am Inhalt (z. B. GSAP-Eintritt, backdrop-filter-Chips)
   kann die z-Reihenfolge in manchen Browsern aufheben → tote Klicks oben rechts im
   Band (Status-Chips/„erledigen"-Knopf). pointer-events:none macht das robust. */
.hero-bg,.hero-anim,.hero-diag{pointer-events:none}
.hero::after{pointer-events:none}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%;
  transform:scale(1.06);animation:ken 22s ease-in-out infinite alternate;z-index:0}
@keyframes ken{from{transform:scale(1.06) translateX(0)}to{transform:scale(1.16) translateX(-2%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(15,17,19,.92) 0%,rgba(15,17,19,.62) 42%,rgba(15,17,19,.18) 100%)}
/* Übersichts-Hero (.hero-start): helles, logofreies Gerüst-Foto im Hellmodus, Nacht-Bild im
   Dark. Die Bild-URLs kommen als CSS-Variablen via asset_url aus dem Template (richtige Pfade
   + Cache-Busting). Beschränkt auf die Start-/Übersichtsseite — Modul-Heros bleiben unberührt.
   Im Hellmodus liegt ein heller Lesbarkeits-Verlauf NUR links unter der (dunklen) Schrift, rechts
   bleibt das Foto (Gerüstbrücke · Mitarbeiter · Himmel) frei. */
.hero-start .hero-bg{background-image:var(--hero-dunkel)}
:root[data-theme="hell"] .hero-start .hero-bg{background-image:var(--hero-hell);background-position:center 44%}
:root[data-theme="hell"] .hero-start::after{
  background:linear-gradient(100deg,rgba(244,245,246,.93) 0%,rgba(244,245,246,.74) 40%,rgba(244,245,246,.22) 70%,transparent 92%)}
/* Hellmodus: dunkle Schrift auf hellem Schleier (statt weiss auf dunkel). Hoehere Spezifitaet
   (.hero.hero-start .hero-inhalt) schlaegt die globale hell-Regel .hero:not(.modulhero) h1/p. */
:root[data-theme="hell"] .hero.hero-start .hero-inhalt h1{color:#14181d}
:root[data-theme="hell"] .hero.hero-start .hero-inhalt p{color:#39424b}
:root[data-theme="hell"] .hero.hero-start .hero-inhalt .gruss{color:var(--rosa)}
/* Modul-Hero im Hellmodus: den grauen Lesbarkeits-Schleier (.hero::after, dunkelgrauer
   Verlauf) durch einen DEZENTEN Schulz-Rosa-Verlauf ersetzen. Stuetzt links die (jetzt
   dunkle) Schrift und laeuft nach rechts transparent aus, sodass das helle Anim-Motiv frei
   bleibt. Bewusst zart gehalten — kein knalliges Rosa-Overlay. Nur Hellmodus. */
:root[data-theme="hell"] .modulhero::after{
  background:linear-gradient(105deg,rgba(220,55,87,.16) 0%,rgba(220,55,87,.06) 45%,transparent 100%)}
.hero-diag{position:absolute;top:0;bottom:0;right:-60px;width:280px;z-index:2;
  background:linear-gradient(180deg,var(--rosa),var(--rosa-dunkel));
  transform:skewX(-12deg);opacity:.9;
  -webkit-mask:linear-gradient(90deg,transparent,#000 40%);mask:linear-gradient(90deg,transparent,#000 40%)}
.hero-inhalt{position:relative;z-index:3;max-width:560px}
.hero .gruss{font-size:13px;letter-spacing:.16em;color:var(--rosa-hell);font-weight:600;margin-bottom:8px}
.hero h1{font-size:30px;font-weight:700;line-height:1.12;letter-spacing:-.01em}
.hero p{color:var(--text-2);margin-top:8px;font-size:14px}
.hero-cta{display:flex;gap:12px;margin-top:18px}
/* Modul-Header: gleiche Maße/Position wie der Hero, animiertes SVG-Flow statt Foto.
   Die .hero::after-Verlaufschicht bleibt aktiv (Lesbarkeit links); .hero-diag entfällt.
   hero-inhalt bekommt volle Breite damit Navigations-Buttons die Seitenbreite nutzen können. */
.modulhero .hero-inhalt{max-width:none;width:100%}
/* ── Anim-Containment (robuste, globale Loesung) ──────────────────────────────
   Problem: alle Anim-SVGs haben viewBox 0 0 1200 240 (Verhaeltnis 5:1) +
   preserveAspectRatio="…slice". Der frueher bandfuellende .hero-anim (inset:0)
   hat ein viel quadratischeres Verhaeltnis (~3,8:1) → "slice" zoomt das SVG auf
   Bandbreite und laesst es vertikal ueberlaufen. Bei Motiven mit grossem,
   zentralem Element (z. B. dem Schutzschild von 'arbeitssicherheit') wird dieses
   dadurch riesig und ueberlagert den Text.
   Loesung: das SVG ist NICHT mehr bandfuellend, sondern eine rechts anliegende,
   hoehenbegrenzte, halbtransparente Deko. Der Container traegt das viewBox-Format
   (aspect-ratio 5/1) → "slice" muss nicht mehr ueberlaufen und das Motiv bleibt in
   seiner Eigenproportion dezent rechts im Band. Eine weiche Links-Maske blendet es
   zur Textseite hin aus. Greift fuer ALLE Module identisch. Die Grund-/Backdrop-
   Flaeche wandert auf .modulhero selbst, damit das gesamte Band gefuellt bleibt. */
.modulhero{background:#0f1214}
:root[data-theme="hell"] .modulhero{background:var(--illu-flaeche)}
.hero-anim{
  position:absolute;right:0;left:auto;top:50%;transform:translateY(-50%);
  z-index:0;overflow:hidden;
  /* Breite fuehrt (rechte ~58% des Bandes), Hoehe folgt formatrichtig aus dem
     viewBox-Verhaeltnis 5:1 → das SVG behaelt seine Eigenproportion, "slice" muss
     nie ueberlaufen. Vertikal zentriert; max-height deckelt es zusaetzlich auf die
     Bandhoehe, falls das Band einmal sehr schmal/hoch wird. */
  width:58%;aspect-ratio:5/1;height:auto;max-height:100%;
  opacity:.85;
  /* nach links weich ausblenden, damit das Motiv zur (linken) Textseite verschwimmt. */
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);
          mask:linear-gradient(90deg,transparent 0%,#000 38%,#000 100%);
}
:root[data-theme="hell"] .modulhero .hero-anim{opacity:.7}
/* Das SVG fuellt jetzt seinen (formatrichtigen) Container ohne Ueberlauf. */
.hero-anim svg{width:100%;height:100%;display:block}
/* Hero-Netz: gemeinsamer spaciger 3D-Neuronen-Layer (per cockpit.js injiziert).
   Liegt als Hintergrund in JEDEM .hero — hinter dem Inhalt (.hero-inhalt z3) und
   UNTER dem Lesbarkeits-Verlauf (.hero::after z1), damit der Hero-Text lesbar bleibt.
   Beim Foto-Hero (Startseite) schwebt das Netz dezent über dem Nacht-Foto, beim
   Modul-Hero über der dunklen .hero-anim-Fläche. Dezente Grund-Deckkraft; das
   Einfärben (Rosa/Cyan vs. helles Rosa) macht das Canvas selbst je Farbwelt. */
.hero-net{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  display:block;pointer-events:none;opacity:.9;
  /* "screen" (breit unterstützt) mischt die leuchtenden Knoten/Kanten additiv
     in den dunklen Grund → spaciger Glow ohne harte Kanten. */
  mix-blend-mode:screen;
}
/* Hell-Welt: heller Grund verträgt kein additives Mischen → normal mischen, zurückhaltender. */
:root[data-theme="hell"] .hero-net{mix-blend-mode:normal;opacity:.6}
@media (prefers-reduced-motion: reduce){
  /* statisches Netz (cockpit.js animiert nicht) — noch dezenter, reine Textur. */
  .hero-net{opacity:.5}
  :root[data-theme="hell"] .hero-net{opacity:.4}
}
.btn{
  display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;
  border-radius:7px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid transparent;text-decoration:none;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.btn i{font-size:19px;transition:transform .25s var(--ease)}
.btn-primaer{background:var(--rosa);color:#fff;box-shadow:0 10px 26px rgba(220,55,87,.4)}
.btn-primaer:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(220,55,87,.55)}
.btn-primaer:hover i{transform:translateX(4px)}
.btn-ghost,.btn-sekundaer{background:rgba(255,255,255,.07);color:#fff;border-color:var(--rand-betont)}
.btn-ghost:hover,.btn-sekundaer:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
/* Ghost-Variante mit Schulz-Rosa-Akzent (Sekundaeraktion mit Signalcharakter,
   z. B. „Hochstufen"/„Vervollstaendigen"). Zentral definiert = hausweit nutzbar. */
.btn-rosa-ghost{background:rgba(220,55,87,.10);color:var(--rosa-hell);border-color:var(--rosa)}
.btn-rosa-ghost:hover{background:rgba(220,55,87,.20);border-color:var(--rosa-hell);transform:translateY(-2px)}
.btn-rosa-ghost i{color:var(--rosa-hell)}
:root[data-theme="hell"] .btn-rosa-ghost{color:var(--rosa-dunkel);border-color:var(--rosa)}
:root[data-theme="hell"] .btn-rosa-ghost i{color:var(--rosa-dunkel)}
/* Destruktive Aktion (Stornieren/Ablehnen/Loeschen) — Schulz-Rosa-Umriss,
   transparent, erst im Hover gefuellt. KEIN echtes Rot (Haus-CI). Zentral definiert =
   hausweit nutzbar; ersetzt modul-eigene ``.bd-btn-rot``/``.bs-btn-rot``. */
.btn-gefahr{background:transparent;color:var(--rosa-hell);border-color:var(--rosa)}
.btn-gefahr:hover{background:var(--rosa);color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(220,55,87,.42)}
.btn-gefahr i{color:inherit}
:root[data-theme="hell"] .btn-gefahr{color:var(--rosa-dunkel);border-color:var(--rosa)}
:root[data-theme="hell"] .btn-gefahr:hover{color:#fff}
/* Kompakte Button-Variante (CI-Standard, ersetzt verstreute Inline-Hoehen) */
.btn-klein{height:40px;padding:0 16px;font-size:13px}
.btn-klein i{font-size:17px}

/* Kennzahlen */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi{
  background:linear-gradient(180deg,var(--karte),var(--ink-2));border:1px solid var(--rand-zart);
  border-radius:var(--r);padding:18px 20px;position:relative;overflow:hidden;cursor:default;
  transition:transform .28s var(--ease),border-color .28s,box-shadow .28s;
}
.kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--rosa),var(--rosa-hell));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.kpi:hover{transform:translateY(-5px);border-color:var(--rand-betont);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.kpi:hover::after{transform:scaleX(1)}
.kpi-kopf{display:flex;align-items:center;justify-content:space-between;color:var(--text-2);font-size:13px}
/* Ikon-Chip: NEUTRAL (Token-Flaeche/gedaempfter Text). Der frueher hier verankerte
   ``.kpi[data-ampel]``-Rosa-Akzent ist entfallen (KONVERGENZ: die Einkauf-Listen nutzen
   jetzt die zentralen ``.kpi-kachel``-Kacheln, nicht mehr die ``.kpi[data-ampel]``-Variante). */
.kpi-ic{width:36px;height:36px;border-radius:6px;display:grid;place-items:center;
  background:var(--illu-flaeche-2);color:var(--text-3);font-size:19px;
  transition:background .2s var(--ease),color .2s var(--ease)}
/* Zahlen-Typografie (Kritik C-8: „Dashboard-Wumms"): die grosse Zahl ist der Held der
   Kachel — sie soll fuehren. Groesser, mit buendigen Ziffern (tabular-nums). */
.kpi-wert{font-size:clamp(2rem,1.4rem + 1.6vw,2.6rem);font-weight:700;margin-top:14px;
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.kpi-fuss{font-size:12px;margin-top:8px;color:var(--text-3)}
.kpi-fuss .up{color:#5ec98c}.kpi-fuss .warn{color:var(--rosa-hell)}
/* Klickbare KPI (``<a class="kpi">``) — fuehrt in die gefilterte Liste. Der
   Basis-``.kpi`` traegt ``cursor:default``; als Link ist der Cursor ein Zeiger und
   der Text erbt die Farbe (kein Link-Blau). Geteilte Erweiterung fuer alle Module,
   die eine KPI-Kachel verlinken. */
a.kpi{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.kpi:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}

/* ═══ Einkauf & Beschaffung — geteilte Rest-Komponenten (nach KONVERGENZ) ══════
   KONVERGENZ (kiki×blissful-shaw, 2026-07-03): Die frueheren ek-Facetten-/Chip-/
   Werkzeug-/Zaehler-/Kein-Treffer-/Tbl-Wrap-Klassen sind ENTFERNT — der Einkauf-
   Redesign-Live-Stand (blissful-shaw) filtert die Listen client-seitig ueber modul-
   eigene ``bs-``/``lf-``/``ea-``-Werkzeugleisten und die zentrale ``filterleiste``-
   Makro (``_einkauf_ui.html``); der serverseitige ek-Facetten-Ansatz (einkauf-liste.js)
   ist damit entfallen. Es bleiben nur die Klassen, die weiter GENUTZT werden:
   ``.ek-leer`` (Modul Projektakte) und die Progressive-Disclosure-Marker
   (``.ek-verborgen``/``.ek-disclosure-feld``) fuer das Detail-Aktionsmodell. */

/* Leerzustand — genutzt von module/projektakte.html. Titel (was fehlt) +
   Handlungssatz (was der Nutzer tun kann). */
.ek-leer{padding:48px 24px;text-align:center;color:var(--text-3)}
.ek-leer > i{font-size:40px;display:block;margin-bottom:14px;color:var(--rand-betont)}
.ek-leer h3{font-size:15px;color:var(--text-2);margin:0 0 4px;font-weight:600}
.ek-leer p{font-size:13px;margin:0}

/* Progressive Disclosure der Detail-Aktions-Textfelder (Aktionsmodell §4.2):
   das Feld startet eingeklappt und oeffnet erst beim ersten Klick auf die Aktion
   (einkauf-aktionen.js). ``.ek-disclosure-feld`` ist nur der Marker-Container.
   Ohne JavaScript bleibt das Feld sichtbar (``<noscript>``-Regel im Template hebt
   ``ek-verborgen`` auf) — die Aktion ist immer bedienbar. Genutzt in
   bedarfsmeldung_detail + bestellung_detail. */
.ek-verborgen{display:none}

/* ── Hell-Welt-Nachzug (additiv, Dunkel unveraendert) ──────────────────────── */
:root[data-theme="hell"] .ek-leer > i{color:var(--rand-betont)}
/* KPI-Ikon-Chip in Hell (Kritik C-5): neutral = zarte Karte + gedaempfter Text. */
:root[data-theme="hell"] .kpi-ic{background:var(--karte-2);color:var(--text-3)}

/* Module-Raster */
.abschnitt{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 14px}
.abschnitt h2{font-size:17px;font-weight:600}
.abschnitt a{color:var(--text-2);font-size:13px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:.2s}
.abschnitt a:hover{color:var(--rosa-hell)}
.module{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.modul{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:212px;
  border:1px solid var(--rand-zart);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.modul:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.5);border-color:var(--rand-betont)}
.modul-illu{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(130% 100% at 28% 14%,#272d34 0%,#1a1e23 60%,#15181b 100%);
  transform:scale(1.01);transition:transform .6s var(--ease)}
.modul:hover .modul-illu{transform:scale(1.035)}
.modul-illu svg{position:absolute;inset:0;width:100%;height:100%}
.modul::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,17,19,0) 0%,rgba(15,17,19,.12) 46%,rgba(15,17,19,.62) 76%,rgba(15,17,19,.93) 100%)}
/* --- Illustrations-Bewegung --- */
@keyframes scanmove{0%{transform:translateY(2px)}100%{transform:translateY(120px)}}
.illu-scan{animation:scanmove 3s var(--ease) infinite alternate}
.modul:hover .illu-scan{animation-duration:1.5s}
@keyframes bracketpulse{0%,100%{opacity:.5}50%{opacity:1}}
.illu-bracket{animation:bracketpulse 2.6s ease-in-out infinite}
.illu-lens{transition:transform .55s var(--ease)}
.modul:hover .illu-lens{transform:translate(-9px,-7px)}
.illu-glyph{opacity:.18;transition:opacity .45s var(--ease)}
.modul:hover .illu-glyph{opacity:1}
@keyframes warnblink{0%,100%{opacity:.45}50%{opacity:1}}
.illu-warn{animation:warnblink 2.1s ease-in-out infinite;transform-origin:center}
@keyframes drawcheck{from{stroke-dashoffset:70}to{stroke-dashoffset:0}}
.illu-check{stroke-dasharray:70;stroke-dashoffset:0}
.modul:hover .illu-check{animation:drawcheck .75s var(--ease)}

/* --- Einkauf & Beschaffung: gemeinsame Leitmotive fuer Kacheln (index.html) UND
   Modulheader (header_anim/artikelstamm|bedarfsmeldung|lieferant|bestellung.html).
   Global hier definiert (eine Wahrheitsquelle), damit Kachel und Header dieselbe
   Bewegung teilen — nicht doppelt lokal pflegen. Alle laufen SELBSTSTAENDIG (infinite),
   damit sie auch im Header ohne :hover-Kontext sichtbar bewegen; die :hover-Regeln
   beschleunigen nur zusaetzlich auf der Startseiten-Kachel. */
/* Artikelstamm: Auswahl-Balken wandert zeilenweise durch den Katalog + Gruppen-Tabs atmen */
@keyframes ast-scan{0%,100%{transform:translateY(0);opacity:.14}25%{transform:translateY(22px);opacity:.2}50%{transform:translateY(44px);opacity:.14}75%{transform:translateY(66px);opacity:.2}}
.illu-ast-scan{animation:ast-scan 5.2s var(--ease) infinite}
@keyframes ast-tab{0%,100%{opacity:.45}50%{opacity:1}}
.illu-ast-tab{animation:ast-tab 3.6s var(--ease) infinite}
.modul:hover .illu-ast-scan{animation-duration:3.4s}
/* Bedarfsmeldung: Haekchen zeichnet sich zyklisch (selbstlaufende Variante von illu-check) + Budget-Ring fuellt sich */
@keyframes bm-haken{0%{stroke-dashoffset:28;opacity:0}12%{opacity:1}34%{stroke-dashoffset:0;opacity:1}90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:28;opacity:0}}
.illu-bm-haken{stroke-dasharray:28;stroke-dashoffset:28;animation:bm-haken 5s var(--ease) infinite}
@keyframes bm-budget{0%{stroke-dashoffset:188}20%{stroke-dashoffset:110}60%{stroke-dashoffset:70}100%{stroke-dashoffset:70}}
.illu-bm-budget{stroke-dasharray:188;stroke-dashoffset:188;animation:bm-budget 4.6s var(--ease) infinite alternate}
.modul:hover .illu-bm-budget{animation-duration:3s}
/* Lieferanten: Markise atmet, Bewertungs-Chip pulsiert, Stern funkelt */
@keyframes lf-markise{0%,100%{opacity:.85}50%{opacity:.6}}
.illu-lf-markise{transform-box:fill-box;transform-origin:top center;animation:lf-markise 4s var(--ease) infinite}
@keyframes lf-note{0%,100%{opacity:.14}50%{opacity:.34}}
.illu-lf-note{animation:lf-note 3.4s var(--ease) infinite}
@keyframes lf-stern{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.25);opacity:1}}
.illu-lf-stern{transform-box:fill-box;transform-origin:center;animation:lf-stern 2.8s var(--ease) infinite}
/* Bestellungen: Posten fallen zyklisch in den Korb, Versandpaket atmet */
@keyframes bs-fall{0%{transform:translateY(0);opacity:0}12%{opacity:.9}45%{transform:translateY(64px);opacity:.9}55%{transform:translateY(64px);opacity:0}100%{transform:translateY(64px);opacity:0}}
.illu-bs-fall{animation:bs-fall 4.2s var(--ease) infinite}
@keyframes bs-paket{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
.illu-bs-paket{transform-box:fill-box;transform-origin:center;animation:bs-paket 3.4s var(--ease) infinite}
.modul:hover .illu-bs-fall{animation-duration:2.8s}
.modul:hover .illu-bs-paket{animation-duration:2.4s}
/* Fahrzeuge (Fuhrpark, Gruppe „Logistik") — technische Fein-Linien-Zeichnung: die Raeder
   drehen OHNE Speichen (ein Highlight-Segment am Radkranz rotiert weich, fz2-rad), ein weicher
   Fahrbahn-Schimmer zieht durch (fz2-schimmer), und ein GPS-Punkt wandert die Telemetrie-/
   Routen-Polyline entlang (fz2-gps). Ruhige Apple-Zyklen (4-5s), kein Puls-Blinken. Global wie
   die uebrige Logistik-Familie, damit Kachel + Modulheader dieselbe Bewegung teilen (eine
   Wahrheitsquelle). WICHTIG (bekannte Falle): fz2-rad setzt per CSS ein `transform: rotate`
   — das UEBERSCHREIBT ein Attribut-transform. Darum tragen die rotierenden Segmente KEIN
   transform-Attribut; ihr Drehzentrum steckt als `transform-origin` absolut in px am Element. */
@keyframes fz2-rad{to{transform:rotate(360deg)}}
.fz2-rad{animation:fz2-rad 4.4s linear infinite}
@keyframes fz2-schimmer{0%{transform:translateX(0);opacity:0}18%{opacity:.5}82%{opacity:.5}100%{transform:translateX(480px);opacity:0}}
.fz2-schimmer{animation:fz2-schimmer 5s var(--ease) infinite}
/* GPS-Punkt (Kern + weicher Ring) wandert die Routen-Polyline ab; Ring atmet leicht mit.
   Der translate-Pfad ist auf die Polyline-Stuetzpunkte abgestimmt (relativ zu 34/60). */
@keyframes fz2-gps{0%{transform:translate(0,0)}20%{transform:translate(62px,-12px)}38%{transform:translate(116px,6px)}58%{transform:translate(180px,-16px)}78%{transform:translate(244px,2px)}100%{transform:translate(310px,-14px)}}
.fz2-gps{animation:fz2-gps 5s var(--ease) infinite alternate}
.modul:hover .fz2-rad{animation-duration:2.4s}
.modul:hover .fz2-schimmer{animation-duration:3s}

@media (prefers-reduced-motion: reduce){
  .illu-scan,.illu-bracket,.illu-warn{animation:none}
  .illu-ast-scan,.illu-ast-tab,.illu-lf-markise,.illu-lf-note,.illu-lf-stern,.illu-bs-fall,.illu-bs-paket{animation:none}
  /* Fahrzeuge: Animation aus, stimmiger Endzustand — Rad-Highlight + GPS-Punkt stehen ruhig
     an ihrer Startposition, der wandernde Schimmer bleibt unsichtbar (opacity war 0). */
  .fz2-rad,.fz2-gps,.fz2-schimmer{animation:none}
  /* Haken/Ring in ihrem Endzustand einfrieren, damit statisch etwas Sinnvolles steht */
  .illu-bm-haken{animation:none;stroke-dashoffset:0;opacity:1}
  .illu-bm-budget{animation:none;stroke-dashoffset:70}
}

/* ── DEV-AI-Aktivitätsindikator: Schulz-Würfel dreht sich wenn der Roboter arbeitet ── */
@keyframes schulz-drehen{to{transform:rotate(360deg)}}
.logo-dreht{
  animation:schulz-drehen 1.4s linear infinite;
  transform-origin:center center;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  /* Icon bleibt sichtbar — nur die Drehbewegung abschalten */
  .logo-dreht{animation:none}
}

.modul-kopf{position:absolute;top:14px;left:14px;right:14px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start}
.modul-status{font-size:11px;font-weight:600;padding:4px 10px;border-radius:4px;letter-spacing:.04em;
  background:rgba(94,201,140,.16);color:#7ddaa3;border:1px solid rgba(94,201,140,.3)}
.modul-status.bau{background:rgba(255,170,60,.15);color:#ffc06a;border-color:rgba(255,170,60,.3)}
.modul-status.pause{background:rgba(255,255,255,.1);color:var(--text-2);border-color:var(--rand)}
.modul-pfeil{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;z-index:3;
  background:var(--rosa);color:#fff;font-size:20px;opacity:0;transform:translate(6px,-6px) scale(.7);
  transition:.3s var(--ease)}
.modul:hover .modul-pfeil{opacity:1;transform:none}
.modul-koerper{position:relative;z-index:3;padding:18px}
.modul-koerper h3{font-size:18px;font-weight:600}
.modul-koerper .sub{font-size:13px;color:var(--text-2);margin-top:3px}
/* Offene-Aufgaben-Badge an der Modul-Kachel (z. B. GefB: zu unterschreiben) */

/* ── Offene-Punkte-Zone der Startseiten-Kachel (Startseiten-Umbau 2026-07-04) ──
   EINE Zone unter dem Titel, additiv (loescht keine bestehende .modul-*-Regel).
   Die Kacheln rendern zuerst eine LEERE Zone mit reservierter Hoehe (.op-slot) —
   die Badges laedt /uebersicht-zaehler nach dem First Paint leise nach (kein
   Layout-Sprung / Content-Shift). Toene = Haus-CI (Rosa/Bernstein/neutral). */
.op-zone{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.op-slot{min-height:26px}                    /* reservierter Platz, haelt die Hoehe */
.op-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:11px;font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s var(--ease,ease-in-out)}
.op-chip.sichtbar{opacity:1}                 /* leises Einblenden nach dem Fetch */
.op-chip b{font-weight:700}
.op-chip.dringend{background:var(--rosa);color:#fff}                       /* Handlungsbedarf */
.op-chip.warnung{background:#e7a008;color:#15181b}                         /* nur Eingangspost-Rueckfrage */
.op-chip.normal{background:var(--illu-flaeche-2,rgba(255,255,255,.08));color:var(--text-2)}  /* reine Info */
@media(prefers-reduced-motion:reduce){.op-chip{transition:none}}

/* ── „Das wartet auf dich" — Aufgaben-Banner ueber den Startseiten-Kacheln ──
   (Startseiten-Umbau 2026-07-16) Buendelt die offenen Punkte ALLER sichtbaren
   Module als klickbare Chips (slug -> Modulseite). Befuellt aus DENSELBEN
   /uebersicht-zaehler-Daten wie die Kachel-Badges. Startet eingeklappt
   (grid-template-rows:0fr, kein Layout-Footprint) und blendet nach dem Fetch
   sanft ein -> kein harter Sprung der Kacheln. Keine Punkte -> bleibt eingeklappt. */
.aufgaben-banner{display:grid;grid-template-rows:0fr;opacity:0;margin:0;
  transition:grid-template-rows .45s var(--ease,ease), opacity .35s var(--ease,ease), margin .45s var(--ease,ease)}
.aufgaben-banner.gefuellt{grid-template-rows:1fr;opacity:1;margin:0 0 24px}
.aufgaben-banner>.ab-inner{overflow:hidden;min-height:0;
  background:linear-gradient(180deg,var(--karte),var(--ink-2));
  border:1px solid var(--rand-zart,var(--rand));border-radius:var(--r);padding:18px 20px}
.ab-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ab-icon{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;
  background:var(--rosa);color:#fff;font-size:19px}
.ab-kopf h2{font-size:16px;font-weight:700;line-height:1.2}
.ab-sub{color:var(--text-2);font-size:12.5px;margin-top:2px}
.ab-chips{display:flex;flex-wrap:wrap;gap:10px}

/* Ein klickbarer Aufgaben-Chip -> fuehrt direkt auf die Modulseite. Farbe = Ton
   (dringend Rosa / warnung Bernstein / normal neutral) — konsistent mit .op-chip.
   Link traegt IMMER eine explizite Textfarbe (kein Browser-Blau). */
.ab-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border-radius:12px;
  text-decoration:none;font-size:13px;font-weight:600;line-height:1.15;border:1px solid transparent;
  transition:transform .15s var(--ease,ease),filter .15s var(--ease,ease)}
.ab-chip:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ab-chip:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}
.ab-chip-zahl{flex:0 0 auto;min-width:24px;height:24px;padding:0 6px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  font-variant-numeric:tabular-nums;background:rgba(0,0,0,.22)}
.ab-chip-text{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ab-chip-detail{font-weight:500;opacity:.82;font-size:12px}
.ab-chip-pfeil{font-size:15px;opacity:.85}
.ab-chip.dringend{background:var(--rosa);color:#fff}
.ab-chip.warnung{background:#e7a008;color:#15181b}
.ab-chip.warnung .ab-chip-zahl{background:rgba(0,0,0,.16)}
.ab-chip.normal{background:var(--illu-flaeche-2,rgba(255,255,255,.08));color:var(--text);border:1px solid var(--rand)}
.ab-chip.normal .ab-chip-zahl{background:rgba(255,255,255,.1)}

@media(max-width:680px){
  .aufgaben-banner.gefuellt{margin:0 0 18px}
  .ab-chips{gap:8px}
  .ab-chip{width:100%;justify-content:flex-start}         /* volle Breite = grosses Touch-Ziel */
  .ab-chip .ab-chip-pfeil{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  .aufgaben-banner{transition:opacity .2s ease}
  .ab-chip{transition:none}
}

/* Kompaktere Kachel-Zielgroessen (additive Overrides, Startseiten-Umbau):
   Beschreibung + Hover-Detail sind entfallen → mehr Kacheln je Reihe, niedrigere
   Kacheln. Die bestehenden Kernregeln (.modul, .modul-koerper, .module-start)
   bleiben unveraendert — nur diese drei Werte werden ueberschrieben. */
.module-start{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.modul{min-height:164px}
.modul-koerper{padding:16px}

/* Touch-Geräte (Handy/Tablet): Hover-Effekte der Kacheln neutralisieren.
   Sonst löst der ERSTE Tipp nur den :hover-Zustand aus (Detail-Text klappt auf,
   Kachel hebt sich, andere Kacheln rendern neu und ihre Flow-Animationen ruckeln)
   statt dem Link zu folgen — die Kachel war „erst beim zweiten Tipp klickbar".
   So navigiert ein Tipp sofort und es entstehen keine Hover-Repaints. */
@media (hover: none), (pointer: coarse) {
  .modul:hover{transform:none}
  .modul:hover .modul-illu{transform:none}
  .modul:hover .illu-glyph{opacity:.18}
  .modul:hover .illu-lens{transform:none}
  .modul:hover .illu-scan{animation-duration:3s}
  .modul:hover .illu-check{animation:none}
  .modul .modul-pfeil{opacity:1}  /* Pfeil dauerhaft als Tap-Hinweis */
}

/* Aktivität */
.grid-unten{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-top:24px}
.panel{background:var(--karte);border:1px solid var(--rand-zart);border-radius:var(--r);padding:20px 22px}
.panel h2{font-size:16px;font-weight:600;margin-bottom:14px}
.akt{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--rand-zart);transition:.2s}
.akt:last-child{border-bottom:none}
.akt:hover{transform:translateX(4px)}
.akt-ic{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;flex:0 0 40px;
  background:var(--karte-2);color:var(--rosa-hell);font-size:19px}
.akt-txt{flex:1}.akt-txt b{font-weight:600;font-size:14px}
.akt-txt p{font-size:13px;color:var(--text-2);margin-top:2px}
.akt-zeit{font-size:12px;color:var(--text-3);white-space:nowrap}
.ent{display:flex;align-items:center;gap:12px;padding:13px;border-radius:var(--r-s);
  background:linear-gradient(90deg,rgba(220,55,87,.12),transparent);border:1px solid var(--rand-zart);
  margin-bottom:10px;transition:.22s var(--ease);cursor:pointer}
.ent:hover{border-color:var(--rosa);transform:translateX(3px)}
.ent .ent-ic{color:var(--rosa-hell);font-size:20px}
.ent b{font-size:14px;font-weight:600}.ent p{font-size:12px;color:var(--text-2)}
.ent .go{margin-left:auto;color:var(--text-3);transition:.2s}
.ent:hover .go{color:var(--rosa-hell);transform:translateX(3px)}

/* Entrance: Performance-Direktive (Christoph, 2026-06-21) — KEIN opacity:0-Start-
   zustand mehr. Navigation, Hero und Hauptbereich erscheinen sofort beim ersten Paint,
   gleichzeitig, ohne Einblenden und ohne auf JS zu warten. */

/* ===================== Geteilte Seiten-Bausteine ===================== */
.seitenkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.seitenkopf h1{font-size:26px;font-weight:700}
.seitenkopf .sk-sub{color:var(--text-2);font-size:14px;margin-top:5px}
.seitenkopf .sk-akt{display:flex;gap:10px;flex-wrap:wrap}
.bereich-titel{font-size:12px;letter-spacing:.16em;color:var(--text-3);margin:28px 2px 12px;font-weight:600}
.bereich-titel:first-child{margin-top:6px}
.detail-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:start}
@media(max-width:1000px){.detail-grid{grid-template-columns:1fr}}
.panel-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.panel-kopf h2{margin-bottom:0}
.panel .mehr{color:var(--text-2);font-size:13px;text-decoration:none;transition:.2s}
.panel .mehr:hover{color:var(--rosa-hell)}

/* Tabelle */
.tabelle{width:100%;border-collapse:collapse;font-size:14px}
.tabelle th{text-align:left;vertical-align:middle;color:var(--text-3);font-weight:600;font-size:12px;letter-spacing:.04em;padding:11px 12px;border-bottom:1px solid var(--rand-zart)}
.tabelle td{padding:13px 12px;border-bottom:1px solid var(--rand-zart)}
.tabelle tbody tr{cursor:pointer;transition:background .16s}
.tabelle tbody tr:hover{background:var(--karte-2)}
.tabelle tbody tr.aktiv{background:linear-gradient(90deg,rgba(220,55,87,.12),transparent)}
.tabelle tbody tr.aktiv td:first-child{box-shadow:inset 3px 0 0 var(--rosa)}
/* Klickbare Zeilen (data-href): Zeiger-Cursor signalisiert Klickbarkeit; Hover-
   Background greift bereits über die allgemeine tbody-tr-Regel. Fokus-Ring für
   Tastaturzugänglichkeit. */
tr[data-href]{cursor:pointer}
tr[data-href]:focus-visible{outline:2px solid var(--rosa);outline-offset:-2px}
.tabelle .re{text-align:right;font-variant-numeric:tabular-nums}
.tabelle .stark{font-weight:600}
/* Maße-Anhang an einer Bezeichnung (Logistik-Materialbestand u. a.): dezente, kleine
   Zusatz-Angabe (L/H×B) direkt hinter dem Namen — sekundäre Textfarbe, kleiner Grad,
   umbruchfest, damit sie den Namen nicht dominiert. EIN Muster (Liste/KST/Akte). */
.lm-masse{color:var(--text-2);font-size:12px;font-weight:400;white-space:nowrap}
/* Summen-Fußzeile (tfoot .lm-summe): abgesetzter Grund + klebt beim vertikalen
   Scrollen unten im .tabwrap (Gegenstück zum Sticky-Kopf), damit die Summe immer
   sichtbar bleibt. EIN Muster für alle Cockpit-Tabellen mit Summenzeile. */
.tabelle tfoot .lm-summe td{position:sticky;bottom:0;background:var(--karte-2);
  border-top:2px solid var(--rand);z-index:4}
/* Textlinks im Haus-Look — EIN Muster statt Browser-Default (blau + Unterstrich).
   .link-name: Namen/Titel in normaler Textfarbe, keine Link-Optik (die ganze Zeile
   ist klickbar, der Name soll wie Text lesen). .link-zart: funktionale Aktions-
   Links (tel:/mailto:) dezent in Schulz-Rosa, ohne Unterstreichung. */
a.link-name{color:inherit;text-decoration:none}
a.link-name:hover{color:var(--rosa-hell);text-decoration:none}
a.link-zart{color:var(--rosa-hell);text-decoration:none}
a.link-zart:hover{color:var(--rosa);text-decoration:underline}
/* Sticky-Kopf — EIN Muster für ALLE Cockpit-Tabellen: beim vertikalen Scrollen
   bleibt der Spaltenkopf oben stehen. top:0 bezieht sich auf den nächsten
   scrollenden Vorfahren (i. d. R. der .tabwrap-Wrapper oder das Fenster). Der
   deckende --karte-Hintergrund + der box-shadow als Trennstrich sorgen dafür,
   dass durchlaufende Zeilen sauber unter dem Kopf verschwinden (z-index über den
   Zeilen). Der border-bottom der Köpfe wandert beim Sticky mit und kann je nach
   Sub-Pixel durchscheinen → daher der box-shadow als verlässliche Trennlinie. */
.tabelle thead th{position:sticky;top:0;z-index:5;background:var(--karte);
  box-shadow:inset 0 -1px 0 var(--rand-zart)}
/* Tabellen-Scroll-Wrapper — EIN Haus-Muster fuer den fixierten Spaltenkopf.
   PROBLEM (Christophs Live-Befund 06.07.): Steckt eine Tabelle in einem Wrapper mit
   `overflow-x:auto` (fuer breite Tabellen), etabliert dieser Wrapper einen Scroll-
   Container. `position:sticky; top:0` des thead klebt dann gegen den WRAPPER, nicht
   gegen das Fenster — und weil der Wrapper vertikal mit der Seite hinausscrollt,
   verschwindet der Kopf beim Scrollen. Genau das brach den Sticky-Kopf.
   LOESUNG (zentral, opt-in per `.tabwrap`): Der Wrapper wird SELBST der vertikale
   Scroll-Container (max-height + overflow:auto). Der Kopf klebt dann verlaesslich
   oben IM Wrapper — horizontal wie vertikal ein einziger, sauberer Scrollbereich.
   Die max-height laesst den Wrapper bis knapp unter den Viewport-Rand wachsen
   (Topbar + etwas Luft abgezogen), sodass lange Listen im Wrapper scrollen und der
   Kopf steht. Kurze Listen bleiben unveraendert (Wrapper waechst nur bis zum Inhalt).
   Auf Mobil (Kartenstapel) wird der Wrapper deaktiviert — dort gibt es keinen Kopf. */
.tabwrap{overflow:auto;max-height:calc(100vh - var(--topbar, 60px) - 90px);
  overscroll-behavior:contain}
@media(max-width:640px){
  .tabwrap{overflow:visible;max-height:none}
}
/* Sichtbarer Listen-Abschluss — EIN Haus-Muster fuer scrollbare Listen (z. B. in
   `.tabwrap`). PROBLEM (Christophs Live-Befund 20.07.): Am Ende eines overflow-Scroll-
   Containers wird ein `padding-bottom` des Containers vom Browser nicht als sichtbarer
   Freiraum gerendert — der Nutzer erkennt nicht, dass er wirklich unten angekommen ist.
   LOESUNG: ein echtes, IM Scrollfluss liegendes Abschluss-Element NACH der Tabelle
   (innerhalb des Scroll-Containers). Es liefert grosszuegige Luft nach unten (die letzte
   Zeile bekommt Abstand zum Rand) und ein dezentes, CI-konformes Ende-Signal: eine zarte
   Abschlusslinie plus gedaempfter Hinweistext — kein greller Balken. Beide Farbwelten
   ueber Variablen. Wiederverwendbar in jedem Modul, ohne bestehende Tabellen zu aendern:
   einfach `<div class="liste-ende">…</div>` als letztes Kind des Scroll-Containers. */
.liste-ende{
  margin-top:12px;
  padding:15px 12px 46px;
  border-top:1px solid var(--rand-zart);
  text-align:center;
  font-size:12px;
  color:var(--text-still);
  user-select:none;
}
.liste-ende i{font-size:14px;vertical-align:-2px;margin-right:5px;opacity:.75}
/* Sortierbare Spaltenköpfe (data-sortierbar) — EIN Stil für alle Cockpit-Tabellen */
.tabelle th.sortier-th{cursor:pointer;user-select:none;transition:color .15s,box-shadow .15s;white-space:nowrap}
.tabelle th.sortier-th:hover{color:var(--text-2)}
.tabelle th.sortier-th:focus-visible{outline:2px solid var(--rosa);outline-offset:2px;border-radius:3px}
.tabelle th.sortier-aktiv{color:var(--rosa)}
.tabelle th .sortier-pfeil{font-size:13px;margin-left:5px;vertical-align:-2px}

/* Verstellbare Spaltenbreiten (JS-Motor in cockpit.js) — EIN Stil fuer alle Tabellen.
   Der Zieh-Griff sitzt absolut am rechten Rand des <th>; er liegt UEBER dem Sortier-
   Klickbereich, faengt aber Pointer-Events selbst ab (JS stoppt die Propagation), sodass
   Sortieren und Breiten-Ziehen sich nicht in die Quere kommen. Sichtbar erst beim
   Hovern (dezent), auf Touch immer greifbar (breiterer Trefferbereich). Beide Farbwelten
   ueber die CSS-Variablen. */
.tabelle th.ck-spalt-th{position:relative}
.tabelle th.ck-spalt-th .ck-spalt-griff{
  position:absolute;top:0;right:-4px;width:9px;height:100%;
  cursor:col-resize;touch-action:none;z-index:6;
  /* Der sichtbare Trenn-Strich sitzt mittig im Griff (::after), damit die Trefferzone
     breiter ist als die 1px-Linie — fingertauglich. */
}
.tabelle th.ck-spalt-th .ck-spalt-griff::after{
  content:"";position:absolute;top:22%;bottom:22%;left:4px;width:2px;border-radius:2px;
  background:transparent;transition:background .15s}
.tabelle th.ck-spalt-th:hover .ck-spalt-griff::after{background:var(--rand)}
.tabelle th.ck-spalt-th .ck-spalt-griff:hover::after,
.tabelle th.ck-spalt-th .ck-spalt-griff:active::after{background:var(--rosa)}
/* Waehrend des Ziehens: globaler Resize-Cursor + keine Text-Auswahl (ruhiges Ziehen). */
body.ck-spalt-zieht{cursor:col-resize!important;user-select:none}
/* Auf Touch-Geraeten (kein Hover) den Trenn-Strich dauerhaft dezent zeigen. */
@media(hover:none){
  .tabelle th.ck-spalt-th .ck-spalt-griff{right:-6px;width:14px}
  .tabelle th.ck-spalt-th .ck-spalt-griff::after{background:var(--rand-zart)}
}

/* ─── Mobil-Kartenstapel fuer Tabellen (Schleife 5 / S5-1, Haus-weites Muster) ───
   Opt-in per data-stack am <table class="tabelle" data-stack>: unter ~640px wird
   jede <tr> zur Karte, jede <td> zeigt ihren Spaltentitel als Label VOR dem Wert
   (per data-label="..." am <td>, aus dem <th>-Text gerendert — s. Templates).
   Damit bricht KEIN Statuswert/keine Zahl mehr ab, kein horizontales Scrollen
   fuer die Kernaussage einer Zeile (Pruefkatalog Dim. 5, "Handy-tauglich").
   Opt-in statt global: Tabellen, die bewusst als reine Matrix scrollen sollen
   (z.B. Rollen-x-Modul-Matrix), bleiben von diesem Umbau unberuehrt. Klickbare
   Zeilen (tr[data-href]) UND Sortierung bleiben unveraendert funktionsfaehig —
   das JS bindet Events an <tr>/<th>, die Card-Optik aendert nur display/Flow. */
@media(max-width:640px){
  .tabelle[data-stack] thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}     /* Kopf bleibt fuer Screenreader, visuell versteckt (Labels uebernehmen) */
  .tabelle[data-stack],.tabelle[data-stack] tbody{display:block}
  .tabelle[data-stack] tr{display:block;margin-bottom:12px;padding:4px 14px;
    background:var(--karte);border:1px solid var(--rand-zart);border-radius:var(--r-s,8px)}
  .tabelle[data-stack] tr:last-child{margin-bottom:0}
  .tabelle[data-stack] tr.aktiv{background:var(--karte)}    /* Aktiv-Verlauf (Desktop-Naht) im Stack nicht sinnvoll -> neutral */
  .tabelle[data-stack] tr.aktiv td:first-child{box-shadow:none}
  .tabelle[data-stack] td{display:flex;align-items:flex-start;justify-content:space-between;
    gap:14px;padding:10px 0;border-bottom:1px solid var(--rand-zart);text-align:right}
  .tabelle[data-stack] td:last-child{border-bottom:none}
  .tabelle[data-stack] td::before{content:attr(data-label);flex:0 0 auto;
    font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--text-3);text-align:left}
  .tabelle[data-stack] td:not([data-label]),.tabelle[data-stack] td[data-label=""]{display:block;text-align:left}
  .tabelle[data-stack] td:not([data-label])::before,.tabelle[data-stack] td[data-label=""]::before{content:none}
}

/* Badges & Chips */
.badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:4px;white-space:nowrap;display:inline-block}
.badge.ok{background:rgba(94,201,140,.16);color:#7ddaa3;border:1px solid rgba(94,201,140,.3)}
.badge.warn{background:rgba(255,170,60,.15);color:#ffc06a;border:1px solid rgba(255,170,60,.3)}
.badge.neu{background:rgba(220,55,87,.16);color:var(--rosa-hell);border:1px solid rgba(220,55,87,.35)}
.badge.info{background:rgba(90,160,230,.16);color:#86b7eb;border:1px solid rgba(90,160,230,.3)}
.badge.grau{background:rgba(255,255,255,.07);color:var(--text-2);border:1px solid var(--rand)}
.chip{font-size:11px;padding:3px 9px;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid var(--rand);color:var(--text-2);white-space:nowrap;display:inline-block}

/* Meldungen (Flash + Modul-Hinweise) */
.meldungen{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.meldung{font-size:13.5px;line-height:1.5;padding:12px 15px;border-radius:var(--r);
  border:1px solid var(--rand);background:var(--karte-2);color:var(--text)}
.meldung b{color:var(--text)}
.meldung-warnung{background:rgba(255,170,60,.10);border-color:rgba(255,170,60,.35);color:#ffd49a}
.meldung-warnung b{color:#ffc06a}
.meldung-fehler{background:rgba(220,55,87,.12);border-color:rgba(220,55,87,.4);color:#f1a5b4}
.meldung-fehler b{color:var(--rosa-hell)}
.meldung-info{background:rgba(90,160,230,.10);border-color:rgba(90,160,230,.32);color:#a9cdf2}
.meldung-info b{color:#86b7eb}
.meldung-erfolg{background:rgba(94,201,140,.12);border-color:rgba(94,201,140,.32);color:#a3e0c0}
.meldung-erfolg b{color:#7ddaa3}

/* Launchpad-Kacheln */
.kachel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.kachel{display:flex;flex-direction:column;gap:11px;background:linear-gradient(180deg,var(--karte),var(--ink-2));border:1px solid var(--rand-zart);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--text);position:relative;overflow:hidden;min-height:168px;transition:transform .26s var(--ease),border-color .26s,box-shadow .26s}
.kachel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--rosa),var(--rosa-hell));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.kachel:hover{transform:translateY(-5px);border-color:var(--rand-betont);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.kachel:hover::after{transform:scaleX(1)}
.kachel.gesperrt{opacity:.6}
.kachel-ic{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:rgba(220,55,87,.13);color:var(--rosa-hell);font-size:23px}
.kachel h3{font-size:16px;font-weight:600}
.kachel p{font-size:13px;color:var(--text-2);line-height:1.5;flex:1}
.kachel-fuss{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kachel .pfeil{position:absolute;top:16px;right:16px;color:var(--text-3);font-size:18px;opacity:0;transform:translateX(-4px);transition:.26s var(--ease)}
.kachel:hover .pfeil{opacity:1;transform:none;color:var(--rosa-hell)}

/* Balken-Diagramm */
.balken{display:flex;align-items:flex-end;gap:12px;height:180px;padding-top:10px}
.balken .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.balken .b i{width:100%;max-width:38px;height:0;background:linear-gradient(180deg,var(--rosa-hell),var(--rosa-dunkel));border-radius:4px 4px 0 0;transition:height 1s var(--ease)}
.balken .b span{font-size:11px;color:var(--text-3)}

/* Kanban / Pipeline */
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.spalte{background:rgba(255,255,255,.02);border:1px solid var(--rand-zart);border-radius:var(--r);padding:12px}
.spalte-kopf{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:11px;color:var(--text-2)}
.spalte-kopf .z{font-size:11px;color:var(--text-3);background:var(--karte-2);padding:2px 8px;border-radius:10px}
.karte{background:var(--karte);border:1px solid var(--rand-zart);border-radius:var(--r-s);padding:11px 12px;margin-bottom:9px;cursor:pointer;transition:.18s var(--ease)}
.karte:last-child{margin-bottom:0}
.karte:hover{border-color:var(--rosa);transform:translateY(-2px)}
.karte b{font-size:13px;font-weight:600;display:block}
.karte .m{font-size:12px;color:var(--text-2);margin-top:3px}

/* Personen-Liste */
.person{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--rand-zart)}
.person:last-child{border-bottom:none}
.person .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--karte-2);color:var(--rosa-hell);font-weight:600;font-size:13px;flex:0 0 40px}
.person .pn{flex:1}.person .pn b{font-size:14px;font-weight:600}.person .pn span{font-size:12px;color:var(--text-2);display:block;margin-top:1px}

/* Rollen-x-Module-Matrix */
.matrix{width:100%;border-collapse:collapse;font-size:13px}
.matrix th{padding:11px 8px;border-bottom:1px solid var(--rand);color:var(--text-2);font-weight:600;text-align:center;white-space:nowrap}
.matrix th:first-child{text-align:left}
.matrix td{padding:12px 8px;border-bottom:1px solid var(--rand-zart);text-align:center}
.matrix td:first-child{text-align:left;font-weight:600}
.matrix tbody tr:hover{background:var(--karte-2)}
.matrix .j{color:#7ddaa3;font-size:17px}
.matrix .n{color:var(--text-3);font-size:15px}

/* Info-Zeilen */
.info-zeile{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--rand-zart);font-size:14px}
.info-zeile:last-child{border-bottom:none}
.info-zeile .k{color:var(--text-2)}
.info-zeile .v{font-weight:600;font-variant-numeric:tabular-nums}
.info-zeile .v.rosa{color:var(--rosa-hell)}

/* Platzhalter (Modul in Planung) */
.platz{max-width:560px;margin:40px auto;text-align:center;background:var(--karte);border:1px solid var(--rand-zart);border-radius:var(--r);padding:40px 34px}
.platz .pic{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;background:rgba(220,55,87,.13);color:var(--rosa-hell);font-size:36px;margin:0 auto 20px}
.platz h1{font-size:24px;font-weight:700}
.platz p{color:var(--text-2);font-size:15px;line-height:1.6;margin-top:12px}
.platz .rollen{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* ===================== Mobile-Chrome (per JS eingehängt) ===================== */
.hamb{display:none;width:40px;height:40px;border:1px solid var(--rand);background:var(--ink-2);
  color:var(--text);border-radius:7px;place-items:center;cursor:pointer;font-size:20px;flex:0 0 40px}
.nav-scrim{display:none}
.tabbar{display:none}

/* ===================== Handy / schmale Schirme ===================== */
@media (max-width:760px){
  /* Sidebar wird zum ausfahrbaren Menü */
  .nav{position:fixed;top:0;left:0;height:100dvh;width:var(--nav-auf);flex-basis:var(--nav-auf);
    transform:translateX(-100%);transition:transform .3s var(--ease);z-index:60;box-shadow:0 0 50px rgba(0,0,0,.6)}
  body.nav-offen .nav{transform:none}
  .nav .marke-text,.nav .nav-grp,.nav .nav-link .lbl,.nav .nav-link .pill{opacity:1;transform:none}

  /* Voll-Logo auf dem Handy: die aufgeklappte Nav hat keinen :hover — sichtbar wird
     das Voll-Logo daher an body.nav-offen (Wuerfel weicht). Dunkelmodus = helles
     Voll-Logo, Hellmodus = dunkle Variante. */
  body.nav-offen .nav .logo-cube{opacity:0}
  body.nav-offen .nav .logo-full{opacity:1;transform:translateY(-50%) translateX(0)}
  :root[data-theme="hell"] body.nav-offen .nav .logo-full-dunkel{opacity:1;transform:translateY(-50%) translateX(0)}

  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .3s}
  body.nav-offen .nav-scrim{opacity:1;pointer-events:auto}

  .haupt{width:100%}
  .hamb{display:grid}
  .topbar{padding:0 14px;gap:10px}
  .topbar .crumb{flex:1;font-size:13px}
  .suche{display:none}

  .inhalt{padding:16px 14px 88px}            /* Platz für Tab-Leiste unten */
  /* Hellmodus am Handy: die Inhaltsspalte deckend hinterlegen. Sonst scheint die
     globale body::before-Geruesttextur (opacity ~.14) durch die vielen
     transparenten Inhalts-Wrapper (.inhalt/.ep-layout/Vorgangs-Splits/Statusfilter)
     und wascht die Flaeche aus / laesst Abschnitte optisch ueberlappen. Im
     Dark-Modus faellt die Textur dunkel-auf-dunkel ohnehin weg (kein Eingriff);
     am Handy gibt es keine Seiten-Navi, an deren Rand die Ambient-Textur sinnvoll
     durchschiene -> .inhalt darf hier voll decken. Deckt alle verschachtelten
     transparenten Wrapper auf einen Schlag ab. Nur Handy + nur Hell. */
  :root[data-theme="hell"] .inhalt{background:var(--ink)}

  .kpis{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
  .kpi{padding:14px 15px}
  .kpi-wert{font-size:27px}
  .module{grid-template-columns:1fr}
  .grid-unten{grid-template-columns:1fr}
  .hero{min-height:196px;padding:22px;border-radius:10px}
  .hero h1{font-size:23px}
  .hero p{font-size:13px}
  .seitenkopf{margin-bottom:18px}
  .seitenkopf h1{font-size:22px}
  .seitenkopf .sk-akt{width:100%}
  .seitenkopf .sk-akt .btn{flex:1;justify-content:center}

  .panel{overflow-x:auto}                    /* breite Tabellen scrollen statt umbrechen */
  .tabelle{font-size:12.5px}
  .tabelle th,.tabelle td{padding:10px 8px}

  /* Tab-Leiste unten — festes 3-Spalten-Raster: Tabs links + mittig, dritte Spalte bewusst
     FREI (Platz fuer den schwebenden .fb-trigger-Knopf, bottom:24px;right:24px). Die zwei
     Tabs fuellen ihre Zelle als grosse Touch-Flaeche (min. 44px). */
  .tabbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;
    align-items:stretch;background:rgba(21,24,27,.93);backdrop-filter:blur(14px);
    border-top:1px solid var(--rand-zart);padding:8px 6px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-3);
    text-decoration:none;font-size:10px;min-height:44px}
  .tabbar a i{font-size:21px}
  .tabbar a.aktiv{color:var(--rosa-hell)}
  .tabbar-frei{display:block}   /* leere dritte Zelle: haelt das rechte Drittel frei */
}
@media (max-width:380px){
  .kpis{grid-template-columns:1fr}
}

/* ── Formularfelder (CD) ─────────────────────────────────────────────
   Einheitliches Eingabefeld-Styling, Dark-Mode, scharfe Kanten, Rosa-Fokus.
   Genutzt von .fld in Modul-Formularen (Ereignismeldung u. a.). */
.fld{
  width:100%; box-sizing:border-box;
  background:var(--karte); color:var(--text);
  border:1px solid var(--rand); border-radius:var(--r-s);
  padding:11px 13px; font:inherit; font-size:14px; line-height:1.45;
  color-scheme:dark;  /* native Datum/Uhrzeit/Datei-Dialoge dunkel */
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.fld::placeholder{color:var(--text-3)}
.fld:hover{border-color:var(--rand-betont)}
.fld:focus,.fld:focus-visible{
  outline:none; border-color:var(--rosa);
  box-shadow:0 0 0 3px rgba(220,55,87,.18); background:var(--karte-2);
}
textarea.fld{resize:vertical; min-height:88px}
/* Select: eigener Chevron statt OS-Pfeil */
select.fld{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
  padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23727b83' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
}
select.fld:focus{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff6a86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
select.fld option{background:var(--karte); color:var(--text)}
/* Datei-Upload als CD-Feld mit Ghost-Button */
input[type=file].fld{
  padding:9px 12px; cursor:pointer; border-style:dashed; border-color:var(--rand-betont);
  background:var(--ink-2); font-size:13px; color:var(--text-2);
}
input[type=file].fld::file-selector-button,
input[type=file].fld::-webkit-file-upload-button{
  margin-right:12px; padding:8px 15px; cursor:pointer;
  border:1px solid var(--rand-betont); border-radius:var(--r-s);
  background:var(--karte-2); color:var(--text); font:inherit; font-size:13px; font-weight:600;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
input[type=file].fld:hover::file-selector-button{background:var(--rosa); border-color:var(--rosa); color:#fff}

/* ════════════════════════════════════════════════════════════════════════════
   BELEGVORSCHAU-STANDARD  (Skill cockpit-belegvorschau)
   Die EINE, modulübergreifende Detail-/Beleg-/Dokument-Vorschau. Über ALLE
   Module identisch: dieselbe Hülle, dieselben Klassen, dasselbe Verhalten.
   Kanon: Betriebs-Cockpit/design/belegvorschau-standard-mockup.html.
   Felder LINKS · Dokument RECHTS (sticky, A4 210/297). Niemals modul-lokal
   duplizieren oder abwandeln — hier ist die Quelle der Wahrheit.
   Vollständig über cockpit-ci-Tokens → dunkle UND helle Welt automatisch.
   Markierung mit Bezug auf den Mockup-Standard, der dort Hex-Werte hatte:
   ── .detail-doc-body / .a4 sind hier tokenisiert (statt #0f1417 / #f4f1ea).
   ════════════════════════════════════════════════════════════════════════════ */

/* ---- A) Kanonische Hülle: Felder LINKS, Dokument RECHTS ---- */
.detail-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.detail-haupt{background:var(--karte);border:1px solid var(--rand);border-radius:var(--r);overflow:hidden}
.detail-kopf{padding:16px 18px;border-bottom:1px solid var(--rand);background:linear-gradient(180deg,var(--karte-2),var(--karte))}
.detail-kopf .dk-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.detail-kopf h2{font-size:18px;font-weight:700}
.detail-kopf .sub{font-size:12px;color:var(--text-3);font-family:monospace;margin-top:3px}
.detail-aktionen{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.detail-felder{padding:16px 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.detail-gruppe{grid-column:1/-1;font-size:10px;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.06em;border-bottom:1px solid var(--rand-zart);padding-bottom:5px;margin-top:4px}
.detail-f .lab{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.detail-f .val{font-size:14px;font-weight:600;margin-top:2px}
.detail-f .val.gross{font-size:19px}
.detail-f .val.gruen{color:#7ddaa3}
.detail-f .val.gelb{color:#ffc06a}
.detail-audit{padding:11px 18px;border-top:1px solid var(--rand-zart);background:var(--karte-2);
  display:flex;gap:24px;font-size:11px;color:var(--text-3);flex-wrap:wrap}
.detail-audit .a .v{color:var(--text-2)}

/* ---- B) Dokument-Spalte (sticky) — die eigentliche Belegvorschau ----
   GRÖSSE: Eine EINZIGE Höhenquelle = die Container-Höhe `--doc-h` (am .detail-doc).
   Default großzügig (82vh), per Maus-Resize-Griff (Block B2 + __belegResizeInit in
   cockpit.js) frei ziehbar und in localStorage gemerkt. Der Body füllt den Rest
   (flex:1) — KEINE eigene Body-Höhe mehr, sonst kämpfen zwei Höhen gegeneinander
   und der Container-Deckel gewinnt (war die Ursache für „arg klein": das frühere
   height:82vh am Body war wirkungslos, weil ein zu enger max-height am Container
   ihn samt Kopfleiste auf < 82vh stauchte). Der Deckel bleibt nur als oberste
   Sicherheits-Obergrenze beim Ziehen (verhindert Höhen jenseits des Viewports). */
.detail-doc{position:sticky;top:calc(var(--topbar) + 16px);background:var(--karte);border:1px solid var(--rand);
  border-radius:var(--r);overflow:hidden;
  --doc-h:82vh;height:var(--doc-h);
  min-height:340px;max-height:calc(100vh - var(--topbar) - 24px);
  display:flex;flex-direction:column}
.detail-doc-kopf{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--rand-zart);background:var(--karte-2);font-size:12px;color:var(--text-3)}
.detail-doc-kopf i{color:var(--rosa-hell)}
.detail-doc-kopf .fn{color:var(--text-2);font-family:monospace;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-doc-kopf .tools{margin-left:auto;display:flex;gap:12px;font-size:16px;color:var(--text-3)}
.detail-doc-kopf .tools i,.detail-doc-kopf .tools a{cursor:pointer;color:var(--text-3);text-decoration:none}
.detail-doc-kopf .tools i:hover,.detail-doc-kopf .tools a:hover{color:var(--rosa-hell)}
.detail-doc-body{background:var(--ink);padding:16px;display:flex;justify-content:center;
  flex:1 1 auto;overflow:auto;min-height:0;
  /* Der Body füllt jetzt den per --doc-h gesetzten Container (flex:1) — die Höhe
     wohnt am .detail-doc, NICHT mehr hier (sonst Doppel-Höhe, siehe Block B).
     ZWINGEND bleibt: Der Zoom/Pan-Mechanismus (Block F) hängt das iframe in eine
     position:absolute-Bühne (.bz-buehne, inset:0) — die trägt nichts zur Höhe bei.
     Der Body bekommt seine Höhe daher aus dem flex-Stretch des Containers; weil
     der Container eine konkrete height (--doc-h) hat, ist das stabil und kollabiert
     nicht. min-height:0 erlaubt dem flex-Kind, unter seinen Inhalt zu schrumpfen. */
  position:relative}
/* Beleg füllt jetzt die volle Body-Breite (vorher mittig-schmal, A4-zentriert).
   Höhe füllt die sticky-Spalte; Zoom/Pan (Block F) sitzt darüber. */
.detail-doc-body .a4,.detail-doc-body iframe.a4{width:100%;max-width:none;height:100%;min-height:480px;
  background:#fff;border:1px solid var(--rand);border-radius:3px;overflow:hidden;display:block}
.detail-doc-leer{margin:auto;color:var(--text-3);font-size:13px;text-align:center;padding:34px;
  line-height:1.6;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.detail-doc-leer i{font-size:26px;color:var(--rand-betont);display:block;margin-bottom:8px}

/* ---- B2) Maus-Resize-Griff: Vorschau-Höhe frei ziehen ----------------------
   Sichtbarer Griff am UNTEREN Rand der .detail-doc. Klick + Ziehen ändert die
   Container-Höhe (--doc-h); __belegResizeInit (cockpit.js) merkt sie in
   localStorage und stellt sie beim nächsten Öffnen wieder her — modulübergreifend,
   rein über die geteilte .detail-doc. Koexistiert mit sticky (height bleibt
   stabil) und mit der Zoom/Pan-Bühne (die füllt nur den Body, unberührt vom Griff).
   Liegt über der Zoom-Bühne (z-index), damit der Griff immer greifbar ist. */
.detail-doc-griff{flex:0 0 auto;height:14px;cursor:ns-resize;position:relative;z-index:3;
  display:flex;align-items:center;justify-content:center;
  background:var(--karte-2);border-top:1px solid var(--rand-zart);
  color:var(--text-3);transition:color .15s var(--ease),background .15s var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none}
.detail-doc-griff::before{content:"";width:34px;height:4px;border-radius:3px;
  background:var(--rand-betont);transition:background .15s var(--ease)}
.detail-doc-griff:hover{background:var(--karte)}
.detail-doc-griff:hover::before,.detail-doc.is-resizing .detail-doc-griff::before{background:var(--rosa)}
:root[data-theme="hell"] .detail-doc-griff:hover::before,
:root[data-theme="hell"] .detail-doc.is-resizing .detail-doc-griff::before{background:var(--rosa)}
/* Während des Ziehens: Transitions aus (kein Nachlaufen), iframe-Maus-Capture aus
   (sonst „verschluckt" das iframe die Mausbewegung über dem Beleg). */
.detail-doc.is-resizing{transition:none}
.detail-doc.is-resizing .detail-doc-body .a4,
.detail-doc.is-resizing .detail-doc-body iframe.a4,
.detail-doc.is-resizing .bz-buehne{pointer-events:none}
/* Eingeklappte Vorschau (.stapel-split.doc-zu): kein Griff. */
.stapel-split.doc-zu .detail-doc-griff{display:none}
@media(prefers-reduced-motion:reduce){.detail-doc-griff{transition:none}}

/* ---- B3) Maus-Resize-Griff: Vorschau-BREITE frei ziehen ---------------------
   Schwester von B2, nur horizontal: ein schmaler vertikaler Griff am LINKEN Rand
   der .detail-doc (die Vorschau steht im Split RECHTS, also ist ihr linker Rand
   die Trennkante zur Felder/Listen-Spalte). Klick + Ziehen ändert die Spaltenbreite;
   __belegBreiteInit (cockpit.js) schreibt sie als grid-template-columns am Split-
   Container und merkt den px-Wert in localStorage (bc:belegBreite) — eigener Wert,
   koexistiert mit der Höhe. Liegt am LINKEN Rand absolut über dem Body, damit der
   Griff den Kopf nicht verschiebt und immer greifbar ist (z-index über der Bühne).
   Generisch über die geteilte .detail-doc → gilt in allen Makro-Modulen zugleich. */
.detail-doc-breite-griff{position:absolute;left:0;top:0;bottom:0;width:12px;z-index:4;
  cursor:ew-resize;display:flex;align-items:center;justify-content:center;
  background:transparent;border-right:1px solid transparent;
  transition:background .15s var(--ease),border-color .15s var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none}
.detail-doc-breite-griff::before{content:"";width:4px;height:34px;border-radius:3px;
  background:var(--rand-betont);transition:background .15s var(--ease);opacity:0}
.detail-doc-breite-griff:hover{background:var(--karte-2);border-right-color:var(--rand-zart)}
.detail-doc-breite-griff:hover::before,
.detail-doc.is-resizing-w .detail-doc-breite-griff::before{background:var(--rosa);opacity:1}
:root[data-theme="hell"] .detail-doc-breite-griff:hover::before,
:root[data-theme="hell"] .detail-doc.is-resizing-w .detail-doc-breite-griff::before{background:var(--rosa)}
/* Während des Breiten-Ziehens: Transitions aus + iframe-Maus-Capture aus (analog B2). */
.detail-doc.is-resizing-w{transition:none}
.detail-doc.is-resizing-w .detail-doc-body .a4,
.detail-doc.is-resizing-w .detail-doc-body iframe.a4,
.detail-doc.is-resizing-w .bz-buehne{pointer-events:none}
/* Eingeklappte Vorschau: kein Breiten-Griff. */
.stapel-split.doc-zu .detail-doc-breite-griff{display:none}
@media(prefers-reduced-motion:reduce){.detail-doc-breite-griff{transition:none}}

/* ---- F) Zoom & Pan — EIN geteilter Mechanismus für ALLE Belegvorschauen ----
   Greift überall, wo eine Vorschau die Klasse .belegzoom trägt (das Makro setzt
   sie an jede .detail-doc-body; die Eingangspost-Sicht an jede .ep-vg-pdf-body).
   Leichtgewichtig: CSS transform: scale()/translate() auf ein iframe in einem
   overflow:hidden-Container — KEIN PDF.js. Steuerung über die kleinen Icon-Tools
   im Kopf (.bz-tool, Haus-Stil) + Mausrad + Ziehen. Tokenisiert → hell & dunkel. */
.belegzoom{position:relative;overflow:hidden}
.belegzoom .bz-buehne{position:absolute;inset:0;display:block;
  transform-origin:0 0;will-change:transform;
  transition:transform .12s var(--ease)}
.belegzoom.bz-aktiv .bz-buehne{cursor:grab}
.belegzoom.bz-ziehen .bz-buehne{cursor:grabbing;transition:none}
.belegzoom .bz-buehne > iframe,.belegzoom .bz-buehne > .a4{width:100%;height:100%;
  max-width:none;min-height:0;aspect-ratio:auto;border:0;display:block;background:#fff}
/* Beleg-Werkzeuge im Kopf (Zoom rein/raus/zurücksetzen) — geteilter Stil für
   .detail-doc-kopf UND .ep-vg-pdf-kopf, im bestehenden Icon-Button-Duktus. */
.bz-tools{display:flex;align-items:center;gap:2px;margin-left:8px}
.bz-tools .bz-tool{width:26px;height:26px;border-radius:7px;border:1px solid var(--rand);
  background:var(--ink-2);color:var(--text-2);display:grid;place-items:center;cursor:pointer;
  font-size:15px;padding:0;line-height:0;transition:.16s var(--ease)}
.bz-tools .bz-tool:hover{color:var(--rosa-hell);border-color:var(--rand-betont)}
.bz-tools .bz-tool:active{transform:translateY(1px)}
.bz-tools .bz-tool:disabled{opacity:.4;cursor:default;transform:none}
.bz-tools .bz-stufe{font-size:11px;color:var(--text-3);min-width:38px;text-align:center;
  font-variant-numeric:tabular-nums;user-select:none}
:root[data-theme="hell"] .bz-tools .bz-tool:hover{color:var(--rosa)}
@media(prefers-reduced-motion:reduce){
  .belegzoom .bz-buehne{transition:none}
}

/* ---- C) Live-Belegvorschau-Pane → konsolidiert in Block B (.detail-doc*) ----
   Die früher hier kopierte iframe-PDF-Vorschau (.beleg-vorschau*) ist entfernt;
   alle Module nutzen jetzt das geteilte Makro _belegvorschau.html mit der
   .detail-doc*-Hülle (Block B). Keine modul-eigene Vorschau-Optik mehr. */

/* ---- D) Stapel-Variante: Liste+Felder links, einklappbare Vorschau rechts ---- */
.stapel-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;
  transition:grid-template-columns .25s var(--ease)}
.stapel-split.doc-zu{grid-template-columns:1fr 48px}
.stapel-links{display:grid;grid-template-columns:230px 1fr;gap:14px;align-items:start}
.korb{background:var(--karte);border:1px solid var(--rand);border-radius:var(--r);overflow:hidden}
.korb-kopf{padding:10px 12px;border-bottom:1px solid var(--rand-zart);background:var(--karte-2);
  display:flex;justify-content:space-between;align-items:center}
.korb-kopf .t{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.korb-kopf .z{background:var(--ink-2);border-radius:10px;padding:1px 7px;font-size:10px;color:var(--text-2)}
.korb-item{padding:10px 12px;border-bottom:1px solid var(--rand-zart);cursor:pointer;
  border-left:3px solid transparent;display:flex;gap:9px;align-items:center;transition:.12s var(--ease)}
.korb-item:last-child{border-bottom:none}
.korb-item:hover{background:var(--karte-2)}
.korb-item.aktiv{background:var(--karte-2);border-left-color:var(--rosa)}
.korb-item .th{width:26px;height:34px;border-radius:3px;background:var(--ink-2);border:1px solid var(--rand);
  display:flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;font-size:13px}
.korb-item .ki{flex:1;min-width:0}
.korb-item .ki .n{font-size:12px;font-weight:600}
.korb-item .ki .m{font-size:10px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* eingeklappte Vorschau → schmaler vertikaler Griff zum Wiederausklappen */
.stapel-split.doc-zu .detail-doc-body,.stapel-split.doc-zu .detail-doc-kopf{display:none}
.doc-griff{display:none}
.stapel-split.doc-zu .doc-griff{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:12px 0;cursor:pointer;color:var(--text-3)}
.stapel-split.doc-zu .doc-griff:hover{color:var(--rosa)}
.doc-griff .vtext{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* ---- E) Responsiv: ab ≤1000px gestapelt, Dokument nicht mehr sticky ---- */
@media(max-width:1000px){
  .detail-split,.stapel-split{grid-template-columns:1fr}
  .stapel-links{grid-template-columns:1fr}
  /* Gestapelt steht die Vorschau UNTER der Feldkarte (nicht mehr sticky) → eine
     feste, moderate Höhe statt der vollen Viewport-Höhe. Überschreibt die per
     Resize gemerkte Desktop-Höhe bewusst (mobil zieht man nicht). */
  .detail-doc{position:static;height:70vh;min-height:440px;max-height:none}
  /* Auf dem Phone ist der Ziehgriff unpraktisch (Touch-Scroll-Konflikt) → aus. */
  .detail-doc-griff{display:none}
}
/* Unter dem Spalten-Umbruch (Splits werden einspaltig, Templates klappen bei
   ≤1100px um) ist eine Breiten-Spalte gegenstandslos → Breiten-Griff aus, und
   eine evtl. gemerkte Spaltenbreite darf das gestapelte 1fr-Raster nicht stören
   (das setzt das Modul-CSS via grid-template-columns:1fr ohnehin). */
@media(max-width:1100px){
  .detail-doc-breite-griff{display:none}
}

/* ---- G) Gestapelte Vollbreiten-Variante (modus='gestapelt') -----------------
   Felder-Karte OBEN in voller Breite, darunter eine einklappbare Dokument-Sektion
   (natives <details>) — ebenfalls volle Breite. Für schmale Fenster / Modale, in
   denen zwei enge Spalten quetschen. ADDITIV: verändert keine bestehende
   .detail-*-Regel; greift nur unter .detail-gestapelt bzw. an .detail-doc-sektion. */
.detail-gestapelt{display:flex;flex-direction:column;gap:16px;align-items:stretch}
/* Felder dürfen in voller Breite mehrspaltiger laufen (auto-fit statt starr 1fr 1fr). */
.detail-gestapelt .detail-felder{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* Die Dokument-Spalte ist im Stapel NICHT sticky und füllt die ganze Breite. */
.detail-gestapelt .detail-doc{position:static;width:100%;top:auto}
/* Min-width:0 auf allen Zwischenschichten → innen liegende breite Tabellen können
   horizontal scrollen (klassische „scrollt nicht"-Ursache bei flex/grid-Kindern). */
.detail-gestapelt,.detail-gestapelt .detail-haupt,.detail-gestapelt .detail-felder,
.detail-gestapelt .detail-doc-sektion,.detail-gestapelt .detail-doc,
.detail-gestapelt .detail-doc-body{min-width:0}

/* Einklappbare Dokument-Sektion — Summary im Haus-Look (dunkel, Akzent sparsam). */
.detail-doc-sektion{border:1px solid var(--rand);border-radius:var(--r);background:var(--karte);
  overflow:hidden}
.detail-doc-sektion > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:12px 14px;background:var(--karte-2);color:var(--text-2);font-size:13px;font-weight:600;
  user-select:none;transition:color .15s var(--ease),background .15s var(--ease)}
.detail-doc-sektion > summary::-webkit-details-marker{display:none}   /* Standard-Dreieck aus */
.detail-doc-sektion > summary > i:first-child{color:var(--rosa-hell)}
.detail-doc-sektion > summary:hover{color:var(--text);background:var(--karte)}
.detail-doc-sektion > summary .dds-titel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* Chevron dreht beim Aufklappen (Indikator) — sparsame Rosa-Färbung nur im Hover. */
.detail-doc-sektion > summary .dds-chevron{color:var(--text-3);transition:transform .18s var(--ease)}
.detail-doc-sektion[open] > summary .dds-chevron{transform:rotate(180deg)}
.detail-doc-sektion > summary:hover .dds-chevron{color:var(--rosa-hell)}
/* Die .detail-doc sitzt im geöffneten <details> direkt unter dem Summary (kein
   Doppel-Rand: die Sektion trägt den Rahmen, die Doc-Spalte darin randlos oben). */
.detail-doc-sektion > .detail-doc{border:none;border-top:1px solid var(--rand-zart);border-radius:0}
@media(prefers-reduced-motion:reduce){.detail-doc-sektion > summary .dds-chevron{transition:none}}

/* ---- G2) Dokument-Sektion INNEN zweispaltig (dokument_auswahl-Slot) ----------
   Liefert das Modul im gestapelten Modus einen 'dokument_auswahl'-Slot, trägt die
   Sektion .dds-split und ihr Körper wird zum Haus-Muster „Auswahl links (schmal),
   Vorschau rechts (breit)" — dasselbe Verhältnis wie .stapel-links (230px 1fr).
   ADDITIV: greift NUR unter .detail-doc-sektion.dds-split; Modi 'voll'/'dokument'
   und die vollbreite gestapelte Variante (ohne Auswahl-Slot) sind unberührt. */
.detail-doc-sektion.dds-split > .dds-koerper{display:grid;grid-template-columns:230px 1fr;
  gap:14px;align-items:start;padding:14px;border-top:1px solid var(--rand-zart)}
/* Links die schmale Auswahl-Spalte; sie darf eigenständig scrollen, wenn viele
   Belege gelistet sind (die Vorschau rechts bleibt daneben stehen). */
.detail-doc-sektion.dds-split .dds-auswahl{min-width:0;align-self:stretch;
  max-height:var(--doc-h,62vh);overflow:auto;overscroll-behavior:contain}
/* Rechts die Vorschau: im Split trägt die Sektion oben schon den Innen-Abstand,
   also übernimmt die .detail-doc hier wieder ihren eigenen Rahmen (randlos-oben
   gilt nur für die vollbreite Variante ohne Split). */
.detail-doc-sektion.dds-split > .dds-koerper > .detail-doc{border:1px solid var(--rand);
  border-radius:var(--r)}

/* ---- G3) Scroll-Falle im gestapelten Modus entschärfen -----------------------
   PROBLEM: Steht die Vorschau (iframe) fast über den ganzen Viewport, „fängt" der
   Mauszeiger im PDF die Seite — ober-/unterhalb bleibt keine Fläche zum
   Weiterscrollen. LÖSUNG: im gestapelten Modus ein moderaterer Höhen-Default
   (der Höhen-Griff --doc-h überschreibt ihn weiterhin frei), plus
   overscroll-behavior:contain am scrollenden PDF-Body, damit ein Scroll-Impuls
   im PDF nicht auf die Gesamtseite „durchschlägt". Greift NUR im gestapelten
   Modus (.detail-gestapelt) → 'voll'/'dokument' unberührt. */
.detail-gestapelt .detail-doc{--doc-h:62vh;min-height:320px}
.detail-gestapelt .detail-doc-body{overscroll-behavior:contain}

/* Mobil: die Auswahl steht wieder ÜBER der Vorschau (kein horizontales Quetschen);
   die Auswahl-Liste braucht dann keine eigene Höhenkappung. */
@media(max-width:1000px){
  .detail-doc-sektion.dds-split > .dds-koerper{grid-template-columns:1fr}
  .detail-doc-sektion.dds-split .dds-auswahl{max-height:none;overflow:visible}
  .detail-gestapelt .detail-doc{height:62vh;min-height:360px}
}

/* ════════════════════════════════════════════════════════════════════════════
   GETEILTES DETAIL-MODAL (kleines Fenster) — window.__zeileModalOeffnen()
   ────────────────────────────────────────────────────────────────────────────
   EIN zentrales Overlay fuer alle Listen, die ihre Detail-/Belegvorschau in
   einem Modal zeigen (Zeile mit data-modal). Haus-CI (dunkel, Akzent Rosa,
   scharfe Kanten ueber --r). Tokenisiert → hell + dunkel. Verhalten: cockpit.js.
   ════════════════════════════════════════════════════════════════════════════ */
.ck-modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(8,10,12,.66);backdrop-filter:blur(2px);
  animation:ckm-fade .14s var(--ease)}
.ck-modal-overlay[hidden]{display:none}
body.ck-modal-offen{overflow:hidden}
.ck-modal{position:relative;width:min(1100px,100%);max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--rand);
  border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;
  animation:ckm-auf .16s var(--ease)}
/* Opt-in-Breitvariante: das geladene Fragment trägt data-modal-breit an seinem
   Wurzel-Element → cockpit.js setzt diese Klasse am .ck-modal (und entfernt sie
   beim Schließen/Neuladen). Für gestapelte Detail-Ansichten, die die volle Breite
   brauchen (z.B. Angebote mit breiter LV-Tabelle). Mobil (≤680px) bleibt Vollbild. */
.ck-modal.ck-modal-breit{width:min(1600px,96vw)}
/* Schmale Variante fuer kompakte Bestaetigungs-/Eingabe-Dialoge (z. B. eine
   Pflicht-Begruendung) — dasselbe Muster, nur enger als das Standard-Detail-
   Modal. Siehe zeiterfassung_zeitkonto.html (Stempel entwerten). */
.ck-modal.ck-modal-schmal{width:min(460px,100%)}
.ck-modal-zu{position:absolute;top:10px;right:10px;z-index:5;width:34px;height:34px;
  display:grid;place-items:center;border:1px solid var(--rand);border-radius:var(--r-s,6px);
  background:var(--karte);color:var(--text-2);cursor:pointer;font-size:18px;
  transition:.15s var(--ease)}
.ck-modal-zu:hover{color:var(--text);border-color:var(--rand-betont);background:var(--karte-2)}
.ck-modal-koerper{padding:20px 22px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.ck-modal-laedt,.ck-modal-fehler{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:200px;color:var(--text-3);font-size:14px}
.ck-modal-laedt .ti{font-size:20px;animation:schulz-drehen 1s linear infinite}
.ck-modal-fehler{color:var(--text-2)}
.ck-modal-fehler .ti{color:var(--rosa);font-size:20px}
@keyframes ckm-fade{from{opacity:0}to{opacity:1}}
@keyframes ckm-auf{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .ck-modal-overlay,.ck-modal{animation:none}
  .ck-modal-laedt .ti{animation:none}
}
@media(max-width:680px){
  .ck-modal-overlay{padding:0}
  .ck-modal{width:100%;max-height:100vh;height:100vh;border-radius:0;border:none}
}

/* ---- Reiter zur Beleg-Auswahl, wenn ein Vorgang MEHRERE Dokumente hat ----
   Sitzt im Dokument-Slot der Belegvorschau (ausgangsrechnungsbuch_detail.html),
   ueber dem A4-iframe. Schlanke Pillen-Reihe, Haus-Akzent fuer den aktiven. */
.arb-beleg-reiter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.arb-beleg-reiter-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;
  border:1px solid var(--rand);border-radius:var(--r-s,6px);background:var(--karte);
  color:var(--text-2);font-family:inherit;font-size:12px;cursor:pointer;transition:.15s var(--ease)}
.arb-beleg-reiter-btn:hover{color:var(--text);border-color:var(--rand-betont)}
.arb-beleg-reiter-btn.aktiv{background:var(--rosa);color:#fff;border-color:var(--rosa);font-weight:700}

/* ════════════════════════════════════════════════════════════════════════════
   PLAUSI-GESAMTSUMME (Gutschriften)
   Eine standardisierte Summen-Plausibilitäts-Box. Zentral hier, NICHT inline —
   damit die JS-gerenderte Box in der Erfassung (gutschriften.html, karte()) und
   die Jinja-Box im Vorgang (_plausi.html) pixelgenau gleich aussehen.
   Dezente Karte mit linkem Akzentstreifen (grün ok / rosa warn), Soll/Ist als
   Label+Wert nebeneinander, Beträge in monospace (wie .detail-doc-kopf .fn).
   Badge-Farbtokens bewusst analog .badge.ok/.badge.warn (hell + dunkel). */
.plausi-box{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:11px 14px 11px 16px;border:1px solid var(--rand-zart);border-radius:var(--r-s);
  background:var(--karte-2);border-left:3px solid var(--rand-betont)}
.plausi-box.ok{border-left-color:rgba(94,201,140,.55);background:rgba(94,201,140,.06)}
.plausi-box.warn{border-left-color:rgba(255,170,60,.55);background:rgba(255,170,60,.06)}
.plausi-box.neutral{border-left-color:rgba(150,160,170,.45);background:rgba(150,160,170,.05)}
.plausi-werte{display:flex;gap:26px;flex-wrap:wrap}
.plausi-wert{display:flex;flex-direction:column;gap:2px}
.plausi-wert .lab{font-size:11px;color:var(--text-3)}
.plausi-wert .val{font-size:14px;font-weight:600;font-family:monospace;color:var(--text);
  font-variant-numeric:tabular-nums}
.plausi-status{display:flex;align-items:center;gap:8px}
.plausi-status .badge{display:inline-flex;align-items:center;gap:5px}
/* Hilfetext unter der Box (nur bei Abweichung gerendert) */
.plausi-hint{font-size:11.5px;color:var(--text-3);margin-top:6px;line-height:1.5}
/* Helle Farbwelt: Akzent/Fläche etwas kräftiger, damit es auf Weiß trägt. */
:root[data-theme="hell"] .plausi-box.ok{border-left-color:#1f7a4d;background:rgba(31,122,77,.07)}
:root[data-theme="hell"] .plausi-box.warn{border-left-color:#9a5b00;background:rgba(154,91,0,.07)}
:root[data-theme="hell"] .plausi-box.neutral{border-left-color:#6b7077;background:rgba(107,112,119,.06)}

/* ════════════════════════════════════════════════════════════════════════════
   GETEILTE CHAT-RENDER-KLASSEN (.ck-*)
   Für werkstatt.html, AI-Panel (base.html) und devhub_ai_base.html.
   Verwendet von chatNachrichtAnhaengen() in cockpit.js.
   Render-Logik: DEV-AI rahmenloses Fließtext · Eigner gerahmte Box rechts ·
   Christoph gerahmte Box links mit Rosa-Rand.
   ════════════════════════════════════════════════════════════════════════════ */
.ck-msg{display:flex;flex-direction:column;width:100%}
/* DEV-AI: volle Breite, kein Rahmen, luftiger Fließtext */
.ck-msg.devai{align-self:stretch}
.ck-devai-gruppe{display:flex;flex-direction:column;gap:4px;padding:0}
.ck-devai-kopf{display:flex;align-items:center;gap:6px;margin-bottom:2px;min-height:16px}
.ck-devai-zeit{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.ck-devai-txt{font-size:14px;color:var(--text);line-height:1.65;white-space:pre-wrap;word-break:break-word}
.ck-devai-txt a{color:#9cc6f5;text-decoration:none}
.ck-devai-txt a:hover{text-decoration:underline}
/* Kompakter Modus (im AI-Panel: kleinere Schrift, weniger Padding) */
.ck-msg.kompakt .ck-devai-txt{font-size:13px;line-height:1.6}
/* Eigner: rechtsbündig, Rosa-Box */
.ck-msg.eigner{align-self:flex-end;max-width:82%}
.ck-bub{border-radius:var(--r);padding:10px 13px}
.eigner-bub{background:rgba(220,55,87,.08);border:1px solid rgba(220,55,87,.25);
  border-radius:var(--r) 0 var(--r) var(--r)}
.ck-msg.kompakt .eigner-bub{padding:8px 11px}
/* Christoph: linksbündig, kräftiger Rosa-Rand links */
.christoph-bub{background:rgba(220,55,87,.07);border:1px solid rgba(220,55,87,.4);
  border-left:3px solid var(--rosa-hell);max-width:88%}
/* Geteilte Inhalts-Klassen (Eigner + Christoph) */
.ck-meta{font-size:11px;color:var(--text-3);margin-bottom:4px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ck-meta b{color:var(--text-2)}
.christoph-bub .ck-meta b{color:var(--rosa-hell)}
.ck-meta .ti{font-size:13px;color:var(--rosa-hell)}
.ck-abs-marke{background:rgba(220,55,87,.18);color:var(--rosa-hell);
  border-radius:5px;padding:1px 7px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;font-size:10px}
.ck-txt{font-size:14px;color:var(--text);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.ck-txt a{color:#9cc6f5;text-decoration:none}
.ck-txt a:hover{text-decoration:underline}
.ck-msg.kompakt .ck-txt{font-size:13px}
.ck-vh{font-size:11px;color:#86b7eb;margin-top:5px}

/* ════════════════════════════════════════════════════════════════════════════
   AI-STARTER-KNOPF + AI-PANEL (global, base.html)
   Analog zum Feedback-Widget (#fb-trigger / #fb-panel), aber mit eigenem
   z-Index-Stack und vertikalem Abstand zum Feedback-Knopf.
   ════════════════════════════════════════════════════════════════════════════ */

/* Schwebender Würfel-Knopf: sitzt ÜBER dem Feedback-Button (bottom:76px statt 24px),
   damit beide sichtbar und gut klickbar bleiben und sich nicht überdecken. */
#ai-starter{
  position:fixed;bottom:80px;right:24px;z-index:900;
  width:46px;height:46px;border-radius:13px;
  background:var(--ink-2,#1b1f23);color:var(--text,#eef1f3);
  border:1px solid var(--rand,#2c333a);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.45);
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s;
}
#ai-starter:hover{
  background:var(--karte,#1e2329);border-color:var(--rand-betont,#3a434c);
  transform:scale(1.07);box-shadow:0 6px 24px rgba(0,0,0,.55);
}
#ai-starter img{width:26px;height:26px;display:block}
/* Badge (Anzahl aktiver Sessions) */
#ai-badge{
  position:absolute;top:-5px;right:-5px;
  background:var(--rosa,#dc3757);color:#fff;
  font-size:10px;font-weight:800;border-radius:20px;
  padding:1px 5px;min-width:18px;text-align:center;line-height:1.55;
  border:2px solid var(--ink-2,#1b1f23);pointer-events:none;
}
/* Dimmer hinter dem Panel */
#ai-dimmer{
  position:fixed;inset:0;z-index:948;
  background:rgba(0,0,0,.32);backdrop-filter:blur(1px);
  display:none;touch-action:none;
}
#ai-dimmer.aktiv{display:block}

/* Panel: fährt von rechts über volle Höhe ein */
#ai-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:949;
  width:var(--ai-panel-breite, min(460px,100vw));
  background:var(--karte,#1e2329);border-left:1px solid var(--rand,#2c333a);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 40px rgba(0,0,0,.5);
}
#ai-panel.offen{transform:translateX(0)}
/* Breiten-Ziehgriff am linken Panel-Rand (Desktop): Breite anpassbar + gemerkt. */
.ai-panel-griff{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:5;touch-action:none}
.ai-panel-griff::after{content:"";position:absolute;left:1px;top:0;bottom:0;width:2px;background:transparent;transition:background .12s}
.ai-panel-griff:hover::after,.ai-panel-griff.aktiv::after{background:var(--rosa,#dc3757)}
body.ai-panel-resizing{cursor:ew-resize;user-select:none}
/* Hintergrund-Scroll sperren, solange das Panel offen ist (Handy: sonst scrollt die
   Seite dahinter statt des Chats). Scroll-Position merkt/restauriert das JS. */
body.ai-panel-offen{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  #ai-panel{transition:none}
}

/* Panel-Kopf */
.ai-panel-kopf{
  flex:0 0 auto;border-bottom:1px solid var(--rand,#2c333a);
  display:flex;align-items:center;gap:10px;padding:14px 16px;
}
.ai-panel-kopf .ai-pk-cube{width:26px;height:26px;flex-shrink:0}
/* „DEV-AI arbeitet"-Indikator: ein pulsierender Schulz-Würfel (wird größer/kleiner), unten
   im Chat unter der letzten Nachricht (Tipp-Indikator-Stil, ohne Text). */
.ai-arbeitet{display:flex;align-items:center;padding:6px 14px 12px}
.ai-arbeitet-cube{display:inline-block;animation:ai-cube-puls 1.2s ease-in-out infinite;will-change:transform,opacity}
.ai-arbeitet-cube img{display:block;width:30px;height:30px}
@keyframes ai-cube-puls{0%,100%{transform:scale(.78);opacity:.6}50%{transform:scale(1.18);opacity:1}}
@media(prefers-reduced-motion:reduce){.ai-arbeitet-cube{animation:none}}
.ai-panel-kopf .ai-pk-titel{font-size:14px;font-weight:800;flex:1}
.ai-panel-kopf .ai-pk-unter{font-size:11px;color:var(--text-3);margin-top:1px}
#ai-schliessen{
  margin-left:auto;width:32px;height:32px;border-radius:7px;
  background:transparent;border:1px solid var(--rand);color:var(--text-2);
  cursor:pointer;display:grid;place-items:center;font-size:16px;
  transition:background .12s,color .12s;flex-shrink:0;
}
#ai-schliessen:hover{background:var(--karte-2);color:var(--text)}

/* Panel-Body: 2-spaltig (Session-Liste 150px + Verlauf) */
.ai-panel-body{
  flex:1 1 auto;min-height:0;display:flex;
}

/* Linke Session-Liste */
#ai-sess-liste{
  width:150px;flex-shrink:0;border-right:1px solid var(--rand);
  overflow-y:auto;padding:10px 0;display:flex;flex-direction:column;
}
.ai-sess-leer{
  font-size:11px;color:var(--text-3);padding:14px 12px;line-height:1.5;text-align:center;
}
.ai-sess-item{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 12px;cursor:pointer;border-left:2px solid transparent;
  background:none;border-top:none;border-right:none;border-bottom:none;
  text-align:left;width:100%;font-family:inherit;color:inherit;
  transition:background .12s,border-color .12s;
}
.ai-sess-item:hover{background:var(--karte-2)}
.ai-sess-item.aktiv{border-left-color:var(--rosa);background:rgba(220,55,87,.06)}
.ai-ss-titel{font-size:12px;font-weight:700;color:var(--text);line-height:1.3;
  word-break:break-word;white-space:normal}
.ai-ss-sub{font-size:10px;color:var(--text-3)}
.ai-ss-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;
  font-weight:700;padding:1px 6px;border-radius:20px;margin-top:3px}
.ai-ss-badge.bau{background:rgba(134,183,235,.15);color:#86b7eb}
.ai-ss-badge.lauf{background:rgba(123,216,143,.12);color:#7ddaa3}
.ai-ss-badge.warte{background:rgba(251,191,36,.12);color:#fbbf24}
/* Eskalations-Karte: linker Akzentstreifen gelb statt rosa */
.ai-sess-eskalation{border-left-color:#fbbf24 !important}
.ai-sess-eskalation:hover{background:rgba(251,191,36,.06)}
/* Nicht-klickbare Eskalation (kein mid): kein Zeigercursor, kein Hover-Effekt */
.ai-sess-inaktiv{cursor:default;pointer-events:none;opacity:.75}
/* Uhr-Icon in der Eskalations-Karte */
.ai-esk-icon{font-size:12px;opacity:.7;vertical-align:-1px}

/* Rechter Verlaufsbereich */
.ai-verlauf{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column}
#ai-verlauf-kopf{
  flex:0 0 auto;padding:9px 13px;border-bottom:1px solid var(--rand);
  display:flex;align-items:center;gap:8px;min-height:42px;
  font-size:12px;color:var(--text-2);
}
.ai-vk-name{font-size:13px;font-weight:700;color:var(--text);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-vk-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;flex-shrink:0}
.ai-vk-badge.bau{background:rgba(134,183,235,.15);color:#86b7eb;
  border:1px solid rgba(134,183,235,.25)}
.ai-vk-link{
  margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:6px;
  border:1px solid var(--rand);background:transparent;color:var(--text-3);
  display:grid;place-items:center;font-size:14px;text-decoration:none;
  transition:background .12s,color .12s;
}
.ai-vk-link:hover{background:var(--karte-2);color:var(--text)}

/* Chat-Verlauf im Panel */
#ai-chat{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:14px;display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
}
/* Leer-Zustand */
.ai-chat-leer{
  display:flex;align-items:center;justify-content:center;
  flex:1 1 auto;font-size:12px;color:var(--text-3);text-align:center;padding:20px;
}
.ai-chat-leer[hidden]{display:none}

/* Eingabe am Panel-Fuß */
.ai-eingabe-bereich{
  flex:0 0 auto;border-top:1px solid var(--rand-zart,#242a30);
  padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));
  background:var(--karte,#1e2329);
}
#ai-eingabe{
  width:100%;height:54px;background:var(--karte-2,#252b31);
  border:1px solid var(--rand,#2c333a);border-radius:var(--r-s,5px);
  color:var(--text,#eef1f3);padding:8px 10px;font-family:inherit;
  font-size:13px;line-height:1.5;resize:none;box-sizing:border-box;
  transition:border-color .14s;
}
#ai-eingabe:focus{outline:none;border-color:var(--rosa,#dc3757)}
#ai-eingabe:disabled{opacity:.5}
.ai-eingabe-zeile{display:flex;gap:8px;margin-top:7px;align-items:center}
.ai-eingabe-hint{font-size:11px;color:var(--text-3);flex:1}
#ai-senden{
  height:32px;padding:0 14px;border-radius:var(--r-s,5px);
  background:var(--rosa,#dc3757);border:none;color:#fff;
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  transition:background .14s;
}
#ai-senden:hover{background:var(--rosa-hell,#ff6a86)}
#ai-senden:disabled{opacity:.5;cursor:default}

/* Mobil: Panel volle Breite von unten */
@media(max-width:680px){
  #ai-panel{
    top:auto;left:0;right:0;bottom:0;width:100%;height:80vh;
    transform:translateY(100%);border-left:none;border-top:1px solid var(--rand);
    border-radius:16px 16px 0 0;
  }
  #ai-panel.offen{transform:translateY(0)}
  .ai-panel-griff{display:none}
  .ai-panel-body{flex-direction:column}
  #ai-sess-liste{width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    border-right:none;border-bottom:1px solid var(--rand);max-height:80px;padding:6px 0}
  .ai-sess-item{flex-direction:row;align-items:center;gap:8px;padding:8px 14px;
    border-left:none;border-bottom:2px solid transparent;flex-shrink:0;max-width:72vw}
  .ai-sess-item.aktiv{border-bottom-color:var(--rosa);border-left-color:transparent}
  /* Handy: Titel EINZEILIG mit Ellipsis (statt buchstabenweisem Umbruch), Datum aus,
     Items behalten ihre Breite (flex-shrink:0) -> die Leiste scrollt horizontal. */
  .ai-sess-item .ai-ss-titel{white-space:nowrap;word-break:normal;
    overflow:hidden;text-overflow:ellipsis;max-width:50vw}
  .ai-sess-item .ai-ss-sub{display:none}
  .ai-sess-item .ai-ss-badge{margin-top:0;flex-shrink:0}
  #ai-starter{bottom:80px;right:16px}
}
@media(max-width:760px){
  #ai-starter{right:16px}
}

/* === Haus-Hilfsklassen (zentral, beide Farbwelten) === */
/* Akzent-Link: Schulz-Rosa, hell-Override automatisch */
.lnk-akzent{color:var(--rosa-hell)}
:root[data-theme="hell"] .lnk-akzent{color:var(--rosa-dunkel)}
/* Warn-/Lösch-Button: dezent rosa (Dunkel-Default), hell angepasst */
.btn-warn{background:rgba(220,55,87,.16);color:var(--rosa-hell);border-color:rgba(220,55,87,.4)}
:root[data-theme="hell"] .btn-warn{color:var(--rosa-dunkel)}
/* Betrag OHNE hinterlegten Wert: „ohne Wert" statt einer irreführenden „0,00 €"
   (Baustein app/templates/_betrag.html). Bewusst --text-2 und nicht --text-3 —
   es ist eine inhaltliche Aussage, kein Platzhalter, und --text-3 ist im Hellmodus
   zu kontrastarm (siehe Tabellenkopf-Hinweis weiter unten). Kein eigenes
   Farbschema: dieselbe gedämpfte Textstufe wie sekundäre Angaben, in beiden
   Farbwelten lesbar. font-weight bleibt normal, damit die Zeile nicht nach
   „großer Betrag" aussieht. */
.betrag-ohne-wert{color:var(--text-2);font-weight:500;font-variant-numeric:normal;white-space:nowrap}

/* === Audit-Datensatz-Info (zentral, alle Module) === */
/* Diskreter, per Klick aufklappbarer Block „wer/wann angelegt+geaendert". Die
   Basisregel .ae-audit lebt je Modul im Template-<style>; diese details-Regeln
   sind fuer alle Module identisch → hier zentral, damit jedes Modul dieselbe
   Optik erbt (kein Duplizieren in jeden <style>-Block). */
.ae-audit details{display:block;margin-top:0}
.ae-audit details summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;font-size:11px;color:var(--text-3);opacity:.65;user-select:none}
.ae-audit details summary::-webkit-details-marker{display:none}
.ae-audit details[open] summary{opacity:.9}
.ae-audit details .audit-grid{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin-top:8px;font-size:11px}
.ae-audit details .audit-grid .lab{color:var(--text-3)}
.ae-audit details .audit-grid .val{color:var(--text-2);font-weight:500}

/* === Tabellenkopf-Kontrast im Hellmodus (zentral, ALLE .tabelle-Vorkommen) ===
   .tabelle th nutzt --text-3 (Dark: #727b83, gut lesbar auf dunklem Karten-Grund).
   Im Hellmodus wird --text-3 zu #a8adb1 gepaart (bewusst blass fuer Platzhalter/
   Fussnoten) — auf hellem Karten-Grund als Spaltenkopf zu kontrastarm. Hier NUR
   fuer den Hellmodus gehoben (dunkleres Grau, WCAG-AA-tauglich).
   Greift haus-weit fuer jede Tabelle, die .tabelle nutzt — EIN Fix statt Einzel-
   Nachzuege je Modul. Dark-Regel oben bleibt unveraendert.
   Nachgemessen 14.08.2026: das frueher hier gesetzte --text-2 ist auf Weiss nur
   3,59:1 und damit fuer 12-px-Kopfzeilen immer noch zu wenig (AA = 4,5:1). Jetzt
   der stille, aber lesbare Ton --text-still (5,5:1). */
:root[data-theme="hell"] .tabelle th{color:var(--text-still)}

/* ═══════════════════════════════════════════════════════════════════════════
   Zentrale UI-Komponenten (aus Fahrzeuge-Rework, fuer alle Module)
   ───────────────────────────────────────────────────────────────────────────
   Additiv angelegt (2026-07-03). Diese Regeln aendern NICHTS am Bestand — sie
   heben die wiederkehrenden, bislang je Modul mit eigenem Praefix (.fz-/.fr-/
   .fa-/.fd-/.mg-/.fc-/.cd-/.ad-/.bs-) nachgebauten Muster in EINE Haus-Klasse.
   So baut jedes kuenftige Modul (Auswertung, QM, Bewertung …) denselben Baustein
   statt ihn neu zu erfinden — der Skalierungs-Hebel (Charta-Grundsatz 4+5).

   Aufbau je Komponente: Dunkelmodus = Default; Hellmodus-Overrides ausschliesslich
   unter :root[data-theme="hell"] (wie .tabelle/.badge es bereits vormachen).
   Farben laufen ueber Tokens; die Ampel-Gruen/Gelb/Rot-Hex leben EINMAL als
   --amp-*-Tokens (frueher 8x im Code dupliziert).

   Komponenten:
     1. .kpi-leiste / .kpi-kachel (+ .warn/.rot/.leer)   — Kennzahlen-Kacheln
     2. .ampel / .ampel-pkt (.rot/.gelb/.gruen/.grau)     — Termin-/Status-Ampel
     3. .info-dl                                          — Steckbrief-Definitionsliste
     4. .leer-zustand                                     — freundlicher Leerzustand
     5. .form-karte / .form-gruppe                        — Formular-Karte mit Gruppen
     6. .wahl-kacheln                                     — grosse Touch-Radio-Auswahl
     7. .hinweis-kasten                                   — Info-Kasten (rosa Randstreifen)
     8. .klapp                                            — Klapp-Bereich (details, zu-Default)
     9. .timeline                                         — Verlaufs-/Ereignisliste
   ═════════════════════════════════════════════════════════════════════════ */

/* Ampel-Tokens — EINMAL definiert (frueher als #7ddaa5/#ffd566/#ff6a86 verstreut).
   Additiver :root-Block: ergaenzt nur, ueberschreibt keine bestehende Variable. */
:root{
  --amp-gruen:#7ddaa5; --amp-gelb:#ffd566; --amp-rot:#ff6a86; --amp-grau:var(--rand);
  /* --amp-blau: informativer Ton (analog .badge.info) — ersetzt Hard-codes im Markup */
  --amp-blau:#8fbcff;
  /* --text-still: der LESBARE stille Ton fuer Kleinschrift (Fussnoten, Kachel-
     Beschriftungen, „—"-Platzhalter, Zaehler). In der dunklen Welt ist das
     unveraendert --text-3; in der HELLEN Welt ist --text-3 (#a8adb1) auf Weiss
     gemessene 2,07:1 und damit fuer Text unter 14 px unlesbar (WCAG-AA verlangt
     4,5:1). Deshalb dort ein dunklerer Grauton — als eigenes Token statt als
     Hex-Wert in jeder Vorlage, und OHNE --text-3 selbst zu veraendern (das ist ein
     gesetzter CI-Wert, Skill cockpit-ci). Wer kuenftig stille Kleinschrift baut,
     nimmt --text-still statt --text-3. */
  --text-still:var(--text-3);
}
:root[data-theme="hell"]{
  --text-still:#656a6e;         /* 5,5:1 auf Weiss · 5,0:1 auf --karte-2 */
}
/* Hellmodus: gesaettigte Vollton-Ampelfarben sind auf Weiss zu blass → abdunkeln
   (WCAG-AA), analog der .badge-Hell-Overrides. Grau bleibt an --rand gekoppelt. */
:root[data-theme="hell"]{
  --amp-gruen:#1f7a4d; --amp-gelb:#9a5b00; --amp-rot:#c2334f; --amp-grau:var(--rand-betont);
  --amp-blau:#1f5e9e;
}

/* ── 1. KPI-Leiste / KPI-Kacheln ─────────────────────────────────────────────
   Ersetzt .fz-kpi/.fr-kpi/.fa-kpi (3x dupliziert). Ein Grid, tabular-nums,
   Farb-Modifier .warn/.rot; ".leer" = neutral (0 ist keine schlechte Nachricht). */
.kpi-leiste{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 4px}
/* Handy: IMMER 2x2 statt gequetschter Einzelzeile — auch wenn ein Template per
   Inline-Style eine eigene Desktop-Gewichtung (z. B. 1.3fr...) setzt. */
@media(max-width:720px){.kpi-leiste{grid-template-columns:repeat(2,1fr) !important}}
.kpi-kachel{background:var(--karte);border:1px solid var(--rand-zart);border-radius:var(--r);
  padding:14px 16px}
.kpi-kachel .kpi-zahl{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
/* Kachel-Beschriftung: stiller, aber lesbarer Ton (in der hellen Welt kam
   --text-3 nur auf 2,26:1 — gemessen 14.08.2026). */
.kpi-kachel .kpi-name{font-size:12px;color:var(--text-still);margin-top:4px}
.kpi-kachel.gross{padding:18px 20px}
.kpi-kachel.gross .kpi-zahl{font-size:34px}
.kpi-kachel.warn .kpi-zahl{color:var(--amp-gelb)}
.kpi-kachel.rot  .kpi-zahl{color:var(--amp-rot)}
/* Icon-Kaestchen im warn-Ton amber toenen — analog zu den ok/gefahr-Toenen aus
   _kpi.html (.eui-ton-ok/.eui-ton-gefahr .eui-kpi-ic), die den warn-Ton bisher
   nicht kannten. So liest die „Teilweise"-Kachel (Gerüstbuch) durchgehend amber
   statt mit Default-Rosa-Icon. */
.kpi-kachel.warn .eui-kpi-ic{background:rgba(255,213,102,.15);color:var(--amp-gelb)}
/* leer = 0 → neutraler Text statt Warn-/Alarmfarbe (Ruhe = gute Nachricht) */
.kpi-kachel.warn.leer .kpi-zahl,.kpi-kachel.rot.leer .kpi-zahl{color:var(--text)}
/* Alarm-Puls: NUR wo bewusst gesetzt (.pulst) und NUR ausserhalb reduced-motion.
   Dezenter rot/rosa Glow, 2s-Zyklus — der eine „Achtung"-Moment. */
@media(prefers-reduced-motion:no-preference){
  .kpi-kachel.pulst{animation:kpi-puls 2s var(--ease) infinite}
}
@keyframes kpi-puls{
  0%,100%{box-shadow:0 0 0 0 rgba(255,106,134,0)}
  50%{box-shadow:0 0 0 4px rgba(255,106,134,.22)}
}
/* Klickbare KPI-Kachel (``<a class="kpi-kachel">``) — fuehrt in die gefilterte
   Liste. Semantik-kompatibel zu origin/kiki/einkauf-ux (dort ``a.kpi`` + ``.kpi
   [data-ampel="warn"]``): der Link erbt die Textfarbe (kein Link-Blau), zeigt einen
   Zeiger-Cursor, hebt sich beim Hover leicht und traegt einen sichtbaren
   Fokus-Rahmen. ``data-ampel="warn"`` betont den Rand rosa („hier ist etwas fuer
   dich"), ``rot`` alarm-rot — gesetzt vom Aufrufer, wenn ein Zaehler > 0 ist. */
a.kpi-kachel{display:block;text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
a.kpi-kachel:hover{transform:translateY(-3px);border-color:var(--rand-betont);
  box-shadow:0 12px 28px rgba(0,0,0,.32)}
a.kpi-kachel:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}
.kpi-kachel[data-ampel="warn"]{border-color:var(--rosa)}
.kpi-kachel[data-ampel="rot"]{border-color:var(--amp-rot)}

/* ── 2. Ampel (Punkt + Text) ─────────────────────────────────────────────────
   Ersetzt .fz-punkt/.fd-punkt/.fr-punkt/.fa-punkt + Leasing-Punkt. Eine Farb-
   definition (Tokens), ein title-/Legende-Muster. .ampel = Zeile mit Punkt+Text. */
.ampel{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ampel-pkt{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.ampel-pkt.rot{background:var(--amp-rot)}
.ampel-pkt.gelb{background:var(--amp-gelb)}
.ampel-pkt.gruen{background:var(--amp-gruen)}
.ampel-pkt.grau{background:var(--amp-grau)}
/* Legende (klein, unter Listen) — eine Zeile, gleiche Punkte */
.ampel-legende{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11.5px;color:var(--text-3)}
.ampel-legende span{display:inline-flex;align-items:center;gap:6px}

/* ── 3. Info-DL (Steckbrief-Definitionsliste) ────────────────────────────────
   Ersetzt .fd-info/.cd-info/.ad-info/.bs-info. Zweispaltig auto/1fr, dt gedaempft,
   dd primaer — die Haus-Standard-Steckbrief-Darstellung. */
.info-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;align-items:baseline}
.info-dl dt{color:var(--text-3);font-size:12.5px;white-space:nowrap}
.info-dl dd{margin:0;color:var(--text);font-size:14px}
@media(max-width:520px){.info-dl{grid-template-columns:1fr;gap:2px 0}
  .info-dl dd{margin-bottom:8px}}

/* ── 4. Leer-Zustand ─────────────────────────────────────────────────────────
   Ersetzt .fz-leer-block/.fr-leer-block/.bs-leer-block. Icon + Text, zentriert. */
.leer-zustand{padding:42px 20px;text-align:center;color:var(--text-3)}
/* Nur das direkte Leerzustand-Icon — NICHT Icons in verschachtelten Knoepfen
   (.btn i behaelt seine 17/19px; vorher brach ein Button im Leerzustand). */
.leer-zustand > i{font-size:36px;display:block;margin-bottom:12px;opacity:.45}

/* ── 5. Form-Karte / Form-Gruppe ─────────────────────────────────────────────
   Ersetzt die ff-/mg-/fc-Praefixe der Formular-Chrome. Zentrierte Karte
   (max-Breite je Aufrufer), Feldgruppen mit Trennlinien. Kombiniert mit .fld
   (existiert bereits).
   HINWEIS: die Praefixe sind ausgeschrieben (nicht als Glob-Muster mit Sternchen-Slash)
   — ein solches Sternchen-Slash schloss den Kommentarblock frueher vorzeitig, wodurch
   die .form-karte-Regel als invalider Selektor verworfen wurde (CSSOM-Regel fehlte). */
.form-karte{background:var(--karte);border:1px solid var(--rand-zart);border-radius:var(--r);
  padding:6px 22px 22px;margin:18px auto 0}
.form-gruppe{padding:16px 0;border-top:1px solid var(--rand-zart)}
.form-gruppe:first-of-type{border-top:none}
.form-gruppe > h3{font-size:13px;font-weight:700;color:var(--text-2);letter-spacing:.02em;
  margin:0 0 12px;text-transform:none}
.form-gruppe .fld + .fld,.form-gruppe label + label{margin-top:12px}
.form-fuss{display:flex;gap:12px;flex-wrap:wrap;padding-top:18px;margin-top:4px;
  border-top:1px solid var(--rand-zart)}
/* Pflicht-Stern: Dunkel-Default var(--rosa-hell) (auf Dunkelgrund sichtbar),
   Hell-Override var(--rosa-dunkel) (auf Weiss sonst zu blass). */
.pflicht-stern{color:var(--rosa-hell)}
:root[data-theme="hell"] .pflicht-stern{color:var(--rosa-dunkel)}

/* ── 6. Wahl-Kacheln (grosse Touch-Radio-Auswahl) ────────────────────────────
   Ersetzt .mg-prio/.fc-wahl. Pure-CSS-Auswahl via :has(input:checked). Ein Muster
   fuer „normal/hoch/dringend", „i.O./n.i.O." usw. Touch-Ziele gross (>=56px). */
.wahl-kacheln{display:flex;gap:10px;flex-wrap:wrap}
.wahl-kacheln label{flex:1 1 0;min-width:120px;min-height:56px;display:flex;
  align-items:center;justify-content:center;gap:8px;text-align:center;cursor:pointer;
  padding:12px 14px;border:1px solid var(--rand);border-radius:var(--r);
  background:var(--ink-2);color:var(--text-2);font-weight:600;font-size:14px;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.wahl-kacheln label input{position:absolute;opacity:0;width:0;height:0}
.wahl-kacheln label:has(input:checked){border-color:var(--rosa);color:var(--text);
  background:rgba(220,55,87,.12)}
.wahl-kacheln label:has(input:focus-visible){outline:2px solid var(--rosa);outline-offset:2px}
/* Semantische Toene: „gut" gruen, „schlecht/dringend" rot — beim Auswaehlen */
.wahl-kacheln label.ist-gut:has(input:checked){border-color:var(--amp-gruen);
  background:rgba(125,218,165,.14);color:var(--amp-gruen)}
.wahl-kacheln label.ist-schlecht:has(input:checked){border-color:var(--amp-rot);
  background:rgba(255,106,134,.14);color:var(--amp-rot)}
/* „Warnung/Mangel" gelb (z. B. Mangel-Erfassung) — zwischen gut und schlecht */
.wahl-kacheln label.ist-warn:has(input:checked){border-color:var(--amp-gelb);
  background:rgba(255,213,102,.14);color:var(--amp-gelb)}

/* ── 7. Hinweis-Kasten (Info mit rosa Randstreifen) ──────────────────────────
   Hebt das .bs-entstehung-Muster (Einkauf) zentral. Info-Icon + Text, linker
   Rosa-Streifen. Fuer Datenschutz-/Erklaer-/Kontext-Hinweise in allen Modulen. */
.hinweis-kasten{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin:0 0 16px;
  background:var(--ink-2);border:1px solid var(--rand-zart);border-left:3px solid var(--rosa);
  border-radius:var(--r-s);font-size:12.5px;color:var(--text-2);line-height:1.5}
.hinweis-kasten > i{color:var(--rosa-hell);font-size:16px;flex:0 0 16px;margin-top:1px}
:root[data-theme="hell"] .hinweis-kasten > i{color:var(--rosa-dunkel)}
/* Hell: der Kastentext ist eine Ansage — --text-2 kam auf dem hellen Grund nur
   auf 3,17:1 (gemessen 14.08.2026). Voller Textton, Rahmen/Flaeche bleiben. */
:root[data-theme="hell"] .hinweis-kasten{color:var(--text)}

/* ── 8. Klapp-Bereich (details, collapsed by default) ────────────────────────
   Ersetzt details.fd-klapp/.wk-neu. Haus-Standard: startet ZU. Pfeil dreht auf. */
.klapp{border:1px solid var(--rand-zart);border-radius:var(--r);background:var(--karte);
  margin:12px 0;overflow:hidden}
.klapp > summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;
  gap:10px;padding:14px 16px;font-weight:600;font-size:14px;color:var(--text);
  transition:background .15s var(--ease)}
.klapp > summary::-webkit-details-marker{display:none}
/* Chevron als echtes <i class="ti ti-chevron-down klapp-pfeil"> im summary — kein
   CSS-Pseudo-Icon (Tabler kommt hier ueber <i>-Elemente, nicht als lokale Font). */
.klapp > summary .klapp-pfeil{margin-left:auto;color:var(--text-3);font-size:18px;
  transition:transform .2s var(--ease)}
.klapp[open] > summary .klapp-pfeil{transform:rotate(180deg)}
.klapp > summary:hover{background:var(--karte-2)}
.klapp > summary:focus-visible{outline:2px solid var(--rosa);outline-offset:-2px}
.klapp-koerper{padding:2px 16px 16px}

/* ── 9. Timeline (Verlaufs-/Ereignisliste) ──────────────────────────────────
   Ersetzt .ad-tl. Vertikale Linie + rosa Punkte je Eintrag — fuer Verlaeufe
   (Auftraege, Bestellungen, Gutschriften, QM). */
.timeline{list-style:none;margin:0;padding:0 0 0 4px}
.timeline li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--rand);margin-left:4px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:2px;width:11px;height:11px;
  border-radius:50%;background:var(--rosa);border:2px solid var(--karte)}
.timeline .tl-wann{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.timeline .tl-text{font-size:13.5px;color:var(--text);margin-top:2px}

/* ── 10. Inhalts-Links (Datentabellen / Steckbrief / Panels) ─────────────────
   Roh-Links in Inhaltsflaechen rendern sonst im Browser-Blau (kein globales
   ``a{}``-Reset im Haus-CSS) — auf dunklem Grund ein Fremdkoerper. Diese Regel ist
   ENG GESCOPT auf Inhalts-Kontexte (.tabelle, .info-dl, .panel, .karte-koerper) und
   faerbt NUR dort: dezente Textfarbe + feiner Unterstrich, Hover in Rosa. Sidebar,
   Buttons, Breadcrumbs, Hero-Tabs u. a. bleiben unangetastet (nicht global!). */
.tabelle a:not(.btn):not(.badge):not(.chip):not(.tag),
.info-dl a:not(.btn):not(.badge):not(.chip):not(.tag),
.panel a:not(.btn):not(.badge):not(.chip):not(.tag),
.fa-tab a:not(.btn):not(.badge):not(.chip):not(.tag),
.karte-koerper a:not(.btn):not(.badge):not(.chip):not(.tag){
  color:var(--text);text-decoration:underline;text-decoration-color:var(--rand-betont);
  text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s var(--ease)}
.tabelle a:not(.btn):not(.badge):not(.chip):not(.tag):hover,
.info-dl a:not(.btn):not(.badge):not(.chip):not(.tag):hover,
.panel a:not(.btn):not(.badge):not(.chip):not(.tag):hover,
.fa-tab a:not(.btn):not(.badge):not(.chip):not(.tag):hover,
.karte-koerper a:not(.btn):not(.badge):not(.chip):not(.tag):hover{
  color:var(--rosa-hell);text-decoration-color:var(--rosa)}
.tabelle a:not(.btn):not(.badge):not(.chip):not(.tag):focus-visible,
.info-dl a:not(.btn):not(.badge):not(.chip):not(.tag):focus-visible,
.panel a:not(.btn):not(.badge):not(.chip):not(.tag):focus-visible,
.fa-tab a:not(.btn):not(.badge):not(.chip):not(.tag):focus-visible,
.karte-koerper a:not(.btn):not(.badge):not(.chip):not(.tag):focus-visible{
  outline:2px solid var(--rosa);outline-offset:2px;border-radius:2px}
:root[data-theme="hell"] .tabelle a:not(.btn):not(.badge):not(.chip):not(.tag):hover,
:root[data-theme="hell"] .info-dl a:not(.btn):not(.badge):not(.chip):not(.tag):hover,
:root[data-theme="hell"] .panel a:not(.btn):not(.badge):not(.chip):not(.tag):hover,
:root[data-theme="hell"] .karte-koerper a:not(.btn):not(.badge):not(.chip):not(.tag):hover{
  color:var(--rosa-dunkel)}

/* ═══════════════════════════════════════════════════════════════════════════
   Live-Such-Combobox (haus-weit) — Server-Suche mit Freitext-Fallback.
   Markup: .em-combo (position:relative) > input[data-suche-url] + ul.em-combo-list.
   Verhalten liegt in cockpit.js (Live-Such-Combobox). Frueher lokal in
   ereignismeldung_neu.html; hierher zentralisiert (EINE Quelle statt Duplikat),
   damit Kostenstellen-/Personen-/Rechnungs-/Artikel-Suchen dasselbe Aussehen teilen.
   ═══════════════════════════════════════════════════════════════════════════ */
.em-combo-list{position:absolute;top:100%;left:0;right:0;z-index:50;margin:4px 0 0;padding:4px 0;
  list-style:none;background:var(--karte);border:1px solid var(--rand);border-radius:7px;
  max-height:210px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.em-combo-list[hidden]{display:none}
.em-combo-list li{padding:8px 12px;font-size:13px;color:var(--text);cursor:pointer}
.em-combo-list li:hover,.em-combo-list li.focus{background:rgba(220,55,87,.12);color:var(--rosa-hell)}
.em-combo-list li.leer{color:var(--text-3);cursor:default}
/* Auto-gezogene Zusatzinfo (z. B. Stelle aus dem Personalverzeichnis) — Hinweis, kein Pflichtfeld */
.stelle-hint{display:flex;align-items:center;gap:7px;margin-top:8px;padding:7px 11px;
  background:rgba(220,55,87,.08);border:1px solid rgba(220,55,87,.30);border-radius:var(--r-s);
  font-size:12.5px;color:var(--text-2)}
.stelle-hint[hidden]{display:none}
.stelle-hint i{color:var(--rosa-hell);font-size:15px;flex:0 0 auto}
.stelle-hint b{color:var(--text)}
/* ═══ Ende Zentrale UI-Komponenten (Fahrzeuge-Rework) ═══════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   EINGANGSPOST — 3-Spalten-Detailansicht (Trefferliste · Livebeleg · Kommentierung)
   ──────────────────────────────────────────────────────────────────────────
   Links die Dokument-/Vorgangsliste des Pakets, Mitte der Live-Beleg (Haus-
   Belegvorschau-Baustein, modus='dokument'), rechts die Kommentierung + der
   Rückfrage-Dialog + Antwort-Thread. Jede Spalte scrollt unabhängig, unter
   ~1000px wird sauber gestapelt (Liste → Beleg → Kommentierung).
   ═══════════════════════════════════════════════════════════════════════════ */
.ep-3col{
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 360px;
  gap:16px; align-items:stretch;
  /* Arbeitsfläche: füllt den sichtbaren Bereich; jede Spalte scrollt selbst. */
  height:calc(100vh - 160px); min-height:520px;
}
.ep-3col-liste,.ep-3col-rechts{ overflow-y:auto; overflow-x:hidden; min-height:0 }
.ep-3col-mitte{ min-width:0; min-height:0; display:flex; flex-direction:column }

/* ---- LINKS: Trefferliste ---------------------------------------------------- */
.ep-3col-liste{
  background:var(--karte); border:1px solid var(--rand-zart); border-radius:var(--r);
  padding:8px; display:flex; flex-direction:column; gap:6px;
}
.ep-3col-liste-kopf{
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--text-3);
  text-transform:uppercase; padding:6px 8px 8px; border-bottom:1px solid var(--rand-zart);
  margin-bottom:2px;
}
.ep-3col-dok{
  text-align:left; width:100%; background:var(--ink-2); border:1px solid var(--rand-zart);
  border-left:3px solid transparent; border-radius:var(--r-s); padding:10px 12px; cursor:pointer;
  color:var(--text); font-family:inherit; display:flex; flex-direction:column; gap:5px;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.ep-3col-dok:hover{ border-color:var(--rand-betont); background:var(--karte-2) }
.ep-3col-dok.aktiv{
  border-left-color:var(--rosa); background:rgba(220,55,87,.10);
  border-color:rgba(220,55,87,.35);
}
.ep-3col-dok-typ{ font-size:10px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--rosa-hell) }
.ep-3col-dok-titel{ font-size:13px; font-weight:600; color:var(--text); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical }
.ep-3col-dok-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:11px; color:var(--text-3) }
.ep-3col-dok-meta i{ font-size:11px }

/* ---- MITTE: Live-Beleg (Belegvorschau-Baustein, füllt die Spaltenhöhe) ------ */
.ep-3col-mitte .detail-doc{
  position:static; top:auto; height:100%; max-height:none; --doc-h:100%;
}
.ep-3col-mitte .detail-doc-body{ flex:1 1 auto; height:auto; min-height:0 }
/* Höhen- und Breiten-Griff sind im höhenfüllenden Grid gegenstandslos → aus. */
.ep-3col-mitte .detail-doc-griff,
.ep-3col-mitte .detail-doc-breite-griff{ display:none }

/* ---- RECHTS: Kommentierung + Rückfrage je Dokument -------------------------- */
.ep-3col-rechts{ display:flex; flex-direction:column; gap:14px }
.ep-3col-panel{ display:none; flex-direction:column; gap:14px }
.ep-3col-panel.aktiv{ display:flex }
.ep-3col-karte{
  background:var(--karte); border:1px solid var(--rand-zart); border-radius:var(--r-s);
  padding:14px; display:flex; flex-direction:column; gap:10px;
}
.ep-3col-karte-titel{
  font-size:12px; font-weight:700; color:var(--text-3); letter-spacing:.04em;
  display:flex; align-items:center; gap:6px;
}
.ep-3col-karte-titel i{ color:var(--rosa-hell) }

/* ---- Rückfrage-Dialog (startet eingeklappt) -------------------------------- */
.ep-rf-input, .ep-rf-frage{
  width:100%; box-sizing:border-box; background:var(--ink-2); color:var(--text);
  border:1px solid var(--rand); border-radius:6px; padding:8px 10px;
  font-family:inherit; font-size:13px; outline:none;
}
.ep-rf-input:focus, .ep-rf-frage:focus{ border-color:var(--rosa) }
.ep-rf-frage{ resize:vertical; min-height:80px; line-height:1.5 }
.ep-rueckfrage-panel{
  display:none; flex-direction:column; gap:10px; margin-top:2px;
  border-top:1px dashed var(--rand); padding-top:12px;
}
.ep-rueckfrage-panel.offen{ display:flex }
.ep-rf-such-wrap{ position:relative; display:flex; flex-direction:column; gap:5px }
.ep-rf-treffer{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  background:var(--ink-2); border:1px solid var(--rand-betont); border-radius:8px;
  overflow:hidden auto; max-height:220px; box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.ep-rf-treffer[hidden]{ display:none }
.ep-rf-treffer-item{ padding:8px 11px; cursor:pointer; font-size:13px; color:var(--text);
  display:flex; flex-direction:column; gap:1px }
.ep-rf-treffer-item:hover, .ep-rf-treffer-item.focus{
  background:rgba(220,55,87,.14); color:var(--rosa-hell) }
.ep-rf-treffer-item .m{ font-size:11px; color:var(--text-3) }
.ep-rf-treffer-item.leer{ color:var(--text-3); cursor:default }
.ep-rf-gewaehlt{
  display:none; align-items:center; gap:8px; padding:7px 10px;
  background:rgba(220,55,87,.10); border:1px solid rgba(220,55,87,.3);
  border-radius:6px; font-size:13px; color:var(--text);
}
.ep-rf-gewaehlt.sichtbar{ display:flex }
.ep-rf-gewaehlt-name{ font-weight:600 }
.ep-rf-gewaehlt-x{ margin-left:auto; background:none; border:none; color:var(--text-3);
  cursor:pointer; font-size:15px; line-height:1; padding:2px }
.ep-rf-gewaehlt-x:hover{ color:var(--rosa-hell) }
.ep-rf-hinweis{ font-size:12px; color:var(--rosa-hell); display:flex; align-items:center; gap:6px }

/* ---- Antwort-Thread -------------------------------------------------------- */
.ep-rf-thread{ display:flex; flex-direction:column; gap:8px }
.ep-rf-eintrag{
  background:var(--ink-2); border:1px solid var(--rand-zart);
  border-left:3px solid var(--rosa); border-radius:6px; padding:9px 11px;
}
.ep-rf-eintrag.antwort{ border-left-color:#34b87a }
.ep-rf-eintrag-kopf{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px }
.ep-rf-eintrag-avatar{ width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  display:grid; place-items:center; background:var(--rosa); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.3px }
.ep-rf-eintrag-autor{ font-size:12px; font-weight:700; color:var(--text-2) }
.ep-rf-eintrag-zeit{ font-size:11px; color:var(--text-3); margin-left:auto }
.ep-rf-eintrag-text{ font-size:13px; color:var(--text); line-height:1.5; white-space:pre-wrap }

/* ---- Tagesansicht-Kopf (Titel + Zurueck) ---------------------------------- */
.ep-tagessatz-kopf{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px }
.ep-tagessatz-titel{ font-size:15px; font-weight:600; color:var(--text) }
.ep-tagessatz-bereich{ font-size:12.5px; color:var(--text-3) }

/* ---- LINKS: Paket-Gruppierung (mehrere Tagespakete) + kompakter Workflow --- */
.ep-3col-paketgruppe{ display:flex; flex-direction:column; gap:6px }
.ep-3col-paketgruppe + .ep-3col-paketgruppe{ margin-top:6px;
  border-top:1px dashed var(--rand-zart); padding-top:8px }
.ep-3col-paket-kopf{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px 9px; border-radius:var(--r-s);
  background:var(--ink-2); border:1px solid var(--rand-zart);
}
.ep-3col-paket-stempel{ font-size:10.5px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-3); display:inline-flex; align-items:center; gap:4px }
.ep-3col-paket-stempel i{ font-size:12px; color:var(--rosa-hell) }
.ep-pk-zuweisen{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; flex-basis:100%; }
.ep-pk-select{ background:var(--ink-1); color:var(--text); border:1px solid var(--rand);
  border-radius:6px; padding:5px 8px; font-family:inherit; font-size:12px; flex:1 1 120px; min-width:0 }
.ep-pk-btn{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  background:rgba(220,55,87,.12); color:var(--rosa-hell);
  border:1px solid rgba(220,55,87,.35); border-radius:6px;
  padding:5px 10px; font-family:inherit; font-size:12px; font-weight:600;
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.ep-pk-btn:hover{ background:rgba(220,55,87,.2); border-color:var(--rosa) }
.ep-pk-btn:disabled{ opacity:.55; cursor:default }
.ep-pk-btn i{ font-size:13px }
/* Primaere Paket-Aktion (gefuellt) — hebt „Postsatz abschliessen" von der daneben
   stehenden, freiwilligen Ruecksprache-Zuweisung ab (eine klare Hauptaktion je Kopf). */
.ep-pk-btn.primaer{ background:var(--rosa); border-color:var(--rosa); color:#fff }
.ep-pk-btn.primaer:hover{ background:var(--rosa-hell); border-color:var(--rosa-hell) }
.ep-pk-status{ flex-basis:100% }

/* ---- Verlauf & Antworten (Zwei-Wege-Konversation, startet ZU) -------------- */
.ep-verlauf-toggle{
  display:flex; align-items:center; gap:6px; width:100%; cursor:pointer;
  background:none; border:none; padding:0; font-family:inherit;
  font-size:12px; font-weight:700; color:var(--text-3); letter-spacing:.04em;
}
.ep-verlauf-toggle > i:first-child{ color:var(--rosa-hell) }
.ep-verlauf-pfeil{ margin-left:auto; transition:transform .18s var(--ease) }
.ep-verlauf-toggle.offen .ep-verlauf-pfeil{ transform:rotate(180deg) }
.ep-verlauf-zahl{ font-size:11px }
.ep-verlauf-body{ display:flex; flex-direction:column; gap:10px; margin-top:4px }
.ep-verlauf-body[hidden]{ display:none }
.ep-verlauf-leer{ font-size:12.5px; color:var(--text-3); font-style:italic }
.ep-verlauf-text{
  width:100%; box-sizing:border-box; background:var(--ink-2); color:var(--text);
  border:1px solid var(--rand); border-radius:6px; padding:8px 10px;
  font-family:inherit; font-size:13px; outline:none; resize:vertical; min-height:64px; line-height:1.5;
}
.ep-verlauf-text:focus{ border-color:var(--rosa) }

/* ---- Stapeln unter ~1000px (kein horizontales Seiten-Scrollen) ------------- */
@media(max-width:1000px){
  .ep-3col{ display:flex; flex-direction:column; height:auto; min-height:0 }
  .ep-3col-liste{ order:1; max-height:300px }
  .ep-3col-mitte{ order:2 }
  .ep-3col-mitte .detail-doc{ height:auto }
  .ep-3col-mitte .detail-doc-body{ height:70vh; flex:none }
  .ep-3col-rechts{ order:3; overflow:visible }
}
/* ═══ Ende Eingangspost 3-Spalten-Detailansicht ═════════════════════════════ */