/* =====================================================================
   Tokens: Farben
   Aufbau: Grundpalette (Schiefer), genau eine Akzentfarbe, vier gedämpfte
   Statusfarben. Hell ist der Standard; Dunkel wird über data-theme="dark"
   oder (ohne explizite Wahl) über prefers-color-scheme geschaltet.
   Komponenten verwenden ausschließlich die semantischen Tokens (--c-*).
   ===================================================================== */
:root{
  color-scheme:light;
  /* Flächen */
  --c-bg:#f4f5f9;            /* Seitenhintergrund */
  --c-surface:#ffffff;       /* Karten, Tabellen, Dialoge */
  --c-surface-2:#f8f9fc;     /* Tabellenkopf, Gruppenköpfe, Eingabehilfen */
  --c-surface-3:#eef0f7;     /* Hover, Segment-Hintergrund, Symbolknöpfe */
  --c-overlay:rgb(20 22 48 / .45);
  /* Linien */
  --c-border:#e9ebf3;
  --c-border-strong:#d3d7e6;
  /* Text */
  --c-text:#15172b;
  --c-text-2:#44485f;
  --c-text-3:#6a6f87;        /* gedämpft, mind. 4,5:1 auf Surface */
  --c-text-disabled:#a3a8bc;
  /* Akzent (Indigo): primäre Aktionen, Links, Fokus, Auswahl */
  --c-accent:#3f4bb0;
  --c-accent-hover:#343f9a;
  --c-accent-active:#2b3482;
  --c-accent-subtle:#e7e9f7;
  --c-accent-border:#c9cdee;
  --c-accent-text:#3340a8;
  --c-on-accent:#ffffff;
  /* Status: Vordergrund, Fläche, Linie */
  --c-success:#1b7f46;  --c-success-bg:#e4f6ea;  --c-success-border:#b9e4c8;
  --c-warning:#9a6200;  --c-warning-bg:#fdf1d8;  --c-warning-border:#f0d594;
  --c-danger:#c2304a;   --c-danger-bg:#fdebee;   --c-danger-border:#f4c3cc;
  --c-info:#2f62b5;     --c-info-bg:#e8f0fc;     --c-info-border:#c3d5f3;
  --c-danger-solid:#d6394f; --c-on-danger:#ffffff;
  /* Farbflächen für Kennzahlenkarten (Text darauf: --c-on-color) */
  --c-coral:#e2603d; --c-green:#2d9a50; --c-purple:#8a45c4; --c-amber:#c9801f; --c-teal:#1f8fae; --c-on-color:#ffffff;
  /* Datenreihen (Diagramme) */
  --c-chart-1:#3f4bb0; --c-chart-2:#63cc6c; --c-chart-3:#ee7050; --c-chart-4:#9a54d4; --c-chart-5:#f2b16e; --c-chart-6:#3ab8d8;
  --c-scrim:rgb(8 10 20 / .94);  /* Vollbild-Betrachter (Bildergalerie) */
  --c-scrim-text:#ffffff;    /* Text auf farbigen Datenflächen */
  --c-focus:var(--c-accent);
}
[data-theme="dark"]{
  color-scheme:dark;
  --c-bg:#11121b;
  --c-surface:#1a1b29;
  --c-surface-2:#1f2032;
  --c-surface-3:#292b40;
  --c-overlay:rgb(0 0 0 / .6);
  --c-border:#2b2d44;
  --c-border-strong:#3c3f5c;
  --c-text:#e8e9f4;
  --c-text-2:#b7bad0;
  --c-text-3:#8f93ad;
  --c-text-disabled:#5f6380;
  --c-accent:#6b78e4;
  --c-accent-hover:#8590ee;
  --c-accent-active:#9ea8f3;
  --c-accent-subtle:#262a52;
  --c-accent-border:#38407f;
  --c-accent-text:#a3acf4;
  --c-on-accent:#ffffff;
  --c-success:#62cf8c;  --c-success-bg:#14301f;  --c-success-border:#26573a;
  --c-warning:#e5b45a;  --c-warning-bg:#2d2411;  --c-warning-border:#5e4a1a;
  --c-danger:#f2879a;   --c-danger-bg:#34161d;   --c-danger-border:#6c2c3a;
  --c-info:#85b0ea;     --c-info-bg:#15233a;     --c-info-border:#2b4670;
  --c-danger-solid:#d6394f; --c-on-danger:#ffffff;
  --c-coral:#e0623f; --c-green:#3fa44e; --c-purple:#8644c2; --c-amber:#d0903a; --c-teal:#2a93af; --c-on-color:#ffffff;
  --c-chart-1:#7683ea; --c-chart-2:#63cc6c; --c-chart-3:#f08463; --c-chart-4:#b57be3; --c-chart-5:#f2b16e; --c-chart-6:#52c3e0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --c-bg:#11121b;
    --c-surface:#1a1b29;
    --c-surface-2:#1f2032;
    --c-surface-3:#292b40;
    --c-overlay:rgb(0 0 0 / .6);
    --c-border:#2b2d44;
    --c-border-strong:#3c3f5c;
    --c-text:#e8e9f4;
    --c-text-2:#b7bad0;
    --c-text-3:#8f93ad;
    --c-text-disabled:#5f6380;
    --c-accent:#6b78e4;
    --c-accent-hover:#8590ee;
    --c-accent-active:#9ea8f3;
    --c-accent-subtle:#262a52;
    --c-accent-border:#38407f;
    --c-accent-text:#a3acf4;
    --c-on-accent:#ffffff;
    --c-success:#62cf8c;  --c-success-bg:#14301f;  --c-success-border:#26573a;
    --c-warning:#e5b45a;  --c-warning-bg:#2d2411;  --c-warning-border:#5e4a1a;
    --c-danger:#f2879a;   --c-danger-bg:#34161d;   --c-danger-border:#6c2c3a;
    --c-info:#85b0ea;     --c-info-bg:#15233a;     --c-info-border:#2b4670;
    --c-danger-solid:#d6394f; --c-on-danger:#ffffff;
    --c-coral:#e0623f; --c-green:#3fa44e; --c-purple:#8644c2; --c-amber:#d0903a; --c-teal:#2a93af; --c-on-color:#ffffff;
    --c-chart-1:#7683ea; --c-chart-2:#63cc6c; --c-chart-3:#f08463; --c-chart-4:#b57be3; --c-chart-5:#f2b16e; --c-chart-6:#52c3e0;
  }
}

