#b3itgeo-viewer-map.openlayer-map {
    position: relative;
    width: 100%;
    height: 500px;
}

#b3itgeo-viewer-map .ol-control button {
    color: #333333;
    background-color: #ffffff;
}

#b3itgeo-viewer-map .ol-control button:hover,
#b3itgeo-viewer-map .ol-control button:focus {
    color: #000000;
    background-color: #ffffff;
}

/* Die Sidebar (b3itgeo/ol3-sidebar.js) liegt links, position:absolute, z-index:1000, auch im
   eingeklappten Zustand 2.6em breit - überlappt dadurch den Standard-OL-Zoom-Control (top:.5em;
   left:.5em) und deckt ihn optisch ab. Zoom-Control nach rechts verschieben, damit er neben statt
   hinter der Sidebar liegt - siehe b3itgeo-mapseries.css für den Hintergrund. */
#b3itgeo-viewer-map .ol-zoom {
    left: 3.2em;
}

.b3itgeo-plus,
.b3itgeo-minus,
.b3itgeo-map-full,
.b3itgeo-tool-zoom,
.b3itgeo-tool-zoom-in,
.b3itgeo-tool-zoom-out,
.b3itgeo-tool-arrow,
.b3itgeo-tool-rectangle-select,
.b3itgeo-tool-polygon,
.b3itgeo-tool-zoom-rectangle,
.b3itgeo-tool-zoom-center,
.b3itgeo-tool-hand,
.b3itgeo-tool-draw-polygon,
.b3itgeo-tool-draw-rectangle,
.b3itgeo-tool-trash,
.b3itgeo-tool-eraser,
.b3itgeo-tool-search {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65% 65%;
}

/* Panel-Tab "Zoomwerkzeuge" - Lupe MIT Plus (wie ".b3itgeo-tool-zoom-in" unten), damit sie sich von
   ".b3itgeo-tool-search" (schlichte Lupe ohne Plus, eigener Sidebar-Tab "Suche") unterscheidet -
   beide waren zuvor identisch und liessen sich in der Sidebar nicht auseinanderhalten. */
.b3itgeo-tool-zoom {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23333333' stroke-width='1.4'/%3E%3Cline x1='6.5' y1='4.3' x2='6.5' y2='8.7' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='4.3' y1='6.5' x2='8.7' y2='6.5' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='9.8' y1='9.8' x2='14.5' y2='14.5' stroke='%23333333' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Werkzeug: Zoom in - Lupe mit Plus */
.b3itgeo-tool-zoom-in {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23333333' stroke-width='1.4'/%3E%3Cline x1='6.5' y1='4.3' x2='6.5' y2='8.7' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='4.3' y1='6.5' x2='8.7' y2='6.5' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='9.8' y1='9.8' x2='14.5' y2='14.5' stroke='%23333333' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Werkzeug: Zoom out - Lupe mit Minus */
.b3itgeo-tool-zoom-out {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23333333' stroke-width='1.4'/%3E%3Cline x1='4.3' y1='6.5' x2='8.7' y2='6.5' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='9.8' y1='9.8' x2='14.5' y2='14.5' stroke='%23333333' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Werkzeug: Pfeil (ein Objekt auswählen)  (dort "pointer") */
.b3itgeo-tool-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333333' d='M2 1 L2 13.5 L5 10.8 L7.2 15 L9 14.1 L6.8 10 L11 10 Z'/%3E%3C/svg%3E");
}

/* Werkzeug: Rechteck (mehrere Objekte per Box auswählen)  */
.b3itgeo-tool-rectangle-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='4' width='11' height='8' fill='none' stroke='%23333333' stroke-width='1.3' stroke-dasharray='2,1.5'/%3E%3C/svg%3E");
}

/* Werkzeug: Polygon (Objekte per gezeichnetem Polygon auswählen) - im gleichen gestrichelten Stil
   wie das Rechteck-Werkzeug, da beide Auswahl-Werkzeuge sind (kein Pendant in der Kartenserie). */
.b3itgeo-tool-polygon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8,2 14,6.5 12,13 4,13 2,6.5' fill='none' stroke='%23333333' stroke-width='1.3' stroke-dasharray='2,1.5'/%3E%3C/svg%3E");
}

