/* ===========================================================================
   NovaBooth — komponenten.css
   Alle .nb-*-Bausteine. Ladereihenfolge Nummer 3 (nach basis.css + farben.css).

   KEIN HEXWERT IN DIESER DATEI. Jede Farbe kommt aus einem Token.
   tools/scope-check.php bricht den Deploy ab, wenn hier ein # auftaucht.

   Namenskonvention:
     Block     .nb-<hauptwort>          deutsch, Einzahl
     Element   .nb-<block>__<wort>
     Variante  .nb-<block>--<wort>
     Zustand   .is-<wort>
     Gesperrt  NIE als Klasse — immer [disabled] bzw. [aria-disabled="true"]

   Sieben Zustaende, fuer jedes Bedienelement ohne Ausnahme:
     ruhe · hover · aktiv · fokus-sichtbar · gewaehlt · gesperrt · laedt
   Geschrieben als :is(:hover, .is-demo-hover), damit die Musterseite alle
   sieben gleichzeitig zeigen kann, ohne JavaScript.
   =========================================================================== */

/* ===========================================================================
   KNOEPFE
   Die zentrale Regel des ganzen Systems steht hier: --nb-rahmen-bedien liegt
   auch auf GEFUELLTEN Knoepfen. Damit erfuellt der Rahmen den Nicht-Text-
   kontrast und nicht die Fuellung — und ein Markentausch auf Gruen, Gelb
   oder Pink kann nur noch den Textkontrast im Knopf verletzen, nie die
   Erkennbarkeit des Knopfes selbst.
   =========================================================================== */

.nb-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nb-a-1);
  height: var(--nb-h-bedien);
  padding: 0 var(--nb-a-3);
  border: var(--nb-rahmen-bedien);
  border-radius: var(--nb-r-sm);
  background: var(--nb-flaeche);
  color: var(--nb-text);
  font-size: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--nb-dauer-schnell) var(--nb-ease),
              border-color var(--nb-dauer-schnell) var(--nb-ease),
              color var(--nb-dauer-schnell) var(--nb-ease);
}

.nb-knopf:is(:hover, .is-demo-hover) { background: var(--nb-flaeche-hover); }

.nb-knopf:is(:active, .is-demo-aktiv) { translate: 0 1px; }

/* Gesperrt nie mit eigener Graufarbe — die bricht beim Markentausch, weil
   sie zum neuen Ton nicht mehr passt. Deckkraft passt immer. */
.nb-knopf:is([disabled], [aria-disabled="true"], .is-demo-gesperrt) {
  opacity: .55;
  cursor: not-allowed;
  translate: none;
}

.nb-knopf--primaer {
  background: var(--nb-primaer);
  color: var(--nb-primaer-text);
}
.nb-knopf--primaer:is(:hover, .is-demo-hover) { background: var(--nb-primaer-hover); }
.nb-knopf--primaer:is(:active, .is-demo-aktiv) { background: var(--nb-primaer-aktiv); }

.nb-knopf--still {
  background: transparent;
  border-color: transparent;
  font-weight: 500;
}
.nb-knopf--still:is(:hover, .is-demo-hover) { background: var(--nb-flaeche-hover); }

.nb-knopf--gefahr { color: var(--nb-fehler-vg); }
.nb-knopf--gefahr:is(:hover, .is-demo-hover) { background: var(--nb-fehler-hg); }

.nb-knopf--gross { height: var(--nb-h-bedien-touch); padding: 0 var(--nb-a-5); }
.nb-knopf--klein { height: var(--nb-h-bedien-kompakt); padding: 0 var(--nb-a-2); font-size: .92em; }
.nb-knopf--breit { width: 100%; }

/* Laedt: die Beschriftung BLEIBT stehen, die Breite friert ein, davor ein
   Ring. Kein Textwechsel auf "Bitte warten" — das springt und ist bei jedem
   zweiten Klick die Ursache fuer einen Doppelklick. */
.nb-knopf.is-laedt {
  pointer-events: none;
  min-width: var(--nb-knopf-breite, auto);
}
.nb-knopf.is-laedt::before {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--nb-r-pill);
  animation: nb-dreh .7s linear infinite;
}
@keyframes nb-dreh { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .nb-knopf.is-laedt::before { animation-duration: 2s; }
}

