/* Modul M25 – Hero
   Werte aus dem Entwurf (Figma 5:469 „groß", 62:606 „kompakt"), gemessen bei
   1920px Ansichtsbreite. Schriftgrößen in rem auf Basis der 17px aus den
   Theme-Optionen, Abstände in px.

   Titelgrößen kommen absichtlich NICHT von hier: h1 und h2 sind global in
   project.css bereits auf die Entwurfswerte gesetzt (5.882rem/0.9 bzw.
   3.235rem/1). Die Hierarchie der Titel-Klongruppe entscheidet.

   FALLE: project.css:700 enthält ein blankes `* { color: var(--font_color) }`.
   Dadurch erbt kein Element seine Farbe. Auf dem dunklen Bild müssen Farben
   deshalb ausdrücklich gesetzt werden. */

.m25_hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #1B1B1A;
}

.m25_hero,
.m25_hero * {
	color: #FFFFFF;
}

/* --- Bild bzw. Video ---------------------------------------------------- */

.m25_hero_grund {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.m25_hero .m25_hero_medium {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Nicht mittig beschneiden. Der Entwurf setzt das Bild auf 200.41 % der
	   Rahmenhöhe mit -30.27 % Versatz — bezogen auf den Überhang sind das
	   30 % statt der 50 % einer mittigen Beschneidung. Bei hochformatigen
	   Aufnahmen rückt dadurch das Motiv nach oben, wo im Entwurf auch die
	   Punkte sitzen. Mittig beschnitten würden sie danebenliegen. */
	object-position: 50% 30%;
	display: block;
}

/* Standbild liegt unter dem Video und wird nur sichtbar, wenn das System
   weniger Bewegung verlangt (siehe unten). */
.m25_hero .m25_hero_medium_ruhe {
	display: none;
}

/* Schleier, Korn und die zwei Verläufe — Reihenfolge und Werte aus dem
   Entwurf (Knoten 3:33 bzw. 62:736). Die Korn-Kachel teilt sich der Hero mit
   dem Footer. */
.m25_hero_schleier {
	position: absolute;
	inset: 0;
	display: block;
	background-color: rgba(27, 27, 26, .4);
}

/* Punktraster ueber allem — dasselbe Token wie `.ari_dunkel` in der
   project.css (Teilung 11px, Weiss mit gut vier Hundertstel Deckung), damit
   Hero und dunkle Flaechen dieselbe Textur tragen.

   Die Ebene haengt am GRUND und nicht am Schleier, und das ist der ganze
   Punkt: als `::after` des Grundes malt sie nach dem Schleier und damit nach
   dessen beiden Verlaeufen. Laege sie darunter (etwa als background-image des
   Schleiers), wuerde der Fussverlauf sie um bis zu 60 % mit abdunkeln — aus
   4 % Deckung wuerden 1,7 %, und genau in den dunklen Zonen, wo eine solche
   Textur ueberhaupt erst sichtbar wird, waere nichts mehr davon zu sehen.

   Nachgemessen am Entwurf (5:469, 1:1-Ausgabe, Helligkeitsprofil je Spalte,
   Trend des Fotos per gleitendem Mittel abgezogen, dann Autokorrelation):
   im abgedunkelten Kopfband liegt die Verschiebung 11 bei +0.93, im Fussband
   bei +0.62/+0.68 — im hellen Mittelteil bei null, dort deckt das Motiv sie
   zu. Das Raster liegt im Entwurf also ueber den Verlaeufen.

   Die DECKUNG ist hier aber schwaecher als auf einer dunklen Flaeche. Das
   Token ist an der Flaeche „Unsere Haltung" eingestellt (Grundton 26, Spitze
   35, also 9 Stufen) — auf dem helleren Hero-Grund traegt dieselbe Deckung
   viel weiter. Nachgemessen als Phasenmittel bei Teilung 11, Spitze zu Tal:
   der Entwurf bringt im Fussband 0.83 Stufen, das rohe Token 2.19 (ohne
   Raster liegt dieselbe Stelle bei 0.31 — das ist der Rauschboden). Daher
   die Deckkraft: 0.83 / 1.88 = 0.44. So bleibt es EIN Token fuer beide
   Stellen und der Faktor steht nachvollziehbar daneben. */
.m25_hero_grund::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--punktraster);
	background-size: var(--punktraster_teilung) var(--punktraster_teilung);
	pointer-events: none;
}