/* Werkzeug: Zoom-Rechteck (Box aufziehen, um in diesen Bereich zu zoomen - Navigation, keine
   Auswahl) - durchgezogenes Rechteck mit Lupe/Plus, um es vom gestrichelten Auswahl-Rechteck zu
   unterscheiden (kein Pendant in der Kartenserie). */
.b3itgeo-tool-zoom-rectangle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='3' width='9' height='7' fill='none' stroke='%23333333' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='11' r='2.6' fill='none' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='13.8' y1='12.8' x2='15.3' y2='14.3' stroke='%23333333' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='10.8' y1='11' x2='13.2' y2='11' stroke='%23333333' stroke-width='1'/%3E%3Cline x1='12' y1='9.8' x2='12' y2='12.2' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E");
}

/* Werkzeug: Zoom-Center (zoom out, zentriert auf Klickpunkt)
   (dort "center") */
.b3itgeo-tool-zoom-center {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23333333' stroke-width='1.2'/%3E%3Ccircle cx='8' cy='8' r='1.3' fill='%23333333'/%3E%3Cline x1='8' y1='0.5' x2='8' y2='2.7' stroke='%23333333' stroke-width='1'/%3E%3Cline x1='8' y1='13.3' x2='8' y2='15.5' stroke='%23333333' stroke-width='1'/%3E%3Cline x1='0.5' y1='8' x2='2.7' y2='8' stroke='%23333333' stroke-width='1'/%3E%3Cline x1='13.3' y1='8' x2='15.5' y2='8' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E");
}

/* Werkzeug: Hand (verschieben)  */
.b3itgeo-tool-hand {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='4' y='4' width='1.6' height='5' rx='0.8' fill='none' stroke='%23333333' stroke-width='1'/%3E%3Crect x='6' y='2' width='1.6' height='7' rx='0.8' fill='none' stroke='%23333333' stroke-width='1'/%3E%3Crect x='8' y='1.5' width='1.6' height='7.5' rx='0.8' fill='none' stroke='%23333333' stroke-width='1'/%3E%3Crect x='10' y='2' width='1.6' height='7' rx='0.8' fill='none' stroke='%23333333' stroke-width='1'/%3E%3Cpath d='M4 8.5 v2.5 a4 4 0 0 0 4 4 h4 a4 4 0 0 0 4 -4 v-4' fill='none' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E");
}

/* Werkzeuge, die per registerTool() von Hvbg_NbaProfile (js/hvbg/nbaprofile-gebiet.js) ergänzt
   werden: Freihand-Polygon/Rechteck ZEICHNEN (neue Geometrie), keine Auswahl bestehender Objekte -
   deshalb durchgezogener statt gestrichelter Umriss wie bei .b3itgeo-tool-polygon/-rectangle-select,
   um "zeichnen" optisch von "auswählen" zu unterscheiden. */
.b3itgeo-tool-draw-polygon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8,2 14,6.5 12,13 4,13 2,6.5' fill='none' stroke='%23333333' stroke-width='1.3'/%3E%3Ccircle cx='8' cy='2' r='1' fill='%23333333'/%3E%3Ccircle cx='14' cy='6.5' r='1' fill='%23333333'/%3E%3Ccircle cx='12' cy='13' r='1' fill='%23333333'/%3E%3Ccircle cx='4' cy='13' r='1' fill='%23333333'/%3E%3Ccircle cx='2' cy='6.5' r='1' fill='%23333333'/%3E%3C/svg%3E");
}

.b3itgeo-tool-draw-rectangle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='4' width='11' height='8' fill='none' stroke='%23333333' stroke-width='1.3'/%3E%3Ccircle cx='2.5' cy='4' r='1' fill='%23333333'/%3E%3Ccircle cx='13.5' cy='4' r='1' fill='%23333333'/%3E%3Ccircle cx='13.5' cy='12' r='1' fill='%23333333'/%3E%3Ccircle cx='2.5' cy='12' r='1' fill='%23333333'/%3E%3C/svg%3E");
}

/* Werkzeug/Aktion: Papierkorb - kein exklusiv aktivierbares Werkzeug wie die übrigen Buttons hier
   (kein data-tool-Attribut, siehe viewer.phtml), sondern eine sofortige Aktion (analog zu
   Zoom-In/-Out), die per registerTool()'s optionalem "clear"-Handler auf allen aktuell
   registrierten Werkzeugen ausgeführt wird. */