/* Knopf, der nur ein Symbol traegt. Quadratisch, mit Beschriftung fuer
   Hilfstechnik — ein Symbol allein ist fuer einen Screenreader nichts. */
.nb-ikonknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nb-h-bedien);
  height: var(--nb-h-bedien);
  border: var(--nb-rahmen-bedien);
  border-radius: var(--nb-r-sm);
  background: var(--nb-flaeche);
  color: var(--nb-text);
  cursor: pointer;
  transition: background-color var(--nb-dauer-schnell) var(--nb-ease);
}
.nb-ikonknopf:is(:hover, .is-demo-hover) { background: var(--nb-flaeche-hover); }
.nb-ikonknopf:is([disabled], [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }

/* Zwei- bis Vierfachwahl, etwa Monat/Jahr auf der Preisseite. */
.nb-knopfgruppe {
  display: inline-flex;
  border: var(--nb-rahmen-bedien);
  border-radius: var(--nb-r-sm);
  overflow: hidden;
}
.nb-knopfgruppe > * {
  border: 0;
  border-radius: 0;
  height: var(--nb-h-bedien);
  padding: 0 var(--nb-a-3);
  background: var(--nb-flaeche);
  font-weight: 600;
  cursor: pointer;
}
.nb-knopfgruppe > * + * { border-left: var(--nb-rahmen-bedien); }
.nb-knopfgruppe > *:is(:hover, .is-demo-hover) { background: var(--nb-flaeche-hover); }
.nb-knopfgruppe > .is-gewaehlt {
  background: var(--nb-primaer-still);
  color: var(--nb-primaer-lesbar);
}

/* ===========================================================================
   FORMULAR
   =========================================================================== */

.nb-formular { max-width: var(--nb-breite-form); }

.nb-feld { display: block; margin-block-end: var(--nb-a-4); }

.nb-feld__beschriftung {
  display: block;
  margin-block-end: var(--nb-a-1);
  font-size: 13px;
  font-weight: 500;
  color: var(--nb-text);
}

.nb-feld__eingabe,
.nb-feld input:not([type="checkbox"]):not([type="radio"]),
.nb-feld select,
.nb-feld textarea {
  width: 100%;
  min-height: var(--nb-h-bedien);
  padding: 0 var(--nb-a-3);
  border: var(--nb-rahmen-bedien);
  border-radius: var(--nb-r-sm);
  background: var(--nb-flaeche);
  color: var(--nb-text);
  transition: border-color var(--nb-dauer-schnell) var(--nb-ease);
}
.nb-feld textarea { padding: var(--nb-a-2) var(--nb-a-3); min-height: 6rem; resize: vertical; }

.nb-feld :is(input, select, textarea):is(:hover, .is-demo-hover) { border-color: var(--nb-text-leise); }

/* Platzhalter nutzt text-leise. Ein eigener, schwaecherer Ton laege unter
   4,5:1 und waere damit fuer manche Nutzer schlicht nicht da. */
.nb-feld ::placeholder { color: var(--nb-text-leise); opacity: 1; }

.nb-feld :is(input, select, textarea)[disabled] { opacity: .55; cursor: not-allowed; }

.nb-feld__hilfe {
  margin-block-start: var(--nb-a-1);
  font-size: 13px;
  color: var(--nb-text-leise);
}

/* Fehler am Feld: Rand PLUS Symbol PLUS Text. Farbe traegt nie allein —
   und nie vor dem ersten Absenden. */
.nb-feld.is-fehler :is(input, select, textarea) { border-color: var(--nb-fehler-vg); }
.nb-feld__fehler {
  display: flex;
  align-items: flex-start;
  gap: var(--nb-a-1);
  margin-block-start: var(--nb-a-1);
  font-size: 13px;
  color: var(--nb-fehler-vg);
}

.nb-feld--auswahl { display: flex; align-items: flex-start; gap: var(--nb-a-2); }

/* Haken und Radio: eigene Zeichnung, damit sie in beiden Themen gleich
   aussehen. Die native Fassung ist unter Windows im dunklen Thema weiss
   auf weiss. */
.nb-haken, .nb-radio {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-block-start: 1px;
  border: var(--nb-rahmen-bedien);
  background: var(--nb-flaeche);
  cursor: pointer;
  appearance: none;
  display: grid;
  place-content: center;
}
.nb-haken { border-radius: var(--nb-r-xs); }
.nb-radio { border-radius: var(--nb-r-pill); }

.nb-haken:checked, .nb-radio:checked {
  background: var(--nb-primaer);
  border-color: var(--nb-primaer);
}
.nb-haken:checked::after {
  content: "";
  width: 10px; height: 6px;
  border: 2px solid var(--nb-primaer-text);
  border-block-start: 0; border-inline-end: 0;
  rotate: -45deg;
  translate: 0 -1px;
}
.nb-radio:checked::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-primaer-text);
}

