/* Erzeugt von baukasten/werkzeug/kasse-schale.mjs aus kasse-adresse, kasse-versand, kasse-zahlung, kasse-pruefen.
   Schale: strecken-kopf a, stepper d, kasse-summe e, kasse-fuss a.
   Gebaute Schritte (kasse-einstieg, kasse-adresse, kasse-versand, kasse-zahlung, kasse-pruefen, kasse-fertig): kasse-einstieg, kasse-adresse, eingabehilfe, kasse-versand, kasse-zahlung, kasse-pruefen, kasse-fertig, kasse-konto.
   Nicht von Hand ändern, Quelle ist der Baukasten:
   baukasten/kern/schale.css
   baukasten/kern/formular.css
   baukasten/kern/strecke.css
   baukasten/sektionen/strecken-kopf/sektion.css
   baukasten/sektionen/stepper/sektion.css
   baukasten/sektionen/zusammenfassung/sektion.css
   baukasten/sektionen/kasse-korb-summe/sektion.css
   baukasten/sektionen/kasse-summe/sektion.css
   baukasten/sektionen/strecken-fuss/sektion.css
   baukasten/sektionen/kasse-fuss/sektion.css
   baukasten/sektionen/anmelden/sektion.css
   baukasten/sektionen/adresse/sektion.css
   baukasten/sektionen/kasse-einstieg/sektion.css
   baukasten/sektionen/kasse-adresse/sektion.css
   baukasten/sektionen/eingabehilfe/sektion.css
   baukasten/sektionen/versand/sektion.css
   baukasten/sektionen/auszahlung/sektion.css
   baukasten/sektionen/pruefen/sektion.css
   baukasten/sektionen/kasse-zahlung/sektion.css
   baukasten/sektionen/kasse-versand/sektion.css
   baukasten/sektionen/kasse-pruefen/sektion.css
   baukasten/sektionen/fertig/sektion.css
   baukasten/sektionen/kasse-fertig/sektion.css
   baukasten/sektionen/kasse-konto/sektion.css
   Dazu laden nb-tokens-v3.css, nb-basis.css, nb-feld.css, nb-tradein.css und nb-strecke.css aus dem Template
   (layout/header.tpl, Schalter $nbKasse). */

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

/* ---------- §5f Bereichs-Kacheln (m-kachelwahl) ---------- */
.nb-f-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-xs); }
.nb-f-kachel { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 18px; border: 0; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); font: inherit; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-heading); text-align: left; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), 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; }
}

/* baukasten/kern/strecke.css */
/* Seitentyp Strecke (vk-werkstatt-typen, 26.09.2026). Verkauf abschließen, SPEZ-verkaufen-strang.md §C 1 bis 6.
   Kopf ohne Navigation, Stepper, Schale mit Hauptspalte und klebender Zusammenfassung rechts.
   Rechte Spalte 360 px ab 1100 px, darunter einspaltig (komponenten-warenkorb.md:273).
   Korridor „Warenkorb und Kasse“ (farbsystem.md:264): kein Lime, keine dunkle Fläche, kein Reveal. */

.nb-strecke-seite { --nb-s-abstand: 0; }
.nb-strecke-seite .nb-s { margin-block: 0; }

.nb-schale--strecke {
  box-sizing: border-box; display: grid; gap: var(--nb-space-m);
  max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin-inline: auto;
  padding: var(--nb-space-l) var(--nb-s-rand) var(--nb-space-2xl);
}
.nb-schale--strecke .nb-s__innen { padding-inline: 0; }
/* Spalte minmax(0, 1fr) statt auto: ein langes Wort oder eine breite Tabelle darin drückte sonst die Spalte über den Rand
   (Kasse A1 mit NOVA-Schritt Prüfen, 390 px: 396 px Inhalt in 343 px Spalte, gemessen 13.10.2026) */
.nb-schale--strecke .nb-schale__haupt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-l); min-width: 0; }
/* Felder und Bilder nie breiter als die Spalte. Ein textarea mit cols aus dem NOVA-Schritt Prüfen stand bei 390 px 37 px über
   dem Rand (Kasse A1, 13.10.2026) */
.nb-schale--strecke .nb-schale__haupt :is(textarea, input, select, img, table) { max-width: 100%; }
/* Die Zusammenfassung steht im DOM vor der Hauptspalte, damit Lese- und Tab-Folge am Handy gleich sind (zustands-pruefer 26.09.2026) */
.nb-schale--strecke .nb-schale__seite { min-width: 0; }
/* Einspaltig steht die Seitenspalte hinter der Hauptspalte. Vorne war sie am Handy oft leer (Karte aus, Leiste fest), zählte aber
   als Zeile mit Lücke space-m, die H1 stand dadurch 56 statt 32 px unter dem Stepper (Daniel 14.10.2026, Token space.seitenkopf) */
@media (max-width: 1099px) { .nb-schale--strecke > .nb-schale__seite { order: 1; } }
/* Am Handy kein einzelnes Wort allein in der letzten Zeile („kostenlos“, „Verpackung.“), Überschriften gleich lang
   (impeccable typography, Daniel 11.10.2026: „so viel komischer umbrechender Text“) */
.nb-strecke-seite :is(p, li, dd) { text-wrap: pretty; }
.nb-strecke-seite :is(h1, h2, h3) { text-wrap: balance; }
@media (min-width: 1100px) {
  .nb-schale--strecke { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--nb-space-xl); align-items: start; padding-top: var(--nb-space-xl); }
  .nb-schale--strecke .nb-schale__haupt { grid-column: 1; grid-row: 1; }
  .nb-schale--strecke .nb-schale__seite { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-height) + var(--nb-space-m)); }
}

/* Strecke auf dem Flächen-System K1 (Daniel 05.10.2026: „immer noch weiß in weiß, das ist doch ganz alt“,
   ENTSCHEIDE-flaechen-kontrast-2026-09-30.md E1 und E2, farbsystem.md „Jede Seite steht auf genau einem Seitengrund“).
   main trägt data-nb-grund="k1" (Strecke.php, nbMainGrund), Grund, Kartenfläche und Schatten kommen als Variablen aus
   kern/schale.css. Der Grund reicht bis zum Fensterrand, auch wenn die Seite kürzer ist als das Fenster.
   Kopf und Stepper bleiben weiß mit Haarlinie, die Leiste unten am Handy auch */
body:has(.nb-strecke-seite[data-nb-grund="k1"]) { background: var(--nb-surface-base); }
/* Karten direkt auf dem Grund werden weiß ohne Rand mit dem ruhenden Schatten: S-Karte-gewählt und das Adressformular,
   S-Aussage-Kacheln, S-Auswahl-aufklappend, S-Prüfliste. Die S-Zusammenfassung (.nb-f-karte) liest die Variablen selbst.
   Innen bleibt alles wie es ist: Felder und „Deine Angaben“ grau in der weißen Karte (Umkehr), Trenner als Haarlinie */
.nb-strecke-seite[data-nb-grund="k1"] :is(.nb-ad__karte, .nb-vs__kachel, .nb-az__wahl--liste, .nb-pr__liste) { background: var(--nb-s-karte-grund); border-width: 0; box-shadow: var(--nb-s-karte-schatten); }
/* Vorteile in der Kasse (Versand, Prüfen) unter 768 px als eine Karte mit Zeilen, Zeichen links, Titel und Satz rechts.
   Gestapelte Kacheln mit Zeichen oben waren am Handy 470 px hoch (Daniel 11.10.2026, mobile Runde 1). Wie .nb-kv__zeile,
   getrennt nur über Abstand (design-kurz 4). Der Ankauf (versand/sektion.css) bleibt unberührt */
@media (max-width: 767px) {
  .nb-strecke-seite :is(.nb-kv, .nb-kp) .nb-vs__kacheln { gap: 0; padding-block: var(--nb-space-2xs); background: var(--nb-s-karte-grund); border-radius: var(--nb-radius-card); box-shadow: var(--nb-s-karte-schatten); }
  .nb-strecke-seite :is(.nb-kv, .nb-kp) .nb-vs__kacheln .nb-vs__kachel { grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--nb-space-s); row-gap: var(--nb-space-3xs); padding: var(--nb-space-s) var(--nb-space-m); background: none; box-shadow: none; border-width: 0; }
  .nb-strecke-seite :is(.nb-kv, .nb-kp) .nb-vs__kachel > svg { grid-row: span 2; margin-top: 1px; }
}

/* Knopfort: der Schalter „knopf“ legt fest, wo „Weiter“ steht. Unter 1100 px immer in der Hauptspalte (SPEZ §C, nb-tradein.js:1192) */
.nb-knopfort--seite { display: none; }
@media (min-width: 1100px) {
  [data-nb-knopf="seite"] .nb-knopfort--seite { display: block; }
  [data-nb-knopf="seite"] .nb-knopfort--haupt { display: none; }
}

/* Adresskarte in der Kasse unter 768 px: „Ändern“ hält nur in der Namenszeile Platz frei, die Anschrift läuft über die volle
   Breite. Bei 320 px brachen sonst „Standard“ und „Rüttenscheider Straße“ in eigene Zeilen (Daniel 11.10.2026, mobile Runde 1) */
@media (max-width: 767px) {
  .nb-strecke-seite :is(.nb-ka-ad, .nb-kv) .nb-ad__karte:not(.nb-ad__karte--form) { padding-right: var(--nb-space-m); }
  .nb-strecke-seite :is(.nb-ka-ad, .nb-kv) .nb-ad__karte:not(.nb-ad__karte--form) .nb-ad__name { padding-right: 88px; min-height: 44px; }
}

/* baukasten/sektionen/strecken-kopf/sektion.css */
/* Strecken-Kopf. Leiste, Höhe und Kleben aus nb-strecke.css, hier nur die drei Plätze darin */
.nb-sk { justify-content: stretch; }
.nb-sk__innen {
  box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--nb-space-s);
  width: 100%; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin-inline: auto; padding-inline: var(--nb-s-rand);
}
.nb-sk__rechts { display: flex; justify-content: flex-end; gap: var(--nb-space-m); }
.nb-sk__link {
  display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 44px; justify-self: start;
  font-family: var(--nb-font-sans); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: none;
  text-underline-offset: 4px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-sk__link svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) and (pointer: fine) { .nb-sk__link:hover span { text-decoration: underline; } }
.nb-sk__link:focus-visible, .nb-sk__logo:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
/* Handy-Gesamtprüfung 14.10.2026 (ZIEL): Logo-Link 44 px hoch wie .nb-logo im Shop-Kopf, das Bild (30 px) bleibt mittig */
.nb-sk__logo { min-height: 44px; }
.nb-sk--b .nb-sk__innen { grid-template-columns: auto 1fr; }
@media (max-width: 767px) {
  .nb-sk__rechts { gap: var(--nb-space-s); }
  .nb-sk--b .nb-sk__link--zurueck span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* „Zum Angebot“ brach bei 390 px auf zwei Zeilen (26.09.2026). Am Handy steht „Zurück“, der Screenreader hört weiter das Ziel */
.nb-sk__link span { white-space: nowrap; }
.nb-sk__kurz { display: none; }
@media (max-width: 479px) {
  .nb-sk__lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nb-sk--a .nb-sk__kurz { display: inline; }
}

/* baukasten/sektionen/stepper/sektion.css */
/* Stepper. Was informiert, ist Night, nicht Signal (komponenten-warenkorb.md:316, farbsystem.md:33).
   Offen text-muted auf Weiß, ink-500 nur als Rand (4,20:1 reicht für Text nicht), erledigt Night 19,36:1 (farbcheck 26.09.2026). Übergang nur Farbe und Rand */
.nb-s-stepper { background: var(--nb-surface-page); border-bottom: 1px solid var(--nb-border-hairline); }
.nb-s-stepper .nb-s__innen { box-sizing: border-box; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin-inline: auto; padding: var(--nb-space-s) var(--nb-s-rand); }
.nb-st { font-family: var(--nb-font-sans); }
.nb-st ol { margin: 0; padding: 0; list-style: none; }
.nb-st a { color: inherit; text-decoration: none; }
.nb-st a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* a · Kreise mit Namen */
.nb-st--kreise .nb-st__bahn { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 720px; }
.nb-st--kreise .nb-st__schritt { position: relative; }
.nb-st--kreise .nb-st__schritt::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--nb-border-hairline); }
.nb-st--kreise .nb-st__schritt:first-child::before { display: none; }
.nb-st--kreise .nb-st__schritt--fertig::before, .nb-st--kreise .nb-st__schritt--aktiv::before { background: var(--nb-night); }
/* Linie unter die Kreise. Ohne z-index malte die Linie des nächsten Schritts über den Kreis davor
   und schnitt den Haken halb ab (Daniel 26.09.2026) */
.nb-st--kreise .nb-st__schritt::before { z-index: 0; }
.nb-st--kreise .nb-st__schritt > * { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--nb-space-2xs); }
@media (hover: hover) and (pointer: fine) { .nb-st--kreise .nb-st__schritt--fertig a:hover .nb-st__kreis { box-shadow: 0 0 0 4px var(--nb-ink-200); } }
.nb-st__kreis {
  display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: var(--nb-radius-pill);
  background: var(--nb-surface-page); border: 2px solid var(--nb-border-control); color: var(--nb-text-muted);
  font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums;
  transition: background var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-rand) var(--nb-motion-kurve);
}
.nb-st__kreis svg { width: 16px; height: 16px; }
.nb-st__schritt--fertig .nb-st__kreis { background: var(--nb-night); border-color: var(--nb-night); color: var(--nb-text-on-dark); }
.nb-st__schritt--aktiv .nb-st__kreis { border-color: var(--nb-night); color: var(--nb-text-heading); }
.nb-st__name { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); text-align: center; }
.nb-st__schritt--fertig .nb-st__name { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--nb-ink-300); }
@media (hover: hover) and (pointer: fine) { .nb-st__schritt--fertig a:hover .nb-st__name { text-decoration-color: currentColor; } }
.nb-st__schritt--aktiv .nb-st__name { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }

/* b · Namen mit Unterstrich */
.nb-st--text .nb-st__bahn { display: flex; gap: var(--nb-space-m); overflow-x: auto; scrollbar-width: none; }
.nb-st--text .nb-st__feld { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 44px; padding-bottom: var(--nb-space-3xs); border-bottom: 2px solid transparent; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); white-space: nowrap; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-st--text .nb-st__feld svg { width: 16px; height: 16px; }
.nb-st--text .nb-st__schritt--fertig .nb-st__feld { color: var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-st--text .nb-st__schritt--fertig .nb-st__feld:hover { border-bottom-color: var(--nb-ink-300); } }
.nb-st--text .nb-st__schritt--aktiv .nb-st__feld { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); border-bottom-color: var(--nb-night); }

/* c · Schritt x von 4 mit Segmenten */
.nb-st--balken { display: grid; gap: var(--nb-space-xs); }
.nb-st__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-2xs) var(--nb-space-m); }
.nb-st__stand { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-st__stand b { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }
.nb-st__zurueck { 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-heading); text-decoration: underline; text-underline-offset: 3px; }
.nb-st__zurueck svg { width: 16px; height: 16px; }
.nb-st__segmente { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nb-space-3xs); }
.nb-st__segment { height: 4px; border-radius: var(--nb-radius-pill); background: var(--nb-ink-200); }
.nb-st__segment--an { background: var(--nb-night); }

/* d · Balken mit Namen. Das Segment wird beim Zeigen per Schatten dicker, ohne dass etwas springt */
.nb-st--balken-namen .nb-st__bahn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nb-space-3xs); }
.nb-st--balken-namen .nb-st__feld { display: grid; gap: var(--nb-space-2xs); min-height: 44px; align-content: start; }
.nb-st--balken-namen .nb-st__segment { display: block; transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-st--balken-namen .nb-st__schritt--fertig .nb-st__segment, .nb-st--balken-namen .nb-st__schritt--aktiv .nb-st__segment { background: var(--nb-night); }
@media (hover: hover) and (pointer: fine) { .nb-st--balken-namen .nb-st__schritt--fertig a:hover .nb-st__segment { box-shadow: 0 0 0 1px var(--nb-night); } }
.nb-st--balken-namen .nb-st__name { display: flex; align-items: center; gap: var(--nb-space-3xs); text-align: left; white-space: nowrap; }
.nb-st--balken-namen .nb-st__name svg { flex: none; width: 14px; height: 14px; }
/* Unter 360 px passt „✓ Versand“ nicht in die Spalte (69 px), die Namen liefen ineinander. Das Segment darüber zeigt
   „erledigt“ schon, der Haken fällt dort weg, der Name bleibt unterstrichen (Daniel 11.10.2026, mobile Runde 1) */
@media (max-width: 359px) { .nb-st--balken-namen .nb-st__name svg { display: none; } }
.nb-st--balken-namen .nb-st__schritt--fertig .nb-st__name span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--nb-ink-300); }
@media (hover: hover) and (pointer: fine) { .nb-st--balken-namen .nb-st__schritt--fertig a:hover .nb-st__name span { text-decoration-color: currentColor; } }

/* e · Erledigte als Chips. Anatomie m-chip (komponenten-global.md:49-50 und :168), weiß mit Rand, ab 36 px.
   Der aktuelle Schritt trägt Night statt sky-500, weil er informiert und nicht gewählt ist */
.nb-st--chips .nb-st__bahn { display: flex; gap: var(--nb-space-2xs); overflow-x: auto; scrollbar-width: none; }
.nb-st--chips .nb-st__feld { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 36px; box-sizing: border-box; padding: 0 var(--nb-space-s); border: 1px solid transparent; border-radius: var(--nb-radius-pill); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); white-space: nowrap; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-st--chips .nb-st__feld svg { width: 14px; height: 14px; }
.nb-st--chips .nb-st__schritt--fertig .nb-st__feld { background: var(--nb-surface-page); border-color: var(--nb-border-control); color: var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-st--chips .nb-st__schritt--fertig .nb-st__feld:hover { border-color: var(--nb-night); } }
.nb-st--chips .nb-st__schritt--aktiv .nb-st__feld { border-color: var(--nb-night); box-shadow: inset 0 0 0 1px var(--nb-night); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }
.nb-st--chips .nb-st__schritt--offen .nb-st__feld { padding-inline: var(--nb-space-2xs); }
/* Bei 390 px liefen die vier Chips um 10 px über, Polster deshalb schmaler */
@media (max-width: 479px) { .nb-st--chips .nb-st__schritt--fertig .nb-st__feld, .nb-st--chips .nb-st__schritt--aktiv .nb-st__feld { padding-inline: var(--nb-space-xs); } }

/* Druck am Handy (design-kurz 12, mobile-native): erledigte Schritte sind Links, beim Tippen wird der Unterstrich Night
   und das Segment dicker, sofort und ohne Verzögerung durch Doppeltipp-Zoom */
.nb-st__schritt--fertig a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nb-st--balken-namen .nb-st__schritt--fertig a:active .nb-st__segment { box-shadow: 0 0 0 1px var(--nb-night); }
.nb-st--balken-namen .nb-st__schritt--fertig a:active .nb-st__name span { text-decoration-color: currentColor; }

/* baukasten/sektionen/zusammenfassung/sektion.css */
/* Zusammenfassung. Summe nie grau hinterlegt (komponenten-warenkorb.md:327), Betrag tnum.
   Ab 1100 px die Karte, darunter die Leiste. Aufklappen 300 ms (brand-design.md:192-193) */
