/* =========================================================================
   msave.de – Theme
   Blau/Grau, modern. Aufbauend auf Bootstrap 5.
   Übernommen von fisinger.de; die Farbrollen tragen hier das msave-Blau.
   ========================================================================= */

:root {
    /* Rollen des Markenblau. Im übrigen Stylesheet steht nie eine Farbe direkt,
       sondern immer eine Rolle – nur deshalb kann der Kontrastmodus die
       gesamte Seite umstellen, ohne eine einzige Regel anzufassen.
       Alle Werte gerechnet, nicht geschätzt.

       Der Logo-Ton #1dafed selbst taucht nur in einer einzigen Rolle auf:
       auf Weiß erreicht er lediglich 2,50:1 und ist damit weder für Text
       (4,5:1) noch für Icons und Rahmen (3:1) zulässig. Auf dunklem Grund
       dreht sich das Verhältnis um, dort ist er richtig. */
    --ms-blue:          #1189c4;      /* Flächen, Icons, Rahmen – 3,89:1 auf Weiß (WCAG 1.4.11: 3:1) */
    --ms-blue-text:     #1173b9;      /* Text, Links, Buttonflächen – 5,03:1 auf Weiß (WCAG 1.4.3: 4,5:1) */
    --ms-blue-deep:     #0f6aa8;      /* Hover/Active dazu – 5,76:1 */
    --ms-blue-on-dark:  #1dafed;      /* Logo-Ton, auf dunklem Grund – 6,14:1 auf --ms-darker */
    --ms-blue-text-rgb: 17, 115, 185; /* Bootstraps Fokusschatten */
    /* Getönte Fläche. Bewusst sehr hell: darauf liegt an mehreren Stellen Text
       (Dropdown, aufgeklapptes Akkordeon, .legal-pending). Bei #e8f6fd käme
       --ms-blue-text nur auf 4,56:1 – dicht an der Grenze. Mit diesem Ton sind
       es 4,76:1 für Blau und 5,50:1 für Grau, also etwas Luft nach unten. */
    --ms-blue-soft:     #f2fafe;

    /* Lese-Schleier über dem Hero-Video, s. .hero--video::before */
    --ms-scrim-a: rgba(228, 231, 235, .97);
    --ms-scrim-b: rgba(198, 203, 210, .88);

    --ms-dark:        #2d2d2d;
    --ms-darker:      #252525;
    /* #6b7280 erreicht auf --ms-blue-soft nur 4,38:1 – deshalb von vornherein
       der dunklere Ton, der auch auf getönten Flächen über 4,5:1 bleibt. */
    --ms-gray:        #5d6673;        /* 5,81:1 auf Weiß, 5,27:1 auf --ms-blue-soft */
    --ms-light:       #f4f6f8;
    --ms-hero:        #e9eef3;

    /* Fokusring: bewusst warmes Rostrot, nicht Blau. Ein blauer Ring auf einer
       blauen Schaltfläche wäre unsichtbar (#1c64f2 gegen #1173b9: 1,01:1).
       Erklärung zur Umsetzung bei :focus-visible weiter unten. */
    --ms-focus:       #b8431c;        /* 5,44:1 auf Weiß */

    /* Bootstrap-Variablen überschreiben */
    --bs-primary:        #1173b9;
    --bs-primary-rgb:    17, 115, 185;
    --bs-body-color:     #2d2d2d;
    --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Bootstrap 5.3 bildet Linkfarben aus den -rgb-Varianten. Nur
       --bs-link-color zu setzen bleibt wirkungslos. */
    --bs-link-color:     #1173b9;
    --bs-link-hover-color: #0f6aa8;
    --bs-link-color-rgb: 17, 115, 185;
    --bs-link-hover-color-rgb: 15, 106, 168;
}

/* =========================================================================
   KONTRASTMODUS  (Umschalter „Darstellung" im Kopfbereich)
   -------------------------------------------------------------------------
   WICHTIGER UNTERSCHIED ZU fisinger.de: dort trägt der Grundzustand das
   Markenorange und erfüllt WCAG 1.4.3 bewusst nicht – erst dieser Modus
   liefert die konforme Fassung. Hier ist das anders. Das dunklere Markenblau
   #1173b9 erreicht schon im Grundzustand 5,03:1, die Seite ist also ohne
   Umschalten konform.

   Dieser Modus ist deshalb kein Konformitätsnachweis, sondern eine echte
   Zusatzleistung für Menschen, die mehr Kontrast brauchen als das Minimum:
   er geht auf 7:1 und darüber (WCAG-Stufe AAA für Fließtext).
   Wer das ändert, sollte diesen Unterschied kennen – sonst wandert die
   Begründung aus der Vorlage mit, die hier nicht zutrifft.
   ========================================================================= */
