/*
 * Elternseite (/fuer-eltern/), Ueberarbeitung vom 30.09.2026.
 *
 * Florian: "kannst du die seite designtechnisch ueberarbeiten danke" und zur
 * Premium-Karte "dieses schwarze was wir vorher hatten hat sehr edel gewirkt
 * das bitte wieder". Eigene Datei, damit die Elternseite unabhaengig von
 * custom.css ueberarbeitet werden kann. Geladen nur auf /fuer-eltern/, nach
 * custom.css und hero.css (functions.php), und im Editor. Weil der Editor
 * diese Datei fuer jede Seite laedt, gilt jede Regel nur unter einer Klasse,
 * die es nur in den Eltern-Patterns gibt.
 */

/* ── Kopf: Foto ueber den Farbflecken, ohne blauen Schleier ──
   Der blaue Fleck (.hero-shader::after in hero.css) lag ueber dem Bild,
   weil die Bildspalte keine eigene Ebene hatte. */
.eltern-hero .hero-shader__image-col {
	position: relative;
	z-index: 2;
}

.eltern-hero .hero-shader__image img {
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ── Drei Fakten unter dem Kopf: eine Reihe, drei gleich breite Felder ── */
.eltern-fakten .trust-glance__claims.trust-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	max-width: 980px;
	margin: 0 auto;
}

.eltern-fakten .trust-glance__claim {
	justify-content: center;
	min-width: 0;
	padding: 0.35rem 1.25rem;
	border-left: 1px solid var(--wp--preset--color--mid-gray);
}

.eltern-fakten .trust-glance__claim:first-child {
	border-left: 0;
}

@media (min-width: 1024px) {
	.eltern-fakten .trust-glance__claims.trust-row {
		max-width: 1120px;
	}

	.eltern-fakten .trust-glance__label {
		white-space: nowrap;
	}
}

@media (max-width: 700px) {
	.eltern-fakten .trust-glance__claims.trust-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.9rem;
		max-width: 360px;
	}

	.eltern-fakten .trust-glance__claim {
		justify-content: flex-start;
		padding: 0;
		border-left: 0;
	}
}

/* ── "Ihr Kurs auf einen Blick": offene Spalten statt Karten ──
   Danach folgen die Schritte und die Preiskarten, deshalb hier keine Kaesten,
   sondern Symbol, Titel und Text mit feinen Trennlinien. */
.eltern-format .format-grid {
	gap: 0;
}

.eltern-format .format-card {
	padding: 0.5rem 1.75rem;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--mid-gray);
	border-radius: 0;
	box-shadow: none;
	text-align: left;
}

.eltern-format .format-card:first-child {
	border-left: 0;
}

.eltern-format .format-card:hover {
	transform: none;
	box-shadow: none;
}

.eltern-format .format-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1rem;
	border-radius: 14px;
	background: rgba(37, 128, 87, 0.12);
	color: var(--wp--preset--color--primary);
	font-size: 1rem;
}

@media (max-width: 1024px) {
	.eltern-format .format-grid {
		row-gap: 2rem;
	}

	.eltern-format .format-card:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 540px) {
	.eltern-format .format-card {
		padding: 0;
		border-left: 0;
	}
}

/* ── Premium-Karte "Begleitung": schwarz mit Gold wie frueher ──
   Grund, Rand, Name, Liste und Abzeichen stehen in custom.css
   (.preis-card--premium, .preis-card__badge--soon); hier alles, was auf dem
   dunklen Grund sonst verschwinden wuerde. */
.eltern-preise .preis-card--premium .preis-card__amount {
	color: #e8c766;
}

.eltern-preise .preis-card--premium .preis-card__steuer,
.eltern-preise .preis-card--premium .preis-card__einmal {
	color: rgba(255, 255, 255, 0.72);
}

.eltern-preise .preis-card--premium .preis-card__steuer strong {
	color: #ffffff;
}

.eltern-preise .preis-card--premium .preis-card__cta--outline {
	color: #e8c766;
	border-color: rgba(212, 175, 55, 0.75);
}

