:root {
    --bs-border-radius: 0;
    --sidebar-width: 490px;
    --sidebar-spacing: 30px;
    --sidebar-total: calc(var(--sidebar-width) + var(--sidebar-spacing));
    /* Use -110% instead of -100% to ensure sidebar is fully hidden including box-shadow */
    --sidebar-hide-offset: -110%;
}

body {
            font-family: 'Outfit', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
        }
        h5, h6, p, a {
            font-family: 'Outfit', sans-serif;

        }
        h5 {
            font-size:1.4rem;
        }
        p, a {
            font-size:1rem;
        }
        
        #map { 
            height: 100vh; 
            width: 100%;
        }
        
        #sidebar {
            position: fixed;
            top: 10px;
            left: 10px;
            width: var(--sidebar-width);
            flex: 0 0 var(--sidebar-width);
            background: white;
            padding: 20px;
            border-radius: 5px;
            z-index: 600;
            overflow-y: auto;
            box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
            min-height: 350px;
            max-height: 90vh;
            transition: transform 0.3s ease;
        }
        
        #sidebar.collapsed {
            transform: translateX(var(--sidebar-hide-offset));
        }
        
        #sidebar-toggle {
            position: fixed;
            top: 20px;
            left: 20px;
            background: white;
            border: none;
            cursor: pointer;
            font-size: 24px;
            padding: 10px 15px;
            border-radius: 5px;
            box-shadow: 0px 5px 10px -3px rgba(0,0,0,0.1);
            z-index: 700;
            display: none;
            transition: left 0.3s ease;
        }
        
        #sidebar-toggle.sidebar-hidden {
            left: 20px;
        }
        
        #sidebar-toggle.sidebar-visible {
            left: var(--sidebar-total);
        }
        
        #list-view {
            position: fixed;
            top: 10px;
            left: var(--sidebar-total);
            width: calc(100% - var(--sidebar-total) - 10px);
            max-height: 90vh;
            background: white;
            padding: 20px;
            border-radius: 5px;
            z-index: 1000;
            overflow-y: auto;
            box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
            display: none;
            z-index: 99999;
            transition: left 0.3s ease, width 0.3s ease;
        }
        
        #list-view.sidebar-collapsed {
            left: 10px;
            width: calc(100% - 20px);
        }
        
        @media (max-width: 768px) {
            #sidebar {
                width: 95%;
                min-width: auto;
                max-height: 50vh;
                overflow-y: scroll;
                left: 10px;
                top: 10px;
            }
            
            #sidebar.collapsed {
                transform: translateX(-110%);
            }
            
            #sidebar-toggle {
                display: block;
            }
            
            #list-view {
                width: 95%;
                min-width: auto;
                max-height: 50vh;
                overflow-y: scroll;
                left: 10px !important;
                top: 10px;
            }
        }
        .btn-category {
            display: flex;
            align-items: center;
            width: 100%;
            text-align: left;
            margin: 3px 0;
            padding: 10px;
            transition: background-color 0.3s, color 0.3s;
            background-color: #f5f5f5;
            border: none;
            border-radius: 0px;
            color: #333;
            position: relative;
        }
        .btn-category:hover {
            background-color: #d6d6d6;
        }

        .btn-category.active {
            background-color: #c9d52d;
            color: #000000;
            border-color: #c9d52d;
        }
        .btn-category.active:hover {
            background-color: #b1bb25;
            color: #ffffff;
            border-color: #b1bb25;
        }
        .category-header {
            cursor: pointer;
            font-weight: bold;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #66267b;
            color:#ffffff;
        }
        .category-header:hover {
            background-color: #3d0d51;
            color:#ffffff;
        }
        .category-list {
            display: none;
            /*margin-left: 32px;*/
            overflow: hidden;
            /*border-left: 3px solid #ddd;*/
        }
        .list-item {
            background: #fff;
            margin: 10px 0;
            padding: 15px;
            border-radius: 5px;

        }
        .leaflet-top.leaflet-right { 
            right: 10px !important; 
        }

        .fasb {
            left:0;
            color:#ffffff;
            background: #3d0d51;
            padding:10px;
            margin-right:15px;
            width:35px;
        }

        .fasa {
            left:0;
            color:#ffffff;
            background: #3d0d51;
            padding:10px;
            width:35px;
        }

        .fasasub {
            left:0;
            color:#000000;
            margin-left:10px;
        }

        .fas3 {
            margin-right:3px;
        }

        .fas2 {
            margin-right:2px;
        }

        #slide-sidebar {
            position: fixed;
            left: 385px; /* Direkt rechts neben der Haupt-Sidebar */
            width: 40px; /* Minimierter Zustand */
            background: white;
            border-radius: 5px;
            z-index: 1000;
            overflow: hidden;
            box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
            transition: width 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* Startet die Inhalte von oben */
            margin-left: 20px;
            font-size: 14px;
        }

        #slide-sidebar.expanded {
          width: 275px; /* Ausgeklappter Zustand */
        }

        .toggle-button {
            color: #cccccc;
            background: none ;
            border: none;
            margin: 10px;
            cursor: pointer;
            transition: background 0.3s ease;
            align-self: flex-end; /* Platziert den Button am Ende der Sidebar */
        }

        .toggle-button:hover {
            
        }

        .menu-content {
          margin-top: 20px;
          margin-left: 20px;
          width: 100%;
          text-align: left;
        }

        .menu-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 10px;
          color: #000;
          cursor: pointer;
          font-size:1rem;
        }

        .menu-item:hover {
          background-color: #f4f4f4;
        }

        .menu-item i {
          font-size: 1.5em;
          color: #d6d6d6;
          margin-left:5px;
        }

        .menu-item span {
          display: none; /* Standardmäßig versteckt */
        }

        #slide-sidebar.expanded .menu-item span {
          display: inline; /* Im ausgeklappten Zustand sichtbar */
        }

        .btn-category {
            position: relative; /* Erforderlich für absolute Positionierung des Zählkreises */
        }

        .btn-category-text {
            flex: 1;
            min-width: 0;
        }

        .right-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: 10px;
        }

        .counter-circle {
            background-color: #d6d6d6;
            color: #333;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            flex-shrink: 0;
        }

        .operator-buttons {
            display: flex;
            gap: 4px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            flex-shrink: 0;
        }

        /* A1: Show operator buttons only when appropriate */
        /* When 0 active filters: never show buttons */
        /* When 1 active filter: show on hover for inactive categories only (handled via JS class) */
        /* When ≥2 active filters: show persistently for active filters, on hover for inactive */
        .btn-category.show-operator-buttons:hover .operator-buttons {
            opacity: 1;
            visibility: visible;
        }

        .btn-category.persistent-operator-buttons .operator-buttons {
            opacity: 1;
            visibility: visible;
        }

        .operator-btn {
            background-color: #f5f5f5;
            border: 1px solid #d6d6d6;
            border-radius: 3px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            color: #666;
        }

        .operator-btn:hover {
            background-color: #e0e0e0;
            border-color: #999;
        }

        .operator-btn.selected.and {
            background-color: #00cccc;
            border-color: #00cccc;
            color: #000;
        }

        .operator-btn.selected.or {
            background-color: #ff33cc;
            border-color: #ff33cc;
            color: #fff;
        }
        #reset-filters {
            display: none;
        }

        .btn-group .btn {
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
            background-color: white;
            color: #007bff;
        }

        .btn-group .btn.active {
            background-color: #66267b;
            color: #ffffff;
            border-color: #cccccc;
        }

        .btn-group .btn:not(.active) {
            background-color: white;
            color: #d6d6d6;
            border-color: #cccccc;
        }

        .btn-group .btn:not(.active):hover {
            background-color: #3d0d51;
            color: #ffffff;
            border-color: #cccccc;
        }

        #bottom-sidebar {
            position: fixed;
            left: 20px;
            width: 300px;
            background: transparent;
            padding: 0px;
            border-radius: 5px;
            z-index: 4950;
            overflow-y: auto;
            min-width: 380px;
            max-height: 90vh;
            background-color: #ffffff;
            padding:20px;
            margin-top:-20px;
            box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
        }

        @media (max-width: 768px) {
            #bottom-sidebar {
                width: 90%;
                left: 5%;
            }
        }
        .table {
                width: 100%;
                border-collapse: collapse;
            }

            .table td {
                border: 1px solid #ddd;
                padding: 6px;
                text-align: left;
            }

            .table th {
                border: 1px solid #3d0d51;
                padding: 6px;
                text-align: left;
                background-color: #66267b;
                font-weight: bold;
                color: #ffffff;
            }

            .table tr:nth-child(even) {
                background-color: #f9f9f9;
            }

            .table tr:hover {
                background-color: #f1f1f1;
            }

            .table a {
                color: #66267b;
                text-decoration: none;
            }

            .table a:hover {
                text-decoration: underline;
            }

            .table-striped>tbody>tr:nth-child(odd)>td, 
            .table-striped>tbody>tr:nth-child(odd)>th {
               background-color: #f4f5f5; // Choose your own color here
             }

             .leaflet-container a {
               color: #66267b;
               text-decoration: none;
             }
             .leaflet-container a:hover {
               text-decoration: underline;
             }


             .leaflet-popup {
                min-width:595px;
             }

              .leaflet-popup-content{
                width:95% !important;
             }

             .leaflet-popup-content-wrapper, .leaflet-popup-tip {
               background: white;
               color: #333;
               box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
               border-radius: 5px;
             }
             .leaflet-popup-content-wrapper {
                padding:10px;
             }
             .leaflet-popup-close-button a:hover {
                text-decoration:none !important;
             }

             .logo {
                 width:15%;
                 margin-bottom:25px;
                 position: fixed;
                 z-index:4900;
                 bottom:0;
                 left:0;
             }

             .shepherd-element {
                min-width:500px;
             }
             
             .shepherd-content {
                box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
                z-index:9999 !important;
             }

             .shepherd-text p {
               margin-top: 0;
               padding:10px;
             }

             .shepherd-arrow {
                box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
                z-index:9998 !important;
                border-width: 2px;
                border-color: #000000;
             }

             .shepherd-has-title .shepherd-content .shepherd-header {
                  background: #d0da44 !important;
                  padding: 0.5em;
            }

            .shepherd-title {
                margin-left:20px !important;
                color: #ffffff;
            }

            .shepherd-text {
              color: rgba(0,0,0,.75);
              font-size: 1rem;
              line-height: 1.3em;
              padding: .75em;
              margin-left:10px;
            }

            .shepherd-button:not(:disabled) {
                  background: #c9d52d;
                  color: #ffffff;
            }
            .shepherd-button:not(:disabled):hover {
                  background: #3d0d51;
                  color: #ffffff;
            }
            .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
                color:#ffffff;

            }

            .shepherd-modal-overlay-container.shepherd-modal-is-visible {
              height: 100vh;
              opacity: .70 !important;
              transition: all .3s ease-out,height 0s 0s,opacity .3s 0s;
            }

            .marker-cluster {
                background-color: #66267b;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-weight: bold;
                border: 2px solid #ffffff;
            }

            .notopborder {
                border-top: none !important;
            }

            .dataTables_wrapper .dataTables_filter {
                padding-top:15px;
                float: right !important;
                text-align: right !important;
            }

            .dataTables_wrapper .dataTables_filter input {
                border: 1px solid rgba(0, 0, 0, 0.15) !important;
                border-radius: 3px;
                padding: 5px;
                background-color: transparent;
                color: inherit;
                margin-left: 3px;
            }

            table.dataTable.display > tbody > tr.odd {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023) !important;
                box-shadow: inset 0 0 0 9999px rgba(244, 245, 245, 1) !important;
            }

            table.dataTable.display > tbody > tr.even {
                box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023) !important;
                box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 1) !important;
            }

            tbody > tr > td {
                border-top: 1px solid rgba(214, 214, 214, 0.60) !important;
            }

            a {
                color: #66267b;
                text-decoration: none;
            }

            a:hover {
                color: #3d0d51 !important;
                text-decoration: underline;
                text-decoration-thickness: 2px; 
                text-decoration-color: #3d0d51 !important;
            }

            .menu-icon {
                background: none;
                border: none;
                cursor: pointer;
                font-size: 24px;
                position: absolute;
                top: 10px;
                left: 10px;
                transition: opacity 0.3s ease;
            }   

            #menu-toggle {
                display: block;
            }

            #menu-close {
                display: none;
            }

            .overlay-menu.show #menu-toggle {
                display: none;
            }

            .overlay-menu.show #menu-close {
                display: block;
            }

            .overlay-menu {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.975);
                display: none;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: transform 0.3s ease;
                transform: scale(0);
                z-index:9999;
            }

            .overlay-menu ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .overlay-menu ul li {
                margin: 15px 0;
            }

            .overlay-menu ul li a {
                text-decoration: none;
                font-size: 20px !important;
                font-weight:500;
                line-height:2.4;
                color: #333 !important;
            }

            .overlay-menu ul li a:hover {
                text-decoration: underline;
                text-decoration-thickness: 2px;

                color: #66267b !important;
            }

            .overlay-menu.show {
                display: flex;
                transform: scale(1);
            }

            .shepherd-button:not(:disabled):hover {
              background: #b1bb25 !important;
              color: hsla(0,0%,100%,.75);
            }

            .sub {
                margin: 0 0 0 25px;
                border-left: 6px solid #d6d6d6;
                width: calc(100% - 25px);
            }

            .sub:hover {
                width: calc(100% - 25px);
                border-left: 6px solid #d6d6d6;
            }
            .sub a:active {
                width: calc(100% - 25px);
                border-left: 6px solid #d6d6d6;
            }

            .linkicon {
                color:#212529;
            }

            .shepherd-arrow:before {
                border-left: 2px solid #000000;
                border-bottom: 2px solid #000000;
            }

            .shepherd-content {
                border: 2px solid #000000;
            }

            .huge {
                font-size:96px;
                color: #c9d52d;
                margin:15px;
            }

        /* ===== Scrollbar CSS ===== */
          /* Firefox */
          * {
            scrollbar-width: thin;
            scrollbar-color: #bdbdbd #ffffff;
          }

          /* Chrome, Edge, and Safari */
          *::-webkit-scrollbar {
            width: 16px;
          }

          *::-webkit-scrollbar-track {
            background: #ffffff;
          }

          *::-webkit-scrollbar-thumb {
            background-color: #bdbdbd;
            border-radius: 10px;
            border: 3px solid #ffffff;
          }

          .category-header {
              display: flex;
              align-items: center; /* Vertikale Zentrierung */
              justify-content: flex-start; /* Elemente am Anfang ausrichten */
          }

          .category-header span {
              flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
          }

          .filter-icon {
              margin-right: 8px;
              color: #f4f5f5;
              cursor: pointer;
          }

          .filter-icon:hover {
              margin-right: 8px;
              text-decoration: line-through;
              text-decoration-thickness: 2px;
              cursor: pointer;
              color: #d6d6d6;
          }

        .info-icon {
            margin-left: 5px !important;
            opacity: .5 !important;

        }

        .cursor-animation {
            --fa-bounce-start-scale-x: 1;--fa-bounce-start-scale-y: 1;--fa-bounce-jump-scale-x: 1;--fa-bounce-jump-scale-y: 1;--fa-bounce-land-scale-x: 1;--fa-bounce-land-scale-y: 1;--fa-bounce-rebound: 0;
        }

        .fa-bounce {
            animation-iteration-count: 1 !important;
        }

        #content-view {
          position: fixed;
          top: 10px;
          left: var(--sidebar-total);
          width: calc(100% - var(--sidebar-total) - 10px);
          max-height: 90vh;
          background: white;
          padding: 50px;
          border-radius: 5px;
          z-index: 9999;
          overflow-y: auto;
          box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
          display: none;
          transition: left 0.3s ease, width 0.3s ease;
        }
        
        #content-view.sidebar-collapsed {
            left: 10px;
            width: calc(100% - 20px);
        }

        #content-close {
          position: absolute;
          top: 10px;
          right: 20px;
          left: auto; /* überschreibt das "left: 10px" aus .menu-icon */
          background: none;
          border: none;
          cursor: pointer;
          font-size: 24px;
          color: #333;
          z-index: 10000;
        }

        .overlayheader {
            margin-bottom:25px !important;
        }

        #active-filters {
            font-size: 13px;
        }

        .active-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #e0e0e0;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 13px;
        }

        .active-filter-chip button {
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 14px;
            padding: 0;
            margin-left: 4px;
        }

        .active-filter-chip button:hover {
            color: #666;
        }