/* Tokens: Typografie. Eine Familie (Poppins, selbst gehostet), Skala 11 bis 26 px,
   Hierarchie über Gewicht und Farbton. Zahlen sind tabellarisch (.num). */
:root{
  --font-sans:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --fs-0:11px; --fs-1:12px; --fs-2:14px; --fs-3:15px; --fs-4:17px; --fs-5:21px; --fs-6:28px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.3; --lh-base:1.5; --lh-loose:1.65;
  --ls-caps:.05em;
}

/* Tokens: Abstände auf 4-px-Basis (--sp-1 = 4 px). --sp-half (2 px) nur für
   Feinabstimmung innerhalb von Komponenten. Steuerelementhöhen sind Tokens. */
:root{
  --sp-0:0; --sp-half:2px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --h-control-sm:34px; --h-control:42px; --h-row:52px; --h-row-sm:44px;
  --w-sidebar:272px; --h-topbar:72px; --w-content-max:1680px;
  --z-sticky:20; --z-dropdown:30; --z-sidebar:60; --z-modal:100; --z-toast:200; --z-lock:9999;
}

/* Tokens: Radien. Drei Stufen (8 / 12 / 16 px). --radius-full ist keine Stufe,
   sondern die Kreisform für Avatare und Statuspunkte; --radius-pill für Kapseln. */
:root{ --radius-1:8px; --radius-2:12px; --radius-3:16px; --radius-full:50%; --radius-pill:999px; }

/* Tokens: Schatten. Drei weiche Stufen:
   1 = Karten/Segmente, 2 = Menüs/Tooltips, 3 = Dialoge/Schubladen. */
:root{
  --shadow-1:0 2px 16px rgb(34 38 90 / .06);
  --shadow-2:0 8px 28px rgb(34 38 90 / .12);
  --shadow-3:0 18px 48px rgb(34 38 90 / .20);
}
[data-theme="dark"]{ --shadow-1:0 2px 16px rgb(0 0 0 / .35); --shadow-2:0 8px 28px rgb(0 0 0 / .5); --shadow-3:0 18px 48px rgb(0 0 0 / .6); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --shadow-1:0 2px 16px rgb(0 0 0 / .35); --shadow-2:0 8px 28px rgb(0 0 0 / .5); --shadow-3:0 18px 48px rgb(0 0 0 / .6); } }

/* Tokens: Bewegung. Kurz und unaufdringlich (120 bis 180 ms). */
:root{
  --dur-fast:120ms; --dur-base:150ms; --dur-slow:180ms;
  --ease:cubic-bezier(.2,0,0,1);
}
@media (prefers-reduced-motion:reduce){ :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; } }

/* =====================================================================
   Basis: Schrift, Reset, Typografie, Hilfsklassen
   ===================================================================== */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("poppins-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("poppins-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("poppins-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("poppins-latin-700-normal.woff2") format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{overflow-x:clip;overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
body{overflow-x:clip}
html.navlock,html.navlock body{overflow:hidden;overscroll-behavior:none}
body{font:var(--fw-regular) var(--fs-2)/var(--lh-base) var(--font-sans);color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:var(--c-accent-text);text-decoration:none;cursor:pointer;transition:color var(--dur-fast) var(--ease)}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 var(--sp-2);font-weight:var(--fw-semibold);line-height:var(--lh-tight);color:var(--c-text)}
h1{font-size:var(--fs-5)}h2{font-size:var(--fs-4)}h3{font-size:var(--fs-3)}
h4{font-size:var(--fs-1);color:var(--c-text-3);text-transform:uppercase;letter-spacing:var(--ls-caps);font-weight:var(--fw-semibold)}
p{margin:0 0 var(--sp-2)}
hr{border:0;border-top:1px solid var(--c-border);margin:var(--sp-3) 0}
code,kbd,pre{font-family:var(--font-mono);font-size:var(--fs-1)}
::selection{background:var(--c-accent-subtle);color:var(--c-text)}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px}
:focus:not(:focus-visible){outline:none}
*{scrollbar-width:thin;scrollbar-color:var(--c-border-strong) transparent}
button{font-family:inherit}
img{max-width:100%}