/* An/Aus. Heisst ueberall "Umschalter" und nirgends anders. */
.nb-schalter {
  flex: 0 0 auto;
  position: relative;
  width: 40px; height: 22px;
  border: var(--nb-rahmen-bedien);
  border-radius: var(--nb-r-pill);
  background: var(--nb-flaeche-tief);
  cursor: pointer;
  appearance: none;
  transition: background-color var(--nb-dauer-schnell) var(--nb-ease);
}
.nb-schalter::after {
  content: "";
  position: absolute;
  inset-block-start: 2px; inset-inline-start: 2px;
  width: 14px; height: 14px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-text-leise);
  transition: translate var(--nb-dauer-schnell) var(--nb-ease),
              background-color var(--nb-dauer-schnell) var(--nb-ease);
}
.nb-schalter:checked { background: var(--nb-primaer); border-color: var(--nb-primaer); }
.nb-schalter:checked::after { translate: 18px 0; background: var(--nb-primaer-text); }
.nb-schalter[disabled] { opacity: .55; cursor: not-allowed; }

.nb-suche { position: relative; }
.nb-suche .nb-sym { position: absolute; inset-block-start: 50%; inset-inline-start: var(--nb-a-2);
                    translate: 0 -50%; color: var(--nb-text-leise); pointer-events: none; }
.nb-suche input { padding-inline-start: var(--nb-a-7); }

/* ===========================================================================
   KARTE, GERUEST, LEISTEN
   =========================================================================== */

.nb-karte {
  border: var(--nb-rahmen);
  border-radius: var(--nb-r);
  background: var(--nb-flaeche);
  box-shadow: var(--nb-schatten-1);
}
.nb-karte__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-a-3);
  padding: var(--nb-a-4) var(--nb-a-5);
  border-block-end: var(--nb-rahmen);
}
.nb-karte__kopf h2, .nb-karte__kopf h3 { font-size: 16px; font-weight: 600; }
.nb-karte__inhalt { padding: var(--nb-a-5); }
.nb-karte__fuss {
  padding: var(--nb-a-3) var(--nb-a-5);
  border-block-start: var(--nb-rahmen);
  background: var(--nb-flaeche-tief);
  border-end-start-radius: var(--nb-r);
  border-end-end-radius: var(--nb-r);
}

.nb-kopfleiste {
  display: flex;
  align-items: center;
  gap: var(--nb-a-4);
  height: var(--nb-h-kopf);
  padding-inline: var(--nb-a-6);
  border-block-end: var(--nb-rahmen);
  background: var(--nb-flaeche);
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}

.nb-seitenleiste {
  flex: 0 0 var(--nb-b-seitenleiste);
  width: var(--nb-b-seitenleiste);
  border-inline-end: var(--nb-rahmen);
  background: var(--nb-flaeche);
  padding: var(--nb-a-3);
  overflow-y: auto;
}
.nb-seitenleiste.is-schmal { flex-basis: var(--nb-b-seitenleiste-schmal);
                             width: var(--nb-b-seitenleiste-schmal); }

.nb-seitenleiste a {
  display: flex;
  align-items: center;
  gap: var(--nb-a-2);
  padding: var(--nb-a-2) var(--nb-a-3);
  border-radius: var(--nb-r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--nb-text);
}
.nb-seitenleiste a:is(:hover, .is-demo-hover) { background: var(--nb-flaeche-hover); }

