/* ============================================================
   heusel.web2 — 2027 Design-System (Trial in heusel.id)
   Namespace hsl_ · Dual-Theme · Pink = Hero/Akzent · eine Grotesk
   Firmenfarben aus dem heuselnet-Favicon · Border-Glow (padding/border-box)
   Kein backdrop-filter außer Topbar · Motion ist Teil des Designs.
   ============================================================ */

/* Gebündelte Grotesk (self-hosted, kein CDN). Variable Weight 100–900. */
@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{
  --hsl-brand:#e91e63; --hsl-brand-deep:#b0155f; --hsl-brand-violet:#8b5cf6; --hsl-brand-fg:#fff;
  --hsl-brand-gradient:linear-gradient(135deg,#e91e63 0%,#b0155f 45%,#8b5cf6 115%);
  --hsl-seam:linear-gradient(90deg,#e91e63,#8b5cf6);
  --hsl-seam-flow:linear-gradient(90deg,#e91e63,#8b5cf6,#e91e63);
  /* Hero = Primär/CTA-Farbe der App. Zentral, Standard Pink — je App hier überschreiben. */
  --hsl-hero:var(--hsl-brand); --hsl-hero-grad:var(--hsl-brand-gradient);

  --hsl-ctl-h:38px; --hsl-radius-ctl:10px; --hsl-radius-card:14px; --hsl-radius-sm:8px; --hsl-radius-pill:999px;
  --hsl-fs-ctl:.875rem;
  --hsl-font-sans:'Hanken Grotesk','Mona Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hsl-font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --hsl-ease:cubic-bezier(.22,1,.36,1);

  /* Firmenfarben (heuselnet Favicon) — zentrale categoriale Palette */
  --hsl-co-red:#b7262d; --hsl-co-blue:#21648b; --hsl-co-green:#008d5d; --hsl-co-yellow:#ffd30a; --hsl-co-purple:#70358a;
  /* Status = Firmenfarben (Fläche) + kontrastierte Text-Töne */
  --hsl-ok:#008d5d; --hsl-warn:#d19a00; --hsl-bad:#b7262d; --hsl-info:#21648b; --hsl-purple:#70358a; --hsl-off:#a29ca8;
  --hsl-ok-fg:#0a7a52; --hsl-warn-fg:#8a6d00; --hsl-bad-fg:#b7262d; --hsl-info-fg:#1f5f86; --hsl-violet-fg:#70358a;

  --hsl-bg:#f6f5f7; --hsl-bg-card:#ffffff; --hsl-bg-2:#fbfafb; --hsl-bg-input:#fbfafb;
  --hsl-fg:#17141a; --hsl-fg-dim:#6b6570; --hsl-fg-faint:#a29ca8;
  --hsl-border:#e7e4e8; --hsl-border-strong:#d8d4da;
  --hsl-btn-bg:#eeecef; --hsl-btn-bg-hover:#e4e1e7;
  /* Deutliche, theme-adaptive Button-Border (anteilige Vordergrundfarbe) */
  --hsl-btn-border:color-mix(in srgb,var(--hsl-fg) 22%,transparent);
  --hsl-glass:rgba(255,255,255,.7);

  --hsl-ok-bg:rgba(0,141,93,.12); --hsl-warn-bg:rgba(209,154,0,.15); --hsl-bad-bg:rgba(183,38,45,.11); --hsl-info-bg:rgba(33,100,139,.12);

  --hsl-e1:0 1px 2px rgba(23,20,26,.06),0 1px 1px rgba(23,20,26,.04);
  --hsl-e2:0 2px 6px rgba(23,20,26,.06),0 10px 28px rgba(23,20,26,.08);
  --hsl-e3:0 16px 48px rgba(23,20,26,.16);
  /* Günstiges „Glas": translucenter Verlaufs-Sheen (KEIN backdrop-filter) */
  --hsl-glass-card:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.5));
  --hsl-glass-edge:inset 0 1px 0 rgba(255,255,255,.7);
  /* Feiner Gradient-Rand („Border-Glow") — Füllung padding-box, Verlauf border-box */
  --hsl-ring:linear-gradient(150deg,color-mix(in srgb,var(--hsl-brand) 42%,var(--hsl-border)) 0%,var(--hsl-border) 34%,var(--hsl-border) 66%,color-mix(in srgb,var(--hsl-brand-violet) 34%,var(--hsl-border)) 100%);
}
html.hsl_dark{
  --hsl-bg:#0c0b0d; --hsl-bg-card:#151317; --hsl-bg-2:#1c191e; --hsl-bg-input:#111015;
  --hsl-fg:#f2eff4; --hsl-fg-dim:#9a939f; --hsl-fg-faint:#6c6572;
  --hsl-border:#2a262e; --hsl-border-strong:#3a353f;
  --hsl-btn-bg:#232028; --hsl-btn-bg-hover:#2c2833;
  --hsl-glass:rgba(20,19,23,.6);
  --hsl-off:#5b5560;
  --hsl-co-red:#e35a60; --hsl-co-blue:#5a9bc9; --hsl-co-green:#26c088; --hsl-co-yellow:#ffdc3d; --hsl-co-purple:#b07fce;
  --hsl-ok:#26c088; --hsl-warn:#ffcf3a; --hsl-bad:#e35a60; --hsl-info:#5a9bc9; --hsl-purple:#b07fce;
  --hsl-ok-fg:#26c088; --hsl-warn-fg:#ffcf3a; --hsl-bad-fg:#e35a60; --hsl-info-fg:#5a9bc9; --hsl-violet-fg:#b07fce;
  --hsl-ok-bg:rgba(38,192,136,.14); --hsl-warn-bg:rgba(255,207,58,.14); --hsl-bad-bg:rgba(227,90,96,.14); --hsl-info-bg:rgba(90,155,201,.15);
  --hsl-e1:0 1px 2px rgba(0,0,0,.4);
  --hsl-e2:0 4px 16px rgba(0,0,0,.48);
  --hsl-e3:0 18px 50px rgba(0,0,0,.62);
  --hsl-glass-card:linear-gradient(180deg,rgba(32,29,36,.72),rgba(21,19,23,.5));
  --hsl-glass-edge:inset 0 1px 0 rgba(255,255,255,.06);
  --hsl-ring:linear-gradient(150deg,color-mix(in srgb,var(--hsl-brand) 58%,var(--hsl-border)) 0%,var(--hsl-border) 32%,var(--hsl-border) 68%,color-mix(in srgb,var(--hsl-brand-violet) 48%,var(--hsl-border)) 100%);
}

/* ---- Base ---- */
*{box-sizing:border-box;}
body{margin:0;background:var(--hsl-bg);color:var(--hsl-fg);font-family:var(--hsl-font-sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* Glanz: ambient Marken-Flow in ALLEN Ecken (statisch, GPU-frei) */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;mix-blend-mode:multiply;
  background:
    radial-gradient(48% 58% at 82% -8%, color-mix(in srgb,var(--hsl-brand) 22%,transparent), transparent 62%),
    radial-gradient(46% 55% at -6% 106%, color-mix(in srgb,var(--hsl-co-blue) 16%,transparent), transparent 60%),
    radial-gradient(40% 50% at 108% 104%, color-mix(in srgb,var(--hsl-co-green) 13%,transparent), transparent 60%),
    radial-gradient(38% 48% at -8% -6%, color-mix(in srgb,var(--hsl-co-purple) 13%,transparent), transparent 60%);}
html.hsl_dark body::before{mix-blend-mode:screen;background:
    radial-gradient(48% 58% at 82% -8%, color-mix(in srgb,var(--hsl-brand) 22%,transparent), transparent 62%),
    radial-gradient(46% 55% at -6% 106%, color-mix(in srgb,var(--hsl-co-blue) 20%,transparent), transparent 60%),
    radial-gradient(40% 50% at 108% 104%, color-mix(in srgb,var(--hsl-co-green) 16%,transparent), transparent 60%),
    radial-gradient(38% 48% at -8% -6%, color-mix(in srgb,var(--hsl-co-purple) 16%,transparent), transparent 60%);}
/* Feiner Grain für ein mattes, „teures" Gefühl (statisches SVG, GPU-frei) */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
html.hsl_dark body::after{opacity:.06;}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;text-wrap:balance;}
/* Icon vor einem Überschriftentext skaliert mit der Schriftgröße + hat Abstand zum Text */
h1>svg,h2>svg,h3>svg,h4>svg{width:1em;height:1em;vertical-align:-.14em!important;margin-right:.45em;flex:0 0 auto;color:var(--hsl-fg-dim);}
/* In-Content-Überschriften brauchen vertikalen Rhythmus (der Reset setzt margin:0) —
   z. B. eine ListView-Überschrift ohne CTA klebt sonst am Element darüber. */
.hsl_admin_content h2{margin:30px 0 14px;}
.hsl_admin_content h3{margin:22px 0 10px;}
a{color:var(--hsl-brand);text-decoration:none;}
.hsl_tnum{font-variant-numeric:tabular-nums;}
.hsl_mono{font-family:var(--hsl-font-mono);}
.ico{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ico.sm{width:16px;height:16px;}

input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],input[type=url],input[type=tel],input[type=datetime-local],input[type=month],input[type=time],select,textarea{
  width:100%;height:var(--hsl-ctl-h);padding:0 12px;border-radius:var(--hsl-radius-ctl);
  border:1px solid var(--hsl-border-strong);background:var(--hsl-bg-input);color:var(--hsl-fg);
  font:inherit;font-size:var(--hsl-fs-ctl);transition:border-color .18s var(--hsl-ease),box-shadow .18s var(--hsl-ease);}
textarea{height:auto;min-height:84px;padding:10px 12px;resize:vertical;line-height:1.5;}
select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:34px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--hsl-brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--hsl-brand) 24%,transparent);}
input::placeholder{color:var(--hsl-fg-faint);}
label{font-size:12.5px;color:var(--hsl-fg-dim);}