.m25_hero_schleier::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url(../../../img/korn.png) 0 0 / 200px 200px repeat;
	opacity: .1;
	mix-blend-mode: soft-light;
}

.m25_hero_schleier::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* dunkler Fuß, damit der Text trägt */
		linear-gradient(180deg, rgba(27, 27, 26, 0) 41.83%, rgba(27, 27, 26, .6) 87.98%),
		/* dunkler Kopf, damit die Navigation lesbar bleibt */
		linear-gradient(180deg, rgba(27, 27, 26, .7) 0%, rgba(27, 27, 26, 0) 47.12%);
}

/* --- Bühne -------------------------------------------------------------- */

/* --m25_grundlinie ist der Abstand der Textunterkante zum Fuss des Heros.
   Die Social-Spalte haengt an derselben Zahl, damit beides zusammenbleibt. */
.m25_hero_buehne {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-bottom: var(--m25_grundlinie, 117px);
}

/* Der Titel steht bewusst ohne Breitenbegrenzung und bringt seine Zeilen ueber
   <br> aus dem Backend mit (siehe unten bei „groß"). Ein einzelnes langes Wort
   hat damit aber keinen Ausweg: „VERANTWORTUNG." misst bei 26px schon 282px,
   waehrend der Container unter 576px nur `100vw - 40` hergibt. Bei 320px steht
   es ueber der Kante und wird vom `overflow: hidden` der Sektion beschnitten.

   `hyphens: auto` greift genau dann, wenn es sonst nicht passt, und laesst
   jede Ueberschrift in Ruhe, die passt — deshalb ohne Medienabfrage. Die Seite
   ist `lang="de"`, die Trennstellen kommen also aus dem deutschen Woerterbuch.
   `break-word` bleibt als letzte Rettung fuer Woerter ohne Trennstelle.

   Ueber die Struktur und nicht ueber den Klassennamen: `get_title_html_structure()`
   vergibt den Praefix des jeweiligen Moduls, der Titel heisst also je nach
   Einbindung `m25_titel`, `m43_hero_titel` oder `m48_titel`. In der Buehne
   steht er aber immer in `.m25_hero_inhalt`. */
.m25_hero .m25_hero_inhalt :is(h1, h2) {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.m25_hero .m25_hero_text {
	font-family: var(--font_base);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.18;
}

/* Der Entwurf hebt den Einstieg hervor („Lüftung, Klima, Kälte, Sanitär"). */
.m25_hero .m25_hero_text strong,
.m25_hero .m25_hero_text b {
	font-weight: 500;
}

.m25_hero .m25_hero_text p {
	margin: 0;
}

.m25_hero .m25_hero_text p + p {
	margin-top: 16px;
}

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

/* Entwurf 25:800: zwei runde Glasknoepfe von 50px, 10px Abstand, rechte
   Kante 48px vom Fensterrand, Unterkante auf der Grundlinie des Textblocks.
   Sie stehen ausserhalb des Containers - deshalb am Fensterrand und nicht
   an der Spalte ausgerichtet. */
.m25_hero_sozial {
	position: absolute;
	right: var(--m25_sozial_rand, 48px);
	bottom: var(--m25_grundlinie, 117px);
	z-index: 2;

	display: flex;
	flex-direction: column;
	gap: 10px;
}

.m25_hero .m25_hero_sozial_knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	text-decoration: none;
	transition: background-color .2s, border-color .2s;
}

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

/* Im Entwurf sind die Zeichen 21-22px hoch — nicht die Rohgroesse aus dem
   Sprite (17-18px), sondern rund 1.22-fach vergroessert. */
.m25_hero_sozial_knopf svg {
	display: block;
	height: 22px;
	width: auto;
	fill: #FFFFFF;
}

/* Fuer einen Hero auf hellem Grund - im Entwurf auf der Leistungsunterseite
   so gezeichnet. Wird ueber das Klassenfeld im Backend gesetzt. */
.m25_hero.ari_hero_hell .m25_hero_sozial_knopf {
	border-color: rgba(27, 27, 26, .1);
	background-color: rgba(27, 27, 26, .05);
}

.m25_hero.ari_hero_hell .m25_hero_sozial_knopf svg {
	fill: #1B1B1A;
}

/* --- Darstellung „groß" ------------------------------------------------- */

/* Der Hero füllt das Fenster. svh statt vh, weil mobile Browser die
   Adressleiste ein- und ausblenden und vh dort zu hoch rechnet.

   Dazu ein Boden von 1000px, damit in einem flachen Fenster nichts
   uebereinander liegt. Was zusammenstoesst, ist immer Punkt 2: er steht
   mittig (`--punkt_x: 49.43%`) und auf 43,43 % der HEROHOEHE, der Textblock
   haengt dagegen mit festem Abstand am Fuss. Je flacher das Fenster, desto
   weiter wandert der Punkt in den Titel.

   Die Grenze, ab der es sich beruehrt, laesst sich ausrechnen — die
   Plattenunterkante liegt 56px unter der Punkthoehe:

       H = (Grundlinie + Inhaltshoehe + 56) / (1 − 0,4343)

   Gemessen bei 1920px Breite, gepruefte Werte in Klammern:

       Startseite (gross)   117 + 283 + 56 → 806px   (stiess bei 800, frei bei 840)
       Unterseiten (klein)  135 + 179 + 56 → 654px   (stiess bei 640, frei bei 680)
       Kontakt (M43)        135 + 199 + 56 → 690px   (stiess bei 680, frei bei 720)

   Der schlechteste gerechnete Fall waeren 806px. Der Wert steht auf 1000
   und damit bewusst darueber: bei 860 sass Punkt 2 zwar frei, aber knapp
   ueber der Titelzeile — 1000 gibt dem Bild wieder Raum, ohne die
   Entwurfshoehe von 1080 zu erreichen. Oberhalb von 1000px Fensterhoehe
   greift also weiter das Fenstermass.

   Ein einzelner Wert und nicht drei je Fassung: die Grenze liegt bei allen
   drei unter 1000.

   Der Boden gilt nur, solange die Verlinkungen sichtbar sind. Unter 992px
   ueberschreibt der Block weiter unten die Zeile mit 600px — dort gibt es
   die Punkte nicht mehr, also auch nichts zu ueberschneiden. */
.m25_hero_gross {
	min-height: max(100vh, 1000px);
	min-height: max(100svh, 1000px);
	justify-content: flex-end;
}

.m25_hero_gross .m25_hero_buehne {
	align-items: center;
	text-align: center;
}

/* Die Breitenbegrenzung gilt nur fuer den Fliesstext. Der Titel steht im
   Entwurf ungebremst und bekommt seine Zeilen ueber <br> aus dem Backend —
   begrenzt man den ganzen Block, bricht er an falscher Stelle um. */
.m25_hero_gross .m25_hero_text {
	margin-left: auto;
	margin-right: auto;
}

/* Textbreiten aus dem Entwurf: 633 bei grossem Titel (Startseite, Knoten
   3:51), 523 beim kleinen (Bereichsseiten — 46:82, 46:156, 46:230, alle
   gleich). Die 657 hier vorher waren die Breite des TITELkastens, nicht die
   des Textes; der Text lief dadurch eine Zeile kuerzer als im Entwurf. */
.m25_hero_gross.m25_hero_stufe_gross .m25_hero_text {
	max-width: 633px;
}

.m25_hero_gross.m25_hero_stufe_klein .m25_hero_text {
	max-width: 523px;
}

/* Abstand zur Unterkante: im Entwurf endet der Textblock bei h1 auf 963 von
   1080, bei h2 auf 945 — der größere Titel rückt also tiefer. */
.m25_hero_gross.m25_hero_stufe_gross {
	--m25_grundlinie: 117px;
}

.m25_hero_gross.m25_hero_stufe_klein {
	--m25_grundlinie: 135px;
}

.m25_hero_gross .m25_hero_text {
	margin-top: 24px;
}

.m25_hero_gross.m25_hero_stufe_gross .m25_hero_text {
	font-size: 1.294rem;
}

.m25_hero_gross.m25_hero_stufe_klein .m25_hero_text {
	margin-top: 28px;
}

/* --- Darstellung „kompakt" ---------------------------------------------- */

/* Höhen im Entwurf: 736 (Referenzen), 791 (Leistungen), 855 (Karriere) — sie
   ergeben sich aus dem Inhalt, deshalb hier über Innenabstände statt über
   eine feste Höhe. */
.m25_hero_kompakt {
	--m25_grundlinie: 102px;

	/* Wie weit die Social-Spalte unter der Herokante steht. Entwurf 62:606:
	   der Hero endet bei 791, die Spalte beginnt bei 853 — halbe Modulstrecke.
	   Die Referenz-Unterseite braucht dort mehr Luft und setzt den Wert in
	   `m49_referenz.css` selbst. */
	--m25_sozial_ueber: calc(var(--modul_abstand, 124px) / 2);

	/* Die Sektion beschneidet sonst alles (Zeile 17) und die Spalte waere
	   unter der Herokante abgeschnitten. Das Bild bleibt beschnitten — das
	   uebernimmt `.m25_hero_grund` weiter unten. */
	overflow: visible;

	/* Der z-index gehoert an die SECTION, nicht an die Spalte: `isolation:
	   isolate` macht den Hero zu einem eigenen Stapelkontext, in dem ein
	   z-index an der Spalte gefangen bleibt. Der Abschnitt darunter ist
	   `position: relative` und als spaeteres Geschwister sonst obenauf. */
	z-index: 2;
}

/* --- Social-Spalte im kompakten Hero ------------------------------------ */

/* Im Entwurf steht die Spalte bei allen kompakten Heros NICHT im Bild,
   sondern darunter auf hellem Grund (Knoten 73:282: x 1822, y 853). Das ist
   eine Eigenschaft der Bauart, nicht der einzelnen Seite — deshalb hier und
   nicht je Unterseite. */
.m25_hero_kompakt .m25_hero_grund {
	/* Nur die Spalte darf hinausragen, das Bild bleibt beschnitten. */
	overflow: hidden;
}

.m25_hero_kompakt .m25_hero_sozial {
	top: calc(100% + var(--m25_sozial_ueber));
	bottom: auto;
	z-index: 3;
}

/* Auf hellem Grund muessen die Knoepfe umgekehrt gefaerbt sein, sonst steht
   Weiss auf Weiss. Das folgt zwingend aus der Verlagerung und darf nicht an
   der Klasse `ari_hero_hell` haengen, die jemand im Backend vergessen kann. */
.m25_hero_kompakt .m25_hero_sozial_knopf {
	border-color: rgba(27, 27, 26, .1);
	background-color: rgba(27, 27, 26, .05);
}

.m25_hero_kompakt .m25_hero_sozial_knopf:hover,
.m25_hero_kompakt .m25_hero_sozial_knopf:focus-visible {
	border-color: rgba(27, 27, 26, .3);
	background-color: rgba(27, 27, 26, .1);
}

.m25_hero_kompakt .m25_hero_sozial_knopf svg {
	fill: #1B1B1A;
}

.m25_hero_kompakt .m25_hero_buehne {
	align-items: flex-start;
	text-align: left;
	padding-top: 198px;
}

.m25_hero_kompakt .m25_hero_text {
	max-width: 523px;
}

.m25_hero_kompakt .m25_hero_text {
	margin-top: 28px;
}

.m25_hero .m25_hero_brotkrumen {
	font-family: var(--font_base);
	font-size: 0.882rem;
	line-height: 1.2;
	margin-bottom: 170px;
}

.m25_hero .m25_hero_brotkrumen,
.m25_hero .m25_hero_brotkrumen a,
.m25_hero .m25_hero_brotkrumen span {
	color: rgba(255, 255, 255, .5);
}

.m25_hero .m25_hero_brotkrumen a {
	text-decoration: none;
	transition: color .4s;
}

.m25_hero .m25_hero_brotkrumen a:hover {
	color: #FFFFFF;
}

.m25_hero .m25_hero_brotkrumen .breadcrumb_last {
	color: #FFFFFF;
}

/* Schaltflächen (nur „kompakt"). get_button_html_structure() liefert den
   Container als .m25_links_container — bewusst nicht .mM_links_container,
   sonst würde der Parent per jQuery ein zweites Mal hineinschreiben. */
.m25_hero .m25_links_container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 57px;
}

