/**
 * Modul M41 – Leistungen-Slider
 *
 * Entwurf: Knoten 7:563. Masse im container (1514 bei 1920px Ansicht, Rand 203):
 *   Textspalte    x 0,   Breite 440
 *   Slider        beginnt bei x 614 (= 817 absolut) und laeuft nach rechts
 *                 ueber den Container hinaus bis zum Fensterrand
 *   Karte         440 x 476, 20px Abstand, 1px Rand
 *     Titel       50px von links, 14px von oben, Zeilenhoehe 90
 *     Knopf       64 x 64, 25px von oben und rechts
 *     Kurztext    50px von links, 45px ueber der Unterkante, Breite 340
 *   Steuerleiste  48px hoch, 122px unter den Karten
 *     Zaehler     x 0
 *     Balken      x 97, Breite 1195, Hoehe 10
 *     Pfeile      x 1398, 2 x 48 mit 20px Abstand, endet buendig bei 1514
 *
 * Abstaende oben und unten kommen aus dem Backend ("Innerer Abstand"), die
 * senkrechte Topline aus der Wrapper-Klasse .ari_topline_seitlich.
 */

.m41_leistungen {
	/* Der Titelblock setzt tiefer an als die Karten. Der Wert steht hier
	   einmal, weil zwei Dinge daran haengen: die Polsterung des Titelblocks
	   und die Hoehe der senkrechten Topline (--topline_oben). Getrennte Werte
	   liefen beim naechsten Nachjustieren auseinander — die Topline haengt
	   naemlich am Container, nicht am Titel, und weiss von der Polsterung
	   sonst nichts. */
	--m41_titel_versatz: 55px;
	/* 7px ist der Ausgleich zur Versalhoehe: die Zeilenbox der Ueberschrift
	   beginnt hoeher als die Buchstaben. Derselbe Wert steckt als Standard in
	   .ari_topline_seitlich. */
	--topline_oben: calc(var(--m41_titel_versatz) + 7px);
	position: relative;
	background-color: #1B1B1A;
	/* Die Karten laufen absichtlich ueber den Container hinaus; hier endet
	   das Sichtbare am Fensterrand, ohne dass die Seite breiter wird. */
	overflow: hidden;
	isolation: isolate;
}

/* Koernung. Der Entwurf hat KEIN Punktraster, sondern unregelmaessiges Korn
   (nachgemessen: keine Periodizitaet, Helligkeit schwankt um +-1 bis 2 Stufen
   um den Grundton). Die Kachel img/korn.png ist deshalb Rauschen, kein Raster.

   Ueberblendmodus overlay statt soft-light: auf so dunklem Grund kann
   soft-light praktisch nur aufhellen (der Grundton liegt schon fast am
   unteren Ende), das Korn wuerde einseitig hell. overlay ist bei dunklem
   Grund linear und damit symmetrisch — genau wie im Entwurf, wo die Werte
   sowohl unter als auch ueber dem Grundton liegen. */
.m41_leistungen::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url(../../../img/korn.png) 0 0 / 200px 200px repeat;
	mix-blend-mode: overlay;
	opacity: .1;
	pointer-events: none;
}

.m41_leistungen .mM_container {
	position: relative;
	z-index: 1;
}

/* Das Child-project.css setzt ein blankes `* { color: var(--font_color) }`.
   Dadurch bekommt JEDES Element eine eigene Farbe und erbt nicht — auf dunklem
   Grund waere sonst Titel und Text unsichtbar (dunkel auf dunkel). Deshalb wie
   im Footer die ganze Sektion hell setzen und spezifischere Regeln darueber
   legen. */
.m41_leistungen,
.m41_leistungen * {
	color: #FFFFFF;
}

/* Die Topline bleibt rot. Die Regel darueber setzt wegen des blanken
   `* { color }` im Parent JEDEM Element eine eigene Farbe — der Untertitel
   wuerde sonst mitweiss werden. Zwei Klassen schlagen die eine oben. */
.m41_leistungen [class$="_untertitel"],
.m41_leistungen .m41_untertitel_container p {
	color: var(--primarlink_font_color);
}

.m41_leistungen .m41_raster {
	display: grid;
	/* Textspalte | Slider. Der Slider startet im Entwurf bei 614 und reicht
	   rechnerisch bis zum Containerende — nach rechts geht er per negativem
	   Rand darueber hinaus. */
	grid-template-columns: minmax(0, 614fr) minmax(0, 900fr);
	align-items: start;
}

/* --- Linke Spalte ------------------------------------------------------ */

