/* ============================================================
   PRESCH — Business Intelligence Theme Layer v3
   Zeitlos-modern, flach (kein Glas), datenorientiert.
   ============================================================ */

/* ---------- Malva ---------- */
@font-face { font-family:"Malva"; src:url("../assets/fonts/Malva-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Malva"; src:url("../assets/fonts/Malva-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Malva"; src:url("../assets/fonts/Malva-Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; }

/* ============================================================ TOKENS */
:root {
  --presch-primary:#182938; --presch-secondary:#FC4C02; --presch-secondary-hover:#d94102;

  /* Flächen — BRIGHT */
  --canvas:#FFFFFF; --card:#F4F7FA; --card-2:#FFFFFF; --card-hover-bg:#FFFFFF;
  --text-main:#182938; --text-muted:#5B6B7A; --text-faint:#6E7C8A;
  --border:#E6EBF1; --border-strong:#CBD5E1; --track:#E6EBF1;
  --th-bg:#EEF2F7; --th-fg:#5B6B7A; --cf-bg:#FFFFFF; --cf-border:#CBD5E1; --cf-fg:#182938;

  /* Sidebar: dezente Ton-Abhebung statt Trennlinie */
  --side-bg:#F4F7FA; --side-border:transparent;
  --side-fg:#5B6B7A; --side-fg-strong:#182938; --side-hover:rgba(24,41,56,0.05);

  /* Status */
  --success:#1F9D3D; --warning:#E0A100; --critical:#DC2626; --info:#2563EB;
  --pos-trend:#1F9D3D; --neg-trend:#DC2626;
  --success-soft:#E7F5EB; --success-ink:#157A2E;
  --warning-soft:#FBF1D6; --warning-ink:#8A6200;
  --critical-soft:#FCE6E6; --critical-ink:#B91C1C;
  --info-soft:#E6EEFE; --info-ink:#1D4ED8;

  /* Diagramm-Palette (10) — Lieblingsfarben zuerst: Blau · Violett · Orange · Teal · Rosé */
  --d1:#2F6BFF; --d2:#8B5CF6; --d3:#FC4C02; --d4:#00B8A3; --d5:#F43F5E;
  --d6:#06B6D4; --d7:#F5A623; --d8:#EC4899; --d9:#22C55E; --d10:#5B6B85;
  /* Abgestufte Grautöne für neutrale/kontextuelle Serien (z. B. Soll, Vorperiode, „Sonstige"); gleich in Hell & Dunkel */
  --gray-1:#5B6B85; --gray-2:#8595A8; --gray-3:#AEB9C7;
  --grid-line:rgba(24,41,56,0.08);

  /* KPI-Akzentfarben (fest je Kennzahl, seitenübergreifend konstant) — gleiche Reihenfolge wie Palette */
  --kpi-1:#2F6BFF; --kpi-2:#8B5CF6; --kpi-3:#FC4C02; --kpi-4:#00B8A3; --kpi-5:#F43F5E;
  --kpi-6:#06B6D4; --kpi-7:#F5A623; --kpi-8:#EC4899; --kpi-9:#22C55E; --kpi-10:#5B6B85;

  --r-btn:6px; --r-card:10px;
  --shadow-hover:0 10px 24px rgba(24,41,56,0.14);
  --shadow-card:0 1px 2px rgba(24,41,56,0.05);
  --hover-ring:0 0 0 0 transparent;
  --header-shadow:none;
  --side-shadow:none;
  --ease:cubic-bezier(0.2,0,0.1,1); --dur:200ms;
}

.dark {
  --canvas:#16232F; --card:#1C2E40; --card-2:#21344A; --card-hover-bg:#213a52;
  --text-main:#FFFFFF; --text-muted:#A6BACE; --text-faint:#7089A0;
  --border:#2C4257; --border-strong:#46627E; --track:#2C4257;
  --th-bg:#182938; --th-fg:#cdd6df; --cf-bg:#22354a; --cf-border:#34506c; --cf-fg:#ffffff;

  /* Sidebar + Header im Dark-Mode im bevorzugten Canvas-Blau, Trennung per Schatten */
  --side-bg:#121E2A; --side-border:transparent;
  --side-fg:#9DB0C2; --side-fg-strong:#FFFFFF; --side-hover:rgba(255,255,255,0.06);

  --success:#2BB24C; --warning:#F0B400; --critical:#F2555A; --info:#5B9BF5;
  --pos-trend:#3DDC84; --neg-trend:#FF6B6B;
  --success-soft:#16331F; --success-ink:#5FE08A;
  --warning-soft:#352B11; --warning-ink:#FFD24D;
  --critical-soft:#36191B; --critical-ink:#FF8A8E;
  --info-soft:#16243C; --info-ink:#84B6FB;

  --grid-line:rgba(255,255,255,0.08);
  --shadow-card:0 1px 2px rgba(0,0,0,0.30);
  --shadow-hover:0 12px 26px rgba(0,0,0,0.55);
  --hover-ring:0 0 0 1px rgba(255,255,255,0.07);
  --header-shadow:none;
  --side-shadow:none;
}

/* ============================================================ BASIS */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Malva",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--canvas); color:var(--text-main); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.font-malva { font-family:"Malva",system-ui,sans-serif; }

/* ============================================================ PREFLIGHT-RESET
   Ersetzt den unsichtbaren Reset, den frueher der Tailwind-CDN mitbrachte.
   Damit sehen <button>, <h*>, Formularfelder und <img> ohne Tailwind genauso
   aus wie im urspruenglichen Gold-Standard. Niedrige Prioritaet (frueh in der Datei),
   eigene Komponenten-Klassen ueberschreiben das problemlos.
   ============================================================ */
h1,h2,h3,h4,h5,h6 { margin:0; font-size:inherit; font-weight:inherit; }
p,blockquote,figure,pre,dl,dd,hr { margin:0; }
button,input,optgroup,select,textarea {
  font-family:inherit; font-size:100%; font-weight:inherit; line-height:inherit;
  letter-spacing:inherit; color:inherit; margin:0; padding:0;
}
button,select { text-transform:none; }
button,[type="button"],[type="reset"],[type="submit"] {
  -webkit-appearance:button; appearance:button; background-color:transparent; background-image:none; border:0;
}
button { cursor:pointer; }
img,svg,video,canvas { display:block; vertical-align:middle; }
img,video { max-width:100%; height:auto; }

.eyebrow { font-weight:700; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--presch-secondary); }
.h1 { font-weight:900; font-size:clamp(30px,3.4vw,44px); line-height:1.05; letter-spacing:-0.02em; }
.h2 { font-weight:900; font-size:clamp(24px,2.4vw,34px); line-height:1.1; letter-spacing:-0.02em; }
.h3 { font-weight:700; font-size:20px; line-height:1.2; letter-spacing:-0.01em; }
.num { font-variant-numeric:tabular-nums; }

/* Einheitliche Kennzahl-Typografie — definierte Stufen statt freihändiger px.
   Zwei feste Größen, beide Malva Black, gleiche Farbe, Einheit (%/€/…) proportional:
     • Standard      .stat-val            32px / Einheit 20px  → Haupt-KPIs, normale Karten
     • Kompakt        .stat-val.stat-sm    26px / Einheit 16px  → kleine/dichte Boxen (mehrere Zahlen nebeneinander, schmale Kacheln, Inline-Zeilen)
   NICHT per inline font-size pro Karte überschreiben (das ergibt wieder uneinheitliche Ziffern).
   Innerhalb einer Stufe sind alle Zahlen exakt gleich groß; kompakt nur wählen, wo es der Platz sinnvoll macht.
   Braucht ein Kontext wirklich eine weitere Größe, eine zusätzliche benannte Stufe hier ergänzen. */
.stat { display:flex; flex-direction:column; height:100%; }
.stat-val { font-family:"Malva",sans-serif; font-weight:900; font-size:32px; line-height:1; letter-spacing:0.015em; color:var(--text-main); display:flex; align-items:baseline; }
.stat-unit { font-weight:900; font-size:20px; line-height:1; color:var(--text-main); margin-left:1px; }  /* festes Verhältnis 20/32 zur Zahl */
.stat-val.stat-sm { font-size:26px; }
.stat-val.stat-sm .stat-unit { font-size:16px; }
.stat-label { margin-top:8px; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); }
.stat-foot { margin-top:auto; padding-top:12px; }

/* ============================================================ KARTE */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.card-hover { cursor:default; }
.card-hover:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover), var(--hover-ring);
  border-color:var(--border-strong); background:var(--card-hover-bg); }
.card-active { border-color:var(--presch-secondary); box-shadow:0 0 0 1px var(--presch-secondary), var(--shadow-card); }
/* KPI-Akzent (optionales Zusatzelement: feste Farbe je Kennzahl) */
.kpi-accent { border-left:4px solid var(--accent, var(--presch-secondary)); }
.kpi-dot { width:9px; height:9px; border-radius:50%; background:var(--accent, var(--presch-secondary)); display:inline-block; flex:0 0 auto; }