input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;vertical-align:middle;
  width:18px;height:18px;border:1.5px solid var(--hsl-border-strong);background:var(--hsl-bg-input);
  cursor:pointer;position:relative;transition:background .18s var(--hsl-ease),border-color .18s var(--hsl-ease);}
/* Checkbox/Radio MIT Text: vertikal zentriert, sauberer Abstand, und Luft zwischen mehreren nebeneinander */
.hsl_inline_check{display:inline-flex;align-items:center;gap:9px;margin-right:22px;text-transform:none;letter-spacing:0;cursor:pointer;font-size:13.5px;}
/* Datei-Auswahl gethemed; Dateiname-Feld mind. ~200px */
input[type=file]{font:inherit;font-size:13px;color:var(--hsl-fg-dim);min-width:200px;max-width:100%;box-sizing:border-box;
  border:1px solid var(--hsl-border-strong);border-radius:var(--hsl-radius-ctl);background:var(--hsl-bg-input);padding:5px 8px;cursor:pointer;}
input[type=file]::file-selector-button{font:inherit;font-size:12.5px;font-weight:600;margin-right:10px;cursor:pointer;
  height:28px;padding:0 12px;border-radius:var(--hsl-radius-sm);border:1px solid var(--hsl-btn-border);
  background:var(--hsl-btn-bg);color:var(--hsl-fg);transition:border-color .15s var(--hsl-ease),background .15s var(--hsl-ease);}
input[type=file]::file-selector-button:hover{border-color:var(--hsl-brand);background:var(--hsl-btn-bg-hover);}
input[type=checkbox]{border-radius:5px;}
input[type=radio]{border-radius:50%;}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--hsl-brand);}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--hsl-brand);border-color:var(--hsl-brand);}
/* Haken exakt zentriert */
input[type=checkbox]:checked::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-62%) rotate(45deg);}
input[type=radio]:checked::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#fff;}
input:focus-visible{outline:2px solid var(--hsl-brand);outline-offset:2px;}

/* ---- Shell ---- */
.hsl_admin_shell{position:relative;z-index:1;display:grid;grid-template-columns:264px 1fr;min-height:100vh;transition:grid-template-columns .32s var(--hsl-ease);}
html.hsl_nav_collapsed .hsl_admin_shell{grid-template-columns:70px 1fr;}

.hsl_admin_nav{border-right:1px solid var(--hsl-border);padding:14px 12px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;background:var(--hsl-bg);z-index:40;}
/* feste 46px Icon-Spalte = Rail-Mitte → Icons wandern beim Klappen nicht */
.hsl_nav_ico{width:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;}
.hsl_nav_head{display:flex;align-items:center;height:40px;margin-bottom:16px;}
.hsl_nav_toggle{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:none;
  border-radius:10px;background:var(--hsl-brand-gradient);color:#fff;cursor:pointer;
  box-shadow:0 4px 12px -4px rgba(233,30,99,.6),inset 0 1px 0 rgba(255,255,255,.3);transition:filter .2s,transform .06s;}
.hsl_nav_toggle:hover{filter:brightness(1.08);} .hsl_nav_toggle:active{transform:scale(.94);}
.hsl_nav_toggle .ico{width:19px;height:19px;}
.hsl_brand{font-weight:800;font-size:19px;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;transition:opacity .2s var(--hsl-ease);}
.hsl_brand_dot{color:var(--hsl-brand);text-shadow:0 0 12px color-mix(in srgb,var(--hsl-brand) 55%,transparent);}
.hsl_admin_nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.hsl_nav_sec{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hsl-fg-faint);
  padding:14px 0 6px 14px;white-space:nowrap;overflow:hidden;transition:opacity .2s var(--hsl-ease);}