/* Symbole (Lucide, ein Satz, gleiche Strichstärke) */
.i{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;pointer-events:none}
.i.sm{width:16px;height:16px;flex-basis:16px;vertical-align:-2px}
.i.lg{width:24px;height:24px;flex-basis:24px;vertical-align:-4px}

/* Hilfsklassen */
.row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.mt{margin-top:var(--sp-3)}.mb{margin-bottom:var(--sp-3)}.ml{margin-left:auto}
.mut{color:var(--c-text-3)}.small{font-size:var(--fs-1)}.b{font-weight:var(--fw-semibold)}.right{text-align:right}.center{text-align:center}
.ok{color:var(--c-success)}.warn{color:var(--c-warning)}.err{color:var(--c-danger)}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grid{display:grid;gap:var(--sp-3)}
.grid>*{min-width:0}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* =====================================================================
   Button
   Varianten: .p primary, (ohne) secondary, .ghost, .d/.danger, .link
   Größen:    md (42 px), .s sm (34 px)
   Zustände:  hover, focus-visible, active, disabled, .loading
   Icon-Button: .ib (quadratisch, 34 px)
   ===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--h-control);padding:0 var(--sp-4);
  border:1px solid var(--c-accent-border);background:var(--c-accent-subtle);color:var(--c-accent-text);border-radius:var(--radius-2);
  font:var(--fw-medium) var(--fs-2)/1 var(--font-sans);white-space:nowrap;cursor:pointer;text-decoration:none;position:relative;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn:hover{background:var(--c-accent-border);text-decoration:none}
