/* Erzeugt von baukasten/werkzeug/exportieren.mjs aus verkaufen-marke. Nicht von Hand ändern, Quelle ist der Baukasten:
   baukasten/sektionen/_v2/v2.css
   baukasten/kern/schale.css
   baukasten/kern/formular.css
   baukasten/kern/bewegung.css
   baukasten/kern/schweif.css
   baukasten/kern/karte.css
   templates/NextBuy/themes/nextbuy/nb-kategorie.css
   baukasten/sektionen/kat-kopf/sektion.css
   baukasten/sektionen/vm-kopf/sektion.css
   baukasten/sektionen/vs-kopf/sektion.css
   baukasten/sektionen/kategorien/sektion.css
   baukasten/sektionen/vm-raster/sektion.css
   baukasten/sektionen/vs-marken/sektion.css
   baukasten/sektionen/vm-tabelle/sektion.css
   baukasten/sektionen/vs-tabelle/sektion.css
   baukasten/sektionen/ablauf/sektion.css
   baukasten/sektionen/vs-warum/sektion.css
   baukasten/sektionen/vs-vorbereiten/sektion.css
   baukasten/sektionen/fragen/sektion.css
   baukasten/sektionen/vs-fragen/sektion.css
   baukasten/sektionen/buehne/sektion.css
   baukasten/sektionen/schlussruf/sektion.css
   baukasten/sektionen/fuss/universell.css
   Ohne 1469 Regeln gelöschter Fassungen (179.6 KB, ohneToteRegeln).
   Dazu lädt layout/header.tpl nb-feld.css und nb-tradein.css. */

/* baukasten/sektionen/_v2/v2.css */
/* Eingefroren aus _previews/verkaufen-seite-v2.html, Stand 25.09.2026 abends. Nicht bearbeiten. */
/* Entwurf v2 der Einstiegsseite /verkaufen/, 25.09.2026 abends. Nur Token aus nb-tokens-v3.css. */
    .nb-vk { background: var(--nb-surface-page); color: var(--nb-text-body); font-family: var(--nb-font-sans); }
    
    
    
    
    
    
    

    
    
    
    

    /* Buehne ohne Bild: Ueberschrift, Unterzeile und Suche mittig, darunter sofort die Kategorien */
    
    
    
    
    .nb-v3 .nb-vk h1 em { font-size: calc(1em * 1.03); }
    
    
    

    
    
    
    
    
    
    
    

    

    /* Kategorien im Kachel-Stil D: Bild 4:3 oben, Titel darunter */
    
    
    
    
    
    
    
    
    
    

    /* Zusagen: Canvas randlos, Icons ohne Kreis */
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* Ablauf: das eine dunkle Band, mit Schweif und Siegel */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* Stimmen: links die belegte Zahl, rechts drei weisse Karten mit Haarlinie (Canvas nur einmal je Seite, Daniel 25.09.) */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    

    /* Modellliste kompakt, Textfarbe statt Linkblau */
    
    
    
    

    /* Schlussruf als weisse Karte mit Haarlinie, keine Lime-Flaeche, kein Canvas (Daniel 25.09. abends) */
    
    
    
    
    
    

/* 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) */

/* ---------- 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) */

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

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

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

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

/* Icon im Kreis wie im Rechner (.nb-vertrauen__icon). Fläche surface-info, siehe OFFENE-ENTSCHEIDE Nr. 20 */

/* Pillen */

.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 */

/* 13 px aus farbsystem.md:385, dafür gibt es kein Token */

/* Pflicht-Haken, nie vorbelegt. Kasten 24 px mit border-control */

/* 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) */

 /* Night, nie warning-text als Zeichen (G8, farbsystem.md:215) */

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

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

/* Hover wie .nb-anm__link, Farbe text-link (Daniel 27.09.2026: „beim Hovern über ja übernehmen passiert nichts“) */

/* 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) */

 /* Stift auch als Knopf, etwa „Ändern“ in Adresse d und e */

/* Pillen. hell = m-merkmal (komponenten-global.md:73-82), 24 px hoch. dunkel = Night. warn = Sonderzustand */

 /* m-merkmal: immer 14 px und Ton in Ton, auch wo body-02 16 ist (komponenten-global.md §1, Daniel 13.10.2026) */

/* Warnfläche allein 1,13:1 gegen Weiß, deshalb Rand in warning-text (4,71:1) als zweites Merkmal */

/* Umriss statt Fläche: surface-component auf Weiß hat nur 1,10:1. Rand border-control 4,20:1 */

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

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

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

@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; } }

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

/* 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) */

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

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

/* ---------- §5d Datei-Ablage (m-ablage) ---------- */

/* Ablage-Knopf und Vorstufe: ink-100, kein Rand, 64 px hoch über das Polster 14 / 18 / 14 / 14, 16 px Semibold */

 /* Druck, Fassung C 09.10.2026 */

/* 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) */

/* Entfernen: weißer Kreis 32 px, x 16 px. Pflicht: 44 px Trefferfläche über den Rand hinaus, das Zeichen bleibt 32 px */

/* ---------- §5e Auftragswahl (m-wahl): Zeilen als graue Fläche wie die Kacheln §5f, gewählt Haken plus „Gewählt“ (18.10.2026) ---------- */

 /* Druck, Fassung C 09.10.2026 */

/* Fokus per Tastatur 2 px Night innen */

/* ---------- §5f Bereichs-Kacheln (m-kachelwahl) ---------- */

 /* Druck, Fassung C 09.10.2026 */

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

/* Fokusformel (komponenten-global.md) für Kachel, Ablage und Entfernen, nur per Tastatur. Die Ablage ist ein Knopf, kein Feld */

/* ---------- §5g Erfolgsmeldung nach dem Senden (m-gesendet) ---------- */

/* Pflicht: der Titel bekommt nach dem Senden den Fokus, ohne Ring (wie die Schritt-Titel, komponenten-hilfe.md §7) */

/* Pflicht: Kopieren hat 44 px Trefferfläche, der kleine Knopf bleibt 40 px hoch */

/* 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) */

@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) */

/* Stift nur als Zeichen (Daniel 17.10.2026, Zahlseite Lieferung, Versand, Rechnungsadresse), wortgleich mit live nb-kasse.css:
   Night, 44 px Trefferfläche, keine Fläche bei Hover oder Druck, nur die Farbe wechselt (design-kurz 12) */

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

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

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

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

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

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

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

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

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

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

/* baukasten/kern/karte.css */
/* Produktkarte und Trade-in-Karten (Werkstatt kategorie, 02.10.2026). Werte aus VORGABEN-kategorie-design-2026-10-02.md:
   Karte weiß ohne Rand mit sh-ruht, Hover nur sh-hoch in 250 ms (G28), Radius 24, Titel heading-02, Meta body-02 in ink-700
   (kräftiger als heute, Gilroy gibt es nur in 400 und 600), Preis price-03.
   price-03 fehlt in nb-tokens-v3.css (design-tokens.json kennt ihn), deshalb hier als lokale Variable mit dem Wert aus
   typografie.md:91. Nach Daniels Wahl gehört er in die Token-Datei (Spur brand, tools/build-tokens.mjs). */
.nb-v3 { --nb-t-price-03: clamp(18px, 17.1px + 0.24vw, 20px); }

/* ---------- Karte, alle Fassungen ---------- */
.nb-pk {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--nb-surface-page); border: 0 solid transparent; border-width: 0; border-radius: var(--nb-radius-card);
  box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading);
  transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve);
}
@media (hover: hover) and (pointer: fine) { .nb-pk:hover { box-shadow: var(--nb-sh-hoch); } }
/* OE 94 Punkt 6 (Daniel 05.10.2026, design-auditor A 04.10.2026): Druck ohne Verzögerung, die weiße Karte wechselt den
   Schatten (sh-ruht zu sh-hoch, farbsystem.md:369 und :493, sh-schwebt ist für Karten gesperrt) */
.nb-pk:active { transition-duration: 0s; box-shadow: var(--nb-sh-hoch); }
.nb-pk[hidden] { display: none !important; }
/* Das Foto füllt sein Bild bis an den Rand (Bildsatz „bündig“), deshalb Luft rundherum: das Gerät steht bei rund
   drei Vierteln der Kartenbreite, wie die Fotos bei rebuy und Back Market */

/* Das Foto steht absolut in seinem Feld, so hat jede Karte dieselbe Bildhöhe, egal wie hoch das Foto ist */
.nb-pk__foto { position: absolute; top: var(--nb-pk-luft-oben); left: var(--nb-pk-luft); width: calc(100% - 2 * var(--nb-pk-luft)); height: calc(100% - var(--nb-pk-luft-oben) - var(--nb-space-2xs)); object-fit: contain; }
.nb-pk__text { display: flex; flex-direction: column; flex: 1; gap: var(--nb-space-3xs); padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-m); }
.nb-pk__titel { margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
/* Die ganze Karte ist ein Link, die Farbfelder liegen darüber (eigene Links, UX U3.9) */
.nb-pk__link { color: inherit; text-decoration: none; }
.nb-pk__link::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.nb-pk { border-radius: var(--nb-radius-card); }
.nb-pk__link:focus { outline: none; }
.nb-pk__link:focus-visible::after { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-card); }

