/* 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) */
:is(.nb-strecke-seite, .nb-konto-seite, .nb-sk, .nb-sf) :focus-visible:not(.nb-fl__eingabe, .nb-su__eingabe) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page); }

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

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

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

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

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

/* 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 */
.nb-kk__unterf { display: none; }
main:not([data-nb-unter]) .nb-kk__unterf:first-child,
main[data-nb-unter="heute"] [data-nb-unterf="heute"], main[data-nb-unter="a"] [data-nb-unterf="a"],
main[data-nb-unter="b"] [data-nb-unterf="b"], main[data-nb-unter="v1"] [data-nb-unterf="v1"],
main[data-nb-unter="v2"] [data-nb-unterf="v2"] { display: inline; }

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

.nb-dd { position: relative; }
.nb-dd__knopf { display: block; text-align: left; cursor: pointer; }
.nb-dd__wert { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nb-fl.is-auswahl.is-leer .nb-fl__label { transform: none; }
.nb-fl.is-auswahl.is-leer:not(.is-fehler) .nb-fl__label { color: var(--fl-label); }
/* Offen wie im Fokus des Feldstils: die Linie steht (Regel im Feldstil über .is-offen) */
.nb-dd.is-offen .nb-dd__knopf { background: var(--fl-grund-fokus); }
.nb-dd.is-offen .nb-fl__label, .nb-dd .nb-dd__knopf:focus-visible + .nb-fl__label { color: var(--fl-label-fokus); }
.nb-dd.is-offen.is-leer .nb-fl__label { transform: translateY(-10px) scale(.75); }
.nb-dd .nb-fl__pfeil { transition: transform var(--nb-motion-transform) var(--nb-motion-kurve-bewegung); }
.nb-dd.is-offen .nb-fl__pfeil { transform: translateY(-50%) rotate(180deg); }

.nb-dd__karte {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input);
  box-shadow: 0 2px 4px rgb(0 0 0 / .04), 0 18px 44px -20px rgb(0 0 0 / .18);
  transform-origin: 50% 0;
  animation: nb-dd-rein var(--nb-motion-liste) var(--nb-motion-kurve) backwards;
}
/* Schließen 150 ms ease-out, Fassung C (Daniel 09.10.2026). Der Keyframe läuft mit backwards, damit die Deckkraft nach
   dem Öffnen wieder der Regel gehört und hier ausblenden kann */
.nb-dd__karte[hidden] { display: none; opacity: 0; transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), display var(--nb-motion-liste-aus) allow-discrete; }
.nb-dd__blattkopf { display: none; }
.nb-dd__liste { max-height: 380px; box-sizing: border-box; overflow: auto; margin: 0; padding: var(--nb-space-2xs); list-style: none; outline: none; }

.nb-dd__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs); min-height: 44px;
  padding: var(--nb-space-2xs) var(--nb-space-s); border-radius: var(--nb-radius-badge);
  font-size: var(--nb-t-body-01); font-weight: 500; color: var(--nb-text-heading); cursor: pointer; user-select: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-dd__option.is-aktiv { background: var(--nb-ink-100); }
@media (hover: hover) and (pointer: fine) { .nb-dd__option:hover { background: var(--nb-ink-100); } }
.nb-dd__haken { width: 20px; height: 20px; flex: none; color: var(--nb-action-primary); opacity: 0; }
.nb-dd__haken svg { width: 20px; height: 20px; }
.nb-dd__option[aria-selected="true"] { font-weight: var(--nb-weight-semibold); }
.nb-dd__option[aria-selected="true"] .nb-dd__haken { opacity: 1; }
.nb-dd__schleier { display: none; }
@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 */
.nb-dd__option[aria-selected="true"] { background: var(--nb-surface-stage); }

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

@media (prefers-reduced-motion: reduce) { .nb-dd__karte, .nb-dd__schleier { animation: none !important; } .nb-dd .nb-fl__pfeil, .nb-dd__option { transition: none; } }

/* 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__meta { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-body); }

.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); }
.nb-pk__streich { font-size: var(--nb-t-body-01); color: var(--nb-text-muted); text-decoration: line-through; }
.nb-pk__spar { margin: var(--nb-space-3xs) 0 0; }
.nb-pk__neu { margin: var(--nb-space-3xs) 0 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }

/* Farbfelder: Punkt 16 px mit Ring in border-control (4,20:1), Trefferfläche 24 px (WCAG 2.5.8), jeder ein eigener Link */
.nb-pk__farben { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0; margin: 0 calc(var(--nb-space-3xs) * -1); padding: 0; list-style: none; }
.nb-pk__farbe { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.nb-pk__farbe span { width: 16px; height: 16px; border-radius: 50%; background: var(--nb-pk-farbe); box-shadow: inset 0 0 0 1px var(--nb-border-control); transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-pk__farbe:focus-visible span { box-shadow: inset 0 0 0 1px var(--nb-border-control), 0 0 0 2px var(--nb-surface-page), 0 0 0 4px var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-pk__farbe:hover span { box-shadow: inset 0 0 0 1px var(--nb-border-control), 0 0 0 2px var(--nb-surface-page), 0 0 0 4px var(--nb-text-heading); } }
.nb-pk__farbe:active span { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); box-shadow: inset 0 0 0 1px var(--nb-border-control), 0 0 0 2px var(--nb-surface-page), 0 0 0 4px var(--nb-text-heading); } /* OE 94 Punkt 6: Ring im Druck */
.nb-pk__farbe:focus { outline: none; }
.nb-pk__farbe.is-gefiltert span { box-shadow: inset 0 0 0 1px var(--nb-border-control), 0 0 0 2px var(--nb-surface-page), 0 0 0 3px var(--nb-border-control); }

/* 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) */
.nb-pk__merkmal { 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-heading); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); white-space: nowrap; }

/* 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__buehne .nb-pk__merkmal { position: absolute; left: var(--nb-space-xs); top: var(--nb-space-xs); }
.nb-pk--b .nb-pk__text { padding-top: var(--nb-space-xs); }
.nb-pk--b .nb-pk__farben { margin-bottom: var(--nb-space-3xs); }
/* 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); }

/* 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--m .nb-pk__farbe { width: 24px; height: 24px; }
  .nb-pk--m .nb-pk__farben { gap: 0; }
  .nb-pk--m .nb-pk__farbe span { width: 14px; height: 14px; }
  
  
  .nb-pk--b.nb-pk--m .nb-pk__buehne { margin: var(--nb-space-3xs) var(--nb-space-3xs) 0; }
  .nb-tk { padding: var(--nb-space-s); }
}

/* 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) ---------- */
.nb-tk { position: relative; display: flex; flex-direction: column; gap: var(--nb-space-2xs); min-width: 0; padding: var(--nb-space-m) var(--nb-space-m) var(--nb-space-m); border: 0 solid transparent; border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); }

.nb-tk__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; }

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

.nb-tk__knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); min-height: 48px; margin-top: auto; padding: 0 var(--nb-space-m); border-radius: var(--nb-radius-pill); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-tk__knopf svg { width: 20px; height: 20px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-tk__knopf:hover svg { transform: translateX(3px); } }
.nb-tk__knopf--signal { background: var(--nb-action-primary); color: var(--nb-action-primary-label); }
@media (hover: hover) and (pointer: fine) { .nb-tk__knopf--signal:hover { background: var(--nb-action-primary-hover); } }
/* 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 */
.nb-tk__knopf--signal:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); background: var(--nb-action-primary-active); }
.nb-tk__knopf:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); }

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

.nb-tk--b { gap: var(--nb-space-s); }
.nb-tk__wahl { width: 100%; }

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

/* ---------- Trade-in über zwei Spalten ---------- */
.nb-tb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; border: 0 solid transparent; border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); }
.nb-tb__text { display: flex; flex-direction: column; gap: var(--nb-space-s); padding: var(--nb-space-l); }
.nb-tb__titel { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }

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

.nb-tb .nb-tk__knopf { align-self: flex-start; }

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

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

@media (max-width: 767px) {
  .nb-tb { grid-template-columns: 1fr; }
  
  
  .nb-tb__text { padding: var(--nb-space-m); }
}

/* ---------- 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. */
:is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-tk { padding: var(--nb-space-s); }

:is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-tk--b { gap: var(--nb-space-xs); }

/* „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) */
.nb-tk__wahl { grid-template-columns: minmax(0, 1fr); }

