/*
Theme Name: BAST Energie
Theme URI: https://bast-energie.de
Author: Ewerle GmbH
Author URI: https://ewerle.de
Description: Block-Theme für die BAST Energie und Gebäudetechnik GmbH. Umsetzung des Marken- und Funnel-Systems: ein Designsystem, vier Service-Routen, ein Anfrageprozess. Design-Tokens zentral in theme.json.
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bast-energie
*/

/* ---------------------------------------------------------------------------
   Grundlage
   --------------------------------------------------------------------------- */

/* WordPress setzt border-box nur für einzelne Blöcke, nicht global. Ohne diese
   Regel rechnet der Browser Innenabstand und Rahmen zur angegebenen Höhe hinzu –
   im Raster ragen Karten dann über ihre Zeile hinaus und überlappen die nächste. */
*,
*::before,
*::after {
	box-sizing: border-box;
}


/* Farben, Typografie und Abstände stehen in theme.json.
   Hier stehen nur die Komponenten, die sich dort nicht abbilden lassen. */


/* ---------------------------------------------------------------------------
   Kopfbereich
   Zwei Varianten: mit Navigation (Website) und ohne (Landingpage).
   --------------------------------------------------------------------------- */

.bast-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
}

/* Der Kopfbereich hat drei Bereiche: Logo, Menü, Aktionen. Sie werden über
   space-between verteilt – so klebt das Menü weder am Logo noch an den
   Schaltflächen, sondern sitzt ausgewogen dazwischen. */
.bast-header__aktionen {
	gap: 18px;
}

/* Alle Elemente auf einer Höhe: Telefon-Button, Kontakt-Button und die
   Social-Symbole sind gleich hoch, damit die Zeile ruhig wirkt. Bewusst auf
   .bast-header und nicht auf die Aktionsgruppe bezogen – die Landing- und
   Karriereseiten haben denselben Kopfbereich ohne diese Gruppe. */
.bast-header .bast-phone.is-button,
.bast-header .wp-block-button__link {
	height: 46px;
	display: inline-flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}

.bast-header .bast-social a {
	width: 40px;
	height: 40px;
}

/* Einheitliche Schriftgrößen im Kopfbereich: Das Menü führt mit 17px, die
   beiden Schaltflächen folgen mit 15px. Vorher lagen 21px gegen 14px – das
   wirkte auseinandergerissen. */
.bast-header .bast-nav,
.bast-header .bast-nav .wp-block-navigation-item__content {
	font-size: 1.0625rem;
}

.bast-header .bast-phone.is-button,
.bast-header .wp-block-button__link {
	font-size: 0.9375rem;
}

/* Das Logo bestimmte mit 79px die Höhe des ganzen Kopfbereichs. */
.bast-header .wp-block-site-logo img {
	max-height: 62px;
	width: auto;
}

/* Die Navigation darf Luft haben – das Menü ist kurz genug dafür. */
.bast-nav .wp-block-navigation__container {
	gap: 36px;
}

.bast-nav .wp-block-navigation-item__content {
	font-weight: 600;
	padding-block: 4px;
}

.bast-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.bast-phone:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/*
 * Telefonnummer als zweiter Button neben dem CTA: gleiche Form, aber als
 * Outline – so ist erkennbar, dass beides Handlungen sind, ohne dem
 * Anfrage-Button die Aufmerksamkeit zu nehmen.
 */
.bast-phone.is-button {
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	padding: 11px 22px;
	color: var(--wp--preset--color--primary);
	transition: background 0.15s, color 0.15s;
}

.bast-phone.is-button:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.bast-phone.is-button:hover svg {
	stroke: var(--wp--preset--color--base);
}

/* Auf mittleren Breiten schrumpft der Button auf das Symbol */
@media (max-width: 1100px) and (min-width: 601px) {
	.bast-phone.is-button span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.bast-phone.is-button {
		padding: 11px 14px;
	}
}

.bast-phone svg {
	width: 17px;
	height: 17px;
	stroke: var(--wp--preset--color--primary);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Auf dunklem Grund (Footer, LP-Fuß) erbt der Link die Umgebungsfarbe */
.has-navy-background-color .bast-phone,
.has-navy-background-color .bast-phone:hover {
	color: inherit;
}

/* Telefonnummer auf kleinen Bildschirmen zugunsten des CTA ausblenden –
   die Nummer steht dort ohnehin im Hero und im Fuß. */
@media (max-width: 600px) {
	.bast-header__phone {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
   Fußbereich
   --------------------------------------------------------------------------- */

.bast-footer__head {
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.bast-footer__list {
	list-style: none;
	padding-left: 0;
	line-height: 1.9;
}

.bast-footer__list a,
.bast-footer__legal a,
.bast-footer__cols a {
	color: inherit;
}

.bast-footer__list a:hover,
.bast-footer__legal a:hover,
.bast-footer__cols a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/*
 * Das Footer-Logo soll optisch so groß wirken wie das im Kopf. Da es in einem
 * <picture> steckt, greift die Breitenangabe des Bild-Blocks nicht mehr – die
 * Breite muss hier stehen.
 *
 * Diese Regel stand schon einmal weiter unten und wurde beim Aufräumen des
 * alten Zeitstrahl-CSS versehentlich mitgelöscht. Sie gehört zum Fußbereich
 * und steht deshalb jetzt hier, wo man sie sucht.
 */
.bast-footer__logo {
	margin-bottom: 1rem;
}

.bast-footer__logo,
.bast-footer__logo picture,
.bast-footer__logo img {
	width: 170px;
	max-width: 170px;
	height: auto;
}


/* ---------------------------------------------------------------------------
   Button-Varianten
   Primär kommt aus theme.json. Hier die drei weiteren aus dem Konzept.
   --------------------------------------------------------------------------- */

.wp-block-button.is-style-secondary .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 2px solid var(--wp--preset--color--primary);
	padding: 13px 28px;
	box-shadow: none;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface-blue);
	color: var(--wp--preset--color--primary);
}

/* Auf dunklem Grund (Hero, Navy-Sektionen) kehrt sich die Outline-Variante um */
.wp-block-cover .wp-block-button.is-style-secondary .wp-block-button__link,
.has-navy-background-color .wp-block-button.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.35);
}

.wp-block-cover .wp-block-button.is-style-secondary .wp-block-button__link:hover,
.has-navy-background-color .wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.6);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	padding: 14px 8px;
	box-shadow: none;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-funding .wp-block-button__link {
	background: var(--wp--preset--color--funding);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 6px 18px rgba(240, 165, 0, 0.3);
}

.wp-block-button.is-style-funding .wp-block-button__link:hover {
	background: #D99600;
	color: var(--wp--preset--color--navy);
}


/* ---------------------------------------------------------------------------
   Service-Karten
   Vier Routen, je eine Nuance. Die Farbe sitzt als Kante oben und färbt
   Icon-Fläche und Link – Fläche und Typo bleiben markenblau.
   --------------------------------------------------------------------------- */

