/* ------------------------------------------------------------------
   M21 – Themenbereiche / Service-Übersicht.
   Farben, Typo und Abstände ausschließlich über theme.json-Tokens
   (--wp--preset--*). Modul-spezifische Werte als lokale Custom Props.
------------------------------------------------------------------- */

.bglw-themen {
	--bglw-themen-maxw: var(--wp--style--global--wide-size, 1200px);
	--bglw-themen-card-bg: var(--wp--preset--color--weiss);
	--bglw-themen-heading: var(--wp--preset--color--alpinblau);
	--bglw-themen-text: var(--wp--preset--color--text);
	--bglw-themen-kicker: var(--wp--preset--color--orange-web);

	background-color: var(--wp--preset--color--grau-hell);
	color: var(--bglw-themen-text);
	padding-block: clamp(3rem, 8vw, var(--wp--preset--spacing--70));
}

/* Einstellbare Hintergrundfarben (ACF-Feld „hintergrund“). */
.bglw-themen.has-bg-grau-hell { background-color: var(--wp--preset--color--grau-hell); }
.bglw-themen.has-bg-weiss     { background-color: var(--wp--preset--color--weiss); }
.bglw-themen.has-bg-seeblau   { background-color: var(--wp--preset--color--seeblau); }
.bglw-themen.has-bg-alpinblau { background-color: var(--wp--preset--color--alpinblau); }

/* Dunkle Hintergründe: helle Schrift, heller Kicker. */
.bglw-themen--dark {
	--bglw-themen-heading: var(--wp--preset--color--weiss);
	--bglw-themen-text: rgba(255, 255, 255, 0.92);
	--bglw-themen-kicker: #ffd9bf;
	color: var(--bglw-themen-text);
}

.bglw-themen__content {
	max-width: var(--bglw-themen-maxw);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------
   Kopfbereich
--------------------------------------------------------------- */
.bglw-themen__head {
	max-width: 46rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.bglw-themen__kicker {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--headline);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--bglw-themen-kicker);
}

.bglw-themen__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--headline);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.08;
	color: var(--bglw-themen-heading);
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   Grid: Bild links, Themenliste rechts
--------------------------------------------------------------- */
.bglw-themen__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(1.5rem, 4vw, var(--wp--preset--spacing--60));
	align-items: stretch;
}

/* ---------------------------------------------------------------
   Bildfläche „Unser Auftrag“ – Berg-Motiv (Standard) / Bild / Farbe
--------------------------------------------------------------- */
.bglw-themen__media {
	position: relative;
	height: 100%;
	min-height: 18rem;
	border-radius: var(--bglw-radius, 10px);
	overflow: hidden;
	box-shadow: var(--bglw-shadow, 0 2px 12px rgba(0, 60, 116, 0.08));
	background: var(--wp--preset--color--grau-hell);
}

/* Eigenes Bild */
.bglw-themen__media-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Berg-Motiv: exakt aus dem Hero der Vorlage (105°-Verlauf + weiße Ridges) */
.bglw-themen__media-berge {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(105deg, var(--wp--preset--color--alpinblau) 0%, var(--wp--preset--color--seeblau) 64%, #2a86c8 100%);
}
.bglw-themen__berge-svg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 62%;
	display: block;
}

/* Farbe mit Transparenz */
.bglw-themen__media-color {
	position: absolute;
	inset: 0;
	display: block;
	opacity: var(--bglw-themen-mop, 1);
}
.bglw-themen__media-color.has-tint-weiss      { background: var(--wp--preset--color--weiss); }
.bglw-themen__media-color.has-tint-grau-hell  { background: var(--wp--preset--color--grau-hell); }
.bglw-themen__media-color.has-tint-alpinblau  { background: var(--wp--preset--color--alpinblau); }
.bglw-themen__media-color.has-tint-seeblau    { background: var(--wp--preset--color--seeblau); }
.bglw-themen__media-color.has-tint-orange-web { background: var(--wp--preset--color--orange-web); }
.bglw-themen__media-color.has-tint-mint-web   { background: var(--wp--preset--color--mint-web); }

