/* Kleine Helfer fuer die generierte Elementor-Startseite:
   einheitliche Icon-Kacheln, Karten-Bilder, Prozess-Verbindungslinie. */

/* Einheitliche Icon-Form: abgerundetes Quadrat, 1px Goldrahmen */
.bwb-icon-tile .elementor-icon {
	border-width: 1px;
	border-radius: 14px;
}

/* Leistungen: Kartenbilder mit fester Hoehe, immer gleich hoch */
.bwb-card-img img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	.bwb-card-img img {
		height: 200px;
	}
}

/* Hero: Standard-Absatzabstand des Untertexts entfernen, damit der
   einheitliche Container-Gap (Ueberschrift/Text/Buttons) sauber greift. */
.bwb-hero .elementor-widget-text-editor p {
	margin: 0;
}

/* ============================ Header ============================ */
.bwb-site-header {
	position: relative;
	z-index: 20;
}

/* Blauer Header-Hintergrund auf allen Seiten ausser der Startseite (dort
   in Elementor bewusst transparent, damit er ueber dem Hero-Bild liegt).
   !important noetig, da Elementor die eigene Hintergrundfarbe je Element
   spezifischer (ID-Klasse) ausgibt. */
body:not(.home) .bwb-site-header {
	background-color: #002730 !important;
}

.bwb-header-main {
	min-height: 62px;
}

/* Logo: kein Eigen-Padding/-Margin, vertikal zentriert in der Zeile */
.bwb-header-logo,
.bwb-header-logo .elementor-widget-container {
	margin: 0;
	padding: 0;
}

.bwb-header-logo img {
	display: block;
	height: auto;
}

.bwb-header-actions {
	min-width: 0;
}

.bwb-header-actions > .bwb-header-nav {
	flex: 0 1 auto;
	min-width: 0;
}

.bwb-header-icons {
	flex: 0 0 auto;
}

.bwb-header-icons .elementor-widget-icon,
.bwb-header-topbar .elementor-widget-icon {
	margin-bottom: 0;
	width: auto;
}

.bwb-social-icon .elementor-icon,
.bwb-header-link-icon .elementor-icon {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
}

/* Mobile Top-Leiste mit den 4 Icons: standardmaessig aus. */
.bwb-header-topbar {
	display: none;
}

/* Ab Tablet/Mobil (Burger-Breakpoint): Top-Leiste an, Inline-Icons aus.
   Das Menue oeffnet dank nav-menu "full_width: stretch" ueber die volle Breite. */
@media (max-width: 1024px) {
	.bwb-header-topbar {
		display: flex;
		padding: 8px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.bwb-header-icons {
		display: none;
	}

	.bwb-header-actions {
		flex: 0 0 auto;
	}
}

@media (max-width: 767px) {
	.bwb-header-link-icon .elementor-icon {
		width: 34px;
		height: 34px;
	}
}

@media (max-width: 360px) {
	.bwb-header-topbar {
		gap: 10px !important;
	}

	.bwb-header-link-icon .elementor-icon {
		width: 32px;
		height: 32px;
	}
}

/* Leistungen: Karten-Body waechst mit, Button immer unten buendig */
.bwb-service-card,
.elementor-element:has(> .elementor-widget-image.bwb-card-img) {
	min-width: 0;
}

.bwb-card-body {
	flex-grow: 1;
}

/* Standard-Absatzabstand der Beschreibung entfernen (sonst zusaetzlicher
   Leerraum unter dem Text; Abstand wird ueber den Container-Gap geregelt). */
.bwb-card-body .elementor-widget-text-editor p {
	margin: 0;
}

.bwb-card-body .elementor-widget-button {
	margin-top: auto !important;
	padding-top: 10px;
}

/* Ganze Leistungs-Karte anklickbar → fuehrt zur Kategorie-Detailseite
   (Stretched-Link ueber den Button, ohne verschachteltes <a>).
   Gesamte Kette bis zum Button auf position:static zwingen (Elementor
   setzt auf .bwb-card-body und .elementor-widget-container von Haus aus
   position:relative, das wuerde den Bezug des ::after sonst auf den
   Body statt die ganze Karte verkleinern), damit das ::after als
   Bezug die Karte (position:relative) nimmt und sie voll ueberdeckt. */
.bwb-service-card {
	position: relative;
	cursor: pointer;
}

.bwb-service-card .bwb-card-body,
.bwb-service-card .elementor-widget-button,
.bwb-service-card .elementor-widget-container,
.bwb-service-card .elementor-button-wrapper,
.bwb-service-card a.elementor-button {
	position: static;
}

.bwb-service-card a.elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}

@media (max-width: 767px) {
	.bwb-services-grid {
		display: flex;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;	
	}

	/* Fallback fuer bereits generierte Elementor-Seiten ohne neue Klassen. */
	.elementor-element:has(> .elementor-widget-image.bwb-card-img) {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
		margin: 0 0 28px !important;
	}

	.bwb-services-grid > .bwb-service-card {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		align-self: stretch !important;
		margin: 0 !important;
	}

	.bwb-card-img {
		flex: 0 0 auto;
	}

	.bwb-card-body {
		flex: 0 0 auto;
		min-height: auto;
	}

	.bwb-card-body .elementor-widget-icon {
		margin-top: -44px !important;
		margin-bottom: 12px !important;
	}
}

/* So arbeite ich: Kreis-Icons mit durchgehender gestrichelter Linie dahinter.
   Die Linie liegt in jeder Spalte auf voller Breite bei 43px (= Kreis-Mitte,
   relativ zur Spalte — unabhaengig vom Innenabstand der Zeile). Die Spalten
   stossen aneinander, dadurch wirkt die Linie durchgehend. */
.bwb-steps > .e-con {
	padding-right: 30px;
}

.bwb-steps > .e-con:last-child {
	padding-right: 0;
}

@media (min-width: 1025px) {
	.bwb-steps > .e-con {
		position: relative;
	}

	.bwb-steps > .e-con::before {
		content: '';
		position: absolute;
		top: 43px;
		left: 0;
		right: 0;
		border-top: 1px dashed #CA9453;
		opacity: 0.6;
	}

	/* Letzte Spalte: Linie endet in der Mitte des letzten Icons
	   (Kreis-Radius ≈ 43px), statt bis zum rechten Rand durchzulaufen. */
	.bwb-steps > .e-con:last-child::before {
		right: auto;
		width: 43px;
	}
}

/* Icons liegen ueber der Linie; dunkler Kreis-Hintergrund verdeckt sie */
.bwb-steps .elementor-widget-icon {
	position: relative;
	z-index: 1;
}

.bwb-icon-circle .elementor-icon {
	border-width: 1px;
}

/* Kontakt-Karte: vertikale Trennlinie zwischen Formular und Infos */
@media (min-width: 768px) {
	.bwb-kontakt-info {
		border-left: 1px solid rgba(255, 255, 255, 0.14);
		padding-left: 50px !important;
	}
}

@media (max-width: 767px) {
	.bwb-kontakt-info {
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		padding-top: 32px !important;
	}
}