.nb-pk__preis { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--nb-space-2xs); font-variant-numeric: lining-nums; }
.nb-pk__ab { font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-pk__preis b { font-size: var(--nb-t-price-03); font-weight: var(--nb-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--nb-text-heading); }

/* Farbfelder: Punkt 16 px mit Ring in border-control (4,20:1), Trefferfläche 24 px (WCAG 2.5.8), jeder ein eigener Link */

 /* OE 94 Punkt 6: Ring im Druck */

/* 20-px-Felder brauchen 4 px Luft, damit der Mittenabstand 24 px erreicht (WCAG 2.5.8, design-auditor B und
   zustands-pruefer 02.10.2026) */

/* m-merkmal „Neuer Akku“ (komponenten-global.md:73-82) */

/* b · Bühne: das Foto in einer getönten Fläche (Umkehr G29), groß und unten angeschnitten wie Kachel-Stil D.
   Bruch brand-imagery.md:347-352 (Produktfotos auf Weiß): die Fotos haben keinen Alphakanal, multiply legt ihren weißen
   Grund auf das Grau. Weiße Geräte verlieren dabei ihre Kante, das zeigt die Fassung ehrlich */
.nb-pk--b .nb-pk__buehne { position: relative; overflow: hidden; margin: var(--nb-space-2xs) var(--nb-space-2xs) 0; aspect-ratio: 4 / 4.2; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-pk--b .nb-pk__buehne .nb-pk__foto { position: absolute; left: 50%; top: 12%; width: 78%; height: auto; max-width: none; transform: translateX(-50%); mix-blend-mode: multiply; }
/* OE 94 Punkt 9 (Daniel 05.10.2026): Lädt das Foto nicht, bleibt die graue Bühne stehen. Der Alt-Text ist durchsichtig und
   bleibt für Screenreader. Über dem Bruch-Symbol liegt eine weiße Fläche (surface-page), die multiply auf der Bühne
   unsichtbar macht. ::after gibt es nur am Bild ohne Datei (Chromium, Firefox), ein geladenes Bild trägt keins. 1 px Überstand
   samt overflow-clip-margin, weil das Bild auf halben Pixeln steht und die Kante des Symbols sonst in einer Spalte von 16 px
   mit bis zu 15 von 255 Stufen durchscheint (gemessen 05.10.2026, mit Überstand 0 Pixel Abweichung zur leeren Bühne) */
.nb-pk__foto { color: transparent; overflow-clip-margin: 1px; }
.nb-pk--b .nb-pk__buehne .nb-pk__foto::after { content: ''; position: absolute; inset: -1px; background: var(--nb-surface-page); }

.nb-pk--b .nb-pk__text { padding-top: var(--nb-space-xs); }

.nb-pk--b .nb-pk__preis { margin-top: auto; padding-top: var(--nb-space-2xs); }

/* c · Einordnung: wie a, das Merkmal oben links auf dem Foto, Neupreis als stille Zeile unter dem Preis */

/* Größe S: Karussell und Handy */

/* Am Handy steht die Karte M in zwei Spalten, also mit den Maßen von S */
@media (max-width: 767px) {
  
  .nb-pk--m .nb-pk__text { padding: var(--nb-space-xs) var(--nb-space-xs) var(--nb-space-s); }
  .nb-pk--m .nb-pk__titel, .nb-pk--m .nb-pk__preis b { font-size: var(--nb-t-heading-03); }
  
  /* Handy-Gesamtprüfung 14.10.2026 (ZIEL, WCAG 2.5.8): Fläche 24 × 24 statt 20 plus 4 Lücke, Mitte zu Mitte bleibt 24 px,
     der Punkt bleibt 14 px */
  
  
  
  
  
  .nb-pk--b.nb-pk--m .nb-pk__buehne { margin: var(--nb-space-3xs) var(--nb-space-3xs) 0; }
  
}

/* Größe L: zwei Spalten breit, Foto links, Preise je Zustand rechts (G26) */

/* ---------- Fotogröße, Schalter foto (Runde 2, 02.10.2026) ----------
   Daniel zum ersten Bild: „die fotos viel zu groß, also ich mag es eher wie bei backmarket, und nicht wie bei rebuy“
   (KRITIK-kategorie-2026-10-02.md, Nachtrag). Back Market: Foto 128 x 128 in einer Karte von 268 x 306 px
   (INVENTAR-backmarket.md). Unsere Fotos stehen hochkant (456 bis 492 x 600), deshalb zählt die Fläche, nicht die Breite.
   klein: Foto rund 115 x 140 in der 291 px breiten Karte M, die Karte 308 statt 435 px hoch. gross: Runde 1, die Regeln
   oben. quer: wie klein, am Handy eine Spalte mit dem Foto links wie Back Market (Spalten in raster/ und karten/).
   Nach Daniels Wahl wandert der gewählte Wert in die Regeln oben und der Schalter fällt weg. */

/* c trägt „Neuer Akku“ oben links, das Foto beginnt darunter */

/* L: schmalere Bildspalte, das Foto oben bündig mit dem Titel */

/* b: Bühne flacher, das Gerät bleibt unten angeschnitten, oben steht Platz für „Neuer Akku“ in jeder Karte gleich */
:is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-pk--b.nb-pk--m .nb-pk__buehne { aspect-ratio: 16 / 10; }
:is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { top: var(--nb-space-xl); width: auto; height: calc((100% - var(--nb-space-xl)) * 1.2); }

@media (max-width: 767px) {
  /* Zwei Spalten: die Karte ist nur 173 px breit, das Foto deshalb verhältnismäßig größer, rund 85 x 110 */
  
  
  :is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-pk--b.nb-pk--m .nb-pk__buehne { aspect-ratio: 1 / 1; }
  
  
  /* quer: eine Karte je Zeile, Foto links in 120 px, Text rechts */
  [data-nb-foto="quer"] .nb-pk--m { flex-direction: row; }
  
  
  [data-nb-foto="quer"] .nb-pk--m .nb-pk__text { padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-s) 0; }
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne { flex: 0 0 120px; aspect-ratio: auto; margin: var(--nb-space-3xs) 0 var(--nb-space-3xs) var(--nb-space-3xs); }
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__text { padding-left: var(--nb-space-s); }
  /* Runde 7 (Daniel 03.10.2026): das Gerät steht immer gleich, wie ohne Pille, die Spar-Pille liegt darüber */
  /* Das Foto wuchs mit der Kartenhöhe: wo die Merkmalzeile zweizeilig wird (etwa „· Musterpreis“), war es 159 statt 131 px
     hoch (Daniel 03.10.2026: „weißt du wieso diese als einziges so verbuggt sind“). Feste Höhe, unabhängig von der Karte */
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { height: 132px; }
}

/* ---------- Lime-Marker (komponenten-global.md §7), wie im Angebot n ---------- */
.nb-s-angebot__mk { margin-inline: -4px; padding: 0 6px; border-radius: var(--nb-radius-badge); background: var(--nb-lime); white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Trade-in-Karte (Größe einer Produktkarte) ---------- */

/* Leer bis zur Wahl, dann „bis zu“ in 16 px. Zwei Zeilen Platz sind reserviert, damit nichts springt (G15) */

/* K8 (Qualitätslauf Kategorie, 04.10.2026, M2): „Wert berechnen“ zeigt den Druck am Handy sofort, Fläche
   action-primary-active (design-tokens.json:182) wie ga-karte/sektion.css:184, ohne Übergang nur beim Drücken */

/* PDP 5b-1 (11.10.2026): Night und Lime hatten keinen Druck, jetzt dieselbe Fläche wie Hover, sofort (design-kurz Nr. 12) */

/* a · Lime-Fläche. Bruch farbsystem.md:155 und :337 (Lime auf Hell nie Fläche, Korridor Kategorie unter 0,05 %) */

/* b · weiß mit Modellwahl wie im Rechner. Feld grau in der weißen Karte (Umkehr) */

/* c · Foto oben, Text darunter, Marker im Titel */

/* ---------- Trade-in über zwei Spalten ---------- */

/* S-Weg-Icons: je Schritt ein Icon im Kreis (G17, Ausnahme 29.09.2026), der Kreis grau in der weißen Karte */

/* Auf Lime ist das Feld weiß (Umkehr) */

/* c · dunkel, Bruch web-architektur.md:108 (nie eine dunkle Sektion auf Kategorie oder Liste) */

/* ---------- Trade-in-Karten bei kleinen Fotos (Schalter foto: klein, quer) ----------
   Die Produktkarte M ist mit kleinem Foto 289 px hoch statt 435. Die Trade-in-Karten waren 354 (b), 439 (a), 438 (c) und
   in zwei Spalten 402 bis 502 px hoch und streckten die Produktkarten ihrer Reihe um bis zu 213 px. Deshalb hier knapper:
   Polster s, kleinere Bilder, der Dachsatz fällt weg, wo der Titel dasselbe sagt (G6), der Zusatzsatz der Karten a und c
   fällt weg (G42), die Schritte stehen als Zeichen ohne Kreis. Ziel ist die Höhe einer Produktkarte. Ohne Dachzeile ist
   das ein benannter Bruch (TI-DACH in raster/sektion.mjs, brand-design.md:462), Daniel entscheidet. */

/* „Bis zu“ mit Stand braucht bei 250 px drei Zeilen, die Zeilen sind reserviert (G15). Unter 1296 px wird die Karte
   schmaler (233 px bei 1100, 224 bei 768), dort sind es vier (zustands-pruefer 02.10.2026, Befund 1) */

/* Das Auswahlfeld bleibt in der Karte: die Spur des Feld-Rasters schrumpft mit, sonst schob der längste Name
   („iPhone SE (3rd generation)“) das Feld 25 px über die Nachbarkarte (zustands-pruefer 02.10.2026, Befund 4) */

/* Zwei Spalten: Bild ein Drittel, Text zwei Drittel, Titel in heading-02. Nur ab 768 px, darunter bleibt die eine Spalte
   von oben (design-auditor B 02.10.2026: sonst lief das Bild am Handy unter den Text) */

/* Unter 1296 px ist die breite Karte nur 474 bis 490 px breit, das Bild nimmt dort ein Viertel, damit der Satz nach der
   Modellwahl in zwei Zeilen bleibt (zustands-pruefer 02.10.2026, Befunde 2 und 3) */

/* Die Dachzeile der breiten Karten steht seit Runde 3 wieder (brand-design.md:462), mit Karte b sind die Reihen 329 px hoch */

/* Schritte als Zeichen 20 px ohne Kreis (G17 Grundregel, brand-design.md:394, Strich 1,83 px). Der Kreis 40/22 aus
   komponenten-tradein.md:568 passt nicht in die Kartenhöhe, 24/14 stand auf keiner Leiter (design-auditor B 02.10.2026) */

/* ---------- Runde 3 (Daniel 02.10.2026 nachts) ----------
   Trade-in-Karte b ohne leere Mitte: b2 Feld und Betrag zusammen in einer grauen Fläche, b3 erst ein Gerät, dann an
   derselben Stelle der Betrag. Breite Karte: a mit eingerücktem Bild wie die Bühne der Karte b („das bild so unbündig“),
   d Weg in einer Linie, e Altgerät als Produktkarte. Werte nach VORGABEN-kategorie-runde3-design-2026-10-02.md */
/* Fläche ink-100, Radius 16, Polster 12 wie m-info-band. Betrag in price-01 (34/28, Night, proportional, 17,57:1),
   „bis zu“ davor in body-01 ink-700 (7,71:1), in einer Zeile statt zwei, damit die Karte so hoch bleibt wie ihre Reihe */

/* Auf der grauen Fläche ist das Feld weiß (Umkehr G29) */

/* Dachzeile und Titel gehören zusammen: 4 px statt des Abstands der Karte */

/* Das alte iPhone steht wie auf der Bühne der Karte b, unten angeschnitten, der weiße Fotogrund per multiply */

/* K11 (Qualitätslauf Kategorie, 04.10.2026, R14): die Fotos sind 441 × 600, width und height sagen 456 × 600. Ohne Bild
   nahm die Box 456 × 600, mit Bild 441 × 600, 4,5 px Versatz. Die Box steht jetzt immer auf 456 × 600, das Foto darin per
   object-fit contain (.nb-pk__foto), ohne Bild bleibt der Platz leer */

/* Breite Karte a: Bild eingerückt wie die Bühne der Karte b (space-2xs, Radius input) */

/* Breite Karte d: Weg in einer Linie, S-Weg-Icons ohne gefüllten Schritt (komponenten-strecke-konto.md:701) */

/* Linie 2 px Haarlinie von Kreis zu Kreis, unter den Kreisen (Falle 26.09.2026: z-index) */

/* Breite Karte e: die linke Hälfte ist so breit wie eine Produktkarte (Spaltenabstand wie das Raster) und trägt die
   Bühne der Karte b, rechts die vier Schritte */

/* Titel auf der Höhe der Produkttitel daneben: dort steht über dem Titel die Zeile Farbfelder (24 px) */

/* Die Dachzeile steht in der Höhe der Farbpunkte (24 px) der Produktkarten daneben, so liegen die Titel auf einer Linie */

/* ---------- Runde 3: Streichpreise zum Vergleich auf Karte b (Raster d und e) ----------
   Werte nach VORGABEN-kategorie-runde3-design-2026-10-02.md */

/* Spar-Pille Mint mit mint-ink (5,76:1), Preis in mint-ink (9,02:1, Bruch typografie.md:91 Preis immer Night, Daniel
   will ihn grün). Streichpreis body-01 ink-600 (5,97:1, typografie.md:241) */

/* Schalter akku (Runde 3, Daniel: „Hintergrundfarbe bleibt im skyblue aber die schriftfarbe … den ähnlichen ton aber
   nur dunkler“). Keine Sky-Stufe schafft 4,5:1 auf surface-stage (sky-700 2,83:1). sky: sky-900 #3C4686, 7,21:1, derselbe
   Farbton, aber eine neue Stufe (Bruch farbsystem.md:142, gilt nur mit Daniels Ja). signal: signal-700, 5,98:1, besteht,
   heißt aber sonst klickbar (Bruch farbsystem.md:37). Werte VORGABEN-kategorie-runde3-design-2026-10-02.md */
.nb-v3 { --nb-sky-900-probe: #3C4686; }

@media (prefers-reduced-motion: reduce) {
  .nb-pk, .nb-pk__farbe span, .nb-tk__knopf, .nb-tk__knopf svg, .nb-pk__weiter svg { transition: none !important; }
}

/* Runde 3 (zustands-pruefer Befund 1): mit gesetztem Zustand zeigt die Sale-Karte den Preis dieses Zustands ohne Rabatt */

/* Befund 11: Abstand Dachzeile zu Titel wie Farbpunkte zu Titel bei Karte b (margin 4 plus gap 4) */

/* ---------- Runde 4 (Daniel 03.10.2026) ----------
   Werte nach VORGABEN-kategorie-runde4-design-2026-10-03.md */
/* sky-900 ist seit dem 03.10.2026 eine Stufe der Skala (Daniel: „neue Stufe ist viel besser … so chips sehen viel viel
   besser aus“), Alias text-on-stage. Bis design-tokens.json neu gebaut ist, steht der Wert hier. coral-100 ist der
   Vorschlag des design-auditor für die Coral-Karte und gilt erst mit Daniels Wahl */
.nb-v3 { --nb-sky-900: #3C4686; --nb-text-on-stage: var(--nb-sky-900); --nb-coral-100-probe: #FFDFDB; }
/* Ton in Ton (Daniel: „ab jetzt immer ton in ton“): die Merkmal-Pille trägt sky-900 auf surface-stage, 7,21:1. Die
   Spar-Pille ist es schon (mint-ink auf mint, 5,76:1). Schalter akku night zeigt den alten Stand zum Vergleich */

/* Pillen auf der Bühne 8 px auseinander (komponenten-global.md:82), vorher 4 */

/* Sale nach e gewählt („E ist perfekt“), dazu „mach das ab und das 903 gerne auch in grün“: „ab“ body-02 und Streichpreis
   body-01, beide mint-ink (9,02:1). Greift der Rabatt nicht, fallen alle drei zurück */

/* Raster g: Karten ohne Neupreis halten die Zeile frei, damit jede Reihe gleich hoch ist (ux-pruefer Runde 4) */

/* b3 ohne Dachzeile: die graue Fläche nimmt den frei gewordenen Platz, Gerät und Betrag stehen größer */

/* Runde 5 (Daniel 03.10.2026): nach der Wahl bleibt das gewählte Modell im Bild, unten angeschnitten wie vorher.
   Schalter wert: w1 Modell rechts, Betrag links. w2 Modell mittig, Betrag als weißes Preisschild unten links.
   w3 Modell mittig, Betrag unter der Fläche. heute nur der Betrag (Runde 4) */

/* K11 (04.10.2026): mit der festen Box 456 × 600 steht das Foto rechts in der Box, so bleibt es am selben Platz wie vorher */

/* Daniel 07.10.2026 („das Handy buggt im Preis“): ab 1300 px ist die Fläche 250 px breit, das Foto begann bei 96 px, der Betrag
   endete bei bis zu 115 px („1.184 €“), 28 von 31 Modellen lagen unter oder an dem Foto. In schmaler Fläche ist das Foto
   kleiner, Betrag und Foto halten mindestens 12 px Abstand. Am Handy ist die Fläche ab 256 px breit (320 px), dort bleibt es */

/* Bild bleibt im rechten Teil neben dem Betrag (max-width 58 %), bei jeder Breite und jedem Modell. Breite = Höhe × 456/600.
   Daniel 16.10.2026: 17 Pro lief bei 250 px Fläche 22 px unter den Betrag, alle 27 Modelle gemessen */

/* Breite Karte f bis i in der Ordnung von Back Market: getönte Fläche, links Titel, Satz und Knopf, rechts das Foto mit
   eigenem farbigem Grund, 8 px eingerückt mit Radius 16 wie die Bühne der Karte b. Text 3fr, Foto 2fr. Titel heading-02
   Night, Satz body-01 ink-700, 8 px dazwischen, 16 px bis zum Knopf. Knopf Signal, gegen Sky 4,34:1, gegen Coral 4,20:1.
   Bruch farbsystem.md:90 und :608 (Sky als große Fläche) und :235 (Coral nur Sale), Daniel 03.10.2026 */

/* Das Foto bestimmt die Höhe nicht, es füllt, was Text und Reihe vorgeben */

/* Zwischen 768 und 1295 px steht die Karte allein in ihrer Zeile, das Foto bekommt eine feste Breite statt der Hälfte */

/* design-auditor B Runde 4 (PRUEFUNG-kategorie-runde4-design-2026-10-03.md) */
/* 1: die Spar-Pille bleibt mint-ink, sky-900 gilt nur für die Merkmal-Pille */

/* 8: Neupreis 4 px unter dem Preis (gap 4 der Spalte, ohne eigenen Rand) */

/* Rabattpreis (Daniel 04.10.2026 abends): unter dem Streichpreis lesbar „Tiefstpreis der 30 Tage vor Rabatt“
   (DOSSIER-recht-kategorie-2026-10-03.md Punkt 2, BGH I ZR 183/24), darf am Handy umbrechen */

/* 17: der Platzhalter hinter dem Foto hat den gemessenen Grund des Fotos, nicht den Token, sonst springt beim Laden die
   Farbe um (G15). Sky-Foto #859EDA, Coral-Foto #D76255 (image-curator 03.10.2026, Ecken und Randmitten) */

/* zustands-pruefer Runde 4, Befund 11: die breite Karte ist als Ganzes klickbar (der Knopf spannt seine Fläche über die
   Karte) und hebt beim Hover den Schatten (G28) */

 /* OE 94 Punkt 6 */

/* templates/NextBuy/themes/nextbuy/nb-kategorie.css */
/* Erzeugt von baukasten/werkzeug/exportieren.mjs aus kategorie. Nicht von Hand ändern, Quelle ist der Baukasten:
   baukasten/sektionen/_v2/v2.css
   baukasten/kern/schale.css
   baukasten/kern/formular.css
   baukasten/kern/bewegung.css
   baukasten/sektionen/kat-kopf/sektion.css
   baukasten/sektionen/auswahlstil/sektion.css
   baukasten/kern/karte.css
   baukasten/sektionen/kat-filter/sektion.css
   baukasten/sektionen/raster/sektion.css
   baukasten/sektionen/bewertungen/sektion.css
   baukasten/sektionen/paket/sektion.css
   baukasten/sektionen/tausch-band/sektion.css
   baukasten/sektionen/langtext/sektion.css
   Ohne 497 Regeln gelöschter Fassungen (57.6 KB, ohneToteRegeln).
   Dazu lädt layout/header.tpl nb-feld.css und nb-tradein.css. */

/* baukasten/sektionen/_v2/v2.css */
/* Eingefroren aus _previews/verkaufen-seite-v2.html, Stand 25.09.2026 abends. Nicht bearbeiten. */
/* Entwurf v2 der Einstiegsseite /verkaufen/, 25.09.2026 abends. Nur Token aus nb-tokens-v3.css. */
    .nb-vk { background: var(--nb-surface-page); color: var(--nb-text-body); font-family: var(--nb-font-sans); }
    
    
    
    
    
    
    

    
    
    
    

    /* Buehne ohne Bild: Ueberschrift, Unterzeile und Suche mittig, darunter sofort die Kategorien */
    
    
    
    
    .nb-v3 .nb-vk h1 em { font-size: calc(1em * 1.03); }
    
    
    

    
    
    
    
    
    
    
    
    

    /* Kategorien im Kachel-Stil D: Bild 4:3 oben, Titel darunter */
    
    
    
    
    
    
    
    
    
    

    /* Zusagen: Canvas randlos, Icons ohne Kreis */
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* Ablauf: das eine dunkle Band, mit Schweif und Siegel */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* Stimmen: links die belegte Zahl, rechts drei weisse Karten mit Haarlinie (Canvas nur einmal je Seite, Daniel 25.09.) */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    

    /* Modellliste kompakt, Textfarbe statt Linkblau */
    
    
    
    

    /* Schlussruf als weisse Karte mit Haarlinie, keine Lime-Flaeche, kein Canvas (Daniel 25.09. abends) */
    
    
    
    
    
    

/* 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) */

/* ---------- 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) */

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

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

/* Hover: nie Rand, nie Tönung, nur der stärkere Schatten */
/* Hover nur mit Maus. Jede :hover-Regel steht in @media (hover: hover), am Handy bliebe sonst das getippte Element im Hover stehen (Daniel 07.10.2026, Regel HOVERMEDIA) */
@media (hover: hover) and (pointer: fine) {
  .nb-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 */

/* 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) */

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

/* Karten in zwei Formen: mit Haarlinie und leichtem Schatten, oder als Panel mit dem Rechner-Schatten */

/* Icon im Kreis wie im Rechner (.nb-vertrauen__icon). Fläche surface-info, siehe OFFENE-ENTSCHEIDE Nr. 20 */

/* Pillen */

.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 */

/* 13 px aus farbsystem.md:385, dafür gibt es kein Token */

/* Pflicht-Haken, nie vorbelegt. Kasten 24 px mit border-control */

/* 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) */

 /* Night, nie warning-text als Zeichen (G8, farbsystem.md:215) */

/* Knöpfe. Primär Signal mit weißem Label 5,24:1 (komponenten-warenkorb.md:336-339). Umriss mit border-control */

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

/* #FBFBFD hat kein Token, Wert aus komponenten-tradein.md:510 */

/* Hover wie .nb-anm__link, Farbe text-link (Daniel 27.09.2026: „beim Hovern über ja übernehmen passiert nichts“) */

/* Stift wie „Entfernen“: body-02, muted, unterstrichen (komponenten-warenkorb.md:89) */

 /* Stift auch als Knopf, etwa „Ändern“ in Adresse d und e */

/* Pillen. hell = m-merkmal (komponenten-global.md:73-82), 24 px hoch. dunkel = Night. warn = Sonderzustand */

/* Warnfläche allein 1,13:1 gegen Weiß, deshalb Rand in warning-text (4,71:1) als zweites Merkmal */

/* Umriss statt Fläche: surface-component auf Weiß hat nur 1,10:1. Rand border-control 4,20:1 */

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

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

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

@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; } }

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

/* 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) */

/* Produktfoto auf weißem Grund, ganz sichtbar statt beschnitten (Daniel 26.09.2026) */

/* ==========================================================================================================================
   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 ---------- */

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

/* ---------- §5d Datei-Ablage (m-ablage) ---------- */

/* Ablage-Knopf und Vorstufe: ink-100, kein Rand, 64 px hoch über das Polster 14 / 18 / 14 / 14, 16 px Semibold */

/* 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) */

/* Entfernen: weißer Kreis 32 px, x 16 px. Pflicht: 44 px Trefferfläche über den Rand hinaus, das Zeichen bleibt 32 px */

/* ---------- §5e Auftragswahl (m-wahl): Zeilen ohne Fläche, Trenner 1 px, gewählt Haken plus „Gewählt“ ---------- */

/* Wie gerendert: die gewählte Zeile verliert ihren Trenner darüber, die nächste behält ihren */

/* Fokus per Tastatur 2 px Night innen, kein Ring außen, damit die Trenner stehen bleiben */

/* ---------- §5f Bereichs-Kacheln (m-kachelwahl) ---------- */

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

/* Fokusformel (komponenten-global.md) für Kachel, Ablage und Entfernen, nur per Tastatur. Die Ablage ist ein Knopf, kein Feld */

/* ---------- §5g Erfolgsmeldung nach dem Senden (m-gesendet) ---------- */

/* Pflicht: der Titel bekommt nach dem Senden den Fokus, ohne Ring (wie die Schritt-Titel, komponenten-hilfe.md §7) */

/* Pflicht: Kopieren hat 44 px Trefferfläche, der kleine Knopf bleibt 40 px hoch */

/* 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) */

@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) */

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

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

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

/* Schweif zeichnet sich einmal beim Eintritt des Bandes, 1.200 ms */

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

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

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

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

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

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

.nb-kk { display: flex; flex-direction: column; gap: var(--nb-space-s); }

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

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

/* Vorteilsleiste (G31): grau ohne Trennlinien und Schatten, jedes Zeichen in einer weißen Kachel */
/* position: relative, sonst hängt der Screenreader-Text (.nb-s-sr, absolut) am Abschnitt und schiebt die quer scrollende
   Leiste am Handy über den Rand (gemessen 02.10.2026: 965 px statt 390) */

/* Kategorie-Port S4 (04.10.2026): Zeile zur Echtheit unter der Note, body-02 muted, Link wie „Gerät ansehen“ in den
   Bewertungen. Kontrast muted auf ink-100 per farbcheck.mjs */

/* Im Kopf stehen Zeile und Link untereinander, sonst wird die Kachel am Handy breiter als der Bildschirm (414 px gemessen) */

/* K2 (04.10.2026, WCAG 2.1.1): Die Leiste trägt tabindex="0" (sektion.mjs vorteile(), nb-kat-kopf.tpl), damit sie am
   Handy per Tastatur quer scrollt. Fokus wie überall (.nb-s :focus-visible in kern/schale.css:177), hier nur mit einer
   Klasse mehr, damit die Reihenfolge im Bündel nicht entscheidet */

/* Am Handy quer scrollend wie Back Market, sonst stünden vier Zeilen vor der ersten Karte (ux U5.1) */

/* Reihe ohne Kasten (Fassung c): Zeichen 24 px frei, Text daneben, keine Pille */

/* Heute, nachgebaut aus nb-collection.css:30-127 zum Vergleich */

/* Runde 3: Untertitel zum Vergleich, Schalter unter am main (seiten/kategorie.mjs). Ohne Schalter der erste */

main:not([data-nb-unter]) .nb-kk__unterf:first-child,
main[data-nb-unter="heute"] [data-nb-unterf="heute"], main[data-nb-unter="a"] [data-nb-unterf="a"],
main[data-nb-unter="b"] [data-nb-unterf="b"], main[data-nb-unter="v1"] [data-nb-unterf="v1"],
main[data-nb-unter="v2"] [data-nb-unterf="v2"] { display: inline; }

/* baukasten/sektionen/auswahlstil/sektion.css */
/* Auswahlstil, Werkstatt felder Runde 2 vom 27.09.2026 (Daniel: „du kannst dropdowns direkt mal mitdesignen“).
   Der Knopf ist ein Feld aus dem Feldstil (.nb-fl), er übernimmt dessen Fassung A, B oder C samt Klick-Effekt (G18).
   Offen sieht er aus wie im Fokus. Die Liste folgt m-auswahl (komponenten-tradein.md §1b, nb-tradein.css:170-186):
   weiß, Haarlinie, Radius input, sh-panel, 6 px unter dem Knopf, Optionen 44 px, Radius badge (G1, G4).
   A 1:1 wie der Rechner live, B flach, C am Handy als Blatt. Nichts gewählt, bis Daniel „fertig“ sagt. */

/* Offen wie im Fokus des Feldstils: die Linie steht (Regel im Feldstil über .is-offen) */

/* Schließen 150 ms ease-out, Fassung C (Daniel 09.10.2026). Der Keyframe läuft mit backwards, damit die Deckkraft nach
   dem Öffnen wieder der Regel gehört und hier ausblenden kann */

@keyframes nb-dd-rein { from { opacity: 0; transform: scale(var(--nb-motion-liste-scale)); } to { opacity: 1; transform: none; } }

/* Gewählt auf surface-stage mit Haken Signal, wie m-auswahl im Rechner (§1b). Daniel 27.09.2026: „genau diese
   Dropdown-Menüs finde ich perfekt“. Werte live gemessen auf /verkaufen/smartphones/apple/iphone-17-pro */

/* ---------- B · flach: gewählt nur Semibold und Haken, keine Fläche (G17) ---------- */

/* In B bekommt beim Öffnen nicht die gewählte Zeile die graue Markierung, sondern keine, erst Maus oder Pfeiltaste */

/* ---------- C · wie A am Rechner, am Handy als Blatt von unten über abgedunkelter Seite (G4) ---------- */

@keyframes nb-dd-blatt { from { transform: translateY(100%); } to { transform: none; } }
@keyframes nb-dd-schleier { from { opacity: 0; } to { opacity: 1; } }

/* baukasten/kern/karte.css */
/* Produktkarte und Trade-in-Karten (Werkstatt kategorie, 02.10.2026). Werte aus VORGABEN-kategorie-design-2026-10-02.md:
   Karte weiß ohne Rand mit sh-ruht, Hover nur sh-hoch in 250 ms (G28), Radius 24, Titel heading-02, Meta body-02 in ink-700
   (kräftiger als heute, Gilroy gibt es nur in 400 und 600), Preis price-03.
   price-03 fehlt in nb-tokens-v3.css (design-tokens.json kennt ihn), deshalb hier als lokale Variable mit dem Wert aus
   typografie.md:91. Nach Daniels Wahl gehört er in die Token-Datei (Spur brand, tools/build-tokens.mjs). */
.nb-v3 { --nb-t-price-03: clamp(18px, 17.1px + 0.24vw, 20px); }

/* ---------- Karte, alle Fassungen ---------- */
.nb-pk {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--nb-surface-page); border: 0 solid transparent; border-width: 0; border-radius: var(--nb-radius-card);
  box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading);
  transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve);
}
@media (hover: hover) and (pointer: fine) { .nb-pk:hover { box-shadow: var(--nb-sh-hoch); } }
/* OE 94 Punkt 6 (Daniel 05.10.2026, design-auditor A 04.10.2026): Druck ohne Verzögerung, die weiße Karte wechselt den
   Schatten (sh-ruht zu sh-hoch, farbsystem.md:369 und :493, sh-schwebt ist für Karten gesperrt) */