.hsl_admin_nav li a{position:relative;display:flex;align-items:center;height:42px;border:1px solid transparent;border-radius:var(--hsl-radius-sm);
  color:var(--hsl-fg-dim);font-weight:550;white-space:nowrap;transition:background .18s var(--hsl-ease),color .18s var(--hsl-ease);}
.hsl_admin_nav li a:hover{background:color-mix(in srgb,var(--hsl-fg) 5%,transparent);color:var(--hsl-fg);}
/* Aktiver Eintrag = Card-Style (Glas-Fläche + feiner Gradient-Rand + Elevation) */
.hsl_admin_nav li a.hsl_is_active{color:var(--hsl-fg);border:1px solid transparent;
  background:var(--hsl-glass-card) padding-box,var(--hsl-ring) border-box;
  box-shadow:var(--hsl-e1),var(--hsl-glass-edge);}
/* feine Akzent-Kante links — läuft an den Enden aus, wie die Login-Naht oben */
.hsl_admin_nav li a.hsl_is_active::before{content:'';position:absolute;left:1px;top:8px;bottom:8px;width:2.5px;border-radius:3px;
  background:linear-gradient(180deg,transparent,var(--hsl-brand) 25%,var(--hsl-brand-violet) 75%,transparent);}
.hsl_admin_nav li a.hsl_is_active .hsl_nav_ico{color:var(--hsl-brand);}
.hsl_label{transition:opacity .22s var(--hsl-ease);}
/* Custom-Tooltip (nur eingeklappt) */
.hsl_tip{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-6px) scale(.96);
  background:var(--hsl-bg-card);color:var(--hsl-fg);border:1px solid var(--hsl-border);box-shadow:var(--hsl-e2);
  padding:6px 11px;border-radius:9px;font-size:12.5px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:80;transition:opacity .2s var(--hsl-ease),transform .2s var(--hsl-ease);}
.hsl_tip::before{content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--hsl-bg-card);border-left:1px solid var(--hsl-border);border-bottom:1px solid var(--hsl-border);}
html.hsl_nav_collapsed .hsl_admin_nav li a:hover .hsl_tip{opacity:1;transform:translateY(-50%) translateX(0) scale(1);}

.hsl_tenant_switch{padding:8px 4px 4px;}
.hsl_tenant_switch select{height:34px;font-size:12.5px;}
.hsl_nav_profile{margin-top:auto;padding-top:12px;display:flex;align-items:center;}
.hsl_np_avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;background:var(--hsl-brand-gradient);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.hsl_np_info{min-width:0;white-space:nowrap;overflow:hidden;transition:opacity .18s var(--hsl-ease);}
.hsl_np_name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;}
.hsl_np_mail{font-size:11.5px;color:var(--hsl-fg-dim);overflow:hidden;text-overflow:ellipsis;}
/* Eingeklappt: Texte & Combos komplett weg, kein Rest */
/* WICHTIG: nur INNERHALB der Nav ausblenden — sonst verschwinden z. B. KPI-Labels (.hsl_label) auf den Seiten */
html.hsl_nav_collapsed .hsl_admin_nav .hsl_brand,
html.hsl_nav_collapsed .hsl_admin_nav .hsl_nav_sec,
html.hsl_nav_collapsed .hsl_admin_nav .hsl_label,
html.hsl_nav_collapsed .hsl_admin_nav .hsl_np_info{opacity:0;width:0;overflow:hidden;pointer-events:none;}
html.hsl_nav_collapsed .hsl_tenant_switch,
html.hsl_nav_collapsed .hsl_realm_ctx{display:none;}
/* Eingeklappt: Profil-Aktionen (Launcher/Abmelden) auf zentriertes Icon reduzieren wie die Nav-Punkte */
html.hsl_nav_collapsed .hsl_nav_action{justify-content:center;padding-left:0;padding-right:0;gap:0;}
html.hsl_nav_collapsed .hsl_nav_profile{align-items:stretch;}

.hsl_admin_main{min-width:0;display:flex;flex-direction:column;}
.hsl_admin_topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:12px 24px;
  border-bottom:1px solid var(--hsl-border);background:var(--hsl-glass);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);}
