/* ═══════════════════════════════════════════════════════════════════════════
   Ohne !important — nachgemessen, nicht geraten

   Beide Fassungen wurden bei 1440, 1024, 767 und 390 Pixeln Element für
   Element verglichen, über 37 Eigenschaften je Element.
   Wirksam waren nur die drei Regeln am Medienrahmen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* =============================================================================
   HDM Leistung Header — Randlos
   Bild läuft bis zum Bildschirmrand und über die volle Höhe, Text daneben.
   Text, Chips und Buttons kommen aus hdm-leistung-header.css — hier steht
   nur das Layout.
   ============================================================================= */

.hdm-lhs {
	--lhs-media-w: 48%;
	--lhs-h:       88vh;
	--lhs-page-w:  1240px;
	--lhs-txt-max: 560px;
	--lhs-gap:     64px;
	--lhs-pad-y:   72px;
	--lhs-radius:  0px;
	--lhs-fade:    14%;
	--lhs-focus:   center;
	--lhs-ov:      rgba(6, 22, 47, 0.35);
	--lhs-zoom-dur: 24s;
	/* Bild: Größe des Motivs innerhalb seiner Fläche */
	--lhs-img-scale:  1;
	--lhs-img-origin: center;
	--lhs-media-bg:   transparent;
	/* Text: ein Faktor für alle Schriftgrößen plus freie Verschiebung.
	   Die Grundgrößen liegen als Variablen daneben, damit sie sich responsiv
	   überschreiben lassen, ohne die Skalierung zu verlieren. */
	--lhs-txt-scale:   1;
	--lhs-title-size:  62px;
	--lhs-fs-eyebrow:  12px;
	--lhs-fs-desc:     18px;
	--lhs-fs-chip:     13px;
	--lhs-fs-btn:      15px;
	--lhs-txt-x:       0px;
	--lhs-txt-y:       0px;
	--lhs-scrim:       #ffffff;
	--lhs-scrim-w:     70%;
	--lhs-edge-pad: 40px;
	/* Seitenrand der Seite: so beginnt der Text genau unter dem übrigen
	   Inhalt. Inhaltsbreite = max. Breite des Containers, edge-pad = dessen
	   Innenabstand — beide Werte kann man aus den Container-Einstellungen
	   ablesen, deshalb sind sie eigene Regler. */
	--lhs-edge: max(var(--lhs-edge-pad), calc((100vw - var(--hdm-sbw, 0px) - var(--lhs-page-w)) / 2 + var(--lhs-edge-pad)));
	overflow: hidden;
}

/* ── Randlos ──
   Bricht aus jedem Elementor-Container aus. --hdm-sbw ist die per JS
   gemessene Scrollbalken-Breite; ohne den Abzug wäre die Sektion genau um
   den Scrollbalken zu breit und die Seite ließe sich seitlich scrollen. */
.hdm-lhs.is-bleed {
	width: calc(100vw - var(--hdm-sbw, 0px));
	max-width: calc(100vw - var(--hdm-sbw, 0px));
	margin-left: calc(50% - (100vw - var(--hdm-sbw, 0px)) / 2);
	margin-right: calc(50% - (100vw - var(--hdm-sbw, 0px)) / 2);
}

/* ── Hintergrundbild der ganzen Sektion ──
   Liegt unter allem, auch unter der Bildebene. Eigenes Element statt
   background auf der Sektion, damit Deckkraft, Unschärfe und ein Schleier
   darüber unabhängig vom Rest steuerbar bleiben. */
.hdm-lhs-bg {
	position: absolute;
	/* Überstand in Höhe der Unschärfe: sonst verlaufen die Kanten des
	   Hintergrunds beim Weichzeichnen nach transparent aus. */
	inset: calc(-2 * var(--lhs-bg-blur, 0px));
	z-index: 0;
	pointer-events: none;
	background-image: var(--lhs-bg-img, none);
	background-size: var(--lhs-bg-size, cover);
	background-position: var(--lhs-bg-pos, center center);
	background-repeat: var(--lhs-bg-repeat, no-repeat);
	background-attachment: var(--lhs-bg-attach, scroll);
	opacity: var(--lhs-bg-op, 1);
	filter: blur(var(--lhs-bg-blur, 0px));
}
/* Schleier darüber — hält Text und Bild lesbar */
.hdm-lhs-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--lhs-bg-veil, transparent);
}

