/* Erzeugt von baukasten/werkzeug/bestaetigung-plugin.mjs aus vk-checkliste.
   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/cl-fenster/sektion.css
   baukasten/sektionen/checkliste/sektion.css
   baukasten/sektionen/strecken-fuss/sektion.css
   Dazu laden nb-tokens-v3.css, nb-feld.css, nb-tradein.css und nb-strecke.css aus dem Template. */

/* 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) */
/* Hover nur mit Maus. Jede :hover-Regel steht in @media (hover: hover), am Handy bliebe sonst das getippte Element im Hover stehen (Daniel 07.10.2026, Regel HOVERMEDIA) */
@media (hover: hover) { .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-kr--seite a:hover { background: var(--nb-surface-page); } }
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-kr--seite a[aria-current="page"] { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-vdk__bild:not(.nb-vdk__bild--gross) { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
/* Zusagen-Kasten in den Leitern wie Back Markets Vorteilsleiste (Daniel 30.09.2026: „nimm grau, einfach das hier von
   backmarket“, gemessen auf backmarket.de: Leiste #F2F3F7, Radius 12, Innenabstand 12, Abstand 12, Icon 24 in weißer
   Kachel 40 x 40 mit Radius 8, keine Trennlinien). Grau bleibt ink-100, die weiße Kachel trägt den Kontrast.
   Radius 16 statt 12, nächste Stufe der Skala */
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten {
  gap: var(--nb-space-xs); padding: var(--nb-space-xs); border-radius: var(--nb-radius-input); background: var(--nb-ink-100);
}
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten .nb-s-zusage {
  gap: var(--nb-space-xs); padding: 0; border: 0;
}
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten .nb-s-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page);
}

/* Welche Bauteile dem Grund folgen: alle Fassungen außer weiss (heute) und rechner */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"], [data-nb-grund="grau"], [data-nb-grund="rebuy"]) :is(.nb-s-kachel:not(.nb-s-kategorien--im-bild *), .nb-s-buehne__direkt a, .nb-bd--karte, .nb-vd-foto, .nb-vdh-c__mail) {
  background: var(--nb-s-karte-grund); border-color: var(--nb-s-karte-rand); box-shadow: var(--nb-s-karte-schatten);
  transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), transform var(--nb-motion-rand) var(--nb-motion-kurve);
}
/* Konto-Band trägt seinen Warnstreifen links als inset-Schatten weiter */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"], [data-nb-grund="grau"], [data-nb-grund="rebuy"]) .nb-bd--karte { box-shadow: var(--nb-s-karte-schatten), inset 4px 0 0 var(--nb-warning-solid); }
/* Hover: nie Rand, nie Tönung, nur der stärkere Schatten */
@media (hover: hover) {
  .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) { .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) { .nb-f-knopf--primaer:hover { background: var(--nb-action-primary-hover); border-color: var(--nb-action-primary-hover); } }
.nb-f-knopf--primaer[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.nb-f-knopf--umriss { background: transparent; color: var(--nb-text-heading); border: 1px solid var(--nb-border-control); }
/* #FBFBFD hat kein Token, Wert aus komponenten-tradein.md:510 */
@media (hover: hover) { .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) { .nb-f-knopf--text:hover { color: var(--nb-text-link); } }
.nb-f-knopf--breit { width: 100%; }
.nb-f-knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

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

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

/* Platzhalter: ink-100 mit Lichtstreif, Sweep 1200 ms, erst ab 400 ms sichtbar (farbsystem.md:379-382).
   Höhen als Klassen, damit das Nachgeladene genau den Platz findet, den es braucht */
.nb-f-platz { display: grid; align-content: start; gap: var(--nb-space-xs); padding: var(--nb-space-m); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); animation: nb-f-platz-ein 0s linear 400ms both; }
/* Gemessen am 26.09.2026 bei 1440 und 390 px gegen das Nachgeladene: Maske 79/131, Band 119/247,
   Verkaufskarte 333 und 374 bis 592 (je nach Aktionen). Die Verkäufe lädt der Server mit Zeitlimit,
   im Browser springt dort nichts (SPEZ §C 8b), der Platzhalter ist die Rückfallebene */
