/* templates/NextBuy/themes/nextbuy/nb-fonts.css */
/* Schriften fuer das NextBuy-Child-Template.
 *
 * Vier Schnitte, exakt die aus brand/typografie.md Abschnitt 2: Gilroy 400 und 600,
 * Poynter Old Style Display Semibold aufrecht und kursiv. Die Dateien liegen lokal
 * in fonts/ und sind am 23.09.2026 aus dem Shopify-CDN gezogen worden, damit der
 * JTL-Shop nicht auf Shopify zeigt.
 *
 * ACHTUNG, gefundener Widerspruch im Shopify-Theme, hier bewusst NICHT
 * stillschweigend aufgeloest, sondern gemeldet:
 * assets/theme.css Zeile 10324 registriert die Familie als 'Poynter Old Style',
 * waehrend design-tokens.json Zeile 170 und jede CSS-Datei des Themes
 * "Poynter Old Style Display" verlangen. Im Shopify-Theme faellt Poynter damit
 * auf Georgia zurueck. Hier gilt der Name aus design-tokens.json, weil das
 * Werte-Dokument gewinnt.
 */

@font-face {
  font-family: 'Gilroy';
  src: url("/assets/schrift/gilroy-400.d39b868f83.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url("/assets/schrift/gilroy-600.d142a602ec.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Ersatzschrift ohne Sprung (typografie.md §8, gemessen 04.10.2026, Spur qualitaet, Task qa-schriftersatz).
 * Steht in jedem Gilroy-Stapel direkt hinter Gilroy. Bis Gilroy geladen ist, setzt Arial den Text mit
 * Gilroys Breite und Zeilenhoehe, damit bricht er gleich um und nichts rutscht beim Wechsel.
 * Je Schnitt eigene Werte, weil die zwei Gilroy-Dateien verschiedene Hoehenmasse haben (400: 920/240,
 * 600: 938/255 je 1000) und Gilroy 600 schmaler laeuft als Arial Bold. Breite gemessen per Canvas auf
 * dem Text von 8 Vorschauen (55 498 Zeichen in 400, 26 417 in 600), Ober- und Unterlaenge per
 * fontBoundingBox bei 1000 px. Ohne Arial (Android) faellt der Stapel wie bisher weiter. */
@font-face {
  font-family: 'GilroyFallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 400;
  font-style: normal;
  size-adjust: 100.2%;
  ascent-override: 91.8%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'GilroyFallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600;
  font-style: normal;
  size-adjust: 95.3%;
  ascent-override: 98.4%;
  descent-override: 26.8%;
  line-gap-override: 0%;
}

/* Ziffern 0 bis 9 eigens, abgestimmt auf Tabellenziffern (80 Regeln mit tabular-nums gegen 24 proportional,
 * Preise und Nummern stehen fast nur aus Ziffern). Gilroy-Tabellenziffern sind 2,5 % (400) und 3,4 % (600)
 * breiter als Arials, die Buchstabenwerte oben laegen hier 2,3 und 8,5 % daneben (HLF-Nummer bei 360 px
 * 164 gegen 151 px, Umbruch). Hoehen gleich in absoluten Werten, also Override = Gilroy-Mass / size-adjust.
 * Steht nach den allgemeinen Flaechen, weil der Browser bei ueberlappendem Bereich die spaeter angelegte nimmt. */
@font-face {
  font-family: 'GilroyFallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0030-0039;
  size-adjust: 102.5%;
  ascent-override: 89.8%;
  descent-override: 23.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'GilroyFallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600;
  font-style: normal;
  unicode-range: U+0030-0039;
  size-adjust: 103.4%;
  ascent-override: 90.7%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Poynter Old Style Display';
  src: url("/assets/schrift/poynter-600.a87bd7bad3.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poynter Old Style Display';
  src: url("/assets/schrift/poynter-600-italic.bd7b7d14ef.woff2") format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* templates/NextBuy/themes/nextbuy/nb-tokens-v3.css */
/* NextBuy Design-Tokens. Erzeugt aus brand/design-tokens.json.
 * NICHT VON HAND AENDERN. Quelle sind die gesperrten Werte-Dokumente,
 * brand/farbsystem.md, brand/typografie.md und brand/bildmarke.md.
 * Neu bauen mit: node tools/build-tokens.mjs   (Stand 2026-09-09)
 *
 * Gescoped auf .nb-v3. Alles greift nur innerhalb eines Elements mit
 * dieser Klasse, damit das laufende Theme unberuehrt bleibt.
 * Pruefen mit: node tools/build-tokens.mjs --check
 */

.nb-v3 {

  /* Layer 1, Primitives. Nie direkt im Component-CSS */
  --nb-night: #010C28;
  --nb-night-rgb: 1 12 40;
  --nb-signal-500: #5850FF;
  --nb-signal-700: #473BDA;
  --nb-signal-800: #382DB3;
  --nb-sky-300: #EDF0FE;
  --nb-sky-500: #9DAEF7;
  --nb-sky-700: #7887CD;
  --nb-sky-stage: #E4E9FE;
  --nb-lime: #D4FA64;
  --nb-white: #FFFFFF;
  --nb-page: #F6F7FB;
  --nb-canvas: #F7F5F0;
  --nb-hero-base: #E9EAEC;
  /* ink-50 ist der getönte Seitengrund K1 (Daniel 30.09.2026, ENTSCHEIDE-flaechen-kontrast-2026-09-30.md E1) */
  --nb-ink-50: #F9FAFC;
  --nb-ink-100: #F2F4F7;
  --nb-ink-200: #E3E6EC;
  --nb-ink-300: #CDD1D8;
  --nb-ink-400: #9FA3AB;
  --nb-ink-500: #777C84;
  --nb-ink-600: #5E646D;
  --nb-ink-700: #474D58;
  --nb-ink-800: #2B3140; /* 04.10.2026, Textgrau wie Back Market, 12,44:1 auf ink-50 */
  --nb-dark-surface: #17243A;
  --nb-dark-border: #25334A;
  --nb-dark-control: #949AA6;
  --nb-on-dark-1: #F7F5F0;
  --nb-on-dark-2: #B3B7C1;
  --nb-on-dark-3: #8C929F;
  --nb-mint: #83E1B6;
  --nb-mint-ink: #055522;
  --nb-coral: #FF5E56;
  --nb-coral-700: #C1272D;
  --nb-night-rgb: 1 12 40;

  /* Rueckmeldungsfarben */
  --nb-success-bg: #DAFCE2;
  --nb-success-border: #A7DDB4;
  --nb-success-solid: #3D9C5E;
  --nb-success-text: #247D46;
  --nb-warning-bg: #FFEFDD;
  --nb-warning-border: #ECCB9E;
  --nb-warning-solid: #EDB345;
  --nb-warning-text: #956011;
  --nb-critical-bg: #FFEBE8;
  --nb-critical-border: #F3BFBA;
  --nb-critical-solid: #C4403D;
  --nb-critical-text: #B7443D;

  /* Layer 2, Semantic Aliases. Pflicht-Quelle fuer Component-CSS */
  --nb-surface-page: #FFFFFF;
  /* Seitengrund K1, getönt. Karten darauf weiß ohne Rand, Bühne ink-100 (Umkehr-Regel E2) */
  --nb-surface-base: var(--nb-ink-50);
  --nb-surface-secondary: #F6F7FB;
  --nb-surface-warm: #F7F5F0;
  --nb-surface-info: #EDF0FE;
  --nb-surface-stage: #E4E9FE;
  --nb-surface-dark: #010C28;
  --nb-surface-dark-raised: #17243A;
  --nb-surface-component: #F2F4F7;
  --nb-text-heading: #010C28;
  --nb-text-body: var(--nb-ink-800); /* bis 04.10.2026 ink-700 */
  --nb-text-muted: var(--nb-ink-700); /* bis 04.10.2026 ink-600 */
  --nb-text-accent: #473BDA;
  --nb-text-link: #473BDA;
  --nb-text-on-dark: #F7F5F0;
  --nb-text-on-dark-muted: #B3B7C1;
  --nb-text-on-dark-accent: #D4FA64;
  --nb-text-on-dark-link: #9DAEF7;
  --nb-text-on-lime: #010C28;
  --nb-text-on-signal: #FFFFFF;
  --nb-action-primary: #5850FF;
  --nb-action-primary-hover: #473BDA;
  --nb-action-primary-active: #382DB3;
  --nb-action-primary-label: #FFFFFF;
  --nb-action-bar-surface: #010C28;
  --nb-action-bar-button: #D4FA64;
  --nb-action-bar-button-label: #010C28;
  --nb-border-hairline: #E3E6EC;
  --nb-border-control: #777C84;
  --nb-border-dark-hairline: #25334A;
  --nb-border-dark-control: #949AA6;

  /* Alpha-Leiter, immer auf night-rgb, nie auf Schwarz */
  --nb-alpha-hairline: rgb(var(--nb-night-rgb) / 0.06);
  --nb-alpha-decorative: rgb(var(--nb-night-rgb) / 0.15);
  --nb-alpha-control: rgb(var(--nb-night-rgb) / 0.25);
  --nb-alpha-scrim: rgb(var(--nb-night-rgb) / 0.4);

  /* Schatten K1 (Daniel 30.09.2026, E1), gemessen an Back Market: ruht, Hover oder angehoben, nur Schwebendes.
     Karten ohne Rand, Hover nur der stärkere Schatten. Für jeden neuen Bau */
  --nb-sh-ruht: 0 2px 4px rgb(0 0 0 / .05);
  --nb-sh-hoch: 0 4px 8px rgb(0 0 0 / .08);
  --nb-sh-schwebt: 0 8px 16px rgb(0 0 0 / .12);

  /* Schatten bis 30.09.2026. Abgelöst durch sh-ruht, sh-hoch, sh-schwebt, bleiben bis zum Port jeder Seite */
  --nb-sh-card: 0 1px 2px rgb(0 0 0 / .05), 0 2px 6px rgb(0 0 0 / .05);
  --nb-sh-raised: 0 1px 0 rgb(0 0 0 / .06), 0 10px 30px -16px rgb(0 0 0 / .2);
  --nb-sh-panel: 0 2px 4px rgb(0 0 0 / .05), 0 18px 44px -20px rgb(0 0 0 / .34);
  --nb-sh-float: 0 16px 40px -14px rgb(0 0 0 / .5);

  /* Radius, 8er-Leiter */
  --nb-radius-badge: 8px;
  --nb-radius-input: 16px;
  --nb-radius-card: 24px;
  --nb-radius-container: 32px;
  --nb-radius-hero: 48px;
  --nb-radius-pill: 999px;

  /* Abstaende, 8er-Leiter plus drei Sektionsstufen */
  --nb-space-3xs: 4px;
  --nb-space-2xs: 8px;
  --nb-space-xs: 12px;
  --nb-space-s: 16px;
  --nb-space-m: 24px;
  --nb-space-l: 32px;
  --nb-space-xl: 48px;
  --nb-space-2xl: 64px;
  --nb-space-sektion-band: clamp(24px, 20.33px + 0.94vw, 32px);
  --nb-space-sektion-normal: clamp(56px, 37.65px + 4.71vw, 96px);
  --nb-space-sektion-gross: clamp(80px, 50.64px + 7.53vw, 144px);

  /* Motion, eine Kurve fuer alles */
  --nb-motion-kurve: cubic-bezier(.4, 0, .2, 1);
  --nb-motion-farbe: 200ms;
  --nb-motion-rand: 250ms;
  --nb-motion-transform: 300ms;
  --nb-motion-reveal: 600ms;
  --nb-motion-skeleton-sweep: 1200ms;

  /* Schrift */
  --nb-font-sans: Gilroy, GilroyFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nb-font-serif: "Poynter Old Style Display", Georgia, "Times New Roman", serif;
  --nb-weight-regular: 400;
  --nb-weight-semibold: 600;

  /* Typo-Skala als Rollen-Tokens */
  --nb-t-display-01: clamp(40px, 32.7px + 1.88vw, 56px);
  --nb-t-display-02: clamp(30px, 25.4px + 1.18vw, 40px);
  --nb-t-heading-01: clamp(24px, 22.2px + 0.47vw, 28px);
  --nb-t-heading-02: clamp(18px, 17.1px + 0.24vw, 20px);
  --nb-t-heading-03: 16px;
  --nb-t-body-01: 16px;
  --nb-t-body-02: 14px;
  --nb-t-label-01: 11px;
  --nb-t-legal-01: 12px;
  --nb-t-price-01: clamp(28px, 25.2px + 0.71vw, 34px);
  --nb-t-price-02: 16px;

  /* Layout */
  --nb-container: 1200px;
  --nb-measure: 65ch;
  --nb-breakpoint-desktop: 1240px;
  --nb-breakpoint-mobil: 390px;
}

/* Rollen-Klassen. Das Tag ist Semantik, die Rolle ist Gestaltung. */
.nb-v3 .nb-display-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-display-01); font-weight: var(--nb-weight-semibold); line-height: 1.05; letter-spacing: -0.03em; color: var(--nb-text-heading); }
.nb-v3 .nb-display-02 { font-family: var(--nb-font-sans); font-size: var(--nb-t-display-02); font-weight: var(--nb-weight-semibold); line-height: 1.08; letter-spacing: -0.03em; color: var(--nb-text-heading); }
.nb-v3 .nb-heading-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-heading); }
.nb-v3 .nb-heading-02 { font-family: var(--nb-font-sans); font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--nb-text-heading); }
.nb-v3 .nb-heading-03 { font-family: var(--nb-font-sans); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; letter-spacing: 0; color: var(--nb-text-heading); }
.nb-v3 .nb-body-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-regular); line-height: 1.5; letter-spacing: 0; color: var(--nb-text-body); }
.nb-v3 .nb-body-02 { font-family: var(--nb-font-sans); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); line-height: 1.45; letter-spacing: 0; color: var(--nb-text-muted); }
.nb-v3 .nb-label-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); line-height: 1; letter-spacing: 0.12em; color: var(--nb-text-muted); text-transform: uppercase; }
.nb-v3 .nb-legal-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-regular); line-height: 1.5; letter-spacing: 0; color: var(--nb-text-muted); }
.nb-v3 .nb-price-01 { font-family: var(--nb-font-sans); font-size: var(--nb-t-price-01); font-weight: var(--nb-weight-semibold); line-height: 1; letter-spacing: -0.03em; color: var(--nb-text-heading); font-variant-numeric: lining-nums; }
.nb-v3 .nb-price-02 { font-family: var(--nb-font-sans); font-size: var(--nb-t-price-02); font-weight: var(--nb-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--nb-text-heading); font-variant-numeric: lining-nums; }
/* Ziffern proportional außerhalb von Tabellen und Rechner (typografie.md §6, Daniel 26.09.2026). Tabellen, Warenkorb, Kasse und Rechner setzen tabular-nums selbst (nb-tradein.css) */

