/* ---------------------------------------------------------------------------
   Der Posteingang in voller Groesse: Filter links, Liste in der Mitte, die
   einzelne Meldung rechts.

   Drei Spalten, weil eine Meldung drei Fragen beantwortet: Welche Art suche
   ich? Welche davon ist es? Und was genau steht darin? Auf schmalen Schirmen
   werden daraus drei Abschnitte untereinander -- die Fragen bleiben, nur der
   Platz nebeneinander fehlt.
   --------------------------------------------------------------------------- */

.nb-kopfleiste {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}
.nb-kopfleiste h1 { margin: 0; font: var(--typography-page-title); }
.nb-kopfleiste .hint { margin: 4px 0 0; color: var(--color-text-secondary); }

.nb-seite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
}
@media (min-width: 1080px) {
  .nb-seite { grid-template-columns: 220px minmax(0, 1.1fr) minmax(0, 1fr); }
  .nb-filter, .nb-blatt { position: sticky; top: 77px; }
}

/* ------------------------------------------------------------ Filterspalte */
/* Mit Kante und Flaeche wie die beiden Spalten daneben. Ohne sie schwebten
   die Punkte frei auf dem Grund der Seite, waehrend Liste und Meldung in
   ihren Kaesten standen -- drei Spalten, von denen zwei einen Rahmen haben,
   sehen nach einem Versehen aus.
 *
 * Dieselbe Kante wie das Menue im oeffentlichen Profil, und aus demselben
 * Grund: Im Hellen liegt die Flaeche so dicht am Grund der Seite, dass ein
 * Block ohne Kante dort verschwindet, waehrend im Dunkeln einer zu sehen
 * waere. */
.nb-filter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-primary);
  box-shadow: var(--elevation-card);
}
.nb-filterpunkt {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 0;
  border-radius: var(--radius-md, 12px);
  background: none;
  color: var(--color-text-secondary);
  font: var(--typography-body-strong);
  text-align: left;
  cursor: pointer;
}
.nb-filterpunkt svg.i { flex: none; color: var(--color-text-tertiary); }
.nb-filterpunkt span:not(.nb-zahl) { flex: 1; min-width: 0; }
.nb-filterpunkt:hover { color: var(--color-text-primary); }
/* Auf der Flaeche des Kastens muss die gewaehlte Zeile eine eigene haben --
   `--color-surface-secondary` liegt im Hellen zu dicht daran. Ein Hauch der
   Marke, wie bei der gewaehlten Zeile in der Liste. */
.nb-filterpunkt.active {
  background: color-mix(in srgb, var(--color-brand-primary-action) 12%,
    var(--color-surface-primary));
  color: var(--color-brand-primary-action);
}
.nb-filterpunkt.active svg.i { color: var(--color-brand-primary-action); }
/* Die Zahl steht rechts und traegt Farbe nur dort, wo sie zaehlt: Eine Zahl
   neben jedem Punkt in Rot waere ein Alarm ohne Anlass. */
.nb-zahl {
  flex: none;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font: var(--typography-caption);
  line-height: 20px;
  text-align: center;
}
/* Jede Zahl in der Spalte ist eine Zahl ungelesener, und die traegt die Farbe
   der Glocke: „da will etwas von dir". Steht keine da, will nichts. */
.nb-zahl.stark {
  background: var(--color-brand-primary-action);
  color: var(--color-on-brand-primary-action);
}
/* Das Zeichen traegt den Ton seines Strangs schon in der Spalte -- dieselbe
   Farbe wie an den Zeilen, damit man die Zeile der Auswahl zuordnet, ohne zu
   lesen. */
.nb-filterpunkt.ton-scheduling svg.i { color: var(--color-brand-primary-action); }
.nb-filterpunkt.ton-communication svg.i { color: var(--color-status-info); }
.nb-filterpunkt.ton-moderation svg.i { color: var(--color-status-warning); }
.nb-filterpunkt.ton-guest svg.i { color: var(--color-status-success); }
.nb-trenner {
  height: 1px;
  margin: var(--spacing-sm) var(--spacing-md);
  border: 0;
  background: var(--color-border-subtle);
}