/* 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) */
@media (min-width: 768px) {
  :is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-tb { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  
}
/* 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) */
@media (min-width: 768px) and (max-width: 1299px) {
  :is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-tb { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  
}
:is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-tb__text { gap: var(--nb-space-xs); padding: var(--nb-space-m); }
/* Die Dachzeile der breiten Karten steht seit Runde 3 wieder (brand-design.md:462), mit Karte b sind die Reihen 329 px hoch */
:is([data-nb-foto="klein"], [data-nb-foto="quer"]) .nb-tb__titel { font-size: var(--nb-t-heading-02); line-height: 1.25; }

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

.nb-tk__betrag { display: grid; gap: 0; margin: 0; padding: 0 var(--nb-space-3xs); }
.nb-tk__betrag[hidden] { display: none; }
.nb-tk__biszu { font-size: var(--nb-t-body-01); line-height: 1.2; color: var(--nb-text-body); }
.nb-tk__biszu b { font-size: var(--nb-t-price-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.03em; color: var(--nb-text-heading); font-variant-numeric: proportional-nums; }

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

.nb-tk__flaeche { position: relative; display: grid; align-content: center; height: 84px; overflow: hidden; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
/* Das alte iPhone steht wie auf der Bühne der Karte b, unten angeschnitten, der weiße Fotogrund per multiply */
.nb-tk__geraet { position: absolute; inset: 0; }
.nb-tk__geraet[hidden] { display: none; }
.nb-tk__geraet .nb-pk__foto { position: absolute; left: 50%; top: var(--nb-space-s); width: auto; height: var(--nb-tk-foto-h, 140%); max-width: none; transform: translateX(-50%); mix-blend-mode: 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 */
.nb-tk__geraet .nb-pk__foto, .nb-tk__modell .nb-pk__foto { aspect-ratio: 456 / 600; }
.nb-tk__flaeche .nb-tk__betrag { padding: 0 var(--nb-space-s); }

/* 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 */
.nb-pk--b .nb-pk__pillen { position: absolute; left: var(--nb-space-xs); top: var(--nb-space-xs); z-index: 1; display: flex; flex-wrap: wrap; gap: var(--nb-space-3xs); }
.nb-pk--b .nb-pk__buehne .nb-pk__pillen .nb-pk__merkmal { position: static; }
/* 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) */
.nb-pk__merkmal--sale { background: var(--nb-mint); color: var(--nb-mint-ink); }
.nb-pk__preis--sale b { color: var(--nb-mint-ink); }
.nb-pk__neupreis { margin: var(--nb-space-3xs) 0 0; font-size: var(--nb-t-body-01); font-weight: 400; color: var(--nb-text-muted); white-space: nowrap; }
@media (max-width: 359px) { .nb-pk__neupreis { white-space: normal; } }

/* 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; }
[data-nb-akku="sky"] .nb-pk__merkmal:not(.nb-pk__merkmal--sale) { color: var(--nb-sky-900-probe); }

@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 */
.nb-pk .nb-pk__streich[hidden], .nb-pk .nb-pk__merkmal[hidden], .nb-pk .nb-pk__spar[hidden] { display: none; }
.nb-pk.is-sale-aus .nb-pk__preis--sale b { color: var(--nb-text-heading); }
/* 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 */
.nb-pk__merkmal { color: var(--nb-text-on-stage); }

/* Pillen auf der Bühne 8 px auseinander (komponenten-global.md:82), vorher 4 */
.nb-pk--b .nb-pk__pillen { gap: var(--nb-space-2xs); }

/* 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 */
.nb-pk__preis--sale .nb-pk__ab, .nb-pk__preis--sale .nb-pk__streich { color: var(--nb-mint-ink); }
.nb-pk.is-sale-aus .nb-pk__preis--sale .nb-pk__ab { color: var(--nb-text-body); }
/* Raster g: Karten ohne Neupreis halten die Zeile frei, damit jede Reihe gleich hoch ist (ux-pruefer Runde 4) */
.nb-pk__neupreis--leer::before { content: '\00a0'; }

/* b3 ohne Dachzeile: die graue Fläche nimmt den frei gewordenen Platz, Gerät und Betrag stehen größer */
.nb-tk--bildwahl .nb-tk__flaeche { flex: 1 1 auto; min-height: 84px; height: auto; }
.nb-tk--bildwahl .nb-tk__betrag { align-self: center; }

/* 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) */
.nb-tk__modell { position: absolute; inset: 0; }
.nb-tk__modell[hidden] { display: none; }
.nb-tk__modell .nb-pk__foto { position: absolute; left: 50%; top: var(--nb-space-s); width: auto; height: var(--nb-tk-foto-h, 140%); max-width: none; transform: translateX(-50%); mix-blend-mode: multiply; }
.nb-tk__betrag--unter { display: none; }
.nb-tk__betrag--unter[hidden] { display: none !important; }

[data-nb-wert="w1"] .nb-tk__modell .nb-pk__foto { left: auto; right: var(--nb-space-s); transform: none; }
/* 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 */
[data-nb-wert="w1"] .nb-tk__modell .nb-pk__foto { object-position: 100% 50%; }
[data-nb-wert="w1"] .nb-tk__flaeche .nb-tk__betrag--innen { position: relative; max-width: 58%; }
[data-nb-wert="w1"] .nb-tk__betrag--innen .nb-tk__biszu { display: grid; }
/* 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 */
.nb-tk__flaeche { container: nb-tk-flaeche / inline-size; }
/* 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 */
[data-nb-wert="w1"] .nb-tk__modell .nb-pk__foto { height: min(var(--nb-tk-foto-h, 140%), calc((42cqw - var(--nb-space-s)) * 600 / 456)); }
@container nb-tk-flaeche (max-width: 254px) { [data-nb-wert="w1"] .nb-tk__modell .nb-pk__foto { height: min(calc(var(--nb-tk-foto-h, 140%) * 108 / 140), calc((42cqw - var(--nb-space-s)) * 600 / 456)); } }

/* 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 */
.nb-tb.nb-tb--bm { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); background: var(--nb-tb-flaeche, var(--nb-surface-stage)); }
.nb-tb--sky { --nb-tb-flaeche: var(--nb-surface-stage); }

.nb-tb.nb-tb--bm .nb-tb__text { justify-content: center; gap: 0; padding: var(--nb-space-l) var(--nb-space-m) var(--nb-space-l) var(--nb-space-l); }
.nb-tb.nb-tb--bm .nb-tb__titel { font-size: var(--nb-t-heading-02); line-height: 1.25; color: var(--nb-text-heading); }
.nb-tb__satz { margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-tb.nb-tb--bm .nb-tk__knopf { align-self: flex-start; margin-top: var(--nb-space-s); }
/* Das Foto bestimmt die Höhe nicht, es füllt, was Text und Reihe vorgeben */
.nb-tb__foto { position: relative; min-height: 0; margin: var(--nb-space-2xs); overflow: hidden; border-radius: var(--nb-radius-input); background: var(--nb-tb-fotogrund); }
.nb-tb__foto--sky { --nb-tb-fotogrund: var(--nb-sky-500); }

.nb-tb__foto picture { position: absolute; inset: 0; }
.nb-tb__foto picture, .nb-tb__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Zwischen 768 und 1295 px steht die Karte allein in ihrer Zeile, das Foto bekommt eine feste Breite statt der Hälfte */
@media (min-width: 768px) and (max-width: 1295px) {
  .nb-tb.nb-tb--bm { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); min-height: 280px; }
}
/* 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 */
.nb-pk__merkmal.nb-pk__merkmal--sale { color: var(--nb-mint-ink); }
/* 8: Neupreis 4 px unter dem Preis (gap 4 der Spalte, ohne eigenen Rand) */
.nb-pk--b .nb-pk__neupreis { margin-top: 0; }
/* 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 */
.nb-pk__neupreis--30 { white-space: normal; }
/* 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) */
.nb-tb__foto--sky { --nb-tb-fotogrund: #859EDA; }

/* 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) */
.nb-tb.nb-tb--bm { position: relative; transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-tb.nb-tb--bm .nb-tk__knopf::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) and (pointer: fine) { .nb-tb.nb-tb--bm:hover { box-shadow: var(--nb-sh-hoch); } }
.nb-tb.nb-tb--bm:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); box-shadow: var(--nb-sh-hoch); scale: var(--nb-motion-druck-scale-breit); } /* OE 94 Punkt 6 */
@media (prefers-reduced-motion: reduce) { .nb-tb.nb-tb--bm { transition: none; } }

/* 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 */
.nb-s-kat-filter { position: sticky; top: 0; z-index: 60; margin-block: 0; padding-block: var(--nb-space-2xs); }
.nb-s-kat-filter.is-klebt { background: var(--nb-s-grund); box-shadow: var(--nb-sh-hoch); }
/* Runde 7: beim Hochscrollen fährt die Leiste hinter dem Kopf nach oben weg, mit Tastaturfokus darin bleibt sie */
.nb-s-kat-filter { transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); }
/* 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 */
html.nb-kf-leisteweg .nb-s-kat-filter:not(:has(:focus-visible)):not(:has(.nb-kf__pop:not([hidden]), .nb-kf__sortmenue:not([hidden]), .nb-dd__karte:not([hidden]))) { transform: translateY(calc(-100% - 16px)); box-shadow: none; }
/* 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) */
html.nb-kf-kopfaus .nb-announcement-section { transform: translateY(-100%); }
html.nb-kf-kopfaus .nb-kopf-bereich { transform: translateY(calc(-100% - 40px)); }
@media (max-width: 860px) { html.nb-kf-kopfaus .nb-kopf-bereich { transform: translateY(-100%); } }
/* 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 */
html.nb-kf-kopfan .nb-announcement-section, html.nb-kf-kopfan .nb-kopf-bereich { transform: translateY(0); }
html.nb-kf-seite .nb-announcement-section, html.nb-kf-seite .nb-kopf-bereich { transition-duration: var(--nb-motion-transform); }
/* Der klebende Platz bildet einen eigenen Stapel (z-index 60). Ein statisch offenes Fenster muss daraus heraus, sonst liegt
   es unter dem Shop-Kopf */
.nb-s-kat-filter:has(.nb-kf__fenster[data-nb-kf-statisch]) { position: relative; z-index: auto; }
.nb-kf__leiste { position: relative; }

.nb-kf__karte, .nb-kf__zeile { display: flex; align-items: center; gap: var(--nb-space-2xs); min-width: 0; }
.nb-kf__karte { padding: var(--nb-space-2xs); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); border-width: 0; }
.nb-kf__luecke { flex: 1; }

/* Pillen */
.nb-kf__pillen { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); min-width: 0; }
.nb-kf__pille { position: relative; }
.nb-kf__pk, .nb-kf__alle, .nb-kf__sortknopf {
  display: inline-flex; align-items: center; gap: var(--nb-space-2xs); height: 48px; margin: 0; padding: 0 var(--nb-space-s);
  border: 0 solid transparent; border-width: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component);
  color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); white-space: nowrap; cursor: pointer;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve);
}
.nb-kf__pk svg, .nb-kf__sortknopf svg { width: 20px; height: 20px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve-bewegung); }
@media (hover: hover) and (pointer: fine) { .nb-kf__pk:hover, .nb-kf__sortknopf:hover { background: var(--nb-ink-200); } }
/* 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) */
.nb-kf__pk:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); background: var(--nb-ink-300); scale: var(--nb-motion-druck-scale); }
.nb-kf__sortknopf:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); }
/* Runde 6: „Nach oben“ als runder Knopf wie die Pillen, nur sichtbar, wenn die Leiste klebt und der Schalter an ist */
.nb-kf__oben { display: none; flex: none; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-width: 0; border-radius: 50%; background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-kf__oben svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .nb-kf__oben:hover { background: var(--nb-ink-200); } }
.nb-kf__oben:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); background: var(--nb-ink-300); scale: var(--nb-motion-druck-scale); }
main:not([data-nb-nachoben="aus"]) .nb-s-kat-filter.is-klebt .nb-kf__oben { display: inline-grid; }
.nb-kf__pk[aria-expanded="true"], .nb-kf__sortknopf[aria-expanded="true"] { background: var(--nb-ink-200); }
.nb-kf__pk[aria-expanded="true"] svg, .nb-kf__sortknopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.nb-kf__alle { background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-kf__alle svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .nb-kf__alle:hover { background: var(--nb-surface-dark-raised); } }
/* OE 94 Punkt 6: Night-Knopf wird im Druck heller, dark-surface (farbsystem.md:381, einzige hellere Stufe über Night) */
.nb-kf__alle:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); background: var(--nb-surface-dark-raised); scale: var(--nb-motion-druck-scale); }
/* Gesetzt: die Zahl ist das zweite Merkmal neben dem Wort (Lücke im Werte-Dokument, design-auditor §3) */
.nb-kf__pz { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-dark); color: var(--nb-text-on-dark); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; }
.nb-kf__alle .nb-kf__pz { background: var(--nb-lime); color: var(--nb-text-on-lime); }
.nb-kf__pz[hidden] { display: none; }