/* ── Raster ── */
.hdm-lhs-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--lhs-media-w);
	align-items: stretch;          /* Bild zieht sich auf volle Höhe */
	min-height: var(--lhs-h);
	/* Positioniert mit z-index, sonst läge das absolute Hintergrundbild
	   über dem Inhalt: nicht positionierte Elemente werden vor
	   positionierten mit z-index 0 gezeichnet. */
	position: relative;
	z-index: 1;
}
.hdm-lhs.is-h-auto .hdm-lhs-grid { min-height: 0; }

/* Bild links: Spalten tauschen statt Reihenfolge, damit die
   Innenabstände automatisch mitspiegeln. */
.hdm-lhs-side-left .hdm-lhs-grid {
	grid-template-columns: var(--lhs-media-w) minmax(0, 1fr);
}
.hdm-lhs-side-left .hdm-lhs-text  { order: 2; }
.hdm-lhs-side-left .hdm-lhs-media { order: 1; }

/* ── Textspalte ── */
.hdm-lhs-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: var(--lhs-pad-y) var(--lhs-gap) var(--lhs-pad-y) var(--lhs-edge);
}
.hdm-lhs-side-left .hdm-lhs-text {
	padding-left: var(--lhs-gap);
	padding-right: var(--lhs-edge);
}
.hdm-lhs-text-in {
	max-width: var(--lhs-txt-max);
	width: 100%;
	/* Freie Verschiebung über translate, nicht über Abstände: dadurch ändert
	   sich die Textbreite nicht und der Umbruch bleibt, wie er ist. */
	translate: var(--lhs-txt-x) var(--lhs-txt-y);
}

/* ── Textgrößen: ein Faktor für alles ──
   Zwei Klassen tief, damit der Faktor die Grundgrößen aus
   hdm-leistung-header.css schlägt — auch die in deren Media-Queries. */
.hdm-lhs .hdm-lh-title   { font-size: calc(var(--lhs-title-size) * var(--lhs-txt-scale)); }
.hdm-lhs .hdm-lh-eyebrow { font-size: calc(var(--lhs-fs-eyebrow) * var(--lhs-txt-scale)); }
.hdm-lhs .hdm-lh-desc    { font-size: calc(var(--lhs-fs-desc) * var(--lhs-txt-scale)); }
.hdm-lhs .hdm-lh-chip    { font-size: calc(var(--lhs-fs-chip) * var(--lhs-txt-scale)); }
.hdm-lhs .hdm-lh-btn     { font-size: calc(var(--lhs-fs-btn) * var(--lhs-txt-scale)); }
/* Ausgeglichenere Zeilenlängen im Absatz — verhindert einzelne Restwörter */
.hdm-lhs .hdm-lh-desc    { text-wrap: pretty; }
/* Bei Bild links sitzt der Text am rechten Seitenrand */
.hdm-lhs-side-left .hdm-lhs-text-in { margin-left: auto; }

/* Nicht randlos = kein Ausbrechen, also normaler Innenabstand */
.hdm-lhs:not(.is-bleed) .hdm-lhs-text { padding-left: 40px; }
.hdm-lhs:not(.is-bleed).hdm-lhs-side-left .hdm-lhs-text {
	padding-left: var(--lhs-gap);
	padding-right: 40px;
}

/* ── Medienspalte ── */
.hdm-lhs-media {
	position: relative;
	overflow: hidden;
	min-width: 0;
	/* Standard transparent: bei „Bild ganz zeigen" wäre eine eigene Kartenfarbe
	   als Streifen über und unter dem Motiv sichtbar. */
	background: var(--lhs-media-bg, transparent);
	/* Nur die Kante zum Text runden — außen bleibt es randlos */
	border-radius: var(--lhs-radius) 0 0 var(--lhs-radius);
}
.hdm-lhs-side-left .hdm-lhs-media {
	border-radius: 0 var(--lhs-radius) var(--lhs-radius) 0;
}

