@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/hanken-grotesk-var.woff2') format('woff2');
}
:root{
  --hero-a:#e91e63; --hero-b:#b0155f; --hero-c:#f57ba6;   /* zweite Hero-Variante = aufgehelltes Pink (nicht Violett) */
  --hero-ink:#fff;   /* Schrift/Icon AUF Hero-Fläche (Buttons, Badges …). Wird je Hero-Farbe per JS gesetzt: dunkel bei hellen Farben (Gelb) */
  --hero-grad:linear-gradient(135deg,var(--hero-a) 0%,var(--hero-c) 100%);
  --hero-glow:233,30,99;
  --co-green:#1eb37a; --co-blue:#4a9fd4; --co-yellow:#ffd93a; --co-red:#e5555c; --co-purple:#a56bc4;
  /* Aufgehellte Zweitvariante je Stammfarbe (für Verläufe/Blooming/CTA-Flow) */
  --co-green-l:color-mix(in srgb,var(--co-green),#fff 32%); --co-blue-l:color-mix(in srgb,var(--co-blue),#fff 32%);
  --co-yellow-l:color-mix(in srgb,var(--co-yellow),#fff 30%); --co-red-l:color-mix(in srgb,var(--co-red),#fff 32%);
  --co-purple-l:color-mix(in srgb,var(--co-purple),#fff 32%);
  --ease:cubic-bezier(.22,1,.36,1);
  --gap:16px;   /* EIN genormter Abstand zwischen gestapelten/nebeneinander liegenden Cards */
  --footh:48px;   /* Höhe der fixierten, seitenbreiten Fußleiste */
  --ov-bg:rgba(6,4,9,.5); --ov-blur:blur(1.5px);   /* EINE Overlay-Konvention: Modal, Command-Palette, Nav-Backdrop */
}
/* ---------- DARK (default, zeigt Glas + Glanz am besten) ---------- */
#app{
  --bg:#0c0b0d; --bg-1:#141118; --bg-2:#1b1722; --bg-card:#17141c;
  --fg:#f4eef3; --fg-dim:#b6a9b6; --fg-faint:#8f8593;   /* faint angehoben: ~4.8:1 auf Card (AA) statt 3.8:1 */
  --border:rgba(255,255,255,.13); --border-strong:rgba(255,255,255,.24);
  --glass:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 60%,rgba(255,255,255,0));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.30);
  --ring:linear-gradient(150deg,color-mix(in srgb,var(--hero-a) 21%,transparent),var(--border) 44%,color-mix(in srgb,var(--hero-c) 13%,transparent));
  --ring-flat:linear-gradient(150deg,color-mix(in srgb,var(--hero-a) 21%,transparent),var(--border) 44%,color-mix(in srgb,var(--hero-c) 13%,transparent));   /* unverfaelschte Basis-Ring-Optik — fuer Elemente, die den data-accent-Boost eines Vorfahren (z.B. Dialog) NICHT erben sollen */
  --e1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.7);
  --e2:0 2px 6px rgba(0,0,0,.45),0 18px 44px -20px rgba(0,0,0,.75);
  --reveal:.5;
  --rev:rgba(255,255,255,.92);   /* Border-Glow-Farbe im Dark = hell */
  --grain:.05; --blend:screen;
}
/* ---------- LIGHT ---------- */
#app.light{
  --bg:#f6f5f7; --bg-1:#ffffff; --bg-2:#f0eef3; --bg-card:#ffffff;
  --fg:#1c1620; --fg-dim:#5f5563; --fg-faint:#746c7c;   /* faint abgedunkelt: ~4.7:1 auf Weiß (AA) statt 3.5:1 */
  --border:rgba(20,10,25,.10); --border-strong:rgba(20,10,25,.18);
  --glass:linear-gradient(150deg,rgba(255,255,255,.75),rgba(255,255,255,.35) 60%,rgba(255,255,255,.1));
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.9);
  --ring:linear-gradient(150deg,color-mix(in srgb,var(--hero-a) 40%,transparent),var(--border) 46%,color-mix(in srgb,var(--hero-c) 24%,transparent));
  --ring-flat:linear-gradient(150deg,color-mix(in srgb,var(--hero-a) 40%,transparent),var(--border) 46%,color-mix(in srgb,var(--hero-c) 24%,transparent));
  --e1:0 1px 2px rgba(30,15,35,.08),0 10px 26px -16px rgba(30,15,35,.28);
  --e2:0 2px 8px rgba(30,15,35,.10),0 20px 46px -22px rgba(30,15,35,.32);
  --reveal:.4;
  --rev:color-mix(in srgb,var(--acc,var(--hero-a)) 90%,transparent);   /* Border-Glow-Farbe im Light = Bordercolor (Akzent/Hero) */
  --grain:.03; --blend:multiply;
  --co-green:#008d5d; --co-blue:#21648b; --co-yellow:#c99700; --co-red:#b7262d; --co-purple:#70358a;
  color-scheme:light;   /* themed native controls: Date/Time-Popup, Combo-Liste, Scrollbar */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}   /* Basis-Reset: sonst rahmt der 8px-Body-Rand die App (weißer „Border rund um die Seite") — #app füllt via min-height:100vh */
/* Seitenwechsel ohne hartes Flackern: Static-SSR-Apps laden Seiten VOLLSTAENDIG neu (Enhanced-Nav ist aus, weil
   sie das DOM uebernimmt) -- ohne Uebergang blitzt der leere Zwischenzustand auf. Cross-Document View Transitions
   blenden alt/neu weich ineinander; Browser ohne Unterstuetzung ignorieren die Regel folgenlos. */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:hsl-vt-out .16s ease both;}
::view-transition-new(root){animation:hsl-vt-in .22s ease both;}
@keyframes hsl-vt-out{to{opacity:0;}}
@keyframes hsl-vt-in{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none;}}
/* Zweiter Flacker-Grund: die ListView wird NACH dem ersten Paint angereichert (Kopf-/Fusszeile kommen dazu, der
   Inhalt rutscht). Solange data-lv unverarbeitet ist, wird die Hoehe reserviert; .lv-on hebt das auf. */
.lv[data-lv]:not(.lv-on){min-height:120px;}
html{scrollbar-gutter:stable;}   /* Rinne immer reservieren → kein Layout-Sprung zwischen Reitern mit/ohne Scrollbalken */
html.hsl-lock{overflow:hidden;}   /* Overlay offen -> Seite dahinter scrollt NICHT (Dialog-Engine setzt/entfernt die Klasse, verschachtelungssicher per Zaehler) */
/* Gestylte Scrollbars (dünn, gebrandet, theme-fähig) */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--hero-a,#e91e63) 55%,transparent) transparent;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--hero-a,#e91e63) 42%,transparent);border-radius:9px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--hero-a,#e91e63) 80%,transparent);background-clip:content-box;}
::-webkit-scrollbar-corner{background:transparent;}
#app{
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--fg);background:var(--bg);min-height:100vh;position:relative;overflow-x:clip;color-scheme:dark;
  -webkit-font-smoothing:antialiased;
}
/* Ambient-Flow in allen vier Ecken (lebt sehr langsam) */
#app::before{
  content:'';position:fixed;inset:-10% -10% -10% -10%;z-index:0;pointer-events:none;mix-blend-mode:var(--blend);
  background:
    radial-gradient(38vw 38vw at 8% 6%,color-mix(in srgb,var(--co-blue) 20%,transparent),transparent 62%),
    radial-gradient(36vw 36vw at 94% 10%,color-mix(in srgb,var(--hero-a) 17%,transparent),transparent 60%),
    radial-gradient(40vw 40vw at 90% 96%,color-mix(in srgb,var(--co-purple) 19%,transparent),transparent 62%),
    radial-gradient(34vw 34vw at 4% 92%,color-mix(in srgb,var(--co-green) 17%,transparent),transparent 60%);
  animation:drift 20s ease-in-out infinite alternate;
}
/* Der Gradient HINTER den Cards lebt — schimmert durchs Milchglas (GPU-arm: nur transform auf einer fixed-Ebene) */
@keyframes drift{from{transform:translate3d(-3.5%,-2.5%,0) scale(1.05);}to{transform:translate3d(3.5%,3%,0) scale(1.12);}}
#app::after{ /* feiner Grain */
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Reveal-Glaskörper (die eine Signatur-Material-Klasse) ============ */
.glass{
  position:relative;isolation:isolate;
  background:var(--glass) padding-box,var(--ring) border-box;
  border:1px solid transparent;border-radius:16px;box-shadow:var(--e1),var(--glass-edge);
  backdrop-filter:blur(7px) saturate(1.2);-webkit-backdrop-filter:blur(7px) saturate(1.2);
}
.glass::before{ /* Näherungs-Glow auf DEM RAND, in der Bordercolor — Reichweite steuert der Radius, KEIN Hover-Ring */
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;padding:1.3px;
  background:radial-gradient(210px circle at var(--mx,-600px) var(--my,-600px),color-mix(in srgb,var(--acc,var(--hero-a)) 78%,var(--rev)),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.9;}

/* ============ Utilities (Kanon §1b) ============
   Die kanonische Utility-Ebene — Eskalationsleiter, KEINE Tailwind-Suppe (Grundgesetz 3 verbietet
   freie Pixel; hier kommen die Token-Wege dafuer). Layout laeuft ueber .stack/.grid-*-Gaps;
   mt-*/mb-* ist die AUSNAHME, nie das Muster. Schliesst die App-uebergreifende Luecke, wegen der
   sich Apps private --sp-1..8 definierten (licence-Inventur 2026-07-16, vierter Beleg). */
:root{ --sp-1:4px; --sp-2:8px; --sp-3:13px; --sp-4:16px; --sp-5:24px; --sp-6:32px; }
.stack{display:flex;flex-direction:column;gap:var(--sp-3);}
.stack-sm{gap:var(--sp-2);}
.stack-lg{gap:var(--sp-5);}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
.mt-0{margin-top:0!important}.mt-1{margin-top:var(--sp-1)!important}.mt-2{margin-top:var(--sp-2)!important}.mt-3{margin-top:var(--sp-3)!important}.mt-4{margin-top:var(--sp-4)!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:var(--sp-1)!important}.mb-2{margin-bottom:var(--sp-2)!important}.mb-3{margin-bottom:var(--sp-3)!important}.mb-4{margin-bottom:var(--sp-4)!important}
.mut{color:var(--fg-dim);}                                        /* gedimmter Text — war lange benutzt, nie definiert */
.num{font-variant-numeric:tabular-nums;text-align:right;}          /* Zahlenspalten: gleiche Ziffernbreite, rechtsbuendig */
.lab{font-size:12px;color:var(--fg-dim);letter-spacing:.02em;}     /* Feld-/Wert-Beschriftung */
.err{color:var(--co-red);font-size:12.5px;}                        /* Fehler-/Validierungstext */
.req{color:var(--co-red);font-weight:800;}                         /* Pflichtfeld-Stern am <label> (Kanon §13b) */
/* Save-Bar des Dirty-Guards (Kanon §13b) — erscheint bei ungespeicherten Aenderungen */
.hsl_savebar{position:fixed;left:50%;bottom:calc(var(--footh,0px) + 16px);transform:translate(-50%,140%);z-index:280;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:13px;min-width:min(560px,calc(100vw - 32px));opacity:0;pointer-events:none;transition:transform .24s var(--ease),opacity .2s var(--ease);}
.hsl_savebar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto;}
.hsl_savebar>span:first-child{font-size:13px;color:var(--fg-dim);}
.hsl_savebar_sp{flex:1;}
/* Positionen-Editor (Kanon §26) */
.hsl_li table{width:100%;border-collapse:collapse;}
.hsl_li thead th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);padding:8px 10px;background:color-mix(in srgb,var(--hero-c) 22%,transparent);}
.hsl_li thead th.num{text-align:right;}
.hsl_li tbody td{padding:6px 10px;border-top:1px solid var(--border);vertical-align:middle;}
.hsl_li .hsl_li_in{height:30px;width:100%;min-width:70px;font-size:13px;}
.hsl_li .hsl_li_in.num{text-align:right;font-variant-numeric:tabular-nums;}
.hsl_li td.num{font-variant-numeric:tabular-nums;color:var(--fg);}
.hsl_li_delcol{width:40px;text-align:right;}
.hsl_li_foot{display:flex;align-items:flex-end;gap:16px;padding:10px 10px 4px;flex-wrap:wrap;}
.hsl_li_sums{margin-left:auto;display:flex;flex-direction:column;gap:4px;min-width:220px;}
.hsl_li_sum{display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--fg-dim);}
.hsl_li_sum b{color:var(--fg);}
/* Status-Workflow (Kanon §27) */
.hsl_flow{display:flex;align-items:center;flex-wrap:wrap;gap:0;}
.hsl_flow_step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-faint);}
.hsl_flow_dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border-strong);font-size:11px;font-weight:800;color:var(--fg-faint);}
.hsl_flow_dot svg{width:13px;height:13px;}
.hsl_flow_step.done .hsl_flow_dot{background:var(--co-green);border-color:var(--co-green);color:#fff;}
.hsl_flow_step.cur .hsl_flow_dot{background:var(--hero-grad);border-color:transparent;color:var(--hero-ink);}
.hsl_flow_step.cur{color:var(--fg);font-weight:650;}
.hsl_flow_line{width:40px;height:2px;background:var(--border-strong);margin:0 8px;flex:0 0 auto;}
.hsl_flow_act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;}
/* Master-Detail-Split (Kanon §25): Liste | Teiler | Datensatz — Teiler ziehbar, Breite persistiert */
.hsl_split{display:grid;grid-template-columns:var(--splitw,300px) 10px minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;height:var(--splith,auto);}
/* 0.24.3 WURZELFIX: `.card{display:flex;flex-direction:column}` (90-demo, laedt SPAETER) schlug
   `.hsl_split{display:grid}` — ein Split mit dem Kanon-Markup class="hsl_split card glass" STAPELTE
   deshalb immer (Liste voll breit oben, Detail winzig unten, Teiler unsichtbar). Doppelklasse (0,2,0)
   gewinnt ordnungsunabhaengig; Card-Padding/-Gap wuerden die Grid-Spuren verschieben -> neutralisieren. */
.hsl_split.card{display:grid;padding:0;gap:0;}
.hsl_split_a,.hsl_split_b{overflow-y:auto;overscroll-behavior:contain;min-width:0;min-height:0;}   /* beidseitig scrollen — braucht eine Hoehe am Container (--splith), sonst waechst der Split mit dem Inhalt */
/* Teiler "Haarlinie+" (0.25.1, Auswahl 7A): sichtbar bleibt die schlanke 4px-Linie, die Trefferzone ist
   10px breit; Hover/Ziehen faerbt die Linie in der Hero-Farbe. */
.hsl_split_div{position:relative;cursor:col-resize;background:none;}
.hsl_split_div::before{content:'';position:absolute;left:3px;top:0;bottom:0;width:4px;border-radius:3px;background:var(--border);transition:background .15s var(--ease);}
.hsl_split_div:hover::before,.hsl_split_div.drag::before{background:var(--hero-a);}
@media (max-width:760px){.hsl_split{grid-template-columns:1fr;grid-template-rows:minmax(0,1.2fr) minmax(0,1fr);}.hsl_split_div{display:none;}.hsl_split_b{border-top:1px solid var(--border);}}
/* §25-Nachtrag (0.24.2): Eine ListView im Split-Pane bleibt FIXIERT wie ueberall — Kopf/Suche und
   Fusszeile stehen, NUR die Zeilen scrollen (Pane wird Flex-Spalte, .lv-scroll — beide Modi — scrollt,
   der Tabellenkopf klebt auf var(--bg-card)). Ausserhalb des Splits dasselbe per .lv-fill in jedem
   Container mit fester Hoehe. Vorher scrollte das Pane die ganze Liste samt Toolbar weg. */
.hsl_split_a:has(>.lv),.hsl_split_b:has(>.lv){display:flex;flex-direction:column;overflow:hidden;padding:0;}
.hsl_split_a>.lv,.hsl_split_b>.lv,.lv-fill{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;box-shadow:none;}
.hsl_split_a>.lv>*,.hsl_split_b>.lv>*,.lv-fill>*{flex:0 0 auto;}
.hsl_split_a>.lv .lv-scroll,.hsl_split_b>.lv .lv-scroll,.lv-fill .lv-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.hsl_split_a>.lv thead,.hsl_split_b>.lv thead,.lv-fill thead{position:sticky;top:0;z-index:3;background:var(--bg-card);}
/* Datensatz-Kopf (Kanon §24) */
.hsl_rec_head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.hsl_rec_tt{display:flex;flex-direction:column;gap:1px;min-width:140px;}
.hsl_rec_tt b{font-size:16px;font-weight:750;}
.hsl_rec_tt span{font-size:12px;color:var(--fg-faint);}
.hsl_rec_kv{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap;}
.hsl_rec_kv>div{display:flex;flex-direction:column;}
.hsl_rec_kv .l{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);}
.hsl_rec_kv .v{font-size:13.5px;font-weight:650;}
.hsl_rec_act{display:flex;gap:8px;align-items:center;}

/* ============ Shell ============ */
#app{--navw-open:250px;--navw:var(--navw-open);}   /* --navw-open = ziehbare/gespeicherte Breite */
#app.nav-collapsed{--navw:72px;}
.shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--navw) 1fr;min-height:100vh;transition:grid-template-columns .3s var(--ease);}
.shell[data-variant="auth"],.shell[data-variant="account"],.shell[data-variant="blank"]{grid-template-columns:1fr;}   /* Varianten ohne Nav-Spalte (hsl-shell variant=…) */
/* Ziehgriff zum Breite-Ändern (rechte Nav-Kante) */
.nav-resize{position:absolute;top:0;right:-3px;bottom:0;width:8px;cursor:ew-resize;z-index:31;}
.nav-resize::after{content:'';position:absolute;top:0;bottom:0;right:3px;width:2px;border-radius:2px;background:transparent;transition:background .15s var(--ease);}
.nav-resize:hover::after,#app.nav-resizing .nav-resize::after{background:color-mix(in srgb,var(--hero-a) 60%,transparent);}
#app.nav-collapsed .nav-resize{display:none;}
#app.nav-resizing{user-select:none;-webkit-user-select:none;cursor:ew-resize;}
#app.nav-resizing .shell,#app.nav-resizing .foot{transition:none;}
#app.nav-collapsed .shell{grid-template-columns:72px 1fr;}
.nav{padding:14px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--border);position:sticky;top:0;height:100vh;align-self:start;z-index:30;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hero-a) 9%,transparent),transparent 58%),color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(13px) saturate(1.3);-webkit-backdrop-filter:blur(13px) saturate(1.3);}   /* glassy wie Topbar/Footer: frostet den #app::before-Ambient + hero-a-Bloom oben (statt fester Farbe) */   /* volle Höhe: Footer beginnt rechts neben der Nav */
.nav-head{display:flex;align-items:center;gap:11px;padding:4px 4px 14px;}   /* Icon-Abstand oben = links (symmetrisch) */
.nav-logo{width:34px;height:34px;border-radius:10px;background:var(--hero-grad);background-size:300% 100%;display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:0 6px 18px -8px rgba(var(--hero-glow),.9);border:none;cursor:pointer;animation:hero-drift 7s ease-in-out infinite;}
.nav-logo svg{width:19px;height:19px;}
.brand{font-weight:800;font-size:19px;letter-spacing:-.03em;}
.brand .dot{background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-sec{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint);padding:16px 10px 6px;}
/* ===== Nav-Gruppen + Springe-zu (ERP-Ebenen, Kanon §4) ===== */
.nav-grp-h{display:flex;align-items:center;width:100%;background:none;border:none;cursor:pointer;font:inherit;color:var(--fg-faint);padding:12px 10px 6px 0;text-align:left;border-radius:9px;}
.nav-grp-h .nav-lbl{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;}
.nav-grp-h:hover{color:var(--fg-dim);}
.nav-grp-chev{width:12px;height:12px;margin-left:auto;flex:0 0 auto;transition:transform .2s var(--ease);transform:rotate(90deg);}   /* i-chevron zeigt nativ nach RECHTS -> offen = 90deg = nach unten */
.nav-grp.closed>.nav-grp-h .nav-grp-chev{transform:rotate(0deg);}   /* zugeklappt = nach rechts ("da geht es weiter") */
.nav-grp-b{display:flex;flex-direction:column;gap:2px;overflow:hidden;max-height:1400px;opacity:1;transition:max-height .26s var(--ease),opacity .2s var(--ease);padding-left:10px;}
.nav-grp.closed>.nav-grp-b{max-height:0;opacity:0;}
.nav-grp .nav-grp>.nav-grp-h{padding:7px 10px 7px 6px;color:var(--fg-dim);}   /* Ebene-3-Untergruppe: normaler Schriftschnitt */
.nav-grp .nav-grp>.nav-grp-h .nav-lbl{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;}
.nav-grp .nav-grp>.nav-grp-b{padding-left:26px;}   /* Ebene 3: eine Icon-Spalte tiefer einruecken — die Icons der Kinder beginnen dort, wo das Label der Untergruppe beginnt */
.nav-filter{position:relative;padding:8px 8px 4px;}
.nav-fin{width:100%;height:30px;border-radius:9px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg);font:inherit;font-size:12.5px;padding:0 26px 0 10px;outline:none;}
.nav-fin:focus{border-color:var(--hero-c);}
.nav-filter>svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--fg-faint);pointer-events:none;}
.nav .f-hide{display:none!important;}
.nav-grp.f-open>.nav-grp-b{max-height:1400px!important;opacity:1!important;}
#app.nav-collapsed .nav-filter{display:none;}
#app.nav-collapsed .nav-grp-b{display:none;}
#app.nav-collapsed .nav-grp-h{padding:9px 0;justify-content:center;}
#app.nav-collapsed .nav-grp-chev{display:none;}
.ng-pop{position:fixed;z-index:900;min-width:212px;max-height:min(420px,80vh);overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:14px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);display:none;flex-direction:column;gap:2px;}
.ng-pop.on{display:flex;}
.ng-pop .ng-h{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);padding:4px 8px 6px;}
.ng-pop .nav-a .nav-lbl{opacity:1!important;max-width:none!important;margin-left:11px!important;}   /* im Flyout sind Labels IMMER sichtbar (Rail versteckt sie global) */
.ng-pop .nav-tip{display:none;}
.nav a,.nav .nav-a{position:relative;display:flex;align-items:center;width:100%;padding:9px 8px;border-radius:11px;color:var(--fg-dim);text-decoration:none;font:inherit;font-size:14px;font-weight:550;text-align:left;border:1px solid transparent;background:none;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease);}   /* .nav-a: <a> UND <button> identisch (GAP C2/§4 — Nav-Button = Nav-Link) */
.nav-ico{width:26px;min-width:26px;height:26px;display:grid;place-items:center;flex:0 0 auto;}  /* feste Icon-Spalte → Icon wandert beim Klappen NICHT */
.nav-ico svg{width:18px;height:18px;}
.nav-lbl{margin-left:11px;white-space:nowrap;overflow:hidden;max-width:170px;transition:opacity .16s var(--ease),max-width .28s var(--ease),margin .28s var(--ease);}
.nav-tip{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;padding:6px 10px;border-radius:8px;background:var(--bg-2);color:var(--fg);border:1px solid var(--border-strong);font-size:12.5px;box-shadow:var(--e2);opacity:0;pointer-events:none;transition:opacity .16s var(--ease),transform .16s var(--ease);z-index:60;}
.nav a:hover,.nav .nav-a:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent);}
.nav a.on,.nav .nav-a.on{color:var(--fg);background:radial-gradient(75% 95% at 16% 18%,color-mix(in srgb,var(--hero-a) 13%,transparent),transparent 62%) padding-box,var(--glass) padding-box,var(--ring) border-box;border-color:transparent;box-shadow:var(--e1),var(--glass-edge),inset 2.5px 0 0 var(--hero-a);}
.nav-spring{flex:1;}
.nav a.danger:hover,.nav .nav-a.danger:hover{color:var(--co-red);}
/* Werkzeuge in der Navbar: Hero-Farbe + Theme-Switch */
.nav-tools{display:flex;align-items:center;gap:10px;padding:6px 6px 4px;}
.nav-hero{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;transition:.16s var(--ease);}
.nav-hero:hover{color:var(--fg);border-color:var(--hero-a);}
.nav-hero .swatch{width:14px;height:14px;border-radius:5px;background:var(--hero-grad);flex:0 0 auto;}
/* Theme-Toggle: quadratischer Icon-Button (radius/border/hover EXAKT wie .topswatch/.topreload) statt
   der früheren Pille/Track — Sonne/Mond bleiben, faden gekreuzt statt eines Schiebe-Knopfs, damit der
   Topbar-Cluster reset/hero-switch/theme-toggle als EIN konsistentes Set aus quadratischen Icon-Buttons
   wirkt (Andreas-Feedback). */
.themeswitch{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease);}
.themeswitch:hover{color:var(--fg);border-color:var(--hero-a);}
.topswatch{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);cursor:pointer;transition:border-color .15s var(--ease);}
.topswatch:hover{border-color:var(--hero-a);}
.topswatch .swatch{width:16px;height:16px;}
.ts-ico{position:relative;width:16px;height:16px;flex:0 0 auto;}
.ts-ico svg{position:absolute;inset:0;width:16px;height:16px;color:inherit;transition:opacity .22s var(--ease),transform .22s var(--ease);}
.ts-ico svg:first-of-type{opacity:0;transform:scale(.5) rotate(-90deg);}    /* Sonne: unsichtbar im Dark (Default) */
.ts-ico svg:last-of-type{opacity:1;transform:scale(1) rotate(0deg);}        /* Mond: sichtbar im Dark (Default) */
#app.light .ts-ico svg:first-of-type{opacity:1;transform:scale(1) rotate(0deg);}    /* Light: Sonne aktiv */
#app.light .ts-ico svg:last-of-type{opacity:0;transform:scale(.5) rotate(90deg);}   /* Light: Mond aus */
/* ts-mini: kompakter Theme-Umschalter für den eingeklappten Zustand */
.ts-mini{display:none;place-items:center;width:44px;height:44px;border-radius:11px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease);}
.ts-mini:hover{color:var(--fg);border-color:var(--hero-a);}
.ts-mini svg{width:19px;height:19px;}
.ts-mini .tmi-sun{display:none;}
#app.light .ts-mini .tmi-sun{display:block;} #app.light .ts-mini .tmi-moon{display:none;}
/* eingeklappt: Werkzeuge bleiben sichtbar (Theme-Toggle = fester Platz), kompakt gestapelt */
#app.nav-collapsed .nav-tools{flex-direction:column;gap:7px;align-items:center;padding:8px 0 2px;}
#app.nav-collapsed .nav-hero{width:44px;height:44px;padding:0;justify-content:center;border-radius:11px;}
#app.nav-collapsed .nav-hero>span:last-child{display:none;}
#app.nav-collapsed .nav .themeswitch{margin-left:0;width:44px;height:44px;display:grid;place-items:center;}
#app.nav-collapsed .nav .ts-mini{display:grid;}   /* nur ein Theme-Toggle IN der Nav betroffen — der Topbar-Toggle bleibt unberührt */
#app.nav-collapsed .nav-lbl{opacity:0;max-width:0;margin-left:0;}
#app.nav-collapsed .nav .brand{opacity:0;max-width:0;overflow:hidden;}   /* nur Nav-Wortmarke, NICHT die im Footer */
#app.nav-collapsed .nav-sec{opacity:0;height:0;padding:0;margin:0;overflow:hidden;}
#app.nav-collapsed .nav a:hover .nav-tip,#app.nav-collapsed .nav .nav-a:hover .nav-tip{opacity:1;transform:translateY(-50%) translateX(0);}
/* eingeklappt: 44×44-Quadrat = GLEICHE Höhe wie ausgeklappt (Padding 9 wie expanded → kein Flackern,
   kein engeres Zusammenrücken, Icon bleibt links fix). Innenbreite 44 (72 − 2×14) == Icon 26 + 2×9. */
#app.nav-collapsed .nav a,#app.nav-collapsed .nav .nav-a{padding:9px;border-radius:11px;}
/* App-Drawer im Nav: FESTE Icon-Größe, linksbündig — bei Platz kommt ein Icon dazu (Buttons wachsen NICHT) */
.nav-drawer{display:grid;grid-template-columns:repeat(auto-fill,44px);justify-content:start;gap:6px;padding:2px 2px 4px;max-width:236px;animation:drawerin .28s var(--ease);}
@keyframes drawerin{from{opacity:0;}}
.nd-app{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .14s var(--ease),border-color .14s var(--ease),background .14s var(--ease);}
.nd-app:hover{color:var(--fg);border-color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 10%,transparent);}
.nd-app svg{width:19px;height:19px;}
/* Schnellzugriff mit echten Launcher-Apps (statt Tabler-Icon): Favicon (img, wie .app-ico) ODER
   Monogramm-Fallback (dieselbe Bg/Ink-Farblogik wie /apps, CANON §23) — keine ad-hoc Icons. */
