:root{
  --bg:#eef1f7; --card:#fff; --fg:#111827; --muted:#6b7280; --line:#e2e6ee;
  --accent:#2563eb; --rain:#3b82f6; --rain-soft:#bfdbfe; --warn:#b45309;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 6px 16px rgba(16,24,40,.06);
  --radius:16px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1220; --card:#151d2e; --fg:#e8edf6; --muted:#93a1ba; --line:#26314a;
    --accent:#60a5fa; --rain:#60a5fa; --rain-soft:#1e3a5f; --warn:#fbbf24;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:0 12px calc(24px + env(safe-area-inset-bottom));
  max-width:600px; margin-inline:auto;
  overscroll-behavior-y:contain;
}
h1,h2{margin:0}
svg{width:100%;height:100%;display:block}

/* ---------- top bar ---------- */
.bar{
  display:flex; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 0 10px;
  position:sticky; top:0; z-index:500;
  background:var(--bg);
}
.bar-title{flex:1;min-width:0;text-align:center}
.bar-title h1{font-size:19px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{margin:1px 0 0;font-size:12px;color:var(--muted)}
.bar-btn{
  flex:none;width:40px;height:40px;padding:9px;border:0;border-radius:12px;
  background:var(--card);color:var(--fg);box-shadow:var(--shadow);cursor:pointer;
}
.bar-btn svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.bar-btn:active{transform:scale(.94)}
.bar-btn.busy{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* ---------- cards ---------- */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; margin-bottom:12px;
}
.card h2{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.foot{margin:10px 0 0;font-size:11px;color:var(--muted)}
.lead{margin:0 0 14px;font-size:15px;font-weight:550}

/* ---------- current ---------- */
.now{text-align:center;padding:22px 16px 18px}
.now-main{display:flex;align-items:center;justify-content:center;gap:14px}
.now-icon{width:76px;height:76px;flex:none;color:var(--fg)}
.now-temp{font-size:66px;font-weight:250;letter-spacing:-.045em;line-height:1}
.deg{font-size:.44em;opacity:.35;vertical-align:.62em;letter-spacing:0}
.now-desc{margin:6px 0 0;font-size:17px}
.now-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
}
.now-meta div{min-width:0}
.now-meta dt{font-size:11px;color:var(--muted);white-space:nowrap}
.now-meta dd{margin:2px 0 0;font-size:14px;font-weight:550;white-space:nowrap}

/* ---------- nowcast ---------- */
.nc{display:flex;align-items:flex-end;gap:3px;height:62px;
  padding:6px;background:var(--bg);border-radius:9px}
.nc-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:3px}
.nc-bar{background:var(--rain);border-radius:3px 3px 0 0;min-height:2px;
  transition:height .3s ease}
.nc-bar.zero{background:var(--line)}
.nc-prob{height:5px;border-radius:2px;background:var(--rain);flex:none}
.nc-x{display:flex;margin-top:5px;padding:0 6px}
.nc-x span{flex:1;font-size:11px;color:var(--muted);text-align:left;
  font-variant-numeric:tabular-nums}

/* ---------- radar ---------- */
.map{height:290px;border-radius:12px;overflow:hidden;background:var(--line);
  z-index:0;isolation:isolate}