.nb-pk:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); box-shadow: var(--nb-sh-hoch); scale: var(--nb-motion-druck-scale-breit); }
.nb-pk[hidden] { display: none !important; }
/* Das Foto füllt sein Bild bis an den Rand (Bildsatz „bündig“), deshalb Luft rundherum: das Gerät steht bei rund
   drei Vierteln der Kartenbreite, wie die Fotos bei rebuy und Back Market */

/* Das Foto steht absolut in seinem Feld, so hat jede Karte dieselbe Bildhöhe, egal wie hoch das Foto ist */
.nb-pk__foto { position: absolute; top: var(--nb-pk-luft-oben); left: var(--nb-pk-luft); width: calc(100% - 2 * var(--nb-pk-luft)); height: calc(100% - var(--nb-pk-luft-oben) - var(--nb-space-2xs)); object-fit: contain; }
.nb-pk__text { display: flex; flex-direction: column; flex: 1; gap: var(--nb-space-3xs); padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-m); }
.nb-pk__titel { margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
/* Die ganze Karte ist ein Link, die Farbfelder liegen darüber (eigene Links, UX U3.9) */
.nb-pk__link { color: inherit; text-decoration: none; }
.nb-pk__link::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.nb-pk { border-radius: var(--nb-radius-card); }
.nb-pk__link:focus { outline: none; }
.nb-pk__link:focus-visible::after { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-card); }

