/**
 * Aether — Base: Reset, Grundtypografie, Elemente, Utilities.
 */

/* --- Modern Reset (schlank) --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem; /* Sticky-Header-Offset für Anker */
	overflow-x: clip; /* verhindert seitliches „Wackeln"/Rand auf Mobil, ohne den fixierten Header zu stören */
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	font-family: var(--font-sans);
	font-size: var(--fs-300);
	line-height: var(--lh-body);
	font-weight: 400;
	color: var(--color-ink);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* --- Überschriften: Serif, editorial --- */
h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-tight);
	color: var(--color-ink);
	text-wrap: balance;
}

h1 { font-size: var(--fs-700); }
h2 { font-size: var(--fs-600); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-accent-ink); }

/* --- Selektion & Fokus --- */
::selection { background: var(--color-accent); color: var(--color-on-accent); }

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

/* Auf dunklen Flächen (Overlay, Hero, Footer) heller Fokus-Ring — sonst kaum sichtbar. */
.mobile-nav :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.site-header.is-open :focus-visible {
	outline-color: var(--color-on-dark);
}

/* Skip-Link-Ziel: programmatischer Fokus soll keinen Rahmen um die ganze Seite zeigen. */
.site-main:focus { outline: none; }

/* --- Eyebrow / Label --- */
.eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--fs-100);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-accent-ink);
}

/* --- Prose (Fließtext-Bereiche) --- */
.prose { font-size: var(--fs-400); color: var(--color-ink); }
.prose > * + * { margin-top: var(--space-sm); }
.prose h2, .prose h3 { margin-top: var(--space-lg); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-xs); }
.prose a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-md); }
.prose blockquote {
	font-family: var(--font-serif);
	font-size: var(--fs-500);
	line-height: var(--lh-snug);
	font-style: italic;
	color: var(--color-muted);
	padding-left: var(--space-md);
	border-left: 2px solid var(--color-accent);
}
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }

/* --- Icons --- */
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* --- Utilities --- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--reading { max-width: var(--container-read); }

.section { padding-block: var(--space-xl); }
.section--center { text-align: center; }

/* Barrierefreiheit: 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 {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: var(--z-overlay);
	padding: 0.75rem 1.25rem;
	background: var(--color-ink);
	color: var(--color-on-dark);
	border-radius: var(--radius-pill);
}
.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}

/* --- Scroll-Reveal (JS toggelt .is-visible) ---
 * Wichtig: Nur verstecken, wenn JS aktiv ist (html.js). Ohne JS bleiben alle
 * Inhalte sichtbar — gut für SEO, Crawler und Barrierefreiheit. */
html.js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
	will-change: opacity, transform;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Gestaffeltes Erscheinen für Grid-Kinder (Vanilla-Fallback ohne GSAP) */
html.js .reveal[style*="--i"] { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
	html.js .reveal { opacity: 1; transform: none; transition: none; }
}