/*
 * RealLabor WordPress-Theme — Prototyp-CSS ("Chrome" um den Blog-Plugin-Inhalt herum)
 *
 * Werte per Browser-Inspektion von reallabor-bildung.de übernommen (Stand 2026-08-12,
 * zweite Messrunde mit getComputedStyle/getBoundingClientRect bei 1610px Viewport):
 *  - Hero-H1: "Roboto Condensed" 600, 105px / 95px Zeilenhöhe
 *  - Section-Überschriften (h2/h3): "Roboto Condensed" 600, 80px / 80px Zeilenhöhe
 *  - Footer-CTA-Überschrift: 30px / 45px, 600
 *  - Eyebrow-Label: Roboto 500, 17px, Großbuchstaben, letter-spacing 0.5px, #e6007e
 *  - Nav-Links: Roboto 500, 17px
 *  - Buttons: Roboto 500, 17px, padding 12px 40px, border-radius 45px
 *  - Hero-/Trenner-Verlauf: linear-gradient(108deg, #5A2362 30%, #e6007e 100%)
 *  - Homepage-Section-Trenner: ECHTER Vollbreite-Balken (x:0 bis Viewport-Rand),
 *    NICHT nur Container-Breite — siehe .rl-divider / .rl-full-bleed unten.
 * Die Blog-Inhalte selbst (rlb-*-Klassen) kommen unverändert aus reallabor-blog.css
 * (assets/css/reallabor-blog.css); .rlb-post__divider wird hier bewusst zusätzlich
 * auf volle Fensterbreite erweitert (Wunsch: einheitlicher wirkender Rhythmus als
 * im aktuellen Plugin, das dort nur Container-Breite nutzt).
 */

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-var.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/roboto-condensed-var.woff2") format("woff2");
}

:root {
    --rl-purple: #5A2362;
    --rl-magenta: #e6007e;
    --rl-gradient: linear-gradient(108deg, var(--rl-purple) 30%, var(--rl-magenta) 100%);
    --rl-divider-gradient: linear-gradient(108deg, var(--rl-purple) 20%, var(--rl-magenta) 80%);
    --rl-text: #171717;
    --rl-muted: #555;
    --rl-font-body: "Roboto", sans-serif;
    --rl-font-heading: "Roboto Condensed", sans-serif;
    --rl-max-width: 1220px;
    --rl-header-h: 118px;
}

/* Letztes Satzzeichen (. ! ?) in lila Überschriften — Klasse wird
   automatisch per assets/js/heading-accent.js um das letzte Zeichen
   gelegt, sobald eine H1–H6 lila gefärbt ist (siehe dortiger Kommentar). */
.rl-punct-accent { color: var(--rl-magenta); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--rl-font-body);
    font-size: 18px;
    line-height: 1.5;
    color: var(--rl-text);
    background: #fff;
    overflow-x: hidden; /* nötig für die full-bleed-Breakout-Elemente unten */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.rl-container {
    max-width: var(--rl-max-width);
    margin: 0 auto;
    padding: 0 40px;
}
@media (max-width: 900px) { .rl-container { padding: 0 28px; } }
@media (max-width: 480px) { .rl-container { padding: 0 20px; } }

/* Breakout-Utility: sprengt den umgebenden Container und füllt die volle
   Fensterbreite — für Trennlinien, die wirklich Rand an Rand gehen sollen. */
.rl-full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ============================================================
   Header / Navigation — immer identisch, liegt als Overlay auf dem Hero
   ============================================================ */
.rl-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding: 34px 0;
}
/* .rl-header ist absolut zum Viewport positioniert (keine positionierte
   Vorfahren-Box), NICHT zur eingeloggt sichtbaren WP-Admin-Leiste — ohne
   diesen Offset überlappt das Logo mit der Admin-Leiste, sobald die
   Leiste bei schmalen Bildschirmen auf 46px wächst (WP-Kernbreakpoint
   782px) während das Header-Padding gleichzeitig kleiner wird. Betrifft
   nur eingeloggte Nutzer:innen (Admin-Leiste existiert nur dann), nicht
   normale Besucher:innen. */
body.admin-bar .rl-header { top: 32px; }
/* .rl-nav-scrim (siehe @media max-width:900px weiter unten) ist ebenfalls
   fix zum Viewport-Rand positioniert und muss denselben Admin-Leisten-Offset
   wie .rl-header mitgehen — sonst ist sein Verlauf schon verblasst, bevor
   er die Logo-Höhe erreicht (Einträge blieben dort trotz Scrim lesbar). */
body.admin-bar .rl-nav-scrim { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .rl-header { top: 46px; }
    body.admin-bar .rl-nav-scrim { top: 46px; }
}
/* Bug gefunden per Live-Site-Messung (Nutzerfeedback "Menüleiste liegt nicht
   rechts bündig"): .rl-nav-scrim bekommt erst weiter unten, INNERHALB von
   @media max-width:900px, position:fixed — bei Desktop-Breite blieb er
   dadurch ein ganz normales, unsichtbares Block-Element OHNE eigene
   Breite, aber als DRITTES Flex-Kind von .rl-header .rl-container zählte
   er trotzdem bei justify-content:space-between mit. Er landete dadurch
   selbst rechtsbündig (0px breit, daher unsichtbar), während .rl-nav als
   MITTLERES von drei Elementen verteilt wurde — dadurch schien die
   Menüleiste optisch nach links verschoben statt wirklich rechtsbündig zu
   liegen, obwohl der Container selbst korrekt an der Inhaltsbreite
   ausgerichtet war. Fix: hier per Default aus dem Flex-Layout nehmen,
   die Mobile-Regel unten schaltet ihn dort gezielt wieder ein. */
.rl-nav-scrim { display: none; }
.rl-header .rl-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.rl-logo { display: flex; align-items: center; flex-shrink: 0; }
.rl-logo img { height: 68px; width: auto; }
/* .rl-nav ist selbst ein Flex-Container: Linkliste links, Login/Logout
   (.rl-auth, nur bei aktivem AuthHub-Connect-Plugin) rechts daneben. */
/* position:relative ist der Anker für .rl-nav-search (position:absolute,
   siehe dort) — ohne diesen Anker würde das Suchfeld-Panel sich am
   nächsten positionierten Vorfahren (.rl-header, volle Breite) statt am
   Icon-Button ausrichten und am Viewport-Rand statt darunter erscheinen. */
/* Gleicher Abstand wie zwischen den Menüpunkten selbst (siehe .rl-nav > ul
   Spalten-Gap 40px direkt darunter) — .rl-nav ist der äußere Flex-Rahmen um
   die Liste UND den Such-Icon-Button (sowie ggf. den Anmelde-Button), der
   Abstand zum letzten Menüpunkt muss deshalb hier, nicht dort, gesetzt
   werden. */
.rl-nav { display: flex; align-items: center; gap: 40px; position: relative; }
/* NUR die oberste Liste bekommt Flex-Layout — mit "ul" statt ">" würde
   das auch das verschachtelte .rl-submenu treffen und dessen Einträge
   nebeneinander statt untereinander anordnen (derselbe Fehlertyp wie bei
   der Mobile-Nav weiter unten, siehe dortiger Kommentar). */
.rl-nav > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; padding: 0; }
.rl-nav a {
    display: inline-block;
    font-family: var(--rl-font-body);
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.2px;
    transition: color .15s ease, transform .15s ease;
}
/* Auf Nutzerwunsch: Text hebt sich beim Hovern leicht an, statt nur die
   Farbe zu wechseln. */
.rl-nav a:hover { color: #ffdff1; transform: translateY(-2px); }
.rl-nav .rl-has-sub { position: relative; display: flex; align-items: center; gap: 10px; cursor: default; }
.rl-nav .rl-has-sub::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform .2s ease;
}
.rl-nav .rl-has-sub:hover::after { transform: rotate(225deg); margin-top: 3px; }

/* Dropdown unter "Orte" (Desktop, Hover) — Panel in Magenta, Linktypo
   identisch zur ersten Navigationsebene (17px/500, wie .rl-nav a). */
.rl-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 18px;
    min-width: 200px;
    list-style: none;
    padding: 0;
    /* Standardmäßig transparent (Nutzerwunsch): das Panel schwebt auf
       Desktop-Breite ohnehin über dem farbigen Hero-Verlauf, ein zusätzlicher
       eigener Hintergrund ist da nur bei einer echten Kollisionsgefahr nötig
       (siehe .rl-submenu--solid unten + assets/js/nav.js, das per
       getBoundingClientRect() prüft, ob das Panel den Seitentitel
       .rl-hero__title überdecken würde). */
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .2s ease;
}
/* Nur gesetzt, wenn assets/js/nav.js beim Aufklappen eine Überdeckung mit
   dem Seitentitel misst (z. B. auf kleineren Desktop-Fenstern, wo der Hero
   weniger hoch ist) — sonst bliebe weißer Menütext auf hellem/weißem
   Titeltext unlesbar. color-mix folgt --rl-magenta, bleibt also auch nach
   einer Customizer-Farbänderung korrekt. */