html[data-kontrast="hoch"] {
    --ms-blue-text:     #0d5c93;      /* 7,07:1 auf Weiß, 6,53:1 auf --ms-light */
    --ms-blue-deep:     #0a4d7d;      /* 8,86:1 – Hover/Active dazu */
    --ms-blue-on-dark:  #5cc7f5;      /* 7,99:1 auf --ms-darker */
    --ms-blue-text-rgb: 13, 92, 147;
    /* Hellerer Schleier: Eyebrow und Text sitzen oben links über dem Video */
    --ms-scrim-a: rgba(250, 251, 252, .97);
    --ms-scrim-b: rgba(219, 224, 230, .92);

    --bs-link-color:     #0d5c93;
    --bs-link-hover-color: #0a4d7d;
    --bs-link-color-rgb: 13, 92, 147;
    --bs-link-hover-color-rgb: 10, 77, 125;
}

/* Wer im Betriebssystem „erhöhter Kontrast" eingestellt hat, bekommt die
   verstärkte Fassung sofort – bis er im Menü ausdrücklich „Standard" wählt.
   Die Werte stehen bewusst doppelt: CSS kann eine Media Query nicht in eine
   Selektorliste ziehen. Bei Änderungen beide Blöcke pflegen. */
@media (prefers-contrast: more) {
    html:not([data-kontrast="standard"]) {
        --ms-blue-text:     #0d5c93;
        --ms-blue-deep:     #0a4d7d;
        --ms-blue-on-dark:  #5cc7f5;
        --ms-blue-text-rgb: 13, 92, 147;
        --ms-scrim-a: rgba(250, 251, 252, .97);
        --ms-scrim-b: rgba(219, 224, 230, .92);

        --bs-link-color:     #0d5c93;
        --bs-link-hover-color: #0a4d7d;
        --bs-link-color-rgb: 13, 92, 147;
        --bs-link-hover-color-rgb: 10, 77, 125;
    }
}

/* =========================================================================
   SCHRIFTGRÖSSE  (Umschalter „Darstellung")
   -------------------------------------------------------------------------
   Nur die Wurzel-Schriftgröße wird verstellt. Weil das Layout in rem rechnet,
   wachsen Text, Abstände und Zielflächen gleichmäßig mit; die Breite der
   Container bleibt, sodass nichts umbricht, was nicht umbrechen soll.
   ========================================================================= */
html[data-schrift="gross"]      { font-size: 112.5%; }  /* 16 -> 18 px */
html[data-schrift="sehr-gross"] { font-size: 125%; }    /* 16 -> 20 px */

/* --- Basis ------------------------------------------------------------- */
html {
    /* Sprungziele (Skip-Link/Anker) nicht hinter dem Sticky-Header verstecken */
    scroll-padding-top: 110px;
}
body {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ms-dark);
    background: #fff;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Roboto', 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--ms-darker);
    letter-spacing: 0;
}

a { text-decoration: none; }

/* WCAG 1.4.1 (Verwendung von Farbe): Ein Link im Fließtext darf sich nicht
   allein durch die Farbe vom Text unterscheiden. Das Markenblau #1173b9
   erreicht gegen die Grundtextfarbe #2d2d2d nur 2,74:1 und gegen den
   Sekundärtext #5d6673 sogar nur 1,16:1 – gefordert wären 3:1. Links im
   Textkörper sind deshalb dauerhaft unterstrichen, in jedem Darstellungsmodus.
   (Bei einem blauen Markenton ist das noch nötiger als bei einem orangen: Blau
   liegt der Textfarbe in der Helligkeit näher.)
   Navigation, Buttons und Kacheln bleiben ausgenommen – dort ist der Link an
   Fläche, Rahmen und Position erkennbar. */
main :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}
main :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:not(.btn):hover,
main :is(p, li, dd, dt, td, th, figcaption, blockquote, address) a:not(.btn):focus-visible {
    text-decoration-thickness: 2px;
}

/* --- Barrierefreiheit ------------------------------------------------- */
/* Sichtbarer Tastatur-Fokus (WCAG 2.4.7).
   Zwei Ringe, und zwar aus einem konkreten Grund: Die Vorlage nutzte einen
   blauen Ring (#1c64f2). Auf einer blauen Schaltfläche wäre der praktisch
   unsichtbar – #1c64f2 gegen --ms-blue-text ergibt 1,01:1. Deshalb hier
   1. ein warmes Rostrot als Ring: eine Farbfamilie, die auf der ganzen Seite
      sonst nicht vorkommt, also nie mit einer Markenfläche verschmilzt
      (5,44:1 auf Weiß, 5,02:1 auf --ms-light),
   2. ein weißer Halo außen herum. Auf weißem Grund ist er unsichtbar und
      stört nicht; auf den blauen Flächen (.cta-band, .panel-accent, Footer)
      trägt er den Ring mit 5,03:1 gegen den Untergrund.
   Einer der beiden Ringe ist damit auf jedem Untergrund sichtbar. */
:focus-visible {
    outline: 3px solid var(--ms-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .95);
    border-radius: 3px;
}
/* Ausnahmen gibt es bewusst keine. Der Ring wird nirgends auf Weiß
   umgestellt: Ein weißer Ring liegt bei outline-offset auf dem Seitenhinter-
   grund, und der ist meistens ebenfalls weiß – er verschwände dort. */
/* Skip-Link: nur bei Tastatur-Fokus sichtbar */
.skip-link {
    position: absolute;
    left: .5rem;
    top: -3rem;
    z-index: 2000;
    background: var(--ms-darker);
    color: #fff;
    padding: .6rem 1.1rem;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    transition: top .15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* Nur für Screenreader (visuell versteckt, aber vorlesbar) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Bewegung reduzieren, wenn vom Nutzer gewünscht (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Blau als Textfarbe immer über die Rolle --ms-blue-text, nie direkt über
   --ms-blue: nur so greift der Kontrastmodus (s. :root). */
.text-accent { color: var(--ms-blue-text) !important; }
/* Badges tragen weißen Text – also ebenfalls die Textrolle */
.bg-accent   { background-color: var(--ms-blue-text) !important; }
.bg-soft     { background-color: var(--ms-light) !important; }
/* Auf dunklem Grund kehrt sich das Verhältnis um */
.hero--dark .text-accent,
.section-dark .text-accent,
.site-footer .text-accent { color: var(--ms-blue-on-dark) !important; }

/* --- Buttons ----------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--ms-blue-text);
    --bs-btn-border-color: var(--ms-blue-text);
    --bs-btn-hover-bg: var(--ms-blue-deep);
    --bs-btn-hover-border-color: var(--ms-blue-deep);
    --bs-btn-active-bg: var(--ms-blue-deep);
    --bs-btn-active-border-color: var(--ms-blue-deep);
    --bs-btn-focus-shadow-rgb: var(--ms-blue-text-rgb);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--ms-blue-text);
    --bs-btn-border-color: var(--ms-blue-text);
    --bs-btn-hover-bg: var(--ms-blue-text);
    --bs-btn-hover-border-color: var(--ms-blue-text);
    --bs-btn-active-bg: var(--ms-blue-deep);
    --bs-btn-active-border-color: var(--ms-blue-deep);
    font-weight: 600;
}
.btn { border-radius: 8px; }
.btn-lg { padding: .75rem 1.75rem; }

/* =========================================================================
   HEADER
   ========================================================================= */

/* Top-Bar (schmaler blauer Balken).
   Trägt weißen Text in .82rem – deshalb die Textrolle, die im Kontrastmodus
   nachdunkelt. */
.topbar {
    background: var(--ms-blue-text);
    color: #fff;
    font-size: .82rem;
    /* Über dem Sticky-Header (z-index 1030), damit die Dropdowns
       (Login, Support, Über Uns) nicht vom Header überdeckt werden. */
    position: relative;
    z-index: 1040;
}
.topbar a { color: #fff; opacity: .95; }
.topbar a:hover { opacity: 1; color: #fff; }
.topbar .dropdown-menu { font-size: .9rem; }
.topbar .nav-link { color: #fff; padding: .35rem .7rem; }
.topbar .contact-item { display: inline-flex; align-items: center; gap: .4rem; }
/* Dropdown-Einträge im weißen Menü wieder dunkel (nicht weiß-auf-weiß) */
.topbar .dropdown-item { color: var(--ms-dark); opacity: 1; }
.topbar .dropdown-item:hover,
.topbar .dropdown-item:focus { color: var(--ms-blue-deep); }

/* Sticky Hauptheader */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.site-header .navbar { transition: padding .25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.site-header.is-scrolled .navbar { padding-top: .35rem; padding-bottom: .35rem; }

.navbar-brand img { height: 42px; width: auto; transition: height .25s ease; }
.site-header.is-scrolled .navbar-brand img { height: 36px; }

/* Hauptnav-Links */
.main-nav .nav-link {
    color: var(--ms-dark);
    font-weight: 600;
    padding: .5rem 1rem;
    position: relative;
}
.main-nav .nav-link:hover { color: var(--ms-blue-text); }
.main-nav .nav-item.active > .nav-link { color: var(--ms-blue-text); }
/* Aktiv-Markierung als ::before – Bootstrap nutzt ::after für das Caret der
   Dropdowns. Über ::after wäre der Pfeil bei aktivem Menüpunkt verschwunden. */
.main-nav .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 1.05rem; right: 1.05rem; bottom: .15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ms-blue);
}
/* Bei Dropdowns rechts Platz für das Caret lassen, damit die Linie nicht
   darunter durchläuft. */
.main-nav .nav-item.active > .nav-link.dropdown-toggle::before { right: 1.9rem; }

/* "NEU"-Badge */
.badge-neu {
    background: var(--ms-blue-text);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .15em .45em;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: .3rem;
    text-transform: uppercase;
}

/* Dropdowns */
.dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0,0,0,.12);
    padding: .4rem;
}
.dropdown-item {
    border-radius: 7px;
    font-weight: 500;
    padding: .5rem .8rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ms-blue-soft);
    /* auf der hellen Tönung --ms-blue-soft der dunklere Ton */
    color: var(--ms-blue-deep);
}

/* =========================================================================
   DARSTELLUNGSMENÜ  (Kontrast + Schriftgröße)
   -------------------------------------------------------------------------
   Steht in der Top-Bar (Desktop) und im aufgeklappten Menü (Mobil). Kein
   schwebendes Widget am Bildschirmrand: das würde Inhalte verdecken und mit
   dem Cookie-Banner und dem Nach-oben-Button um denselben Platz streiten.
   ========================================================================= */
.a11y-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: inherit;
    font-weight: 500;
    line-height: 1.4;
    border: 0;
    background: none;
    padding: .35rem .7rem;
}
.a11y-toggle i { font-size: 1.05em; }
/* In der blauen Top-Bar weiß, im weißen Mobilmenü dunkel */
.topbar .a11y-toggle { color: #fff; }
.navbar .a11y-toggle { color: var(--ms-dark); }
.navbar .a11y-toggle:hover { color: var(--ms-blue-text); }

.a11y-panel {
    min-width: 15rem;
    padding: .85rem;
    /* Schrift nicht aus der .82rem-Top-Bar erben – die Optionen müssen in
       jedem Modus gut lesbar bleiben. */
    font-size: .95rem;
    color: var(--ms-dark);
}
.a11y-panel fieldset { border: 0; margin: 0 0 .75rem; padding: 0; }
.a11y-panel legend {
    float: none;                 /* Bootstrap setzt legend auf 100 % Breite */
    width: auto;
    margin-bottom: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ms-gray);
}
.a11y-panel .form-check { margin-bottom: .15rem; padding-left: 1.7rem; }
.a11y-panel .form-check-input { margin-top: .3rem; }
.a11y-panel .form-check-input:checked {
    background-color: var(--ms-blue-text);
    border-color: var(--ms-blue-text);
}
.a11y-panel .form-check-label { cursor: pointer; }
.a11y-panel .a11y-hint {
    margin: 0;
    padding-top: .6rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: .78rem;
    color: var(--ms-gray);
}
/* Ohne JavaScript bewirkt das Menü nichts – dann gar nicht anzeigen. */
html:not(.js) .a11y-menu { display: none; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
    /* Fallback-Verlauf, falls kein Bild gesetzt ist */
    background: linear-gradient(135deg, var(--ms-hero) 0%, #f3f6f9 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* scrollt mit der Seite (nicht fixiert) */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 460px;
    padding: 4.5rem 0;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }
.hero .lead { color: var(--ms-gray); font-size: 1.15rem; }

/* Video-Hintergrund im Hero */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Hero, der den ersten Bildschirm füllt (Startseite).
   Abgezogen wird die Höhe von Header (+ Top-Bar ab lg), damit der Anschluss
   an die nächste Sektion sichtbar bleibt. */
.hero--full { min-height: calc(100vh - 76px); }
@media (min-width: 992px) {
    .hero--full { min-height: calc(100vh - 110px); }
}
/* svh berücksichtigt die ein- und ausfahrende Browserleiste auf Mobilgeräten */
@supports (height: 100svh) {
    .hero--full { min-height: calc(100svh - 76px); }
    @media (min-width: 992px) {
        .hero--full { min-height: calc(100svh - 110px); }
    }
}

/* Scroll-Hinweis am unteren Rand des Vollbild-Heros */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--ms-dark);
    opacity: .75;
    font-size: 1.35rem;
    line-height: 1;
    padding: .5rem;
}
.hero-scroll:hover { opacity: 1; color: var(--ms-blue-text); }

/* Wer weniger Bewegung möchte, sieht statt des Videos das Posterbild
   (liegt als Hintergrundbild der Sektion darunter). */
@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
    /* Ohne Video gibt es nichts anzuhalten – Schalter ausblenden. */
    .hero-video-toggle { display: none !important; }
}

/* Pause-Schalter für das Hero-Video (WCAG 2.2.2).
   Bewusst dezent, aber mit ausreichendem Kontrast und 44x44 px Zielfläche
   (WCAG 2.5.8 Zielgröße). */
.hero-video-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(37, 37, 37, .78);
    color: #fff;
    font-size: .95rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease;
}
.hero-video-toggle:hover { background: var(--ms-darker); }
/* Kein eigener weißer Ring mehr: Der Schalter liegt über einem Video, dessen
   Helligkeit sich laufend ändert – Weiß wäre auf hellen Bildern verschwunden.
   Es gilt der zweifarbige Ring aus :focus-visible, der beides abdeckt. */
@media (min-width: 992px) {
    .hero-video-toggle { right: 1.5rem; bottom: 1.5rem; }
}

/* Lese-Schleier über dem Hintergrundbild/-video (Textseite) */
.hero--light::before,
.hero--dark::before,
.hero--video::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
/* Grauer Farbverlauf über dem Video/Bild – macht es dezenter, hält dunklen Text
   lesbar. Die ersten beiden Stopps sind Variablen: im Kontrastmodus werden sie
   heller, weil Eyebrow und Text oben links sitzen und dort auch das Blau
   noch 4,5:1 erreichen muss (bei .97 über dem hellsten denkbaren Videobild
   sind es 5,22:1). */
.hero--video::before {
    background: linear-gradient(135deg,
        var(--ms-scrim-a) 0%,
        var(--ms-scrim-b) 55%,
        rgba(168, 174, 183, .78) 100%);
}
/* Helles Bild -> dunkler Text bleibt, dezenter weißer Verlauf links */
.hero--light::before {
    background: linear-gradient(90deg,
        rgba(255,255,255,.82) 0%,
        rgba(255,255,255,.45) 45%,
        rgba(255,255,255,0) 78%);
}
/* Dunkles Bild -> weißer Text, dunkler Verlauf links für Kontrast */
.hero--dark { color: #fff; }
.hero--dark h1 { color: #fff; }
.hero--dark .lead { color: rgba(255,255,255,.88); }
.hero--dark .aktion-line { color: #fff; }
.hero--dark .text-secondary { color: rgba(255,255,255,.8) !important; }
.hero--dark::before {
    background: linear-gradient(90deg,
        rgba(15,20,32,.88) 0%,
        rgba(15,20,32,.62) 45%,
        rgba(15,20,32,.15) 80%);
}

/* Bildplatzhalter rechts (4 Rastereinheiten) */
.hero-figure {
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: 16px;
    border: 2px dashed rgba(45,45,45,.25);
    background: rgba(255,255,255,.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    color: var(--ms-gray);
    text-align: center;
}
.hero-figure i { font-size: 2.6rem; opacity: .6; }
.hero-figure span { font-size: .85rem; font-weight: 500; }
.hero--dark .hero-figure {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.4);
    color: rgba(255,255,255,.85);
}

/* Domain-Suchfeld */
.domain-search .form-control {
    border: 1px solid #dfe4ea;
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: .9rem 1.1rem;
    font-size: 1.05rem;
}
.domain-search .form-control:focus {
    box-shadow: none;
    border-color: var(--ms-blue);
}
.domain-search .btn {
    border-radius: 0 10px 10px 0;
    padding-left: 1.4rem; padding-right: 1.4rem;
}
.aktion-line { font-size: .95rem; color: var(--ms-dark); }
.aktion-line .sep { color: #c9ced4; margin: 0 .35rem; }

/* =========================================================================
   SECTIONS / CARDS
   ========================================================================= */
.section { padding: 4.5rem 0; }
.section-title { margin-bottom: 2.5rem; }

/* Section mit Hintergrundbild (optional mit abschwächendem Overlay) */
.section-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* scrollt mit der Seite (nicht fixiert) */
}
.section-bg > .container { position: relative; z-index: 1; }
.section-bg--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* heller Schleier – schwächt das Bild ab, hält Text/Karten lesbar */
    background: rgba(255, 255, 255, .82);
}

/* Dekorativer blauer Unterstrich unter Hauptüberschriften */
.heading-accent { padding-bottom: .2rem; }
.heading-accent::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: var(--ms-blue);
    margin-top: .8rem;
}
/* zentriert, wenn die Überschrift zentriert ausgerichtet ist */
.text-center .heading-accent::after,
.heading-accent.text-center::after { margin-left: auto; margin-right: auto; }

/* Eyebrow / Kicker – kleines blaues Label über Überschriften */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    /* kleiner, aber echter Text – daher die Textrolle */
    color: var(--ms-blue-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    margin-bottom: .75rem;
}
.eyebrow::before {
    content: "";
    width: 26px; height: 3px;
    border-radius: 99px;
    background: var(--ms-blue);
}
.text-center .eyebrow { justify-content: center; }
.hero--dark .eyebrow { color: #fff; }
.hero--dark .eyebrow::before { background: #fff; }

/* Check-Liste (Häkchen in Markenfarbe) */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--ms-blue);
    position: absolute; left: 0; top: .15rem;
}

/* Kennzahl-Karten */
.stat-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    height: 100%;
}
.stat-card strong { display: block; color: var(--ms-blue); font-size: 1.5rem; line-height: 1.1; margin-bottom: .2rem; }
.stat-card span { color: var(--ms-gray); font-size: .88rem; }

