/* ===========================================================================
   NovaBooth — app.css
   Dichte und Geruest fuer Kundenportal, Betreiberkonsole und den
   Bedienbereich der Booth-Software. Ladereihenfolge Nummer 4.

   app.css und site.css laden NIE gemeinsam. Damit ist das Vermischen der
   beiden Dichten baulich ausgeschlossen statt nur verboten — genau der
   Fehler, der sonst nach ein paar Monaten unbemerkt passiert.

   FESTE PIXELGROESSEN, kein clamp. Dichte ist hier Absicht, nicht ein
   Nebeneffekt der Fensterbreite. Eine Tabelle mit vierzig Buchungen soll
   auf einem grossen Bildschirm mehr Zeilen zeigen, nicht groessere.

   KEIN HEXWERT IN DIESER DATEI.
   =========================================================================== */

html { font-size: 15px; }

body {
  background: var(--nb-grund);
  color: var(--nb-text);
  font-size: 15px;
  line-height: 1.5;
}

/* --- Schriftleiter, fest -------------------------------------------------- */
:root {
  --nb-t-12: 12px;   /* Tabellenkopf, Beschriftung, Chip */
  --nb-t-13: 13px;   /* Zweitzeile, Hilfetext, Journal */
  --nb-t-14: 14px;   /* Tabellenzelle */
  --nb-t-15: 15px;   /* Basis, Eingabefeld, Knopf */
  --nb-t-16: 16px;   /* Kartentitel */
  --nb-t-20: 20px;   /* Seitentitel */
  --nb-t-28: 28px;   /* Kennzahl */
}

h1 { font-size: var(--nb-t-20); }
h2 { font-size: var(--nb-t-16); }
h3 { font-size: var(--nb-t-15); }

/* --- Geruest -------------------------------------------------------------- */

.nb-geruest__inhalt { display: flex; flex-direction: column; }

.nb-seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-a-3);
  margin-block-end: var(--nb-a-5);
}
.nb-seitenkopf__titel { display: flex; flex-direction: column; gap: var(--nb-a-1); }
.nb-seitenkopf__unter { font-size: var(--nb-t-13); color: var(--nb-text-leise); }
.nb-seitenkopf__aktionen { display: flex; gap: var(--nb-a-2); }

.nb-raster { display: grid; gap: var(--nb-a-4); }
.nb-raster--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.nb-raster--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nb-raster--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Kennzahlenreihe auf der Uebersicht. */
.nb-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--nb-a-4);
}
.nb-kennzahlen > * {
  padding: var(--nb-a-4);
  border: var(--nb-rahmen);
  border-radius: var(--nb-r);
  background: var(--nb-flaeche);
}

/* --- Mobil ---------------------------------------------------------------
   Unter 1024px wird die Seitenleiste zur Schublade. Sie bleibt im DOM an
   derselben Stelle, damit die Tabulatorreihenfolge nicht springt. */
@media (max-width: 1023px) {
  .nb-seitenleiste {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 40;
    translate: -100% 0;
    box-shadow: var(--nb-schatten-3);
    transition: translate var(--nb-dauer) var(--nb-ease-aus);
  }
  .nb-seitenleiste.is-offen { translate: 0 0; }
  .nb-kopfleiste { padding-inline: var(--nb-a-4); }
}
@media (min-width: 1024px) {
  .nb-seitenschalter { display: none; }
}

/* --- Live-Vorschau der Box -----------------------------------------------
   Einer der drei erlaubten Orte fuer den Lichtschein. Mehr als einer je
   Bildschirm ist keiner. */
.nb-livebild { position: relative; }
.nb-livebild::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background: var(--nb-lichtschein);
  pointer-events: none;
  z-index: -1;
}

/* Die laufende Box hebt sich ab — ueber die Linie, nicht ueber eine
   Vollflaeche. */
.nb-boxkarte.is-aktiv { border-color: var(--nb-primaer-lesbar); }

/* --- Protokollzeile ------------------------------------------------------- */
.nb-journal { font-size: var(--nb-t-13); }
.nb-journal__zeit { color: var(--nb-text-leise); font-variant-numeric: tabular-nums; }

/* --- Druckvorschau im Portal ---------------------------------------------
   Ein Abzug wird immer auf dunklem Grund gezeigt, damit das Blatt als
   Blatt lesbar bleibt. */
.nb-abzug { background: var(--nb-bildgrund); padding: var(--nb-a-4); border-radius: var(--nb-r); }