/* ═══════════════════════════════════════════════════════════════════════════
   Lampenwerk24 ERP · Designsystem V2.1 "Werkbank OS" (2026-07-21)
   ───────────────────────────────────────────────────────────────────────────
   Nach 4 Feedback-Runden + 3-Richtungen-Judge. Kernformel:
   „SCHWARZ FÜHRT · AMBER VERORTET · FARBE ORDNET."

   · Basis Weiss/Grau/Schwarz, harte Kontraste (KEIN Warmgrau).
   · BOLD: Zahlen 800, Titel 700, Body 500 — nie 400 fuer UI-Text. Das ist der
     Kern-Fix gegen den „Krankenhaus"-Eindruck von V2.0.
   · Schwarz (#141416) = Aktion + Auswahl (Buttons, aktive Pill, Taskbar).
   · Amber (#E89A3C) = Marke + „hier bist du / hier ist neu". Exakt 6 feste
     Stellen (Logo-Punkt entfaellt zugunsten echtem Logo → 5): Sidebar-Aktiv-
     Kante, aktiver Tab, Taskbar-Aktiv, Badges, Startseiten-Balken, Start-Chart.
     NIE: Buttons, Fokus, Status-Pills, Bereichsfarben, Flaechen.
   · Bereichsfarben (Produktion Blau, Support Petrol, Vertrieb Gruen, Finanzen
     Navy, Marketing Terracotta, System Grau, Mein Tag neutral) = Orientierung
     als getoenter Icon-Container + zarte Sidebar-Sektionsbox. Nie als Vollflaeche.
   · Status-Pills satt (nicht pastell), 700er Text, Vollton-Punkt davor.
   · Keine Emojis als UI-Icons, kein Glassmorphism, keine Glows/Gradienten,
     kein Lila/Pink, kein abgeschnittener Text, Controls einer Reihe gleich hoch.

   ARCHITEKTUR: gleiche Klassennamen wie V2.0 → alle Seiten ziehen automatisch
   mit. Rein additiv (Variablen + .l24-* Klassen), kein Reset, kein JS.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Flaechen ─────────────────────────────────────────────────────────── */
  --l24-bg:#F6F6F7;
  --l24-surface:#FFFFFF;
  --l24-surface-2:#FAFAFB;
  --l24-surface-3:#F1F1F3;
  --l24-hover:#EFEFF1;
  --l24-row-hover:#F4F4F5;

  /* ── Text (dunkler = fetter Eindruck) ─────────────────────────────────── */
  --l24-ink:#141416;
  --l24-text-2:#3F4046;   /* Body/Tabelle — dunkler als V2.0 */
  --l24-text-3:#6E6E73;   /* Meta/Eyebrow */
  --l24-text-4:#9A9CA2;   /* Faint/Placeholder */

  /* ── Linien ───────────────────────────────────────────────────────────── */
  --l24-border:#E4E4E7;
  --l24-border-strong:#D4D4D8;
  --l24-hairline:#F0F0F1;

  /* ── Amber (Marke/Signatur — sparsam!) ────────────────────────────────── */
  --l24-amber:#E89A3C;
  --l24-amber-deep:#7A4D0F;   /* dunkles Amber fuer Text auf hell (Eyebrow) */
  --l24-amber-text:#B45309;   /* Amber-Text auf Weiss, 5:1 */
  --l24-amber-soft:#FBEFDD;
  --l24-amber-line:#E7D5B4;

  /* ── Status (satt, WCAG-fest) ─────────────────────────────────────────── */
  --l24-green:#0A5C2C;        --l24-green-bg:#C9EED6;   --l24-green-dot:#0A5C2C;  --l24-green-vollton:#1E7E43;
  --l24-blue:#0B4F8A;         --l24-blue-bg:#CCE4F9;    --l24-blue-dot:#0B4F8A;
  --l24-red:#9B1C15;          --l24-red-bg:#F9D3D0;     --l24-red-dot:#9B1C15;
  --l24-neutral:#3F4046;      --l24-neutral-bg:#E8E8EA;
  /* Solide Status-Grundtoene fuer Balken/Icons */
  --l24-green-solid:#1E7E43;
  --l24-red-solid:#C43025;
  --l24-blue-solid:#1D4ED8;
  --l24-amber-solid:#E89A3C;
  --l24-slate:#475569;        --l24-slate-bg:#E2E8F0;

  /* ── Bereichsfarben (Orientierung: tint-bg + dunkle Glyphe) ───────────── */
  --l24-prod:#1D4ED8;   --l24-prod-tint:#DBE7FB;   --l24-prod-ink:#17498F;   --l24-prod-sec:#F0F5FD;
  --l24-vert:#15803D;   --l24-vert-tint:#D9F1E0;   --l24-vert-ink:#1C6B3B;   --l24-vert-sec:#F0F8F2;
  --l24-supp:#0F766E;   --l24-supp-tint:#D2F1EB;   --l24-supp-ink:#0C6672;   --l24-supp-sec:#EFF7F6;
  --l24-fin:#475569;    --l24-fin-tint:#E2E8F0;    --l24-fin-ink:#24406E;    --l24-fin-sec:#F1F4F8;
  --l24-mkt:#C2410C;    --l24-mkt-tint:#FBE3D8;    --l24-mkt-ink:#9A3412;    --l24-mkt-sec:#FBF1EC;
  --l24-sys:#52525B;    --l24-sys-tint:#ECECEE;    --l24-sys-ink:#3F3F46;    --l24-sys-sec:#F4F4F5;
  --l24-tag2:#18181B;   --l24-tag2-tint:#E9E9EB;   --l24-tag2-ink:#18181B;   --l24-tag2-sec:#F2F2F3; /* Mein Tag = neutral */

  /* ── Shell ────────────────────────────────────────────────────────────── */
  --l24-taskbar:#141416;
  --l24-taskbar-item:#A1A1AA;
  --l24-taskbar-hover:#232326;
  --l24-taskbar-active:#2A2A2F;

  /* ── Geometrie ────────────────────────────────────────────────────────── */
  --l24-radius:12px;                /* Karten (weicher) */
  --l24-radius-s:8px;               /* Controls */
  --l24-radius-xs:6px;
  --l24-h:34px;                     /* Control-Hoehe (etwas hoeher = bold) */
  --l24-h-sm:26px;
  --l24-shadow:0 1px 2px rgba(20,20,22,0.04);
  --l24-focus:0 0 0 2px #FFFFFF, 0 0 0 4px #141416;  /* schwarzer Fokusring, nie Amber */

  /* ── Typo ─────────────────────────────────────────────────────────────── */
  --l24-font:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
  --l24-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --l24-topbar-h:48px;
  --l24-taskbar-h:44px;
  --l24-sidebar-w:200px;
  --l24-sidebar-w-c:56px;
  --l24-page-w:1320px;
}

