/* ============================================================
 * landfair/ab-hero — Frontend- und Editor-Styles
 * Präfix: ar-
 *
 * Heller Verlauf (Creme → Weiß), Text links, großes Bild rechts
 * randlos bis zum rechten Rand, links per mask weich ausgeblendet.
 * Handschriftliche Notiz oben rechts, Goldlinie unten als Deko.
 *
 * Farben: Jede Farbe ist eine CSS-Variable, die nur gesetzt wird,
 * wenn im Block eine Farbe gewählt wurde – sonst Theme bzw. Entwurf.
 * Überschrift: Farbe/Schrift/Gewicht kommen aus dem h1–h3-Stil des Themes.
 * ============================================================ */

.ar-hero {
	--ar-hoehe:       560px;
	--ar-hoehe-mobil: 340px;
	--ar-bildanteil:  60%;
	--ar-verlauf:     40%;
	--ar-pad-v:       72px;
	--ar-pad-h:       40px;
	--ar-textmax:     660px;
	--ar-titel:       4em;
	--ar-abst-dach:   14px;
	--ar-abst-titel:  24px;
	--ar-abst-button: 34px;
	--ar-btn-gap:     24px;
	--ar-notiz-gr:    1.6em;
	--ar-notiz-dreh:  -8deg;
	--ar-fokus:       50% 30%;

	/* Abgeleitete Farben mit Standardwerten */
	--ar-gold-eff:    var( --wp--preset--color--primary, #c9973f );
	--ar-btn-bg-eff:  var( --ar-btn-bg, var( --ar-gold-eff ) );
	--ar-btn-tx-eff:  var( --ar-btn-text, #14284b );
	--ar-btn2-bg-eff: var( --ar-btn2-bg, #fff );
	--ar-btn2-tx-eff: var( --ar-btn2-text, #14284b );
	--ar-btn2-rd-eff: var( --ar-btn2-rand, var( --ar-gold-eff ) );

	position: relative;
	width: 100%;
	min-height: var( --ar-hoehe );
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient( 100deg, var( --ar-bg, #f8f4ee ) 0%, var( --ar-bg2, #fff ) 55% );
	color: var( --ar-text, var( --wp--preset--color--contrast, currentColor ) );
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
}

.ar-hero *,
.ar-hero *::before,
.ar-hero *::after {
	box-sizing: border-box;
}

/* ---------- Bild (rechts, randlos) ---------- */
.ar-hero .ar-hero__bild {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var( --ar-bildanteil );
	z-index: 0;
	margin: 0;
}

.ar-hero .ar-hero__bild img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var( --ar-fokus );
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	/* weicher Übergang in den Hintergrund (links) */
	-webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 var( --ar-verlauf ) );
	mask-image: linear-gradient( 90deg, transparent 0%, #000 var( --ar-verlauf ) );
}

.ar-hero .ar-hero__bild-platzhalter {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2em;
	font-size: 0.875em;
	color: #6b6256;
	background: #efe7da;
}

/* ---------- Handschriftliche Notiz ---------- */
.ar-hero .ar-hero__notiz {
	position: absolute;
	top: 11%;
	right: 5%;
	z-index: 2;
	margin: 0;
	padding: 0;
	font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
	font-size: var( --ar-notiz-gr );
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	color: var( --ar-notiz, #3d4a63 );
	transform: rotate( var( --ar-notiz-dreh ) );
	transform-origin: center;
	pointer-events: none;
}

/* ---------- Goldlinie ---------- */
.ar-hero .ar-hero__linie {
	position: absolute;
	left: 18%;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 82%;
	height: 34%;
	display: block;
	color: var( --ar-linie, var( --ar-gold-eff ) );
	pointer-events: none;
}

/* ---------- Inhalt ---------- */
.ar-hero .ar-hero__inhalt {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var( --ar-max, none );
	margin: 0 auto;
	padding: var( --ar-pad-v ) var( --ar-pad-h );
}

.ar-hero .ar-hero__text-block {
	max-width: var( --ar-textmax );
}

.ar-hero .ar-hero__dachzeile {
	margin: 0 0 var( --ar-abst-dach );
	padding: 0;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --ar-dachzeile, var( --ar-gold-eff ) );
}

.ar-hero .ar-hero__titel {
	margin: 0 0 var( --ar-abst-titel );
	padding: 0;
	font-size: var( --ar-titel );
	line-height: 1.12;
	letter-spacing: -0.005em;
}

.ar-hero.ar-hero--headline-farbe .ar-hero__titel {
	color: var( --ar-headline );
}

.ar-hero[class*="-font-family"] .ar-hero__titel {
	font-family: inherit;
}

.ar-hero .ar-hero__akzent {
	font-style: italic;
	font-weight: inherit;
	color: var( --ar-akzent, var( --ar-gold-eff ) );
}

.ar-hero .ar-hero__text {
	margin: 0;
	padding: 0;
	max-width: 27em;
	font-size: 1.05em;
	line-height: 1.65;
	color: var( --ar-text, var( --wp--preset--color--contrast, currentColor ) );
}

/* ---------- Buttons ---------- */
.ar-hero .ar-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px var( --ar-btn-gap );
	margin-top: var( --ar-abst-button );
}

.ar-hero .ar-hero__btn,
.ar-hero .ar-hero__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	min-width: 14em;
	min-height: 0;
	margin: 0;
	padding: 1.05em 2em;
	font-family: inherit;
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	border-radius: 2px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ar-hero .ar-hero__btn--gefuellt,
.ar-hero .ar-hero__btn--gefuellt:visited {
	background: var( --ar-btn-bg-eff );
	color: var( --ar-btn-tx-eff );
	border: 1px solid var( --ar-btn-bg-eff );
}

.ar-hero .ar-hero__btn--gefuellt:hover,
.ar-hero .ar-hero__btn--gefuellt:focus {
	background: color-mix( in srgb, var( --ar-btn-bg-eff ) 86%, #000 );
	border-color: color-mix( in srgb, var( --ar-btn-bg-eff ) 86%, #000 );
	color: var( --ar-btn-tx-eff );
	text-decoration: none;
}

.ar-hero .ar-hero__btn--rahmen,
.ar-hero .ar-hero__btn--rahmen:visited {
	background: var( --ar-btn2-bg-eff );
	color: var( --ar-btn2-tx-eff );
	border: 1px solid var( --ar-btn2-rd-eff );
}

.ar-hero .ar-hero__btn--rahmen:hover,
.ar-hero .ar-hero__btn--rahmen:focus {
	background: color-mix( in srgb, var( --ar-btn2-rd-eff ) 12%, var( --ar-btn2-bg-eff ) );
	border-color: var( --ar-btn2-rd-eff );
	color: var( --ar-btn2-tx-eff );
	text-decoration: none;
}

.ar-hero .ar-hero__btn:focus-visible {
	outline: 2px solid var( --ar-btn2-tx-eff );
	outline-offset: 3px;
}

.ar-hero .ar-hero__btn-pfeil {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	transition: transform 0.2s ease;
}

.ar-hero .ar-hero__btn:hover .ar-hero__btn-pfeil {
	transform: translateX( 3px );
}

/* ---------- Responsive ---------- */
@media ( max-width: 1024px ) {
	.ar-hero .ar-hero__titel {
		font-size: calc( var( --ar-titel ) * 0.8 );
	}

	.ar-hero.ar-hero--mit-bild .ar-hero__text-block {
		max-width: min( var( --ar-textmax ), 52vw );
	}
}

@media ( max-width: 900px ) {
	.ar-hero {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		background: linear-gradient( 180deg, var( --ar-bg2, #fff ) 0%, var( --ar-bg, #f8f4ee ) 100% );
	}

	.ar-hero .ar-hero__bild {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		height: var( --ar-hoehe-mobil );
	}

	/* mobil blendet das Bild nach unten in den Hintergrund aus */
	.ar-hero .ar-hero__bild img {
		-webkit-mask-image: linear-gradient( 180deg, #000 72%, transparent 100% );
		mask-image: linear-gradient( 180deg, #000 72%, transparent 100% );
	}

	.ar-hero .ar-hero__notiz {
		top: 8%;
		right: 4%;
		font-size: calc( var( --ar-notiz-gr ) * 0.78 );
	}

	.ar-hero .ar-hero__linie {
		left: 0;
		width: 100%;
		height: 30%;
	}

	.ar-hero.ar-hero--mit-bild .ar-hero__text-block {
		max-width: var( --ar-textmax );
	}

	.ar-hero.ar-hero--mit-bild .ar-hero__inhalt {
		padding-top: calc( var( --ar-pad-v ) * 0.4 );
	}
}

@media ( max-width: 600px ) {
	.ar-hero .ar-hero__inhalt {
		padding-left: min( var( --ar-pad-h ), 20px );
		padding-right: min( var( --ar-pad-h ), 20px );
		padding-bottom: calc( var( --ar-pad-v ) * 0.7 );
	}

	.ar-hero .ar-hero__titel {
		font-size: calc( var( --ar-titel ) * 0.55 );
	}

	.ar-hero .ar-hero__dachzeile {
		font-size: 0.78em;
	}

	.ar-hero .ar-hero__text {
		font-size: 1em;
	}

	.ar-hero .ar-hero__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.ar-hero .ar-hero__btn {
		min-width: 0;
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ar-hero .ar-hero__btn,
	.ar-hero .ar-hero__btn-pfeil {
		transition: none;
	}

	.ar-hero .ar-hero__btn:hover .ar-hero__btn-pfeil {
		transform: none;
	}
}