@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;
  /* Palette-Erweiterung (0.45): 7 Hero-Hues + 12 weitere Töne → kohärentes 24-Farben-Rad. Werte sind auf den DUNKLEN Grund abgestimmt; die .light-Variante unten setzt tiefere Werte. */
  --co-teal:#17b8a6; --co-cyan:#34b7d8; --co-indigo:#6d78e6; --co-orange:#f2913d; --co-gold:#e6ad3c; --co-magenta:#ec6aa8; --co-slate:#8792a6;
  --co-lime:#9ccc3f; --co-emerald:#0fb56b; --co-sky:#56b8ef; --co-cobalt:#4258d6; --co-iris:#7c6ce0; --co-lilac:#c98be0; --co-fuchsia:#d94fbf; --co-rose:#f2708c; --co-coral:#f47a5a; --co-amber:#f0a636; --co-sand:#cdb877; --co-steel:#6f869c;
  /* Aufgehellte Zweitvariante je Stammfarbe (für Verläufe/Blooming/CTA-Flow) — color-mix referenziert die Basis-Var, gilt also automatisch pro Theme. */
  --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%);
  --co-teal-l:color-mix(in srgb,var(--co-teal),#fff 32%); --co-cyan-l:color-mix(in srgb,var(--co-cyan),#fff 32%); --co-indigo-l:color-mix(in srgb,var(--co-indigo),#fff 32%); --co-orange-l:color-mix(in srgb,var(--co-orange),#fff 32%); --co-gold-l:color-mix(in srgb,var(--co-gold),#fff 30%); --co-magenta-l:color-mix(in srgb,var(--co-magenta),#fff 32%); --co-slate-l:color-mix(in srgb,var(--co-slate),#fff 32%);
  --co-lime-l:color-mix(in srgb,var(--co-lime),#fff 30%); --co-emerald-l:color-mix(in srgb,var(--co-emerald),#fff 32%); --co-sky-l:color-mix(in srgb,var(--co-sky),#fff 32%); --co-cobalt-l:color-mix(in srgb,var(--co-cobalt),#fff 32%); --co-iris-l:color-mix(in srgb,var(--co-iris),#fff 32%); --co-lilac-l:color-mix(in srgb,var(--co-lilac),#fff 32%); --co-fuchsia-l:color-mix(in srgb,var(--co-fuchsia),#fff 32%); --co-rose-l:color-mix(in srgb,var(--co-rose),#fff 32%); --co-coral-l:color-mix(in srgb,var(--co-coral),#fff 32%); --co-amber-l:color-mix(in srgb,var(--co-amber),#fff 30%); --co-sand-l:color-mix(in srgb,var(--co-sand),#fff 30%); --co-steel-l:color-mix(in srgb,var(--co-steel),#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 */
  /* Schrift-Skala (Kanon §1b, seit 0.51.0): die Groessen, die der Kanon selbst benutzt, unter ihrer Rolle benannt.
     Bis dahin standen sie nur als Zahl in den Regeln, und Apps erfanden eigene Skalen (heusel.ai: Admin --fs-title/-value/
     -body/-label/-dim, Chat --ch-fs). Jeder Wert ist an einen Anker gebunden; test/type-tokens.test.mjs prueft, dass Token
     und Anker gleich bleiben. Die Kanon-Regeln lesen die Tokens (noch) NICHT: Apps definieren gleichnamige Werte auf
     eigenen Huellen (.wp im heusel.ai-Admin), dort wuerden Kanon-Bausteine sonst still ihre Groesse wechseln. */
  --fs-micro:10.5px;    /* Kopf kleiner Tabellen (.hsl_li / .hsl_diff th) */
  --fs-caption:11px;    /* Grossbuchstaben-Kopf: thead th, .kpi-label, .hsl_kpi .kl, .hsl_badge */
  --fs-label:12px;      /* Feld- und Wertbeschriftung .lab */
  --fs-small:12.5px;    /* Nebentext, Hinweis, Fehlertext .err, Toast-Text */
  --fs-ui:13px;         /* Bedienelemente .btn / .inp, Abschnittskopf .sec-h, Toast-Titel */
  --fs-body:13.5px;     /* Fliesstext und Tabellenzellen (table) */
  --fs-title:14px;      /* Kartentitel .card-h */
  --fs-title-lg:15px;   /* Dialog- und Drawer-Titel .modal-h */
  --fs-h1:17px;         /* Seiten- und Abschnittstitel .h1 */
  --fs-value:26px;      /* Kennzahl .hsl_kpi .kv */
  --fs-read:clamp(15.5px,15px + .1vw,16px);   /* Lesetext langer Antworten (Chat, Hilfe) — groesser als --fs-body, fliessend (seit 0.58.0, GAP heusel.ai) */
  --fs-input-touch:16px;   /* Eingabefelder am Telefon: unter 16 px vergroessert iOS Safari beim Antippen die Seite (seit 0.58.0) */
  --fs-value-lg:34px;   /* grosse Kennzahl .kpi-num */
  --font-mono:ui-monospace,Menlo,Consolas,monospace;   /* Code, Kennungen, Hex-Werte — dieselbe Folge wie die Kanon-Regeln */
}
/* ---------- DARK (default, zeigt Glas + Glanz am besten) ---------- */
#app{
  --bg:#0c0b0d; --bg-1:#141118; --bg-2:#1b1722; --bg-card:#17141c;
  --fg:#f4eef3; --fg-dim:#cfc5ce; --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;
  /* Bedeutungs-Namen, die Apps schon lesen (seit 0.51.0; vorher galt immer ihr Hex-Rueckfall). Absichtlich HIER und nicht auf
     :root: var() wird dort aufgeloest, wo die Eigenschaft steht — auf :root bliebe --ok im hellen Thema das dunkle Gruen, weil
     #app.light --co-green erst am #app umsetzt. Hier wirkt die helle Umstellung am selben Element. */
  --ok:var(--co-green);   /* Erfolg, fertig, erreichbar */
  --line:var(--border);   /* Haarlinie, Trenner, leere Spur eines Balkens */
}
/* ---------- 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;
  --co-teal:#0e9384; --co-cyan:#1789a8; --co-indigo:#4a52c9; --co-orange:#d9741a; --co-gold:#b9821a; --co-magenta:#c43d80; --co-slate:#5b6675;
  --co-lime:#6f9a1e; --co-emerald:#0a8a54; --co-sky:#2b82c4; --co-cobalt:#2f3fae; --co-iris:#5544c0; --co-lilac:#9a54bd; --co-fuchsia:#ab2f92; --co-rose:#cc3d5f; --co-coral:#d24e30; --co-amber:#bd7d14; --co-sand:#96803f; --co-steel:#47596c;
  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%);
}
/* Diese Ebene wird NICHT dauerhaft animiert. mix-blend-mode nimmt ihr den Compositor-Schnellweg: sie muesste
   jeden Frame vollflaechig neu verrechnet werden — und weil ihr Backdrop sich dabei bewegt, JEDE
   backdrop-filter-Flaeche darueber (.nav 13px, .glass 7px, .kpi.glass 14px) ihren Blur gleich mit.
   Gemessen: ~7 % GPU-Dauerlast im Leerlauf, endlos. Die Farbstimmung bleibt vollstaendig erhalten.
   @keyframes drift bleibt als dokumentierter Wiederanschalter stehen — bewusst nicht angewandt. */
@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; }
/* Radien (seit 0.58.0, GAP heusel.ai/heusel.bi: es gab keine Radius-Tokens). Benannt nach dem, was das Toolkit schon nutzt — xs Badge, sm Icon-Knopf,
   md Knopf und Eingabe, lg Popover und Menue, xl Karte und Glas, pill Chip. Die Toolkit-Regeln selbst bleiben (noch) bei ihren Pixeln; App-CSS nimmt die Tokens. */
:root{ --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px; }
.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;}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr);}}   /* 0.52.0: „1fr" heisst minmax(auto,1fr) — breiter Inhalt (Baumzeile, Werteliste) schob die Karte am Telefon ueber den Rand */
/* .keep-2 (seit 0.52.0, Fund heusel.ai Postfach-Entwurf): vier Kennzahlen am Telefon als 2x2 statt als Turm aus vier Kacheln; erst
   unter 340px einspaltig (375px-Telefone bleiben zweispaltig). Ohne den Zusatz bleibt .grid-3/.grid-4 wie bisher. */
@media (max-width:640px){.grid-3.keep-2,.grid-4.keep-2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:340px){.grid-3.keep-2,.grid-4.keep-2{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-core, bis 0.51 „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;}
.hsl_rec_head>.pill[hidden]{display:none;}   /* 0.54.0: ohne status keine leere Marke (.pill setzt display und schlug hidden) */

/* ============ 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);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}   /* glassy wie Topbar/Footer; overflow-y: lange Navs scrollen (vorher abgeschnitten) */
.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;background-position:50% 50%;}
.nav-logo svg{width:19px;height:19px;}
.brand{font-weight:650;font-size:19px;letter-spacing:-.03em;color:var(--fg-dim);}   /* „heusel" tritt zurück / dunkel (0.45) */
.brand .dot,.brand .svc{background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;}   /* App-Teil (Punkt + Name) in der Hero-Farbe — vereinheitlichte Wortmarke */
.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;}
/* Anti-Flash: beim ersten Verdrahten setzt HSL.nav die persistierten Collapse-/Rail-Zustände;
   ohne diesen Guard animiert das sichtbar von offen→zu (~500ms). nav-init wird nach einem Reflow entfernt. */