.nb-zf { font-family: var(--nb-font-sans); }
.nb-zf__karte { display: none; padding: var(--nb-space-m); }
.nb-zf__titel { margin: 0 0 var(--nb-space-s); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-regular); color: var(--nb-text-heading); }
.nb-zf__kopf { display: flex; gap: var(--nb-space-s); align-items: center; }
.nb-zf__bild { flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-zf__bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nb-zf__geraet { display: grid; gap: var(--nb-space-2xs); justify-items: start; min-width: 0; }
.nb-zf__geraet--zeile { margin-top: var(--nb-space-s); }
.nb-zf__name { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-regular); line-height: 1.35; color: var(--nb-text-heading); }
.nb-zf__betrag { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nb-space-s); margin-top: var(--nb-space-s); padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-01); color: var(--nb-text-body); }
.nb-zf__betrag b { font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-zf__betrag--gross { display: grid; gap: var(--nb-space-3xs); margin-top: 0; padding-top: 0; border-top: 0; }
.nb-zf__betrag--gross > span:first-child { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-zf__betrag--gross b { font-size: var(--nb-t-price-01); letter-spacing: -0.03em; line-height: 1.1; }
.nb-zf__vorlaeufig { margin: var(--nb-space-3xs) 0 0; font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); }
.nb-zf__liste { display: grid; gap: var(--nb-space-xs); margin: var(--nb-space-s) 0 0; padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); }
.nb-zf__eintrag { display: grid; grid-template-columns: 1fr auto; gap: var(--nb-space-3xs) var(--nb-space-s); align-items: start; }
.nb-zf__eintrag dt { grid-column: 1; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-zf__eintrag dd { grid-column: 1; margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-zf__eintrag dd.nb-zf__stift { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.nb-zf__zusagen { display: grid; gap: var(--nb-space-2xs); margin: var(--nb-space-s) 0 0; padding: var(--nb-space-s) 0 0; border-top: 1px solid var(--nb-border-hairline); list-style: none; }
.nb-zf__zusagen li { display: grid; grid-template-columns: 18px 1fr; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-zf__zusagen svg { width: 18px; height: 18px; margin-top: 1px; color: var(--nb-text-heading); }
.nb-zf__aktion { margin-top: var(--nb-space-m); }

/* Leiste unter 1100 px */
.nb-zf__leiste { background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); }
.nb-zf__leiste summary { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: 56px; box-sizing: border-box; padding: var(--nb-space-2xs) var(--nb-space-s); cursor: pointer; list-style: none; }
.nb-zf__leiste summary::-webkit-details-marker { display: none; }
.nb-zf__leiste summary:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-zf__leiste summary { justify-content: flex-start; }
.nb-zf__leiste-bild { flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-zf__leiste-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nb-zf__leiste-text { display: grid; flex: 1 1 auto; min-width: 0; font-size: var(--nb-t-body-02); line-height: 1.35; color: var(--nb-text-muted); }
.nb-zf__leiste-text b { overflow: hidden; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-overflow: ellipsis; white-space: nowrap; }
.nb-zf__leiste-text span { font-variant-numeric: tabular-nums; }
.nb-zf__leiste-auf { flex: none; }
.nb-zf__leiste-auf { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.nb-zf__leiste-auf svg { width: 16px; height: 16px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-zf__leiste[open] .nb-zf__leiste-auf svg { transform: rotate(180deg); }
.nb-zf__leiste-inhalt { padding: 0 var(--nb-space-s) var(--nb-space-s); }
/* Variante c: fest unten, die Schale hält darunter Platz frei, damit der Knopf nicht verdeckt wird */
.nb-zf__leiste--unten { position: fixed; inset-inline: var(--nb-space-s); bottom: var(--nb-space-2xs); z-index: 5; max-height: calc(100svh - var(--nb-space-2xl)); overflow-y: auto; box-shadow: var(--nb-sh-float); }
@media (max-width: 1099px) { .nb-schale--strecke:has(.nb-zf__leiste--unten) { padding-bottom: calc(var(--nb-space-2xl) + var(--nb-space-2xl)); } }
/* Beim Tippen verdeckte sie das IBAN-Feld (zustands-pruefer 26.09.2026), deshalb weg, solange ein Eingabefeld den Fokus hat.
   Nur Felder zum Tippen: vorher reichte jeder Fokus im Formular, dann verschwand sie auch nach der Wahl im Adress-Fenster (Daniel 28.09.2026) */
.nb-schale--strecke:has(form:not(.nb-kk-s__gform) :is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea, select):focus) .nb-zf__leiste--unten { display: none; }

/* Variante d: klebt unter dem Kopf. Kleben muss die ganze Seitenspalte, sonst hat die Leiste keinen Weg */
@media (max-width: 1099px) {
  .nb-schale--strecke .nb-schale__seite:has(.nb-zf__leiste--kopf) { position: sticky; top: var(--header-height); z-index: 5; margin-inline: calc(-1 * var(--nb-s-rand)); padding: var(--nb-space-2xs) var(--nb-s-rand); background: var(--nb-surface-page); border-bottom: 1px solid var(--nb-border-hairline); }
  .nb-zf__leiste--kopf[open] { max-height: calc(100svh - var(--header-height) - var(--nb-space-2xl)); overflow-y: auto; }
}

/* Variante e: fest unten mit „Weiter“, wie die Angebotsleiste im Rechner (nb-tradein.css:622). Offen
   rutscht der Knopf unter die Details. Beim Tippen weg, dann gilt wieder der Knopf unter dem Formular */
.nb-zf__unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nb-space-xs); align-items: end; max-height: calc(100svh - var(--header-height)); overflow-y: auto; padding: var(--nb-space-xs) var(--nb-space-s) calc(var(--nb-space-xs) + env(safe-area-inset-bottom)); background: var(--nb-surface-page); border-top: 1px solid var(--nb-border-hairline); }
.nb-zf__unten:has(details[open]) { grid-template-columns: minmax(0, 1fr); }
/* Offen wie ein Fenster über der Seite (Daniel 26.09.2026): dahinter Scrim Night 40 % (alpha-scrim,
   design-tokens.json:106), oben runde Ecken, die Seite dahinter scrollt nicht. Nur Farbe und Rand bewegen sich */
.nb-zf__unten { box-shadow: 0 0 0 100vmax transparent; transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), border-radius var(--nb-motion-rand) var(--nb-motion-kurve), display 0s linear 250ms allow-discrete; }
.nb-zf__unten:has(details[open]) { z-index: 40; border-top-color: transparent; border-radius: var(--nb-radius-card) var(--nb-radius-card) 0 0; box-shadow: 0 0 0 100vmax var(--nb-alpha-scrim); }
html:has(.nb-zf__unten details[open]) { overflow: hidden; }
.nb-zf__unten .nb-zf__leiste { border: 0; }
.nb-zf__unten .nb-zf__leiste summary { padding-inline: 0; }
.nb-zf__unten .nb-zf__leiste-inhalt { padding-inline: 0; }
.nb-zf__unten-knopf .nb-knopf { width: 100%; }
/* In der festen Leiste fehlt der Platz für Speicher und „vorläufig“, beides steht aufgeklappt in der Karte */
.nb-zf__unten details:not([open]) .nb-zf__zusatz { display: none; }
@media (max-width: 1099px) {
  .nb-schale--strecke:has(.nb-zf__unten) { padding-bottom: calc(var(--nb-space-2xl) + var(--nb-space-2xl)); }
  /* Wechsel beim Verlassen eines Felds erst nach 250 ms, beim Betreten sofort. Sonst springt beim Antippen von „Abbrechen“
     oder „Weiter“ die Leiste unter den Finger oder der Knopf verschwindet, und der Tipp geht ins Leere (zustands-pruefer 28.09.2026) */
  .nb-schale--strecke:has(.nb-zf__unten) .nb-knopfort--haupt { display: none; transition: display 0s linear 250ms allow-discrete; }
  .nb-schale--strecke:has(.nb-zf__unten):has(form:not(.nb-kk-s__gform) :is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea, select):focus) .nb-knopfort--haupt { display: block; transition: none; }
  .nb-schale--strecke:has(form:not(.nb-kk-s__gform) :is(input:not([type="radio"], [type="checkbox"], [type="hidden"]), textarea, select):focus) .nb-zf__unten { display: none; transition: none; }
  /* Schritt Prüfen: die Leiste zeigt nur Gerät, Betrag und „Details“, „Verkauf abschließen“ bleibt unter dem
     Rechtssatz in der Hauptspalte (komponenten-strecke-konto.md §4, Ausnahme Schritt 5) */
  .nb-zf__unten--ohne-knopf { grid-template-columns: minmax(0, 1fr); }
  .nb-schale--strecke:has(.nb-zf__unten--ohne-knopf) .nb-knopfort--haupt { display: block; }
}

@media (min-width: 1100px) {
  .nb-zf__karte { display: block; }
  .nb-zf__leiste, .nb-zf__unten { display: none; }
}

/* Geöffnet standen Bild und Gerät doppelt da, in der Leiste und in der Karte (Daniel 26.09.2026).
   Offen trägt die Leiste nur noch „Dein Verkauf“ und „Schließen“ */
.nb-zf__leiste-titel, .nb-zf__offen { display: none; }
.nb-zf__leiste[open] .nb-zf__leiste-bild, .nb-zf__leiste[open] .nb-zf__leiste-text, .nb-zf__leiste[open] .nb-zf__zu { display: none; }
.nb-zf__leiste[open] .nb-zf__leiste-titel { display: block; flex: 1 1 auto; font-size: var(--nb-t-heading-03); color: var(--nb-text-heading); }
.nb-zf__leiste[open] .nb-zf__offen { display: inline; }
/* Das Gutscheinfeld in „Details“ der Leiste ist ausgenommen (form:not(.nb-kk-s__gform) oben), sonst blendet sein Fokus die Leiste
   samt Feld aus (Kasse, 08.10.2026) */

/* baukasten/sektionen/kasse-korb-summe/sektion.css */
/* Warenkorb, Summe (Werkstatt kasse, 08.10.2026). Werte komponenten-warenkorb.md §6 und §7 auf K1, VORGABEN-kasse-token §2, §4,
   §5. Karte weiß ohne Rand mit sh-ruht (nb-f-karte), innen ink-100 (Umkehr G29). Summe nie grau hinterlegt (KW:327).
   Nebenzeilen body-02 400, Gesamt 16/600 (KW:306), Ziffern tabular. Wallet-Knöpfe weiß mit Kontur border-control (BS:261,
   4,20:1), schwarz nur über den Schalter wallet. Bewegung nur Farbe 200 ms und Rand 250 ms. */

.nb-kk-s { font-family: var(--nb-font-sans); color: var(--nb-text-body); }
.nb-kk-s [hidden] { display: none !important; }
.nb-kk-s b, .nb-kk-leiste b { font-weight: var(--nb-weight-semibold); }
.nb-kk-s__karte { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-m); }
.nb-kk-s__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-kk-s__zeilen { display: grid; gap: var(--nb-space-2xs); margin: 0; }
.nb-kk-s__zeile { display: flex; justify-content: space-between; gap: var(--nb-space-s); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-kk-s__zeile dt, .nb-kk-s__zeile dd { margin: 0; }
.nb-kk-s__zeile dd { color: var(--nb-text-heading); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.nb-kk-s__zeile--grau, .nb-kk-s__zeile--grau dd { color: var(--nb-text-muted); }
.nb-kk-s__zeile--gesamt { margin-top: var(--nb-space-2xs); padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kk-s__satz { margin: calc(-1 * var(--nb-space-2xs)) 0 0; font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--nb-text-body); }

/* Liefergebiet und Zahlarten in grauer Innenfläche (Umkehr), Logos 38 × 24 im Original */
.nb-kk-s__zahlinfo { display: grid; gap: var(--nb-space-xs); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-kk-s__land { display: flex; align-items: center; gap: var(--nb-space-2xs); margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kk-s__land svg { flex: none; width: 18px; height: 18px; }
.nb-kk-s__land--mitte { justify-content: center; font-weight: var(--nb-weight-regular); }
/* Sieben Logos in einer Reihe wie Back Market (Daniel 08.10.2026: „alles in eine Reihe“). Je Spalte höchstens 38 px,
   auf schmalen Handys werden alle gleich kleiner statt umzubrechen */
.nb-kk-logos { display: grid; grid-template-columns: repeat(7, minmax(0, 38px)); gap: var(--nb-space-3xs); margin: 0; padding: 0; list-style: none; }
.nb-kk-logos img { display: block; width: 100%; height: auto; aspect-ratio: 38 / 24; }
/* „Sicheres Bezahlen“ mit Schloss unter der Logo-Reihe, mittig wie bei Back Market (Daniel 08.10.2026) */
.nb-kk-logos__sicher { display: flex; align-items: center; justify-content: center; gap: var(--nb-space-3xs); margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-body); }
.nb-kk-logos__sicher svg { flex: none; width: 16px; height: 16px; }

/* m-wege */
.nb-kk-s__kasse { margin: 0; }
.nb-kk-s__kasse .nb-knopf { width: 100%; }
.nb-kk-s__express { display: grid; gap: var(--nb-space-xs); }
.nb-kk-s__oder { display: flex; align-items: center; gap: var(--nb-space-s); margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-kk-s__oder::before, .nb-kk-s__oder::after { content: ""; flex: 1; height: 1px; background: var(--nb-border-hairline); }
.nb-kk-s__wallets { display: grid; gap: var(--nb-space-2xs); }
.nb-kk-s__express--neben .nb-kk-s__wallets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-kk-s__wallet { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); min-width: 0; min-height: 48px; padding: 0 var(--nb-space-s); border: 1px solid var(--nb-border-control); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kk-s__wallet img { display: block; flex: none; width: 38px; height: 24px; }
/* Hover: Rand Night wie der Zweitknopf der Hilfe, kein Schatten in der weißen Karte (Umkehr G29, 16.10.2026) */
@media (hover: hover) and (pointer: fine) { .nb-kk-s__wallet:hover { border-color: var(--nb-night); } }
.nb-kk-s__wallet:active { background: var(--nb-surface-component); }
.nb-kk-s__wallet:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page); }
/* Schalter wallet=schwarz: gefüllt in Night (#000 ist für Flächen verboten, FS:675). Bricht FS:674 (zwei gefüllte Systeme)
   und das Verbot „Night-Knopf gefüllt“ (Bauvertrag kasse). Dunkel-Anteil am Rechner 1,33 % je Knopf (VORGABEN-kasse-token §5) */
[data-nb-wallet="schwarz"] .nb-kk-s__wallet { border-color: var(--nb-night); background: var(--nb-night); color: var(--nb-text-on-dark); }
@media (hover: hover) and (pointer: fine) { [data-nb-wallet="schwarz"] .nb-kk-s__wallet:hover { border-color: var(--nb-surface-dark-raised); background: var(--nb-surface-dark-raised); } }
/* Apple Pay nur auf Apple-Geräten, sonst Google Pay an derselben Stelle, ohne Lücke (W12, Z08) */
[data-nb-geraet="apple"] .nb-kk-s__wallet--google, [data-nb-geraet="andere"] .nb-kk-s__wallet--apple { display: none; }
/* Express bei Guthaben: guthaben nennt den Restbetrag, guthaben-ohne-express lässt die schnellen Wege weg (im Markup) */
.nb-kk-s__rest { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-kk-s__rest b { font-variant-numeric: tabular-nums; }
/* Rechtszeile unter dem letzten Express-Knopf, eine Zeile wie Back Market (Daniel 14.10.2026 abends) */
.nb-kk-s__recht { margin: 0; font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-regular); line-height: 1.5; color: var(--nb-text-heading); }
.nb-kk-s__recht a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Gutschein eingeklappt, Feld aus dem Formular-System (ink-100 in der weißen Karte) */
.nb-kk-s__gutschein { border-top: 1px solid var(--nb-border-hairline); padding-top: var(--nb-space-2xs); }
.nb-kk-s__gutschein summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kk-s__gutschein summary::-webkit-details-marker { display: none; }
.nb-kk-s__gutschein summary svg { width: 18px; height: 18px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-kk-s__gutschein[open]:not(.is-zu) summary svg { transform: rotate(180deg); }
/* Höhe animiert nb-warenkorb.js (Gutschein auf- und zuklappen), dafür misst die Höhe mit Rand und Polster */
.nb-kk-s__gutschein { box-sizing: border-box; }
.nb-kk-s__gutschein summary { transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kk-s__gutschein summary:hover { color: var(--nb-text-link); } }
.nb-kk-s__gutschein summary:active, .nb-kk-s__anmelden a:active, .nb-kk-s__zusagen a:active { color: var(--nb-text-link); }
.nb-kk-s__gutschein summary:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
/* Am Handy kein Tipp-Aufblitzen und kein Rahmen nach Finger oder Maus, nur mit der Tastatur (nb-warenkorb.js, data-nb-zeiger) */
.nb-kk-s__gutschein summary { -webkit-tap-highlight-color: transparent; }
.nb-kk-s__gutschein[data-nb-zeiger] summary:focus-visible { outline: none; box-shadow: none; }
.nb-kk-s__gform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nb-space-2xs); align-items: start; margin: var(--nb-space-2xs) 0 0; }
.nb-kk-s__gform .nb-knopf { min-height: 56px; }
/* Unter 400 px Feld und Knopf untereinander, sonst ist das Label „Gutscheincode“ abgeschnitten (Prüfrunde S14) */
@media (max-width: 399px) { .nb-kk-s__gform { grid-template-columns: minmax(0, 1fr); } .nb-kk-s__gform .nb-knopf { width: 100%; } }
.nb-kk-s__ok { display: flex; align-items: center; gap: var(--nb-space-2xs); margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
.nb-kk-s__ok svg { flex: none; width: 18px; height: 18px; color: var(--nb-success-text); }
.nb-kk-s__anmelden { margin: calc(-1 * var(--nb-space-2xs)) 0 0; font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
.nb-kk-s__anmelden a { display: inline-flex; align-items: center; min-height: 44px; color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kk-s__anmelden a:hover { color: var(--nb-text-link); } }

/* Zusagen mit weißem Zeichen auf grauer Kachel ist die Vorteilsleiste (G31); in der weißen Karte umgekehrt: Zeichen auf ink-100 */
.nb-kk-s__zusagen { display: grid; gap: var(--nb-space-xs); margin: 0; padding: var(--nb-space-s) 0 0; border-top: 1px solid var(--nb-border-hairline); list-style: none; }
.nb-kk-s__zusagen li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--nb-space-xs); align-items: center; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-kk-s__kachel { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-component); }
.nb-kk-s__kachel svg { width: 20px; height: 20px; color: var(--nb-text-heading); }
.nb-kk-s__zusagen a { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px;; display: inline-block; padding-block: 12px; margin-block: -12px; } /* Tippfläche 43 px hoch bei gleichem Aussehen (Regel ZIEL, 08.10.2026) */
@media (hover: hover) and (pointer: fine) { .nb-kk-s__zusagen a:hover { color: var(--nb-text-link); } }

/* Trade-in-Box (KW §6): surface-component, radius-input */
.nb-kk-s__tausch { display: grid; gap: var(--nb-space-2xs); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-kk-s__tausch p { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-kk-s__tausch dl { margin: 0; }
.nb-kk-s__tausch-label { display: flex; align-items: center; gap: var(--nb-space-2xs); }
.nb-kk-s__tausch-label span { font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--nb-text-heading); }
.nb-kk-s__tausch-label svg { width: 16px; height: 16px; color: var(--nb-text-heading); }

/* b: Betrag groß wie price-01 im Angebot (Bruch M-SUMME) */
.nb-kk-s__gross { display: grid; gap: var(--nb-space-3xs); margin: 0; }
.nb-kk-s__gross span { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-kk-s__gross b { font-size: var(--nb-t-price-01); font-weight: var(--nb-weight-semibold); letter-spacing: -0.03em; line-height: 1.1; color: var(--nb-text-heading); font-variant-numeric: tabular-nums lining-nums; }
.nb-kk-s__zeilen--klein { padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); }

/* n: „Wir akzeptieren“ mittig wie nb-warenkorb.tpl */
.nb-kk-s--n .nb-kk-logos { justify-content: center; }
.nb-kk-s__akzeptieren { margin: 0; text-align: center; font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); }

/* Lädt: Höhe der Karte je Fassung (gemessen 08.10.2026) */
.nb-kk-s-platz { box-sizing: border-box; padding: var(--nb-space-m); border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-s-karte-grund, var(--nb-surface-page)); box-shadow: var(--nb-s-karte-schatten, var(--nb-sh-ruht)); }
.nb-kk-s-platz--a { min-height: 969px; }
.nb-kk-s-platz--b { min-height: 917px; }
.nb-kk-s-platz--n { min-height: 350px; }

/* Leiste unten am Handy (G3): weiß mit Haarlinie oben, Safe Area, beim Tippen weg (Checkliste 15.23) */
.nb-kk-leiste { display: none; }
@media (max-width: 1099px) {
  .nb-kk-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; 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); border-top: 1px solid var(--nb-border-hairline); transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
  .nb-kk-leiste.is-weg { transform: translateY(110%); }
  .nb-kk-leiste .nb-knopf { flex: none; }
  .nb-kk-leiste__text { display: grid; margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
  .nb-kk-leiste__text b { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
  body:has(.nb-kk-leiste) { padding-bottom: calc(var(--nb-space-2xl) + var(--nb-space-m)); }
  body:has(.nb-kk-s :is(input:not([type="checkbox"], [type="radio"], [type="hidden"])):focus) .nb-kk-leiste { display: none; }
  .nb-kk-s-platz--a { min-height: 951px; }
  .nb-kk-s-platz--b { min-height: 892px; }
}
@media (prefers-reduced-motion: reduce) { .nb-kk-leiste { transition: none; } }
@media (max-width: 767px) { .nb-kk-s__karte { padding: var(--nb-space-m) var(--nb-space-s); } }
/* Druck für Umriss-Knöpfe (Einlösen), kern/formular.css hat dafür keinen Wert */
.nb-kk-s .nb-f-knopf--umriss:active { background: var(--nb-surface-component); }
/* Leiste am Handy wie Back Market (Daniel 08.10.2026): Gesamtsumme mit „inkl. MwSt.“, „Zur Kasse“ und der Expressknopf des Geräts
   untereinander über die volle Breite */
@media (max-width: 1099px) {
  .nb-kk-leiste { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--nb-space-2xs); }
  .nb-kk-leiste__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; }
  .nb-kk-leiste__text b { font-size: var(--nb-t-heading-02); }
  .nb-kk-leiste .nb-knopf { width: 100%; }
  .nb-kk-leiste__wallet { width: 100%; font-weight: var(--nb-weight-semibold); }
  body:has(.nb-kk-leiste) { padding-bottom: calc(var(--nb-space-2xl) * 3); }
}

/* baukasten/sektionen/kasse-summe/sektion.css */
/* Zusammenfassung der Kasse. Grundgerüst aus zusammenfassung/sektion.css (über CSS mitgeladen), hier nur die Posten und die
   Summe. Werte: VORGABEN-kasse-token §1 und §4. price-03 fehlt in nb-tokens-v3.css, deshalb lokal mit dem Wert aus
   typografie.md:91 wie in kern/karte.css (Nachtrag in der Token-Datei ist Spur brand). Kein Grau hinter der Summe
   (komponenten-warenkorb.md:327), Ziffern tabular (Konvention 124), Neupreis nur der Betrag durchgestrichen (KW:178). */
.nb-ks { --nb-t-price-03: clamp(18px, 17.1px + 0.24vw, 20px); }
.nb-ks__liste { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
.nb-ks__posten { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--nb-space-s); align-items: start; }
/* Trenner zwischen den Posten (Daniel 17.10.2026: „hier sollten zu hundert Prozent kleine Trenner zwischen die einzelnen
   Bestellpositionen, auf jeder Seite des Checkouts“). Dieselbe Linie wie über der Summe, Abstand oben aus dem gap der Liste,
   unten space-s. Ausnahme von design-kurz Regel 4 und G17. */
.nb-ks__liste > .nb-ks__posten + .nb-ks__posten { padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); }
.nb-ks__text { display: grid; gap: var(--nb-space-2xs); min-width: 0; }
.nb-ks__pillen { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); } /* Pillenabstand 8 px (komponenten-global.md:82, design-auditor B 08.10.2026) */
.nb-ks__preis { display: grid; justify-items: end; gap: var(--nb-space-3xs); text-align: right; }
.nb-ks__preis b { font-size: var(--nb-t-price-03); font-weight: var(--nb-weight-semibold); line-height: 1.2; color: var(--nb-text-heading); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.nb-ks__neu { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nb-ks__neu s { text-decoration-thickness: 1px; }
/* Unter 360 px steht der Preis unter Name und Pillen, Betrag und Neupreis in einer Zeile. Bei 320 px blieben der Textspalte
   58 px, die Pille „Akku ab 85 %“ braucht 114 px und „128 GB · Pink“ lief unter den Neupreis (Daniel 11.10.2026, mobile Runde 1).
   Von 360 bis 399 px steht der Preis oben rechts neben dem Namen, Textspalte mindestens 83 px (Daniel 17.10.2026 über weg-b:
   allein unter den Pillen „super fehl am Platz“) */
@media (max-width: 359px) {
  .nb-ks__posten { grid-template-columns: 72px minmax(0, 1fr); }
  .nb-ks__preis { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--nb-space-2xs); justify-items: start; text-align: left; }
}
/* Unter 1100 px steht die Bestellung in der Klappe, Gesamt dort in body-01. Der Preis des Postens ist nie groesser als Gesamt
   (Daniel 17.10.2026: „die eingekreisten 470 … ist die schriftgröße hier wieder mal zu groß?“, gemessen 18 gegen 16 px bei 390 px) */
@media (max-width: 1099px) { .nb-ks__preis b { font-size: var(--nb-t-body-01); } }
.nb-ks__posten.is-verkauft .nb-zf__bild, .nb-ks__posten.is-verkauft .nb-zf__name, .nb-ks__posten.is-verkauft .nb-ks__pillen, .nb-ks__posten.is-verkauft .nb-ks__preis b { opacity: .45; }
.nb-ks__weg { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-ks__summe { display: grid; gap: var(--nb-space-2xs); margin: var(--nb-space-s) 0 0; padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); }
.nb-ks__zeile { display: flex; justify-content: space-between; gap: var(--nb-space-s); font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-ks__zeile dt, .nb-ks__zeile dd { margin: 0; }
.nb-ks__zeile dd { color: var(--nb-text-heading); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.nb-ks__zeile--gesamt { margin-top: var(--nb-space-2xs); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-ks__zeile--gesamt dd { font-size: var(--nb-t-heading-02); }
.nb-ks__satz { margin: var(--nb-space-3xs) 0 0; font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-ks__meta { font-size: var(--nb-t-body-02); line-height: 1.35; color: var(--nb-text-muted); }
.nb-ks__link { color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-ks__link:hover { text-decoration-color: currentColor; } }
.nb-ks__link:active { text-decoration-color: currentColor; color: var(--nb-text-body); }
/* Trefferfläche 44 px ohne die Zeile zu verschieben (WCAG 2.5.8, Brand-Soll 44 px am Handy) */
.nb-ks__link { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* Zusagen wie im Warenkorb (kasse-korb-summe), mit dem Abstand der alten Liste nb-zf__zusagen (Daniel 08.10.2026) */
.nb-ks__zusagen { margin-top: var(--nb-space-s); }
/* Rechtslinks in „Details“ der Leiste, weil der Fuß am Handy fehlt (Daniel 08.10.2026). Werte wie der Fuß der Kasse
   (strecken-fuss/sektion.css): legal-01, muted, unterstrichen, Trefferfläche 44 px, Haarlinie oben */
.nb-ks__recht { margin-top: var(--nb-space-s); padding-top: var(--nb-space-2xs); border-top: 1px solid var(--nb-border-hairline); }
.nb-ks__recht ul { display: flex; flex-wrap: wrap; gap: 0 var(--nb-space-m); margin: 0; padding: 0; list-style: none; }
.nb-ks__recht a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); text-decoration: underline; text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-ks__recht a:hover { color: var(--nb-text-heading); } }
.nb-ks__recht a:active { color: var(--nb-text-heading); }
.nb-ks__recht a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
/* Unter 360 px reichte der Platz neben „Weiter“ nicht für Bild, Name, Betrag und „Details“, der Name schrumpfte und „Details“
   lag über dem Betrag (Daniel 08.10.2026: „wieso ist das so verbuggt“). Dort fällt das Bild weg, Name und Betrag bleiben */

/* Gutschein in der Zusammenfassung (Daniel 08.10.2026), Optik aus kasse-korb-summe. Zeilen mit display flex oder grid gehorchen
   hidden sonst nicht */
.nb-ks__gs-zeile[hidden], .nb-ks__gs .nb-kk-s__gform[hidden], .nb-ks__gs [data-nb-ks-ok][hidden], .nb-ks__gs .nb-fl__fehler[hidden] { display: none !important; }
.nb-ks__gs { margin-top: var(--nb-space-xs); }
.nb-ks__gs [data-nb-ks-ok]:focus { outline: none; }
/* Liefergebiet und Logos unter Summe und Knopf, Abstand wie zwischen den Blöcken im Warenkorb */
.nb-ks .nb-kk-s__zahlinfo { margin-top: var(--nb-space-m); }
.nb-ks .nb-kk-s__zusagen { margin-top: var(--nb-space-m); }
/* Leiste am Handy wie Back Market (Daniel 08.10.2026): oben Gesamtsumme mit „inkl. MwSt.“ und „Details“, darunter der Knopf über
   die volle Breite. Betrag heading-02 Night, die Wörter davor und danach body-02 muted. Gilt nur in der Kasse (.nb-ks) */
@media (max-width: 1099px) {
  .nb-ks .nb-zf__unten { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--nb-space-2xs); }
  .nb-ks .nb-zf__leiste summary { min-height: 44px; }
  .nb-ks .nb-zf__leiste-text.nb-ks__lsum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; color: var(--nb-text-muted); }
  /* Offen trägt die Leiste nur „Deine Bestellung“ und „Schließen“. Die Regel darüber hob das Ausblenden aus
     zusammenfassung/sektion.css:93 auf, die Summe blieb stehen und der Titel brach in zwei Zeilen (Daniel 11.10.2026) */
  .nb-ks .nb-zf__leiste[open] .nb-zf__leiste-text.nb-ks__lsum { display: none; }
  .nb-ks .nb-zf__leiste-titel { white-space: nowrap; }
  .nb-ks .nb-zf__leiste summary { gap: var(--nb-space-xs); } /* „inkl. MwSt.“ bleibt bei 390 px in der Zeile */
  .nb-ks .nb-ks__lsum b { overflow: visible; font-size: var(--nb-t-heading-02); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
  .nb-ks .nb-zf__unten-knopf .nb-knopf { width: 100%; }
  .nb-schale--strecke:has(.nb-ks .nb-zf__unten) { padding-bottom: calc(var(--nb-space-2xl) * 2 + var(--nb-space-l)); }
}
/* Kasse ab Adresse am Handy ohne feste Leiste (Daniel 14.10.2026, I.offen, nb-ks--offen). Der Weiter-Knopf der Hauptspalte
   (nb-knopfort--haupt) zeigt sich von selbst, weil kern/strecke.css ihn nur neben der Leiste versteckt. Die Karte steht offen
   unter der Hauptspalte (kern/strecke.css ordnet die Seitenspalte dort nach hinten), ihr eigener Knopf fehlt, den trägt die
   Hauptspalte */
@media (max-width: 1099px) {
  .nb-ks--offen .nb-zf__karte { display: block; }
  .nb-ks--offen .nb-knopfort--seite { display: none; }
}
/* Versand trägt „Deine Vorteile“ schon in der Hauptspalte. Am Handy stünden Garantie und Rückgabe sonst zweimal untereinander */
@media (max-width: 1099px) { .nb-schale--strecke:has(.nb-kv__h2) .nb-ks--offen .nb-ks__zusagen { display: none; } }

/* baukasten/sektionen/strecken-fuss/sektion.css */
/* Strecken-Fuß: eine Zeile, legal-01, muted 4,20:1 und mehr, Links unterstrichen */
.nb-sf { border-top: 1px solid var(--nb-border-hairline); background: var(--nb-surface-page); font-family: var(--nb-font-sans); }
.nb-sf__innen { box-sizing: border-box; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin-inline: auto; padding: var(--nb-space-m) var(--nb-s-rand); }
.nb-sf ul { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-m); margin: 0; padding: 0; list-style: none; }
.nb-sf a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); text-decoration: underline; text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-sf a:hover { color: var(--nb-text-heading); } }
.nb-sf a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* baukasten/sektionen/kasse-fuss/sektion.css */
/* Fuß der Kasse. Grundgerüst aus strecken-fuss/sektion.css. Auf K1 kein weißes Band voller Breite (G30, farbsystem.md:667),
   deshalb ohne eigene Fläche, nur die Haarlinie oben. Cookie-Einstellungen ist ein Knopf (fuss-daten.mjs Z. 98), er sieht
   aus wie die Links daneben */
/* Daniel 08.10.2026: „bitte den Footer auch weiß“, wie der Kopf der Kasse. Geht G30 (kein weißes Band voller Breite auf K1,
   farbsystem.md:667) vor, weil Kopf und Fuß die Seite rahmen und der Fuß seitdem unten an der Kante sitzt */
.nb-sf--kasse { background: var(--nb-surface-page); }
/* Runde 3 (Daniel 08.10.2026: „wieso ist der Footer so weit oben?“): Auf kurzen Seiten (leerer Warenkorb, Einstieg) stand der
   Fuß mitten im Bild, darunter weiß. Die Seite füllt jetzt die Höhe des Fensters, der Hauptteil wächst, der Fuß sitzt unten,
   der Grund darunter ist der K1-Grund (surface-base) statt Weiß, damit kein weißes Band entsteht (farbsystem.md:667) */
/* Kopf und Fuß stehen in Hüllen mit display: contents direkt im body, deshalb am body (gemessen 08.10.2026) */
body:has(.nb-sf--kasse) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--nb-surface-base); }
body:has(.nb-sf--kasse) > main { flex: 1 0 auto; width: 100%; }
.nb-sf__knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-sf__knopf:hover { color: var(--nb-text-heading); } }
.nb-sf__knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-sf--kasse a:active, .nb-sf__knopf:active { color: var(--nb-text-heading); }
/* Schrift der Kasse: body-02 misst in Strecke und Konto 16 px (typografie.md:88, Nachtrag 04.10.2026). Das Konto setzt es in
   kern/konto.css:35, die Strecke noch nicht. Für die Kasse hier, weil der Fuß auf jeder Kassen-Seite steht (Prüfrunde D2).
   Die Ankauf-Strecke misst weiter 14 px, das ist ein Hinweis an Daniel, nicht ungefragt geändert (G35) */
/* Am Handy 14 px wie Back Market (Daniel 11.10.2026), die 16 px gelten nur ab 768 px */
@media (min-width: 768px) { body:has(.nb-sf--kasse) .nb-bk { --nb-t-body-02: 16px; } }
/* Am Handy kein Fuß (Daniel 08.10.2026: „nimm den raus, das ist einfach unpassend auf jeder Seite“). Die Rechtslinks stehen in
   „Details“ der festen Leiste (kasse-summe, .nb-ks__recht). Ohne Leiste (Einstieg, Prüfen) liegen Impressum und
   Cookie-Einstellungen zwei Klicks entfernt über „Hilfe“ im Kopf (shop-build.md 5.1, RUECKWEG meldet das als Hinweis) */
/* Ausnahme Warenkorb (Daniel 13.10.2026, OE 122 Punkt 4): seine Leiste hat kein „Details“ mit Rechtslinks, ohne Fuß wären AGB,
   Widerruf und Impressum am Handy nicht direkt erreichbar (§ 5 DDG). Die Klasse setzt snippets/nb-kasse-fuss.tpl */
/* Ebenso Adresse, Versand und Zahlung ohne Leiste (nb-sf--offen, Daniel 14.10.2026): die Rechtslinks aus „Details“ stehen
   wieder im Fuß */
@media (max-width: 767px) { .nb-sf--kasse:not(.nb-sf--korb, .nb-sf--offen) { display: none; } }

/* baukasten/sektionen/anmelden/sektion.css */
/* Anmelden (K9), Werkstatt anmelden 27.09.2026, am 06.10.2026 auf das Flächen-System K1 gezogen (Daniel am Handy:
   „dort müsste ja jetzt eigentlich unser background sein aber es nimmt einfach die ganze Seite ein“).
   Grund auf jeder Breite surface-base (farbsystem.md:35), Karte weiß ohne Rand mit sh-ruht, auch am Handy.
   Radius 24, 520 px wie m-dialog (KT:526). Keine Unterzeile unter der Überschrift (Daniel 06.10.2026).
   Hauptknopf Signal als Pille (farbsystem.md:53-62, 394). Night wie Back Market wäre ein Bruch (farbsystem.md:65-68).
   Anbieter-Knöpfe als Umriss mit ink-300 wie „Direkt zu PayPal“ (komponenten-warenkorb.md:336-339, KT:522). */

.nb-konto-seite:has(.nb-anm), body:has(.nb-konto-seite .nb-anm) { background: var(--nb-surface-base); }

/* Herkunft: Kopf, Strecke oder Kasse. Jeder Text mit Weiche trägt data-nb-nur */
[data-nb-herkunft="kopf"] [data-nb-nur]:not([data-nb-nur~="kopf"]),
[data-nb-herkunft="strecke"] [data-nb-nur]:not([data-nb-nur~="strecke"]),
[data-nb-herkunft="kasse"] [data-nb-nur]:not([data-nb-nur~="kasse"]) { display: none !important; }

.nb-anm { box-sizing: border-box; width: 100%; max-width: calc(520px + 2 * var(--nb-s-rand)); margin-inline: auto; padding: var(--nb-space-l) var(--nb-s-rand) var(--nb-space-2xl); display: grid; gap: var(--nb-space-m); }
@media (min-width: 1100px) { .nb-anm { padding-top: var(--nb-space-xl); } }

.nb-anm__kopf { display: grid; gap: var(--nb-space-2xs); }
.nb-anm__h1 { 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-anm__karte { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-l); border-width: 0; box-shadow: var(--nb-sh-ruht); }
/* Am Handy bleibt die Karte Karte, nur das Polster wird kleiner */
@media (max-width: 767px) { .nb-anm__karte { padding: var(--nb-space-m); } }
/* e) Überschrift in der Karte */
.nb-anm--e .nb-anm__karte > .nb-anm__kopf { margin-bottom: calc(-1 * var(--nb-space-2xs)); }

.nb-anm__form { display: grid; gap: var(--nb-space-s); }
.nb-anm__form > [data-nb-hauptknopf] { margin-top: var(--nb-space-2xs); }

.nb-anm__satz { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-anm__satz b, .nb-anm__tipp b, .nb-anm__gesendet b { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); overflow-wrap: anywhere; }
.nb-anm__zeile { margin: 0; }
/* Links 14 px, der Grundwert von body-02 (nb-tokens-v3.css:159). Das Konto hebt den Token auf 16 px, das war fuer Links zu gross (Daniel 06.10.2026: das erschlaegt einen ja) */
.nb-anm__link { color: var(--nb-text-heading); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-anm__link:hover { color: var(--nb-text-link); } }

/* Mail aus Schritt 1, fett, mit Rückweg darunter */
.nb-anm__mail { margin: 0; display: grid; gap: var(--nb-space-3xs); }
.nb-anm__mail-wert { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); overflow-wrap: anywhere; }

/* Tippfehler in der Domain */
.nb-anm__tipp { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--nb-space-2xs); font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-anm__tipp .nb-f-knopf--text { min-height: 44px; font-size: 14px; font-weight: var(--nb-weight-semibold); }

/* „oder“ zwischen zwei Haarlinien (farbsystem.md:242, komponenten-warenkorb.md:339) */
.nb-anm__oder { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--nb-space-s); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-anm__oder::before, .nb-anm__oder::after { content: ""; height: 1px; background: var(--nb-border-hairline); }

.nb-anm__social { display: grid; gap: var(--nb-space-xs); }
.nb-anm__social-knopf { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: var(--nb-space-xs); 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-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), background var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-anm__social-knopf:active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); } /* Druck, Fassung C 09.10.2026 */
/* Rand border-control (4,20:1) statt ink-300 (1,53:1, Verbotszone farbsystem.md), Hover Rand Night und ink-50 wie im Einstieg der Kasse (Daniel 08.10.2026) */
@media (hover: hover) and (pointer: fine) { .nb-anm__social-knopf:hover { border-color: var(--nb-text-heading); background: var(--nb-ink-50); } }
.nb-anm__marke { flex: none; width: 20px; height: 20px; }

/* Passwort mit Auge rechts im Feld, Trefferfläche 44 px, Zeichen ink-500 4,20:1 */

/* Regel „Mindestens 8 Zeichen“: offen Kreis und muted, erfüllt Haken success-solid 3,43:1 und success-text 5,13:1.
   Das Zeichen wechselt mit, nicht nur die Farbe (farbsystem.md:380-382). Kein Signal, kein Mint, kein Braun */
.nb-anm__regel { margin: 0; display: flex; align-items: center; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-anm__regel svg { flex: none; width: 16px; height: 16px; padding: 1px; box-sizing: border-box; border: 1.5px solid var(--nb-border-control); border-radius: 50%; color: transparent; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-anm__regel.is-erfuellt { color: var(--nb-success-text); }
.nb-anm__regel.is-erfuellt svg { border-color: transparent; color: var(--nb-success-solid); padding: 0; }

.nb-anm__namen { display: grid; gap: var(--nb-space-s); }
@media (min-width: 480px) { .nb-anm__namen { grid-template-columns: 1fr 1fr; } }

.nb-anm__recht { margin: 0; font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--nb-text-muted); }
.nb-anm__recht a { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 2px; }

/* Codefeld: ein Feld, darüber sechs Kästchen. 48 × 56 px, Abstand space-2xs, Ziffern heading-01 mit tabular-nums
   (Lücke im Werte-Dokument, design-auditor: nächster Wert heading-01, typografie.md:82, 214) */
.nb-anm__code-rahmen { position: relative; }
.nb-anm__kaesten { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 48px); justify-content: start; gap: var(--nb-space-2xs); pointer-events: none; }
/* Kästchen nach dem Formular-System (27.09.2026): graue Fläche ohne Rand, das aktive Kästchen im Fokus ink-200,
   Fehler färbt alle Kästchen critical-bg. Kein Rahmen, keine Linie (komponenten-formular.md §1) */