/* Aktiver Eintrag: 2px Kante plus getoente Flaeche. NIE Vollflaeche in
   --nb-primaer — die verlaesst sich auf die Fuellung, und genau das soll
   nirgends passieren. Die Kante ist primaer-lesbar, nicht primaer: sie
   traegt Bedeutung ohne Text und ohne Rahmen. */
.nb-seitenleiste a.is-aktiv {
  background: var(--nb-primaer-still);
  color: var(--nb-primaer-lesbar);
  box-shadow: inset 2px 0 0 var(--nb-primaer-lesbar);
}

.nb-geruest { display: flex; min-height: 100dvh; }
.nb-geruest__inhalt { flex: 1; min-width: 0; }

/* Menue-Schalter: nur mobil sichtbar (Desktop blendet ihn in app.css aus),
   oeffnet die Schublade. */
.nb-seitenschalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: var(--nb-rahmen);
  border-radius: var(--nb-r-sm);
  background: var(--nb-flaeche);
  color: var(--nb-text);
  cursor: pointer;
}
.nb-seitenschalter:is(:hover, :focus-visible) { background: var(--nb-flaeche-hover); }

/* Abdunklung hinter der offenen Schublade — nur mobil, nur wenn offen
   (das hidden-Attribut nimmt sie sonst aus dem Fluss). */
.nb-seiten-hintergrund {
  position: fixed;
  inset: 0;
  z-index: 39;
  border: 0;
  padding: 0;
  background: var(--nb-schleier);
  cursor: pointer;
}
@media (min-width: 1024px) { .nb-seiten-hintergrund { display: none; } }

.nb-seite { padding: var(--nb-a-6); }
@media (max-width: 1023px) { .nb-seite { padding: var(--nb-a-4); } }

.nb-pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-a-1);
  font-size: 13px;
  color: var(--nb-text-leise);
}
.nb-pfad a:hover { text-decoration: underline; }

/* ===========================================================================
   REITER
   =========================================================================== */

.nb-reiter { display: flex; gap: var(--nb-a-1); border-block-end: var(--nb-rahmen); }
.nb-reiter > * {
  padding: var(--nb-a-2) var(--nb-a-3);
  border: 0;
  border-radius: var(--nb-r-sm) var(--nb-r-sm) 0 0;
  font-weight: 500;
  color: var(--nb-text-leise);
  cursor: pointer;
  margin-block-end: -1px;
}
.nb-reiter > *:is(:hover, .is-demo-hover) { background: var(--nb-flaeche-hover); color: var(--nb-text); }
.nb-reiter > .is-aktiv {
  color: var(--nb-primaer-lesbar);
  box-shadow: inset 0 -2px 0 var(--nb-primaer-lesbar);
}

/* ===========================================================================
   TABELLE
   Keine Zebrastreifen. Trennung nur waagerecht, nie senkrecht.
   Zahlen rechtsbuendig mit Tabellenziffern, Text linksbuendig.
   =========================================================================== */

.nb-tabelle { font-size: 14px; }

.nb-tabelle th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  height: 36px;
  padding: 0 var(--nb-a-3);
  background: var(--nb-flaeche-tief);
  border-block-end: var(--nb-rahmen);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: start;
  color: var(--nb-text-leise);
  white-space: nowrap;
}

.nb-tabelle td {
  height: 40px;
  padding: var(--nb-a-2) var(--nb-a-3);
  border-block-end: var(--nb-rahmen);
  vertical-align: middle;
}

.nb-tabelle :is(th, td):first-child { padding-inline-start: var(--nb-a-4); }
.nb-tabelle :is(th, td):last-child  { padding-inline-end: var(--nb-a-4); }

.nb-tabelle tbody tr:is(:hover, .is-demo-hover) { background: var(--nb-flaeche-hover); }
.nb-tabelle tbody tr.is-gewaehlt {
  background: var(--nb-primaer-still);
  box-shadow: inset 2px 0 0 var(--nb-primaer-lesbar);
}