.eltern-preise .preis-card--premium .preis-card__cta--outline:hover,
.eltern-preise .preis-card--premium .preis-card__cta--outline:focus-visible {
	background: rgba(212, 175, 55, 0.14);
	color: #f2d98a;
}

.eltern-preise .preis-card--premium:hover {
	box-shadow: 0 18px 40px rgba(10, 10, 26, 0.35);
}

/* ── "Kennen Sie das?" (eltern-problem.php): Sprechblasen ──
   30.09.2026 nachmittags (Florian: "auch das ist optisch noch nicht so
   cool"). Links Ueberschrift und Schlusssatz, rechts die sechs Situationen
   als Sprechblasen mit olivgruenem Symbol, jede zweite etwas eingerueckt.
   Ueberschrift und Satz stehen zusammen auf halber Hoehe der Liste.
   Unter 900px untereinander, der Schlusssatz dann nach der Liste. */
.eltern-problem .sorgen {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-areas:
		". liste"
		"titel liste"
		"schluss liste"
		". liste";
	grid-template-rows: 1fr auto auto 1fr;
	column-gap: clamp(2.5rem, 6vw, 5.5rem);
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

.eltern-problem .sorgen__titel {
	grid-area: titel;
	margin: 0;
	font-size: clamp(2.25rem, 4.6vw, 3.6rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.eltern-problem .sorgen__liste {
	grid-area: liste;
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eltern-problem .sorgen__eintrag {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 560px;
	margin: 0;
	padding: 0.95rem 1.4rem 0.95rem 0.95rem;
	border-radius: 22px 22px 22px 6px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 14px 30px -22px rgba(26, 26, 46, 0.4);
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--wp--preset--color--dark);
}

.eltern-problem .sorgen__eintrag:nth-child(even) {
	margin-left: clamp(1rem, 5vw, 4rem);
}

.eltern-problem .sorgen__symbol {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(137, 150, 100, 0.16);
	color: #6b7548;
}

.eltern-problem .sorgen__schluss {
	grid-area: schluss;
	margin: 1.75rem 0 0;
	font-family: var(--wp--preset--font-family--playfair), serif;
	font-size: clamp(1.35rem, 2.3vw, 1.7rem);
	font-style: italic;
	line-height: 1.45;
	color: var(--wp--preset--color--primary-dark);
	text-wrap: balance;
}

.eltern-problem .sorgen__schluss::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-bottom: 1.1rem;
	border-radius: 3px;
	background: var(--wp--preset--color--primary);
}

/* Die Blasen tauchen beim Scrollen nacheinander auf, nur wo der Browser
   scrollgesteuerte Animationen kann; sonst stehen sie einfach da */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.eltern-problem .sorgen__eintrag {
			animation: eltern-sorgen-auftauchen linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 90%;
		}
	}
}

@keyframes eltern-sorgen-auftauchen {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 900px) {
	.eltern-problem .sorgen {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"titel"
			"liste"
			"schluss";
		grid-template-rows: none;
		max-width: 600px;
	}

	.eltern-problem .sorgen__titel {
		margin-bottom: 1.75rem;
		text-align: center;
	}

	.eltern-problem .sorgen__eintrag:nth-child(even) {
		margin-left: 1.25rem;
	}

	.eltern-problem .sorgen__schluss {
		margin-top: 2.25rem;
		text-align: center;
	}

	.eltern-problem .sorgen__schluss::before {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 480px) {
	.eltern-problem .sorgen__eintrag {
		gap: 0.8rem;
		padding: 0.85rem 1.1rem 0.85rem 0.85rem;
		font-size: 1rem;
	}

	.eltern-problem .sorgen__eintrag:nth-child(even) {
		margin-left: 0.75rem;
	}

	.eltern-problem .sorgen__symbol {
		width: 38px;
		height: 38px;
	}
}

/* ── "Was sich fuer Sie als Eltern aendert" (why-section-eltern.php) ──
   30.09.2026 nachmittags: vier Zeilen statt vier Karten in einem
   hellgruenen Feld. Gruene Symbole, durch eine Linie verbunden, daneben
   Titel und Text; am Handy der Text unter dem Titel. */
.eltern-wandel .wandel {
	--wandel-symbol: 56px;
	--wandel-abstand: clamp(1rem, 2.5vw, 2rem);
	--wandel-zeile: 1.5rem;
	max-width: 1000px;
	margin: 0 auto;
	padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1.25rem, 4vw, 3rem);
	border: 1px solid #d7e8dd;
	border-radius: 28px;
	background: linear-gradient(180deg, #eef6f1 0%, #f8fbf9 100%);
	list-style: none;
}

.eltern-wandel .wandel__punkt {
	position: relative;
	display: grid;
	grid-template-columns: var(--wandel-symbol) minmax(0, 0.8fr) minmax(0, 1.5fr);
	align-items: start;
	column-gap: var(--wandel-abstand);
	margin: 0;
	padding: var(--wandel-zeile) 0;
}

/* Trennlinie nur unter Titel und Text, nicht durch die Symbole */
.eltern-wandel .wandel__punkt + .wandel__punkt::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--wandel-symbol) + var(--wandel-abstand));
	right: 0;
	height: 1px;
	background: rgba(37, 128, 87, 0.16);
}

