/*
 * GDfB Geoportal 3.0
 * Responsive Kartenansicht.
 *
 * Aufbau:
 * Header
 * Zurück-Navigation
 * Masterportal
 */

.portal-back-navigation {
    box-sizing: border-box;
    width: min(1440px, calc(100% - 32px));
    margin: 8px auto;
    padding: 0;
    flex: 0 0 auto;
}

.portal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border: 1px solid #d5dadd;
    border-radius: 4px;

    background: #ffffff;
    color: #173a59;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08);
}

.portal-back-link:hover,
.portal-back-link:focus-visible {
    border-color: #aeb8bf;
    background: #f4f6f7;
    color: #102f49;
}

#masterportal-root {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 760px) {
    .portal-back-navigation {
        width: calc(100% - 24px);
        margin: 6px auto;
    }

    .portal-back-link {
        padding: 4px 7px;
        font-size: 11px;
    }
}

/* ==========================================================
   Mobile Kartenansicht
   ========================================================== */

@media (max-width: 760px) {

    /*
     * Die Seite darf auf Smartphones vertikal scrollen.
     * Dadurch werden auch längere Karteninformationen
     * vollständig erreichbar.
     */
    html,
    body {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        min-height: 100dvh;
    }

    /*
     * Kartencontainer nicht auf eine starre Höhe begrenzen.
     */
    #masterportal-root {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100dvh - 190px);
        max-height: none !important;
        overflow: visible !important;
    }

    /*
     * Masterportal-Dialoge und Ergebnisbereiche müssen
     * innerhalb des Smartphone-Viewports scrollbar bleiben.
     */
    #masterportal-root [role="dialog"],
    #masterportal-root .modal,
    #masterportal-root .offcanvas {
        max-height: calc(100dvh - 155px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /*
     * Der Footer darf auf Mobilgeräten keine
     * Karteninformationen überdecken.
     */
    #gdfb-footer {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;

        width: fit-content;
        max-width: calc(100% - 24px);

        margin: 8px auto 12px;
        padding: 5px 8px;

        font-size: 11px;
    }
}

/* ==========================================================
   Mobile Kartenansicht
   ========================================================== */

@media (max-width: 760px) {

    /*
     * Die Seite darf auf Smartphones vertikal scrollen.
     * Dadurch werden auch längere Karteninformationen
     * vollständig erreichbar.
     */
    html,
    body {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        min-height: 100dvh;
    }

    /*
     * Kartencontainer nicht auf eine starre Höhe begrenzen.
     */
    #masterportal-root {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100dvh - 190px);
        max-height: none !important;
        overflow: visible !important;
    }

    /*
     * Masterportal-Dialoge und Ergebnisbereiche müssen
     * innerhalb des Smartphone-Viewports scrollbar bleiben.
     */
    #masterportal-root [role="dialog"],
    #masterportal-root .modal,
    #masterportal-root .offcanvas {
        max-height: calc(100dvh - 155px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /*
     * Der Footer darf auf Mobilgeräten keine
     * Karteninformationen überdecken.
     */
    #gdfb-footer {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;

        width: fit-content;
        max-width: calc(100% - 24px);

        margin: 8px auto 12px;
        padding: 5px 8px;

        font-size: 11px;
    }
}

@media (max-width: 760px) {

    .portal-back-navigation {
        position: relative !important;
        width: calc(100% - 24px);
        margin: 5px auto;
        padding: 0;
        z-index: 50;
    }

    .portal-back-link {
        padding: 4px 7px;
        font-size: 11px;
    }
}

/* ==========================================================
   Mobile Masterportal-Bedienung
   ========================================================== */

@media (max-width: 760px) {

    /*
     * Vorhandenen Masterportal-Schließen-Button sichtbar machen.
     * Dieser führt aus dem geöffneten Hauptmenü zurück zur Karte.
     */
    #mp-menu-header-close-button-mainMenu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: fixed !important;
        top: var(--gdfb-mobile-map-top, 165px) !important;
        right: 12px !important;

        width: 42px !important;
        height: 42px !important;

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

        opacity: 1 !important;
        visibility: visible !important;

        border: 1px solid #c8d0d5 !important;
        border-radius: 50% !important;

        background: #ffffff !important;
        color: #172733 !important;

        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.18) !important;

        z-index: 30000 !important;
    }

    /*
     * Das geöffnete Hauptmenü darf den mobilen Bildschirm
     * vollständig nutzen und muss scrollbar bleiben.
     */
    #mp-menu-mainMenu {
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