.nb-tabelle__zahl { text-align: end; font-variant-numeric: tabular-nums; }
.nb-tabelle--kompakt td { height: 34px; }

/* Unter 768px wird jede Zeile zur Karte. Waagerechtes Scrollen einer
   Tabelle ist am Handy unbedienbar. */
@media (max-width: 767px) {
  .nb-tabelle--karten thead { display: none; }
  .nb-tabelle--karten tr {
    display: block;
    margin-block-end: var(--nb-a-3);
    border: var(--nb-rahmen);
    border-radius: var(--nb-r);
    background: var(--nb-flaeche);
  }
  .nb-tabelle--karten td {
    display: flex;
    justify-content: space-between;
    gap: var(--nb-a-3);
    height: auto;
    border-block-end: 0;
  }
  .nb-tabelle--karten td::before {
    content: attr(data-nb-titel);
    font-size: 12px;
    font-weight: 500;
    color: var(--nb-text-leise);
  }
  .nb-tabelle--karten .nb-tabelle__zahl { text-align: end; }
}

/* Breite Inhalte scrollen in ihrem eigenen Rahmen, nie die ganze Seite. */
.nb-daten { overflow-x: auto; }

.nb-auswahlleiste {
  display: flex;
  align-items: center;
  gap: var(--nb-a-3);
  padding: var(--nb-a-2) var(--nb-a-4);
  border: var(--nb-rahmen);
  border-radius: var(--nb-r-sm);
  background: var(--nb-primaer-still);
  color: var(--nb-primaer-lesbar);
  font-size: 14px;
}

.nb-blaetterung { display: flex; align-items: center; gap: var(--nb-a-1); }

/* ===========================================================================
   STATUS
   Farbe traegt NIE allein. Ein Punkt bekommt immer ein Wort daneben,
   Warnung und Fehler zusaetzlich ein Symbol.
   =========================================================================== */

.nb-punkt {
  flex: 0 0 auto;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--nb-r-pill);
  background: currentColor;
}
.nb-punkt--ok      { color: var(--nb-ok-vg); }
.nb-punkt--warnung { color: var(--nb-warnung-vg); }
.nb-punkt--fehler  { color: var(--nb-fehler-vg); }
.nb-punkt--aus     { color: var(--nb-text-leise); }

.nb-abzeichen {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-a-1);
  height: 22px;
  padding: 0 var(--nb-a-2);
  border: 1px solid currentColor;
  border-radius: var(--nb-r-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.nb-abzeichen--ok      { color: var(--nb-ok-vg);      background: var(--nb-ok-hg); }
.nb-abzeichen--warnung { color: var(--nb-warnung-vg); background: var(--nb-warnung-hg); }
.nb-abzeichen--fehler  { color: var(--nb-fehler-vg);  background: var(--nb-fehler-hg); }
.nb-abzeichen--info    { color: var(--nb-info-vg);    background: var(--nb-info-hg); }
.nb-abzeichen--still   { color: var(--nb-text-leise); background: var(--nb-flaeche-tief);
                         border-color: var(--nb-linie); }

/* ===========================================================================
   MELDUNGEN
   Nur Kritisches bekommt einen Kasten. Erfolg und Unkritisches gehen als
   Toast oder ins Protokoll. Keine roten Feldraender vor dem ersten Absenden.
   =========================================================================== */

.nb-meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--nb-a-2);
  padding: var(--nb-a-3) var(--nb-a-4);
  border: 1px solid var(--nb-fehler-vg);
  border-radius: var(--nb-r);
  background: var(--nb-fehler-hg);
  color: var(--nb-fehler-vg);
  font-size: 14px;
}
.nb-meldung--warnung { border-color: var(--nb-warnung-vg); background: var(--nb-warnung-hg);
                       color: var(--nb-warnung-vg); }
.nb-meldung--info    { border-color: var(--nb-info-vg);    background: var(--nb-info-hg);
                       color: var(--nb-info-vg); }
.nb-meldung--ok      { border-color: var(--nb-ok-vg);      background: var(--nb-ok-hg);
                       color: var(--nb-ok-vg); }
.nb-meldung__text { color: var(--nb-text); }