.nd-app img{width:22px;height:22px;border-radius:6px;object-fit:cover;display:block;}
.nd-app.nd-mono{font-size:13px;font-weight:800;letter-spacing:-.02em;border-color:transparent;}
.nav-drawer-toggle{display:none;}
#app.nav-collapsed .nav-drawer,#app.nav-collapsed .nav-drawer-head{display:none;}
#app.nav-animating .nav-drawer{display:none;}   /* kein Spalten-Reflow während der Klapp-Animation */
#app.nav-collapsed .nav-drawer-toggle{display:grid;place-items:center;width:44px;height:44px;margin:2px auto;border-radius:11px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .14s var(--ease),border-color .14s var(--ease);}
#app.nav-collapsed .nav-drawer-toggle:hover{color:var(--fg);border-color:var(--hero-a);}
.nav-drawer-toggle svg{width:20px;height:20px;}
/* Popover (Flyout): DIESELBEN Icon-Buttons, feste Größe, kein Text, Tooltip — Breite passt sich an */
.nd-pop{position:fixed;z-index:130;display:none;width:auto;padding:12px;border-radius:16px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);animation:ndpop .16s var(--ease);}
@keyframes ndpop{from{opacity:0;transform:translateX(-6px) scale(.98);}}
.nd-pop.open{display:block;}
.nd-pop-h{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint);margin:0 2px 10px;}
.nd-grid{display:grid;grid-template-columns:repeat(4,44px);gap:6px;}
/* Gebrandetes Custom-Dropdown (HSL.select) */
.hsl_select{position:relative;display:block;}
.hsl_select_btn{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg);font:inherit;font-size:13.5px;cursor:pointer;transition:border-color .15s var(--ease);}
.hsl_select_btn:hover,.hsl_select.open .hsl_select_btn{border-color:var(--hero-a);}
.hsl_select_lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hsl_select_btn>svg{width:15px;height:15px;flex:0 0 auto;color:var(--fg-dim);transform:rotate(90deg);transition:transform .2s var(--ease);}
.hsl_select.open .hsl_select_btn>svg{transform:rotate(-90deg);}
.hsl_select_menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);max-height:260px;overflow-y:auto;}
.hsl_select.open .hsl_select_menu,.hsl_select_menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.hsl_select_opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:none;background:none;color:var(--fg-dim);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease);}
.hsl_select_opt:hover{background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);}
.hsl_select_opt.sel{color:var(--fg);background:color-mix(in srgb,var(--hero-a) 13%,transparent);font-weight:650;}
/* Creatable-Combobox (HSL.select mit o.creatable): Freitext-Input + Options-Dropdown. Der Wert liegt in einem echten
   <input name=...>, damit ein umgebendes <form> ihn nativ mit-postet; das Chevron oeffnet die Liste, Tippen filtert. */
.hsl_select_create{position:relative;display:block;}
.hsl_select_inp{width:100%;padding-right:36px;}
.hsl_select_caret{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;padding:0 11px;background:none;border:none;cursor:pointer;color:var(--fg-dim);}
.hsl_select_caret>svg{width:15px;height:15px;transform:rotate(90deg);transition:transform .2s var(--ease);}
.hsl_select_create.open .hsl_select_caret>svg{transform:rotate(-90deg);}
.hsl_select_none{padding:8px 10px;font-size:12.5px;color:var(--fg-faint);line-height:1.5;}
.hsl_select_sub{display:block;font-size:11.5px;color:var(--fg-faint);margin-top:1px;}   /* zweite Treffer-Zeile der Such-Combobox (E-Mail, Artikelnr. ...) */
.hsl_select_opt:has(.hsl_select_sub){flex-direction:column;align-items:flex-start;gap:1px;}   /* :has statt Ahnen-Selektor -- das Menue ist beim Oeffnen an #app portalt */
span.hsl_select_caret{pointer-events:none;}   /* Deko-Lupe (ohne browse) ist kein Toggle */
.hsl_select_search button.hsl_select_caret{cursor:pointer;}   /* browse: Lupe oeffnet den kompletten Katalog */
.hsl_select_info{position:absolute;top:50%;right:34px;transform:translateY(-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--fg-dim);transition:color .14s var(--ease),background .14s var(--ease);}
.hsl_select_info:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);}
.hsl_select_info svg{width:15px;height:15px;}
.hsl_select_search.has-detail .hsl_select_inp{padding-right:64px;}   /* Platz fuer (i) + Lupe */
.hsl_select_smenu{max-height:none;overflow:visible;padding:6px 6px 0;}   /* Scrollen uebernimmt die innere Box, der Zaehler-Fuss bleibt stehen */
.hsl_select_sbox{max-height:232px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;}
.hsl_select_footrow{padding:7px 6px;margin-top:4px;border-top:1px solid var(--border);font-size:11.5px;color:var(--fg-faint);font-variant-numeric:tabular-nums;}
/* Neuanlage-CTA im Dropdown-Fuss (Kanon §13, 0.24.4): fest verankert, uebernimmt den Suchbegriff */
.hsl_select_createcta{display:flex;align-items:center;gap:8px;width:100%;margin-top:4px;padding:10px 10px;border:none;border-top:1px solid var(--border);background:none;color:var(--hero-a);font:inherit;font-size:13px;font-weight:750;text-align:left;cursor:pointer;border-radius:0 0 10px 10px;transition:background .14s var(--ease);}
.hsl_select_createcta:hover{background:color-mix(in srgb,var(--hero-a) 10%,transparent);}
.hsl_select_createcta svg{width:15px;height:15px;flex:0 0 auto;}
.hsl_select_createcta b{font-weight:800;}
/* Diff-Tabelle (Kanon §29, 0.25.0): HSL.diffTable — nur Unterschiede, drei Zustaende */
.hsl_diff table{width:100%;border-collapse:collapse;font-size:13px;}
.hsl_diff th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);padding:8px 12px;background:color-mix(in srgb,var(--hero-c) 22%,transparent);}
.hsl_diff td{padding:9px 12px;border-top:1px solid var(--border);}
.hsl_diff .old{color:var(--fg-faint);}
.hsl_diff tr.chg td{background:color-mix(in srgb,var(--co-yellow) 8%,transparent);}
.hsl_diff tr.add td{background:color-mix(in srgb,var(--co-green) 9%,transparent);}
.hsl_diff tr.del td{background:color-mix(in srgb,var(--co-red) 8%,transparent);}
.hsl_diff tr.del .old{text-decoration:line-through;}
.hsl_diff .arr{color:var(--fg-faint);padding:0 6px;}
.hsl_diff .tag{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;}
.hsl_diff tr.chg .tag{color:var(--co-yellow);background:color-mix(in srgb,var(--co-yellow) 14%,transparent);}
.hsl_diff tr.add .tag{color:var(--co-green);background:color-mix(in srgb,var(--co-green) 14%,transparent);}
.hsl_diff tr.del .tag{color:var(--co-red);background:color-mix(in srgb,var(--co-red) 14%,transparent);}
.hsl_diff_none{padding:10px 12px;font-size:12.5px;color:var(--fg-faint);}
/* Gespeicherte Ansichten (Kanon §8e, 0.26.0): Chip-Leiste ueber dem Listen-Kopf */
.lv-views{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px 0;}
.lv-viewchip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;transition:.15s var(--ease);}
.lv-viewchip:hover{color:var(--fg);border-color:var(--hero-a);}
.lv-viewchip.on{color:var(--hero-a);border-color:color-mix(in srgb,var(--hero-a) 55%,transparent);background:color-mix(in srgb,var(--hero-a) 11%,transparent);}
.lv-viewchip svg{width:13px;height:13px;}
.lv-viewchip .vx{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;margin-right:-5px;}
.lv-viewchip .vx:hover{background:color-mix(in srgb,var(--co-red) 18%,transparent);color:var(--co-red);}
.lv-viewchip .vx svg{width:10px;height:10px;}
/* Tags-Eingabe (Kanon §13c, 0.26.0) */
.hsl_tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px;padding:4px 8px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);cursor:text;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.hsl_tags:focus-within{border-color:var(--hero-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 24%,transparent);}
.hsl_tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 4px 0 10px;border-radius:999px;background:color-mix(in srgb,var(--hero-a) 13%,transparent);color:var(--hero-a);font-size:12px;font-weight:700;}
.hsl_tag button{border:none;background:none;color:inherit;cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;padding:0;}
.hsl_tag button:hover{background:color-mix(in srgb,var(--hero-a) 22%,transparent);}
.hsl_tag svg{width:11px;height:11px;}
.hsl_tags>input{border:none;background:none;outline:none;color:var(--fg);font:inherit;font-size:13px;flex:1;min-width:120px;height:24px;}
/* Zeitraum-Picker (Kanon §13d, 0.26.0) */
.hsl_range{display:inline-block;}
.hsl_range_btn{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 13px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg);font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s var(--ease);}
.hsl_range_btn:hover{border-color:var(--hero-a);}
.hsl_range_btn svg{width:15px;height:15px;color:var(--fg-dim);}
.hsl_range_pop{display:grid;grid-template-columns:160px 1fr;border-radius:12px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);overflow:hidden;}
.hsl_range_pre{display:flex;flex-direction:column;padding:6px;border-right:1px solid var(--border);}
.hsl_range_pre button{text-align:left;border:none;background:none;color:var(--fg-dim);font:inherit;font-size:13px;padding:8px 10px;border-radius:8px;cursor:pointer;}
.hsl_range_pre button:hover{background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);}
.hsl_range_pre button.on{color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 11%,transparent);font-weight:700;}
.hsl_range_cust{padding:12px;display:flex;flex-direction:column;gap:9px;min-width:220px;}
/* Undo-Toast (Kanon §31, 0.26.0): Loesch-Optik -- roter Rand, roter Ablauf-Balken */
.hsl_undo{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%);z-index:300;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:13px;background:var(--bg-card);border:1px solid color-mix(in srgb,var(--co-red) 60%,transparent);box-shadow:var(--e2),0 0 0 3px color-mix(in srgb,var(--co-red) 16%,transparent);transition:transform .25s var(--ease);overflow:hidden;}
.hsl_undo.on{transform:translateX(-50%) translateY(0);}
.hsl_undo .ui{width:16px;height:16px;flex:0 0 auto;color:var(--co-red);}
.hsl_undo .ut{font-size:13px;}
.hsl_undo .ub2{height:30px;}
.hsl_undo .ub{position:absolute;left:0;bottom:0;height:2.5px;background:var(--co-red);width:100%;transform-origin:left;}
@keyframes hslundorun{from{transform:scaleX(1);}to{transform:scaleX(0);}}
/* Baum-Liste (Kanon §32, 0.26.0) */
.hsl_tree{font-size:13.5px;}
.hsl_tree ul{list-style:none;margin:0;padding-left:22px;}
.hsl_tree>ul{padding-left:0;}
.hsl_tree li{margin:1px 0;}
.hsl_tree .tn{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:9px;cursor:pointer;color:var(--fg-dim);border:1px solid transparent;transition:background .14s var(--ease),color .14s var(--ease);}
.hsl_tree .tn:hover{background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg);}
.hsl_tree .tn.on{color:var(--fg);background:color-mix(in srgb,var(--hero-a) 11%,transparent);border-color:color-mix(in srgb,var(--hero-a) 30%,transparent);}
.hsl_tree .tchev{width:14px;height:14px;flex:0 0 auto;transition:transform .18s var(--ease);color:var(--fg-faint);}
.hsl_tree li.open>.tn .tchev{transform:rotate(90deg);}
.hsl_tree li:not(.haskids)>.tn .tchev{visibility:hidden;}
.hsl_tree .tico{width:15px;height:15px;flex:0 0 auto;color:var(--fg-faint);}
.hsl_tree .tcount{margin-left:auto;font-size:11px;color:var(--fg-faint);font-variant-numeric:tabular-nums;}
.hsl_tree .tload{font-size:12px;color:var(--fg-faint);padding-left:9px;}
.hsl_tree li>ul{display:none;}
.hsl_tree li.open>ul{display:block;}
/* Hintergrund-Jobs (Kanon §33, 0.26.0) */
.hsl_jobs{position:fixed;right:20px;bottom:20px;z-index:290;display:flex;flex-direction:column;gap:10px;width:290px;}
.hsl_job{display:flex;flex-direction:column;gap:8px;padding:13px 15px;border-radius:14px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);transition:opacity .3s var(--ease),transform .3s var(--ease);}
.hsl_job.bye{opacity:0;transform:translateY(8px);}
.hsl_job .jh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:750;}
.hsl_job .jh svg{width:15px;height:15px;color:var(--hero-a);}
.hsl_job .js2{font-size:12px;color:var(--fg-dim);font-variant-numeric:tabular-nums;}
/* Wiedervorlagen (Kanon §34, 0.27.0) */
.hsl_fu{display:flex;flex-direction:column;gap:8px;}
.hsl_fu_item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;border:1px solid var(--border);background:color-mix(in srgb,var(--fg) 3%,transparent);}
.hsl_fu_item.due{border-color:color-mix(in srgb,var(--co-red) 45%,transparent);background:color-mix(in srgb,var(--co-red) 7%,transparent);}
.hsl_fu_item.today{border-color:color-mix(in srgb,var(--co-yellow) 45%,transparent);background:color-mix(in srgb,var(--co-yellow) 7%,transparent);}
.hsl_fu .fu-d{font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg-dim);flex:0 0 auto;}
.hsl_fu_item.due .fu-d{background:color-mix(in srgb,var(--co-red) 16%,transparent);color:var(--co-red);}
.hsl_fu_item.today .fu-d{background:color-mix(in srgb,var(--co-yellow) 18%,transparent);color:var(--co-yellow);}
.hsl_fu .fu-t{font-size:13px;flex:1;min-width:0;}
.hsl_fu .fu-t small{display:block;color:var(--fg-faint);font-size:11.5px;}
.hsl_fu_none{font-size:12.5px;color:var(--fg-faint);}
.hsl_fu_add{align-self:flex-start;margin-top:4px;}
/* Dubletten-Waechter (Kanon §35) */
.hsl_dupes{margin-top:10px;padding:11px 13px;border-radius:11px;border:1px solid color-mix(in srgb,var(--co-yellow) 50%,transparent);background:color-mix(in srgb,var(--co-yellow) 8%,transparent);display:flex;flex-direction:column;gap:8px;}
.hsl_dupes[hidden]{display:none;}
.hsl_dupes .dh{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:750;color:var(--co-yellow);}
.hsl_dupes .dh svg{width:14px;height:14px;flex:0 0 auto;}
.hsl_dupes .drow{display:flex;align-items:center;gap:10px;font-size:13px;}
.hsl_dupes .ds{color:var(--fg-faint);font-size:11.5px;}
.hsl_dupes .dlnk{margin-left:auto;color:var(--hero-a);font-size:12.5px;font-weight:650;text-decoration:none;white-space:nowrap;}
/* Zusammenfuehren (Kanon §35b) */
.hsl_merge{display:grid;grid-template-columns:150px 1fr 1fr;border:1px solid var(--border);border-radius:12px;overflow:hidden;font-size:13px;}
.hsl_merge>div{padding:9px 13px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;min-height:40px;}
.hsl_merge>.mh{border-top:none;background:color-mix(in srgb,var(--hero-c) 22%,transparent);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);}
.hsl_merge .ml{color:var(--fg-dim);font-size:12px;}
.hsl_merge .mc{cursor:pointer;transition:background .14s var(--ease);}
.hsl_merge .mc:hover{background:color-mix(in srgb,var(--fg) 5%,transparent);}
.hsl_merge .mc.pick{background:color-mix(in srgb,var(--co-green) 10%,transparent);box-shadow:inset 2.5px 0 0 var(--co-green);}
.hsl_merge .mc.diff{font-weight:650;}
.hsl_merge .mdot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;flex:0 0 auto;}
.hsl_merge .mc.pick .mdot{background:var(--co-green);border-color:var(--co-green);}
.hsl_merge .mc.pick .mdot::after{content:'';width:6px;height:3px;border:1.6px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg);}
/* Facetten (Kanon §36) */
.hsl_facets .fgrp{margin-bottom:12px;}
.hsl_facets .fh{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:5px;}
.hsl_facets .fmode{font-size:9px;font-weight:800;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--hero-a) 14%,transparent);color:var(--hero-a);margin-left:4px;vertical-align:1px;}
.hsl_facets .fac{display:flex;align-items:center;gap:8px;width:100%;padding:6px 9px;border-radius:8px;border:none;background:none;color:var(--fg-dim);font:inherit;font-size:13px;cursor:pointer;text-align:left;}
.hsl_facets .fac:hover{background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg);}
.hsl_facets .fac.on{color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 10%,transparent);font-weight:700;}
.hsl_facets .fc{margin-left:auto;font-size:11px;color:var(--fg-faint);font-variant-numeric:tabular-nums;}
/* Rechte-Matrix (Kanon §37) */
.hsl_pmx{border-collapse:collapse;font-size:13px;}
.hsl_pmx th{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);padding:8px 12px;background:color-mix(in srgb,var(--hero-c) 22%,transparent);text-align:center;cursor:pointer;}
.hsl_pmx th:first-child{text-align:left;cursor:default;}
.hsl_pmx th:hover{color:var(--hero-a);}
.hsl_pmx td{border-top:1px solid var(--border);padding:6px 12px;text-align:center;}
.hsl_pmx td:first-child{text-align:left;color:var(--fg-dim);cursor:pointer;}
.hsl_pmx td:first-child:hover{color:var(--hero-a);}
.hsl_pmx .pcell{width:26px;height:26px;margin:0 auto;border-radius:8px;border:1.5px solid var(--border-strong);display:grid;place-items:center;cursor:pointer;transition:.13s var(--ease);background:color-mix(in srgb,var(--fg) 3%,transparent);}
.hsl_pmx .pcell:hover{border-color:var(--hero-a);}
.hsl_pmx .pcell.allow{background:color-mix(in srgb,var(--co-green) 16%,transparent);border-color:var(--co-green);color:var(--co-green);}
.hsl_pmx .pcell.deny{background:color-mix(in srgb,var(--co-red) 14%,transparent);border-color:var(--co-red);color:var(--co-red);}
.hsl_pmx .pcell svg{width:13px;height:13px;}
/* Detail-Drawer (Kanon §39) */
.hsl_drawer_ov{position:fixed;inset:0;z-index:248;background:rgba(6,4,9,.14);opacity:0;pointer-events:none;transition:opacity .2s var(--ease);}
.hsl_drawer_ov.on{opacity:1;pointer-events:auto;}
.hsl_drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:249;background:var(--bg-card);border-left:1px solid var(--border-strong);box-shadow:var(--e2);transform:translateX(102%);transition:transform .25s var(--ease);display:flex;flex-direction:column;}
.hsl_drawer.on{transform:translateX(0);}
.hsl_drawer .dw-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);}
.hsl_drawer .dw-h b{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hsl_drawer .dw-nav{display:flex;gap:4px;}
.hsl_drawer .dw-nav button{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-strong);background:none;color:var(--fg-dim);cursor:pointer;display:grid;place-items:center;}
.hsl_drawer .dw-nav button:hover{border-color:var(--hero-a);color:var(--fg);}
.hsl_drawer .dw-nav svg{width:14px;height:14px;}
.hsl_drawer .dw-b{padding:16px;overflow-y:auto;overscroll-behavior:contain;flex:1;display:flex;flex-direction:column;gap:13px;}
/* Genehmigungs-Kette (Kanon §40) */
.hsl_appr{display:flex;flex-direction:column;}
.hsl_appr .ap-step{display:flex;gap:12px;padding:2px 0;}
.hsl_appr .ap-rail{display:flex;flex-direction:column;align-items:center;width:26px;flex:0 0 auto;}
.hsl_appr .ap-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;color:var(--fg-faint);background:var(--bg-card);}
.hsl_appr .ap-dot svg{width:13px;height:13px;}
.hsl_appr .ap-line{width:2px;flex:1;background:var(--border-strong);min-height:14px;}
.hsl_appr .ap-step.ok .ap-dot{background:var(--co-green);border-color:var(--co-green);color:#fff;}
.hsl_appr .ap-step.cur .ap-dot{background:var(--hero-grad);border-color:transparent;color:#fff;}
.hsl_appr .ap-step.rej .ap-dot{background:var(--co-red);border-color:var(--co-red);color:#fff;}
.hsl_appr .ap-body{padding:2px 0 16px;flex:1;}
.hsl_appr .ap-body b{font-size:13.5px;}
.hsl_appr .apr{color:var(--fg-dim);font-size:12px;}
.hsl_appr .apw{display:block;color:var(--fg-faint);font-size:12px;margin-top:2px;}
.hsl_appr .ap-act{display:flex;gap:8px;margin-top:8px;}
/* Kalender (Kanon §41) */
.hsl_cal .cal-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.hsl_cal .cal-h b{font-size:15px;min-width:130px;text-align:center;}
.hsl_cal .cal-nav{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-strong);background:none;color:var(--fg-dim);cursor:pointer;display:grid;place-items:center;}
.hsl_cal .cal-nav:hover{border-color:var(--hero-a);color:var(--fg);}
.hsl_cal .cal-nav svg{width:14px;height:14px;}
.hsl_cal .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.hsl_cal .cal-dow{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);text-align:center;padding:4px 0;}
.hsl_cal .cal-d{min-height:72px;border:1px solid var(--border);border-radius:9px;padding:5px 7px;font-size:11.5px;color:var(--fg-faint);display:flex;flex-direction:column;gap:3px;background:color-mix(in srgb,var(--fg) 2%,transparent);cursor:pointer;}
.hsl_cal .cal-d.other{opacity:.35;cursor:default;}
.hsl_cal .cal-d.today{border-color:var(--hero-a);box-shadow:0 0 0 2px color-mix(in srgb,var(--hero-a) 22%,transparent);}
.hsl_cal .cal-d.today .dn{color:var(--hero-a);font-weight:800;}
.hsl_cal .cal-ev{font-size:10.5px;font-weight:650;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--hero-a) 13%,transparent);color:var(--hero-a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.hsl_cal .cal-ev.g{background:color-mix(in srgb,var(--co-green) 13%,transparent);color:var(--co-green);}
.hsl_cal .cal-ev.y{background:color-mix(in srgb,var(--co-yellow) 15%,transparent);color:var(--co-yellow);}
/* Verknuepfungen (Kanon §42) */
.hsl_rel{display:flex;flex-direction:column;gap:8px;}
.hsl_rel .rel-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);font-size:13px;}
.hsl_rel .rel-item>svg{width:15px;height:15px;color:var(--fg-faint);flex:0 0 auto;}
.hsl_rel .rl{cursor:pointer;flex:1;min-width:0;}
.hsl_rel .rl:hover{color:var(--hero-a);}
.hsl_rel .rs{color:var(--fg-faint);font-size:11.5px;}
.hsl_rel .rx{margin-left:auto;width:24px;height:24px;border-radius:7px;border:none;background:none;color:var(--fg-faint);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;}
.hsl_rel .rx:hover{color:var(--co-red);background:color-mix(in srgb,var(--co-red) 12%,transparent);}
.hsl_rel .rx svg{width:12px;height:12px;}
.hsl_rel_none{font-size:12.5px;color:var(--fg-faint);}
.hsl_rel_add{align-self:flex-start;margin-top:4px;}
/* KPI-Kachel (Kanon §43) */
.hsl_kpi{padding:15px 17px;display:flex;flex-direction:column;gap:6px;}
.hsl_kpi .kl{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-dim);}
.hsl_kpi .kv{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.hsl_kpi .kd{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;}
.hsl_kpi .kd.up{color:var(--co-green);}
.hsl_kpi .kd.dn{color:var(--co-red);}
.hsl_kpi .kd svg{width:12px;height:12px;}
.hsl_kpi .kdl{color:var(--fg-faint);font-weight:400;}
.hsl_kpi .kspk{height:26px;}
.hsl_kpi .kt{height:5px;border-radius:4px;background:color-mix(in srgb,var(--fg) 8%,transparent);overflow:hidden;}
.hsl_kpi .kt i{display:block;height:100%;border-radius:4px;background:var(--hero-grad);}
.hsl_kpi .ktl{font-size:11px;color:var(--fg-faint);}
/* Eingabe-Masken (Kanon §44): Rueckmeldung am .field */
.field .msk-ok{color:var(--co-green);font-size:12px;display:none;align-items:center;gap:5px;margin-top:4px;}
.field .msk-ok svg{width:12px;height:12px;}
.field .msk-err{display:none;margin-top:4px;}
.field.good .msk-ok{display:flex;}
.field.bad .msk-err{display:block;}
.field.bad .inp{border-color:var(--co-red);}
/* CSV-Import-Assistent (Kanon §38) */
.hsl_import .imp-map{display:grid;grid-template-columns:1fr 30px 1fr;gap:8px;align-items:center;max-width:540px;}
.hsl_import .imp-prev{font-size:12.5px;border-collapse:collapse;width:100%;}
.hsl_import .imp-prev th{text-align:left;padding:6px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-dim);background:color-mix(in srgb,var(--hero-c) 22%,transparent);}
.hsl_import .imp-prev td{padding:6px 10px;border-top:1px solid var(--border);}
.hsl_import .imp-prev tr.bad td{background:color-mix(in srgb,var(--co-red) 8%,transparent);}
.hsl_import .imp-err{color:var(--co-red);font-size:12px;}
/* Alarm-Regeln (Kanon §45) */
.hsl_rules{display:flex;flex-direction:column;gap:8px;}
.hsl_rules .rule{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:11px;font-size:13px;}
.hsl_rules .hsl_rules_list .rule{background:color-mix(in srgb,var(--fg) 3%,transparent);}
.hsl_rules .rmut{color:var(--fg-dim);}
.hsl_rules .inp{height:32px;min-width:120px;width:auto;}
.hsl_rules .radd{margin-left:auto;}
.hsl_rules .rico{width:14px;height:14px;color:var(--hero-a);flex:0 0 auto;}
.hsl_rules .rdel{margin-left:auto;width:24px;height:24px;border:none;background:none;color:var(--fg-faint);cursor:pointer;border-radius:7px;display:grid;place-items:center;}
.hsl_rules .rdel:hover{color:var(--co-red);background:color-mix(in srgb,var(--co-red) 12%,transparent);}
.hsl_rules .rdel svg{width:12px;height:12px;}
.hsl_rules_list{display:flex;flex-direction:column;gap:6px;}
/* Schnell-Auswertung (Kanon §46) */
.hsl_pivot_h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.hsl_pivot_h .rmut{color:var(--fg-dim);font-size:13px;}
.hsl_pivot_h .inp{height:32px;width:auto;min-width:130px;}
.hsl_pivot_b .blist-row{cursor:pointer;border-radius:8px;padding:2px 6px;margin:0 -6px;}
.hsl_pivot_b .blist-row:hover{background:color-mix(in srgb,var(--fg) 4%,transparent);}
/* Vollstaendigkeits-Score (Kanon §47) */
.hsl_complete{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.hsl_complete .hc-miss{display:flex;flex-direction:column;gap:7px;min-width:260px;flex:1;}
.hsl_complete .miss{display:flex;align-items:center;gap:9px;font-size:13px;padding:7px 11px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--co-yellow) 55%,transparent);background:color-mix(in srgb,var(--co-yellow) 6%,transparent);}
.hsl_complete .miss.done{border-style:solid;border-color:color-mix(in srgb,var(--co-green) 50%,transparent);background:color-mix(in srgb,var(--co-green) 8%,transparent);}
.hsl_complete .miss svg{width:13px;height:13px;flex:0 0 auto;}
.hsl_complete .miss .hc-fill{margin-left:auto;height:26px;font-size:12px;min-width:0;padding:0 10px;}
/* Feld-Historie (Kanon §48): Button im Input-Wrapper = exakt zentriert */
.hsl_fh_wrap{position:relative;display:block;}
.hsl_fh_btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;background:none;color:var(--fg-faint);cursor:pointer;border-radius:7px;display:grid;place-items:center;}
.hsl_fh_btn:hover{color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 10%,transparent);}
.hsl_fh_btn svg{width:14px;height:14px;}
.hsl_fh_pop{padding:10px 12px;border-radius:12px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);min-width:300px;max-width:340px;font-size:12.5px;}
.hsl_fh_pop .fh-l{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:6px;}
.hsl_fh_pop .fh-none{color:var(--fg-faint);font-size:12px;}
.hsl_fh_pop .fhr{display:flex;gap:8px;align-items:baseline;padding:6px 2px;border-top:1px solid var(--border);}
.hsl_fh_pop .fhr:first-of-type{border-top:none;}
.hsl_fh_pop .who{font-weight:700;flex:0 0 auto;}
.hsl_fh_pop .fhv{min-width:0;}
.hsl_fh_pop .when{color:var(--fg-faint);font-size:11px;margin-left:auto;white-space:nowrap;}
.hsl_fh_pop .old2{color:var(--fg-faint);text-decoration:line-through;}
/* Anhaenge (Kanon §49) */
.hsl_att{display:flex;flex-direction:column;gap:8px;}
.hsl_att .att{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;font-size:13px;}
.hsl_att .ai{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero-a) 12%,transparent);color:var(--hero-a);flex:0 0 auto;}
.hsl_att .ai svg{width:15px;height:15px;}
.hsl_att .an{flex:1;min-width:0;}
.hsl_att .an small{display:block;color:var(--fg-faint);font-size:11px;}
.hsl_att .ad{width:24px;height:24px;border-radius:7px;color:var(--fg-faint);display:grid;place-items:center;flex:0 0 auto;}
.hsl_att .ad:hover{color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 10%,transparent);}
.hsl_att .ad svg{width:13px;height:13px;}
.hsl_att .ax{width:24px;height:24px;border:none;background:none;color:var(--fg-faint);cursor:pointer;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;}
.hsl_att .ax:hover{color:var(--co-red);background:color-mix(in srgb,var(--co-red) 12%,transparent);}
.hsl_att .ax svg{width:12px;height:12px;}
.hsl_att_none{font-size:12.5px;color:var(--fg-faint);}
.hsl_att_add{align-self:flex-start;margin-top:4px;cursor:pointer;}
/* Feature-Tour (Kanon §50): Karte SOLIDE (var(--bg-card)) — nie transparent */
.hsl_tour_ring{position:fixed;z-index:401;border-radius:14px;box-shadow:0 0 0 3px var(--hero-a),0 0 0 9999px rgba(6,4,9,.45);pointer-events:none;transition:all .3s var(--ease);display:none;}
.hsl_tour_card{position:fixed;z-index:402;top:-999px;width:300px;padding:14px 16px;border-radius:14px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);font-size:13px;opacity:0;transition:opacity .2s var(--ease);}
.hsl_tour_card.on{opacity:1;}
.hsl_tour_card b{display:block;margin-bottom:4px;}
.hsl_tour_card .tb{color:var(--fg-dim);font-size:12.5px;display:block;}
.hsl_tour_card .tnav{display:flex;align-items:center;gap:8px;margin-top:10px;}
.hsl_tour_card .tnav .btn{height:30px;min-width:0;}
.hsl_tour_card .tdots{display:flex;gap:4px;margin-right:auto;}
.hsl_tour_card .tdots i{width:6px;height:6px;border-radius:50%;background:var(--border-strong);}
.hsl_tour_card .tdots i.on{background:var(--hero-a);}
/* Busy-Schleier (Kanon §9/§9b, 0.30.0) */
.modal-busy{position:absolute;inset:0;border-radius:inherit;background:color-mix(in srgb,var(--bg-card) 55%,transparent);backdrop-filter:blur(1.5px);display:none;z-index:5;}
.modal-busy.on{display:block;}
.modal-busy .hsl_prog{position:absolute;left:0;right:0;top:0;border-radius:0;}
.hsl_busy{position:fixed;inset:0;z-index:640;background:var(--ov-bg);backdrop-filter:var(--ov-blur);display:none;align-items:center;justify-content:center;}
.hsl_busy.on{display:flex;}
.hsl_busy .hb-card{min-width:260px;padding:18px 20px 16px;border-radius:14px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);display:flex;flex-direction:column;gap:12px;}
.hsl_busy .hb-l{font-size:13px;color:var(--fg-dim);text-align:center;}
.dropzone.uploading{pointer-events:none;opacity:.75;}   /* waehrend des Transfers nicht erneut ausloesbar */
/* ListView-Defaults (Kanon §8, 0.29.0): Spalten-Menue, Export, Gruppieren-nach im Listenkopf */
.lv-search{gap:6px;}
.lv-search .lv-gfilter{min-width:0;width:170px;height:32px;}
.lv-search .lv-grpsel,.lv-grpsel{height:32px;width:auto;min-width:118px;max-width:190px;font-size:12.5px;padding:0 9px;}
.lv-colpop{display:flex;flex-direction:column;gap:2px;min-width:210px;padding:8px;border-radius:12px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);}
.lv-colpop .colrow{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;font-size:13px;}
.lv-colpop .colrow:hover{background:color-mix(in srgb,var(--fg) 5%,transparent);}
.lv-expmodal{display:flex;flex-direction:column;gap:12px;}   /* explizit — Luft um Titelzeile und Hinweis */
.lv-expmodal .explist{display:flex;flex-direction:column;gap:10px;padding:2px 0;}
.lv-expmodal .exprow{display:flex;align-items:center;justify-content:flex-start;gap:10px;font-size:13.5px;cursor:pointer;text-align:left;}   /* .chk zentriert von Haus aus — hier linksbuendig */
.lv-colsmodal .colslist{display:flex;flex-direction:column;gap:4px;}
.lv-colsmodal .colsrow{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;border:1px solid var(--border);background:color-mix(in srgb,var(--fg) 3%,transparent);font-size:13px;}
.lv-colsmodal .colsrow.drag{opacity:.55;border-style:dashed;}
.lv-colsmodal .grip{cursor:grab;color:var(--fg-faint);display:grid;place-items:center;width:18px;}
.lv-colsmodal .grip svg{width:14px;height:14px;transform:rotate(90deg);}
.lv-colsmodal .cl{flex:1;min-width:0;}
.lv-colsmodal .flexbadge{font-size:9px;font-weight:800;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--co-blue) 14%,transparent);color:var(--co-blue);margin-left:4px;vertical-align:1px;}
.lv-colsmodal .cw{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--fg-faint);}
.lv-colsmodal .cw input{width:72px;height:28px;min-width:0;padding:0 8px;text-align:right;}
.lv-colsmodal .isflex .chk input:disabled+span{opacity:.45;cursor:not-allowed;}
/* Kommentare (Kanon §51, 0.29.0) */
.hsl_cmts_list{display:flex;flex-direction:column;gap:12px;}
.hsl_cmts .cmt{display:flex;gap:10px;}
.hsl_cmts .cav{width:30px;height:30px;border-radius:50%;background:var(--hero-grad);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 auto;}
.hsl_cmts .cb{flex:1;min-width:0;padding:12px 15px;border-radius:11px;background:color-mix(in srgb,var(--fg) 4%,transparent);border:1px solid var(--border);font-size:13px;line-height:1.5;}
.hsl_cmts .ch{display:flex;gap:8px;align-items:baseline;margin-bottom:4px;}
.hsl_cmts .ch b{font-size:12.5px;}
.hsl_cmts .ch span{font-size:11px;color:var(--fg-faint);}
.hsl_cmts .mention{color:var(--hero-a);font-weight:700;}
.hsl_cmts_none{font-size:12.5px;color:var(--fg-faint);}
.hsl_cmts_in{display:flex;gap:10px;align-items:flex-start;margin-top:14px;}
.hsl_cmts_in .taw{position:relative;flex:1;min-width:0;display:block;}
.hsl_cmts_in textarea{display:block;width:100%;min-height:60px;height:auto;resize:none;padding:12px 46px 12px 15px;line-height:1.5;}   /* resize:none — der native Griff kollidierte mit dem Senden-Knopf */   /* display:block — sonst schiebt der Inline-Baseline-Spalt den Senden-Knopf unter das Feld */
.hsl_cmts_in .hsl_cmts_send{position:absolute!important;right:7px;bottom:9px;color:var(--hero-a);}   /* !important + Verschachtelung: hsl.theme.js haengt .glow (position:relative) an Icon-Buttons */
.hsl_cmts_send:hover{background:color-mix(in srgb,var(--hero-a) 12%,transparent);}
/* Praesenz + Sperre (Kanon §52, 0.29.0) */
.hsl_presence{display:inline-flex;align-items:center;}
.hsl_presence .pav{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;border:2px solid var(--bg-card);margin-left:-6px;}
.hsl_presence .pav:first-child{margin-left:0;}
.hsl_presence .pav.editing{box-shadow:0 0 0 2px var(--co-yellow);}
.hsl_lockbar{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:11px;border:1px solid color-mix(in srgb,var(--co-yellow) 50%,transparent);background:color-mix(in srgb,var(--co-yellow) 8%,transparent);font-size:13px;}
.hsl_lockbar>svg{width:15px;height:15px;color:var(--co-yellow);flex:0 0 auto;}
.hsl_lockbar span{flex:1;min-width:0;}
/* Papierkorb (Kanon §53, 0.29.0) */
.hsl_trash{display:flex;flex-direction:column;gap:8px;}
.hsl_trash .trash-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;border:1px solid var(--border);font-size:13px;}
.hsl_trash .ti{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg-dim);flex:0 0 auto;}
.hsl_trash .ti svg{width:15px;height:15px;}
.hsl_trash .tn2{flex:1;min-width:0;}
.hsl_trash .tn2 small{display:block;color:var(--fg-faint);font-size:11px;}
.hsl_trash .ta2{display:flex;gap:6px;}
.hsl_trash .tr-del{color:var(--co-red);}
.hsl_trash_none{font-size:12.5px;color:var(--fg-faint);}
/* Druck (Kanon §30, 0.25.0): weisses Blatt statt Glas; .print-area = einziger Druckinhalt; .no-print faellt weg */
@media print{
  #app::before,#app::after{display:none!important;}
  .nav,.topbar,.foot,.hsl_savebar,.no-print,.lv-head,.lv-foot,.bulkbar{display:none!important;}
  #app,#app.light{background:#fff!important;color:#000!important;}
  .card,.glass{background:#fff!important;box-shadow:none!important;border:1px solid #ddd!important;backdrop-filter:none!important;}
  body.hsl-printing *{visibility:hidden!important;}
  body.hsl-printing .print-area,body.hsl-printing .print-area *{visibility:visible!important;}
  body.hsl-printing .print-area{position:absolute!important;left:0;top:0;width:100%;}
}
.hsl_select_footrow b{color:var(--fg-dim);font-weight:650;}
.hsl_select_pick{position:absolute;top:50%;right:32px;transform:translateY(-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:none;color:var(--fg-dim);cursor:pointer;transition:color .14s var(--ease),background .14s var(--ease);}
.hsl_select_pick:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);}
.hsl_select_pick svg{width:15px;height:15px;}
.hsl_select_search.has-picker .hsl_select_inp{padding-right:64px;}
.hsl_select_search.has-picker .hsl_select_info{right:60px;}
.hsl_select_search.has-picker.has-detail .hsl_select_inp{padding-right:92px;}
/* 0.24.2: Such-Combobox — die Icons (Lupe/Katalog/(i)) sind FLEX-NachbARN des Inputs statt Overlays:
   der Text wird an der Elementgrenze HART abgeschnitten und kann nie hinter die Icons scrollen
   (Input-Text scrollt in Browsern durch die padding-Zone — padding-right allein reicht nicht).
   Die Huelle traegt den Input-Look (Fokus via :focus-within), das innere Feld ist rahmenlos.
   order stellt die gewohnte Sichtreihenfolge (i) · Katalog · Lupe her (DOM-Reihenfolge weicht ab). */