@media (max-width: 760px) {

    /*
     * Masterportal erhält wieder einen echten Viewport.
     * Die internen Masterportal-Panels scrollen selbst.
     */
    #masterportal-root {
        position: relative !important;

        width: 100% !important;
        height: calc(
            100dvh - var(--gdfb-mobile-map-top, 165px)
        ) !important;

        min-height: 420px !important;
        max-height: none !important;

        overflow: hidden !important;
    }

    /*
     * Ergebnis-/Dialogbereiche dürfen innerhalb dieses
     * Viewports vertikal scrollen.
     */
    #masterportal-root [role="dialog"],
    #masterportal-root .modal,
    #masterportal-root .offcanvas,
    #mp-menu-mainMenu {
        max-height: calc(
            100dvh - var(--gdfb-mobile-map-top, 165px)
        ) !important;

        overflow-y: auto !important;
    }
}

/* Mobile Bedienung von Karte und Informationsbereich */

@media (max-width: 575.98px) {

    /*
     * Umschalter deutlich sichtbar machen.
     */
    .toggle-button-secondaryMenu {
        width: 68px !important;
        height: 68px !important;

        right: 14px !important;
        bottom: 18px !important;

        border: 2px solid #173a59 !important;
        border-radius: 50% !important;

        background: #ffffff !important;
        color: #173a59 !important;

        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.30) !important;

        z-index: 20000 !important;

        overflow: visible !important;
    }

    .toggle-button-secondaryMenu i {
        font-size: 27px !important;
    }

    /*
     * Kleine Beschriftung direkt am Umschalter.
     */
    .toggle-button-secondaryMenu::after {
        content: "Infos";

        position: absolute;
        left: 50%;
        bottom: -20px;

        transform: translateX(-50%);

        padding: 2px 6px;

        border-radius: 4px;

        background: #ffffff;
        color: #173a59;

        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;

        white-space: nowrap;

        box-shadow:
            0 1px 4px rgba(0, 0, 0, 0.18);
    }

    /*
     * Sobald der Informationsbereich geöffnet ist,
     * heißt der Umschalter "Karte".
     */
    .masterportal-container:has(.mp-secondaryMenu-expanded)
    .toggle-button-secondaryMenu::after {
        content: "Karte";
    }

    /*
     * Informationsbereich bekommt den überwiegenden
     * Teil des verfügbaren Kartenfensters.
     */
    .mp-secondaryMenu-expanded {
        top: 28% !important;
        height: 72% !important;
        max-height: 72% !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;

        border-radius: 14px 14px 0 0 !important;
    }

    /*
     * Inhalt des Informationsbereichs darf vollständig
     * nach unten gescrollt werden.
     */
    .mp-secondaryMenu-expanded .mp-menu-subHeader {
        overflow: visible !important;
    }

    .mp-secondaryMenu-expanded > div {
        max-height: none !important;
    }

    /*
     * Schließen-Schalter des geöffneten Bereichs
     * ebenfalls besser erkennbar.
     */
    .mp-secondaryMenu-expanded
    .mp-menu-header-close-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;

        top: 10px !important;
        right: 10px !important;

        border: 2px solid #173a59 !important;
        border-radius: 50% !important;

        background: #ffffff !important;
        color: #173a59 !important;

        z-index: 20001 !important;
    }
}

/* Mobile Menüschalter deutlich sichtbar */
@media (max-width: 575.98px) {

    .menu-toggle-button {
        background: #173a59 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
        z-index: 20000 !important;
    }

    .toggle-button-mainMenu::after {
        content: "Ebenen";
        position: absolute;
        right: 70px;
        background: #173a59;
        color: #ffffff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 14px;
        white-space: nowrap;
    }

    .toggle-button-secondaryMenu::after {
        content: "Info";
        position: absolute;
        right: 70px;
        background: #173a59;
        color: #ffffff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 14px;
        white-space: nowrap;
    }
}


@media (max-width: 575.98px) {

    .toggle-button-mainMenu::after,
    .toggle-button-secondaryMenu::after {
        content: none !important;
        display: none !important;
    }

    .menu-toggle-button {
        width: 58px !important;
        height: 58px !important;

        background: #173a59 !important;
        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35) !important;

        z-index: 20000 !important;
    }

    .menu-toggle-button i {
        color: #ffffff !important;
        font-size: 28px !important;
    }
}


