/* Bilder-Slider im Hero der Startseite.

   Vier Fotos wechseln sich ab. Bewusst ohne JavaScript geloest: vier
   uebereinanderliegende Ebenen, die per CSS-Animation zeitversetzt
   ein- und ausgeblendet werden. Faellt die Animation aus, bleibt das
   erste Bild stehen -- es gibt also keinen Zustand ohne Bild.

   Die Sektion behaelt ihr urspruengliches Hintergrundbild im
   style-Attribut. Es liegt hinter den Ebenen und wird von ihnen
   verdeckt, dient aber als Rueckfall, falls diese Datei einmal nicht
   geladen wird.

   Der dunkle Verlauf lag bisher auf der Sektion selbst. Dort wuerden
   ihn die Bildebenen verdecken, deshalb liegt er hier als eigene
   Ebene ueber den Bildern und unter dem Text. Die Werte sind
   dieselben wie zuvor. */

.ph-hero-slider {
	position: relative;
}

.ph-hero-slider__bilder {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	overflow: hidden;
}

.ph-hero-slider__bilder::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%,
		hsla(var(--awb-color8-h),var(--awb-color8-s),
		calc(var(--awb-color8-l) - 10%),
		calc(var(--awb-color8-a) - 25%)) 50%);
}

/* Inhalt ueber Bilder und Verlauf heben. Ohne das wuerden die
   positionierten Ebenen den nicht positionierten Text ueberdecken. */
.ph-hero-slider > .fusion-row {
	position: relative;
	z-index: 2;
}

.ph-hero-slider__bild {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	animation: ph-hero-wechsel 15.2s linear infinite;
}

/* Kleine und mittlere Bildschirme bekommen die 1200px-Fassungen:
   554KB statt 1,7MB fuer alle vier Bilder zusammen.

   Die Verzoegerungen betragen ein Viertel, die Haelfte und drei
   Viertel des Umlaufs und muessen deshalb mitwandern, wenn die Dauer
   geaendert wird.

   Sie sind negativ, damit alle vier Animationen von der ersten
   Sekunde an laufen, nur an unterschiedlicher Stelle ihres Umlaufs.
   Mit positiven Werten starteten die spaeteren Ebenen erst nach 3,8,
   7,6 und 11,4 Sekunden -- der erste Wechsel waere dann ein harter
   Schnitt gewesen statt einer Blende, weil beim Ausblenden des ersten
   Bildes noch nichts eingeblendet hat. */
/* Nur das erste Bild laedt sofort -- es ist das zuerst sichtbare und
   damit das LCP-Element. Die drei uebrigen Ebenen bekommen ihr Motiv
   erst ueber die Klasse is-ready, die ein winziges Skript nach dem
   vollstaendigen Laden der Seite setzt (siehe index.html). So
   konkurrieren die spaeter erst sichtbaren Slider-Bilder nicht mit dem
   ersten Seiteninhalt um die Bandbreite. Ohne JavaScript -- und bei
   reduzierter Bewegung -- bleibt es beim ersten Bild, was ohnehin der
   Rueckfall ist.

   Die animation-delay-Werte stehen auf den Grundselektoren, weil sie
   kein Bild laden; nur die background-image-Zuweisung fuer Bild 2 bis 4
   haengt an is-ready. */
.ph-hero-slider__bild--1 { background-image: url(/assets/uploads/bilder/hero/startseite-hero-1200x570.jpg); animation-delay:     0s; }
.ph-hero-slider__bild--2 { animation-delay: -11.4s; }
.ph-hero-slider__bild--3 { animation-delay:  -7.6s; }
.ph-hero-slider__bild--4 { animation-delay:  -3.8s; }

.ph-hero-slider.is-ready .ph-hero-slider__bild--2 { background-image: url(/assets/uploads/bilder/hero/startseite-hero-2-1200x570.jpg); }
.ph-hero-slider.is-ready .ph-hero-slider__bild--3 { background-image: url(/assets/uploads/bilder/hero/startseite-hero-3-1200x570.jpg); }
.ph-hero-slider.is-ready .ph-hero-slider__bild--4 { background-image: url(/assets/uploads/bilder/hero/startseite-hero-4-1200x570.jpg); }