.rl-submenu--solid {
    background: color-mix(in srgb, var(--rl-magenta) 92%, transparent);
}
.rl-has-sub:hover .rl-submenu,
.rl-has-sub:focus-within .rl-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.rl-submenu li { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.rl-submenu li:last-child { border-bottom: none; }
.rl-submenu a {
    display: block;
    padding: 7px 16px;
    font-family: var(--rl-font-body);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: #fff;
    white-space: nowrap;
    transition: color .15s ease;
}
/* Etwas dunkler statt heller beim Hovern (vorher #ffdff1, ein Aufhellen) —
   auf Nutzerwunsch umgedreht. */
.rl-submenu a:hover { color: color-mix(in srgb, #fff 72%, black); }

/* Der Klick-Öffner für "Orte" existiert nur für die Mobile-Nav (Touch kennt
   kein :hover) — auf Desktop unsichtbar und ohne Funktion nötig. */
.rl-submenu-toggle { display: none; }

/* Such-Icon rechts im Hauptmenü (assets/js/nav.js steuert das Ein-/
   Ausblenden). Panel mit hellem Untergrund, damit .rl-search-form (für
   helle Seiten wie search.php gebaut) unverändert genutzt werden kann. */
.rl-nav-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #fff;
    cursor: pointer;
    border-radius: 999px;
    transition: background-color .15s ease, transform .15s ease;
    flex-shrink: 0;
}
.rl-nav-search-toggle:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
.rl-nav-search {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 18px;
    padding: 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.35);
    z-index: 5;
}
.rl-nav-search .rl-search-form { max-width: none; margin: 0; width: 320px; max-width: 70vw; }
@media (max-width: 900px) {
    .rl-nav-search-toggle { color: #fff; }
    .rl-nav-search {
        position: static;
        margin: 24px 40px 0;
        padding: 0;
        background: none;
        box-shadow: none;
        width: auto;
    }
    .rl-nav-search .rl-search-form { width: 100%; max-width: none; }
}

/* Hamburger-Button: nur ≤900px sichtbar (siehe Media Query unten).
   WICHTIG: die drei Balken stecken in einem EIGENEN Spalten-Flex-Container
   (.rl-nav-toggle__bars) statt direkt im Button — der Button selbst ist
   eine Zeilen-Flexbox (Balken-Icon + "Menü"-Beschriftung nebeneinander).
   Ohne diesen eigenen Container erben die Balken die Zeilen-Ausrichtung
   des Buttons und landen nebeneinander statt übereinander (genau der
   vorgefundene Darstellungsfehler). */
.rl-nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 8px 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.rl-nav-toggle__bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 16px;
    flex-shrink: 0;
}
.rl-nav-toggle__bar {
    display: block;
    width: 100%;
    height: 2.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}
.rl-nav-toggle__label {
    font-family: var(--rl-font-body);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}
/* Balken -> "X" beim Öffnen (Basis-Werte für Desktop-Vorschau/Fallback;
   die eigentliche 900px-Bar-Höhe unten setzt exakt passende Werte). */
.rl-nav-toggle[aria-expanded="true"] .rl-nav-toggle__bar:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.rl-nav-toggle[aria-expanded="true"] .rl-nav-toggle__bar:nth-child(2) { opacity: 0; }
.rl-nav-toggle[aria-expanded="true"] .rl-nav-toggle__bar:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

/* ------------------------------------------------------------
   Tablet & Mobile (≤900px): die Nav wird zum Vollbild-Menü, das den
   gesamten Bildschirm einnimmt (position:fixed, volle Höhe) statt sich
   nur als schmales Klapp-Panel unter dem Header auszuklappen. Der
   Hamburger-Button bleibt (höherer z-index als die Nav) über dem Panel
   sichtbar und dient zugleich als Schließen-Button (Balken -> "X").
   Ab hier ist Hover kein verlässliches Signal mehr (Touch) — daher
   Hamburger-Toggle + Klick-Akkordeon für "Orte" (siehe assets/js/nav.js).
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .rl-nav-toggle { display: inline-flex; position: relative; z-index: 3; }
    /* Logo bleibt beim geöffneten Vollbild-Menü sichtbar (gleicher Grund
       wie beim Toggle-Button: sonst deckt die Nav es per DOM-Reihenfolge zu). */
    .rl-logo { position: relative; z-index: 3; }
    .rl-nav {
        display: flex;
        flex-direction: column;
        /* "safe center": zentriert wie bisher, WENN der Inhalt in den
           Viewport passt — überschreitet er ihn (mehrere aufgeklappte
           Untermenüs), verhält sich das Grid wie bei flex-start und bleibt
           komplett scrollbar. Ohne "safe" rutscht bei Overflow der obere
           Teil des zentrierten Inhalts rechnerisch über den erreichbaren
           Bereich hinaus — genau der gemeldete Fehler ("oberste Punkte
           verschwinden hinter Logo, Scrollen nur eingeschränkt möglich"). */
        justify-content: safe center;
        position: fixed;
        inset: 0;
        z-index: 1;
        background: var(--rl-gradient);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-16px);
        transition: opacity .3s ease, transform .3s ease, visibility .3s;
        overflow-y: auto;
        padding: 100px 0 48px;
    }
    .rl-nav--open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
    /* Farbverlauf-Scrim auf Höhe von Logo/Toggle (Nutzerwunsch): reines
       CSS-Geschwister-Selektor, kein zusätzliches JS nötig — reagiert direkt
       auf .rl-nav--open. Liegt ÜBER dem scrollenden Menü (z-index 2, Nav
       selbst ist 1) und UNTER Logo/Toggle (3), damit Einträge beim Scrollen
       darunter "verschwinden" statt hart abgeschnitten zu wirken. */
    .rl-nav-scrim {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 2;
        height: 140px;
        background: linear-gradient(to bottom, var(--rl-purple, #5A2362) 0%, transparent 100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease, visibility .3s;
    }
    .rl-nav--open ~ .rl-nav-scrim { opacity: 1; visibility: visible; }
    /* Nur die OBERSTE Liste bekommt Flex-Richtung + Außenabstand — mit
       ".rl-nav ul" (statt ">") würde das auch das verschachtelte
       .rl-submenu treffen und dessen eigenes max-height:0 im
       zugeklappten Zustand durch die eigene Padding wieder aufreißen.
       KEIN "margin: auto 0" mehr (siehe .rl-nav justify-content: safe
       center oben) — Auto-Margin auf dem Kind würde die "safe"-Zentrierung
       des Elternelements umgehen und den ursprünglichen Overflow-Fehler
       wieder zurückbringen. */
    .rl-nav > ul { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0; }
    .rl-nav li { width: 100%; }
    .rl-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.15); }
    .rl-nav > ul > li > a { display: block; padding: 18px 40px; font-size: 22px; }
    .rl-has-sub { flex-wrap: wrap; }
    .rl-has-sub > a { flex: 1; padding-right: 0; }
    .rl-has-sub::after { display: none; }
    .rl-submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
    }
    .rl-submenu-toggle::after {
        content: "";
        width: 9px; height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        transition: transform .2s ease;
    }
    .rl-has-sub.is-open .rl-submenu-toggle::after { transform: rotate(225deg); }
    .rl-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
        min-width: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: rgba(0,0,0,.18);
        transition: max-height .25s ease;
    }
    /* 600px statt vorher 320px: bei Untermenüs mit vielen Einträgen (z. B.
       "Wir" -> "Medienberichte" als letzter Punkt) reichte der alte Deckel
       nicht aus und der letzte Eintrag wurde abgeschnitten. max-height ist
       hier nur der Standard-CSS-Kniff, um "auf auto" zu animieren (echtes
       height:auto lässt sich nicht transitionieren) — der Wert muss nur
       großzügig über der tatsächlichen Inhaltshöhe liegen, nicht exakt
       passen. */
    .rl-has-sub.is-open .rl-submenu { max-height: 600px; }
    .rl-submenu a { padding: 10px 40px 10px 56px; font-size: 18px; }
    .rl-submenu li:last-child { border-bottom: none; }
    /* Anmelde-/Konto-Baustein (nur bei aktiviertem AuthHub Connect +
       eingeschaltetem Customizer-Schalter) unten im Vollbild-Menü statt
       wie auf Desktop neben der Linkliste. */
    .rl-auth { margin: 24px 40px 0; }
}
body.rl-noscroll { overflow: hidden; }

@media (max-width: 640px) {
    .rl-header { padding: 20px 0; }
    .rl-logo img { height: 48px; }
    .rl-nav-toggle__label { display: none; }
}

/* ============================================================
   Hero — großer, gradient-hinterlegter Kopfbereich
   ============================================================ */
.rl-hero {
    position: relative;
    background: var(--rl-gradient);
    display: flex;
    /* Titel liegt bodenbündig (fester Abstand über padding-bottom), NICHT
       vertikal zentriert — der Raum zwischen Logo/Nav oben und Titel unten
       ergibt sich automatisch aus der vh-basierten min-height: je größer
       der Bildschirm, desto höher der Hero, desto mehr Luft darüber.
       padding-top sichert zusätzlich eine Mindestfreifläche unter dem
       (absolut positionierten, überlagernden) Header: sobald ein Beitrags-
       bild den Inhalt höher als min-height macht, wächst die Hero-Box statt
       das Grün am oberen Rand zu verkleinern — ohne diesen Puffer würde der
       Titel dann direkt unters Logo rutschen (gefunden beim Responsive-Test
       bei einer Angebotsseite mit Beitragsbild auf schmalem Bildschirm).
       Der Bottom-Anchor-Effekt bleibt für normale Textseiten unverändert,
       weil padding-top die untere Content-Kante nur verschiebt, sobald der
       Inhalt die min-height tatsächlich überschreitet. */
    align-items: flex-end;
    padding-top: 150px;
    padding-bottom: 80px;
}
/* Seitentyp 1 (Startseite): 95vh — exakt wie live gemessen.
   Seitentyp 2 (Standard-Unterseiten/Blog/etc.): 60vh — Nutzervorgabe. */