/* ------------------------------------------------------------------- Liste */
/* Unten Luft, sonst liegt die letzte Zeile auf der Kante.
   Der Kasten schneidet, was über seine Rundung hinausgeht -- und die gewählte
   Zeile trägt einen Rahmen, dessen unterster Punkt genau dort lag. Sichtbar
   war er auf drei Seiten; unten fehlte er, und das sah nach einem halben
   Rahmen aus statt nach einer Karte. */
.nb-liste { padding: 0 0 var(--spacing-sm); overflow: hidden; }
.nb-listenkopf {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nb-suche {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
  padding: 6px var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
}
.nb-suche svg.i { flex: none; color: var(--color-text-tertiary); }
.nb-suche input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--color-text-primary);
}
.nb-suche input:focus { outline: none; }

/* Die Sortierung: derselbe Baustein wie die uebrigen Menues der Anwendung
   (`.menu` in app.css) statt der Auswahlliste des Betriebssystems. */
.nb-sortierung { position: relative; flex: none; }
.nb-sortknopf {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: none;
  color: var(--color-text-primary);
  font: var(--typography-metadata);
  white-space: nowrap;
  cursor: pointer;
}
.nb-sortknopf:hover { background: var(--color-surface-secondary); }
.nb-sortknopf svg.i { flex: none; color: var(--color-text-tertiary); }
/* Schmaler als die Menues der Kopfleiste: Zwei kurze Zeilen brauchen keine
   286 Punkte, und ein Menue, das breiter ist als sein Knopf, wirkt verrutscht. */
.nb-sortmenue { width: max-content; min-width: 100%; }
.nb-sortmenue button { min-height: 38px; font: var(--typography-metadata); }
.nb-sortmenue button svg.i { flex: none; color: var(--color-brand-primary-action); }
.nb-sortmenue button[aria-checked="true"] { color: var(--color-brand-primary-action); }
/* Der Platz des Haekchens bleibt frei, auch wo keines steht -- sonst
   verschiebt sich die Zeile darunter um seine Breite. */
.nb-sortleer { width: 20px; flex: none; }
.nb-tag {
  margin: 0;
  padding: var(--spacing-md) var(--spacing-md) 4px;
  font: var(--typography-caption);
  color: var(--color-text-tertiary);
}
/* Zeile und Eimer stehen nebeneinander, nicht ineinander: Ein Knopf im Knopf
   ist keiner. Der Eimer zeigt sich beim Ueberfahren und bei der Tastatur --
   sichtbar an jeder Zeile waere er eine Reihe von Loeschknoepfen, und der
   Blick bliebe an ihnen haengen statt an dem, was dasteht. */
.nb-zeilenpaar { position: relative; }
.nb-wegknopf {
  position: absolute;
  top: 50%;
  right: var(--spacing-md);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-surface-primary);
  color: var(--color-text-tertiary);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.nb-zeilenpaar:hover .nb-wegknopf,
.nb-wegknopf:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.nb-wegknopf:hover {
  background: var(--color-status-error-surface);
  color: var(--color-status-error);
}
/* Am Zeiger reicht das Ueberfahren nicht: Dort gibt es keins. Der Eimer steht
   auf schmalen Schirmen darum immer da. */
@media (hover: none) {
  .nb-wegknopf { opacity: 1; pointer-events: auto; }
}
.nb-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: calc(100% - 2 * var(--spacing-sm));
  margin: 0 var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 12px);
  background: none;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  /* Die Trennlinie liegt im Schatten und nicht im Rahmen: So kann die
     gewaehlte Zeile einen echten Rahmen bekommen, ohne dass die Liste um
     einen Punkt springt. */
  box-shadow: inset 0 -1px 0 var(--color-border-subtle);
}
.nb-zeile:hover { background: var(--color-surface-secondary); }
/* Die gewaehlte Zeile ist eine Karte: Rahmen in der Marke, ein Hauch davon
   als Flaeche. Sie soll sich von der ueberfahrenen unterscheiden, sonst weiss
   man nach dem Klicken nicht, welche rechts steht -- und ihre Trennlinie
   faellt weg, denn eine Karte trennt sich selbst. */