.hsl_select_search{display:flex;align-items:center;position:relative;height:34px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.hsl_select_search:hover:not(:focus-within){border-color:color-mix(in srgb,var(--hero-a) 55%,var(--border-strong));box-shadow:0 0 0 1px color-mix(in srgb,var(--hero-a) 30%,transparent);}
.hsl_select_search:focus-within{border-color:var(--hero-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 24%,transparent);}
.hsl_select_search .hsl_select_inp,.hsl_select_search.has-detail .hsl_select_inp,.hsl_select_search.has-picker .hsl_select_inp,.hsl_select_search.has-picker.has-detail .hsl_select_inp{flex:1 1 auto;min-width:0;width:auto;height:100%;border:none;background:none;box-shadow:none;padding-right:6px;}
.hsl_select_search .hsl_select_inp:focus,.hsl_select_search .hsl_select_inp:hover{outline:none;box-shadow:none;border:none;}
.hsl_select_search .hsl_select_caret{position:static;order:4;height:100%;flex:0 0 auto;}
.hsl_select_search .hsl_select_pick,.hsl_select_search .hsl_select_info{position:static;transform:none;flex:0 0 auto;margin-right:2px;}
.hsl_select_search .hsl_select_pick{order:3;right:auto;}
.hsl_select_search .hsl_select_info,.hsl_select_search.has-picker .hsl_select_info{order:2;right:auto;}
.lv tr.is-current td{background:color-mix(in srgb,var(--hero-a) 10%,transparent);}
.lv tr.is-current td:first-child{box-shadow:inset 3px 0 0 var(--hero-a);}   /* Picker: die aktuelle Combo-Auswahl ist vormarkiert */
/* Logo bleibt an fester Position (keine justify-content-Änderung → kein Springen beim Klappen) */

.main{display:flex;flex-direction:column;min-width:0;}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px 26px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hero-a) 8%,transparent),transparent 82%),color-mix(in srgb,var(--bg) 74%,transparent);
  backdrop-filter:blur(11px) saturate(1.25);-webkit-backdrop-filter:blur(11px) saturate(1.25);border-bottom:1px solid var(--border);}
/* heusel.one Shell-Modus (Spec §4): die Shell stellt Header + Fußzeile — die App blendet ihre aus.
   Die App-Nav bleibt (In-App-Navigation), nur das doppelte Chrome verschwindet. */
#app.shell-one .topbar, #app.shell-one .foot { display: none; }
/* heusel.one-Widget-Kachel (Spec §5): Zeilen wie im Session-Mockup. Titel + Metriken nutzen
   das KPI-Vokabular (.kpi-label/.kpi-num, s. Section framing) — kein privates Typo-Set, damit
   Token-/Kontrast-Fixes am KPI-Vokabular auch hier greifen; eigen sind nur Kachel-Maß, die
   kompakte Zahl und die hsl_-gepräfixte Zeile (keine nackten Klassen wie „big" im Inventar). */
hsl-one-widget{display:flex;flex-direction:column;gap:6px;padding:14px}
hsl-one-widget h5{margin:0}
hsl-one-widget .hsl_one_row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dashed color-mix(in srgb, currentColor 12%, transparent)}
hsl-one-widget .hsl_one_row:last-child{border-bottom:none}
hsl-one-widget .kpi-num{font-size:20px;font-weight:700}
/* <hsl-documents base can-share can-delete> — Dokumente/Anhänge je Entität (CANON §49; Vorschlag
   2026-07-23, backend-agnostisches base-Proxy-Modell). Die Komponente stempelt sich zu .card.glass.hsl_docs:
   Titel = .kpi-label, Upload = <hsl-upload>, Liste = die BESTEHENDEN .filelist/.fileitem-Styles
   (Typ-Icon · Name · Größe · Aktionen). Kein eigenes Zeilen-Vokabular mehr nötig. */
hsl-documents{display:flex;flex-direction:column;gap:10px}
hsl-documents h5{margin:0}
hsl-documents .docs-list{min-height:0}
hsl-documents[preview] .fileitem .fn{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:var(--fg);text-align:left;}   /* Name als Button (Vorschau) — sieht aus wie Text */
hsl-documents[preview] .fileitem .fn:hover{text-decoration:underline;}
/* Inline-Vorschau im Slide-in (HSL.drawer): Bild skaliert, Dokument im iframe (verallg. aus heusel.share). */
.hsl_doc_preview{display:flex;flex-direction:column;min-height:0;flex:1;}
.hsl_doc_stage{flex:1;min-height:340px;border:1px solid var(--border);border-radius:8px;overflow:auto;background:color-mix(in srgb,var(--fg) 3%,transparent);display:flex;align-items:center;justify-content:center;}
.hsl_doc_frame{width:100%;height:100%;min-height:340px;border:0;display:block;}
.hsl_doc_img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.ptitle{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:750;letter-spacing:-.015em;flex:1;}
/* Zurück-Pfeil im Header — erscheint nur auf Unterseiten */
.topback{display:none;width:34px;height:34px;flex:0 0 auto;place-items:center;border-radius:9px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease);margin-right:2px;}
.topback:hover{color:var(--fg);border-color:var(--hero-a);}
.topback svg{width:16px;height:16px;transform:rotate(180deg);}
#app.subpage .topback{display:grid;}
.topreload{display:grid;width:36px;height:36px;flex:0 0 auto;place-items:center;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease);}
.topreload:hover{color:var(--fg);border-color:var(--hero-a);}
.topreload svg{width:16px;height:16px;}
.topreload.spin svg{animation:reloadspin .6s var(--ease);}
@keyframes reloadspin{to{transform:rotate(360deg);}}
/* Unterseiten-Inhalt: ersetzt Sektionen + Tabbar, solange eine Ebene offen ist */
.subpage-view{display:none;flex-direction:column;gap:var(--gap);}
#app.subpage .subpage-view{display:flex;animation:subpagein .22s var(--ease);}
#app.subpage .content>section{display:none;}
#app.subpage .mocknav-wrap{display:none;}
@keyframes subpagein{from{opacity:0;transform:translateY(8px);}}
.sp-crumb{font-size:12px;color:var(--fg-dim);font-weight:600;}
.ptitle>svg{width:20px;height:20px;color:var(--fg-dim);}
.itip{width:19px;height:19px;color:var(--fg-faint);}
.controls{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end;}
.ctl{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;transition:.18s var(--ease);}
.ctl:hover{color:var(--fg);border-color:var(--hero-a);}
.ctl svg{width:16px;height:16px;}
.swatch{width:15px;height:15px;border-radius:5px;background:var(--hero-grad);}
/* Profil-Menü (Avatar → Popover: Name/E-Mail + Abmelden) — CANON §7 (hsl-profile-menu) */
.hsl_profile{position:relative;flex:0 0 auto;display:inline-flex;}
.hsl_profile_menu{position:absolute;top:calc(100% + 10px);right:0;min-width:232px;max-width:min(320px,calc(100vw - 20px));max-height:calc(100vh - 84px - var(--footh));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;z-index:60;padding:6px;border-radius:14px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);}
.hsl_profile.open .hsl_profile_menu{opacity:1;transform:translateY(0);pointer-events:auto;}
.hsl_profile_id{display:flex;align-items:center;gap:11px;padding:9px 10px 11px;border-bottom:1px solid var(--border);margin-bottom:5px;}
.hsl_profile_tx{min-width:0;}
.hsl_profile_name{font-size:13.5px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hsl_profile_mail{font-size:12px;color:var(--fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hsl_profile_menu button,.hsl_profile_menu a:not(.hsl_avatar){display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;border:none;background:none;color:var(--fg-dim);font:inherit;font-size:13px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease);}   /* :not(.hsl_avatar): der Avatar-Link im Kopf bleibt rund (sonst weitet die Zeilen-Regel ihn zum Vollbreit-Button) */
.hsl_profile_menu button svg,.hsl_profile_menu a svg{width:16px;height:16px;flex:0 0 auto;}
.hsl_profile_menu button:hover,.hsl_profile_menu a:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);}
.hsl_profile_menu .dgr:hover{background:color-mix(in srgb,var(--co-red) 16%,transparent);color:var(--co-red);}
/* Kopfzeile: Name (Link ins Profil, langer Name → Ellipsis mit Farb-Transition) links, Abmelden-Button rechts, eine Zeile */
.hsl_profile_head{display:flex;align-items:center;gap:10px;padding:7px 8px 8px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.hsl_profile_menu a.hsl_profile_name{flex:1 1 auto;min-width:0;width:auto;padding:0;font-size:13.5px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;transition:color .16s var(--ease);}
.hsl_profile_menu a.hsl_profile_name:hover{color:var(--hero-a);background:none;}
.hsl_profile_menu button.hsl_profile_logout{flex:0 0 auto;width:auto;padding:7px;line-height:0;}
/* Schnellstart (CANON §7): Mini-Kachelraster der User-Apps unter „Abmelden" (heusel.id apps-Claim).
   Kachel-Icon = .app-ico aus dem Launcher (nur kleiner skaliert) — keine zweite Icon-Optik. */
.hsl_profile_apps{margin-top:2px;padding-top:2px;}
.hsl_profile_apps_grp{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);padding:8px 10px 2px;}
.hsl_profile_apps_grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding:2px;}   /* minmax(0,1fr): identische Spalten über alle Gruppen (Inhalt weitet die Spur NICHT) */
.hsl_profile_menu a.hsl_profile_app{display:flex;flex-direction:column;align-items:center;gap:4px;width:auto;min-width:0;padding:5px 2px 4px;border-radius:9px;}   /* min-width:0 → lange Namen kürzen per Ellipsis statt die Spalte zu weiten */
.hsl_profile_app .app-ico{width:32px;height:32px;border-radius:9px;font-size:12.5px;}
.hsl_profile_app_nm{font-size:9.5px;font-weight:650;line-height:1.2;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.content{padding:26px 26px calc(var(--footh) + 24px);display:flex;flex-direction:column;gap:30px;width:100%;}
.content>*{max-width:1180px;}        /* Der 1180px-Cap liegt auf den KINDERN (rendert identisch zu frueher: flex-stretch + Cap) ... */
.content>.wide{max-width:none;}      /* ... damit .wide ihn aufheben kann: Listen/Cards duerfen die volle Viewport-Breite nutzen (Kanon §1b) */
/* Innerhalb einer Sektion überall derselbe Abstand = --gap (kein ad-hoc-Margin) */
.content>section{display:flex;flex-direction:column;gap:var(--gap);}

/* ============ Section framing ============ */
/* Typo-Hierarchie (alle bold): H1 = Hero, NIE größer als Glass-Header (18px) · H2 = Tabbar-Größe (13px) · H3 = Fließtextgröße, bold */
.h1{font-size:17px;font-weight:800;color:var(--hero-a);letter-spacing:-.01em;line-height:1.35;}
.h2{font-size:13px;font-weight:800;color:var(--fg);letter-spacing:0;line-height:1.45;}
.h3{font-size:13.5px;font-weight:700;color:var(--fg);line-height:1.5;}
/* Beschreibungs-Block: H1 → (H2) → Fließtext, gestapelt, mit Luft */
.desc{display:flex;flex-direction:column;gap:6px;}
.desc p{font-size:13.5px;line-height:1.65;color:var(--fg-dim);margin:3px 0 0;}
/* Sektionskopf gestapelt (nicht mehr nebeneinander): H1 (Hero) über H2 (Sub-Title) */
.sec-eyebrow{display:flex;flex-direction:column;align-items:flex-start;gap:5px;}
.sec-kicker{font-size:17px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--hero-a);}
.sec-h{font-size:13px;font-weight:800;letter-spacing:0;color:var(--fg);}
.sec-note{font-size:13px;color:var(--fg-dim);flex:1;min-width:180px;}
.tag-then,.tag-now{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:999px;}
.tag-then{color:var(--fg-faint);border:1px solid var(--border-strong);}
.tag-now{color:var(--hero-ink);background:var(--hero-grad);box-shadow:0 4px 14px -6px rgba(var(--hero-glow),.9);}

/* ---- 2027 „heute": flache, uniforme Reihe ---- */
.then-wrap{opacity:.62;filter:saturate(.85);display:flex;flex-direction:column;gap:var(--gap);}
.kpi-flat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
.kpi-flat{padding:16px 16px 15px;border-radius:14px;background:var(--bg-card);border:1px solid var(--border);position:relative;overflow:hidden;}
.kpi-flat::before{content:'';position:absolute;top:0;left:14px;right:14px;height:2px;border-radius:2px;background:var(--acc);opacity:.85;}
.kpi-flat .l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-dim);}
.kpi-flat .n{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:8px;}

/* ---- 2030: differenziert nach Daten-ROLLE ---- */
/* Sauberes, mit der Seite skalierendes Raster — auto-fit füllt jede Reihe (keine halben Lücken) */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:var(--gap);align-items:stretch;}
.kpi{padding:var(--pad-card,14px);display:flex;flex-direction:column;gap:9px;overflow:hidden;transition:box-shadow .32s var(--ease),background .32s var(--ease);}
/* container-type:size NUR auf .kpi-fit: Size-Containment nimmt der Box die Inhaltsgroesse -- auf der normalen
   .kpi kollabiert sie damit auf Schrifthoehe. .kpi-fit wird nur dort benutzt, wo die Hoehe von aussen kommt (Grid). */
.kpi.kpi-fit{container-type:size;}
/* Kanon-Kachel in einem Board/Grid: Titel oben, Wert zentriert, Schrift skaliert mit BEIDEN Kachelmassen
   (Hoehe UND Breite) -- sonst bleibt der Wert in schmalen Kacheln zu gross und laeuft raus. Das Padding zaehlt
   mit, weil container-type:size auf der gepolsterten Box misst. */
.kpi.kpi-fit{justify-content:flex-start;}
.kpi.kpi-fit .kpi-lab{flex:0 0 auto;font-size:clamp(.5rem,min(11cqh,7cqw),1rem);}
.kpi.kpi-fit .kpi-val{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(.9rem,min(34cqh,20cqw),4rem);line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;}
/* Mehr Tiefe/Glassyness: floatende Elevation + helle Oberkante & dunkle Unterkante innen (konkave Scheibe) + mehr Refraktion */
.kpi.glass{box-shadow:var(--e2),var(--glass-edge),inset 0 -22px 42px -26px rgba(0,0,0,.42),inset 0 -1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px) saturate(1.35);-webkit-backdrop-filter:blur(14px) saturate(1.35);}
/* Ruhiger Hover: KEIN direkter Rand — nur der Näherungs-Border-Glow (.glass::before) leuchtet auf */
/* KPI-Bloom v2 (condensed) — Hero-Ecke + Card-Akzent-Ecke, BEIDE animiert (Debug: schnell, 3s) */
@property --bx1{syntax:'<percentage>';inherits:false;initial-value:14%;}
@property --by1{syntax:'<percentage>';inherits:false;initial-value:10%;}
@property --bx2{syntax:'<percentage>';inherits:false;initial-value:86%;}
@property --by2{syntax:'<percentage>';inherits:false;initial-value:90%;}
/* NUR ein Bloom (die Card-Farbe als konzentrierter Glow), keine Flächen-Hintergrundfarbe */
/* KPI = nur Text + farbiger Rand. KEIN Bloom, KEINE Flächen-/Vordergrundfarbe.
   (Der farbige Rand kommt aus .glass[data-accent]; Basis ist das neutrale Glas.) */
@keyframes kpibloom{from{--bx1:8%;--by1:6%;--bx2:90%;--by2:94%;}to{--bx1:38%;--by1:34%;--bx2:62%;--by2:66%;}}
/* Akzent global: setzt --acc UND färbt den Ring der Glasfläche → die alten Farb-Borders sind zurück */
[data-accent]{--acc:var(--fg);--acc-l:var(--fg-dim);}
[data-accent=green]{--acc:var(--co-green);--acc-l:var(--co-green-l);}
[data-accent=blue]{--acc:var(--co-blue);--acc-l:var(--co-blue-l);}
[data-accent=purple]{--acc:var(--co-purple);--acc-l:var(--co-purple-l);}
[data-accent=red]{--acc:var(--co-red);--acc-l:var(--co-red-l);}
[data-accent=yellow]{--acc:var(--co-yellow);--acc-l:var(--co-yellow-l);}
[data-accent=hero]{--acc:var(--hero-a);--acc-l:var(--hero-c);}
/* Farbborder aus ZWEI Akzenttönen (hell→dunkel) — kein bg-Durchgang → kein dunkler Mittelstreifen */
.glass[data-accent]{--ring:linear-gradient(150deg,color-mix(in srgb,var(--acc) 55%,transparent),color-mix(in srgb,var(--acc-l) 30%,transparent));}
/* Interior-Mouseglow: großer Radius, sehr dezent, unter dem Inhalt — Maus als weiche Lichtquelle (Akzent-Identität trägt der farbige Ring) */
.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,-600px) var(--my,-600px),rgba(255,255,255,.06),transparent 60%);
  opacity:1;}
/* Globaler Border-Glow für Nicht-Glas-Elemente (Buttons, Pills, Tabs, Action-Bars …) — folgt dem Cursor */
.glow{position:relative;}
.glow::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;padding:1.2px;
  background:radial-gradient(100px circle at var(--lx,-600px) var(--ly,-600px),var(--rev),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.85;}
