/* ========================================
   LEAFLET GRUNDANPASSUNG
   ======================================== */

.leaflet-container {
    font-family: inherit;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    font-family: inherit;
}


/* ========================================
   LEAFLET POPUP SCHRIFT
   ======================================== */

.leaflet-popup-content,
.marker-info {
    font-family: inherit;
}


/* ========================================
   LEAFLET POPUP BREITE
   ======================================== */

.leaflet-popup-content {
    width: 300px !important;
    max-width: 300px !important;
    box-sizing: border-box;
}


/* ========================================
   LEAFLET KARTENAUSWAHL
   ======================================== */

.leaflet-top.leaflet-right {
    top: 78px;
    right: 14px;
}


.leaflet-control-layers {
    border: none;
    border-radius: 11px;
    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.18);
    overflow: hidden;
    font-family: inherit;
}


.leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    background-size: 22px 22px;
}


.leaflet-control-layers-toggle:hover,
.leaflet-control-layers-toggle:focus-visible {
    background-color: #F0F4F8;
    outline: none;
}


.leaflet-control-layers-expanded {
    padding: 10px 12px;
    background: #ffffff;
    color: #243B53;
    font-size: 14px;
    line-height: 1.8;
}


.leaflet-control-layers label {
    margin: 0;
    padding: 3px 0;
    cursor: pointer;
}


.leaflet-control-layers input {
    margin-right: 7px;
    accent-color: #102A43;
}


/* ========================================
   EIGENER STANDORT
   ======================================== */

.leaflet-control-locate,
.leaflet-control-category-filter,
.leaflet-control-place-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: #102A43;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}


.leaflet-control-locate svg,
.leaflet-control-category-filter svg,
.leaflet-control-place-search svg {
    display: block;
    width: 22px;
    height: 22px;
}


.leaflet-control-locate:hover,
.leaflet-control-locate:focus-visible,
.leaflet-control-category-filter:hover,
.leaflet-control-category-filter:focus-visible,
.leaflet-control-place-search:hover,
.leaflet-control-place-search:focus-visible {
    background: #F0F4F8;
    outline: none;
}


.leaflet-control-category-filter[aria-expanded="true"] {
    background: #DCE8FF;
    color: #1D4ED8;
}

.leaflet-control-category-filter,
.leaflet-control-place-search {
    clear: none;
}

.leaflet-control-place-search[aria-expanded="true"] {
    background: #DCE8FF;
    color: #1D4ED8;
}


/* ========================================
   ORTSSUCHE
   ======================================== */

.place-search {
    position: fixed;
    right: 14px;
    bottom: calc(94px + env(safe-area-inset-bottom));
    z-index: 1000;
    width: min(370px, calc(100vw - 28px));
    box-sizing: border-box;
    padding: 14px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.98);
    transform-origin: bottom right;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 180ms;
}

.place-search.place-search-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.place-search-form label {
    display: block;
    margin-bottom: 8px;
    color: #102A43;
    font-size: 15px;
    font-weight: 700;
}

.place-search-row {
    display: flex;
    gap: 8px;
}

.place-search-row input {
    min-width: 0;
    flex: 1;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #BCCCDC;
    border-radius: 9px;
    color: #102A43;
    font: inherit;
}

.place-search-row input:focus {
    border-color: #2563EB;
    outline: 3px solid rgba(37, 99, 235, 0.18);
}

.place-search-row button {
    height: 42px;
    padding: 0 14px;
    border: none;
    border-radius: 9px;
    background: #102A43;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.place-search-row button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.place-search-status {
    min-height: 18px;
    margin: 9px 0 0;
    color: #627D98;
    font-size: 13px;
}

.place-search-results {
    display: grid;
    gap: 6px;
    max-height: min(280px, 38vh);
    overflow-y: auto;
}

