/* Ausgelagert aus _layout.html (Senior-Review: cachebar statt inline in no-store-HTML).
   Auf jeder Seite geladen via <link ...?v=asset_version()>. */
/* Cross-Document View Transitions ENTFERNT (2026-06-25, Freeze-Fix):
   Der native Crossfade hielt beim Tab-Wechsel die ALTE Seite eingefroren
   (nicht-interaktiv), bis die neue paint-bereit war → bei echter Netz-Latenz
   ~1s „Freeze" + spät erscheinendes (per JS gesetztes) Theme-Icon. Tab-Klicks
   navigieren jetzt direkt (harter, sofortiger Wechsel, kein Hold). */

:root{
  --bg:#f6f8fa;--card:#fff;--card-hover:#f9fafb;
  --border:#eaecf0;--border-strong:#d0d5dd;
  --text:#101828;--text-muted:#475467;--text-subtle:#667085;
  --accent:#0d9488;--accent-muted:#f0fdfa;
  --success:#12b76a;--success-muted:#ecfdf3;
  --warning:#f59e0b;--warning-muted:#fffbeb;
  --error:#f04438;--error-muted:#fef3f2;
  --radius:12px;--radius-sm:8px;
  --shadow:0 1px 3px rgba(16,24,40,.1),0 1px 2px rgba(16,24,40,.06);
  --shadow-hover:0 4px 12px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.05);
  --mono:'IBM Plex Mono',monospace;
  --thead-bg:#f9fafb;--pill-bg:#f2f4f7;--pill-hover:#e4e7ec;
  --tot-bg:#f9fafb;--mo-border:#f2f4f7;--zebra:rgba(0,0,0,.015);
  /* Easing-Set — überall konsistent verwenden statt ad-hoc cubic-beziers.
     bounce: für chip-pop / "fertig"-feedback (leichter overshoot)
     smooth: standard ein-/ausblenden (text-fade, opacity)
     pulse:  für sich-wiederholende attention-grabber (analyzing-pulse) */
  --ease-out-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --ease-pulse:ease-in-out;
}
[data-theme="dark"]{
  --bg:#0c111d;--card:#161b26;--card-hover:#1c2333;
  --border:#1f2a37;--border-strong:#2d3a4a;
  /* Dark-Mode: text-subtle lesbar gemacht (#cbd5e1 statt #4b5563 = nahezu
     unsichtbar auf --bg #0c111d). Plus text-muted leicht heller für
     bessere Subtitle-Lesbarkeit ("vor 1 Min" etc.). */
  --text:#f5f5f6;--text-muted:#cbd5e1;--text-subtle:#94a3b8;
  --accent:#2dd4bf;--accent-muted:rgba(45,212,191,.08);
  --success:#4ade80;--success-muted:rgba(74,222,128,.08);
  --warning:#fbbf24;--warning-muted:rgba(251,191,36,.12);
  --error:#f87171;--error-muted:rgba(248,113,113,.1);
  --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-hover:0 4px 14px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.3);
  --thead-bg:rgba(255,255,255,.03);--pill-bg:rgba(255,255,255,.06);
  --pill-hover:rgba(255,255,255,.1);--tot-bg:rgba(255,255,255,.03);
  --mo-border:rgba(255,255,255,.04);--zebra:rgba(255,255,255,.02);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{
  font-family:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  padding:2.5rem 1.5rem 4rem;
  padding-top:max(2.5rem,env(safe-area-inset-top));
  padding-left:max(1.5rem,env(safe-area-inset-left));
  padding-right:max(1.5rem,env(safe-area-inset-right));
  padding-bottom:max(4rem,env(safe-area-inset-bottom));
  overscroll-behavior-y:contain;
}
a,button,input[type="button"],input[type="submit"],input[type="checkbox"],input[type="radio"],label,select,[role="button"]{
  touch-action:manipulation;
}
input,textarea,select{
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
  border-radius:var(--radius-sm);
}
input[type="checkbox"],input[type="radio"]{
  -webkit-appearance:auto;
  appearance:auto;
}
.container{max-width:880px;margin:0 auto}

h1{
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:.35rem;
}
.subtitle{
  color:var(--text-muted);
  font-size:.9rem;
  margin-bottom:2rem;
}

/* Card */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  margin-bottom:1.25rem;
  box-shadow:var(--shadow);
}
/* Primary-CTA-Card: Für Haupt-Aktionen, die Aufmerksamkeit brauchen
   (z.B. „Auswertung starten", wenn noch keine vorhanden). */
.card.card-primary-cta{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-muted),var(--shadow);
}

/* Hero-Layout für primäre Action-Cards — Icon, Title+Sub, Button auf einer Zeile
   (bricht unter 640 px in zwei Zeilen um). */
.aw-hero{
  display:flex;align-items:center;gap:1rem;
  padding:.25rem 0;
  flex-wrap:wrap;
}
.aw-hero-icon{
  width:40px;height:40px;
  background:var(--accent-muted);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--accent);
}
.aw-hero-icon svg{width:22px;height:22px;fill:currentColor}
.aw-hero-text{flex:1;min-width:200px}
.aw-hero-title{font-size:1rem;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.aw-hero-sub{font-size:.82rem;color:var(--text-muted);margin-top:.2rem;line-height:1.5}
.aw-hero .btn-primary{flex-shrink:0;font-size:.88rem;padding:.55rem 1.1rem}

/* Meta-Zeile unter dem Hero — zeigt Default-Werte und „Anpassen"-Toggle */
.aw-meta{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin-top:1rem;padding-top:.85rem;
  border-top:1px dashed var(--border);
  font-size:.82rem;color:var(--text-muted);
}
.aw-meta-pair strong{color:var(--text);font-weight:500}
.aw-meta-sep{color:var(--text-subtle)}
.aw-meta-toggle{
  margin-left:auto;
  padding:.15rem .4rem;
  border:0;background:transparent;
  font-family:inherit;font-size:.82rem;
  color:var(--accent);cursor:pointer;
  display:inline-flex;align-items:center;gap:.3rem;
  border-radius:var(--radius-sm);
}
.aw-meta-toggle:hover{background:var(--accent-muted)}
.aw-meta-toggle-icon{font-size:.65rem;transition:transform .2s}
.aw-meta-toggle.expanded .aw-meta-toggle-icon{transform:rotate(90deg)}
.card h2{
  font-size:1rem;
  font-weight:600;
  letter-spacing:-0.01em;
  margin-bottom:.25rem;
}
.card .card-sub{
  font-size:.82rem;
  color:var(--text-muted);
  margin-bottom:1rem;
}
.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
  flex-wrap:wrap;
}
.card-head h2{margin-bottom:.2rem}
.card-head .sub{font-size:.78rem;color:var(--text-muted)}
.card-head-actions{display:flex;gap:.4rem;flex-wrap:wrap}