.rl-hero--home { min-height: 95vh; }
.rl-hero--page { min-height: 60vh; }
.rl-hero > .rl-container { width: 100%; }
@media (max-width: 900px) {
    /* Auf Tablet/Mobile wäre 95vh für die Startseite unverhältnismäßig viel
       Scroll-Strecke bis zum ersten Inhalt — reduziert, bleibt aber klar
       höher als die Unterseiten-Variante (siehe Konzept-Dokument). */
    .rl-hero--home { min-height: 75vh; }
}
@media (max-width: 640px) {
    .rl-hero { padding-top: 100px; padding-bottom: 56px; }
    .rl-hero--home { min-height: 68vh; }
    .rl-hero--page { min-height: 46vh; }
}
.rl-hero__eyebrow {
    display: block;
    font-family: var(--rl-font-body);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffb3e1;
    margin: 0 0 16px;
}
/* Klickbare Variante (rl_archive_link_for_post_type() gesetzt) — dezenter
   Hover-Hinweis statt der Fließtext-Standardfarbe, damit es nicht wie ein
   normaler Link aussieht (Eyebrow bleibt visuell zuerst ein Label). */
a.rl-hero__eyebrow { text-decoration: none; transition: color .15s ease; }
a.rl-hero__eyebrow:hover { color: #fff; }
.rl-hero__title {
    margin: 0;
    font-family: var(--rl-font-heading);
    font-weight: 600;
    color: #fff;
    letter-spacing: -1px;
    line-height: 0.95;
}
.rl-hero--home .rl-hero__title {
    font-size: clamp(48px, 7.5vw, 120px);
    max-width: 960px;
}
.rl-hero--page .rl-hero__title {
    font-size: clamp(42px, 6vw, 88px);
}
.rl-hero__subtitle {
    margin: 26px 0 0;
    font-size: 19px;
    color: #ffe4f4;
    max-width: 640px;
}
/* max-height ist bewusst gesetzt: ohne Deckel kann ein sehr breites/
   flaches Beitragsbild bei "page"-Heroes (60vh, kürzer als die 95vh-
   Startseite) so hoch werden, dass Eyebrow/Titel über den Rand nach oben
   aus dem Hero heraus- und unter den transparent überlagerten Header
   geschoben werden (Titel-Logo-Überlappung, gefunden beim Tablet-Test
   mit echtem Beitragsbild). */
.rl-hero__image {
    margin-top: 44px;
    border-radius: 12px;
    overflow: hidden;
    max-width: 100%;
    max-height: 280px;
}
.rl-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 640px) {
    .rl-hero__image { max-height: 180px; }
}

/* ============================================================
   Pill-Buttons
   ============================================================ */
.rl-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--rl-font-body);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-decoration: none;
    border-radius: 50px;
    padding: 18px 48px;
    transition: color .3s, border-color .3s;
    border: 1px solid var(--rl-btn-color, var(--rl-purple));
    color: var(--rl-btn-color, var(--rl-purple));
    background: transparent;
}
/* Live-Verhalten (reallabor-bildung.de): Hintergrund bleibt transparent,
   nur Text-/Rahmenfarbe wechselt lila -> magenta (0.3s, per Hover geprüft).
   --rl-btn-color/--rl-btn-hover-color sind vom Button-Block (rl/link-button)
   individuell per Inline-Style setzbar (Nutzerwunsch: eigene Farben wählen
   können) — ohne gesetzten Wert bleibt es beim Standard Lila/Magenta. */
.rl-btn:hover { border-color: var(--rl-btn-hover-color, var(--rl-magenta)); color: var(--rl-btn-hover-color, var(--rl-magenta)); }
.rl-btn__arrow {
    display: inline-block;
    transition: transform .25s ease;
}
.rl-btn:hover .rl-btn__arrow { transform: translateX(4px); }
.rl-btn--on-dark { border-color: #fff; color: #fff; transition: color .3s, border-color .3s, background-color .3s; }
.rl-btn--on-dark:hover { background: #fff; border-color: #fff; color: var(--rl-purple); }
.rl-btn--solid-light { border-color: transparent; background: #fff; color: var(--rl-purple); transition: background-color .3s, color .3s; }
.rl-btn--solid-light:hover { background: #ffe4f4; color: var(--rl-magenta); }
@media (max-width: 480px) {
    /* Volle Größe wirkt auf 320-375px-Screens überladen und kann zusammen
       mit langem Linktext Zeilenumbrüche im Button erzwingen. */
    .rl-btn { padding: 15px 32px; gap: 10px; }
}

/* ============================================================
   Generische Content-Sections — großzügige Weißräume
   ============================================================ */
.rl-section { padding: 130px 0; }
@media (max-width: 1024px) {
    .rl-section { padding: 96px 0; }
}
@media (max-width: 780px) {
    .rl-section { padding: 64px 0; }
}
@media (max-width: 480px) {
    .rl-section { padding: 48px 0; }
}

/* Vertikaler Innenabstand für "freien" Elementor-/Gutenberg-Inhalt unter
   dem Hero (front-page.php, page.php, index.php). Bewusst ein EIGENES,
   nur vertikales Padding auf einem WRAPPER um .rl-container herum, statt
   direkt auf .rl-container per Inline-Style — sonst würde ein Inline-
   "padding:80px 0"-Shorthand auf demselben Element das horizontale
   40px/28px/20px-Padding der Klasse komplett auf 0 zurücksetzen (CSS-
   Shorthand überschreibt IMMER alle vier Seiten). Genau das war der Bug:
   Inhalt stieß bildschirmfüllend an den Rand, obwohl Header/Footer korrekt
   eingerückt blieben. */
.rl-content-wrap { padding: 80px 0; }
@media (max-width: 780px) {
    .rl-content-wrap { padding: 56px 0; }
}
@media (max-width: 480px) {
    .rl-content-wrap { padding: 40px 0; }
}
.rl-divider {
    height: 3px;
    background: var(--rl-divider-gradient);
}
.rl-eyebrow {
    display: block;
    font-family: var(--rl-font-body);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--rl-magenta);
    margin: 0 0 18px;
}
.rl-section__heading {
    font-family: var(--rl-font-heading);
    font-weight: 600;
    color: var(--rl-purple);
    letter-spacing: -1px;
    line-height: 1.0;
    font-size: clamp(32px, 5.2vw, 80px);
    margin: 0 0 28px;
}
.rl-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.rl-section__grid p { margin: 0 0 20px; }
.rl-section__grid p:last-child { margin-bottom: 0; }
@media (max-width: 780px) {
    .rl-section__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   Footer
   ============================================================ */
.rl-footer-cta {
    background: var(--rl-gradient);
    color: #fff;
    padding: 100px 0 0;
}
.rl-footer-cta .rl-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    padding-bottom: 70px;
}
.rl-footer-cta__title {
    font-family: var(--rl-font-heading);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: -0.3px;
    margin: 0;
}
.rl-footer-cta__text { margin: 0 0 28px; color: #ffe4f4; }
.rl-footer-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.rl-footer-cta__list { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
/* Ebenen-Pfad im Footer (Wunsch: einfach auf die darüberliegenden Seiten
   kommen) — sitzt bewusst AUSSERHALB von .rl-footer-cta, direkt über dem
   Farbverlauf. Hintergrundfarbe wird per assets/js/breadcrumb-bg.js zur
   Laufzeit an den Bereich direkt darüber angeglichen (siehe dortiger
   Kommentar) — Fallback hier ist Weiß (Standard-Seitenhintergrund), falls
   JavaScript deaktiviert ist. WICHTIG: der ca. 20px-Abstand zum Farbverlauf
   darunter ist bewusst padding-bottom, NICHT margin-bottom — Margin wird nie
   mit Hintergrundfarbe gefüllt und hätte hier einen unlackierten weißen
   Streifen zwischen der eingefärbten Leiste und dem Verlauf hinterlassen. */
.rl-breadcrumbs { padding-bottom: 20px; }
.rl-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
}
.rl-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.rl-breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: var(--rl-muted);
}
.rl-breadcrumbs a {
    color: var(--rl-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color .15s ease;
}
.rl-breadcrumbs a:hover { color: var(--rl-magenta); }
.rl-breadcrumbs span { font-size: 13px; color: var(--rl-text); }

/* Auf Mobil komplett ausgeblendet (Wunsch: nicht anzeigen, kein Platzverbrauch). */
@media (max-width: 640px) {
    .rl-breadcrumbs { display: none; }
}

.rl-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.25);
    padding: 28px 0;
}
.rl-footer-bottom .rl-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 0;
}
.rl-footer-bottom img { height: 44px; }
.rl-footer-bottom__list { display: flex; gap: 26px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.rl-footer-bottom nav a { color: #fff; font-size: 14px; text-decoration: none; transition: color .15s ease; }
.rl-footer-bottom nav a:hover { color: color-mix(in srgb, #fff 72%, black); }

@media (max-width: 780px) {
    .rl-footer-cta { padding: 64px 0 0; }
    .rl-footer-cta .rl-container { grid-template-columns: 1fr; gap: 28px; padding-bottom: 44px; }
    .rl-footer-cta__title { font-size: 26px; }
}
@media (max-width: 560px) {
    .rl-footer-bottom .rl-container { flex-direction: column; align-items: flex-start; gap: 18px; }
    .rl-footer-cta__list { flex-direction: column; align-items: stretch; }
    .rl-footer-cta__list .rl-btn { justify-content: center; }
}

/* ============================================================
   Fade-In-Scroll-Animation (leicht, ohne externe Bibliothek)
   Wird per assets/js/animate.js über IntersectionObserver getriggert:
   sobald .rl-fade-in in den Viewport kommt, Klasse .is-visible setzen.
   ============================================================ */
.rl-fade-in {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}
.rl-fade-in.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .rl-fade-in { opacity: 1; transform: none; transition: none; }
}

/* Karten bekommen zusätzlich einen kleinen, gestaffelten Auftritt sowie
   einen etwas lebendigeren Hover (leichtes Anheben + Schattenwachstum
   liefert bereits reallabor-blog.css; hier nur die Eintritts-Animation). */
.rlb-card.rl-fade-in { transition-delay: calc(var(--rl-stagger, 0) * 70ms); }

/* Konsistente Mikro-Interaktion: derselbe Pfeil-Nudge wie bei .rl-btn,
   hier beim Hover über die ganze Karte (nicht nur den CTA-Text). */
.rlb-card:hover .rl-btn__arrow { transform: translateX(4px); }

/* ============================================================
   Blog-Trennlinien über die volle Fensterbreite (Wunsch: einheitlicher,
   lebendiger Rhythmus wie bei den Homepage-Sections — im Original-Plugin
   ist .rlb-post__divider nur Container-breit, hier bewusst erweitert).
   ============================================================ */
/* Höhere Spezifität (2 Klassen) nötig, weil reallabor-blog.css NACH diesem
   Stylesheet lädt und dort .rlb-post__divider { margin:0; } steht — das
   würde die Breakout-Margins von .rl-full-bleed sonst wieder auf 0 setzen. */
.rlb-post__divider.rl-full-bleed {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: -50vw;
    margin-right: -50vw;
}
/* Konsistente 50/50-Aufteilung wie bei .rl-section__grid (statt des
   1:1.25-Verhältnisses aus dem Original-Plugin) — Wunsch: überall exakt
   links Überschrift / rechts Text. Höhere Spezifität nötig, siehe oben. */
.rlb-post .rlb-post__section {
    grid-template-columns: 1fr 1fr;
}
/* WICHTIG: reallabor-blog.css kollabiert .rlb-post__section unterhalb
   780px selbst schon auf eine Spalte (@media max-width:780px). Weil unsere
   50/50-Regel oben aber höhere Spezifität hat, würde sie diesen mobilen
   Kollaps sonst außer Kraft setzen — hier bewusst erneut mit derselben
   erhöhten Spezifität auf 1 Spalte zurückgesetzt. */
@media (max-width: 780px) {
    .rlb-post .rlb-post__section {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Blog-Seitenkopf-Variable (Standort-Eyebrow im Hero)
   ============================================================ */
.rl-hero__standort {
    display: inline-block;
    font-family: var(--rl-font-body);
    color: #ffb3e1;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* ============================================================
   Logo-Textersatz (kein Bild unter Design > Website-Identität hinterlegt)
   ============================================================ */
.rl-logo--text {
    font-family: var(--rl-font-heading);
    font-weight: 600;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}
.rl-footer-bottom .rl-logo--text { font-size: 20px; }

/* ============================================================
   Login/Logout (AuthHub Connect) — nur sichtbar, wenn das Plugin aktiv
   ist (siehe rl_auth_header_button() in inc/plugin-integration.php).
   ============================================================ */
.rl-auth {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 8px;
}
.rl-auth__name {
    font-family: var(--rl-font-body);
    font-size: 15px;
    font-weight: 500;
    color: #ffdff1;
}
.rl-auth__logout {
    font-family: var(--rl-font-body);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rl-auth__logout:hover { color: #ffdff1; }
/* AuthHub Connect liefert den [authhub_login]-Link fest mit eigenen
   Inline-Styles (siehe Plugin-Analyse) — !important nötig, um ihn optisch
   an die übrigen Pill-Buttons anzugleichen, da Inline-Styles sonst jede
   externe Stylesheet-Regel unabhängig von deren Spezifität schlagen. */
.rl-authhub-login a {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--rl-font-body) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 8px 22px !important;
    border-radius: 45px !important;
    background: transparent !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    transition: background-color .3s, color .3s !important;
}
.rl-authhub-login a:hover {
    background: #fff !important;
    color: var(--rl-purple) !important;
}
@media (max-width: 900px) {
    .rl-auth {
        margin: 4px 40px 20px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,.15);
    }
}

/* ============================================================
   Blogbeitrag (single.php) — native WordPress-Beiträge, eigene
   rl-post__-Klassen (siehe inc/content-sections.php). Optisch am selben
   50/50-Muster wie .rl-section__grid orientiert, damit sich Homepage-
   Sections und Beitragsabschnitte konsistent anfühlen.
   ============================================================ */
.rl-post__content {
    font-family: var(--rl-font-body);
    font-size: 18px;
    line-height: 27px;
    letter-spacing: -0.5px;
    color: var(--rl-text);
}
.rl-post__content p { margin: 0 0 18px; }
.rl-post__content ul, .rl-post__content ol { margin: 0 0 18px; padding-left: 24px; }
.rl-post__content a { color: var(--rl-magenta); text-decoration: none; }
.rl-post__content a:hover { color: var(--rl-purple); }
/* Höhere Spezifität nötig (zwei Klassen statt nur ".rl-post__content a"):
   sonst würde die generische Fließtext-Link-Regel oben (gleiche Spezifität
   + steht früher im Stylesheet) die Button-Farben umdrehen, sobald der neue
   Button-Block (rl/link-button) innerhalb von Beitrags-/Seiteninhalt
   eingefügt wird — identischer Bug wie bei .rl-team-row__name und den
   RealLabor-Events-Social-Icons, siehe dortige Kommentare. */
.rl-post__content .rl-btn { color: var(--rl-btn-color, var(--rl-purple)); border-color: var(--rl-btn-color, var(--rl-purple)); }
.rl-post__content .rl-btn:hover { color: var(--rl-btn-hover-color, var(--rl-magenta)); border-color: var(--rl-btn-hover-color, var(--rl-magenta)); }
.rl-post__content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 18px 0;
    display: block;
}
/* Diese Regel matcht (ohne ">") auch Bilder verschachtelter Bausteine wie
   rl/content-box und rl/team, die als HTML innerhalb von .rl-post__content
   landen — margin/border-radius müssen dort explizit auf 0 zurückgesetzt
   werden (siehe .rl-card__media img, .rl-team-row__media img), sonst
   entsteht ein sichtbarer Farbverlaufsstreifen über dem Bild. Bei neuen
   Karten-/Medien-Komponenten innerhalb von .rl-post__content immer prüfen. */
/* H3 innerhalb des Fließtextes (Einleitung VOR der ersten H2 UND
   Abschnitts-Text rechts) — löst bewusst KEINEN Spaltenwechsel/neuen
   Abschnitt aus (siehe inc/content-sections.php), sondern bleibt an seiner
   Stelle einfach eine kleinere, lila Zwischenüberschrift — exakt dieselben
   Werte wie ".rl-flow h3" bei Medienberichten/Briefen (Nutzerwunsch: "so
   wie die Zwischenüberschriften bei Medienberichten"). */
.rl-post__intro h3,
.rl-post__section-body h3 {
    font-family: var(--rl-font-heading);
    font-weight: 600;
    color: var(--rl-purple);
    line-height: 1.2;
    font-size: clamp(21px, 2.4vw, 27px);
    margin: 40px 0 16px;
}
.rl-post__intro h3:first-child,
.rl-post__section-body h3:first-child {
    margin-top: 0;
}
.rl-post__intro { padding-bottom: 100px; }
@media (max-width: 1024px) { .rl-post__intro { padding-bottom: 72px; } }
@media (max-width: 780px) { .rl-post__intro { padding-bottom: 48px; } }
/* .rl-post__intro hatte bewusst NIE ein padding-top — als reine "Einleitung
   vor der ersten Überschrift" stand vorher nie etwas anderes als der schon
   von .rl-content-wrap kommende Außenabstand davor. Seit frei platzierbare
   Blöcke (rl/highlights, rl/content-box, rl/zeitleiste) auch VOR der ersten
   Überschrift stehen können, kann jetzt aber eine Trennlinie direkt vor
   so einem Textblock landen — die Trennlinie selbst hat margin:0 (siehe
   .rl-post__divider), der fehlende obere Abstand fiel dadurch komplett weg
   (gemeldeter Bug: Trennlinie klebt am Text). Fix als Geschwister-Selektor,
   NUR wenn direkt eine Trennlinie vorausgeht — der normale Fall (Intro als
   allererster Block der Seite) bleibt dadurch unverändert. */
.rl-post__divider + .rl-post__intro { padding-top: 100px; }
@media (max-width: 1024px) { .rl-post__divider + .rl-post__intro { padding-top: 72px; } }
@media (max-width: 780px) { .rl-post__divider + .rl-post__intro { padding-top: 48px; } }

/* Eingebettete Bausteine im Fließtext — Videos/Embeds, Buttons, Zitate
   (Bilder waren bereits oben gestylt). Gilt für .rl-post__content (Blog/
   Angebote/Materialien/Menschen, 50/50-Layout) UND .rl-flow (Briefe/
   Medienberichte/Mediathek, einspaltig) — beide gehen auf denselben
   the_content()-Ursprung zurück, deshalb hier bewusst gemeinsam gepflegt
   statt doppelt. Formulare (Kontaktformular etc.) brauchen keine eigenen
   Regeln hier, ihre Shortcodes bringen bereits global gültige Klassen mit. */
.rl-post__content .wp-block-embed,
.rl-flow .wp-block-embed {
    margin: 8px 0 28px;
}
.rl-post__content .wp-block-embed iframe,
.rl-flow .wp-block-embed iframe {
    max-width: 100%;
    border-radius: 10px;
}
.rl-post__content .wp-block-video video,
.rl-flow .wp-block-video video {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 8px 0 28px;
}

.rl-post__content .wp-block-buttons,
.rl-flow .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 8px 0 28px;
    padding: 0;
    list-style: none;
}
.rl-post__content .wp-block-button__link,
.rl-flow .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--rl-magenta);
    color: #fff;
    font-family: var(--rl-font-body);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s ease, transform .15s ease;
}
.rl-post__content .wp-block-button__link:hover,
.rl-flow .wp-block-button__link:hover {
    background: var(--rl-purple);
    transform: translateY(-2px);
    text-decoration: none;
}
.rl-post__content .wp-block-button.is-style-outline .wp-block-button__link,
.rl-flow .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--rl-purple);
    border: 2px solid var(--rl-purple);
}
.rl-post__content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.rl-flow .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--rl-purple);
    color: #fff;
}