.nb-pk__preis { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--nb-space-2xs); font-variant-numeric: lining-nums; }
.nb-pk__ab { font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-pk__preis b { font-size: var(--nb-t-price-03); font-weight: var(--nb-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--nb-text-heading); }

/* Sternzeile wie auf der Produktseite (.nb-pdpb__note in nb-pdp.css), 19.10.2026 */

/* Farbfelder: Punkt 16 px mit Ring in border-control (4,20:1), Trefferfläche 24 px (WCAG 2.5.8), jeder ein eigener Link */

 /* OE 94 Punkt 6: Ring im Druck */

/* Farbpunkte wie Back Market (Daniel 19.10.2026): 12 px, nicht anklickbar, höchstens vier, dahinter „+N“ in Night Semibold
   (keine graue dünne Schrift). Ersetzt die Farbfelder als Links oben, die nur noch der Assistent nutzt (nb-assistent.css) */

/* 20-px-Felder brauchen 4 px Luft, damit der Mittenabstand 24 px erreicht (WCAG 2.5.8, design-auditor B und
   zustands-pruefer 02.10.2026) */

/* m-merkmal „Neuer Akku“ (komponenten-global.md:73-82) */

/* b · Bühne: das Foto in einer getönten Fläche (Umkehr G29), groß und unten angeschnitten wie Kachel-Stil D.
   Bruch brand-imagery.md:347-352 (Produktfotos auf Weiß): die Fotos haben keinen Alphakanal, multiply legt ihren weißen
   Grund auf das Grau. Weiße Geräte verlieren dabei ihre Kante, das zeigt die Fassung ehrlich */
.nb-pk--b .nb-pk__buehne { position: relative; overflow: hidden; margin: var(--nb-space-2xs) var(--nb-space-2xs) 0; aspect-ratio: 4 / 4.2; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-pk--b .nb-pk__buehne .nb-pk__foto { position: absolute; left: 50%; top: 12%; width: 78%; height: auto; max-width: none; transform: translateX(-50%); mix-blend-mode: multiply; }
/* OE 94 Punkt 9 (Daniel 05.10.2026): Lädt das Foto nicht, bleibt die graue Bühne stehen. Der Alt-Text ist durchsichtig und
   bleibt für Screenreader. Über dem Bruch-Symbol liegt eine weiße Fläche (surface-page), die multiply auf der Bühne
   unsichtbar macht. ::after gibt es nur am Bild ohne Datei (Chromium, Firefox), ein geladenes Bild trägt keins. 1 px Überstand
   samt overflow-clip-margin, weil das Bild auf halben Pixeln steht und die Kante des Symbols sonst in einer Spalte von 16 px
   mit bis zu 15 von 255 Stufen durchscheint (gemessen 05.10.2026, mit Überstand 0 Pixel Abweichung zur leeren Bühne) */
.nb-pk__foto { color: transparent; overflow-clip-margin: 1px; }
.nb-pk--b .nb-pk__buehne .nb-pk__foto::after { content: ''; position: absolute; inset: -1px; background: var(--nb-surface-page); }

.nb-pk--b .nb-pk__text { padding-top: var(--nb-space-xs); }

/* 13.10.2026 (Daniel): der Preis steht in jeder Karte gleich weit unter den Merkmalen. Vorher margin-top: auto, dann rutschte
   er mit, sobald eine Nachbarkarte der Reihe umbrach. Die Luft liegt jetzt unten in der Karte */
.nb-pk--b .nb-pk__preis { padding-top: var(--nb-space-2xs); }
/* 18.10.2026 (Daniel): der Preis steht in jeder Karte auf derselben Höhe, auch wenn die Merkmalzeile einer Karte umbricht.
   Die Zeile hält immer Platz für zwei Zeilen, so liegt der Preis über alle Reihen gleich. Bricht sie am Handy auf drei
   um, schiebt margin-top: auto die Preise der übrigen Karten derselben Reihe mit */

/* 19.10.2026 (Daniel, Fassung C): die Merkmalzeile trägt nur noch Zustand und Speicher, eine Zeile reicht überall */

.nb-pk--b .nb-pk__preis { margin-top: auto; }

/* c · Einordnung: wie a, das Merkmal oben links auf dem Foto, Neupreis als stille Zeile unter dem Preis */

/* Größe S: Karussell und Handy */

/* Am Handy steht die Karte M in zwei Spalten, also mit den Maßen von S */
@media (max-width: 767px) {
  
  .nb-pk--m .nb-pk__text { padding: var(--nb-space-xs) var(--nb-space-xs) var(--nb-space-s); }
  .nb-pk--m .nb-pk__titel, .nb-pk--m .nb-pk__preis b { font-size: var(--nb-t-heading-03); }
  
  /* Handy-Gesamtprüfung 14.10.2026 (ZIEL, WCAG 2.5.8): Fläche 24 × 24 statt 20 plus 4 Lücke, Mitte zu Mitte bleibt 24 px,
     der Punkt bleibt 14 px */
  
  
  
  
  
  .nb-pk--b.nb-pk--m .nb-pk__buehne { margin: var(--nb-space-3xs) var(--nb-space-3xs) 0; }
  /* 19.10.2026 (Daniel: „die Rundungen des weißen und des grauen Teils sind nicht einheitlich“): Radien laufen parallel,
     innen = außen minus Einzug. Am Rechner 24 − 8 = radius-input 16, am Handy sitzt die Bühne nur 4 px innen, also 20 */
  .nb-pk--b.nb-pk--m .nb-pk__buehne { border-radius: calc(var(--nb-radius-card) - var(--nb-space-3xs)); }
  
}

/* Größe L: zwei Spalten breit, Foto links, Preise je Zustand rechts (G26) */

/* ---------- Fotogröße, Schalter foto (Runde 2, 02.10.2026) ----------
   Daniel zum ersten Bild: „die fotos viel zu groß, also ich mag es eher wie bei backmarket, und nicht wie bei rebuy“
   (KRITIK-kategorie-2026-10-02.md, Nachtrag). Back Market: Foto 128 x 128 in einer Karte von 268 x 306 px
   (INVENTAR-backmarket.md). Unsere Fotos stehen hochkant (456 bis 492 x 600), deshalb zählt die Fläche, nicht die Breite.
   klein: Foto rund 115 x 140 in der 291 px breiten Karte M, die Karte 308 statt 435 px hoch. gross: Runde 1, die Regeln
   oben. quer: wie klein, am Handy eine Spalte mit dem Foto links wie Back Market (Spalten in raster/ und karten/).
   Nach Daniels Wahl wandert der gewählte Wert in die Regeln oben und der Schalter fällt weg. */

/* c trägt „Neuer Akku“ oben links, das Foto beginnt darunter */

/* L: schmalere Bildspalte, das Foto oben bündig mit dem Titel */

/* b: Bühne flacher, das Gerät bleibt unten angeschnitten, oben steht Platz für „Neuer Akku“ in jeder Karte gleich */
:is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-pk--b.nb-pk--m .nb-pk__buehne { aspect-ratio: 16 / 10; }
:is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { top: var(--nb-space-xl); width: auto; height: calc((100% - var(--nb-space-xl)) * 1.2); }

@media (max-width: 767px) {
  /* Zwei Spalten: die Karte ist nur 173 px breit, das Foto deshalb verhältnismäßig größer, rund 85 x 110 */
  
  
  :is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-pk--b.nb-pk--m .nb-pk__buehne { aspect-ratio: 1 / 1; }
  
  
  /* quer: eine Karte je Zeile, Foto links in 120 px, Text rechts */
  [data-nb-foto="quer"] .nb-pk--m { flex-direction: row; }
  
  
  [data-nb-foto="quer"] .nb-pk--m .nb-pk__text { padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-s) 0; }
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne { flex: 0 0 120px; aspect-ratio: auto; margin: var(--nb-space-3xs) 0 var(--nb-space-3xs) var(--nb-space-3xs); }
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__text { padding-left: var(--nb-space-s); }
  /* Runde 7 (Daniel 03.10.2026): das Gerät steht immer gleich, wie ohne Pille, die Spar-Pille liegt darüber */
  /* Das Foto wuchs mit der Kartenhöhe: wo die Merkmalzeile zweizeilig wird (etwa „· Musterpreis“), war es 159 statt 131 px
     hoch (Daniel 03.10.2026: „weißt du wieso diese als einziges so verbuggt sind“). Feste Höhe, unabhängig von der Karte */
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { height: 132px; }
  /* 19.10.2026 (Daniel: „ein mini Teil immer abgeschnitten“ wie am Rechner): das Foto hing 48 px unter der Oberkante,
     die Bühne ist aber so hoch wie die Karte (182 px), so lief das Gerät nur 2 px unten raus statt 24 wie am Rechner.
     Jetzt unten verankert, 24 px laufen aus dem Bild, egal wie hoch die Karte durch die Merkmalzeile wird */
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { top: auto; bottom: calc(var(--nb-space-m) * -1); }
  /* Fassung B (Daniel 19.10.2026, _audit/handy-karte-fassungen-2026-10-19.png): Bühne 148 statt 120 px, Foto 160 statt
     132 px hoch. Über dem Gerät steht rund ein Viertel Grau wie am Rechner (29 %), vorher 41 % */
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne { flex-basis: 148px; }
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { height: 160px; }
  /* Eine Karte je Zeile, keine Nachbarn zum Fluchten: die Merkmalzeile hält keine zwei Zeilen frei, sonst stand über den
     Sternen eine Lücke. Die Bühne hält die Karte mindestens 182 px hoch, so bleibt das Grau über dem Gerät bei rund einem
     Viertel, der Preis steht unten (margin-top auto) */
  
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne { min-height: 182px; }
  /* Daniel 19.10.2026 („extrem viel freie Fläche“): der Preis stand per margin-top auto ganz unten, zwischen Sternen und
     Preis klaffte bis zu 60 px Luft. Jetzt folgt er den Sternen, der Textblock steht mittig in der Karte */
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__text { justify-content: center; }
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__preis { margin-top: 0; }
  /* Farbpunkte am Handy als eigene Zeile unter Preis und Neupreis (Daniel 19.10.2026 abends). Auf der Bühne konkurrierten sie
     mit dem Gerät (Pille, 4b Ring, 4a nur Schatten), unten rechts neben dem Neupreis stießen bis zu 190 px Inhalt an 178 px
     Spalte, mit Rabattzeile erst recht. order schiebt sie ans Ende, die Vorlage bleibt gleich. Die Karte wächst um eine Zeile,
     deshalb das Foto 175 statt 160 px hoch, damit über dem Gerät rund ein Viertel Grau bleibt */
  
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { height: 175px; }
  /* Daniel 19.10.2026 spät („manche Cards unterschiedliche Höhen, 16 Pro oben viel Grau, unter dem Preis riesige weiße
     Fläche, 17e so nah am Rahmen“). Gemessen: der leere Neupreis-Platzhalter hielt 24 px plus Abstand zwischen Preis und
     Farben frei (er gleicht nur am Rechner die Reihe an), umbrechende Merkmale machten die Karte 210 statt 190 hoch, und das
     unten verankerte Foto stand dann 51 statt 31 px tief. Das Foto füllte 143 von 148 px Breite (Rechner 78 %).
     Jetzt: kein Platzhalter am Handy, Foto oben verankert, space-xl 48 px unter der Kante (rund ein Viertel), 152 px hoch, rund
     125 px breit, also 12 px Grau links und rechts, unten läuft es rund 18 px aus dem Bild. So steht das Gerät in jeder
     Karte gleich, auch in der höheren Rabattkarte */
  /* Die Leerzeile fällt nur weg, wenn keine Karte der Seite einen Neupreis zeigt (lokal, Schalter aus). Live trägt jede
     iPhone-Karte „… € neu“, dann hält auch die Rabattkarte die Zeile frei, sonst wäre sie 20 px kürzer (Daniel 19.10.2026) */
  
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { top: var(--nb-space-xl); bottom: auto; height: 152px; }
  /* Fassung C (Daniel 19.10.2026: „Gerät kleiner, mehr Platz zum Rand, weniger leeres Grau oben“, Merkmale ohne Farbe).
     Die Karte wird 166 statt 190 px hoch, die Bühne 158. Foto 40 px unter der Kante (unter der Pille, die bei 36 endet),
     132 px hoch, rund 108 px breit, also 20 px Grau links und rechts, unten laufen 16 px aus dem Bild. Unten verankert: die
     Rabattkarte ist durch „Tiefstpreis der 30 Tage vor Rabatt“ (zwei Zeilen) rund 40 px höher, dort steht das Gerät dann
     tiefer und oben ist Platz für Spar- und Akku-Pille übereinander, statt dass die Akku-Pille auf dem Gerät liegt */
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne { min-height: 158px; }
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { top: auto; bottom: calc(var(--nb-space-s) * -1); height: 132px; }
  /* Daniel 19.10.2026 („jede Card soll gleich groß sein, die Handys dürfen sich nicht bewegen“): die Rabattkarte ist so hoch
     wie jede andere, die Tiefstpreis-Zeile ist raus. Zwei Pillen passen in 148 px nicht nebeneinander und übereinander lägen
     sie auf dem Gerät. Am Handy steht deshalb höchstens eine: mit Rabatt und neuem Akku nur „Spare …“ (Daniel: „Spare ist
     wichtiger“), „Neuer Akku“ zeigt dann die Produktseite */
  
  /* Mit Neupreis-Zeile ist jede Karte 190 statt 166 px hoch, die Bühne 182. Das Foto wächst mit (148 statt 132 px), so bleibt
     das Grau über dem Gerät bei rund einem Viertel (50 von 182 px), unten laufen weiter 16 px aus dem Bild, seitlich rund 15 px */
  
  /* Daniel 19.10.2026 („oben wieder so viel graue Fläche“): die untere Rundung des Geräts ist in den Fotos 4,7 bis 5,3 %
     der Bildhöhe, bei 148 px rund 8 px (gemessen an acht Fotos). 10 px Anschnitt verdecken sie mit 2 px Puffer, das Gerät
     steht 6 px höher, oben 44 statt 50 px Grau. Höher geht es nur, wenn die Rundung sichtbar wird */
  [data-nb-foto="quer"] .nb-pk--b.nb-pk--m .nb-pk__buehne .nb-pk__foto { bottom: -10px; }
}

/* ---------- Lime-Marker (komponenten-global.md §7), wie im Angebot n ---------- */
.nb-s-angebot__mk { margin-inline: -4px; padding: 0 6px; border-radius: var(--nb-radius-badge); background: var(--nb-lime); white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Trade-in-Karte (Größe einer Produktkarte) ---------- */

/* Leer bis zur Wahl, dann „bis zu“ in 16 px. Zwei Zeilen Platz sind reserviert, damit nichts springt (G15) */

/* K8 (Qualitätslauf Kategorie, 04.10.2026, M2): „Wert berechnen“ zeigt den Druck am Handy sofort, Fläche
   action-primary-active (design-tokens.json:182) wie ga-karte/sektion.css:184, ohne Übergang nur beim Drücken */

/* a · Lime-Fläche. Bruch farbsystem.md:155 und :337 (Lime auf Hell nie Fläche, Korridor Kategorie unter 0,05 %) */

/* b · weiß mit Modellwahl wie im Rechner. Feld grau in der weißen Karte (Umkehr) */

/* c · Foto oben, Text darunter, Marker im Titel */

/* ---------- Trade-in über zwei Spalten ---------- */

/* S-Weg-Icons: je Schritt ein Icon im Kreis (G17, Ausnahme 29.09.2026), der Kreis grau in der weißen Karte */

/* Auf Lime ist das Feld weiß (Umkehr) */

/* c · dunkel, Bruch web-architektur.md:108 (nie eine dunkle Sektion auf Kategorie oder Liste) */

/* ---------- Trade-in-Karten bei kleinen Fotos (Schalter foto: klein, quer) ----------
   Die Produktkarte M ist mit kleinem Foto 289 px hoch statt 435. Die Trade-in-Karten waren 354 (b), 439 (a), 438 (c) und
   in zwei Spalten 402 bis 502 px hoch und streckten die Produktkarten ihrer Reihe um bis zu 213 px. Deshalb hier knapper:
   Polster s, kleinere Bilder, der Dachsatz fällt weg, wo der Titel dasselbe sagt (G6), der Zusatzsatz der Karten a und c
   fällt weg (G42), die Schritte stehen als Zeichen ohne Kreis. Ziel ist die Höhe einer Produktkarte. Ohne Dachzeile ist
   das ein benannter Bruch (TI-DACH in raster/sektion.mjs, brand-design.md:462), Daniel entscheidet. */

/* „Bis zu“ mit Stand braucht bei 250 px drei Zeilen, die Zeilen sind reserviert (G15). Unter 1296 px wird die Karte
   schmaler (233 px bei 1100, 224 bei 768), dort sind es vier (zustands-pruefer 02.10.2026, Befund 1) */

/* Das Auswahlfeld bleibt in der Karte: die Spur des Feld-Rasters schrumpft mit, sonst schob der längste Name
   („iPhone SE (3rd generation)“) das Feld 25 px über die Nachbarkarte (zustands-pruefer 02.10.2026, Befund 4) */

/* Zwei Spalten: Bild ein Drittel, Text zwei Drittel, Titel in heading-02. Nur ab 768 px, darunter bleibt die eine Spalte
   von oben (design-auditor B 02.10.2026: sonst lief das Bild am Handy unter den Text) */

/* Unter 1296 px ist die breite Karte nur 474 bis 490 px breit, das Bild nimmt dort ein Viertel, damit der Satz nach der
   Modellwahl in zwei Zeilen bleibt (zustands-pruefer 02.10.2026, Befunde 2 und 3) */

/* Die Dachzeile der breiten Karten steht seit Runde 3 wieder (brand-design.md:462), mit Karte b sind die Reihen 329 px hoch */

/* Schritte als Zeichen 20 px ohne Kreis (G17 Grundregel, brand-design.md:394, Strich 1,83 px). Der Kreis 40/22 aus
   komponenten-tradein.md:568 passt nicht in die Kartenhöhe, 24/14 stand auf keiner Leiter (design-auditor B 02.10.2026) */

/* ---------- Runde 3 (Daniel 02.10.2026 nachts) ----------
   Trade-in-Karte b ohne leere Mitte: b2 Feld und Betrag zusammen in einer grauen Fläche, b3 erst ein Gerät, dann an
   derselben Stelle der Betrag. Breite Karte: a mit eingerücktem Bild wie die Bühne der Karte b („das bild so unbündig“),
   d Weg in einer Linie, e Altgerät als Produktkarte. Werte nach VORGABEN-kategorie-runde3-design-2026-10-02.md */
/* Fläche ink-100, Radius 16, Polster 12 wie m-info-band. Betrag in price-01 (34/28, Night, proportional, 17,57:1),
   „bis zu“ davor in body-01 ink-700 (7,71:1), in einer Zeile statt zwei, damit die Karte so hoch bleibt wie ihre Reihe */

/* Auf der grauen Fläche ist das Feld weiß (Umkehr G29) */

/* Dachzeile und Titel gehören zusammen: 4 px statt des Abstands der Karte */

/* Das alte iPhone steht wie auf der Bühne der Karte b, unten angeschnitten, der weiße Fotogrund per multiply */

/* K11 (Qualitätslauf Kategorie, 04.10.2026, R14): die Fotos sind 441 × 600, width und height sagen 456 × 600. Ohne Bild
   nahm die Box 456 × 600, mit Bild 441 × 600, 4,5 px Versatz. Die Box steht jetzt immer auf 456 × 600, das Foto darin per
   object-fit contain (.nb-pk__foto), ohne Bild bleibt der Platz leer */

/* Breite Karte a: Bild eingerückt wie die Bühne der Karte b (space-2xs, Radius input) */

/* Breite Karte d: Weg in einer Linie, S-Weg-Icons ohne gefüllten Schritt (komponenten-strecke-konto.md:701) */

/* Linie 2 px Haarlinie von Kreis zu Kreis, unter den Kreisen (Falle 26.09.2026: z-index) */

/* Breite Karte e: die linke Hälfte ist so breit wie eine Produktkarte (Spaltenabstand wie das Raster) und trägt die
   Bühne der Karte b, rechts die vier Schritte */

/* Titel auf der Höhe der Produkttitel daneben: dort steht über dem Titel die Zeile Farbfelder (24 px) */

/* Die Dachzeile steht in der Höhe der Farbpunkte (24 px) der Produktkarten daneben, so liegen die Titel auf einer Linie */

/* ---------- Runde 3: Streichpreise zum Vergleich auf Karte b (Raster d und e) ----------
   Werte nach VORGABEN-kategorie-runde3-design-2026-10-02.md */

/* Spar-Pille Mint mit mint-ink (5,76:1), Preis in mint-ink (9,02:1, Bruch typografie.md:91 Preis immer Night, Daniel
   will ihn grün). Streichpreis body-01 ink-600 (5,97:1, typografie.md:241) */

/* Schalter akku (Runde 3, Daniel: „Hintergrundfarbe bleibt im skyblue aber die schriftfarbe … den ähnlichen ton aber
   nur dunkler“). Keine Sky-Stufe schafft 4,5:1 auf surface-stage (sky-700 2,83:1). sky: sky-900 #3C4686, 7,21:1, derselbe
   Farbton, aber eine neue Stufe (Bruch farbsystem.md:142, gilt nur mit Daniels Ja). signal: signal-700, 5,98:1, besteht,
   heißt aber sonst klickbar (Bruch farbsystem.md:37). Werte VORGABEN-kategorie-runde3-design-2026-10-02.md */
.nb-v3 { --nb-sky-900-probe: #3C4686; }

@media (prefers-reduced-motion: reduce) {
  .nb-pk, .nb-pk__farbe span, .nb-tk__knopf, .nb-tk__knopf svg, .nb-pk__weiter svg { transition: none !important; }
}

/* Runde 3 (zustands-pruefer Befund 1): mit gesetztem Zustand zeigt die Sale-Karte den Preis dieses Zustands ohne Rabatt */

/* Befund 11: Abstand Dachzeile zu Titel wie Farbpunkte zu Titel bei Karte b (margin 4 plus gap 4) */

/* ---------- Runde 4 (Daniel 03.10.2026) ----------
   Werte nach VORGABEN-kategorie-runde4-design-2026-10-03.md */
/* sky-900 ist seit dem 03.10.2026 eine Stufe der Skala (Daniel: „neue Stufe ist viel besser … so chips sehen viel viel
   besser aus“), Alias text-on-stage. Bis design-tokens.json neu gebaut ist, steht der Wert hier. coral-100 ist der
   Vorschlag des design-auditor für die Coral-Karte und gilt erst mit Daniels Wahl */
.nb-v3 { --nb-sky-900: #3C4686; --nb-text-on-stage: var(--nb-sky-900); --nb-coral-100-probe: #FFDFDB; }
/* Ton in Ton (Daniel: „ab jetzt immer ton in ton“): die Merkmal-Pille trägt sky-900 auf surface-stage, 7,21:1. Die
   Spar-Pille ist es schon (mint-ink auf mint, 5,76:1). Schalter akku night zeigt den alten Stand zum Vergleich */

/* Pillen auf der Bühne 8 px auseinander (komponenten-global.md:82), vorher 4 */

/* Sale nach e gewählt („E ist perfekt“), dazu „mach das ab und das 903 gerne auch in grün“: „ab“ body-02 und Streichpreis
   body-01, beide mint-ink (9,02:1). Greift der Rabatt nicht, fallen alle drei zurück */

/* Raster g: Karten ohne Neupreis halten die Zeile frei, damit jede Reihe gleich hoch ist (ux-pruefer Runde 4) */

/* b3 ohne Dachzeile: die graue Fläche nimmt den frei gewordenen Platz, Gerät und Betrag stehen größer */

/* Runde 5 (Daniel 03.10.2026): nach der Wahl bleibt das gewählte Modell im Bild, unten angeschnitten wie vorher.
   Schalter wert: w1 Modell rechts, Betrag links. w2 Modell mittig, Betrag als weißes Preisschild unten links.
   w3 Modell mittig, Betrag unter der Fläche. heute nur der Betrag (Runde 4) */

/* K11 (04.10.2026): mit der festen Box 456 × 600 steht das Foto rechts in der Box, so bleibt es am selben Platz wie vorher */

/* Daniel 07.10.2026 („das Handy buggt im Preis“): ab 1300 px ist die Fläche 250 px breit, das Foto begann bei 96 px, der Betrag
   endete bei bis zu 115 px („1.184 €“), 28 von 31 Modellen lagen unter oder an dem Foto. In schmaler Fläche ist das Foto
   kleiner, Betrag und Foto halten mindestens 12 px Abstand. Am Handy ist die Fläche ab 256 px breit (320 px), dort bleibt es */

/* Bild bleibt im rechten Teil neben dem Betrag (max-width 58 %), bei jeder Breite und jedem Modell. Breite = Höhe × 456/600.
   Daniel 16.10.2026: 17 Pro lief bei 250 px Fläche 22 px unter den Betrag, alle 27 Modelle gemessen */
/* Daniel 18.10.2026 („warum schwebt das iPhone 17 Pro Max oben“): mit der Breitengrenze war das Foto kürzer als die Fläche
   (117 in 135 px) und stand ganz frei. Es rutscht jetzt so weit nach unten, dass ein Viertel unter der Kante verschwindet,
   wie das Startbild. Ist es hoch genug, bleibt es oben bei space-s. --nb-tk-mh trägt die Höhe für height und top */

/* Breite Karte f bis i in der Ordnung von Back Market: getönte Fläche, links Titel, Satz und Knopf, rechts das Foto mit
   eigenem farbigem Grund, 8 px eingerückt mit Radius 16 wie die Bühne der Karte b. Text 3fr, Foto 2fr. Titel heading-02
   Night, Satz body-01 ink-700, 8 px dazwischen, 16 px bis zum Knopf. Knopf Signal, gegen Sky 4,34:1, gegen Coral 4,20:1.
   Bruch farbsystem.md:90 und :608 (Sky als große Fläche) und :235 (Coral nur Sale), Daniel 03.10.2026 */

/* Das Foto bestimmt die Höhe nicht, es füllt, was Text und Reihe vorgeben */

/* Zwischen 768 und 1295 px steht die Karte allein in ihrer Zeile, das Foto bekommt eine feste Breite statt der Hälfte */

/* design-auditor B Runde 4 (PRUEFUNG-kategorie-runde4-design-2026-10-03.md) */
/* 1: die Spar-Pille bleibt mint-ink, sky-900 gilt nur für die Merkmal-Pille */

/* 8: Neupreis 4 px unter dem Preis (gap 4 der Spalte, ohne eigenen Rand) */

/* Rabattpreis (Daniel 04.10.2026 abends): unter dem Streichpreis lesbar „Tiefstpreis der 30 Tage vor Rabatt“
   (DOSSIER-recht-kategorie-2026-10-03.md Punkt 2, BGH I ZR 183/24), darf am Handy umbrechen */

/* 17: der Platzhalter hinter dem Foto hat den gemessenen Grund des Fotos, nicht den Token, sonst springt beim Laden die
   Farbe um (G15). Sky-Foto #859EDA, Coral-Foto #D76255 (image-curator 03.10.2026, Ecken und Randmitten) */

/* zustands-pruefer Runde 4, Befund 11: die breite Karte ist als Ganzes klickbar (der Knopf spannt seine Fläche über die
   Karte) und hebt beim Hover den Schatten (G28) */

 /* OE 94 Punkt 6 */

/* baukasten/sektionen/kat-filter/sektion.css */
/* Filter und Sortieren der Kategorie. Werte VORGABEN-kategorie-design-2026-10-02.md §3 und §4, Lücken dort benannt:
   Pille ab 36 px (hier 48 für Touch und Lesbarkeit), voll rund, 14 px in 600 statt 400 (Daniel „klein und dünn“),
   auf K1 weiß mit sh-ruht oder grau in einer weißen Karte (Umkehr G29). Fenster nach S-Fenster: Scrim ohne
   Weichzeichner (G4), Radius 24, sh-schwebt. Hover nur über Fläche oder Schatten (G28). */

/* Der ganze Platz klebt unter dem Shop-Kopf. --nb-kf-oben setzt das Verhalten aus der Unterkante des Kopfs */

/* Runde 7: beim Hochscrollen fährt die Leiste hinter dem Kopf nach oben weg, mit Tastaturfokus darin bleibt sie */

/* zustands-pruefer 05.10.2026: mit offener Liste bleibt die Leiste auch ohne Fokus stehen. Der Mausdruck auf eine Wahl nimmt
   den Fokus aus der Leiste, sie fuhr weg (y 0 auf -96), das Loslassen traf die Karte dahinter und die Wahl ging verloren */
/* Am Handy 07.10.2026: nur ein Tastaturfokus hält die Leiste, ein getipptes „Filter“ hielt sie für immer fest */

/* Runde 4 (Daniel 03.10.2026): ab der Filterleiste ist sie der Kopf. Das Verhalten setzt nb-kf-kopfaus, solange der Platz
   der Leiste unter dem Kopf liegt, die Klasse schlägt is-hidden aus nb-kopf.js (Werte wie nb-kopf.css:1126-1138) */

/* Am Handy 07.10.2026: beim Hochscrollen hinter der Leiste kommt der Kopf sofort, nb-kopf.js wartete 100 px. Kopf und Leiste
   fahren gleich lang (motion-transform, Kopf sonst 250 ms), so übergeben sie ohne Lücke und ohne Doppel */

/* Der klebende Platz bildet einen eigenen Stapel (z-index 60). Ein statisch offenes Fenster muss daraus heraus, sonst liegt
   es unter dem Shop-Kopf */

/* Pillen */

/* OE 94 Punkt 6 (Daniel 05.10.2026, design-auditor A 04.10.2026): Druck ohne Verzögerung. Graue Pille ink-300 (Night darauf
   per farbcheck), gesetzte Pille bleibt surface-stage (Regel unten, kein Wert) */

/* Runde 6: „Nach oben“ als runder Knopf wie die Pillen, nur sichtbar, wenn die Leiste klebt und der Schalter an ist */

/* OE 94 Punkt 6: Night-Knopf wird im Druck heller, dark-surface (farbsystem.md:381, einzige hellere Stufe über Night) */

/* Gesetzt: die Zahl ist das zweite Merkmal neben dem Wort (Lücke im Werte-Dokument, design-auditor §3) */

/* Schwebende Karte je Pille (G4) */

/* Schließen 150 ms ease-out wie die Aufklappliste, Fassung C (Daniel 09.10.2026) */

@keyframes nb-kf-rein { from { opacity: 0; transform: scale(var(--nb-motion-liste-scale)); } }

/* Fassung b: weiße Pillen direkt auf dem Grund (K1), Hover nur stärkerer Schatten */

/* Sortieren in drei Fassungen, der Schalter steht am main als data-nb-sortieren */

/* S-Wahl-ohne-Fläche: Haken und „Gewählt“, keine Fläche */

/* c: Reiter in der Zeile über dem Raster */

/* Zeile über dem Raster: Anzahl und gesetzte Filter (im Platz raster) */

 /* OE 94 Punkt 6: weiße Fläche wechselt den Schatten */

/* Qualität Kategorie K3 (04.10.2026): Meldung direkt über „Weitere Geräte anzeigen“, angelegt von nachladen() im
   Verhalten. Werte wie .nb-bw__meldung (bewertungen/sektion.css:110) und .nb-kr__meldung (nb-kategorie-jtl.css:49) */

/* ---------- Fenster ---------- */

/* Nach Finger oder Maus trägt das Fenster selbst den Fokus (nb-kategorie.js fensterAuf), ohne Rahmen */

/* Scrim blendet mit motion-farbe ein (komponenten-strecke-konto.md:376), gebaut wie das S-Fenster im Konto
   (verkaeufe/sektion.css:159-162). Ausblenden steht darunter (Fassung C, Daniel 09.10.2026) */

@keyframes nb-kf-scrim { from { opacity: 0; } }
/* 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 */

/* Statisch offenes Fenster (Zustand fenster) liegt nicht im Top-Layer, deshalb über dem Shop-Kopf (z-index 100 und 101) */

/* Rechts: Panel mit 12 px Abstand zum Rand, ganze Höhe */

/* Qualität Kategorie K7 (04.10.2026): Eintritt eines Fensters mit motion-fenster und seiner Kurve (farbsystem.md:588-591),
   nicht mit der Seiten-Dauer. Richtung bleibt der Einschub von rechts. Der Rückfall in var() steht, weil
   themes/nextbuy/nb-tokens-v3.css im Template die beiden Token noch nicht führt (nur assets/nb-tokens-v3.css:146-147) */

@keyframes nb-kf-rechts { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
/* Mitte: S-Fenster 520 px (komponenten-strecke-konto.md:365-374) */

@keyframes nb-kf-mitte { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* design-auditor B 05.10.2026: Druck sofort, Fläche action-primary-active (design-tokens.json:182), wie karte.css .nb-tk__knopf--signal */

/* Gruppen im Fenster und in der Spalte */
.nb-kf__gruppe { border-top: 1px solid var(--nb-border-hairline); }
.nb-kf__gruppe:first-child { border-top: 0; }
.nb-kf__gruppe summary { display: flex; align-items: center; gap: var(--nb-space-2xs); min-height: 56px; cursor: pointer; list-style: none; transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-kf__gruppe summary:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
.nb-kf__gruppe summary::-webkit-details-marker { display: none; }
.nb-kf__gruppe summary svg { width: 20px; height: 20px; margin-left: auto; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve-bewegung); }
.nb-kf__gruppe[open] summary svg { transform: rotate(180deg); }

/* S-Haken (komponenten-strecke-konto.md:407-416): Kasten 24, Rand 2 px border-control, Radius 8, gewählt Signal */

/* Der Haken wächst beim Setzen aus der Mitte (Daniel 17.10.2026: „fix alles, wo es keine Animation gibt“) */

/* Werte ohne Gerät blendet die Liste aus, gewählte bleiben (Daniel 17.10.2026, Fassung A, löst U1.4 „grau stehen lassen“
   ab). Nur solange in Karte oder Gruppe noch etwas Wählbares steht, sonst bleibt der graue Stand (Akku mit 0). Eine Serie
   ohne sichtbares Modell fällt mit weg. Rein, raus und Nachrücken bewegt werteGleiten() in nb-kategorie.js */

/* Modell: Suche und Serien */

/* Daniel 04.10.2026 abends: „was ist das für ein hässliches x“. Natives X des Browsers aus, eigenes X wie in jedem Feld
   (komponenten-formular.md:107, Aussehen .nb-su__leeren aus nb-feld.css), sichtbar nur mit Text */

/* Nachmessung 04.10.2026 (ZIEL): das X der Modellsuche hat 44 px Trefferfläche, das Feld ist 48 px hoch */

/* Zustand: Kacheln grau in der weißen Fläche (Umkehr), gewählt wie die Rechner-Kachel (G1, Bruch farbsystem.md:102) */

/* Beim Tippen ist :active noch an, wenn die Wahl umspringt. Ein transition nur auf scale ließ Fläche und Rand dann in einem
   Frame wechseln, nur mit der Maus glitt es (Daniel 17.10.2026, gemessen am Handy). Deshalb Farbe und Schatten im Druck mit */

/* Speicher und Größe: Chips */

 /* OE 94 Punkt 6 */

/* Farbe: Familien als Punkte mit Namen, Ring border-control (Silber allein 1,24:1) */

/* OE 94 Punkt 6: das Farbfeld zeigt im Druck den Ring der Wahl */

/* Ring und Haken der Farbe kamen ohne Übergang (Daniel 17.10.2026) */

/* Preis: Regler mit zwei Griffen und zwei Felder (komponenten-formular.md:49-67, Regler ist eine Lücke) */

/* Fassung b: gewählt als Night-Fläche statt Hellblau (Bruch farbsystem.md:50) */

/* Handy: zwei Knöpfe, Filter und Sortieren, das Fenster füllt den Bildschirm (ux U1.12) */

/* Runde 4 (zustands-pruefer Befund 4): die Leiste ist jetzt der Kopf und bleibt einzeilig. Was nicht in eine Zeile passt,
   steht nur im Fenster „Alle Filter“. Bis 1239 px ohne Akku und Farbe (bei 1200 brach sie mit zwei gesetzten Filtern noch um), bis 1023 px auch ohne Speicher und Preis
   (vorher bis 1099 px ohne Akku und Farbe, die Pillen brachen bei 1100 bis 1150 und 768 bis 910 px um, 136 statt 80 px) */

@keyframes nb-kf-blatt { from { transform: translateY(100%); } to { transform: none; } }

/* Neue Zahl im Knopf „X Geräte anzeigen“ gleitet ein (zeigenText in nb-kategorie.js), der Haken am Gruppenkopf springt
   nicht auf, sondern wächst (Daniel 17.10.2026). Während die Zahl lädt (aria-busy), steht die alte Zahl gedimmt */

@keyframes nb-kf-zahl { from { opacity: 0; transform: translateY(6px); } }

@keyframes nb-kf-pop { from { opacity: 0; scale: .5; } }
@media (prefers-reduced-motion: reduce) {
  
  .nb-kf__pk svg, .nb-kf__gruppe summary svg, .nb-kf__kasten, .nb-kf__kasten svg { transition: none; }
  
  
}

/* ---------- Runde 4 (Daniel 03.10.2026) ----------
   Gesetzt heißt Sky-Fläche ohne Zahl, keine Chips unter der Leiste, Löschen oben in der schwebenden Karte und im Fenster.
   Werte nach VORGABEN-kategorie-runde4-design-2026-10-03.md (§4, §5, §7) und VORGABEN-kategorie-runde4-ux-2026-10-03.md */

/* Gesetzte Pille Ton in Ton: surface-stage mit sky-900 (7,21:1), dazu der Haken als zweites Merkmal (farbsystem.md:611),
   16 px, 8 px vor dem Wort. Hover und offen bleiben surface-stage, eine eigene Hover-Stufe gibt es nicht (Lücke) */

/* „Alle Filter“ und „Filter“ am Handy bleiben Night mit dem Regler, auch gesetzt (Runde 5, Daniel 03.10.2026) */

/* Gruppenköpfe im Fenster: der Haken statt der Zahl, die Zahl bleibt für Screenreader */

/* Die Zahl liest der Screenreader aus data-nb-kf-gsr („, 1 gesetzt“), sichtbar steht nur der Haken */

/* Gewählter Chip im Fenster Ton in Ton: Schrift und Haken sky-900 (bricht komponenten-global.md:60-62, Haken in Signal) */

/* Kopf der schwebenden Karte: Gruppe in heading-03 links, Löschen rechts, mindestens 44 px, Haarlinie darunter */

/* Löschen gesperrt: ink-600 (5,97:1) ohne Unterstrich, bleibt im Tab-Weg */

/* Fensterkopf: Titel, Alle löschen, Schließen, nicht Rand an Rand (ux-pruefer Runde 4) */

/* Fenster Zustand: der Überbegriff in Night (17,57:1 auf ink-100), Satz und Preis bleiben ink-700 (Daniel: „damit eine
   stärkere hierarchie entsteht“). Vorher erbte alles den Fließtext-Ton */

/* Kopf per Tastatur: Fokus im weggeschobenen Kopf holt ihn zurück (Checkliste 13.19, WCAG 2.4.11), Sprungziele bleiben
   unter der klebenden Leiste sichtbar */

/* scroll-padding-top setzt das Verhalten aus der echten Höhe der Leiste (Befund 3) */

/* Der Pfeil dreht sich beim Öffnen, der Haken nicht (sonst stand er als zweiter Pfeil da) */

/* design-auditor B Runde 4 (PRUEFUNG-kategorie-runde4-design-2026-10-03.md) */
/* 13: der Haken im Gruppenkopf dreht nicht mit dem Pfeil, steht links am Titel, 16 px */

/* 14: Löschen 44 px hoch, der Kopf bleibt mit 4 px Polster bei 52 px */

/* 3: „Vorschlag“ Ton in Ton in body-02 statt 12 px Night */

/* 20: der Schatten der klebenden Leiste kommt in 250 ms wie der Kopf. Am Handy 07.10.2026: transform gehört dazu, diese Regel
   schlug die aus Runde 7 weiter oben, die Leiste sprang weg statt zu fahren */

/* zustands-pruefer Runde 4 (BEFUNDE-kategorie-runde4-2026-10-03.md) */
/* 10: im statischen Werkstatt-Zustand „Fenster offen“ steht die Leiste an ihrem Platz */

/* 12: „Alle löschen“ im Fensterkopf 44 px hoch */

/* baukasten/sektionen/raster/sektion.css */
/* Produktraster. Vier Spalten ab 1100 px, drei ab 768, zwei darunter. Abstand space-m, am Handy space-xs.
   Trade-in-Karten über Schalter am main (data-nb-tausch, data-nb-breit), Nachladen über data-nb-laden. */

.nb-kr { display: block; }

/* Spalte links, nur mit Filter-Fassung c (K2) */

/* Trade-in-Einschübe: eine Fassung sichtbar je Schalter */

/* Runde 4: breite Karte in der Ordnung von Back Market, Sky und Coral */

/* Mittelbreiten (Runde 4, Vorschlag aus OE 79 ohne Widerspruch): zwischen 768 und 1295 px nimmt die Trade-in-Karte an
   Platz 1 zwei Spalten und die breite Karte die ganze Zeile. Die Karten waren dort 224 bis 290 px schmal und streckten
   ihre Reihe um 18 bis 70 px (zustands-pruefer Runde 3). Wo die breite Karte steht, rechnet das Verhalten mit der Spanne */

/* Schalter foto: quer (Runde 2, 02.10.2026), am Handy eine Karte je Zeile mit dem Foto links wie Back Market */

/* Trade-in als Pille über dem Raster, wie Back Market (Schalter tausch: pille) */

 /* OE 94 Punkt 6 */

/* Weitere Modelle anzeigen, mit Zähler und Fortschritt (ux U4.1) */

/* OE 94 Punkt 6 (Daniel 05.10.2026): Druck ohne Verzögerung. Weißer Knopf wechselt den Schatten, Night-Knopf wird heller
   (dark-surface, farbsystem.md:381) */

/* Seitenzahlen (Schalter laden: seiten) */

 /* OE 94 Punkt 6 */

/* Keine Treffer und leere Kategorie: eine weiße Karte, kein Kleintext (G32) */

/* Stil-T-Figur bei keinen Treffern und bei der Suche ohne Treffer (Task kategorie-figuren, 03.10.2026). Daniel: frei auf
   dem Grund, ohne weiße Karte, benannter Bruch gegen G41. Der Bildgrund ist K1, deshalb keine sichtbare Bildkante */

/* Entscheid 94 Punkt 2 (05.10.2026): „Gerade lieferbar“ unter der Suche ohne Treffer, vier Karten im Raster der Liste */

/* K11 (Qualitätslauf Kategorie, 04.10.2026, R14): aspect-ratio hält die Box 480 × 358 auch ohne Bild, der Platz bleibt leer */

/* zustands-pruefer Runde 5 Befund 2: bei 281 px schob die Figur Meldung und Knöpfe am Handy aus dem ersten Bildschirm */

/* Runde 3 (zustands-pruefer Befund 16): Quelle und Bezug der Streichpreise unter dem Raster */

/* baukasten/sektionen/bewertungen/sektion.css */
/* Bewertungen (Werkstatt kategorie Runde 8b, 03.10.2026 abends). Werte VORGABEN-kategorie-runde8-design-2026-10-03.md §1:
   Karte weiß ohne Rand mit sh-ruht (kg:334-342), Zahl display-02 600 Night, Satz body-01 ink-700, Nebentext body-02
   muted, Sortieren dd() 48 x 248. Bestätigter Kauf als Pille auf surface-component mit Siegel success-solid, kein Rot
   (G38). Karte nach Back Market: Kopf, ganzer Text, Gerätekasten, Hilfreich. */

/* Die Spalte reicht bis zur letzten Bewertung, darin klebt die Kopfkarte so tief, als stünde der Shop-Kopf da.
   --nb-bw-oben ist seine tiefste Unterkante (Daniel 03.10.2026) */

/* Note */

/* c: Kopfkarte */

/* Liste und Sortieren */

/* Sortieren steht auf dem K1-Grund: weißes Feld mit sh-ruht wie in der Filterleiste b (Umkehr-Regel) */

/* Karte */

/* Fuß: Gerätekasten und Hilfreich */

 /* OE 94 Punkt 6: graue Pille im Druck ink-300, gedrückt (aria-pressed) gewinnt die Regel darunter */

/* Kategorie-Port S4 (04.10.2026). Zeile zur Echtheit an der Note und Erklärung unter der Liste
   (DOSSIER-recht-kategorie-2026-10-03.md Punkt 3, Fassung B). Werte wie Notesatz und Echtheitssatz (body-02 muted), Link wie
   „Gerät ansehen“, Erklärung als weiße Karte wie eine Bewertung, unter der Liste wie „Weitere Bewertungen“ (G49) */

/* Die Sprungmarke landet unter dem klebenden Kopf, so tief wie die Kopfkarte klebt */

/* Ohne Netz: weiße Karte wie die Meldung über dem Raster (nb-kategorie-jtl.css), nichts steht frei */

/* Platzhalter beim Nachladen (.nb-skelett aus nb-tradein.css, farbsystem.md:548 ink-100 mit Licht #F9FAFC wie dort) */

/* Kein content-visibility (07.10.2026, kategorie-fenster-ruckeln): nach Drehen oder Breitenwechsel behielt die Sektion
   die gemerkte Höhe der alten Breite, der Sprung dorthin zählte 0,49 bis 0,84 Layout-Shift (ohne 0). c52ae3a zurückgenommen */

/* baukasten/sektionen/paket/sektion.css */
/* Was im Paket liegt (Runde 8, Teil B). Werte VORGABEN-kategorie-runde8-design §2a: eine weiße Karte (E2) mit Polster 8,
   Bild 8 px eingerückt mit Radius 16, Text 3fr und Bild 2fr wie die breite Karte, Zusagen auf ink-100 mit Radius 16,
   Polster 12, Spalt 12, Zeichen 24 px Night in weißer Kachel 40 x 40 mit Radius 8 (kg:367-377), Titel heading-01. */

/* baukasten/sektionen/tausch-band/sektion.css */
/* Trade-in am Ende (Runde 8, Teil B). Werte VORGABEN-kategorie-runde8-design §2b. */

/* design-auditor B 05.10.2026: Druck sofort, Fläche action-primary-active (design-tokens.json:182) */

/* baukasten/sektionen/langtext/sektion.css */
/* Langer Text (Runde 8, Teil C). Werte VORGABEN-kategorie-runde8-design §3 aus komponenten-hilfe.md (kh:71-111):
   Spalte frei auf K1 bis 32em, Raster 780 / 32 / 340 mit Rand, Abschnitt 56 px davor (Handy 40), Zwischenüberschrift
   heading-02 600 −0,01em Night mit 16 px danach, Absatz body-01 ink-700 mit 16 px Abstand, Silbentrennung an,
   Fall-Liste mit Punkt 6 px und Begriff in 600, Link signal-700, Sprungliste als weiße Karte, Fragen als freie
   Aufklapper mit 62 px Kopfzeile ohne Linien (G41 Lesetext), Streichpreis-Satz legal-01 ink-600 ganz am Ende. */

/* K15 (04.10.2026): .nb-lt__link steht nur als eigene Zeile (absatz, verkaufen), Trefferfläche 44 px (kh:155, kh:94)
   ohne Bildänderung wie bewertungen/sektion.css:64. Rand −12,5 px = (44 − 19) / 2, Zeile bleibt 24 px hoch */

/* K9 (04.10.2026): Hover war action-primary-hover = text-link (#473BDA), also unsichtbar. Hover und Druck signal-800 (kh:78, kh:64) */

/* design-auditor B 04.10.2026: Farbwechsel über motion-farbe wie .nb-lt__sprung a, ohne 0-s-Druck (Messwerk NULLWECHSEL) */

/* Klapp-Überschrift: am Rechner eine reine Überschrift, am Handy der Schalter */

/* Sprungliste am Rand, weiße Karte, nicht klebend */

/* Fragen als freie Aufklapper ohne Karte und ohne Linien */

/* OE 94 Punkt 7 (Daniel 05.10.2026): beim Überfahren wird nur der Pfeil Signal-blau, wie auf /verkaufen (fragen/sektion.css:15-16) */

/* Fassung b: Weiterlesen */

/* Ganz am Ende: Markenhinweis und Streichpreis-Satz als echter Rechtstext */

/* K10 (04.10.2026): Ohne Skript steht der Text am Handy offen wie die Lesespalte (Werte wie oben: 40 px vor dem Abschnitt,
   space-s unter der Überschrift), die Knöpfe sehen nicht klickbar aus. Mit Skript gilt nur der Block darüber, das Zuklappen
   greift ab dem ersten Bild, also kein Sprung. Vorbild nb-kategorie-jtl.css:55. Rest: die sechs Knöpfe bleiben ohne Skript
   als Knopf im Baum (niedrig) */

/* Kein content-visibility (07.10.2026): nach Breitenwechsel zählte der Sprung zum Langtext 0,56 bis 0,96 Layout-Shift,
   Herleitung in bewertungen/sektion.css am Ende */

/* Reduzierte Bewegung: Fenster blenden weich ein und aus, ohne Weg (Daniel 14.10.2026: „nicht instant“, tokens.json
   blatt.regel „nur Deckkraft“). !important schlägt die globale .01-ms-Regel aus nb-tokens-v3.css, nur für Fenster */

/* 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) */

/* ---------- Trade-in-Karte T4b (Daniel 19.10.2026: „t4b ist top bauen“) ----------
   Night-Karte im Raster, Bühne oben auf derselben Höhe wie die Bühnen der Produktkarten, Ton in Ton (Navy raised),
   Feld Navy, Knopf Lime wie der Knopf der dunklen Leiste (action-bar-button, Night auf Lime 16,3:1). Die Fotos sind
   freigestellt (produktbilder-frei/, tools/bild/freistellen.mjs), multiply würde das Gerät auf Navy abdunkeln.
   Bühne wie .nb-pk--b .nb-pk__buehne im Modus klein und quer: 2xs eingerückt, 16:10, Foto ab xl, (Höhe − xl) × 1,2.
   Zwischen 768 und 1295 px nimmt die Karte zwei Spalten, die Höhe rechnet sich dort aus der Nachbarspalte. */

/* Aufklappliste im selben Stil (Daniel 19.10.2026: „den Toggle auch in dem Stil, der ist ja noch weiß“): Karte Navy
   raised wie das Feld, Zeile im Hover, mit Tastatur und gewählt border-dark-hairline (on-dark 11,7:1), Haken Lime */

/* Handy: eine Karte je Zeile, Bühne 166 px wie am Rechner bei 1440. Neben ihr steht keine Produktbühne, deshalb fluchtet
   sie mit Feld und Knopf, ringsum space-s, oben so viel Rand wie unten (Daniel 19.10.2026: „bündig mit dem Button und dem
   Dein-iPhone-Ding, oben und unten mehr Abstand, symmetrisch“). Radius wie das Feld */

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

.nb-kk { display: flex; flex-direction: column; gap: var(--nb-space-s); }

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

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

/* Vorteilsleiste (G31): grau ohne Trennlinien und Schatten, jedes Zeichen in einer weißen Kachel */
/* position: relative, sonst hängt der Screenreader-Text (.nb-s-sr, absolut) am Abschnitt und schiebt die quer scrollende
   Leiste am Handy über den Rand (gemessen 02.10.2026: 965 px statt 390) */

/* Kategorie-Port S4 (04.10.2026): Zeile zur Echtheit unter der Note, body-02 muted, Link wie „Gerät ansehen“ in den
   Bewertungen. Kontrast muted auf ink-100 per farbcheck.mjs */

/* Im Kopf stehen Zeile und Link untereinander, sonst wird die Kachel am Handy breiter als der Bildschirm (414 px gemessen) */

/* K2 (04.10.2026, WCAG 2.1.1): Die Leiste trägt tabindex="0" (sektion.mjs vorteile(), nb-kat-kopf.tpl), damit sie am
   Handy per Tastatur quer scrollt. Fokus wie überall (.nb-s :focus-visible in kern/schale.css:177), hier nur mit einer
   Klasse mehr, damit die Reihenfolge im Bündel nicht entscheidet */

/* Am Handy quer scrollend wie Back Market, sonst stünden vier Zeilen vor der ersten Karte (ux U5.1) */

/* Reihe ohne Kasten (Fassung c): Zeichen 24 px frei, Text daneben, keine Pille */

/* Heute, nachgebaut aus nb-collection.css:30-127 zum Vergleich */

/* Runde 3: Untertitel zum Vergleich, Schalter unter am main (seiten/kategorie.mjs). Ohne Schalter der erste */

main:not([data-nb-unter]) .nb-kk__unterf:first-child,
main[data-nb-unter="heute"] [data-nb-unterf="heute"], main[data-nb-unter="a"] [data-nb-unterf="a"],
main[data-nb-unter="b"] [data-nb-unterf="b"], main[data-nb-unter="v1"] [data-nb-unterf="v1"],
main[data-nb-unter="v2"] [data-nb-unterf="v2"] { display: inline; }

/* baukasten/sektionen/vm-kopf/sektion.css */
/* Kopf der Ankauf-Modellseite. Abstand zum Shop-Kopf wie die Kategorie (kat-kopf/sektion.css:4). */

.nb-kk__krumen a:active { color: var(--nb-ink-700); }
/* H1 frei (G41), alles andere in einer weißen Karte. H1 wie der Gerätename der
   Produktseite 24/28 (G55, Back Market setzt „iPhone 13 verkaufen“ rund 27 px), Betrag display-02 24/40. */

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

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

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

.nb-v3 .nb-vmk__bis { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-v3 .nb-vmk__betrag { margin: var(--nb-space-3xs) 0 0; font-size: var(--nb-t-display-02); font-weight: var(--nb-weight-semibold); line-height: 1.08; letter-spacing: -0.03em; color: var(--nb-text-heading); font-variant-numeric: lining-nums tabular-nums; }
.nb-v3 .nb-vmk__stand { margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }

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

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

/* b: Speicher als Pillen auf ink-100 (Umkehr G29), gewählt weiß mit sh-ruht */

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

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

/* baukasten/sektionen/vs-kopf/sektion.css */
/* Kopf der Ankauf-Sammelseiten. Bausteine aus kat-kopf (Brotkrume, H1 24/56, Vorteilsleiste) und vm-kopf (Betrag, Zusagen,
   Leiste am Handy). Abstand zum Shop-Kopf wie Kategorie und Modellseite (space-m), H1 ohne eigene Ränder. */
.nb-s-vs-kopf { margin-block: var(--nb-space-m) var(--nb-space-l); }
.nb-vsk__oben { margin-block-end: var(--nb-space-m); }
.nb-kk__krumen a:active { color: var(--nb-ink-700); }

.nb-v3 .nb-vsk__fuer { margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-vsk__betrag { min-width: 0; }
.nb-vmk__inhalt .nb-vsk__betrag + .nb-vmk__knopf { margin-block-start: var(--nb-space-m); }

/* b und c: flache Karte, am Rechner Betrag links und Knopf rechts, Zusagen als Reihe darunter */
.nb-vsk__karte { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-m); border-width: 0; }
@media (min-width: 768px) {
  .nb-vsk__karte { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--nb-space-l); padding: var(--nb-space-l); }
  .nb-vsk__karte .nb-vsk__zusagen { grid-column: 1 / -1; }
}
.nb-vsk__aktion .nb-vmk__knopf { margin: 0; }
@media (max-width: 767px) { .nb-vsk__aktion .nb-vmk__knopf { width: 100%; } }
.nb-vsk__karte .nb-vsk__zusagen { margin: 0; }
/* Ab 1100 drei Spalten: Betrag, Zusagen untereinander, Knopf. So bleibt die Karte flach (UX 1) */
@media (min-width: 1100px) {
  .nb-vsk__karte:not(.nb-vsk__karte--c) { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--nb-space-2xl); }
  .nb-vsk__karte:not(.nb-vsk__karte--c) .nb-vsk__zusagen { grid-column: 2; grid-row: 1; }
  .nb-vsk__karte:not(.nb-vsk__karte--c) .nb-vsk__aktion { grid-column: 3; grid-row: 1; }
}

/* c: Vorteilsleiste unter der H1, dann die Karte */

/* baukasten/sektionen/kategorien/sektion.css */
/* Kategorien (B1). Kachel m-bildkachel aus komponenten-tradein.md:167-197: Bild 4:3 randlos,
   Streifen surface-page mit Haarlinie, Radius 24, Titel body-01 600, Pfeil 20 px, Innenabstand m,
   Hover Rand ink-300 und #FBFBFD. Geschlossen ohne Hover, „Noch nicht“ in legal-01 ink-600. */

/* Treppe: 2 Spalten bis 1099 px, 4 darüber; die kürzere letzte Reihe steht mittig */

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

.nb-s-kachel__pfeil { display: grid; place-items: center; flex: none; color: var(--nb-text-heading); }
.nb-s-kachel__pfeil svg { width: 20px; height: 20px; }

/* Variante b: Titel auf der Bildfläche, kein Streifen */

/* Variante c: iPhone groß, sechs klein. 2 Spalten, 3 ab 768, 5 ab 1100 */

.nb-s-kachel--gross .nb-s-kachel__titel { font-size: var(--nb-t-heading-01); letter-spacing: -0.02em; line-height: 1.15; }

.nb-s-kachel--gross .nb-s-kachel__fuss { padding: var(--nb-space-m); }

/* Bewegung „Schieben“ (Daniel 26.09.2026, Bewegungs-Werkstatt): Pfeil 4 px nach rechts, Kreis auf 1,03, die Obergrenze aus brand-design.md §5 */

@media (min-width: 768px) {
  
  .nb-s-kachel--gross { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .nb-s-kachel--gross .nb-s-kachel__bild { aspect-ratio: auto; min-height: 260px; }
  .nb-s-kachel--gross .nb-s-kachel__fuss { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--nb-space-m); }
}
@media (min-width: 1100px) {
  
  
  .nb-s-kachel--gross { display: flex; flex-direction: column; }
  .nb-s-kachel--gross .nb-s-kachel__bild { flex: 1; aspect-ratio: auto; min-height: 0; }
  .nb-s-kachel--gross .nb-s-kachel__fuss { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  
}

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

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

/* baukasten/sektionen/vm-raster/sektion.css */
/* Modell-Raster der Ankauf-Sammelseiten. Karte §12 b M aus nb-kategorie.css (live), Spalten wie raster/sektion.css:6-8
   (4 ab 1100, 3 ab 768, am Handy quer eine je Zeile oder klein zwei), Werte VORGABEN-design-verkaufen-marke. */
/* Dicht unter dem Kopf wie das Raster der Kategorie (raster/sektion.css:3), damit die Modelle im ersten Bildschirm beginnen (UX 1) */
.nb-s-vm-raster { margin-block-start: 0; }
.nb-vmr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-m); }
.nb-vmr__chips { min-width: 0; }
.nb-vmr [hidden] { display: none !important; }

/* Werkzeugkarte: Suche, Zähler, Reihen-Chips. Weiß auf K1, innen ink-100 (Umkehr G29) */
.nb-vmr__werkzeug { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-s); padding: var(--nb-space-s); border-width: 0; min-width: 0; }
@media (min-width: 768px) {
  .nb-vmr__werkzeug { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; column-gap: var(--nb-space-m); padding: var(--nb-space-m); }
  .nb-vmr__werkzeug .nb-vmr__chips { grid-column: 1 / -1; }
}
.nb-vmr__suche { min-width: 0; }
.nb-vmr .nb-su--ohne-knopf .nb-su__eingabe { padding-right: 48px; }
.nb-vmr .nb-su--ohne-knopf .nb-su__beispiel { right: 48px; }
.nb-vmr__stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs) var(--nb-space-s); margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
/* Textknopf ohne Fläche (G59): nur Unterstrich und Farbe, Trefferfläche 44 px über ::before */
.nb-vmr__zurueck { position: relative; min-height: 24px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: underline 1px; text-underline-offset: 3px; cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vmr__zurueck::before { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .nb-vmr__zurueck:hover { text-decoration-thickness: 2px; } }
.nb-vmr__zurueck:active { color: var(--nb-ink-700); }
.nb-vmr__zurueck:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-badge); }

.nb-vmr__chips ul { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-vmr__chip { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--nb-space-s); border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); color: var(--nb-text-heading); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); white-space: nowrap; text-decoration: none; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vmr__chip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .nb-vmr__chip:hover { background: var(--nb-ink-200); } }
.nb-vmr__chip:active { transition-duration: 0s; background: var(--nb-ink-200); }
.nb-vmr__chip:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
/* Am Handy eine Zeile, quer scrollend bis an die Kartenkante, der letzte Chip angeschnitten (UX 10) */
@media (max-width: 767px) {
  .nb-vmr__werkzeug .nb-vmr__chips { margin-inline: calc(var(--nb-space-s) * -1); }
  .nb-vmr__werkzeug .nb-vmr__chips ul { flex-wrap: nowrap; overflow-x: auto; padding: var(--nb-space-2xs) var(--nb-space-s); scrollbar-width: none; scroll-padding-inline: var(--nb-space-s); }
  .nb-vmr__werkzeug .nb-vmr__chips ul::-webkit-scrollbar { display: none; }
}