.nb-anm__kasten { display: grid; place-items: center; height: 56px; border: 0; border-radius: var(--nb-radius-input); background: var(--nb-ink-100); font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; color: var(--nb-text-heading); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Die alte Grundklasse nb-f-eingabe ist weg (Formular-System 27.09.2026), deshalb Schrift und Maße hier. 16 px gegen den Zoom am iPhone */
.nb-anm__code-eingabe { box-sizing: border-box; min-height: 56px; margin: 0; padding: 0 var(--nb-space-s); border: 0; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.nb-anm__code-eingabe { width: calc(6 * 48px + 5 * var(--nb-space-2xs)); color: transparent; caret-color: transparent; border-color: transparent; background: transparent; letter-spacing: 1em; }
.nb-anm__code-eingabe:focus-visible { outline: none; }
.nb-anm__code-rahmen:focus-within .nb-anm__kasten.is-aktiv { background: var(--nb-ink-200); }
@media (hover: hover) and (pointer: fine) { .nb-anm__code-rahmen:hover .nb-anm__kasten.is-aktiv { background: var(--nb-ink-200); } }
.nb-f-feld--fehler .nb-anm__kasten { background: var(--nb-critical-bg); }
/* In der Karte bleiben bei 390 px nur 310 px, sechs feste Kästchen brauchen 328. Deshalb teilen sie sich bis 480 px die Breite */
@media (max-width: 480px) { .nb-anm__kaesten { grid-template-columns: repeat(6, 1fr); width: 100%; } .nb-anm__code-eingabe { width: 100%; } }

.nb-anm__nachsenden { display: grid; gap: var(--nb-space-xs); justify-items: start; font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-anm__nachsenden p { margin: 0; }
.nb-anm__nachsenden .nb-f-knopf--umriss { justify-self: stretch; }
.nb-anm__warten { color: var(--nb-text-muted); font-variant-numeric: tabular-nums; }

.nb-anm__gesendet { display: grid; grid-template-columns: 24px 1fr; gap: var(--nb-space-xs); align-items: start; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-anm__gesendet svg { width: 24px; height: 24px; color: var(--nb-text-heading); }
.nb-anm__gesendet p { margin: 0; }

/* Angebot in einer Zeile, nur aus der Strecke */
.nb-anm__angebot { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: var(--nb-space-xs); padding-bottom: var(--nb-space-s); border-bottom: 1px solid var(--nb-border-hairline); }
.nb-anm__angebot-bild { width: 48px; height: 48px; }
.nb-anm__angebot-bild img { width: 100%; height: 100%; }
.nb-anm__angebot-text { display: grid; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-anm__angebot-titel { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-anm__angebot-betrag { font-size: var(--nb-t-price-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: lining-nums; white-space: nowrap; }

.nb-anm__fuss { margin: 0; font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); }
.nb-anm__fuss a { color: var(--nb-text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* c) Zwei Spalten. Rechts Nutzen oder Angebot, 360 px wie die Zusammenfassung (komponenten-strecke-konto.md:99-103) */
.nb-anm--c { max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); }
.nb-anm__spalte { display: grid; gap: var(--nb-space-m); min-width: 0; }
@media (min-width: 1100px) {
  .nb-anm--c { grid-template-columns: minmax(0, 520px) 360px; justify-content: center; gap: var(--nb-space-xl); align-items: start; }
  .nb-anm--c .nb-anm__neben { margin-top: calc(var(--nb-t-heading-01) * 1.15 + var(--nb-space-m)); }
}
.nb-anm__neben { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-m); align-content: start; }
.nb-anm__neben-titel { margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-anm__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nb-space-s); }
/* Kreis 40 px surface-info, Zeichen 22 px Night 17,05:1 (KT:527, schale.css:57) */
.nb-anm__liste li { display: grid; grid-template-columns: 40px 1fr; gap: var(--nb-space-xs); align-items: center; font-size: var(--nb-t-body-01); line-height: 1.4; color: var(--nb-text-heading); }
.nb-anm__liste svg { box-sizing: border-box; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--nb-surface-info); color: var(--nb-text-heading); }
.nb-anm__neben-geraet { display: grid; grid-template-columns: 96px 1fr; gap: var(--nb-space-s); align-items: center; }
.nb-anm__neben-geraet > span:last-child { display: grid; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-anm__neben-geraet b { font-size: var(--nb-t-body-01); color: var(--nb-text-heading); }
.nb-anm__neben-bild { width: 96px; height: 96px; }
.nb-anm__neben-bild img { width: 100%; height: 100%; }
.nb-anm__neben-betrag { margin: 0; display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-01); color: var(--nb-text-body); }
.nb-anm__neben-betrag b { font-size: var(--nb-t-price-02); color: var(--nb-text-heading); }
.nb-anm__neben-klein { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
@media (max-width: 1099px) { .nb-anm--c .nb-anm__neben { box-shadow: none; } }
@media (max-width: 767px) { .nb-anm--c .nb-anm__karte + .nb-anm__fuss { order: 3; } }

/* d) Fenster über der Seite. Scrim Night 40 % mit blur(12px) (nb-tokens-v3.css:97, komponenten-global.md:214),
   Fenster 520 px, Radius 24, sh-panel, Polster space-l (KT:526). Schließen 44 px auf surface-component (KG:220) */
@media (min-width: 768px) {
  .nb-anm--d { min-height: 640px; place-content: center; }
  .nb-anm--d .nb-anm__scrim { position: fixed; inset: 0; z-index: 40; background: var(--nb-alpha-scrim); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .nb-anm--d .nb-anm__fenster { position: relative; z-index: 41; box-sizing: border-box; width: min(520px, calc(100vw - 32px)); display: grid; gap: var(--nb-space-m); padding: var(--nb-space-l); box-shadow: var(--nb-sh-panel); }
  .nb-anm--d .nb-anm__h1 { font-size: var(--nb-t-heading-02); line-height: 1.25; letter-spacing: -0.01em; padding-right: 48px; }
  .nb-anm--d .nb-anm__zu { position: absolute; top: var(--nb-space-s); right: var(--nb-space-s); 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 var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
  .nb-anm--d .nb-anm__zu: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-anm--d .nb-anm__zu:hover { background: var(--nb-ink-300); } }
  .nb-anm--d .nb-anm__zu svg { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
  .nb-anm--d .nb-anm__scrim, .nb-anm--d .nb-anm__zu { display: none; }
  .nb-anm--d .nb-anm__fenster { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-m); border-width: 0; box-shadow: var(--nb-sh-ruht); }
}

.nb-anm__nutzer { font-size: var(--nb-t-body-01); }

/* Konto anlegen nach Google oder PayPal (Daniel 28.09.2026, Vorbild Back Market), bisher nur in nb-konto.css des
   Plugins. Mail als gesperrtes Feld (komponenten-formular.md Zeile 62), Hilfe darunter text-muted, Herkunft als
   ruhiger Kasten surface-component, Radius input, ohne Rand, Marke 20 px */
.nb-anm__hilfe { margin: calc(var(--nb-space-2xs) * -1) 0 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-anm__hilfe .nb-anm__link { font-size: inherit; }
.nb-anm__herkunft { display: flex; gap: var(--nb-space-xs); align-items: flex-start; padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-anm__herkunft-marke { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.nb-anm__herkunft-text { display: grid; gap: var(--nb-space-3xs); }
.nb-anm__herkunft-text p { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-anm__herkunft-text .nb-anm__herkunft-titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-fl.is-gesperrt { opacity: .5; }
.nb-fl.is-gesperrt .nb-fl__eingabe { cursor: not-allowed; }

/* baukasten/sektionen/adresse/sektion.css */
/* Schritt 1 · Adresse. Endwahl 28.09.2026 d: S-Karte-gewählt plus S-Fenster mit S-Wahl-ohne-Fläche
   (design/werte/komponenten-strecke-konto.md §11, Fenster auch komponenten-global.md §9). Felder nach
   komponenten-formular.md (nb-fl, nb-feld.css). Die Fassungen a (Liste blau), b, c und e stehen in git vor dem Commit
   „Werkstatt strecke fertig“. */
.nb-ad { display: grid; gap: var(--nb-space-m); max-width: 720px; font-family: var(--nb-font-sans); }
.nb-ad__kopfzeile { display: grid; gap: var(--nb-space-2xs); }
.nb-ad__h1 { 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); text-wrap: balance; }
.nb-ad__unter { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); max-width: 60ch; }

/* Name, Anschrift, „Standard“ als Wort ohne Fläche (G10), Hinweis in Night ohne Braun (G8) */
.nb-ad__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs) var(--nb-space-xs); margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-ad__standard { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); }
.nb-ad__anschrift { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-ad__stift { position: absolute; top: var(--nb-space-m); right: var(--nb-space-m); }
.nb-ad__hinweis { display: flex; gap: var(--nb-space-2xs); align-items: flex-start; margin-top: var(--nb-space-2xs); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-ad__hinweis svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* Formular: sechs Spalten ab 480 px, am Handy eine */
.nb-ad__felder { display: grid; gap: var(--nb-space-s); grid-template-columns: minmax(0, 1fr); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); }
@media (min-width: 480px) {
  .nb-ad__felder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nb-ad__felder > * { grid-column: span 6; }
  .nb-ad__felder > .nb-ad__halb { grid-column: span 3; }
  .nb-ad__felder > .nb-ad__strasse, .nb-ad__felder > .nb-ad__ort { grid-column: span 4; }
  .nb-ad__felder > .nb-ad__nr, .nb-ad__felder > .nb-ad__plz { grid-column: span 2; }
}
.nb-ad__zusatz { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-ad__zusatz:hover { text-decoration-color: currentColor; } }
.nb-ad__zusatz:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-input); }
.nb-ad__land { display: flex; gap: var(--nb-space-xs); align-items: baseline; margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-ad__land b { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* S-Karte-gewählt · weiße Karte, rechts Platz für „Ändern“, darunter die Textknöpfe */
.nb-ad__karte { position: relative; display: grid; gap: var(--nb-space-3xs); padding: var(--nb-space-m); padding-right: calc(var(--nb-space-m) + 88px); background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); }
.nb-ad__karte--form { padding: var(--nb-space-xs); }
.nb-ad__karte--form .nb-ad__felder { padding: var(--nb-space-xs); }
.nb-ad__karte-titel { margin: var(--nb-space-xs) var(--nb-space-xs) 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-ad__wechsel { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-l); }
.nb-ad__b { display: grid; gap: var(--nb-space-s); }
.nb-ad__b [hidden] { display: none !important; } /* sonst schlägt display: grid an der Karte das hidden */
.nb-ad__b .nb-f-knopf--text { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); }
.nb-ad__b .nb-f-knopf--text svg { width: 18px; height: 18px; flex: none; }
.nb-ad__abbrechen { padding: 0 var(--nb-space-xs); }

.nb-ad__aktion { display: grid; }
@media (min-width: 768px) { .nb-ad__aktion { justify-items: start; } .nb-ad__aktion .nb-f-knopf--breit { width: auto; min-width: 240px; } }

/* S-Fenster · nach m-dialog (KT:553): 520 px, Radius card, sh-panel, Titel heading-02, Schließen 44 px auf
   surface-component (KG:220). Scrim alpha-scrim OHNE Weichzeichner wie die Einstellungen der Warehouse-App
   (warehouse-app/public/css/settings.css:23, tokens.css:117), der blur(12px) gehört nur dem Kopf. Eintritt motion-fenster:
   160 ms, 6 px hoch (settings.css:48-52). Am Handy seit 14.10.2026 Blatt von unten (Daniel, tokens.json blatt), Block unten */
.nb-ad__fenster { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-width: none; max-height: min(640px, calc(100vh - 64px)); margin: auto; padding: 0; border: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-panel); color: var(--nb-text-body); font-family: var(--nb-font-sans); overflow: hidden; }
.nb-ad__fenster[open] { display: flex; flex-direction: column; }
.nb-ad__fenster::backdrop { background: var(--nb-alpha-scrim); animation: nb-ad-scrim var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ad__fenster:modal { animation: nb-ad-auf var(--nb-motion-fenster) var(--nb-motion-fenster-kurve) both; }
/* Schließen 120 ms ease-out, Fassung C (Daniel 09.10.2026). overlay hält das Fenster in der obersten Ebene, bis es
   ausgeblendet ist. Ohne overlay-Unterstützung (Firefox) schließt es wie bisher sofort */
@supports (overlay: auto) {
  .nb-ad__fenster:not([open]), .nb-ad__fenster:not([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; }
}
@keyframes nb-ad-auf { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes nb-ad-scrim { from { opacity: 0; } }
/* Vorschau: im Zustand „Fenster offen“ steht es ohne showModal. Ein eigener Schirm fängt dann die Klicks und dunkelt
   wie ::backdrop (zustands-pruefer 28.09.2026: der Schatten allein ließ „Weiter“ dahinter klickbar) */
.nb-ad__schirm { position: fixed; inset: 0; z-index: 59; background: var(--nb-alpha-scrim); }
.nb-ad__fenster[data-nb-ad-statisch] { position: fixed; inset: 0; z-index: 60; height: fit-content; }
.nb-ad__fenster-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-ad__fenster-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-ad__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 var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-ad__zu: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-ad__zu:hover { background: var(--nb-ink-300); } }
.nb-ad__zu:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-ad__zu svg { width: 20px; height: 20px; }
.nb-ad__fenster-fuss { padding: var(--nb-space-2xs) var(--nb-space-l) var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); }

/* S-Wahl-ohne-Fläche · Optionen im Fenster. Gewählt: Haken 20 px Night und „Gewählt“ muted, keine Fläche, kein Rand (KF:125, KT:547) */
.nb-ad__optionen { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 var(--nb-space-m); list-style: none; }
.nb-ad__optionen li + li { border-top: 1px solid var(--nb-border-hairline); }
.nb-ad__opt { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--nb-space-s); width: 100%; min-height: 64px; margin: var(--nb-space-3xs) 0; padding: var(--nb-space-s); border: 0; border-radius: var(--nb-radius-input); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-ad__opt:not(.is-aus):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-ad__opt:not(.is-aus):hover { background: var(--nb-ink-100); } }
.nb-ad__optionen .nb-ad__opt:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; } /* schlägt .nb-v3 :focus-visible, sonst Ring außen und oben abgeschnitten */
.nb-ad__opt.is-aus { cursor: default; }
.nb-ad__opt-text { flex: 1; display: grid; gap: var(--nb-space-3xs); min-width: 0; }
.nb-ad__opt.is-aus .nb-ad__name, .nb-ad__opt.is-aus .nb-ad__anschrift { color: var(--nb-text-muted); }
.nb-ad__marke { flex: none; display: inline-flex; align-items: center; gap: var(--nb-space-3xs); margin-top: 1px; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-ad__marke svg { width: 20px; height: 20px; color: var(--nb-text-heading); }
@media (max-width: 767px) {
  .nb-ad__fenster-kopf { padding-left: var(--nb-space-m); }
  .nb-ad__fenster-fuss { padding-inline: var(--nb-space-m); }
  .nb-ad__optionen { padding-inline: var(--nb-space-2xs); }
}
@media (prefers-reduced-motion: reduce) { .nb-ad__fenster::backdrop, .nb-ad__fenster:modal { animation: none; } }
/* Handy: Blatt von unten (Daniel 14.10.2026, tokens.json blatt, Vorbild Baukasten adresse). Volle Breite, oben gerundet,
   höchstens blatt-hoehe, Fuß über der Safe Area. Auf in motion-blatt mit fenster-kurve, zu in motion-blatt-aus */
@media (max-width: 767px) {
  .nb-ad__fenster { width: 100%; max-height: var(--nb-blatt-hoehe); margin: auto 0 0; border-radius: var(--nb-blatt-radius); }
  .nb-ad__fenster:modal { animation: nb-ad-blatt var(--nb-motion-blatt) var(--nb-motion-fenster-kurve) both; }
  .nb-ad__fenster .nb-ad__fenster-fuss { padding-bottom: var(--nb-blatt-unten); }
  @supports (overlay: auto) {
    .nb-ad__fenster:not([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-ad__fenster:not([open])::backdrop { transition-duration: var(--nb-motion-blatt-aus); }
  }
}
@keyframes nb-ad-blatt { from { transform: translateY(100%); } }


/* baukasten/sektionen/kasse-einstieg/sektion.css */
/* Einstieg der Kasse. Karte, Felder, „oder“, Anbieter-Knöpfe und Code-Kästen aus anmelden/sektion.css, Adressraster der
   Fassung c aus adresse/sektion.css (beide über CSS mitgeladen, K1 über kern/strecke.css und nb-f-karte).
   Neu nur die Anordnung: Breite je Fassung wie Login (520), Adresse (720) und Schale (nb-s-breit), Gast und Anmelden
   ab 1100 px nebeneinander im Verhältnis 7 zu 5 (Fassung a), Satz mit Zeichen 22 px Night in body-01 (G42, VORGABEN-kasse-token §1
   S-Aussage-Kacheln), Zeile „Anmelden“ als weiße Karte (G41, nichts steht frei). */

.nb-ke { box-sizing: border-box; width: 100%; margin-inline: auto; padding: var(--nb-space-l) var(--nb-s-rand) var(--nb-space-2xl); display: grid; gap: var(--nb-space-m); align-content: start; font-family: var(--nb-font-sans); }
@media (min-width: 1100px) { .nb-ke { padding-top: var(--nb-space-xl); } }
.nb-ke--a { max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); }
.nb-ke--b { max-width: calc(520px + 2 * var(--nb-s-rand)); }
.nb-ke--c { max-width: calc(720px + 2 * var(--nb-s-rand)); }
/* Schale ohne rechte Spalte: einspaltig (kern/strecke.css:19 setzt sonst 360 px rechts frei). Rand und Polster trägt die Schale,
   .nb-ke steht darin mittig in seiner Fassungsbreite */
.nb-schale--strecke:has(.nb-ke) { display: block; }
.nb-schale .nb-ke { padding: 0; max-width: none; }
.nb-schale .nb-ke--b { max-width: 520px; }
.nb-schale .nb-ke--c { max-width: 720px; }
.nb-ke [hidden] { display: none !important; }

.nb-ke__h2 { 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-ke__wege { display: grid; gap: var(--nb-space-m); align-items: start; }
@media (min-width: 1100px) { .nb-ke--a .nb-ke__wege { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--nb-space-l); } }

.nb-ke__satz { margin: 0; display: grid; grid-template-columns: 22px minmax(0, 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); }
.nb-ke__satz svg { width: 22px; height: 22px; color: var(--nb-text-heading); }

/* Anbieter-Zeilen dürfen am Handy zweizeilig werden */
.nb-ke .nb-anm__social-knopf { text-align: center; padding-block: var(--nb-space-2xs); }

.nb-ke__band { padding: var(--nb-space-m); }
.nb-ke__band .nb-f-meldung { font-size: var(--nb-t-body-02); }
.nb-ke__band .nb-f-meldung__aktion { margin-top: var(--nb-space-xs); }

/* c · Zeile zum Anmelden über der Adresse, klappt auf der Seite auf */
.nb-ke__zeile { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-s) var(--nb-space-m); }
.nb-ke__zeile-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--nb-space-s); }
.nb-ke__zeile-kopf p { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-ke__zeile-kopf .nb-f-knopf--text { min-height: 44px; }
.nb-ke__zeile-innen { display: grid; gap: var(--nb-space-s); padding-bottom: var(--nb-space-xs); }
.nb-ke__adresse .nb-ad__felder { padding: 0; }
@media (min-width: 768px) { .nb-ke__adresse .nb-ad__felder > .nb-ke__voll { grid-column: span 6; } }

/* Hover und Druck, die anmelden/sektion.css nicht hat. Druck ink-100 auf weißem Knopf wie die graue Pille im Druck (OE 94 Punkt 6),
   Link im Rechtssatz wie .nb-anm__link (text-link im Hover) */
@media (hover: hover) and (pointer: fine) { .nb-ke .nb-anm__recht a:hover { color: var(--nb-text-link); } }
.nb-ke .nb-anm__recht a { transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ke .nb-anm__recht a:active { color: var(--nb-text-heading); }
.nb-ke :is(.nb-anm__social-knopf, .nb-f-knopf--umriss):active { background: var(--nb-ink-100); transition: none; }
.nb-ke .nb-f-knopf--text:active { color: var(--nb-text-link); transition: none; }
/* Code-Schritt aus anmelden in der Kasse: Satz unter dem Code in body-01 (G42), „E-Mail-Adresse ändern“ mit 44 px Trefferfläche
   und Druckzustand (Brand-Soll ZIEL, DRUCK) */
.nb-ke .nb-anm__nachsenden { font-size: var(--nb-t-body-02); }
.nb-ke .nb-anm__nachsenden .nb-anm__link { display: inline-flex; align-items: center; min-height: 44px; }
.nb-ke .nb-anm__link:active { color: var(--nb-text-link); transition: none; }

/* D1 (PRUEFUNG-kasse 08.10.2026): in der Kasse tragen Google, PayPal und „Code zum Anmelden senden“ den Rand border-control
   (4,20:1, farbsystem Verbotszone „Haarlinie als Rand eines Bedienelements“) statt ink-300 (1,53:1, anmelden/sektion.css:50).
   Hover über Token statt #FBFBFD: Rand Night, Fläche ink-50, Druck bleibt ink-100 (oben). Nur für den Einstieg, das gewählte
   Login in anmelden/sektion.css bleibt unberührt (G35) */
.nb-ke .nb-anm__social-knopf { border-color: var(--nb-border-control); }
@media (hover: hover) and (pointer: fine) {
  .nb-ke :is(.nb-anm__social-knopf, .nb-f-knopf--umriss):hover { border-color: var(--nb-text-heading); background: var(--nb-ink-50); }
}

/* baukasten/sektionen/kasse-adresse/sektion.css */
/* Kasse · Adresse. Karte, Fenster, Formular und Felder aus adresse/sektion.css (über CSS mitgeladen, K1 über kern/strecke.css
   und kern/schale.css). Neu sind nur die Teile der Kasse: Kontakt, Rechnung, Packstation, Firma, Hinweis und Netz in der Karte.
   Werte nach VORGABEN-kasse-token §1 (S-Haken, S-Wahl-ohne-Fläche, Felder ink-100 in der weißen Karte), nur Token. */
.nb-ka-ad [hidden] { display: none !important; } /* wie adresse/sektion.css:82, eine Klasse mit display schlägt sonst hidden */

/* Neue weiße Karten: dieselbe Formularkarte wie im Ankauf, ohne Platz für den Stift */
.nb-ka-ad__karte { display: grid; gap: var(--nb-space-xs); }
.nb-ka-ad__rechnung { gap: 0; }
.nb-ka-ad__rechnung .nb-ka-ad__haken { padding: var(--nb-space-xs); }
.nb-ka-ad__re { display: grid; gap: var(--nb-space-xs); padding-top: var(--nb-space-2xs); }
.nb-ka-ad__re-satz { margin: 0 var(--nb-space-xs) var(--nb-space-xs); }

/* S-Haken mit Titel in body-01 Semibold und der Folge darunter in body-02 */
.nb-ka-ad__haken { align-items: start; }
.nb-ka-ad__haken > span:last-child { display: grid; gap: var(--nb-space-3xs); padding-top: 1px; }
.nb-ka-ad__haken b { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* Link „+ An Packstation oder Filiale“ und Hinweise in der Karte, auf der Kante des Kartentitels */
.nb-ka-ad__link { padding: 0 var(--nb-space-xs); }
.nb-ka-ad__link .nb-f-knopf--text { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-ka-ad__in-karte { margin: var(--nb-space-2xs) var(--nb-space-xs) 0; }
.nb-ka-ad__netz { display: grid; gap: var(--nb-space-2xs); justify-items: start; }

/* S-Wahl-ohne-Fläche oben im Formular (Fassung b Packstation, Fassung c Privat oder Unternehmen). Zeilen wie im Fenster */
.nb-ka-ad__wahl { flex: none; overflow: visible; padding: 0 var(--nb-space-2xs); }
.nb-ka-ad__wahl .nb-ad__opt { margin: var(--nb-space-3xs) 0; }
/* Fokus nach innen ohne Halo, auch im Fenster. Die Ankauf-Regel (adresse/sektion.css:96) verliert gegen kern/formular.css:104,
   der Prüfer zählt dort jede Klasse in :is() und :not() mit (7). Diese Regel trägt deshalb 8, der Ring stand sonst 1 bis 2 px
   abgeschnitten (FOKUSRAND in wahl und viele) */
.nb-ka-ad .nb-ka-ad__wahl .nb-ad__opt:focus-visible,
.nb-ka-ad .nb-ad__b .nb-ad__fenster .nb-ad__optionen .nb-ad__opt[data-nb-ad-nimm][aria-pressed]:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }
.nb-ka-ad__wahl .nb-ad__name { font-size: var(--nb-t-body-01); }

/* Packstation: die Felder stehen im Raster des Ankaufs und tauschen mit Straße, Hausnr. und Zusatz */
/* Nur im Formular der Lieferadresse, das Formular der Rechnung behält Straße und Hausnr. */
.nb-ka-ad .nb-ad__felder > .nb-ka-ad__ps { display: none; }
.nb-ka-ad.is-ps [data-nb-ad-formular] .nb-ad__felder > .nb-ka-ad__ps { display: block; }
.nb-ka-ad.is-ps [data-nb-ad-formular] .nb-ad__felder > :is(.nb-ad__strasse:not(.nb-ka-ad__ps), .nb-ad__nr:not(.nb-ka-ad__ps), .nb-ad__zusatz, .nb-ad__voll:has(#nb-zusatz), .nb-ka-ad__firma) { display: none; }
.nb-ka-ad__info { margin-top: var(--nb-space-2xs); color: var(--nb-text-body); }

/* Firma hinter dem Link: Feld, Haken und Satz zur Vorsteuer untereinander */
.nb-ka-ad__firma { display: grid; gap: var(--nb-space-s); }
.nb-ka-ad__firma .nb-ad__hinweis { margin-top: 0; }

/* Mail im Einstieg statt oben auf der Adresse (Schalter mail) */
[data-nb-mail="einstieg"] [data-nb-ka-mail] { display: none; }

/* baukasten/sektionen/eingabehilfe/sektion.css */
/* Eingabehilfen (vk-adress-vorschlaege, 28.09.2026). Liste aus nb-feld.css (.nb-dd__karte, .nb-dd__liste,
   .nb-dd__option, .nb-dd__gruppe), Werte design-auditor A: Zeile 2 body-02 text-muted, Bank neutral (a), wie
   .nb-anm__regel.is-erfuellt (b, nb-konto.css:271-272) oder im Feld (c). Jeder Wert ein Token. */

/* Werkstatt-Gerüst: zwei Blöcke wie Adresse und Auszahlung der Strecke */
.nb-eh { display: grid; gap: var(--nb-space-l); }
.nb-eh__block { display: grid; gap: var(--nb-space-s); }
.nb-eh__titel { margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-eh__felder { display: grid; gap: var(--nb-space-s); grid-template-columns: minmax(0, 1fr); }
.nb-eh__spalte { display: grid; gap: var(--nb-space-s); }
@media (min-width: 480px) {
  .nb-eh__felder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nb-eh__felder > .nb-ad__halb { grid-column: span 3; }
  .nb-eh__felder > .nb-ad__strasse, .nb-eh__felder > .nb-ad__ort { grid-column: span 4; }
  .nb-eh__felder > .nb-ad__nr, .nb-eh__felder > .nb-ad__plz { grid-column: span 2; }
}

/* ---------- Vorschlagsliste ---------- */
.nb-av.is-offen { position: relative; z-index: 7; }
/* Die Karte ist mindestens so breit, dass Straße und Ort nebeneinander passen, nie breiter als der Bildschirm */
/* Nur an der Straße, die links steht. Die Ortsliste rechts neben der PLZ bleibt feldbreit, sonst ragt sie aus dem Bild
   (design-auditor B, 29.09.2026) */
@media (min-width: 480px) {
  .nb-ad__strasse .nb-av__karte { right: auto; width: max(100%, min(360px, calc(100vw - 2 * var(--nb-space-s)))); }
}
/* Acht Vorschläge mit zwei Zeilen und der Hinweis passen ohne inneres Scrollen, am Handy höchstens bis kurz vor den Rand */
.nb-av__karte .nb-dd__liste { max-height: min(640px, calc(100vh - 160px)); }
.nb-av__option { font-weight: var(--nb-weight-regular); }
.nb-av__strasse { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-av__strasse b { font-weight: var(--nb-weight-semibold); }
.nb-av__ort { flex: none; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); font-variant-numeric: tabular-nums; }
.nb-av__hinweis { padding: var(--nb-space-xs) var(--nb-space-s) var(--nb-space-2xs); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-av__hinweis:not(.nb-av__hinweis--oben) { margin-top: var(--nb-space-2xs); border-top: 1px solid var(--nb-border-hairline); }
.nb-av__hinweis--oben { padding-top: var(--nb-space-2xs); }

/* a: zwei Zeilen */
[data-nb-vs-art="a"] .nb-av__zeilen { display: grid; gap: var(--nb-space-3xs); min-width: 0; }
[data-nb-vs-art="a"] .nb-av__option { padding-top: var(--nb-space-xs); padding-bottom: var(--nb-space-xs); }

/* c: Ort als Überschrift, in normaler Schreibung statt Versalien, weil es ein Name ist */
.nb-av__gruppe { letter-spacing: 0; text-transform: none; font-size: var(--nb-t-body-02); }

/* ---------- Bankname ---------- */
.nb-av-bank { display: flex; align-items: center; gap: var(--nb-space-2xs); margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; }
.nb-av-bank[hidden], .nb-fl.is-fehler [data-nb-bank-zeile] { display: none; }
.nb-av-bank svg { width: 16px; height: 16px; flex: none; }
.nb-av-bank--a { color: var(--nb-text-body); }
.nb-av-bank--a svg { color: var(--nb-text-muted); }
.nb-av-bank--b { color: var(--nb-success-text); }
.nb-av-bank--b svg { color: var(--nb-success-solid); }
/* c: im Feld rechts, die Eingabe macht Platz */
.nb-av-bank--c {
  position: absolute; right: var(--nb-space-s); top: 50%; transform: translateY(-50%); max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nb-text-muted); pointer-events: none;
}
[data-nb-vs-art="c"] .nb-fl.hat-bank .nb-fl__eingabe, [data-nb-vs-art="c"] .nb-fl:has(.nb-av-bank--c:not([hidden])) .nb-fl__eingabe { padding-right: calc(45% + var(--nb-space-s)); }
.nb-eh__weiter { display: flex; justify-content: flex-end; }
@media (max-width: 1099px) { .nb-eh__weiter { display: none; } }

/* baukasten/sektionen/versand/sektion.css */
/* Schritt 2 · Versand. Endwahl 28.09.2026 S-Aussage-Kacheln (komponenten-strecke-konto.md §11). Kacheln weiß mit Haarlinie
   (G21: weiß heißt Inhalt, nicht gewählt). Zeichen 22 px Night. Fassung a (gewählte Zeile) steht in git. */
.nb-vs { display: grid; gap: var(--nb-space-m); max-width: 720px; font-family: var(--nb-font-sans); }
.nb-vs__h1 { 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); text-wrap: balance; }

/* S-Aussage-Kacheln (Endwahl 28.09.2026) */
.nb-vs__titel { display: flex; align-items: center; gap: var(--nb-space-xs); margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-vs__titel svg { width: 22px; height: 22px; flex: none; }
.nb-vs__unter { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-vs__abgabe { margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-vs__kachel svg { width: 22px; height: 22px; flex: none; color: var(--nb-text-heading); }
.nb-vs__block { display: grid; gap: var(--nb-space-2xs); }
.nb-vs__gruppe { display: grid; gap: var(--nb-space-xs); }
.nb-vs__kacheln { display: grid; gap: var(--nb-space-xs); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-vs__kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-vs__kachel { display: grid; align-content: start; gap: var(--nb-space-2xs); padding: var(--nb-space-m); background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-vs__kachel b { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* Zusage: Zeichen und Satz in Night, kein Kasten (G17) */
.nb-vs__zusage { display: flex; gap: var(--nb-space-xs); align-items: flex-start; margin: 0; font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-heading); }
.nb-vs__zusage svg { width: 22px; height: 22px; flex: none; }

.nb-vs__aktion { display: grid; }
@media (min-width: 768px) { .nb-vs__aktion { justify-items: start; } .nb-vs__aktion .nb-f-knopf--breit { width: auto; min-width: 240px; } }

/* baukasten/sektionen/auszahlung/sektion.css */
/* Schritt 3 · Auszahlung, Endwahl d ohne Blau, c zum Vergleich (S-Auswahl-aufklappend, komponenten-strecke-konto.md §11). H1 heading-01 (typografie.md:82), Kartentitel heading-03, Beträge tnum.
   Auswahlkarte min. 64 px, Polster 24, Abstand 12 (komponenten-tradein.md:40, 57-58).
   Gewählt: surface-stage, 1 px sky-500, Haken Signal 4,34:1 (komponenten-tradein.md:54-61). Kein Lift (:68). */
.nb-az { display: grid; gap: var(--nb-space-m); max-width: 720px; font-family: var(--nb-font-sans); }
.nb-az__h1 { 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); text-wrap: balance; }
.nb-az__wahl { display: grid; gap: var(--nb-space-xs); margin: 0; padding: 0; border: 0; min-width: 0; }

.nb-az__karte {
  background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card);
  transition: background var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve);
}
.nb-az__karte:has(.nb-az__kopf:active) { scale: var(--nb-motion-druck-scale-breit); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); } /* Druck, Fassung C 09.10.2026 */
/* Hover ink-100 wie die Option der Aufklappliste (komponenten-formular.md:124). #FBFBFD war gegen Weiß 1,03:1, unsichtbar (design-auditor 28.09.2026) */
@media (hover: hover) and (pointer: fine) { .nb-az__karte:hover { border-color: var(--nb-ink-300); background: var(--nb-ink-100); } }
.nb-az__karte:has(input:checked) { background: var(--nb-surface-stage); border-color: var(--nb-sky-500); }
.nb-az__kopf { position: relative; display: flex; align-items: flex-start; gap: var(--nb-space-s); min-height: 64px; box-sizing: border-box; padding: var(--nb-space-m); cursor: pointer; }
.nb-az__kopf input { position: absolute; opacity: 0; width: 1px; height: 1px; transition: outline-color var(--nb-motion-farbe) var(--nb-motion-kurve); } /* versteckt, der Übergang liegt sichtbar auf Karte und Kreis */
.nb-az__kopf:has(input:focus-visible) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-az__text { display: grid; gap: var(--nb-space-3xs); flex: 1; min-width: 0; }
.nb-az__erste { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--nb-space-2xs) var(--nb-space-s); }
.nb-az__titel { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-az__betrag { font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-az__zeile { font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
/* Aufschlag als eigene Zeile, nicht Mint (farbsystem.md:201), Night mit Semibold */
.nb-az__mehr { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
/* Guthaben noch nicht wählbar (Daniel 06.10.2026): Zeile ohne Eingabe, ausgegraut, Pille leise wie .nb-s-pille--leise */
.nb-az__karte--bald { pointer-events: none; }
.nb-az__karte--bald .nb-az__titel, .nb-az__karte--bald .nb-az__betrag, .nb-az__karte--bald .nb-az__mehr { color: var(--nb-text-muted); }
.nb-az__karte--bald .nb-az__radio { opacity: .4; }
.nb-az__bald { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); color: var(--nb-text-muted); font-size: 14px; font-weight: var(--nb-weight-semibold); line-height: 1.2; white-space: nowrap; } /* Handy-Gesamtprüfung 14.10.2026: 14 px wie m-merkmal (komponenten-global.md §1), legal-01 nur für Rechtstext */
.nb-az__innen { padding: 0 var(--nb-space-m) var(--nb-space-m); }
.nb-az__karte:not(:has(input:checked)) .nb-az__innen { display: none; }
.nb-az__felder { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); }
/* Auf Weiß, weil critical-text auf surface-stage nur 4,45:1 erreicht (pruefen.mjs 26.09.2026) */
.nb-az__maske { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-2xs) var(--nb-space-m); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); }
.nb-az__maske-zeile { display: flex; gap: var(--nb-space-xs); align-items: flex-start; margin: 0; }
.nb-az__maske-zeile svg { width: 22px; height: 22px; flex: none; color: var(--nb-text-heading); }
.nb-az__maske-zeile > span { display: grid; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-az__maske-zeile b { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }

/* Auswahlkreis, überall gleich (Daniel 08.10.2026: „mach einfach das, was du gut findest, aber überall dasselbe“). Rand 2 px
   Night statt border-control (Kontrast wie Back Market, Kasse Zahlung f), gewählt ein Ring mit 7 px Rand in Signal und weißem
   Kern statt Punkt. Gilt für Ankauf Auszahlung, Kasse Versand und Kasse Zahlung, Werte komponenten-strecke-konto.md §11 */
.nb-az__radio { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; box-sizing: border-box; border: 2px solid var(--nb-text-heading); border-radius: 50%; background: var(--nb-surface-page); transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), border-width var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-az__kopf:has(input:checked) .nb-az__radio { border-width: 7px; border-color: var(--nb-action-primary); }

/* Liste in einer Karte, Grundlage für c und d (S-Auswahl-aufklappend, d ist die Endwahl) */
.nb-az__wahl--liste { gap: 0; background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); overflow: hidden; }
.nb-az__wahl--liste .nb-az__karte { border: 0; border-radius: 0; box-shadow: none; }
.nb-az__wahl--liste .nb-az__karte + .nb-az__karte { border-top: 1px solid var(--nb-border-hairline); }
/* Gewählte Zeile: Rand 0 in der Liste, deshalb 1 px sky-500 als inset-Schatten wie in adresse und versand. Fokus nach innen, weil overflow: hidden den Ring außen abschneidet (design-auditor 28.09.2026) */
.nb-az__wahl--liste .nb-az__karte:has(input:checked) { box-shadow: inset 0 0 0 1px var(--nb-sky-500); }
.nb-az__wahl--liste .nb-az__kopf:has(input:focus-visible) { border-radius: 0; outline-offset: -2px; }
/* Ring folgt in der ersten und letzten Zeile dem Radius der Karte (design-auditor B 28.09.2026) */
.nb-az__wahl--liste .nb-az__karte:first-of-type .nb-az__kopf:has(input:focus-visible) { border-radius: var(--nb-radius-card) var(--nb-radius-card) 0 0; }
.nb-az__wahl--liste .nb-az__karte:last-of-type > .nb-az__kopf:last-child:has(input:focus-visible),
.nb-az__wahl--liste .nb-az__karte:last-of-type:not(:has(input:checked)) .nb-az__kopf:has(input:focus-visible) { border-radius: 0 0 var(--nb-radius-card) var(--nb-radius-card); }

.nb-az__aktion { display: grid; }
@media (min-width: 768px) { .nb-az__aktion { justify-items: start; } .nb-az__aktion .nb-f-knopf--breit { width: auto; min-width: 240px; } }


/* d · Endwahl 28.09.2026 abends (Daniel: „natürlich das zweite Bild“): wie c ohne blaue Fläche. Gewählt zeigt nur der
   gefüllte Kreis (Signal, zweites Merkmal der Punkt). Die Felder brauchen keinen weißen Innenkasten, sie stehen grau
   direkt auf der weißen Karte (komponenten-formular.md §2) */
.nb-az__wahl--ohne-blau .nb-az__karte:has(input:checked) { background: var(--nb-surface-page); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .nb-az__wahl--ohne-blau .nb-az__karte:not(:has(input:checked)):hover { background: var(--nb-ink-100); } }
.nb-az__wahl--ohne-blau .nb-az__felder, .nb-az__wahl--ohne-blau .nb-az__maske { padding: 0; }

/* baukasten/sektionen/pruefen/sektion.css */
/* Schritt 4 · Prüfen. Endwahl 28.09.2026: S-Prüfliste mit S-Haken, S-Band-warn, S-Rechtssatz und S-Knopf-lädt
   (design/werte/komponenten-strecke-konto.md §11). Eine Spalte, höchstens 720 px. Verworfene Fassungen
   (vier Karten, drei Sätze, Band weiß, Text statt Spinner, Haken 1 px) stehen in git vor dem Commit „Werkstatt strecke fertig“. */
.nb-pr { display: grid; gap: var(--nb-space-m); max-width: 720px; font-family: var(--nb-font-sans); }
.nb-pr__h1 { 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); text-wrap: balance; }
.nb-pr p { margin: 0; }
.nb-pr b { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pr__iban { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-pr__geraet { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* S-Prüfliste · eine weiße Karte, Zeilen mit Haarlinie, Name links, Stift rechts */
.nb-pr__liste { margin: 0; background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); }
.nb-pr__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--nb-space-s); row-gap: var(--nb-space-3xs); padding: var(--nb-space-s) var(--nb-space-m); }
.nb-pr__zeile + .nb-pr__zeile { border-top: 1px solid var(--nb-border-hairline); }
.nb-pr__name { grid-column: 1; align-self: center; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pr__stift { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
.nb-pr__wert { grid-column: 1 / -1; margin: 0; display: grid; justify-items: start; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
@media (min-width: 768px) {
  .nb-pr__zeile { grid-template-columns: 140px minmax(0, 1fr) auto; }
  .nb-pr__name { align-self: start; padding-top: 2px; }
  .nb-pr__wert { grid-column: 2; grid-row: 1; }
  .nb-pr__stift { grid-column: 3; align-self: start; margin-top: -12px; }
}

/* Deine Angaben zum Aufklappen, die Fragen auf ink-100 */
.nb-pr__angaben { width: 100%; }
.nb-pr__angaben summary { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 44px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; list-style: none; }
.nb-pr__angaben summary::-webkit-details-marker { display: none; }
.nb-pr__angaben summary svg { width: 16px; height: 16px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-pr__angaben[open] summary svg { transform: rotate(180deg); }
.nb-pr__angaben summary:focus-visible, .nb-pr__hilfe summary:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-badge); }
.nb-pr__fragen { display: grid; gap: 0; margin: 0 0 var(--nb-space-xs); padding: var(--nb-space-2xs) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-pr__fragen div { display: grid; gap: var(--nb-space-3xs); padding: var(--nb-space-xs) 0; font-size: var(--nb-t-body-02); line-height: 1.45; }
.nb-pr__fragen div + div { border-top: 1px solid var(--nb-border-hairline); }
.nb-pr__fragen dt { color: var(--nb-text-muted); }
.nb-pr__fragen dd { margin: 0; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pr__angaben-unter { font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-pr a:not(.nb-f-stift):not(.nb-knopf) { color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-pr a:not(.nb-f-stift):not(.nb-knopf):hover { text-decoration-color: currentColor; } }

/* S-Band-warn · Preis geändert. Warnfläche, Maße wie das Konto-Band (band/sektion.css, KSK §7), Zeichen Night (G8) */
.nb-pr__band { display: flex; gap: var(--nb-space-xs); align-items: flex-start; padding: var(--nb-space-m); border: 1px solid var(--nb-warning-bg); border-radius: var(--nb-radius-card); background: var(--nb-warning-bg); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-pr__band svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--nb-text-heading); }
@media (max-width: 767px) { .nb-pr__band { padding: var(--nb-space-s); } }

/* Warten nach dem Zeitlimit */
.nb-pr__warten { display: flex; gap: var(--nb-space-xs); align-items: center; min-height: 44px; font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }

/* S-Haken · Kasten 2 px aus kern/formular.css, freiwillige mit „(freiwillig)“, Fehler je Haken */
.nb-pr__bestaetigen { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; border: 0; min-width: 0; }
.nb-pr__haken { display: grid; gap: var(--nb-space-3xs); }
.nb-pr__haken .nb-f-haken { font-size: var(--nb-t-body-01); color: var(--nb-text-heading); }
.nb-pr__haken.is-fehler .nb-f-haken__kasten { border: 2px solid var(--nb-critical-solid); }
/* Fehler und Tastaturfokus: der Ring legt sich über den roten Rand, eine Linie statt zwei */
.nb-pr__haken.is-fehler input:focus-visible + .nb-f-haken__kasten { outline-offset: -2px; }
.nb-pr__freiwillig { color: var(--nb-text-muted); }
.nb-pr__haken-fehler { display: flex; gap: var(--nb-space-2xs); align-items: flex-start; margin: 0 0 0 calc(24px + var(--nb-space-xs)); font-size: 13px; line-height: 1.45; color: var(--nb-critical-text); } /* 13 px wie feldstil/sektion.css:58, kein Token (Lücke, typografie.md §3) */
.nb-pr__haken-fehler[hidden] { display: none; }
.nb-pr__haken-fehler svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.nb-pr__hilfe { margin-left: calc(24px + var(--nb-space-xs)); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-pr__hilfe summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; cursor: pointer; list-style: none; }
.nb-pr__hilfe summary::-webkit-details-marker { display: none; }
.nb-pr__hilfe ol { display: grid; gap: var(--nb-space-2xs); margin: 0 0 var(--nb-space-xs); padding-left: 1.25em; }

/* S-Rechtssatz direkt über dem Knopf */
.nb-pr__recht { font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--nb-text-body); }

.nb-pr__aktion { display: grid; }
@media (min-width: 768px) { .nb-pr__aktion { justify-items: start; } .nb-pr__aktion .nb-f-knopf--breit { width: auto; min-width: 240px; } }

/* S-Knopf-lädt · Fläche bleibt Signal (farbsystem.md:392), die .4 aus kern/formular.css:39 gilt hier nicht, Weiß auf
   Signal 5,24:1. Beschriftung unsichtbar für die Breite, weißer Spinner darüber (motion-drehung, 800 ms linear) */
.nb-pr .nb-pr__knopf.is-laeuft { cursor: progress; opacity: 1; }
/* Gesperrt bleibt klickbar, damit der Klick die Meldung am fehlenden Haken zeigt (ux-pruefer 28.09.2026) */
.nb-pr [data-nb-pr-knopf][aria-disabled="true"] { pointer-events: auto; cursor: pointer; }
.nb-pr__laeuft-kreis { position: relative; display: inline-grid; }
.nb-pr__platz { visibility: hidden; }
.nb-pr__laeuft-kreis > .nb-pr__kreis { position: absolute; inset: 0; margin: auto; }
.nb-pr__kreis { display: inline-block; flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nb-pr-dreh 800ms linear infinite; }
@keyframes nb-pr-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nb-pr__kreis { animation-duration: 2400ms; } }

/* baukasten/sektionen/kasse-zahlung/sektion.css */
/* Kasse · Zahlung (Werkstatt kasse, 08.10.2026). Die Zeilen sind S-Auswahl-aufklappend aus auszahlung/sektion.css (Fassung d,
   über CSS mitgeladen), Prüfliste, Rechtssatz und Band aus pruefen/sektion.css. Hier nur, was die Kasse neu braucht:
   eine weiße Karte (nb-f-karte, K1) mit den schnellen Knöpfen oben und der Liste darunter, Logos, Guthaben-Zeile,
   Gast-Zeile, das i am Feld und die Fassungen b (Knöpfe Night), c (Kacheln) und d (zwei Gruppen).
   Werte: VORGABEN-kasse-token §1 (S-Auswahl-aufklappend, Felder, Fokus, Motion) und §5 (Logos 38 × 24, Wallet-Knöpfe) */

.nb-kz { display: grid; gap: var(--nb-space-m); max-width: 720px; font-family: var(--nb-font-sans); }
.nb-kz [hidden] { display: none !important; }
.nb-kz p { margin: 0; }
.nb-kz b { font-weight: var(--nb-weight-semibold); }
.nb-kz__h1 { 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); text-wrap: balance; }
.nb-kz__h2 { margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-kz__teil { display: grid; gap: var(--nb-space-s); }

/* Eine weiße Karte (K1). Innen kehrt sich alles um: Felder ink-100, Knöpfe mit Kontur, Trenner als Haarlinie */
.nb-kz__karte { overflow: hidden; border-width: 0; border-radius: var(--nb-radius-card); }
.nb-strecke-seite[data-nb-grund] .nb-kz__karte .nb-az__wahl--liste { background: none; border-width: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.nb-kz__karte .nb-az__wahl--liste .nb-az__kopf:has(input:focus-visible) { border-radius: 0; }
.nb-kz__trenner { border-top: 1px solid var(--nb-border-hairline); }
/* Ohne Knopfreihe darüber (gestrichen 14.10.2026) läge die Linie an der Oberkante der Karte, quer über die Ecken (Daniel 14.10. abends) */
.nb-kz__karte > .nb-kz__trenner:first-child { border-top: 0; }

/* Schnelle Knöpfe. Ab 768 px nebeneinander, am Handy untereinander. Fehlt Apple Pay, rücken die anderen ohne Lücke zusammen */
.nb-kz__schnell { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); padding: var(--nb-space-m); }
@media (max-width: 767px) { .nb-kz__schnell { flex-direction: column; padding: var(--nb-space-s); } }
.nb-kz__wallet { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); flex: 1 1 auto; min-height: 48px; box-sizing: border-box; padding: 0 var(--nb-space-m); border-radius: var(--nb-radius-pill); white-space: nowrap; font-family: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; cursor: pointer; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kz__wallet:active { background: var(--nb-ink-200); }
.nb-kz__wallet img { flex: none; width: 38px; height: 24px; }
/* Apple Pay im Original. Safari zeichnet ihn selbst, Typ plain (nur  Pay, Daniel 14.10.2026: mit Text war der Inhalt zu groß), Stil black
   (Daniel 14.10.2026, erst weiß gewählt, dann „gibt es keinen dunklen?“), Höhe fest 48 px, sonst wird er flach, Ecke wie die Nachbarknöpfe. Ohne Unterstützung bleibt er weg, ein nachgebauter Knopf ist bei Apple nicht erlaubt */
@supports (-webkit-appearance: -apple-pay-button) {
  .nb-kz__wallet--apple { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: black; height: 48px; padding: 0; border: 0; background: none; box-shadow: none; }
}
@supports not (-webkit-appearance: -apple-pay-button) { .nb-kz__wallet--apple { display: none; } }
/* PayPal wie PayPals eigener Knopf (Low-Code-Knopf von PayPal: #FFD140), Original-Wortmarke, Druck dunkler. Markenfarbe von PayPal,
   kein Token von uns (Daniel 14.10.2026: überall Originale) */
.nb-kz__wallet--paypal { border: 0; background: #FFD140; }
.nb-kz__wallet--paypal img { width: 68px; height: 24px; }
.nb-kz__wallet--paypal:active { background: #F2C230; }
@media (hover: hover) and (pointer: fine) { .nb-kz__wallet--paypal:hover { background: #F2C230; } }
/* Google Pay im Original: Googles Knopf füllt den Platz, Höhe und Ecke wie die Nachbarn. Der Platz steht im ersten HTML, damit nichts springt */
.nb-kz__gpay { padding: 0; border: 0; background: none; height: 48px; overflow: hidden; }
.nb-kz__gpay > :not(button) { width: 100%; height: 100%; }
/* U10: eine Regel für Warenkorb und Zahlung, Apple Pay nur auf Apple-Geräten, Google Pay nur auf anderen */
[data-nb-geraet="andere"] .nb-kz__wallet--apple, [data-nb-geraet="apple"] .nb-kz__wallet--google { display: none; }
/* Zahlseite: Apple Pay nur am Apple-Geraet, Google Pay ueberall (Daniel 16.10.2026) */
[data-nb-geraet="andere"] [data-nb-kz-art="apple"] { display: none; }
/* b · Night gefüllt (Bruch farbsystem.md:69 und 674). Reines Schwarz ist für Flächen verboten (farbsystem.md:675) */
.nb-kz--schwarz .nb-kz__wallet { border: 1px solid var(--nb-night); background: var(--nb-night); color: var(--nb-text-on-dark); }
@media (hover: hover) and (pointer: fine) { .nb-kz--schwarz .nb-kz__wallet:hover { border-color: var(--nb-surface-dark-raised); background: var(--nb-surface-dark-raised); } }
.nb-kz--schwarz .nb-kz__wallet:active { background: var(--nb-surface-dark-raised); }

/* Logos 38 × 24 mit weißer Platte (VORGABEN-kasse-token §5), alle im Original */
.nb-kz__logos { display: inline-flex; flex-wrap: wrap; gap: var(--nb-space-3xs); }
.nb-kz__logos img, .nb-kz__wallet svg { display: block; width: 38px; height: 24px; flex: none; }
/* Logos bleiben rechts neben dem Namen, auch wenn er umbricht. Am Handy rutschte das PayPal-Logo unter „Mit PayPal jetzt
   oder in Raten zahlen“, Klarna stand rechts (Daniel 11.10.2026, mobile Runde 1) */
.nb-kz .nb-az__erste { flex-wrap: nowrap; }
/* Kreis, Titel und Logos mittig auf einer Höhe (Daniel 14.10.2026: „zentriert vom Punkt“, ohne Unterzeilen). Bricht ein Titel
   um, steht der Kreis mittig zu beiden Zeilen. Vorher zog die Grundlinie den Titel an die Unterkante der Logos */
.nb-kz .nb-az__kopf { align-items: center; }
.nb-kz .nb-az__kopf .nb-az__radio { margin-top: 0; }
.nb-kz .nb-az__erste { align-items: center; }
.nb-kz .nb-az__erste .nb-az__titel { line-height: 24px; }
.nb-kz .nb-az__erste .nb-az__titel { flex: 1 1 auto; min-width: 0; }
.nb-kz .nb-az__erste .nb-kz__logos { flex: none; justify-content: flex-end; }
/* Unter 400 px stehen die drei Kartenlogos zwei und eins, jedes behält 38 px */
/* Drei Kartenlogos in einer Reihe, auch unter 400 px (Daniel 14.10.2026, ohne Unterzeilen ist Platz). Vorher höchstens zwei */
/* Bedingungen gleich neben der Zahlart (EuGH C-100/24), deshalb text-body statt muted */
.nb-kz__bedingung { font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-kz .nb-az__karte--bald .nb-kz__bedingung { color: var(--nb-text-heading); }
.nb-kz .nb-az__karte--bald .nb-kz__logos { opacity: .4; }

/* Inhalt einer gewählten Zeile. Felder grau direkt auf Weiß (komponenten-formular.md §2), Sätze body-01 */
.nb-kz__felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nb-space-s); }
.nb-kz__felder > .nb-fl { grid-column: 1 / -1; }
.nb-kz__felder > .nb-kz__halb { grid-column: auto; }
/* Kartenfelder von Mollie Components (Shop, js/nb-kasse-karte.js). Mollie hängt ein iframe in .nb-kz__mollie und setzt dort
   has-focus, is-dirty, is-invalid, is-touched. Optik wie jedes Feld (komponenten-formular.md): graue Fläche, Label im Feld,
   im Fokus einen Hauch dunkler, Fehler färbt das Feld. Die Schrift im iframe setzt das Skript (16 px Night) */
/* Tippfläche (Daniel 14.10.2026 abends: Tastatur ging zu): Mollie macht sein iframe so hoch wie lineHeight. Mit 44 px ab 12 px
   Abstand füllt es das Feld bis unten, vorher waren es 18 bis 24 px in 56 und jeder Tipp daneben nahm den Fokus weg. Den
   Rest fängt nb-kasse-karte.js ab. multiply legt das Weiß, das Chrome beim Autofill ins iframe malt, auf unsere Fläche */
.nb-kz__mollie { padding-top: 12px; padding-bottom: 0; cursor: text; overflow: hidden; }
.nb-kz__mollie iframe { display: block; width: 100%; mix-blend-mode: multiply; }
/* Aufblitzen beim Wählen von Kreditkarte (Daniel 17.10.2026: „ein Artefakt in jedem Eingabefeld für eine Millisekunde“). Live
   gemessen: beim ersten Öffnen stehen die iframes rund 650 ms mit 18 px im Feld, bis Mollie sie auf 44 px zieht, beim erneuten
   Öffnen malt Chrome sie nach display none neu. js/nb-kasse-karte.js setzt is-laedt, bis jedes iframe seine Höhe hat und 100 ms
   vergangen sind, dann blendet es ein */
.nb-kz__mollie iframe { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
[data-nb-kz-felder].is-laedt .nb-kz__mollie iframe { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .nb-kz__mollie iframe { transition: none; } }
/* Ein div zeigt nie :placeholder-shown, die Feldregel hob das Label deshalb immer hoch. Leer und ohne Fokus bleibt es im Feld.
   Die Klassen setzt js/nb-kasse-karte.js aus Mollies Ereignissen focus, blur und change */
.nb-fl .nb-kz__mollie:not(.has-focus, .is-focused, .is-dirty) + .nb-fl__label { transform: none; color: var(--fl-label); }
.nb-kz__mollie:is(.has-focus, .is-focused, .is-dirty) + .nb-fl__label { transform: translateY(-10px) scale(.75); color: var(--fl-label-oben); }
.nb-kz__mollie:is(.has-focus, .is-focused) { background: var(--fl-grund-aktiv); }
.nb-kz__mollie:is(.has-focus, .is-focused) + .nb-fl__label { color: var(--fl-label-fokus); }
@media (hover: hover) and (pointer: fine) { .nb-fl .nb-kz__mollie:hover { background: var(--fl-grund-aktiv); } }
.nb-fl.is-fehler .nb-kz__mollie { background: var(--nb-critical-bg); }
.nb-kz__felder[hidden], [data-nb-kz-netz][hidden] { display: none; }
/* Bei 320 px waren die halben Felder 112 px breit, „Ablauf MM/JJ“ und „Prüfnummer“ wurden abgeschnitten. Unter 360 px
   untereinander. Der Info-Knopf darunter bricht dort in zwei Zeilen, links bündig und ohne den negativen Rand, der über
   das Feld ragte (Daniel 11.10.2026, mobile Runde 1) */
@media (max-width: 359px) { .nb-kz__felder > .nb-kz__halb { grid-column: 1 / -1; } }
@media (max-width: 479px) { .nb-kz .nb-kz__i { margin-block: var(--nb-space-2xs) 0; text-align: left; line-height: 1.4; } }
.nb-kz__satz { font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-heading); }
.nb-kz__innen { display: grid; gap: var(--nb-space-s); }
/* Platzhalter hält die Höhe der Kartenfelder, bis das Skript von Mollie da ist: drei graue Flächen in Form und Maß der
   Felder (56 px, radius-input), direkt auf der weißen Karte, ohne Rand und ohne eigene Karte (Umkehr) */
.nb-kz .nb-f-platz--karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nb-space-s); min-height: 124px; padding: 0; border-width: 0; border-radius: 0; }
.nb-kz .nb-f-platz--karte .nb-f-platz__zeile { width: auto; height: 56px; border-radius: var(--nb-radius-input); }
.nb-kz .nb-f-platz--karte .nb-f-platz__zeile--0 { grid-column: 1 / -1; }

/* i am Feld: Wort plus Zeichen, der Satz liegt als schwebende Karte darüber (Muster guthaben-stand b4, natives popover) */
.nb-kz__i { justify-self: start; display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 44px; margin: calc(-1 * var(--nb-space-2xs)) 0; padding: 0; border: 0; background: none; color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-decoration-thickness: 1px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve), text-decoration-thickness var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kz__i svg { flex: none; width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .nb-kz__i:hover { text-decoration-thickness: 2px; } }
#nb-ka-form .nb-kz__i:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-input); }
.nb-kz__i-karte { width: min(340px, calc(100vw - 32px)); margin: 0; padding: var(--nb-space-s); border: 0; border-radius: var(--nb-radius-input); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); color: var(--nb-text-heading); font-family: var(--nb-font-sans); font-size: var(--nb-t-body-01); line-height: 1.5; opacity: 0; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), display var(--nb-motion-farbe) var(--nb-motion-kurve) allow-discrete, overlay var(--nb-motion-farbe) var(--nb-motion-kurve) allow-discrete; }
/* Auf mit Weg und Deckkraft wie jedes schwebende Fenster (Daniel 14.10.2026 abends: „nach vorne ohne Animation“), zu weich */
.nb-kz__i-karte:popover-open { opacity: 1; transform-origin: top left; animation: nb-kz-i-auf var(--nb-motion-fenster) var(--nb-motion-fenster-kurve) both; }
@keyframes nb-kz-i-auf { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .nb-kz__i-karte:popover-open { animation-name: nb-vi-weich !important; animation-duration: var(--nb-motion-farbe) !important; } }
@supports (position-anchor: --a) {
  #nb-kz-i-karte-knopf { anchor-name: --nb-kz-i-karte; }
  #nb-kz-i-karte { position-anchor: --nb-kz-i-karte; }
  .nb-kz__i-karte { inset: auto; top: anchor(bottom); left: anchor(left); margin-top: var(--nb-space-3xs); }
  @media (max-width: 767px) { .nb-kz__i-karte { left: var(--nb-space-s); right: var(--nb-space-s); width: auto; } }
}

/* „Weitere Zahlarten“ als letzte Zeile der Liste, Textknopf in Night */
.nb-kz__weitere { display: flex; align-items: center; gap: var(--nb-space-2xs); width: 100%; min-height: 64px; box-sizing: border-box; margin: 0; padding: 0 var(--nb-space-m); border: 0; border-top: 1px solid var(--nb-border-hairline); background: none; color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); text-align: left; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kz__weitere svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .nb-kz__weitere:hover { color: var(--nb-text-heading); } }
#nb-ka-form .nb-kz__weitere:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }

/* Guthaben über der Liste (S-Haken), Gast-Zeile als letzte Zeile der Karte */
.nb-kz__guthaben { display: grid; gap: var(--nb-space-2xs); padding: var(--nb-space-m); border-width: 0; border-radius: var(--nb-radius-card); }
.nb-kz__guthaben .nb-f-haken { font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
.nb-kz__guthaben b { font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; }
.nb-kz__guthaben .nb-kz__satz { padding-left: calc(24px + var(--nb-space-xs)); }
.nb-kz__gast { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--nb-space-2xs); padding: var(--nb-space-2xs) var(--nb-space-m); border-top: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
.nb-kz__gast a { display: inline-flex; align-items: center; min-height: 44px; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-underline-offset: 4px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kz__gast a:hover { color: var(--nb-text-link); } }
#nb-ka-form .nb-kz__gast a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; border-radius: var(--nb-radius-badge); }

/* Meldung „Wähl eine Zahlart“ in der Karte über der Liste */
.nb-kz__fehlt { padding: var(--nb-space-s) var(--nb-space-m) 0; }

/* Gesperrter Hauptknopf bleibt klickbar und zeigt dann die Meldung (VORGABEN-kasse-ux Q5) */
.nb-kz [data-nb-hauptknopf][aria-disabled="true"], button[form="nb-ka-form"][aria-disabled="true"] { pointer-events: auto; cursor: pointer; }
.nb-kz__aktion { display: grid; gap: var(--nb-space-s); }
@media (min-width: 768px) { .nb-kz__aktion { justify-items: start; } .nb-kz__aktion .nb-f-knopf--breit { width: auto; min-width: 240px; } }
/* S13 · S-Knopf-lädt wie in kasse-pruefen (pruefen/sektion.css:73): die Fläche bleibt Signal, der Spinner liegt über der
   unsichtbaren Beschriftung. Gilt auch für den Knopf der Zusammenfassung, der dasselbe Formular abschickt */
.nb-kz .nb-pr__knopf.is-laeuft, button[form="nb-ka-form"].nb-pr__knopf.is-laeuft { cursor: progress; opacity: 1; }
/* e · K1: bestellt wird nur über „Zahlungspflichtig bestellen“ unter Pflichtblock und Bestellung. Der Knopf der
   Zusammenfassung und die Leiste unten fehlen, am Handy steht der Knopf in der Hauptspalte, die Schale braucht unten keinen
   Platz für die Leiste (wie kasse-pruefen/sektion.css:59-61) */
.nb-schale--strecke:has(form.nb-kz--e) .nb-schale__seite .nb-zf__aktion { display: none; }
.nb-kz--e [data-nb-hauptknopf] { white-space: normal; text-wrap: balance; }
@media (max-width: 1099px) {
  .nb-schale--strecke:has(form.nb-kz--e) .nb-schale__seite .nb-zf__unten { display: none; }
  .nb-schale--strecke:has(form.nb-kz--e) form.nb-kz--e > .nb-kz__aktion.nb-knopfort--haupt { display: grid; transition: none; }
  .nb-schale--strecke.nb-schale--strecke:has(form.nb-kz--e):has(.nb-zf__unten) { padding-bottom: var(--nb-space-2xl); }
}

/* c · Kacheln 2 × 2 ohne Kreis wie rebuy. Kachel ink-100 in der weißen Karte (Umkehr), gewählt zeigen Haken und „Gewählt“
   ohne Fläche (S-Wahl-ohne-Fläche), Hover ink-200 */
.nb-kz__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-xs); margin: 0; padding: var(--nb-space-m); border: 0; min-width: 0; }
@media (max-width: 767px) { .nb-kz__kacheln { padding: var(--nb-space-s); } }
.nb-kz__kachel { position: relative; display: grid; align-content: start; gap: var(--nb-space-3xs); min-height: 112px; box-sizing: border-box; padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kz__kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
@media (hover: hover) and (pointer: fine) { .nb-kz__kachel:hover { background: var(--nb-ink-200); } }
.nb-kz__kachel:has(input:focus-visible) { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; }
.nb-kz__kachel-name { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kz__kachel .nb-kz__logos { min-height: 24px; }
.nb-kz__gewaehlt { display: none; align-items: center; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-kz__gewaehlt svg { width: 20px; height: 20px; color: var(--nb-text-heading); }
.nb-kz__kachel:has(input:checked) .nb-kz__gewaehlt { display: inline-flex; }
.nb-kz__kachel--bald { pointer-events: none; }
.nb-kz__kachel--bald .nb-kz__kachel-name, .nb-kz__kachel--bald .nb-kz__logos { opacity: .4; }
.nb-kz__kacheln .nb-kz__weitere { grid-column: 1 / -1; min-height: 48px; padding: 0; border-top: 0; }
.nb-kz__kachel-innen { display: none; padding: 0 var(--nb-space-m) var(--nb-space-m); }
@media (max-width: 767px) { .nb-kz__kachel-innen { padding: 0 var(--nb-space-s) var(--nb-space-s); } }
.nb-kz--c:has(input[value="karte"]:checked) .nb-kz__kachel-innen[data-nb-kz-art="karte"],
.nb-kz--c:has(input[value="rechnung"]:checked) .nb-kz__kachel-innen[data-nb-kz-art="rechnung"],
.nb-kz--c:has(input[value="raten"]:checked) .nb-kz__kachel-innen[data-nb-kz-art="raten"],
.nb-kz--c:has(input[value="paypal"]:checked) .nb-kz__kachel-innen[data-nb-kz-art="paypal"],
.nb-kz--c:has(input[value="sofort"]:checked) .nb-kz__kachel-innen[data-nb-kz-art="sofort"],

/* d · zwei Gruppen wie Swappie. Die Überschrift ist die sichtbare legend der Gruppe */
.nb-kz__gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.nb-kz__gruppe + .nb-kz__gruppe { border-top: 1px solid var(--nb-border-hairline); }
.nb-kz__gruppe-titel { display: block; padding: var(--nb-space-m) var(--nb-space-m) var(--nb-space-2xs); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

@media (prefers-reduced-motion: reduce) { .nb-kz__wallet, .nb-kz__i, .nb-kz__i-karte, .nb-kz__weitere, .nb-kz__kachel { transition: none; } }

/* Druck: ink-200 als Rückmeldung beim Tippen, wie die Option der Aufklappliste */
.nb-kz__i:active, .nb-kz__weitere:active { color: var(--nb-ink-700); } /* Druck nur Farbe, kein Kasten, kein Lila (Daniel 16.10.2026) */
.nb-kz__gast a:active { color: var(--nb-text-heading); background: var(--nb-ink-200); }
.nb-kz .nb-f-knopf--umriss:active { background: var(--nb-ink-200); }
.nb-kz .nb-f-knopf--text:active { color: var(--nb-text-link); }

/* c · sieben Kacheln: die letzte steht allein mittig (Treppe, G12) */
.nb-kz__kacheln label:nth-of-type(7):not([hidden]) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--nb-space-xs)) / 2); }

/* e · Rechtssatz und Stift der Prüfliste: Zeigen und Drücken wie die Textknöpfe */
.nb-kz .nb-pr__recht a { color: var(--nb-text-heading); text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kz .nb-pr__recht a:hover { color: var(--nb-ink-700); } }
.nb-kz .nb-pr__recht a:active { color: var(--nb-ink-700); }
.nb-kz .nb-f-stift:active { color: var(--nb-text-link); }

/* f · Kontrast wie Back Market (Daniel 08.10.2026: „unsers sieht etwas flau aus, mach es mehr wie Back Market vom Kontrast
   her“). Der Kreis (Rand Night, gewählt Ring in Signal) ist seit
   08.10.2026 der Standard in auszahlung/sektion.css für jede Auswahl. Logos bleiben Original mit eigener Platte. PayPal-Hinweis grau (ink-100) in der weißen Karte (G29). */
.nb-kz--bm .nb-az__titel { font-size: var(--nb-t-body-01); }
.nb-kz--bm .nb-kz__bedingung { color: var(--nb-text-heading); }
.nb-kz__pp { display: none; }
.nb-kz--bm .nb-kz__pp { display: flex; align-items: center; gap: var(--nb-space-xs); margin: 0 0 var(--nb-space-s); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-kz--bm .nb-kz__pp img { flex: none; width: 38px; height: 24px; }
.nb-kz--bm .nb-kz__pp a { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nb-kz--bm .nb-kz__pp a:hover { text-decoration-thickness: 2px; } }
.nb-kz--bm .nb-kz__pp a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 2px; }
/* Klarnas Hinweis bei Rechnung und Ratenkauf, nur in f (Daniel 08.10.2026). Grund #FFEEF3 ist die helle Fläche aus Klarnas
   On-Site-Messaging wie bei Back Market, keine Farbe unserer Palette (wie die Logos, G51). Night darauf 17,6:1 */
.nb-kz__kl { display: none; }
.nb-kz--bm .nb-kz__kl { display: flex; align-items: center; gap: var(--nb-space-xs); margin: 0 0 var(--nb-space-s); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: #FFEEF3; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-kz--bm .nb-kz__kl img { flex: none; width: 38px; height: 24px; }
.nb-kz--bm .nb-kz__kl a { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nb-kz--bm .nb-kz__kl a:hover { text-decoration-thickness: 2px; } }
.nb-kz--bm .nb-kz__kl a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 2px; }

/* baukasten/sektionen/kasse-versand/sektion.css */
/* Versand der Kasse. Kacheln und Titel aus versand/sektion.css, Adresskarte aus adresse/sektion.css (beide über CSS
   mitgeladen, K1 über kern/strecke.css). Neu nur die Zeile der Fassung c: weiße Karte (nb-f-karte, K1), Zeichen 22 px Night,
   Titel body-01 Semibold, darunter body-02 (VORGABEN-kasse-token §1 S-Aussage-Kacheln) */
.nb-kv__zeile { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--nb-space-s); align-items: center; padding: var(--nb-space-m); }
.nb-kv__zeile > svg { width: 22px; height: 22px; color: var(--nb-text-heading); }
.nb-kv__zeile > span { display: grid; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-kv__zeile b { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kv__zahlung { display: grid; gap: var(--nb-space-m); }
/* Unternehmen (K4): ohne die Kachel „30 Tage Rückgabe“ stehen zwei Kacheln auf voller Breite statt zwei von drei Spalten */
@media (min-width: 768px) { .nb-kv .nb-vs__kacheln:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* d und e · wie Back Market (Daniel 08.10.2026). Zwischenüberschrift heading-02 (20 px), heading-03 war 16 px und verschwand, Karte weiß (K1)
   Die Liste ist die Karte wie in der Auszahlung der Strecke, oben das Gerät (nb-zf__bild 72 px wie die Zusammenfassung),
   Haarlinie, dann die Lieferart als gewählte Zeile (S-Auswahl-aufklappend, auszahlung/sektion.css).
   „Kostenlos“ Night Semibold wie .nb-az__mehr, kein Mint (farbsystem.md:201). Bild 48 px auf surface-stage wie der Posten */
.nb-kv__teil { display: grid; gap: var(--nb-space-s); }
.nb-kv__h2 { 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-kv__geraete { display: grid; gap: var(--nb-space-s); margin: 0; padding: var(--nb-space-m); list-style: none; border-bottom: 1px solid var(--nb-border-hairline); }
.nb-kv__geraete li { display: flex; align-items: center; gap: var(--nb-space-s); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kv__gratis { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); white-space: nowrap; }
.nb-kv__wahl .nb-az__kopf { cursor: default; }
/* DHL-Zeichen rechts vor dem Preis, Maß wie .nb-kz__logos img, Kreis und Titel mittig, ohne Unterzeile (Daniel 14.10.2026) */
.nb-kv__rechts { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); flex: none; }
.nb-kv__rechts img { display: block; width: 38px; height: 24px; flex: none; }
.nb-kv__wahl .nb-az__kopf { align-items: center; }
.nb-kv__wahl .nb-az__kopf .nb-az__radio { margin-top: 0; }
.nb-kv__wahl .nb-az__erste { flex-wrap: nowrap; align-items: center; }
.nb-kv__wahl .nb-az__erste .nb-az__titel { flex: 1 1 auto; min-width: 0; }
/* Unternehmen in e: nur „Versichert“, eine Kachel auf voller Breite */
@media (min-width: 768px) { .nb-kv .nb-vs__kacheln:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); } }
/* Vorteile unter dem Knopf abgesetzt wie bei Back Market, sonst klebt die Überschrift am Knopf */
.nb-kv--bm .nb-vs__aktion + .nb-kv__teil { margin-top: var(--nb-space-l); }

/* baukasten/sektionen/kasse-pruefen/sektion.css */
/* Prüfen der Kasse. Prüfliste, Band, Rechtssatz und Spinner aus pruefen/sektion.css (über CSS mitgeladen, K1 der Prüfliste
   in kern/strecke.css), Posten und Summe aus kasse-summe/sektion.css. Neu sind nur Pflichtblock, Bestellung in der
   Hauptspalte, ruhige Zeile, Gutschein und das Fenster der Belehrung. Werte VORGABEN-kasse-token §1 (S-Bausteine auf K1),
   Sperrliste §6: kein Rand an Karten (border-width: 0), kein Lime, keine blaue Wahlfläche, kein Weichzeichner. */
.nb-kp [hidden] { display: none !important; }
.nb-kp .nb-f-karte { border-width: 0; }

/* Herkunft „Von PayPal übernommen“ und Hinweis am Adressblock (Umkehr G29: ink-100 in der weißen Karte, Zeichen Night) */
/* Kleine Schrift nie grau in Regular (Daniel 14.10.2026, design-kurz, Memory keine-graue-duenne-schrift): Night Semibold */
.nb-kp__herkunft { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kp__hinweis { display: flex; gap: var(--nb-space-xs); align-items: flex-start; margin: var(--nb-space-2xs) 0 0; padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-kp__hinweis svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }

/* Ruhige Zeile als weiße Karte auf dem Grund (G41), Zeichen 22 px Night, body-02 */
.nb-kp__band { display: flex; gap: var(--nb-space-xs); align-items: flex-start; padding: var(--nb-space-m); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-kp__band > svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.nb-kp__band .nb-kp__kreis { margin-top: 3px; color: var(--nb-text-heading); }
@media (max-width: 767px) { .nb-kp__band { padding: var(--nb-space-s); } }

/* Netz weg: Meldung aus kern/formular (netzMeldung), „Erneut versuchen“ prüft nur die Verbindung */
.nb-kp__netz { display: grid; justify-items: start; gap: var(--nb-space-3xs); }
.nb-kp__netz .nb-f-netz { width: 100%; box-sizing: border-box; background: var(--nb-s-karte-grund, var(--nb-surface-page)); box-shadow: var(--nb-s-karte-schatten, var(--nb-sh-ruht)); }

/* Ersatzgerät nach „verkauft“ (P05 korrigiert) */
.nb-kp__ersatz { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-m); --nb-t-price-03: clamp(18px, 17.1px + 0.24vw, 20px); }
.nb-kp__ersatz-titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
@media (min-width: 768px) { .nb-kp__ersatz .nb-f-knopf--breit { justify-self: start; width: auto; } }

/* Pflichtblock a: Zeilen in einer weißen Karte, Zeichen 22 px Night, Titel body-01 Semibold, darunter body-02 */
.nb-kp__pflicht { display: grid; padding: var(--nb-space-s) var(--nb-space-m); }
.nb-kp__zusagen { display: grid; margin: 0; padding: 0; list-style: none; }
.nb-kp__zusagen li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--nb-space-s); align-items: center; padding: var(--nb-space-xs) 0; }
.nb-kp__zusagen li + li { border-top: 1px solid var(--nb-border-hairline); }
.nb-kp__zusagen svg { width: 22px; height: 22px; color: var(--nb-text-heading); }
.nb-kp__zusagen li > span { display: grid; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-kp__zusagen b { font-size: var(--nb-t-body-01); }
/* Gesetzliche Gewährleistung und EU-Hinweis als Information, ohne Zeichen, body-02 */
.nb-kp__gesetz { padding: var(--nb-space-xs) 0; border-top: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-kp__gesetz--erst { border-top: 0; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kp__gesetz a { white-space: nowrap; }

/* Pflichtblock c: zwei S-Aussage-Kacheln (versand/sektion.css), die Zeile darunter in einer weißen Karte */
.nb-kp__pflicht-k { display: grid; gap: var(--nb-space-xs); }
@media (min-width: 768px) { .nb-kp .nb-kp__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nb-kp__kacheln .nb-vs__kachel span a { color: var(--nb-text-heading); }
.nb-kp__gesetz-karte { padding: var(--nb-space-2xs) var(--nb-space-m); }
.nb-kp__gesetz-karte .nb-kp__gesetz { border-top: 0; }

/* Bestellung über dem Knopf (P3, P58, § 312j Abs. 2 BGB). Weiße Karte, Posten und Summe aus kasse-summe/sektion.css.
   Steht auf jeder Breite direkt über dem Knopf (K2). Die Leiste am Handy fällt über ohneLeiste in der Seite weg */
.nb-kp__bestellung { display: grid; padding: var(--nb-space-m); }
.nb-kp__titel { margin: 0 0 var(--nb-space-s); font-size: var(--nb-t-heading-03); line-height: 1.4; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
@media (max-width: 767px) { .nb-kp__bestellung { padding: var(--nb-space-s); } }
/* Ab 1100 px Knopf und Rechtssatz rechts in der Zusammenfassung (aktionSeite), links fallen Bestellung, Knopf und Satz weg
   (Daniel 11.10.2026). Fassung b hat rechts nichts und behält alles links */
.nb-kp--seite { display: grid; gap: var(--nb-space-s); }
.nb-kp--seite .nb-pr__recht { margin: 0; }
/* Rechts über die volle Kartenbreite wie „Weiter“ auf den anderen Seiten der Kasse (kasse-summe nb-zf__aktion) */
.nb-kp--seite .nb-pr__aktion { justify-items: stretch; }
.nb-kp--seite .nb-pr__aktion .nb-f-knopf--breit { width: 100%; }
@media (min-width: 1100px) {
  .nb-kp:not(.nb-kp--b, .nb-kp--seite) > :is(.nb-kp__bestellung, .nb-pr__aktion, .nb-pr__recht) { display: none; }
}
/* Fassung b: eine Spalte auch am Rechner, rechts nichts */
@media (min-width: 1100px) {
  .nb-schale--strecke:has(.nb-kp--b) { grid-template-columns: minmax(0, 1fr); }
  .nb-schale--strecke:has(.nb-kp--b) .nb-schale__seite { display: none; }
}

/* Gutschein (P03): Aufklapper in der Bestellung, Schalter „gutschein“ zeigt angenommen oder abgelehnt */
.nb-kp__gs { margin-top: var(--nb-space-s); padding-top: var(--nb-space-2xs); border-top: 1px solid var(--nb-border-hairline); }
.nb-kp__gs summary { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 44px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; list-style: none; }
.nb-kp__gs summary::-webkit-details-marker { display: none; }
.nb-kp__gs summary svg { width: 16px; height: 16px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-kp__gs[open] summary svg { transform: rotate(180deg); }
.nb-kp__gs summary:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-badge); }
.nb-kp__gs-ok { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs) var(--nb-space-xs); font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
.nb-kp__gs-ok > svg { flex: none; width: 18px; height: 18px; }
.nb-kp__gs-ok > span { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.nb-kp__gs-feld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nb-space-2xs); align-items: start; }
.nb-kp__gs-feld .nb-fl { min-width: 0; }
.nb-kp__gs-feld .nb-fl__fehler { grid-column: 1 / -1; }
.nb-kp__gs-feld .nb-f-knopf--umriss { min-height: 56px; }
[data-nb-gutschein="an"] .nb-kp__gs-ab, [data-nb-gutschein="ab"] .nb-kp__gs-an { display: none !important; }

/* Satz zum Anbieter nahe dem Knopf (P5), body-02, kein Kleintext */
.nb-kp .nb-pr__aktion { gap: var(--nb-space-xs); }
.nb-kp__weiter { font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
/* „Zahlungspflichtig bestellen“ wird nie gekürzt, ein Umbruch ist erlaubt (P52) */
.nb-kp [data-nb-kp-knopf] { white-space: normal; text-wrap: balance; }

/* S-Fenster der Belehrung: 520 px, sh-schwebt, Scrim ohne Weichzeichner, Schließen als Kreis 44 px (VORGABEN-kasse-token §1) */
.nb-kp__fenster { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-width: none; max-height: min(640px, calc(100vh - 64px)); margin: auto; padding: 0; 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-kp__fenster[open] { display: flex; flex-direction: column; }
.nb-kp__fenster::backdrop { background: var(--nb-alpha-scrim); animation: nb-kp-scrim var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Öffnen auf motion-fenster-kurve wie jedes S-Fenster (Daniel 14.10.2026, vorher motion-kurve) */
.nb-kp__fenster:modal { animation: nb-kp-auf var(--nb-motion-fenster) var(--nb-motion-fenster-kurve) both; }
/* Schließen 120 ms ease-out, Fassung C (Daniel 09.10.2026), nachgezogen 14.10.2026. overlay hält das Fenster in der
   obersten Ebene, bis es ausgeblendet ist. Ohne overlay-Unterstützung (Firefox) schließt es wie bisher sofort */
@supports (overlay: auto) {
  .nb-kp__fenster:not([open]), .nb-kp__fenster:not([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; }
}
@keyframes nb-kp-auf { from { opacity: 0; transform: translateY(8px); } }
@keyframes nb-kp-scrim { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nb-kp__fenster:modal, .nb-kp__fenster::backdrop { animation: none; } }
.nb-kp__fenster-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-kp__fenster-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-kp__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-kp__zu:hover { background: var(--nb-ink-300); } }
.nb-kp__zu:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-kp__zu svg { width: 20px; height: 20px; }
.nb-kp__fenster-liste { display: grid; margin: 0; padding: 0 var(--nb-space-l); overflow-y: auto; }
.nb-kp__fenster-liste div { display: grid; gap: var(--nb-space-3xs); padding: var(--nb-space-xs) 0; font-size: var(--nb-t-body-01); line-height: 1.45; }
.nb-kp__fenster-liste div + div { border-top: 1px solid var(--nb-border-hairline); }
.nb-kp__fenster-liste dt { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-kp__fenster-liste dd { margin: 0; color: var(--nb-text-heading); }
.nb-kp__fenster-fuss { padding: var(--nb-space-s) var(--nb-space-l) var(--nb-space-m); }
@media (max-width: 767px) {
  .nb-kp__fenster-kopf { padding-left: var(--nb-space-m); }
  .nb-kp__fenster-liste { padding-inline: var(--nb-space-m); }
  .nb-kp__fenster-fuss { padding-inline: var(--nb-space-m); }
}
/* Handy: Blatt von unten (Daniel 14.10.2026, tokens.json blatt, Vorbild Baukasten kasse-pruefen). Volle Breite, oben gerundet,
   höchstens blatt-hoehe, Fuß über der Safe Area. Auf in motion-blatt mit fenster-kurve, zu in motion-blatt-aus */
@media (max-width: 767px) {
  .nb-kp__fenster { width: 100%; max-height: var(--nb-blatt-hoehe); margin: auto 0 0; border-radius: var(--nb-blatt-radius); }
  .nb-kp__fenster:modal { animation: nb-kp-blatt var(--nb-motion-blatt) var(--nb-motion-fenster-kurve) both; }
  .nb-kp__fenster .nb-kp__fenster-fuss { padding-bottom: var(--nb-blatt-unten); }
  @supports (overlay: auto) {
    .nb-kp__fenster:not([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-kp__fenster:not([open])::backdrop { transition-duration: var(--nb-motion-blatt-aus); }
  }
}
@keyframes nb-kp-blatt { from { transform: translateY(100%); } }

/* Trefferfläche 44 px für Links, die allein in ihrer Zeile stehen (Brand-Soll bis 768 px), Links im Satz bleiben im Fluss */
.nb-kp__zusagen li > span > b > a, .nb-kp__kacheln .nb-vs__kachel b > a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
/* Druckzustand für Links und Textknöpfe, am Handy die einzige Rückmeldung beim Tippen (Regel DRUCK) */
.nb-kp :is(a, .nb-f-knopf--text, summary):active, .nb-kp__fenster a:active { color: var(--nb-text-heading); text-decoration-color: currentColor; }
.nb-kp__zu:active { background: var(--nb-ink-300); }
@media (hover: hover) and (pointer: fine) { .nb-kp__gs summary:hover span { text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; } }
.nb-kp .nb-f-knopf--umriss:active { border-color: var(--nb-ink-500); }

/* baukasten/sektionen/fertig/sektion.css */
/* Bestätigung nach dem Abschluss (Werkstatt verkaufen-bestaetigung, 28.09.2026). Strecken-Stil, Korridor Kasse, kein Lime,
   keine Warnfläche (G8). Werte aus VORGABEN-verkaufen-bestaetigung-2026-09-28.md (design-auditor A). */
.nb-fe { display: grid; gap: var(--nb-space-m); max-width: 720px; font-family: var(--nb-font-sans); color: var(--nb-text-body); }
.nb-fe p { margin: 0; }
.nb-fe a:not(.nb-f-knopf) { color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; }
.nb-fe__h1 { 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); text-wrap: balance; }
.nb-fe__h2 { margin: var(--nb-space-xs) 0 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.25; color: var(--nb-text-heading); }

/* Nummer mit Kopier-Knopf, 44 px Trefferfläche, Text bleibt markierbar */
.nb-fe__nr { display: flex; align-items: center; gap: var(--nb-space-3xs); margin-top: calc(var(--nb-space-xs) * -1) !important; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); font-variant-numeric: tabular-nums; }
.nb-fe__nr b { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); user-select: all; }
.nb-fe__kopieren { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px 0; padding: 0; border: 0; border-radius: var(--nb-radius-input); background: none; 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-fe__kopieren:active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); } /* Druck, Fassung C 09.10.2026 */
.nb-fe__kopieren svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .nb-fe__kopieren:hover { color: var(--nb-ink-700); } } /* nur Farbe, kein Kasten (Daniel 16.10.2026) */
.nb-fe__kopieren:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; }
.nb-fe__kopiert { font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); }

/* Paketschein-Block. Dieselbe Mindesthöhe in jedem Zustand, nichts springt (G15) */
.nb-fe__schein { box-sizing: border-box; display: grid; align-content: start; gap: var(--nb-space-xs); min-height: 184px; padding: var(--nb-space-m); background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); }
.nb-fe__schein-titel { display: flex; align-items: center; gap: var(--nb-space-xs); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-fe__schein-titel svg { width: 22px; height: 22px; flex: none; }
.nb-fe__schein-unter { font-size: var(--nb-t-body-02); line-height: 1.45; }
.nb-fe__schein--warten { grid-auto-flow: column; justify-content: start; align-items: center; align-content: center; gap: var(--nb-space-s); background: var(--nb-ink-100); border-color: var(--nb-ink-100); color: var(--nb-text-heading); }
.nb-fe__schein--text { align-content: center; }
.nb-fe__schein--text > p { display: flex; gap: var(--nb-space-xs); align-items: flex-start; color: var(--nb-text-heading); font-size: var(--nb-t-body-02); line-height: 1.5; }
.nb-fe__schein--text svg { width: 22px; height: 22px; flex: none; }
.nb-fe__kreis { display: inline-block; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid var(--nb-text-heading); border-right-color: transparent; border-radius: 50%; animation: nb-fe-dreh 800ms linear infinite; }
@keyframes nb-fe-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nb-fe__kreis { animation-duration: 2400ms; } }

.nb-fe__aktion { display: grid; gap: var(--nb-space-2xs); justify-items: stretch; margin-top: var(--nb-space-2xs); }
@media (min-width: 768px) {
  .nb-fe__aktion { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--nb-space-m); }
  .nb-fe__aktion .nb-f-knopf--breit { width: auto; min-width: 240px; }
}

/* b · QR offen in der Karte */
.nb-fe__qr { display: grid; gap: var(--nb-space-m); grid-template-columns: 152px minmax(0, 1fr); align-items: start; }
.nb-fe__qr-bild { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.nb-fe__qr-text { display: grid; gap: var(--nb-space-xs); }
@media (max-width: 479px) { .nb-fe__qr { grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-s); } .nb-fe__qr > .nb-fe__qr-bild { width: 160px; } }

/* Drei Schritte. Ziffer ohne Kreis (G17), Titel Semibold, Text body-02 */
.nb-fe__schritte { display: grid; gap: var(--nb-space-m); margin: 0; padding: 0; list-style: none; }
.nb-fe__schritt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--nb-space-xs); }
.nb-fe__ziffer { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
.nb-fe__schritt-text { display: grid; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); line-height: 1.5; }
.nb-fe__schritt-titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* c · senkrechter Weg. Linie unter den Ziffern (z-index, Werkstatt-Falle Stepper 26.09.2026) */
.nb-fe__schritte--weg .nb-fe__schritt { position: relative; padding-bottom: var(--nb-space-2xs); }
.nb-fe__schritte--weg .nb-fe__schritt:not(:last-child)::before { content: ''; position: absolute; z-index: 0; left: 8px; top: 32px; bottom: calc(var(--nb-space-m) * -1 + 4px); width: 1px; background: var(--nb-border-hairline); }
.nb-fe__schritte--weg .nb-fe__ziffer { position: relative; z-index: 1; align-self: start; padding-bottom: 4px; background: var(--nb-surface-page); }
.nb-fe__schritte--weg .nb-fe__schein { margin-top: var(--nb-space-xs); min-height: 104px; }

.nb-fe__mail { font-size: var(--nb-t-body-02); line-height: 1.5; }

/* QR-Fenster · S-Fenster ohne Weichzeichner (G4) */
.nb-fe__fenster { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-width: none; margin: auto; padding: var(--nb-space-l); border: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-panel); color: var(--nb-text-body); font-family: var(--nb-font-sans); }
.nb-fe__fenster[open] { display: grid; gap: var(--nb-space-s); justify-items: start; }
.nb-fe__fenster::backdrop { background: var(--nb-alpha-scrim); }
/* Schließen 120 ms ease-out, Fassung C (Daniel 09.10.2026). overlay hält das Fenster in der obersten Ebene, bis es
   ausgeblendet ist. Ohne overlay-Unterstützung (Firefox) schließt es wie bisher sofort */