.hsl_tb_left{flex:1;min-width:0;}
.hsl_tb_center{flex:0 1 380px;display:flex;justify-content:center;}
.hsl_tb_right{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:12px;}
.hsl_crumb{font-size:13px;color:var(--hsl-fg-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hsl_crumb b{color:var(--hsl-fg);font-weight:650;}
.hsl_top_search{position:relative;width:100%;max-width:380px;}
.hsl_top_search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--hsl-fg-faint);width:17px;height:17px;}
.hsl_top_search input{padding-left:34px;height:36px;}
.hsl_avatar_sm{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#fff;background:var(--hsl-brand-gradient);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.hsl_admin_content{padding:26px 24px 80px;width:100%;min-width:0;}
/* Optional-Wrapper, wenn eine Seite bewusst eine Lesebreite will (Listen bleiben sonst bildschirmbreit) */
.hsl_admin_content .hsl_readable{max-width:1200px;}
/* Mandanten-Umschalter in der Glas-Topbar (kein Sidebar-Margin, Auto-Breite) */
.hsl_admin_topbar .hsl_realm_ctx{margin:0;}
.hsl_admin_topbar .hsl_realm_ctx select{width:auto;min-width:200px;height:34px;}
/* Seitentitel in der Glasbar + Info-Tooltip (Subtext) */
.hsl_topbar_title{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:750;letter-spacing:-.01em;color:var(--hsl-fg);}
.hsl_topbar_title>svg{color:var(--hsl-fg-dim);flex:0 0 auto;}
/* Zurück-Button in der Glasbar (Subpages) */
.hsl_topbar_back{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;margin-right:2px;
  border:1px solid var(--hsl-btn-border);border-radius:var(--hsl-radius-sm);color:var(--hsl-fg-dim);background:var(--hsl-bg-card);
  transition:color .15s var(--hsl-ease),border-color .15s var(--hsl-ease);}
.hsl_topbar_back:hover{color:var(--hsl-fg);border-color:var(--hsl-brand);}
.hsl_topbar_back svg{width:18px;height:18px;}
.hsl_info_tip{position:relative;display:inline-flex;align-items:center;color:var(--hsl-fg-faint);cursor:help;}
.hsl_info_tip:hover,.hsl_info_tip:focus-visible{color:var(--hsl-brand);outline:none;}
.hsl_info_tip .hsl_tip{left:0;right:auto;top:calc(100% + 8px);bottom:auto;transform:translateY(-6px) scale(.97);
  white-space:normal;width:max-content;max-width:min(400px,80vw);font-weight:500;line-height:1.5;}
.hsl_info_tip .hsl_tip::before{left:12px;right:auto;top:-4px;bottom:auto;transform:rotate(45deg);
  border-left:1px solid var(--hsl-border);border-top:1px solid var(--hsl-border);border-right:none;border-bottom:none;}
.hsl_info_tip:hover .hsl_tip,.hsl_info_tip:focus-within .hsl_tip{opacity:1;transform:translateY(0) scale(1);}

.hsl_theme_switch{position:relative;width:54px;height:30px;flex:0 0 auto;border:1px solid var(--hsl-border);
  border-radius:var(--hsl-radius-pill);background:var(--hsl-btn-bg);cursor:pointer;padding:0;}
.hsl_theme_switch:hover{border-color:var(--hsl-brand);}
.hsl_theme_switch:focus-visible{outline:2px solid var(--hsl-brand);outline-offset:2px;}
.hsl_theme_switch .ico{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--hsl-fg-faint);}
.hsl_theme_switch .t_sun{left:8px;} .hsl_theme_switch .t_moon{right:8px;}
.hsl_theme_knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:var(--hsl-brand-gradient);box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .26s var(--hsl-ease);}
html.hsl_dark .hsl_theme_knob{transform:translateX(24px);}
html.hsl_light .hsl_theme_switch .t_sun{color:#fff;} html.hsl_dark .hsl_theme_switch .t_moon{color:#fff;}

/* ---- Headings ---- */
.hsl_gy{margin-bottom:42px;}
.hsl_section_title{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--hsl-fg-dim);margin-bottom:12px;}
.hsl_section_title::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--hsl-seam);}
.hsl_h2{font-size:22px;font-weight:800;margin-bottom:4px;}
.hsl_lead{color:var(--hsl-fg-dim);font-size:14px;max-width:64ch;margin:0 0 18px;}
.hsl_text_gradient{background:var(--hsl-brand-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hsl_row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* ---- Cards / grid (fluid, wandernd) ---- */
.hsl_card{position:relative;background:var(--hsl-glass-card) padding-box,var(--hsl-ring) border-box;border:1px solid transparent;border-radius:var(--hsl-radius-card);
  box-shadow:var(--hsl-e1),var(--hsl-glass-edge);padding:18px;}
.hsl_card_title{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;margin-bottom:14px;letter-spacing:-.01em;}
.hsl_card_title>svg{flex:0 0 auto;color:var(--hsl-fg-dim);}
.hsl_grid{display:grid;gap:16px;}
.hsl_grid_2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.hsl_grid_3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.hsl_grid_4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}

/* ---- Buttons ---- */
.hsl_btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--hsl-ctl-h);min-width:88px;padding:0 16px;
  border-radius:var(--hsl-radius-ctl);border:1px solid transparent;background:var(--hsl-hero-grad);background-size:170% 170%;color:#fff;
  font:inherit;font-size:var(--hsl-fs-ctl);font-weight:650;cursor:pointer;
  box-shadow:0 6px 16px -9px rgba(233,30,99,.7),inset 0 1px 0 rgba(255,255,255,.28);
  transition:filter .18s var(--hsl-ease),transform .12s var(--hsl-ease),box-shadow .18s var(--hsl-ease);}
.hsl_btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(233,30,99,.75),inset 0 1px 0 rgba(255,255,255,.28);animation:hsl-flow 5s ease infinite;}
.hsl_btn_block{width:100%;}
@keyframes hsl-flow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.hsl_btn:active{transform:translateY(0);}
.hsl_btn:disabled{opacity:.55;cursor:default;filter:none;transform:none;box-shadow:none;}
.hsl_btn_ghost{background:var(--hsl-btn-bg);color:var(--hsl-fg);border-color:var(--hsl-btn-border);box-shadow:none;}
.hsl_btn_ghost:hover{background:var(--hsl-btn-bg-hover);border-color:var(--hsl-brand);filter:none;box-shadow:none;}
.hsl_btn_danger{background:var(--hsl-bad);color:#fff;box-shadow:none;}
.hsl_btn_warn{background:var(--hsl-warn);color:#231a05;box-shadow:none;}
.hsl_btn_sm{height:30px;min-width:64px;padding:0 12px;font-size:12.5px;}
.hsl_icon_btn{width:32px;height:32px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hsl-btn-border);border-radius:var(--hsl-radius-sm);background:var(--hsl-bg-card);color:var(--hsl-fg-dim);
  cursor:pointer;transition:color .18s var(--hsl-ease),border-color .18s var(--hsl-ease),background .18s var(--hsl-ease);}
.hsl_icon_btn:hover{color:var(--hsl-fg);border-color:var(--hsl-brand);background:var(--hsl-btn-bg);}
.hsl_icon_btn.hsl_icon_danger:hover{color:var(--hsl-bad-fg);border-color:var(--hsl-bad);background:var(--hsl-bad-bg);}
.hsl_icon_btn .ico{width:17px;height:17px;}
/* Größen-Modifier für Icon-Buttons (z. B. Launcher-Toolbar) */
.hsl_icon_btn_lg{width:44px;height:44px;border-radius:10px;}
.hsl_icon_btn_lg .ico,.hsl_icon_btn_lg svg{width:22px;height:22px;}

.hsl_range_pills{display:inline-flex;gap:3px;padding:3px;background:var(--hsl-btn-bg);border:1px solid var(--hsl-btn-border);border-radius:var(--hsl-radius-ctl);}
.hsl_range_pill{border:none;background:transparent;color:var(--hsl-fg-dim);padding:5px 13px;border-radius:7px;
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .18s var(--hsl-ease),color .18s var(--hsl-ease);}
.hsl_range_pill:hover{color:var(--hsl-fg);}
.hsl_range_pill.hsl_active{background:var(--hsl-bg-card);color:var(--hsl-fg);box-shadow:var(--hsl-e1);}
.hsl_back_link{display:inline-flex;align-items:center;gap:7px;height:var(--hsl-ctl-h);padding:0 14px;border-radius:var(--hsl-radius-ctl);
  border:1px solid var(--hsl-btn-border);background:var(--hsl-btn-bg);color:var(--hsl-fg-dim);font-size:var(--hsl-fs-ctl);font-weight:550;}
.hsl_back_link:hover{color:var(--hsl-fg);border-color:var(--hsl-brand);}

.hsl_switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto;}
.hsl_switch input{opacity:0;width:0;height:0;}
.hsl_slider{position:absolute;inset:0;background:var(--hsl-border-strong);border-radius:var(--hsl-radius-pill);cursor:pointer;transition:.24s var(--hsl-ease);}
.hsl_slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.24s var(--hsl-ease);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.hsl_switch input:checked+.hsl_slider{background:var(--hsl-brand);}
.hsl_switch input:checked+.hsl_slider::before{transform:translateX(18px);}

.hsl_field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.hsl_field_row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.hsl_check_row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--hsl-fg);cursor:pointer;}

/* ---- Status ---- */
.hsl_dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.hsl_dot_ok{background:var(--hsl-ok);box-shadow:0 0 0 3px var(--hsl-ok-bg);}
.hsl_dot_warn{background:var(--hsl-warn);box-shadow:0 0 0 3px var(--hsl-warn-bg);}
.hsl_dot_bad{background:var(--hsl-bad);box-shadow:0 0 0 3px var(--hsl-bad-bg);}
.hsl_dot_off{background:var(--hsl-off);}
.hsl_amp{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;}
.hsl_amp_green{background:var(--hsl-ok);} .hsl_amp_yellow{background:var(--hsl-warn);}
.hsl_amp_red{background:var(--hsl-bad);} .hsl_amp_grey{background:var(--hsl-off);}
.hsl_amp_blue{background:var(--hsl-info);animation:hsl-pulse 2.8s ease-in-out infinite;}
@keyframes hsl-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hsl-info) 45%,transparent);}50%{box-shadow:0 0 0 6px transparent;}}

.hsl_pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:3px 10px;border-radius:var(--hsl-radius-pill);border:1px solid transparent;}
.hsl_pill .hsl_dot{width:6px;height:6px;box-shadow:none;}
.hsl_pill_ok{color:var(--hsl-ok-fg);background:var(--hsl-ok-bg);border-color:color-mix(in srgb,var(--hsl-ok) 32%,transparent);}
.hsl_pill_ok .hsl_dot{background:var(--hsl-ok);}
.hsl_pill_warn{color:var(--hsl-warn-fg);background:var(--hsl-warn-bg);border-color:color-mix(in srgb,var(--hsl-warn) 32%,transparent);}
.hsl_pill_warn .hsl_dot{background:var(--hsl-warn);}
.hsl_pill_bad{color:var(--hsl-bad-fg);background:var(--hsl-bad-bg);border-color:color-mix(in srgb,var(--hsl-bad) 32%,transparent);}
.hsl_pill_bad .hsl_dot{background:var(--hsl-bad);}
.hsl_pill_run{color:var(--hsl-info-fg);background:var(--hsl-info-bg);border-color:color-mix(in srgb,var(--hsl-info) 32%,transparent);}
.hsl_pill_run .hsl_dot{background:var(--hsl-info);}
.hsl_pill_accent{color:#fff;background:var(--hsl-brand);border-color:transparent;}

.hsl_badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 7px;
  border-radius:5px;border:1px solid var(--hsl-border);color:var(--hsl-fg-dim);text-transform:uppercase;}
.hsl_badge_brand{color:var(--hsl-brand);border-color:color-mix(in srgb,var(--hsl-brand) 40%,transparent);background:color-mix(in srgb,var(--hsl-brand) 9%,transparent);}
.hsl_badge_info{color:var(--hsl-info-fg);border-color:color-mix(in srgb,var(--hsl-info) 40%,transparent);background:var(--hsl-info-bg);}

.hsl_chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:4px 6px 4px 11px;
  border-radius:var(--hsl-radius-pill);border:1px solid var(--hsl-border);background:var(--hsl-bg-card);color:var(--hsl-fg);}
.hsl_chip_x{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  border:none;background:transparent;color:var(--hsl-fg-faint);cursor:pointer;transition:background .18s var(--hsl-ease),color .18s var(--hsl-ease);}
.hsl_chip_x:hover{background:var(--hsl-bad-bg);color:var(--hsl-bad-fg);}
.hsl_chip_x .ico{width:12px;height:12px;stroke-width:2.5;}

/* ---- KPI ---- */
.hsl_kpi_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;}
.hsl_kpi_card{--kpi-accent:var(--hsl-brand);position:relative;background:var(--hsl-glass-card) padding-box,var(--hsl-ring) border-box;border:1px solid transparent;border-radius:var(--hsl-radius-card);
  box-shadow:var(--hsl-e1),var(--hsl-glass-edge);padding:18px;overflow:hidden;}
/* Akzent-Balken oben: Verlauf, transparent an den Enden → endet vor den runden Ecken */
.hsl_kpi_card::before{content:'';position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--kpi-accent),transparent);}
.hsl_kpi_card::after{content:'';position:absolute;top:-45%;right:-30%;width:78%;height:108%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--kpi-accent) 14%,transparent),transparent 72%);opacity:.55;}
/* Streuung: eine Reihe KPI-Karten soll nicht gestempelt wirken (diffus + zufällig stark) */
.hsl_kpi_card:nth-child(3n+2)::after{top:auto;bottom:-52%;right:-14%;left:auto;opacity:.4;}
.hsl_kpi_card:nth-child(3n)::after{top:-32%;right:auto;left:-22%;opacity:.5;}
.hsl_kpi_card:nth-child(4n+1)::after{opacity:.63;}
/* KPI-Inhalt (Label/Wert/Trend/Spark) immer ÜBER dem Glow */
.hsl_kpi_card>*{position:relative;z-index:1;}
.hsl_kpi_green{--kpi-accent:var(--hsl-co-green);} .hsl_kpi_blue{--kpi-accent:var(--hsl-co-blue);}
.hsl_kpi_purple{--kpi-accent:var(--hsl-co-purple);} .hsl_kpi_red{--kpi-accent:var(--hsl-co-red);} .hsl_kpi_yellow{--kpi-accent:var(--hsl-co-yellow);}
.hsl_kpi_label{position:relative;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--hsl-fg-dim);}
.hsl_kpi_num{position:relative;font-size:32px;font-weight:800;letter-spacing:-.02em;margin:8px 0 4px;}
.hsl_kpi_num.hsl_kpi_ok{color:var(--hsl-ok-fg);} .hsl_kpi_num.hsl_kpi_bad{color:var(--hsl-bad-fg);}
.hsl_kpi_trend{position:relative;font-size:12.5px;display:inline-flex;align-items:center;gap:5px;}
.hsl_kpi_trend.hsl_up{color:var(--hsl-ok-fg);} .hsl_kpi_trend.hsl_down{color:var(--hsl-bad-fg);}
.hsl_spark{position:absolute;right:14px;bottom:14px;width:92px;height:32px;z-index:1;}

/* ---- Charts ---- */
.hsl_bars{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:10px;}
.hsl_bar_col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;}
.hsl_bar_stack{flex:1;width:70%;max-width:30px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;}
.hsl_bar_seg{width:100%;border-radius:3px;}
.hsl_bar_done{background:var(--hsl-co-blue);}
.hsl_bar_x{font-size:10.5px;color:var(--hsl-fg-faint);}
.hsl_meter_row{display:grid;grid-template-columns:110px 1fr 42px;align-items:center;gap:10px;font-size:12.5px;margin:9px 0;}
.hsl_meter{height:8px;border-radius:4px;background:color-mix(in srgb,var(--hsl-fg) 8%,transparent);overflow:hidden;}
.hsl_meter_fill{height:100%;border-radius:4px;background:var(--hsl-co-green);}
.hsl_meter_n{text-align:right;color:var(--hsl-fg-dim);}
.hsl_prog{height:8px;border-radius:5px;background:color-mix(in srgb,var(--hsl-fg) 8%,transparent);overflow:hidden;}
.hsl_prog_fill{height:100%;border-radius:5px;background:var(--hsl-brand);transition:width .5s var(--hsl-ease);}
.hsl_prog_indeterminate{width:35%!important;animation:hsl-indet 1.6s ease-in-out infinite;}
@keyframes hsl-indet{0%{margin-left:-35%;}100%{margin-left:100%;}}
.hsl_donut_wrap{display:flex;align-items:center;gap:18px;}
.hsl_donut_legend{display:flex;flex-direction:column;gap:7px;font-size:12.5px;}
.hsl_donut_legend span{display:inline-flex;align-items:center;gap:8px;}
.hsl_sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}

