/*
 * Komponenten der Performance-Marketing-Landingpages.
 * Wird nur geladen, wenn das Landingpage-Template aktiv ist – auf diesen
 * Seiten zählt jede Zehntelsekunde Ladezeit.
 */

/* --- Hero ---------------------------------------------------------------- */

.bast-lp-hero {
	background: linear-gradient(155deg, #0A2C47 0%, #0E3A5E 60%, #124B78 100%);
	color: var(--wp--preset--color--base);
	position: relative;
	overflow: hidden;
}

/* Lichtkegel oben rechts – rein dekorativ */
.bast-lp-hero::before {
	content: "";
	position: absolute;
	right: -120px;
	top: -80px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, rgba(28, 156, 240, 0.3), transparent 60%);
	pointer-events: none;
}

.bast-lp-hero > * {
	position: relative;
	z-index: 1;
}

.bast-lp-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #9FD0F4;
}

.bast-lp-hero__eyebrow svg {
	width: 15px;
	height: 15px;
	stroke: #3AA8F0;
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

.bast-lp-hero__media {
	position: relative;
}

/* height: auto ist nötig, damit aspect-ratio greift – sonst gewinnt das
   height-Attribut des img und das Bild wird in Originalhöhe ausgegeben. */
.bast-lp-hero__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	display: block;
}

.bast-lp-hero__badge {
	position: absolute;
	left: -14px;
	bottom: 22px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	gap: 12px;
}

.bast-lp-hero__badge strong {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.25rem;
	display: block;
	line-height: 1.2;
}

.bast-lp-hero__badge span:not(.bast-lp-hero__badge-icon) {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.bast-lp-hero__badge-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #E9F4EE;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bast-lp-hero__badge-icon svg {
	width: 22px;
	height: 22px;
	stroke: var(--wp--preset--color--success);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 781px) {
	.bast-lp-hero__badge {
		left: 12px;
	}
}


/* --- Merkmal-Chips im Hero ---------------------------------------------- */

.bast-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bast-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.bast-chip svg {
	width: 16px;
	height: 16px;
	stroke: #9FD0F4;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

.bast-hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 0.8125rem;
	color: #9FB5C8;
	font-weight: 600;
}

.bast-hero-proof span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.bast-hero-proof svg {
	width: 15px;
	height: 15px;
	stroke: #3AA8F0;
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}


/* --- Förder-Strip -------------------------------------------------------- */

.bast-strip {
	background: var(--wp--custom--funding--bg);
	border-bottom: 1px solid #F1E3C2;
	padding: 15px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}

.bast-strip strong {
	color: var(--wp--custom--funding--heading);
	font-size: 0.9375rem;
}

.bast-strip span {
	color: var(--wp--custom--funding--meta);
}

.bast-strip svg {
	width: 19px;
	height: 19px;
	stroke: #C08400;
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}


/* --- Drei Säulen --------------------------------------------------------- */

.bast-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

.bast-pillar {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 4px solid var(--bast-accent, var(--wp--preset--color--primary));
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(10, 44, 71, 0.06);
	display: flex;
	flex-direction: column;
}

/* Das Bild steckt in einem <picture> – der direkte Kindselektor allein
   würde es nicht mehr treffen. */
.bast-pillar > picture {
	display: block;
}

.bast-pillar > img,
.bast-pillar > picture img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.bast-pillar__body {
	padding: var(--wp--preset--spacing--40);
}

.bast-pillar__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.bast-pillar__head h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3125rem;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin: 0;
}

.bast-pillar__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--bast-soft, var(--wp--preset--color--surface-blue));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bast-pillar__icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--bast-accent, var(--wp--preset--color--primary));
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bast-pillar__body > p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin-bottom: 16px;
}


/* --- Autark-Band --------------------------------------------------------- */

.bast-autark {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	border-radius: 24px;
	padding: clamp(1.75rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.bast-autark__intro {
	grid-column: 1 / -1;
	max-width: 560px;
}

.bast-autark__intro h2 {
	color: var(--wp--preset--color--base);
	margin-bottom: 10px;
}

.bast-autark__intro p {
	color: #C9D8E5;
	line-height: 1.6;
}

.bast-autark__stat strong {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.875rem;
	color: #3AA8F0;
	display: block;
	margin-bottom: 4px;
}

.bast-autark__stat span {
	font-size: var(--wp--preset--font-size--small);
	color: #AEC1D2;
	line-height: 1.5;
}

.bast-autark__note {
	grid-column: 1 / -1;
	font-size: 0.6875rem;
	color: #6B8199;
}


/* --- Förderbox mit Zahlen ------------------------------------------------ */

.bast-foerderbox {
	background: linear-gradient(135deg, #FFF8EC, #FDF1D8);
	border: 1px solid #F1E3C2;
	border-radius: 24px;
	padding: clamp(1.75rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
}

.bast-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--funding);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 14px;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.bast-badge svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bast-foerderbox h2 {
	color: #5E4200;
	margin-bottom: 14px;
}

.bast-foerderbox > div > p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--custom--funding--text);
	margin-bottom: 18px;
}

.bast-foerderbox__figures {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bast-figure {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	padding: 22px 24px;
	box-shadow: 0 8px 24px rgba(140, 100, 0, 0.1);
}

.bast-figure.is-dark {
	background: var(--wp--preset--color--navy);
	box-shadow: 0 8px 24px rgba(10, 44, 71, 0.2);
}

.bast-figure__label {
	display: block;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	margin-bottom: 4px;
}

.bast-figure.is-dark .bast-figure__label {
	color: #9FD0F4;
}

.bast-figure__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.bast-figure__row strong {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 2.125rem;
	color: var(--wp--preset--color--navy);
}

.bast-figure.is-dark .bast-figure__row strong {
	color: var(--wp--preset--color--base);
}

.bast-figure__row em {
	font-style: normal;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--custom--funding--heading);
}

.bast-figure.is-dark .bast-figure__row em {
	color: #3AA8F0;
}

.bast-figure__note {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--subtle);
	margin-top: 2px;
}

