/*
 * ---------------------------------------------------------------------
 * WOB Farben
 * ---------------------------------------------------------------------
*/
:root {
    /* WOB Farben - RGB-Werte */
    --wob-color-weiss-rgb: 255, 255, 255;
    --wob-color-schwarz-rgb: 0, 0, 0;
    --wob-color-grau-rgb: 135, 135, 135;
    --wob-color-blau-rgb: 33, 181, 234;
    --wob-color-gruen-rgb: 200, 212, 0;
    --wob-color-beere-rgb: 215, 37, 67;
    --wob-color-silber-rgb: 181, 182, 183;
    --wob-color-magenta-rgb: 230, 0, 126;
    --wob-color-orange-rgb: 239, 125, 0;
    --wob-color-flieder-rgb: 101, 94, 155;
    --wob-color-sonne-rgb: 255, 207, 46;
    --wob-color-enzian-rgb: 46, 85, 165;
    --wob-color-jade-rgb: 0, 130, 141;
    --wob-color-taupe-rgb: 175, 169, 157;

    /* WOB Farben */
    --wob-color-weiss: rgb(var(--wob-color-weiss-rgb));
    --wob-color-schwarz: rgb(var(--wob-color-schwarz-rgb));
    --wob-color-grau: rgb(var(--wob-color-grau-rgb));
    --wob-color-blau: rgb(var(--wob-color-blau-rgb));
    --wob-color-gruen: rgb(var(--wob-color-gruen-rgb));
    --wob-color-beere: rgb(var(--wob-color-beere-rgb));
    --wob-color-silber: rgb(var(--wob-color-silber-rgb));
    --wob-color-magenta: rgb(var(--wob-color-magenta-rgb));
    --wob-color-orange: rgb(var(--wob-color-orange-rgb));
    --wob-color-flieder: rgb(var(--wob-color-flieder-rgb));
    --wob-color-sonne: rgb(var(--wob-color-sonne-rgb));
    --wob-color-enzian: rgb(var(--wob-color-enzian-rgb));
    --wob-color-jade: rgb(var(--wob-color-jade-rgb));
    --wob-color-taupe: rgb(var(--wob-color-taupe-rgb));

    /* WOB Farben um 20% verdunkelt (100% Farbe + 20% Schwarz) */
    --wob-color-weiss-shade-20: color-mix(in srgb, var(--wob-color-weiss) 100%, black 20%);
    --wob-color-schwarz-shade-20: color-mix(in srgb, var(--wob-color-schwarz) 100%, black 20%);
    --wob-color-grau-shade-20: color-mix(in srgb, var(--wob-color-grau) 100%, black 20%);
    --wob-color-blau-shade-20: color-mix(in srgb, var(--wob-color-blau) 100%, black 20%);
    --wob-color-gruen-shade-20: color-mix(in srgb, var(--wob-color-gruen) 100%, black 20%);
    --wob-color-beere-shade-20: color-mix(in srgb, var(--wob-color-beere) 100%, black 20%);
    --wob-color-silber-shade-20: color-mix(in srgb, var(--wob-color-silber) 100%, black 20%);
    --wob-color-magenta-shade-20: color-mix(in srgb, var(--wob-color-magenta) 100%, black 20%);
    --wob-color-orange-shade-20: color-mix(in srgb, var(--wob-color-orange) 100%, black 20%);
    --wob-color-flieder-shade-20: color-mix(in srgb, var(--wob-color-flieder) 100%, black 20%);
    --wob-color-sonne-shade-20: color-mix(in srgb, var(--wob-color-sonne) 100%, black 20%);
    --wob-color-enzian-shade-20: color-mix(in srgb, var(--wob-color-enzian) 100%, black 20%);
    --wob-color-jade-shade-20: color-mix(in srgb, var(--wob-color-jade) 100%, black 20%);
    --wob-color-taupe-shade-20: color-mix(in srgb, var(--wob-color-taupe) 100%, black 20%);

    /* WOB Farben um 40% verdunkelt (100% Farbe + 40% Schwarz) */
    --wob-color-weiss-shade-40: color-mix(in srgb, var(--wob-color-weiss) 100%, black 40%);
    --wob-color-schwarz-shade-40: color-mix(in srgb, var(--wob-color-schwarz) 100%, black 40%);
    --wob-color-grau-shade-40: color-mix(in srgb, var(--wob-color-grau) 100%, black 40%);
    --wob-color-blau-shade-40: color-mix(in srgb, var(--wob-color-blau) 100%, black 40%);
    --wob-color-gruen-shade-40: color-mix(in srgb, var(--wob-color-gruen) 100%, black 40%);
    --wob-color-beere-shade-40: color-mix(in srgb, var(--wob-color-beere) 100%, black 40%);
    --wob-color-silber-shade-40: color-mix(in srgb, var(--wob-color-silber) 100%, black 40%);
    --wob-color-magenta-shade-40: color-mix(in srgb, var(--wob-color-magenta) 100%, black 40%);
    --wob-color-orange-shade-40: color-mix(in srgb, var(--wob-color-orange) 100%, black 40%);
    --wob-color-flieder-shade-40: color-mix(in srgb, var(--wob-color-flieder) 100%, black 40%);
    --wob-color-sonne-shade-40: color-mix(in srgb, var(--wob-color-sonne) 100%, black 40%);
    --wob-color-enzian-shade-40: color-mix(in srgb, var(--wob-color-enzian) 100%, black 40%);
    --wob-color-jade-shade-40: color-mix(in srgb, var(--wob-color-jade) 100%, black 40%);
    --wob-color-taupe-shade-40: color-mix(in srgb, var(--wob-color-taupe) 100%, black 40%);
}

