/* fx5_galerie — Slick-Buehne statt Lightbox (Spec 4.6).
   Farb- und Groessen-Tokens ausschliesslich aus css/project.css — keine Literale hier. */

section.fx5_galerie .fx5_kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 40px; }
section.fx5_galerie .fx5_topline { margin: 0 0 18px; }
section.fx5_galerie .fx5_untertitel { margin: 0; }

/* Hoehe waechst mit der Breite: bei 1328px Inhalt ergibt das Verhaeltnis exakt die
   540px des Entwurfs, darueber wird die Buehne hoeher statt flacher. Der Deckel
   verhindert, dass sie auf sehr breiten Schirmen den Viewport sprengt. */
/* Die Buehne traegt jetzt drei Hochformate nebeneinander. Ihre Hoehe ergibt sich aus
   der Slide-Breite (ein Drittel des Bandes) im Verhaeltnis 3:4 — deshalb keine feste
   Hoehe mehr, sondern eine, die mit der Bandbreite waechst. */
section.fx5_galerie .fx5_buehne { position: relative; background: transparent; border: 0; }

/* Hochformat 3:4 — aber gedeckelt. Bei wenigen Bildern gibt die Spaltenzahl auf
   breiten Schirmen nichts mehr her, die Kacheln wuerden sonst ueber 800px hoch.
   Der Deckel macht sie dort etwas weniger hochformatig; object-fit:cover faengt den
   Rest ab. */
section.fx5_galerie .fx5_slide {
	position: relative;
	aspect-ratio: 3 / 4;
}

/* Der Deckel gilt erst ab Tablet. Auf dem Handy steht ein einzelnes Bild, das darf
   und soll hochformatig bleiben. */
@media (min-width: 992px) {
	section.fx5_galerie .fx5_slide { max-height: clamp(400px, 32vw, 500px); }
}
/* slick-track legt die Slides nebeneinander; der Abstand kommt ueber padding, weil
   ein gap die von Slick berechneten Breiten verschieben wuerde. */
section.fx5_galerie .fx5_track .slick-slide > div { height: 100%; }
section.fx5_galerie .fx5_track .slick-slide { padding-inline: 2px; }
section.fx5_galerie .fx5_track .slick-list { margin-inline: -2px; }
/* FOUC-Guard: vor der Slick-Initialisierung stehen sonst alle Slides untereinander. */
section.fx5_galerie .fx5_track:not(.slick-initialized) .fx5_slide:nth-child(n+2) { display: none; }
section.fx5_galerie .fx5_bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--fx-tint); }

section.fx5_galerie .fx5_kreuz { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* Senkrechte Linie entfaellt: ueber drei nebeneinanderliegenden Bildern wirkt sie wirr. */
/* Waagerechte Linie entfaellt ebenfalls: ueber drei nebeneinanderliegenden Bildern
   liest sie sich als Naht statt als Fensterkreuz. Das Motiv bleibt im Hero und im
   CTA-Band, wo es auf einer durchgehenden Flaeche liegt. */

section.fx5_galerie .fx5_nav { position: absolute; right: 20px; top: 20px; display: flex; align-items: center; justify-content: center; gap: 1px; z-index: 3; }
/* Muss stehen: display:flex auf .fx5_nav schlaegt [hidden] sonst. */
section.fx5_galerie .fx5_nav[hidden] { display: none; }
section.fx5_galerie .fx5_pfeil { width: 48px; height: 48px; border: 0; background: var(--fx-overlay); color: var(--fx-white); display: flex; align-items: center; justify-content: center; cursor: pointer; }
section.fx5_galerie .fx5_pfeil:hover, section.fx5_galerie .fx5_pfeil:focus-visible { background: var(--fx-azure); }
section.fx5_galerie .fx5_zaehler { height: 48px; padding: 0 12px; background: var(--fx-overlay); color: var(--fx-white); display: flex; align-items: center; justify-content: center; }

section.fx5_galerie .fx5_bildunterschrift {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	margin: 0;
	padding: 10px 16px;
	background: var(--fx-navy);
	color: var(--fx-white);
}

@media (max-width: 991px) {
	section.fx5_galerie .fx5_kopf { display: block; }
	section.fx5_galerie .fx5_untertitel { margin-top: 16px; }
	section.fx5_galerie .fx5_kreuz_h { display: none; }
	section.fx5_galerie .fx5_kreuz_v { left: 40%; width: 3px; }
	section.fx5_galerie .fx5_nav { right: 12px; top: 12px; }
	section.fx5_galerie .fx5_pfeil, section.fx5_galerie .fx5_zaehler { background: var(--fx-overlay-strong); }
	section.fx5_galerie .fx5_bildunterschrift { padding: 9px 14px; }
}

@media (max-width: 575px) {
	section.fx5_galerie .fx5_bildunterschrift { max-width: 100%; line-height: 1.35; }
}

@media (max-width: 360px) {
	/* Keine Schriftgroesse hier — nur Umbruchverhalten, damit der H2-Text bei 280/330px
	   nicht ueber den Rand laeuft (Spec 6.17). */
	section.fx5_galerie .fx5_titel { overflow-wrap: anywhere; hyphens: auto; }
}

@media (max-width: 330px) {
	section.fx5_galerie .fx5_zaehler { padding: 0 8px; }
}

/* Am Anschlag deaktivierte Pfeile: sichtbar, aber erkennbar nicht klickbar. */
section.fx5_galerie .fx5_pfeil[disabled] {
	opacity: .35;
	cursor: default;
}
section.fx5_galerie .fx5_pfeil[disabled]:hover { background: var(--fx-navy); }