/* ============================================================ PROGRESS */
.track { background:var(--track); border-radius:999px; height:8px; overflow:hidden; }
.track > span { display:block; height:100%; background:var(--presch-secondary); border-radius:999px; transition:width 700ms var(--ease); }

/* ============================================================ BUTTONS */
.btn { font-weight:700; border-radius:var(--r-btn); transition:all var(--dur) var(--ease); display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; line-height:1; font:inherit; font-weight:700; text-decoration:none; }
.btn:active { transform:scale(0.97); }
.btn:focus-visible { outline:2px solid var(--presch-secondary); outline-offset:2px; }
.btn-primary { background:var(--presch-secondary); color:#fff; padding:11px 18px; border:0; }
.btn-primary:hover { background:var(--presch-secondary-hover); box-shadow:var(--shadow-hover); }
.btn-secondary { background:transparent; color:var(--text-main); padding:10px 17px; border:1px solid var(--border-strong); }
.btn-secondary:hover { border-color:var(--text-main); }
.btn-ghost { background:transparent; color:var(--text-main); padding:10px 14px; border:0; }
.btn-ghost:hover { background:var(--side-hover); }
.btn-danger { background:var(--critical); color:#fff; padding:11px 18px; border:0; }
.btn-danger:hover { filter:brightness(0.93); box-shadow:var(--shadow-hover); }
.btn-sm { padding:7px 12px; font-size:13px; }
.btn-lg { padding:14px 24px; font-size:17px; }
.btn-icon { padding:0; width:40px; height:40px; border:1px solid var(--border-strong); background:var(--card-2); color:var(--text-main); }
.btn-icon:hover { border-color:var(--presch-secondary); color:var(--presch-secondary); }
.btn[disabled] { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* ============================================================ BADGES / CHIPS / TREND */
.badge { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px; padding:5px 11px; border-radius:999px; line-height:1; }
.badge .dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.badge-success { background:var(--success-soft); color:var(--success-ink); }
.badge-warn { background:var(--warning-soft); color:var(--warning-ink); }
.badge-danger { background:var(--critical-soft); color:var(--critical-ink); }
.badge-info { background:var(--info-soft); color:var(--info-ink); }
.badge-neutral { background:color-mix(in srgb, var(--text-faint) 16%, transparent); color:var(--text-muted); }
.badge-solid-info { background:var(--info); color:#fff; } .badge-solid-success { background:var(--success); color:#fff; }
.chip { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13px; padding:6px 12px; border-radius:999px; background:var(--card-2); border:1px solid var(--border-strong); color:var(--text-main); }
.chip .x { cursor:pointer; opacity:0.6; } .chip .x:hover { opacity:1; color:var(--critical); }
.trend { display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:14px; }
.trend-up { color:var(--pos-trend); } .trend-down { color:var(--neg-trend); }
.iso { font-size:12px; font-weight:700; letter-spacing:0.04em; color:var(--text-faint); border:1px solid var(--border); border-radius:6px; padding:3px 8px; background:var(--card-2); }

/* ============================================================ ALERTS — Soft (getönt + farbiges Icon) */
.alert { display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border-radius:var(--r-btn); font-weight:400; line-height:1.5; border:1px solid transparent; }
/* Einleitung/erste Wörter fett, Rest normal (Lesbarkeit bei längerem Text) */
.alert strong, .alert b, .alert .a-lead { font-weight:700; }
.alert .a-ico { margin-top:1px; }
.alert .a-ico { width:30px; height:30px; border-radius:var(--r-btn); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:#fff; }
.alert.alert-success { background:var(--success-soft); color:var(--success-ink); border-color:color-mix(in srgb,var(--success) 30%,transparent); }
.alert.alert-success .a-ico { background:var(--success); }
.alert.alert-warning { background:var(--warning-soft); color:var(--warning-ink); border-color:color-mix(in srgb,var(--warning) 35%,transparent); }
.alert.alert-warning .a-ico { background:var(--warning); color:#3A2A00; }
.alert.alert-critical { background:var(--critical-soft); color:var(--critical-ink); border-color:color-mix(in srgb,var(--critical) 35%,transparent); }
.alert.alert-critical .a-ico { background:var(--critical); }
.alert.alert-info { background:var(--info-soft); color:var(--info-ink); border-color:color-mix(in srgb,var(--info) 32%,transparent); }
.alert.alert-info .a-ico { background:var(--info); }

/* ============================================================ TOOLTIP */
.tip-trigger { display:inline-flex; align-items:center; gap:6px; cursor:help; font-weight:700; color:var(--text-main);
  border-bottom:1.5px dashed var(--text-faint); padding-bottom:1px; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tip-trigger:hover { color:var(--presch-secondary); border-bottom-color:var(--presch-secondary); }
.tip-ico { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:1.6px solid currentColor; font-size:11px; font-weight:900; line-height:1; flex:0 0 auto; }
.bi-tip { position:fixed; pointer-events:none; z-index:120; background:var(--presch-primary); color:#fff; border-radius:8px; padding:9px 12px; font-size:13px; font-weight:700; max-width:260px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45); opacity:0; transform:translateY(4px); transition:opacity 120ms var(--ease), transform 120ms var(--ease); }
.dark .bi-tip { background:#26415a; }
.bi-tip.on { opacity:1; transform:translateY(0); }
.bi-tip .t-row { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.bi-tip .t-dot { width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.bi-tip .t-sub { color:#B7C2CD; font-weight:400; font-size:12px; margin-top:2px; white-space:normal; }

/* ============================================================ FORM */
.field { width:100%; background:var(--card-2); color:var(--text-main); border:1px solid var(--border-strong); border-radius:var(--r-btn); padding:10px 14px; outline:none; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); font:inherit; }
.field::placeholder { color:var(--text-faint); }
.field:focus { border-color:var(--presch-secondary); box-shadow:0 0 0 3px color-mix(in srgb, var(--presch-secondary) 20%, transparent); }
.field-warn { border-color:var(--warning); } .field-error { border-color:var(--critical); }
.label { display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
textarea.field { min-height:88px; resize:vertical; }
select.field { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238A98A6' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; cursor:pointer; }
.field-sm { padding:7px 10px; font-size:13px; }
.check { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; user-select:none; }
.check input { position:absolute; opacity:0; width:0; height:0; }
.check .box { width:20px; height:20px; border:1.8px solid var(--border-strong); border-radius:5px; background:var(--card-2); display:inline-flex; align-items:center; justify-content:center; transition:all var(--dur) var(--ease); flex:0 0 auto; }
.check .box.round { border-radius:50%; }
.check .box svg { width:13px; height:13px; stroke:#fff; stroke-width:3.4; opacity:0; transition:opacity var(--dur) var(--ease); }
.check input:checked + .box { background:var(--presch-secondary); border-color:var(--presch-secondary); }
.check input:checked + .box svg { opacity:1; }
.check input:checked + .box .rdot { width:8px; height:8px; border-radius:50%; background:#fff; }
.check input:disabled + .box { opacity:0.4; }
.switch { position:relative; width:46px; height:26px; flex:0 0 auto; cursor:pointer; display:inline-block; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .slot { position:absolute; inset:0; background:var(--track); border-radius:999px; transition:background var(--dur) var(--ease); }
.switch .knob { position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:999px; transition:transform var(--dur) var(--ease); box-shadow:0 1px 2px rgba(0,0,0,0.3); pointer-events:none; }
.switch input:checked ~ .slot { background:var(--presch-secondary); }
.switch input:checked ~ .knob { transform:translateX(20px); }
/* Ruhiger Toggle (Titelleiste): nicht orange, lenkt nicht ab */
.switch-quiet input:checked ~ .slot { background:var(--card); }
.segmented { display:inline-flex; background:var(--track); border-radius:var(--r-btn); padding:3px; gap:2px; }
.segmented button { border:0; background:transparent; font:inherit; font-weight:700; font-size:13px; color:var(--text-muted); padding:7px 14px; border-radius:5px; cursor:pointer; transition:all var(--dur) var(--ease); }
.segmented button.is-active { background:var(--card-2); color:var(--presch-secondary); box-shadow:var(--shadow-card); }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--r-btn); overflow:hidden; background:var(--card-2); }
.stepper button { border:0; background:transparent; width:38px; height:40px; font-size:18px; font-weight:700; color:var(--text-main); cursor:pointer; transition:background var(--dur) var(--ease); }
.stepper button:hover { background:var(--side-hover); color:var(--presch-secondary); }
.stepper input { width:54px; text-align:center; border:0; background:transparent; color:var(--text-main); font:inherit; font-weight:700; outline:none; }

/* ============================================================ TABS / NAV-AUX */
.tabbar { display:flex; gap:4px; border-bottom:1px solid var(--border); }
.tab { padding:12px 16px; font-weight:700; color:var(--text-muted); border-bottom:2px solid transparent; cursor:pointer; background:none; border-top:0; border-left:0; border-right:0; font:inherit; font-weight:700; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.tab:hover { color:var(--text-main); }
.tab.is-active { color:var(--presch-secondary); border-bottom-color:var(--presch-secondary); }
.crumb { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--text-muted); }
.crumb a { color:var(--text-muted); } .crumb a:hover { color:var(--presch-secondary); }
.crumb .sep { color:var(--text-faint); } .crumb .cur { color:var(--text-main); }
.pager { display:inline-flex; gap:4px; flex-wrap:wrap; }
.pager button { min-width:38px; height:38px; padding:0 10px; border:1px solid var(--border-strong); background:var(--card-2); color:var(--text-main); border-radius:var(--r-btn); font:inherit; font-weight:700; cursor:pointer; transition:all var(--dur) var(--ease); }
.pager button:hover:not(:disabled) { border-color:var(--presch-secondary); color:var(--presch-secondary); }
.pager button.is-active { background:var(--presch-secondary); border-color:var(--presch-secondary); color:#fff; }
.pager button:disabled { opacity:0.4; cursor:not-allowed; }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--info); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:15px; flex:0 0 auto; }
.acc { border:1px solid var(--border); border-radius:var(--r-btn); overflow:hidden; }
.acc + .acc { margin-top:8px; }
.acc summary { list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; display:flex; align-items:center; justify-content:space-between; background:var(--card-2); }
.acc summary::-webkit-details-marker { display:none; }
.acc summary .chev { transition:transform var(--dur) var(--ease); }
.acc[open] summary .chev { transform:rotate(180deg); }
.acc .acc-body { padding:14px 16px; color:var(--text-muted); border-top:1px solid var(--border); }
.spinner { width:22px; height:22px; border:3px solid var(--track); border-top-color:var(--presch-secondary); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================ MODAL / LIGHTBOX */
.modal-backdrop { position:fixed; inset:0; background:rgba(10,18,28,0.62); z-index:130; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.on { display:flex; animation:fade 160ms var(--ease); }
.modal { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); max-width:460px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,0.4); padding:24px; }
.modal .m-ico { width:44px; height:44px; border-radius:var(--r-btn); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:14px; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.lightbox { position:fixed; inset:0; background:rgba(8,14,22,0.85); z-index:140; display:none; align-items:center; justify-content:center; padding:32px; cursor:zoom-out; }
.lightbox.on { display:flex; animation:fade 160ms var(--ease); }
.lightbox img { max-width:90vw; max-height:86vh; border-radius:12px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,0.6); }
.lightbox .lb-close { position:absolute; top:20px; right:24px; color:#fff; background:rgba(255,255,255,0.12); border:0; width:42px; height:42px; border-radius:50%; font-size:22px; cursor:pointer; }

/* ============================================================ SIDEBAR */
.app-sidebar { position:sticky; top:0; height:100vh; background:var(--side-bg); box-shadow:var(--side-shadow); z-index:20; transition:width var(--dur) var(--ease), background var(--dur) var(--ease); overflow:visible; }
.topbar { box-shadow:var(--header-shadow); min-height:76px; }
/* Sidebar-Kopf auf Titelleisten-Höhe, Logo mittig; Nav startet darunter */
.side-head { height:76px; display:flex; align-items:center; justify-content:center; padding:0 20px; }
.app-sidebar.collapsed .side-head { padding:0; }
.nav-item { position:relative; display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-btn);
  color:var(--side-fg); font-weight:700; cursor:pointer; transition:all var(--dur) var(--ease); border:0; background:none; width:100%; text-align:left; font:inherit; font-weight:700; white-space:nowrap; }
.nav-item svg { flex:0 0 auto; }
.nav-item:hover { background:var(--side-hover); color:var(--side-fg-strong); }
.nav-item.is-active { background:var(--presch-secondary); color:#fff; }
.collapse-btn { color:var(--side-fg); background:var(--side-hover); border:0; cursor:pointer; border-radius:8px; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:700; font-size:13px; transition:all var(--dur) var(--ease); width:100%; }
.collapse-btn:hover { color:var(--side-fg-strong); }
.side-user { display:flex; align-items:center; gap:11px; padding:10px; border-radius:var(--r-btn); transition:background var(--dur) var(--ease); cursor:pointer; }
.side-user:hover { background:var(--side-hover); }
.side-user .su-name { min-width:0; }
.logo-mark { display:none; font-family:"Malva",sans-serif; font-weight:900; font-size:32px; line-height:1; color:var(--presch-secondary); text-align:center; }

/* eingeklappt */
.app-sidebar.collapsed { width:78px !important; }
.app-sidebar.collapsed .nav-text, .app-sidebar.collapsed .logo-full, .app-sidebar.collapsed .su-name, .app-sidebar.collapsed .collapse-text { display:none; }
.app-sidebar.collapsed .logo-mark { display:block; }
.app-sidebar.collapsed .nav-item { justify-content:center; padding:11px 0; }
.app-sidebar.collapsed .side-user { justify-content:center; padding:10px 0; }
.app-sidebar.collapsed .collapse-btn { padding:0; }
/* Flyout-Label beim Hover (eingeklappt) */
.app-sidebar.collapsed .nav-text-fly { position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) scale(0.96);
  background:var(--presch-primary); color:#fff; padding:7px 12px; border-radius:8px; white-space:nowrap; font-size:13px; font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,0.4); opacity:0; pointer-events:none; transition:opacity 120ms var(--ease), transform 120ms var(--ease); z-index:90; }
.dark .app-sidebar.collapsed .nav-text-fly { background:#26415a; }
.app-sidebar.collapsed .nav-item:hover .nav-text-fly { opacity:1; transform:translateY(-50%) scale(1); }
.nav-text-fly { display:none; }
.app-sidebar.collapsed .nav-text-fly { display:block; }

/* Mobile-Drawer */
.scrim { position:fixed; inset:0; background:rgba(10,18,28,0.55); z-index:40; display:none; } .scrim.on { display:block; }
@media (max-width:767px) {
  .app-sidebar { position:fixed; top:0; left:0; height:100vh; z-index:50; transform:translateX(-100%); transition:transform var(--dur) var(--ease); display:flex !important; width:268px; }
  .app-sidebar.drawer-open { transform:translateX(0); }
  .app-sidebar.collapsed { width:268px !important; }
  .app-sidebar.collapsed .nav-text, .app-sidebar.collapsed .logo-full, .app-sidebar.collapsed .su-name, .app-sidebar.collapsed .collapse-text { display:inline; }
  .app-sidebar.collapsed .logo-mark { display:none; }
  .app-sidebar.collapsed .nav-item { justify-content:flex-start; padding:11px 14px; }
  .app-sidebar.collapsed .nav-text-fly { display:none; }
}

/* ============================================================ TABELLE */
.bi-table { width:100%; border-collapse:collapse; }
.bi-table thead th { text-align:left; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--th-fg); font-weight:700; padding:13px 16px; white-space:nowrap; user-select:none; background:var(--th-bg); position:sticky; top:0; z-index:1; }
.bi-table thead th.f-row { padding:6px 12px 10px; }
.bi-table tbody td { padding:12px 16px; border-top:1px solid var(--border); font-size:15px; }
.bi-table tbody tr { transition:background var(--dur) var(--ease); }
.bi-table tbody tr:hover { background:color-mix(in srgb, var(--presch-secondary) 7%, transparent); }
.bi-table th.sortable { cursor:pointer; } .bi-table th.sortable:hover { color:var(--text-main); }
.bi-table td.num, .bi-table th.num { text-align:right; }
.col-filter { width:100%; background:var(--cf-bg); color:var(--cf-fg); border:1px solid var(--cf-border); border-radius:6px; padding:5px 8px; font:inherit; font-size:12px; font-weight:600; outline:none; }
.col-filter::placeholder { color:var(--text-faint); }
.col-filter:focus { border-color:var(--presch-secondary); }
.tbl-thumb { width:46px; height:46px; border-radius:8px; overflow:hidden; background:#fff; border:1px solid var(--border); cursor:default; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tbl-thumb img { width:100%; height:100%; object-fit:contain; padding:6px; transition:transform var(--dur) var(--ease); }
.tbl-thumb:hover { transform:scale(1.7); transform-origin:center; position:relative; z-index:6; border-color:var(--presch-secondary); box-shadow:var(--shadow-hover); }
.tbl-thumb:hover img { transform:scale(1.02); }

/* generisches Bild-Thumb */
.thumb { border-radius:8px; overflow:hidden; background:#fff; border:1px solid var(--border); cursor:zoom-in; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 320ms var(--ease); }
.thumb:hover { box-shadow:var(--shadow-hover), var(--hover-ring); transform:translateY(-2px); border-color:var(--border-strong); }
.thumb:hover img { transform:scale(1.06); }

/* ============================================================ CHARTS + ANIMATION */
line.chart-grid { stroke:var(--grid-line); stroke-width:1; stroke-dasharray:2 6; }
.chart-axis { fill:var(--text-faint); font-size:12px; font-weight:700; }
.bar-rect { transition:opacity 120ms var(--ease); cursor:pointer; }
.bar-rect:hover { opacity:0.82; }
.dot-hit { cursor:pointer; }
.legend { display:flex; flex-wrap:wrap; gap:14px 20px; }
.legend-item { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text-muted); }
.legend-dot { width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
@keyframes barGrow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
.anim-bar { transform-box:fill-box; transform-origin:bottom; animation:barGrow 0.55s var(--ease) both; }
@keyframes popIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
.anim-pop { transform-box:fill-box; transform-origin:center; animation:popIn 0.5s var(--ease) both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.anim-fade { animation:fadeIn 0.5s var(--ease) both; }
@keyframes drawIn { to { stroke-dashoffset:0; } }
.anim-draw { stroke-dasharray:1; stroke-dashoffset:1; animation:drawIn 0.8s var(--ease) both; }

/* ============================================================ SCROLLBAR / VIEWS */
.scroll-y { overflow-y:auto; }
.scroll-y::-webkit-scrollbar { width:10px; height:10px; }
.scroll-y::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
.scroll-y::-webkit-scrollbar-track { background:transparent; }
.view { display:none; } .view.is-active { display:block; animation:viewIn 240ms var(--ease); }
@keyframes viewIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
/* ============================================================ INFOBOXEN (pastell, langer Fließtext) */
.infobox { border-radius:var(--r-card); padding:16px 18px; border:1px solid transparent; }
.infobox .ib-head { display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; margin-bottom:6px; }
.ib-ico { width:24px; height:24px; border-radius:var(--r-btn); display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }
.infobox p { margin:0; font-size:14px; line-height:1.6; color:var(--text-main); }
.infobox.i-info { background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 22%,transparent); }
.infobox.i-info .ib-head { color:var(--info-ink); } .infobox.i-info .ib-ico { background:var(--info); }
.infobox.i-success { background:var(--success-soft); border-color:color-mix(in srgb,var(--success) 22%,transparent); }
.infobox.i-success .ib-head { color:var(--success-ink); } .infobox.i-success .ib-ico { background:var(--success); }
.infobox.i-warning { background:var(--warning-soft); border-color:color-mix(in srgb,var(--warning) 28%,transparent); }
.infobox.i-warning .ib-head { color:var(--warning-ink); } .infobox.i-warning .ib-ico { background:var(--warning); color:#3A2A00; }
.infobox.i-critical { background:var(--critical-soft); border-color:color-mix(in srgb,var(--critical) 26%,transparent); }
.infobox.i-critical .ib-head { color:var(--critical-ink); } .infobox.i-critical .ib-ico { background:var(--critical); }
.infobox.i-neutral { background:var(--card-2); border-color:var(--border); }
.infobox.i-neutral .ib-head { color:var(--text-main); } .infobox.i-neutral .ib-ico { background:var(--text-faint); }

/* ============================================================ TOASTS */
.toast-wrap { position:fixed; right:20px; bottom:20px; z-index:150; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.toast { display:flex; gap:11px; align-items:flex-start; background:var(--card-2); border:1px solid var(--border); border-left:4px solid var(--info); border-radius:var(--r-btn); padding:12px 14px; box-shadow:0 12px 32px rgba(0,0,0,0.22); font-weight:600; animation:toastIn 0.25s var(--ease); }
.toast .t-ico { width:22px; height:22px; flex:0 0 auto; color:var(--info); }
.toast .t-body { flex:1; min-width:0; }
.toast .t-close { flex:0 0 auto; width:22px; height:22px; border:0; background:none; color:var(--text-faint); cursor:pointer; border-radius:5px; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.toast .t-close:hover { color:var(--text-main); background:var(--side-hover); }
.toast.s-success { border-left-color:var(--success); } .toast.s-success .t-ico { color:var(--success); }
.toast.s-warning { border-left-color:var(--warning); } .toast.s-warning .t-ico { color:var(--warning); }
.toast.s-critical { border-left-color:var(--critical); } .toast.s-critical .t-ico { color:var(--critical); }
@keyframes toastIn { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }

/* ============================================================ DROPDOWN-MENÜ */
.menu { position:relative; display:inline-block; }
.menu-pop { position:absolute; top:calc(100% + 6px); left:0; min-width:210px; background:var(--card-2); border:1px solid var(--border); border-radius:var(--r-btn); box-shadow:0 14px 34px rgba(0,0,0,0.18); padding:6px; z-index:60; display:none; }
.menu.open .menu-pop { display:block; animation:fade 140ms var(--ease); }
.menu-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:6px; font-weight:600; cursor:pointer; color:var(--text-main); white-space:nowrap; }
.menu-item:hover, .menu-item:focus-visible { background:var(--side-hover); outline:none; }
.menu-item.danger { color:var(--critical-ink); }
.menu-sep { height:1px; background:var(--border); margin:6px 4px; }

/* ============================================================ SLIDER / RANGE */
.range { width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:var(--track); outline:none; }
.range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--presch-secondary); cursor:pointer; border:3px solid var(--card-2); box-shadow:0 1px 4px rgba(0,0,0,0.3); }
.range::-moz-range-thumb { width:20px; height:20px; border:none; border-radius:50%; background:var(--presch-secondary); cursor:pointer; }

/* ============================================================ DROPZONE / DATEI */
.dropzone { border:2px dashed var(--border-strong); border-radius:var(--r-card); padding:28px; text-align:center; color:var(--text-muted); background:var(--card-2); transition:all var(--dur) var(--ease); cursor:pointer; }
.dropzone:hover { border-color:var(--presch-secondary); color:var(--presch-secondary); }

/* ============================================================ TAG-INPUT */
.taginput { display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--border-strong); border-radius:var(--r-btn); padding:7px 8px; background:var(--card-2); }
.taginput input { border:0; background:none; outline:none; font:inherit; color:var(--text-main); flex:1; min-width:90px; padding:4px; }
.tag { display:inline-flex; align-items:center; gap:6px; background:var(--side-hover); color:var(--text-main); font-weight:700; font-size:12px; padding:5px 9px; border-radius:6px; }
.tag .x { cursor:pointer; opacity:0.6; } .tag .x:hover { opacity:1; color:var(--critical); }

/* ============================================================ STEPS / WIZARD */
.steps { display:flex; align-items:center; }
.step { display:flex; align-items:center; gap:10px; }
.step .s-dot { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; background:var(--track); color:var(--text-muted); flex:0 0 auto; }
.step.done .s-dot { background:var(--success); color:#fff; }
.step.active .s-dot { background:var(--presch-secondary); color:#fff; }
.step .s-lbl { font-weight:700; font-size:13px; color:var(--text-muted); white-space:nowrap; }
.step.active .s-lbl { color:var(--text-main); }
.step .s-bar { width:46px; height:2px; background:var(--track); margin:0 12px; }
.step.done .s-bar { background:var(--success); }

/* ============================================================ EMPTY / SKELETON / TIMELINE / KV / RATING / KBD */
.empty { text-align:center; padding:34px 20px; color:var(--text-muted); }
.empty .e-ic { width:54px; height:54px; border-radius:50%; background:var(--side-hover); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--text-faint); }
.skel { background:linear-gradient(90deg,var(--track) 25%,color-mix(in srgb,var(--track) 45%,transparent) 37%,var(--track) 63%); background-size:400% 100%; border-radius:6px; animation:shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:""; position:absolute; left:7px; top:5px; bottom:5px; width:2px; background:var(--border); }
.tl-item { position:relative; padding-bottom:18px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:-21px; top:3px; width:12px; height:12px; border-radius:50%; background:var(--presch-secondary); border:2px solid var(--card); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:14px; margin:0; }
.kv dt { color:var(--text-muted); font-weight:600; } .kv dd { margin:0; font-weight:700; text-align:right; }
.rating { display:inline-flex; gap:3px; color:var(--warning); } .rating .star { cursor:pointer; }
.kbd { display:inline-flex; align-items:center; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; font-weight:700; padding:3px 7px; border-radius:5px; background:var(--card-2); border:1px solid var(--border-strong); box-shadow:0 1px 0 var(--border-strong); color:var(--text-main); }

/* ============================================================ SORTIER-INDIKATOR (Tabelle) */
.bi-table th.sortable::after { content:"↕"; margin-left:6px; color:var(--th-fg); font-weight:700; opacity:0.6; }
.bi-table th.sortable:hover::after { opacity:1; }
.bi-table th.sortable:has(.sort-ind)::after { content:""; margin:0; }

/* ============================================================ LOG-KONSOLE / CODE-BLOCK */
.logbox, .codeblock { background:#0E1822; color:#cdd6df; border:1px solid #22364a; border-radius:10px; padding:14px 16px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.8; overflow:auto; }
.logbox { max-height:240px; }
.logbox .ln { display:flex; gap:10px; }
.logbox .ts { color:#6E8194; flex:0 0 auto; }
.logbox .lvl { font-weight:700; flex:0 0 auto; width:46px; }
.logbox .lvl.info { color:#5B9BF5; } .logbox .lvl.warn { color:#F0B400; } .logbox .lvl.err { color:#FF6B6B; } .logbox .lvl.ok { color:#3DDC84; }
.codeblock { position:relative; line-height:1.7; }
.codeblock pre { margin:0; white-space:pre-wrap; }
.codeblock .copy { position:absolute; top:10px; right:10px; background:#22364a; color:#cdd6df; border:0; border-radius:6px; padding:5px 9px; font-size:12px; font-weight:700; cursor:pointer; transition:background var(--dur) var(--ease); }
.codeblock .copy:hover { background:#2e4763; }

/* Legende rechts (Donut/Pie) */
.legend-v { display:flex; flex-direction:column; gap:9px; min-width:140px; }
.legend-v .li { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--text-muted); }
.legend-v .li .dt { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.legend-v .li .nm { flex:1; white-space:nowrap; }
.legend-v .li .vl { color:var(--text-main); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Header beim Scrollen aus-/einblenden */
.topbar { transition:transform 280ms var(--ease), box-shadow var(--dur) var(--ease); }
.topbar.topbar--hidden { transform:translateY(-100%); }

/* Glocken-Zähler-Badge */
.bell-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--critical); color:#fff; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; border:2px solid var(--side-bg); }
/* Spaltenfilter eingeklappt */
.bi-table tr.filter-row { display:none; }
.bi-table.show-filters tr.filter-row { display:table-row; }
/* Tabellen-Varianten */
.bi-table tfoot td { padding:13px 16px; font-weight:900; border-top:2px solid var(--border-strong); background:var(--card-2); }
.rank-num { width:26px; height:26px; border-radius:var(--r-btn); background:var(--side-hover); color:var(--text-main); font-weight:900; font-size:13px; display:inline-flex; align-items:center; justify-content:center; }
.rank-num.top { background:var(--presch-secondary); color:#fff; }

/* Plain Icon-Button (ohne Kasten) — z. B. Glocke, Hilfe */
.icon-plain { position:relative; width:38px; height:38px; border:0; background:none; color:var(--text-muted); border-radius:var(--r-btn); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.icon-plain:hover { color:var(--text-main); background:var(--side-hover); }

/* Erfolgs-Animation (Dopamin-Bestätigung) */
.fx-layer { position:fixed; inset:0; z-index:200; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.fx-stage { position:relative; display:flex; align-items:center; justify-content:center; }
.fx-check { width:96px; height:96px; border-radius:50%; background:var(--success); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 44px rgba(31,157,61,0.45); animation:fxPop 0.5s var(--ease) both; }
.fx-check svg { width:52px; height:52px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:fxDraw 0.4s 0.18s var(--ease) forwards; }
.fx-ring { position:absolute; width:96px; height:96px; border-radius:50%; border:3px solid var(--presch-secondary); animation:fxRing 0.85s var(--ease) forwards; }
.fx-confetti { position:absolute; width:10px; height:10px; border-radius:2px; animation:fxConf 1.5s var(--ease) forwards; }
@keyframes fxPop { 0% { transform:scale(0); opacity:0; } 60% { transform:scale(1.12); } 100% { transform:scale(1); opacity:1; } }
@keyframes fxDraw { to { stroke-dashoffset:0; } }
@keyframes fxRing { 0% { transform:scale(1); opacity:0.7; } 100% { transform:scale(2.4); opacity:0; } }
@keyframes fxConf { 0% { transform:translate(0,0) scale(1); opacity:1; } 100% { transform:translate(var(--dx),var(--dy)) rotate(220deg); opacity:0; } }
.fx-logo { width:200px; height:auto; filter:drop-shadow(0 14px 36px rgba(0,0,0,0.45)); animation:fxLogo 1s var(--ease) both; }
@keyframes fxLogo { 0% { transform:scale(0.3); opacity:0; } 35% { transform:scale(1.14); opacity:1; } 62% { transform:scale(1); opacity:1; } 100% { transform:scale(1.65); opacity:0; } }

.drill-sub { display:none; }
.drill-sub.open { display:table-row; }
.drill-toggle { background:none; border:0; cursor:pointer; color:var(--text-muted); font-size:13px; line-height:1; transition:transform 0.15s var(--ease), color var(--dur) var(--ease); }
.drill-toggle.open { transform:rotate(90deg); color:var(--presch-secondary); }

/* ============================================================ BAUM / AUFKLAPPBARE LISTE (z. B. Metrik-/Kategorie-Auswahl)
   Aus verschachtelten <details class="tree-item"> + <summary>; Blätter als .tree-leaf.
   Native <details> = von Haus aus tastaturbedienbar (summary fokussierbar, Enter klappt auf). */
.tree { font-weight:700; font-size:15px; }
.tree-item { border-top:1px solid var(--border); }
.tree > .tree-item:first-child, .tree > .tree-leaf:first-child { border-top:0; }
.tree-item > summary, .tree-leaf { list-style:none; display:flex; align-items:center; gap:10px; padding:11px 14px; color:var(--text-main); cursor:pointer; transition:background var(--dur) var(--ease); }
.tree-item > summary::-webkit-details-marker { display:none; }
.tree-item > summary:hover, .tree-leaf:hover { background:var(--side-hover); }
.tree-chev { width:16px; height:16px; flex:0 0 auto; color:var(--text-faint); transition:transform 0.15s var(--ease); }
.tree-item[open] > summary .tree-chev { transform:rotate(90deg); color:var(--presch-secondary); }
.tree-leaf { cursor:default; }
.tree-leaf.tree-pick { cursor:pointer; }                 /* auswählbares Blatt */
.tree-leaf.is-active { color:var(--presch-secondary); }  /* aktive Auswahl */
/* Einrückung der Kinder (Chevron-Breite + Gap) */
.tree-children { border-top:1px solid var(--border); }
.tree-children .tree-item > summary, .tree-children .tree-leaf { padding-left:38px; }
.tree-children .tree-children .tree-item > summary, .tree-children .tree-children .tree-leaf { padding-left:62px; }
.tree-leaf .tree-spacer { width:16px; flex:0 0 auto; }   /* hält Blätter ohne Chevron bündig */

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }

/* ---- Flow / Schritt-Assistent (Beispiel-Layouts) ---- */
.flow-pane{display:none}
.flow-pane.is-active{display:block;animation:viewIn 240ms var(--ease)}
.flowsteps{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem;margin-bottom:1.5rem}
.flowstep{display:flex;align-items:center;gap:.55rem;cursor:pointer;color:var(--text-faint);background:none;border:0;font:inherit;padding:.25rem .25rem}
.flowstep .fs-num{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--card);border:2px solid var(--border-strong);color:var(--text-muted);transition:all 160ms var(--ease)}
.flowstep.current{color:var(--text-main)}
.flowstep.current .fs-num{background:var(--presch-primary);border-color:var(--presch-primary);color:#fff}
.flowstep.done .fs-num{background:var(--success);border-color:var(--success);color:#fff}
.flow-line{flex:1;height:2px;min-width:18px;background:var(--border);margin:0 .25rem}

/* ---- Tastatur-Fokus (a11y): sichtbarer Ring auf interaktiven Elementen ---- */
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline:2px solid var(--presch-secondary); outline-offset:2px; }
/* Versteckte native Inputs: Fokus-Ring auf das sichtbare Ersatz-Element legen */
.check input:focus-visible + .box { outline:2px solid var(--presch-secondary); outline-offset:2px; }
.switch input:focus-visible ~ .slot { outline:2px solid var(--presch-secondary); outline-offset:2px; }
.range:focus-visible { outline:2px solid var(--presch-secondary); outline-offset:3px; }
/* Skip-Link: erst bei Tastatur-Fokus sichtbar */
.skip-link { position:fixed; top:-60px; left:12px; z-index:300; background:var(--presch-secondary); color:#fff; font-weight:700; padding:10px 16px; border-radius:var(--r-btn); transition:top 120ms var(--ease); }
.skip-link:focus { top:12px; }

/* ---- Shell ohne Sidebar (One-Pager / Top-Navigation) ---- */
.shell-topbar{position:sticky;top:0;z-index:20;padding:.85rem 0;background:var(--side-bg);box-shadow:var(--header-shadow)}
/* Innere Spur richtet die Navi an derselben zentrierten Spalte aus wie der Inhalt (max-width je Shell inline) */
.shell-bar{display:flex;align-items:center;gap:1.25rem;width:100%;margin:0 auto;padding:0 1.5rem}
/* Ab breiten Screens: Logo bleibt am linken Fensterrand, die Menüpunkte beginnen an der Inhaltskante.
   Darunter (schmaler) normaler Fluss — Logo + Navi nebeneinander, kein Überlappen. */
@media (min-width:1500px){
  .shell-bar .shell-logo{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%)}
}
/* Dezente Pill-Navigation statt fett-unterstrichener Textlinks */
.topnav-link{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:var(--r-btn);background:none;border:0;font:inherit;font-weight:600;color:var(--text-muted);cursor:pointer;text-decoration:none;transition:color 140ms var(--ease),background 140ms var(--ease)}
.topnav-link:hover{color:var(--text-main);background:var(--side-hover)}
.topnav-link.is-active{color:var(--presch-secondary);background:color-mix(in srgb,var(--presch-secondary) 12%,transparent)}

/* ============================================================ LAYOUT-UTILITIES (moderater Grundstock)
   Gaengige Tailwind-Layout/Spacing/Sizing/Typo-Utilities, gleiche Namen + Werte. Im Artifact (ohne Build/CDN)
   frei layouten; bei zusaetzlich geladenem Tailwind kein Konflikt. Online-App: diese Datei NACH Tailwind laden.
   Was hier fehlt, als CSS-Regel auf den Tokens (Sektion 1) ergaenzen. Skala: 0 1 1.5 2 2.5 3 4 5 6 8 10
   (responsive bewusst knapper: 0 2 3 4 5 6 8). Radien sind CI-geregelt, daher KEINE rounded-Utilities.
   ============================================================ */
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.block{display:block}
.inline-block{display:inline-block}
.inline{display:inline}
.hidden{display:none}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}
.static{position:static}
.flex-row{flex-direction:row}
.flex-col{flex-direction:column}
.flex-row-reverse{flex-direction:row-reverse}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.flex-1{flex:1 1 0%}
.flex-auto{flex:1 1 auto}
.flex-none{flex:none}
.grow{flex-grow:1}
.grow-0{flex-grow:0}
.shrink{flex-shrink:1}
.shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-stretch{align-items:stretch}
.items-baseline{align-items:baseline}
.justify-start{justify-content:flex-start}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.justify-evenly{justify-content:space-evenly}
.self-start{align-self:flex-start}
.self-center{align-self:center}
.self-end{align-self:flex-end}
.self-stretch{align-self:stretch}
.self-auto{align-self:auto}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}
.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}
.col-span-4{grid-column:span 4/span 4}
.col-span-5{grid-column:span 5/span 5}
.col-span-6{grid-column:span 6/span 6}
.col-span-full{grid-column:1/-1}
.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}
.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}
.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}
.gap-0{gap:0}
.gap-x-0{column-gap:0}
.gap-y-0{row-gap:0}
.gap-1{gap:.25rem}
.gap-x-1{column-gap:.25rem}
.gap-y-1{row-gap:.25rem}
.gap-1\.5{gap:.375rem}
.gap-x-1\.5{column-gap:.375rem}
.gap-y-1\.5{row-gap:.375rem}
.gap-2{gap:.5rem}
.gap-x-2{column-gap:.5rem}
.gap-y-2{row-gap:.5rem}
.gap-2\.5{gap:.625rem}
.gap-x-2\.5{column-gap:.625rem}
.gap-y-2\.5{row-gap:.625rem}
.gap-3{gap:.75rem}
.gap-x-3{column-gap:.75rem}
.gap-y-3{row-gap:.75rem}
.gap-4{gap:1rem}
.gap-x-4{column-gap:1rem}
.gap-y-4{row-gap:1rem}
.gap-5{gap:1.25rem}
.gap-x-5{column-gap:1.25rem}
.gap-y-5{row-gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-x-6{column-gap:1.5rem}
.gap-y-6{row-gap:1.5rem}
.gap-8{gap:2rem}
.gap-x-8{column-gap:2rem}
.gap-y-8{row-gap:2rem}
.gap-10{gap:2.5rem}
.gap-x-10{column-gap:2.5rem}
.gap-y-10{row-gap:2.5rem}
.p-0{padding:0}
.px-0{padding-left:0;padding-right:0}
.py-0{padding-top:0;padding-bottom:0}
.pt-0{padding-top:0}
.pr-0{padding-right:0}
.pb-0{padding-bottom:0}
.pl-0{padding-left:0}
.p-1{padding:.25rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.pt-1{padding-top:.25rem}
.pr-1{padding-right:.25rem}
.pb-1{padding-bottom:.25rem}
.pl-1{padding-left:.25rem}
.p-1\.5{padding:.375rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.pt-1\.5{padding-top:.375rem}
.pr-1\.5{padding-right:.375rem}
.pb-1\.5{padding-bottom:.375rem}
.pl-1\.5{padding-left:.375rem}
.p-2{padding:.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.pt-2{padding-top:.5rem}
.pr-2{padding-right:.5rem}
.pb-2{padding-bottom:.5rem}
.pl-2{padding-left:.5rem}
.p-2\.5{padding:.625rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.pt-2\.5{padding-top:.625rem}
.pr-2\.5{padding-right:.625rem}
.pb-2\.5{padding-bottom:.625rem}
.pl-2\.5{padding-left:.625rem}
.p-3{padding:.75rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.pt-3{padding-top:.75rem}
.pr-3{padding-right:.75rem}
.pb-3{padding-bottom:.75rem}
.pl-3{padding-left:.75rem}
.p-4{padding:1rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.pt-4{padding-top:1rem}
.pr-4{padding-right:1rem}
.pb-4{padding-bottom:1rem}
.pl-4{padding-left:1rem}
.p-5{padding:1.25rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.pt-5{padding-top:1.25rem}
.pr-5{padding-right:1.25rem}
.pb-5{padding-bottom:1.25rem}
.pl-5{padding-left:1.25rem}
.p-6{padding:1.5rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pt-6{padding-top:1.5rem}
.pr-6{padding-right:1.5rem}
.pb-6{padding-bottom:1.5rem}
.pl-6{padding-left:1.5rem}
.p-8{padding:2rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.pt-8{padding-top:2rem}
.pr-8{padding-right:2rem}
.pb-8{padding-bottom:2rem}
.pl-8{padding-left:2rem}
.p-10{padding:2.5rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.pt-10{padding-top:2.5rem}
.pr-10{padding-right:2.5rem}
.pb-10{padding-bottom:2.5rem}
.pl-10{padding-left:2.5rem}
.m-0{margin:0}
.mx-0{margin-left:0;margin-right:0}
.my-0{margin-top:0;margin-bottom:0}
.mt-0{margin-top:0}
.mr-0{margin-right:0}
.mb-0{margin-bottom:0}
.ml-0{margin-left:0}
.m-1{margin:.25rem}
.mx-1{margin-left:.25rem;margin-right:.25rem}
.my-1{margin-top:.25rem;margin-bottom:.25rem}
.mt-1{margin-top:.25rem}
.mr-1{margin-right:.25rem}
.mb-1{margin-bottom:.25rem}
.ml-1{margin-left:.25rem}
.m-1\.5{margin:.375rem}
.mx-1\.5{margin-left:.375rem;margin-right:.375rem}
.my-1\.5{margin-top:.375rem;margin-bottom:.375rem}
.mt-1\.5{margin-top:.375rem}
.mr-1\.5{margin-right:.375rem}
.mb-1\.5{margin-bottom:.375rem}
.ml-1\.5{margin-left:.375rem}
.m-2{margin:.5rem}
.mx-2{margin-left:.5rem;margin-right:.5rem}
.my-2{margin-top:.5rem;margin-bottom:.5rem}
.mt-2{margin-top:.5rem}
.mr-2{margin-right:.5rem}
.mb-2{margin-bottom:.5rem}
.ml-2{margin-left:.5rem}
.m-2\.5{margin:.625rem}
.mx-2\.5{margin-left:.625rem;margin-right:.625rem}
.my-2\.5{margin-top:.625rem;margin-bottom:.625rem}
.mt-2\.5{margin-top:.625rem}
.mr-2\.5{margin-right:.625rem}
.mb-2\.5{margin-bottom:.625rem}
.ml-2\.5{margin-left:.625rem}
.m-3{margin:.75rem}
.mx-3{margin-left:.75rem;margin-right:.75rem}
.my-3{margin-top:.75rem;margin-bottom:.75rem}
.mt-3{margin-top:.75rem}
.mr-3{margin-right:.75rem}
.mb-3{margin-bottom:.75rem}
.ml-3{margin-left:.75rem}
.m-4{margin:1rem}
.mx-4{margin-left:1rem;margin-right:1rem}
.my-4{margin-top:1rem;margin-bottom:1rem}
.mt-4{margin-top:1rem}
.mr-4{margin-right:1rem}
.mb-4{margin-bottom:1rem}
.ml-4{margin-left:1rem}
.m-5{margin:1.25rem}
.mx-5{margin-left:1.25rem;margin-right:1.25rem}
.my-5{margin-top:1.25rem;margin-bottom:1.25rem}
.mt-5{margin-top:1.25rem}
.mr-5{margin-right:1.25rem}
.mb-5{margin-bottom:1.25rem}
.ml-5{margin-left:1.25rem}
.m-6{margin:1.5rem}
.mx-6{margin-left:1.5rem;margin-right:1.5rem}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.mt-6{margin-top:1.5rem}
.mr-6{margin-right:1.5rem}
.mb-6{margin-bottom:1.5rem}
.ml-6{margin-left:1.5rem}
.m-8{margin:2rem}
.mx-8{margin-left:2rem;margin-right:2rem}
.my-8{margin-top:2rem;margin-bottom:2rem}
.mt-8{margin-top:2rem}
.mr-8{margin-right:2rem}
.mb-8{margin-bottom:2rem}
.ml-8{margin-left:2rem}
.m-10{margin:2.5rem}
.mx-10{margin-left:2.5rem;margin-right:2.5rem}
.my-10{margin-top:2.5rem;margin-bottom:2.5rem}
.mt-10{margin-top:2.5rem}
.mr-10{margin-right:2.5rem}
.mb-10{margin-bottom:2.5rem}
.ml-10{margin-left:2.5rem}
.m-auto{margin:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.my-auto{margin-top:auto;margin-bottom:auto}
.mt-auto{margin-top:auto}
.mr-auto{margin-right:auto}
.mb-auto{margin-bottom:auto}
.ml-auto{margin-left:auto}
.top-0{top:0}
.right-0{right:0}
.bottom-0{bottom:0}
.left-0{left:0}
.left-3{left:.75rem}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-1\/2{top:50%}
.left-1\/2{left:50%}
.-translate-y-1\/2{transform:translateY(-50%)}
.-translate-x-1\/2{transform:translateX(-50%)}
.w-full{width:100%}
.w-auto{width:auto}
.w-screen{width:100vw}
.w-fit{width:fit-content}
.w-0{width:0}
.w-1\/2{width:50%}
.w-1\/3{width:33.333333%}
.w-2\/3{width:66.666667%}
.w-1\/4{width:25%}
.w-3\/4{width:75%}
.w-64{width:16rem}
.h-full{height:100%}
.h-auto{height:auto}
.h-screen{height:100vh}
.h-fit{height:fit-content}
.h-0{height:0}
.min-w-0{min-width:0}
.min-h-0{min-height:0}
.min-h-screen{min-height:100vh}
.max-w-full{max-width:100%}
.max-w-none{max-width:none}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-normal{line-height:1.5}
.leading-relaxed{line-height:1.625}
.uppercase{text-transform:uppercase}
.lowercase{text-transform:lowercase}
.capitalize{text-transform:capitalize}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.overflow-auto{overflow:auto}
.overflow-hidden{overflow:hidden}
.overflow-visible{overflow:visible}
.overflow-scroll{overflow:scroll}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.cursor-pointer{cursor:pointer}
.cursor-default{cursor:default}
.select-none{user-select:none}
.z-0{z-index:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}
.space-y-0>:not([hidden])~:not([hidden]){margin-top:0}
.space-x-0>:not([hidden])~:not([hidden]){margin-left:0}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:.25rem}
.space-x-1>:not([hidden])~:not([hidden]){margin-left:.25rem}
.space-y-1\.5>:not([hidden])~:not([hidden]){margin-top:.375rem}
.space-x-1\.5>:not([hidden])~:not([hidden]){margin-left:.375rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-x-2>:not([hidden])~:not([hidden]){margin-left:.5rem}
.space-y-2\.5>:not([hidden])~:not([hidden]){margin-top:.625rem}
.space-x-2\.5>:not([hidden])~:not([hidden]){margin-left:.625rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
.space-x-3>:not([hidden])~:not([hidden]){margin-left:.75rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}
.space-y-5>:not([hidden])~:not([hidden]){margin-top:1.25rem}
.space-x-5>:not([hidden])~:not([hidden]){margin-left:1.25rem}
.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
.space-x-6>:not([hidden])~:not([hidden]){margin-left:1.5rem}
.space-y-8>:not([hidden])~:not([hidden]){margin-top:2rem}
.space-x-8>:not([hidden])~:not([hidden]){margin-left:2rem}
.space-y-10>:not([hidden])~:not([hidden]){margin-top:2.5rem}
.space-x-10>:not([hidden])~:not([hidden]){margin-left:2.5rem}

/* --- Responsive (sm>=640 / md>=768 / lg>=1024), kuratierte Layout-Familien --- */
@media (min-width:640px){
  .sm\:flex{display:flex}
  .sm\:grid{display:grid}
  .sm\:block{display:block}
  .sm\:hidden{display:none}
  .sm\:inline-flex{display:inline-flex}
  .sm\:flex-row{flex-direction:row}
  .sm\:flex-col{flex-direction:column}
  .sm\:items-start{align-items:flex-start}
  .sm\:items-center{align-items:center}
  .sm\:items-end{align-items:flex-end}
  .sm\:items-stretch{align-items:stretch}
  .sm\:justify-start{justify-content:flex-start}
  .sm\:justify-center{justify-content:center}
  .sm\:justify-end{justify-content:flex-end}
  .sm\:justify-between{justify-content:space-between}
  .sm\:justify-around{justify-content:space-around}
  .sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sm\:col-span-1{grid-column:span 1/span 1}
  .sm\:col-span-2{grid-column:span 2/span 2}
  .sm\:col-span-3{grid-column:span 3/span 3}
  .sm\:col-span-4{grid-column:span 4/span 4}
  .sm\:col-span-5{grid-column:span 5/span 5}
  .sm\:col-span-6{grid-column:span 6/span 6}
  .sm\:col-span-full{grid-column:1/-1}
  .sm\:gap-0{gap:0}
  .sm\:gap-2{gap:.5rem}
  .sm\:gap-3{gap:.75rem}
  .sm\:gap-4{gap:1rem}
  .sm\:gap-5{gap:1.25rem}
  .sm\:gap-6{gap:1.5rem}
  .sm\:gap-8{gap:2rem}
  .sm\:p-0{padding:0}
  .sm\:px-0{padding-left:0;padding-right:0}
  .sm\:py-0{padding-top:0;padding-bottom:0}
  .sm\:m-0{margin:0}
  .sm\:mx-0{margin-left:0;margin-right:0}
  .sm\:my-0{margin-top:0;margin-bottom:0}
  .sm\:p-2{padding:.5rem}
  .sm\:px-2{padding-left:.5rem;padding-right:.5rem}
  .sm\:py-2{padding-top:.5rem;padding-bottom:.5rem}
  .sm\:m-2{margin:.5rem}
  .sm\:mx-2{margin-left:.5rem;margin-right:.5rem}
  .sm\:my-2{margin-top:.5rem;margin-bottom:.5rem}
  .sm\:p-3{padding:.75rem}
  .sm\:px-3{padding-left:.75rem;padding-right:.75rem}
  .sm\:py-3{padding-top:.75rem;padding-bottom:.75rem}
  .sm\:m-3{margin:.75rem}
  .sm\:mx-3{margin-left:.75rem;margin-right:.75rem}
  .sm\:my-3{margin-top:.75rem;margin-bottom:.75rem}
  .sm\:p-4{padding:1rem}
  .sm\:px-4{padding-left:1rem;padding-right:1rem}
  .sm\:py-4{padding-top:1rem;padding-bottom:1rem}
  .sm\:m-4{margin:1rem}
  .sm\:mx-4{margin-left:1rem;margin-right:1rem}
  .sm\:my-4{margin-top:1rem;margin-bottom:1rem}
  .sm\:p-5{padding:1.25rem}
  .sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}
  .sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}
  .sm\:m-5{margin:1.25rem}
  .sm\:mx-5{margin-left:1.25rem;margin-right:1.25rem}
  .sm\:my-5{margin-top:1.25rem;margin-bottom:1.25rem}
  .sm\:p-6{padding:1.5rem}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .sm\:m-6{margin:1.5rem}
  .sm\:mx-6{margin-left:1.5rem;margin-right:1.5rem}
  .sm\:my-6{margin-top:1.5rem;margin-bottom:1.5rem}
  .sm\:p-8{padding:2rem}
  .sm\:px-8{padding-left:2rem;padding-right:2rem}
  .sm\:py-8{padding-top:2rem;padding-bottom:2rem}
  .sm\:m-8{margin:2rem}
  .sm\:mx-8{margin-left:2rem;margin-right:2rem}
  .sm\:my-8{margin-top:2rem;margin-bottom:2rem}
  .sm\:ml-auto{margin-left:auto}
  .sm\:mx-auto{margin-left:auto;margin-right:auto}
  .sm\:w-full{width:100%}
  .sm\:w-auto{width:auto}
  .sm\:w-1\/2{width:50%}
}
@media (min-width:768px){
  .md\:flex{display:flex}
  .md\:grid{display:grid}
  .md\:block{display:block}
  .md\:hidden{display:none}
  .md\:inline-flex{display:inline-flex}
  .md\:flex-row{flex-direction:row}
  .md\:flex-col{flex-direction:column}
  .md\:items-start{align-items:flex-start}
  .md\:items-center{align-items:center}
  .md\:items-end{align-items:flex-end}
  .md\:items-stretch{align-items:stretch}
  .md\:justify-start{justify-content:flex-start}
  .md\:justify-center{justify-content:center}
  .md\:justify-end{justify-content:flex-end}
  .md\:justify-between{justify-content:space-between}
  .md\:justify-around{justify-content:space-around}
  .md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .md\:col-span-1{grid-column:span 1/span 1}
  .md\:col-span-2{grid-column:span 2/span 2}
  .md\:col-span-3{grid-column:span 3/span 3}
  .md\:col-span-4{grid-column:span 4/span 4}
  .md\:col-span-5{grid-column:span 5/span 5}
  .md\:col-span-6{grid-column:span 6/span 6}
  .md\:col-span-full{grid-column:1/-1}
  .md\:gap-0{gap:0}
  .md\:gap-2{gap:.5rem}
  .md\:gap-3{gap:.75rem}
  .md\:gap-4{gap:1rem}
  .md\:gap-5{gap:1.25rem}
  .md\:gap-6{gap:1.5rem}
  .md\:gap-8{gap:2rem}
  .md\:p-0{padding:0}
  .md\:px-0{padding-left:0;padding-right:0}
  .md\:py-0{padding-top:0;padding-bottom:0}
  .md\:m-0{margin:0}
  .md\:mx-0{margin-left:0;margin-right:0}
  .md\:my-0{margin-top:0;margin-bottom:0}
  .md\:p-2{padding:.5rem}
  .md\:px-2{padding-left:.5rem;padding-right:.5rem}
  .md\:py-2{padding-top:.5rem;padding-bottom:.5rem}
  .md\:m-2{margin:.5rem}
  .md\:mx-2{margin-left:.5rem;margin-right:.5rem}
  .md\:my-2{margin-top:.5rem;margin-bottom:.5rem}
  .md\:p-3{padding:.75rem}
  .md\:px-3{padding-left:.75rem;padding-right:.75rem}
  .md\:py-3{padding-top:.75rem;padding-bottom:.75rem}
  .md\:m-3{margin:.75rem}
  .md\:mx-3{margin-left:.75rem;margin-right:.75rem}
  .md\:my-3{margin-top:.75rem;margin-bottom:.75rem}
  .md\:p-4{padding:1rem}
  .md\:px-4{padding-left:1rem;padding-right:1rem}
  .md\:py-4{padding-top:1rem;padding-bottom:1rem}
  .md\:m-4{margin:1rem}
  .md\:mx-4{margin-left:1rem;margin-right:1rem}
  .md\:my-4{margin-top:1rem;margin-bottom:1rem}
  .md\:p-5{padding:1.25rem}
  .md\:px-5{padding-left:1.25rem;padding-right:1.25rem}
  .md\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}
  .md\:m-5{margin:1.25rem}
  .md\:mx-5{margin-left:1.25rem;margin-right:1.25rem}
  .md\:my-5{margin-top:1.25rem;margin-bottom:1.25rem}
  .md\:p-6{padding:1.5rem}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .md\:m-6{margin:1.5rem}
  .md\:mx-6{margin-left:1.5rem;margin-right:1.5rem}
  .md\:my-6{margin-top:1.5rem;margin-bottom:1.5rem}
  .md\:p-8{padding:2rem}
  .md\:px-8{padding-left:2rem;padding-right:2rem}
  .md\:py-8{padding-top:2rem;padding-bottom:2rem}
  .md\:m-8{margin:2rem}
  .md\:mx-8{margin-left:2rem;margin-right:2rem}
  .md\:my-8{margin-top:2rem;margin-bottom:2rem}
  .md\:ml-auto{margin-left:auto}
  .md\:mx-auto{margin-left:auto;margin-right:auto}
  .md\:w-full{width:100%}
  .md\:w-auto{width:auto}
  .md\:w-1\/2{width:50%}
}
@media (min-width:1024px){
  .lg\:flex{display:flex}
  .lg\:grid{display:grid}
  .lg\:block{display:block}
  .lg\:hidden{display:none}
  .lg\:inline-flex{display:inline-flex}
  .lg\:flex-row{flex-direction:row}
  .lg\:flex-col{flex-direction:column}
  .lg\:items-start{align-items:flex-start}
  .lg\:items-center{align-items:center}
  .lg\:items-end{align-items:flex-end}
  .lg\:items-stretch{align-items:stretch}
  .lg\:justify-start{justify-content:flex-start}
  .lg\:justify-center{justify-content:center}
  .lg\:justify-end{justify-content:flex-end}
  .lg\:justify-between{justify-content:space-between}
  .lg\:justify-around{justify-content:space-around}
  .lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg\:col-span-1{grid-column:span 1/span 1}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:col-span-4{grid-column:span 4/span 4}
  .lg\:col-span-5{grid-column:span 5/span 5}
  .lg\:col-span-6{grid-column:span 6/span 6}
  .lg\:col-span-full{grid-column:1/-1}
  .lg\:gap-0{gap:0}
  .lg\:gap-2{gap:.5rem}
  .lg\:gap-3{gap:.75rem}
  .lg\:gap-4{gap:1rem}
  .lg\:gap-5{gap:1.25rem}
  .lg\:gap-6{gap:1.5rem}
  .lg\:gap-8{gap:2rem}
  .lg\:p-0{padding:0}
  .lg\:px-0{padding-left:0;padding-right:0}
  .lg\:py-0{padding-top:0;padding-bottom:0}
  .lg\:m-0{margin:0}
  .lg\:mx-0{margin-left:0;margin-right:0}
  .lg\:my-0{margin-top:0;margin-bottom:0}
  .lg\:p-2{padding:.5rem}
  .lg\:px-2{padding-left:.5rem;padding-right:.5rem}
  .lg\:py-2{padding-top:.5rem;padding-bottom:.5rem}
  .lg\:m-2{margin:.5rem}
  .lg\:mx-2{margin-left:.5rem;margin-right:.5rem}
  .lg\:my-2{margin-top:.5rem;margin-bottom:.5rem}
  .lg\:p-3{padding:.75rem}
  .lg\:px-3{padding-left:.75rem;padding-right:.75rem}
  .lg\:py-3{padding-top:.75rem;padding-bottom:.75rem}
  .lg\:m-3{margin:.75rem}
  .lg\:mx-3{margin-left:.75rem;margin-right:.75rem}
  .lg\:my-3{margin-top:.75rem;margin-bottom:.75rem}
  .lg\:p-4{padding:1rem}
  .lg\:px-4{padding-left:1rem;padding-right:1rem}
  .lg\:py-4{padding-top:1rem;padding-bottom:1rem}
  .lg\:m-4{margin:1rem}
  .lg\:mx-4{margin-left:1rem;margin-right:1rem}
  .lg\:my-4{margin-top:1rem;margin-bottom:1rem}
  .lg\:p-5{padding:1.25rem}
  .lg\:px-5{padding-left:1.25rem;padding-right:1.25rem}
  .lg\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}
  .lg\:m-5{margin:1.25rem}
  .lg\:mx-5{margin-left:1.25rem;margin-right:1.25rem}
  .lg\:my-5{margin-top:1.25rem;margin-bottom:1.25rem}
  .lg\:p-6{padding:1.5rem}
  .lg\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .lg\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .lg\:m-6{margin:1.5rem}
  .lg\:mx-6{margin-left:1.5rem;margin-right:1.5rem}
  .lg\:my-6{margin-top:1.5rem;margin-bottom:1.5rem}
  .lg\:p-8{padding:2rem}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:py-8{padding-top:2rem;padding-bottom:2rem}
  .lg\:m-8{margin:2rem}
  .lg\:mx-8{margin-left:2rem;margin-right:2rem}
  .lg\:my-8{margin-top:2rem;margin-bottom:2rem}
  .lg\:ml-auto{margin-left:auto}
  .lg\:mx-auto{margin-left:auto;margin-right:auto}
  .lg\:w-full{width:100%}
  .lg\:w-auto{width:auto}
  .lg\:w-1\/2{width:50%}
}

/* ============================================================ DRUCK / PDF
   Reports und Auswertungen sauber auf Papier/PDF bringen: Navigation, Toggles
   und reine Interaktions-Elemente raus; Flächen weiß, Text schwarz, keine Schatten.
   Mit .no-print kann jede Instanz Eigenes ausblenden, mit .print-only Eigenes nur im Druck zeigen.
   ============================================================ */
@media print {
  :root, .dark {
    --canvas:#FFFFFF; --card:#FFFFFF; --card-2:#FFFFFF; --card-hover-bg:#FFFFFF;
    --text-main:#000000; --text-muted:#333333; --text-faint:#555555;
    --border:#CCCCCC; --border-strong:#999999; --grid-line:rgba(0,0,0,0.18);
    --side-bg:#FFFFFF; --shadow-card:none; --shadow-hover:none;
  }
  body { background:#fff; }
  .app-sidebar, .topbar, .shell-topbar, .scrim, .toast-wrap, .fx-layer,
  .collapse-btn, .pager, [data-filter-toggle], .lb-close, .skip-link,
  .switch, .icon-plain, .no-print { display:none !important; }
  .print-only { display:revert !important; }
  .card, .bi-table, .logbox, .codeblock { break-inside:avoid; box-shadow:none !important; }
  .card { border:1px solid #CCC !important; }
  .view { display:block !important; }       /* alle Ansichten ausgeben, nicht nur die aktive */
  .scroll-y { max-height:none !important; overflow:visible !important; }
  a[href]::after { content:""; }            /* keine URL-Auszüge im Fließtext */
  @page { margin:16mm; }
}