.m41_leistungen .m41_intro {
	grid-column: 1;
	grid-row: 1;
	/* Im Entwurf setzt der Titel 55px tiefer an als die Kartenoberkante. */
	padding-top: var(--m41_titel_versatz);
	/* 440 Textbreite im 614er Rasterplatz. */
	max-width: 440px;
	text-align: left;
}

.m41_leistungen .m41_text,
.m41_leistungen .m41_text * {
	margin-top: 28px;
	font-size: 1rem;
	line-height: 20px;
	color: rgba(255, 255, 255, .5);
}

.m41_leistungen .m41_text * {
	margin-top: 0;
}

.m41_leistungen .m41_text p:not(:last-child) {
	margin-bottom: 20px;
}

.m41_leistungen .m41_intro .mM_links {
	margin-top: 37px;
}

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

.m41_leistungen .m41_buehne {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	/* Kein clip-path und keine Maske. Beide haben denselben Haken: sie schneiden
	   auch den Schein der Karten ab (oben, unten und links), und eine Maske mit
	   weicher Kante laesst am linken Rand einen Geisterstreifen der gerade
	   herausgeblaetterten Karte stehen.

	   Nach rechts darf die Buehne darum einfach offen bleiben — begrenzt wird
	   erst am Fensterrand durch das overflow der Sektion. Nach links raeumen die
	   Karten selbst auf: was hinter der aktuellen Stellung liegt, blendet sich
	   aus (.is_weg). Ein negativer Rand mit (100vw - 100%) / 2 waere hier
	   uebrigens falsch: bei einem Rasterkind bezieht sich ein prozentualer Rand
	   auf die BREITE DER RASTERZELLE, nicht auf die des Containers — der Wert
	   faellt zu gross aus und die Seite bekommt einen waagerechten Schieber. */
}

.m41_leistungen .m41_buehne .slick-list {
	overflow: visible;
}

