/* Logo-Schriftart, lokal vendored (kein CDN/Google Fonts – offline-Vorgabe) */
@font-face {
  font-family: "Baloo Chettan 2";
  src: url("../assets/BalooChettan2-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --radius: 4px;
  /* Akzent-Palette – zur Laufzeit per Dropdown umschaltbar (Standard: Orange).
     Tailwind-„orange"-Klassen zeigen auf diese Variablen; --accent-rgb speist die Tint-Berechnungen. */
  --accent-50:  #EFF6FF;
  --accent-100: #DBEAFE;
  --accent-200: #BFDBFE;
  --accent-300: #93C5FD;
  --accent-400: #60A5FA;
  --accent-500: #3B82F6;
  --accent-600: #2563EB;
  --accent-700: #1D4ED8;
  --accent-900: #1E3A8A;
  --accent-rgb: 59 130 246;
  /* abgeleitete Rollen */
  --accent: var(--accent-500);
  --accent-hover: var(--accent-600);
  --accent-050: var(--accent-50);
  --accent-text: var(--accent-700);
  --accent-ring: rgb(var(--accent-rgb) / 0.25);
}

body { background:#f8fafc; }

/* ---- eigene Styled-Components ---- */
.card { background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius); }
/* Neutrales Grau-Badge (z.B. "Korrektur" im Scan-Verlauf) – eigene Klasse statt bg-slate-200/text-slate-700,
   weil die globalen .dark-Overrides für Slate-Textfarben (siehe unten) nur für Text-auf-dunklem-Grund gedacht
   sind und mit einem hellen Pill-Hintergrund kollidieren (helle Schrift auf hellem Grund = unlesbar). */
.badge-neutral { background:#e2e8f0; color:#475569; }
.dark .badge-neutral { background:#475569; color:#e2e8f0; }
/* Backup-Erinnerungs-Banner (dashboard.js) – Hintergrund exakt wie .nav-link.active eingefärbt
   (gedeckte Akzentfarbe statt kräftigem Ton), Icon-Quadrat solide wie .btn-primary. */
.banner-accent { background:var(--accent-050); border-color:var(--accent-200); }
.dark .banner-accent { background:rgb(var(--accent-rgb) / .20); border-color:rgb(var(--accent-rgb) / .35); }
.banner-accent-icon { background:var(--accent); color:#fff; }
.banner-accent-title { color:var(--accent-700); }
.dark .banner-accent-title { color:var(--accent-400); }
.banner-accent-sub { color:var(--accent-600); }
.dark .banner-accent-sub { color:var(--accent-400); }
/* Kategorie-Filter-Reihe (dashboard.js) – bleibt immer im DOM, klappt per max-width weich auf statt
   abrupt per hidden-Klasse (siehe events.js: Toggle setzt nur Klassen, kein renderDashboard()). */
.dash-cat-row { display:flex; flex-wrap:nowrap; gap:.5rem; max-width:0; opacity:0; overflow:hidden; transition:max-width .28s ease, opacity .2s ease; }
.dash-cat-row.open { max-width:900px; opacity:1; }
/* Bleibt überall scrollbar, die Leiste selbst aber unsichtbar (App-Look statt Browser-Chrome) – deckt
   per Sammel-Selektor alle scrollbaren Bereiche der App ab: Hauptbereich, jede Tabelle/Liste mit
   overflow-x/y-auto (Modals, Popover, horizontal scrollende Tabellen) sowie das <app-select>-Dropdown. */
#mainScroll, .overflow-y-auto, .overflow-x-auto, .as-panel { scrollbar-width:none; -ms-overflow-style:none; }
#mainScroll::-webkit-scrollbar, .overflow-y-auto::-webkit-scrollbar, .overflow-x-auto::-webkit-scrollbar, .as-panel::-webkit-scrollbar { display:none; }

.inp, .sel {
  width:100%; border:1px solid #cbd5e1; background:#fff; color:#0f172a;
  border-radius:var(--radius); padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1.25rem;
  transition:border-color .15s, box-shadow .15s;
}
.inp::placeholder { color:#94a3b8; }
.inp:hover, .sel:hover { border-color:#94a3b8; }
.inp:focus, .sel:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.inp.err, .sel.err { border-color:#ef4444; background:#fef2f2; }
.inp.warn { border-color:#f59e0b; background:#fffbeb; }
.inp.warn:focus { border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.22); }

/* Toasts (ersetzen alert()) */
#toastHost { position:fixed; bottom:1rem; right:1rem; z-index:100; display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast { pointer-events:auto; min-width:15rem; max-width:22rem; display:flex; align-items:center; gap:.5rem;
  padding:.6rem .8rem; border-radius:6px; font-size:.8125rem; color:#fff; box-shadow:0 8px 24px rgba(15,23,42,.18);
  animation:toastIn .2s ease both; }
.toast .icon { color:#fff; }
.toast.ok { background:#0f172a; }
.toast.err { background:#dc2626; }
.toast.info { background:#334155; }
.toast-undo span { flex:1; }
.toast-undo-btn { flex-shrink:0; padding:.25rem .55rem; border-radius:5px; background:rgba(255,255,255,.15); font-weight:600; white-space:nowrap; }
.toast-undo-btn:hover { background:rgba(255,255,255,.25); }
@keyframes toastIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.sel {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 9s-4.419 6-6 6s-6-6-6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .5rem center; background-size:1.05rem; padding-right:1.9rem;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer;
  border:1px solid #cbd5e1; background:#fff; color:#334155;
  border-radius:var(--radius); font-size: 0.75rem; font-weight: 500; padding: 0.5rem 0.75rem; line-height: 1.25rem;
  transition:background .15s, border-color .15s;
}
.btn:hover { background:#f8fafc; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-primary:disabled { background:#cbd5e1; border-color:#cbd5e1; color:#fff; cursor:not-allowed; }
.btn-dark { background:#1e293b; border-color:#1e293b; color:#fff; }
.btn-dark:hover { background:#0f172a; }
.btn-danger { color:#dc2626; }
.btn-ok { background:#059669; border-color:#059669; color:#fff; }
.btn-ok:hover { background:#047857; border-color:#047857; }
.btn-ok .icon { color:#fff; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-sm { padding:0.3rem 0.65rem; font-size:0.688rem; line-height:1rem; }

/* Tasten-Kürzel (Fußleiste) */
.kbd { display:inline-flex; align-items:center; justify-content:center; min-width:1.3rem; height:1.3rem;
  padding:0 .32rem; font-size:.72rem; font-family:inherit; color:#475569;
  background:#f1f5f9; border:1px solid #cbd5e1; border-bottom-width:2px; border-radius:4px; line-height:1; }

/* eigenes Dropdown <app-select> */
app-select { position:relative; display:block; }
.as-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  border:1px solid #cbd5e1; background:#fff; color:#0f172a; border-radius:var(--radius);
  padding: 0.5rem 0.75rem; font-size: 0.75rem; line-height: 1.25rem; cursor:pointer; text-align:left;
  transition:border-color .15s, box-shadow .15s;
}
.as-trigger:hover { border-color:#94a3b8; }
app-select.open .as-trigger, .as-trigger:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.as-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.as-chev { width:1rem; height:1rem; flex:none; color:#64748b; transition:transform .15s; }
app-select.open .as-chev { transform:rotate(180deg); }
.as-panel {
  position:absolute; z-index:50; left:0; top:calc(100% + 4px); min-width:100%; width:max-content; max-width:20rem;
  background:#fff; border:1px solid #e2e8f0; border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(15,23,42,.14); padding:4px; max-height:16rem; overflow-y:auto;
}
/* Öffnet nach oben statt nach unten, wenn <app-select> _open() (siehe state.js/settings.js) zu
   wenig Platz unterhalb erkennt. */
.as-panel-up { top:auto; bottom:calc(100% + 4px); }
.as-opt {
  position:relative; display:flex; align-items:center; gap:.5rem;
  padding:.4rem 1.75rem .4rem .5rem; border-radius:4px; font-size: 0.75rem; color:#94A3B8; cursor:pointer;
}
.as-opt:hover { background:var(--accent-050); color:var(--accent); }
.as-opt.selected { background:var(--accent-050); color:var(--accent); font-weight: 400; }
.as-opt.selected:hover { background:var(--accent-050); color:var(--accent); }
.as-opt.selected::after {
  content:""; position:absolute; right:.6rem; top:50%; width:.4rem; height:.7rem;
  border:solid var(--accent); border-width:0 1.8px 1.8px 0; transform:translateY(-62%) rotate(45deg);
}

/* eigene Checkbox im Markendesign */
input[type="checkbox"] {
  appearance:none; -webkit-appearance:none;
  width:1rem; height:1rem; flex:none; position:relative; cursor:pointer;
  border:1px solid #cbd5e1; border-radius: 3px; background:#fff;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
input[type="checkbox"]:hover { border-color:#94a3b8; }
input[type="checkbox"]:checked { background:var(--accent); border-color:var(--accent); }
input[type="checkbox"]:checked::after {
  content:""; position:absolute; left:4px; top:1px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
input[type="checkbox"]:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-ring); }
input[type="range"] { accent-color: var(--accent-500); height:1.1rem; }

app-icon { display:inline-flex; align-items:center; }
.icon { width:1.15rem; height:1.15rem; flex:none; display:block; }
.icon-sm { width:.95rem; height:.95rem; }
.icon-lg { width:1.5rem; height:1.5rem; }
.icon-xl { width:2.25rem; height:2.25rem; }

/* Wizard-Step-Tabs (Versanddaten / Weitere Daten) */
.step-tab { color:#64748b; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; transition:color .15s, border-color .15s; }
.step-tab:hover { color:#334155; }
.step-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:500; }

/* Blickschutz: App-Shell verstecken, solange gesperrt (Sperrbildschirm liegt darüber) */
html.locked #appShell { visibility:hidden; }

/* Rail-Tooltips (dunkel, erscheinen rechts beim Hover) */
.rail-tip { position:relative; }
.rail-tip::after {
  content:attr(data-tip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(-4px);
  background:#0f172a; color:#fff; font-size:.8125rem; line-height:1; padding:.42rem .6rem; border-radius:6px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s ease, transform .12s ease;
  box-shadow:0 6px 18px rgba(15,23,42,.28); z-index:60;
}
.rail-tip:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
.dark .rail-tip::after { background:#334155; }

/* Gleicher Tooltip wie .rail-tip, aber unterhalb statt rechts (für Topbar-Buttons am rechten Rand) */
.topbar-tip { position:relative; }
.topbar-tip::after {
  content:attr(data-tip); position:absolute; right:0; top:calc(100% + 8px); transform:translateY(-4px);
  background:#0f172a; color:#fff; font-size:.8125rem; line-height:1; padding:.42rem .6rem; border-radius:6px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s ease, transform .12s ease;
  box-shadow:0 6px 18px rgba(15,23,42,.28); z-index:60;
}
.topbar-tip:hover::after { opacity:1; transform:translateY(0); }
.dark .topbar-tip::after { background:#334155; }

/* Gleicher Tooltip wie .rail-tip/.topbar-tip, aber unterhalb + zentriert (für Kacheln im
   Tool-Switcher-Dropdown-Grid, die weder am linken noch rechten Rand sitzen). */
.tile-tip { position:relative; }
.tile-tip::after {
  content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%) translateY(-4px);
  background:#0f172a; color:#fff; font-size:.75rem; line-height:1; padding:.35rem .55rem; border-radius:6px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s ease, transform .12s ease;
  box-shadow:0 6px 18px rgba(15,23,42,.28); z-index:60;
}
.tile-tip:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
.dark .tile-tip::after { background:#334155; }

/* Runde Icon-Buttons für Zeilen-Aktionen (Materialien, Beschaffung, Unterwegs-Dropdown) –
   helle Tönung statt kräftiger Füllfarbe, plus Tooltip oberhalb (row-tip). */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:9999px; border:none; cursor:pointer;
  transition:background .15s, color .15s;
}
.icon-btn:disabled { opacity:.5; cursor:not-allowed; }
.icon-btn-neutral { background:#f1f5f9; color:#64748b; }
.icon-btn-neutral:hover { background:#e2e8f0; color:#334155; }
.icon-btn-danger { background:#fee2e2; color:#ef4444; }
.icon-btn-danger:hover { background:#fecaca; }
.icon-btn-primary { background:var(--accent-050); color:var(--accent); }
.icon-btn-primary:hover { background:var(--accent-100); }
.dark .icon-btn-neutral { background:#273449; color:#94a3b8; }
.dark .icon-btn-neutral:hover { background:#334155; color:#e2e8f0; }
.dark .icon-btn-danger { background:rgba(239,68,68,.16); color:#f87171; }
.dark .icon-btn-danger:hover { background:rgba(239,68,68,.26); }

/* .row-tip selbst trägt keine CSS-Optik mehr (nur Marker-Klasse) – das Tooltip-Element wird per JS
   in document.body erzeugt (siehe state.js showRowTip/hideRowTip), damit es weder von einem
   Scroll-Container noch am rechten Bildschirmrand abgeschnitten wird (fixed + Viewport-Clamping). */
.row-tip-floating {
  display:none; position:fixed; transform:translate(-50%,-100%);
  background:#0f172a; color:#fff; font-size:.75rem; line-height:1; padding:.35rem .55rem; border-radius:6px;
  white-space:nowrap; pointer-events:none; z-index:1000;
  box-shadow:0 6px 18px rgba(15,23,42,.28);
}
.dark .row-tip-floating { background:#334155; }

/* Verbindungsstatus-Punkt (Drucker-Icon in der Topbar) – grau = getrennt, grün = verbunden. */
.status-dot {
  position:absolute; top:-1px; right:-1px; width:10px; height:10px; border-radius:999px;
  background:#94a3b8; border:2px solid #fff;
}
.status-dot.connected { background:#22c55e; }
.dark .status-dot { border-color:#1e293b; }

.nav-link.active, .rail-btn.active { background:var(--accent-050); color:var(--accent); }
/* Tool-Switcher-Icons (Topnav): jedes Tool hat seine eigene feste Farbe (--tool-c/--tool-bg,
   inline pro Element gesetzt aus tool_branding.color_key) statt der geteilten Akzentfarbe. */
.rail-btn.tool-switch-icon { color:var(--tool-c); }
.rail-btn.tool-switch-icon.active, .rail-btn.tool-switch-icon:hover { background:var(--tool-bg); color:var(--tool-c); }
.rail-btn { display:flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; border-radius:6px; color:#64748b; background:#f1f5f9; }
.rail-btn:hover { background:var(--accent-050); color:var(--accent); }
.rail-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 600; line-height: 18px; text-align: center;
}
.subnav-link.active { background:var(--accent-050); color:var(--accent); font-weight:400; }

/* Logo-/VH-Square in Farbe der aktiven Menüpunkte (identisch hell & dunkel) */
.accent-chip { background:var(--accent-050); color:var(--accent); }
.dark .accent-chip { background:rgb(var(--accent-rgb) / .20); color:var(--accent-400); }
/* Wortmarken-Logo: nimmt die Akzentfarbe an (currentColor), hell/dunkel wie accent-chip */
.logo-mark { color:var(--accent); }
.dark .logo-mark { color:var(--accent-400); }
.logo-mark svg { display:block; width:44px; height:auto; }
/* Dynamisches Text-Logo: 2 Zeilen, eigene Schrift, wird per JS auf die Box skaliert. */
.logo-fit { display:inline-flex; flex-direction:column; align-items:center; white-space:nowrap;
  font-family:"Baloo Chettan 2","Baloo 2",sans-serif; font-weight:600; letter-spacing:0; }
.logo-fit .logo-line { display:block; font-size:16px; line-height:.78; text-transform:uppercase; }
.logo-fit .logo-line + .logo-line { margin-top:.06em; }
/* Import: Info als sanfte Tooltip-Card beim Hover über die Upload-Fläche */
.dropzone-wrap { position:relative; }
.import-hint {
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:340px; text-align:center;
  background:#0f172a; color:#fff; font-size:.8125rem; line-height:1.45;
  padding:.55rem .8rem; border-radius:8px; box-shadow:0 10px 28px rgba(15,23,42,.18);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:20;
}
.dropzone-wrap:hover .import-hint { opacity:1; transform:translateX(-50%) translateY(0); }
.dark .import-hint { background:#334155; }
/* Generische Variante von .dropzone-wrap/.import-hint für Hover-Hinweise auf Empty-States */
.hint-wrap { position:relative; }
.hint-tip {
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:340px; text-align:center;
  background:#0f172a; color:#fff; font-size:.8125rem; line-height:1.45;
  padding:.55rem .8rem; border-radius:8px; box-shadow:0 10px 28px rgba(15,23,42,.18);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:20;
}
.hint-wrap:hover .hint-tip { opacity:1; transform:translateX(-50%) translateY(0); }
.dark .hint-tip { background:#334155; }

/* <details>: Standard-Dreieck aus, eigenes +/- */
details > summary { list-style:none; }
details > summary::-webkit-details-marker { display:none; }
details[open] .tgl-plus { display:none; }
details:not([open]) .tgl-minus { display:none; }

.fade-in { animation:fadeIn .25s ease both; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Slide-up-Panel (Bottom-Sheet), z.B. Material anlegen/bearbeiten */
.sheet-up { animation:sheetUp .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* Chart-Gitterlinien + Hover-Tooltip (Dashboard) */
.chart-grid { stroke:#e2e8f0; stroke-width:1; }
.dark .chart-grid { stroke:#334155; }
.chart-cursor { stroke:var(--accent-500); stroke-width:1; stroke-dasharray:3 3; opacity:.55; }
.chart-dot { fill:var(--accent-500); stroke:#fff; stroke-width:2; }
.dark .chart-dot { stroke:#1e293b; }
.chart-tip { position:absolute; transform:translate(-50%,-150%); background:#0f172a; color:#fff;
  font-size:.72rem; padding:.25rem .55rem; border-radius:6px; white-space:nowrap; pointer-events:none;
  box-shadow:0 4px 14px rgba(15,23,42,.25); z-index:5; }
.dark .chart-tip { background:#334155; }

/* ============================================================
   Dark Mode – Override-Layer (.dark auf <html>).
   Kein dark:-Utility im Markup nötig; wir remappen die genutzten
   Tailwind-Farbklassen + eigene Komponenten.
   ============================================================ */
.dark { color-scheme: dark; --accent-050: rgb(var(--accent-rgb) / .16); --accent-text: var(--accent-400); --accent-ring: rgb(var(--accent-rgb) / .30); }

/* Flächen */
.dark body, .dark .bg-slate-100 { background-color:#0b1120; }
.dark .bg-white { background-color:#1e293b; }
.dark .bg-slate-50 { background-color:#273449; }
.dark .bg-orange-50, .dark .hover\:bg-orange-50:hover { background-color:rgb(var(--accent-rgb) / .16); }
.dark .bg-amber-50 { background-color:rgba(245,158,11,.13); }
.dark .bg-emerald-50 { background-color:rgba(16,185,129,.16); }
.dark .bg-red-50 { background-color:rgba(239,68,68,.16); }
.dark .text-emerald-700 { color:#34d399; }

/* Text */
.dark .text-slate-900 { color:#f1f5f9; }
.dark .text-slate-800 { color:#e2e8f0; }
.dark .text-slate-700 { color:#cbd5e1; }
.dark .text-slate-600 { color:#aeb9c9; }
.dark .text-slate-500 { color:#94a3b8; }
.dark .text-slate-400 { color:#7c8aa0; }
.dark .text-slate-300 { color:#5b6b82; }
.dark .text-orange-500, .dark .hover\:text-orange-500:hover { color:var(--accent-400); }
.dark .text-orange-600, .dark .text-orange-700 { color:var(--accent-400); }
.dark .border-orange-200 { border-color:rgb(var(--accent-rgb) / .35); }
.dark .text-amber-600, .dark .text-amber-700, .dark .text-amber-800 { color:#fcd34d; }
.dark .text-emerald-600 { color:#34d399; }
.dark .text-red-600, .dark .text-red-500 { color:#f87171; }

/* Rahmen */
.dark .border-slate-200 { border-color:#334155; }
.dark .border-slate-100 { border-color:#273449; }
.dark .border-slate-300 { border-color:#3b4a5f; }
.dark .border-amber-200 { border-color:rgba(245,158,11,.35); }
.dark .bg-amber-100 { background-color:rgba(245,158,11,.22); }

/* Eigene Komponenten */
.dark .card { background:#1e293b; border-color:#334155; }
.dark .inp, .dark .sel, .dark .as-trigger { background:#0f172a; border-color:#3b4a5f; color:#e2e8f0; }
.dark .inp::placeholder { color:#64748b; }
.dark .inp:hover, .dark .sel:hover, .dark .as-trigger:hover { border-color:#64748b; }
.dark .inp.err, .dark .sel.err { background:#3a1d1d; border-color:#ef4444; }
.dark .inp.warn { background:#3a2f14; border-color:#f59e0b; }
.dark .btn { background:#1e293b; border-color:#3b4a5f; color:#cbd5e1; }
.dark .btn:hover { background:#273449; }
.dark .btn-dark { background:#0f172a; border-color:#0f172a; color:#e2e8f0; }
.dark .as-panel { background:#1e293b; border-color:#334155; box-shadow:0 10px 28px rgba(0,0,0,.45); }
.dark .as-opt { color:#cbd5e1; }
.dark .kbd { background:#0f172a; border-color:#3b4a5f; color:#cbd5e1; }
.dark input[type="checkbox"] { background:#0f172a; border-color:#3b4a5f; }
.dark input[type="checkbox"]:checked { background:var(--accent); border-color:var(--accent); }
.dark .toast.ok { background:#334155; }
.dark .toast.info { background:#475569; }
.dark .card { box-shadow:none; }
.dark .rail-btn { background:#273449; color:#94a3b8; }
/* Aktive Menüpunkte in Dark Mode klar hervorheben (höhere Spezifität als .dark .text-slate-*) */
.dark .nav-link.active, .dark .subnav-link.active, .dark .rail-btn.active { background:rgb(var(--accent-rgb) / .20); color:var(--accent-400); }

/* Lade-Gerüst (Skeleton) beim Start: ersetzt die sonst leere Seite, während die erste Datenladung
   noch läuft (siehe js/main.js, showBootSkeleton()/hideBootSkeleton()). Dieselbe .skel-Klasse
   nutzen auch BrickStack (js/skelRows() u.a.) und shared/shell/settings.js (shared/shell/skeleton.js)
   für Skeletons innerhalb bereits gebooteter Ansichten – hier separat definiert statt geteilt, weil
   dieses App-eigene CSS-Bundle nicht mit anderen Tools geteilt wird. */
.skel { background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%); background-size:400% 100%; animation:skelShimmer 1.3s ease infinite; border-radius:6px; }
.dark .skel { background:linear-gradient(90deg,#1e293b 25%,#334155 37%,#1e293b 63%); background-size:400% 100%; }
@keyframes skelShimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }