/* WV – Überarbeitete Fassung 21.09.2026
   Menü-IDs: Start 101, Verband 111, Wasserversorgung 112,
   Zukunft & Digitalisierung 113, Aktuelles 114, Kontakt 115,
   Impressum 107, Datenschutz 108.
   Site-Modul 120 (Startseite Aktuelles): in Joomla unveröffentlichen.
   Korrigiert: margin-Semikolon, Menü-Zuordnung, Safe-Area-Fallbacks.
   Ergänzt: reduzierte Bewegung für bestehende WV-Übergänge.
   Alle übrigen Selektoren, Modulpositionen und Bildpfade bleiben erhalten.
*/

/* =========================================================
   Wasserverband Knoblauchsland
   FINALER Header-/Navigations-Stand
   Joomla 6.1.3 | Helix Ultimate 2.2.10

   Verbindliche Struktur im Helix Layout Builder:
   - Section Title: wv-servicebar
     Positionen: logo | wv-service-desktop
   - Section Title: header
     Position: menu

   WICHTIG:
   - Helix "Compress CSS Files" muss in 2.2.10 AUS sein.
   - Diese Datei ersetzt den bisherigen Inhalt von custom.css komplett.
   ========================================================= */

/* =========================================================
   WV GLOBALE BUTTONS

   Referenz:
   Servicebar

   Verbindliche Geometrie:
   Höhe        36 px
   Padding     0 13 px
   Radius      5 px
   Schrift     14 px / 600
   ========================================================= */


/* =========================================================
   GEMEINSAME BASIS
   ========================================================= */

.wv-btn-primary,
.wv-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 36px;
    min-height: 36px;

    padding: 0 13px;

    box-sizing: border-box;

    border-radius: 5px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;

    text-decoration: none !important;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}


/* =========================================================
   PRIMARY

   Gefüllter CTA
   ========================================================= */

.wv-btn-primary {
    color: #ffffff !important;

    background: var(--wv-blue);

    border: 1px solid var(--wv-blue);
}

.wv-btn-primary:hover,
.wv-btn-primary:focus {
    color: #ffffff !important;

    background: #2f95b2;

    border-color: #2f95b2;

    text-decoration: none !important;
}

.wv-btn-primary:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}


/* =========================================================
   OUTLINE

   Weiße Fläche mit blauer Kontur.
   Hover wie bei der Störungsnummer.
   ========================================================= */

.wv-btn-outline {
    color: var(--wv-blue) !important;

    background: #ffffff;

    border: 1px solid var(--wv-blue);
}

.wv-btn-outline:hover,
.wv-btn-outline:focus {
    color: var(--wv-blue) !important;

    background: rgba(56, 164, 194, 0.08);

    border-color: var(--wv-blue);

    text-decoration: none !important;
}

.wv-btn-outline:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}


/* =========================================================
   MOBILE

   Keine abweichende Button-Geometrie.
   ========================================================= */

@media (max-width: 575.98px) {

    .wv-btn-primary,
    .wv-btn-outline {
        height: 36px;
        min-height: 36px;

        padding: 0 13px;

        font-size: 14px;
    }

}

/* =========================================================
   WV DESIGN-VARIABLEN
   ========================================================= */

:root {
    --wv-blue: #38a4c2;
    --wv-green: #6aae30;
    --wv-green-light: #80cc28;
    --wv-earth: #ad9267;
    --wv-beige: #d4c3a7;
    --wv-ink: #2f3639;
    --wv-muted: #667176;
    --wv-line: #e6ebed;
    --wv-line-soft: #f0f3f4;

    --wv-servicebar-height: 74px;
    --wv-header-height: 52px;
    --wv-header-height-mobile: 72px;


    /* =====================================================
       WV TYPOGRAFIE-SYSTEM
       ===================================================== */

    --wv-font-meta: 13px;
    --wv-font-body: 15px;
    --wv-font-intro: 16px;
    --wv-font-lead: 19px;
    --wv-font-h3: 22px;
    --wv-font-h2: 38px;
}


/* =========================================================
   WV TYPOGRAFIE-SYSTEM – MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    :root {
        --wv-font-meta: 11px;
        --wv-font-body: 14px;
        --wv-font-intro: 15px;
        --wv-font-lead: 17px;
        --wv-font-h3: 18px;
        --wv-font-h2: 30px;
    }

}

/* =========================================================
   2. SERVICEBAR
   Helix Section Title "wv-servicebar"
   erzeugt die ID #sp-wv-servicebar
   ========================================================= */

#sp-wv-servicebar {
    height: var(--wv-servicebar-height) !important;
    min-height: var(--wv-servicebar-height) !important;
    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff;
    border-bottom: 0;
}

#sp-wv-servicebar > .container,
#sp-wv-servicebar > .container > .container-inner,
#sp-wv-servicebar > .container > .container-inner > .row {
    height: 100%;
    min-height: 0;
}

#sp-wv-servicebar > .container > .container-inner > .row {
    align-items: center;
}


/* ---------------------------------------------------------
   Logo-Position
   Die Logo-Höhe selbst wird in Helix eingestellt:
   Desktop 62 px | Tablet 46 px | Mobile 46 px
   --------------------------------------------------------- */

#sp-wv-servicebar #sp-logo {
    height: 100%;
}

#sp-wv-servicebar #sp-logo > .sp-column {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    height: 100%;

    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#sp-wv-servicebar #sp-logo .logo,
#sp-wv-servicebar #sp-logo .logo > a {
    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 0;

    line-height: 1;
}

#sp-wv-servicebar #sp-logo .logo-image {
    display: block;
    width: auto;
    max-width: 100%;
}


/* ---------------------------------------------------------
   Desktop-Serviceposition
   --------------------------------------------------------- */

#sp-wv-servicebar #sp-wv-service-desktop {
    height: 100%;
}

#sp-wv-servicebar #sp-wv-service-desktop > .sp-column {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    height: 100%;

    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#sp-wv-service-desktop .sp-module,
#sp-wv-service-desktop .sp-module-content {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   3. DESKTOP-SERVICEMENÜ
   Joomla-Modul: "Serviceleiste Desktop"
   Menü: "Service"
   Position: wv-service-desktop
   ========================================================= */

#sp-wv-service-desktop .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

#sp-wv-service-desktop .mod-menu > li {
    margin: 0;
    padding: 0;
}

#sp-wv-service-desktop .mod-menu > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 36px;
    min-height: 36px;

    padding: 0 13px;

    box-sizing: border-box;

    border: 1px solid currentColor;
    border-radius: 5px;

    background: #ffffff;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}


/* Joomla 6 rendert Menüicons als span und gibt ihnen
   Bootstrap-Paddingklassen. Dieses Padding wird hier bewusst
   auf unseren festen Icon-Abstand zurückgesetzt. */

#sp-wv-service-desktop .mod-menu > li > a > span[aria-hidden="true"] {
    margin: 0 !important;
    padding: 0 6px 0 0 !important;

    font-size: 14px;
    line-height: 1;

    color: currentColor;
}


/* Störungsnummer */

#sp-wv-service-desktop .wv-emergency-link {
    color: var(--wv-blue);
}

#sp-wv-service-desktop .wv-emergency-link:hover,
#sp-wv-service-desktop .wv-emergency-link:focus-visible,
#sp-wv-service-desktop .mod-menu > li.current > .wv-emergency-link,
#sp-wv-service-desktop .mod-menu > li.active > .wv-emergency-link {
    color: var(--wv-blue);
    border-color: var(--wv-blue);
    background: rgba(56, 164, 194, 0.08);
}


/* Mitgliederbereich */

#sp-wv-service-desktop .wv-member-link {
    color: var(--wv-green);
}

#sp-wv-service-desktop .wv-member-link:hover,
#sp-wv-service-desktop .wv-member-link:focus-visible,
#sp-wv-service-desktop .mod-menu > li.current > .wv-member-link,
#sp-wv-service-desktop .mod-menu > li.active > .wv-member-link {
    color: var(--wv-green);
    border-color: var(--wv-green);
    background: rgba(106, 174, 48, 0.09);
}


/* Tastaturfokus */

#sp-wv-service-desktop .mod-menu > li > a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* =========================================================
   4. HAUPTHEADER / NAVIGATION
   Helix Section Title MUSS exakt "header" heißen.
   Dadurch entsteht #sp-header und Helix behandelt die
   Zeile als Header inkl. Sticky-/Menu-/Offcanvas-Logik.
   ========================================================= */

#sp-header {
    height: var(--wv-header-height) !important;
    min-height: var(--wv-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff;

    border-bottom: 1px solid var(--wv-line);

    box-shadow: none !important;
}

#sp-header > .container,
#sp-header > .container > .container-inner,
#sp-header > .container > .container-inner > .row,
#sp-header #sp-menu,
#sp-header #sp-menu > .sp-column,
#sp-header #sp-menu .sp-megamenu-wrapper {
    height: 100%;
}

#sp-header > .container > .container-inner > .row {
    align-items: stretch;
}

#sp-header #sp-menu {
    padding-top: 0;
    padding-bottom: 0;
}

#sp-header #sp-menu > .sp-column {
    display: flex;
    align-items: stretch;
    justify-content: center !important;

    width: 100%;
}

#sp-header #sp-menu .sp-megamenu-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center !important;

    width: 100%;
}


/* =========================================================
   5. HAUPTMENÜ – DESKTOP
   Helix nutzt d-lg-block => Desktop-Menü ab 992 px.
   ========================================================= */

@media (min-width: 992px) {

    #sp-header .sp-megamenu-parent {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: center;

        float: none !important;

        height: 100%;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap;
    }

    #sp-header .sp-megamenu-parent > li {
        position: relative;

        display: flex;
        align-items: stretch;

        height: 100%;

        margin: 0;
        padding: 0;
    }

    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        height: 100%;

        margin: 0;
        padding: 0 17px !important;

        background: transparent !important;

        color: var(--wv-ink) !important;

        font-size: 16px;
        font-weight: 500;
        line-height: 1 !important;

        text-decoration: none;
        white-space: nowrap;

        transition: color 0.18s ease;
    }


    /* -----------------------------------------------------
       Desktop-Hauptmenü bewusst OHNE Icons.
       Selbst falls in Helix/Joomla versehentlich noch ein
       Menüicon hinterlegt ist, wird es am Desktop ausgeblendet.
       Die wv-nav-icon-* Linkklassen bleiben bestehen und werden
       ausschließlich im Offcanvas-Menü für Lucide-Icons genutzt.
       ----------------------------------------------------- */

    #sp-header .sp-megamenu-parent > li > a > span[aria-hidden="true"],
    #sp-header .sp-megamenu-parent > li > span > span[aria-hidden="true"],
    #sp-header .sp-megamenu-parent > li > a > span[class*="fa-"],
    #sp-header .sp-megamenu-parent > li > span > span[class*="fa-"] {
        display: none !important;
    }


    /* Unterlinie bewusst am li, NICHT an a::after.
       Helix verwendet a::after für Dropdown-Pfeile. */

    #sp-header .sp-megamenu-parent > li::after {
        content: "";

        position: absolute;
        z-index: 2;

        left: 15px;
        right: 15px;
        bottom: -1px;

        height: 2px;

        background: var(--wv-blue);

        transform: scaleX(0);
        transform-origin: center;

        transition: transform 0.18s ease;

        pointer-events: none;
    }


    /* Hover / Tastatur */

    #sp-header .sp-megamenu-parent > li:hover > a,
    #sp-header .sp-megamenu-parent > li:hover > span,
    #sp-header .sp-megamenu-parent > li:focus-within > a,
    #sp-header .sp-megamenu-parent > li:focus-within > span {
        color: var(--wv-blue) !important;
        background: transparent !important;
    }

    #sp-header .sp-megamenu-parent > li:hover::after,
    #sp-header .sp-megamenu-parent > li:focus-within::after {
        transform: scaleX(1);
    }


    /* Aktiver Menüpunkt:
       Helix 2.2.10 verwendet .current-item und .active. */

    #sp-header .sp-megamenu-parent > li.current-item > a,
    #sp-header .sp-megamenu-parent > li.current-item > span,
    #sp-header .sp-megamenu-parent > li.active > a,
    #sp-header .sp-megamenu-parent > li.active > span {
        color: var(--wv-blue) !important;
        background: transparent !important;

        font-weight: 600;
    }

    #sp-header .sp-megamenu-parent > li.current-item::after,
    #sp-header .sp-megamenu-parent > li.active::after {
        transform: scaleX(1);
    }

    /* Sichtbarer Tastaturfokus ohne Layoutverschiebung */

    #sp-header .sp-megamenu-parent > li > a:focus-visible {
        outline: 2px solid var(--wv-blue);
        outline-offset: -4px;
        border-radius: 2px;
    }
}


/* =========================================================
   6. STICKY-ZUSTAND
   Nur #sp-header wird sticky; die Servicebar scrollt normal weg.
   ========================================================= */

#sp-header.header-sticky {
    border-bottom-color: transparent;

    box-shadow:
        0 5px 18px rgba(25, 44, 52, 0.09) !important;
}


/* =========================================================
   7. OFFCANVAS – LUCIDE ICONS FÜR DAS HAUPTMENÜ

   Desktop bleibt bewusst iconfrei.
   Für die sechs Hauptmenüpunkte werden in Joomla/Helix
   folgende Link-CSS-Klassen verwendet:

   Start                     wv-nav-icon-house
   Der Verband               wv-nav-icon-users
   Wasserversorgung          wv-nav-icon-droplet
   Zukunft & Digitalisierung wv-nav-icon-monitor-cog
   Aktuelles                 wv-nav-icon-newspaper
   Kontakt                   wv-nav-icon-mail

   Die Klassen liegen direkt auf dem <a>-Element.
   Im Offcanvas erzeugen sie jeweils ein Lucide-Line-Icon.
   ========================================================= */


/* =========================================================
   OFFCANVAS – HAUPTNAVIGATION
   ========================================================= */


/* ---------------------------------------------------------
   Grundlayout der sechs Hauptmenüpunkte
   --------------------------------------------------------- */

.offcanvas-menu .offcanvas-inner ul.menu > li > a[class*="wv-nav-icon-"] {
    display: flex !important;
    align-items: center;

    gap: 12px;

    min-height: 46px;

    padding: 11px 12px 11px 14px !important;

    box-sizing: border-box;

    border-radius: 4px;

    color: #4b5155;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;

    opacity: 1 !important;

    text-decoration: none;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}


/* ---------------------------------------------------------
   Lucide-Icons
   --------------------------------------------------------- */

.offcanvas-menu .offcanvas-inner ul.menu > li > a[class*="wv-nav-icon-"]::before {
    content: "";

    display: block;

    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    background-color: currentColor;

    -webkit-mask-image: var(--wv-nav-icon);
    mask-image: var(--wv-nav-icon);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    opacity: 0.82;

    transition: opacity 0.18s ease;
}


/* ---------------------------------------------------------
   Aktiver Menüpunkt
   Linker Balken liegt als inset box-shadow direkt am
   Hauptmenü-Link. Dadurch kann er NICHT versehentlich auf
   das separate Modul "Service Offcanvas" übergreifen.
   --------------------------------------------------------- */

.offcanvas-menu .offcanvas-inner ul.menu > li.active > a[class*="wv-nav-icon-"],
.offcanvas-menu .offcanvas-inner ul.menu > li.current > a[class*="wv-nav-icon-"],
.offcanvas-menu .offcanvas-inner ul.menu > li.current-item > a[class*="wv-nav-icon-"] {
    color: var(--wv-blue);

    background-color: rgba(56, 164, 194, 0.07);

    box-shadow: inset 3px 0 0 var(--wv-blue);

    font-weight: 600;
}


.offcanvas-menu .offcanvas-inner ul.menu > li.active > a[class*="wv-nav-icon-"]::before,
.offcanvas-menu .offcanvas-inner ul.menu > li.current > a[class*="wv-nav-icon-"]::before,
.offcanvas-menu .offcanvas-inner ul.menu > li.current-item > a[class*="wv-nav-icon-"]::before {
    opacity: 1;
}


/* ---------------------------------------------------------
   Hover / Tastaturfokus
   --------------------------------------------------------- */

@media (hover: hover) {

    .offcanvas-menu .offcanvas-inner ul.menu > li:not(.active):not(.current):not(.current-item)
    > a[class*="wv-nav-icon-"]:hover {
        color: var(--wv-blue);

        background-color: rgba(56, 164, 194, 0.05);
    }
}


.offcanvas-menu .offcanvas-inner ul.menu > li
> a[class*="wv-nav-icon-"]:focus-visible {
    color: var(--wv-blue);

    background-color: rgba(56, 164, 194, 0.05);

    outline: 2px solid rgba(56, 164, 194, 0.45);
    outline-offset: -2px;
}

/* ---------------------------------------------------------
   Lucide: House
   --------------------------------------------------------- */

.offcanvas-menu .wv-nav-icon-house {
    --wv-nav-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNSAyMXYtOGExIDEgMCAwIDAtMS0xaC00YTEgMSAwIDAgMC0xIDF2OCIvPjxwYXRoIGQ9Ik0zIDEwYTIgMiAwIDAgMSAuNzA5LTEuNTI4bDctNS45OTlhMiAyIDAgMCAxIDIuNTgyIDBsNyA1Ljk5OUEyIDIgMCAwIDEgMjEgMTB2OWEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnoiLz48L3N2Zz4=");
}


/* ---------------------------------------------------------
   Lucide: Users
   --------------------------------------------------------- */

.offcanvas-menu .wv-nav-icon-users {
    --wv-nav-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNiAyMXYtMmE0IDQgMCAwIDAtNC00SDZhNCA0IDAgMCAwLTQgNHYyIi8+PHBhdGggZD0iTTE2IDMuMTI4YTQgNCAwIDAgMSAwIDcuNzQ0Ii8+PHBhdGggZD0iTTIyIDIxdi0yYTQgNCAwIDAgMC0zLTMuODciLz48Y2lyY2xlIGN4PSI5IiBjeT0iNyIgcj0iNCIvPjwvc3ZnPg==");
}


/* ---------------------------------------------------------
   Lucide: Droplet
   --------------------------------------------------------- */

.offcanvas-menu .wv-nav-icon-droplet {
    --wv-nav-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiAyMmE3IDcgMCAwIDAgNy03YzAtMi0xLTMuOS0zLTUuNVMxMi41IDUuNSAxMiAzYy0uNSAyLjUtMiA0LjktNCA2LjVTNSAxMyA1IDE1YTcgNyAwIDAgMCA3IDd6Ii8+PC9zdmc+");
}


/* ---------------------------------------------------------
   Lucide: MonitorCog
   --------------------------------------------------------- */

.offcanvas-menu .wv-nav-icon-monitor-cog {
    --wv-nav-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiAxN3Y0Ii8+PHBhdGggZD0ibTE0LjMwNSA3LjUzLjkyMy0uMzgyIi8+PHBhdGggZD0ibTE1LjIyOCA0Ljg1Mi0uOTIzLS4zODMiLz48cGF0aCBkPSJtMTYuODUyIDMuMjI4LS4zODMtLjkyNCIvPjxwYXRoIGQ9Im0xNi44NTIgOC43NzItLjM4My45MjMiLz48cGF0aCBkPSJtMTkuMTQ4IDMuMjI4LjM4My0uOTI0Ii8+PHBhdGggZD0ibTE5LjUzIDkuNjk2LS4zODItLjkyNCIvPjxwYXRoIGQ9Im0yMC43NzIgNC44NTIuOTI0LS4zODMiLz48cGF0aCBkPSJtMjAuNzcyIDcuMTQ4LjkyNC4zODMiLz48cGF0aCBkPSJNMjIgMTN2MmEyIDIgMCAwIDEtMiAySDRhMiAyIDAgMCAxLTItMlY1YTIgMiAwIDAgMSAyLTJoNyIvPjxwYXRoIGQ9Ik04IDIxaDgiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjYiIHI9IjMiLz48L3N2Zz4=");
}


/* ---------------------------------------------------------
   Lucide: Newspaper
   --------------------------------------------------------- */

.offcanvas-menu .wv-nav-icon-newspaper {
    --wv-nav-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik00IDIyaDE2YTIgMiAwIDAgMCAyLTJWNGEyIDIgMCAwIDAtMi0ySDhhMiAyIDAgMCAwLTIgMnYxNmEyIDIgMCAwIDEtMiAyWm0wIDBhMiAyIDAgMCAxLTItMnYtOWMwLTEuMS45LTIgMi0yaDIiLz48cGF0aCBkPSJNMTggMTRoLTgiLz48cGF0aCBkPSJNMTUgMThoLTUiLz48cGF0aCBkPSJNMTAgNmg4djRoLThWNloiLz48L3N2Zz4=");
}


/* ---------------------------------------------------------
   Lucide: Mail
   --------------------------------------------------------- */

.offcanvas-menu .wv-nav-icon-mail {
    --wv-nav-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Im0yMiA3LTguOTkxIDUuNzI3YTIgMiAwIDAgMS0yLjAwOSAwTDIgNyIvPjxyZWN0IHg9IjIiIHk9IjQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiIgcng9IjIiLz48L3N2Zz4=");
}

/* =========================================================
   8. TABLET / MOBILE – HEADER

   < 992 px:
   - wv-servicebar wird über Helix Responsive ausgeblendet
   - mobiles Logo: Position wv-logo-mobile
   - Hamburger: Position menu
   - beide gemeinsam in Section "header"
   - Gesamthöhe: 72 px
   ========================================================= */

@media (max-width: 991.98px) {

    /* -----------------------------------------------------
       Hauptheader
       ----------------------------------------------------- */

    #sp-header {
        height: var(--wv-header-height-mobile) !important;
        min-height: var(--wv-header-height-mobile) !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff;

        border-bottom: 1px solid var(--wv-line);

        box-shadow: none !important;
    }


    #sp-header > .container,
    #sp-header > .container > .container-inner,
    #sp-header > .container > .container-inner > .row {
        height: 100%;
    }


    #sp-header > .container > .container-inner > .row {
        align-items: center;
    }


    /* -----------------------------------------------------
       Mobiles Logo
       Position: wv-logo-mobile
       ----------------------------------------------------- */

    #sp-header #sp-wv-logo-mobile {
        height: 100%;

        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    #sp-header #sp-wv-logo-mobile > .sp-column {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        height: 100%;

        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    #sp-header #sp-wv-logo-mobile .sp-module,
    #sp-header #sp-wv-logo-mobile .sp-module-content,
    #sp-header #sp-wv-logo-mobile .custom {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Joomla-Editor erzeugt teilweise ein p um das Bild.
       Dessen Standardabstand wird neutralisiert. */

    #sp-header #sp-wv-logo-mobile p {
        margin: 0 !important;
        padding: 0 !important;
    }


    #sp-header #sp-wv-logo-mobile a {
        display: inline-flex;
        align-items: center;

        margin: 0;
        padding: 0;

        line-height: 1;
    }


    #sp-header #sp-wv-logo-mobile img {
        display: block;

        width: auto !important;
        height: auto !important;

        max-width: 100%;
        max-height: 46px;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       Menü-/Hamburger-Spalte
       Position: menu
       ----------------------------------------------------- */

    #sp-header #sp-menu {
        height: 100%;

        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    #sp-header #sp-menu > .sp-column {
        display: flex;
        align-items: center;
        justify-content: flex-end !important;

        width: 100%;
        height: 100%;
    }


    #sp-header #sp-menu .sp-megamenu-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end !important;

        width: 100%;
        height: 100%;
    }


    /* -----------------------------------------------------
       Hamburger
       ----------------------------------------------------- */

    #sp-header #offcanvas-toggler {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        line-height: 1 !important;

        color: var(--wv-ink);
    }


    #sp-header .burger-icon {
        width: 25px;
        height: auto;
    }


    #sp-header .burger-icon > span {
        display: block;

        height: 2px;

        margin: 5px 0;

        background: var(--wv-ink);
    }
}

