/**
 * Modul M50 – Vor Ort, Bilderslider
 *
 * Entwurf: Knoten 58:1132. Grund, Korn und Textfarben kommen aus der
 * Wrapper-Klasse `.ari_dunkel` (project.css), die Abstaende oben und unten aus
 * dem Backend-Feld „Innerer Abstand" — hier steht nur das Modulspezifische.
 *
 * Masse bei 1920 (Container 1514, Rand 203):
 *   Titel        y 1305, 55/55
 *   Fliesstext   28px darunter, Breite 594
 *   Bilder       56px darunter, 747 x 530, Abstand 20
 *   Steuerleiste 122px unter den Bildern, Pfeile rechtsbuendig
 */

/* Die Spur laeuft nach rechts aus dem Container heraus; begrenzt wird erst
   hier, sonst bekommt die Seite einen waagerechten Schieber. */
.m50_vorort {
	overflow: hidden;
}

/* --- Kopf --------------------------------------------------------------- */

/* Der Parent haengt Titel und Untertitel per jQuery in den Container. Der
   globale Abstand unter der h2 (22px in der project.css) faellt weg — der
   Abstand zum Fliesstext steht am Text selbst. */
.m50_vorort .m50_kopf > *,
.m50_vorort .m50_kopf > * > * {
	margin-bottom: 0;
}

.m50_vorort .m50_text {
	max-width: 594px;
	margin-top: 28px;
}

.m50_vorort .m50_text,
.m50_vorort .m50_text * {
	font-size: 1rem;
	line-height: 20px;
	/* `.ari_dunkel *` faerbt jedes Element einzeln — eine Regel nur am
	   Container liesse die <p> darin voll deckend. */
	color: rgba(255, 255, 255, .5);
}

/* --- Buehne ------------------------------------------------------------- */

.m50_vorort .m50_buehne {
	position: relative;
	min-width: 0;
	margin-top: 56px;
}

/* Slick beschneidet die Liste von Haus aus — hier soll das dritte Bild nach
   rechts sichtbar bleiben. */
.m50_vorort .m50_buehne .slick-list {
	overflow: visible;
}

/* Vor der Initialisierung nebeneinander, damit beim Laden nichts springt.
   Kein `gap`: den Abstand traegt die figure selbst (siehe unten), sonst kaeme
   er vor der Initialisierung doppelt. */
.m50_vorort .m50_spur {
	display: flex;
	align-items: flex-start;
}

.m50_vorort .m50_spur.slick-initialized {
	display: block;
}

.m50_vorort .slick-slide {
	height: auto;
}

/* --- Bild --------------------------------------------------------------- */

.m50_vorort .m50_bild {
	position: relative;
	/* Die Breite kommt als Variable, weil Slick mit `variableWidth` die
	   tatsaechliche Breite des Slides misst — Prozente waeren nach der
	   Initialisierung auf die Track-Breite bezogen und damit unbrauchbar.
	   Den genauen Wert rechnet das JS aus der Containerbreite: zwei Bilder
	   plus 20px Abstand fuellen den Container. Die Stufen weiter unten sind
	   nur der Rueckfall ohne JS. */
	width: var(--m50_bild_breite, 747px);
	max-width: 100%;
	/* Der Abstand steht HIER und nicht an `.slick-slide`: die figure ist selbst
	   der Slide, und ihr `margin` gegen den figure-Standard schlaegt bei
	   gleicher Spezifitaet die spaeter gelesene Slick-Regel — nachgemessen
	   stand das zweite Bild dadurch buendig am ersten. */
	margin: 0 20px 0 0;
	border-radius: 5px;
	overflow: hidden;
}

.m50_vorort .m50_bild_medium {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 747 / 530;
	object-fit: cover;
}

/* Im Bild unten links, 34 von der Kante und 32 vom Boden. Der Verlauf
   darunter haelt die Schrift auch auf hellen Motiven lesbar. */
.m50_vorort .m50_bild_text {
	position: absolute;
	left: 34px;
	right: 34px;
	bottom: 32px;
	font-size: 1rem;
	line-height: 20px;
	color: #FFFFFF;
}

.m50_vorort .m50_bild::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	background: linear-gradient(180deg, rgba(27, 27, 26, 0) 0%, rgba(27, 27, 26, .6) 100%);
	pointer-events: none;
}