@supports (overlay: auto) {
  .nb-fe__fenster:not([open]), .nb-fe__fenster:not([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; }
}
.nb-fe__fenster h2 { margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-fe__fenster .nb-fe__qr-bild { width: 232px; justify-self: center; }
.nb-fe__fenster p { font-size: var(--nb-t-body-02); line-height: 1.5; max-width: 36ch; }
.nb-fe__fenster-nr { color: var(--nb-text-muted); font-variant-numeric: tabular-nums; }
.nb-fe__schirm { position: fixed; inset: 0; z-index: 59; background: var(--nb-alpha-scrim); }
.nb-fe__fenster[data-nb-statisch] { position: fixed; inset: 0; z-index: 60; height: fit-content; }
@media (max-width: 479px) { .nb-fe__fenster { padding: var(--nb-space-m); } }

/* d · Hauptknopf oben, Angaben als Karte wie die Prüfliste ohne „Ändern“ (KSK:389-392, design-auditor A 29.09.2026) */
.nb-fe--d .nb-fe__aktion--oben { display: grid; justify-items: start; gap: var(--nb-space-xs); margin-block: var(--nb-space-m) var(--nb-space-l); }
.nb-fe--d .nb-fe__aktion--oben .nb-fe__mail { display: flex; align-items: center; gap: var(--nb-space-2xs); margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
.nb-fe--d .nb-fe__aktion--oben .nb-fe__mail svg { width: 20px; height: 20px; flex: none; }
.nb-fe__angaben { margin: 0; display: grid; max-width: 340px; padding-block: var(--nb-space-3xs); padding-inline: var(--nb-space-s); background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); }
.nb-fe__angaben > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nb-space-s); padding-block: var(--nb-space-xs); border-bottom: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-02); line-height: 1.4; }
.nb-fe__angaben > div:last-child { border-bottom: 0; }
.nb-fe__angaben dt { flex: none; color: var(--nb-text-muted); }
.nb-fe__angaben dd { margin: 0; min-width: 0; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-align: right; }

/* e bis h · Weg mit Icons im Kreis, zeichnet sich einmal (design-auditor A 29.09.2026: Kreis wie der Statuspunkt KSK:272, Rand 2 px border-control, aktiv Night; Icon 22 px Night; Linie 2 px Haarlinie; Dauer motion-reveal 600 ms, Staffel 2 x Versatz 60 ms. Bewegung in der Kasse bricht farbsystem.md:423, Daniel will sie) */
.nb-fe__schritte--icons { gap: 0; }
.nb-fe__schritte--icons .nb-fe__schritt { position: relative; grid-template-columns: 40px minmax(0, 1fr); gap: var(--nb-space-s); padding-bottom: var(--nb-space-l); }
.nb-fe__schritte--icons .nb-fe__schritt:last-child { padding-bottom: 0; }
.nb-fe__schritte--icons .nb-fe__schritt:not(:last-child)::before { content: ""; position: absolute; z-index: 0; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--nb-border-hairline); transform-origin: top center; animation: nb-fe-linie var(--nb-motion-reveal, 600ms) var(--nb-motion-kurve) both; animation-delay: calc(250ms + var(--nb-i, 0) * 120ms); }
.nb-fe__kreis-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--nb-border-control); background: var(--nb-surface-page); color: var(--nb-text-heading); animation: nb-fe-kreis var(--nb-motion-reveal, 600ms) var(--nb-motion-kurve) both; animation-delay: calc(100ms + var(--nb-i, 0) * 120ms); }
.nb-fe__kreis-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.nb-fe__schritt--jetzt .nb-fe__kreis-icon { background: var(--nb-night); border-color: var(--nb-night); color: var(--nb-text-on-dark); }
.nb-fe__schritte--icons .nb-fe__schritt-text { padding-top: 8px; }
@keyframes nb-fe-linie { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes nb-fe-kreis { from { transform: scale(.5); } to { transform: scale(1); } }
/* g · Haken */
.nb-fe__haken { width: 64px; height: 64px; fill: none; stroke: var(--nb-night); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nb-fe__haken-kreis, .nb-fe__haken-strich { stroke-dasharray: 1; stroke-dashoffset: 0; }
.nb-fe__haken-kreis { animation: nb-fe-zeichnen 600ms var(--nb-motion-kurve) 150ms both; }
.nb-fe__haken-strich { stroke-width: 4; animation: nb-fe-zeichnen 300ms var(--nb-motion-kurve) 700ms both; }
@keyframes nb-fe-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* f und h · helle Bühne */
.nb-fe__buehne { display: grid; gap: var(--nb-space-m); align-items: center; padding: var(--nb-space-l); border-radius: var(--nb-radius-card); background: var(--nb-surface-info); }
.nb-fe__buehne-text { display: grid; gap: var(--nb-space-xs); min-width: 0; }
.nb-fe__buehne .nb-fe__aktion--oben { margin-block: var(--nb-space-xs) 0; }
.nb-fe__buehne-bild { border-radius: var(--nb-radius-card); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.nb-fe__buehne-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .nb-fe__buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } }
@media (max-width: 767px) { .nb-fe__buehne { padding: var(--nb-space-m); } .nb-fe__buehne-bild { order: -1; } }
@media (prefers-reduced-motion: reduce) {
  .nb-fe__schritte--icons .nb-fe__schritt:not(:last-child)::before, .nb-fe__kreis-icon, .nb-fe__haken-kreis, .nb-fe__haken-strich { animation: none; }
}
/* Druck zeigt den Endzustand (shop-build 11.5, knowledge-checker B 29.09.2026) */
@media print {
  .nb-fe__kreis, .nb-fe__schritte--icons .nb-fe__schritt:not(:last-child)::before, .nb-fe__kreis-icon, .nb-fe__haken-kreis, .nb-fe__haken-strich { animation: none; }
}

/* i · wie h, schlanker (Daniel 29.09.2026). Knopf und Mail-Satz untereinander, der Satz leise in einer Zeile */
.nb-fe--schlank .nb-fe__buehne { padding: var(--nb-space-m) var(--nb-space-l); }
.nb-fe--schlank .nb-fe__aktion--oben { display: grid; grid-auto-flow: row; justify-items: start; gap: var(--nb-space-2xs); margin-block: var(--nb-space-s) 0; }
.nb-fe--schlank .nb-fe__aktion--oben .nb-fe__mail { display: flex; align-items: flex-start; gap: var(--nb-space-2xs); margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-fe--schlank .nb-fe__aktion--oben .nb-fe__mail svg { width: 20px; height: 20px; flex: none; }
.nb-fe--schlank .nb-fe__buehne-bild { border-radius: 0; background: none; }
.nb-fe--schlank .nb-fe__schritte--icons .nb-fe__schritt { padding-bottom: var(--nb-space-m); }
.nb-fe--schlank .nb-fe__schritte--icons .nb-fe__schritt:last-child { padding-bottom: 0; }
@media (max-width: 767px) {
  .nb-fe--schlank .nb-fe__buehne { padding: var(--nb-space-s) var(--nb-space-m) var(--nb-space-m); gap: var(--nb-space-2xs); }
  .nb-fe--schlank .nb-fe__buehne-bild { aspect-ratio: auto; height: 168px; }
  .nb-fe--schlank .nb-fe__buehne-bild img { object-fit: contain; }
}
@media (min-width: 768px) { .nb-fe--schlank .nb-fe__buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); } }

/* baukasten/sektionen/kasse-fertig/sektion.css */
/* Bestätigung der Kasse. Alles aus fertig/sektion.css (Fassung i, schlank). Neu: Bühne ohne Bild in voller Breite, die kleine
   Karte auf K1 ohne Rand (G34, Flächen-System K1) und die leise Zeile zu Storno und Adressänderung (body-02, i davor) */
.nb-kf .nb-kf__buehne--ohne { grid-template-columns: minmax(0, 1fr); }
.nb-kf .nb-kf__karte { border-width: 0; box-shadow: var(--nb-sh-ruht); }
.nb-kf .nb-kf__karte dd { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--nb-space-2xs); }
.nb-kf__klein { display: flex; gap: var(--nb-space-2xs); align-items: flex-start; max-width: 560px; margin: var(--nb-space-xs) 0 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-kf__klein svg { width: 20px; height: 20px; flex: none; color: var(--nb-text-heading); }
.nb-kf .nb-kf__karte dd b { font-weight: inherit; }
.nb-kf__klein { font-size: var(--nb-t-body-02); }
.nb-kf__klein a { color: var(--nb-text-heading); text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kf__klein a:hover { text-decoration-thickness: 2px; } }
.nb-kf__klein a:active { text-decoration-thickness: 2px; color: var(--nb-text-body); }
.nb-kf .nb-fe__kopieren:active { transform: scale(.96); }
/* Prüfrunde 08.10.2026: Polster der Karte wie die Prüfliste (space-s je Zeile, space-m seitlich, D6), Link und Textknopf in Night
   unterstrichen (Rechtslink-Muster S-Rechtssatz), Hover über die Linie, nie Signal (Hilfe-Kontakt 04.10.2026) */
.nb-kf .nb-kf__karte { padding-inline: var(--nb-space-m); }
.nb-kf .nb-kf__karte > div { padding-block: var(--nb-space-s); }
.nb-kf__link { padding: 0; border: 0; background: none; font: inherit; color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kf__link:hover { text-decoration-color: currentColor; } }
.nb-kf__link:active { text-decoration-color: currentColor; color: var(--nb-text-body); }
.nb-kf .nb-kf__karte dd .nb-kf__link { font-weight: var(--nb-weight-regular); white-space: nowrap; }
.nb-kf .nb-kf__karte dd { flex-wrap: wrap; min-width: 0; }
/* Am Handy steht die Mail unter ihrem Namen, sonst bricht sie mitten in der Adresse um */
@media (max-width: 480px) { .nb-kf .nb-kf__karte > div:nth-child(3) { flex-direction: column; align-items: flex-start; gap: var(--nb-space-3xs); } .nb-kf .nb-kf__karte > div:nth-child(3) dd { justify-content: flex-start; text-align: left; } }
/* Handy mit Figur (Daniel 11.10.2026: „auf mobile geht das design mal gar nicht“). Bühne mittig und kurz: Figur 120 px hoch,
   Danke in zwei Zeilen, Knopf über die volle Breite wie die Leisten der Kasse. Vorher 448 px hoch, mit Mail-Satz */
@media (max-width: 767px) {
  .nb-kf .nb-fe__buehne:not(.nb-kf__buehne--ohne) { justify-items: center; text-align: center; gap: var(--nb-space-xs); padding: var(--nb-space-m); }
  .nb-kf .nb-fe__buehne:not(.nb-kf__buehne--ohne) .nb-fe__buehne-bild { height: 120px; width: 160px; }
  .nb-kf .nb-fe__buehne:not(.nb-kf__buehne--ohne) .nb-fe__buehne-text { justify-items: center; width: 100%; }
  .nb-kf .nb-fe__buehne .nb-fe__aktion--oben { justify-items: stretch; width: 100%; margin-top: var(--nb-space-s); }
  .nb-kf .nb-fe__buehne .nb-fe__aktion--oben .nb-f-knopf { width: 100%; }
  .nb-kf .nb-fe__buehne .nb-fe__aktion--oben .nb-fe__mail { text-align: left; }
}

/* Mail korrigieren (Kasse-Rest 14.10.2026): „Falsch? Korrigieren“ klappt das Feld unter der Karte in einer eigenen weißen
   Karte auf wie nb-kk (Strecken-Stil: Formular nie im Fenster), Speichern als Umriss, Abbrechen als Textknopf wie kasse-adresse.
   Danach die Erfolgszeile nb-kk__erfolg mit Abstand zur Karte */
.nb-kf__mail { display: grid; gap: var(--nb-space-s); justify-items: start; max-width: 560px; margin-top: var(--nb-space-xs); padding: var(--nb-space-m); }
.nb-kf__mail .nb-fl { width: 100%; }
.nb-kf__mail[hidden], .nb-kf__link[hidden] { display: none; }
.nb-kf__mail-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-xs); }
.nb-kf__ok { margin-top: var(--nb-space-xs); }
/* Lange Mails brechen in der schmalen Karte um, statt über den Rand zu laufen (gemessen 1440 px, 36 Zeichen) */
.nb-kf .nb-kf__karte dd .nb-kf__mailtext { min-width: 0; overflow-wrap: anywhere; }

/* baukasten/sektionen/kasse-konto/sektion.css */
/* Konto nach der Bestellung. Weiße Karte auf K1 (nb-f-karte), Felder grau darin (Umkehr), Haken aus pruefen/sektion.css.
   Werte VORGABEN-kasse-token §1 (S-Haken, Felder), Abstände wie die Karte der Ankauf-Bestätigung */
.nb-kk { display: grid; gap: var(--nb-space-s); max-width: 560px; margin-top: var(--nb-space-m); padding: var(--nb-space-m); font-family: var(--nb-font-sans); }
.nb-kk__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-kk__satz { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }
.nb-kk__form { display: grid; gap: var(--nb-space-s); justify-items: start; }
.nb-kk__form .nb-fl { width: 100%; }
.nb-kk__erfolg { display: flex; gap: var(--nb-space-2xs); align-items: flex-start; margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-kk__erfolg svg { width: 20px; height: 20px; flex: none; color: var(--nb-success-text); }
/* Anzeigen-Schalter im Passwortfeld: 44 px Ziel, Zeichen 20 px Night, Hover und Druck über die Fläche ink-200 wie das Feld */
.nb-kk__auge { position: absolute; right: var(--nb-space-2xs); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--nb-radius-input); background: transparent; color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kk__auge svg { width: 20px; height: 20px; }
.nb-kk__auge:active { color: var(--nb-ink-700); } /* Druck nur Farbe, kein Kasten, kein Lila (Daniel 16.10.2026) */
.nb-kk__auge:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; }
.nb-kk__auge[aria-pressed="true"] svg { opacity: .6; }
.nb-kk__feld .nb-fl__eingabe { padding-right: 56px; }

/* ---------- Naht zu JTL (Bauplan Kasse A4, von kasse-schale.mjs, nicht aus einer Sektion) ---------- */
.nb-kz__wallet[aria-disabled="true"] { opacity: .4; pointer-events: none; cursor: default; }

/* 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-ad__fenster:modal { animation-name: nb-ad-scrim !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-ad__fenster:not([open]), .nb-ad__fenster:not([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-ad__fenster:not([open]), .nb-ad__fenster:not([open])::backdrop { transition-duration: var(--nb-motion-blatt-aus) !important; } } }
/* 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-kp__fenster:modal { animation-name: nb-kp-scrim !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-kp__fenster:not([open]), .nb-kp__fenster:not([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-kp__fenster:not([open]), .nb-kp__fenster:not([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-ad__fenster[open]) { overflow: hidden; scrollbar-gutter: stable; }
html:has(.nb-kp__fenster[open]) { overflow: hidden; scrollbar-gutter: stable; }

/* Fassung L der Zahlseite (Werkstatt kasse-zahlung mobil, Daniel 16.10.2026, snippets/nb-kasse-zahlseite.tpl). Werte aus
   baukasten/sektionen/kasse-zahlung/sektion.css (g bis l). Unter der Liste: Gesamt eingeklappt, Zahlknopf je Zahlart,
   „Sicheres Bezahlen“, Rechtssatz mit fetten Bedingungen, Lieferung und Versand ohne „Ändern“. Ab 1100 px steht die Bestellung
   rechts, Gesamt-Zeile und Lieferung fallen dort weg (G6). */
.nb-kz__klapp { margin-top: var(--nb-space-m); padding: 0; overflow: hidden; }
.nb-kz__klapp-kopf { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--nb-space-xs); min-height: 44px; padding: var(--nb-space-s) var(--nb-space-m); cursor: pointer; list-style: none; }
.nb-kz__klapp-kopf::-webkit-details-marker { display: none; }
.nb-kz__klapp-kopf .nb-zf__bild { width: 48px; height: 48px; }
.nb-kz__klapp-text { display: grid; gap: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
.nb-kz__klapp-text b { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-kz__klapp-betrag { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
.nb-kz__klapp-kopf > svg { width: 20px; height: 20px; transition: transform var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve-bewegung); }
.nb-kz__klapp[open]:not(.is-zu) > .nb-kz__klapp-kopf > svg { transform: rotate(180deg); transition-duration: var(--nb-motion-akkordeon-auf); }
.nb-kz__klapp[open] > .nb-kz__klapp-kopf .nb-zf__bild { display: none; }
.nb-kz__klapp[open] > .nb-kz__klapp-kopf { grid-template-columns: 1fr auto auto; }
.nb-kz__klapp-kopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; }
.nb-kz__klapp-innen { padding-top: 0; }
@media (max-width: 767px) { .nb-kz__klapp-kopf { padding: var(--nb-space-xs) var(--nb-space-s); } }
.nb-kz__aktion--neu { display: grid; gap: var(--nb-space-xs); justify-items: stretch; margin-top: var(--nb-space-s); }
.nb-kz__aktion--neu .nb-f-knopf--breit { width: 100%; }
.nb-kz__zk { width: 100%; min-height: 48px; box-sizing: border-box; border: 0; border-radius: var(--nb-radius-pill); }
.nb-kz__zk[hidden] { display: none !important; }
.nb-kz__zk--google { height: 48px; overflow: hidden; padding: 0; background: none; }
.nb-kz__zk--google > :not(button) { width: 100%; height: 100%; }
/* Apple Pay: Safari malt den Knopf per -apple-pay-button, Chrome und Firefox am Mac per <apple-pay-button> aus Apples SDK
   (js/nb-kasse-express.js). Ohne beides bleibt der Behaelter verborgen, zk zeigt dann „Jetzt kaufen“ */
.nb-kz__zk--apple { height: 48px; padding: 0; background: none; border-radius: 0; }
.nb-kz__apple { display: none; }
@supports (-webkit-appearance: -apple-pay-button) {
  .nb-kz__apple { display: block; width: 100%; height: 48px; padding: 0; border: 0; border-radius: var(--nb-radius-pill); -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; -apple-pay-button-style: black; cursor: pointer; }
}
apple-pay-button.nb-kz__apple { display: block; --apple-pay-button-width: 100%; --apple-pay-button-height: 48px; --apple-pay-button-border-radius: 24px; --apple-pay-button-padding: 0; } /* Radius halbe Hoehe = pill, das SDK nimmt nur px */
.nb-kz__apple-fehler { margin: 0; font-size: var(--nb-t-body-01); color: var(--nb-critical-text); }
.nb-kz__apple-fehler[hidden] { display: none; }
.nb-kz__zk--paypal { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); padding: 0 var(--nb-space-m); background: #FFD140; color: #2C2E2F; font-family: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); } /* PayPal Gold, Hersteller */
.nb-kz__zk--paypal img { height: 20px; width: auto; }
@media (hover: hover) and (pointer: fine) { .nb-kz__zk--paypal:hover { background: #F2C230; } }
.nb-kz__zk--paypal:active { background: #F2C230; }
.nb-kz__zk--ppc { min-height: 48px; border-radius: 0; }
.nb-kz__sicher { display: flex; align-items: center; justify-content: center; gap: var(--nb-space-3xs); margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kz__sicher svg { width: 16px; height: 16px; }
.nb-kz .nb-pr__recht { margin: var(--nb-space-xs) 0 0; }
.nb-kz .nb-pr__recht a { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kz__oben { margin: var(--nb-space-m) 0 0; padding: var(--nb-space-xs) var(--nb-space-m); }
@media (max-width: 767px) { .nb-kz__oben { padding: var(--nb-space-2xs) var(--nb-space-s); } }
@media (min-width: 1100px) { .nb-kz__klapp, .nb-kz__oben { display: none; } }
@media (prefers-reduced-motion: reduce) { .nb-kz__klapp-kopf > svg, .nb-kz__zk--paypal { transition: none; } }
/* Stepper der Kasse mit drei Schritten (Pruefen faellt weg, 16.10.2026): Spalten nach Anzahl statt fest vier */
.nb-s-stepper .nb-st--balken-namen .nb-st__bahn { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* Übersicht: Zeichen des Anbieters rechts in der Zeile (Daniel 16.10.2026 abends), Maß wie .nb-kz__logos img. Am Handy rechts neben
   dem Namen, ab 768 px in der dritten Spalte, die früher „Ändern“ trug */
.nb-pr__logo { display: flex; gap: var(--nb-space-3xs); align-items: flex-start; justify-content: flex-end; margin: 0; grid-column: 2; grid-row: 1; }
.nb-pr__logo img { display: block; width: 38px; height: 24px; flex: none; }
@media (min-width: 768px) { .nb-pr__logo { grid-column: 3; } }
/* Übersicht: Klarna-Knopf in Klarna-Rosa (Hersteller, wie PayPal-Gold oben), Zeichen links, „Jetzt kaufen“ in Klarna-Schwarz */
.nb-kz__zk--klarna { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); padding: 0 var(--nb-space-m); background: #FFA8CD; color: #0B051D; font-family: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kz__zk--klarna img { height: 16px; width: auto; margin-left: 2px; } /* Wortmarke schwarz, nicht das rosa Zeichen (Daniel 16.10.2026: „Ton in Ton“) */
@media (hover: hover) and (pointer: fine) { .nb-kz__zk--klarna:hover { background: #FF94C2; } }
.nb-kz__zk--klarna:active { background: #FF94C2; }
@media (prefers-reduced-motion: reduce) { .nb-kz__zk--klarna { transition: none; } }

/* Rechtssatz: Links ueberall Night Semibold mit Unterstrich, nie blau (Daniel 16.10.2026: „manchmal blau und manchmal schwarz
   bold, entscheid dich mal für schwarz“). Hover und Druck nur dunkler (G59), Warenkorb, Zahlung, Übersicht, Einstieg */
html body :is(.nb-pr__recht, .nb-kk-s__recht, .nb-ks__recht, .nb-anm__recht) a { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
html body :is(.nb-pr__recht, .nb-kk-s__recht, .nb-ks__recht, .nb-anm__recht) a:active { color: var(--nb-ink-700); }
@media (hover: hover) and (pointer: fine) { html body :is(.nb-pr__recht, .nb-kk-s__recht, .nb-ks__recht, .nb-anm__recht) a:hover { color: var(--nb-ink-700); } }
/* Klarna-Knopf: Text und Wortmarke auf einer Grundlinie (Daniel 16.10.2026: „nicht perfekt auf einer Linie“, gemessen 3,4 px).
   Die Zeile richtet am Text-Grund aus (Bild-Unterkante = Grundlinie der Wortmarke), text-box schneidet die Unterlänge ab,
   damit der Knopf die Gruppe optisch mittig setzt */
.nb-kz__zk-zeile { display: inline-flex; align-items: baseline; gap: var(--nb-space-2xs); line-height: 1; }
.nb-kz__zk-zeile > span { line-height: 1; }
/* Mittig nach der Versalhöhe des Textes (Daniel 17.10.2026: „nicht perfekt mittig zentriert“, gemessen 2,4 px zu tief): die
   Wortmarke behält die Grundlinie, zählt aber nur mit Versalhöhe, sie ragt oben um 16 px minus 1cap über die Zeile */
@supports (text-box: trim-both cap alphabetic) {
    .nb-kz__zk-zeile > span { text-box: trim-both cap alphabetic; }
    .nb-kz__zk-zeile > img { margin-top: calc(1cap - 16px); }
}