/*
 * ---------------------------------------------------------------------
 * OpenLayers
 * ---------------------------------------------------------------------
*/

/* Position des OpenLayers-Kompass-Button (Drehung zurücksetzen) */
div#map div.ol-rotate {
    top: auto !important;
    right: 0em !important;
    bottom: calc(8em + 4em * 6) !important;
}

/* OpenLayers-Kompass-Button (Drehung zurücksetzen) */
div#map div.ol-rotate button {
    font-size: inherit !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2 !important;
    position: absolute !important;
    right: 1.5em !important;
    background-color: var(--map-button-bg-color) !important;
    width: 3em !important;
    height: 3em !important;
    border-radius: 1.5em !important;
    color: var(--map-button-text-color) !important;
    border: none !important;
    box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.5) !important;
    transition: background-color 0.5s, color 0.5s !important;
    cursor: pointer !important;
}

/* Hintergrundbild des OpenLayers-Kompass-Button (Drehung zurücksetzen) */
div#map div.ol-rotate button span.ol-compass {
    border-radius: 1.5em;
    background-image: url("../img/Nordpfeil_Kompass.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 1.5em;
    width: 1.5em;
    color: transparent;
}

/* Rahmen des Kartenausschnitts in der Übersichtskarte */
div.ol-overviewmap-box {
    border: 2px solid var(--wob-color-beere);
    background-color: rgba(var(--wob-color-beere-rgb), 0.2);
}

/* Z-Index des "ol-overlaycontainer-stopevent" zurückgesetzt */
#map div.ol-overlaycontainer-stopevent,
#map-overview div.ol-overlaycontainer-stopevent {
    z-index: auto !important;
}

/*
 * ---------------------------------------------------------------------
 * Fortschrittsanzeige (Webseite)
 * ---------------------------------------------------------------------
*/

/* Hintergrund der Fortschrittsanzeige */
.lds-dual-ring {
    width: 100px !important;
    height: 100px !important;
    background-color: rgba(255, 255, 255, 0.8);
    background-image: url(../img/logo-loading.png);
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
}