/* Chart-Tooltip (Mouseover) */
.gtip{position:fixed;z-index:600;pointer-events:none;padding:7px 11px;border-radius:8px;font-size:12px;font-weight:650;white-space:normal;max-width:min(320px,80vw);line-height:1.45;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);color:var(--fg);opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .12s var(--ease);}
.gtip.on{opacity:1;}
.gtip.below{transform:translate(-50%,18px);}   /* für Toolbar-Buttons: unter dem Cursor statt darüber */
.bars2 .b,.minibars i{cursor:pointer;transition:filter .12s var(--ease);}
.bars2 .b:hover,.minibars i:hover{filter:brightness(1.22);}
.donut,.ring,.spark{cursor:pointer;}
.sp-pt{fill:transparent;pointer-events:all;cursor:pointer;}   /* nur Hit-Fläche + Tooltip, kein verzerrter Punkt */
.donutsvg{width:118px;height:118px;flex:0 0 auto;transform:rotate(-90deg);}
.donutsvg circle{fill:none;stroke-width:15;cursor:pointer;transition:stroke-width .12s var(--ease);}
.donutsvg circle:hover{stroke-width:18;}
/* runder Hover-Punkt fürs Liniendiagramm (DOM statt verzerrtes SVG) */
.sparkdot{position:fixed;width:9px;height:9px;border-radius:50%;background:var(--co-green);box-shadow:0 0 10px var(--co-green);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .1s var(--ease);z-index:590;}
.sparkdot.on{opacity:1;}
.sparkwrap{position:relative;margin-top:2px;}
.sparkwrap .spark{margin-top:0;}
.spark-end{position:absolute;top:6px;left:calc(100% - 1px);width:9px;height:9px;border-radius:50%;background:var(--acc);transform:translate(-50%,-50%);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 75%,transparent);pointer-events:none;}
/* Inline-Felder in Listen schrumpfen mit der Spaltenbreite (kein Überlappen der Action-Bar) */
.lv td .inp,.lv td .sel{max-width:100%;min-width:0;box-sizing:border-box;}
/* Border-Glow für Inputs & Combos (native Elemente ohne Pseudo → Border-Box-Trick, Rest-Rand bleibt) */
.inp.glowb,tr.filterrow input.glowb{border:1px solid transparent;background:
  radial-gradient(110px circle at var(--lx,-400px) var(--ly,-400px),var(--rev),transparent 60%) border-box,
  linear-gradient(var(--border-strong),var(--border-strong)) border-box,
  color-mix(in srgb,var(--fg) 4%,transparent) padding-box;}
.sel.glowb{border:1px solid transparent;background:
  radial-gradient(110px circle at var(--lx,-400px) var(--ly,-400px),var(--rev),transparent 60%) border-box,
  linear-gradient(var(--border-strong),var(--border-strong)) border-box,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center padding-box,
  color-mix(in srgb,var(--fg) 4%,transparent) padding-box;}
.kpi-label{font-size:11px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--fg-dim);display:flex;align-items:center;gap:7px;}
.kpi-num{font-size:34px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1;}
.kpi-foot{font-size:11.5px;color:var(--fg-dim);margin-top:auto;}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:750;padding:4px 12px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;border:1px solid transparent;}
.chip svg{width:13px;height:13px;}
.chip-up{color:var(--co-green);background:color-mix(in srgb,var(--co-green) 14%,transparent);border-color:color-mix(in srgb,var(--co-green) 38%,transparent);}
.chip-bad{color:#fff;background:color-mix(in srgb,var(--co-red),#000 15%);border-color:transparent;}   /* voller (leicht abgedunkelter) Rot-Grund + weißer Text ≈ 4.7:1 statt Rot-auf-Rot 3:1 */

/* Lead-KPI: gleiche Rasterzelle, aber reicher (Flächen-Sparkline) — Hierarchie über Inhalt, nicht Größe */
.kpi-lead .kpi-num{font-size:38px;}
.kpi-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;}
.kpi-topline .kpi-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spark{width:100%;height:52px;margin-top:2px;overflow:visible;}
.spark .area{fill:url(#areaFill);opacity:.85;}
.spark .line{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.5s var(--ease) .2s forwards;}
.spark .end{fill:var(--acc);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--acc) 70%,transparent));}
@keyframes draw{to{stroke-dashoffset:0;}}

/* Ring-Gauge KPI */
.ring-wrap{display:flex;align-items:flex-start;gap:16px;}   /* Zahl oben ausgerichtet → gleiche Höhe wie die anderen KPI-Zahlen */
.ring{width:84px;height:84px;flex:0 0 auto;transform:rotate(-90deg);}
.ring .trk{fill:none;stroke:color-mix(in srgb,var(--fg) 12%,transparent);stroke-width:9;}
.ring .val{fill:none;stroke:var(--acc);stroke-width:9;stroke-linecap:round;stroke-dasharray:236;stroke-dashoffset:236;}
@keyframes ring{to{stroke-dashoffset:calc(236 - 236 * .94);}}
.ring-num{font-size:34px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1;}   /* gleiche Größe wie .kpi-num */
.ring-num small,.kpi-num .unit{font-size:20px;color:inherit;font-weight:700;margin-left:2px;}

/* Mini-Bars KPI */
.minibars{display:flex;align-items:flex-end;gap:4px;height:34px;margin-top:2px;}
.minibars i{flex:1;background:color-mix(in srgb,var(--acc) 55%,transparent);border-radius:3px 3px 0 0;transform-origin:bottom;animation:grow .8s var(--ease) both;}
.minibars i:last-child{background:var(--acc);box-shadow:0 0 10px -2px color-mix(in srgb,var(--acc) 80%,transparent);}

/* Alert KPI: reagiert anders (Severity-Streifen + sanfter Puls) */
.kpi-alert{border-color:transparent;}
.kpi-alert .sev{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--co-red);box-shadow:0 0 12px 1px color-mix(in srgb,var(--co-red) 70%,transparent);animation:sev 2.6s ease-in-out infinite;}
@keyframes sev{0%,100%{opacity:.55;}50%{opacity:1;}}
.kpi-alert .kpi-num{color:var(--co-red-l);}   /* Dark: hellere Rot-Variante → ~7.3:1 statt 4.9:1 */
#app.light .kpi-alert .kpi-num{color:var(--co-red);}   /* Light: dunkles Rot auf Weiß bleibt kontraststark (~6.5:1) */

/* Quiet KPI: bewusst ruhig (nicht jede Kachel schreit) */
.kpi-quiet::after{opacity:.35;}
.kpi-quiet .kpi-num{color:var(--fg);}

/* ============ ListView ============ */
.lv{padding:var(--pad-card,14px);overflow:hidden;}   /* Innenrand zur Karte (Andreas, R: 1b) — Tabelle laeuft NICHT mehr randlos */
.lv .lv{padding:0;}                                       /* verschachtelt (Schale + Engine-Mount): Innenrand nur EINMAL */
.lv .lv-scroll{border-radius:10px;}   /* Band-Ecken innerhalb des Innenrands runden */
.lv-head{display:flex;align-items:center;gap:12px;padding:0 0 12px;flex-wrap:nowrap;}   /* horizontal 0 = buendig mit Tabellenkante (die jetzt am .lv-Innenrand liegt); oben liefert .lv das Padding */
.lv-head .h{font-size:14.5px;font-weight:750;flex:1 1 auto;min-width:0;}
/* Kopfzeilen-Slot: App-Aktionen teilen sich EINE Zeile mit Suche/Filter -- keine separate Button-Leiste mehr. */
.lv-headslot{display:flex;align-items:flex-end;gap:10px;flex:1 1 auto;min-width:0;flex-wrap:wrap;}
.lv-headslot .field{margin:0;}
.lv-headslot .field label{display:none;}
.lv-headslot .inp,.lv-headslot .sel{height:34px;}
.lv-head .lv-search{margin-left:auto;}
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 15px;border-radius:10px;border:none;background:var(--hero-grad);background-size:300% 100%;color:var(--hero-ink);font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 8px 20px -10px rgba(var(--hero-glow),.9),inset 0 1px 0 rgba(255,255,255,.28);min-width:88px;justify-content:center;transition:box-shadow .2s var(--ease),filter .2s var(--ease);animation:hero-drift 7s ease-in-out infinite;}   /* text-decoration:none — ein <a class="btn"> darf nie unterstrichen sein (Kanon) */
@keyframes hero-drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.btn:hover{filter:brightness(1.07);box-shadow:0 12px 28px -10px rgba(var(--hero-glow),1),inset 0 1px 0 rgba(255,255,255,.3);}
.inp{height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg);font:inherit;font-size:13px;min-width:180px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.inp::placeholder,.ta::placeholder,.cmdk-in::placeholder,.sel:invalid{color:var(--fg-dim);opacity:1;}
.inp:focus{outline:none;border-color:var(--hero-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 24%,transparent);}
/* Datum/Uhrzeit: feste, inhaltsgerechte Breite (Zeichenlängen sind konstant) inkl. nativem Picker-Icon — stretchen nicht mehr auf volle Zeilenbreite */
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"]{min-width:0;flex:0 0 auto;}
input[type="date"]{width:140px;}
input[type="time"]{width:104px;}
input[type="datetime-local"]{width:200px;}
input[type="month"]{width:130px;}
input[type="week"]{width:140px;}
/* Inputs/Combos: nur ein dezenter Rand-Glow beim Hover (kein Background) */
.inp:hover:not(:focus),.sel:hover:not(:focus),tr.filterrow input:hover:not(:focus),tr.filterrow select:hover:not(:focus){border-color:color-mix(in srgb,var(--hero-a) 55%,var(--border-strong));box-shadow:0 0 0 1px color-mix(in srgb,var(--hero-a) 30%,transparent);}
/* Custom-Checkbox (Auswahlspalte) */
.chkcol{width:42px;text-align:center;padding-left:16px!important;padding-right:6px!important;}
.chk{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;}
.chk input{position:absolute;opacity:0;width:0;height:0;}
.chk span{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border-strong);display:grid;place-items:center;background:color-mix(in srgb,var(--fg) 3%,transparent);transition:.15s var(--ease);}
.chk input:checked+span{background:var(--hero-grad);border-color:transparent;}
.chk input:checked+span::after{content:'';width:7px;height:3.5px;border:1.8px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg);}
.chk input:focus-visible+span{box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 26%,transparent);}
/* Bulk-Leiste sitzt OBEN (über der Tabelle) */
.bulkbar{display:none;align-items:center;gap:10px;padding:11px 18px;background:color-mix(in srgb,var(--hero-a) 12%,transparent);border-top:1px solid color-mix(in srgb,var(--hero-a) 32%,transparent);}
.bulkbar.on{display:flex;}
.bulkbar .cnt{font-size:13px;font-weight:750;}
.bulkbar .cnt b{color:var(--fg);font-weight:800;}
.bulkbar .sp{flex:1;}
.bulkbar .lnk{background:none;border:none;color:var(--fg-dim);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;padding:6px 8px;border-radius:8px;}
.bulkbar .lnk:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent);}
tbody tr.sel{background:color-mix(in srgb,var(--hero-a) 9%,transparent);}
tbody tr.sel:hover{background:color-mix(in srgb,var(--hero-a) 13%,transparent);}
.btn svg{width:16px;height:16px;}
.btn-ghost{background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg-dim);border:1px solid var(--border-strong);box-shadow:none;}
.btn-ghost:hover{color:var(--fg);border-color:var(--hero-a);box-shadow:0 0 0 1px color-mix(in srgb,var(--hero-a) 35%,transparent);}
.btn-sm{height:30px;min-width:0;padding:0 12px;font-size:12px;}
.btn:disabled{opacity:.45;cursor:default;animation:none;}
.kpi-act{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;}
thead th{text-align:left;font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);padding:10px var(--pad-card,14px);background:color-mix(in srgb,var(--hero-c) 30%,transparent);}
thead th:first-child{border-top-left-radius:0;}
tbody td{padding:12px var(--pad-card,14px);border-top:1px solid var(--border);vertical-align:middle;overflow-wrap:anywhere;}   /* lange, umbruchlose Werte (Mails/URLs/Tokens) brechen im Feld statt aus der Spalte zu laufen — anywhere (nicht break-word) senkt die min-content-Breite, sonst sprengt der Token die auto-layout-Spalte trotzdem und die Karte klippt (kein H-Scroll bei Tabellen) */
tbody tr{transition:background .14s var(--ease);cursor:pointer;}
tbody tr:hover{background:color-mix(in srgb,var(--fg) 4.5%,transparent);}
.udot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.udot.ok{background:var(--co-green);box-shadow:0 0 8px color-mix(in srgb,var(--co-green) 80%,transparent);}
.udot.warn{background:var(--co-yellow);box-shadow:0 0 8px color-mix(in srgb,var(--co-yellow) 80%,transparent);}
.udot.crit{background:var(--co-red);box-shadow:0 0 8px color-mix(in srgb,var(--co-red) 80%,transparent);}
.udot.off{background:var(--fg-faint);}
/* <hsl-badge>/<hsl-status> richere Tone-Palette (Phase-6-Audit A.2): dieselben brand/info/purple-Töne, die
   die Legacy-.hsl_badge[data-tone] bereits kennt (Zeile ~515-520), jetzt auch für .udot/.pill — das
   Custom-Element kann sie so ohne eigene neue Klassenfamilie ausliefern. */
.udot.brand{background:var(--hero-a);box-shadow:0 0 8px color-mix(in srgb,var(--hero-a) 80%,transparent);}
.udot.info{background:var(--co-blue);box-shadow:0 0 8px color-mix(in srgb,var(--co-blue) 80%,transparent);}
.udot.purple{background:var(--co-purple);box-shadow:0 0 8px color-mix(in srgb,var(--co-purple) 80%,transparent);}
.umail{font-weight:650;}
.usub{color:var(--fg-faint);font-size:12px;}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:999px;border:1px solid var(--border-strong);color:var(--fg-dim);white-space:nowrap;}
.pill.ok{color:var(--co-green);border-color:color-mix(in srgb,var(--co-green) 40%,transparent);background:color-mix(in srgb,var(--co-green) 12%,transparent);}
.pill.warn{color:var(--co-yellow);border-color:color-mix(in srgb,var(--co-yellow) 40%,transparent);background:color-mix(in srgb,var(--co-yellow) 12%,transparent);}
.pill.crit{color:var(--co-red);border-color:color-mix(in srgb,var(--co-red) 40%,transparent);background:color-mix(in srgb,var(--co-red) 12%,transparent);}
.pill.brand{color:var(--hero-a);border-color:color-mix(in srgb,var(--hero-a) 40%,transparent);background:color-mix(in srgb,var(--hero-a) 12%,transparent);}
.pill.info{color:var(--co-blue);border-color:color-mix(in srgb,var(--co-blue) 40%,transparent);background:color-mix(in srgb,var(--co-blue) 12%,transparent);}
.pill.purple{color:var(--co-purple);border-color:color-mix(in srgb,var(--co-purple) 40%,transparent);background:color-mix(in srgb,var(--co-purple) 12%,transparent);}
/* shape="square"/"tag" (Phase-6-Audit): kompaktere, weniger runde Badge-Formen neben dem runden Default-Pill
   — dieselbe Radius-/Padding-Rezeptur wie .hsl_badge[data-shape] (Zeile ~512-513), als Modifier auf .pill,
   damit <hsl-badge shape="square|tag"> ohne zweite Klassenfamilie auskommt. */
.pill.shape-square{border-radius:6px;padding:2px 8px;min-width:26px;justify-content:center;}
.pill.shape-tag{border-radius:6px;padding:4px 12px;}
.ts{font-variant-numeric:tabular-nums;color:var(--fg-dim);}

.iconbtn{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);text-decoration:none;cursor:pointer;transition:.15s var(--ease);}   /* text-decoration:none — auch als <a> nie unterstrichen (Kanon) */
.iconbtn:hover{color:var(--fg);border-color:var(--hero-a);}
.iconbtn.dgr:hover{color:var(--co-red);border-color:var(--co-red);}
.iconbtn svg{width:15px;height:15px;}
/* Aktions-Toolbar (.hsl_toolbar) — volle Breite, z. B. unter einer Breadcrumb: CTAs links · beliebige Tools · rechts Löschen/Schließen. .tb-spacer schiebt die rechte Gruppe nach außen, .tb-sep = Hairline-Trenner. */
.hsl_toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;}
.hsl_toolbar .tb-spacer{flex:1 1 auto;min-width:8px;}
.hsl_toolbar .tb-sep{width:1px;align-self:stretch;margin:3px 3px;background:var(--border-strong);}

/* ---- NEUE segmentierte Action-Bar: ein Körper, in Abschnitte geteilt ---- */
/* hsl_actions — EINE kanonische, gefasste Aktions-Icon-Bar (ListView-Zeilenaktionen + Launcher-Toolbar).
   Bordered/segmentiert mit border-left-Trennern; Kinder = <button>/<a>. Modifier: seg-primary=Marke,
   seg-danger=rot (Hover), seg-more/on-edit=Marken-Fill. Ruhig: hebt sich NICHT beim Hover. */
.hsl_actions{position:relative;isolation:isolate;display:inline-flex;align-items:stretch;border-radius:11px;overflow:hidden;}   /* Glas-Material + Border-Glow via .glass-Klasse im Markup */
.modal .hsl_actions.glass{--ring:var(--ring-flat);}   /* der Dialog boostet sein --ring via data-accent — die ActionBar in seinem Body soll aber wie in JEDER Liste aussehen (Picker-Befund 2026-07-18) */
.hsl_actions>button,.hsl_actions>a{position:relative;display:grid;place-items:center;width:36px;height:34px;flex:0 0 auto;border:none;border-left:1px solid var(--border-strong);background:transparent;color:var(--fg);cursor:pointer;text-decoration:none;font:inherit;transition:background .15s var(--ease),color .15s var(--ease);}
.hsl_actions>button:first-child,.hsl_actions>a:first-child{border-left:0;}
.hsl_actions>button:hover,.hsl_actions>a:hover{background:color-mix(in srgb,var(--fg) 9%,transparent);color:var(--fg);}
.hsl_actions>button>svg,.hsl_actions>a>svg,.hsl_actions .seg svg,.hsl_actions .iconbtn svg{width:17px;height:17px;}
.seg-primary,.hsl_act_pri{color:var(--fg);}
.hsl_actions .seg-danger:hover,.hsl_actions .dgr:hover,.hsl_act_danger:hover{background:color-mix(in srgb,var(--co-red) 18%,transparent);color:var(--co-red);}
.seg-more{font-weight:800;letter-spacing:1px;}
.seg-more.open{background:var(--hero-grad);color:var(--hero-ink);}
.seg.on-edit{background:var(--hero-grad);color:var(--hero-ink);}
/* hsl_avatar — SSO-Bild oder Monogramm (Initialen in namensabgeleiteter Farbe); hsl_avatar_stack = überlappend */
.hsl_avatar{--hsl-av-size:36px;position:relative;width:var(--hsl-av-size);height:var(--hsl-av-size);flex:0 0 auto;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;vertical-align:middle;font-weight:700;font-size:calc(var(--hsl-av-size)*.4);line-height:1;letter-spacing:.02em;color:#fff;user-select:none;box-shadow:inset 0 0 0 1px var(--border),inset 0 1px 0 rgba(255,255,255,.18);transition:box-shadow .18s var(--ease);}   /* Border wie ein Input (themeneutral); vertical-align:middle → im Topbar-Button mittig statt Baseline-Top (das Foto-<img> setzt sonst die Baseline nach unten) */
.hsl_avatar:hover,.topavatar:hover .hsl_avatar,.hsl_avatar_stack>.hsl_avatar:hover{box-shadow:inset 0 0 0 1.5px var(--hero-a),0 0 0 3px color-mix(in srgb,var(--hero-a) 20%,transparent),0 6px 16px -4px rgba(var(--hero-glow),.5);z-index:2;}   /* EIN runder Ring (box-shadow folgt border-radius:50%) + Kanon-Glow */
.hsl_avatar.is-empty{background:color-mix(in srgb,var(--fg) 13%,transparent)!important;color:var(--fg-dim)!important;}   /* leeres Item → Platzhalter */
.hsl_av_ph{width:58%;height:58%;}
.hsl_avatar_img{width:100%;height:100%;object-fit:cover;display:block;}
.hsl_avatar_more{background:color-mix(in srgb,var(--fg) 16%,var(--bg-card));color:var(--fg);font-size:calc(var(--hsl-av-size)*.34);font-weight:750;}
.hsl_avatar_stack{display:inline-flex;align-items:center;}
.hsl_avatar_stack>.hsl_avatar{margin-left:calc(var(--hsl-av-size,36px) * -.28);box-shadow:inset 0 0 0 1px var(--border),inset 0 1px 0 rgba(255,255,255,.18);}   /* Input-Border wie sonst; kein harter bg-Ring */
.hsl_avatar_stack>.hsl_avatar:first-child{margin-left:0;}
.topavatar{flex:0 0 auto;border:none;background:none;padding:0;margin-left:2px;border-radius:50%;cursor:pointer;}
/* kein eigener Ring auf dem Button — der runde Ring sitzt allein auf .hsl_avatar (kein doppelter/ovaler Ring) */
.ucell{display:flex;align-items:center;gap:11px;min-width:0;}
.utext{display:flex;flex-direction:column;min-width:0;}
.utext>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lv-team{display:flex;align-items:center;gap:12px;margin-top:14px;}
.lv-team-lbl{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-faint);}
/* hsl_prog — Fortschrittsbalken: bestimmt (data-value + data-tone) oder endlos (data-indeterminate) */
.hsl_prog{display:block;position:relative;height:9px;width:100%;background:color-mix(in srgb,var(--fg) 9%,transparent);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.12);}
.hsl_prog_fill{display:block;height:100%;width:0;border-radius:6px;background:var(--hero-grad);transition:width .9s var(--ease);}
.hsl_prog[data-tone="success"] .hsl_prog_fill{background:linear-gradient(90deg,var(--co-green),color-mix(in srgb,var(--co-green) 55%,#fff));}
.hsl_prog[data-tone="warn"] .hsl_prog_fill{background:linear-gradient(90deg,var(--co-yellow),color-mix(in srgb,var(--co-yellow) 55%,#fff));}
.hsl_prog[data-tone="danger"] .hsl_prog_fill{background:linear-gradient(90deg,var(--co-red),color-mix(in srgb,var(--co-red) 55%,#fff));}
/* Unbestimmt: bewährtes Material-Design-Muster — zwei Balken (äußerer translate, innerer width; runde Pill-Enden) */
.hsl_prog--flow .hsl_prog_bar{position:absolute;top:0;bottom:0;left:0;width:100%;transform-origin:left center;will-change:transform;}
.hsl_prog--flow .hsl_prog_binner{display:block;width:8%;height:100%;border-radius:999px;background:var(--hero-grad);will-change:width;}   /* per WIDTH (nicht scaleX) animiert → Pill-Radius bleibt unverzerrt rund */
.hsl_prog--flow[data-tone="success"] .hsl_prog_binner{background:linear-gradient(90deg,var(--co-green),color-mix(in srgb,var(--co-green) 55%,#fff));}
.hsl_prog--flow[data-tone="warn"] .hsl_prog_binner{background:linear-gradient(90deg,var(--co-yellow),color-mix(in srgb,var(--co-yellow) 55%,#fff));}
.hsl_prog--flow.is-colorful .hsl_prog_binner{background:linear-gradient(90deg,var(--co-blue) 0 33.3%,var(--co-green) 33.3% 66.6%,var(--co-red) 66.6% 100%);}   /* harte Farbblöcke, kein Verlauf, nicht zu dicht */
.hsl_prog--flow .b1{animation:hsl-mdc-pt var(--dur,2.4s) infinite linear;animation-delay:var(--pd,0s);}
.hsl_prog--flow .b1 .hsl_prog_binner{animation:hsl-mdc-ps var(--dur,2.4s) infinite linear;animation-delay:var(--pd,0s);}
.hsl_prog--flow .b2{animation:hsl-mdc-st var(--dur,2.4s) infinite linear;animation-delay:var(--pd,0s);}
.hsl_prog--flow .b2 .hsl_prog_binner{animation:hsl-mdc-ss var(--dur,2.4s) infinite linear;animation-delay:var(--pd,0s);}
/* Startbreite 0 (statt 8%) → bei 0% ist der Track leer, der Balken wächst von links rein statt als Chunk zu poppen */
@keyframes hsl-mdc-pt{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.6714%)}100%{transform:translateX(200.611%)}}
@keyframes hsl-mdc-ps{0%{width:0}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);width:8%}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);width:66.15%}100%{width:0}}
@keyframes hsl-mdc-st{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.6519%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.3862%)}100%{transform:translateX(160.278%)}}
@keyframes hsl-mdc-ss{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);width:0}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);width:45.71%}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);width:72.8%}100%{width:0}}
@media (prefers-reduced-motion:reduce){.hsl_prog--flow .hsl_prog_bar,.hsl_prog--flow .hsl_prog_binner{animation:none!important;}.hsl_prog--flow .b1 .hsl_prog_binner{width:60%;opacity:.5;}.hsl_prog--flow .b2{display:none;}}
.prog-demo{display:flex;flex-direction:column;gap:15px;padding:20px 22px;}
.prog-line{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:14px;}
.prog-cap{font-size:13px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:9px;}
.prog-cap svg{width:16px;height:16px;color:var(--fg-dim);flex:0 0 auto;}
.prog-val{font-size:12.5px;font-weight:700;color:var(--fg-dim);white-space:nowrap;min-width:52px;text-align:right;font-variant-numeric:tabular-nums;}
@media(max-width:640px){.prog-line{grid-template-columns:1fr auto;}.prog-line .hsl_prog{grid-column:1/-1;order:3;}}
/* hsl_badge — getyptes Badge (Sicherungsart/Ziel/Engine …): data-tone + data-shape (pill|tag|square) */
/* Standard: quadratisch mit Radius (wie F/D/L, Vollsicherung, PostgreSQL) — keine runden Pillen */
.hsl_badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:750;letter-spacing:.03em;padding:2px 8px;border-radius:6px;border:1px solid var(--border-strong);color:var(--fg-dim);background:color-mix(in srgb,var(--fg) 5%,transparent);white-space:nowrap;line-height:1.55;}
.hsl_badge[data-shape="pill"]{border-radius:999px;padding:2px 10px;}
.hsl_badge[data-shape="square"]{padding:2px 0;min-width:26px;justify-content:center;}
.hsl_badge svg{width:12px;height:12px;}
.hsl_badge[data-tone="brand"]{color:var(--hero-a);border-color:color-mix(in srgb,var(--hero-a) 42%,transparent);background:color-mix(in srgb,var(--hero-a) 12%,transparent);}
.hsl_badge[data-tone="info"]{color:var(--co-blue);border-color:color-mix(in srgb,var(--co-blue) 42%,transparent);background:color-mix(in srgb,var(--co-blue) 12%,transparent);}
.hsl_badge[data-tone="ok"]{color:var(--co-green);border-color:color-mix(in srgb,var(--co-green) 42%,transparent);background:color-mix(in srgb,var(--co-green) 12%,transparent);}
.hsl_badge[data-tone="warn"]{color:var(--co-yellow);border-color:color-mix(in srgb,var(--co-yellow) 45%,transparent);background:color-mix(in srgb,var(--co-yellow) 13%,transparent);}
.hsl_badge[data-tone="danger"]{color:var(--co-red);border-color:color-mix(in srgb,var(--co-red) 42%,transparent);background:color-mix(in srgb,var(--co-red) 12%,transparent);}
.hsl_badge[data-tone="purple"]{color:var(--co-purple);border-color:color-mix(in srgb,var(--co-purple) 42%,transparent);background:color-mix(in srgb,var(--co-purple) 13%,transparent);}
/* hsl_skel — Lade-Platzhalter (Shimmer) */
.hsl_skel{display:block;border-radius:8px;background:linear-gradient(100deg,color-mix(in srgb,var(--fg) 13%,transparent) 30%,color-mix(in srgb,var(--fg) 26%,transparent) 50%,color-mix(in srgb,var(--fg) 13%,transparent) 70%);background-size:220% 100%;animation:hsl-skel 2.2s ease-in-out infinite;}
.hsl_skel--text{height:11px;margin:9px 0;border-radius:6px;}
.hsl_skel--circle{border-radius:50%;}
.hsl_skel_row{display:flex;align-items:center;gap:11px;}
.hsl_skel_col{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;}
.hsl_skel_col .hsl_skel--text{margin:0;}
@keyframes hsl-skel{0%{background-position:220% 0;}100%{background-position:-220% 0;}}
@media (prefers-reduced-motion:reduce){.hsl_skel{animation:none;}}
/* hsl_acc — Accordion */
.hsl_acc{display:flex;flex-direction:column;gap:9px;}
.hsl_acc_item{border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--fg) 3%,transparent);}
.hsl_acc_head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border:none;background:none;color:var(--fg);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;text-align:left;}
.hsl_acc_head:hover{background:color-mix(in srgb,var(--fg) 4%,transparent);}
.hsl_acc_head>svg{width:15px;height:15px;color:var(--fg-dim);flex:0 0 auto;transform:rotate(90deg);transition:transform .22s var(--ease);}
.hsl_acc_item.open .hsl_acc_head>svg{transform:rotate(-90deg);}
.hsl_acc_body{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s var(--ease),opacity .28s var(--ease);}
.hsl_acc_item.open .hsl_acc_body{max-height:600px;opacity:1;}
.hsl_acc_body-inner{padding:2px 16px 15px;color:var(--fg-dim);font-size:13px;line-height:1.65;}