/* Kern-Code 3, das kursive Akzentwort. Kein Unterstrich, gestrichen 2026-09-05. */
.nb-v3 .nb-display-01 em, .nb-v3 .nb-display-02 em { font-family: var(--nb-font-serif); font-style: italic; font-weight: var(--nb-weight-semibold); color: var(--nb-text-accent); }
.nb-v3 .nb-auf-dunkel .nb-display-01 em, .nb-v3 .nb-auf-dunkel .nb-display-02 em { color: var(--nb-text-on-dark-accent); }

/* Fokus, WCAG-Technik G195. Kein border-radius-Reset, er quetscht jede Pille. */
.nb-v3 :focus-visible { outline: 2px solid #010C28; outline-offset: 3px; box-shadow: 0 0 0 5px #FFFFFF; }
/* Ziele mit tabindex="-1" (main fuer den Sprunglink, Fenster) sind keine Bedienelemente. Ein Klick auf eine leere
   Flaeche setzt dort den Fokus, und ein Druck auf Shift zeichnete den Ring um die ganze Seite (Daniel 28.09.2026) */
.nb-v3 [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .nb-v3 *, .nb-v3 *::before, .nb-v3 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* templates/NextBuy/themes/nextbuy/nb-basis.css */
/* 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; }

/* templates/NextBuy/themes/nextbuy/nb-feld.css */
/* Formular-System. Jedes Eingabefeld, jede Suche, jede Aufklappliste und jeder Feldfehler im Shop.
   Werte: ../nextbuy-brand/brand/komponenten-formular.md (gesperrt am 27.09.2026, Daniel).
   Referenz-Umsetzung: baukasten/sektionen/feldstil, suchstil, auswahlstil, fehlerstil. Gewählt sind Feld D (neutral),
   Suche E (neutral), Liste B (gewählte Zeile ohne Fläche), Fehler B (ganzes Feld zart rot).
   Fünf Grundsätze: graue Fläche ohne Rahmen, Label im Feld, beim Klick wird nur das angeklickte Feld einen Hauch
   dunkler, Auswahl immer als eigenes Bauteil, Fehler färben das ganze Feld.
   Nie outline, nie Ring, nie Schein. Zwei Klassen plus Zustand, damit keine globale Fokusregel greift.
   Der Cursor ist Night wie die Schrift, nie Lila (Daniel 27.09.2026: „das geht gar nicht“). */

/* ---------- Eingabefeld (m-feld) ---------- */
.nb-fl {
  --fl-hoehe: 56px;
  --fl-grund: var(--nb-ink-100);
  --fl-grund-aktiv: var(--nb-ink-200);
  --fl-label: var(--nb-text-body);
  --fl-label-oben: var(--nb-text-muted);
  --fl-label-fokus: var(--nb-text-heading);
  display: grid; gap: var(--nb-space-2xs); align-content: start; min-width: 0;
}
.nb-fl[hidden] { display: none; }
.nb-fl__rahmen { position: relative; border-radius: var(--nb-radius-input); }
.nb-fl__eingabe {
  box-sizing: border-box; display: block; width: 100%; height: var(--fl-hoehe); margin: 0;
  padding: 24px var(--nb-space-s) 6px;
  border: 1px solid transparent; border-radius: var(--nb-radius-input);
  background: var(--fl-grund); color: var(--nb-text-heading); caret-color: var(--nb-text-heading);
  font: inherit; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; outline: none; box-shadow: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-fl__label {
  position: absolute; left: calc(var(--nb-space-s) + 1px); top: 16px; max-width: calc(100% - 2 * var(--nb-space-s));
  font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0; text-transform: none; color: var(--fl-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  transform-origin: left top;
  transition: transform var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
/* Label oben: Fokus, hat Wert (placeholder=" "), Autofill, Auswahl mit Wert */
.nb-fl__eingabe:is(:focus, :not(:placeholder-shown), :autofill, :-webkit-autofill) + .nb-fl__label,
.nb-fl.is-auswahl:not(.is-leer) .nb-fl__label,
.nb-dd.is-offen .nb-fl__label { transform: translateY(-10px) scale(.75); color: var(--fl-label-oben); }

/* Hover und Fokus: nur die Fläche, einen Hauch dunkler. Der Knopf einer Aufklappliste wird im Fokus nur per
   Tastatur dunkler (:focus-visible). Nach einer Wahl mit der Maus behält er den Fokus, und mit :focus blieb das
   erledigte Feld dunkel stehen, als wäre es dran (Daniel 27.09.2026, Fassung C) */
.nb-fl .nb-fl__eingabe:hover:not(:disabled) { background: var(--fl-grund-aktiv); }
.nb-fl .nb-fl__eingabe:is(:focus, :focus-visible) { outline: none; box-shadow: none; border-color: transparent; }
.nb-fl .nb-fl__eingabe:not(.nb-dd__knopf):focus, .nb-fl .nb-fl__eingabe:focus-visible { background: var(--fl-grund-aktiv); }
.nb-fl .nb-fl__eingabe:not(.nb-dd__knopf):focus + .nb-fl__label, .nb-dd.is-offen .nb-fl__label { color: var(--fl-label-fokus); }
/* Autofill färbt Chrome hellblau, auch im Fokus. Der innere Schatten füllt die Fläche grau, er ist kein Ring */
.nb-fl .nb-fl__eingabe:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) { -webkit-box-shadow: inset 0 0 0 40px var(--fl-grund) !important; box-shadow: inset 0 0 0 40px var(--fl-grund) !important; -webkit-text-fill-color: var(--nb-text-heading); transition: background-color 600000s 0s, color 600000s 0s; }
.nb-fl .nb-fl__eingabe:autofill { box-shadow: inset 0 0 0 40px var(--fl-grund) !important; }

/* Hilfetext und Meldung darunter */
.nb-fl__hilfe { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-fl__fehler { display: none; align-items: flex-start; gap: var(--nb-space-2xs); margin: 0; font-size: 13px; line-height: 1.45; color: var(--nb-critical-text); }
.nb-fl__fehler svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.nb-fl.is-fehler .nb-fl__fehler { display: flex; }

/* Fehler: das ganze Feld critical-bg, auch in Hover und Fokus, Label critical-text. Kein Rahmen, keine Linie */
.nb-fl.is-fehler .nb-fl__eingabe,
.nb-fl.is-fehler .nb-fl__eingabe:is(:hover, :focus, :focus-visible) { background: var(--nb-critical-bg); }
.nb-fl.is-fehler .nb-fl__eingabe:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 40px var(--nb-critical-bg) !important; box-shadow: inset 0 0 0 40px var(--nb-critical-bg) !important; }
.nb-fl.is-fehler .nb-fl__label, .nb-fl.is-fehler .nb-fl__eingabe:focus + .nb-fl__label { color: var(--nb-critical-text); }

/* Gesperrt: dieselbe Fläche, halb durchsichtig */
.nb-fl:has(.nb-fl__eingabe:disabled) { opacity: .5; }
.nb-fl .nb-fl__eingabe:disabled { cursor: not-allowed; }

/* Passwort mit Auge, Trefferfläche 44 px */
.nb-fl.has-auge .nb-fl__eingabe { padding-right: 56px; }
.nb-fl__auge { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; transform: translateY(-50%); padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: none; color: var(--nb-ink-500); cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-fl__auge svg { width: 20px; height: 20px; }
.nb-fl__auge:hover, .nb-fl__auge[aria-pressed="true"] { color: var(--nb-text-heading); }
.nb-fl__auge:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ---------- Aufklappliste (m-auswahl) ---------- */
.nb-dd { position: relative; }
.nb-dd__knopf { display: block; padding-right: 48px; text-align: left; cursor: pointer; }
.nb-dd__wert { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nb-dd.is-offen .nb-dd__knopf { background: var(--fl-grund-aktiv); }
.nb-dd.is-fehler.is-offen .nb-dd__knopf { background: var(--nb-critical-bg); }
.nb-dd .nb-dd__knopf:focus-visible + .nb-fl__label { color: var(--fl-label-fokus); }
/* Ein Knopf hat keinen Platzhalter, :not(:placeholder-shown) trifft ihn immer. Leer und zu bleibt das Label groß */
.nb-dd.is-leer:not(.is-offen) .nb-fl__label { transform: none; }
.nb-dd.is-leer:not(.is-offen):not(.is-fehler) .nb-fl__label { color: var(--fl-label); }
.nb-dd.is-fehler .nb-fl__label, .nb-dd.is-fehler .nb-dd__knopf:focus + .nb-fl__label { color: var(--nb-critical-text); }
.nb-fl__pfeil { position: absolute; right: var(--nb-space-s); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--nb-text-heading); pointer-events: none; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-dd.is-offen .nb-fl__pfeil { transform: translateY(-50%) rotate(180deg); }
/* Die offene Liste liegt über allem, was folgt, etwa einer klebenden Knopfleiste */
.nb-dd.is-offen { z-index: 7; }

.nb-dd__karte {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input);
  box-shadow: 0 2px 4px rgb(0 0 0 / .04), 0 18px 44px -20px rgb(0 0 0 / .18);
  animation: nb-dd-rein var(--nb-motion-farbe) var(--nb-motion-kurve) both;
}
.nb-dd__karte[hidden] { display: none; }
.nb-dd__liste { box-sizing: border-box; max-height: 380px; overflow: auto; margin: 0; padding: var(--nb-space-2xs); list-style: none; outline: none; }
.nb-dd__gruppe { padding: var(--nb-space-xs) var(--nb-space-s) var(--nb-space-3xs); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--nb-text-muted); }
.nb-dd__gruppe:not(:first-child) { margin-top: var(--nb-space-2xs); padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); }
.nb-dd__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs); min-height: 44px;
  padding: var(--nb-space-2xs) var(--nb-space-s); border-radius: var(--nb-radius-badge);
  font-size: 16px; font-weight: 500; color: var(--nb-text-heading); cursor: pointer; user-select: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-dd__option:hover, .nb-dd__option.is-aktiv { background: var(--nb-ink-100); }
/* Gewählt: keine Fläche, Semibold, Haken Night, auch direkt nach dem Öffnen */
.nb-dd__option[aria-selected="true"] { font-weight: var(--nb-weight-semibold); }
.nb-dd__option[aria-selected="true"].is-aktiv:not(:hover) { background: none; }
.nb-dd__haken { display: grid; width: 20px; height: 20px; flex: none; color: var(--nb-text-heading); opacity: 0; }
.nb-dd__haken svg { width: 20px; height: 20px; }
.nb-dd__option[aria-selected="true"] .nb-dd__haken { opacity: 1; }
@keyframes nb-dd-rein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Suchleiste (m-suche) ---------- */
.nb-su { --su-hoehe: 48px; position: relative; display: flex; align-items: center; width: 100%; min-width: 0; }
.nb-su--gross { --su-hoehe: 56px; }
.nb-su__eingabe {
  box-sizing: border-box; flex: 1; width: 100%; height: var(--su-hoehe); margin: 0; padding: 0 48px 0 50px;
  border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-ink-100);
  font: inherit; font-size: 16px; color: var(--nb-text-heading); caret-color: var(--nb-text-heading);
  -webkit-appearance: none; appearance: none; outline: none; box-shadow: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-su__eingabe::-webkit-search-cancel-button, .nb-su__eingabe::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.nb-su__eingabe::placeholder { color: var(--nb-text-body); opacity: 1; }
.nb-su .nb-su__eingabe:hover, .nb-su .nb-su__eingabe:is(:focus, :focus-visible) { outline: none; box-shadow: none; border: 0; background: var(--nb-ink-200); }
.nb-su--gross .nb-su__eingabe { padding-right: 132px; }
/* Die Lupe ist der Knopf zum Suchen, 44 px Trefferfläche, ohne Fläche. Fokusring nur per Tastatur */
.nb-su__lupe { position: absolute; left: 3px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; transform: translateY(-50%); color: var(--nb-text-heading); cursor: pointer; }
.nb-su--gross .nb-su__lupe { left: 6px; }
.nb-su__lupe svg { width: 20px; height: 20px; }
.nb-su__lupe:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.nb-su__lupe:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }
/* Wechselnde Beispiele im leeren Feld, aria-hidden. Beim Antippen oder mit Wert weg */
.nb-su__beispiel { position: absolute; left: 50px; right: 48px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--nb-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-su--gross .nb-su__beispiel { right: 132px; }
.nb-su__eingabe:is(:focus, :not(:placeholder-shown)) ~ .nb-su__beispiel { opacity: 0; }
.nb-su__beispiel b { display: inline-block; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-su__beispiel b.is-weg { opacity: 0; transform: translateY(6px); }
/* x zum Löschen: erscheint mit Wert. Unsichtbar heißt auch nicht per Tab erreichbar */
.nb-su__leeren { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; transform: translateY(-50%); margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--nb-ink-500); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-farbe); }
.nb-su__leeren svg { width: 18px; height: 18px; }
.nb-su__leeren:hover { color: var(--nb-text-heading); }
.nb-su__leeren:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.nb-su__eingabe:not(:placeholder-shown) ~ .nb-su__leeren { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nb-su--gross .nb-su__leeren { right: 100px; }
.nb-su__knopf { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 var(--nb-space-m); }
.nb-su-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .nb-fl__eingabe, .nb-fl__label, .nb-fl__pfeil, .nb-fl__auge, .nb-dd__option,
  .nb-su__eingabe, .nb-su__beispiel, .nb-su__beispiel b, .nb-su__leeren { transition: none !important; }
  .nb-dd__karte { animation: none !important; }
}

/* baukasten/kern/schale.css */
/* Baukasten-Schale. Gilt für jede Sektion jeder Seite, damit alles ein System ist:
   eine linke Kante, zwei Breiten, zwei Sektionsköpfe, zwei Karten, ein Abstand.
   Nur Token aus nb-tokens-v3.css. Schwellen nur 768, 1100 und 1400.

   Kante L = max(Rand, (Fensterbreite − 1200) / 2). Rand 16 / 32 / 48 px.
   Bei 1440 px liegt jede Inhaltskante bei 120 px, bei 390 px bei 16 px. */

/* Maße gelten für die ganze Seite, auch für Kopf und Fuß außerhalb von main */
.nb-v3 {
  --nb-s-rand: var(--nb-space-s);
  --nb-s-breit: var(--nb-container);
  --nb-s-schmal: 720px;
  --nb-s-panel-schatten: 0 2px 4px rgb(0 0 0 / .04), 0 18px 44px -20px rgb(0 0 0 / .18);
}
@media (min-width: 768px) { .nb-v3 { --nb-s-rand: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-v3 { --nb-s-rand: var(--nb-space-xl); } }

.nb-bk {
  --nb-s-grund: var(--nb-surface-page);
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: var(--nb-border-hairline);
  --nb-s-karte-schatten: var(--nb-sh-card);
  --nb-s-abstand: var(--nb-space-sektion-normal);
  display: flow-root;
  background: var(--nb-s-grund);
  color: var(--nb-text-body);
  font-family: var(--nb-font-sans);
}

/* Seitengrund wie im Rechner. Bricht komponenten-tradein.md:511 und farbsystem.md:308, gewollt zum Vergleich */
.nb-bk[data-nb-grund="rechner"] {
  --nb-s-grund: var(--nb-surface-secondary);
  --nb-s-karte-schatten: var(--nb-s-panel-schatten);
}

/* Seitengrund in vier Fassungen für Konto und Kasse (Werkstatt konto-verkauf-detail Runde 2, Daniel 30.09.2026: „keine
   Tiefe … versuch es doch mal mit der background color f8f9fc“, Recherche RECHERCHE-tiefe-grund-karte-2026-09-30.md).
   Alle brechen farbsystem.md:352 („Karten sind weiß auf Weiß“). Freie Werte von Back Market und rebuy, weil es dafür
   keinen Token gibt. --nb-s-karte-schatten-hoch ist der Schatten für Hover und angehobene Karten */
.nb-bk { --nb-s-karte-schatten-hoch: 0 4px 12px rgb(0 0 0 / .08); }
/* bm · Back Market: Grund #F8F9FC (surface-default-mid), Karte weiß ohne Rand, Schatten 0 2px 4px / .05.
   Rand #DFE1E7 am 30.09.2026 raus: Back Markets Produktkacheln haben border 0 (gemessen in Daniels Chrome), und
   Daniel: „kannst du es mal so anpassen, dass backmarkets auch keinen rand hat?“ */
.nb-bk[data-nb-grund="bm"] {
  --nb-s-grund: #F8F9FC;
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: transparent;
  --nb-s-karte-schatten: 0 2px 4px rgba(17, 15, 21, .05);
  --nb-s-karte-schatten-hoch: 0 4px 8px rgba(17, 15, 21, .08);
  /* Schwebendes (Suchtreffer, Menü, Fenster), BM shadow-long */
  --nb-s-panel-schatten: 0 8px 16px rgba(17, 15, 21, .12);
}
/* grau · Grund ink-100 #F2F4F7 wie Apple und Carbon (1,10:1), Karte weiß ohne Rand, Schatten weich wie Back Market */
.nb-bk[data-nb-grund="grau"] {
  --nb-s-grund: var(--nb-ink-100);
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: transparent;
  --nb-s-karte-schatten: 0 2px 4px rgba(17, 15, 21, .05);
  --nb-s-karte-schatten-hoch: 0 4px 8px rgba(17, 15, 21, .08);
}
/* rebuy · Grund weiß, Karte ohne Rand, Kontur-Schatten 28 % bei 1 px plus weicher Schatten 16 % (rgb 47,47,47 als Night) */
.nb-bk[data-nb-grund="rebuy"] {
  --nb-s-grund: var(--nb-surface-page);
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: transparent;
  --nb-s-karte-schatten: 0 0 1px rgb(0 0 0 / .28), 0 1px 6px rgb(0 0 0 / .16);
  --nb-s-karte-schatten-hoch: 0 0 1px rgb(0 0 0 / .32), 0 4px 12px rgb(0 0 0 / .18);
}
/* Im Konto folgt jede Karte dem Grund: Karte e, S-Prüfliste, S-Auswahl-aufklappend, Detail-Blöcke, Tabellen und Kacheln,
   die direkt auf dem Grund stehen. .nb-f-karte liest die Variablen selbst (kern/formular.css) */
.nb-konto-seite :is(.nb-pr__liste, .nb-az__wahl--liste, .nb-vdl-b, .nb-vdb-t, .nb-vdz__panel, .nb-vdg-c li, .nb-vdd-c a) {
  background: var(--nb-s-karte-grund); border-color: var(--nb-s-karte-rand); box-shadow: var(--nb-s-karte-schatten);
}

/* ---------- Flächen-System in drei Leitern (Daniel 30.09.2026, KRITIK-konto-verkauf-detail §4: „keine broder …
   mehr mit schatten arbeiten“, eigener Seitengrund, die graue Bühne behält ihren Effekt).
   Herleitung und Zahlen in .claude/progress/tradein/baukasten/RECHERCHE-flaechen-system-2026-09-30.md §3 und §4.
   Karte immer #FFFFFF ohne Rand, Tiefe nur über Schatten, Hover nur stärkerer Schatten, nie Rand.
   Die Schatten sind die Vorschläge aus §4 als LOKALE Variablen. nb-tokens-v3.css bleibt unverändert, bis Daniel wählt.
   Alle drei brechen farbsystem.md:241 und :352 (Seite weiß, Karten weiß auf Weiß mit Haarlinie), K3 dazu §3
   („ink-100 nie Seitengrund“). Die Bühne liest --nb-s-buehne (sektionen/buehne/sektion.css). ---------- */
.nb-bk { --nb-s-buehne: var(--nb-surface-secondary); }
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) {
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: transparent;
  /* Schatten nach Back Market, gemessen in Daniels Chrome am 30.09.2026 auf backmarket.de (Produktkacheln
     „shadow-short“, Hover „hover:shadow-middle“, Listen „shadow-long“, ohne Übergang, Grund bleibt weiß).
     Daniel: „der ist viel zu intensiv … der schatten wird immer minimal stärker beim hovern“. Farbe Night statt
     Back Markets rgb(17,15,21), Deckkraft und Maße gleich. Vorher 0,08/0,18/0,24 zweiteilig, verworfen. */
  /* Karte ruht, BM shadow-short */
  --nb-s-karte-schatten: var(--nb-sh-ruht);
  /* Hover und angehoben, BM shadow-middle */
  --nb-s-karte-schatten-hoch: var(--nb-sh-hoch);
  /* Rechner-Karte, Liste, Fenster, BM shadow-long */
  --nb-s-panel-schatten: var(--nb-sh-schwebt);
}
/* k1 „Leise“, Back-Market-Niveau, seit 30.09.2026 gewählt (ENTSCHEIDE-flaechen-kontrast-2026-09-30.md E1), Grund ink-50 */
.nb-bk[data-nb-grund="k1"] { --nb-s-grund: var(--nb-surface-base); --nb-s-buehne: var(--nb-ink-100); }
/* k2 „Mitte“, Empfehlung. Grund ist page (surface-secondary). BRUCH: Bühne #EEF0F6 ist eine neue Stufe
   (L 95,53 / C 0,0083 / H 271), kein Token */
.nb-bk[data-nb-grund="k2"] { --nb-s-grund: var(--nb-surface-secondary); --nb-s-buehne: #EEF0F6; }
/* k3 „Kräftig“, Apple-Niveau. BRUCH: ink-100 als Seitengrund (farbsystem.md §3 „nie Seitengrund“) */
.nb-bk[data-nb-grund="k3"] { --nb-s-grund: var(--nb-ink-100); --nb-s-buehne: var(--nb-ink-200); }
/* Rand ganz weg statt durchsichtig: ein transparenter 1-px-Rand ließ die weiße Kartenfläche als weißen Ring um das
   Kachelbild stehen (Daniel 30.09.2026: „hast du einen weißen rand um die karten gemacht?“) */
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) :is(.nb-s-kachel:not(.nb-s-kategorien--im-bild *), .nb-s-buehne__direkt a, .nb-bd--karte, .nb-vd-foto, .nb-vdh-c__mail, .nb-s-karte, .nb-s-karte--panel, .nb-s-suche__treffer, .nb-kr--menue, .nb-vk-fenster, .nb-vdz__fenster, .nb-ad__fenster, .nb-f-karte, .nb-vk, .nb-pr__liste, .nb-az__wahl--liste, .nb-vdl-b, .nb-vdb-t, .nb-vdz__panel, .nb-vdg-c li, .nb-vdd-c a) { border-width: 0; }
/* Konto auf K1 nach der Umkehr-Regel (G29, ENTSCHEIDE-flaechen-kontrast E2): ink-100 direkt auf dem Grund hat 1,055:1
   und verschwindet. Der aktive Reiter und der Hover werden weiß, der aktive trägt den ruhenden Schatten. Der Bildkasten
   im Detail-Kopf wird eine weiße Kachel mit ruhendem Schatten (known_issues flaechen-k1, Daniel 30.09.2026) */
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-kr--seite a:hover { background: var(--nb-surface-page); }
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-kr--seite a[aria-current="page"] { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-vdk__bild:not(.nb-vdk__bild--gross) { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
/* Zusagen-Kasten in den Leitern wie Back Markets Vorteilsleiste (Daniel 30.09.2026: „nimm grau, einfach das hier von
   backmarket“, gemessen auf backmarket.de: Leiste #F2F3F7, Radius 12, Innenabstand 12, Abstand 12, Icon 24 in weißer
   Kachel 40 x 40 mit Radius 8, keine Trennlinien). Grau bleibt ink-100, die weiße Kachel trägt den Kontrast.
   Radius 16 statt 12, nächste Stufe der Skala */
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten {
  gap: var(--nb-space-xs); padding: var(--nb-space-xs); border-radius: var(--nb-radius-input); background: var(--nb-ink-100);
}
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten .nb-s-zusage {
  gap: var(--nb-space-xs); padding: 0; border: 0;
}
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten .nb-s-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page);
}

/* Welche Bauteile dem Grund folgen: alle Fassungen außer weiss (heute) und rechner */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"], [data-nb-grund="grau"], [data-nb-grund="rebuy"]) :is(.nb-s-kachel:not(.nb-s-kategorien--im-bild *), .nb-s-buehne__direkt a, .nb-bd--karte, .nb-vd-foto, .nb-vdh-c__mail) {
  background: var(--nb-s-karte-grund); border-color: var(--nb-s-karte-rand); box-shadow: var(--nb-s-karte-schatten);
  transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), transform var(--nb-motion-rand) var(--nb-motion-kurve);
}
/* Konto-Band trägt seinen Warnstreifen links als inset-Schatten weiter */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"], [data-nb-grund="grau"], [data-nb-grund="rebuy"]) .nb-bd--karte { box-shadow: var(--nb-s-karte-schatten), inset 4px 0 0 var(--nb-warning-solid); }
/* Hover: nie Rand, nie Tönung, nur der stärkere Schatten */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"], [data-nb-grund="grau"], [data-nb-grund="rebuy"]) :is(a.nb-s-kachel:not(.nb-s-kategorien--im-bild *), .nb-s-buehne__direkt a, .nb-vd-foto, .nb-vdd-c a):hover {
  background: var(--nb-s-karte-grund); border-color: var(--nb-s-karte-rand); box-shadow: var(--nb-s-karte-schatten-hoch);
}
/* Panel, Liste, Fenster: ohne Rand, sh-panel neu */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"]) :is(.nb-s-suche__treffer, .nb-kr--menue, .nb-vk-fenster, .nb-vdz__fenster, .nb-ad__fenster) {
  border-color: transparent; box-shadow: var(--nb-s-panel-schatten);
}
/* Große Karten auf der Seite (Bühnen-Karte, Angebot, Stimmen, Kontakt, Schluss) wie Back Market nur mit dem leichten
   Kartenschatten. Den kräftigen nimmt nur, was schwebt: Suchtreffer, Menü, Fenster (Daniel 30.09.2026) */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"]) :is(.nb-s-karte, .nb-s-karte--panel) { border-color: transparent; box-shadow: var(--nb-s-karte-schatten); }

/* Jede Sektion: volle Breite, Inhalt an der einen Kante */
.nb-s { position: relative; margin-block: var(--nb-s-abstand); }
.nb-s[data-nb-flaeche="voll"] { margin-block: 0; padding-block: var(--nb-space-sektion-gross); }
.nb-s__innen { padding-inline: max(var(--nb-s-rand), (100% - var(--nb-s-breit)) / 2); }
.nb-s[data-nb-breite="schmal"] .nb-s__innen > * { max-width: var(--nb-s-schmal); }

/* Sektionskopf in zwei festen Formen: funktional (heading-01) und erzählend (display-02). Immer links. */
.nb-s-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--nb-space-2xs) var(--nb-space-m); margin-block-end: var(--nb-space-m); }
.nb-s-kopf--erzaehlend { margin-block-end: var(--nb-space-l); }
.nb-s-kopf__text { display: grid; gap: var(--nb-space-2xs); max-width: 60ch; }
.nb-v3 .nb-s-kopf h2 { margin: 0; text-wrap: balance; }
.nb-v3 .nb-s-kopf p { margin: 0; }
.nb-s-kopf__link { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--nb-ink-300); white-space: nowrap; }
.nb-s-kopf__link:hover { text-decoration-color: currentColor; }

/* Karten in zwei Formen: mit Haarlinie und leichtem Schatten, oder als Panel mit dem Rechner-Schatten */
.nb-s-karte { background: var(--nb-s-karte-grund); border: 1px solid var(--nb-s-karte-rand); border-radius: var(--nb-radius-card); box-shadow: var(--nb-s-karte-schatten); }
.nb-s-karte--panel { box-shadow: var(--nb-s-panel-schatten); }
.nb-s-feld { background: var(--nb-surface-component); border-radius: var(--nb-radius-input); }

/* Icon im Kreis wie im Rechner (.nb-vertrauen__icon). Fläche surface-info, siehe OFFENE-ENTSCHEIDE Nr. 20 */
.nb-s-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--nb-surface-info); color: var(--nb-text-heading); }
.nb-s-icon svg { width: 22px; height: 22px; }

/* Pillen */
.nb-s-pille { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 28px; padding: 0 var(--nb-space-xs); border-radius: var(--nb-radius-pill); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; white-space: nowrap; }
.nb-s-pille--mint { background: var(--nb-mint); color: var(--nb-mint-ink); }
.nb-s-pille--leise { background: var(--nb-surface-component); color: var(--nb-text-muted); }
.nb-s-pille--rand { border: 1px solid var(--nb-ink-300); color: var(--nb-text-heading); background: var(--nb-surface-page); }

.nb-s-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nb-s :focus-visible:not(.nb-fl__eingabe, .nb-su__eingabe) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* Kopf an der einen Kante (Variante „angeglichen“), nb-kopf.css bleibt unangetastet */
.nb-kopf-bereich.nb-kopf--bk .nb-main__inner, .nb-kopf-bereich.nb-kopf--bk .nb-nav__inner { box-sizing: border-box; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); padding-inline: var(--nb-s-rand); }

/* baukasten/kern/formular.css */
/* Bauteile für Strecke und Konto (vk-werkstatt-typen, 26.09.2026). Nur Token aus nb-tokens-v3.css.
   Vorgaben design-auditor Modus A vom 26.09.2026, Volltext in
   .claude/progress/tradein/baukasten/VORGABEN-strecke-konto-2026-09-26.md.
   Bewegung nur Farbe 200 ms und Rand 250 ms, keine Reveals, kein Rollwerk (farbsystem.md:396). */

/* Felder kommen aus nb-feld.css (Formular-System, komponenten-formular.md, 27.09.2026). Hier bleiben das Raster,
   die alte Klasse nb-f-feld für das Codefeld in anmelden und die Breite über beide Spalten */
