@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2") format("woff2");unicode-range:U+0100-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/inter-latin-wght-normal-Dx4kXJAl.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Stimmwerk D0 · einzige Quelle für Rollen, Größen und Ebenen. Inter liegt lokal gebündelt vor. */
:root {
  --neutral-0: #ffffff;
  --neutral-1: #fcfbf8;
  --neutral-2: #f5f3ef;
  --neutral-3: #eeebe5;
  --neutral-4: #e2ddd6;
  --neutral-5: #c7c0b7;
  --neutral-6: #969087;
  --neutral-7: #706a63;
  --neutral-8: #625c55;
  --neutral-9: #423c36;
  --neutral-10: #26221e;
  --color-accent: #3156bf;
  --color-accent-hover: #2748a3;
  --color-accent-pressed: #203d8b;
  --color-ai: #7651b5;
  --color-success: #247146;
  --color-warning: #9c500d;
  --color-error: #bd3443;
  --color-info: #3156bf;
  /* Weiße Initialen bleiben auf jeder Stimmenfarbe mit AA-Kontrast lesbar. */
  --color-voice-blue: var(--color-accent);
  --color-voice-amber: var(--color-warning);
  --color-voice-teal: #24716b;
  --color-voice-red: var(--color-error);
  --color-voice-green: var(--color-success);
  --color-voice-graphite: var(--neutral-8);
  --color-voice-foreground: var(--neutral-0);
  --status-success-surface: #edf4ef;
  --status-warning-surface: #f7eee6;
  --status-info-surface: #edf0fa;
  --color-selection: #e9eefb;
  --color-hover: #f0ede7;
  --color-pressed: #e5e0d8;
  --color-focus: var(--color-accent);
  --color-focus-soft: color-mix(in srgb, var(--color-focus) 22%, transparent);
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --size-control-sm: 28px;
  --size-control-md: 32px;
  --size-control-lg: 40px;
  --size-icon-sm: 14px;
  --size-icon-md: 16px;
  --size-icon-lg: 20px;
  --size-avatar-sm: 28px;
  --size-avatar-md: 40px;
  --size-avatar-lg: 64px;
  --size-switch-width: 32px;
  --size-switch-height: 20px;
  --size-switch-thumb: 16px;
  --size-checkbox: 16px;
  --size-progress: 4px;
  --size-spinner: 16px;
  --size-row: 48px;
  --size-art-empty: 120px;
  --size-art-hero: 180px;
  --size-dialog: 560px;
  --size-picker-grid: 340px;
  --size-sheet: 480px;
  --size-toast: 320px;
  --size-tooltip-max: 280px;
  --size-menu-min: 180px;
  --size-sidebar: 224px;
  --width-hairline: 1px;
  --width-focus: 2px;
  --width-ring: 3px;
  --opacity-disabled: .48;
  --type-display-size: 32px;
  --type-display-line: 40px;
  --type-display-weight: 700;
  --type-display-track: -.032em;
  --type-h1-size: 24px;
  --type-h1-line: 32px;
  --type-h1-weight: 700;
  --type-h1-track: -.024em;
  --type-h2-size: 20px;
  --type-h2-line: 28px;
  --type-h2-weight: 600;
  --type-h2-track: -.018em;
  --type-h3-size: 16px;
  --type-h3-line: 24px;
  --type-h3-weight: 600;
  --type-h3-track: -.012em;
  --type-editor-size: 14px;
  --type-editor-line: 20px;
  --type-reading-size: 17px;
  --type-reading-line: 28px;
  --type-reading-weight: 400;
  --type-reading-track: -.008em;
  --type-body-size: 13px;
  --type-body-line: 20px;
  --type-body-weight: 400;
  --type-body-track: -.006em;
  --type-small-size: 12px;
  --type-small-line: 16px;
  --type-small-weight: 400;
  --type-small-track: 0em;
  --type-label-size: 12px;
  --type-label-line: 16px;
  --type-label-weight: 500;
  --type-label-track: 0em;
  --type-caption-size: 11px;
  --type-caption-line: 16px;
  --type-caption-weight: 400;
  --type-caption-track: .006em;
  --type-mono-size: 12px;
  --type-mono-line: 20px;
  --type-mono-weight: 400;
  --type-mono-track: 0em;
  --type-number-size: 13px;
  --type-number-line: 20px;
  --type-number-weight: 500;
  --type-number-track: -.006em;
  --line-display: var(--type-display-line);
  --line-body: var(--type-body-line);
  --line-small: var(--type-small-line);
  --line-caption: var(--type-caption-line);
  --duration-fast: 120ms;
  --duration-normal: 160ms;
  --duration-enter: 220ms;
  --duration-slow: 320ms;
  --duration-spin: 800ms;
  --duration-progress: 1600ms;
  --duration-skeleton: 1600ms;
  --duration-toast: 4500ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --z-base: 0;
  --z-sticky: 10;
  --z-popover: 100;
  --z-dialog: 200;
  --z-tooltip: 300;
  --z-toast: 400;
  color-scheme: light;
  /* Inter Variable liegt gebündelt bei (@fontsource-variable/inter, OFL) – offline in Electron */
  --font: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  --font-display: var(--font);
  --mono: 'SF Mono', ui-monospace, Menlo, monospace;

  /* ---- Typografie (docs/DESIGN.md §2) ---- */
  --fs-display: var(--type-display-size);
  --fs-title: var(--type-h1-size);
  --fs-title-2: var(--type-h2-size);
  --fs-headline: var(--type-h3-size);
  --fs-body: var(--type-body-size);
  --fs-callout: var(--type-small-size);
  --fs-caption: var(--type-caption-size);
  --fs-reading: 17px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --track-display: -0.03em;
  --track-title: -0.024em;
  --track-title-2: -0.016em;
  --track-headline: -0.012em;
  --track-body: -0.006em;
  --track-caption: 0;

  /* ---- Abstände (4/8-px-Raster, §3) ---- */
  --sp-1: var(--space-4);
  --sp-2: var(--space-8);
  --sp-3: var(--space-12);
  --sp-4: var(--space-16);
  --sp-5: var(--space-20);
  --sp-6: var(--space-24);
  --sp-8: var(--space-32);
  --sp-10: var(--space-40);
  --sp-12: var(--space-48);
  --sp-16: var(--space-64);
  --page-x: 32px;
  --content-max: 880px;
  --content-wide: 1200px;

  /* ---- Radien (§5) – shadcn-nah: Steuerelemente 8 px, Karten 12 px, Sheets 16 px ---- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 14px;
  --r-3xl: 16px;
  --r-pill: 999px;
  --radius: var(--r-md);

  /* ---- Steuerelement-Höhen (4-px-Raster) ---- */
  --h-control: var(--size-control-md);
  --h-control-sm: var(--size-control-sm);
  --h-control-lg: var(--size-control-lg);

  /* ---- Bewegung (§6): 120–180 ms, weich ---- */
  --dur-1: var(--duration-fast);
  --dur-2: var(--duration-normal);
  --dur-3: var(--duration-enter);
  --dur-4: var(--duration-slow);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: var(--ease-standard);
  --dur: var(--duration-normal);

  /* ---- Fenster ---- */
  --sidebar-w: var(--size-sidebar);
  --rail-w: 52px;
  --toolbar-h: 52px;
  /* Ampel (Electron, x 20–72 px) – Inhalte der Titelleiste beginnen rechts davon */
  --traffic-w: 88px;

  /* ---- Akzent: ein gesättigtes Blau (AA mit weißem Text), sparsam ---- */
  --accent: var(--color-accent);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-text: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-pressed: var(--color-accent-pressed);
  --on-accent: #fff;
  --focus: var(--color-focus);
  /* Fokusring wie shadcn: Knöpfe 2 px Outline mit 2 px Abstand (:focus-visible); Felder 1 px Akzentrahmen + 3 px weicher Ring */
  --ring: 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-glow: none;

  /* ---- Flächen: Zinc-Neutrale ---- */
  --bg: var(--neutral-1);
  --bg-elevated: var(--neutral-0);
  --sidebar-bg: var(--neutral-2);
  --ink: 9, 9, 11;
  --text: var(--neutral-10);
  --text-2: var(--neutral-8);
  --text-3: var(--neutral-7);
  --text-4: var(--neutral-5);
  --sep: var(--neutral-4);
  --sep-strong: var(--neutral-5);
  --hover: var(--color-hover);
  --fill: var(--neutral-2);
  --fill-2: var(--neutral-3);
  --fill-3: var(--neutral-4);
  --sel: var(--color-selection);
  --group: var(--neutral-0);
  --track: var(--neutral-4);
  --control: var(--neutral-0);
  --control-hover: var(--neutral-1);
  --control-pressed: var(--color-pressed);
  --control-shadow: 0 0 0 1px var(--sep), 0 1px 2px rgba(var(--ink), 0.04);
  --shadow-control: var(--control-shadow);
  --shadow-raised: 0 0 0 1px var(--sep), 0 1px 2px rgba(var(--ink), 0.06);
  --shadow-card: 0 0 0 1px var(--sep), 0 1px 2px rgba(var(--ink), 0.03);
  --shadow-card-hover: 0 0 0 1px var(--sep-strong), 0 2px 6px rgba(var(--ink), 0.06);
  --field: var(--neutral-0);
  --field-border: var(--neutral-6);
  --seg-track: var(--neutral-2);
  --seg-active: var(--neutral-0);
  --switch-off: var(--neutral-6);
  --material: rgba(255, 255, 255, 0.96);
  --bar-material: rgba(250, 250, 250, 0.88);
  --popover-shadow: 0 0 0 1px var(--sep), 0 8px 24px -8px rgba(var(--ink), 0.16), 0 2px 6px rgba(var(--ink), 0.04);
  --shadow-popover: var(--popover-shadow);
  --shadow-sheet: 0 0 0 1px var(--sep), 0 24px 56px -16px rgba(var(--ink), 0.24), 0 4px 12px rgba(var(--ink), 0.05);
  --scrim: rgba(var(--ink), 0.3);
  --skeleton: var(--neutral-3);
  --skeleton-shine: rgba(255, 255, 255, 0.7);

  /* Signalfarben, mit Kontrast auf Weiß */
  --red: var(--color-error);
  --orange: var(--color-warning);
  --orange-text: var(--color-warning);
  --green: var(--color-success);
  --yellow: #eab308;

  /* Reihenfarben (Diagramme, Sprecher) – feste Palette */
  --series-1: #2563eb;
  --series-2: #f59e0b;
  --series-3: #0d9488;
  --series-4: #e11d48;
  --series-5: #16a34a;
  --series-6: #eab308;
  --series-7: #a16207;
  --series-8: #71717a;

  /* Pastell-Palette – nur für Illustrationen (components/Illustrations.tsx), nicht für UI-Flächen */
  --tint-sky: #dbeafe;
  --tint-peach: #ffedd5;
  --tint-mint: #d1fae5;
  --tint-lilac: #ede9fe;
  --tint-butter: #fef3c7;
  --tint-rose: #ffe4e6;

  /* ---- Redesign-Tokens (docs/UI_REDESIGN.md §2.3, components/core) ---- */
  --surface-1: var(--neutral-1); /* Inspector-Hintergrund, eine Stufe unter --bg-elevated */
  --surface-2: var(--neutral-2); /* Gruppen im Inspector („Karte ohne Rahmen“), Listen im Popover */
  --line: var(--neutral-3); /* Haarlinie innerhalb von Gruppen, leiser als --sep */
  --ai: var(--color-ai); /* einzige Signalfarbe für KI: Funkeln-Icon, aktiver KI-Schalter – nie als Fläche */
  --ai-soft: color-mix(in srgb, var(--ai) 10%, transparent);
  --warn-soft: color-mix(in srgb, var(--orange) 10%, transparent); /* Vorschlagszeilen */
  --ok-soft: color-mix(in srgb, var(--green) 10%, transparent); /* „Fertig“-Zeilen */  --ilu-ink: var(--neutral-9);
  --ilu-paper: var(--neutral-0);
  --ilu-paper-2: var(--neutral-2);
  --ilu-sky-2: #c3d7f5;
  --ilu-peach-2: #f2ccb0;
  --ilu-mint-2: #b8dfcb;
  --ilu-lilac-2: #d5caed;
  --ilu-butter-2: #ebd79e;
  --ilu-accent-2: #7392dd;
  --ilu-shadow: color-mix(in srgb, var(--neutral-10) 12%, transparent);
  --ilu-stroke: 1.25;
  --ilu-roll-step: 10px;
  --ilu-roll-duration: 1600ms;
  --ilu-spark-duration: 2200ms;
  --ilu-spark-delay: 800ms;
  --ilu-pattern-dot: .8px;
  --ilu-art-mobile: 150px;
}