/* ---- ListView ---- */
.hsl_lv_head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.hsl_lv_search{position:relative;width:min(280px,50vw);}
.hsl_lv_search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--hsl-fg-faint);width:16px;height:16px;}
.hsl_lv_search input{padding-left:34px;height:36px;}
.hsl_lv_spacer{margin-left:auto;}
.hsl_lv_chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
/* Bulk-Leiste: bei Mehrfachauswahl OBEN */
.hsl_bulk_bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:9px 14px;border:1px solid var(--hsl-brand);
  border-radius:var(--hsl-radius-ctl);background:color-mix(in srgb,var(--hsl-brand) 7%,transparent);font-size:13px;
  box-shadow:0 4px 16px -10px rgba(233,30,99,.5);}

.hsl_tbl_wrap{overflow-x:auto;border:1px solid transparent;border-radius:var(--hsl-radius-card);background:var(--hsl-glass-card) padding-box,var(--hsl-ring) border-box;box-shadow:var(--hsl-e1),var(--hsl-glass-edge);}
/* Basis: bildschirmbreit, Auto-Layout — Aktions-Buttons werden NICHT geclippt.
   Feste Spaltenbreiten + Ellipse NUR opt-in via .hsl_fixed_tbl. */
/* border-collapse:separate → Border-Radien an Header/Hover/Gruppe möglich */
table.hsl_tbl{width:100%;border-collapse:separate;border-spacing:0;}
.hsl_tbl th,.hsl_tbl td{text-align:left;padding:10px 14px;font-size:13.5px;border-bottom:1px solid var(--hsl-border);vertical-align:middle;}
/* Kopfzeile: eigenes Band + runde obere Ecken */
.hsl_tbl thead th{background:var(--hsl-bg-2);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--hsl-fg-dim);user-select:none;border-bottom:1px solid var(--hsl-border-strong);}
/* Kopfblock: Header-Zeile + Filterzeile teilen sich EINE gerundete Bande in derselben Farbe (bg-2).
   Header rundet oben, Filterzeile rundet unten; dazwischen keine Trennlinie. */
.hsl_tbl thead tr:first-child th{border-bottom:none;}
.hsl_tbl thead tr:first-child th:first-child{border-top-left-radius:var(--hsl-radius-sm);}
.hsl_tbl thead tr:first-child th:last-child{border-top-right-radius:var(--hsl-radius-sm);}
/* Falls eine Tabelle KEINE Filterzeile hat, rundet der Header unten selbst + trägt die Trennlinie. */
.hsl_tbl thead:not(:has(.hsl_filter_row)) tr:first-child th{border-bottom:1px solid var(--hsl-border-strong);}
.hsl_tbl thead:not(:has(.hsl_filter_row)) tr:first-child th:first-child{border-bottom-left-radius:var(--hsl-radius-sm);}
.hsl_tbl thead:not(:has(.hsl_filter_row)) tr:first-child th:last-child{border-bottom-right-radius:var(--hsl-radius-sm);}
/* Zeilen-Hover immer, mit leichtem Border + runden Ecken */
.hsl_tbl tbody tr:hover{background:color-mix(in srgb,var(--hsl-fg) 5%,transparent);}
.hsl_tbl tbody tr:hover td{box-shadow:inset 0 1px 0 var(--hsl-border-strong),inset 0 -1px 0 var(--hsl-border-strong);}
.hsl_tbl tbody tr:hover td:first-child{border-top-left-radius:var(--hsl-radius-sm);border-bottom-left-radius:var(--hsl-radius-sm);}
.hsl_tbl tbody tr:hover td:last-child{border-top-right-radius:var(--hsl-radius-sm);border-bottom-right-radius:var(--hsl-radius-sm);}
/* Opt-in Fixed-Layout: Spaltenbreiten greifen, Text bekommt Ellipse; Aktions-/Status-Spalten clippen nie */
table.hsl_tbl.hsl_fixed_tbl{table-layout:fixed;}
.hsl_fixed_tbl td,.hsl_fixed_tbl th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hsl_fixed_tbl td.hsl_tbl_actions,.hsl_fixed_tbl td.hsl_lv_status,.hsl_fixed_tbl td.hsl_appcol_edit,.hsl_fixed_tbl td.hsl_appcol_active{overflow:visible;}
.hsl_tbl th.hsl_col_sortable{cursor:pointer;}
.hsl_tbl th.hsl_col_sortable:hover{color:var(--hsl-fg);}
a.hsl_sort,.hsl_sort{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;}
.hsl_sort .ico{width:13px;height:13px;color:var(--hsl-fg-faint);}
.hsl_col_sortable a.hsl_sort:hover{color:var(--hsl-fg);}
.hsl_col_sortable.hsl_sorted{color:var(--hsl-fg);} .hsl_col_sortable.hsl_sorted .ico{color:var(--hsl-brand);}
/* Spaltenbreiten-Ziehgriff (nur Textspalten) */
.hsl_tbl th.hsl_col_resizable{position:relative;padding-right:14px;}
.hsl_col_resize{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;touch-action:none;user-select:none;z-index:1;}
.hsl_col_resize::before{content:'';position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:15px;border-radius:1px;background:var(--hsl-border-strong);opacity:0;transition:opacity .15s var(--hsl-ease),background .15s var(--hsl-ease);}
.hsl_col_resizable:hover .hsl_col_resize::before{opacity:1;}
.hsl_col_resize:hover::before{background:var(--hsl-brand);opacity:1;}
/* Filterzeile: gleiche Farbe (bg-2) wie Header/Gruppe, rundet den Kopfblock unten ab */
tr.hsl_filter_row th{background:var(--hsl-bg-2);border-bottom:1px solid var(--hsl-border-strong);padding-top:4px;padding-bottom:8px;}
tr.hsl_filter_row th:first-child{border-bottom-left-radius:var(--hsl-radius-sm);}
tr.hsl_filter_row th:last-child{border-bottom-right-radius:var(--hsl-radius-sm);}
.hsl_lv_clear{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--hsl-fg-dim);white-space:nowrap;}
.hsl_lv_clear:hover{color:var(--hsl-brand);}
.hsl_fx_status{width:38px;text-align:center;padding-left:8px;padding-right:4px;}
.hsl_fx_word{width:150px;} .hsl_fx_ts{width:130px;} .hsl_fx_flag{width:92px;} .hsl_fx_act{width:96px;}
.hsl_tbl tbody tr:last-child td{border-bottom:none;}
.hsl_row_click{cursor:pointer;transition:background .14s var(--hsl-ease);}
.hsl_row_actions{display:flex;gap:6px;justify-content:flex-end;overflow:visible;}
/* Aktions-/Icon-Spalten: kompaktes Padding, damit die Buttons INNERHALB der Zelle (und im Zeilen-Hover) bleiben */
.hsl_tbl td.hsl_tbl_actions,.hsl_tbl th.hsl_tbl_actions,
.hsl_tbl td.hsl_appcol_edit,.hsl_tbl th.hsl_appcol_edit,
.hsl_tbl td:has(.hsl_row_actions){padding-left:6px;padding-right:12px;}
.hsl_u{font-weight:600;} .hsl_sub{color:var(--hsl-fg-dim);font-size:12px;}
tr.hsl_filter_row th{padding-top:6px;padding-bottom:8px;}
tr.hsl_filter_row input,tr.hsl_filter_row select{height:30px;font-size:12.5px;}
tr.hsl_lv_group td,tr.hsl_group_row td{background:var(--hsl-bg-2);padding:8px 14px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  color:var(--hsl-fg-dim);text-transform:uppercase;border-top:1px solid var(--hsl-border-strong);border-bottom:1px solid var(--hsl-border-strong);border-radius:var(--hsl-radius-sm);}
tr.hsl_lv_group td .hsl_grp{display:inline-flex;align-items:center;gap:9px;}
tr.hsl_lv_group td .hsl_grp::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--hsl-seam);}
tr.hsl_lv_group td .hsl_grp_n{color:var(--hsl-fg-faint);font-weight:600;}
.hsl_pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px;font-size:13px;color:var(--hsl-fg-dim);}
.hsl_pager button{width:32px;height:32px;border:1px solid var(--hsl-btn-border);border-radius:var(--hsl-radius-sm);
  background:var(--hsl-bg-card);color:var(--hsl-fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.hsl_pager button:hover:not(:disabled){border-color:var(--hsl-brand);}
.hsl_pager button:disabled{opacity:.4;cursor:default;}

/* ---- Notices / intro / tabs ---- */
.hsl_page_intro{border-left:3px solid var(--hsl-brand);background:var(--hsl-bg-2);border-radius:0 var(--hsl-radius-sm) var(--hsl-radius-sm) 0;
  padding:12px 16px;font-size:13px;color:var(--hsl-fg-dim);margin-bottom:18px;}
.hsl_page_intro b{color:var(--hsl-fg);}
.hsl_notice{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--hsl-radius-sm);border:1px solid;font-size:13px;margin-bottom:10px;}
.hsl_notice .ico{width:18px;height:18px;margin-top:1px;}
.hsl_notice_ok{color:var(--hsl-ok-fg);background:var(--hsl-ok-bg);border-color:var(--hsl-ok);}
.hsl_notice_info{color:var(--hsl-info-fg);background:var(--hsl-info-bg);border-color:var(--hsl-info);}
.hsl_notice_warn{color:var(--hsl-warn-fg);background:var(--hsl-warn-bg);border-color:var(--hsl-warn);}
.hsl_notice_error{color:var(--hsl-bad-fg);background:var(--hsl-bad-bg);border-color:var(--hsl-bad);}
.hsl_tabs{display:flex;gap:4px;border-bottom:1px solid var(--hsl-border);margin-bottom:16px;}
.hsl_tab{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--hsl-fg-dim);cursor:pointer;border:none;background:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .18s var(--hsl-ease);}
.hsl_tab:hover{color:var(--hsl-fg);}
.hsl_tab.hsl_active{color:var(--hsl-fg);border-bottom-color:var(--hsl-brand);}

