/* ============================================================================
   RISK MANAGEMENT GROUP — Seiten-CSS (Pages_Css)
   Bildet die Handschrift von www.risk-management.group im TeamHUB-Baukasten ab:
   Schrift HermanoAlto Chisel, Schwarz/Orange, Hero mit Hintergrundvideo,
   Netzwerk-Rad, Scroll-Reveal. Alle Inhalte bleiben normale CMS-Blöcke und im
   Editor bearbeitbar — hier steht ausschließlich Optik.
   ============================================================================ */

@font-face {
    font-family: 'HermanoAlto Chisel';
    src: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/hermanoalto.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---------- 0. Dichte ------------------------------------------------------ */
/* Die Handschrift „markant" gibt jeder Sektion 112px Luft oben UND unten — bei 11
   Sektionen sind das allein 2.500px Leerraum. Für diese Seite halbiert. */
html:root {
    --cms-section-pad: clamp(2rem, 3.6vw, 3.5rem);
}

:root {
    --rmg-orange: #ea5b2d;
    --rmg-grau: #f6f6f6;
    --rmg-schwarz: #000;
    --rmg-display: 'HermanoAlto Chisel', 'Arial Narrow', Impact, sans-serif;
    /* Flächen, die als Karte vor dem Sektionsgrund stehen (Kette, Team, Chat).
       Im dunklen Modus weiter unten überschrieben — ein fester heller Wert ergäbe
       dort weiße Kästen mit hellem Text darauf. */
    --rmg-karte: #ffffff;
    --rmg-kartenrand: rgba(0, 0, 0, .08);
    /* Fließtext der Seite. EINE Quelle, damit Bild-Text-Absätze und die Beschreibungen am
       Netzwerk-Rad nicht auseinanderlaufen. Im dunklen Modus weiter unten überschrieben. */
    --rmg-fliess: #444;
}

/* ---------- 1. Typografie: Überschriften in der Hausschrift ---------------- */
/* WICHTIG: cms-blocks.css wird NACH diesem Seiten-CSS geladen. Alles, was mit dem
   Baukasten kollidiert, braucht deshalb höhere Spezifität (`html:root`, `body …`) —
   sonst gewinnt die spätere Regel bei gleichem Gewicht. */
html:root {
    --cms-font-heading: 'HermanoAlto Chisel', 'Arial Narrow', Impact, sans-serif;
}

body .cms-section h1,
body .cms-section h2,
body .cms-section h3,
body .cms-hero h1 {
    font-family: var(--rmg-display);
    letter-spacing: .012em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--rmg-schwarz);
}

/* ⚠️ Zeilenabstand der Hausschrift: HermanoAlto zeichnet die Versalien auf 0.93em Höhe, die
   Umlautpunkte reichen aber bis 1.15em über die Grundlinie (gemessen per Canvas-TextMetrics).
   Bei line-height < 1.15 landen die Punkte einer Folgezeile IN den Versalien der Zeile darüber
   und verschwinden dort — „AUFHÖREN" las sich als „AUFHOREN" (Meldung Frank, 22.09.2026).
   1.22 stellt sie mit etwas Reserve frei (1.15 ist das nackte Minimum, das den Punkt exakt auf
   die Grundlinie der Zeile darüber legt). Grenzfall, der bleibt: ein Q oder J in der Zeile DARÜBER
   hat 0.18em Unterlänge — steht es genau über einem Umlaut, berühren sie sich. */
body .cms-hero h1 {
    font-size: clamp(2.4rem, 6.6vw, 5.6rem);
    line-height: 1.22;
    margin: .1em 0 .4em;
}

body .cms-section h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.22; }
body .cms-section h3 { font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.22; }

/* Kicker: die schmale orange Zeile über der Überschrift (Original: „Wissen schafft
   Sicherheit"). Der Baukasten setzt sie in Monospace — RMG schreibt sie normal. */
/* ⚠️ Das Marken-Orange #ea5b2d erreicht als 16px-Text auf hellem Grund nur Lc 52–56 (APCA),
   nötig sind Lc 75. Der Kicker läuft deshalb in einer abgedunkelten Variante und etwas
   kräftiger; der Strich davor bleibt in der vollen Markenfarbe — er ist Dekoration, kein Text. */
body .cms-section .cms-eyebrow {
    color: var(--rmg-kicker, #b23c12);
    font-family: var(--cms-font, inherit);
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 600;
    font-size: 1.05rem;
}
body .cms-section .cms-eyebrow::before { background: var(--rmg-orange); }

/* ⚠️ Der Sanitizer (Ganss.Xss, Cms/Security/CmsHtmlSanitizer.cs) entfernt `class` aus
   richtext-HTML. Eigene Klassen im Autoren-HTML sind deshalb WIRKUNGSLOS — alles, was
   in einem richtext gestaltet werden soll, muss über Struktur- oder Attribut-Selektoren
   getroffen werden. `name` überlebt (deshalb funktionieren die Sprungmarken). */

/* Sprungmarken-Absätze tragen keinen Inhalt — sie dürfen keinen Raum kosten. */
body .cms-richtext p:has(> a[name]:only-child) { margin: 0; height: 0; overflow: hidden; }
.cms-section { scroll-margin-top: 86px; }

/* ---------- 2. Hero: Video im Hintergrund, Text darüber -------------------- */
/* Video- und Hero-Block liegen als Geschwister in derselben Section; das Video
   wird hier hinter den Hero gelegt. Beide bleiben im Editor eigene Blöcke. */
.cms-section.cms-width-full:has(> .cms-video) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 0;
    min-height: min(78vh, 700px);
    display: grid;
    align-items: center;
    background: var(--rmg-grau);
}

.cms-section.cms-width-full > .cms-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    /* Der Baukasten gibt Blöcken in einer randlosen Sektion 20px Seitenpolster, damit
       Inhalte nicht am Fensterrand kleben. Beim Hintergrundvideo hinterlässt das links
       und rechts einen hellen Streifen — hier muss es randlos sein. */
    padding: 0;
    pointer-events: none;
}

.cms-section.cms-width-full > .cms-video .cms-video-el {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

/* Zwei Verläufe: von unten ins Weiß der Folgesektion, von links hinter den Text —
   das Video ist hellgrau, ohne die zweite Schicht verliert der Fließtext den Kontrast. */
.cms-section.cms-width-full:has(> .cms-video)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .90) 46%, rgba(255, 255, 255, .72) 64%, rgba(255, 255, 255, .18) 82%, transparent 100%),
        linear-gradient(to top, #fff 0%, rgba(255, 255, 255, .55) 16%, transparent 44%);
}

