/*
 * base.css – Design-Tokens, Reset, Typografie
 * Farbwelt gemäß Briefing (Abschnitt 17): überwiegend Weiß, dunkles
 * Marineblau, ein kräftiges seriöses Blau als Akzent, sehr helle bläuliche
 * Flächen. Keine bunten Farbwelten, keine Neonfarben.
 * Nur Systemschriften (Abschnitt 18) – keine externen Font-Requests.
 */

:root {
	--ww-color-bg: #ffffff;
	--ww-color-navy: #0b1f3a;
	--ww-color-navy-2: #142c52;
	--ww-color-blue: #1656c9;
	--ww-color-blue-dark: #0f3f96;
	--ww-color-blue-pale: #eef3fb;
	--ww-color-blue-soft: #c7d4e8;
	--ww-color-blue-light: #8fb8f5;
	--ww-color-surface: #f6f8fc;
	--ww-color-text: #131c2e;
	--ww-color-text-muted: #5b6a86;
	--ww-color-text-faint: #94a0b4;
	--ww-color-border: #e3e8f1;
	--ww-color-hairline: rgba(11, 31, 58, 0.15);
	--ww-color-scrim: rgba(11, 31, 58, 0.72);

	--ww-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ww-font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

	--ww-space-2xs: 0.25rem;
	--ww-space-xs: 0.5rem;
	--ww-space-sm: 0.75rem;
	--ww-space-md: 1.25rem;
	--ww-space-lg: 2rem;
	--ww-space-xl: 3.5rem;
	--ww-space-2xl: 5.5rem;

	--ww-radius-sm: 3px;
	--ww-radius-md: 6px;

	--ww-container-max: 1240px;
}

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

.ww-home {
	background: var(--ww-color-bg);
	color: var(--ww-color-text);
	font-family: var(--ww-font-sans);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.ww-home img {
	max-width: 100%;
	height: auto;
	display: block;
}

.ww-home a {
	color: inherit;
	text-decoration: none;
}

.ww-home ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ww-home section {
	max-width: var(--ww-container-max);
	margin-inline: auto;
	padding-inline: var(--ww-space-md);
	padding-block: var(--ww-space-xl);
}

.ww-home section + section {
	border-top: 1px solid var(--ww-color-border);
}

/* Überschriften: sehr große Editorial-Typografie (Abschnitt "Typografie IST
   das Design" im Manifest) mit spürbar negativem Letter-Spacing. */
.ww-hero__headline {
	font-family: var(--ww-font-serif);
	font-weight: 700;
	font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: var(--ww-space-sm) 0 0;
	color: #fff;
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}

.ww-hero__dek {
	font-family: var(--ww-font-serif);
	font-style: italic;
	font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	margin: var(--ww-space-sm) 0 0;
	max-width: 46ch;
}

.ww-hero__secondary-headline {
	font-family: var(--ww-font-serif);
	font-weight: 700;
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
	line-height: 1.28;
	margin: var(--ww-space-xs) 0 0;
	color: var(--ww-color-navy);
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}

.ww-bento__headline {
	font-family: var(--ww-font-serif);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
	line-height: 1.18;
	letter-spacing: -0.01em;
	margin: var(--ww-space-xs) 0 0;
	color: var(--ww-color-navy);
	text-wrap: balance;
	hyphens: auto;
}

.ww-bento__headline--medium {
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
	letter-spacing: normal;
}

.ww-bento__dek {
	color: var(--ww-color-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 var(--ww-space-sm);
	max-width: 60ch;
}

.ww-section-label {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	color: var(--ww-color-navy);
	margin: 0 0 var(--ww-space-md);
	padding-left: var(--ww-space-sm);
	border-left: 4px solid var(--ww-color-blue);
}

.ww-meta {
	font-size: 0.85rem;
	color: var(--ww-color-text-muted);
	margin: 0;
}

.ww-meta span + span {
	margin-left: var(--ww-space-2xs);
}

.ww-sponsor-line {
	font-size: 0.75rem;
	color: var(--ww-color-text-faint);
	margin: calc(var(--ww-space-md) * -1) 0 var(--ww-space-md);
	padding-left: var(--ww-space-sm);
}

.ww-sponsor-line__tag {
	display: inline-block;
	border: 1px solid var(--ww-color-text-faint);
	padding: 0 0.4em;
	margin-right: 0.4em;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Bewegung nur, wenn der Nutzer es zulässt (Abschnitt 26 – Accessibility) */
@media (prefers-reduced-motion: no-preference) {
	.ww-home a {
		transition: opacity 0.15s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ww-home * {
		scroll-behavior: auto !important;
	}
}