/* Legacy-Namen sind Aliase; weitere Pakete können schrittweise auf Rollen umstellen. */


/* Dunkle Variante – nur auf Wunsch (`<html data-theme="dark">`), nie automatisch vom System */
:root[data-theme='dark'] {
  color-scheme: dark;
  --accent: #3b82f6;
  --accent-text: #93c5fd;
  --accent-hover: #60a5fa;
  --accent-pressed: #2563eb;
  --bg: #09090b;
  --bg-elevated: #18181b;
  --sidebar-bg: #0f0f11;
  --text: #fafafa;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --text-4: #3f3f46;
  --sep: #27272a;
  --sep-strong: #3f3f46;
  --line: #1f1f23;
  --hover: rgba(255, 255, 255, 0.04);
  --fill: rgba(255, 255, 255, 0.07);
  --fill-2: rgba(255, 255, 255, 0.11);
  --fill-3: rgba(255, 255, 255, 0.15);
  --sel: rgba(255, 255, 255, 0.1);
  --group: #26262b;
  --track: rgba(255, 255, 255, 0.14);
  --control: rgba(255, 255, 255, 0.1);
  --control-hover: rgba(255, 255, 255, 0.14);
  --control-pressed: rgba(255, 255, 255, 0.2);
  --control-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 0 0 0.5px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: var(--shadow-card);
  --field: rgba(255, 255, 255, 0.055);
  --field-border: rgba(255, 255, 255, 0.13);
  --seg-track: rgba(255, 255, 255, 0.08);
  --seg-active: rgba(255, 255, 255, 0.2);
  --switch-off: rgba(255, 255, 255, 0.16);
  --material: rgba(38, 38, 43, 0.9);
  --bar-material: rgba(27, 27, 31, 0.86);
  --popover-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 48px -14px rgba(0, 0, 0, 0.7);
  --shadow-sheet: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 32px 80px -16px rgba(0, 0, 0, 0.75);
  --scrim: rgba(0, 0, 0, 0.45);
  --skeleton: rgba(255, 255, 255, 0.07);
  --skeleton-shine: rgba(255, 255, 255, 0.06);
  --red: #ff6b6b;
  --orange: #ffb340;
  --orange-text: #ffb340;
  --green: #3ddc84;
  --yellow: #ffd60a;
  --tint-sky: #22304f;
  --tint-peach: #4a3327;
  --tint-mint: #1f3d31;
  --tint-lilac: #312b52;
  --tint-butter: #4a3f1f;
  --tint-rose: #4a2733;
  --surface-1: #0f0f11;
  --surface-2: #18181b;
  --ai: #a28cff;
  --ai-soft: color-mix(in srgb, var(--ai) 16%, transparent);
  --warn-soft: color-mix(in srgb, var(--orange) 16%, transparent);
  --ok-soft: color-mix(in srgb, var(--green) 16%, transparent);
}