/* ---- Auth-Hero (der eine reiche Moment) ---- */
.hsl_auth{position:relative;max-width:370px;margin:0 auto;background:var(--hsl-glass-card) padding-box,var(--hsl-ring) border-box;border:1px solid transparent;
  border-radius:var(--hsl-radius-card);box-shadow:var(--hsl-e3),var(--hsl-glass-edge);overflow:hidden;}
.hsl_auth::before{content:'';position:absolute;top:0;left:18px;right:18px;height:2px;border-radius:0 0 3px 3px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--hsl-brand) 22%,var(--hsl-brand-violet) 78%,transparent);}
.hsl_auth::after{content:'';position:absolute;inset:0 0 auto 0;height:150px;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -28%,color-mix(in srgb,var(--hsl-hero) 18%,transparent),transparent 62%);}
.hsl_auth_in{position:relative;padding:24px 24px 26px;}
.hsl_auth_lock{font-weight:800;font-size:16px;letter-spacing:-.03em;}
.hsl_auth_h{font-size:20px;font-weight:750;margin:14px 0 16px;}
.hsl_divider{display:flex;align-items:center;gap:12px;color:var(--hsl-fg-faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;margin:15px 0;}
.hsl_divider::before,.hsl_divider::after{content:'';height:1px;flex:1;background:var(--hsl-border);}
.hsl_ms{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;height:40px;border-radius:var(--hsl-radius-ctl);
  border:1px solid var(--hsl-border-strong);background:var(--hsl-bg-card);color:var(--hsl-fg);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .18s var(--hsl-ease),background .18s var(--hsl-ease);}
.hsl_ms:hover{border-color:var(--hsl-brand);background:var(--hsl-bg-2);}
.hsl_auth_forgot{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--hsl-fg-dim);}
.hsl_auth_forgot:hover{color:var(--hsl-brand);}

/* ---- Modal (gesten-sicherer Soft-Close) ---- */
.hsl_modal_overlay{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;
  padding:20px;animation:hsl-fade .24s var(--hsl-ease);}
.hsl_modal_box{position:relative;background:linear-gradient(var(--hsl-bg-card),var(--hsl-bg-card)) padding-box,var(--hsl-ring) border-box;border:1px solid transparent;border-radius:var(--hsl-radius-card);
  box-shadow:var(--hsl-e3);width:100%;max-width:600px;max-height:90vh;overflow:auto;display:flex;flex-direction:column;
  animation:hsl-modal-in .3s var(--hsl-ease);}