.nb-f-platz { box-sizing: border-box; }
.nb-f-platz--karte { min-height: 184px; }
.nb-f-platz--maske { min-height: 80px; padding-block: var(--nb-space-s); }
.nb-f-platz--band { min-height: 248px; }
.nb-f-platz--verkauf { min-height: 420px; }
@media (min-width: 768px) {
  .nb-f-platz--band { min-height: 120px; }
  .nb-f-platz--verkauf { min-height: 333px; }
}
@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); }

/* 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; }
.nb-schale--strecke .nb-schale__haupt { display: grid; gap: var(--nb-space-l); min-width: 0; }
/* 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; }
@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)); }
}

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

/* 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) { .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; }
.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/cl-fenster/sektion.css */
/* Checkliste (vk-checkliste, 01.10.2026). Der Körper .nb-cl steht im Fenster (cl-fenster) und auf der Seite
   /verkaufen/checkliste (sektionen/checkliste). Werte aus design-auditor A (VORGABEN-checkliste-2026-10-01.md t1 bis t12),
   Lücken stehen dort: Text der Schritte, Kästchen als Abhak-Marke, Druck.
   Night auf ink-100 17,57:1. Kein Lime, keine Warnfläche */

/* --- Fenster: S-Fenster aus verkaeufe/sektion.css in der zweiten Breite 720 px (komponenten-global.md:280), ohne Fuß --- */
.nb-vk-fenster.nb-cl-fenster { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px); border-width: 0; box-shadow: var(--nb-sh-schwebt); }
.nb-cl-fenster__rahmen { --nb-cl-rand: var(--nb-space-l); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
@media (max-width: 767px) { .nb-cl-fenster__rahmen { --nb-cl-rand: var(--nb-space-m); } }
.nb-cl-fenster__kopf { flex: none; }
/* Der Inhalt trägt den Fokus beim Öffnen (Tastatur scrollt ihn). Ring nach innen, das Fenster schneidet außen ab */
.nb-cl-fenster .nb-cl-fenster__inhalt:focus { outline: none; box-shadow: none; }
.nb-cl-fenster .nb-cl-fenster__inhalt:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }
/* position relative wie in Mehr Details (zustands-pruefer 02.10.2026, Befund 5) */
.nb-cl-fenster__inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; display: grid; gap: var(--nb-space-s); padding: var(--nb-space-2xs) var(--nb-cl-rand) var(--nb-cl-rand); }
.nb-cl-druck { margin: 0; }
/* Link im Konto: Night unterstrichen, Linie ink-300, Hover text-link (komponenten-strecke-konto.md:468, :351) */
.nb-cl-link { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 44px; /* Textknopf 44 px, komponenten-strecke-konto.md:351 */ color: var(--nb-text-heading); font-family: var(--nb-font-sans); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) { .nb-cl-link:hover { color: var(--nb-text-link); text-decoration-color: currentColor; } }
.nb-cl-link:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-badge); }
.nb-cl-link svg { flex: none; width: 16px; height: 16px; }

