/* Karten der öffentlichen Seiten (Webcams, Wetter-Meldungen) — ergänzt seite.css (Tokens)
   und leaflet.css. Höhen wie im Altsystem: 52vh (mindestens 300px), ab 768px 62vh. */

.seitenkarte {
  position: relative; width: 100%; height: 52vh; min-height: 300px;
  border-radius: var(--r-m); overflow: hidden; isolation: isolate;
  border: var(--kl) solid var(--linie); background: var(--karte-2);
}
@media (min-width: 768px) { .seitenkarte { height: 62vh; } }
.seitenkarte__flaeche { position: absolute; inset: 0; }
.seitenkarte__hinweis {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px;
  text-align: center; font-size: 1rem; color: var(--tinte-2);
}
.seitenkarte--bereit .seitenkarte__hinweis { display: none; }
.seitenkarte .leaflet-container { font: inherit; background: var(--karte-2); }
.seitenkarte .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; font-size: 1.4rem; }
.seitenkarte .leaflet-control-attribution { font-size: .8rem; }
/* Hinweis „Strg + Mausrad“ bzw. „zwei Finger“ (wie die Gestensperre von MapLibre) */
.seitenkarte__geste {
  position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; margin: 0; padding: 24px;
  text-align: center; font-size: 1.25rem; line-height: 1.4; color: #fff; background: rgba(0, 0, 0, .45);
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.seitenkarte__geste--an { opacity: 1; }

/* Rahmen einer Marke (Leaflet): ohne eigenes Aussehen, trägt Fokus und Beschriftung */
.seitenkarte__marke { background: none; border: 0; }
.seitenkarte__marke:focus { outline: none; }
.seitenkarte__marke:focus-visible .kartenpin, .seitenkarte__marke:focus-visible .meldungspin { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 10px; }
.seitenkarte__marke:focus-visible .livepin { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 99px; }

/* Pin einer Webcam */
.kartenpin { width: 44px; height: 52px; display: grid; place-items: end center; cursor: pointer; }
.kartenpin svg {
  width: 40px; height: 50px; transform-origin: bottom center; transition: transform .15s ease;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}
.kartenpin__form { fill: #E53935; stroke: #fff; stroke-width: 2; }
.kartenpin__punkt { fill: #fff; }
.kartenpin:hover svg, .seitenkarte__marke:focus-visible .kartenpin svg { transform: scale(1.12); }

/* Pin einer Meldung: Tropfenform mit dem Zeichen der Art */
.meldungspin { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.meldungspin__form {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: #fff; border: 3px solid #1A63C7; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.meldungspin--schwer .meldungspin__form { border-color: #C62828; }
.meldungspin--mittel .meldungspin__form { border-color: #E07B00; }
.meldungspin__zeichen { transform: rotate(45deg); font-size: 22px; line-height: 1; }
.meldungspin:hover .meldungspin__form, .seitenkarte__marke:focus-visible .meldungspin__form { box-shadow: 0 0 0 3px rgba(26, 99, 199, .35), 0 2px 8px rgba(0, 0, 0, .3); }

/* Gewitterjäger mit Live-GPS: Schild „🚙 LIVE“ wie im Altsystem, Team blau */
.livepin {
  /* der Rahmen hat keine Größe: das Schild zentriert sich auf dem Standort */
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  min-width: 44px; min-height: 44px; display: grid; place-items: center; cursor: pointer;
}
.livepin__schild {
  padding: 3px 8px; border-radius: 99px; background: #B71C1C; color: #fff; border: 2px solid #fff;
  font-weight: 700; font-size: 13px; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}
.livepin--team .livepin__schild { background: #0B4A9E; }

/* Blase (Popup) — Farben der Seite, auch im Dunkelmodus */
.kartenblase-huelle { z-index: 3; }
.kartenblase-huelle .leaflet-popup-content-wrapper {
  padding: 0; border-radius: var(--r-m); background: var(--karte); color: var(--tinte);
  border: var(--kl) solid var(--linie); box-shadow: var(--schatten);
}
.kartenblase-huelle .leaflet-popup-content {
  margin: 0; padding: 14px 16px 16px; font: inherit;
  /* nie höher als die Karte (52vh bzw. 62vh, mindestens 300px) — sonst blättern */
  max-height: calc(max(52vh, 300px) - 88px); overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 768px) {
  .kartenblase-huelle .leaflet-popup-content { max-height: calc(max(62vh, 300px) - 88px); }
}
.kartenblase-huelle .leaflet-popup-tip { background: var(--karte); }
.kartenblase-huelle a.leaflet-popup-close-button {
  width: 40px; height: 40px; font: 1.6rem/40px inherit; color: var(--tinte-2); border-radius: 0 var(--r-m) 0 var(--r-s);
}
.kartenblase-huelle a.leaflet-popup-close-button:hover { background: var(--karte-2); color: var(--tinte); }
.kartenblase { display: flex; flex-direction: column; gap: 4px; min-width: 200px; font-size: 1rem; line-height: 1.4; }
.kartenblase__titel { padding-right: 32px; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.kartenblase__zeichen { margin-right: 6px; font-size: 1.25rem; }
.kartenblase__unter { color: var(--tinte-2); font-size: .95rem; overflow-wrap: anywhere; }
.kartenblase__text { margin: 4px 0 0; overflow-wrap: anywhere; }
.kartenblase__bild {
  display: block; width: 100%; height: auto; max-height: min(150px, 13vh); margin: 8px 0 4px;
  object-fit: cover; border-radius: var(--r-s); background: var(--karte-2);
}
.kartenblase__knopf { margin-top: 10px; width: 100%; }
a.kartenblase__knopf, a.kartenblase__knopf:hover { color: var(--auf-akzent); }
.kartenblase__knopf { text-decoration: none; }

/* Webcam: Kopf mit Lagekarte, Hervorhebung nach „Zur Webcam“ */
.webcam__kopf { display: flex; gap: 14px; align-items: flex-start; }
.webcam__kopf > .stapel { flex: 1; min-width: 0; }
.webcam--hervor { outline: 3px solid var(--akzent); outline-offset: 4px; }
.webcam:focus { outline: none; }
.webcam--hervor:focus { outline: 3px solid var(--akzent); }
[data-karte-zeigen][hidden], .minikarte[hidden] { display: none; }
.minikarte { flex: none; width: 112px; display: flex; flex-direction: column; gap: 2px; }
.minikarte svg {
  display: block; width: 112px; height: 112px; overflow: hidden;
  border-radius: var(--r-s); border: var(--kl) solid var(--linie); background: var(--karte-2);
}
.minikarte__pin { fill: #E53935; stroke: #fff; stroke-width: 1.5; }
.minikarte__punkt { fill: #fff; }
.minikarte__quelle { font-size: .7rem; line-height: 1.2; color: var(--tinte-3); overflow-wrap: anywhere; }
@media (max-width: 359px) { .minikarte { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .kartenpin svg { transition: none; }
}
@media (prefers-contrast: more) {
  .seitenkarte, .kartenblase-huelle .leaflet-popup-content-wrapper { border-color: var(--tinte); }
}