/* =========================================================
   PHONE < 576 px
   Header-Spalten zwingend in EINER Zeile halten
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-header > .container > .container-inner > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Mobiles Logo: 8 von 12 Spalten */

    #sp-header #sp-wv-logo-mobile {
        flex: 0 0 66.666666%;
        width: 66.666666%;
        max-width: 66.666666%;
    }

    /* Menü / Hamburger: 4 von 12 Spalten */

    #sp-header #sp-menu {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        max-width: 33.333333%;
    }

    #sp-header #sp-menu > .sp-column,
    #sp-header #sp-menu .sp-megamenu-wrapper {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: flex-end !important;
    }

    #sp-header #offcanvas-toggler {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   9. OFFCANVAS – SERVICEBEREICH
   Joomla-Modul: "Service Offcanvas"
   Position: offcanvas-modules
   Module Class: wv-service-offcanvas

   Aufbau:
   - Störungsnummer: zweizeilig, Blau
   - Mitgliederbereich: einzeilig, Grün
   ========================================================= */

.offcanvas-menu .wv-service-offcanvas {
    margin: 18px 0 0 !important;
    padding: 18px 0 0 !important;

    border-top: 1px solid var(--wv-line);
}

.offcanvas-menu .wv-service-offcanvas .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}

.offcanvas-menu .wv-service-offcanvas .mod-menu {
    display: grid;

    gap: 10px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}

