/* BauWERK Postfach — Glocke, Streifen und Liste.
   Nur Tokens mit Rückfall; die Leitfarbe der App kommt über --bw-color-accent. */

.bw-postfach-feld { position: relative; display: inline-flex; align-items: center; }

.bw-postfach-glocke {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--bw-radius-sm, 5px);
  background: none; color: var(--bw-color-text, #171a1d); cursor: pointer;
  transition: background var(--bw-motion-fast, 120ms) ease;
}
.bw-postfach-glocke:hover { background: var(--bw-color-accent-surface, #eef3ff); }
.bw-postfach-glocke:focus-visible { outline: 2px solid var(--bw-color-focus, #1f5fa8); outline-offset: 1px; }
.bw-postfach-glocke svg { width: 22px; height: 22px; }
.bw-postfach-glocke.hat-handlung svg { color: var(--bw-color-accent, #4d6bbb); }

.bw-postfach-zaehler {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--bw-color-accent, #4d6bbb); color: #fff;
  font-size: 11px; line-height: 16px; font-weight: 400; text-align: center; font-variant-numeric: tabular-nums;
}

/* ---- Streifen: steht über dem Inhalt, bis die Meldung erledigt ist ---- */
.bw-postfach-streifen {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  box-sizing: border-box; width: min(var(--bw-postfach-breite, 760px), calc(100% - 28px)); margin: 8px auto 0; padding: 9px 14px;
  border: 1px solid var(--bw-color-line, #e2e6ea); border-radius: var(--bw-radius-sm, 5px);
  background: var(--bw-color-accent-surface, #eef3ff); color: var(--bw-color-text, #171a1d);
  font-size: 13px; line-height: 1.35;
}
.bw-postfach-streifen[hidden] { display: none; }
.bw-postfach-streifen--warn { background: var(--bw-color-warning-surface, #fff6e0); border-color: var(--bw-color-warning, #b7791f); }
.bw-postfach-streifen--dringend { background: var(--bw-color-danger-surface, #fdecec); border-color: var(--bw-color-danger, #c0392b); }
.bw-postfach-streifentext { flex: 1 1 auto; min-width: 0; }
.bw-postfach-streifenknopf, .bw-postfach-link {
  flex: 0 0 auto; padding: 4px 10px; border: 1px solid var(--bw-color-line-strong, #c9d0d6);
  border-radius: var(--bw-radius-sm, 5px); background: var(--bw-color-surface, #fff);
  color: var(--bw-color-text, #171a1d); font: inherit; font-size: 12px; cursor: pointer;
}
.bw-postfach-link { padding: 2px 8px; }
.bw-postfach-streifenknopf:hover, .bw-postfach-link:hover { border-color: var(--bw-color-accent, #4d6bbb); color: var(--bw-color-accent, #4d6bbb); }
.bw-postfach-streifenknopf:focus-visible, .bw-postfach-link:focus-visible { outline: 2px solid var(--bw-color-focus, #1f5fa8); outline-offset: 1px; }

/* ---- Liste ---- */
.bw-postfach-liste {
  position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: 360px; max-height: min(70vh, 520px); overflow: auto;
  border: 1px solid var(--bw-color-line, #e2e6ea); border-radius: var(--bw-radius-md, 8px);
  background: var(--bw-color-surface, #fff); color: var(--bw-color-text, #171a1d);
  box-shadow: 0 8px 28px rgb(0 0 0 / 14%); font-size: 13px;
}
.bw-postfach-liste[hidden] { display: none; }
.bw-postfach-kopf { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--bw-color-line, #e2e6ea); }
.bw-postfach-leer { padding: 18px 14px; color: var(--bw-color-text-muted, #5b6670); }
.bw-postfach-eintraege { list-style: none; margin: 0; padding: 0; }
.bw-postfach-eintrag { padding: 10px 14px; border-bottom: 1px solid var(--bw-color-line, #e2e6ea); }
.bw-postfach-eintrag:last-child { border-bottom: 0; }
.bw-postfach-eintrag.braucht-handlung { box-shadow: inset 3px 0 0 var(--bw-color-accent, #4d6bbb); }
.bw-postfach-eintrag.ist-erledigt { color: var(--bw-color-text-muted, #5b6670); }
.bw-postfach-titel { font-weight: 400; }
.bw-postfach-eintrag:not(.ist-erledigt) .bw-postfach-titel { font-weight: 700; }
.bw-postfach-text { margin-top: 2px; color: var(--bw-color-text-muted, #5b6670); overflow-wrap: anywhere; }
.bw-postfach-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--bw-color-text-muted, #5b6670); }

@media (max-width: 520px) {
  .bw-postfach-liste { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .bw-postfach-glocke { transition: none; } }