.cms-section.cms-width-full > .cms-hero {
    position: relative;
    z-index: 2;
    background: transparent;
    box-shadow: none;
    /* Exakt die Fluchtlinie der Sektionen: die tragen selbst kein Padding, ihr Inhalt ist
       1200px breit und zentriert. Eine eigene max-width plus Padding setzte die Headline
       daneben — auf einer randlosen Hero-Sektion sieht man diesen Versatz sofort. */
    width: min(1200px, 100% - 2.5rem);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

body .cms-hero p { color: #1a1a1a; max-width: 44ch; font-size: clamp(1rem, 1.3vw, 1.2rem); }

/* Buttons: eckig und flächig wie im Original.
   Die Termin-Knöpfe im Fließtext werden über ihr Ziel erkannt (Buchungslink /b/… bzw.
   der Sprung zur Termin-Sektion) — eine Klasse dafür überlebt den Sanitizer nicht. */
.cms-section .btn-primary,
body .cms-richtext a[href*="/b/"],
body .cms-richtext a[href="#termin"] {
    background: var(--rmg-orange);
    border-color: var(--rmg-orange);
    color: #fff;
    border-radius: 0;
    padding: .95rem 2.4rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .2s ease, transform .2s ease;
}
.cms-section .btn-primary:hover,
body .cms-richtext a[href*="/b/"]:hover,
body .cms-richtext a[href="#termin"]:hover {
    background: #c9481f;
    border-color: #c9481f;
    color: #fff;
    transform: translateY(-2px);
}
.cms-section .cms-btn-secondary {
    border-radius: 0;
    border: 2px solid var(--rmg-schwarz);
    color: var(--rmg-schwarz);
    padding: .85rem 2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cms-section .cms-btn-secondary:hover { background: var(--rmg-schwarz); color: #fff; }

.cms-hero-facts li { color: #333; }

/* Auftritt: die Zeilen des Hero bauen sich beim Laden nacheinander auf, die Headline
   wischt in Leserichtung auf. Reines CSS, keine Bibliothek — das Original brauchte dafür
   GSAP. Wer Bewegung abgestellt hat, sieht die fertige Seite sofort. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes rmg-hero-in {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: none; }
    }
    @keyframes rmg-hero-wisch {
        from { opacity: 0; clip-path: inset(0 100% 0 0); }
        to   { opacity: 1; clip-path: inset(0 0 0 0); }
    }
    .cms-section.cms-width-full > .cms-hero > * {
        animation: rmg-hero-in .7s cubic-bezier(.16, .84, .44, 1) both;
    }
    .cms-section.cms-width-full > .cms-hero > .cms-eyebrow { animation-delay: .08s; }
    .cms-section.cms-width-full > .cms-hero > h1 {
        animation: rmg-hero-wisch .95s cubic-bezier(.22, .61, .36, 1) .18s both;
    }
    .cms-section.cms-width-full > .cms-hero > p { animation-delay: .5s; }
    .cms-section.cms-width-full > .cms-hero > .cms-hero-actions { animation-delay: .64s; }
    .cms-section.cms-width-full > .cms-hero > .cms-hero-facts { animation: none; }
    .cms-section.cms-width-full > .cms-hero .btn { animation: none; }
    /* Die drei Fakten laufen zuletzt einzeln ein — sie sind der Beweis unter dem Versprechen. */
    .cms-section.cms-width-full > .cms-hero > .cms-hero-facts > li {
        animation: rmg-hero-in .6s cubic-bezier(.16, .84, .44, 1) both;
    }
    .cms-section.cms-width-full > .cms-hero > .cms-hero-facts > li:nth-child(1) { animation-delay: .86s; }
    .cms-section.cms-width-full > .cms-hero > .cms-hero-facts > li:nth-child(2) { animation-delay: .96s; }
    .cms-section.cms-width-full > .cms-hero > .cms-hero-facts > li:nth-child(3) { animation-delay: 1.06s; }
}

/* ---------- 3. Problem / Folge / Lösung ------------------------------------ */
/* Im Original stehen die drei Blöcke frei auf Weiß (keine Karten), hinter dem
   ersten liegt ein großer grauer Kreis. Struktur: .cms-feature-grid > .row >
   .col.cms-feature-item (Spalte und Kachel sind DASSELBE Element). */
body .cms-feature-grid > .row > .cms-feature-item {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 1.25rem 0 0;
}
body .cms-feature-grid > .row > .cms-feature-item:hover {
    transform: none;
    box-shadow: none;
}
body .cms-feature-grid > .row > .cms-feature-item > i.bi {
    color: var(--rmg-orange);
    font-size: 1.6rem;
}

body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) { position: relative; }
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4)))::before {
    content: "";
    position: absolute;
    left: -4%;
    top: 26%;
    width: min(24rem, 40vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--rmg-grau);
    z-index: 0;
    pointer-events: none;
}
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > * { position: relative; z-index: 1; }

/* Problem → Folge → Lösung ist eine KETTE, keine Aufzählung: drei gleich aussehende
   Spalten nebeneinander verschenken die Dramaturgie. Deshalb durchnummeriert, mit
   Pfeilen dazwischen, und die Lösung als einzige in der Leitfarbe — sie ist die Antwort,
   nicht der dritte Punkt einer Liste. */
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row {
    counter-reset: rmg-schritt;
    align-items: stretch;
}
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item {
    counter-increment: rmg-schritt;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--rmg-karte);
    border: 1px solid var(--rmg-kartenrand);
    border-radius: 20px;
    padding: 1.6rem 1.5rem 1.7rem;
}
/* Die Ziffer steht in der Hausschrift über dem Titel — sie gibt der Kette ihre Richtung. */
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item::before {
    content: counter(rmg-schritt, decimal-leading-zero);
    display: block;
    font-family: var(--rmg-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--rmg-orange);
    margin-bottom: .7rem;
    letter-spacing: .02em;
}
/* Pfeil in die Lücke zwischen zwei Kacheln. */
@media (min-width: 992px) {
    body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -1.55rem;
        top: 50%;
        width: 15px;
        height: 15px;
        border-top: 2px solid var(--rmg-orange);
        border-right: 2px solid var(--rmg-orange);
        rotate: 45deg;
        translate: 0 -50%;
        opacity: .55;
    }
}
/* Das Bootstrap-Icon tritt zurück: die Ziffer führt jetzt. */
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item > i.bi {
    position: absolute;
    top: 1.5rem;
    right: 1.4rem;
    font-size: 1.35rem;
    opacity: .38;
}
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item h3 { margin-bottom: .55rem; }
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item p { margin-bottom: 0; }

/* Die Lösung: als einzige flächig in der Leitfarbe. */
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item:last-child {
    background: var(--rmg-orange);
    border-color: var(--rmg-orange);
    box-shadow: 0 18px 40px rgba(234, 91, 45, .22);
}
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item:last-child::before,
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item:last-child h3,
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item:last-child p,
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item:last-child > i.bi { color: #fff; }
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item:last-child::before { opacity: .55; }
body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4))) > .row > .cms-feature-item:last-child > i.bi { opacity: .6; }

/* ---------- 4. Netzwerk-Rad ------------------------------------------------ */
/* Welches feature-grid das Rad ist, entscheidet sein INHALT, nicht der Sektionsgrund:
   das Netzwerk hat fünf Einträge, jedes andere Raster höchstens drei. Vorher hing das an
   `.cms-bg-muted` — beim Umsortieren der Seite wechselt der Grund und das Rad wäre
   zurück auf ein gewöhnliches Raster gefallen.

   Das Rad ist eine VEKTORGRAFIK mit SMIL-Animation (assets/rm-network.svg, erzeugt von
   gen-rmg-netz.py — Muster: die Netzgrafik der TeamHUB-Startseite). Vorher lag hier ein
   auf 62 % skaliertes animiertes WebP: sichtbar pixelig, 219 KB, und die Knotenpunkte des
   Bildes hatten mit den Textblöcken nichts zu tun — sie saßen nur ungefähr richtig.
   Jetzt kommen Bahnradius und Knotenwinkel aus DERSELBEN Quelle wie die CSS-Positionen. */
