/**
 * Block: acf/spnkt-slider – Bild-Slider mit CSS-Crossfade
 *
 * Wird via wp_enqueue_block_style() (inc/enqueue.php, Stufe 3) nur geladen,
 * wenn der Block auf der Seite vorkommt.
 *
 * Reiner CSS-Crossfade, kein JS. Alle Bilder liegen gestapelt übereinander;
 * spätere <li> liegen in der Stapelreihenfolge oben. Jedes Bild blendet zu
 * seiner Zeit ein und BLEIBT sichtbar (opacity 1), bis das nächste Bild
 * vollständig darübergeblendet hat — dadurch entsteht nie eine Lücke, in der
 * die Seiten-Hintergrundfarbe durchscheint. Standzeit pro Bild: 5 s
 * (Zyklusdauer = Anzahl × 5 s, gesetzt als --spnkt-slider-dauer im render.php).
 *
 * Desktop-first (Projekt-Konvention): Basis = Desktop, Anpassungen via
 * max-width-Queries.
 *
 * Barrierefreiheit: Die Bilder sind dekorativ (aria-hidden). Bei
 * prefers-reduced-motion wird die Animation abgeschaltet und nur das erste
 * Bild statisch gezeigt.
 */

.spnkt-slider {
	position: relative;
	overflow: hidden;
	/*
	 * Höhe deckungsgleich mit dem Siteframe (layout.css): der Slider reicht
	 * exakt bis zur Rahmen-Unterkante, damit die nächste Sektion nie darunter
	 * durchblitzt. Offset je Breakpoint identisch zum Frame. dvh statt vh, damit
	 * die Mobile-Browser-Chrome korrekt berücksichtigt wird (vh-Fallback davor).
	 */
	min-height: calc(100dvh - 50px);
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

/*
 * Verdunklung: weich abgestufter («eased») Verlauf von unten (dunkel) nach oben
 * (transparent). Blendet nur den unteren Bildbereich ab, wo Titel/Text liegen,
 * damit der gelbe Text auf hellen Bildern lesbar bleibt (WCAG-Kontrast); der
 * obere Bildbereich bleibt unverfälscht. Liegt über den Bildern (z-index bis
 * zur Bild-Anzahl), aber unter dem Inhalt (z-index 11). Die vielen Stops
 * vermeiden sichtbare Farbbänder (Banding).
 */
.spnkt-slider::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	background: linear-gradient(
		to top,
		hsl(0 0% 0% / 0.7) 0%,
		hsl(0 0% 0% / 0.685) 8.1%,
		hsl(0 0% 0% / 0.647) 15.5%,
		hsl(0 0% 0% / 0.59) 22.5%,
		hsl(0 0% 0% / 0.518) 29%,
		hsl(0 0% 0% / 0.435) 35.3%,
		hsl(0 0% 0% / 0.348) 41.2%,
		hsl(0 0% 0% / 0.261) 47.1%,
		hsl(0 0% 0% / 0.18) 53%,
		hsl(0 0% 0% / 0.11) 59%,
		hsl(0 0% 0% / 0.056) 65.2%,
		hsl(0 0% 0% / 0.021) 71.9%,
		hsl(0 0% 0% / 0.005) 79.5%,
		hsl(0 0% 0% / 0) 100%
	);
}

/* Bild-Stack */
.spnkt-slider__bilder {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 0;
}

.spnkt-slider__bild {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	/*
	 * Timing-Modell (lückenlos, weicher Loop, kein harter erster Durchgang):
	 *
	 * ALLE Bilder — inklusive Bild 1 — nutzen denselben Keyframe und werden nur
	 * über --spnkt-slider-delay (0 s, 5 s, 10 s … aus render.php) gestaffelt.
	 * Der Keyframe hält das Bild die meiste Zeit auf opacity 1 und blendet es
	 * nur am ENDE seines Slots über 3 s aus (auf das darunterliegende nächste
	 * Bild). Da immer das jeweils "untere" Bild noch voll deckt, während das
	 * obere ausblendet, scheint nie die Seitenfarbe durch — und der Loop vom
	 * letzten zum ersten Bild ist derselbe weiche Crossfade wie alle anderen.
	 *
	 * Startzustand: Bild 1 (delay 0 s) beginnt bei Keyframe 0 % = opacity 1,
	 * alle anderen warten dank positivem Delay auf ihrem Basiswert opacity 0.
	 * Dadurch ist schon der allererste Frame korrekt (nur Bild 1 sichtbar) —
	 * kein harter Stapel beim ersten Durchgang.
	 *
	 * Stapelreihenfolge: Bild N liegt über Bild N−1 (spätere <li> = höher). Für
	 * einen sauberen Crossfade muss das AUSBLENDENDE Bild jeweils ÜBER dem
	 * einblendenden liegen — deshalb dreht render.php die z-index-Reihenfolge um
	 * (frühes Bild = höher), siehe --spnkt-slider-z dort.
	 *
	 * Keyframe je Bild-Anzahl, da Keyframe-Stops kein calc() erlauben.
	 */
	animation-duration: var(--spnkt-slider-dauer, 30s);
	animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
	animation-iteration-count: infinite;
	animation-delay: var(--spnkt-slider-delay, 0s);
	z-index: var(--spnkt-slider-z, 1);
}