/* Animationselement der Fortschrittsanzeige */
.lds-dual-ring:after {
    width: 100px !important;
    height: 100px !important;
    margin: 0px !important;
    border: 15px solid rgba(var(--wob-color-blau-rgb), 0.8) !important;
    border-color: rgba(var(--wob-color-blau-rgb), 0.8) transparent transparent transparent !important;
    animation: lds-dual-ring 1s linear infinite !important;
    box-sizing: border-box;
}

/*
 * ---------------------------------------------------------------------
 * Fortschrittsanzeige (Karte)
 * ---------------------------------------------------------------------
*/

/* Hintergrund der Fortschrittsanzeige */
span.map-loading-indicator {
    display: block !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5) !important;
    bottom: calc(50% - 50px) !important;
    left: calc(50% - 50px) !important;
    padding: 0em !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    width: 100px;
    height: 100px;
    background-image: url(../img/logo-loading.png);
    background-size: 70px 70px;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Ursprüngliche Animationselemente ausblenden */
span.map-loading-indicator .spinner > div {
    display: none;
}

/* Animationselement der Fortschrittsanzeige */
span.map-loading-indicator .spinner {
    -webkit-animation: wob_spinner_anim 1s linear infinite !important;
    -moz-animation: wob_spinner_anim 1s linear infinite !important;
    animation: wob_spinner_anim 1s linear infinite !important;
    border-radius: 50% !important;
    position: absolute !important;
    width: 100px !important;
    height: 100px !important;
    border: 15px solid transparent !important;
    border-top: 15px solid rgba(var(--wob-color-blau-rgb), 0.8) !important;
}

/* Animation der Fortschrittsanzeige */
@keyframes wob_spinner_anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Animation der Fortschrittsanzeige (z.B. Firefox) */
@-moz-keyframes wob_spinner_anim {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

/* Animation der Fortschrittsanzeige (z.B. Chrome) */
@-webkit-keyframes wob_spinner_anim {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

/*
 * ---------------------------------------------------------------------
 * Obere Werkzeugleiste
 * ---------------------------------------------------------------------
*/

/* Icon des Menü Buttons */
div.AppMenu .appmenu-icon {
    padding: 0.625em !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--input-bg-color);
    height: 2.5em;
    width: 2.5em;
}

/*
 * ---------------------------------------------------------------------
 * Suchleiste
 * ---------------------------------------------------------------------
*/

/* Buttons der Suche */
div.SearchBox button.searchbox-filter-button {
    background-color: var(--input-bg-color);
    color: var(--text-color);
}

/* Schriftgröße und Hintergrundfarbe der Liste der Suchergebnisse */
div.SearchBox div.searchbox-results {
    font-size: small;
    background-color: rgba(255, 255, 255, 0.85);
}

/* Kategorietitel in der Liste der Suchergebnisse */
div.SearchBox div.searchbox-results-section-title {
    background-color: transparent;
}

/*
 * ---------------------------------------------------------------------
 * Hintergrundkarte wechseln
 * ---------------------------------------------------------------------
*/

/* Hintergrundkarte wechseln: Titel */
#BackgroundSwitcher div.background-layer-title > span:first-child,
#BackgroundSwitcher div.background-group-menu > div {
    text-align: left !important;
}

/* Hintergrundkarte wechseln: Auf-/Zuklapppfeil einer Hintergrundkartengruppe */
#BackgroundSwitcher div.background-layer-title span.icon {
    padding: 0.25em;
}

/*
 * ---------------------------------------------------------------------
 * Größenveränderbares Fenster
 * ---------------------------------------------------------------------
*/

/* Fenstersymbol */
span.resizeable-window-titlebar-icon {
    margin-right: 0.5em !important;
}

/* Fenstersteuerungssymbole */
span.resizeable-window-titlebar-control {
    margin-left: 0.5em !important;
}

/*
 * ---------------------------------------------------------------------
 * Objektabfrage
 * ---------------------------------------------------------------------
*/

/* HTML-Inhalt */
.featureinfo-html-result {
    padding: 0.75em;
}

/* Überschriften */
.featureinfo-html-result h1,
.featureinfo-html-result h2 {
    font-size: small;
    font-weight: bold;
}

/* Attribut Block (z.B. Überschrift und Wert) */
.featureinfo-attribute-block {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Tabelle */
.featureinfo-html-result table.attribute-list {
    word-wrap: break-word;
}

/* Tabellenspalte */
.featureinfo-html-result table.attribute-list td {
    border: 1px solid #ddd;
}

/* Tabellenspalte - Titel */
.featureinfo-html-result td.identify-attr-title {
    padding-right: 0.25em !important;
}

/* Tabellenspalte - Wert */
.featureinfo-html-result td.identify-attr-value {
    padding-left: 0.25em;
}

/* Forumlar */
.featureinfo-html-result form {
    margin-top: 0.5em;
}

/* Forumlar - Eingabefelder */
.featureinfo-html-result form > input {
    display: block;
    margin: 0.5em 0;
}

/* Forumlar - Auswahlfelder */
.featureinfo-html-result form > select {
    display: block;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    padding: 0.25em;
    margin: 0.5em 0;
}

/* Forumlar - Absende-Button */
.featureinfo-html-result form > input[type="submit"] {
    background-color: var(--button-bg-color-active) !important;
    color: var(--button-text-color-active) !important;
    border: none !important;
    padding: 0.5em 1em !important;
    cursor: pointer !important;
}

.featureinfo-html-result form > input[type="submit"]:hover {
    background-color: var(--button-bg-color-active-hover) !important;
    color: var(--button-text-color-active-hover) !important;
}

/*
 * ---------------------------------------------------------------------
 * Layerabfrage
 * ---------------------------------------------------------------------
*/

/* Metadaten - 1. Zeile */
table.wob-layer-metadata-table tr:first-child td {
    padding-top: 0em;
}

/* Metadaten - 1. Spalte */
table.wob-layer-metadata-table tr td:first-child {
    padding-left: 0em;
}

/*
 * ---------------------------------------------------------------------
 * Kartenhinweise (MapTips)
 * ---------------------------------------------------------------------
*/

#MapTip {
    padding: 0.5em;
    font-size: 75%;
}

/*
 * ---------------------------------------------------------------------
 * Themenauswahl
 * ---------------------------------------------------------------------
*/

/* Themenauswahlfenster */
#ThemeSwitcher {
    min-width: 23em !important;
    max-width: 100%;
}

/* Themenliste */
div.ThemeList {
    padding: 0.5em;
}

/* Inhalt einer Themengruppe */
div.ThemeList ul.theme-group-body {
    padding: 0em !important;
}

/* Inhalt einer Themengruppe mit Titel */
div.ThemeList li.theme-group-header ul.theme-group-body {
    margin-left: 0em !important;
}

/* Thema */
div.ThemeList li.theme-item {
    width: 22em !important;
    height: 8em;
}

/* Inhalt des Titel eines Themas */
div.ThemeList div.theme-item-title {
    align-items: flex-start !important;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 8em + 2px);
    height: calc(100% - 2.7em);
    padding: 0.25em;
    text-align: left;
}

/* Titel eines Themas */
div.ThemeList div.theme-item-title > span:first-child {
    padding: 0em !important;
    white-space: normal !important;
}

/* Inhalt eines Themas mit dem Vorschaubild */
div.ThemeList div.theme-item-body {
    background-color: var(--list-bg-color) !important;
    width: calc(8em - 2px);
    height: calc(8em - 2px);
    padding: 0.25em;
}

/* Vorschaubild eines Themas */
div.ThemeList img.theme-item-thumbnail {
    width: 100% !important;
    border: 1px solid var(--border-color);
}

/* Funktionsbuttons */
div.ThemeList div.theme-item-icons {
    flex-direction: row !important;
}

/* Funktionsbutton */
div.ThemeList div.theme-item-icons > span.icon {
    background-color: var(--list-bg-color) !important;
}

/* Überlagerung der Informationen beim Filtern */
div.ThemeList div.theme-item-filterinfo-overlay {
    right: 0em !important;
    border-right: none !important;
    padding-right: 7.25em !important;
}

/*
 * ---------------------------------------------------------------------
 * Ebenenmenü
 * ---------------------------------------------------------------------
*/

/* Linker Abstand bei Gruppenlayern */
#LayerTree div.layertree-item-container div.layertree-item-container {
    margin-left: 1.5em;
}

/*
 * ---------------------------------------------------------------------
 * Editieren
 * ---------------------------------------------------------------------
*/

/* Fehlerhafte Eingabe */
input:invalid,
select:invalid,
textarea:invalid,
textarea:invalid ~ pre.text-input,
pre.text-input-invalid,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):invalid {
    background-color: rgba(var(--wob-color-sonne-rgb), 0.4) !important;
}

/* Button "Akzeptieren" */
button.button-accept:not(:disabled) {
    background-color: var(--wob-color-jade) !important;
    color: var(--wob-color-weiss) !important;
}

button.button-accept:not(:disabled):hover {
    background-color: var(--wob-color-jade-shade-20) !important;
}

/* Button "Warnung" */
button.button-warning:not(:disabled) {
    background-color: var(--wob-color-sonne) !important;
    color: var(--wob-color-weiss) !important;
}

button.button-warning:not(:disabled):hover {
    background-color: var(--wob-color-sonne-shade-20) !important;
}

/* Button "Ablehnen" */
button.button-reject:not(:disabled) {
    background-color: var(--wob-color-beere) !important;
    color: var(--wob-color-weiss) !important;
}

button.button-reject:not(:disabled):hover {
    background-color: var(--wob-color-beere-shade-20) !important;
}

/*
 * ---------------------------------------------------------------------
 * Attributtabelle
 * ---------------------------------------------------------------------
*/

/* Auswahlfelder - Ungerade Zeilen*/
table.attribtable-table tr:nth-child(odd) td > select {
    background-color: var(--list-bg-color) !important;
}

/* Auswahlfelder - Gerade Zeilen*/
table.attribtable-table tr:nth-child(even) td > select {
    background-color: var(--list-item-bg-color-even) !important;
}

/*
 * ---------------------------------------------------------------------
 * Legendenfenster
 * ---------------------------------------------------------------------
*/

/* Textelemente */
span.wob-legend-window-text {
    font-family: Arial;
    font-size: 11pt;
}

/*
 * ---------------------------------------------------------------------
 * Teilen-Fenster
 * ---------------------------------------------------------------------
*/

#Share div.share-option-pin {
    margin: 0em !important;
    padding: 1em !important;
}

#Share div.share-option-pin > span:first-child {
    padding-right: 1em !important;
}

#Share div.share-reload-overlay > button {
    width: 100%;
}

/*
 * ---------------------------------------------------------------------
 * Einstellungen
 * ---------------------------------------------------------------------
*/

/* Überschriften in den Auswahllisten */
#Settings table.settings-table td select option[disabled] {
    background-color: var(--list-section-bg-color);
    color: var(--list-section-text-color);
    font-weight: bold;
}

/*
 * ---------------------------------------------------------------------
 * Wechselschalter
 * ---------------------------------------------------------------------
*/

div.ToggleSwitch {
    height: 2.2em !important;
    padding: 0.2em;
}

div.ToggleSwitch.toggle-switch-active {
    background-color: var(--button-bg-color-active) !important;
}

div.ToggleSwitch.toggle-switch-active:hover {
    background-color: var(--button-bg-color-active-hover) !important;
}