/* Buttons — neutraler Filled-Tonal-Stil (gray-200 auf weißer Card). */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem 1rem;
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  border-radius:var(--radius-sm);
  cursor:pointer;
  border:1px solid transparent;
  background:#e5e7eb;
  color:#111827;
  text-decoration:none;
  transition:all .15s ease;
}
.btn:hover{background:#d1d5db;color:#000}
.btn:active{background:#9ca3af}
[data-theme="dark"] .btn{background:#374151;color:#f3f4f6}
[data-theme="dark"] .btn:hover{background:#4b5563;color:#fff}
[data-theme="dark"] .btn:active{background:#1f2937}

/* Cancel/Schliessen-Buttons — leicht rötlich, signalisiert Abbruch.
   Modal-Templates nutzen jetzt class="btn btn-cancel". */
.btn-cancel{
  background:#fee2e2;
  color:#991b1b;
  border-color:#fecaca;
}
.btn-cancel:hover{background:#fecaca;color:#7f1d1d;border-color:#fca5a5}
.btn-cancel:active{background:#fca5a5}
[data-theme="dark"] .btn-cancel{background:#3f1d1d;color:#fecaca;border-color:#7f1d1d}
[data-theme="dark"] .btn-cancel:hover{background:#5b2424;color:#fee2e2;border-color:#991b1b}
[data-theme="dark"] .btn-cancel:active{background:#2d1010}
.btn:disabled{
  background:#f3f4f6;
  color:var(--text-subtle);
  cursor:not-allowed;
  border-color:var(--border);
}
.btn svg{width:14px;height:14px;fill:currentColor}
.btn-primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.btn-primary:hover{background:#0f766e;border-color:#0f766e}
.btn-success{
  background:var(--success);
  color:#fff;
  border-color:var(--success);
}
.btn-success:hover{background:#15803d}
.btn-icon{padding:.5rem;width:34px;justify-content:center}
.btn-sm{padding:.35rem .7rem;font-size:.78rem}
.btn-sm svg{width:13px;height:13px}
.btn-danger-ghost{
  border-color:#fca5a5;
  background:#fef2f2;
  color:#b91c1c;
}
.btn-danger-ghost:hover{
  background:rgba(240,68,56,.18);
  color:var(--error);
  border-color:#dc2626;
}
[data-theme="dark"] .btn-danger-ghost:hover{
  background:rgba(248,113,113,.28);
  color:#fca5a5;
}

/* Casino-Badge: Pill mit erkanntem Casino-Namen. Wird auf Index-Page
   (start.html, optimistisch beim Upload) und Konvertierungs-Page
   (konvertierung.html) gerendert. EINE Wahrheit hier — gleiche Look-
   Tokens für alle Templates. .doc-title nutzt gap:.6rem, deshalb hier
   KEIN zusätzliches margin-left. */
.casino-badge{
  display:inline-block;
  padding:.12rem .55rem;
  font-size:.75rem;
  font-weight:600;
  background:var(--casino-bg,var(--accent-muted));
  color:var(--casino-fg,var(--accent));
  border-radius:999px;
  line-height:1.35;
  vertical-align:middle;
}
/* Casino-spezifische Brand-Farben — subtle, nur color (background bleibt
   ein leichtes Tint der gleichen Hue). Keine aggressiven Logo-Farben:
   die Liste muss als Ganzes ruhig wirken, nicht ein bunter Karneval.
   :where() drückt selector-specificity auf 0,0,1 → einfache .casino-
   badge-Overrides (z.B. in Tests/Mockups) gewinnen, was Wartung
   erleichtert. neue Casinos: 1 Light-Zeile + 1 Dark-Zeile zufügen.
   casino='manual' rendert keinen Badge (uebersicht.html zeigt eigenen
   "Manueller Tabellen-Modus"-Chip), daher hier nicht aufgelistet. */
:where(.casino-badge)[data-casino="tipico"]      { --casino-bg:#fee2e2; --casino-fg:#b91c1c; }
:where(.casino-badge)[data-casino="betway"]      { --casino-bg:#dcfce7; --casino-fg:#15803d; }
:where(.casino-badge)[data-casino="interwetten"] { --casino-bg:#dbeafe; --casino-fg:#1d4ed8; }
:where(.casino-badge)[data-casino="pokerstars"]  { --casino-bg:#fef3c7; --casino-fg:#a16207; }
:where(.casino-badge)[data-casino="lottoland"]   { --casino-bg:#ffedd5; --casino-fg:#c2410c; }
:where(.casino-badge)[data-casino="platincasino"]{ --casino-bg:#ede9fe; --casino-fg:#6d28d9; }
:where(.casino-badge)[data-casino="luckyhunter"] { --casino-bg:#ffe4e6; --casino-fg:#be123c; }
:where(.casino-badge)[data-casino="n1casino"]    { --casino-bg:#fce7f3; --casino-fg:#a21caf; }
:where(.casino-badge)[data-casino="pinocasino"]  { --casino-bg:#ede9fe; --casino-fg:#7c3aed; }
:where(.casino-badge)[data-casino="slothunter"]  { --casino-bg:#ffedd5; --casino-fg:#ea580c; }
:where(.casino-badge)[data-casino="bitkingz"]    { --casino-bg:#fef3c7; --casino-fg:#b45309; }
[data-theme="dark"] :where(.casino-badge)[data-casino="tipico"]      { --casino-bg:rgba(248,113,113,.15); --casino-fg:#fca5a5; }
[data-theme="dark"] :where(.casino-badge)[data-casino="betway"]      { --casino-bg:rgba(74,222,128,.15); --casino-fg:#86efac; }
[data-theme="dark"] :where(.casino-badge)[data-casino="interwetten"] { --casino-bg:rgba(96,165,250,.18); --casino-fg:#93c5fd; }
[data-theme="dark"] :where(.casino-badge)[data-casino="pokerstars"]  { --casino-bg:rgba(251,191,36,.15); --casino-fg:#fcd34d; }
[data-theme="dark"] :where(.casino-badge)[data-casino="lottoland"]   { --casino-bg:rgba(251,146,60,.15); --casino-fg:#fdba74; }
[data-theme="dark"] :where(.casino-badge)[data-casino="platincasino"]{ --casino-bg:rgba(167,139,250,.18); --casino-fg:#c4b5fd; }
[data-theme="dark"] :where(.casino-badge)[data-casino="luckyhunter"] { --casino-bg:rgba(251,113,133,.15); --casino-fg:#fda4af; }
[data-theme="dark"] :where(.casino-badge)[data-casino="n1casino"]    { --casino-bg:rgba(232,121,249,.15); --casino-fg:#f0abfc; }
[data-theme="dark"] :where(.casino-badge)[data-casino="pinocasino"]  { --casino-bg:rgba(167,139,250,.18); --casino-fg:#c4b5fd; }
[data-theme="dark"] :where(.casino-badge)[data-casino="slothunter"]  { --casino-bg:rgba(251,146,60,.15); --casino-fg:#fdba74; }
[data-theme="dark"] :where(.casino-badge)[data-casino="bitkingz"]    { --casino-bg:rgba(245,158,11,.15); --casino-fg:#fcd34d; }
/* Passwort-Feld mit Sichtbarkeits-Toggle (Eye-Icon rechts).
   Verwendung: <div class="pw-toggle-wrap"><input type="password" ...><button class="pw-eye">…</button></div> */
.pw-toggle-wrap{position:relative}
.pw-toggle-wrap > input{padding-right:2.4rem !important}
.pw-toggle-wrap .pw-eye{
  position:absolute;
  right:.3rem;
  top:50%;
  transform:translateY(-50%);
  width:2rem;height:2rem;
  display:grid;place-items:center;
  border:0;background:transparent;
  color:var(--text-subtle);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:color .15s,background .15s;
}
.pw-toggle-wrap .pw-eye:hover{color:var(--text);background:var(--low-muted,var(--card-hover))}
.pw-toggle-wrap .pw-eye svg{width:16px;height:16px;fill:currentColor;pointer-events:none}
/* Eye-Open-Icon (Default). Eye-Closed wird via [aria-pressed="true"] gezeigt */
.pw-toggle-wrap .pw-eye .pw-eye-open{display:block}
.pw-toggle-wrap .pw-eye .pw-eye-closed{display:none}
.pw-toggle-wrap .pw-eye[aria-pressed="true"] .pw-eye-open{display:none}
.pw-toggle-wrap .pw-eye[aria-pressed="true"] .pw-eye-closed{display:block}

/* Kleiner Text-Link für sekundäre Aktionen neben Primary-Buttons
   (z.B. „Nur Rohdaten" neben „Excel mit Auswertung"). */
.raw-download-link{
  font-size:.78rem;color:var(--text-muted);text-decoration:underline;
  text-decoration-color:color-mix(in oklab,var(--text-muted) 40%,transparent);
  text-underline-offset:3px;padding:.3rem .2rem;align-self:center;
  transition:color .15s;
}
.raw-download-link:hover{color:var(--text);text-decoration-color:var(--text)}

/* Chips */
.chip{
  display:inline-flex;
  align-items:center;
  padding:.18rem .55rem;
  font-size:.7rem;
  font-weight:600;
  border-radius:20px;
}
.chip-success{background:var(--success-muted);color:var(--success)}
.chip-ready{display:inline-flex;align-items:center;gap:.3rem}
.chip-ready svg{width:11px;height:11px;fill:currentColor}
/* Stärkerer Error-Chip, damit „Abgebrochen"/„Fehlgeschlagen" im Light-Mode
   nicht mit „Abgeschlossen" verwechselt werden kann — vorher waren beide
   pastell-muted; jetzt klar roter Hintergrund mit weißer Schrift. */
.chip-error-strong{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--error);color:#fff;
  font-weight:600;
}
.chip-error-strong svg{width:11px;height:11px;fill:currentColor}
[data-theme="dark"] .chip-error-strong{background:var(--error);color:#1a0505}
.chip-warning{background:var(--warning-muted);color:var(--warning)}
.chip-error{background:var(--error-muted);color:var(--error)}
.chip-info{background:var(--accent-muted);color:var(--accent)}
.chip-neutral{background:#f3f4f6;color:var(--text-muted)}
a.chip,.chip-link{text-decoration:none;cursor:pointer;transition:filter .15s,box-shadow .15s}
a.chip:hover,.chip-link:hover{filter:brightness(.95);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* Tag */
.tag{
  display:inline-flex;
  padding:.2rem .55rem;
  font-size:.7rem;
  font-weight:600;
  border-radius:6px;
  background:#f3f4f6;
  color:var(--text-muted);
}

/* Doc header */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#111827;
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
  margin-bottom:1rem;
  padding:.4rem .8rem .4rem .55rem;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:#e5e7eb;
  transition:all .15s;
}
.back-link:hover{background:#d1d5db;color:#000;border-color:transparent}
[data-theme="dark"] .back-link{background:#374151;color:#f3f4f6}
[data-theme="dark"] .back-link:hover{background:#4b5563;color:#fff}

.doc-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.5rem;
  /* Vor diesem Fix: flex-wrap:wrap → bei knapper Breite (oder nach async-
     Layout-Reflow wie Personal-Data-Title-Update) sprang die header-actions-
     Box unter den Title → Excel-Button stand tiefer als bei Auto-Casinos
     (User-Beobachtung 2026-05-22). Auf Desktop nicht mehr wrappen; nur
     Mobile-Media-Query oben (@max-width:600px) erlaubt das Stacking. */
  flex-wrap:nowrap;
  /* Title-Container darf flexibel schrumpfen, damit lange Titel den
     header-actions-Block nicht verdrängen. */
  min-width:0;
}
.doc-header > div:first-child{ min-width:0; flex:1 1 auto; }
.doc-title{
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:-0.02em;
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  min-width:0;
  /* Safety-Net für .doc-title-Varianten mit rohem Text (Tool-/Status-Seiten):
     lange Token brechen, statt das Layout zu sprengen. Die Projekt-Übersicht
     nutzt stattdessen .doc-title-text (einzeilig + Ellipsis, s.u.). break-word
     (statt anywhere) lässt die min-content-Breite intakt → kein vorzeitiger,
     ragged Umbruch mitten im Wort. */
  overflow-wrap:break-word;
}
/* Projekt-/Dokument-Titel: einzeilig mit Ellipsis, voller Titel im Tooltip.
   Ein langer Dateiname-Token (z.B. „66374_-_Transaktionsliste_Lottohelden_…")
   überlief sonst die Aktions-Buttons bzw. brach ragged mitten im Wort um
   („Si"/„mona"). Ellipsis ist konsistent mit den Projekt-Listen-Karten und
   bleibt sauber in einer Zeile neben den Buttons. */
.doc-title-text{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.doc-meta{
  font-size:.8rem;
  color:var(--text-muted);
  margin-top:.35rem;
  display:flex;
  align-items:center;
  gap:.6rem;
  /* Badge + Status-Chip dürfen auf schmalen Screens umbrechen statt zu
     überlaufen. */
  flex-wrap:wrap;
}
.dot{color:var(--text-subtle)}
.header-actions{display:flex;gap:.5rem;align-items:center;flex-shrink:0;flex-wrap:nowrap}

/* Doc row */
.doc-row{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.95rem 1rem;
  background:#fff;
}
.doc-row-main{display:flex;align-items:center;gap:.85rem}
.doc-row-info{flex:1;min-width:0}
.doc-row-name{
  font-size:.875rem;
  font-weight:500;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.doc-row-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0}

@keyframes spin{to{transform:rotate(360deg)}}

/* Error banner */
.error-banner{
  background:var(--error-muted);
  border:1px solid #fecaca;
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
  color:var(--error);
  font-size:.85rem;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.error-banner svg{width:16px;height:16px;fill:var(--error);flex-shrink:0}

/* ── Modal (shared) ── */
.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.4);
  z-index:1000;
  align-items:center;justify-content:center;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:#fff;
  border-radius:var(--radius);
  padding:1.5rem;
  width:90%;max-width:420px;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.modal-box h3{
  font-size:.95rem;
  font-weight:600;
  margin-bottom:.25rem;
}
.modal-box .modal-sub{
  font-size:.82rem;
  color:var(--text-muted);
  margin-bottom:1.25rem;
  line-height:1.45;
}
.modal-icon{
  width:40px;height:40px;
  background:var(--error-muted);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.85rem;
}
.modal-icon svg{width:20px;height:20px;fill:var(--error)}
.modal-actions{
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
}
.btn-danger{
  background:var(--error);
  color:#fff;
  border-color:var(--error);
}
.btn-danger:hover{background:#dc2626;border-color:#dc2626}

/* ── Impersonations-Banner ──
   Persistent, sichtbar auf ALLEN Seiten sobald der Admin als anderer User agiert.
   Rechenschaft für DSGVO-Mandate: der Admin darf nie vergessen, wessen Daten
   er gerade sieht.  Statisch (nicht sticky), damit der App-Header darunter
   sein normales sticky-Verhalten behält und der Seiteninhalt nicht abgeschnitten wird.  */
.impersonation-banner{
  position:static;
  z-index:120;
  margin:-2.5rem -1.5rem 0;
  padding:.55rem 1.5rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  background:linear-gradient(90deg,#fbbf24,#f59e0b);
  color:#1a1206;
  font-size:.85rem;
  box-shadow:0 2px 8px rgba(180,83,9,.15);
  flex-wrap:wrap;
}
/* Mobil: die negativen Ränder (−2.5rem oben zum Überlappen der Desktop-Kopf-
   Lücke, −1.5rem seitlich für Full-Bleed) ziehen das Band aus dem Bild bzw.
   erzeugen horizontalen Überlauf → auf schmalen Screens in den Fluss holen. */
@media(max-width:640px){
  .impersonation-banner{ margin:0 0 .5rem; }
}
.impersonation-banner .imp-eye{
  width:18px;height:18px;fill:currentColor;flex-shrink:0;
}
.impersonation-banner .imp-text{flex:1;min-width:200px}
.impersonation-banner strong{font-weight:700}
.impersonation-banner .imp-stop-form{margin:0}
.impersonation-banner .imp-stop-btn{
  background:rgba(26,18,6,.12);
  color:#1a1206;
  border:0;
  padding:.3rem .75rem;
  border-radius:var(--radius-sm);
  font-size:.78rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s;
}
.impersonation-banner .imp-stop-btn:hover{background:rgba(26,18,6,.22)}
[data-theme="dark"] .impersonation-banner{
  background:linear-gradient(90deg,#d97706,#b45309);
  color:#fef3c7;
}
[data-theme="dark"] .impersonation-banner .imp-stop-btn{
  background:rgba(254,243,199,.15);color:#fef3c7;
}
[data-theme="dark"] .impersonation-banner .imp-stop-btn:hover{
  background:rgba(254,243,199,.25);
}
/* Wenn Banner aktiv ist, darf der Header NICHT mehr mit negativem margin-top
   nach oben gezogen werden — sonst überlappt er den Banner. Statt dessen rückt
   er direkt unter den Banner (nur horizontale negative Margins bleiben). */
.impersonation-banner + .app-header{margin-top:0}

/* ── Demo-Modus-Banner (öffentliche /demo-Session) ──
   Teal/Brand statt Amber, damit es als „Demo/Info" liest, nicht als Warnung
   wie das Impersonation-Band. Gleiche Full-Bleed-Mechanik (negative Margins). */
.demo-banner{
  position:static;
  z-index:120;
  margin:-2.5rem -1.5rem 0;
  padding:.55rem 1.5rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  background:linear-gradient(90deg,#0d9488,#0f766e);
  color:#f0fdfa;
  font-size:.85rem;
  box-shadow:0 2px 8px rgba(13,148,136,.18);
  flex-wrap:wrap;
}
@media(max-width:640px){ .demo-banner{ margin:0 0 .5rem; } }
.demo-banner-ic{width:17px;height:17px;fill:currentColor;flex-shrink:0;opacity:.95}
.demo-banner-text{flex:1;min-width:200px;line-height:1.4}
.demo-banner-text strong{font-weight:700}
.demo-banner-btn{
  background:rgba(255,255,255,.16);
  color:#fff;
  border:0;
  padding:.3rem .8rem;
  border-radius:var(--radius-sm);
  font-size:.78rem;font-weight:600;font-family:inherit;
  text-decoration:none;white-space:nowrap;
  transition:background .15s;
}
.demo-banner-btn:hover{background:rgba(255,255,255,.28)}
/* Primärer CTA im Banner: „Zugang anfragen" — weiß gefüllt, sticht heraus. */
.demo-banner-btn-primary{background:#fff;color:#0f766e}
.demo-banner-btn-primary:hover{background:rgba(255,255,255,.85)}
/* Demo-CTA-Block unter der Schadensauswertung. */
.demo-cta{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border-left:4px solid #0f766e;
  background:color-mix(in srgb, #0f766e 7%, var(--card));
}
.demo-cta-text{flex:1;min-width:220px;font-size:.9rem;line-height:1.5}
.demo-cta-btn{white-space:nowrap}
[data-theme="dark"] .demo-cta{background:color-mix(in srgb, #14b8a6 12%, var(--card))}
/* Header NICHT mit negativem margin-top nach oben unter das Banner ziehen —
   sonst überlappt das Banner (z-index 120) die Header-/Tab-Zeile. Body-Klasse
   statt Nachbar-Selektor, weil zwischen Banner und Header ein <script> steht
   (der Adjacency-Selektor `.demo-banner + .app-header` würde dadurch nicht
   greifen). Zusätzlich etwas Abstand unter dem Banner. */
body.is-demo .app-header{margin-top:.25rem}
.demo-banner{margin-bottom:0}
[data-theme="dark"] .demo-banner{
  background:linear-gradient(90deg,#0f766e,#115e59);
  color:#ccfbf1;
}
/* Excel-artige Tabellen-Ansicht (Demo-Werkzeug-Ergebnisse) — global, weil das
   excel_view-Macro auch außerhalb der Upload-Seiten (z.B. Ergebnisseiten) genutzt
   wird und die Styles sonst fehlen (Zellen bräche dann untereinander um). */
.xls{border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);margin-top:.5rem}
.xls-scroll{overflow-x:auto}
.xls-grid{display:grid;font-size:.8rem;min-width:520px}
.xls-corner,.xls-colh,.xls-rowh{background:var(--thead-bg);color:var(--text-subtle);font-weight:600;text-align:center;padding:.3rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border);font-size:.68rem}
.xls-rowh{text-align:right;padding-right:.4rem}
.xls-cell{padding:.42rem .55rem;border-right:1px solid var(--border);border-bottom:1px solid var(--border);white-space:nowrap;background:var(--card);overflow:hidden;text-overflow:ellipsis}
.xls-num{text-align:right;font-variant-numeric:tabular-nums}
.xls-head{font-weight:700;background:var(--pill-bg);color:var(--text)}
.xls-total{font-weight:700;background:var(--tot-bg)}
.xls-loss{color:var(--error)}
/* Ergebnis-Spalte leicht blau hervorheben (z.B. „Betrag EUR" der Währungs-
   umrechnung). Nach .xls-head/.xls-total definiert → gewinnt den Hintergrund. */
.xls-hl{background:#e6f0fb}
.xls-hl-colh{background:#d3e4f7;color:#1e40af}
[data-theme="dark"] .xls-hl{background:rgba(59,130,246,.20)}
[data-theme="dark"] .xls-hl-colh{background:rgba(59,130,246,.32);color:#bfdbfe}
.xls-tabs{display:flex;gap:2px;padding:.35rem .5rem 0;background:var(--thead-bg);border-top:1px solid var(--border)}
.xls-tab{font-size:.72rem;padding:.25rem .7rem;border:1px solid var(--border);border-bottom:0;border-radius:5px 5px 0 0;background:var(--card);color:var(--text-muted)}
.xls-tab.active{color:var(--success);font-weight:600;border-top:2px solid var(--success)}
/* Eingebettetes Beispiel-Bild einer echten Excel-Limitaufstellung (Demo). */
.demo-xls-img-link{display:block;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.demo-xls-img{display:block;width:100%;height:auto}
/* Im Demo-Modus destruktive Aktionen ausblenden — ein Read-only-Demo soll
   keine „Löschen"-Buttons dangeln lassen, die (vom Guard geblockt) still ins
   Leere klicken. Scoped auf body.is-demo → NULL Einfluss auf die echte App.
   Nicht-destruktive Mutationen (Upload, Auswertung neu, Tool-Runs) bleiben
   sichtbar und zeigen beim Klick den Read-only-Toast (fetch-Wrapper). */
.is-demo [data-action="delete-project"],
.is-demo [data-action="bulk-delete"],
.is-demo [data-action="empty-trash"],
.is-demo [data-action="delete-forever"],
.is-demo [data-trash-project-btn],
.is-demo [data-restore-project-btn]{
  display:none !important;
}

/* ── App Header — „Floating Island" (schwebende Milchglas-Pille) ──
   .app-header ist die zentrierte, abgerundete Glas-Pille; sie bleibt sticky.
   Body-Padding (2.5rem oben / 1.5rem seitlich) liefert die Luft rundherum;
   negativer margin-top zieht die Pille auf ~1rem Abstand nach oben. */
.app-header{
  position:sticky;
  top:.75rem;
  z-index:100;
  width:100%;
  /* Bündig zum Inhalt: gleiche Breite wie .container (Default 880px). Die
     Kanten der Island-Pille liniieren so exakt mit den Inhaltskanten.
     Admin-Pages weiten BEIDE (Container + Header) auf 1280px (s. _admin_tabs.html). */
  max-width:880px;
  margin:-1.4rem auto 2rem;
  padding:.5rem .55rem .5rem .85rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 10px 30px -8px rgba(16,24,40,.22),
    0 2px 8px -2px rgba(16,24,40,.10),
    0 0 0 1px rgba(16,24,40,.04);
}
.app-header-brand{
  display:flex;align-items:center;gap:.55rem;flex-shrink:0;padding-right:.1rem;
}
.app-header-logo{
  width:28px;height:28px;
  background:var(--accent);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 1px 2px rgba(13,148,136,.4);
}
.app-header-logo svg{width:16px;height:16px;fill:#fff}
.app-header-name{
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.01em;
  white-space:nowrap;
}
/* Haarlinie zwischen Brand und Segmented-Nav */
.app-header-sep{
  width:1px;height:22px;background:var(--border-strong);opacity:.7;flex-shrink:0;
}
/* ── Navigation — iOS-Segmented-Control („Mulde") ── */
.app-nav{
  display:flex;align-items:center;gap:.1rem;
  margin:0 auto;                       /* zentriert die Nav in der Pille */
  padding:.18rem;border-radius:999px;
  background:rgba(16,24,40,.045);
  flex-shrink:0;        /* Segmente NIE stauchen — stattdessen ab Schwelle
                           komplett auf Burger umschalten (s. Responsive). */
}
.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:.32rem;
  font-size:.8rem;font-weight:500;color:var(--text-muted);
  text-decoration:none;padding:.4rem .8rem;border-radius:999px;
  white-space:nowrap;transition:color .15s ease,background .15s ease;
}
.nav-link:hover{background:transparent;color:var(--text)}
.nav-link.active{
  color:#fff;font-weight:600;background:var(--accent);
  box-shadow:0 1px 2px rgba(13,148,136,.45),0 1px 3px rgba(16,24,40,.12);
}
.nav-link.active:hover{color:#fff}

/* Pulse-Dot — markiert nav-link wenn etwas Neues seit User-Last-Visit. */
.nav-link-with-dot::after{
  content:"";
  position:absolute;top:.2rem;right:.3rem;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);
  animation:navpulse 2.2s ease-out infinite;
}
.nav-link.active.nav-link-with-dot::after{background:#fff;box-shadow:none}
@keyframes navpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
}
@media (prefers-reduced-motion: reduce){
  .nav-link-with-dot::after{animation:none}
  /* Header-/Dropdown-/Drawer-Bewegungen respektieren Reduced-Motion. */
  .tools-menu.open .tools-dropdown,
  .user-dropdown.open{animation:none}
  .nav-drawer{transition:none}
  .tools-caret{transition:none}
}

/* ── Werkzeuge-Dropdown ── */
.tools-menu{position:relative;flex-shrink:0}

/* ── Mobile-Hamburger + Drawer ──
   Desktop: Burger versteckt, .app-nav inline. Mobile (≤640px): Drawer
   slidet von rechts über die Page, volle Höhe, ~88vw breit, mit großen
   Touch-Targets und User-Footer mit Avatar + Logout. */
.burger-trigger{
  display:none;
  width:34px;height:34px;
  background:rgba(16,24,40,.04);border:1px solid transparent;
  border-radius:999px;cursor:pointer;color:var(--text-muted);
  align-items:center;justify-content:center;flex-shrink:0;
  padding:0;margin:0;
  transition:background .12s,color .12s;
}
.burger-trigger:hover{background:rgba(16,24,40,.07);color:var(--text)}
.burger-trigger svg{width:18px;height:18px;fill:currentColor;display:block}
.burger-trigger[aria-expanded="true"]{background:rgba(16,24,40,.1);color:var(--text)}
[data-theme="dark"] .burger-trigger{background:rgba(255,255,255,.06)}
[data-theme="dark"] .burger-trigger:hover{background:rgba(255,255,255,.1);color:var(--text)}
[data-theme="dark"] .burger-trigger[aria-expanded="true"]{background:rgba(255,255,255,.14)}

.nav-drawer-backdrop{
  display:none;position:fixed;inset:0;z-index:199;
  background:rgba(16,24,40,.55);
  opacity:0;transition:opacity .2s ease;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.nav-drawer-backdrop.open{display:block;opacity:1}

.nav-drawer{
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:200;
  width:min(300px,80vw);
  background:var(--bg);
  border-right:1px solid var(--border);
  transform:translateX(-100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  visibility:hidden;
  box-shadow:8px 0 32px rgba(16,24,40,.16);
}
.nav-drawer.open{transform:translateX(0);visibility:visible}
[data-theme="dark"] .nav-drawer{box-shadow:8px 0 32px rgba(0,0,0,.55)}

.nav-drawer-head{
  display:flex;align-items:center;gap:.65rem;
  padding:1rem 1rem .85rem 1.25rem;
  flex-shrink:0;
}
.nav-drawer-brand{
  display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;
}
.nav-drawer-brand .app-header-logo{width:28px;height:28px;flex-shrink:0}
.nav-drawer-brand .app-header-logo svg{width:16px;height:16px;fill:#fff}
.nav-drawer-brand-name{
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;color:var(--text);
}
.nav-drawer-close{
  width:36px;height:36px;border:0;background:transparent;
  color:var(--text-muted);cursor:pointer;border-radius:8px;
  display:grid;place-items:center;flex-shrink:0;
  transition:background .12s,color .12s;
}
.nav-drawer-close:hover{background:var(--card-hover);color:var(--text)}
.nav-drawer-close svg{width:16px;height:16px;fill:currentColor}

.nav-drawer-body{
  flex:1;overflow-y:auto;
  padding:.25rem .5rem 1rem;
  -webkit-overflow-scrolling:touch;
}

.nav-drawer-section-label{
  font-size:.7rem;font-weight:600;letter-spacing:.04em;
  color:var(--text-subtle);text-transform:uppercase;
  padding:1.1rem .75rem .4rem;
}
.nav-drawer-section-label:first-child{padding-top:.25rem}

.nav-drawer-link{
  display:flex;align-items:center;gap:.85rem;
  padding:.85rem .75rem;min-height:48px;
  color:var(--text);text-decoration:none;font-size:.95rem;font-weight:500;
  border-radius:10px;
  position:relative;
  transition:background .12s;
}
.nav-drawer-link:hover{background:var(--card-hover)}
.nav-drawer-link:active{background:var(--pill-bg)}
.nav-drawer-link.active{
  background:var(--accent-muted);color:var(--accent);
}
.nav-drawer-link.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:1.5rem;background:var(--accent);border-radius:0 2px 2px 0;
}
.nav-drawer-link-with-dot::after{
  content:"";
  position:absolute;top:50%;right:1rem;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);
  animation:navpulse 2.2s ease-out infinite;
}
.nav-drawer-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text-muted);
  display:grid;place-items:center;flex-shrink:0;
}
.nav-drawer-link.active .nav-drawer-icon{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.nav-drawer-icon svg{width:15px;height:15px;fill:currentColor}
.nav-drawer-link-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.nav-drawer-tool-sub{
  font-size:.75rem;color:var(--text-muted);font-weight:400;line-height:1.3;
}
.nav-drawer-link.active .nav-drawer-tool-sub{color:var(--accent)}

.nav-drawer-foot{
  flex-shrink:0;
  display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1rem;
  border-top:1px solid var(--border);background:var(--card);
}
.nav-drawer-foot-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;
  font-size:.78rem;font-weight:700;flex-shrink:0;
}
.nav-drawer-foot-text{flex:1;min-width:0;line-height:1.3}
.nav-drawer-foot-name{
  font-size:.85rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-drawer-foot-role{
  font-size:.72rem;color:var(--text-muted);text-transform:capitalize;
}
.nav-drawer-foot-theme,.nav-drawer-foot-logout{
  width:36px;height:36px;border:1px solid var(--border);background:transparent;
  border-radius:8px;color:var(--text-muted);cursor:pointer;
  display:grid;place-items:center;
  transition:all .12s;
}
.nav-drawer-foot-theme:hover,.nav-drawer-foot-logout:hover{
  background:var(--card-hover);color:var(--text);border-color:var(--border-strong);
}
.nav-drawer-foot-theme svg,.nav-drawer-foot-logout svg{
  width:15px;height:15px;fill:currentColor;
}
.tools-trigger{
  cursor:pointer;border:0;background:transparent;font-family:inherit;
  display:inline-flex;align-items:center;gap:.32rem;
}
.tools-caret{width:11px;height:11px;fill:currentColor;opacity:.6;transition:transform .15s}
.tools-menu.open .tools-caret{transform:rotate(180deg)}
.tools-menu.open .tools-trigger{background:rgba(16,24,40,.06);color:var(--text)}
[data-theme="dark"] .tools-menu.open .tools-trigger{background:rgba(255,255,255,.08)}
/* Dropdown-Panel zentriert unter dem Werkzeuge-Segment in der Island-Pille.
   (Pille hat keinen Flow-Platz für ein inline-Dropdown → absolut + translateX.) */
.tools-dropdown{
  display:none;position:absolute;left:50%;transform:translateX(-50%);
  top:calc(100% + .7rem);
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;
  /* Weicher, gestreuter Schatten + feiner Innenrand-Ring (siehe Design-Vorlage). */
  box-shadow:0 12px 32px -8px rgba(16,24,40,.18),0 0 0 1px rgba(16,24,40,.03);
  min-width:268px;z-index:300;padding:.4rem;overflow:hidden;
}
[data-theme="dark"] .tools-dropdown{
  box-shadow:0 12px 32px -8px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);
}
.tools-menu.open .tools-dropdown{display:block;animation:dropIn .14s ease-out}
@keyframes dropIn{from{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* Kleines, uppercase, gedämpftes Sektions-Label über der Werkzeug-Liste. */
.tools-dropdown-label{
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-subtle);padding:.5rem .7rem .35rem;
}
.tools-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.55rem .6rem;border-radius:9px;
  text-decoration:none;color:var(--text);font-size:.85rem;
  transition:background .12s;
}
.tools-item:hover{background:#f5f7f9}
.tools-item.is-active{background:var(--accent-muted);color:var(--accent)}
.tools-item-icon{
  width:30px;height:30px;border-radius:8px;
  background:var(--accent-muted);color:var(--accent);
  display:grid;place-items:center;flex-shrink:0;
}
.tools-item.is-active .tools-item-icon{background:var(--accent);color:#fff}
.tools-item-icon svg{width:16px;height:16px;fill:currentColor}
.tools-item-text{flex:1;min-width:0;display:flex;flex-direction:column}
.tools-item-title{display:block;font-size:.8rem;font-weight:600;line-height:1.3}
.tools-item-sub{display:block;font-size:.68rem;color:var(--text-subtle);margin-top:.1rem}
[data-theme="dark"] .tools-item:hover{background:var(--card-hover)}

/* ── User Menu — schicke Benutzer-Card (Island), Design „S2" ──
   .user-avatar ist die einzeilige Pille: [Monogramm-Kreis] [Label-Kürzel] [Caret].
   Voller Kanzlei-Name + Rolle stehen im aufklappenden Menü (und im title-Tooltip). */
.user-menu{position:relative;margin-left:.4rem;flex-shrink:0}
.user-avatar{
  display:flex;align-items:center;gap:.45rem;
  padding:.24rem .5rem .24rem .28rem;
  border:1px solid rgba(16,24,40,.1);
  border-radius:999px;
  background:#fff;
  cursor:pointer;font-family:inherit;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:background .15s ease,border-color .15s ease;
}
.user-avatar:hover{border-color:rgba(16,24,40,.2)}
[data-theme="dark"] .user-avatar{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
[data-theme="dark"] .user-avatar:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
/* Monogramm-Kreis: feste Größe (kein Pillen-Wachstum mehr), Farbe pro Kanzlei
   via --ua-c (inline aus _kz.color), Fallback = neutrales Slate für Personen. */
.user-avatar-badge{
  position:relative;
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--ua-c,#475467);
  display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:600;color:#fff;font-family:var(--mono);
  letter-spacing:.01em;
}
/* Kein Name → grauer Platzhalter-Kreis. */
.user-avatar-badge--q{
  background:#eef0f3;color:#98a2b3;
  border:1px solid var(--border-strong, #d0d5dd);
}
.user-avatar-label{
  font-size:.8rem;font-weight:600;color:var(--text);
  line-height:1.15;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:11rem;
}
.user-avatar-caret{
  width:12px;height:12px;fill:var(--text-subtle);flex-shrink:0;margin-right:.05rem;opacity:.6;
}
.user-dropdown{
  display:none;position:absolute;right:0;top:calc(100% + .6rem);
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  /* Weicher, gestreuter Schatten + feiner Innenrand-Ring (siehe Design-Vorlage). */
  box-shadow:0 12px 32px -8px rgba(16,24,40,.18),0 0 0 1px rgba(16,24,40,.03);
  min-width:240px;z-index:300;
  padding:.4rem;overflow:hidden;
}
[data-theme="dark"] .user-dropdown{
  box-shadow:0 12px 32px -8px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);
}
@keyframes userDropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.user-dropdown.open{display:block;animation:userDropIn .14s ease-out}
/* Kopf: Avatar + Name + Rolle. */
.user-dropdown-head{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .6rem .5rem;
}
.user-dropdown-head-badge{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--ua-c,var(--accent));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.01em;
}
.user-dropdown-head-badge--q{
  background:#eef0f3;color:#98a2b3;border:1px solid var(--border-strong,#d0d5dd);
}
[data-theme="dark"] .user-dropdown-head-badge--q{background:var(--card-hover);color:var(--text-subtle)}
.user-dropdown-head-text{min-width:0;display:flex;flex-direction:column}
.user-dropdown-name{
  font-size:.82rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:13rem;
}
.user-dropdown-role{font-size:.66rem;color:var(--text-subtle)}
/* Kleines, uppercase, gedämpftes Sektions-Label. */
.user-dropdown-label{
  font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-subtle);padding:.5rem .7rem .35rem;
}
.user-dropdown-item{
  display:block;padding:.5rem .7rem;border-radius:9px;
  font-size:.8rem;color:var(--text);
  text-decoration:none;transition:background .12s;
}
.user-dropdown-item:hover{background:#f5f7f9}
[data-theme="dark"] .user-dropdown-item:hover{background:var(--card-hover)}
/* „Abmelden" rot abgesetzt. */
.user-dropdown-item--danger{color:#b42318}
.user-dropdown-item--danger:hover{background:#fef3f2;color:#b42318}
[data-theme="dark"] .user-dropdown-item--danger{color:#f87171}
[data-theme="dark"] .user-dropdown-item--danger:hover{background:rgba(248,113,113,.12);color:#f87171}

/* ── Toast ── */
.toast-container{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  pointer-events:none;
}
.toast{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  padding:.7rem .9rem;
  background:#1e293b;
  color:#f8fafc;
  font-size:.82rem;
  font-weight:500;
  border-radius:var(--radius-sm);
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  pointer-events:auto;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  max-width:340px;
  border-left:3px solid #4ade80;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast-error{border-left-color:#f87171}
.toast-icon{
  width:18px;height:18px;
  border-radius:50%;
  background:#4ade80;color:#0f172a;
  display:grid;place-items:center;
  flex-shrink:0;margin-top:.05rem;
  font-size:.72rem;font-weight:700;
}
.toast-error .toast-icon{background:#f87171;color:#450a0a}
.toast-icon svg{width:11px;height:11px;fill:currentColor}
.toast-body{flex:1;min-width:0}
.toast-title{
  font-size:.85rem;font-weight:600;
  line-height:1.3;
  margin-bottom:.15rem;
}
.toast-msg{
  font-size:.78rem;font-weight:400;
  color:#cbd5e1;line-height:1.5;
}
.toast-single .toast-title{margin-bottom:0;font-weight:500}
.toast-close{
  flex-shrink:0;background:none;border:none;color:#94a3b8;
  font-size:1.2rem;line-height:1;padding:0 .15rem;cursor:pointer;
  align-self:flex-start;margin-top:-.15rem;
  transition:color .12s;
}
.toast-close:hover{color:#fff}
.toast-close:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:3px}

/* ── Dark Mode Toggle Button — Island-Icon-Button (runde Glas-Pille) ── */
.btn-theme{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(16,24,40,.04);
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  color:var(--text-muted);
  transition:background .15s,color .15s,border-color .15s;
  flex-shrink:0;
}
.btn-theme:hover{background:rgba(16,24,40,.07);color:var(--text)}
[data-theme="dark"] .btn-theme{background:rgba(255,255,255,.06)}
[data-theme="dark"] .btn-theme:hover{background:rgba(255,255,255,.1)}
.btn-theme svg{width:15px;height:15px;fill:currentColor;display:block}

/* ── Dark Mode Overrides ── */
[data-theme="dark"] body{color-scheme:dark}
/* Buttons */
[data-theme="dark"] .btn{background:var(--card);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .btn:hover{background:var(--card-hover)}
[data-theme="dark"] .btn:disabled{background:var(--bg);color:var(--text-subtle);border-color:var(--border)}
/* Dark-Mode-Override darf die farbigen Button-Variants nicht überschreiben.
   Specificity der obigen Regel ist 11, also brauchen die Variants auch 11. */
[data-theme="dark"] .btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="dark"] .btn-danger{background:var(--error);color:#fff;border-color:var(--error)}
[data-theme="dark"] .btn-danger:hover{background:#dc2626;border-color:#dc2626}
[data-theme="dark"] .btn-success{background:var(--success);color:#fff;border-color:var(--success)}
[data-theme="dark"] .btn-danger-ghost{background:#3f1d1d;color:#fecaca;border-color:#7f1d1d}
/* App Header — Dark-Island (dunkles Milchglas-Band, helle Schrift) */
[data-theme="dark"] .app-header{
  background:rgba(20,27,42,.72);
  border-color:rgba(255,255,255,.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 10px 30px -8px rgba(0,0,0,.6),
    0 2px 8px -2px rgba(0,0,0,.4),
    0 0 0 1px rgba(0,0,0,.4);
}
[data-theme="dark"] .app-nav{background:rgba(255,255,255,.05)}
/* Cards & Rows */
[data-theme="dark"] .doc-row{background:var(--card)}
/* Progress bar track */
[data-theme="dark"] .progress-bar{background:var(--card-hover)}
/* Modal */
[data-theme="dark"] .modal-box{background:var(--card)}
/* Checkbox circle */
[data-theme="dark"] .check-circle{background:var(--card)}
[data-theme="dark"] .activity-check input:checked + .check-circle{background:var(--accent);border-color:var(--accent)}
/* Pagination */
[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span{background:var(--card);color:var(--text-muted);border-color:var(--border)}
[data-theme="dark"] .pagination a:hover{background:var(--card-hover)}
[data-theme="dark"] .pagination .disabled{background:var(--bg)}
/* Tag */
[data-theme="dark"] .tag{background:var(--card-hover);color:var(--text-muted)}
/* Start page specific */
[data-theme="dark"] .activity-item{background:var(--card)}
[data-theme="dark"] .activity-item:hover{background:var(--card-hover)}
[data-theme="dark"] .activity-item.selected{background:var(--accent-muted)}
[data-theme="dark"] .activity-icon{background:var(--card-hover)}
[data-theme="dark"] .drop-zone{background:var(--card);border-color:var(--border-strong)}
[data-theme="dark"] .drop-zone:hover,[data-theme="dark"] .drop-zone.dragover{background:var(--accent-muted);border-color:var(--accent)}
[data-theme="dark"] .drop-zone p.dz-main{color:var(--text)}
[data-theme="dark"] .search-input{background:var(--card);color:var(--text);border-color:var(--border-strong)}
[data-theme="dark"] .search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
[data-theme="dark"] .empty-state-icon{background:var(--card-hover)}
[data-theme="dark"] .chip-neutral{background:var(--card-hover)}
[data-theme="dark"] .user-dropdown{box-shadow:0 12px 32px rgba(0,0,0,.55)}

/* ── Keyboard focus ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:focus:not(:focus-visible),
.activity-item:focus:not(:focus-visible){outline:none}

/* ── .hidden: Ersatz für inline style="display:none"
   Damit eine strikte style-src-CSP ohne 'unsafe-inline' möglich bleibt,
   versteckt .hidden Elemente via !important (überschreibt display:flex etc.). */
.hidden{display:none !important}

/* ── role="button"-Container: Divs/Spans, die als Buttons fungieren,
   bekommen einheitlichen Focus-Ring und Cursor-Hint. Pflicht bei Nutzung:
   tabindex="0" (oder "-1" wenn nicht tab-reachable gewollt), aria-pressed
   bzw. aria-expanded nach Zweck, und JS-Listener auf click + keydown
   (Enter/Space via delegation in _layout.html-Script). */
[role="button"]{cursor:pointer;user-select:none;-webkit-user-select:none}
[role="button"][aria-disabled="true"]{cursor:not-allowed;opacity:.55}
.activity-check input:focus-visible + .check-circle{
  box-shadow:0 0 0 3px var(--accent-muted);
}

/* ── Responsives Einklappen des Island-Headers ──
   Der Header darf bei KEINER Breite horizontal überlaufen. Statt die
   nowrap-Items zu stauchen, klappt der Inhalt stufenweise ein:
   Stufe 1 (≤1023px): Benutzer-Card-Label + Caret weg → nur Monogramm-Kreis
                       (spart ~150–200px; wichtig für lange Namen/Kanzleien).
   Stufe 2 (≤860px):  volle Segmented-Nav weg → Burger + Drawer übernehmen.
   (Die eigentliche kompakte Mobile-Optik kommt darunter im ≤640px-Block.) */

/* Stufe 1 — ab hier nur noch der Monogramm-Kreis in der Benutzer-Card. */
@media(max-width:1023px){
  .user-avatar-label,.user-avatar-caret{display:none}
  .user-avatar{padding:.2rem;gap:0}
  .user-avatar-badge{width:30px;height:30px;font-size:.7rem}
  .user-menu{margin-left:.25rem}
}

/* Stufe 2 — ab hier passt die volle Nav nicht mehr → Burger + Drawer.
   Empirisch: mit Badge-only-Card passt die volle Nav bis ~777px Viewport;
   860px lässt Puffer für längere Tool-/Nav-Beschriftungen. */
@media(max-width:860px){
  .app-nav{display:none}
  .app-header-sep{display:none}
  .burger-trigger{display:inline-flex;order:-1}
  /* Theme + Avatar rechtsbündig, da die zentrierende .app-nav nun fehlt. */
  .btn-theme{margin-left:auto}
}

/* ── Mobile (≤640px) ── */
@media(max-width:640px){
  /* iOS Zoom-Prevention bei Input-Fokus: font-size muss >= 16px sein */
  input[type="text"],input[type="password"],input[type="email"],
  input[type="search"],input[type="number"],input[type="tel"],
  input[type="url"],textarea,select{
    font-size:16px !important;
  }
  body{
    padding:env(safe-area-inset-top) max(0px,env(safe-area-inset-right)) max(3rem,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left));
  }
  /* Island bleibt eine kompakte Pille (Logo + Burger + Avatar), aber mit
     kleinen Seiten-/Oben-Abständen statt full-bleed.
     width:auto (statt der 100% aus der Basis-Regel), damit die seitlichen
     Margins die Breite definieren und NICHT zur 100%-Breite addieren —
     sonst ragt die Pille bei body-padding:0 (≤640) um 2×Margin raus. */
  .app-header{
    width:auto;
    margin:.4rem .6rem 1.5rem;
    max-width:none;
    padding:.4rem .5rem;
    gap:.4rem;
    top:.4rem;
  }
  .app-header-logo{width:26px;height:26px}
  .app-header-logo svg{width:14px;height:14px}
  .app-header-name{font-size:.82rem}
  /* Nav→Burger und Card→Badge sind bereits in den ≤860px/≤1023px-Blöcken
     erledigt; hier nur noch die kompakte Mobile-Pille feinjustieren.
     Burger sitzt links neben dem Logo (s. ≤860px, order:-1). */
  .user-avatar{padding:.18rem}
  /* Theme-Button bleibt rechtsbündig (margin-left:auto aus ≤860px). */
  .btn-theme{width:34px;height:34px;padding:0}
  .container{padding:0 1rem}
  .card{border-radius:var(--radius-sm);padding:1.1rem 1rem}
  h1{font-size:1.35rem}
  .subtitle{font-size:.85rem}
  .stats{grid-template-columns:1fr;gap:.5rem}
  .stat{flex-direction:row;text-align:left;gap:.75rem;padding:.75rem 1rem}
  .stat-icon{flex-shrink:0}
  .stat-num{font-size:1.25rem}
  .doc-header{flex-direction:column;gap:.75rem}
  /* Gestapelter Header (volle Breite) → Titel darf bis zu 2 Zeilen zeigen,
     danach Ellipsis. overflow-wrap:anywhere bricht überlange Token nur am
     Zeilenende statt mitten im Wort. */
  .doc-title-text{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    overflow-wrap:anywhere;
  }
  .header-actions{width:100%;flex-wrap:wrap}
  .header-actions .btn{width:100%;justify-content:center}
  .card-head{flex-direction:column;align-items:flex-start}
  .card-head-actions{width:100%;justify-content:flex-start}
  .pagination a,.pagination span{min-width:32px;height:32px;font-size:.78rem}
  .toast-container{left:1rem;right:1rem;bottom:1rem}
  .toast{max-width:none}
  .modal-box{width:calc(100% - 2rem);max-width:none;padding:1.2rem 1rem}
  .user-dropdown{right:-.25rem;min-width:200px}
}
@media(max-width:480px){
  /* Brand-Name weg → nur noch Logo + Burger + Theme + Badge. */
  .app-header-name{display:none}
}

/* ── Impersonation (im Avatar-Dropdown) ──
   Ring + Statuspunkt sitzen auf dem Initialen-Badge der Benutzer-Card. */
.user-avatar-impersonating{
  border-color:#f59e0b;
}
.user-avatar-impersonating .user-avatar-badge{
  box-shadow:0 0 0 2px #f59e0b,0 1px 2px rgba(16,24,40,.22);
}
.user-avatar-dot{
  position:absolute;
  bottom:-2px;
  right:-2px;
  width:10px;
  height:10px;
  background:#f59e0b;
  border:2px solid var(--card, #fff);
  border-radius:50%;
}
[data-theme="dark"] .user-avatar-dot{ border-color:var(--bg, #111); }
.user-dropdown-imp-tag{ color:#f59e0b; font-weight:600; }
.user-dropdown-imp-box{
  background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.4);
  border-radius:9px;
  margin:.35rem .3rem;
  padding:.55rem .7rem;
  font-size:.75rem;
}
.user-dropdown-imp-line{ margin-bottom:.45rem; color:var(--text-muted); }
.user-dropdown-imp-line strong{ color:var(--text); }
.user-dropdown-imp-form{ margin:0; }
.user-dropdown-imp-stop{
  width:100%;
  padding:.4rem .6rem;
  background:#f59e0b;
  color:#1a1205;
  border:none;
  border-radius:4px;
  font-size:.75rem;
  font-weight:600;
  cursor:pointer;
}
.user-dropdown-imp-stop:hover{ background:#e0880a; }
.user-dropdown-switch-list{ max-height:240px; overflow-y:auto; }
.user-dropdown-switch-form{ margin:0; display:block; }
.user-dropdown-switch-btn{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  font:inherit;
  font-size:.8rem;
  color:var(--text);
  padding:.45rem .6rem;
  border-radius:9px;
  display:flex;align-items:center;gap:.5rem;
  transition:background .12s;
}
.user-dropdown-switch-btn:hover{ background:#f5f7f9; }
[data-theme="dark"] .user-dropdown-switch-btn:hover{ background:var(--card-hover); }
/* Farbiges Monogramm-Badge — Farbe via --ua-c (kanzlei_display), sonst neutral. */
.user-dropdown-switch-badge{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:var(--ua-c,#475467);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.01em;
}
.user-dropdown-switch-badge--neutral{ background:#475467; }
.user-dropdown-switch-name{
  font-size:.78rem;font-weight:500;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-dropdown-separator{ border-top:1px solid var(--border); margin:.35rem .3rem; }

/* ── Zusammenfassungen (Bundle List) ── */
.bundle-suggestion-banner{
  border:1px solid #fbbf24;
  background:#fffbeb;
  padding:1rem;
  margin-bottom:1rem;
}
[data-theme="dark"] .bundle-suggestion-banner{
  background:var(--warning-muted);
  border-color:var(--warning);
}
.suggestion-header{ margin-bottom:.75rem; font-size:.85rem; }
.suggestion-list{ list-style:none; padding:0; margin:0; }
.suggestion-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 0; border-top:1px solid #fde68a;
  font-size:.875rem;
}
[data-theme="dark"] .suggestion-item{ border-top-color:rgba(251,191,36,.2); }
.suggestion-info{ display:flex; gap:.5rem; align-items:baseline; flex:1; }
.suggestion-count{ color:var(--text-muted); font-size:.78rem; margin-left:auto; }
.suggestion-form{ flex-shrink:0; margin-left:1rem; }

.bundle-list{ list-style:none; padding:0; margin:0; }
.bundle-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem .85rem; border-bottom:1px solid var(--border);
}
.bundle-item:last-child{ border-bottom:none; }
.bundle-info{ flex:1; text-decoration:none; color:inherit; }
.bundle-info:hover .bundle-name{ color:var(--accent); }
.bundle-name{ font-size:.875rem; font-weight:500; color:var(--text); }
.bundle-meta{
  display:flex; gap:.5rem; align-items:center; margin-top:.2rem;
  font-size:.78rem; color:var(--text-muted);
}
.bundle-chip{
  display:inline-block; padding:.15rem .5rem; border-radius:999px;
  font-size:.7rem; font-weight:500;
}
.bundle-chip-loss{ background:#fee2e2; color:#991b1b; }
[data-theme="dark"] .bundle-chip-loss{ background:rgba(248,113,113,.12); color:#f87171; }
.bundle-chip-partial{ background:#fef3c7; color:#92400e; }
[data-theme="dark"] .bundle-chip-partial{ background:var(--warning-muted); color:var(--warning); }
.bundle-delete-trigger{ flex-shrink:0; margin-left:.5rem; }
.empty-state{ text-align:center; color:var(--text-subtle); }
.empty-state-hint{ text-align:center; color:var(--text-subtle); font-size:.85rem; margin-top:.4rem; }

/* ── Zusammenfassung Detail ── */
.kpi-section{ margin-top:1rem; }
.kpi-section:first-of-type{ margin-top:.5rem; }
.kpi-section-title{
  font-size:.7rem; font-weight:600; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em;
  padding:.35rem 0; margin-bottom:.1rem;
  border-bottom:1px solid var(--border);
}
.kpi-section-hint{
  font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--text-subtle); font-size:.68rem;
}
.kpi-table{ width:100%; border-collapse:collapse; font-size:.875rem; }
.kpi-table td{ padding:.45rem .75rem; border-bottom:1px solid var(--border); }
.kpi-table tr:last-child td{ border-bottom:none; }
.kpi-table td:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kpi-highlight td{ background:var(--card-hover); font-weight:600; }
.kpi-gesamt{
  margin-top:1.25rem; padding:.9rem 1rem;
  display:flex; justify-content:space-between; align-items:center;
  background:var(--accent-muted); color:var(--accent);
  border-radius:var(--radius-sm);
  font-size:1rem; font-weight:700;
}
.kpi-gesamt > span:last-child{ font-variant-numeric:tabular-nums; }
/* Gewinn-Fall (Gesamtschaden < 0): grün + Wort „GESAMTGEWINN" statt einen
   Gewinn fälschlich als roten/blauen „Schaden" auszuweisen (analog Einzelansicht). */
.kpi-gesamt-gewinn{ background:color-mix(in srgb, var(--success) 12%, var(--card)); color:var(--success); }

.bundle-kpi-card{ margin-bottom:1rem; }
.bundle-detail-header{ display:flex; justify-content:space-between; align-items:center; }
.bundle-detail-actions{ display:flex; gap:.5rem; }
.bundle-detail-delete{ margin-top:1.5rem; text-align:right; }

.bundle-member-list{ list-style:none; padding:0; margin:0; font-size:.875rem; }
.bundle-member-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .75rem; border-bottom:1px solid var(--border);
}
.bundle-member-item:last-child{ border-bottom:none; }
.bundle-member-item.is-deleted .bundle-member-link{ opacity:.5; text-decoration:line-through; }
.bundle-member-link{ flex:1; color:var(--accent); text-decoration:none; }
.bundle-member-link:hover{ text-decoration:underline; }
.bundle-chip-deleted{ background:#f3f4f6; color:#6b7280; }
[data-theme="dark"] .bundle-chip-deleted{ background:var(--card-hover); color:var(--text-subtle); }
[data-theme="dark"] .kpi-highlight td{ background:var(--card-hover); }

/* ========================================================
 * Standalone-Tools (Migration, Limit, Currency)
 * Shared Layout für Upload/Map/Wait/Result-Stages.
 * Wird mit Macros aus _tool_macros.html komponiert.
 * ======================================================== */

.tool-hero{margin:0 0 1.25rem 0}
.tool-hero h1{margin:0 0 .25rem 0;font-size:1.25rem;font-weight:600}
.tool-hero p{margin:0;font-size:.85rem;color:var(--text-muted);line-height:1.45;max-width:680px}

.tool-status-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.25rem .65rem;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
}
.tool-status-pill.is-success{background:#ecfdf5;color:#065f46;border:1px solid #10b981}
.tool-status-pill.is-error{background:#fee;color:#900;border:1px solid #fbb}
.tool-status-pill.is-cancelled{background:#fff5e0;color:#7c4a00;border:1px solid #d97706}

.tool-summary{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.25rem 1.5rem;margin-bottom:1.25rem;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(180px,1fr));gap:1rem;
}
.tool-summary-cell{display:flex;flex-direction:column;gap:.2rem}
.tool-summary-label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.tool-summary-value{font-size:1.25rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.tool-summary-value.danger{color:#dc2626}
.tool-summary-value.accent{color:var(--accent)}

.tool-download-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem;text-align:center;
}
.tool-download-card h3{margin:0 0 .5rem 0;font-size:.95rem;font-weight:600;color:var(--text)}
.tool-download-card p{margin:0 0 1rem 0;font-size:.82rem;color:var(--text-muted)}
.tool-download-card .tool-filename{font-family:var(--font-mono, ui-monospace, monospace);color:var(--text);word-break:break-all}

.tool-btn-primary{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.85rem;background:var(--accent);color:#fff;
  border:none;border-radius:8px;font-size:1rem;font-weight:600;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:filter .12s, transform .04s;
}
.tool-btn-primary:hover{filter:brightness(1.05)}
.tool-btn-primary:active{transform:translateY(1px)}

/* Sekundär-Button für die Download-Card (z.B. „Im Manual-Editor weitermachen"). */
.tool-btn-secondary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.4rem;background:var(--card);color:var(--text);
  border:1px solid var(--border-strong, var(--border));
  border-radius:8px;font-size:.95rem;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:background .12s, border-color .12s, transform .04s;
}
.tool-btn-secondary:hover{
  background:var(--card-hover);
  border-color:var(--accent);
}
.tool-btn-secondary:active{transform:translateY(1px)}

/* „Glüh-Aura" für Demo-Einstiegs-Buttons (Beispiel-hochladen auf Startseite
   + Werkzeug-Seiten): atmender Akzent-Schein wie der Live-Demo-Button der
   Login-Seite. Light kräftig (Doppel-Schatten: Kern + Halo — auf hellem
   Grund verpufft ein weicher Schein sonst, Jan 2026-07-17), Dark dezenter. */
.demo-glow-btn{
  animation:demo-btn-glow 2.6s ease-in-out infinite;
  --dg-core:color-mix(in srgb,var(--accent) 80%,transparent);
  --dg-halo:color-mix(in srgb,var(--accent) 38%,transparent);
}
[data-theme="dark"] .demo-glow-btn{
  --dg-core:color-mix(in srgb,var(--accent) 50%,transparent);
  --dg-halo:color-mix(in srgb,var(--accent) 20%,transparent);
}
@keyframes demo-btn-glow{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 13px 2px var(--dg-core),0 0 34px 9px var(--dg-halo);border-color:color-mix(in srgb,var(--accent) 75%,var(--border-strong))}
}
@media (prefers-reduced-motion: reduce){ .demo-glow-btn{animation:none} }

/* tool-spin: gemeinsame Spinner-Rotation (Wait-Seiten .tool-progress-spinner).
   Das frühere .tool-loading-overlay (Upload-Statuskarte) ist entfernt —
   Uploads zeigen ihren Status inline in der Karte (tool_inline_upload_status
   bzw. der AJAX-Fortschritt des Migrations-Tools, 2026-07-17/18). */
@keyframes tool-spin{to{transform:rotate(360deg)}}

/* Progress-Card — Wait-Stage */
.tool-progress-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem 1.75rem;text-align:center;max-width:560px;margin:0 auto;
}
.tool-progress-spinner{
  width:48px;height:48px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--accent);
  animation:tool-spin 0.8s linear infinite;
  margin:0 auto 1rem;
}
.tool-progress-title{margin:0 0 .35rem 0;font-size:1.05rem;font-weight:600}
.tool-progress-status{font-size:.85rem;color:var(--text-muted);margin:0 0 1.25rem 0;min-height:1.2em}
.tool-progress-bar{
  height:6px;background:var(--border);border-radius:999px;overflow:hidden;margin-bottom:1rem;
}
.tool-progress-bar-fill{
  height:100%;background:var(--accent);
  transition:width .25s ease-out;
}
.tool-progress-hint{font-size:.78rem;color:var(--text-subtle);margin:0 0 1rem 0}

/* Drop-Zone — Upload-Stage */
.tool-drop-zone{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius);
  padding:.9rem 1.5rem;
  text-align:center;
  background:var(--card-hover);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.tool-drop-zone.dragover, .tool-drop-zone:hover{
  border-color:var(--accent);
  background:var(--accent-muted);
  box-shadow:0 0 0 4px rgba(13,148,136,.08);
  border-style:solid;
}
.tool-drop-zone .dz-icon{
  width:26px;height:26px;
  margin:0 auto .3rem;
  color:var(--text-subtle);
  transition:color .2s ease, transform .2s ease;
  display:block;
}
.tool-drop-zone:hover .dz-icon, .tool-drop-zone.dragover .dz-icon{
  color:var(--accent);
  transform:translateY(-2px);
}
.tool-drop-zone p.dz-main{
  font-size:.88rem;color:var(--text);margin-bottom:.15rem;font-weight:600;
}
.tool-drop-zone p.dz-or{
  font-size:.75rem;color:var(--text-subtle);margin-bottom:.45rem;
}
.tool-drop-zone .dz-buttons{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.tool-formats-hint{font-size:.75rem;color:var(--text-subtle);margin-top:1rem;text-align:left}
.tool-file-input{display:none}

/* Error-Banner für Upload-Pages */
.tool-error{
  background:#fee;border:1px solid #fbb;border-radius:8px;
  padding:.75rem 1rem;color:#900;font-size:.88rem;
  margin-bottom:1rem;display:flex;gap:.5rem;align-items:flex-start;
}

/* Skip-Link: erst bei Tastatur-Fokus sichtbar (a11y, WCAG 2.4.1). */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  z-index:100000;
}
.skip-link:focus{
  left:1rem;top:1rem;width:auto;height:auto;overflow:visible;
  background:var(--accent,#0d9488);color:#fff;padding:.6rem 1rem;
  border-radius:8px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2);
}

/* Gemeinsames, poliertes Passwort-Feld (pw_field-Macro in _tool_macros.html).
   EINE Quelle für alle Passwort-Eingaben (Modal + Tool-Seiten). */
.pw-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem}
.pw-field label{font-size:.82rem;color:var(--text-muted);font-weight:500}
.pw-field input[type="password"]{padding:.55rem .7rem;font-size:.9rem;border:1px solid var(--border);border-radius:var(--radius-sm,6px);background:var(--card-hover);color:var(--text);width:100%;box-sizing:border-box}
.pw-field input[type="password"]:focus{outline:none;border-color:var(--accent);background:var(--card)}
.pw-actions{display:flex;gap:.65rem;justify-content:flex-end;flex-wrap:wrap;margin-top:.25rem}