/*
 * Bild 1 ist beim Start sofort sichtbar (Keyframe startet auf opacity 1) und
 * bekommt einen eigenen Keyframe (…-base): Es blendet in seinem Slot aus wie
 * jedes andere Bild, aber am Zyklus-ENDE wieder ein — synchron zum Ausblenden
 * des letzten Bildes. Dadurch ist der Loop letztes-Bild → Bild 1 derselbe
 * weiche Crossfade wie alle übrigen Übergänge (kein harter Cut).
 */
.spnkt-slider__bild:first-child {
	opacity: 1;
}

.spnkt-slider--count-6 .spnkt-slider__bild:first-child {
	animation-name: spnkt-slider-base-6;
}

.spnkt-slider--count-5 .spnkt-slider__bild:first-child {
	animation-name: spnkt-slider-base-5;
}

/*
 * Bild füllt die Slide vollständig. Imagify wickelt im WebP-<picture>-Modus
 * jedes <img> in ein zusätzliches <picture> (display:inline, spannt keine Höhe
 * auf) — daher muss auch das <picture> die volle Fläche einnehmen, sonst
 * kollabiert das Bild. Beide Fälle (<picture> vorhanden oder nicht) abgedeckt.
 */
.spnkt-slider__bild picture {
	display: block;
	position: absolute;
	inset: 0;
}

.spnkt-slider__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Fade-Fenster: Bild ist opacity 1 für seinen Slot (100/Anzahl %) und blendet
 * dann über 3 s aus — auf das nächste Bild, das darunter bereits voll deckt.
 * Danach bleibt es 0 bis zum nächsten Zyklus. Ein Keyframe je Bild-Anzahl.
 */

/* 6 Bilder: Zyklus 30 s. Slot 16,7 %, Fade 3 s = 10 %. */
.spnkt-slider--count-6 .spnkt-slider__bild {
	animation-name: spnkt-slider-fade-6;
}