/* Linie von Symbol zu Symbol */
.eltern-wandel .wandel__punkt:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(var(--wandel-symbol) / 2 - 1px);
	top: calc(var(--wandel-zeile) + var(--wandel-symbol) + 6px);
	bottom: calc(6px - var(--wandel-zeile));
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(37, 128, 87, 0.5), rgba(37, 128, 87, 0.18));
}

.eltern-wandel .wandel__symbol {
	display: grid;
	place-items: center;
	width: var(--wandel-symbol);
	height: var(--wandel-symbol);
	border-radius: 50%;
	background: linear-gradient(145deg, #2ea866 0%, #258057 55%, #1b5e3f 100%);
	box-shadow: 0 10px 22px -12px rgba(37, 128, 87, 0.8);
	color: #ffffff;
}

.eltern-wandel .wandel__titel {
	margin: 0.85rem 0 0;
	font-size: clamp(1.15rem, 1.8vw, 1.35rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--dark);
}

.eltern-wandel .wandel__text {
	margin: 0.8rem 0 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-gray);
}

@media (max-width: 781px) {
	.eltern-wandel .wandel {
		--wandel-symbol: 46px;
		--wandel-zeile: 1.25rem;
	}

	.eltern-wandel .wandel__punkt {
		grid-template-columns: var(--wandel-symbol) minmax(0, 1fr);
	}

	.eltern-wandel .wandel__symbol {
		grid-row: span 2;
	}

	.eltern-wandel .wandel__titel {
		margin-top: 0.55rem;
	}

	.eltern-wandel .wandel__text {
		margin-top: 0.4rem;
		font-size: 0.97rem;
	}
}

/* ── Leseprobe in Modul 1 (eltern-kursinhalte.php), 30.09.2026 ──
   Florian: "die moeglichkeit fuer den einblick wuerde ich direkt beim inhalt
   einfuegen". Markierung an den Karten der Leseprobe und ein Kasten
   unter der Kartenliste, Grund wie auf der Seite der Leseprobe (#EAF0EC),
   Knopf als Umriss wie bisher. */
.eltern-kursinhalte .kartenliste__probe-link {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0 0.55rem;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 9999px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	white-space: nowrap;
	vertical-align: 0.12em;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eltern-kursinhalte .kartenliste__probe-link:hover,
.eltern-kursinhalte .kartenliste__probe-link:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.eltern-kursinhalte .kartenliste__probe {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.1rem;
	margin-top: 1.4rem;
	padding: 1.1rem 1.25rem;
	border-radius: 16px;
	background: #eaf0ec;
}

.eltern-kursinhalte .kartenliste__probe-symbol {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #ffffff;
	color: var(--wp--preset--color--primary);
}

.eltern-kursinhalte .kartenliste__probe-text p {
	font-size: 0.92rem;
	line-height: 1.55;
}

.eltern-kursinhalte .kartenliste__probe-text .kartenliste__probe-titel {
	margin-bottom: 0.15rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--dark);
}