/* ═══ Basis ══════════════════════════════════════════════════════════════ */
.l24-body{
  margin:0;background:var(--l24-bg);color:var(--l24-ink);
  font-family:var(--l24-font);font-size:14px;font-weight:500;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.l24-page{max-width:var(--l24-page-w);margin:0 auto;padding:18px 18px 48px;}
.l24-page.narrow{max-width:980px;}
.l24-stack{display:flex;flex-direction:column;gap:12px;}

/* ═══ Seiten-Kopf ════════════════════════════════════════════════════════ */
.l24-page-hd{display:flex;align-items:center;gap:12px;margin:0 0 16px;flex-wrap:wrap;}
.l24-page-hd .crumb{font-size:11px;font-weight:500;color:var(--l24-text-3);margin:0 0 2px;letter-spacing:0;text-transform:none;}
.l24-page-hd h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-0.01em;color:var(--l24-ink);}
.l24-page-hd .sub{margin:2px 0 0;font-size:12px;font-weight:500;color:var(--l24-text-3);}
.l24-page-hd .spacer{margin-left:auto;}
.l24-page-hd .hd-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
/* Seitenkopf mit Bereichs-Icon-Container davor */
.l24-page-hd .l24-ic{flex:none;}

/* ═══ Bereichs-Icon-Container (Orientierungssystem) ══════════════════════ */
.l24-ic{
  width:32px;height:32px;flex:none;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--l24-sys-tint);color:var(--l24-sys-ink);
}
.l24-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.l24-ic.sm{width:26px;height:26px;border-radius:7px;}
.l24-ic.sm svg{width:14px;height:14px;}
.l24-ic.lg{width:38px;height:38px;border-radius:10px;}
.l24-ic.lg svg{width:20px;height:20px;}
.l24-ic.prod{background:var(--l24-prod-tint);color:var(--l24-prod-ink);}
.l24-ic.vert{background:var(--l24-vert-tint);color:var(--l24-vert-ink);}
.l24-ic.supp{background:var(--l24-supp-tint);color:var(--l24-supp-ink);}
.l24-ic.fin{background:var(--l24-fin-tint);color:var(--l24-fin-ink);}
.l24-ic.mkt{background:var(--l24-mkt-tint);color:var(--l24-mkt-ink);}
.l24-ic.sys{background:var(--l24-sys-tint);color:var(--l24-sys-ink);}
.l24-ic.tag2{background:var(--l24-tag2-tint);color:var(--l24-tag2-ink);}

