/* fx8_hero — zweispaltig: Textspalte links, Slick-Galerie rechts.
   Dieses Modul darf den Inhalt nirgends beschneiden: der Overlay-Button ragt mit
   left:-64px absichtlich in die Textspalte hinein. */

section.fx8_hero .fx8_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }

section.fx8_hero .fx8_text { padding: clamp(48px, 8vh, 86px) 64px clamp(40px, 6.7vh, 72px) 56px; }
section.fx8_hero .fx8_topline { display: flex; align-items: center; gap: 16px; margin: 0 0 var(--fx-gap-block); }
section.fx8_hero .fx8_topline::after { content: ""; flex: 1; height: 1px; background: var(--fx-line); }
/* Der Claim ist ein <p>, die h1 ist der Kicker (SEO). Der Claim uebernimmt deshalb die
   h1-Typografie aus project.css ueber deren Tokens; der Kicker behaelt .fx-topline, die als
   Klasse die bare-h1-Regel ohnehin schlaegt. */
section.fx8_hero .fx8_titel {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--fx-fs-h1);
	line-height: var(--fx-lh-h1);
	letter-spacing: var(--fx-ls-h1);
	color: var(--fx-navy);
}
section.fx8_hero .fx8_titel_zeile2 { display: block; font-weight: 700; }
section.fx8_hero .fx8_lead { margin: var(--fx-gap-block) 0 0; }
section.fx8_hero .fx8_buttons { display: flex; gap: 16px; margin-top: var(--fx-gap-block); flex-wrap: wrap; }
section.fx8_hero .fx8_trust { margin: var(--fx-pad-block-gross) 0 0; padding-top: var(--fx-gap-block); border-top: 1px solid var(--fx-line); }
section.fx8_hero .fx8_weiter { display: inline-flex; align-items: center; gap: 8px; margin: var(--fx-gap-block-klein) 0 0; color: var(--fx-azure); text-decoration: none; }

/* 640px war fest verdrahtet — auf einem 750px hohen Schirm blieb fuer den Text
   daneben nichts uebrig. Jetzt zusaetzlich an der Bildschirmhoehe gedeckelt. */
section.fx8_hero .fx8_galerie { position: relative; min-height: min(640px, var(--fx-buehne-gross)); background: var(--fx-tint); }
/* Die Galerie ist ein gedehntes Grid-Kind und damit so hoch wie die Zeile. Die
   Folien muessen sie ausfuellen — mit einer eigenen festen Hoehe blieb unter dem
   Bild ein weisser Streifen stehen, sobald die Textspalte hoeher war. */
section.fx8_hero .fx8_slider,
section.fx8_hero .fx8_slider .slick-list,
section.fx8_hero .fx8_slider .slick-track,
section.fx8_hero .fx8_slide { height: 100%; }
section.fx8_hero .fx8_slider:not(.slick-initialized) .fx8_slide + .fx8_slide { display: none; }
section.fx8_hero .fx8_slide { position: relative; }
section.fx8_hero .fx8_bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/*
 * Ken Burns: das sichtbare Bild zoomt waehrend seiner Standzeit langsam heran
 * (7s linear laut Handoff, bei 6s Taktung also nie ganz zu Ende). Slick blendet
 * mit fade:true ueber, den Zoom traegt die .slick-active-Klasse.
 */
section.fx8_hero .fx8_slide .fx8_bild { transform: scale(1); transition: transform 7s linear; }
section.fx8_hero .fx8_slide.slick-active .fx8_bild { transform: scale(1.06); }

/* Der Rahmen muss schneiden, sonst laufen Zoom und Glanz ueber die Kante. */
section.fx8_hero .fx8_galerie { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	section.fx8_hero .fx8_slide .fx8_bild,
	section.fx8_hero .fx8_slide.slick-active .fx8_bild { transform: none; transition: none; }
}
section.fx8_hero .fx8_caption { position: absolute; right: 20px; bottom: 20px; z-index: 2; padding: 9px 14px; background: var(--fx-overlay-hero); color: var(--fx-white); }
section.fx8_hero .fx8_fenster { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
section.fx8_hero .fx8_fenster::before { content: ""; position: absolute; left: 44%; top: 0; bottom: 0; width: 4px; background: var(--fx-glare-70); }
section.fx8_hero .fx8_fenster::after { content: ""; position: absolute; inset-inline: 0; top: 54%; height: 4px; background: var(--fx-glare-55); }
section.fx8_hero .fx8_nav { position: absolute; right: 20px; top: 20px; display: flex; align-items: center; gap: 1px; z-index: 3; }
section.fx8_hero .fx8_pfeil { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: var(--fx-overlay); color: var(--fx-white); cursor: pointer; }
section.fx8_hero .fx8_pfeil:hover, section.fx8_hero .fx8_pfeil:focus-visible { background: var(--fx-azure); }
section.fx8_hero .fx8_zaehler { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 14px; background: var(--fx-overlay); color: var(--fx-white); }
section.fx8_hero .fx8_status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

@media (max-width: 991px) {
	section.fx8_hero .fx8_grid { grid-template-columns: minmax(0, 1fr); }
	section.fx8_hero .fx8_galerie { order: -1; min-height: 0; height: 330px; }
	section.fx8_hero .fx8_slide { height: 330px; }
	section.fx8_hero .fx8_text { padding: 30px 20px 34px; }
	section.fx8_hero .fx8_topline { margin-bottom: 16px; }
	section.fx8_hero .fx8_topline::after { display: none; }
	section.fx8_hero .fx8_lead { margin-top: 18px; max-width: none; }
	section.fx8_hero .fx8_buttons { flex-direction: column; gap: 12px; margin-top: 26px; }
	section.fx8_hero .fx8_trust { margin-top: 26px; padding-top: 20px; }
	section.fx8_hero .fx8_weiter { display: none; }
	section.fx8_hero .fx8_nav { right: 12px; top: 12px; }
	section.fx8_hero .fx8_pfeil, section.fx8_hero .fx8_zaehler { background: var(--fx-overlay-strong); }
	section.fx8_hero .fx8_zaehler { padding: 0 10px; }
	section.fx8_hero .fx8_caption { left: 0; right: auto; bottom: 0; width: 100%; }
	section.fx8_hero .fx8_fenster::before { left: 46%; width: 3px; }
	section.fx8_hero .fx8_fenster::after { top: 56%; height: 3px; }
}

@media (max-width: 359px) {
	section.fx8_hero .fx8_galerie, section.fx8_hero .fx8_slide { height: 260px; }
	section.fx8_hero .fx8_titel { hyphens: auto; overflow-wrap: anywhere; }
}