#app.nav-init .nav-grp-b,#app.nav-init .nav-grp-chev,#app.nav-init .nav-lbl,#app.nav-init .nav-sec,#app.nav-init .brand,#app.nav-init .nav{transition:none!important;}
.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:focus{outline:none;}
.hsl_select_opt.sel{color:var(--fg);background:color-mix(in srgb,var(--hero-a) 14%,transparent);font-weight:650;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-a) 55%,transparent);}   /* markierte Zeile: volle Zeilenhoehe wie Hover + klare Umrandung statt duennem Browser-Fokusring */
/* 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 */
.hsl_select_grp{padding:8px 10px 3px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-faint);pointer-events:none;user-select:none;}   /* Gruppen-Header im Select-Dropdown (nicht wählbar) */
.hsl_select_grp:not(:first-child){margin-top:3px;border-top:1px solid var(--border);padding-top:8px;}
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;}
/* HSL.tree 0.52.0 — Haken, Badge, Hinweis, Schalter, Werkzeuge, Ziehen. Die Werkzeuge liegen ueber dem Zeilenende (nehmen dem Namen
   keinen Platz) und blenden mit einem Verlauf ein; Ziehen/Ablegen wie in der Chat-Seitenleiste (gezogene Zeile blass, Ziel gestrichelt). */
.hsl_tree .tn{position:relative;flex-wrap:wrap;row-gap:4px;}   /* reicht die Breite nicht (Telefon), rutschen Badge/Hinweis/Schalter/Zahl in eine zweite Zeile — der Name bleibt lesbar */
.hsl_tree .tn:focus-visible{outline:2px solid var(--hero-a);outline-offset:-2px;}
.hsl_tree .tlbl{min-width:3ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hsl_tree .tchk{display:inline-flex;flex:0 0 auto;cursor:pointer;}
.hsl_tree .tchk input{position:absolute;opacity:0;width:0;height:0;}
.hsl_tree .tbox{width:17px;height:17px;border-radius:5px;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_tree .tbox svg{width:11px;height:11px;opacity:0;}
.hsl_tree .tchk input:checked+.tbox{background:var(--hero-a);border-color:var(--hero-a);}
.hsl_tree .tchk input:checked+.tbox svg{opacity:1;}
.hsl_tree .tchk input:focus-visible+.tbox{outline:2px solid var(--hero-a);outline-offset:2px;}
.hsl_tree .tchk input:disabled+.tbox{opacity:.45;cursor:not-allowed;}
.hsl_tree .tbadge{flex:0 0 auto;}
.hsl_tree .thint{font-size:11.5px;color:var(--fg-faint);white-space:nowrap;}
.hsl_tree .tsw{font-size:12px;font-weight:600;gap:7px;flex:0 0 auto;}
.hsl_tree .tmeta{margin-left:auto;font-size:11px;color:var(--fg-dim);white-space:nowrap;flex:none;}
.hsl_tree .tcount+.tmeta{margin-left:8px;}
.hsl_tree .ttools{position:absolute;top:0;bottom:0;right:4px;display:flex;align-items:center;gap:1px;padding-left:24px;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--fg) 9%,var(--bg)) 22px);opacity:0;pointer-events:none;transition:opacity .12s;}
.hsl_tree .tn:hover>.ttools,.hsl_tree .tn:focus-visible>.ttools,.hsl_tree .tn:has(:focus-visible)>.ttools{opacity:1;pointer-events:auto;}
.hsl_tree .tn.on>.ttools,.hsl_tree .tn[aria-current="true"]>.ttools{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--hero-a) 14%,var(--bg)) 22px);}
.hsl_tree .ttool{flex:none;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:7px;background:transparent;color:var(--fg-dim);cursor:pointer;}
.hsl_tree .ttool:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);}
.hsl_tree .ttool.danger{color:var(--co-red);}
.hsl_tree .ttool.danger:hover{color:var(--co-red);background:color-mix(in srgb,var(--co-red) 14%,transparent);}
.hsl_tree .ttool svg{width:15px;height:15px;}
.hsl_tree li.dragging>.tn{opacity:.45;}
.hsl_tree li.drop-here,.hsl_tree.drop-here{outline:2px dashed var(--co-blue);outline-offset:-2px;border-radius:8px;background:color-mix(in srgb,var(--co-blue) 8%,transparent);}
@media (hover:none){.hsl_tree .ttools{opacity:1;pointer-events:auto;}}   /* Tastgeraete: kein Darueberfahren — Werkzeuge stehen */
/* variant="nav" — die Projektliste der heusel.ai-Chat-Seitenleiste als Vorlage (chat.css .ch-project-head / .ch-session /
   .ch-project-list, Andreas 2026-10-27: Chatdesign bleibt, der Kanon uebernimmt es): Ordner fett, Eintraege einzeilig mit Zeit rechts,
   Kinder mit Fuehrungslinie, die offene Zeile mit Akzentkante. */
