/*
 * Masse wie bei EXT:go_maps_ext: volle Breite, 500 px hoch, unter 992 px nur
 * 250 px. Beide Werte kommen als CSS-Variable aus dem FlexForm.
 */
.osmmap {
    position: relative;
}

.osmmap-canvas {
    width: 100%;
    height: var(--osmmap-height, 500px);
}

@media (max-width: 991px) {
    .osmmap-canvas {
        height: var(--osmmap-height-small, 250px);
    }
}

/* Solange JavaScript die Sprechblase nicht uebernommen hat, steht der Text
   sichtbar unter der Karte. Danach blendet das Skript ihn aus. */
.osmmap-popup-source--hidden {
    display: none;
}

/* Die Leaflet-Karte darf nicht ueber festen Kopfleisten liegen. */
.osmmap .leaflet-pane,
.osmmap .leaflet-top,
.osmmap .leaflet-bottom {
    z-index: 400;
}

/* ── Platzhalter bis zur Einwilligung ──────────────────────────────────────
   Die Kacheln von OpenStreetMap laden erst nach Zustimmung. Bis dahin steht
   hier ein Feld in derselben Hoehe wie die Karte, damit die Seite beim
   Nachladen nicht springt. */
.osmmap--blocked .osmmap-canvas {
    display: none;
}

.osmmap-consent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    height: var(--osmmap-height, 500px);
    background: #f2efe9;
    border: 1px solid #d8d2c6;
}

@media (max-width: 991px) {
    .osmmap-consent {
        height: var(--osmmap-height-small, 250px);
        padding: 16px;
        gap: 8px;
    }
}

.osmmap-consent__text {
    margin: 0;
    max-width: 52ch;
}

.osmmap-consent__button {
    border: 0;
    border-radius: 4px;
    padding: 10px 22px;
    background: #cc2650;
    color: #fff;
    cursor: pointer;
    font: inherit;
}

.osmmap-consent__button:hover,
.osmmap-consent__button:focus-visible {
    background: #a81f42;
}

.osmmap-consent__hint {
    margin: 0;
}

.osmmap-consent__link {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

/* ── Links in der Sprechblase ──────────────────────────────────────────────
   Leaflet setzt `.leaflet-container a { color: #0078A8 }` -- ein Blau, das
   nirgends sonst auf der Seite vorkommt. Die Regel des Sitepackages ist nur
   `a { color: #cc2650 }` und damit schwaecher; in der Sprechblase standen die
   E-Mail-Adresse und die Schaltflaeche „Route berechnen" deshalb blau.
   Gemeldet am 2026-09-27.

   Beide Regeln hier sind eine Klasse genauer als die von Leaflet, und
   osmmap.css wird nach leaflet.css eingebunden (Templates/ContentElements/
   Map.html). Das Schliesskreuz ist nicht betroffen: es steht ausserhalb von
   .leaflet-popup-content und behaelt sein Grau. */
.osmmap .leaflet-popup-content a {
    color: #cc2650;
}

.osmmap .leaflet-popup-content a.button-black {
    color: #ffffff;
}

.osmmap .leaflet-popup-content a.button-black:hover,
.osmmap .leaflet-popup-content a.button-black:focus {
    color: #000000;
}

/* Derselbe Grund, dieselbe Farbe: die Herkunftsangabe in der Kartenecke
   ("Leaflet | (c) OpenStreetMap") trug ebenfalls das Leaflet-Blau. Der Kontrast
   war dabei nicht das Problem -- #0078A8 auf Weiss ist 4,94:1 und damit ueber AA
   -, sondern dass auf dieser Seite sonst kein blauer Link vorkommt. #cc2650
   liegt bei 5,30:1. */
.osmmap .leaflet-control-attribution a {
    color: #cc2650;
}