/**
 * Modul M48 – Stelle, Kopf
 *
 * Entwurf: Knoten 62:482, gemessen bei 1920px.
 *
 * Hier steht NUR, was vom Hero der Bereichsseiten abweicht — Untergrund,
 * Buehne, Social-Spalte und die Schleier kommen unveraendert aus
 * `m25_hero.css`, dessen Klassen die Section mittraegt.
 *
 * Die Regeln greifen ueber `.m25_hero.m48_stelle` und damit mit drei Klassen:
 * die Vorgaben in `m25_hero.css` haengen an zwei (`.m25_hero_kompakt
 * .m25_hero_buehne`), und in welcher Reihenfolge der Parent die beiden
 * Modul-Stylesheets einbindet, steht nicht fest.
 *
 * Senkrecht (Sektion 855 hoch):
 *   198 Brotkrumen | +18 | 177 Abstand | 393 Zeile darueber | 415 Titel (105)
 *   | 553 Einleitung (60) | 670 Schaltflaechen (48) | 137 bis zur Unterkante
 */

/* --- Social-Spalte ------------------------------------------------------ */

/* `m25_hero.css` verlagert die Spalte bei jedem kompakten Hero unter die
   Herokante und faerbt die Knoepfe dunkel — im Entwurf steht sie dort auf
   hellem Grund. Hier NICHT: unter diesem Hero folgt der dunkle Block
   `ari_ueberuns_tief` (gemessen rgb(27,27,26)), die Spalte stuende also mit
   dunklen Zeichen auf dunklem Grund und waere unsichtbar. Der Hero-Rahmen des
   Entwurfs (62:482) zeigt an dieser Stelle ueberhaupt keine Spalte — solange
   das ungeklaert ist, bleibt sie wie bisher im Bild. */
.m25_hero.m48_stelle {
	overflow: hidden;
}

.m25_hero.m48_stelle .m25_hero_sozial {
	top: auto;
	bottom: var(--m25_grundlinie);
}

.m25_hero.m48_stelle .m25_hero_sozial_knopf {
	border-color: rgba(255, 255, 255, .1);
	background-color: rgba(255, 255, 255, .2);
}

.m25_hero.m48_stelle .m25_hero_sozial_knopf:hover,
.m25_hero.m48_stelle .m25_hero_sozial_knopf:focus-visible {
	border-color: rgba(255, 255, 255, .3);
	background-color: rgba(255, 255, 255, .35);
}

.m25_hero.m48_stelle .m25_hero_sozial_knopf svg {
	fill: #FFFFFF;
}

/* --- Brotkrumen --------------------------------------------------------- */

/* Sie stehen im Entwurf am Fensterrand (x 50), nicht im Raster — deshalb eine
   eigene Ebene ueber dem Bild statt des Blocks aus `hero-teil.php`. */
.m25_hero.m48_stelle .m48_brotkrumen_ebene {
	position: relative;
	z-index: 1;
	padding: 198px 50px 0;
}

.m25_hero.m48_stelle .m48_brotkrumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Im Entwurf stehen zwischen Eltern und Winkel rund 14px, dahinter nur 6 —
	   dort ist es eine Textzeile mit Leerzeichen, ueber die der Winkel gelegt
	   wurde. */
	gap: 4px 6px;
	font-family: var(--font_base);
	font-weight: 400;
	font-size: .882rem;
	line-height: 1.2;
}

.m25_hero.m48_stelle .m48_brotkrumen_eltern {
	color: rgba(255, 255, 255, .3);
	text-decoration: none;
	transition: color .4s;
}

.m25_hero.m48_stelle .m48_brotkrumen_eltern:hover {
	color: #FFFFFF;
}

.m25_hero.m48_stelle .m48_brotkrumen_hier {
	color: #FFFFFF;
}

/* Winkel aus dem Entwurf (62:498), 3.65 x 6.21. Als Maske gezeichnet, damit
   die Farbe aus dem CSS kommt. */