/* Ohne Treffer: eine Karte mit Titel und den Reihen als Wege */
.nb-vmr__leer { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-m); border-width: 0; }
.nb-v3 .nb-vmr__leer-titel { margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* Gruppen nach Reihe, Abschnittsköpfe frei auf dem Grund (G41) */
.nb-vmr__gruppen { display: grid; gap: var(--nb-space-l); }
.nb-v3 .nb-vmr__reihe { margin: 0 0 var(--nb-space-s); font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; color: var(--nb-text-heading); scroll-margin-top: var(--nb-space-2xl); }
.nb-vmr__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nb-space-m); margin: 0; padding: 0; list-style: none; }
.nb-vmr__raster > li { display: grid; min-width: 0; }
@media (max-width: 1099px) { .nb-vmr__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nb-space-s); } }
@media (max-width: 767px) {
  .nb-vmr__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-xs); }
  [data-nb-foto="quer"] .nb-vmr__raster { grid-template-columns: minmax(0, 1fr); }
}
/* Ohne Meta-Zeile (§15): der Preis folgt dem Titel */
.nb-vmr .nb-pk--b .nb-pk__preis { margin-top: auto; }

.nb-v3 .nb-vmr__fuss { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }

/* b: am Handy die älteren Reihen hinter „Weitere Modelle anzeigen“ (UX 9) */

