/* NextBuy-Grund fuer den JTL-Shop, Block 3.1 (24.09.2026).
 *
 * Seit Block 3.1 laedt kein NOVA-CSS mehr (layout/header.tpl). Diese Datei
 * traegt deshalb zwei Dinge, die vorher NOVA geliefert hat:
 *
 * 1. Den Seitengrund, Schrift, Farbe, Box-Modell.
 * 2. Die Zustandsklassen, die NOVA-JS nur umschaltet. Auflage 2 aus
 *    .claude/progress/tradein/MESSUNG-block-2-3-2026-09-24.md. Ohne diese
 *    Regeln stehen Consent-Banner und Dropdowns dauerhaft offen. Die Liste
 *    ist nicht vollstaendig erhoben, gemessen sind .show, .mini,
 *    .consent-hidden, .d-none und .modal.show.
 *
 * Alle Werte aus nb-tokens-v3.css. Keine Hex-Codes.
 */

/* ---------- 1. Grund ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.nb-v3 {
  margin: 0;
  background: var(--nb-surface-page);
  color: var(--nb-text-body);
  font-family: var(--nb-font-sans);
  font-size: var(--nb-t-body-01);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* :where() haelt die Spezifitaet bei null, sonst schlaegt die Linkfarbe
   jede Bauteilklasse (am 24.09.2026 Ankauf-Knopf und Menue in Signal). */
:where(.nb-v3) img, :where(.nb-v3) svg { max-width: 100%; }
:where(.nb-v3) a { color: var(--nb-text-link); }
:where(.nb-v3) button { font: inherit; }

/* Nur fuer Screenreader. .sr-only ist der Bootstrap-Name, NOVA-Markup und
   layout/index.tpl nutzen ihn noch. */
.nb-sr, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sprunglinks, unsichtbar bis zum Fokus */
.nb-sprung {
  position: absolute;
  top: var(--nb-space-2xs);
  left: var(--nb-space-2xs);
  z-index: 1000;
  padding: var(--nb-space-2xs) var(--nb-space-s);
  border-radius: var(--nb-radius-pill);
  background: var(--nb-surface-page);
  color: var(--nb-text-heading);
  font-size: var(--nb-t-body-02);
  font-weight: var(--nb-weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}
.nb-sprung:focus { transform: none; }

/* ---------- 2. Zustandsklassen aus NOVA-JS ---------- */

.d-none { display: none !important; }
.collapse:not(.show) { display: none; }
.dropdown-menu { display: none; }
.dropdown-menu.show { display: block; }
.fade:not(.show) { opacity: 0; }
.modal { display: none; }
.modal.show { display: block; }

/* Consent. Regeln aus NOVA themes/base/sass/_base_crit.scss uebernommen.
   Das Aussehen ist Platzhalter, bis Block 5.1 die Consent-Frage klaert
   (Stufe 1 braucht kein Banner). */
.consent-modal:not(.active) { display: none; }
.mini > #consent-banner { display: none; }
.consent-banner-icon { width: 1em; height: 1em; }

/* Der Knopf fuer die Datenschutz-Einstellungen schwebt unten links, wie in
   NOVA. Ohne diese Regel stand er als leeres Kaestchen oben links. */
#consent-settings-btn {
  position: fixed;
  left: var(--nb-space-s);
  bottom: var(--nb-space-s);
  z-index: 150; /* ueber dem Kopf (100), unter der Schublade (200) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--nb-border-control);
  border-radius: var(--nb-radius-pill);
  background: var(--nb-surface-page);
  color: var(--nb-text-heading);
  box-shadow: var(--nb-sh-card);
  cursor: pointer;
}
#consent-settings-btn svg { width: 20px; height: 20px; }

#consent-banner {
  position: fixed;
  left: var(--nb-space-s);
  right: var(--nb-space-s);
  bottom: var(--nb-space-s);
  z-index: 900;
  max-width: 560px;
  padding: var(--nb-space-m);
  border-radius: var(--nb-radius-card);
  background: var(--nb-surface-page);
  box-shadow: var(--nb-sh-panel);
  font-size: var(--nb-t-body-02);
  color: var(--nb-text-body);
}
/* NOVA nennt die Knoepfe consent-btn, nicht btn. Gemessen am 24.09.2026,
   vorher renderten sie im Browser-Standard mit reinem Schwarz und 27 px. */
#consent-manager .consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: var(--nb-space-3xs) var(--nb-space-3xs) 0 0;
  padding: 0 var(--nb-space-s);
  border: 1px solid var(--nb-border-control);
  border-radius: var(--nb-radius-pill);
  background: var(--nb-surface-page);
  color: var(--nb-text-heading);
  font-weight: var(--nb-weight-semibold);
  cursor: pointer;
}
#consent-manager .btn-block, #consent-manager .consent-btn-block { width: 100%; }
#consent-manager .consent-btn-primary {
  border-color: var(--nb-action-primary);
  background: var(--nb-action-primary);
  color: var(--nb-action-primary-label);
}

/* Hinweis Wartungsmodus, sieht nur der Admin */
#maintenance-mode, #safe-mode {
  margin: 0;
  padding: var(--nb-space-2xs) var(--nb-space-s);
  background: var(--nb-warning-bg);
  border-bottom: 1px solid var(--nb-warning-border);
  color: var(--nb-warning-text);
  font-size: var(--nb-t-legal-01);
  text-align: center;
}
#maintenance-mode .close, #safe-mode .close { display: none; }