.m25_hero.m48_stelle .m48_brotkrumen_pfeil {
	flex: none;
	width: 4px;
	height: 7px;
	margin-left: 8px;
	background-color: #FFFFFF;
	-webkit-mask: var(--m48_winkel) no-repeat center / contain;
	mask: var(--m48_winkel) no-repeat center / contain;

	--m48_winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3.64798 6.20954'%3E%3Cpath d='M2.42212 3.10608L0.099151 0.783008C0.03518 0.719197 0 0.633878 0 0.542906C0 0.451883 0.03518 0.366616 0.099151 0.302703L0.302701 0.0992517C0.36656 0.0352379 0.451932 0 0.542902 0C0.633882 0 0.719142 0.0352379 0.783062 0.0992517L3.54893 2.86507C3.6131 2.92919 3.64823 3.01486 3.64798 3.10593C3.64823 3.19741 3.61314 3.28298 3.54893 3.34715L0.785632 6.11029C0.721722 6.17431 0.636452 6.20954 0.545432 6.20954C0.454462 6.20954 0.369192 6.17431 0.305222 6.11029L0.101722 5.90684C-0.030698 5.77442 -0.030698 5.55885 0.101722 5.42649L2.42212 3.10608Z'/%3E%3C/svg%3E");
}

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

.m25_hero.m48_stelle {
	/* Abstand der Textunterkante zum Fuss des Heros. */
	--m25_grundlinie: 137px;
}

/* Der obere Einzug kommt hier NICHT von der Sektionskante, sondern von der
   Brotkrumenzeile darueber: 216 (deren Unterkante) + 177 = 393. */
.m25_hero.m48_stelle .m25_hero_buehne {
	padding-top: 177px;
}

/* --- Zeile ueber dem Titel ---------------------------------------------- */

/* Weiss und fett — nicht die rote, gesperrte Topline der Bereichsseiten. */
.m25_hero.m48_stelle .m48_topline {
	margin: 0;
	font-family: var(--font_base);
	font-weight: 700;
	font-size: 1rem;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	color: #FFFFFF;
}

/* --- Titel -------------------------------------------------------------- */

/* Gemischte Schreibung und der breite Schnitt ueber die ganze Zeile — die
   Bereichsseiten teilen ihren Titel dagegen in Cond und Extd und setzen ihn
   in Versalien. Alle drei Vorgaben von `h1` muessen dafuer weichen. */
.m25_hero.m48_stelle .m48_titel {
	max-width: 594px;
	margin: 2px 0 0;
	font-family: var(--font_extd);
	font-weight: 800;
	font-size: 2.0588rem;
	line-height: 35px;
	text-transform: none;
	color: #FFFFFF;
	/* Stellentitel werden lang und enthalten Schraegstriche.

	   `anywhere` allein trennt an einem BELIEBIGEN Zeichen — bei 280px stand
	   dort „Anlagenmechan / iker SHK". Erst die Silbentrennung (die Seite ist
	   `lang="de"`) bricht an der richtigen Stelle; `break-word` bleibt als
	   letzte Rettung fuer Woerter ohne Trennstelle. */
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* --- Einleitung und Schaltflaechen -------------------------------------- */

.m25_hero.m48_stelle .m25_hero_text {
	max-width: 523px;
	margin-top: 33px;
	color: #FFFFFF;
}

.m25_hero.m48_stelle .m48_links_container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 57px;
}


/* --- Datenleiste -------------------------------------------------------- */

