/* ===========================================================================
   NovaBooth — basis.css
   Reset, Schriften, Strukturtoken. Ladereihenfolge Nummer 1.

   IN DIESER DATEI STEHT KEIN FARBWERT.
   Farben kommen ausschliesslich aus farben.css (Produkt) bzw. gast.css
   (Kundenmarke) — beide erzeugt. tools/scope-check.php bricht den Deploy ab,
   wenn hier ein #, rgb( oder hsl( auftaucht. Einzige Ausnahme sind die drei
   namentlich freigegebenen Bildbuehnenwerte ganz unten, weil eine Bildbuehne
   in JEDEM Thema dunkel sein muss: ein Foto wird nicht auf Weiss beurteilt.

   Aufbau:
     1. Schriften
     2. Strukturtoken (Abstaende, Radien, Zeiten, Groessen)
     3. Reset
     4. Grundregeln, die ueberall gelten
     5. Bildbuehne — die einzige Farbausnahme
   =========================================================================== */

/* ===========================================================================
   1. SCHRIFTEN
   Selbst gehostet. Eine Einbindung ueber fonts.googleapis.com uebertraegt
   IP-Adressen an Google (LG Muenchen I, 20.01.2022, Az. 3 O 17493/20). Die
   Kunden sind deutsche Gewerbetreibende mit eigener Impressumspflicht, und
   dieses Produkt verkauft Datentreue — ein externer Schriftabruf waere ein
   Verkaufsschaden, kein Detail.
   =========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Mono nur fuer Maschinenwerte, die abgetippt oder vorgelesen werden:
   Lizenzschluessel, Box-Kennung, Rechnungsnummer, Journalzeile.
   NIE fuer Preise, Datumsangaben oder Kennzahlen — dafuer Sans mit tnum.
   Wird nur auf Seiten eingebunden, die solche Werte zeigen. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Rueckfallschrift mit angeglichenen Massen. Ohne size-adjust springen
   Zahlenspalten beim Nachladen der echten Schrift um mehrere Pixel. */
@font-face {
  font-family: "Plex Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
}

/* ===========================================================================
   2. STRUKTURTOKEN
   =========================================================================== */

:root {
  /* --- Schrift --------------------------------------------------------- */
  --nb-schrift:      "IBM Plex Sans", "Plex Fallback", "Segoe UI", system-ui,
                     -apple-system, "Helvetica Neue", Arial, sans-serif;
  --nb-schrift-zahl: "IBM Plex Mono", ui-monospace, SFMono-Regular,
                     "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  /* --- Abstandsleiter --------------------------------------------------
     Nichts ausserhalb dieser Leiter. Wer 18px braucht, braucht in
     Wahrheit 16 oder 20. */
  --nb-a-1:  4px;
  --nb-a-2:  8px;
  --nb-a-3:  12px;
  --nb-a-4:  16px;
  --nb-a-5:  20px;
  --nb-a-6:  24px;
  --nb-a-7:  32px;
  --nb-a-8:  40px;
  --nb-a-9:  56px;
  --nb-a-10: 80px;

  /* --- Radien ----------------------------------------------------------
     Knoepfe sind NIE Pillen. 999px liest als Konsumprodukt, 6px liest als
     Werkzeug — und es ist zugleich der billigste sichtbare Abstand zu
     Fotobox Nidda, wo im Verwaltungsbereich jede Navigationszeile 999px
     traegt. --nb-r-pill gilt ausschliesslich fuer Statuschip, Statuspunkt
     und Avatar.
     Verschachtelung: innerer Radius = aeusserer minus Innenabstand,
     niemals groesser. */
  --nb-r-xs:   3px;
  --nb-r-sm:   6px;
  --nb-r:      10px;
  --nb-r-lg:   14px;
  --nb-r-pill: 999px;

  /* --- Bewegung --------------------------------------------------------
     Erlaubt sind opacity und transform, dazu background-color,
     border-color und color bei --nb-dauer-schnell.
     Kein Federn, kein Ueberschwingen, keine Skalierung ueber 1.0,
     kein Parallax, kein Zaehler-Hochlauf. */
  --nb-dauer-schnell: 120ms;
  --nb-dauer:         180ms;
  --nb-dauer-lang:    260ms;
  --nb-ease:      cubic-bezier(.2,.6,.35,1);
  --nb-ease-aus:  cubic-bezier(.16,1,.3,1);

  /* --- Groessen --------------------------------------------------------- */
  --nb-breite:       1120px;   /* Inhaltsbreite der Website */
  --nb-breite-text:  34rem;    /* hoechstens 68 Zeichen je Zeile */
  --nb-breite-form:  46rem;
  --nb-h-bedien:     36px;     /* Vorgabehoehe Bedienelement */
  --nb-h-bedien-kompakt: 32px;
  --nb-h-bedien-touch:   44px;
  --nb-h-kopf:       56px;     /* Kopfleiste im Portal */
  --nb-h-kopf-site:  68px;     /* Kopfleiste auf der Website */
  --nb-b-seitenleiste: 232px;
  --nb-b-seitenleiste-schmal: 56px;

  /* --- Fokus -----------------------------------------------------------
     Eine Regel fuer alles. Der Versatz zeigt den Untergrund, deshalb misst
     sich der Ring gegen --nb-grund und nicht gegen das Element darunter. */
  --nb-fokus-breite: 3px;
  --nb-fokus-versatz: 2px;
}