.nb-zeile.gewaehlt, .nb-zeile.gewaehlt:hover {
  border-color: var(--color-brand-primary-action);
  background: color-mix(in srgb, var(--color-brand-primary-action) 10%,
    var(--color-surface-primary));
  box-shadow: none;
}
/* Je Strang ein Ton -- man erkennt die Art, bevor man das Wort liest. Rund
   und getoent wie die Zeichen der Aktivitaeten: dieselbe Sprache im ganzen
   Haus. */
.nb-zeichen {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 999px;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}
.nb-zeichen.gross { width: 48px; height: 48px; }
.nb-zeichen.ton-scheduling {
  background: color-mix(in srgb, var(--color-brand-primary-action) 14%,
    var(--color-surface-primary));
  color: var(--color-brand-primary-action);
}
.nb-zeichen.ton-communication {
  background: color-mix(in srgb, var(--color-status-info) 14%, var(--color-surface-primary));
  color: var(--color-status-info);
}
.nb-zeichen.ton-moderation {
  background: color-mix(in srgb, var(--color-status-warning) 14%, var(--color-surface-primary));
  color: var(--color-status-warning);
}
.nb-zeichen.ton-guest {
  background: color-mix(in srgb, var(--color-status-success) 14%, var(--color-surface-primary));
  color: var(--color-status-success);
}
.nb-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nb-titelzeile { display: flex; align-items: baseline; gap: var(--spacing-md); }
.nb-titelzeile strong { flex: 1; min-width: 0; font: var(--typography-body-strong); }
.nb-wann { flex: none; font: var(--typography-caption); color: var(--color-text-tertiary); }
/* Der Eimer legt sich sonst ueber die Uhrzeit -- sie rueckt zur Seite,
   solange er zu sehen ist. */
.nb-zeilenpaar:hover .nb-wann { margin-right: 30px; }
.nb-satz { font: var(--typography-metadata); color: var(--color-text-secondary); }
.nb-punkt {
  width: 8px; height: 8px;
  flex: none;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--color-brand-primary-action);
}
.nb-leer, .nb-mehr { padding: var(--spacing-lg) var(--spacing-md); text-align: center; }
.nb-leer { margin: 0; color: var(--color-text-secondary); }

/* -------------------------------------------------------- Einzelne Meldung */
.nb-blattinhalt { padding: var(--spacing-lg); }
.nb-blattkopf { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.nb-blattkopf h2 { margin: 0; font: var(--typography-section-title); }
.nb-blattkopf .hint { margin: 2px 0 0; }
.nb-blattsatz { margin: var(--spacing-lg) 0 0; }
.nb-blattknopf { margin-top: var(--spacing-lg); width: 100%; justify-content: center; }
.nb-blattleer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--spacing-lg);
  color: var(--color-text-tertiary);
  text-align: center;
}
.nb-blattleer p { margin: 0; }

/* Die Angaben unter dem Satz: links das Wort, rechts der Wert.
   Sie stehen als Liste und nicht im Satz -- ein Platzhalter mitten im Satz
   bliebe leer, sobald es den Wert einmal nicht gibt, und den gibt es je nach
   Art der Meldung eben nicht. */
.nb-angaben {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0 0;
}
.nb-angabe {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
}
.nb-angabe svg.i {
  grid-row: span 2;
  align-self: center;
  color: var(--color-text-tertiary);
}
.nb-angabe dt { font: var(--typography-caption); color: var(--color-text-secondary); }
.nb-angabe dd { margin: 0; font: var(--typography-body-strong); }

/* Das Gesicht dessen, der den Anlass gegeben hat -- neben dem Zeichen seines
   Strangs und leicht darueber, wie in der Vorlage. Sind es mehrere, stehen
   sie gestaffelt: drei Gesichter sagen „mehrere Leute", ohne eine Zahl zu
   brauchen, und die Zahl steht ohnehin darunter. */
