/* Favorent Hero – vollbreiter Kopfbereich mit Bild, Slideshow oder Video.
   Aufbau:  .favhero > .favhero-bg (Medien + Farbschleier) + .favhero-inner (Texte) + .favhero-extras */

/* Der Hero tritt aus der Inhaltsspalte heraus. clip statt hidden, damit sticky/fixed heil bleiben. */
html:has(.favhero) { overflow-x: clip; }

.favhero {
	position: relative;
	margin-left: calc(50% - 50vw);
	width: 100vw;
	min-height: var(--favhero-h, 90vh);
	display: flex;
	align-items: var(--favhero-valign, center);
	overflow: hidden;
	isolation: isolate;
	font-family: 'Lato', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	box-sizing: border-box;
}
.favhero * { box-sizing: border-box; }

/* ---------- Hintergrund ---------- */
.favhero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.favhero-media {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
/* Einzelbild und Slideshow teilen sich eine Ebene; Wechsel per Überblendung. */
.favhero-slide {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity var(--favhero-fade, 1.2s) ease;
}
.favhero-slide.is-on { opacity: 1; }

/* Farbschleier. Ohne Verlauf: gleichmäßige Fläche.
   Mit Verlauf: dunkelt dort ab, WO DER TEXT STEHT – der Rest des Bildes bleibt klar.
   Deshalb folgt die Verlaufsrichtung der Textausrichtung. */
.favhero-ov { position: absolute; inset: 0; background: var(--favhero-ov-color, rgba(16,38,44,.45)); }

/* Gemeinsam: leichte Abdunklung oben (Menü) und unten (Zusatzelemente). */
.favhero--gradient .favhero-ov {
	background:
		linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 24%),
		linear-gradient(0deg,   rgba(0,0,0,.30) 0%, transparent 20%);
}
.favhero--gradient.favhero--g-left .favhero-ov {
	background:
		linear-gradient(90deg, var(--favhero-ov-color, rgba(16,38,44,.45)) 0%,
		                        var(--favhero-ov-color, rgba(16,38,44,.45)) 40%, transparent 80%),
		linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 24%),
		linear-gradient(0deg,   rgba(0,0,0,.30) 0%, transparent 20%);
}
.favhero--gradient.favhero--g-right .favhero-ov {
	background:
		linear-gradient(270deg, var(--favhero-ov-color, rgba(16,38,44,.45)) 0%,
		                         var(--favhero-ov-color, rgba(16,38,44,.45)) 40%, transparent 80%),
		linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 24%),
		linear-gradient(0deg,   rgba(0,0,0,.30) 0%, transparent 20%);
}
.favhero--gradient.favhero--g-center .favhero-ov {
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, var(--favhero-ov-color, rgba(16,38,44,.45)) 0%,
		                 var(--favhero-ov-color, rgba(16,38,44,.45)) 45%, transparent 85%),
		linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 24%),
		linear-gradient(0deg,   rgba(0,0,0,.30) 0%, transparent 20%);
}
/* Auf schmalen Schirmen steht der Text ueber der ganzen Breite → Flaeche statt Seitenverlauf. */
@media (max-width: 780px) {
	.favhero--gradient .favhero-ov,
	.favhero--gradient.favhero--g-left .favhero-ov,
	.favhero--gradient.favhero--g-right .favhero-ov,
	.favhero--gradient.favhero--g-center .favhero-ov {
		background:
			linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 22%),
			var(--favhero-ov-color, rgba(16,38,44,.45));
	}
}

/* ---------- Inhalt ---------- */
.favhero-inner {
	position: relative; z-index: 1;
	width: 100%;
	max-width: var(--favhero-max, 1140px);
	margin: 0 auto;
	padding: clamp(60px, 9vw, 130px) 20px;
	display: flex;
	flex-direction: column;
	align-items: var(--favhero-align, flex-start);
	text-align: var(--favhero-text, left);
}
.favhero-text { max-width: var(--favhero-textmax, 720px); }