.hsl_tree[data-variant="nav"]{font-size:13px;}
.hsl_tree[data-variant="nav"] ul{padding-left:0;display:flex;flex-direction:column;gap:2px;}
.hsl_tree[data-variant="nav"] li{margin:0;}
.hsl_tree[data-variant="nav"] li>ul{padding-left:14px;margin-left:14px;border-left:1px solid color-mix(in srgb,var(--fg) 12%,transparent);margin-top:2px;}
.hsl_tree[data-variant="nav"] li.open>ul{display:flex;}
.hsl_tree[data-variant="nav"] .tn{gap:6px;padding:5px 8px;border-radius:8px;border:1px solid transparent;color:var(--fg);transition:none;}
.hsl_tree[data-variant="nav"] li.haskids>.tn{padding:6px 8px;font-weight:600;border:0;}
.hsl_tree[data-variant="nav"] .tn:hover{background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg);}
.hsl_tree[data-variant="nav"] .tn.on,.hsl_tree[data-variant="nav"] .tn[aria-current="true"]{background:color-mix(in srgb,var(--hero-a) 12%,transparent);border-color:color-mix(in srgb,var(--hero-a) 38%,transparent);}
.hsl_tree[data-variant="nav"] li:not(.haskids)>.tn .tchev{display:none;}
.hsl_tree[data-variant="nav"] .tchev,.hsl_tree[data-variant="nav"] .tico{width:14px;height:14px;color:var(--fg-dim);}
.hsl_tree[data-variant="nav"] .tlbl{flex:1 1 auto;}
.hsl_tree[data-variant="nav"] .tcount{font-size:11px;font-weight:400;color:var(--fg-dim);margin-left:0;}
/* HSL.flow (Kanon §67, seit 0.52.0) — Fluss-Diagramm in Spalten. Alles aus Tokens; Fokus nur ueber Deckkraft (keine Dauer-Animation). */
.hsl_flow{position:relative;min-width:0;}
.hsl_flow .fl-scroll{overflow-x:auto;overflow-y:hidden;}
.hsl_flow .fl-svg{display:block;}
.hsl_flow .fl-head{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;fill:var(--fg-faint);}
.hsl_flow .fl-link{fill:none;stroke-linecap:round;opacity:.42;transition:opacity .15s;}
.hsl_flow .fl-link:hover{opacity:.75;}
.hsl_flow .fl-node{cursor:pointer;transition:opacity .15s;outline:none;}
.hsl_flow .fl-node rect{fill:color-mix(in srgb,var(--bg-card) 82%,transparent);stroke-width:1.4;}
.hsl_flow .fl-node:hover rect,.hsl_flow .fl-node:focus-visible rect{fill:color-mix(in srgb,var(--fg) 7%,var(--bg-card));}
.hsl_flow .fl-node:focus-visible rect{stroke:var(--hero-a);stroke-width:2;}
.hsl_flow .fl-lbl{font-size:13px;font-weight:600;fill:var(--fg);}
.hsl_flow .fl-sub{font-size:11px;fill:var(--fg-dim);font-variant-numeric:tabular-nums;}
.hsl_flow .is-focus .fl-link{opacity:.08;}
.hsl_flow .is-focus .fl-link.on{opacity:.8;}
.hsl_flow .is-focus .fl-node:not(.on){opacity:.3;}
/* Heatmap-Raster (HSL.heatGrid, Kanon §69, seit 0.54.0) — Optik der heusel.ai-Auslastung. Felder sind .heat-cell (l1–l4), dazu Zustaende. */
.hsl_heatgrid{min-width:0;}
.hsl_hg_scroll{overflow-x:auto;}
.hsl_hg{display:grid;gap:2px;align-items:center;grid-template-columns:minmax(5.5rem,9rem) repeat(var(--hg-cols,24),minmax(3px,1fr));min-width:calc(6rem + var(--hg-cols,24) * 5px);}
.hsl_hg .heat-cell{width:auto;height:16px;border-radius:2px;}
.hsl_heatgrid.is-lg .hsl_hg .heat-cell{height:22px;}
.hsl_hg_rn{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:var(--sp-2);}
.hsl_hg_ch{font-size:11px;color:var(--fg-dim);white-space:nowrap;overflow:hidden;padding-left:3px;border-left:1px solid var(--border);}
.hsl_hg_empty{grid-column:1 / -1;font-size:12px;color:var(--fg-dim);}
.heat-cell.is-mark{box-shadow:-2px 0 0 0 color-mix(in srgb,var(--fg) 28%,transparent);}
.heat-cell.is-paused{background:color-mix(in srgb,var(--co-amber) 34%,transparent);}
.heat-cell.is-off{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 16%,transparent);}
.heat-cell.is-off.is-mark{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 16%,transparent),-2px 0 0 0 color-mix(in srgb,var(--fg) 28%,transparent);}
.heat-cell.is-unknown{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--fg) 13%,transparent) 0 2px,transparent 2px 5px);}
.hsl_hg_legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);align-items:center;font-size:12px;color:var(--fg-dim);margin-bottom:var(--sp-2);}
.hsl_hg_legend>span{display:inline-flex;align-items:center;gap:4px;}
.hsl_hg_legend .heat-cell{width:12px;height:12px;cursor:default;}
.hsl_hg_legend .heat-cell:hover{transform:none;}
/* Zeitschiene mit Auswahlfenster (HSL.rangeBrush, Kanon §70, seit 0.54.0) — Optik der heusel.ai-Auslastung; Griffe an den Kanten. */
.hsl_brush{display:flex;flex-direction:column;min-width:0;}
.hsl_brush_pre{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3);min-width:0;max-width:100%;}
.hsl_brush_pre .hsl_rangepills{min-width:0;max-width:100%;}
.hsl_brush_pre .gal-trbar{max-width:100%;overflow-x:auto;scrollbar-width:none;}
.hsl_brush_rail{position:relative;height:40px;cursor:crosshair;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.hsl_brush_rail.is-move{cursor:grab;}
.hsl_brush_rail.is-size{cursor:ew-resize;}
.hsl_brush_rail.is-drag{cursor:grabbing;}
.hsl_brush_bars{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hsl_brush_bars rect{fill:color-mix(in srgb,var(--co-green) 55%,transparent);}
.hsl_brush_win{position:absolute;top:-3px;bottom:-3px;pointer-events:none;border-radius:6px;border:1px solid var(--hero-a);background:color-mix(in srgb,var(--hero-a) 14%,transparent);}
.hsl_brush_h{position:absolute;top:50%;width:6px;height:22px;margin:-11px 0 0 -3px;border-radius:3px;background:var(--hero-a);pointer-events:none;}
.hsl_brush_win:focus-visible,.hsl_brush_h:focus-visible{outline:2px solid var(--hero-a);outline-offset:2px;}
.hsl_brush_axis{position:relative;height:16px;font-size:11px;color:var(--fg-dim);}
.hsl_brush_axis span{position:absolute;top:2px;white-space:nowrap;}
.hsl_brush_empty{position:absolute;inset:0;display:flex;align-items:center;font-size:12px;color:var(--fg-dim);}
.hsl_brush.is-empty .hsl_brush_win,.hsl_brush.is-empty .hsl_brush_h,.hsl_brush:not(.is-empty) .hsl_brush_empty{display:none;}
/* 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);}
/* Status-Anzeige (Kanon §11, 0.50.1): Punkt + Wort, Farbe NUR am Punkt — ruhiger als eine Pille, und in Listen
   mit vielen Zeilen bleibt der Text lesbar. data-state: ok | warn | bad | off | run (run pulsiert: nur opacity,
   compositor-tauglich; ruht bei reduzierter Bewegung). Kanon stand seit 0.12 im Text, der Baustein fehlte. */
.hsl_amp{display:inline-flex;align-items:center;gap:7px;line-height:1.3;}
.hsl_amp::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--fg-faint);}
.hsl_amp[data-state="ok"]::before{background:var(--co-green);}
.hsl_amp[data-state="warn"]::before{background:var(--co-amber);}
.hsl_amp[data-state="bad"]::before{background:var(--co-red);}
.hsl_amp[data-state="off"]{color:var(--fg-dim);}
.hsl_amp[data-state="run"]::before{background:var(--co-sky);animation:hsl-amp-pulse 1.4s ease-in-out infinite;}
@keyframes hsl-amp-pulse{50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){.hsl_amp[data-state="run"]::before{animation:none;}}
/* Verknuepfungen (Kanon §42) */
.hsl_rel{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0;}   /* auch als <ul> benutzbar: ohne Reset bleibt der Browser-Einzug von 40px links stehen (Fund heusel.sync, 04.09.2026) */
.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; }
/* Im Rahmen von heusel.one fuehrt die Shell (Sub-Nav aus one:nav): die eigene Nav der App faellt weg, das Raster wird einspaltig, unten
   bleibt Luft statt der ausgeblendeten Fusszeile (seit 0.58.0, GAP heusel.backup/heusel.ai — beide hatten dieselben drei Regeln lokal). */
#app.shell-one .nav { display: none; }
#app.shell-one .shell { grid-template-columns: 1fr; }
#app.shell-one .content { padding-bottom: 24px; }
/* 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);}
@media (max-width:980px){.kpi-flat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}   /* seit 0.52.0: vorher am Telefon vier gequetschte Spalten */
@media (max-width:340px){.kpi-flat-grid{grid-template-columns:1fr;}}
.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);}
/* Bedeutungs-Namen (seit 0.52.0): CANON §2 nannte data-accent="ok|warn|bad|info" — die gab es nicht, die Kachel blieb ohne Farbe. */
[data-accent=ok]{--acc:var(--co-green);--acc-l:var(--co-green-l);}
[data-accent=warn]{--acc:var(--co-yellow);--acc-l:var(--co-yellow-l);}
[data-accent=bad]{--acc:var(--co-red);--acc-l:var(--co-red-l);}
[data-accent=info]{--acc:var(--co-blue);--acc-l:var(--co-blue-l);}
/* 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;width:max-content;padding:7px 11px;border-radius:8px;font-size:12px;font-weight:650;white-space:normal;overflow-wrap:anywhere;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);background-position:50% 50%;}   /* text-decoration:none — ein <a class="btn"> darf nie unterstrichen sein (Kanon) */
/* Start/Ende = 50% 50% = Ruhestellung von .btn -> Hover setzt nahtlos an und laeuft nahtlos aus. */
@keyframes hero-drift{0%,100%{background-position:50% 50%}25%{background-position:0% 50%}75%{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);animation:hero-drift 7s ease-in-out infinite;}   /* background-position ist eine Paint-Eigenschaft: als Dauer-Animation malt sich JEDER Button 60x/s neu. Nur auf Hover = genau ein Element. */
.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-faint);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-dim);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) */
/* Glas im Glas (seit 0.52.0): JEDE Glasflaeche im Dialog — Liste, Kennzahl, Karte — erbte sonst den kraeftigen Akzent-Ring des
   Dialogs (Fund heusel.ai Postfach-Entwurf: .lv.glass und .kpi.glass leuchteten rosa). Eine eigene data-accent bleibt ihre. */
.modal[data-accent] .glass:not([data-accent]){--ring:var(--ring-flat);}
.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:disabled,.hsl_actions>button:disabled:hover{background:transparent;color:var(--fg-faint);cursor:not-allowed;}   /* 0.54.0: gesperrte Zeilenaktion (disabled(row)) */
.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));}
/* Gedaempft (seit 0.51.0): abgebrochen oder gescheitert, ohne Alarm — z. B. ein Anhang, der dann beim Senden gelesen wird. */
.hsl_prog[data-tone="muted"] .hsl_prog_fill{background:var(--fg-dim);}
/* Schmale Fassungen (seit 0.51.0): thin 4px (Statuszeile), hair 3px (Rand einer Karte). Vorlage sind die Balken des heusel.ai-Chats
   (chat.css .ch-desk-status-bar / .ch-file-progress; Andreas 2026-10-27: Chatdesign bleibt, der Kanon uebernimmt es): flach statt
   Verlauf — auf 3–4px liest sich kein Verlauf —, Spur --fg 12%, kein Innenschatten (er verschluckt die halbe Spur), Fuellung ohne
   eigenen Radius (die Spur schneidet), schnellerer Lauf. Toene flach: fertig --co-green (= --ok), gescheitert danger, gedaempft muted. */