/* Die Gesichter standen leicht unter dem Zeichen des Bereichs -- das gibt es
   an der Zeile nicht mehr, also stehen sie fuer sich.

   Feste Breite fuer zwei gestaffelte Kreise (34 + 24): Sie ist dieselbe, ob
   zwei, eines oder keines dasteht, und damit beginnt jeder Satz an derselben
   Kante. */
.nb-gesichter { display: flex; flex: none; width: 58px; }
.nb-gesichter .head {
  width: 30px; height: 30px;
  margin-left: -10px;
  align-self: center;
  border: 2px solid var(--color-surface-primary);
  box-sizing: content-box;
}
.nb-gesichter .head:first-child { margin-left: 0; }
.nb-zeile.gewaehlt .nb-gesichter .head {
  border-color: color-mix(in srgb, var(--color-brand-primary-action) 10%,
    var(--color-surface-primary));
}
.nb-buendelzahl {
  margin-top: 2px;
  font: var(--typography-caption);
  color: var(--color-text-tertiary);
}

/* Woraus ein Buendel besteht: eine Zeile je Mensch, mit Bild und Zeitpunkt. */
.nb-einzelne {
  list-style: none;
  margin: var(--spacing-lg) 0 0;
  padding: var(--spacing-sm) 0 0;
  border-top: 1px solid var(--color-border-subtle);
}
.nb-einzelne li {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 6px 0;
}
.nb-einzelne .head { width: 28px; height: 28px; flex: none; }
.nb-einzelne span { flex: 1; min-width: 0; font: var(--typography-body); }
.nb-einzelne time { flex: none; font: var(--typography-caption); color: var(--color-text-tertiary); }

/* Der Eimer im Blatt steht in der Kopfzeile, rechts neben Titel und Zeit --
   dort, wo der Blick nach dem Lesen ohnehin ankommt. */
.nb-blattkopf { justify-content: space-between; }
.nb-blattkopf > div { flex: 1; min-width: 0; }
.nb-blattweg {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.nb-blattweg:hover {
  background: var(--color-status-error-surface);
  color: var(--color-status-error);
}

/* Ein Bereich, in dem nichts liegt, tritt zurueck -- er verschwindet aber
   nicht. Die Bereiche sind der Grundriss des Eingangs; wer einen kennt, sucht
   ihn dort, wo er immer steht, und soll „nichts" finden statt sich zu fragen,
   ob er ihn uebersehen hat. Nicht ausgegraut wie ein gesperrter Knopf: Er ist
   anklickbar, es steht nur nichts darin. */
/* Zurueckgetreten wird ueber die Deckkraft und nicht ueber eine Textrolle:
   `--color-text-secondary` und `--color-text-tertiary` sind im dunklen Bild
   derselbe Wert, und eine Regel, die sich auf ihren Unterschied verlaesst,
   tut dort gar nichts. */
.nb-filterpunkt.leer { opacity: .5; }
.nb-filterpunkt.leer:hover,
.nb-filterpunkt.leer:focus-visible,
.nb-filterpunkt.leer.active { opacity: 1; }

/* --------------------------- Die Seite der Einstellungen
   Menue links, Inhalt rechts -- derselbe Aufbau wie in Moderation und
   Verwaltung. Als Reiterzeile ueber siebenundvierzig Zeilen liefe man an
   allem vorbei, was man nicht zuerst sieht.

   Die Menuespalte richtet sich nach dem laengsten Wort und nicht nach einer
   Zahl: „Veranstaltungen" heisst anderswo „Wydarzenia" oder „Мероприятия",
   und in achtzehn Sprachen ist jedes feste Mass fuer irgendeine falsch. */
.nb-einstellungen {
  display: grid;
  grid-template-columns: minmax(180px, max-content) minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
}
.nb-inhalt { min-width: 0; }
/* Mit Kante und Flaeche wie das Menue in Moderation und Verwaltung -- und
   wie die Karten daneben. Ein Menue, das auf dem nackten Grund der Seite
   schwebt, waehrend rechts alles in Kaesten steht, sieht nach einem Versehen
   aus; und im Hellen liegt die Flaeche allein so dicht am Grund, dass man sie
   gar nicht saehe. */
.nb-menue {
  position: sticky;
  top: 77px;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-primary);
  box-shadow: var(--elevation-card);
}
.nb-menue ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Die Ruhezeiten sind kein Bereich der Meldungen, sondern eine Zeit, in der
   nichts hinausgeht -- die Linie sagt das, ohne ein Wort dafuer zu brauchen. */