.bast-service-card {
	--bast-accent: var(--wp--preset--color--primary);
	--bast-soft: var(--wp--preset--color--surface-blue);
	--bast-karte-innen: var(--wp--preset--spacing--40);

	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 4px solid var(--bast-accent);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--bast-karte-innen);
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
}

.bast-service-card.is-energie {
	--bast-accent: var(--wp--custom--service--energie--accent);
	--bast-soft: var(--wp--custom--service--energie--soft);
}

.bast-service-card.is-klima {
	--bast-accent: var(--wp--custom--service--klima--accent);
	--bast-soft: var(--wp--custom--service--klima--soft);
}

.bast-service-card.is-wartung {
	--bast-accent: var(--wp--custom--service--wartung--accent);
	--bast-soft: var(--wp--custom--service--wartung--soft);
}

.bast-service-card.is-beratung {
	--bast-accent: var(--wp--custom--service--beratung--accent);
	--bast-soft: var(--wp--custom--service--beratung--soft);
}

.bast-service-card.is-bad {
	--bast-accent: var(--wp--custom--service--bad--accent);
	--bast-soft: var(--wp--custom--service--bad--soft);
}

/* Fünf gleichwertige Leistungen sollen auf Desktop in einer Reihe stehen –
   bei 1200px Rasterbreite geht das erst ab 205px Mindestbreite auf.
   Darunter bricht auto-fit von selbst auf 3, 2 und 1 Spalte um. */