div.ToggleSwitch.toggle-switch-inactive {
    background-color: var(--button-bg-color) !important;
}

div.ToggleSwitch.toggle-switch-inactive:hover {
    background-color: var(--button-bg-color-hover) !important;
}

div.ToggleSwitch > span.toggle-switch-yes span.icon,
div.ToggleSwitch > span.toggle-switch-no span.icon {
    line-height: 1.8em;
    vertical-align: middle;
}

/*
 * ---------------------------------------------------------------------
 * Angemeldeter Benutzer
 * ---------------------------------------------------------------------
*/

/* Angemeldeter Benutzer ausblenden */
div.login-user {
    display: none !important;
}

/*
 * ---------------------------------------------------------------------
 * Webbrowser Warnung
 * ---------------------------------------------------------------------
*/

/* Warnmeldung */
#browser-warning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    display: none;
}

/* Inhaltsblock */
div.browser-warning-content {
    padding: 0.5em;
    background-color: rgba(255, 255, 255, 1);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 1em;
}

/* Textblock */
div.browser-warning-message {
    color: var(--wob-color-beere);
}

/* Adressblock */
div.browser-warning-contact-address {
    display: inline-block;
    margin-right: 2em;
}

/* Logo-Block */
div.browser-warning-contact-logo {
    display: inline-block;
}

/* Logo */
div.browser-warning-contact-logo img {
    height: auto;
    width: 6em;
}

/*
 * ---------------------------------------------------------------------
 * Bildschirmbreiten kleiner oder gleich 768px
 * ---------------------------------------------------------------------
*/
@media (max-width: 768px) {
    /* bottombar is high 3em at 75% font size, hence at 100% font size it is 0.75 * 3em = 2.25em */
    /* titlebar: 2.5em */
    /* topbar: 3.5em */

    /* Maximale Höhe des Menüs anpassen */
    div.AppMenu div.appmenu-menu-container {
        max-height: calc(100vh - 3.5em) !important;
        max-height: calc(var(--vh, 1vh) * 100 - 3.5em) !important;
    }

    /* Maximale Höhe eines skalierbaren Fensters anpassen */
    div.resizeable-window-container {
        bottom: 0em !important;
    }

    /* Maximale Höhe einer Seitenleiste anpassen */
    div.sidebar {
        max-height: calc(100vh - 3.5em) !important;
        max-height: calc(var(--vh, 1vh) * 100 - 3.5em) !important;
    }

    /* Maximale Inhaltshöhe einer Seitenleiste anpassen */
    div.sidebar div.sidebar-body {
        /* viewport - topbar - bottombar - sidebar_titlebar */
        max-height: calc(100vh - 6em) !important;
        max-height: calc(var(--vh, 1vh) * 100 - 6em) !important;
    }

    /* Maximale Inhaltshöhe des Bearbeitungsmenü anpassen */
    #Editing div.editing-body {
        /* viewport - topbar - bottombar - sidebar_titlebar */
        max-height: calc(100vh - 6em) !important;
        max-height: calc(var(--vh, 1vh) * 100 - 6em) !important;
    }

    /* Maximale Inhaltshöhe des Ebenenmenü anpassen */
    #LayerTree div.layertree-container {
        /* viewport - topbar - bottombar - sidebar_titlebar */
        max-height: calc(100vh - 6em) !important;
        max-height: calc(var(--vh, 1vh) * 100 - 6em) !important;
    }

    /* Position des Copyrights anpassen */
    #MapCopyright {
        transform: translateY(3.4em);
    }

    /* Maßstabsleiste anpassen */
    div.ol-scale-line {
        z-index: 2 !important;
    }

    /* Untere Werkzeugleiste ausblenden */
    #BottomBar {
        display: none !important;
    }

    /* Menübeschriftung ausblenden */
    #TopBar div.AppMenu .appmenu-label {
        display: none !important;
    }

    /* Containerbreite des Menübuttons verkleinern */
    #TopBar div.AppMenu .appmenu-button {
        width: auto !important;
    }

    /* Angemeldeter Benutzer einblenden */
    div.login-user {
        display: flex !important;
    }

    /* Werkzeugleiste ausblenden */
    div.Toolbar {
        display: none !important;
    }

    /* Positionierung der Webbrowser Warnmeldung zurücksetzen */
    #browser-warning {
        top: auto;
        left: auto;
        transform: none;
    }

    /* Buttonbeschriftungen im Historienwerkzeug der letzten Kartenansichten ausblenden */
    div.WobMapViewHistory div.ButtonBar span.buttonbar-button-container button.button > span:not(.icon) {
        display: none;
    }
}