/* Entwurf 62:965, Rahmen 1514x157 bei y 781. Der Fuss des Heros liegt bei 855:
   74px der Leiste stehen also noch auf dem Bild, die restlichen 83px ragen in
   das Modul darunter.

   Sie gehoert zum Hero und steht deshalb IN der Sektion. Zwei Vorgaben aus
   `m25_hero.css` muessen dafuer weichen, beide nur hier:
     - `overflow: hidden` wuerde den Ueberhang abschneiden. Am Untergrund
       haengt daran nichts, der liegt durchweg auf `inset: 0`.
     - Ohne `z-index` deckt das folgende Modul die Leiste ab — es ist
       spaeteres Geschwister und malt darum spaeter. Die 2 bleiben weit unter
       Menue (999) und Ladescreen (10000).

   Die Flaeche ist deckend: im Entwurf ueber Weiss nachgemessen ergibt sie
   genau 27/27/26. Das `backdrop-filter: blur(15px)` daran bliebe folgenlos
   und faellt deshalb weg.

   Die Trennlinien sind keine eigenen Elemente, sondern ein `border-image`
   am linken Rand jeder Spalte ausser der ersten. Dadurch stehen sie ohne
   Zutun ueber die volle Hoehe der Leiste, auch wenn ein Wert umbricht. Der
   Abstand zwischen zwei Texten setzt sich aus `margin-left` und
   `padding-left` der Spalte zusammen: 70 + 1 + 70 = 141, wie im Entwurf
   (dort 71 vor und 70 hinter dem Strich). */

.m25_hero.m48_stelle {
	/* Nur wegen der Leiste, siehe oben. */
	overflow: visible;
	z-index: 2;

	--m48_daten_ueberlappung: 74px;
	--m48_daten_polster: 134px;
	/* Halber Spaltenabstand — einmal als Rand, einmal als Polsterung. */
	--m48_daten_luft: 70px;
}

.m25_hero.m48_stelle .m48_daten {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - var(--m48_daten_ueberlappung));
	z-index: 3;
}

.m25_hero.m48_stelle .m48_daten_leiste {
	display: flex;
	/* Solange fuenf Spalten nebeneinander stehen, darf die Zeile NICHT
	   umbrechen: die Rechnung des Entwurfs geht mit 682px Text und 4x141
	   Zwischenraum genau auf, es bleibt kein einziger Pixel Luft. Ein
	   umbruchfaehiger Flexkasten liesse die letzte Spalte schon bei einer
	   minimal breiteren Schrift in die zweite Zeile fallen, statt die
	   Spalten zu stauchen. Umgebrochen wird erst ab 1399 (siehe unten),
	   dort dann ausdruecklich. */
	flex-wrap: nowrap;
	align-items: stretch;
	margin: 0;
	padding: 0 var(--m48_daten_polster);
	/* Hoehe statt Mindesthoehe waere hier falsch: laengere Werte als im
	   Entwurf brechen um, und die Leiste soll dann mitwachsen. */
	min-height: 157px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 5px;
	background-color: #1B1B1A;
	box-shadow: 0 4px 100px 10px rgba(255, 255, 255, .1);
}

/* `flex: 1 1 auto` statt fester Breiten: mit den Texten des Entwurfs geht die
   Rechnung genau auf (682 Text + 4x141 + 2x134 = 1514), es bleibt also nichts
   zu verteilen und die Spalten stehen auf dem Entwurfswert. Bei anderen
   Inhalten wird der Rest gleichmaessig verteilt, statt sich rechts zu
   sammeln. */
.m25_hero.m48_stelle .m48_daten_feld {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: var(--m48_daten_luft);
	padding-left: var(--m48_daten_luft);
	border-left: 1px solid transparent;
	border-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .3) 50%,
		rgba(255, 255, 255, 0) 100%) 1;
}