/* Auf dem dunklen Bild braucht der Sekundärbutton die helle Fassung. */
.m25_hero .button.secondary {
	border-color: rgba(255, 255, 255, .3);
	color: #FFFFFF;
}

.m25_hero .button.secondary .mM_button_text {
	color: #FFFFFF;
}

.m25_hero .button.secondary:hover {
	background-color: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .3);
}

/* --- Punkte ------------------------------------------------------------- */

.m25_hero_punkte {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* Die Positionen stehen im CSS und haengen an der Reihenfolge der Zeilen im
   Backend — frueher waren es zwei Zahlenfelder je Punkt. Alle Werte sind aus
   den Entwurfsrahmen gerechnet (gemessen auf 1920x1080): Figma gibt die linke
   obere Ecke des 64er Rahmens, hier steht die Mitte — also (x + 32) / 1920
   und (y + 32) / 1080.

   Nachgemessen an allen sechs Seitenrahmen des Entwurfs:
     - Punkt 2 und 3 stehen ueberall gleich.
     - Punkt 4 hat genau zwei Hoehen: hoeher auf der Startseite (545),
       tiefer auf jeder Unterseite (598). Das ist dieselbe Trennung wie die
       Titelhierarchie, deshalb haengt er hier an der Stufenklasse und nicht
       an der Anordnung.
     - Nur Punkt 1 wandert wirklich. Ihn steuert das Auswahlfeld
       „Anordnung der Punkte" ueber die Klassen .ari_punkte_*.
   Entwurfswerte Punkt 1: Startseite/Unternehmen 465|301, Karriere 457|354,
   Leistungen 362|461, Kontakt 476|619, Referenzen 394|654. */
.m25_hero .m25_hero_punkt:nth-of-type(2) { --punkt_x: 49.43%; --punkt_y: 43.43%; }
.m25_hero .m25_hero_punkt:nth-of-type(3) { --punkt_x: 62.45%; --punkt_y: 20.00%; }

.m25_hero_stufe_gross .m25_hero_punkt:nth-of-type(4) { --punkt_x: 71.46%; --punkt_y: 53.43%; }
.m25_hero_stufe_klein .m25_hero_punkt:nth-of-type(4) { --punkt_x: 71.46%; --punkt_y: 58.33%; }

/* Anordnung von Punkt 1. Benannt nach seiner Hoehenlage, nicht nach der Seite:
   welches Foto darunter liegt, entscheidet die Redaktion, und dieselbe
   Anordnung passt auf mehrere Seiten.

   REIHENFOLGE ZAEHLT: die Zeile darunter (Rueckfall „hoch", falls im Backend
   nichts gewaehlt ist) ist genauso spezifisch wie die Klassenregeln. Sie muss
   deshalb VOR ihnen stehen, sonst gewinnt sie immer.

   Die Klasse darf am Hero selbst oder an einem Vorfahren haengen: M25 gibt sie
   an die eigene <section>, M43 an die umgebende Kontakt-Section. */
.m25_hero .m25_hero_punkt:nth-of-type(1) { --punkt_x: 25.89%; --punkt_y: 30.83%; }

.ari_punkte_hoch      .m25_hero_punkt:nth-of-type(1) { --punkt_x: 25.89%; --punkt_y: 30.83%; }
.ari_punkte_angehoben .m25_hero_punkt:nth-of-type(1) { --punkt_x: 25.47%; --punkt_y: 35.74%; }
.ari_punkte_mittig    .m25_hero_punkt:nth-of-type(1) { --punkt_x: 20.52%; --punkt_y: 45.65%; }
.ari_punkte_tief      .m25_hero_punkt:nth-of-type(1) { --punkt_x: 26.46%; --punkt_y: 60.28%; }
.ari_punkte_am_boden  .m25_hero_punkt:nth-of-type(1) { --punkt_x: 22.19%; --punkt_y: 63.52%; }

/* Ruhezustand aus dem Entwurf: 64er Rahmen mit halbdurchsichtiger Linie,
   darin eine weiße 48er Fläche mit rotem Plus. */
.m25_hero .m25_hero_punkt {
	position: absolute;
	left: var(--punkt_x, 50%);
	top: var(--punkt_y, 50%);

	/* Versatz bewusst in px (halbe Ruhebreite), NICHT -50%.
	   -50% bezieht sich auf die eigene Breite — sobald die Beschriftung
	   ausfährt, wächst der Versatz mit und das Plättchen rutscht nach links
	   unter dem Zeiger weg. Mit festen 32px bleibt es stehen und nur die
	   Beschriftung wächst nach rechts, genau wie im Entwurf. */
	transform: translate(-32px, -50%);

	display: flex;
	align-items: center;
	/* 7px Polster + 1px Linie = die 8px Einrückung des Entwurfs,
	   Außenmaß damit genau 64px.

	   Das Polster bleibt beim Überfahren bewusst stehen und nur die Linie
	   wird durchsichtig. Würde das Polster auf 0 gehen, schrumpfte der Kasten
	   um 16px — steht der Zeiger dann im Polsterring, verliert er das
	   Element, es wächst zurück, der Zeiger ist wieder drin: der Button
	   flackert am Rand. */
	padding: 7px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 5px;

	pointer-events: auto;
	text-decoration: none;
	transition: border-color .3s;
}

.m25_hero .m25_hero_punkt_plaette {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 5px;
	background-color: #FFFFFF;
}

/* Das Plus als zwei Balken — spart ein weiteres Sprite. Maße aus dem
   Entwurfs-SVG: 21.7px lang, rund 2.2px stark, runde Enden. */
.m25_hero .m25_hero_punkt_plaette::before,
.m25_hero .m25_hero_punkt_plaette::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: var(--primarbutton_background_color);
	border-radius: 1.2px;
	transition: opacity .25s, transform .25s;
}