/* c: Reihen als Aufklapper, je eine weiße Karte */

/* Bildzeile ohne Fläche (G56), der Name unterstreicht nur mit Maus, Druck nur Farbe (G59) */
.nb-vmr__zeile { display: grid; grid-template-columns: var(--nb-geraetebild-m) minmax(0, 1fr) auto 20px; align-items: center; gap: var(--nb-space-s); min-height: 72px; padding-block: var(--nb-space-2xs); color: var(--nb-text-heading); text-decoration: none; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vmr__zeile:active { color: var(--nb-ink-700); }
.nb-vmr__zeile: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-vmr__zeile:hover .nb-vmr__name { text-decoration: underline 1px; text-underline-offset: 3px; } }
/* Bühne wie G60 und Quadrat G63 m (Werte aus nb-basis.css:191-213, beim Port in die eine Liste dort) */
.nb-vmr__bild { position: relative; overflow: hidden; width: var(--nb-geraetebild-m); aspect-ratio: 1; border-radius: var(--nb-geraetebild-radius, 22%); background: var(--nb-surface-component); }
.nb-vmr__bild > img { position: absolute; left: 50%; top: 12%; display: block; width: 78%; height: auto; max-width: none; transform: translateX(-50%); mix-blend-mode: multiply; }
.nb-vmr__name { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; text-wrap: balance; }
.nb-vmr__betrag { font-size: var(--nb-t-body-02); color: var(--nb-text-body); white-space: nowrap; }
.nb-vmr__betrag b { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: lining-nums; }
.nb-vmr__pfeil { display: grid; color: var(--nb-text-heading); }
.nb-vmr__pfeil svg { width: 20px; height: 20px; }
/* Schmal: Betrag unter den Namen statt daneben (G54) */
@media (max-width: 389px) {
  .nb-vmr__zeile { grid-template-columns: var(--nb-geraetebild-m) minmax(0, 1fr) 20px; }
  .nb-vmr__betrag { grid-column: 2; grid-row: 2; }
  .nb-vmr__name { grid-row: 1; }
  .nb-vmr__pfeil { grid-column: 3; grid-row: 1 / span 2; }
  .nb-vmr__bild { grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) { .nb-vmr__chip, .nb-vmr__zurueck, .nb-vmr__mehrknopf, .nb-vmr__zeile, .nb-vmr__klapp summary svg { transition: none; } }

/* baukasten/sektionen/vs-marken/sektion.css */
/* Markenwahl der Kategorie. Kacheln in der Größe von /verkaufen (kategorien/sektion.css:12, vier Spalten), zwei Stück mittig
   als Treppe (G12). Bildzeilen aus vm-raster/sektion.css. */
/* Zwischen Kopf und Raster ohne eigenen Sektionsabstand (UX 1) */
.nb-s-vs-marken { margin-block: 0 var(--nb-space-l); }

.nb-vsm__karte { display: grid; gap: 0 var(--nb-space-l); margin: 0; padding: var(--nb-space-2xs) var(--nb-space-s); list-style: none; border-width: 0; }
@media (min-width: 768px) { .nb-vsm__karte { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--nb-space-xs) var(--nb-space-m); } }

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

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

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

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