.m25_hero.m48_stelle .m48_daten_feld:first-child {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

/* Die weisse Sammelregel `.m25_hero *` steht bei einer Klasse — die halbe
   Deckkraft der Beschriftung braucht deshalb keine Sonderbehandlung, die drei
   Klassen hier wiegen schwerer. */
.m25_hero.m48_stelle .m48_daten_beschriftung {
	font-family: var(--font_base);
	font-weight: 400;
	font-size: 1rem;
	line-height: 20px;
	color: rgba(255, 255, 255, .5);
}

.m25_hero.m48_stelle .m48_daten_wert {
	margin: 0;
	font-family: var(--font_base);
	font-weight: 400;
	font-size: 1rem;
	line-height: 20px;
	color: #FFFFFF;
	/* Stellenangaben enthalten Schraegstriche und lange Wortketten. */
	overflow-wrap: anywhere;
}

/* --- Platz fuer den Ueberhang im Modul darunter -------------------------- */

/* Die Leiste ragt 83px unter den Hero. Der Entwurf setzt den Inhalt des
   Blocks darunter deshalb 205px unter dessen Oberkante an (62:980: Sektion ab
   855, Titel ab 1060) statt der 124 des Modulabstands — die 81 Differenz sind
   der Ueberhang.

   `border-top` und nicht `padding-top`: ein Border ADDIERT sich zur
   Polsterung, ein padding-top wuerde sie ersetzen und damit das Backend-Feld
   „Innerer Abstand" wirkungslos machen. Die Hintergrundfarbe laeuft bis unter
   den Border (background-clip: border-box ist der Standard), die Flaeche des
   Moduls beginnt also weiterhin am Fuss des Heros. Gleiches Muster wie
   `ari_ueberlappt_oben` in project.css, nur in die andere Richtung.

   Die Regel haengt am Hero und nicht am Modul darunter: welches das ist,
   entscheidet die Redaktion — wissen muss davon nur, wer den Ueberhang
   verursacht. */
.m25_hero.m48_stelle + section {
	border-top: 81px solid transparent;
}

/* --- Schmalere Fenster -------------------------------------------------- */

/* Unterhalb von 1920 ist der Container schmaler als die 1514 des Entwurfs.
   Die Stufen folgen denen aus den Theme-Optionen (1514 / 1290 / 1140 / 980):
   Polster und Luft ruecken jeweils so weit zusammen, dass die 682px Text des
   Entwurfs weiter in eine Zeile passen. */
@media screen and (max-width: 1919px) {

	/* Container 1290: 1290 - 2x64 - 4x89 = 806 fuer den Text. */
	.m25_hero.m48_stelle {
		--m48_daten_ueberlappung: 64px;
		--m48_daten_polster: 64px;
		--m48_daten_luft: 44px;
	}

	.m25_hero.m48_stelle .m48_daten_leiste {
		min-height: 150px;
	}
}

/* Container 1140: 1140 - 2x48 - 4x73 = 752 fuer den Text. */
@media screen and (max-width: 1599px) {

	.m25_hero.m48_stelle {
		--m48_daten_polster: 48px;
		--m48_daten_luft: 36px;
	}
}


/* Der naechste Containerschritt (980) traegt keine fuenf Spalten mehr. Ab hier
   bricht die Leiste um und wird damit so hoch, dass ein Ueberhang in das Modul
   darunter reichen wuerde — sie steht deshalb im Fluss am Fuss des Heros. Der
   waechst dann eben mit, und das folgende Modul muss weiterhin nichts von ihr
   wissen. */
@media screen and (max-width: 1399px) {

	.m25_hero.m48_stelle {
		overflow: hidden;
		--m48_daten_polster: 48px;
		--m48_daten_luft: 32px;
	}

	/* `margin: 0 auto` aus `.mM_container` sind zwei automatische Raender quer
	   zur Flexachse — die schalten das Strecken ab, und die Leiste faellt auf
	   ihre Inhaltsbreite zusammen. Deshalb die Breite ausdruecklich. */
	.m25_hero.m48_stelle .m48_daten {
		position: static;
		width: 100%;
		margin-bottom: var(--m25_grundlinie);
	}

	.m25_hero.m48_stelle .m48_daten_leiste {
		flex-wrap: wrap;
		min-height: 0;
		padding-top: 40px;
		padding-bottom: 40px;
		row-gap: 32px;
	}

	/* Drei je Zeile — der Strich gehoert nur zwischen zwei Spalten derselben
	   Zeile, nicht an deren Anfang. */
	.m25_hero.m48_stelle .m48_daten_feld {
		flex: 1 1 calc(33.333% - var(--m48_daten_luft) * 2);
	}

	.m25_hero.m48_stelle .m48_daten_feld:nth-child(3n+1) {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	/* Kein Ueberhang mehr, also auch kein Platz dafuer. */
	.m25_hero.m48_stelle + section {
		border-top: 0;
	}
}


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

	.m25_hero.m48_stelle {
		--m25_grundlinie: 100px;
	}

	.m25_hero.m48_stelle .m48_brotkrumen_ebene {
		padding-top: 160px;
	}

	.m25_hero.m48_stelle .m25_hero_buehne {
		padding-top: 130px;
	}
}

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

	.m25_hero.m48_stelle {
		--m25_grundlinie: 80px;
		--m48_daten_polster: 40px;
		--m48_daten_luft: 28px;
	}

	.m25_hero.m48_stelle .m48_daten_leiste {
		padding-top: 36px;
		padding-bottom: 36px;
		row-gap: 28px;
	}

	.m25_hero.m48_stelle .m48_daten_feld {
		flex: 1 1 calc(50% - var(--m48_daten_luft) * 2);
	}

	/* Der Rueckstand aus der 3er-Aufteilung muss ausdruecklich zurueck, sonst
	   stuende die vierte Spalte ohne Strich da. */
	.m25_hero.m48_stelle .m48_daten_feld:nth-child(3n+1) {
		margin-left: var(--m48_daten_luft);
		padding-left: var(--m48_daten_luft);
		border-left: 1px solid transparent;
		border-image: linear-gradient(180deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, .3) 50%,
			rgba(255, 255, 255, 0) 100%) 1;
	}

	.m25_hero.m48_stelle .m48_daten_feld:nth-child(2n+1) {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	.m25_hero.m48_stelle .m48_brotkrumen_ebene {
		padding-top: 140px;
	}

	.m25_hero.m48_stelle .m25_hero_buehne {
		padding-top: 100px;
	}

	.m25_hero.m48_stelle .m48_titel {
		font-size: 1.7647rem;
		line-height: 30px;
	}
}

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

	.m25_hero.m48_stelle {
		--m25_grundlinie: 64px;
		--m48_daten_polster: 32px;
		--m48_daten_luft: 24px;
	}

	.m25_hero.m48_stelle .m48_daten_leiste {
		padding-top: 32px;
		padding-bottom: 32px;
		row-gap: 0;
	}

	/* Einspaltig traegt der senkrechte Strich nichts mehr — die Zeilen trennt
	   derselbe Verlauf, nur quer. */
	.m25_hero.m48_stelle .m48_daten_feld,
	.m25_hero.m48_stelle .m48_daten_feld:nth-child(3n+1),
	.m25_hero.m48_stelle .m48_daten_feld:nth-child(2n+1) {
		flex: 1 1 100%;
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}

	.m25_hero.m48_stelle .m48_daten_feld + .m48_daten_feld {
		margin-top: var(--m48_daten_luft);
		padding-top: var(--m48_daten_luft);
		border-top: 1px solid transparent;
		border-image: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, .3) 50%,
			rgba(255, 255, 255, 0) 100%) 1;
	}

	.m25_hero.m48_stelle .m48_brotkrumen_ebene {
		padding: 120px 20px 0;
	}

	.m25_hero.m48_stelle .m25_hero_buehne {
		padding-top: 80px;
	}

	.m25_hero.m48_stelle .m25_hero_text {
		margin-top: 24px;
	}

	.m25_hero.m48_stelle .m48_links_container {
		margin-top: 36px;
	}
}

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

	.m25_hero.m48_stelle {
		--m48_daten_polster: 24px;
	}

	.m25_hero.m48_stelle .m48_titel {
		font-size: 1.5294rem;
		line-height: 27px;
	}

	.m25_hero.m48_stelle .m48_links_container {
		gap: 12px;
	}
}