.bast-service-grid {
	display: grid;
	/* Fünf Karten – auf mittlerer Breite läuft die fünfte über beide Spalten,
	   damit in der letzten Reihe kein halbes Raster stehen bleibt. */
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

/* WordPress gibt Kindern eines Flow-Layouts margin-block-start – außer dem
   ersten. Im Raster schiebt das die erste Karte nach oben aus der Reihe. */
.bast-service-grid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Bei fünf schmalen Spalten braucht der Text jeden Pixel */
.bast-service-grid .bast-service-card {
	--bast-karte-innen: 20px;
	display: flex;
	flex-direction: column;
}

.bast-service-grid .bast-service-card h3 {
	font-size: 1.125rem;
	text-wrap: balance;
}

/* Der Link wandert ans Kartenende – so stehen alle fünf auf einer Linie,
   auch wenn die Texte unterschiedlich lang sind. */
.bast-service-grid .bast-service-card__link {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

.bast-service-card__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--bast-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.bast-service-card__icon svg {
	width: 26px;
	height: 26px;
	stroke: var(--bast-accent);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bast-service-card__link {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--bast-accent);
}

.bast-service-card__link:hover {
	color: var(--bast-accent);
	text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   Trust-Band – Beweise direkt unter der Funnel-Weiche
   --------------------------------------------------------------------------- */

.bast-trust {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	padding: 26px 30px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	align-items: center;
}

.bast-trust__item {
	text-align: center;
}

.bast-trust__item + .bast-trust__item {
	border-left: 1px solid #EEF2F6;
}

.bast-trust__value {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.625rem;
	line-height: 1.15;
	color: var(--wp--preset--color--primary);
}

.bast-trust__value.is-text {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--navy);
}

/* Das Siegel ersetzt an dieser Stelle den Text – es soll dieselbe Höhe
   einnehmen wie eine zweizeilige Beschriftung, damit die Reihe ruhig bleibt. */
.bast-trust__value.is-siegel img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 42px;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

.bast-trust__label {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	margin-top: 2px;
}

/* Fünf Belege gehen durch zwei Spalten nicht auf – einer bliebe allein stehen.
   Auf schmalen Bildschirmen stehen sie deshalb untereinander, getrennt durch
   eine waagerechte Linie statt der senkrechten. */
@media (max-width: 900px) {
	.bast-trust {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 8px 24px;
	}

	.bast-trust__item + .bast-trust__item {
		border-left: none;
		border-top: 1px solid #eef2f6;
	}

	.bast-trust__item {
		padding: 16px 0;
	}
}


/* ---------------------------------------------------------------------------
   Förder-Hinweis – BEG/KfW als Handlungsanreiz
   --------------------------------------------------------------------------- */

.bast-funding {
	background: var(--wp--custom--funding--bg);
	border: 1px solid var(--wp--custom--funding--border);
	border-left: 4px solid var(--wp--preset--color--funding);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
}

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

.bast-funding__head svg {
	width: 22px;
	height: 22px;
	stroke: #B67C00;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

.bast-funding h2,
.bast-funding h3,
.bast-funding h4 {
	color: var(--wp--custom--funding--heading);
	font-size: 1.125rem;
	font-weight: 800;
	margin: 0;
}

.bast-funding p {
	color: var(--wp--custom--funding--text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

/* Rechtsstand und Vorbehalt – bewusst kleiner und zurückgenommen */
.bast-funding__meta {
	color: var(--wp--custom--funding--meta);
	font-size: 0.6875rem;
	line-height: 1.5;
}


/* ---------------------------------------------------------------------------
   Testimonial
   --------------------------------------------------------------------------- */

.bast-testimonial {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
	height: 100%;
}

.bast-testimonial__stars {
	color: var(--wp--preset--color--funding);
	font-size: 1.125rem;
	letter-spacing: 2px;
	margin-bottom: 12px;
}

.bast-testimonial__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.bast-testimonial__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

/* Sechs Stimmen im Raster. Die Karten sind unterschiedlich lang – der Autor
   wird per margin-top:auto nach unten gedrückt, damit die Fußzeilen fluchten. */
.bast-stimmen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

.bast-stimmen .bast-testimonial {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.bast-stimmen .bast-testimonial p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

.bast-stimmen .bast-testimonial__author {
	margin-top: auto;
	padding-top: 18px;
}

.bast-testimonial__author strong {
	display: block;
	font-size: 0.875rem;
}

.bast-testimonial__thema {
	display: block;
	font-size: 0.75rem;
	color: var(--wp--preset--color--subtle);
}


/* ---------------------------------------------------------------------------
   Projektgalerie mit Themenfilter
   --------------------------------------------------------------------------- */

.bast-galerie__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--50);
}

.bast-galerie__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--body);
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.bast-galerie__btn:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.bast-galerie__btn.is-aktiv {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.bast-galerie__anzahl {
	font-size: 0.75rem;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

.bast-galerie__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}

.bast-galerie__item {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-blue);
	box-shadow: var(--wp--custom--shadow--card);
}

/* Die Fotos sind Hoch- und Querformate durcheinander. Ein einheitliches
   Seitenverhältnis plus object-fit hält das Raster ruhig. */
.bast-galerie__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

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

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

.bast-galerie__item[hidden] {
	display: none;
}

.bast-galerie__leer {
	text-align: center;
	color: var(--wp--preset--color--muted);
}

@keyframes bast-galerie-ein {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.bast-galerie__item.ist-neu {
	animation: bast-galerie-ein 0.38s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.bast-galerie__item.ist-neu {
		animation: none;
	}

	.bast-galerie__item:hover img {
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
   FAQ – Einwandbehandlung, letzte Station vor der Anfrage.
   Native <details>: funktioniert ohne JavaScript.
   --------------------------------------------------------------------------- */

/* Zweispaltig: links Einleitung mit Leitungsgrafik, rechts die Fragen. */
.bast-faq {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.bast-faq__intro {
	position: relative;
}

.bast-faq__intro h2 {
	margin: 6px 0 14px;
}

.bast-faq__text {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0 0 22px;
}

.bast-faq__tel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.bast-faq__tel:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	transform: translateY(-1px);
}

.bast-faq__tel svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* --- Leitungsnetz -------------------------------------------------------
   Zwei identische Pfadgruppen übereinander: die untere zeichnet die Leitung,
   die obere ist gestrichelt und wandert – das liest sich wie ein Medium, das
   durch die Leitung läuft. Passt zu Heizung, Wasser und Strom gleichermaßen. */

.bast-faq__leitung {
	display: block;
	width: 100%;
	max-width: 340px;
	margin-top: var(--wp--preset--spacing--40);
	overflow: visible;
}

.bast-faq__rohre path {
	fill: none;
	stroke: var(--wp--preset--color--border);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bast-faq__fluss path {
	fill: none;
	stroke: var(--bast-faq-akzent, var(--wp--preset--color--primary));
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 26 240;
	animation: bast-faq-fluss 5.5s linear infinite;
}

.bast-faq__fluss path:nth-child(2) {
	animation-duration: 4.2s;
	animation-delay: -1.4s;
}

.bast-faq__fluss path:nth-child(3) {
	animation-duration: 6.4s;
	animation-delay: -2.8s;
}

@keyframes bast-faq-fluss {
	from {
		stroke-dashoffset: 266;
	}
	to {
		stroke-dashoffset: 0;
	}
}

.bast-faq__knoten circle {
	fill: var(--wp--preset--color--base);
	stroke: var(--bast-faq-akzent, var(--wp--preset--color--primary));
	stroke-width: 3;
	animation: bast-faq-puls 3.2s ease-in-out infinite;
}

.bast-faq__knoten circle:nth-child(2) {
	animation-delay: -1.1s;
}

.bast-faq__knoten circle:nth-child(3) {
	animation-delay: -2.2s;
}

@keyframes bast-faq-puls {
	0%, 100% {
		r: 5;
		opacity: 1;
	}
	50% {
		r: 7;
		opacity: 0.65;
	}
}

/* --- Die Fragen --------------------------------------------------------- */

.bast-faq__liste {
	display: grid;
	gap: 12px;
}

.bast-faq__item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bast-faq__item:hover {
	border-color: var(--bast-faq-akzent, var(--wp--preset--color--primary));
}

.bast-faq__item[open] {
	border-color: var(--bast-faq-akzent, var(--wp--preset--color--primary));
	box-shadow: var(--wp--custom--shadow--card);
}

.bast-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
	list-style: none;
}

.bast-faq__item summary::-webkit-details-marker {
	display: none;
}

.bast-faq__item summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--bright);
	outline-offset: -3px;
}

/* Plus, das sich beim Öffnen zum Minus dreht. */
.bast-faq__zeichen {
	position: relative;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--bast-faq-weich, var(--wp--preset--color--surface-blue));
	transition: background-color 0.2s ease, transform 0.3s ease;
}

.bast-faq__zeichen::before,
.bast-faq__zeichen::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--bast-faq-akzent, var(--wp--preset--color--primary));
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, opacity 0.2s ease;
}

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

.bast-faq__item[open] .bast-faq__zeichen {
	transform: rotate(180deg);
}

.bast-faq__item[open] .bast-faq__zeichen::after {
	opacity: 0;
}

/* Die Antwort fährt aus: Ein Raster von 0fr auf 1fr lässt sich animieren,
   eine Höhe von auto nicht. */
.bast-faq__antwort {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.32s ease;
}

.bast-faq__item[open] .bast-faq__antwort {
	grid-template-rows: 1fr;
}

.bast-faq__antwort > p {
	overflow: hidden;
	margin: 0;
	padding: 0 20px;
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	font-size: var(--wp--preset--font-size--small);
	transition: padding 0.32s ease;
}

.bast-faq__item[open] .bast-faq__antwort > p {
	padding-bottom: 20px;
}

/* Farbnuance je Leistung – dieselben Töne wie bei den Leistungskarten. */
.bast-faq.is-energie {
	--bast-faq-akzent: var(--wp--custom--service--energie--accent);
	--bast-faq-weich: var(--wp--custom--service--energie--soft);
}

.bast-faq.is-klima {
	--bast-faq-akzent: var(--wp--custom--service--klima--accent);
	--bast-faq-weich: var(--wp--custom--service--klima--soft);
}

.bast-faq.is-bad {
	--bast-faq-akzent: var(--wp--custom--service--bad--accent);
	--bast-faq-weich: var(--wp--custom--service--bad--soft);
}

.bast-faq.is-beratung {
	--bast-faq-akzent: var(--wp--custom--service--beratung--accent);
	--bast-faq-weich: var(--wp--custom--service--beratung--soft);
}

.bast-faq.is-wartung {
	--bast-faq-akzent: var(--wp--custom--service--wartung--accent);
	--bast-faq-weich: var(--wp--custom--service--wartung--soft);
}

@media (min-width: 900px) {
	.bast-faq {
		grid-template-columns: 0.85fr 1.15fr;
		gap: var(--wp--preset--spacing--60);
	}

	.bast-faq__intro {
		position: sticky;
		top: 120px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bast-faq__fluss path,
	.bast-faq__knoten circle {
		animation: none;
	}

	.bast-faq__antwort {
		transition: none;
	}

	.bast-faq__zeichen,
	.bast-faq__zeichen::before,
	.bast-faq__zeichen::after {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
   Abschnitts-Kopf: Nummer und Überschrift auf einer Grundlinie
   --------------------------------------------------------------------------- */

.bast-section-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 8px;
}

.bast-section-head__num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 0.875rem;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.1em;
}

/* Auf dunklem Grund wechselt die Nummer auf die helle Interaktionsfarbe */
.has-navy-background-color .bast-section-head__num {
	color: #3AA8F0;
}


/* ---------------------------------------------------------------------------
   Eyebrow – Kleinlabel über Überschriften
   --------------------------------------------------------------------------- */

.bast-eyebrow {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}


/* ---------------------------------------------------------------------------
   Zugänglichkeit
   --------------------------------------------------------------------------- */

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ===========================================================================
   Bausteine, die Website und Landingpages gemeinsam nutzen.
   Standen ursprünglich im Landingpage-CSS – dort wären sie auf normalen
   Seiten nicht geladen worden.
   =========================================================================== */

/* --- Häkchenlisten ------------------------------------------------------- */

.bast-checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.bast-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
	line-height: 1.45;
}

/* Häkchen als Hintergrundbild statt Inline-SVG – hält das Markup lesbar */
.bast-checks li::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E9E6B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.bast-checks.is-gold li {
	color: #5E4200;
	font-weight: 600;
}

.bast-checks.is-gold li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C08400' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}


/* --- Highlight-Band (Energieberatung) ------------------------------------ */

.bast-highlight {
	background: var(--wp--preset--color--surface-blue);
	border: 1px solid #CFE0EF;
	border-left: 5px solid var(--wp--preset--color--primary);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.bast-highlight__icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bast-highlight__icon svg {
	width: 28px;
	height: 28px;
	stroke: var(--wp--preset--color--base);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bast-highlight > div {
	flex: 1;
	min-width: 240px;
}

.bast-highlight h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.125rem, 2.3vw, 1.375rem);
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin: 4px 0;
}

.bast-highlight p:last-child {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--body);
}


