/* Web24 Mitarbeiterportal — Design-Tokens (Palette bkv-budgettarif.de, Schriften lokal: Lato v25, Montserrat v31, OFL) */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lato--v25-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/lato--v25-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lato--v25-normal-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat--v31-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat--v31-normal-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat--v31-normal-800.woff2') format('woff2'); }

:root {
	--w24mp-primary: #0c9bd3;
	--w24mp-primary-dark: #3550a0;
	--w24mp-primary-soft: #e7f5fb;
	--w24mp-ink: #212d3b;
	--w24mp-ink-soft: #5b6b7c;
	--w24mp-ink-muted: #8a97a6;
	--w24mp-surface: #ffffff;
	--w24mp-surface-2: #f1f5f7;
	--w24mp-surface-3: #f7f9fa;
	--w24mp-line: #e1e8ee;
	--w24mp-ok: #34af23;
	--w24mp-ok-soft: #e9f7ef;
	--w24mp-warn: #e0a028;
	--w24mp-warn-soft: #fff4e5;
	--w24mp-danger: #e02b20;
	--w24mp-danger-soft: #fdecea;
	--w24mp-radius-card: 18px;
	--w24mp-radius-field: 12px;
	--w24mp-radius-pill: 100px;
	--w24mp-shadow: 0 6px 18px rgba(20, 40, 60, 0.08);
	--w24mp-shadow-soft: 0 2px 8px rgba(20, 40, 60, 0.05);
	--w24mp-font-head: 'Montserrat', 'Lato', system-ui, sans-serif;
	--w24mp-font-text: 'Lato', system-ui, sans-serif;
	/* 0.9.0: Farbverlauf der Hero-Flächen wie auf bkv-intern.de (folgt der Akzentfarbe des Mandanten). */
	--w24mp-hero: linear-gradient(135deg, #0b3dbc 0%, var(--w24mp-primary-dark) 40%, var(--w24mp-primary) 100%);
	--w24mp-hero-ink: #ffffff;
	/* 0.10.0: Textfarben für Akzent und Ampel, getrennt von den Flächen, damit sie im Dunkelmodus hell werden. */
	--w24mp-akzent-text: #3550a0;
	--w24mp-ok-text: #1e7a12;
	--w24mp-warn-text: #9a6a10;
	--w24mp-danger-text: #a3231a;
	--w24mp-logo-grund: transparent;
	--w24mp-thema-mond: block;
	--w24mp-thema-sonne: none;
	color-scheme: light;
}

/* Dunkelmodus (0.10.0): Systemeinstellung, solange niemand umgeschaltet hat; der Umschalter setzt data-theme am html. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--w24mp-primary-soft: #16344a;
		--w24mp-ink: #e6edf3;
		--w24mp-ink-soft: #a9b6c3;
		--w24mp-ink-muted: #7f8c9a;
		--w24mp-surface: #172230;
		--w24mp-surface-2: #0e1621;
		--w24mp-surface-3: #1d2a39;
		--w24mp-line: #2b3a4b;
		--w24mp-ok: #4cc23a;
		--w24mp-ok-soft: #16331f;
		--w24mp-warn: #e0a028;
		--w24mp-warn-soft: #382a10;
		--w24mp-danger: #ef5a50;
		--w24mp-danger-soft: #3b1b19;
		--w24mp-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
		--w24mp-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
		--w24mp-akzent-text: #7cc6ee;
		--w24mp-ok-text: #8fdc80;
		--w24mp-warn-text: #f0c46a;
		--w24mp-danger-text: #ff9b91;
		--w24mp-logo-grund: #ffffff;
		--w24mp-thema-mond: none;
		--w24mp-thema-sonne: block;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--w24mp-primary-soft: #16344a;
	--w24mp-ink: #e6edf3;
	--w24mp-ink-soft: #a9b6c3;
	--w24mp-ink-muted: #7f8c9a;
	--w24mp-surface: #172230;
	--w24mp-surface-2: #0e1621;
	--w24mp-surface-3: #1d2a39;
	--w24mp-line: #2b3a4b;
	--w24mp-ok: #4cc23a;
	--w24mp-ok-soft: #16331f;
	--w24mp-warn: #e0a028;
	--w24mp-warn-soft: #382a10;
	--w24mp-danger: #ef5a50;
	--w24mp-danger-soft: #3b1b19;
	--w24mp-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	--w24mp-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
	--w24mp-akzent-text: #7cc6ee;
	--w24mp-ok-text: #8fdc80;
	--w24mp-warn-text: #f0c46a;
	--w24mp-danger-text: #ff9b91;
	--w24mp-logo-grund: #ffffff;
	--w24mp-thema-mond: none;
	--w24mp-thema-sonne: block;
	color-scheme: dark;
}