.btn:active{background:var(--c-accent-border)}
.btn.s{height:var(--h-control-sm);padding:0 var(--sp-3);font-size:var(--fs-1)}
.btn.p{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);box-shadow:var(--shadow-1)}
.btn.p:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}
.btn.p:active{background:var(--c-accent-active);border-color:var(--c-accent-active)}
.btn.ghost,.btn.link{background:transparent;border-color:transparent;color:var(--c-text-2)}
.btn.ghost:hover{background:var(--c-surface-3);color:var(--c-text)}
.btn.link{color:var(--c-accent-text);padding:0 var(--sp-1);height:auto}
.btn.link:hover{background:transparent;text-decoration:underline}
.btn.d{color:var(--c-danger);border-color:var(--c-danger-border)}
.btn.d:hover{background:var(--c-danger-bg)}
.btn.danger{background:var(--c-danger-solid);border-color:var(--c-danger-solid);color:var(--c-on-danger)}
.btn.danger:hover{filter:brightness(.92)}
.btn:disabled,.btn.disabled{opacity:1;background:var(--c-surface-2);border-color:var(--c-border);color:var(--c-text-disabled);cursor:not-allowed}
.btn.p:disabled{background:var(--c-surface-3);border-color:var(--c-border);color:var(--c-text-disabled)}
.btn.loading{pointer-events:none;color:transparent!important;overflow:hidden}
.btn.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--c-accent-subtle),transparent);background-size:200% 100%;animation:ds-sweep 1.1s linear infinite}
.btn.w{width:100%}
.ib{display:inline-flex;align-items:center;justify-content:center;width:var(--h-control-sm);height:var(--h-control-sm);padding:0;border:0;background:var(--c-surface-3);
  border-radius:var(--radius-2);color:var(--c-text-2);cursor:pointer;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ib:hover{background:var(--c-accent-subtle);color:var(--c-accent-text)}
.ib:disabled{color:var(--c-text-disabled);cursor:not-allowed;background:var(--c-surface-2)}
@keyframes ds-sweep{from{background-position:200% 0}to{background-position:-200% 0}}

/* =====================================================================
   Eingabe: Textfeld, Select, Textarea, Datum, Checkbox, Radio, Switch
   Zustände: hover, focus, disabled, readonly, Fehler ([aria-invalid=true] / .invalid)
   ===================================================================== */
label.f{display:block;margin-bottom:var(--sp-2)}
label.f>span,.lbl{display:block;font-size:var(--fs-1);font-weight:var(--fw-medium);color:var(--c-text-2);margin-bottom:var(--sp-1)}
.hint{font-size:var(--fs-1);color:var(--c-text-3);margin-top:var(--sp-1)}
.f.err .hint,.hint.err{color:var(--c-danger)}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=email],input[type=password],input[type=month],input[type=search],input[type=tel],input[type=url],input[type=datetime-local],select,textarea{
  width:100%;height:var(--h-control);border:1px solid var(--c-border-strong);border-radius:var(--radius-2);padding:0 var(--sp-2);
  font:var(--fw-regular) var(--fs-2)/1.2 var(--font-sans);background:var(--c-surface);color:var(--c-text);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
input[type=number]{font-variant-numeric:tabular-nums}
textarea{height:auto;min-height:72px;padding:var(--sp-2);line-height:var(--lh-base);resize:vertical}
input::placeholder,textarea::placeholder{color:var(--c-text-3);opacity:1}
input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus){border-color:var(--c-text-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-subtle)}
input:disabled,select:disabled,textarea:disabled{background:var(--c-surface-2);color:var(--c-text-disabled);cursor:not-allowed;border-color:var(--c-border)}
input[readonly]:not([type=checkbox]):not([type=radio]),textarea[readonly]{background:var(--c-surface-2)}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true],.f.err input,.f.err select,.f.err textarea,input.invalid,select.invalid,textarea.invalid{border-color:var(--c-danger);box-shadow:0 0 0 3px var(--c-danger-bg)}
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{font-variant-numeric:tabular-nums;min-width:0}
::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;filter:var(--picker-filter,none)}
[data-theme="dark"]{--picker-filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--picker-filter:invert(1)}}
select{appearance:none;-webkit-appearance:none;padding-right:var(--sp-6);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--c-text-3) 50%),linear-gradient(135deg,var(--c-text-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select[multiple]{height:auto;padding:var(--sp-1);background-image:none}
td input,td select{height:var(--h-control-sm);font-size:var(--fs-1)}
.search{max-width:320px}
/* Checkbox und Radio */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;vertical-align:-3px;flex:0 0 16px;
  border:1px solid var(--c-border-strong);background:var(--c-surface);cursor:pointer;position:relative;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
input[type=checkbox]{border-radius:var(--radius-1)}
input[type=radio]{border-radius:var(--radius-full)}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--c-text-3)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--c-accent);border-color:var(--c-accent)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--c-on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=radio]:checked::after{content:"";position:absolute;inset:4px;border-radius:var(--radius-full);background:var(--c-on-accent)}
input[type=checkbox]:indeterminate{background:var(--c-accent);border-color:var(--c-accent)}
input[type=checkbox]:indeterminate::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;background:var(--c-on-accent)}
input[type=checkbox]:disabled,input[type=radio]:disabled{background:var(--c-surface-3);border-color:var(--c-border);cursor:not-allowed}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;box-shadow:none}
.chk{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-1) 0;cursor:pointer}
/* Switch: <label class="sw"><input type="checkbox"><i></i></label> */
.sw{position:relative;display:inline-block;width:32px;height:18px;flex:0 0 32px}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw i{position:absolute;inset:0;background:var(--c-border-strong);border-radius:9px;cursor:pointer;transition:background var(--dur-base) var(--ease)}
.sw i::before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:var(--c-surface);border-radius:var(--radius-full);transition:transform var(--dur-base) var(--ease);box-shadow:var(--shadow-1)}
.sw input:checked+i{background:var(--c-accent)}
.sw input:checked+i::before{transform:translateX(14px)}
.sw input:focus-visible+i{outline:2px solid var(--c-focus);outline-offset:2px}
.sw input:disabled+i{opacity:.5;cursor:not-allowed}
/* Auswahlkacheln (Radio-Gruppe als Karten) */
.opt{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.opt label{border:1px solid var(--c-border);border-radius:var(--radius-2);padding:var(--sp-2) var(--sp-3);cursor:pointer;display:block;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.opt label:hover{border-color:var(--c-border-strong)}
.opt label.on{border-color:var(--c-accent);background:var(--c-accent-subtle)}
.opt label b{display:block;margin-bottom:var(--sp-half)}.opt label .small{color:var(--c-text-3)}
.opt input{display:none}

/* =====================================================================
   Tabelle: kompakt (34 px Zeilenhöhe), Zeilen-Hover, sortierbar, fixierter Kopf
   Container: <div class="tw"> (waagerecht scrollbar). Mit .tw.fix scrollt der
   Container senkrecht und der Kopf bleibt stehen.
   Sortierung: th[data-sort] mit aria-sort="ascending|descending".
   Zahlen: td.num / th.num (rechtsbündig, tabellarische Ziffern).
   ===================================================================== */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--c-surface);font-size:var(--fs-2)}
