.is-flaechencheck .ce--stoerer {
    @media (max-width: 768px) {
        top: 75vh !important;
    }
}


#map {
    min-height: 600px;
    height: calc(100vh - 130px);

    @media (min-width: 768px) {
        height: 80vh;
    }
}

@media (max-width: 768px) {
    #button-wrapper {
        white-space: nowrap;
        justify-content: space-between;

        .btn {
            padding: .5rem;
        }
    }
}

#controls {
    --bs-card-border-width: 0;
    position: absolute;
    width: 100vw;
    left: 0;
    top: 0;
    z-index: 5;
    transform: scale(.7);


    @media (min-width: 768px) {
        width: 500px;
        left: 2rem;
        top: 5rem;
        transform: none;
    }
}

#controls .card-header {
    background-color: var(--bs-primary);
    color: white;
    font-size: 25px;
}

#controls .card-body {
    background-color: var(--bs-secondary);
}

#controls .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Eigene Autocomplete-Lösung */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bs-tertiary) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-top: none !important;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
    box-shadow: var(--bs-box-shadow) !important;
    z-index: 1000 !important;
    max-height: 200px;
    overflow-y: auto;

    @media (max-width: 768px) {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
}

.autocomplete-item {
    padding: 0.35rem 0.75rem !important;
    color: var(--bs-body-color) !important;
    background-color: var(--bs-tertiary) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    font-size: var(--bs-body-font-size) !important;
    display: flex;
    align-items: center;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.autocomplete-item:last-child {
    border-bottom: none !important;
}

.autocomplete-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    opacity: 0.6;
}

.autocomplete-message {
    padding: .5rem .75rem !important;
    color: var(--bs-body-color) !important;
    background-color: var(--bs-tertiary) !important;
    font-size: var(--bs-body-font-size) !important;
    display: flex;
    align-items: center;
}

.autocomplete-message .autocomplete-icon {
    color: var(--bs-warning) !important;
    opacity: 0.8;
}

/* Input-Container für relative Positionierung */
#controls > .card-body > div:has(#place-autocomplete) {
    position: relative;
}

/* Fallback: Altes Google Autocomplete falls noch verwendet */
.pac-container {
    background-color: var(--bs-tertiary) !important;
    color: var(--bs-body-color) !important;
    font-size: var(--bs-body-font-size) !important;
    border: none !important;
    border-radius: var(--bs-border-radius) !important;
    padding-inline: 0;

    @media (max-width: 768px) {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        margin-top: 0;
    }
}

.pac-logo:after {
    margin: .35rem;
}

.popover {
    @media (max-width: 768px) {
        /* Mobile Popovers am unteren Bildschirmrand positionieren */
        position: fixed !important;
        bottom: 40px !important;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }
}

.pac-item {
    background-color: var(--bs-tertiary) !important;
    color: var(--bs-body-color) !important;
    padding: 0.35rem .75rem !important;
    border-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
    font-size: var(--bs-body-font-size) !important;
    cursor: pointer;
}

.pac-item .pac-icon-marker {
    display: none;
}

.pac-item:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.pac-item-query {
    color: inherit !important;
    font-size: var(--bs-body-font-size) !important;
    margin-right: .5rem;
}

.pac-matched {
    font-weight: bold !important;
}

/* Consent Overlay */
.consent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.consent-overlay::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('/files/base/layout/img/caeli_de/overlay-map-bg.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(2px);
    z-index: 1;
}

.consent-overlay::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.consent-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 3;
    max-width: 400px;
    width: 90%;
}

.consent-content h4 {
    margin-bottom: 1rem;
    color: #333;
}

.consent-content p {
    margin-bottom: 1.5rem;
    color: #666;
}


.tutorial-buttons {
    text-align: right;
}

/* Tutorial Close Button im Popover Header */
.tutorial-close-btn {
    border: none;
    background: none;
    font-size: 1.5rem;
    opacity: 1;
    padding: 0;
    margin: 0;
    line-height: 1;
    width: auto;
    height: auto;
    color: var(--bs-secondary);
}


/* Tutorial Title im Header */
.tutorial-title {
    display: inline-block;
    margin-right: 8px;
}

/* Tutorial Popover nur für Polygon-Schritt mittig rechts im Container platzieren */
.tutorial-polygon-popover {
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-body-bg);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-content {
    text-align: center;
}

.loading-content h2 {
    margin-bottom: var(--main-gap) !important;
    color: currentColor;
    font-weight: 600;
    padding-inline: 1rem;
    line-height: 1.1;
}

.loading-spinner {
    margin-bottom: 1.5rem;
    text-align: center;
}

/* HYBRID LOADING SYSTEM: Desktop = SVG Progress, Mobile = GIF Animation */

/* Desktop: SVG Progress-Animation (768px und größer) */
@media (min-width: 768px) {
    .loading-spinner svg {
        display: inline-block;
        width: 150px;
        height: 150px;
        animation: none; /* Keine Rotation */
    }
    
    .loading-spinner .gif-animation {
        display: none; /* GIF auf Desktop verstecken */
    }

    .spinner-bar {
        animation: none !important; /* Keine automatische Animation */
        transition: fill 0.3s ease;
    }
}

/* Mobile: GIF-Animation (unter 768px) */
@media (max-width: 767px) {
    .loading-spinner svg {
        display: none; /* SVG auf Mobile verstecken */
    }
    
    .loading-spinner .gif-animation {
        display: inline-block;
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
}

.loading-percentage {
    font-size: 30px;
    color: currentColor;
    margin-bottom: 2rem;
    padding-inline: 1rem;
    line-height: 1.1;
    min-height: 66px;

    @media (min-width: 768px) {
        font-size: 50px;
    }
    
    @media (max-width: 767px) {
        display: none; /* Prozentanzeige auf Mobile ausblenden */
    }
}

.loading-message {
    font-size: 30px;
    color: currentColor;
    margin-top: var(--main-gap);
    padding-inline: 1rem;
    line-height: 1.1;
    min-height: 66px;

    @media (min-width: 768px) {
        font-size: 50px;
    }
}

/* SVG Spinner Animation */
.spinner-bar {
    transition: fill 0.3s ease;
}

/* Google Maps Polygon-Handles robuster stylen */
#map div[style*="width: 9px"],
#map div[style*="width:9px"],
#map div[style*="height: 9px"],
#map div[style*="height:9px"] {
    min-width: 20px !important;
    min-height: 20px !important;
    width: 20px !important;
    height: 20px !important;
    border: 3px solid white !important;
    background-color: yellow !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: -8px 0 0 -7px !important;
}

/* Hover-Effekt für bessere Usability */
#map div[style*="width: 9px"]:hover,
#map div[style*="width:9px"]:hover,
#map div[style*="height: 9px"]:hover,
#map div[style*="height:9px"]:hover {
    transform: scale(1.3) !important;
    border-color: white !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6) !important;
    z-index: 1000 !important;
}

/* Google Maps Kartentyp-Wechsler komplett ausblenden */
.gm-style-mtc {
    display: none !important;
}

/* Alternative Selektoren falls Google Maps die Klassen ändert */
#map .gmnoprint[role="menubar"] {
    display: none !important;
}

/* Map type buttons direkt */
#map button[title*="Map"],
#map button[title*="Satellite"],
#map button[title*="Karte"],
#map button[title*="Satellit"] {
    display: none !important;
}

/* Google Maps Zoom-Kontrollen nur auf Mobile ausblenden */
@media (max-width: 768px) {
    .gmnoprint:not([role="menubar"]) {
        display: none !important;
    }
}