/* Vor der Slick-Initialisierung nebeneinander, damit nichts springt. */
.m41_leistungen .m41_spur {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.m41_leistungen .m41_spur.slick-initialized {
	display: block;
}

/* Slick setzt die Slides auf float; der Abstand kommt hier als Rand, weil
   gap im Slick-Track nicht wirkt. */
.m41_leistungen .slick-slide {
	margin-right: 20px;
	height: auto;
}

/* Die Karten stehen im Entwurf treppenartig versetzt (Oberkanten 124 / 184 /
   157, also 0 / +60 / +33). Das wiederholt sich alle drei Karten, damit das
   Muster auch beim Blaettern und bei beliebig vielen Leistungen traegt. */
.m41_leistungen .m41_karte {
	margin-top: 0;
}

/* Slick wickelt die Slides NICHT in eigene Container, sondern setzt die Klasse
   slick-slide direkt auf die <article>. Die Karte ist also selbst das
   Rasterkind — nth-child zaehlt sie im .slick-track, vor der Initialisierung
   in der .m41_spur. Ein Selektor der Form
   ".slick-slide:nth-child(...) .m41_karte" greift deshalb ins Leere. */
.m41_leistungen .m41_karte:nth-child(3n + 2) {
	margin-top: 60px;
}

.m41_leistungen .m41_karte:nth-child(3n + 3) {
	margin-top: 33px;
}

/* Die Liste muss die tiefste Karte fassen: 476 + 60. Nicht auf der Buehne
   setzen — deren Innenabstand ginge bei box-sizing: border-box davon ab. */
.m41_leistungen .m41_buehne .slick-list,
.m41_leistungen .m41_spur {
	min-height: 536px;
}

/* --- Karte ------------------------------------------------------------- */

/* Aussehen und Verhalten der Kachel stehen als .ari_karte in der project.css —
   dieselbe Kachel steht im Raster der Karriereseite. Hier bleibt nur, was zum
   Slider gehoert: die feste Groesse aus dem Entwurf und das Ausblenden beim
   Herausblaettern. */
.m41_leistungen .m41_karte {
	/* Der Schleier ist hier kraeftiger als im Raster (7:497 gegen 67:1545). */
	--karte_flaeche:        .3;
	--karte_oben:           .6;
	--karte_flaeche_offen:  .7;
	--karte_oben_offen:     .9;

	flex: none;
	width: 440px;
	max-width: calc(100vw - 40px);
	height: 476px;
}

/* Herausgeblaettert: die Karte verschwindet, statt links hart abgeschnitten zu
   werden. Sie liegt dann ueber der Textspalte und darf dort nichts abfangen. */
.m41_leistungen .m41_karte.is_weg {
	opacity: 0;
	pointer-events: none;
}

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

.m41_leistungen .m41_steuerung {
	grid-column: 1 / -1;
	grid-row: 2;
	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;
	/* Im Entwurf 62px unter der tiefsten Karte (184 + 476 = 660, Leiste 722). */
	margin-top: 62px;
	min-height: 48px;
}

.m41_leistungen .m41_zaehler,
.m41_leistungen .m41_zaehler span {
	grid-column: 1;
	margin: 0;
	font-size: 1rem;
	line-height: 20px;
	color: rgba(255, 255, 255, .6);
	white-space: nowrap;
}

/* Im Entwurf: "01" in Medium und voll deckend, der Trenner ebenfalls weiss,
   "05" mit 50 %. */
.m41_leistungen .m41_zaehler .m41_zaehler_ist {
	color: #FFFFFF;
	font-weight: 600;
}

.m41_leistungen .m41_zaehler .m41_zaehler_trenner {
	color: #FFFFFF;
}

.m41_leistungen .m41_zaehler .m41_zaehler_alle {
	color: rgba(255, 255, 255, .5);
}

.m41_leistungen .m41_zaehler_trenner {
	margin: 0 6px;
}

.m41_leistungen .m41_balken {
	grid-column: 2;
	position: relative;
	height: 10px;
	/* Die Spur liegt als ::after DECKEND ueber dem Schein — Begruendung dort.
	   #494948 ist genau, was die frueheren `rgba(255,255,255,.2)` auf #1B1B1A
	   ergaben (nachgemessen 73,73,72). Der Preis: das Korn der Sektion
	   schimmert nicht mehr durch die Spur — bei 10px Hoehe und 10 % Deckung
	   nicht zu sehen. */
	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. */
.m41_leistungen .m41_balken::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 0;
	width: var(--m41_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. */
.m41_leistungen .m41_balken:has(.m41_balken_fuellung.is_voll)::before {
	background-image: linear-gradient(#000, #000);
	background-size: 100% 100%;
}

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


/* Die Fuellung laeuft rechts SCHRAEG aus (im Entwurf ein Pfad, dessen obere
   Kante rund 10px weiter reicht als die untere) und wirft einen roten Schein
   (feGaussianBlur stdDeviation 10 = 20px Radius, #DC1920 mit 50 %). */
.m41_leistungen .m41_balken_fuellung {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 2;
	width: var(--m41_fortschritt, 20%);
	/* Kein filter mehr an dieser Stelle — der Schein sitzt jetzt am Balken
	   selbst, unter der Spur. 10px und nicht 20 bleibt dort richtig: Chrome
	   nimmt den Wert bei drop-shadow direkt als Standardabweichung (nicht als
	   doppelte wie bei box-shadow). Der Entwurf hat feGaussianBlur
	   stdDeviation="10", nachgemessen deckt sich das Profil auf 2 Stufen. */
	transition: width .4s;
}

/* Rechts laeuft die Fuellung nicht gerade schraeg aus, sondern in einer
   Rundung: im Entwurf ein Pfad aus zwei Bezierstuecken, dessen obere Kante bei
   336.96 endet und dessen untere bei 327.35 — 9.615px Versatz ueber die 10px
   Hoehe. Der Koerper ist deshalb ein Rechteck, das 9.615px vor dem Ende
   aufhoert, und die Spitze eine eigene Flaeche mit genau diesem Pfad als
   Maske. Als Maske und nicht als clip-path, weil ein clip-path in Prozent
   rechnen wuerde und die Rundung mit der Breite verzerrt. */
.m41_leistungen .m41_balken_fuellung::before {
	content: '';
	position: absolute;
	inset: 0 9.615px 0 0;
	background-color: var(--primarbutton_background_color);
}

.m41_leistungen .m41_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, weil ihn auch
	   das Bewerbungsformular (m47) braucht. */
	-webkit-mask: var(--ari_balken_spitze) center / 9.615px 100% no-repeat;
	mask: var(--ari_balken_spitze) center / 9.615px 100% no-repeat;
}

/* Am Ende ist nichts mehr angeschnitten — die Spur ist komplett gefuellt. */
.m41_leistungen .m41_balken_fuellung.is_voll::before {
	inset: 0;
}

.m41_leistungen .m41_balken_fuellung.is_voll::after {
	display: none;
}

.m41_leistungen .m41_pfeile {
	grid-column: 4;
	display: flex;
	gap: 20px;
}

/* Beide Tasten 48 x 48 mit Radius 5. Im Entwurf ist die Ruecktaste weiss mit
   15 % Deckung und weissem Zeichen, die Vortaste eine volle weisse Flaeche mit
   ROTEM Zeichen — nicht umgekehrt. */
.m41_leistungen .m41_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;
}

.m41_leistungen .m41_pfeil_vor {
	background-color: #FFFFFF;
}

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

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

.m41_leistungen .m41_pfeil[disabled] {
	opacity: .5;
	cursor: default;
}

/* Der Pfeil des Entwurfs: 22 x 15, durchgehender Schaft mit Spitze — nicht der
   schlanke Chevron aus den Schaltflaechen. Als Maske, damit die Farbe je Taste
   wechseln kann. */
.m41_leistungen .m41_pfeil::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #FFFFFF;
	-webkit-mask: var(--m41_pfeil) center / 22px 15px no-repeat;
	mask: var(--m41_pfeil) center / 22px 15px no-repeat;
	--m41_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");
}

.m41_leistungen .m41_pfeil_vor::after {
	background-color: var(--primarbutton_background_color);
}

.m41_leistungen .m41_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 --------------------------------------------------- */

@media screen and (max-width: 1399px) {
	.m41_leistungen .m41_raster {
		grid-template-columns: minmax(0, 500fr) minmax(0, 1014fr);
	}
}

@media screen and (max-width: 991px) {
	/* Text ueber den Slider, Slider ueber die volle Breite. */
	.m41_leistungen .m41_raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.m41_leistungen {
		/* Hier laeuft die Topline waagerecht im Fluss mit, der Titel braucht
		   keinen Vorlauf mehr — ein Wert statt zweier. */
		--m41_titel_versatz: 0px;
	}

	.m41_leistungen .m41_intro {
		grid-column: 1;
		grid-row: 1;
		max-width: none;
	}

	.m41_leistungen .m41_buehne {
		grid-column: 1;
		grid-row: 2;
		margin-top: 48px;
	}

	.m41_leistungen .m41_steuerung {
		grid-row: 3;
		margin-top: 48px;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 24px;
	}

	.m41_leistungen .m41_zaehler   { grid-column: 1; }
	.m41_leistungen .m41_balken    { grid-column: 2; }
	.m41_leistungen .m41_pfeile    { grid-column: 3; }
}

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

	/* Der Treppenversatz lebt davon, dass mehrere Karten nebeneinander im Bild
	   stehen. Ab hier ist immer nur eine ganz zu sehen — die Stufe liest sich
	   dann nicht als Muster, sondern als verrutschte Karte. */
	.m41_leistungen .m41_karte:nth-child(3n + 2),
	.m41_leistungen .m41_karte:nth-child(3n + 3) {
		margin-top: 0;
	}

	/* Die feste Mindesthoehe fasste die tiefste Stufe (476 + 60). Ohne Treppe
	   ist sie nur noch Leerraum zwischen Karte und Steuerleiste — bei 280px
	   Fensterbreite waren das 136px. */
	.m41_leistungen .m41_buehne .slick-list,
	.m41_leistungen .m41_spur {
		min-height: 0;
	}

	.m41_leistungen .m41_karte {
		height: 420px;
	}
}

@media screen and (max-width: 575px) {
	.m41_leistungen .m41_karte {
		--karte_polster:       8px 28px 28px;
		--karte_titel_zeile:   65px;
		--karte_knopf:         48px;
		--karte_knopf_abstand: 16px;
		/* Kleinerer Knopf (48 + 16 = 64 ab Kachelrand) auf 28er Polster. */
		--karte_titel_platz:   48px;

		height: 360px;
	}

	/* Der Balken bekommt eine eigene Zeile. Neben dem Zaehler (45) und den
	   beiden 48er-Tasten (116) blieben ihm bei 280px Fensterbreite noch 41px —
	   als Fortschrittsanzeige unbrauchbar. Jetzt liegt er unter beiden ueber
	   die volle Containerbreite. */
	.m41_leistungen .m41_steuerung {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 24px;
		row-gap: 24px;
	}

	.m41_leistungen .m41_zaehler { grid-column: 1; grid-row: 1; }
	.m41_leistungen .m41_pfeile  { grid-column: 2; grid-row: 1; justify-self: end; }
	.m41_leistungen .m41_balken  { grid-column: 1 / -1; grid-row: 2; }
}

@media screen and (max-width: 430px) {
	.m41_leistungen .m41_karte {
		height: 320px;
	}
}