.hsl_prog[data-size="thin"],.hsl_prog[data-size="hair"]{height:4px;border-radius:2px;box-shadow:none;background:color-mix(in srgb,var(--fg) 12%,transparent);}
.hsl_prog[data-size="hair"]{height:3px;}
.hsl_prog[data-size="thin"] .hsl_prog_fill,.hsl_prog[data-size="hair"] .hsl_prog_fill{border-radius:0;background:var(--hero-a);transition:width .4s ease;}
.hsl_prog[data-size="thin"][data-tone="success"] .hsl_prog_fill,.hsl_prog[data-size="hair"][data-tone="success"] .hsl_prog_fill{background:var(--co-green);}
.hsl_prog[data-size="thin"][data-tone="warn"] .hsl_prog_fill,.hsl_prog[data-size="hair"][data-tone="warn"] .hsl_prog_fill{background:var(--co-yellow);}
.hsl_prog[data-size="thin"][data-tone="danger"] .hsl_prog_fill,.hsl_prog[data-size="hair"][data-tone="danger"] .hsl_prog_fill{background:var(--co-red);}
.hsl_prog[data-size="thin"][data-tone="muted"] .hsl_prog_fill,.hsl_prog[data-size="hair"][data-tone="muted"] .hsl_prog_fill{background:var(--fg-dim);}
/* 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[data-tone="danger"] .hsl_prog_binner{background:linear-gradient(90deg,var(--co-red),color-mix(in srgb,var(--co-red) 55%,#fff));}   /* fehlte: endlos + danger lief bis 0.50 im Hero-Verlauf */
.hsl_prog--flow[data-tone="muted"] .hsl_prog_binner{background:var(--fg-dim);}
.hsl_prog--flow[data-size="thin"]:not([data-tone]) .hsl_prog_binner,.hsl_prog--flow[data-size="hair"]:not([data-tone]) .hsl_prog_binner{background:var(--hero-a);}   /* schmal: flach wie die bestimmte Fassung */
.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;}}
/* .prog-list (seit 0.52.0): mehrere .prog-line untereinander teilen EIN Spaltenraster — alle Balken beginnen und enden an derselben
   Stelle, egal wie lang Beschriftung oder Wert ist (vorher hatte jede Zeile ihre eigene auto-Spalte: „2.140 / 6.800" schob den
   Balken weiter nach links als „380 gelesen"). */
.prog-list{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) max-content;column-gap:14px;row-gap:12px;align-items:center;}
.prog-list>.prog-line{grid-column:1/-1;display:grid;grid-template-columns:subgrid;}
.prog-list .prog-cap{max-width:240px;}
@media(max-width:640px){.prog-list{grid-template-columns:minmax(0,1fr) max-content;row-gap:10px;}}
/* Gestapelt (seit 0.52.0): mehrere Teile in EINER Spur, z. B. belegt + diese Auswahl. Jeder Teil traegt seinen Ton. */
.hsl_prog.is-stacked{display:flex;}
.hsl_prog.is-stacked .hsl_prog_fill{flex:none;border-radius:0;}
.hsl_prog.is-stacked .hsl_prog_fill+.hsl_prog_fill{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--bg-card) 70%,transparent);}
.hsl_prog.is-stacked .hsl_prog_fill[data-tone="success"]{background:var(--co-green);}
.hsl_prog.is-stacked .hsl_prog_fill[data-tone="warn"]{background:var(--co-yellow);}
.hsl_prog.is-stacked .hsl_prog_fill[data-tone="danger"]{background:var(--co-red);}
.hsl_prog.is-stacked .hsl_prog_fill[data-tone="muted"]{background:color-mix(in srgb,var(--fg-dim) 70%,transparent);}
.hsl_prog.is-stacked .hsl_prog_fill[data-tone="hero"]{background:var(--hero-a);}
/* 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;}
/* ===== Wartebilder (Kanon §68, seit 0.53.0) — nur opacity/transform in Bewegung, Tokens, prefers-reduced-motion ===== */
/* C ruhige Zeilen: kein Schimmer-Verlauf, die Zeilen atmen in Lesereihenfolge (0,15s versetzt) */
.hsl_skel_calm{display:flex;flex-direction:column;gap:11px;padding:2px 0;}
.hsl_skel_ln{display:block;height:10px;border-radius:5px;background:color-mix(in srgb,var(--fg) 12%,transparent);animation:hsl-breathe 1.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * .15s);}
@keyframes hsl-breathe{0%,100%{opacity:.4}50%{opacity:1}}
/* A Setzkasten: Kasten und Text in EINER Rasterzelle — die Hoehe springt nicht, wenn der Text kommt */
.hsl_typeset{display:grid;min-width:0;}
.hsl_typeset>.ts-set,.hsl_typeset>.ts-text{grid-area:1/1;min-width:0;}
.hsl_typeset .ts-set{transition:opacity .45s ease;}
.hsl_typeset.is-yield .ts-set{opacity:0;}
.hsl_typeset .ts-line{display:flex;gap:6px;height:25px;align-items:center;overflow:hidden;}
.hsl_typeset .ts-b{position:relative;display:block;flex:none;height:11px;border-radius:4px;background:color-mix(in srgb,var(--fg) 13%,transparent);opacity:0;}
.hsl_typeset .ts-b>i{position:absolute;inset:0;border-radius:inherit;background:color-mix(in srgb,var(--hero-a) 60%,transparent);opacity:0;}
.hsl_typeset .ts-set.is-static .ts-b{opacity:.6;}
/* D Bild entsteht */
.hsl_imgprog{display:flex;flex-direction:column;gap:8px;min-width:0;}
.hsl_imgprog .ip-fig{position:relative;margin:0;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg-2);}
.hsl_imgprog .ip-fig>*{position:absolute;inset:0;}
.hsl_imgprog .ip-prevs>img,.hsl_imgprog .ip-final{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.hsl_imgprog .ip-prev{opacity:0;transition:opacity .6s ease;}
.hsl_imgprog .ip-prev.on{opacity:1;}
.hsl_imgprog .ip-final{opacity:0;transition:opacity .6s ease;}
.hsl_imgprog .ip-final.on{opacity:1;}
.hsl_imgprog .ip-noise{inset:-40%;transition:opacity .9s ease;will-change:transform;animation:hsl-ip-drift 7s ease-in-out infinite alternate;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@keyframes hsl-ip-drift{from{transform:translate(0,0);}to{transform:translate(-6%,4%);}}
.hsl_imgprog .is-done .ip-noise,.hsl_imgprog .is-failed .ip-noise{animation:none;}
.hsl_imgprog .ip-bar{inset:auto 0 0 0;height:3px;background:var(--hero-a);transform:scaleX(0);transform-origin:left center;transition:transform .5s ease,opacity .6s ease;}
.hsl_imgprog .is-done .ip-bar{opacity:0;}
.hsl_imgprog .is-failed .ip-bar{background:var(--co-red);}
.hsl_imgprog .ip-meta{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--fg-faint);font-variant-numeric:tabular-nums;}
.hsl_imgprog .ip-time{margin-left:auto;}
/* E Hintergrund entfernen: Schachbrett aus Tokens, Scan-Band und Wischen nur ueber transform */
.hsl_cutout{position:relative;width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg-2);}
.hsl_cutout>*{position:absolute;inset:0;}
.hsl_cutout img{width:100%;height:100%;object-fit:contain;display:block;}
.hsl_cutout .co-chk{--co-a:color-mix(in srgb,var(--fg) 7%,var(--bg-2));--co-b:var(--bg-2);background-color:var(--co-b);background-image:conic-gradient(var(--co-a) 25%,transparent 0 50%,var(--co-a) 0 75%,transparent 0);background-size:18px 18px;}
#app.light .hsl_cutout .co-chk{--co-a:color-mix(in srgb,var(--fg) 8%,var(--bg-1));--co-b:var(--bg-1);}
.hsl_cutout .co-res{opacity:0;}
.hsl_cutout.is-reveal .co-res{opacity:1;}
.hsl_cutout .co-orig{overflow:hidden;transition:transform .9s cubic-bezier(.6,0,.3,1);}
.hsl_cutout .co-orig-in{position:absolute;inset:0;transition:transform .9s cubic-bezier(.6,0,.3,1);}
.hsl_cutout.is-reveal .co-orig{transform:translateX(100%);}
.hsl_cutout.is-reveal .co-orig-in{transform:translateX(-100%);}
.hsl_cutout .co-scan{background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-60%);animation:hsl-co-scan 1.5s ease-in-out infinite alternate;pointer-events:none;}   /* weisser Lichtstreif auf dem FOTO — themenunabhaengig */
@keyframes hsl-co-scan{from{transform:translateX(-60%);}to{transform:translateX(60%);}}
.hsl_cutout.is-reveal .co-scan,.hsl_cutout.is-failed .co-scan{opacity:0;animation:none;transition:opacity .2s ease;}
.hsl_cutout .co-edge{pointer-events:none;opacity:0;transition:transform .9s cubic-bezier(.6,0,.3,1),opacity .3s ease;}
.hsl_cutout .co-edge>i{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--hero-a);box-shadow:0 0 12px var(--hero-a);}
.hsl_cutout.is-reveal .co-edge{transform:translateX(100%);opacity:1;}
.hsl_cutout.is-done .co-edge{opacity:0;}
/* B Bausteine: Schreibmarke und Fundstellen-Chip (der Chat setzt daraus zusammen) */
.hsl_caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-.16em;background:var(--hero-a);animation:hsl-caret 1s steps(1) infinite;}
@keyframes hsl-caret{50%{opacity:0;}}
.hsl_found_list{display:flex;flex-wrap:wrap;gap:6px;}
.hsl_found{position:relative;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 5px;border-radius:8px;font-size:12.5px;line-height:1.4;color:var(--fg-dim);background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid var(--border);animation:hsl-found-in .4s ease backwards;transition:opacity .4s ease;}   /* backwards, nicht both: sonst haelt der Endwert opacity:1 und .is-quiet wirkt nie */
#app.light .hsl_found{background:var(--bg-1);}
.hsl_found::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:1px solid color-mix(in srgb,var(--hero-a) 60%,transparent);opacity:0;pointer-events:none;animation:hsl-found-new 1.3s ease both;}   /* neu gefunden: Akzentrand, der verblasst */
.hsl_found .fnum{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:5px;font-size:11px;font-weight:600;color:var(--fg);background:color-mix(in srgb,var(--fg) 10%,transparent);font-variant-numeric:tabular-nums;}
.hsl_found svg{width:14px;height:14px;flex:none;}
.hsl_found .ft{color:var(--fg);}
.hsl_found .fw{color:var(--fg-faint);}
.hsl_found.is-quiet{opacity:.5;}   /* am Ende nicht zitiert: tritt zurueck */
@keyframes hsl-found-in{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
@keyframes hsl-found-new{0%,50%{opacity:1;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .hsl_skel_ln{animation:none;opacity:.7;}
  .hsl_typeset .ts-set{transition:none;}
  .hsl_imgprog .ip-noise{animation:none;}.hsl_imgprog .ip-prev,.hsl_imgprog .ip-final,.hsl_imgprog .ip-noise,.hsl_imgprog .ip-bar{transition:none;}
  .hsl_cutout .co-scan{display:none;}.hsl_cutout .co-orig,.hsl_cutout .co-orig-in,.hsl_cutout .co-edge{transition:none;}
  .hsl_caret{animation:none;}
  .hsl_found,.hsl_found::after{animation:none;}.hsl_found{transition:none;}}
@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;}   /* nur noch der Startwert der Bewegung: HSL.accordion hebt den Deckel nach dem Aufklappen auf (0.52.0) */
.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-card>.hsl_callout{margin-bottom:14px;}   /* Fehler-/Hinweis-Callout steht VOR dem Formular (außerhalb .auth-form → kein gap) — sonst klebt es am ersten Feld */
.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:650;letter-spacing:-.01em;color:var(--fg-dim);}   /* „heusel" zurückgenommen (0.45) — vereinheitlicht mit .brand */
.auth-word .dot{color:var(--hero-a);text-shadow:0 0 12px color-mix(in srgb,var(--hero-a) 55%,transparent);}
.auth-word .svc{color:var(--hero-a);font-weight:800;}   /* App-Teil in der Hero-Farbe */
.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;}
/* HSL.menu (Kanon §65, seit 0.51.0) — Aktionsmenue. Vorlage ist das Menue des heusel.ai-Chats (chat.css .ch-menu, Stand
   2026-10-27; Andreas: „Chatdesign so lassen") — Masse, Farben und Uebergang sind von dort uebernommen, damit der Chat ohne
   sichtbare Aenderung umstellen kann. Das Zeilenmenue der ListView (.pop) bleibt, wie es ist.
   ZU AUCH UNSICHTBAR (visibility, nicht nur opacity): sonst sind die Eintraege eines geschlossenen Menues per Tab erreichbar und
   fuer Vorlesehilfen da (Fund im Chat, 2026-10-26). visibility folgt nach dem Ausblenden.
   width:max-content ist Pflicht: ohne eigene Breite bekaeme das Panel am rechten Rand nur Fensterbreite minus left (derselbe
   Fehler wie beim Tooltip, .gtip). flex:none an den Kindern: sonst quetscht max-height die Eintraege, statt zu rollen. */