/* b: drei weiße Karten auf dem Grund */

/* c: schmale Karte mit Pillen */

.nb-v3 .nb-vmt__fuss { margin: var(--nb-space-s) 0 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }

/* baukasten/sektionen/vs-tabelle/sektion.css */
/* Topmodelle. a und b nutzen vm-tabelle/sektion.css. c: Label-Wert-Liste bis 340 px (G26), Zeilen ohne Linien (G17) */

/* baukasten/sektionen/ablauf/sektion.css */
/* Ablauf (E1): die eine dunkle Sektion mit Lime-Ziffern, Siegel und Schweif (web-architektur.md:417-421). */
.nb-s.nb-s-ablauf { overflow: hidden; background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }

.nb-v3 .nb-s-ablauf h2 { color: var(--nb-text-on-dark); }
.nb-v3 .nb-s-ablauf .nb-s-kopf p { color: var(--nb-text-on-dark-muted); }

.nb-s-ablauf__schritte { position: relative; z-index: 1; display: grid; gap: var(--nb-space-m); margin: var(--nb-space-xl) 0 0; padding: 0; list-style: none; }
@media (min-width: 1100px) { .nb-s-ablauf__schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-s-ablauf__schritt { padding: var(--nb-space-m); background: var(--nb-surface-dark-raised); border-radius: var(--nb-radius-card); overflow: hidden; }
.nb-s-ablauf__bild { display: block; aspect-ratio: 4 / 3; margin: calc(-1 * var(--nb-space-m)) calc(-1 * var(--nb-space-m)) var(--nb-space-s); background: var(--nb-surface-dark-raised); }
.nb-s-ablauf__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 768 bis 1099 px: Karten quer, Bild links, sonst wird das Band über 2.400 px hoch */
@media (min-width: 768px) and (max-width: 1099px) {
  .nb-s-ablauf__schritt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr; column-gap: var(--nb-space-m); padding: 0; }
  .nb-s-ablauf__bild { grid-row: 1 / 4; margin: 0; aspect-ratio: auto; min-height: 100%; }
  
  .nb-s-ablauf__schritt p { padding-inline-end: var(--nb-space-m); padding-block-end: var(--nb-space-m); }
}

.nb-v3 .nb-s-ablauf__schritt h3 { margin: var(--nb-space-s) 0 var(--nb-space-2xs); color: var(--nb-text-on-dark); }
.nb-s-ablauf__schritt p { margin: 0; color: var(--nb-text-on-dark-muted); font-size: var(--nb-t-body-01); line-height: 1.5; }

/* Schweif: Original-Pfad, Farbe Lime per CSS (Alt-Lime #EAFF9F ist gestrichen) */

/* a: Elements_1 gespiegelt, rechts von unten bis an die Oberkante */
/* Lage gemessen am 26.09.2026: unter 1100 px so weit rechts, dass das gerade Strichende nicht sichtbar ist (Daniel), Tinte 1,8 % bei 390 und 3,5 % bei 768 px */

/* b: Elements_6, die große Schleife fasst die Karten von rechts ein */

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

/* baukasten/sektionen/vs-warum/sektion.css */
/* „Warum verkaufen?“ (vs-warum, 20.10.2026). Zeilen wie die Zusagen im Kopf (vm-kopf: nb-vmk__zusagen), Karte wie der
   Schlussruf (nb-s-schluss__karte), Bild links auf sky-300, auf dem es gezeichnet ist (brand-imagery.md 15.2 Farbig in Karte) */
.nb-vsw--bild { display: grid; overflow: hidden; }
@media (min-width: 1100px) { .nb-vsw--bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nb-vsw__bild { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--nb-sky-300); }
@media (min-width: 1100px) { .nb-vsw__bild { aspect-ratio: 4 / 3; } }
/* Bild füllt die Box absolut, damit sie ohne Bild ihr Maß hält (BILDBOX, /qualitaet 20.10.2026) */
.nb-vsw__bild img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.nb-vsw__text { display: flex; flex-direction: column; justify-content: center; padding: var(--nb-space-l) var(--nb-space-m); }
@media (min-width: 1100px) { .nb-vsw__text { padding: var(--nb-space-2xl) var(--nb-space-xl); } }
.nb-vsw__text h2 { margin: 0; }
.nb-vsw__liste { display: grid; gap: var(--nb-space-s); margin: var(--nb-space-m) 0 0; padding: 0; list-style: none; }
.nb-vsw__liste li { display: flex; align-items: center; gap: var(--nb-space-xs); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-vsw__zeichen { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--nb-radius-badge); background: var(--nb-ink-100); color: var(--nb-text-heading); }
.nb-vsw__zeichen svg { width: 18px; height: 18px; }

/* b: drei Kacheln */

/* Am Handy Zeichen und Satz nebeneinander, sonst drei hohe Kacheln für je einen Satz (Messung 390 px, 20.10.2026) */

/* baukasten/sektionen/vs-vorbereiten/sektion.css */
/* „Vor dem Einschicken“ (vs-vorbereiten, 20.10.2026). Nummer im Kreis umgekehrt zum Träger (G64): in der weißen Karte ink-100.
   Zeilen und Karten sind Links, Hover nur mit Maus (Regel 11), Zeile ohne Fläche dahinter (Regel 12) */

.nb-vsv__liste, .nb-vsv__karten { margin: 0; padding: 0; list-style: none; }

.nb-vsv__nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nb-ink-100); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1; color: var(--nb-text-heading); }
.nb-vsv__titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-regular); line-height: 1.4; }
.nb-vsv__titel strong { font-weight: var(--nb-weight-semibold); }
.nb-vsv__pfeil { display: inline-flex; color: var(--nb-text-heading); }
.nb-vsv__pfeil svg { width: 20px; height: 20px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }

.nb-vsv__zeile:focus-visible, .nb-vsv__karte: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-vsv__zeile:hover .nb-vsv__pfeil svg, .nb-vsv__karte:hover .nb-vsv__pfeil svg { transform: translateX(2px); }
  .nb-vsv__karte:hover { box-shadow: var(--nb-sh-hoch); }
}
.nb-vsv__fuss { display: flex; padding-top: var(--nb-space-s); }
.nb-vsv__fuss--frei { padding-top: var(--nb-space-m); }

/* a: drei Karten */
.nb-vsv__karten { display: grid; gap: var(--nb-space-s); margin-top: var(--nb-space-m); }
@media (min-width: 768px) { .nb-vsv__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nb-vsv__karten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nb-vsv__karten > li { display: grid; }
.nb-vsv__karte { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: var(--nb-space-s); align-content: start; align-items: end; padding: var(--nb-space-m); color: var(--nb-text-heading); text-decoration: none; box-shadow: var(--nb-sh-ruht); transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vsv__nr--gross { grid-column: 1 / -1; width: 40px; height: 40px; font-size: var(--nb-t-body-01); }
.nb-vsv__karte .nb-vsv__titel { font-weight: var(--nb-weight-regular); }
/* Druck wie die Produktkarte (.nb-pk:active, kern/karte.css), nur Schatten, /qualitaet 20.10.2026 */
.nb-vsv__karte:active { transition-duration: 0s; box-shadow: var(--nb-sh-hoch); }
@media (prefers-reduced-motion: reduce) { .nb-vsv__zeile, .nb-vsv__karte, .nb-vsv__pfeil svg { transition: none; } }

/* baukasten/sektionen/fragen/sektion.css */
/* Fragen (E4). Klappliste mit Haarlinien, geschlossen, Antworten aus dem Rechner. */

.nb-s-fragen__links { display: grid; gap: var(--nb-space-m); align-content: start; }
.nb-s-fragen__links .nb-s-kopf { margin-block-end: 0; }
.nb-s-fragen__kontakt { display: flex; align-items: center; gap: var(--nb-space-s); padding: var(--nb-space-m); }
.nb-s-fragen__kontakt p { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-body); }

.nb-s-fragen__kontakt a, .nb-s-fragen__mail a { color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); }
/* Hover und Druck nur über Farbe und Unterstrich, ohne Fläche (G59, /qualitaet 20.10.2026) */
.nb-s-fragen__kontakt a:active, .nb-s-fragen__mail a:active { color: var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-s-fragen__kontakt a:hover, .nb-s-fragen__mail a:hover { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: .2em; } }

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

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

/* Modelle als Pillen, nach Generation (auch in der Antwort „Welche iPhones kauft ihr an?“) */

/* Handy-Gesamtprüfung 14.10.2026 (ZIEL): Pillen 32 px, Fläche unsichtbar 44 px. Am Handy Zeilenabstand 12 statt 8, damit sie sich nicht überlappt (32 + 12 = 44) */

/* baukasten/sektionen/vs-fragen/sektion.css */
/* Fragen der Sammelseiten. Grundlage fragen/sektion.css. Neu sind nur die nummerierte Abfolge (G64, Vorbild
   rs-anlegen/blatt.css:185-189, Nummer auf ink-100, weil der Träger weiß ist), die Punktliste und der Markenhinweis. */
.nb-vsf__schritte { display: grid; gap: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; }
.nb-vsf__schritte li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: var(--nb-space-xs); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-vsf__schritte b, .nb-vsf__punkte b { font-weight: var(--nb-weight-semibold); }
.nb-vsf__nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nb-ink-100); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
.nb-vsf__punkte { display: grid; gap: var(--nb-space-3xs); margin: 0; padding-left: 1.2em; font-size: var(--nb-t-body-01); color: var(--nb-text-body); }
.nb-v3 .nb-vsf__recht { margin: var(--nb-space-s) 0 var(--nb-space-s); font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }

/* baukasten/sektionen/buehne/sektion.css */
/* Bühne (A1). Beide Varianten teilen Brotkrumen, Eyebrow, H1, Satz und Suchfeld. */
.nb-s-buehne { margin-block-start: 0; }

/* Handy-Gesamtprüfung 14.10.2026 (ZIEL): Fläche 44 px wie .nb-kk__krumen (OE 94 Punkt 8), der Link bleibt 17 px hoch */

.nb-v3 .nb-s-buehne h1 { margin: 0; text-wrap: balance; }
.nb-v3 .nb-s-buehne h1 em { font-size: calc(1em * 1.03); }

/* Suchfeld wie die Auswahlfelder im Rechner: Radius 16, Rand control, im Fokus Signal */
.nb-s-suche { position: relative; width: 100%; margin: var(--nb-space-l) 0 0; text-align: left; }

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

/* Varianten b, c, d: Such-Karte auf dem Rechner-Grund. c und d nur ab 1100 px auf Grau, darunter Weiß */

/* Bühnenton über --nb-s-buehne (kern/schale.css), heute surface-secondary, in den Leitern k1 bis k3 eine Stufe unter
   dem Seitengrund (Flächen-System, Daniel 30.09.2026) */

/* OFFEN (Daniel): unter 1100 px ist die Bühne heute weiß. Auf getöntem Grund trägt sie hier vorerst den Bühnenton,
   sonst wäre sie vom Grund nicht zu unterscheiden. Mit Luft nach unten, damit die Suche nicht an der Kante klebt */

/* c: unter 1100 px liegt die Karte in einem grauen Bühnenkasten, ab 1100 px trägt die Sektion das Grau */

/* d: bis 1099 px nur der kompakte Block, ab 1100 px nur die Such-Karte */