th,td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--c-border);text-align:left;vertical-align:middle}
td{height:var(--h-row)}
th{height:var(--h-row-sm);font-size:var(--fs-1);font-weight:var(--fw-semibold);color:var(--c-text-2);background:var(--c-surface-2);white-space:nowrap;position:sticky;top:0;z-index:2;border-bottom:1px solid var(--c-border-strong)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}
tbody tr:hover td{background:var(--c-surface-3)}
tr.sum td{font-weight:var(--fw-semibold);background:var(--c-surface-2);border-top:1px solid var(--c-border-strong)}
tr.sel td{background:var(--c-accent-subtle)}
.tw{overflow-x:auto}
.tw.fix{overflow:auto;max-height:calc(100vh - 180px)}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--c-text)}
th[data-sort]::after{content:"";display:inline-block;margin-left:var(--sp-1);border:4px solid transparent;border-top-color:var(--c-text-disabled);border-bottom:0;vertical-align:2px}
th[aria-sort=ascending]::after{border-top:0;border-bottom:4px solid var(--c-accent);border-top-color:transparent}
th[aria-sort=descending]::after{border-top-color:var(--c-accent)}
.card>.tw,.card>table{margin:0}

/* =====================================================================
   Karte / Panel: weiße Fläche mit weichem Schatten, großzügiger Radius
   .card (Standard), .card.tight (dichter), .panel-h (Kopfzeile)
   ===================================================================== */
.card,.panel{background:var(--c-surface);border:0;border-radius:var(--radius-3);padding:var(--sp-5);box-shadow:var(--shadow-1);margin-bottom:var(--sp-4);min-width:0}
.card.tight,.panel.tight{padding:var(--sp-3) var(--sp-4)}
.card.flush,.panel.flush{padding:0;overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--c-border);background:var(--c-surface-2);border-radius:var(--radius-3) var(--radius-3) 0 0;font-weight:var(--fw-semibold)}
.kpi{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.kpi div span{display:block;font-size:var(--fs-1);color:var(--c-text-3)}
.kpi div b{font-size:var(--fs-4);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.stat-row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.stat,.tile{flex:1;min-width:140px;background:var(--c-surface-2);border:0;border-radius:var(--radius-2);padding:var(--sp-3) var(--sp-4)}
.stat span,.tile span{display:block;font-size:var(--fs-1);color:var(--c-text-3)}
.stat b,.tile b{font-size:var(--fs-4);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}

/* =====================================================================
   Badge / Tag: .pill (Status), Varianten ok, warn, err, info, p (Akzent)
   Tag mit Schließen-Symbol: .tag
   ===================================================================== */
.pill,.badge{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-3);border-radius:var(--radius-pill);font-size:var(--fs-1);font-weight:var(--fw-medium);line-height:1;white-space:nowrap;
  background:var(--c-surface-3);color:var(--c-text-2);border:1px solid var(--c-border)}
.pill.ok,.badge.ok{background:var(--c-success-bg);color:var(--c-success);border-color:var(--c-success-border)}
.pill.warn,.badge.warn{background:var(--c-warning-bg);color:var(--c-warning);border-color:var(--c-warning-border)}
.pill.err,.badge.err{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger-border)}
.pill.info,.badge.info{background:var(--c-info-bg);color:var(--c-info);border-color:var(--c-info-border)}
.pill.p,.badge.p{background:var(--c-accent-subtle);color:var(--c-accent-text);border-color:var(--c-accent-border)}
.tag{display:inline-flex;align-items:center;gap:var(--sp-1);height:28px;padding:0 var(--sp-3);border-radius:var(--radius-pill);background:var(--c-surface-3);border:1px solid var(--c-border);font-size:var(--fs-1);color:var(--c-text)}
.ph{display:inline-block;background:var(--c-accent-subtle);color:var(--c-accent-text);border-radius:var(--radius-1);padding:var(--sp-half) var(--sp-1);font-size:var(--fs-1);margin:var(--sp-half);cursor:pointer}

/* =====================================================================
   Tabs (Unterstreichung) und Segmentwahl (.seg)
   ===================================================================== */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--c-border);margin:var(--sp-1) 0 var(--sp-3);flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;gap:var(--sp-1);height:44px;padding:0 var(--sp-4);color:var(--c-text-2);font-weight:var(--fw-medium);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.tabs a:hover{color:var(--c-text);text-decoration:none;border-bottom-color:var(--c-border-strong)}