.rl-post__content blockquote,
.rl-flow blockquote {
    margin: 8px 0 28px;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--rl-magenta);
    font-family: var(--rl-font-heading);
    font-size: 22px;
    font-style: italic;
    color: var(--rl-purple);
}
.rl-post__content blockquote p:last-child,
.rl-flow blockquote p:last-child { margin-bottom: 0; }
.rl-post__content blockquote cite,
.rl-flow blockquote cite {
    display: block;
    margin-top: 10px;
    font-family: var(--rl-font-body);
    font-size: 14px;
    font-style: normal;
    color: var(--rl-muted);
}

/* ============================================================
   Einspaltiges Fließtext-Layout (Briefe, Medienberichte) — bewusst KEIN
   50/50-Split: Zwischenüberschriften stehen mit im Text statt separat
   links (siehe Datei-Kopf-Kommentar in single-brief.php).
   ============================================================ */
.rl-flow__byline {
    font-size: 15px;
    color: var(--rl-muted);
    margin: 0 0 32px;
}
/* Autor/Datum unten neben dem Like-Button (single-brief.php) statt als
   Byline oben — .rl-post__like-row hält beide auf gleicher Höhe, rechts
   der Text, links der Button; bricht auf Mobile sauber untereinander um. */
.rl-post__like-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.rl-post__like-row .rl-like { margin-top: 0; }
.rl-flow__byline--inline { margin: 0; }
@media (max-width: 480px) {
    .rl-post__like-row { justify-content: flex-start; }
}
.rl-flow {
    font-family: var(--rl-font-body);
    font-size: 18px;
    line-height: 1.7;
    color: var(--rl-text);
    /* Bewusst KEIN max-width mehr (ToDo #389): der Text unter Video/Bild bei
       Medienberichten/Mediathek/Briefen soll genau dieselbe Breite wie
       .rl-video-embed/.rl-mb-image nutzen (beide 100% von .rl-container),
       vorher wirkte er dadurch schmaler/eingerückt als das Medium darüber. */
}
.rl-flow p { margin: 0 0 22px; }
.rl-flow ul, .rl-flow ol { margin: 0 0 22px; padding-left: 24px; }
.rl-flow a { color: var(--rl-magenta); text-decoration: none; }
.rl-flow a:hover { color: var(--rl-purple); }
.rl-flow img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 8px 0 28px;
    display: block;
}
.rl-flow h2, .rl-flow h3, .rl-flow h4 {
    font-family: var(--rl-font-heading);
    font-weight: 600;
    color: var(--rl-purple);
    line-height: 1.2;
    margin: 44px 0 18px;
}
.rl-flow h2 { font-size: clamp(24px, 3vw, 34px); }
.rl-flow h3 { font-size: clamp(21px, 2.4vw, 27px); }
.rl-flow h4 { font-size: 19px; color: var(--rl-magenta); text-transform: uppercase; letter-spacing: 0.4px; }
.rl-flow > *:first-child { margin-top: 0; }
@media (max-width: 640px) {
    .rl-flow { font-size: 17px; }
    .rl-flow h2, .rl-flow h3, .rl-flow h4 { margin-top: 32px; }
}

.rl-post__divider {
    height: 3px;
    background: var(--rl-divider-gradient);
    margin-top: 0;
    margin-bottom: 0;
}

.rl-post__section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding: 100px 0;
    align-items: start;
}
.rl-post__section-eyebrow {
    display: block;
    font-family: var(--rl-font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--rl-magenta);
    margin: 0 0 12px;
}
.rl-post__section-head h2 {
    /* Ausgangswert war der Referenzwert von reallabor-bildung.de (80px bei
       ~1610px Viewport, siehe Datei-Kopf-Kommentar) — auf Nutzerwunsch
       bewusst darüber hinaus vergrößert (Kommentar bleibt als Herkunfts-
       Hinweis stehen, die Werte selbst weichen jetzt absichtlich ab). */
    font-family: var(--rl-font-heading);
    font-size: clamp(32px, 6vw, 88px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--rl-purple);
    margin: 0;
}
@media (max-width: 1024px) {
    .rl-post__section { padding: 72px 0; }
}
@media (max-width: 780px) {
    .rl-post__section { grid-template-columns: 1fr; gap: 16px; padding: 48px 0; }
}

/* Bild-Galerie als durchlaufendes Laufband — reine CSS-Keyframe-
   Animation, volle Breite, unabhängig vom 50/50-Grid der Abschnitte. */
.rl-post__slider-wrap { margin: 100px 0; }
@media (max-width: 1024px) { .rl-post__slider-wrap { margin: 72px 0; } }
@media (max-width: 780px) { .rl-post__slider-wrap { margin: 48px 0; } }
/* --rl-slider-height: pro Galerie manuell einstellbar über die Block-
   Additional-CSS-Klasse "rl-slider-h-NNN" (NNN = Höhe in Pixel), siehe
   inc/content-sections.php: rl_extract_gallery_height(). Ohne diese Klasse
   gelten die Fallback-Werte hier (320px / mobil 220px). */
.rl-post__slider { overflow: hidden; height: var(--rl-slider-height, 320px); position: relative; }
.rl-post__slider-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: max-content;
    animation: rl-post-marquee var(--rl-slider-duration, 40s) linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}
.rl-post__slider:hover .rl-post__slider-track { animation-play-state: paused; }
.rl-post__slider-item { flex: 0 0 auto; height: 100%; margin-right: 6px; }
.rl-post__slider-item a {
    display: block;
    height: 100%;
    cursor: zoom-in;
}
.rl-post__slider-item img {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
    border-radius: 0;
}
@keyframes rl-post-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .rl-post__slider-track { animation: none; overflow-x: auto; width: 100%; }
}
@media (max-width: 780px) {
    .rl-post__slider { height: var(--rl-slider-height, 220px); }
}

/* "In Absatz integrieren" (Editor-Einstellung, siehe assets/js/gallery-
   settings.js): kein Full-Bleed-Breakout, bleibt innerhalb der normalen
   Text-/Abschnittsspalte, kleinere Außenabstände wie bei anderen
   Inline-Elementen statt der 100px/72px/48px-Vollbreite-Abstände oben. */
.rl-post__slider-wrap--inline { margin: 24px 0; }
.rl-post__slider-wrap--inline .rl-post__slider,
.rl-post__slider-wrap--inline .rl-post__gallery-grid {
    border-radius: 10px;
    overflow: hidden;
}

/* Statische Reihe bei 1–3 Bildern (rl_render_gallery_markup() in
   inc/content-sections.php: ein Laufband mit so wenigen Bildern wirkt leer
   bzw. springt sichtbar zurück) — gleiche Höhe/Klick-Verhalten wie das
   Laufband, nur ohne Endlos-Animation. */
.rl-post__gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    height: var(--rl-slider-height, 320px);
}
.rl-post__gallery-item { flex: 1 1 0; min-width: 160px; height: 100%; }
.rl-post__gallery-item a { display: block; height: 100%; cursor: zoom-in; }
.rl-post__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}
@media (max-width: 780px) {
    .rl-post__gallery-grid { height: auto; }
    .rl-post__gallery-item { flex: 1 1 45%; height: var(--rl-slider-height, 220px); }
}