/* Was hinter der aktuellen Stellung liegt, blendet sich aus — sonst stuenden
   die weggeblaetterten Bilder links neben dem Container. Ein Beschnitt an der
   Buehne waere die Alternative, wuerde aber auch nach rechts schneiden. */
.m50_vorort .m50_bild.is_weg {
	opacity: 0;
	pointer-events: none;
}

/* Der Schleier beginnt 20px hinter dem Container — also genau an der Kante des
   angeschnittenen Bildes — und laeuft ueber 440px aus. `100%` ist hier die
   Containerbreite, weil die Buehne ein normaler Block darin ist. */
.m50_vorort .m50_schleier {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(100% + 20px);
	width: 440px;
	/* Zwei Schichten wie im Entwurf (58:1112): ein flacher Schleier mit 30 %
	   ueber die ganze Breite und darueber ein Verlauf, der von der linken
	   Kante bis 41.8 % auf 70 % anwaechst und dann steht. Zusammen ergibt das
	   0.3 links und 0.79 rechts — das Bild verschwindet also NICHT ganz.
	   Eine einzelne Blende von 0 auf voll war zu hell am Bildanfang und zu
	   dunkel am Fensterrand. */
	background:
		linear-gradient(270deg, rgba(27, 27, 26, .7) 58.173%, rgba(27, 27, 26, 0) 100%),
		linear-gradient(90deg, rgba(27, 27, 26, .3) 0%, rgba(27, 27, 26, .3) 100%);
	/* Beginnt genau an der Kante des angeschnittenen Bildes, also dessen
	   Rundung mitnehmen. */
	border-radius: 5px 0 0 5px;
	pointer-events: none;
	z-index: 1;
}

/* --- Steuerleiste ------------------------------------------------------- */

/* Eigene Fassung, aber dieselben Masse wie in `m41_leistungen.css`. */
.m50_vorort .m50_steuerung {
	display: grid;
	/* Zaehler | Balken | Luecke | Pfeile — zusammen die 1514 des Entwurfs. */
	grid-template-columns: minmax(0, 97fr) minmax(0, 1195fr) minmax(0, 106fr) auto;
	align-items: center;
	margin-top: 122px;
	min-height: 48px;
}

.m50_vorort .m50_zaehler,
.m50_vorort .m50_zaehler span {
	grid-column: 1;
	margin: 0;
	font-size: 1rem;
	line-height: 20px;
	white-space: nowrap;
}

.m50_vorort .m50_zaehler .m50_zaehler_ist {
	color: #FFFFFF;
	font-weight: 600;
}

.m50_vorort .m50_zaehler .m50_zaehler_trenner {
	margin: 0 6px;
	color: #FFFFFF;
}

.m50_vorort .m50_zaehler .m50_zaehler_alle {
	color: rgba(255, 255, 255, .5);
}

.m50_vorort .m50_balken {
	grid-column: 2;
	position: relative;
	height: 10px;
	/* Wie in M41: die Spur liegt als ::after deckend ueber dem Schein.
	   #494948 entspricht den frueheren `rgba(255,255,255,.2)` auf #1B1B1A. */
	isolation: isolate;
}
/* Der Schein ist eine zweite, verdeckte Ausfertigung der Fuellung: sichtbar ist
   von ihr nur der drop-shadow, ihre Flaeche liegt hinter der Spur.

   Warum der Umweg — der Schein gehoert UNTER die Spur. Hing er wie frueher am
   sichtbaren roten Element, malte er auf die Spur. Und weil Rot bei geringer
   Deckung Gruen und Blau staerker senkt als es Rot hebt, wurde daraus rechts
   der Kuppe ein schmutzig-brauner Schmier von rund 15px, der sich als LUECKE
   zwischen Kuppe und Balken las. Gegenprobe: mit `filter: none` geht die Kuppe
   sauber in die Spur ueber.

   Beide Teile der Form stecken in EINEM Element, ueber zwei Maskenebenen:
   links das Rechteck, rechts die Kuppe. Fuer die Silhouette reicht das, ein
   zweites Pseudoelement gibt es an dieser Stelle nicht. */
