/**
 * Fellowship-Bewerbungsformular, Layout nach Figma `MFA_Fellowship | Shared`.
 *
 * Maße stammen aus den Frames (Artboard 1440px breit): die Formularspalte ist 840px breit und
 * zentriert, Überschrift und Stepper sind zentriert, die Feldbeschriftungen linksbündig.
 *
 * Schriften werden bewusst NICHT gesetzt, sondern geerbt. Das Design nutzt die Hausschrift der
 * Stiftung; sie global hier zu überschreiben würde die Seite aus dem Rest der Website herauslösen.
 * Sobald die Schrift im Elementor-Kit hinterlegt ist, greift sie automatisch auch hier.
 */

:root {
	--mfs-fs-ink: #111111;
	--mfs-fs-line: #111111;
	/* Der Grauton der Platzhalter und des Wortzählers, am Knoten `Input` abgelesen. */
	--mfs-fs-muted: #868686;
	--mfs-fs-accent: #e5b063; /* Kit-Accent, das Orange aus dem Design */
	--mfs-fs-pink: #f2e1e6;      /* Hero-Fläche */
	--mfs-fs-pink-mark: #f2a0cc; /* das rosa „fellowship"-Feld */
	--mfs-fs-width: 842px;
	/* Abstand zwischen zwei Feldzeilen. Steht als Variable, weil der Wortzähler ihn mitrechnen muss:
	   er sitzt absolut im Feldblock und läge sonst auf der unteren Rahmenlinie statt im Feld. */
	--mfs-fs-field-gap: 24px;
	/* Der Abstand zwischen zwei Feldern EINER Zeile. Der Wert selbst wird in
	   mfs-fellowship-form.php als `column_gap` gesetzt (Elementor schreibt ihn ins seiteneigene
	   Stylesheet); er steht hier zusätzlich, weil zwei Regeln ihn mitrechnen müssen: der Wortzähler
	   und der Zurück-Link in der Knopfzeile sitzen beide neben Feldgruppen, die die halbe Lücke als
	   Polsterung tragen. Wer den Wert ändert, ändert ihn an BEIDEN Stellen. */
	--mfs-fs-col-gap: 24px;
	/* Die Zeilenhöhe des 21px-Fließtextes. Der Entwurf führt 120 % = 25,2px, nicht 25 — auf neun
	   Zeilen macht das knapp 2px aus, und die Eckdaten-Karte steht danach genau so hoch wie dort. */
	--mfs-fs-lead: 25.2px;
}

/* Der eigene Kopfbereich des Designs ersetzt den globalen Site-Header auf dieser Seite.
   Sauberer wäre eine Anzeigebedingung im Elementor-Theme-Builder; solange die nicht gesetzt ist,
   blendet diese Regel den globalen Header aus, ohne ihn für andere Seiten anzufassen. */
body.mfs-fellowship-lp .ast-above-header,
body.mfs-fellowship-lp .site-header,
body.mfs-fellowship-lp [data-elementor-type="header"] {
	display: none;
}

/* ------------------------------------------------- Knopfbeschriftungen: fehlender Schnitt
 *
 * Der Entwurf setzt JEDE Knopfbeschriftung in `FranklinGothic-Medium` 18/20. Diesen Schnitt gibt es
 * auf der Website nicht: unter `Franklin Gothic` liegen nur `FranklinGothic` (normal) und
 * `FranklinGothic-Bold`. Nachgemessen an „Jetzt bewerben" bei 18px:
 *     normal 139,89px  |  Entwurf (Medium) 138px  |  fett rund 6 % breiter
 * Normal trifft also die Breite fast genau, wirkt aber leichter als der Entwurf; fett träfe das
 * Gewicht, zerstörte aber die Zeilenlänge.
 *
 * Deshalb hier normal PLUS eine feine Konturverstärkung. `-webkit-text-stroke` verändert die
 * Vorschubbreiten NICHT (nachgemessen: 139,89px mit und ohne), verdickt aber die Striche und kommt
 * damit dem Medium-Schnitt sehr nahe. Sobald die Stiftung die Datei `FranklinGothic-Medium`
 * liefert, kann dieser Block ersatzlos entfallen und `font-weight: 500` greift von selbst.
 */
.mfs-fs-header__cta,
.mfs-fellowship-form .elementor-button[type="submit"],
.mfs-fellowship-form .e-form__buttons__wrapper__button-next,
.mfs-fellowship-form .e-form__buttons__wrapper__button-previous,
.mfs-fellowship-form .mfs-fs-back,
.mfs-fs-modal .mfs-fs-modal__primary,
.mfs-fs-modal .mfs-fs-modal__secondary,
.mfs-fs-success__cta,
.mfs-fs-closed__cta,
.mfs-fs-hero__toggle {
	-webkit-text-stroke: 0.35px currentColor;
}

/* ------------------------------------------------------------------ Kopfbereich */

/* 120px hoch und 80px Seitenrand, wie jede Komponente des Designs; das Logo misst darin 93px. */
.mfs-fs-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 80px 13px;
	background: #ffffff;
}

/* Abstände wie im Design: 24px zwischen Frist und Countdown, 32px vor dem Button. */
/* Am Knoten `Frame 13` abgelesen: Abstand 24px, beide Zeilen 16/24 (erste halbfett). Der Grad
   stand hier auf 13px — geraten und deutlich zu klein. */
.mfs-fs-header__deadline {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: 16px;
	line-height: 24px;
}

/* Nur auf der Landingpage. Im Entwurf 218x48: 40px Innenabstand seitlich, Beschriftung
   Franklin Gothic Medium 18/20 in Versalien, ohne Sperrung. 14px oben und unten, damit die
   Höhe von 48 stimmt (der Knoten gibt 18 an, ist aber auf 48 fixiert und staucht sie). */
/* Feste 218px wie im Entwurf (`btn` 218x48). Ohne die Breitenangabe richtet sich der Knopf nach
   seiner Beschriftung, und die läuft breiter als im Entwurf: dort steht sie in
   `FranklinGothic-Medium`, den das Kit nicht führt (siehe DEPLOYMENT.md). Gemessen wurden 242 statt
   218px — der Countdown links daneben rückte dadurch um 24px aus seiner Position. Die Polsterung
   bleibt als Mindestmaß stehen, `box-sizing` sorgt dafür, dass sie in den 218 aufgeht. */
.mfs-fs-header__cta {
	box-sizing: border-box;
	width: 218px;
	margin-left: 32px;
	padding: 14px 20px;
	text-align: center;
	background: var(--mfs-fs-ink);
	color: #ffffff;
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* `Counter` im Entwurf: vier Kacheln à 48x48 mit 10px Abstand, zusammen 221px. */
.mfs-fs-cd {
	display: flex;
	gap: 10px;
}

.mfs-fs-cd__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--mfs-fs-accent);
}

/* Die Zahl steht im Entwurf in der Auszeichnungsschrift (20/24), die Beschriftung im
   Fließtextschnitt (12/14). */