/* --- Mobil: das Foto wird zum Band --------------------------------------

   Der Hero waechst hier mit seinem Inhalt, und ab 1399 steht die Datenleiste
   mit IM Fluss — bei 390px ist die Sektion damit 1139px hoch. Das Foto
   (1920x809, also 2,37:1) muss sie mit `cover` decken und wird dafuer auf
   2703px Breite gezogen: sichtbar bleiben 14 % der Bildbreite, bei 280px
   noch 9 %. Man sieht dann ein einzelnes Gesicht in Uebergroesse, nicht das
   Motiv.

   Ab hier deshalb: das Foto bekommt ein eigenes Band am Kopf der Sektion und
   laeuft unten im Verlauf in den dunklen Grund aus. Titel, Text, Knoepfe und
   die Datenleiste stehen darunter auf der Flaeche statt im Bild.

   Die Hoehe kommt aus einem SEITENVERHAELTNIS und nicht aus px — sonst
   wandert der Ausschnitt mit der Fensterbreite. Die Grenzen: 4:5 ergaebe bei
   280px nur 350px (davon deckt der Kopf schon rund 110 ab) und bei 767px
   satte 959px. */

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

	/* Aus der abgedeckten Ebene wird ein Element im Fluss. Bild und Schleier
	   liegen darin mit `inset: 0` und folgen von selbst.

	   `order: -1`, weil im Quelltext die Brotkrumen zuerst stehen — das Band
	   gehoert aber an den Kopf der Sektion. Die Sektion ist eine Flexspalte,
	   der Griff sitzt also schon bereit. */
	.m25_hero.m48_stelle .m25_hero_grund {
		position: relative;
		order: -1;
		aspect-ratio: 4 / 5;
		min-height: 420px;
		max-height: 620px;
	}

	/* Die Brotkrumen bleiben IM Bild — dort zeichnet sie der Entwurf, und
	   ihre 120px Kopfabstand halten weiterhin die feste Kopfzeile frei.
	   Damit sie das Band nicht nach unten schieben, liegen sie darueber
	   statt davor. z-index 1, weil der Grund auf 0 steht. */
	.m25_hero.m48_stelle .m48_brotkrumen_ebene {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

	/* Der Fuss des Verlaufs muss bis auf die Grundfarbe durchlaufen, sonst
	   steht eine sichtbare Naht zwischen Bandunterkante und Flaeche. Der
	   Kopfverlauf bleibt unveraendert — er traegt Kopfzeile und Brotkrumen. */
	.m25_hero.m48_stelle .m25_hero_schleier::after {
		background:
			linear-gradient(180deg, rgba(27, 27, 26, 0) 30%, rgba(27, 27, 26, .55) 72%, #1B1B1A 100%),
			linear-gradient(180deg, rgba(27, 27, 26, .7) 0%, rgba(27, 27, 26, 0) 47.12%);
	}

	/* Die 80 hielten Abstand zu den Brotkrumen im Fluss. Die stehen jetzt im
	   Band, also nur noch Luft zur Bandunterkante. */
	.m25_hero.m48_stelle .m25_hero_buehne {
		padding-top: 30px;
	}

	/* Die Leiste ist #1B1B1A und stand bisher auf dem Foto. Auf der gleich
	   dunklen Flaeche verschwaende sie bis auf ihren Rand — deshalb hier ein
	   Hauch heller, wie die aufgeschlagene Kachel. */
	.m25_hero.m48_stelle .m48_daten_leiste {
		background-color: rgba(255, 255, 255, .04);
	}
}