.place-search-result {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 9px;
    background: #F0F4F8;
    color: #102A43;
    font: inherit;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.place-search-result:hover,
.place-search-result:focus-visible {
    background: #DCE8FF;
    outline: none;
}

.place-search-attribution {
    display: inline-block;
    margin-top: 9px;
    color: #627D98;
    font-size: 11px;
}

@media (max-width: 600px) {
    .place-search {
        right: 10px;
        bottom: calc(102px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .place-search {
        transition: none;
    }
}


.leaflet-control-locate[aria-pressed="true"] {
    background: #DCE8FF;
    color: #1D4ED8;
}


/* ========================================
   NEUEN SPOT ERSTELLEN
   ======================================== */

.leaflet-control-add-spot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #102A43;
    box-shadow: 0 8px 22px rgba(8, 25, 40, 0.32);
    color: #ffffff;
    cursor: pointer;
    transition:
        background-color 300ms ease,
        transform 300ms ease,
        box-shadow 300ms ease;
}

.leaflet-control-add-spot svg {
    display: block;
    width: 30px;
    height: 30px;
    transition: transform 300ms ease;
}

.leaflet-control-add-spot:hover,
.leaflet-control-add-spot:focus-visible {
    background: #243B53;
    box-shadow:
        0 8px 24px rgba(8, 25, 40, 0.38),
        0 0 0 3px rgba(255, 255, 255, 0.45);
    outline: none;
}

.leaflet-control-add-spot:active {
    transform: scale(0.94);
}

.leaflet-control-add-spot[aria-pressed="true"] {
    background: #7F1D1D;
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.4);
}

.leaflet-control-add-spot[aria-pressed="true"] svg {
    transform: rotate(135deg);
}

.leaflet-control-add-spot[aria-pressed="true"]:hover,
.leaflet-control-add-spot[aria-pressed="true"]:focus-visible {
    background: #991B1B;
}

@media (max-width: 600px) {
    .leaflet-control-add-spot {
        width: 66px;
        height: 66px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leaflet-control-add-spot,
    .leaflet-control-add-spot svg {
        transition: none;
    }
}


/* ========================================
   LEAFLET POPUP
   ======================================== */

.leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.22);
}


/* Popup-Pfeil */

.leaflet-popup-tip {
    box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.08);
}


/* ========================================
   POPUP SCHLIESSEN
   ======================================== */

.leaflet-container a.leaflet-popup-close-button {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #829AB1;
    font-family: inherit;
    font-size: 27px;
    font-weight: 300;
    line-height: 36px;
    border-radius: 50%;
    z-index: 20;
}


.leaflet-container a.leaflet-popup-close-button:hover {
    background: #F0F4F8;
    color: #102A43;
}




/* ========================================
   KARTENANSICHT ZURÜCKSETZEN
   ======================================== */

.leaflet-control-reset-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    color: #102A43;
    cursor: pointer;
}

.leaflet-control-reset-view svg {
    display: block;
    width: 22px;
    height: 22px;
}

.leaflet-control-reset-view:hover,
.leaflet-control-reset-view:focus-visible {
    background: #F0F4F8;
    outline: none;
}

.leaflet-control-locate {
    margin-top: 0;
}


/* ========================================
   EINHEITLICHE SPOT-POPUPS
   ======================================== */

.scapor-popup .leaflet-popup-content {
    margin: 0;
}

.scapor-popup-editor .leaflet-popup-content {
    width: min(300px, calc(100vw - 34px)) !important;
    max-width: calc(100vw - 34px) !important;
}

.scapor-popup-info .leaflet-popup-content {
    width: min(270px, calc(100vw - 34px)) !important;
    max-width: calc(100vw - 34px) !important;
}


/* ========================================
   KARTENSTEUERUNG UNTEN
   ======================================== */

.leaflet-bottom.leaflet-left {
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
}

.leaflet-bottom.leaflet-left .leaflet-control {
    margin: 0;
}

.leaflet-bottom.leaflet-right {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.leaflet-bottom.leaflet-right .leaflet-control {
    float: none;
    margin: 0;
}

/* ========================================
   KARTENQUELLE OBEN RECHTS
   ======================================== */

.leaflet-top.leaflet-right {
    top: 78px;
    right: 0;
}

.leaflet-top.leaflet-right
.leaflet-control-attribution {
    margin: 0;
    padding: 8px 5px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 3px 10px rgba(8, 25, 40, 0.14);
    color: #486581;
    font-size: 10px;
    line-height: 1.25;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.leaflet-top.leaflet-right
.leaflet-control-attribution a {
    color: #334E68;
    text-decoration: none;
}

.leaflet-top.leaflet-right
.leaflet-control-attribution a:hover,
.leaflet-top.leaflet-right
.leaflet-control-attribution a:focus-visible {
    color: #102A43;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .leaflet-bottom.leaflet-left {
        left: 12px;
        bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .leaflet-bottom.leaflet-right {
        right: 12px;
        bottom: calc(20px + env(safe-area-inset-bottom));
        gap: 9px;
    }
    .leaflet-top.leaflet-right {
        top: 72px;
        right: 0;
    }
}