.m25_hero .m25_hero_punkt_plaette::before {
	width: 22px;
	height: 2.2px;
	transform: translate(-50%, -50%);
}

.m25_hero .m25_hero_punkt_plaette::after {
	width: 2.2px;
	height: 22px;
	transform: translate(-50%, -50%);
}

/* Beim Überfahren wird aus dem Plus der Pfeil des Entwurfs — dieselbe Maske
   wie bei den Schaltflächen, damit beide identisch aussehen. */
.m25_hero_punkt_pfeil {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 10px;
	transform: translate(-50%, -50%) scale(.6);
	opacity: 0;
	background-color: var(--primarbutton_background_color);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M13.8052 4.53499L9.41052 0.192377C9.28517 0.0685068 9.11789 0 8.94014 0C8.76238 0 8.59551 0.0681085 8.46975 0.192377C8.3444 0.316246 8.27507 0.481539 8.27507 0.657187C8.27507 0.832835 8.3444 0.99773 8.46975 1.122L11.731 4.34461H1.33014V1.05827C1.33014 0.695822 1.03186 0.401083 0.665069 0.401083C0.298273 0.401083 0 0.695822 0 1.05827V5.0002C0 5.36265 0.298273 5.65739 0.665069 5.65739C0.678773 5.65739 0.691672 5.65699 0.706585 5.65579H11.7314L8.47015 8.8784C8.3448 9.00227 8.27547 9.16756 8.27547 9.34321C8.27547 9.51886 8.3448 9.68375 8.47015 9.80802C8.59994 9.93627 8.77004 10 8.94054 10C9.11104 10 9.28114 9.93587 9.41092 9.80802L9.4996 9.72L13.8056 5.46501C14.0648 5.20891 14.0648 4.79189 13.8056 4.53579L13.8052 4.53499Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M13.8052 4.53499L9.41052 0.192377C9.28517 0.0685068 9.11789 0 8.94014 0C8.76238 0 8.59551 0.0681085 8.46975 0.192377C8.3444 0.316246 8.27507 0.481539 8.27507 0.657187C8.27507 0.832835 8.3444 0.99773 8.46975 1.122L11.731 4.34461H1.33014V1.05827C1.33014 0.695822 1.03186 0.401083 0.665069 0.401083C0.298273 0.401083 0 0.695822 0 1.05827V5.0002C0 5.36265 0.298273 5.65739 0.665069 5.65739C0.678773 5.65739 0.691672 5.65699 0.706585 5.65579H11.7314L8.47015 8.8784C8.3448 9.00227 8.27547 9.16756 8.27547 9.34321C8.27547 9.51886 8.3448 9.68375 8.47015 9.80802C8.59994 9.93627 8.77004 10 8.94054 10C9.11104 10 9.28114 9.93587 9.41092 9.80802L9.4996 9.72L13.8056 5.46501C14.0648 5.20891 14.0648 4.79189 13.8056 4.53579L13.8052 4.53499Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: opacity .25s, transform .25s;
}