/* ═══ Karte ══════════════════════════════════════════════════════════════ */
.l24-card{
  background:var(--l24-surface);border:1px solid var(--l24-border);
  border-radius:var(--l24-radius);box-shadow:var(--l24-shadow);padding:16px;
}
.l24-card.flush{padding:0;}
.l24-card-hd{display:flex;align-items:center;gap:10px;margin:0 0 12px;}
.l24-card.flush .l24-card-hd{padding:14px 16px 0;margin-bottom:10px;}
.l24-card-hd h2,.l24-card-hd h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-0.005em;color:var(--l24-ink);}
.l24-card-hd .hint{margin-left:auto;font-size:12px;font-weight:500;color:var(--l24-text-3);white-space:nowrap;}
.l24-card-hd .eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--l24-text-3);}
.l24-card-sep{height:1px;background:var(--l24-hairline);margin:12px 0;}
/* Bereichs-Akzentkante nur fuer die oberste Hauptkarte einer Modulseite */
.l24-card.lead-prod{border-top:3px solid var(--l24-prod);}
.l24-card.lead-vert{border-top:3px solid var(--l24-vert);}
.l24-card.lead-supp{border-top:3px solid var(--l24-supp);}
.l24-card.lead-fin{border-top:3px solid var(--l24-fin);}
.l24-card.lead-mkt{border-top:3px solid var(--l24-mkt);}

/* ═══ Eyebrow (Maschinen-Label) ═════════════════════════════════════════ */
.l24-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--l24-text-3);}

