/* heusel.web — Dual-Theme Design-System (hsl_) */

/* ---- 1. TOKENS ---- */
:root {
  /* Sizing / Geometrie (Ansatz C) */
  --hsl-ctl-h: 38px; --hsl-ctl-px: 14px;
  --hsl-radius-ctl: 10px; --hsl-radius-card: 16px; --hsl-radius-pill: 999px;
  --hsl-fs-ctl: .875rem;
  --hsl-font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Marke (Pink, arcana-Verlaufstechnik) */
  --hsl-brand: #e91e63; --hsl-brand-deep: #b0155f; --hsl-brand-violet: #8b5cf6;
  --hsl-brand-fg: #fff;
  --hsl-brand-gradient: linear-gradient(135deg, #e91e63 0%, #b0155f 40%, #8b5cf6 100%);
  --hsl-brand-line: linear-gradient(90deg, #e91e63, #8b5cf6);

  /* Statusfarben (in beiden Themes identisch) */
  --hsl-ok: #38c172; --hsl-warn: #ffb02e; --hsl-bad: #ff5252; --hsl-off: #999; --hsl-info: #4aa3ff;
  /* Status-Text-Töne (theme-abhängig — für color: auf hellem/dunklem BG lesbar; Flächen/Borders/Dots bleiben Vollfarbe) */
  --hsl-ok-fg: #15803d; --hsl-warn-fg: #b45309; --hsl-bad-fg: #dc2626; --hsl-info-fg: #2563eb; --hsl-violet-fg: #7c3aed;

  /* HELL = Default */
  --hsl-bg: #f3f4f6; --hsl-bg-card: #ffffff; --hsl-bg-input: #ffffff;
  --hsl-fg: #0f172a; --hsl-fg-dim: #64748b; --hsl-border: #e5e7eb;
  --hsl-btn-bg: #eef0f3; --hsl-btn-bg-hover: #e3e6ea;
  --hsl-glass: rgba(255,255,255,0.72);
}

/* DUNKEL-Override */
html.hsl_dark {
  --hsl-bg: #0a0a0a; --hsl-bg-card: #141414; --hsl-bg-input: #0f0f0f;
  --hsl-fg: #f0f0f0; --hsl-fg-dim: #8a8a8a; --hsl-border: #2a2a2a;
  --hsl-btn-bg: #242424; --hsl-btn-bg-hover: #2f2f2f;
  --hsl-off: #555;
  --hsl-glass: rgba(28,28,32,0.55);
  /* Status-Text-Töne (helle Originaltöne — auf dunklem BG korrekt) */
  --hsl-ok-fg: #38c172; --hsl-warn-fg: #ffb02e; --hsl-bad-fg: #ff5252; --hsl-info-fg: #4aa3ff; --hsl-violet-fg: #c4b5fd;
}

/* ---- 2. BASE / RESET ---- */
* { box-sizing: border-box; }
body { background: var(--hsl-bg); color: var(--hsl-fg); font-family: var(--hsl-font-sans);
  margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1 { margin-top: 0; }
h1:focus, h1:focus-visible { outline: none; }
main { min-width: 0; }

/* Globale Eingabe-Basis (Element-Selektoren bleiben unpräfigiert) */
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="time"], input[type="number"], input[type="search"], textarea, select {
  background: var(--hsl-bg-input); color: var(--hsl-fg); border: 1px solid var(--hsl-border);
  padding: 8px 12px; border-radius: var(--hsl-radius-ctl); font-size: 14px; font-family: inherit; width: 100%;
}
form label { display: block; margin-bottom: 12px; }
form label > select, form label > textarea { margin-top: 4px; }
form textarea { resize: vertical; font-family: inherit; }
input[type="time"], input[type="date"], input[type="datetime-local"] { color-scheme: light dark; }

/* Checkbox — Alt Z.116–133 portiert, Variablen umbenannt */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px !important; height: 16px !important; margin: 0; padding: 0; box-sizing: border-box;
  min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important;
  aspect-ratio: 1/1 !important; flex: 0 0 16px !important;
  border: 1px solid var(--hsl-border); border-radius: 4px; background: var(--hsl-btn-bg);
  cursor: pointer; position: relative; vertical-align: middle;
}
input[type="checkbox"]:hover { border-color: var(--hsl-brand); }
input[type="checkbox"]:checked { background: var(--hsl-brand); border-color: var(--hsl-brand); }
input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 50%; top: 45%;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%,-50%) rotate(45deg); }
input[type="checkbox"]:disabled { opacity: .5; cursor: default; }

/* Scrollleisten — in beiden Themes brauchbar */
* { scrollbar-width: thin; scrollbar-color: var(--hsl-border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hsl-border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--hsl-fg-dim); }

/* Basis-Tabellen (durch .hsl_tbl überschrieben) */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--hsl-border); }
th { color: var(--hsl-fg-dim); font-weight: 500; }

/* Kleine Utility */
.hsl_muted { color: var(--hsl-fg-dim); font-size: .85rem; }

/* ---- 3. LAYOUT ---- */

/* Admin-Shell: 2-Spalten-Grid (280px Sidebar + Content) */
.hsl_admin_shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}

