/* templates/NextBuy/themes/nextbuy/nb-fonts.css */
/* Schriften fuer das NextBuy-Child-Template.
 *
 * Vier Schnitte, exakt die aus design/werte/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. Generiert aus design/tokens.json, nicht von Hand ändern.
 * Quelle sind die gesperrten Werte-Dokumente in design/werte/,
 * farbsystem.md, typografie.md und bildmarke.md.
 * Neu bauen mit: node design/werkzeug/build-tokens.mjs   (Stand 2026-10-09)
 *
 * Gescoped auf .nb-v3. Alles greift nur innerhalb eines Elements mit
 * dieser Klasse, damit das laufende Theme unberuehrt bleibt.
 * Pruefen mit: node design/werkzeug/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-signal-wahl: #F5F4FF;
  --nb-signal-wahl-linie: #B4B0E5;
  --nb-signal-wahl-kreis: #544598;
  --nb-sky-300: #EDF0FE;
  --nb-sky-500: #9DAEF7;
  --nb-sky-700: #7887CD;
  --nb-sky-900: #3C4686;
  --nb-sky-druck: #D4DCFC;
  --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-150: #EBEDF2; /* 06.10.2026, graue Bedienfläche direkt auf dem Grund K1 (Menüpunkt im Konto, sein Hover, Knopf „Mein Konto“ am Handy). Zum Grund 1,12:1, zu Weiß 1,17:1. Daniel: ink-100 „viel zu hell“, ink-200 „schon sehr kräftig“ */
  --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-surface-selected: #F5F4FF;
  --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-text-on-stage: #3C4686;
  --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-selected: #B4B0E5;
  --nb-border-control-selected: #544598;
  --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(0.23, 1, 0.32, 1);
  --nb-motion-kurve-bewegung: cubic-bezier(0.77, 0, 0.175, 1);
  --nb-motion-farbe: 200ms;
  --nb-motion-rand: 250ms;
  --nb-motion-transform: 300ms;
  --nb-motion-druck: 160ms;
  --nb-motion-druck-scale: 1;
  --nb-motion-druck-scale-breit: 1;
  --nb-motion-zeichen-scale: 1.03;
  --nb-motion-reveal: 600ms;
  --nb-motion-skeleton-sweep: 1200ms;
  --nb-motion-reveal-versatz: 60ms;
  --nb-motion-reveal-versatz-px: 20;
  --nb-motion-fenster: 160ms;
  --nb-motion-fenster-aus: 120ms;
  --nb-motion-fenster-kurve: cubic-bezier(0.23, 1, 0.32, 1);
  --nb-motion-blatt: 300ms;
  --nb-motion-blatt-aus: 200ms;
  --nb-motion-liste: 200ms;
  --nb-motion-liste-aus: 150ms;
  --nb-motion-liste-scale: 0.95;
  --nb-motion-hinweis-aus: 150ms;
  --nb-motion-akkordeon-auf: 300ms;
  --nb-motion-akkordeon-zu: 200ms;

  /* Blatt am Handy (Daniel 14.10.2026, tokens.json blatt): von unten, oben gerundet */
  --nb-blatt-radius: var(--nb-radius-card) var(--nb-radius-card) 0 0;
  --nb-blatt-hoehe: 88svh;
  --nb-blatt-unten: calc(var(--nb-space-m) + env(safe-area-inset-bottom));

  /* Schweif (Daniel 14.10.2026, tokens.json schweif): Original-Pfad, Lime auf Night, einmal im dunklen Band */
  --nb-schweif-farbe: var(--nb-text-on-dark-accent);
  --nb-schweif-strich: 163;

  /* Gerätebild (Daniel 16.10.2026, tokens.json geraetebild, G63): drei Quadrate, Radius 22 % der Kante */
  --nb-geraetebild-s: 40px;
  --nb-geraetebild-m: 56px;
  --nb-geraetebild-l: 72px;
  --nb-geraetebild-radius: 22%;

  /* 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(24px, 16.7px + 1.88vw, 40px);
  --nb-t-heading-01: clamp(24px, 22.2px + 0.47vw, 28px);
  --nb-t-heading-02: clamp(16px, 14.2px + 0.47vw, 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(20px, 13.6px + 1.65vw, 34px);
  --nb-t-price-02: 16px;
  --nb-t-price-03: clamp(18px, 17.1px + 0.24vw, 20px);

  /* Layout */
  --nb-container: 1200px;
  --nb-measure: 65ch;
  --nb-breakpoint-desktop: 1240px;
  --nb-breakpoint-mobil: 390px;
  --nb-suche-hoehe: 440px;
  --nb-suche-spalte: 300px;
  --nb-suche-mindestbreite: 560px;
  --nb-suche-zeile-zwei: 56px;
  --nb-suche-bild-klein: 56px;
  --nb-suche-buehne: 112px;
  --nb-suche-neben: 220px;
}

/* 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; }
  /* Druck nach Fassung C (Daniel 09.10.2026, G52) laeuft ueber die Eigenschaft scale, nie ueber transform.
     Bei reduzierter Bewegung gibt kein Knopf nach, es bleibt der Farbwechsel */
  .nb-v3 * { scale: none !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; }

/* ---------- 1b. Kante. Farbe hinter Statusleiste am iPhone (13.10.2026) ----------
   Safari 26 nimmt die Farbe oben von einem fixed-Element an der Kante, volle
   Breite, mindestens 6 px hoch, sonst vom body. Mit opacity 0 griff es auf
   Daniels iPhone nicht (13.10.2026), deshalb sichtbar in genau der Farbe, die
   darunter liegt. js/nb-kante.js setzt sie, hier steht nur der Anfang bis dahin. */
.nb-kante {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 2147483000;
  background-color: var(--nb-surface-page);
}
body:has(.nb-announcement-section) .nb-kante { background-color: var(--nb-surface-dark); }
/* Unten nur, solange ein Fenster oder Schirm an der Kante liegt, js/nb-kante.js setzt und entfernt ihn (14.10.2026) */
.nb-kante.nb-kante--unten { top: auto; bottom: 0; }

/* ---------- 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: Banner, Einstellungen und die Zustandsklassen von consent.js (.mini, .consent-modal, .consent-hidden)
   stehen seit dem 06.10.2026 in nb-cookie.css, erzeugt von baukasten/werkzeug/cookie-export.mjs. */

/* 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; }

/* ---------- Warum zahle ich Versand? (snippets/nb-versand-info.tpl, Daniel 13.10.2026) ----------
   Das i neben „Versand“ und sein Fenster. Werte wie das Fenster der Widerrufsbelehrung in Prüfen
   (baukasten/sektionen/kasse-pruefen nb-kp__fenster). Das i ist 20 px groß, die Trefferfläche 44 px über ::after. */
.nb-vi { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 0 0 var(--nb-space-3xs); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--nb-text-muted); vertical-align: -4px; cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vi::after { content: ""; position: absolute; inset: -12px; }
.nb-vi svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .nb-vi:hover { color: var(--nb-text-heading); } }
.nb-vi:active { color: var(--nb-text-heading); }
.nb-vi:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-vi__fenster { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); margin: auto; padding: 0 0 var(--nb-space-m); border: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); color: var(--nb-text-body); font-family: var(--nb-font-sans); }
.nb-vi__fenster::backdrop { background: var(--nb-alpha-scrim); }
/* Abdunklung blendet mit ein wie beim Widerruf in Prüfen (nb-kp__fenster), vorher stand sie sofort voll (Daniel 14.10.2026 abends) */
.nb-vi__fenster:popover-open::backdrop { animation: nb-vi-weich var(--nb-motion-farbe) var(--nb-motion-kurve) both; }
.nb-vi__fenster:popover-open { animation: nb-vi-auf var(--nb-motion-fenster) var(--nb-motion-fenster-kurve) both; }
@keyframes nb-vi-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nb-vi__fenster:popover-open { animation: none; } }
.nb-vi__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-m) var(--nb-space-m) var(--nb-space-xs) var(--nb-space-l); }
.nb-vi__titel { margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; color: var(--nb-text-heading); }
.nb-vi__zu { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-vi__zu:hover { background: var(--nb-ink-300); } }
.nb-vi__zu:active { background: var(--nb-ink-300); }
.nb-vi__zu:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-vi__zu svg { width: 20px; height: 20px; }
.nb-vi__text { margin: 0; padding: 0 var(--nb-space-l); font-size: var(--nb-t-body-01); line-height: 1.5; }
@media (max-width: 767px) { .nb-vi__kopf { padding-left: var(--nb-space-m); } .nb-vi__text { padding-inline: var(--nb-space-m); } }
/* Zu-Effekt wie jedes S-Fenster (Fassung C, nachgezogen 14.10.2026, vorher sofort weg). overlay hält das Popover in der
   obersten Ebene, bis es ausgeblendet ist */
@supports (overlay: auto) {
  .nb-vi__fenster:not(:popover-open), .nb-vi__fenster:not(:popover-open)::backdrop { opacity: 0; transition: opacity var(--nb-motion-fenster-aus) var(--nb-motion-kurve), display var(--nb-motion-fenster-aus) allow-discrete, overlay var(--nb-motion-fenster-aus) allow-discrete; }
}
/* Handy: Blatt von unten (Daniel 14.10.2026, tokens.json blatt, Baukasten kasse-pruefen). Volle Breite, oben gerundet,
   höchstens blatt-hoehe, Text über der Safe Area. Auf in motion-blatt mit fenster-kurve, zu in motion-blatt-aus */
@media (max-width: 767px) {
  .nb-vi__fenster { width: 100%; max-width: 100%; max-height: var(--nb-blatt-hoehe); margin: auto 0 0; padding-bottom: var(--nb-blatt-unten); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--nb-blatt-radius); }
  .nb-vi__fenster:popover-open { animation: nb-vi-blatt var(--nb-motion-blatt) var(--nb-motion-fenster-kurve) both; }
  @supports (overlay: auto) {
    .nb-vi__fenster:not(:popover-open) { opacity: 1; transform: translateY(100%); transition: transform var(--nb-motion-blatt-aus) var(--nb-motion-kurve), opacity var(--nb-motion-blatt-aus) var(--nb-motion-kurve), display var(--nb-motion-blatt-aus) allow-discrete, overlay var(--nb-motion-blatt-aus) allow-discrete; }
    .nb-vi__fenster:not(:popover-open)::backdrop { transition-duration: var(--nb-motion-blatt-aus); }
  }
}
@keyframes nb-vi-blatt { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .nb-vi__fenster:popover-open { animation: nb-vi-weich var(--nb-motion-farbe) var(--nb-motion-kurve) both; }
  .nb-vi__fenster:not(:popover-open) { opacity: 0; transform: none; }
}
@keyframes nb-vi-weich { from { opacity: 0; } }

/* Reduzierte Bewegung: Fenster blenden weich ein und aus, ohne Weg (Daniel 14.10.2026: „nicht instant“, tokens.json
   blatt.regel „nur Deckkraft“). !important schlägt die globale .01-ms-Regel aus nb-tokens-v3.css, nur für Fenster */