.nb-f-feld { display: grid; gap: var(--nb-space-2xs); align-content: start; min-width: 0; }
.nb-f-feld--breit { grid-column: 1 / -1; }
.nb-f-label { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.45; color: var(--nb-text-heading); }
/* 13 px aus farbsystem.md:385, dafür gibt es kein Token */
.nb-f-fehler { display: flex; align-items: flex-start; gap: var(--nb-space-2xs); margin: 0; font-size: 13px; line-height: 1.45; color: var(--nb-critical-text); }
.nb-f-fehler svg, .nb-f-meldung > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.nb-f-hilfe { margin: 0; font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--nb-text-muted); }

/* Pflicht-Haken, nie vorbelegt. Kasten 24 px mit border-control */
.nb-f-haken { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--nb-space-xs); align-items: start; font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-body); cursor: pointer; }
.nb-f-haken input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.nb-f-haken__kasten { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--nb-border-control); /* 2 px wie der Auswahlkreis, S-Haken (Daniel 28.09.2026) */ border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); color: transparent; transition: background var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-f-haken__kasten svg { width: 16px; height: 16px; }
.nb-f-haken input:checked + .nb-f-haken__kasten { background: var(--nb-action-primary); border-color: var(--nb-action-primary); color: var(--nb-action-primary-label); }
.nb-f-haken input:focus-visible + .nb-f-haken__kasten { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* Meldung. Fehler auf critical-bg 4,68:1. Hinweis ohne Flaeche, nur Night-Zeichen und Night-Text: die Warnflaeche steht
   nur im Konto-Band und im Band „Preis geaendert“ (farbsystem.md:69, komponenten-strecke-konto.md §7, design-auditor B 28.09.2026) */
.nb-f-meldung { display: flex; gap: var(--nb-space-xs); align-items: flex-start; padding: var(--nb-space-s); border-radius: var(--nb-radius-input); font-size: var(--nb-t-body-02); line-height: 1.5; }
.nb-f-meldung p { margin: 0; }
.nb-f-meldung--fehler { background: var(--nb-critical-bg); color: var(--nb-critical-text); }
.nb-f-meldung--hinweis { padding: 0; background: none; color: var(--nb-text-heading); }
.nb-f-meldung--hinweis > svg { color: var(--nb-text-heading); } /* Night, nie warning-text als Zeichen (G8, farbsystem.md:215) */
.nb-f-meldung__titel { font-weight: var(--nb-weight-semibold); }
.nb-f-meldung__text { display: grid; gap: var(--nb-space-3xs); }
.nb-f-meldung__aktion { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-l); margin-top: var(--nb-space-2xs); }

/* Knöpfe. Primär Signal mit weißem Label 5,24:1 (komponenten-warenkorb.md:336-339). Umriss mit border-control */
.nb-f-knopf { min-height: 48px; }
.nb-f-knopf svg { width: 20px; height: 20px; }
.nb-f-knopf--primaer { background: var(--nb-action-primary); color: var(--nb-action-primary-label); border: 1px solid var(--nb-action-primary); }
.nb-f-knopf--primaer:hover { background: var(--nb-action-primary-hover); border-color: var(--nb-action-primary-hover); }
.nb-f-knopf--primaer[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.nb-f-knopf--umriss { background: transparent; color: var(--nb-text-heading); border: 1px solid var(--nb-border-control); }
/* #FBFBFD hat kein Token, Wert aus komponenten-tradein.md:510 */
.nb-f-knopf--umriss:hover { border-color: var(--nb-ink-500); background: #FBFBFD; }
.nb-f-knopf--text { min-height: 44px; padding-inline: 0; background: none; border: 0; color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 4px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Hover wie .nb-anm__link, Farbe text-link (Daniel 27.09.2026: „beim Hovern über ja übernehmen passiert nichts“) */
.nb-f-knopf--text:hover { color: var(--nb-text-link); }
.nb-f-knopf--breit { width: 100%; }
.nb-f-knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* Stift wie „Entfernen“: body-02, muted, unterstrichen (komponenten-warenkorb.md:89) */
.nb-f-stift { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 44px; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); text-decoration: underline; text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-f-stift svg { width: 16px; height: 16px; }
button.nb-f-stift { margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: var(--nb-t-body-02); cursor: pointer; } /* Stift auch als Knopf, etwa „Ändern“ in Adresse d und e */
.nb-f-stift:hover { color: var(--nb-text-heading); }

/* Pillen. hell = m-merkmal (komponenten-global.md:73-82), 24 px hoch. dunkel = Night. warn = Sonderzustand */
.nb-f-pille { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.2; white-space: nowrap; }
.nb-f-pille--hell { background: var(--nb-surface-stage); color: var(--nb-text-heading); }
.nb-f-pille--dunkel { background: var(--nb-night); color: var(--nb-text-on-dark); }
/* Warnfläche allein 1,13:1 gegen Weiß, deshalb Rand in warning-text (4,71:1) als zweites Merkmal */
.nb-f-pille--warn { background: var(--nb-warning-bg); color: var(--nb-text-heading); box-shadow: inset 0 0 0 1px var(--nb-warning-text); }
/* Umriss statt Fläche: surface-component auf Weiß hat nur 1,10:1. Rand border-control 4,20:1 */
.nb-f-pille--leise { background: var(--nb-surface-page); color: var(--nb-text-muted); box-shadow: inset 0 0 0 1px var(--nb-border-control); }

/* Platzhalter: ink-100 mit Lichtstreif, Sweep 1200 ms, erst ab 400 ms sichtbar (farbsystem.md:379-382).
   Höhen als Klassen, damit das Nachgeladene genau den Platz findet, den es braucht */
.nb-f-platz { display: grid; align-content: start; gap: var(--nb-space-xs); padding: var(--nb-space-m); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); animation: nb-f-platz-ein 0s linear 400ms both; }
/* Gemessen am 26.09.2026 bei 1440 und 390 px gegen das Nachgeladene: Maske 79/131, Band 119/247,
   Verkaufskarte 333 und 374 bis 592 (je nach Aktionen). Die Verkäufe lädt der Server mit Zeitlimit,
   im Browser springt dort nichts (SPEZ §C 8b), der Platzhalter ist die Rückfallebene */
.nb-f-platz { box-sizing: border-box; }
.nb-f-platz--karte { min-height: 184px; }
.nb-f-platz--maske { min-height: 80px; padding-block: var(--nb-space-s); }
/* Band und Verkaufskarte (Konto, Verkäufe): weiße Karte ohne Rand wie die echte im Flächen-System K1 (farbsystem.md
   Umkehr-Regel E2), die Zeilen ink-100 stehen damit auf Weiß statt auf dem Grund (vorher 1,055:1). Höhen neu gemessen
   am 04.10.2026 im Zustand normal (zustands-pruefer Z3): Band 131 bei 1440, 199 bei 390. Karten 335 bis 399 bei 1440,
   338 bis 441 bei 390, der Platzhalter nimmt die kleinste, damit nichts über einer Karte wandert */
.nb-f-platz--band, .nb-f-platz--verkauf { background: var(--nb-s-karte-grund, var(--nb-surface-page)); border-width: 0; box-shadow: var(--nb-s-karte-schatten, var(--nb-sh-card)); }
.nb-f-platz--band { min-height: 199px; }
.nb-f-platz--verkauf { min-height: 338px; }
@media (min-width: 768px) {
  .nb-f-platz--band { min-height: 131px; }
  .nb-f-platz--verkauf { min-height: 335px; }
}
@media (max-width: 767px) { .nb-f-platz--maske { min-height: 132px; } }
.nb-f-platz__zeile { display: block; height: 14px; border-radius: var(--nb-radius-badge); background: var(--nb-ink-100) linear-gradient(90deg, transparent 0, rgb(249 250 252 / .9) 50%, transparent 100%) no-repeat; background-size: 40% 100%; animation: nb-f-platz-sweep var(--nb-motion-skeleton-sweep) linear infinite; }
.nb-f-platz__zeile--0 { width: 45%; height: 20px; }
.nb-f-platz__zeile--1 { width: 80%; }
.nb-f-platz__zeile--2 { width: 60%; }
@keyframes nb-f-platz-ein { from { visibility: hidden; } to { visibility: visible; } }
@keyframes nb-f-platz-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .nb-f-platz__zeile { animation: none; } }

/* Karte der Strecke und des Kontos: weiß, Haarlinie, sh-card, Radius 24 (farbsystem.md:332) */
/* Seit 30.09.2026 über die Karten-Variablen der Schale (Seitengrund bm, grau, rebuy, weiss), Rückfall wie bisher */
.nb-f-karte { background: var(--nb-s-karte-grund, var(--nb-surface-page)); border: 1px solid var(--nb-s-karte-rand, var(--nb-border-hairline)); border-radius: var(--nb-radius-card); box-shadow: var(--nb-s-karte-schatten, var(--nb-sh-card)); }

/* Felder und Suche (.nb-fl, .nb-su) tragen ihren Fokus selbst als eine Linie im Rand, deshalb ausgenommen (Daniel 27.09.2026, G18) */
/* Fokus für Strecke und Konto (farbsystem.md:349-355): 2 px Night mit 3 px Abstand, darunter ein weißer Ring,
   damit er auch auf surface-stage und warning-bg trägt. Kein Radius in der Fokusregel (:359) */
:is(.nb-strecke-seite, .nb-konto-seite, .nb-sk, .nb-sf) :focus-visible:not(.nb-fl__eingabe, .nb-su__eingabe) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page); }

/* Produktfoto auf weißem Grund, ganz sichtbar statt beschnitten (Daniel 26.09.2026) */
img.nb-produktbild { object-fit: contain !important; background: var(--nb-surface-page); }

/* ==========================================================================================================================
   Bausteine aus dem Hilfecenter, komponenten-formular.md §5c bis §5g (Task faq-design 4.6, Schnitt B, 03.10.2026).
   Werte gerendert im gesperrten Studio Version 10 gemessen, wo dessen Kaskade überstimmt, steht der Wert, der am Ende galt.
   Zahlen ohne Token (14, 18, 6, 26, 40 px) stehen so in §5c bis §5g. Zeilen „Pflicht“ sind umgesetzt und benannt.
   ========================================================================================================================== */

/* ---------- §5c Mehrzeiliges Feld (m-feld--text): wie nb-fl, sechs Zeilen 185 px, 28 px oben, Zeilenhöhe 1.55 ---------- */
.nb-fl--text .nb-fl__eingabe { height: auto; padding-top: 28px; line-height: 1.55; resize: vertical; }
/* Pflicht: hinter dem hochgewanderten Label ein Streifen in der Feldfläche über die volle Breite, 26 px hoch. Er folgt Hover,
   Fokus und Fehler wie die Fläche, damit langer Text beim Rollen nicht unter das Label läuft */
.nb-fl--text .nb-fl__rahmen::before { content: ""; position: absolute; z-index: 1; left: 1px; right: 1px; top: 1px; height: 26px; border-radius: 15px 15px 0 0; background: var(--fl-grund); pointer-events: none; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-fl--text .nb-fl__label { z-index: 2; }
.nb-fl--text .nb-fl__rahmen:has(> .nb-fl__eingabe:is(:hover, :focus):not(:disabled))::before { background: var(--fl-grund-aktiv); }
.nb-fl--text.is-fehler .nb-fl__rahmen::before,
.nb-fl--text.is-fehler .nb-fl__rahmen:has(> .nb-fl__eingabe:is(:hover, :focus))::before { background: var(--nb-critical-bg); }

/* ---------- §5d Datei-Ablage (m-ablage) ---------- */
.nb-f-ablage { display: flex; flex-direction: column; }
.nb-f-ablage__titel { margin: 0; font-size: var(--nb-t-heading-03); line-height: 1.4; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-f-ablage__hinweis { margin: var(--nb-space-3xs) 0 var(--nb-space-xs); font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-muted); }
.nb-f-ablage__liste { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); align-items: center; }
/* Ablage-Knopf und Vorstufe: ink-100, kein Rand, 64 px hoch über das Polster 14 / 18 / 14 / 14, 16 px Semibold */
.nb-f-ablage__knopf { display: flex; align-items: center; gap: var(--nb-space-xs); margin: 0; padding: 14px 18px 14px 14px; border: 0; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); font: inherit; font-size: var(--nb-t-body-01); line-height: 1.5; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); user-select: none; -webkit-user-select: none; }
.nb-f-ablage__knopf:hover { background: var(--nb-ink-200); }
.nb-f-ablage__zeichen { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); color: var(--nb-text-heading); }
.nb-f-ablage__zeichen svg { width: 20px; height: 20px; }
/* Datei-Zeile: ink-100, Polster 8, Vorschau 48 px weiß. Radius der Vorschau 16 wie gerendert (eine spätere Studio-Regel
   überstimmt die 10 px aus §5d) */
.nb-f-ablage__datei { display: flex; align-items: center; gap: var(--nb-space-xs); min-width: 0; max-width: 100%; padding: var(--nb-space-2xs); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-f-ablage__bild { position: relative; display: block; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: var(--nb-radius-input); background: var(--nb-surface-page); }
.nb-f-ablage__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-f-ablage__name { min-width: 0; font-size: var(--nb-t-body-02); line-height: 1.5; }
.nb-f-ablage__name b { display: block; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-f-ablage__name small { display: block; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
/* Entfernen: weißer Kreis 32 px, x 16 px. Pflicht: 44 px Trefferfläche über den Rand hinaus, das Zeichen bleibt 32 px */
.nb-f-ablage__weg { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--nb-surface-page); color: var(--nb-text-heading); cursor: pointer; }
.nb-f-ablage__weg svg { width: 16px; height: 16px; }
.nb-f-ablage__weg::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.nb-f-ablage__stand { margin: 6px 2px 0; font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-muted); }
.nb-f-ablage__fehler { margin: 6px 2px 0; }

/* ---------- §5e Auftragswahl (m-wahl): Zeilen ohne Fläche, Trenner 1 px, gewählt Haken plus „Gewählt“ ---------- */
.nb-f-wahl { display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-f-wahl__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nb-space-xs); align-items: center; margin: 0; padding: 14px var(--nb-space-xs); border: 0; border-radius: var(--nb-radius-input); background: transparent; font: inherit; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-heading); text-align: left; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-f-wahl__zeile + .nb-f-wahl__zeile { box-shadow: 0 -1px 0 var(--nb-border-hairline); }
.nb-f-wahl__zeile:hover { background: var(--nb-surface-component); }
/* Wie gerendert: die gewählte Zeile verliert ihren Trenner darüber, die nächste behält ihren */
.nb-f-wahl__zeile[aria-pressed="true"] { background: transparent; box-shadow: none; }
.nb-f-wahl__zeile[aria-pressed="true"] + .nb-f-wahl__zeile { box-shadow: 0 -1px 0 var(--nb-border-hairline); }
.nb-f-wahl__text b { display: block; font-weight: var(--nb-weight-semibold); }
.nb-f-wahl__text small { display: block; font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-f-wahl__haken { display: none; align-items: center; gap: 6px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); white-space: nowrap; }
.nb-f-wahl__haken svg { flex: none; width: 18px; height: 18px; }
.nb-f-wahl__zeile[aria-pressed="true"] .nb-f-wahl__haken { display: inline-flex; }
/* Fokus per Tastatur 2 px Night innen, kein Ring außen, damit die Trenner stehen bleiben */
.nb-f-wahl .nb-f-wahl__zeile:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }
.nb-f-wahl .nb-f-wahl__zeile + .nb-f-wahl__zeile:focus-visible { box-shadow: 0 -1px 0 var(--nb-border-hairline); }

