/* Hero-Slider der Startseite (WIDURO, 04.11.2026) - Header-Umbau Teil B
   Markup: templates/content_element/hero_slider|hero_slide|hero_hotspot.html.twig
   Doku: _HEADER-STARTSEITE.md

   Bildflaeche: Desktop fest 2,8 : 1 (wie SOLL, ca. 1672 x 595), mobil 16 : 9.
   Empfohlene Bildgroesse: 2400 x 860 px oder groesser, Motiv eher mittig/rechts
   (links liegt am Desktop der Text, mobil wird seitlich beschnitten).

   Die "Buehne" (.hero-slide__stage) hat das Seitenverhaeltnis des Bildes (--ar) und deckt
   die Flaeche ab wie object-fit: cover. Hotspots in % der Buehne sitzen dadurch immer auf
   derselben Stelle des Motivs. */

.hero {
	--hero-ink: #12303a;
	--hero-teal: #00888c;
	--hero-teal-dark: #006f72;
	--hero-area: 2.8;              /* Breite / Hoehe der Bildflaeche */
	--hero-gutter: max(16px, calc((100% - 1320px) / 2 + 12px));
	position: relative;
	color: var(--hero-ink);
}

.hero .swiper {
	width: 100%;
}

.hero-slide {
	position: relative;
	margin: 0;
	--ar: 2.8;
}

.hero-slide__media {
	position: relative;
	display: block;
	aspect-ratio: var(--hero-area);
	overflow: hidden;
	background: #e9eff0;
}

.hero-slide__stage {
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100%, calc(100% * var(--ar) / (var(--hero-area))));
	aspect-ratio: var(--ar);
	transform: translate(-50%, -50%);
}

.hero-slide__stage picture,
.hero-slide__stage .hero-slide__img,
.hero-slide__stage img,
.hero-slide__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video ohne Standbild kennt sein Seitenverhaeltnis nicht -> Flaeche fuellen */
.hero-slide--video .hero-slide__stage {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* ---------- Texte ---------- */

.hero-slide__kicker {
	position: relative;
	margin: 0 0 10px;
	padding-top: 22px;
	color: var(--hero-teal);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.hero-slide__kicker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 80px;
	height: 5px;
	border-radius: 3px;
	background: var(--hero-teal);
}

.hero-slide__title {
	margin: 0 0 14px;
	color: var(--hero-ink);
	font-size: clamp(32px, 3.1vw, 50px);
	font-weight: 700;
	line-height: 1.08;
}

.hero-slide__text {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 400;
	color: #33454d;
}

.hero-slide__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.hero-slide__checks li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
}

.hero-slide__checks .material-icons {
	color: var(--hero-teal);
	font-size: 22px;
}

.hero-slide__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	border: 2px solid var(--hero-teal);
	border-radius: 6px;
	font-size: 19px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.hero-btn .material-icons {
	font-size: 22px;
}

.hero-btn--primary {
	background: var(--hero-teal);
	color: #fff !important;
}

.hero-btn--primary:hover {
	background: var(--hero-teal-dark);
	border-color: var(--hero-teal-dark);
}

.hero-btn--secondary {
	background: #fff;
	color: var(--hero-ink) !important;
}

.hero-btn--secondary:hover {
	background: #e8f5f5;
}

.hero-btn--mobile {
	display: none;
}

/* ---------- Hotspots ---------- */

/* 05.11.2026: Der weisse Hintergrund sitzt jetzt an der BESCHRIFTUNG selbst, nicht am
   ganzen Hotspot. Vorher lief der Text auf dev ueber den Hintergrund hinaus (Ursache auf der
   geschuetzten Seite nicht messbar). So deckt der Hintergrund immer genau den eigenen Text ab,
   egal wie breit der Browser den Hotspot rechnet. Der Plus-Kreis liegt darueber (z-index). */
.hero-hs {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	width: max-content;
	color: var(--hero-ink) !important;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transform: translate(-20px, -50%);
	transition: transform .2s;
}

a.hero-hs:hover {
	transform: translate(-20px, -50%) scale(1.04);
}

.hero-hs__plus {
	position: relative;
	z-index: 1;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	margin: 0 0 0 4px;
	border-radius: 50%;
	background: var(--hero-teal);
	box-shadow: 0 0 0 4px rgba(0, 136, 140, .25);
}

.hero-hs__plus::before,
.hero-hs__plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
	transform: translate(-50%, -50%);
}

.hero-hs__plus::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.hero-hs__label {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	height: 40px;
	margin-left: -40px;
	padding: 0 18px 0 48px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 10px rgba(18, 48, 58, .18);
	font-weight: 400;
}