.hsl_menu{position:fixed;z-index:2000;display:flex;flex-direction:column;width:max-content;max-width:min(280px,calc(100vw - 16px));
  padding:4px;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-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;}
.hsl_menu.up{transform:translateY(6px);}
.hsl_menu.open{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;transition-delay:0s;}
.hsl_menu>*{flex:none;}
.hsl_menu:focus{outline:none;}
.hsl_menu button{display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;height:auto;padding:7px 10px;border:0;border-radius:8px;
  background:none;color:var(--fg);font:inherit;font-size:13px;line-height:1.4;text-align:left;white-space:nowrap;cursor:pointer;}
.hsl_menu button:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);}
.hsl_menu button:focus-visible{outline:none;background:color-mix(in srgb,var(--fg) 8%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hero-a) 60%,transparent);}
.hsl_menu button svg{flex:none;width:15px;height:15px;color:var(--fg-dim);}
.hsl_menu button:hover svg{color:var(--fg);}
.hsl_menu .ml{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.hsl_menu .mg{flex:none;width:15px;}   /* Platz eines Symbols fuer Eintraege ohne eines */
.hsl_menu .mk{margin-left:auto;padding-left:14px;font-size:11.5px;color:var(--fg-faint);}
/* Umschalter: Haken rechts, nur wenn an — die Zeile bleibt sonst wie jede andere (Vorlage .ch-plain-toggle) */
.hsl_menu svg.mc{margin-left:auto;opacity:0;color:var(--co-green);}
.hsl_menu .mk+svg.mc{margin-left:8px;}
.hsl_menu [aria-checked="true"] svg.mc{opacity:1;}   /* im Hover wie jedes Symbol --fg, wie in der Vorlage */
/* Kopieren: genau eines der beiden Symbole zeigt (Vorlage .ch-menu-item.hsl_copy_btn) */
.hsl_menu svg.ck{display:none;}
.hsl_menu button.is-copied svg.cp{display:none;}
.hsl_menu button.is-copied svg.ck{display:block;color:var(--co-green);}
.hsl_menu button.dgr:hover{background:color-mix(in srgb,var(--co-red) 16%,transparent);color:var(--co-red);}
.hsl_menu button.dgr:hover svg{color:var(--co-red);}
.hsl_menu button[aria-disabled="true"]{opacity:.5;cursor:default;}
.hsl_menu button[aria-busy="true"]{cursor:progress;}
.hsl_menu .menu-sep{height:1px;margin:4px 6px;background:var(--border);}
.hsl_menu .menu-h{padding:7px 10px 3px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);}
.hsl_menu .menu-h:first-child{padding-top:3px;}
@media (pointer:coarse){.hsl_menu button{min-height:44px;}}   /* Tippflaeche wie in der Vorlage (chat.css, Tastgeraete 44px) */
@media (prefers-reduced-motion:reduce){.hsl_menu{transition:none;transform:none;}}

/* ============ 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;
  }   /* keine kpibloom-Dauer-Animation: die vier @property-Prozente speisen zwei Radial-Gradients, jede
        Aenderung = volles Repaint der Karte pro Frame. Statisch stehen sie auf den @property-Initialwerten
        (14%/10% und 86%/90%) — optisch die dokumentierte Ruhestellung. */
/* 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;}
.gal-trbar>.gal-tr{white-space:nowrap;}   /* seit 0.52.0: „12 Monate" brach am Telefon in zwei Zeilen */
@media (max-width:640px){.gal-trbar{overflow-x:auto;scrollbar-width:none;}.gal-trbar::-webkit-scrollbar{display:none;}.gal-trbar>.gal-tr{padding:6px 8px;}}   /* reicht der Platz nicht, rollt die Leiste statt umzubrechen */
/* 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;}
/* Gauge-Variante arc (seit 0.58.0): gefüllter Bogen in der Farbe aus den Daten, Mitte + Unterzeile; keine Zonen, keine Nadel. */
.ga-track{fill:none;stroke:color-mix(in srgb,var(--fg) 10%,transparent);stroke-width:13;stroke-linecap:round;}
.ga-fill{fill:none;stroke-width:13;stroke-linecap:round;transition:stroke-dasharray .8s var(--ease),stroke .3s var(--ease);}
.ga-arc{display:flex;flex-direction:column;align-items:stretch;text-align:center;min-width:0;}
.ga-arc .ga-svg{display:block;margin:0 auto;}
.ga-arc .ga-val{margin-top:-34%;font-size:clamp(18px,9cqw,32px);white-space:nowrap;}
.ga-arc{container-type:inline-size;}
/* 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;}
/* Chart-Erweiterungen (seit 0.58.0, Board-Anforderungen heusel.bi): fit füllt die Kachel, Text in echten Pixeln; Ziellinie, Summen, Datenbeschriftung,
   Punkte je Wert, waagerechte Balken wachsen von links, Klick-Cursor. */
.hc.is-fit{height:100%;}
.hc.is-fit .hc-plot{flex:1 1 auto;min-height:0;}
.hc.is-fit .hc-svg{height:100%;}
.hc.is-fit .hc-y,.hc.is-fit .hc-x,.hc.is-fit .hc-sum,.hc.is-fit .hc-dl,.hc.is-fit .hc-tl{font-size:11px;}
.hc-sum,.hc-dl{fill:var(--fg-dim);font-size:9px;font-weight:700;font-variant-numeric:tabular-nums;text-anchor:middle;}
.hc-sum{fill:var(--fg);}
.hc-end{text-anchor:start;}
.hc-target{stroke-width:1.5;stroke-dasharray:5 4;}
.hc-tl{font-size:9px;font-weight:700;text-anchor:end;paint-order:stroke;stroke:var(--bg-card);stroke-width:3px;}
.hc-tl.hc-mid{text-anchor:middle;}
.hc-pt{stroke:var(--bg-card);stroke-width:1.5;}
.hc.is-anim .hc-hbars{animation:hc-wipe-x .8s var(--ease) forwards;}
.hc.hc-click .hc-plot,.dnt.hc-click .dnt-seg{cursor:pointer;}
/* 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;}
.dnt.is-fit{height:100%;flex-wrap:nowrap;}   /* seit 0.58.0: Ring folgt der Höhe, die Legende rollt statt abgeschnitten zu werden */
.dnt.is-fit .dnt-ring{width:auto;height:100%;aspect-ratio:1;max-width:55%;}
.dnt.is-fit .dnt-legend{flex:1 1 0;min-width:0;max-height:100%;overflow-y:auto;overflow-x:hidden;}
.dnt.is-fit .hc-lg{display:grid;grid-template-columns:9px minmax(0,1fr) auto;column-gap:7px;align-items:center;overflow-wrap:anywhere;}   /* Farbe | Text (bricht um) | Wert */
/* Schmale Kachel (unter 300 px, setzt HSL.donut): Ring oben, Legende als Zeile darunter — daneben bliebe für den Text kein Platz. */
.dnt.is-fit.is-narrow{flex-direction:column;align-items:stretch;gap:8px;}
.dnt.is-fit.is-narrow .dnt-ring{flex:1 1 0;min-height:0;height:auto;width:auto;max-width:100%;aspect-ratio:1;align-self:center;}
.dnt.is-fit.is-narrow .dnt-legend{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;gap:4px 12px;max-height:45%;}
.dnt.is-fit.is-narrow .hc-lg{display:inline-flex;}
/* 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;}
/* Geerbter Wert (seit 0.56.0, heusel.ai Chat-Optionen): <span class="hsl_badge" data-inherited> nach dem Text rueckt an den rechten Rand, die Zeile
   streckt sich dafuer (ganze Zeile schaltet). Text = Herkunft („Projekt"), title = „Vorgabe aus dem Projekt". Setzt der Nutzer einen eigenen Wert,
   nimmt die App das Badge weg. Am Attribut statt an :last-child festgemacht: :last-child zaehlt keine Textknoten und traefe auch ein Badge VOR dem Text. */