/* --- Ablauf-Schritte -----------------------------------------------------
   Zahl im Kreis oben, darunter Titel und Text. Bei drei Schritten verbindet
   eine Linie hinter den Kreisen die Stationen – das macht aus drei Karten eine
   Abfolge. Die Linie liegt hinter den Kreisen und endet an den äußeren, damit
   sie nicht ins Leere läuft. */

.bast-steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	counter-reset: bast-schritt;
}

.bast-step {
	position: relative;
	z-index: 1;
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	text-align: center;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bast-step:hover {
	border-color: var(--bast-schritt-akzent, var(--wp--preset--color--primary));
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow--card);
}

.bast-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--bast-schritt-akzent, var(--wp--preset--color--primary));
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1;
	box-shadow: 0 0 0 6px var(--bast-schritt-weich, var(--wp--preset--color--surface-blue));
	transition: transform 0.2s ease;
}

.bast-step:hover .bast-step__num {
	transform: scale(1.06);
}

.bast-step__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bast-schritt-akzent, var(--wp--preset--color--primary));
}

.bast-step h3 {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

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

/* Farbnuance je Leistung, wie bei den Leistungskarten. */
.bast-steps.is-energie {
	--bast-schritt-akzent: var(--wp--custom--service--energie--accent);
	--bast-schritt-weich: var(--wp--custom--service--energie--soft);
}

.bast-steps.is-klima {
	--bast-schritt-akzent: var(--wp--custom--service--klima--accent);
	--bast-schritt-weich: var(--wp--custom--service--klima--soft);
}

.bast-steps.is-bad {
	--bast-schritt-akzent: var(--wp--custom--service--bad--accent);
	--bast-schritt-weich: var(--wp--custom--service--bad--soft);
}

.bast-steps.is-beratung {
	--bast-schritt-akzent: var(--wp--custom--service--beratung--accent);
	--bast-schritt-weich: var(--wp--custom--service--beratung--soft);
}

.bast-steps.is-wartung {
	--bast-schritt-akzent: var(--wp--custom--service--wartung--accent);
	--bast-schritt-weich: var(--wp--custom--service--wartung--soft);
}

@media (min-width: 760px) {
	.bast-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 26px;
	}

	/* Verbindungslinie hinter den Kreisen: beginnt in der Mitte der ersten
	   Spalte und endet in der Mitte der letzten. */
	.bast-steps::before {
		content: "";
		position: absolute;
		top: calc(var(--wp--preset--spacing--40) + 26px);
		left: 16.66%;
		right: 16.66%;
		height: 2px;
		background: var(--bast-schritt-weich, var(--wp--preset--color--surface-blue));
		z-index: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bast-step,
	.bast-step__num {
		transition: none;
	}

	.bast-step:hover {
		transform: none;
	}

	.bast-step:hover .bast-step__num {
		transform: none;
	}
}


/* --- Formular-Platzhalter ------------------------------------------------ */

.bast-form-slot {
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--preset--spacing--50);
	text-align: center;
	color: #C9D8E5;
	max-width: 820px;
	margin-inline: auto;
}




/* ---------------------------------------------------------------------------
   Kleinteile
   --------------------------------------------------------------------------- */

.bast-rounded img {
	border-radius: var(--wp--custom--radius--xl);
	display: block;
	width: 100%;
	height: auto;
}

.bast-rounded picture {
	display: block;
}

/* Der Formular-Platzhalter steht auf Landingpages auf Navy, auf der
   Anfrageseite dagegen auf hellem Grund. */
.bast-form-slot.is-light {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	margin-inline: 0;
}


/* ---------------------------------------------------------------------------
   Rückweg von den Landingpages auf die Website
   Sekundär gehalten: der primäre Weg bleibt die Anfrage.
   --------------------------------------------------------------------------- */

.bast-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 18px;
	padding: 7px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

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

.bast-back-link svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Im Fuß darf er deutlicher sein – hier ist der Funnel ohnehin zu Ende */
.bast-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 20px;
	padding: 11px 22px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--base);
	white-space: nowrap;
}

.bast-back-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.bast-back-btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* Auf schmalen Bildschirmen weicht der Kopf-Link, der Fuß-Button bleibt */
@media (max-width: 782px) {
	.bast-back-link span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.bast-back-link {
		margin-left: 10px;
		padding: 7px 10px;
	}
}


/* ---------------------------------------------------------------------------
   Bilddarstellung – Absicherung
   width/height am img sind für die Platzreservierung nötig, sonst springt
   das Layout beim Laden. Damit das Attribut aber nicht als feste Höhe wirkt
   und Bilder verzerrt oder gestaucht erscheinen, gilt global height:auto.
   --------------------------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

/* Bilder mit erzwungenem Seitenverhältnis nehmen ihre Höhe von dort */
img[style*="aspect-ratio"],
.bast-lp-hero__media img,
.bast-pillar > img {
	height: auto;
}


/* ---------------------------------------------------------------------------
   Partner-Logos und Siegel
   Die Logos kommen in unterschiedlichen Graustufen und Farbwelten. Damit das
   Band ruhig wirkt, laufen sie zurückgenommen und werden erst beim Überfahren
   voll sichtbar.
   --------------------------------------------------------------------------- */

/* Acht Marken – deshalb feste Spaltenzahlen statt auto-fit: 2 × 4 auf dem
   Handy, 4 × 2 ab Tablet. Beides geht glatt auf. Kommt eine Marke dazu oder
   fällt eine weg, muss dieses Raster mitwandern, sonst steht in der letzten
   Reihe wieder ein einzelnes Logo. */
.bast-partner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

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

.bast-partner__item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
}

.bast-partner__item img {
	max-width: 100%;
	height: auto;
	max-height: 52px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter 0.2s, opacity 0.2s;
}

.bast-partner__item:hover img {
	filter: none;
	opacity: 1;
}