@keyframes spnkt-slider-fade-6 {
	0% {
		opacity: 1;
	}
	16.7% {
		opacity: 1;
	}
	26.7% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* Bild 1 (6er): wie fade-6, aber am Zyklusende (90→100 %) wieder einblenden. */
@keyframes spnkt-slider-base-6 {
	0% {
		opacity: 1;
	}
	16.7% {
		opacity: 1;
	}
	26.7% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 5 Bilder: Zyklus 25 s. Slot 20 %, Fade 3 s = 12 %. */
.spnkt-slider--count-5 .spnkt-slider__bild {
	animation-name: spnkt-slider-fade-5;
}

@keyframes spnkt-slider-fade-5 {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	32% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* Bild 1 (5er): wie fade-5, aber am Zyklusende (88→100 %) wieder einblenden. */
@keyframes spnkt-slider-base-5 {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	32% {
		opacity: 0;
	}
	88% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*
 * Fallback für andere Anzahlen (2–4): Bild hält ~40 % und blendet dann aus.
 * Deckt Redaktions-Zwischenstände ab, ohne Lücke zur Seitenfarbe.
 */
.spnkt-slider__bild {
	animation-name: spnkt-slider-fade-default;
}

/*
 * Sonderfall EIN Bild: kein Slider, sondern ein statisches Standbild. Ohne
 * diese Regel würde der Fallback-Keyframe das einzige Bild ausblenden und
 * danach hart wieder einblenden — ein sichtbares Flackern ohne jeden Zweck.
 */
.spnkt-slider--count-1 .spnkt-slider__bild {
	animation: none;
	opacity: 1;
}

@keyframes spnkt-slider-fade-default {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* Titel-/Text-Inhalt: unten links, linksbündig (wie Live-Referenz). */
.spnkt-slider__inhalt {
	position: relative;
	/* Über dem Verdunklungs-Verlauf (::after, z-index 10). */
	z-index: 11;
	max-width: 80rem;
	padding: var(--wp--preset--spacing--gross, 5rem);
	text-align: left;
	color: var(--wp--preset--color--primary, #e2d666);
}

.spnkt-slider__titel {
	font-family: var(--wp--preset--font-family--heading, sans-serif);
	font-size: var(--wp--preset--font-size--xx-large, 6rem);
	line-height: 1;
	margin: 0 0 0.4em;
	color: inherit;
}

.spnkt-slider__text {
	font-family: var(--wp--preset--font-family--base, sans-serif);
	/*
	 * Auf Desktop etwas grösser als der normale Fliesstext (medium). Ab Tablet
	 * (siehe unten) wieder auf das Preset zurück, damit die Root-Sizing-Engine
	 * den Text auf kleineren Breakpoints wie gewohnt herunterskaliert.
	 */
	font-size: 1.875rem;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}

/* Editor-Hinweis, wenn noch keine Bilder gewählt sind. */
.spnkt-slider__placeholder {
	padding: var(--wp--preset--spacing--mittel, 2rem);
	text-align: center;
	background: var(--wp--preset--color--light, #f1f1f1);
	color: var(--wp--preset--color--foreground, #000);
}

/*
 * --- Blumen-Badges ------------------------------------------------------
 *
 * Zwei optionale, überlappende Badges oben rechts über dem Slider (ACF-Felder
 * «badge1»/«badge2», siehe render.php). Blume wie beim Social-Media-CTA
 * (assets/images/deco/flower.svg) mit zentriertem Linktext – bewusst OHNE
 * Hover-Reveal oder Icon-Grid (anders als .spnkt-social-cta in
 * components/social-cta.css): Der Slider hat bereits einen bewegten
 * Bild-Crossfade, ein zweites Reveal-System wäre unruhig. Badge 1 rotiert
 * jedoch dauerhaft wie die CTA-Blüte (identische Grösse: 26.25rem) – der
 * Text bleibt dabei die ganze Zeit sichtbar (kein Reveal).
 *
 * Badge 2 sitzt unten rechts an Badge 1, in halber Grösse, und überlagert es
 * dabei minim; die Farben sind gegenüber Badge 1 getauscht (Blume/Text-Farbe
 * invertiert), das macht die Überlappung auch so gut lesbar.
 */
.spnkt-slider__badges {
	position: absolute;
	z-index: 12; /* Über dem Verdunklungs-Verlauf (::after, 10) und dem Inhalt (__inhalt, 11). */
	/* Grösserer Abstand als spacing--mittel: die Slider-Ecken sind abgerundet
	   (border-radius am Frame), ein knapper Abstand liesse Badge 1 dort
	   herausragen – vor allem jetzt, in CTA-Grösse (26.25rem). */
	top: 5rem;
	right: 4rem;
}

.spnkt-slider-badge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	text-decoration: none;
	text-align: center;
}

.spnkt-slider-badge--1 {
	/* Gleiche Grösse wie .spnkt-social-cta (components/social-cta.css). */
	width: 26.25rem;
}

.spnkt-slider-badge--2 {
	/* 50% der Grösse von Badge 1, unten rechts versetzt: überlagert Badge 1 minim. */
	position: absolute;
	bottom: calc(-2rem - 20px);
	right: -2rem;
	width: 13.125rem;
}

.spnkt-slider-badge__bg,
.spnkt-slider-badge__bg svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Badge 1: Blüte dreht dauerhaft, wie .spnkt-social-cta__bg svg. Text bleibt
   auf einer eigenen, nicht rotierenden Ebene (__text ist Geschwister von
   __bg, kein verschachteltes Transform) durchgehend lesbar. */
.spnkt-slider-badge--1 .spnkt-slider-badge__bg svg {
	transform-origin: center;
	animation: spnkt-slider-badge-spin 40s linear infinite;
}

.spnkt-slider-badge--1 .spnkt-slider-badge__bg svg path {
	fill: var(--wp--preset--color--primary);
}

.spnkt-slider-badge--1 .spnkt-slider-badge__text {
	color: var(--wp--preset--color--secondary);
}

.spnkt-slider-badge--2 .spnkt-slider-badge__bg svg path {
	fill: var(--wp--preset--color--secondary);
}

.spnkt-slider-badge--2 .spnkt-slider-badge__text {
	color: var(--wp--preset--color--primary);
}

@keyframes spnkt-slider-badge-spin {

	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.spnkt-slider-badge__text {
	position: relative;
	/* Die Blüte hat unregelmässige, eingebuchtete Ränder (siehe flower.svg) –
	   der sicher lesbare Bereich ist kleiner als die Bounding-Box, darum
	   deutlich schmaler als bei einem echten Kreis. 75%, damit auch längere
	   Wörter wie „Wettbewerb" nicht umbrechen. */
	max-width: 75%;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1.15;
	/* Siehe .spnkt-social-cta__title in components/social-cta.css: PP Woodland
	   hat sehr grosse intrinsische Zeilenboxen, die ohne text-box die Blume
	   sprengen würden. */
	text-box: trim-both cap alphabetic;
}

/* Badge 1 ist jetzt CTA-gross (26.25rem) – gleiche Textgrösse wie
   .spnkt-social-cta__title in components/social-cta.css. */
.spnkt-slider-badge--1 .spnkt-slider-badge__text {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Badge 2 (halbe Grösse von Badge 1) proportional kleiner. */
.spnkt-slider-badge--2 .spnkt-slider-badge__text {
	max-width: 50%;
	font-size: var(--wp--preset--font-size--medium, 1.5625rem);
}

/*
 * Bewegungsreduktion: Badge-1-Rotation abschalten (WCAG 2.3.3). Analog
 * .spnkt-social-cta__bg svg in components/social-cta.css.
 */
@media (prefers-reduced-motion: reduce) {
	.spnkt-slider-badge--1 .spnkt-slider-badge__bg svg {
		animation: none;
	}
}

/* Sichtbarer Fokus (WCAG 2.4.7/2.4.11) – Badges sind als Ganzes ein Link. */
.spnkt-slider-badge:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 4px;
	border-radius: 2px;
}

/*
 * Der Slider-Titel folgt durchgängig der H1-Grösse (xx-large). Das Preset wird
 * pro Breakpoint in global.css passend heruntergestuft — hier keine eigene
 * Verkleinerung, sonst wirkt der Titel auf Mini-Desktop/Tablet/Mobile zu klein.
 */

/* --- Tablet (880px) --- */
@media only screen and (max-width: 55em) {
	/* Frame-Offset wechselt ab 55em auf 5.75rem + 1px (siehe layout.css). */
	.spnkt-slider {
		min-height: calc(100dvh - 60px);
	}

	.spnkt-slider__inhalt {
		padding: 6rem 4rem;
	}

	/* Ab Tablet wieder die normale Fliesstext-Grösse (medium). */
	.spnkt-slider__text {
		font-size: var(--wp--preset--font-size--medium, 1.5625rem);
	}

	/* Root-rem-Engine springt ab 880px nach oben (siehe social-cta.css) – Badges
	   darum mit fixen, kleineren rem-Werten statt der Desktop-Grösse. Badge-1-
	   Grösse identisch zu .spnkt-social-cta bei diesem Breakpoint (22rem). */
	.spnkt-slider__badges {
		top: 3rem;
		right: 2rem;
	}

	.spnkt-slider-badge--1 {
		width: 11rem;
	}

	.spnkt-slider-badge--2 {
		bottom: -1rem;
		right: -1rem;
		width: 5.5rem;
	}

	.spnkt-slider-badge--1 .spnkt-slider-badge__text {
		font-size: var(--wp--preset--font-size--base, 1rem);
	}

	.spnkt-slider-badge--2 .spnkt-slider-badge__text {
		font-size: var(--wp--preset--font-size--small, 0.875rem);
	}
}

/* --- Mobile (576px) --- */
@media only screen and (max-width: 36em) {
	/* Frame-Offset wechselt ab 36em auf 4rem + 1px (siehe layout.css). */
	.spnkt-slider {
		min-height: calc(100dvh - 55px);
	}

	.spnkt-slider__inhalt {
		padding: 3rem 2rem;
	}

	/*
	 * Titel-Umbruch auf Mobile ignorieren: Beide Titelzeilen fliessen zusammen
	 * und brechen nach Bedarf natürlich um. Das Leerzeichen vor dem <br> (im
	 * render.php) bleibt als Worttrenner erhalten.
	 */
	.spnkt-slider__titel-umbruch {
		display: none;
	}

	/* Badge-1-Grösse identisch zu .spnkt-social-cta bei diesem Breakpoint (11rem). */
	.spnkt-slider__badges {
		top: 2rem;
		right: 1.5rem;
	}

	.spnkt-slider-badge--1 {
		width: 11rem;
	}

	.spnkt-slider-badge--2 {
		bottom: -0.75rem;
		right: -0.75rem;
		width: 5.5rem;
	}

	.spnkt-slider-badge--1 .spnkt-slider-badge__text {
		font-size: var(--wp--preset--font-size--small, 0.875rem);
	}

	.spnkt-slider-badge--2 .spnkt-slider-badge__text {
		font-size: 0.6875rem;
	}
}

/*
 * Reduzierte Bewegung: keine Animation. Nur das erste Bild bleibt sichtbar,
 * alle weiteren ausgeblendet. WCAG 2.3.3 / 2.2.2.
 */
@media (prefers-reduced-motion: reduce) {
	.spnkt-slider__bild {
		animation: none;
		opacity: 0;
	}

	.spnkt-slider__bild:first-child {
		opacity: 1;
	}
}