/*
 * ---------------------------------------------------------------------
 * Bildschirmbreiten kleiner oder gleich 576px
 * ---------------------------------------------------------------------
*/
@media (max-width: 576px) {
    /* Maßstabsleiste ausblenden */
    div.ol-scale-line {
        display: none !important;
    }

    /* Maximale Breite der Nachrichtenleiste vergrößern */
    div.messagebar {
        left: auto !important;
        transform: none !important;
        width: calc(100% - 0.5em);
        margin-left: 0.25em;
        margin-right: 0.25em;
    }

    /* Maximale Breite des Nachrichtenleisten-Inhalts vergrößern */
    div.messagebar > div.body {
        display: block !important;
    }

    /* Zeichnen-Elemente auf mehrere Zeilen verteilen */
    div.redlining-buttongroups,
    div.redlining-controlsbar {
        flex-wrap: wrap;
        row-gap: 0.25em;
    }

    /* Messwerkzeugleisten-Elemente auf mehrere Zeilen verteilen */
    div.Measure div.ButtonBar {
        flex-wrap: wrap;
    }

    /* Portal: Breite des Menübuttons zurücksetzen */
    div.Portal span.portal-menu-button {
        width: auto !important;
    }

    /* Portal: Beschriftung des Menübuttons ausblenden */
    div.Portal span.portal-menu-label {
        display: none;
    }
}

/*
 * ---------------------------------------------------------------------
 * Bildschirmhöhen größer oder gleich 576px
 * ---------------------------------------------------------------------
*/
@media (min-height: 576px) {
    /* Hintergrundkarte wechseln: Gesamtelement */
    #BackgroundSwitcher div.background-switcher-item {
        width: 12.5em !important;
    }

    /* Hintergrundkarte wechseln: Vorschaubild */
    #BackgroundSwitcher div.background-layer-thumbnail {
        height: 6.5em !important;
    }
}

/*
 * ---------------------------------------------------------------------
 * Bildschirmhöhen kleiner oder gleich 540px
 * ---------------------------------------------------------------------
*/
@media (max-height: 540px) {
    /* Kartenbutton "Hinauszoomen" (Positionsnummer 3) ausblenden*/
    button.map-button[style*="bottom: calc(17em"] {
        display: none !important;
    }

    /* Kartenbutton "Hineinzoomen" (Positionsnummer 4) ausblenden*/
    button.map-button[style*="bottom: calc(21em"] {
        display: none !important;
    }

    /* Kartenbutton "Home" (Positionsnummer 5) => Positionsnummer 3 */
    button.map-button[style*="bottom: calc(25em"] {
        transform: translateY(8em);
    }

    /* OpenLayers-Kompass-Button (Drehung zurücksetzen) => Positionsnummer 4 */
    div#map div.ol-rotate {
        transform: translateY(8em);
    }
}