@media (max-width: 575.98px) {

    .toggle-button-mainMenu::after,
    .toggle-button-secondaryMenu::after {
        content: none !important;
        display: none !important;
    }

    .menu-toggle-button {
        width: 58px !important;
        height: 58px !important;

        background: #173a59 !important;
        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35) !important;

        z-index: 20000 !important;
    }

    .menu-toggle-button i {
        color: #ffffff !important;
        font-size: 28px !important;
    }
}


/* ==========================================================
   Finale mobile Korrekturen Kartenansicht
   ========================================================== */

@media (max-width: 575.98px) {

    /*
     * Im mobilen Kartenkopf bleiben nur Logo und Suche sichtbar.
     * Verhindert die schwarze Schrift hinter dem roten Suchbalken.
     */
    #portal-agency-name,
    #portal-brand-divider,
    #portal-text,
    #portal-title,
    #portal-subtitle,
    #portal-header-links {
        display: none !important;
    }

    #portal-header-top {
        min-height: 82px !important;
        height: 82px !important;
        padding: 8px 16px !important;
    }

    #portal-logo {
        width: 190px !important;
        height: 64px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    #portal-header-bottom {
        min-height: 60px !important;
        height: 60px !important;
        padding: 8px 16px !important;
    }

    #portal-search {
        width: 100% !important;
        margin: 0 !important;
    }

    /*
     * Zurück-Link darf keine Layerzeilen überdecken.
     */
    .portal-back-navigation {
        position: relative !important;
        z-index: 20 !important;
        margin: 5px 12px !important;
        width: auto !important;
    }

    /*
     * Masterportal erhält den restlichen Bildschirm.
     */
    #masterportal-root {
        position: relative !important;
        width: 100% !important;
        height: calc(100dvh - 177px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /*
     * Hauptmenü: maximal etwa die obere Hälfte.
     * So bleibt die Karte darunter sichtbar.
     */
    #mp-menu-mainMenu.mp-menu,
    .mp-mainMenu.mp-menu {
        max-height: 55% !important;
        height: 55% !important;
        overflow-y: auto !important;
    }

    /*
     * Informationsbereich nach Kartenklick:
     * deutlich größer als bisher und scrollbar.
     */
    #mp-menu-secondaryMenu.mp-secondaryMenu-expanded,
    .mp-secondaryMenu.mp-secondaryMenu-expanded {
        top: 24% !important;
        height: 76% !important;
        max-height: 76% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #mp-body-secondaryMenu,
    .gfi-detached-container,
    .gfi-content-scrollable {
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    /*
     * Menü-Umschalter sichtbar und nicht mehr weiß.
     */
    .menu-toggle-button {
        width: 58px !important;
        height: 58px !important;
        background: #173a59 !important;
        color: #ffffff !important;
        border: 3px solid #ffffff !important;
        border-radius: 50% !important;
        box-shadow: 0 3px 10px rgba(0,0,0,.35) !important;
        z-index: 20000 !important;
    }

    .menu-toggle-button i {
        color: #ffffff !important;
        font-size: 28px !important;
    }

    /*
     * Alte Textbeschriftungen vollständig entfernen.
     */
    .toggle-button-mainMenu::after,
    .toggle-button-secondaryMenu::after {
        content: none !important;
        display: none !important;
    }

    /*
     * Position der beiden runden Schalter.
     */
    .toggle-button-mainMenu {
        right: 14px !important;
        bottom: 92px !important;
        top: auto !important;
    }

    .toggle-button-secondaryMenu {
        right: 14px !important;
        bottom: 20px !important;
        top: auto !important;
    }

    /*
     * Footer darf keine Karteninhalte überdecken.
     */
    #gdfb-footer {
        position: static !important;
        margin: 6px auto !important;
        max-width: calc(100% - 24px) !important;
    }
}


/* ==========================================================
   Mobile Kartenansicht – klare Proportionen
   ========================================================== */

@media (max-width: 575.98px) {

    /*
     * Layerbereich begrenzen.
     * Die Karte bleibt immer deutlich sichtbar.
     */
    #mp-menu-mainMenu,
    .mp-mainMenu {
        height: 42% !important;
        max-height: 42% !important;
        overflow: hidden !important;
    }

    #mp-body-mainMenu,
    .mp-mainMenu .mp-menu-body {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 20px !important;
    }

    /*
     * "Themen hinzufügen" nicht über den Inhalt legen.
     */
    .mp-mainMenu button {
        position: relative !important;
    }

    /*
     * Weißer Umschalter wird zu einem eindeutigen Info-Knopf.
     */
    .toggle-button-secondaryMenu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 56px !important;
        height: 56px !important;

        right: 14px !important;
        bottom: 86px !important;
        top: auto !important;

        background: #173a59 !important;
        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.32) !important;

        z-index: 20000 !important;
    }

    /*
     * Vorhandenes Symbol ausblenden und klares i anzeigen.
     */
    .toggle-button-secondaryMenu i {
        display: none !important;
    }

    .toggle-button-secondaryMenu::after {
        content: "i" !important;
        display: block !important;
        position: static !important;

        color: #ffffff !important;
        background: transparent !important;

        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

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

        box-shadow: none !important;
        transform: none !important;
    }

    /*
     * Werkzeugknopf darunter.
     */
    .toggle-button-mainMenu {
        right: 14px !important;
        bottom: 18px !important;
        top: auto !important;
    }

    /*
     * Geöffnete Informationen bekommen fast den gesamten
     * verfügbaren Bereich und sind vollständig scrollbar.
     */
    #mp-menu-secondaryMenu.mp-secondaryMenu-expanded,
    .mp-secondaryMenu.mp-secondaryMenu-expanded {
        top: 18% !important;
        height: 82% !important;
        max-height: 82% !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}