/* !important, weil Themes reihum `img { height: auto !important }` setzen —
   ohne das füllt das Bild die Fläche nicht und es bleibt ein Streifen frei. */
/* Der Vorfahre ersetzt drei !important: `img { max-width: 100% }` des
   Themes würde das Motiv auf die Rahmenbreite stauchen. Mit
   `.hdm-lhs-media` steht die Regel auf (0,2,1) und gewinnt. */
.hdm-lhs-media .hdm-lhs-img,
.hdm-lhs-media .hdm-lhs-vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--lhs-focus, center);
	display: block;
	/* Bildgröße: skaliert das Motiv in seiner Fläche. Bei „ganz zeigen" wird
	   das Motiv damit wirklich größer, bei „füllen" fährt es näher heran. */
	transform: scale(var(--lhs-img-scale, 1));
	transform-origin: var(--lhs-img-origin, center);
}
.hdm-lhs.is-contain .hdm-lhs-img,
.hdm-lhs.is-contain .hdm-lhs-vid {
	object-fit: contain;
}

/* Langsamer Zoom — endlos, hin und zurück, damit es nie springt.
   Die eingestellte Bildgröße ist der Startpunkt, sonst würde die Animation
   den Regler überschreiben. */
.hdm-lhs.is-zoom .hdm-lhs-img,
.hdm-lhs.is-zoom .hdm-lhs-vid {
	animation: hdmLhsZoom var(--lhs-zoom-dur, 24s) ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes hdmLhsZoom {
	from { transform: scale(var(--lhs-img-scale, 1)); }
	to   { transform: scale(calc(var(--lhs-img-scale, 1) * 1.09)); }
}

/* Weiche Kante zum Text hin */
.hdm-lhs.is-fade .hdm-lhs-media {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--lhs-fade)), transparent 100%);
	        mask-image: linear-gradient(to left, #000 calc(100% - var(--lhs-fade)), transparent 100%);
}
.hdm-lhs.is-fade.hdm-lhs-side-left .hdm-lhs-media {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--lhs-fade)), transparent 100%);
	        mask-image: linear-gradient(to right, #000 calc(100% - var(--lhs-fade)), transparent 100%);
}

/* ══ Text über dem Bild ═══════════════════════════════════════════════════
   Das Bild verlässt das Raster und wird eine eigene Ebene. Damit bestimmt
   seine Breite nicht mehr die Textspalte: der Text behält seine Breite und
   seinen Umbruch, egal wie groß das Bild wird. */
.hdm-lhs.is-over .hdm-lhs-grid {
	display: block;
	position: relative;
}
.hdm-lhs.is-over .hdm-lhs-media {
	position: absolute;
	inset: 0 0 0 auto;
	width: var(--lhs-media-w);
	z-index: 0;
}
.hdm-lhs.is-over.hdm-lhs-side-left .hdm-lhs-media {
	inset: 0 auto 0 0;
}
.hdm-lhs.is-over .hdm-lhs-text {
	position: relative;
	z-index: 2;
	/* border-box, sonst addiert min-height den Innenabstand oben/unten dazu und
	   die Sektion wird beim Umschalten auf diesen Modus höher. */
	box-sizing: border-box;
	min-height: var(--lhs-h);
	/* Kein Platzhalter für die Bildspalte mehr — der Text darf darüber laufen */
	padding-right: var(--lhs-gap);
}
.hdm-lhs.is-over.hdm-lhs-side-left .hdm-lhs-text {
	padding-left: var(--lhs-gap);
	padding-right: var(--lhs-edge);
}
.hdm-lhs.is-over.is-h-auto .hdm-lhs-text { min-height: 0; }

/* Lesehilfe: weicher Verlauf in der Hintergrundfarbe hinter dem Text.
   z-index -1 bleibt innerhalb der Text-Ebene, liegt also weiter über dem
   Bild und nur hinter der Schrift. */
.hdm-lhs.is-over.is-scrim .hdm-lhs-text::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to right,
		var(--lhs-scrim) 0%,
		var(--lhs-scrim) calc(var(--lhs-scrim-w) * 0.6),
		transparent var(--lhs-scrim-w));
}
.hdm-lhs.is-over.is-scrim.hdm-lhs-side-left .hdm-lhs-text::before {
	background: linear-gradient(to left,
		var(--lhs-scrim) 0%,
		var(--lhs-scrim) calc(var(--lhs-scrim-w) * 0.6),
		transparent var(--lhs-scrim-w));
}

