/* =========================================================
   beegy Relaunch 2026, zentrales CSS (webtofly GmbH)
   Regeln: jede Regel mit Präfix .beegy- und Kommentar
   (was, warum, welche Seite). Farben nur über die
   Elementor-Variablen (--beegy-*), keine Hex-Werte.
   Ausnahme: transparente Schatten (#RRGGBBAA), weil
   Variablen dort nicht mit Deckkraft kombinierbar sind.
   ========================================================= */

/* Pseudo-Elemente rechnen Rahmen und Innenabstand ein (Lehre aus den Mockups). Alle Seiten. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Bildflächen und Mathilda-Formen laufen bewusst bis an den Fensterrand: kein horizontales Scrollen.
   clip statt hidden, damit der klebende Header weiter funktioniert. Alle Seiten. */
html,
body {
	overflow-x: clip;
}

/* ---------------------------------------------------------
   Barrierefreiheit, alle Seiten
   --------------------------------------------------------- */

/* Sichtbarer Fokus für Tastaturnutzer (WCAG 2.4.7). Blau-Text hat 5,9:1 auf Weiß. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body summary:focus-visible,
body [tabindex]:focus-visible {
	outline: 3px solid var(--beegy-blau-text);
	outline-offset: 2px;
}

/* Auf dunklen Flächen (Footer, Header über dem Aufmacher) weißer Fokusrahmen. */
.beegy-footer a:focus-visible,
body.home:not(.beegy-header-fest) .beegy-header a:focus-visible,
body.home:not(.beegy-header-fest) .beegy-header .elementor-menu-toggle:focus-visible {
	outline-color: var(--beegy-weiss);
}

/* Reduzierte Bewegung: alle Übergänge und Animationen praktisch aus (WCAG 2.3.3). */
@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;
	}
}

/* ---------------------------------------------------------
   Header (Theme Builder „beegy Header“), alle Seiten
   --------------------------------------------------------- */

/* Header klebt oben. Sticky auf den Location-Wrapper, nicht auf das Atomic-Element (siehe elementor-v4.md). */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
body.admin-bar .elementor-location-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Standard auf Unterseiten: weißer Header mit feiner Linie. */
.elementor .beegy-header {
	background-color: var(--beegy-weiss);
	box-shadow: 0 1px 0 #1b273314;
}

/* Startseite: Header liegt über dem Vollbild-Aufmacher (Mockup v4, Entwurf 2). */
body.home .elementor-location-header {
	position: fixed;
	left: 0;
	right: 0;
}

/* Startseite oben: transparent, bis relaunch.js nach 40 px Scrollen .beegy-header-fest setzt
   oder das Mobilmenü offen ist. */
body.home:not(.beegy-header-fest) .elementor .beegy-header:not(:has(.elementor-menu-toggle.elementor-active)) {
	background-color: transparent;
	box-shadow: none;
}

/* Beim Scrollen wird der Header etwas flacher (Mockup: 88 auf 74 px, Logo 52 auf 46 px). Nur Desktop. */
@media (min-width: 768px) {
	body.beegy-header-fest .elementor .beegy-header-innen,
	body:not(.home) .elementor .beegy-header-innen {
		min-height: 74px;
	}
	body.beegy-header-fest .elementor .beegy-logo,
	body:not(.home) .elementor .beegy-logo {
		height: 46px;
	}
	.elementor .beegy-header-innen,
	.elementor .beegy-logo {
		transition: min-height 0.35s ease, height 0.35s ease;
	}
}

/* ---------------------------------------------------------
   Hauptnavigation (Nav-Menü-Widget im Header), alle Seiten
   --------------------------------------------------------- */

/* Das Nav-Menü-Widget (v3) dehnt sich sonst auf die volle Breite und schiebt Menü und Shop nach links.
   Der Logo-Link darf nicht schrumpfen, sonst fällt das Logo auf 0 px Breite. */
.elementor .beegy-nav {
	flex: 0 0 auto;
	width: auto;
}
.beegy-header-innen > .e-image-link-base {
	flex: 0 0 auto;
	display: block;
}
.beegy-nav > .elementor-widget-nav-menu {
	flex: 0 0 auto;
	width: auto;
}

/* Abstand zwischen den Menüpunkten wie im Mockup (32 px). */
.beegy-nav .elementor-nav-menu--main > .elementor-nav-menu {
	gap: 32px;
}

/* Pfeil der Untermenüs dicht am Menüpunkt. */
.beegy-nav .elementor-nav-menu--main .elementor-item .sub-arrow {
	padding: 0 0 0 6px;
}

/* Menüpunkte: Fira Sans 18 px fett (größer auf Wunsch von beegy, 06.10.2026), orangefarbene Unterstreichung beim Hover. */
.beegy-nav .elementor-nav-menu--main .elementor-item {
	font-family: var(--beegy-schrift), sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--beegy-text);
	padding: 6px 0;
	margin: 0;
}
/* Elementor setzt bei Hover und Fokus 20 px Innenabstand, dadurch sprangen die Menüpunkte. */
.elementor .beegy-nav .elementor-nav-menu--main .elementor-item:is(:hover, :focus, .elementor-item-active, .highlighted) {
	padding: 6px 0;
}
.beegy-nav .elementor-nav-menu--main .elementor-item:hover,
.beegy-nav .elementor-nav-menu--main .elementor-item:focus,
.beegy-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--beegy-text);
}
.beegy-nav .e--pointer-underline .elementor-item::after {
	background-color: var(--beegy-orange);
	height: 2px;
}

/* Startseite oben: Menüpunkte weiß auf dem Aufmacher. */
body.home:not(.beegy-header-fest) .beegy-nav .elementor-nav-menu--main .elementor-item {
	color: var(--beegy-weiss);
}

/* Untermenüs (Desktop): weiße Fläche, Schatten, Fira Sans 17 px. */
.beegy-nav .elementor-nav-menu--main .elementor-nav-menu--dropdown {
	background-color: var(--beegy-weiss);
	border-radius: 12px;
	box-shadow: 0 20px 30px #00000024;
	padding: 8px 0;
	min-width: 260px;
}
.beegy-nav .elementor-nav-menu--dropdown .elementor-sub-item {
	font-family: var(--beegy-schrift), sans-serif;
	font-size: 17px;
	font-weight: 400;
	color: var(--beegy-text);
	background-color: transparent;
	padding: 10px 20px;
}
.beegy-nav .elementor-nav-menu--dropdown .elementor-sub-item:hover,
.beegy-nav .elementor-nav-menu--dropdown .elementor-sub-item:focus {
	color: var(--beegy-blau-text);
	background-color: var(--beegy-blau-hell);
}

/* Menü-Umschalter (Tablet und Mobil): runder Rahmen wie im Mockup, Farbe je nach Header-Zustand. */
.beegy-nav .elementor-menu-toggle {
	background-color: transparent;
	border: 2px solid var(--beegy-linie);
	border-radius: 10px;
	color: var(--beegy-text);
	font-size: 22px;
	padding: 8px;
}
.beegy-nav .elementor-menu-toggle svg {
	fill: currentColor;
}
body.home:not(.beegy-header-fest) .beegy-header:not(:has(.elementor-menu-toggle.elementor-active)) .elementor-menu-toggle {
	color: var(--beegy-weiss);
	border-color: var(--beegy-weiss);
	background-color: #00000059;
}

/* Hauptmenü nach Caros Briefing (6 Punkte, 06.10.2026) braucht bei 18 px rund 860 px.
   1200 bis 1299 px: engere Abstände. Bis 1199 px: Burger-Menü wie auf dem Tablet
   (Elementor schaltet erst bei 1024 px um, deshalb hier nachgezogen). */
@media (min-width: 1200px) and (max-width: 1299px) {
	.beegy-nav .elementor-nav-menu--main > .elementor-nav-menu {
		gap: 22px;
	}
}
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor .beegy-nav .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
		display: none;
	}
	.elementor .beegy-nav .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
		display: flex;
	}
	.elementor .beegy-nav .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown {
		display: block;
	}
}

/* Aufgeklapptes Mobilmenü: volle Breite unter dem Header (Fix aus elementor-v4.md:
   Widget statisch, Dropdown top 100 %, links 0, Breite 100 %). Gilt bis 1199 px (siehe oben). */
@media (max-width: 1199px) {
	/* Bezugsrahmen für das Dropdown ist der Header-Innencontainer, nicht der Navigationsbereich. */
	.elementor .beegy-nav,
	.elementor .beegy-nav .elementor-widget-nav-menu {
		position: static;
	}
	.elementor .beegy-header-innen {
		position: relative;
	}
	/* Mobil: Shop vor dem Menüknopf, der Knopf steht ganz rechts (übliche Position). */
	.elementor .beegy-nav .beegy-btn-shop {
		order: -1;
	}
	.beegy-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		top: 100% !important;
		margin-top: 0;
		left: 0 !important;
		width: 100% !important;
		background-color: var(--beegy-weiss);
		box-shadow: 0 20px 30px #00000024;
		padding: 12px 0 20px;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	.beegy-nav .elementor-nav-menu--dropdown .elementor-item {
		font-family: var(--beegy-schrift), sans-serif;
		font-size: 19px;
		font-weight: 700;
		color: var(--beegy-text);
		background-color: transparent;
		padding: 12px 20px;
	}
	.beegy-nav .elementor-nav-menu--dropdown .elementor-item:hover,
	.beegy-nav .elementor-nav-menu--dropdown .elementor-item:focus {
		color: var(--beegy-blau-text);
		background-color: var(--beegy-blau-hell);
	}
	.beegy-nav .elementor-nav-menu--dropdown .elementor-sub-item {
		font-size: 17px;
		padding: 10px 20px 10px 40px;
	}
}

/* Shop-Knopf im Header: Fokusrahmen auch auf Orange sichtbar. */
.beegy-btn-shop:focus-visible {
	outline-offset: 3px;
}

/* ---------------------------------------------------------
   Footer (Theme Builder „beegy Footer“), alle Seiten
   --------------------------------------------------------- */

/* Grundschrift im Footer: 15 px, helles Grau auf Textfarbe (Kontrast 10:1).
   overflow clip statt hidden: Sonst verschiebt der Browser den Footer seitlich,
   wenn ein Link per Tastatur den Fokus bekommt (die Welle ragt rechts hinaus). */
.elementor .beegy-footer {
	overflow: clip;
	font-family: var(--beegy-schrift), sans-serif;
	font-size: 15px;
	color: var(--beegy-linie);
}

/* Mathilda-Welle rechts unten, rein dekorativ, begrenzt und nie hinter Text:
   Die Inhalte liegen mit z-index 2 darüber, rechts unten steht kein Text. */
.elementor .beegy-footer::after {
	content: "";
	height: auto;
	top: auto;
	left: auto;
	position: absolute;
	right: -6vw;
	bottom: -130px;
	width: min(40vw, 560px);
	aspect-ratio: 1000 / 415.8;
	background: url("../img/mathilda-welle.svg") no-repeat center / contain;
	pointer-events: none;
	z-index: 1;
}
@media (max-width: 767px) {
	.elementor .beegy-footer::after {
		width: min(80vw, 420px);
		right: -30vw;
		bottom: -80px;
	}
}

/* Footer-Links: weiß, ohne Zeiger-Effekt. Hover und Fokus in beegy-orange-3 mit Unterstreichung:
   #ef7c49 hat auf der Footer-Fläche (beegy-text) 5,5:1, das Original-Orange nur 3,7:1. */