/* Naht oben: absolut, läuft an den Enden aus (endet vor den runden Ecken) */
.hsl_modal_box::before{content:'';position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:0 0 3px 3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--hsl-brand) 22%,var(--hsl-brand-violet) 78%,transparent);}
/* Unstrukturierte Modals (ohne hsl_modal_head) bekommen Innenabstand direkt an der Box */
.hsl_modal_box:not(:has(.hsl_modal_head)){padding:22px 24px;}
.hsl_modal_head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;}
.hsl_modal_head h3{font-size:16px;font-weight:750;}
.hsl_modal_body{padding:4px 18px 0;overflow-y:auto;}
/* Trennlinie über den Aktionen: gleicher Abstand OBEN (margin) wie UNTEN (padding-top) zu den Buttons */
.hsl_modal_actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding:18px 18px;border-top:1px solid var(--hsl-border);}
/* das direkt über der Trennlinie liegende Feld darf seinen eigenen Bottom-Abstand nicht addieren */
.hsl_field:has(+ .hsl_modal_actions),
label:has(+ .hsl_modal_actions),
fieldset:has(+ .hsl_modal_actions){margin-bottom:0;}
@keyframes hsl-fade{from{opacity:0;}to{opacity:1;}}
@keyframes hsl-modal-in{from{opacity:0;transform:translateY(12px) scale(.98);}to{transform:none;opacity:1;}}

/* ---- Toasts ---- */
.hsl_toast_container{position:fixed;right:18px;bottom:18px;z-index:2000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.hsl_toast{display:flex;align-items:center;gap:11px;background:var(--hsl-bg-card);border:1px solid var(--hsl-border);
  border-left:4px solid var(--hsl-info);border-radius:var(--hsl-radius-sm);box-shadow:var(--hsl-e2);padding:11px 14px;
  font-size:13.5px;max-width:360px;animation:hsl-toast-in .32s var(--hsl-ease);}
.hsl_toast.hsl_out{animation:hsl-toast-out .28s var(--hsl-ease) forwards;}
.hsl_toast .ico{width:18px;height:18px;}
.hsl_toast_success{border-left-color:var(--hsl-ok);} .hsl_toast_success .ico{color:var(--hsl-ok);}
.hsl_toast_warning{border-left-color:var(--hsl-warn);} .hsl_toast_warning .ico{color:var(--hsl-warn);}
.hsl_toast_error{border-left-color:var(--hsl-bad);} .hsl_toast_error .ico{color:var(--hsl-bad);}
.hsl_toast_info .ico{color:var(--hsl-info);}
.hsl_toast_text{flex:1;} .hsl_toast_close{background:none;border:none;color:var(--hsl-fg-faint);cursor:pointer;padding:0;display:flex;}
@keyframes hsl-toast-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}}
@keyframes hsl-toast-out{to{opacity:0;transform:translateX(20px);}}

.hsl_fade{opacity:0;transform:translateY(12px);animation:hsl-up .6s var(--hsl-ease) forwards;}
@keyframes hsl-up{to{opacity:1;transform:none;}}

/* (Bewusst keine reduce-motion-Abschaltung — die Bewegung ist Teil des Designs.) */
@media(max-width:820px){
  .hsl_admin_shell{grid-template-columns:70px 1fr;}
  html.hsl_nav_collapsed .hsl_admin_shell{grid-template-columns:70px 1fr;}
  .hsl_tb_center{display:none;}
}

/* ============================================================
   App-Utilities (heusel.id-Seiten) — Basis-Klassen, 2027-Sprache
   Ergänzt den Styleguide um das, was die realen Seiten brauchen.
   ============================================================ */

/* App-Logo als Sidebar-Toggle (statt Gradient-Badge) */
.hsl_nav_toggle.hsl_nav_logo{background:none;box-shadow:none;color:inherit;}
.hsl_nav_toggle.hsl_nav_logo:hover{filter:brightness(1.06);background:color-mix(in srgb,var(--hsl-fg) 7%,transparent);}
.hsl_nav_toggle.hsl_nav_logo img{width:26px;height:26px;display:block;}
/* Theme-Switch in eingeklappter Rail ausblenden (zu schmal) */
html.hsl_nav_collapsed .hsl_theme_switch{display:none;}

/* Text-Utilities */
.hsl_error{display:flex;align-items:center;gap:6px;color:var(--hsl-bad-fg);font-size:.9rem;margin:10px 0;}
.hsl_error svg,.hsl_error .ico{flex:0 0 auto;width:16px;height:16px;}
.hsl_hint{color:var(--hsl-fg-dim);font-size:12.5px;margin-top:8px;line-height:1.5;}
.hsl_muted{color:var(--hsl-fg-dim);font-size:.85rem;}

/* Auth-Shell (Login/Register/…): zentrierter Wrapper + Karte + Marken-Header.
   app.css schichtet Größe/Radius/Shadow darüber — hier Basis (Fläche + Ring + Naht). */
.hsl_login_wrap{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;box-sizing:border-box;}
.hsl_login_wrap>*{width:100%;margin-left:auto;margin-right:auto;}
.hsl_login_box{position:relative;width:100%;max-width:400px;padding:32px 30px 28px;
  background:var(--hsl-glass-card) padding-box,var(--hsl-ring) border-box;border:1px solid transparent;
  border-radius:var(--hsl-radius-card);box-shadow:var(--hsl-e3),var(--hsl-glass-edge);overflow:hidden;}
.hsl_login_box::before{content:'';position:absolute;top:0;left:18px;right:18px;height:2px;border-radius:0 0 3px 3px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--hsl-brand) 22%,var(--hsl-brand-violet) 78%,transparent);}
.hsl_login_brand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px;text-align:center;}
.hsl_brand_word{font-weight:800;letter-spacing:-.03em;}

/* KPI-Ergänzungen (AdminDashboard) */
.hsl_value{position:relative;font-size:32px;font-weight:800;letter-spacing:-.02em;margin:8px 0 4px;}
.hsl_kpi_amber{--kpi-accent:var(--hsl-co-yellow);}
.hsl_kpi_glow{display:none;} /* Glow läuft in web2 über .hsl_kpi_card::after */

/* Tabellen-/ListView-Ergänzungen */
.hsl_tbl_actions{text-align:right;white-space:nowrap;}
table.hsl_tbl th.hsl_col_ts,table.hsl_tbl td.hsl_col_ts{width:150px;white-space:nowrap;}
.hsl_lv_status{width:22px;text-align:center;padding-left:6px;padding-right:2px;}
.hsl_lv_buttons{display:flex;gap:8px;align-items:center;}
.hsl_lv_head_right{display:flex;gap:12px;align-items:center;margin-left:auto;}

/* Launcher */
.hsl_launcher_apps_title{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:0;}

/* 2FA QR-Box (app.css skaliert das <img> darin) */
.hsl_totp_qr{background:#fff;padding:12px;border-radius:10px;width:184px;margin:10px auto;box-sizing:border-box;}

/* ThemeSwitch-Icons (App-Variante: hsl_theme_ico/_sun/_moon statt .ico/.t_sun/.t_moon) */
.hsl_theme_ico{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--hsl-fg-faint);pointer-events:none;}
.hsl_theme_sun{left:8px;} .hsl_theme_moon{right:8px;}
html.hsl_light .hsl_theme_sun{color:#fff;} html.hsl_dark .hsl_theme_moon{color:#fff;}