/* Schwebende Karte je Pille (G4) */
.nb-kf__pop { position: absolute; left: 0; top: calc(100% + var(--nb-space-2xs)); z-index: 70; width: 340px; max-width: calc(100vw - 32px); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); }
.nb-kf__pop, .nb-kf__sortmenue { transform-origin: 50% 0; animation: nb-kf-rein var(--nb-motion-liste) var(--nb-motion-kurve) backwards; }
/* Schließen 150 ms ease-out wie die Aufklappliste, Fassung C (Daniel 09.10.2026) */
.nb-kf__pop[hidden] { display: none; opacity: 0; transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), display var(--nb-motion-liste-aus) allow-discrete; }
@keyframes nb-kf-rein { from { opacity: 0; transform: scale(var(--nb-motion-liste-scale)); } }
.nb-kf__pille[data-nb-kf-pille="zustand"] .nb-kf__pop { width: 440px; }
.nb-kf__pille[data-nb-kf-pille="farbe"] .nb-kf__pop { width: 400px; }
.nb-kf__pille[data-nb-kf-pille="modell"] .nb-kf__pop { width: 360px; }
.nb-kf__popinnen { max-height: min(460px, 60vh); overflow: auto; padding: var(--nb-space-s); }
.nb-kf__popfuss { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-xs) var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); }
.nb-kf__textknopf, .nb-kf__alleweg { margin: 0; padding: var(--nb-space-2xs) 0; border: 0; background: none; color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .nb-kf__textknopf:hover, .nb-kf__alleweg:hover { text-decoration-color: currentColor; } }
.nb-kf__fertig { height: 40px; padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-dark); color: var(--nb-text-on-dark); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); cursor: pointer; transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-kf__fertig:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-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 */
.nb-kf__sort { flex: none; }
.nb-kf__sort--a, .nb-kf__sort--b, .nb-kf__sort--c { display: none; }
main:not([data-nb-sortieren]) .nb-kf__sort--a, main[data-nb-sortieren="a"] .nb-kf__sort--a { display: block; }

.nb-kf__sort--a { width: 248px; }
.nb-kf__sort--a .nb-fl { --fl-hoehe: 48px; }
.nb-kf__sort--a .nb-fl__eingabe { padding: 0 48px 0 var(--nb-space-s); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 48px; }
.nb-kf__sort--a .nb-fl__label { display: none; }
.nb-kf__sort--a .nb-dd__wert::before { content: 'Sortieren: '; font-weight: var(--nb-weight-regular); color: var(--nb-text-body); }
.nb-kf__sort--a .nb-dd__karte { right: 0; left: auto; min-width: 248px; }
.nb-kf__sortknopf { background: var(--nb-surface-component); font-weight: var(--nb-weight-regular); }
.nb-kf__sortknopf b { font-weight: var(--nb-weight-semibold); }
.nb-kf__sortmenue { position: absolute; right: 0; top: calc(100% + var(--nb-space-2xs)); z-index: 70; display: grid; min-width: 280px; padding: var(--nb-space-2xs); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); }
.nb-kf__sortmenue[hidden] { display: none; opacity: 0; transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), display var(--nb-motion-liste-aus) allow-discrete; }
/* S-Wahl-ohne-Fläche: Haken und „Gewählt“, keine Fläche */
.nb-kf__sortmenue button { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: 44px; padding: 0 var(--nb-space-xs); border: 0; border-radius: var(--nb-radius-badge); background: none; color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-01); text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .nb-kf__sortmenue button:hover { background: var(--nb-surface-component); } }
.nb-kf__gewaehlt { display: none; align-items: center; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-kf__gewaehlt svg { width: 18px; height: 18px; }
.nb-kf__sortmenue [aria-checked="true"] { font-weight: var(--nb-weight-semibold); }
.nb-kf__sortmenue [aria-checked="true"] .nb-kf__gewaehlt { display: inline-flex; }
/* c: Reiter in der Zeile über dem Raster */
.nb-kf__sort--c { align-items: center; gap: var(--nb-space-3xs); margin-left: auto; }
.nb-kf__sortlabel { margin-right: var(--nb-space-2xs); font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-kf__sort--c button { height: 36px; padding: 0 var(--nb-space-xs); border: 0; border-radius: var(--nb-radius-pill); background: none; color: var(--nb-text-body); font: inherit; font-size: var(--nb-t-body-02); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kf__sort--c button:hover { background: var(--nb-surface-page); } }
.nb-kf__sort--c button[aria-pressed="true"] { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }

/* Zeile über dem Raster: Anzahl und gesetzte Filter (im Platz raster) */
.nb-kf__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs) var(--nb-space-xs); margin-bottom: var(--nb-space-m); }
.nb-kf__anzahl { margin: 0 var(--nb-space-xs) 0 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
.nb-kf__chips { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-kf__chips:empty { display: none; }
.nb-kf__chipweg { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); height: 36px; padding: 0 var(--nb-space-xs) 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); cursor: pointer; transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-kf__chipweg svg { width: 18px; height: 18px; color: var(--nb-ink-500); transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kf__chipweg:hover { box-shadow: var(--nb-sh-hoch); } }
.nb-kf__chipweg:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); box-shadow: var(--nb-sh-hoch); scale: var(--nb-motion-druck-scale); } /* OE 94 Punkt 6: weiße Fläche wechselt den Schatten */
@media (hover: hover) and (pointer: fine) { .nb-kf__chipweg:hover svg { color: var(--nb-text-heading); } }
/* 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) */
.nb-kf__mehrmeldung { justify-self: stretch; margin: 0; padding: var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); font-size: var(--nb-t-body-01); color: var(--nb-text-heading); }
.nb-kf__mehrmeldung[hidden] { display: none; }

/* ---------- Fenster ---------- */
.nb-kf__fenster { padding: 0; border: 0; border-width: 0; background: var(--nb-surface-page); color: var(--nb-text-heading); box-shadow: var(--nb-sh-schwebt); overflow: hidden; }
.nb-kf__fenster[open] { display: flex; flex-direction: column; }
/* Nach Finger oder Maus trägt das Fenster selbst den Fokus (nb-kategorie.js fensterAuf), ohne Rahmen */
.nb-kf__fenster:focus, .nb-kf__fenster:focus-visible { outline: none; }
/* 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) */
.nb-kf__fenster::backdrop { background: var(--nb-alpha-scrim); animation: nb-kf-scrim var(--nb-motion-farbe) var(--nb-motion-kurve); }
@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 */
@supports (overlay: auto) {
  .nb-kf__fenster:not([open]), .nb-kf__fenster:not([open])::backdrop { opacity: 0; transition: opacity var(--nb-motion-fenster-aus) var(--nb-motion-kurve), display var(--nb-motion-fenster-aus) allow-discrete, overlay var(--nb-motion-fenster-aus) allow-discrete; }
}
/* Statisch offenes Fenster (Zustand fenster) liegt nicht im Top-Layer, deshalb über dem Shop-Kopf (z-index 100 und 101) */
.nb-kf__schirm { position: fixed; inset: 0; z-index: 190; background: var(--nb-alpha-scrim); }
.nb-kf__fenster[data-nb-kf-statisch] { position: fixed; z-index: 191; }
/* Rechts: Panel mit 12 px Abstand zum Rand, ganze Höhe */
.nb-kf__fenster--rechts { position: fixed; inset: var(--nb-space-xs) var(--nb-space-xs) var(--nb-space-xs) auto; width: min(460px, calc(100vw - 24px)); height: auto; max-height: none; margin: 0; border-radius: var(--nb-radius-card); }
/* 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) */
.nb-kf__fenster--rechts[open] { animation: nb-kf-rechts var(--nb-motion-fenster, 160ms) var(--nb-motion-fenster-kurve); }
@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; } }
.nb-kf__fkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-s) var(--nb-space-m); border-bottom: 1px solid var(--nb-border-hairline); }
.nb-v3 .nb-kf__ftitel { margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; }
.nb-kf__zu { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-kf__zu:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); }
@media (hover: hover) and (pointer: fine) { .nb-kf__zu:hover { background: var(--nb-ink-300); } }
.nb-kf__zu svg { width: 20px; height: 20px; }
.nb-kf__finnen { flex: 1; overflow: auto; padding: 0 var(--nb-space-m) var(--nb-space-m); overscroll-behavior: contain; }
.nb-kf__ffuss { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-s) var(--nb-space-m); border-top: 1px solid var(--nb-border-hairline); }
.nb-kf__zeigen { min-width: 200px; height: 48px; padding: 0 var(--nb-space-m); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-action-primary); color: var(--nb-action-primary-label); font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; 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-kf__zeigen:hover { background: var(--nb-action-primary-hover); } }
/* design-auditor B 05.10.2026: Druck sofort, Fläche action-primary-active (design-tokens.json:182), wie karte.css .nb-tk__knopf--signal */
.nb-kf__zeigen:not(:disabled):active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); background: var(--nb-action-primary-active); scale: var(--nb-motion-druck-scale); }
.nb-kf__zeigen:disabled { opacity: .5; cursor: not-allowed; }