.beegy-footer .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: wrap;
	gap: 14px 32px;
	max-width: 680px;
}
.beegy-footer .elementor-nav-menu--main .elementor-item {
	font-family: var(--beegy-schrift), sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--beegy-weiss);
	padding: 0;
}
.elementor .beegy-footer .elementor-nav-menu--main .elementor-item:is(:hover, :focus, .elementor-item-active, .highlighted) {
	padding: 0;
	color: var(--beegy-orange-3);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Copyright und powered by: links nebeneinander, damit rechts unten Platz für die Welle bleibt. */
.elementor .beegy-footer-fuss {
	justify-content: flex-start;
	column-gap: 32px;
}
.beegy-footer-zeile a {
	color: var(--beegy-weiss);
	text-decoration: none;
}
.elementor .beegy-footer .beegy-footer-zeile a:hover,
.elementor .beegy-footer .beegy-footer-zeile a:focus {
	color: var(--beegy-orange-3);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================
   Startseite (Seite „Startseite“, Vorlage Mockups/v4)
   Die Sektionen tragen die Klasse .beegy-block. Texte, Bilder
   und Buttons liegen in nativen Widgets, hier steht nur die
   feste Gestaltung. Platzhalter-Verläufe (.beegy-ph-*) sind
   vorläufig und entfallen mit den echten Fotos von beegy.
   ========================================================= */

/* Seitenrand wie im Mockup: 32 px, ab 980 px Breite 20 px. Startseite. */
:root {
	--beegy-rand: 32px;
}
@media (max-width: 980px) {
	:root {
		--beegy-rand: 20px;
	}
}

/* Atomic-Container bringen 10 px Innenabstand, 30 px Mindestbreite und 100 % Breite mit.
   Auf der Startseite aus, damit Flex-Reihen (z. B. Text und Video-Knopf im Aufmacher) nebeneinander passen. */
.elementor .beegy-block,
.elementor .beegy-block .e-con {
	padding: 0;
	min-width: 0;
}
.elementor .beegy-block .e-con {
	width: auto;
}
.elementor .beegy-block {
	display: block;
	position: relative;
	width: 100%;
	font-family: var(--beegy-schrift), sans-serif;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-innen {
	width: 100%;
	max-width: calc(1280px + 2 * var(--beegy-rand));
	margin-inline: auto;
	padding-inline: var(--beegy-rand);
}

/* Sprungziele (#loesungen, #kontakt) nicht unter dem festen Header verstecken. */
.elementor .beegy-block[id] {
	scroll-margin-top: 80px;
}

/* Texte: Atomic-Überschriften sind ungestylt (all: unset), Grundwerte hier setzen. */
.elementor .beegy-block :is(h1, h2, h3) {
	display: block;
	font-family: var(--beegy-schrift), sans-serif;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.elementor .beegy-block p {
	display: block;
	margin: 0;
}
.elementor .beegy-block .beegy-intro {
	font-size: 19px;
	line-height: 1.6;
	color: var(--beegy-text-2);
	max-width: 34em;
}
.elementor .beegy-block .beegy-h2 {
	margin-bottom: 20px;
}

/* Pfeil an Buttons und Textlinks (Klasse beegy-pfeil), rein dekorativ per CSS-Maske. */
.elementor .beegy-pfeil {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.elementor .beegy-pfeil::after {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.25s ease;
}
.elementor .beegy-pfeil:hover::after {
	transform: translateX(4px);
}

/* Textlink: fett, blau, unterstrichen, Hover orange (Startseite, später Unterseiten). */
.elementor .beegy-textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--beegy-schrift), sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--beegy-blau-text);
	background-color: transparent;
	padding: 0 0 2px;
	border: 0;
	border-bottom: 2px solid currentColor;
	border-radius: 0;
	text-decoration: none;
	text-align: left;
}
.elementor .beegy-textlink:hover,
.elementor .beegy-textlink:focus {
	color: var(--beegy-orange-text);
	background-color: transparent;
}

/* Pause-Knöpfe für Laufband und Video (WCAG 2.2.2). Mechanik in relaunch.js.
   Mit .elementor davor, sonst gewinnt der orange Button-Stil aus dem Kit. */
.elementor .beegy-pause {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 2px solid var(--beegy-linie);
	border-radius: 999px;
	padding: 6px 14px;
	font-family: var(--beegy-schrift), sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--beegy-text-2);
	cursor: pointer;
}
.elementor .beegy-pause:hover,
.elementor .beegy-pause:focus {
	background: none;
	border-color: var(--beegy-text-2);
	color: var(--beegy-text);
}
.elementor .beegy-pause svg {
	width: 12px;
	height: 12px;
}
.elementor .beegy-pause.beegy-pause-video,
.elementor .beegy-pause.beegy-pause-video:hover,
.elementor .beegy-pause.beegy-pause-video:focus {
	background-color: #00000066;
	border-color: #ffffff99;
	color: var(--beegy-weiss);
	padding: 10px 18px;
	font-size: 15px;
}

/* Platzhalter für Fotos und Video (vorläufig): Verlauf plus feine Schraffur. */
.elementor .beegy-block .beegy-ph {
	position: relative;
	overflow: clip;
	background: #cfc7bf;
}
.elementor .beegy-block .beegy-ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(135deg, #ffffff12 0 2px, transparent 2px 16px);
	pointer-events: none;
	z-index: 1;
}
.elementor .beegy-block .beegy-ph-dach { background: radial-gradient(70% 60% at 72% 28%, #fff1d6 0, #ffc27e 18%, #f08a4b 36%, #f08a4b00 62%), linear-gradient(180deg, #f7b27a 0, #d8703f 40%, #6d4636 72%, #2d2522 100%); }
.elementor .beegy-block .beegy-ph-innen { background: radial-gradient(80% 70% at 70% 30%, #f7efe6 0, #e3d6c8 40%, #e3d6c800 75%), linear-gradient(160deg, #cfd8df 0, #9aa9b5 55%, #5d6b77 100%); }
.elementor .beegy-block .beegy-ph-beratung { background: radial-gradient(90% 80% at 30% 20%, #fff4e8 0, #f2cfb3 35%, #f2cfb300 70%), linear-gradient(160deg, #e9b48f, #a86a4f 60%, #5a4038); }
.elementor .beegy-block .beegy-ph-blau { background: radial-gradient(90% 60% at 20% 15%, #fff3dc 0, #ffc98f 25%, #ffc98f00 60%), linear-gradient(170deg, #9fcbe9 0, #6aa5cf 40%, #3e6d8e 70%, #28495f 100%); }
.elementor .beegy-block .beegy-ph-team { background: radial-gradient(80% 90% at 70% 30%, #fff1e2 0, #f4c9a4 30%, #f4c9a400 65%), linear-gradient(160deg, #e8a47a, #a35e45 55%, #40302b); }

/* Hinweisbox im Platzhalter: was dort hingehört (für Alex und Sophia). */
.elementor .beegy-block .beegy-ph-info {
	position: absolute;
	z-index: 3;
	left: 20px;
	bottom: 20px;
	max-width: 28em;
	padding: 12px 16px;
	border-radius: 12px;
	background-color: #101214bd;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-ph-info strong {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.elementor .beegy-block .beegy-ph-info strong::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h3l2-2h6l2 2h3v12H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13' r='3.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h3l2-2h6l2 2h3v12H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13' r='3.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor .beegy-block .beegy-hero-ph strong::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='13' height='12' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='13' height='12' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M16 10l5-3v10l-5-3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Einblenden beim Scrollen: nur wenn JS läuft (Klasse beegy-js am html), nie im Elementor-Editor. */
.beegy-js .elementor .beegy-rein {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.beegy-js .elementor .beegy-rein.beegy-sichtbar {
	opacity: 1;
	transform: none;
}

/* Energielinie am oberen Rand: zeigt den Lesefortschritt (Element erzeugt relaunch.js). */
.beegy-fortschritt {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 150;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--beegy-orange), var(--beegy-orange-3) 45%, var(--beegy-blau-2));
	transform-origin: 0 50%;
	transform: scaleX(0);
	pointer-events: none;
}
body.admin-bar .beegy-fortschritt {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ---------- 1 Aufmacher (Entwurf 2) ---------- */
.elementor .beegy-block.beegy-hero {
	display: flex;
	align-items: flex-end;
	/* Niedriger als Vollbild (Feedback Stefano 06.10.2026): oben stand bis zu 320 px leere Videofläche.
	   Höhe wächst mit dem Inhalt (Innenabstand oben unter .beegy-hero-in), deshalb kein Überlappen mit dem Header. */
	height: auto;
	min-height: min(85svh, 860px);
	max-height: none;
	overflow: clip;
	background-color: var(--beegy-dunkel);
	color: var(--beegy-weiss);
}
.elementor .beegy-hero .beegy-hero-bild {
	position: absolute;
	inset: -8% 0;
	will-change: transform;
}
/* Schleier für Lesbarkeit des weißen Texts (oben für den Header, unten für H1 und Text). */
.elementor .beegy-block.beegy-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, #1012148c 0, #10121400 26%, #10121400 42%, #101214d1 100%), linear-gradient(90deg, #1012146b 0, #10121400 62%);
	pointer-events: none;
}
.elementor .beegy-hero .beegy-hero-ph {
	z-index: 3;
	left: auto;
	bottom: 160px;
	right: max(var(--beegy-rand), (100vw - 1280px) / 2);
	max-width: 22em;
}
.elementor .beegy-hero .beegy-hero-in {
	position: relative;
	z-index: 4;
	padding-top: 168px;
	padding-bottom: 88px;
}
.elementor .beegy-hero .beegy-eyebrow {
	margin-bottom: 22px;
	font-size: 17px;
	font-weight: 700;
	color: var(--beegy-weiss);
}
.elementor .beegy-hero .beegy-h1 {
	max-width: 11.5ch;
	margin-bottom: 28px;
	color: var(--beegy-weiss);
}
/* Erste Zeile der H1 (Fokus-Keyword) klein darüber: erster Textabschnitt im H1-Widget. */
.elementor .beegy-hero .beegy-h1 > span:first-child {
	display: block;
	margin-bottom: 0.45em;
	font-size: max(20px, 0.2em);
	line-height: 1.3;
	letter-spacing: 0;
}
.elementor .beegy-hero .beegy-hero-fuss {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
}
.elementor .beegy-hero .beegy-lead {
	max-width: 32em;
	margin-bottom: 30px;
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.6;
	color: var(--beegy-weiss);
}
.elementor .beegy-hero .beegy-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ---------- 2 Partnerleiste als Laufband (Entwurf 1) ---------- */
/* Mehr Luft oben und unten (Wunsch beegy, 06.10.2026). Mobil kleiner, siehe Media Query unten. */
.elementor .beegy-block.beegy-partner {
	padding: 96px 0 80px;
}
.elementor .beegy-partner .beegy-partner-kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 18px;
}
.elementor .beegy-partner .beegy-partner-titel {
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--beegy-text-2);
}
.elementor .beegy-partner .beegy-band {
	overflow: clip;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.elementor .beegy-partner .beegy-band-spur {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 64px;
	width: max-content;
	min-height: 56px;
	animation: beegy-lauf 60s linear infinite;
}
.elementor .beegy-partner .beegy-band.beegy-halt .beegy-band-spur {
	animation-play-state: paused;
}
.elementor .beegy-partner .beegy-band-logo {
	flex: none;
	height: 34px;
	width: auto;
	max-width: none;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter 0.3s, opacity 0.3s;
}
.elementor .beegy-partner .beegy-band-logo:hover {
	filter: none;
	opacity: 1;
}
.elementor .beegy-partner .beegy-band-wort {
	flex: none;
	font-size: 19px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--beegy-text-2);
}
@keyframes beegy-lauf {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- 3 Warum jetzt mit Spur (Entwurf 1) ---------- */
.elementor .beegy-block .beegy-wandel {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 80px;
	align-items: start;
}
.elementor .beegy-block .beegy-wandel-text {
	position: sticky;
	top: 130px;
}
.elementor .beegy-block .beegy-spur {
	position: relative;
	padding-left: 64px;
}
/* Spur-Bahn und Füllung: --beegy-p (0 bis 1) setzt relaunch.js beim Scrollen. */
.elementor .beegy-block .beegy-spur::before,
.elementor .beegy-block .beegy-spur::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 8px;
	bottom: 8px;
	width: 6px;
	border-radius: 3px;
}
.elementor .beegy-block .beegy-spur::before {
	background-color: var(--beegy-orange-hell);
}
.elementor .beegy-block .beegy-spur::after {
	background: linear-gradient(180deg, var(--beegy-blau), var(--beegy-blau-2) 22%, var(--beegy-orange-3) 45%, var(--beegy-orange));
	transform-origin: 50% 0;
	transform: scaleY(var(--beegy-p, 0));
}
.elementor .beegy-block .beegy-stufe {
	margin-bottom: 44px;
}
.elementor .beegy-block .beegy-stufe:last-child {
	margin-bottom: 0;
}
.elementor .beegy-block .beegy-stufe-titel {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 6px;
	font-size: clamp(24px, 2.4vw, 30px);
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-stufe-titel span {
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-stufe-text {
	margin-bottom: 14px;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-knoten {
	position: relative;
	z-index: 1;
	padding: 12px 0;
	border-bottom: 1px solid var(--beegy-linie);
	font-size: 19px;
	font-weight: 700;
	color: var(--beegy-text-2);
	transition: color 0.5s ease;
}
.elementor .beegy-block .beegy-knoten::before {
	content: "";
	position: absolute;
	left: -53px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background-color: var(--beegy-weiss);
	border: 4px solid var(--beegy-orange-hell);
	transition: border-color 0.5s ease, background-color 0.5s ease, transform 0.5s ease;
}
.elementor .beegy-block .beegy-knoten.beegy-an {
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-knoten.beegy-an::before {
	border-color: var(--beegy-orange);
	background-color: var(--beegy-orange);
	transform: scale(1.1);
}
.elementor .beegy-block .beegy-stufe-frueher .beegy-knoten.beegy-an::before {
	border-color: var(--beegy-blau);
	background-color: var(--beegy-blau);
}

/* ---------- 4 Mathilda mit Kernsatz (Entwurf 2 und 1) ---------- */
.elementor .beegy-block.beegy-claim {
	padding: 40px 0 150px;
}
.elementor .beegy-claim .beegy-claim-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 64px;
	align-items: center;
}
/* Logo-Konstellation (viewBox 1000 x 649): Schale scale(.89), Welle translate(230 329) scale(.769).
   Nur skaliert und verschoben, nie gedreht. Höchstmaß 880 px, liegt links neben dem Text. */
.elementor .beegy-claim .beegy-claim-form {
	position: relative;
	aspect-ratio: 1000 / 649;
	max-width: 880px;
	margin-left: calc(-1 * max(0px, (100vw - 1280px) / 2) - var(--beegy-rand) - 40px);
}
.elementor .beegy-claim .beegy-claim-form::before,
.elementor .beegy-claim .beegy-claim-form::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	will-change: transform;
}
.elementor .beegy-claim .beegy-claim-form::before {
	left: 0;
	top: 0;
	width: 89%;
	height: 72.33%;
	background-image: url("../img/mathilda-schale.svg");
	transform: translateY(var(--beegy-y1, 0px));
}
.elementor .beegy-claim .beegy-claim-form::after {
	left: 23%;
	top: 50.69%;
	width: 76.9%;
	height: 49.27%;
	background-image: url("../img/mathilda-welle.svg");
	transform: translateY(var(--beegy-y2, 0px));
}
.elementor .beegy-claim .beegy-claim-satz {
	font-size: clamp(32px, 3.7vw, 54px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--beegy-text);
}
/* Im Editor: kursiv = orange, fett = blau (siehe Pflegeanleitung). */
.elementor .beegy-claim .beegy-claim-satz em {
	font-style: normal;
	color: var(--beegy-orange-text);
}
.elementor .beegy-claim .beegy-claim-satz strong {
	font-weight: 700;
	color: var(--beegy-blau-text);
}

/* ---------- 5 Drei Wege mit Energielinie (Entwurf 1) ---------- */
.elementor .beegy-block.beegy-loesungen {
	padding: 40px 0 140px;
}
.elementor .beegy-loesungen .beegy-strom {
	position: absolute;
	left: 50%;
	top: 260px;
	bottom: 120px;
	width: 6px;
	margin-left: -3px;
	border-radius: 3px;
	overflow: hidden;
	background-color: var(--beegy-orange-hell);
}
.elementor .beegy-loesungen .beegy-strom::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--beegy-orange), var(--beegy-orange-3) 50%, var(--beegy-blau-2));
	transform-origin: 50% 0;
	transform: scaleY(var(--beegy-p, 0));
}
.elementor .beegy-loesungen .beegy-kopf {
	margin-bottom: 72px;
}
.elementor .beegy-loesungen .beegy-loesung {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 120px;
	align-items: center;
	margin-bottom: 120px;
}
.elementor .beegy-loesungen .beegy-loesung:last-child {
	margin-bottom: 0;
}
.elementor .beegy-loesungen .beegy-loesung-gedreht .beegy-l-bild {
	order: 2;
}
/* Knoten auf der Energielinie. */
.elementor .beegy-loesungen .beegy-loesung::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border-radius: 50%;
	background-color: var(--beegy-weiss);
	border: 6px solid var(--beegy-orange);
	box-shadow: 0 0 0 8px #e3441b1f;
}
.elementor .beegy-loesungen .beegy-l-bild {
	position: relative;
	height: 560px;
}
.elementor .beegy-loesungen .beegy-l-bild > .beegy-ph {
	position: absolute;
	inset: 0;
	border-radius: 32px;
}
/* Bildfläche läuft bis an den Fensterrand. */
.elementor .beegy-loesungen .beegy-loesung:not(.beegy-loesung-gedreht) .beegy-l-bild > .beegy-ph {
	left: calc(-1 * max(0px, (100vw - 1280px) / 2) - var(--beegy-rand));
	border-radius: 0 32px 32px 0;
}
.elementor .beegy-loesungen .beegy-loesung-gedreht .beegy-l-bild > .beegy-ph {
	right: calc(-1 * max(0px, (100vw - 1280px) / 2) - var(--beegy-rand));
	border-radius: 32px 0 0 32px;
}
.elementor .beegy-loesungen .beegy-loesung:not(.beegy-loesung-gedreht) .beegy-ph-info {
	left: calc(max(0px, (100vw - 1280px) / 2) + var(--beegy-rand) + 18px);
}
/* Produktfreisteller über der Bildfläche, Größe und Lage je Bild in Elementor gesetzt. */
.elementor .beegy-loesungen .beegy-produkt {
	position: absolute;
	z-index: 3;
	height: auto;
	max-width: none;
	filter: drop-shadow(0 30px 40px #14141459);
	will-change: transform;
}
.elementor .beegy-loesungen .beegy-zg {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--beegy-orange-text);
}
.elementor .beegy-loesungen .beegy-l-titel {
	margin-bottom: 18px;
	font-size: clamp(30px, 3.2vw, 44px);
	color: var(--beegy-text);
}
.elementor .beegy-loesungen .beegy-l-p {
	max-width: 32em;
	margin-bottom: 26px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
.elementor .beegy-loesungen .beegy-linkreihe {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* ---------- 6 Warum beegy mit Zahlen (Entwurf 1), dunkle Signature-Sektion ---------- */
.elementor .beegy-block.beegy-warum {
	margin-top: 120px;
	padding: 210px 0 120px;
	overflow-x: clip;
	background-color: var(--beegy-blau-tief);
	color: var(--beegy-weiss);
}
/* Welle oben links (ragt in den Abstand darüber), Schale rechts neben den Zahlen, nie hinter den Merkmalen.
   Höhe ausdrücklich auto: Elementor gibt Container-Pseudo-Elementen sonst height 100 % (Overlay-Regel). */
.elementor .beegy-block.beegy-warum::before,
.elementor .beegy-block.beegy-warum::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}
.elementor .beegy-block.beegy-warum::before {
	height: auto;
	bottom: auto;
	left: -8vw;
	top: -150px;
	width: min(78vw, 1000px);
	aspect-ratio: 1000 / 415.8;
	background-image: url("../img/mathilda-welle.svg");
}
.elementor .beegy-block.beegy-warum::after {
	height: auto;
	bottom: auto;
	left: auto;
	right: -24vw;
	top: 26%;
	width: max(46vw, 560px);
	aspect-ratio: 1000 / 527.4;
	background-image: url("../img/mathilda-schale.svg");
	transform: scaleX(-1);
}
@media (max-width: 1280px) {
	.elementor .beegy-block.beegy-warum::after {
		display: none;
	}
}
.elementor .beegy-warum .beegy-innen {
	position: relative;
	z-index: 2;
}
.elementor .beegy-warum .beegy-kicker,
.elementor .beegy-warum .beegy-h2 {
	color: var(--beegy-weiss);
}
.elementor .beegy-warum .beegy-intro {
	color: var(--beegy-blau-hell);
}
.elementor .beegy-warum .beegy-zahlen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	max-width: 900px;
	margin: 64px 0 72px;
}
.elementor .beegy-warum .beegy-zahl-wert {
	font-size: clamp(64px, 8vw, 112px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--beegy-weiss);
}
.elementor .beegy-warum .beegy-zahl-text {
	max-width: 18em;
	margin-top: 10px;
	font-size: 18px;
	color: var(--beegy-blau-hell);
}
.elementor .beegy-warum .beegy-merkmale {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 48px;
	max-width: 1080px;
}
.elementor .beegy-warum .beegy-merkmal {
	padding: 22px 0;
	border-top: 2px solid #ffffff47;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--beegy-blau-hell);
}
.elementor .beegy-warum .beegy-merkmal strong {
	display: block;
	margin-bottom: 6px;
	font-size: 19px;
	color: var(--beegy-weiss);
}
.elementor .beegy-warum a:focus-visible {
	outline-color: var(--beegy-weiss);
}
/* Textlinks auf der blauen Fläche weiß (Blau auf Blau war unlesbar, Unterseiten). */
.elementor .beegy-warum .beegy-textlink {
	color: var(--beegy-weiss);
	border-color: var(--beegy-weiss);
}
.elementor .beegy-warum .beegy-textlink:is(:hover, :focus) {
	color: var(--beegy-blau-hell);
	border-bottom-style: dashed;
}
/* Links im Fließtext auf Blau und Dunkel: weiß, fett, unterstrichen (HEMS: „Mehr zu White-Label-Energielösungen“
   stand in Blau auf Blau, Kontrast unter 2:1). */
.elementor .beegy-warum p a,
.elementor .beegy-flaeche-dunkel p a {
	font-weight: 700;
	color: var(--beegy-weiss);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.elementor .beegy-warum p a:hover,
.elementor .beegy-flaeche-dunkel p a:hover {
	color: var(--beegy-blau-hell);
}
.elementor .beegy-warum .beegy-merkmal a {
	display: inline-block;
	margin-top: 8px;
}
/* Folgt „Warum beegy“ auf eine dunkle Sektion (White-Label), braucht die Welle oben links eigenen weißen Raum:
   sie ragt 150 px nach oben und lag sonst über den Buttons der dunklen Sektion. */
.elementor .beegy-block.beegy-flaeche-dunkel + .beegy-block.beegy-warum {
	margin-top: 170px;
}
/* Unterseiten ohne Zahlen: Merkmale stehen oben, die Schale rückt deshalb rechts neben die Merkmale
   (Merkmale max. 1080 px plus 48 px Luft), damit sie nie hinter Text liegt. */
.elementor .beegy-block.beegy-warum:not(:has(.beegy-zahlen))::after {
	right: auto;
	left: calc(max(var(--beegy-rand), (100vw - 1280px) / 2) + 1128px);
}

/* ---------- 7 Kontakt mit Formular 1 (Entwurf 1) ---------- */
.elementor .beegy-block.beegy-kontakt {
	padding: 140px 0;
}
.elementor .beegy-kontakt .beegy-kontakt-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 80px;
	align-items: center;
}
.elementor .beegy-kontakt .beegy-intro {
	margin-bottom: 26px;
}
.elementor .beegy-kontakt .beegy-form-buehne {
	position: relative;
}
/* Mathilda-Schale hinter der Formularkarte (nicht hinter Text: die Karte ist weiß und deckt ab). */
.elementor .beegy-kontakt .beegy-form-buehne::before {
	content: "";
	height: auto;
	bottom: auto;
	position: absolute;
	left: 18%;
	top: -16%;
	width: 96%;
	aspect-ratio: 1000 / 527.4;
	background: url("../img/mathilda-schale.svg") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 0;
}
.elementor .beegy-kontakt .beegy-form-buehne > .elementor-widget-shortcode {
	position: relative;
	z-index: 1;
}

/* ---------- 8 Karriere als Bildband (Entwurf 2) ---------- */
.elementor .beegy-block.beegy-karriere {
	display: flex;
	align-items: flex-end;
	height: 560px;
	overflow: clip;
	color: var(--beegy-weiss);
}
.elementor .beegy-karriere .beegy-karriere-bild {
	position: absolute;
	inset: -10% 0;
	will-change: transform;
}
.elementor .beegy-block.beegy-karriere::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(90deg, #101214cc 0, #10121459 55%, #10121400);
	pointer-events: none;
}
.elementor .beegy-karriere .beegy-karriere-bild .beegy-ph-info {
	top: calc(10% + 20px);
	bottom: auto;
	left: auto;
	right: max(var(--beegy-rand), (100vw - 1280px) / 2);
}
.elementor .beegy-karriere .beegy-karriere-in {
	position: relative;
	z-index: 3;
	padding-bottom: 72px;
}
.elementor .beegy-karriere .beegy-karriere-titel {
	max-width: 12ch;
	margin-bottom: 14px;
	font-size: clamp(34px, 4.4vw, 64px);
	color: var(--beegy-weiss);
}
.elementor .beegy-karriere .beegy-karriere-text {
	margin-bottom: 26px;
	font-size: 19px;
	color: var(--beegy-weiss);
}

/* ---------- Startseite: schmalere Bildschirme (Mockup-Grenzen 1100 und 980 px) ---------- */
@media (max-width: 1100px) {
	.elementor .beegy-loesungen .beegy-loesung {
		gap: 72px;
	}
	.elementor .beegy-claim .beegy-claim-grid {
		gap: 40px;
	}
}
@media (max-width: 980px) {
	.elementor .beegy-block.beegy-hero {
		height: auto;
		min-height: 100svh;
		max-height: none;
	}
	.elementor .beegy-hero .beegy-hero-ph {
		top: 88px;
		bottom: auto;
		left: var(--beegy-rand);
		right: var(--beegy-rand);
		max-width: none;
		font-size: 13.5px;
	}
	.elementor .beegy-hero .beegy-hero-in {
		padding-top: 270px;
		padding-bottom: 48px;
	}
	.elementor .beegy-hero .beegy-hero-fuss {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.elementor .beegy-partner .beegy-partner-kopf {
		align-items: flex-start;
		gap: 12px 20px;
	}
	.elementor .beegy-block.beegy-partner {
		padding: 64px 0 56px;
	}
	.elementor .beegy-block.beegy-sektion {
		padding-block: 88px;
	}
	.elementor .beegy-block .beegy-wandel {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.elementor .beegy-block .beegy-wandel-text {
		position: static;
	}
	.elementor .beegy-block .beegy-spur {
		padding-left: 52px;
	}
	.elementor .beegy-block .beegy-spur::before,
	.elementor .beegy-block .beegy-spur::after {
		left: 13px;
	}
	.elementor .beegy-block .beegy-knoten::before {
		left: -47px;
	}
	.elementor .beegy-block.beegy-claim {
		padding: 24px 0 96px;
	}
	.elementor .beegy-claim .beegy-claim-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.elementor .beegy-claim .beegy-claim-form {
		margin-left: calc(-1 * var(--beegy-rand) - 24px);
		margin-right: -12px;
	}
	.elementor .beegy-block.beegy-loesungen {
		padding-bottom: 96px;
	}
	.elementor .beegy-loesungen .beegy-strom {
		left: var(--beegy-rand);
		margin-left: 0;
		top: 220px;
	}
	.elementor .beegy-loesungen .beegy-loesung,
	.elementor .beegy-loesungen .beegy-loesung-gedreht {
		grid-template-columns: 1fr;
		gap: 36px;
		margin-bottom: 96px;
		padding-left: 36px;
	}
	.elementor .beegy-loesungen .beegy-loesung-gedreht .beegy-l-bild {
		order: 0;
	}
	.elementor .beegy-loesungen .beegy-loesung::after {
		left: 3px;
		top: 0;
		margin: 0 0 0 -16px;
	}
	.elementor .beegy-loesungen .beegy-l-bild {
		height: 380px;
	}
	.elementor .beegy-loesungen .beegy-loesung:not(.beegy-loesung-gedreht) .beegy-l-bild > .beegy-ph,
	.elementor .beegy-loesungen .beegy-loesung-gedreht .beegy-l-bild > .beegy-ph {
		left: 0;
		right: calc(-1 * var(--beegy-rand));
		border-radius: 24px 0 0 24px;
	}
	.elementor .beegy-loesungen .beegy-loesung:not(.beegy-loesung-gedreht) .beegy-ph-info {
		left: 20px;
	}
	.elementor .beegy-block.beegy-warum {
		margin-top: 80px;
		padding: 150px 0 96px;
	}
	.elementor .beegy-block.beegy-warum::before {
		top: -90px;
		left: -30vw;
		width: 130vw;
	}
	.elementor .beegy-warum .beegy-zahlen {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.elementor .beegy-warum .beegy-merkmale {
		grid-template-columns: 1fr;
	}
	.elementor .beegy-block.beegy-kontakt {
		padding: 96px 0;
	}
	.elementor .beegy-kontakt .beegy-kontakt-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.elementor .beegy-kontakt .beegy-form-buehne::before {
		left: 30%;
		top: -44px;
		width: 80%;
	}
	.elementor .beegy-block.beegy-karriere {
		height: 620px;
	}
	.elementor .beegy-block.beegy-karriere::after {
		background: linear-gradient(180deg, #10121400 20%, #101214d9 70%);
	}
	.elementor .beegy-karriere .beegy-karriere-bild .beegy-ph-info {
		left: var(--beegy-rand);
		right: var(--beegy-rand);
	}
}

/* Reduzierte Bewegung: Laufband steht als umbrechende Logozeile, keine Einblendung, Spur und Linie voll. */
@media (prefers-reduced-motion: reduce) {
	.beegy-js .elementor .beegy-rein {
		opacity: 1;
		transform: none;
	}
	.beegy-fortschritt {
		display: none;
	}
	.elementor .beegy-block .beegy-spur::after,
	.elementor .beegy-loesungen .beegy-strom::after {
		transform: none;
	}
	.elementor .beegy-block .beegy-knoten {
		color: var(--beegy-text);
	}
	.elementor .beegy-partner .beegy-band-spur {
		flex-wrap: wrap;
		width: auto;
		max-width: 1344px;
		gap: 24px 48px;
		margin: 0 auto;
		padding: 0 var(--beegy-rand);
		animation: none;
	}
	.elementor .beegy-partner .beegy-band {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.elementor .beegy-partner .beegy-pause {
		display: none;
	}
}

/* =========================================================
   Gravity Forms im beegy-Design (Formular-Container .beegy-form-buehne).
   Gravity Forms setzt seine Variablen pro Formular mit ID-Spezifität,
   deshalb hier mit !important, streng auf den Container begrenzt.
   Feldrahmen in beegy-rahmen: 3,1:1 auf Weiß (WCAG 1.4.11).
   ========================================================= */
.beegy-form-buehne .gform_wrapper.gform-theme {
	--gf-font-family-base: var(--beegy-schrift), sans-serif !important;
	--gf-color-primary: var(--beegy-orange) !important;
	--gf-color-primary-rgb: 227, 68, 27 !important;
	--gf-color-primary-darker: var(--beegy-orange-text) !important;
	--gf-color-in-ctrl-primary: var(--beegy-orange) !important;
	--gf-color-in-ctrl-primary-rgb: 227, 68, 27 !important;
	--gf-color-in-ctrl-primary-darker: var(--beegy-orange-text) !important;
	--gf-ctrl-label-color-primary: var(--beegy-text) !important;
	--gf-ctrl-label-font-size-primary: 15px !important;
	--gf-ctrl-label-font-weight-primary: 700 !important;
	--gf-ctrl-label-color-req: var(--beegy-orange-text) !important;
	--gf-ctrl-size: 50px !important;
	--gf-ctrl-font-size: 17px !important;
	--gf-ctrl-padding-x: 16px !important;
	--gf-ctrl-radius: 12px !important;
	--gf-radius: 12px !important;
	--gf-ctrl-border-width: 2px !important;
	--gf-ctrl-border-color: var(--beegy-rahmen) !important;
	--gf-ctrl-border-color-hover: var(--beegy-text-2) !important;
	--gf-ctrl-border-color-focus: var(--beegy-blau) !important;
	--gf-ctrl-color: var(--beegy-text) !important;
	--gf-ctrl-btn-bg-color-primary: var(--beegy-orange) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--beegy-orange-text) !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--beegy-orange-text) !important;
	--gf-ctrl-btn-color-primary: var(--beegy-weiss) !important;
	--gf-ctrl-btn-color-hover-primary: var(--beegy-weiss) !important;
	--gf-ctrl-btn-color-focus-primary: var(--beegy-weiss) !important;
	--gf-ctrl-btn-radius: 999px !important;
	--gf-ctrl-btn-font-size: 19px !important;
	--gf-ctrl-btn-font-weight: 700 !important;
	--gf-ctrl-btn-padding-x: 30px !important;
	--gf-ctrl-btn-size: 54px !important;
	--gf-field-gap-x: 18px !important;
	--gf-field-gap-y: 18px !important;
	--gf-form-gap-y: 18px !important;
}
/* Karte wie im Mockup: weiß, runde Ecken, weicher Schatten. Seit 06.10.2026 auf dem Shortcode-Container,
   weil oben in der Karte Telefon und Erreichbarkeit stehen (.beegy-direkt im Shortcode-Widget, Wunsch beegy). */
.elementor .beegy-form-buehne .elementor-shortcode {
	position: relative;
	z-index: 1;
	padding: 40px;
	border-radius: 28px;
	background-color: var(--beegy-weiss);
	box-shadow: 0 30px 80px #1b273329;
}
.elementor .beegy-form-buehne .beegy-direkt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	margin: 0 0 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--beegy-linie);
	font-size: 16px;
	line-height: 1.5;
	color: var(--beegy-text-2);
}
.elementor .beegy-form-buehne .beegy-direkt p {
	margin: 0;
}
.elementor .beegy-form-buehne .beegy-direkt strong {
	color: var(--beegy-text);
}
.elementor .beegy-form-buehne .beegy-direkt a {
	font-size: 19px;
	font-weight: 700;
	color: var(--beegy-blau-text);
	text-decoration: none;
	white-space: nowrap;
}
.elementor .beegy-form-buehne .beegy-direkt a:hover,
.elementor .beegy-form-buehne .beegy-direkt a:focus-visible {
	text-decoration: underline;
}
/* Pflichtfeld-Hinweis unter das Formular (Wunsch beegy). Pflichtfelder bleiben per aria-required ausgezeichnet. */
.beegy-form-buehne .gform_wrapper.gform-theme {
	display: flex;
	flex-direction: column;
}
.beegy-form-buehne .gform_wrapper .gform_heading {
	order: 2;
	margin: 14px 0 0;
}
.beegy-form-buehne .gform_wrapper .gform_required_legend {
	margin: 0;
	font-size: 14px;
	color: var(--beegy-text-2);
}
.beegy-form-buehne .gform_wrapper .gfield_consent_label,
.beegy-form-buehne .gform_wrapper .gfield--type-consent .gfield_label {
	font-size: 15px;
}
/* Absenden-Knopf über die ganze Breite, wie die Pillen-Buttons der Seite. */
.beegy-form-buehne .gform_wrapper .gform_footer {
	margin-top: 8px;
}
.beegy-form-buehne .gform_wrapper.gform-theme .gform_footer .gform_button {
	width: 100% !important;
	justify-content: center;
	line-height: 1.2;
	transition: transform 0.25s ease, background-color 0.25s ease;
}
.beegy-form-buehne .gform_wrapper .gform_footer .gform_button:hover {
	transform: translateY(-2px);
}
@media (max-width: 980px) {
	.elementor .beegy-form-buehne .elementor-shortcode {
		padding: 28px 22px;
	}
}

/* Hülle um Laufband-Logos (setzt relaunch.js für die Listen-Semantik). */
.elementor .beegy-partner .beegy-eintrag {
	display: flex;
	flex: none;
	align-items: center;
}

/* Pfeil der Untermenüs in der Farbe des Menüpunkts (weiß über dem Aufmacher, dunkel im weißen Header).
   Elementor färbt das SVG sonst fest dunkel. Header, alle Seiten. */
.elementor .beegy-nav .elementor-nav-menu--main .elementor-item .sub-arrow,
.elementor .beegy-nav .elementor-nav-menu--dropdown .elementor-item .sub-arrow {
	color: inherit;
	fill: currentColor;
}
.elementor .beegy-nav .elementor-nav-menu .sub-arrow svg,
.elementor .beegy-nav .elementor-nav-menu .sub-arrow svg path {
	fill: currentColor;
}

/* =========================================================
   Startseite Textfassung 2 (06.10.2026, Rückmeldung Sophia Tutino und Caros Briefing).
   Längere, erklärende Texte: Spur mit Titel und Kurztext je Knoten, dritte Stufe
   „Einflussfaktoren“, Kernsatz als Fazit, Claim mit Unterzeile, Absätze in den drei Wegen,
   Haken-Liste im Kontakt, Karriere-Band mit Vorstellungstext. Vorlage: Mockups/v5.
   ========================================================= */

/* 1 Aufmacher: H1 ist mit „(HEMS): Schlüsseltechnologie der Energiewende“ länger als vorher.
   Kleinere fließende Größe (statt 121 px) und mehr Breite, damit „Schlüsseltechnologie“ in eine Zeile passt.
   Mobil trennt das weiche Trennzeichen im Text (Schlüssel-technologie). */
.elementor .beegy-hero .beegy-h1 {
	max-width: 17ch;
	font-size: clamp(42px, 6.3vw, 96px);
	hyphens: manual;
}

/* 3 Spur: Knoten = <strong>Titel</strong> plus Kurztext. Titel wird beim Erreichen dunkel. */
.elementor .beegy-block .beegy-knoten {
	padding: 14px 0 16px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-knoten.beegy-an {
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-knoten strong {
	display: block;
	margin-bottom: 4px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--beegy-text-2);
	transition: color 0.5s ease;
}
.elementor .beegy-block .beegy-knoten.beegy-an strong {
	color: var(--beegy-text);
}
/* Punkt auf Höhe der Titelzeile statt mittig (Knoten sind jetzt mehrzeilig). */
.elementor .beegy-block .beegy-knoten::before {
	top: 27px;
}
/* HEMS (letzter Knoten der Stufe „Heute“) als verbindendes Element: Titel orange, Ring um den Punkt. */
body.home .elementor .beegy-block .beegy-spur > .beegy-stufe:nth-child(2) .beegy-knoten:last-child::after {
	content: "";
	position: absolute;
	left: -60px;
	top: 27px;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	border-radius: 50%;
	border: 2px solid var(--beegy-orange-3);
	opacity: 0;
	transition: opacity 0.5s ease;
}
body.home .elementor .beegy-block .beegy-spur > .beegy-stufe:nth-child(2) .beegy-knoten:last-child.beegy-an::after {
	opacity: 1;
}
body.home .elementor .beegy-block .beegy-spur > .beegy-stufe:nth-child(2) .beegy-knoten:last-child.beegy-an strong {
	color: var(--beegy-orange-text);
}
/* Einflussfaktoren (dritte Stufe): keine Geräte, deshalb blaue Raute statt Kreis. */
body.home .elementor .beegy-block .beegy-spur > .beegy-stufe:nth-child(3) .beegy-knoten::before {
	border-radius: 5px;
	transform: rotate(45deg) scale(0.82);
}
body.home .elementor .beegy-block .beegy-spur > .beegy-stufe:nth-child(3) .beegy-knoten.beegy-an::before {
	border-color: var(--beegy-blau);
	background-color: var(--beegy-weiss);
	transform: rotate(45deg) scale(0.9);
}
/* Kernsatz als Ergebnis-Karte am Ende der Spur (06.10.2026): Die Linie mündet in die Karte,
   der Satz ist kleiner als der Claim neben der Mathilda, damit nicht zwei große Sätze aufeinander folgen. */
.elementor .beegy-block .beegy-spur > .beegy-claim-satz {
	position: relative;
	z-index: 1;
	margin-top: 40px;
	padding: 28px 32px;
	border-radius: 20px;
	background-color: var(--beegy-orange-hell);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-spur > .beegy-claim-satz::before {
	content: "";
	position: absolute;
	left: -56px;
	top: 50%;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	border-radius: 50%;
	background-color: var(--beegy-orange);
	box-shadow: 0 0 0 5px var(--beegy-weiss);
}
.elementor .beegy-block .beegy-spur > .beegy-claim-satz em {
	font-style: normal;
	color: var(--beegy-orange-text);
}
.elementor .beegy-block .beegy-spur > .beegy-claim-satz strong {
	font-weight: 700;
	color: var(--beegy-blau-text);
}

/* 4 Claim neben der Mathilda: Unterzeile. */
.elementor .beegy-claim .beegy-intro {
	margin: 22px 0 0;
}

/* 5 Drei Wege: mehrere Absätze mit fettem Einstieg. */
/* Titel sind jetzt länger (mit Erklärung), deshalb etwas kleiner als 44 px. */
.elementor .beegy-loesungen .beegy-l-titel {
	font-size: clamp(28px, 2.7vw, 38px);
	text-wrap: balance;
}
.elementor .beegy-loesungen .beegy-l-p {
	margin-bottom: 14px;
	font-size: 17px;
}
.elementor .beegy-loesungen .beegy-l-p:last-of-type {
	margin-bottom: 26px;
}
.elementor .beegy-loesungen .beegy-l-p strong {
	color: var(--beegy-text);
}

/* 6 Warum beegy: Zahlentexte mit Überschrift. */
.elementor .beegy-warum .beegy-zahl-text {
	max-width: 24em;
}
.elementor .beegy-warum .beegy-zahl-text strong {
	display: block;
	margin-bottom: 6px;
	font-size: 20px;
	color: var(--beegy-weiss);
}

/* 7 Kontakt: Haken-Liste (Text-Editor-Widget, damit beegy sie pflegen kann). */
.elementor .beegy-kontakt .beegy-haken {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.elementor .beegy-kontakt .beegy-haken li {
	position: relative;
	padding-left: 34px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--beegy-text);
}
.elementor .beegy-kontakt .beegy-haken li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--beegy-orange-hell);
}
.elementor .beegy-kontakt .beegy-haken li::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 5px;
	width: 6px;
	height: 11px;
	border: solid var(--beegy-orange-text);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* 8 Karriere: Band wächst mit dem Vorstellungstext, Text bleibt im dunklen Bereich des Verlaufs. */
.elementor .beegy-block.beegy-karriere {
	height: auto;
	min-height: 560px;
}
.elementor .beegy-karriere .beegy-karriere-in {
	padding-top: 140px;
}
.elementor .beegy-karriere .beegy-karriere-text {
	max-width: 36em;
	margin-bottom: 14px;
	font-size: 18px;
	line-height: 1.6;
}
.elementor .beegy-karriere .beegy-karriere-text:last-of-type {
	margin-bottom: 28px;
}
.elementor .beegy-karriere .beegy-karriere-titel {
	max-width: 14ch;
}

@media (max-width: 980px) {
	body.home .elementor .beegy-block .beegy-spur > .beegy-stufe:nth-child(2) .beegy-knoten:last-child::after {
		left: -54px;
	}
	.elementor .beegy-block .beegy-spur > .beegy-claim-satz {
		padding: 22px 22px;
	}
	.elementor .beegy-block .beegy-spur > .beegy-claim-satz::before {
		left: -50px;
	}
	.elementor .beegy-block.beegy-karriere {
		min-height: 620px;
	}
	.elementor .beegy-block.beegy-karriere::after {
		background: linear-gradient(180deg, #10121400 0, #101214e6 38%);
	}
	.elementor .beegy-karriere .beegy-karriere-in {
		padding-top: 220px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.elementor .beegy-block .beegy-knoten strong {
		color: var(--beegy-text);
	}
}

/* =========================================================
   Unterseiten (HEMS, White-Label-Energielösungen, powered by beegy), ab 06.10.2026.
   Bausteine aus den freigegebenen Entwürfen: Aufmacher aus Entwurf 1 (ruhiger),
   Faktenleiste, Schaubild, Ablauf und Logoraster aus Entwurf 3, Bildpaneele aus Entwurf 2.
   Texte, Bilder und Buttons liegen in nativen Widgets, hier steht nur die Gestaltung.
   ========================================================= */

/* Flächen */
/* Etwas heller als beegy-blau-hell, damit der orange Kicker 4,5:1 erreicht (WCAG 1.4.3). */
.elementor .beegy-block.beegy-flaeche-hell {
	background-color: color-mix(in srgb, var(--beegy-blau-hell) 55%, var(--beegy-weiss));
}
.elementor .beegy-block.beegy-flaeche-grau {
	background-color: color-mix(in srgb, var(--beegy-linie) 40%, var(--beegy-weiss));
}
/* Grau direkt nach Hellblau ergab eine kaum sichtbare, unsauber wirkende Kante: dann weiß. */
.elementor .beegy-block.beegy-flaeche-hell + .beegy-block.beegy-flaeche-grau {
	background-color: var(--beegy-weiss);
}
/* Vertikaler Abstand der Unterseiten-Sektionen (120 px, mobil 88/64 px, siehe Media Queries).
   Fehlte bis 06.10.2026: Sektionen klebten aneinander. Folgen zwei weiße Sektionen aufeinander,
   entfällt der obere Abstand der zweiten, damit dazwischen nicht 240 px Leere stehen.
   Nicht auf der Startseite: Deren Spur-Sektion hat eigene, freigegebene Abstände. */
body:not(.home) .elementor .beegy-block.beegy-sektion {
	padding-block: 120px;
}
body:not(.home) .elementor .beegy-block.beegy-sektion:not(.beegy-flaeche-hell, .beegy-flaeche-grau, .beegy-flaeche-dunkel) + .beegy-block.beegy-sektion:not(.beegy-flaeche-hell, .beegy-flaeche-grau, .beegy-flaeche-dunkel) {
	padding-top: 0;
}
/* Button- und Linkreihen der Unterseiten: nebeneinander mit Abstand, umbrechend (Startseite „Drei Wege“ hat eigene Spaltenregel).
   Vorher klebten Button und Textlink aneinander und der Begleitsatz direkt am Button. */
.elementor .beegy-block:not(.beegy-loesungen) .beegy-linkreihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}
.elementor .beegy-sektion .beegy-linkreihe.beegy-cta,
.elementor .beegy-sektion .beegy-tabelle + .beegy-linkreihe,
.elementor .beegy-sektion .elementor-widget-text-editor + .beegy-linkreihe {
	margin-top: 40px;
}
.elementor .beegy-sektion .beegy-aussage + .beegy-linkreihe.beegy-cta {
	margin-top: 32px;
}
.elementor .beegy-sektion .beegy-linkreihe.beegy-cta + p {
	margin-top: 16px;
	font-size: 16px;
	color: var(--beegy-text-2);
}
/* Mehrere Einleitungsabsätze untereinander: Absatzabstand (vorher liefen sie ohne Lücke ineinander). */
.elementor .beegy-block p.beegy-intro + p.beegy-intro {
	margin-top: 14px;
}
/* Kopf einer Sektion (Kicker, H2, Einleitung) mit Abstand zum Inhalt. */
.elementor .beegy-sektion .beegy-kopf {
	max-width: 52em;
	margin-bottom: 56px;
}

/* ---------- Aufmacher der Unterseiten (Entwurf 1, ruhiger) ----------
   Die Mathilda-Schale ist die Fläche: als Maske mit dunklem CD-Orange gefüllt (Weiß darauf 5:1).
   Die Welle liegt unten rechts vor dem Foto, nie hinter Text, Höchstmaß 900 px. */
.elementor .beegy-block.beegy-aufmacher {
	isolation: isolate;
	overflow: clip;
	padding: 72px 0 200px;
	color: var(--beegy-weiss);
}
/* Tiefster Punkt der Schale liegt links unter dem Text (28 %), damit Text und Buttons immer auf Orange stehen. */
.elementor .beegy-block.beegy-aufmacher::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: auto;
	height: auto;
	left: calc(28% - 1600px);
	bottom: 40px;
	width: 3200px;
	aspect-ratio: 1000 / 527.4;
	background: linear-gradient(90deg, var(--beegy-orange-text) 0 55%, var(--beegy-orange) 100%);
	-webkit-mask: url("../img/mathilda-schale.svg") no-repeat center / 100% 100%;
	mask: url("../img/mathilda-schale.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.elementor .beegy-block.beegy-aufmacher::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: auto;
	left: auto;
	height: auto;
	right: calc(50% - 860px);
	bottom: 0;
	width: min(900px, 62vw);
	aspect-ratio: 1000 / 415.8;
	background: url("../img/mathilda-welle.svg") no-repeat center / 100% 100%;
	pointer-events: none;
}
.elementor .beegy-aufmacher .beegy-aufmacher-in {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 56px;
	align-items: center;
}
.elementor .beegy-aufmacher .beegy-eyebrow {
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--beegy-weiss);
}
.elementor .beegy-aufmacher .beegy-h1 {
	margin-bottom: 24px;
	font-size: clamp(36px, 4.4vw, 60px);
	color: var(--beegy-weiss);
}
.elementor .beegy-aufmacher .beegy-h1 > span:first-child {
	display: block;
	margin-bottom: 0.5em;
	font-size: max(19px, 0.36em);
	line-height: 1.3;
	letter-spacing: 0;
}
.elementor .beegy-aufmacher .beegy-lead {
	max-width: 32em;
	margin-bottom: 32px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--beegy-weiss);
}
.elementor .beegy-aufmacher .beegy-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.elementor .beegy-aufmacher .beegy-aufmacher-bild {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 32px;
	box-shadow: 0 30px 70px #6e190047;
}
/* Hinweisbox im Foto-Platzhalter oben, weil die Welle unten rechts vor dem Foto liegt (verdeckte sonst den Hinweis). */
.elementor .beegy-aufmacher .beegy-aufmacher-bild .beegy-ph-info {
	top: 20px;
	bottom: auto;
	right: 20px;
}
/* powered by beegy: leere Tilde als Kontur auf Weiß, Text dunkel (Wunsch Sophia, Grafik liefert beegy). */
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer {
	padding-bottom: 140px;
	color: var(--beegy-text);
}
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer::before {
	left: auto;
	right: -6vw;
	bottom: 24px;
	width: min(900px, 52vw);
	background: url("../img/mathilda-schale-kontur.svg") no-repeat center / 100% 100%;
	-webkit-mask: none;
	mask: none;
}
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer::after {
	display: none;
}
.elementor .beegy-aufmacher-leer :is(.beegy-eyebrow, .beegy-h1, .beegy-lead) {
	color: var(--beegy-text);
}
.elementor .beegy-aufmacher-leer .beegy-eyebrow {
	color: var(--beegy-orange-text);
}
/* Ohne Foto: Text schmaler, damit die Tilde rechts frei steht (nie hinter Text). */
.elementor .beegy-aufmacher-leer .beegy-aufmacher-text {
	max-width: 640px;
}

/* ---------- Faktenleiste (Entwurf 3) ---------- */
.elementor .beegy-block.beegy-status {
	border-bottom: 1px solid var(--beegy-linie);
	background-color: var(--beegy-weiss);
}
.elementor .beegy-status .beegy-status-liste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}
.elementor .beegy-status .beegy-status-eintrag {
	padding: 26px 24px;
	border-left: 1px solid var(--beegy-linie);
	font-size: 16px;
	line-height: 1.5;
	color: var(--beegy-text-2);
}
.elementor .beegy-status .beegy-status-eintrag:first-child {
	border-left: none;
	padding-left: 0;
}
.elementor .beegy-status .beegy-status-eintrag strong {
	display: block;
	font-size: 20px;
	color: var(--beegy-text);
}

/* ---------- Infokasten (z. B. Smart Meter Gateway) ---------- */
.elementor .beegy-block .beegy-infokasten {
	max-width: 860px;
	/* Links bündig zum Inhalt (vorher rechts mit leerer linker Hälfte, wirkte verrutscht). */
	margin: 72px 0 0;
	padding: 30px 34px;
	border-radius: 20px;
	background-color: var(--beegy-blau-hell);
}
.elementor .beegy-block .beegy-infokasten h3 {
	margin-bottom: 10px;
	font-size: 22px;
}
.elementor .beegy-block .beegy-infokasten p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-infokasten .beegy-linkreihe {
	margin-top: 18px;
}

/* ---------- Ohne und mit HEMS (Schaubild aus Entwurf 3) ----------
   Ohne JS sind beide Listen voll sichtbar. relaunch.js baut das Schaubild aus den Namen
   (data-namen am Schaubild) und setzt beim Umschalten die Klasse beegy-mit-hems an der Sektion. */
.elementor .beegy-vergleich .beegy-vergleich-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: 64px;
	align-items: start;
}
.elementor .beegy-vergleich .beegy-umschalter {
	display: inline-flex;
	margin: 28px 0 26px;
	padding: 5px;
	border-radius: 12px;
	background-color: var(--beegy-weiss);
	box-shadow: 0 4px 14px #1b273314;
}
.elementor .beegy-vergleich .beegy-umschalter button {
	padding: 10px 20px;
	border: none;
	border-radius: 9px;
	background: transparent;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--beegy-text-2);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.elementor .beegy-vergleich .beegy-umschalter button[aria-pressed="true"] {
	background-color: var(--beegy-text);
	color: var(--beegy-weiss);
}
.elementor .beegy-vergleich .beegy-umschalter button.beegy-mit[aria-pressed="true"] {
	background-color: var(--beegy-orange-text);
}
.elementor .beegy-vergleich .beegy-vergleich-gruppe {
	margin-top: 22px;
	padding: 24px 26px;
	border-radius: 18px;
	background-color: var(--beegy-weiss);
	transition: opacity 0.4s ease, box-shadow 0.4s ease;
}
.elementor .beegy-vergleich .beegy-vergleich-gruppe h3 {
	margin-bottom: 12px;
	font-size: 21px;
}
.elementor .beegy-vergleich .beegy-vergleich-punkt {
	position: relative;
	padding: 7px 0 7px 26px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--beegy-text-2);
}
.elementor .beegy-vergleich .beegy-vergleich-punkt::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 15px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--beegy-linie);
}
.elementor .beegy-vergleich .beegy-vergleich-mit .beegy-vergleich-punkt::before {
	background-color: var(--beegy-orange);
}
.elementor .beegy-vergleich .beegy-vergleich-punkt strong {
	color: var(--beegy-text);
}
/* Umschalten: die jeweils andere Gruppe tritt zurück (nur mit JS, siehe Klasse beegy-js).
   Ohne Abblenden per Deckkraft: 50 % ergab 2,2:1 Kontrast (WCAG 1.4.3). Die zurücktretende Gruppe verliert
   stattdessen Fläche und Punktfarbe, der Text bleibt voll lesbar. */
.beegy-js .elementor .beegy-vergleich:not(.beegy-mit-hems) .beegy-vergleich-mit,
.beegy-js .elementor .beegy-vergleich.beegy-mit-hems .beegy-vergleich-ohne {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--beegy-linie);
}
.beegy-js .elementor .beegy-vergleich:not(.beegy-mit-hems) .beegy-vergleich-mit .beegy-vergleich-punkt::before {
	background-color: var(--beegy-linie);
}
.beegy-js .elementor .beegy-vergleich:not(.beegy-mit-hems) .beegy-vergleich-ohne {
	box-shadow: 0 0 0 2px var(--beegy-text);
}
.beegy-js .elementor .beegy-vergleich.beegy-mit-hems .beegy-vergleich-mit {
	box-shadow: 0 0 0 2px var(--beegy-orange);
}
.elementor .beegy-vergleich .beegy-claim-satz {
	margin-top: 28px;
	padding: 24px 28px;
	border-radius: 18px;
	background-color: var(--beegy-weiss);
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--beegy-text);
}
.elementor .beegy-vergleich .beegy-claim-satz em {
	font-style: normal;
	color: var(--beegy-orange-text);
}
.elementor .beegy-vergleich .beegy-claim-satz strong {
	color: var(--beegy-blau-text);
}
.elementor .beegy-vergleich .beegy-netz {
	position: sticky;
	top: 120px;
	padding: 10px;
	border-radius: 24px;
	background-color: var(--beegy-weiss);
	box-shadow: 0 20px 60px #1b273314;
}
.elementor .beegy-netz svg {
	display: block;
	width: 100%;
	height: auto;
}
.elementor .beegy-netz .beegy-masche line {
	stroke: var(--beegy-rahmen);
	stroke-width: 1.6;
	transition: opacity 0.6s ease;
}
.elementor .beegy-netz .beegy-stern {
	opacity: 0;
	transition: opacity 0.6s ease;
}
.elementor .beegy-netz .beegy-stern line {
	stroke: var(--beegy-orange);
	stroke-width: 3;
	stroke-dasharray: 6 7;
}
.elementor .beegy-netz .beegy-zentrum {
	opacity: 0;
	transform-origin: 250px 235px;
	transform: scale(0.5);
	transition: opacity 0.5s ease 0.1s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s;
}
.elementor .beegy-mit-hems .beegy-netz .beegy-stern,
.elementor .beegy-mit-hems .beegy-netz .beegy-zentrum {
	opacity: 1;
	transform: none;
}
.elementor .beegy-mit-hems .beegy-netz .beegy-masche {
	opacity: 0.12;
}
/* Mit HEMS: Energie fließt über die Sternlinien zum Zentrum (Entwurf 3, dreimal, also unter 5 s, WCAG 2.2.2).
   Startet bei jedem Umschalten neu, bei reduzierter Bewegung aus (globale Regel oben). */