@media (prefers-reduced-motion: reduce) {
  .nb-vi__fenster:popover-open { animation-name: nb-vi-weich !important; animation-duration: var(--nb-motion-farbe) !important; animation-timing-function: var(--nb-motion-kurve) !important; animation-fill-mode: both !important; }
  @supports (overlay: auto) { .nb-vi__fenster:not(:popover-open), .nb-vi__fenster:not(:popover-open)::backdrop { opacity: 0; transform: none !important; transition-duration: var(--nb-motion-fenster-aus) !important; } }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { @supports (overlay: auto) { .nb-vi__fenster:not(:popover-open), .nb-vi__fenster:not(:popover-open)::backdrop { transition-duration: var(--nb-motion-blatt-aus) !important; } } }

/* Hinter einem offenen Fenster rollt die Seite nicht mit, der Platz des Rollbalkens bleibt (wie verkaeufe/sektion.css,
   zustands-pruefer 14.10.2026: Rad und Wisch bewegten die Seite um 188 bis 593 px) */
html:has(.nb-vi__fenster:popover-open) { overflow: hidden; scrollbar-gutter: stable; }
/* Jedes Fenster im Shop: hat der Rollbalken keine Breite oder rollt die Seite nicht, reserviert die Sperre keinen Platz,
   sonst rutscht die Seite um die halbe Balkenbreite (Schalter aus layout/header.tpl, Daniel 14.10.2026 abends).
   !important schlägt die html:has(…[open])-Regeln der einzelnen Fenster */
html.nb-ohne-balken { scrollbar-gutter: auto !important; }

/* ---------- Tippen am Handy (Daniel 14.10.2026 abends: „hässliches Rechteck, Windows XP“) ----------
   Kein grauer Tipp-Kasten von iOS, Rückmeldung geben die :active-Zustände der Bauteile. Knopftext lässt sich nicht per
   langem Druck markieren. Nach Finger oder Maus (data-nb-zeiger, layout/header.tpl) zeigt kein Bedienelement einen
   Fokusrahmen, auch nicht, wenn Safari den Fokus nach einem Popover zurückgibt. Mit der Tastatur bleibt er */
/* Je Element, nicht nur am html: iOS 27 setzt den Kasten für Knöpfe selbst, die Vererbung griff im Simulator nicht */
html, html *, html *::before, html *::after { -webkit-tap-highlight-color: transparent; }
:where(button, summary, [role="button"], [popovertarget], .nb-knopf, .nb-f-knopf) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html[data-nb-zeiger] :is(a, button, summary, [role="button"], [popovertarget], [tabindex]):focus-visible { outline: none !important; box-shadow: none !important; }

/* Aufklapper mit Höhen-Animation aus js/nb-klappen.js: Höhe misst mit Rand und Polster, der Pfeil dreht beim Zuklappen sofort */
details:is(.nb-kk-s__gutschein, .nb-kp__gs, .nb-pr__angaben, .nb-pr__hilfe, .nb-lt__frage, .nb-seite__klapp) { box-sizing: border-box; }
details.is-zu > summary svg { transform: none !important; }

/* G60 Gerätefoto als Vorschaubild, eine Regel für den ganzen Shop (Daniel 16.10.2026: „das Produktfoto ist immer minimal zu
   groß, weil es komplett max width hat und gleichzeitig die Ecken abgerundet sind … mach es so wie in der Kategorie-Page, dass
   das Handy von unten minimal rausguckt“). Jedes Gerätefoto trägt img.nb-produktbild (kern/html.mjs geraetBild). Im kleinen
   Behälter wie die Kategoriekarte (.nb-pk--b .nb-pk__buehne): graue Bühne surface-component, Foto 78 % breit, 12 % unter der
   Oberkante, unten läuft das Gerät leicht aus dem Bild (G44). Nie object-fit cover, nie volle Breite. Ausnahme Warenkorb-Karte
   .nb-kk__bild--buehne regelt sich selbst. Neue Behälter kommen in diese Liste, nicht in eine eigene Regel. Hook meldet cover. */
html :is(.nb-zf__bild, .nb-zf__leiste-bild, .nb-vk__bild, .nb-ue-bild, .nb-pf-geraet__bild, .nb-pb-verkauf__bild, .nb-md__bild,
  .nb-kk-n__bild, .nb-kk-klein__bild, .nb-kd__pdp-bild, .nb-ghv-bild, .nb-anm__neben-bild, .nb-anm__angebot-bild, .nb-g3-bild, .nb-fav__bild,
  .nb-rs-g__bild, .nb-rs-sum__bild, .nb-rs-k__bild, .nb-vk-z__bild, .nb-bs__bild, .nb-vdk__bild, .nb-em__bild, .nb-mk__bild, .nb-mk__mini):has(> img.nb-produktbild) {
  position: relative; overflow: hidden; background: var(--nb-surface-component);
}
html :is(.nb-zf__bild, .nb-zf__leiste-bild, .nb-vk__bild, .nb-ue-bild, .nb-pf-geraet__bild, .nb-pb-verkauf__bild, .nb-md__bild,
  .nb-kk-n__bild, .nb-kk-klein__bild, .nb-kd__pdp-bild, .nb-ghv-bild, .nb-anm__neben-bild, .nb-anm__angebot-bild, .nb-g3-bild, .nb-fav__bild,
  .nb-rs-g__bild, .nb-rs-sum__bild, .nb-rs-k__bild, .nb-vk-z__bild, .nb-bs__bild, .nb-vdk__bild, .nb-em__bild, .nb-mk__bild, .nb-mk__mini) > img.nb-produktbild {
  position: absolute; left: 50%; top: 12%; display: block; width: 78%; height: auto; max-width: none; max-height: none; margin: 0;
  object-fit: contain; transform: translateX(-50%); mix-blend-mode: multiply;
}
/* G63 Gerätebild, ein Quadrat für jedes kleine Gerätefoto (Daniel 16.10.2026: „bau ein universelles Design für diese kleinen
   Karten“, „Pott Hässlichkeit mit dem runden Kreis“). Vorher trug jeder Behälter radius-input (16 px), bei 40 px sind das 40 %
   der Kante, das Bild wurde ein Kreis. Jetzt 22 % der Kante wie ein App-Symbol, 16 px bei 72 (Kasse), 12 bei 56, 9 bei 40.
   Größen s 40, m 56, l 72 aus tokens.json geraetebild, Raster nehmen dieselbe Variable. Ab 80 px (Warenkorb, Favoriten) gilt
   das nicht, dort sind es Produktkarten. Neue kleine Behälter kommen in diese Liste. */
html :is(.nb-zf__bild, .nb-zf__leiste-bild, .nb-vk__bild, .nb-ue-bild, .nb-pf-geraet__bild, .nb-pb-verkauf__bild, .nb-md__bild,
  .nb-ghv-bild, .nb-anm__angebot-bild, .nb-g3-bild, .nb-rs-g__bild, .nb-rs-sum__bild, .nb-rs-k__bild, .nb-vk-z__bild, .nb-bs__bild,
  .nb-vdk__bild, .nb-em__bild, .nb-mk__bild, .nb-mk__mini):not(.nb-bs__bild--gross):has(> img.nb-produktbild) {
  aspect-ratio: 1; border-radius: var(--nb-geraetebild-radius, 22%);
}
/* Umkehr (G29): steht der Behälter in einer ink-100-Gruppe in der weißen Karte, wird die Bühne weiß (Rücksendungen 16.10.2026) */
html :is(.nb-rs-d__gruppe, .nb-rs-blatt__inhalt) :is(.nb-rs-g__bild, .nb-rs-k__bild):has(> img.nb-produktbild) { background: var(--nb-surface-page); }

/* Pillen: Schrift optisch mittig (Daniel 16.10.2026: „kannst du hier den inhalt in den labels endlich mal zentrieren“).
   Gilroy hat bei 14 px Ascent 13 und Descent 4, Flex zentriert die ganze Zeile, die Versalhöhe sass dadurch in Chromium
   1,5 px und in Safari am iPhone 2 px zu hoch (gemessen: 6 zu 9 px Luft ueber Versal und unter der Grundlinie).
   text-box schneidet die Zeile auf Versalhoehe bis Grundlinie, das Polster fuellt auf die feste Hoehe auf. Nachher 8 zu 7 px.
   Ohne Unterstuetzung (aelter als Safari 18.2 und Chrome 133) bleibt die Flex-Fassung. Hoehe bleibt 24 bzw. 20 px. */
@supports (text-box: trim-both cap alphabetic) {
  html :is(.nb-f-pille, .nb-pdpc__etikett) {
    display: inline-block; min-height: 0; height: auto; line-height: 1;
    text-box: trim-both cap alphabetic; padding-block: calc((24px - 1cap) / 2);
  }
  html :is(.nb-km2__bald, .nb-kr__bald) {
    display: inline-block; min-height: 0; line-height: 1;
    text-box: trim-both cap alphabetic; padding-block: calc((20px - 1cap) / 2);
  }
}

/* Meldungen von JTL (snippets/alert_list.tpl, 17.10.2026). Fehler und Warnung als S-Band-warn wie .nb-kk-band im
   Warenkorb (komponenten-strecke-konto.md), Erfolg und Info als weiße Karte nach K1. Breite und Rand wie die Sektionen.
   .alert fängt die übrigen {alert}-Stellen aus NOVA ab, damit nirgends rohes Bootstrap stehen bleibt. */
.nb-meldungen { --nb-s-rand: var(--nb-space-s); --nb-s-breit: var(--nb-container); display: grid; gap: var(--nb-space-xs); padding: var(--nb-space-m) max(var(--nb-s-rand), (100% - var(--nb-s-breit)) / 2) 0; }
@media (min-width: 768px) { .nb-meldungen { --nb-s-rand: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-meldungen { --nb-s-rand: var(--nb-space-xl); } }
.nb-meldung, .nb-v3 .alert { display: flex; gap: var(--nb-space-xs); align-items: flex-start; margin: 0; padding: var(--nb-space-m); border: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); animation: nb-meldung-rein var(--nb-motion-transform) var(--nb-motion-kurve) both; }
.nb-meldung--warn, .nb-v3 .alert:is(.alert-danger, .alert-warning) { background: var(--nb-warning-bg); box-shadow: none; }
.nb-meldung > svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--nb-text-heading); }
.nb-meldung__text { flex: 1; min-width: 0; margin: 0; padding-top: 1px; }
.nb-meldung__text b { font-weight: var(--nb-weight-semibold); }
.nb-meldung__link, .nb-v3 .alert a { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-meldung__zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: calc(-1 * var(--nb-space-xs)) calc(-1 * var(--nb-space-xs)) calc(-1 * var(--nb-space-xs)) 0; padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: none; color: var(--nb-text-heading); cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-meldung__zu svg { width: 20px; height: 20px; }
.nb-meldung__zu:active, .nb-meldung__link:active { color: var(--nb-text-muted); }
@media (hover: hover) and (pointer: fine) { .nb-meldung__zu:hover, .nb-meldung__link:hover { color: var(--nb-text-muted); } }
.nb-meldung__zu:focus-visible, .nb-meldung__link:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-v3 .alert .close { order: 2; margin-left: auto; padding: 0 var(--nb-space-2xs); font-size: 22px; line-height: 1; cursor: pointer; }
.nb-v3 .alert > .fas { display: none; }
@keyframes nb-meldung-rein { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 767px) { .nb-meldung, .nb-v3 .alert { padding: var(--nb-space-s); } }
@media (prefers-reduced-motion: reduce) { .nb-meldung, .nb-v3 .alert { animation: none; } }

/* Kaufknopf „Im Warenkorb“ der Produktseite (snippets/nb-pdp-korb.tpl, 17.10.2026). Liegt das gewählte Gerät schon im
   Warenkorb, steht statt des Submit-Knopfs ein Link in derselben Form. .nb-pdp-kauf (inline-flex) überstimmt sonst [hidden] */
.nb-pdp-kauf[hidden] { display: none !important; }
.nb-pdp-kauf--im-korb { gap: var(--nb-space-2xs); }
.nb-pdp-kauf--im-korb svg { flex: none; width: 20px; height: 20px; }

/* templates/NextBuy/themes/nextbuy/nb-feld.css */
/* Formular-System. Jedes Eingabefeld, jede Suche, jede Aufklappliste und jeder Feldfehler im Shop.
   Werte: design/werte/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), scale var(--nb-motion-druck) 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) */
/* Hover nur mit Maus. Jede :hover-Regel steht in @media (hover: hover), am Handy bliebe sonst das getippte Element im Hover stehen (Daniel 07.10.2026, Regel HOVERMEDIA) */
@media (hover: hover) and (pointer: fine) { .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: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; }
@media (hover: hover) and (pointer: fine) { .nb-fl .nb-fl__eingabe:is(:-webkit-autofill:hover) { -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(:focus, :focus-visible) { background: var(--nb-critical-bg); }
@media (hover: hover) and (pointer: fine) {
  .nb-fl.is-fehler .nb-fl__eingabe:is(:hover) { 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[aria-pressed="true"] { color: var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-fl__auge:hover { 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); }
/* Druck: der Knopf der Liste ist eine breite Fläche, Fassung C (Daniel 09.10.2026) */
.nb-dd__knopf:not(:disabled):active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
.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-bewegung); }
.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);
  transform-origin: 50% 0;
  animation: nb-dd-rein var(--nb-motion-liste) var(--nb-motion-kurve) backwards;
}
/* Schließen 150 ms ease-out, Fassung C (Daniel 09.10.2026). Der Keyframe läuft mit backwards, damit die Deckkraft nach
   dem Öffnen wieder der Regel gehört und hier ausblenden kann */
.nb-dd__karte[hidden] { display: none; opacity: 0; transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), display var(--nb-motion-liste-aus) allow-discrete; }
.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.is-aktiv { background: var(--nb-ink-100); }
@media (hover: hover) and (pointer: fine) { .nb-dd__option:hover { 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); }
@media (hover: hover) and (pointer: fine) { .nb-dd__option[aria-selected="true"].is-aktiv:not(:hover) { background: none; } }
@media (hover: none) { .nb-dd__option[aria-selected="true"].is-aktiv { 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: scale(var(--nb-motion-liste-scale)); } 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:is(:focus, :focus-visible) { outline: none; box-shadow: none; border: 0; background: var(--nb-ink-200); }
@media (hover: hover) and (pointer: fine) { .nb-su .nb-su__eingabe:hover { 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; }
@media (hover: hover) and (pointer: fine) { .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; }
}

/* templates/NextBuy/themes/nextbuy/nb-cookie.css */
/* Erzeugt von baukasten/werkzeug/cookie-export.mjs. Nicht von Hand ändern, Quelle ist der Baukasten:
   baukasten/sektionen/cookie-banner/sektion.css
   baukasten/sektionen/cookie-fenster/sektion.css
   Dazu lädt layout/header.tpl nb-tokens-v3.css und nb-basis.css. */

/* Knopf-Grund, aus baukasten/kern/formular.css:36-51 und nb-tradein.css (.nb-knopf) */
:where(#consent-manager) .nb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); margin: 0; font-family: inherit; line-height: 1.2; text-decoration: none; -webkit-appearance: none; appearance: none; -webkit-user-select: none; user-select: none; }
:where(#consent-manager) .nb-f-knopf { min-height: 48px; }
:where(#consent-manager) .nb-f-knopf--umriss { background: transparent; color: var(--nb-text-heading); border: 1px solid var(--nb-border-control); }
:where(#consent-manager) .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; }
/* Hover nur mit Maus. Jede :hover-Regel steht in @media (hover: hover), am Handy bliebe sonst das getippte Element im Hover stehen (Daniel 07.10.2026, Regel HOVERMEDIA) */
@media (hover: hover) and (pointer: fine) { :where(#consent-manager) .nb-f-knopf--text:hover { color: var(--nb-text-link); } }
:where(#consent-manager) .nb-f-knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* baukasten/sektionen/cookie-banner/sektion.css */
/* Cookie-Banner (Werkstatt cookie, Runde 3, 06.10.2026): ein Fenster in der Mitte mit eigenem Bild, Daniels Wahl. Dazu
   die Knöpfe und Links, die auch das Fenster der zweiten Ebene nutzt (sektionen/cookie-fenster). Werte aus
   .claude/progress/tradein/baukasten/VORGABEN-cookie-token-2026-10-06.md: Fläche Weiß ohne Rand, Radius card, Schatten
   sh-schwebt, Abdunkeln alpha-scrim ohne Weichzeichner, Eintritt motion-fenster 160 ms. Kein Lime, kein Symbol. */

.nb-ck, .nb-ck-f {
  --ck-ebene: 210;      /* über der Schublade am Handy (200), VORGABEN §3, ohne Token */
  --ck-knopf: 48px;     /* Knopf als Pille, komponenten-strecke-konto.md:547 */
  --ck-ziel: 44px;      /* Trefferfläche, komponenten-formular.md:259 */
  --ck-eintritt: var(--nb-motion-fenster) var(--nb-motion-fenster-kurve); /* motion-fenster, komponenten-global.md:316 */
  box-sizing: border-box; font-family: var(--nb-font-sans); color: var(--nb-text-body);
}
.nb-ck *, .nb-ck-f * { box-sizing: border-box; }

/* ---------- Fenster in der Mitte ---------- */
.nb-ck__schirm { position: fixed; inset: 0; z-index: calc(210 - 1); background: var(--nb-alpha-scrim); animation: nb-ck-schirm var(--nb-motion-farbe) var(--nb-motion-kurve) both; }
.nb-ck { position: fixed; inset: 0; z-index: var(--ck-ebene); margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 32px); overflow: auto; border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); animation: nb-ck-auf var(--ck-eintritt) both; }
.nb-ck__innen { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-l); }
@media (max-width: 479px) { .nb-ck__innen { gap: var(--nb-space-s); padding: var(--nb-space-m) var(--nb-space-s); } }

/* Eigenes Bild oben mittig. Ein Motiv ist sichtbar: das erste, der Schalter motiv tauscht (Regeln je Motiv unten) */
.nb-ck__bild { display: block; justify-self: center; width: 128px; height: 128px; }
.nb-ck__bild picture, .nb-ck__bild img { display: block; width: 100%; height: 100%; }
.nb-ck__bild img { object-fit: contain; }
.nb-ck__bild picture:not(:first-child) { display: none; }
@media (max-width: 479px) { .nb-ck__bild { width: 104px; height: 104px; } }

.nb-ck__text { display: grid; gap: var(--nb-space-2xs); }
.nb-v3 .nb-ck__titel { margin: 0; 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-ck__text p { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-ck__links { display: flex; flex-wrap: wrap; gap: 0 var(--nb-space-m); margin: 0; }
.nb-ck .nb-ck__links, .nb-ck-f .nb-ck__links { font-size: var(--nb-t-body-02); }
.nb-ck__links a { display: inline-flex; align-items: center; min-height: var(--ck-ziel); color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ck__links a:active { color: var(--nb-text-link); }
@media (hover: hover) and (pointer: fine) { .nb-ck__links a:hover { color: var(--nb-text-link); } }
.nb-ck__links a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* ---------- Knöpfe ---------- */
/* Zwei gleich große Pillen übereinander über die Breite, oben „Alle annehmen“ Night gefüllt, darunter „Alle ablehnen“ weiß mit Rand
   (Daniel 06.10.2026, wie Back Market). Darunter „Einstellungen“ als kleinerer Textknopf, mittig */
.nb-ck__knoepfe { display: grid; gap: var(--nb-space-2xs); justify-items: center; }
.nb-ck__paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-xs); width: 100%; }
.nb-ck .nb-f-knopf, .nb-ck-f .nb-f-knopf { min-height: var(--ck-knopf); padding-inline: var(--nb-space-s); border-radius: var(--nb-radius-pill); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); white-space: nowrap; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (min-width: 480px) { .nb-ck .nb-f-knopf:not(.nb-f-knopf--text), .nb-ck-f .nb-f-knopf:not(.nb-f-knopf--text) { padding-inline: var(--nb-space-m); } }
.nb-ck-knopf--breit { width: 100%; }
/* Gefüllt in Night. Hover und Druck auf surface-dark-raised, für „gedrückt“ gibt es auf Night keinen eigenen Token */
:is(.nb-ck, .nb-ck-f) .nb-ck-knopf--haupt { background: var(--nb-surface-dark); border: 1px solid var(--nb-surface-dark); color: var(--nb-text-on-dark); }
:is(.nb-ck, .nb-ck-f) .nb-ck-knopf--haupt:active { background: var(--nb-surface-dark-raised); border-color: var(--nb-surface-dark-raised); scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { :is(.nb-ck, .nb-ck-f) .nb-ck-knopf--haupt:hover { background: var(--nb-surface-dark-raised); border-color: var(--nb-surface-dark-raised); } }
/* Weiß mit Rand border-control (4,20:1). Der Hover aus formular.css (#FBFBFD) ist am Bild nicht zu sehen, hier eine Stufe
   Grau, Druck eine weitere. Im Werte-Dokument ohne Wert (VORGABEN §4) */
:is(.nb-ck, .nb-ck-f) .nb-f-knopf--umriss { background: var(--nb-surface-page); }
@media (hover: hover) and (pointer: fine) { :is(.nb-ck, .nb-ck-f) .nb-f-knopf--umriss:hover { background: var(--nb-surface-component); border-color: var(--nb-ink-500); } }
:is(.nb-ck, .nb-ck-f) .nb-f-knopf--umriss:active { background: var(--nb-ink-200); border-color: var(--nb-ink-500); scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
/* Der dritte Weg, kleiner */
.nb-ck .nb-f-knopf--text, .nb-ck-f .nb-f-knopf--text { min-height: var(--ck-ziel); padding-inline: var(--nb-space-xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); }
:is(.nb-ck, .nb-ck-f) .nb-f-knopf--text:active { color: var(--nb-action-primary-active); }

@keyframes nb-ck-auf { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes nb-ck-schirm { from { opacity: 0; } to { opacity: 1; } }
/* Handy: Blatt von unten (Daniel 14.10.2026, tokens.json blatt, Vorbild kern/pdp-lade.css). Volle Breite, oben gerundet,
   höchstens blatt-hoehe, Knöpfe über der Safe Area. Auf in motion-blatt mit fenster-kurve, zu in motion-blatt-aus */
@media (max-width: 767px) {
  .nb-ck { inset: auto 0 0; width: 100%; max-height: var(--nb-blatt-hoehe); margin: 0; border-radius: var(--nb-blatt-radius); animation: nb-ck-blatt var(--nb-motion-blatt) var(--nb-motion-fenster-kurve) both; }
  .nb-ck__innen { padding-bottom: var(--nb-blatt-unten); }
}
@keyframes nb-ck-blatt { from { transform: translateY(100%); } to { transform: none; } }
@keyframes nb-ck-blatt-zu { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .nb-ck, .nb-ck__schirm, .nb-ck-f, .nb-ck-f__schirm { animation: none; } }


/* Niedrige Bildschirme (320 mal 568, Handy quer). Die Knöpfe kleben unten im Fenster und der Text rollt darüber, unter
   620 px Höhe fällt das Bild weg. „Alle ablehnen“ lag bei 568 px unter der Fensterkante (zustands-pruefer 06.10.2026),
   ein Ablehnen erst nach Scrollen reicht nicht (RECHT-cookie Abschnitt 2, DSK Rn. 136) */
.nb-ck__innen { --ck-polster: var(--nb-space-l); }
@media (max-width: 479px) { .nb-ck__innen { --ck-polster: var(--nb-space-m); } }
@media (max-height: 700px) {
  .nb-ck__knoepfe { position: sticky; bottom: 0; margin-bottom: calc(-1 * var(--ck-polster)); padding-block: var(--nb-space-xs) var(--ck-polster); background: var(--nb-surface-page); }
}
@media (max-height: 620px) { .nb-ck__bild { display: none; } }
@media (max-width: 767px) and (max-height: 700px) { .nb-ck__knoepfe { margin-bottom: calc(-1 * var(--nb-blatt-unten)); padding-bottom: var(--nb-blatt-unten); } } /* Blatt, Safe Area */

/* baukasten/sektionen/cookie-fenster/sektion.css */
/* Cookie-Einstellungen, zweite Ebene (Werkstatt cookie, 06.10.2026). Knöpfe, Links und die Maße --ck-* stehen in
   sektionen/cookie-banner/sektion.css. Aufbau wie das S-Fenster (komponenten-global.md §9): Kopf und Fuß stehen, der
   Inhalt rollt innen. Werte aus VORGABEN-cookie-token-2026-10-06.md §5 und §6. */

.nb-ck-f__schirm { position: fixed; inset: 0; z-index: calc(210 - 1); background: var(--nb-alpha-scrim); animation: nb-ck-schirm var(--nb-motion-farbe) var(--nb-motion-kurve) both; }
.nb-ck-f { position: fixed; inset: 0; z-index: var(--ck-ebene); display: flex; flex-direction: column; margin: auto; width: min(520px, calc(100vw - 32px)); height: fit-content; max-height: min(640px, calc(100vh - 64px)); overflow: hidden; border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); animation: nb-ck-auf var(--ck-eintritt) both; }
.nb-ck-f__kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-m) var(--nb-space-m) var(--nb-space-xs) var(--nb-space-l); }
.nb-v3 .nb-ck-f__titel { margin: 0; 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-ck-f__zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-ck-f__zu:active { background: var(--nb-ink-300); scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-ck-f__zu:hover { background: var(--nb-ink-300); } }
.nb-ck-f__zu:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-ck-f__zu svg { width: 20px; height: 20px; }
.nb-ck-f__inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--nb-space-s); padding: 0 var(--nb-space-l) var(--nb-space-s); }
.nb-ck-f .nb-ck-f__inhalt:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }
.nb-ck-f__satz { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }

/* Umkehr (G29): im weißen Fenster ist die Liste eine graue Fläche ohne Schatten und Rand, Zeilen mit Haarlinie */
.nb-ck-f__liste { display: grid; margin: 0; padding: 0 var(--nb-space-s); list-style: none; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-ck-kat { display: grid; gap: var(--nb-space-3xs); padding-block: var(--nb-space-s); }
.nb-ck-kat + .nb-ck-kat { border-block-start: 1px solid var(--nb-border-hairline); }
.nb-ck-kat__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: var(--ck-ziel); }
.nb-v3 .nb-ck-kat__titel { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-ck-kat__immer { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); white-space: nowrap; }
.nb-ck-kat__text { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-ck-kat__auf { justify-self: start; display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: var(--ck-ziel); padding: 0; border: 0; background: none; font: inherit; font-size: var(--nb-t-body-01); color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ck-kat__auf:active { color: var(--nb-text-link); }
@media (hover: hover) and (pointer: fine) { .nb-ck-kat__auf:hover { color: var(--nb-text-link); } }
.nb-ck-kat__auf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-ck-kat__auf svg { width: 20px; height: 20px; transition: transform var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve-bewegung); }
.nb-ck-kat__auf[aria-expanded="true"] svg { transform: rotate(180deg); transition: transform var(--nb-motion-akkordeon-auf) var(--nb-motion-kurve-bewegung); }
/* Kategorie auf 300 ms, zu 200 ms, dann display: none (Fassung C, Daniel 09.10.2026). js/nb-cookie.js setzt hidden */
.nb-ck-kat__details { transition: opacity var(--nb-motion-akkordeon-auf) var(--nb-motion-kurve); }
@starting-style { .nb-ck-kat__details { opacity: 0; } }
.nb-ck-kat__details[hidden] { display: none; opacity: 0; transition: opacity var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve), display var(--nb-motion-akkordeon-zu) allow-discrete; }
/* Auf Grau ist das innere Element weiß (G29). Wort oben, Wert darunter, enge Zeilen (G26) */
.nb-ck-kat__liste { display: grid; gap: var(--nb-space-2xs); margin: var(--nb-space-2xs) 0 0; padding: var(--nb-space-s); border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); }
.nb-ck-kat__liste div { display: grid; gap: 0; }
.nb-ck-kat__liste dt { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-ck-kat__liste dd { margin: 0; font-size: var(--nb-t-body-01); color: var(--nb-text-body); }

/* Paar Nein und Ja: zwei kleine Pillen auf weißem Träger, gewählt Night gefüllt. Lage und Füllung sind zwei Merkmale */
.nb-ck-paar { flex: none; display: inline-grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-3xs); padding: var(--nb-space-3xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); }
.nb-ck-paar__knopf { min-width: 56px; min-height: var(--ck-ziel); padding: 0 var(--nb-space-xs); border: 0; border-radius: var(--nb-radius-pill); background: none; font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-ck-paar__knopf:hover { background: var(--nb-surface-component); } }
.nb-ck-paar__knopf:active { background: var(--nb-ink-200); scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-ck-paar__knopf[aria-pressed="true"]:is(:active) { background: var(--nb-surface-dark-raised); }
@media (hover: hover) and (pointer: fine) { .nb-ck-paar__knopf[aria-pressed="true"]:is(:hover) { background: var(--nb-surface-dark-raised); } }
.nb-ck-paar__knopf[aria-pressed="true"] { background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-ck-paar__knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

.nb-ck-f__fuss { flex: none; display: grid; gap: var(--nb-space-xs); padding: var(--nb-space-s) var(--nb-space-l) var(--nb-space-m); border-block-start: 1px solid var(--nb-border-hairline); }
/* Zwei Zeilen in jeder Breite: oben die zwei gleichen Umrisse, darunter „Auswahl speichern“ gefüllt über die Breite. Drei Knöpfe
   in einer Zeile brauchen 474 px, im Fenster sind 456 frei, sie liefen ineinander (Daniel 06.10.2026) */
.nb-ck-f__fuss .nb-ck-f__speichern { width: 100%; }
@media (max-width: 479px) {
  .nb-ck-f__kopf, .nb-ck-f__inhalt, .nb-ck-f__fuss { padding-inline: var(--nb-space-s); }
}
@media (prefers-reduced-motion: reduce) { .nb-ck-kat__auf svg, .nb-ck-paar__knopf { transition: none; } }

/* Nachtrag zustands-pruefer 06.10.2026. Luft über dem ersten Element, sonst schneidet die Rollkante den Fokusring ab.
   Handy quer: das ganze Fenster rollt, die innere Rollfläche war nur 37 px hoch. Reduzierte Bewegung steht hier am
   Ende, die Regel im Banner-CSS wurde von der Definition oben überschrieben */
.nb-ck-f__inhalt { padding-block-start: var(--nb-space-2xs); scroll-padding-block: var(--nb-space-xs); }
@media (max-height: 480px) {
  .nb-ck-f { display: block; max-height: calc(100vh - 16px); overflow-y: auto; }
  .nb-ck-f__inhalt { overflow: visible; }
}
/* Handy: Blatt von unten (Daniel 14.10.2026, tokens.json blatt, Vorbild kern/pdp-lade.css). Keyframes stehen beim Banner,
   das Schließen bei der Naht zu JTL. Fuß über der Safe Area */
@media (max-width: 767px) {
  .nb-ck-f { inset: auto 0 0; width: 100%; max-height: var(--nb-blatt-hoehe); margin: 0; border-radius: var(--nb-blatt-radius); animation: nb-ck-blatt var(--nb-motion-blatt) var(--nb-motion-fenster-kurve) both; }
  .nb-ck-f__fuss { padding-bottom: var(--nb-blatt-unten); }
}
@media (prefers-reduced-motion: reduce) { .nb-ck-f, .nb-ck-f__schirm { animation: none; } }


/* ---------- Naht zu JTL (NOVA js/consent.js) ---------- */
/* Die Hülle trägt nichts, Banner und Fenster liegen fest am Bildschirm. Bis consent.js gelaufen ist, steht nichts
   (d-none aus nb-basis.css), ohne JS bleibt es dabei. Eine Überlagerung verschiebt nichts */
#consent-manager [hidden] { display: none !important; }
#consent-manager .consent-hidden { display: none; }
/* Kein Symbol, nichts Schrumpfendes (Daniel 06.10.2026). NOVA nimmt dem Knopf nach 100 ms d-none weg, er bleibt zu */
#consent-settings-btn { display: none !important; }
/* Nach der Wahl setzt consent.js erst fading (200 ms), dann mini. Mit mini steht nichts mehr */
#consent-manager.mini > #consent-banner { display: none; }
#consent-manager.fading > #consent-banner { opacity: 0; transition: opacity var(--nb-motion-fenster-aus) var(--nb-motion-kurve); }
/* Steht das Fenster der zweiten Ebene, ruht der Banner darunter (js/nb-cookie.js setzt die Klasse) */
#consent-manager.nb-ck-zweite > #consent-banner { display: none; }
/* Beim Erscheinen bekommt das Fenster selbst den Fokus (kein Knopf, damit keine Antwort vorgewählt wirkt). Die
   Fokus-Formel aus nb-tokens-v3.css (.nb-v3 [tabindex="-1"]:focus-visible) nähme ihm sonst den Schatten */
#consent-manager .nb-ck:is(:focus, :focus-visible) { outline: none; box-shadow: var(--nb-sh-schwebt); }

/* #consent-settings ist bei JTL Schirm und Rahmen in einem: ein Klick genau darauf schließt. active öffnet, show folgt
   10 ms später, beim Schließen fällt erst show, 200 ms danach active */
.consent-modal:not(.active) { display: none; }
#consent-settings, #consent-confirm { z-index: 211; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
#consent-settings:not(.show), #consent-confirm:not(.show) { opacity: 0; transition: opacity var(--nb-motion-fenster-aus) var(--nb-motion-kurve); }
/* Der Wertträger je Dienst bleibt unsichtbar, die Wahl ist das Paar Nein und Ja */
#consent-settings .consent-input { display: none; }
.nb-ck-kat__details[hidden] { display: none; }
.nb-ck-kat__liste a { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* #consent-confirm („einmal oder immer“ vor einem eingebetteten Dienst) bleibt Markup und Wortlaut von NOVA. Heute
   bettet der Shop nichts ein, das Fenster erscheint nicht. Es bekommt nur die Hülle, damit es nicht roh steht */
#consent-confirm { position: fixed; inset: 0; background: var(--nb-alpha-scrim); font-family: var(--nb-font-sans); color: var(--nb-text-body); }
#consent-confirm .consent-modal-content { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 64px); overflow: auto; display: grid; gap: var(--nb-space-s); padding: var(--nb-space-l); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); }
#consent-confirm .consent-modal-icon, #consent-confirm .consent-icon { display: none; }
#consent-confirm .consent-modal-close { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; }
#consent-confirm .consent-modal-close svg { width: 16px; height: 16px; }
#consent-confirm .consent-display-1, #consent-confirm .consent-display-2 { display: block; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
#consent-confirm p { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; }
#consent-confirm .consent-btn-helper { display: grid; gap: var(--nb-space-xs); }
#consent-confirm .consent-btn { width: 100%; min-height: 48px; padding: 0 var(--nb-space-m); border: 1px solid var(--nb-border-control); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); color: var(--nb-text-heading); font: inherit; font-weight: var(--nb-weight-semibold); cursor: pointer; }
/* Handy: Zu als Blatt nach unten (Daniel 14.10.2026, tokens.json blatt). consent.js lässt Banner und Einstellungen 200 ms
   stehen, so lang wie motion-blatt-aus. Das Blatt fährt hinab und bleibt deckend, nur der Schirm blendet aus (vorher blendete
   die Hülle mit, nach 80 ms lag sie bei 12 % und das Fahren war nicht zu sehen, Messung 14.10.2026) */
@media (max-width: 767px) {
  #consent-manager.fading > #consent-banner { opacity: 1; }
  #consent-manager.fading > #consent-banner .nb-ck { animation: nb-ck-blatt-zu var(--nb-motion-blatt-aus) var(--nb-motion-kurve) both; }
  #consent-manager.fading > #consent-banner .nb-ck__schirm { animation: nb-ck-weg var(--nb-motion-blatt-aus) var(--nb-motion-kurve) both; }
  /* Einstellungen über Übergänge statt Keyframes: consent.js setzt active 10 ms vor show, eine Zu-Animation hätte das Blatt
     beim Öffnen kurz in Ruhelage gezeigt (bewegungs-pruefer 14.10.2026). Ohne show steht es unten, mit show fährt es hoch */
  #consent-settings .nb-ck-f { animation: none; transform: none; transition: transform var(--nb-motion-blatt) var(--nb-motion-fenster-kurve); }
  #consent-settings:not(.show) .nb-ck-f { transform: translateY(100%); transition: transform var(--nb-motion-blatt-aus) var(--nb-motion-kurve); }
  #consent-settings { transition: background-color var(--nb-motion-blatt) var(--nb-motion-fenster-kurve); }
  #consent-settings:not(.show) { opacity: 1; background-color: transparent; transition: background-color var(--nb-motion-blatt-aus) var(--nb-motion-kurve); }
}
@keyframes nb-ck-weg { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #consent-manager.fading > #consent-banner .nb-ck, #consent-manager.fading > #consent-banner .nb-ck__schirm { animation: none; } #consent-settings .nb-ck-f, #consent-settings:not(.show) .nb-ck-f { transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { #consent-confirm { transition: none; } } /* Banner und Einstellungen blenden weich, Block am Ende */

/* Reduzierte Bewegung: Fenster blenden weich ein und aus, ohne Weg (Daniel 14.10.2026: „nicht instant“, tokens.json
   blatt.regel „nur Deckkraft“). !important schlägt die globale .01-ms-Regel aus nb-tokens-v3.css, nur für Fenster */
@media (prefers-reduced-motion: reduce) {
  .nb-ck, .nb-ck__schirm, .nb-ck-f { animation-name: nb-ck-schirm !important; animation-duration: var(--nb-motion-farbe) !important; animation-timing-function: var(--nb-motion-kurve) !important; animation-fill-mode: both !important; }
  #consent-manager.fading > #consent-banner :is(.nb-ck, .nb-ck__schirm) { animation-name: nb-ck-weg !important; animation-duration: var(--nb-motion-fenster-aus) !important; animation-timing-function: var(--nb-motion-kurve) !important; animation-fill-mode: both !important; }
  #consent-manager.fading > #consent-banner { opacity: 1; }
  #consent-settings .nb-ck-f, #consent-settings:not(.show) .nb-ck-f { transform: none !important; }
  #consent-settings { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve) !important; }
  #consent-settings:not(.show) { transition-duration: var(--nb-motion-fenster-aus) !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #consent-settings:not(.show) { opacity: 0; transition-duration: var(--nb-motion-blatt-aus) !important; }
  #consent-manager.fading > #consent-banner :is(.nb-ck, .nb-ck__schirm) { animation-duration: var(--nb-motion-blatt-aus) !important; }
}

/* Hinter einem offenen Fenster rollt die Seite nicht mit, der Platz des Rollbalkens bleibt (wie verkaeufe/sektion.css,
   zustands-pruefer 14.10.2026: Rad und Wisch bewegten die Seite um 188 bis 593 px).
   Die Klasse setzt js/nb-cookie.js nur, wenn Banner oder Einstellungen zu sehen sind. Vorher hing die Sperre an
   html:has(#consent-manager.active …): blendete ein Cookie-Blocker den Banner aus, stand die Seite still (Daniel 14.10.2026) */
html.nb-ck-sperre { overflow: hidden; scrollbar-gutter: stable; }

/* templates/NextBuy/themes/nextbuy/nb-suche.css */
/* Such-Fenster im Kopf (Spur suche, Task suche-bau, 13.10.2026). 1:1 aus der Werkstatt kopfsuche
   (baukasten/sektionen/suchfenster/sektion.css), nur Daniels Wahl vom 13.10.2026 (Commit d2e97729):
   Fläche a (Band wie Mega-Menü a, volle Breite unter dem Kopf, feste Höhe 440 px), Beim Tippen a (zwei Spalten,
   Vorschläge links, Geräte als Karten rechts), Frag mich a (Signal-Pille oben), Handy a (Vollbild-Ebene mit
   „Abbrechen“, Geräte zuerst, wie Back Market). Die Schalter data-nb-sfw-* der Werkstatt entfallen, ebenso die Regeln der
   anderen Fassungen und die Pille der Katalog-Vorschau.
   Vorgaben design-auditor Modus A 13.10.2026: Zeile 44 px (komponenten-formular.md:125), getippter Teil Regular, Rest
   Semibold (:142), Scrim Night 40 % mit Unschärfe nur im Kopf (komponenten-global.md:255, .nb-kw-scrim in
   nb-kopf.css), Ebene schublade 200 (design/tokens.json). Verhalten js/nb-suche.js, Markup snippets/nb-kopf.tpl.
   Grenze Handy und Rechner bei 860 px wie der Kopf (nb-kopf.css @media max-width 860px), die Werkstatt rechnete
   mit 859. */

.nb-sf__band[hidden], .nb-sf__ebene[hidden] { display: none !important; }
html.nb-sf-gesperrt, html.nb-sf-gesperrt body { overflow: hidden; }
.nb-sf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Band am Rechner (Fläche a) ---------- */
.nb-sf__band {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--nb-surface-page);
  opacity: 0; transform: translateY(calc(-1 * var(--nb-space-2xs)));
  transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), transform var(--nb-motion-liste-aus) var(--nb-motion-kurve);
  font-family: var(--nb-font-sans); color: var(--nb-text-heading);
}
.nb-sf__band.is-offen { opacity: 1; transform: none; transition-duration: var(--nb-motion-liste); }
/* Feste Höhe am Rechner, in jedem Zustand gleich (Daniel 13.10.2026: „sollte schon eine feste höhe haben und nicht
   so tief nach unten gehen“). Back Market misst 349 leer und 431 beim Tippen. Kein Scrollen im Band, der Inhalt ist
   auf zwei Spalten und feste Zahlen begrenzt (nb-suche.js). Token suche-hoehe (design/tokens.json layout) */
.nb-sf__innen { box-sizing: border-box; height: var(--nb-suche-hoehe); overflow: hidden; padding: var(--nb-space-m) var(--nb-s-rand) var(--nb-space-l); }
.nb-sf__inhalt { display: grid; gap: var(--nb-space-xl); align-items: start; }
/* Leer und ohne Treffer bündig unter der Pille, mit Geräten im Container */
.nb-sf__band:is([data-nb-sf-zustand="leer"], [data-nb-sf-zustand="nichts"]) .nb-sf__inhalt {
  margin-left: calc(var(--nb-sf-x, 0px) - var(--nb-s-rand)); width: max(var(--nb-sf-w, var(--nb-suche-mindestbreite)), var(--nb-suche-mindestbreite));
  grid-template-columns: minmax(0, 1fr) var(--nb-suche-neben); gap: var(--nb-space-l);
}
.nb-sf__band:is([data-nb-sf-zustand="treffer"], [data-nb-sf-zustand="laedt"]) .nb-sf__inhalt {
  max-width: var(--nb-s-breit); margin: 0 auto; grid-template-columns: var(--nb-suche-spalte) minmax(0, 1fr);
}

/* Rechte Spalte: Verkaufen und Hilfe nebeneinander unter den Geräten */
.nb-sf__unten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-l); margin-top: var(--nb-space-s); }
.nb-sf__unten:first-child { margin: 0 0 var(--nb-space-s); }
.nb-sf__unten > div { min-width: 0; }
.nb-sf__unten .nb-sf__gruppe { margin-top: 0; }
.nb-sf__unten + .nb-sf__gruppe { margin-top: 0; }
/* Hilfe-Titel höchstens zwei Zeilen */
.nb-sf__kurz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* ---------- Bausteine ---------- */
.nb-sf__spalte { display: flex; flex-direction: column; min-width: 0; }
.nb-sf__gruppe { margin: var(--nb-space-m) 0 var(--nb-space-2xs); padding: 0 var(--nb-space-xs); font-size: var(--nb-t-body-02); font-weight: 400; line-height: 1.4; color: var(--nb-text-body); }
.nb-sf__spalte > .nb-sf__gruppe:first-child, .nb-sf__spalte > .nb-sf__frag + .nb-sf__gruppe, .nb-sf__spalte > .nb-sf__korrektur + .nb-sf__gruppe { margin-top: 0; }
.nb-sf__zeile {
  display: flex; align-items: center; gap: var(--nb-space-xs); min-height: 44px; padding: 0 var(--nb-space-xs);
  border: 0; border-radius: var(--nb-radius-badge); background: none; font: inherit; font-size: var(--nb-t-body-01); font-weight: 600; line-height: 1.3;
  color: var(--nb-text-heading); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-sf__zeile:active { background: var(--nb-ink-200); transition-duration: 0s; }
/* Aktiv per Pfeiltaste: Fläche und Linie, die Fläche allein trägt nur 1,10:1 (design-auditor A, Hinweis) */
.nb-sf__zeile.is-aktiv { background: var(--nb-ink-100); outline: 2px solid var(--nb-text-heading); outline-offset: -2px; }
.nb-sf__zeichen { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--nb-text-heading); }
.nb-sf__zeichen svg { width: 100%; height: 100%; }
.nb-sf__text { display: flex; align-items: baseline; gap: var(--nb-space-xs); flex: 1; min-width: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.nb-sf__getippt { font-weight: 400; }
.nb-sf__zwei { display: flex; flex-direction: column; gap: var(--nb-space-3xs); min-width: 0; }
.nb-sf__betrag { font-size: var(--nb-t-body-02); font-weight: 400; color: var(--nb-text-body); white-space: nowrap; }
.nb-sf__zeile--verkaufen { min-height: var(--nb-suche-zeile-zwei); }
.nb-sf__zeile--alle { color: var(--nb-text-link); }
.nb-sf__zeile--alle .nb-sf__zeichen { color: var(--nb-text-link); }
.nb-sf__zeile--hilfe .nb-sf__zeichen { color: var(--nb-action-primary); }
.nb-sf__zeile--hilfe .nb-sf__text { font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  .nb-sf__zeile:hover { background: var(--nb-ink-100); }
}

/* „Frag mich“ als Signal-Pille wie der Starter (komponenten-assistent.md:51-57) */
.nb-sf__frag {
  display: inline-flex; align-items: center; gap: var(--nb-space-2xs); align-self: flex-start; height: 48px; margin: 0 0 var(--nb-space-s);
  padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-action-primary); color: var(--nb-action-primary-label);
  font: inherit; font-size: var(--nb-t-body-01); font-weight: 600; cursor: pointer; max-width: 100%;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-sf__frag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-sf__frag svg { flex: none; width: 20px; height: 20px; }
.nb-sf__frag:active { background: var(--nb-action-primary-active); transition-duration: 0s; }
.nb-sf__frag.is-aktiv { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nb-sf__frag:hover { background: var(--nb-action-primary-hover); } }

.nb-sf__nichts { margin: 0 0 var(--nb-space-s); padding: 0 var(--nb-space-xs); font-size: var(--nb-t-body-01); font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
.nb-sf__korrektur { margin: 0 0 var(--nb-space-s); padding: 0 var(--nb-space-xs); font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-sf__korrektur b { font-weight: 600; color: var(--nb-text-heading); }

/* Farbpunkte wie die Produktkarte (kern/karte.css:46), hier nur zum Lesen */
.nb-sf__farben { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 20px; }
.nb-sf__punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--nb-sf-farbe); box-shadow: inset 0 0 0 1px var(--nb-border-control); }
.nb-sf__mehr { font-size: var(--nb-t-body-02); line-height: 1; color: var(--nb-text-body); }

/* Bühne wie die Kategoriekarte live (Fassung quer, nb-pdp.css [data-nb-foto="quer"] .nb-pk--b, G60). Daniel 16.10.2026:
   „haben wir das nicht mit unserem category page design gemacht“. Graue Bühne über die ganze Kartenbreite, flacher als
   hoch, das Gerät beginnt mit Luft oben und läuft unten aus dem Bild. mix-blend-mode multiply nimmt den weißen Grund der
   nicht freigestellten Fotos weg, das weiße Rechteck vom 13.10. („es muss auf weißem hintergrund sein“) entsteht so nicht
   mehr. Höhe bleibt der Token suche-buehne, das Band behält seine 440 px. */
.nb-sf__buehne { position: relative; display: block; flex: none; overflow: hidden; background: var(--nb-surface-component); border-radius: var(--nb-radius-input); }
.nb-sf__buehne img {
  position: absolute; left: 50%; top: var(--nb-sf-luft); width: auto; height: calc((100% - var(--nb-sf-luft)) * 1.2); max-width: none;
  transform: translateX(-50%); mix-blend-mode: multiply;
}
.nb-sf__buehne--hoch { --nb-sf-luft: var(--nb-space-m); height: var(--nb-suche-buehne); }
.nb-sf__buehne--klein { --nb-sf-luft: var(--nb-space-2xs); width: var(--nb-suche-bild-klein); height: var(--nb-suche-bild-klein); border-radius: var(--nb-radius-badge); }

.nb-sf__name { font-size: var(--nb-t-heading-03); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.nb-sf__preis { font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-sf__preis b { font-size: var(--nb-t-price-02); font-weight: 600; color: var(--nb-text-heading); }
.nb-sf__neu { display: block; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }

/* Beim Tippen a: Geräte als Karten */
.nb-sf__karten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--nb-space-s); }
.nb-sf__karte { display: flex; flex-direction: column; gap: var(--nb-space-xs); padding: 0; border-radius: var(--nb-radius-input); color: var(--nb-text-heading); text-decoration: none; }
.nb-sf__karte-text { display: flex; flex-direction: column; gap: 0; padding: 0 var(--nb-space-3xs); }
.nb-sf__karte.is-aktiv, .nb-sf__gzeile.is-aktiv { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  /* Karten nur unterstreichen wie .nb-kw-dienst, kein grauer Hover an Zeilen mit Foto, das weiße Foto stünde sonst als
     Kasten darauf (G28, formular §5) */
  .nb-sf__gzeile:hover .nb-sf__name, .nb-sf__karte:hover .nb-sf__name { text-decoration: underline; text-underline-offset: 3px; }
}

/* Handy b: Gerätezeile mit kleinem Foto */
.nb-sf__gzeile {
  display: grid; grid-template-columns: var(--nb-suche-bild-klein) minmax(0, 1fr) auto; align-items: center; gap: var(--nb-space-xs);
  min-height: 64px; padding: var(--nb-space-3xs) var(--nb-space-3xs) var(--nb-space-3xs) var(--nb-space-3xs);
  border-radius: var(--nb-radius-input); color: var(--nb-text-heading); text-decoration: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-sf__gzeile:active .nb-sf__name { color: var(--nb-text-body); }
.nb-sf__gzeile-text { display: flex; flex-direction: column; gap: var(--nb-space-3xs); min-width: 0; }
.nb-sf__gzeile-preis { text-align: right; }

/* ---------- Laden (farbsystem.md Ladezustand) ---------- */
/* Unter 400 ms kein Platzhalter, die Wartezeit zählt nb-suche.js, der alte Inhalt bleibt so lange stehen. ink-100 mit
   Streif ink-50, Sweep motion-skeleton-sweep. Bewegt wird nur transform am Streif */
.nb-sf__skelett { position: relative; overflow: hidden; display: block; border-radius: var(--nb-radius-badge); background: var(--nb-ink-100); opacity: 0; animation: nb-sf-zeigen var(--nb-motion-farbe) var(--nb-motion-kurve) forwards; }
.nb-sf__skelett::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, var(--nb-ink-50) 50%, transparent 100%); transform: translateX(-100%); animation: nb-sf-streif var(--nb-motion-skeleton-sweep) var(--nb-motion-kurve) infinite; }
.nb-sf__skelett--zeile { height: 44px; margin-bottom: var(--nb-space-3xs); }
.nb-sf__skelett--titel { width: 96px; height: 20px; margin: 0 0 var(--nb-space-2xs); }
.nb-sf__skelett--buehne { height: var(--nb-suche-buehne); border-radius: var(--nb-radius-input); }
.nb-sf__skelett--text { height: 20px; margin-top: var(--nb-space-2xs); }
.nb-sf__skelett--g { height: 64px; margin-bottom: var(--nb-space-3xs); border-radius: var(--nb-radius-input); }
@keyframes nb-sf-zeigen { to { opacity: 1; } }
@keyframes nb-sf-streif { to { transform: translateX(100%); } }

/* ---------- Handy a: Ebene über allem ---------- */
.nb-sf__ebene {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: var(--nb-surface-page); font-family: var(--nb-font-sans); color: var(--nb-text-heading);
  opacity: 0; transform: translateY(var(--nb-space-xs));
  transition: opacity var(--nb-motion-fenster-aus) var(--nb-motion-kurve), transform var(--nb-motion-fenster-aus) var(--nb-motion-kurve);
}
.nb-sf__ebene.is-offen { opacity: 1; transform: none; transition-duration: var(--nb-motion-transform); }
.nb-sf__ekopf {
  display: flex; align-items: center; gap: var(--nb-space-2xs);
  padding: calc(var(--nb-space-2xs) + env(safe-area-inset-top)) var(--nb-space-s) var(--nb-space-2xs);
}
.nb-sf__abbrechen { flex: none; height: 44px; padding: 0 var(--nb-space-3xs); border: 0; background: none; font: inherit; font-size: var(--nb-t-body-01); font-weight: 600; color: var(--nb-text-heading); cursor: pointer; }
.nb-sf__abbrechen:active { color: var(--nb-text-body); }
@media (hover: hover) and (pointer: fine) {
  .nb-sf__abbrechen:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* Am Handy steht „Frag mich“ nach den Geräten (Back Market, Daniel 13.10.2026) */
.nb-sf__gzeile + .nb-sf__frag { margin-top: var(--nb-space-m); }
.nb-sf__epille { display: flex; align-items: center; flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 var(--nb-space-s); gap: var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); }
.nb-sf__epille:focus-within { background: var(--nb-ink-200); }
.nb-sf__elupe { display: inline-flex; width: 20px; height: 20px; flex: none; }
.nb-sf__elupe svg { width: 100%; height: 100%; }
.nb-sf__efeld { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--nb-t-body-01); color: var(--nb-text-heading); caret-color: var(--nb-text-heading); -webkit-appearance: none; appearance: none; }
.nb-sf__efeld::-webkit-search-cancel-button { display: none; }
/* Fokus zeigt nur die Fläche ink-200 an der Pille (komponenten-formular.md §4), nicht den globalen Ring */
.nb-v3 .nb-sf__efeld:focus-visible, .nb-sf__efeld:focus-visible { outline: none; box-shadow: none; }
.nb-sf__einhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--nb-space-2xs) var(--nb-space-s) calc(var(--nb-space-l) + env(safe-area-inset-bottom)); }
.nb-sf__einhalt .nb-sf__gruppe { margin-top: var(--nb-space-s); }
.nb-sf__einhalt .nb-sf__frag { margin-bottom: var(--nb-space-s); }

/* Fokus: Felder zeigen ihn als Fläche ink-200 an der Pille (G18), Knöpfe als eine Linie */
.nb-sf__abbrechen:focus-visible, .nb-sf__zeile:focus-visible, .nb-sf__frag:focus-visible,
.nb-sf__karte:focus-visible, .nb-sf__gzeile:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .nb-sf__band, .nb-sf__ebene { transform: none; transition-property: opacity; }
  .nb-sf__skelett { animation: none; opacity: 1; }
  .nb-sf__skelett::after { display: none; }
}

/* Unter 1280 px wird es in der festen Höhe eng (Messung 1100 px, 13.10.2026): ein Hilfe-Treffer unter den Geräten,
   vier Karten statt fünf. Die Höhe bleibt 440 px */
@media (min-width: 861px) and (max-width: 1279px) {
  .nb-sf__band .nb-sf__unten .nb-sf__zeile--hilfe:nth-of-type(n+2) { display: none; }
  .nb-sf__band .nb-sf__karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nb-sf__band .nb-sf__karten > :nth-child(n+5) { display: none; }
}

/* templates/NextBuy/themes/nextbuy/nb-warenkorb-impact.css */
/* ============================================================
   IMPACT-GRUNDLAGE FUER WARENKORB UND DRAWER (JTL, Baustein 3.6, 01.10.2026)

   Im Shopify-Theme lagen sections/main-cart.liquid, sections/cart-drawer.liquid und
   sections/variant-added.liquid (Hinweis nach dem Einlegen) allein auf Impacts theme.css.
   Im JTL-Child laedt theme.css nicht. Diese Datei traegt genau die Regeln, die ein Element
   dieser drei Bereiche treffen, automatisch ausgelesen aus der laufenden Shopify-Seite
   (shopify theme dev, 127.0.0.1:9292, /cart leer und mit Artikel, Versandrechner offen,
   Drawer leer und voll, Bestellhinweis offen, Hinweis nach dem Einlegen). Zustaende, die
   der Testartikel ohne Bild nicht zeigt (Bild und Ladepille der Position, Fehlerzeile,
   Ergebnis des Versandrechners, Bild im Hinweis), sind vor dem Auslesen als versteckte
   Kopien ergaenzt worden. Hover-, Fokus- und aria-busy-Zustaende zaehlen mit.

   Regeln unveraendert, nur mit :where(.nb-wk) begrenzt. .nb-wk steht im Child um die
   Warenkorb-Sektion (snippets/nb-warenkorb.tpl) und um die beiden Drawer
   (snippets/nb-warenkorb-drawer.tpl). [role="main"] (Impacts main) steht hier als
   :where(.nb-wk), weil die Sektion dort direkt liegt. :where hat keine Spezifitaet.

   Variablen: berechnete Werte an main im Shopify-Original bei 390, 720, 1050 und 1440 px.
   JTL: --sticky-area-height folgt --header-height aus nb-kopf.js statt fester 125 px,
   --cursor-close-svg-url zeigt auf cursor-close.svg im Theme-Ordner (gerendert aus
   assets/cursor-close.svg.liquid am Dev-Server).
   Weggelassen: Regeln fuer Shopifys Bezahlknoepfe (accelerated-checkout).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url("/assets/schrift/inter-400.e55f54d07f.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/schrift/inter-700.c23e740fef.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Variablen wie an main im Shopify-Original gemessen (390, 720, 1050, 1440 px) */
:where(.nb-wk) {
  --background: 246 247 251;
  --background-primary: 246 247 251;
  --border-color: 16 24 40 / 0.12;
  --button-background: initial;
  --button-background-opacity: initial;
  --button-background-primary: 26 26 26;
  --button-background-secondary: 240 196 23;
  --button-text-color: initial;
  --button-text-primary: 255 255 255;
  --button-text-secondary: 26 26 26;
  --container-gutter: 1.25rem;
  --container-inner-width: initial;
  --container-max-width: 1300px;
  --cursor-close-svg-url: url("/assets/bilder/cursor-close.6a2206eef6.svg");
  --dialog-background: 255 255 255;
  --error-text: 248 58 58;
  --hash-difference: initial;
  --hash-difference-abs: initial;
  --heading-font-family: "Abril Fatface", serif;
  --heading-font-style: normal;
  --heading-font-weight: 400;
  --heading-letter-spacing: -0.015em;
  --heading-text-transform: normal;
  --input-gap: 0.5rem;
  --input-height: 2.625rem;
  --input-padding-inline: 1rem;
  --nb-easing: var(--nb-motion-kurve); /* Fassung C 09.10.2026, vorher cubic-bezier(0.4, 0, 0.2, 1) */
  --nb-hover-tint: rgba(1, 12, 40, 0.05);
  --nb-radius-input: 12px;
  --previous-section-background-hash: initial;
  --rounded: 0.875rem;
  --rounded-button: 0.5rem;
  --rounded-full: 9999px;
  --rounded-input: 0.5rem;
  --rounded-sm: 0.4375rem;
  --rounded-xs: 0.25rem;
  --scrollbar-width: initial;
  --section-background-hash: initial;
  --section-outer-spacing-block: 2.5rem;
  --section-stack-spacing-block: 2rem;
  --spacing-0-5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1-5: 0.375rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-2: 0.5rem;
  --spacing-2-5: 0.625rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-3: 0.75rem;
  --spacing-3-5: 0.875rem;
  --spacing-32: 8rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --sticky-area-height: calc(1 * 0px + 1 * var(--header-height, 125px));
  --success-background: 224 244 232;
  --success-text: 0 163 65;
  --text-base: 0.875rem;
  --text-color: 16 24 40;
  --text-font-family: Inter, sans-serif;
  --text-font-style: normal;
  --text-font-weight: 400;
  --text-h2: 1.5rem;
  --text-h4: 1.125rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --text-letter-spacing: -0.02em;
  --text-primary: 16 24 40;
  --text-sm: 0.75rem;
  --text-xs: 0.6875rem;
  --transform-logical-flip: 1;
  --transform-origin-start: left;
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) {
    --container-gutter: 2rem;
    --input-gap: 1rem;
    --input-height: 3.125rem;
    --input-padding-inline: 1.25rem;
    --section-outer-spacing-block: 3.5rem;
    --section-stack-spacing-block: 3rem;
    --text-base: 1.0rem;
    --text-h2: 1.75rem;
    --text-h4: 1.25rem;
    --text-h5: 1.25rem;
    --text-h6: 1.125rem;
    --text-sm: 0.875rem;
    --text-xs: 0.75rem;
  }
}
@media screen and (min-width: 1000px) {
  :where(.nb-wk) {
    --container-gutter: 3rem;
    --section-outer-spacing-block: 4rem;
  }
}
@media screen and (min-width: 1400px) {
  :where(.nb-wk) {
    --section-outer-spacing-block: 5rem;
    --text-h2: 2.5rem;
    --text-h4: 1.5rem;
    --text-h6: 1.25rem;
  }
}