.nb-toast {
  position: fixed;
  inset-block-end: var(--nb-a-6);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--nb-a-2);
  padding: var(--nb-a-3) var(--nb-a-4);
  border: var(--nb-rahmen);
  border-radius: var(--nb-r);
  background: var(--nb-flaeche-hoch);
  box-shadow: var(--nb-schatten-2);
  font-size: 14px;
}

.nb-tipp {
  position: absolute;
  z-index: 50;
  max-width: 18rem;
  padding: var(--nb-a-2) var(--nb-a-3);
  border: var(--nb-rahmen);
  border-radius: var(--nb-r-sm);
  background: var(--nb-flaeche-hoch);
  box-shadow: var(--nb-schatten-2);
  font-size: 13px;
}

/* ===========================================================================
   SCHWEBENDES
   =========================================================================== */

.nb-menue {
  min-width: 11rem;
  padding: var(--nb-a-1);
  border: var(--nb-rahmen);
  border-radius: var(--nb-r);
  background: var(--nb-flaeche-hoch);
  box-shadow: var(--nb-schatten-2);
}
.nb-menue a, .nb-menue button {
  display: flex;
  align-items: center;
  gap: var(--nb-a-2);
  width: 100%;
  padding: var(--nb-a-2) var(--nb-a-2);
  border-radius: var(--nb-r-sm);
  font-size: 14px;
  text-align: start;
}
.nb-menue :is(a, button):is(:hover, .is-demo-hover) { background: var(--nb-flaeche-hover); }

.nb-dialog {
  width: min(34rem, calc(100vw - var(--nb-a-7)));
  padding: 0;
  border: var(--nb-rahmen);
  border-radius: var(--nb-r-lg);
  background: var(--nb-flaeche-hoch);
  box-shadow: var(--nb-schatten-3);
  color: var(--nb-text);
}
.nb-dialog::backdrop { background: var(--nb-schleier); }

.nb-schublade {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(28rem, 100vw);
  border-inline-start: var(--nb-rahmen);
  background: var(--nb-flaeche-hoch);
  box-shadow: var(--nb-schatten-3);
  z-index: 40;
}

/* ===========================================================================
   FORTSCHRITT, KENNZAHLEN, SKELETT
   =========================================================================== */

.nb-fortschritt {
  height: 6px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-flaeche-tief);
  overflow: hidden;
}
/* Die Fuellung traegt Bedeutung ohne Text und ohne Rahmen — deshalb
   primaer-lesbar und nicht primaer. */
.nb-fortschritt__wert { height: 100%; background: var(--nb-primaer-lesbar); }
.nb-fortschritt--warnung .nb-fortschritt__wert { background: var(--nb-warnung-vg); }
.nb-fortschritt--voll   .nb-fortschritt__wert { background: var(--nb-fehler-vg); }

.nb-kennzahl { display: flex; flex-direction: column; gap: var(--nb-a-1); }
.nb-kennzahl__wert {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.nb-kennzahl__titel { font-size: 12px; font-weight: 500; color: var(--nb-text-leise); }

.nb-ring { display: inline-block; width: 14px; height: 14px;
           border: 2px solid currentColor; border-right-color: transparent;
           border-radius: var(--nb-r-pill); animation: nb-dreh .7s linear infinite; }

/* Ladeskelett statt Drehrad, wo die Form schon feststeht — das ruhigere
   Bild, weil das Layout nicht springt, wenn die Daten kommen. */
.nb-skelett {
  border-radius: var(--nb-r-sm);
  background: var(--nb-flaeche-tief);
  animation: nb-atmen 1.6s ease-in-out infinite;
}
@keyframes nb-atmen { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .nb-skelett { animation: none; } }

.nb-leer {
  display: grid;
  place-items: center;
  gap: var(--nb-a-3);
  padding: var(--nb-a-9) var(--nb-a-5);
  text-align: center;
  color: var(--nb-text-leise);
}
.nb-leer h3 { font-size: 16px; color: var(--nb-text); }
.nb-leer p { max-width: 26rem; font-size: 14px; }

.nb-schritte { display: flex; align-items: center; gap: var(--nb-a-2); }
.nb-schritte__punkt {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: var(--nb-rahmen-bedien);
  border-radius: var(--nb-r-pill);
  font-size: 12px;
  font-weight: 600;
}
.nb-schritte__punkt.is-aktiv { background: var(--nb-primaer); border-color: var(--nb-primaer);
                               color: var(--nb-primaer-text); }
.nb-schritte__punkt.is-fertig { background: var(--nb-ok-hg); border-color: var(--nb-ok-vg);
                                color: var(--nb-ok-vg); }

/* ===========================================================================
   MEDIEN
   =========================================================================== */

.nb-bildraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--nb-a-2);
}
.nb-bildraster img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--nb-r-sm); }