.b3itgeo-tool-trash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='2.5' y1='4.5' x2='13.5' y2='4.5' stroke='%23333333' stroke-width='1.3'/%3E%3Cpath d='M4 4.5 L4.7 14 A1 1 0 0 0 5.7 15 L10.3 15 A1 1 0 0 0 11.3 14 L12 4.5' fill='none' stroke='%23333333' stroke-width='1.3'/%3E%3Cline x1='6' y1='3' x2='6' y2='4.5' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='10' y1='3' x2='10' y2='4.5' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='6' y1='2.3' x2='10' y2='2.3' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='6.7' y1='7' x2='6.7' y2='12.5' stroke='%23333333' stroke-width='1'/%3E%3Cline x1='9.3' y1='7' x2='9.3' y2='12.5' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E");
}

/* Werkzeug: Radiergummi - klickt eine einzelne, bereits ausgewählte/gezeichnete Geometrie an, um
   nur diese eine zu entfernen (im Unterschied zum Papierkorb oben, der alles auf einmal leert). */
.b3itgeo-tool-eraser {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.2' y='6.2' width='9.6' height='5.6' rx='1' fill='none' stroke='%23333333' stroke-width='1.3' transform='rotate(-25 8 9)'/%3E%3Cline x1='5.2' y1='6.2' x2='5.2' y2='11.8' stroke='%23333333' stroke-width='1' transform='rotate(-25 8 9)'/%3E%3C/svg%3E");
}

/* Zoom in  */
.b3itgeo-plus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333333' d='M7 0h2v7h7v2H9v7H7V9H0V7h7z'/%3E%3C/svg%3E");
}

/* Zoom out  */
.b3itgeo-minus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333333' d='M0 7h16v2H0z'/%3E%3C/svg%3E");
}

/* Zoom auf gesamte Extent (Weltkugel)  */
.b3itgeo-map-full {
    background-size: 80% 80%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23333333' stroke-width='1.2'/%3E%3Cellipse cx='8' cy='8' rx='2.8' ry='6.5' fill='none' stroke='%23333333' stroke-width='1.2'/%3E%3Cline x1='1.5' y1='8' x2='14.5' y2='8' stroke='%23333333' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* Sidebar toolbox (js/b3itgeo/ol3-sidebar.js, ported from turbo87/sidebar-v2)*/
.sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 285px;
    max-width: 100%;
    overflow: hidden;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    transition: width 0.3s ease-out;
}

.sidebar-left {
    left: 0;
}

.sidebar-right {
    right: 0;
}

.sidebar.collapsed {
    width: 2.6em;
}

.sidebar-tabs,
.sidebar-content {
    position: absolute;
    top: 0;
    bottom: 0;
}

.sidebar-tabs {
    left: 0;
    width: 2.6em;
    background-color: #f5f5f5;
    border-right: 1px solid #dddddd;
}

.sidebar-right .sidebar-tabs {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid #dddddd;
}

.sidebar-tabs > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-tabs > ul > li {
    width: 2.6em;
    height: 2.6em;
}

.sidebar-tabs > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.sidebar-tabs > ul > li > a:hover {
    background-color: #eeeeee;
}

.sidebar-tabs > ul > li.active > a {
    background-color: #ffffff;
    border-left: 2px solid #0077b6;
}

.sidebar-right .sidebar-tabs > ul > li.active > a {
    border-left: none;
    border-right: 2px solid #0077b6;
}

.sidebar-content {
    left: 2.6em;
    right: 0;
    background-color: #ffffff;
    overflow-y: auto;
    visibility: hidden;
}

.sidebar-right .sidebar-content {
    left: 0;
    right: 2.6em;
}

.sidebar:not(.collapsed) .sidebar-content {
    visibility: visible;
}

.sidebar-pane {
    display: none;
    padding: 0.83em;
}

.sidebar-pane.active {
    display: block;
}

.sidebar-header {
    margin: -0.83em -0.83em 0.5em -0.83em;
    padding: 0.6em 1em;
    background-color: #f5f5f5;
    border-bottom: 1px solid #dddddd;
    font-size: 1em;
}

/* Schließt das Panel wieder (js/b3itgeo/ol3-sidebar.js wired das per _closeButtons automatisch) -
   ohne diesen Button gibt es keine erreichbare Möglichkeit, ein einmal geöffnetes Panel wieder
   einzuklappen außer erneut auf den (nicht mehr sichtbaren) Tab-Icon zu klicken. */
