/**
 * base.css – Design-Tokens, Reset, Typografie, Barrierefreiheit.
 *
 * Die Farbwerte spiegeln die Palette aus theme.json. Wird dort etwas geändert,
 * ist es hier ebenfalls anzupassen.
 */

:root {
	/* Farbwelt */
	--ink: #123d3c;
	--cream: #f7f1e5;
	--paper: #ffffff;
	--blue: #1677ff;
	--aqua: #17d6c0;
	--coral: #ff6f61;
	--yellow: #ffdf3e;
	--lime: #d7ff55;
	--mint: #e5ffd0;

	/* Abgeleitete Töne */
	--line: rgba(18, 61, 60, 0.2);
	--line-strong: rgba(18, 61, 60, 0.35);
	--line-inverse: rgba(255, 255, 255, 0.45);
	--muted: rgba(18, 61, 60, 0.68);
	--shadow-soft: 0 10px 35px rgba(12, 54, 51, 0.1);
	--shadow-lift: 0 15px 40px rgba(0, 50, 50, 0.17);
	--shadow-modal: 0 30px 90px rgba(0, 0, 0, 0.25);

	/* Typografie */
	--sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* Raster */
	--header-height: 92px;
	--gutter: 5vw;
	--gutter-min: 25px;
	--shell: 760px;
	--shell-wide: 1180px;

	/* Bewegung */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--duration: 0.3s;
}

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

html {
	scroll-behavior: smooth;
	/* Sticky-Kopf beim Ankersprung berücksichtigen. */
	scroll-padding-top: calc(var(--header-height) + 16px);
	-webkit-text-size-adjust: 100%;
}

/* Grundwerte exakt wie in der Designvorlage: 16 px, keine eigene
   Zeilenhöhe. Jede Komponente bringt ihre Zeilenhöhe selbst mit;
   redaktionelle Inhalte bekommen sie in content.css. */
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

body.is-locked {
	overflow: hidden;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 3px solid var(--coral);
	outline-offset: 4px;
}

/* Kleinzeile – wiederkehrendes Label über Sektionstiteln. */
.eyebrow {
	margin: 0;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Nur für Screenreader. */
.screen-reader-text {
	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:focus {
	position: fixed !important;
	z-index: 200;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	padding: 14px 20px;
	clip: auto;
	background: var(--ink);
	color: var(--cream);
	font-weight: 700;
	text-decoration: none;
}

@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;
	}
}