/* Beschriftung fährt rechts heraus. Der 0fr/1fr-Wechsel lässt sich anders als
   width:auto sauber animieren und braucht keine feste Breite. */
.m25_hero .m25_hero_punkt_label {
	display: grid;
	grid-template-columns: 0fr;
	align-self: stretch;
	overflow: hidden;
	border-radius: 5px;
	background-color: var(--primarbutton_background_color);
	transition: grid-template-columns .3s;
}

/* Das Polster muss mitwandern. Bliebe es stehen, waere die Mindestbreite des
   Rasterelements 42px und die 0fr-Spur koennte gar nicht auf 0 schrumpfen —
   die rote Flaeche stuende dann schon im Ruhezustand offen. */
.m25_hero .m25_hero_punkt_label > span {
	display: flex;
	align-items: center;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--font_base);
	font-weight: 400;
	font-size: 0.882rem;
	line-height: 1;
	color: #FFFFFF;
	opacity: 0;
	transition: opacity .3s, padding .3s;
}

.m25_hero .m25_hero_punkt:hover,
.m25_hero .m25_hero_punkt:focus-visible {
	border-color: transparent;
}

.m25_hero .m25_hero_punkt:hover .m25_hero_punkt_plaette::before,
.m25_hero .m25_hero_punkt:hover .m25_hero_punkt_plaette::after,
.m25_hero .m25_hero_punkt:focus-visible .m25_hero_punkt_plaette::before,
.m25_hero .m25_hero_punkt:focus-visible .m25_hero_punkt_plaette::after {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.4);
}