.eltern-kursinhalte .kartenliste__probe-knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.2rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 9999px;
	background: #ffffff;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.eltern-kursinhalte .kartenliste__probe-knopf:hover,
.eltern-kursinhalte .kartenliste__probe-knopf:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

@media (max-width: 700px) {
	.eltern-kursinhalte .kartenliste__probe {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}

	.eltern-kursinhalte .kartenliste__probe-knopf {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* ══════════════════════════════════════════════════
   Kopf (eltern-hero.php), 26.10.2026: wie die Startseite, rechts eine
   Kurskarte mit Preis und "Zur Bestellung", dahinter das Vortragsfoto,
   Florians Kopf frei ueber der Karte (Florian: "drei ist perfekt aber mein
   kopf ist dort nicht gut sichtbar", dann "setze es so um!").
   ══════════════════════════════════════════════════ */

.wp-block-group.hero-shader.ek {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: stretch !important;
	min-height: min(100vh, 900px);
	padding: 9rem 2rem 3.5rem 2rem !important;
}

.ek-innen {
	position: relative;
	z-index: 5;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto !important;
}

/* Foto rechts, nach links und unten weich ausgeblendet, oben nur kurz,
   damit Florians Kopf frei bleibt */
.ek-foto {
	position: absolute;
	z-index: 1;
	top: 80px;
	right: 0;
	bottom: 40px;
	width: 60%;
	margin: 0 !important;
}

.ek-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% 18%;
	filter: brightness(0.85) saturate(1.05);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 5%, rgba(0, 0, 0, 0.85) 10%, #000 14%, #000 80%, rgba(0, 0, 0, 0.6) 90%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 8%, rgba(0, 0, 0, 0.5) 16%, rgba(0, 0, 0, 0.85) 24%, #000 31%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 5%, rgba(0, 0, 0, 0.85) 10%, #000 14%, #000 80%, rgba(0, 0, 0, 0.6) 90%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 8%, rgba(0, 0, 0, 0.5) 16%, rgba(0, 0, 0, 0.85) 24%, #000 31%);
	mask-composite: intersect;
}

.ek-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 410px);
	gap: 4rem;
	align-items: center;
	min-height: 640px;
}

.ek .ek-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.4rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.9);
	font: 500 0.82rem/1.4 var(--wp--preset--font-family--poppins), sans-serif;
	letter-spacing: 0.02em;
}

.ek .ek-kicker::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #5fd39a;
	box-shadow: 0 0 0 4px rgba(95, 211, 154, 0.18);
}

.ek .hero-shader__title {
	margin: 0 0 1.25rem !important;
	color: #ffffff;
	font-size: clamp(2.3rem, 4.3vw, 3.9rem) !important;
	font-weight: 700;
	line-height: 1.06 !important;
	letter-spacing: -0.02em;
}

.ek .ek-sub {
	max-width: 500px;
	margin: 0 0 2rem;
	color: rgba(255, 255, 255, 0.72);
	font: 400 1.1rem/1.65 var(--wp--preset--font-family--poppins), sans-serif;
}

.ek .hero-shader__cta-row {
	gap: 1rem 1.75rem;
}

.ek-vertrauen {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 2rem 0 0;
	color: rgba(255, 255, 255, 0.7);
	font: 400 0.88rem/1.4 var(--wp--preset--font-family--poppins), sans-serif;
}

.ek-vertrauen img {
	width: 42px;
	height: 42px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
}

.ek-vertrauen strong {
	color: #ffffff;
	font-weight: 600;
}

/* Kurskarte */
.ek-karte {
	display: grid;
	align-self: end;
	gap: 0.85rem;
	padding: 1.5rem 1.6rem;
	border-radius: 26px;
	background: #ffffff;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
	color: #1A1A2E;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
}