.bast-seals {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bast-seals img {
	height: auto;
	max-height: 72px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}


/* ---------------------------------------------------------------------------
   Ansprechpartner
   --------------------------------------------------------------------------- */

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

.bast-team__card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--card);
	display: flex;
	flex-direction: column;
}

.bast-team__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-blue);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.0625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	flex-shrink: 0;
}

.bast-team__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin: 0 0 4px;
}

.bast-team__role {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin-bottom: 14px;
}

/* Kontaktzeilen ans Kartenende, damit sie über alle Karten fluchten */
.bast-team__contact {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.bast-team__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--body);
	word-break: break-word;
}

.bast-team__contact a:hover {
	color: var(--wp--preset--color--primary);
}

.bast-team__contact svg {
	width: 14px;
	height: 14px;
	stroke: var(--wp--preset--color--primary);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}


/* --- Öffnungszeiten und Referenzkategorien ------------------------------- */

.bast-hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px var(--wp--preset--spacing--40);
	margin: 0;
}

.bast-hours dt {
	font-weight: 700;
	color: var(--wp--preset--color--navy);
}

.bast-hours dd {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

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

.bast-refcat {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--body);
}

/* <picture> verhält sich standardmäßig wie inline – als Block gesetzt entstehen
   sonst unter jedem Bild ein paar Pixel Leerraum aus der Zeilenhöhe. */
picture {
	display: block;
}

picture img {
	max-width: 100%;
	height: auto;
}





/* ---------------------------------------------------------------------------
   Firmengeschichte als Reise
   Die Jahreszahl sitzt als kräftige Marke oben in der Karte statt neben der
   Linie – dadurch kann sie nichts überlappen und bleibt in jeder Breite lesbar.
   Auf Desktop verläuft die Reise waagerecht, auf schmalen Geräten senkrecht.
   --------------------------------------------------------------------------- */

.bast-journey {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	position: relative;
}

/* Die durchgehende Linie liegt hinter den Punkten */
.bast-journey::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 13px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--border) 0%,
		var(--wp--preset--color--primary) 55%,
		var(--wp--preset--color--bright) 100%
	);
}

.bast-journey__stop {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 8px;
	position: relative;
}

.bast-journey__marker {
	height: 29px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.bast-journey__dot {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 4px solid var(--wp--preset--color--primary);
	box-shadow: 0 0 0 5px var(--wp--preset--color--surface);
	transition: transform 0.2s;
}

.bast-journey__stop.is-today .bast-journey__dot {
	background: var(--wp--preset--color--bright);
	border-color: var(--wp--preset--color--bright);
	box-shadow: 0 0 0 5px var(--wp--preset--color--surface), 0 0 18px rgba(28, 156, 240, 0.6);
}

.bast-journey__card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: 20px 18px 18px;
	margin-top: 18px;
	text-align: center;
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
	transition: transform 0.2s, box-shadow 0.2s;
}

.bast-journey__stop:hover .bast-journey__card {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--md);
}

.bast-journey__stop:hover .bast-journey__dot {
	transform: scale(1.2);
}

.bast-journey__card.is-today {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

.bast-journey__year {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 10px;
}

.bast-journey__card.is-today .bast-journey__year {
	color: var(--wp--preset--color--bright);
}

.bast-journey__card h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin: 0 0 8px;
	text-wrap: balance;
}

.bast-journey__card.is-today h3 {
	color: var(--wp--preset--color--base);
}

.bast-journey__card p {
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.bast-journey__card.is-today p {
	color: #C4D2DE;
}

/* Ab Tablet abwärts senkrecht – waagerecht wird es sonst zu gedrängt */
@media (max-width: 900px) {
	.bast-journey {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
		max-width: 560px;
		margin-inline: auto;
	}

	.bast-journey::before {
		left: 13px;
		right: auto;
		top: 10px;
		bottom: 10px;
		width: 3px;
		height: auto;
		background: linear-gradient(
			180deg,
			var(--wp--preset--color--border) 0%,
			var(--wp--preset--color--primary) 55%,
			var(--wp--preset--color--bright) 100%
		);
	}

	.bast-journey__stop {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30);
		padding: 0;
	}

	.bast-journey__marker {
		height: auto;
		padding-top: 20px;
		flex-shrink: 0;
	}

	.bast-journey__card {
		margin-top: 0;
		text-align: left;
		flex: 1;
	}
}

/* Einblenden beim Hereinscrollen, wo der Browser das ohne Skript kann */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.bast-journey__stop {
			animation: bast-journey-in linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
	}
}

@keyframes bast-journey-in {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
   Stellenangebote
   --------------------------------------------------------------------------- */

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

.bast-job {
	--bast-accent: var(--wp--preset--color--primary);

	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--bast-accent);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--card);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
}

.bast-job:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
}

.bast-job.is-energie  { --bast-accent: var(--wp--custom--service--energie--accent); }
.bast-job.is-wartung  { --bast-accent: var(--wp--custom--service--wartung--accent); }
.bast-job.is-klima    { --bast-accent: var(--wp--custom--service--klima--accent); }
.bast-job.is-beratung { --bast-accent: var(--wp--custom--service--beratung--accent); }

.bast-job__art {
	display: inline-block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bast-accent);
	margin-bottom: 8px;
}

.bast-job h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1875rem;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	margin: 0 0 10px;
	text-wrap: balance;
}

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

.bast-job__link {
	margin-top: auto;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--bast-accent);
}

.bast-job__link:hover {
	color: var(--bast-accent);
	text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   Bewegung
   Einblenden beim Scrollen. Die Klasse "blendet-ein" setzt erst das Skript –
   ohne JavaScript bleibt alles sichtbar, es fehlt lediglich die Animation.
   --------------------------------------------------------------------------- */

.blendet-ein {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--bast-fade-delay, 0ms),
		transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) var(--bast-fade-delay, 0ms);
	will-change: opacity, transform;
}

.blendet-ein.ist-sichtbar {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.blendet-ein {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Sprungziele nicht unter dem klebenden Kopf verschwinden lassen. Der
   Fokusrahmen bleibt weg, weil das Ziel nur programmatisch fokussiert wird. */
.bast-anchor,
[id] {
	scroll-margin-top: 96px;
}

.bast-anchor:focus,
main :target:focus {
	outline: none;
}


/* ---------------------------------------------------------------------------
   Karriere-Hub: Vorteile, Teamkultur, Arbeitsalltag
   --------------------------------------------------------------------------- */

.bast-vorteile {
	display: grid;
	/* Wie viele Spalten auf dem Desktop, sagt das Pattern über --bast-spalten:
	   sechs Vorteile stehen 3 × 2, vier stehen 4 × 1. */
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

.bast-vorteil {
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
}

.bast-vorteil__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-blue);
	margin-bottom: 16px;
}

/* Ohne die Maßangabe skaliert das SVG auf die Schriftgröße hoch und ohne
   fill:none wird aus der Kontur eine schwarze Fläche. */
.bast-vorteil__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--wp--preset--color--primary);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bast-vorteil h3 {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 8px;
}

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

