/* Benachrichtigungen: Fenster an der Glocke (Schalter benachrichtigungen.panel, benachrichtigungen.js).
   Desktop und iPad am Knopf (Lage und Grösse setzt das Script), Telefon ganzer Bildschirm. */
.nb-fenster {
  position: fixed; z-index: calc(var(--z-ebene) + 1);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-card); color: var(--color-card-fg);
  border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.nb-fenster:focus { outline: none; }
.nb-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 8px 0 16px; }
.nb-kopf h2 { margin: 0; flex: 1 1 auto; font-size: 16px; font-weight: 600; }
.nb-zu, .nb-lesen { width: var(--tap); min-height: var(--tap); padding: 0; flex: 0 0 auto; border-color: transparent; color: var(--color-muted-fg); }
.nb-filter { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--color-border-2); }
.nb-tabs { display: flex; flex: 0 0 auto; }
.nb-tabs .filter-tab { min-height: var(--tap); min-width: var(--tap); }
.nb-bereich { flex: 1 1 auto; min-width: 0; min-height: var(--tap); margin-left: auto; max-width: 180px; }
.nb-aktionen { display: flex; justify-content: flex-end; padding: 4px 8px; }
.nb-aktionen .btn { min-height: var(--tap); border-color: transparent; font-size: 13px; }
.nb-aktionen .btn[hidden] { display: none; }
.nb-fenster .nb-liste { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; padding: 0 0 8px; gap: 0; align-content: start; }
.nb-zeile { display: flex; align-items: flex-start; border-bottom: 1px solid var(--color-border-2); }
.nb-zeile-knopf {
  flex: 1 1 auto; min-width: 0; min-height: var(--tap); display: flex; gap: 12px; padding: 12px 8px 12px 16px;
  text-align: left; font: inherit; font-size: 14px; color: inherit; background: none; border: 0; cursor: pointer;
}
.nb-zeile-knopf:hover, .nb-zeile-knopf:focus-visible { background: var(--color-hover); }
.nb-symbol { flex: 0 0 auto; display: inline-flex; color: var(--color-muted-fg); padding-top: 1px; }
.nb-symbol svg { width: 20px; height: 20px; }
.nb-text { display: grid; gap: 2px; min-width: 0; }
.nb-text strong { font-weight: 500; overflow-wrap: anywhere; }
.nb-text span { color: var(--color-muted-fg); overflow-wrap: anywhere; }
.nb-text small { color: var(--color-muted-fg); font-size: 12px; }
.nb-zeile.nb-neu .nb-text strong { font-weight: 600; }
.nb-zeile.nb-neu .nb-symbol { color: var(--color-primary); }
.nb-lesen { margin: 4px 4px 0 0; }

/* Telefon: ganzer Bildschirm, über der Leiste unten */
@media (max-width: 679.98px) {
  .nb-fenster { inset: 0; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .nb-bereich { max-width: none; }
}