.mfs-fs-cd__cell b {
	font-family: var(--mfs-flp-display, "Bernhard Gothic Lokal", Sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.mfs-fs-cd__cell i {
	font-size: 12px;
	font-style: normal;
	line-height: 14px;
	text-transform: uppercase;
}

.mfs-fs-header__logo {
	font-size: 17px;
	line-height: 1.15;
}

/* Die echte Wortmarke. Die HÖHE führt, damit sie neben dem Countdown immer gleich hoch sitzt, egal
   welche Pixelmaße die Datei in der Mediathek hat. 92px hat sie im Design.
   Zwei Klassen im Selektor, weil Astra und Elementor beide ungescopte Bildregeln mitbringen
   (`img { height: auto }`); mit nur einer Klasse gewinnt deren höhere Spezifität und das Logo läuft
   auf seine volle Dateihöhe auf.

   `max-height` statt `height`, dazu `max-width: 100%` und `height: auto` — und das ist keine
   Kosmetik, sondern die Reparatur eines sichtbaren Fehlers (gefunden bei der Abnahme am
   21.08.2026):

   Der Kopfbereich ist ein Flex-Kasten. Mit einer FESTEN Höhe und `width: auto` ist die Breite der
   Wortmarke ihr natürliches Maß — ein Flex-Kind darf aber schrumpfen, und weil ein Bild sich
   beliebig schmal machen lässt, wurde genau sie zusammengedrückt, sobald Frist, Countdown und
   Bewerben-Knopf die Zeile füllten. Gemessen bei 1024px: 169x92 statt 310x92, also eine auf ein
   Drittel gestauchte Wortmarke. Bei 390px waren es 159 statt 172. Das lag NICHT am neuen Logo, die
   alte Datei hat fast dasselbe Seitenverhältnis und wurde genauso gestaucht.

   Mit `max-height` plus `max-width: 100%` und `height: auto` skaliert das Bild bei Platzmangel
   PROPORTIONAL herunter, statt sich zu verzerren. Die Wortmarke ist ein Markenzeichen; sie darf
   kleiner werden, aber nie schmaler gequetscht. */
/* 93px seit dem Abgleich mit dem Entwurf vom 24.08.2026: die Wortmarke ist dort 121x67 groß und
   sitzt in einem Kasten von 152x93. Die Datei bringt diesen Kasten mit, damit der Kopfbereich
   dieselbe Höhe behält und die Marke an derselben Stelle steht wie im Entwurf. */
.mfs-fs-header .mfs-fs-header__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 93px;
}

/* Die Wortmarke ist seit dem Handover vom 21.08.2026 ein Link auf die Akademie-Seite. `display:
   block` und `line-height: 0`, damit der Anker genau so hoch wird wie das Bild darin — sonst
   stellt die Zeilenhöhe des umgebenden Textes ein paar Pixel unter das Logo und der Kopfbereich
   wächst. Farbe für alle Zustände ausdrücklich, weil sonst die getypte Rückfallfassung dem
   `.elementor-kit-6 a:hover { color: #898989 }` des Kits anheimfällt. */
.mfs-fs-header .mfs-fs-header__brand-link,
.mfs-fs-header .mfs-fs-header__brand-link:link,
.mfs-fs-header .mfs-fs-header__brand-link:visited,
.mfs-fs-header .mfs-fs-header__brand-link:hover,
.mfs-fs-header .mfs-fs-header__brand-link:focus,
.mfs-fs-header .mfs-fs-header__brand-link:active {
	display: block;
	color: var(--mfs-fs-ink);
	line-height: 0;
	text-decoration: none;
}

body.mfs-fellowship-lp .mfs-fs-header__brand-link:focus {
	outline: none;
}

body.mfs-fellowship-lp .mfs-fs-header__brand-link:focus-visible {
	outline: 2px solid var(--mfs-fs-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------ Hero */

.mfs-fs-hero {
	background: var(--mfs-fs-pink);
}

.mfs-fs-hero__inner {
	display: grid;
	/* Aus dem Knotenbaum von `Fellowhip_Form_01`: der Hero ist 407px hoch, die Wortmarke 384x373 und
	   beginnt bei x=101, die weiße Karte ist 781x304 und beginnt bei x=579. Bei 1280px Inhaltsbreite
	   ab x=80 sind das zwei Spalten 499 (80..579) und 781 (579..1360) OHNE Abstand; 17px oben und
	   unten ergeben mit der 373px hohen Marke genau die 407. */
	grid-template-columns: 499fr 781fr;
	gap: 0;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
	padding: 17px 0;
}

.mfs-fs-hero__mark {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

/* Liegt die echte Wortmarke vor, ist sie EIN Bild und braucht keinen der Kastenaufbauten. */
.mfs-fs-hero__mark--image {
	display: block;
}

/* Im Design ist die Marke 352px breit und beginnt bei x=118, die Spalte selbst bei x=80 — sie füllt
   ihre Spalte also nicht, sondern sitzt etwas eingerückt. */
/* Zwei Fassungen der Wortmarke, siehe mfs_fellowship_hero_html(); die breite gilt nur fürs Telefon.
   Beide Klassen im Selektor, weil `.mfs-fs-hero__mark-img` weiter unten `display: block` setzt. */
.mfs-fs-hero__mark-img.mfs-fs-hero__mark-img--wide {
	display: none;
}

/* 384 von 499px Spaltenbreite, eingerückt um 21px (Marke bei x=101, Spalte ab x=80). */
.mfs-fs-hero__mark-img {
	display: block;
	width: 76.95%;
	margin-left: 4.21%;
	height: auto;
}

.mfs-fs-hero__mark-a,
.mfs-fs-hero__mark-b {
	display: inline-block;
	padding: 14px 18px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
}

.mfs-fs-hero__mark-a {
	background: var(--mfs-fs-accent);
}

.mfs-fs-hero__mark-b {
	margin-left: 48px;
	background: var(--mfs-fs-pink-mark);
}

/* Die Karte ist im Entwurf 781x304 mit fester Höhe — der Inhalt füllt sie nicht ganz aus, unten
   bleibt Luft. Ohne `min-height` richtet sie sich nach ihrem Inhalt und war 288px hoch.
   Seitliche Polsterung 33px: die Symbole der linken Spalte beginnen im Entwurf 33px hinter der
   Kartenkante (x=612 bei Karte ab 579), der Text 24px dahinter. */
.mfs-fs-hero__card {
	align-self: center;
	min-height: 304px;
	padding: 32px 33px;
	background: #ffffff;
}

/* Das Raster liegt bewusst hier und nicht am <details>, siehe mfs_fellowship_hero_html(). */
.mfs-fs-hero__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 40px;
}

/* Die Karte ist ein <details>, das auf Desktopbreite immer offen steht: der Aufklapper gehört laut
   Design nur aufs Telefon. Auf dem Desktop verschwindet deshalb nur die Zusammenfassungszeile. */
.mfs-fs-hero__toggle {
	display: none;
}

.mfs-fs-hero__col {
	margin: 0;
}

/* Ein Eintrag der Karte. Im Entwurf 21/25,2 (Franklin Gothic Book), nicht 16/24. Der Entwurf setzt
   die ganze Spalte als EINEN Textknoten; der Abstand zwischen zwei Einträgen ist dort eine
   Leerzeile, also genau eine Zeilenhöhe. */
.mfs-fs-hero__item {
	margin-top: var(--mfs-fs-lead);
	font-size: 21px;
	line-height: var(--mfs-fs-lead);
}

.mfs-fs-hero__item:first-child {
	margin-top: 0;
}

/* Icon und Begriff nebeneinander. */
.mfs-fs-hero__col dt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

/* Die Glyphen sind unterschiedlich breit; feste Höhe, Breite automatisch, damit nichts verzerrt. */
.mfs-fs-hero__col .mfs-fs-icon {
	flex: 0 0 auto;
	width: auto;
	height: 16px;
}

/* Einrückung = Icon-Breite plus Abstand, damit der Wert unter dem BEGRIFF beginnt, nicht unter dem
   Icon — so steht es im Design. */
.mfs-fs-hero__col dd {
	margin: 0 0 0 30px;
}

/* „Ort" und „Sprache" stehen im Design einzeilig. Hier NICHT inline-flex verwenden: dessen
   Grundlinie ist die des Flex-Containers, der Wert daneben säße sichtbar tiefer. Als reines `inline`
   sitzen Begriff und Wert auf derselben Grundlinie, das Icon wird per vertical-align eingehängt. */
.mfs-fs-hero__item--inline dt {
	display: inline;
}

.mfs-fs-hero__item--inline dt .mfs-fs-icon {
	margin-right: 8px;
	vertical-align: -2px;
}

.mfs-fs-hero__item--inline dd {
	display: inline;
	margin-left: 4px;
}

/* Die Aufzählung unter „Datum". */
.mfs-fs-hero__col dd ul {
	margin: 0;
	padding-left: 18px;
}

/* ------------------------------------------------------------------- Formular */

/* Die 840px-Spalte aus dem Design.
 *
 * Der Gegner ist eine konkrete Regel aus elementor/assets/css/frontend.min.css:
 *     .elementor.elementor .e-con > .elementor-widget { max-width: 100% }
 * Die hat Spezifität (0,4,0). Ein naheliegendes
 *     body.mfs-fellowship-lp .elementor-widget.mfs-fellowship-form
 * kommt nur auf (0,3,1) und verliert, ohne dass irgendwo !important stünde. Deshalb steht `.e-con`
 * hier mit im Selektor: das ergibt (0,4,1) und gewinnt knapp und ohne !important.
 *
 * Alternative wäre, den zweiten Container in Elementor auf "boxed" mit 840px zu stellen, statt die
 * Breite per CSS zu erzwingen. Das bleibt der sauberere Weg, sobald jemand die Seite ohnehin im
 * Editor anfasst; bis dahin hält diese Regel das Layout ohne Eingriff in den Seitenbaum. */
/* `:not(.mfs-fellowship-landing)`, weil BEIDE Seiten die Klasse `mfs-fellowship-lp` tragen — sie ist
   die gemeinsame Klammer für Kopfbereich und Hero. Diese Regel gilt aber nur der Formularseite: auf
   der Landingpage hat sie sonst jede Überschrift auf 840px gedeckelt und mittig gestellt. */
/* `min(...)`: die Regel ersetzt Elementors `max-width: 100%`, und ohne die 100% im Ausdruck darf
   der Block auf schmalen Bildschirmen auf die Mindestbreite seines Inhalts anwachsen und schiebt
   die Seite seitwärts auf. */
/* `:where([data-elementor-type="wp-page"])` grenzt auf den SEITENINHALT ein. Kopf- und Fußvorlage
   der Website bestehen aus denselben Elementor-Bausteinen und liegen im selben <body>; ohne die
   Klammer traf jede Regel auf `.elementor-widget-heading` auch die Wortmarke im Seitenfuß und
   drückte sie von 97px auf 52px. `:where()` trägt nichts zur Spezifität bei, die oben von Hand
   ausgerechneten (0,4,1) bleiben also genau so stehen. */
body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .e-con > .elementor-widget.mfs-fellowship-form,
body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .e-con > .elementor-widget-heading {
	max-width: min( var(--mfs-fs-width), 100% );
	margin-left: auto;
	margin-right: auto;
}

.mfs-fs-success {
	max-width: var(--mfs-fs-width);
	margin-left: auto;
	margin-right: auto;
}

.mfs-fellowship-form {
	color: var(--mfs-fs-ink);
}

/* ------------------------------------------------- Senkrechter Takt der Formularseite
 *
 * Elementor gibt jedem Container einen Abstand zwischen den Bausteinen: `--widgets-spacing`,
 * voreingestellt 20px. Die vier Bausteine dieser Seite (Kopfbereich, Hero, Überschrift, Formular)
 * standen dadurch überall 20px auseinander — im Entwurf schließt der Hero aber direkt an den
 * Kopfbereich an, und die Überschrift steht 80px darunter. Sichtbar war das als weißer Streifen
 * zwischen Kopfbereich und rosa Fläche.
 *
 * Der Abstand wird deshalb genullt und dort gesetzt, wo der Entwurf ihn führt. Gemessen am Frame
 * `Fellowhip_Form_01`: Kopfbereich 0..120, Hero 120..527, Überschrift bei 607 (= 80 unter dem Hero),
 * Stepper bei 677 (= 18 unter der Überschrift), Schritttitel bei 781 (= 80 unter dem Stepper). */
body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .e-con {
	--widgets-spacing: 0px;
	gap: 0;
}

/* Abstand zwischen Hero und Überschrift. Nur Formularseite, siehe oben: auf der Landingpage schob
   diese Regel jede Abschnittsüberschrift nach unten. */
body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .elementor-widget-heading {
	padding-top: 80px;
}

/* 18px zwischen Überschrift und Stepper. */
body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .elementor-widget.mfs-fellowship-form {
	margin-top: 18px;
}

/* Das Kit gibt h1 das Gewicht 600 bei 40px. Am Frame nachgemessen ist diese Überschrift aber
   schwerer und größer als die 40px-Überschriften der Landingpage: 455px breit statt 398 und 45px
   statt 37px hoch, also 46px. Als <h1> bleibt sie semantisch die Hauptüberschrift der Seite. */
body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .elementor-widget-heading .elementor-heading-title {
	font-size: 52px;
	font-weight: 700;
	line-height: 52px;
}

/* Zeilenabstand der Felder. Im Design liegen zwischen der Unterkante eines Feldes und der Oberkante
   des nächsten 57px; davon gehen Beschriftung (24px) und deren Abstand (8px) ab.
   Als PADDING an der Feldgruppe, nicht als row-gap am Wrapper: Elementor verteilt die Felder über
   eigene Abstände, ein row-gap am Wrapper bleibt wirkungslos. */
/* Der Abstand ZWISCHEN zwei Feldzeilen steht hier als Polsterung. Elementors eigener `row_gap`
   steht dafür auf 0 — er wird in mfs-fellowship-form.php gesetzt, weil Elementor ihn ins
   seiteneigene Stylesheet schreibt und der Selektor dort (0,4,0) wiegt. Die Begründung, warum der
   Abstand hier als Polsterung und nicht als Aussenabstand steht, ist der Wortzähler: er sitzt
   absolut im Feldblock und muss den Abstand mitrechnen. */
.mfs-fellowship-form .elementor-form-fields-wrapper {
	row-gap: 0;
}

.mfs-fellowship-form .elementor-field-group {
	padding-bottom: var(--mfs-fs-field-gap);
}

/* Die zwei zweispaltigen Zeilen auf Schritt 2 sind im Entwurf NICHT hälftig oder gedrittelt:
 * Straße 631 zu Hausnummer 187, PLZ 289 zu Ort 529, dazwischen je 24px (`Frame 61` und `Frame 62`).
 * Elementors Spaltenklassen kennen nur eine feste Liste (100/80/75/70/66/60/50/40/33/30/25/20) —
 * 75/25 und 33/66 treffen das nicht: PLZ wurde 265 statt 289 und Ort 553 statt 529.
 *
 * Die Prozentwerte beziehen sich auf den Feld-Wrapper, und der ist um die Spaltenlücke breiter als
 * die Formularspalte: 842 + 24 = 866. Eine Feldgruppe trägt links und rechts je 12px Polsterung,
 * ihr Inhalt ist also 24px schmaler als sie selbst. Für 631px Inhalt braucht es demnach 655px
 * Gruppe, und 655 / 866 = 75,635 %. Ebenso 211 (24,365 %), 313 (36,143 %) und 553 (63,857 %). */
.mfs-fellowship-form .elementor-field-group-street {
	width: 75.635%;
}

.mfs-fellowship-form .elementor-field-group-house_number {
	width: 24.365%;
}

.mfs-fellowship-form .elementor-field-group-postal_code {
	width: 36.143%;
}

.mfs-fellowship-form .elementor-field-group-city {
	width: 63.857%;
}

/* Die drei Kriterienkästen auf Schritt 1 stehen im Entwurf enger als die Eingabefelder
   (`Frame 70`, Abstand 16 gegen 24 bei `Frame 59`). */
.mfs-fellowship-form .elementor-field-group-criteria_age,
.mfs-fellowship-form .elementor-field-group-criteria_workshops,
.mfs-fellowship-form .elementor-field-group-criteria_language {
	padding-bottom: 16px;
}

/* Der Titelblock jedes Schrittes trägt seinen Abstand selbst (siehe `.mfs-fs__step-lead`, 56px). */
.mfs-fellowship-form .elementor-field-type-html {
	padding-bottom: 0;
}

/* ------------------------------------------------------------------- Stepper */

/* Elementor baut den Indikator aus .e-form__indicators__indicator (Kreis) und
   .e-form__indicators__indicator__separator (Linie dazwischen). Die Farbeinstellungen des Widgets
   decken nur Füllung und Text ab, Größe, Rahmen und Linienstärke kommen von hier. */
.mfs-fellowship-form .e-form__indicators {
	/* Im Frame läuft der Stepper von x=384 bis 1055, also 672px, mittig, und ist 24px hoch —
	   genau so hoch wie seine Kreise. Danach folgen 80px bis zum Schritttitel. */
	max-width: 672px;
	margin: 0 auto 80px;
	align-items: center;
	gap: 0;
}

/* Die Reihe war 34 statt 24px hoch: Elementor bemisst den Indikator nach seiner eigenen Zeilenhöhe,
   nicht nach dem 24px-Kreis darin. Die zehn Pixel schoben alles darunter mit nach unten. */
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__indicators__indicator {
	height: 24px;
}

/* Der Fortschrittsbalken hinter dem aktiven Schritt. Elementor kennt so etwas nicht: die Trennlinie
   ist dort immer ein 1px-Strich. Im Design liegt auf ihr ein dicker orangefarbener Balken, der
   anzeigt, wie weit man ist. Er kommt als Overlay auf die Linie, damit die Linie selbst 1px bleibt. */
/* `margin-top: 0` ist der Kern der QA-Meldung „Stepper zentriert ausrichten" vom 21.08.2026. Für
   nummerierte Stepper schreibt Elementor
   `margin-top: calc(var(--e-form-steps-indicator-padding, 30px) / 2 - Linienstärke / 2)`
   (widget-form.min.css), also voreingestellt 14,5px. Die Rechnung geht davon aus, dass der Kreis so
   groß ist wie Polsterung plus Schriftgrad — bei unserem festen 24px-Kreis stimmt sie nicht, und
   die Linie lag 14px unter den Kreismitten, sichtbar an der Unterkante der Kreise statt durch sie
   hindurch. `align-items: center` am Stepper trifft es ohne diesen Aussenabstand genau. */
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__indicators__indicator__separator {
	position: relative;
	margin-top: 0;
}

body.mfs-fellowship-lp .mfs-fellowship-form
	.e-form__indicators__indicator--state-active + .e-form__indicators__indicator__separator::before,
body.mfs-fellowship-lp .mfs-fellowship-form
	.e-form__indicators__indicator--state-completed + .e-form__indicators__indicator__separator::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	height: 6px;
	background: var(--mfs-fs-accent);
	transform: translateY(-50%);
}

/* Beim aktiven Schritt ist er im Design gut zur Hälfte gefüllt, hinter abgeschlossenen Schritten ganz. */
body.mfs-fellowship-lp .mfs-fellowship-form
	.e-form__indicators__indicator--state-active + .e-form__indicators__indicator__separator::before {
	width: 57%;
}

body.mfs-fellowship-lp .mfs-fellowship-form
	.e-form__indicators__indicator--state-completed + .e-form__indicators__indicator__separator::before {
	width: 100%;
}

body.mfs-fellowship-lp .mfs-fellowship-form .e-form__indicators__indicator__number {
	display: flex;
	align-items: center;
	justify-content: center;
	/* `flex: 0 0 auto` gehört dazu: der Indikator ist ein Flex-Kasten in SPALTENrichtung, die Höhe ist
	   dort die Hauptachse. Sobald er auf 24px festgelegt ist (siehe Regel darüber), schrumpft der
	   Kreis darin von 24 auf 14px und wird zur Ellipse. */
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	/* Elementor gibt dem Kreis `margin-bottom: 10px` als Abstand zur Schrittbeschriftung darunter
	   (widget-form.min.css). Eine Beschriftung gibt es hier nicht — der Entwurf zeigt nur Ziffern.
	   Die 10px blieben trotzdem stehen: der Indikator ist auf 24px festgelegt, sein Inhalt maß mit
	   dem Aussenabstand aber 34px und wurde darin zentriert, der Kreis stand also 5px zu hoch. Genau
	   diese 5px waren nach dem `margin-top: 0` an der Trennlinie noch übrig. */
	margin-bottom: 0;
	border: 1px solid var(--mfs-fs-ink);
	border-radius: 50%;
	font-size: 12px;
	line-height: 1;
}

/* Die Zustandsfarben (Füllung, Rahmen, Ziffer) stehen bewusst NICHT hier, sondern in
 * mfs-fellowship-form.php bei den `step_*_color`-Settings des Widgets. Elementor erzeugt daraus
 * CSS-Variablen und schreibt sie in das seiteneigene Stylesheet, dessen Selektor
 * (.elementor-11105 .elementor-element-…) mit Spezifität (0,3,0) jede Regel aus dieser Datei
 * schlägt. Farbänderungen am Stepper gehören deshalb ins PHP, nicht hierher.
 *
 * Der feine dunkle Ring auf den noch offenen Schritten bleibt hier, weil ihn keine der Variablen
 * abbildet: die Variable färbt Rahmen und Füllung gemeinsam. */
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__number {
	border-color: var(--mfs-fs-ink);
}

/* Die beiden folgenden !important sind bewusst gesetzt und hier die einzige Möglichkeit.
 *
 * Im globalen Custom CSS des Elementor-Kits (uploads/elementor/css/post-6.css, gepflegt unter
 * Website-Einstellungen → Benutzerdefiniertes CSS) steht UNGESCOPT:
 *
 *     .e-form__indicators__indicator--state-active  [class*=indicator--shape-]:not(…-shape-none),
 *     .e-form__indicators__indicator--state-inactive [class*=indicator--shape-]:not(…-shape-none) {
 *         background-color: #fffff5 !important; }
 *
 * Das stammt aus der Gestaltung des Preis-Formulars, gilt aber seitenweit und färbt deshalb auch
 * die Schritte dieses Formulars cremeweiß, egal was die `step_*_color`-Settings sagen. Genau daran
 * ist der aktive Schritt hier hängengeblieben. Gegen !important kommt keine Spezifität an, also
 * trägt die Gegenregel ebenfalls !important. Sie ist auf `body.mfs-fellowship-lp` begrenzt und kann
 * das Preis-Formular nicht berühren.
 *
 * Sauberer wäre, jene Kit-Regel auf das Preis-Formular zu scopen. Das ist bewusst NICHT Teil dieser
 * Arbeit, weil es das Aussehen der Preis-Seite verändern würde. */
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number {
	background-color: var(--mfs-fs-accent) !important;
}

body.mfs-fellowship-lp .mfs-fellowship-form .e-form__indicators__indicator--state-inactive .e-form__indicators__indicator__number {
	background-color: #ffffff !important;
}

/* Die Linie ist im Entwurf ein durchgezogener 1px-Strich in der Textfarbe. Hier stand statt einer
   eigenen Farbe eine Deckkraft von 0.35 — und `opacity` gilt für den ganzen Kasten samt seiner
   Kinder. Das ::before mit dem Fortschrittsbalken erbte sie also mit und lief statt in
   #E5B063 in einem ausgeblichenen #F3E3CA. Genau das zeigt der QA-Screenshot vom 21.08.2026.
   Deckkraft deshalb nie an einem Element, das ein gefärbtes Pseudoelement trägt. */
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__indicators__indicator__separator {
	height: 1px;
	background: var(--mfs-fs-ink);
}

/* Überschrift und Vorlauftext je Step, kommen aus den html-Feldern des Schemas. */
/* Am Frame nachgemessen: „1. Verpflichtende Kriterien" ist dort 433px breit, bei 28px waren es 483
   — also 25px. Der Lead darunter ist umgekehrt GRÖSSER als gedacht (831 statt 653), also 20px. */
/* Am Knoten abgelesen: 40/48 Bernhard Gothic Heavy — nicht 25px, das war geschätzt. */
/* `body.mfs-fellowship-lp` davor, weil das Kit für Überschriftenebenen eine eigene Zeilenhöhe
   mitbringt und eine einzelne Klasse dagegen verliert. */
/* Der Stepper trägt die 80px darüber, hier bleiben nur die 8px bis zum Vorspann
   (Titel 781..829, Vorspann bei 837). */
body.mfs-fellowship-lp .mfs-fs__step-title {
	margin: 0 0 8px;
	font-size: 40px;
	line-height: 48px;
}

/* Vorspann im Entwurf 21/25,2 (Franklin Gothic Book), darunter 56px bis zum ersten Feld
   (Vorspann 837..862, erster Kriterienkasten bei 918).
 *
 * Der Abstand steht als PADDING, nicht als margin. Das globale Custom CSS des Kits
 * (uploads/elementor/css/post-6.css, „GENERAL SETTINGS") setzt seitenweit
 *     p { margin-bottom: 0px !important; }
 * — jedes `margin-bottom` an einem <p> ist auf dieser Website wirkungslos. Genau daran hingen hier
 * vier Abstände still im Leeren: dieser, der im Modal, und die 80px auf der Erfolgs- und der
 * Schlussseite. Padding erreicht dasselbe und kollidiert mit nichts. */
.mfs-fs__step-lead {
	margin: 0;
	padding-bottom: 56px;
	font-size: 21px;
	line-height: var(--mfs-fs-lead);
}

/* Labels */
/* Feldbeschriftungen stehen im Entwurf in der AUSZEICHNUNGSSCHRIFT auf 20/24 (Knoten `Input_field`
   in `Fellowhip_Form_02`), nicht im Fließtextschnitt auf 16px. Darunter 8px bis zum Feld. */
.mfs-fellowship-form .elementor-field-label {
	margin-bottom: 8px;
	font-family: var(--mfs-flp-display, "Bernhard Gothic Lokal", Sans-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

/* Eingabefelder: im Entwurf dünn schwarz umrandet, eckig, weiß und 60px hoch — 24px Textzeile
   (16/24) plus 17px Polsterung oben und unten plus die beiden Rahmenlinien. Seitlich 16px, der
   Platzhalter beginnt im Entwurf 16px hinter der Feldkante. */
/* `font-family: inherit` ist hier nicht Beiwerk, sondern der eigentliche Punkt. Astra liefert im
   eingebetteten Blatt `input, textarea, select { font-family: -apple-system, BlinkMacSystemFont, … }`
   — und Formularfelder erben ihre Schrift ohnehin nicht von selbst, der Browser setzt sie auf seine
   Bedienoberflächenschrift. Jede Eingabe und jeder Platzhalter des Formulars lief dadurch in der
   Systemschrift statt in Franklin Gothic, während die Beschriftung darüber die Hausschrift trug.
   Im Entwurf steht der Feldinhalt in Franklin Gothic Book 16/24. */
.mfs-fellowship-form input:not([type="checkbox"]):not([type="radio"]),
.mfs-fellowship-form textarea,
.mfs-fellowship-form select {
	width: 100%;
	padding: 17px 16px;
	border: 1px solid var(--mfs-fs-line);
	border-radius: 0;
	background: #ffffff;
	color: var(--mfs-fs-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
}

.mfs-fellowship-form textarea {
	min-height: 120px;
	resize: vertical;
}

.mfs-fellowship-form ::placeholder {
	color: var(--mfs-fs-muted);
	opacity: 1;
}

/* Elementor setzt beim Schrittwechsel den Fokus auf das erste Feld des neuen Schrittes — das ist
   hier der Titelblock. Das ist richtig so (der Schrittwechsel wird angesagt), der Browser zeichnet
   dafür aber seinen blauen Standardrahmen. Hier dieselbe Markierung wie an allen anderen Stellen. */
.mfs-fellowship-form .elementor-field-type-html:focus-visible {
	outline: 2px solid var(--mfs-fs-accent);
	outline-offset: 4px;
}

.mfs-fellowship-form input:focus-visible,
.mfs-fellowship-form textarea:focus-visible {
	outline: 2px solid var(--mfs-fs-accent);
	outline-offset: 1px;
}

/* ------------------------------------------------------------- Wortzähler */

.mfs-fs-counted {
	position: relative;
}

/* Am Knoten in `Fellowhip_Form_03`: 12/14, 16px vom rechten Rand und 16px über der Unterkante des
   Feldes. Der Feldabstand steckt mit im Wert, weil der Zähler absolut im Feldblock sitzt. */
/* Die halbe Spaltenlücke kommt oben drauf: der Zähler sitzt absolut in der FELDGRUPPE, und die ist
   um genau diese Polsterung breiter als das Textfeld darin. Ohne den Zuschlag stand er 4 statt
   16px vom rechten Feldrand. */
.mfs-fs-counter {
	position: absolute;
	right: calc(16px + var(--mfs-fs-col-gap) / 2);
	bottom: calc(var(--mfs-fs-field-gap) + 16px);
	color: var(--mfs-fs-muted);
	font-size: 12px;
	line-height: 14px;
	pointer-events: none;
}

/* Über dem Limit: der Server weist ab, also muss es hier deutlich sichtbar sein. */
.mfs-fs-counter.is-over {
	color: #b3261e;
	font-weight: 700;
}

/* Platz schaffen, damit der Zähler nicht auf dem Text liegt.
   `resize: none` aus zwei Gründen: im Design haben die Felder keinen Anfasser, UND der Wortzähler
   sitzt absolut am Feldblock — zöge jemand das Feld größer, bliebe der Zähler auf halber Höhe
   zurück. Die Felder sind großzügig bemessen und das Wortlimit begrenzt den Inhalt ohnehin. */
/* 155px hoch wie im Entwurf: 16px Polsterung oben, zwei Zeilen Platzhalter, darunter Raum für den
   Zähler. `box-sizing` greift, die Höhe ist also inklusive Polsterung und Rahmen. */
.mfs-fs-counted textarea {
	height: 155px;
	padding-bottom: 30px;
	resize: none;
}

/* Verlinkter Text in den Zustimmungen ist im Design unterstrichen. */
.mfs-fellowship-form .elementor-field-type-acceptance label a {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------- Kriterien-Checkboxen (Step 1) */

/* Jedes Kriterium steht im Entwurf in einer eigenen umrandeten Box (`Checkbox group item`):
   842x60 bei einer Zeile, 16px Polsterung ringsum, das 20px-Kästchen 16px von der Kante und
   16px Abstand zur Beschriftung (Kästchen 315..335, Text ab 351 bei Kastenkante 299). */
/* Die Polsterung ist im Entwurf nicht gleichmäßig: 16px oben, 20px unten. Hier 16/18, damit der
   Kasten mit den beiden Rahmenlinien auf genau die 60px des Entwurfs kommt. */
.mfs-fellowship-form .elementor-field-type-acceptance .elementor-field-subgroup {
	padding: 16px 16px 18px;
	border: 1px solid var(--mfs-fs-line);
}

.mfs-fellowship-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

/* Im Entwurf 20x20, 16px von der Kastenkante entfernt (`_Checkbox base`). */
.mfs-fellowship-form .elementor-field-type-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--mfs-fs-ink);
}

.mfs-fellowship-form .elementor-field-type-acceptance label {
	font-size: 16px;
	line-height: 24px;
}

/* ------------------------------------------------- Einfach- und Mehrfachauswahl (Radios)
 *
 * „Einzelbewerbung / Tandembewerbung" auf Schritt 2 stand als einziges Feld des Formulars
 * unberührt da: 13px große Standardknöpfe, Beschriftung auf der geerbten Zeilenhöhe von 19,2 und
 * die beiden Zeilen 19px auseinander. Der Entwurf (`Wrapper_Tandem`) zeigt dieselbe Anmutung wie
 * die Kriterienkästen: Knopf 20x20, 10px bis zur Beschriftung, diese 16/24, und 24px zwischen den
 * beiden Zeilen (Zeilen bei y=1945 und 1993, also 48 von Oberkante zu Oberkante). */
.mfs-fellowship-form .elementor-field-type-radio .elementor-field-subgroup {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mfs-fellowship-form .elementor-field-type-radio .elementor-field-option {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.mfs-fellowship-form .elementor-field-type-radio input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--mfs-fs-ink);
}

.mfs-fellowship-form .elementor-field-type-radio label {
	font-size: 16px;
	line-height: 24px;
}

/* Im Entwurf stehen über der ersten Auswahlzeile 32px (`Wrapper_Tandem`, Polsterung oben), mehr als
   die 24 zwischen zwei gewöhnlichen Feldern. */
.mfs-fellowship-form .elementor-field-group-application_type {
	padding-top: 8px;
}

/* Die drei Zustimmungen auf Step 5 stehen ohne Kasten, nur Checkbox plus Text — und dort steht das
   Kästchen im Entwurf NÄHER am Text als in den Kriterienkästen: `Input_Checkbox` führt 10px,
   `Checkbox group item` auf Schritt 1 dagegen 16. */
.mfs-fellowship-form .elementor-field-group-consent_modules .elementor-field-subgroup,
.mfs-fellowship-form .elementor-field-group-consent_workshops .elementor-field-subgroup,
.mfs-fellowship-form .elementor-field-group-consent_privacy .elementor-field-subgroup {
	padding: 0;
	border: 0;
}

.mfs-fellowship-form .elementor-field-group-consent_modules .elementor-field-option,
.mfs-fellowship-form .elementor-field-group-consent_workshops .elementor-field-option,
.mfs-fellowship-form .elementor-field-group-consent_privacy .elementor-field-option {
	gap: 10px;
}

/* ------------------------------------------------- Bedingtes Tandem-Feld */

.mfs-fs-disabled {
	opacity: 0.45;
}

.mfs-fs-disabled input {
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ Buttons */

/* Im Design sind diese Buttons 329px breit und stehen rechts, nicht über die ganze Spalte. */
.mfs-fellowship-form .e-form__buttons__wrapper {
	flex: 0 0 auto;
	width: auto;
}

/* Knopf im Entwurf 329x56 mit Beschriftung Franklin Gothic Medium 18/20 in Versalien, ohne
   Sperrung — dieselben Werte wie auf der Landingpage.
 *
 * `body.mfs-fellowship-lp` steht davor, und das ist hier keine Vorsicht, sondern nötig. Astra
 * liefert im eingebetteten Stylesheet
 *     body .elementor-button.elementor-size-sm { padding: 15px 30px; font-size: 0.888889rem }
 * mit Spezifität (0,2,1). Ein zweiklassiger Selektor kommt nur auf (0,2,0) und verliert: der Knopf
 * stand deshalb auf 16px und war 50 statt 56px hoch, obwohl hier 18px steht. Mit der Body-Klasse
 * sind es (0,3,1) und die Werte des Entwurfs greifen. */
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-button[type="submit"],
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-next {
	min-width: 329px;
	min-height: 56px;
	padding: 18px 40px;
	border: 0;
	border-radius: 0;
	background: var(--mfs-fs-ink);
	color: #ffffff;
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	text-transform: uppercase;
	cursor: pointer;
}

/* "Zurück" ist im Design kein Button, sondern ein Textlink mit Pfeil. */
/* `body.mfs-fellowship-lp` aus demselben Grund wie beim Knopf darüber: gegen Astras
   `body .elementor-button.elementor-size-sm` (0,2,1) verliert ein zweiklassiger Selektor. Solange
   „Zurück" weiß auf weiß stand, ist es niemandem aufgefallen — mit der Farbkorrektur wurde
   sichtbar, dass die Beschriftung auf 16px statt 18 lief und die Zeile 50px hoch war. */
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-previous {
	display: inline-flex;
	align-items: center;
	padding: 16px 0;
	border: 0;
	background: none;
	color: var(--mfs-fs-ink);
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	text-transform: uppercase;
	cursor: pointer;
}

.mfs-fellowship-form .e-form__buttons__wrapper__button-previous::before {
	content: "";
	width: 18px;
	height: 12px;
	background: currentColor;
	/* Pfeil nach links als Form, nicht als Zeichen: U+2190 fehlt in Franklin Gothic und käme sonst
	   als Ersatzglyphe aus einer anderen Schrift. */
	clip-path: polygon(0 6px, 7px 0, 7px 4px, 18px 4px, 18px 8px, 7px 8px, 7px 12px);
	margin-right: 10px;
}

/* Derselbe Look für den „Zurück"-Link auf Schritt 1 (siehe initStepOneBack im JS). Er verschwindet,
   sobald Elementors eigener Zurück-Button da ist, also ab Schritt 2. */
/* Halbe Spaltenlücke als Einzug: Elementors eigene Knöpfe stecken je in einer Feldgruppe, und die
   trägt sie als Polsterung. Dieser Link ist von Hand eingehängt und sitzt direkt in der Knopfzeile —
   ohne den Ausgleich stünde er 12px links von der Formularspalte. */
.mfs-fellowship-form .mfs-fs-back {
	display: inline-flex;
	align-items: center;
	align-self: center;
	margin-left: calc(var(--mfs-fs-col-gap) / 2);
	color: var(--mfs-fs-ink);
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	text-transform: uppercase;
}

.mfs-fellowship-form .mfs-fs-back::before {
	content: "";
	width: 18px;
	height: 12px;
	background: currentColor;
	/* Pfeil nach links als Form, nicht als Zeichen: U+2190 fehlt in Franklin Gothic und käme sonst
	   als Ersatzglyphe aus einer anderen Schrift. */
	clip-path: polygon(0 6px, 7px 0, 7px 4px, 18px 4px, 18px 8px, 7px 8px, 7px 12px);
	margin-right: 10px;
}

.mfs-fellowship-form .e-form__buttons:has(.e-form__buttons__wrapper__button-previous) .mfs-fs-back {
	display: none;
}

/* Links „Zurück", rechts der Weiter-Button. Auf Schritt 1 ist links der eigene Link (siehe
   initStepOneBack), ab Schritt 2 Elementors Zurück-Button — in beiden Fällen zwei sichtbare
   Elemente, die an die Außenkanten rücken. */
/* Im Entwurf liegen 80px zwischen dem letzten Feld und der Knopfzeile (letzter Kriterienkasten
   endet bei 1154, `Frame 71` beginnt bei 1234). 64 davon stehen hier, die restlichen 16 bringt die
   Polsterung des letzten Kriterienkastens mit. Auf den Schritten 2 bis 5 sind es dessen 24, dort
   also 88 — der Unterschied fällt neben einem 56px hohen Knopf nicht auf, und ein eigener Wert je
   Schritt wäre mehr Regelwerk als Gewinn. */
.mfs-fellowship-form .e-form__buttons {
	justify-content: space-between;
	margin-top: 64px;
}

/* ------------------------------------------- Zeigen, Fokussieren, Besuchen
 *
 * Bis 1.17.2 gab es hier KEINE einzige Zustandsregel — für einen Entwurf, der selbst keine
 * Zeigezustände zeichnet, sah das nach einer bewussten Auslassung aus. Es war keine. Drei fremde
 * Regeln haben die Lücke gefüllt:
 *
 * 1. `.elementor-kit-6 a:hover { color: #898989 }` aus dem Custom CSS des Kits, Spezifität (0,2,0).
 *    Unsere Knopfregeln liegen ebenfalls bei (0,2,0), das Kit-Stylesheet lädt aber später und
 *    gewinnt damit den Gleichstand: die weiße Beschriftung auf den schwarzen Knöpfen wurde beim
 *    Zeigen grau.
 * 2. `a:focus { outline: thin dotted }` aus Astras main.min.css zeichnete beim Anklicken einen
 *    gepunkteten Rahmen um die Knöpfe, in der jeweiligen Textfarbe.
 * 3. Wo unsere Farbe gar nicht ankam — etwa mit veraltetem Browsercache, siehe die Fassungsnummer
 *    in mfs-fellowship-landingpage.php — blieb für einen bereits besuchten Link die Vorgabe des
 *    Browsers stehen: violett.
 *
 * Deshalb steht die Farbe jetzt für JEDEN Zustand ausdrücklich da. Der Entwurf gibt keinen
 * Zeigezustand vor; gewählt ist der zurückhaltendste, der überhaupt einen Unterschied macht:
 * Flächen werden eine Spur heller, die Beschriftung bleibt, wo sie ist. Textlinks behalten ihre
 * Farbe und bekommen die Unterstreichung.
 */

body.mfs-fellowship-lp {
	/* #111111 eine Stufe aufgehellt. Kein neuer Farbwert im engeren Sinne, nur dasselbe Schwarz
	   heller — die Palette des Entwurfs bleibt damit unberührt. */
	--mfs-fs-ink-hover: #333333;
	--mfs-fs-closed-hover: #9a9a9a;
}

/* Die schwarzen Flächen. Beschriftung in allen Zuständen weiß, damit weder das Kit noch die
   Browservorgabe für besuchte Links daran etwas ändern kann. */
body.mfs-fellowship-lp .mfs-fs-header__cta,
body.mfs-fellowship-lp .mfs-fs-header__cta:link,
body.mfs-fellowship-lp .mfs-fs-header__cta:visited,
body.mfs-fellowship-lp .mfs-fs-header__cta:hover,
body.mfs-fellowship-lp .mfs-fs-header__cta:focus,
body.mfs-fellowship-lp .mfs-fs-header__cta:active,
body.mfs-fellowship-lp .mfs-fs-success__cta,
body.mfs-fellowship-lp .mfs-fs-success__cta:link,
body.mfs-fellowship-lp .mfs-fs-success__cta:visited,
body.mfs-fellowship-lp .mfs-fs-success__cta:hover,
body.mfs-fellowship-lp .mfs-fs-success__cta:focus,
body.mfs-fellowship-lp .mfs-fs-success__cta:active,
body.mfs-fellowship-lp .mfs-fs-closed__cta,
body.mfs-fellowship-lp .mfs-fs-closed__cta:link,
body.mfs-fellowship-lp .mfs-fs-closed__cta:visited,
body.mfs-fellowship-lp .mfs-fs-closed__cta:hover,
body.mfs-fellowship-lp .mfs-fs-closed__cta:focus,
body.mfs-fellowship-lp .mfs-fs-closed__cta:active,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__primary:hover,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__primary:focus,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-button[type="submit"]:hover,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-button[type="submit"]:focus,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-next:hover,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-next:focus {
	color: #ffffff;
}

/* Nur `:hover`, ausdrücklich nicht `:focus`. Das Modal setzt den Fokus beim Öffnen auf seinen
   Hauptknopf (richtig so, sonst führt die Tastatur aus dem Dialog heraus) — mit `:focus` in dieser
   Liste stünde der Knopf dort von Anfang an grau statt schwarz da. Dass er den Fokus hat, sagt der
   Ring weiter unten. */
body.mfs-fellowship-lp .mfs-fs-header__cta:hover,
body.mfs-fellowship-lp .mfs-fs-success__cta:hover,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__primary:hover,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-button[type="submit"]:hover,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-next:hover {
	background-color: var(--mfs-fs-ink-hover);
}

/* Nach Bewerbungsschluss zeigt der Rückweg zur Startseite dieselbe Fläche in Grau. */
body.mfs-fellowship-lp .mfs-fs-closed__cta:hover {
	background-color: var(--mfs-fs-closed-hover);
}

/* Die Textlinks: „Zurück", „Zurück zur Startseite", die Datenschutzlinks in den Zustimmungen.
   Farbe fest, Unterstreichung als Rückmeldung. */
body.mfs-fellowship-lp .mfs-fs-back,
body.mfs-fellowship-lp .mfs-fs-back:link,
body.mfs-fellowship-lp .mfs-fs-back:visited,
body.mfs-fellowship-lp .mfs-fs-back:hover,
body.mfs-fellowship-lp .mfs-fs-back:focus,
body.mfs-fellowship-lp .mfs-fs-back:active,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary:link,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary:visited,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary:hover,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary:focus,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary:active,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-previous:hover,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-previous:focus,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-field-type-acceptance label a:hover,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-field-type-acceptance label a:focus {
	color: var(--mfs-fs-ink);
}

body.mfs-fellowship-lp .mfs-fs-back:hover,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary:hover,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-previous:hover,
body.mfs-fellowship-lp .mfs-fs-hero__toggle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Eine einzige Fokusmarkierung für alles, was sich betätigen lässt: derselbe Akzentring wie an den
   Eingabefeldern weiter oben. `:focus` ohne Ring, `:focus-visible` mit — dann erscheint er beim
   Tabben und nicht beim Klicken, und Astras gepunkteter Rahmen ist beide Male weg. Die Reihenfolge
   ist wichtig: bei gleicher Spezifität gewinnt die spätere Regel. */
body.mfs-fellowship-lp .mfs-fs-header__cta:focus,
body.mfs-fellowship-lp .mfs-fs-back:focus,
body.mfs-fellowship-lp .mfs-fs-success__cta:focus,
body.mfs-fellowship-lp .mfs-fs-closed__cta:focus,
body.mfs-fellowship-lp .mfs-fs-hero__toggle:focus,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__primary:focus,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary:focus,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__x:focus,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-button[type="submit"]:focus,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-next:focus,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-previous:focus,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-field-type-acceptance label a:focus {
	outline: none;
}

body.mfs-fellowship-lp .mfs-fs-header__cta:focus-visible,
body.mfs-fellowship-lp .mfs-fs-back:focus-visible,
body.mfs-fellowship-lp .mfs-fs-success__cta:focus-visible,
body.mfs-fellowship-lp .mfs-fs-closed__cta:focus-visible,
body.mfs-fellowship-lp .mfs-fs-hero__toggle:focus-visible,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__primary:focus-visible,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__secondary:focus-visible,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__x:focus-visible,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-button[type="submit"]:focus-visible,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-next:focus-visible,
body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-previous:focus-visible,
body.mfs-fellowship-lp .mfs-fellowship-form .elementor-field-type-acceptance label a:focus-visible {
	outline: 2px solid var(--mfs-fs-accent);
	outline-offset: 2px;
}

/* Der Aufklapper der Eckdaten-Karte und das Schließkreuz des Modals sind ebenfalls Schaltflächen. */
body.mfs-fellowship-lp .mfs-fs-hero__toggle:hover,
body.mfs-fellowship-lp .mfs-fs-modal .mfs-fs-modal__x:hover {
	color: var(--mfs-fs-ink);
	cursor: pointer;
}

/* ------------------------------------------------------------------- Modal */

.mfs-fs-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.5);
}

.mfs-fs-modal.is-open {
	display: flex;
}

body.mfs-fs-modal-open {
	overflow: hidden;
}

/* Maße aus dem Eigenschaften-Panel des Frames `Fellowhip_Form_01_Modal`: 656px breit, Polsterung
   48 oben / 32 seitlich / 40 unten, 32px zwischen den Blöcken. */
.mfs-fs-modal__dialog {
	position: relative;
	width: min(100%, 656px);
	max-height: calc(100vh - 48px);
	overflow: auto;
	padding: 48px 32px 40px;
	background: #ffffff;
	color: var(--mfs-fs-ink);
}

/* Farbe ausdrücklich: das Theme färbt Buttons ein, ohne sie wäre das Kreuz hell auf Weiß.
   Das Kreuz selbst wird gezeichnet statt gesetzt: das Zeichen „×" ist als Glyphe nur 8px breit und
   dünn, im Design steht dort ein richtiges Icon mit zwei kräftigen Strichen. Die Beschriftung für
   Screenreader hängt am aria-label des Buttons, nicht am Zeichen — `font-size: 0` schadet ihr nicht. */
/* Im Entwurf sitzt das Kreuz 16px von der oberen und 16px von der rechten Kante des Dialogs
   (Knoten `X` 24x24 bei 1008,715 im 656px-Dialog ab 392,699). */
.mfs-fs-modal .mfs-fs-modal__x {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mfs-fs-ink);
	font-size: 0;
	cursor: pointer;
}

.mfs-fs-modal .mfs-fs-modal__x::before,
.mfs-fs-modal .mfs-fs-modal__x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 3px;
	width: 19px;
	height: 2px;
	background: currentColor;
}

.mfs-fs-modal .mfs-fs-modal__x::before {
	transform: rotate(45deg);
}

.mfs-fs-modal .mfs-fs-modal__x::after {
	transform: rotate(-45deg);
}

/* Zwei Klassen im Selektor: das Kit setzt `.elementor-kit-6 h2 { font-size: 40px }` (0,1,1), eine
   einzelne Klasse verliert dagegen und die Überschrift lief auf 40px auf. */
/* Der Dialog ist im Entwurf ein senkrechter Stapel: Textblock, 32px, Knopfblock. Innerhalb des
   Textblocks stehen 12px zwischen Titel, Absatz und Liste (`Frame 1`, Abstand 12), innerhalb der
   Liste 8px zwischen den Punkten (die innere `Frame 1`, Abstand 8). Vorher war es umgekehrt: vor
   der Liste stand gar nichts, zwischen den Punkten 12px. */
.mfs-fs-modal .mfs-fs-modal__title {
	margin: 0 0 12px;
	font-size: 26px;
	line-height: 31.2px;
}

/* Als PADDING, nicht als margin: das Kit setzt seitenweit `p { margin-bottom: 0 !important }`,
   die 12px unter diesem Absatz fielen deshalb ersatzlos aus und die Liste klebte am Text. */
.mfs-fs-modal .mfs-fs-modal__text {
	margin: 0;
	padding-bottom: 12px;
	font-size: 21px;
	line-height: var(--mfs-fs-lead);
}

/* 32px Abstand zum Button, das ist der Blockabstand des Modals. */
.mfs-fs-modal .mfs-fs-modal__list {
	margin: 0 0 32px;
	padding-left: 24px;
	font-size: 21px;
	line-height: var(--mfs-fs-lead);
}

.mfs-fs-modal .mfs-fs-modal__list li + li {
	margin-top: 8px;
}

/* Das Modal hängt am <body>, nicht im Formular — dort greifen die Button-Regeln des Themes, die
   dem Knopf ihre eigene (blaue) Fläche geben. Zwei Klassen im Selektor stellen das richtig. */
/* Im Entwurf 592x56 über die volle Breite des Inhalts, Beschriftung 18/20 in Versalien. */
.mfs-fs-modal .mfs-fs-modal__primary {
	display: block;
	width: 100%;
	padding: 18px 16px;
	border: 0;
	background: var(--mfs-fs-ink);
	color: #ffffff;
	font: inherit;
	font-size: 18px;
	line-height: 20px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
}

/* „Zurück zur Startseite" steht im Entwurf in derselben Knopfschrift wie alles andere: Franklin
   Gothic Medium 18/20 in Versalien (Knoten 198x20 unter dem Hauptknopf), nicht in 12px. */
.mfs-fs-modal .mfs-fs-modal__secondary {
	display: block;
	margin-top: 16px;
	color: var(--mfs-fs-ink);
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

/* --------------------------------------------------------- Success-Screen */

.mfs-fs-success {
	display: none;
	max-width: var(--mfs-fs-width);
	margin: 0 auto;
	padding: 60px 20px 80px;
	text-align: center;
}

.mfs-fs-success.is-visible {
	display: block;
}

/* Aus den Knoten von `Fellowhip_Form_Success` (83:1632) und `... | State ab 26.09.` (83:1662),
   beide zeigen denselben Block: Titel 52/52 (bis 744 breit), Text 21/25 in 592px, Knopf 329x56. */
/* `body.mfs-fellowship-lp` davor: das Kit setzt h2 auf 40px, und eine einzelne Klasse
   verliert gegen dessen Spezifitaet. */
body.mfs-fellowship-lp .mfs-fs-success__title {
	margin: 0 0 24px;
	font-size: 52px;
	line-height: 52px;
}

/* 80px bis zum Knopf (Text 683..759, Knopf bei 839). Als PADDING, siehe `.mfs-fs__step-lead`:
   `p { margin-bottom: 0 !important }` aus dem Kit hätte die 80 verschluckt, der Knopf klebte am
   Text. */
.mfs-fs-success__text {
	margin: 0 auto;
	padding-bottom: 80px;
	max-width: 592px;
	font-size: 21px;
	line-height: var(--mfs-fs-lead);
}

.mfs-fs-success__cta,
.mfs-fs-closed__cta {
	display: inline-block;
	min-width: 329px;
	padding: 18px 40px;
	background: var(--mfs-fs-ink);
	color: #ffffff;
	font-size: 18px;
	line-height: 20px;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
}

/* ------------------------------------------- Nach Bewerbungsschluss (ab 26.09.) */

/* Steht an der Stelle, an der bis zum 25.09. die Überschrift „Bewerbungsformular" und darunter das
   Formular stehen. Bewusst dieselbe zentrierte Anmutung wie der Success-Screen: beide sagen
   dasselbe („hier ist nichts mehr zu tun"), und die Seite soll dabei nicht die Gestalt wechseln. */
.mfs-fs-closed {
	max-width: var(--mfs-fs-width);
	margin: 0 auto;
	padding: 60px 20px 80px;
	text-align: center;
}

/* Die Farbe MUSS hier stehen. Das Kit setzt seitenweit `.elementor-kit-6 h1 { color:#FFFFFF }`
   (post-6.css, --e-global-color-c02967a), weil auf dieser Website jede h1 auf einer farbigen Fläche
   sitzt. Ein blankes <h1> auf weißem Grund ist damit unsichtbar — genau so ist diese Überschrift
   beim Bauen zuerst spurlos verschwunden. Elementors eigenes heading-Widget merkt davon nichts,
   weil es zusätzlich `.elementor-widget-heading .elementor-heading-title` einfärbt; hier ist es
   aber eigenes Markup. Zwei Klassen im Selektor schlagen die (0,1,1) der Kit-Regel ohne
   !important. */
/* `body.mfs-fellowship-lp` davor: das Kit setzt h1/h2 auf 40px, und eine einzelne Klasse verliert
   gegen dessen Spezifität. */
body.mfs-fellowship-lp .mfs-fs-closed__title {
	margin: 0 0 24px;
	color: var(--mfs-fs-ink, #111111);
	font-size: 52px;
	line-height: 52px;
}

/* Wie beim Erfolgsschirm: die 80px als Polsterung, sonst frisst sie die Kit-Regel für <p>. */
.mfs-fs-closed__text {
	margin: 0 auto;
	padding-bottom: 80px;
	max-width: 592px;
	font-size: 21px;
	line-height: var(--mfs-fs-lead);
}

/* -------------------------------------------------------------------- Mobil */

/* Kopfbereich und Hero laufen in beiden kleinen Rahmen bis an den Bildschirmrand, und der
   Seitenrand von 16px steht an den Bausteinen selbst. Der Inhaltsrahmen des Themes bringt
   zusätzlich 20px mit — auf dem Tablet war der Inhalt dadurch 696 statt 736px breit und die
   vier Sprechblasen 332 statt 352. */
/* Der gemeinsame Seitenfuß der Website (Elementor-Vorlage „MF Footer Relaunch", #1167) setzt die
 * Wortmarke auf 97px. Auf 390px Breite passt die Zeile nicht und macht das DOKUMENT 409px breit —
 * die Seite lässt sich dann seitwärts schieben. Das betrifft jede Seite der Website und gehört in
 * die Fußvorlage; bis die angefasst wird, schneiden wir den Überstand wenigstens auf UNSEREN
 * beiden Seiten ab, statt den seitlichen Versatz stehen zu lassen. Nur der Fuß, nicht das <body>:
 * ein `overflow-x` am Body würde `position: sticky` im ganzen Dokument aushebeln.
 */
@media (max-width: 1023px) {
	body.mfs-fellowship-lp .elementor-location-footer {
		overflow-x: hidden;
	}
}

/* KOPFBEREICH: eigener Haltepunkt, und zwar früher als der Rest der Seite.
 *
 * Die große Fassung braucht Platz für Wortmarke (310), Frist und Countdown (671), Knopf und die
 * beiden 80px-Ränder — zusammen 1165px. Erst darüber passt sie in die Zeile; darunter drückte der
 * Flex-Kasten die Wortmarke zusammen (bei 1024px auf 169 statt 310). Der Haltepunkt liegt deshalb
 * bei 1199px und nicht bei den 1023, die für den übrigen Seiteninhalt gelten: der Kopfbereich ist
 * eine geschlossene Leiste, er darf früher auf die kompakte Fassung wechseln als der Text darunter.
 *
 * Die kompakte Fassung ist die des Entwurfs für kleine Breiten (Rahmen `Tablet-View` führt
 * dieselbe kleine Staffel wie der Telefonrahmen): kleinere Wortmarke, Frist in 14/17, nur die
 * Tage-Kachel, kein Bewerben-Knopf.
 */
@media (max-width: 1199px) {
	/* Maße aus dem kleinen Rahmen des Entwurfs. */
	/* 80px hoch und 8px Rand links: Maße des Telefonrahmens vom 24.08.2026 (Kopfbereich 390x80,
	   Logokasten 105x64 an Position 8,8). Vorher standen hier 90 und 13 — die Maße des Rahmens
	   vom 10.08. mit der alten, querliegenden Wortmarke. */
	.mfs-fs-header {
		gap: 10px;
		min-height: 80px;
		padding: 0 20px 0 8px;
	}

	/* 64px wie im Entwurf vom 24.08.2026 (`260824_LP-Fellowship_mb`: Logokasten 105x64, Wortmarke
	   83x46 darin). Bis dahin standen hier 51px — das Maß der querliegenden Sperrschrift, die die
	   Wortmarke abgelöst hat. `max-height`, nicht `height`: bei 390px bleibt neben Frist und Kachel
	   nur begrenzt Platz, die Marke wird dann proportional kleiner statt schmal gequetscht. */
	.mfs-fs-header .mfs-fs-header__logo-img {
		max-height: 64px;
	}

	/* Die Frist steht klein in 14/17 (Frame `LP-Fellowship_mb`), nicht in 16/24. */
	.mfs-fs-header__deadline {
		gap: 10px;
		font-size: 14px;
		line-height: 17px;
	}

	/* Kachel 48x50 mit deutlich größerer Zahl, wie im kleinen Rahmen. */
	.mfs-fs-cd__cell {
		min-width: 48px;
		padding: 5px 4px;
	}

	.mfs-fs-cd__cell b {
		font-size: 24px;
	}

	.mfs-fs-cd__cell i {
		font-size: 11px;
	}

	/* Nur die Tage-Kachel, und kein Bewerben-Knopf im Kopf — beides zeigt der kleine Rahmen so.
	   Die Landingpage hat vier weitere Bewerben-Knöpfe im Seiteninhalt, der Weg ins Formular geht
	   also nicht verloren. */
	.mfs-fs-cd__cell:not(:first-child) {
		display: none;
	}

	.mfs-fs-header__cta {
		display: none;
	}
}

@media (max-width: 1023px) {
	body.mfs-fellowship-lp .ast-container {
		padding-left: 0;
		padding-right: 0;
	}


	/* Wortmarke und Eckdaten untereinander. Nebeneinander bleibt für die Marke bei 768px nur noch
	   eine Spalte von rund 230px, sie schrumpft dann auf ein Fünftel ihrer Entwurfsgröße. Der
	   Telefonrahmen zeigt genau diesen gestapelten Aufbau. */
	.mfs-fs-hero__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 28px 20px 24px;
	}

	/* Gestapelt gilt die breite Fassung der Wortmarke, wie im Telefonrahmen. */
	.mfs-fs-hero__mark-img.mfs-fs-hero__mark-img--tall {
		display: none;
	}

	.mfs-fs-hero__mark-img.mfs-fs-hero__mark-img--wide {
		display: block;
		width: 100%;
		margin-left: 0;
	}
}

/* Der Seitenrand des Formulars greift erst, wenn die 842px-Spalte nicht mehr zwischen die Ränder
   passt (842 + 2x20). Darüber bliebe sonst ohne Not ein Sprung von 842 auf 802px Inhaltsbreite. */
@media (max-width: 881px) {
	.mfs-fellowship-form,
	body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .elementor-widget-heading {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Unter 780px kommt Astras `p { margin-bottom: 1.75em }` zurück: das Custom CSS des Kits, das es
   seitenweit auf 0 setzt, steht in `post-6.css` innerhalb eines `@media (min-width: 780px)`. Auf dem
   Telefon standen dadurch unter jedem Absatz zusätzlich rund 24px — betrifft Vorspann, Modaltext,
   Erfolgs- und Schlussseite, also genau die vier Stellen, deren Abstände in 1.17.2 mühsam von
   `margin-bottom` auf `padding-bottom` umgestellt wurden. Ausführlicher steht das in
   fellowship-lp.css. */
@media (max-width: 779px) {
	body.mfs-fellowship-lp :where([data-elementor-type="wp-page"]) p {
		margin-bottom: 0;
	}
}

@media (max-width: 767px) {
	/* Der Kopfbereich misst auf dem Telefon 390x90 statt 1440x120 (Frame `LP-Fellowhip_mb`).
	   Seine Maße, der 51px-Logo­schnitt, die kleine Frist und die einzelne Countdown-Kachel stehen
	   seit 1.19.0 schon im 1023er-Block weiter oben — sie gelten also für Tablet UND Telefon. Hier
	   stünden sie nur ein zweites Mal. */

	/* Am Rahmen `Fellowship_Form_01_mb` abgelesen: 30/36 (Desktop 52/52). */
	body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .elementor-widget-heading .elementor-heading-title {
		font-size: 30px;
		line-height: 36px;
	}

	/* Der senkrechte Takt ist auf dem Telefon durchweg enger als auf dem Desktop. Aus dem Rahmen
	   `Fellowship_Form_01_mb`: Hero endet bei 387, Überschrift bei 435 (also 48 statt 80), Stepper
	   bei 495 (24 statt 18), Schritttitel bei 570 (rund 50 statt 80), Vorspann bei 608 (8 wie auf
	   dem Desktop), erster Kasten bei 687 (rund 32 statt 56). */
	body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .elementor-widget-heading {
		padding-top: 48px;
	}

	body.mfs-fellowship-lp:not(.mfs-fellowship-landing) :where([data-elementor-type="wp-page"]) .elementor-widget.mfs-fellowship-form {
		margin-top: 24px;
	}

	.mfs-fs__step-lead {
		padding-bottom: 32px;
	}

	.mfs-fellowship-form .e-form__buttons {
		margin-top: 32px;
	}

	/* Der Stepper ist im Desktopentwurf 672px breit; hier darf er nur so breit sein wie der
	   Bildschirm, sonst schiebt er die Seite seitlich auf. */
	/* Im Telefonentwurf ist der Stepper 340px breit und steht mittig (x=23..363). */
	.mfs-fellowship-form .e-form__indicators {
		max-width: 340px;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 50px;
	}

	/* Wortmarke und Eckdaten stehen auf dem Telefon untereinander. Ohne diese Regel bleibt das
	   zweispaltige Raster stehen, dessen erste Spalte `minmax(240px, 1fr)` misst: die Karte wird aus
	   dem Bildschirm geschoben und die Seite lässt sich seitwärts scrollen. */
	.mfs-fs-hero__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 28px 0 24px;
	}

	.mfs-fs-hero__mark-img.mfs-fs-hero__mark-img--tall {
		display: none;
	}

	/* Die Marke sitzt im Entwurf 20px vom linken Rand und läuft bis 18px vor den rechten
	   (Frame `Fellowship_Form_01_mb`, Hero 390x297). */
	.mfs-fs-hero__mark-img.mfs-fs-hero__mark-img--wide {
		display: block;
		width: calc(100% - 38px);
		margin-left: 20px;
	}

	.mfs-fs-hero__mark-a,
	.mfs-fs-hero__mark-b {
		font-size: 26px;
	}

	.mfs-fs-hero__mark-b {
		margin-left: 28px;
	}

	/* Die Eckdaten-Karte ist einspaltig und aufklappbar: einspaltig ausgeklappt füllte sie fast den
	   ganzen Bildschirm, bevor überhaupt das Formular beginnt.
	   Die feste Höhe von 304px gilt NUR auf dem Desktop. Zugeklappt ist die Karte hier ein 169x48
	   großer Knopf — mit der Desktophöhe wäre daraus ein 304px hoher leerer Kasten geworden. */
	.mfs-fs-hero__card {
		min-height: 0;
		padding: 20px;
	}

	/* Einspaltig, und der Abstand entspricht dem Rhythmus der Einträge innerhalb einer Liste, damit
	   die Karte wie im Design als EINE durchgehende Liste liest und nicht wie zwei Blöcke. */
	.mfs-fs-hero__cols {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* Zugeklappt ist die Karte im Entwurf ein schmaler, mittig stehender Kasten (176x44), erst beim
	   Aufklappen läuft sie über die volle Breite. */
	/* Zugeklappt ist die Karte im Entwurf ein 169x48 großer, mittig stehender Knopf. */
	.mfs-fs-hero__card:not([open]) {
		width: -moz-fit-content;
		width: fit-content;
		margin: 0 auto;
		padding: 14px 24px;
	}

	.mfs-fs-hero__card:not([open]) .mfs-fs-hero__toggle {
		margin-bottom: 0;
	}

	/* Telefonwerte aus dem Rahmen: Schritttitel 25/30, Vorspann 16/24, Ankreuzfelder 14/20.
	   `body.mfs-fellowship-lp` steht davor, weil das Kit für schmale Bildschirme eine eigene Größe
	   je Überschriftenebene mitbringt; die schlägt eine einzelne Klasse. */
	body.mfs-fellowship-lp .mfs-fs__step-title {
		font-size: 25px;
		line-height: 30px;
	}

	.mfs-fs__step-lead {
		font-size: 16px;
		line-height: 24px;
	}

	.mfs-fellowship-form .elementor-field-option label,
	.mfs-fellowship-form .elementor-field-subgroup label {
		font-size: 14px;
		line-height: 20px;
	}

	.mfs-fs-hero__toggle {
		margin-bottom: 16px;
	}

	.mfs-fs-hero__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		/* 169x48 im Entwurf, Beschriftung 18/20 in Versalien wie alle Knöpfe. */
		font-size: 18px;
		font-weight: 500;
		line-height: 20px;
		text-transform: uppercase;
		cursor: pointer;
		/* Beide Zeilen nötig, um das voreingestellte Dreieck loszuwerden. */
		list-style: none;
	}

	.mfs-fs-hero__toggle::-webkit-details-marker {
		display: none;
	}

	/* Winkel statt Dreieck, wie im Design: zugeklappt nach unten, offen nach oben. */
	.mfs-fs-hero__toggle::after {
		content: "";
		width: 9px;
		height: 9px;
		margin-top: -5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	[open] > .mfs-fs-hero__toggle::after {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	.mfs-fellowship-form {
		padding: 0 20px;
	}

	/* Straße/Hausnummer und PLZ/Ort brechen auf dem Telefon untereinander. Der Knopfblock ist
	   ausgenommen: er ist technisch auch eine Feldgruppe, soll aber neben „Zurück" stehen bleiben
	   und nur so breit sein wie sein Knopf. */
	.mfs-fellowship-form .elementor-field-group:not(.e-form__buttons__wrapper) {
		width: 100% !important;
	}

	.mfs-fellowship-form .e-form__buttons__wrapper {
		width: auto;
	}

	/* „Zurück" links, der schwarze Knopf rechts — auch auf dem Telefon nebeneinander, so steht es
	   im Entwurf. Der schwarze Knopf misst dort 204 statt 329px; mit der Desktopbreite passt er
	   nicht neben „Zurück" und die Zeile bricht um. */
	.mfs-fellowship-form .e-form__buttons {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 12px;
	}

	/* `body.mfs-fellowship-lp` steht hier aus demselben Grund davor wie bei der Desktopfassung: die
	   Grundregel musste auf (0,3,1) gehoben werden, um Astras `body .elementor-button…` zu schlagen.
	   Ohne die Body-Klasse auch hier bliebe der Knopf auf dem Telefon 329px breit und schöbe die
	   Seite um 90px seitwärts auf. */
	body.mfs-fellowship-lp .mfs-fellowship-form .elementor-button[type="submit"],
	body.mfs-fellowship-lp .mfs-fellowship-form .e-form__buttons__wrapper__button-next {
		min-width: 201px;
		padding: 16px 20px;
	}

	.mfs-fs-modal__dialog {
		padding: 28px 22px;
	}
}