/* ==========================================================================
   Corporate Identity – zentrale Design-Tokens.
   Farben und Schriften ausschließlich über diese Variablen verwenden,
   damit ein CI-Wechsel an einer einzigen Stelle passiert.
   ========================================================================== */

/* Selbstgehostete Schriften – keine Anfrage an Google, damit DSGVO-konform
   und ohne zusätzlichen Verbindungsaufbau (schnellerer LCP). */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, 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: 'Caveat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/caveat-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/caveat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* --- Markenfarben ---
	 * Abgeleitet aus dem Logo: Blau #517EAA (H 210°, S 35 %), Grau #A5A5A5.
	 * Alle Blautöne behalten den Farbton des Logos und unterscheiden sich nur
	 * in der Helligkeit, damit Website und Logo als eine Marke wirken.
	 */
	--color-brand: #517EAA; /* Exakt Logo-Blau – nur Flächen, Linien, Icons. */
	--color-primary: #4D78A2; /* Logo-Blau minimal abgedunkelt: weiße Schrift erreicht 4,64:1 (AA). */
	--color-secondary: #A5A5A5; /* Logo-Grau. Nur Icons/Flächen – als Textfarbe zu kontrastarm. */
	--color-primary-dark: #274767; /* Headlines/Fließtext in Markenfarbe, 9,6:1 auf Weiß. */

	/* Abgeleitete Zustände */
	--color-primary-hover: #43698E;
	--color-primary-tint: #EDF2F7;
	--color-primary-tint-strong: #D4E1ED;

	/*
	 * Aufgehelltes Markenblau für Text auf dunklem Grund:
	 * 5,5:1 auf --color-primary-dark, 8,9:1 auf --color-primary-deep.
	 * Auf hellem Grund ist er zu schwach – dort --color-primary nutzen.
	 */
	--color-primary-light: #A9C8E6;

	/* Dunklerer Markenton für großflächige Verläufe und Overlays. */
	--color-primary-deep: #152637;

	/* --- Neutrale Töne --- */
	--color-text: #1C1C1C;
	--color-text-muted: #595959; /* Kontrastsicherer Ersatz für --color-secondary im Text. */
	--color-border: #DEDEDE;
	--color-surface: #FFFFFF;
	--color-surface-alt: #F5F6F7;
	--color-inverse-text: #FFFFFF;

	/* --- Signalfarben --- */
	--color-success: #2E7D4F;
	--color-warning: #B5761B;
	--color-error: #B3261E;

	/* --- Schrift --- */
	--font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-accent: 'Caveat', 'Segoe Script', cursive;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-black: 800; /* Wortmarken/Headlines. */

	/* Fluide Typo-Skala – skaliert zwischen 360px und 1440px Viewport. */
	--fs-xs: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);
	--fs-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
	--fs-md: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
	--fs-lg: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
	--fs-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
	--fs-2xl: clamp(2.125rem, 1.7rem + 1.9vw, 3.5rem);

	--lh-tight: 1.15;
	--lh-heading: 1.25;
	--lh-body: 1.65;

	/* --- Abstände (4px-Raster) --- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--section-gap: clamp(3rem, 2rem + 5vw, 6rem);

	/* --- Layout --- */
	--container-max: 1280px;
	--container-narrow: 860px;
	--container-pad: clamp(1rem, 0.5rem + 2.5vw, 3rem);

	/* --- Form --- */
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 18px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgb(39 71 103 / 8%), 0 2px 6px rgb(39 71 103 / 6%);
	--shadow-md: 0 4px 12px rgb(39 71 103 / 10%), 0 12px 28px rgb(39 71 103 / 8%);
	--shadow-lg: 0 8px 24px rgb(39 71 103 / 12%), 0 24px 56px rgb(39 71 103 / 10%);

	/* Kantenlinie über Abschnitten – ersetzt harte Trennlinien. */
	--rule: 1px solid var(--color-border);

	--transition-fast: 120ms ease;
	--transition-base: 220ms ease;

	/* --- Fokus (Barrierefreiheit) --- */
	--focus-ring: 3px solid var(--color-primary-dark);
	--focus-offset: 2px;
}