/* Abdunklung — nur sichtbar, wenn das Bild auf Mobil hinter dem Text liegt */
.hdm-lhs-ov {
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
}

/* ── Badge ── */
.hdm-lhs-badge { position: absolute; z-index: 3; }
.hdm-lhs-badge-bl { left: 22px;  bottom: 22px; }
.hdm-lhs-badge-br { right: 22px; bottom: 22px; left: auto; }
.hdm-lhs-badge-tl { left: 22px;  top: 22px;    bottom: auto; }
.hdm-lhs-badge-tr { right: 22px; top: 22px;    left: auto; bottom: auto; }

/* ── Bild-Auftritt ──
   .is-in setzt das gemeinsame JS, sobald der Header im Blick ist. */
.hdm-lhs .hdm-lhs-media {
	transition: clip-path 1.05s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 0.8s ease;
}
.hdm-lhs.hdm-lhs-in-wipe:not(.is-in) .hdm-lhs-media { clip-path: inset(0 0 0 100%); }
.hdm-lhs.hdm-lhs-in-wipe.is-in      .hdm-lhs-media { clip-path: inset(0 0 0 0); }
.hdm-lhs.hdm-lhs-in-wipe.hdm-lhs-side-left:not(.is-in) .hdm-lhs-media { clip-path: inset(0 100% 0 0); }

.hdm-lhs.hdm-lhs-in-zoom:not(.is-in) .hdm-lhs-media { transform: scale(1.12); opacity: 0; }
.hdm-lhs.hdm-lhs-in-zoom.is-in      .hdm-lhs-media { transform: scale(1);    opacity: 1; }

.hdm-lhs.hdm-lhs-in-fade:not(.is-in) .hdm-lhs-media { opacity: 0; }
.hdm-lhs.hdm-lhs-in-fade.is-in      .hdm-lhs-media { opacity: 1; }

/* Im Editor immer fertig zeigen, sonst sieht man nur eine leere Fläche */
body.elementor-editor-active .hdm-lhs .hdm-lhs-media {
	clip-path: none;
	transform: none;
	opacity: 1;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
	.hdm-lhs-grid,
	.hdm-lhs-side-left .hdm-lhs-grid {
		grid-template-columns: minmax(0, 1fr) 42%;
	}
	.hdm-lhs-side-left .hdm-lhs-grid { grid-template-columns: 42% minmax(0, 1fr); }
}

/* ── Mobil ──
   Untereinander: Bild oben mit der eingestellten Höhe, Text darunter. */