/* ==========================================================
   Mobile Kartenansicht – klare Proportionen
   ========================================================== */

@media (max-width: 575.98px) {

    #mp-menu-mainMenu,
    .mp-mainMenu {
        height: 42% !important;
        max-height: 42% !important;
        overflow: hidden !important;
    }

    #mp-body-mainMenu,
    .mp-mainMenu .mp-menu-body {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 20px !important;
    }

    .mp-mainMenu button {
        position: relative !important;
    }

    .toggle-button-secondaryMenu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 56px !important;
        height: 56px !important;

        right: 14px !important;
        bottom: 86px !important;
        top: auto !important;

        background: #173a59 !important;
        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.32) !important;

        z-index: 20000 !important;
    }

    .toggle-button-secondaryMenu i {
        display: none !important;
    }

    .toggle-button-secondaryMenu::after {
        content: "i" !important;
        display: block !important;
        position: static !important;

        color: #ffffff !important;
        background: transparent !important;

        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 32px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

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

        box-shadow: none !important;
        transform: none !important;
    }

    .toggle-button-mainMenu {
        right: 14px !important;
        bottom: 18px !important;
        top: auto !important;
    }

    #mp-menu-secondaryMenu.mp-secondaryMenu-expanded,
    .mp-secondaryMenu.mp-secondaryMenu-expanded {
        top: 18% !important;
        height: 82% !important;
        max-height: 82% !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 575.98px) {

    /*
     * Einheitliche Position der beiden bekannten
     * Masterportal-Schalter.
     */
    .toggle-button-secondaryMenu {
        right: 14px !important;
        bottom: 92px !important;
        top: auto !important;

        width: 58px !important;
        height: 58px !important;

        background: #173a59 !important;
        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35) !important;
    }

    .toggle-button-mainMenu {
        right: 14px !important;
        bottom: 20px !important;
        top: auto !important;

        width: 58px !important;
        height: 58px !important;

        background: #173a59 !important;
        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35) !important;
    }

    .toggle-button-secondaryMenu i,
    .toggle-button-mainMenu i {
        color: #ffffff !important;
        font-size: 28px !important;
    }
}


/* Werkzeugschalter wieder korrekt darstellen */

@media (max-width: 575.98px) {

    .toggle-button-secondaryMenu::after {
        content: none !important;
        display: none !important;
    }

    .toggle-button-secondaryMenu i {
        display: block !important;
        color: #ffffff !important;
        font-size: 27px !important;
    }

    .toggle-button-secondaryMenu {
        background: #173a59 !important;
        color: #ffffff !important;
        border: 3px solid #ffffff !important;
        border-radius: 50% !important;
    }
}


/* Werkzeugschalter wieder korrekt darstellen */

@media (max-width: 575.98px) {

    .toggle-button-secondaryMenu::after {
        content: none !important;
        display: none !important;
    }

    .toggle-button-secondaryMenu i {
        display: block !important;
        color: #ffffff !important;
        font-size: 27px !important;
    }

    .toggle-button-secondaryMenu {
        background: #173a59 !important;
        color: #ffffff !important;
        border: 3px solid #ffffff !important;
        border-radius: 50% !important;
    }
}


