.wpu{
  font: 15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

.wpu__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.wpu__title{font-weight:900;font-size:16px}
.wpu__sub{font-size:12px;opacity:.78;margin-top:2px}
.wpu__place{margin-top:6px;font-size:13px;opacity:.9}

.wpu__notice{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size:13px;
}

.wpu__actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.wpu__nav{display:flex;gap:6px}
.wpu__tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.wpu__btn{
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(0,0,0,.03);
  border-radius: 12px;
  padding: 7px 11px;
  cursor:pointer;
  font-weight: 600;
}
.wpu__btn:hover{background:rgba(0,0,0,.06)}
.wpu__btn--ghost{background: transparent}
.wpu__btn--ghost:hover{background: rgba(0,0,0,.04)}

.wpu__list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.wpu__item{
  display:flex;justify-content:space-between;gap:12px;
  padding:12px 12px;border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.wpu__item--today{
  border-color: rgba(240,180,0,.85);
  box-shadow: 0 0 0 3px rgba(240,180,0,.18);
}
.wpu__item--tomorrow{
  border-color: rgba(60,130,255,.55);
}
.wpu__type{font-weight:900;font-size:15px}
.wpu__date{font-size:13px;opacity:.88;margin-top:2px}

.wpu__badge{
  font-size:12px;
  border-radius:999px;
  padding:5px 9px;
  border:2px solid rgba(0,0,0,.15);
  background:#fff;
  white-space:nowrap;
  height: fit-content;
  align-self: center;
}
.wpu__badge--bio{border-color:#7a4f2a;}
.wpu__badge--papier{border-color:#1b6ec2;}
.wpu__badge--rest{border-color:#555;}
.wpu__badge--gelb{border-color:#f2c200;}
.wpu__badge--schadstoffe{border-color:#d11a2a;}

@media (max-width: 420px){
  .wpu{padding:12px}
  .wpu__head{flex-direction:column;align-items:stretch}
  .wpu__actions{align-items:flex-start}
  .wpu__tools{justify-content:flex-start}
}