.nb-ablage {
  display: grid;
  place-items: center;
  gap: var(--nb-a-2);
  padding: var(--nb-a-7);
  border: 2px dashed var(--nb-linie-stark);
  border-radius: var(--nb-r);
  background: var(--nb-flaeche-tief);
  color: var(--nb-text-leise);
  text-align: center;
}
.nb-ablage.is-ueber { border-color: var(--nb-primaer); background: var(--nb-primaer-still); }

.nb-livebild { aspect-ratio: 3 / 2; position: relative; }

.nb-avatar {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: var(--nb-r-pill);
  object-fit: cover;
  background: var(--nb-flaeche-tief);
}

/* ===========================================================================
   MASCHINENWERTE
   =========================================================================== */

.nb-schluessel {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-a-2);
  padding: var(--nb-a-2) var(--nb-a-3);
  border: var(--nb-rahmen);
  border-radius: var(--nb-r-sm);
  background: var(--nb-flaeche-tief);
  font-family: var(--nb-schrift-zahl);
  font-size: 14px;
  letter-spacing: .04em;
  user-select: all;
}

.nb-protokoll {
  max-height: 24rem;
  overflow-y: auto;
  padding: var(--nb-a-3);
  border: var(--nb-rahmen);
  border-radius: var(--nb-r-sm);
  background: var(--nb-flaeche-tief);
  font-family: var(--nb-schrift-zahl);
  font-size: 13px;
  line-height: 1.55;
}

/* ===========================================================================
   GESPERRTE FUNKTIONEN
   Sichtbar, aber inaktiv — das ist gleichzeitig die beste Werbung fuer den
   hoeheren Tarif. IMMER in Akzent, NIE in Fehlerrot: ein zu kleiner Tarif
   ist kein Fehler des Kunden.
   Die Deckkraft liegt auf der Flaeche, NIE auf dem erklaerenden Text —
   sonst ist die Begruendung selbst nicht mehr lesbar.
   =========================================================================== */

.nb-sperre { position: relative; }

.nb-sperre__inhalt {
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

.nb-sperrmarke {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-a-1);
  height: 22px;
  padding: 0 var(--nb-a-2);
  border: 1px solid var(--nb-akzent);
  border-radius: var(--nb-r-pill);
  background: var(--nb-akzent-still);
  color: var(--nb-akzent);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  /* Volle Deckkraft, auch wenn sie ueber gesperrtem Inhalt liegt. */
  opacity: 1;
}

.nb-sperrband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-a-3);
  padding: var(--nb-a-3) var(--nb-a-4);
  border: 1px solid var(--nb-akzent);
  border-radius: var(--nb-r);
  background: var(--nb-akzent-still);
  font-size: 14px;
  color: var(--nb-text);
}
.nb-sperrband strong { color: var(--nb-akzent); }

/* ===========================================================================
   HILFSKLASSEN — genau zehn, keine elfte
   =========================================================================== */

.u-nur-sr {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.u-verborgen    { display: none; }
.u-zahl         { font-variant-numeric: tabular-nums; }
.u-mono         { font-family: var(--nb-schrift-zahl); font-variant-ligatures: none; }
.u-abschneiden  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-rechts       { text-align: end; }
.u-leise        { color: var(--nb-text-leise); }
.u-eng          { max-width: var(--nb-breite-text); }
.u-luecke       { display: flex; gap: var(--nb-a-2); align-items: center; }
.u-umbruch-aus  { white-space: nowrap; }