.nb-menue li.getrennt {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border-subtle);
}
.nb-menueknopf {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 0;
  border-radius: var(--radius-md, 12px);
  background: none;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
}
.nb-menueknopf > svg.i { flex: none; margin-top: 2px; color: var(--color-text-tertiary); }
.nb-menueknopf strong { display: block; font: var(--typography-body-strong); }
.nb-menueknopf small {
  display: block;
  font: var(--typography-caption);
  color: var(--color-text-tertiary);
}
.nb-menueknopf:hover { background: var(--color-surface-secondary); color: var(--color-text-primary); }
.nb-menueknopf.an {
  background: color-mix(in srgb, var(--color-brand-primary-action) 12%,
    var(--color-surface-primary));
  color: var(--color-brand-primary-action);
}
.nb-menueknopf.an > svg.i { color: var(--color-brand-primary-action); }
.nb-menueknopf.an strong { color: var(--color-brand-primary-action); }
/* Auf schmalen Schirmen steht das Menue ueber dem Inhalt und laeuft in einer
   Zeile: Untereinander naehme es die halbe Seite, bevor der Inhalt anfaengt. */
@media (max-width: 900px) {
  .nb-einstellungen { grid-template-columns: minmax(0, 1fr); }
  .nb-menue { position: static; padding: 0; border: 0; background: none; box-shadow: none; }
  .nb-menue ul { flex-direction: row; overflow-x: auto; gap: var(--spacing-sm); }
  .nb-menue li.getrennt {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--color-border-subtle);
    padding-left: var(--spacing-sm);
  }
  .nb-menueknopf { white-space: nowrap; }
  .nb-menueknopf small { display: none; }
}

/* ------------------------------- Die Tafel der Wege (Einstellungen)
   Je Bereich eine Karte, darin eine Zeile je Art und drei Spalten fuer die
   Wege. Als Raster und nicht als Tabelle: Auf schmalen Schirmen sollen die
   Spalten unter das Wort rutschen koennen, und eine Tabelle kann das nicht. */
.nb-kopfkarte {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}
.nb-kopfkarte strong { display: block; font: var(--typography-section-title); }
.nb-kopfkarte small { color: var(--color-text-secondary); font: var(--typography-metadata); }
.nb-glockensatz { margin: 0 0 var(--spacing-lg); }

/* Drei Kacheln, je eine fuer einen Weg -- der grobe Griff ueber dem feinen. */
.nb-kanalkarte { margin-bottom: var(--spacing-lg); }
.nb-kanalkarte > header {
  display: block;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
}
.nb-kanalkarte header strong { display: block; font: var(--typography-section-title); }
.nb-kanalkarte header small { color: var(--color-text-secondary); font: var(--typography-metadata); }
.nb-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}
.nb-kachel {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
  cursor: pointer;
}
.nb-kachel:hover { background: var(--color-surface-secondary); }
.nb-kachelzeichen {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 999px;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}
.nb-kachelzeichen.ton-bell {
  background: color-mix(in srgb, var(--color-brand-primary-action) 14%, var(--color-surface-primary));
  color: var(--color-brand-primary-action);
}
.nb-kachelwort { flex: 1; min-width: 0; }
.nb-kachelwort strong { display: block; font: var(--typography-body-strong); }
.nb-kachelwort em {
  font-style: normal;
  font-weight: 400;
  font-size: .82em;
  color: var(--color-text-tertiary);
}
.nb-kachelwort small {
  display: block;
  font: var(--typography-caption);
  color: var(--color-text-tertiary);
}
.nb-kachel input { width: 20px; height: 20px; flex: none; }
/* „Teils" ist ein eigener Stand: Der Kasten ist leer, aber die Kachel sagt,
   dass darunter etwas Einzelnes gesetzt ist. */