.sidebar-close {
    float: right;
    cursor: pointer;
    width: 1.2em;
    height: 1.2em;
}

.b3itgeo-caret-left {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55% 55%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 2 L5 8 L11 14' stroke='%23333333' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Werkzeug-Buttons innerhalb eines Panels (Auswahl-/Zoomwerkzeuge) - im Gegensatz zu den
   schmalen, immer sichtbaren .sidebar-tabs-Icons (Panel-Öffner) werden diese erst nach Klick auf
   den jeweiligen Panel-Tab sichtbar. */
.b3itgeo-viewer-tool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.b3itgeo-viewer-tool-list > li {
    width: 2.6em;
    height: 2.6em;
}

.b3itgeo-viewer-tool-list > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #dddddd;
}

.b3itgeo-viewer-tool-list > li:hover > a {
    background-color: #eeeeee;
}

.b3itgeo-viewer-tool-list > li.active > a {
    background-color: #ffffff;
    border-color: #0077b6;
}

/* Werkzeug-Tab: Suchset (Flurstueckskennzeichen o.ae. eingeben statt auf der Karte auszuwaehlen) -
   eigener Sidebar-Tab neben "Auswahl-/Zoom-Werkzeuge" (siehe "b3itgeo_viewer_extra_tabs" in
   viewer.phtml). Schlichte Lupe OHNE Plus - das ist die Konvention fuer "suchen", waehrend
   ".b3itgeo-tool-zoom" (Zoom-Tab) bewusst eine Lupe MIT Plus bekommt, um beide auseinanderhalten
   zu koennen. */
.b3itgeo-tool-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%23333333' stroke-width='1.4'/%3E%3Cline x1='9.8' y1='9.8' x2='14.5' y2='14.5' stroke='%23333333' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Unter-Reiter INNERHALB des Suche-Sidebar-Tabs (ein Reiter pro Suchformular des zugewiesenen
   Suchsets) - eigene, einfache Klassen-Umschaltung (siehe search/pane.phtml), nicht ueber
   ol.control.Sidebar (das verwaltet nur die AEUSSEREN Sidebar-Tabs). */
.b3itgeo-search-form-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin: 0 0 0.6em 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #dddddd;
}

.b3itgeo-search-form-tabs > li > a {
    display: block;
    padding: 0.3em 0.6em;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.9em;
    border: 1px solid #dddddd;
    border-bottom: none;
    border-radius: 0.2em 0.2em 0 0;
}

.b3itgeo-search-form-tabs > li:hover > a {
    background-color: #eeeeee;
}

.b3itgeo-search-form-tabs > li.active > a {
    background-color: #ffffff;
    border-color: #0077b6;
    color: #0077b6;
    font-weight: bold;
}

.b3itgeo-search-form-panel {
    display: none;
}

.b3itgeo-search-form-panel.active {
    display: block;
}

.b3itgeo-search-field {
    display: block;
    margin-bottom: 0.5em;
}

/* Direktes Kind statt Nachfahre (">"): trifft nur den umschliessenden Label-Span, nicht das
   verschachtelte .b3itgeo-search-field-required-Sternchen darin - sonst erbte das Sternchen
   dasselbe "display:block" und ruescht in eine eigene Zeile statt hinter das Label. */
.b3itgeo-search-field > span {
    display: block;
    margin-bottom: 0.2em;
    font-size: 0.9em;
}

.b3itgeo-search-field input {
    width: 100%;
    box-sizing: border-box;
}

/* Nur optische Kennzeichnung "Eingabe erwuenscht" - keine echte Pflichtfeld-Validierung. */
.b3itgeo-search-field-required {
    color: #c00000;
}

.b3itgeo-search-field-comment {
    display: block;
    margin-top: 0.2em;
    color: #888888;
    font-size: 0.85em;
}

.b3itgeo-search-submit {
    width: 100%;
}

.b3itgeo-search-status {
    margin: 0.5em 0;
    font-size: 0.9em;
}

.b3itgeo-search-results {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
}

.b3itgeo-search-results > li {
    padding: 0.3em 0.4em;
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
    font-size: 0.9em;
}

.b3itgeo-search-results > li:hover {
    background-color: #f5f5f5;
}

.b3itgeo-search-results > li.active {
    background-color: #e6f2f8;
    font-weight: bold;
}