.rl-post__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(90,35,98,.15);
}
.rl-post__back {
    font-size: 15px;
    color: var(--rl-magenta);
    text-decoration: none;
}
.rl-post__back:hover { color: var(--rl-purple); }
.rl-post__date { font-size: 14px; color: var(--rl-muted); }

/* Like-Button (Ersatz der abgeschalteten Kommentarfunktion, inc/likes.php). */
.rl-like {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1px solid rgba(90,35,98,.3);
    background: transparent;
    color: var(--rl-purple);
    font-family: var(--rl-font-body);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.rl-like:hover:not(:disabled) { border-color: var(--rl-magenta); color: var(--rl-magenta); }
.rl-like__icon { flex-shrink: 0; transition: transform .15s ease; }
.rl-like:hover:not(:disabled) .rl-like__icon { transform: scale(1.12); }
.rl-like__count { font-variant-numeric: tabular-nums; font-weight: 700; }
.rl-like.is-liked {
    background: var(--rl-magenta);
    border-color: var(--rl-magenta);
    color: #fff;
}
.rl-like.is-liked .rl-like__icon {
    fill: currentColor;
    animation: rl-like-pop .4s cubic-bezier(.17,.89,.32,1.49);
}
.rl-like:disabled { cursor: default; }
@keyframes rl-like-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .rl-like.is-liked .rl-like__icon { animation: none; }
}

/* "Das könnte dich auch interessieren" — inc/related-content.php. Full-
   bleed mit dezentem Hintergrund, damit sich der Block klar vom
   Beitragsinhalt darüber absetzt, unabhängig davon wie die Seite selbst
   layoutet ist (single.php, single-brief.php, …). */
.rl-related {
    background: color-mix(in srgb, var(--rl-purple) 5%, white);
    padding: 64px 0;
    margin-top: 56px;
}
.rl-related__title {
    font-family: var(--rl-font-heading);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    color: var(--rl-purple);
    margin: 0 0 32px;
}
@media (max-width: 640px) {
    .rl-related { padding: 40px 0; margin-top: 40px; }
}

/* ============================================================
   Highlights (inc/highlights.php) — Bereich direkt unter dem Hero der
   Startseite, damit der Fokus der Gäste sofort gelenkt wird. Boxen mit
   Bildhintergrund + Verlauf-Scrim für lesbaren Titel, Typ-Badge oben
   links (Angebot/Mensch/Veranstaltung/…). Optisch bewusst eigenständiger/
   auffälliger als die ruhigeren .rl-card-Kacheln (.rl-related), damit der
   Unterschied "kuratiert hervorgehoben" vs. "automatisch verwandt" spürbar
   bleibt.
   ============================================================ */
.rl-highlights {
    padding: 64px 0;
}
.rl-highlights__title {
    font-family: var(--rl-font-heading);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    color: var(--rl-purple);
    margin: 0 0 32px;
}
.rl-highlights__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.rl-highlight-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    background: var(--rl-gradient);
    box-shadow: 0 10px 30px rgba(90,35,98,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.rl-highlight-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(90,35,98,.26);
}
.rl-highlight-box__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.rl-highlight-box__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
}
.rl-highlight-box__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    font-family: var(--rl-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    color: var(--rl-purple);
}
.rl-highlight-box__title {
    position: relative;
    z-index: 1;
    padding: 24px;
    font-family: var(--rl-font-heading);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}
@media (max-width: 640px) {
    .rl-highlights { padding: 40px 0; }
    .rl-highlight-box { min-height: 200px; }
}

/* ============================================================
   Angebots-/Produktseite (single-angebot.php) — Eckdaten-Box.
   ============================================================ */
.rl-eckdaten {
    background: color-mix(in srgb, var(--rl-purple) 6%, white);
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 44px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rl-eckdaten__status {
    align-self: flex-start;
    font-family: var(--rl-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--rl-purple);
    color: #fff;
}
.rl-eckdaten__status--warteliste { background: #b8860b; }
.rl-eckdaten__status--ausgebucht { background: #8a8a8a; }
.rl-eckdaten__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px 32px;
}
.rl-eckdaten__item { display: flex; flex-direction: column; gap: 4px; }
.rl-eckdaten__item--wide { grid-column: 1 / -1; }
.rl-eckdaten__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--rl-magenta);
}
.rl-eckdaten__value { font-size: 17px; color: var(--rl-text); }
.rl-eckdaten__termine { list-style: none; margin: 0; padding: 0; font-size: 16px; }
.rl-eckdaten__termine li { padding: 3px 0; }
@media (max-width: 560px) {
    .rl-eckdaten { padding: 22px 20px; }
}

/* Team-Mitglied: Social-Media-Links innerhalb der Eckdaten-Box (single-team_mitglied.php). */
.rl-eckdaten__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.rl-eckdaten__social-link {
    font-family: var(--rl-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--rl-purple);
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(90,35,98,.3);
    transition: border-color .2s ease, color .2s ease;
}
.rl-eckdaten__social-link:hover { border-color: var(--rl-magenta); color: var(--rl-magenta); }

/* ============================================================
   Medienbericht (single-medienbericht.php) — Video-Einbettung, Bild bei
   Art "Artikel", Meta-Zeile (Erscheinungsdatum/Verlag/Quelle) unten.
   ============================================================ */
.rl-video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 40px;
}
.rl-video-embed iframe,
.rl-video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.rl-mb-image {
    margin-bottom: 40px;
}
.rl-mb-image img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
}
.rl-mb-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    background: color-mix(in srgb, var(--rl-purple) 6%, white);
    border-radius: 14px;
    padding: 24px 32px;
    margin-top: 40px;
}
.rl-mb-meta__item { display: flex; flex-direction: column; gap: 4px; }
.rl-mb-meta__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--rl-magenta);
}
.rl-mb-meta__value { font-size: 16px; color: var(--rl-text); }
.rl-mb-meta__value a { color: var(--rl-purple); }

/* [rl_video]-Shortcode (inc/cpt-mediathek.php) — kompakte Einbettung eines
   einzelnen Mediathek-Videos innerhalb beliebigen Inhalts. */
.rl-mediathek-embed { margin: 32px 0; }
.rl-mediathek-embed__title {
    font-family: var(--rl-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--rl-purple);
    margin: 0 0 14px;
}
.rl-mediathek-embed__title a { color: inherit; text-decoration: none; }
.rl-mediathek-embed__title a:hover { color: var(--rl-magenta); }
.rl-mediathek-embed__desc { margin-top: 16px; font-size: 16px; line-height: 1.6; }

/* ============================================================
   Zeitleiste ([rl_zeitleiste]/[rl_zeitleisten_eintrag], inc/zeitleiste.php).
   Senkrechte Linie über .rl-zeitleiste__marker::before, die sich optisch
   über alle Einträge fortsetzt (letzter Eintrag bekommt keine Linie mehr).
   ============================================================ */
.rl-zeitleiste { max-width: 720px; margin: 8px 0; }
.rl-zeitleiste__eintrag { display: flex; gap: 24px; }
.rl-zeitleiste__marker {
    position: relative;
    width: 14px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.rl-zeitleiste__marker::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: -40px;
    width: 2px;
    background: rgba(90,35,98,.2);
}
.rl-zeitleiste__eintrag:last-child .rl-zeitleiste__marker::before { display: none; }
.rl-zeitleiste__dot {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--rl-magenta);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(90,35,98,.2);
    z-index: 1;
}
.rl-zeitleiste__body { padding-bottom: 40px; }
.rl-zeitleiste__eintrag:last-child .rl-zeitleiste__body { padding-bottom: 0; }
.rl-zeitleiste__datum {
    display: inline-block;
    font-family: var(--rl-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--rl-magenta);
    margin-bottom: 8px;
}
.rl-zeitleiste__titel {
    font-family: var(--rl-font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--rl-purple);
    line-height: 1.25;
    margin: 0 0 10px;
}
.rl-zeitleiste__bild {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0 0 14px;
}
.rl-zeitleiste__text { font-family: var(--rl-font-body); font-size: 16px; line-height: 1.6; color: var(--rl-text); }
.rl-zeitleiste__text p { margin: 0 0 12px; }
.rl-zeitleiste__text p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
    .rl-zeitleiste__eintrag { gap: 16px; }
    .rl-zeitleiste__body { padding-bottom: 32px; }
    .rl-zeitleiste__marker::before { bottom: -32px; }
}

/* ============================================================
   Mitgliederbereich ([rl_profil], inc/mitgliederbereich.php).
   ============================================================ */