/* ═══ KPI-Kachel (klickbar, mit Bereichs-Icon) ══════════════════════════ */
.l24-kpi{
  position:relative;background:var(--l24-surface);border:1px solid var(--l24-border);
  border-radius:var(--l24-radius);padding:16px;display:flex;flex-direction:column;
  gap:6px;min-width:0;text-decoration:none;color:inherit;box-shadow:var(--l24-shadow);
}
.l24-kpi .k-head{display:flex;align-items:center;gap:9px;margin-bottom:2px;}
.l24-kpi .k-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--l24-text-3);}
.l24-kpi .k-value{font-size:32px;font-weight:800;letter-spacing:-0.02em;color:var(--l24-ink);font-variant-numeric:tabular-nums;line-height:1.1;}
.l24-kpi .k-value .k-of{font-size:19px;color:#B9BABF;font-weight:600;}
.l24-kpi .k-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.l24-kpi .k-sub{font-size:12px;font-weight:500;color:var(--l24-text-3);margin-top:auto;}
.l24-kpi.is-link{cursor:pointer;transition:border-color .12s;}
.l24-kpi.is-link:hover{border-color:var(--l24-ink);}
.l24-kpi.is-link::after{
  content:'';position:absolute;top:16px;right:16px;width:8px;height:8px;
  border-top:1.6px solid #C4C5CA;border-right:1.6px solid #C4C5CA;
  transform:rotate(45deg);transition:border-color .12s;
}
.l24-kpi.is-link:hover::after{border-color:var(--l24-text-3);}
.l24-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.l24-kpi-grid.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}

/* ═══ Delta-Chip (an KPI-Zahlen) ════════════════════════════════════════ */
.l24-delta{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:999px;white-space:nowrap;}
.l24-delta::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;}
.l24-delta.up{background:var(--l24-green-bg);color:var(--l24-green);}
.l24-delta.up::before{background:var(--l24-green-dot);}
.l24-delta.down{background:var(--l24-red-bg);color:var(--l24-red);}
.l24-delta.down::before{background:var(--l24-red-dot);}
.l24-delta.flat{background:var(--l24-neutral-bg);color:var(--l24-neutral);}
.l24-delta.flat::before{background:var(--l24-neutral);}

/* ═══ Fortschrittsbalken ═════════════════════════════════════════════════ */
.l24-bar{height:6px;background:var(--l24-hover);border-radius:999px;overflow:hidden;}
.l24-bar>i{display:block;height:100%;background:var(--l24-ink);border-radius:999px;transition:width .3s;}
.l24-bar.muted>i{background:var(--l24-text-4);}
.l24-bar.green>i{background:var(--l24-green-solid);}
.l24-bar.red>i{background:var(--l24-red-solid);}
.l24-bar.prod>i{background:var(--l24-prod);}

