/* legend.css — Farb-Legende pro Wetterlayer. Unten rechts unter dem Modell-Select.
   Eingeklappt: Untertitel (Einheit) + Farbbalken + Werte. Aufgeklappt: zusätzlich
   Titel + Intensitäts-Tropfen + Spezialwetter + (optional) Isobaren-Block. */
.map-legend {
  position: relative;
  /* 300 statt 250 px: die Radar-Skala traegt seit dem 70-dBZ-Umbau NEUN Werte
     (0/20/30/40/50/55/60/65/70). Bei 250 px blieben zwischen den Zahlen nur noch
     ~12 px Luft. */
  width: 300px;
  max-width: calc(100vw - 36px);
  padding: 8px 12px 9px;
  border-radius: 12px;
  background: var(--map-control-bg);
  border: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  color: #fff;
  font: 500 11px/1.3 var(--font-sans, system-ui);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.map-legend[hidden] { display: none; }

/* Auf-/Zuklapp-Button (Chevron) — schwebt oben rechts, immer sichtbar */
.map-legend-toggle {
  position: absolute;
  top: 7px; right: 9px;
  width: 18px; height: 18px;
  padding: 0; border: 0; margin: 0;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.map-legend-chevron {
  width: 14px; height: 14px;
  stroke: rgba(255, 255, 255, 0.72);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.map-legend:not(.is-collapsed) .map-legend-chevron { transform: rotate(180deg); }
/* Statische Legende (ohne Zusatz-Symbole, z.B. Schneefall) — kein Aufklappen */
.map-legend.is-static .map-legend-toggle { display: none; }

/* Titel — nur aufgeklappt (eingeklappt zugunsten der Werte ausgeblendet) */
.map-legend-title {
  font: 700 11px/1.2 var(--font-sans, system-ui);
  letter-spacing: .03em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 20px 6px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-legend.is-collapsed .map-legend-title { display: none; }

/* Untertitel (Einheit) — immer sichtbar */
.map-legend-sub {
  font: 600 10px/1.2 var(--font-sans, system-ui);
  color: rgba(255, 255, 255, 0.62);
  margin: 0 20px 6px 0;
  letter-spacing: .02em;
}
.map-legend-sub[hidden] { display: none; }

/* Verlauf + Werte (Zahlen IN der Palette) — immer sichtbar (auch eingeklappt) */
.map-legend-scale { position: relative; }
.map-legend-bar {
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.map-legend-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map-legend-tick {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  font: 700 10px/1 var(--font-sans, system-ui);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.75);
}

/* Einheiten-Kreis (Button) — nur in der Kompakt-Ansicht sichtbar (siehe Media-Queries);
   im aufgeklappten Zustand steht die Einheit im Titel. Klickbar nur bei umschaltbaren
   Groessen (.is-switchable) → zyklt durch die MeteoUnits-Einheiten. */
.map-legend-unit {
  display: none;
  box-sizing: content-box;
  margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  font-family: var(--font-sans, system-ui);
  pointer-events: none; cursor: default;
  transition: filter .12s ease;
}
.map-legend-unit.is-switchable { pointer-events: auto; cursor: pointer; }
.map-legend-unit.is-switchable:hover  { filter: brightness(1.12); }
.map-legend-unit.is-switchable:active { filter: brightness(.9); }

/* Detail-Body (Tropfen / Spezialwetter / Isobaren) — nur aufgeklappt */
.map-legend-body { overflow: hidden; }
.map-legend.is-collapsed .map-legend-body,
.map-legend.is-static  .map-legend-body { display: none; }   /* is-static: sonst 2px „blauer Strich" unten */

.map-legend-extra { margin-top: 2px; }
.map-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
}
.map-legend-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 10.5px/1 var(--font-sans, system-ui);
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}
.leg-ic { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.map-legend-ht {
  font: 800 13px/1 var(--font-display, system-ui);
  width: 15px;
  text-align: center;
  flex: 0 0 auto;
}
.map-legend-divider {
  height: 1px;
  margin: 10px 0 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* Kategoriale Legende (AQI / UV / Pollen / Wolkentyp) */
.map-legend-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 6px;
}
.map-legend-cats[hidden] { display: none; }
.map-legend-cat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 10.5px/1 var(--font-sans, system-ui);
  color: rgba(255, 255, 255, 0.86);
}
.map-legend-cat-sw {
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .map-legend { width: 200px; padding: 7px 10px 8px; }
  .map-legend-title { font-size: 10.5px; }
}

/* ── 3-zeiliges Kategorie-Grid (AQI): Werte / Farben / Einstufung ── */
.map-legend-grid {
  display: grid;
  gap: 2px 3px;
  width: 100%;
}
.map-legend-grid-val {
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  opacity: 0.8;
}
.map-legend-grid-sw {
  height: 9px;
  border-radius: 3px;
}
.map-legend-grid-lab {
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.15;
  opacity: 0.85;
  overflow-wrap: break-word;
}

/* ===== Mobil (<=720px): Legende als voll-breite Bodenleiste =====
   Layername + Einheit oben links, Farbbalken 100% darunter. Keine runden Ecken.
   Aufgeklappt waechst der Block nach oben; Timeslider-Shift via .has-legend. */
@media (max-width: 1024px) {
  .map-legend {
    position: fixed;
    /* bottom NICHT hart 0: auf iPhones sonst unter dem Home-Indicator/der
       Safari-Bedienleiste. env() = 0 auf Geräten ohne Safe-Area → kein Effekt. */
    left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px);
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    z-index: 24;
    max-height: 62vh;
    overflow-y: auto;
  }
  .map-legend-bar { border-radius: 0; }

  /* Kompakt-Ansicht (eingeklappt / statisch): NUR der randlose Farbbalken über die
     ganze Breite, Einheit klein unten links — KEIN Layer-Name, KEIN Untertitel,
     KEINE blauen Raender oben/unten (User-Wunsch 2026-07-25). */
  /* :not([hidden]) — sonst gewinnt dieses display:block gegen .map-legend[hidden]
     (gleiche Spezifität, kommt später) und die mobile Legende bleibt beim
     Layer-Wechsel (z.B. auf Stürme) sichtbar, obwohl hidden gesetzt ist. */
  .map-legend.is-collapsed:not([hidden]),
  .map-legend.is-static:not([hidden]) {
    display: block;
    height: auto;
    overflow: visible;
    background: transparent;         /* kein blauer Kasten (hinter Kreis, unten) */
    border: 0; box-shadow: none;
  }
  /* Balken startet knapp unter dem rechten Kreisrand (Kreis 2..~39) → linke Kante liegt
     unter dem Glass-Button, aber der erste Zahlenwert steht frei rechts daneben. Zahlen
     DECKUNGSGLEICH mit dem Farbverlauf (Ticks = inset:0, kein Versatz). */
  .map-legend.is-static   { padding: 0 0 0 34px; }
  .map-legend.is-collapsed { padding: 0 24px 0 34px; }     /* rechts zusaetzlich fuer den Chevron */
  /* Kategorie-Grid (UV/CAMS) hat KEINEN Einheiten-Kreis links → sonst „links Platz,
     rechts bündig". Rechts denselben 34px-Abstand geben, dann sitzt das Grid mittig. */
  .map-legend.is-static:has(.map-legend-grid:not([hidden])) { padding-right: 34px; }
  .map-legend.is-collapsed .map-legend-title,
  .map-legend.is-static  .map-legend-title,
  .map-legend.is-collapsed .map-legend-sub,
  .map-legend.is-static  .map-legend-sub { display: none; }
  .map-legend.is-collapsed .map-legend-scale,
  .map-legend.is-static  .map-legend-scale { margin: 0; }
  .map-legend.is-collapsed .map-legend-bar,
  .map-legend.is-static  .map-legend-bar {
    height: 27px;                    /* -3px (User 2026-07-25) */
    border: 0;
    border-radius: 0 5px 5px 0;      /* nur rechts gerundet, links unter dem Kreis */
    box-shadow: none;                /* kein „blauer Strich"/Schatten am Boden */
  }
  /* Einheit als GLASS-BUTTON (erste Skalenfarbe getoent). Am Balken-Boden verankert,
     ragt NUR nach oben ueber (unten wuerde am Bildschirmrand abschneiden). */
  .map-legend.is-collapsed .map-legend-unit:not([hidden]),
  .map-legend.is-static  .map-legend-unit:not([hidden]) {
    position: absolute;
    left: 2px; bottom: 0; top: auto; transform: none;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(125% 125% at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 62%),
      color-mix(in srgb, var(--legend-c0, #2a6f8a) 85%, transparent);
    border: 1px solid rgba(255, 255, 255, .42);
    color: var(--legend-c0-ink, #fff);
    font: 800 11px/1 var(--font-sans, system-ui);
    box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.18);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    z-index: 3;
  }
  /* Chevron (nur bei aufklappbaren Layern) vertikal mittig in die rechte Reserve */
  .map-legend.is-collapsed .map-legend-toggle { top: 50%; right: 5px; transform: translateY(-50%); }
  /* AUFGEKLAPPT: die Legende überdeckt die Map-Controls. Der Zuklapp-Tap ging
     sonst „durch" auf ein dahinterliegendes Control — deshalb sind die Controls
     gesperrt, solange die Legende offen ist (zuklappen → wieder nutzbar). */
  .start-stage:has(#map-legend:not(.is-collapsed):not([hidden])) .right-stack { pointer-events: none; }
  /* Zuklapp-Ziel größer fürs sichere Antippen (oben rechts). */
  .map-legend:not(.is-collapsed):not(.is-static) .map-legend-toggle { width: 40px; height: 40px; top: 2px; right: 2px; }
}

/* ===== Desktop-Legende (Box unten rechts) genauso aufgeraeumt (2026-07-25) =====
   Kein Layer-Name, Einheit links VOR der Skala, Balken fuellt die (runde) Box
   randlos — analog zur mobilen Vollbreiten-Legende. Aufgeklappte Detailansicht
   (rich-Layer via Chevron) bleibt unveraendert. */
@media (min-width: 1025px) {
  .map-legend.is-collapsed .map-legend-title,
  .map-legend.is-static  .map-legend-title,
  .map-legend.is-collapsed .map-legend-sub,
  .map-legend.is-static  .map-legend-sub { display: none; }
  /* Kein blauer Kasten mehr: die Legende ist nur noch Farbbalken + Einheiten-Kreis. */
  .map-legend.is-collapsed,
  .map-legend.is-static {
    background: transparent; border: 0; box-shadow: none;
    overflow: visible;                 /* Kreis darf oben/unten ueberstehen */
  }
  /* Balken startet knapp unter dem rechten Kreisrand (Kreis 0..~36) → linke Kante liegt
     unter dem Glass-Button (guckt nicht raus), aber der erste Zahlenwert steht gerade
     eben frei rechts vom Kreis. Zahlen bleiben DECKUNGSGLEICH mit dem Farbverlauf
     (Ticks = inset:0, kein Versatz → 0 °C sitzt korrekt auf Weiss). */
  .map-legend.is-static   { padding: 0 0 0 30px; }
  .map-legend.is-collapsed { padding: 0 22px 0 30px; }     /* rechts zusaetzlich fuer den Chevron */
  .map-legend.is-collapsed .map-legend-scale,
  .map-legend.is-static  .map-legend-scale { margin: 0; }
  .map-legend.is-collapsed .map-legend-bar,
  .map-legend.is-static  .map-legend-bar {
    height: 24px; border: 0; border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
  }
  /* Einheit als GLASS-BUTTON: erste Skalenfarbe als Toenung + glaenziges Highlight +
     heller Rand + Innenschatten; liegt (z-index 3) ueber der linken Balkenkante. */
  .map-legend.is-collapsed .map-legend-unit:not([hidden]),
  .map-legend.is-static  .map-legend-unit:not([hidden]) {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background:
      radial-gradient(125% 125% at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 62%),
      color-mix(in srgb, var(--legend-c0, #2a6f8a) 85%, transparent);
    border: 1px solid rgba(255, 255, 255, .42);
    color: var(--legend-c0-ink, #fff);
    font: 800 10px/1 var(--font-sans, system-ui);
    box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.18);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    z-index: 3;
  }
  .map-legend.is-collapsed .map-legend-toggle { top: 50%; right: 3px; transform: translateY(-50%); }
}


/* ── Radar: letztes Bild je Land ─────────────────────────────────────────────
   Sitzt im aufklappbaren Teil der Legende, ist also nur sichtbar, wenn der
   Nutzer sie aufklappt. Zweispaltig, damit 14 Länder nicht die halbe Karte
   verdecken. */
.map-legend-srctitle {
  margin: 6px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .75;
}
/* EINE Spalte, bewusst: die Legende ist nur ~250 px breit. Zweispaltig blieben
   je Land keine 80 px — "Vereinigtes Königreich" braucht allein 120 px und waere
   zu "Vereinigtes Kön…" verstuemmelt worden. Der Block steckt ohnehin hinter
   einem Klick, Hoehe ist hier billiger als Raten. Bei sehr vielen Quellen
   scrollt er in sich, statt die Karte zu ueberdecken. */
.map-legend-src {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px 10px;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.map-legend-srcitem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
}
.map-legend-srcland {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .85;
}
.map-legend-srcwhen {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.map-legend-srczeit {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* Relatives Alter zur aktuellen Uhrzeit — bewusst ruhig/gedimmt, damit die
   eigentliche Uhrzeit fuehrt. */
.map-legend-srcdelta {
  font-size: 10px;
  opacity: .55;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Ampel: auffällig ab 20 min, deutlich ab 60 min bzw. status=down.
   Farbe NUR auf der Uhrzeit — der Ländername bleibt ruhig lesbar. */
.map-legend-srcitem.is-alt .map-legend-srczeit { color: #f4a932; }
.map-legend-srcitem.is-aus .map-legend-srczeit { color: #e2604f; }



/* ── Radar: Niederschlagsstufen als dBZ-Bereiche ─────────────────────────────
   Senkrecht statt nebeneinander: "Extrem starker Regen einschließlich Hagel"
   passt in keine Spalte. Der Punkt bleibt oben buendig, damit umbrechender
   Text nicht darunter rutscht (hanging indent). */
.map-legend-stufen {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0 2px;
}
.map-legend-stufe {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.35;
}
.map-legend-stufe .map-legend-cat-sw {
  flex: 0 0 auto;
  margin-top: 2px;
}
.map-legend-stufe-txt { min-width: 0; }
.map-legend-stufe-txt b {
  font-weight: 700;
  white-space: nowrap;   /* "50 bis 65 dBZ" nie mitten im Bereich umbrechen */
}