/* Mobiler Schalter: Ebenenbereich schließen / Karte vergrößern */

@media (max-width: 575.98px) {

    #mp-menu-header-close-button-mainMenu {
        position: fixed !important;

        right: 14px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;

        width: 58px !important;
        height: 58px !important;
        padding: 0 !important;

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

        background: #173a59 !important;
        background-image: none !important;

        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35) !important;

        opacity: 1 !important;
        font-size: 0 !important;

        z-index: 20002 !important;
    }

    #mp-menu-header-close-button-mainMenu::before {
        content: "V" !important;

        display: block !important;

        color: #ffffff !important;

        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
}


/* Eigener mobiler GDfB-Informationsknopf */

@media (max-width: 575.98px) {

    #gdfb-mobile-info-button {
        position: fixed;

        right: 14px;
        bottom: 164px;

        width: 58px;
        height: 58px;

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

        padding: 0;

        background: #173a59;
        color: #ffffff;

        border: 3px solid #ffffff;
        border-radius: 50%;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35);

        z-index: 20010;

        cursor: pointer;
    }

    #gdfb-mobile-info-button span {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
    }
}


/* Masterportal-Schließen-Kreis mobil ausblenden */
@media (max-width: 575.98px) {

    #mp-menu-header-close-button-mainMenu,
    #mp-menu-header-close-button-secondaryMenu {
        display: none !important;
    }

}

/* V-Schalter wieder sichtbar, weißer Kreis entfernt */

@media (max-width: 575.98px) {

    #mp-menu-header-close-button-secondaryMenu {
        display: none !important;
    }

    #mp-menu-header-close-button-mainMenu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: fixed !important;

        right: 14px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;

        width: 58px !important;
        height: 58px !important;
        padding: 0 !important;

        background: #173a59 !important;
        background-image: none !important;

        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35) !important;

        opacity: 1 !important;
        font-size: 0 !important;

        z-index: 20002 !important;
    }

    #mp-menu-header-close-button-mainMenu::before {
        content: "V" !important;

        display: block !important;

        color: #ffffff !important;

        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
}


/* ==========================================================
   Finale mobile Schalter:
   Information – Werkzeuge – Vollansicht
   ========================================================== */

@media (max-width: 575.98px) {

    /*
     * Der originale SecondaryMenu-Schalter ändert sein
     * Symbol abhängig vom aktuellen Modul und wird daher
     * in der mobilen GDfB-Oberfläche nicht verwendet.
     */
    .toggle-button-secondaryMenu {
        display: none !important;
    }

    /* Informationen */
    #gdfb-mobile-info-button {
        right: 14px !important;
        bottom: 164px !important;
    }

    /* Werkzeuge */
    #gdfb-mobile-tools-button {
        position: fixed;

        right: 14px;
        bottom: 92px;

        width: 58px;
        height: 58px;

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

        padding: 0;

        background: #173a59;
        color: #ffffff;

        border: 3px solid #ffffff;
        border-radius: 50%;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35);

        z-index: 20010;

        cursor: pointer;
    }

    #gdfb-mobile-tools-button i {
        color: #ffffff;
        font-size: 27px;
        line-height: 1;
    }

    /* V bleibt unten */
    #mp-menu-header-close-button-mainMenu {
        right: 14px !important;
        bottom: 20px !important;
    }
}

@media (max-width: 575.98px) {

    .toggle-button-mainMenu,
    .toggle-button-secondaryMenu {
        display: none !important;
    }

    #gdfb-mobile-info-button {
        right: 14px !important;
        bottom: 164px !important;
    }

    #gdfb-mobile-tools-button {
        right: 14px !important;
        bottom: 92px !important;
    }

    #gdfb-mobile-back-button {
        position: fixed;

        right: 14px;
        bottom: 20px;

        width: 58px;
        height: 58px;

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

        padding: 0;

        background: #173a59;
        color: #ffffff;

        border: 3px solid #ffffff;
        border-radius: 50%;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35);

        z-index: 20010;
    }

    #gdfb-mobile-back-button span {
        font-size: 42px;
        font-weight: 400;
        line-height: 1;
        margin-top: -4px;
    }
}