/* ---------- §5f Bereichs-Kacheln (m-kachelwahl) ---------- */
.nb-f-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-xs); }
.nb-f-kachel { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 18px; border: 0; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); font: inherit; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-heading); text-align: left; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-f-kachel:hover { background: var(--nb-ink-200); }
.nb-f-kachel__zeichen { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); color: var(--nb-text-heading); }
.nb-f-kachel__zeichen svg { width: 20px; height: 20px; }
.nb-f-kachel__text b { display: block; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-f-kachel__text small { display: block; margin-top: 2px; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
/* Gewählt nach „Ändern“ (Daniel 03.10.2026): Haken 18 px plus „Gewählt“ rechts in der Zeile des Titels, Fläche bleibt
   ink-100. Die Zeile bleibt 24 px hoch wie der Titel, die Kachel behält ihre Höhe */
.nb-f-kachel__kopf { display: block; }
.nb-f-kachel__haken { display: none; align-items: center; gap: 6px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); white-space: nowrap; }
.nb-f-kachel__haken svg { flex: none; width: 18px; height: 18px; }
.nb-f-kachel[aria-pressed="true"] .nb-f-kachel__text { flex: 1; min-width: 0; }
.nb-f-kachel[aria-pressed="true"] .nb-f-kachel__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2xs); }
.nb-f-kachel[aria-pressed="true"] .nb-f-kachel__haken { display: inline-flex; }

/* Fokusformel (komponenten-global.md) für Kachel, Ablage und Entfernen, nur per Tastatur. Die Ablage ist ein Knopf, kein Feld */
.nb-f-kacheln .nb-f-kachel:focus-visible, .nb-f-ablage__knopf.nb-f-ablage__knopf:focus-visible, .nb-f-ablage__knopf:has(> input:focus-visible), .nb-f-ablage__datei .nb-f-ablage__weg:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page); }

/* ---------- §5g Erfolgsmeldung nach dem Senden (m-gesendet) ---------- */
.nb-f-erfolg { padding: var(--nb-space-l); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-f-erfolg--figur { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; }
.nb-f-erfolg--figur > img { display: block; justify-self: end; width: 100%; max-width: 300px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.nb-f-erfolg__text { display: flex; flex-direction: column; gap: var(--nb-space-s); align-items: flex-start; }
.nb-f-erfolg__titel { margin: 0; font-size: 40px; line-height: 1.08; letter-spacing: -.03em; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-wrap: balance; }
/* Pflicht: der Titel bekommt nach dem Senden den Fokus, ohne Ring (wie die Schritt-Titel, komponenten-hilfe.md §7) */
.nb-f-erfolg .nb-f-erfolg__titel:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.nb-f-erfolg__nummer { display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-f-erfolg__nummer[hidden] { display: none; }
.nb-f-erfolg__label { font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-f-erfolg__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-s); }
.nb-f-erfolg__wert { font-size: 28px; font-weight: var(--nb-weight-semibold); letter-spacing: .01em; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; }
/* Pflicht: Kopieren hat 44 px Trefferfläche, der kleine Knopf bleibt 40 px hoch */
.nb-f-erfolg__kopieren { position: relative; }
.nb-f-erfolg__kopieren > svg { flex: none; width: 18px; height: 18px; }
.nb-f-erfolg__kopieren::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (max-width: 820px) {
  .nb-f-erfolg--figur { grid-template-columns: minmax(0, 1fr); }
  .nb-f-erfolg--figur > img { max-width: 220px; order: -1; justify-self: start; }
}
@media (max-width: 600px) {
  /* Radius 20 am Handy, offen in komponenten-hilfe.md §9 */
  .nb-f-erfolg { padding: 20px; border-radius: 20px; }
  .nb-f-erfolg__titel { font-size: 30px; }
  .nb-f-erfolg__wert { font-size: 22px; }
}

/* Senden läuft: aria-busy, das Wort bleibt unsichtbar stehen und hält die Breite, der Kreisel liegt mittig darüber.
   Kreisel 18 px, Ring in der Schriftfarbe zu 35 %, Umlauf 0,8 s wie im Studio (kein Motion-Token für Dauerdrehung) */
.nb-f-senden { position: relative; }
.nb-f-senden[aria-busy="true"] { pointer-events: none; }
.nb-f-senden[aria-busy="true"] .nb-f-senden__wort { visibility: hidden; }
.nb-f-kreisel { display: none; }
.nb-f-senden[aria-busy="true"] .nb-f-kreisel { display: block; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%; animation: nb-f-drehen .8s linear infinite; }
@keyframes nb-f-drehen { to { transform: rotate(360deg); } }

/* Kein Netz: Meldung in der Formularkarte. Pflicht: Fläche ink-100 (im Studio weiß und auf der Karte unsichtbar) */
.nb-f-netz { display: flex; gap: var(--nb-space-xs); align-items: flex-start; margin: 0; padding: 14px 18px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-heading); }
.nb-f-netz > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.nb-f-netz:focus { outline: none; }

@media (max-width: 600px) { .nb-f-kacheln { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .nb-fl--text .nb-fl__rahmen::before, .nb-f-ablage__knopf, .nb-f-wahl__zeile, .nb-f-kachel { transition: none; }
  .nb-f-senden[aria-busy="true"] .nb-f-kreisel { animation: none; }
}

/* baukasten/kern/hilfe.css */
/* Hilfecenter (Typ hilfe), Kern. Übertragen aus dem gesperrten Studio Version 10 am 03.10.2026, Quelle
   .claude/progress/faq/baukasten/studio/hilfe.css. Werte sind die gerenderten des Studios: wo die Kaskade dort
   mehrfach überstimmt (Runde 1 bis 5), steht hier nur der Wert, der am Ende gilt. Nur gewählte Fassungen (START in
   hilfe.js): Knopf Night, Marker aus, Suche im Fokus grau mit Schatten. Werte in ../nextbuy-brand/brand/komponenten-hilfe.md,
   Zahlen ohne Token dort §8. Container-Abfragen des Studios sind hier @media mit denselben Schwellen 1080/820/600/360. */

/* ---------- Seite: Kopf, Inhalt, Fuß als Spalte über die ganze Höhe (Studio #app) ---------- */
body.nb-v3:has(> main.nb-hilfe-seite) { display: flex; flex-direction: column; min-height: 100vh; background: var(--nb-surface-base); color: var(--nb-text-heading); }
.nb-hilfe-seite { flex: 1; width: 100%; color: var(--nb-text-heading); }
/* Studio: button, input { font: inherit; color: inherit }, ohne Spezifität wie dort */
:where(.nb-hilfe-seite, .nb-h-kopf, .nb-h-shopweg, .nb-h-fuss) :is(button, input, textarea, select) { font: inherit; color: inherit; }
.nb-h-weite { max-width: var(--nb-container); margin: 0 auto; padding-inline: var(--nb-space-m); }

/* ---------- Schrift (typografie.md, Größen fest wie im Studio, komponenten-hilfe.md §1) ---------- */
.nb-h-d1 { font-size: 56px; line-height: 1.05; letter-spacing: -.03em; font-weight: var(--nb-weight-semibold); margin: 0; text-wrap: balance; }
.nb-h-d2 { font-size: 40px; line-height: 1.08; letter-spacing: -.03em; font-weight: var(--nb-weight-semibold); margin: 0; text-wrap: balance; }
.nb-h-h2 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; font-weight: var(--nb-weight-semibold); margin: 0; text-wrap: balance; }
.nb-h-h3 { font-size: var(--nb-t-heading-03); line-height: 1.4; font-weight: var(--nb-weight-semibold); margin: 0; }
.nb-h-b1 { font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); margin: 0; }
.nb-h-ziffern { font-variant-numeric: tabular-nums; }

/* ---------- Treppe: die erste Karte liegt höchstens zur Hälfte auf dem Band, sonst 88 px (Handy 64), komponenten-hilfe.md
   §0 und §9 (Daniel 03.10.2026: „das blau ist genau auf der linie von der weißen container“). Das Band endet 8 px unter
   seinem Inhalt, die Fläche hinter der Karte malt ::before in surface-stage über die volle Breite (Schatten plus clip-path,
   kein Überlauf). Höhe min(88 px, 50 %) der Karte, auf dem Start 50 % der ersten Kachelzeile. isolation hält die Fläche
   über dem Grund der Seite und unter der Karte ---------- */
.nb-h-hauptteil:has(> .nb-h-treppe) { isolation: isolate; }
.nb-h-treppe { position: relative; --nb-h-treppe: 88px; }
.nb-h-treppe::before, .nb-h-treppe > .nb-h-themen::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -1px; height: calc(min(var(--nb-h-treppe), 50%) + 1px); background: var(--nb-surface-stage); box-shadow: 0 0 0 100vmax var(--nb-surface-stage); clip-path: inset(0 -100vmax); pointer-events: none; }
.nb-h-treppe:has(> .nb-h-themen)::before { content: none; }
.nb-h-treppe > .nb-h-themen { position: relative; }
.nb-h-treppe > .nb-h-themen::before { grid-row: 1 / 2; grid-column: 1 / -1; }
.nb-h-hauptteil { padding-bottom: 80px; display: flex; flex-direction: column; gap: var(--nb-space-xl); }

/* ---------- Karte (K1: weiß, kein Rand, sh-ruht) ---------- */
.nb-h-karte { background: var(--nb-surface-page); border-radius: var(--nb-radius-card); box-shadow: var(--nb-sh-ruht); padding: var(--nb-space-l); }
.nb-h-karte--eng { padding: var(--nb-space-m); }
.nb-h-karte--klick { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-h-karte--klick:hover { box-shadow: var(--nb-sh-hoch); transform: translateY(-2px); }

/* ---------- Knöpfe (Night für jeden gefüllten Knopf, dritte Ausnahme farbsystem.md, komponenten-hilfe.md §9) ---------- */
.nb-h-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); min-height: 48px; padding: 0 var(--nb-space-m); border-radius: var(--nb-radius-pill); border: 0; background: var(--nb-night); color: var(--nb-surface-page); font-weight: var(--nb-weight-semibold); font-size: var(--nb-t-body-01); text-decoration: none; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); white-space: nowrap; }
.nb-h-knopf:hover { background: var(--nb-surface-dark-raised); }
.nb-h-knopf--zweit { background: transparent; color: var(--nb-text-heading); box-shadow: inset 0 0 0 1px var(--nb-border-control); transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-h-knopf--zweit:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--nb-night); }
.nb-h-knopf--klein { min-height: 40px; padding: 0 18px; font-size: var(--nb-t-body-02); }
/* Trefferfläche 44 px, unsichtbar (wie Kopieren, komponenten-formular.md §5g). Kleiner Knopf 40, im Kopf am Handy 38 */
.nb-h-knopf--klein { position: relative; }
.nb-h-knopf--klein::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nb-h-textlink { color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.nb-h-textlink:hover { color: var(--nb-action-primary-active); }
.nb-h-knoepfe { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); align-items: center; }

/* ---------- Chip (Link-Chip, komponenten-hilfe.md §6) und Sprungleiste ---------- */
.nb-h-chip { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 40px; padding: 0 var(--nb-space-s); border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); color: var(--nb-text-heading); text-decoration: none; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); border: 0; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-h-chip:hover { background: var(--nb-ink-200); }
/* Chip 40 px hoch, Trefferfläche unsichtbar 44 (2 px über und unter, Zeilenabstand der Chips 8) */
.nb-h-chip { position: relative; }
.nb-h-chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nb-h-chip small { font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); font-size: var(--nb-t-body-02); }
/* Chip als Wahl (Filter der Suche, Thema im Kontakt, Studio hilfe.css Z. 184-185, Schnitt B): gedrückt Night, auch im Hover.
   #C9CEDA für die Anzahl hat kein Token, Wert des gesperrten Studios */
.nb-h-chip[aria-pressed="true"] { background: var(--nb-night); color: var(--nb-surface-page); }
.nb-h-chip[aria-pressed="true"] small { color: #C9CEDA; }
.nb-h-sprungleiste { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }

/* ---------- Zeichen in der Kachel (Umkehr: ink-100 in der weißen Karte) ---------- */
.nb-h-zeichen { width: 44px; height: 44px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); display: grid; place-items: center; flex: none; color: var(--nb-text-heading); }

/* ---------- Artikelzeilen ---------- */
.nb-h-zeilen { list-style: none; margin: 0; padding: 0; }
.nb-h-zeilen a { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-s) 0; text-decoration: none; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); font-size: var(--nb-t-body-01); line-height: 1.4; border-top: 1px solid var(--nb-border-hairline); }
.nb-h-zeilen li:first-child a { border-top: 0; padding-top: var(--nb-space-3xs); }
.nb-h-zeilen a:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.nb-h-zeilen svg { flex: none; color: var(--nb-ink-500); transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-h-zeilen a:hover svg { transform: translateX(3px); color: var(--nb-text-heading); }

.nb-h-kontaktkarte { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* ---------- Stand eines Auftrags (Start und Thema, angemeldet) ---------- */
.nb-h-stand { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); font-size: 13px; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-h-stand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nb-signal-500); }
.nb-h-stand--unterwegs::before { background: var(--nb-sky-500); }

/* ---------- Spalten mit Rand (Thema und Artikel, komponenten-hilfe.md §5) ---------- */
.nb-h-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--nb-space-l); align-items: start; }
/* Klebeabstand 24 px, seit der Kopf nicht mehr klebt (Daniel 03.10.2026: „keinen sticky header auf der ganzen seite“) */
.nb-h-seitenleiste { position: sticky; top: var(--nb-space-m); display: flex; flex-direction: column; gap: var(--nb-space-s); }

/* ---------- Schrittlinie (Artikel und Gesendet), Lesespalte färbt die Kreise in hilfe-artikel um ---------- */
.nb-h-schritte { list-style: none; margin: 0; padding: 0; counter-reset: nbhs; display: flex; flex-direction: column; }
.nb-h-schritte li { counter-increment: nbhs; position: relative; padding: 0 0 var(--nb-space-m) 52px; color: var(--nb-text-body); max-width: 32em; }
.nb-h-schritte li:last-child { padding-bottom: 0; }
.nb-h-schritte li::before { content: counter(nbhs); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--nb-surface-component); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); font-size: var(--nb-t-body-02); display: grid; place-items: center; }
.nb-h-schritte li::after { content: ""; position: absolute; left: 15.5px; top: 34px; bottom: 4px; width: 1px; background: var(--nb-border-hairline); }
.nb-h-schritte li:last-child::after { display: none; }