/* Akzent-Panel (blauer Verlauf, weiße Schrift) */
/* Weiße Schrift auf Blau: Verlauf aus den Textrollen, nicht aus --ms-blue */
.panel-accent {
    background: linear-gradient(135deg, var(--ms-blue-text), var(--ms-blue-deep));
    color: #fff;
    border-radius: 18px;
    padding: 2.5rem;
    height: 100%;
}
.panel-accent h2, .panel-accent h3 { color: #fff; }
.panel-accent .check-list li::before { color: #fff; }

/* Info-Badge (Hero-Chips) */
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #fff;
    color: var(--ms-dark);
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: .5rem .85rem;
    font-size: .88rem;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.hero-badge i { color: var(--ms-blue); }

/* Shop-iFrames (KIS) – ohne umrahmten Kasten, direkt eingebettet */
.shop-embed {
    width: 100%;
    border: 0;
    display: block;
    min-height: 200px; /* kleiner Fallback, bis das Resize-Script die echte Höhe meldet */
}

/* Klickbare Vorschaubilder (zoombar) – ohne Rahmen */
.zoomable {
    display: block;
    cursor: zoom-in;
}
.zoomable img {
    width: 100%;
    height: auto;
    border: 0;
    transition: transform .25s ease;
}
.zoomable:hover img { transform: scale(1.02); }
.zoomable:focus-visible { outline-offset: 2px; }

/* Lightbox-Overlay */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 20, 32, .9);
    cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
    max-width: 95%;
    max-height: 90%;
    border: 0;         /* kein Rahmen */
}
.lightbox__close {
    position: absolute;
    top: 1rem; right: 1.25rem;
    width: 46px; height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox__close:hover { background: var(--ms-blue); }

/* Leistungs-Kachel */
.service-card {
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    height: 100%;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(45,45,45,.10);
    border-color: transparent;
}
.service-icon {
    width: 62px; height: 62px;
    border-radius: 14px;
    background: var(--ms-blue-soft);
    color: var(--ms-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
}

/* Feature-Item (Domainangebot-Grid) */
.feature-box {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 18px;
    padding: 2rem;
}
.feature-item { display: flex; gap: 1rem; align-items: flex-start; }
.feature-item .fi-icon {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--ms-blue-soft);
    color: var(--ms-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.feature-item h3 { font-size: 1.05rem; margin-bottom: .1rem; }
.feature-item p { margin: 0; color: var(--ms-gray); font-size: .9rem; }

/* Text-Icon-Absatz (Domainangebot links) */
.info-row { display: flex; gap: 1rem; margin-bottom: 1.4rem; }
.info-row .ir-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--ms-darker);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.info-row p { margin: 0; color: var(--ms-gray); }

/* CTA-Band */
.cta-band {
    background: linear-gradient(135deg, var(--ms-blue-text), var(--ms-blue-deep));
    color: #fff;
    border-radius: 22px;
    padding: 3rem;
}
.cta-band h2 { color: #fff; }
/* weißer Button im blauen Band – Schrift im dunkleren Ton */
.cta-band .btn-light { color: var(--ms-blue-deep); font-weight: 700; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
    background: var(--ms-darker);
    color: #c9ccd1;
    padding: 3.5rem 0 1.5rem;
}
.site-footer .footer-heading {
    /* auf dunklem Grund gilt die eigene Rolle – im Kontrastmodus wird sie heller */
    color: var(--ms-blue-on-dark);
    font-size: 1.05rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
.site-footer a { color: #b7bbc2; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-logo { height: 40px; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: .55rem; font-size: .92rem; }

/* Support & Beratung: Icon + Label + Wert */
.footer-support li { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; }
.footer-support li > i { color: var(--ms-blue); font-size: 1.35rem; width: 26px; text-align: center; margin-top: .15rem; }
.footer-support .support-label { display: block; color: #fff; font-weight: 600; font-size: .9rem; }

/* Kompaktes Domain-Suchfeld */
.footer-search .form-control {
    border: none;
    border-radius: 6px 0 0 6px;
    padding: .6rem .9rem;
}
.footer-search .form-control:focus { box-shadow: none; }
.footer-search .btn { border-radius: 0 6px 6px 0; }

/* Hosttest-Auszeichnungen */
.footer-badges { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-bottom: 1.5rem; }
.footer-badges img { height: 74px; width: auto; border-radius: 6px; }

/* Social-Icons */
.footer-social { display: flex; gap: .6rem; }
.footer-social li { margin: 0; }
.footer-social a {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08);
    border-radius: 8px;
    color: #c9ccd1;
    transition: background .2s ease, color .2s ease;
}
.footer-social a:hover { background: var(--ms-blue); color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    font-size: .85rem;
    color: #9a9ea6;
    text-align: center;
}

/* Widerrufsschaltfläche im Footer – muss deutlich lesbar und leicht
   zugänglich sein, deshalb abgesetzt und nicht als Fließtext-Link. */
.footer-widerruf {
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 2rem;
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}
.footer-widerruf p { color: #b7bbc2; max-width: 46rem; }
/* Gestalterisch bewusst zurückhaltend: gleiche Formensprache wie die übrigen
   Footer-Schaltflächen (Umriss auf dunklem Grund, füllt sich beim Zeigen).
   Der frühere weiße Block wirkte wie ein Fremdkörper. Leicht auffindbar
   bleibt sie trotzdem – eigener, abgetrennter Bereich mit Erklärtext. */
.btn-widerruf {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    font-weight: 600;
    padding: .55rem 1.25rem;
    white-space: nowrap;
}
.btn-widerruf:hover,
.btn-widerruf:focus {
    background: #fff;
    border-color: #fff;
    color: var(--ms-dark);
}

.footer-cookie-link {
    color: #9a9ea6;
    text-decoration: underline;
    font-size: .85rem;
    vertical-align: baseline;
}
.footer-cookie-link:hover { color: #fff; }

/* =========================================================================
   NACH-OBEN-BUTTON
   ========================================================================= */
.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1035;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
    /* Weiß auf --ms-blue ergäbe nur 3,89:1. Für ein reines Symbol reichte das
       (WCAG 1.4.11), aber im Rest des Stylesheets gilt: weiße Schrift auf Blau
       nutzt die Textrolle. Bleibt es dabei, muss man diese Ausnahme nicht
       jedes Mal neu nachschlagen. */
    background: var(--ms-blue-text);
    /* Standard: unsichtbar und nicht fokussierbar, bis gescrollt wurde */
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ms-blue-deep); color: #fff; }
.to-top:focus-visible { outline-offset: 3px; }
/* Platz für das Cookie-Banner am unteren Rand */
@media (max-width: 575.98px) {
    .to-top { right: .85rem; bottom: .85rem; width: 44px; height: 44px; }
}

/* =========================================================================
   PREISRECHNER UND PREISTABELLEN (kosten.php)
   ========================================================================= */
/* Tarifumschalter */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ms-blue-text);
    --bs-nav-pills-border-radius: 999px;
}
.nav-pills .nav-link {
    color: var(--ms-darker);
    font-weight: 600;
    padding: .6rem 1.6rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    margin: 0 .25rem;
}
.nav-pills .nav-link:hover { color: var(--ms-blue-text); }
.nav-pills .nav-link.active { border-color: var(--ms-blue-text); color: #fff; }

.rechner-box {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.rechner-zeile {
    display: grid;
    /* Beschriftung – Eingabe – Betrag. Der Betrag steht rechtsbündig in einer
       eigenen Spalte fester Breite, damit die Beträge untereinander fluchten
       und beim Schieben nicht springen. */
    grid-template-columns: 1fr 6.5rem;
    gap: .35rem 1rem;
    align-items: center;
    padding: .9rem 0;
    border-bottom: 1px solid #eef0f2;
}
.rechner-zeile:last-child { border-bottom: 0; }
.rechner-zeile--regler { grid-template-areas: "label betrag" "eingabe eingabe"; }
.rechner-zeile--regler .rechner-label  { grid-area: label; }
.rechner-zeile--regler .rechner-betrag { grid-area: betrag; }
.rechner-zeile--regler .rechner-eingabe { grid-area: eingabe; }

.rechner-label { font-weight: 600; color: var(--ms-darker); }
.rechner-stueckpreis {
    display: block;
    font-weight: 400;
    font-size: .82rem;
    color: var(--ms-gray);
}
.rechner-betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;   /* gleiche Ziffernbreite: kein Zappeln */
    font-weight: 600;
    color: var(--ms-blue-text);
}

.rechner-eingabe { display: flex; align-items: center; gap: 1rem; }
.rechner-eingabe .form-range { flex: 1 1 auto; }
.rechner-zahl {
    flex: 0 0 5.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Bootstrap färbt den Reglerknopf über --bs-primary, das oben bereits auf das
   Markenblau steht. Die Schiene bekommt hier nur etwas mehr Kontrast, damit
   sie auf Weiß nicht verschwindet. */
.form-range::-webkit-slider-runnable-track { background: #dfe3e8; }
.form-range::-moz-range-track { background: #dfe3e8; }

.rechner-summe {
    background: var(--ms-blue-soft);
    border-radius: 14px;
    padding: 1.5rem;
    height: 100%;
    color: var(--ms-gray);
}
.rechner-gesamt-label { font-weight: 600; color: var(--ms-darker); }
.rechner-gesamt {
    font-family: 'Roboto', 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ms-blue-text);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0;
}

/* Preistabelle in den Tarifkarten */
.preis-tabelle { font-size: .9rem; }
.preis-tabelle th { color: var(--ms-gray); font-weight: 600; font-size: .8rem; }
.preis-tabelle td { color: var(--ms-dark); }

/* Rechenbeispiele: Menge und Beschreibung nebeneinander */
.beispiel-liste { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; margin: 0; }
.beispiel-liste dt { font-weight: 700; color: var(--ms-blue-text); white-space: nowrap; }
.beispiel-liste dd { margin: 0; color: var(--ms-gray); font-size: .9rem; }

@media (max-width: 575.98px) {
    .rechner-box { padding: 1.25rem; }
    .rechner-eingabe { flex-wrap: wrap; }
    .rechner-zahl { flex: 1 1 100%; text-align: left; }
}

/* =========================================================================
   AKKORDEON (faq.php)
   -------------------------------------------------------------------------
   Bootstrap bringt die Mechanik mit; hier werden nur die Farben auf das Theme
   gesetzt. Der Pfeil ist bei Bootstrap ein Hintergrundbild mit fest kodierter
   Farbe – deshalb --bs-accordion-btn-icon und -active-icon als eigene
   Daten-URI, sonst bliebe er im Bootstrap-Blau stehen.

   Diese eine Farbe folgt dem Kontrastmodus nicht: In einer Daten-URI lässt
   sich keine CSS-Variable einsetzen. Sie muss es auch nicht – für ein reines
   Symbol gilt die 3:1-Grenze aus WCAG 1.4.11, und mit 4,76:1 auf
   --ms-blue-soft liegt der Pfeil in beiden Modi darüber.
   ========================================================================= */
.faq-accordion {
    --bs-accordion-border-color: #e5e7eb;
    --bs-accordion-border-radius: 14px;
    --bs-accordion-inner-border-radius: 13px;
    --bs-accordion-btn-padding-y: 1.1rem;
    --bs-accordion-btn-color: var(--ms-darker);
    --bs-accordion-btn-bg: #fff;
    --bs-accordion-active-color: var(--ms-blue-text);
    --bs-accordion-active-bg: var(--ms-blue-soft);
    --bs-accordion-btn-focus-box-shadow: none;   /* der globale Fokusring genügt */
    --bs-accordion-body-padding-y: 1.35rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232d2d2d'%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");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231173b9'%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");
}
.faq-accordion .accordion-item { margin-bottom: .75rem; border-radius: var(--bs-accordion-border-radius); }
.faq-accordion .accordion-button {
    font-family: 'Roboto', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
}
.faq-accordion .accordion-body p:last-child,
.faq-accordion .accordion-body ul:last-child { margin-bottom: 0; }
.faq-accordion .accordion-body { color: var(--ms-gray); }
/* Aufzählungen in den Antworten sind enger gesetzt als im Fließtext */
.faq-accordion .accordion-body .check-list li { margin-bottom: .45rem; }

/* =========================================================================
   RECHTSTEXTE (Impressum, Datenschutz, AGB, Widerrufsinformationen)
   ========================================================================= */
/* Reine Fließtextseiten. Sie brauchen keine Karten und keine Farbflächen,
   sondern begrenzte Zeilenlänge und deutliche Abstände – daran erkennt man
   die Gliederung auch ohne Rahmen. */
.legal-text > section + section { margin-top: 2.75rem; }
.legal-text h2 { font-size: 1.35rem; margin-bottom: .75rem; }
.legal-text h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
/* 68 Zeichen je Zeile – darüber verliert das Auge beim Rücksprung die Zeile
   (WCAG 1.4.8 empfiehlt maximal 80). */
.legal-text p,
.legal-text li { max-width: 68ch; }
.legal-text dl { margin: 0; }
.legal-text dt {
    color: var(--ms-gray);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.legal-text dd { margin: 0 0 1rem; }

/* Geltungsbereich-Kasten der Rechtsseiten (includes/legal-geltung.php):
   Domain-Liste zweispaltig im schmalen Kasten. */
.legal-domains {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 1rem;
    color: var(--ms-gray);
}
.legal-domains li {
    padding: .15rem 0;
    break-inside: avoid;
}

/* Inhaltsverzeichnis in der Randspalte */
.legal-toc { position: sticky; top: 110px; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; }
.legal-toc li { margin-bottom: .5rem; }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover,
.legal-toc a:focus { text-decoration: underline; }

/* Nummerierung per CSS-Zähler – nur dort, wo die Nummer nicht schon in der
   Beschriftung steht. Die AGB heißen bereits „§ 1 …“, ein zusätzliches „1. “
   davor wäre doppelt. */
.legal-toc--numbered ol { counter-reset: toc; }
.legal-toc--numbered li { counter-increment: toc; }
.legal-toc--numbered a::before { content: counter(toc) ". "; color: var(--ms-gray); }

/* Über die Rechtstexte-API gelieferter Text. Die Gliederung kommt von dort und
   besteht aus Überschriften statt aus <section>-Blöcken – der Abstand zwischen
   den Abschnitten muss deshalb an der Überschrift hängen. Alles andere
   (Zeilenlänge, Schriftgrößen) erbt der Block von .legal-text, weil er darin
   liegt. */
.legal-sync h2 { margin-top: 2.75rem; }
.legal-sync > :first-child,
.legal-sync > :first-child h2 { margin-top: 0; }

/* Aufzählungen im gelieferten Text: includes/rechtstexte.php löst die
   Word-Nummerierung („1.1“ plus &nbsp;-Kette) in .legal-enum-marker auf.
   Die Nummer steht in einer eigenen Spalte fester Breite, Umbruchzeilen
   beginnen dadurch bündig unter dem Text. Feste rem-Maße, damit die
   Textkante über alle Ebenen und Schriftgrößen hinweg dieselbe bleibt. */
.legal-sync .legal-enum {
    position: relative;
    padding-left: 2.75rem;
}
.legal-sync .legal-enum-marker {
    position: absolute;
    left: 0;
}
/* Buchstaben (a, b, …) und Spiegelpunkte: eine Ebene tiefer; sub2 für
   Punkte, die im Dokument noch unter einem Spiegelpunkt hängen */
.legal-sync .legal-enum-sub { margin-left: 2.75rem; }
.legal-sync .legal-enum-sub2 { margin-left: 5.5rem; }

/* Titelzeilen des gelieferten Textes: im Word-Dokument zentriert, hier soll
   alles linksbündig auf der Textkante stehen. !important, weil Bootstraps
   .text-center selbst mit !important zentriert. */
.legal-sync .text-center { text-align: left !important; }

/* Noch nicht gelieferter Text. Bewusst sichtbar: eine Lücke in einem
   Rechtstext fällt niemandem auf, ein Platzhalter schon. Vor dem Livegang
   darf keine .legal-pending mehr im Quelltext stehen. */
.legal-pending {
    border-left: 3px solid var(--ms-blue);
    background: var(--ms-blue-soft);
    padding: .6rem .9rem;
    margin: 0;
    color: var(--ms-dark);
    font-size: .92rem;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
    .main-nav .nav-item.active > .nav-link::before { display: none; }
    /* Blaue Akzentlinie oben – ersetzt die mobil ausgeblendete Info-Leiste */
    .site-header { border-top: 3px solid var(--ms-blue); }
    .hero { padding: 3rem 0; min-height: 380px; }
    .navbar-collapse {
        margin-top: .75rem;
        border-top: 1px solid #eef0f2;
        padding-top: .5rem;
    }
    /* Einspaltig steht das Inhaltsverzeichnis über dem Text – mitscrollen
       würde es dort nur im Weg sein. */
    .legal-toc { position: static; }
}