/* ===========================================================================
   3. RESET
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungziele nicht unter der klebenden Kopfleiste verstecken. */
  scroll-padding-top: calc(var(--nb-h-kopf-site) + var(--nb-a-3));
}

body {
  font-family: var(--nb-schrift);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  /* Farbe und Grund setzt site.css bzw. app.css — hier steht kein Farbwert. */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; padding: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* Versalien mit Umlaut brauchen Luft, sonst schneidet der Punkt an. */
[style*="uppercase"], .nb-versal { line-height: 1.35; letter-spacing: .06em; }

/* ===========================================================================
   4. GRUNDREGELN
   =========================================================================== */

/* --- Fokus ---------------------------------------------------------------
   Nie outline:none ohne Ersatz. Nie ein Fokusring in der Knopffarbe direkt
   auf dem Knopf — der waere dort unsichtbar. */
:focus { outline: none; }

:focus-visible {
  outline: var(--nb-fokus-breite) solid var(--nb-fokus);
  outline-offset: var(--nb-fokus-versatz);
  border-radius: inherit;
}

/* --- Trefflaeche ---------------------------------------------------------
   Alles Bedienbare hat mindestens 44x44px Trefflaeche, auch wenn es optisch
   36px hoch ist. Das Portal wird am Tablet an der Box bedient, teils mit
   kalten Fingern. Ueber ::before, damit das Aussehen unveraendert bleibt. */
.nb-treffer { position: relative; }

.nb-treffer::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 50%;
  translate: -50% -50%;
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

/* --- Zahlen --------------------------------------------------------------
   Tabellenziffern ueberall dort, wo Werte untereinander stehen. Ohne das
   tanzen Betraege und Zaehler beim Aktualisieren. */
table, .nb-zahl, .nb-betrag, .nb-kennzahl, .nb-zeit, time, td, th {
  font-variant-numeric: tabular-nums;
}

/* Maschinenwerte: abtippbar, vorlesbar, eindeutig getrennte 1/l/I und 0/O. */
.nb-mono {
  font-family: var(--nb-schrift-zahl);
  font-variant-ligatures: none;
  letter-spacing: 0;
}

/* --- Symbole -------------------------------------------------------------
   24er-Raster, Strichstaerke 1.5, currentColor, keine Fuellung.
   Keine Emoji, keine Symbolschriftart, keine gefuellten Piktogramme —
   auch nicht im Entwurf. */
.nb-sym {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.nb-sym--16 { width: 16px; height: 16px; }   /* Tabellen, Knoepfe */
.nb-sym--20 { width: 20px; height: 20px; }   /* Navigation */
.nb-sym--24 { width: 24px; height: 24px; }   /* nur in leeren Zustaenden */

/* --- Nur fuer Hilfstechnik ---------------------------------------------- */
.nb-nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprung zum Inhalt — erste Tabulatorstation jeder Seite. */
.nb-sprung {
  position: absolute;
  left: var(--nb-a-4);
  top: calc(-1 * var(--nb-a-10));
  z-index: 100;
  padding: var(--nb-a-2) var(--nb-a-4);
  border-radius: var(--nb-r-sm);
  transition: top var(--nb-dauer-schnell) var(--nb-ease);
}
.nb-sprung:focus-visible { top: var(--nb-a-4); }

/* --- Bewegung zuruecknehmen ----------------------------------------------
   Genau die drei Dauer-Token auf 1ms, sonst nichts. Kein !important und
   keine Sternchen-Regel — die stuende den Toolbox-Bausteinen im Weg. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nb-dauer-schnell: 1ms;
    --nb-dauer: 1ms;
    --nb-dauer-lang: 1ms;
  }
  html { scroll-behavior: auto; }
  .nb-puls { animation: none; opacity: 1; }
}

/* Die EINZIGE Dauerbewegung im ganzen System: der Punkt neben einer
   laufenden Box. Nur opacity, nichts anderes. */
@keyframes nb-puls { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.nb-puls { animation: nb-puls 2s ease-in-out infinite; }

/* ===========================================================================
   5. BILDBUEHNE — die einzige Farbausnahme dieser Datei
   Ein Foto wird nicht auf Weiss beurteilt. Live-Vorschau, Testaufnahme,
   Bildbetrachter und Miniaturen liegen deshalb in JEDEM Thema auf einer
   dunklen Buehne. Diese drei Werte sind namentlich freigegeben und die
   einzigen Farbwerte in basis.css.
   =========================================================================== */

:root {
  --nb-bildgrund:      #0B0E13;   /* Buehne hinter dem Bild */
  --nb-bildtext:       #F2F4F7;   /* Beschriftung darauf, 15,9:1 */
  --nb-bildtext-leise: #A9B2BF;   /* Zweitzeile darauf,  6,4:1 */
}

.nb-buehne {
  background: var(--nb-bildgrund);
  color: var(--nb-bildtext);
  border-radius: var(--nb-r);
  overflow: hidden;
}
.nb-buehne .nb-leise { color: var(--nb-bildtext-leise); }

/* Bildkacheln erben den Radius der Buehne, nie einen eigenen — sonst
   entstehen zwei verschiedene Rundungen nebeneinander. */
.nb-buehne img, .nb-buehne video { border-radius: inherit; }