/* 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); }
.nb-kf__gtitel { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); }
.nb-kf__gzahl { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-dark); color: var(--nb-text-on-dark); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); }
.nb-kf__gzahl[hidden] { display: none; }
.nb-kf__ginnen { padding-bottom: var(--nb-space-m); }

/* S-Haken (komponenten-strecke-konto.md:407-416): Kasten 24, Rand 2 px border-control, Radius 8, gewählt Signal */
.nb-kf__haken { position: relative; display: flex; align-items: center; gap: var(--nb-space-xs); min-height: 44px; cursor: pointer; }
.nb-kf__haken[hidden] { display: none; }
.nb-kf__haken input, .nb-kf__kachel input, .nb-kf__chip input, .nb-kf__farbe input, .nb-kf__schnellchip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.nb-kf__kasten { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--nb-border-control); border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); color: var(--nb-action-primary-label); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kf__kasten svg { width: 16px; height: 16px; opacity: 0; scale: .5; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-farbe) var(--nb-motion-kurve); }
input:checked + .nb-kf__kasten, .nb-kf__kachel:has(input:checked) .nb-kf__kasten { background: var(--nb-action-primary); border-color: var(--nb-action-primary); }
/* Der Haken wächst beim Setzen aus der Mitte (Daniel 17.10.2026: „fix alles, wo es keine Animation gibt“) */
input:checked + .nb-kf__kasten svg, .nb-kf__kachel:has(input:checked) .nb-kf__kasten svg { opacity: 1; scale: 1; }
input:focus-visible + .nb-kf__kasten { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-kf__name { font-size: var(--nb-t-body-01); line-height: 1.4; }
.nb-kf__n { margin-left: auto; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); font-variant-numeric: tabular-nums; }
.is-aus { cursor: not-allowed; }
.is-aus .nb-kf__name, .is-aus .nb-kf__ktitel, .is-aus .nb-kf__fname, .is-aus > span { color: var(--nb-text-muted); }
.is-aus .nb-kf__kasten, .is-aus .nb-kf__punkt { opacity: .4; }
/* 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 */
:is(.nb-kf__pop, .nb-kf__gruppe):has(:is(.nb-kf__haken, .nb-kf__chip, .nb-kf__farbe, .nb-kf__kachel):not(.is-aus)) :is(.nb-kf__haken, .nb-kf__chip, .nb-kf__farbe, .nb-kf__kachel).is-aus:not(:has(input:checked)) { display: none; }
:is(.nb-kf__pop, .nb-kf__gruppe):has(.nb-kf__haken:not(.is-aus)) .nb-kf__serie:not(:has(.nb-kf__haken:not(.is-aus), input:checked)) { display: none; }
.nb-kf__notiz { margin: var(--nb-space-3xs) 0 0 36px; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }

/* Modell: Suche und Serien */
.nb-kf__suche { position: relative; margin-bottom: var(--nb-space-xs); }
.nb-kf__lupe { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: grid; color: var(--nb-text-heading); pointer-events: none; }
.nb-kf__lupe svg { width: 20px; height: 20px; }
.nb-kf__such { box-sizing: border-box; width: 100%; height: 48px; padding: 0 var(--nb-space-s) 0 48px; border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); color: var(--nb-text-heading); caret-color: var(--nb-text-heading); font: inherit; font-size: 16px; outline: none; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); -webkit-appearance: none; appearance: none; }
.nb-kf__such:focus { background: var(--nb-ink-200); }
@media (hover: hover) and (pointer: fine) { .nb-kf__such:hover { background: var(--nb-ink-200); } }
.nb-kf__such::placeholder { color: var(--nb-text-body); }
/* 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 */
.nb-kf__such { padding-right: 48px; }
.nb-kf__such::-webkit-search-cancel-button, .nb-kf__such::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* Nachmessung 04.10.2026 (ZIEL): das X der Modellsuche hat 44 px Trefferfläche, das Feld ist 48 px hoch */
.nb-kf__suche .nb-su__leeren { width: 44px; height: 44px; right: 2px; }
.nb-kf__such:not(:placeholder-shown) ~ .nb-su__leeren { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nb-kf__serie[hidden] { display: none; }
.nb-kf__seriename { margin: var(--nb-space-xs) 0 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-muted); }
.nb-kf__nichts { margin: var(--nb-space-s) 0 0; font-size: var(--nb-t-body-01); color: var(--nb-text-body); }

/* Zustand: Kacheln grau in der weißen Fläche (Umkehr), gewählt wie die Rechner-Kachel (G1, Bruch farbsystem.md:102) */
.nb-kf__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-2xs); }
.nb-kf__kachel { position: relative; display: flex; flex-direction: column; gap: var(--nb-space-3xs); min-height: 112px; padding: var(--nb-space-xs) 44px var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
/* 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 */
.nb-kf__kachel:not(.is-aus):active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
@media (hover: hover) and (pointer: fine) { .nb-kf__kachel:hover { background: var(--nb-ink-200); } }
.nb-kf__kachel .nb-kf__kasten { position: absolute; right: var(--nb-space-xs); top: var(--nb-space-xs); }
.nb-kf__ktitel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-kf__ksatz { font-size: var(--nb-t-body-02); line-height: 1.4; color: var(--nb-text-body); }
.nb-kf__kpreis { margin-top: auto; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; }
.nb-kf__kachel:has(input:checked) { background: var(--nb-surface-stage); box-shadow: inset 0 0 0 1px var(--nb-sky-500); }
.nb-kf__kachel:has(input:focus-visible) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* Speicher und Größe: Chips */
.nb-kf__chipwahl { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
.nb-kf__chip { position: relative; display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 44px; padding: 0 var(--nb-space-s); border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kf__chip:hover { background: var(--nb-ink-200); } }
.nb-kf__chip:not(.is-aus):not(:has(input:checked)):active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); background: var(--nb-ink-300); } /* OE 94 Punkt 6 */
.nb-kf__chip:not(.is-aus):active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale); }
.nb-kf__chip .nb-kf__n { margin-left: 0; font-weight: var(--nb-weight-regular); }
.nb-kf__chiphaken { display: none; color: var(--nb-action-primary); }
.nb-kf__chiphaken svg { width: 16px; height: 16px; }
.nb-kf__chip:has(input:checked) { background: var(--nb-surface-stage); box-shadow: inset 0 0 0 1px var(--nb-sky-500); }
.nb-kf__chip:has(input:checked) .nb-kf__chiphaken { display: inline-grid; animation: nb-kf-pop var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kf__chip:has(input:focus-visible) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* Farbe: Familien als Punkte mit Namen, Ring border-control (Silber allein 1,24:1) */
.nb-kf__farbwahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nb-space-3xs) var(--nb-space-2xs); }
.nb-kf__farbe { position: relative; display: flex; align-items: center; gap: var(--nb-space-2xs); min-height: 44px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-badge); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kf__farbe:hover { background: var(--nb-surface-component); } }
.nb-kf__punkt { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--nb-kf-farbe); box-shadow: inset 0 0 0 1px var(--nb-border-control); color: var(--nb-surface-page); }
.nb-kf__punkt svg { width: 16px; height: 16px; opacity: 0; scale: .5; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-farbe) var(--nb-motion-kurve); filter: drop-shadow(0 0 1.5px rgb(0 0 0 / .9)); }
.nb-kf__farbe:has(input:checked) .nb-kf__punkt { box-shadow: inset 0 0 0 1px var(--nb-border-control), 0 0 0 2px var(--nb-surface-page), 0 0 0 4px var(--nb-text-heading); }
/* OE 94 Punkt 6: das Farbfeld zeigt im Druck den Ring der Wahl */
.nb-kf__farbe:not(.is-aus):active .nb-kf__punkt { box-shadow: inset 0 0 0 1px var(--nb-border-control), 0 0 0 2px var(--nb-surface-page), 0 0 0 4px var(--nb-text-heading); }
.nb-kf__farbe:has(input:checked) .nb-kf__punkt svg { opacity: 1; scale: 1; }
/* Ring und Haken der Farbe kamen ohne Übergang (Daniel 17.10.2026) */
.nb-kf__punkt { transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kf__farbe:has(input:checked) .nb-kf__fname { font-weight: var(--nb-weight-semibold); }
.nb-kf__farbe:has(input:focus-visible) { outline: 2px solid var(--nb-text-heading); outline-offset: 2px; }
.nb-kf__fname { font-size: var(--nb-t-body-02); }
.nb-kf__farbe .nb-kf__n { margin-left: auto; }
.nb-kf__pop .nb-kf__farbwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Preis: Regler mit zwei Griffen und zwei Felder (komponenten-formular.md:49-67, Regler ist eine Lücke) */
.nb-kf__preis { display: grid; gap: var(--nb-space-s); }
.nb-kf__regler { position: relative; height: 32px; }
.nb-kf__spur { position: absolute; left: 12px; right: 12px; top: 50%; height: 4px; border-radius: 2px; transform: translateY(-50%); background: linear-gradient(90deg, var(--nb-ink-200) var(--nb-kf-von), var(--nb-text-heading) var(--nb-kf-von), var(--nb-text-heading) var(--nb-kf-bis), var(--nb-ink-200) var(--nb-kf-bis)); }
.nb-kf__regler input { position: absolute; inset: 0; width: 100%; height: 32px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.nb-kf__regler input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--nb-text-heading); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); pointer-events: auto; cursor: grab; }
.nb-kf__regler input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--nb-text-heading); background: var(--nb-surface-page); pointer-events: auto; cursor: grab; }
.nb-kf__regler input::-webkit-slider-runnable-track { background: none; }
.nb-kf__regler input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-kf__felder { display: flex; align-items: center; gap: var(--nb-space-xs); }
.nb-kf__feld { flex: 1; }
.nb-kf__bis { font-size: var(--nb-t-body-02); color: var(--nb-text-body); }