.favhero-h {
	margin: 0;
	font-size: var(--favhero-hsize, 88px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.005em;
	color: var(--favhero-hcolor, #F5F1E8);
	text-transform: uppercase;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(0,0,0,.28);
}
.favhero--normalcase .favhero-h { text-transform: none; }

.favhero-s {
	margin: 18px 0 0;
	font-size: var(--favhero-ssize, 28px);
	font-weight: 400;
	line-height: 1.35;
	color: var(--favhero-scolor, #fff);
	text-shadow: 0 1px 12px rgba(0,0,0,.30);
}

.favhero-cta {
	display: inline-block;
	margin-top: 30px;
	padding: var(--favhero-btn-pad, 13px 46px);
	border-radius: var(--favhero-btn-radius, 6px);
	background: var(--favhero-btn-bg, #F5A623);
	color: var(--favhero-btn-color, #3a2600);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease;
	box-shadow: 0 6px 22px rgba(0,0,0,.22);
}
.favhero-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.favhero-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Zusatzelemente ---------- */
.favhero-extras { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.favhero-slot {
	position: absolute;
	display: flex; flex-wrap: wrap; gap: 10px;
	max-width: min(46vw, 520px);
	pointer-events: auto;
}
.favhero-slot--tl { top: clamp(18px, 4vh, 46px); left: clamp(20px, 5vw, 64px); }
.favhero-slot--tr { top: clamp(18px, 4vh, 46px); right: clamp(20px, 5vw, 64px); justify-content: flex-end; }
.favhero-slot--bl { bottom: clamp(18px, 4vh, 46px); left: clamp(20px, 5vw, 64px); }
.favhero-slot--br { bottom: clamp(18px, 4vh, 46px); right: clamp(20px, 5vw, 64px); justify-content: flex-end; }

.favhero-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.90);
	color: #1E2A2E;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14.5px; font-weight: 700;
	box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
@supports (backdrop-filter: blur(6px)) {
	.favhero-badge { background: rgba(255,255,255,.80); backdrop-filter: blur(7px); }
}
.favhero-stat {
	display: flex; flex-direction: column; gap: 2px;
	background: rgba(255,255,255,.88);
	border-radius: 12px; padding: 12px 18px;
	box-shadow: 0 6px 22px rgba(0,0,0,.20);
}
.favhero-stat-v { font-size: 24px; font-weight: 800; color: #44909C; line-height: 1.1; }
.favhero-stat-l { font-size: 13px; color: #64777C; }
.favhero-note { color: #fff; font-size: 13.5px; opacity: .85; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* Eingebettete Elementor-Vorlage im Hero */
.favhero-tpl { position: relative; z-index: 2; width: 100%; }
.favhero-tpl--above { margin-bottom: 22px; }
.favhero-tpl--below { margin-top: 26px; }

/* ---------- Ladeanzeige / Hinweise im Editor ---------- */
.favhero-config {
	padding: 40px 20px; text-align: center; color: #7A7A7A;
	border: 1px dashed #e6e6e6; border-radius: 12px; background: #f5f7f8;
}

/* ---------- Mobil ---------- */
@media (max-width: 1024px) {
	.favhero { min-height: var(--favhero-h-mob, 78vh); }
	.favhero-h { font-size: var(--favhero-hsize-mob, 46px); }
	.favhero-s { font-size: var(--favhero-ssize-mob, 20px); }
	.favhero-slot { max-width: 70vw; }
}
@media (max-width: 620px) {
	.favhero-inner { padding: clamp(48px, 14vw, 90px) 18px; }
	.favhero-h { font-size: var(--favhero-hsize-mob, 36px); }
	.favhero-s { font-size: var(--favhero-ssize-mob, 18px); margin-top: 12px; }
	.favhero-cta { padding: 12px 30px; width: 100%; text-align: center; }
	.favhero-slot--tl, .favhero-slot--tr, .favhero-slot--bl, .favhero-slot--br { max-width: calc(100vw - 36px); }
	/* Auf kleinen Schirmen nur die untere Reihe zeigen – oben sitzt meist das Menü. */
	.favhero-slot--tl, .favhero-slot--tr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.favhero-slide { transition: none; }
	.favhero-cta { transition: none; }
}

/* ==================== Effekte ====================
   Schrift, Button und Elemente ziehen nacheinander von unten ein; „Kino" laesst
   zusaetzlich das Bild langsam heranfahren und die Headline weich aufblenden.
   Wer im System weniger Bewegung eingestellt hat, sieht alles sofort. */
.favhero--fx .favhero-h,
.favhero--fx .favhero-s,
.favhero--fx .favhero-cta,
.favhero--fx .favhero-tpl,
.favhero--fx .favhero-slot > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.3,1);
	will-change: opacity, transform;
}
.favhero--fx.is-in .favhero-h,
.favhero--fx.is-in .favhero-s,
.favhero--fx.is-in .favhero-cta,
.favhero--fx.is-in .favhero-tpl,
.favhero--fx.is-in .favhero-slot > * { opacity: 1; transform: none; }

.favhero--fx.is-in .favhero-h   { transition-delay: .08s; }
.favhero--fx.is-in .favhero-s   { transition-delay: .24s; }
.favhero--fx.is-in .favhero-cta { transition-delay: .40s; }
.favhero--fx.is-in .favhero-tpl { transition-delay: .48s; }
.favhero--fx.is-in .favhero-slot > *:nth-child(1) { transition-delay: .52s; }
.favhero--fx.is-in .favhero-slot > *:nth-child(2) { transition-delay: .62s; }
.favhero--fx.is-in .favhero-slot > *:nth-child(3) { transition-delay: .72s; }
.favhero--fx.is-in .favhero-slot > *:nth-child(4) { transition-delay: .82s; }
.favhero--fx.is-in .favhero-slot > *:nth-child(5) { transition-delay: .92s; }

/* Kino: langsame Bildfahrt + weiches Aufblenden der Headline */
.favhero--fx-kino .favhero-slide.is-on { animation: favhero-kenburns 22s ease-out forwards; }
@keyframes favhero-kenburns { from { transform: scale(1.05); } to { transform: scale(1.14); } }
.favhero--fx-kino .favhero-h { filter: blur(7px); }
.favhero--fx-kino.is-in .favhero-h {
	filter: blur(0);
	transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1), filter .9s ease;
}


/* Notbremse: Der Hero darf nie stumm bleiben, nur weil das Skript ausbleibt.
   Diese Animation braucht kein JavaScript und setzt den Endzustand nach 2,5 s.
   Laeuft das Skript normal, hat der Uebergang laengst gegriffen und die
   Animation setzt dieselben Werte noch einmal - sichtbar aendert sich nichts. */
.favhero--fx .favhero-h,
.favhero--fx .favhero-s,
.favhero--fx .favhero-cta,
.favhero--fx .favhero-tpl,
.favhero--fx .favhero-slot > * {
	animation: favhero-notbremse 1ms linear 2.5s forwards;
}
.favhero--fx.is-in .favhero-h,
.favhero--fx.is-in .favhero-s,
.favhero--fx.is-in .favhero-cta,
.favhero--fx.is-in .favhero-tpl,
.favhero--fx.is-in .favhero-slot > * { animation: none; }
@keyframes favhero-notbremse { to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
	.favhero--fx .favhero-h,
	.favhero--fx .favhero-s,
	.favhero--fx .favhero-cta,
	.favhero--fx .favhero-tpl,
	.favhero--fx .favhero-slot > * { opacity: 1; transform: none; transition: none; filter: none; animation: none; }
	.favhero--fx-kino .favhero-slide.is-on { animation: none; }
}