.rl-profil-gate { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.rl-profil__section { margin-bottom: 56px; max-width: 560px; }
.rl-profil__section h2 {
    font-family: var(--rl-font-heading);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    color: var(--rl-purple);
    margin: 0 0 20px;
}
.rl-profil__section--platzhalter {
    padding: 24px 28px;
    background: color-mix(in srgb, var(--rl-purple) 5%, white);
    border-radius: 14px;
}
.rl-profil__section--platzhalter h2 { font-size: 20px; margin-bottom: 8px; }
.rl-profil__soon { margin: 0; color: var(--rl-muted); font-size: 15px; }

/* ============================================================
   Editierbare Übersichtsseiten (inc/archive-pages.php) — Einleitungstext
   über dem automatischen Karten-Raster in archive.php.
   ============================================================ */
.rl-archive-intro {
    max-width: 860px;
    font-family: var(--rl-font-body);
    font-size: 18px;
    line-height: 1.7;
    color: var(--rl-text);
    margin-bottom: 56px;
}
.rl-archive-intro p { margin: 0 0 20px; }
.rl-archive-intro > *:last-child { margin-bottom: 0; }

/* Such-/Filterleiste für Übersichtsseiten (aktuell Medienberichte,
   inc/cpt-medienbericht.php: rl_render_medienbericht_filter()). */
.rl-archive-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}
.rl-archive-filter__search,
.rl-archive-filter__select {
    font-family: var(--rl-font-body);
    font-size: 15px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(90,35,98,.3);
    background: #fff;
    color: var(--rl-text);
}
.rl-archive-filter__search { flex: 1 1 220px; }

/* Team-Mitglied: Foto im Beitragsinhaltsbereich, unter dem Header, rechts
   oben (single-team_mitglied.php) — .rl-team-top ist ein Clearfix-Wrapper
   (overflow:hidden), damit das rechts fließende Foto nicht in den
   nachfolgenden 50/50-Abschnittsbereich hineinragt. */
.rl-team-top { overflow: hidden; }
.rl-team-photo {
    float: right;
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin: 0 0 24px 32px;
}
@media (max-width: 640px) {
    .rl-team-photo { float: none; width: 100%; height: auto; max-height: 320px; margin: 0 0 24px; }
}

/* ============================================================
   Download-/Materialseite (single-material.php) — Datei-Infobox.
   ============================================================ */
.rl-material-box {
    background: color-mix(in srgb, var(--rl-purple) 6%, white);
    border-radius: 14px;
    padding: 24px 28px;
    margin: 36px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Eine Zeile je Datei — bis zu 20 möglich, siehe inc/cpt-material.php. */
.rl-material-box__file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
.rl-material-box__file + .rl-material-box__file {
    padding-top: 16px;
    border-top: 1px solid rgba(90,35,98,.12);
}
.rl-material-box__info { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rl-material-box__label {
    font-family: var(--rl-font-heading);
    font-weight: 600;
    font-size: 19px;
    color: var(--rl-text);
}
.rl-material-box__format {
    font-family: var(--rl-font-heading);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    color: var(--rl-purple);
}
.rl-material-box__size { font-size: 14px; color: var(--rl-muted); }
.rl-material-box__gate-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rl-material-box__gate label { font-size: 14px; color: var(--rl-muted); }
.rl-material-box__gate input[type="email"] {
    font-family: var(--rl-font-body);
    font-size: 15px;
    padding: 10px 16px;
    border-radius: 45px;
    border: 1px solid rgba(90,35,98,.3);
    min-width: 240px;
}

/* ============================================================
   Karten-Raster (archive.php, search.php) — template-parts/card.php
   ============================================================ */
.rl-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 32px;
}
/* Kategorie-Gruppierung auf Übersichtsseiten (inc/archive-pages.php,
   archive.php) — ein Abschnitt pro ausgewählter Kategorie, gleiche
   Titel-Optik wie .rl-related__title. */
.rl-archive-group + .rl-archive-group { margin-top: 64px; }
.rl-archive-group__title {
    font-family: var(--rl-font-heading);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    color: var(--rl-purple);
    margin: 0 0 32px;
}

/* Editor-Block "Beitragsboxen" (inc/content-box-block.php) — frei im
   Seiten-Editor platzierbar, gleiche Karten-Optik wie überall sonst. */
.rl-content-box { padding: 64px 0; }
.rl-content-box__title {
    font-family: var(--rl-font-heading);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    color: var(--rl-purple);
    margin: 0 0 32px;
}
@media (max-width: 560px) {
    .rl-card-grid { grid-template-columns: 1fr; }
}
.rl-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(90,35,98,.14);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.rl-card:hover {
    border-color: var(--rl-magenta);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(90,35,98,.14);
}
/* Gleicher Stagger-Rhythmus wie bei .rlb-card, eigener Namensraum
   (rl-card statt rlb-card), da hier native Theme-Inhalte und kein
   externes Blog-Plugin gerendert werden. */
.rl-card.rl-fade-in { transition-delay: calc(var(--rl-stagger, 0) * 70ms); }
.rl-card:hover .rl-btn__arrow { transform: translateX(4px); }

.rl-card__media {
    position: relative;
    aspect-ratio: 8 / 5;
    background: var(--rl-gradient);
    overflow: hidden;
}
.rl-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}
.rl-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
}
.rl-card__badge--format {
    font-family: var(--rl-font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--rl-purple);
    color: #fff;
}
.rl-card__body {
    padding: 24px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.rl-card__eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--rl-magenta);
}
.rl-card__title {
    margin: 0;
    font-family: var(--rl-font-heading);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--rl-purple);
}
.rl-card__excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--rl-muted);
    flex: 1;
}
/* Eckdaten-Zeilen (ToDo #398, rl_card_eckdaten_lines() in inc/template-
   tags.php) — kompakt, unauffälliger als der Textauszug. */
.rl-card__eckdaten {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--rl-muted);
}
.rl-card__link {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--rl-purple);
    transition: color .25s ease;
}
.rl-card:hover .rl-card__link { color: var(--rl-magenta); }

/* ============================================================
   Leerer Zustand (Archiv/Suche ohne Treffer)
   ============================================================ */
.rl-empty-state {
    text-align: center;
    padding: 64px 20px;
    color: var(--rl-muted);
    font-size: 17px;
}

/* ============================================================
   Pagination (the_posts_pagination()) — Standard-WordPress-Markup
   (nav.pagination > .nav-links > a/span.page-numbers), hier nur die
   Kindselektoren gestylt statt eigene Wrapper-Klassen zu erzwingen.
   ============================================================ */
.rl-pagination {
    margin-top: 56px;
    display: flex;
    justify-content: center;
}
.rl-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.rl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 50px;
    border: 1px solid rgba(90,35,98,.25);
    font-family: var(--rl-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--rl-purple);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.rl-pagination .page-numbers:hover { border-color: var(--rl-magenta); color: var(--rl-magenta); }
.rl-pagination .page-numbers.current { background: var(--rl-purple); border-color: var(--rl-purple); color: #fff; }
.rl-pagination .page-numbers.dots { border-color: transparent; }

/* ============================================================
   Suchformular (search.php, 404.php) — inc/template-tags.php: rl_search_form()
   ============================================================ */
.rl-search-bar { margin-bottom: 48px; }
.rl-search-form {
    display: flex;
    gap: 12px;
    max-width: 520px;
}
.rl-search-form__input {
    flex: 1;
    min-width: 0; /* ohne das schrumpft ein <input> in engen Flex-Containern (z. B. dem 320px-Panel im Header) nicht unter seine intrinsische Breite — der Suchen-Button wurde dadurch aus dem Panel gedrückt. */
    font-family: var(--rl-font-body);
    font-size: 16px;
    padding: 14px 22px;
    border-radius: 50px;
    border: 1px solid rgba(90,35,98,.3);
    color: var(--rl-text);
}
.rl-search-form__input:focus { outline: none; border-color: var(--rl-magenta); }
.rl-search-form__submit {
    font-family: var(--rl-font-body);
    font-size: 15px;
    font-weight: 500;
    padding: 14px 30px;
    border-radius: 50px;
    border: 1px solid var(--rl-purple);
    background: var(--rl-purple);
    color: #fff;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease;
}
.rl-search-form__submit:hover { background: var(--rl-magenta); border-color: var(--rl-magenta); }
@media (max-width: 480px) {
    .rl-search-form { flex-direction: column; }
}

/* ============================================================
   404-Seite — Schnelllinks unter der Suche
   ============================================================ */
.rl-404-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ============================================================
   Kontaktformular ([rl_kontaktformular], inc/kontaktformular.php)
   ============================================================ */
.rl-kontakt-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 560px;
}
.rl-kontakt-form__row { display: flex; flex-direction: column; gap: 6px; }
.rl-kontakt-form__row label {
    font-size: 14px;
    font-weight: 600;
    color: var(--rl-purple);
    letter-spacing: 0.2px;
}
.rl-kontakt-form__row input,
.rl-kontakt-form__row textarea,
.rl-kontakt-form__row select {
    font-family: var(--rl-font-body);
    font-size: 16px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid rgba(90,35,98,.3);
    color: var(--rl-text);
    resize: vertical;
    background: #fff;
}
.rl-kontakt-form__row input:focus,
.rl-kontakt-form__row textarea:focus,
.rl-kontakt-form__row select:focus { outline: none; border-color: var(--rl-magenta); }
.rl-kontakt-form .rl-btn { align-self: flex-start; }

/* Formular-Baukasten (inc/formular-baukasten.php): Checkbox-/Radio-Felder
   nutzen dieselben .rl-kontakt-form-Klassen wie das Kontaktformular, damit
   JEDES per Baukasten erstellte Formular automatisch dieselbe Optik trägt —
   hier nur die Layout-Ergänzung für Wahlmöglichkeiten, die es beim reinen
   Kontaktformular (nur Text/E-Mail/Textarea) bisher nicht gab. */
