/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.place{font:600 1.25rem/1.1 var(--cond);letter-spacing:.01em;text-align:left;padding:8px 0}
.place small{display:block;font:400 .8rem/1.3 var(--body);color:var(--muted);letter-spacing:0}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line)}
.icon-btn svg{width:22px;height:22px}
.tools{display:flex;gap:8px;flex:none}
#themeToggle{font-size:1.1rem;line-height:1}

/* ── DWD-Warnungen ─────────────────────────────────────────────────────── */
.warn{margin:8px 0 4px;display:flex;flex-direction:column;gap:8px}
.w{background:var(--surface);border-radius:10px;border-left:6px solid var(--w1);padding:0 14px}
.w2{border-left-color:var(--w2)}.w3{border-left-color:var(--w3)}.w4{border-left-color:var(--w4)}
.w summary{cursor:pointer;padding:12px 0;list-style:none;display:flex;flex-direction:column;gap:2px}
.w summary::-webkit-details-marker{display:none}
.w summary b{font:600 1.1rem/1.2 var(--cond);letter-spacing:.02em}
.w summary small{font-size:.8rem;color:var(--muted)}
.w p{margin:0 0 12px;font-size:.9rem}
.w p.hint{color:var(--muted)}

/* ── Ortssuche + gespeicherte Orte ─────────────────────────────────────── */
.search{display:none;margin:4px 0 12px}
.search.open{display:block}
.search input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.search ul{list-style:none;margin:6px 0 0;padding:0;border-radius:10px;overflow:hidden;background:var(--surface)}
.search li button{width:100%;text-align:left;padding:12px 14px;border-top:1px solid var(--line)}
.search li:first-child button{border-top:0}
.search li small{color:var(--muted)}
.saved{margin:0 0 10px!important}
.saved li{display:flex;border-top:1px solid var(--line)}
.saved li:first-child{border-top:0}
.saved li button.sel{flex:1;border:0}
.saved li.cur button.sel{font-weight:600;box-shadow:inset 3px 0 0 var(--sea)}
.saved li button.del{width:48px;text-align:center;border:0;color:var(--muted);font-size:1.3rem}
.saved:empty{display:none}

/* ── Jetzt ─────────────────────────────────────────────────────────────── */
.now{padding:8px 0 20px;border-bottom:1px solid var(--line)}
.temp{font:300 clamp(6rem,34vw,9.5rem)/.85 var(--cond);letter-spacing:-.03em;margin:8px 0 6px}
.temp sup{font-size:.35em;font-weight:500;vertical-align:.95em;margin-left:.04em;color:var(--muted)}
.cond{font:500 1.35rem/1.2 var(--cond);display:flex;align-items:center;gap:.4em}
.cond .emo{font-size:1.4em;line-height:1}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:18px 0 0}
.facts div{display:flex;flex-direction:column}
.facts dt{font-size:.8rem;color:var(--muted)}
.facts dd{margin:0;font:500 1.15rem/1.2 var(--cond)}
.arrow{display:inline-block;width:.9em;height:.9em;vertical-align:-.1em;margin-right:.2em}

/* ── 24 Stunden ────────────────────────────────────────────────────────── */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
#chart{display:block}
#chart text{font-family:var(--cond);fill:var(--ink)}
#chart .hr{fill:var(--muted);font-size:13px}
#chart .t{font-size:15px;font-weight:500}
#chart .p{fill:var(--sea);font-size:11px;font-family:var(--body)}

/* ── 7 Tage ────────────────────────────────────────────────────────────── */
.days{list-style:none;margin:0;padding:0}
.days li{display:grid;grid-template-columns:3.4rem 1.8rem 2.6rem 2rem 1fr 2rem;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.days li:first-child{border-top:0}
.d-name{font:500 1.05rem var(--cond)}
.d-emo{font-size:1.3rem;text-align:center}
.d-p{font-size:.8rem;color:var(--sea);text-align:right}
.d-min,.d-max{font:500 1.05rem var(--cond);text-align:right}
.d-min{color:var(--muted)}
.range{position:relative;height:6px;border-radius:3px;background:var(--line)}
.range span{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--cold),var(--warm))}
.sun{display:flex;gap:24px;margin-top:18px;font-size:.9rem;color:var(--muted)}

/* ── Regenradar ────────────────────────────────────────────────────────── */
.radar{position:relative;margin:0 -18px}
#map{height:min(70vw,380px);background:var(--surface)}
.leaflet-container{font-family:var(--body)}
.leaflet-control-attribution{font-size:10px}
.rctl{display:flex;align-items:center;gap:12px;margin-top:10px}
.play{width:44px;height:44px;border-radius:50%;background:var(--sea);color:var(--bg);display:grid;place-items:center;flex:none}
.play svg{width:18px;height:18px}
.rctl input{flex:1;accent-color:var(--sea)}
.rtime{font:500 1.05rem var(--cond);min-width:4.6rem;text-align:right}
.rtime small{display:block;font:400 .75rem var(--body);color:var(--muted)}
.rtime.fc{color:var(--warm)}
.rnote{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.rnote a{color:var(--sea);font-weight:500}

/* ── Fuß, Meldungen ────────────────────────────────────────────────────── */
footer{margin-top:24px;font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:12px}
footer button{color:var(--sea);font-weight:500;padding:8px 0}
.msg{padding:14px;border-radius:10px;background:var(--surface);margin:12px 0}
@media (prefers-reduced-motion:no-preference){.now.fresh .temp{animation:rise .5s ease-out}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}