/* ===== id.heusel.app · Login & 2FA — Vorlagefeld ===== */
.auth-canvas{padding:0;overflow:hidden;}
.auth-canvas-bar{justify-content:center;gap:6px;flex-wrap:wrap;padding:8px 14px 0;background:color-mix(in srgb,var(--fg) 3%,transparent);}   /* = .tabs (Inline-Tabs als Umschalter) */
.auth-stage{position:relative;display:grid;place-items:center;min-height:580px;padding:40px 20px;background:var(--bg);}   /* generische Theme-Bg, damit die glasigen Cards wie im echten App-Hintergrund sitzen */
.auth-screen{width:100%;max-width:404px;animation:authIn .3s var(--ease);}
.auth-screen[hidden]{display:none;}
@keyframes authIn{from{opacity:0;transform:translateY(8px);}}
.auth-card{position:relative;padding:34px 30px 28px;border-radius:16px;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--e2);}   /* solide Standard-Card (nicht glassy) */
.auth-form{display:flex;flex-direction:column;gap:12px;}
.auth-form>.inp{width:100%;min-width:0;}
.auth-form>.auth-or{margin:0;}
.auth-form>.otp,.auth-form>.pw-bar,.auth-form>.pw-reqs,.auth-form>.chk-remember,.auth-form>.auth-forgot,.auth-form>.auth-back,.auth-form>.auth-hint{margin:0;}
.auth-form>.auth-forgot{margin:0 0 -6px;}   /* Link-Leading kompensieren → „oder" rückt näher, Abstände über/unter symmetrisch */
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px;}
.auth-brand .lg-mark{width:48px;height:48px;border-radius:12px;background:var(--hero-grad);display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px -8px rgba(var(--hero-glow),.85),inset 0 1px 0 rgba(255,255,255,.35);}
.auth-brand .lg-mark svg{width:26px;height:26px;}
.auth-word{font-size:26px;font-weight:750;letter-spacing:-.01em;}
.auth-word .dot{color:var(--hero-a);text-shadow:0 0 12px color-mix(in srgb,var(--hero-a) 55%,transparent);}
.auth-brand-sm{display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;margin-bottom:16px;}
.auth-brand-sm .lg-mark{width:26px;height:26px;border-radius:7px;background:var(--hero-grad);display:grid;place-items:center;color:#fff;}
.auth-brand-sm .lg-mark svg{width:15px;height:15px;}
.auth-h{text-align:center;font-size:20px;font-weight:750;margin:2px 0 16px;}
.auth-forgot{display:block;text-align:center;font-size:12.5px;color:var(--fg-dim);text-decoration:none;margin:10px 0 4px;}
.auth-forgot:hover{color:var(--hero-a);}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--fg-faint);font-size:12.5px;margin:16px 0;}
.auth-or::before,.auth-or::after{content:'';height:1px;flex:1;background:var(--border);}
.btn-full{width:100%;justify-content:center;}
.auth-back{display:block;text-align:center;font-size:12.5px;color:var(--fg-dim);text-decoration:none;margin-top:14px;}
.auth-back:hover{color:var(--hero-a);}
.chk-remember{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;color:var(--fg-dim);margin:4px 0 14px;}
.otp{display:flex;gap:9px;justify-content:center;margin:6px 0 8px;}
.otp input{width:44px;height:52px;text-align:center;font-size:22px;font-weight:750;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg);}
.otp input:focus{outline:none;border-color:var(--hero-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 24%,transparent);}
.auth-qr{width:180px;margin:6px auto 8px;padding:12px;background:#fff;border-radius:10px;box-shadow:var(--e1);}
.auth-qr svg{display:block;width:100%;height:auto;}
.auth-key{text-align:center;font-size:12.5px;color:var(--fg-dim);margin:4px 0 14px;}
.auth-key code{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--fg);letter-spacing:1.5px;font-size:12px;}
.pw-reqs{list-style:none;margin:8px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;}
.pw-reqs li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-faint);transition:color .15s var(--ease);}
.pw-reqs li svg{width:13px;height:13px;flex:0 0 auto;}
.pw-reqs li.met{color:var(--fg);}
.pw-reqs li.met svg{color:var(--co-green);}
.pw-bar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--fg) 9%,transparent);overflow:hidden;margin:9px 0 2px;}
.pw-bar-fill{display:block;height:100%;width:0;border-radius:3px;transition:width .3s var(--ease),background .3s var(--ease);}
.pw-bar-fill.weak{width:34%;background:var(--co-red);}
.pw-bar-fill.medium{width:67%;background:var(--co-yellow);}
.pw-bar-fill.strong{width:100%;background:var(--co-green);}
.auth-hint{display:flex;gap:8px;font-size:12px;color:var(--fg-dim);line-height:1.5;margin:4px 0 14px;}
.auth-hint svg{width:15px;height:15px;flex:0 0 auto;color:var(--fg-dim);margin-top:1px;}
.auth-idp{border-color:color-mix(in srgb,var(--hero-a) 42%,var(--border-strong));}
.auth-idp:hover{border-color:var(--hero-a);}
.idp-mark{width:19px;height:19px;border-radius:5px;background:var(--hero-grad);display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.idp-mark svg{width:12px;height:12px;color:#fff;}
.idp-mark.ms{background:none;box-shadow:none;border-radius:0;}
.idp-mark.ms svg{width:16px;height:16px;}
/* Passwort-Maskierung: Custom-Font hat kein Bullet → Tofu-Kästchen. System-Font-Fallback + Hero-farbige Punkte */
.inp[type="password"]:not(:placeholder-shown){font-family:Verdana,Tahoma,'Segoe UI',system-ui,sans-serif;letter-spacing:3px;color:var(--hero-a);}   /* nur bei Inhalt (Masking-Punkte), NICHT auf dem Platzhalter */
.pw-field{position:relative;width:100%;}
.pw-field .inp{width:100%;padding-right:42px;}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;border:none;background:none;color:var(--fg-faint);cursor:pointer;border-radius:8px;transition:color .14s var(--ease),background .14s var(--ease);}
.pw-eye:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent);}
.pw-eye.on{color:var(--hero-a);}
.pw-eye svg{width:17px;height:17px;}
/* Overflow-Popover */
/* Popover: fixed (aus dem Overflow gelöst, per JS an #app), OPAKE Grundfläche, über der Card */
.pop{position:fixed;min-width:204px;padding:6px;display:none;flex-direction:column;gap:2px;z-index:200;border-radius:12px;
  background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);}
.pop.open{display:flex;animation:pop .2s var(--ease);}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}
.pop button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:none;background:transparent;color:var(--fg-dim);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;width:100%;transition:.14s var(--ease);}
.pop button svg{width:16px;height:16px;flex:0 0 auto;}
.pop button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);}
.pop button.dgr:hover{background:color-mix(in srgb,var(--co-red) 16%,transparent);color:var(--co-red);}
.pop-sep{height:1px;background:var(--border);margin:4px 6px;}

/* ============ Refinement-Legende ============ */
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.lg{padding:16px;display:flex;flex-direction:column;gap:7px;--acc:var(--hero-a);--ring:linear-gradient(150deg,color-mix(in srgb,var(--acc) 52%,transparent),color-mix(in srgb,var(--acc) 26%,transparent));
  background:radial-gradient(58% 58% at var(--bx1,14%) var(--by1,10%),color-mix(in srgb,var(--hero-a) 6%,transparent),transparent 62%) padding-box,radial-gradient(58% 58% at var(--bx2,86%) var(--by2,90%),color-mix(in srgb,var(--acc) 7%,transparent),transparent 62%) padding-box,var(--glass) padding-box,var(--ring) border-box;
  animation:kpibloom 3s ease-in-out infinite alternate;}
/* jede Legende-Card ihr eigener Akzent → variierende Ecken/Tönung statt uniform */
.legend .lg:nth-child(6n+1){--acc:var(--co-green);} .legend .lg:nth-child(6n+2){--acc:var(--co-blue);} .legend .lg:nth-child(6n+3){--acc:var(--co-purple);}
.legend .lg:nth-child(6n+4){--acc:var(--hero-a);} .legend .lg:nth-child(6n+5){--acc:var(--co-yellow);} .legend .lg:nth-child(6n){--acc:var(--co-red);}
.lg-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);}
.lg-i svg{width:18px;height:18px;}
.lg-h{font-size:13.5px;font-weight:700;line-height:1.5;}   /* H3 */
.lg-p{font-size:12.5px;line-height:1.6;color:var(--fg-dim);}
.lg-p code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg);}

/* ===== App-Launcher (heusel.id-Kachelraster) ===== */
.launcher{max-width:772px;margin:0 auto;padding:26px 30px 32px;border-radius:22px;display:flex;flex-direction:column;gap:16px;
  background:var(--glass) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2),var(--glass-edge);backdrop-filter:blur(16px) saturate(1.3);}
.launcher-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.launcher-brand{display:inline-flex;align-items:center;gap:12px;}
.launcher-brand .lg-mark{width:42px;height:42px;border-radius:12px;background:var(--hero-grad);display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:0 8px 20px -8px rgba(var(--hero-glow),.85),inset 0 1px 0 rgba(255,255,255,.35);}
.launcher-brand .lg-mark svg{width:23px;height:23px;}
.launcher-brand .brand{font-size:22px;}   /* Wordmark = Standard (.brand/.dot) */
/* frosted, segmentierte Toolbar */
/* Launcher-Toolbar nutzt jetzt das kanonische .hsl_actions (siehe oben) — keine eigenen Regeln mehr. */
.launcher-title{font-size:25px;font-weight:800;letter-spacing:-.02em;margin:4px 0 -2px;}
.launcher-sub{font-size:12.5px;color:var(--fg-dim);margin-top:-2px;}
.launcher-grp{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim);margin:8px 2px 0;}
/* max. 6 pro Zeile; skaliert runter bis 2 (Mobile) */
.app-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media(max-width:1000px){.app-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:640px){.app-grid{grid-template-columns:repeat(2,1fr);}}
.app-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;aspect-ratio:1;min-width:0;padding:12px;border-radius:16px;text-decoration:none;color:var(--fg);font:inherit;
  background:var(--glass) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e1),var(--glass-edge);cursor:pointer;transition:box-shadow .18s var(--ease);}
.app-tile:hover{box-shadow:var(--e2),var(--glass-edge);}
.app-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:17px;font-weight:800;letter-spacing:-.03em;color:#fff;flex:0 0 auto;overflow:hidden;
  background:color-mix(in srgb,var(--fg) 11%,transparent) padding-box,var(--ring) border-box;border:1px solid transparent;   /* theme-aware Default (NICHT schwarz) — subtiler Milchglas-Ton; Marken-/abgeleitete Farbe via style=background überschreibt */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -10px 18px -10px rgba(0,0,0,.4),0 6px 14px -8px rgba(0,0,0,.5);}
.app-ico img,.app-ico svg{width:62%;height:62%;object-fit:contain;display:block;}   /* transparentes Icon zentriert (place-items:center) auf der Fläche */
.app-name{font-size:12px;font-weight:650;line-height:1.3;width:100%;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}   /* EINZEILIG + Ellipsis → lange Namen abgeschnitten, Icon-Position bleibt IMMER fix (genau 1 Zeile) */
/* eigene Apps: Editier-Icon dauerhaft sichtbar (wie Original), hebt beim Hover an */
.app-tile .t-edit{position:absolute;top:9px;right:9px;width:18px;height:18px;border:none;background:none;box-shadow:none;opacity:.5;transition:opacity .15s var(--ease),color .15s;}   /* nur der Stift, kein Rahmen (Position bleibt) */
.app-tile .t-edit::after{content:none;}   /* kein Border-Glow-Ring am Stift */
.app-tile:hover .t-edit,.app-tile:focus-within .t-edit{opacity:1;}
.app-tile .t-edit svg{width:13px;height:13px;}
.app-add{background:none;box-shadow:none;border:1.5px dashed var(--border-strong);color:var(--fg-faint);}
.app-add:hover{border-color:var(--hero-a);color:var(--hero-a);box-shadow:none;}
.app-add .app-ico{background:color-mix(in srgb,var(--fg) 7%,transparent);color:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
.app-add .app-ico svg{width:20px;height:20px;}

/* ===== Galerie / Karussell + Auto-Play + Bullet-Footer + Zahnrad-Optionen ===== */
.gallery{width:100%;}
.gal-view{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--border);box-shadow:var(--e1);aspect-ratio:16/9;}
.gal-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.gal-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.5));}
.gal-slide .gs-ico{position:absolute;top:18px;left:20px;width:34px;height:34px;opacity:.9;}
.gal-slide .gs-cap{position:relative;z-index:1;}
.gal-slide h4{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0 0 3px;}
.gal-slide p{font-size:12.5px;line-height:1.45;margin:0;opacity:.92;}
.gal-slide.on{z-index:1;}
/* Übergangstypen (per data-tr am .gal-view) */
.gal-view[data-tr="slide"] .gal-slide{opacity:1;}          /* Transform setzt JS je Slide */
.gal-view[data-tr="fade"] .gal-slide{opacity:0;}
.gal-view[data-tr="fade"] .gal-slide.on{opacity:1;}
.gal-view[data-tr="zoom"] .gal-slide{opacity:0;transform:scale(1.06);}
.gal-view[data-tr="zoom"] .gal-slide.on{opacity:1;transform:scale(1);}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s var(--ease);z-index:2;}
.gal-nav:hover{background:rgba(0,0,0,.56);}
.gal-nav.prev{left:10px;} .gal-nav.next{right:10px;}
.gal-nav svg{width:17px;height:17px;}
.gal-nav.prev svg{transform:rotate(180deg);}
.gal-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-top:13px;}
.gal-meta{justify-self:start;font-size:12.5px;color:var(--fg-dim);font-weight:550;}
.gal-meta b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums;}
.gal-dots{justify-self:center;display:flex;gap:7px;align-items:center;}
.gal-dot{width:8px;height:8px;padding:0;border:none;border-radius:999px;background:color-mix(in srgb,var(--fg) 24%,transparent);cursor:pointer;transition:width .3s var(--ease),background .3s var(--ease);}
.gal-dot.on{width:24px;background:var(--hero-grad);}
.gal-foot-r{justify-self:end;display:flex;align-items:center;gap:8px;}
/* Slide-Dropdown + Zahnrad — beide öffnen nach OBEN (Footer sitzt unten) */
.galdd,.galcog{position:relative;}
.galdd-btn{display:flex;align-items:center;gap:8px;height:34px;max-width:190px;padding:0 11px;border-radius:9px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.galdd-cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.galdd-btn>svg{width:14px;height:14px;flex:0 0 auto;color:var(--fg-dim);transform:rotate(-90deg);transition:transform .22s var(--ease);}
.galdd.open .galdd-btn>svg{transform:rotate(90deg);}
.galcog-btn{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease);}
.galcog-btn:hover,.galcog.open .galcog-btn{color:var(--fg);border-color:var(--hero-a);}
.galcog-btn svg{width:16px;height:16px;transition:transform .35s var(--ease);}
.galcog.open .galcog-btn svg{transform:rotate(60deg);}
.galdd-menu,.galcog-menu{position:absolute;bottom:calc(100% + 8px);z-index:40;padding:6px;border-radius:12px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);}
.galdd-menu{left:0;min-width:200px;display:flex;flex-direction:column;gap:2px;}
.galcog-menu{right:0;width:238px;display:flex;flex-direction:column;gap:8px;}
.galdd.open .galdd-menu,.galcog.open .galcog-menu,.galdd-menu.is-open,.galcog-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.galdd-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;border:none;background:none;color:var(--fg-dim);font:inherit;font-size:13px;font-weight:550;text-align:left;cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease);}
.galdd-item:hover{background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);}
.galdd-item.sel{color:var(--fg);background:color-mix(in srgb,var(--hero-a) 13%,transparent);}
.galdd-sw{width:24px;height:24px;border-radius:6px;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.gal-lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);}
.gal-trbar{display:flex;gap:4px;padding:4px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);}
.gal-tr,.gal-dur{flex:1;padding:6px 0;border:none;background:none;border-radius:7px;color:var(--fg-dim);font:inherit;font-size:12px;font-weight:650;cursor:pointer;transition:color .14s var(--ease),background .14s var(--ease);}
.gal-tr:hover,.gal-dur:hover{color:var(--fg);}
.gal-tr.on,.gal-dur.on{color:#fff;}
/* Segmented-Control mit gleitendem Indikator (wie die Tabbar) */
.hsl_seg{position:relative;}
.hsl_seg>button{position:relative;z-index:1;}
.hsl_seg>button.on{background:transparent!important;}   /* Hintergrund liefert der Indikator */
.hsl_seg_ind{position:absolute;z-index:0;left:0;top:0;width:0;height:0;border-radius:7px;background:var(--hero-grad);box-shadow:0 4px 12px -4px rgba(var(--hero-glow),.7),inset 0 1px 0 rgba(255,255,255,.25);pointer-events:none;transition:left .34s cubic-bezier(.5,.05,.2,1),top .34s cubic-bezier(.5,.05,.2,1),width .34s cubic-bezier(.5,.05,.2,1),height .34s cubic-bezier(.5,.05,.2,1);}
.gal-auto{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;transition:.15s var(--ease);}
.gal-auto.on{color:var(--fg);border-color:transparent;background:color-mix(in srgb,var(--hero-a) 14%,transparent);}
.gal-auto svg{width:12px;height:12px;}
@media(max-width:560px){.gal-foot{grid-template-columns:1fr;justify-items:center;}.gal-meta{justify-self:center;}.gal-foot-r{justify-self:center;}}

/* ===== Benachrichtigungs-Center (Glocke im Header) ===== */
.notif{position:relative;flex:0 0 auto;}
.notif-btn{position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease);}
.notif-btn:hover,.notif.open .notif-btn{color:var(--fg);border-color:var(--hero-a);}
.notif-btn svg{width:18px;height:18px;}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--co-red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--border-strong);}
.notif-menu{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:calc(100vw - 32px);z-index:60;border-radius:14px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);overflow:hidden;}
.notif.open .notif-menu,.notif-menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--border);}
.notif-head b{font-size:13.5px;}
.notif-head button{background:none;border:none;color:var(--hero-a);font:inherit;font-size:12px;font-weight:650;cursor:pointer;}
.notif-list{max-height:344px;overflow-y:auto;}
.notif-item{display:flex;gap:11px;padding:12px 15px 12px 22px;border-bottom:1px solid var(--border);cursor:pointer;position:relative;transition:background .14s var(--ease);}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:color-mix(in srgb,var(--fg) 4%,transparent);}
.notif-item.unread::before{content:'';position:absolute;left:9px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--hero-a);}
.notif-ic{width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc,var(--hero-a)) 16%,transparent);color:var(--acc,var(--hero-a));}
.notif-ic svg{width:16px;height:16px;}
.notif-tx{min-width:0;}
.notif-tx b{font-size:12.5px;font-weight:650;display:block;}
.notif-tx p{font-size:12px;color:var(--fg-dim);margin:2px 0 0;line-height:1.4;}
.notif-tx .ts{font-size:11px;color:var(--fg-faint);margin-top:3px;display:block;}
.notif-foot{padding:11px 15px;text-align:center;border-top:1px solid var(--border);}
.notif-foot a{font-size:12.5px;color:var(--hero-a);font-weight:650;text-decoration:none;cursor:pointer;}

/* ===== Gantt / Zeitplan ===== */
.gantt{display:flex;flex-direction:column;gap:8px;overflow-x:auto;}
.gantt-axis{display:flex;padding-left:162px;margin-bottom:2px;min-width:520px;}
.gantt-axis span{flex:1;font-size:11px;font-weight:600;color:var(--fg-dim);text-align:center;}
.gantt-body{position:relative;display:flex;flex-direction:column;gap:8px;min-width:520px;}
.gantt-row{display:flex;align-items:center;gap:12px;}
.gantt-lbl{width:150px;flex:0 0 150px;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gantt-track{position:relative;flex:1;height:24px;border-radius:7px;background:color-mix(in srgb,var(--fg) 5%,transparent);}
.gantt-bar{position:absolute;top:4px;height:16px;border-radius:5px;display:flex;align-items:center;padding:0 8px;font-size:10.5px;font-weight:650;color:#fff;white-space:nowrap;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 8px -4px rgba(0,0,0,.5);cursor:pointer;}
.gantt-now{position:absolute;top:-3px;bottom:6px;width:2px;background:var(--co-red);z-index:3;pointer-events:none;box-shadow:0 0 8px 1px color-mix(in srgb,var(--co-red) 55%,transparent);}
.gantt-now::after{content:'Heute';position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;color:#fff;background:var(--co-red);padding:1px 5px;border-radius:5px;white-space:nowrap;}

/* ===== Audit-/Activity-Timeline ===== */
.timeline{display:flex;flex-direction:column;}
.tl-item{position:relative;padding:0 0 20px 34px;}
.tl-item::before{content:'';position:absolute;left:10px;top:6px;bottom:-6px;width:2px;background:var(--border);}
.tl-item:last-child{padding-bottom:0;}
.tl-item:last-child::before{display:none;}
.tl-dot{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg-card);border:2px solid var(--acc,var(--hero-a));color:var(--acc,var(--hero-a));z-index:1;}
.tl-dot svg{width:11px;height:11px;}
.tl-head{font-size:13px;font-weight:650;}
.tl-meta{font-size:11.5px;color:var(--fg-dim);margin-top:2px;}
.tl-meta .who{color:var(--acc,var(--hero-a));font-weight:650;}
.tl-ts{font-size:11px;color:var(--fg-faint);margin-top:2px;}
.tl-desc{font-size:12.5px;color:var(--fg-dim);margin-top:2px;}
/* Kompakt-Variante (Status-Timeline: einfacher Punkt statt Icon-in-Ring, z.B. Konto-/Lizenz-Verlauf) */
.tl-item.compact{padding:0 0 18px 26px;}
.tl-item.compact::before{left:5px;top:16px;bottom:-2px;}
.tl-item.compact .tl-dot{width:12px;height:12px;top:4px;border:none;background:var(--hero-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 22%,transparent);}
.tl-item.compact .tl-dot.ok{background:var(--co-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--co-green) 22%,transparent);}
.tl-item.compact .tl-dot.warn{background:var(--co-yellow);box-shadow:0 0 0 3px color-mix(in srgb,var(--co-yellow) 22%,transparent);}
.tl-item.compact .tl-dot.bad{background:var(--co-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--co-red) 22%,transparent);}
.tl-item.compact .tl-head{font-size:13px;}
.tl-item.compact .tl-meta{color:var(--fg-faint);margin-top:0;}

/* ===== Kalender-Heatmap ===== */
.heat-wrap{display:flex;flex-direction:column;gap:9px;}
.heat{display:flex;gap:4px;overflow-x:auto;padding-bottom:3px;}
.heat-col{display:flex;flex-direction:column;gap:4px;flex:0 0 auto;}
.heat-cell{width:14px;height:14px;border-radius:3px;background:color-mix(in srgb,var(--fg) 8%,transparent);cursor:pointer;transition:transform .1s var(--ease);}
.heat-cell:hover{transform:scale(1.28);}
.heat-cell.l1{background:color-mix(in srgb,var(--co-green) 32%,transparent);}
.heat-cell.l2{background:color-mix(in srgb,var(--co-green) 56%,transparent);}
.heat-cell.l3{background:color-mix(in srgb,var(--co-green) 78%,transparent);}
.heat-cell.l4{background:var(--co-green);}
.heat-legend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--fg-dim);}
.heat-legend .heat-cell{cursor:default;}
.heat-legend .heat-cell:hover{transform:none;}
/* Gantt: Drag & Drop (verschieben + Dauer per Kante) */
.gantt-bar{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;}
.gantt-bar.dragging{cursor:grabbing;filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -5px rgba(0,0,0,.65);}
.gantt-bar .gh{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize;z-index:1;}
.gantt-bar .gh-l{left:0;border-radius:5px 0 0 5px;}
.gantt-bar .gh-r{right:0;border-radius:0 5px 5px 0;}
.gantt-bar:hover .gh{background:rgba(255,255,255,.16);}
.gantt-hint{font-size:12px;color:var(--fg-dim);margin-top:12px;}