.m25_hero .m25_hero_punkt:hover .m25_hero_punkt_pfeil,
.m25_hero .m25_hero_punkt:focus-visible .m25_hero_punkt_pfeil {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.m25_hero .m25_hero_punkt:hover .m25_hero_punkt_label,
.m25_hero .m25_hero_punkt:focus-visible .m25_hero_punkt_label {
	grid-template-columns: 1fr;
}

.m25_hero .m25_hero_punkt:hover .m25_hero_punkt_label > span,
.m25_hero .m25_hero_punkt:focus-visible .m25_hero_punkt_label > span {
	opacity: 1;
	padding: 0 21px;
}

/* Auf Geräten ohne Zeigegerät gibt es kein Überfahren — dort steht die
   Beschriftung dauerhaft, und der erste Tipp öffnet den Link direkt. */
@media (hover: none) {
	.m25_hero .m25_hero_punkt {
		border-color: transparent;
	}

	.m25_hero .m25_hero_punkt_label {
		grid-template-columns: 1fr;
	}

	.m25_hero .m25_hero_punkt_label > span {
		opacity: 1;
		padding: 0 21px;
	}

	.m25_hero .m25_hero_punkt_plaette::before,
	.m25_hero .m25_hero_punkt_plaette::after {
		opacity: 0;
	}

	.m25_hero .m25_hero_punkt_pfeil {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* --- Scroll-Hinweis ----------------------------------------------------- */

/* Im Entwurf: Text auf 1003, darunter ein 2px breiter, 53px hoher Strich, der
   bis zur Unterkante läuft und nach unten ausblendet. */
.m25_hero_scroll {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}

.m25_hero .m25_hero_scroll_text {
	font-family: var(--font_base);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.18;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 4px;
}

/* Der Strich des Entwurfs bleibt als schwache Grundlinie stehen, damit an der
   Stelle nie nichts steht. Darüber läuft ein heller Verlauf nach unten durch
   und setzt oben wieder an. */
.m25_hero_scroll_linie {
	position: relative;
	width: 2px;
	height: 53px;
	overflow: hidden;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
}

.m25_hero_scroll_linie::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 45%, rgba(255, 255, 255, 0));
	animation: m25_scrollpuls 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes m25_scrollpuls {
	from { transform: translateY(-100%); }
	to   { transform: translateY(100%); }
}

/* --- Bewegung reduzieren ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.m25_hero_scroll_linie::before {
		animation: none;
	}

	.m25_hero_scroll_linie {
		background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0));
	}

	.m25_hero_grund video.m25_hero_medium {
		display: none;
	}

	.m25_hero .m25_hero_medium_ruhe {
		display: block;
	}
}

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

@media screen and (max-width: 1199px) {
	.m25_hero {
		--m25_sozial_rand: 32px;
	}

	.m25_hero_kompakt {
		--m25_grundlinie: 80px;
	}

	.m25_hero_kompakt .m25_hero_buehne {
		padding-top: 160px;
	}

	.m25_hero .m25_hero_brotkrumen {
		margin-bottom: 100px;
	}

	.m25_hero_gross.m25_hero_stufe_gross,
	.m25_hero_gross.m25_hero_stufe_klein {
		--m25_grundlinie: 110px;
	}
}

@media screen and (max-width: 991px) {
	/* Unterhalb von 992px laeuft der Text ueber die volle Breite - die
	   Spalte am Rand kaeme ihm ins Gehege. Der Entwurf zeigt fuer schmale
	   Fenster nichts; die Icons stehen dort in der Menue-Ueberlagerung
	   und im Fussbereich. */
	.m25_hero_sozial {
		display: none;
	}

	/* Die Punkte sitzen prozentual zum Hero-Kasten. Weil das Bild mit `cover`
	   beschnitten wird, wandern sie bei stark abweichendem Seitenverhältnis
	   gegenüber dem Motiv — ab hier deshalb aus. Die Ziele sind über die
	   Navigation erreichbar. */
	.m25_hero_punkte {
		display: none;
	}

	.m25_hero_kompakt {
		--m25_grundlinie: 64px;
	}

	.m25_hero_kompakt .m25_hero_buehne {
		padding-top: 140px;
	}

	.m25_hero .m25_hero_brotkrumen {
		margin-bottom: 64px;
	}

	.m25_hero_gross.m25_hero_stufe_gross .m25_hero_text {
		font-size: 1.118rem;
	}

	/* Ab hier fuellt der Hero das Fenster NICHT mehr. Unterhalb von 992px
	   fallen die Bildpunkte und die Sozialspalte weg (siehe oben in diesem
	   Block); uebrig bleiben Titel, Text und Schaltflaechen, und die brauchen
	   gemessen 225 bis 310px. Ein 100svh-Hero war damit auf Tablet und
	   Telefon zu drei Vierteln leer.

	   Fester Wert und absichtlich kein `max-height`: ein Deckel wuerde bei
	   einem langen Titel den Inhalt abschneiden. Die 600 wirken als Deckel,
	   weil der Inhalt sie nie erreicht, und sind gleichzeitig weiterhin der
	   Boden fuer kurze Fenster (Telefon quer, In-App-Browser mit fetter
	   Leiste — schnell bei 568px). */
	.m25_hero_gross {
		min-height: 600px;
	}
}

@media screen and (max-width: 767px) {
	.m25_hero_gross.m25_hero_stufe_gross,
	.m25_hero_gross.m25_hero_stufe_klein {
		--m25_grundlinie: 90px;
	}

	.m25_hero .m25_links_container {
		margin-top: 36px;
	}
}

@media screen and (max-width: 575px) {
	/* Der Theme-Container hat unter 576px keinen Seitenabstand. */
	.m25_hero .mM_container {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* get_button_html_structure() setzt um jeden Button ein .m25_link_container.
	   Eine Breitenangabe am .button selbst liefe deshalb ins Leere — die
	   Schaltflächen brechen stattdessen über flex-wrap um. */
}

/* Hier stand eine eigene Stufe fuer `stufe_klein` (Karriere, Referenzen,
   Kontakt): ab 430px abwaerts 1.412rem (24px), damit „VERANTWORTUNG." mit
   260 statt 282 Bildpunkten bis 320px ohne Trennung auskommt.

   Die Stufe ist entfallen: die Untergrenze der Leiter liegt bei 1.729rem
   (29px) fuer h2 (project.css, Stufe ≤575) und 24px liegen darunter. Der
   Preis ist bekannt — bei 29px misst das Wort 318 und wird unter 360px
   Fensterbreite getrennt. */