.offcanvas-menu .wv-service-offcanvas .mod-menu > li {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   Gemeinsame Grundform
   --------------------------------------------------------- */

.offcanvas-menu .wv-service-offcanvas .mod-menu > li > a {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid currentColor;
    border-radius: 5px;

    background: #ffffff;

    text-decoration: none;

    opacity: 1 !important;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}


/* ---------------------------------------------------------
   Störungsnummer
   Originaler Linktext bleibt für Barrierefreiheit im DOM.
   Visuell erzeugen wir bewusst zwei getrennte Zeilen.
   --------------------------------------------------------- */

.offcanvas-menu .wv-service-offcanvas .wv-emergency-link {
    position: relative;

    display: block !important;

    width: 100%;
    min-height: 64px;

    padding: 0 !important;

    box-sizing: border-box;

    border: 1px solid var(--wv-blue) !important;
    border-radius: 5px;

    background: #ffffff;

    color: transparent !important;

    font-size: 0 !important;
    line-height: 1 !important;

    text-decoration: none;
}


/* vorhandenes Joomla-Menüicon */

.offcanvas-menu .wv-service-offcanvas .wv-emergency-link > span[aria-hidden="true"] {
    position: absolute;

    left: 15px;
    top: 50%;

    width: 18px;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateY(-50%);

    color: var(--wv-blue) !important;

    font-size: 18px !important;
    line-height: 1;

    text-align: center;
}


/* Zeile 1 */

.offcanvas-menu .wv-service-offcanvas .wv-emergency-link::before {
    content: "Störungsnummer";

    position: absolute;

    left: 47px;
    right: 12px;
    top: 11px;

    color: var(--wv-blue);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;
}


/* Zeile 2 */

.offcanvas-menu .wv-service-offcanvas .wv-emergency-link::after {
    content: "+49 911 300 373 15";

    position: absolute;

    left: 47px;
    right: 12px;
    top: 31px;

    color: var(--wv-blue);

    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;

    white-space: nowrap;
}


.offcanvas-menu .wv-service-offcanvas .wv-emergency-link:hover,
.offcanvas-menu .wv-service-offcanvas .wv-emergency-link:focus-visible,
.offcanvas-menu .wv-service-offcanvas .mod-menu > li.current > .wv-emergency-link,
.offcanvas-menu .wv-service-offcanvas .mod-menu > li.active > .wv-emergency-link {
    border-color: var(--wv-blue);

    background: rgba(56, 164, 194, 0.08);
}


/* ---------------------------------------------------------
   Mitgliederbereich
   --------------------------------------------------------- */

.offcanvas-menu .wv-service-offcanvas .wv-member-link {
    display: flex !important;
    align-items: center;

    gap: 10px;

    min-height: 46px;

    padding: 0 14px !important;

    color: var(--wv-green) !important;
    border-color: var(--wv-green);

    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.2;
}


/* vorhandenes Joomla-Menüicon */

.offcanvas-menu .wv-service-offcanvas .wv-member-link > span[aria-hidden="true"] {
    width: 18px;

    margin: 0 !important;
    padding: 0 !important;

    color: currentColor !important;

    font-size: 18px !important;
    line-height: 1;

    text-align: center;
}


.offcanvas-menu .wv-service-offcanvas .wv-member-link:hover,
.offcanvas-menu .wv-service-offcanvas .wv-member-link:focus-visible,
.offcanvas-menu .wv-service-offcanvas .mod-menu > li.current > .wv-member-link,
.offcanvas-menu .wv-service-offcanvas .mod-menu > li.active > .wv-member-link {
    color: var(--wv-green) !important;
    border-color: var(--wv-green);

    background: rgba(106, 174, 48, 0.09);
}


/* ---------------------------------------------------------
   Tastaturfokus
   --------------------------------------------------------- */

.offcanvas-menu .wv-service-offcanvas .mod-menu > li > a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* =========================================================
   10. STARTSEITE – HERO

   Helix Section Title: home-hero
   Modul: Startseite Hero
   Position: home-hero
   Bild: /images/start-hero.jpg

   Aufbau:
   Eyebrow
   H1
   Einleitung

   Kein CTA.
   ========================================================= */


/* =========================================================
   HERO-GRUNDFLÄCHE
   ========================================================= */

#sp-home-hero {
    position: relative;

    min-height: 520px;

    margin: 0 !important;
    padding: 0 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(17, 31, 37, 0.72) 0%,
            rgba(17, 31, 37, 0.58) 38%,
            rgba(17, 31, 37, 0.20) 68%,
            rgba(17, 31, 37, 0.04) 100%
        ),
        url("/images/start-hero.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* =========================================================
   HELIX-INNENABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-home-hero > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#sp-home-hero > .container-fluid > .container-inner > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#sp-home-hero .sp-column,
#sp-home-hero .sp-module,
#sp-home-hero .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   INHALTSBEREICH

   Gleiche maximale Breite wie bisher:
   1220 px
   ========================================================= */

.wv-hero-content {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 520px;
}


/* =========================================================
   INNERER CONTAINER
   ========================================================= */

.wv-hero-inner {
    width: calc(100% - 48px);
    max-width: 1220px;

    margin: 0 auto;
}


/* =========================================================
   EYEBROW

   Verwendet jetzt den globalen WV-Meta-Stil.
   ========================================================= */

.wv-hero-eyebrow {
    margin: 0 0 13px;

    color: rgba(255, 255, 255, 0.86);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H1

   Eigene Hero-Hierarchie.
   Bewusst größer als normale H2-Überschriften.
   ========================================================= */

.wv-hero-title {
    max-width: 720px;

    margin: 0 0 20px;

    color: #ffffff;

    font-size: 52px;
    font-weight: 700;
    line-height: 1.07;

    letter-spacing: -0.025em;
}


/* =========================================================
   EINLEITUNG

   Verwendet das globale Intro-Schriftmaß.
   ========================================================= */

.wv-hero-text {
    max-width: 590px;

    margin: 0;

    color: rgba(255, 255, 255, 0.92);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-home-hero,
    .wv-hero-content {
        min-height: 490px;
    }

    #sp-home-hero {
        background-position: 55% center;
    }

    .wv-hero-inner {
        width: calc(100% - 40px);
    }

    .wv-hero-title {
        max-width: 650px;

        font-size: 44px;
        line-height: 1.08;
    }

    .wv-hero-text {
        max-width: 590px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-home-hero,
    .wv-hero-content {
        min-height: 440px;
    }


    /* -----------------------------------------------------
       Hintergrund

       Bestehende Bildlogik bleibt erhalten.
       ----------------------------------------------------- */

    #sp-home-hero {
        background-position: 55% center;
    }


    /* -----------------------------------------------------
       Sicherer Innenabstand
       ----------------------------------------------------- */

    #sp-home-hero .wv-hero-content {
        width: 100%;

        box-sizing: border-box;
    }

    #sp-home-hero .wv-hero-inner {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       Eyebrow
       ----------------------------------------------------- */

    .wv-hero-eyebrow {
        margin-bottom: 10px;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       H1
       ----------------------------------------------------- */

    .wv-hero-title {
        max-width: 100%;

        margin-bottom: 16px;

        font-size: 38px;
        line-height: 1.09;

        letter-spacing: -0.022em;
    }


    /* -----------------------------------------------------
       Einleitung
       ----------------------------------------------------- */

    .wv-hero-text {
        max-width: 100%;

        margin: 0;

        line-height: 1.55;
    }

}

/* =========================================================
   11. STARTSEITE – THEMEN

   Helix Section Title: home-topics
   Modul: Startseite Themen
   Position: home-topics

   Typografie:
   an globales WV-System angepasst

   Layout, Karten, Bilder und Hover-Verhalten
   bleiben grundsätzlich unverändert.
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-home-topics {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}

#sp-home-topics .sp-module,
#sp-home-topics .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}

.wv-topics {
    width: 100%;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-topics-intro {
    max-width: 760px;

    margin: 0 0 42px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-topics-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-topics-title {
    margin: 0 0 13px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNGSTEXT
   ========================================================= */

.wv-topics-lead {
    max-width: 680px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   KARTENRASTER
   ========================================================= */

.wv-topics-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   KARTE
   ========================================================= */

.wv-topic-card {
    min-width: 0;

    margin: 0;

    border: 1px solid var(--wv-line);
    border-radius: 6px;

    background: #ffffff;

    overflow: hidden;

    transition:
        border-color 0.18s ease;
}


/* =========================================================
   GESAMTE KARTE ALS LINK
   ========================================================= */

.wv-topic-card-link {
    display: flex;
    flex-direction: column;

    height: 100%;

    color: var(--wv-ink) !important;

    text-decoration: none !important;
}


/* =========================================================
   BILD
   ========================================================= */

.wv-topic-card-image {
    position: relative;

    height: 245px;

    overflow: hidden;

    background: #eef2f3;
}

.wv-topic-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


/* =========================================================
   TEXTBEREICH DER KARTE
   ========================================================= */

.wv-topic-card-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 24px 24px 22px;
}


/* =========================================================
   KARTEN-EYEBROW

   Gleicher Meta-Stil wie alle übrigen
   kleinen blauen Bereichsbezeichnungen.
   ========================================================= */

.wv-topic-card-eyebrow {
    margin: 0 0 9px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   KARTENTITEL

   Nutzt globales H3-System.
   ========================================================= */

.wv-topic-card-title {
    margin: 0 0 12px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   KARTENTEXT
   ========================================================= */

.wv-topic-card-text {
    margin: 0 0 22px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   MEHR-ERFAHREN-LINK

   Kein Button.
   Pfeil bleibt hier bewusst erlaubt,
   da es sich um einen einfachen Textlink innerhalb
   der Themenkarte handelt.
   ========================================================= */

.wv-topic-card-more {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: auto;

    color: var(--wv-blue);

    font-size: var(--wv-font-body);
    font-weight: 600;
    line-height: 1.2;
}


/* =========================================================
   PFEIL
   ========================================================= */

.wv-topic-card-arrow {
    display: block;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338a4c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    transition:
        transform 0.18s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

    .wv-topic-card:hover {
        border-color:
            rgba(56, 164, 194, 0.55);
    }

    .wv-topic-card:hover
    .wv-topic-card-image img {
        transform: scale(1.025);
    }

    .wv-topic-card:hover
    .wv-topic-card-arrow {
        transform: translateX(3px);
    }

}


/* =========================================================
   TASTATURFOKUS
   ========================================================= */

.wv-topic-card-link:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}

.wv-topic-card-link:focus-visible
.wv-topic-card-arrow {
    transform: translateX(3px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-home-topics {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Einleitung
       ----------------------------------------------------- */

    .wv-topics-intro {
        margin-bottom: 34px;
    }

    .wv-topics-title {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       Kartenraster
       ----------------------------------------------------- */

    .wv-topics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    /* Dritte Karte über gesamte Breite */

    .wv-topic-card:last-child {
        grid-column: 1 / -1;
    }


    /* -----------------------------------------------------
       Bilder
       ----------------------------------------------------- */

    .wv-topic-card-image {
        height: 220px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-home-topics {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-topics {
        width: 100%;

        padding-left: 20px;
        padding-right: 20px;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       Einleitung
       ----------------------------------------------------- */

    .wv-topics-intro {
        margin-bottom: 30px;
    }

    .wv-topics-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }

    .wv-topics-title {
        margin-bottom: 11px;

        line-height: 1.14;
    }

    .wv-topics-lead {
        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Karten
       ----------------------------------------------------- */

    .wv-topics-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .wv-topic-card:last-child {
        grid-column: auto;
    }


    /* -----------------------------------------------------
       Bilder
       ----------------------------------------------------- */

    .wv-topic-card-image {
        height: 200px;
    }


    /* -----------------------------------------------------
       Karteninhalt
       ----------------------------------------------------- */

    .wv-topic-card-body {
        padding: 21px 20px 20px;
    }

    .wv-topic-card-eyebrow {
        margin-bottom: 8px;

        letter-spacing: 0.08em;
    }

    .wv-topic-card-title {
        margin-bottom: 10px;

        line-height: 1.3;
    }

    .wv-topic-card-text {
        margin-bottom: 20px;

        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Mehr erfahren
       ----------------------------------------------------- */

    .wv-topic-card-arrow {
        width: 15px;
        height: 15px;

        flex-basis: 15px;
    }

}

/* =========================================================
   12. STARTSEITE – ZAHLEN & FAKTEN

   Helix Section Title: home-facts
   Modul: Startseite Zahlen
   Position: home-facts

   Typografie:
   an globales WV-System angepasst

   Kennzahlen behalten bewusst ihre eigene
   große Zahlenhierarchie.
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-home-facts {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}

#sp-home-facts .sp-module,
#sp-home-facts .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}

.wv-facts {
    width: 100%;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-facts-intro {
    max-width: 900px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-facts-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-facts-title {
    margin: 0 0 13px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNGSTEXT
   ========================================================= */

.wv-facts-lead {
    max-width: 900px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   ZAHLENRASTER
   ========================================================= */

.wv-facts-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top: 1px solid var(--wv-line);
    border-bottom: 1px solid var(--wv-line);
}


/* =========================================================
   EINZELNE KENNZAHL
   ========================================================= */

.wv-fact {
    position: relative;

    min-width: 0;

    padding: 30px 26px 28px;
}

.wv-fact + .wv-fact {
    border-left: 1px solid var(--wv-line);
}


/* =========================================================
   ZAHLENZEILE
   ========================================================= */

.wv-fact-value {
    display: flex;

    align-items: baseline;
    flex-wrap: wrap;

    column-gap: 7px;
    row-gap: 2px;

    margin-bottom: 8px;

    color: var(--wv-ink);
}


/* =========================================================
   PREFIX – "rund"
   ========================================================= */

.wv-fact-prefix {
    color: var(--wv-blue);

    font-size: var(--wv-font-body);
    font-weight: 700;
    line-height: 1.2;
}


/* =========================================================
   ZAHL

   Bewusst eigenes Kennzahlenmaß.
   ========================================================= */

.wv-fact-number {
    color: var(--wv-ink);

    font-size: 46px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -0.03em;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   EINHEIT
   ========================================================= */

.wv-fact-unit {
    color: var(--wv-ink);

    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
}


/* =========================================================
   BESCHRIFTUNG
   ========================================================= */

.wv-fact-label {
    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-home-facts {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Einleitung
       ----------------------------------------------------- */

    .wv-facts-intro {
        margin-bottom: 36px;
    }

    .wv-facts-title {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       Raster
       ----------------------------------------------------- */

    .wv-facts-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .wv-fact {
        padding: 28px 24px 26px;
    }

    .wv-fact + .wv-fact {
        border-left: 0;
    }

    .wv-fact:nth-child(even) {
        border-left: 1px solid var(--wv-line);
    }

    .wv-fact:nth-child(n+3) {
        border-top: 1px solid var(--wv-line);
    }


    /* -----------------------------------------------------
       Kennzahlen
       ----------------------------------------------------- */

    .wv-fact-number {
        font-size: 42px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-home-facts {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-facts {
        width: 100%;

        padding-left: 20px;
        padding-right: 20px;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       Einleitung
       ----------------------------------------------------- */

    .wv-facts-intro {
        margin-bottom: 30px;
    }

    .wv-facts-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }

    .wv-facts-title {
        margin-bottom: 11px;

        line-height: 1.14;
    }

    .wv-facts-lead {
        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Raster
       ----------------------------------------------------- */

    .wv-facts-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .wv-fact {
        padding: 24px 16px 22px;
    }


    /* -----------------------------------------------------
       Kennzahlen
       ----------------------------------------------------- */

    .wv-fact-number {
        font-size: 36px;
    }

    .wv-fact-unit {
        font-size: 18px;
    }

    .wv-fact-prefix {
        font-size: var(--wv-font-meta);
    }

    .wv-fact-label {
        font-size: var(--wv-font-body);
    }

}

/* =========================================================
   13. STARTSEITE – TECHNIK & VERSORGUNG

   Helix Section Title: home-supply
   Modul: Startseite Versorgung
   Position: home-supply

   Typografie:
   an globales WV-System angepasst

   CTA:
   globaler .wv-btn-outline

   Kein eigener Button-Stil mehr.
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-home-supply {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}

#sp-home-supply .sp-module,
#sp-home-supply .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   GRUNDLAYOUT

   Bewusst keine Card
   und kein Außenrahmen.
   ========================================================= */

.wv-supply {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;

    gap: 56px;

    width: 100%;
}


/* =========================================================
   BILD
   ========================================================= */

.wv-supply-media {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 6px;

    background: #eef2f3;
}

.wv-supply-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    margin: 0;
}


/* =========================================================
   TEXTBEREICH
   ========================================================= */

.wv-supply-content {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-supply-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-supply-title {
    max-width: 500px;

    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   TEXT
   ========================================================= */

.wv-supply-text {
    max-width: 520px;

    margin: 0 0 28px;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   CTA

   Der Button selbst verwendet ausschließlich
   den globalen .wv-btn-outline.

   Keine lokalen Größen,
   Farben oder Hover-Regeln mehr.
   ========================================================= */

.wv-supply-content .wv-btn-outline {
    margin: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-home-supply {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    .wv-supply {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 38px;
    }


    /* -----------------------------------------------------
       Typografie
       ----------------------------------------------------- */

    .wv-supply-title {
        font-size: 34px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-home-supply {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Grundlayout
       ----------------------------------------------------- */

    .wv-supply {
        grid-template-columns: 1fr;

        gap: 27px;

        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Bild
       ----------------------------------------------------- */

    .wv-supply-media {
        aspect-ratio: auto;

        height: 220px;

        border-radius: 6px;
    }


    /* -----------------------------------------------------
       Textbereich
       ----------------------------------------------------- */

    .wv-supply-content {
        width: 100%;
    }


    /* -----------------------------------------------------
       Eyebrow
       ----------------------------------------------------- */

    .wv-supply-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Überschrift
       ----------------------------------------------------- */

    .wv-supply-title {
        max-width: 100%;

        margin-bottom: 15px;

        line-height: 1.14;
    }


    /* -----------------------------------------------------
       Text
       ----------------------------------------------------- */

    .wv-supply-text {
        max-width: 100%;

        margin-bottom: 24px;

        line-height: 1.55;
    }

}

/* =========================================================
   14. STARTSEITE – ZUKUNFT & DIGITALISIERUNG

   Helix Section Title: home-future
   Modul: Startseite Zukunft
   Position: home-future

   Typografie:
   globales WV-System

   CTA:
   ausschließlich globaler .wv-btn-primary

   Timeline:
   gleiche Designsprache wie
   "Geschichte & Entwicklung"
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-home-future {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}

#sp-home-future .sp-module,
#sp-home-future .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}

.wv-future {
    width: 100%;
}


/* =========================================================
   HAUPTLAYOUT
   ========================================================= */

.wv-future-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    gap: 78px;

    align-items: start;
}


/* =========================================================
   LINKER TEXTBEREICH
   ========================================================= */

.wv-future-copy {
    min-width: 0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-future-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-future-title {
    max-width: 560px;

    margin: 0 0 20px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-future-text {
    max-width: 590px;

    margin: 0 0 18px;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.62;
}


/* =========================================================
   AKTUELLER PROJEKTSTAND
   ========================================================= */

.wv-future-lead {
    max-width: 590px;

    margin: 0 0 30px;
    padding: 17px 0 17px 19px;

    border-left: 3px solid var(--wv-blue);

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   ROADMAP – RECHTE SEITE
   ========================================================= */

.wv-future-roadmap {
    min-width: 0;

    padding-left: 48px;

    border-left:
        1px solid rgba(56, 164, 194, 0.24);
}


/* =========================================================
   ROADMAP-KOPF
   ========================================================= */

.wv-future-roadmap-head {
    margin: 0 0 27px;
}

.wv-future-roadmap-eyebrow {
    margin: 0 0 8px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.wv-future-roadmap-head h3 {
    max-width: 470px;

    margin: 0;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   TIMELINE

   Verbindliche Designsprache:
   - Linie 1 px
   - Marker 15 px
   - Kontur 2 px
   - aktueller Marker gefüllt
   - Halo 4 px

   Entspricht "Geschichte & Entwicklung".
   ========================================================= */

.wv-future-timeline {
    position: relative;

    width: 100%;
}

.wv-future-timeline::before {
    content: "";

    position: absolute;

    z-index: 1;

    top: 7px;
    bottom: 0;
    left: 7px;

    width: 1px;

    background:
        rgba(56, 164, 194, 0.38);
}


/* =========================================================
   EINZELNER SCHRITT
   ========================================================= */

.wv-future-step {
    position: relative;

    display: grid;

    grid-template-columns:
        15px
        minmax(0, 1fr);

    gap: 18px;

    padding: 0 0 29px;
}

.wv-future-step:last-child {
    padding-bottom: 0;
}


/* =========================================================
   MARKER
   ========================================================= */

.wv-future-step-marker {
    position: relative;

    z-index: 2;

    width: 15px;
    height: 15px;

    margin: 0;

    box-sizing: border-box;

    background: #f4f9fb;

    border: 2px solid var(--wv-blue);
    border-radius: 50%;
}


/* =========================================================
   AKTUELLER PILOT
   ========================================================= */

.wv-future-step-current .wv-future-step-marker {
    background: var(--wv-blue);

    border-color: var(--wv-blue);

    box-shadow:
        0 0 0 4px rgba(56, 164, 194, 0.12);
}


/* =========================================================
   SCHRITTINHALT
   ========================================================= */

.wv-future-step-content {
    min-width: 0;
}


/* =========================================================
   PHASENBEZEICHNUNG
   ========================================================= */

.wv-future-step-phase {
    margin: 0 0 7px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   ROADMAP-TITEL
   ========================================================= */

.wv-future-step-content h4 {
    margin: 0 0 8px;

    color: var(--wv-ink);

    font-size: var(--wv-font-lead);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.01em;
}


/* =========================================================
   ROADMAP-TEXT
   ========================================================= */

.wv-future-step-content > p:last-child {
    max-width: 500px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-home-future {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    .wv-future-layout {
        grid-template-columns: 1fr;

        gap: 44px;
    }


    /* -----------------------------------------------------
       Überschrift
       ----------------------------------------------------- */

    .wv-future-title {
        max-width: 700px;

        font-size: 34px;
    }


    /* -----------------------------------------------------
       Texte
       ----------------------------------------------------- */

    .wv-future-text,
    .wv-future-lead {
        max-width: 720px;
    }


    /* -----------------------------------------------------
       Roadmap
       ----------------------------------------------------- */

    .wv-future-roadmap {
        padding-top: 32px;
        padding-left: 0;

        border-top:
            1px solid rgba(56, 164, 194, 0.24);

        border-left: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-home-future {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-future {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    .wv-future-layout {
        gap: 36px;
    }


    /* -----------------------------------------------------
       Eyebrow
       ----------------------------------------------------- */

    .wv-future-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Überschrift
       ----------------------------------------------------- */

    .wv-future-title {
        max-width: 100%;

        margin-bottom: 16px;

        line-height: 1.14;
    }


    /* -----------------------------------------------------
       Text
       ----------------------------------------------------- */

    .wv-future-text {
        max-width: 100%;

        margin-bottom: 17px;

        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Projektstand
       ----------------------------------------------------- */

    .wv-future-lead {
        max-width: 100%;

        margin-bottom: 26px;

        padding:
            14px
            0
            14px
            15px;

        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Roadmap
       ----------------------------------------------------- */

    .wv-future-roadmap {
        padding-top: 27px;
    }

    .wv-future-roadmap-head {
        margin-bottom: 24px;
    }

    .wv-future-roadmap-eyebrow {
        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Timeline
       ----------------------------------------------------- */

    .wv-future-step {
        grid-template-columns:
            15px
            minmax(0, 1fr);

        gap: 18px;

        padding-bottom: 27px;
    }

    .wv-future-step-phase {
        margin-bottom: 6px;

        letter-spacing: 0.08em;
    }

    .wv-future-step-content h4 {
        margin-bottom: 7px;

        line-height: 1.3;
    }

    .wv-future-step-content > p:last-child {
        line-height: 1.55;
    }

}

/* =========================================================
   15. STARTSEITE – KONTAKT & SERVICE

   Helix Section Title: home-contact
   Modul: Startseite Kontakt
   Position: home-contact

   Typografie:
   globales WV-System

   Layout:
   bestehende Geometrie bleibt erhalten
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-home-contact {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   HELIX-INNENSTRUKTUR
   ========================================================= */

#sp-home-contact > .container,
#sp-home-contact > .container > .container-inner,
#sp-home-contact > .container > .container-inner > .row {
    height: auto !important;
    min-height: 0 !important;
}

#sp-home-contact .sp-module,
#sp-home-contact .sp-module-content {
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

.wv-contact {
    width: 100%;

    height: auto;
    min-height: 0;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-contact-intro {
    max-width: 760px;

    margin: 0 0 38px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-contact-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-contact-title {
    margin: 0 0 13px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNGSTEXT
   ========================================================= */

.wv-contact-text {
    max-width: 650px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   AKTIONSLEISTE
   ========================================================= */

.wv-contact-actions {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin: 0;

    border-top: 1px solid var(--wv-line);
    border-bottom: 1px solid var(--wv-line);
}


/* =========================================================
   EINZELNE AKTION
   ========================================================= */

.wv-contact-action {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;
    min-height: 112px;

    padding:
        24px
        54px
        24px
        24px;

    box-sizing: border-box;

    color: var(--wv-ink) !important;

    text-decoration: none !important;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.wv-contact-action + .wv-contact-action {
    border-left: 1px solid var(--wv-line);
}


/* =========================================================
   KLEINE BESCHRIFTUNG
   ========================================================= */

.wv-contact-action-label {
    margin: 0 0 7px;

    color: var(--wv-muted);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   HAUPTTEXT
   ========================================================= */

.wv-contact-action-title {
    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 700;
    line-height: 1.3;

    transition:
        color 0.18s ease;
}


/* =========================================================
   PFEIL

   Bewusst kein CTA-Button.
   Die komplette Servicezeile ist ein Navigationslink.
   ========================================================= */

.wv-contact-action-arrow {
    position: absolute;

    top: 50%;
    right: 24px;

    width: 18px;
    height: 18px;

    transform:
        translateY(-50%);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338a4c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    transition:
        transform 0.18s ease;
}


/* =========================================================
   TELEFON-ICON
   ========================================================= */

.wv-contact-action-phone {
    position: absolute;

    top: 50%;
    right: 24px;

    width: 18px;
    height: 18px;

    transform:
        translateY(-50%);

    background-color: var(--wv-blue);

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* =========================================================
   FARBLICHE AKZENTE
   ========================================================= */

.wv-contact-action-emergency
.wv-contact-action-label {
    color: var(--wv-blue);
}

.wv-contact-action-member
.wv-contact-action-label {
    color: var(--wv-green);
}

.wv-contact-action-member
.wv-contact-action-arrow {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236aae30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

    .wv-contact-action:hover {
        background: #f8fafb;
    }

    .wv-contact-action:hover
    .wv-contact-action-title {
        color: var(--wv-blue);
    }

    .wv-contact-action-member:hover
    .wv-contact-action-title {
        color: var(--wv-green);
    }

    .wv-contact-action:hover
    .wv-contact-action-arrow {
        transform:
            translateY(-50%)
            translateX(3px);
    }

}


/* =========================================================
   TASTATURFOKUS
   ========================================================= */

.wv-contact-action:focus-visible {
    position: relative;

    z-index: 2;

    outline: 2px solid var(--wv-blue);
    outline-offset: -2px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-home-contact {
        height: auto !important;
        min-height: 0 !important;

        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Überschrift
       ----------------------------------------------------- */

    .wv-contact-title {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       Aktionsleiste
       ----------------------------------------------------- */

    .wv-contact-action {
        min-height: 104px;

        padding:
            21px
            46px
            21px
            20px;
    }

    .wv-contact-action-arrow,
    .wv-contact-action-phone {
        right: 20px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-home-contact {
        height: auto !important;
        min-height: 0 !important;

        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-contact {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Einleitung
       ----------------------------------------------------- */

    .wv-contact-intro {
        margin-bottom: 30px;
    }

    .wv-contact-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }

    .wv-contact-title {
        margin-bottom: 11px;

        line-height: 1.14;
    }

    .wv-contact-text {
        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Aktionsleiste
       ----------------------------------------------------- */

    .wv-contact-actions {
        grid-template-columns: 1fr;
    }

    .wv-contact-action {
        min-height: 82px;

        padding:
            17px
            48px
            17px
            0;
    }

    .wv-contact-action + .wv-contact-action {
        border-top: 1px solid var(--wv-line);
        border-left: 0;
    }


    /* -----------------------------------------------------
       Label
       ----------------------------------------------------- */

    .wv-contact-action-label {
        margin-bottom: 5px;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Icons
       ----------------------------------------------------- */

    .wv-contact-action-arrow,
    .wv-contact-action-phone {
        right: 4px;

        width: 17px;
        height: 17px;
    }

}

/* =========================================================
   16. GLOBALER FOOTER

   Helix Section Title: Footer
   Positionen: footer1 | footer2 | footer3

   Module:
   - Footer Verband
   - Footer Geschäftsstelle
   - Footer Navigation

   Typografie:
   globales WV-System

   Logo:
   max. 310 px

   Claim:
   sicher – nachhaltig – zukunftsorientiert
   ========================================================= */


/* =========================================================
   GRUNDFLÄCHE
   ========================================================= */

#sp-footer {
    margin: 0 !important;
    padding: 54px 0 50px !important;

    background: var(--wv-ink);

    color: rgba(255, 255, 255, 0.74);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   HELIX-STANDARDABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-footer .sp-module,
#sp-footer .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   HELIX-EIGENE OBERE LINIE ENTFERNEN
   ========================================================= */

#sp-footer .container-inner {
    border-top: 0 !important;
}


/* =========================================================
   SPALTEN
   ========================================================= */

#sp-footer #sp-footer1,
#sp-footer #sp-footer2,
#sp-footer #sp-footer3 {
    min-width: 0;

    text-align: left;
}


/* =========================================================
   VERBAND
   ========================================================= */

#sp-footer #sp-footer1 {
    padding-right: 42px;
}


/* =========================================================
   GESCHÄFTSSTELLE
   ========================================================= */

#sp-footer #sp-footer2 {
    padding-left: 28px;
    padding-right: 28px;

    border-left:
        1px solid rgba(255, 255, 255, 0.10);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

#sp-footer #sp-footer3 {
    padding-left: 38px;

    border-left:
        1px solid rgba(255, 255, 255, 0.10);
}


/* =========================================================
   GEMEINSAME ÜBERSCHRIFTEN
   ========================================================= */

.wv-footer-heading {
    margin: 0 0 16px;

    color: #ffffff;

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   VERBAND / LOGO
   ========================================================= */

.wv-footer-brand {
    width: 100%;
    max-width: 330px;
}


/* =========================================================
   LOGO-LINK
   ========================================================= */

.wv-footer-logo-link {
    display: block;

    width: 100%;
    max-width: 310px;

    margin: 0 0 14px;

    padding: 0;

    line-height: 1;

    text-decoration: none !important;
}


/* =========================================================
   LOGO

   Gleiche maximale Breite wie der Claim.
   Keine künstliche Höhenbegrenzung.
   ========================================================= */

.wv-footer-logo {
    display: block;

    width: 100%;
    height: auto;

    max-width: 310px;
    max-height: none;

    margin: 0;
}


/* =========================================================
   CLAIM

   HTML:
   sicher – nachhaltig – zukunftsorientiert
   ========================================================= */

.wv-footer-brand-text {
    width: 100%;
    max-width: 310px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: var(--wv-font-meta);
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.045em;
	
	text-align: center;

    white-space: nowrap;
}


/* =========================================================
   GESCHÄFTSSTELLE
   ========================================================= */

.wv-footer-contact {
    max-width: 350px;
}


/* =========================================================
   ADRESSE
   ========================================================= */

.wv-footer-address {
    margin: 0 0 15px;
    padding: 0;

    color: rgba(255, 255, 255, 0.72);

    font-style: normal;

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   TELEFON / E-MAIL
   ========================================================= */

.wv-footer-contact-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 7px;

    margin: 0 0 20px;
}

.wv-footer-contact-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color:
        rgba(255, 255, 255, 0.90) !important;

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.4;

    text-decoration: none !important;

    transition:
        color 0.18s ease;
}


/* =========================================================
   GEMEINSAMES KONTAKT-ICON
   ========================================================= */

.wv-footer-contact-link::before {
    content: "";

    display: block;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    background-color: var(--wv-blue);

    -webkit-mask-image:
        var(--wv-footer-contact-icon);

    mask-image:
        var(--wv-footer-contact-icon);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* =========================================================
   LUCIDE – TELEFON
   ========================================================= */

.wv-footer-contact-phone {
    --wv-footer-contact-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}


/* =========================================================
   LUCIDE – E-MAIL
   ========================================================= */

.wv-footer-contact-mail {
    --wv-footer-contact-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.99 5.727a2 2 0 0 1-2.02 0L2 7'/%3E%3C/svg%3E");
}


/* =========================================================
   ÖFFNUNGSZEITEN
   ========================================================= */

.wv-footer-hours {
    display: flex;
    flex-direction: column;

    padding-top: 16px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);

    color: rgba(255, 255, 255, 0.70);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.5;
}


/* =========================================================
   ÖFFNUNGSZEITEN – LABEL
   ========================================================= */

.wv-footer-hours-label {
    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.92);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   FOOTER-NAVIGATION
   ========================================================= */

.wv-footer-nav {
    max-width: 300px;
}

.wv-footer-nav ul {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wv-footer-nav li {
    margin: 0;
    padding: 0;
}

.wv-footer-nav a {
    display: inline-flex;

    color:
        rgba(255, 255, 255, 0.72) !important;

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none !important;

    transition:
        color 0.18s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

    .wv-footer-contact-link:hover,
    .wv-footer-nav a:hover {
        color: var(--wv-blue) !important;
    }

}


/* =========================================================
   TASTATURFOKUS
   ========================================================= */

.wv-footer-logo-link:focus-visible,
.wv-footer-contact-link:focus-visible,
.wv-footer-nav a:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-footer {
        padding: 48px 0 !important;
    }


    /* -----------------------------------------------------
       Spalten
       ----------------------------------------------------- */

    #sp-footer #sp-footer1 {
        padding-right: 24px;
    }

    #sp-footer #sp-footer2 {
        padding-left: 22px;
        padding-right: 22px;
    }

    #sp-footer #sp-footer3 {
        padding-left: 22px;
    }


    /* -----------------------------------------------------
       Logo / Claim

       Gleiche maximale Breite wie Desktop.
       Tatsächliche Breite wird automatisch durch
       die verfügbare Spaltenbreite begrenzt.
       ----------------------------------------------------- */

    .wv-footer-logo-link,
    .wv-footer-logo,
    .wv-footer-brand-text {
        max-width: 310px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-footer {
        padding: 40px 20px !important;
    }


    /* -----------------------------------------------------
       Spalten untereinander
       ----------------------------------------------------- */

    #sp-footer #sp-footer1,
    #sp-footer #sp-footer2,
    #sp-footer #sp-footer3 {
        width: 100%;

        margin: 0;

        padding-left: 0 !important;
        padding-right: 0 !important;

        border-left: 0;

        text-align: left;
    }


    /* -----------------------------------------------------
       Trennlinien zwischen Footerbereichen
       ----------------------------------------------------- */

    #sp-footer #sp-footer2,
    #sp-footer #sp-footer3 {
        margin-top: 30px;

        padding-top: 28px !important;

        border-top:
            1px solid rgba(255, 255, 255, 0.11);
    }


    /* -----------------------------------------------------
       Inhaltsbreiten
       ----------------------------------------------------- */

    .wv-footer-brand,
    .wv-footer-contact,
    .wv-footer-nav {
        max-width: none;
    }


    /* -----------------------------------------------------
       Logo
       ----------------------------------------------------- */

    .wv-footer-logo-link {
        width: 100%;
        max-width: 310px;

        margin-bottom: 14px;
    }

    .wv-footer-logo {
        width: 100%;
        max-width: 310px;

        height: auto;
        max-height: none;
    }


    /* -----------------------------------------------------
       Claim
       ----------------------------------------------------- */

    .wv-footer-brand-text {
        width: 100%;
        max-width: 310px;

        white-space: nowrap;
    }


    /* -----------------------------------------------------
       Navigation
       ----------------------------------------------------- */

    .wv-footer-nav ul {
        gap: 10px;
    }

}

/* =========================================================
   17. GLOBALER FOOTER – ABSCHLUSSZEILE
   Helix Section Title: footer-bottom
   Modul: Footer Rechtliches
   Position: footer-bottom
   ========================================================= */


/* =========================================================
   GRUNDFLÄCHE
   ========================================================= */

#sp-footer-bottom {
    margin: 0 !important;
    padding: 0 !important;

    background: #282e31;

    color: rgba(255, 255, 255, 0.58);
}

#sp-footer-bottom .sp-module,
#sp-footer-bottom .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   INHALT
   ========================================================= */

.wv-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    min-height: 58px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);
}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.wv-footer-copyright {
    margin: 0;

    color: rgba(255, 255, 255, 0.56);

    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}


/* =========================================================
   RECHTLICHE LINKS
   ========================================================= */

.wv-footer-legal {
    display: flex;
    align-items: center;

    gap: 22px;
}

.wv-footer-legal a {
    color: rgba(255, 255, 255, 0.68) !important;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;

    text-decoration: none !important;

    transition: color 0.18s ease;
}

@media (hover: hover) {

    .wv-footer-legal a:hover {
        color: var(--wv-blue) !important;
    }
}

.wv-footer-legal a:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-footer-bottom {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .wv-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 9px;

        min-height: 82px;

        padding: 16px 0;
    }

    .wv-footer-copyright,
    .wv-footer-legal a {
        font-size: 12px;
    }

    .wv-footer-legal {
        gap: 18px;
    }
}

/* =========================================================
   STARTSEITE – JOOMLA MAIN BODY AUSBLENDEN

   Startseite: Menü-Item-ID 101
   Die Startseite wird vollständig über eigene Helix-
   Sektionen aufgebaut und benötigt keinen Component-Bereich.
   ========================================================= */

body.itemid-101 #sp-main-body {
    display: none !important;
}

/* =========================================================
   18. UNTERSEITEN – SEITEN-HERO
   Wiederverwendbares Grunddesign

   DER VERBAND
   Helix Section Title: verband-hero
   Modul: Der Verband Hero
   Position: verband-hero
   Bild: /images/verband-hero.webp

   WASSERVERSORGUNG
   Helix Section Title: wasserversorgung-hero
   Modul: Wasserversorgung Hero
   Position: wasserversorgung-hero
   Bild: /images/wasserversorgung-hero.webp
   ========================================================= */


/* =========================================================
   HELIX-SEKTIONEN
   ========================================================= */

#sp-verband-hero,
#sp-wasserversorgung-hero {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
}


/* =========================================================
   FLUID-CONTAINER NEUTRALISIEREN
   ========================================================= */

#sp-verband-hero > .container-fluid,
#sp-wasserversorgung-hero > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   HELIX-ROW NEUTRALISIEREN
   ========================================================= */

#sp-verband-hero > .container-fluid > .container-inner > .row,
#sp-wasserversorgung-hero > .container-fluid > .container-inner > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   HELIX-MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-verband-hero .sp-column,
#sp-verband-hero .sp-module,
#sp-verband-hero .sp-module-content,
#sp-wasserversorgung-hero .sp-column,
#sp-wasserversorgung-hero .sp-module,
#sp-wasserversorgung-hero .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   HERO-GRUNDFLÄCHE

   Verbindliche gemeinsame Geometrie
   für alle Unterseiten-Heros.
   ========================================================= */

.wv-page-hero {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 420px;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =========================================================
   DER VERBAND – HINTERGRUND
   ========================================================= */

.wv-page-hero-verband {
    background-image:
        linear-gradient(
            90deg,
            rgba(17, 31, 37, 0.74) 0%,
            rgba(17, 31, 37, 0.58) 40%,
            rgba(17, 31, 37, 0.22) 70%,
            rgba(17, 31, 37, 0.06) 100%
        ),
        url("/images/verband-hero.webp");
}


/* =========================================================
   WASSERVERSORGUNG – HINTERGRUND
   ========================================================= */

.wv-page-hero-supply {
    background-image:
        linear-gradient(
            90deg,
            rgba(17, 31, 37, 0.74) 0%,
            rgba(17, 31, 37, 0.58) 40%,
            rgba(17, 31, 37, 0.22) 70%,
            rgba(17, 31, 37, 0.06) 100%
        ),
        url("/images/start-versorgung.webp");
		
}


/* =========================================================
   INNENBEREICH

   Gleiche Grundbreite wie Startseite / Header.
   ========================================================= */

.wv-page-hero-inner {
    width: calc(100% - 48px);
    max-width: 1220px;

    margin: 0 auto;

    padding: 54px 0;

    box-sizing: border-box;
}


/* =========================================================
   EYEBROW

   Globaler WV-Meta-Stil.
   ========================================================= */

.wv-page-hero-eyebrow {
    margin: 0 0 13px;

    color: rgba(255, 255, 255, 0.84);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* Sehr breite Desktop-Bildschirme */

@media (min-width: 1600px) {

    .wv-page-hero-supply {
        background-position: center 45%;
    }

}

/* =========================================================
   H1

   Eigene Hero-Hierarchie.
   Bewusst größer als normale H2-Überschriften.
   ========================================================= */

.wv-page-hero-title {
    max-width: 760px;

    margin: 0 0 19px;

    color: #ffffff;

    font-size: clamp(42px, 4vw, 56px);
    font-weight: 700;
    line-height: 1.06;

    letter-spacing: -0.025em;
}


/* =========================================================
   EINLEITUNG

   Globales WV-Intro-Schriftmaß.
   ========================================================= */

.wv-page-hero-text {
    max-width: 660px;

    margin: 0;

    color: rgba(255, 255, 255, 0.91);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.58;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .wv-page-hero {
        min-height: 380px;
    }


    /* -----------------------------------------------------
       Der Verband

       Bestehender Bildausschnitt bleibt unverändert.
       ----------------------------------------------------- */

    .wv-page-hero-verband {
        background-position: 55% center;
    }


    /* -----------------------------------------------------
       Innenbereich
       ----------------------------------------------------- */

    .wv-page-hero-inner {
        width: calc(100% - 40px);

        padding-top: 48px;
        padding-bottom: 48px;
    }


    /* -----------------------------------------------------
       H1
       ----------------------------------------------------- */

    .wv-page-hero-title {
        max-width: 680px;

        font-size: 42px;
    }


    /* -----------------------------------------------------
       Einleitung
       ----------------------------------------------------- */

    .wv-page-hero-text {
        max-width: 600px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .wv-page-hero {
        min-height: 360px;
    }


    /* -----------------------------------------------------
       Der Verband

       Bestehender Bildausschnitt bleibt unverändert.
       ----------------------------------------------------- */

    .wv-page-hero-verband {
        background-position: 58% center;
    }


    /* -----------------------------------------------------
       Innenbereich
       ----------------------------------------------------- */

    .wv-page-hero-inner {
        width: 100%;
        max-width: none;

        margin: 0;

        padding:
            44px
            20px;

        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       Eyebrow

       Schriftgröße kommt automatisch über
       --wv-font-meta = 11px.
       ----------------------------------------------------- */

    .wv-page-hero-eyebrow {
        margin-bottom: 10px;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       H1
       ----------------------------------------------------- */

    .wv-page-hero-title {
        max-width: 100%;

        margin-bottom: 16px;

        font-size: 34px;
        line-height: 1.08;
    }


    /* -----------------------------------------------------
       Einleitung

       Schriftgröße kommt automatisch über
       --wv-font-intro = 15px.
       ----------------------------------------------------- */

    .wv-page-hero-text {
        max-width: 100%;

        line-height: 1.52;
    }

}

/* =========================================================
   19. DER VERBAND – AUFTRAG & VERANTWORTUNG

   Helix Section Title: verband-auftrag
   Modul: Der Verband Auftrag
   Position: verband-auftrag
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-verband-auftrag {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}

#sp-verband-auftrag .sp-module,
#sp-verband-auftrag .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}

.wv-mission {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-mission-intro {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW

   Einheitlicher WV-Meta-Stil
   ========================================================= */

.wv-mission-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-mission-title {
    margin: 0;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   HAUPTLAYOUT

   Links erläuternder Text
   Rechts drei Grundsätze
   ========================================================= */

.wv-mission-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 78px;

    align-items: start;
}


/* =========================================================
   LINKE TEXTSPALTE
   ========================================================= */

.wv-mission-copy {
    min-width: 0;

    max-width: 650px;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-mission-lead {
    margin: 0 0 20px;

    color: var(--wv-ink);

    font-size: var(--wv-font-lead);
    font-weight: 500;
    line-height: 1.55;

    letter-spacing: -0.008em;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-mission-text {
    margin: 0 0 16px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}

.wv-mission-text:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RECHTE SPALTE – GRUNDSÄTZE
   ========================================================= */

.wv-mission-principles {
    min-width: 0;

    padding-left: 34px;

    border-left: 1px solid var(--wv-line);
}


/* =========================================================
   EINZELNER GRUNDSATZ

   Die im HTML vorhandenen Nummern werden nicht angezeigt.
   Stattdessen erscheint links ein kurzer blauer Strich.
   ========================================================= */

.wv-mission-principle {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr);

    gap: 15px;

    position: relative;

    padding: 0 0 27px;
}

.wv-mission-principle:last-child {
    padding-bottom: 0;
}


/* =========================================================
   BLAUER AKZENTSTRICH
   ========================================================= */

.wv-mission-principle::before {
    content: "";

    display: block;

    width: 24px;
    height: 2px;

    margin-top: 13px;

    background: var(--wv-blue);
}


/* =========================================================
   NUMMER AUS DEM HTML VERBERGEN

   Bleibt semantisch im HTML erhalten,
   wird visuell jedoch nicht dargestellt.
   ========================================================= */

.wv-mission-principle-number {
    display: none;
}


/* =========================================================
   TITEL DER GRUNDSÄTZE
   ========================================================= */

.wv-mission-principle h3 {
    margin: 0 0 7px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   TEXT DER GRUNDSÄTZE
   ========================================================= */

.wv-mission-principle p {
    max-width: 430px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-verband-auftrag {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-mission-intro {
        margin-bottom: 38px;
    }

    .wv-mission-title {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    .wv-mission-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 0.92fr);

        gap: 48px;
    }


    /* -----------------------------------------------------
       Rechte Spalte
       ----------------------------------------------------- */

    .wv-mission-principles {
        padding-left: 27px;
    }

    .wv-mission-principle {
        grid-template-columns:
            26px
            minmax(0, 1fr);

        gap: 13px;

        padding-bottom: 24px;
    }

    .wv-mission-principle::before {
        width: 22px;
    }

}


/* =========================================================
   KLEINES TABLET / GROSSES SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {

    .wv-mission-layout {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .wv-mission-copy {
        max-width: 680px;
    }

    .wv-mission-principles {
        max-width: 680px;

        padding-left: 0;
        padding-top: 26px;

        border-left: 0;
        border-top: 1px solid var(--wv-line);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-verband-auftrag {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-mission {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-mission-intro {
        margin-bottom: 30px;
    }

    .wv-mission-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }

    .wv-mission-title {
        line-height: 1.14;
    }


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    .wv-mission-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    /* -----------------------------------------------------
       Text
       ----------------------------------------------------- */

    .wv-mission-copy {
        max-width: none;
    }

    .wv-mission-lead {
        margin-bottom: 16px;

        line-height: 1.5;
    }

    .wv-mission-text {
        margin-bottom: 14px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       Grundsätze
       ----------------------------------------------------- */

    .wv-mission-principles {
        max-width: none;

        padding-top: 24px;
    }

    .wv-mission-principle {
        grid-template-columns:
            24px
            minmax(0, 1fr);

        gap: 12px;

        padding-bottom: 22px;
    }

    .wv-mission-principle::before {
        width: 20px;
        height: 2px;

        margin-top: 11px;
    }


    /* -----------------------------------------------------
       Titel
       ----------------------------------------------------- */

    .wv-mission-principle h3 {
        margin-bottom: 6px;

        line-height: 1.3;
    }


    /* -----------------------------------------------------
       Beschreibung
       ----------------------------------------------------- */

    .wv-mission-principle p {
        max-width: none;

        line-height: 1.55;
    }

}

/* =========================================================
   20. DER VERBAND – ORGANISATION
   Vertikale Organisationsstruktur

   Helix Section Title: verband-organisation
   Modul: Der Verband Organisation
   Position: verband-organisation
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-verband-organisation {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}

#sp-verband-organisation .sp-module,
#sp-verband-organisation .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}

.wv-org-simple {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-org-simple-head {
    max-width: 840px;

    margin: 0 0 46px;
}

.wv-org-simple-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.wv-org-simple-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}

.wv-org-simple-intro {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   VERTIKALE LISTE
   ========================================================= */

.wv-org-simple-list {
    width: 100%;

    border-top: 1px solid var(--wv-line);
}


/* =========================================================
   EINZELNER ORGANISATIONSBEREICH
   ========================================================= */

.wv-org-simple-item {
    display: grid;

    grid-template-columns:
        210px
        minmax(0, 1fr);

    gap: 54px;

    width: 100%;

    padding: 30px 0;

    border-bottom: 1px solid var(--wv-line);

    box-sizing: border-box;
}


/* =========================================================
   LINKE BLAUE BEZEICHNUNG

   Gleicher Meta-Stil wie:
   Auftrag & Verantwortung
   Organisation
   Verbandsgebiet
   Geschichte & Entwicklung
   ========================================================= */

.wv-org-simple-label {
    padding-top: 4px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   RECHTER INHALTSBEREICH
   ========================================================= */

.wv-org-simple-content {
    width: 100%;
    max-width: 760px;

    min-width: 0;
}


/* =========================================================
   HAUPTÜBERSCHRIFTEN
   ========================================================= */

.wv-org-simple-content h3 {
    margin: 0 0 8px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.27;

    letter-spacing: -0.012em;
}


/* =========================================================
   NORMALE BESCHREIBUNGSTEXTE
   ========================================================= */

.wv-org-simple-text {
    max-width: 680px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.62;
}


/* =========================================================
   ZAHLEN / FAKTEN

   Beispiel:
   1 Verbandsvorsteher · Vorstandschaft mit 7 Mitgliedern
   ========================================================= */

.wv-org-simple-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    gap: 6px;

    margin: 0 0 10px;

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.45;
}

.wv-org-simple-facts strong {
    color: var(--wv-blue);

    font-size: var(--wv-font-lead);
    font-weight: 700;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   BEHÖRDEN & INSTITUTIONEN
   ========================================================= */

.wv-org-simple-authority {
    max-width: 680px;

    margin: 0;
}


/* =========================================================
   AUFSICHTSBEHÖRDE
   ========================================================= */

.wv-org-simple-authority h3 {
    margin: 0 0 8px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.27;

    letter-spacing: -0.012em;
}


/* =========================================================
   UMWELTAMT DER STADT NÜRNBERG
   ========================================================= */

.wv-org-simple-subtitle {
    margin: 0;

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.45;
}


/* =========================================================
   FACHBEHÖRDEN & VERBÄNDE
   ========================================================= */

.wv-org-simple-institutions {
    max-width: 680px;

    margin-top: 18px;

    padding-top: 17px;

    border-top: 1px solid var(--wv-line);
}

.wv-org-simple-institutions h3 {
    margin: 0 0 10px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.27;

    letter-spacing: -0.012em;
}


/* =========================================================
   EINZELNE FACHBEHÖRDEN / VERBÄNDE
   ========================================================= */

.wv-org-simple-institutions ul {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wv-org-simple-institutions li {
    position: relative;

    margin: 0;

    padding: 0 0 0 16px;

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.45;
}

.wv-org-simple-institutions li::before {
    content: "";

    position: absolute;

    top: 0.72em;
    left: 0;

    width: 6px;
    height: 1px;

    background: var(--wv-blue);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-verband-organisation {
        padding: 52px 0 !important;
    }

    .wv-org-simple-head {
        margin-bottom: 40px;
    }

    .wv-org-simple-title {
        font-size: 34px;
    }

    .wv-org-simple-item {
        grid-template-columns:
            170px
            minmax(0, 1fr);

        gap: 36px;

        padding: 27px 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-verband-organisation {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-org-simple {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-org-simple-head {
        margin-bottom: 30px;
    }

    .wv-org-simple-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }

    .wv-org-simple-title {
        margin-bottom: 16px;

        line-height: 1.14;
    }

    .wv-org-simple-intro {
        line-height: 1.6;
    }


    /* -----------------------------------------------------
       Bereiche untereinander
       ----------------------------------------------------- */

    .wv-org-simple-item {
        display: block;

        padding: 24px 0;
    }


    /* -----------------------------------------------------
       Blaue Bereichsbezeichnung
       ----------------------------------------------------- */

    .wv-org-simple-label {
        margin-bottom: 10px;

        padding-top: 0;

        line-height: 1.2;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Inhalt
       ----------------------------------------------------- */

    .wv-org-simple-content {
        max-width: none;
    }

    .wv-org-simple-content h3,
    .wv-org-simple-authority h3,
    .wv-org-simple-institutions h3 {
        margin-bottom: 7px;

        line-height: 1.3;
    }

    .wv-org-simple-text {
        max-width: none;

        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Zahlen / Fakten
       ----------------------------------------------------- */

    .wv-org-simple-facts {
        gap: 5px;

        margin-bottom: 9px;

        line-height: 1.45;
    }


    /* -----------------------------------------------------
       Behörden & Institutionen
       ----------------------------------------------------- */

    .wv-org-simple-subtitle,
    .wv-org-simple-institutions li {
        line-height: 1.45;
    }

    .wv-org-simple-institutions {
        margin-top: 15px;

        padding-top: 15px;
    }

    .wv-org-simple-institutions h3 {
        margin-bottom: 9px;
    }

    .wv-org-simple-institutions ul {
        gap: 6px;
    }

    .wv-org-simple-institutions li {
        padding-left: 14px;
    }

    .wv-org-simple-institutions li::before {
        width: 5px;
    }

}

/* =========================================================
   21. DER VERBAND – VERBANDSGEBIET

   Helix Section Title: verband-gebiet
   Modul: Der Verband Verbandsgebiet
   Position: verband-gebiet

   Karte:
   Leaflet + OpenStreetMap
   öffentliche GeoJSON-Gebietsgrenze
   vollständig nicht interaktiv

   Kennzahlen:
   gleiche Designsprache wie "Zahlen & Fakten"
   auf der Startseite
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-verband-gebiet {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}

#sp-verband-gebiet .sp-module,
#sp-verband-gebiet .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}

.wv-area {
    width: 100%;
}


/* =========================================================
   LAYOUT

   Die linke Inhaltsspalte bestimmt auf Desktop die Höhe
   der Grid-Zeile.

   Die rechte Kartenspalte passt sich daran an.
   ========================================================= */

.wv-area-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);

    gap: 72px;

    align-items: stretch;
}


/* =========================================================
   TEXTBEREICH
   ========================================================= */

.wv-area-content {
    min-width: 0;

    max-width: 520px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-area-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-area-title {
    margin: 0 0 21px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-area-lead {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-lead);
    font-weight: 500;
    line-height: 1.55;

    letter-spacing: -0.008em;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-area-text {
    margin: 0 0 16px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}

.wv-area-text:last-of-type {
    margin-bottom: 0;
}


/* =========================================================
   KENNZAHLEN
   ========================================================= */

.wv-area-facts {
    display: flex;
    flex-direction: column;

    margin-top: 30px;

    border-top: 1px solid var(--wv-line);
}


/* =========================================================
   EINZELNE KENNZAHL
   ========================================================= */

.wv-area-fact {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    margin: 0 !important;

    padding: 18px 0;

    border: 0 !important;
}

.wv-area-fact + .wv-area-fact {
    border-top:
        1px solid var(--wv-line-soft) !important;
}


/* =========================================================
   ZAHLENZEILE

   Entspricht der Hierarchie auf der Startseite:

   rund 2.000 ha
   Verbandsgebiet
   ========================================================= */

.wv-area-fact-main {
    display: flex;
    align-items: baseline;

    gap: 5px;

    margin: 0 0 4px;

    white-space: nowrap;
}


/* =========================================================
   "RUND"
   ========================================================= */

.wv-area-fact-prefix {
    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0;
}


/* =========================================================
   ZAHL
   ========================================================= */

.wv-area-fact-number {
    color: var(--wv-ink);

    font-size: 46px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -0.03em;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   EINHEIT
   ========================================================= */

.wv-area-fact-unit {
    color: var(--wv-ink);

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

.wv-area-fact-label {
    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.4;
}


/* =========================================================
   KARTENBEREICH

   Die Karte nutzt weiterhin automatisch die Höhe
   der linken Inhaltsspalte.

   Der bereits abgestimmte 14-px-Ausgleich bleibt erhalten.
   ========================================================= */

.wv-area-map {
    display: flex;
    flex-direction: column;

    align-self: stretch;

    min-width: 0;

    width: 100%;

    margin: 0;

    padding-bottom: 14px;

    box-sizing: border-box;
}


/* =========================================================
   LEAFLET-CONTAINER

   Desktop:
   keine feste Höhe
   keine Mindesthöhe
   ========================================================= */

.wv-area-map-frame {
    position: relative;

    flex: 1 1 0;

    width: 100%;

    height: 0;
    min-height: 0;

    overflow: hidden;

    background: #eef2f3;

    border: 1px solid var(--wv-line);

    box-sizing: border-box;

    isolation: isolate;
}


/* =========================================================
   LEAFLET BASIS
   ========================================================= */

.wv-area-map-frame.leaflet-container {
    background: #eef2f3;

    font-family: inherit;

    cursor: default;
}


/* =========================================================
   JOOMLA / HELIX BILDKONFLIKTE VERHINDERN
   ========================================================= */

.wv-area-map-frame .leaflet-tile,
.wv-area-map-frame .leaflet-marker-icon,
.wv-area-map-frame .leaflet-marker-shadow {
    max-width: none !important;
    max-height: none !important;
}


/* =========================================================
   KARTENKACHELN
   ========================================================= */

.wv-area-map-frame .leaflet-tile-pane {
    filter:
        saturate(0.82)
        brightness(1.035);
}


/* =========================================================
   GEOJSON-OVERLAY
   ========================================================= */

.wv-area-map-frame .leaflet-overlay-pane svg {
    overflow: visible;
}


/* =========================================================
   BEDIENELEMENTE AUSBLENDEN
   ========================================================= */

.wv-area-map-frame .leaflet-control-zoom {
    display: none !important;
}


/* =========================================================
   ATTRIBUTION
   ========================================================= */

.wv-area-map-frame .leaflet-control-attribution {
    margin: 0 !important;

    padding: 3px 6px !important;

    background:
        rgba(255, 255, 255, 0.90) !important;

    color: #687277 !important;

    font-family: inherit;

    font-size: 10px !important;
    font-weight: 400;
    line-height: 1.35 !important;

    box-shadow: none !important;
}

.wv-area-map-frame
.leaflet-control-attribution a {
    color: #526166 !important;

    text-decoration: none;
}

.wv-area-map-frame
.leaflet-control-attribution a:hover,
.wv-area-map-frame
.leaflet-control-attribution a:focus {
    color: var(--wv-blue) !important;

    text-decoration: underline;
}

.wv-area-map-frame
.leaflet-control-attribution a:focus-visible {
    outline:
        2px solid var(--wv-blue);

    outline-offset: 2px;
}


/* =========================================================
   KARTENBESCHRIFTUNG
   ========================================================= */

.wv-area-map figcaption {
    flex: 0 0 auto;

    margin: 9px 0 0;

    color: var(--wv-muted);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}


/* =========================================================
   FEHLERZUSTAND
   ========================================================= */

.wv-area-map-frame.wv-area-map-error {
    display: flex;

    align-items: center;
    justify-content: center;

    background: #f5f7f8;
}

.wv-area-map-frame.wv-area-map-error::after {
    content:
        "Karte derzeit nicht verfügbar.";

    padding: 24px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-verband-gebiet {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    .wv-area-layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap: 44px;

        align-items: stretch;
    }


    /* -----------------------------------------------------
       Typografie
       ----------------------------------------------------- */

    .wv-area-title {
        font-size: 34px;
    }

    .wv-area-lead {
        font-size: 17px;
    }


    /* -----------------------------------------------------
       Kennzahlen
       ----------------------------------------------------- */

    .wv-area-fact-number {
        font-size: 40px;
    }

    .wv-area-fact-unit {
        font-size: 16px;
    }


    /* -----------------------------------------------------
       Karte
       ----------------------------------------------------- */

    .wv-area-map {
        padding-bottom: 14px;
    }

    .wv-area-map-frame {
        height: 0;
        min-height: 0;
    }

}


/* =========================================================
   KLEINES TABLET / GROSSES SMARTPHONE

   Ab hier stehen Text und Karte untereinander.
   ========================================================= */

@media (max-width: 767.98px) {

    .wv-area-layout {
        grid-template-columns: 1fr;

        gap: 36px;

        align-items: start;
    }

    .wv-area-content {
        max-width: 680px;
    }

    .wv-area-map {
        display: block;

        height: auto;

        padding-bottom: 0;
    }

    .wv-area-map-frame {
        height: 420px;

        min-height: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-verband-gebiet {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-area {
        width:
            calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    .wv-area-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    /* -----------------------------------------------------
       Text
       ----------------------------------------------------- */

    .wv-area-content {
        max-width: none;
    }

    .wv-area-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }

    .wv-area-title {
        margin-bottom: 17px;

        line-height: 1.14;
    }

    .wv-area-lead {
        margin-bottom: 16px;

        line-height: 1.5;
    }

    .wv-area-text {
        margin-bottom: 14px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       Kennzahlen
       ----------------------------------------------------- */

    .wv-area-facts {
        margin-top: 24px;
    }

    .wv-area-fact {
        margin: 0 !important;

        padding: 16px 0;

        border: 0 !important;
    }

    .wv-area-fact + .wv-area-fact {
        border-top:
            1px solid var(--wv-line-soft) !important;
    }

    .wv-area-fact-main {
        gap: 4px;

        margin-bottom: 4px;
    }

    .wv-area-fact-number {
        font-size: 36px;
    }

    .wv-area-fact-unit {
        font-size: 15px;
    }


    /* -----------------------------------------------------
       Karte

       Bereits auf iPhone geprüft:
       bestehende Höhe bleibt unverändert.
       ----------------------------------------------------- */

    .wv-area-map {
        padding-bottom: 0;
    }

    .wv-area-map-frame {
        height: 370px;

        min-height: 0;
    }

    .wv-area-map figcaption {
        margin-top: 8px;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       Attribution
       ----------------------------------------------------- */

    .wv-area-map-frame
    .leaflet-control-attribution {
        padding:
            2px 4px !important;

        font-size:
            9px !important;

        line-height:
            1.3 !important;
    }

}


/* =========================================================
   SEHR KLEINE DISPLAYS
   ========================================================= */

@media (max-width: 389.98px) {

    .wv-area-map-frame {
        height: 340px;
    }

}

/* =========================================================
   22. DER VERBAND – GESCHICHTE & ENTWICKLUNG

   Helix Section Title: verband-geschichte
   Modul: Der Verband Geschichte
   Position: verband-geschichte

   Aufbau:
   Eyebrow
   Überschrift
   Einleitung
   CTA
   Timeline

   Timeline:
   Vergangenheit = offene Marker
   aktueller Stand = gefüllter Marker
   Fortsetzung nach HEUTE = Entwicklung geht weiter

   Button:
   globaler .wv-btn-primary
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-verband-geschichte {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}

#sp-verband-geschichte .sp-module,
#sp-verband-geschichte .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}

.wv-history {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH

   Der CTA gehört bewusst zum Kopfbereich.

   Abstand:
   Text -> CTA      24 px
   CTA  -> Timeline 46 px
   ========================================================= */

.wv-history-head {
    max-width: 800px;

    margin: 0 0 46px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-history-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-history-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-history-intro {
    max-width: 720px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   CTA
   ========================================================= */

.wv-history-action {
    margin: 24px 0 0;
}

/* =========================================================
   TIMELINE – DESKTOP
   ========================================================= */

.wv-history-timeline {
    --wv-history-gap: 52px;

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--wv-history-gap);

    width: 100%;
}


/* =========================================================
   EINZELNER MEILENSTEIN
   ========================================================= */

.wv-history-item {
    position: relative;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   VERBINDUNG ZUM NÄCHSTEN MEILENSTEIN
   ========================================================= */

.wv-history-item:not(:last-child)::after {
    content: "";

    position: absolute;

    z-index: 1;

    top: 7px;
    left: 7px;

    width:
        calc(100% + var(--wv-history-gap));

    height: 1px;

    background:
        rgba(56, 164, 194, 0.38);
}


/* =========================================================
   FORTSETZUNG NACH HEUTE
   ========================================================= */

.wv-history-item:last-child::after {
    content: "";

    position: absolute;

    z-index: 1;

    top: 7px;
    left: 7px;

    width: 90px;
    height: 1px;

    background:
        rgba(56, 164, 194, 0.38);
}


/* =========================================================
   MARKER – VERGANGENE STATIONEN
   ========================================================= */

.wv-history-marker {
    position: relative;

    z-index: 2;

    width: 15px;
    height: 15px;

    margin: 0 0 24px;

    background: #f8fafb;

    border: 2px solid var(--wv-blue);
    border-radius: 50%;

    box-sizing: border-box;
}


/* =========================================================
   MARKER – AKTUELLER STAND
   ========================================================= */

.wv-history-item-current .wv-history-marker {
    background: var(--wv-blue);

    border-color: var(--wv-blue);

    box-shadow:
        0 0 0 4px rgba(56, 164, 194, 0.12);
}


/* =========================================================
   INHALT
   ========================================================= */

.wv-history-content {
    max-width: 330px;
}


/* =========================================================
   JAHR / META
   ========================================================= */

.wv-history-year {
    margin: 0 0 9px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   MEILENSTEIN-ÜBERSCHRIFT
   ========================================================= */

.wv-history-content h3 {
    margin: 0 0 10px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   MEILENSTEIN-TEXT
   ========================================================= */

.wv-history-text {
    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.62;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-verband-geschichte {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-history-head {
        margin-bottom: 42px;
    }

    .wv-history-title {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .wv-history-action {
        margin-top: 22px;
    }


    /* -----------------------------------------------------
       Timeline
       ----------------------------------------------------- */

    .wv-history-timeline {
        --wv-history-gap: 34px;
    }

}


/* =========================================================
   KLEINES TABLET / GROSSES SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {

    .wv-history-timeline {
        display: block;
    }


    /* -----------------------------------------------------
       Meilenstein
       ----------------------------------------------------- */

    .wv-history-item {
        display: grid;

        grid-template-columns:
            15px
            minmax(0, 1fr);

        gap: 22px;

        padding-bottom: 34px;
    }

    .wv-history-item:last-child {
        padding-bottom: 0;
    }


    /* -----------------------------------------------------
       Verbindung zur nächsten Station
       ----------------------------------------------------- */

    .wv-history-item:not(:last-child)::after {
        content: "";

        display: block;

        position: absolute;

        z-index: 1;

        top: 7px;
        left: 7px;

        width: 1px;
        height: calc(100% + 7px);

        background:
            rgba(56, 164, 194, 0.38);
    }


    /* -----------------------------------------------------
       Kurze Fortsetzung nach HEUTE
       ----------------------------------------------------- */

    .wv-history-item:last-child::after {
        content: "";

        display: block;

        position: absolute;

        z-index: 1;

        top: 7px;
        left: 7px;

        width: 1px;
        height: 48px;

        background:
            rgba(56, 164, 194, 0.38);
    }


    /* -----------------------------------------------------
       Marker
       ----------------------------------------------------- */

    .wv-history-marker {
        margin: 0;
    }


    /* -----------------------------------------------------
       Inhalt
       ----------------------------------------------------- */

    .wv-history-content {
        max-width: 620px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-verband-geschichte {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-history {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-history-head {
        margin-bottom: 34px;
    }

    .wv-history-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }

    .wv-history-title {
        margin-bottom: 16px;

        line-height: 1.14;
    }

    .wv-history-intro {
        line-height: 1.6;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .wv-history-action {
        margin-top: 20px;
    }


    /* -----------------------------------------------------
       Timeline
       ----------------------------------------------------- */

    .wv-history-item {
        grid-template-columns:
            15px
            minmax(0, 1fr);

        gap: 18px;

        padding-bottom: 30px;
    }


    /* -----------------------------------------------------
       Fortsetzung nach HEUTE
       ----------------------------------------------------- */

    .wv-history-item:last-child::after {
        height: 48px;
    }


    /* -----------------------------------------------------
       Jahr / Meta
       ----------------------------------------------------- */

    .wv-history-year {
        margin-bottom: 7px;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Überschrift
       ----------------------------------------------------- */

    .wv-history-content h3 {
        margin-bottom: 8px;

        line-height: 1.3;
    }


    /* -----------------------------------------------------
       Text
       ----------------------------------------------------- */

    .wv-history-text {
        line-height: 1.55;
    }

}

/* =========================================================
   DER VERBAND – JOOMLA MAIN BODY AUSBLENDEN

   Nur auf dem Menüpunkt "Der Verband".
   Die Helix-Sections bleiben vollständig erhalten.
   ========================================================= */

body.itemid-111 #sp-main-body {
    display: none !important;
}

/* =========================================================
   24. WASSERVERSORGUNG – DER WEG DES WASSERS

   Helix Section Title:
   wasserversorgung-weg

   Position:
   wasserversorgung-weg

   Modul:
   Wasserversorgung Weg des Wassers

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-wasserversorgung-weg {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-wasserversorgung-weg .sp-module,
#sp-wasserversorgung-weg .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-supply-route {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-supply-route-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-supply-route-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-supply-route-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-supply-route-intro {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   VIER STATIONEN / NAVIGATION
   ========================================================= */

.wv-supply-route-steps {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    width: 100%;

    margin: 0;
    padding: 0;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNER SCHRITT

   Das komplette Feld ist anklickbar.
   Optisch bleibt es beim bisherigen Design.
   ========================================================= */

.wv-supply-route-step {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    min-width: 0;

    margin: 0;

    padding:
        24px
        22px
        25px;

    box-sizing: border-box;

    border-right:
        1px solid var(--wv-line);

    color: inherit;

    text-decoration: none;

    cursor: pointer;
}


.wv-supply-route-step:first-child {
    padding-left: 0;
}


.wv-supply-route-step:last-child {
    padding-right: 0;

    border-right: 0;
}


/* =========================================================
   NUMMER
   ========================================================= */

.wv-supply-route-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    border-radius: 50%;

    background: var(--wv-blue);

    color: #ffffff;

    font-size: var(--wv-font-body);
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   SCHRITT-INHALT
   ========================================================= */

.wv-supply-route-step-content {
    display: block;

    min-width: 0;
}


/* =========================================================
   SCHRITT-TITEL
   ========================================================= */

.wv-supply-route-step-title {
    display: block;

    margin:
        2px
        0
        7px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 700;
    line-height: 1.3;
}


/* =========================================================
   SCHRITT-TEXT
   ========================================================= */

.wv-supply-route-step-text {
    display: block;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   HOVER

   Nur Geräte mit echter Maus.
   Keine Änderung auf Touch-Geräten.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .wv-supply-route-step:hover {
        background: #f8fafb;
    }


    .wv-supply-route-step:hover
    .wv-supply-route-step-title {
        color: var(--wv-blue);
    }

}


/* =========================================================
   TASTATURFOKUS
   ========================================================= */

.wv-supply-route-step:focus-visible {
    position: relative;

    z-index: 1;

    outline:
        2px solid var(--wv-blue);

    outline-offset: -2px;

    background: #f8fafb;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-wasserversorgung-weg {
        padding: 52px 0 !important;
    }


    .wv-supply-route-header {
        margin-bottom: 38px;
    }


    .wv-supply-route-title {
        font-size: 34px;
    }


    .wv-supply-route-steps {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .wv-supply-route-step {
        padding:
            24px
            22px;
    }


    .wv-supply-route-step:first-child {
        padding-left: 0;
    }


    .wv-supply-route-step:nth-child(2) {
        padding-right: 0;

        border-right: 0;
    }


    .wv-supply-route-step:nth-child(-n + 2) {
        border-bottom:
            1px solid var(--wv-line);
    }


    .wv-supply-route-step:nth-child(3) {
        padding-left: 0;
    }


    .wv-supply-route-step:last-child {
        padding-right: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-wasserversorgung-weg {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Gleicher Seitenabstand wie andere Unterseiten
       ----------------------------------------------------- */

    .wv-supply-route {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-supply-route-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-supply-route-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-supply-route-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-supply-route-intro {
        max-width: 100%;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       STATIONEN UNTEREINANDER
       ----------------------------------------------------- */

    .wv-supply-route-steps {
        display: block;
    }


    .wv-supply-route-step,
    .wv-supply-route-step:first-child,
    .wv-supply-route-step:nth-child(2),
    .wv-supply-route-step:nth-child(3),
    .wv-supply-route-step:last-child {
        width: 100%;

        padding:
            18px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--wv-line);

        box-sizing: border-box;
    }


    .wv-supply-route-step:last-child {
        border-bottom: 0;
    }


    .wv-supply-route-number {
        width: 26px;
        height: 26px;

        flex-basis: 26px;
    }

}

/* =========================================================
   25. WASSERVERSORGUNG – DONAU-MAIN-ÜBERLEITUNG

   Helix Section Title:
   wasserversorgung-ueberleitung

   Position:
   wasserversorgung-ueberleitung

   Modul:
   Wasserversorgung Überleitung

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #f8fafb
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-wasserversorgung-ueberleitung {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;

    scroll-margin-top:
        var(--wv-header-height);
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-wasserversorgung-ueberleitung .sp-module,
#sp-wasserversorgung-ueberleitung .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-supply-overleitung {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-supply-overleitung-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-supply-overleitung-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-supply-overleitung-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   ERSTER TEXT
   ========================================================= */

.wv-supply-overleitung-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   ZWEITER TEXT
   ========================================================= */

.wv-supply-overleitung-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   GRAFIK

   Original:
   1071 × 750 px

   Der eigentliche grafische Inhalt beginnt
   nach rund 53 px Weißraum.

   53 / 1071 = 4,949 %
   ========================================================= */

.wv-supply-overleitung-figure {
    --wv-supply-overleitung-crop-top: -4.949%;

    width: 100%;
    max-width: 1071px;

    margin:
        0;

    padding: 0;
}


/* =========================================================
   GRAFIK-BUTTON

   Sichtbarer Bereich:
   750 - 53 = 697 px
   ========================================================= */

.wv-supply-overleitung-zoom {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1071 / 697;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;
    text-align: inherit;

    appearance: none;
    -webkit-appearance: none;

    cursor: zoom-in;
}


/* =========================================================
   GRAFIK
   ========================================================= */

.wv-supply-overleitung-zoom > img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    margin:
        var(--wv-supply-overleitung-crop-top)
        0
        0;

    padding: 0;

    pointer-events: none;
}


/* =========================================================
   GRAFIK FOKUS
   ========================================================= */

.wv-supply-overleitung-zoom:focus-visible {
    outline:
        2px solid var(--wv-blue);

    outline-offset: 4px;
}


/* =========================================================
   BILDUNTERSCHRIFT
   ========================================================= */

.wv-supply-overleitung-figure figcaption {
    margin-top: 9px;

    color: var(--wv-muted);

    font-size: var(--wv-font-meta);
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================================
   ZOOM-ICON – GEMEINSAM FÜR BLOCK 25–28
   ========================================================= */

.wv-image-zoom-icon {
    position: absolute;

    z-index: 2;

    top: 10px;
    right: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    box-sizing: border-box;

    border:
        1px solid rgba(255, 255, 255, 0.50);

    border-radius: 50%;

    background:
        rgba(47, 54, 57, 0.36);

    pointer-events: none;
}


.wv-image-zoom-icon svg {
    display: block;

    width: 18px;
    height: 18px;

    fill: none;

    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   AUFKLAPPBEREICH
   ========================================================= */

.wv-supply-details {
    width: 100%;
    max-width: 1071px;

    margin:
        34px
        0
        0;

    border-top:
        1px solid var(--wv-line);
}


/* =========================================================
   SUMMARY
   ========================================================= */

.wv-supply-details-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    width: 100%;

    padding:
        18px
        0;

    color: var(--wv-blue);

    font-size: var(--wv-font-intro);
    font-weight: 700;
    line-height: 1.4;

    list-style: none;

    cursor: pointer;
}


.wv-supply-details-summary::-webkit-details-marker {
    display: none;
}


.wv-supply-details-summary::marker {
    content: "";
}


/* =========================================================
   CHEVRON
   ========================================================= */

.wv-supply-details-summary::after {
    content: "";

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    margin-right: 3px;

    border-right:
        1.5px solid currentColor;

    border-bottom:
        1.5px solid currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);
}


.wv-supply-details[open]
.wv-supply-details-summary::after {
    transform:
        rotate(225deg)
        translate(-2px, -2px);
}


/* =========================================================
   TASTATURFOKUS
   ========================================================= */

.wv-supply-details-summary:focus-visible {
    outline:
        2px solid var(--wv-blue);

    outline-offset: 4px;
}


/* =========================================================
   DETAILINHALT
   ========================================================= */

.wv-supply-details-content {
    padding:
        4px
        0
        2px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.68;
}


.wv-supply-details-content p {
    margin:
        0
        0
        18px;
}


.wv-supply-details-content p:last-child {
    margin-bottom: 0;
}


.wv-supply-details-content strong {
    color: var(--wv-ink);

    font-weight: 700;
}


/* =========================================================
   GLOBALE GRAFIK-LIGHTBOX
   NUR EINMAL DEFINIEREN
   ========================================================= */

.wv-image-lightbox[hidden] {
    display: none !important;
}


.wv-image-lightbox {
    position: fixed;

    z-index: 100000;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        rgba(18, 24, 27, 0.94);

    overflow: hidden;
}


/* =========================================================
   HINTERGRUNDSEITE SPERREN
   ========================================================= */

html.wv-lightbox-open {
    overflow: hidden !important;
}


body.wv-lightbox-open {
    position: fixed;

    left: 0;
    right: 0;

    width: 100%;

    overflow: hidden !important;
}


/* =========================================================
   LIGHTBOX-STAGE
   ========================================================= */

.wv-image-lightbox-stage {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    overflow: hidden;

    touch-action: none;

    overscroll-behavior: contain;
}


/* =========================================================
   LIGHTBOX-BILD
   ========================================================= */

.wv-image-lightbox-image {
    display: block;

    width: auto;
    height: auto;

    max-width:
        calc(100vw - 32px);

    max-height:
        calc(100vh - 96px);

    max-height:
        calc(100dvh - 96px);

    margin: 0;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    transform-origin: center center;

    user-select: none;
    -webkit-user-select: none;

    -webkit-user-drag: none;

    touch-action: none;

    will-change: transform;
}


/* =========================================================
   LIGHTBOX SCHLIESSEN
   ========================================================= */

.wv-image-lightbox-close {
    position: fixed;

    z-index: 100002;

    top:
        calc(14px + env(safe-area-inset-top, 0px));

    right:
        calc(14px + env(safe-area-inset-right, 0px));

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    border:
        1px solid rgba(255, 255, 255, 0.44);

    border-radius: 50%;

    background:
        rgba(47, 54, 57, 0.36);

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 28px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


.wv-image-lightbox-close:focus-visible {
    outline:
        2px solid #ffffff;

    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-wasserversorgung-ueberleitung {
        padding: 52px 0 !important;
    }


    .wv-supply-overleitung-header {
        margin-bottom: 38px;
    }


    .wv-supply-overleitung-title {
        font-size: 34px;
    }


    .wv-supply-details {
        margin-top: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-wasserversorgung-ueberleitung {
        padding: 40px 0 !important;

        scroll-margin-top:
            var(--wv-header-height-mobile);
    }


    /* -----------------------------------------------------
       Gleicher Seitenabstand wie alle Unterseiten
       ----------------------------------------------------- */

    .wv-supply-overleitung {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-supply-overleitung-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-supply-overleitung-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-supply-overleitung-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-supply-overleitung-lead,
    .wv-supply-overleitung-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       ZOOM-ICON
       ----------------------------------------------------- */

    .wv-image-zoom-icon {
        top: 8px;
        right: 8px;

        width: 32px;
        height: 32px;
    }


    .wv-image-zoom-icon svg {
        width: 17px;
        height: 17px;
    }


    /* -----------------------------------------------------
       DETAILBEREICH
       ----------------------------------------------------- */

    .wv-supply-details {
        max-width: 100%;

        margin-top: 26px;
    }


    .wv-supply-details-summary {
        padding:
            16px
            0;

        font-size: var(--wv-font-intro);
    }


    /* -----------------------------------------------------
       LIGHTBOX
       ----------------------------------------------------- */

    .wv-image-lightbox-image {
        max-width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 82px);

        max-height:
            calc(100dvh - 82px);
    }

}

/* =========================================================
   26. WASSERVERSORGUNG – BRUNNENFASSUNG

   Helix Section Title:
   wasserversorgung-brunnenfassung

   Position:
   wasserversorgung-brunnenfassung

   Modul:
   Wasserversorgung Brunnenfassung

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-wasserversorgung-brunnenfassung {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;

    scroll-margin-top:
        var(--wv-header-height);
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-wasserversorgung-brunnenfassung .sp-module,
#sp-wasserversorgung-brunnenfassung .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-supply-brunnen {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-supply-brunnen-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-supply-brunnen-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-supply-brunnen-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   ERSTER TEXT
   ========================================================= */

.wv-supply-brunnen-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   ZWEITER TEXT
   ========================================================= */

.wv-supply-brunnen-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   GRAFIK

   Original:
   576 × 350 px

   Bewusst linksbündig – gleiche Achse wie Text.
   ========================================================= */

.wv-supply-brunnen-figure {
    width: 100%;
    max-width: 760px;

    margin: 0;

    padding: 0;
}


/* =========================================================
   GRAFIK-BUTTON
   ========================================================= */

.wv-supply-brunnen-zoom {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 576 / 350;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;
    text-align: inherit;

    appearance: none;
    -webkit-appearance: none;

    cursor: zoom-in;
}


/* =========================================================
   GRAFIK
   ========================================================= */

.wv-supply-brunnen-zoom > img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* =========================================================
   GRAFIK FOKUS
   ========================================================= */

.wv-supply-brunnen-zoom:focus-visible {
    outline:
        2px solid var(--wv-blue);

    outline-offset: 4px;
}


/* =========================================================
   BILDUNTERSCHRIFT
   ========================================================= */

.wv-supply-brunnen-figure figcaption {
    margin-top: 9px;

    color: var(--wv-muted);

    font-size: var(--wv-font-meta);
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-wasserversorgung-brunnenfassung {
        padding: 52px 0 !important;
    }


    .wv-supply-brunnen-header {
        margin-bottom: 38px;
    }


    .wv-supply-brunnen-title {
        font-size: 34px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-wasserversorgung-brunnenfassung {
        padding: 40px 0 !important;

        scroll-margin-top:
            var(--wv-header-height-mobile);
    }


    /* -----------------------------------------------------
       Gleicher Seitenabstand wie alle Unterseiten
       ----------------------------------------------------- */

    .wv-supply-brunnen {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-supply-brunnen-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-supply-brunnen-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-supply-brunnen-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-supply-brunnen-lead,
    .wv-supply-brunnen-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       GRAFIK
       ----------------------------------------------------- */

    .wv-supply-brunnen-figure {
        width: 100%;
        max-width: none;
    }

}

/* =========================================================
   27. WASSERVERSORGUNG – UFERFILTRAT

   Helix Section Title:
   wasserversorgung-uferfiltrat

   Position:
   wasserversorgung-uferfiltrat

   Modul:
   Wasserversorgung Uferfiltrat

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #f8fafb
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-wasserversorgung-uferfiltrat {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;

    scroll-margin-top:
        var(--wv-header-height);
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-wasserversorgung-uferfiltrat .sp-module,
#sp-wasserversorgung-uferfiltrat .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-supply-uferfiltrat {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-supply-uferfiltrat-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-supply-uferfiltrat-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-supply-uferfiltrat-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   ERSTER TEXT
   ========================================================= */

.wv-supply-uferfiltrat-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   ZWEITER TEXT
   ========================================================= */

.wv-supply-uferfiltrat-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   GRAFIK

   Original:
   1027 × 688 px

   Wie Block 25 bewusst linksbündig.
   ========================================================= */

.wv-supply-uferfiltrat-figure {
    width: 100%;
    max-width: 1027px;

    margin: 0;

    padding: 0;
}


/* =========================================================
   GRAFIK-BUTTON
   ========================================================= */

.wv-supply-uferfiltrat-zoom {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1027 / 688;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;
    text-align: inherit;

    appearance: none;
    -webkit-appearance: none;

    cursor: zoom-in;
}


/* =========================================================
   GRAFIK
   ========================================================= */

.wv-supply-uferfiltrat-zoom > img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* =========================================================
   GRAFIK FOKUS
   ========================================================= */

.wv-supply-uferfiltrat-zoom:focus-visible {
    outline:
        2px solid var(--wv-blue);

    outline-offset: 4px;
}


/* =========================================================
   BILDUNTERSCHRIFT
   ========================================================= */

.wv-supply-uferfiltrat-figure figcaption {
    margin-top: 9px;

    color: var(--wv-muted);

    font-size: var(--wv-font-meta);
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-wasserversorgung-uferfiltrat {
        padding: 52px 0 !important;
    }


    .wv-supply-uferfiltrat-header {
        margin-bottom: 38px;
    }


    .wv-supply-uferfiltrat-title {
        font-size: 34px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-wasserversorgung-uferfiltrat {
        padding: 40px 0 !important;

        scroll-margin-top:
            var(--wv-header-height-mobile);
    }


    /* -----------------------------------------------------
       Gleicher Seitenabstand wie alle Unterseiten
       ----------------------------------------------------- */

    .wv-supply-uferfiltrat {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-supply-uferfiltrat-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-supply-uferfiltrat-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-supply-uferfiltrat-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-supply-uferfiltrat-lead,
    .wv-supply-uferfiltrat-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       GRAFIK
       ----------------------------------------------------- */

    .wv-supply-uferfiltrat-figure {
        width: 100%;
        max-width: none;
    }

}

/* =========================================================
   28. WASSERVERSORGUNG – SPEICHERUNG & VERTEILUNG

   Helix Section Title:
   wasserversorgung-verteilung

   Position:
   wasserversorgung-verteilung

   Modul:
   Wasserversorgung Verteilung

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-wasserversorgung-verteilung {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;

    scroll-margin-top:
        var(--wv-header-height);
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-wasserversorgung-verteilung .sp-module,
#sp-wasserversorgung-verteilung .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-supply-verteilung {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-supply-verteilung-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-supply-verteilung-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-supply-verteilung-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   ERSTER TEXT
   ========================================================= */

.wv-supply-verteilung-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   ZWEITER TEXT
   ========================================================= */

.wv-supply-verteilung-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   GRAFIK

   Original:
   1050 × 454 px

   Links bündig mit Text und Überschrift.
   ========================================================= */

.wv-supply-verteilung-figure {
    width: 100%;
    max-width: 1050px;

    margin: 0;

    padding: 0;
}


/* =========================================================
   GRAFIK-BUTTON
   ========================================================= */

.wv-supply-verteilung-zoom {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1050 / 454;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;
    text-align: inherit;

    appearance: none;
    -webkit-appearance: none;

    cursor: zoom-in;
}


/* =========================================================
   GRAFIK
   ========================================================= */

.wv-supply-verteilung-zoom > img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* =========================================================
   GRAFIK FOKUS
   ========================================================= */

.wv-supply-verteilung-zoom:focus-visible {
    outline:
        2px solid var(--wv-blue);

    outline-offset: 4px;
}


/* =========================================================
   BILDUNTERSCHRIFT
   ========================================================= */

.wv-supply-verteilung-figure figcaption {
    margin-top: 9px;

    color: var(--wv-muted);

    font-size: var(--wv-font-meta);
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-wasserversorgung-verteilung {
        padding: 52px 0 !important;
    }


    .wv-supply-verteilung-header {
        margin-bottom: 38px;
    }


    .wv-supply-verteilung-title {
        font-size: 34px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-wasserversorgung-verteilung {
        padding: 40px 0 !important;

        scroll-margin-top:
            var(--wv-header-height-mobile);
    }


    /* -----------------------------------------------------
       Gleicher Seitenabstand wie alle Unterseiten
       ----------------------------------------------------- */

    .wv-supply-verteilung {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-supply-verteilung-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-supply-verteilung-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-supply-verteilung-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-supply-verteilung-lead,
    .wv-supply-verteilung-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       GRAFIK
       ----------------------------------------------------- */

    .wv-supply-verteilung-figure {
        width: 100%;
        max-width: none;
    }

}

/* =========================================================
   29. WASSERVERSORGUNG – BEREGNUNG AUF DEM FELD

   Helix Section Title:
   wasserversorgung-beregnung

   Position:
   wasserversorgung-beregnung

   Modul:
   Wasserversorgung Beregnung

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #f8fafb
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-wasserversorgung-beregnung {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-wasserversorgung-beregnung .sp-module,
#sp-wasserversorgung-beregnung .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-supply-beregnung {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-supply-beregnung-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-supply-beregnung-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.wv-supply-beregnung-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-supply-beregnung-intro {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   DREI BEWÄSSERUNGSVERFAHREN
   ========================================================= */

.wv-supply-beregnung-methods {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    width: 100%;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNES VERFAHREN
   ========================================================= */

.wv-supply-beregnung-method {
    min-width: 0;

    margin: 0;

    padding:
        24px
        28px
        25px;

    box-sizing: border-box;

    border-right:
        1px solid var(--wv-line);
}


.wv-supply-beregnung-method:first-child {
    padding-left: 0;
}


.wv-supply-beregnung-method:last-child {
    padding-right: 0;

    border-right: 0;
}


/* =========================================================
   KLEINE EINORDNUNG
   ========================================================= */

.wv-supply-beregnung-method-meta {
    margin:
        0
        0
        8px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   VERFAHREN – TITEL
   ========================================================= */

.wv-supply-beregnung-method h3 {
    margin:
        0
        0
        10px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   VERFAHREN – TEXT
   ========================================================= */

.wv-supply-beregnung-method > p:last-child {
    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   HINWEIS
   ========================================================= */

.wv-supply-beregnung-note {
    max-width: 760px;

    margin:
        24px
        0
        0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   GESCHÜTZTER ANBAU

   Bewusst keine Karte / keine Box.
   Nur ein klar abgesetzter zweiter Themenbereich.
   ========================================================= */

.wv-supply-beregnung-protected {
    max-width: 820px;

    margin:
        38px
        0
        0;

    padding:
        32px
        0
        0;

    border-top:
        1px solid var(--wv-line);
}


/* =========================================================
   GESCHÜTZTER ANBAU – EYEBROW
   ========================================================= */

.wv-supply-beregnung-protected-eyebrow {
    margin:
        0
        0
        9px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   GESCHÜTZTER ANBAU – TITEL
   ========================================================= */

.wv-supply-beregnung-protected h3 {
    margin:
        0
        0
        14px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   GESCHÜTZTER ANBAU – TEXT
   ========================================================= */

.wv-supply-beregnung-protected p:not(
    .wv-supply-beregnung-protected-eyebrow
) {
    max-width: 760px;

    margin:
        0
        0
        14px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


.wv-supply-beregnung-protected p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-wasserversorgung-beregnung {
        padding: 52px 0 !important;
    }


    .wv-supply-beregnung-header {
        margin-bottom: 38px;
    }


    .wv-supply-beregnung-title {
        font-size: 34px;
    }


    .wv-supply-beregnung-method {
        padding:
            22px
            20px
            23px;
    }


    .wv-supply-beregnung-method:first-child {
        padding-left: 0;
    }


    .wv-supply-beregnung-method:last-child {
        padding-right: 0;
    }


    .wv-supply-beregnung-protected {
        margin-top: 34px;

        padding-top: 28px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-wasserversorgung-beregnung {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Gleicher Seitenabstand wie andere Unterseiten
       ----------------------------------------------------- */

    .wv-supply-beregnung {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-supply-beregnung-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-supply-beregnung-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-supply-beregnung-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-supply-beregnung-intro {
        max-width: 100%;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       VERFAHREN UNTEREINANDER
       ----------------------------------------------------- */

    .wv-supply-beregnung-methods {
        display: block;
    }


    .wv-supply-beregnung-method,
    .wv-supply-beregnung-method:first-child,
    .wv-supply-beregnung-method:last-child {
        width: 100%;

        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--wv-line);

        box-sizing: border-box;
    }


    .wv-supply-beregnung-method:last-child {
        border-bottom: 0;
    }


    /* -----------------------------------------------------
       HINWEIS
       ----------------------------------------------------- */

    .wv-supply-beregnung-note {
        max-width: 100%;

        margin-top: 22px;
    }


    /* -----------------------------------------------------
       GESCHÜTZTER ANBAU
       ----------------------------------------------------- */

    .wv-supply-beregnung-protected {
        max-width: 100%;

        margin-top: 30px;

        padding-top: 26px;
    }


    .wv-supply-beregnung-protected-eyebrow {
        letter-spacing: 0.08em;
    }


    .wv-supply-beregnung-protected p:not(
        .wv-supply-beregnung-protected-eyebrow
    ) {
        max-width: 100%;
    }

}

body.itemid-112 #sp-main-body {
    display: none !important;
}

/* =========================================================
   30. ZUKUNFT & DIGITALISIERUNG – HERO

   Helix Section Title:
   zukunft-hero

   Position:
   zukunft-hero

   Modul:
   Zukunft Hero

   Bild:
   /images/start-digitalisierung.webp

   Grundlage:
   globales .wv-page-hero-System
   ========================================================= */


/* =========================================================
   HELIX-SEKTION
   ========================================================= */

#sp-zukunft-hero {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
}


/* =========================================================
   FLUID-CONTAINER NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-hero > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   HELIX-ROW NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-hero
> .container-fluid
> .container-inner
> .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   HELIX-SPALTE / MODUL NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-hero .sp-column,
#sp-zukunft-hero .sp-module,
#sp-zukunft-hero .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   ZUKUNFT & DIGITALISIERUNG – HINTERGRUNDBILD

   Verlauf identisch mit den bisherigen Unterseiten-Heros.
   ========================================================= */

.wv-page-hero-future {
    background-image:
        linear-gradient(
            90deg,
            rgba(17, 31, 37, 0.74) 0%,
            rgba(17, 31, 37, 0.58) 40%,
            rgba(17, 31, 37, 0.22) 70%,
            rgba(17, 31, 37, 0.06) 100%
        ),
        url("/images/start-digitalisierung.webp");
}

/* =========================================================
   31. DIGITALISIERUNG & ZUKUNFT – ENTWICKLUNG

   Helix Section Title:
   zukunft-entwicklung

   Position:
   zukunft-entwicklung

   Modul:
   Digitalisierung & Zukunft Entwicklung

   Aufbau:
   1. Einleitung
   2. Timeline

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   MAIN BODY – MENÜPUNKT ID 104 AUSBLENDEN
   ========================================================= */

body.itemid-113 #sp-main-body {
    display: none !important;
}


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-zukunft-entwicklung {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-entwicklung .sp-module,
#sp-zukunft-entwicklung .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-digital-history {
    width: 100%;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-digital-history-head {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-digital-history-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-digital-history-title {
    max-width: 760px;

    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNGSTEXTE
   ========================================================= */

.wv-digital-history-text {
    max-width: 760px;

    margin: 0 0 16px;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


.wv-digital-history-text:last-of-type {
    margin-bottom: 0;
}


/* =========================================================
   HERVORGEHOBENER ÜBERGANG
   ========================================================= */

.wv-digital-history-note {
    max-width: 760px;

    margin: 28px 0 0;

    padding:
        17px
        0
        17px
        19px;

    border-left:
        3px solid var(--wv-blue);

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   TIMELINE-BEREICH
   ========================================================= */

.wv-digital-history-roadmap {
    width: 100%;

    padding-top: 32px;

    border-top:
        1px solid var(--wv-line);
}


/* =========================================================
   TIMELINE-KOPF
   ========================================================= */

.wv-digital-history-roadmap-head {
    max-width: 820px;

    margin: 0 0 30px;
}


.wv-digital-history-roadmap-eyebrow {
    margin: 0 0 8px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.wv-digital-history-roadmap-head h3 {
    margin: 0;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.wv-digital-history-timeline {
    position: relative;

    width: 100%;
}


.wv-digital-history-timeline::before {
    content: "";

    position: absolute;

    z-index: 1;

    top: 7px;
    bottom: 0;
    left: 7px;

    width: 1px;

    background:
        rgba(56, 164, 194, 0.38);
}


/* =========================================================
   EINZELNER SCHRITT
   ========================================================= */

.wv-digital-history-step {
    position: relative;

    display: grid;

    grid-template-columns:
        15px
        minmax(0, 1fr);

    gap: 18px;

    padding:
        0
        0
        31px;
}


.wv-digital-history-step:last-child {
    padding-bottom: 0;
}


/* =========================================================
   MARKER
   ========================================================= */

.wv-digital-history-marker {
    position: relative;

    z-index: 2;

    width: 15px;
    height: 15px;

    margin: 0;

    box-sizing: border-box;

    background: #ffffff;

    border:
        2px solid var(--wv-blue);

    border-radius: 50%;
}


/* =========================================================
   AKTUELLER STAND
   ========================================================= */

.wv-digital-history-step-current
.wv-digital-history-marker {
    background: var(--wv-blue);

    border-color: var(--wv-blue);

    box-shadow:
        0 0 0 4px rgba(56, 164, 194, 0.12);
}


/* =========================================================
   INHALT
   ========================================================= */

.wv-digital-history-step-content {
    min-width: 0;

    max-width: 820px;
}


/* =========================================================
   ZEITRAUM
   ========================================================= */

.wv-digital-history-phase {
    margin: 0 0 7px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   TITEL
   ========================================================= */

.wv-digital-history-step-content h4 {
    margin: 0 0 8px;

    color: var(--wv-ink);

    font-size: var(--wv-font-lead);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.01em;
}


/* =========================================================
   KURZTEXT
   ========================================================= */

.wv-digital-history-step-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   AUFKLAPPBEREICH
   ========================================================= */

.wv-digital-history-details {
    max-width: 760px;

    margin: 11px 0 0;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.wv-digital-history-details > summary {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    gap: 10px;

    width: fit-content;

    margin: 0;
    padding: 0;

    color: var(--wv-blue);

    font-size: var(--wv-font-body);
    font-weight: 600;
    line-height: 1.4;

    list-style: none;

    cursor: pointer;
}


.wv-digital-history-details > summary::-webkit-details-marker {
    display: none;
}


/* =========================================================
   PFEIL
   ========================================================= */

.wv-digital-history-details > summary::after {
    content: "";

    width: 8px;
    height: 8px;

    box-sizing: border-box;

    border-right:
        2px solid currentColor;

    border-bottom:
        2px solid currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);

    transition:
        transform 0.18s ease;
}


.wv-digital-history-details[open]
> summary::after {
    transform:
        rotate(225deg)
        translate(-2px, -2px);
}


/* =========================================================
   AUFKLAPP-INHALT
   ========================================================= */

.wv-digital-history-details-content {
    max-width: 760px;

    padding-top: 13px;
}


.wv-digital-history-details-content p {
    margin:
        0
        0
        12px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


.wv-digital-history-details-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   FOKUS
   ========================================================= */

.wv-digital-history-details
> summary:focus-visible {
    outline:
        2px solid var(--wv-blue);

    outline-offset: 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-zukunft-entwicklung {
        padding: 52px 0 !important;
    }


    .wv-digital-history-head {
        margin-bottom: 38px;
    }


    .wv-digital-history-title {
        font-size: 34px;
    }


    .wv-digital-history-roadmap {
        padding-top: 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-zukunft-entwicklung {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       ABSCHNITTBREITE
       ----------------------------------------------------- */

    .wv-digital-history {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       EINLEITUNG
       ----------------------------------------------------- */

    .wv-digital-history-head {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-digital-history-eyebrow,
    .wv-digital-history-roadmap-eyebrow {
        letter-spacing: 0.08em;
    }


    .wv-digital-history-title {
        max-width: 100%;

        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-digital-history-text {
        max-width: 100%;

        margin-bottom: 15px;

        line-height: 1.58;
    }


    .wv-digital-history-note {
        max-width: 100%;

        margin-top: 24px;

        padding:
            15px
            0
            15px
            17px;
    }


    /* -----------------------------------------------------
       TIMELINE-KOPF
       ----------------------------------------------------- */

    .wv-digital-history-roadmap {
        padding-top: 26px;
    }


    .wv-digital-history-roadmap-head {
        max-width: 100%;

        margin-bottom: 25px;
    }


    /* -----------------------------------------------------
       TIMELINE
       ----------------------------------------------------- */

    .wv-digital-history-step {
        grid-template-columns:
            15px
            minmax(0, 1fr);

        gap: 18px;

        padding-bottom: 27px;
    }


    .wv-digital-history-step-content,
    .wv-digital-history-step-text,
    .wv-digital-history-details,
    .wv-digital-history-details-content {
        max-width: 100%;
    }


    .wv-digital-history-phase {
        margin-bottom: 6px;
    }


    .wv-digital-history-step-content h4 {
        margin-bottom: 7px;
    }


    .wv-digital-history-step-text,
    .wv-digital-history-details-content p {
        line-height: 1.55;
    }

}

/* =========================================================
   32. DIGITALISIERUNG & ZUKUNFT – WASSERVERBAND 4.0

   Helix Section Title:
   zukunft-wv40

   Position:
   zukunft-wv40

   Modul:
   Digitalisierung Wasserverband 4.0

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #f8fafb
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-zukunft-wv40 {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-wv40 .sp-module,
#sp-zukunft-wv40 .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-digital-now {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-digital-now-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-digital-now-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-digital-now-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-digital-now-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-digital-now-text {
    max-width: 760px;

    margin: 0 0 14px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


.wv-digital-now-text:last-child {
    margin-bottom: 0;
}


/* =========================================================
   FUNKTIONSRASTER
   ========================================================= */

.wv-digital-now-features {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: 100%;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNE FUNKTION
   ========================================================= */

.wv-digital-now-feature {
    position: relative;

    min-width: 0;

    margin: 0;

    padding:
        24px
        28px
        25px;

    box-sizing: border-box;

    border-bottom:
        1px solid var(--wv-line);
}


.wv-digital-now-feature:nth-child(even) {
    border-left:
        1px solid var(--wv-line);
}


.wv-digital-now-feature:nth-child(odd) {
    padding-left: 0;
}


.wv-digital-now-feature:nth-child(even) {
    padding-right: 0;
}


.wv-digital-now-feature:nth-last-child(-n+2) {
    border-bottom: 0;
}


/* =========================================================
   INHALT + BLAUER AKZENT

   Gleiche Designsprache wie bestehende WV-Grundsätze:
   kurzer blauer Strich statt Karte oder Icon.
   ========================================================= */

.wv-digital-now-feature-content {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr);

    column-gap: 15px;

    align-items: start;
}


.wv-digital-now-feature-content::before {
    content: "";

    display: block;

    width: 24px;
    height: 2px;

    margin-top: 13px;

    background: var(--wv-blue);
}


/* =========================================================
   FUNKTIONS-TITEL
   ========================================================= */

.wv-digital-now-feature h3 {
    grid-column: 2;

    margin: 0 0 7px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   FUNKTIONS-TEXT
   ========================================================= */

.wv-digital-now-feature p {
    grid-column: 2;

    max-width: 430px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   AKTUELLER PROJEKTSTAND
   ========================================================= */

.wv-digital-now-note {
    max-width: 760px;

    margin: 28px 0 0;

    padding:
        17px
        0
        17px
        19px;

    border-left:
        3px solid var(--wv-blue);

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-zukunft-wv40 {
        padding: 52px 0 !important;
    }


    .wv-digital-now-header {
        margin-bottom: 38px;
    }


    .wv-digital-now-title {
        font-size: 34px;
    }


    .wv-digital-now-feature {
        padding:
            22px
            20px
            23px;
    }


    .wv-digital-now-feature:nth-child(odd) {
        padding-left: 0;
    }


    .wv-digital-now-feature:nth-child(even) {
        padding-right: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-zukunft-wv40 {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       ABSCHNITTBREITE
       ----------------------------------------------------- */

    .wv-digital-now {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPFBEREICH
       ----------------------------------------------------- */

    .wv-digital-now-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-digital-now-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-digital-now-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-digital-now-lead,
    .wv-digital-now-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       FUNKTIONEN UNTEREINANDER
       ----------------------------------------------------- */

    .wv-digital-now-features {
        display: block;
    }


    .wv-digital-now-feature,
    .wv-digital-now-feature:nth-child(odd),
    .wv-digital-now-feature:nth-child(even) {
        width: 100%;

        padding:
            20px
            0;

        border-left: 0;

        border-bottom:
            1px solid var(--wv-line);
    }


    .wv-digital-now-feature:last-child {
        border-bottom: 0;
    }


    .wv-digital-now-feature-content {
        grid-template-columns:
            26px
            minmax(0, 1fr);

        column-gap: 13px;
    }


    .wv-digital-now-feature-content::before {
        width: 22px;
    }


    .wv-digital-now-feature p {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       PROJEKTSTAND
       ----------------------------------------------------- */

    .wv-digital-now-note {
        max-width: 100%;

        margin-top: 24px;

        padding:
            15px
            0
            15px
            17px;
    }

}

/* =========================================================
   33. DIGITALISIERUNG & ZUKUNFT – DIGITALE ENTNAHMESTELLE

   Helix Section Title:
   zukunft-entnahmestelle

   Position:
   zukunft-entnahmestelle

   Modul:
   Digitalisierung Entnahmestelle

   Aufbau:
   Kopfbereich
   Funktionskette:
   Erfassen – Steuern – Vernetzen – Erweitern

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-zukunft-entnahmestelle {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-entnahmestelle .sp-module,
#sp-zukunft-entnahmestelle .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-digital-station {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-digital-station-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-digital-station-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-digital-station-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-digital-station-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-digital-station-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   FUNKTIONSKETTE

   Bestehende WV-Designsprache:
   - keine Karten
   - keine Schatten
   - dünne Trennlinien
   - blauer Meta-Stil
   ========================================================= */

.wv-digital-station-process {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    width: 100%;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNER BEREICH
   ========================================================= */

.wv-digital-station-step {
    min-width: 0;

    margin: 0;

    padding:
        24px
        28px
        25px;

    box-sizing: border-box;

    border-right:
        1px solid var(--wv-line);
}


.wv-digital-station-step:first-child {
    padding-left: 0;
}


.wv-digital-station-step:last-child {
    padding-right: 0;

    border-right: 0;
}


/* =========================================================
   FUNKTIONSBEZEICHNUNG
   ========================================================= */

.wv-digital-station-step-meta {
    margin: 0 0 8px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   TITEL
   ========================================================= */

.wv-digital-station-step h3 {
    margin: 0 0 9px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   TEXT
   ========================================================= */

.wv-digital-station-step > p:last-child {
    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-zukunft-entnahmestelle {
        padding: 52px 0 !important;
    }


    .wv-digital-station-header {
        margin-bottom: 38px;
    }


    .wv-digital-station-title {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       2 SPALTEN
       ----------------------------------------------------- */

    .wv-digital-station-process {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .wv-digital-station-step,
    .wv-digital-station-step:first-child,
    .wv-digital-station-step:last-child {
        padding:
            22px
            20px
            23px;

        border-right:
            1px solid var(--wv-line);

        border-bottom:
            1px solid var(--wv-line);
    }


    .wv-digital-station-step:nth-child(2n) {
        border-right: 0;
    }


    .wv-digital-station-step:nth-last-child(-n+2) {
        border-bottom: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-zukunft-entnahmestelle {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       ABSCHNITTBREITE
       ----------------------------------------------------- */

    .wv-digital-station {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-digital-station-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-digital-station-eyebrow,
    .wv-digital-station-step-meta {
        letter-spacing: 0.08em;
    }


    .wv-digital-station-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-digital-station-lead,
    .wv-digital-station-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       FUNKTIONSKETTE UNTEREINANDER
       ----------------------------------------------------- */

    .wv-digital-station-process {
        display: block;
    }


    .wv-digital-station-step,
    .wv-digital-station-step:first-child,
    .wv-digital-station-step:last-child {
        width: 100%;

        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--wv-line);
    }


    .wv-digital-station-step:last-child {
        border-bottom: 0;
    }

}

/* =========================================================
   34. DIGITALISIERUNG & ZUKUNFT – FUNKNETZ

   Helix Section Title:
   zukunft-funknetz

   Position:
   zukunft-funknetz

   Modul:
   Digitalisierung Funknetz

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #f8fafb
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-zukunft-funknetz {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-funknetz .sp-module,
#sp-zukunft-funknetz .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-digital-radio {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-digital-radio-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-digital-radio-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-digital-radio-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-digital-radio-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-digital-radio-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   ENTWICKLUNG DER FUNKTECHNIK
   ========================================================= */

.wv-digital-radio-development {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    width: 100%;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNE PHASE
   ========================================================= */

.wv-digital-radio-stage {
    min-width: 0;

    margin: 0;

    padding:
        24px
        28px
        25px;

    box-sizing: border-box;

    border-right:
        1px solid var(--wv-line);
}


.wv-digital-radio-stage:first-child {
    padding-left: 0;
}


.wv-digital-radio-stage:last-child {
    padding-right: 0;

    border-right: 0;
}


/* =========================================================
   PHASENBEZEICHNUNG
   ========================================================= */

.wv-digital-radio-stage-meta {
    margin: 0 0 8px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   PHASEN-TITEL
   ========================================================= */

.wv-digital-radio-stage h3 {
    margin: 0 0 10px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   PHASEN-TEXT
   ========================================================= */

.wv-digital-radio-stage
p:not(.wv-digital-radio-stage-meta) {
    margin: 0 0 13px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


.wv-digital-radio-stage
p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   ZUSAMMENARBEIT
   ========================================================= */

.wv-digital-radio-cooperation {
    max-width: 820px;

    margin: 38px 0 0;

    padding: 32px 0 0;

}


/* =========================================================
   ZUSAMMENARBEIT – EYEBROW
   ========================================================= */

.wv-digital-radio-cooperation-eyebrow {
    margin: 0 0 9px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   ZUSAMMENARBEIT – H3
   ========================================================= */

.wv-digital-radio-cooperation h3 {
    margin: 0 0 14px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   ZUSAMMENARBEIT – TEXT
   ========================================================= */

.wv-digital-radio-cooperation
p:not(.wv-digital-radio-cooperation-eyebrow) {
    max-width: 760px;

    margin: 0 0 14px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


.wv-digital-radio-cooperation
p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   DETAILS

   Globale Komponente bleibt erhalten.
   Hier nur Abstand zum vorherigen Themenbereich.
   ========================================================= */

.wv-digital-radio > .wv-supply-details {
    margin-top: 34px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-zukunft-funknetz {
        padding: 52px 0 !important;
    }


    .wv-digital-radio-header {
        margin-bottom: 38px;
    }


    .wv-digital-radio-title {
        font-size: 34px;
    }


    .wv-digital-radio-stage {
        padding:
            22px
            20px
            23px;
    }


    .wv-digital-radio-stage:first-child {
        padding-left: 0;
    }


    .wv-digital-radio-stage:last-child {
        padding-right: 0;
    }


    .wv-digital-radio-cooperation {
        margin-top: 34px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-zukunft-funknetz {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       ABSCHNITTBREITE
       ----------------------------------------------------- */

    .wv-digital-radio {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-digital-radio-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-digital-radio-eyebrow,
    .wv-digital-radio-stage-meta,
    .wv-digital-radio-cooperation-eyebrow {
        letter-spacing: 0.08em;
    }


    .wv-digital-radio-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-digital-radio-lead,
    .wv-digital-radio-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       FUNKENTWICKLUNG UNTEREINANDER
       ----------------------------------------------------- */

    .wv-digital-radio-development {
        display: block;
    }


    .wv-digital-radio-stage,
    .wv-digital-radio-stage:first-child,
    .wv-digital-radio-stage:last-child {
        width: 100%;

        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--wv-line);
    }


    .wv-digital-radio-stage:last-child {
        border-bottom: 0;
    }


    /* -----------------------------------------------------
       ZUSAMMENARBEIT
       ----------------------------------------------------- */

    .wv-digital-radio-cooperation {
        max-width: 100%;

        margin-top: 30px;

    }


    .wv-digital-radio-cooperation
    p:not(.wv-digital-radio-cooperation-eyebrow) {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       DETAILS
       ----------------------------------------------------- */

    .wv-digital-radio > .wv-supply-details {
        margin-top: 26px;
    }

}

/* =========================================================
   35. DIGITALISIERUNG & ZUKUNFT – UMSETZUNG

   Helix Section Title:
   zukunft-umsetzung

   Position:
   zukunft-umsetzung

   Modul:
   Digitalisierung Umsetzung

   Aufbau:
   Kopfbereich
   Pilotbetrieb 2026
   Ausbau ab 2027

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-zukunft-umsetzung {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-umsetzung .sp-module,
#sp-zukunft-umsetzung .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-digital-rollout {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-digital-rollout-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-digital-rollout-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-digital-rollout-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-digital-rollout-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-digital-rollout-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   UMSETZUNGSPHASEN
   ========================================================= */

.wv-digital-rollout-phases {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    width: 100%;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNE PHASE
   ========================================================= */

.wv-digital-rollout-phase {
    min-width: 0;

    margin: 0;

    padding:
        24px
        28px
        25px;

    box-sizing: border-box;
}


.wv-digital-rollout-phase:first-child {
    padding-left: 0;

    border-right:
        1px solid var(--wv-line);
}


.wv-digital-rollout-phase:last-child {
    padding-right: 0;
}


/* =========================================================
   PHASENBEZEICHNUNG
   ========================================================= */

.wv-digital-rollout-phase-meta {
    margin: 0 0 8px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   PHASEN-TITEL
   ========================================================= */

.wv-digital-rollout-phase h3 {
    margin: 0 0 10px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   PHASEN-TEXT
   ========================================================= */

.wv-digital-rollout-phase
p:not(.wv-digital-rollout-phase-meta) {
    max-width: 520px;

    margin: 0 0 13px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


.wv-digital-rollout-phase
p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HINWEIS
   ========================================================= */

.wv-digital-rollout-note {
    max-width: 760px;

    margin: 28px 0 0;

    padding:
        17px
        0
        17px
        19px;

    border-left:
        3px solid var(--wv-blue);

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-zukunft-umsetzung {
        padding: 52px 0 !important;
    }


    .wv-digital-rollout-header {
        margin-bottom: 38px;
    }


    .wv-digital-rollout-title {
        font-size: 34px;
    }


    .wv-digital-rollout-phase {
        padding:
            22px
            20px
            23px;
    }


    .wv-digital-rollout-phase:first-child {
        padding-left: 0;
    }


    .wv-digital-rollout-phase:last-child {
        padding-right: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-zukunft-umsetzung {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       ABSCHNITTBREITE
       ----------------------------------------------------- */

    .wv-digital-rollout {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-digital-rollout-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-digital-rollout-eyebrow,
    .wv-digital-rollout-phase-meta {
        letter-spacing: 0.08em;
    }


    .wv-digital-rollout-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-digital-rollout-lead,
    .wv-digital-rollout-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       PHASEN UNTEREINANDER
       ----------------------------------------------------- */

    .wv-digital-rollout-phases {
        display: block;
    }


    .wv-digital-rollout-phase,
    .wv-digital-rollout-phase:first-child,
    .wv-digital-rollout-phase:last-child {
        width: 100%;

        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--wv-line);
    }


    .wv-digital-rollout-phase:last-child {
        border-bottom: 0;
    }


    .wv-digital-rollout-phase
    p:not(.wv-digital-rollout-phase-meta) {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       HINWEIS
       ----------------------------------------------------- */

    .wv-digital-rollout-note {
        max-width: 100%;

        margin-top: 24px;

        padding:
            15px
            0
            15px
            17px;
    }

}

/* =========================================================
   36. DIGITALISIERUNG & ZUKUNFT – AUSBLICK

   Helix Section Title:
   zukunft-ausblick

   Position:
   zukunft-ausblick

   Modul:
   Digitalisierung Zukunft

   Aufbau:
   Kopfbereich
   Messen – Auswerten – Unterstützen
   Grundsatz

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #f8fafb
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-zukunft-ausblick {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-zukunft-ausblick .sp-module,
#sp-zukunft-ausblick .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-digital-future {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-digital-future-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-digital-future-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-digital-future-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-digital-future-lead {
    max-width: 760px;

    margin: 0 0 15px;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-digital-future-text {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   ZUKÜNFTIGE ENTWICKLUNGSBEREICHE
   ========================================================= */

.wv-digital-future-stages {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    width: 100%;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNER BEREICH
   ========================================================= */

.wv-digital-future-stage {
    min-width: 0;

    margin: 0;

    padding:
        24px
        28px
        25px;

    box-sizing: border-box;

    border-right:
        1px solid var(--wv-line);
}


.wv-digital-future-stage:first-child {
    padding-left: 0;
}


.wv-digital-future-stage:last-child {
    padding-right: 0;

    border-right: 0;
}


/* =========================================================
   BEREICHSBEZEICHNUNG
   ========================================================= */

.wv-digital-future-stage-meta {
    margin: 0 0 8px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   BEREICHS-TITEL
   ========================================================= */

.wv-digital-future-stage h3 {
    margin: 0 0 10px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   BEREICHS-TEXT
   ========================================================= */

.wv-digital-future-stage
p:not(.wv-digital-future-stage-meta) {
    margin: 0 0 13px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


.wv-digital-future-stage
p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   GRUNDSATZ
   ========================================================= */

.wv-digital-future-principle {
    max-width: 820px;

    margin: 38px 0 0;
}


/* =========================================================
   GRUNDSATZ – EYEBROW
   ========================================================= */

.wv-digital-future-principle-eyebrow {
    margin: 0 0 9px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   GRUNDSATZ – TITEL
   ========================================================= */

.wv-digital-future-principle h3 {
    margin: 0 0 14px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   GRUNDSATZ – TEXT
   ========================================================= */

.wv-digital-future-principle
p:not(.wv-digital-future-principle-eyebrow) {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-zukunft-ausblick {
        padding: 52px 0 !important;
    }


    .wv-digital-future-header {
        margin-bottom: 38px;
    }


    .wv-digital-future-title {
        font-size: 34px;
    }


    .wv-digital-future-stage {
        padding:
            22px
            20px
            23px;
    }


    .wv-digital-future-stage:first-child {
        padding-left: 0;
    }


    .wv-digital-future-stage:last-child {
        padding-right: 0;
    }


    .wv-digital-future-principle {
        margin-top: 34px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-zukunft-ausblick {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       ABSCHNITTBREITE
       ----------------------------------------------------- */

    .wv-digital-future {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       KOPF
       ----------------------------------------------------- */

    .wv-digital-future-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-digital-future-eyebrow,
    .wv-digital-future-stage-meta,
    .wv-digital-future-principle-eyebrow {
        letter-spacing: 0.08em;
    }


    .wv-digital-future-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-digital-future-lead,
    .wv-digital-future-text {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       BEREICHE UNTEREINANDER
       ----------------------------------------------------- */

    .wv-digital-future-stages {
        display: block;
    }


    .wv-digital-future-stage,
    .wv-digital-future-stage:first-child,
    .wv-digital-future-stage:last-child {
        width: 100%;

        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--wv-line);
    }


    .wv-digital-future-stage:last-child {
        border-bottom: 0;
    }


    /* -----------------------------------------------------
       GRUNDSATZ
       ----------------------------------------------------- */

    .wv-digital-future-principle {
        max-width: 100%;

        margin-top: 30px;
    }


    .wv-digital-future-principle
    p:not(.wv-digital-future-principle-eyebrow) {
        max-width: 100%;
    }

}

/* =========================================================
   37. AKTUELLES – HERO

   Helix Section Title:
   aktuelles-hero

   Position:
   aktuelles-hero

   Modul:
   Aktuelles Hero

   Bild:
   /images/aktuelles-hero.webp

   Fluid Width:
   ON

   Bestehende globale WV-Hero-Geometrie wird verwendet.
   ========================================================= */


/* =========================================================
   HELIX-SEKTION
   ========================================================= */

#sp-aktuelles-hero {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
}


/* =========================================================
   FLUID-CONTAINER NEUTRALISIEREN
   ========================================================= */

#sp-aktuelles-hero > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   HELIX-ROW NEUTRALISIEREN
   ========================================================= */

#sp-aktuelles-hero
> .container-fluid
> .container-inner
> .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   HELIX-MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-aktuelles-hero .sp-column,
#sp-aktuelles-hero .sp-module,
#sp-aktuelles-hero .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   AKTUELLES – HINTERGRUND

   Verlauf entspricht den bestehenden Unterseiten-Heros.
   ========================================================= */

.wv-page-hero-news {
    background-image:
        linear-gradient(
            90deg,
            rgba(17, 31, 37, 0.74) 0%,
            rgba(17, 31, 37, 0.58) 40%,
            rgba(17, 31, 37, 0.22) 70%,
            rgba(17, 31, 37, 0.06) 100%
        ),
        url("/images/aktuelles-hero.webp");
}

/* =========================================================
   38. AKTUELLES – AKTUELLES AUS DEM VERBAND

   Joomla 6.1.3 Kategorieblog
   Helix Ultimate 2.2.10
   Menü-Item-ID: 114

   Tatsächliches Markup:
   .blog
   .items-leading
   .blog-item.article
   .article-intro-image
   .article-body
   .article-header
   .article-info
   .article-introtext

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   MAIN BODY

   Auf "Aktuelles" bleibt der Joomla Component-Bereich
   ausdrücklich sichtbar.
   ========================================================= */

body.itemid-114 #sp-main-body {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   BLOG-GRUNDFLÄCHE
   ========================================================= */

body.itemid-114 .com-content-category-blog {
    width: 100%;

    margin: 0;
}


/* =========================================================
   EVENTUELLE JOOMLA-SEITENÜBERSCHRIFT

   Die Seitenüberschrift befindet sich bereits im Hero.
   ========================================================= */

body.itemid-114
.com-content-category-blog
> .page-header {
    display: none;
}


/* =========================================================
   FÜHRENDER BEITRAG
   ========================================================= */

body.itemid-114
.com-content-category-blog
.items-leading
.blog-item {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;

    width: 100%;

    margin: 0;

    padding: 0;

    border: 0;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);

    background: #ffffff;
}


/* =========================================================
   BILD

   Helix setzt hier zusätzlich "float-left".
   Dieser Float wird bewusst aufgehoben.
   ========================================================= */

body.itemid-114
.items-leading
.blog-item
.article-intro-image {
    float: none !important;

    width: 100%;

    margin: 0 !important;
    padding: 0;

    overflow: hidden;
}


body.itemid-114
.items-leading
.blog-item
.article-intro-image a {
    display: block;

    width: 100%;
    height: 100%;
}


body.itemid-114
.items-leading
.blog-item
.article-intro-image img {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;
}


/* =========================================================
   INHALTSBEREICH
   ========================================================= */

body.itemid-114
.items-leading
.blog-item
.article-body {
    display: flex;

    flex-direction: column;

    min-width: 0;

    margin: 0;

    padding:
        24px
        28px
        25px;
}


/* =========================================================
   REIHENFOLGE

   Joomla liefert:
   Titel
   Datum
   Text

   Für die WV-Darstellung:
   Datum
   Titel
   Text
   ========================================================= */

body.itemid-114
.items-leading
.blog-item
.article-info {
    order: 1;
}


body.itemid-114
.items-leading
.blog-item
.article-header {
    order: 2;
}


body.itemid-114
.items-leading
.blog-item
.article-introtext {
    order: 3;
}


body.itemid-114
.items-leading
.blog-item
.readmore {
    order: 4;
}


/* =========================================================
   VERÖFFENTLICHUNGSDATUM

   WV-Meta-Stil
   ========================================================= */

body.itemid-114
.blog-item
.article-info {
    display: block;

    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


body.itemid-114
.blog-item
.article-info-term {
    display: none;
}


body.itemid-114
.blog-item
.article-info dd,
body.itemid-114
.blog-item
.article-info span {
    margin: 0;
}


/* =========================================================
   TITEL
   ========================================================= */

body.itemid-114
.blog-item
.article-header {
    margin: 0 0 14px;
}


body.itemid-114
.blog-item
.article-header h2 {
    margin: 0;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


body.itemid-114
.blog-item
.article-header h2 a {
    color: var(--wv-ink);

    text-decoration: none;
}


body.itemid-114
.blog-item
.article-header h2 a:hover,
body.itemid-114
.blog-item
.article-header h2 a:focus {
    color: var(--wv-blue);

    text-decoration: none;
}


/* =========================================================
   EINLEITUNGSTEXT

   Wichtig:
   Schriftgröße sowohl auf dem Wrapper als auch auf
   enthaltenen Absätzen erzwingen, damit Editor-/Template-
   Formatierungen nicht die Blogdarstellung vergrößern.
   ========================================================= */

body.itemid-114
.blog-item
.article-introtext {
    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body) !important;
    font-weight: 400;
    line-height: 1.65;
}


body.itemid-114
.blog-item
.article-introtext p {
    margin: 0 0 15px;

    color: inherit;

    font-size: inherit !important;
    font-weight: inherit;
    line-height: inherit;
}


body.itemid-114
.blog-item
.article-introtext p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   WEITERLESEN

   Redaktioneller Textlink.
   Kein neuer lokaler Button-Stil.
   ========================================================= */

body.itemid-114
.blog-item
.readmore {
    margin: 18px 0 0;
}


body.itemid-114
.blog-item
.readmore a {
    color: var(--wv-blue);

    font-size: var(--wv-font-body);
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none;
}


body.itemid-114
.blog-item
.readmore a:hover,
body.itemid-114
.blog-item
.readmore a:focus {
    text-decoration: underline;
}


/* =========================================================
   FALL:
   WEITERLESEN LIEGT INNERHALB DES INTROTEXT-WRAPPERS

   Je nach Joomla-/Helix-Ausgabe möglich.
   ========================================================= */

body.itemid-114
.blog-item
.article-introtext
.readmore {
    margin-top: 18px;
}


/* =========================================================
   TEMPLATE-ABSTÄNDE DES ARTIKELS NEUTRALISIEREN
   ========================================================= */

body.itemid-114
.items-leading
.blog-item
.article-header,
body.itemid-114
.items-leading
.blog-item
.article-body,
body.itemid-114
.items-leading
.blog-item
.article-introtext {
    box-sizing: border-box;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    body.itemid-114 #sp-main-body {
        padding: 52px 0 !important;
    }


    body.itemid-114
    .items-leading
    .blog-item
    .article-body {
        padding:
            22px
            20px
            23px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    body.itemid-114 #sp-main-body {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Mobile Inhaltsbreite
       ----------------------------------------------------- */

    body.itemid-114
    #sp-main-body
    > .container {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;

        padding-left: 0;
        padding-right: 0;
    }


    /* -----------------------------------------------------
       Führender Beitrag untereinander
       ----------------------------------------------------- */

    body.itemid-114
    .com-content-category-blog
    .items-leading
    .blog-item {
        display: block;
    }


    /* -----------------------------------------------------
       Bild
       ----------------------------------------------------- */

    body.itemid-114
    .items-leading
    .blog-item
    .article-intro-image img {
        width: 100%;
        height: auto;

        aspect-ratio: 16 / 10;

        object-fit: cover;
    }


    /* -----------------------------------------------------
       Inhalt
       ----------------------------------------------------- */

    body.itemid-114
    .items-leading
    .blog-item
    .article-body {
        padding:
            20px
            0;
    }


    /* -----------------------------------------------------
       Meta
       ----------------------------------------------------- */

    body.itemid-114
    .blog-item
    .article-info {
        letter-spacing: 0.08em;
    }

}

/* =========================================================
   38. AKTUELLES – BEITRAGSDETAIL

   Joomla 6.1.3
   Helix Ultimate 2.2.10
   Menü-Item-ID: 114

   Tatsächliches Markup:
   .article-details
   .article-full-image
   .article-header
   .article-info
   [itemprop="articleBody"]

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   MAIN BODY – EINZELBEITRAG
   ========================================================= */

body.itemid-114.view-article #sp-main-body {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   BEITRAG

   Bewusst kompaktere Lesebreite für längere Artikel.
   ========================================================= */

body.itemid-114.view-article
.article-details {
    width: 100%;
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   AUFMACHERBILD
   ========================================================= */

body.itemid-114.view-article
.article-details
.article-full-image {
    float: none !important;

    width: 100%;

    margin: 0 0 28px !important;
    padding: 0;

    overflow: hidden;
}


body.itemid-114.view-article
.article-details
.article-full-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    object-fit: cover;
}


/* =========================================================
   BEITRAGSTITEL
   ========================================================= */

body.itemid-114.view-article
.article-details
.article-header {
    margin: 0 0 10px;
}


body.itemid-114.view-article
.article-details
.article-header h1,
body.itemid-114.view-article
.article-details
.article-header h2 {
    margin: 0;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   DATUM / BEITRAGSINFO
   ========================================================= */

body.itemid-114.view-article
.article-details
.article-info {
    display: block;

    margin: 0 0 28px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


body.itemid-114.view-article
.article-details
.article-info-term {
    display: none;
}


body.itemid-114.view-article
.article-details
.article-info dd,
body.itemid-114.view-article
.article-details
.article-info span {
    margin: 0;
}


/* =========================================================
   ARTIKELTEXT – GRUNDEINSTELLUNGEN
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] {
    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   ABSÄTZE

   Überschreibt die großen Joomla-/Template-Werte.
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] > p {
    margin: 0 0 17px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body) !important;
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   EINLEITUNG

   Erster Absatz wie auf unseren Unterseiten etwas stärker.
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] > p:first-child {
    color: var(--wv-ink);

    font-size: var(--wv-font-body) !important;
    line-height: 1.65;
}


/* =========================================================
   ZWISCHENÜBERSCHRIFTEN

   Gleicher H3-Stil wie auf den statischen Unterseiten.
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] > h2 {
    margin:
        36px
        0
        14px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3) !important;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   H3 IM ARTIKEL
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] > h3 {
    margin:
        30px
        0
        12px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3) !important;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   HERVORHEBUNGEN
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] strong {
    color: var(--wv-ink);

    font-weight: 700;
}


/* =========================================================
   LINKS
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] a {
    color: var(--wv-blue);

    text-decoration: none;
}


body.itemid-114.view-article
.article-details
[itemprop="articleBody"] a:hover,
body.itemid-114.view-article
.article-details
[itemprop="articleBody"] a:focus {
    text-decoration: underline;
}


/* =========================================================
   GRAFIKEN IM BEITRAG
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] figure {
    width: 100%;

    margin:
        32px
        0
        36px;

    padding: 0;
}


body.itemid-114.view-article
.article-details
[itemprop="articleBody"] figure img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    object-fit: contain;
}


/* =========================================================
   BILDUNTERSCHRIFT

   Bestehender WV-Stil:
   Meta-Größe / muted / 1.45
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] figcaption {
    margin: 9px 0 0;

    padding: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-meta) !important;
    font-weight: 400;
    line-height: 1.45;
}


/* =========================================================
   LISTEN
   ========================================================= */

body.itemid-114.view-article
.article-details
[itemprop="articleBody"] ul,
body.itemid-114.view-article
.article-details
[itemprop="articleBody"] ol {
    margin:
        0
        0
        20px;

    padding-left: 22px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    line-height: 1.65;
}


body.itemid-114.view-article
.article-details
[itemprop="articleBody"] li {
    margin-bottom: 7px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    body.itemid-114.view-article #sp-main-body {
        padding: 52px 0 !important;
    }


    body.itemid-114.view-article
    .article-details {
        max-width: 760px;
    }


    body.itemid-114.view-article
    .article-details
    .article-header h1,
    body.itemid-114.view-article
    .article-details
    .article-header h2 {
        font-size: 34px;
    }


    body.itemid-114.view-article
    .article-details
    [itemprop="articleBody"] figure {
        margin:
            30px
            0
            32px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    body.itemid-114.view-article #sp-main-body {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Mobile Inhaltsbreite
       ----------------------------------------------------- */

    body.itemid-114.view-article
    #sp-main-body
    > .container {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;

        padding-left: 0;
        padding-right: 0;
    }


    body.itemid-114.view-article
    .article-details {
        width: 100%;
        max-width: none;
    }


    /* -----------------------------------------------------
       Aufmacherbild
       ----------------------------------------------------- */

    body.itemid-114.view-article
    .article-details
    .article-full-image {
        margin-bottom: 22px !important;
    }


    /* -----------------------------------------------------
       Beitragstitel
       ----------------------------------------------------- */

    body.itemid-114.view-article
    .article-details
    .article-header h1,
    body.itemid-114.view-article
    .article-details
    .article-header h2 {
        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    /* -----------------------------------------------------
       Datum
       ----------------------------------------------------- */

    body.itemid-114.view-article
    .article-details
    .article-info {
        margin-bottom: 24px;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Zwischenüberschriften
       ----------------------------------------------------- */

    body.itemid-114.view-article
    .article-details
    [itemprop="articleBody"] > h2 {
        margin:
            30px
            0
            12px;
    }


    body.itemid-114.view-article
    .article-details
    [itemprop="articleBody"] > h3 {
        margin:
            26px
            0
            11px;
    }


    /* -----------------------------------------------------
       Grafik
       ----------------------------------------------------- */

    body.itemid-114.view-article
    .article-details
    [itemprop="articleBody"] figure {
        margin:
            26px
            0
            30px;
    }

}

/* =========================================================
   39. KONTAKT – HERO

   Helix Section Title:
   kontakt-hero

   Position:
   kontakt-hero

   Modul:
   Kontakt Hero

   Bild:
   /images/kontakt-hero.webp

   Fluid Width:
   ON

   Bestehende globale WV-Hero-Geometrie wird verwendet.
   ========================================================= */


/* =========================================================
   HELIX-SEKTION
   ========================================================= */

#sp-kontakt-hero {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;
}


/* =========================================================
   FLUID-CONTAINER NEUTRALISIEREN
   ========================================================= */

#sp-kontakt-hero > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   HELIX-ROW NEUTRALISIEREN
   ========================================================= */

#sp-kontakt-hero
> .container-fluid
> .container-inner
> .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   HELIX-MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-kontakt-hero .sp-column,
#sp-kontakt-hero .sp-module,
#sp-kontakt-hero .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   KONTAKT – HINTERGRUND

   Identischer Verlauf wie auf den bestehenden
   WV-Unterseiten-Heros.
   ========================================================= */

.wv-page-hero-contact {
    background-image:
        linear-gradient(
            90deg,
            rgba(17, 31, 37, 0.74) 0%,
            rgba(17, 31, 37, 0.58) 40%,
            rgba(17, 31, 37, 0.22) 70%,
            rgba(17, 31, 37, 0.06) 100%
        ),
        url("/images/kontakt-hero.webp");
}

/* =========================================================
   40. KONTAKT – GESCHÄFTSSTELLE

   Helix Section Title:
   kontakt-geschaeftsstelle

   Position:
   kontakt-geschaeftsstelle

   Modul:
   Kontakt Geschäftsstelle

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   Weiß
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-kontakt-geschaeftsstelle {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-kontakt-geschaeftsstelle .sp-module,
#sp-kontakt-geschaeftsstelle .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-contact-office {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-contact-office-header {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-contact-office-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-contact-office-title {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-contact-office-lead {
    max-width: 760px;

    margin: 0;

    color: var(--wv-ink);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   ZWEI KONTAKTBEREICHE
   ========================================================= */

.wv-contact-office-layout {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    width: 100%;

    border-top:
        1px solid var(--wv-line);

    border-bottom:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNER BEREICH
   ========================================================= */

.wv-contact-office-section {
    min-width: 0;

    padding:
        24px
        34px
        25px;
}


.wv-contact-office-section:first-child {
    padding-left: 0;

    border-right:
        1px solid var(--wv-line);
}


.wv-contact-office-section:last-child {
    padding-right: 0;
}


/* =========================================================
   META
   ========================================================= */

.wv-contact-office-meta {
    margin: 0 0 8px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* =========================================================
   H3
   ========================================================= */

.wv-contact-office-section h3 {
    margin: 0 0 14px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   ANSCHRIFT
   ========================================================= */

.wv-contact-office-section address {
    margin: 0 0 20px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.65;
}


/* =========================================================
   KONTAKTDATEN
   ========================================================= */

.wv-contact-office-data {
    margin: 0;
}


.wv-contact-office-data > div {
    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr);

    gap: 16px;

    padding:
        10px
        0;

    border-bottom:
        1px solid var(--wv-line);
}


.wv-contact-office-data > div:first-child {
    padding-top: 0;
}


.wv-contact-office-data dt {
    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


.wv-contact-office-data dd {
    margin: 0;

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 600;
    line-height: 1.6;
}


.wv-contact-office-data a {
    color: var(--wv-ink);

    text-decoration: none;
}


.wv-contact-office-data a:hover,
.wv-contact-office-data a:focus {
    color: var(--wv-blue);

    text-decoration: none;
}


/* =========================================================
   HINWEIS
   ========================================================= */

.wv-contact-office-note {
    max-width: 520px;

    margin:
        18px
        0
        0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-kontakt-geschaeftsstelle {
        padding: 52px 0 !important;
    }


    .wv-contact-office-header {
        margin-bottom: 38px;
    }


    .wv-contact-office-title {
        font-size: 34px;
    }


    .wv-contact-office-section {
        padding:
            22px
            28px
            23px;
    }


    .wv-contact-office-section:first-child {
        padding-left: 0;
    }


    .wv-contact-office-section:last-child {
        padding-right: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-kontakt-geschaeftsstelle {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Mobile Inhaltsbreite
       ----------------------------------------------------- */

    .wv-contact-office {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-contact-office-header {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-contact-office-eyebrow,
    .wv-contact-office-meta {
        letter-spacing: 0.08em;
    }


    .wv-contact-office-title {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    /* -----------------------------------------------------
       Bereiche untereinander
       ----------------------------------------------------- */

    .wv-contact-office-layout {
        display: block;
    }


    .wv-contact-office-section,
    .wv-contact-office-section:first-child,
    .wv-contact-office-section:last-child {
        width: 100%;

        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid var(--wv-line);
    }


    .wv-contact-office-section:last-child {
        border-bottom: 0;
    }


    /* -----------------------------------------------------
       Kontaktdaten
       ----------------------------------------------------- */

    .wv-contact-office-data > div {
        grid-template-columns:
            78px
            minmax(0, 1fr);

        gap: 12px;
    }

}

/* =========================================================
   41. KONTAKT – STÖRUNG MELDEN

   Helix Section Title:
   kontakt-stoerung

   Position:
   kontakt-stoerung

   Modul:
   Kontakt Störung

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #f8fafb
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-kontakt-stoerung {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #f8fafb;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-kontakt-stoerung .sp-module,
#sp-kontakt-stoerung .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-contact-emergency {
    width: 100%;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.wv-contact-emergency-layout {
    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    gap: 78px;

    align-items: start;
}


/* =========================================================
   LINKER BEREICH
   ========================================================= */

.wv-contact-emergency-copy {
    max-width: 720px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-contact-emergency-eyebrow,
.wv-contact-emergency-action-meta {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-contact-emergency-copy h2 {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   TEXT
   ========================================================= */

.wv-contact-emergency-copy p:not(.wv-contact-emergency-eyebrow),
.wv-contact-emergency-action p:not(.wv-contact-emergency-action-meta) {
    margin: 0 0 15px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


.wv-contact-emergency-copy p:last-child,
.wv-contact-emergency-action p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HINWEIS
   ========================================================= */

.wv-contact-emergency-note {
    max-width: 620px;
}


/* =========================================================
   RECHTER BEREICH
   ========================================================= */

.wv-contact-emergency-action {
    padding-left: 34px;

    border-left:
        1px solid var(--wv-line);
}


/* =========================================================
   STÖRUNGSNUMMER

   Keine neue Button-Komponente:
   Nummer wird als textlicher Kontakt hervorgehoben.
   ========================================================= */

.wv-contact-emergency-number {
    display: inline-block;

    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;
}


.wv-contact-emergency-number:hover,
.wv-contact-emergency-number:focus {
    color: var(--wv-blue);

    text-decoration: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-kontakt-stoerung {
        padding: 52px 0 !important;
    }


    .wv-contact-emergency-layout {
        gap: 54px;
    }


    .wv-contact-emergency-copy h2 {
        font-size: 34px;
    }


    .wv-contact-emergency-action {
        padding-left: 28px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-kontakt-stoerung {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Mobile Inhaltsbreite
       ----------------------------------------------------- */

    .wv-contact-emergency {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Layout untereinander
       ----------------------------------------------------- */

    .wv-contact-emergency-layout {
        display: block;
    }


    /* -----------------------------------------------------
       Überschrift
       ----------------------------------------------------- */

    .wv-contact-emergency-copy h2 {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-contact-emergency-eyebrow,
    .wv-contact-emergency-action-meta {
        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Rechter Bereich
       ----------------------------------------------------- */

    .wv-contact-emergency-action {
        margin-top: 30px;

        padding:
            26px
            0
            0;

        border-left: 0;

        border-top:
            1px solid var(--wv-line);
    }

}

/* =========================================================
   Kontakt – JOOMLA MAIN BODY AUSBLENDEN

   Kontakt: Menü-Item-ID 115
   ========================================================= */

body.itemid-115 #sp-main-body {
    display: none !important;
}

body.itemid-107 #sp-main-body {
    display: none !important;
}

/* =========================================================
   42. IMPRESSUM

   Helix Section Title:
   impressum

   Position:
   impressum

   Modul:
   Impressum

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #ffffff
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-impressum {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-impressum .sp-module,
#sp-impressum .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-legal-imprint {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-legal-imprint-head {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-legal-imprint-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H1
   ========================================================= */

.wv-legal-imprint-head h1 {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-legal-imprint-intro {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   INHALT
   ========================================================= */

.wv-legal-imprint-content {
    width: 100%;

    border-top:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNER BEREICH
   ========================================================= */

.wv-legal-imprint-section {
    display: grid;

    grid-template-columns:
        210px
        minmax(0, 1fr);

    gap: 54px;

    width: 100%;

    padding: 30px 0;

    border-bottom:
        1px solid var(--wv-line);

    box-sizing: border-box;
}


/* =========================================================
   LINKE BEREICHSBEZEICHNUNG
   ========================================================= */

.wv-legal-imprint-label {
    padding-top: 4px;
}


.wv-legal-imprint-label p {
    margin: 0;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   RECHTER INHALTSBEREICH
   ========================================================= */

.wv-legal-imprint-value {
    width: 100%;
    max-width: 760px;

    min-width: 0;
}


/* =========================================================
   H2
   ========================================================= */

.wv-legal-imprint-value h2 {
    margin: 0 0 8px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.27;

    letter-spacing: -0.012em;
}


/* =========================================================
   FLIESSTEXT / ANSCHRIFT
   ========================================================= */

.wv-legal-imprint-value p,
.wv-legal-imprint-value address {
    max-width: 680px;

    margin: 0 0 12px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.62;
}


.wv-legal-imprint-value p:last-child,
.wv-legal-imprint-value address:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HERVORHEBUNGEN
   ========================================================= */

.wv-legal-imprint-value strong {
    color: var(--wv-ink);

    font-weight: 600;
}


/* =========================================================
   KONTAKTDATEN
   ========================================================= */

.wv-legal-imprint-contact {
    margin: 0;
}


.wv-legal-imprint-contact p {
    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr);

    gap: 16px;

    max-width: 680px;

    margin: 0;

    padding:
        10px
        0;

    border-bottom:
        1px solid var(--wv-line);
}


.wv-legal-imprint-contact p:first-child {
    padding-top: 0;
}


.wv-legal-imprint-contact p:last-child {
    margin-bottom: 0;

    border-bottom: 0;
}


.wv-legal-imprint-contact span {
    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


.wv-legal-imprint-contact a {
    width: fit-content;

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 600;
    line-height: 1.6;

    text-decoration: none;
}


.wv-legal-imprint-contact a:hover,
.wv-legal-imprint-contact a:focus {
    color: var(--wv-blue);

    text-decoration: none;
}


.wv-legal-imprint-contact a:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}


/* =========================================================
   DATENSCHUTZ-LINK
   ========================================================= */

.wv-legal-imprint-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 3px;

    color: var(--wv-blue);

    font-size: var(--wv-font-body);
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none;
}


.wv-legal-imprint-link::after {
    content: "→";

    display: inline-block;

    transition:
        transform 0.18s ease;
}


.wv-legal-imprint-link:hover,
.wv-legal-imprint-link:focus {
    color: var(--wv-blue);

    text-decoration: none;
}


.wv-legal-imprint-link:hover::after,
.wv-legal-imprint-link:focus::after {
    transform:
        translateX(3px);
}


.wv-legal-imprint-link:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-impressum {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-legal-imprint-head {
        margin-bottom: 38px;
    }


    .wv-legal-imprint-head h1 {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       Bereiche
       ----------------------------------------------------- */

    .wv-legal-imprint-section {
        grid-template-columns:
            170px
            minmax(0, 1fr);

        gap: 36px;

        padding: 27px 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-impressum {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-legal-imprint {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-legal-imprint-head {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-legal-imprint-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-legal-imprint-head h1 {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-legal-imprint-intro {
        max-width: 100%;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       Bereiche untereinander
       ----------------------------------------------------- */

    .wv-legal-imprint-section {
        display: block;

        padding: 24px 0;
    }


    /* -----------------------------------------------------
       Linke Bezeichnung
       ----------------------------------------------------- */

    .wv-legal-imprint-label {
        margin-bottom: 10px;

        padding-top: 0;
    }


    .wv-legal-imprint-label p {
        line-height: 1.2;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Inhalt
       ----------------------------------------------------- */

    .wv-legal-imprint-value {
        max-width: none;
    }


    .wv-legal-imprint-value h2 {
        margin-bottom: 7px;

        line-height: 1.3;
    }


    .wv-legal-imprint-value p,
    .wv-legal-imprint-value address {
        max-width: none;

        margin-bottom: 11px;

        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Kontaktdaten
       ----------------------------------------------------- */

    .wv-legal-imprint-contact p {
        grid-template-columns:
            78px
            minmax(0, 1fr);

        gap: 12px;

        max-width: none;

        padding:
            9px
            0;
    }


    /* -----------------------------------------------------
       Datenschutz-Link
       ----------------------------------------------------- */

    .wv-legal-imprint-link {
        margin-top: 2px;
    }

}

/* =========================================================
   43. DATENSCHUTZERKLÄRUNG

   Helix Section Title:
   datenschutz

   Position:
   datenschutz

   Modul:
   Datenschutzerklärung

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #ffffff
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-datenschutz {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-datenschutz .sp-module,
#sp-datenschutz .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-legal-privacy {
    width: 100%;
}


/* =========================================================
   KOPFBEREICH
   ========================================================= */

.wv-legal-privacy-head {
    max-width: 820px;

    margin: 0 0 44px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-legal-privacy-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H1
   ========================================================= */

.wv-legal-privacy-head h1 {
    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   EINLEITUNG
   ========================================================= */

.wv-legal-privacy-intro {
    max-width: 760px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-intro);
    font-weight: 400;
    line-height: 1.65;
}


/* =========================================================
   INHALT
   ========================================================= */

.wv-legal-privacy-content {
    width: 100%;

    border-top:
        1px solid var(--wv-line);
}


/* =========================================================
   EINZELNER BEREICH
   ========================================================= */

.wv-legal-privacy-section {
    display: grid;

    grid-template-columns:
        210px
        minmax(0, 1fr);

    gap: 54px;

    width: 100%;

    padding: 30px 0;

    border-bottom:
        1px solid var(--wv-line);

    box-sizing: border-box;
}


/* =========================================================
   LINKE BEREICHSBEZEICHNUNG
   ========================================================= */

.wv-legal-privacy-label {
    padding-top: 4px;
}


.wv-legal-privacy-label p {
    margin: 0;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   RECHTER INHALTSBEREICH
   ========================================================= */

.wv-legal-privacy-value {
    width: 100%;
    max-width: 760px;

    min-width: 0;
}


/* =========================================================
   H2
   ========================================================= */

.wv-legal-privacy-value h2 {
    margin: 0 0 12px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.27;

    letter-spacing: -0.012em;
}


/* =========================================================
   FLIESSTEXT / ANSCHRIFT
   ========================================================= */

.wv-legal-privacy-value p,
.wv-legal-privacy-value address {
    max-width: 680px;

    margin: 0 0 12px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.62;
}


.wv-legal-privacy-value p:last-child,
.wv-legal-privacy-value address:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HERVORHEBUNGEN
   ========================================================= */

.wv-legal-privacy-value strong {
    color: var(--wv-ink);

    font-weight: 600;
}


/* =========================================================
   ALLGEMEINE LINKS
   ========================================================= */

.wv-legal-privacy-value a {
    color: var(--wv-ink);

    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.18s ease;
}


.wv-legal-privacy-value a:hover,
.wv-legal-privacy-value a:focus {
    color: var(--wv-blue);

    text-decoration: none;
}


.wv-legal-privacy-value a:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}


/* =========================================================
   KONTAKTDATEN
   ========================================================= */

.wv-legal-privacy-contact {
    max-width: 680px;

    margin-top: 16px;
}


.wv-legal-privacy-contact p {
    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr);

    gap: 16px;

    max-width: none;

    margin: 0;

    padding:
        10px
        0;

    border-bottom:
        1px solid var(--wv-line);
}


.wv-legal-privacy-contact p:first-child {
    padding-top: 0;
}


.wv-legal-privacy-contact p:last-child {
    margin-bottom: 0;

    border-bottom: 0;
}


.wv-legal-privacy-contact span {
    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.6;
}


.wv-legal-privacy-contact a {
    width: fit-content;

    color: var(--wv-ink);

    font-size: var(--wv-font-body);
    font-weight: 600;
    line-height: 1.6;

    text-decoration: none;
}


/* =========================================================
   LISTEN
   ========================================================= */

.wv-legal-privacy-list {
    max-width: 680px;

    margin:
        2px
        0
        16px;

    padding: 0;

    list-style: none;
}


.wv-legal-privacy-list li {
    position: relative;

    margin: 0;

    padding:
        5px
        0
        5px
        18px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.55;
}


.wv-legal-privacy-list li::before {
    content: "";

    position: absolute;

    top: 0.92em;
    left: 0;

    width: 6px;
    height: 1px;

    background: var(--wv-blue);
}


/* =========================================================
   EXTERNER DATENSCHUTZ-LINK
   ========================================================= */

.wv-legal-privacy-external {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 3px;

    color: var(--wv-blue) !important;

    font-size: var(--wv-font-body);
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none !important;
}


.wv-legal-privacy-external::after {
    content: "↗";

    display: inline-block;

    font-size: 0.9em;

    transition:
        transform 0.18s ease;
}


.wv-legal-privacy-external:hover,
.wv-legal-privacy-external:focus {
    color: var(--wv-blue) !important;

    text-decoration: none !important;
}


.wv-legal-privacy-external:hover::after,
.wv-legal-privacy-external:focus::after {
    transform:
        translate(2px, -2px);
}


.wv-legal-privacy-external:focus-visible {
    outline: 2px solid var(--wv-blue);
    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-datenschutz {
        padding: 52px 0 !important;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-legal-privacy-head {
        margin-bottom: 38px;
    }


    .wv-legal-privacy-head h1 {
        font-size: 34px;
    }


    /* -----------------------------------------------------
       Bereiche
       ----------------------------------------------------- */

    .wv-legal-privacy-section {
        grid-template-columns:
            170px
            minmax(0, 1fr);

        gap: 36px;

        padding: 27px 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-datenschutz {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-legal-privacy {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Kopf
       ----------------------------------------------------- */

    .wv-legal-privacy-head {
        max-width: 100%;

        margin-bottom: 30px;
    }


    .wv-legal-privacy-eyebrow {
        margin-bottom: 9px;

        letter-spacing: 0.08em;
    }


    .wv-legal-privacy-head h1 {
        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    .wv-legal-privacy-intro {
        max-width: 100%;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       Bereiche untereinander
       ----------------------------------------------------- */

    .wv-legal-privacy-section {
        display: block;

        padding: 24px 0;
    }


    /* -----------------------------------------------------
       Linke Bereichsbezeichnung
       ----------------------------------------------------- */

    .wv-legal-privacy-label {
        margin-bottom: 10px;

        padding-top: 0;
    }


    .wv-legal-privacy-label p {
        line-height: 1.2;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------------------
       Inhalt
       ----------------------------------------------------- */

    .wv-legal-privacy-value {
        max-width: none;
    }


    .wv-legal-privacy-value h2 {
        margin-bottom: 10px;

        line-height: 1.3;
    }


    .wv-legal-privacy-value p,
    .wv-legal-privacy-value address {
        max-width: none;

        margin-bottom: 11px;

        line-height: 1.55;
    }


    /* -----------------------------------------------------
       Kontakt
       ----------------------------------------------------- */

    .wv-legal-privacy-contact {
        max-width: none;

        margin-top: 14px;
    }


    .wv-legal-privacy-contact p {
        grid-template-columns:
            78px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            9px
            0;
    }


    /* -----------------------------------------------------
       Listen
       ----------------------------------------------------- */

    .wv-legal-privacy-list {
        max-width: none;

        margin-bottom: 14px;
    }


    .wv-legal-privacy-list li {
        padding:
            4px
            0
            4px
            16px;

        line-height: 1.55;
    }


    .wv-legal-privacy-list li::before {
        width: 5px;
    }


    /* -----------------------------------------------------
       Externer Link
       ----------------------------------------------------- */

    .wv-legal-privacy-external {
        align-items: flex-start;

        line-height: 1.45;
    }

}

body.itemid-108 #sp-main-body {
    display: none !important;
}

/* =========================================================
   REDUZIERTE BEWEGUNG
   Vorhandene WV-Übergänge bei entsprechender Systemeinstellung
   deaktivieren; normales Erscheinungsbild bleibt erhalten.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wv-btn-primary,
    .wv-btn-outline,
    #sp-wv-service-desktop .mod-menu > li > a,
    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span,
    #sp-header .sp-megamenu-parent > li::after,
    .offcanvas-menu .offcanvas-inner ul.menu > li > a[class*="wv-nav-icon-"],
    .offcanvas-menu .offcanvas-inner ul.menu > li > a[class*="wv-nav-icon-"]::before,
    .offcanvas-menu .wv-service-offcanvas .mod-menu > li > a,
    .wv-topic-card,
    .wv-topic-card-image img,
    .wv-topic-card-arrow,
    .wv-contact-action,
    .wv-contact-action-title,
    .wv-contact-action-arrow,
    .wv-footer-contact-link,
    .wv-footer-nav a,
    .wv-footer-legal a,
    .wv-digital-history-details > summary::after,
    .wv-legal-imprint-link::after,
    .wv-legal-privacy-value a,
    .wv-legal-privacy-external::after {
        transition: none !important;
    }

}

/* =========================================================
   44. GESCHICHTE ENTDECKEN – SEITE IM AUFBAU

   Helix Section Title:
   geschichte-entdecken

   Position:
   geschichte-entdecken

   Modul:
   Geschichte entdecken

   Standard Unterseiten:
   Desktop 58 px
   Tablet  52 px
   Mobile  40 px

   Hintergrund:
   #ffffff
   ========================================================= */


/* =========================================================
   ABSCHNITT
   ========================================================= */

#sp-geschichte-entdecken {
    margin: 0 !important;
    padding: 58px 0 !important;

    background: #ffffff;
}


/* =========================================================
   MODULABSTÄNDE NEUTRALISIEREN
   ========================================================= */

#sp-geschichte-entdecken .sp-module,
#sp-geschichte-entdecken .sp-module-content {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MODUL
   ========================================================= */

.wv-history-coming {
    width: 100%;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.wv-history-coming-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 78px;

    align-items: start;
}


/* =========================================================
   LINKER BEREICH
   ========================================================= */

.wv-history-coming-copy {
    max-width: 700px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.wv-history-coming-eyebrow {
    margin: 0 0 11px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H1
   ========================================================= */

.wv-history-coming-title {
    max-width: 680px;

    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h2);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -0.02em;
}


/* =========================================================
   LEAD
   ========================================================= */

.wv-history-coming-lead {
    max-width: 620px;

    margin: 0 0 18px;

    color: var(--wv-ink);

    font-size: var(--wv-font-lead);
    font-weight: 500;
    line-height: 1.55;

    letter-spacing: -0.008em;
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

.wv-history-coming-text {
    max-width: 640px;

    margin: 0 0 15px;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.65;
}


.wv-history-coming-text:last-of-type {
    margin-bottom: 28px;
}


/* =========================================================
   RECHTER HINWEISBEREICH
   ========================================================= */

.wv-history-coming-note {
    padding-left: 34px;

    border-left:
        1px solid var(--wv-line);
}


/* =========================================================
   META
   ========================================================= */

.wv-history-coming-note-meta {
    margin: 0 0 9px;

    color: var(--wv-blue);

    font-size: var(--wv-font-meta);
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


/* =========================================================
   H2
   ========================================================= */

.wv-history-coming-note h2 {
    max-width: 460px;

    margin: 0 0 12px;

    color: var(--wv-ink);

    font-size: var(--wv-font-h3);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.012em;
}


/* =========================================================
   HINWEISTEXT
   ========================================================= */

.wv-history-coming-note p:not(.wv-history-coming-note-meta) {
    max-width: 500px;

    margin: 0;

    color: var(--wv-muted);

    font-size: var(--wv-font-body);
    font-weight: 400;
    line-height: 1.62;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-geschichte-entdecken {
        padding: 52px 0 !important;
    }


    .wv-history-coming-layout {
        gap: 48px;
    }


    .wv-history-coming-title {
        font-size: 34px;
    }


    .wv-history-coming-note {
        padding-left: 28px;
    }

}


/* =========================================================
   KLEINES TABLET / GROSSES SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {

    .wv-history-coming-layout {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .wv-history-coming-note {
        padding-top: 26px;
        padding-left: 0;

        border-top:
            1px solid var(--wv-line);

        border-left: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    #sp-geschichte-entdecken {
        padding: 40px 0 !important;
    }


    /* -----------------------------------------------------
       Abschnittbreite
       ----------------------------------------------------- */

    .wv-history-coming {
        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;
    }


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    .wv-history-coming-layout {
        gap: 30px;
    }


    /* -----------------------------------------------------
       Eyebrow
       ----------------------------------------------------- */

    .wv-history-coming-eyebrow,
    .wv-history-coming-note-meta {
        letter-spacing: 0.08em;
    }


    .wv-history-coming-eyebrow {
        margin-bottom: 9px;
    }


    /* -----------------------------------------------------
       Überschrift
       ----------------------------------------------------- */

    .wv-history-coming-title {
        max-width: 100%;

        margin-bottom: 15px;

        font-size: var(--wv-font-h2);
        line-height: 1.14;
    }


    /* -----------------------------------------------------
       Lead
       ----------------------------------------------------- */

    .wv-history-coming-lead {
        max-width: 100%;

        margin-bottom: 16px;

        line-height: 1.5;
    }


    /* -----------------------------------------------------
       Fließtext
       ----------------------------------------------------- */

    .wv-history-coming-text {
        max-width: 100%;

        margin-bottom: 14px;

        line-height: 1.6;
    }


    .wv-history-coming-text:last-of-type {
        margin-bottom: 24px;
    }


    /* -----------------------------------------------------
       Hinweisbereich
       ----------------------------------------------------- */

    .wv-history-coming-note {
        padding-top: 24px;
    }


    .wv-history-coming-note-meta {
        margin-bottom: 8px;
    }


    .wv-history-coming-note h2 {
        max-width: 100%;

        margin-bottom: 10px;

        line-height: 1.3;
    }


    .wv-history-coming-note p:not(.wv-history-coming-note-meta) {
        max-width: 100%;

        line-height: 1.55;
    }

}