/* 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) */
.nb-kf__handy { display: none; }
/* 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) */
@media (max-width: 1239px) {
  .nb-kf--a .nb-kf__pille[data-nb-kf-pille="akku"], .nb-kf--a .nb-kf__pille[data-nb-kf-pille="farbe"] { display: none; }
}
@media (max-width: 1023px) {
  .nb-kf--a .nb-kf__pille[data-nb-kf-pille="speicher"], .nb-kf--a .nb-kf__pille[data-nb-kf-pille="preis"] { display: none; }
}
@media (max-width: 767px) {
  .nb-kf__karte > .nb-kf__alle, .nb-kf__pillen, .nb-kf--b .nb-kf__zeile > .nb-kf__alle { display: none; }
  .nb-kf__handy { display: flex; flex: 1; order: -1; }
  .nb-kf__alle--handy { flex: 1; justify-content: center; }
  .nb-kf__karte { padding: var(--nb-space-2xs); }
  .nb-kf__luecke { display: none; }
  
  
  .nb-kf__sort--a { width: auto; flex: 1; }
  /* OE 94 Punkt 1 (Daniel 05.10.2026): am Handy steht im Feld nur der Wert, die Vorsilbe schnitt die Wahl ab (rund 100 px
     Platz). „Sortieren“ bleibt Label für Screenreader (Werte wie .nb-s-sr, schale.css) und steht als Gruppe in der Liste
     (komponenten-formular.md:124: 11 px versal, +0,12em, text-muted, wie .nb-dd__gruppe). Gilt auch für das Feld der Bewertungen */
  .nb-kf__sort--a .nb-dd__wert::before { content: none; }
  .nb-kf__sort--a .nb-fl__label { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .nb-kf__sort--a .nb-dd__liste::before { content: 'Sortieren'; display: block; padding: var(--nb-space-xs) var(--nb-space-s) var(--nb-space-3xs); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--nb-text-muted); }
  
  
  /* Blatt von unten statt Vollbild von rechts (Daniel 14.10.2026, tokens.json blatt, Baukasten kat-filter). Feste
     Höhe blatt-hoehe, damit das Blatt beim Auf- und Zuklappen der Gruppen nicht springt. Fuß über der Safe Area */
  .nb-kf__fenster--rechts, .nb-kf__fenster--mitte { inset: auto 0 0; width: 100%; max-width: 100%; height: var(--nb-blatt-hoehe); max-height: var(--nb-blatt-hoehe); margin: 0; border-radius: var(--nb-blatt-radius); }
  .nb-kf__fenster--rechts[open], .nb-kf__fenster--mitte[open] { animation: nb-kf-blatt var(--nb-motion-blatt) var(--nb-motion-fenster-kurve); }
  .nb-kf__ffuss { padding-bottom: var(--nb-blatt-unten); }
  .nb-kf__ffuss .nb-kf__zeigen { flex: 1; min-width: 0; }
  .nb-kf__finnen { padding: 0 var(--nb-space-s) var(--nb-space-m); }
  .nb-kf__fkopf, .nb-kf__ffuss { padding-inline: var(--nb-space-s); }
  .nb-kf__farbwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-kf__status { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nb-kf__chips { flex-wrap: nowrap; }
}
@keyframes nb-kf-blatt { from { transform: translateY(100%); } to { transform: none; } }
@supports (overlay: auto) {
  @media (max-width: 767px) {
    .nb-kf__fenster:not([open]) { opacity: 1; transform: translateY(100%); transition: transform var(--nb-motion-blatt-aus) var(--nb-motion-kurve), opacity var(--nb-motion-blatt-aus) var(--nb-motion-kurve), display var(--nb-motion-blatt-aus) allow-discrete, overlay var(--nb-motion-blatt-aus) allow-discrete; }
    .nb-kf__fenster:not([open])::backdrop { transition-duration: var(--nb-motion-blatt-aus); }
  }
  @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .nb-kf__fenster:not([open]) { opacity: 0; 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 */
.nb-kf__zt { display: inline-block; animation: nb-kf-zahl var(--nb-motion-liste) var(--nb-motion-kurve); transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kf__zeigen[aria-busy="true"] .nb-kf__zt { opacity: .6; }
@keyframes nb-kf-zahl { from { opacity: 0; transform: translateY(6px); } }
.nb-kf--a .nb-kf__gzahl:not([hidden]) ~ .nb-kf__ghaken { animation: nb-kf-pop var(--nb-motion-farbe) var(--nb-motion-kurve); }
@keyframes nb-kf-pop { from { opacity: 0; scale: .5; } }
@media (prefers-reduced-motion: reduce) {
  .nb-kf__fenster[open], .nb-kf__fenster::backdrop { animation: none; }
  .nb-kf__pk svg, .nb-kf__gruppe summary svg, .nb-kf__kasten, .nb-kf__kasten svg { transition: none; }
  .nb-kf__zt, .nb-kf--a .nb-kf__gzahl:not([hidden]) ~ .nb-kf__ghaken, .nb-kf__chiphaken { animation: none; }
  .nb-kf__punkt, .nb-kf__punkt 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 */
.nb-kf--a .nb-kf__pz { display: none !important; }
main:has(.nb-kf--a) .nb-kf__chips { display: none; }
/* 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) */
.nb-kf__pkhaken { display: none; }
.nb-kf__pkhaken svg { width: 16px; height: 16px; }
.nb-kf--a .nb-kf__pille.is-gesetzt .nb-kf__pk { background: var(--nb-surface-stage); color: var(--nb-text-on-stage); }
.nb-kf--a .nb-kf__pille.is-gesetzt .nb-kf__pkhaken { display: inline-grid; place-items: center; }
.nb-kf--a .nb-kf__pille.is-gesetzt .nb-kf__pk[aria-expanded="true"] { background: var(--nb-surface-stage); }
@media (hover: hover) and (pointer: fine) { .nb-kf--a .nb-kf__pille.is-gesetzt .nb-kf__pk:hover { background: var(--nb-surface-stage); } }
/* „Alle Filter“ und „Filter“ am Handy bleiben Night mit dem Regler, auch gesetzt (Runde 5, Daniel 03.10.2026) */
.nb-kf__allezeichen { display: inline-grid; place-items: center; }
.nb-kf__allezeichen svg { width: 20px; height: 20px; }
/* Gruppenköpfe im Fenster: der Haken statt der Zahl, die Zahl bleibt für Screenreader */
.nb-kf__ghaken { display: none; color: var(--nb-text-on-stage); }
.nb-kf__ghaken svg { width: 16px; height: 16px; }
/* Die Zahl liest der Screenreader aus data-nb-kf-gsr („, 1 gesetzt“), sichtbar steht nur der Haken */
.nb-kf--a .nb-kf__gzahl { display: none !important; }
.nb-kf--a .nb-kf__gzahl:not([hidden]) ~ .nb-kf__ghaken { display: inline-grid; place-items: center; }
/* Gewählter Chip im Fenster Ton in Ton: Schrift und Haken sky-900 (bricht komponenten-global.md:60-62, Haken in Signal) */
.nb-kf--a .nb-kf__chip:has(input:checked), .nb-kf--a .nb-kf__chip:has(input:checked) .nb-kf__chiphaken { color: var(--nb-text-on-stage); }
/* Kopf der schwebenden Karte: Gruppe in heading-03 links, Löschen rechts, mindestens 44 px, Haarlinie darunter */
.nb-kf__popkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: 44px; padding: var(--nb-space-xs) var(--nb-space-s); border-bottom: 1px solid var(--nb-border-hairline); box-sizing: border-box; }
.nb-kf__poptitel { margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.25; color: var(--nb-text-heading); }
.nb-kf__popfuss { justify-content: flex-end; }
/* Löschen gesperrt: ink-600 (5,97:1) ohne Unterstrich, bleibt im Tab-Weg */
.nb-kf__loeschen[aria-disabled="true"] { color: var(--nb-text-muted); text-decoration: none; cursor: default; }
/* Fensterkopf: Titel, Alle löschen, Schließen, nicht Rand an Rand (ux-pruefer Runde 4) */
.nb-kf__fkopf .nb-kf__loeschen { margin-left: auto; margin-right: var(--nb-space-xs); }
.nb-kf__ffuss { justify-content: flex-end; }
/* 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 */
.nb-kf__ktitel { color: var(--nb-text-heading); }
.nb-kf__ksatz, .nb-kf__kpreis { color: var(--nb-text-body); }
/* 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 */
html.nb-kf-kopfaus .nb-kopf-bereich:focus-within { transform: translateY(-40px); }
@media (max-width: 860px) { html.nb-kf-kopfaus .nb-kopf-bereich:focus-within { transform: none; } }
/* scroll-padding-top setzt das Verhalten aus der echten Höhe der Leiste (Befund 3) */
@media (prefers-reduced-motion: reduce) { html.nb-kf-kopfaus .nb-announcement-section, html.nb-kf-kopfaus .nb-kopf-bereich { transform: none; } }
/* Der Pfeil dreht sich beim Öffnen, der Haken nicht (sonst stand er als zweiter Pfeil da) */
.nb-kf__pk[aria-expanded="true"] .nb-kf__pkhaken svg { transform: none; }
/* 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 */
.nb-kf__gruppe summary .nb-kf__ghaken svg { width: 16px; height: 16px; margin-left: 0; transform: none; }
/* 14: Löschen 44 px hoch, der Kopf bleibt mit 4 px Polster bei 52 px */
.nb-kf__popkopf { padding-block: var(--nb-space-3xs); }
.nb-kf__popkopf .nb-kf__loeschen { min-height: 44px; }
/* 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 */
.nb-s-kat-filter { transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), background-color var(--nb-motion-rand) var(--nb-motion-kurve); }
@media (prefers-reduced-motion: reduce) { .nb-s-kat-filter { transition: none; } }
/* zustands-pruefer Runde 4 (BEFUNDE-kategorie-runde4-2026-10-03.md) */
/* 10: im statischen Werkstatt-Zustand „Fenster offen“ steht die Leiste an ihrem Platz */
.nb-s-kat-filter:has(.nb-kf__fenster[data-nb-kf-statisch]) { top: 0; }
/* 12: „Alle löschen“ im Fensterkopf 44 px hoch */
.nb-kf__fkopf .nb-kf__loeschen { min-height: 44px; }

/* 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-s-raster { margin-block: 0 var(--nb-space-sektion-normal); }
.nb-kr { display: block; }
.nb-kr__seite { display: none; }
.nb-kr__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nb-space-m); align-items: stretch; }
@media (max-width: 1099px) { .nb-kr__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nb-space-s); } }
@media (max-width: 767px) { .nb-kr__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-xs); } }

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

/* Trade-in-Einschübe: eine Fassung sichtbar je Schalter */
.nb-kr__slot { display: grid; min-width: 0; }
.nb-kr__slot[hidden] { display: none !important; }
.nb-kr__slot--breit { grid-column: span 2; }
.nb-kr__tv, .nb-kr__bv { display: none; min-width: 0; }
.nb-kr__tv > *, .nb-kr__bv > * { height: 100%; }
main:not([data-nb-tausch]) .nb-kr__tv--b, main[data-nb-tausch="a"] .nb-kr__tv--a, main[data-nb-tausch="b"] .nb-kr__tv--b, main[data-nb-tausch="c"] .nb-kr__tv--c, main[data-nb-tausch="b2"] .nb-kr__tv--b2, main[data-nb-tausch="b3"] .nb-kr__tv--b3 { display: grid; }

/* Runde 4: breite Karte in der Ordnung von Back Market, Sky und Coral */
main[data-nb-breit="f"] .nb-kr__bv--f, main[data-nb-breit="g"] .nb-kr__bv--g, main[data-nb-breit="h"] .nb-kr__bv--h, main[data-nb-breit="i"] .nb-kr__bv--i { display: grid; }
/* 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 */
@media (min-width: 768px) and (max-width: 1295px) {
  .nb-kr__slot--karte { grid-column: span 2; }
  .nb-kr__slot--breit { grid-column: 1 / -1; }
}

@media (max-width: 767px) { .nb-kr__slot--karte { grid-column: 1 / -1; } .nb-kr__slot--breit { display: none !important; } }
/* Schalter foto: quer (Runde 2, 02.10.2026), am Handy eine Karte je Zeile mit dem Foto links wie Back Market */
@media (max-width: 767px) { main[data-nb-foto="quer"] .nb-kr__raster { grid-template-columns: minmax(0, 1fr); } }

/* Trade-in als Pille über dem Raster, wie Back Market (Schalter tausch: pille) */
.nb-kr__tauschpille { display: none; align-items: center; gap: var(--nb-space-2xs); width: fit-content; min-height: 40px; margin: calc(var(--nb-space-xs) * -1) 0 var(--nb-space-m); padding: 0 var(--nb-space-s); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-kr__tauschpille svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .nb-kr__tauschpille:hover { box-shadow: var(--nb-sh-hoch); } }
.nb-kr__tauschpille:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); box-shadow: var(--nb-sh-hoch); scale: var(--nb-motion-druck-scale); } /* OE 94 Punkt 6 */

/* Weitere Modelle anzeigen, mit Zähler und Fortschritt (ux U4.1) */
.nb-kr__mehr { display: grid; justify-items: center; gap: var(--nb-space-xs); margin-top: var(--nb-space-xl); }
.nb-kr__mehr[hidden] { display: none; }
.nb-kr__mehrzahl { margin: 0; font-size: var(--nb-t-body-01); color: var(--nb-text-body); font-variant-numeric: tabular-nums; }
.nb-kr__balken { position: relative; width: 200px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--nb-ink-200); }
.nb-kr__balken::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--nb-kat-anteil, 0)); background: var(--nb-text-heading); transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-kr__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--nb-space-m); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); cursor: pointer; transition: box-shadow 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); }
@media (hover: hover) and (pointer: fine) { .nb-kr__knopf:hover { box-shadow: var(--nb-sh-hoch); } }
.nb-kr__knopf--haupt { background: var(--nb-surface-dark); box-shadow: none; color: var(--nb-text-on-dark); }
@media (hover: hover) and (pointer: fine) { .nb-kr__knopf--haupt:hover { background: var(--nb-surface-dark-raised); box-shadow: none; } }
/* 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) */
.nb-kr__knopf:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); box-shadow: var(--nb-sh-hoch); scale: var(--nb-motion-druck-scale); }
.nb-kr__knopf--haupt:active { background: var(--nb-surface-dark-raised); box-shadow: none; }
.nb-kr__knopf[hidden] { display: none; }

/* Seitenzahlen (Schalter laden: seiten) */
.nb-kr__seiten { margin-top: var(--nb-space-xl); }
.nb-kr__seiten[hidden] { display: none; }
.nb-kr__seiten ol { display: flex; justify-content: center; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-kr__seiten button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); cursor: pointer; 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-kr__seiten button:hover { box-shadow: var(--nb-sh-hoch); } }
.nb-kr__seiten button:not([aria-current]):active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); box-shadow: var(--nb-sh-hoch); scale: var(--nb-motion-druck-scale); } /* OE 94 Punkt 6 */
.nb-kr__seiten button[aria-current] { background: var(--nb-surface-dark); color: var(--nb-text-on-dark); box-shadow: none; }

/* Keine Treffer und leere Kategorie: eine weiße Karte, kein Kleintext (G32) */
.nb-kr__keine, .nb-kr__leer { display: grid; justify-items: start; gap: var(--nb-space-s); max-width: 720px; padding: var(--nb-space-l); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-kr__keine[hidden] { display: none; }
.nb-kr__keine { margin-top: var(--nb-space-s); }
.nb-kr__leer { margin-top: var(--nb-space-m); }
.nb-kr__leerzeichen { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--nb-surface-component); }
.nb-kr__leerzeichen svg { width: 28px; height: 28px; }
.nb-v3 .nb-kr__leertitel { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-heading); }
.nb-kr__leersatz { margin: 0; max-width: 52ch; font-size: var(--nb-t-heading-02); line-height: 1.4; color: var(--nb-text-heading); }
.nb-kr__knoepfe { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); }
.nb-kr__hilfe { margin: 0; font-size: var(--nb-t-body-01); }
.nb-kr__hilfe a { display: inline-flex; align-items: center; min-height: 44px; }
.nb-kr__hilfe a, .nb-kr__wege a { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; }
.nb-kr__wege { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-kr__wege a { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 44px; font-size: var(--nb-t-body-01); }
.nb-kr__wege a svg { width: 20px; height: 20px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-kr__wege a:hover svg { transform: translateX(3px); } }

@media (max-width: 767px) {
  .nb-kr__keine, .nb-kr__leer, [data-nb-figur="karte"] .nb-kr__suche { padding: var(--nb-space-m); }
}

/* 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 */
.nb-kr__figurtext { display: grid; justify-items: start; gap: var(--nb-space-s); }
.nb-kr__suche { display: grid; justify-items: start; gap: var(--nb-space-s); max-width: 720px; margin-top: var(--nb-space-m); }
/* Entscheid 94 Punkt 2 (05.10.2026): „Gerade lieferbar“ unter der Suche ohne Treffer, vier Karten im Raster der Liste */
.nb-kr__vorschlag { margin-top: var(--nb-space-l); }
.nb-kr__vorschlag .nb-kr__raster { margin-top: var(--nb-space-m); }
/* K11 (Qualitätslauf Kategorie, 04.10.2026, R14): aspect-ratio hält die Box 480 × 358 auch ohne Bild, der Platz bleibt leer */
.nb-kr__figur { display: block; width: 320px; max-width: 72vw; aspect-ratio: 480 / 358; }
.nb-kr__figur img { display: block; width: 100%; height: auto; }
/* zustands-pruefer Runde 5 Befund 2: bei 281 px schob die Figur Meldung und Knöpfe am Handy aus dem ersten Bildschirm */
@media (max-width: 767px) { .nb-kr__figur { width: 200px; } }

:is([data-nb-figur="oben"], [data-nb-figur="seite"]) .nb-kr__figurblock { padding: 0; border-radius: 0; background: none; box-shadow: none; }

[data-nb-figur="seite"] .nb-kr__figurblock { margin-top: var(--nb-space-l); }
@media (min-width: 768px) {
  [data-nb-figur="seite"] .nb-kr__figurblock { grid-template-columns: 280px minmax(0, 1fr); align-items: center; column-gap: var(--nb-space-l); max-width: 880px; }
}
@media (prefers-reduced-motion: reduce) { .nb-kr__balken::after, .nb-kr__wege a svg { transition: none; } }

/* Runde 3 (zustands-pruefer Befund 16): Quelle und Bezug der Streichpreise unter dem Raster */
.nb-kr__fussnote { 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/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. */
.nb-bw [hidden] { display: none !important; }
.nb-bw__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-s); margin-bottom: var(--nb-space-m); }
.nb-v3 .nb-bw__titel { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-heading); }

