/* ==========================================================================
   Wunschgesichter · Design-Tokens (Spec 01)
   EINZIGE Quelle aller Werte. In base/layout/components/Patterns nur Variablen verwenden.
   Die neun Palettenfarben kommen aus Kadence (inc/kadence-defaults.php) – hier kein zweiter Hex-Wert.
   ========================================================================== */
:root {
	/* Farben – Kadence-Palette */
	--wg-tuerkis-tief: var(--global-palette1);
	--wg-tuerkis: var(--global-palette2);
	--wg-anthrazit: var(--global-palette3);
	--wg-anthrazit-hell: var(--global-palette4);
	--wg-grau: var(--global-palette5);
	--wg-taupe-tief: var(--global-palette6);
	--wg-sand: var(--global-palette7);
	--wg-warmwhite: var(--global-palette8);
	--wg-weiss: var(--global-palette9);
	/* Farben – Zusatz (kein Platz in den neun Kadence-Slots) */
	--wg-softblue: #DCEEF0;
	--wg-taupe: #B8AAA0;
	--wg-tuerkis-mittel: #4C8F9A;
	--wg-tuerkis-tief-hover: #1C4F58;
	--wg-fehler: #B3261E;
	--wg-erfolg: #2E6B4A;
	/* Hero: heller Verlauf links unter dem Text (Warm White → transparent) */
	/* Spec: .92 / .7 bei 38 % / 0 bei 62 % – gedacht für ein helles Foto. Das aktuelle Hero-Motiv hat einen dunklen Hintergrund,
	   deshalb deckt der Verlauf unter dem Text voll und läuft erst danach aus (sonst wird die Fläche grau und der Text unlesbar). */
	--wg-hero-verlauf: linear-gradient(90deg, rgba(246, 242, 236, 1) 0%, rgba(246, 242, 236, 1) 34%, rgba(246, 242, 236, .86) 44%, rgba(246, 242, 236, 0) 62%);

	/* Schriften */
	--wg-font: "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--wg-font-script: "Mrs Saint Delafield", "Snell Roundhand", cursive;

	/* Schriftgrößen – fließend zwischen 375 und 1440 px Viewport */
	--wg-fs-display: clamp(2.125rem, 1.5528rem + 2.4413vw, 3.75rem);   /* 34 → 60 */
	--wg-fs-h1: clamp(1.875rem, 1.5229rem + 1.5023vw, 2.875rem);       /* 30 → 46 */
	--wg-fs-h2: clamp(1.5rem, 1.28rem + 0.939vw, 2.125rem);            /* 24 → 34 */
	--wg-fs-h3: clamp(1.1875rem, 1.1215rem + 0.2817vw, 1.375rem);      /* 19 → 22 */
	--wg-fs-h4: clamp(1.0625rem, 1.0405rem + 0.0939vw, 1.125rem);      /* 17 → 18 */
	--wg-fs-lead: clamp(1.125rem, 1.059rem + 0.2817vw, 1.3125rem);     /* 18 → 21 */
	--wg-fs-body: clamp(1.0625rem, 1.0405rem + 0.0939vw, 1.125rem);    /* 17 → 18 */
	--wg-fs-small: 0.9375rem;                                          /* 15 */
	--wg-fs-eyebrow: 0.8125rem;                                        /* 13 */
	--wg-fs-nav: 1rem;                                                 /* 16 mobil, 14 Desktop (unten) */
	--wg-fs-button: 0.875rem;                                          /* 14 */
	--wg-fs-script: clamp(2.125rem, 1.6849rem + 1.8779vw, 3.375rem);   /* 34 → 54 */

	/* Zeilenhöhen und Sperrung */
	--wg-lh-display: 1.15;
	--wg-lh-h1: 1.2;
	--wg-lh-h2: 1.25;
	--wg-lh-h3: 1.35;
	--wg-lh-body: 1.7;
	--wg-lh-lead: 1.6;
	--wg-ls-display: 0.14em;
	--wg-ls-versal: 0.10em;
	--wg-ls-eyebrow: 0.18em;
	--wg-ls-nav: 0.12em;
	--wg-ls-button: 0.14em;

	/* Breiten */
	--wg-w-text: 42rem;      /* 672 px: Fließtext, FAQ, Formulare */
	--wg-w-content: 1200px;  /* Kadence "Content Width" */
	--wg-w-wide: 1440px;     /* breite Bildraster, Hero-Inhalt */
	--wg-edge: var(--global-content-edge-padding, 1.25rem); /* 20 / 32 / 48 px aus Kadence */

	/* Abstandsskala (8er-System) */
	--wg-s-1: 4px;
	--wg-s-2: 8px;
	--wg-s-3: 12px;
	--wg-s-4: 16px;
	--wg-s-5: 24px;
	--wg-s-6: 32px;
	--wg-s-7: 48px;
	--wg-s-8: 64px;
	--wg-s-9: 96px;
	--wg-s-10: 128px;
	--wg-section: clamp(4rem, 2.9437rem + 4.507vw, 7rem);          /* Sektion oben/unten 64 → 112 */
	--wg-schatten: 0 8px 32px rgba(43, 43, 43, .08); /* Anthrazit, 8 % – einziger Schatten (Adresskarte) */
	--wg-section-kompakt: clamp(2.5rem, 2.1479rem + 1.5023vw, 3.5rem); /* 40 → 56 */
	--wg-head-gap: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem);      /* Sektionskopf → Inhalt 32 → 56 */
	--wg-gap: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);             /* Spaltenabstand Raster 16 → 32 */

	/* Formen */
	--wg-radius-0: 0;
	--wg-radius-s: 4px;
	--wg-radius-rund: 50%;
	--wg-linie: 1px solid var(--wg-sand);
	--wg-linie-akzent: 1px solid var(--wg-tuerkis);
	--wg-button-h: 3rem;     /* 48 px mobil, 52 px ab 768 px (unten) */
	--wg-feld-h: 3.25rem;    /* 52 px */

	/* Bewegung */
	--wg-t-farbe: 200ms ease-out;
	--wg-t-bild: 400ms ease-out;
}

@media (min-width: 768px) {
	:root {
		--wg-button-h: 3.25rem;
	}
}

@media (min-width: 1025px) {
	:root {
		--wg-fs-nav: 0.875rem;
	}
}

/* Bewegung aus, wenn das System es verlangt – alle Übergänge des Themes hängen an diesen Variablen. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--wg-t-farbe: 0ms;
		--wg-t-bild: 0ms;
	}
}