/**
 * Design-Tokens – die einzige Stelle, an der Werte definiert werden.
 *
 * Alles Weitere referenziert nur noch diese Variablen. Wer eine Farbe,
 * einen Radius oder ein Timing aendern will, aendert sie hier.
 *
 * Farbwerte stammen aus dem Briefing (09.08.2026). Gold und Warmgrau sind
 * Ergaenzungen fuer Textstellen, an denen Blau frueher als Nicht-Link
 * eingesetzt war (Meta-Zeilen, Labels, Preiszusaetze).
 */

:root {
	/* --- Marke: Orange-Familie ------------------------------------- */
	--cz-orange-hell: #f5930f;
	--cz-orange: #d47502;
	--cz-orange-braun: #b25e02;

	/* --- Marke: Blau-Familie (Flaechen + Links) --------------------- */
	--cz-blau-hell: #93e0fb;
	--cz-blau: #54add1;
	--cz-petrol: #2d8cb7;

	/* --- Ergaenzung: warme Toene fuer Nicht-Link-Text --------------- */
	--cz-gold: #c98a1e;
	--cz-warmgrau: #6b625a;
	--cz-warmgrau-hell: #8a7f75;

	/* --- Neutral ---------------------------------------------------- */
	--cz-text: #404040;
	--cz-flaeche: #fbf7f2;
	--cz-flaeche-2: #f4ede4;
	--cz-weiss: #ffffff;
	--cz-dunkel: #3a342f;
	--cz-linie: rgba(64, 64, 64, 0.12);

	/* --- Radien ----------------------------------------------------- */
	--cz-radius-s: 10px;
	--cz-radius-m: 18px;
	--cz-radius-l: 28px;
	--cz-radius-pill: 999px;

	/* --- Schatten --------------------------------------------------- */
	--cz-schatten-s: 0 2px 10px rgba(64, 64, 64, 0.07);
	--cz-schatten-m: 0 8px 28px rgba(64, 64, 64, 0.12);
	--cz-schatten-l: 0 18px 48px rgba(64, 64, 64, 0.18);
	--cz-schatten-farbig: 0 10px 30px rgba(178, 94, 2, 0.25);

	/* --- Rhythmus (fluid) ------------------------------------------- */
	--cz-raum-sektion: clamp(3.5rem, 7vw, 7rem);
	--cz-raum-block: clamp(1.5rem, 3vw, 2.5rem);
	--cz-lesebreite: 46rem;
	--cz-inhaltsbreite: 1200px;

	/* --- Typografie-Skala (fluid) ----------------------------------- */
	--cz-h1: clamp(2.1rem, 1.2rem + 3.6vw, 3.8rem);
	--cz-h2: clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem);
	--cz-h3: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
	--cz-text-gross: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	--cz-text-basis: 17px;
	--cz-text-klein: 0.9rem;
	--cz-text-meta: 0.8rem;

	/* --- Bewegung --------------------------------------------------- */
	--cz-dauer: 0.3s;
	--cz-dauer-kurz: 0.18s;
	--cz-dauer-lang: 0.6s;
	--cz-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cz-easing-aus: cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Verlaeufe --------------------------------------------------
	   Briefing-Regel: immer innerhalb einer Familie, hell -> dunkel,
	   links -> rechts. */
	--cz-verlauf-orange: linear-gradient(90deg, var(--cz-orange-hell) 0%, var(--cz-orange-braun) 100%);
	--cz-verlauf-blau: linear-gradient(90deg, var(--cz-blau-hell) 0%, var(--cz-petrol) 100%);
	--cz-verlauf-orange-weich: linear-gradient(135deg, var(--cz-orange-hell) 0%, var(--cz-orange) 55%, var(--cz-orange-braun) 100%);
	--cz-verlauf-blau-weich: linear-gradient(135deg, var(--cz-blau-hell) 0%, var(--cz-blau) 55%, var(--cz-petrol) 100%);

	/* --- Themenfarben je Leistungsbereich ---------------------------
	   Werden auf Bannern und Karten als --cz-thema-* ueberschrieben. */
	--cz-thema-a: var(--cz-blau);
	--cz-thema-b: var(--cz-petrol);
}

/* Themen-Varianten: auf einem Container setzen, alles Innere folgt. */
.cz-thema--orange {
	--cz-thema-a: var(--cz-orange-hell);
	--cz-thema-b: var(--cz-orange-braun);
}

.cz-thema--blau {
	--cz-thema-a: var(--cz-blau-hell);
	--cz-thema-b: var(--cz-petrol);
}

.cz-thema--petrol {
	--cz-thema-a: var(--cz-blau);
	--cz-thema-b: var(--cz-petrol);
}

/* Schriftskala – ergänzt am 19.08.2026, damit Fließtext und Überschriften
 * in Elementor-Widgets und in Textblöcken dieselbe Skala benutzen. */
:root {
	--cz-schrift-lead: 19px;
	--cz-h4: 19px;
}