/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; padding: 0; }

/* ---------- Design tokens (Klinische Ruhe — warmes medizinisch-editorial) ---------- */
:root {
	--primary: oklch(38% 0.05 165);
	--primary-light: oklch(52% 0.05 165);
	--accent: oklch(62% 0.09 45);        /* decorative: large type, thin lines, tags */
	--accent-strong: oklch(46% 0.10 45); /* AA-safe on --bg: links, button fills */
	--bg: oklch(97% 0.015 80);
	--bg-alt: oklch(93% 0.02 80);
	--ink: oklch(22% 0.02 165);
	--ink-soft: oklch(38% 0.03 165);
	--white: oklch(100% 0 0);
	--line: oklch(38% 0.05 165 / 0.14);

	--radius: 4px;
	--radius-pill: 999px;
	--shadow-soft: 0 8px 24px oklch(38% 0.05 165 / 0.08);
	--shadow-lift: 0 16px 40px oklch(38% 0.05 165 / 0.14);

	--font-display: 'Fraunces', Georgia, serif;
	--font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Fluid type scale, ratio ~1.333 */
	--fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.15rem);
	--fs-lead: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
	--fs-h2: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	--fs-h1: clamp(2.6rem, 1.9rem + 3vw, 4.1rem);

	--space-s: clamp(2.5rem, 2rem + 2vw, 4rem);
	--space-m: clamp(3.5rem, 2.5rem + 4vw, 6rem);
	--space-l: clamp(5rem, 3.5rem + 6vw, 8rem);
	--space-xl: clamp(6.5rem, 4rem + 10vw, 10rem);

	--content-max: 78rem;
	--measure: 62ch;
}

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

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
	text-wrap: pretty;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--primary);
	line-height: 1.15;
	font-weight: 600;
	text-wrap: pretty;
}

h1 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { max-width: var(--measure); }
p.is-lead { font-size: var(--fs-lead); color: var(--ink-soft); font-family: var(--font-display); font-weight: 400; }

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

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -3rem;
	background: var(--primary);
	color: var(--white);
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius);
	z-index: 200;
	transition: top 0.2s ease-out;
}
.skip-link:focus {
	top: 1rem;
}

:focus-visible {
	outline: 2px solid var(--accent-strong);
	outline-offset: 3px;
}