/* ==========================================================================
   Base — Reset, Typografie, Grundlayout
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

@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;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-ink);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

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

a { color: inherit; text-decoration: none; }

ul, ol { padding: 0; margin: 0; list-style: none; }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); font-weight: var(--fw-black); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

p { margin: 0; max-width: 65ch; text-wrap: pretty; }

.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--color-ink-soft); line-height: 1.65; }

/* Fokus-Sichtbarkeit (Pflicht) */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* Layout */
.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.grid { display: grid; gap: var(--gap); }

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--sunken { background: var(--color-surface-sunken); }
.section--deep { background: var(--color-deep); color: #EDEFEE; }
.section--deep .color-accent { color: #6FA3A0; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}
.eyebrow::before {
	content: '';
	width: 22px;
	height: 2px;
	background: var(--color-accent);
}

.section-head { max-width: 46rem; margin-bottom: var(--space-md); }
.section-head--center { margin-inline: auto; text-align: center; }

.color-accent { color: var(--color-accent); }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 1.6rem;
	font-size: 0.95rem;
	font-weight: var(--fw-semibold);
	border: 1.5px solid transparent;
	border-radius: var(--radius);
	white-space: nowrap;
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
	min-height: 48px;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
	background: var(--color-accent);
	color: var(--color-on-accent);
	box-shadow: var(--shadow-hard);
}
.btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--color-ink); }
.btn--primary:active { transform: translate(1px, 1px) scale(1); box-shadow: 3px 3px 0 var(--color-ink); }

.btn--ghost {
	background: transparent;
	color: var(--color-bg);
	border-color: rgba(250, 250, 249, 0.4);
}
.btn--ghost:hover { border-color: var(--color-bg); background: rgba(250, 250, 249, 0.08); }

.btn--outline {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-line-strong);
}
.btn--outline:hover { border-color: var(--color-ink); }

/* Scroll-Reveal — sichtbarer Default, nur transform animiert (kein Blank-Render) */
.reveal {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-pending {
	opacity: 0;
	transform: translateY(28px);
}
@media (prefers-reduced-motion: reduce) {
	.reveal.is-pending { opacity: 1; transform: none; }
}

/* Skip-Link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-ink);
	color: #fff;
	padding: 0.75rem 1.25rem;
	z-index: var(--z-toast);
}
.skip-link:focus { left: 1rem; top: 1rem; }