/* --- Körper, für beide Träger: vier Schritte, je ein fetter Satz (heading-03) und die Erklärung (body-01) -------------- */
.nb-cl { container-type: inline-size; font-family: var(--nb-font-sans); }
.nb-cl p, .nb-cl ol { margin: 0; padding: 0; list-style: none; }
.nb-cl-schritt { display: grid; align-content: start; gap: var(--nb-space-2xs); min-width: 0; }
.nb-cl-h3 { margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-cl-text { font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }

/* --- a · Graue Kacheln, zwei mal zwei (wie md-fenster a). Je Zeile gleich hoch (G12) ------------------------------------ */
.nb-cl-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-s); }
.nb-cl-kachel { padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
@container (max-width: 559px) { .nb-cl-a { grid-template-columns: minmax(0, 1fr); } }

/* --- b · Liste zum Abhaken: Schritte mit Haarlinie, S-Haken 24 px, die ganze Zeile ist das Ziel ------------------------- */
.nb-cl-b { display: grid; }
.nb-cl-b__zeile { padding-block: var(--nb-space-s); }
.nb-cl-b__zeile:first-child { padding-top: 0; }
.nb-cl-b__zeile:last-child { padding-bottom: 0; }
.nb-cl-b__zeile + .nb-cl-b__zeile { border-top: 1px solid var(--nb-border-hairline); }
.nb-cl-b__haken { font-size: inherit; color: inherit; }
.nb-cl-b__text { display: grid; gap: var(--nb-space-2xs); }
.nb-cl-b .nb-cl-mehr { margin-left: calc(24px + var(--nb-space-xs)); }

/* --- c · Weg in vier Schritten (wie fertig i, ohne Bewegung): Kreis 40 px, Rand 2 px border-control, Linie Haarlinie ---- */
.nb-cl-weg { display: grid; }
.nb-cl-weg__schritt { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--nb-space-s); padding-bottom: var(--nb-space-m); }
.nb-cl-weg__schritt:last-child { padding-bottom: 0; }
/* Linie als Rand, nicht als Hintergrund: Browser drucken Hintergründe nicht (zustands-pruefer 01.10.2026, 0 von 3 Linien) */
.nb-cl-weg__schritt:not(:last-child)::before { content: ""; position: absolute; z-index: 0; left: 19px; top: 40px; bottom: 0; width: 0; border-left: 2px solid var(--nb-border-hairline); }
.nb-cl-weg__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); }
.nb-cl-weg__icon svg { width: 22px; height: 22px; stroke-width: 2; } /* Strich 2 für alle vier, komponenten-strecke-konto.md:488 */
.nb-cl-weg .nb-cl-schritt { padding-top: var(--nb-space-2xs); }

@media (prefers-reduced-motion: reduce) { .nb-cl-link { transition: none; } }

/* baukasten/sektionen/checkliste/sektion.css */
/* Checkliste als Seite /verkaufen/checkliste (vk-checkliste, 01.10.2026). Der Körper .nb-cl kommt aus
   cl-fenster/sektion.css. Karte nach K1: weiß ohne Rand, radius-card, sh-ruht, 720 px wie „Prüfen“ (pruefen/sektion.css:4,
   komponenten-global.md:308-311). H1 heading-01 (typografie.md:82) */

.nb-clp { max-width: 720px; margin-inline: auto; padding-block: var(--nb-space-l); font-family: var(--nb-font-sans); }
@media (min-width: 1100px) { .nb-clp { padding-block: var(--nb-space-xl); } } /* wie die Schale der Strecke, kern/strecke.css:19 */
.nb-clp__karte { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-m); border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-clp__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-s); }
.nb-clp__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-clp__kopf .nb-f-knopf svg { flex: none; width: 20px; height: 20px; }
@media (max-width: 479px) { .nb-clp__karte { padding: var(--nb-space-s); } }
/* Ohne JS druckt der Knopf nicht, dann steht er nicht da (kein totes Bedienelement). Gedruckt wird über den Browser */
@media (scripting: none) { .nb-clp__kopf .nb-f-knopf { display: none; } }

/* Druck (Lücke in den Werte-Dokumenten, VORGABEN t12): nur die Liste. Kopf, Fuß und Knopf fallen weg, Grau druckt der
   Browser nicht, also stehen die Gruppen ohne Fläche und ohne Polster */
@media print {
  .nb-strecke-kopf, .nb-sf, .nb-clp__kopf .nb-f-knopf { display: none; }
  .nb-strecke-seite { background: none; } /* der K1-Grund druckt mit „Hintergrundgrafiken“ sonst als Streifen neben der Karte (live gemessen 01.10.2026) */
  .nb-clp { max-width: none; padding-block: 0; }
  .nb-clp__karte { padding: 0; box-shadow: none; }
  .nb-cl-a { grid-template-columns: minmax(0, 1fr); }
  .nb-cl-kachel { padding: 0; background: none; }
  .nb-cl-schritt, .nb-cl-weg__schritt { break-inside: avoid; }
  .nb-cl-mehr { display: none; } /* der Link zur DHL-Standortsuche trägt auf Papier nichts */
}

/* 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) { .nb-sf a:hover { color: var(--nb-text-heading); } }
.nb-sf a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }