/* Erzeugt von baukasten/werkzeug/exportieren.mjs. Nicht von Hand ändern, Quelle ist der Baukasten:
   baukasten/kern/schale.css
   baukasten/kern/bewegung.css
   baukasten/kern/schweif.css
   baukasten/sektionen/kopf/sektion.css
   baukasten/sektionen/kat-kopf/sektion.css
   baukasten/sektionen/vm-kopf/sektion.css
   baukasten/sektionen/vm-tabelle/sektion.css
   baukasten/sektionen/ablauf/sektion.css
   baukasten/sektionen/fragen/sektion.css
   baukasten/sektionen/modelle/sektion.css
   baukasten/sektionen/buehne/sektion.css
   baukasten/sektionen/kategorien/sektion.css
   baukasten/sektionen/schlussruf/sektion.css
   baukasten/sektionen/fuss/sektion.css */

/* 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/bewegung.css */
/* Bewegung der Seite, gewählt von Daniel am 26.09.2026 in der Bewegungs-Werkstatt (baukasten/bewegung/).
   Nur Werte aus nb-tokens-v3.css: eine Kurve, 200 ms Farbe, 250 ms Rand, 300 ms Transform, 600 ms Reveal,
   1200 ms Sweep (farbsystem.md §5, brand-design.md §5). Die Laufzeit dazu ist baukasten/bewegung/bewegung.js
   (Fragen, Reveal, Schweif, Zahlen, Bilder). Die Regeln je Sektion stehen in deren sektion.css. */

/* Textauswahl nur auf Bedienelementen (Daniel 26.09.2026). Antworten, Zusagen, Rechtstexte und Beträge bleiben kopierbar,
   auch die Bis-zu-Beträge in der Direktwahl und in der großen Kachel (design-auditor 26.09.2026). */
.nb-bk :is(.nb-s-frage summary, a.nb-s-kachel, .nb-s-kachel--zu, .nb-s-buehne__direkt a, .nb-s-buehne__direkt-titel, .nb-s-modelle__pille, .nb-knopf, button, .nb-s-suche__treffer, .nb-s-kopf__link, .nb-s-buehne__krumen) { -webkit-user-select: none; user-select: none; }
.nb-bk :is(.nb-s-buehne__bis, .nb-s-kachel__zeile) { -webkit-user-select: text; user-select: text; }

/* Reveal gestaffelt: Sektionskopf, Kacheln, Karten und Fragen kommen nacheinander, 60 ms Versatz, Fade plus 20 px,
   600 ms, einmal, jede Karte ab 30 % im Bild (brand-design.md §5.3). Die Klasse setzt bewegung.js, ohne Skript steht
   alles. Nie auf Bühne, Angebot und Schlussruf, also nie auf Suche, Knopf und Betrag. */
.nb-m-reveal { opacity: 0; transform: translateY(calc(var(--nb-motion-reveal-versatz-px) * 1px)); transition: opacity var(--nb-motion-reveal) var(--nb-motion-kurve), transform var(--nb-motion-reveal) var(--nb-motion-kurve); transition-delay: calc(var(--nb-i, 0) * var(--nb-motion-reveal-versatz)); }
.nb-m-reveal.nb-m-da { opacity: 1; transform: none; }

/* Schweif zeichnet sich einmal beim Eintritt des Bandes, 1.200 ms */
.nb-schweif path.nb-m-zeichnen { transition: stroke-dashoffset var(--nb-motion-skeleton-sweep) var(--nb-motion-kurve); }

/* Lime-Marker zeichnet sich wie der Schweif einmal von links nach rechts, sobald die Überschrift im Bild ist, 600 ms
   nach 200 ms Anlauf (Daniel 30.09.2026). Die Klasse setzt bewegung.js, ohne Skript steht die volle Fläche. */
.nb-s-angebot__mk.nb-m-marker { background: linear-gradient(var(--nb-lime), var(--nb-lime)) 0 0 / 0% 100% no-repeat; transition: background-size var(--nb-motion-reveal) var(--nb-motion-kurve) var(--nb-motion-farbe); }
.nb-s-angebot__mk.nb-m-marker.nb-m-da { background-size: 100% 100%; }

/* Zahlen rollen (1.400 ms wie im Rechner): während des Rollens Tabellenziffern, damit nichts zittert */
.nb-m-rollt { font-variant-numeric: tabular-nums lining-nums; }

/* Bilder fahren mit: 12 px Überstand oben und unten, bewegung.js verschiebt bis 12 px gegen die Scrollrichtung.
   Mit .nb-bk davor, damit die Regel die „height: 100%“ der Sektions-CSS schlägt, die später in der Datei stehen. */
.nb-bk :is(.nb-s-kachel__bild, .nb-s-ablauf__bild, .nb-s-schluss__bild) { overflow: hidden; }
.nb-bk :is(.nb-s-kachel__bild, .nb-s-ablauf__bild, .nb-s-schluss__bild) img { height: calc(100% + 24px); margin-top: -12px; will-change: transform; }

/* Druck: alles im Endzustand, die rollende Ebene weg, der echte Wert sichtbar (zustands-pruefer 26.09.2026) */
@media print {
  .nb-m-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nb-m-rollt { display: none; }
  .nb-s-angebot__mk.nb-m-marker { background-size: 100% 100%; transition: none; }
  [data-nb-text] > .nb-s-sr { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: inherit; }
  .nb-bk :is(.nb-s-kachel__bild, .nb-s-ablauf__bild, .nb-s-schluss__bild) img { transform: none !important; height: 100%; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-m-reveal { opacity: 1; transform: none; transition: none; }
  .nb-bk :is(.nb-s-kachel__bild, .nb-s-ablauf__bild, .nb-s-schluss__bild) img { transform: none !important; height: 100%; margin-top: 0; }
}

/* baukasten/kern/schweif.css */
/* Schweif als Bauteil (kern/schweif.mjs, tokens.json schweif). Die Sektion setzt nur Lage und Größe.
   Das Band braucht position: relative und overflow: hidden, Inhalt darüber z-index 1. */
.nb-schweif { position: absolute; z-index: 0; height: auto; pointer-events: none; }
.nb-schweif path { fill: none; stroke: var(--nb-schweif-farbe, var(--nb-text-on-dark-accent)); stroke-width: var(--nb-schweif-strich, 163); stroke-miterlimit: 10; }

/* baukasten/sektionen/kopf/sektion.css */
/* Schmaler Kopf und Fuß (Varianten kopf:schmal, fuss:schmal), weiß mit Haarlinie, 64 px wie die Strecke */
.nb-anm-kopf { background: var(--nb-surface-page); border-bottom: 1px solid var(--nb-border-hairline); }
/* Wortmarke mittig (Daniel 27.09.2026 nachts: „Logo oben mittig“) */
.nb-anm-kopf__innen { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 64px; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin-inline: auto; padding-inline: var(--nb-s-rand); }
.nb-anm-kopf__logo { display: inline-flex; min-height: 44px; align-items: center; }
.nb-anm-kopf__logo img { display: block; width: 100px; height: auto; }
/* Nur die Wortmarke (Variante kopf:marke, Gegenangebot per Mail-Link 30.09.2026): Night 30 px direkt auf dem Grund K1,
   keine weiße Leiste, oben space-l, ab 1100 space-xl. Der Grund steht dann auch hinter dem Kopf */
body:has(.nb-ga-kopf) { background: var(--nb-surface-base); }
.nb-ga-kopf { background: none; border: 0; }
.nb-ga-kopf__innen { min-height: 44px; padding-top: var(--nb-space-l); }
@media (min-width: 1100px) { .nb-ga-kopf__innen { padding-top: var(--nb-space-xl); } }
.nb-ga-kopf__logo img { width: auto; height: 30px; }
.nb-ga-kopf__logo { border-radius: var(--nb-radius-badge); transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-ga-kopf__logo:hover { opacity: .8; } }
.nb-ga-kopf__logo:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 4px; }

/* baukasten/sektionen/kat-kopf/sektion.css */
/* Kopf der Kategorie. Werte VORGABEN-kategorie-design-2026-10-02.md §1 und §2: Brotkrumen wie buehne/sektion.css:3-7,
   H1 display-02 (Bruch typografie.md:80-81, Daniels „kleiner“), Untertitel t2 (heading-02 in 400, Night, 52ch),
   Vorteilsleiste komponenten-global.md:324-340 (ink-100, Radius 16, Innenabstand 12, weiße Kachel 40 mit Radius 8) */
.nb-s-kat-kopf { margin-block: var(--nb-space-m) var(--nb-space-m); }
.nb-kk { display: flex; flex-direction: column; gap: var(--nb-space-s); }

.nb-kk__krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; font-size: var(--nb-t-body-02); line-height: 1.4; }
.nb-kk__krumen li { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); }
.nb-kk__krumen a { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nb-kk__krumen a:hover { text-decoration: underline; } }
/* OE 94 Punkt 8 (Daniel 05.10.2026): Trefferfläche 44 px, das Bild bleibt pixelgleich. Die Fläche liegt als ::before mittig
   über dem Link, der Link selbst und die Zeile (19,6 px) ändern sich nicht. Breite wie der Link, Nachbarn überlappen nicht */
.nb-kk__krumen a { position: relative; }
.nb-kk__krumen a::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nb-kk__krumen li > span[aria-hidden] { color: var(--nb-text-muted); }
.nb-kk__krumen [aria-current] { color: var(--nb-text-muted); user-select: none; }

.nb-kk__titelblock { display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-v3 .nb-kk__h1 { margin: 0; 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); text-wrap: balance; }
/* Rechner wie Back Market (Daniel 12.10.2026): Kategorie-H1 ab 768 px display-01 (56 bei 1440, Back Market 56), am Handy 24 */
@media (min-width: 768px) { .nb-v3 .nb-kk__titelblock .nb-kk__h1 { font-size: var(--nb-t-display-01); line-height: 1.05; } }
.nb-kk__h1 em { font-family: var(--nb-font-serif); font-style: italic; font-weight: var(--nb-weight-semibold); letter-spacing: -0.01em; color: var(--nb-signal-700); }
.nb-v3 .nb-kk__unter { margin: 0; max-width: 52ch; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-regular); line-height: 1.4; letter-spacing: -0.005em; color: var(--nb-text-heading); }

/* Vorteilsleiste (G31): grau ohne Trennlinien und Schatten, jedes Zeichen in einer weißen Kachel */
/* position: relative, sonst hängt der Screenreader-Text (.nb-s-sr, absolut) am Abschnitt und schiebt die quer scrollende
   Leiste am Handy über den Rand (gemessen 02.10.2026: 965 px statt 390) */
.nb-kk__vorteile { position: relative; display: grid; gap: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; }
.nb-kk__vorteil { display: flex; align-items: center; gap: var(--nb-space-xs); min-width: 0; }
.nb-kk__vtext { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); text-decoration: none; }
a.nb-kk__vtext { text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { a.nb-kk__vtext:hover { text-decoration-color: currentColor; } }
/* Kategorie-Port S4 (04.10.2026): Zeile zur Echtheit unter der Note, body-02 muted, Link wie „Gerät ansehen“ in den
   Bewertungen. Kontrast muted auf ink-100 per farbcheck.mjs */
.nb-kk__vzeile { display: block; margin-top: var(--nb-space-3xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); line-height: 1.4; color: var(--nb-text-muted); }
/* Im Kopf stehen Zeile und Link untereinander, sonst wird die Kachel am Handy breiter als der Bildschirm (414 px gemessen) */
.nb-kk__vzeile .nb-kurz__trenn { display: none; }
.nb-kk__vzeile a { display: block; width: max-content; white-space: nowrap; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kk__vzeile a:hover { text-decoration-color: currentColor; } }
@media (prefers-reduced-motion: reduce) { .nb-kk__vzeile a { transition: none; } }
.nb-kk__icon { 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-kk__icon svg { width: 24px; height: 24px; }
.nb-kk__vorteile--leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--nb-space-xs); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
@media (min-width: 1100px) { .nb-kk__vorteile--leiste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* K2 (04.10.2026, WCAG 2.1.1): Die Leiste trägt tabindex="0" (sektion.mjs vorteile(), nb-kat-kopf.tpl), damit sie am
   Handy per Tastatur quer scrollt. Fokus wie überall (.nb-s :focus-visible in kern/schale.css:177), hier nur mit einer
   Klasse mehr, damit die Reihenfolge im Bündel nicht entscheidet */
.nb-s-kat-kopf .nb-kk .nb-kk__vorteile--leiste:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
/* Am Handy quer scrollend wie Back Market, sonst stünden vier Zeilen vor der ersten Karte (ux U5.1) */
@media (max-width: 767px) {
  .nb-kk__vorteile--leiste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--nb-s-rand) * -1); padding-inline: var(--nb-s-rand); border-radius: 0; background: none; padding-block: 0; }
  /* K2 (04.10.2026): Fokus nach innen wie in Listen mit Überlauf (kern/formular.css:161), weil die Leiste hier bis an
     den Bildschirmrand reicht und ein Ring außen links und rechts abgeschnitten wäre */
  .nb-s-kat-kopf .nb-kk .nb-kk__vorteile--leiste:focus-visible { outline-offset: -2px; box-shadow: none; }
  .nb-kk__vorteile--leiste .nb-kk__vorteil { flex: 0 0 auto; scroll-snap-align: start; padding: var(--nb-space-xs) var(--nb-space-s) var(--nb-space-xs) var(--nb-space-xs); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
  .nb-kk__vtext { font-size: var(--nb-t-body-02); white-space: nowrap; }
  .nb-kk__vorteile--reihe { gap: var(--nb-space-xs) var(--nb-space-m); }
}

/* Reihe ohne Kasten (Fassung c): Zeichen 24 px frei, Text daneben, keine Pille */
.nb-kk__vorteile--reihe { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs) var(--nb-space-l); }
.nb-kk__vorteile--reihe .nb-kk__icon { width: 24px; height: 24px; background: none; border-radius: 0; }

.nb-kk--b .nb-kk__titelblock { margin-top: var(--nb-space-2xs); }

/* Heute, nachgebaut aus nb-collection.css:30-127 zum Vergleich */
.nb-kk--heute { gap: var(--nb-space-m); }
.nb-v3 .nb-kk--heute .nb-kk__h1 { font-family: var(--nb-font-serif); font-size: clamp(56px, 6vw, 86px); line-height: .92; letter-spacing: -0.02em; }
.nb-kk--heute .nb-kk__h1 em { color: var(--nb-signal-500); }
.nb-v3 .nb-kk--heute .nb-kk__unter { font-size: 18px; color: var(--nb-text-body); }
.nb-kk__pillen { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-kk__pillen li { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); padding: var(--nb-space-2xs) var(--nb-space-s); border: 1.5px solid rgb(var(--nb-night-rgb) / .18); border-radius: var(--nb-radius-pill); font-size: 13px; color: var(--nb-text-heading); }
.nb-kk__pillen li.is-dunkel { background: var(--nb-surface-dark); border-color: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-kk__pillen li.is-dunkel span { width: 6px; height: 6px; border-radius: 50%; background: var(--nb-lime); }

/* Runde 3: Untertitel zum Vergleich, Schalter unter am main (seiten/kategorie.mjs). Ohne Schalter der erste */
.nb-kk__unterf { display: none; }
main:not([data-nb-unter]) .nb-kk__unterf:first-child,
main[data-nb-unter="heute"] [data-nb-unterf="heute"], main[data-nb-unter="a"] [data-nb-unterf="a"],
main[data-nb-unter="b"] [data-nb-unterf="b"], main[data-nb-unter="v1"] [data-nb-unterf="v1"],
main[data-nb-unter="v2"] [data-nb-unterf="v2"] { display: inline; }

/* baukasten/sektionen/vm-kopf/sektion.css */
/* Kopf der Ankauf-Modellseite. Abstand zum Shop-Kopf wie die Kategorie (kat-kopf/sektion.css:4). */
.nb-s-vm-kopf { margin-block-start: var(--nb-space-m); }
.nb-kk__krumen a:active { color: var(--nb-ink-700); }
/* H1 frei (G41), alles andere in einer weißen Karte. H1 wie der Gerätename der
   Produktseite 24/28 (G55, Back Market setzt „iPhone 13 verkaufen“ rund 27 px), Betrag display-02 24/40. */
.nb-v3 .nb-vmk__h1 { margin: var(--nb-space-s) 0 var(--nb-space-m); 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); text-wrap: balance; }

.nb-vmk__karte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-m); padding: var(--nb-space-2xs); border-width: 0; }
/* Ohne feste Spalte nahm Safari die Breite des Fotos als Mindestbreite, die Seite wurde 442 statt 402 px breit und rutschte
   seitlich (Daniel 19.10.2026, iPhone, „komplett verbuggt“). Chrome zeigte es nicht */
@media (min-width: 768px) { .nb-vmk__karte { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-vmk__karte { gap: var(--nb-space-2xl); } }

/* Shop-Foto mit weißem Grund steht auf Weiß, ganz und mit Luft (G44 Nachtrag 13.10.2026) */
.nb-vmk__foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; min-width: 0; padding: var(--nb-space-m); }
@media (min-width: 768px) { .nb-vmk__foto { aspect-ratio: 1 / 1; padding: var(--nb-space-l); } }
.nb-vmk__foto img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }

.nb-vmk__inhalt { display: flex; flex-direction: column; align-items: flex-start; padding: 0 var(--nb-space-s) var(--nb-space-m); min-width: 0; }
@media (min-width: 768px) { .nb-vmk__inhalt { padding: var(--nb-space-l) var(--nb-space-l) var(--nb-space-l) 0; } }

.nb-v3 .nb-vmk__bis { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-v3 .nb-vmk__betrag { margin: var(--nb-space-3xs) 0 0; 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); font-variant-numeric: lining-nums tabular-nums; }
.nb-v3 .nb-vmk__stand { margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-vmk__mk { margin-inline: -4px; padding: 0 6px; border-radius: var(--nb-radius-badge); background: var(--nb-lime); color: var(--nb-text-on-lime); white-space: nowrap; }

.nb-vmk__knopf { margin-block-start: var(--nb-space-m); }
@media (max-width: 767px) { .nb-vmk__knopf { width: 100%; } }

.nb-vmk__zusagen { display: grid; gap: var(--nb-space-xs); margin: var(--nb-space-m) 0 0; padding: 0; list-style: none; }
.nb-vmk__zusagen li { display: flex; align-items: center; gap: var(--nb-space-xs); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-vmk__zeichen { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--nb-radius-badge); background: var(--nb-ink-100); color: var(--nb-text-heading); }
.nb-vmk__zeichen svg { width: 18px; height: 18px; }

/* b: Speicher als Pillen auf ink-100 (Umkehr G29), gewählt weiß mit sh-ruht */
.nb-vmk__speicher { display: inline-flex; gap: var(--nb-space-3xs); margin-block-end: var(--nb-space-m); padding: var(--nb-space-3xs); border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); }
.nb-vmk__speicher button { min-height: 44px; padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill); background: transparent; font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vmk__speicher button[aria-checked="true"] { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-vmk__speicher button:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-vmk__speicher button:active { color: var(--nb-ink-700); }
@media (hover: hover) and (pointer: fine) { .nb-vmk__speicher button[aria-checked="false"]:hover { background: var(--nb-ink-150); } }

/* Leiste am Handy (G3), wie die Leiste der Verkaufen-Strecke: weiß, sh-schwebt, Safe Area unten */
.nb-vmk__leiste { display: none; }
@media (max-width: 767px) {
  .nb-vmk__leiste { position: fixed; z-index: 30; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-xs) var(--nb-space-s) calc(var(--nb-space-xs) + env(safe-area-inset-bottom)); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); visibility: hidden; opacity: 0; transform: translateY(100%); transition: transform var(--nb-motion-farbe) var(--nb-motion-kurve), opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-farbe); }
  .nb-vmk__leiste.is-offen { visibility: visible; opacity: 1; transform: none; transition: transform var(--nb-motion-farbe) var(--nb-motion-kurve), opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s; }
  .nb-vmk__leiste p { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
  .nb-vmk__leiste strong { display: block; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
  .nb-vmk__leiste .nb-vmk__knopf { width: auto; margin: 0; }
  body:has(.nb-vmk__leiste.is-offen) :focus { scroll-margin-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) { .nb-vmk__speicher button, .nb-vmk__leiste, .nb-vmk__leiste.is-offen { transition: none; } }

/* baukasten/sektionen/vm-tabelle/sektion.css */
/* Preise je Speicher und Zustand. Kopf label-01 text-muted, Betrag heading-03 Semibold Night (VORGABEN-design).
   Keine Linien (G17), kein Zebra (G56), kein Scrollen, kein Lime. */
.nb-vmt { border-width: 0; }
.nb-vmt--a, .nb-vmt--c { padding: var(--nb-space-s); }
@media (min-width: 768px) { .nb-vmt--a { padding: var(--nb-space-l); } }

.nb-vmt__tabelle { width: 100%; border-collapse: separate; border-spacing: 0 var(--nb-space-2xs); font-variant-numeric: tabular-nums lining-nums; }
.nb-vmt__tabelle thead th { padding: 0 var(--nb-space-s) var(--nb-space-s); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--nb-text-muted); text-align: right; }
.nb-vmt__tabelle thead th:first-child, .nb-vmt__tabelle tbody th { text-align: left; }
.nb-vmt__tabelle tbody th, .nb-vmt__tabelle td { padding: var(--nb-space-s); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-vmt__tabelle td { text-align: right; white-space: nowrap; }
/* Zeilen trennen über eine graue Fläche je Zeile (Umkehr in der weißen Karte), keine Haarlinie */
.nb-vmt__tabelle tbody tr { background: var(--nb-ink-100); }
.nb-vmt__tabelle tbody tr > :first-child { border-radius: var(--nb-radius-input) 0 0 var(--nb-radius-input); }
.nb-vmt__tabelle tbody tr > :last-child { border-radius: 0 var(--nb-radius-input) var(--nb-radius-input) 0; }

.nb-vmt__breit { display: none; }
.nb-vmt__schmal { display: grid; gap: var(--nb-space-2xs); }
@media (min-width: 768px) { .nb-vmt__breit { display: block; } .nb-vmt__schmal { display: none; } }
.nb-vmt--a .nb-vmt__sk { padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }

.nb-v3 .nb-vmt__sk-titel { margin: 0 0 var(--nb-space-2xs); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-vmt dl { display: grid; gap: var(--nb-space-3xs); margin: 0; }
.nb-vmt dl > div { display: flex; justify-content: space-between; gap: var(--nb-space-s); padding-block: var(--nb-space-3xs); }
.nb-vmt dt { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-vmt dd { margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums lining-nums; }

/* b: drei weiße Karten auf dem Grund */
.nb-vmt--b { display: grid; gap: var(--nb-space-s); }
@media (min-width: 768px) { .nb-vmt--b { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nb-space-m); } }
.nb-vmt__weiss { padding: var(--nb-space-m); border-width: 0; }
.nb-vmt--b-fuss .nb-vmt__fuss { margin-block-start: var(--nb-space-s); }

/* c: schmale Karte mit Pillen */
.nb-vmt--c { max-width: 480px; }
@media (min-width: 768px) { .nb-vmt--c { padding: var(--nb-space-m); } }
.nb-vmt__pillen { display: inline-flex; gap: var(--nb-space-3xs); margin-block-end: var(--nb-space-s); padding: var(--nb-space-3xs); border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); }
.nb-vmt__pillen button { min-height: 44px; padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill); background: transparent; font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vmt__pillen button[aria-checked="true"] { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-vmt__pillen button:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-vmt__pillen button:active { color: var(--nb-ink-700); }
.nb-vmt--c .nb-vmt__teil { padding: var(--nb-space-2xs) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }

.nb-v3 .nb-vmt__fuss { margin: var(--nb-space-s) 0 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
@media (prefers-reduced-motion: reduce) { .nb-vmt__pillen button { transition: none; } }

/* baukasten/sektionen/ablauf/sektion.css */
/* Ablauf (E1): die eine dunkle Sektion mit Lime-Ziffern, Siegel und Schweif (web-architektur.md:417-421). */
.nb-s.nb-s-ablauf { overflow: hidden; background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-s-ablauf__kopf { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-m); }
.nb-s-ablauf__kopf .nb-s-kopf { margin-block-end: 0; }
.nb-v3 .nb-s-ablauf h2 { color: var(--nb-text-on-dark); }
.nb-v3 .nb-s-ablauf .nb-s-kopf p { color: var(--nb-text-on-dark-muted); }
.nb-s-ablauf__siegel { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--nb-text-on-dark-accent); color: var(--nb-text-on-lime); border: 2px solid var(--nb-text-on-lime); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; text-align: center; transform: rotate(-8deg); }
.nb-s-ablauf__schritte { position: relative; z-index: 1; display: grid; gap: var(--nb-space-m); margin: var(--nb-space-xl) 0 0; padding: 0; list-style: none; }
@media (min-width: 1100px) { .nb-s-ablauf__schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-s-ablauf__schritt { padding: var(--nb-space-m); background: var(--nb-surface-dark-raised); border-radius: var(--nb-radius-card); overflow: hidden; }
.nb-s-ablauf__bild { display: block; aspect-ratio: 4 / 3; margin: calc(-1 * var(--nb-space-m)) calc(-1 * var(--nb-space-m)) var(--nb-space-s); background: var(--nb-surface-dark-raised); }
.nb-s-ablauf__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 768 bis 1099 px: Karten quer, Bild links, sonst wird das Band über 2.400 px hoch */
@media (min-width: 768px) and (max-width: 1099px) {
  .nb-s-ablauf__schritt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr; column-gap: var(--nb-space-m); padding: 0; }
  .nb-s-ablauf__bild { grid-row: 1 / 4; margin: 0; aspect-ratio: auto; min-height: 100%; }
  .nb-s-ablauf__nr { margin-top: var(--nb-space-m); }
  .nb-s-ablauf__schritt p { padding-inline-end: var(--nb-space-m); padding-block-end: var(--nb-space-m); }
}
.nb-s-ablauf__nr { display: block; font-size: var(--nb-t-display-02); line-height: 1; font-weight: var(--nb-weight-semibold); color: var(--nb-text-on-dark-accent); }
.nb-v3 .nb-s-ablauf__schritt h3 { margin: var(--nb-space-s) 0 var(--nb-space-2xs); color: var(--nb-text-on-dark); }
.nb-s-ablauf__schritt p { margin: 0; color: var(--nb-text-on-dark-muted); font-size: var(--nb-t-body-01); line-height: 1.5; }

/* Schweif: Original-Pfad, Farbe Lime per CSS (Alt-Lime #EAFF9F ist gestrichen) */
.nb-s-ablauf__schweif { position: absolute; z-index: 0; pointer-events: none; }
.nb-s-ablauf__schweif path { fill: none; stroke: var(--nb-text-on-dark-accent); stroke-width: 163; stroke-miterlimit: 10; }

/* a: Elements_1 gespiegelt, rechts von unten bis an die Oberkante */
/* Lage gemessen am 26.09.2026: unter 1100 px so weit rechts, dass das gerade Strichende nicht sichtbar ist (Daniel), Tinte 1,8 % bei 390 und 3,5 % bei 768 px */
.nb-s-ablauf__schweif--hoch { right: -54%; top: -2%; width: 168%; height: auto; transform: scaleX(-1); }
@media (min-width: 1100px) { .nb-s-ablauf__schweif--hoch { right: -22%; top: auto; bottom: -8%; width: min(80%, 1400px); } }

/* b: Elements_6, die große Schleife fasst die Karten von rechts ein */
.nb-s-ablauf__schweif--schleife path { stroke-width: 152; }
.nb-s-ablauf__schweif--schleife { right: -40%; top: -10%; width: 120%; height: auto; }
@media (min-width: 768px) { .nb-s-ablauf__schweif--schleife { right: -26%; top: -24%; width: 90%; } }
@media (min-width: 1100px) { .nb-s-ablauf__schweif--schleife { right: -16%; top: -38%; width: min(70%, 1200px); } }

/* c: hell mit Fotos (Spur seo, 19.10.2026). Das Band gilt nur für a, b und d */
.nb-s.nb-s-ablauf.nb-s-ablauf--hell { overflow: visible; background: transparent; color: var(--nb-text-body); }
/* Live trägt body .nb-v3, dort färbt .nb-v3 .nb-s-ablauf h2 die Überschrift hell (20.10.2026, lokal gemessen) */
.nb-v3 .nb-s-ablauf--hell h2, .nb-s-ablauf--hell h2 { color: var(--nb-text-heading); }
.nb-s-ablauf__schritte--hell { margin-top: var(--nb-space-m); gap: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-ablauf__schritte--hell { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  /* Am Handy eine Reihe zum Wischen, die zweite Karte angeschnitten (wie Back Market) */
  .nb-s-ablauf__schritte--hell { display: flex; gap: var(--nb-space-xs); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: var(--nb-space-2xs) 0 var(--nb-space-s); }
  .nb-s-ablauf__schritte--hell::-webkit-scrollbar { display: none; }
  .nb-s-ablauf__schritte--hell > li { flex: 0 0 80%; scroll-snap-align: start; }
}
.nb-s-ablauf__karte { display: flex; flex-direction: column; overflow: hidden; background: var(--nb-surface-page); border-radius: var(--nb-radius-card); box-shadow: var(--nb-sh-ruht); }
.nb-s-ablauf__foto { display: block; aspect-ratio: 4 / 3; background: var(--nb-ink-100); }
.nb-s-ablauf__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-s-ablauf__karte-text { display: grid; gap: var(--nb-space-2xs); padding: var(--nb-space-m); }
.nb-s-ablauf__kreis { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nb-night); color: var(--nb-surface-page); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1; }
.nb-v3 .nb-s-ablauf__karte-titel, .nb-s-ablauf__karte-titel { margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-s-ablauf__karte p { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-body); }

/* baukasten/sektionen/fragen/sektion.css */
/* Fragen (E4). Klappliste mit Haarlinien, geschlossen, Antworten aus dem Rechner. */
.nb-s-fragen__raster { display: grid; gap: var(--nb-space-l); align-items: start; }
@media (min-width: 1100px) { .nb-s-fragen__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--nb-space-2xl); } }
.nb-s-fragen__links { display: grid; gap: var(--nb-space-m); align-content: start; }
.nb-s-fragen__links .nb-s-kopf { margin-block-end: 0; }
.nb-s-fragen__kontakt { display: flex; align-items: center; gap: var(--nb-space-s); padding: var(--nb-space-m); }
.nb-s-fragen__kontakt p { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-s-fragen__kontakt .nb-s-fragen__kontakt-titel { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-s-fragen__kontakt a, .nb-s-fragen__mail a { color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); }
.nb-s-fragen__karte { padding: var(--nb-space-2xs) var(--nb-space-m); }

.nb-s-frage + .nb-s-frage { border-block-start: 1px solid var(--nb-border-hairline); }
.nb-s-frage summary { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: 60px; padding: var(--nb-space-s) 0; cursor: pointer; list-style: none; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-s-frage summary::-webkit-details-marker { display: none; }
.nb-s-frage summary { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-s-frage summary:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
.nb-s-frage summary svg { width: 20px; height: 20px; flex: none; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve-bewegung), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-s-frage summary:hover svg { color: var(--nb-action-primary); } }
.nb-s-frage[open] summary svg { transform: rotate(180deg); }
.nb-s-frage[open][data-nb-schliesst] summary svg { transform: none; }
/* Bewegung „Eine offen“ (Daniel 26.09.2026): die Antwort fährt in 300 ms auf und zu, der Text blendet in 250 ms ein, die
   vorherige Frage schließt sich. Höhe und Innenabstand setzt bewegung.js, deshalb border-box. */
.nb-s-frage__antwort { box-sizing: border-box; padding: 0 0 var(--nb-space-s); max-width: 68ch; font-size: var(--nb-t-body-01); line-height: 1.6; color: var(--nb-text-body); transition: height var(--nb-motion-transform) var(--nb-motion-kurve), padding-bottom var(--nb-motion-transform) var(--nb-motion-kurve), opacity var(--nb-motion-rand) var(--nb-motion-kurve); }
/* Zuklappen 200 ms, Fassung C (Daniel 09.10.2026). data-nb-schliesst setzt bewegung.js vor dem Zuklappen */
.nb-s-frage[data-nb-schliesst] .nb-s-frage__antwort { transition: height var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve), padding-bottom var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve), opacity var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve); }
.nb-s-frage__antwort[data-nb-laeuft] { overflow: hidden; }
.nb-s-frage__antwort p { margin: 0 0 var(--nb-space-xs); }
/* Unter der Antwort derselbe Abstand wie ueber ihr (summary padding s), ohne Rand des letzten Absatzes (Daniel 27.09.2026) */
.nb-s-frage__antwort > :last-child { margin-bottom: 0; }

/* b: eine Karte wie .nb-fragen-karte im Rechner */
.nb-s-fragen__rechner { display: grid; gap: var(--nb-space-l); padding: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-fragen__rechner { padding: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-s-fragen__rechner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--nb-space-2xl); padding: var(--nb-space-xl); } }
.nb-s-fragen__mail { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }

/* Modelle als Pillen, nach Generation (auch in der Antwort „Welche iPhones kauft ihr an?“) */
.nb-s-modelle__gruppen { display: grid; gap: var(--nb-space-xs); margin-block-start: var(--nb-space-s); }
.nb-s-modelle__gruppe { display: grid; gap: var(--nb-space-2xs); align-items: baseline; }
@media (min-width: 768px) { .nb-s-modelle__gruppe { grid-template-columns: 96px minmax(0, 1fr); } }
.nb-s-modelle__titel { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-s-modelle__gruppe ul { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
/* Handy-Gesamtprüfung 14.10.2026 (ZIEL): Pillen 32 px, Fläche unsichtbar 44 px. Am Handy Zeilenabstand 12 statt 8, damit sie sich nicht überlappt (32 + 12 = 44) */
.nb-s-modelle__pille { position: relative; }
.nb-s-modelle__pille::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (max-width: 767px) { .nb-s-modelle__gruppe ul { row-gap: var(--nb-space-xs); } }
.nb-s-modelle__pille { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--nb-space-xs); border: 1px solid var(--nb-ink-300); 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; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-s-modelle__pille:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); }
@media (hover: hover) and (pointer: fine) { .nb-s-modelle__pille:hover { border-color: var(--nb-ink-500); } }

/* baukasten/sektionen/modelle/sektion.css */
/* Modellliste (B1). Pillen-Stil steht in fragen/sektion.css, weil die Frage dieselbe Liste zeigt. */
.nb-s-modelle__karte { padding: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-modelle__karte { padding: var(--nb-space-l); } }
.nb-s-modelle__karte .nb-s-modelle__gruppen { gap: var(--nb-space-s); margin-block-start: 0; }
.nb-s-modelle__karte .nb-s-modelle__gruppe + .nb-s-modelle__gruppe { padding-block-start: var(--nb-space-s); border-block-start: 1px solid var(--nb-border-hairline); }

/* baukasten/sektionen/buehne/sektion.css */
/* Bühne (A1). Beide Varianten teilen Brotkrumen, Eyebrow, H1, Satz und Suchfeld. */
.nb-s-buehne { margin-block-start: 0; }
.nb-s-buehne__krumen ol { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: var(--nb-space-m) 0 0; list-style: none; font-size: var(--nb-t-body-02); }
.nb-s-buehne__krumen li + li::before { content: "›"; margin-inline-end: var(--nb-space-2xs); color: var(--nb-text-muted); }
.nb-s-buehne__krumen a { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; }
/* Handy-Gesamtprüfung 14.10.2026 (ZIEL): Fläche 44 px wie .nb-kk__krumen (OE 94 Punkt 8), der Link bleibt 17 px hoch */
.nb-s-buehne__krumen a { position: relative; }
.nb-s-buehne__krumen a::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .nb-s-buehne__krumen a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.nb-s-buehne__krumen [aria-current] { color: var(--nb-text-muted); }

.nb-s-buehne__kopf { display: flex; flex-direction: column; align-items: flex-start; padding-block-start: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-buehne__kopf { padding-block-start: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-s-buehne__kopf { padding-block-start: var(--nb-space-xl); } }
.nb-s-buehne__kopf--mittig { align-items: center; text-align: center; }
.nb-s-buehne__eyebrow { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); margin: 0 0 var(--nb-space-s); 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-s-buehne__eyebrow svg { width: 20px; height: 20px; color: var(--nb-text-heading); }
.nb-v3 .nb-s-buehne h1 { margin: 0; text-wrap: balance; }
.nb-v3 .nb-s-buehne h1 em { font-size: calc(1em * 1.03); }
.nb-s-buehne__satz { margin: var(--nb-space-s) 0 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.35; letter-spacing: -0.01em; color: var(--nb-text-heading); }

/* Suchfeld wie die Auswahlfelder im Rechner: Radius 16, Rand control, im Fokus Signal */
.nb-s-suche { position: relative; width: 100%; margin: var(--nb-space-l) 0 0; text-align: left; }
.nb-s-buehne__kopf--mittig .nb-s-suche { max-width: 720px; }
/* Die Pille ist m-suche aus nb-feld.css (komponenten-formular.md §4, 27.09.2026). Ohne Knopf rechts nur Platz fürs x */
.nb-su--ohne-knopf .nb-su__eingabe { padding-right: 48px; }
.nb-su--ohne-knopf .nb-su__beispiel { right: 16px; }
.nb-su--ohne-knopf .nb-su__leeren { right: 6px; }
.nb-s-suche__treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: var(--nb-space-2xs); list-style: none; background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); box-shadow: var(--nb-sh-panel); }
.nb-s-suche__treffer a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-badge); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; }
.nb-s-suche__treffer [aria-selected="true"] a { background: var(--nb-ink-100); }
@media (hover: hover) and (pointer: fine) { .nb-s-suche__treffer a:hover { background: var(--nb-ink-100); } }
.nb-s-suche__bis { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); white-space: nowrap; }
.nb-s-suche__leer { padding: var(--nb-space-xs) var(--nb-space-s); color: var(--nb-text-muted); font-size: var(--nb-t-body-02); }

/* Varianten b, c, d: Such-Karte auf dem Rechner-Grund. c und d nur ab 1100 px auf Grau, darunter Weiß */
.nb-s.nb-s-buehne--b, .nb-s.nb-s-buehne--c, .nb-s.nb-s-buehne--d { padding-block: 0 var(--nb-space-2xl); }
/* Bühnenton über --nb-s-buehne (kern/schale.css), heute surface-secondary, in den Leitern k1 bis k3 eine Stufe unter
   dem Seitengrund (Flächen-System, Daniel 30.09.2026) */
.nb-s.nb-s-buehne--b { background: var(--nb-s-buehne, var(--nb-surface-secondary)); }
@media (min-width: 1100px) { .nb-s.nb-s-buehne--c, .nb-s.nb-s-buehne--d { background: var(--nb-s-buehne, var(--nb-surface-secondary)); } }
/* OFFEN (Daniel): unter 1100 px ist die Bühne heute weiß. Auf getöntem Grund trägt sie hier vorerst den Bühnenton,
   sonst wäre sie vom Grund nicht zu unterscheiden. Mit Luft nach unten, damit die Suche nicht an der Kante klebt */
@media (max-width: 1099px) {
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d { background: var(--nb-s-buehne); padding-block-end: var(--nb-space-l); margin-block-end: 0; }
  /* Die Suche steht dort frei auf dem Bühnenton. In ink-100 wäre sie Grau auf Grau und nicht zu sehen (Daniel 06.10.2026:
     „man sieht sie einfach nicht“). Auf ink-100 ist die Pille weiß, ohne Schatten und ohne Rand, 1,10:1
     (farbsystem.md:501, :479, :511). Hover und Fokus eine Stufe dunkler wie überall (komponenten-formular.md:105) */
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-buehne--d .nb-s-buehne__nur-mobil .nb-su__eingabe { background: var(--nb-surface-page); }
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-buehne--d .nb-s-buehne__nur-mobil .nb-su .nb-su__eingabe:is(:focus, :focus-visible) { background: var(--nb-ink-200); }
@media (hover: hover) and (pointer: fine) { .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-buehne--d .nb-s-buehne__nur-mobil .nb-su .nb-su__eingabe:is(:hover) { background: var(--nb-ink-200); } }
}
.nb-s-buehne__raster { display: grid; gap: var(--nb-space-l); align-items: center; padding-block-start: var(--nb-space-l); }
@media (min-width: 1100px) { .nb-s-buehne__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nb-space-2xl); padding-block-start: var(--nb-space-xl); } }
.nb-s-buehne__raster .nb-s-buehne__kopf { padding-block-start: 0; }

/* c: unter 1100 px liegt die Karte in einem grauen Bühnenkasten, ab 1100 px trägt die Sektion das Grau */
.nb-s-buehne__kasten { padding: var(--nb-space-s); background: var(--nb-surface-secondary); border-radius: var(--nb-radius-container); }
@media (min-width: 768px) { .nb-s-buehne__kasten { padding: var(--nb-space-m); } }
@media (min-width: 1100px) { .nb-s-buehne__kasten { padding: 0; background: transparent; border-radius: 0; } }
.nb-s-buehne--c .nb-s-buehne__raster { gap: var(--nb-space-m); }
@media (min-width: 1100px) { .nb-s-buehne--c .nb-s-buehne__raster { gap: var(--nb-space-2xl); } }

/* d: bis 1099 px nur der kompakte Block, ab 1100 px nur die Such-Karte */
.nb-s-buehne--d .nb-s-buehne__nur-desktop { display: none; }
.nb-s-buehne--d .nb-s-buehne__nur-mobil { padding-block-end: 0; }
@media (min-width: 1100px) { .nb-s-buehne--d .nb-s-buehne__nur-desktop { display: block; } .nb-s-buehne--d .nb-s-buehne__nur-mobil { display: none; } }
.nb-s-buehne__beleg { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: var(--nb-space-m) 0 0; padding-block-start: var(--nb-space-m); border-block-start: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-s-buehne__beleg b { font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: lining-nums; }
.nb-s-buehne__karte { padding: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-buehne__karte { padding: var(--nb-space-l); } }
.nb-s-buehne__frage { margin: 0; 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-s-buehne__karte .nb-s-suche { margin-block-start: var(--nb-space-m); }
.nb-s-buehne__direkt-titel { margin: var(--nb-space-m) 0 var(--nb-space-2xs); 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-s-buehne__direkt { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-s-buehne__direkt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-s-buehne__direkt a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--nb-space-2xs); align-items: center; min-height: 64px; padding: var(--nb-space-xs) var(--nb-space-s); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-s-buehne__direkt a:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
@media (hover: hover) and (pointer: fine) { .nb-s-buehne__direkt a:hover { border-color: var(--nb-sky-500); } }
.nb-s-buehne__direkt a > svg { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; color: var(--nb-text-muted); transition: transform var(--nb-motion-rand) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Bewegung „Pfeil färbt“ (Daniel 26.09.2026): Pfeil fährt 3 px nach rechts und wird Signal */
@media (hover: hover) and (pointer: fine) { .nb-s-buehne__direkt a:hover > svg { transform: translateX(3px); color: var(--nb-action-primary); } }
.nb-s-buehne__direkt .nb-s-buehne__bis { font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); }

/* d unter 1100 px wie a: kein Kasten-Abstand nach unten, nur der normale Sektionsabstand (Daniel 26.09.2026: „komischer Abstand“) */
.nb-s.nb-s-buehne--d { padding-block-end: 0; margin-block-end: var(--nb-s-abstand); }
@media (min-width: 1100px) { .nb-s.nb-s-buehne--d { padding-block-end: var(--nb-space-2xl); margin-block-end: 0; } }

/* h, i, j (Runde angebot-typo, Daniel 30.09.2026): wie d, bis 1099 px kompakt, ab 1100 px mit Such-Karte auf der Bühne.
   Regel: die Fläche kehrt sich zum Untergrund um, nie Weiß auf Weiß mit Schatten (RECHERCHE-weisse-sektionen §Regeln) */
.nb-s.nb-s-buehne--geteilt { padding-block: 0 var(--nb-space-2xl); }
@media (min-width: 1100px) { .nb-s.nb-s-buehne--geteilt { background: var(--nb-s-buehne, var(--nb-surface-secondary)); } }
@media (max-width: 1099px) {
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--geteilt { background: var(--nb-s-buehne); padding-block-end: var(--nb-space-l); margin-block-end: 0; }
}
.nb-s-buehne--geteilt .nb-s-buehne__nur-desktop { display: none; }
.nb-s-buehne--geteilt .nb-s-buehne__nur-mobil { padding-block-end: 0; }
@media (min-width: 1100px) { .nb-s-buehne--geteilt .nb-s-buehne__nur-desktop { display: block; } .nb-s-buehne--geteilt .nb-s-buehne__nur-mobil { display: none; } }

/* h: graue Kacheln in der weißen Karte, ohne Schatten und Rand, Hover eine Stufe dunkler wie die Suchpille */
.nb-bk .nb-s.nb-s-buehne--kachel-grau .nb-s-buehne__direkt a { border: 0; background: var(--nb-ink-100); box-shadow: none; transition: background-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-bk .nb-s.nb-s-buehne--kachel-grau .nb-s-buehne__direkt a:hover { background: var(--nb-ink-200); box-shadow: none; } }
/* Umkehr G29 (16.10.2026): In der weißen Bühnenkarte sind die Direkt-Kacheln in jeder Fassung grau wie in h. Der Grund
   (schale.css, Liste „Welche Bauteile dem Grund folgen“) gab ihnen Weiß mit Kartenschatten, Weiß auf Weiß.
   Frei auf dem Grund (Karte --frei) bleiben sie weiße Karten */
.nb-bk .nb-s .nb-s-buehne__karte.nb-s-karte .nb-s-buehne__direkt a { border: 0; background: var(--nb-surface-component); box-shadow: none; transition: background-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-bk .nb-s .nb-s-buehne__karte.nb-s-karte .nb-s-buehne__direkt a:hover { background: var(--nb-ink-200); box-shadow: none; } }

/* i: ohne Karte, Suche weiß auf der grauen Bühne, Kacheln weiß mit ruhendem Schatten */
.nb-s-buehne__karte--frei { padding: 0; }
.nb-s-buehne--frei .nb-s-buehne__karte--frei .nb-su__eingabe { background: var(--nb-surface-page); box-shadow: var(--nb-s-karte-schatten, none); }
.nb-s-buehne--frei .nb-s-buehne__karte--frei .nb-su .nb-su__eingabe:is(:focus, :focus-visible) { background: var(--nb-surface-page); box-shadow: var(--nb-s-karte-schatten-hoch, none); }
@media (hover: hover) and (pointer: fine) { .nb-s-buehne--frei .nb-s-buehne__karte--frei .nb-su .nb-su__eingabe:is(:hover) { background: var(--nb-surface-page); box-shadow: var(--nb-s-karte-schatten-hoch, none); } }

/* j: Direktwahl als graue Pillen ohne Betrag */
.nb-s-buehne__direkt--pillen { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
@media (min-width: 768px) { .nb-s-buehne__direkt--pillen { grid-template-columns: none; } }
.nb-bk .nb-s.nb-s-buehne--pillen .nb-s-buehne__direkt--pillen a { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 44px; padding: 0 var(--nb-space-s) 0 var(--nb-space-m); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); box-shadow: none; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-s-buehne__direkt--pillen a:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); }
@media (hover: hover) and (pointer: fine) { .nb-bk .nb-s.nb-s-buehne--pillen .nb-s-buehne__direkt--pillen a:hover { background: var(--nb-ink-200); box-shadow: none; } }
.nb-s-buehne__direkt--pillen a > svg { grid-row: auto; grid-column: auto; width: 16px; height: 16px; }

/* s1, s2, s3: Werkstatt „suche“ (Daniel 06.10.2026 abends, KRITIK-suche-2026-10-06.md). Nur unter 1100 px, ab dort gilt d.
   d kippt beim Antippen auf ink-200 und ist dann Grau auf dem grauen Bühnenband (gegen G29) */
@media (max-width: 1099px) {
  /* s1: Such-Karte wie am Rechner, graue Pille nach komponenten-formular.md §4 */
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-karte .nb-s-buehne__karte--mobil { margin-block-start: var(--nb-space-l); text-align: left; }
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-karte .nb-s-buehne__nur-mobil .nb-su__eingabe { background: var(--nb-ink-100); }
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-karte .nb-s-buehne__nur-mobil .nb-su .nb-su__eingabe:is(:focus, :focus-visible) { background: var(--nb-ink-200); }
@media (hover: hover) and (pointer: fine) { .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-karte .nb-s-buehne__nur-mobil .nb-su .nb-su__eingabe:is(:hover) { background: var(--nb-ink-200); } }
  /* s2: weiß bleibt weiß, im Fokus sh-hoch (Ausnahme Hilfe-Band 03.10.2026, komponenten-formular.md:105) */
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-heben .nb-s-buehne__nur-mobil .nb-su__eingabe { transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); }
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-heben .nb-s-buehne__nur-mobil .nb-su .nb-su__eingabe:is(:focus, :focus-visible) { background: var(--nb-surface-page); box-shadow: var(--nb-sh-hoch); }
@media (hover: hover) and (pointer: fine) { .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-heben .nb-s-buehne__nur-mobil .nb-su .nb-su__eingabe:is(:hover) { background: var(--nb-surface-page); box-shadow: var(--nb-sh-hoch); } }
  /* s3: weiß mit sh-ruht, im Fokus sh-hoch */
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-ruht .nb-s-buehne__nur-mobil .nb-su__eingabe { box-shadow: var(--nb-sh-ruht); transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); }
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-ruht .nb-s-buehne__nur-mobil .nb-su .nb-su__eingabe:is(:focus, :focus-visible) { background: var(--nb-surface-page); box-shadow: var(--nb-sh-hoch); }
@media (hover: hover) and (pointer: fine) { .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d.nb-s-buehne--su-ruht .nb-s-buehne__nur-mobil .nb-su .nb-su__eingabe:is(:hover) { background: var(--nb-surface-page); box-shadow: var(--nb-sh-hoch); } }
}

/* baukasten/sektionen/kategorien/sektion.css */
/* Kategorien (B1). Kachel m-bildkachel aus komponenten-tradein.md:167-197: Bild 4:3 randlos,
   Streifen surface-page mit Haarlinie, Radius 24, Titel body-01 600, Pfeil 20 px, Innenabstand m,
   Hover Rand ink-300 und #FBFBFD. Geschlossen ohne Hover, „Noch nicht“ in legal-01 ink-600. */
.nb-s-kategorien__raster { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
.nb-s-kategorien__raster > li { display: flex; min-width: 0; }

/* Treppe: 2 Spalten bis 1099 px, 4 darüber; die kürzere letzte Reihe steht mittig */
.nb-s-kategorien__raster--treppe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nb-s-kategorien__raster--treppe > li { grid-column: span 2; }
.nb-s-kategorien__raster--treppe > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
@media (min-width: 1100px) {
  .nb-s-kategorien__raster--treppe { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--nb-space-m); }
  .nb-s-kategorien__raster--treppe > li, .nb-s-kategorien__raster--treppe > li:last-child:nth-child(odd) { grid-column: span 2; }
  .nb-s-kategorien__raster--treppe > li:nth-child(5) { grid-column: 2 / span 2; }
}

/* Die Kachel */
.nb-s-kachel { display: flex; flex-direction: column; width: 100%; overflow: hidden; background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); color: var(--nb-text-heading); text-decoration: none; }
a.nb-s-kachel { transition: border-color 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); }
a.nb-s-kachel:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
@media (hover: hover) and (pointer: fine) { a.nb-s-kachel:hover { border-color: var(--nb-ink-300); background: #FBFBFD; } }
.nb-s-kachel__bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nb-surface-component); }
.nb-s-kachel__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-s-kachel__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2xs); padding: var(--nb-space-s) var(--nb-space-m); }
@media (max-width: 767px) { .nb-s-kachel__fuss { padding: var(--nb-space-xs) var(--nb-space-s); } }
.nb-s-kachel__text { display: grid; gap: 2px; min-width: 0; }
.nb-s-kachel__titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; overflow-wrap: anywhere; }
/* Geschlossen (Daniel 14.10.2026): Bild entsättigt und zurückgenommen, Titel leiser, Pille „Kommt bald“ oben links im
   Bild. Die Pille ist m-merkmal (komponenten-global §1): 24 px, surface-stage, 14 px 600, text-on-stage, randlos */
.nb-s-kachel--zu .nb-s-kachel__bild { background: var(--nb-surface-component); }
.nb-s-kachel--zu .nb-s-kachel__bild img { filter: grayscale(1); opacity: .45; }
.nb-s-kachel--zu .nb-s-kachel__titel { color: var(--nb-text-muted); }
.nb-s-kachel__bald { position: absolute; top: var(--nb-space-s); left: var(--nb-space-s); display: inline-flex; align-items: center; height: 24px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-stage); color: var(--nb-text-on-stage); font-size: 14px; font-weight: var(--nb-weight-semibold); line-height: 1; white-space: nowrap; }
@media (max-width: 767px) { .nb-s-kachel__bald { top: var(--nb-space-xs); left: var(--nb-space-xs); } }
.nb-s-kachel__zeile { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-s-kachel__pfeil { display: grid; place-items: center; flex: none; color: var(--nb-text-heading); }
.nb-s-kachel__pfeil svg { width: 20px; height: 20px; }

/* Variante b: Titel auf der Bildfläche, kein Streifen */
.nb-s-kategorien--im-bild .nb-s-kachel { position: relative; border: 0; background: var(--nb-surface-component); }
@media (hover: hover) and (pointer: fine) { .nb-s-kategorien--im-bild a.nb-s-kachel:hover { background: var(--nb-surface-component); box-shadow: 0 0 0 1px var(--nb-ink-300); } }
.nb-s-kategorien--im-bild .nb-s-kachel__fuss { position: absolute; inset: 0; align-items: flex-start; padding: var(--nb-space-s); pointer-events: none; }
.nb-s-kategorien--im-bild .nb-s-kachel__text { height: 100%; align-content: space-between; }
.nb-s-kategorien--im-bild .nb-s-kachel__titel { font-size: var(--nb-t-heading-02); letter-spacing: -0.01em; }
.nb-s-kategorien--im-bild .nb-s-kachel__noch { justify-self: start; padding: 2px var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: rgb(255 255 255 / .88); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }
.nb-s-kategorien--im-bild .nb-s-kachel__pfeil { align-self: flex-end; width: 36px; height: 36px; border-radius: 50%; background: var(--nb-text-heading); color: var(--nb-surface-page); }

/* Variante c: iPhone groß, sechs klein. 2 Spalten, 3 ab 768, 5 ab 1100 */
.nb-s-kategorien__raster--gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-s-kategorien__raster--gross > li:first-child { grid-column: 1 / -1; }
.nb-s-kachel--gross .nb-s-kachel__titel { font-size: var(--nb-t-heading-01); letter-spacing: -0.02em; line-height: 1.15; }
.nb-s-kachel--gross .nb-s-kachel__zeile { font-size: var(--nb-t-body-01); color: var(--nb-text-body); }
.nb-s-kachel--gross .nb-s-kachel__fuss { padding: var(--nb-space-m); }
.nb-s-kachel__kreis { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--nb-action-primary); color: var(--nb-action-primary-label); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-transform) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { a.nb-s-kachel:hover .nb-s-kachel__kreis { background: var(--nb-action-primary-hover); } }
.nb-s-kachel__kreis svg { width: 22px; height: 22px; transition: transform var(--nb-motion-rand) var(--nb-motion-kurve); }
/* Bewegung „Schieben“ (Daniel 26.09.2026, Bewegungs-Werkstatt): Pfeil 4 px nach rechts, Kreis auf 1,03, die Obergrenze aus brand-design.md §5 */
@media (hover: hover) and (pointer: fine) { a.nb-s-kachel:hover .nb-s-kachel__kreis { transform: scale(var(--nb-motion-zeichen-scale)); } }
@media (hover: hover) and (pointer: fine) { a.nb-s-kachel:hover .nb-s-kachel__kreis svg { transform: translateX(4px); } }
@media (min-width: 768px) {
  .nb-s-kategorien__raster--gross { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nb-s-kachel--gross { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .nb-s-kachel--gross .nb-s-kachel__bild { aspect-ratio: auto; min-height: 260px; }
  .nb-s-kachel--gross .nb-s-kachel__fuss { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--nb-space-m); }
}
@media (min-width: 1100px) {
  .nb-s-kategorien__raster--gross { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--nb-space-m); }
  .nb-s-kategorien__raster--gross > li:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .nb-s-kachel--gross { display: flex; flex-direction: column; }
  .nb-s-kachel--gross .nb-s-kachel__bild { flex: 1; aspect-ratio: auto; min-height: 0; }
  .nb-s-kachel--gross .nb-s-kachel__fuss { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .nb-s-kategorien__raster--gross .nb-s-kachel:not(.nb-s-kachel--gross) .nb-s-kachel__fuss { padding: var(--nb-space-s); }
}

/* d und e: Reihe zum Wischen (Spur seo, 19.10.2026). Polster oben und unten, damit Fokusring und Schatten nicht abgeschnitten werden */
.nb-s-kategorien__reihe-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); margin-block-end: var(--nb-space-m); }
.nb-s-kategorien__reihe-kopf .nb-s-kopf { margin-block-end: 0; }
.nb-s-kategorien__reihe { display: flex; gap: var(--nb-space-m); margin: calc(-1 * var(--nb-space-2xs)) 0; padding: var(--nb-space-2xs) 0 var(--nb-space-s); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.nb-s-kategorien__reihe::-webkit-scrollbar { display: none; }
.nb-s-kategorien__reihe > li { display: flex; flex: 0 0 calc((100% - 3 * var(--nb-space-m)) / 4); min-width: 0; scroll-snap-align: start; }
@media (max-width: 1099px) { .nb-s-kategorien__reihe > li { flex-basis: calc((100% - 2 * var(--nb-space-m)) / 2.6); } }
@media (max-width: 767px) {
  .nb-s-kategorien__reihe { gap: var(--nb-space-xs); }
  .nb-s-kategorien__reihe > li { flex-basis: calc((100% - var(--nb-space-xs)) / 2.3); }
}
.nb-s-kategorien__pfeile { display: flex; gap: var(--nb-space-2xs); }
.nb-s-kategorien__pfeil {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--nb-surface-page); color: var(--nb-text-heading); box-shadow: var(--nb-sh-ruht); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), opacity var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve);
}
.nb-s-kategorien__pfeil svg { width: 20px; height: 20px; }
.nb-s-kategorien__pfeil--weiter svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .nb-s-kategorien__pfeil:hover:not([aria-disabled="true"]) { box-shadow: var(--nb-sh-hoch); } }
.nb-s-kategorien__pfeil:active:not([aria-disabled="true"]) { background: var(--nb-ink-100); transition-duration: var(--nb-motion-druck); }
.nb-s-kategorien__pfeil:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-s-kategorien__pfeil[aria-disabled="true"] { opacity: 0.4; cursor: default; }
@media (hover: none), (pointer: coarse) { .nb-s-kategorien__pfeile { display: none; } }
@media (scripting: none) { .nb-s-kategorien__pfeile { display: none; } }

/* f: Suche über der Reihe. Weiß mit sh-ruht auf K1, im Fokus und beim Hover sh-hoch, nie ink-200 (G29, wie Bühne s3) */
.nb-s-kategorien__suche { max-width: 560px; margin: 0 auto var(--nb-space-xl); }
.nb-s-kategorien__suche .nb-s-suche { margin: 0; }
.nb-s-kategorien__suche .nb-su__eingabe { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-s-kategorien__suche .nb-su .nb-su__eingabe:is(:focus, :focus-visible) { background: var(--nb-surface-page); box-shadow: var(--nb-sh-hoch); }
@media (hover: hover) and (pointer: fine) { .nb-s-kategorien__suche .nb-su .nb-su__eingabe:hover { background: var(--nb-surface-page); box-shadow: var(--nb-sh-hoch); } }
@media (max-width: 767px) { .nb-s-kategorien__suche { margin-block-end: var(--nb-space-l); } }
.nb-s-kategorien__satz { margin: 0 0 var(--nb-space-s); text-align: center; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.35; letter-spacing: -0.01em; color: var(--nb-text-heading); text-wrap: balance; }

/* baukasten/sektionen/schlussruf/sektion.css */
/* Schlussruf (F3). */
.nb-s-schluss__satz { margin: var(--nb-space-s) 0 0; max-width: 44ch; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-v3 .nb-s-schlussruf h2 { margin: 0; }
.nb-v3 .nb-s-schlussruf h2 em { font-size: calc(1em * 1.03); }
.nb-s-schluss__text .nb-knopf { margin-block-start: var(--nb-space-m); }

/* a: Karte mit Bild */
.nb-s-schluss__karte { display: grid; overflow: hidden; }
@media (min-width: 1100px) { .nb-s-schluss__karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nb-s-schluss__karte .nb-s-schluss__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--nb-space-l) var(--nb-space-m); }
@media (min-width: 1100px) { .nb-s-schluss__karte .nb-s-schluss__text { padding: var(--nb-space-2xl) var(--nb-space-xl); } }
.nb-s-schluss__bild { aspect-ratio: 4 / 3; background: var(--nb-surface-component); }
.nb-s-schluss__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* b: dunkle Aktionsleiste mit Lime-Knopf (farbsystem.md:367-375) */
.nb-s-schluss__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-m); padding: var(--nb-space-l) var(--nb-space-m); border-radius: var(--nb-radius-container); background: var(--nb-action-bar-surface); }
@media (min-width: 1100px) { .nb-s-schluss__leiste { padding: var(--nb-space-xl); } }
.nb-v3 .nb-s-schluss__leiste h2 { color: var(--nb-text-on-dark); }
.nb-s-schluss__leiste .nb-s-schluss__satz { color: var(--nb-text-on-dark-muted); }
.nb-s-schluss__lime { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--nb-space-l); border-radius: var(--nb-radius-pill); background: var(--nb-action-bar-button); color: var(--nb-action-bar-button-label); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-s-schluss__lime:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); }

/* c: Signal-Fläche */
.nb-s.nb-s-schluss--signal { background: var(--nb-action-primary); }
.nb-s-schluss__signal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-m); }
.nb-v3 .nb-s-schluss--signal h2, .nb-v3 .nb-s-schluss--signal h2 em { color: var(--nb-text-on-signal); }
.nb-s-schluss--signal .nb-s-schluss__satz { color: var(--nb-text-on-signal); }
.nb-s-schluss__weiss { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--nb-space-l); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-s-schluss__weiss:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); }

/* baukasten/sektionen/fuss/sektion.css */
/* Fuß (N5) in Deep Night, Newsletter als dunkle Aktionsleiste mit Lime-Knopf (farbsystem.md:45, 367-370). */
.nb-s.nb-s-fuss { margin-block: 0; padding-block: var(--nb-space-2xl) var(--nb-space-l); background: var(--nb-surface-dark); color: var(--nb-text-on-dark-muted); font-family: var(--nb-font-sans); font-size: var(--nb-t-body-02); line-height: 1.5; }
.nb-s-fuss a { color: var(--nb-text-on-dark-muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .nb-s-fuss a:hover { color: var(--nb-text-on-dark); text-decoration: underline; text-underline-offset: 3px; } }
.nb-s-fuss :focus-visible { outline: 2px solid var(--nb-text-on-dark); outline-offset: 3px; }

.nb-s-fuss__eintrag { display: grid; gap: var(--nb-space-m); padding-block-end: var(--nb-space-xl); border-block-end: 1px solid var(--nb-border-dark-hairline); }
@media (min-width: 1100px) { .nb-s-fuss__eintrag { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: var(--nb-space-2xl); } }
.nb-v3 .nb-s-fuss__eintrag h2 { margin: 0; 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-on-dark); }
.nb-s-fuss__eintrag p { margin: var(--nb-space-2xs) 0 0; max-width: 60ch; font-size: var(--nb-t-body-01); }
.nb-s-fuss__form { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
.nb-s-fuss__form input { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 var(--nb-space-m); border: 1px solid var(--nb-border-dark-control); border-radius: var(--nb-radius-pill); background: transparent; color: var(--nb-text-on-dark); font: inherit; font-size: 16px; }
.nb-s-fuss__form input::placeholder { color: var(--nb-text-on-dark-muted); }
.nb-s-fuss__form button { min-height: 52px; padding: 0 var(--nb-space-l); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-action-bar-button); color: var(--nb-action-bar-button-label); font: inherit; font-size: 16px; font-weight: var(--nb-weight-semibold); cursor: pointer; }

.nb-s-fuss__raster { display: grid; gap: var(--nb-space-l); padding-block: var(--nb-space-xl); }
@media (min-width: 768px) { .nb-s-fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nb-s-fuss__raster { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--nb-space-xl); } }
.nb-s-fuss__marke svg { display: block; width: 132px; height: auto; color: var(--nb-text-on-dark); }
.nb-s-fuss__marke p { margin: var(--nb-space-s) 0 0; max-width: 30ch; }
.nb-s-fuss__sozial { display: flex; gap: var(--nb-space-xs); margin: var(--nb-space-m) 0 0; padding: 0; list-style: none; }
.nb-s-fuss__sozial a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--nb-border-dark-hairline); border-radius: 50%; color: var(--nb-text-on-dark); }
.nb-s-fuss__sozial svg { width: 18px; height: 18px; }
.nb-s-fuss__menue p { margin: 0 0 var(--nb-space-s); font-weight: var(--nb-weight-semibold); color: var(--nb-text-on-dark); }
.nb-s-fuss__menue ul { display: grid; gap: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; }

.nb-s-fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-s) var(--nb-space-l); padding-block-start: var(--nb-space-m); border-block-start: 1px solid var(--nb-border-dark-hairline); font-size: var(--nb-t-legal-01); }
.nb-s-fuss__unten p { margin: 0; }
.nb-s-fuss__recht { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-m); margin: 0; padding: 0; list-style: none; }
.nb-s-fuss__zahlung { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-s-fuss__zahlung svg { display: block; width: 38px; height: 24px; }

/* Schmaler Fuß (Variante schmal), eine Zeile Rechtslinks */
.nb-anm-fuss { padding: var(--nb-space-m) 0; border-top: 1px solid var(--nb-border-hairline); background: var(--nb-surface-page); }
.nb-anm-fuss__innen { box-sizing: border-box; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin-inline: auto; padding-inline: var(--nb-s-rand); }
.nb-anm-fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-m); font-size: var(--nb-t-legal-01); }
.nb-anm-fuss a { display: inline-flex; min-height: 44px; align-items: center; color: var(--nb-text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* Hell für das Kundencenter (Werkstatt konto-profil, 02.10.2026). Bühne ink-100 als Band, dunkler als der K1-Grund (G30),
   Text Night und text-body, Netzwerk-Kreise weiß auf Grau (Umkehr G29), Trenner Haarlinie */
.nb-s.nb-s-fuss--hell { padding-block: var(--nb-space-xl) var(--nb-space-l); background: var(--nb-surface-component); color: var(--nb-text-body); }
.nb-s-fuss--hell a { color: var(--nb-text-body); transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-s-fuss--hell a:active { color: var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-s-fuss--hell a:hover { color: var(--nb-text-heading); } } /* Druck und Farbübergang: /qualitaet konto-profil 05.10.2026 (DRUCK, NULLWECHSEL) */
.nb-s-fuss--hell :focus-visible { outline-color: var(--nb-text-heading); }
.nb-s-fuss--hell .nb-s-fuss__raster { padding-block-start: 0; }
.nb-s-fuss--hell .nb-s-fuss__marke svg, .nb-s-fuss--hell .nb-s-fuss__menue p { color: var(--nb-text-heading); }
.nb-s-fuss--hell .nb-s-fuss__sozial a { border-width: 0; background: var(--nb-surface-page); color: var(--nb-text-heading); }
.nb-s-fuss--hell .nb-s-fuss__unten { border-block-start-color: var(--nb-border-hairline); }

/* Hell mit Newsletter für Shop-Seiten (Werkstatt kategorie, 02.10.2026): Feld weiß auf dem Grau (Umkehr G29), Knopf Signal,
   weil Lime auf Hell nie Knopf ist (farbsystem.md:155) */
.nb-s.nb-s-fuss--hell[data-nb-variante="hellnl"] { padding-block-start: var(--nb-space-2xl); }
.nb-s-fuss--hell .nb-s-fuss__eintrag { border-block-end-color: var(--nb-border-hairline); }
.nb-v3 .nb-s-fuss--hell .nb-s-fuss__eintrag h2 { color: var(--nb-text-heading); }
.nb-s-fuss--hell .nb-s-fuss__eintrag p { color: var(--nb-text-body); }
.nb-s-fuss--hell .nb-s-fuss__form input { border-width: 0; background: var(--nb-surface-page); color: var(--nb-text-heading); caret-color: var(--nb-text-heading); }
.nb-s-fuss--hell .nb-s-fuss__form input::placeholder { color: var(--nb-text-body); }
.nb-s-fuss--hell .nb-s-fuss__form button { background: var(--nb-action-primary); color: var(--nb-action-primary-label); }
@media (hover: hover) and (pointer: fine) { .nb-s-fuss--hell .nb-s-fuss__form button:hover { background: var(--nb-action-primary-hover); } }
.nb-s-fuss--hell[data-nb-variante="hellnl"] .nb-s-fuss__raster { padding-block-start: var(--nb-space-xl); }

/* Weiß für das Kundencenter (Werkstatt konto-profil Runde 3, 02.10.2026). Bruch gegen farbsystem.md:404-407 (E4, kein
   weißes Band), dort ist Weiß bei Back Market nur als Schlussblock gemessen, Haarlinie oben gegen den K1-Grund (1,20:1, nur Zierde), Netzwerk-Kreise ink-100 mit Hover
   ink-300 (Umkehr G29, KSK:368). text-body auf Weiß 8,50:1, Hover text-link 7,23:1 (design-auditor A, farbcheck.mjs) */
.nb-s.nb-s-fuss--hell[data-nb-variante="weiss"] { background: var(--nb-surface-page); border-block-start: 0; }
.nb-s-fuss--hell[data-nb-variante="weiss"] a:active { color: var(--nb-text-link); }
@media (hover: hover) and (pointer: fine) { .nb-s-fuss--hell[data-nb-variante="weiss"] a:hover { color: var(--nb-text-link); } }
.nb-s-fuss--hell[data-nb-variante="weiss"] .nb-s-fuss__sozial a { background: var(--nb-surface-component); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-s-fuss--hell[data-nb-variante="weiss"] .nb-s-fuss__sozial a:active { background: var(--nb-ink-300); color: var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-s-fuss--hell[data-nb-variante="weiss"] .nb-s-fuss__sozial a:hover { background: var(--nb-ink-300); color: var(--nb-text-heading); } }