.elementor .beegy-mit-hems .beegy-netz .beegy-stern line {
	animation: beegy-fluss 1.4s linear 3;
}
@keyframes beegy-fluss {
	to {
		stroke-dashoffset: -26;
	}
}
.elementor .beegy-netz text {
	font-family: var(--beegy-schrift), sans-serif;
	font-size: 15px;
	font-weight: 700;
	fill: var(--beegy-text);
}
.elementor .beegy-netz .beegy-punkt {
	fill: var(--beegy-weiss);
	stroke: var(--beegy-blau);
	stroke-width: 3;
}
.elementor .beegy-netz .beegy-netz-legende {
	padding: 4px 0 12px;
	text-align: center;
	font-size: 14px;
	color: var(--beegy-text-2);
}

/* ---------- Ablauf in Schritten (Entwurf 3) ---------- */
.elementor .beegy-block .beegy-schritte {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	counter-reset: beegy-schritt;
}
.elementor .beegy-block .beegy-schritte::before {
	content: "";
	position: absolute;
	left: 30px;
	/* Endet in der Mitte des letzten Kreises (4 Spalten, 3 Lücken à 32 px), lief vorher über den Inhalt hinaus. */
	right: calc((100% - 96px) / 4 - 30px);
	top: 28px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--beegy-blau), var(--beegy-blau-2) 45%, var(--beegy-orange-3) 75%, var(--beegy-orange));
}
.elementor .beegy-block .beegy-schritt {
	position: relative;
	padding-top: 86px;
	counter-increment: beegy-schritt;
}
.elementor .beegy-block .beegy-schritt::before {
	content: counter(beegy-schritt);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--beegy-blau-text);
	box-shadow: 0 0 0 6px var(--beegy-weiss);
	font-size: 22px;
	font-weight: 700;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-schritt:last-child::before {
	background-color: var(--beegy-orange-text);
}
.elementor .beegy-block .beegy-schritt-nr {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--beegy-orange-text);
}
.elementor .beegy-block .beegy-schritt h3 {
	margin-bottom: 8px;
	font-size: 24px;
}
.elementor .beegy-block .beegy-schritt .beegy-stufe-text {
	font-size: 16.5px;
	line-height: 1.6;
}
/* Service-Karten */
.elementor .beegy-block .beegy-karten-titel {
	margin: 72px 0 20px;
	font-size: 26px;
}
.elementor .beegy-block .beegy-karten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.elementor .beegy-block .beegy-karte {
	padding: 24px;
	border: 1px solid var(--beegy-linie);
	border-radius: 18px;
	background-color: var(--beegy-weiss);
	font-size: 16px;
	line-height: 1.55;
	color: var(--beegy-text-2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.elementor .beegy-block .beegy-karte:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px #1b27331a;
}
.elementor .beegy-block .beegy-karte strong {
	display: block;
	margin-bottom: 6px;
	font-size: 19px;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-karte p + p {
	margin-top: 10px;
}
/* Begriff und Erklärung in einer Zeile (powered by: „Photovoltaik: eigenen Strom …“).
   Vorher stand der Begriff als eigene große Zeile und wirkte größer als der Kartentitel. */
.elementor .beegy-block .beegy-karten-stapel .beegy-karte p strong {
	display: inline;
	margin: 0;
	font-size: inherit;
}
.elementor .beegy-block .beegy-karten-stapel .beegy-karte h3 {
	margin-bottom: 12px;
	font-size: 20px;
}
/* Hinweissatz unter Kacheln (powered by: „Sie möchten Energielösungen …“) mit Luft zu den Kacheln, Link dicht darunter. */
.elementor .beegy-block .beegy-karten + p {
	margin-top: 40px;
	font-size: 17px;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-karten + p + .beegy-linkreihe {
	margin-top: 10px;
}
.elementor .beegy-block .beegy-karten + .beegy-linkreihe,
.elementor .beegy-block .beegy-schritte + .beegy-linkreihe {
	margin-top: 28px;
}

/* ---------- Bildpaneele (Entwurf 2): werden bei Hover und Tastaturfokus breiter ---------- */
.elementor .beegy-block .beegy-paneele {
	display: flex;
	gap: 6px;
	height: 680px;
}
.elementor .beegy-block .beegy-paneel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: clip;
	border-radius: 24px;
	transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.elementor .beegy-block .beegy-paneel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(180deg, #10121400 25%, #101214e6 72%);
	pointer-events: none;
}
.elementor .beegy-block .beegy-paneel:is(:hover, :focus-within) {
	flex-grow: 2.4;
}
.elementor .beegy-block .beegy-paneel > .beegy-ph-info {
	top: 20px;
	bottom: auto;
}
.elementor .beegy-block .beegy-paneel-inhalt {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-paneel-inhalt .beegy-zg {
	margin-bottom: 8px;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-paneel-inhalt h3 {
	margin-bottom: 12px;
	font-size: clamp(21px, 1.7vw, 26px);
	line-height: 1.15;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-paneel-text {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.5s ease, opacity 0.4s ease;
}
.elementor .beegy-block .beegy-paneel-text > * {
	overflow: hidden;
}
.elementor .beegy-block .beegy-paneel:is(:hover, :focus-within) .beegy-paneel-text {
	grid-template-rows: 1fr;
	opacity: 1;
}
.elementor .beegy-block .beegy-paneel-text p {
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-paneel-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 10px;
}
.elementor .beegy-block .beegy-paneel .beegy-textlink {
	color: var(--beegy-weiss);
	border-color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-paneel .beegy-textlink:focus-visible {
	outline-color: var(--beegy-weiss);
}

/* ---------- Kompatible Hersteller (Logoraster aus Entwurf 3, als Gruppen statt Reiter) ---------- */
.elementor .beegy-block .beegy-gruppen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.elementor .beegy-block .beegy-gruppe {
	padding: 24px 26px;
	border: 1px solid var(--beegy-linie);
	border-radius: 18px;
	/* Weiß, weil einige Logos (EVO, Stadtwerke Kiel, KEBA) eine weiße Fläche mitbringen. */
	background-color: var(--beegy-weiss);
}
/* Partnerleiste direkt unter dem Sektionskopf (White-Label „Aus der Praxis“): Logos größer als Herstellerlogos. */
.elementor .beegy-block .beegy-kopf + .beegy-gruppe .beegy-logos {
	gap: 20px 48px;
}
.elementor .beegy-block .beegy-kopf + .beegy-gruppe .beegy-logos img {
	max-width: 220px;
	height: 52px;
}
.elementor .beegy-block .beegy-gruppe-titel {
	margin-bottom: 14px;
	font-size: 20px;
	/* h4 (White-Label) bekommt sonst keine Grundwerte und stand normal statt fett. */
	font-weight: 700;
	line-height: 1.3;
}
/* Gruppen nach einem Zwischentitel mit Einleitung: Luft zum Text. */
.elementor .beegy-block .beegy-intro + .beegy-gruppen {
	margin-top: 32px;
}
.elementor .beegy-block .beegy-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
}
.elementor .beegy-block .beegy-logos img {
	width: auto;
	max-width: 120px;
	height: 30px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s, opacity 0.3s;
}
.elementor .beegy-block .beegy-logos img:hover {
	filter: none;
	opacity: 1;
}
.elementor .beegy-block .beegy-logo-wort {
	font-size: 17px;
	font-weight: 700;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-standards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 40px;
	margin-top: 8px;
}
.elementor .beegy-block .beegy-standard {
	padding: 16px 0;
	border-top: 1px solid var(--beegy-linie);
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-standard strong {
	display: block;
	margin-bottom: 4px;
	font-size: 18px;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-zwischentitel {
	margin: 64px 0 12px;
	font-size: 26px;
}

/* ---------- FAQ (atomares Akkordeon mit FAQ-Schema) ---------- */
.elementor .beegy-faq .beegy-faq-liste,
.elementor .beegy-faq .e-accordion-item-base,
.elementor .beegy-faq .e-accordion-item-header-base,
.elementor .beegy-faq .e-accordion-item-title-base {
	padding-inline: 0;
	min-width: 0;
}
.elementor .beegy-faq .beegy-faq-liste {
	max-width: 900px;
	border-top: 1px solid var(--beegy-rahmen);
}
.elementor .beegy-faq .e-accordion-item-base {
	border-bottom: 1px solid var(--beegy-rahmen);
}
.elementor .beegy-faq .e-accordion-item-header-base {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 0;
	cursor: pointer;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--beegy-text);
	text-align: left;
}
.elementor .beegy-faq .e-accordion-item-header-base::-webkit-details-marker {
	display: none;
}
.elementor .beegy-faq .e-accordion-item-icon-base {
	flex: none;
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--beegy-orange-text);
	transition: transform 0.3s ease;
}
.elementor .beegy-faq details[open] > .e-accordion-item-header-base .e-accordion-item-icon-base {
	transform: rotate(180deg);
}
.elementor .beegy-faq .e-accordion-item-header-base:hover {
	color: var(--beegy-blau-text);
}
.elementor .beegy-faq .beegy-faq-antwort {
	max-width: 46em;
	padding: 0 0 22px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--beegy-text-2);
}

/* Erklärkarten neben einem Text (White-Label: Rolle der Stadtwerke). */
.elementor .beegy-block .beegy-karten-stapel {
	display: grid;
	gap: 16px;
}
.elementor .beegy-block .beegy-karte h3 {
	margin-bottom: 6px;
	font-size: 19px;
	line-height: 1.3;
}
.elementor .beegy-block .beegy-karte p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
/* Großer Aussagesatz am Ende einer Sektion (Schlüsselsatz, Abschlusssatz). */
.elementor .beegy-block .beegy-aussage {
	max-width: 30em;
	margin-top: 80px;
	padding-top: 48px;
	border-top: 1px solid var(--beegy-linie);
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--beegy-text);
}
/* Dunkle Signature-Sektion (White-Label: Vom Energievertrag zum Energiesystem). Kicker in Orange 3 (6:1 auf Dunkel). */
.elementor .beegy-block.beegy-flaeche-dunkel {
	background-color: var(--beegy-dunkel);
	color: var(--beegy-weiss);
}
.elementor .beegy-flaeche-dunkel :is(.beegy-h2, .beegy-stufe-titel, .beegy-aussage) {
	color: var(--beegy-weiss);
}
.elementor .beegy-flaeche-dunkel .beegy-kicker {
	color: var(--beegy-orange-3);
}
.elementor .beegy-flaeche-dunkel :is(.beegy-intro, .beegy-knoten, .beegy-knoten.beegy-an) {
	color: var(--beegy-blau-hell);
}
.elementor .beegy-flaeche-dunkel .beegy-knoten {
	border-bottom-color: #ffffff2e;
}
.elementor .beegy-flaeche-dunkel .beegy-aussage {
	border-top-color: #ffffff2e;
}
.elementor .beegy-flaeche-dunkel .beegy-spur::before {
	background-color: #ffffff24;
}
.elementor .beegy-flaeche-dunkel .beegy-textlink {
	color: var(--beegy-weiss);
	border-color: var(--beegy-weiss);
}
.elementor .beegy-flaeche-dunkel a:focus-visible {
	outline-color: var(--beegy-weiss);
}
/* Ablauf mit fünf oder mehr Schritten: drei Spalten, jeder Schritt mit eigenem Kreis, ohne durchgehende Linie. */
.elementor .beegy-block .beegy-schritte:has(> .beegy-schritt:nth-child(5)) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: 56px;
}
.elementor .beegy-block .beegy-schritte:has(> .beegy-schritt:nth-child(5))::before {
	display: none;
}

/* Karten mit mehreren Absätzen und fünf Karten (3 plus 2). */
.elementor .beegy-block .beegy-karte p + p {
	margin-top: 8px;
}
.elementor .beegy-block .beegy-karten:has(> :nth-child(5):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.elementor .beegy-block .beegy-karten .beegy-karte h3 {
	font-size: 20px;
}

/* ---------- Vergleichstabelle (Text-Editor, echte Tabelle mit th scope) ---------- */
.elementor .beegy-block .beegy-vergleichstabelle {
	width: 100%;
	margin: 8px 0 28px;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.5;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-vergleichstabelle :is(th, td) {
	padding: 16px 18px;
	border: none;
	border-bottom: 1px solid var(--beegy-linie);
	text-align: left;
	vertical-align: top;
	background: transparent;
}
.elementor .beegy-block .beegy-vergleichstabelle thead th {
	font-size: 17px;
	font-weight: 700;
	color: var(--beegy-text);
	border-bottom: 2px solid var(--beegy-text);
}
.elementor .beegy-block .beegy-vergleichstabelle thead th:nth-child(2) {
	color: var(--beegy-orange-text);
}
.elementor .beegy-block .beegy-vergleichstabelle thead th:nth-child(3) {
	color: var(--beegy-blau-text);
}
.elementor .beegy-block .beegy-vergleichstabelle tbody th {
	width: 22%;
	font-weight: 700;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-vergleichstabelle tbody tr:nth-child(odd) :is(th, td) {
	background-color: color-mix(in srgb, var(--beegy-linie) 25%, var(--beegy-weiss));
}

/* ---------- Unterseiten: schmalere Bildschirme ---------- */
@media (max-width: 1100px) {
	.elementor .beegy-block .beegy-paneele {
		height: 760px;
	}
}
@media (max-width: 980px) {
	/* Mobil: oben durchgehend Orange, die Schale bildet nur den unteren Abschluss (wie Entwurf 1 mobil). */
	.elementor .beegy-block.beegy-aufmacher {
		padding: 40px 0 140px;
		background: linear-gradient(var(--beegy-orange-text), var(--beegy-orange-text)) top / 100% calc(100% - 300px) no-repeat;
	}
	.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer {
		background: none;
	}
	.elementor .beegy-block.beegy-aufmacher::before {
		left: -70vw;
		bottom: 70px;
		width: 240vw;
	}
	.elementor .beegy-block.beegy-aufmacher::after {
		right: -30vw;
		width: 110vw;
	}
	.elementor .beegy-aufmacher .beegy-aufmacher-in {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.elementor .beegy-aufmacher .beegy-aufmacher-bild {
		width: 92%;
		margin-left: 8%;
		border-radius: 24px;
	}
	.elementor .beegy-aufmacher .beegy-lead {
		font-size: 18px;
	}
	.elementor .beegy-status .beegy-status-liste {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
	}
	.elementor .beegy-status .beegy-status-eintrag {
		padding: 18px 14px;
		font-size: 15px;
	}
	.elementor .beegy-status .beegy-status-eintrag:nth-child(odd) {
		border-left: none;
		padding-left: 0;
	}
	.elementor .beegy-status .beegy-status-eintrag:nth-child(n+3) {
		border-top: 1px solid var(--beegy-linie);
	}
	.elementor .beegy-status .beegy-status-eintrag strong {
		font-size: 18px;
	}
	.elementor .beegy-block .beegy-infokasten {
		margin-top: 48px;
		padding: 24px 22px;
	}
	.elementor .beegy-vergleich .beegy-vergleich-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.elementor .beegy-vergleich .beegy-netz {
		position: static;
	}
	.elementor .beegy-block .beegy-schritte,
	.elementor .beegy-block .beegy-schritte:has(> .beegy-schritt:nth-child(5)) {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.elementor .beegy-block .beegy-schritte:has(> .beegy-schritt:nth-child(5))::before {
		display: block;
	}
	.elementor .beegy-block .beegy-aussage {
		margin-top: 56px;
		padding-top: 36px;
	}
	.elementor .beegy-block .beegy-schritte::before {
		left: 28px;
		right: auto;
		top: 30px;
		bottom: 30px;
		width: 4px;
		height: auto;
		background: linear-gradient(180deg, var(--beegy-blau), var(--beegy-orange));
	}
	.elementor .beegy-block .beegy-schritt {
		padding: 0 0 0 84px;
		min-height: 60px;
	}
	.elementor .beegy-block .beegy-karten {
		grid-template-columns: 1fr 1fr;
	}
	.elementor .beegy-block .beegy-paneele {
		flex-direction: column;
		height: auto;
		gap: 16px;
	}
	/* Mobil: Hinweis oben, Text darunter im Fluss, damit sich nichts überlagert. */
	.elementor .beegy-block .beegy-paneel {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: none;
		min-height: 420px;
	}
	.elementor .beegy-block .beegy-paneel > .beegy-ph-info {
		position: relative;
		top: auto;
		left: auto;
		bottom: auto;
		margin: 16px 16px 120px;
	}
	.elementor .beegy-block .beegy-paneel-inhalt {
		position: relative;
		padding: 24px 22px;
	}
	.elementor .beegy-block .beegy-paneel-text {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	.elementor .beegy-block .beegy-gruppen,
	.elementor .beegy-block .beegy-standards {
		grid-template-columns: 1fr;
	}
	.elementor .beegy-block .beegy-karten:has(> :nth-child(5):last-child) {
		grid-template-columns: 1fr 1fr;
	}
	/* Tabelle mobil: Zeilenkopf über zwei Spalten, Semantik bleibt über role-Attribute im Markup. */
	.elementor .beegy-block .beegy-vergleichstabelle thead tr,
	.elementor .beegy-block .beegy-vergleichstabelle tbody tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.elementor .beegy-block .beegy-vergleichstabelle thead th:first-child {
		display: none;
	}
	.elementor .beegy-block .beegy-vergleichstabelle tbody th {
		grid-column: 1 / -1;
		width: auto;
		padding-bottom: 4px;
		border-bottom: none;
	}
	.elementor .beegy-block .beegy-vergleichstabelle :is(th, td) {
		padding: 12px 10px;
		font-size: 15px;
	}
	.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer {
		padding-bottom: 230px;
	}
	.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer::before {
		left: auto;
		right: -18vw;
		bottom: 24px;
		width: 92vw;
	}
}
@media (max-width: 600px) {
	/* Auch die Fünferkarten (powered by „Ihre Vorteile“) einspaltig, sonst brachen Wörter mitten im Wort um. */
	.elementor .beegy-block .beegy-karten,
	.elementor .beegy-block .beegy-karten:has(> :nth-child(5):last-child) {
		grid-template-columns: 1fr;
	}
}
/* Sektionsabstand der Unterseiten: Tablet 88 px, Mobil 64 px (steht hinter der Desktop-Regel, damit er greift). */
@media (max-width: 980px) {
	body:not(.home) .elementor .beegy-block.beegy-sektion {
		padding-block: 88px;
	}
}
@media (max-width: 600px) {
	body:not(.home) .elementor .beegy-block.beegy-sektion {
		padding-block: 64px;
	}
}
/* Touch ohne Hover: Paneeltexte immer sichtbar. */
@media (hover: none) {
	.elementor .beegy-block .beegy-paneel-text {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.elementor .beegy-block .beegy-paneel-text {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	.elementor .beegy-block .beegy-paneel:is(:hover, :focus-within) {
		flex-grow: 1;
	}
}
/* Ohne JS kein leerer Schaubild-Rahmen: die Listen tragen den Inhalt. */
html:not(.beegy-js) .elementor .beegy-vergleich .beegy-netz,
html:not(.beegy-js) .elementor .beegy-vergleich .beegy-umschalter {
	display: none;
}

/* Lange Komposita in Überschriften: nur an weichen Trennstellen (Wortfugen, setzt eb_lib.php beim Aufbau),
   keine automatische Trennung (die bricht im Deutschen an falschen Stellen). Alle Seiten. */
.elementor .beegy-block :is(h1, h2, h3) {
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
}

/* =========================================================
   Bestandsseiten im neuen Design (Migration aus Divi, 07.10.2026)
   Inhalte 1:1 aus dem Divi-Klon, Bausteine der Unterseiten wiederverwendet.
   ========================================================= */

/* Kompakter Aufmacher (Text-, Formular- und Dankeseiten, Bestandsseiten ohne Foto):
   gleiche Schale wie die Unterseiten, aber flacher und mit kleinerer H1. */
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-kompakt {
	padding: 56px 0 150px;
}
.elementor .beegy-aufmacher-kompakt .beegy-aufmacher-in {
	grid-template-columns: minmax(0, 1fr);
}
.elementor .beegy-aufmacher-kompakt .beegy-aufmacher-text {
	max-width: 760px;
}
.elementor .beegy-aufmacher-kompakt .beegy-h1 {
	font-size: clamp(34px, 3.8vw, 54px);
}
.elementor .beegy-aufmacher-kompakt .beegy-lead:last-child {
	margin-bottom: 0;
}
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-kompakt::after {
	width: min(560px, 42vw);
}

/* Nach dem kompakten Aufmacher weniger Abstand (Schale unten plus 120 px Sektionsabstand waren zu viel). */
body:not(.home) .elementor .beegy-block.beegy-aufmacher-kompakt + .beegy-block.beegy-sektion {
	padding-top: 32px;
}

/* Textseite (Impressum, Datenschutz, Erklärungen): Lesebreite, klare Hierarchie.
   Inhalt steht in einem Text-Editor-Widget, damit beegy die Rechtstexte frei pflegen kann. */
.elementor .beegy-textseite {
	max-width: 52em;
	font-size: 17px;
	line-height: 1.7;
	color: var(--beegy-text);
}
.elementor .beegy-textseite :is(h1, h2, h3, h4, h5, h6) {
	margin: 1.8em 0 0.6em;
	font-family: var(--beegy-schrift), sans-serif;
	font-weight: 700;
	line-height: 1.25;
	color: var(--beegy-text);
}
.elementor .beegy-textseite h2 { font-size: clamp(24px, 2.4vw, 30px); }
.elementor .beegy-textseite h3 { font-size: 21px; }
.elementor .beegy-textseite :is(h4, h5, h6) { font-size: 18px; }
.elementor .beegy-textseite > .elementor-widget-container > :first-child,
.elementor .beegy-textseite .elementor-widget-text-editor > :first-child {
	margin-top: 0;
}
.elementor .beegy-textseite p,
.elementor .beegy-textseite :is(ul, ol) {
	margin: 0 0 1em;
}
.elementor .beegy-textseite :is(ul, ol) {
	padding-left: 1.4em;
}
.elementor .beegy-textseite li + li {
	margin-top: 0.35em;
}
.elementor .beegy-textseite a {
	color: var(--beegy-blau-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.elementor .beegy-textseite a:hover {
	color: var(--beegy-orange-text);
}
.elementor .beegy-textseite table {
	width: 100%;
	margin: 0 0 1.4em;
	border-collapse: collapse;
	font-size: 16px;
}
.elementor .beegy-textseite :is(th, td) {
	padding: 10px 12px;
	border: 1px solid var(--beegy-linie);
	text-align: left;
	vertical-align: top;
}
.elementor .beegy-textseite img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
/* Textseite mit Seitenspalte (Whistleblower: Kontakt rechts). */
.elementor .beegy-block .beegy-text-spalten {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.elementor .beegy-block .beegy-seitenkasten {
	padding: 28px;
	border-radius: 18px;
	background-color: color-mix(in srgb, var(--beegy-blau-hell) 55%, var(--beegy-weiss));
	font-size: 16px;
	line-height: 1.6;
}
.elementor .beegy-block .beegy-seitenkasten p + p {
	margin-top: 10px;
}
.elementor .beegy-block .beegy-seitenkasten a {
	color: var(--beegy-blau-text);
	font-weight: 700;
	text-decoration: underline;
	overflow-wrap: anywhere;
}

/* Formularseiten (Kündigung, Barriere melden): Formularkarte in Lesebreite. */
.elementor .beegy-block .beegy-formular-schmal {
	max-width: 820px;
}

/* Karten mit Bild (Karriere, Geschäftskunden, Über uns, Kontakt): Bild oben, Titel, Text, Link. */
.elementor .beegy-block .beegy-bildkarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.elementor .beegy-block .beegy-bildkarten:has(> :nth-child(2):last-child),
.elementor .beegy-block .beegy-bildkarten:has(> :nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.elementor .beegy-block .beegy-bildkarte {
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: clip;
	padding: 0 0 28px;
	border: 1px solid var(--beegy-linie);
	border-radius: 22px;
	background-color: var(--beegy-weiss);
	font-size: 17px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-bildkarte > :not(.beegy-bildkarte-bild) {
	margin-inline: 28px;
}
.elementor .beegy-block .beegy-bildkarte .beegy-bildkarte-bild {
	margin-bottom: 8px;
}
.elementor .beegy-block .beegy-bildkarte .beegy-bildkarte-bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.elementor .beegy-block .beegy-bildkarten.beegy-portraits .beegy-bildkarte-bild img {
	aspect-ratio: 1 / 1;
}
.elementor .beegy-block .beegy-bildkarte h3 {
	font-size: 22px;
	line-height: 1.3;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-bildkarte p + p {
	margin-top: 8px;
}
.elementor .beegy-block .beegy-bildkarte .beegy-linkreihe {
	margin-top: auto;
	padding-top: 8px;
}
.elementor .beegy-block .beegy-bildkarte a:not(.beegy-textlink, .e-button-base) {
	color: var(--beegy-blau-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Zeitleiste (Über uns: Weg zum Komplettanbieter). */
.elementor .beegy-block .beegy-zeitleiste {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	counter-reset: none;
}
.elementor .beegy-block .beegy-zeitpunkt {
	position: relative;
	padding: 56px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-zeitpunkt::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 0;
	right: -20px;
	height: 3px;
	background: linear-gradient(90deg, var(--beegy-orange), var(--beegy-blau));
}
.elementor .beegy-block .beegy-zeitpunkt:last-child::before {
	right: 0;
}
.elementor .beegy-block .beegy-zeitpunkt::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 19px;
	height: 19px;
	border: 4px solid var(--beegy-weiss);
	border-radius: 50%;
	background-color: var(--beegy-orange);
	box-shadow: 0 0 0 2px var(--beegy-orange);
}
.elementor .beegy-block .beegy-zeitpunkt h3 {
	margin-bottom: 10px;
	font-size: 34px;
	color: var(--beegy-orange-text);
}
.elementor .beegy-block .beegy-zeitpunkt p + p {
	margin-top: 8px;
}
.elementor .beegy-block .beegy-zeitpunkt a {
	color: var(--beegy-blau-text);
	font-weight: 700;
	text-decoration: underline;
}

/* Text mit Bild nebeneinander (Über uns: MVV, HEMS-Services: Komplettlösung). */
.elementor .beegy-block .beegy-text-bild {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}
.elementor .beegy-block .beegy-text-bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}
.elementor .beegy-block .beegy-text-bild p + p {
	margin-top: 14px;
}
.elementor .beegy-block .beegy-text-bild a:not(.beegy-textlink, .beegy-btn-primaer) {
	color: var(--beegy-blau-text);
	font-weight: 700;
	text-decoration: underline;
}

/* Downloads: Liste von Dateien mit Typ-Hinweis. */
.elementor .beegy-block .beegy-downloads ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 28px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}
.elementor .beegy-block .beegy-downloads li a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 14px 20px;
	border: 1px solid var(--beegy-linie);
	border-radius: 14px;
	background-color: var(--beegy-weiss);
	font-weight: 700;
	color: var(--beegy-text);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.elementor .beegy-block .beegy-downloads li a::before {
	content: "";
	flex: 0 0 22px;
	height: 22px;
	background-color: var(--beegy-orange-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12M6 10l6 6 6-6M4 20h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12M6 10l6 6 6-6M4 20h16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.elementor .beegy-block .beegy-downloads li a:hover,
.elementor .beegy-block .beegy-downloads li a:focus-visible {
	border-color: var(--beegy-blau);
	box-shadow: 0 10px 24px #1b273314;
}
.elementor .beegy-block .beegy-downloads li a small {
	margin-left: auto;
	font-size: 14px;
	font-weight: 400;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-downloads h3 {
	margin: 0 0 18px;
	font-size: 24px;
}

/* Fußnoten (HEMS-Services: Einsparhinweise). */
.elementor .beegy-block .beegy-fussnoten {
	max-width: 60em;
	font-size: 14px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-fussnoten p + p {
	margin-top: 8px;
}

@media (max-width: 980px) {
	.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-kompakt {
		padding: 40px 0 120px;
		background: linear-gradient(var(--beegy-orange-text), var(--beegy-orange-text)) top / 100% calc(100% - 240px) no-repeat;
	}
	.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-kompakt::after {
		width: 80vw;
	}
	.elementor .beegy-block .beegy-text-spalten,
	.elementor .beegy-block .beegy-text-bild {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
	.elementor .beegy-block .beegy-bildkarten,
	.elementor .beegy-block .beegy-bildkarten:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.elementor .beegy-block .beegy-zeitleiste {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.elementor .beegy-block .beegy-zeitpunkt {
		padding: 0 0 32px 44px;
	}
	.elementor .beegy-block .beegy-zeitpunkt::before {
		top: 6px;
		left: 8px;
		right: auto;
		bottom: 0;
		width: 3px;
		height: auto;
		background: linear-gradient(var(--beegy-orange), var(--beegy-blau));
	}
	.elementor .beegy-block .beegy-zeitpunkt:last-child::before {
		display: none;
	}
	.elementor .beegy-block .beegy-zeitpunkt::after {
		top: 4px;
	}
	.elementor .beegy-block .beegy-zeitpunkt h3 {
		font-size: 28px;
	}
}
@media (max-width: 600px) {
	.elementor .beegy-block .beegy-bildkarten,
	.elementor .beegy-block .beegy-bildkarten:has(> :nth-child(2):last-child),
	.elementor .beegy-block .beegy-bildkarten:has(> :nth-child(4):last-child),
	.elementor .beegy-block .beegy-downloads ul {
		grid-template-columns: minmax(0, 1fr);
	}
	.elementor .beegy-textseite {
		font-size: 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.elementor .beegy-block .beegy-downloads li a {
		transition: none;
	}
}
/* Textseite ohne Aufmacher (englische Datenschutzhinweise): H1 im Textblock. */
.elementor .beegy-textseite h1 {
	margin: 0 0 0.8em;
	font-size: clamp(32px, 3.4vw, 46px);
	line-height: 1.15;
}
/* Kontaktseite: Telefon und Standorte links, Formularkarte rechts, oben bündig. */
.elementor .beegy-kontakt-seite .beegy-kontakt-grid {
	align-items: start;
}
.elementor .beegy-kontakt-seite .beegy-telefon {
	margin: 8px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
.elementor .beegy-kontakt-seite .beegy-telefon a {
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 700;
	color: var(--beegy-blau-text);
	text-decoration: none;
}
.elementor .beegy-kontakt-seite .beegy-telefon a:hover {
	color: var(--beegy-orange-text);
	text-decoration: underline;
}
.elementor .beegy-kontakt-seite h3 {
	margin: 56px 0 20px;
	font-size: 24px;
}
.elementor .beegy-kontakt-seite .beegy-faq-antwort a {
	color: var(--beegy-blau-text);
	font-weight: 700;
}
/* Einleitung im Sektionskopf aus dem Bestand (Text-Editor mit Links und Absätzen). */
.elementor .beegy-kopf .beegy-kopf-text {
	margin-top: 20px;
	font-size: 19px;
	line-height: 1.65;
	color: var(--beegy-text-2);
}
.elementor .beegy-kopf .beegy-kopf-text p + p {
	margin-top: 14px;
}
.elementor .beegy-kopf .beegy-kopf-text a {
	color: var(--beegy-blau-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.elementor .beegy-flaeche-dunkel .beegy-kopf .beegy-kopf-text {
	color: var(--beegy-weiss);
}
/* Karten mit Titel und Text aus dem Bestand (Vorteile Karriere, Partnerschaft Geschäftskunden). */
.elementor .beegy-block .beegy-karte .elementor-widget-text-editor p + p {
	margin-top: 10px;
}
.elementor .beegy-block .beegy-karte h3 {
	margin-bottom: 10px;
}
.elementor .beegy-block .beegy-karte a {
	color: var(--beegy-blau-text);
	font-weight: 700;
	text-decoration: underline;
}
/* Sechs Vorteile in drei Spalten (Karriere). */
.elementor .beegy-block .beegy-karten.beegy-karten-drei {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 980px) {
	.elementor .beegy-block .beegy-karten.beegy-karten-drei {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.elementor .beegy-block .beegy-karten.beegy-karten-drei {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Karte rechts neben Text (Karriere: Ansprechpartnerinnen) nicht breiter als nötig. */
.elementor .beegy-block .beegy-text-bild > .beegy-bildkarte {
	max-width: 440px;
	justify-self: end;
}
.elementor .beegy-block .beegy-text-bild > .beegy-bildkarte .beegy-bildkarte-bild img {
	aspect-ratio: auto;
}
/* Akkordeon mit Text-Editor-Inhalt (Offene Stellen, FAQ aus dem Bestand): Listen und Absätze. */
.elementor .beegy-faq .beegy-faq-antwort :is(ul, ol) {
	margin: 0 0 1em;
	padding-left: 1.3em;
}
.elementor .beegy-faq .beegy-faq-antwort li + li {
	margin-top: 0.3em;
}
.elementor .beegy-faq .beegy-faq-antwort p {
	margin: 0 0 0.9em;
}
.elementor .beegy-faq .beegy-faq-antwort a {
	color: var(--beegy-blau-text);
	font-weight: 700;
	text-decoration: underline;
}
.elementor .beegy-faq .e-accordion-item-content-base > .beegy-linkreihe,
.elementor .beegy-faq .beegy-faq-antwort + .beegy-linkreihe {
	margin: 8px 0 24px;
}
/* Standort-Überschriften über den Stellen-Listen. */
.elementor .beegy-faq .beegy-stellen-ort {
	margin: 48px 0 12px;
	font-size: 24px;
}
.elementor .beegy-faq .beegy-kopf + .beegy-stellen-ort {
	margin-top: 0;
}
/* Logoreihe (Offene Stellen: Unsere Partner). */
.elementor .beegy-block .beegy-logoreihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px 64px;
}
.elementor .beegy-block .beegy-logoreihe img {
	width: auto;
	max-width: 220px;
	height: 72px;
	object-fit: contain;
}
/* Onlineshop: Registrierung je Kundengruppe als Karte mit Formular darunter. */
.elementor .beegy-block .beegy-registrierungen {
	align-items: start;
}
.elementor .beegy-block .beegy-registrierung {
	display: flex;
	flex-direction: column;
	gap: 24px;
	scroll-margin-top: 110px;
}
.elementor .beegy-block .beegy-registrierung .beegy-bildkarte h2 {
	font-size: 26px;
	line-height: 1.25;
	color: var(--beegy-text);
}
/* Zwischenüberschriften in Akkordeon-Antworten (Stellenanzeigen). */
.elementor .beegy-faq .beegy-faq-antwort h4 {
	margin: 1.2em 0 0.5em;
	font-size: 18px;
	line-height: 1.3;
	color: var(--beegy-text);
}
.elementor .beegy-faq .beegy-faq-antwort h4:first-child {
	margin-top: 0;
}
/* Zwei Bildkarten nebeneinander: flacheres Bildformat, sonst werden die Bilder sehr hoch. */
.elementor .beegy-block .beegy-bildkarten:is(:has(> :nth-child(2):last-child), :has(> :nth-child(4):last-child)) .beegy-bildkarte-bild img {
	aspect-ratio: 2 / 1;
}

/* ---------- Newsroom: Beitragskarten, Beitragsvorlage, Archiv ---------- */
/* Titel aus den Theme-Widgets im Aufmacher wie die H1 der Unterseiten. */
.elementor .beegy-aufmacher :is(.elementor-widget-theme-post-title, .elementor-widget-theme-archive-title) .elementor-heading-title {
	font-family: var(--beegy-schrift), sans-serif;
	font-size: clamp(32px, 3.6vw, 52px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--beegy-weiss);
	overflow-wrap: break-word;
	hyphens: manual;
}
.elementor .beegy-aufmacher .beegy-beitrag-meta {
	margin-bottom: 16px;
}
.elementor .beegy-aufmacher .beegy-beitrag-meta .elementor-icon-list-items {
	gap: 4px 20px;
}
.elementor .beegy-aufmacher .beegy-beitrag-meta :is(.elementor-icon-list-text, a) {
	font-size: 15px;
	font-weight: 700;
	color: var(--beegy-weiss);
}
.elementor .beegy-aufmacher .beegy-beitrag-meta a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.elementor .beegy-aufmacher .beegy-beitrag-meta .elementor-icon-list-item::after {
	border-color: #ffffff80;
}
/* Beitrag: Bild und Text in Lesebreite. */
.elementor .beegy-block .beegy-beitrag {
	max-width: calc(52em + 64px);
}
.elementor .beegy-block .beegy-beitrag-bild img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 40px;
	border-radius: 24px;
}
.elementor .beegy-block .beegy-beitrag .beegy-linkreihe {
	margin-top: 40px;
}
/* Beitragskarten (Elementor Posts, Skin Karten) im beegy-Stil. */
.elementor .beegy-newsroom .elementor-posts-container {
	gap: 28px;
}
.elementor .beegy-newsroom .elementor-post__card {
	overflow: clip;
	border: 1px solid var(--beegy-linie);
	border-radius: 22px;
	background-color: var(--beegy-weiss);
	box-shadow: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.elementor .beegy-newsroom .elementor-post__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px #1b27331a;
}
.elementor .beegy-newsroom .elementor-post__text {
	padding: 0 28px;
}
.elementor .beegy-newsroom .elementor-post__title,
.elementor .beegy-newsroom .elementor-post__title a {
	font-family: var(--beegy-schrift), sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--beegy-text);
}
.elementor .beegy-newsroom .elementor-post__title a:hover {
	color: var(--beegy-orange-text);
}
.elementor .beegy-newsroom .elementor-post__excerpt p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
.elementor .beegy-newsroom .elementor-post__read-more {
	font-size: 16px;
	font-weight: 700;
	color: var(--beegy-blau-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.elementor .beegy-newsroom .elementor-post__meta-data {
	padding: 14px 28px;
	border-top: 1px solid var(--beegy-linie);
	font-size: 14px;
	color: var(--beegy-text-2);
}
.elementor .beegy-newsroom .elementor-post__badge {
	padding: 6px 12px;
	border-radius: 999px;
	background-color: var(--beegy-orange-text);
	font-size: 13px;
	font-weight: 700;
	color: var(--beegy-weiss);
	text-transform: none;
}
.elementor .beegy-newsroom .elementor-pagination {
	margin-top: 48px;
	font-size: 17px;
	font-weight: 700;
}
.elementor .beegy-newsroom .elementor-pagination :is(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	color: var(--beegy-blau-text);
}
.elementor .beegy-newsroom .elementor-pagination .current {
	border-radius: 999px;
	background-color: var(--beegy-orange-text);
	color: var(--beegy-weiss);
}
@media (prefers-reduced-motion: reduce) {
	.elementor .beegy-newsroom .elementor-post__card {
		transition: none;
	}
}
.elementor .beegy-newsroom .elementor-post__read-more {
	text-transform: none;
}
/* Links in Formular-Labels (Datenschutz-Haken) als Link erkennbar, nicht nur über die Farbe (WCAG 1.4.1). */
.beegy-form-buehne .gform_wrapper .gform-field-label a,
.beegy-form-buehne .gform_wrapper .gfield_description a {
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* =========================================================
   Design-Feedback beegy (Sophia und Alex, 08.10.2026), Unterseiten HEMS, White-Label, powered by
   und alle übrigen Seiten: kein Hellblau als Fläche, Verlaufsflächen in Orange oder Blau,
   weniger Kästen, Überschriften zum Ausklappen, Zeitstrahl nach rechts, Vernetzungshaus.
   Verläufe: Weißer Fließtext braucht 4,5:1, deshalb laufen die Flächen nur über die dunklen
   Töne des CD-Verlaufs (Blau-tief 6,9:1 bis Blau-Text 5,9:1, Orange-Text 5,2:1 bis 4,6:1).
   ========================================================= */

/* Helle Flächen (Hellblau, Graublau) werden weiß, auf allen Seiten. Zwei weiße Sektionen
   hintereinander: oberer Abstand der zweiten entfällt (sonst 240 px Leere). */
.elementor .beegy-block.beegy-flaeche-hell,
.elementor .beegy-block.beegy-flaeche-grau,
.elementor .beegy-block.beegy-flaeche-hell + .beegy-block.beegy-flaeche-grau {
	background-color: var(--beegy-weiss);
}
body:not(.home) .elementor .beegy-block.beegy-sektion:not(.beegy-flaeche-blau, .beegy-flaeche-orange, .beegy-flaeche-dunkel) + .beegy-block.beegy-sektion:not(.beegy-flaeche-blau, .beegy-flaeche-orange, .beegy-flaeche-dunkel) {
	padding-top: 0;
}

/* Verlaufsflächen statt Hellblau und Schwarz (White-Label: Vom Energievertrag zum Energiesystem). */
.elementor .beegy-block.beegy-flaeche-blau {
	background: linear-gradient(90deg, var(--beegy-blau-tief), var(--beegy-blau-text));
	color: var(--beegy-weiss);
}
.elementor .beegy-block.beegy-flaeche-orange {
	background: linear-gradient(90deg, var(--beegy-orange-text), color-mix(in srgb, var(--beegy-orange-text) 60%, var(--beegy-orange)));
	color: var(--beegy-weiss);
}
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) :is(.beegy-h2, .beegy-kicker, .beegy-intro, .beegy-zwischentitel) {
	color: var(--beegy-weiss);
}
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) :is(a, summary):focus-visible {
	outline-color: var(--beegy-weiss);
}

/* Sektionskopf über die volle Breite (Wunsch beegy: „Text über gesamte Breite ziehen“). */
.elementor .beegy-sektion .beegy-kopf.beegy-kopf-breit,
.elementor .beegy-block .beegy-kopf-breit .beegy-intro,
.elementor .beegy-block .beegy-kopf-text.beegy-kopf-breit {
	max-width: none;
}
.elementor .beegy-block .beegy-kopf-text.beegy-kopf-breit {
	margin-top: 48px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-kopf-text.beegy-kopf-breit strong {
	color: var(--beegy-text);
}

/* ---------- Listen mit Häkchen (Text-Editor, von beegy pflegbar) ---------- */
.elementor .beegy-block ul.beegy-haken {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.elementor .beegy-block ul.beegy-haken li {
	position: relative;
	padding-left: 36px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--beegy-text);
}
.elementor .beegy-block ul.beegy-haken li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--beegy-orange-hell);
}
.elementor .beegy-block ul.beegy-haken li::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 5px;
	width: 6px;
	height: 11px;
	border: solid var(--beegy-orange-text);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* Zweite Liste in Blau (powered by: „Das fehlt im Unternehmen oft“). */
.elementor .beegy-block ul.beegy-haken-blau li::before {
	background-color: color-mix(in srgb, var(--beegy-blau-hell) 70%, var(--beegy-weiss));
}
.elementor .beegy-block ul.beegy-haken-blau li::after {
	border-color: var(--beegy-blau-text);
}
/* Große Häkchen mit hervorgehobenem Titel (White-Label: Ihre Vorteile, Warum beegy; HEMS: Mit HEMS).
   Kreis im dunklen Orange-Verlauf, weißes Häkchen 4,6:1. */
.elementor .beegy-block ul.beegy-haken-gross {
	gap: 28px 48px;
}
.elementor .beegy-block ul.beegy-haken-gross li {
	padding-left: 60px;
	font-size: 17.5px;
	color: var(--beegy-text-2);
}
.elementor .beegy-block ul.beegy-haken-gross li::before {
	top: -2px;
	width: 42px;
	height: 42px;
	background: linear-gradient(135deg, var(--beegy-orange-text), color-mix(in srgb, var(--beegy-orange-text) 55%, var(--beegy-orange)));
}
.elementor .beegy-block ul.beegy-haken-gross li::after {
	left: 16px;
	top: 6px;
	width: 9px;
	height: 18px;
	border-color: var(--beegy-weiss);
	border-width: 0 3px 3px 0;
}
.elementor .beegy-block ul.beegy-haken-gross li strong {
	display: block;
	margin-bottom: 4px;
	font-size: 21px;
	line-height: 1.3;
	color: var(--beegy-text);
}
.elementor .beegy-sektion .beegy-kopf + .beegy-vorteile-liste {
	margin-top: -16px;
}
.elementor .beegy-block .beegy-vorteile-liste ul.beegy-haken-gross {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.elementor .beegy-block.beegy-vernetzt ul.beegy-haken-gross {
	margin-top: 36px;
}

/* Zwei Listen nebeneinander (White-Label: Kundenschnittstelle, powered by: Ausgangslage). */
.elementor .beegy-block .beegy-zwei-listen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 72px;
}
.elementor .beegy-block .beegy-zwei-listen .beegy-zwischentitel {
	margin: 0 0 20px;
	font-size: 23px;
}

/* ---------- Überschriften zum Ausklappen (atomares Akkordeon ohne FAQ-Schema) ----------
   HEMS „Warum ein HEMS“: ersetzt die Spur der Startseite. Hover: Titel rückt ein und wird orange. */
.elementor .beegy-klapp,
.elementor .beegy-klapp .e-accordion-item-base,
.elementor .beegy-klapp .e-accordion-item-header-base,
.elementor .beegy-klapp .e-accordion-item-title-base,
.elementor .beegy-klapp .e-accordion-item-content-base {
	padding-inline: 0;
	min-width: 0;
}
.elementor .beegy-block .beegy-klapp {
	border-top: 1px solid var(--beegy-linie);
}
.elementor .beegy-klapp .e-accordion-item-base {
	border-bottom: 1px solid var(--beegy-linie);
}
.elementor .beegy-klapp .e-accordion-item-header-base {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 28px 0;
	cursor: pointer;
	font-size: clamp(21px, 1.9vw, 27px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--beegy-text);
	text-align: left;
}
.elementor .beegy-klapp .e-accordion-item-header-base::-webkit-details-marker {
	display: none;
}
.elementor .beegy-klapp .e-accordion-item-title-base {
	transition: transform 0.25s ease, color 0.25s ease;
}
.elementor .beegy-klapp .e-accordion-item-header-base:hover .e-accordion-item-title-base {
	transform: translateX(8px);
	color: var(--beegy-orange-text);
}
.elementor .beegy-klapp details[open] > .e-accordion-item-header-base {
	color: var(--beegy-orange-text);
}
.elementor .beegy-klapp .e-accordion-item-icon-base {
	flex: none;
	width: 42px;
	height: 42px;
	padding: 9px;
	border: 2px solid currentColor;
	border-radius: 50%;
	color: var(--beegy-orange-text);
	transition: transform 0.3s ease, background-color 0.25s ease, color 0.25s ease;
}
.elementor .beegy-klapp .e-accordion-item-header-base:hover .e-accordion-item-icon-base {
	background-color: var(--beegy-orange-text);
	border-color: var(--beegy-orange-text);
	color: var(--beegy-weiss);
}
.elementor .beegy-klapp details[open] > .e-accordion-item-header-base .e-accordion-item-icon-base {
	transform: rotate(180deg);
}
.elementor .beegy-klapp .e-accordion-item-content-base {
	padding-bottom: 28px;
}
.elementor .beegy-klapp .beegy-klapp-text {
	max-width: 42em;
	font-size: 17px;
	line-height: 1.65;
	color: var(--beegy-text-2);
}
.elementor .beegy-klapp .beegy-klapp-text + .beegy-klapp-text {
	margin-top: 14px;
}
/* Mit Zeitstrahl nach unten (White-Label, blaue Fläche): Linie und Punkte, alles in Weiß. */
.elementor .beegy-block .beegy-klapp.beegy-klapp-spur {
	position: relative;
	padding-left: 56px;
	border-top: 0;
}
.elementor .beegy-klapp.beegy-klapp-spur::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 40px;
	bottom: 40px;
	width: 3px;
	height: auto;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--beegy-weiss), color-mix(in srgb, var(--beegy-weiss) 30%, transparent));
}
.elementor .beegy-klapp-spur .e-accordion-item-base {
	position: relative;
	border-bottom-color: #ffffff3d;
}
.elementor .beegy-klapp-spur .e-accordion-item-base::before {
	content: "";
	position: absolute;
	left: -49px;
	top: 32px;
	width: 22px;
	height: 22px;
	border: 3px solid var(--beegy-weiss);
	border-radius: 50%;
	background-color: var(--beegy-blau-tief);
	transition: background-color 0.25s ease;
}
.elementor .beegy-klapp-spur details[open]::before,
.elementor .beegy-klapp-spur .e-accordion-item-base:hover::before {
	background-color: var(--beegy-weiss);
}
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) .beegy-klapp .e-accordion-item-header-base,
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) .beegy-klapp details[open] > .e-accordion-item-header-base,
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) .beegy-klapp .e-accordion-item-header-base:hover .e-accordion-item-title-base,
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) .beegy-klapp .e-accordion-item-icon-base,
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) .beegy-klapp .beegy-klapp-text {
	color: var(--beegy-weiss);
}
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) .beegy-klapp .e-accordion-item-header-base:hover .e-accordion-item-title-base {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.elementor :is(.beegy-flaeche-blau, .beegy-flaeche-orange) .beegy-klapp .e-accordion-item-header-base:hover .e-accordion-item-icon-base {
	background-color: var(--beegy-weiss);
	border-color: var(--beegy-weiss);
	color: var(--beegy-blau-tief);
}

/* ---------- HEMS: Mit HEMS und Vernetzungshaus mit Energieflüssen ---------- */
.elementor .beegy-block .beegy-vernetzt-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 72px;
	align-items: center;
}
.elementor .beegy-block .beegy-haus {
	position: relative;
}
.elementor .beegy-haus img {
	display: block;
	width: 100%;
	height: auto;
}
.elementor .beegy-haus > .elementor-widget-html {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.elementor .beegy-haus .beegy-fluesse {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
/* Energie läuft als Punkte über die Verbindungslinien. Startet, sobald das Haus sichtbar ist (relaunch.js),
   viermal 1,2 s, also unter 5 s (WCAG 2.2.2). Bei reduzierter Bewegung unsichtbar. */
.elementor .beegy-haus .beegy-fluss {
	fill: none;
	stroke: var(--beegy-orange);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1 23;
	opacity: 0;
	filter: drop-shadow(0 0 2px var(--beegy-weiss));
	transition: opacity 0.6s ease;
}
.elementor .beegy-haus.beegy-fliesst .beegy-fluss {
	opacity: 1;
	animation: beegy-fluss-lauf 1.2s linear 4;
}
@keyframes beegy-fluss-lauf {
	to {
		stroke-dashoffset: -24;
	}
}
.elementor .beegy-haus .beegy-ringe circle {
	fill: none;
	stroke: var(--beegy-orange);
	stroke-width: 3;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
.elementor .beegy-haus.beegy-fliesst .beegy-ringe circle {
	animation: beegy-ring 1.6s ease-out 3;
}
.elementor .beegy-haus.beegy-fliesst .beegy-ringe circle + circle {
	animation-delay: 0.8s;
}
@keyframes beegy-ring {
	0% {
		opacity: 0.9;
		transform: scale(0.8);
	}
	100% {
		opacity: 0;
		transform: scale(2.2);
	}
}

/* ---------- HEMS: Ablauf, Linie ab Schritt 3 orange (Wunsch beegy), Schritte nur mit Zahl ---------- */
.elementor .beegy-block .beegy-schritte::before {
	background: linear-gradient(90deg, var(--beegy-blau), var(--beegy-blau-2) 58%, var(--beegy-orange-3) 66.7%, var(--beegy-orange));
}
.elementor .beegy-block .beegy-schritt:nth-child(n+3)::before {
	background-color: var(--beegy-orange-text);
}

/* ---------- HEMS: Services mit Bild (Bilder aus der Mediathek, 660 × 206) ---------- */
.elementor .beegy-block .beegy-bildkacheln {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 32px;
}
.elementor .beegy-bildkachel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 660 / 206;
	margin-bottom: 18px;
	border-radius: 18px;
	object-fit: cover;
}
.elementor .beegy-bildkachel .beegy-h3 {
	margin-bottom: 6px;
	font-size: 22px;
}
.elementor .beegy-bildkachel p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-bildkacheln + .beegy-linkreihe {
	margin-top: 32px;
}

/* ---------- HEMS: White List nach Komponente filtern (Knöpfe baut relaunch.js aus den Gruppentiteln) ---------- */
.elementor .beegy-block .beegy-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 32px;
}
.elementor .beegy-block .beegy-filter button {
	min-height: 48px;
	padding: 10px 24px;
	border: 2px solid var(--beegy-blau-text);
	border-radius: 999px;
	background-color: var(--beegy-weiss);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	color: var(--beegy-blau-text);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.elementor .beegy-block .beegy-filter button:hover {
	background-color: color-mix(in srgb, var(--beegy-blau-hell) 60%, var(--beegy-weiss));
}
.elementor .beegy-block .beegy-filter button[aria-pressed="true"] {
	background-color: var(--beegy-blau-text);
	color: var(--beegy-weiss);
}
/* Gefiltert: eine Gruppe ohne Kasten, Logos größer in einer Reihe. Titel nur für Screenreader. */
.beegy-js .elementor .beegy-block .beegy-gruppen.beegy-filterbar {
	grid-template-columns: 1fr;
	min-height: 96px;
}
.beegy-js .elementor .beegy-block .beegy-filterbar .beegy-gruppe {
	padding: 0;
	border: 0;
	border-radius: 0;
}
.beegy-js .elementor .beegy-block .beegy-filterbar .beegy-gruppe[hidden] {
	display: none !important;
}
.beegy-js .elementor .beegy-block .beegy-filterbar .beegy-gruppe-titel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.beegy-js .elementor .beegy-block .beegy-filterbar .beegy-logos {
	gap: 24px 56px;
}
.beegy-js .elementor .beegy-block .beegy-filterbar .beegy-logos img {
	max-width: 170px;
	height: 44px;
}
.beegy-js .elementor .beegy-block .beegy-filterbar .beegy-logo-wort {
	font-size: 21px;
}

/* Sprachen des HEMS mit Logos, ohne Kästen. */
.elementor .beegy-block .beegy-sprachen {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 40px;
	margin-top: 8px;
}
.elementor .beegy-block .beegy-sprache-logo {
	display: flex;
	align-items: center;
	height: 64px;
	margin-bottom: 12px;
}
.elementor .beegy-block .beegy-sprache-logo img {
	width: auto;
	max-width: 150px;
	max-height: 56px;
	object-fit: contain;
}
.elementor .beegy-block .beegy-sprache .beegy-standard {
	padding: 0;
	border-top: 0;
}

/* ---------- FAQ weiß mit Tilde rechts (statt Graublau), Liste lässt der Tilde Platz ---------- */
.elementor .beegy-block.beegy-faq-tilde {
	overflow-x: clip;
}
@media (min-width: 1200px) {
	.elementor .beegy-block.beegy-faq-tilde::after {
		content: "";
		position: absolute;
		top: 50%;
		bottom: auto;
		left: auto;
		right: -8vw;
		width: min(30vw, 520px);
		height: auto;
		aspect-ratio: 1000 / 527.4;
		background: url("../img/mathilda-schale.svg") no-repeat center / 100% 100%;
		transform: translateY(-50%) scaleX(-1);
		pointer-events: none;
	}
	.elementor .beegy-faq-tilde .beegy-faq-liste,
	.elementor .beegy-faq-tilde .beegy-kopf {
		max-width: min(900px, calc(100% - 24vw));
	}
}

/* ---------- Zeitstrahl von links nach rechts (White-Label: Zusammenarbeit, powered by: Kooperationsmodell) ---------- */
.elementor .beegy-block .beegy-zeitstrahl {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 28px;
}
.elementor .beegy-block .beegy-zs-schritt {
	position: relative;
	padding-top: 84px;
}
/* Linie je Abschnitt bis zum nächsten Kreis (funktioniert für jede Schrittzahl). */
.elementor .beegy-block .beegy-zs-schritt:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 27px;
	left: 28px;
	width: calc(100% + 28px);
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--beegy-blau), var(--beegy-blau-2));
}
.elementor .beegy-block .beegy-zs-nr {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background-color: var(--beegy-blau-text);
	box-shadow: 0 0 0 6px var(--beegy-weiss);
	font-size: 23px;
	font-weight: 700;
	line-height: 1;
	color: var(--beegy-weiss);
	transition: transform 0.25s ease, background-color 0.25s ease;
}
.elementor .beegy-block .beegy-zs-schritt:hover .beegy-zs-nr,
.elementor .beegy-block .beegy-zs-schritt:focus-within .beegy-zs-nr,
.elementor .beegy-block .beegy-zs-schritt:focus .beegy-zs-nr {
	transform: scale(1.12);
	background-color: var(--beegy-orange-text);
}
.elementor .beegy-block .beegy-zs-titel {
	margin-bottom: 8px;
	font-size: 20px;
	line-height: 1.3;
}
.elementor .beegy-block .beegy-zs-text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--beegy-text-2);
}
/* Hover-Variante (powered by): Beschreibung erscheint bei Hover und Tastaturfokus (tabindex setzt relaunch.js).
   Der Text bleibt im Fluss und für Screenreader lesbar. Ohne JS, auf Touch und schmal immer sichtbar. */
.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-schritt {
	border-radius: 12px;
	outline-offset: 10px;
}
.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-text {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-schritt:is(:hover, :focus, :focus-within) .beegy-zs-text {
	opacity: 1;
	transform: none;
}
@media (hover: none) {
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-text {
		opacity: 1;
		transform: none;
	}
}

/* ---------- White-Label: Kernsatz als Zitat mit Mathilda, darunter der Button ---------- */
.elementor .beegy-block .beegy-zitat {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: 16px 56px;
	align-items: center;
	margin-top: 96px;
}
.elementor .beegy-block .beegy-zitat::before {
	content: "";
	position: static;
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 100%;
	height: auto;
	aspect-ratio: 1000 / 527.4;
	background: url("../img/mathilda-schale.svg") no-repeat center / 100% 100%;
}
.elementor .beegy-block .beegy-zitat > * {
	grid-column: 2;
}
.elementor .beegy-block .beegy-zitat-text {
	max-width: 28em;
	font-size: clamp(23px, 2.3vw, 32px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-zitat .beegy-cta {
	display: flex;
	margin-top: 12px;
}

/* ---------- White-Label: Aus der Praxis, Logos farbig ohne Kästen, Smartphone mit Reel ---------- */
.elementor .beegy-block .beegy-logos.beegy-logos-farbig {
	gap: 24px 48px;
	margin-top: 36px;
}
.elementor .beegy-block .beegy-logos-farbig img {
	max-width: 200px;
	height: 52px;
	filter: none;
	opacity: 1;
}
.elementor .beegy-block .beegy-logos-farbig + .beegy-linkreihe {
	margin-top: 32px;
}
.elementor .beegy-block .beegy-handy {
	position: relative;
	justify-self: center;
	width: min(320px, 80%);
	aspect-ratio: 9 / 19;
	padding: 12px;
	border-radius: 46px;
	background-color: var(--beegy-text);
	box-shadow: 0 30px 60px #1b273333;
}
.elementor .beegy-block .beegy-handy::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 22px;
	left: 50%;
	width: 84px;
	height: 22px;
	border-radius: 999px;
	background-color: var(--beegy-text);
	transform: translateX(-50%);
}
.elementor .beegy-block .beegy-handy .beegy-ph {
	width: 100%;
	height: 100%;
	border-radius: 36px;
}

/* ---------- powered by: Aufmacher wie HEMS, rechts Bild mit leerer Mathilda (Kontur) ---------- */
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer.beegy-aufmacher-mitbild::before {
	right: calc(50% - 840px);
	bottom: 30px;
	width: min(820px, 52vw);
	transform: scaleX(-1);
}
.elementor .beegy-aufmacher-mitbild .beegy-aufmacher-text {
	max-width: none;
}
.elementor .beegy-aufmacher-mitbild .beegy-aufmacher-bild {
	overflow: hidden;
	box-shadow: 0 30px 70px #1b273333;
}
.elementor .beegy-aufmacher-mitbild .beegy-aufmacher-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* powered by: Claim farbig im oberen Teil (Blau-Text 5,9:1, Orange-Text 5,2:1). */
.elementor .beegy-block p.beegy-claim-farbig {
	margin-top: 32px;
	font-size: clamp(23px, 2.3vw, 31px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--beegy-blau-text);
}
.elementor .beegy-block p.beegy-claim-farbig strong {
	color: var(--beegy-orange-text);
}

/* powered by: Vorteile als Kacheln mit Verlauf und Icon, abwechselnd Blau und Orange, sechste Kachel mit Kontakt-Button. */
.elementor .beegy-block .beegy-vorteil-kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.elementor .beegy-block .beegy-vorteil-kachel {
	position: relative;
	padding: 112px 32px 36px;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--beegy-blau-tief), var(--beegy-blau-text));
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-vorteil-kachel:nth-child(even) {
	background: linear-gradient(135deg, var(--beegy-orange-text), color-mix(in srgb, var(--beegy-orange-text) 60%, var(--beegy-orange)));
}
.elementor .beegy-block .beegy-vorteil-kachel::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 32px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #ffffff2e;
}
.elementor .beegy-block .beegy-vorteil-kachel::after {
	content: "";
	position: absolute;
	top: 44px;
	left: 44px;
	width: 28px;
	height: 28px;
	background-color: var(--beegy-weiss);
	-webkit-mask: var(--beegy-icon) no-repeat center / contain;
	mask: var(--beegy-icon) no-repeat center / contain;
}
.elementor .beegy-block .beegy-vorteil-kachel:nth-child(1) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteil-kachel:nth-child(2) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16 14.2c3.2.1 5.5 2.3 5.5 5.8'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteil-kachel:nth-child(3) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteil-kachel:nth-child(4) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteil-kachel:nth-child(5) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteil-kachel .beegy-h3 {
	margin-bottom: 10px;
	font-size: 23px;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-vorteil-kachel p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-vorteil-kachel.beegy-vorteil-cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	padding: 36px 32px;
	border: 2px dashed var(--beegy-orange-text);
	background: var(--beegy-weiss);
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-vorteil-kachel.beegy-vorteil-cta::before,
.elementor .beegy-block .beegy-vorteil-kachel.beegy-vorteil-cta::after {
	display: none;
}
.elementor .beegy-block .beegy-vorteil-cta :is(.beegy-h3, p) {
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-vorteil-cta .beegy-btn-primaer {
	margin-top: 8px;
}

/* powered by: Modellvergleich, drei Punkte, Spalten farbig statt Tabellenraster. */
.elementor .beegy-block .beegy-modelltabelle {
	border-collapse: separate;
	border-spacing: 20px 0;
	margin-inline: -20px;
	width: calc(100% + 40px);
	table-layout: fixed;
	font-size: 17.5px;
	line-height: 1.55;
}
.elementor .beegy-block .beegy-modelltabelle th[scope="col"] {
	padding: 22px 28px;
	border-radius: 20px 20px 0 0;
	font-size: 21px;
	font-weight: 700;
	text-align: left;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-modelltabelle th[scope="col"]:first-child {
	width: 22%;
	padding: 0;
	background: none;
}
.elementor .beegy-block .beegy-modelltabelle th[scope="col"]:nth-child(2) {
	background: linear-gradient(90deg, var(--beegy-orange-text), color-mix(in srgb, var(--beegy-orange-text) 60%, var(--beegy-orange)));
}
.elementor .beegy-block .beegy-modelltabelle th[scope="col"]:nth-child(3) {
	background: linear-gradient(90deg, var(--beegy-blau-tief), var(--beegy-blau-text));
}
.elementor .beegy-block .beegy-modelltabelle th[scope="row"] {
	padding: 22px 0;
	border-bottom: 1px solid var(--beegy-linie);
	font-size: 17px;
	font-weight: 700;
	text-align: left;
	vertical-align: top;
	color: var(--beegy-text);
}
.elementor .beegy-block .beegy-modelltabelle td {
	padding: 22px 28px;
	border-inline: 2px solid var(--beegy-orange-hell);
	border-bottom: 1px solid var(--beegy-linie);
	vertical-align: top;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-modelltabelle td:last-child {
	border-inline-color: color-mix(in srgb, var(--beegy-blau-hell) 80%, var(--beegy-weiss));
}
.elementor .beegy-block .beegy-modelltabelle tr:last-child :is(th, td) {
	border-bottom: 0;
}
.elementor .beegy-block .beegy-modelltabelle tr:last-child td {
	border-bottom: 2px solid var(--beegy-orange-hell);
	border-radius: 0 0 20px 20px;
}
.elementor .beegy-block .beegy-modelltabelle tr:last-child td:last-child {
	border-bottom-color: color-mix(in srgb, var(--beegy-blau-hell) 80%, var(--beegy-weiss));
}
.elementor .beegy-block .beegy-fazit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 48px;
	margin-top: 48px;
}
.elementor .beegy-block .beegy-fazit p {
	padding-left: 20px;
	border-left: 4px solid var(--beegy-orange-text);
	font-size: 19px;
	line-height: 1.55;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-fazit p + p {
	border-left-color: var(--beegy-blau-text);
}
.elementor .beegy-block .beegy-fazit strong {
	color: var(--beegy-text);
}

/* Hello-Theme zeichnet Rahmen und Streifen an jede Tabelle: im Modellvergleich zurücksetzen. */
.elementor .beegy-block .beegy-modelltabelle :is(th, td) {
	border-top: 0;
	background-color: transparent;
}
.elementor .beegy-block .beegy-modelltabelle th[scope="col"]:first-child,
.elementor .beegy-block .beegy-modelltabelle th[scope="row"] {
	border-inline: 0;
}
.elementor .beegy-block .beegy-modelltabelle th[scope="col"] {
	border: 0;
}
/* Nach einer Verlaufsfläche braucht die folgende weiße Sektion ihren oberen Abstand (die Regel für zwei weiße
   Sektionen kannte die neuen Flächen nicht und setzte ihn auf 0). */
body:not(.home) .elementor .beegy-block:is(.beegy-flaeche-blau, .beegy-flaeche-orange) + .beegy-block.beegy-sektion.beegy-sektion.beegy-sektion.beegy-sektion {
	padding-top: 120px;
}
/* Aus der Praxis: Text breiter als das Smartphone. */
.elementor .beegy-block.beegy-praxis .beegy-vernetzt-grid {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
}

/* White-Label: Laufband mit allen Herstellern unter den Modellen, ohne Überschrift, Pause-Knopf rechts darunter. */
.elementor .beegy-block .beegy-laufband {
	margin-top: 88px;
}
.elementor .beegy-block .beegy-laufband > .elementor-widget-html {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
}

/* ---------- Feedback 08.10.2026: schmalere Bildschirme ---------- */
@media (max-width: 1100px) {
	.elementor .beegy-block .beegy-vorteile-liste ul.beegy-haken-gross,
	.elementor .beegy-block .beegy-vorteil-kacheln {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.elementor .beegy-block .beegy-sprachen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.elementor .beegy-block .beegy-vernetzt-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.elementor .beegy-block .beegy-handy {
		width: min(300px, 80%);
	}
}
/* Zeitstrahl nach unten statt nach rechts, Beschreibung immer sichtbar. */
@media (max-width: 980px) {
	.elementor .beegy-block .beegy-zeitstrahl {
		grid-auto-flow: row;
		gap: 32px;
	}
	.elementor .beegy-block .beegy-zs-schritt {
		min-height: 58px;
		padding: 12px 0 0 84px;
	}
	.elementor .beegy-block .beegy-zs-schritt:not(:last-child)::after {
		top: 28px;
		left: 27px;
		width: 4px;
		height: calc(100% + 32px);
		background: linear-gradient(180deg, var(--beegy-blau), var(--beegy-blau-2));
	}
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-text {
		opacity: 1;
		transform: none;
	}
	.elementor .beegy-block .beegy-zitat {
		grid-template-columns: 1fr;
		margin-top: 72px;
	}
	.elementor .beegy-block .beegy-zitat::before {
		grid-row: auto;
		width: min(260px, 70%);
	}
	.elementor .beegy-block .beegy-zitat > * {
		grid-column: 1;
	}
	.elementor .beegy-block .beegy-schritte::before {
		background: linear-gradient(180deg, var(--beegy-blau), var(--beegy-blau-2) 58%, var(--beegy-orange-3) 66.7%, var(--beegy-orange));
	}
	.elementor .beegy-block .beegy-modelltabelle,
	.elementor .beegy-block .beegy-modelltabelle :is(thead, tbody, tr, th, td) {
		display: block;
		width: 100%;
		margin: 0;
	}
	.elementor .beegy-block .beegy-modelltabelle thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.elementor .beegy-block .beegy-modelltabelle tr {
		margin-bottom: 28px;
	}
	.elementor .beegy-block .beegy-modelltabelle th[scope="row"] {
		padding: 0 0 10px;
		border: 0;
		font-size: 19px;
	}
	.elementor .beegy-block .beegy-modelltabelle td,
	.elementor .beegy-block .beegy-modelltabelle tr:last-child td {
		margin-top: 10px;
		padding: 14px 18px;
		border: 0;
		border-left: 4px solid var(--beegy-orange-text);
		border-radius: 0;
		background-color: var(--beegy-weiss);
	}
	.elementor .beegy-block .beegy-modelltabelle td:last-child,
	.elementor .beegy-block .beegy-modelltabelle tr:last-child td:last-child {
		border-left-color: var(--beegy-blau-text);
	}
	.elementor .beegy-block .beegy-modelltabelle td::before {
		content: "powered by beegy";
		display: block;
		margin-bottom: 2px;
		font-size: 14px;
		font-weight: 700;
		color: var(--beegy-orange-text);
	}
	.elementor .beegy-block .beegy-modelltabelle td:last-child::before {
		content: "White Label";
		color: var(--beegy-blau-text);
	}
}
@media (max-width: 980px) {
	body:not(.home) .elementor .beegy-block:is(.beegy-flaeche-blau, .beegy-flaeche-orange) + .beegy-block.beegy-sektion.beegy-sektion.beegy-sektion.beegy-sektion {
		padding-top: 88px;
	}
}
@media (max-width: 760px) {
	body:not(.home) .elementor .beegy-block:is(.beegy-flaeche-blau, .beegy-flaeche-orange) + .beegy-block.beegy-sektion.beegy-sektion.beegy-sektion.beegy-sektion {
		padding-top: 64px;
	}
	.elementor .beegy-block .beegy-zwei-listen,
	.elementor .beegy-block .beegy-fazit,
	.elementor .beegy-block .beegy-bildkacheln,
	.elementor .beegy-block .beegy-vorteile-liste ul.beegy-haken-gross,
	.elementor .beegy-block .beegy-vorteil-kacheln {
		grid-template-columns: 1fr;
	}
	.elementor .beegy-block .beegy-klapp.beegy-klapp-spur {
		padding-left: 44px;
	}
	.elementor .beegy-klapp.beegy-klapp-spur::before {
		left: 10px;
	}
	.elementor .beegy-klapp-spur .e-accordion-item-base::before {
		left: -43px;
	}
	.elementor .beegy-klapp .e-accordion-item-icon-base {
		width: 36px;
		height: 36px;
		padding: 7px;
	}
	.elementor .beegy-block .beegy-laufband {
		margin-top: 64px;
	}
}
@media (max-width: 600px) {
	.elementor .beegy-block .beegy-sprachen {
		grid-template-columns: 1fr;
	}
	.elementor .beegy-block .beegy-sprache-logo {
		height: 52px;
	}
}
/* Reduzierte Bewegung: keine Energieflüsse, keine Ringe. */
@media (prefers-reduced-motion: reduce) {
	.elementor .beegy-haus .beegy-fluss,
	.elementor .beegy-haus .beegy-ringe circle {
		display: none;
	}
}

/* ---------- Prüfung 08.10.2026 abends (Stefano): Häkchen exakt mittig, Abstände ----------
   Häkchen als Maske über die ganze Kreisfläche statt gedrehtem Rahmen: sitzt immer mittig im Kreis.
   Kreis auf die Mitte der ersten Textzeile ausgerichtet (klein: Zeile 26,4 px, groß: Titelzeile 27,3 px). */
.elementor .beegy-block ul.beegy-haken li::before,
.elementor .beegy-block ul.beegy-haken li::after {
	top: 1px;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
.elementor .beegy-block ul.beegy-haken li::after {
	border: 0;
	transform: none;
	background-color: var(--beegy-orange-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.2'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.2'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}
.elementor .beegy-block ul.beegy-haken-blau li::after {
	background-color: var(--beegy-blau-text);
}
.elementor .beegy-block ul.beegy-haken-gross li::before,
.elementor .beegy-block ul.beegy-haken-gross li::after {
	top: -7px;
	width: 42px;
	height: 42px;
}
.elementor .beegy-block ul.beegy-haken-gross li::after {
	background-color: var(--beegy-weiss);
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
}

/* Verlaufsflächen haben immer ihren oberen Innenabstand (die Regel „zwei weiße Sektionen hintereinander“
   setzte ihn auf 0, weil sie die neuen Flächen nicht kannte: Text klebte an der Kante). */
body:not(.home) .elementor .beegy-block.beegy-sektion.beegy-sektion.beegy-sektion.beegy-sektion:is(.beegy-flaeche-blau, .beegy-flaeche-orange) {
	padding-top: 120px;
}
/* Erste Sektion direkt nach dem Aufmacher: kein zusätzlicher Abstand, der Aufmacher hat unten schon Platz
   für die Welle (vorher 320 px Leere bei White-Label, 260 px bei powered by; HEMS hat dort die Faktenleiste). */
body:not(.home) .elementor .beegy-block.beegy-aufmacher:not(.beegy-aufmacher-kompakt) + .beegy-block.beegy-sektion.beegy-sektion.beegy-sektion.beegy-sektion {
	padding-top: 0;
}
/* Filterknöpfe: Hover ohne Hellblau. */
.elementor .beegy-block .beegy-filter button:hover {
	background-color: var(--beegy-weiss);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.elementor .beegy-block .beegy-filter button[aria-pressed="true"]:hover {
	background-color: var(--beegy-blau-text);
}
@media (max-width: 980px) {
	body:not(.home) .elementor .beegy-block.beegy-sektion.beegy-sektion.beegy-sektion.beegy-sektion:is(.beegy-flaeche-blau, .beegy-flaeche-orange) {
		padding-top: 88px;
	}
}
@media (max-width: 600px) {
	body:not(.home) .elementor .beegy-block.beegy-sektion.beegy-sektion.beegy-sektion.beegy-sektion:is(.beegy-flaeche-blau, .beegy-flaeche-orange) {
		padding-top: 64px;
	}
}
/* Kontakt: Abstand zwischen Häkchen-Liste und Link wiederherstellen (die allgemeine Listenregel vom 08.10. setzte ihn auf 0, auch auf der Startseite). */
.elementor .beegy-block.beegy-kontakt ul.beegy-haken {
	margin-bottom: 24px;
}
/* FAQ: blaue Welle statt oranger Schale, weil direkt darunter die orange Schale hinter dem Kontaktformular steht (zweimal Orange wirkte doppelt). */
@media (min-width: 1200px) {
	.elementor .beegy-block.beegy-faq-tilde::after {
		aspect-ratio: 1000 / 415.8;
		background-image: url("../img/mathilda-welle.svg");
		transform: translateY(-50%);
	}
}
/* Aus der Praxis: Smartphone mit demselben Abstand nach oben wie die Kicker der übrigen Sektionen. */
.elementor .beegy-block.beegy-praxis .beegy-handy {
	margin-top: 28px;
}
/* HEMS Ablauf: Elementor gibt Container-Pseudo-Elementen width 100 %, dadurch lief die Linie über den letzten Kreis
   bis an den Rand (right wirkte nicht). Mit width auto endet sie in der Mitte von Kreis 4, Orange beginnt genau bei Kreis 3. */
.elementor .beegy-block .beegy-schritte::before {
	width: auto;
}
@media (max-width: 980px) {
	.elementor .beegy-block .beegy-schritte::before {
		width: 4px;
	}
}
/* powered by, Zeitstrahl mit Hover (Prüfung 08.10.2026 abends): Die unsichtbaren Beschreibungen hielten ihren Platz frei,
   darunter stand eine große leere Fläche. Jetzt ist immer ein Schritt aktiv (Start: Schritt 1, relaunch.js), seine
   Beschreibung steht breiter unter dem Zeitstrahl. Hover oder Tastaturfokus wechselt den Schritt. Die Beschreibung
   verdeckt nichts (reservierte Fläche) und bleibt stehen, bis ein anderer Schritt gewählt wird (WCAG 1.4.13). */
@media (min-width: 981px) {
	.beegy-js .elementor .beegy-block .beegy-zeitstrahl-hover {
		padding-bottom: 116px;
	}
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-text {
		position: absolute;
		top: calc(100% + 14px);
		left: 0;
		width: min(460px, 200%);
		opacity: 0;
		transform: translateY(-6px);
		pointer-events: none;
	}
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-schritt:nth-last-child(-n+2) .beegy-zs-text {
		left: auto;
		right: 0;
	}
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-schritt:is(:hover, :focus, :focus-within) .beegy-zs-text {
		opacity: 0;
		transform: translateY(-6px);
	}
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-schritt.beegy-aktiv .beegy-zs-text {
		opacity: 1;
		transform: none;
	}
	.beegy-js .elementor .beegy-block .beegy-zeitstrahl-hover .beegy-zs-schritt:is(:hover, :focus, :focus-within):not(.beegy-aktiv) .beegy-zs-nr {
		transform: none;
		background-color: var(--beegy-blau-text);
	}
	.beegy-js .elementor .beegy-block .beegy-zeitstrahl-hover .beegy-zs-schritt.beegy-aktiv .beegy-zs-nr {
		transform: scale(1.12);
		background-color: var(--beegy-orange-text);
	}
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-schritt {
		cursor: pointer;
	}
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-schritt.beegy-aktiv .beegy-zs-titel {
		color: var(--beegy-orange-text);
	}
}
/* Pfeil im Kreis der Ausklapp-Überschriften exakt mittig (Hinweis Stefano 08.10.2026): Safari löst die Prozenthöhe
   des SVG-Containers im Flex-Kreis nicht auf, das SVG wurde 24 statt 20 px hoch und hing unten (geöffnet: oben) heraus.
   Jetzt Grid mit festen Maßen für Kreis, Hülle und SVG, unabhängig vom Browser. Gilt auch für die FAQ-Pfeile. */
.elementor .beegy-klapp .e-accordion-item-icon-base,
.elementor .beegy-faq .e-accordion-item-icon-base {
	display: grid;
	place-items: center;
	padding: 0;
	line-height: 0;
}
.elementor .beegy-klapp .e-accordion-item-icon-base .e-svg-base,
.elementor .beegy-klapp .e-accordion-item-icon-base svg {
	display: block;
	width: 20px !important;
	height: 20px !important;
	min-height: 0;
}
.elementor .beegy-klapp .e-accordion-item-icon-base svg {
	/* Der Pfeil liegt im 24er-Raster 0,75 Einheiten unter der Mitte: optisch ausgleichen. */
	transform: translateY(-0.6px);
}
.elementor .beegy-faq .e-accordion-item-icon-base .e-svg-base,
.elementor .beegy-faq .e-accordion-item-icon-base svg {
	display: block;
	width: 24px !important;
	height: 24px !important;
	min-height: 0;
}
@media (max-width: 760px) {
	.elementor .beegy-klapp .e-accordion-item-icon-base {
		padding: 0;
	}
	.elementor .beegy-klapp .e-accordion-item-icon-base .e-svg-base,
	.elementor .beegy-klapp .e-accordion-item-icon-base svg {
		width: 18px !important;
		height: 18px !important;
	}
}
/* Elementor richtet den Inhalt des Icon-Containers nach rechts aus (justify-content), das Raster lag dadurch 9 px neben der Mitte. */
.elementor .beegy-klapp .e-accordion-item-icon-base,
.elementor .beegy-faq .e-accordion-item-icon-base {
	justify-content: center;
	align-content: center;
}
/* Dreier-Kartenraster mit genau vier Karten (Geschäftskunden nach dem Abgleich mit live, 09.10.2026): 2 × 2 statt 3 plus 1. */
@media (min-width: 761px) {
	.elementor .beegy-block .beegy-karten.beegy-karten-drei:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* powered by, Aufmacher (Sophia 12.10.2026): ganzes Logo als Umriss, Schale orange und Welle blau, an derselben Stelle und
   in derselben Größe wie die gefüllten Formen auf der HEMS-Seite, nur ohne Füllung. Die Kontur der Schale läuft wie dort
   unterhalb von Text und Buttons, die Welle liegt unten rechts vor dem Foto. Ersetzt die Regel vom 08.10. (Kontur hinter dem Foto). */
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer.beegy-aufmacher-mitbild {
	padding-bottom: 200px;
}
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer.beegy-aufmacher-mitbild::before {
	left: calc(28% - 1600px);
	right: auto;
	bottom: 40px;
	width: 3200px;
	transform: none;
	background: url("../img/mathilda-schale-kontur.svg") no-repeat center / 100% 100%;
}
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-leer.beegy-aufmacher-mitbild::after {
	display: block;
	background: url("../img/mathilda-welle-kontur.svg") no-repeat center / 100% 100%;
	aspect-ratio: 1012 / 427.8;
}
/* White-Label, Aus der Praxis: Screenshot des Reels füllt das Smartphone (Sophia 12.10.2026). */
.elementor .beegy-block .beegy-handy .beegy-handy-bild {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 36px;
	object-fit: cover;
	object-position: top center;
}

/* ---------- Händlersuche (HEMS-Services, MU-Plugin beegy-haendlersuche.php, 13.10.2026) ----------
   PLZ-Feld und Knopf wie die Formulare der Site, Treffer als Karten ohne Schatten-Kasten-Optik. */
.elementor .beegy-hs {
	max-width: 900px;
}
.elementor .beegy-hs-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--beegy-text);
}
.elementor .beegy-hs-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.elementor .beegy-hs-zeile input {
	flex: 0 1 260px;
	min-height: 52px;
	padding: 12px 18px;
	border: 2px solid var(--beegy-text-2);
	border-radius: 14px;
	background-color: var(--beegy-weiss);
	font-family: inherit;
	font-size: 19px;
	letter-spacing: 0.08em;
	color: var(--beegy-text);
}
.elementor .beegy-hs-zeile input:focus-visible {
	outline: 3px solid var(--beegy-blau-text);
	outline-offset: 2px;
}
.elementor .beegy-hs-zeile input[aria-invalid="true"] {
	border-color: var(--beegy-orange-text);
}
.elementor .beegy-hs-zeile button {
	min-height: 52px;
	padding: 12px 30px;
	border: 0;
	border-radius: 999px;
	background-color: var(--beegy-orange-text);
	font-family: inherit;
	font-size: 19px;
	font-weight: 700;
	color: var(--beegy-weiss);
	cursor: pointer;
}
.elementor .beegy-hs-zeile button:hover {
	background-color: var(--beegy-text);
}
.elementor .beegy-hs-hinweis {
	margin-top: 10px;
	font-size: 15px;
	color: var(--beegy-text-2);
}
.elementor .beegy-hs-ergebnis:not(:empty) {
	margin-top: 36px;
}
.elementor .beegy-hs-meldung {
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--beegy-text);
}
.elementor .beegy-hs-treffer,
.elementor .beegy-hs-alle {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}
.elementor .beegy-hs-partner {
	padding: 26px 26px 22px;
	border: 1px solid var(--beegy-linie);
	border-top: 4px solid var(--beegy-orange-text);
	border-radius: 18px;
	background-color: var(--beegy-weiss);
}
.elementor .beegy-hs-logo {
	display: block;
	width: auto;
	max-width: 180px;
	height: 48px;
	margin-bottom: 18px;
	object-fit: contain;
	object-position: left center;
}
.elementor .beegy-hs-name {
	margin-bottom: 6px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}
.elementor .beegy-hs-adresse {
	margin-bottom: 14px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--beegy-text-2);
}
.elementor .beegy-hs-kontakt {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16.5px;
}
.elementor .beegy-hs-kontakt span {
	display: inline-block;
	min-width: 70px;
	color: var(--beegy-text-2);
}
.elementor .beegy-hs a {
	font-weight: 700;
	color: var(--beegy-blau-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.elementor .beegy-hs a:hover {
	color: var(--beegy-orange-text);
}
.elementor .beegy-hs-kein .beegy-hs-tel {
	font-size: 24px;
}
.elementor .beegy-hs-kein span {
	margin-left: 10px;
	color: var(--beegy-text-2);
}

/* powered by (14.10.2026): Abschnitt „Plattform und Energiewirtschaft“ auf blauer Verlaufsfläche, zwei Spalten.
   Text Weiß auf Blau-tief bis Blau-Text (wie White-Label „Vom Energievertrag zum Energiesystem“). */
.elementor .beegy-block .beegy-plattform-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px 80px;
	align-items: start;
}
.elementor .beegy-flaeche-blau .beegy-plattform-grid .beegy-h2 {
	margin-bottom: 20px;
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1.15;
}
.elementor .beegy-flaeche-blau .beegy-plattform-grid .beegy-intro + .beegy-intro {
	margin-top: 16px;
}
.elementor .beegy-flaeche-blau .beegy-plattform-grid .beegy-cta {
	margin-top: 32px;
}
/* Button unter dem Fazit des Modellvergleichs. */
.elementor .beegy-block .beegy-fazit-cta {
	margin-top: 40px;
}
@media (max-width: 980px) {
	.elementor .beegy-block .beegy-plattform-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}
}
/* powered by: Satz direkt unter dem farbigen Kernsatz (Sophia 13.10.) braucht Luft. */
.elementor .beegy-block .beegy-claim-farbig + .beegy-intro {
	margin-top: 16px;
}
/* Footer: Social-Media-Links unter dem Logo (Wunsch beegy 14.10.2026). Icons Weiß auf der Footer-Fläche,
   Hover und Fokus in beegy-orange-3 (5,5:1). Kreis 40 px, damit das Touch-Ziel deutlich über 24 px liegt. */
.elementor .beegy-footer-marke {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 auto;
	width: auto;
	gap: 24px;
	padding: 0;
}
.elementor .beegy-footer-marke .beegy-footer-logo {
	align-self: flex-start;
	width: auto;
	max-width: none;
}
.elementor .beegy-footer .beegy-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.elementor .beegy-footer .beegy-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid color-mix(in srgb, var(--beegy-weiss) 45%, transparent);
	border-radius: 50%;
	color: var(--beegy-weiss);
	transition: color .2s, border-color .2s;
}
.elementor .beegy-footer .beegy-social a:is(:hover, :focus-visible) {
	color: var(--beegy-orange-3);
	border-color: var(--beegy-orange-3);
}
.elementor .beegy-footer .beegy-social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
@media (prefers-reduced-motion: reduce) {
	.elementor .beegy-footer .beegy-social a {
		transition: none;
	}
}
/* Sehr breite Logos (Sungrow ohne Zusatz, 9:1) im Laufband begrenzen, sonst dominieren sie das Band (14.10.2026). */
.elementor .beegy-laufband img.beegy-band-logo,
.elementor .beegy-partner img.beegy-band-logo {
	max-width: 200px;
	object-fit: contain;
}
/* White-Label (14.10.2026): Block „ohne eigene Plattform“ unter dem Aufmacher mit großen blauen Häkchen,
   damit er sich von den orangen Vorteilen darunter abhebt (Wunsch Sophia). Kreis Blau-tief bis Blau-Text, weißes Häkchen. */
.elementor .beegy-block ul.beegy-haken-gross.beegy-haken-gross-blau li::before {
	background: linear-gradient(135deg, var(--beegy-blau-tief), var(--beegy-blau-text));
}
.elementor .beegy-block ul.beegy-haken-gross.beegy-haken-gross-blau li::after {
	background-color: var(--beegy-weiss);
}
/* Zwei Listen: Einleitungssatz direkt über einer Häkchen-Liste braucht Abstand (White-Label „HEMS als Basis“, 14.10.2026). */
.elementor .beegy-block .beegy-zwei-listen p.e-paragraph-base:has(+ .elementor-widget-text-editor) {
	margin-bottom: 16px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--beegy-text-2);
}
/* powered by, Zeitstrahl (Hinweis beegy 20.10.2026: „Punkt 4 ist irgendwie verschoben“): Die Beschreibung der letzten
   beiden Schritte war rechtsbündig und begann bei Schritt 4 unter Schritt 3. Jetzt beginnt jede Beschreibung unter
   ihrem eigenen Schritt (zwei Spalten breit passen bis Schritt 4), nur Schritt 5 endet rechtsbündig am Rand. */
@media (min-width: 981px) {
	.beegy-js .elementor .beegy-zeitstrahl-hover .beegy-zs-schritt:nth-last-child(2) .beegy-zs-text {
		left: 0;
		right: auto;
	}
	.beegy-js .elementor .beegy-block .beegy-zeitstrahl-hover {
		padding-bottom: 150px;
	}
}
/* Was ist ein HEMS? (20.10.2026): Wissensseite aus vorhandenen Bausteinen. Abstände für Kombinationen, die es bisher nicht gab:
   Zeitstrahl vor zwei Listen, mehrere Absätze und Absatz nach einer Liste in einer Spalte, Links unter der Einleitung im Kopf,
   Beitragskarten nach einer Liste und Link unter den Karten. */
.elementor .beegy-block .beegy-zeitstrahl + .beegy-zwei-listen {
	margin-top: 72px;
}
.elementor .beegy-block .beegy-zwei-listen p.e-paragraph-base {
	font-size: 17px;
	line-height: 1.55;
	color: var(--beegy-text-2);
}
.elementor .beegy-block .beegy-zwei-listen :is(p.e-paragraph-base, .elementor-widget-text-editor) + p.e-paragraph-base {
	margin-top: 12px;
}
.elementor .beegy-block .beegy-kopf .beegy-intro + .beegy-linkreihe {
	margin-top: 28px;
}
.elementor .beegy-block .beegy-innen > .beegy-rein:not(.beegy-kopf) + .beegy-bildkarten {
	margin-top: 56px;
}
.elementor .beegy-block .beegy-bildkarten + .beegy-linkreihe {
	margin-top: 32px;
}

/* =========================================================
   Feedback Unterseiten (Sophia und Alex, 21.10.2026)
   ========================================================= */

/* Kopfbild auf den Bestandsseiten: Fotoanteil der alten Banner im Format 3:2 (Aufmacher mit farbiger Mathilde wie White Label). */
.elementor .beegy-aufmacher-foto .beegy-aufmacher-bild {
	aspect-ratio: 3 / 2;
}

/* CTAs als Buttons: Rahmen-Button für den zweiten Link einer Reihe, blaue Buttons für die Stellenanzeigen (wie auf der alten Website). */
.elementor .beegy-block a.beegy-btn-primaer.beegy-btn-rand {
	background-color: transparent;
	color: var(--beegy-orange-text);
	box-shadow: inset 0 0 0 2px var(--beegy-orange-text);
}
.elementor .beegy-block a.beegy-btn-primaer.beegy-btn-rand:hover,
.elementor .beegy-block a.beegy-btn-primaer.beegy-btn-rand:focus-visible {
	background-color: var(--beegy-orange-text);
	color: var(--beegy-weiss);
}
.elementor .beegy-block a.beegy-btn-primaer.beegy-btn-blau {
	background-color: var(--beegy-blau-text);
	color: var(--beegy-weiss);
}
.elementor .beegy-block a.beegy-btn-primaer.beegy-btn-blau:hover,
.elementor .beegy-block a.beegy-btn-primaer.beegy-btn-blau:focus-visible {
	background-color: var(--beegy-blau-tief);
}
/* Buttons in Karten unten bündig. */
.elementor .beegy-block .beegy-bildkarte > .beegy-linkreihe {
	flex-direction: row;
	align-items: center;
	margin-top: auto;
	padding-top: 8px;
}
/* Links im Fließtext der farbigen Kacheln weiß (vorher Blau auf Blau). */
.elementor .beegy-block .beegy-vorteil-kachel .elementor-widget-text-editor a {
	color: var(--beegy-weiss);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Services: Paketbilder im Originalformat (660 x 206), nicht mehr hochskaliert und beschnitten. */
/* Klasse vierfach: schlägt die :has()-Regel für zwei und vier Karten (2:1). */
.elementor .beegy-block .beegy-bildkarten.beegy-bildkarten-flach.beegy-bildkarten-flach.beegy-bildkarten-flach.beegy-bildkarten-flach .beegy-bildkarte-bild img {
	aspect-ratio: 660 / 206;
}

/* Karriere: Personenfotos quadratisch und oben ausgerichtet, damit Köpfe nicht abgeschnitten werden (Quellen 412 x 412). */
.elementor .beegy-block .beegy-bildkarten.beegy-bildkarten-personen.beegy-bildkarten-personen.beegy-bildkarten-personen.beegy-bildkarten-personen .beegy-bildkarte-bild img {
	aspect-ratio: 1 / 1;
	object-position: 50% 15%;
}

/* Karriere: Vorteile farbig mit Icons wie powered by. */
.elementor .beegy-block .beegy-vorteil-kachel .elementor-widget-text-editor p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-vorteile-karriere .beegy-vorteil-kachel:nth-child(1) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteile-karriere .beegy-vorteil-kachel:nth-child(2) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.5a7 7 0 1 0 0 11'/%3E%3Cpath d='M4 10h9M4 14h9'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteile-karriere .beegy-vorteil-kachel:nth-child(3) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='16' r='3.5'/%3E%3Ccircle cx='18' cy='16' r='3.5'/%3E%3Cpath d='M6 16l4-7h5l3 7M10 9 8.5 6H6.5M15 9l-3 7'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteile-karriere .beegy-vorteil-kachel:nth-child(4) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2.5 9 2.5 12 0v-5M22 9v6'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteile-karriere .beegy-vorteil-kachel:nth-child(5) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E"); }
.elementor .beegy-block .beegy-vorteile-karriere .beegy-vorteil-kachel:nth-child(6) { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16 14.2c3.2.1 5.5 2.3 5.5 5.8'/%3E%3C/svg%3E"); }

/* Karriere: Kontakt neben Anna mit Icons. */
.elementor .beegy-block ul.beegy-kontaktliste {
	display: grid;
	gap: 12px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}
.elementor .beegy-block ul.beegy-kontaktliste li {
	position: relative;
	padding-left: 52px;
	min-height: 40px;
	display: flex;
	align-items: center;
}
.elementor .beegy-block ul.beegy-kontaktliste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: 50%;
	background-color: var(--beegy-blau-text);
}
.elementor .beegy-block ul.beegy-kontaktliste li::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background-color: var(--beegy-weiss);
	-webkit-mask: var(--beegy-icon) no-repeat center / contain;
	mask: var(--beegy-icon) no-repeat center / contain;
}
.elementor .beegy-block ul.beegy-kontaktliste a {
	font-size: 20px;
	font-weight: 700;
	color: var(--beegy-blau-text);
	text-decoration: none;
}
.elementor .beegy-block ul.beegy-kontaktliste a:hover {
	color: var(--beegy-orange-text);
	text-decoration: underline;
}
.beegy-k-mail { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.beegy-k-tel, .beegy-kontakt-seite .beegy-telefon { --beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }

/* Kontakt: Telefon-Icon vor der Nummer, Pin vor den Standorten, Adresse und Telefon je in eigener Zeile mit Icon. */
.elementor .beegy-kontakt-seite .beegy-telefon p:first-child a::before,
.elementor .beegy-kontakt-standorte .e-accordion-item-title-base > span::before,
.elementor .beegy-kontakt-standorte :is(.beegy-k-adresse, .beegy-k-tel)::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.45em;
	vertical-align: -0.08em;
	background-color: var(--beegy-orange-text);
	-webkit-mask: var(--beegy-icon) no-repeat center / contain;
	mask: var(--beegy-icon) no-repeat center / contain;
}
.elementor .beegy-kontakt-standorte .e-accordion-item-title-base,
.elementor .beegy-kontakt-standorte .beegy-k-adresse {
	--beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
.elementor .beegy-kontakt-standorte .beegy-k-tel {
	--beegy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
.elementor .beegy-kontakt-standorte .beegy-faq-antwort p + p {
	margin-top: 14px;
}
.elementor .beegy-kontakt-standorte :is(.beegy-k-adresse, .beegy-k-tel) {
	padding-left: 1.35em;
	text-indent: -1.35em;
}

/* Downloads: kräftigere Ränder, Allgemein blau und Anleitungen orange abgegrenzt. */
.elementor .beegy-block .beegy-downloads li a {
	border: 2px solid color-mix(in srgb, var(--beegy-linie) 55%, var(--beegy-text-2));
	border-left-width: 6px;
}
.elementor .beegy-block .beegy-downloads h3:first-of-type {
	color: var(--beegy-blau-text);
}
.elementor .beegy-block .beegy-downloads h3:first-of-type + ul a {
	border-left-color: var(--beegy-blau-text);
}
.elementor .beegy-block .beegy-downloads h3:first-of-type + ul a::before {
	background-color: var(--beegy-blau-text);
}
.elementor .beegy-block .beegy-downloads h3:nth-of-type(2) {
	color: var(--beegy-orange-text);
}
.elementor .beegy-block .beegy-downloads h3:nth-of-type(2) + ul a {
	border-left-color: var(--beegy-orange-text);
}

/* Über uns: Zeitstrahl in einer Farbe (Blau), statt der Punkte das blaue Element der Mathilde. */
.elementor .beegy-block .beegy-zeitleiste-mathilde .beegy-zeitpunkt::before {
	background: var(--beegy-blau-text);
}
.elementor .beegy-block .beegy-zeitleiste-mathilde .beegy-zeitpunkt::after {
	top: 2px;
	width: 46px;
	height: 19px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: url("../img/mathilda-welle.svg") no-repeat left center / contain;
}
.elementor .beegy-block .beegy-zeitleiste-mathilde .beegy-zeitpunkt h3 {
	color: var(--beegy-blau-text);
}
/* Über uns: Geschäftsführung farbig (Blau und Orange im Wechsel, Weiß darauf mindestens 4,5:1). */
.elementor .beegy-block .beegy-portraits-farbig .beegy-bildkarte {
	border: 0;
	background: linear-gradient(135deg, var(--beegy-blau-tief), var(--beegy-blau-text));
	color: var(--beegy-weiss);
}
.elementor .beegy-block .beegy-portraits-farbig .beegy-bildkarte:nth-child(even) {
	background: linear-gradient(135deg, var(--beegy-orange-text), color-mix(in srgb, var(--beegy-orange-text) 70%, var(--beegy-orange)));
}
.elementor .beegy-block .beegy-portraits-farbig .beegy-bildkarte :is(h3, p) {
	color: var(--beegy-weiss);
}

/* Newsroom: Filter nach Art, Karten gleich hoch, „Mehr lesen“ unten bündig, Rahmen etwas kräftiger. */
.elementor .beegy-newsroom .elementor-post[hidden] {
	display: none;
}
.elementor .beegy-newsroom .elementor-post__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1.5px solid color-mix(in srgb, var(--beegy-linie) 60%, var(--beegy-text-2));
}
.elementor .beegy-newsroom .elementor-post__text {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}
.elementor .beegy-newsroom .elementor-post__read-more {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 12px;
	margin-bottom: 20px;
}
.elementor .beegy-newsroom .elementor-post__meta-data {
	border-top-color: color-mix(in srgb, var(--beegy-linie) 60%, var(--beegy-text-2));
}

/* Was ist ein HEMS: oberer Teil luftiger (Feedback beegy 21.10.2026). */
body.page-id-419 .elementor .beegy-block.beegy-sektion {
	padding-block: 140px;
}
body.page-id-419 .elementor .beegy-sektion .beegy-kopf {
	margin-bottom: 72px;
}
body.page-id-419 .elementor .beegy-block .beegy-zeitstrahl + .beegy-zwei-listen,
body.page-id-419 .elementor .beegy-block .beegy-zwei-listen + .beegy-text-bild,
body.page-id-419 .elementor .beegy-block .beegy-zwei-listen + .beegy-kopf {
	margin-top: 104px;
}
body.page-id-419 .elementor .beegy-block .beegy-zwei-listen {
	row-gap: 72px;
}
body.page-id-419 .elementor .beegy-block .beegy-zwei-listen p.e-paragraph-base,
body.page-id-419 .elementor .beegy-block .beegy-text-bild p.beegy-intro {
	line-height: 1.7;
}
body.page-id-419 .elementor .beegy-block .beegy-zwei-listen :is(p.e-paragraph-base, .elementor-widget-text-editor) + p.e-paragraph-base,
body.page-id-419 .elementor .beegy-block p.beegy-intro + p.beegy-intro {
	margin-top: 20px;
}
body.page-id-419 .elementor .beegy-block .beegy-zwei-listen .beegy-haken li + li {
	margin-top: 14px;
}

/* Knöpfe mit body-Präfix: die Kit-Regel „.elementor-kit-6 button“ färbt sonst Orange. */
/* Kontaktfahne rechts (wie auf der alten Website): Reiter senkrecht, öffnet ein oranges Kontaktfeld. Liegt direkt im body. */
.beegy-fahne {
	position: fixed;
	z-index: 90;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	transform: translateY(-50%);
	font-family: var(--beegy-schrift), sans-serif;
}
body .beegy-fahne .beegy-fahne-reiter {
	order: 2;
	min-width: 44px;
	padding: 20px 12px;
	border: 0;
	border-radius: 14px 0 0 14px;
	background-color: var(--beegy-blau-text);
	color: var(--beegy-weiss);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	cursor: pointer;
	box-shadow: 0 10px 24px #1b273326;
}
body .beegy-fahne .beegy-fahne-reiter:hover,
body .beegy-fahne.beegy-offen .beegy-fahne-reiter {
	background-color: var(--beegy-blau-tief);
}
body .beegy-fahne .beegy-fahne-reiter:focus-visible,
.beegy-fahne-box a:focus-visible,
body .beegy-fahne .beegy-fahne-zu:focus-visible {
	outline: 3px solid var(--beegy-text);
	outline-offset: 3px;
}
.beegy-fahne-box {
	position: relative;
	order: 1;
	width: min(320px, calc(100vw - 72px));
	padding: 28px 28px 26px;
	border-radius: 18px 0 0 18px;
	background-color: var(--beegy-orange-text);
	color: var(--beegy-weiss);
	font-size: 17px;
	line-height: 1.55;
	box-shadow: 0 16px 40px #1b273333;
}
.beegy-fahne-box[hidden] {
	display: none;
}
.beegy-fahne-box p {
	margin: 0 0 12px;
	color: var(--beegy-weiss);
}
.beegy-fahne-box .beegy-fahne-titel {
	padding-right: 28px;
	font-size: 20px;
	font-weight: 700;
}
.beegy-fahne-box .beegy-fahne-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 4px;
	padding: 10px 22px;
	border-radius: 999px;
	background-color: var(--beegy-weiss);
	color: var(--beegy-orange-text);
	font-weight: 700;
	text-decoration: none;
}
.beegy-fahne-box .beegy-fahne-link:hover {
	background-color: var(--beegy-text);
	color: var(--beegy-weiss);
}
body .beegy-fahne .beegy-fahne-zu {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background-color: #ffffff2e;
	color: var(--beegy-weiss);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
@media print {
	.beegy-fahne {
		display: none;
	}
}
@media (max-width: 767px) {
	.beegy-fahne {
		top: auto;
		bottom: 96px;
		transform: none;
	}
	body .beegy-fahne .beegy-fahne-reiter {
		padding: 14px 10px;
		font-size: 13px;
	}
}

/* =========================================================
   Mail Sophia 22.10.2026 (AW: Feedback Unterseiten)
   ========================================================= */

/* Offene Stellen: Stellenbezeichnungen als blaue Balken wie auf der alten Website. Weiß auf Blau-Text 5,9:1. */
.elementor .beegy-faq .beegy-faq-liste.beegy-stellen-liste {
	max-width: none;
	border-top: 0;
}
.elementor .beegy-faq .beegy-stellen-liste .e-accordion-item-base {
	border-bottom: 0;
}
.elementor .beegy-faq .beegy-stellen-liste .e-accordion-item-base + .e-accordion-item-base {
	margin-top: 14px;
}
.elementor .beegy-faq .beegy-stellen-liste .e-accordion-item-header-base {
	padding: 22px 28px;
	border-radius: 10px;
	background-color: var(--beegy-blau-text);
	color: var(--beegy-weiss);
	transition: background-color 0.2s ease;
}
.elementor .beegy-faq .beegy-stellen-liste .e-accordion-item-header-base:hover,
.elementor .beegy-faq .beegy-stellen-liste details[open] > .e-accordion-item-header-base {
	background-color: var(--beegy-blau-tief);
	color: var(--beegy-weiss);
}
.elementor .beegy-faq .beegy-stellen-liste .e-accordion-item-header-base:focus-visible {
	outline: 3px solid var(--beegy-text);
	outline-offset: 3px;
}
.elementor .beegy-faq .beegy-stellen-liste .e-accordion-item-header-base .e-paragraph-base {
	color: var(--beegy-weiss);
}
.elementor .beegy-faq .beegy-stellen-liste .e-accordion-item-icon-base {
	color: var(--beegy-weiss);
	filter: brightness(0) invert(1);
}
.elementor .beegy-faq .beegy-stellen-liste .e-accordion-item-content-base {
	padding: 24px 28px 8px;
}
.elementor .beegy-block .beegy-stellen-ort {
	margin-top: 40px;
}

/* Kopf mit Foto: blaue Welle tiefer und kleiner, damit sie weniger vom Foto verdeckt (powered by behält seine Kontur-Regel). */
.elementor .beegy-block.beegy-aufmacher.beegy-aufmacher-mitbild:not(.beegy-aufmacher-leer)::after {
	bottom: -70px;
	width: min(720px, 48vw);
}
/* Nach dem Kopf mit Foto mehr Abstand zur ersten Sektion. */
body:not(.home) .elementor .beegy-block.beegy-aufmacher-foto + .beegy-block.beegy-sektion {
	padding-top: 150px;
}