/* ---------- Suche: .nb-su aus dem Formular-System (nb-feld.css, komponenten-formular.md §4), seit Schnitt B (03.10.2026).
   Hier nur, was das Studio anders rendert: weiße Pille auf dem Band (Umkehr), 56 px (Kopf und Band schmal 48), 18 px Schrift
   (Kopf und Handy 16), Lupe 4 px vom Rand, x 44 px. Abweichung im Fokus nach komponenten-hilfe.md §1 und §9 ---------- */
.nb-h-suche { position: relative; }
.nb-h-suche .nb-su { --su-hoehe: 56px; }
.nb-h-suche--kopf .nb-su { --su-hoehe: 48px; }
.nb-h-suche .nb-su__eingabe { padding: 0 56px 0 52px; background: var(--nb-surface-page); font-size: 18px; text-overflow: ellipsis; transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-h-suche--kopf .nb-su__eingabe { font-size: var(--nb-t-body-01); }
.nb-h-suche--karte .nb-su__eingabe { background: var(--nb-surface-component); }
.nb-h-suche .nb-su__eingabe::placeholder { color: var(--nb-text-muted); }
/* Hover wie im Studio ohne Änderung: auf dem Band hätte ink-200 ohne Schatten nur 1,04:1 */
.nb-h-suche .nb-su .nb-su__eingabe:hover { background: var(--nb-surface-page); }
.nb-h-suche--karte .nb-su .nb-su__eingabe:hover { background: var(--nb-surface-component); }
/* Gesperrt 03.10.2026 (Daniel: „grau mit schatten“): ink-200 plus sh-hoch auf Band und Kopf, in der Karte nur ink-200.
   Über :focus-within wie im Studio, auch wenn die Lupe oder das x den Fokus hat */
.nb-h-suche .nb-su:focus-within .nb-su__eingabe { background: var(--nb-ink-200); box-shadow: var(--nb-sh-hoch); }
.nb-h-suche--karte .nb-su:focus-within .nb-su__eingabe { box-shadow: none; }
.nb-h-suche .nb-su__lupe { left: var(--nb-space-3xs); }
.nb-h-suche .nb-su__leeren { right: var(--nb-space-2xs); width: 44px; height: 44px; }
.nb-h-suche .nb-su__leeren svg { width: 18px; height: 18px; }
/* Vorschläge beim Tippen (hilfe.js Z. 133-136, 696-723): Karte 8 px unter der Pille, Zeile mit Titel und Thema */
.nb-h-suche__vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--nb-surface-page); border-radius: var(--nb-radius-input); box-shadow: var(--nb-sh-schwebt); padding: var(--nb-space-2xs); list-style: none; margin: 0; z-index: 15; }
.nb-h-suche__vorschlaege[hidden] { display: none; }
.nb-h-suche__vorschlaege a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: var(--nb-space-2xs) 14px; border-radius: var(--nb-radius-input); text-decoration: none; color: var(--nb-text-heading); font-size: var(--nb-t-body-01); line-height: 1.35; }
.nb-h-suche__vorschlaege a b { font-weight: var(--nb-weight-semibold); }
.nb-h-suche__vorschlaege a small { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-h-suche__vorschlaege a:hover, .nb-h-suche__vorschlaege a.ist-aktiv { background: var(--nb-surface-component); }

/* Bedienelemente lassen sich nicht markieren (komponenten-hilfe.md §7) */
.nb-h-knopf, .nb-h-chip { user-select: none; -webkit-user-select: none; }

/* ---------- Mittel und Handy ---------- */
@media (max-width: 1080px) {
  .nb-h-spalten { grid-template-columns: minmax(0, 1fr); }
  .nb-h-seitenleiste { position: static; }
}
@media (max-width: 600px) {
  .nb-h-weite { padding-inline: var(--nb-space-s); }
  .nb-h-treppe { --nb-h-treppe: 64px; }
  .nb-h-d1 { font-size: 40px; }
  .nb-h-d2 { font-size: 30px; }
  .nb-h-h2 { font-size: 18px; }
  .nb-h-hauptteil { gap: var(--nb-space-l); padding-bottom: 56px; }
  /* Radius 20 am Handy, offen im Brand-Repo (komponenten-hilfe.md §9) */
  .nb-h-karte { padding: 20px; border-radius: 20px; }
  .nb-h-suche .nb-su__eingabe { font-size: var(--nb-t-body-01); }
  .nb-h-sprungleiste { scrollbar-width: none; }
  .nb-h-sprungleiste .nb-h-chip { flex: none; }
}
@media print { .nb-h-kopf { position: static; } }

/* baukasten/sektionen/hilfe-kopf/sektion.css */
/* Kopf des Hilfecenters (Studio hilfe.css Z. 64-77, 371-373, 409-458, 498-499, 535-536, 584-614, 643).
   Liegt außerhalb von main, deshalb @media statt @container. Werte komponenten-hilfe.md §1 und §7. */

/* Shop-Zeile, nur am Handy: Fläche Band, 14/600 Night, 44 px Tippfläche, Pfeil bündig mit dem Logo */
.nb-h-shopweg { display: none; background: var(--nb-surface-stage); }
.nb-h-shopweg a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); text-decoration: none; color: var(--nb-text-heading); user-select: none; -webkit-user-select: none; }
.nb-h-shopweg a:hover { color: var(--nb-text-heading); }
.nb-h-shopweg a svg { margin-left: -5px; }

/* Rollt mit der Seite, klebt nirgends (Daniel 03.10.2026: „keinen sticky header auf der ganzen seite“). z-index für die Vorschläge der Suche */
.nb-h-kopf { position: relative; z-index: 20; background: var(--nb-surface-stage); color: var(--nb-text-heading); transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-h-kopf__in { display: flex; align-items: center; gap: 20px; height: 72px; }
.nb-h-marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--nb-text-heading); flex: none; }
.nb-h-marke a { color: var(--nb-text-heading); text-decoration: none; display: block; }
/* Die Unterlänge des y zählt zur Box, 12 % nach unten setzt die Wortmarke auf die Mitte der Zeile */
.nb-h-marke__logo { display: block; height: 22px; width: auto; transform: translateY(12%); }
.nb-h-marke__titel span { display: block; font-size: 20px; font-weight: var(--nb-weight-semibold); letter-spacing: -.01em; line-height: 1; padding-left: 14px; border-left: 1.5px solid rgb(var(--nb-night-rgb) / .18); }
.nb-h-kopf__suche { flex: 1; max-width: 440px; margin-left: var(--nb-space-xs); }
.nb-h-kopf__nav { margin-left: auto; display: flex; align-items: center; gap: var(--nb-space-2xs); }
.nb-h-kopf__link { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); text-decoration: none; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); font-size: var(--nb-t-body-01); padding: 10px var(--nb-space-xs); border-radius: var(--nb-radius-pill); white-space: nowrap; user-select: none; -webkit-user-select: none; }
.nb-h-kopf__link:hover { background: var(--nb-surface-page); }
.nb-h-kopf__link svg { flex: none; }
/* Trefferflächen unsichtbar 44 px hoch: Wortmarke „Hilfecenter“ (20), Kontakt am Handy (37) */
.nb-h-marke__titel, .nb-h-kopf__link { position: relative; }
.nb-h-marke__titel::after, .nb-h-kopf__link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nb-h-initialen { width: 32px; height: 32px; border-radius: 50%; background: var(--nb-night); color: var(--nb-surface-page); display: grid; place-items: center; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }

@media (max-width: 1080px) {
  .nb-h-kopf__suche { max-width: 320px; }
}
@media (max-width: 820px) {
  .nb-h-kopf__suche { display: none; }
}
@media (max-width: 600px) {
  .nb-h-shopweg { display: block; }
  .nb-h-kopf__in { height: 60px; gap: var(--nb-space-2xs); }
  .nb-h-marke { gap: var(--nb-space-2xs); }
  .nb-h-marke__logo { height: 18px; }
  .nb-h-marke__titel span { font-size: var(--nb-t-heading-03); padding-left: var(--nb-space-2xs); }
  .nb-h-kopf__nav { gap: 2px; }
  .nb-h-kopf__nav .nb-h-knopf--klein { padding: 0 14px; min-height: 38px; }
  .nb-h-kopf__link { padding: var(--nb-space-2xs); font-size: var(--nb-t-body-02); }
  .nb-h-kopf__link--shop { display: none; }
  .nb-h-kopf__link--kontakt svg { display: none; }
}
/* Bis 360 px Kontakt nur als Zeichen, das Wort bleibt für Screenreader (bei 340 ragte der Kopf 8 px über) */
@media (max-width: 360px) {
  .nb-h-kopf__link--kontakt svg { display: inline; }
  .nb-h-kopf__link--kontakt span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* baukasten/sektionen/hilfe-band/sektion.css */
/* Band des Hilfecenters (Studio hilfe.css Z. 79-87, 138-142, 178, 192, 371-378, 413-416, 422, 426, 495-503, 634-636).
   Werte komponenten-hilfe.md §0 und §1. Polster unten 8 px, die Fläche unter der Treppe malt die Karte selbst (kern/hilfe.css). */
.nb-h-band { background: var(--nb-surface-stage); padding-bottom: var(--nb-space-2xs); }
.nb-h-band__in { padding-top: 40px; display: flex; flex-direction: column; gap: var(--nb-space-s); }
.nb-h-band__in--held { padding-top: var(--nb-space-2xl); }

/* Start */
.nb-h-held-titel { display: flex; flex-direction: column; gap: var(--nb-space-xs); max-width: 760px; }
.nb-h-gruss { margin: 0; font-size: 20px; font-weight: var(--nb-weight-semibold); color: var(--nb-text-body); }
.nb-h-unter { font-size: 18px; line-height: 1.5; color: var(--nb-text-body); margin: 0; max-width: 56ch; }
.nb-h-unter b { font-weight: var(--nb-weight-semibold); }
.nb-h-held-suche { max-width: 760px; width: 100%; }
.nb-h-band-zeile { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); align-items: center; }
.nb-h-band-zeile:empty { display: none; }
.nb-h-assistent { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: var(--nb-space-2xs) var(--nb-space-s) var(--nb-space-2xs) 10px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); color: var(--nb-text-muted); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); cursor: not-allowed; }
.nb-h-assistent b { font-weight: var(--nb-weight-semibold); font-size: var(--nb-t-label-01); letter-spacing: .12em; text-transform: uppercase; background: var(--nb-surface-component); color: var(--nb-text-body); padding: 3px var(--nb-space-2xs); border-radius: var(--nb-radius-badge); }

/* Suche im Band auf Thema und Artikel, erst unter 820 px (darüber im Kopf) */
.nb-h-band-suche { display: none; }

/* Brotkrume: 14/1,45 Night, Winkel 6 px, Unterstrich 2 px (komponenten-hilfe.md §1) */
.nb-h-krume { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); margin: 0; padding: 0; list-style: none; }
.nb-h-krume a { color: var(--nb-text-heading); line-height: 1.45; text-decoration: none; user-select: none; -webkit-user-select: none; }
.nb-h-krume a:hover { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.nb-h-krume li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid var(--nb-border-control); border-top: 1.5px solid var(--nb-border-control); transform: rotate(45deg); margin: 0 10px 1px 2px; box-sizing: content-box; }

/* Thema */
.nb-h-thema-held { display: flex; gap: var(--nb-space-m); align-items: center; }
.nb-h-thema-held__unter { margin-top: var(--nb-space-2xs); }
/* Auf dem Band weiß wie die Karten (Daniel 03.10.2026: „wieso ist es in einer grauen kachel?“), in Karten bleibt ink-100 */
.nb-h-zeichen--gross { width: 72px; height: 72px; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }

/* Artikel */
.nb-h-artikel-titel { max-width: 820px; }

/* Suche ohne Netz (Studio hilfe.css Z. 227-228, 497): weiße Meldung auf dem Band, bis 640 px. 16 px Rand oben und unten
   sind der gerenderte Wert (p ohne Rücksetzen im Studio) */
.nb-h-meldung { display: flex; gap: var(--nb-space-xs); align-items: flex-start; max-width: 640px; margin: var(--nb-space-s) 0; padding: 14px 18px; border-radius: var(--nb-radius-input); background: var(--nb-surface-page); font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-heading); }
.nb-h-meldung svg { flex: none; margin-top: 2px; }

@media (max-width: 820px) {
  .nb-h-band-suche { display: block; }
  .nb-h-band-suche .nb-su { --su-hoehe: 48px; }
  .nb-h-band-suche .nb-su__eingabe { font-size: var(--nb-t-body-01); }
}
@media (max-width: 600px) {
  .nb-h-band__in { padding-top: 20px; gap: var(--nb-space-xs); }
  .nb-h-band__in--held { padding-top: 28px; }
  .nb-h-unter { font-size: var(--nb-t-body-01); }
  .nb-h-thema-held { gap: var(--nb-space-s); align-items: flex-start; flex-direction: column; }
  .nb-h-zeichen--gross { width: 56px; height: 56px; border-radius: var(--nb-radius-input); }
}

/* baukasten/sektionen/hilfe-start/sektion.css */
/* Start des Hilfecenters (Studio hilfe.css Z. 96, 143-176, 313, 317-319, 347-350, 577-579, 615-616). */
.nb-h-themen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nb-space-s); }
.nb-h-thema { padding: var(--nb-space-m); display: flex; flex-direction: column; gap: 10px; min-height: 176px; }
.nb-h-thema b { font-size: 18px; font-weight: var(--nb-weight-semibold); line-height: 1.3; }
/* Wie im Studio trifft die Regel auch das Zeichen (span): Zeichen in ink-600, am Handy mit dem Text ausgeblendet */
.nb-h-thema span { font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-muted); }
/* Thema ohne veröffentlichten Artikel (04.10.2026): Karte ohne Link, Schild wie „Frag unseren Assistenten“ (hilfe-band/sektion.css Z. 16) */
.nb-h-thema--bald { cursor: default; position: relative; }
.nb-h-thema--bald i { position: absolute; top: var(--nb-space-m); right: var(--nb-space-m); font-style: normal; font-weight: var(--nb-weight-semibold); font-size: var(--nb-t-label-01); letter-spacing: .12em; text-transform: uppercase; background: var(--nb-surface-component); color: var(--nb-text-body); padding: 3px var(--nb-space-2xs); border-radius: var(--nb-radius-badge); }
.nb-h-paar { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--nb-space-s); align-items: start; }
.nb-h-zeilen--zwei { columns: 2; column-gap: 40px; }
.nb-h-zeilen--zwei li { break-inside: avoid; }
.nb-h-zeilen--zwei li:nth-child(6) a { border-top: 0; padding-top: var(--nb-space-3xs); }