/* Nutzungs-/Quota-Meter */
.quota{display:flex;flex-direction:column;gap:15px;}
.qtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px;}
.qname{font-size:13px;font-weight:600;color:var(--fg);display:inline-flex;align-items:center;gap:8px;}
.qname svg{width:15px;height:15px;color:var(--fg-dim);}
.qval{font-size:12.5px;color:var(--fg-dim);font-variant-numeric:tabular-nums;white-space:nowrap;}
.qval b{color:var(--fg);font-weight:700;}
.qbar{height:9px;border-radius:999px;background:color-mix(in srgb,var(--fg) 9%,transparent);overflow:hidden;}
.qfill{height:100%;width:0;border-radius:999px;background:var(--hero-grad);transition:width 1.1s var(--ease);}
.quota.in .qfill{width:var(--p);}
.qfill.ok{background:linear-gradient(90deg,color-mix(in srgb,var(--co-green),#fff 10%),var(--co-green));}
.qfill.warn{background:linear-gradient(90deg,color-mix(in srgb,var(--co-yellow),#fff 10%),var(--co-yellow));}
.qfill.crit{background:linear-gradient(90deg,color-mix(in srgb,var(--co-red),#fff 10%),var(--co-red));}
/* Speedometer-Gauge (HSL.gauge) */
.gauge{display:flex;flex-direction:column;align-items:center;}
.ga-svg{width:100%;max-width:250px;overflow:visible;}
.ga-zone{fill:none;stroke-width:13;stroke-linecap:butt;}
.ga-needle{stroke:var(--fg);stroke-width:3;stroke-linecap:round;transform-box:view-box;transform-origin:110px 110px;transition:transform 1s var(--ease);}
.ga-hub{fill:var(--fg);}
.ga-val{margin-top:4px;font-size:32px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;}
.ga-val small{font-size:15px;color:var(--fg-dim);font-weight:700;margin-left:2px;}
.ga-lbl{font-size:12px;color:var(--fg-dim);margin-top:5px;text-align:center;}
.ga-legend{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:9px;font-size:11px;color:var(--fg-dim);font-variant-numeric:tabular-nums;}
.ga-legend span{display:inline-flex;align-items:center;gap:5px;}
.ga-legend i{width:9px;height:9px;border-radius:3px;flex:0 0 auto;}
/* KPI-Zahnrad: Aktualisierungs-Intervall per Popup */
.kpigear{position:relative;margin-left:auto;}
.kpigear-btn{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease);}
.kpigear-btn:hover,.kpigear.open .kpigear-btn{color:var(--fg);border-color:var(--hero-a);}
.kpigear .kpigear-btn svg{width:14px;height:14px;color:inherit;transition:transform .3s var(--ease);}   /* scoped auf .kpigear (statt nur .kpigear-btn svg): der Zahn-Button sitzt fast immer in einer .card-h, deren .card-h svg{width:17px;height:17px} (Zeile ~1429) sonst bei GLEICHER Spezifität + späterer Kaskaden-Position gewinnt und das Icon auf 17px statt 14px aufbläst — es überläuft dann das auf 14px zugeschnittene Button-Padding und wirkt optisch unzentriert/verschoben statt sauber mittig */
.kpigear.open .kpigear-btn svg{transform:rotate(60deg);}
.kpigear-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:214px;padding:8px;display:flex;flex-direction:column;gap:8px;border-radius:12px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);}
.kpigear.open .kpigear-menu{opacity:1;transform:translateY(0);pointer-events:auto;}
/* Live-Zeitreihe (HSL.liveSeries) */
.live{display:flex;flex-direction:column;gap:5px;}
.live-top{display:flex;align-items:baseline;justify-content:space-between;}
.live-name{font-size:12.5px;font-weight:650;color:var(--fg);display:inline-flex;align-items:center;gap:7px;}
.live-name .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 8px currentColor;}
.live-val{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fg);}
.ls-svg{width:100%;height:70px;display:block;overflow:visible;}
.ls-line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.live-foot{font-size:11.5px;color:var(--fg-faint);margin-top:4px;}
.live-foot code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg-dim);}
/* Charts (HSL.sparkline / HSL.chart / HSL.donut / HSL.barList) — token-getriebenes Inline-SVG */
.spk{position:relative;display:inline-block;width:120px;height:32px;vertical-align:middle;}
.spk-svg{width:100%;height:100%;display:block;overflow:visible;}
.spk-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.spk-dot{position:absolute;right:0;width:7px;height:7px;border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 3px color-mix(in srgb,var(--bg-card) 65%,transparent);}   /* HTML-Overlay: immer rund */
/* <hsl-sparkline> (Custom Element): anders als der kompakte, inline .spk-Baustein (data-spark in
   Tabellenzellen/.spk-cell-Rastern, s.o.) ist die eigenständige <hsl-sparkline> IMMER ein
   Block-Widget (KPI-Fläche oder ganze Karte) und muss die Container-Breite füllen — genau wie
   die handgebaute .kpi-lead-Sparkline (.spark, s.u.). Rein CSS (SVG width:100% + bereits
   preserveAspectRatio="none" aus der Engine) → folgt jedem Resize automatisch, ohne JS-Redraw.
   Selector-Spezifität (Element+Klasse) schlägt bewusst das kompakte .spk{width:120px} oben. */
hsl-sparkline.spk{display:block;width:100%;height:52px;}
.hc{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:100%;overflow:hidden;}
.hc-svg{width:100%;max-width:100%;height:auto;display:block;}
.hc-plot{position:relative;}
.hc-svg{width:100%;height:auto;display:block;font-family:var(--font,inherit);}
.hc-grid{stroke:var(--border);stroke-width:1;}
.hc-y,.hc-x{fill:var(--fg-faint);font-size:9px;font-variant-numeric:tabular-nums;}
.hc-y{text-anchor:end;}.hc-x{text-anchor:middle;}
.hc-line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.hc-bar{transition:opacity .15s var(--ease);}
.hc-plot:hover .hc-bar{opacity:.82;}
.hc-cross{stroke:var(--fg-dim);stroke-width:1;stroke-dasharray:3 3;transition:opacity .12s var(--ease);}
.hc.is-anim .hc-series{animation:hc-wipe-x 1s var(--ease) forwards;}   /* Fläche+Linie wachsen gemeinsam von links */
.hc.is-anim .hc-bars{animation:hc-wipe-y .8s var(--ease) forwards;}    /* Balken/Stapel wachsen gemeinsam von unten */
@keyframes hc-wipe-x{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes hc-wipe-y{from{clip-path:inset(100% 0 0 0);}to{clip-path:inset(0 0 0 0);}}
.hc-tip{position:absolute;top:4px;pointer-events:none;opacity:0;transition:opacity .12s var(--ease);z-index:5;min-width:96px;padding:7px 9px;border-radius:9px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);font-size:11.5px;}
.hc-tip em{display:block;font-style:normal;font-weight:750;color:var(--fg);margin-bottom:3px;}
.hc-tip span{display:flex;align-items:center;gap:6px;color:var(--fg-dim);line-height:1.7;}
.hc-tip b,.hc-lg b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums;margin-left:auto;padding-left:8px;}
.hc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;}
.hc-lg{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-dim);}
.hc-lg i,.hc-tip span i{width:9px;height:9px;border-radius:3px;flex:0 0 auto;}
/* Donut / Pie */
.dnt{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.dnt-ring{position:relative;width:120px;height:120px;flex:0 0 auto;}
.dnt-svg{width:100%;height:100%;display:block;}
.dnt-seg{transition:stroke-width .15s var(--ease);}
.dnt-ring:not(.is-pie) .dnt-seg:hover{stroke-width:19;}
.dnt-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;pointer-events:none;}
.dnt-center small{font-size:10.5px;font-weight:600;color:var(--fg-dim);}
.dnt-legend{display:flex;flex-direction:column;gap:6px;min-width:0;}
/* Ranked Bar-List */
.blist{display:flex;flex-direction:column;gap:9px;}
.blist-row{display:grid;grid-template-columns:minmax(64px,26%) 1fr auto;align-items:center;gap:11px;font-size:12.5px;}
.blist-lbl{color:var(--fg);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.blist-track{height:9px;border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,transparent);overflow:hidden;}
.blist-bar{display:block;height:100%;border-radius:999px;transition:width .5s var(--ease);}
.blist-val{color:var(--fg);font-weight:750;font-variant-numeric:tabular-nums;}
.spk-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 20px;}
.spk-cell{display:flex;flex-direction:column;gap:6px;font-size:12.5px;min-width:0;}
.spk-cell b{color:var(--fg-dim);font-weight:650;}
.spk-cell .spk{width:auto;height:34px;}   /* Sparkline füllt die Spaltenbreite */
.spk-cell i{font-style:normal;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;}
@media(max-width:680px){.spk-demo{grid-template-columns:repeat(2,1fr);}}

/* Callout / Inline-Banner (HSL.callout) — persistente Status-/Hinweiszeile (≠ transienter Toast) */
.hsl_callout{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.5;border:1px solid transparent;background:var(--bg-card);color:var(--fg);}
.hsl_callout_ic{width:18px;height:18px;flex:0 0 auto;margin-top:1px;}
.hsl_callout_tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.hsl_callout_tx b{font-weight:750;color:var(--fg);}
.hsl_callout_tx span{color:var(--fg-dim);}
.hsl_callout_x{margin-left:auto;flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--fg-faint);padding:2px;border-radius:6px;line-height:0;}
.hsl_callout_x:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent);}
.hsl_callout_x svg{width:14px;height:14px;}
.hsl_callout.is-out{opacity:0;transform:translateY(-4px);transition:opacity .2s var(--ease),transform .2s var(--ease);}
.hsl_callout.ok{background:color-mix(in srgb,var(--co-green) 11%,var(--bg-card));border-color:color-mix(in srgb,var(--co-green) 30%,transparent);}
.hsl_callout.ok .hsl_callout_ic{color:var(--co-green);}
.hsl_callout.info,.hsl_callout.intro{background:color-mix(in srgb,var(--co-blue) 10%,var(--bg-card));border-color:color-mix(in srgb,var(--co-blue) 26%,transparent);}
.hsl_callout.info .hsl_callout_ic,.hsl_callout.intro .hsl_callout_ic{color:var(--co-blue);}
.hsl_callout.warn{background:color-mix(in srgb,var(--co-yellow) 13%,var(--bg-card));border-color:color-mix(in srgb,var(--co-yellow) 34%,transparent);}
.hsl_callout.warn .hsl_callout_ic{color:var(--co-yellow);}
.hsl_callout.bad{background:color-mix(in srgb,var(--co-red) 10%,var(--bg-card));border-color:color-mix(in srgb,var(--co-red) 30%,transparent);}
.hsl_callout.bad .hsl_callout_ic{color:var(--co-red);}
.hsl_callout.intro{border-left:3px solid var(--hero-a);}
/* Empty-State (HSL.empty) — Container ODER Tabellen-Leerzeile */
.hsl_empty,.hsl_empty_row td{text-align:center;}
.hsl_empty_in{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 16px;max-width:340px;margin:0 auto;}
.hsl_empty_ic{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg-faint);}
.hsl_empty_ic svg{width:22px;height:22px;}
.hsl_empty_in b{font-size:14px;font-weight:750;color:var(--fg);}
.hsl_empty_in p{font-size:12.5px;color:var(--fg-dim);margin:0;line-height:1.5;}
.hsl_empty_cta{margin-top:4px;}
/* Copy-Field / Code-Block (HSL.copy) */
.hsl_copy,.hsl_code{display:flex;align-items:center;gap:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--bg-2);border:1px solid var(--border);border-radius:9px;padding:7px 8px 7px 11px;color:var(--fg);}
.hsl_code{align-items:flex-start;white-space:pre;overflow-x:auto;line-height:1.6;}
.hsl_copy code,.hsl_copy input,.hsl_code code{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;overflow:hidden;text-overflow:ellipsis;}
.hsl_copy input:focus{outline:none;}
.hsl_copy_btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--fg-faint);width:30px;height:30px;padding:0;border-radius:7px;line-height:0;transition:color .15s var(--ease),background .15s var(--ease);}
.hsl_copy_btn:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);}
.hsl_copy_btn svg{width:15px;height:15px;}
.hsl_copy_btn.is-copied{color:var(--co-green);}
.hsl_copy_btn .ck{display:none;}.hsl_copy_btn.is-copied .cp{display:none;}.hsl_copy_btn.is-copied .ck{display:inline;}
/* Switch (HSL.switch) — nativer Toggle */
.hsl_switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--fg);user-select:none;}
.hsl_switch input{position:absolute;opacity:0;width:0;height:0;}
.hsl_switch_track{position:relative;width:38px;height:22px;border-radius:999px;background:color-mix(in srgb,var(--fg) 20%,transparent);transition:background .18s var(--ease);flex:0 0 auto;}
.hsl_switch_track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--e1);transition:transform .18s var(--ease);}
.hsl_switch input:checked+.hsl_switch_track{background:var(--hero-a);}
.hsl_switch input:checked+.hsl_switch_track::after{transform:translateX(16px);}
.hsl_switch input:focus-visible+.hsl_switch_track{outline:2px solid var(--hero-a);outline-offset:2px;}
.hsl_switch input:disabled+.hsl_switch_track{opacity:.5;cursor:not-allowed;}
/* Range-Pills / Zeitraum (HSL.rangePills) — nutzt das Segmented-Band (.gal-trbar/.gal-tr) */
.hsl_rangepills{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.hsl_rangepills .gal-trbar{width:auto;}
.hsl_rangepills .gal-tr{flex:0 0 auto;padding:6px 14px;}
.hsl_rp_cust{display:none;align-items:center;gap:6px;}
.hsl_rangepills.is-custom .hsl_rp_cust{display:inline-flex;}
.hsl_rp_cust input[type=date]{font:inherit;font-family:var(--font,inherit);font-size:12.5px;padding:5px 9px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--fg);color-scheme:light dark;}
.hsl_rp_dash{color:var(--fg-faint);}
.hsl_rp_clear{border:0;background:none;cursor:pointer;color:var(--fg-faint);padding:4px;border-radius:6px;line-height:0;}
.hsl_rp_clear:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent);}
.hsl_rp_clear svg{width:13px;height:13px;}

/* ---- heusel.id-Muster (Tier 2): Klassen, die im SSO gerendert werden ---- */
/* Danger-/Warn-Zone-Card (ersetzt inline style="border-color:…" — CSP-konform) */
.card.hsl_card_danger{background:color-mix(in srgb,var(--co-red) 5%,var(--bg-card));border:1px solid color-mix(in srgb,var(--co-red) 50%,var(--border));}
.card.hsl_card_warn{background:color-mix(in srgb,var(--co-yellow) 6%,var(--bg-card));border:1px solid color-mix(in srgb,var(--co-yellow) 52%,var(--border));}
.hsl_card_danger .card-h,.hsl_card_danger .card-h svg{color:var(--co-red);}
.hsl_card_warn .card-h,.hsl_card_warn .card-h svg{color:var(--co-yellow);}
/* Key-Value-Detailliste */
.hsl_dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0;font-size:13px;}
.hsl_dl dt{color:var(--fg-dim);font-weight:600;}
.hsl_dl dd{margin:0;color:var(--fg);font-weight:650;text-align:right;font-variant-numeric:tabular-nums;}
/* Provider-/Passkey-/Credential-Rows (Connected Accounts nutzen dieselbe Row) */
.hsl_pk_list{display:flex;flex-direction:column;}
.hsl_pk_row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);}
.hsl_pk_row:first-child{border-top:0;}
.hsl_pk_ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--bg-2);color:var(--fg-dim);flex:0 0 auto;}
.hsl_pk_ic svg{width:18px;height:18px;}
.hsl_pk_tx{display:flex;flex-direction:column;gap:1px;min-width:0;}
.hsl_pk_name{font-weight:650;color:var(--fg);}
.hsl_pk_meta{font-size:12px;color:var(--fg-dim);}
.hsl_pk_act{margin-left:auto;display:flex;gap:8px;flex:0 0 auto;}
.hsl_pk_add{display:flex;gap:8px;align-items:center;}
.hsl_pk_add input{flex:1;min-width:0;}
/* App-Launcher-Grid + Kacheln (+ Curation-Toggle) */
.hsl_app_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:14px;}
.hsl_app_tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 6px;border-radius:13px;text-decoration:none;color:var(--fg);position:relative;border:0;background:none;cursor:pointer;font:inherit;font-family:var(--font,inherit);transition:background .15s var(--ease);}
.hsl_app_tile:hover{background:color-mix(in srgb,var(--fg) 5%,transparent);}
.hsl_app_ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;color:#fff;box-shadow:var(--e1);}
.hsl_app_ico svg{width:26px;height:26px;}
.hsl_app_lbl{font-size:12px;text-align:center;line-height:1.25;}
.hsl_app_tile_hidden{opacity:.38;}
.hsl_tile_badge{position:absolute;top:5px;right:9px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:var(--bg-card);box-shadow:var(--e1);border:1px solid var(--border);cursor:pointer;color:var(--fg-dim);padding:0;}
.hsl_tile_badge svg{width:13px;height:13px;}
.hsl_tile_badge:hover{color:var(--fg);}
/* Avatar-Upload+Preview-Cluster */
.hsl_avatar_preview{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.hsl_avatar_preview .hsl_avatar{--hsl-av-size:96px;width:96px;height:96px;font-size:32px;flex:0 0 auto;}
.hsl_avatar_upl{display:flex;flex-direction:column;gap:8px;}
.hsl_avatar_upl .frow{gap:8px;}
/* External-Provider-Buttons + „oder"-Divider */
.hsl_ext_form{display:flex;flex-direction:column;gap:9px;}
.hsl_ext_btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--fg);font:inherit;font-family:var(--font,inherit);font-weight:600;font-size:13px;cursor:pointer;transition:background .15s var(--ease);}
.hsl_ext_btn:hover{background:var(--bg-2);}
.hsl_ext_btn svg{width:18px;height:18px;flex:0 0 auto;}
.hsl_or{display:flex;align-items:center;gap:12px;color:var(--fg-faint);font-size:12px;margin:5px 0;}
.hsl_or::before,.hsl_or::after{content:"";flex:1;height:1px;background:var(--border);}
/* Recipe-/Provisioning-Card-Grid (Integrations-Katalog) */
.hsl_recipe_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.hsl_recipe_card{border:1px solid var(--border);border-radius:12px;padding:15px;display:flex;flex-direction:column;gap:11px;background:var(--bg-card);}
.hsl_recipe_head{display:flex;align-items:center;gap:11px;font-weight:700;color:var(--fg);}
.hsl_recipe_ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--bg-2);color:var(--hero-a);flex:0 0 auto;}
.hsl_recipe_ic svg{width:19px;height:19px;}

/* Listview-Erweiterungen: Σ-Fußzeile · Row-Expansion · Lite-Preset (EINE Tabellen-Basis; HSL.sortableTable = Preset) */
.lv tfoot.lv-totals td{font-weight:750;color:var(--fg);border-top:2px solid var(--border-strong);font-variant-numeric:tabular-nums;padding:10px 12px;}
.lv-expcol{width:36px;text-align:center;}
.lv-exp{border:0;background:none;cursor:pointer;color:var(--fg-faint);padding:4px;border-radius:6px;line-height:0;transition:transform .2s var(--ease),color .15s var(--ease);}
.lv-exp svg{width:14px;height:14px;}
tr.datarow.is-open .lv-exp{transform:rotate(90deg);color:var(--hero-a);}
tr.detailrow{display:none;}
tr.detailrow.open{display:table-row;}
tr.detailrow>td{background:var(--bg-2);padding:0;}   /* Detail-Zelle randlos → Inhalt füllt die volle Tabellenbreite (kein Erben der schmalen ersten Spalte) */
.lv-detailin{padding:12px 16px;color:var(--fg-dim);font-size:12.5px;line-height:1.6;}
.lv-lite .lv-head,.lv-lite .lv-bulk,.lv-lite .filterrow,.lv-lite .lv-foot{display:none;}   /* Lite: Chrome ausblenden */
.lv-lite .lv-empty{display:none;}
.lv table{width:100%;}
/* table-layout:fixed war ein Fehlgriff: es hat die per Resize gesetzten/persistierten Spaltenbreiten
   ausgehebelt (Breiten "sprangen zurueck") und die Aktions-Spalte so eng gemacht, dass die ActionBar
   rechts aus der Liste lief. Die Engine setzt die Breiten selbst (colResize + Persistenz) -- auto genuegt.
   Die Aktions-Spalte darf ihre Breite nie unterschreiten, sonst rutschen die Buttons heraus. */
.lv th.lv-actcol,.lv td.tcell-act{white-space:nowrap;}
.lv td.tcell-act .hsl_actions{float:none;}
/* Unten genauso viel Luft wie oben -- ohne Pager schloss die letzte Zeile buendig mit der Card-Kante ab. */

.lv th.col-flex{width:99%;}            /* dynamische Spalte absorbiert den freien Platz (auto-layout Trick) */
.kpi-link{cursor:pointer;}
.kpi-link:hover{filter:brightness(1.05);}
.kpi-link .kpi-num{color:var(--hero-a);}

/* WYSIWYG Board-Editor (HSL.boardEditor) — 3-Panel, Toggles, Ghost/Swap */
.hsl_be{display:flex;flex-direction:column;gap:12px;}
.hsl_be_bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.hsl_be_seg{width:auto;}
.hsl_be_seg .gal-tr{flex:0 0 auto;padding:6px 14px;}
.hsl_be_tools{margin-left:auto;display:flex;gap:8px;}
.hsl_be_main{display:grid;grid-template-columns:350px minmax(0,1fr) 232px;gap:12px;align-items:start;}   /* Palette breit genug fuer echte Feed-Namen */
.hsl_be_side{padding:14px;display:flex;flex-direction:column;gap:9px;}
.hsl_be_board{padding:14px;min-width:0;}
.hsl_be_props{display:flex;flex-direction:column;gap:14px;}
.hsl_be_props .be-prem{align-self:flex-start;}
.hsl_be_side_h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-faint);}
.hsl_be_pal{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;}
/* Palette-Werkzeuge: Suche + Gruppen-Filter. Ohne die ist eine Feed-Liste ab ~20 Eintraegen unbenutzbar. */
.hsl_be_palbar{display:flex;flex-direction:column;gap:6px;}
.hsl_be_palbar .inp,.hsl_be_palbar .sel{width:100%;min-width:0;height:30px;font-size:12.5px;}
.hsl_be_palg{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-faint);}
.hsl_be_palg:first-child{margin-top:0;}
.hsl_be_palgn{padding:0 5px;border-radius:6px;background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg-dim);font-weight:650;letter-spacing:0;}
.hsl_be_palempty{font-size:12px;padding:6px 2px;}
/* Rastergroesse (Spaltenzahl) waehlbar: feineres Raster = kleinere Kacheln (kompakte KPIs). */
.hsl_be_grid{display:flex;align-items:center;gap:7px;font-size:12px;}
.hsl_be_grid .sel{height:30px;font-size:12.5px;min-width:0;width:auto;}
.hsl_be_feed{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;border:1px solid var(--border);background:var(--bg-2);cursor:grab;transition:border-color .15s var(--ease);}
.hsl_be_feed:hover{border-color:var(--hero-a);}
.hsl_be_feed:active{cursor:grabbing;}
.hsl_be_feed_ic{width:28px;height:28px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero-a) 12%,transparent);color:var(--hero-a);}
.hsl_be_feed_ic svg{width:15px;height:15px;}
.hsl_be_feed_tx{display:flex;flex-direction:column;min-width:0;}
.hsl_be_feed_tx b{font-size:12.5px;font-weight:650;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hsl_be_feed_tx span{font-size:10.5px;color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hsl_be_hint{font-size:11px;line-height:1.5;}
.hsl_be_canvas_wrap{border-radius:12px;background:color-mix(in srgb,var(--fg) 3%,transparent);border:1px dashed var(--border-strong);padding:10px;overflow:auto;min-height:320px;}
.hsl_be_canvas_wrap.is-fit{aspect-ratio:16/9;min-height:0;overflow:hidden;}
.hsl_be_canvas{display:grid;gap:10px;min-height:300px;height:100%;position:relative;
  --be-grid:color-mix(in srgb,var(--fg) 9%,transparent);   /* sichtbares Raster: Orientierung beim Snappen */
  background-repeat:repeat;background-origin:content-box;}
.hsl_be_palpager{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px;}
.hsl_be_palpager .iconbtn{width:26px;height:26px;}
.hsl_be_palnext svg{transform:rotate(0deg);}
.hsl_be_palprev svg{transform:rotate(180deg);}
.hsl_be_palinfo{font-size:11px;}
.hsl_be_palgrp{display:flex;align-items:center;gap:6px;font-size:11px;}
.hsl_be_palgrp .sel{flex:1 1 auto;min-width:0;height:28px;font-size:12px;}
.hsl_be_canvas_wrap.is-fit .hsl_be_canvas{min-height:0;}
.hsl_be_canvas.is-drop{outline:2px solid color-mix(in srgb,var(--hero-a) 40%,transparent);outline-offset:-2px;border-radius:8px;}
.hsl_be_ghost{border:2px dashed var(--hero-a);border-radius:9px;background:color-mix(in srgb,var(--hero-a) 10%,transparent);pointer-events:none;z-index:0;}
.hsl_be_empty{grid-column:1 / -1;align-self:center;text-align:center;font-size:12.5px;padding:40px 20px;}
.hsl_be_w{position:relative;display:flex;flex-direction:column;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--e1);overflow:hidden;min-height:0;transition:box-shadow .15s var(--ease),border-color .15s var(--ease);}
.hsl_be_w.is-sel{border-color:var(--hero-a);box-shadow:0 0 0 2px color-mix(in srgb,var(--hero-a) 30%,transparent),var(--e2);}
.hsl_be_w.is-drag{opacity:.92;box-shadow:var(--e3);}
.hsl_be_w.hsl_be_swap{outline:2px dashed var(--co-blue);outline-offset:-2px;}
.hsl_be_w.hsl_be_replace{outline:2px dashed var(--co-yellow);outline-offset:-2px;}
.hsl_be_w_head{display:flex;align-items:center;gap:7px;padding:7px 8px 7px 6px;cursor:grab;background:color-mix(in srgb,var(--fg) 4%,transparent);border-bottom:1px solid var(--border);touch-action:none;}
.hsl_be_w.is-drag .hsl_be_w_head{cursor:grabbing;}
.hsl_be_grip{width:14px;height:14px;color:var(--fg-faint);flex:0 0 auto;}
.hsl_be_w_title{font-size:12.5px;font-weight:650;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.hsl_be_w_type{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--fg-faint);flex:0 0 auto;}
.hsl_be_w_del{flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--fg-faint);padding:2px;border-radius:5px;line-height:0;}
.hsl_be_w_del:hover{color:var(--co-red);background:color-mix(in srgb,var(--co-red) 12%,transparent);}
.hsl_be_w_del svg{width:13px;height:13px;}
.hsl_be_w_body{flex:1;min-height:0;padding:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.hsl_be_rz{position:absolute;right:1px;bottom:1px;width:18px;height:18px;display:grid;place-items:center;cursor:nwse-resize;touch-action:none;color:var(--fg-faint);opacity:.7;}
.hsl_be_rz:hover{color:var(--hero-a);opacity:1;}
.hsl_be_rz svg{width:14px;height:14px;}
.hsl_be_field{display:flex;flex-direction:column;gap:5px;}
.hsl_be_field>label{font-size:11px;font-weight:600;color:var(--fg-dim);}
.hsl_be_desc{font-size:11px;line-height:1.4;margin-top:3px;}
.hsl_be_xy{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.hsl_be_xy input{text-align:center;padding-left:4px;padding-right:4px;min-width:0;}
/* App-eigene Zusatzeigenschaften (types[].props) — optionale Gruppen-Ueberschrift + Hilfetext */
.hsl_be_grp{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-dim);
  border-top:1px solid var(--border);padding-top:12px;margin-top:2px;}
.hsl_be_help{font-size:11px;line-height:1.4;color:var(--fg-faint);}
@media(max-width:860px){.hsl_be_main{grid-template-columns:1fr;}}

/* ---- Tier-4 Bausteine: Checklist · Secret · Rating · Timeline · Trend ---- */
/* Multi-Select-Checkliste (HSL.checklist) */
.hsl_checklist{display:flex;flex-direction:column;}
.hsl_check_item{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--fg);transition:background .13s var(--ease);}
.hsl_check_item:hover{background:color-mix(in srgb,var(--fg) 4%,transparent);}
.hsl_check_item input{position:absolute;opacity:0;width:0;height:0;}
.hsl_check_box{width:19px;height:19px;flex:0 0 auto;border-radius:6px;border:1.5px solid var(--border-strong);display:grid;place-items:center;color:#fff;transition:background .13s var(--ease),border-color .13s var(--ease);}
.hsl_check_box svg{width:12px;height:12px;opacity:0;transition:opacity .13s var(--ease);}
.hsl_check_item input:checked+.hsl_check_box{background:var(--hero-a);border-color:var(--hero-a);}
.hsl_check_item input:checked+.hsl_check_box svg{opacity:1;}
.hsl_check_item input:focus-visible+.hsl_check_box{outline:2px solid var(--hero-a);outline-offset:2px;}
/* Secret-Feld (HSL.secret) */
.hsl_secret{display:flex;width:100%;align-items:center;gap:4px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--bg-2);border:1px solid var(--border);border-radius:9px;padding:5px 5px 5px 11px;}
.hsl_secret_val{flex:1;min-width:0;color:var(--fg);letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}   /* füllt die volle Breite; kein Springen maskiert/sichtbar */
.hsl_secret_val.is-unset{color:var(--fg-faint);font-style:italic;letter-spacing:normal;}
/* Eye + Copy identisch zur Copy/Code-Konvention (Chip-Button 30x30) */
.hsl_secret_btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;cursor:pointer;color:var(--fg-faint);background:none;border-radius:7px;line-height:0;transition:color .15s var(--ease),background .15s var(--ease);}
.hsl_secret_btn:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);}
.hsl_secret_btn svg{width:15px;height:15px;}
/* Sterne-Rating (HSL.rating) */
.hsl_rating{display:inline-flex;gap:2px;}
.hsl_star{border:0;background:none;cursor:pointer;padding:2px;color:var(--fg-faint);line-height:0;transition:color .12s var(--ease),transform .12s var(--ease);}
.hsl_star svg{width:22px;height:22px;}
.hsl_star.on{color:var(--co-yellow);}
.hsl_star:not([disabled]):hover{transform:scale(1.12);}   /* Füllung 1..gehoverter Stern via JS (paint) */
.hsl_star[disabled]{cursor:default;}
/* Trend-Badge (KPI ↑/↓ + Ampel) */
.hsl_trend{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:999px;}
.hsl_trend svg{width:12px;height:12px;}
.hsl_trend.up{color:var(--co-green);background:color-mix(in srgb,var(--co-green) 13%,transparent);}
.hsl_trend.down{color:var(--co-red);background:color-mix(in srgb,var(--co-red) 13%,transparent);}
.hsl_trend.flat{color:var(--fg-dim);background:color-mix(in srgb,var(--fg) 8%,transparent);}
.hsl_trend.down svg{transform:rotate(180deg);}
/* ---- Icon-Auswahl (HSL.iconPicker, CANON §54) ---- */
.ipk-btn{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:11px;border:1px solid var(--border);background:var(--glass);color:var(--fg);font:inherit;font-size:13px;cursor:pointer;}
.ipk-btn:hover{border-color:var(--border-strong);}
.ipk-btn .ic{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:7px;background:color-mix(in srgb,var(--hero-a) 12%,transparent);color:var(--hero-a);}
.ipk-btn .ic svg{width:15px;height:15px;}
.ipk-btn .lbl{font-weight:650;}
.ipk-btn .nm{color:var(--fg-faint);font-size:11.5px;font-family:ui-monospace,monospace;}
.ipk-tabswrap{position:relative;margin:2px 0 4px;}
.ipk-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
.ipk-tabs::-webkit-scrollbar{display:none;}
.ipk-tabs.dragging{cursor:grabbing;user-select:none;}
.ipk-tabs .tab{white-space:nowrap;padding:8px 11px;font-size:12.5px;flex:0 0 auto;}
.ipk-tabs.can-right:not(.can-left){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);}
.ipk-tabs.can-left:not(.can-right){-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px);}
.ipk-tabs.can-left.can-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);}
.ipk-arrow{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;display:none;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;z-index:3;color:var(--fg);background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3);box-shadow:var(--e1);}
.ipk-arrow:hover{background:color-mix(in srgb,var(--bg) 78%,transparent);color:var(--hero-a);}
.ipk-arrow svg{width:14px;height:14px;}
.ipk-arrow.left{left:2px;}
.ipk-arrow.left svg{transform:rotate(180deg);}   /* i-chevron zeigt nativ nach rechts */
.ipk-arrow.right{right:2px;}
.ipk-arrow.show{display:inline-flex;}
/* Feste Hoehe (statt max-height): Kategorie-/Suchwechsel darf die Dialog-Groesse NICHT veraendern */
.ipk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));grid-auto-rows:min-content;align-content:start;gap:6px;height:min(48vh,430px);overflow-y:auto;overscroll-behavior:contain;padding:2px;}
.ipk-cell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 8px;border-radius:10px;border:1px solid transparent;background:none;color:var(--fg-dim);font:inherit;font-size:10.5px;cursor:pointer;}
.ipk-cell:hover{background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg);}
.ipk-cell.ipk-on{border-color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 10%,transparent);color:var(--hero-a);}   /* NICHT .sel — das ist die Select-Feld-Klasse */
.ipk-cell svg{width:20px;height:20px;}
.ipk-cell span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ipk-empty{padding:14px;color:var(--fg-faint);font-size:12.5px;}