.hsl_switch:has(>.hsl_badge[data-inherited]){display:flex;}
.hsl_switch>.hsl_badge[data-inherited]{margin-left:auto;flex:none;}
/* 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-lite.lv-keephead .lv-head{display:flex;}   /* liteHead (seit 0.52.0): Lite-Liste im Dialog behaelt ihren Kopf mit Hinzufuegen */
.lv table{width:100%;}
/* Condensed-Mode (0.46.1) — 3 Stufen: normal → kompakt (.lv-dense) → sehr eng (.lv-dense2). Der Kopf-Button zykelt. */
.lv.lv-dense thead th{padding-top:5px;padding-bottom:5px;}
.lv.lv-dense tbody td{padding-top:6px;padding-bottom:6px;}
.lv.lv-dense tfoot.lv-totals td{padding-top:5px;padding-bottom:5px;}
.lv.lv-dense2 thead th{padding-top:2px;padding-bottom:2px;}
.lv.lv-dense2 tbody td{padding-top:2px;padding-bottom:2px;line-height:1.22;}
.lv.lv-dense2 tfoot.lv-totals td{padding-top:2px;padding-bottom:2px;}
.lv .lv-densebtn.on{color:var(--hero-a);border-color:color-mix(in srgb,var(--hero-a) 40%,transparent);background:color-mix(in srgb,var(--hero-a) 10%,transparent);}
/* 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) */
/* Messmodus fuer fitWidths (0.50.0): jede Spalte so breit wie ihr Inhalt in einer Zeile. Filterfelder zaehlen nicht
   mit — sonst waere jede filterbare Spalte so breit wie ein leeres Eingabefeld. Nur fuer einen Augenblick gesetzt. */
table.lv-measure{table-layout:auto!important;width:auto!important;}
table.lv-measure th,table.lv-measure td{white-space:nowrap!important;width:auto!important;}
table.lv-measure input,table.lv-measure select{width:0!important;min-width:0!important;}
.kpi-link{cursor:pointer;}
.kpi-link:hover{filter:brightness(1.05);}
.kpi-link .kpi-num{color:var(--hero-a);}
/* Klickbare Kachel (seit 0.57.0, Fund heusel.backup): <a class="kpi glass kpi-link" href> aus dem Server bzw. <hsl-kpi href> mit gestrecktem
   <a class="kpi-a"> — die ganze Kachel ist ein Link (Mittelklick, Tastatur, Screenreader), ohne onclick. */
a.kpi{text-decoration:none;color:inherit;}
.kpi>.kpi-a{position:absolute;inset:0;z-index:2;border-radius:inherit;}
a.kpi-link:focus-visible,.kpi>.kpi-a:focus-visible{outline:2px solid var(--hero-a);outline-offset:2px;}
/* Live-Bereich (seit 0.57.0, Kanon §73): <hsl-live> verteilt einen Abruf auf seine Kinder. Scheitert er, bleiben die Werte stehen, gedaempft,
   und der Statusplatz [data-live-status] sagt es („Stand 12:03 · Aktualisierung fehlgeschlagen", Fehler im title). */
hsl-live.is-stale [data-live-key]{opacity:.55;transition:opacity .2s var(--ease);}
.hsl_live_status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-dim);font-variant-numeric:tabular-nums;}
.hsl_live_status svg{width:14px;height:14px;flex:none;}
.hsl_live_status.is-bad{color:var(--co-red);}
/* Fortschritts-Spalte der ListView (type:'progress', seit 0.57.0): Balken + kurzer Text, Balken nimmt den Rest der Zelle. */
.lv-prog{display:flex;align-items:center;gap:8px;min-width:120px;}
.lv-prog .hsl_prog{flex:1;min-width:60px;}
.lv-prog small{font-size:12px;color:var(--fg-dim);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* 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;}
/* HSL.checklist variant (seit 0.52.0): row = Haken nebeneinander; chips = Umschalt-Chips (Wochentage), Vorlage .ch-sched-day im
   heusel.ai-Chat. Dasselbe Markup, dieselben echten Checkboxen — nur die Darstellung wechselt. */
.hsl_checklist[data-variant="row"]{flex-direction:row;flex-wrap:wrap;column-gap:18px;}
.hsl_checklist[data-variant="chips"]{flex-direction:row;flex-wrap:wrap;gap:6px;}
.hsl_checklist[data-variant="chips"] .hsl_check_item{min-width:40px;height:32px;padding:0 8px;gap:0;justify-content:center;border-radius:8px;border:1px solid var(--border);color:var(--fg-dim);font-size:13px;transition:none;}
.hsl_checklist[data-variant="chips"] .hsl_check_item:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent);}
.hsl_checklist[data-variant="chips"] .hsl_check_box{display:none;}
.hsl_checklist[data-variant="chips"] .hsl_check_item:has(input:checked){color:var(--hero-a);border-color:color-mix(in srgb,var(--hero-a) 45%,transparent);background:color-mix(in srgb,var(--hero-a) 14%,transparent);font-weight:600;}
.hsl_checklist[data-variant="chips"] .hsl_check_item:has(input:focus-visible){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%;}


/* ---- Farb-Auswahl (HSL.colorPicker, CANON §55) ---- */
.hsl_colorpicker{display:inline-flex;align-items:center;gap:8px}
.hsl_colorpicker .cp-dot{width:26px;height:26px;border-radius:7px;border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);flex:none;cursor:pointer;box-shadow:inset 0 1px 2px rgba(0,0,0,.15);transition:box-shadow .12s}
.hsl_colorpicker .cp-dot:hover{box-shadow:inset 0 1px 2px rgba(0,0,0,.15),0 0 0 3px color-mix(in srgb,var(--hero-a) 30%,transparent)}
.hsl_colorpicker .cp-dot:focus-visible{outline:2px solid var(--hero-a);outline-offset:2px}
.hsl_colorpicker .cp-hex{width:104px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--bg-1,var(--glass));color:var(--fg);font-family:var(--font-mono);font-size:13px;font-weight:600;text-align:center;letter-spacing:.02em;cursor:default}
.hsl_colorpicker .cp-btn{width:34px;height:34px;min-width:0;padding:0;display:inline-grid;place-items:center;flex:none;border:1px solid var(--border);border-radius:9px;background:var(--glass);color:var(--fg);cursor:pointer}
.hsl_colorpicker .cp-btn:hover{border-color:var(--border-strong)}
.hsl_colorpicker .cp-btn svg{width:16px;height:16px}
.cp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}
.cp-sw{width:100%;aspect-ratio:1;border-radius:9px;border:2px solid transparent;cursor:pointer;padding:0;position:relative;transition:transform .1s}
.cp-sw:hover{transform:scale(1.08)}
.cp-sw.on{border-color:var(--bg-card);box-shadow:0 0 0 2px var(--fg)}
.cp-sw.on::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:#fff;mix-blend-mode:difference}
.cp-free{margin-top:6px}
.cp-lab{display:block;font-size:12px;font-weight:650;color:var(--fg-faint);margin:0 0 6px}
.cp-freerow{display:flex;align-items:center;gap:10px}
.cp-native{width:40px;height:34px;border:1px solid var(--border);border-radius:9px;background:none;padding:2px;cursor:pointer}
.cp-hexin{width:130px}
.cp-prev{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:11px;border:1px solid var(--border);background:var(--glass)}
.cp-prevdot{width:30px;height:30px;border-radius:8px;border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);flex:none}
.cp-prevtxt{font-family:var(--font-mono);font-size:13px;font-weight:600}
.cp-prevsub{color:var(--fg-faint);font-weight:400}

