/* Astro-Wetter – nutzt die Variablen aus style.css, keine externen Ressourcen */
.w-note { border: 1px dashed var(--accent-2); color: var(--accent-2); padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.w-top { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.w-light { width: 64px; height: 64px; border-radius: 50%; flex: none; background: var(--line-strong); box-shadow: 0 0 0 4px var(--panel-2); }
.w-light.g { background: var(--ok); box-shadow: 0 0 28px rgba(79,195,109,.55); }
.w-light.y { background: #f2c14e; box-shadow: 0 0 28px rgba(242,193,78,.5); }
.w-light.r { background: var(--bad); box-shadow: 0 0 28px rgba(224,69,58,.5); }
.w-light.u { background: repeating-linear-gradient(45deg, #6a665f 0 6px, #34343c 6px 12px); }
.w-verdict b { display: block; font-family: var(--f-display); font-size: clamp(26px, 4vw, 40px); line-height: 1.05; }
.w-verdict span { color: var(--dim); font-size: 15px; }
.w-scroll { overflow-x: auto; padding-bottom: 6px; }
.w-grid { display: grid; grid-template-columns: 74px repeat(var(--n, 48), 22px); gap: 2px; min-width: max-content; font-family: var(--f-mono); font-size: 11px; }
.w-grid .lbl { color: var(--dim); display: flex; align-items: center; }
.w-grid .c { height: 22px; background: var(--panel-2); position: relative; }
.w-grid .c.g { background: var(--ok); } .w-grid .c.y { background: #f2c14e; } .w-grid .c.r { background: var(--bad); }
.w-grid .c.l { background: #8d9bff; }
.w-grid .c.hd { background: none; height: 16px; color: var(--dim); font-size: 10px; text-align: center; line-height: 16px; }
.w-grid .c.day { border-left: 2px solid var(--line-strong); }
.w-grid .c.dark::after { content: ""; position: absolute; inset: auto 0 -5px 0; height: 3px; background: var(--sky); }
.w-grid .c.now { outline: 2px solid #fff; outline-offset: -2px; }
.w-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; font-size: 13px; color: var(--dim); }
.w-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.w-legend i.g { background: var(--ok); } .w-legend i.y { background: #f2c14e; } .w-legend i.r { background: var(--bad); } .w-legend i.n { background: var(--sky); height: 4px; vertical-align: 2px; }
.w-src { margin-top: 20px; font-size: 13px; color: var(--dim); }
.w-src a { color: var(--sky); }
@media (max-width: 600px) { .w-top { gap: 14px; } .w-light { width: 48px; height: 48px; } }
.w-upd { margin: 0 0 18px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--dim); }
.w-upd.old { color: var(--bad); }