/*
 * components.css – wiederverwendbare Bausteine.
 * Editorial-Ansatz: Linien statt Boxen, Typografie statt Badges (siehe
 * Design-Manifest). Eyebrow-Labels sind reiner, getrackter Text ohne
 * Hintergrundfläche - keine SaaS-Pill-Optik.
 */

.ww-label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ww-color-blue);
	margin-bottom: var(--ww-space-2xs);
}

.ww-label--small {
	font-size: 0.65rem;
}

.ww-label--on-dark {
	color: var(--ww-color-blue-light);
}

/* Bild-Platzhalter, wenn ein Beitrag kein Beitragsbild hat (Abschnitt 27 QA) */
.ww-thumb-fallback {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ww-color-navy);
	color: #fff;
	font-family: var(--ww-font-serif);
	font-size: 1rem;
	text-align: center;
	padding: var(--ww-space-md);
}

/* Porträt-Platzhalter (Personen-Tags ohne hinterlegtes Bild): dezenter
 * Initialen-Kreis statt gebrochenem Layout. */
.ww-portrait-fallback {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ww-color-navy);
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--ww-font-serif);
	font-size: 2.5rem;
}

.ww-home img,
.ww-thumb-fallback,
.ww-portrait-fallback {
	border-radius: 0;
}

/* Sichtbarer Fokuszustand für Tastaturbedienung (Abschnitt 26) */
.ww-home a:focus-visible {
	outline: 2px solid var(--ww-color-blue);
	outline-offset: 2px;
}

/* Hover: minimal und ruhig (Abschnitt "Hover" im Manifest) – Bild zoomt
 * dezent, Headline verschiebt sich leicht ins Blau. Keine Schatten, kein
 * Bounce. */
.ww-media-zoom {
	overflow: hidden;
}

.ww-media-zoom img,
.ww-media-zoom .ww-thumb-fallback,
.ww-media-zoom .ww-portrait-fallback {
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ww-hover-headline {
	position: relative;
	display: inline;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ww-hover-headline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.15em;
	width: 0;
	height: 1px;
	background: var(--ww-color-blue);
	transition: width 0.3s ease;
}

@media (hover: hover) {
	.ww-media-zoom:hover img,
	.ww-media-zoom:hover .ww-thumb-fallback,
	.ww-media-zoom:hover .ww-portrait-fallback {
		transform: scale(1.02);
	}
	a:hover .ww-hover-headline,
	a:focus-visible .ww-hover-headline {
		color: var(--ww-color-blue);
		transform: translateX(3px);
	}
	a:hover .ww-hover-headline::after,
	a:focus-visible .ww-hover-headline::after {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ww-hover-headline,
	.ww-hover-headline::after {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ww-media-zoom img,
	.ww-media-zoom .ww-thumb-fallback,
	.ww-media-zoom .ww-portrait-fallback {
		transition: none;
	}
}