@media (min-width: 1150px) {
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row {
        position: relative;
        width: min(620px, 62vw);
        aspect-ratio: 1;
        margin: 3rem auto 1rem;
        display: block;
        border-radius: 50%;
        background: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/rm-network.svg') center / 100% no-repeat;
    }

    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item {
        position: absolute;
        width: 272px;
        max-width: none;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        /* Der Baukasten lässt jede Kachel beim Einscrollen um 16 px aufsteigen
           (`cms-rocks-rise`). Auf dem Rad wandert der Punkt dadurch sichtbar neben seine
           Bahn — das Rad blendet als Ganzes ein (Regel auf .cms-feature-grid), die
           einzelne Kachel darf sich nicht zusätzlich bewegen. */
        animation: none;
    }

    /* Der orange Punkt sitzt an der INNEREN Kante des Textblocks, und diese Kante liegt
       auf dem Knoten. So stimmt die Lage unabhängig von der Texthöhe — das war beim
       Rasterbild die Ursache der verrutschten Punkte. Lage, Seite und Polster erzeugt
       gen-rmg-netz.py aus denselben Winkeln wie die Grafik: */

/* === NETZ-POSITIONEN (erzeugt von gen-rmg-netz.py — nicht von Hand ändern) === */
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(1) { left: 39.48%; top: 17.63%; translate: -100% -50%; text-align: right; padding-right: 58px; }
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(2) { left: 15.97%; top: 50.00%; translate: -100% -50%; text-align: right; padding-right: 58px; }
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(3) { left: 77.53%; top: 30.00%; translate: 0% -50%; text-align: left; padding-left: 58px; }
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(4) { left: 39.48%; top: 82.37%; translate: -100% -50%; text-align: right; padding-right: 58px; }
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(5) { left: 77.53%; top: 70.00%; translate: 0% -50%; text-align: left; padding-left: 58px; }
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(1) > i.bi,
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(2) > i.bi,
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(4) > i.bi { right: 0; translate: 50% -50%; }
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(3) > i.bi,
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:nth-child(5) > i.bi { left: 0; translate: -50% -50%; }

    /* Statt des Bootstrap-Icons sitzt ein oranger Punkt auf dem Radrand. */
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item > i.bi {
        position: absolute;
        top: 50%;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--rmg-orange);
        box-shadow: 0 6px 18px rgba(234, 91, 45, .35);
        color: transparent;
        font-size: 0;
        line-height: 0;
        transition: scale .25s ease, box-shadow .25s ease;
    }
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item > i.bi::before { content: none; }

    /* Beim Überfahren wächst der Knoten — die einzige Rückmeldung, die das Rad braucht.
       `scale` als eigene Eigenschaft, damit es sich nicht mit `translate` beißt. */
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item:hover > i.bi {
        scale: 1.25;
        box-shadow: 0 8px 26px rgba(234, 91, 45, .55);
    }

    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item h3 { font-size: 1.02rem; margin-bottom: .4rem; line-height: 1.2; }
    body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item p {
        font-size: .95rem;
        line-height: 1.45;
        margin-bottom: 0;
    }
}

/* Unter 1150px bleibt es ein gewöhnliches Raster — das Rad ist nur die
   Großbild-Fassung. (Das Original verlangt hier „Smartphone zurückdrehen".) */
body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item > i.bi { color: var(--rmg-orange); }

/* Die Zeile unter jedem Namen lief in der gedämpften Baukasten-Farbe (#7d716a) bei 14 px:
   gemessen APCA Lc 72 — für Fließtext dieser Größe zu wenig (nötig sind ~90). Sie steht dazu
   frei auf dem Sektionsgrund, ohne Karte, die das Auge führt. Jetzt in der Fließtextfarbe der
   Seite. Die Regel steht außerhalb der Rad-Medienabfrage, damit sie auch unter 1150 px gilt. */
body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row > .cms-feature-item p {
    color: var(--rmg-fliess);
}

/* ---------- 4b. „Wer dahinter steht" --------------------------------------- */
/* Die Liste steht unter dem Netzwerk-Rad und nennt dieselben fünf Gesellschaften —
   optisch hatte sie damit aber nichts zu tun: eine flache Registratur aus dünnen
   Linien, deren Titel in der Display-Schrift liefen. Die ist eine schmal laufende
   Versalienschrift für Schlagzeilen; bei 15 px und gemischter Schreibung („DS Insurance
   & Investment GmbH") wird sie eng und unruhig.

   Jetzt: Grundschrift für die Titel, und vor jedem steht derselbe orange Punkt, der
   am Rad den Knoten markiert — das ist die Verbindung zwischen beiden. */
body .cms-accordion .accordion-item {
    background: var(--rmg-karte);
    border: 1px solid var(--rmg-kartenrand);
    border-radius: 14px;
    margin-bottom: .6rem;
    overflow: hidden;
}
body .cms-accordion .accordion-button {
    font-family: var(--cms-font, inherit);
    text-transform: none;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--rmg-schwarz);
    padding: 1.05rem 1.25rem;
    gap: .85rem;
    background: transparent;
}
/* Das Logo der Gesellschaft steht im Kopf der Karte — also auch dann, wenn die Karte
   zugeklappt ist. Zugeklappt ist der Normalzustand der Liste; ein Logo, das man erst
   nach dem Klicken sieht, hilft niemandem beim Überfliegen.
   Feste Kastenbreite, Logo linksbündig darin: so beginnen alle Namen auf derselben
   Linie, obwohl die Logos sehr verschiedene Seitenverhältnisse haben (1:1 bis 5:1). */