.bast-kultur {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.bast-kultur__media img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
}

.bast-kultur__text h2 {
	margin-top: 6px;
	margin-bottom: 14px;
}

.bast-kultur__text > p {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin-bottom: 20px;
}

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

.bast-alltag figure {
	margin: 0;
}

.bast-alltag img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--card);
}

.bast-alltag figcaption {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--body);
}

@media (max-width: 781px) {
	.bast-kultur {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------------------------
   Stellen-Landingpages
   --------------------------------------------------------------------------- */

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

.bast-stelle-spalten h2 {
	font-size: var(--wp--preset--font-size--large);
	margin: 6px 0 18px;
}

/*
 * Der Satz zum Ruf des Betriebs steht zwischen Vorteilen und Formular. Er
 * traegt ein echtes Argument und soll nicht wie eine Fussnote neben dem
 * Verweis auf die Karriereseite wirken - deshalb etwas mehr Gewicht.
 */
.bast-stelle-ruf {
	max-width: 46rem;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.bast-stelle-hinweis {
	margin-top: 20px;
	padding: 16px 18px;
	border-left: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface-blue);
	border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}

.bast-zurueck {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.bast-zurueck:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.bast-stelle-spalten {
		grid-template-columns: 1fr;
	}
}


/* Öffnungszeiten im Fußbereich */
.bast-footer__zeiten {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: #c4d2de;
}

.bast-footer__zeiten dt {
	font-weight: 600;
	color: #ffffff;
	margin-top: 10px;
}

.bast-footer__zeiten dt:first-child {
	margin-top: 0;
}

.bast-footer__zeiten dd {
	margin: 2px 0 0;
	line-height: 1.5;
}


/* ---------------------------------------------------------------------------
   Symmetrie der Raster

   Alle Raster bekommen feste Spaltenzahlen statt auto-fit. Der Grund: auto-fit
   füllt so viele Spalten, wie hineinpassen – bei acht Marken standen dann sieben
   nebeneinander und eine allein darunter, bei sechs Vorteilen vier und zwei.
   Die Zahlen sind so gewählt, dass die Elementzahl auf jeder Stufe aufgeht.

   Ändert sich die Zahl der Elemente in einem dieser Bereiche, gehört die
   Spaltenzahl hier mit angepasst.
   --------------------------------------------------------------------------- */

/* Dreier-Gruppen springen von einer direkt auf drei Spalten. Ein
   Zwischenschritt mit zwei Spalten würde immer eines übrig lassen. */
@media (min-width: 760px) {
	.bast-steps,
	.bast-alltag {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Gerade Anzahlen: zwei Spalten ab Tablet. */
@media (min-width: 600px) {
	.bast-stimmen,
	.bast-jobs,
	.bast-vorteile,
	.bast-team,
	.bast-service-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Fünf Leistungen gehen durch zwei nicht auf – die letzte Karte nimmt
	   deshalb beide Spalten ein, statt ein Loch zu hinterlassen. */
	.bast-service-grid > .bast-service-card:last-child {
		grid-column: 1 / -1;
	}
}

/* Zielaufteilung auf dem Desktop. */
@media (min-width: 1000px) {
	/* Sechs Stimmen: 3 × 2 */
	.bast-stimmen {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Vier Stellen nebeneinander, acht Ansprechpartner als 4 × 2 */
	.bast-jobs,
	.bast-team {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Sechs Vorteile stehen 3 × 2, vier stehen 4 × 1 – das Pattern gibt die
	   Zahl über --bast-spalten vor. */
	.bast-vorteile {
		grid-template-columns: repeat(var(--bast-spalten, 3), 1fr);
	}
}

@media (min-width: 1100px) {
	.bast-service-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.bast-service-grid > .bast-service-card:last-child {
		grid-column: auto;
	}
}


/* ---------------------------------------------------------------------------
   Kontaktwege
   --------------------------------------------------------------------------- */

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

.bast-weg {
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	box-shadow: var(--wp--custom--shadow--card);
}

.bast-weg__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-blue);
	margin-bottom: 18px;
}

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

.bast-weg h2 {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 8px;
}

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

/* Die Aktion sitzt unten, damit die drei Karten bündig abschließen. */
.bast-weg__aktion {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	word-break: break-word;
}

.bast-weg__aktion:hover {
	text-decoration: underline;
}

@media (min-width: 760px) {
	.bast-wege {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* Foto im Kopf der Leistungskarte. Der negative Rand zieht es bündig an die
   Kartenkanten, das Icon sitzt als Plakette halb darüber. */
/* Der Kindselektor ist nötig: WordPress setzt über
   :where(.is-layout-flow) > :first-child einen margin-block-start von 0 und
   würde den negativen Rand oben sonst aushebeln. */
.bast-service-card > .bast-service-card__bild {
	margin: calc(var(--bast-karte-innen) * -1);
	margin-bottom: 0;
	border-radius: calc(var(--wp--custom--radius--xl) - 4px) calc(var(--wp--custom--radius--xl) - 4px) 0 0;
	overflow: hidden;
	background: var(--bast-soft);
}

.bast-service-card__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.bast-service-card:hover .bast-service-card__bild img {
	transform: scale(1.04);
}

.bast-service-card__bild + .wp-block-group .bast-service-card__icon,
.bast-service-card__bild ~ .bast-service-card__icon {
	position: relative;
	margin-top: -26px;
	margin-bottom: 14px;
	border: 3px solid var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--sm);
}

@media (prefers-reduced-motion: reduce) {
	.bast-service-card:hover .bast-service-card__bild img {
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
   Hero der Stellenseiten

   Bewusst ein eigenes Raster statt wp-block-columns: Die Spaltenbreiten von
   WordPress stecken in einer erst beim Rendern erzeugten Klasse mit Hashwert
   (wp-container-core-columns-is-layout-…). Die lässt sich in einer PHP-Funktion
   nicht nachbauen – ohne sie stapeln die Spalten übereinander.
   --------------------------------------------------------------------------- */

.bast-stelle-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.bast-stelle-hero__text > :first-child {
	margin-top: 0;
}

@media (min-width: 900px) {
	.bast-stelle-hero {
		grid-template-columns: 1fr 0.85fr;
		gap: var(--wp--preset--spacing--60);
	}
}


/* ---------------------------------------------------------------------------
   Einwilligungs-Banner
   --------------------------------------------------------------------------- */

.bast-consent {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 44, 71, 0.45);
	backdrop-filter: blur(2px);
}

.bast-consent[hidden] {
	display: none;
}

.bast-consent__box {
	width: 100%;
	max-width: 640px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 20px 60px rgba(10, 44, 71, 0.35);
	padding: var(--wp--preset--spacing--40);
}

.bast-consent__box h2 {
	margin: 0 0 12px;
	font-size: 1.25rem;
}

.bast-consent__box > p {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.bast-consent__kategorie {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.bast-consent__kategorie strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	margin-bottom: 4px;
}

.bast-consent__kategorie p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* Schalter: Das echte Kontrollkästchen bleibt bedienbar und fokussierbar,
   sichtbar ist die gestaltete Fläche daneben. */
.bast-consent__schalter {
	position: relative;
	flex-shrink: 0;
	width: 48px;
	height: 28px;
	cursor: pointer;
}

.bast-consent__schalter input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bast-consent__schalter span[aria-hidden] {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--steel);
	transition: background-color 0.2s ease;
	pointer-events: none;
}

.bast-consent__schalter span[aria-hidden]::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s ease;
}

.bast-consent__schalter input:checked + span[aria-hidden] {
	background: var(--wp--preset--color--primary);
}

.bast-consent__schalter input:checked + span[aria-hidden]::after {
	transform: translateX(20px);
}

.bast-consent__schalter input:focus-visible + span[aria-hidden] {
	outline: 3px solid var(--wp--preset--color--bright);
	outline-offset: 2px;
}

.bast-consent__schalter.is-fest {
	cursor: default;
	opacity: 0.6;
}

.bast-consent__knoepfe {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 20px;
}

.bast-consent__btn {
	padding: 13px 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--body);
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.bast-consent__btn:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.bast-consent__btn.is-primaer {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.bast-consent__btn.is-primaer:hover {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

.bast-consent__btn.is-still {
	border-color: transparent;
	color: var(--wp--preset--color--muted);
}

.bast-consent__fuss {
	margin: 16px 0 0;
	text-align: center;
	font-size: 0.75rem;
	color: var(--wp--preset--color--subtle);
}

.bast-consent__fuss a {
	color: inherit;
}

.bast-consent__mehr {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Solange das Banner offen ist, soll die Seite dahinter nicht mitscrollen. */
body.hat-consent-banner {
	overflow: hidden;
}

@media (min-width: 620px) {
	.bast-consent {
		align-items: center;
	}

	.bast-consent__knoepfe {
		grid-template-columns: 1fr 1fr;
	}

	.bast-consent__btn.is-still {
		grid-column: 1 / -1;
	}
}


/* ---------------------------------------------------------------------------
   Erzeugte Bilder

   bast_picture() setzt weiterhin data-ki="1" anhand der Liste in
   bast_ki_bilder(), und das Startseiten-Hero trägt bast-ki-cover. Sichtbar ist
   davon auf Wunsch des Auftraggebers nichts – die Auszeichnung bleibt aber im
   Markup, damit sich eine Kennzeichnung jederzeit wieder einschalten lässt,
   ohne alle Bilder erneut durchgehen zu müssen.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Social-Profile im Kopfbereich
   --------------------------------------------------------------------------- */

.bast-social {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bast-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--wp--preset--color--navy);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.bast-social a:hover {
	background: var(--wp--preset--color--surface-blue);
	color: var(--wp--preset--color--primary);
}

.bast-social svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* Auf dunklem Grund – Kopfbereich der Landingpages und Fußbereich. */
.bast-lp-hero .bast-social a,
.wp-block-template-part footer .bast-social a,
.bast-footer .bast-social a {
	color: #c4d2de;
}

.bast-lp-hero .bast-social a:hover,
.wp-block-template-part footer .bast-social a:hover,
.bast-footer .bast-social a:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Im schmalen Kopfbereich hat das keinen Platz – dort stehen die Profile im
   Fußbereich zur Verfügung. */
@media (max-width: 860px) {
	.bast-header .bast-social {
		display: none;
	}
}




/* ---------------------------------------------------------------------------
   Mobil

   Alles unter 782px. Die Regeln stehen bewusst am Ende der Datei und mit
   Elternselektor: WordPress erzeugt für Gruppen Layout-Klassen mit derselben
   Spezifität, die sonst gewinnen, weil sie später eingebunden werden.
   --------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/* --- Kopfbereich: eine Zeile statt drei ---------------------------------
	   Logo, Telefon als Icon, Menü. Der Anfrage-Button entfällt – er steht
	   ohnehin gleich darunter im Hero und würde den halben Bildschirm kosten. */

	.bast-header .wp-block-site-logo img {
		max-height: 42px;
		width: auto;
	}

	.bast-header .bast-header__aktionen {
		gap: 8px;
	}

	/* Das Menü gehört an den äußeren Rand – so kennt man es vom Handy. */
	.bast-header .bast-header__phone {
		order: -1;
	}

	.bast-header .bast-header__phone {
		display: flex;
	}

	.bast-header .bast-phone.is-button {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
	}

	.bast-header .bast-phone.is-button span {
		display: none;
	}

	/* Der kurze Kontakt-Button passt auch aufs Handy – anders als der frühere
	   Anfrage-Button, der dort zu breit war. */
	.bast-header .wp-block-button__link {
		padding: 11px 18px;
		font-size: 0.9375rem;
	}

	/* Der Menü-Öffner war 24px groß – zu klein für einen Daumen. */
	.bast-header .wp-block-navigation__responsive-container-open,
	.bast-header .wp-block-navigation__responsive-container-close {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bast-header .wp-block-navigation__responsive-container-open svg,
	.bast-header .wp-block-navigation__responsive-container-close svg {
		width: 26px;
		height: 26px;
	}

	/* Im aufgeklappten Menü haben die Einträge Fingergröße. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		padding: 12px 0;
		font-size: 1.125rem;
	}

	/* --- Kopfbereich der Landing- und Karriereseiten ---------------------- */

	.bast-back-link,
	.bast-back-btn {
		min-height: 44px;
	}

	/* --- Textlinks, die wie Schaltflächen wirken -------------------------- */

	.bast-job__link,
	.bast-weg__aktion,
	.bast-service-card__link a,
	.bast-galerie__btn,
	.bast-zurueck {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* --- Fußbereich: Links auseinanderziehen ------------------------------ */

	.bast-footer__list li {
		margin-bottom: 4px;
	}

	.bast-footer__list a,
	.bast-footer__legal a {
		display: inline-block;
		padding: 10px 0;
	}

	/* Der Logo-Link ist ohne das nur ein paar Pixel hoch. */
	.custom-logo-link {
		display: inline-block;
		line-height: 0;
	}

	.bast-footer__cols {
		gap: var(--wp--preset--spacing--40);
	}

	/* --- Lesbarkeit ------------------------------------------------------- */

	/* 11px ist auf dem Handy zu klein, auch für eine Fußnote. */
	.bast-autark__note {
		font-size: 0.75rem;
	}

	/* Überschriften brauchen mobil weniger Wucht, sonst füllt eine Zeile den
	   halben Bildschirm. */
	.bast-lp-hero h1,
	.wp-block-cover h1 {
		font-size: clamp(2rem, 8.5vw, 2.6rem);
		line-height: 1.12;
	}

	.bast-lp-hero__lead,
	.bast-lp-hero p {
		font-size: 1.0625rem;
	}

	/* --- Einwilligungs-Banner --------------------------------------------- */

	.bast-consent__box {
		padding: var(--wp--preset--spacing--30);
	}

	.bast-consent__btn {
		min-height: 48px;
	}

	/* --- Vorher-Nachher-Regler -------------------------------------------- */

	/* Größerer Griff, damit er sich mit dem Daumen fassen lässt. */
	.bast-vergleich__griff {
		width: 52px;
		height: 52px;
	}

	.bast-vergleich__marke {
		font-size: 0.6875rem;
		padding: 5px 10px;
	}

	/* --- Formulare -------------------------------------------------------- */

	.bast-formcard {
		padding: var(--wp--preset--spacing--30);
	}

	.bast-step-btn {
		min-height: 48px;
	}

	.bast-formcard .ff-btn-submit {
		width: 100%;
		min-height: 52px;
	}
}


/* Der Kopfbereich soll auf dem Desktop in einer Zeile stehen: Logo, Menü,
   Social-Profile, Telefon und Anfrage-Button. Mit den Social-Icons wurde es
   knapp – deshalb rücken die Menüpunkte unterhalb von 1400px enger zusammen. */
/* Seit der Telefon-Button und der Menüpunkt "Kontakt" weg sind, ist im
   Kopfbereich reichlich Platz – die Menüpunkte dürfen wieder Luft haben.
   Erst unter 1000px rücken sie enger zusammen. */
@media (max-width: 999px) and (min-width: 861px) {
	.bast-nav {
		gap: 24px;
	}
}


/* Menüpunkte und Anfrage-Button dürfen nie in sich umbrechen. */
.bast-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
}

/* Ohne das bricht "Über uns" mitten im Menüpunkt auf zwei Zeilen um. */
.bast-nav .wp-block-navigation-item__content {
	white-space: nowrap;
}

.bast-header .wp-block-button__link {
	white-space: nowrap;
}

.bast-phone.is-button span {
	white-space: nowrap;
}

/* Unterhalb von 1000px wird es mit fünf Menüpunkten, Telefon und Anfrage-Button
   zu eng – ab hier übernimmt das Menü hinter dem Symbol. WordPress schaltet
   von Haus aus erst bei 600px um, das ist für diesen Kopfbereich zu spät. */
@media (max-width: 860px) {
	.bast-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.bast-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.bast-header .wp-block-navigation__responsive-container-open svg {
		width: 26px;
		height: 26px;
	}
}


/* ---------------------------------------------------------------------------
   Menü-Overlay und Weichzeichner

   backdrop-filter eröffnet einen eigenen Bezugsrahmen. Ein Kind mit
   position: fixed richtet sich dann am Header aus statt am Bildschirm – das
   aufgeklappte Menü war dadurch auf Headerhöhe zusammengestaucht (372 x 78
   statt 375 x 812). Solange das Menü offen ist, bleibt der Weichzeichner
   deshalb aus.
   --------------------------------------------------------------------------- */

.bast-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: var(--wp--preset--color--base);
}

/* Das Overlay selbst soll über allem liegen, auch über dem Einwilligungs-Banner
   wäre falsch – aber über dem Seiteninhalt muss es sicher sein. */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 100;
}


/* ---------------------------------------------------------------------------
   Kopfbereich der Unterseiten auf dem Handy

   Vorher stand hier zweierlei übereinander: Logo mit Zurück-Pfeil in einer
   Zeile, Telefon und Schaltfläche in der nächsten – zusammen 141 Pixel. Die
   inneren Gruppen sind mit umgebrochen, weil nur der äußere Container auf
   nowrap stand.
   --------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/* Keine der inneren Gruppen darf umbrechen. */
	.bast-header .wp-block-group .wp-block-group {
		flex-wrap: nowrap;
		gap: 10px;
	}

	/* Auf den Leistungsseiten führt der Zurück-Link zur Startseite – genau
	   dorthin führt auch das Logo daneben. Mobil ist er deshalb doppelt und
	   kostet nur eine Zeile. Im Fußbereich steht der Weg zurück weiterhin
	   ausgeschrieben. */
	.bast-header.is-landingpage .bast-back-link {
		display: none;
	}

	/* Im Karrierebereich zeigt der Link auf den Karriere-Hub und ist damit
	   nicht ersetzbar – dort weicht stattdessen die Schaltfläche, denn
	   "Jetzt bewerben" steht direkt darunter im Hero. */
	.bast-header.is-karriere .wp-block-buttons {
		display: none;
	}

	/* Ohne flex-shrink quetscht die Zeile die Beschriftung auf einen Pixel
	   zusammen – übrig bleibt ein Pfeil, der nichts erklärt. */
	.bast-header.is-karriere .bast-back-link {
		gap: 6px;
		padding: 0 14px 0 10px;
		font-size: 0.875rem;
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* Weiter oben wird der Text auf schmalen Bildschirmen versteckt. Im
	   Karrierebereich muss er sichtbar bleiben: Dort führt der Link nicht zur
	   Startseite, sondern zurück zu den Stellen – ein Pfeil allein erklärt das
	   nicht. */
	.bast-header.is-karriere .bast-back-link span {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		flex-shrink: 0;
	}

	.bast-header.is-karriere .wp-block-site-logo {
		flex-shrink: 1;
		min-width: 0;
	}

	.bast-header.is-landingpage .wp-block-site-logo img,
	.bast-header.is-karriere .wp-block-site-logo img {
		max-height: 38px;
	}
}


/* ---------------------------------------------------------------------------
   Bild und Text nebeneinander

   Dieselbe Aufteilung wie die Teamkultur auf der Karriereseite, hier als
   eigener Baustein für die Leistungsseiten. Mit is-bild-rechts wechselt die
   Seite, damit sich mehrere Abschnitte abwechseln können.
   --------------------------------------------------------------------------- */

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

.bast-bildtext__media img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
}

.bast-bildtext__text h2 {
	margin: 6px 0 14px;
}

.bast-bildtext__text > p {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0 0 20px;
}

@media (min-width: 900px) {
	.bast-bildtext {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}

	.bast-bildtext.is-bild-rechts .bast-bildtext__media {
		order: 2;
	}
}


/* ---------------------------------------------------------------------------
   Teilsanierung im Bad – Text mit Auszeichnung daneben
   --------------------------------------------------------------------------- */

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

.bast-teilsanierung__text h2 {
	margin: 6px 0 16px;
}

.bast-teilsanierung__text > p {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0 0 22px;
}

.bast-teilsanierung__siegel {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	box-shadow: var(--wp--custom--shadow--card);
}

.bast-teilsanierung__siegel img {
	width: auto;
	max-width: 260px;
	max-height: 110px;
	height: auto;
	margin: 0 auto 18px;
	object-fit: contain;
}

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

@media (min-width: 900px) {
	.bast-teilsanierung {
		grid-template-columns: 1.35fr 0.65fr;
		gap: var(--wp--preset--spacing--60);
	}
}