/* ---- Zeiterfassung (HSL.timeTrack, CANON §55) ---- */
.hsl_tt{display:flex;flex-direction:column;gap:6px;max-width:560px;}
.hsl_tt .tt-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;border:1px solid var(--border);}
.hsl_tt .tt-row.running{border-color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 7%,transparent);}
.hsl_tt .tt-name{font-weight:650;font-size:13.5px;}
.hsl_tt .tt-sub{font-size:11.5px;color:var(--fg-faint);}
.hsl_tt .tt-time{margin-left:auto;font-family:ui-monospace,monospace;font-size:14px;font-variant-numeric:tabular-nums;}
.hsl_tt .tt-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);background:none;color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.hsl_tt .tt-btn svg{width:15px;height:15px;}
.hsl_tt .tt-row.running .tt-btn{background:var(--hero-a);border-color:var(--hero-a);color:var(--hero-ink);}
.hsl_tt .tt-sum{display:flex;justify-content:flex-end;gap:8px;font-size:12.5px;color:var(--fg-dim);padding:6px 12px 0;}
.hsl_tt .tt-sum b{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--fg);}

/* ---- Unterschrift (HSL.signature, CANON §56) ---- */
.hsl_sig{display:flex;flex-direction:column;gap:8px;max-width:480px;}
.hsl_sig canvas{width:100%;height:160px;border-radius:12px;border:1px dashed var(--border-strong);background:color-mix(in srgb,var(--fg) 3%,transparent);cursor:crosshair;touch-action:none;display:block;}
.hsl_sig.signed canvas{border-style:solid;border-color:var(--hero-a);}
.hsl_sig .sig-foot{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-faint);flex-wrap:wrap;}
.hsl_sig .sig-foot .sig-clear{margin-left:auto;}
/* ---- Plantafel (HSL.dispo, CANON §57) ---- */
.hsl_dispo{display:flex;flex-direction:column;gap:12px;}
.hsl_dispo .dispo-poolbar{display:flex;align-items:center;gap:10px;}
.hsl_dispo .dispo-poolbar .btn{margin-left:auto;}
.hsl_dispo .dispo-pool{display:flex;gap:8px;flex-wrap:wrap;min-height:44px;padding:8px;border-radius:11px;border:1px dashed var(--border-strong);}
.hsl_dispo .dispo-card{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;border:1px solid var(--border);background:var(--glass);font-size:12.5px;font-weight:650;cursor:grab;user-select:none;max-width:100%;min-width:0;box-sizing:border-box;color:var(--fg);}
.hsl_dispo .dispo-card>span:not(.qtag){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hsl_dispo .dispo-card svg{width:13px;height:13px;color:var(--hero-a);flex:none;}
.hsl_dispo .dispo-card .qtag{flex:none;font-size:9.5px;font-weight:750;padding:1px 6px;border-radius:99px;background:color-mix(in srgb,var(--hero-a) 12%,transparent);color:var(--hero-a);}
.hsl_dispo .dispo-card.dragging{opacity:.4;}
.hsl_dispo .dispo-card.qwarn{border-color:#e5a13d;background:color-mix(in srgb,#e5a13d 10%,transparent);}
.hsl_dispo .dispo-card.qwarn .qtag{background:color-mix(in srgb,#e5a13d 18%,transparent);color:#e5a13d;}
.hsl_dispo .dispo-grid{display:grid;grid-template-columns:158px repeat(var(--dispo-days,5),minmax(110px,1fr));gap:6px;overflow-x:auto;}
.hsl_dispo .dg-h{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);padding:4px 6px;}
.hsl_dispo .dg-res{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;padding:6px;flex-wrap:wrap;min-width:0;overflow:hidden;align-content:flex-start;}
.hsl_dispo .dg-res .ini{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:750;background:color-mix(in srgb,var(--hero-a) 16%,transparent);color:var(--hero-a);flex:none;}
.hsl_dispo .dg-res .dg-quals{display:flex;gap:4px;flex-wrap:wrap;flex-basis:100%;padding-left:32px;min-width:0;}
.hsl_dispo .qchip{font-size:9.5px;font-weight:750;letter-spacing:.04em;padding:1px 7px;border-radius:99px;border:1px solid var(--border-strong);color:var(--fg-faint);}
.hsl_dispo .dispo-cell{min-height:44px;border-radius:9px;border:1px solid var(--border);padding:4px;display:flex;flex-direction:column;gap:4px;}
.hsl_dispo .dispo-cell.over{border-color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 7%,transparent);}
.hsl_dispo .dispo-cell.conflict{border-color:#e5484d;background:color-mix(in srgb,#e5484d 8%,transparent);}
.hsl_dispo .dispo-cell .dispo-card{cursor:grab;font-size:11.5px;padding:4px 8px;display:flex;width:100%;}

/* ---- Pruefprotokoll (HSL.protokoll, CANON §58) ---- */
.hsl_proto{display:flex;flex-direction:column;gap:8px;max-width:620px;}
.hsl_proto .pp-row{display:grid;grid-template-columns:1fr 168px 84px;gap:12px;align-items:center;padding:10px 12px;border-radius:11px;border:1px solid var(--border);}
.hsl_proto .pp-row.ok{border-color:color-mix(in srgb,var(--co-green) 55%,var(--border));}
.hsl_proto .pp-row.mangel{border-color:var(--co-red);background:color-mix(in srgb,var(--co-red) 7%,transparent);}
.hsl_proto .pp-name{font-weight:650;font-size:13.5px;}
.hsl_proto .pp-sub{font-size:11.5px;color:var(--fg-faint);}
.hsl_proto .pp-meas{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:12px;color:var(--fg-dim);}
.hsl_proto .pp-meas .inp{width:86px;height:32px;text-align:right;}
.hsl_proto .pp-meas .inp.err{border-color:var(--co-red);}
.hsl_proto .pp-tgl{display:flex;gap:6px;justify-content:flex-end;}
.hsl_proto .pp-tgl button{width:34px;height:32px;padding:0;border-radius:9px;border:1px solid var(--border-strong);background:none;color:var(--fg-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.hsl_proto .pp-tgl button svg{width:15px;height:15px;}
.hsl_proto .pp-tgl button.on-ok{background:color-mix(in srgb,var(--co-green) 16%,transparent);border-color:var(--co-green);color:var(--co-green);}
.hsl_proto .pp-tgl button.on-mangel{background:color-mix(in srgb,var(--co-red) 14%,transparent);border-color:var(--co-red);color:var(--co-red);}
.hsl_proto .pp-foot{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--fg-dim);padding:4px 2px;flex-wrap:wrap;}
.hsl_proto .pp-foot .btn{margin-left:auto;}
.hsl_proto .pp-verdict{font-weight:750;}
.hsl_proto .pp-verdict.ok{color:var(--co-green);}
.hsl_proto .pp-verdict.mangel{color:var(--co-red);}
.hsl_proto .pp-choices{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.hsl_proto .pp-chip{height:30px;padding:0 11px;border-radius:99px;border:1px solid var(--border-strong);background:none;color:var(--fg-dim);font:inherit;font-size:12px;font-weight:650;cursor:pointer;}
.hsl_proto .pp-chip.on{background:color-mix(in srgb,var(--co-green) 16%,transparent);border-color:var(--co-green);color:var(--co-green);}
.hsl_proto .pp-chip.on-mangel{background:color-mix(in srgb,var(--co-red) 14%,transparent);border-color:var(--co-red);color:var(--co-red);}
.hsl_proto .pp-row.wide{grid-template-columns:1fr auto 84px;}   /* Choice/Text: Mittelspalte waechst mit dem Inhalt */
.hsl_proto .pp-meas .pp-text{width:230px;min-width:0;height:32px;box-sizing:border-box;text-align:left;}   /* schlaegt die 86px-Mess-Regel (Spezifitaet) */
.hsl_proto .pp-tgl .tg-na.on-na{background:color-mix(in srgb,var(--fg) 10%,transparent);border-color:var(--fg-dim);color:var(--fg);}
.hsl_proto .pp-row.na{opacity:.75;border-style:dashed;}
.hsl_proto .pp-row.na .pp-meas input,.hsl_proto .pp-row.na .pp-chip{opacity:.45;}
.hsl_proto .pp-nagrund{margin-top:8px;}
.hsl_proto .pp-nagrund .inp{width:100%;min-width:0;height:32px;box-sizing:border-box;font-size:12.5px;}
.hsl_proto .pp-sec{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);padding:10px 2px 2px;}
.hsl_proto .pp-photos{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap;}
.hsl_proto .pp-thumb{position:relative;width:36px;height:36px;border-radius:8px;overflow:hidden;border:1px solid var(--border-strong);}
.hsl_proto .pp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.hsl_proto .pp-thumb button{position:absolute;top:0;right:0;width:14px;height:14px;border:none;border-radius:0 0 0 6px;background:rgba(0,0,0,.55);color:#fff;font-size:9px;line-height:1;cursor:pointer;padding:0;}
.hsl_proto .pp-addphoto{width:36px;height:36px;border-radius:8px;border:1px dashed var(--border-strong);background:none;color:var(--fg-faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.hsl_proto .pp-addphoto svg{width:16px;height:16px;}
.hsl_proto .pp-addphoto.req{border-color:var(--co-yellow);color:var(--co-yellow);}
.hsl_proto .pp-photomiss{font-size:11px;color:var(--co-yellow);font-weight:650;}
/* ---- Etikett (HSL.label/HSL.barcode, CANON §60) — Druck-Realitaet: immer weiss, ALLES zentriert ---- */
.hsl_lbl{background:#fff;color:#111;border-radius:6px;box-shadow:var(--e1);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;overflow:hidden;flex:none;}
.hsl_lbl .lbl-name{font-weight:750;max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35;}
.hsl_lbl .lbl-sub{color:#555;max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35;}
.hsl_lbl .lbl-id{font-family:ui-monospace,monospace;letter-spacing:.14em;max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35;}
.hsl_lbl svg{display:block;flex:0 1 auto;min-height:0;}                      /* bei Platznot schrumpft der CODE */
.hsl_lbl .lbl-name,.hsl_lbl .lbl-sub,.hsl_lbl .lbl-id{flex:none;}            /* ... NIE der Text (Andreas, R8) */

/* ---- Dokument aus Vorlage (HSL.merge/HSL.mergePreview, CANON §61) ---- */
.hsl_doc{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:820px){.hsl_doc{grid-template-columns:1fr;}}
.hsl_doc .doc-src{display:flex;flex-direction:column;gap:10px;}
.hsl_doc textarea{min-height:210px;font-family:ui-monospace,monospace;font-size:12.5px;line-height:1.6;resize:vertical;}
.hsl_doc .doc-prev{background:#fff;color:#111;border-radius:10px;padding:22px 24px;font-size:13px;line-height:1.65;box-shadow:var(--e1);min-height:210px;white-space:pre-wrap;}
.hsl_doc .doc-prev .mfeld{background:color-mix(in srgb,var(--hero-a) 14%,#fff);border-radius:4px;padding:0 3px;}
.hsl_doc .doc-prev .mfehlt{background:#fde5e7;color:#c22;border-radius:4px;padding:0 3px;font-weight:700;}
.hsl_doc .doc-stat{font-size:12px;color:var(--fg-faint);}
.hsl_doc .doc-stat b.err{color:var(--co-red);}
/* ---- Nummernkreis (HSL.numberRange, CANON §62) ---- */
.hsl_numkreis{display:flex;flex-direction:column;gap:12px;max-width:620px;}
.hsl_numkreis .nk-form{display:grid;grid-template-columns:minmax(180px,1fr) 120px 130px;gap:10px;}
.hsl_numkreis .nk-form .inp{min-width:0;box-sizing:border-box;}                       /* Zahlen-Inputs duerfen die Spalte NIE sprengen (R9-Lehre) */
@media (max-width:560px){.hsl_numkreis .nk-form{grid-template-columns:1fr;}}
.hsl_numkreis .nk-next{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.hsl_numkreis .nk-chip{font-family:ui-monospace,monospace;font-size:13px;padding:5px 11px;border-radius:9px;border:1px solid var(--border);background:var(--glass);}
.hsl_numkreis .nk-chip.next{border-color:var(--hero-a);color:var(--hero-a);font-weight:700;}
.hsl_numkreis .nk-err{font-size:12px;color:var(--co-red);}
/* ---- Wartungsplan (HSL.wartung, CANON §63) ---- */
.hsl_wart{display:flex;flex-direction:column;gap:6px;max-width:640px;}
.hsl_wart .wt-row{display:grid;grid-template-columns:14px 1fr 150px 120px;gap:12px;align-items:center;padding:10px 12px;border-radius:11px;border:1px solid var(--border);}
.hsl_wart .wt-dot{width:10px;height:10px;border-radius:50%;}
.hsl_wart .wt-row.ok .wt-dot{background:var(--co-green);}
.hsl_wart .wt-row.due .wt-dot{background:var(--co-yellow);}
.hsl_wart .wt-row.over .wt-dot{background:var(--co-red);}
.hsl_wart .wt-row.over{border-color:var(--co-red);background:color-mix(in srgb,var(--co-red) 6%,transparent);}
.hsl_wart .wt-row.due{border-color:var(--co-yellow);}
.hsl_wart .wt-name{font-weight:650;font-size:13.5px;}
.hsl_wart .wt-sub{font-size:11.5px;color:var(--fg-faint);}
.hsl_wart .wt-due{font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;}
.hsl_wart .wt-due b{display:block;font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;}
.hsl_wart .wt-row.over .wt-due b{color:var(--co-red);}
.hsl_wart .wt-row.due .wt-due b{color:var(--co-yellow);}
.hsl_wart .wt-row.ok .wt-due b{color:var(--co-green);}
.hsl_wart .wt-act{text-align:right;}

/* ---- Plan & Kontingente / Entitlements (HSL.entitlements, CANON §64) ---- */
.hsl_ent{display:flex;flex-direction:column;gap:14px;max-width:680px;}
.hsl_ent .en-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.hsl_ent .en-plan .en-nm{font-weight:750;}
.hsl_ent .en-quota{display:flex;flex-direction:column;gap:10px;}
.hsl_ent .qa{display:grid;grid-template-columns:170px 1fr 130px;gap:12px;align-items:center;font-size:12.5px;}
.hsl_ent .qa .bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--fg) 8%,transparent);overflow:hidden;}
.hsl_ent .qa .bar i{display:block;height:100%;border-radius:99px;background:var(--hero-a);transition:width .3s var(--ease);}
.hsl_ent .qa.warn .bar i{background:var(--co-yellow);}
.hsl_ent .qa.crit .bar i{background:var(--co-red);}
.hsl_ent .qa .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg-dim);white-space:nowrap;}
.hsl_ent .en-limitband{display:none;align-items:center;gap:10px;padding:10px 14px;border-radius:11px;border:1px solid var(--co-red);background:color-mix(in srgb,var(--co-red) 8%,transparent);font-size:12.5px;}
.hsl_ent .en-limitband.on{display:flex;}
.hsl_ent .en-limitband svg{width:16px;height:16px;color:var(--co-red);flex:none;}
.hsl_ent .en-limitband .btn{margin-left:auto;}
.hsl_ent .en-gate{border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;align-items:center;gap:14px;}
.hsl_ent .en-gate .gi{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg-faint);flex:none;}
.hsl_ent .en-gate .gi svg{width:19px;height:19px;}
.hsl_ent .en-gate .gt{font-weight:650;font-size:13.5px;}
.hsl_ent .en-gate .gs{font-size:12px;color:var(--fg-faint);}
.hsl_ent .en-gate .btn{margin-left:auto;}

/* Pre-Gate: ab dem ersten Paint blurren (kein FOUC bevor das Overlay per JS kommt) */
html.hsl_pregate{overflow:hidden;}
html.hsl_pregate #app>:not(.hsl_pingate){filter:blur(22px);}
html.hsl_pregate #app::before{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;background:radial-gradient(130% 120% at 50% -10%,color-mix(in srgb,var(--hero-a) 22%,transparent),transparent 62%),color-mix(in srgb,var(--bg) 62%,transparent);}
/* PIN-Gate (HSL.pinGate) — Vollflächiges Blur/Tint-Overlay, reuse .otp + .chk */
html.hsl_pingate_on{overflow:hidden;}
.hsl_pingate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(130% 120% at 50% -10%,color-mix(in srgb,var(--hero-a) 24%,transparent),transparent 62%),color-mix(in srgb,var(--bg) 66%,transparent);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);animation:hsl-pg-in .3s var(--ease);}
.hsl_pingate.is-out{opacity:0;transition:opacity .26s var(--ease);}
@keyframes hsl-pg-in{from{opacity:0;}}
.hsl_pingate_card{width:min(400px,100%);padding:32px 28px;border-radius:18px;text-align:center;
  background:color-mix(in srgb,var(--fg) 6%,var(--bg-card));   /* leicht angehoben → hebt sich klar vom Blur ab (auch dark) */
  border:1px solid var(--border-strong);
  box-shadow:0 40px 100px -24px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--fg) 7%,transparent),inset 0 1px 0 color-mix(in srgb,var(--fg) 9%,transparent);}
.hsl_pingate_otp input{border:2px solid var(--border-strong);background:var(--bg-2);}   /* deutlicher Rahmen + eigene Fläche */
.hsl_pingate_ic{width:54px;height:54px;margin:0 auto 15px;border-radius:15px;display:grid;place-items:center;background:var(--hero-grad);color:var(--hero-ink);box-shadow:0 10px 26px -8px rgba(var(--hero-glow),.6);}
.hsl_pingate_ic svg{width:27px;height:27px;}
.hsl_pingate_card .auth-h{margin:0 0 6px;}
.hsl_pingate_sub{font-size:13px;color:var(--fg-dim);margin:0 0 22px;line-height:1.5;}
.hsl_pingate_form{display:flex;flex-direction:column;gap:16px;}
.hsl_pingate_otp{justify-content:center;margin:0;}
.hsl_pingate_otp.shake{animation:hsl-pg-shake .42s;}
@keyframes hsl-pg-shake{10%,90%{transform:translateX(-2px);}30%,70%{transform:translateX(5px);}50%{transform:translateX(-7px);}}
.hsl_pingate_err{color:var(--co-red);font-size:12.5px;font-weight:600;margin-top:-4px;}
.hsl_pingate_save{display:flex;justify-content:center;align-items:center;font-size:12.5px;color:var(--fg-dim);gap:8px;white-space:nowrap;cursor:pointer;}
.hsl_pingate_cb{width:16px;height:16px;accent-color:var(--hero-a);margin:0;flex:0 0 auto;cursor:pointer;}
.hsl_pingate_savelbl{white-space:nowrap;}
/* Gantt Snap-Control */
.gantt-tools{display:flex;align-items:center;gap:11px;margin-bottom:14px;flex-wrap:wrap;}
.gantt-tools .gal-lbl{margin:0;}
.gantt-tools .gal-trbar{width:auto;}
.gantt-tools .gal-tr{flex:0 0 auto;padding:6px 16px;}

/* Einheitliche, glassy Fußzeile (wie die Topbar) — voll­breit via negativer Ränder */
/* Exakt der Tabbar-Stil, um 180° gedreht: glassy Bg OHNE Verlauf, Border + Schatten oben statt unten */
.foot{position:fixed;left:var(--navw);right:0;bottom:0;height:var(--footh);z-index:25;padding:0 13px;border-top:1px solid var(--border);transition:left .3s var(--ease);
  background:color-mix(in srgb,var(--bg) 64%,transparent);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 -14px 30px -16px rgba(0,0,0,.5),-1px 0 0 var(--border);   /* -1px 0 0 = Nav-Border läuft an der Footer-Linkskante durch */
  display:flex;align-items:center;justify-content:space-between;gap:16px;}
.foot-note .brand{font-size:13px;letter-spacing:-.01em;}
.foot-l{display:flex;align-items:center;gap:12px;min-width:0;}
.foot-logo{height:22px;width:auto;flex:0 0 auto;display:block;}
.foot-logo .cls-4{fill:var(--fg);}                  /* Text folgt dem Theme (live, weil inline-SVG) */
.foot-logo .cls-1,.foot-logo .cls-6{fill:#70358a;}  /* Marke: Firmenfarben fix */
.foot-logo .cls-2{fill:#ffd50e;}
.foot-logo .cls-5{fill:#ba272e;}
.foot-logo .cls-7{fill:#008f5d;}
.foot-logo .cls-3{fill:none;}
.foot-note{font-size:12px;color:var(--fg-dim);}
.foot-note b{color:var(--fg);font-weight:700;}
.foot-r{display:flex;flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap;}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap;}
.foot-nav a{font-size:12.5px;color:var(--fg-dim);text-decoration:none;transition:color .15s var(--ease);}
.foot-nav a:hover{color:var(--hero-a);}
.foot-cr{font-size:11.5px;color:var(--fg-faint);font-variant-numeric:tabular-nums;}
@media(max-width:640px){.foot{padding:0 12px;}.foot-note,.foot-nav{display:none;}}   /* schmal bleiben: nur Logo + Copyright */
.foot b{color:var(--fg-dim);font-weight:700;}

/* select-Optionen im Dunkeln lesbar (offener Combo-Inhalt) */
option{background:var(--bg-1);color:var(--fg);}   /* alle Combos einheitlich, auch im Dunkeln */
/* Datums-/Zeit-Picker-Icon im Dunkeln sichtbar */
/* Date/Time-Icon folgt der Schriftfarbe (color-scheme themt es bereits hell/dunkel) */
input[type=date],input[type=time]{font-family:inherit;}   /* WebKit-Date/Time erben Schrift nicht automatisch */
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:.85;cursor:pointer;}

/* Spalten-Resize: Textspalten sind IMMER breitenveränderbar */
th{position:relative;}
th .rz{position:absolute;top:0;right:0;bottom:0;width:9px;cursor:col-resize;display:flex;justify-content:center;touch-action:none;}
th .rz::after{content:'';width:2px;margin:8px 0;background:var(--border-strong);border-radius:1px;opacity:0;transition:opacity .15s var(--ease);}
th:hover .rz::after,th .rz:hover::after{opacity:1;}
/* Pager-Bodenleiste jeder ListView */
.lv-foot{display:flex;align-items:center;gap:12px;padding:12px 0 0;border-top:1px solid var(--border);font-size:12.5px;color:var(--fg-dim);}
.lv-foot b{color:var(--fg);font-weight:700;}
.lv-foot .rng{font-variant-numeric:tabular-nums;}
.lv-foot .sp{flex:1;}
.pager{display:flex;align-items:center;gap:6px;}
.pg{min-width:30px;height:30px;padding:0 6px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);cursor:pointer;font:inherit;font-size:13px;transition:.15s var(--ease);}
.pg:hover:not(:disabled){color:var(--fg);border-color:var(--hero-a);}
.pg:disabled{opacity:.4;cursor:default;}
.pg-cur{font-variant-numeric:tabular-nums;padding:0 6px;}
.psize{height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-dim);font:inherit;font-size:12.5px;}
/* Ampel-Spalte: gleicher Abstand links wie rechts zur Nachbarspalte */
.lv th.stat,.lv td.stat{width:22px;padding-left:14px;padding-right:6px;}
/* Control-only-Spalte (Checkbox/Toggle): nur so breit wie das Control, Titel als Tooltip */
.lv th.ctrl,.lv td.ctrl{width:1%;white-space:nowrap;text-align:center;padding-left:9px;padding-right:9px;}
/* Kopf-Bande abrunden (Header oben, Filterzeile unten) */
thead tr:first-child th:first-child{border-top-left-radius:8px;}
thead tr:first-child th:last-child{border-top-right-radius:8px;}
/* Filterzeile (heusel.bi-Muster): teilt die Bande mit dem Header, ein Feld je Textspalte */
tr.filterrow th{background:color-mix(in srgb,var(--hero-c) 30%,transparent);border-bottom:1px solid var(--border-strong);padding:6px var(--pad-card,14px) 8px;}
tr.filterrow th:first-child{border-bottom-left-radius:8px;}
tr.filterrow th:last-child{border-bottom-right-radius:8px;}
/* appearance:none — ohne das malt der Browser dem <select> (und date/search-Feldern) seinen NATIVEN Hintergrund
   darueber (im dunklen Theme sichtbar als schwarzer Kasten). color-scheme erbt vom Theme-Root. */
tr.filterrow input,tr.filterrow select{width:100%;height:30px;font-family:inherit;font-size:12.5px;padding:0 10px;border-radius:8px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg);appearance:none;-webkit-appearance:none;}
tr.filterrow input::placeholder{color:var(--fg-dim);opacity:1;}
tr.filterrow input:focus,tr.filterrow select:focus{outline:none;border-color:var(--hero-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 22%,transparent);}
/* Spaltenfilter standardmäßig eingeklappt — Filter-Icon in der Toolbar öffnet ihn */
tr.filterrow{display:none;}
table.filters-on tr.filterrow{display:table-row;}
.lv-search{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;justify-content:flex-end;}
.lv-search .inp{min-width:0;flex:0 1 300px;}
.filter-toggle.on{color:var(--hero-a);border-color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 10%,transparent);}
/* Sortierbare Kopfzellen (Sortiersymbol) */
th.sortable{cursor:pointer;user-select:none;}
th.sortable .thlabel{display:inline-flex;align-items:center;gap:5px;}
.sort-ind{width:12px;height:12px;opacity:.3;flex:0 0 auto;transition:opacity .15s var(--ease),transform .15s var(--ease);}
th.sortasc .sort-ind{opacity:1;}
th.sortdesc .sort-ind{opacity:1;transform:rotate(180deg);}
/* Leere Liste → Empty-State (immer, wenn ein CTA existiert) */
.lv-empty{display:none;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:40px 20px;color:var(--fg-dim);}
.lv-empty.on{display:flex;}
.lv-empty .ei2{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero-a) 12%,transparent);color:var(--hero-a);}
.lv-empty .ei2 svg{width:23px;height:23px;}
.lv-empty b{font-size:14px;color:var(--fg);}
.lv-empty span{font-size:12.5px;}
.lv-clear{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--fg-dim);text-decoration:none;white-space:nowrap;cursor:pointer;background:none;border:none;font:inherit;}
.lv-clear:hover{color:var(--hero-a);}
/* Scroll-to-top Overlay-Button */
.totop{position:fixed;right:22px;bottom:calc(var(--footh) + 16px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:none;background:var(--hero-grad);color:var(--hero-ink);cursor:pointer;box-shadow:0 12px 28px -10px rgba(var(--hero-glow),1);z-index:250;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);}
.totop.show{opacity:1;transform:none;pointer-events:auto;}
.totop:hover{filter:brightness(1.08);}
.totop svg{width:20px;height:20px;}