.nb-s-buehne__beleg { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: var(--nb-space-m) 0 0; padding-block-start: var(--nb-space-m); border-block-start: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-s-buehne__beleg b { font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: lining-nums; }

.nb-s-buehne__direkt { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-s-buehne__direkt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-s-buehne__direkt a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--nb-space-2xs); align-items: center; min-height: 64px; padding: var(--nb-space-xs) var(--nb-space-s); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-s-buehne__direkt a:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
@media (hover: hover) and (pointer: fine) { .nb-s-buehne__direkt a:hover { border-color: var(--nb-sky-500); } }
.nb-s-buehne__direkt a > svg { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; color: var(--nb-text-muted); transition: transform var(--nb-motion-rand) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Bewegung „Pfeil färbt“ (Daniel 26.09.2026): Pfeil fährt 3 px nach rechts und wird Signal */
@media (hover: hover) and (pointer: fine) { .nb-s-buehne__direkt a:hover > svg { transform: translateX(3px); color: var(--nb-action-primary); } }

/* d unter 1100 px wie a: kein Kasten-Abstand nach unten, nur der normale Sektionsabstand (Daniel 26.09.2026: „komischer Abstand“) */

/* h, i, j (Runde angebot-typo, Daniel 30.09.2026): wie d, bis 1099 px kompakt, ab 1100 px mit Such-Karte auf der Bühne.
   Regel: die Fläche kehrt sich zum Untergrund um, nie Weiß auf Weiß mit Schatten (RECHERCHE-weisse-sektionen §Regeln) */

/* h: graue Kacheln in der weißen Karte, ohne Schatten und Rand, Hover eine Stufe dunkler wie die Suchpille */

/* Umkehr G29 (16.10.2026): In der weißen Bühnenkarte sind die Direkt-Kacheln in jeder Fassung grau wie in h. Der Grund
   (schale.css, Liste „Welche Bauteile dem Grund folgen“) gab ihnen Weiß mit Kartenschatten, Weiß auf Weiß.
   Frei auf dem Grund (Karte --frei) bleiben sie weiße Karten */

/* i: ohne Karte, Suche weiß auf der grauen Bühne, Kacheln weiß mit ruhendem Schatten */

/* j: Direktwahl als graue Pillen ohne Betrag */

/* s1, s2, s3: Werkstatt „suche“ (Daniel 06.10.2026 abends, KRITIK-suche-2026-10-06.md). Nur unter 1100 px, ab dort gilt d.
   d kippt beim Antippen auf ink-200 und ist dann Grau auf dem grauen Bühnenband (gegen G29) */

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

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

/* b: dunkle Aktionsleiste mit Lime-Knopf (farbsystem.md:367-375) */

/* c: Signal-Fläche */

/* baukasten/sektionen/fuss/universell.css */
/* Der universelle Fuß (Werkstatt fuss, Runde 1, 05.10.2026). Fassungen service, wege, marke, heute des Platzes fuss und
   die Werte für den Platz fuss-newsletter. Markup in universell.mjs, Inhalt in baukasten/kern/fuss-daten.mjs.
   Geladen über export const CSS in sektion.mjs. sektion.css (Fassungen a, hell, weiss, hellnl, ohne, schmal) bleibt unberührt.
   Werte: .claude/progress/tradein/baukasten/VORGABEN-fuss-token-2026-10-05.md, Kontraste mit farbcheck.mjs gerechnet.
   Der Fuß ist flach: keine Haarlinie, kein Schatten, Radius 0 (farbsystem.md:568, Daniel 04.10.2026). Was sich abhebt,
   steht auf einem Träger nach der Umkehr (G29). Schwellen nur 768 und 1100. */

/* ---------- Werte je Farbe. Night ist die Vorgabe (farbsystem.md:49) ---------- */
.nb-fu, .nb-fn {
  /* Maße aus den Werte-Dokumenten, für die es keinen Token gibt */
  --fu-ziel: 44px;    /* Trefferfläche, komponenten-formular.md:259 */
  --fu-knopf: 48px;   /* Knopf als Pille ab 48 px, farbsystem.md:565 */
  --fu-zeichen: 20px; /* Zeichen im Träger, wie komponenten-formular.md:66 */
  --fu-marke: 132px;  /* Wortmarke wie im Fuß von heute, sektion.css:19 */

  --fu-flaeche: var(--nb-surface-dark);
  --fu-kopf: var(--nb-text-on-dark);                    /* 17,77:1 */
  --fu-text: var(--nb-text-on-dark-muted);              /* Link in Ruhe, Sätze, 9,64:1 */
  --fu-text-hover: var(--nb-text-on-dark);
  --fu-klein: var(--nb-text-on-dark-muted);             /* Rechtstext */
  --fu-akzent: var(--nb-text-on-dark-accent);           /* Akzentwort, 16,28:1 */
  --fu-traeger: var(--nb-surface-dark-raised);          /* Kachel, Kreis, 1,24:1 zum Fuß, Schrift darauf 14,28:1 und 7,75:1 */
  --fu-traeger-hover: var(--nb-border-dark-hairline);   /* kein Flächen-Token für gedrückt auf Night, 1,52:1 */
  --fu-traeger-druck: var(--nb-border-dark-hairline);
  --fu-kreis-hover: var(--nb-border-dark-hairline);
  --fu-zahl: var(--nb-surface-page);                    /* Zahlarten auf Night in weißen Kacheln */
  --fu-gegen: var(--nb-surface-page);                   /* Gegenfarbe: Knopf zum Kontakt, 19,36:1 */
  --fu-gegen-text: var(--nb-text-heading);
  --fu-gegen-hover: var(--nb-ink-200);
  --fu-gegen-druck: var(--nb-ink-300);
  /* Fokus an weiß gefüllten Knöpfen auf Night: der weiße Ring der Formel verschmölze mit dem Knopf. Dort stehen die
     zwei Farben getauscht, innen 3 px Night, außen 2 px Weiß. Als Bruch ausgewiesen */
  --fu-gegen-fokus-linie: var(--nb-surface-page);
  --fu-gegen-fokus-ring: 0 0 0 3px var(--nb-surface-dark);
  /* „Vertrag widerrufen“: Vorgabe ist der Träger (Fassung wege auf Night, überall auf Weiß und Grau) */
  --fu-pille: var(--fu-traeger);
  --fu-pille-text: var(--fu-kopf);
  --fu-pille-hover: var(--fu-traeger-hover);
  --fu-pille-druck: var(--fu-traeger-druck);
}
/* Auf Night je Fassung eine andere Füllung, Daniel wählt. service und heute: weiß mit Night-Schrift, 19,36:1 */
.nb-fu--service, .nb-fu--heute { --fu-pille: var(--nb-surface-page); --fu-pille-text: var(--nb-text-heading); --fu-pille-hover: var(--nb-ink-200); --fu-pille-druck: var(--nb-ink-300); }
/* marke: Sky mit Night-Schrift, 9,07:1. Sky 500 hat keinen Flächen-Alias, als Bruch ausgewiesen */

/* Weiß (farbsystem.md:424, komponenten-strecke-konto.md:735). Die Farbe steht am Fuß selbst oder in der Werkstatt am main davor */
.nb-fu[data-nb-farbe="weiss"], .nb-fn[data-nb-farbe="weiss"],
main[data-nb-farbe="weiss"] ~ * .nb-fu, main[data-nb-farbe="weiss"] ~ * .nb-fn {
  --fu-flaeche: var(--nb-surface-page);
  --fu-kopf: var(--nb-text-heading);
  --fu-text: var(--nb-text-body);                       /* 12,99:1 */
  --fu-text-hover: var(--nb-text-link);                 /* 7,23:1 */
  --fu-klein: var(--nb-text-muted);                     /* 8,50:1 */
  --fu-akzent: var(--nb-text-accent);
  --fu-traeger: var(--nb-surface-component);            /* 1,10:1 zum Fuß */
  --fu-traeger-hover: var(--nb-ink-200);
  --fu-traeger-druck: var(--nb-ink-300);
  --fu-kreis-hover: var(--nb-ink-300);
  --fu-zahl: var(--nb-surface-component);
  --fu-gegen: var(--nb-surface-dark);                   /* gefüllter Knopf Night, Schrift 17,77:1 */
  --fu-gegen-text: var(--nb-text-on-dark);
  --fu-gegen-hover: var(--nb-surface-dark-raised);
  --fu-gegen-druck: var(--nb-surface-dark-raised);
  --fu-gegen-fokus-linie: var(--nb-text-heading);
  --fu-gegen-fokus-ring: 0 0 0 5px var(--nb-surface-page);
  --fu-pille: var(--fu-traeger);
  --fu-pille-text: var(--fu-kopf);
  --fu-pille-hover: var(--fu-traeger-hover);
  --fu-pille-druck: var(--fu-traeger-druck);
}
/* Grau: surface-component, nur auf weißem Seitengrund. Träger weiß (Umkehr) */
.nb-fu[data-nb-farbe="grau"], .nb-fn[data-nb-farbe="grau"],
main[data-nb-farbe="grau"] ~ * .nb-fu, main[data-nb-farbe="grau"] ~ * .nb-fn {
  --fu-flaeche: var(--nb-surface-component);
  --fu-kopf: var(--nb-text-heading);
  --fu-text: var(--nb-text-body);                       /* 11,79:1 */
  --fu-text-hover: var(--nb-text-link);                 /* 6,56:1 */
  --fu-klein: var(--nb-text-muted);                     /* 7,71:1 */
  --fu-akzent: var(--nb-text-accent);
  --fu-traeger: var(--nb-surface-page);                 /* 1,10:1 zum Fuß */
  --fu-traeger-hover: var(--nb-ink-200);
  --fu-traeger-druck: var(--nb-ink-300);
  --fu-kreis-hover: var(--nb-ink-300);
  --fu-zahl: var(--nb-surface-page);
  --fu-gegen: var(--nb-surface-dark);
  --fu-gegen-text: var(--nb-text-on-dark);
  --fu-gegen-hover: var(--nb-surface-dark-raised);
  --fu-gegen-druck: var(--nb-surface-dark-raised);
  --fu-gegen-fokus-linie: var(--nb-text-heading);
  --fu-gegen-fokus-ring: 0 0 0 5px var(--nb-surface-page);
  --fu-pille: var(--fu-traeger);
  --fu-pille-text: var(--fu-kopf);
  --fu-pille-hover: var(--fu-traeger-hover);
  --fu-pille-druck: var(--fu-traeger-druck);
}

/* ---------- Grund ---------- */
.nb-fu { margin: 0; padding-block: var(--nb-space-xl) var(--nb-space-l); background: var(--fu-flaeche); color: var(--fu-text); font-family: var(--nb-font-sans); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); line-height: 1.45; }
.nb-fu :where(h3, h4, p, ul) { margin: 0; }
.nb-fu :where(ul) { padding: 0; list-style: none; }
.nb-fu__innen { display: grid; gap: var(--nb-space-xl); }
@media (min-width: 1100px) { .nb-fu { padding-block-start: var(--nb-space-2xl); } }

/* Die Fokus-Formel mit weißem Ring (farbsystem.md:519). Auf Night trägt der Ring, auf Weiß und Grau der Rahmen. Das Feld
   des Newsletters zeigt den Fokus selbst (komponenten-formular.md §2) */
:is(.nb-fu, .nb-fn) :focus-visible:not(.nb-fl__eingabe) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page); }
/* Knopf zum Kontakt und die weiße Pille (service, heute): auf Night getauscht, auf Weiß und Grau die Formel wie oben */
.nb-fu .nb-fu-knopf:focus-visible, .nb-fu--service .nb-fu-pille:focus-visible, .nb-fu--heute .nb-fu-pille:focus-visible { outline-color: var(--fu-gegen-fokus-linie); box-shadow: var(--fu-gegen-fokus-ring); }

/* ---------- Links und Gruppen ---------- */
/* body-02. Bis 1099 px 44 px Trefferfläche: die Zeile (1lh) plus Polster ergibt 44 px, mehrzeilige Links wachsen mit.
   Am Rechner 28 px Zeilenraster (20,3 px Zeile plus 2 mal space-3xs). Kein Flex, damit der Text normal umbricht */
.nb-fu__link { display: inline-block; min-height: var(--fu-ziel); padding: var(--nb-space-xs) 0; padding-block: calc((var(--fu-ziel) - 1lh) / 2); border: 0; border-radius: 0; background: none; color: var(--fu-text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-fu__link:active { color: var(--fu-text-hover); text-decoration: underline; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { .nb-fu__link:hover { color: var(--fu-text-hover); text-decoration: underline; text-underline-offset: .2em; } }
@media (min-width: 1100px) { .nb-fu__link { min-height: 0; padding-block: var(--nb-space-3xs); } }

.nb-fu__titel { margin-block-end: var(--nb-space-2xs); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; letter-spacing: 0; color: var(--fu-kopf); }
.nb-fu__liste { display: grid; justify-items: start; }
.nb-fu__reihe ul { display: flex; flex-wrap: wrap; gap: 0 var(--nb-space-m); }

.nb-fu__oben { display: grid; gap: var(--nb-space-l); }
.nb-fu__spalten { display: grid; gap: var(--nb-space-2xs); }
@media (min-width: 768px) { .nb-fu__spalten { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--nb-space-m); align-items: start; } }
@media (min-width: 1100px) {
  .nb-fu__oben--kontakt { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--nb-space-xl); }
  
  .nb-fu__spalten { gap: var(--nb-space-l); }
}

/* Akkordeon am Handy: jede Linkspalte eine Kachel auf dem Träger, anfangs zu. Ab 768 px steht der Titel fest */
.nb-fu__auf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); width: 100%; min-height: var(--fu-knopf); padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-input); background: none; color: var(--fu-kopf); font: inherit; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); text-align: start; cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
/* Druck und Hover nur über die Schriftfarbe, nie Fläche hinter dem Titel (G59 KASTEN, /qualitaet 20.10.2026) */
.nb-fu__auf:active { color: var(--fu-text); }
@media (hover: hover) and (pointer: fine) { .nb-fu__auf:hover { color: var(--fu-text); } }
.nb-fu__auf:active { scale: var(--nb-motion-druck-scale-breit); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-fu__auf svg { flex: none; width: var(--fu-zeichen); height: var(--fu-zeichen); transition: transform var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve-bewegung); }
.nb-fu__auf[aria-expanded="true"] svg { transform: rotate(180deg); transition: transform var(--nb-motion-akkordeon-auf) var(--nb-motion-kurve-bewegung); }
@media (min-width: 768px) { .nb-fu__auf { display: none; } }
@media (max-width: 767px) {
  .nb-fu__gruppe--klapp { border-radius: var(--nb-radius-input); background: var(--fu-traeger); }
  .nb-fu__gruppe--klapp .nb-fu__titel { margin: 0; }
  .nb-fu__gruppe--klapp .nb-fu__titel-fest { display: none; }
  .nb-fu__gruppe--klapp .nb-fu__liste { justify-items: stretch; padding: 0 var(--nb-space-s) var(--nb-space-2xs); }
  /* Auf 300 ms nur im offenen Zustand, zu 200 ms ausblenden, dann display: none (Fassung C, Daniel 09.10.2026) */
  .nb-fu__gruppe--klapp.is-offen .nb-fu__liste { animation: nb-fu-auf var(--nb-motion-akkordeon-auf) var(--nb-motion-kurve) both; }
  .nb-fu__gruppe--klapp:not(.is-offen) .nb-fu__liste { display: none; opacity: 0; transition: opacity var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve), display var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve) allow-discrete; }
  .nb-fu__gruppe--klapp .nb-fu__link { display: block; }
}
@keyframes nb-fu-auf { from { opacity: 0; transform: translateY(calc(-1 * var(--nb-space-3xs))); } to { opacity: 1; transform: none; } }
/* Ohne Skript stehen die Listen offen, der Knopf fällt weg */
@media (scripting: none) and (max-width: 767px) {
  .nb-fu__gruppe--klapp:not(.is-offen) .nb-fu__liste { display: grid; opacity: 1; }
  .nb-fu__gruppe--klapp .nb-fu__auf { display: none; }
  .nb-fu__gruppe--klapp .nb-fu__titel-fest { display: block; padding: var(--nb-space-xs) var(--nb-space-s) 0; }
}

/* ---------- Kontaktblock (service) ---------- */
.nb-fu__kontakt { display: grid; gap: var(--nb-space-xs); align-content: start; justify-items: start; }
.nb-fu__kontakt-titel { font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--fu-kopf); }
.nb-fu__satz { max-width: 28ch; }
/* Gefüllt in der Gegenfarbe (G9): auf Night weiß, auf Weiß und Grau Night. Nie ein zweiter Lime-Knopf (farbsystem.md:597) */
.nb-fu-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: var(--fu-knopf); margin-block-start: var(--nb-space-2xs); padding: 0 var(--nb-space-m); border: 0; border-radius: var(--nb-radius-pill); background: var(--fu-gegen); color: var(--fu-gegen-text); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-fu-knopf:hover { background: var(--fu-gegen-hover); } }
.nb-fu-knopf:active { background: var(--fu-gegen-druck); scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (max-width: 767px) { .nb-fu-knopf { width: 100%; } }

/* ---------- Markenblock, Netzwerke, Zahlarten ---------- */
/* Wortmarke, Markenzeile, NextBuy und Netzwerke als ein Block links, die Zahlarten rechts. Fehlt die Breite, rutschen
   die Zahlarten als eigene Zeile nach links unten */
.nb-fu__marke { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nb-space-s) var(--nb-space-l); }
.nb-fu__marke-gruppe { display: grid; gap: var(--nb-space-s); justify-items: start; }
@media (min-width: 768px) {
  .nb-fu__marke { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .nb-fu__marke-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-s) var(--nb-space-m); }
}
.nb-fu__logo { display: block; }
.nb-fu__logo svg { display: block; width: var(--fu-marke); height: auto; color: var(--fu-kopf); }
.nb-fu__netz { display: flex; gap: var(--nb-space-2xs); }
.nb-fu__kreis { display: grid; place-items: center; width: var(--fu-ziel); height: var(--fu-ziel); border-radius: 50%; background: var(--fu-traeger); color: var(--fu-kopf); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-fu__kreis:active { background: var(--fu-kreis-hover); }
@media (hover: hover) and (pointer: fine) { .nb-fu__kreis:hover { background: var(--fu-kreis-hover); } }
.nb-fu__kreis:active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-fu__kreis svg { width: var(--fu-zeichen); height: var(--fu-zeichen); }
/* Originalzeichen, unverändert und gleich groß (38 mal 24), nie umgefärbt. Die Kachel trägt den Kontrast */
.nb-fu__zahl { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
.nb-fu__zahl-kachel { display: grid; place-items: center; padding: var(--nb-space-3xs) var(--nb-space-2xs); border-radius: var(--nb-radius-badge); background: var(--fu-zahl); }
.nb-fu__zahl-kachel svg { display: block; }
/* Am Handy eine Reihe über die volle Breite, sieben gleiche Spalten, Zeichen schrumpfen mit statt umzubrechen (Daniel 18.10.2026) */
@media (max-width: 767px) {
  .nb-fu__zahl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--nb-space-3xs); width: 100%; }
  .nb-fu__zahl-kachel { padding: var(--nb-space-3xs); }
  .nb-fu__zahl-kachel svg { width: 100%; max-width: 38px; height: auto; }
}

/* ---------- Pflichtzeile und Schluss ---------- */
.nb-fu__ende { display: grid; gap: var(--nb-space-s); }
.nb-fu__pflicht { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs) var(--nb-space-m); }
/* „Vertrag widerrufen“ (§ 356a BGB): eigene gefüllte Pille, kein Lime, kein Umriss, nie in einer Liste */
.nb-fu-pille { display: inline-flex; align-items: center; justify-content: center; min-height: var(--fu-ziel); padding: 0 var(--nb-space-m); border: 0; border-radius: var(--nb-radius-pill); background: var(--fu-pille); color: var(--fu-pille-text); font: inherit; font-weight: var(--nb-weight-semibold); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-fu-pille:hover { background: var(--fu-pille-hover); } }
.nb-fu-pille:active { background: var(--fu-pille-druck); scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-fu__schluss { display: grid; gap: var(--nb-space-3xs); font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--fu-klein); }
.nb-fu__schluss p { max-width: var(--nb-measure); }

/* ---------- wege: zwei Kacheln, Kundenservice und NextBuy daneben, am Handy offen in zwei Spalten ---------- */

/* Daneben der Kundenservice als dritte Kachel auf derselben Fläche (Daniel 06.10.2026: „rechts hast du den Hintergrund
   vergessen“). Alle drei Kacheln haben denselben Abstand. Bis 1099 px läuft seine Liste in zwei Spalten wie die Kacheln */

/* Ab 1100 px steht der Kundenservice als eine Spalte neben den Kacheln. Mit nur einer Kachel (Wartungsmodus) teilen sich
   Kachel und die zwei Spalten daneben die Breite */

/* ---------- marke: Claim links, unten ab 1100 px mittig ---------- */

/* display-01 mit einem Akzentwort (typografie.md:215 bis 224): Poynter kursiv, 1,03 em, auf Night Lime, auf Hell signal-700 */

/* ---------- heute: Raster wie der Fuß von heute (sektion.css:16 bis 18) ---------- */