.bast-figure.is-dark .bast-figure__note {
	color: #6B8199;
}

.bast-figure__legal {
	font-size: 0.6875rem;
	color: var(--wp--custom--funding--meta);
	line-height: 1.5;
}


/* --- Abschluss-CTA ------------------------------------------------------- */

.bast-final-cta {
	background: linear-gradient(135deg, #0070B9, #0A2C47);
	border-radius: 24px;
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	color: var(--wp--preset--color--base);
}

.bast-final-cta h2 {
	color: var(--wp--preset--color--base);
	margin-bottom: 14px;
}

.bast-final-cta p {
	font-size: 1rem;
	color: #C9D8E5;
	max-width: 520px;
	margin: 0 auto 28px;
	line-height: 1.55;
}

.bast-final-cta__btn {
	display: inline-block;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--pill);
	padding: 17px 36px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.bast-final-cta__btn:hover {
	background: var(--wp--preset--color--surface-blue);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}


/* --- Sprungziele unter dem klebenden Kopf ------------------------------- */

.bast-anchor {
	scroll-margin-top: 90px;
}


/* ---------------------------------------------------------------------------
   Symmetrie der Raster auf den Landingpages

   Diese Regeln stehen bewusst hier und nicht in style.css: Diese Datei wird
   nach dem Haupt-Stylesheet geladen und würde eine dortige Media Query wieder
   überschreiben.
   --------------------------------------------------------------------------- */

@media (min-width: 760px) {
	/* Drei Säulen, drei Kennzahlen im Autark-Band. Intro und Fußnote spannen
	   über alle Spalten und zählen deshalb nicht mit. */
	.bast-pillars,
	.bast-autark {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Förderbox: Text und Zahlen, also zwei Spalten. */
	.bast-foerderbox {
		grid-template-columns: 1fr 1fr;
	}
}


/* ---------------------------------------------------------------------------
   Vorher-Nachher-Schieberegler

   Beide Bilder liegen deckungsgleich übereinander. Das Vorher-Bild wird per
   clip-path bis zur Reglerposition beschnitten, sodass darunter das
   Nachher-Bild sichtbar wird. Der Regler selbst ist ein echtes Range-Feld –
   damit funktionieren Maus, Finger und Tastatur ohne Zusatzcode.
   --------------------------------------------------------------------------- */

.bast-vergleich {
	--bast-vergleich: 50%;

	position: relative;
	border-radius: var(--wp--custom--radius--lg, 20px);
	overflow: hidden;
	background: #0a2c47;
	box-shadow: var(--wp--custom--shadow--card);
	touch-action: pan-y;
}

.bast-vergleich img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bast-vergleich__vorher {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--bast-vergleich)) 0 0);
}

/* Die Trennkante sitzt genau auf der Reglerposition. */
.bast-vergleich__kante {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--bast-vergleich);
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(10, 44, 71, 0.25);
	pointer-events: none;
}

.bast-vergleich__griff {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 14px rgba(10, 44, 71, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.bast-vergleich__griff svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--wp--preset--color--primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Das Range-Feld liegt unsichtbar über dem ganzen Bild und fängt die Eingaben. */
.bast-vergleich__regler {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
}

.bast-vergleich__regler:focus-visible + .bast-vergleich__kante .bast-vergleich__griff {
	outline: 3px solid var(--wp--preset--color--bright, #1c9cf0);
	outline-offset: 3px;
}

.bast-vergleich__marke {
	position: absolute;
	top: 14px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(10, 44, 71, 0.78);
	color: #fff;
	pointer-events: none;
	backdrop-filter: blur(4px);
}

.bast-vergleich__marke.is-vorher {
	left: 14px;
}

.bast-vergleich__marke.is-nachher {
	right: 14px;
}

.bast-vergleich.zeigt-hinweis .bast-vergleich__griff {
	transform: translate(-50%, -50%) scale(1.12);
	transition: transform 0.3s ease;
}

.bast-vergleiche {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
}

.bast-vergleich__titel {
	margin: 16px 0 4px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
}

.bast-vergleich__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

@media (min-width: 900px) {
	.bast-vergleiche {
		grid-template-columns: 1fr 1fr;
	}
}

.bast-vergleich__hinweis {
	margin: var(--wp--preset--spacing--50) auto 0;
	max-width: 62ch;
	text-align: center;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--subtle);
}

/* Bildergalerie auf der Bäder-Seite: acht Aufnahmen, 2 x 4 auf dem Handy,
   4 x 2 ab Tablet – geht auf jeder Stufe auf. */
.bast-badgalerie {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.bast-badgalerie figure {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md, 14px);
	box-shadow: var(--wp--custom--shadow--card);
}

.bast-badgalerie img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.bast-badgalerie figure:hover img {
	transform: scale(1.05);
}

.bast-badgalerie figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 28px 12px 10px;
	background: linear-gradient(to top, rgba(10, 44, 71, 0.9), rgba(10, 44, 71, 0));
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.35;
}

@media (min-width: 700px) {
	.bast-badgalerie {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bast-badgalerie figure:hover img {
		transform: none;
	}
}