.nb-bw__spalten { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--nb-space-m); align-items: start; }
/* 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) */
.nb-bw__seite { align-self: stretch; }
.nb-bw__kopfkarte { position: sticky; top: calc(var(--nb-bw-oben, 0px) + var(--nb-space-m)); }
.nb-bw__haupt { display: grid; gap: var(--nb-space-l); min-width: 0; }
.nb-v3 .nb-bw__h3 { margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }

/* Note */
.nb-bw__schnitt { display: grid; gap: var(--nb-space-2xs); justify-items: start; }
.nb-bw__note { display: flex; align-items: baseline; gap: var(--nb-space-3xs); margin: 0; }
.nb-bw__note b { 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: tabular-nums lining-nums; }
.nb-bw__note span { font-size: var(--nb-t-heading-02); color: var(--nb-text-body); }
.nb-bw__notesatz { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-bw__sterne { width: 80px; height: 16px; flex: none; color: var(--nb-text-heading); }
.nb-bw__sterne--gross { width: 140px; height: 28px; }
.nb-bw__detail { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-bw__detail li { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs); font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-bw__dwert { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); color: var(--nb-text-heading); }
.nb-bw__dwert b { min-width: 2.2em; text-align: right; font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; }
.nb-bw__echt { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }

/* c: Kopfkarte */
.nb-bw__kopfkarte { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-m); border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-bw__kopfkarte > .nb-bw__h3 { margin-top: var(--nb-space-xs); }

/* Liste und Sortieren */

.nb-bw__sort { display: block; }
/* Sortieren steht auf dem K1-Grund: weißes Feld mit sh-ruht wie in der Filterleiste b (Umkehr-Regel) */
.nb-bw__kopf .nb-fl { --fl-grund: var(--nb-surface-page); --fl-grund-aktiv: var(--nb-ink-100); }
.nb-bw__kopf .nb-fl__rahmen { box-shadow: var(--nb-sh-ruht); }
.nb-bw__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-s); }

/* Karte */
.nb-bw__karte { display: flex; flex-direction: column; gap: var(--nb-space-s); padding: var(--nb-space-m) var(--nb-space-l); border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-bw__karte:focus { outline: none; }
.nb-bw__kartenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nb-space-s); }
.nb-bw__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs) var(--nb-space-xs); margin: 0; }
.nb-bw__alias { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-bw__bestaetigt { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); height: 24px; padding: 0 var(--nb-space-2xs) 0 4px; border-radius: var(--nb-radius-pill, 999px); background: var(--nb-surface-component); color: var(--nb-text-heading); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1; white-space: nowrap; }
.nb-bw__bestaetigt svg { width: 16px; height: 16px; color: var(--nb-text-heading); }
.nb-bw__meta { margin: var(--nb-space-3xs) 0 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); font-variant-numeric: tabular-nums; }
.nb-bw__text { margin: 0; max-width: var(--nb-measure, 65ch); font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); white-space: pre-line; overflow-wrap: anywhere; }

/* Fuß: Gerätekasten und Hilfreich */
.nb-bw__fuss { display: flex; align-items: stretch; gap: var(--nb-space-xs); margin-top: auto; }
.nb-bw__geraet { display: flex; flex: 1 1 auto; align-items: center; gap: var(--nb-space-s); min-width: 0; padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-bw__thumb { display: grid; place-items: center; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); }
.nb-bw__thumb img { width: auto; height: 42px; max-width: none; }
.nb-bw__geraettext { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nb-space-3xs) var(--nb-space-s); min-width: 0; }
.nb-bw__geraetname { margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-bw__ansehen { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-bw__ansehen:hover { text-decoration-color: currentColor; } }
.nb-bw__hilfreich { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: var(--nb-space-2xs); align-self: center; min-height: 44px; margin: 0 0 0 auto; padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill, 999px); background: var(--nb-surface-component); color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-bw__hilfreich svg { width: 18px; height: 18px; }
.nb-bw__daumen { display: inline-grid; }
.nb-bw__daumen--voll, .nb-bw__hilfreich[aria-pressed="true"] .nb-bw__daumen:not(.nb-bw__daumen--voll) { display: none; }
.nb-bw__hilfreich[aria-pressed="true"] .nb-bw__daumen--voll { display: inline-grid; }
@media (hover: hover) and (pointer: fine) { .nb-bw__hilfreich:hover { background: var(--nb-ink-200); } }
.nb-bw__hilfreich:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); background: var(--nb-ink-300); scale: var(--nb-motion-druck-scale); } /* OE 94 Punkt 6: graue Pille im Druck ink-300, gedrückt (aria-pressed) gewinnt die Regel darunter */
.nb-bw__hilfreich[aria-pressed="true"] { background: var(--nb-surface-stage); color: var(--nb-text-on-stage); }
.nb-bw__mehr { margin-top: var(--nb-space-l); }
@media (min-width: 1100px) { .nb-bw--c .nb-bw__mehr { margin-left: calc(340px + var(--nb-space-m)); } }