/* Aufträge (angemeldet), Chip im Kartenkopf (komponenten-hilfe.md §6) */
.nb-h-karte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nb-space-s); margin-bottom: var(--nb-space-2xs); }
.nb-h-karte__kopf--chip { align-items: center; margin-bottom: var(--nb-space-m); }
.nb-h-chip--kopf { flex: none; }
.nb-h-chip--kopf svg { margin-right: -4px; }
.nb-h-auftraege { display: flex; flex-direction: column; }
.nb-h-auftrag { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--nb-space-s); align-items: center; padding: var(--nb-space-s) 0; border-top: 1px solid var(--nb-border-hairline); text-decoration: none; color: inherit; }
.nb-h-auftrag:first-of-type { border-top: 0; padding-top: 0; }
.nb-h-auftrag:last-child { padding-bottom: 0; }
.nb-h-auftrag b { display: block; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-h-auftrag small { display: block; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }

@media (max-width: 1080px) {
  .nb-h-themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .nb-h-paar { grid-template-columns: minmax(0, 1fr); }
  .nb-h-zeilen--zwei { columns: 1; }
  .nb-h-zeilen--zwei li:nth-child(6) a { border-top: 1px solid var(--nb-border-hairline); padding-top: var(--nb-space-s); }
}
@media (max-width: 600px) {
  .nb-h-themen { gap: 10px; }
  .nb-h-thema { padding: var(--nb-space-s); min-height: 0; gap: var(--nb-space-2xs); }
  .nb-h-thema b { font-size: var(--nb-t-body-01); }
  .nb-h-thema span { display: none; }
  .nb-h-thema--bald i { position: static; display: table; margin-top: var(--nb-space-2xs); }
}

/* baukasten/sektionen/hilfe-fuss/sektion.css */
/* Fuß des Hilfecenters (Studio hilfe.css Z. 296-303, 365, 500, 536). Außerhalb von main, @media statt @container. */
.nb-h-fuss { background: var(--nb-surface-component); color: var(--nb-text-heading); }
.nb-h-fuss__in { display: flex; flex-wrap: wrap; gap: var(--nb-space-s) var(--nb-space-l); align-items: center; padding-block: var(--nb-space-l); font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-h-fuss__logo { display: block; height: 18px; width: auto; transform: translateY(12%); color: var(--nb-text-heading); }
.nb-h-fuss nav { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) 20px; }
.nb-h-fuss nav a { color: var(--nb-text-body); text-decoration: none; }
.nb-h-fuss nav a:hover { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; }
.nb-h-fuss__recht { margin-left: auto; color: var(--nb-text-muted); }
/* Trefferflächen unsichtbar: Links sind 21 px hoch, die Fläche 44 hoch und 10 px breiter je Seite (halber Spaltenabstand,
   so berühren sich Nachbarn, ohne zu überlappen). Unter 570 px brechen die Links in Reihen mit 8 px Abstand um (gemessen
   03.10.2026), deshalb bis 600 px nur 4 px je Seite, 29 px hoch. Mehr ginge nur mit Überlappung */
.nb-h-fuss nav a { position: relative; }
.nb-h-fuss nav a::after { content: ""; position: absolute; left: -10px; right: -10px; top: 50%; height: 44px; transform: translateY(-50%); }
@media (max-width: 600px) {
  .nb-h-fuss__recht { margin-left: 0; }
  .nb-h-fuss nav a::after { height: calc(100% + var(--nb-space-2xs)); }
}

/* baukasten/sektionen/hilfe-thema/sektion.css */
/* Thema des Hilfecenters (Studio hilfe.css Z. 97, 186-189, 269, 367-368, 434-436, 487, Inline-Stile hilfe.js Z. 256-257). */
.nb-h-abschnitte { display: flex; flex-direction: column; gap: 40px; }
.nb-h-abschnitt { scroll-margin-top: var(--nb-space-m); }
.nb-h-abschnitt-titel { margin: 0 0 var(--nb-space-s); font-size: 20px; font-weight: var(--nb-weight-semibold); line-height: 1.3; }
.nb-h-rand__text { margin-top: var(--nb-space-2xs); }
.nb-h-rand__knoepfe { margin-top: var(--nb-space-s); }
/* Stand in der Karte: ink-100 ohne Schatten (Umkehr) */
.nb-h-statuszeile { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-s); align-items: center; padding: 14px 18px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); font-size: var(--nb-t-body-01); margin-top: var(--nb-space-xs); }
/* Im Studio ohne Gewicht (b, 700), gerendert wird der 600er-Schnitt. Hier ausdrücklich 600, sonst meldet SCHRIFT künstliches Fett */
.nb-h-statuszeile b { font-weight: var(--nb-weight-semibold); }
/* Rand bündig mit der ersten Karte links, nicht mit dem Abschnittstitel davor (Titel 20 × 1,3 + 16 px), Daniel 03.10.2026 */
@media (min-width: 1081px) {
  .nb-h-abschnitte + .nb-h-seitenleiste { margin-top: calc(20px * 1.3 + var(--nb-space-s)); }
}
@media (max-width: 600px) {
  .nb-h-sprungleiste--rollen { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; }
  /* 2 px Polster oben und unten mit Gegenrand, damit die 44-px-Trefferfläche der Chips nicht abgeschnitten wird */
  .nb-h-sprungleiste--rollen { padding-block: 2px; margin-block: -2px; }
}

/* baukasten/sektionen/hilfe-artikel/sektion.css */
/* Hilfe-Artikel als Lesespalte (Studio hilfe.css Z. 192-222, 352-355, 381-385, 410-411, 501-505, 538-583, 594, 617-647).
   Nur die gewählte Fassung „lese“, Werte komponenten-hilfe.md §2 bis §5. Die Kaskade des Studios ist aufgelöst: die
   Kopfkarte ohne Kernzahl bleibt am Handy zweispaltig, weil Z. 622 die Handy-Regel Z. 594 überstimmt. */

/* ---------- Kopfkarte (§2) ---------- */
.nb-h-held-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; }
.nb-h-held-karte__rechts { display: flex; flex-direction: column; gap: var(--nb-space-s); align-items: flex-start; }
.nb-h-kernzahl { display: flex; flex-direction: column; gap: var(--nb-space-3xs); padding-right: 40px; border-right: 1px solid var(--nb-border-hairline); }
.nb-h-kernzahl b { font-size: 56px; line-height: 1; letter-spacing: -.03em; font-weight: var(--nb-weight-semibold); white-space: nowrap; }
.nb-h-kernzahl span { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); max-width: 18ch; line-height: 1.45; }
.nb-h-kurz { font-size: 20px; line-height: 1.5; color: var(--nb-text-heading); margin: 0; }
.nb-h-held-karte .nb-h-kurz { max-width: 31em; }
/* Fassung B ohne Kernzahl: Antwort links, Handlung rechts */
.nb-h-held-karte--rueckfall { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: space-between; align-items: center; gap: var(--nb-space-s) 40px; }
.nb-h-held-karte__handlung { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); }

/* ---------- Lesespalte (§3), Text frei auf dem Grund ---------- */
.nb-h-lese { display: flex; flex-direction: column; gap: 0; max-width: none; }
.nb-h-lese h2 { scroll-margin-top: var(--nb-space-m); }
.nb-h-lese p { margin: 0; color: var(--nb-text-body); max-width: 32em; }
.nb-h-lese-abschnitt { max-width: 32em; margin-top: 56px; scroll-margin-top: var(--nb-space-m); hyphens: auto; -webkit-hyphens: auto; }
.nb-h-lese-abschnitt:first-of-type { margin-top: var(--nb-space-s); }
.nb-h-lese-h2 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; font-weight: var(--nb-weight-semibold); margin: 0 0 var(--nb-space-s); text-wrap: balance; }
.nb-h-artikeltext > * + * { margin-top: var(--nb-space-s); }
.nb-h-lese-abschnitt .nb-h-artikeltext > ol, .nb-h-lese-abschnitt .nb-h-artikeltext > ul { margin-top: 20px; }
.nb-h-lese-abschnitt .nb-h-artikeltext > ol + p, .nb-h-lese-abschnitt .nb-h-artikeltext > ul + p { margin-top: 20px; }
.nb-h-lese-abschnitt .nb-h-artikeltext > :first-child { margin-top: 0; }
.nb-h-artikeltext a { color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.nb-h-artikeltext a:hover { color: var(--nb-action-primary-active); }
/* Schrittlinie: Kreis weiß mit sh-ruht, Verbindung ink-300 (§3, §9) */
.nb-h-lese .nb-h-schritte li::before { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-h-lese .nb-h-schritte li::after { background: var(--nb-ink-300); }
/* Fälle: Punkt auf der Achse der Schrittkreise, Begriff vorn */
.nb-h-faelle { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nb-space-s); }
.nb-h-faelle li { position: relative; padding: 0 0 0 52px; color: var(--nb-text-body); max-width: 32em; }
.nb-h-faelle li::before { content: ""; position: absolute; left: 13px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--nb-night); }
.nb-h-faelle strong { display: inline; margin: 0; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }

/* ---------- Rand: Sprungliste und Aufklapper (§5) ---------- */
.nb-h-sprungliste { list-style: none; margin: var(--nb-space-2xs) 0 0; padding: 0; display: flex; flex-direction: column; }
.nb-h-sprungliste a { display: block; padding: var(--nb-space-2xs) 0 var(--nb-space-2xs) 14px; border-left: 2px solid var(--nb-border-hairline); text-decoration: none; color: var(--nb-text-body); font-size: var(--nb-t-body-01); line-height: 1.5; user-select: none; -webkit-user-select: none; }
.nb-h-sprungliste a:hover { color: var(--nb-text-heading); }
/* Fokus nur per Tastatur (komponenten-hilfe.md §7), nach dem Mausklick kein Ring */
.nb-h-sprungliste a:focus { outline: none; }
.nb-h-sprungliste a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page); }
.nb-h-sprungliste a.ist-hier { color: var(--nb-text-heading); border-left-color: var(--nb-night); }
.nb-h-sprung-klapp { display: none; padding: 0; margin: 0 0 var(--nb-space-m); }
.nb-h-sprung-klapp summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 20px; user-select: none; -webkit-user-select: none; }
.nb-h-sprung-klapp summary::-webkit-details-marker { display: none; }
.nb-h-sprung-klapp summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--nb-night); border-bottom: 2px solid var(--nb-night); transform: rotate(45deg); margin-right: var(--nb-space-3xs); box-sizing: content-box; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-h-sprung-klapp[open] summary::after { transform: rotate(-135deg); }
.nb-h-sprung-klapp .nb-h-sprungliste { margin: 0; padding: 0 20px 20px; }

/* ---------- Ende (§4): Abstimmung als Zeile, Linkliste, Abschlusskarte ---------- */
.nb-h-lese-ende { margin-top: 56px; display: flex; flex-direction: column; gap: var(--nb-space-xl); }
.nb-h-abstimmung { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--nb-space-xs) 20px; max-width: 32em; }
.nb-h-abstimmung__dank { display: flex; align-items: center; gap: 10px; font-weight: var(--nb-weight-semibold); }
.nb-h-abstimmung .nb-h-abstimmung__text { margin-top: var(--nb-space-3xs); }
.nb-h-lese-verwandt { max-width: 32em; }
.nb-h-lese-verwandt .nb-h-lese-h2 { margin-bottom: var(--nb-space-xs); }
.nb-h-linkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nb-space-3xs); }
.nb-h-linkliste a { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 44px; padding: 0; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; line-height: 1.4; user-select: none; -webkit-user-select: none; }
.nb-h-linkliste a svg { flex: none; color: var(--nb-ink-500); transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-h-linkliste a:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nb-h-linkliste a:hover svg { transform: translateX(3px); color: var(--nb-text-heading); }
.nb-h-abschluss-karte { display: flex; flex-wrap: wrap; gap: 20px var(--nb-space-l); align-items: center; justify-content: space-between; max-width: 32em; }
.nb-h-abschluss-karte .nb-h-b1 { margin-top: 6px; }
.nb-h-abschluss-karte .nb-h-knoepfe { margin: 0; }

/* Rand bündig mit dem ersten Abschnitt der Lesespalte (16 px davor), Daniel 03.10.2026 */
@media (min-width: 1081px) {
  .nb-h-lese + .nb-h-seitenleiste { margin-top: var(--nb-space-s); }
}
@media (max-width: 1080px) {
  .nb-h-sprung-klapp { display: block; }
  .nb-h-seitenleiste .nb-h-sprung-karte { display: none; }
}
@media (max-width: 600px) {
  .nb-h-held-karte { grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-s); }
  /* Am Handy einspaltig, die Handlung steht unter der Kurzantwort. Zweispaltig quetschte sie den Text auf ein Wort je Zeile
     (Daniel 04.10.2026, Artikel „Neues Angebot“) */
  .nb-h-held-karte--rueckfall { grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-s); }
  .nb-h-kernzahl { padding: 0 0 var(--nb-space-s); border-right: 0; border-bottom: 1px solid var(--nb-border-hairline); }
  .nb-h-kernzahl b { font-size: 40px; }
  .nb-h-kurz { font-size: 18px; }
  .nb-h-lese-abschnitt { margin-top: 40px; }
  .nb-h-lese-abschnitt:first-of-type { margin-top: var(--nb-space-s); }
  .nb-h-lese-h2 { font-size: 18px; }
  .nb-h-lese-ende { margin-top: 40px; gap: 40px; }
}

/* baukasten/sektionen/hilfe-ende/sektion.css */
/* Endseiten des Hilfecenters (Studio hilfe.css Z. 230-235, 321-322, 401-403, 408, 417, 423, 609-610, Inline-Stile
   hilfe.js Z. 514, 518, 530). Figur 4:3, Höhe aus dem Seitenverhältnis. Die Karte „Danke“ ist seit Schnitt B (03.10.2026)
   erfolg() aus kern/formular.css (.nb-f-erfolg), hier bleiben die Figur-Karte der 404 und der Teil darunter. */
