/* ── GUT Karten-Modul: Anzeige + Button + Auswahl-Popup ───────────────────────
   Brand-Variablen (:root) mit Hex-Fallbacks. Button-Schema einheitlich:
   Standard MITTEL grün (#5c7a3e) → Hover/Aktiv/Ausgewählt DUNKEL grün (#2d4a1e). */

.gut-profil-map-wrap { margin-top: 12px; }

.gut-map {
    width: 100%;
    height: 280px;
    border-radius: 12px;
    border: 1px solid var(--gruen-mid, #c0d4a0);
    overflow: hidden;
    z-index: 0;                 /* bleibt unter Header/Popups */
    background: var(--bg, #f6f8f0);
}

/* Leaflet-Bausteine an die Marke angleichen */
.leaflet-container { font-family: 'DM Sans', sans-serif; background: var(--bg, #f6f8f0); }
.leaflet-container a { color: var(--gruen, #5c7a3e); }
.leaflet-control-attribution {
    font-size: 10px !important;
    background: rgba(246,248,240,0.85) !important;
    color: var(--text-soft, #6a7060) !important;
}
.leaflet-bar a {
    color: var(--dunkel, #2d4a1e) !important;
    border-bottom-color: var(--gruen-mid, #c0d4a0) !important;
}
.leaflet-bar a:hover { background: var(--bg, #f6f8f0) !important; }
.gut-map-pin { background: none; border: none; }

/* ── Trigger-Button: Farbe/Design wie die Standard-Buttons (solid, mittel->dunkel),
   Höhe + Rundung wie die Kategorie-Chips, volle Breite (bündig mit der Karte). */
.gut-map-actions { margin-top: 10px; }
.gut-map-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 16px;                 /* Höhe wie die Kategorie-Chips */
    border-radius: 20px;               /* Rundung wie die Kategorie-Chips */
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    background: var(--gruen, #5c7a3e);
    color: var(--bg, #f6f8f0);
    border: 1px solid var(--gruen, #5c7a3e);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s;
}
.gut-map-btn:hover,
.gut-map-btn:active {
    background: var(--dunkel, #2d4a1e);
    border-color: var(--dunkel, #2d4a1e);
    color: var(--bg, #f6f8f0);
}
.gut-map-btn:focus { outline: none; }
.gut-map-btn:focus-visible { outline: 2px solid var(--dunkel, #2d4a1e); outline-offset: 2px; }

/* ── Auswahl-Popup (Google / Apple) ─────────────────────────────────────────*/
.gut-map-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(45,74,30,0.45);
}
.gut-map-modal[hidden] { display: none; }
.gut-map-modal__box {
    background: var(--weiss, #ffffff);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(45,74,30,0.22);
}
.gut-map-modal__title {
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    color: var(--dunkel, #2d4a1e);
    margin-bottom: 4px;
}
.gut-map-modal__addr {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--text-soft, #6a7060);
    margin-bottom: 18px;
}

/* Beide Auswahl-Buttons identisch — keine Vorauswahl. Mittel grün → Hover/Aktiv dunkel. */
.gut-map-choice {
    display: block;
    box-sizing: border-box;
    width: 100%;
    text-decoration: none;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    background: var(--gruen, #5c7a3e);
    color: var(--bg, #f6f8f0);
    border: 1px solid var(--gruen, #5c7a3e);
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s;
}
.gut-map-choice:hover,
.gut-map-choice:active {
    background: var(--dunkel, #2d4a1e);
    border-color: var(--dunkel, #2d4a1e);
    color: var(--bg, #f6f8f0);
}
.gut-map-choice:focus { outline: none; }
.gut-map-choice:focus-visible { outline: 2px solid var(--dunkel, #2d4a1e); outline-offset: 2px; }

.gut-map-modal__close {
    background: none; border: none;
    color: var(--text-soft, #6a7060);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
}
.gut-map-modal__close:hover { color: var(--dunkel, #2d4a1e); }

@media (max-width: 480px) { .gut-map { height: 220px; } }