@media (max-width: 1099px) {
  .nb-bw__spalten { grid-template-columns: minmax(0, 1fr); }
  .nb-bw__kopfkarte { position: static; }
  .nb-bw__kopfkarte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--nb-space-l); }
  .nb-bw__kopfkarte > .nb-bw__schnitt { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .nb-bw__kopfkarte > .nb-bw__h3 { grid-column: 2; grid-row: 1; margin-top: 0; }
  .nb-bw__kopfkarte > .nb-bw__detail { grid-column: 2; grid-row: 2; }
  .nb-bw__kopfkarte > .nb-bw__echt { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .nb-bw__kopf { margin-bottom: var(--nb-space-s); }
  .nb-bw__kopfkarte { grid-template-columns: minmax(0, 1fr); padding: var(--nb-space-m) var(--nb-space-s); }
  .nb-bw__kopfkarte > * { grid-column: 1 !important; grid-row: auto !important; }
  .nb-bw__kopfkarte > .nb-bw__h3 { margin-top: var(--nb-space-xs); }
  .nb-bw__haupt { gap: var(--nb-space-m); }
  .nb-bw__sort, .nb-bw__sort.nb-kf__sort--a { width: 100%; }
  .nb-bw__liste { gap: var(--nb-space-xs); }
  .nb-bw__karte { padding: var(--nb-space-m) var(--nb-space-s); }
  .nb-bw__fuss { flex-direction: column; }
  .nb-bw__hilfreich { align-self: flex-start; margin-left: 0; }
  
}
/* 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) */
.nb-bw__herkunft { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-bw__kurz a { white-space: nowrap; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-bw__kurz a:hover { text-decoration-color: currentColor; } }
.nb-bw__pruefung { display: grid; gap: var(--nb-space-xs); margin-top: var(--nb-space-l); padding: var(--nb-space-m) var(--nb-space-l); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
/* Die Sprungmarke landet unter dem klebenden Kopf, so tief wie die Kopfkarte klebt */
.nb-bw__pruefung > .nb-bw__h3 { scroll-margin-top: calc(var(--nb-bw-oben, 0px) + var(--nb-space-m)); }
.nb-bw__pruefsatz { margin: 0; max-width: var(--nb-measure, 65ch); font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-body); }
@media (min-width: 1100px) { .nb-bw--c .nb-bw__pruefung { margin-left: calc(340px + var(--nb-space-m)); } }
/* Ohne Netz: weiße Karte wie die Meldung über dem Raster (nb-kategorie-jtl.css), nichts steht frei */
.nb-bw__meldung { justify-self: stretch; margin: 0; padding: var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); font-size: var(--nb-t-body-01); color: var(--nb-text-heading); }
/* Platzhalter beim Nachladen (.nb-skelett aus nb-tradein.css, farbsystem.md:548 ink-100 mit Licht #F9FAFC wie dort) */
.nb-bw { --nb-skelett-licht: #F9FAFC; }
.nb-bw__karte.nb-bw__platz { min-height: 168px; border-radius: var(--nb-radius-card); box-shadow: none; }
@media (max-width: 767px) { .nb-bw__pruefung { padding: var(--nb-space-m) var(--nb-space-s); } }
@media (prefers-reduced-motion: reduce) { .nb-bw__hilfreich, .nb-bw__ansehen, .nb-bw__kurz a { transition: none; } }

/* 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. */
.nb-pk2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--nb-space-2xs); padding: var(--nb-space-2xs); border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-pk2__bild { position: relative; overflow: hidden; min-height: 280px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-pk2__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nb-pk2__inhalt { display: flex; flex-direction: column; justify-content: center; gap: var(--nb-space-m); padding: var(--nb-space-l) var(--nb-space-l) var(--nb-space-l) var(--nb-space-m); }
.nb-v3 .nb-pk2__titel { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-heading); }
.nb-pk2__liste { display: grid; gap: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; }
.nb-pk2__zeile { display: flex; align-items: center; gap: var(--nb-space-xs); padding: var(--nb-space-xs); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-pk2__zeichen { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page); color: var(--nb-text-heading); }
.nb-pk2__zeichen svg { width: 24px; height: 24px; }
.nb-pk2__text { display: grid; gap: 2px; }
.nb-pk2__text b { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-pk2__text span { font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-pk2__link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; color: var(--nb-text-heading); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-color: var(--nb-ink-300); text-underline-offset: 4px; transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-pk2__link:hover { text-decoration-color: currentColor; } }
@media (max-width: 767px) {
  .nb-pk2 { grid-template-columns: minmax(0, 1fr); }
  .nb-pk2__bild { min-height: 0; aspect-ratio: 4 / 3; }
  .nb-pk2__inhalt { padding: var(--nb-space-s) var(--nb-space-xs) var(--nb-space-xs); gap: var(--nb-space-s); }
}

/* baukasten/sektionen/tausch-band/sektion.css */
/* Trade-in am Ende (Runde 8, Teil B). Werte VORGABEN-kategorie-runde8-design §2b. */
.nb-tb2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--nb-space-2xs); padding: var(--nb-space-2xs); border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-tb2__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--nb-space-s); padding: var(--nb-space-l); }
.nb-v3 .nb-tb2__titel { margin: 0; max-width: 18ch; 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; }
.nb-tb2__satz { margin: 0; max-width: 44ch; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-tb2__knopf { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 48px; margin-top: var(--nb-space-2xs); padding: 0 var(--nb-space-m); border-radius: var(--nb-radius-pill, 999px); background: var(--nb-action-primary); color: #fff; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-tb2__knopf:hover { background: var(--nb-action-primary-hover); } }
/* design-auditor B 05.10.2026: Druck sofort, Fläche action-primary-active (design-tokens.json:182) */
.nb-tb2__knopf:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); background: var(--nb-action-primary-active); scale: var(--nb-motion-druck-scale); }
.nb-tb2__knopf svg { width: 20px; height: 20px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-tb2__knopf:hover svg { transform: translateX(3px); } }
.nb-tb2__foto { position: relative; overflow: hidden; min-height: 300px; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-tb2__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nb-s.nb-tb2-band { background: var(--nb-surface-component); }
@media (max-width: 767px) {
  .nb-tb2 { grid-template-columns: minmax(0, 1fr); }
  .nb-tb2__foto { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .nb-tb2__text { padding: var(--nb-space-s) var(--nb-space-xs) var(--nb-space-xs); }
  .nb-v3 .nb-tb2__titel { font-size: var(--nb-t-heading-01); }
  .nb-tb2__knopf { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .nb-tb2__knopf, .nb-tb2__knopf svg { transition: none; } }

/* 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. */
.nb-lt__kopf { display: grid; gap: var(--nb-space-s); max-width: 32em; margin-bottom: var(--nb-space-l); }
.nb-v3 .nb-lt__titel { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-heading); }
.nb-lt__einstieg { margin: 0; font-size: var(--nb-t-heading-02); line-height: 1.4; color: var(--nb-text-heading); }
.nb-lt__spalten { display: grid; grid-template-columns: minmax(0, 780px) 340px; justify-content: space-between; gap: var(--nb-space-l); align-items: start; }
.nb-lt__lese { min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
.nb-lt__abschnitt { max-width: 32em; margin-top: 56px; scroll-margin-top: var(--nb-space-2xs); }
.nb-lt__abschnitt:first-child { margin-top: 0; }
.nb-v3 .nb-lt__h2 { margin: 0 0 var(--nb-space-s); font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.01em; color: var(--nb-text-heading); }
.nb-lt p { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-lt__abschnitt p + p, .nb-lt__inhalt > * + * { margin-top: var(--nb-space-s); }
.nb-lt__faelle { display: grid; gap: var(--nb-space-s); margin: 0 0 20px; padding: 0; list-style: none; }
.nb-lt__faelle li { position: relative; padding-left: 28px; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-lt__faelle li::before { content: ''; position: absolute; left: 8px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--nb-text-heading); }
.nb-lt__faelle strong { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
/* 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 */
.nb-lt__link { display: inline-flex; align-items: center; min-height: 44px; margin: -12.5px 0; color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* K9 (04.10.2026): Hover war action-primary-hover = text-link (#473BDA), also unsichtbar. Hover und Druck signal-800 (kh:78, kh:64) */
.nb-lt__link:active { color: var(--nb-action-primary-active); }
@media (hover: hover) and (pointer: fine) { .nb-lt__link:hover { color: var(--nb-action-primary-active); } }
/* design-auditor B 04.10.2026: Farbwechsel über motion-farbe wie .nb-lt__sprung a, ohne 0-s-Druck (Messwerk NULLWECHSEL) */
.nb-lt__link { transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }

/* Klapp-Überschrift: am Rechner eine reine Überschrift, am Handy der Schalter */
.nb-lt__klapp { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; pointer-events: none; }
.nb-lt__klapp .nb-lt__pfeil { display: none; }
.nb-lt__klapp { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-lt__klapp:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
.nb-lt__pfeil { width: 20px; height: 20px; flex: none; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve-bewegung); }

/* Sprungliste am Rand, weiße Karte, nicht klebend */
.nb-lt__sprung { padding: var(--nb-space-m); border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-v3 .nb-lt__sprungtitel { margin: 0 0 var(--nb-space-2xs); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); }
.nb-lt__sprung ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nb-lt__sprung a { display: block; padding: var(--nb-space-2xs) 0 var(--nb-space-2xs) 14px; border-left: 2px solid var(--nb-ink-200); color: var(--nb-text-body); font-size: var(--nb-t-body-01); line-height: 1.4; text-decoration: none; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-lt__sprung a:hover { color: var(--nb-text-heading); border-left-color: var(--nb-text-heading); } }

/* Fragen als freie Aufklapper ohne Karte und ohne Linien */
.nb-lt__fragen { display: grid; gap: var(--nb-space-3xs); }
.nb-lt__frage summary { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: 62px; padding: var(--nb-space-2xs) 0; color: var(--nb-text-heading); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.4; list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.nb-lt__frage summary::-webkit-details-marker { display: none; }
.nb-lt__frage summary { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-lt__frage summary:active { transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); scale: var(--nb-motion-druck-scale-breit); }
.nb-lt__frage[open] .nb-lt__pfeil { transform: rotate(180deg); }
/* OE 94 Punkt 7 (Daniel 05.10.2026): beim Überfahren wird nur der Pfeil Signal-blau, wie auf /verkaufen (fragen/sektion.css:15-16) */
.nb-lt__frage .nb-lt__pfeil { 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-lt__frage summary:hover .nb-lt__pfeil { color: var(--nb-action-primary); } }
.nb-lt__frage p { padding-bottom: var(--nb-space-s); }

/* Fassung b: Weiterlesen */

/* Ganz am Ende: Markenhinweis und Streichpreis-Satz als echter Rechtstext */
.nb-lt__schluss { display: grid; gap: var(--nb-space-2xs); max-width: 32em; margin-top: 56px; }
.nb-lt .nb-lt__schluss p { font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--nb-text-muted); }

@media (max-width: 1099px) {
  .nb-lt__spalten { grid-template-columns: minmax(0, 1fr); }
  .nb-lt__rand { display: none; }
}
@media (max-width: 767px) {
  .nb-lt__kopf { margin-bottom: var(--nb-space-m); }
  .nb-lt__einstieg { font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
  .nb-lt__abschnitt { margin-top: 40px; }
  .nb-v3 .nb-lt__h2 { font-size: 16px; }
  /* Fassung a am Handy: jeder Abschnitt klappt über seine Überschrift auf (ux 10) */
  .nb-lt--a .nb-lt__abschnitt--klapp { margin-top: 0; }
  .nb-lt--a .nb-lt__abschnitt--klapp .nb-lt__h2 { margin: 0; }
  .nb-lt--a .nb-lt__klapp { min-height: 62px; padding: var(--nb-space-2xs) 0; pointer-events: auto; cursor: pointer; }
  .nb-lt--a .nb-lt__klapp .nb-lt__pfeil { display: block; }
  .nb-lt--a .nb-lt__abschnitt--klapp .nb-lt__inhalt { display: none; padding-bottom: var(--nb-space-s); }
  .nb-lt--a .nb-lt__abschnitt--klapp.is-offen .nb-lt__inhalt { display: block; }
  .nb-lt--a .nb-lt__abschnitt--klapp.is-offen .nb-lt__pfeil { transform: rotate(180deg); }
  .nb-lt--a .nb-lt__abschnitt--klapp + .nb-lt__abschnitt:not(.nb-lt__abschnitt--klapp) { margin-top: 40px; }
}
/* 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) */
@media (max-width: 767px) and (scripting: none) {
  .nb-lt--a .nb-lt__abschnitt--klapp { margin-top: 40px; }
  .nb-lt--a .nb-lt__abschnitt--klapp:first-child { margin-top: 0; }
  .nb-lt--a .nb-lt__abschnitt--klapp .nb-lt__h2 { margin: 0 0 var(--nb-space-s); }
  .nb-lt--a .nb-lt__klapp { min-height: 0; padding: 0; pointer-events: none; cursor: default; }
  .nb-lt--a .nb-lt__klapp .nb-lt__pfeil { display: none; }
  .nb-lt--a .nb-lt__abschnitt--klapp .nb-lt__inhalt { display: block; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .nb-lt__pfeil, .nb-lt__frage .nb-lt__pfeil, .nb-lt__sprung a, .nb-lt__weiter > summary { transition: none; } }

/* 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 */
@media (prefers-reduced-motion: reduce) {
  .nb-kf__fenster[open] { animation-name: nb-kf-scrim !important; animation-duration: var(--nb-motion-farbe) !important; animation-timing-function: var(--nb-motion-kurve) !important; animation-fill-mode: both !important; }
  @supports (overlay: auto) { .nb-kf__fenster:not([open]), .nb-kf__fenster:not([open])::backdrop { opacity: 0; transform: none !important; transition-duration: var(--nb-motion-fenster-aus) !important; } }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { @supports (overlay: auto) { .nb-kf__fenster:not([open]), .nb-kf__fenster:not([open])::backdrop { transition-duration: var(--nb-motion-blatt-aus) !important; } } }

/* Hinter einem offenen Fenster rollt die Seite nicht mit, der Platz des Rollbalkens bleibt (wie verkaeufe/sektion.css,
   zustands-pruefer 14.10.2026: Rad und Wisch bewegten die Seite um 188 bis 593 px) */
html:has(.nb-kf__fenster[open]) { overflow: hidden; scrollbar-gutter: stable; }