@media (max-width: 767px) {
	/* Eigene Grundhöhe fürs Handy — 88vh wäre für ein Telefon zu hoch.
	   Der Regler für Mobil aus Elementor überschreibt das. */
	.hdm-lhs {--lhs-fs-desc: 16px; }

	/* Überlagerung auf Mobil auflösen: der Text läge sonst auf einem
	   halbbreiten Bild statt daneben oder darunter. */
	.hdm-lhs.is-over .hdm-lhs-grid  { display: grid; }
	.hdm-lhs.is-over .hdm-lhs-media { position: relative; inset: auto; width: auto; }
	.hdm-lhs.is-over .hdm-lhs-text,
	.hdm-lhs.is-over.hdm-lhs-side-left .hdm-lhs-text { min-height: 0; }
	.hdm-lhs.is-over.is-scrim .hdm-lhs-text::before { display: none; }
	/* Verschiebung zurücknehmen — auf einer schmalen Spalte schiebt sie den
	   Text nur aus dem Bild heraus. Die Mobil-Regler können sie neu setzen. */
	.hdm-lhs-text-in { translate: 0 0; }

	.hdm-lhs-grid,
	.hdm-lhs-side-left .hdm-lhs-grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}
	.hdm-lhs-text,
	.hdm-lhs-side-left .hdm-lhs-text {
		order: 2;
		padding: 34px 24px 44px;
	}
	.hdm-lhs-text-in,
	.hdm-lhs-side-left .hdm-lhs-text-in { max-width: none; margin: 0; }

	.hdm-lhs-media,
	.hdm-lhs-side-left .hdm-lhs-media {
		order: 1;
		height: var(--lhs-h, 52vh);
		border-radius: 0;
	}
	/* Weiche Kante läuft auf Mobil nach unten statt zur Seite */
	.hdm-lhs.is-fade .hdm-lhs-media,
	.hdm-lhs.is-fade.hdm-lhs-side-left .hdm-lhs-media {
		-webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--lhs-fade)), transparent 100%);
		        mask-image: linear-gradient(to top, #000 calc(100% - var(--lhs-fade)), transparent 100%);
	}

	/* Bild als Hintergrund hinter dem Text */
	.hdm-lhs-mob-bg .hdm-lhs-grid { grid-template-areas: 'stack'; }
	.hdm-lhs-mob-bg .hdm-lhs-text,
	.hdm-lhs-mob-bg .hdm-lhs-media {
		grid-area: stack;
		height: auto;
	}
	.hdm-lhs-mob-bg .hdm-lhs-grid { min-height: var(--lhs-h, 52vh); }
	.hdm-lhs-mob-bg .hdm-lhs-media { z-index: 0; }
	.hdm-lhs-mob-bg .hdm-lhs-text  { z-index: 1; position: relative; justify-content: flex-end; }
	.hdm-lhs-mob-bg .hdm-lhs-ov    { background: var(--lhs-ov); }
	/* Text muss auf dem Bild lesbar bleiben — deshalb hell, unabhängig vom
	   Schema. Über die Variablen, nicht über color: die Basis-Regel für den
	   Titel ist !important und ließe sich sonst nur mit einem zweiten
	   !important schlagen. So ziehen Beschreibung, Chips und der Ghost-Button
	   automatisch mit. */
	.hdm-lhs-mob-bg {
		--hdm-lh-title:   #ffffff;
		--hdm-lh-text:    rgba(255, 255, 255, 0.88);
		--hdm-lh-chip-bg: rgba(255, 255, 255, 0.16);
		--hdm-lh-chip-tx: #ffffff;
	}
	.hdm-lhs-mob-bg .hdm-lhs-media { -webkit-mask-image: none; mask-image: none; }

	/* Bild ausblenden */
	.hdm-lhs-mob-hide .hdm-lhs-media { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hdm-lhs .hdm-lhs-media {
		clip-path: none !important;
		transform: none !important;
		opacity: 1 !important;
		transition: none !important;
	}
	.hdm-lhs.is-zoom .hdm-lhs-img,
	.hdm-lhs.is-zoom .hdm-lhs-vid { animation: none !important; }
}

/* Abstände der Feature-Chips getrennt regelbar — im Randlos-Header steht
   der Text oft enger, da braucht es eigene Werte. */
.hdm-lhs .hdm-lh-chips {
	margin-top: var(--lhs-chips-top, 22px);
	margin-bottom: var(--lhs-chips-bot, 34px);
}

/* ══════════════════════════════════════════════════════════════════════════
   Das Kit setzt `.elementor-kit-24 h1..h4 { text-transform: capitalize }` —
   (0,1,1), geladen vor uns. Im Deutschen wird daraus Title Case: aus
   „Sichtbar werden bei Google" wird „Sichtbar Werden Bei Google".
   Mit dem Vorfahren steht die Regel auf (0,2,0) und gewinnt. NUR diese eine
   Eigenschaft wird verstaerkt — Groesse, Gewicht und Farbe bleiben beim Kit
   bzw. beim Elementor-Regler, damit sich sonst nichts verschiebt.
   Setzt jemand den Schriftregler bewusst auf Grossschreibung, schreibt
   Elementor (0,4,0) und gewinnt weiterhin.
   ══════════════════════════════════════════════════════════════════════════ */
.hdm-lhs .hdm-lh-title { text-transform: none; }

/* 3.7.0: Ohne Pillen klebten die Knöpfe am Fließtext */
.hdm-lhs .hdm-lh-desc + .hdm-lh-actions { margin-top: 36px; }