/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANSICHT 5 · WAHLEN  (nutzt die .bv-* Klassen mit)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wl-parties { display:flex; flex-direction:column; gap:7px; }
.wl-party { display:flex; align-items:center; gap:11px; font-size:0.78rem; }
.wl-party .swatch { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.wl-party .nm { width:74px; flex-shrink:0; color:var(--text-2); }
.wl-party .track { display:block; flex:1; height:9px; border-radius:999px;
                   background:var(--glass2); overflow:hidden; min-width:0; }
.wl-party .fill  { display:block; height:9px; min-width:2px; border-radius:999px;
                   transition:width .5s ease; }
.wl-party .pc { width:52px; text-align:right; font-weight:600; flex-shrink:0; font-variant-numeric:tabular-nums; }
.wl-party .dl { width:56px; text-align:right; font-size:0.68rem; flex-shrink:0; font-variant-numeric:tabular-nums; }
.wl-party.out .nm, .wl-party.out .pc { color:var(--text-3); }

.wl-pbar { display:flex; flex-wrap:wrap; gap:6px; }
.wl-pbtn {
    font-family:inherit; font-size:0.72rem; font-weight:600; color:var(--text-2); cursor:pointer;
    background:var(--glass2); border:1px solid var(--border);
    padding:6px 13px; border-radius:999px;
    display:inline-flex; align-items:center; gap:7px;
    transition:background .16s, color .16s, border-color .16s;
}
.wl-pbtn i { width:9px; height:9px; border-radius:3px; display:inline-block; }
.wl-pbtn:hover { background:var(--glass-hi); color:var(--text); border-color:var(--border-h); }
.wl-pbtn.active { background:var(--glass-hi); color:var(--text); border-color:var(--border-h); }

.wl-legend { display:flex; flex-wrap:wrap; gap:5px; }
.wl-legend span {
    font-size:0.62rem; color:var(--text-2);
    background:var(--glass2); border:1px solid var(--border);
    padding:3px 9px; border-radius:999px;
    display:inline-flex; align-items:center; gap:5px;
}
.wl-legend i { width:7px; height:7px; border-radius:2px; display:inline-block; }


/* Radar sitzt in der Wetter-Ansicht ganz oben und darf mehr Platz bekommen */
#view-wetter .radar-card { height:420px; }
@media (max-width:640px) { #view-wetter .radar-card { height:300px; } }

@media (max-width:900px) {
    .wx-hero { grid-template-columns:1fr; }
}
@media (max-width:640px) {
    .wx-wrap { padding:48px 12px 92px; }
    .wx-hero-temp { font-size:2.8rem; }
    .wx-hero-icon { width:60px; height:60px; }
    .wx-hero-icon .lucide { width:30px; height:30px; }
    .wx-hero-stats { grid-template-columns:repeat(2,1fr); }
}