.nb-h-figur-karte { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; }
.nb-h-figur { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.nb-h-figur-karte .nb-h-figur { justify-self: end; }
.nb-h-figur-text { display: flex; flex-direction: column; gap: var(--nb-space-s); align-items: flex-start; }
.nb-h-ende__schritte { margin-top: 20px; }
.nb-h-ende__knoepfe { margin-top: var(--nb-space-m); }
.nb-h-ende__suche { width: 100%; max-width: 520px; }
@media (max-width: 820px) {
  .nb-h-figur-karte { grid-template-columns: minmax(0, 1fr); }
  .nb-h-figur-karte .nb-h-figur { max-width: 220px; order: -1; justify-self: start; }
}

/* baukasten/sektionen/hilfe-suche/sektion.css */
/* Suchseite des Hilfecenters (Studio hilfe.css Z. 52, 137, 153, 226, 341, 428, 432, 493; Kaskade aufgelöst, gerendert gilt).
   Chip als Wahl im Kern (kern/hilfe.css), Figur-Karte aus hilfe-ende. */
.nb-h-ergebnis-kopf { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin-bottom: var(--nb-space-xs); }
.nb-h-treffer a small { display: block; margin-top: 2px; font-weight: var(--nb-weight-regular); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
/* Gefundenes Wort: ink-100 hinter dem Wort, Semibold Night, Radius 8 */
.nb-h-treffer-wort { margin: 0 -1px; padding: 0 3px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-component); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-h-hauptteil > .nb-h-kontaktkarte { max-width: 720px; }
/* Titel ohne Treffer: 28/1,15, −0,02em (Handy 24), keine Rolle in typografie.md, Wert des Studios */
.nb-h-h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; font-weight: var(--nb-weight-semibold); text-wrap: balance; }
.nb-h-such-themen { margin-top: var(--nb-space-s); }
@media (max-width: 600px) {
  .nb-h-h1 { font-size: 24px; }
}

/* baukasten/sektionen/hilfe-kontakt/sektion.css */
/* Kontakt des Hilfecenters (Studio hilfe.css Z. 236-294, 356-364, 379-380, 386, 405-407, 446, 452-466, 487-492, 606).
   Werte gerendert gemessen, wo die Kaskade des Studios überstimmt, steht der Wert, der am Ende galt. Felder, Ablage, Wahl,
   Kacheln, Senden und Netzmeldung bringt kern/formular.css (komponenten-formular.md §2 bis §5g). */
.nb-hk-spalte { display: flex; flex-direction: column; gap: var(--nb-space-xs); max-width: 840px; }
.nb-hk-gast { display: flex; flex-wrap: wrap; gap: var(--nb-space-s) var(--nb-space-m); align-items: center; justify-content: space-between; }
.nb-hk-gast .nb-h-b1 { margin-top: 6px; }

/* Schritte als Karten: weiß, Radius 24, sh-ruht. Nummer 32 px auf ink-100, erledigt Night mit Haken, noch zu ink-600 */
.nb-hk-folge { display: flex; flex-direction: column; gap: var(--nb-space-xs); margin: 0; }
.nb-hk-schritt { border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-hk-schritt__kopf { display: flex; align-items: center; gap: var(--nb-space-s); padding: var(--nb-space-m) var(--nb-space-l); }
.nb-hk-schritt__nr { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--nb-surface-component); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-hk-schritt--fertig .nb-hk-schritt__nr { background: var(--nb-night); color: var(--nb-surface-page); }
.nb-hk-schritt--zu .nb-hk-schritt__nr { background: var(--nb-surface-component); color: var(--nb-text-muted); }
.nb-hk-schritt--zu .nb-hk-schritt__kopf { color: var(--nb-text-muted); }
.nb-hk-schritt__titel { flex: 1; min-width: 0; margin: 0; font-size: 20px; line-height: 1.3; font-weight: var(--nb-weight-semibold); }
.nb-hk-schritt--fertig .nb-hk-schritt__titel, .nb-hk-schritt--zu .nb-hk-schritt__titel { font-size: var(--nb-t-heading-03); }
/* Titel, die per Skript den Fokus bekommen, zeigen keinen Ring (komponenten-hilfe.md §7) */
.nb-hk-schritt .nb-hk-schritt__titel:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.nb-hk-schritt__wert { min-width: 0; margin-left: auto; font-size: var(--nb-t-body-01); color: var(--nb-text-body); text-align: right; overflow-wrap: anywhere; }
/* „Ändern“ als kleiner grauer Knopf statt Link (Daniel 03.10.2026: „diese hässlichen hyperlink aussehenden chips bei ändern … kannst du das endlich mal ändern“). Grau in der weißen Karte (Umkehr G29), Night ohne Unterstrich */
.nb-hk-schritt__aendern { flex: none; display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: none; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-hk-schritt__aendern:hover { background: var(--nb-ink-200); }
.nb-hk-schritt__aendern:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 2px; }
/* „Ändern“ ist 37 px hoch, die Trefferfläche unsichtbar 44 */
.nb-hk-schritt__aendern { position: relative; }
.nb-hk-schritt__aendern::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nb-hk-schritt__von { margin-left: auto; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); white-space: nowrap; }
.nb-hk-schritt__inhalt { display: flex; flex-direction: column; gap: 20px; padding: 0 var(--nb-space-l) var(--nb-space-l) 80px; }
/* Neuer Schritt erscheint von oben, 300 ms, 6 px. Nur nach einer Wahl, nicht beim Laden */
.nb-hk-schritt__inhalt--neu { animation: nb-hk-auf var(--nb-motion-transform) var(--nb-motion-kurve); }
@keyframes nb-hk-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Thema und Selbsthilfe. Selbsthilfe ink-100 in der weißen Karte, Knöpfe darin weiß ohne Rand, auch im Hover (gerendert) */
.nb-hk-themen { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
.nb-hk-selbst { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-hk-selbst .nb-h-knopf--zweit, .nb-hk-selbst .nb-h-knopf--zweit:hover { background: var(--nb-surface-page); box-shadow: none; }
.nb-hk-selbst .nb-h-zeilen a { padding: var(--nb-space-xs) 0; font-size: var(--nb-t-body-01); }
.nb-hk-sofort { margin-top: 10px; }
.nb-hk-status { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-s); align-items: center; padding: 14px 18px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); font-size: var(--nb-t-body-01); }
/* Nebenwege („Ich habe keine Nummer“, „Anderes Thema“, „Trotzdem schreiben“) als Zweitknopf neben dem Night-Knopf statt Link (Daniel 03.10.2026). Pille mit Ring border-control, Night, ohne Unterstrich */
.nb-h-textlink.nb-hk-textknopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--nb-space-m); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); box-shadow: inset 0 0 0 1px var(--nb-border-control); font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: none; cursor: pointer; transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-h-textlink.nb-hk-textknopf:hover { color: var(--nb-text-heading); box-shadow: inset 0 0 0 1px var(--nb-text-heading); }
.nb-h-textlink.nb-hk-textknopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 2px; }

/* Nachricht */
.nb-hk-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-xs); }
/* Wie gerendert: p ohne Rücksetzen im Studio, je 16 px Rand oben und unten bei „Antwort an“ und der Netzmeldung */
.nb-hk-schritt__inhalt > .nb-f-netz { margin: var(--nb-space-s) 0; }
.nb-hk-antwort { display: flex; flex-wrap: wrap; gap: 6px var(--nb-space-xs); align-items: center; margin: var(--nb-space-s) 0; font-size: var(--nb-t-body-01); color: var(--nb-text-body); }
.nb-hk-antwort b { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-hk-recht { max-width: 65ch; margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-hk-absenden { display: flex; flex-wrap: wrap; gap: var(--nb-space-s); align-items: center; justify-content: space-between; }

@media (max-width: 600px) {
  .nb-hk-schritt__kopf { gap: var(--nb-space-xs); padding: 18px 20px; }
  .nb-hk-schritt__inhalt { padding: 0 20px var(--nb-space-m); }
  .nb-hk-schritt__titel { font-size: 18px; }
  .nb-hk-schritt__wert { display: none; }
  .nb-hk-schritt--fertig .nb-hk-schritt__kopf { flex-wrap: wrap; }
  .nb-hk-schritt--fertig .nb-hk-schritt__wert { display: block; order: 3; flex-basis: 100%; margin: -6px 0 0 44px; font-size: var(--nb-t-body-02); text-align: left; }
  .nb-hk-paar { grid-template-columns: minmax(0, 1fr); }
  .nb-hk-absenden .nb-h-knopf { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nb-hk-schritt__inhalt--neu { animation: none; } }

/* Falle für Bots (tools/hilfe/kontakt-kern.mjs): außerhalb des Bildes, nicht per Tab erreichbar, für Vorleser verborgen */
.nb-hk-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* h, i, j: Themen-Chips Ton in Ton, gewählt mit Haken (farbsystem.md Z. 275, zweites Merkmal Z. 543) */
.nb-hk-filter { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
.nb-hk-filter__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 calc(var(--nb-space-s) + 11px); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; position: relative; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-hk-filter__chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nb-hk-filter__chip:hover { background: var(--nb-ink-200); }
/* Gleiche Breite gewählt und ungewählt (OE 87): ungewählt trägt der Innenabstand die 22 px aus Haken 16 und Lücke 6, sonst rutscht am Handy das letzte Thema unter dem Finger in die nächste Zeile */
.nb-hk-filter__chip[aria-pressed="true"] { padding: 0 var(--nb-space-s); background: var(--nb-surface-stage); color: var(--nb-sky-900, #3C4686); }
.nb-hk-filter__chip svg { width: 16px; height: 16px; }
.nb-hk-filter__chip:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 2px; }

/* ---------- Schritt 3, Fassungen e bis g (Runde 2, KRITIK-hilfe-kontakt-2026-10-03.md): Themen wie a, darunter je Artikel
   eine Kachel nur mit Titel und Pfeil. e weiß im grauen Kasten (G21 Weiß heißt antippen, G29 Umkehr), f und g grau wie
   die Bereiche in Schritt 1 (G2, formular.css .nb-f-kachel). Weiter Night gefüllt (G9). Kein Signal-Link, kein Kernsatz ---------- */
.nb-hk-ruhig { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nb-space-m); margin-top: var(--nb-space-m); }
.nb-hk-ruhig > * { align-self: stretch; }
.nb-hk-ruhig > div:last-child { align-self: flex-start; }
.nb-hk-ruhig--e { padding: 20px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-hk-artikelblock__titel { margin: 0 0 var(--nb-space-xs); font-size: 18px; line-height: 1.3; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-hk-artikelreihe { display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-hk-artikel { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 18px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); text-decoration: none; color: var(--nb-text-heading); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-hk-artikel:hover { background: var(--nb-ink-200); }
.nb-hk-ruhig--e .nb-hk-artikel { background: var(--nb-surface-page); }
.nb-hk-ruhig--e .nb-hk-artikel:hover { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-hk-artikel__titel { flex: 1; min-width: 0; font-size: var(--nb-t-body-01); line-height: 1.4; font-weight: var(--nb-weight-semibold); }
.nb-hk-artikel > svg { flex: none; color: var(--nb-ink-500); transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-hk-artikel:hover > svg { transform: translateX(3px); color: var(--nb-text-heading); }
.nb-hk-artikel:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 2px; }
.nb-hk-artikel__zeichen { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); color: var(--nb-text-heading); }
.nb-hk-artikel__zeichen svg { width: 20px; height: 20px; }

@media (max-width: 600px) {
  .nb-hk-ruhig--e { padding: 16px; }
  .nb-hk-artikel { padding: 14px 16px; }
  .nb-hk-ruhig > div:last-child { align-self: stretch; }
  .nb-hk-ruhig > div:last-child .nb-h-knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .nb-hk-artikel, .nb-hk-artikel > svg { transition: none; } }

/* i: Selbsthilfe als dunkle Kachel. Night ist die Hauptaktion (farbsystem.md, dritte Ausnahme), Zeichen in einer weißen
   Kachel wie bei den Artikeln, Hover #17243A wie der Night-Knopf */
.nb-hk-sofortkachel { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 18px; border-radius: var(--nb-radius-input); background: var(--nb-night); color: var(--nb-surface-page); text-decoration: none; transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Hover nur Schatten, nie Tönung (G28). Der Farbwechsel nach #17243A ließ die Schrift unter Windows beim Überblenden zucken
   (Daniel 04.10.2026: „der schwabbelt halt ganz schön wenn man drüber hovert“) */
.nb-hk-sofortkachel:hover { box-shadow: var(--nb-sh-hoch); }
.nb-hk-sofortkachel__zeichen { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); color: var(--nb-text-heading); }
.nb-hk-sofortkachel__zeichen svg { width: 20px; height: 20px; }
.nb-hk-sofortkachel > svg { flex: none; color: var(--nb-surface-page); transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-hk-sofortkachel:hover > svg { transform: translateX(3px); }
.nb-hk-sofortkachel:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 2px; }
@media (max-width: 600px) {
  .nb-hk-ruhig .nb-h-knoepfe { flex-direction: column; align-items: stretch; }
  .nb-hk-ruhig .nb-h-knoepfe > * { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .nb-hk-sofortkachel, .nb-hk-sofortkachel > svg { transition: none; } }

/* Band hinter der ersten Karte (04.10.2026, Daniel: „das blaue landet fast bündig auf der Worum geht es Leiste“). Die
   Treppe des Kerns läuft 88 px (Handy 64 px) hinter die erste Karte. Schritt 1 ist zugeklappt nur 65 px hoch, das Band
   endete 4 px unter der Karte. Hier endet es nach 32 px, etwa in der Mitte der zugeklappten Karte. */
.nb-h-treppe:has(.nb-hk-folge) { --nb-h-treppe: 32px; }

/* tools/hilfe/export.mjs: Platzhalter der Suche */
[data-nb-h-platzhalter] { --nb-skelett-licht: var(--nb-ink-50); }
[data-nb-hs-haupt][data-nb-h-platzhalter] { pointer-events: none; user-select: none; }
:is([data-nb-hs-band][data-nb-h-platzhalter] .nb-h-unter, [data-nb-hs-haupt][data-nb-h-platzhalter] .nb-h-karte:not(.nb-h-kontaktkarte) :is(li > a > span, h1, p, .nb-h-chip, .nb-h-knopf, .nb-h-textlink, .nb-h-figur)) {
  color: transparent !important;
  background: var(--nb-ink-100) linear-gradient(90deg, transparent 0, var(--nb-skelett-licht) 50%, transparent 100%) no-repeat !important;
  background-size: 200% 100% !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: var(--nb-radius-badge);
  opacity: 0;
  animation: nb-skelett-zeigen var(--nb-motion-farbe) var(--nb-motion-kurve) 400ms forwards, nb-skelett-streif var(--nb-motion-skeleton-sweep) var(--nb-motion-kurve) 400ms infinite;
}
:is([data-nb-hs-band][data-nb-h-platzhalter] .nb-h-unter, [data-nb-hs-haupt][data-nb-h-platzhalter] .nb-h-karte:not(.nb-h-kontaktkarte) :is(li > a > span, h1, p, .nb-h-chip, .nb-h-knopf, .nb-h-textlink, .nb-h-figur)) * { color: transparent !important; }
:is([data-nb-hs-band][data-nb-h-platzhalter] .nb-h-unter, [data-nb-hs-haupt][data-nb-h-platzhalter] .nb-h-karte:not(.nb-h-kontaktkarte) :is(li > a > span, h1, p, .nb-h-chip, .nb-h-knopf, .nb-h-textlink, .nb-h-figur)) svg { visibility: hidden; }
@keyframes nb-skelett-zeigen { to { opacity: 1; } }
@keyframes nb-skelett-streif { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { :is([data-nb-hs-band][data-nb-h-platzhalter] .nb-h-unter, [data-nb-hs-haupt][data-nb-h-platzhalter] .nb-h-karte:not(.nb-h-kontaktkarte) :is(li > a > span, h1, p, .nb-h-chip, .nb-h-knopf, .nb-h-textlink, .nb-h-figur)) { background-image: none !important; animation: nb-skelett-zeigen 1ms linear 400ms forwards; } }