.tabs a.on{color:var(--c-accent-text);border-bottom-color:var(--c-accent)}
.seg{display:inline-flex;background:var(--c-surface-3);border:1px solid var(--c-border);border-radius:var(--radius-2);padding:var(--sp-1)}
.seg a{display:inline-flex;align-items:center;height:34px;padding:0 var(--sp-4);border-radius:var(--radius-1);color:var(--c-text-2);font-weight:var(--fw-medium);font-size:var(--fs-1)}
.seg a.on{background:var(--c-surface);color:var(--c-text);box-shadow:var(--shadow-1)}
.seg a:hover{text-decoration:none;color:var(--c-text)}
.steps{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-3);flex-wrap:wrap}
.steps span{display:inline-flex;align-items:center;height:30px;padding:0 var(--sp-4);border-radius:var(--radius-pill);background:var(--c-surface-3);color:var(--c-text-3);font-size:var(--fs-1);font-weight:var(--fw-medium);border:1px solid var(--c-border)}
.steps span.on{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.steps span.done{background:var(--c-success-bg);border-color:var(--c-success-border);color:var(--c-success)}
.crumb a{color:var(--c-accent-text)}.crumb span{color:var(--c-text-3);margin:0 var(--sp-1)}

/* =====================================================================
   Modal / Dialog: .ov (Hintergrund) > .md (Dialog) mit .mh Kopf, .mb Inhalt, .mf Fuß
   Größen: .md, .md.w, .md.xl, .md.xw. Öffnen: .ov.open
   ===================================================================== */
.ov{position:fixed;inset:0;background:var(--c-overlay);display:none;align-items:flex-start;justify-content:center;z-index:var(--z-modal);padding:var(--sp-10) var(--sp-3);overflow:auto}
.ov.open{display:flex}
.md{background:var(--c-surface);border:0;border-radius:var(--radius-3);width:100%;max-width:640px;box-shadow:var(--shadow-3)}
.md.w{max-width:900px}.md.xl{max-width:1100px}.md.xw{max-width:min(1500px,97vw);width:97vw}
.md .mh{height:60px;padding:0 var(--sp-5);border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;font-weight:var(--fw-semibold);font-size:var(--fs-3)}
.md .mb{padding:var(--sp-5)}
.md .mf{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--c-border);background:var(--c-surface-2);border-radius:0 0 var(--radius-3) var(--radius-3);display:flex;justify-content:space-between;gap:var(--sp-2)}
.x{display:inline-flex;align-items:center;justify-content:center;width:var(--h-control-sm);height:var(--h-control-sm);margin-right:calc(var(--sp-2) * -1);border-radius:var(--radius-2);cursor:pointer;color:var(--c-text-3);font-size:var(--fs-5);line-height:1;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.x:hover{background:var(--c-surface-3);color:var(--c-text)}

/* =====================================================================
   Toast / Hinweis: #toasts (Container) > .toast (+ .err)
   Zusätzlich Inline-Hinweise: .note (Warnung), .info (Information),
   .callout.ok / .callout.err
   ===================================================================== */
.toasts{position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-end;pointer-events:none}
.toast{pointer-events:auto;background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);border-left:3px solid var(--c-success);border-radius:var(--radius-2);padding:var(--sp-2) var(--sp-3);box-shadow:var(--shadow-2);min-width:240px;max-width:420px;font-size:var(--fs-2);animation:ds-toast var(--dur-slow) var(--ease)}
.toast.err{border-left-color:var(--c-danger)}
@keyframes ds-toast{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.note,.info,.callout{border:1px solid var(--c-border);border-radius:var(--radius-2);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2)}
.note{background:var(--c-warning-bg);border-color:var(--c-warning-border);color:var(--c-warning)}
.info{background:var(--c-info-bg);border-color:var(--c-info-border);color:var(--c-info)}
.callout.ok{background:var(--c-success-bg);border-color:var(--c-success-border);color:var(--c-success)}
.callout.err{background:var(--c-danger-bg);border-color:var(--c-danger-border);color:var(--c-danger)}
.note a,.info a{color:inherit;text-decoration:underline}

/* =====================================================================
   Dropdown / Menü: .menu > (Auslöser .ib.menu-btn) + .dd (Liste), geöffnet mit .menu.open
   Einträge: .dd a, Gefahr: .dd a.d, Trenner: .dd hr
   ===================================================================== */
.menu{position:relative;display:inline-block}
.menu .dd{position:absolute;right:0;top:calc(100% + var(--sp-1));background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-3);box-shadow:var(--shadow-2);min-width:180px;z-index:var(--z-dropdown);display:none;padding:var(--sp-1)}
.menu.open .dd{display:block;animation:ds-pop var(--dur-fast) var(--ease)}
.dd a{display:flex;align-items:center;gap:var(--sp-2);height:var(--h-control-sm);padding:0 var(--sp-2);color:var(--c-text);border-radius:var(--radius-1);cursor:pointer}
.dd a:hover{background:var(--c-surface-3);text-decoration:none}
.dd a.d{color:var(--c-danger)}
.dd hr{margin:var(--sp-1) 0}
@keyframes ds-pop{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}

/* =====================================================================
   Tooltip: Attribut data-tip="Text" an jedem Element. Erscheint bei Hover und Fokus.
   ===================================================================== */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + var(--sp-1));transform:translateX(-50%);background:var(--c-text);color:var(--c-bg);
  font-size:var(--fs-1);font-weight:var(--fw-regular);line-height:var(--lh-tight);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-1);white-space:nowrap;max-width:280px;pointer-events:none;opacity:0;z-index:var(--z-dropdown);box-shadow:var(--shadow-2);transition:opacity var(--dur-fast) var(--ease)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transition-delay:300ms}

/* =====================================================================
   Leer- und Ladezustand: .empty (Leerzustand), .sk (Skeleton), .bar (Fortschritt)
   Skeleton statt Spinner: <div class="sk" style="width:60%"></div> oder .sk.line/.sk.block
   ===================================================================== */
.empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--c-text-3)}
.empty .big{display:flex;justify-content:center;color:var(--c-text-disabled);margin-bottom:var(--sp-2)}
.empty .big .i{width:28px;height:28px;flex-basis:28px}
.empty .b{color:var(--c-text);margin-bottom:var(--sp-1)}
.sk{display:block;height:12px;border-radius:var(--radius-1);background:linear-gradient(90deg,var(--c-surface-3) 25%,var(--c-border) 50%,var(--c-surface-3) 75%);background-size:200% 100%;animation:ds-skeleton 1.4s linear infinite}
.sk.line{height:var(--sp-3);margin:var(--sp-2) 0}.sk.block{height:96px;border-radius:var(--radius-2)}
@keyframes ds-skeleton{from{background-position:200% 0}to{background-position:-200% 0}}
.bar{height:6px;background:var(--c-surface-3);border-radius:var(--radius-1);overflow:hidden}
.bar i{display:block;height:100%;background:var(--c-accent);transition:width var(--dur-slow) var(--ease)}
.drop{border:1px dashed var(--c-border-strong);border-radius:var(--radius-2);padding:var(--sp-5);text-align:center;color:var(--c-text-2);cursor:pointer;background:var(--c-surface-2);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.drop:hover,.drop.over{background:var(--c-accent-subtle);border-color:var(--c-accent);color:var(--c-accent-text)}
.check{padding:0;margin:0}
.check li{list-style:none;padding:var(--sp-2) 0;border-bottom:1px solid var(--c-border);display:flex;gap:var(--sp-2);align-items:center}
.check li.done{color:var(--c-text-3);text-decoration:line-through}

/* =====================================================================
   Layout und Navigation: feste Seitenleiste (224 px), kompakte Kopfzeile,
   Inhaltsbereich. Bis 800 px wird die Seitenleiste zur Schublade.
   Struktur: .app > (.topbar, .navov, aside.side[.brand,.propsel,nav.nav>.grp>(.grp-t,a>.i)], main.main)
   ===================================================================== */
.app{display:grid;grid-template-columns:var(--w-sidebar) minmax(0,1fr);grid-template-rows:var(--h-topbar) 1fr;min-height:100vh;max-width:100vw}
.side{grid-column:1;grid-row:1 / span 2;width:var(--w-sidebar);background:var(--c-surface);box-shadow:var(--shadow-1);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;z-index:var(--z-sidebar);overscroll-behavior:contain}
.brand{position:relative;display:flex;align-items:center;gap:var(--sp-2);height:var(--h-topbar);padding:0 var(--sp-5);flex:0 0 auto}
.brand .logo{display:flex;align-items:center;font-size:var(--fs-4);font-weight:var(--fw-semibold);color:var(--c-text);letter-spacing:-.01em;min-width:0}
.brand .logo img{max-height:26px;max-width:100%}
.brand .badge{height:18px;padding:0 var(--sp-1);font-size:var(--fs-0);background:var(--c-surface-3);color:var(--c-text-3);border:1px solid var(--c-border);border-radius:var(--radius-1);display:inline-flex;align-items:center;margin:0}
.propsel{margin:0 var(--sp-4) var(--sp-3);background:var(--c-surface-2);border:0;border-radius:var(--radius-2);padding:var(--sp-2) var(--sp-3);cursor:pointer;display:flex;align-items:center;gap:var(--sp-3);min-height:52px;transition:background var(--dur-fast) var(--ease)}
.propsel:hover{background:var(--c-surface-3)}
.propsel .ic{width:34px;height:34px;flex:0 0 34px;border-radius:var(--radius-1);background:var(--c-accent-subtle);color:var(--c-accent-text);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-semibold);font-size:var(--fs-1)}
.propsel .n{font-weight:var(--fw-medium);font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.propsel .a{font-size:var(--fs-0);color:var(--c-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.nav{flex:1;min-height:0;padding:var(--sp-1) var(--sp-4) var(--sp-4);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.nav .grp{margin-bottom:var(--sp-2)}
.nav .grp-t{font-size:var(--fs-0);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-text-3);padding:var(--sp-3) var(--sp-3) var(--sp-1)}
.nav a,.nav .navi{position:relative;display:flex;align-items:center;gap:var(--sp-2);height:46px;padding:0 var(--sp-3);margin-bottom:var(--sp-half);border-radius:var(--radius-2);color:var(--c-text-2);font-weight:var(--fw-medium);font-size:var(--fs-2);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav a:hover{background:var(--c-surface-3);color:var(--c-text);text-decoration:none}
.nav a.on{background:var(--c-accent-subtle);color:var(--c-accent-text);font-weight:var(--fw-semibold)}
.nav a .i{color:var(--c-text-3);width:20px;height:20px;flex-basis:20px}
.nav a:hover .i{color:var(--c-text-2)}
.nav a.on .i{color:var(--c-accent-text)}
.nav .sp{display:none}
.nav .foot{border-top:1px solid var(--c-border);margin-top:var(--sp-2);padding-top:var(--sp-2)}
.nav a .zahl{margin-left:auto;background:var(--c-accent);color:var(--c-on-accent);border-radius:var(--radius-1);font-size:var(--fs-0);font-weight:var(--fw-semibold);min-width:18px;height:16px;line-height:16px;text-align:center;padding:0 var(--sp-1);font-variant-numeric:tabular-nums}
.nav a .zahl[hidden]{display:none}
.nav a.on .zahl{background:var(--c-accent)}
.userbox{margin-top:var(--sp-2);padding:var(--sp-2);border:1px solid var(--c-border);border-radius:var(--radius-2);background:var(--c-surface-2)}
.userbox .un{font-weight:var(--fw-medium);font-size:var(--fs-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbox .ur{font-size:var(--fs-1);color:var(--c-text-3);margin-bottom:var(--sp-1)}
.userbox .ua{font-size:var(--fs-1);cursor:pointer;color:var(--c-accent-text)}
.main{grid-column:2;grid-row:2;min-width:0;padding:var(--sp-6) var(--sp-6) var(--sp-10);max-width:var(--w-content-max);width:100%}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap}
.head h1{margin:0}
.head .sub{color:var(--c-text-3);font-size:var(--fs-2);margin-top:var(--sp-half)}
.navov{display:none}
.topbar{grid-column:2;grid-row:1;display:flex;align-items:center;gap:var(--sp-3);position:sticky;top:0;z-index:var(--z-sticky);height:var(--h-topbar);padding:0 var(--sp-6);background:var(--c-surface);box-shadow:var(--shadow-1)}
.topbar .burger{display:none}
.topbar .tt{min-width:0;flex:1}
.topbar .tt b{display:block;font-size:var(--fs-4);font-weight:var(--fw-semibold);line-height:1.2}
.topbar .tt span{display:block;font-size:var(--fs-1);color:var(--c-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tools{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
@media(max-width:800px){
  .app{display:block}
  .topbar .burger{display:flex}
  .topbar{display:flex;align-items:center;gap:var(--sp-2);position:sticky;top:0;z-index:40;background:var(--c-surface);height:var(--h-topbar);padding:0 var(--sp-4);padding-top:env(safe-area-inset-top);box-sizing:content-box}
  .topbar .burger{width:var(--h-control);height:var(--h-control);flex:0 0 var(--h-control);border:0;background:var(--c-surface-3);border-radius:var(--radius-2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--c-text);padding:0}
  .topbar .tt{min-width:0;flex:1}
  .topbar .tt b{display:block;font-size:var(--fs-3);font-weight:var(--fw-semibold);line-height:1.2}
  .topbar .tt span{display:block;font-size:var(--fs-1);color:var(--c-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side{position:fixed;top:0;left:0;bottom:0;width:min(86vw,300px);flex:none;height:100dvh;transform:translateX(-100%);visibility:hidden;transition:transform var(--dur-slow) var(--ease),visibility 0s linear var(--dur-slow);box-shadow:none;padding-top:env(safe-area-inset-top)}
  .app.navopen .side{transform:none;visibility:visible;box-shadow:var(--shadow-3);transition:transform var(--dur-slow) var(--ease),visibility 0s}
  .navov{display:block;position:fixed;inset:0;touch-action:none;background:var(--c-overlay);z-index:55;opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease)}
  .app.navopen .navov{opacity:1;pointer-events:auto}
  .nav a{height:46px}
  .main{padding:var(--sp-4) var(--sp-4) 72px}
  .head{gap:var(--sp-2)}.head .actions{width:100%}.head .actions .btn{flex:1 1 auto}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs a{white-space:nowrap}
  .seg{max-width:100%;overflow-x:auto}
  .tw{margin:0 calc(var(--sp-3) * -1);padding:0 var(--sp-3)}
  .tw table{min-width:560px}
  th,td{padding:var(--sp-1) var(--sp-2)}
  .ov{align-items:flex-end;padding:0}
  .md,.md.w,.md.xl{max-width:100%;border-radius:var(--radius-3) var(--radius-3) 0 0;max-height:92dvh;display:flex;flex-direction:column}
  .md .mb{overflow:auto;-webkit-overflow-scrolling:touch}
  .md .mf{flex-wrap:wrap;padding-bottom:calc(var(--sp-2) + env(safe-area-inset-bottom))}
  .md .mf .btn{flex:1 1 auto}
  input,select,textarea{font-size:var(--fs-4)}
  .toasts{left:var(--sp-3);right:var(--sp-3);align-items:stretch}
}
@media print{
  body{background:#fff;color:#000}
  .side,.head .actions,.tabs,.no-print,.toasts,.ov,.topbar{display:none!important}
  .main{padding:0;max-width:none}
  .card{box-shadow:none;border:0;padding:0;break-inside:avoid}
  .print-only{display:block!important}
}
.print-only{display:none}