.m50_vorort .m50_balken::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 0;
	width: var(--m50_fortschritt, 20%);
	filter: drop-shadow(0 0 10px rgba(220, 25, 32, .5));
	transition: width .4s;

	/* Die Form kommt als HINTERGRUND und nicht als Maske. Eine Maske wird NACH
	   dem filter angewendet und schneidet den Schein sofort wieder weg — das
	   ist genau die Falle, vor der der alte Kommentar am roten Element warnte.
	   Ein Hintergrund dagegen bestimmt den Alphakanal des Elements, und genau
	   dem folgt drop-shadow.

	   Die Farbe der Silhouette ist beliebig, sie liegt hinter der deckenden
	   Spur; darum tut es der ungefaerbte Pfad aus der project.css. */
	background-color: transparent;
	background-image:
		linear-gradient(#000, #000),
		var(--ari_balken_spitze);
	background-size: calc(100% - 9.615px) 100%, 9.615px 100%;
	background-position: left center, right center;
	background-repeat: no-repeat;
}

/* Am Ende ist die Spur voll — dann ist die Silhouette ein glattes Rechteck.
   Ueber :has, weil `is_voll` am roten Element haengt und nicht am Balken. */
.m50_vorort .m50_balken:has(.m50_balken_fuellung.is_voll)::before {
	background-image: linear-gradient(#000, #000);
	background-size: 100% 100%;
}

/* Die Spur selbst, deckend ueber dem Schein. */
.m50_vorort .m50_balken::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #494948;
}

/* Die Fuellung laeuft rechts schraeg aus. Der Schein haengt NICHT hier —
   siehe die Begruendung am Balken. */
.m50_vorort .m50_balken_fuellung {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 2;
	width: var(--m50_fortschritt, 20%);
	transition: width .4s;
}

.m50_vorort .m50_balken_fuellung::before {
	content: '';
	position: absolute;
	inset: 0 9.615px 0 0;
	background-color: var(--primarbutton_background_color);
}

.m50_vorort .m50_balken_fuellung::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 9.615px;
	height: 100%;
	background-color: var(--primarbutton_background_color);
	/* Der Pfad steht als --ari_balken_spitze in der project.css. */
	-webkit-mask: var(--ari_balken_spitze) center / 9.615px 100% no-repeat;
	mask: var(--ari_balken_spitze) center / 9.615px 100% no-repeat;
}

/* Ganz am Ende fuellt die Fuellung die Spur vollstaendig. */
.m50_vorort .m50_balken_fuellung.is_voll::before {
	inset: 0;
}

.m50_vorort .m50_balken_fuellung.is_voll::after {
	display: none;
}

.m50_vorort .m50_pfeile {
	grid-column: 4;
	display: flex;
	gap: 20px;
}

/* Die Ruecktaste weiss mit 15 % Deckung und weissem Zeichen, die Vortaste eine
   volle weisse Flaeche mit ROTEM Zeichen — nicht umgekehrt. */
.m50_vorort .m50_pfeil {
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, .15);
	cursor: pointer;
	transition: background-color .3s, opacity .3s;
}

.m50_vorort .m50_pfeil_vor {
	background-color: #FFFFFF;
}

.m50_vorort .m50_pfeil:hover:not([disabled]),
.m50_vorort .m50_pfeil:focus-visible:not([disabled]) {
	background-color: rgba(255, 255, 255, .3);
}

.m50_vorort .m50_pfeil_vor:hover:not([disabled]),
.m50_vorort .m50_pfeil_vor:focus-visible:not([disabled]) {
	background-color: rgba(255, 255, 255, .85);
}

.m50_vorort .m50_pfeil[disabled] {
	opacity: .5;
	cursor: default;
}

/* Derselbe Pfeil wie bei M41: 22 x 15, durchgehender Schaft mit Spitze. Als
   Maske, damit die Farbe je Taste wechseln kann. */
.m50_vorort .m50_pfeil::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFFFFF;
	-webkit-mask: var(--m50_pfeil) center / 22px 15px no-repeat;
	mask: var(--m50_pfeil) center / 22px 15px no-repeat;
	--m50_pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cpath d='M21.6939 6.80249L14.788 0.288565C14.591 0.10276 14.3281 0 14.0488 0C13.7695 0 13.5072 0.102163 13.3096 0.288565C13.1126 0.47437 13.0037 0.722308 13.0037 0.985781C13.0037 1.24925 13.1126 1.49659 13.3096 1.683L18.4344 6.51691H2.09022V1.58741C2.09022 1.04373 1.6215 0.601625 1.04511 0.601625C0.468715 0.601625 0 1.04373 0 1.58741V7.5003C0 8.04397 0.468715 8.48608 1.04511 8.48608C1.06664 8.48608 1.08691 8.48548 1.11035 8.48369H18.4351L13.3102 13.3176C13.1133 13.5034 13.0043 13.7513 13.0043 14.0148C13.0043 14.2783 13.1133 14.5256 13.3102 14.712C13.5142 14.9044 13.7815 15 14.0494 15C14.3173 15 14.5846 14.9038 14.7886 14.712L14.9279 14.58L21.6945 8.19751C22.1018 7.81336 22.1018 7.18784 21.6945 6.80368L21.6939 6.80249Z'/%3E%3C/svg%3E");
}

.m50_vorort .m50_pfeil_vor::after {
	background-color: var(--primarbutton_background_color);
}

.m50_vorort .m50_pfeil_zurueck::after {
	/* Halbe Drehung, nicht spiegeln: der Pfeil ist nicht symmetrisch — sein
	   Schaft hat unten einen Haken. Gespiegelt zeigt die Spitze zwar nach
	   links, der Haken bleibt aber unten und das Zeichen liest sich falsch.
	   Gedreht wandert er mit nach oben. */
	transform: rotate(180deg);
}

/* --- Kleinere Stufen ---------------------------------------------------- */

/* Rueckfall ohne JS: die Bildbreite folgt den Containerstufen des Projekts,
   (Container - 20) / 2, damit immer zwei Bilder im Container stehen.
   Die Leiter lautet 832@992, 980@1200, 1140@1400, 1290@1600, 1514@1920,
   1794@2200, 1994@2400 — die beiden obersten Stufen fehlten hier zuerst, ab
   2200px klaffte dadurch eine Luecke von bis zu 480px. */

@media screen and (min-width: 2200px) {
	.m50_vorort { --m50_bild_breite: 887px; }
}

@media screen and (min-width: 2400px) {
	.m50_vorort { --m50_bild_breite: 987px; }
}

@media screen and (max-width: 1919px) {
	.m50_vorort { --m50_bild_breite: 635px; }
}

@media screen and (max-width: 1599px) {
	.m50_vorort { --m50_bild_breite: 560px; }
}

@media screen and (max-width: 1399px) {
	.m50_vorort { --m50_bild_breite: 480px; }

	.m50_vorort .m50_steuerung {
		margin-top: 90px;
	}
}

@media screen and (max-width: 1199px) {
	.m50_vorort { --m50_bild_breite: 406px; }
}

/* Ab hier ein Bild je Ansicht ueber die volle Containerbreite — das uebernimmt
   Slick selbst (`variableWidth: false`), deshalb steht hier keine Breite mehr.
   Ohne Ueberhang darf die Liste wieder schneiden, sonst stuenden die
   folgenden Bilder ueber dem Rand. */
@media screen and (max-width: 991px) {
	/* Ein Bild je Ansicht: die Breite setzt Slick selbst
	   (`variableWidth: false`), die Variable gilt hier nicht mehr. */
	.m50_vorort .m50_bild {
		width: auto;
		margin-right: 0;
	}

	.m50_vorort .m50_buehne .slick-list {
		overflow: hidden;
	}

	.m50_vorort .m50_schleier {
		display: none;
	}

	.m50_vorort .m50_buehne {
		margin-top: 40px;
	}

	.m50_vorort .m50_steuerung {
		margin-top: 48px;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 24px;
	}

	.m50_vorort .m50_zaehler { grid-column: 1; }
	.m50_vorort .m50_balken  { grid-column: 2; }
	.m50_vorort .m50_pfeile  { grid-column: 3; }
}

@media screen and (max-width: 767px) {
	.m50_vorort .m50_text {
		margin-top: 24px;
	}

	.m50_vorort .m50_bild_text {
		left: 20px;
		right: 20px;
		bottom: 20px;
	}
}

@media screen and (max-width: 575px) {

	/* Wie in M41: der Balken bekommt eine eigene Zeile. Neben dem Zaehler
	   (45px) und den beiden 48er-Tasten (116px) blieben ihm bei 280px
	   Fensterbreite noch rund 40px. Engere Luecken haben das nur verschoben,
	   nicht geloest. */
	.m50_vorort .m50_steuerung {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 24px;
		row-gap: 24px;
	}

	.m50_vorort .m50_zaehler { grid-column: 1; grid-row: 1; }
	.m50_vorort .m50_pfeile  { grid-column: 2; grid-row: 1; justify-self: end; }
	.m50_vorort .m50_balken  { grid-column: 1 / -1; grid-row: 2; }
}