/* Design-Tokens — einzige Quelle der Wahrheit.
   Farben abgeleitet aus dem Plaza-Europa-Logo: Königsblau, EU-Gelb, Weiß.
   Die finalen Markenfarben stehen noch aus; sie zu wechseln heißt, hier
   die Rollen-Tokens zu ändern — sonst nichts. */

:root {
	/* ── Farben (nach Rolle) ─────────────────────────────── */
	--color-ink:           #08172E;   /* Nachtblau, Grundfläche */
	--color-ink-soft:      #0E2444;   /* abgesetzte dunkle Fläche */
	--color-blue:          #1B4F9C;   /* Logoblau */
	--color-blue-light:    #3B7BD4;   /* Blau hell, Rahmen und Hover */
	--color-primary:       #FFCC00;   /* EU-Gelb — CTAs, Akzente */
	--color-primary-dark:  #D9AC00;   /* Gelb Hover */
	--color-primary-light: #FFE066;   /* Gelb hell, feine Linien */
	--color-cream:         #EAF0F8;   /* Fließtext auf dunkel, helle Flächen */
	--color-cream-dim:     #A8BBD4;   /* zurückgenommener Text auf dunkel */
	--color-white:         #FFFFFF;
	--color-ink-on-light:  #14243A;   /* Text auf hellen Flächen */
	--color-muted-on-light: #4A5D78;  /* Nebentext auf hellen Flächen */

	/* ── Abgeleitete Rollen ──────────────────────────────────
	   Damit ein Farbwechsel wirklich nur diese Datei berührt, stehen
	   auch die halbtransparenten Varianten hier und nicht in den
	   Komponenten. */
	--panel-bg:            rgba(27, 79, 156, 0.14);
	--panel-inset:         inset 0 0 0 1px rgba(255, 204, 0, 0.38);
	--panel-bg-light:      #F2F6FC;
	--border-accent:       1px solid rgba(255, 204, 0, 0.32);
	--border-soft:         1px solid rgba(168, 187, 212, 0.22);
	--header-bg:           rgba(8, 23, 46, 0.92);
	--header-bg-scrolled:  rgba(8, 23, 46, 0.98);
	--glow-primary:        rgba(255, 204, 0, 0.10);
	--glow-blue:           rgba(59, 123, 212, 0.16);
	--overlay-media:       linear-gradient(180deg, rgba(8, 23, 46, 0.35) 0%, rgba(8, 23, 46, 0.88) 100%);

	/* ── Belegungszustände ───────────────────────────────────
	   Bewusst semantisch statt in den Markenfarben: Bei einer Ampel
	   erwarten Gäste grün/orange und nicht blau/gelb. Die Werte müssen
	   zu pe_zustand_farben() in inc/kalender-anzeige.php passen. */
	--color-frei:  #4C9F4C;
	--color-knapp: #E08A1E;
	--color-voll:  #5A6B82;

	/* ── Schrift-Familien ────────────────────────────────── */
	--font-headline: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	--font-body:     'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;

	/* ── Typografie-Skala ────────────────────────────────── */
	--text-hero:  64px;
	--text-h1:    46px;
	--text-h2:    34px;
	--text-h3:    26px;
	--text-h4:    20px;
	--text-lead:  18px;
	--text-body:  16px;
	--text-small: 14px;

	/* ── Gewichte ────────────────────────────────────────── */
	--weight-regular:  400;
	--weight-medium:   500;
	--weight-semibold: 600;
	--weight-bold:     700;

	/* ── Zeilenhöhen ─────────────────────────────────────── */
	--lh-tight:   1.1;
	--lh-heading: 1.25;
	--lh-normal:  1.55;
	--lh-relaxed: 1.7;

	/* ── Spacing (8er-System) ────────────────────────────── */
	--space-xs:  4px;
	--space-sm:  8px;
	--space-md:  16px;
	--space-lg:  24px;
	--space-xl:  40px;
	--space-2xl: 64px;
	--space-3xl: 96px;

	/* ── Breiten ─────────────────────────────────────────── */
	--container-max:  1180px;
	--container-wide: 1360px;
	--container-text:  720px;

	/* ── Radien und Schatten ─────────────────────────────── */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.32);
	--shadow-hard: 0 16px 44px rgba(0, 0, 0, 0.5);

	/* ── Transitions ─────────────────────────────────────── */
	--transition-fast:   150ms ease;
	--transition-normal: 250ms ease;

	/* ── Layout-Konstanten ───────────────────────────────── */
	--header-height: 76px;
}