/** * Landingpage Fellowship, nach Figma `MFA_Fellowship | Shared`, Frame `LP-Fellowhip` (1440x7663). * * Nur das Nötige: Überschriften, Fließtext, Listen und Buttons kommen als Elementor-Widgets und * erben Kit-Farben und Hausschrift (Franklin Gothic Book, im Design bestätigt). Gestylt wird hier * ausschließlich, was das Design eigens vorgibt und kein Widget von sich aus kann: die Rosa-Fläche * des Hero, die Sprechblasen mit Zipfel, die Fakten-Liste, das Testimonial, die FAQ-Linien und der * orangefarbene Abschlussblock. * * Die gemeinsamen Farben und der Kopfbereich stehen in fellowship-form.css, das auf beiden Seiten * geladen wird. Doppelte Definitionen wären zwei Wahrheiten. */ body.mfs-fellowship-landing { --mfs-flp-ink: #111111; --mfs-flp-accent: #e5b063; /* Drei verschiedene Rosatöne, das Design benutzt sie NICHT austauschbar: -bg die blasse Hero-Fläche -card die Sprech- und Zitatblasen -mark das kräftige „fellowship"-Feld in der Wortmarke Werte aus `LP-Fellowhip_dt` (83:3295) bzw. am Frame abgegriffen. */ --mfs-flp-pink-bg: #f2e1e6; --mfs-flp-pink-card: #ffc4d5; --mfs-flp-pink-mark: #f2a0cc; /* 1280 = 1440 minus 2x80 Seitenrand. Genau so ist jede Komponente im Figma gebaut. */ --mfs-flp-max: 1280px; /* Die Auszeichnungsschrift der Website. Überschriften erben sie ohnehin über das Kit (`.elementor-kit-6 h1`…`h4`); ausdrücklich gesetzt wird sie nur dort, wo das Design sie für etwas benutzt, das KEINE Überschrift ist: die Zitatblasen und das Testimonial stehen im Figma in BernhardGothicURW-Heavy, sind aber

. */ --mfs-flp-display: "Bernhard Gothic Lokal", Sans-serif; /* Die Fließtextschrift ausdrücklich als Variable. Gebraucht wird sie überall dort, wo ein Baustein INNERHALB eines Blocks in der Auszeichnungsschrift wieder in die Grundschrift zurückfallen soll — `font-family: inherit` erbt dort die Auszeichnungsschrift und tut genau das Gegenteil. */ --mfs-flp-body: "Franklin Gothic", Sans-serif; } /* Der eigene Kopfbereich ersetzt den Site-Header, wie auf der Bewerbungsseite. */ body.mfs-fellowship-landing .ast-above-header, body.mfs-fellowship-landing .site-header, body.mfs-fellowship-landing [data-elementor-type="header"] { display: none; } /* Abschnittsrhythmus. Elementors Container bringen von Haus aus keinen vertikalen Takt mit. * * `:where([data-elementor-type="wp-page"])` grenzt alle folgenden Container-Regeln auf den * SEITENINHALT ein. Ohne diese Klammer traf `body.mfs-fellowship-landing .e-con` auch den * gemeinsamen Seitenfuß der Website: der besteht ebenfalls aus `.e-con`, liegt im selben * und bekam dadurch unsere 1280px-Breite, unsere 56px-Polsterung und auf schmalen Rahmen unser * `flex-direction: column`. Der Fuß stand danach 60px weiter links und war 84px höher als auf * jeder anderen Seite. * * `:where()` und nicht ein einfaches Voranstellen des Attributs, weil `:where()` NICHTS zur * Spezifität beiträgt. Die Gewichte in dieser Datei sind mehrfach von Hand austariert (siehe die * Kommentare bei `.mfs-flp-facts-cols` und `.mfs-flp-ctabox`); ein normaler Selektor hätte sie * alle um eins verschoben und diese Abwägungen still gekippt. */ body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con { --container-max-width: var(--mfs-flp-max); } /* 56px oben und unten hat im Figma JEDE Komponente. Seitlich bewusst 0: die Breitenbegrenzung auf 1280px erzeugt bei 1440px Fenster schon die 80px Rand des Designs. Erst wenn das Fenster schmaler als der Inhalt wird, braucht es eine echte Polsterung, sonst klebt der Text am Rand. */ body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con > .e-con-inner { padding-top: 56px; padding-bottom: 56px; } /* NICHT global `align-items: flex-start` setzen: bei den Abschnitten, die als SPALTE laufen, nimmt das den Kindern die volle Breite (sie schrumpfen auf ihren Inhalt) — der Zitatblock stand danach linksbündig statt mittig. Die Reihen richten sich stattdessen dort aus, wo sie definiert sind. */ @media (max-width: 1360px) { body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con > .e-con-inner { padding-left: 40px; padding-right: 40px; } } /* Elementor gibt JEDEM Container 10px Innenabstand. Die äußeren Abschnitte überschreibt die Regel oben, die verschachtelten Spalten und Reihen aber nicht: die rendern ohne `.e-con-inner` und behalten die 10px. Bei zwei Ebenen sind das schon 40px, die im Design nirgends vorkommen — die Kopfzeile von „Warum dieses Fellowship?" war dadurch 88 statt 48 Pixel hoch. */ body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con.e-con-full { padding: 0; } /* ------------------------------------------------------------------------------ Hero */ .mfs-flp-hero { background: var(--mfs-flp-pink-bg); padding: 72px 40px 96px; } /* Mit der echten Grafik: die Grafik bringt ihre rosa Fläche selbst mit, deshalb seitlich keine Polsterung. Im Design ist der Abschnitt 580px hoch, die Grafik darin 1333x536 bei y=22 — also 22px Luft oben und unten und 92,6% Breite mittig. */ .mfs-flp-hero--image { padding: 22px 0; } /* Zwei Klassen, weil die Basisregel `.mfs-flp-hero__mark` weiter unten steht und sonst mit ihrer Deckelung auf 1280px gewinnt — die Grafik ist im Design aber 1333px breit. */ .mfs-flp-hero.mfs-flp-hero--image .mfs-flp-hero__mark--image { display: block; max-width: 92.6%; margin: 0 auto; } /* Zwei Fassungen der Wortmarke liegen im Markup, siehe mfs_flp_hero_html(); die hochkante gilt nur fürs Telefon. Beide Klassen im Selektor, weil `.mfs-flp-hero__mark-img` weiter unten `display: block` setzt und bei gleicher Spezifität die spätere Regel gewinnt. */ .mfs-flp-hero__mark-img.mfs-flp-hero__mark-img--tall { display: none; } .mfs-flp-hero__mark-img { display: block; width: 100%; height: auto; } .mfs-flp-hero__mark { display: flex; flex-direction: column; align-items: flex-start; max-width: var(--mfs-flp-max); margin: 0 auto; } .mfs-flp-hero__mark-a, .mfs-flp-hero__mark-b { display: inline-block; padding: 16px 22px; font-size: clamp(28px, 4vw, 46px); font-weight: 700; line-height: 1.05; } .mfs-flp-hero__mark-a { background: var(--mfs-flp-accent); } .mfs-flp-hero__mark-b { margin-left: 64px; background: var(--mfs-flp-pink-mark); } /* ------------------------------------------------------------- Spalten der Textblöcke */ /* Die beiden Spalten teilen sich die Inhaltsbreite exakt hälftig: 624 + 32 + 624 = 1280. * * Der Inhalt füllt seine Spalte aber NICHT ganz: `Container Left` und `Container Right` führen im * Figma beide `Objektabstand Rechts: 109px`, der Inhalt misst dadurch 515px. Das ist Absicht und * keine stehen gebliebene Instanzgröße — im Eigenschaften-Panel steht es an beiden Spalten so. * Deshalb hier als Polsterung modelliert und nicht als Deckelung des Inhalts: die Spalte bleibt * ihre halbe Breite, nur der Inhalt rückt vom rechten Rand ab. * * Die Innenabstände unterscheiden sich je Seite: links 16px (Überschrift zu Quellenangabe), * rechts 32px (Fließtext, PDF-Link, Button). */ /* Nur ab Desktopbreite: unterhalb davon stehen die Spalten untereinander bzw. sind so schmal, dass 109px Einrückung den Text auf ein Drittel der Zeile quetschen würden. */ @media (min-width: 1024px) { body.mfs-fellowship-landing .e-con.mfs-flp-textcol { padding-right: 109px; } } body.mfs-fellowship-landing .e-con.mfs-flp-textcol--l { gap: 16px; } body.mfs-fellowship-landing .e-con.mfs-flp-textcol--r { gap: 32px; } /* ------------------------------------------------------------------- Überschriften */ /* Abschnittsüberschriften stehen im Design auf 40px/48px. */ body.mfs-fellowship-landing .mfs-flp-heading .elementor-heading-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; } /* Fließtext im Design durchgehend 16px/24px. */ body.mfs-fellowship-landing .mfs-flp-text { font-size: 16px; line-height: 1.5; } /* Absatzabstand über PADDING, nicht über margin-bottom. * * Das globale Custom CSS des Kits (uploads/elementor/css/post-6.css, Abschnitt „GENERAL SETTINGS") * enthält seitenweit: * p { margin-bottom: 0px !important; } * Das ist offensichtlich Absicht: Auf dieser Website werden Absatzabstände pro Widget gesetzt, nicht * global. Ein margin-bottom hier wäre also chancenlos, und ein zweites !important dagegenzusetzen * hieße, gegen die Hauskonvention zu arbeiten. Padding erreicht dasselbe, kollidiert mit nichts und * bleibt auch dann richtig, wenn jemand die Kit-Regel später entfernt. */ /* Der Entwurf setzt einen Textblock als EINEN Textknoten mit Leerzeilen dazwischen — der Abstand zwischen zwei Absätzen ist also genau eine Zeile (24px), nicht 16. */ body.mfs-fellowship-landing .mfs-flp-text p { padding-bottom: 24px; } body.mfs-fellowship-landing .mfs-flp-text p:last-child { padding-bottom: 0; } /* Vor einer Aufzählung steht im Entwurf nur dann KEINE Leerzeile, wenn die einleitende Zeile eine halbfette Überschrift der Liste ist („Du beschäftigst dich unter anderem mit:"). Endet der Absatz davor als normaler Satz — wie im Partnerblock —, bleibt die Leerzeile stehen. */ body.mfs-fellowship-landing .mfs-flp-text p:has( strong ):has( + ul ) { padding-bottom: 0; } /* Im Entwurf ist eine Aufzählung ein durchlaufender Textblock: die Punkte folgen ohne Zwischenraum aufeinander (jede Zeile 24px), davor und danach steht eine Leerzeile. Die 6px unter jedem Punkt summierten sich bei sieben Punkten auf 36px zu viel. */ body.mfs-fellowship-landing .mfs-flp-text ul { margin: 0 0 24px; padding-left: 20px; } body.mfs-fellowship-landing .mfs-flp-text li { margin-bottom: 0; } /* Die Quellenangabe unter dem Zitat („– Margot Friedländer") steht im Entwurf NICHT kleiner: der Knoten führt Franklin Gothic Book 16/24, dieselbe Größe wie jeder andere Fließtext. Die 15px hier waren geschätzt. Auch der Aussenabstand entfällt — die 16px zum Zitat darüber bringt `.mfs-flp-textcol--l` als `gap` bereits mit, mit den 8px hier waren es 24. */ body.mfs-fellowship-landing .mfs-flp-cite p { margin: 0; font-size: 16px; line-height: 24px; } /* PDF-Link mit Download-Pfeil, wie im Design. */ /* Im Entwurf `btn_Download`: Text 184x24 (Franklin Gothic Demi 16/24), 9px Abstand, Symbol 16x20. */ /* Über jeder Download-Zeile stehen 16px — nachgemessen an den Zeilenabständen im Entwurf: von einer Textzeile zur nächsten sind es 24px, von der letzten Textzeile zur Download-Zeile 40. Seit dem Handover vom 21.08.2026 stehen im Block „Was erwartet dich?" zwei davon untereinander. `padding-top` und nicht `margin`: das Custom CSS des Kits setzt `p { margin-bottom: 0 !important }`, Absatzabstände werden auf dieser Website deshalb durchgehend als Polsterung gemacht. Die 16px kommen aber NUR an, wenn die 24px Absatzabstand darüber weichen — sonst stehen 40px im Zwischenraum und die Zeilen rutschen um eine Leerzeile auseinander. Deshalb die zweite Regel; ihre Spezifität (0,4,1) muss die des allgemeinen Absatzabstands (0,3,1) schlagen. */ body.mfs-fellowship-landing .mfs-flp-pdf { padding-top: 16px; } body.mfs-fellowship-landing .mfs-flp-text p:has( + .mfs-flp-pdf ), body.mfs-fellowship-landing .mfs-flp-text p.mfs-flp-pdf { padding-bottom: 0; } body.mfs-fellowship-landing .mfs-flp-pdf a, body.mfs-fellowship-landing .mfs-flp-pdf__label { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; text-decoration: none; } body.mfs-flp-pdf__icon, body.mfs-fellowship-landing .mfs-flp-pdf__icon { flex: 0 0 auto; width: auto; height: 20px; } /* -------------------------------------------------------------------------- Buttons */ /* Siehe fellowship-form.css: der Entwurf nutzt `FranklinGothic-Medium`, den die Website nicht hat. Die feine Konturverstärkung ersetzt ihn, ohne die Breiten zu verändern. */ body.mfs-fellowship-landing .mfs-flp-cta .elementor-button, body.mfs-fellowship-closed .mfs-flp-cta .mfs-flp-cta__closed { -webkit-text-stroke: 0.35px currentColor; } /* Am Knoten `btn` abgelesen: 515x56, Polsterung 18/40, Beschriftung Franklin Gothic Medium 18/20 in Versalien. Der Schriftgrad stand hier auf 13px — das war geraten und rund ein Drittel zu klein. Ohne Sperrung: der Entwurf führt keine. */ body.mfs-fellowship-landing .mfs-flp-cta .elementor-button { display: block; width: 100%; padding: 18px 40px; border-radius: 0; background: var(--mfs-flp-ink); color: #ffffff; font-size: 18px; font-weight: 500; line-height: 20px; text-transform: uppercase; } /* Zeigen, Fokussieren, Besuchen. Die ausführliche Begründung steht in fellowship-form.css; kurz: `.elementor-kit-6 a:hover { color: #898989 }` hat die weiße Beschriftung der schwarzen Knöpfe beim Zeigen ausgegraut, `a:focus { outline: thin dotted }` aus Astra hat einen gepunkteten Rahmen gezeichnet, und ohne eigene Farbe blieb für besuchte Links die violette Browservorgabe stehen. Die Beschriftung steht deshalb für jeden Zustand ausdrücklich da. */ body.mfs-fellowship-landing .mfs-flp-cta .elementor-button, body.mfs-fellowship-landing .mfs-flp-cta .elementor-button:link, body.mfs-fellowship-landing .mfs-flp-cta .elementor-button:visited, body.mfs-fellowship-landing .mfs-flp-cta .elementor-button:hover, body.mfs-fellowship-landing .mfs-flp-cta .elementor-button:focus, body.mfs-fellowship-landing .mfs-flp-cta .elementor-button:active { color: #ffffff; } /* Nur `:hover`. Dass der Knopf den Fokus hat, sagt der Ring weiter unten — eine zweite, dauerhafte Änderung der Fläche wäre dafür zu laut. */ body.mfs-fellowship-landing .mfs-flp-cta .elementor-button:hover { background-color: #333333; } body.mfs-fellowship-landing .mfs-flp-cta .elementor-button:focus { outline: none; } body.mfs-fellowship-landing .mfs-flp-cta .elementor-button:focus-visible { outline: 2px solid var(--mfs-flp-accent); outline-offset: 2px; } /* Die Textlinks der Seite: der PDF-Download, die Mailadresse unter den Fragen. Farbe fest, die Unterstreichung ist die Rückmeldung. */ body.mfs-fellowship-landing .mfs-flp-pdf a, body.mfs-fellowship-landing .mfs-flp-pdf a:link, body.mfs-fellowship-landing .mfs-flp-pdf a:visited, body.mfs-fellowship-landing .mfs-flp-pdf a:hover, body.mfs-fellowship-landing .mfs-flp-pdf a:focus, body.mfs-fellowship-landing .mfs-flp-faq-inner a:hover, body.mfs-fellowship-landing .mfs-flp-faq-inner a:focus { color: inherit; } body.mfs-fellowship-landing .mfs-flp-pdf a:hover, body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title:hover { text-decoration: underline; text-underline-offset: 3px; } body.mfs-fellowship-landing .mfs-flp-pdf a:focus, body.mfs-fellowship-landing .mfs-flp-faq-inner a:focus, body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title:focus { outline: none; } body.mfs-fellowship-landing .mfs-flp-pdf a:focus-visible, body.mfs-fellowship-landing .mfs-flp-faq-inner a:focus-visible, body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title:focus-visible { outline: 2px solid var(--mfs-flp-accent); outline-offset: 2px; } /* Der Hinweisabsatz läuft im Design halbfett, der übrige Fließtext daneben nicht. */ body.mfs-fellowship-closed .mfs-flp-closed-notice { font-weight: 700; } /* Nach Bewerbungsschluss: derselbe Kasten, nur grau und ohne Ziel. Die Fläche wird nicht kleiner und der Text nicht kleiner, damit die Seite an dieser Stelle nicht plötzlich anders aussieht als im Live-Zustand; im Design ist es exakt derselbe Button in #868686. */ body.mfs-fellowship-closed .mfs-flp-cta .mfs-flp-cta__closed { display: block; width: 100%; padding: 18px 40px; border-radius: 0; background: #868686; color: #ffffff; font-size: 18px; font-weight: 500; line-height: 20px; text-align: center; text-transform: uppercase; cursor: default; } /* ------------------------------------------------------- Das Fellowship auf einen Blick */ body.mfs-fellowship-landing .mfs-flp-facts { margin: 0; } /* Ein Eintrag: Plakette links, Begriff und Wert rechts untereinander. */ body.mfs-fellowship-landing .mfs-flp-facts__item { display: flex; align-items: flex-start; gap: 17px; margin-top: 24px; } body.mfs-fellowship-landing .mfs-flp-facts__item:first-child { margin-top: 0; } /* Begriff in der Auszeichnungsschrift (20/24), Wert im Fließtextschnitt (21/25) — beides am Knoten `Container Icon List item` abgelesen. Beide standen hier auf den geerbten 16px. */ body.mfs-fellowship-landing .mfs-flp-facts dt { font-family: var(--mfs-flp-display); font-size: 20px; font-weight: 700; line-height: 24px; } /* 25,2px, nicht 25: der Entwurf führt 120 % auf 21px. */ body.mfs-fellowship-landing .mfs-flp-facts dd { margin: 0; font-size: 21px; line-height: 25.2px; } /* Senkrechte Trennlinie zwischen den beiden Spalten (im Design die Ebene `Divder`). Als Rahmen an der zweiten Spalte, nicht als eigenes Element: so ist sie automatisch so hoch wie die Spalten und verschwindet von selbst, sobald die Spalten mobil untereinander stehen. */ /* Die beiden Eckdaten-Spalten stehen im Entwurf beide auf „Füllen" (`Container List Block Left` misst 493px), sind also exakt hälftig. Ohne diese Regel sind sie zwei Widgets in einem Flex-Container auf `flex: 0 1 auto`, stehen also auf Inhaltsbreite: die linke Spalte mit den kurzen Werten wurde 368px schmal, die rechte mit dem langen Satz „Wer kann sich bewerben?" 864px breit. `min-width: 0` gehört dazu, sonst hält die Mindestbreite des Inhalts die Spalte auf, statt umzubrechen. */ body.mfs-fellowship-landing .mfs-flp-facts-cols > .elementor-widget { flex: 1 1 0; min-width: 0; } /* Die Trennlinie ist im Entwurf ein eigenes Element ZWISCHEN den Spalten (`Divder`), keine Kante der rechten Spalte. Als `border-left` dort gerechnet zählen ihre 1px plus 48px Polsterung zur Breite der rechten Spalte — die beiden Hälften wären dann um 49px verschieden (gemessen 592 zu 641). Deshalb liegt die Linie hier am Container: eine 1px schmale Fläche mittig, damit beide Spalten gleich breit bleiben und die Linie trotzdem genau auf der Mitte sitzt. */ /* `Conainer List` im Entwurf: 1280 breit mit 107px Einzug links und rechts, Abstand 40px, darin die beiden 493px-Spalten und dazwischen die Linie `Divder` (#222222). Die Linie ist dort ein eigenes, null Pixel breites Element mit je 40px Abstand — hier gibt es nur zwei Widgets, deshalb steht der doppelte Abstand (80px) im `gap` und die Linie als 1px schmale Fläche in der Mitte. Rechnung: (1280 − 2×107 − 80) / 2 = 493 je Spalte, Linie bei 720 = Mitte. */ /* `.e-con` steht mit im Selektor, weil die Nullung der verschachtelten Container weiter oben (`body.x .e-con.e-con-full { padding: 0 }`) sonst höhere Spezifität hat und den Einzug schluckt. */ body.mfs-fellowship-landing .e-con.mfs-flp-facts-cols { position: relative; padding: 0 107px; gap: 80px; } /* Die Linie als absolut gesetztes ::before mit HINTERGRUNDFARBE, nicht als `background-image` am Container. Elementors Lazyload-Regel .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) , … * { background-image: none !important } nimmt ab dem vierten Abschnitt jedem Element im Baum das Hintergrundbild weg, bis das Skript die Klasse `e-lazyloaded` setzt. Als Hintergrundbild war die Linie deshalb unsichtbar. Absolut gesetzt, damit sie im Flex-Container kein eigenes Element in der Reihe wird. */ body.mfs-fellowship-landing .e-con.mfs-flp-facts-cols::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background-color: #222222; } /* Die runde Plakette aus dem Design: 48px, Rosa der Karten. */ body.mfs-fellowship-landing .mfs-flp-facts__icon { display: flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mfs-flp-pink-card); } /* Die Glyphen sind unterschiedlich proportioniert (14x18 bis 23x18); eine feste Höhe mit `width:auto` hält sie optisch gleich groß, ohne sie zu verzerren. */ body.mfs-fellowship-landing .mfs-flp-facts__svg { width: auto; height: 18px; } /* `Content Wrapper` der Infobox im Entwurf: 56px Polsterung, 53px zwischen Textblock und Knopf, innerhalb des Textblocks nur 4px. Der Container trägt die 4px (siehe mfs_flp_container), die Differenz sitzt hier als Aussenabstand am Knopf. */ body.mfs-fellowship-landing .mfs-flp-ctabox .elementor-widget-button { margin-top: 49px; } /* ----------------------------------------------------- Zitat- und Sprechblasen */ /* Beide Blasenarten folgen im Design DEMSELBEN Muster, nur mit anderen Maßen: rosa = Kasten oben, Zipfel darunter; gold = Zipfel oben, Kasten darunter. Dadurch beginnen alle Blasen einer Reihe auf gleicher Höhe und die goldenen Kästen sitzen trotzdem tiefer. Ein `margin-top` auf der goldenen Blase wäre falsch: es würde die Reihe um die Zipfelhöhe höher machen, als sie im Design ist. */ .mfs-flp-quotes { display: flex; gap: 32px; /* `QA Block Mobil` ist 842px breit und steht mittig, nicht über die volle Inhaltsbreite. */ max-width: 842px; margin: 0 auto; flex-wrap: wrap; /* Dieselbe Überlegung wie bei den Sprechblasen weiter unten, hier war sie vergessen: die beiden Kästen sind im Entwurf verschieden hoch (rosa 188, gold 157) und werden NICHT auf eine gemeinsame Höhe gezogen. Mit dem voreingestellten `stretch` wuchs der rosa Kasten auf die Gesamthöhe der goldenen Blase samt Zipfel — 215 statt 188px — und sein eigener Zipfel saß 27px zu tief. */ align-items: flex-start; } /* `font-style: normal`, weil Browser
kursiv setzen — im Design steht das Zitat aufrecht. `border: 0` gehört ebenso dazu: Astra gibt JEDEM
ein `border-left: 5px solid var(--ast-border-color)` (main.min.css). In den beiden Blasen stand dadurch ein heller senkrechter Strich am linken Rand — genau die „beiden Linien an den Boxen" aus der QA vom 21.08.2026. Beim Testimonial weiter unten war das schon berücksichtigt, hier nicht. Wer eine weitere Blase baut: `border: 0` nicht vergessen. */ .mfs-flp-quote { position: relative; flex: 1 1 300px; margin: 0; border: 0; padding: 32px 24px; font-family: var(--mfs-flp-display); font-size: 26px; font-style: normal; font-weight: 700; line-height: 1.2; } .mfs-flp-quote--pink { background: var(--mfs-flp-pink-card); } .mfs-flp-quote--orange { background: var(--mfs-flp-accent); /* Zipfel oben: der Kasten selbst beginnt um dessen Höhe tiefer. */ margin-top: 57px; } /* Zipfel der rosa Blase: unten, 48px von links (Maße im Design 133x57). */ .mfs-flp-quote--pink::after { content: ""; position: absolute; top: 100%; left: 48px; width: 133px; height: 57px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); } /* Zipfel der goldenen Blase: oben, 224px von links. * * `min()` statt der blanken 224px, und das ist kein Feinschliff: 224 + 133 ergeben 357px, die der * Zipfel als Mindestbreite erzwingt. Bei 390px Bildschirm bleiben dem Abschnitt nach Abzug der * 16px-Ränder genau 358px — es passt also gerade eben. Auf einem 360px-Telefon (Galaxy S-Reihe und * viele andere) waren es nur 328, und die Seite ließ sich seitwärts scrollen (gemessen: * Dokumentbreite 373 statt 360). Der Zipfel ist absolut gesetzt, deshalb fiel das keiner * Breitenregel am Kasten auf. * * Mit `min()` bleibt bei 390px und darüber alles exakt wie im Entwurf (224px), darunter rutscht der * Zipfel nur so weit nach links, dass er innerhalb der Blase endet. Gefunden bei der Abnahme am * 21.08.2026; der Fehler steckt seit dem ersten Aufbau in der Datei. */ .mfs-flp-quote--orange::before { content: ""; position: absolute; bottom: 100%; left: min(224px, calc(100% - 133px)); width: 133px; height: 57px; background: inherit; clip-path: polygon(0 0, 0 100%, 100% 100%); } /* ------------------------------------------------------------------- Sprechblasen */ /* Vier Blasen zu je 296px mit 32px Abstand ergeben genau die 1280px Inhaltsbreite. Gleiche Anteile statt fester Pixel, damit die Reihe bei schmalerem Fenster mitgeht. `align-items: flex-start`, weil die Kästen im Design unterschiedlich hoch sind und NICHT auf eine gemeinsame Höhe gezogen werden. */ body.mfs-fellowship-landing .mfs-flp-bubbles { align-items: flex-start; } body.mfs-fellowship-landing .mfs-flp-bubbles > .elementor-widget { flex: 1 1 0; min-width: 0; } .mfs-flp-bubble { position: relative; } .mfs-flp-bubble__box { padding: 32px 24px; } .mfs-flp-bubble--pink .mfs-flp-bubble__box { background: var(--mfs-flp-pink-card); } .mfs-flp-bubble--orange .mfs-flp-bubble__box { background: var(--mfs-flp-accent); } /* Der Platz für den Zipfel gehört als PADDING an die Blase, nicht als margin an den Kasten: ein margin-top des ersten Kindes fällt mit dem der Blase zusammen (margin collapsing), die Blase rutscht mit nach unten und der bei `top: 0` gezeichnete Zipfel läge dann mitten auf der Überschrift. Genau so war es zuerst. */ .mfs-flp-bubble--orange { padding-top: 57px; } /* Im Entwurf `Headline H3` in Bernhard Gothic URW Heavy 26/31,2 — dasselbe Gewicht wie die Zitatblasen. Das Gewicht stand hier nicht, und das Kit vergibt für h3 nur 400: die Titel der vier Sprechblasen liefen als einzige Überschriften der Seite mager. */ .mfs-flp-bubble__title { margin: 0 0 4px; font-family: var(--mfs-flp-display); font-size: 26px; font-weight: 700; line-height: 1.2; } .mfs-flp-bubble__text { margin: 0; font-size: 16px; line-height: 1.5; } /* Zipfel der rosa Blase: unten, 168px von links (Maße im Design 80x57). */ .mfs-flp-bubble--pink .mfs-flp-bubble__box::after { content: ""; position: absolute; top: 100%; left: 168px; width: 80px; height: 57px; background: inherit; clip-path: polygon(0 0, 100% 0, 100% 100%); } /* Zipfel der goldenen Blase: oben, 48px von links. */ .mfs-flp-bubble--orange .mfs-flp-bubble__box::before { content: ""; position: absolute; top: 0; left: 48px; width: 80px; height: 57px; background: inherit; clip-path: polygon(0 0, 0 100%, 100% 100%); } /* Der Schlusstext von „Warum dieses Fellowship?" steht im Design nur in der rechten Spalte. */ body.mfs-fellowship-landing .mfs-flp-alignright { margin-left: auto; } /* -------------------------------------------------------------------------- Video */ /* Die Videofläche ist im Design 1061px breit und mittig im 1440er Rahmen, also 82,9% der 1280px Inhaltsbreite. Eine Überschrift gibt es nicht: die Ebene „Video Headline" ist im Figma ausgeblendet. `.e-con` mit im Selektor, sonst gewinnt Elementors eigene Container-Breite. */ body.mfs-fellowship-landing .e-con.mfs-flp-video { position: relative; max-width: 82.9%; margin-left: auto; margin-right: auto; } body.mfs-fellowship-landing .mfs-flp-video img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* KEIN Play-Kreis mehr. Bis 1.17.3 lag hier einer als ::after — übernommen aus `Component - Video`, wo der Entwurf ihn über der noch leeren Videofläche zeigt. Der Handover vom 21.08.2026 macht daraus ausdrücklich ein Bild („Video → Bild, bitte vorerst dieses Bild verwenden für den Launch, Video folgt im Laufe der KW 36"), und der neue Frame zeichnet an dieser Stelle keinen Kreis mehr. Ein Play-Zeichen, das beim Klicken nichts tut, ist ein Versprechen, das die Seite nicht einlöst. Sobald das Video da ist, tritt an die Stelle des Bild-Widgets ein Video-Widget, das seinen eigenen Play-Knopf mitbringt. Die 16:9-Fläche oben bleibt dieselbe (im Entwurf 1062x597). */ /* ------------------------------------------------------- Mittig begrenzte Abschnitte */ /* Testimonial und FAQ laufen im Design NICHT über die volle Inhaltsbreite, sondern stehen in einer schmaleren Spalte mittig: 840px beim Testimonial (`Content Wrapper`), 842px bei den Fragen (`Frame 91`). Die Überschrift „Häufige Fragen:" bleibt volle Breite. `.e-con` mit im Selektor, weil Elementor den Containern eigene Breiten- und Randregeln gibt, gegen die eine Klasse allein nicht ankommt — die Blöcke standen sonst linksbündig. */ /* `Content Wrapper` im Entwurf: 840px mittig, 40px Abstand, KEINE Polsterung. Elementors 10px Voreinstellung machte daraus 820px Inhalt und schob das Porträt um 10px nach rechts. */ /* 951px seit dem Abgleich mit der Live-Seite am 25.08.2026. Der Entwurf widerspricht sich hier: `Content Wrapper` ist mit 946 vermasst, seine beiden Kinder messen aber 395 + 40 + 516 = 951 und ragen im Figma 5px über den eigenen Rahmen hinaus. Massgeblich sind die Kinder, denn an der Zitatspalte hängen die Zeilenumbrüche: bei 946 blieben davon nur 511, und „gegen" rutschte eine Zeile tiefer. Der Block steht damit 2,5px weiter links als im Entwurf, dafür stimmen die Spalten. */ body.mfs-fellowship-landing .e-con.mfs-flp-voice { max-width: 951px; margin-left: auto; margin-right: auto; padding: 0; gap: 40px; } body.mfs-fellowship-landing .e-con.mfs-flp-faq-inner { max-width: 842px; margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------- Testimonial */ /* Zitat 26px/31,2 halbfett, darunter Name (halbfett) und Rolle je 16px/24 — wie `Container Quote`. */ body.mfs-fellowship-landing .mfs-flp-testimonial { margin: 0; padding: 0; border: 0; font-family: var(--mfs-flp-display); font-weight: 700; font-size: 26px; font-style: normal; line-height: 1.2; } /* Name und Rolle darunter laufen wieder in der Grundschrift — im Entwurf Franklin Gothic 16/24, der Name halbfett, die Rolle normal. `font-family: inherit` stand hier und tat das Gegenteil: geerbt wird von
, und das trägt eine Zeile darüber ausdrücklich die AUSZEICHNUNGSschrift. Name und Rolle liefen dadurch ebenfalls in Bernhard Gothic. Die Familie muss also benannt werden. */ /* Der 24px-Abstand unter jedem Absatz in `.mfs-flp-text` gilt hier nicht: das Zitat ist der einzige Absatz, und darunter folgt der Name. Im Entwurf liegen zwischen `Quote Text H3` und `Person Data` genau 16px, gesetzt am Footer. Ohne diese Regel kamen 24 + 16 = 40 zusammen, und der Block war um 24px zu hoch. */ body.mfs-fellowship-landing .mfs-flp-testimonial p { padding-bottom: 0; } body.mfs-fellowship-landing .mfs-flp-testimonial footer { margin-top: 16px; font-family: var(--mfs-flp-body); font-size: 16px; font-weight: 400; line-height: 24px; } body.mfs-fellowship-landing .mfs-flp-testimonial footer strong { font-weight: 700; } /* Im Design 395px für Bild samt Anführungszeichen, 516px für das Zitat, 40px dazwischen. */ /* `align-self`, weil die Bildspalte im Entwurf 323px hoch ist und oben steht — ohne das zieht der Flex-Container sie auf die Höhe der Zitatspalte. */ body.mfs-fellowship-landing .mfs-flp-voice .elementor-widget-image { position: relative; flex: 0 0 395px; align-self: flex-start; } /* 516px fest, das Mass von `Container Quote` im Entwurf. Vorher stand hier `flex: 1 1 auto`, was den Rest der Zeile nahm — bei 946 Aussenbreite also 511, und schon diese 5px verschoben vier von acht Zeilenumbrüchen. `min-width: 0` bleibt, damit die Spalte auf schmalen Bildschirmen schrumpfen darf, statt am längsten Wort hängen zu bleiben. */ body.mfs-fellowship-landing .mfs-flp-voice .elementor-widget-text-editor { flex: 0 1 516px; min-width: 0; } /* Das Porträt steht im Entwurf RECHTS in seiner 395px-Spalte (320px Bild ab x=75), nicht mittig — links davor liegen die beiden Anführungszeichen. Elementor zentriert Bilder über `text-align`, deshalb `display: block` plus Aussenabstand statt einer Textausrichtung. */ body.mfs-fellowship-landing .mfs-flp-voice .elementor-widget-image img { display: block; width: 320px; height: 320px; margin-left: auto; margin-right: 0; border-radius: 50%; object-fit: cover; } /* Das große orangefarbene Anführungszeichen links über dem Porträt (im Figma ein Vektor, hier das Schriftzeichen — dieselbe Hausschrift, also dieselbe Form, und es skaliert mit). */ /* Die beiden Anführungszeichen sind im Entwurf eine 131x124 große Grafik an der oberen linken Ecke der Bildspalte. Als Zeichen gesetzt: in der AUSZEICHNUNGSSCHRIFT (die geerbte Fließtextschrift hat ein viel schmaleres Zeichen) bei 459px — dort misst die Tinte 137x121 und kommt den 131x124 am nächsten. Die 15px nach links gleichen die Vorbreite des Zeichens aus, damit die Tinte bündig an der Spaltenkante sitzt. */ body.mfs-fellowship-landing .mfs-flp-voice .elementor-widget-image::before { content: "\201D"; position: absolute; top: 0; left: -15px; color: var(--mfs-flp-accent); font-family: var(--mfs-flp-display); font-size: 459px; font-weight: 700; line-height: 1; pointer-events: none; } /* ---------------------------------------------------------------------------- FAQ */ /* Am Entwurf abgelesen (`Component - Accordion` > `Accordeon` > `FAQ-Row`): Liste 842px breit mit 1px schwarzer Linie UNTEN; jede Zeile mit 1px schwarzer Linie OBEN, 32px Polsterung oben und unten, waagerechter Aufbau mit 32px Abstand zwischen Textspalte (783px) und Winkel (27px). Frage: H4, Bernhard Gothic Heavy, 20px/24px. Antwort: Franklin Gothic Book, 16px/24px. Elementors nested-accordion legt von sich aus einen VOLLSTÄNDIGEN 1px-Rahmen in #d5d8dc um jede Titelzeile und um den Inhaltsbereich. Genau das ließ die Liste wie ein Kasten aussehen statt wie die reinen Trennlinien des Entwurfs. Der Rahmen muss deshalb ausdrücklich weg — die eigenen Linien sitzen am
und an der Liste. */ body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title, body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item > .e-con { border: 0; } body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item { border-top: 1px solid #000000; } body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item:last-child { border-bottom: 1px solid #000000; } /* Zeilenhöhe im Entwurf 88px: 24px Textzeile plus 32px oben und unten. `flex-start`, weil der Winkel beim aufgeklappten Eintrag auf Höhe der FRAGE steht und nicht mittig zur ganzen Zeile. */ body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title { display: flex; align-items: flex-start; gap: 32px; padding: 32px 0; cursor: pointer; } /* Aufgeklappt rücken Frage und Antwort dicht zusammen (im Entwurf 8px); die 32px nach unten trägt dann der Inhaltsbereich. */ body.mfs-fellowship-landing .mfs-flp-faq details[open] > .e-n-accordion-item-title { padding-bottom: 8px; } /* Der Pfeil steht im Design rechts am Zeilenende, nicht vor der Frage, und ist ein Winkel, kein Plus. Elementors eigenes Icon wird ausgeblendet und durch den Winkel aus dem Figma ersetzt; das ist einfacher, als dem Widget ein eigenes SVG unterzuschieben, und bleibt im Editor änderbar. */ /* `display: none` und nicht `visibility: hidden`: ausgeblendet bleibt das Icon ein Flex-Kind, und der Abstand von 32px fiele dann ZWEIMAL an (einmal zum Text, einmal zum Winkel). Die Textspalte war dadurch 751 statt der 783px des Entwurfs. */ body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title-icon { display: none; } /* 27x16 mit rund 2,7px Strichstärke, wie `Chevron-Down` im Entwurf. Die zweite Hälfte des Polygons zeichnet die Innenkante: 3,5px waagerechter Versatz ergeben bei dieser Neigung die Strichstärke. */ body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title::after { content: ""; order: 3; flex: 0 0 auto; align-self: flex-start; width: 27px; height: 16px; margin-top: 4px; background: currentColor; clip-path: polygon( 0 0, 13.5px 16px, 27px 0, 23.5px 0, 13.5px 11.7px, 3.5px 0 ); } body.mfs-fellowship-landing .mfs-flp-faq details[open] > .e-n-accordion-item-title::after { transform: scaleY(-1); } /* Die Frage steht im Entwurf in der Auszeichnungsschrift (H4), nicht im Fließtextschnitt. Über `title_tag` allein kommt sie nicht: Elementor setzt den Text in ein innerhalb des
, die Überschriftenregeln des Kits greifen dort nicht. */ /* Die wachsende Spalte ist der WRAPPER `…-title-header`, nicht der Text darin: Elementor legt den Titel in ein zusätzliches , und ein `flex-grow` am inneren Element wirkt dort nicht mehr. Ohne das rutschte der Winkel direkt hinter die Frage statt an den rechten Rand. */ body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title-header { flex: 1 1 auto; min-width: 0; } body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item-title-text { margin: 0; font-family: var(--mfs-flp-display); font-size: 20px; font-weight: 700; line-height: 24px; } /* Die Antwort steht in derselben Spalte wie die Frage, läuft also nicht unter den Winkel: 27px Winkel plus 32px Abstand. */ body.mfs-fellowship-landing .mfs-flp-faq .e-n-accordion-item > .e-con { padding-right: 59px; padding-bottom: 32px; } body.mfs-fellowship-landing .mfs-flp-faq .mfs-flp-text { font-size: 16px; line-height: 24px; } /* Die Mailadresse in der Schlusszeile ist im Entwurf unterstrichen und in Textfarbe; das Theme nimmt Links standardmäßig die Unterstreichung. */ body.mfs-fellowship-landing .mfs-flp-faq-inner a { color: inherit; text-decoration: underline; } /* ------------------------------------------------------------------ Abschluss-CTA */ /* `Content Wrapper` der Infobox: 56px ringsum, Überschrift wie alle anderen 40px. */ /* `.e-con` mit im Selektor, damit die Regel die Nullung der verschachtelten Container oben schlägt. */ body.mfs-fellowship-landing .e-con.mfs-flp-ctabox { background: var(--mfs-flp-accent); padding: 56px; justify-content: center; } /* Bild und Kasten sind im Design exakt gleich hoch (je 417px). Das Bild füllt seine Spalte und wird beschnitten statt verzerrt, damit beide Seiten bündig abschließen. */ body.mfs-fellowship-landing .mfs-flp-ctabox { min-height: 417px; } body.mfs-fellowship-landing .mfs-flp-ctaimg, body.mfs-fellowship-landing .mfs-flp-ctaimg .elementor-widget-image, body.mfs-fellowship-landing .mfs-flp-ctaimg .elementor-widget-container { height: 100%; } body.mfs-fellowship-landing .mfs-flp-ctaimg img { width: 100%; height: 100%; min-height: 417px; object-fit: cover; } /* ------------------------------------------------------- Fehlende Bilder sichtbar machen */ /* An den Bildstellen steht vorerst Elementors Platzhalter-Grafik (siehe mfs_flp_image_placeholder()). Damit sie die Fläche des späteren Motivs einnimmt und die Seite schon jetzt im richtigen Rhythmus steht, wird sie auf volle Spaltenbreite gezogen. Sobald im Editor ein echtes Bild gewählt wird, gilt dieselbe Regel weiter und nichts muss angefasst werden. */ body.mfs-fellowship-landing .mfs-flp-image-todo img { display: block; width: 100%; height: auto; } /* ------------------------------------------------------------------- Bildnachweis */ /* „© Ralf Günther" steht im Entwurf linksbündig unter dem Videostill, 16px darunter, im normalen Fließtextgrad. Die 16px bringt der Container als `flex_gap` mit; der 24er-Absatzabstand, den jeder Absatz sonst bekommt, muss hier weg, sonst stünden darunter noch einmal 24px Luft. */ body.mfs-fellowship-landing .mfs-flp-credit p { padding-bottom: 0; } /* ------------------------------------------------------------------ Partner-Karten */ /* `Component - Partner` (Handover 24.08.2026): vier Karten im 2x2-Raster, je Karte ein Logokasten von 150x80 und daneben eine Textspalte. Der Entwurf stellt beide oben bündig, die Karten einer Reihe sind unterschiedlich hoch und werden NICHT auf eine gemeinsame Höhe gezogen. */ body.mfs-fellowship-landing .e-con.mfs-flp-partners, body.mfs-fellowship-landing .e-con.mfs-flp-partner { align-items: flex-start; } /* Der Logokasten ist im Entwurf durchgehend 150x80, unabhängig davon, wie groß das Logo darin ist. Er darf deshalb weder wachsen noch schrumpfen: `flex: 0 0 150px`. Ohne das nimmt der Kasten die Breite seines Inhalts an, und die vier Textspalten begännen auf vier verschiedenen x-Positionen. Die 10px Innenabstand, die Elementor jedem Container gibt, sind hier fehl am Platz. */ /* Links und oben bündig, nicht mittig: im Entwurf sitzt jedes Logo an der oberen linken Ecke seines Kastens (`Frame 2248`, `Logo Container` — alle vier mit x und y gleich dem Kastenursprung). */ body.mfs-fellowship-landing .e-con.mfs-flp-partner__logo { flex: 0 0 150px; width: 150px; min-height: 80px; padding: 0; justify-content: flex-start; align-items: flex-start; } /* Zwei Klassen im Selektor, weil Astra UND Elementor je ein ungescoptes `img { height: auto }` mitbringen: mit nur einer Klasse liefe jedes Logo auf seine volle Dateihöhe auf. `object-fit: contain` bildet nach, was der Entwurf mit `scaleMode`/`imageTransform` macht — die Logos haben sehr verschiedene Seitenverhältnisse (apropolis 5:1, Kreisau 3:2) und stehen alle frei im selben Kasten. */ body.mfs-fellowship-landing .mfs-flp-partner__logo .elementor-widget-image img { width: auto; max-width: 150px; height: auto; max-height: 80px; object-fit: contain; } /* Und jetzt die vier Einzelmaße. Im Entwurf steht jedes Logo anders im Kasten — nachgemessen am Render vom 24.08. als Tintenrechteck innerhalb des 150x80-Kastens: apropolis 138x28 bei 6,6 Kreisau 117x75 bei 0,0 ekj 76x65 bei 1,1 ZWEITZEUGEN 137x67 bei 0,4 Angegeben ist nur die BREITE, die Höhe folgt aus dem Seitenverhältnis der Datei; so kann keine Marke verzerrt werden. Beim ZWEITZEUGEN-Logo bringt die Datei den ganzen Kasten mit (sie ist aus dem Entwurf geschnitten), deshalb steht dort 150 und kein Versatz. */ body.mfs-fellowship-landing .mfs-flp-partner--apropolis .mfs-flp-partner__logo .elementor-widget-image img { width: 138px; margin: 6px 0 0 6px; } body.mfs-fellowship-landing .mfs-flp-partner--ekj .mfs-flp-partner__logo .elementor-widget-image img { width: 76px; margin: 1px 0 0 1px; } body.mfs-fellowship-landing .mfs-flp-partner--kreisau .mfs-flp-partner__logo .elementor-widget-image img { width: 117px; } body.mfs-fellowship-landing .mfs-flp-partner--zweitzeugen .mfs-flp-partner__logo .elementor-widget-image img { width: 150px; } /* Die Textspalte füllt den Rest der Karte. `min-width: 0` gehört zwingend dazu: ein Flex-Kind schrumpft sonst nicht unter die Breite seines längsten Wortes, und die Karte liefe über. */ body.mfs-fellowship-landing .mfs-flp-partner > .elementor-widget.mfs-flp-partner__body { flex: 1 1 0; min-width: 0; } /* Name und Beschreibung stehen im Entwurf ohne Zwischenraum untereinander (zwei Textknoten, 24px Zeile, kein Abstand). Der allgemeine Absatzabstand von 24px muss deshalb an dieser einen Zeile weichen; Spezifität (0,3,1) gegen die (0,3,1) der allgemeinen Regel — sie steht weiter oben in derselben Datei, die spätere gewinnt. */ body.mfs-fellowship-landing .mfs-flp-text p.mfs-flp-partner__name { padding-bottom: 0; } /* --------------------------------------------------------------- Unser Förderer */ /* `Component - Förderer` (281:1078): links die Überschrift (514px), rechts der Logoblock (623px), dazwischen 142px. Als `flex_gap` wäre das auf schmalen Bildschirmen zu viel, deshalb steht im PHP der übliche 32er-Abstand und die Verteilung macht `space-between`: die Überschrift bleibt links, der Logoblock endet rechts am Raster — genau wie im Entwurf. */ /* Der zweite Selektor ist der entscheidende: bei einem Container mit fester Inhaltsbreite („boxed") ist NICHT der Container selbst der Flex-Kasten, sondern sein `.e-con-inner`. Mit nur der ersten Regel blieb der Logoblock bei x=625 statt bei x=736 stehen (nachgemessen). */ body.mfs-fellowship-landing .e-con.mfs-flp-funder-row, body.mfs-fellowship-landing .e-con.mfs-flp-funder-row > .e-con-inner { justify-content: space-between; align-items: flex-start; } /* Der Logoblock steht im Entwurf 623px breit und ist damit knapp die Hälfte der 1280px. Er wächst nicht über seine eigene Größe hinaus — ein Förderlogo größer zu ziehen als geliefert wäre nicht nur unschön, das PR-Handbuch des Bundesprogramms verbietet es ausdrücklich. */ body.mfs-fellowship-landing .e-con.mfs-flp-funder { padding: 0; } body.mfs-fellowship-landing .mfs-flp-funder .elementor-widget-image img { width: 100%; max-width: 623px; height: auto; } /* ------------------------------------------------------------- Unterhalb des Desktops */ /* Die Textblöcke stehen nur im Desktopentwurf nebeneinander. Bei 768px blieben pro Spalte rund 330px, abzüglich der Einrückung noch 220px — der Fließtext bräche dann nach drei, vier Wörtern um. Deshalb brechen sie schon unter 1024px untereinander, so wie im Mobil-Entwurf. Die Sprechblasen bleiben davon unberührt, für die gibt der Tablet-Frame ein 2x2-Raster vor. */ @media (max-width: 1023px) { /* Der Entwurf kennt ZWEI Schriftstaffeln, nicht drei: die des Desktops (1440) und eine kleine, die sowohl der Telefon- als auch der Tabletrahmen führt (`Tablet-View` ist 768 breit und setzt die Überschrift ebenfalls auf 25/30). Abschnittsüberschrift 25/30 statt 40/48, Fließtext 14/20 statt 16/24, in den Eckdaten Begriff und Wert beide 16/24. */ body.mfs-fellowship-landing .mfs-flp-heading .elementor-heading-title { font-size: 25px; line-height: 30px; } body.mfs-fellowship-landing .mfs-flp-text, body.mfs-fellowship-landing .mfs-flp-text p, body.mfs-fellowship-landing .mfs-flp-text li { font-size: 14px; line-height: 20px; } body.mfs-fellowship-landing .mfs-flp-text p { padding-bottom: 20px; } body.mfs-fellowship-landing .mfs-flp-facts dt, body.mfs-fellowship-landing .mfs-flp-facts dd { font-size: 16px; line-height: 24px; } /* Abschnittsrand 32/16 wie in beiden kleinen Rahmen. */ body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con.e-con-boxed { padding-left: 0; padding-right: 0; } body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con > .e-con-inner { padding: 32px 16px; } /* Zweispaltige Abschnitte brechen untereinander. Der zweite Selektor ist der entscheidende: bei einem Container mit fester Inhaltsbreite („boxed") ist nicht der Container selbst der Flex-Kasten, sondern sein `.e-con-inner` — und das trägt die Klasse `e-flex` nicht. */ body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con.e-flex:not(.mfs-flp-bubbles), body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con > .e-con-inner { flex-direction: column; } /* Und jede Spalte darin nimmt die volle Breite. Die Prozentbreiten stehen als Elementor-Einstellung am Element (48.75% und ähnlich); untereinander gestellt ergäben sie halbbreite Textsäulen. */ body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con-inner > .e-con, body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con.e-con-full > .e-con { width: 100%; } /* Der Schlusstext von „Warum dieses Fellowship?" steht dann nicht mehr rechts. */ body.mfs-fellowship-landing .mfs-flp-alignright { margin-left: 0; } /* Untereinander gibt es keine senkrechte Trennlinie mehr, und der 107px-Einzug der Liste hätte auf schmalen Bildschirmen nichts mehr zu verteilen. */ body.mfs-fellowship-landing .e-con.mfs-flp-facts-cols { padding: 0; gap: 24px; } body.mfs-fellowship-landing .e-con.mfs-flp-facts-cols::before { display: none; } body.mfs-fellowship-landing .mfs-flp-facts-cols > .elementor-widget { flex: 0 0 auto; padding-right: 0; } body.mfs-fellowship-landing .mfs-flp-facts-cols > .elementor-widget + .elementor-widget { padding-left: 0; padding-top: 24px; } /* Testimonial: Bild über dem Zitat, sonst passen 320px Bild plus 516px Text nicht nebeneinander. */ body.mfs-fellowship-landing .mfs-flp-voice .elementor-widget-image, body.mfs-fellowship-landing .mfs-flp-voice .elementor-widget-text-editor { flex: 0 0 auto; width: 100%; } /* Das Porträt misst im Telefonentwurf 218px und steht mittig. Über die volle Breite wirkt es wie ein Bildabschnitt und nicht mehr wie ein Porträt neben einem Zitat. */ body.mfs-fellowship-landing .mfs-flp-voice .elementor-widget-image { max-width: 218px; margin-left: auto; margin-right: auto; } /* Partner: der kleine Rahmen stapelt Logo über Text (Abstand 16) und setzt zwischen ALLE vier Karten 32px. Die Regel oben bricht die Karte bereits um; hier fällt nur noch der Unterschied zwischen Reihenabstand (Desktop 40) und Kartenabstand (32) weg, weil die zwei Reihen untereinander stehen und ihr Abstand damit zum Kartenabstand wird. */ body.mfs-fellowship-landing .e-con.mfs-flp-partners { gap: 32px; } /* Der Logokasten hat gestapelt weder feste Breite noch feste Höhe — er soll das Logo tragen, nicht eine 150x80-Fläche reservieren. Der Telefonrahmen macht es genauso: der flache apropolis-Schriftzug bekommt dort einen 150x40-Kasten, die drei anderen 150x80. Mit stehen gebliebener Mindesthöhe klaffte unter apropolis eine halbe Leerzeile mehr als unter den übrigen. */ body.mfs-fellowship-landing .e-con.mfs-flp-partner__logo { flex: 0 0 auto; width: auto; min-height: 0; justify-content: flex-start; align-items: flex-start; } /* Der Förderblock steht auf dem Telefon unter der Überschrift, linksbündig (Frame 281:1062: Überschrift und Logo beide bei x=24, Abstand 16). */ body.mfs-fellowship-landing .e-con.mfs-flp-funder-row, body.mfs-fellowship-landing .e-con.mfs-flp-funder-row > .e-con-inner { justify-content: flex-start; } } /* ---------------------------------------------------------------------------- Tablet */ /* Der Frame `Tablet-View` (83:1694) zeigt für die vier Sprechblasen ausdrücklich ein 2x2-Raster: oben die beiden rosa Karten, darunter die beiden orangen. Vier nebeneinander wären hier zu schmal. Die Reihenfolge im DOM ist rosa/orange/rosa/orange (so steht sie im Desktop-Design nebeneinander), deshalb werden die mittleren beiden Karten getauscht. Das ist hier unbedenklich: die vier Karten sind gleichrangig und bauen nicht aufeinander auf, es gibt also keine Lesereihenfolge, die durch den Tausch kaputtginge. */ @media (min-width: 768px) and (max-width: 1023px) { body.mfs-fellowship-landing .mfs-flp-bubbles { flex-wrap: wrap; } /* Die Blasen sind html-Widgets, keine Container. */ body.mfs-fellowship-landing .mfs-flp-bubbles > .elementor-widget { flex: 0 0 calc(50% - 16px); } /* rosa, rosa / orange, orange statt rosa, orange / rosa, orange. */ body.mfs-fellowship-landing .mfs-flp-bubbles > .elementor-widget:nth-child(1) { order: 1; } body.mfs-fellowship-landing .mfs-flp-bubbles > .elementor-widget:nth-child(3) { order: 2; } body.mfs-fellowship-landing .mfs-flp-bubbles > .elementor-widget:nth-child(2) { order: 3; } body.mfs-fellowship-landing .mfs-flp-bubbles > .elementor-widget:nth-child(4) { order: 4; } } /* ------------------------------------------------------------------------------ Mobil */ /* UNTER 780px KOMMT ASTRAS ABSATZABSTAND ZURÜCK. * * In den Projektnotizen steht seit Langem, das Custom CSS des Kits setze seitenweit * `p { margin-bottom: 0px !important }` — deshalb arbeiten beide Stildateien mit `padding-bottom`. * Das stimmt nur zur Hälfte: die Regel steht in `uploads/elementor/css/post-6.css` innerhalb eines * `@media only screen and (min-width: 780px)`. Darunter greift wieder Astras ungescoptes * `p { margin-bottom: 1.75em }` — bei 14px Fließtext also 24,5px, die zu unseren 20px Polsterung * hinzukamen. Jeder Absatz der Seite stand auf dem Telefon rund eine Leerzeile zu weit auseinander. * Aufgefallen ist es beim Nachmessen der neuen Download-Zeilen am 21.08.2026. * * Astras Regel ist (0,0,1) und ohne !important, ein einfaches Zurücksetzen genügt. Die Klammer * `:where([data-elementor-type="wp-page"])` grenzt auf den Seiteninhalt ein (die Body-Klasse allein * tut das nicht, siehe Kopf dieser Datei) und trägt nichts zur Spezifität bei. */ @media (max-width: 779px) { body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) p { margin-bottom: 0; } } @media (max-width: 767px) { /* Der Hero läuft auf dem Telefon bis an den Rand des Bildschirms und hat nur oben und unten 16px Luft (Frame `LP-Fellowhip_mb`). */ .mfs-flp-hero { padding: 16px 0; } .mfs-flp-hero__mark-img.mfs-flp-hero__mark-img--wide { display: none; } /* Am Knoten abgelesen: das Bild ist auf dem Telefon 390x378 und FÜLLT den Hero, es hat also keinen Seitenrand; die 16px stehen nur oben und unten. */ .mfs-flp-hero__mark-img.mfs-flp-hero__mark-img--tall { display: block; width: 100%; margin: 0; } .mfs-flp-hero__mark-b { margin-left: 28px; } /* Alle zweispaltigen Abschnitte brechen untereinander. */ body.mfs-fellowship-landing :where([data-elementor-type="wp-page"]) .e-con.e-flex { flex-direction: column; } body.mfs-fellowship-landing .mfs-flp-bubble--orange { margin-top: 0; } }