/* ==========================================================
   Finale mobile Bedienleiste
   Information – Werkzeuge – Vollansicht
   ========================================================== */

@media (max-width: 575.98px) {

    /* selbstgebauten Zurück-Schalter nicht mehr verwenden */
    #gdfb-mobile-back-button {
        display: none !important;
    }

    /* wechselnde Masterportal-Schalter ausblenden */
    .toggle-button-mainMenu,
    .toggle-button-secondaryMenu {
        display: none !important;
    }

    /* Information */
    #gdfb-mobile-info-button {
        right: 14px !important;
        bottom: 164px !important;
    }

    /* Werkzeuge */
    #gdfb-mobile-tools-button {
        right: 14px !important;
        bottom: 92px !important;
    }

    /* Vollansicht */
    #mp-menu-header-close-button-mainMenu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: fixed !important;

        right: 14px !important;
        bottom: 20px !important;
        top: auto !important;
        left: auto !important;

        width: 58px !important;
        height: 58px !important;

        padding: 0 !important;

        background: #173a59 !important;
        background-image: none !important;
        color: #ffffff !important;

        border: 3px solid #ffffff !important;
        border-radius: 50% !important;

        opacity: 1 !important;
        font-size: 0 !important;

        z-index: 20010 !important;
    }

    #mp-menu-header-close-button-mainMenu::before {
        content: "V" !important;
        display: block !important;

        color: #ffffff !important;

        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
}


/* ==========================================================
   Finale mobile GDfB-Bedienleiste
   ========================================================== */

@media (max-width: 575.98px) {

    /*
     * Die beiden eigenen Hauptfunktionen bleiben
     * auch innerhalb geöffneter Masterportal-Module sichtbar.
     */
    #gdfb-mobile-info-button,
    #gdfb-mobile-tools-button {
        display: flex !important;
        position: fixed !important;
        right: 14px !important;
        z-index: 30010 !important;
    }

    /*
     * Normalzustand:
     *
     * i
     * Werkzeuge
     * V
     */
    #gdfb-mobile-info-button {
        bottom: 164px !important;
    }

    #gdfb-mobile-tools-button {
        bottom: 92px !important;
    }

    #mp-menu-header-close-button-mainMenu {
        right: 14px !important;
        bottom: 20px !important;
        z-index: 30010 !important;
    }

    /*
     * Zurück erscheint ausschließlich innerhalb
     * einer Werkzeug-Unteransicht.
     */
    #gdfb-mobile-back-button {
        position: fixed;

        right: 14px;
        bottom: 92px;

        width: 58px;
        height: 58px;

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

        padding: 0;

        background: #173a59;
        color: #ffffff;

        border: 3px solid #ffffff;
        border-radius: 50%;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.35);

        z-index: 30020;
    }

    #gdfb-mobile-back-button span {
        color: #ffffff;
        font-size: 42px;
        line-height: 1;
        margin-top: -4px;
    }

    /*
     * Wenn Zurück benötigt wird, rücken i und
     * Werkzeuge jeweils eine Position nach oben.
     *
     * i
     * Werkzeuge
     * Zurück
     * V
     */
    body.gdfb-mobile-has-back
    #gdfb-mobile-info-button {
        bottom: 236px !important;
    }

    body.gdfb-mobile-has-back
    #gdfb-mobile-tools-button {
        bottom: 164px !important;
    }

    /*
     * Die originalen wechselnden Menüschalter
     * bleiben visuell ausgeblendet.
     * Sie können weiterhin programmgesteuert
     * verwendet werden.
     */
    .toggle-button-mainMenu,
    .toggle-button-secondaryMenu {
        display: none !important;
    }
}


/* Werkzeugknopf nur innerhalb eines Fachbereichs anzeigen */

@media (max-width: 575.98px) {

    body:not(.gdfb-fachbereich-aktiv)
    #gdfb-mobile-tools-button {
        display: none !important;
    }

}

/* Startansicht: keine Werkzeuge anzeigen */

@media (max-width: 575.98px) {

    body:not(.gdfb-fachbereich-aktiv)
    #gdfb-mobile-tools-button,

    body:not(.gdfb-fachbereich-aktiv)
    .toggle-button-secondaryMenu {
        display: none !important;
    }

}

/* Startseite mobil: Werkzeugschalter nicht anzeigen */

@media (max-width: 575.98px) {

    body.gdfb-startseite
    .toggle-button-secondaryMenu {
        display: none !important;
    }

}