/* ============================================================
 * landfair/ab-bildtext — Frontend- und Editor-Styles
 * Augenblick Optik · Präfix: ai-
 *
 * Bild + Text. Bildstil „Karte“ (Radius, Schatten, innerhalb der
 * Gesamtbreite) oder „randlos“ (bündig bis zum Rand, volle Höhe,
 * weicher Verlauf in die Hintergrundfarbe). Bild links oder rechts.
 * Mobil: Bild oben, Text darunter.
 *
 * Farben: CSS-Variablen, nur gesetzt, wenn im Block gewählt.
 * Standard: Theme; Dachzeile, Akzent, Button, Icons in Augenblick-Gold.
 * ============================================================ */

.ai-bildtext {
	--ai-anteil:      54%;
	--ai-hoehe:       460px;
	--ai-hoehe-mobil: 280px;
	--ai-radius:      12px;
	--ai-verlauf:     40%;
	--ai-play:        64px;
	--ai-pad-v:       64px;
	--ai-pad-h:       24px;
	--ai-gap:         64px;
	--ai-textmax:     540px;
	--ai-titel:       2.6em;
	--ai-fokus:       50% 50%;

	/* Augenblick-Farben (Fallbacks laut Entwurf) */
	--ai-gold-eff:    var( --ai-akzent, #c9973f );
	--ai-bg-eff:      var( --ai-bg, var( --wp--preset--color--base, #ffffff ) );
	--ai-text-eff:    var( --ai-text, var( --wp--preset--color--contrast, currentColor ) );
	--ai-btn-bg-eff:  var( --ai-btn-bg, #c9973f );
	--ai-btn-tx-eff:  var( --ai-btn-text, #14284b );
	--ai-icon-eff:    var( --ai-icon, #c9973f );

	/* Textkante bei „randlos“ an der Gesamtbreite ausrichten */
	--ai-rand: max( var( --ai-pad-h ), calc( ( 100cqw - var( --ai-max, 100cqw ) ) / 2 + var( --ai-pad-h ) ) );

	container-type: inline-size;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: var( --ai-pad-v ) 0;
	box-sizing: border-box;
	background: var( --ai-bg-eff );
	color: var( --ai-text-eff );
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
}

.ai-bildtext *,
.ai-bildtext *::before,
.ai-bildtext *::after {
	box-sizing: border-box;
}

/* ---------- Raster ---------- */
.ai-bildtext .ai-bildtext__raster {
	display: grid;
	grid-template-columns: var( --ai-anteil ) minmax( 0, 1fr );
	column-gap: var( --ai-gap );
	align-items: stretch;
	width: 100%;
	max-width: var( --ai-max, none );
	margin: 0 auto;
	padding: 0 var( --ai-pad-h );
}

.ai-bildtext.ai-bildtext--bild-rechts .ai-bildtext__raster {
	grid-template-columns: minmax( 0, 1fr ) var( --ai-anteil );
}

.ai-bildtext.ai-bildtext--bild-rechts .ai-bildtext__bild {
	order: 2;
}

/* ---------- Bild ---------- */
.ai-bildtext .ai-bildtext__bild {
	position: relative;
	min-height: var( --ai-hoehe );
	margin: 0;
	overflow: hidden;
	border-radius: var( --ai-radius );
	background: #f8f4ee;
	isolation: isolate;
}

.ai-bildtext.ai-bildtext--karte.ai-bildtext--schatten .ai-bildtext__bild {
	box-shadow: 0 18px 40px -18px rgba( 20, 40, 75, 0.35 ), 0 4px 12px rgba( 20, 40, 75, 0.08 );
}

.ai-bildtext .ai-bildtext__bild img,
.ai-bildtext .ai-bildtext__bild iframe,
.ai-bildtext .ai-bildtext__bild video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var( --ai-fokus );
	display: block;
}

.ai-bildtext .ai-bildtext__bild iframe,
.ai-bildtext .ai-bildtext__bild video {
	z-index: 3;
	background: #000;
}

.ai-bildtext .ai-bildtext__bild-platzhalter {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85em;
	color: #14284b;
}

/* ---------- Play-Button ---------- */
.ai-bildtext .ai-bildtext__play,
.ai-bildtext .ai-bildtext__play:hover,
.ai-bildtext .ai-bildtext__play:focus,
.ai-bildtext .ai-bildtext__play:visited {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --ai-play );
	height: var( --ai-play );
	min-height: 0;
	margin: calc( var( --ai-play ) / -2 ) 0 0 calc( var( --ai-play ) / -2 );
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --ai-play-bg, rgba( 255, 255, 255, 0.92 ) );
	color: var( --ai-play-icon, #c9973f );
	box-shadow: 0 8px 24px rgba( 20, 40, 75, 0.22 );
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.ai-bildtext span.ai-bildtext__play {
	cursor: default;
}

.ai-bildtext .ai-bildtext__play-svg {
	width: 42%;
	height: 42%;
	margin-left: 6%;
}

.ai-bildtext a.ai-bildtext__play:hover,
.ai-bildtext button.ai-bildtext__play:hover {
	transform: scale( 1.07 );
}

.ai-bildtext a.ai-bildtext__play:focus-visible,
.ai-bildtext button.ai-bildtext__play:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

/* Video läuft: Overlays ausblenden */
.ai-bildtext .ai-bildtext__bild--video .ai-bildtext__play,
.ai-bildtext .ai-bildtext__bild--video .ai-bildtext__badge {
	display: none;
}

/* ---------- Badge ---------- */
.ai-bildtext .ai-bildtext__badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.85em;
	max-width: calc( 100% - 48px );
	padding: 0.75em 1.4em 0.75em 0.8em;
	border-radius: 8px;
	background: var( --ai-badge-bg, rgba( 255, 255, 255, 0.94 ) );
	color: var( --ai-badge-text, #14284b );
	box-shadow: 0 8px 24px rgba( 20, 40, 75, 0.14 );
	font-size: 0.8em;
	line-height: 1.45;
}

.ai-bildtext .ai-bildtext__badge-icon,
.ai-bildtext .ai-bildtext__feature-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	background: var( --ai-icon-bg, #f8f4ee );
	color: var( --ai-icon-eff );
}

.ai-bildtext .ai-bildtext__icon-svg {
	width: 52%;
	height: 52%;
}

/* ---------- Text ---------- */
.ai-bildtext .ai-bildtext__inhalt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.ai-bildtext.ai-bildtext--valign-start .ai-bildtext__inhalt { justify-content: flex-start; }
.ai-bildtext.ai-bildtext--valign-end .ai-bildtext__inhalt   { justify-content: flex-end; }

.ai-bildtext .ai-bildtext__text-block {
	width: 100%;
	max-width: var( --ai-textmax );
}

.ai-bildtext .ai-bildtext__dachzeile {
	margin: 0 0 12px;
	padding: 0;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --ai-dachzeile, #c9973f );
}

/* Überschrift: Schrift/Gewicht/Farbe aus dem Theme */
.ai-bildtext .ai-bildtext__titel {
	margin: 0 0 20px;
	padding: 0;
	font-size: var( --ai-titel );
	line-height: 1.12;
	text-transform: none;
	letter-spacing: normal;
}

.ai-bildtext.ai-bildtext--headline-farbe .ai-bildtext__titel {
	color: var( --ai-headline );
}

.ai-bildtext[class*="-font-family"] .ai-bildtext__titel {
	font-family: inherit;
}

.ai-bildtext .ai-bildtext__akzent {
	font-family: inherit;
	font-style: italic;
	font-weight: inherit;
	color: var( --ai-gold-eff );
}

.ai-bildtext .ai-bildtext__text {
	margin: 0;
	padding: 0;
	font-size: 0.94em;
	line-height: 1.65;
	color: var( --ai-text-eff );
}

/* ---------- Button ---------- */
.ai-bildtext .ai-bildtext__aktion {
	margin: 28px 0 0;
	padding: 0;
}

.ai-bildtext .ai-bildtext__btn,
.ai-bildtext .ai-bildtext__btn:hover,
.ai-bildtext .ai-bildtext__btn:focus,
.ai-bildtext .ai-bildtext__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	margin: 0;
	min-height: 0;
	padding: 1em 1.9em;
	border: 1px solid var( --ai-btn-bg-eff );
	border-radius: 2px;
	background: var( --ai-btn-bg-eff );
	color: var( --ai-btn-tx-eff );
	font-family: inherit;
	font-size: 0.86em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ai-bildtext .ai-bildtext__btn--outline,
.ai-bildtext .ai-bildtext__btn--outline:visited {
	background: transparent;
	color: var( --ai-btn-text, var( --ai-btn-bg-eff ) );
}

.ai-bildtext a.ai-bildtext__btn:hover,
.ai-bildtext a.ai-bildtext__btn:focus-visible {
	background: color-mix( in srgb, var( --ai-btn-bg-eff ) 86%, #000 );
	color: var( --ai-btn-tx-eff );
}

.ai-bildtext a.ai-bildtext__btn--outline:hover,
.ai-bildtext a.ai-bildtext__btn--outline:focus-visible {
	background: var( --ai-btn-bg-eff );
	color: var( --ai-btn-tx-eff );
}

.ai-bildtext a.ai-bildtext__btn:focus-visible {
	outline: 2px solid var( --ai-btn-bg-eff );
	outline-offset: 3px;
}

.ai-bildtext .ai-bildtext__pfeil {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	transition: transform 0.2s ease;
}

.ai-bildtext a:hover .ai-bildtext__pfeil {
	transform: translateX( 3px );
}

/* ---------- Merkmale ---------- */
.ai-bildtext .ai-bildtext__features {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax( 0, 1fr );
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.ai-bildtext .ai-bildtext__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7em;
	margin: 0;
	padding: 0.2em 0.9em;
	list-style: none;
	text-align: center;
	border-left: 1px solid var( --ai-linien, #e8dfd2 );
}

.ai-bildtext .ai-bildtext__feature:first-child {
	border-left: 0;
}

.ai-bildtext .ai-bildtext__feature::before,
.ai-bildtext .ai-bildtext__feature::marker {
	content: none;
}

.ai-bildtext:not( .ai-bildtext--icon-kreis ) .ai-bildtext__feature-icon {
	background: transparent;
}

.ai-bildtext .ai-bildtext__feature-text {
	font-size: 0.74em;
	font-weight: 600;
	line-height: 1.35;
	color: var( --ai-feature-text, var( --ai-text-eff ) );
}

/* ---------- Randlos: bündig, volle Höhe, Verlauf ---------- */
.ai-bildtext.ai-bildtext--randlos {
	padding-top: 0;
	padding-bottom: 0;
}

.ai-bildtext.ai-bildtext--randlos .ai-bildtext__raster {
	max-width: none;
	padding: 0;
	column-gap: 0;
}

.ai-bildtext.ai-bildtext--randlos .ai-bildtext__bild {
	border-radius: 0;
	box-shadow: none;
}

.ai-bildtext.ai-bildtext--randlos .ai-bildtext__inhalt {
	padding: var( --ai-pad-v ) var( --ai-rand ) var( --ai-pad-v ) var( --ai-gap );
}

.ai-bildtext.ai-bildtext--randlos.ai-bildtext--bild-rechts .ai-bildtext__inhalt {
	padding-left: var( --ai-rand );
	padding-right: var( --ai-gap );
}

.ai-bildtext.ai-bildtext--randlos.ai-bildtext--verlauf .ai-bildtext__bild::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -1px;
	z-index: 1;
	width: var( --ai-verlauf );
	background: linear-gradient( to right, transparent, var( --ai-bg-eff ) );
	pointer-events: none;
}

.ai-bildtext.ai-bildtext--randlos.ai-bildtext--verlauf.ai-bildtext--bild-rechts .ai-bildtext__bild::after {
	right: auto;
	left: -1px;
	background: linear-gradient( to left, transparent, var( --ai-bg-eff ) );
}

/* ---------- Responsive ---------- */
@media ( max-width: 1024px ) {
	.ai-bildtext .ai-bildtext__raster {
		column-gap: min( var( --ai-gap ), 40px );
	}

	.ai-bildtext .ai-bildtext__titel {
		font-size: calc( var( --ai-titel ) * 0.88 );
	}

	.ai-bildtext.ai-bildtext--randlos .ai-bildtext__inhalt {
		padding-left: min( var( --ai-gap ), 40px );
	}

	.ai-bildtext.ai-bildtext--randlos.ai-bildtext--bild-rechts .ai-bildtext__inhalt {
		padding-left: var( --ai-rand );
		padding-right: min( var( --ai-gap ), 40px );
	}
}

@media ( max-width: 900px ) {
	.ai-bildtext .ai-bildtext__raster,
	.ai-bildtext.ai-bildtext--bild-rechts .ai-bildtext__raster {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 36px;
	}

	/* Mobil immer Bild oben */
	.ai-bildtext.ai-bildtext--bild-rechts .ai-bildtext__bild {
		order: 0;
	}

	.ai-bildtext .ai-bildtext__bild {
		min-height: var( --ai-hoehe-mobil );
	}

	.ai-bildtext .ai-bildtext__text-block {
		max-width: none;
	}

	.ai-bildtext.ai-bildtext--randlos .ai-bildtext__raster {
		row-gap: 0;
	}

	.ai-bildtext.ai-bildtext--randlos .ai-bildtext__inhalt,
	.ai-bildtext.ai-bildtext--randlos.ai-bildtext--bild-rechts .ai-bildtext__inhalt {
		padding: 28px var( --ai-pad-h ) min( var( --ai-pad-v ), 48px );
	}

	/* Verlauf mobil nach unten in die Fläche */
	.ai-bildtext.ai-bildtext--randlos.ai-bildtext--verlauf .ai-bildtext__bild::after,
	.ai-bildtext.ai-bildtext--randlos.ai-bildtext--verlauf.ai-bildtext--bild-rechts .ai-bildtext__bild::after {
		top: auto;
		left: 0;
		right: 0;
		bottom: -1px;
		width: auto;
		height: var( --ai-verlauf );
		background: linear-gradient( to bottom, transparent, var( --ai-bg-eff ) );
	}
}

@media ( max-width: 600px ) {
	.ai-bildtext .ai-bildtext__titel {
		font-size: calc( var( --ai-titel ) * 0.76 );
	}

	.ai-bildtext .ai-bildtext__badge {
		left: 14px;
		bottom: 14px;
		max-width: calc( 100% - 28px );
		font-size: 0.72em;
	}

	.ai-bildtext .ai-bildtext__play,
	.ai-bildtext .ai-bildtext__play:hover,
	.ai-bildtext .ai-bildtext__play:focus {
		width: calc( var( --ai-play ) * 0.8 );
		height: calc( var( --ai-play ) * 0.8 );
		margin: calc( var( --ai-play ) * -0.4 ) 0 0 calc( var( --ai-play ) * -0.4 );
	}

	.ai-bildtext .ai-bildtext__feature {
		padding: 0.2em 0.4em;
	}

	.ai-bildtext .ai-bildtext__feature-text {
		font-size: 0.7em;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ai-bildtext .ai-bildtext__btn,
	.ai-bildtext .ai-bildtext__pfeil,
	.ai-bildtext .ai-bildtext__play {
		transition: none;
	}

	.ai-bildtext a:hover .ai-bildtext__pfeil,
	.ai-bildtext a.ai-bildtext__play:hover,
	.ai-bildtext button.ai-bildtext__play:hover {
		transform: none;
	}
}