/* Design-Tokens.
 *
 * Farbherkunft: das Logo des Kunden (Fahrzeugbeschriftung, CorelDRAW).
 *   Anthrazit #3A3A39, Orange #EE7014.
 *
 * Wichtig: Orange auf Anthrazit ergibt nur 3,8:1. Orange ist deshalb
 * Flaeche, Hairline und grosse Headline, niemals Fliesstextfarbe.
 * Die Seitenflaeche ist absichtlich dunkler als das CI-Anthrazit,
 * sonst hat der dunkle Look keine Tiefenstaffelung.
 */

:root {
	color-scheme: dark;

	/* Flaechen */
	--flaeche: #171716;
	--flaeche-2: #1E1E1C;
	--karte: #242422;
	--karte-hoch: #2C2C29;
	--ci-anthrazit: #3A3A39;
	--tief: #0F0F0E;

	/* Akzent */
	--orange: #EE7014;
	--orange-hell: #FF8A33;
	--auf-orange: #180E04;

	/* WhatsApp. Fremdfarbe, deshalb nur als Rand und Glyph, nie als Flaeche:
	 * das Markengruen ist auf Dunkel zu laut, um neben dem Orange zu stehen. */
	--wa: #3FCB65;

	/* Text */
	--ink: #F4F3F1;
	--ink-2: #B9B6B1;
	/* ink-3 nicht dunkler setzen: auf --karte-hoch sind es dann unter 4,5 zu 1. */
	--ink-3: #9A968F;

	/* Linien */
	--linie: color-mix(in oklab, var(--ink) 12%, transparent);
	--linie-2: color-mix(in oklab, var(--ink) 22%, transparent);
	--linie-orange: color-mix(in oklab, var(--orange) 45%, transparent);

	/* Schrift */
	--font-kopf: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--t-h1: clamp(2.35rem, 1.5rem + 3.9vw, 4.3rem);
	--t-h2: clamp(1.85rem, 1.25rem + 2.6vw, 3.1rem);
	--t-h3: clamp(1.12rem, 1.02rem + 0.4vw, 1.35rem);
	--t-lede: clamp(1.03rem, 0.97rem + 0.34vw, 1.22rem);
	--t-body: clamp(0.97rem, 0.94rem + 0.16vw, 1.03rem);
	--t-klein: 0.855rem;
	--t-kicker: 0.8rem;

	/* Raster */
	--maxw: 1240px;
	--maxw-schmal: 760px;
	--rand: clamp(1.15rem, 4vw, 2.5rem);
	--sektion-y: clamp(4.2rem, 9vw, 7.5rem);
	--lueck: clamp(1rem, 2.2vw, 1.6rem);

	/* Kanten. Bewusst klein: das Logo ist eckig, die Marke ist technisch. */
	--radius: 4px;
	--radius-gross: 6px;

	/* Bewegung */
	--dauer: 220ms;
	--kurve: cubic-bezier(0.22, 0.68, 0.28, 1);

	/* Hoehe der festen Aktionsleiste auf schmalen Viewports */
	--rufleiste-h: 60px;
	/* Sprungmarken duerfen nicht unter der Kopfleiste landen */
	--kopf-h: 64px;
}

@media (min-width: 900px) {
	:root {
		--kopf-h: 76px;
		--rufleiste-h: 0px;
	}
}

/* Auf sehr breiten Schirmen darf der Satzspiegel mitwachsen. Bei festen
 * 1240 Pixeln stand die Seite auf einem 2560er Monitor als schmale Saeule
 * mitten im Dunkeln, waehrend Hero und Abschlussband ueber die volle
 * Breite laufen: dieser Sprung war ein Teil des zerhackten Eindrucks.
 * Die Textspalten selbst bleiben ueber ch-Maximalbreiten begrenzt, es
 * wird also keine Zeile laenger, nur die Flaeche ruhiger. */
@media (min-width: 1600px) {
	:root {
		--maxw: 1360px;
		--sektion-y: clamp(4.2rem, 9vw, 8.5rem);
	}
}

@media (min-width: 2000px) {
	:root { --maxw: 1440px; }
}