.ek-karte__kopf {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.ek-karte__kopf img {
	width: 60px;
	height: 60px;
	border: 1px solid #E4E7E0;
	border-radius: 14px;
}

.ek-kk {
	display: block;
	color: #258057;
	font: 700 0.66rem/1.3 var(--wp--preset--font-family--poppins), sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ek-karte__kopf strong {
	display: block;
	font-size: 1.1rem;
	line-height: 1.3;
}

.ek-liste {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #4b5160;
	font-size: 0.92rem;
}

.ek-liste li {
	position: relative;
	padding-left: 1.6rem;
}

.ek-liste li::before {
	content: "";
	position: absolute;
	top: 0.2rem;
	left: 0;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #258057 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.ek-preis {
	margin: 0.25rem 0 0;
	color: #5b6170;
	font-size: 0.85rem;
}

.ek-preis strong {
	display: block;
	color: #1A1A2E;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
}

.ek-knopf {
	display: flex;
	justify-content: center;
	padding: 1rem;
	border-radius: 9999px;
	background: linear-gradient(135deg, #258057, #0038E3);
	box-shadow: 0 6px 20px rgba(37, 128, 87, 0.3);
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ek-knopf:hover,
.ek-knopf:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(37, 128, 87, 0.4);
	color: #ffffff;
}

.ek-karte .zertifikat-chip {
	margin: 0.25rem 0 0;
	padding: 0.55rem 0.9rem 0.55rem 0.6rem;
	border-color: #E4E7E0;
	background: #F4F7F5;
	box-shadow: none;
	color: #4b5160;
	font-size: 0.78rem;
}

.ek-karte .zertifikat-chip strong {
	color: #1A1A2E;
	font-size: 0.85rem;
}

.ek-karte .zertifikat-chip__stapel {
	width: 56px;
	height: 40px;
}

.ek-karte .zertifikat-chip__stapel img {
	width: 44px;
}

/* Ab 1181 px: Foto am Inhaltsraster ausgerichtet, Florian zwischen Text und
   Karte statt dahinter (Florian, 26.10.2026: "mein koerper sollte sich nicht
   ganz hinter der karte verstecken. sondern etwas mittiger sein"). Das Foto
   in voller Groesse (1232 x 780, Florian bei 55 % der Breite), darauf ein
   ovaler Lichtkegel um ihn, damit Wand und Flipchart im Dunkel bleiben. */
@media (min-width: 1181px) {
	.ek-foto {
		top: 70px;
		right: auto;
		bottom: auto;
		left: calc(max(2rem, 50% - 600px) + 85px);
		width: 1232px;
		height: 780px;
	}

	.ek-foto img {
		object-fit: fill;
		-webkit-mask-image: radial-gradient(ellipse 22% 62% at 55% 42%, #000 45%, rgba(0, 0, 0, 0.55) 72%, transparent 100%), linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 8%, #000 16%, #000 84%, transparent 100%);
		-webkit-mask-composite: source-in;
		mask-image: radial-gradient(ellipse 22% 62% at 55% 42%, #000 45%, rgba(0, 0, 0, 0.55) 72%, transparent 100%), linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 8%, #000 16%, #000 84%, transparent 100%);
		mask-composite: intersect;
	}

	.ek-raster {
		grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
	}
}

@media (max-width: 781px) {
	.wp-block-group.hero-shader.ek {
		display: block !important;
		min-height: 0;
		padding: 0 1.25rem 3rem 1.25rem !important;
	}

	.ek-foto {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: auto;
		height: 280px;
		margin: 76px -1.25rem 0 !important;
	}

	.ek-foto img {
		object-position: 68% 25%;
		filter: none;
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
	}

	.ek-raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
		min-height: 0;
		margin-top: -2rem !important;
	}

	.ek .hero-shader__title {
		font-size: clamp(2.1rem, 9.5vw, 2.8rem) !important;
	}

	.ek .ek-sub {
		margin-bottom: 1.5rem;
		font-size: 1.02rem;
	}

	.ek-vertrauen {
		margin-top: 1.5rem;
		font-size: 0.82rem;
	}

	.ek-karte {
		padding: 1.25rem;
	}
}