.nb-kachel input[data-teils] { outline: 2px solid var(--color-brand-primary-action); outline-offset: 1px; }
.nb-kachel.wartet { opacity: .45; cursor: not-allowed; }
.nb-kachel.wartet input { cursor: not-allowed; }

.nb-bereich { margin-bottom: var(--spacing-lg); }
.nb-bereichkopf {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nb-bereichwort { flex: 1; min-width: 0; }
.nb-bereichwort strong { display: block; font: var(--typography-section-title); }
.nb-bereichwort small { color: var(--color-text-secondary); font: var(--typography-metadata); }
/* Dasselbe Zeichen und derselbe Ton wie im Posteingang: Wer dort „Nachrichten"
   in Blau kennt, findet die Karte hier ohne zu lesen. */
.nb-bereichzeichen {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 999px;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}
.nb-bereichzeichen.gross { width: 52px; height: 52px; }
.nb-bereichzeichen.ton-scheduling {
  background: color-mix(in srgb, var(--color-brand-primary-action) 14%, var(--color-surface-primary));
  color: var(--color-brand-primary-action);
}
.nb-bereichzeichen.ton-communication {
  background: color-mix(in srgb, var(--color-status-info) 14%, var(--color-surface-primary));
  color: var(--color-status-info);
}
.nb-bereichzeichen.ton-moderation {
  background: color-mix(in srgb, var(--color-status-warning) 14%, var(--color-surface-primary));
  color: var(--color-status-warning);
}
.nb-bereichzeichen.ton-guest {
  background: color-mix(in srgb, var(--color-status-success) 14%, var(--color-surface-primary));
  color: var(--color-status-success);
}
.nb-alle { flex: none; white-space: nowrap; }

/* Die Tafel ist ein eigener Kasten in der Karte und keine lose Reihe von
   Zeilen: Die Kopfzeile gehoert zu den Zeilen darunter, und ohne Rahmen
   schwebte beides im Weissen. Den Rand hat sie von den Kaesten der Seite --
   nur eine Stufe nach innen. */
.nb-tafel {
  display: flex;
  flex-direction: column;
  /* Auch oben Abstand: Die Tafel klebte an der Kopfzeile der Karte, als waere
     sie deren Fortsetzung -- sie ist aber etwas Eigenes. */
  margin: var(--spacing-lg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.nb-tafelkopf,
.nb-tafelzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 84px 84px;
  align-items: center;
  gap: var(--spacing-sm);
}
/* Die Kopfzeile traegt Flaeche: Sie ist die Ueberschrift der Tafel und nicht
   ihre erste Zeile, und ohne Grund darunter las sie sich wie eine. */
.nb-tafelkopf {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-secondary);
  font: var(--typography-caption);
  color: var(--color-text-secondary);
}
/* Zeichen und Wort untereinander: Drei Woerter nebeneinander in einer
   vierundachtzig Punkte breiten Spalte brechen, das Zeichen darueber nicht. */
.nb-spalte { display: grid; justify-items: center; gap: 2px; }
.nb-spalte svg.i { color: var(--color-text-tertiary); }
.nb-tafelbereich {
  margin: var(--spacing-lg) 0 2px;
  font: var(--typography-caption);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.nb-tafelzeile { padding: 8px var(--spacing-md); border-bottom: 1px solid var(--color-border-subtle); }
.nb-tafelzeile:last-child { border-bottom: 0; }
.nb-tafelzeile:hover { background: var(--color-surface-secondary); }
/* Wort und Erklaerung untereinander: Die Beschriftung traegt das Ereignis,
   die Zeile darunter sagt, wer es ausloest und warum man davon erfaehrt.
   Nebeneinander lesen sich beide als ein zu langer Satz. Im Kopf der Tafel
   steht nur ein Wort, darum wirkt `grid` dort wie zuvor. */
.nb-tafelwort {
  display: grid;
  gap: 1px;
  font: var(--typography-body);
  min-width: 0;
}
.nb-tafelwort strong { font-weight: 500; }
.nb-tafelwort small {
  font: var(--typography-caption);
  color: var(--color-text-secondary);
}
.nb-weg { display: grid; place-items: center; cursor: pointer; }
.nb-mehrzeilen { align-self: flex-start; margin: var(--spacing-sm) var(--spacing-sm); }
.nb-zuruecksetzen { display: flex; justify-content: flex-end; margin-bottom: var(--spacing-lg); }
/* Das Wort steht nur im Kopf der Spalte -- an jedem Kaestchen waere es
   hunderteinundvierzig Mal dasselbe. Fuer Vorlesewerkzeuge bleibt es da. */
.nb-wegwort {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 620px) {
  .nb-tafelkopf { display: none; }
  .nb-tafelzeile { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nb-tafelzeile .nb-weg { justify-items: start; grid-auto-flow: column; gap: var(--spacing-sm); }
  /* Ohne Kopfzeile braucht jedes Kaestchen sein Wort wieder. */
  .nb-tafelzeile .nb-wegwort {
    position: static;
    width: auto; height: auto;
    clip-path: none;
    font: var(--typography-caption);
    color: var(--color-text-secondary);
  }
}

/* Ein Weg ohne Zusteller: sichtbar, aber nicht zu bedienen. Blass und nicht
   versteckt -- die Spalte sagt, was einmal gelten soll. */
.nb-spalte.wartet { color: var(--color-text-tertiary); opacity: .7; }
.nb-spalte.wartet small { display: block; font-size: .82em; }
.nb-weg.wartet { opacity: .35; cursor: not-allowed; }
.nb-weg.wartet input { cursor: not-allowed; }

/* ------------------------------------------------- Die Ruhezeiten
   Derselbe Kopf wie bei den Bereichen, darunter ein eigener Kasten -- die
   Zeiten und die Tage gehoeren zusammen und nicht lose in die Karte. */
.nb-ruheschalter {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: none;
  font: var(--typography-body-strong);
  cursor: pointer;
  white-space: nowrap;
}
.nb-ruheschalter input { width: 20px; height: 20px; }
.nb-ruhekasten {
  margin: var(--spacing-lg);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
}
/* Abgeschaltet tritt der Kasten zurueck, statt zu verschwinden: Wer die
   Ruhezeiten einschaltet, soll sehen, was er damit einschaltet. */
.nb-ruhekasten.zu { opacity: .5; }
.nb-ruhezeit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}
.nb-ruhezeit .field label { font: var(--typography-body-strong); }
/* Die Uhr steht im Feld und nicht daneben: Ein Zeitfeld ohne Zeichen sieht
   aus wie jedes andere, und der Browser setzt sein eigenes ans rechte Ende --
   je nach Browser ein anderes. */
.nb-uhrfeld {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control, 10px);
  background: var(--color-surface-primary);
}
.nb-uhrfeld input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: var(--spacing-md) 0;
  color: var(--color-text-primary);
  font: var(--typography-body-strong);
}
.nb-uhrfeld input:focus { outline: none; }
.nb-uhrfeld:focus-within { border-color: var(--color-brand-primary-action); }
.nb-tagefrage {
  margin: var(--spacing-lg) 0 var(--spacing-sm);
  font: var(--typography-body-strong);
}
/* Die sieben Tage sind sieben Ziele fuer den Finger -- als winzige Kaestchen
   in einer Reihe trifft man den falschen. */
.nb-ruhekasten .nb-tage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
.nb-ruhekasten .nb-tag {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  font: var(--typography-body);
  cursor: pointer;
}
.nb-ruhekasten .nb-tag:hover { background: var(--color-surface-secondary); }
.nb-ruhekasten .nb-tag input { width: 18px; height: 18px; }
.nb-ruhekasten .nb-tag.zu { cursor: not-allowed; }