.rl-kontakt-form__choice { display: flex; flex-direction: column; gap: 8px; }
.rl-kontakt-form__choice-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px;
    font-weight: 400;
    color: var(--rl-text);
}
.rl-kontakt-form__choice-option input { margin-top: 3px; flex-shrink: 0; }
.rl-kontakt-form__choice-option a { color: var(--rl-magenta); }
/* Zusatztext neben einer Checkbox (z. B. AGB-Satz, ToDo #391) — etwas
   kleiner/gedämpfter als das eigentliche Label, bricht eigenständig um. */
.rl-kontakt-form__choice-desc { display: block; font-size: 13px; color: rgba(23,23,23,.65); margin-top: 2px; }
/* Pflichtfeld-Sternchen neben dem Label (ToDo #391) — Magenta, damit es sich
   klar vom sonst lila Formular-Label abhebt. */
.rl-required { color: var(--rl-magenta); font-weight: 700; }
.rl-kontakt-form__row--checkbox { flex-direction: row; align-items: flex-start; }
.rl-kontakt-form__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.rl-kontakt-form__error {
    margin: 0;
    font-size: 14px;
    color: #b3261e;
}
.rl-kontakt-form__success {
    background: color-mix(in srgb, var(--rl-purple) 6%, white);
    border-radius: 14px;
    padding: 24px 28px;
    font-size: 16px;
    max-width: 560px;
}

/* ============================================================
   Team-Übersicht ([rl_team], inc/cpt-team.php).
   Standard-Stil "kompakt" (Vorbild: reallabor-bildung.de/leipzig/,
   Abschnitt "Team") — kleines Foto + Name, jetzt zusätzlich zur
   ausführlichen Einzelseite verlinkt. Stil "karten" nutzt stattdessen
   dasselbe Kartenraster wie Angebote/Materialien (.rl-card-grid,
   template-parts/card.php).
   ============================================================ */
.rl-team-list {
    display: flex;
    flex-direction: column;
}
.rl-team-list__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(90,35,98,.15);
    text-decoration: none;
    transition: transform .15s ease;
}
.rl-team-list__item:hover { transform: translateY(-2px); }
.rl-team-list__item:first-child { padding-top: 0; }
.rl-team-list__item:last-child { border-bottom: none; }
.rl-team-list__photo {
    width: 96px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}
.rl-team-list__photo--empty { background: var(--rl-gradient); }
.rl-team-list__name {
    font-family: var(--rl-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--rl-purple);
    transition: color .15s ease;
}
.rl-team-list__item:hover .rl-team-list__name { color: var(--rl-magenta); }
.rl-team-list + .rl-btn,
.rl-card-grid + .rl-btn { margin-top: 32px; }
@media (max-width: 480px) {
    .rl-team-list__item { gap: 14px; }
    .rl-team-list__photo { width: 72px; height: 60px; }
}
@media (max-width: 480px) {
    .rl-team-list__item { gap: 14px; }
    .rl-team-list__photo { width: 72px; height: 60px; }
}

/* ============================================================
   Editor-Block "Team/Menschen" (inc/team-block.php, rl/team) — ToDo #392.
   Eigene, breitere Zeilen-Darstellung (Foto 1:1 links, Name + wählbare
   Werte rechts) statt der schmalen .rl-team-list-Reihen oben, dazwischen
   eine dünne 1px-Farbverlauf-Trennlinie (nicht die dicke 3px-Variante der
   Abschnitts-Trennlinien .rl-post__divider — hier bewusst zurückhaltender,
   da die Zeilen selbst schon eng beieinander stehen).
   ============================================================ */
.rl-team-block__title {
    font-family: var(--rl-font-heading);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    color: var(--rl-purple);
    margin: 0 0 32px;
}
.rl-team-block__rows { display: flex; flex-direction: column; }
.rl-team-row {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 0;
}
.rl-team-row + .rl-team-row {
    border-top: 1px solid transparent;
    background:
        linear-gradient(#fff,#fff) padding-box,
        var(--rl-divider-gradient) border-box;
}
.rl-team-row__media {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--rl-gradient);
}
.rl-team-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
}
.rl-team-row__body { display: flex; flex-direction: column; gap: 6px; }
/* Höhere Spezifität nötig (statt nur .rl-team-row__name): die generische
   ".rl-post__content a"-Regel des Themes hat dieselbe Spezifität wie ein
   einzelner Klassenselektor + steht früher im Stylesheet, würde die Lila-
   Namensfarbe hier sonst zu Magenta überschreiben (identischer Bug wie bei
   den RealLabor-Events-Social-Icons, siehe dortiger Kommentar). */
.rl-team-row .rl-team-row__name {
    font-family: var(--rl-font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--rl-purple);
    text-decoration: none;
    transition: color .15s ease;
}
.rl-team-row .rl-team-row__name:hover { color: var(--rl-magenta); }
.rl-team-row__field {
    font-size: 15px;
    color: var(--rl-text);
}
.rl-team-row .rl-team-row__field a { color: var(--rl-magenta); text-decoration: none; }
.rl-team-row .rl-team-row__field a:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .rl-team-row { gap: 18px; padding: 18px 0; }
    .rl-team-row__media { width: 80px; height: 80px; }
    .rl-team-row__name { font-size: 19px; }
}

/* ============================================================
   Newsletter-Plugin-Integration (inc/newsletter.php) — [newsletter_form]
   liefert das Plugin selbst, hier nur an den rl-Formular-Stil angeglichen
   (gleiche Optik wie .rl-kontakt-form/.rl-search-form). Klassennamen
   tnp-* kommen 1:1 aus wp-content/plugins/newsletter/subscription/
   subscription.php — nicht theme-eigen, daher nicht umbenennbar.
   ============================================================ */
.tnp.tnp-subscription { max-width: 480px; }
.tnp.tnp-subscription .tnp-field { margin-bottom: 20px; }
.tnp.tnp-subscription label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--rl-purple);
    letter-spacing: 0.2px;
    margin-bottom: 6px;
}
.tnp.tnp-subscription input[type="text"],
.tnp.tnp-subscription input[type="email"] {
    width: 100%;
    font-family: var(--rl-font-body);
    font-size: 16px;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid rgba(90,35,98,.3);
    color: var(--rl-text);
}
.tnp.tnp-subscription input[type="text"]:focus,
.tnp.tnp-subscription input[type="email"]:focus { outline: none; border-color: var(--rl-magenta); }
.tnp.tnp-subscription .tnp-field-privacy label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--rl-muted);
}
.tnp.tnp-subscription .tnp-field-privacy input[type="checkbox"] { margin-top: 3px; }
.tnp.tnp-subscription .tnp-field-privacy a { color: var(--rl-magenta); }
.tnp.tnp-subscription .tnp-field-button { margin-top: 8px; }
.tnp.tnp-subscription input.tnp-submit {
    font-family: var(--rl-font-body);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.2px;
    border-radius: 50px;
    padding: 18px 48px;
    border: 1px solid var(--rl-purple);
    background: transparent;
    color: var(--rl-purple);
    cursor: pointer;
    transition: color .3s ease, border-color .3s ease;
}
.tnp.tnp-subscription input.tnp-submit:hover { border-color: var(--rl-magenta); color: var(--rl-magenta); }

/* ============================================================
   Newsletter-Leseansicht ([rl_newsletter_archive] mit ?nl_id=…)
   ============================================================ */
.rl-newsletter-read__title {
    margin: 20px 0 8px;
    font-family: var(--rl-font-heading);
    font-weight: 600;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--rl-purple);
}
.rl-newsletter-read__date { font-size: 14px; color: var(--rl-muted); }
.rl-newsletter-read__body {
    margin-top: 32px;
    max-width: 100%;
    overflow-x: auto;
}
.rl-newsletter-empty { color: var(--rl-muted); }

/* ============================================================
   Lightbox (assets/js/lightbox.js) — öffnet Bilder aus dem
   Galerie-Laufband (rl-post__slider) großformatig.
   ============================================================ */
.rl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(10, 4, 12, .92);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
}
.rl-lightbox.is-open { opacity: 1; visibility: visible; }
.rl-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: scale(.96);
    transition: transform .25s ease;
}
.rl-lightbox.is-open .rl-lightbox__img { transform: scale(1); }
.rl-lightbox__close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.rl-lightbox__close:hover { background: rgba(255,255,255,.12); border-color: #fff; }
/* Pfeil-Navigation — nur eingeblendet, wenn die aktuelle Galerie mehr als
   ein Bild hat (assets/js/lightbox.js setzt dafür "is-multi" am Overlay). */
.rl-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
    background: transparent;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, border-color .2s ease;
}
.rl-lightbox.is-multi .rl-lightbox__nav { display: flex; }
.rl-lightbox__nav:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.rl-lightbox__nav--prev { left: 24px; }
.rl-lightbox__nav--next { right: 24px; }
@media (prefers-reduced-motion: reduce) {
    .rl-lightbox, .rl-lightbox__img { transition: none; }
}
@media (max-width: 560px) {
    .rl-lightbox { padding: 16px; }
    .rl-lightbox__close { top: 12px; right: 12px; }
    .rl-lightbox__nav { width: 40px; height: 40px; font-size: 20px; }
    .rl-lightbox__nav--prev { left: 8px; }
    .rl-lightbox__nav--next { right: 8px; }
}