body .cms-accordion .accordion-button::before {
    content: "";
    flex: none;
    width: 112px;
    height: 36px;
    background: no-repeat left center / contain;
    transition: opacity .2s ease;
    opacity: .9;
}
body .cms-accordion .accordion-button:not(.collapsed)::before { opacity: 1; }
body .cms-accordion .accordion-item:nth-child(1) .accordion-button::before { background-image: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/logo-rmg.png'); }
body .cms-accordion .accordion-item:nth-child(2) .accordion-button::before { background-image: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/logo-rmg.png'); }
body .cms-accordion .accordion-item:nth-child(3) .accordion-button::before { background-image: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/logo-jdc.png'); }
body .cms-accordion .accordion-item:nth-child(4) .accordion-button::before { background-image: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/logo-sec.png'); }
body .cms-accordion .accordion-item:nth-child(5) .accordion-button::before { background-image: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/logo-wifo.png'); }
body .cms-accordion .accordion-button:not(.collapsed) {
    color: var(--rmg-schwarz);
    background: transparent;
    box-shadow: none;
}
body .cms-accordion .accordion-item:has(> h3 > .accordion-button:not(.collapsed)),
body .cms-accordion .accordion-item:has(> h2 > .accordion-button:not(.collapsed)) {
    border-color: var(--rmg-orange);
}
body .cms-accordion .accordion-body { padding: 0 1.25rem 1.2rem 9.4rem; }
/* Handy: Logo ÜBER dem Namen statt daneben. Nebeneinander blieben für den Namen ~170 px
   („RISK MANAGEMENT GROUP DS Insurance & Investment GmbH" über vier Zeilen), und der Text
   darunter hing an der 9,4-rem-Einrückung. Grid statt flex-wrap: bei flex-wrap rutschte
   der Pfeil in eine eigene Zeile, sobald der Name umbricht. */
@media (max-width: 700px) {
    body .cms-accordion .accordion-button {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .6rem .85rem;
        padding: 1rem 1.1rem;
    }
    body .cms-accordion .accordion-button::before { grid-column: 1 / -1; height: 32px; }
    body .cms-accordion .accordion-button::after { margin-left: 0; }
    body .cms-accordion .accordion-body { padding: 0 1.1rem 1.1rem; }
}

body .cms-accordion .accordion-body p:last-child { margin-bottom: 0; }
/* Hier stehen die längsten Absätze der Seite (Vermittlerangaben, WpIG-Text). Sie liefen in der
   gedämpften Baukasten-Farbe: APCA Lc 72 — zu wenig für Fließtext. Dieselbe Quelle wie überall. */
body .cms-accordion .accordion-body p { color: var(--rmg-fliess); }
/* Die Zwischenüberschrift darf nicht mit der Sektionsüberschrift konkurrieren —
   in einer Sektion gehört EINE große Zeile. */
/* Der Renderer setzt die Überschrift als GESCHWISTER vor den Block, nicht als Kind. */
body .cms-section > h2:has(+ .cms-accordion) {
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    margin-bottom: .9rem;
    opacity: .72;
}
/* Bootstrap legt für den aufgeklappten Zustand ein BLAUES Chevron-SVG hinein
   (--bs-accordion-btn-active-icon). Auf einer orangen Marke ist das ein Fremdkörper. */
body .cms-accordion .accordion-button::after,
body .cms-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea5b2d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ---------- 5. Bild & Text ------------------------------------------------- */
/* Die 3D-Renderings sind freigestellt (Alpha) — ein Bildrahmen mit Fläche würde
   sie wie Screenshots aussehen lassen. */
body .cms-media-text-media,
body .cms-media-text-media figure,
body .cms-media-text-media img {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
/* Der Baukasten hebt Bilder beim Überfahren an und legt einen Schlagschatten
   darunter. Bei einem Screenshot sieht das nach Karte aus, bei einer
   freigestellten Grafik nach einem rechteckigen Schatten im Nichts. */
body .cms-media-text-media:hover img {
    transform: none;
    box-shadow: none;
}
body .cms-media-text-bullets i.bi { color: var(--rmg-orange); }
/* Die Renderings sind quadratisch: ungebremst zieht jedes eine Zeile über die volle
   Bildschirmhöhe auf. Gedeckelt bleibt die Seite lesbar statt endlos. */
body .cms-media-text-media img {
    max-height: 320px;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}
body .cms-media-text { gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
/* Einleitungsabsatz einer Sektion — erkennbar an der Position, nicht an einer Klasse. */
body .cms-width-wide .cms-richtext > p:first-of-type {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    max-width: 70ch;
    color: #333;
}

/* ---------- 5b. Dreier-Reihen: Haltung und Kunden -------------------------- */
/* „ungebunden / akribisch / persönlich" und „Unternehmen / Freie Berufe / Menschen" sind je
   drei GLEICHRANGIGE Aussagen. Als drei volle Bild-Text-Zeilen untereinander kosteten sie
   zusammen rund 2.000 px und standen zu drei Vierteln leer — das gedeckelte Bild füllte die
   Zeilenhöhe nicht aus. Als Spaltenreihe (columns-Block) sind sie ein Bild statt drei. */
body .cms-col > .cms-media-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Im DOM steht der Text zuerst (Lesereihenfolge für Screenreader) — das Bild kommt
   optisch nach oben, ohne die Reihenfolge im Markup zu drehen. */
body .cms-col .cms-media-text-media { order: -1; margin: 0 0 1.1rem; }
body .cms-col .cms-media-text-media img {
    /* Breite explizit: in einer Spalte mit align-items:center schrumpft ein Bild auf seine
       Inhaltsbreite — ein SVG hat dort ohne width/height-Attribut die Breite 0. */
    width: 178px;
    height: auto;
    max-height: none;
}
body .cms-col .cms-media-text-copy { text-align: center; }
body .cms-col .cms-media-text-copy h2,
body .cms-col .cms-media-text-copy h3 { font-size: clamp(1.15rem, 1.6vw, 1.5rem); margin-bottom: .5rem; }
body .cms-col .cms-media-text-copy p { font-size: .95rem; color: var(--rmg-fliess); margin-bottom: 0; }
body .cms-columns { gap: clamp(1.25rem, 3vw, 2.75rem) !important; }

/* Kicker über einer ganzen Reihe. Er kann nicht aus dem eyebrow-Feld eines Blocks kommen —
   der stünde in der ersten Spalte. Deshalb ein eigener richtext-Kopf, erkannt an seiner
   Stellung (erster Absatz, direkt gefolgt von h2); eine Klasse überlebt den Sanitizer nicht. */
body .cms-width-wide .cms-richtext > p:first-child:has(+ h2) {
    color: var(--rmg-kicker, #b23c12);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .01em;
    margin: 0 0 .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
body .cms-width-wide .cms-richtext > p:first-child:has(+ h2)::before {
    content: "";
    width: 2rem;
    height: 2px;
    background: var(--rmg-orange);
    flex: none;
}
body .cms-width-wide .cms-richtext > p:first-child:has(+ h2) + h2 { margin-top: 0; }

/* ---------- 5c. Kennzahlen-Band -------------------------------------------- */
/* Die vier Zahlen waren vorher eine 12-px-Monospace-Zeile unter dem Hero — das stärkste
   Argument der Seite in der kleinsten Schrift. */
body .cms-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2.5vw, 2.5rem);
}
/* Die Handschrift „markant" stellt Kennzahlen linksbündig an eine eigene Randlinie.
   Bei vier kurzen Werten in der schmal laufenden Hausschrift wirkt das zerfasert —
   die Ziffer sitzt wegen ihrer Vorbreite sichtbar neben ihrer Beschriftung. */
body .cms-stat {
    padding: .5rem 0;
    position: relative;
    text-align: center;
    border-left: 0;
    max-width: none;
}
/* Senkrechte Haarlinien zwischen den Zahlen statt Kästen — ruhiger als vier Karten. */
body .cms-stat + .cms-stat::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(.5rem, 1.25vw, 1.25rem));
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: currentColor;
    opacity: .14;
}
body .cms-stat-value {
    font-family: var(--rmg-display);
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    line-height: .9;
    color: var(--rmg-orange);
    letter-spacing: .01em;
}
body .cms-stat-label {
    font-size: .92rem;
    color: #555;
    margin-top: .6rem;
    line-height: 1.35;
    max-width: 22ch;
    margin-inline: auto;
}
@media (max-width: 760px) {
    body .cms-stats-row { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
    body .cms-stat:nth-child(odd) + .cms-stat::before { display: none; }
}


/* ---------- 5d. Eigene Vektormotive --------------------------------------- */
/* Die drei Kundengruppen und das Risiko-Radar sind eigene SVGs (gen-rmg-kunden.py,
   gen-rmg-radar.py). Das Radar trägt Beschriftungen und braucht mehr Höhe als die
   gedeckelten 320 px, sonst sind die Achsennamen nicht mehr lesbar. */
body .cms-media-text-media img[src$="luecke.svg"],
body .cms-media-text-media img[src$="luecke-dark.svg"] {
    max-height: 380px;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 640 / 420;
    height: auto;
}
body .cms-media-text-media img[src$="ordnung.svg"],
body .cms-media-text-media img[src$="ordnung-dark.svg"] {
    max-height: 400px;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 560 / 440;
    height: auto;
}
body .cms-media-text-media img[src$="risiko-radar.svg"],
body .cms-media-text-media img[src$="risiko-radar-dark.svg"] {
    max-height: 400px;
    width: 100%;
    max-width: 520px;
    /* Platz reservieren: die Bilder laden erst beim Heranscrollen (loading="lazy"), und
       das ratio-Feld „auto" gibt der Figur keine Höhe — ohne aspect-ratio springt das
       Layout in dem Moment, in dem das Bild ankommt. */
    aspect-ratio: 780 / 600;
    height: auto;
}
body .cms-col .cms-media-text-media img { aspect-ratio: 1; }

/* ---------- 5e. Bild & Text: Fließtext ------------------------------------ */
/* Der Absatz liegt nicht direkt in `.cms-media-text-copy`, sondern in `.cms-media-text-body` —
   die alte `> p`-Regel griff deshalb nur auf den Kicker. Die längsten Absätze der Seite standen
   damit in der gedämpften Baukasten-Farbe (#7d716a, APCA Lc 72 bei 16 px). */
body .cms-media-text-copy > p,
body .cms-media-text-body p { color: var(--rmg-fliess); }

/* ---------- 6. Team -------------------------------------------------------- */
/* 19 Köpfe sind die beste Karte dieser Seite. Als freistehende Spalten franste das Raster
   aus: unterschiedlich lange Texte ergaben unterschiedlich hohe Spalten, und in der letzten
   Zeile stand ein einzelner Eintrag. Jetzt echte Karten gleicher Höhe — fünf je Zeile, damit
   19 Einträge auf drei volle Zeilen plus vier kommen statt auf drei plus einen. */
body .cms-team-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}
body .cms-team-member {
    text-align: center;
    background: var(--rmg-karte);
    border: 1px solid var(--rmg-kartenrand);
    border-radius: 20px;
    box-shadow: none;
    padding: 1.4rem 1rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body .cms-team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .10);
    border-color: var(--rmg-orange);
}
body .cms-team-member img {
    width: 100%;
    max-width: 124px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 22px;
    margin-inline: auto;
    transition: transform .3s ease, filter .3s ease;
}
/* Die Porträts sind als Graustufen gespeichert — Farbe lässt sich nicht zurückholen.
   Beim Überfahren wird deshalb der Ausschnitt näher und das Bild einen Hauch kräftiger. */
body .cms-team-member:hover img {
    transform: scale(1.05);
    filter: contrast(1.08) brightness(1.03);
}
body .cms-team-member h3 { font-size: .98rem; margin: 1rem 0 .15rem; }
body .cms-team-member .cms-team-role {
    /* Das volle Marken-Orange erreicht bei dieser Schriftgröße nur Lc ~55 (APCA), nötig
       sind rund Lc 85 — deshalb eine eigene, dunklere Stufe der Leitfarbe. */
    color: var(--rmg-rolle, #8f2f0d);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.3;
}
body .cms-team-member p {
    font-size: .8rem;
    color: #555;
    line-height: 1.45;
    margin-top: .55rem;
    margin-bottom: 0;
}

/* Telefon und E-Mail stehen als eigene, anwählbare Zeilen unter der Beschreibung.
   Vorher liefen sie im Fließtext mit: nicht anwählbar, und lange Adressen brachen
   mitten im Wort („f.schaible@risk-" / „management.group"). */
body .cms-team-kontakt {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    /* An den Kartenfuß gehängt, nicht an den Text: wer keine Kurzbeschreibung hat
       (z.B. Dr. Sauerbeck), bekam die Kontaktzeile sonst 60 px höher als die Nachbarn
       — in einer Reihe gleich hoher Karten sieht man dieses Auf und Ab sofort. */
    margin-top: auto;
    padding-top: .7rem;
    border-top: 1px solid var(--rmg-kartenrand);
}
body .cms-team-kontakt a {
    font-size: .76rem;
    line-height: 1.35;
    color: var(--rmg-rolle, #8f2f0d);
    text-decoration: none;
    /* Sicherheitsnetz für sehr lange Adressen — bricht dann an beliebiger Stelle
       statt eine Zeile zu sprengen. */
    overflow-wrap: anywhere;
}
body .cms-team-kontakt a:hover { text-decoration: underline; }
body .cms-team-kontakt .cms-team-phone { font-weight: 600; letter-spacing: .01em; }


body .cms-richtext p:has(> a[href*="/b/"]),
body .cms-richtext p:has(> a[href="#termin"]) {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}
body .cms-richtext a[href*="/b/"],
body .cms-richtext a[href="#termin"] {
    display: inline-block;
    text-decoration: none;
    font-size: .9rem;
}
/* Zwei gleich laute orange Blöcke nebeneinander sind keine Wahl, sondern ein Doppel.
   Der zweite Buchungslink tritt deshalb als Umriss auf. */
body .cms-richtext a[href*="/b/"] + a[href*="/b/"] {
    background: transparent;
    color: var(--rmg-schwarz);
    border: 2px solid var(--rmg-schwarz);
}
body .cms-richtext a[href*="/b/"] + a[href*="/b/"]:hover {
    background: var(--rmg-schwarz);
    border-color: var(--rmg-schwarz);
    color: var(--cms-bg-page, #fff);
}

/* ---------- 6b. Direktkontakt-Karten ------------------------------------- */
/* Zwei Personen = zwei Blöcke (sonst gäbe es einen gemeinsamen Gesprächsfaden).
   Nebeneinander stellen sie sich hier, ohne dass der Renderer einen Container braucht.

   Die Karten müssen GLEICH HOCH sein, egal wer gerade am Platz ist: „online" zeigt einen
   Knopf, „offline" zwei plus einen Hinweissatz. Nebeneinandergestellte Blöcke wachsen
   unabhängig — nur Rasterzellen einer Zeile gleichen sich an.

   Warum das Raster Randspalten hat: der Baukasten begrenzt JEDES Sektionskind einzeln auf
   1200 px und zentriert es. Ein Raster über die Sektion würde die Spalten über die volle
   Fensterbreite ziehen; eine max-width auf der Sektion selbst wäre falsch, weil sie ihre
   Hintergrundfläche randlos behalten muss. Also tragen zwei flexible Randspalten die
   Fluchtlinie, und die Kinder geben ihre eigene Zentrierung ab. */
@media (min-width: 900px) {
    body .cms-section:has(> .cms-webchat + .cms-webchat) {
        display: grid;
        grid-template-columns:
            minmax(1.25rem, 1fr)
            repeat(2, minmax(0, calc((var(--cms-max-wide, 1200px) - 1.2rem) / 2)))
            minmax(1.25rem, 1fr);
        column-gap: 1.2rem;
        align-items: stretch;
    }
    body .cms-section:has(> .cms-webchat + .cms-webchat) > * {
        grid-column: 2 / 4;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }
    body .cms-section:has(> .cms-webchat + .cms-webchat) > .cms-webchat:nth-last-child(2) { grid-column: 2; }
    body .cms-section:has(> .cms-webchat + .cms-webchat) > .cms-webchat:last-child { grid-column: 3; }
    body .cms-section:has(> .cms-webchat + .cms-webchat) > .cms-webchat {
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }
    /* Die Karte füllt die Zelle, und die Knöpfe sitzen unten bündig — sonst stünden sie
       in der einen Karte auf halber Höhe und in der anderen am Fuß. */
    /* Zwischen Block und Karte sitzt der Wrapper, den die Hydration einzieht
       (.cms-block-live) — ohne ihn durchzureichen bleibt die Karte auf ihrer Inhaltshöhe
       stehen und die kürzere der beiden hört mitten in der Zelle auf. */
    body .cms-section:has(> .cms-webchat + .cms-webchat) > .cms-webchat > .cms-block-live {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    body .cms-section:has(> .cms-webchat + .cms-webchat) .cms-webchat-card {
        flex: 1 1 auto;
        align-items: stretch;   /* sonst behält die Textspalte ihre Inhaltshöhe */
    }
    body .cms-section:has(> .cms-webchat + .cms-webchat) .cms-webchat-body {
        display: flex;
        flex-direction: column;
    }
    body .cms-section:has(> .cms-webchat + .cms-webchat) .cms-webchat-actions { margin-top: auto; }
}

/* ---------- 7. Kontakt-Sektion: Schwarz statt TeamHUB-Aurora --------------- */
body .cms-section.cms-bg-inverse {
    background-color: var(--rmg-schwarz);
    background-image: none;
}
body .cms-section.cms-bg-inverse::before { display: none; }
body .cms-section.cms-bg-inverse h2,
body .cms-section.cms-bg-inverse h3 { color: #fff; }
body .cms-section.cms-bg-inverse p { color: rgba(255, 255, 255, .82); }

/* ---------- 8. Scroll-Reveal (wie im Original, aber ohne JavaScript) ------- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes rmg-auf {
            from { opacity: 0; transform: translateY(42px); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes rmg-links {
            from { opacity: 0; transform: translateX(-60px); }
            to   { opacity: 1; transform: none; }
        }
        @keyframes rmg-rechts {
            from { opacity: 0; transform: translateX(60px); }
            to   { opacity: 1; transform: none; }
        }
        /* Der Bereich wird in PIXELN angegeben, nicht in Prozent von „cover":
           ein Block, der höher ist als der Bildschirm (die Rechtstexte sind
           5.000 px+), bräuchte bei Prozentangaben tausende Pixel Scrollweg und
           bliebe deshalb halb durchsichtig stehen. */
        /* `narrow` ist die Breite der Rechtsseiten — ein Fließtext über mehrere
           Bildschirmhöhen darf gar nicht erst eingeblendet werden, sonst steht er
           beim Aufschlagen halb durchsichtig da. */
        /* ⚠️ NUR EINE EBENE JE INHALT animieren. Der Baukasten blendet viele Bausteine
           schon selbst ein (`cms-rocks-rise` auf Kachel, Akkordeon-Eintrag, Team-Karte,
           Knopf). Liegt darüber noch ein Reveal auf dem Container, multiplizieren sich
           die Deckkräfte — der Text steht viel länger blass — und er wird auf ZWEI
           Composite-Ebenen gerendert, was das Subpixel-Antialiasing abschaltet: er sieht
           unscharf aus. Deshalb hier nur Container, die innen nichts eigenes animieren. */
        .cms-section:not(.cms-width-full):not(.cms-width-narrow) > .cms-cta,
        .cms-section:not(.cms-width-full):not(.cms-width-narrow) > .cms-richtext {
            animation: rmg-auf linear both;
            animation-timeline: view();
            animation-range: entry 0px entry 300px;
        }
        /* Das Netzwerk-Rad ist die Ausnahme: dort ist die Kachel-Animation abgeschaltet
           (sonst wandern die Punkte neben ihre Bahn), also blendet das Rad als Ganzes ein. */
        .cms-section > .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) {
            animation: rmg-auf linear both;
            animation-timeline: view();
            animation-range: entry 0px entry 300px;
        }
        /* Fließtext im Akkordeon bekommt gar keine Bewegung: dort stehen die längsten
           Absätze der Seite, und genau dort fällt weiches Antialiasing am meisten auf. */
        body .cms-accordion .accordion-item { animation: none; }
        /* Die Spalten einer Dreier-Reihe laufen versetzt ein — nacheinander statt als Block. */
        .cms-columns > .cms-col {
            animation: rmg-auf linear both;
            animation-timeline: view();
        }
        .cms-columns > .cms-col:nth-child(1) { animation-range: entry 0px entry 300px; }
        .cms-columns > .cms-col:nth-child(2) { animation-range: entry 40px entry 360px; }
        .cms-columns > .cms-col:nth-child(3) { animation-range: entry 80px entry 420px; }
        /* Impressum: Karten und Rechtsangaben sind Lesetext — keine Bewegung, keine
           zweite Composite-Ebene (sonst weiches Antialiasing, s. oben). */
        body .cms-columns:has(dl) > .cms-col,
        body .cms-section:not(.cms-width-full):not(.cms-width-narrow):has(dl) > .cms-richtext { animation: none; }
        /* Dasselbe für die vier Kennzahlen. */
        .cms-stats-row > .cms-stat {
            animation: rmg-auf linear both;
            animation-timeline: view();
        }
        .cms-stats-row > .cms-stat:nth-child(1) { animation-range: entry 0px entry 220px; }
        .cms-stats-row > .cms-stat:nth-child(2) { animation-range: entry 30px entry 260px; }
        .cms-stats-row > .cms-stat:nth-child(3) { animation-range: entry 60px entry 300px; }
        .cms-stats-row > .cms-stat:nth-child(4) { animation-range: entry 90px entry 340px; }
        body .cms-col .cms-media-text-media,
        body .cms-col .cms-media-text-copy { animation: none; }
        .cms-media-text-img-links .cms-media-text-media,
        .cms-media-text-copy {
            animation: rmg-links linear both;
            animation-timeline: view();
            animation-range: entry 0px entry 340px;
        }
        .cms-media-text-img-rechts .cms-media-text-media {
            animation: rmg-rechts linear both;
            animation-timeline: view();
            animation-range: entry 0px entry 340px;
        }
    }
}

/* Strukturdaten sind unsichtbar — sie dürfen keine Sektionshöhe kosten. */
body .cms-section:has(> .cms-jsonld) { padding-block: 0; }
body .cms-jsonld { display: none; }

/* ---------- 9. Menü & Fußzeile -------------------------------------------- */
/* Der Baukasten reserviert für das Logo aspect-ratio 4.444 (Maß des TeamHUB-Logos).
   Das RMG-Signet ist fast quadratisch und würde dadurch oval gezogen. */
body .cms-menu-brand img {
    aspect-ratio: auto;
    max-height: 48px;
    width: auto;
    object-fit: contain;
}
body .cms-menu a { text-transform: uppercase; letter-spacing: .03em; font-size: .88rem; }
body .cms-footer img { aspect-ratio: auto; max-height: 76px; width: auto; object-fit: contain; }

/* Herstellerhinweis in der Fußzeile: bewusst leise — er soll auffindbar sein, nicht
   werben. Erkannt am Ziel, weil eine Klasse im Autoren-HTML den Sanitizer nicht
   überlebt und die Linkzeile sonst wie eine Navigation aussieht. */
body .cms-footer-links:has(a[href*="teamhub"]) {
    margin-top: .2rem;
}
body .cms-footer a[href*="teamhub"] {
    font-size: .78rem;
    /* Die Dämpfung läuft über die Textfarbe, nicht über opacity: sonst wäre das Logo
       genauso blass und sein Zusatz nicht mehr lesbar. */
    color: rgba(255, 255, 255, .42);
    text-decoration: none;
    letter-spacing: .01em;
    display: inline-flex;
    align-items: center;
}
body .cms-footer a[href*="teamhub"]:hover { color: rgba(255, 255, 255, .78); }
body .cms-footer a[href*="teamhub"]:hover::after { opacity: 1; }
/* Der Name steht im Logo, nicht im Text — sonst stünde „TeamHUB" zweimal da.
   Helle Logofassung, weil die Fußzeile in beiden Modi dunkel ist. */
body .cms-footer a[href*="teamhub"]::after {
    content: "";
    display: inline-block;
    width: 100px;
    height: 22.5px;
    margin-left: .5rem;
    opacity: .72;
    transition: opacity .2s ease;
    background: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/teamhub-logo.png') no-repeat left center / contain;
}

/* ---------- 9b. Rechtsseiten ---------------------------------------------- */
/* Impressum/Datenschutz/Transparenz kommen als ein richtext-Block aus dem
   Original-HTML; die Adressblöcke brauchen Luft zwischen den Einheiten. */
body .cms-richtext h2 { margin-top: 2.5rem; }
body .cms-richtext h2:first-child { margin-top: 0; }
body .cms-richtext h3 { margin-top: 1.75rem; color: var(--rmg-orange); }
body .cms-richtext a { color: var(--rmg-orange); }
/* Auf den Rechtsseiten sind die Zwischentitel Sachangaben, keine Schlagzeilen. */
body .cms-width-narrow .cms-richtext h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
/* Der Kontaktblock ganz oben auf den Rechtsseiten (Telefon/Telefax/Mail). */
body .cms-width-narrow .cms-richtext > p:first-child { font-weight: 600; line-height: 1.7; }

/* ---------- 9c. Impressum: Firmenkarten und Rechtsangaben ----------------- */
/* Quelle: build-impressum.py. Erkannt wird alles am AUFBAU (der Sanitizer entfernt
   `class`): Firmenkarte = Richtext mit <dl> als direktem Kind, Rechtsangaben =
   Richtext aus Paaren <h3> + <div>. Beides kommt auf den übrigen Seiten nicht vor.
   Titel und Angaben laufen in der Grundschrift: die Hausschrift ist eine schmale
   Versalienschrift für Schlagzeilen — lange, gemischt geschriebene Zeilen wie
   „Schlichtungsstellen für die außergerichtliche Streitbeilegung …" werden darin unruhig. */
:root { --rmg-label: #6b5d55; }

/* „in Kooperation und Verantwortung von" — Kicker über den Karten, wie der Hero-Kicker. */
body .cms-richtext:has(+ .cms-columns > .cms-col > .cms-richtext > dl) > p {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    color: var(--rmg-kicker, #b23c12);
    font-weight: 600;
    font-size: 1.05rem;
}
body .cms-richtext:has(+ .cms-columns > .cms-col > .cms-richtext > dl) > p::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--rmg-orange);
}

body .cms-col > .cms-richtext:has(> dl) {
    height: 100%;
    background: var(--rmg-karte);
    border: 1px solid var(--rmg-kartenrand);
    border-radius: 18px;
    padding: clamp(1.4rem, 3vw, 2.25rem);
    box-shadow: 0 18px 40px -28px rgba(60, 25, 5, .35);
}
body .cms-richtext:has(> dl) > h3 {
    margin: 0 0 .9rem;
    color: var(--rmg-orange);
    font-size: clamp(1.5rem, 2.3vw, 1.9rem);
    line-height: 1.22;
}
/* Die Rechtsform steht unter der Marke — in der Grundschrift, gemischt geschrieben. */
body .cms-richtext:has(> dl) > h3 > small {
    display: block;
    margin-top: .3rem;
    font-family: var(--cms-font, inherit);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rmg-schwarz);
}
/* :first-of-type nur für die Spezifität — die Lead-Regel für den ersten Absatz in
   `cms-width-wide` (0,3,2) machte den Satz sonst 1,3 rem groß. */
body .cms-col .cms-richtext:has(> dl) > h3 + p:first-of-type {
    margin: 0 0 1.5rem;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--rmg-fliess);
}

/* Angaben als Registratur: Bezeichnung links, Wert rechts. */
body .cms-richtext dl {
    display: grid;
    grid-template-columns: minmax(8.5rem, 36%) minmax(0, 1fr);
    gap: .75rem 1.25rem;
    margin: 0 0 1.25rem;
}
body .cms-richtext dl:last-child { margin-bottom: 0; }
body .cms-richtext dt {
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.5;
    padding-top: .1rem;
    color: var(--rmg-label);
}
body .cms-richtext dd {
    margin: 0;
    line-height: 1.55;
    color: var(--rmg-fliess);
    font-variant-numeric: tabular-nums;
}
/* Die Vermittlerregisternummer ist die Angabe, nach der man im Register sucht. */
body .cms-col .cms-richtext dd:last-of-type {
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--rmg-schwarz);
}
body .cms-richtext dd a { overflow-wrap: anywhere; }

/* Rechtsangaben: Titel in der linken Spalte, Text rechts — Zeile für Zeile. */
body .cms-section > .cms-richtext:has(> h3 + div) {
    display: grid;
    grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 5vw, 4.5rem);
    max-width: 1080px;
}
body .cms-richtext:has(> h3 + div) > h3 {
    grid-column: 1;
    margin: 0;
    padding-block: 1.75rem;
    font-family: var(--cms-font, inherit);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--rmg-schwarz);
}
body .cms-richtext:has(> h3 + div) > h3::before {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: .8rem;
    background: var(--rmg-orange);
}
body .cms-richtext:has(> h3 + div) > div {
    grid-column: 2;
    padding-block: 1.75rem;
    max-width: 68ch;
}
body .cms-richtext:has(> h3 + div) > div > :last-child { margin-bottom: 0; }
body .cms-richtext:has(> h3 + div) p { color: var(--rmg-fliess); line-height: 1.65; }
body .cms-richtext:has(> h3 + div) strong { color: var(--rmg-schwarz); }

@media (max-width: 760px) {
    body .cms-section > .cms-richtext:has(> h3 + div) { grid-template-columns: minmax(0, 1fr); }
    body .cms-richtext:has(> h3 + div) > h3 { padding-block: 1.6rem .6rem; }
    body .cms-richtext:has(> h3 + div) > div { grid-column: 1; padding-block: 0; }
}
@media (max-width: 520px) {
    body .cms-richtext dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
    body .cms-richtext dd + dt { margin-top: .7rem; }
}

/* ---------- 10. Schmale Bildschirme --------------------------------------- */
@media (max-width: 900px) {
    /* Auf schmalen Schirmen steht der Text MITTIG über dem Video — ein Verlauf von links
       nach rechts trägt dort nichts. Deshalb flächig aufhellen statt seitlich. */
    body .cms-section.cms-width-full:has(> .cms-video)::after {
        background:
            linear-gradient(to bottom, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .90) 58%, #fff 100%);
    }
}

@media (max-width: 900px) {
    :root:not([data-bs-theme="light"]) {
        --rmg-mobil-schleier: initial;
    }
}

@media (prefers-color-scheme: dark) and (max-width: 900px) {
    body .cms-section.cms-width-full:has(> .cms-video)::after {
        background:
            linear-gradient(to bottom, rgba(23, 16, 12, .88) 0%, rgba(23, 16, 12, .92) 58%, var(--cms-bg-page, #17100c) 100%);
    }
}

@media (max-width: 700px) {
    .cms-section.cms-width-full:has(> .cms-video) { min-height: 78vh; }
    /* Die Display-Schrift ist sehr schmal laufend — auf dem Handy darf die Zeile
       nicht bis an den Rand stoßen. */
    body .cms-hero h1 { font-size: clamp(1.8rem, 9vw, 2.9rem); }
    body .cms-hero p { max-width: none; }
    body .cms-hero-actions { flex-wrap: wrap; gap: .6rem; }
    /* Die Faktenzeile bricht sonst so um, dass die Trennpunkte am Zeilenanfang stehen. */
    body .cms-hero-facts { display: block; text-align: center; }
    body .cms-hero-facts li { display: block; }
    body .cms-hero-facts li + li::before { content: none; }
    body .cms-section .btn-primary,
    body .cms-section .cms-btn-secondary { padding-inline: 1.5rem; }
    body .cms-feature-grid:not(:has(> .row > .cms-feature-item:nth-child(4)))::before {
        width: 17rem; top: -4%; left: -18%;
    }
    /* `body` davor, sonst verliert die Regel gegen die Hauptregel weiter oben —
       ohne sie stünde auf dem Handy nur EINE Karte je Zeile. */
    body .cms-team-row { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1rem .75rem; }
    body .cms-team-member { padding: 1.1rem .75rem 1.2rem; border-radius: 16px; }
    body .cms-team-member img { max-width: 104px; }
}

/* ============================================================================
   11. Dunkler Modus
   Das Theme steht auf „auto": der Baukasten liefert die dunkle Palette selbst
   (Grund, Flächen, Text, aufgehellte Leitfarbe). Hier stehen nur die Stellen,
   an denen dieses Seiten-CSS feste helle Werte gesetzt hat — sie würden sonst
   im Dunkeln als weiße Kästen stehen bleiben.

   Maßstab für Kontrast ist APCA, nicht WCAG: heller Text auf dunklem Grund wird
   von WCAG 2 systematisch zu gut bewertet (Projektbefund 12.09.2026).
   ============================================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --rmg-schwarz: #f4efe9;          /* Überschriften: hell statt schwarz */
        --rmg-grau: #241a14;             /* Deko-Kreis und Radnabe */
        --rmg-orange: #ff7a4d;           /* Leitfarbe aufgehellt, Sättigung erhalten */
        --rmg-kicker: #ff8a60;           /* auf dunklem Grund muss der Kicker HELLER werden */
        --rmg-rolle: #ff9a75;            /* Team-Rolle: im Dunkeln heller statt dunkler */
        --rmg-karte: #2b1f18;            /* eine Stufe heller als der Sektionsgrund */
        --rmg-kartenrand: rgba(255, 255, 255, .10);
        --rmg-fliess: #e6dcd4;           /* Fließtext: auf #160c08 gemessen Lc 86 */
    }

    /* Ein SVG, das als background-image geladen wird, erbt keine CSS-Variablen —
       für den dunklen Modus liegt deshalb eine zweite Fassung bereit. */
    @media (min-width: 1150px) {
        body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row {
            background-image: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/rm-network-dark.svg');
        }
    }


    /* Eigene Vektormotive: die helle Fassung hat fast schwarze Linien und würde auf
       dunklem Grund verschwinden. Ein <img> kennt keine Medienabfrage — also tauscht
       `content` die Datei. */
    body img[src$="k-menschen.svg"]      { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/k-menschen-dark.svg'); }
    body img[src$="k-freie-berufe.svg"]  { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/k-freie-berufe-dark.svg'); }
    body img[src$="k-unternehmen.svg"]   { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/k-unternehmen-dark.svg'); }
    body img[src$="risiko-radar.svg"]    { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/risiko-radar-dark.svg'); }
    body img[src$="ordnung.svg"]         { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/ordnung-dark.svg'); }
    body img[src$="h-ungebunden.svg"]    { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/h-ungebunden-dark.svg'); }
    body img[src$="h-akribisch.svg"]     { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/h-akribisch-dark.svg'); }
    body img[src$="h-persoenlich.svg"]   { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/h-persoenlich-dark.svg'); }
    body img[src$="luecke.svg"]         { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/luecke-dark.svg'); }
    /* Der Schatten der Lösungs-Karte ist auf hellem Grund gerechnet. */
    body .cms-feature-grid > .row > .cms-feature-item:last-child {
        box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    }
    body .cms-team-member p,
    body .cms-stat-label { color: #c3b4a9; }
    /* Die Partnerlogos sind dunkle Schrift auf transparentem Grund — auf dunklem
       Sektionsgrund wären sie unsichtbar. Einheitlich hell, wie in Logoleisten üblich. */
    body .cms-accordion .accordion-button::before { filter: brightness(0) invert(1); opacity: .8; }
    body .cms-accordion .accordion-button:not(.collapsed)::before { opacity: 1; }
    /* Ausnahme: das RMG-Signet (Einträge 1 und 2) ist eine orange Scheibe mit weißem R.
       Durch den Filter wurde daraus eine leere weiße Scheibe — auf Handys im dunklen
       Modus „waren die Logos weg". Es trägt seine eigene Fläche und bleibt im Original. */
    body .cms-accordion .accordion-item:nth-child(-n+2) .accordion-button::before { filter: none; opacity: 1; }
    body .cms-richtext dt { color: #d0c4bb; }
    body .cms-accordion .accordion-button::after,
    body .cms-accordion .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff7a4d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    /* Hero: der Verlauf muss ins Dunkle führen, sonst steht ein weißer Nebel
       über dem Video und die helle Schrift verschwindet darin. */
    body .cms-section.cms-width-full:has(> .cms-video) { background: #17100c; }
    body .cms-section.cms-width-full:has(> .cms-video)::after {
        /* Gleiche Verteilung wie im Hellen: bis 46 % deckend, damit die ganze Textzone
           auf ruhigem Grund liegt und nicht mit dem Video flackert. */
        background:
            linear-gradient(to right, rgba(23, 16, 12, .94) 0%, rgba(23, 16, 12, .90) 46%, rgba(23, 16, 12, .72) 64%, rgba(23, 16, 12, .18) 82%, transparent 100%),
            linear-gradient(to top, var(--cms-bg-page, #17100c) 0%, rgba(23, 16, 12, .55) 16%, transparent 44%);
    }
    body .cms-hero p { color: #e6dcd4; }
    body .cms-hero-facts li { color: #c3b4a9; }

    /* Das Hero-Video ist hellgrau gerendert — leicht abgedunkelt fügt es sich ein. */
    body .cms-section.cms-width-full > .cms-video .cms-video-el {
        filter: brightness(.62) contrast(1.05);
    }

    /* Sekundärer Knopf: schwarzer Rahmen auf dunklem Grund wäre unsichtbar. */
    body .cms-section .cms-btn-secondary {
        border-color: #d9cdc4;
        color: #f4efe9;
    }
    body .cms-section .cms-btn-secondary:hover { background: #f4efe9; color: #17100c; }

    /* Die Kontakt-Sektion ist schon hell auf schwarz — im Dunkeln reicht der
       Sektionsgrund des Themes, das feste Schwarz würde als Loch wirken. */
    body .cms-section.cms-bg-inverse { background-color: #0f0a07; }

    /* Fließtext, den dieses CSS hell festgelegt hatte. */
    body .cms-width-wide .cms-richtext > p:first-of-type,
    body .cms-team-member p { color: #c3b4a9; }

    /* Die Team-Porträts tragen ihren hellgrauen Grund im Bild — ungebremst
       leuchten 19 helle Kacheln aus der dunklen Seite heraus. */
    body .cms-team-member img { filter: brightness(.88) contrast(1.02); }
    body .cms-team-member:hover img { filter: brightness(1) contrast(1.02); }
}

/* Dieselben Werte, wenn die Seite fest auf dunkel steht (Theme „dunkel" oder
   Vorschau mit ?dark=true) — der Baukasten setzt dafür html.dark. */
@media (prefers-color-scheme: light) {
    :root[data-bs-theme="dark"],
    html.dark {
        --rmg-schwarz: #f4efe9;
        --rmg-grau: #241a14;
        --rmg-orange: #ff7a4d;
        --rmg-kicker: #ff8a60;
        --rmg-rolle: #ff9a75;
        --rmg-karte: #2b1f18;
        --rmg-kartenrand: rgba(255, 255, 255, .10);
        --rmg-fliess: #e6dcd4;
    }
    html.dark body .cms-feature-grid > .row > .cms-feature-item:last-child {
        box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    }
    html.dark body .cms-hero p { color: #e6dcd4; }
    html.dark body .cms-section.cms-width-full:has(> .cms-video) { background: #17100c; }
    html.dark body .cms-section.cms-width-full > .cms-video .cms-video-el {
        filter: brightness(.62) contrast(1.05);
    }
    html.dark body .cms-team-member img { filter: brightness(.88) contrast(1.02); }

    /* Eigene Vektormotive: die helle Fassung hat fast schwarze Linien und würde auf
       dunklem Grund verschwinden. Ein <img> kennt keine Medienabfrage — also tauscht
       `content` die Datei. */
    html.dark body img[src$="k-menschen.svg"]      { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/k-menschen-dark.svg'); }
    html.dark body img[src$="k-freie-berufe.svg"]  { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/k-freie-berufe-dark.svg'); }
    html.dark body img[src$="k-unternehmen.svg"]   { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/k-unternehmen-dark.svg'); }
    html.dark body img[src$="risiko-radar.svg"]    { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/risiko-radar-dark.svg'); }
    html.dark body img[src$="ordnung.svg"]         { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/ordnung-dark.svg'); }
    html.dark body img[src$="h-ungebunden.svg"]    { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/h-ungebunden-dark.svg'); }
    html.dark body img[src$="h-akribisch.svg"]     { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/h-akribisch-dark.svg'); }
    html.dark body img[src$="h-persoenlich.svg"]   { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/h-persoenlich-dark.svg'); }
    html.dark body img[src$="luecke.svg"]         { content: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/luecke-dark.svg'); }

    html.dark body .cms-team-member p,
    html.dark body .cms-stat-label { color: #c3b4a9; }
    html.dark body .cms-accordion .accordion-button::before { filter: brightness(0) invert(1); opacity: .8; }
    html.dark body .cms-accordion .accordion-item:nth-child(-n+2) .accordion-button::before { filter: none; opacity: 1; }
    html.dark body .cms-richtext dt { color: #d0c4bb; }
    @media (min-width: 1150px) {
        html.dark body .cms-feature-grid:has(> .row > .cms-feature-item:nth-child(4)) > .row {
            background-image: url('/Data/Pages/Files/6a0e8e5e-7caa-47ee-ad4a-53271a647dd3/rm-network-dark.svg');
        }
    }
}