@media only screen and (min-width: 1151px) {
	.ph-hero-slider__bild--1 { background-image: url(/assets/uploads/bilder/hero/startseite-hero.jpg); }
	.ph-hero-slider.is-ready .ph-hero-slider__bild--2 { background-image: url(/assets/uploads/bilder/hero/startseite-hero-2.jpg); }
	.ph-hero-slider.is-ready .ph-hero-slider__bild--3 { background-image: url(/assets/uploads/bilder/hero/startseite-hero-3.jpg); }
	.ph-hero-slider.is-ready .ph-hero-slider__bild--4 { background-image: url(/assets/uploads/bilder/hero/startseite-hero-4.jpg); }
}

/* 15,2s Umlauf, vier Bilder: je 3s ruhig stehen, 0,8s ueberblenden.
   Die Ebenen ueberlappen sich waehrend der Blende, deshalb blendet
   jede am Ende ihres Umlaufs wieder ein statt hart zu springen.

   Die Prozentmarken sind aus den Sekunden gerechnet, Umlauf 15,2s:

     19,7368%   3,0s    Ende der Standzeit
     25%        3,8s    Bild ausgeblendet, zugleich der Versatz
     94,7368%  14,4s    Beginn der Blende zurueck ins eigene Bild
     100%      15,2s    Umlauf geschlossen

   Aendert sich das Verhaeltnis von Standzeit zu Blende, muessen diese
   Marken neu gerechnet werden -- nicht nur Dauer und Verzoegerung. */
@keyframes ph-hero-wechsel {
	0%        { opacity: 1; }
	19.7368%  { opacity: 1; }
	25%       { opacity: 0; }
	94.7368%  { opacity: 0; }
	100%      { opacity: 1; }
}

/* Punkte am unteren Rand zeigen an, welches Bild gerade laeuft.

   Sie sind rein anzeigend, nicht bedienbar -- ohne JavaScript liesse
   sich kein Bild anspringen, und ein Klickziel ohne Wirkung waere
   irrefuehrend. Deshalb aria-hidden im Markup: fuer Vorlesesoftware
   ist der Bilderwechsel ohnehin ohne Bedeutung.

   Dieselbe Dauer und dieselben Verzoegerungen wie die Bildebenen,
   damit Punkt und Bild zwingend synchron bleiben. */
.ph-hero-slider__punkte {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 12px;
}

.ph-hero-slider__punkt {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	opacity: 0.4;
	animation: ph-hero-punkt 15.2s linear infinite;
}

.ph-hero-slider__punkt--1 { animation-delay:     0s; }
.ph-hero-slider__punkt--2 { animation-delay: -11.4s; }
.ph-hero-slider__punkt--3 { animation-delay:  -7.6s; }
.ph-hero-slider__punkt--4 { animation-delay:  -3.8s; }

/* Zeitlich deckungsgleich mit ph-hero-wechsel: voll deckend, solange
   das zugehoerige Bild steht, und waehrend der Blende mitlaufend. */
@keyframes ph-hero-punkt {
	0%        { opacity: 1; }
	19.7368%  { opacity: 1; }
	25%       { opacity: 0.4; }
	94.7368%  { opacity: 0.4; }
	100%      { opacity: 1; }
}

@media only screen and (max-width: 1150px) {
	.ph-hero-slider__punkte {
		bottom: 20px;
	}
}

/* Wer Bewegung reduziert haben moechte, sieht nur das erste Bild --
   und entsprechend nur den ersten Punkt als aktiv. */
@media (prefers-reduced-motion: reduce) {
	.ph-hero-slider__bild,
	.ph-hero-slider__punkt {
		animation: none;
	}

	.ph-hero-slider__bild--1 {
		opacity: 1;
	}

	.ph-hero-slider__punkt--1 {
		opacity: 1;
	}
}