/* Versus CI — generated from tokens.json */

@font-face{font-family:'IBM Plex Sans Variable';src:url('fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Variable';src:url('fonts/ibm-plex-sans-latin-wght-italic.woff2') format('woff2');font-weight:100 700;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cinzel Variable';src:url('fonts/cinzel-latin-wght-normal.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #0e1210;
  --bg-surface: #141a17;
  --bg-elevated: #1c2420;
  --bg-card: #141a17;
  --bg-card-hover: #19201c;
  --bg-backdrop: rgba(6, 8, 7, 0.76);
  --text-primary: #ece6d6;
  --text-secondary: #b3b5a6;
  --text-muted: #979d8f;
  --text-inverse: #0e1210;
  --border: rgba(236, 230, 214, 0.1);
  --border-subtle: rgba(236, 230, 214, 0.055);
  --border-strong: rgba(236, 230, 214, 0.2);
  --border-interactive: rgba(209, 168, 82, 0.45);
  --focus-color: #d1a852;
  --color-success: #57d68d;
  --color-success-bg: rgba(87, 214, 141, 0.12);
  --color-success-border: rgba(87, 214, 141, 0.28);
  --color-warning: #e8a93c;
  --color-warning-bg: rgba(232, 169, 60, 0.12);
  --color-warning-border: rgba(232, 169, 60, 0.28);
  --color-danger: #f07050;
  --color-danger-bg: rgba(240, 112, 80, 0.12);
  --color-danger-border: rgba(240, 112, 80, 0.28);
  --color-info: #8db7c8;
  --color-info-bg: rgba(141, 183, 200, 0.12);
  --color-info-border: rgba(141, 183, 200, 0.28);
  --area-heute: #d1a852;
  --area-heute-bg: rgba(209, 168, 82, 0.13);
  --area-heute-border: rgba(209, 168, 82, 0.3);
  --area-haushalt: #6fc196;
  --area-haushalt-bg: rgba(111, 193, 150, 0.13);
  --area-haushalt-border: rgba(111, 193, 150, 0.3);
  --area-finanzen: #82acd0;
  --area-finanzen-bg: rgba(130, 172, 208, 0.13);
  --area-finanzen-border: rgba(130, 172, 208, 0.3);
  --area-invest: #a596de;
  --area-invest-bg: rgba(165, 150, 222, 0.13);
  --area-invest-border: rgba(165, 150, 222, 0.3);
  --area-agenda: #52ccd0;
  --area-agenda-bg: rgba(82, 204, 208, 0.13);
  --area-agenda-border: rgba(82, 204, 208, 0.3);
  --area-zeitung: #db8a5e;
  --area-zeitung-bg: rgba(219, 138, 94, 0.13);
  --area-zeitung-border: rgba(219, 138, 94, 0.3);
  --area-vikki: #d093be;
  --area-vikki-bg: rgba(208, 147, 190, 0.13);
  --area-vikki-border: rgba(208, 147, 190, 0.3);
  --area-eye: #b6c96a;
  --area-eye-bg: rgba(182, 201, 106, 0.13);
  --area-eye-border: rgba(182, 201, 106, 0.3);
  --codex-phosphor: #57d68d;
  --codex-gold: #d1a852;
  --codex-ember: #f07050;
  --codex-iron: #141a17;
  --codex-iron-2: #19201c;
  --codex-line: rgba(236, 230, 214, 0.09);
  --codex-bevel: rgba(236, 230, 214, 0.06);
  --codex-contour: rgba(209, 168, 82, 0.045);
  --ticker-value: #b8ffd2;
  --ticker-label: rgba(87, 214, 141, 0.62);
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: rgba(255, 255, 255, 0.15);
  --chart-text: #979d8f;
  --chart-track: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 12px 36px -4px rgba(0, 0, 0, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
  color-scheme: light;
  --bg-base: #f8f5ec;
  --bg-surface: #fdfbf6;
  --bg-elevated: #ece6d6;
  --bg-card: #fdfbf6;
  --bg-card-hover: #f5f0e4;
  --bg-backdrop: rgba(29, 33, 28, 0.42);
  --text-primary: #1d211c;
  --text-secondary: #4a4e45;
  --text-muted: #5b6056;
  --text-inverse: #fdfbf6;
  --border: rgba(29, 33, 28, 0.13);
  --border-subtle: rgba(29, 33, 28, 0.07);
  --border-strong: rgba(29, 33, 28, 0.24);
  --border-interactive: rgba(122, 89, 22, 0.5);
  --focus-color: #7a5916;
  --color-success: #1d6a42;
  --color-success-bg: rgba(29, 106, 66, 0.1);
  --color-success-border: rgba(29, 106, 66, 0.28);
  --color-warning: #8f5208;
  --color-warning-bg: rgba(143, 82, 8, 0.1);
  --color-warning-border: rgba(143, 82, 8, 0.28);
  --color-danger: #ab3417;
  --color-danger-bg: rgba(171, 52, 23, 0.1);
  --color-danger-border: rgba(171, 52, 23, 0.28);
  --color-info: #2a5d76;
  --color-info-bg: rgba(42, 93, 118, 0.1);
  --color-info-border: rgba(42, 93, 118, 0.28);
  --area-heute: #7a5916;
  --area-heute-bg: rgba(122, 89, 22, 0.1);
  --area-heute-border: rgba(122, 89, 22, 0.28);
  --area-haushalt: #256848;
  --area-haushalt-bg: rgba(37, 104, 72, 0.1);
  --area-haushalt-border: rgba(37, 104, 72, 0.28);
  --area-finanzen: #2f5f8a;
  --area-finanzen-bg: rgba(47, 95, 138, 0.1);
  --area-finanzen-border: rgba(47, 95, 138, 0.28);
  --area-invest: #55458f;
  --area-invest-bg: rgba(85, 69, 143, 0.1);
  --area-invest-border: rgba(85, 69, 143, 0.28);
  --area-agenda: #1f6e72;
  --area-agenda-bg: rgba(31, 110, 114, 0.1);
  --area-agenda-border: rgba(31, 110, 114, 0.28);
  --area-zeitung: #93451f;
  --area-zeitung-bg: rgba(147, 69, 31, 0.1);
  --area-zeitung-border: rgba(147, 69, 31, 0.28);
  --area-vikki: #86386a;
  --area-vikki-bg: rgba(134, 56, 106, 0.1);
  --area-vikki-border: rgba(134, 56, 106, 0.28);
  --area-eye: #556417;
  --area-eye-bg: rgba(85, 100, 23, 0.1);
  --area-eye-border: rgba(85, 100, 23, 0.28);
  --codex-phosphor: #1d6a42;
  --codex-gold: #7a5916;
  --codex-ember: #ab3417;
  --codex-iron: #ece6d6;
  --codex-iron-2: #e4dccb;
  --codex-line: rgba(29, 33, 28, 0.13);
  --codex-bevel: rgba(255, 255, 255, 0.7);
  --codex-contour: rgba(122, 89, 22, 0.075);
  --ticker-value: #b8ffd2;
  --ticker-label: rgba(87, 214, 141, 0.62);
  --chart-grid: rgba(28, 25, 23, 0.08);
  --chart-axis: rgba(28, 25, 23, 0.16);
  --chart-text: #5b6056;
  --chart-track: rgba(28, 25, 23, 0.08);
  --shadow-sm: 0 1px 2px rgba(40, 32, 24, 0.06);
  --shadow-card: 0 4px 20px -2px rgba(40, 32, 24, 0.08), 0 2px 6px -1px rgba(40, 32, 24, 0.05);
  --shadow-elevated: 0 12px 36px -4px rgba(40, 32, 24, 0.16), 0 4px 12px -2px rgba(40, 32, 24, 0.08);
}

/* Ohne data-theme folgt die Seite dem System (identisch zum Block oben) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg-base: #f8f5ec;
    --bg-surface: #fdfbf6;
    --bg-elevated: #ece6d6;
    --bg-card: #fdfbf6;
    --bg-card-hover: #f5f0e4;
    --bg-backdrop: rgba(29, 33, 28, 0.42);
    --text-primary: #1d211c;
    --text-secondary: #4a4e45;
    --text-muted: #5b6056;
    --text-inverse: #fdfbf6;
    --border: rgba(29, 33, 28, 0.13);
    --border-subtle: rgba(29, 33, 28, 0.07);
    --border-strong: rgba(29, 33, 28, 0.24);
    --border-interactive: rgba(122, 89, 22, 0.5);
    --focus-color: #7a5916;
    --color-success: #1d6a42;
    --color-success-bg: rgba(29, 106, 66, 0.1);
    --color-success-border: rgba(29, 106, 66, 0.28);
    --color-warning: #8f5208;
    --color-warning-bg: rgba(143, 82, 8, 0.1);
    --color-warning-border: rgba(143, 82, 8, 0.28);
    --color-danger: #ab3417;
    --color-danger-bg: rgba(171, 52, 23, 0.1);
    --color-danger-border: rgba(171, 52, 23, 0.28);
    --color-info: #2a5d76;
    --color-info-bg: rgba(42, 93, 118, 0.1);
    --color-info-border: rgba(42, 93, 118, 0.28);
    --area-heute: #7a5916;
    --area-heute-bg: rgba(122, 89, 22, 0.1);
    --area-heute-border: rgba(122, 89, 22, 0.28);
    --area-haushalt: #256848;
    --area-haushalt-bg: rgba(37, 104, 72, 0.1);
    --area-haushalt-border: rgba(37, 104, 72, 0.28);
    --area-finanzen: #2f5f8a;
    --area-finanzen-bg: rgba(47, 95, 138, 0.1);
    --area-finanzen-border: rgba(47, 95, 138, 0.28);
    --area-invest: #55458f;
    --area-invest-bg: rgba(85, 69, 143, 0.1);
    --area-invest-border: rgba(85, 69, 143, 0.28);
    --area-agenda: #1f6e72;
    --area-agenda-bg: rgba(31, 110, 114, 0.1);
    --area-agenda-border: rgba(31, 110, 114, 0.28);
    --area-zeitung: #93451f;
    --area-zeitung-bg: rgba(147, 69, 31, 0.1);
    --area-zeitung-border: rgba(147, 69, 31, 0.28);
    --area-vikki: #86386a;
    --area-vikki-bg: rgba(134, 56, 106, 0.1);
    --area-vikki-border: rgba(134, 56, 106, 0.28);
    --area-eye: #556417;
    --area-eye-bg: rgba(85, 100, 23, 0.1);
    --area-eye-border: rgba(85, 100, 23, 0.28);
    --codex-phosphor: #1d6a42;
    --codex-gold: #7a5916;
    --codex-ember: #ab3417;
    --codex-iron: #ece6d6;
    --codex-iron-2: #e4dccb;
    --codex-line: rgba(29, 33, 28, 0.13);
    --codex-bevel: rgba(255, 255, 255, 0.7);
    --codex-contour: rgba(122, 89, 22, 0.075);
    --ticker-value: #b8ffd2;
    --ticker-label: rgba(87, 214, 141, 0.62);
    --chart-grid: rgba(28, 25, 23, 0.08);
    --chart-axis: rgba(28, 25, 23, 0.16);
    --chart-text: #5b6056;
    --chart-track: rgba(28, 25, 23, 0.08);
    --shadow-sm: 0 1px 2px rgba(40, 32, 24, 0.06);
    --shadow-card: 0 4px 20px -2px rgba(40, 32, 24, 0.08), 0 2px 6px -1px rgba(40, 32, 24, 0.05);
    --shadow-elevated: 0 12px 36px -4px rgba(40, 32, 24, 0.16), 0 4px 12px -2px rgba(40, 32, 24, 0.08);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --touch-target-min: 44px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 12px;
  --radius-xl: 28px;
  --radius-btn: 8px;
  --radius-full: 9999px;
  --chamfer: 14px;
  --z-sticky: 20;
  --z-nav: 40;
  --z-fab: 45;
  --z-sheet: 50;
  --z-toast: 60;
  --font-sans: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-inscription: "Cinzel Variable", Cinzel, "Trajan Pro", Georgia, serif;
}

.caption{font-family:var(--font-sans);font-size:12px;line-height:1.3;font-weight:400}
.meta{font-family:var(--font-sans);font-size:13px;line-height:1.3;font-weight:400}
.body{font-family:var(--font-sans);font-size:15px;line-height:1.55;font-weight:400}
.card-title{font-family:var(--font-sans);font-size:17px;line-height:1.3;font-weight:620;letter-spacing:-0.01em}
.section-title{font-family:var(--font-sans);font-size:21px;line-height:1.3;font-weight:720;letter-spacing:-0.02em}
.page-title{font-family:var(--font-sans);font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-0.02em}
.greeting{font-family:var(--font-sans);font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-0.02em}
.number{font-family:var(--font-sans);font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-0.03em}
.number-lg{font-family:var(--font-sans);font-size:44px;line-height:1.15;font-weight:700;letter-spacing:-0.03em}
.inscription{font-family:var(--font-inscription);font-size:28px;line-height:1.08;font-weight:600;letter-spacing:0.035em}
.readout{font-family:var(--font-mono);font-size:13px;line-height:1.3;font-weight:500}