/*
 * ---------------------------------------------------------------------
 * Bildschirmhöhen kleiner oder gleich 430px
 * ---------------------------------------------------------------------
*/
@media (max-height: 430px) {
    /* Kartenbutton "Übersichtskarte" (Positionsnummer 1) ausblenden*/
    button.map-button[style*="bottom: calc(9em"] {
        display: none !important;
    }

    /* Kartenbutton "Ortung" (Positionsnummer 2) => Positionsnummer 1 */
    button.map-button[style*="bottom: calc(13em"] {
        transform: translateY(4em);
    }

    /* Kartenbutton "Home" (Positionsnummer 5) => Positionsnummer 2 */
    button.map-button[style*="bottom: calc(25em"] {
        transform: translateY(12em);
    }

    /* OpenLayers-Kompass-Button (Drehung zurücksetzen) => Positionsnummer 3 */
    div#map div.ol-rotate {
        transform: translateY(12em);
    }
}

/*
 * ---------------------------------------------------------------------
 * Bildschirmhöhen kleiner oder gleich 380px
 * ---------------------------------------------------------------------
*/
@media (max-height: 380px) {
    /* OpenLayers-Kompass-Button (Drehung zurücksetzen) ausblenden */
    div#map div.ol-rotate {
        display: none !important;
    }
}

/*
 * ---------------------------------------------------------------------
 * Bildschirmhöhen kleiner oder gleich 320px
 * ---------------------------------------------------------------------
*/
@media (max-height: 320px) {
    /* Kartenbutton "Home" (Positionsnummer 5) ausblenden */
    button.map-button[style*="bottom: calc(25em"] {
        display: none !important;
    }
}

/*
 * ---------------------------------------------------------------------
 * Farbschema - Hochkontrast
 * ---------------------------------------------------------------------
*/

/* Animationselement der Fortschrittsanzeige (Webseite) */
.wob_highcontrast .lds-dual-ring:after {
    border: 15px solid rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent !important;
}

/* Animationselement der Fortschrittsanzeige (Karte) */
.wob_highcontrast span.map-loading-indicator .spinner {
    border-top: 15px solid rgba(0, 0, 0, 0.8) !important;
}

/* Suche */
.wob_highcontrast div.SearchBox div.searchbox-results-section-title {
    color: black;
}

/* Ebenenkatalog */
.wob_highcontrast span.layer-catalog-widget-entry-service {
    color: white !important;
    background-color: black !important;
}

/*
 * ---------------------------------------------------------------------
 * Farbschema - Dunkel
 * ---------------------------------------------------------------------
*/

/* Animationselement der Fortschrittsanzeige (Webseite) */
.wob_dark .lds-dual-ring:after {
    border: 15px solid rgba(51, 51, 51, 0.8) !important;
    border-color: rgba(51, 51, 51, 0.8) transparent transparent transparent !important;
}

/* Animationselement der Fortschrittsanzeige (Karte) */
.wob_dark span.map-loading-indicator .spinner {
    border-top: 15px solid rgba(51, 51, 51, 0.8) !important;
}

/* Copyrights-Hinweis */
.wob_dark #MapCopyright {
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: #595959 !important;
}

.wob_dark #MapCopyright span:not(:first-child) {
    border-left: 1px solid #595959 !important;
}

.wob_dark #MapCopyright a {
    color: #337ab7 !important;
}

/* Legendenfenster */
.wob_dark div.legend-window-frame {
    background-color: white !important;
}

/* Logo */
.wob_dark #TopBar img.logo {
    filter: invert(100%);
}

/* Hilfe - Logo */
.wob_dark #Help img {
    filter: invert(100%);
}

/* Suchergebnisse */
.wob_dark div.SearchBox div.searchbox-results {
    background-color: rgba(63, 63, 63, 0.85);
}

/* Themenauswahl */
.wob_dark div.ThemeList li.theme-group-header > span {
    border-bottom: 1px solid var(--text-color) !important;
}

.wob_dark div.ThemeList div.theme-item-filterinfo-overlay {
    background-color: rgba(63, 63, 63, 0.85) !important;
}

/* Wechselschalter */
.wob_dark div.ToggleSwitch > span.toggle-switch-yes {
    color: var(--text-color) !important;
}