:root{
  --bg:#0b1220; --card:#121c2e; --card2:#16233a; --line:#22314c;
  --fg:#e8eef8; --muted:#93a4bf; --accent:#59b0ff; --warm:#ffb057; --cold:#6fd0ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%,#16243c 0%,var(--bg) 60%);
  color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;padding:20px 16px 32px;max-width:900px;margin:0 auto;
}
.top h1{font-size:1.6rem;letter-spacing:-.02em}
.top .sub{color:var(--muted);font-size:.9rem;margin-top:2px}
.orte{display:flex;gap:8px;overflow-x:auto;margin:18px 0 8px;padding-bottom:4px}
.orte button{
  background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:.85rem;cursor:pointer;white-space:nowrap;
}
.orte button[aria-pressed="true"]{background:var(--accent);color:#05121f;border-color:var(--accent);font-weight:600}
main{flex:1}
.jetzt{
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:18px;padding:22px;display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:12px;
}
.temp{font-size:4rem;font-weight:700;line-height:1;letter-spacing:-.04em}
.temp .unit{font-size:1.4rem;font-weight:500;color:var(--muted);vertical-align:super}
.meta .zustand{font-size:1.1rem;font-weight:600;margin-bottom:8px}
.meta .zeile{color:var(--muted);font-size:.85rem}
.meta .stand{color:var(--muted);font-size:.75rem;margin-top:10px;opacity:.8}
.tage{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin-top:16px}
.tag{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center}
.tag .d{font-size:.75rem;color:var(--muted);text-transform:capitalize}
.tag .ic{color:var(--muted);margin:6px 0 2px;display:flex;justify-content:center}
.tag.heute{border-color:var(--accent)}
.tag .txt{font-size:.68rem;color:var(--muted);min-height:2.2em;line-height:1.25}
.tag .minmax{font-size:.85rem}
.tag .min{color:var(--cold)}.tag .max{color:var(--warm);font-weight:600}
.tag .p{font-size:.72rem;color:var(--accent);margin-top:4px;min-height:1em}
footer{margin-top:26px;color:var(--muted);font-size:.75rem;border-top:1px solid var(--line);padding-top:12px}
footer a{color:var(--accent)}
.fehler{background:#3a1d22;border:1px solid #6b2b34;border-radius:12px;padding:14px;margin-top:14px;color:#ffd7dc}
.skeleton{opacity:.5}
@media (prefers-reduced-motion:no-preference){.jetzt,.tag{transition:background .2s}}