:root {
  --color-rose: #BB939c;
  --color-rose-light: #EBD9DE;
  --color-rose-dark: #87686f;
  --color-gold: #c99e67;
  --color-gold-light: #e3ccaf;
  --color-cream: #fdf7f1;
  --bg-page: #fdf7f1;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f5ede5;
  --bg-primary: #8a606a;
  --bg-primary-hover: #6f4e57;
  --bg-button: #EBD9DE;
  --bg-button-hover: #ffffff;
  --text-primary: #3d3d3d;
  --text-secondary: #666666;
  --text-muted: #666666;
  --text-heading: #87686f;
  --text-on-primary: #ffffff;
  --text-link: #87686f;
  --text-link-hover: #87686f;
  --border-default: #e0d5cc;
  --border-input: #c99e67;
  --border-focus: #BB939c;
  --color-success: #6b8e6b; --color-success-light: #c9ddc9; --color-success-dark: #2d4a2d;
  --color-danger: #b55b5b; --color-danger-light: #efcaca; --color-danger-dark: #8c3f3f;
  --color-info-bg: #e1ecf4; --color-info-text: #205a8c; --color-info-border: #a0c4e0;
  --color-error-bg: #efcaca; --color-error-text: #8c3f3f; --color-error-border: #b55b5b;
  --vr-bg: #1a1a1a; --vr-bg-tile: #2a2a2a; --vr-bg-controls: rgba(0,0,0,0.6); --vr-bg-btn-hover: rgba(255,255,255,0.1);
  --vr-text: #ffffff; --vr-text-dim: #aaaaaa;
  --vr-icon-active: #6b8e6b; --vr-icon-muted: #b55b5b;
  --vr-speaker: #c99e67; --vr-accent: #BB939c;
  --vr-quality-good: #6b8e6b; --vr-quality-warn: #c99e67; --vr-quality-bad: #b55b5b;
  --danger: var(--color-danger); --vr-danger: var(--vr-quality-bad); --vr-text-label: var(--vr-text-dim);
  --color-border-light: var(--border-default); --color-border-medium: var(--border-default); --border: var(--border-default);
  --color-primary: var(--bg-primary); --color-secondary: var(--color-rose);
  --color-text-primary: var(--text-primary); --color-text-white: #ffffff;
  --color-bg-primary: var(--bg-primary); --color-bg-dark: var(--vr-bg);
  --space-1: var(--space-xs); --space-2: var(--space-sm); --space-3: var(--space-md); --space-4: var(--space-lg);
  --font-family-base: var(--font-sans); --font-size-md: var(--font-size-base);
  --transition-fast: 150ms ease;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --font-sans: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --line-height: 1.625;
  --max-width: 72rem; --max-width-reading: 42rem; --touch-target-min: 44px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --transition: 0.2s ease-in-out;
  --surface-2: var(--bg-surface-alt);
  --accent: var(--bg-primary);
  --info-text: #2980b9; --success-strong: #27ae60; --info-bg: #e3f2fd; --schreiben-bg: #ffebee; --event-bg: #f3e5f5; --extern-bg: #fff3e0; --success-bg: #e8f5e9; --success-fg: #1b5e20; --success-border: #2e7d32; --warn-bg: #fff8e1; --warn-fg: #6b4f00; --warn-border: #f9a825; --fail-bg: #fdecea; --fail-fg: #7f1d1d; --fail-border: #c62828; --pool-default-bg: #f5f5f7; --ebene-l0: #c0392b; --ebene-l1: #d68910; --ebene-l2: #2980b9; --ebene-l3: #717d7e; --ebene-l4: #5d6d7e;
  color-scheme: light dark;
}

html[data-theme="dark"] {
    --bg-page: #1a1518; --bg-surface: #2a2226; --bg-surface-alt: #342a2e; --bg-primary-hover: #d4adb5;
    --bg-button: #3d2f33; --bg-button-hover: #4d3f43;
    --text-primary: #e8e0e2; --text-secondary: #bdb0b4; --text-muted: #8a7d81;
    --text-heading: #d4adb5; --text-on-primary: #1a1518;
    --text-link: #d4adb5; --text-link-hover: #e8c5cc;
    --border-default: #4d3f43; --border-input: #8a7d81; --border-focus: #d4adb5;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2); --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --color-success-light: #3e5c3e; --color-danger-light: #5c3e3e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #1a1518;
    --bg-surface: #2a2226;
    --bg-surface-alt: #342a2e;
    --bg-primary-hover: #d4adb5;
    --bg-button: #3d2f33;
    --bg-button-hover: #4d3f43;
    --text-primary: #e8e0e2;
    --text-secondary: #bdb0b4;
    --text-muted: #8a7d81;
    --text-heading: #d4adb5;
    --text-on-primary: #1a1518;
    --text-link: #d4adb5;
    --text-link-hover: #e8c5cc;
    --border-default: #4d3f43;
    --border-input: #8a7d81;
    --border-focus: #d4adb5;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --color-success-light: #3e5c3e; --color-danger-light: #5c3e3e;
  }
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus, #8a5260);
  outline-offset: 2px;
}