/* Toasts (mit optionalen Aktionen — statt hartem Modal) */
.toasts{position:fixed;right:20px;bottom:calc(var(--footh) + 14px);display:flex;flex-direction:column;gap:10px;z-index:400;width:344px;max-width:calc(100vw - 40px);}
.toast{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:13px;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);animation:toastin .3s var(--ease);}
.toast.out{animation:toastout .25s var(--ease) forwards;}
@keyframes toastin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateX(24px)}}
.toast .ti{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;margin-top:1px;}
.toast .ti svg{width:15px;height:15px;}
.toast_success .ti{color:var(--co-green);background:color-mix(in srgb,var(--co-green) 16%,transparent);}
.toast_info .ti{color:var(--co-blue);background:color-mix(in srgb,var(--co-blue) 16%,transparent);}
.toast_warning .ti{color:var(--co-yellow);background:color-mix(in srgb,var(--co-yellow) 16%,transparent);}
.toast_error .ti{color:var(--co-red);background:color-mix(in srgb,var(--co-red) 16%,transparent);}
.toast .tx{flex:1;min-width:0;}
.toast .tt{font-weight:750;font-size:13px;}
.toast .td{color:var(--fg-dim);font-size:12.5px;line-height:1.45;margin-top:2px;}
.toast .tact{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:flex-end;}
/* Border-Farbe je Toast-Typ */
.toast_success{--ring:linear-gradient(150deg,color-mix(in srgb,var(--co-green) 60%,transparent),color-mix(in srgb,var(--co-green) 26%,transparent));}
.toast_info{--ring:linear-gradient(150deg,color-mix(in srgb,var(--co-blue) 60%,transparent),color-mix(in srgb,var(--co-blue) 26%,transparent));}
.toast_warning{--ring:linear-gradient(150deg,color-mix(in srgb,var(--co-yellow) 64%,transparent),color-mix(in srgb,var(--co-yellow) 28%,transparent));}
.toast_error{--ring:linear-gradient(150deg,color-mix(in srgb,var(--co-red) 60%,transparent),color-mix(in srgb,var(--co-red) 26%,transparent));}
.toast .tact .btn{height:30px;min-width:0;padding:0 12px;font-size:12px;animation:none;}
.toast .tclose{background:none;border:none;color:var(--fg-faint);cursor:pointer;padding:2px;flex:0 0 auto;line-height:0;}
.toast .tclose:hover{color:var(--fg);}
.toast .tclose svg{width:15px;height:15px;}

/* Mockup-Navigation (NUR Mockup-Chrome — nicht das System-Tab-Component .tabs/.tab) */
.mocknav{display:flex;gap:3px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;position:relative;padding:8px 26px;cursor:grab;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hero-a) 8%,transparent),transparent 82%),color-mix(in srgb,var(--bg) 64%,transparent);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);box-shadow:0 14px 30px -16px rgba(0,0,0,.5);}
.mocknav.dragging{cursor:grabbing;}
.mocknav::-webkit-scrollbar{display:none;}
/* Fade an den scrollbaren Enden → signalisiert „da kommt noch was" statt abgeschnitten */
.mocknav.can-right:not(.can-left){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);}
.mocknav.can-left:not(.can-right){-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px);}
.mocknav.can-left.can-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);}
/* Sticky-Wrapper trägt die Scroll-Chevrons als unmaskierte Overlays auf dem Fade */
.mocknav-wrap{position:sticky;top:57px;z-index:15;}
.mocknav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;display:none;align-items:center;justify-content:center;border:0;border-radius:50%;cursor:pointer;z-index:3;color:var(--fg);background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3);box-shadow:var(--e1);}
.mocknav-arrow:hover{background:color-mix(in srgb,var(--bg) 78%,transparent);color:var(--hero-a);}
.mocknav-arrow svg{width:15px;height:15px;}
.mocknav-arrow.left{left:5px;}
.mocknav-arrow.left svg{transform:rotate(180deg);}   /* i-chevron zeigt nativ nach rechts (>) → links drehen für < */
.mocknav-arrow.right{right:5px;}
.mocknav-arrow.show{display:inline-flex;}
.mocktab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 13px;border-radius:9px;border:1px solid transparent;background:none;color:var(--fg-dim);font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:color .16s var(--ease);}
/* gleitender Glass-Indikator (Glass-Slider) */
.mock-ind{position:absolute;top:8px;bottom:8px;left:0;width:0;z-index:0;pointer-events:none;border-radius:9px;
  background:radial-gradient(80% 95% at 16% 16%,color-mix(in srgb,var(--hero-a) 15%,transparent),transparent 62%) padding-box,var(--glass) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e1),var(--glass-edge);
  transition:left .3s var(--ease),width .3s var(--ease);}.mocktab svg{width:15px;height:15px;opacity:.85;}
.mocktab:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent);}
.mocktab.active{color:var(--fg);}
/* zentrierte Suchleiste im Header (~33%) */
.topsearch{flex:0 1 34%;max-width:440px;min-width:0;display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg-faint);font:inherit;font-size:13px;cursor:text;transition:.16s var(--ease);}
.topsearch:hover{border-color:var(--hero-a);color:var(--fg-dim);}
.topsearch svg{width:16px;height:16px;flex:0 0 auto;}
.topsearch>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topsearch .kbd{margin-left:auto;flex:0 0 auto;}

/* Command-Palette (Strg K) */
.cmdk{position:fixed;inset:0;z-index:500;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:var(--ov-bg);backdrop-filter:var(--ov-blur);-webkit-backdrop-filter:var(--ov-blur);}
.cmdk.on{display:flex;animation:fadein .18s var(--ease);}
.cmdk-box{width:100%;max-width:560px;max-height:76vh;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;border:1px solid transparent;box-shadow:var(--e2);animation:modin .24s var(--ease);}
.cmdk-in{width:100%;height:52px;padding:0 18px;border:none;background:none;color:var(--fg);font:inherit;font-size:15px;border-bottom:1px solid var(--border);}
.cmdk-in:focus{outline:none;}
.cmdk-list{overflow-y:auto;padding:6px;}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13.5px;position:relative;}
.cmdk-item .ci{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero-a) 14%,transparent);color:var(--hero-a);flex:0 0 auto;}
.cmdk-item .ci svg{width:15px;height:15px;}
.cmdk-item.is-sel,.cmdk-item:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);}
.cmdk-empty{padding:22px;text-align:center;color:var(--fg-faint);font-size:13px;}
.kbd{font-size:11px;color:var(--fg-faint);border:1px solid var(--border-strong);border-radius:5px;padding:1px 6px;font-family:ui-monospace,monospace;}
.cmdk-item .cmdk-enter{position:absolute;right:12px;top:50%;transform:translateY(-50%);visibility:hidden;}   /* aus dem Flow → null Einfluss auf Zeilenhöhe/Icons, egal ob markiert */
.cmdk-item.is-sel .cmdk-enter{visibility:visible;}

/* Header-Info-Bereich über einer ListView */
.lv-intro{display:flex;align-items:flex-start;gap:14px;padding:0 0 12px;margin-bottom:12px;border-bottom:1px solid var(--border);}
.lv-intro .ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero-a) 15%,transparent);color:var(--hero-a);}
.lv-intro .ic svg{width:20px;height:20px;}
.lv-intro .tx{flex:1;min-width:0;}
.lv-intro h3{margin:0;font-size:17px;font-weight:800;color:var(--hero-a);letter-spacing:-.01em;line-height:1.3;}   /* H1 */
.lv-intro p{margin:5px 0 0;font-size:13px;color:var(--fg-dim);line-height:1.65;max-width:none;}   /* volle Breite nutzen */
.lv-intro .stats{display:flex;gap:22px;margin-top:12px;flex-wrap:wrap;}
.lv-intro .st{display:flex;flex-direction:column;gap:1px;align-items:center;text-align:center;}   /* Zahl und Label mittig uebereinander */
.lv-intro .st b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;}
.lv-intro .st span{font-size:10.5px;color:var(--fg-faint);text-transform:uppercase;letter-spacing:.07em;font-weight:700;}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);}
.tab{padding:9px 14px;border:none;background:none;color:var(--fg-dim);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .18s var(--ease),border-color .18s var(--ease);}
.tab:hover{color:var(--fg);}
.tab.active{color:var(--fg);border-bottom-color:var(--hero-a);}
.tabpanel{padding-top:14px;font-size:13.5px;color:var(--fg-dim);line-height:1.6;}
.tabpanel[hidden]{display:none;}
/* Wizard / Stepper */
.stepper{display:flex;align-items:center;}
.step{display:flex;align-items:center;gap:10px;}
.step:not(:last-child){flex:1;}
.step .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-size:12.5px;font-weight:800;border:1px solid var(--border-strong);color:var(--fg-dim);background:color-mix(in srgb,var(--fg) 4%,transparent);font-variant-numeric:tabular-nums;transition:.2s var(--ease);}
.step .dot svg{width:15px;height:15px;}
.step .lbl{font-size:12.5px;font-weight:650;color:var(--fg-dim);white-space:nowrap;}
.step .bar{flex:1;height:2px;border-radius:2px;background:var(--border-strong);margin:0 10px;transition:background .3s var(--ease);}
.step.done .dot{background:var(--hero-grad);border-color:transparent;color:#fff;}
.step.current .dot{border-color:var(--hero-a);color:var(--hero-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 22%,transparent);}
.step.done .lbl,.step.current .lbl{color:var(--fg);}
.step.done .bar{background:var(--hero-grad);}
/* Empty-State */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:44px 20px;}
.empty .ei{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero-a) 12%,transparent);color:var(--hero-a);}
.empty .ei svg{width:26px;height:26px;}
.empty h3{margin:0;font-size:17px;font-weight:800;color:var(--hero-a);letter-spacing:-.01em;line-height:1.3;}   /* H1 */
.empty p{margin:0;font-size:13px;color:var(--fg-dim);max-width:40ch;line-height:1.65;}
.empty .btn{margin-top:4px;}

/* Farbskala Basis + aufgehellt */
.palette{display:flex;flex-direction:column;gap:9px;}
.pal{display:flex;align-items:center;}
.pal .sw{width:48px;height:26px;border:1px solid var(--border);}
.pal .sw:first-child{border-radius:7px 0 0 7px;}
.pal .sw:nth-child(2){border-radius:0 7px 7px 0;margin-left:-1px;}
.pal .pnm{font-size:12.5px;font-weight:650;margin-left:12px;}
/* Glassy Blooming-Kacheln (leer, zum Auswählen) */
.bloomgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--gap);}
.bloom{position:relative;min-height:132px;padding:14px;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--bg-card);box-shadow:var(--e1);display:flex;align-items:flex-end;}
.bloom .lbl2{position:relative;z-index:1;font-size:12px;font-weight:700;color:var(--fg-dim);}
.bloom::before{content:'';position:absolute;inset:0;z-index:0;}
.bloom.b1::before{background:radial-gradient(120% 95% at 14% 6%,color-mix(in srgb,var(--co-green) 42%,transparent),transparent 62%);}
.bloom.b2::before{background:radial-gradient(95% 85% at 6% 4%,color-mix(in srgb,var(--co-blue) 42%,transparent),transparent 58%),radial-gradient(95% 85% at 96% 98%,color-mix(in srgb,var(--co-purple) 40%,transparent),transparent 58%);}
.bloom.b3::before{background:radial-gradient(130% 75% at 50% 125%,color-mix(in srgb,var(--co-red) 44%,transparent),transparent 62%);}
.bloom.b4::before{background:radial-gradient(72% 72% at 50% 42%,color-mix(in srgb,var(--co-yellow) 38%,transparent),transparent 64%);}
.bloom.b5::before{background:radial-gradient(80% 80% at 18% 18%,color-mix(in srgb,var(--co-green) 34%,transparent),transparent 56%),radial-gradient(80% 80% at 88% 26%,color-mix(in srgb,var(--co-blue) 30%,transparent),transparent 56%),radial-gradient(70% 70% at 62% 104%,color-mix(in srgb,var(--hero-a) 28%,transparent),transparent 56%);}

/* Breadcrumb */
/* Breadcrumb im Tabbar-Glas-Look, aber gerundet (nicht full-width sticky) */
.crumbs{position:relative;display:inline-flex;align-items:center;gap:1px;font-size:12.5px;flex-wrap:wrap;padding:5px;border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--hero-a) 9%,transparent),transparent 82%) padding-box,color-mix(in srgb,var(--bg) 62%,transparent) padding-box,var(--ring) border-box;
  border:1px solid transparent;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--e1),var(--glass-edge);}
.crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--fg-dim);text-decoration:none;padding:5px 10px;border-radius:8px;transition:background .15s var(--ease),color .15s var(--ease);}
.crumbs a svg{width:14px;height:14px;}
.crumbs a:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 7%,transparent);}
.crumbs .sep{display:inline-flex;color:var(--fg-faint);}
.crumbs .sep svg{width:13px;height:13px;}
.crumbs .cur{color:var(--fg);font-weight:700;padding:5px 10px;border-radius:9px;
  background:radial-gradient(80% 95% at 16% 16%,color-mix(in srgb,var(--hero-a) 15%,transparent),transparent 62%) padding-box,var(--glass) padding-box,var(--ring) border-box;
  border:1px solid transparent;box-shadow:var(--e1),var(--glass-edge);}   /* aktives Element = Glas-Slider wie aktiver Tab */

/* Datei-Upload / Dropzone */
.drop{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px 20px;border-radius:14px;border:1.5px dashed var(--border-strong);background:color-mix(in srgb,var(--fg) 3%,transparent);cursor:pointer;transition:.18s var(--ease);}
.drop:hover,.drop.over{border-color:var(--hero-a);background:color-mix(in srgb,var(--hero-a) 8%,transparent);}
.drop .di{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--hero-a) 14%,transparent);color:var(--hero-a);}
.drop .di svg{width:22px;height:22px;}
.drop b{font-size:13px;}
.drop small{font-size:12px;color:var(--fg-dim);}
.filelist{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.fileitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;border:1px solid var(--border);background:color-mix(in srgb,var(--fg) 3%,transparent);font-size:12.5px;}
.fileitem .fi{color:var(--co-blue);flex:0 0 auto;}
.fileitem .fi svg{width:16px;height:16px;}
.fileitem .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fileitem .fs{color:var(--fg-faint);font-variant-numeric:tabular-nums;}
.fileitem .fx{background:none;border:none;color:var(--fg-faint);cursor:pointer;padding:2px;line-height:0;}
.fileitem .fx:hover{color:var(--co-red);}
.fileitem .fx svg{width:15px;height:15px;}
.fileitem .fdz-prog{flex:0 0 84px;height:6px;}
.fileitem.done .fdz-prog,.fileitem.failed .fdz-prog{opacity:.85;}

/* Server-Ladezustand der ListView */
.lv-loading .lv-rows{opacity:.5;transition:opacity .2s var(--ease);}
/* Gruppenkopf-Zeile in Tabellen */
tr.grouprow td{background:color-mix(in srgb,var(--hero-c) 30%,transparent);border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);font-weight:750;font-size:12px;letter-spacing:.02em;color:var(--fg);padding:8px 14px;}
tr.grouprow td .gcount{color:var(--fg-faint);font-weight:600;margin-left:6px;}
/* Gruppen-Ebenen (Kanon §8b, 0.24.0) */
tr.grouprow td{cursor:pointer;}
tr.grouprow .grp-chev{display:inline-block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:10px;transition:transform .18s var(--ease);vertical-align:2px;opacity:.75;}
tr.grouprow.is-collapsed .grp-chev{transform:rotate(-45deg);}
tr.grouprow[data-level="1"] td{padding-left:34px;background:color-mix(in srgb,var(--hero-c) 16%,transparent);font-weight:650;font-size:12.5px;border-top-width:0;}
tr.grp-hidden{display:none!important;}
tr.grouprow .gact{float:right;display:inline-flex;gap:6px;}
tr.grouprow .gact button{font:inherit;font-size:11px;font-weight:700;padding:1px 9px;border-radius:7px;border:1px solid var(--border-strong);background:none;color:var(--fg-dim);cursor:pointer;transition:color .14s var(--ease),border-color .14s var(--ease);}
tr.grouprow .gact button:hover{color:var(--fg);border-color:var(--hero-c);}
.lv-ball{background:none;border:none;color:var(--hero-c);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;padding:0;}
/* neue (eingerückte) Zeile beim Hinzufügen */
tr.newrow>td{background:color-mix(in srgb,var(--hero-a) 7%,transparent);}
tr.newrow>td:nth-child(2){box-shadow:inset 3px 0 0 var(--hero-a);}
/* Zeile, deren Kontextmenü offen ist — sichtbar mit dem ••• verbunden */
tbody tr.menu{background:color-mix(in srgb,var(--hero-a) 12%,transparent);}
tbody tr.menu .seg-more{background:var(--hero-grad);color:var(--hero-ink);}
.pop.up{transform-origin:bottom right;}
/* Inline-Edit-Zeile: klappt unter der Zeile auf */
.editrow>td{padding:0;border-top:none;}
.editwrap{max-height:0;overflow:hidden;transition:max-height .34s var(--ease);}
.editrow.open .editwrap{max-height:560px;}
.editform{padding:16px 18px;display:grid;grid-template-columns:1fr 1fr;gap:14px;background:color-mix(in srgb,var(--hero-a) 6%,transparent);border-top:1px solid color-mix(in srgb,var(--hero-a) 32%,transparent);}
.editform .full{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-start;align-items:center;}

/* ===== Komponenten-Galerie ===== */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);}   /* minmax(0,…) → lange Inhalte (Dateinamen) sprengen die Card-Breite nicht */
.card{padding:var(--pad-card,14px);display:flex;flex-direction:column;gap:13px;}   /* EIN Padding-Rhythmus: Card, ListView-Chrome und Graphen sitzen gleich weit vom Rand */
.card-h{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;}   /* H2-Ebene (Karten-Header) */
.card-h svg{width:17px;height:17px;color:var(--acc,var(--fg-dim));}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:11.5px;font-weight:700;color:var(--fg-dim);}
.sel,.ta{width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg);font:inherit;font-size:13px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.sel{appearance:none;-webkit-appearance:none;padding-right:34px;background-repeat:no-repeat;background-position:right 11px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
.ta{height:auto;min-height:66px;padding:9px 12px;resize:vertical;}
/* HSL.vault-Demo (Browser-Verschlüsselung) */
.vault-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.vault-col{display:flex;flex-direction:column;min-width:0;}
.vault-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--fg-faint);margin-bottom:7px;}
.vault-cipher{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;word-break:break-all;}
.vault-out{line-height:1.55;word-break:break-word;}
@media(max-width:720px){.vault-grid{grid-template-columns:1fr;}}
/* Vault-Unlock-Overlay (HSL.vault.unlock) — je nach Modus 6-Box-PIN oder Passphrase-Feld */
.hsl_vault_ov{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--ov-bg);backdrop-filter:var(--ov-blur);-webkit-backdrop-filter:var(--ov-blur);}
.hsl_vault_card{position:relative;width:min(360px,92vw);background:var(--bg-card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--e2);padding:28px 24px 24px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;}
.hsl_vault_card .auth-h{margin:0;}
.hsl_vault_card form{display:flex;flex-direction:column;gap:14px;width:100%;align-items:center;}
.hsl_vault_otp{justify-content:center;}
.hsl_vault_pass{width:100%;min-width:0;}
.hsl_vault_err{color:var(--co-red);font-size:12px;}
.hsl_vault_x{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;background:none;color:var(--fg-faint);cursor:pointer;border-radius:8px;line-height:0;display:grid;place-items:center;}
.hsl_vault_x:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent);}
.hsl_vault_x svg{width:16px;height:16px;}
/* Zugangs-Gate-Demo (HSL.vault.gate) */
.vgate{border:1px dashed var(--border-strong);border-radius:12px;padding:16px;}
.vgate-locked{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.vgate-lockrow{display:inline-flex;align-items:center;gap:8px;color:var(--fg-dim);font-size:13px;}
.vgate-lockrow svg{width:16px;height:16px;}
.sel:focus,.ta:focus{outline:none;border-color:var(--hero-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 24%,transparent);}
.frow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.chk.ic{gap:9px;font-size:13px;color:var(--fg);font-weight:550;}
.switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:550;}
.switch input{position:absolute;opacity:0;width:0;height:0;}
.track{width:40px;height:22px;border-radius:999px;background:var(--border-strong);transition:.2s var(--ease);position:relative;flex:0 0 auto;}
.track::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.35);}
.switch input:checked+.track{background:var(--hero-grad);}
.switch input:checked+.track::after{left:21px;}
.switch input:focus-visible+.track{box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-a) 26%,transparent);}
.chart-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg;}
.donut{width:118px;height:118px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--co-green) 0 62%,var(--co-blue) 62% 82%,var(--co-yellow) 82% 93%,var(--co-red) 93% 100%);
  -webkit-mask:radial-gradient(circle at center,transparent 54%,#000 55%),conic-gradient(#000 var(--sweep),transparent 0);-webkit-mask-composite:source-in;
          mask:radial-gradient(circle at center,transparent 54%,#000 55%),conic-gradient(#000 var(--sweep),transparent 0);mask-composite:intersect;
  }
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sweep{to{--sweep:360deg;}}
.legend2{display:flex;flex-direction:column;gap:9px;font-size:12.5px;font-variant-numeric:tabular-nums;min-width:150px;}
.legend2 span{display:inline-flex;align-items:center;gap:9px;color:var(--fg-dim);}
.legend2 b{color:var(--fg);font-weight:700;margin-left:auto;}
.legend2 i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}
.bars2{display:flex;align-items:flex-end;gap:12px;height:86px;padding-top:6px;}
.bars2 .b{flex:1;border-radius:5px 5px 0 0;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transform-origin:bottom;transform:scaleY(0);}
.bars2.in .b{animation:grow .85s var(--ease) both;}
.bars2.in .b:nth-child(2){animation-delay:.06s}.bars2.in .b:nth-child(3){animation-delay:.12s}.bars2.in .b:nth-child(4){animation-delay:.18s}.bars2.in .b:nth-child(5){animation-delay:.24s}
.overlay{position:fixed;inset:0;background:var(--ov-bg);backdrop-filter:var(--ov-blur);-webkit-backdrop-filter:var(--ov-blur);display:none;align-items:center;justify-content:center;z-index:300;padding:20px;}
.overlay.on{display:flex;animation:fadein .22s var(--ease);}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:520px;max-height:90vh;padding:0;overflow:hidden;display:flex;flex-direction:column;animation:modin .3s var(--ease);background:linear-gradient(var(--bg-card),var(--bg-card)) padding-box,var(--ring) border-box;}
/* Größen (o.size) — GAP §9: Detail-Dialoge (Chart + Tabelle) brauchen mehr als die 440px des Standard-Dialogs.
   Default bleibt md (JS setzt weiter maxWidth:440px inline → bestehende Aufrufer unverändert). min(…,92vw) hält
   den Dialog auch auf schmalen Viewports im Bild. */
.modal-sm{max-width:min(400px,92vw);}
.modal-lg{max-width:min(840px,92vw);}
.modal-xl{max-width:min(1100px,92vw);}
@keyframes modin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-h{padding:17px 20px 14px;font-size:15px;font-weight:750;position:relative;display:flex;align-items:center;gap:8px;flex:none;}
.modal-h svg{width:17px;height:17px;color:var(--acc,var(--fg-dim));flex:none;}   /* optionales Kopf-Icon (o.icon) — GAP §9, gleiches Muster wie .card-h svg */
/* kein Top-Seam mehr — das Modal trägt den Ring-Glow wie jede andere Card */
/* Der Body scrollt, Kopf und Aktionsleiste bleiben stehen (min-height:0 — sonst schrumpft ein Flex-Item nie unter seinen Inhalt). */
.modal-b{padding:2px 20px 6px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;}   /* Scroll endet im Dialog, kettet NIE zur Seite durch */
.modal-b>*{flex-shrink:0;max-width:100%;}   /* Kinder behalten ihre Inhaltshoehe — sonst schrumpft z.B. eine .lv auf Containerhoehe und ihr overflow:hidden clippt die Zeilen: kein Scrollbalken trotz 100+ Zeilen (Picker-Bug 2026-07-18) */
.modal-b>*{width:100%;}
.modal-b .chk.ic,.modal-b .switch{width:auto;}   /* Checkbox/Toggle linksbündig, nicht gestreckt */
.modal-a{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px 18px;margin-top:8px;border-top:1px solid var(--border);flex:none;}
.btn-warn{background:none;border:1px solid color-mix(in srgb,var(--co-yellow) 55%,var(--border-strong));color:var(--co-yellow);box-shadow:none;}
.btn-warn:hover{filter:none;background:color-mix(in srgb,var(--co-yellow) 12%,transparent);box-shadow:none;}
/* Löschen ist IMMER rot — gefüllt (primär) oder rot umrandet (Trigger) */
.btn-danger{background:var(--co-red);color:#fff;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--co-red) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.28);}
.btn-danger-o{background:none;border:1px solid color-mix(in srgb,var(--co-red) 55%,var(--border-strong));color:var(--co-red);box-shadow:none;}
.btn-danger-o:hover{filter:none;background:color-mix(in srgb,var(--co-red) 12%,transparent);border-color:var(--co-red);box-shadow:none;}

.nav-m{display:none;width:36px;height:36px;border-radius:10px;border:none;background:var(--hero-grad);color:var(--hero-ink);cursor:pointer;place-items:center;flex:0 0 auto;margin-right:2px;box-shadow:0 6px 16px -8px rgba(var(--hero-glow),.9);}
.nav-m svg{width:19px;height:19px;}
.nav-backdrop{position:fixed;inset:0;background:var(--ov-bg);backdrop-filter:var(--ov-blur);-webkit-backdrop-filter:var(--ov-blur);z-index:110;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);}
#app.nav-open .nav-backdrop{opacity:1;pointer-events:auto;}
@media (max-width:1000px){
  .shell{grid-template-columns:1fr;}
  #app{--navw:0px;}   /* Nav ist Drawer → Footer volle Breite */
  .nav-resize{display:none;}
  /* Sidebar wird ein Drawer; App-Icon/Hamburger sitzt im Glas-Header */
  .nav{position:fixed;left:0;top:0;bottom:0;width:262px;height:100vh;z-index:120;transform:translateX(-100%);transition:transform .28s var(--ease);box-shadow:0 24px 70px rgba(0,0,0,.5);background:var(--bg);overflow:hidden auto;}
  #app.nav-open .nav{transform:none;}
  .nav-m{display:grid;}
  .topsearch,#topreload,#kitBtn{display:none;}   /* schmaler Header: Suche + Sekundär-Icons (Aktualisieren, Agenten-Kit) zusammen ausblenden */
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
  .legend{grid-template-columns:1fr;}
  .two{grid-template-columns:minmax(0,1fr);}
  .editform{grid-template-columns:1fr;}
  .hide-sm{display:none;}
}
@media (max-width:640px){
  /* Listen werden zu gestapelten Karten (Hauptspalte = Titel, Rest als Label:Wert) */
  .lv table,.lv tbody,.lv tr,.lv td{display:block;}
  .lv thead{position:absolute;left:-9999px;top:-9999px;}
  .lv tbody>tr.datarow,.lv tbody>tr.newrow,
  .lv tbody>tr:not(.editrow):not(.filterrow):not(.grouprow):not(.datarow):not(.newrow){
    position:relative;border:1px solid var(--border);border-radius:12px;margin:8px 10px;padding:12px 40px 10px 34px;background:color-mix(in srgb,var(--fg) 2.5%,transparent);}
  .lv tbody>tr.grouprow{display:block;margin:14px 10px 2px;}
  .lv td{border:none!important;padding:3px 0;display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:13px;}
  .lv td::before{content:attr(data-label);color:var(--fg-faint);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto;}
  .lv td.stat{position:absolute;left:12px;top:15px;padding:0;}
  .lv td.chkcol{position:absolute;right:8px;top:8px;padding:0;}
  .lv td.stat::before,.lv td.chkcol::before{display:none;}
  .lv td.tcell-main{display:block;padding-bottom:4px;}
  .lv td.tcell-main::before{display:none;}
  .lv td.tcell-main .umail{font-size:14px;font-weight:700;}
  .lv td.tcell-act{justify-content:flex-end;padding-top:8px;}
  .lv td.tcell-act::before{display:none;}
  .lv td .inp,.lv td .sel{width:auto;min-width:120px;flex:0 0 auto;}
  .lv-foot{flex-wrap:wrap;gap:8px;}
  .content{padding:16px 10px calc(var(--footh) + 16px);}
}
@media (prefers-reduced-motion:reduce){
  #app::before{animation:none;}
  .kpi-alert .sev{animation:none;opacity:.85;}
  .spark .line{animation:none;stroke-dashoffset:0;}
  .ring .val{animation:none;stroke-dashoffset:calc(236 - 236 * .94);}
  .donut{animation:none;--sweep:360deg;}
  .minibars i,.bars2 .b{animation:none;transform:none;}
  .btn,.nav-logo{animation:none;}
  .kpi[data-accent]{animation:none;}
}