/* ==========================================================================
   Design-Tokens — Warme Vertrauens-Kanzlei
   ========================================================================== */

:root {
	/* Farbsystem (oklch) — via Customizer überschreibbar (siehe --primary-hex/--accent-hex) */
	--bg: oklch(96% 0.015 70);
	--surface: oklch(99% 0.004 70);
	--surface-alt: oklch(93% 0.02 60);
	--surface-deep: oklch(23% 0.02 50);

	--primary: oklch(45% 0.08 45);
	--primary-dark: oklch(36% 0.07 45);
	--primary-soft: oklch(90% 0.03 55);
	--accent: oklch(65% 0.06 150);
	--accent-dark: oklch(48% 0.06 150);

	--ink: oklch(27% 0.02 50);
	--ink-soft: oklch(46% 0.02 50);
	--ink-faint: oklch(60% 0.015 55);
	--on-primary: oklch(98% 0.01 70);

	--border: oklch(88% 0.02 60);
	--border-soft: oklch(92% 0.015 65);

	--radius: 12px;
	--radius-sm: 8px;
	--radius-lg: 20px;

	--shadow-sm: 0 2px 8px oklch(30% 0.03 45 / 6%);
	--shadow: 0 8px 24px oklch(0% 0 0 / 8%);
	--shadow-lg: 0 20px 48px oklch(20% 0.03 45 / 14%);

	--font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
	--font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container: 1200px;
	--container-narrow: 780px;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 220ms;

	color-scheme: light;
}

/* Customizer-Farben (Hex-Fallback über color-mix, damit Redakteure eigene Töne setzen können) */
:root:has(#sbb-dynamic-colors) {
	--primary: var(--primary-hex, oklch(45% 0.08 45));
	--accent: var(--accent-hex, oklch(65% 0.06 150));
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--ink);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-wrap: pretty;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.3rem, 4.5vw + 1rem, 3.75rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 2.6vw + 1rem, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; }

ul, ol { padding-left: 1.2em; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.kicker {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 0.75rem;
}

.icon { width: 1.4em; height: 1.4em; flex: 0 0 auto; vertical-align: middle; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--primary);
	color: var(--on-primary);
	padding: 0.75rem 1.25rem;
	z-index: 1000;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
	outline: 3px solid var(--accent-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Server-seitiges Sicherheitsnetz: .icon nie über 32px */
.icon { max-width: 32px; max-height: 32px; }