/* ---- Schichtplan / generalisierte Plantafel (HSL.shiftPlan, CANON §57b) ---- */
.hsl_shiftplan{font-size:14px}
.hsl_shiftplan .sp-bar{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.hsl_shiftplan .sp-nav{display:flex;align-items:center;gap:6px}
.hsl_shiftplan .sp-period{font-weight:650;min-width:150px;text-align:center}
.hsl_shiftplan .sp-nav-btn{width:32px;height:32px;flex:0 0 auto;display:inline-grid;place-items:center;padding:0;border:1px solid var(--border);background:var(--bg-card);border-radius:9px;color:var(--fg);cursor:pointer}
.hsl_shiftplan .sp-nav-btn:hover{background:var(--glass)}
.hsl_shiftplan .sp-nav-btn svg{width:18px;height:18px}
.hsl_shiftplan .sp-today{height:32px}
.hsl_shiftplan .hsl_seg{display:inline-flex;background:var(--glass);border:1px solid var(--border);border-radius:9px;padding:2px}
.hsl_shiftplan .hsl_seg>button{font:inherit;font-size:12.5px;font-weight:600;color:var(--fg-faint);background:none;border:none;border-radius:7px;padding:6px 13px;cursor:pointer;transition:color .2s}
.hsl_shiftplan .hsl_seg>button.on{color:var(--hero-ink,#fff)}
.hsl_shiftplan .sp-sw{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;font-weight:600;color:var(--fg-faint);cursor:pointer;user-select:none}
.hsl_shiftplan .sp-sw input{position:absolute;width:0;height:0;opacity:0}
.hsl_shiftplan .sp-sw .tr{width:32px;height:18px;border-radius:11px;background:var(--border-strong);position:relative;transition:.16s;flex:none}
.hsl_shiftplan .sp-sw .tr::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.16s}
.hsl_shiftplan .sp-sw input:checked+.tr{background:var(--hero-a)}
.hsl_shiftplan .sp-sw input:checked+.tr::after{transform:translateX(14px)}
.hsl_shiftplan .sp-sw input:focus-visible+.tr{outline:2px solid var(--hero-a);outline-offset:2px}
.hsl_shiftplan .sp-palette{display:flex;gap:6px;flex-wrap:wrap}
.hsl_shiftplan .sp-card{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:9px;padding:4px 9px 4px 4px;font-size:12.5px;font-weight:650;cursor:grab;background:var(--glass);user-select:none}
.hsl_shiftplan .sp-card .l{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px}
.hsl_shiftplan .sp-card .l svg{width:14px;height:14px}
.hsl_shiftplan .sp-card .tt{font-size:10px;color:var(--fg-faint)}
.hsl_shiftplan .sp-board{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg-card)}
.hsl_shiftplan .sp-scroll{min-width:0}
.hsl_shiftplan .sp-grid{display:grid;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;grid-template-columns:176px repeat(var(--sp-cols,7),minmax(110px,1fr))}
.hsl_shiftplan .sp-grid[data-mode=month]{grid-template-columns:176px repeat(var(--sp-cols,30),80px)}
.hsl_shiftplan .sp-grid.sp-year{grid-template-columns:176px repeat(12,minmax(0,1fr))}
.hsl_shiftplan .sp-grid.sp-person{grid-template-columns:132px repeat(31,minmax(0,1fr)) 120px}
.hsl_shiftplan .sp-corner{padding:8px 10px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--fg-faint);border-bottom:1px solid var(--border);position:sticky;left:0;background:var(--bg-card);z-index:3;display:flex;align-items:flex-end}
.hsl_shiftplan .sp-ch{padding:5px 4px;border-bottom:1px solid var(--border);text-align:center;background:color-mix(in srgb,var(--hero-a) 5%,var(--bg-card))}
.hsl_shiftplan .sp-ch.we{background:color-mix(in srgb,var(--fg-faint) 8%,var(--bg-card))}
.hsl_shiftplan .sp-ch.wsep{border-left:2px solid var(--border-strong)}
.hsl_shiftplan .sp-ch.today{background:color-mix(in srgb,var(--hero-a) 26%,var(--bg-card))}
.hsl_shiftplan .sp-ch.today .dw,.hsl_shiftplan .sp-ch.today .dt,.hsl_shiftplan .sp-ch.today .dnum{color:var(--hero-a)}
.hsl_shiftplan .sp-ch.holi{background:color-mix(in srgb,#8b5cf6 14%,var(--bg-card))}
.hsl_shiftplan .sp-ch .dw{font-size:11.5px;font-weight:750}
.hsl_shiftplan .sp-ch .dt{font-size:9.5px;color:var(--fg-faint)}
.hsl_shiftplan .sp-ch.mini{font-size:9px;color:var(--fg-faint);padding:5px 0}
.hsl_shiftplan .sp-ch.sum{font-size:10px;font-weight:700;border-left:2px solid var(--border-strong)}
.hsl_shiftplan .sp-ch .tg{display:block;font-size:8.5px;font-weight:700;text-transform:uppercase}
.hsl_shiftplan .sp-ch.today .tg{color:var(--hero-a)}.hsl_shiftplan .sp-ch.holi .tg{color:#8b5cf6}
.hsl_shiftplan .sp-ch .cov{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:2px}
.hsl_shiftplan .sp-ch .cov i{width:12px;height:5px;border-radius:2px}
.hsl_shiftplan .sp-ch .covh{flex-basis:100%;font-size:9px;font-weight:750;color:var(--fg-faint);margin-top:2px;line-height:1;font-family:var(--font-mono)}
.hsl_shiftplan .sp-ch .covh.u{color:var(--co-red)}
.hsl_shiftplan .sp-grid[data-mode=month] .sp-ch .covh{font-size:8px}
.hsl_shiftplan .sp-ch .dnum{display:none}
.hsl_shiftplan .sp-grid[data-mode=month] .sp-ch .dt{display:none}
.hsl_shiftplan .sp-grid[data-mode=month] .sp-ch .dnum{display:block;font-size:11px;font-weight:750}
.hsl_shiftplan .sp-grid[data-mode=month] .sp-ch .dw{font-size:8.5px;color:var(--fg-faint);font-weight:600}
.hsl_shiftplan .sp-grid[data-mode=month] .sp-ch .cov i{width:7px}
.hsl_shiftplan .sp-res{padding:7px 8px 7px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;position:sticky;left:0;background:var(--bg-card);z-index:2;min-width:0}
.hsl_shiftplan .sp-res.sp-drop{background:color-mix(in srgb,var(--hero-a) 14%,transparent);box-shadow:inset 0 0 0 2px var(--hero-a)}
.hsl_shiftplan .sp-res .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:750;font-size:11px;flex:none}
.hsl_shiftplan .sp-res .meta{min-width:0}
.hsl_shiftplan .sp-res .nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsl_shiftplan .sp-res .h{font-size:10px}
.hsl_shiftplan .sp-res .h.over{color:var(--co-red)}.hsl_shiftplan .sp-res .h.under{color:var(--co-amber)}.hsl_shiftplan .sp-res .h.ok{color:var(--co-green)}
.hsl_shiftplan .sp-res .acts{margin-left:auto}
.hsl_shiftplan .sp-res .ib{width:26px;height:26px;border:1px solid transparent;background:none;border-radius:7px;cursor:pointer;color:var(--fg-faint);display:grid;place-items:center}
.hsl_shiftplan .sp-res .ib:hover{background:var(--glass);color:var(--fg);border-color:var(--border)}
.hsl_shiftplan .sp-res .ib svg{width:16px;height:16px}
.hsl_shiftplan .sp-res.mon{font-weight:600;font-size:12.5px}
.hsl_shiftplan .sp-res.tot{background:var(--glass);border-top:2px solid var(--border-strong);font-weight:700}
.hsl_shiftplan .sp-cell{border-bottom:1px solid var(--border);border-left:1px solid var(--border);padding:5px 6px;position:relative;display:flex;flex-direction:column;justify-content:center}
.hsl_shiftplan .sp-cell.we{background:color-mix(in srgb,var(--fg-faint) 4%,transparent)}
.hsl_shiftplan .sp-cell.wsep{border-left:2px solid var(--border-strong)}
.hsl_shiftplan .sp-cell.today{background:color-mix(in srgb,var(--hero-a) 10%,transparent)}
.hsl_shiftplan .sp-cell.holi{background:color-mix(in srgb,#8b5cf6 6%,transparent)}
.hsl_shiftplan .sp-cell.past{opacity:.42;filter:grayscale(.75);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--fg) 5%,transparent) 0 6px,transparent 6px 12px)}
.hsl_shiftplan .sp-cell.past .blk,.hsl_shiftplan .sp-cell.past .ab{box-shadow:none}
.hsl_shiftplan .sp-cell.blocked{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--fg-faint) 12%,transparent) 0 5px,transparent 5px 10px)}
.hsl_shiftplan .sp-cell.sp-over{background:color-mix(in srgb,var(--hero-a) 12%,transparent);box-shadow:inset 0 0 0 2px var(--hero-a)}
.hsl_shiftplan .sp-cell.conflict::after{content:"";position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--co-red);box-shadow:0 0 0 2px var(--bg-card)}
.hsl_shiftplan .sp-cell.viol::after{content:"";position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--co-amber);box-shadow:0 0 0 2px var(--bg-card)}
.hsl_shiftplan .sp-cell .tl{position:relative;flex:1 1 auto;min-height:24px;border-radius:6px;background:var(--glass);overflow:hidden}
.hsl_shiftplan .sp-cell .blk{position:absolute;top:3px;bottom:3px;height:auto;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;cursor:pointer}
.hsl_shiftplan .sp-cell .ab{flex:1 1 auto;min-height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
.hsl_shiftplan .sp-cell .ab svg{width:14px;height:14px}
.hsl_shiftplan .sp-cell .free{color:var(--fg-faint);display:grid;place-items:center;flex:1 1 auto;min-height:24px}
.hsl_shiftplan .sp-grid[data-mode=month] .sp-cell{padding:3px}
.hsl_shiftplan .sp-grid[data-mode=month] .sp-cell .blk{font-size:9px}
.hsl_shiftplan .sp-cell.yr{padding:3px}
.hsl_shiftplan .sp-cell .yq{width:100%;flex:1 1 auto;min-height:26px;align-self:stretch;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.hsl_shiftplan .sp-cell.mini{padding:2.5px}
.hsl_shiftplan .sp-cell.nil{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--fg) 4%,transparent) 0 3px,transparent 3px 6px)}
.hsl_shiftplan .sp-cell .q{flex:1 1 auto;min-height:15px;align-self:stretch;border-radius:3px;display:grid;place-items:center;font-size:8px;font-weight:800;color:#fff}
.hsl_shiftplan .sp-cell .q.e{border:1px solid var(--border-strong);background:transparent}
.hsl_shiftplan .sp-cell .q.fehlt{background:repeating-linear-gradient(45deg,var(--co-red) 0 3px,color-mix(in srgb,var(--co-red) 40%,transparent) 3px 6px)}
.hsl_shiftplan .sp-cell.tot{border-top:2px solid var(--border-strong);background:var(--glass)}
.hsl_shiftplan .sp-pick{grid-column:1/-1;display:flex;gap:7px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--border);background:var(--glass);position:sticky;left:0}
.hsl_shiftplan .sp-pick .pav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:750;font-size:11px;cursor:pointer;opacity:.45;outline:2px solid transparent}
.hsl_shiftplan .sp-pick .pav.on{opacity:1;outline-color:var(--hero-a);outline-offset:2px}
.hsl_shiftplan .sp-pick .pnfo{font-size:12px;color:var(--fg-faint);margin-left:6px}
.hsl_shiftplan .sp-sum{border-bottom:1px solid var(--border);border-left:2px solid var(--border-strong);padding:5px 8px;font-size:10.5px;text-align:right;white-space:nowrap}
.hsl_shiftplan .sp-sum b.pos{color:var(--co-green)}.hsl_shiftplan .sp-sum b.neg{color:var(--co-red)}
.hsl_shiftplan .sp-sum.tot{border-top:2px solid var(--border-strong);background:var(--glass);font-weight:700}
.hsl_shiftplan .sp-status{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.hsl_shiftplan .sp-status .pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--fg-faint)}
.hsl_shiftplan .sp-status .pill i{width:14px;height:8px;border-radius:3px}
.hsl_shiftplan .sp-status .pill.warn{border-color:color-mix(in srgb,var(--co-red) 45%,var(--border));color:var(--co-red)}
.hsl_shiftplan .sp-status .pill.ok{border-color:color-mix(in srgb,var(--co-green) 40%,var(--border));color:var(--co-green)}
.hsl_undo{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);transition:transform .2s;background:#1a1c22;color:#fff;border-radius:11px;padding:10px 14px;display:flex;gap:12px;align-items:center}
.hsl_undo[data-on]{transform:translate(-50%,0)}
.hsl_undo .ub2{font:inherit;background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:7px;padding:5px 11px;cursor:pointer}