@media (min-width: 1600px) {
  :root {
    --page-x: 40px;
  }
}

/* Weniger Transparenz / mehr Kontrast (Bedienungshilfen) */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --material: var(--bg-elevated);
    --bar-material: var(--bg);
  }
}
@media (prefers-contrast: more) {
  :root {
    --sep: var(--sep-strong);
    --text-2: color-mix(in srgb, var(--text) 78%, transparent);
    --text-3: color-mix(in srgb, var(--text) 55%, transparent);
  }
}

:root{--d9-login-logo:url("/assets/stimmwerk-explain-logo-1Ben3Z9j.png");}
/* Existing lg-* selectors are the unchanged server template's compatibility hooks. */
*, *::before, *::after { box-sizing:border-box; }
.lg-body { margin:0; min-height:100dvh; display:grid; align-items:center; justify-items:center; padding:var(--space-40) var(--space-16); background:var(--surface-2); color:var(--text); font:var(--type-body-weight) var(--type-body-size)/var(--type-body-line) var(--font); -webkit-font-smoothing:antialiased; }
.lg-card { width:100%; max-width:var(--size-sheet); padding:var(--space-40); border:var(--width-hairline) solid var(--sep); border-radius:var(--r-3xl); background:var(--bg-elevated); box-shadow:var(--shadow-card); }
.lg-brand { display:flex; align-items:center; gap:var(--space-12); margin:0 0 var(--space-32); font-size:var(--type-h3-size); line-height:var(--type-h3-line); font-weight:var(--type-h3-weight); letter-spacing:var(--type-h3-track); }
.lg-brand::before { content:""; flex:none; width:var(--size-avatar-md); height:var(--size-avatar-md); background:var(--d9-login-logo) center/contain no-repeat; }
.lg-title { margin:0 0 var(--space-12); font-size:var(--type-h1-size); line-height:var(--type-h1-line); font-weight:var(--type-h1-weight); letter-spacing:var(--type-h1-track); text-wrap:balance; }
.lg-intro { margin:0 0 var(--space-32); color:var(--text-2); text-wrap:pretty; }
.lg-form { display:grid; gap:var(--space-12); }
.lg-label { color:var(--text); font-size:var(--type-label-size); line-height:var(--type-label-line); font-weight:var(--type-label-weight); }
.lg-input { width:100%; min-height:var(--size-control-lg); padding:var(--space-8) var(--space-12); border:var(--width-hairline) solid var(--field-border); border-radius:var(--r-md); background:var(--bg-elevated); color:var(--text); font:inherit; transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.lg-input:focus-visible { outline:var(--width-focus) solid var(--focus); outline-offset:var(--space-2); border-color:var(--accent); }
.lg-button { display:flex; align-items:center; justify-content:center; gap:var(--space-8); width:100%; min-height:var(--size-control-lg); margin-top:var(--space-4); padding:var(--space-8) var(--space-12); border:var(--width-hairline) solid transparent; border-radius:var(--r-md); background:var(--accent); color:var(--neutral-0); font:var(--type-label-weight) var(--type-body-size)/var(--type-body-line) var(--font); cursor:pointer; transition:background-color var(--duration-fast) var(--ease-standard); }
.lg-button:hover:not(:disabled) { background:var(--color-accent-hover); }
.lg-button:active:not(:disabled) { background:var(--color-accent-pressed); }
.lg-button:focus-visible { outline:var(--width-focus) solid var(--focus); outline-offset:var(--space-4); }
.lg-button:disabled { opacity:var(--opacity-disabled); cursor:wait; }
.lg-button:disabled::after { content:""; flex:none; width:var(--size-icon-sm); height:var(--size-icon-sm); border:var(--width-focus) solid currentColor; border-right-color:transparent; border-radius:var(--r-pill); animation:d9-login-spin var(--duration-spin) linear infinite; }
.lg-message { margin:var(--space-20) 0 0; color:var(--text); font-size:var(--type-small-size); line-height:var(--type-small-line); text-wrap:pretty; }
.lg-message:empty { margin:0; }
.lg-message:not(:empty) { padding:var(--space-12); border:var(--width-hairline) solid var(--line); border-radius:var(--r-md); background:var(--surface-2); }
.lg-help { margin:var(--space-24) 0 0; padding-top:var(--space-24); border-top:var(--width-hairline) solid var(--line); color:var(--text-2); font-size:var(--type-small-size); line-height:var(--type-small-line); text-wrap:pretty; }
@keyframes d9-login-spin { to { transform:rotate(1turn); } }
@media (max-width:600px) { .lg-body { padding:var(--space-24) var(--space-16); } .lg-card { padding:var(--space-24); } .lg-brand { margin-bottom:var(--space-24); } }
@media (prefers-reduced-motion:reduce) { .lg-input, .lg-button { transition:none; } .lg-button:disabled::after { animation:none; } }