/* Transparente Sidebar mit Trennlinie */
.hsl_admin_nav {
  background: transparent;
  border-right: 1px solid var(--hsl-border);
  padding: 14px 10px;
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
.hsl_admin_nav .hsl_brand {
  display: flex; align-items: center; gap: 0;
  font-size: 18px; font-weight: 700;
  margin-bottom: 16px; padding: 2px 4px; white-space: nowrap;
}
.hsl_brand_dot { color: var(--hsl-brand); }
.hsl_brand_text {
  margin-left: 10px; max-width: 220px; min-width: 0;
  overflow: hidden; white-space: nowrap; opacity: 1;
  transition: max-width .2s ease, opacity .2s ease, margin-left .2s ease;
}
.hsl_nav_toggle {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; color: var(--hsl-fg);
  background: color-mix(in srgb, var(--hsl-fg) 6%, transparent);
  border: 1px solid var(--hsl-border);
  border-radius: 8px; transition: background .15s ease;
}
.hsl_nav_toggle:hover { background: color-mix(in srgb, var(--hsl-fg) 14%, transparent); }
.hsl_nav_toggle svg { width: 18px; height: 18px; }
.hsl_admin_nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.hsl_admin_nav li a {
  display: flex; align-items: center; gap: 0; padding: 9px 11px;
  color: var(--hsl-fg-dim); text-decoration: none; border-radius: 8px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.hsl_admin_nav li a:hover { background: color-mix(in srgb, var(--hsl-fg) 6%, transparent); color: var(--hsl-fg); }
.hsl_admin_nav li a.hsl_is_active {
  background: rgba(233,30,99,.16);
  box-shadow: inset 2px 0 0 var(--hsl-brand);
  color: var(--hsl-fg);
}
.hsl_admin_nav .hsl_nav_ico { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.hsl_admin_nav .hsl_nav_ico svg { width: 20px; height: 20px; }
.hsl_admin_nav .hsl_label {
  margin-left: 11px; max-width: 220px; min-width: 0;
  overflow: hidden; white-space: nowrap; opacity: 1;
  transition: max-width .2s ease, opacity .2s ease, margin-left .2s ease;
}
/* Trennlinie (als <div> oder als <li>) */
.hsl_nav_separator { height: 1px; background: var(--hsl-border); margin: 8px 6px; list-style: none; }

/* Profil-Block (unten in der Sidebar) */
.hsl_nav_profile { margin-top: auto; padding: 12px 4px 2px; display: flex; align-items: center; }
.hsl_np_avatar {
  flex: 0 0 auto; width: 34px; height: 34px; margin-left: 5px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: var(--hsl-fg);
  background: rgba(233,30,99,.22); border: 1px solid rgba(233,30,99,.4);
}
.hsl_np_info {
  margin-left: 11px; min-width: 0; overflow: hidden; opacity: 1;
  transition: max-width .2s ease, opacity .2s ease, margin-left .2s ease; max-width: 220px;
}
.hsl_np_email { display: block; font-size: 12.5px; color: var(--hsl-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsl_np_logout { margin: 0; }
.hsl_np_logout button { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; padding: 0;
                        background: transparent; border: none; color: var(--hsl-fg-dim); cursor: pointer; font-size: 12px; }
.hsl_np_logout button:hover { color: var(--hsl-brand); }
.hsl_np_logout svg { width: 14px; height: 14px; }

/* Zusammengeklappt: nur Icons */
html.hsl_nav_collapsed .hsl_admin_shell { grid-template-columns: 64px 1fr; }
html.hsl_nav_collapsed .hsl_brand_text,
html.hsl_nav_collapsed .hsl_admin_nav .hsl_label,
html.hsl_nav_collapsed .hsl_np_info { max-width: 0; opacity: 0; margin-left: 0; }

/* Topbar */
.hsl_admin_topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--hsl-border); }
.hsl_admin_topbar button { background: transparent; border: 1px solid var(--hsl-border); color: var(--hsl-fg); padding: 6px 12px; border-radius: 4px; cursor: pointer; }

/* Content-Bereich */
.hsl_admin_content { padding: 24px; }
.hsl_admin_content a { color: var(--hsl-brand); text-decoration: none; }
.hsl_admin_content a:visited { color: var(--hsl-brand); }
.hsl_admin_content a:hover { text-decoration: underline; }
/* Anker-Buttons: Textfarbe von a-Regel nicht überschreiben lassen */
.hsl_admin_content a.hsl_btn { color: var(--hsl-brand-fg); }
.hsl_admin_content a.hsl_btn:hover { color: var(--hsl-brand-fg); text-decoration: none; }
.hsl_admin_content a.hsl_btn_ghost { color: var(--hsl-fg); }

/* Cards — Glas-Effekt */
.hsl_card {
  background: var(--hsl-bg-card);
  border: 1px solid var(--hsl-border);
  border-radius: var(--hsl-radius-card);
  padding: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.hsl_kpi_card {
  background: var(--hsl-bg-card);
  border: 1px solid var(--hsl-border);
  border-radius: var(--hsl-radius-card);
  padding: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
/* Dunkel-Variante: stärkerer Schatten */
html.hsl_dark .hsl_card,
html.hsl_dark .hsl_kpi_card { box-shadow: 0 4px 24px rgba(0,0,0,.35); }

/* Kompakte Instanz-Karte */
.hsl_db_card_head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hsl_db_card_head .hsl_card_tenant { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.hsl_db_card_head .hsl_card_tenant select { width: auto; min-width: 120px; height: 26px; }
.hsl_inline_check { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }

/* Kleine Utilities */
.hsl_w_full { width: 100%; }
.hsl_no_underline { text-decoration: none; }
.hsl_filter_field.hsl_filter_row { flex-direction: row; align-items: center; gap: 6px; }
.hsl_db_card_meta { margin-top: 4px; font-size: .8rem; }
.hsl_db_card { transition: border-color .15s ease; }
.hsl_db_card:hover { border-color: var(--hsl-brand); }
.hsl_db_card.hsl_has_creds { border-left: 3px solid var(--hsl-ok); }
.hsl_creds_badge { font-size: .72rem; color: var(--hsl-ok-fg); font-weight: 600; }
.hsl_db_card .hsl_agent_badge { margin-top: 6px; font-size: .72rem; color: var(--hsl-fg-dim); font-weight: 600; }
.hsl_card_state_row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.hsl_card_state_row .hsl_card_tenant { flex: 1 1 auto; margin-top: 0; padding-top: 0; border-top: none; min-width: 0; }
.hsl_card_state_row .hsl_creds_badge { flex: 0 0 auto; white-space: nowrap; }
.hsl_card_title { font-weight: 600; margin-bottom: 6px; }
.hsl_card_title_row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hsl_card_half { max-width: 50%; }
@media (max-width: 900px) { .hsl_card_half { max-width: 100%; } }
.hsl_card_tenant { margin-top: 8px; cursor: default; }

/* KPI-Karte Inhalte */
.hsl_kpi_card .hsl_label { color: var(--hsl-fg-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.hsl_kpi_card .hsl_value { font-size: 32px; font-weight: 700; margin: 8px 0; }
.hsl_kpi_card .hsl_trend { font-size: 13px; }
.hsl_kpi_card .hsl_trend.hsl_up { color: var(--hsl-ok-fg); }
.hsl_kpi_card .hsl_trend.hsl_down { color: var(--hsl-bad-fg); }
.hsl_card .hsl_label { color: var(--hsl-fg-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }

/* Grid-System */
.hsl_grid { display: grid; gap: 16px; }
.hsl_grid_4 { grid-template-columns: repeat(4, 1fr); }
.hsl_grid_3 { grid-template-columns: repeat(3, 1fr); }
.hsl_grid_2 { grid-template-columns: repeat(2, 1fr); }

/* Dashboard-Layouts */
.hsl_dash_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hsl_dash_head h1 { margin-bottom: 2px; }
.hsl_dash_card { margin-bottom: 14px; }
.hsl_dash_cols { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
.hsl_dash_cols .hsl_dash_card { margin-bottom: 0; }
@media (max-width: 900px) { .hsl_dash_cols { grid-template-columns: 1fr; } }

/* Login-Seite */
.hsl_empty_shell { display: grid; place-items: center; min-height: 100vh; }
.hsl_login_wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hsl_login_box { background: var(--hsl-bg-card); padding: 32px 28px; border-radius: 8px; min-width: 360px;
                 width: 100%; max-width: 360px; }
.hsl_login_box label { display: block; margin-bottom: 12px; }
.hsl_login_box label > input { margin-top: 4px; }
.hsl_login_brand { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 2px; }

/* Einführungstexte */
.hsl_page_intro {
  color: var(--hsl-fg-dim); font-size: 13px; line-height: 1.6; max-width: 800px;
  margin: -8px 0 24px; padding: 12px 16px;
  background: var(--hsl-bg-card); border-left: 3px solid var(--hsl-brand); border-radius: 0 6px 6px 0;
}
.hsl_page_intro p { margin: 0 0 8px; }
.hsl_page_intro p:last-child { margin: 0; }
.hsl_page_intro strong { color: var(--hsl-fg); }
.hsl_section_intro { color: var(--hsl-fg-dim); font-size: 12px; margin: -8px 0 12px; padding: 0 4px; line-height: 1.5; }
.hsl_section_intro strong { color: var(--hsl-fg); }

/* ---- 4. BUTTONS ---- */

/* Primär-Button (arcana-C: brand-gradient, nicht flacher Accent) */
.hsl_btn {
  display: inline-flex; align-items: center;
  height: var(--hsl-ctl-h); padding: 0 16px;
  border-radius: var(--hsl-radius-ctl); border: 1px solid transparent;
  background: var(--hsl-brand-gradient); color: var(--hsl-brand-fg);
  font-size: var(--hsl-fs-ctl); cursor: pointer;
}
.hsl_btn:hover { filter: brightness(1.06); }
.hsl_btn:disabled { opacity: .6; cursor: default; }

/* Ghost-Button — themefeste Variablen */
.hsl_btn_ghost { background: var(--hsl-btn-bg); color: var(--hsl-fg); border: 1px solid var(--hsl-border); }
.hsl_btn_ghost:hover { background: var(--hsl-btn-bg-hover); border-color: var(--hsl-brand); filter: none; }

/* Warn-Button (Amber) */
.hsl_btn_warn { background: var(--hsl-warn); color: #1a1a1a; border: none; }
.hsl_btn_warn:hover { filter: brightness(1.08); }

/* Danger-Button (Rot) — .hsl_danger_btn und button.hsl_danger sind Aliase */
.hsl_btn_danger { background: #d32f2f; color: #fff; border: none; }
.hsl_btn_danger:hover { background: #e53935; }
.hsl_danger_btn { background: #d32f2f; color: #fff; border: none; }
.hsl_danger_btn:hover { filter: brightness(1.08); }
button.hsl_danger { background: #d32f2f; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: 600; }
button.hsl_danger:hover { background: #e53935; }

/* Legacy Accent-Button */
button.hsl_primary { background: var(--hsl-brand); color: var(--hsl-brand-fg); border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: 600; }

/* Kleiner Button */
.hsl_btn_sm { padding: 6px 12px; font-size: 12px; }

/* Warteschlangen-Aktionsleiste */
.hsl_q_toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }

/* Toggle-Pill (Zeitraum-Auswahl) */
.hsl_range_pills { display: inline-flex; gap: 4px; background: var(--hsl-bg-card); border: 1px solid var(--hsl-border); border-radius: 6px; padding: 2px; }
.hsl_range_pill { background: var(--hsl-btn-bg); border: none; color: var(--hsl-fg-dim); padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
.hsl_range_pill:hover { background: var(--hsl-btn-bg-hover); color: var(--hsl-fg); }
.hsl_range_pill.hsl_active { background: var(--hsl-brand); color: var(--hsl-brand-fg); }
.hsl_range_pill.hsl_pill_accent { background: var(--hsl-brand); color: var(--hsl-brand-fg); }
.hsl_range_pill.hsl_pill_accent:hover { filter: brightness(1.1); color: var(--hsl-brand-fg); }

/* Icon-Button — themefeste Variablen */
.hsl_icon_btn { background: var(--hsl-btn-bg); border: none; color: var(--hsl-fg-dim); cursor: pointer; padding: 4px; border-radius: 5px; display: inline-flex; align-items: center; }
.hsl_icon_btn svg { width: 16px; height: 16px; }
.hsl_icon_btn:hover { color: var(--hsl-fg); background: var(--hsl-btn-bg-hover); }
.hsl_icon_btn.hsl_icon_danger { color: var(--hsl-bad-fg); }
.hsl_icon_btn.hsl_icon_danger:hover { color: #fff; background: rgba(255,82,82,.18); }

/* ============================================================ */
/* 5. ARCANA-SIGNATUREN (Hero / Glow-KPI / Gradient-Text)       */
/*    Portiert aus arcana.css — arc- → hsl_, Pink/Violett-Marke  */
/* ============================================================ */

/* Gradient-Text für Headlines / Logo-Akzente */
.hsl_text_gradient {
  background: var(--hsl-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section-Eyebrow: kleine Überschrift mit Gradient-Strich davor */
.hsl_section_title {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--hsl-fg-dim);
}
.hsl_section_title::before {
  content: '';
  width: 24px;
  height: 2px;
  border-radius: var(--hsl-radius-pill);
  background: var(--hsl-brand-line);
}

/* ---- Animationen ---- */
@keyframes hsl-spin { to { transform: rotate(360deg); } }

@keyframes hsl-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -10px) scale(1.05); }
  66%       { transform: translate(-10px, 8px) scale(0.97); }
}
.hsl_orb    { animation: hsl-float 12s ease-in-out infinite; }
.hsl_orb_d1 { animation-delay: -3s; }
.hsl_orb_d2 { animation-delay: -6s; }

@keyframes hsl-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hsl_fade_in    { animation: hsl-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hsl_fade_in_d1 { animation: hsl-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.hsl_fade_in_d2 { animation: hsl-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both; }
.hsl_fade_in_d3 { animation: hsl-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both; }

@keyframes hsl-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .hsl_hero::after, .hsl_orb, .hsl_fade_in, .hsl_fade_in_d1,
  .hsl_fade_in_d2, .hsl_fade_in_d3 { animation: none; }
  .hsl_hero_stat_success .hsl_hero_dot { animation: none; }
}

/* ---- Aurora Hero ---- */
.hsl_hero {
  position: relative;
  border-radius: 28px;
  padding: 1.4rem 1.75rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 100% at 0% 0%, rgba(233,30,99,.16), transparent 60%),
    radial-gradient(ellipse 60% 100% at 100% 100%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(233,30,99,.08), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.6));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 40px -8px rgba(233,30,99,.2);
}
html.hsl_dark .hsl_hero {
  background:
    radial-gradient(ellipse 70% 100% at 0% 0%, rgba(233,30,99,.32), transparent 60%),
    radial-gradient(ellipse 60% 100% at 100% 100%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(233,30,99,.16), transparent 70%),
    linear-gradient(135deg, rgba(30,30,46,.7), rgba(30,30,46,.4));
  border-color: rgba(255,255,255,.1);
}
.hsl_hero::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(233,30,99,.10) 90deg,
    transparent 180deg,
    rgba(139,92,246,.10) 270deg,
    transparent 360deg);
  animation: hsl-spin 24s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.hsl_hero > * { position: relative; z-index: 1; }

/* Glasige Hero-Buttons */
.hsl_hero_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 38px;
  min-width: 38px;
  padding: 0 0.85rem;
  border-radius: 0.7rem;
  background: var(--hsl-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6);
  color: rgb(64 64 64);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.18s ease;
  text-decoration: none;
  cursor: pointer;
}
.hsl_hero_btn:hover {
  background: rgba(255,255,255,.95);
  border-color: rgba(233,30,99,.4);
  color: var(--hsl-brand-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(233,30,99,.3);
}
html.hsl_dark .hsl_hero_btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgb(229 229 229);
}
html.hsl_dark .hsl_hero_btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(233,30,99,.4);
  color: var(--hsl-brand);
}

.hsl_hero_btn_primary {
  padding: 0 1.05rem;
  background: var(--hsl-brand-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(233,30,99,.5);
}
.hsl_hero_btn_primary:hover {
  filter: brightness(1.08);
  background: var(--hsl-brand-gradient);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(233,30,99,.6);
}
html.hsl_dark .hsl_hero_btn_primary,
html.hsl_dark .hsl_hero_btn_primary:hover { background: var(--hsl-brand-gradient); border-color: transparent; color: #fff; }

/* Hero-Statuspille */
.hsl_hero_stat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--hsl-radius-pill);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(64 64 64);
}
html.hsl_dark .hsl_hero_stat {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgb(229 229 229);
}
.hsl_hero_stat .hsl_hero_dot {
  width: 6px; height: 6px; border-radius: var(--hsl-radius-pill);
  background: var(--hsl-brand-line);
  box-shadow: 0 0 8px rgba(233,30,99,.5);
}
.hsl_hero_stat_success .hsl_hero_dot {
  background: var(--hsl-ok);
  box-shadow: 0 0 8px rgba(56,193,114,.5);
  animation: hsl-pulse 2s ease-in-out infinite;
}

/* ---- KPI Glow-Deko ---- */
/* Sicherstellen: hsl_kpi_card trägt position:relative + overflow:hidden */
.hsl_kpi_card { position: relative; overflow: hidden; }

.hsl_kpi_glow {
  position: absolute; top: -40%; right: -40%;
  width: 80%; height: 80%; border-radius: 50%;
  filter: blur(40px); opacity: 0.4;
  pointer-events: none;
}
.hsl_kpi_purple  .hsl_kpi_glow { background: radial-gradient(circle, #818cf8 0%, transparent 70%); }
.hsl_kpi_blue    .hsl_kpi_glow { background: radial-gradient(circle, #60a5fa 0%, transparent 70%); }
.hsl_kpi_green   .hsl_kpi_glow { background: radial-gradient(circle, #34d399 0%, transparent 70%); }
.hsl_kpi_amber   .hsl_kpi_glow { background: radial-gradient(circle, #fbbf24 0%, transparent 70%); }
.hsl_kpi_rose    .hsl_kpi_glow { background: radial-gradient(circle, #fb7185 0%, transparent 70%); }
.hsl_kpi_cyan    .hsl_kpi_glow { background: radial-gradient(circle, #22d3ee 0%, transparent 70%); }
.hsl_kpi_emerald .hsl_kpi_glow { background: radial-gradient(circle, #10b981 0%, transparent 70%); }

/* KPI-Icon Farbvarianten */
.hsl_kpi_icon { font-size: 16px; padding: 6px; border-radius: 8px; }
.hsl_kpi_purple  .hsl_kpi_icon { color: #6366f1; background: rgba(99, 102, 241, 0.10); }
.hsl_kpi_blue    .hsl_kpi_icon { color: #2563eb; background: rgba(37,99,235,.1); }
.hsl_kpi_green   .hsl_kpi_icon { color: #059669; background: rgba(5,150,105,.1); }
.hsl_kpi_amber   .hsl_kpi_icon { color: #d97706; background: rgba(217,119,6,.1); }
.hsl_kpi_rose    .hsl_kpi_icon { color: #e11d48; background: rgba(225,29,72,.1); }
.hsl_kpi_cyan    .hsl_kpi_icon { color: #0891b2; background: rgba(8,145,178,.1); }
.hsl_kpi_emerald .hsl_kpi_icon { color: #047857; background: rgba(4,120,87,.1); }

/* ============================================================ */
/* 6. FORMS & INPUTS                                            */
/*    Portiert aus Alt Z.378–470 — Klassen → hsl_/snake_case    */
/* ============================================================ */

.hsl_field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
/* Zeile aus Eingabefeldern + Buttons: bündig an der Grundlinie, alle Controls gleich hoch (--hsl-ctl-h).
   In der Reihe entfällt die Feld-Bottom-Margin, damit Inputs und Buttons exakt auf einer Linie sitzen. */
.hsl_field_row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.hsl_field_row .hsl_field { margin-bottom: 0; }
.hsl_field_row > .hsl_btn, .hsl_field_row .hsl_btn,
.hsl_field_row > button, .hsl_field_row .hsl_range_pill { align-self: flex-end; }
.hsl_field_row .hsl_pill { align-self: center; }
/* Checkbox/Radio ausnehmen: sonst überschreibt height:var(--hsl-ctl-h) die 16px-Quadratform (→ Rechteck). */
.hsl_field input:not([type="checkbox"]):not([type="radio"]) {
  height: var(--hsl-ctl-h); padding: 0 var(--hsl-ctl-px);
  border-radius: var(--hsl-radius-ctl); border: 1px solid var(--hsl-border);
  background: var(--hsl-bg-input); color: var(--hsl-fg); font-size: var(--hsl-fs-ctl);
  font-family: inherit;                 /* native Date/Time-Inputs erbten sonst die System-Schrift */
}

/* Hilfstext / Fehler (.hsl_muted bereits in Task 3 definiert — nicht doppeln) */
.hsl_hint  { color: var(--hsl-fg-dim); font-size: 12px; margin-top: 12px; }
.hsl_empty { color: var(--hsl-fg-dim); font-style: italic; padding: 12px 0; }
.hsl_error { color: var(--hsl-bad-fg); margin: 10px 0; }

/* Filter-Leiste */
.hsl_filter_bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0 16px; }
.hsl_filter_field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--hsl-fg-dim); text-transform: uppercase; letter-spacing: .03em; }
.hsl_filter_field input,
.hsl_filter_field select {
  height: var(--hsl-ctl-h);
  font-size: 13px; color: var(--hsl-fg); background: var(--hsl-bg-card);
  border: 1px solid var(--hsl-border); border-radius: 6px; padding: 0 8px; min-width: 130px;
}
.hsl_filter_field input::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
/* Checkbox-Filter (z. B. Sicherungen): die generische „.hsl_filter_field input"-Regel (Höhe/Padding/Radius/min-width
   für Datums-/Textfelder) darf die quadratische Checkbox nicht verformen — hier wieder auf Checkbox-Maße setzen. */
.hsl_filter_field input[type="checkbox"] { min-width: 16px; padding: 0; border-radius: 4px; }

/* Filter-Eingabe (in Tabellen-Kopfzeile) */
.hsl_filter_input {
  width: 100%; height: 28px; padding: 0 8px; font-size: .78rem;
  background: var(--hsl-bg-input); color: var(--hsl-fg); border: 1px solid var(--hsl-border); border-radius: 5px;
}
.hsl_filter_input::placeholder { color: var(--hsl-fg-dim); }
.hsl_filter_wrap { position: relative; }
.hsl_filter_wrap .hsl_filter_input { padding-right: 22px; }
.hsl_filter_clear { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); background: transparent;
    border: none; color: var(--hsl-fg-dim); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 4px; }
.hsl_filter_clear:hover { color: var(--hsl-brand); }

/* Filter-Chip */
.hsl_filter_chip { display: inline-flex; align-items: center; gap: 8px; background: var(--hsl-bg-card); border: 1px solid var(--hsl-border); border-radius: 6px; padding: 6px 10px; font-size: 12px; }
.hsl_chip_x { color: var(--hsl-fg-dim); text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1; padding: 0 2px; }
.hsl_chip_x:hover { color: var(--hsl-bad-fg); }

/* Bulk-Aktionsleiste */
.hsl_bulk_bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; padding: 8px 12px; background: var(--hsl-bg-card); border: 1px solid var(--hsl-brand); border-radius: 8px; }
.hsl_bulk_select { height: var(--hsl-ctl-h); padding: 0 10px; border-radius: var(--hsl-radius-ctl); font-size: var(--hsl-fs-ctl); background: var(--hsl-bg-input); color: var(--hsl-fg); border: 1px solid var(--hsl-border); }

/* Mandanten-Auswahl (Sidebar) */
.hsl_tenant_switch { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; }
.hsl_tenant_switch select { flex: 1; min-width: 0; height: 30px; font-size: 12px; background: var(--hsl-bg-card); color: var(--hsl-fg); border: 1px solid var(--hsl-border); border-radius: 6px; padding: 0 8px; }
/* Alias mit --hsl-ctl-h (direkt im Auftrag) */
.hsl_tenant_select { height: var(--hsl-ctl-h); padding: 0 10px; border-radius: var(--hsl-radius-ctl); font-size: var(--hsl-fs-ctl); background: var(--hsl-bg-input); color: var(--hsl-fg); border: 1px solid var(--hsl-border); }

/* Options-Zeile (Häkchen-Liste) */
.hsl_opt_row { display: flex; align-items: center; gap: 8px; font-size: .85rem; margin: 4px 0; cursor: pointer; }
.hsl_opt_row.hsl_opt_used { color: var(--hsl-fg-dim); cursor: default; }   /* bereits in anderem Auftrag belegte DB */

/* Toggle-Schalter */
.hsl_switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.hsl_switch input { opacity: 0; width: 0; height: 0; }
.hsl_switch .hsl_slider { position: absolute; cursor: pointer; inset: 0; background: var(--hsl-border); border-radius: 20px; transition: .15s; }
.hsl_switch .hsl_slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: color-mix(in srgb, var(--hsl-fg) 87%, transparent); border-radius: 50%; transition: .15s; }
.hsl_switch input:checked + .hsl_slider { background: var(--hsl-brand); }
.hsl_switch input:checked + .hsl_slider::before { transform: translateX(16px); background: #fff; }

/* Zeitplan-Blöcke (generisch wiederverwendbar) */
.hsl_sched_block { border: 1px solid var(--hsl-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.hsl_sched_block.hsl_sched_on { border-color: rgba(233,30,99,.4); }
.hsl_sched_head { display: flex; align-items: center; gap: 8px; font-size: .85rem; cursor: pointer; }
.hsl_sched_body { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hsl_sched_body > select.hsl_bulk_select { width: auto; min-width: 130px; }
.hsl_sched_row { display: flex; align-items: center; gap: 8px; }
.hsl_num_sm { width: 70px; }
/* Laufende Operationen: feste Spaltenbreiten, nur „Fortschritt" wächst mit; lange Namen werden gekürzt. */
.hsl_run_tbl { table-layout: fixed; }
.hsl_run_tbl th, .hsl_run_tbl td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsl_sched_row .hsl_cron_input { width: 130px; }
.hsl_sched_row input[type="time"] { width: auto; }

/* DB-Auswahlliste */
.hsl_db_list { display: block; border: 1px solid var(--hsl-border); border-radius: 6px; padding: 4px 10px; }

/* ============================================================ */
/* 7. TABLES & LISTVIEW                                          */
/*    Portiert aus Alt Z.475–519 — Klassen → hsl_/snake_case    */
/* ============================================================ */

table.hsl_tbl { width: 100%; border-collapse: collapse; }
table.hsl_tbl th,
table.hsl_tbl td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--hsl-border); font-size: .85rem; vertical-align: middle; }
table.hsl_tbl th { color: var(--hsl-fg-dim); font-weight: 600; }
table.hsl_tbl th.hsl_num,
table.hsl_tbl td.hsl_num { text-align: right; }
table.hsl_tbl th.hsl_sortable,
table.hsl_tbl th.hsl_col_sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.hsl_tbl th.hsl_sortable:hover,
table.hsl_tbl th.hsl_col_sortable:hover { color: var(--hsl-fg); }
table.hsl_tbl tr.hsl_filter_row th { padding-top: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--hsl-border); }
.hsl_tbl_actions { text-align: right; white-space: nowrap; }
/* Einheitliche Breite für Spalten mit vollständigem Zeitstempel (Datum+Uhrzeit) — zentral statt verstreuter Inline-Breiten. */
table.hsl_tbl th.hsl_col_ts, table.hsl_tbl td.hsl_col_ts { width: 165px; white-space: nowrap; }
.hsl_row_actions { display: flex; gap: 6px; }
.hsl_row_click { cursor: pointer; }
.hsl_row_click:hover { background: color-mix(in srgb, var(--hsl-fg) 5%, transparent); }
.hsl_err_cell { color: var(--hsl-bad-fg); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* hsl_tasks_tbl: Alias von .hsl_tbl (gleiche Optik, eigener Name für semantische Klarheit) */
.hsl_tasks_tbl { /* erbt table.hsl_tbl-Regeln — kein eigenes Override nötig */ }

/* Schmale Spalten */
.hsl_col_narrow { width: 1%; white-space: nowrap; }
.hsl_lv_status  { width: 14px; padding-right: 2px !important; }

/* ListView-Komponente */
.hsl_lv_buttons    { display: flex; gap: 8px; }
.hsl_lv_head_right { display: flex; gap: 12px; align-items: center; }
.hsl_lv_sort       { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.hsl_lv_sort select { font-size: 12px; }
.hsl_lv_sort_dir   { cursor: pointer; border: 1px solid var(--hsl-border); background: transparent; color: inherit; border-radius: 6px; padding: 2px 7px; font-size: 12px; line-height: 1; }
.hsl_lv_sort_dir:hover { background: color-mix(in srgb, var(--hsl-fg) 6%, transparent); }
.hsl_lv_search input[type="search"] { width: 200px; min-width: 140px; font-size: var(--hsl-fs-ctl); }
.hsl_card.hsl_lv_bare { background: none; border: none; padding: 0; margin: 0; box-shadow: none; }
.hsl_lv_caret { width: 24px; text-align: center; color: var(--hsl-fg-dim); user-select: none; }
tr.hsl_lv_detail > td { padding: 0 8px 10px 34px; background: color-mix(in srgb, var(--hsl-fg) 5%, transparent); }
tr.hsl_lv_detail .hsl_tbl { margin: 0; }
/* 2FA */
.hsl_totp_qr { background:#fff; padding:12px; border-radius:8px; width:184px; margin:10px auto; box-sizing:border-box; }
.hsl_totp_qr svg { width:100%; height:auto; display:block; }
.hsl_recovery_codes { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:10px; }
.hsl_recovery_codes code { font-family:ui-monospace,Consolas,monospace; font-size:14px; letter-spacing:1px;
    background:var(--hsl-bg-input); border:1px solid var(--hsl-border); border-radius:6px; padding:6px 8px; text-align:center; }
.hsl_lv_filters    { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* Tbody-Hover (themefest) */
table.hsl_tbl tbody tr:hover { background: color-mix(in srgb, var(--hsl-fg) 5%, transparent); }

/* ============================================================ */
/* 8. STATUS & AMPEL                                             */
/*    Portiert aus Alt Z.526–588 — Klassen → hsl_/snake_case    */
/* ============================================================ */

.hsl_dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.hsl_dot_ok   { background: var(--hsl-ok);   box-shadow: 0 0 6px rgba(56,193,114,.7); }
.hsl_dot_warn { background: var(--hsl-warn); box-shadow: 0 0 6px rgba(255,176,46,.6); }
.hsl_dot_off  { background: var(--hsl-off); }
.hsl_dot_bad  { background: var(--hsl-bad); box-shadow: 0 0 6px rgba(229,83,75,.55); }

/* Auftrags-Ampel — identische Größe wie .hsl_dot */
.hsl_amp        { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }
.hsl_amp_green  { background: var(--hsl-ok);   box-shadow: 0 0 6px rgba(56,193,114,.6); }
/* „Läuft gerade" → pulsierende Ampel, damit eine aktive Aufgabe in der Auftragsübersicht sofort auffällt. */
.hsl_amp_blue   { background: var(--hsl-info); box-shadow: 0 0 6px rgba(74,163,255,.6); animation: hsl-amp-pulse 1.1s ease-in-out infinite; }
@keyframes hsl-amp-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 5px rgba(74,163,255,.55); }
  50%      { opacity: .4;  box-shadow: 0 0 11px rgba(74,163,255,.95); }
}
.hsl_amp_yellow { background: var(--hsl-warn); box-shadow: 0 0 6px rgba(255,176,46,.6); }
.hsl_amp_red    { background: var(--hsl-bad);  box-shadow: 0 0 6px rgba(255,82,82,.6); }
.hsl_amp_grey   { background: var(--hsl-off); }

/* Status-Pills (Text-Badges mit Rahmen) */
.hsl_pill       { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; border: 1px solid var(--hsl-border); }
.hsl_pill_ok    { color: var(--hsl-ok-fg);   border-color: #1c5a34; background: rgba(56,193,114,.08); }
.hsl_pill_warn  { color: var(--hsl-warn-fg); border-color: #6a4a00; background: rgba(255,176,46,.08); }
.hsl_pill_bad   { color: var(--hsl-bad-fg);  border-color: #6a1a1a; background: rgba(255,82,82,.08); }
.hsl_pill_run   { color: var(--hsl-info-fg); border-color: #2a4a6a; background: rgba(74,163,255,.10); }
.hsl_pill_queued { color: var(--hsl-fg-dim); }
.hsl_pill_accent { background: var(--hsl-brand); color: var(--hsl-brand-fg); border-color: transparent; }
/* Snapshot-Sonder-Pill (lila Ton) */
.hsl_pill_snap  { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; color: var(--hsl-violet-fg); border: 1px solid #4a2f6a; background: rgba(150,90,220,.12); }

/* KPI-Grid */
.hsl_kpi_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }
.hsl_kpi_label { color: var(--hsl-fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.hsl_kpi_num { font-size: 30px; font-weight: 700; margin: 6px 0 2px; }
.hsl_kpi_num.hsl_kpi_ok   { color: var(--hsl-ok-fg); }
.hsl_kpi_num.hsl_kpi_warn { color: var(--hsl-warn-fg); }
.hsl_kpi_num.hsl_kpi_bad  { color: var(--hsl-bad-fg); }
.hsl_kpi_sub { color: var(--hsl-fg-dim); font-size: 12px; }
.hsl_kpi_click { cursor: pointer; transition: border-color .15s ease, transform .05s ease; }
.hsl_kpi_click:hover { border-color: var(--hsl-brand); }
.hsl_kpi_click:active { transform: translateY(1px); }
button.hsl_kpi_card { text-align: left; font: inherit; color: inherit; width: 100%; display: block; }

/* Zellen-Zustände */
.hsl_cell_bad  { color: var(--hsl-bad-fg);  font-weight: 600; }
.hsl_cell_warn { color: var(--hsl-warn-fg); font-weight: 600; }

/* Lesbarkeits-Zellen (Ja/Nein) */
.hsl_yn_ok  { color: var(--hsl-ok-fg);  font-weight: 700; }
.hsl_yn_no  { color: var(--hsl-bad-fg); font-weight: 700; }
.hsl_yn_opt { color: var(--hsl-fg-dim); }

/* Erfolgsmeldung / Inline-Hinweis */
.hsl_ok_note { color: var(--hsl-ok-fg); margin-bottom: 12px; font-size: .85rem; }

/* Farb-Titel */
.hsl_title_ok  { color: var(--hsl-ok-fg); }
.hsl_title_err { color: var(--hsl-bad-fg); }

/* Inline-Hinweis-Boxen */
.hsl_notice     { padding: 10px 14px; border-radius: 6px; margin: 10px 0; font-size: .85rem; }
.hsl_notice_ok  { background: rgba(56,193,114,.12); border: 1px solid #1c5a34; color: var(--hsl-ok-fg); }
.hsl_notice_run { background: rgba(125,180,255,.10); border: 1px solid #2a4a6a; color: var(--hsl-info-fg); }

@media (prefers-reduced-motion: reduce) {
  .hsl_amp_blue { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   10. BADGES & TAGS
   Portiert aus Alt Z.595–638 — Klassen → hsl_/snake_case
   ════════════════════════════════════════════════════════════════ */

/* Sicherungsart-Badge (Full / Diff / Log) — konsistent mit .hsl_sb-* */
.hsl_type_badge { font-size: .68rem; font-weight: 700; letter-spacing: .5px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--hsl-border); min-width: 38px; text-align: center; }
.hsl_type_full { color: var(--hsl-brand); border-color: rgba(233,30,99,.4);  background: rgba(233,30,99,.08); }
.hsl_type_diff { color: var(--hsl-info-fg);   border-color: rgba(74,163,255,.4);  background: rgba(74,163,255,.08); }
.hsl_type_log  { color: var(--hsl-ok-fg);     border-color: rgba(56,193,114,.4);  background: rgba(56,193,114,.08); }
/* Aliase: pg = PostgreSQL (= Diff-Blau), sql = SQL Server (= Log-Grün) */
.hsl_type_pg   { color: var(--hsl-info-fg);   border-color: rgba(74,163,255,.4);  background: rgba(74,163,255,.08); }
.hsl_type_sql  { color: var(--hsl-ok-fg);     border-color: rgba(56,193,114,.4);  background: rgba(56,193,114,.08); }
/* Ziel-Typ-Badges */
.hsl_type_s3   { color: var(--hsl-warn-fg);   border-color: rgba(255,176,46,.4);  background: rgba(255,176,46,.08); }
.hsl_type_ftp  { color: var(--hsl-info-fg);   border-color: rgba(74,163,255,.4);  background: rgba(74,163,255,.08); }
.hsl_type_nas  { color: var(--hsl-ok-fg);     border-color: rgba(56,193,114,.4);  background: rgba(56,193,114,.08); }

/* Kompakte Sicherungsart-Quadrate (Auftrags-Liste) — konsistent mit .hsl_type_* */
.hsl_sb { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: .7rem;
      font-weight: 700; border-radius: 4px; margin-right: 3px; border: 1px solid transparent; cursor: default; }
.hsl_sb_full { color: var(--hsl-brand); border-color: rgba(233,30,99,.4);  background: rgba(233,30,99,.1); }
.hsl_sb_diff { color: var(--hsl-info-fg);   border-color: rgba(74,163,255,.4);  background: rgba(74,163,255,.1); }
.hsl_sb_log  { color: var(--hsl-ok-fg);     border-color: rgba(56,193,114,.4);  background: rgba(56,193,114,.1); }
/* Wartungs-Badges (Indizes / Statistiken / CheckDB) — laufen mit der Vollsicherung; dezent grau. */
.hsl_sb_maint { color: var(--hsl-fg-dim); border-color: var(--hsl-border); background: color-mix(in srgb, var(--hsl-fg) 5%, transparent); }

/* Sicherungsziel-Badge (S3 / UNC / Lokal) — Pille mit Auto-Breite, Farbe nach Zieltyp. */
.hsl_dest_tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .72rem; font-weight: 700;
            border: 1px solid transparent; cursor: default; white-space: nowrap; }
.hsl_sb_s3    { color: var(--hsl-brand); border-color: rgba(233,30,99,.4);  background: rgba(233,30,99,.1); }
.hsl_sb_unc   { color: var(--hsl-info-fg);   border-color: rgba(74,163,255,.4);  background: rgba(74,163,255,.1); }
.hsl_sb_local { color: var(--hsl-fg-dim); border-color: var(--hsl-border);        background: color-mix(in srgb, var(--hsl-fg) 5%, transparent); }

/* Quell-Tag (Engine-Typ am Auftrags-/Instanznamen) */
.hsl_src_tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: .02em; vertical-align: middle; }
.hsl_src_pg  { background: rgba(56,193,114,.15); color: var(--hsl-ok-fg);   border: 1px solid rgba(56,193,114,.35); }
.hsl_src_sql { background: rgba(90,150,240,.15); color: var(--hsl-info-fg);     border: 1px solid rgba(90,150,240,.35); }

/* KI-Analyse-Chip (Auftrags-Übersicht) — markiert Aufträge mit aktiver KI-Analyse */
.hsl_ki_chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
    background: rgba(167,139,250,.15); color: var(--hsl-violet-fg); border: 1px solid rgba(167,139,250,.4); }

/* Recovery-Modell Toggle */
.hsl_model_toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 66px; height: 24px;
    padding: 0 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    cursor: pointer; border: 1px solid var(--hsl-border); background: transparent; transition: filter .12s ease, border-color .12s ease; }
.hsl_model_toggle:hover { filter: brightness(1.12); }
.hsl_model_full   { color: var(--hsl-ok-fg);   border-color: #1c5a34; background: rgba(56,193,114,.12); }
.hsl_model_simple { color: var(--hsl-warn-fg); border-color: #6a4a00; background: rgba(255,176,32,.12); }

/* ════════════════════════════════════════════════════════════════
   11. MODALS, OVERLAYS & NAVIGATION
   Portiert aus Alt Z.643–698 ("9. MODALS & OVERLAYS" + "10. NAVIGATION") — Klassen → hsl_/snake_case
   .nav-ico/.nav-ico svg NICHT erneut portiert (bereits als .hsl_admin_nav .hsl_nav_ico aus Layout vorhanden)
   ════════════════════════════════════════════════════════════════ */
.hsl_modal_overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.hsl_modal_box { background: var(--hsl-bg-card); border: 1px solid var(--hsl-border); border-radius: 10px;
    padding: 22px 24px; min-width: 340px; max-width: 736px; width: 92vw; max-height: 92vh; overflow-y: auto;
    box-shadow: 0 14px 48px rgba(0,0,0,.55); }
.hsl_modal_actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
/* Scrollbares Formular-Modal */
.hsl_modal_flex { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.hsl_modal_flex > .hsl_card_title { padding: 18px 24px 10px; margin: 0; flex: 0 0 auto; border-bottom: 1px solid var(--hsl-border); }
.hsl_modal_body { flex: 1 1 auto; overflow-y: auto; padding: 14px 24px; }
.hsl_modal_flex > .hsl_modal_actions { flex: 0 0 auto; margin: 0; padding: 12px 24px; border-top: 1px solid var(--hsl-border); background: var(--hsl-bg-card); }
/* Sonder-Breiten */
.hsl_modal_wide { max-width: 736px; }
.hsl_confirm_box { max-width: 420px; width: 90vw; }
.hsl_detail_box  { max-width: 720px; width: 90vw; }
/* Detail-Text (Fehler-/Ergebnis-Vorschau) */
.hsl_detail_text { max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
    background: var(--hsl-bg-input); border: 1px solid var(--hsl-border); border-radius: 6px; padding: 12px;
    font-size: .8rem; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--hsl-fg); margin: 6px 0 0; }
/* Klickbarer Zellenwert */
.hsl_linklike { background: transparent; border: none; color: var(--hsl-fg); cursor: pointer; font: inherit; padding: 0; border-bottom: 1px dotted var(--hsl-fg-dim); }
.hsl_linklike:hover { color: var(--hsl-brand); border-bottom-color: var(--hsl-brand); }

/* Benutzerblock (unten in der Sidebar) */
.hsl_nav_user { margin-top: auto; border-top: 1px solid var(--hsl-border); padding-top: 8px; }
.hsl_nav_user_name { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--hsl-fg-dim); font-size: 13px; overflow: hidden; white-space: nowrap; text-decoration: none; border-radius: 8px; }
.hsl_nav_user_name:hover { background: color-mix(in srgb, var(--hsl-fg) 5%, transparent); color: var(--hsl-fg); }
.hsl_nav_user_name.hsl_active { color: var(--hsl-fg); }
.hsl_nav_logout { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; background: none; border: none; color: var(--hsl-fg-dim); cursor: pointer; font: inherit; font-size: 13px; border-radius: 8px; }
.hsl_nav_logout:hover { background: color-mix(in srgb, var(--hsl-fg) 5%, transparent); color: var(--hsl-fg); }

/* Kontextmenü */
.hsl_actions_wrap { position: relative; display: inline-flex; gap: 6px; align-items: center; }
.hsl_menu_toggle { padding: 0 10px; font-weight: 700; }
.hsl_menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 224px;
    background: var(--hsl-bg-card); border: 1px solid var(--hsl-border); border-radius: 8px; padding: 6px;
    display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.hsl_menu button { text-align: left; background: transparent; border: none; color: var(--hsl-fg);
    padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .85rem;
    display: flex; align-items: center; gap: 9px; }
.hsl_menu button:hover { background: color-mix(in srgb, var(--hsl-fg) 6%, transparent); }
.hsl_menu button.hsl_danger { color: var(--hsl-bad-fg); }
.hsl_menu button.hsl_danger:hover { background: rgba(255,82,82,.10); }
.hsl_menu_sep  { height: 1px; background: var(--hsl-border); margin: 4px 2px; }
.hsl_menu_head { padding: 6px 10px 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hsl-fg-dim); }
.hsl_menu .hsl_mi  { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.hsl_menu_backdrop { position: fixed; inset: 0; z-index: 49; background: transparent; }
/* Menü nach oben kippen wenn unten kein Platz */
.hsl_menu.hsl_menu_up { top: auto; bottom: calc(100% + 4px); }

/* ════════════════════════════════════════════════════════════════
   12. UTILITIES & MIKRO-KOMPONENTEN
   Portiert aus Alt Z.705–839 ("11. UTILITIES & MIKRO-KOMPONENTEN") — Klassen → hsl_/snake_case
   ════════════════════════════════════════════════════════════════ */

/* Engine-Gruppen-Kopf (Instanz-Seite) */
.hsl_engine_group { margin-top: 18px; }
.hsl_engine_head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--hsl-border); }
.hsl_engine_head .hsl_src_tag { margin-left: 0; font-size: 12px; padding: 2px 10px; }

/* Agenten-Gruppierung (AgentDetail.razor) — gleiche Struktur wie .hsl_engine_head */
.hsl_agent_group { margin-top: 14px; }
.hsl_agent_head  { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hsl-border); font-weight: 600; font-size: .9rem; }

/* Auftrags-Katalog-Zeilen (Backups.razor): .hsl_catalog_row ist eine <tr> — KEIN display-Override
   (flex zerstört das Tabellen-Layout). Nur klickbar + Hover. */
.hsl_catalog_row { cursor: pointer; }
.hsl_catalog_row:hover { background: color-mix(in srgb, var(--hsl-fg) 4%, transparent); }
.hsl_catalog_detail > td { padding-top: 2px; padding-bottom: 2px; }

/* Hintergrund-Aufgaben-Überschrift */
.hsl_tasks_h { font-size: 1rem; margin: 24px 0 8px; }

/* Kompakte Backup-Spalte */
.hsl_bk      { font-size: .72rem; white-space: nowrap; color: var(--hsl-fg-dim); line-height: 1.2; }
.hsl_bk_line { display: block; color: var(--hsl-fg-dim); }
.hsl_bk_tag  { display: inline-block; width: 34px; color: var(--hsl-fg-dim); font-weight: 600; }
.hsl_bk_ok   { color: var(--hsl-ok-fg);   font-weight: 700; margin-left: 2px; }
.hsl_bk_warn { color: var(--hsl-warn-fg); font-weight: 700; margin-left: 2px; }
.hsl_bk_none { color: var(--hsl-fg-dim); margin-left: 2px; }
.hsl_bk_mini b { color: var(--hsl-fg); font-weight: 700; margin-right: 3px; }
.hsl_bk_mini + .hsl_bk_mini { margin-left: 6px; }
.hsl_bk_mini + .hsl_bk_mini::before { content: "·"; color: var(--hsl-border); margin-right: 6px; }

/* Backup-Buttons (F/D/T) */
.hsl_bk_btn { display: inline-block; background: var(--hsl-btn-bg); border: 1px solid transparent; color: var(--hsl-fg-dim);
    font-size: .72rem; padding: 1px 6px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.hsl_bk_btn:hover:not(:disabled) { background: var(--hsl-btn-bg-hover); border-color: var(--hsl-brand); color: var(--hsl-fg); }
.hsl_bk_btn:disabled { cursor: default; opacity: .55; }
.hsl_bk_btn b { color: var(--hsl-fg); font-weight: 700; margin-right: 3px; }
.hsl_bk_btn + .hsl_bk_btn { margin-left: 4px; }
/* Statischer Kompat-Wert (keine Interaktion) */
.hsl_compat_static { display: inline-block; font-size: .72rem; color: var(--hsl-fg-dim); padding: 1px 6px; white-space: nowrap; }

/* Attach-Kandidatenliste */
.hsl_cand_list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; margin-bottom: 14px; }
.hsl_cand      { text-align: left; background: var(--hsl-bg-input); border: 1px solid var(--hsl-border); border-radius: 6px;
             padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--hsl-fg); }
.hsl_cand:hover { border-color: var(--hsl-brand); }
.hsl_cand_name  { font-weight: 600; font-size: .85rem; color: var(--hsl-fg); }
.hsl_cand_path  { font-size: .72rem; }

/* Restore-Pfad-Vorschau */
.hsl_restore_plan { margin: 4px 0 8px; max-height: 180px; overflow: auto; border: 1px solid var(--hsl-border); border-radius: 6px; padding: 6px 8px; background: var(--hsl-bg-card); }
.hsl_rp_row     { display: flex; align-items: baseline; gap: 6px; font-size: .76rem; padding: 2px 0; flex-wrap: wrap; }
.hsl_rp_log     { color: var(--hsl-fg); min-width: 130px; }
.hsl_rp_arrow   { color: var(--hsl-fg-dim); }
.hsl_rp_dest    { color: var(--hsl-fg-dim); word-break: break-all; }
.hsl_rp_conflict .hsl_rp_dest,
.hsl_rp_warn    { color: var(--hsl-bad-fg); }
.hsl_rp_warn    { font-weight: 600; }

/* Auftrags-Anzeige */
.hsl_job_name { color: var(--hsl-fg); font-weight: 600; font-size: .9rem; }
.hsl_job_sub  { font-size: .74rem; }
/* Zurück-Button für Detail-/Subseiten — sichtbarer Ghost-Button statt unscheinbarem Mini-Link. */
.hsl_back_link {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--hsl-ctl-h); padding: 0 14px; margin-bottom: 14px;
  border: 1px solid var(--hsl-border); border-radius: var(--hsl-radius-ctl);
  background: var(--hsl-btn-bg); color: var(--hsl-fg-dim);
  text-decoration: none; font-size: var(--hsl-fs-ctl); font-weight: 500;
}
.hsl_back_link::before {
  content: ""; width: 8px; height: 8px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-right: 2px;
}
.hsl_back_link:hover { background: var(--hsl-btn-bg-hover); color: var(--hsl-fg); border-color: var(--hsl-brand); }

/* Verlaufsbalken (Dashboard) */
.hsl_bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: 10px; }
.hsl_bar_col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.hsl_bar_stack { flex: 1; width: 60%; max-width: 26px; display: flex; flex-direction: column; justify-content: flex-end; background: color-mix(in srgb, var(--hsl-fg) 4%, transparent); border-radius: 3px; overflow: hidden; }
.hsl_bar_seg { width: 100%; }
.hsl_bar_done   { background: var(--hsl-ok); }
.hsl_bar_failed { background: var(--hsl-bad); }
.hsl_bar_x { font-size: 10px; color: var(--hsl-fg-dim); }
.hsl_bars_legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--hsl-fg-dim); }
.hsl_bars_legend i.hsl_lg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.hsl_lg_done   { background: var(--hsl-ok); }
.hsl_lg_failed { background: var(--hsl-bad); }

/* Aufgabenart-Balken */
.hsl_kind_list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hsl_kind_row  { display: grid; grid-template-columns: 120px 1fr 28px; align-items: center; gap: 8px; font-size: 12px; }
.hsl_kind_name { color: var(--hsl-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsl_kind_meter { height: 8px; background: color-mix(in srgb, var(--hsl-fg) 6%, transparent); border-radius: 4px; overflow: hidden; }
.hsl_kind_fill { display: block; height: 100%; background: var(--hsl-brand); border-radius: 4px; }
.hsl_kind_n { text-align: right; color: var(--hsl-fg-dim); }

/* Fortschrittsbalken */
.hsl_prog      { height: 9px; width: 110px; background: color-mix(in srgb, var(--hsl-fg) 8%, transparent); border-radius: 5px; overflow: hidden; }
.hsl_prog_fill { display: block; height: 100%; background: var(--hsl-brand); border-radius: 5px; transition: width .4s ease; }
.hsl_prog_fill.hsl_prog_up { background: var(--hsl-ok); }
/* Unbestimmter Fortschritt: laufender Teilbalken, wenn SQL keinen Prozentwert liefert. */
.hsl_prog_fill.hsl_prog_indeterminate { width: 35%; background: var(--hsl-brand); animation: hsl-prog-indeterminate 1.2s ease-in-out infinite; }
@keyframes hsl-prog-indeterminate {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
}
.hsl_prog_row  { display: flex; align-items: center; gap: 8px; }
.hsl_prog_label { font-size: .72rem; color: var(--hsl-fg-dim); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .hsl_prog_fill.hsl_prog_indeterminate { animation: none; }
}

/* ── Backup-Fenster-Timeline (Gantt) ───────────────────────────── */
.hsl_gantt { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.hsl_gantt_ticks { position: relative; height: 16px; }
.hsl_gantt_tick { position: absolute; transform: translateX(-50%); font-size: .7rem; color: var(--hsl-fg-dim); white-space: nowrap; }
.hsl_gantt_tick::before { content: ''; position: absolute; left: 50%; top: 14px; height: 4px; width: 1px; background: var(--hsl-fg-dim); opacity: .4; }
.hsl_gantt_body { position: relative; display: flex; flex-direction: column; gap: 4px; }
.hsl_gantt_overflow_zone { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(255,80,80,.09);
                       border-left: 1px dashed var(--hsl-bad); pointer-events: none; z-index: 3; }
.hsl_gantt_lane { position: relative; height: 22px; background: color-mix(in srgb, var(--hsl-fg) 4%, transparent); border-radius: 4px; }
.hsl_gantt_bar { position: absolute; top: 1px; height: 20px; border-radius: 4px; color: #fff;
             font-size: .72rem; line-height: 20px; padding: 0 6px; overflow: hidden; white-space: nowrap;
             box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.hsl_gantt_bar_time { font-weight: 600; opacity: .85; margin-right: 5px; }
.hsl_gantt_bar::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: var(--buf, 0%);
                    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 4px, transparent 4px 8px);
                    border-left: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.hsl_gantt_overflow { outline: 2px solid var(--hsl-bad); outline-offset: -2px; }
.hsl_gantt_legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: .78rem; color: var(--hsl-fg-dim); }
.hsl_gantt_legend_item { display: inline-flex; align-items: center; gap: 5px; }
.hsl_gantt_swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hsl_gantt_swatch_buffer { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--hsl-fg) 45%, transparent) 0 3px, rgba(120,120,120,.45) 3px 6px); }
.hsl_gantt_swatch_overflow { background: rgba(255,80,80,.5); outline: 1px solid var(--hsl-bad); }

/* ════════════════════════════════════════════════════════════════
   13. TOASTS
   Portiert aus Alt Z.844–899 ("12. TOASTS" + Sparkline-Reste) — Klassen → hsl_/snake_case
   ════════════════════════════════════════════════════════════════ */
@keyframes hsl-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Container: fester Stack rechts unten */
.hsl_toast_container {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.hsl_toast {
  background: var(--hsl-bg-card);
  border: 1px solid var(--hsl-border);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
  color: var(--hsl-fg);
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: hsl-toast-in .18s ease;
}

/* Level-Farben (linker Akzent-Balken) */
.hsl_toast_success { border-left: 4px solid var(--hsl-ok); }
.hsl_toast_warning { border-left: 4px solid var(--hsl-warn); }
.hsl_toast_error   { border-left: 4px solid var(--hsl-bad); }
.hsl_toast_info    { border-left: 4px solid var(--hsl-info); }

.hsl_toast_text { flex: 1; font-size: .875rem; line-height: 1.4; }

.hsl_toast_close {
  background: none;
  border: none;
  color: var(--hsl-fg-dim);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color .15s;
}
.hsl_toast_close:hover { color: var(--hsl-fg); }

@media (prefers-reduced-motion: reduce) {
  .hsl_toast { animation: none; }
}

.hsl_spark_band { fill: transparent; cursor: pointer; }
.hsl_spark_band:hover { fill: color-mix(in srgb, var(--hsl-brand) 12%, transparent); }
.hsl_perf_graph svg polyline, .hsl_perf_graph svg line { pointer-events: none; }   /* Klicks immer auf die Zeit-Bänder, nie auf die Linie */
a.hsl_kpi_card { text-decoration: none; color: inherit; display: block; }

/* ════════════════════════════════════════════════════════════════
   12. LICENCE-GAP-ADDITIONS (additiv — siehe docs/2026-07-02-canon-extensions-licence-gaps-plan.md)
   ════════════════════════════════════════════════════════════════ */

/* 12.1 Fixed-Table + fx_*-Spaltenbreiten -------------------------------------
   table-layout:fixed + benannte Kopf-Breiten; Zellen kappen per Ellipse.
   fx_-Selektoren tragen .hsl_tbl.hsl_fixed_tbl, um generische width:1%-Regeln
   (hsl_col_narrow/hsl_col_status) per Spezifität sicher zu schlagen. */
table.hsl_tbl.hsl_fixed_tbl { table-layout: fixed; }
table.hsl_tbl.hsl_fixed_tbl td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.hsl_tbl.hsl_fixed_tbl td.hsl_tbl_actions,
table.hsl_tbl.hsl_fixed_tbl td.hsl_col_status { overflow: visible; }
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_ts     { width: 150px; }  /* Zeitstempel */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_date   { width: 118px; }  /* Datum */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_num    { width: 96px;  }  /* Zahl */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_code   { width: 120px; }  /* Nr./ID/Code */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_flag   { width: 104px; }  /* Ja/Nein */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_word   { width: 116px; }  /* kurzes Wort */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_status { width: 40px;  }  /* Ampel */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_user   { width: 200px; }  /* E-Mail/Benutzer/Tenant */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_change { width: 96px;  }  /* "alt -> neu" */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_text   { width: 180px; }  /* längerer Text */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_act1   { width: 48px;  }  /* 1 Aktions-Icon */
table.hsl_tbl.hsl_fixed_tbl th.hsl_fx_act    { width: 84px;  }  /* 2 Aktions-Icons */

/* 12.2 Spalten-Helfer (Status-Ampelspalte / Zeitstempelspalte) */
table.hsl_tbl th.hsl_col_status, table.hsl_tbl td.hsl_col_status {
  width: 1%; white-space: nowrap; text-align: center; padding-left: 6px; padding-right: 2px;
}
table.hsl_tbl td.hsl_col_status:has(> .hsl_amp:only-child) { text-align: center; }
table.hsl_tbl th.hsl_col_ts, table.hsl_tbl td.hsl_col_ts { width: 150px; white-space: nowrap; }

/* 12.3 hsl_glow — opt-in Cursor-Glow (additiv; setzt hsl_card NICHT um) ------
   Erwartet --mx/--my (aus tool-seitigem JS); ohne JS bleibt der Glow unsichtbar. */
.hsl_glow { --hsl-glow: 125 180 255; position: relative; }
html.hsl_light .hsl_glow { --hsl-glow: 90 120 190; }      /* in Hell dezenter */
.hsl_glow::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  pointer-events:none; z-index:1;
  background: radial-gradient(440px circle at var(--mx,-9999px) var(--my,-9999px),
              rgb(var(--hsl-glow) / .30), rgb(var(--hsl-glow) / 0) 45%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.hsl_glow::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
              rgb(var(--hsl-glow) / .05), transparent 55%);
  opacity:0; transition: opacity .3s ease;
}
.hsl_glow:hover::after { opacity:1; }
@media (prefers-reduced-motion: reduce) { .hsl_glow::after { transition: none; } }

/* 12.4 Blazor-Reconnect-Overlay (Framework-IDs; generisch für Blazor-Tools) --*/
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex; position: fixed; inset: 0; z-index: 2000;
  align-items: center; justify-content: center; background: rgb(0 0 0 / .62);
}
.hsl_reconnect_box {
  background: var(--hsl-bg-card); border: 1px solid var(--hsl-border); border-radius: 10px;
  padding: 22px 26px; min-width: 260px; display: flex; flex-direction: column;
  align-items: center; gap: 14px; color: var(--hsl-fg); box-shadow: 0 12px 48px rgb(0 0 0 / .55);
}
.hsl_reconnect_spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgb(255 255 255 / .15); border-top-color: var(--hsl-brand);
  animation: hsl_rc_spin .8s linear infinite;
}
@keyframes hsl_rc_spin { to { transform: rotate(360deg); } }
.hsl_reconnect_msg { font-size: .9rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .hsl_reconnect_spinner { animation-duration: 2.4s; } }

/* 12.5 Spacing-/Layout-Utilities (additiv) ---------------------------------- */
.hsl_mt_0 { margin-top: 0; }      .hsl_mb_0 { margin-bottom: 0; }
.hsl_mt_1 { margin-top: .5rem; }  .hsl_mb_1 { margin-bottom: .5rem; }
.hsl_mt_2 { margin-top: 1rem; }   .hsl_mb_2 { margin-bottom: 1rem; }
.hsl_mt_3 { margin-top: 1.5rem; } .hsl_mb_3 { margin-bottom: 1.5rem; }
.hsl_mt_4 { margin-top: 2rem; }   .hsl_ml_1 { margin-left: .75rem; }
.hsl_flex_end { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.hsl_head_row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.hsl_field_narrow { max-width: 420px; }
.hsl_pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: .5rem 0; }
.hsl_pager button {
  background: var(--hsl-bg-card); color: var(--hsl-fg); border: 1px solid var(--hsl-border);
  height: var(--hsl-ctl-h); padding: 0 12px; border-radius: var(--hsl-radius-ctl);
  font-size: var(--hsl-fs-ctl); cursor: pointer;
}
.hsl_pager button:hover:not(:disabled) { border-color: var(--hsl-brand); }
.hsl_pager button:disabled { opacity: .45; cursor: default; }

/* 12.6 notice-Varianten + amp_black + inf_* (additiv) ----------------------- */
.hsl_notice_warn  { border-color: var(--hsl-warn); background: rgb(255 176 46 / .10); color: var(--hsl-warn-fg, var(--hsl-warn)); }
.hsl_notice_error { border-color: var(--hsl-bad);  background: rgb(255 82 82 / .10);  color: var(--hsl-bad-fg,  var(--hsl-bad)); }
.hsl_amp_black { background: #000; box-shadow: inset 0 0 0 1px var(--hsl-fg-dim); }
.hsl_inf_sentinel { height: 1px; }
.hsl_inf_more { text-align: center; padding: 8px 0; font-size: .82rem; color: var(--hsl-fg-dim); }

/* 12.7 Diff-/Änderungszelle (additiv) --------------------------------------- */
.hsl_chg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hsl_chg_val { color: var(--hsl-fg-dim); }
.hsl_chg_val.hsl_chg_strong { color: var(--hsl-fg); font-weight: 600; }
.hsl_chg_arrow { color: var(--hsl-fg-dim); opacity: .6; }
.hsl_chg_system { color: var(--hsl-fg-dim); font-style: italic; }

/* 12.8 Theme-Switch (Sonne/Mond, additiv) -----------------------------------
   Markup: <button class="hsl_theme_switch" onclick="hslTheme.toggle()">
             <span class="hsl_theme_knob"></span>
             <svg class="hsl_theme_ico hsl_theme_sun">…</svg>
             <svg class="hsl_theme_ico hsl_theme_moon">…</svg>
           </button>
   Reagiert rein per html.hsl_dark/hsl_light — kein JS-Zustand nötig. */
.hsl_theme_switch {
  --hsl-sw-w: 54px; --hsl-sw-h: 28px; --hsl-sw-pad: 3px;
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--hsl-sw-w); height: var(--hsl-sw-h); padding: 0;
  border: 1px solid var(--hsl-border); border-radius: var(--hsl-radius-pill);
  background: var(--hsl-btn-bg); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.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 .hsl_theme_ico {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 15px; height: 15px; color: var(--hsl-fg-dim); pointer-events: none;
  transition: color .15s ease;
}
.hsl_theme_switch .hsl_theme_sun  { left: 7px; }
.hsl_theme_switch .hsl_theme_moon { right: 7px; }
.hsl_theme_switch .hsl_theme_knob {
  position: absolute; top: var(--hsl-sw-pad); left: var(--hsl-sw-pad); z-index: 1;
  width: calc(var(--hsl-sw-h) - 2*var(--hsl-sw-pad));
  height: calc(var(--hsl-sw-h) - 2*var(--hsl-sw-pad));
  border-radius: 50%; background: var(--hsl-brand-gradient);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
/* Hell: Knob links auf der Sonne (aktiv weiß), Mond gedimmt */
html.hsl_light .hsl_theme_switch .hsl_theme_knob { transform: translateX(0); }
html.hsl_light .hsl_theme_switch .hsl_theme_sun  { color: #fff; }
html.hsl_light .hsl_theme_switch .hsl_theme_moon { color: var(--hsl-fg-dim); }
/* Dunkel: Knob rechts auf dem Mond (aktiv weiß), Sonne gedimmt */
html.hsl_dark  .hsl_theme_switch .hsl_theme_knob { transform: translateX(calc(var(--hsl-sw-w) - var(--hsl-sw-h))); }
html.hsl_dark  .hsl_theme_switch .hsl_theme_moon { color: #fff; }
html.hsl_dark  .hsl_theme_switch .hsl_theme_sun  { color: var(--hsl-fg-dim); }
@media (prefers-reduced-motion: reduce) { .hsl_theme_switch .hsl_theme_knob { transition: none; } }
/* In eingeklappter Admin-Nav ausblenden (64px-Bar ist zu schmal für den Switch). */
html.hsl_nav_collapsed .hsl_theme_switch { display: none; }