/* ---- 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;}
@media (max-width:640px){.hsl_ent .qa{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;}.hsl_ent .qa .bar{grid-column:1/-1;order:3;}}   /* seit 0.52.0: 170/1fr/130 passte am Telefon nicht */
.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;}
/* hsl_gate (Kanon §66, seit 0.52.0): „noch nicht verfuegbar" — derselbe Aufbau wie .en-gate, aber eigenstaendig (keine .hsl_ent-Huelle,
   keine 680px-Grenze), Symbol frei (Schloss = gesperrt, Uhr = kommt bald), Aktion optional. */
.hsl_gate{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--fg) 2%,transparent);}
.hsl_gate .gi{width:38px;height:38px;border-radius:10px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg-faint);}
.hsl_gate .gi svg{width:19px;height:19px;}
.hsl_gate .gx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.hsl_gate .gt{font-weight:650;font-size:13.5px;color:var(--fg);}
.hsl_gate .gs{font-size:12px;color:var(--fg-faint);line-height:1.5;}
.hsl_gate .ga{display:flex;gap:8px;flex:0 0 auto;}
@media (max-width:520px){.hsl_gate{flex-wrap:wrap;}.hsl_gate .ga{width:100%;justify-content:flex-end;}}

/* 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;}
.lv-foot .lv-page{color:var(--fg-dim);font-variant-numeric:tabular-nums;}   /* Seiteninfo links neben dem Bereich (0.44) — nicht mehr im Pager */
.lv-foot .lv-page:empty{display:none;}
.lv-foot .lv-page:not(:empty)::before{content:"·";margin:0 .55em 0 .3em;opacity:.5;}
.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-faint);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;white-space:nowrap;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);}
/* ROLLEN (seit 0.56.0, GAP heusel.id 2026-10-22 #4, heusel.ai 2026-10-29): passt die Leiste nicht in die Breite, setzt HSL.tabs .is-scroll —
   sie rollt waagerecht (Laufleiste verborgen), .can-left/.can-right blenden die Kante aus, hinter der noch Reiter liegen (wie .ipk-tabs).
   Die Grundlinie wandert dabei vom Rand in einen Innenschatten: eine rollende Leiste schneidet den Ueberstand der Reiter (margin-bottom:-1px) ab. */
.tabs.is-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom-width:0;box-shadow:inset 0 -1px 0 var(--border);}
.tabs.is-scroll::-webkit-scrollbar{display:none;}
.tabs.is-scroll>.tab{flex:none;margin-bottom:0;}
.tabs.is-scroll.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);}
.tabs.is-scroll.can-left:not(.can-right){-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px);}
.tabs.is-scroll.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);}
.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);}
/* Telefon (seit 0.52.0): drei Schritte mit Beschriftung liefen rechts aus dem Bild. Nur der aktuelle Schritt behaelt seinen Namen. */
@media (max-width:640px){.stepper .step{gap:6px;}.stepper .step:not(.current) .lbl{display:none;}.stepper .step.current{min-width:0;}.stepper .step.current .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;}.stepper .step .bar{margin:0 6px;min-width:12px;}}
.stepper.is-busy .step.current .dot{animation:hsl-step-pulse 1.1s ease-in-out infinite;}
@keyframes hsl-step-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--hero-a) 12%,transparent);}}
@media (prefers-reduced-motion:reduce){.stepper.is-busy .step.current .dot{animation:none;}}
/* 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;}

/* ===== Kern-Bausteine: Karte, Feld, Auswahl, Schalter, Dialog, Knoepfe (dazwischen einige Galerie-Demos) ===== */
.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: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;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}   /* Höhe an .inp/.hsl_select_btn (34px) angeglichen (0.46.4) — war 38 */
.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.is-row{flex-direction:row;flex-wrap:wrap;column-gap:20px;row-gap:6px;min-width:0;}   /* GAP heusel.time §5: waagerechte Legende (unter breiten Tabellen) */
.legend2.is-row span{margin:0;}
.legend2.is-row b{margin-left:6px;}   /* im Zeilen-Layout kein margin-left:auto (das würde jeden Wert ans Zeilenende schieben) */
.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-desc{font-size:13.5px;color:var(--fg-dim);line-height:1.55;margin:0;}   /* Beschreibung von HSL.dialog/HSL.confirm — bis 0.51 inline am <p> */
.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;}
/* Aktion links (seit 0.56.0, HSL.dialog align:'start'): die Loesch- oder Nebenaktion eines Bearbeiten-Dialogs sitzt am linken Rand, die uebrigen
   bleiben rechts in Array-Reihenfolge. HSL.confirm nutzt das nie (§9: die Bestaetigung bleibt rechts). Ohne Text ist der Knopf quadratisch. */
.modal-a>.is-start{order:-1;}
.modal-a>.is-start:not(:has(~.is-start)){margin-right:auto;}
.modal-a>.btn.is-icon{flex:none;min-width:0;width:34px;padding:0;}
.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;}
  /* Platz fuer Statuspunkt (links 34px) und Auswahl (rechts 40px) nur, wenn die Zeile sie hat (seit 0.52.0) */
  .lv tbody>tr.datarow:not(:has(>td.stat)),.lv tbody>tr.newrow:not(:has(>td.stat)),.lv tbody>tr:not(.editrow):not(.filterrow):not(.grouprow):not(.datarow):not(.newrow):not(:has(>td.stat)){padding-left:14px;}
  .lv tbody>tr.datarow:not(:has(>td.chkcol)),.lv tbody>tr.newrow:not(:has(>td.chkcol)),.lv tbody>tr:not(.editrow):not(.filterrow):not(.grouprow):not(.datarow):not(.newrow):not(:has(>td.chkcol)){padding-right:14px;}
  .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,.btn:hover{animation:none;}
  .lg{animation:none;}
  .kpi[data-accent]{animation:none;}
}