/* Label über der Fläche: unten links, mit Lesbarkeits-Chip */
.bglw-themen__media-caption {
	position: absolute;
	left: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	z-index: 1;
	padding: 0.4rem 0.8rem;
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	background: rgba(0, 60, 116, 0.82);
	color: var(--wp--preset--color--weiss);
	border-radius: 6px;
	backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------
   Themenliste (rechte Spalte)
--------------------------------------------------------------- */
.bglw-themen__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bglw-themen__list-item {
	display: flex;
}

.bglw-themen__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	padding: var(--wp--preset--spacing--40);
	background: var(--bglw-themen-card-bg);
	border-radius: var(--bglw-radius, 10px);
	box-shadow: var(--bglw-shadow, 0 2px 12px rgba(0, 60, 116, 0.08));
	color: var(--wp--preset--color--text);
	text-decoration: none;
	border: 1px solid transparent;
}

.bglw-themen__item-iconwrap {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--grau-hell);
	color: var(--wp--preset--color--seeblau);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bglw-themen__item-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.bglw-themen__item-title {
	font-family: var(--wp--preset--font-family--headline);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--alpinblau);
}

/* Mouseover-Text: für Screenreader stets vorhanden, visuell erst bei
   Hover/Fokus eingeblendet (weiche Höhen-/Opacity-Animation). */
.bglw-themen__item-desc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--text);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.28s ease, opacity 0.28s ease, margin-top 0.28s ease;
}

.bglw-themen__item-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	margin-left: auto;
	color: var(--wp--preset--color--orange-web);
	transition: transform 0.2s ease;
}

/* Interaktion nur für verlinkte Kacheln */
.bglw-themen__item--link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bglw-themen__item--link:hover,
.bglw-themen__item--link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 60, 116, 0.16);
	border-color: rgba(0, 105, 180, 0.25);
}

.bglw-themen__item--link:hover .bglw-themen__item-iconwrap,
.bglw-themen__item--link:focus-visible .bglw-themen__item-iconwrap {
	background: var(--wp--preset--color--seeblau);
	color: var(--wp--preset--color--weiss);
}

.bglw-themen__item--link:hover .bglw-themen__item-arrow,
.bglw-themen__item--link:focus-visible .bglw-themen__item-arrow {
	transform: translateX(5px);
}

/* Mouseover-Text ausklappen bei Hover/Fokus */
.bglw-themen__item--link:hover .bglw-themen__item-desc,
.bglw-themen__item--link:focus-visible .bglw-themen__item-desc,
.bglw-themen__item:hover .bglw-themen__item-desc {
	max-height: 4.5rem;
	opacity: 1;
	margin-top: 0.1rem;
}

/* Sichtbarer Fokus für Tastaturbedienung (WCAG 2.4.7) */
.bglw-themen__item--link:focus-visible {
	outline: 3px solid var(--wp--preset--color--orange-web);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Responsivität
--------------------------------------------------------------- */
@media (max-width: 860px) {
	.bglw-themen__grid {
		grid-template-columns: 1fr;
	}
	.bglw-themen__media-figure,
	.bglw-themen__media-placeholder {
		min-height: 14rem;
	}
	/* Auf Touch-Geräten Mouseover-Text dauerhaft zeigen (kein Hover). */
	.bglw-themen__item-desc {
		max-height: 4.5rem;
		opacity: 1;
		margin-top: 0.1rem;
	}
}

@media (max-width: 480px) {
	.bglw-themen__item {
		padding: var(--wp--preset--spacing--30);
		gap: var(--wp--preset--spacing--20);
	}
	.bglw-themen__item-iconwrap {
		width: 2.4rem;
		height: 2.4rem;
	}
}

/* Bewegung reduzieren, wenn vom Nutzer gewünscht (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
	.bglw-themen__item--link,
	.bglw-themen__item-arrow,
	.bglw-themen__item-iconwrap,
	.bglw-themen__item-desc {
		transition: none;
	}
	.bglw-themen__item--link:hover,
	.bglw-themen__item--link:focus-visible {
		transform: none;
	}
	.bglw-themen__item--link:hover .bglw-themen__item-arrow,
	.bglw-themen__item--link:focus-visible .bglw-themen__item-arrow {
		transform: none;
	}
}