a.hero-hs:hover .hero-hs__label {
	box-shadow: 0 4px 16px rgba(18, 48, 58, .28);
}

/* ---------- Siegel (auf allen Slides) ---------- */

.hero__seals {
	position: absolute;
	top: 5%;
	right: var(--hero-gutter);
	z-index: 3;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	pointer-events: none;
}

.hero__seals picture,
.hero__seals img {
	display: block;
	width: auto;
	/* Siegel-Dateien sind 120 x 100 px (05.11.2026) -> nie hoeher als 100 px, sonst unscharf */
	height: clamp(60px, 6.5vw, 100px);
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
}

/* ---------- Aktionsbanner ---------- */

.hero-slide__banner {
	position: absolute;
	right: var(--hero-gutter);
	bottom: 7%;
	z-index: 3;
	display: block;
	width: clamp(220px, 17vw, 300px);
}

.hero-slide__banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Punkte ---------- */

.hero__dots.swiper-pagination {
	left: 50% !important;
	bottom: 18px !important;
	width: auto !important;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	transform: translateX(-50%);
	line-height: 0;
}

.hero__dots .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	margin: 0 5px !important;
	background: #c3cfd2;
	opacity: 1;
}

.hero__dots .swiper-pagination-bullet-active {
	background: var(--hero-teal);
}

/* ---------- Desktop: Text links ueber dem Bild ---------- */

@media (min-width: 992px) {
	.hero-slide--text .hero-slide__media::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		z-index: 1;
		width: 58%;
		background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .85) 45%, rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
	}

	.hero-slide__content {
		position: absolute;
		top: 50%;
		left: var(--hero-gutter);
		z-index: 2;
		width: min(560px, 40%);
		transform: translateY(-50%);
	}
}

/* Ab 1920 px Breite waechst die Bildflaeche nicht mehr in die Hoehe (05.11.2026):
   feste Hoehe 1920 / 2,8 = 686 px, volle Breite, Bild mittig beschnitten (Buehne deckt ab,
   Hotspots bleiben auf dem Motiv). Bewusst NICHT max-height zusammen mit aspect-ratio -
   Chrome uebertraegt max-height dann auf die Breite, und die Flaeche endet bei 1920 px. */
@media (min-width: 1920px) {
	.hero-slide__media {
		aspect-ratio: auto;
		height: 686px;
	}
}

/* ---------- Mobil: Bild oben, Text darunter zentriert ---------- */

@media (max-width: 991.98px) {
	.hero {
		--hero-area: 16 / 9;
	}

	.hero-slide__content {
		padding: 22px 16px 8px;
		text-align: center;
		background: #fff;
	}

	.hero-slide__kicker {
		padding-top: 0;
		font-size: 15px;
	}

	.hero-slide__kicker::before {
		display: none;
	}

	.hero-slide__title {
		font-size: clamp(26px, 7vw, 34px);
	}

	.hero-slide__text {
		font-size: 16px;
	}

	.hero-slide__checks {
		justify-content: center;
		gap: 6px 16px;
		margin-bottom: 18px;
	}

	.hero-slide__checks li {
		font-size: 14px;
	}

	.hero-slide__buttons {
		flex-direction: column;
		gap: 12px;
	}

	.hero-btn {
		width: 100%;
	}

	.hero-btn--desktop {
		display: none;
	}

	.hero-btn--mobile {
		display: inline-flex;
	}

	.hero-hs {
		font-size: 12px;
		transform: translate(-14px, -50%);
	}

	a.hero-hs:hover {
		transform: translate(-14px, -50%);
	}

	.hero-hs__plus {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
		margin-left: 3px;
		box-shadow: 0 0 0 3px rgba(0, 136, 140, .25);
	}

	.hero-hs__plus::before,
	.hero-hs__plus::after {
		width: 10px;
	}

	.hero-hs__label {
		height: 28px;
		margin-left: -28px;
		padding: 0 11px 0 33px;
	}

	.hero__seals {
		top: 8px;
		right: 8px;
		gap: 6px;
	}

	.hero__seals picture,
	.hero__seals img {
		height: 50px;
	}

	/* Banner mobil unter dem Bild statt darueber */
	.hero-slide__banner {
		position: static;
		width: min(340px, calc(100% - 32px));
		margin: 16px auto 0;
	}

	/* Punkte mobil am unteren Rand der Bildflaeche, nicht unter dem Text */
	.hero__dots.swiper-pagination {
		top: calc(100vw / (16 / 9) - 36px) !important;
		bottom: auto !important;
	}
}