.leaflet-container{background:var(--line);font:inherit}
.leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.72)}
@media (prefers-color-scheme:dark){
  .leaflet-control-attribution{background:rgba(0,0,0,.5)}
  .leaflet-control-attribution a{color:#9db4d8}
  .leaflet-bar a{background:#1e293b;color:#e8edf6;border-color:#334155}
}
.radar-ctl{display:flex;align-items:center;gap:11px;margin-top:12px}
.play{flex:none;width:38px;height:38px;padding:8px;border:0;border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer}
.play svg{fill:currentColor;stroke:none}
.play:active{transform:scale(.93)}
.play .i-pause,.play.on .i-play{display:none}
.play.on .i-pause{display:block}
.slider{flex:1;min-width:0;accent-color:var(--accent);height:22px}
.frame-label{flex:none;font-size:13px;font-variant-numeric:tabular-nums;
  color:var(--muted);min-width:74px;text-align:right}
.frame-label.future{color:var(--accent);font-weight:600}
.frame-label small{display:block;font-size:10px;font-weight:500;line-height:1.2}
.slider:disabled,.play:disabled{opacity:.4}
/* Ueber maxNativeZoom streckt Leaflet die Kacheln; bilinear glaetten statt
   Bloecke zeigen -- das suggeriert keine Schaerfe, die in 1-km-Daten nicht steckt. */
.radar-tiles img{image-rendering:auto}
.banner{margin:0 0 10px;padding:8px 11px;border-radius:10px;font-size:13px;
  background:var(--rain-soft);color:var(--fg)}
.banner.warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn);font-weight:550}
.legend{display:flex;align-items:flex-start;gap:8px;margin-top:12px}
.legend-scale{flex:1;min-width:0}
.legend-bar,.legend-ticks{display:grid;grid-template-columns:repeat(14,1fr)}
.legend-bar{height:9px;border-radius:3px;overflow:hidden;background:var(--card)}
.legend-ticks{margin-top:3px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.legend-ticks span{grid-row:1;white-space:nowrap}
.legend-unit{flex:none;font-size:10px;color:var(--muted);line-height:9px}
.legend-nodata{flex:none;display:flex;align-items:center;gap:5px;font-size:10px;
  color:var(--muted);line-height:9px;margin-left:6px}
.legend-nodata i{width:14px;height:9px;border-radius:2px;outline:1px dashed var(--muted);outline-offset:-1px}

/* ---------- hourly ---------- */
.hours{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;
  margin:0 -16px;padding:0 16px;scrollbar-width:none}
.hours::-webkit-scrollbar{display:none}
.hour{flex:none;width:60px;text-align:center;scroll-snap-align:start;
  padding:8px 0;border-radius:10px}
.hour.now{background:var(--rain-soft)}
.hour b{display:block;font-size:12px;font-weight:550;color:var(--muted)}
.hour .wi{width:30px;height:30px;margin:6px auto 5px;color:var(--fg)}
.hour .t{font-size:15px;font-weight:550}
.hour .p{font-size:11px;color:var(--rain);min-height:16px;font-weight:550}

/* ---------- daily ---------- */
.day{display:grid;grid-template-columns:44px 30px 1fr 84px;align-items:center;
  gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.day:first-child{border-top:0}
.day .wd{font-size:14px;font-weight:550}
.day .wd small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.day .wi{width:26px;height:26px;color:var(--fg)}
.day .pr{font-size:12px;color:var(--rain);font-weight:550}
.day .tt{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.day .tt i{font-style:normal;color:var(--muted)}
.track{height:4px;border-radius:2px;background:var(--line);position:relative;margin-top:5px}
.track b{position:absolute;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#38bdf8,#fbbf24,#f87171)}

/* ---------- misc ---------- */
.legal{font-size:11px;color:var(--muted);text-align:center;padding:4px 8px}
.legal p{margin:5px 0}
.legal a{color:inherit}
.err{color:var(--warn);font-weight:550}
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translate(-50%,140%);background:#111827;color:#fff;
  padding:11px 18px;border-radius:11px;font-size:14px;z-index:1000;
  max-width:min(88vw,420px);text-align:center;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2);
}
.toast.show{transform:translate(-50%,0)}
@media (prefers-color-scheme:dark){.toast{background:#e8edf6;color:#0b1220}}

/* ---------- search ---------- */
.search{
  border:0;border-radius:16px;padding:0;width:min(94vw,460px);
  background:var(--card);color:var(--fg);box-shadow:var(--shadow);
  margin-top:12vh;
}
.search::backdrop{background:rgba(3,7,18,.55);backdrop-filter:blur(2px)}
.search-head{display:flex;gap:10px;align-items:center;padding:14px;
  border-bottom:1px solid var(--line)}
#q{flex:1;min-width:0;font:inherit;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg)}
#q:focus{outline:2px solid var(--accent);outline-offset:-1px}
.link{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:4px}
.results{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.results li button{
  width:100%;text-align:left;border:0;background:none;color:inherit;font:inherit;
  padding:11px 12px;border-radius:10px;cursor:pointer;
}
.results li button:hover,.results li button:focus-visible{background:var(--bg)}
.results li button small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.results .empty{padding:22px 14px;text-align:center;color:var(--muted);font-size:14px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}