/* Radar-Karte (wird von Handy- und PC-Ansicht genutzt). Farben kommen aus den Seiten-Variablen:
   --wr-sea, --wr-land, --wr-line, --wr-ink, --wr-muted, --wr-accent, --wr-chip, --wr-chip-line, --wr-map-h */
.wr { --wr-sea: #091322; --wr-land: #1c3150; --wr-line: #3d5a86; --wr-ink: #e8f0ff; --wr-muted: #93a9c9; --wr-accent: #5b93ff; --wr-chip: rgba(255,255,255,.07); --wr-chip-line: rgba(160,190,240,.16); --wr-map-h: 420px; }

.wr-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wr-play {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  font: inherit; font-size: 15px; color: #fff; background: var(--wr-accent);
}
.wr-play:hover { filter: brightness(1.1); }
.wr-play:active { transform: translateY(1px); }
.wr-play:focus-visible, .wr-range:focus-visible, .wr-toggle input:focus-visible { outline: 3px solid var(--wr-accent); outline-offset: 2px; }
.wr-when { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
.wr-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--wr-ink); white-space: nowrap; }
.wr-badge { font-size: .8rem; color: var(--wr-muted); white-space: nowrap; }
.wr-badge[data-kind="now"] { color: #6ee7a8; font-weight: 600; }
.wr-badge[data-kind="forecast"] { color: #ffc46b; font-weight: 600; }

.wr-toggles { display: flex; gap: 8px; }
.wr-toggle { cursor: pointer; }
.wr-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.wr-toggle span {
  display: inline-block; padding: 8px 14px; min-height: 36px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  color: var(--wr-muted); background: var(--wr-chip); border: 1px solid var(--wr-chip-line);
}
.wr-toggle input:checked + span { color: #fff; background: var(--wr-accent); border-color: transparent; }
.wr-toggle input:focus-visible + span { outline: 3px solid var(--wr-accent); outline-offset: 2px; }

.wr-map {
  position: relative; height: var(--wr-map-h); margin-top: 12px; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--wr-chip-line); background: var(--wr-sea);
}
.wr-map.leaflet-container { font: inherit; background: var(--wr-sea); }
.wr-map .leaflet-control-zoom { border: 0; box-shadow: none; }
.wr-map .leaflet-control-zoom a {
  width: 34px; height: 34px; line-height: 34px; color: var(--wr-ink); background: var(--wr-zoom-bg, rgba(15,25,42,.72));
  border: 1px solid var(--wr-chip-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wr-map .leaflet-control-zoom a:first-child { border-radius: 10px 10px 0 0; }
.wr-map .leaflet-control-zoom a:last-child { border-radius: 0 0 10px 10px; border-top: 0; }

.wr-city { pointer-events: none; }
.wr-city i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.55); }
.wr-city span {
  position: absolute; left: 6px; top: -8px; white-space: nowrap; font-size: 11px; letter-spacing: .02em;
  color: rgba(232,240,255,.62); text-shadow: 0 0 3px rgba(5,10,20,.9), 0 0 6px rgba(5,10,20,.7);
}

.wr-under { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.wr-range { flex: 1; min-width: 0; accent-color: var(--wr-accent); }
.wr-legend { flex: none; display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--wr-muted); }
.wr-legend i { width: 96px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #8ad1ff, #2a7fff, #1cb84a, #f7e11f, #f28a1c, #e0302a, #b0189a); }
.wr-credits { margin: 10px 0 0; font-size: .74rem; color: var(--wr-muted); }

@media (max-width: 560px) {
  .wr-legend i { width: 60px; }
  .wr-toggles { width: 100%; }
}

/* Umschalter WetterOnline / eigenes Radar */
.wr-source { display: flex; gap: 8px; margin-bottom: 12px; }
.wr-src {
  padding: 0 16px; height: 34px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  color: var(--wr-muted); background: var(--wr-chip); border: 1px solid var(--wr-chip-line); border-radius: 999px;
}
.wr-src[aria-pressed="true"] { color: #fff; background: var(--wr-accent); border-color: transparent; }
.wr-src:focus-visible { outline: 3px solid var(--wr-accent); outline-offset: 2px; }
.wr-wo-frame { height: calc(var(--wr-map-h) + 110px); border-radius: 16px; overflow: hidden; border: 1px solid var(--wr-chip-line); background: var(--wr-sea); }
.wr-wo-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.wr-credits a { color: inherit; }