/* ═══ Buttons — EINHEITLICHE HOEHE, NIE UMBRECHEND ═══════════════════════ */
.l24-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--l24-h);padding:0 14px;box-sizing:border-box;
  border-radius:var(--l24-radius-s);border:1px solid var(--l24-border);
  background:var(--l24-surface);color:var(--l24-ink);
  font-family:var(--l24-font);font-size:13px;font-weight:600;line-height:1;
  white-space:nowrap;cursor:pointer;text-decoration:none;flex-shrink:0;
  transition:background .12s,border-color .12s,color .12s;
  -webkit-user-select:none;user-select:none;
}
.l24-btn:hover{background:var(--l24-surface-2);border-color:var(--l24-border-strong);}
.l24-btn:focus-visible{outline:none;box-shadow:var(--l24-focus);}
.l24-btn:disabled{opacity:.4;cursor:not-allowed;}
.l24-btn.primary{background:var(--l24-ink);border-color:var(--l24-ink);color:#fff;}
.l24-btn.primary:hover{background:#2A2A2F;border-color:#2A2A2F;}
.l24-btn.accent{background:var(--l24-amber);border-color:var(--l24-amber);color:#141416;}
.l24-btn.accent:hover{background:#DA8B2C;border-color:#DA8B2C;}
.l24-btn.danger{background:var(--l24-surface);border-color:#F0C4C1;color:var(--l24-red);}
.l24-btn.danger:hover{background:var(--l24-red-bg);border-color:var(--l24-red-solid);}
.l24-btn.subtle{border-color:transparent;background:transparent;color:var(--l24-text-2);}
.l24-btn.subtle:hover{background:var(--l24-hover);color:var(--l24-ink);}
.l24-btn.sm{height:var(--l24-h-sm);padding:0 10px;font-size:12px;gap:5px;}
.l24-btn.ico{width:var(--l24-h);padding:0;}
.l24-btn.ico.sm{width:var(--l24-h-sm);}
.l24-btn.wide{width:100%;}
.l24-btn.on{background:var(--l24-green-bg);border-color:var(--l24-green-bg);color:var(--l24-green);}
.l24-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.l24-btn.sm svg{width:13px;height:13px;}

.l24-btnrow{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.l24-btnrow.wrap{flex-wrap:wrap;row-gap:6px;}
.l24-btnrow>.l24-btn,.l24-btnrow>.l24-input,.l24-btnrow>.l24-select{height:var(--l24-h);}
.l24-btnrow .spacer{margin-left:auto;}
.l24-btn.fix{width:66px;padding:0;}
.l24-btn.fix.w2{width:118px;}

/* ═══ Segment-Schalter / Tabs ════════════════════════════════════════════ */
.l24-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;row-gap:6px;}
.l24-tab{
  display:inline-flex;align-items:center;gap:6px;height:var(--l24-h-sm);
  padding:0 13px;box-sizing:border-box;border-radius:999px;
  border:1px solid var(--l24-border);background:var(--l24-surface);
  color:var(--l24-text-2);font-family:var(--l24-font);font-size:12px;font-weight:600;
  line-height:1;white-space:nowrap;cursor:pointer;flex-shrink:0;
  transition:background .12s,color .12s,border-color .12s;
}
.l24-tab:hover{border-color:var(--l24-border-strong);color:var(--l24-ink);}
.l24-tab.active{background:var(--l24-ink);border-color:var(--l24-ink);color:#fff;}
.l24-tab .cnt{opacity:.7;font-variant-numeric:tabular-nums;}
/* Amber-Unterstreichungs-Segmente (z.B. Postfach-Kanal auf Mobile) */
.l24-useg{display:inline-flex;align-items:center;height:32px;padding:0 4px;font-size:13px;font-weight:600;
  color:var(--l24-text-3);border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;}
.l24-useg.active{color:var(--l24-amber-text);border-bottom-color:var(--l24-amber);}

/* ═══ Chips / Tags (Status: satt + Punkt) ═══════════════════════════════ */
.l24-tag{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;
  border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;
  background:var(--l24-neutral-bg);color:var(--l24-neutral);white-space:nowrap;
}
.l24-tag.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.l24-tag.green{background:var(--l24-green-bg);color:var(--l24-green);}
.l24-tag.amber{background:var(--l24-amber-soft);color:var(--l24-amber-deep);}
.l24-tag.red{background:var(--l24-red-bg);color:var(--l24-red);}
.l24-tag.blue{background:var(--l24-blue-bg);color:var(--l24-blue);}
.l24-tag.slate{background:var(--l24-slate-bg);color:var(--l24-slate);}
.l24-tag.ink{background:var(--l24-ink);color:#fff;}
.l24-tag.outline{background:transparent;border:1px solid var(--l24-border);color:var(--l24-text-2);}
.l24-tag.mono{font-family:var(--l24-mono);}
.l24-tag b{font-weight:800;}
/* Zaehl-Badge */
.l24-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--l24-amber);
  color:#141416;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
}
.l24-badge.soft{background:var(--l24-amber-soft);color:var(--l24-amber-deep);}
.l24-badge.red{background:var(--l24-red-bg);color:var(--l24-red);}
.l24-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--l24-text-4);flex-shrink:0;}
.l24-dot.green{background:var(--l24-green-vollton);}
.l24-dot.amber{background:var(--l24-amber);}
.l24-dot.red{background:var(--l24-red-solid);}
.l24-dot.blue{background:var(--l24-blue-solid);}

/* ═══ Status-Zeile (Sendungen etc.) — Farbe TRAEGT die Aussage ══════════ */
.l24-statusrow{
  display:flex;align-items:center;gap:8px;padding:8px 11px;
  border-radius:var(--l24-radius-s);background:var(--l24-surface-3);
  font-size:11px;font-weight:600;color:var(--l24-text-2);
}
.l24-statusrow+.l24-statusrow{margin-top:6px;}
.l24-statusrow .st-label{font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;min-width:118px;}
.l24-statusrow .st-id{font-family:var(--l24-mono);font-weight:600;white-space:nowrap;}
.l24-statusrow .st-meta{margin-left:auto;font-weight:600;white-space:nowrap;}
.l24-statusrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0;}
.l24-statusrow.green{background:var(--l24-green-bg);color:var(--l24-green);}
.l24-statusrow.red{background:var(--l24-red-bg);color:var(--l24-red);}
.l24-statusrow.amber{background:var(--l24-amber-soft);color:var(--l24-amber-deep);}
.l24-statusrow.blue{background:var(--l24-blue-bg);color:var(--l24-blue);}

/* ═══ Formulare ═════════════════════════════════════════════════════════ */
.l24-input,.l24-select{
  height:var(--l24-h);padding:0 11px;box-sizing:border-box;width:100%;
  border-radius:var(--l24-radius-s);border:1px solid var(--l24-border-strong);
  background:var(--l24-surface);font-family:var(--l24-font);font-size:13px;
  font-weight:500;color:var(--l24-ink);outline:none;
  transition:border-color .12s,box-shadow .12s;
}
.l24-textarea{
  padding:10px 11px;box-sizing:border-box;width:100%;min-height:84px;resize:vertical;
  border-radius:var(--l24-radius-s);border:1px solid var(--l24-border-strong);
  background:var(--l24-surface);font-family:var(--l24-font);font-size:13px;
  font-weight:500;color:var(--l24-ink);line-height:1.55;outline:none;
  transition:border-color .12s,box-shadow .12s;
}
.l24-input:focus,.l24-select:focus,.l24-textarea:focus{border-color:var(--l24-ink);box-shadow:var(--l24-focus);}
.l24-input::placeholder,.l24-textarea::placeholder{color:var(--l24-text-4);font-weight:500;}
.l24-input.sm,.l24-select.sm{height:var(--l24-h-sm);font-size:12px;padding:0 9px;}
.l24-label{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--l24-text-3);margin:0 0 5px;}
.l24-form-row{margin-bottom:12px;}
.l24-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.l24-help{font-size:12px;font-weight:500;color:var(--l24-text-3);margin-top:5px;line-height:1.5;}
.l24-search{position:relative;display:flex;align-items:center;gap:7px;
  height:var(--l24-h);padding:0 11px;box-sizing:border-box;
  border:1px solid var(--l24-border-strong);border-radius:var(--l24-radius-s);
  background:var(--l24-surface);}
.l24-search svg{width:15px;height:15px;stroke:var(--l24-text-4);fill:none;stroke-width:1.9;flex-shrink:0;}
.l24-search input{border:0;outline:none;background:transparent;flex:1;min-width:0;
  font-family:var(--l24-font);font-size:13px;font-weight:500;color:var(--l24-ink);}
.l24-search:focus-within{border-color:var(--l24-ink);box-shadow:var(--l24-focus);}

/* ═══ Tabelle ═══════════════════════════════════════════════════════════ */
.l24-tblwrap{overflow-x:auto;}
.l24-table{width:100%;border-collapse:collapse;font-size:13px;}
.l24-table th{
  text-align:left;padding:8px 11px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--l24-text-3);
  border-bottom:1px solid var(--l24-hairline);white-space:nowrap;
}
.l24-table td{padding:11px;border-bottom:1px solid var(--l24-hairline);color:var(--l24-text-2);vertical-align:middle;font-weight:500;}
.l24-table tr:last-child td{border-bottom:0;}
.l24-table tbody tr:hover td{background:var(--l24-row-hover);}
.l24-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--l24-ink);}
.l24-table .strong{font-weight:700;color:var(--l24-ink);}
.l24-table .act{width:1%;white-space:nowrap;}
.l24-table .act .l24-btnrow{justify-content:flex-end;}

