/* ==========================================================================
   site-polish.css — Guss-Layer für alle Seiten
   Gleicht Navigation, Footer und Headline-Typo an das Editorial-Design der
   Startseite an. KEINE strukturellen Änderungen. Kein editorial.css-Overwrite.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile-Rand-Fix: Bootstrap-Container haben default 12px Padding auf Mobile,
   das ist für iOS-Displays zu wenig — Text klebt am Rand. Auf 22px erhöhen,
   das gibt genug Atem-Luft ohne den Inhalt zu schmal zu machen.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}
@media (max-width: 380px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* Space Grotesk für alle H1/H2/H3 im Inhalt — schafft visuelle Familie mit
   der Startseite. Body-Text bleibt bewusst Inter (gute Lesbarkeit für lange
   Passagen). Editorial-Seite überschreibt das über eigene Regeln. */
main h1, main h2, main h3,
.hero-content h1, .hero-content h2,
.subpage-hero h1, .subpage-hero h2,
h1.hero-headline, h2.h2-heading,
.pricing-method__title,
.comparison-title,
.chat-faq__title,
.refs-hero__title {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    letter-spacing: -0.025em;
}
/* Für sehr grosse Display-Grade Extra-Tightening */
h1.hero-headline, h1[data-aos] {
    letter-spacing: -0.035em;
}

/* --------------------------------------------------------------------------
   Navigation — auf allen Seiten das gleiche Dunkelblau ohne Schatten.
   Auf der Startseite verschmilzt sie mit dem Hero-Block (via editorial.css).
   -------------------------------------------------------------------------- */
.navbar {
    background-color: #121C33;
    border-bottom: 0;
    box-shadow: none;
    padding: 18px 0;
}
/* Logo: inline SVG-Wortmark, umrahmt von <> Code-Klammern.
   Wortmark + Klammern erben Farbe via currentColor. */
.navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.05em;
    padding: 0;
    color: #FAF7F2;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
}
.navbar .navbar-brand::before,
.navbar .navbar-brand::after {
    display: inline-block;
    /* Grösser als das Wortmark, damit die Klammern optisch mit den
       Buchstaben-Grössen (Oberlänge ~22px) auf Augenhöhe sind. */
    font-size: 28px;
    font-weight: 600;
    line-height: 0.9;
    opacity: 0.95;
    color: #EBD495;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar .navbar-brand::before { content: "<"; }
.navbar .navbar-brand::after { content: ">"; }
.navbar .navbar-brand:hover::before,
.navbar .navbar-brand:focus-visible::before { transform: translateX(-2px); }
.navbar .navbar-brand:hover::after,
.navbar .navbar-brand:focus-visible::after { transform: translateX(2px); }

.navbar .brand-logo {
    height: 22px;
    width: auto;
    display: block;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar .navbar-brand:hover .brand-logo,
.navbar .navbar-brand:focus-visible .brand-logo { opacity: 0.9; }

/* Screenreader-nur Alternativtext (Bootstrap-Klasse ist evtl. nicht überall da) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.navbar .nav-link {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    letter-spacing: -0.02em;
}
.navbar .nav-link {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { color: #F0F2F6; }

/* Gratis-Check als Umriss-Pille */
.nav-audit-btn {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -0.015em;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-audit-btn:hover {
    border-color: rgba(255, 255, 255, 0.72);
    color: #F0F2F6;
    background: transparent;
}
/* Hauptaktion: Gold flach, ohne Verlauf */
.navbar .btn-solid-lg {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    border-radius: 100px;
    background: #E5C97C;
    color: #121C33;
    border: 0;
    box-shadow: none;
    transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar .btn-solid-lg:hover {
    background: #F0F2F6;
    color: #121C33;
}

/* --------------------------------------------------------------------------
   Footer — tieferes Blau als Abschluss, Grotesk in Überschriften
   -------------------------------------------------------------------------- */
.footer-2026 {
    background: #081124;
    color: rgba(255, 255, 255, 0.72);
}
.footer-2026__col h3,
.footer-2026__col h6,
.footer-2026__heading {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.02em;
}
.footer-2026__owner-name {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.footer-2026__list a,
.footer-2026 a { color: rgba(255, 255, 255, 0.72); }
.footer-2026 a:hover { color: #EBD495; }

/* Trust-Boxen: flache Ecken, dezente Linie — passend zum Guss */
.footer-2026__trust-badge {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.footer-2026__perf {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
}
.footer-2026__perf-label {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #EBD495;
}
.footer-2026__photo {
    border: 0;
    outline: 1px solid rgba(255, 255, 255, 0.16);
    outline-offset: 3px;
}
.footer-2026__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* --------------------------------------------------------------------------
   Sticky Mobile CTA-Bar — Editorial-Look
   Weisser Original-Grund wirkte wie eine hell-abgesetzte Kachel.
   Jetzt: dunkelblau (matched Navbar/Hero), Gold-CTA sticht klar hervor.
   -------------------------------------------------------------------------- */
/* Hintergrund komplett weg — nur der Gold-Button schwebt frei.
   Kein Rahmen, kein Kachel-Look. Button bekommt eigenen Schatten für Tiefe. */
.sticky-mobile-cta {
    background: transparent;
    border-top: 0;
    box-shadow: none;
    pointer-events: none;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}
.sticky-mobile-cta__call,
.sticky-mobile-cta__inquire {
    pointer-events: auto;
}
.sticky-mobile-cta__inquire {
    background: #E5C97C;
    color: #121C33;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    border-radius: 100px;
    border: 0;
    padding: 14px 20px;
    /* Sanfter Schatten damit der freischwebende Button Tiefe zum Content bekommt */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25),
                0 2px 6px rgba(0, 0, 0, 0.15);
}
.sticky-mobile-cta__inquire:active,
.sticky-mobile-cta__inquire:hover {
    background: #EBD495;
    color: #121C33;
}
.sticky-mobile-cta__call {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.20);
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 500;
    border-radius: 100px;
}
.sticky-mobile-cta__call:active {
    background: rgba(255, 255, 255, 0.06);
    color: #FAF7F2;
}

/* ==========================================================================
   Editorial-Guss — Money-Pages (seo/webdev/shopify/ai/graphic/refs/contact)
   Gleicht Alt-Elemente (Gold-Sperr-Kicker, Gold-Verlauf-CTA, Häkchen-Trustbar,
   Gold-Glow-Hero) an das Editorial-Set der Startseite an.
   Startseite (body.is-editorial) ist über editorial.css scoped abgesichert —
   deren Regeln laden nach dieser Datei und überschreiben unsere Bare-Selektoren.
   ========================================================================== */

/* 1. Sektions-Kicker — Gold-Versal-Sperrung raus, ruhiger Editorial-Register.
   editorial.css setzt auf .is-editorial .section-label bereits eine eigene
   Pill-Optik; unsere Regel greift nur ausserhalb dieses Scopes durch. */
.section-label {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #1A1A2E;
    opacity: 0.72;
}

/* 2. Hero-CTA Primär — Gold-Verlauf raus, flaches Editorial-Gold, Ink-Text.
   Pillenform bleibt. Kein Glow-Shadow im Hover. */
.btn-hero-primary {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    background: #E5C97C;
    color: #121C33;
    border: 0;
    box-shadow: none;
    transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-hero-primary:hover,
.btn-hero-primary:focus-visible {
    background: #EBD495;
    color: #121C33;
    box-shadow: none;
    transform: none;
}

/* 3. Hero-CTA Sekundär — Space Grotesk, dezente Farbe, kein Gold-Rand */
.btn-hero-secondary {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.20);
    background: transparent;
    box-shadow: none;
}
.btn-hero-secondary:hover,
.btn-hero-secondary:focus-visible {
    color: #F0F2F6;
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}

/* 4. Money-Page-Hero — dunkelblauer Grund matcht Navbar (kein Seam),
   dezenter Vertikal-Verlauf gegen Flat-Look, Gold-Glow entfernt. */
.subpage-hero {
    background: linear-gradient(180deg, #121C33 0%, #151F38 100%);
    padding-top: 7rem;
    padding-bottom: 4.5rem;
}
.subpage-hero::before {
    background: none;
    opacity: 0;
}

/* 5. Hero-Kicker — Gold-Sperr-Kaps auf ruhiges Champagner-Register. */
.subpage-hero .hero-label {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: none;
    color: #EBD495;
    opacity: 0.85;
}

/* 6. Hero-Sub und Reassure — Space Grotesk, ruhigerer Ton */
.subpage-hero .hero-sub,
.subpage-hero .hero-reassure {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.78);
}

/* 7. Trust-Bar — Gold-Häkchen entfernen, Editorial-Trennstriche. */
.subpage-hero .hero-trust-bar {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.72);
}
.subpage-hero .hero-trust-bar li {
    padding-left: 0;
}
.subpage-hero .hero-trust-bar li::before {
    content: none;
}
.subpage-hero .hero-trust-bar li:not(:last-child):not(.hero-trust-bar__person):not(.hero-trust-bar__live) {
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    padding-right: 1.5rem;
}
.subpage-hero .hero-trust-bar strong {
    color: #EBD495;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* 8. Gold-Pills auf hellen BGs — Editorial-Wash statt Gold-Fill. */
.svc-card:not(.featured) .svc-card-tag,
.seo-feature-tag,
.feature-tile .feature-tag {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: none;
    background: rgba(229, 201, 124, 0.12);
    color: #7A5A1E;
    border: 1px solid rgba(229, 201, 124, 0.35);
    box-shadow: none;
}

/* 9. Icon-Container auf hellen Karten — Ink-Outline statt Gold-Fill. */
.svc-card:not(.featured) .svc-card-icon,
.feature-tile-ico,
.ch-tile-ico {
    background: #FAF7F2;
    color: #121C33;
    border: 1px solid rgba(18, 28, 51, 0.14);
    box-shadow: none;
}

/* 10. GEO/LLMO-Pill und Shopify-Partner-Badge — beide auf dunklem BG. */
.geo-llmo-pill,
.shopify-partner-badge {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    background: rgba(235, 212, 149, 0.10);
    color: #EBD495;
    border: 1px solid rgba(235, 212, 149, 0.32);
    box-shadow: none;
}

/* 11. Bootstrap-FAQ-Accordion — Editorial-Look.
   Container-Karten mit ruhigem Rahmen, klare Aktiv-States, Chevrons in Ink. */
.accordion-1 .accordion-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(18, 28, 51, 0.10) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0;
    transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.accordion-1 .accordion-item:has(.accordion-button:not(.collapsed)) {
    background: rgba(18, 28, 51, 0.03) !important;
}
.accordion-1 .accordion-header {
    width: 100% !important;
}
.accordion-1 .accordion-button {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #121C33 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 1.5rem 1.25rem !important;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.accordion-1 .accordion-button:hover {
    color: #7A5A1E !important;
}
.accordion-1 .accordion-button:not(.collapsed) {
    color: #121C33 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.accordion-1 .accordion-button:focus,
.accordion-1 .accordion-button:focus-visible {
    box-shadow: none !important;
    outline: 2px solid rgba(229, 201, 124, 0.5);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Chevron: SVG als Mask, Farbe per currentColor — matched Editorial */
.accordion-1 .accordion-button::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: auto !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    order: 2;
    background-image: none !important;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' stroke='%23000' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    color: rgba(18, 28, 51, 0.35);
}
.accordion-1 .accordion-button:hover::before {
    color: #E5C97C;
}
.accordion-1 .accordion-button:not(.collapsed)::before {
    color: #E5C97C;
    transform: rotate(180deg);
    background-image: none !important;
}
.accordion-1 .accordion-body {
    padding: 0 1.25rem 1.75rem !important;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(18, 28, 51, 0.78);
}

/* --------------------------------------------------------------------------
   Mobile-Menü — angepasst an Editorial-Look
   Gilt nur unterhalb des Bootstrap-Breakpoints (992px).
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Hamburger — grösserer Touch-Target, klare Farbe */
    .navbar .navbar-toggler {
        padding: 8px;
        margin-right: -8px;
        color: #FAF7F2;
        border-radius: 8px;
    }
    .navbar .navbar-toggler:focus-visible {
        outline: 2px solid rgba(235, 212, 149, 0.6);
        outline-offset: 2px;
    }
    /* Hamburger (2 Linien) → X-Icon wenn offen.
       Beide Linien in Viewbox-Mitte (y=16.5) drehen — daraus wird ein sauberes X. */
    .navbar .hamburger-icon path {
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: 16px 16.5px;
    }
    body.offcanvas-open .navbar .hamburger-icon path:nth-child(1) {
        transform: translateY(3px) rotate(45deg);
    }
    body.offcanvas-open .navbar .hamburger-icon path:nth-child(2) {
        transform: translateY(-3px) rotate(-45deg);
    }

    /* Off-Canvas: fullscreen-Overlay mit sauberem z-index über Navbar (1030)
       und Fortschrittsleiste (1040). Overflow-y auto damit lange Menüs bei
       kleinen Screens scrollbar bleiben — aber nur INNERHALB des Menüs. */
    .offcanvas-collapse {
        top: 63px;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1050 !important;
        padding: 1rem 1.5rem 1.5rem !important;
        background: linear-gradient(180deg, #121C33 0%, #0D1626 100%) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* Scrollbar visuell verstecken, Scroll-Fähigkeit bleibt für Notfälle */
        scrollbar-width: none;
    }
    .offcanvas-collapse::-webkit-scrollbar { display: none; }

    /* iOS-Scroll-Lock: Body wird per JS auf position:fixed und
       negatives top gesetzt. Diese Klasse liefert den fixed-Modus.
       Zusätzlich HTML-Root auf overflow:hidden, sonst zeigt der Browser
       einen "toten" Scrollbar am HTML-Root während der Body fixed ist. */
    body.offcanvas-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
    html:has(body.offcanvas-open) {
        overflow: hidden;
        scrollbar-width: none;
    }
    html:has(body.offcanvas-open)::-webkit-scrollbar { display: none; }

    /* Navigations-Container: mehr Abstand vor CTAs.
       overflow:visible und height:auto: Alt-Regeln beschnitten die UL auf
       500px, sodass die letzten Items (CTAs) verschwanden. */
    .navbar .navbar-nav {
        margin-top: 0.5rem !important;
        margin-bottom: 1.5rem !important;
        gap: 0 !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Menü-Items: grössere Touch-Fläche, dezente Trennlinien, klare Hover-States */
    .navbar .nav-item .nav-link {
        font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
        font-size: 1.15rem !important;
        font-weight: 500 !important;
        letter-spacing: -0.025em !important;
        padding: 0.85rem 0.25rem !important;
        color: #FAF7F2 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                    padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .navbar .nav-item .nav-link:hover,
    .navbar .nav-item .nav-link:focus-visible,
    .navbar .nav-item.dropdown.show > .nav-link {
        color: #EBD495 !important;
        padding-left: 0.5rem !important;
    }
    /* Letztes Nav-Item ohne Trennlinie unten */
    .navbar .navbar-nav > .nav-item:last-child .nav-link {
        border-bottom: 0 !important;
    }

    /* Dropdown-Chevron: Gold-Farbe, dreht sich bei offen */
    .navbar .dropdown-toggle::after {
        color: rgba(235, 212, 149, 0.7);
        border-top-color: currentColor;
        margin-left: auto;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .navbar .dropdown.show .dropdown-toggle::after {
        transform: rotate(180deg);
        color: #EBD495;
    }

    /* Dropdown-Menü: nahtlos eingebettet, keine harte Kante.
       WICHTIG: Bootstrap setzt .dropdown-menu auf position:absolute per Popper.js —
       auf Mobile MUSS es aber static sein, sonst überlagert es die nachfolgenden
       Nav-Items (Design, SEO usw.). Alle Positionierungs-Props überschreiben. */
    .navbar .dropdown-menu {
        position: static !important;
        float: none !important;
        transform: none !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.25rem 1rem !important;
        margin: 0 -0.25rem !important;
    }
    .navbar .dropdown-menu .dropdown-item {
        font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
        font-size: 0.98rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.75);
        padding: 0.7rem 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        background: transparent !important;
        transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                    padding-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .navbar .dropdown-menu .dropdown-item:last-child { border-bottom: 0; }
    .navbar .dropdown-menu .dropdown-item:hover,
    .navbar .dropdown-menu .dropdown-item:focus-visible {
        color: #EBD495;
        padding-left: 0.6rem;
    }

    /* CTA-Buttons unten: mehr Luft, gestapelt, echte Pillen */
    .navbar .navbar-nav ~ * .nav-audit-btn,
    .navbar .nav-audit-btn {
        display: flex !important;
        justify-content: center;
        width: 100%;
        margin: 0 0 0.75rem !important;
        padding: 0.9rem 1.4rem !important;
        font-size: 1rem !important;
    }
    .navbar .btn-solid-lg {
        display: flex !important;
        justify-content: center;
        width: 100%;
        margin: 0 !important;
        padding: 1rem 1.4rem !important;
        font-size: 1rem !important;
    }

    /* Scroll-Lock ist oben ausführlich definiert (position:fixed + width),
       hier kein zweites Regelwerk. */
}

/* 12. Multi-Step-Formular + Personal-CTA — Aktiv-States auf Editorial-Ink. */
.ms-chip.is-checked,
.ms-chip-tile.is-checked,
.ms-progress-step.is-active,
.ms-progress-step.is-current {
    border-color: #121C33;
    background: rgba(18, 28, 51, 0.04);
    color: #121C33;
    box-shadow: none;
}
.personal-cta-live-dot {
    background: #16A34A;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}
.personal-cta-badge {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    background: rgba(18, 28, 51, 0.04);
    color: #121C33;
    border: 1px solid rgba(18, 28, 51, 0.14);
}

/* --------------------------------------------------------------------------
   Verwandte Services — Interne Verlinkungsmodul.
   Auf allen Money-Pages vor Audit/CTA eingebunden. Editorial-Stil, subtil.
   -------------------------------------------------------------------------- */
.related-services {
    padding: clamp(3rem, 2rem + 3vw, 5rem) 0;
    background: #FAF7F2;
    color: #121C33;
    border-top: 1px solid rgba(18, 28, 51, 0.08);
}
.related-services__header {
    max-width: 640px;
    margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.related-services__title {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0.6rem 0 0.8rem;
    color: #121C33;
}
.related-services__lead {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(18, 28, 51, 0.7);
    margin: 0;
}
.related-services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border-top: 1px solid rgba(18, 28, 51, 0.12);
    border-bottom: 1px solid rgba(18, 28, 51, 0.12);
}
.related-services__card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0.4rem 1rem;
    padding: clamp(1.2rem, 0.8rem + 1vw, 1.8rem);
    text-decoration: none;
    color: inherit;
    border-right: 1px solid rgba(18, 28, 51, 0.12);
    transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}
.related-services__card:last-child { border-right: 0; }
.related-services__card:hover,
.related-services__card:focus-visible {
    background: rgba(229, 201, 124, 0.14);
    color: inherit;
    text-decoration: none;
    outline: none;
}
.related-services__card-title {
    grid-column: 1;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #121C33;
}
.related-services__card-desc {
    grid-column: 1 / -1;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(18, 28, 51, 0.68);
}
.related-services__card-arrow {
    grid-column: 2;
    grid-row: 1;
    color: rgba(18, 28, 51, 0.45);
    transition: color 0.3s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: inline-flex;
}
.related-services__card:hover .related-services__card-arrow {
    color: #B08D3F;
    transform: translateX(4px);
}
/* Mobile: Karten vertikal stapeln, horizontale Trennlinien */
@media (max-width: 767px) {
    .related-services__grid { grid-template-columns: 1fr; }
    .related-services__card {
        border-right: 0;
        border-bottom: 1px solid rgba(18, 28, 51, 0.12);
    }
    .related-services__card:last-child { border-bottom: 0; }
}