/* Erbe vom Impact-body (theme.css) */
:where(.nb-wk) {
  color: rgb(var(--text-color));
  font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.6 var(--text-font-family);
  letter-spacing: var(--text-letter-spacing);
}

/* Impact-Regeln (theme.css, nextbuy-header.css, Inline-Stil des Layouts), begrenzt */
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .button:not([disabled]):hover { --button-background-opacity: 0.85; } }
}
:where(.nb-wk) *, :where(.nb-wk) ::before, :where(.nb-wk) ::after { box-sizing: border-box; border-style: solid; border-width: 0px; border-color: rgb(var(--text-color) / .12); }
:where(.nb-wk) h1 { font-size: inherit; font-weight: inherit; }
:where(.nb-wk) a { color: inherit; text-decoration: inherit; }
:where(.nb-wk) table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
:where(.nb-wk) button, :where(.nb-wk) input, :where(.nb-wk) textarea, :where(.nb-wk) select { font-family: inherit; font-size: 100%; font-weight: inherit; font-style: inherit; line-height: inherit; text-transform: inherit; color: inherit; margin: 0px; padding: 0px; }
:where(.nb-wk) button, :where(.nb-wk) select { text-transform: none; }
:where(.nb-wk) button, :where(.nb-wk) [type="button"], :where(.nb-wk) [type="submit"] { appearance: button; text-align: inherit; background-color: rgba(0, 0, 0, 0); background-image: none; }
:where(.nb-wk) button, :where(.nb-wk) label, :where(.nb-wk) [type="submit"], :where(.nb-wk) summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
:where(.nb-wk) ::-webkit-inner-spin-button { height: auto; }
:where(.nb-wk) ::-webkit-outer-spin-button { height: auto; }
:where(.nb-wk) ::-webkit-search-decoration { appearance: none; }
:where(.nb-wk) ::-webkit-file-upload-button { appearance: button; font: inherit; }
:where(.nb-wk) ::-webkit-date-and-time-value { text-align: start; }
:where(.nb-wk) summary { user-select: none; list-style-type: none; }
:where(.nb-wk) summary::-webkit-details-marker { display: none; }
:where(.nb-wk) p, :where(.nb-wk) h1 { margin: 0px; }
:where(.nb-wk) ul { margin: 0px; padding: 0px; list-style: none; }
:where(.nb-wk) textarea { resize: vertical; }
:where(.nb-wk) input::placeholder, :where(.nb-wk) textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); }
:where(.nb-wk) :disabled { cursor: default; }
:where(.nb-wk) img { vertical-align: middle; display: block; }
:where(.nb-wk) img { color: rgba(0, 0, 0, 0); max-width: min(var(--image-mobile-max-width, var(--image-max-width, 100%)), 100%); object-fit: inherit; object-position: inherit; height: auto; }
:where(.nb-wk) :focus:not(:focus-visible) { outline: none; }
:where(.nb-wk) [hidden] { display: none !important; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) img { max-width: min(var(--image-max-width, 100%), 100%); }
}
:where(.nb-wk) .accordion { --accordion-spacing: var(--spacing-5); box-sizing: content-box; border-block-width: 1px; }
:where(.nb-wk) .accordion__toggle { gap: var(--spacing-2); flex-grow: 1; justify-content: space-between; align-items: center; padding-block-start: var(--accordion-spacing); padding-block-end: var(--accordion-spacing); display: flex; }
:where(.nb-wk) .accordion__content { margin-block-end: var(--accordion-spacing); padding-inline-end: var(--spacing-6); transform: translateY(-4px); }
:where(.nb-wk) .accordion--lg { --accordion-spacing: var(--spacing-8); }
:where(.nb-wk) .button { --button-background: var(--button-background-primary) / var(--button-background-opacity, 1); --button-text-color: var(--button-text-primary); --button-outline-color: var(--button-background-primary); appearance: none; border-radius: var(--rounded-button); background-color: rgb(var(--button-background)); color: rgb(var(--button-text-color)); text-align: center; font-size: var(--text-sm); letter-spacing: var(--text-letter-spacing); padding-block-start: var(--spacing-2-5); padding-block-end: var(--spacing-2-5); padding-inline-start: var(--spacing-5); padding-inline-end: var(--spacing-5); font-weight: bold; line-height: 1.6; transition: background-color 0.15s var(--nb-motion-kurve), color 0.15s var(--nb-motion-kurve), box-shadow 0.15s var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); display: inline-block; position: relative; }
/* Druck nach Fassung C (Daniel 09.10.2026), auch fuer "Zur Kasse" */
:where(.nb-wk) .button:active:not([disabled]) { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
:where(.nb-wk) .button--lg { font-size: var(--text-base); padding-block: 0.8125rem; padding-inline-start: var(--spacing-6); padding-inline-end: var(--spacing-6); }
:where(.nb-wk) .button--xl { font-size: var(--text-base); padding-block-start: var(--spacing-4); padding-block-end: var(--spacing-4); padding-inline-start: var(--spacing-8); padding-inline-end: var(--spacing-8); }
:where(.nb-wk) .button--secondary { --button-background: var(--button-background-secondary) / var(--button-background-opacity, 1); --button-text-color: var(--button-text-secondary); --button-outline-color: var(--button-background-secondary); }
:where(.nb-wk) .button__loader { gap: var(--spacing-1-5); opacity: 0; pointer-events: none; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0px; }
:where(.nb-wk) .button__loader > * { width: var(--spacing-1-5); height: var(--spacing-1-5); border-radius: var(--rounded-full); background: currentcolor; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .button { padding-block-start: var(--spacing-3); padding-block-end: var(--spacing-3); padding-inline-start: var(--spacing-6); padding-inline-end: var(--spacing-6); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .button--lg { padding-block-start: var(--spacing-3-5); padding-block-end: var(--spacing-3-5); padding-inline-start: var(--spacing-8); padding-inline-end: var(--spacing-8); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .button--xl { padding-block: 1.075rem; padding-inline-start: var(--spacing-10); padding-inline-end: var(--spacing-10); }
}
:where(.nb-wk) .circle-chevron { width: var(--spacing-6); height: var(--spacing-6); border-radius: var(--rounded-full); background: rgb(var(--text-color) / .1); flex-shrink: 0; place-items: center; transition: 0.2s ease-in-out; display: grid; }
:where(.nb-wk) .circle-chevron[disabled] { opacity: 0.5; }
:where(.nb-wk) .group[aria-expanded="true"] .circle-chevron.group-expanded\:colors:not([disabled]) { background: rgb(var(--text-color)); color: rgb(var(--background)); }
:where(.nb-wk) .group[aria-expanded="true"] .circle-chevron.group-expanded\:rotate { transform: rotate(calc(var(--transform-logical-flip) * 180deg)); }
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .group:hover .circle-chevron.group-hover\:colors:not([disabled]) { background: rgb(var(--text-color)); color: rgb(var(--background)); } }
}
:where(.nb-wk) :is(.drawer, .popover)::part(outside-close-button), :where(.nb-wk) :is(.drawer, .popover)::part(close-button) { appearance: none; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
:where(.nb-wk) :is(.drawer, .popover)::part(outside-close-button):active, :where(.nb-wk) :is(.drawer, .popover)::part(close-button):active { scale: var(--nb-motion-druck-scale); }
:where(.nb-wk) :is(.drawer, .popover)::part(outside-close-button) { width: var(--spacing-12); height: var(--spacing-12); bottom: 100%; left: calc(50% - var(--spacing-6)); background: rgb(var(--dialog-background)); color: rgb(var(--text-color)); border-radius: var(--rounded-full); z-index: 1; place-items: center; margin-block-end: var(--spacing-4); margin-inline: auto; display: grid; position: absolute; }
:where(.nb-wk) :is(.drawer, .popover)::part(close-button) { color: currentcolor; background: none; margin-inline-start: auto; display: none; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) :is(.drawer, .popover)::part(outside-close-button) { display: none; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) :is(.drawer, .popover)::part(close-button) { display: grid; }
}
:where(.nb-wk) .drawer { --container-outer-width: var(--spacing-6); --background: var(--dialog-background); --text-color: var(--text-primary); --drawer-header-padding: var(--spacing-5); --drawer-body-padding: var(--spacing-5) var(--spacing-6); --drawer-footer-padding: var(--spacing-6); --drawer-content-max-height: none; visibility: hidden; width: 100%; padding: var(--spacing-2); z-index: 999; position: fixed; right: 0px; }
:where(.nb-wk) .drawer::part(overlay) { background: rgba(0, 0, 0, 0.4); min-height: 100lvh; position: fixed; inset: 0px; }
:where(.nb-wk) .drawer.show-close-cursor::part(overlay) { cursor: var(--cursor-close-svg-url) 28 28, auto; }
:where(.nb-wk) .drawer::part(content) { height: 100%; max-height: var(--drawer-content-max-height); border-radius: var(--rounded-sm); background: rgb(var(--dialog-background)); color: rgb(var(--text-color)); flex-direction: column; display: flex; position: relative; }
:where(.nb-wk) .drawer::part(header) { padding: var(--drawer-header-padding); }
:where(.nb-wk) .drawer::part(body) { padding: var(--drawer-body-padding); overscroll-behavior-y: contain; flex: 1 1 auto; align-items: start; display: grid; overflow-y: auto; }
:where(.nb-wk) .drawer::part(footer) { padding: var(--drawer-footer-padding); border-block-start: 1px solid rgb(var(--border-color)); margin-block-start: auto; position: relative; }
:where(.nb-wk) .drawer > [is="close-button"] { display: none; position: absolute; top: 1.5rem; }
:where(.nb-wk) .drawer > [is="close-button"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: 1.5rem; }
@media screen and (max-width: 699px) {
  :where(.nb-wk) .drawer { --drawer-content-max-height: 75vh; }
}
@media screen and (max-width: 699px) {
  :where(.nb-wk) .drawer::part(header) { text-align: center; border-bottom: 1px solid rgb(var(--border-color)); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer { --container-outer-width: var(--spacing-10); --drawer-header-padding: var(--spacing-8) var(--spacing-10); --drawer-body-padding: var(--spacing-8) var(--spacing-10); --drawer-footer-padding: var(--spacing-8) var(--spacing-10); width: 510px; height: 100%; padding: var(--spacing-4); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer::part(header) { align-items: center; gap: var(--spacing-4); display: flex; position: relative; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer:not([header-bordered])::part(header) { padding-block-end: 0px; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer:not([header-bordered])::part(header)::after { content: ""; width: 100%; height: var(--spacing-8); background: linear-gradient(to bottom, rgb(var(--dialog-background)), rgb(var(--dialog-background) / .6) 50%, rgb(var(--dialog-background) / 0)); z-index: 1; position: absolute; top: 100%; left: 0px; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer > [is="close-button"] { display: grid; top: 2.25rem; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer > [is="close-button"]:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: 2.25rem; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .drawer--lg { width: 680px; }
}
:where(.nb-wk) .banner { align-items: start; gap: var(--spacing-3-5); padding: var(--spacing-3-5); border-radius: var(--rounded-xs); font-size: var(--text-sm); color: rgb(var(--banner-color)); background: rgb(var(--banner-background)); grid-template-columns: max-content auto; display: grid; }
:where(.nb-wk) .banner--success { --banner-background: var(--success-background); --banner-color: var(--success-text); }
:where(.nb-wk) .count-bubble { --size: var(--spacing-4); width: var(--size); height: var(--size); min-width: min-content; border-radius: var(--rounded-full); background: rgb(var(--button-background-primary)); color: rgb(var(--button-text-primary)); place-items: center; padding-inline-start: var(--spacing-1); padding-inline-end: var(--spacing-1); font-size: 9px; font-weight: bold; line-height: 1; display: grid; }
:where(.nb-wk) .count-bubble--lg, :where(.nb-wk) .count-bubble--md { --size: var(--spacing-5); font-size: var(--text-xs); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .count-bubble--md { --size: var(--spacing-6); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .count-bubble--lg { --size: var(--spacing-7); }
}
:where(.nb-wk) .pill-loader { background: rgb(var(--background-primary)); border-radius: var(--rounded-full); visibility: hidden; width: 2rem; height: 1rem; display: grid; }
:where(.nb-wk) .pill-loader > * { grid-area: 1 / -1; place-self: center; }
:where(.nb-wk) .loader-dots { justify-items: center; gap: 0.25rem; display: flex; }
:where(.nb-wk) .loader-dots > * { border-radius: var(--rounded-full); background: currentcolor; width: 0.25rem; height: 0.25rem; }
:where(.nb-wk) .loader-checkmark { opacity: 0; }
:where(.nb-wk) .fieldset { gap: var(--input-gap); display: grid; }
:where(.nb-wk) .textarea, :where(.nb-wk) .input, :where(.nb-wk) .select { appearance: none; width: 100%; height: var(--input-height); border-radius: var(--rounded-input); background: rgb(var(--input-background, transparent)); color: rgb(var(--input-text-color, var(--text-color))); text-align: start; border-width: 1px; padding-inline-start: var(--input-padding-inline); padding-inline-end: var(--input-padding-inline); }
:where(.nb-wk) :is(.input:focus, .textarea:focus, .select:focus-visible) { border-color: currentcolor; outline: none; box-shadow: 0px 0px 0px 1px inset; }
:where(.nb-wk) .input.is-floating, :where(.nb-wk) .select.is-floating { height: calc(var(--input-height)  + .625rem); padding-block-start: var(--spacing-4); }
:where(.nb-wk) .textarea { height: auto; vertical-align: top; padding-block-start: var(--spacing-4); padding-block-end: var(--spacing-4); }
:where(.nb-wk) .textarea.is-floating { padding-block-start: var(--spacing-6); padding-block-end: var(--spacing-2); }
:where(.nb-wk) .select { gap: var(--spacing-4); justify-content: space-between; align-items: center; padding-inline-end: calc(var(--input-padding-inline) * 2); display: flex; }
:where(.nb-wk) .select-chevron { position: absolute; top: calc(50% - 3.5px); }
:where(.nb-wk) .select-chevron:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: var(--input-padding-inline); }
:where(.nb-wk) .form-control { text-align: start; position: relative; }
:where(.nb-wk) .floating-label { height: calc(var(--input-height)  + .625rem); top: 0px; opacity: 0.5; pointer-events: none; transform-origin: var(--transform-origin-start); grid-auto-flow: column; align-items: center; column-gap: 0.5rem; margin-inline-start: var(--spacing-4); transition: transform 0.2s ease-in-out; display: grid; position: absolute; }
:where(.nb-wk) .floating-label:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { left: 1px; }
:where(.nb-wk) :is(:is(.input, .textarea):focus ~ .floating-label, :is(.input, .textarea):not(:placeholder-shown) ~ .floating-label, :is(.input, .textarea, .select):autofill ~ .floating-label, .select:valid ~ .floating-label) { transform: scale(.65) translateY(calc(-1 * var(--spacing-4))); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .floating-label { margin-inline-start: var(--spacing-5); }
}
:where(.nb-wk) .v-stack { display: grid; }
:where(.nb-wk) .h-stack { align-items: center; display: flex; }
:where(.nb-wk) .container { --container-inner-width: min((100vw - var(--scrollbar-width, 0px))  - var(--container-gutter) * 2, var(--container-max-width)); --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px))  - var(--container-inner-width)) / 2); margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2); margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2); }
:where(.nb-wk) .shopify-section { --section-is-first: 0; --hash-difference: calc(var(--section-background-hash)  - var(--previous-section-background-hash, -1)); --hash-difference-abs: max(var(--hash-difference), -1 * var(--hash-difference)); --background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1)); background: rgb(var(--background)); position: relative; }
:where(.nb-wk) .shopify-section:not(.contents) { display: flow-root; }
:where(.nb-wk) .shopify-section:empty { display: none; }
:where(.nb-wk) .shopify-section:first-child { --section-is-first: 1; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .shopify-section:first-child { --section-outer-spacing-block-start: 24px; }
}
:where(.nb-wk) .page-spacer { margin-block-start: var(--spacing-8); margin-block-end: var(--section-outer-spacing-block); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .page-spacer { margin-block-start: var(--spacing-12); }
}
@media screen and (min-width: 1000px) {
  :where(.nb-wk) .page-spacer { margin-block-start: var(--spacing-16); }
}
:where(.nb-wk) .empty-state { justify-items: center; gap: var(--spacing-5); text-align: center; margin-block-start: var(--spacing-12); margin-block-end: var(--spacing-12); display: grid; }
:where(.nb-wk) .empty-state__icon-wrapper { position: relative; }
:where(.nb-wk) .empty-state__icon-wrapper > .count-bubble { position: absolute; top: calc(-1 * var(--spacing-1-5)); }
:where(.nb-wk) .empty-state__icon-wrapper > .count-bubble:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: calc(-1 * var(--spacing-1-5)); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .empty-state { gap: var(--spacing-8); margin-block-start: var(--spacing-32); margin-block-end: var(--spacing-32); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .empty-state__icon-wrapper > svg { width: var(--spacing-12); height: var(--spacing-12); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .empty-state__icon-wrapper > .count-bubble { top: calc(-1 * var(--spacing-3)); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .empty-state__icon-wrapper > .count-bubble:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { right: calc(-1 * var(--spacing-3)); }
}
:where(.nb-wk) .line-item { --line-item-image-width: var(--spacing-20); align-items: start; gap: var(--spacing-5); display: flex; }
:where(.nb-wk) .line-item__media-wrapper { width: var(--line-item-image-width); min-width: var(--line-item-image-width); position: relative; }
:where(.nb-wk) .line-item__media-wrapper > .pill-loader { position: absolute; top: calc(50% - 0.5rem); }
:where(.nb-wk) .line-item__media-wrapper > .pill-loader:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { left: calc(50% - 1rem); }
:where(.nb-wk) .line-item__info { justify-items: start; gap: var(--spacing-1); display: grid; }
:where(.nb-wk) .line-item__info line-item-quantity { margin-block-start: var(--spacing-1); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .line-item { --line-item-image-width: var(--spacing-24); align-items: center; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .line-item__actions { margin-inline-start: auto; }
}
:where(.nb-wk) .order-summary__header { display: none; }
:where(.nb-wk) .order-summary__body td { border-top-width: 0px; padding-block-start: 0px; padding-block-end: var(--spacing-4); }
:where(.nb-wk) .order-summary__body td:first-child { width: 60%; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .order-summary__header { display: table-header-group; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .order-summary__body td { padding-block-end: var(--spacing-6); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .order-summary__body tr:first-child td { padding-block-start: var(--spacing-8); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .order-summary__body tr:last-child td { padding-block-end: var(--spacing-8); }
}
:where(.nb-wk) .quantity-input { width: var(--quantity-input-characters-count, 1ch); border-radius: var(--rounded-input); text-align: center; min-width: 44px; font-size: var(--text-xs); appearance: none; background: none; border-width: 1px; outline: none; padding-block-start: var(--spacing-1); padding-block-end: var(--spacing-1); }
:where(.nb-wk) .quantity-input::-webkit-outer-spin-button { appearance: none; margin: 0px; }
:where(.nb-wk) .quantity-input::-webkit-inner-spin-button { appearance: none; margin: 0px; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .quantity-input { min-width: 48px; padding-block-start: var(--spacing-2); padding-block-end: var(--spacing-2); }
}
:where(.nb-wk) .buy-buttons { align-items: start; gap: var(--spacing-2); display: grid; }
:where(.nb-wk) .buy-buttons--compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
:where(.nb-wk) .price-list { align-items: baseline; gap: var(--spacing-0-5) var(--spacing-2); flex-wrap: wrap; display: flex; }
:where(.nb-wk) .quick-buy-drawer { --drawer-header-padding: var(--spacing-6); --drawer-body-padding: var(--spacing-6); --shopify-payment-button-padding: .8125rem var(--spacing-6); display: none; }
:where(.nb-wk) .quick-buy-drawer::part(close-button) { align-self: start; margin-block-start: 0.25rem; margin-inline-end: 0.25rem; }
:where(.nb-wk) .quick-buy-drawer__media { max-width: var(--spacing-20); }
:where(.nb-wk) .quick-buy-drawer__info { gap: var(--spacing-6); margin-block-start: 1rem; display: grid; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .quick-buy-drawer { --drawer-header-padding: var(--spacing-6); width: 560px; height: auto; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .quick-buy-drawer :is(.button, .shopify-payment-button__button--unbranded) { padding: var(--spacing-3) var(--spacing-6) !important; font-size: var(--text-sm) !important; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .quick-buy-drawer__info { gap: var(--spacing-8); }
}
:where(.nb-wk) .list-disc { list-style: inside; }
:where(.nb-wk) .prose > :first-child { margin-block-start: 0px !important; }
:where(.nb-wk) .prose > :last-child { margin-block-end: 0px !important; }
:where(.nb-wk) .prose * + .button { margin-block-start: var(--spacing-6) !important; }
:where(.nb-wk) .prose :is(.h0, .h1, .h2, .h3, .h4, h1, h2, h3, h4) + * { margin-block-start: var(--spacing-5); }
:where(.nb-wk) .prose :is(.h5, .h6, h5, h6) + * { margin-block-start: var(--spacing-4); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .prose * + .button { margin-block-start: var(--spacing-8) !important; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .prose :is(.h4, h4) + * { margin-block-start: var(--spacing-5); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .prose :is(.h5, .h6, h5, h6) + * { margin-block-start: var(--spacing-4); }
}
@media screen and (min-width: 1150px) {
  :where(.nb-wk) .prose :is(.h3, .h4, h3, h4) + * { margin-block-start: var(--spacing-6); }
}
@media screen and (min-width: 1150px) {
  :where(.nb-wk) .prose :is(.h5, .h6, h5, h6) + * { margin-block-start: var(--spacing-4); }
}
:where(.nb-wk) .link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.35em) / 100% 1px no-repeat; transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out; }
@supports (height: 1lh) {
  :where(.nb-wk) .link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.2lh) / 100% 1px no-repeat; }
}
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) :is(.link, .prose a:not(.button)):hover { background-size: 0px 1px; } }
}
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .text-subdued :is(.link, .prose a:not(.button)):hover { color: rgb(var(--text-color)); } }
}
:where(.nb-wk) .reversed-link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.35em) / 0px 1px no-repeat; transition: background-size 0.3s ease-in-out; }
@supports (height: 1lh) {
  :where(.nb-wk) .reversed-link { background: linear-gradient(to right, currentcolor, currentcolor) 0px min(100%, 1.2lh) / 0px 1px no-repeat; }
}
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .reversed-link.hover\:show:hover { background-size: 100% 1px; } }
}
:where(.nb-wk) .link-faded { opacity: 0.7; transition: opacity 0.2s ease-in-out; }
@media screen and (pointer: fine) {
  @media (hover: hover) and (pointer: fine) { :where(.nb-wk) .link-faded:hover { opacity: 1; } }
}
:where(.nb-wk) table { width: 100%; }
:where(.nb-wk) th { text-align: start; }
:where(.nb-wk) th, :where(.nb-wk) td { padding: var(--spacing-4); vertical-align: top; }
:where(.nb-wk) table:not(.table--bordered) :is(th, td):first-child { padding-inline-start: 0px; }
:where(.nb-wk) table:not(.table--bordered) :is(th, td):last-child { padding-inline-end: 0px; }
:where(.nb-wk) thead th { border-block-end-width: 1px; }
:where(.nb-wk) thead + tbody tr > * { border-top-width: 1px; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) th, :where(.nb-wk) td { padding-block-start: var(--spacing-6); padding-block-end: var(--spacing-6); }
}
:where(.nb-wk) .text-with-icon { gap: var(--spacing-3); align-items: center; display: flex; }
:where(.nb-wk) .text-with-icon > svg { flex-shrink: 0; }
:where(.nb-wk) .icon { vertical-align: middle; display: block; }
:where(.nb-wk) .offset-icon { --icon-baseline-distance: calc(1em * 1.6); --icon-offset: calc((var(--icon-baseline-distance)  - var(--icon-height)) / 2); top: var(--icon-offset); position: relative; }
:where(.nb-wk) .icon-chevron-bottom { transition: transform 0.2s ease-in-out; }
:where(.nb-wk) .cart { gap: var(--section-stack-spacing-block); max-width: 1350px; margin-inline: auto; display: grid; }
:where(.nb-wk) .cart-header { gap: var(--spacing-6); text-align: center; justify-items: center; display: grid; }
:where(.nb-wk) .cart-order { align-items: start; gap: var(--spacing-6); display: grid; }
:where(.nb-wk) .cart-form { gap: var(--spacing-5); padding: var(--spacing-6); border-width: 1px; display: grid; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-order { gap: var(--spacing-12); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-form { gap: var(--spacing-6); padding: var(--spacing-10) var(--spacing-12); }
}
@media screen and (min-width: 1150px) {
  :where(.nb-wk) .cart-order { grid-template-columns: 1fr 380px; }
}
@media screen and (min-width: 1150px) {
  :where(.nb-wk) .cart-order__recap { top: calc(var(--sticky-area-height)  + 20px); position: sticky; }
}
@media screen and (min-width: 1400px) {
  :where(.nb-wk) .cart-order { gap: var(--spacing-24); }
}
:where(.nb-wk) .shipping-estimator { gap: var(--spacing-6); display: grid; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .shipping-estimator__form { flex-wrap: wrap; margin-inline-end: var(--spacing-6); display: flex; }
}
:where(.nb-wk) .cart-drawer { --drawer-footer-padding: 1rem 1.5rem 1.5rem 1.5rem; --drawer-content-max-height: none; height: 100%; top: 0px; }
:where(.nb-wk) .cart-drawer::part(outside-close-button) { display: none; }
:where(.nb-wk) .cart-drawer > [is="close-button"] { display: grid; }
:where(.nb-wk) .cart-drawer__top { gap: var(--spacing-2); padding-block-end: var(--spacing-6); display: grid; }
:where(.nb-wk) .cart-drawer__note { visibility: hidden; width: 100%; transition: visibility 0.2s ease-in-out; position: absolute; bottom: calc(100% + 1px); overflow: hidden; }
:where(.nb-wk) .cart-drawer__note:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { left: 0px; }
:where(.nb-wk) .cart-drawer__note-inner { padding: var(--spacing-5); background: rgb(var(--dialog-background)); border-block-start-width: 1px; transition: transform 0.2s ease-in-out; transform: translateY(100%); }
:where(.nb-wk) .cart-drawer__note[open] { visibility: visible; }
:where(.nb-wk) .cart-drawer__note[open] > .cart-drawer__note-inner { transform: translateY(0px); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-drawer { --drawer-footer-padding: 1.5rem 2.5rem 2.5rem 2.5rem; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-drawer__top { gap: var(--spacing-4); padding-block-end: var(--spacing-8); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .cart-drawer__note-inner { padding: var(--spacing-8) var(--spacing-10) var(--spacing-10) var(--spacing-10); }
}
:where(.nb-wk) .sr-only { clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
:where(.nb-wk) .rounded-xs { border-radius: var(--rounded-xs); }
:where(.nb-wk) .rounded { border-radius: var(--rounded); }
:where(.nb-wk) .text-error { color: rgb(var(--error-text)); }
:where(.nb-wk) .text-subdued { color: rgb(var(--text-color) / .7); }
:where(.nb-wk) .hidden { display: none; }
:where(.nb-wk) .block { display: block; }
:where(.nb-wk) .contents { display: contents; }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:hidden { display: none; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:block { display: block; }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:table-cell { display: table-cell; }
}
:where(.nb-wk) .wrap { flex-wrap: wrap; }
:where(.nb-wk) .grow { flex-grow: 1; }
:where(.nb-wk) .text-start { text-align: start; }
:where(.nb-wk) .text-center { text-align: center; }
:where(.nb-wk) .text-end { text-align: end; }
:where(.nb-wk) .justify-center { justify-content: safe center; }
:where(.nb-wk) .justify-between { justify-content: space-between; }
:where(.nb-wk) .justify-self-start { justify-self: start; }
:where(.nb-wk) .align-center { align-items: center; }
:where(.nb-wk) .align-self-center { align-self: center; }
:where(.nb-wk) .align-center { vertical-align: middle; }
:where(.nb-wk) .w-full { width: 100%; }
:where(.nb-wk) .w-0 { width: 0px; }
:where(.nb-wk) .gap-0\.5 { gap: var(--spacing-0-5); }
:where(.nb-wk) .gap-1 { gap: var(--spacing-1); }
:where(.nb-wk) .gap-2 { gap: var(--spacing-2); }
:where(.nb-wk) .gap-3 { gap: var(--spacing-3); }
:where(.nb-wk) .gap-4 { gap: var(--spacing-4); }
:where(.nb-wk) .gap-6 { gap: var(--spacing-6); }
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:gap-2\.5 { gap: var(--spacing-2-5); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:gap-6 { gap: var(--spacing-6); }
}
@media screen and (min-width: 700px) {
  :where(.nb-wk) .sm\:gap-8 { gap: var(--spacing-8); }
}
:where(.nb-wk) .bold { font-weight: bold; }
:where(.nb-wk) .text-xs { font-size: var(--text-xs); line-height: 1.7; }
:where(.nb-wk) .text-sm { font-size: var(--text-sm); line-height: 1.6; }
:where(.nb-wk) .h4, :where(.nb-wk) .h5, :where(.nb-wk) .h2, :where(.nb-wk) .h6 { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); letter-spacing: var(--heading-letter-spacing); text-transform: var(--heading-text-transform); overflow-wrap: anywhere; }
:where(.nb-wk) .h2 { font-size: var(--text-h2); line-height: 1.1; }
:where(.nb-wk) .h4 { font-size: var(--text-h4); line-height: 1.3; }
:where(.nb-wk) .h5 { font-size: var(--text-h5); line-height: 1.4; }
:where(.nb-wk) .h6 { font-size: var(--text-h6); line-height: 1.4; }
:where(.nb-wk) :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .section-header__title, .prose :is(h1, h2, h3, h4, h5, h6), .product-card__title) { font-family: Gilroy, GilroyFallback, sans-serif !important; font-weight: 600 !important; }
:where(.nb-wk) .cart-drawer [is="close-button"] { padding: 8px; margin: -8px; border-radius: var(--nb-radius-input); background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; transition: background var(--nb-motion-transform) var(--nb-easing), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
/* Hover nur mit Maus. Jede :hover-Regel steht in @media (hover: hover), am Handy bliebe sonst das getippte Element im Hover stehen (Daniel 07.10.2026, Regel HOVERMEDIA) */
@media (hover: hover) and (pointer: fine) { :where(.nb-wk) .cart-drawer [is="close-button"]:hover { color: var(--nb-ink-700); } }
/* Druck nach Fassung C (Daniel 09.10.2026) */
:where(.nb-wk) .cart-drawer [is="close-button"]:active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }

/* html.lock aus theme.css Zeile 4011, gesetzt von nb-warenkorb.js, solange ein Drawer offen ist */
html.lock { overflow: hidden; }

/* JTL: der Fokusring des Child (.nb-v3 :focus-visible in nb-tokens-v3.css) traf das Mengenfeld, das in Impact
   ohne Ring steht (.quantity-input { outline: none }). Felder bekommen keinen globalen Ring (komponenten-formular.md).
   .input, .textarea und .select setzen ihren Fokus oben selbst und schlagen den Ring schon. */
.nb-v3 .nb-wk .quantity-input:focus-visible { outline: none; box-shadow: none; }

/* templates/NextBuy/themes/nextbuy/nb-assistent-starter.css */
/* KI-Assistent, Starter (Spur faq, Session 5 Teil 1, 08.10.2026). Das einzige CSS des Assistenten, das vor dem ersten
   Klick lädt. Fenster und Gespräch liegen in nb-assistent.css und kommen erst mit dem Klick (js/nb-assistent-starter.js).
   1:1 aus baukasten/sektionen/assistent-starter/sektion.css (Fassung a, b und c fallen weg) und baukasten/kern/assistent.css
   (Hub über fester Leiste, Ausweichen). Werte design/werte/komponenten-assistent.md §1, Ebene 90 nach §18.
   Ohne Starter bleiben Strecke und Kasse (snippets/nb-assistent.tpl). */
.nb-as-st-ort {
  --as-rand: var(--nb-space-s);
  --as-leiste: 0px;
  position: fixed; z-index: 90;
  right: calc(var(--as-rand) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--as-rand) + var(--as-leiste) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { .nb-as-st-ort { --as-rand: var(--nb-space-m); } }

/* Zwei Teile übereinander an der rechten Kante, nur transform und opacity bewegen sich (keine Breite). Der Knopf selbst ist
   unsichtbar und fängt keine Klicks, nur der sichtbare Teil */
.nb-as-st {
  display: inline-grid; justify-items: end; align-items: end;
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none;
  font: var(--nb-weight-semibold) var(--nb-t-heading-03)/1 var(--nb-font-sans);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.nb-as-st:focus-visible { outline: none; }
.nb-as-st__teil {
  grid-area: 1 / 1; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs);
  height: 48px; border-radius: var(--nb-radius-pill); pointer-events: auto;
  box-shadow: var(--nb-sh-schwebt);
  transform-origin: right center;
  transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-rand) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve);
}
.nb-as-st__teil--zu { padding: 0 var(--nb-space-m) 0 var(--nb-space-s); }
.nb-as-st__teil--offen { width: 48px; opacity: 0; transform: scale(.6); pointer-events: none; }
.nb-as-st__x { display: inline-flex; transform: rotate(-90deg); transition: transform 250ms var(--nb-motion-kurve); }
.nb-as-st__zeichen { display: inline-flex; }
/* Offen: Pille schrumpft zur Kante und blendet aus, der Kreis mit X dreht sich herein */
.nb-as-st[aria-expanded="true"] .nb-as-st__teil--zu { opacity: 0; transform: scale(.85); pointer-events: none; }
.nb-as-st[aria-expanded="true"] .nb-as-st__teil--offen { opacity: 1; transform: none; pointer-events: auto; }
.nb-as-st[aria-expanded="true"] .nb-as-st__x { transform: none; }
.nb-as-st[aria-expanded="false"]:focus-visible .nb-as-st__teil--zu, .nb-as-st[aria-expanded="true"]:focus-visible .nb-as-st__teil--offen { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page), var(--nb-sh-schwebt); }
.nb-as-st:active .nb-as-st__teil { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }

/* a: Signal, Wort weiß 5,24:1 */
.nb-as-st--a .nb-as-st__teil { background: var(--nb-action-primary); color: var(--nb-action-primary-label); }
@media (hover: hover) and (pointer: fine) { .nb-as-st--a:hover .nb-as-st__teil { background: var(--nb-action-primary-hover); } }
.nb-as-st--a .nb-as-st__teil:active { background: var(--nb-action-primary-active); scale: var(--nb-motion-druck-scale); }

/* Offen: der Starter wird zum Schließen-Knopf. Nur beim schwebenden Fenster am Rechner sichtbar, sonst schließt das Fenster selbst */
.nb-as-st-ort:has([aria-expanded="true"]) { display: none; }
@media (min-width: 768px) { :root:has([data-nb-as-rahmen="schwebend"]:not([hidden])) .nb-as-st-ort:has([aria-expanded="true"]) { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .nb-as-st__teil, .nb-as-st__x { transition: none; }
}

/* ---------- aus baukasten/kern/assistent.css ---------- */
/* Vertrag mit der Seite: hat sie unten eine feste Leiste, steht deren Höhe in --nb-leiste-unten an :root. Der Starter steht
   dann 16 px darüber (knowledge/checklisten/shop-build.md 18.4). Setzt die Seite nichts, misst js/nb-assistent-starter.js
   die Leiste. Ohne Leiste bleibt der Rand des Starters (16 px, ab 768 px 24 px). */
[data-nb-ueberlagerung="assistent"] .nb-as-st-ort {
  --as-leiste: max(0px, calc(var(--nb-leiste-unten, 0px) + var(--nb-space-s) - var(--as-rand)));
}
/* Ausweichen (Daniel 08.10.2026): data-nb-weicht, solange Hauptknopf, Feld oder Preis näher als 16 px am Starter liegen.
   Ausblenden in 200 ms, visibility folgt. Den Übergang gibt es erst ab data-nb-weicht-bereit, der Stand beim Laden setzt
   ohne Einblenden (G15) */
[data-nb-ueberlagerung="assistent"] .nb-as-st-ort[data-nb-weicht] { opacity: 0; visibility: hidden; pointer-events: none; }
[data-nb-ueberlagerung="assistent"] .nb-as-st-ort[data-nb-weicht-bereit] { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s; }
[data-nb-ueberlagerung="assistent"] .nb-as-st-ort[data-nb-weicht-bereit][data-nb-weicht] { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s var(--nb-motion-farbe); }
@media (prefers-reduced-motion: reduce) {
  [data-nb-ueberlagerung="assistent"] .nb-as-st-ort[data-nb-weicht-bereit] { transition: none; }
}

/* 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) */
@media (hover: hover) and (pointer: fine) { .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), scale var(--nb-motion-druck) 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 */
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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); }
@media (hover: hover) and (pointer: fine) { .nb-f-knopf--primaer:hover { background: var(--nb-action-primary-hover); border-color: var(--nb-action-primary-hover); } }
/* Druck: action-primary-active, weißes Label 9,57:1 (nb-tokens-v3.css:88, farbcheck). Wie ga-karte/sektion.css:184
   (qualitaet 05.10.2026, DRUCK: 3 Primärknöpfe ohne :active). Der Night-Knopf im Band hat keinen Wert, OE 94 Punkt 6 */