/* ═══ Listenzeile ═══════════════════════════════════════════════════════ */
.l24-list{display:flex;flex-direction:column;}
.l24-row{
  display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-top:1px solid var(--l24-hairline);min-width:0;
}
.l24-list>.l24-row:first-child{border-top:0;}
.l24-row.sel{background:var(--l24-row-hover);}
.l24-row .r-main{min-width:0;flex:1;}
.l24-row .r-title{font-size:13px;font-weight:700;color:var(--l24-ink);}
.l24-row .r-sub{font-size:12px;font-weight:500;color:var(--l24-text-2);margin-top:1px;}
.l24-row .r-meta{font-size:11px;font-weight:500;color:var(--l24-text-3);margin-top:1px;}
.l24-row .r-side{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.l24-row.is-link{cursor:pointer;}
.l24-row.is-link:hover{background:var(--l24-row-hover);}
.l24-row.done .r-title{color:var(--l24-text-4);font-weight:600;}
.l24-row.done .r-sub,.l24-row.done .r-meta{color:#B9BABF;}
.l24-thumb{width:36px;height:36px;flex:none;border-radius:var(--l24-radius-xs);
  background:var(--l24-surface-3);object-fit:cover;display:block;}

/* ═══ Key-Value-Block ═══════════════════════════════════════════════════ */
.l24-kv{width:100%;border-collapse:collapse;font-size:13px;}
.l24-kv td{padding:4px 0;vertical-align:top;font-weight:500;}
.l24-kv td.k{color:var(--l24-text-3);width:108px;white-space:nowrap;font-weight:600;}
.l24-kv td.v{color:var(--l24-ink);}
.l24-code{font-family:var(--l24-mono);background:var(--l24-surface-3);
  border-radius:5px;padding:1px 7px;color:var(--l24-ink);font-size:12px;font-weight:600;}

/* ═══ Kbd (Tasten-Optik, Hilfe-Seite + Palette) ═════════════════════════ */
.l24-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;box-sizing:border-box;border:1px solid var(--l24-border-strong);border-bottom-width:2px;
  border-radius:6px;background:#fff;font-family:var(--l24-mono);font-size:11px;font-weight:700;
  color:var(--l24-text-2);line-height:1;}

/* ═══ Leerzustand ═══════════════════════════════════════════════════════ */
.l24-empty{padding:32px 20px;text-align:center;color:var(--l24-text-3);font-size:13px;font-weight:500;line-height:1.6;}
.l24-empty b{color:var(--l24-ink);font-weight:700;display:block;margin-bottom:3px;font-size:14px;}
.l24-empty svg{width:26px;height:26px;stroke:var(--l24-text-4);fill:none;stroke-width:1.6;margin-bottom:8px;}

/* ═══ Hinweis-Banner ════════════════════════════════════════════════════ */
.l24-note{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--l24-border);border-left:3px solid var(--l24-blue-solid);
  background:var(--l24-surface);border-radius:var(--l24-radius-s);
  padding:11px 13px;font-size:12px;font-weight:500;line-height:1.55;color:var(--l24-text-2);
}
.l24-note.amber{border-left-color:var(--l24-amber);background:var(--l24-amber-soft);color:var(--l24-amber-deep);}
.l24-note.red{border-left-color:var(--l24-red-solid);}
.l24-note.green{border-left-color:var(--l24-green-solid);}
.l24-note b{color:var(--l24-ink);font-weight:700;}
.l24-note.amber b{color:var(--l24-amber-deep);}
.l24-note svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0;margin-top:1px;}

/* ═══ Toggle ════════════════════════════════════════════════════════════ */
.l24-switch{position:relative;display:inline-block;width:40px;height:23px;flex-shrink:0;}
.l24-switch input{opacity:0;width:0;height:0;}
.l24-switch .sl{position:absolute;inset:0;border-radius:999px;cursor:pointer;
  background:var(--l24-border-strong);transition:background .15s;}
.l24-switch .sl::before{content:'';position:absolute;left:3px;top:3px;width:17px;height:17px;
  border-radius:50%;background:#fff;transition:transform .15s;}
.l24-switch input:checked + .sl{background:var(--l24-ink);}
.l24-switch input:checked + .sl::before{transform:translateX(17px);}

/* ═══ Modal ═════════════════════════════════════════════════════════════ */
.l24-modal-scrim{
  position:fixed;inset:0;background:rgba(20,20,22,0.38);z-index:9000;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.l24-modal{
  background:var(--l24-surface);border-radius:14px;width:100%;max-width:460px;
  box-shadow:0 16px 48px rgba(20,20,22,0.22);overflow:hidden;
}
.l24-modal-hd{padding:18px 20px 0;}
.l24-modal-hd h3{margin:0;font-size:15px;font-weight:700;color:var(--l24-ink);}
.l24-modal-hd p{margin:7px 0 0;font-size:13px;font-weight:500;color:var(--l24-text-2);line-height:1.55;}
.l24-modal-bd{padding:16px 20px;}
.l24-modal-ft{display:flex;align-items:center;gap:6px;justify-content:flex-end;
  padding:14px 20px;border-top:1px solid var(--l24-hairline);background:var(--l24-surface-2);}

/* ═══ Toast (mit optionalem Rueckgaengig) ═══════════════════════════════ */
.l24-toast{
  position:fixed;left:50%;bottom:calc(var(--l24-taskbar-h) + 16px);transform:translateX(-50%) translateY(6px);
  display:flex;align-items:center;gap:12px;
  background:var(--l24-ink);color:#fff;border-radius:10px;
  padding:10px 14px;font-size:13px;font-weight:600;z-index:9500;white-space:nowrap;
  box-shadow:0 8px 28px rgba(20,20,22,0.28);
  opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;
}
.l24-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.l24-toast.err{background:var(--l24-red);}
.l24-toast .t-undo{background:none;border:0;color:var(--l24-amber);font-family:var(--l24-font);
  font-size:13px;font-weight:700;cursor:pointer;padding:0;}
.l24-toast .t-undo:hover{text-decoration:underline;}

/* ═══ Skeleton ══════════════════════════════════════════════════════════ */
.l24-skel{background:var(--l24-surface-3);border-radius:var(--l24-radius-xs);
  height:14px;animation:l24pulse 1.4s ease-in-out infinite;}
@keyframes l24pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ═══ Zwei-Spalten-Arbeitslayout ════════════════════════════════════════ */
.l24-split{display:flex;min-height:calc(100vh - var(--l24-topbar-h) - var(--l24-taskbar-h));align-items:stretch;}
.l24-split>.l24-split-list{
  width:272px;flex:none;background:var(--l24-surface);
  border-right:1px solid var(--l24-border);display:flex;flex-direction:column;min-height:0;
}
.l24-split>.l24-split-detail{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px;gap:12px;}
@media(max-width:860px){
  .l24-split{flex-direction:column;}
  .l24-split>.l24-split-list{width:auto;border-right:0;border-bottom:1px solid var(--l24-border);}
}

/* ═══ Hilfsklassen ══════════════════════════════════════════════════════ */
.l24-mono{font-family:var(--l24-mono);}
.l24-muted{color:var(--l24-text-3);}
.l24-nowrap{white-space:nowrap;}
.l24-hide{display:none !important;}
.l24-sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ═══ Druck ═════════════════════════════════════════════════════════════ */
@media print{
  .l24-btn,.l24-tabs,.l24-toast,.l24-search{display:none !important;}
  .l24-card{border-color:#CCC;break-inside:avoid;box-shadow:none;}
  .l24-page{max-width:none;padding:0;}
}