/*
 * chrome.css – Header & Footer. Bewusst grafisch kräftiger als der reine
 * Inhaltsbereich: dunkle Marineblau-Flächen, eine kräftige Akzentlinie als
 * wiederkehrendes Markenzeichen, große Wortmarke. Trotzdem sachlich –
 * keine Farbverläufe außer der einen im Bild-Platzhalter, keine Spielereien.
 */

.ww-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ww-color-navy);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 1000;
}
.ww-skip-link:focus {
	left: 0;
}

/* ---------- Utility-Leiste ---------- */

.ww-utility-bar {
	background: var(--ww-color-navy);
	color: rgba(255, 255, 255, 0.75);
}

.ww-utility-bar__inner {
	max-width: var(--ww-container-max);
	margin-inline: auto;
	padding: 0.5em var(--ww-space-md);
	display: flex;
	justify-content: space-between;
	gap: var(--ww-space-md);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
}

.ww-utility-bar__tag {
	color: #ffffff;
	font-weight: 600;
}

/* ---------- Masthead ---------- */

.ww-masthead {
	background: var(--ww-color-bg);
	border-bottom: 4px solid var(--ww-color-blue);
}

.ww-masthead__inner {
	max-width: var(--ww-container-max);
	margin-inline: auto;
	padding: var(--ww-space-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ww-space-md);
}

.ww-logo {
	font-family: var(--ww-font-serif);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
	letter-spacing: -0.01em;
	color: var(--ww-color-navy);
	white-space: nowrap;
}

.ww-logo__accent {
	color: var(--ww-color-blue);
}

/* ---------- Navigation ---------- */

.ww-nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--ww-color-border);
	border-radius: var(--ww-radius-sm);
	cursor: pointer;
}

.ww-nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--ww-color-navy);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ww-primary-nav {
	width: 100%;
}

.ww-nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--ww-space-sm);
	margin: var(--ww-space-md) 0 0;
}

.ww-nav-list a {
	display: block;
	padding: var(--ww-space-xs) 0;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: var(--ww-color-navy);
	position: relative;
}

.ww-nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--ww-color-blue);
	transition: width 0.2s ease;
}

@media (hover: hover) {
	.ww-nav-list a:hover::after,
	.ww-nav-list a:focus-visible::after {
		width: 100%;
	}
}

.ww-nav-hint {
	font-size: 0.75rem;
	color: var(--ww-color-text-muted);
	margin-top: var(--ww-space-sm);
}

/* Mobile: eingeklapptes Menü, per JS umgeschaltet */
.ww-primary-nav {
	display: none;
}
.ww-primary-nav.is-open {
	display: block;
}

@media (min-width: 900px) {
	.ww-masthead__inner {
		flex-wrap: nowrap;
	}
	.ww-nav-toggle {
		display: none;
	}
	.ww-primary-nav {
		display: block;
		width: auto;
	}
	.ww-nav-list {
		flex-direction: row;
		gap: var(--ww-space-lg);
		margin: 0;
	}
	.ww-nav-hint {
		display: none;
	}
}

/* ---------- Footer: bewusst schlicht – der Newsletter-Block direkt davor
   trägt bereits den einen kräftigen Farbmoment der Seite. ---------- */

.ww-site-footer {
	background: var(--ww-color-bg);
	border-top: 0.5px solid var(--ww-color-hairline);
}

.ww-site-footer__bottom {
	max-width: var(--ww-container-max);
	margin-inline: auto;
	padding: var(--ww-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--ww-space-sm);
	font-size: 0.78rem;
	color: var(--ww-color-text-faint);
}

.ww-footer-legal ul {
	display: flex;
	gap: var(--ww-space-md);
}

.ww-footer-legal a {
	color: var(--ww-color-text-faint);
}

@media (hover: hover) {
	.ww-footer-legal a:hover {
		color: var(--ww-color-navy);
	}
}

@media (min-width: 768px) {
	.ww-site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}