/*
 * Zentrale Design-Grundlagen für Website, Buchung, Admin und Quiz.
 * Typografie und Abstände skalieren fließend zwischen 360px und 1240px.
 * Die Stufen leiten sich aus den bisherigen Größenclustern des Projekts ab.
 */

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-variable.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-variable.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
	--petrol-900: #12262f;
	--petrol-800: #1b3a4b;
	--petrol-700: #24506a;
	--petrol-100: #e4ecef;
	--amber-600: #b45b28;
	--amber-500: #d9793c;
	--amber-100: #f5e2d2;
	--amber-700: #9c4f1d;
	--ink-900: #23262b;
	--ink-600: #5b6268;
	--surface-050: #f5f3ee;
	--surface-000: #ffffff;
	--line: #e2ded2;
	--success: #4b7a5e;
	--success-100: #e3ede7;
	--success-700: #355a44;
	--danger: #a02b2b;
	--danger-100: #f3e3e3;
	--danger-700: #7a1f1f;
	--edit: #1f6091;
	--edit-100: #e6eef5;
	--edit-700: #164a6e;
	--move: #8a6d1f;
	--move-100: #f2ead4;
	--move-700: #6b5417;
	--white-78: rgba(255, 255, 255, 0.78);

	--font-display: "Space Grotesk", sans-serif;
	--font-body: "Inter", sans-serif;
	--font-mono: "IBM Plex Mono", monospace;

	/* Type-Scale: 360px / 15px / 1.18 bis 1240px / 16.5px / 1.22. */
	--step--2: clamp(0.6731rem, 0.665rem + 0.036vw, 0.6922rem);
	--step--1: clamp(0.7945rem, 0.7474rem + 0.2092vw, 0.8443rem);
	--step-0: clamp(0.9375rem, calc(0.899148rem + 0.170455vw), 1.03125rem);

	--step-1: clamp(1.1063rem, 1.0441rem + 0.2765vw, 1.2581rem);
	--step-2: clamp(1.3054rem, 1.2116rem + 0.4169vw, 1.535rem);
	--step-3: clamp(1.5404rem, 1.4045rem + 0.604vw, 1.8727rem);
	--step-4: clamp(1.8177rem, 1.623rem + 0.8653vw, 2.2935rem);
	--step-5: clamp(2.145rem, 1.8654rem + 1.2428vw, 2.8284rem);

	--font-size-micro: clamp(0.6563rem, 0.6179rem + 0.1705vw, 0.75rem);
	--font-size-label: clamp(0.75rem, 0.7244rem + 0.1136vw, 0.8125rem);
	--font-size-small: clamp(0.8125rem, 0.7741rem + 0.1705vw, 0.9063rem);
	--font-size-body: var(--step-0);
	--font-size-lead: var(--step-1);
	--font-size-heading-small: var(--step-2);
	--font-size-heading: var(--step-3);
	--font-size-heading-large: var(--step-4);
	--font-size-display: var(--step-5);
	/* Mobile Hero-H1 kompakter; ab 1240px identisch mit der Display-Stufe. */
	--font-size-hero: clamp(1.8125rem, calc(1.396905rem + 1.847091vw), 2.8284rem);

	/* Spacing-Skala: vorhandene Größencluster mit fließenden mobilen Grenzen. */
	--space-3xs: clamp(0.125rem, 0.0994rem + 0.1136vw, 0.1875rem);
	--space-2xs: clamp(0.25rem, 0.1989rem + 0.2273vw, 0.375rem);
	--space-xs: clamp(0.375rem, 0.3239rem + 0.2273vw, 0.5rem);
	--space-s: clamp(0.5rem, 0.4489rem + 0.2273vw, 0.625rem);
	--space-sm: clamp(0.625rem, 0.5739rem + 0.2273vw, 0.75rem);
	--space-m: clamp(0.75rem, 0.6989rem + 0.2273vw, 0.875rem);
	--space-md: clamp(0.875rem, 0.8239rem + 0.2273vw, 1rem);
	--space-l: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
	--space-xl: clamp(1.25rem, 1.1477rem + 0.4545vw, 1.5rem);
	--space-2xl: clamp(1.5rem, 1.2955rem + 0.9091vw, 2rem);
	--space-3xl: clamp(2rem, 1.5909rem + 1.8182vw, 3rem);
	--space-4xl: clamp(3rem, 1.9773rem + 4.5455vw, 5.5rem);
	--space-hero-cta-inline: clamp(0.875rem, -2.115rem + 5.3097vw, 2rem);

	/* Höhe des sticky Headers (~101–109px je nach Breakpoint) plus etwas Luft –
	   Ziel für scroll-margin-top, damit Anker-Sprünge nicht darunter verschwinden. */
	--header-offset: 110px;

	--radius-s: 8px;
	--radius-m: 14px;
	--radius-l: 22px;
	--chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6268' stroke-width='2'/%3E%3C/svg%3E");
}
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
	font-optical-sizing: auto;
}

.admin-shell {
	--surface-000: #fffdf8;
	--surface-050: #faf7f0;
	--line: #e3ddd0;
	--admin-bg: #f4f1ea;
	--admin-header: #12303c;
	--admin-header-hover: #1b3f4e;
	--admin-on-dark: #f4f1ea;
	--admin-on-dark-dim: rgba(244, 241, 234, 0.7);
	--admin-on-dark-line: rgba(244, 241, 234, 0.22);
	--admin-text: #12303c;
	--admin-text-2: #3f4a4e;
	--admin-muted: #7d8b90;
	--admin-row-line: #efeadf;
	--admin-field-line: #ddd7ca;
	--admin-seg-groove: #e6e1d5;
	--admin-accent: #c0602c;
	--admin-ok-bg: #e7eee8;
	--admin-ok-text: #3d6647;
	--admin-ok-dot: #4a7a52;
	--admin-radius-btn: 10px;
	--admin-radius-card: 12px;
	--admin-radius-tab: 6px;
	--admin-radius-badge: 5px;
	--admin-font: var(--font-body);
	--admin-mono: var(--font-mono);
}