.nb-f-knopf--primaer:active { background: var(--nb-action-primary-active); border-color: var(--nb-action-primary-active); }
.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 */
@media (hover: hover) and (pointer: fine) { .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“) */
@media (hover: hover) and (pointer: fine) { .nb-f-knopf--text:hover { color: var(--nb-text-link); } }
.nb-f-knopf--breit { width: 100%; }
/* Druck Fassung C (Daniel 09.10.2026): Primär und Umriss geben über scale nach, die Farbe wechselt sofort, der
   Rücksprung gleitet. Die Liste wiederholt .nb-knopf (nb-tradein.css) plus scale, die doppelte Klasse schlägt .nb-knopf */
.nb-f-knopf:is(.nb-f-knopf--primaer, .nb-f-knopf--umriss) { transition: background var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-farbe) var(--nb-motion-kurve), opacity var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-f-knopf:is(.nb-f-knopf--primaer, .nb-f-knopf--umriss):active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.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 */
@media (hover: hover) and (pointer: fine) { .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-on-stage); font-size: 14px; } /* m-merkmal: immer 14 px und Ton in Ton, auch wo body-02 16 ist (komponenten-global.md §1, Daniel 13.10.2026) */
.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(:focus):not(:disabled))::before { background: var(--fl-grund-aktiv); }
@media (hover: hover) and (pointer: fine) { .nb-fl--text .nb-fl__rahmen:has(> .nb-fl__eingabe:is(:hover):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(:focus))::before { background: var(--nb-critical-bg); }
@media (hover: hover) and (pointer: fine) { .nb-fl--text.is-fehler .nb-fl__rahmen:has(> .nb-fl__eingabe:is(:hover))::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), scale var(--nb-motion-druck) var(--nb-motion-kurve); user-select: none; -webkit-user-select: none; }
.nb-f-ablage__knopf:active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); } /* Druck, Fassung C 09.10.2026 */
@media (hover: hover) and (pointer: fine) { .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 als graue Fläche wie die Kacheln §5f, gewählt Haken plus „Gewählt“ (18.10.2026) ---------- */
.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 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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-f-wahl__zeile:active { scale: var(--nb-motion-druck-scale-breit); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); } /* Druck, Fassung C 09.10.2026 */
@media (hover: hover) and (pointer: fine) { .nb-f-wahl__zeile:hover { background: var(--nb-ink-200); } }
.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 */
.nb-f-wahl .nb-f-wahl__zeile:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }

/* ---------- §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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-f-kachel:active { scale: var(--nb-motion-druck-scale-breit); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); } /* Druck, Fassung C 09.10.2026 */
@media (hover: hover) and (pointer: fine) { .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: 24px; }
  .nb-f-erfolg__wert { font-size: 20px; }
}

/* 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; }
}

/* Stift nur als Zeichen (Daniel 17.10.2026, Zahlseite Lieferung, Versand, Rechnungsadresse), wortgleich mit live nb-kasse.css:
   Night, 44 px Trefferfläche, keine Fläche bei Hover oder Druck, nur die Farbe wechselt (design-kurz 12) */
.nb-f-stift--zeichen { justify-content: center; min-width: 44px; min-height: 44px; margin: -10px -12px -10px 0; color: var(--nb-text-heading); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.nb-f-stift--zeichen svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .nb-f-stift--zeichen:hover { color: var(--nb-ink-700); } }
.nb-f-stift--zeichen:active { color: var(--nb-ink-700); }
.nb-f-stift--zeichen:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-input); }

/* 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 design/werte/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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-h-karte--klick:hover { box-shadow: var(--nb-sh-hoch); } }
/* Hover nur Schatten, kein Lift; Druck breit (Fassung C, Daniel 09.10.2026) */
.nb-h-karte--klick:active { scale: var(--nb-motion-druck-scale-breit); }

/* ---------- 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), scale var(--nb-motion-druck) var(--nb-motion-kurve); white-space: nowrap; }
.nb-h-knopf:not(:disabled, [aria-disabled="true"], .is-disabled):active { scale: var(--nb-motion-druck-scale); }
@media (hover: hover) and (pointer: fine) { .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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-h-chip:active { scale: var(--nb-motion-druck-scale); }
@media (hover: hover) and (pointer: fine) { .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-regular); 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); }
@media (hover: hover) and (pointer: fine) { .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); }
@media (hover: hover) and (pointer: fine) { .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 */
@media (hover: hover) and (pointer: fine) { .nb-h-suche .nb-su .nb-su__eingabe:hover { background: var(--nb-surface-page); } }
@media (hover: hover) and (pointer: fine) { .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.ist-aktiv { background: var(--nb-surface-component); }
@media (hover: hover) and (pointer: fine) { .nb-h-suche__vorschlaege a:hover { 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: 24px; }
  .nb-h-h2 { font-size: 16px; }
  .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; }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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, .nb-h-marke a { position: relative; } /* .nb-h-marke a: Handy-Gesamtprüfung 14.10.2026, Logo 18 px hoch, Fläche 44 */
.nb-h-marke__titel::after, .nb-h-kopf__link::after, .nb-h-marke a::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; }
/* Knopf zum KI-Assistenten (Daniel 08.10.2026: „Bald weg … dunkel navy und gelb Kombi“). Night wie der Kopf des Fensters,
   Schrift Weiß 19,36:1, Funke Lime 16,28:1 (komponenten-assistent.md §3). Lime als Knopffläche auf Hell ist Verbotszone
   (farbsystem.md, Lime auf Stage 1,02:1). Öffnet über data-nb-as-starter (js/nb-assistent-starter.js). Ohne Starter auf
   der Seite, etwa im statischen Export, steht der Knopf nicht da */
.nb-h-assistent { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); align-self: flex-start; min-height: 44px; padding: 0 var(--nb-space-m) 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-text-heading); color: var(--nb-surface-page); font: var(--nb-weight-semibold) var(--nb-t-body-01)/1.25 var(--nb-font-sans); cursor: pointer; box-shadow: var(--nb-sh-ruht); transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-h-assistent svg { color: var(--nb-lime); flex: none; }
@media (hover: hover) and (pointer: fine) { .nb-h-assistent:hover { box-shadow: var(--nb-sh-hoch); } }
.nb-h-assistent:active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-h-assistent:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
body:not(:has([data-nb-ueberlagerung="assistent"])) .nb-h-assistent { display: none; }
@media (prefers-reduced-motion: reduce) { .nb-h-assistent { transition: none; } .nb-h-assistent:active { scale: none; } }

/* 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; }
/* Handy-Gesamtprüfung 14.10.2026 (ZIEL): Fläche 44 px wie .nb-kk__krumen (OE 94 Punkt 8), der Link bleibt 20 px hoch */
.nb-h-krume a { position: relative; }
.nb-h-krume a::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .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); }
}
/* Handy wie Back Market (Daniel 11.10.2026: „alles so groß auf dem Handy wie Back Market“, Kartentitel dort 16 px, Untertitel 14 px) */
@media (max-width: 600px) { .nb-h-gruss { font-size: 16px; } .nb-h-unter { font-size: 14px; } }

/* 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; }
/* Raster statt columns (08.10.2026, Daniel: „verbuggt“): columns brach bei 8 statt 10 Fragen ungleich um, 3 links, 5 rechts.
   Zeilen laufen jetzt links nach rechts, gleiche Höhe je Reihe, bei jeder Anzahl. Fragen 16/400 und 24 px unter der Überschrift (Daniel 08.10.2026: „hebt sich nicht ab“, komponenten-hilfe.md §6). */
.nb-h-zeilen--zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; margin-top: var(--nb-space-m); }
.nb-h-zeilen--zwei li:nth-child(2) a { border-top: 0; padding-top: var(--nb-space-3xs); }
.nb-h-zeilen--zwei li { display: flex; }
.nb-h-zeilen--zwei li > a { flex: 1; }

/* 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 { grid-template-columns: minmax(0, 1fr); }
  .nb-h-zeilen--zwei li:nth-child(2) 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; }
@media (hover: hover) and (pointer: fine) { .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; }
  /* Handy-Gesamtprüfung 14.10.2026: Zeilenabstand 24 statt 8, damit die Fläche volle 44 px hat, ohne Überlappung (21 + 24 = 45) */
  .nb-h-fuss nav { row-gap: var(--nb-space-m); }
}

/* 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; }
  /* Handy wie Back Market (Daniel 11.10.2026: „alles so groß auf dem Handy wie Back Market“, Kartentitel dort 16 px) */
  .nb-h-abschnitt-titel { font-size: 16px; }
}

/* 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; }
@media (hover: hover) and (pointer: fine) { .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; }
@media (hover: hover) and (pointer: fine) { .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-akkordeon-zu) var(--nb-motion-kurve-bewegung); }
.nb-h-sprung-klapp[open] summary::after { transform: rotate(-135deg); transition: transform var(--nb-motion-akkordeon-auf) var(--nb-motion-kurve-bewegung); }
/* Druck auf die ganze Zeile, Inhalt auf 300 ms, zu 200 ms (Fassung C, Daniel 09.10.2026). ::details-content kennt nicht jeder Browser, dort fällt die Regel weg und der Inhalt steht sofort */
.nb-h-sprung-klapp summary { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-h-sprung-klapp summary:active { scale: var(--nb-motion-druck-scale-breit); }
.nb-h-sprung-klapp::details-content { opacity: 0; transition: opacity var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve), content-visibility var(--nb-motion-akkordeon-zu) allow-discrete; }
.nb-h-sprung-klapp[open]::details-content { opacity: 1; transition: opacity var(--nb-motion-akkordeon-auf) var(--nb-motion-kurve), content-visibility var(--nb-motion-akkordeon-auf) allow-discrete; }
/* Beim Sprung schließt die Liste sofort, sonst hält sie 200 ms ihren Platz und der Sprung endet um ihre Höhe zu tief (14.10.2026) */
.nb-h-sprung-klapp.ist-sofort::details-content { transition: none; }
.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); }
@media (hover: hover) and (pointer: fine) { .nb-h-linkliste a:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } }
@media (hover: hover) and (pointer: fine) { .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: 32px; }
  .nb-h-kurz { font-size: 16px; }
  .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: 16px; }
  .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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-hk-schritt__aendern:active { scale: var(--nb-motion-druck-scale); }
@media (hover: hover) and (pointer: fine) { .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 { background: var(--nb-surface-page); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-h-textlink.nb-hk-textknopf:active { scale: var(--nb-motion-druck-scale); }
@media (hover: hover) and (pointer: fine) { .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: 16px; }
  .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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-hk-filter__chip:active { scale: var(--nb-motion-druck-scale); }
.nb-hk-filter__chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-hk-artikel:active { scale: var(--nb-motion-druck-scale-breit); }
@media (hover: hover) and (pointer: fine) { .nb-hk-artikel:hover { background: var(--nb-ink-200); } }
.nb-hk-ruhig--e .nb-hk-artikel { background: var(--nb-surface-page); }
@media (hover: hover) and (pointer: fine) { .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); }
@media (hover: hover) and (pointer: fine) { .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) {
  /* Handy wie Back Market (Daniel 11.10.2026: „alles so groß auf dem Handy wie Back Market“, Kartentitel dort 16 px) */
  .nb-hk-artikelblock__titel { font-size: 16px; }
  .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), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-hk-sofortkachel:active { scale: var(--nb-motion-druck-scale-breit); }
/* 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“) */
@media (hover: hover) and (pointer: fine) { .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); }
@media (hover: hover) and (pointer: fine) { .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; }
/* Sprung der Suchseite (known_issue 05.10.2026, gemessen 06.10.2026: CLS bis 0,62 am Handy). Der Hauptteil füllt immer das
   Bild, so steht der Fuß in keinem Stand im ersten Bild und wird von den Treffern nicht weggeschoben */
[data-nb-hs-haupt] { min-height: 100vh; }
: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; } }