/* Erzeugt von baukasten/werkzeug/exportieren.mjs aus pdp. Nicht von Hand ändern, Quelle ist der Baukasten:
   baukasten/sektionen/_v2/v2.css
   baukasten/kern/schale.css
   baukasten/kern/formular.css
   baukasten/kern/bewegung.css
   baukasten/kern/schweif.css
   baukasten/kern/pdp.css
   baukasten/sektionen/kasse-korb-summe/sektion.css
   baukasten/kern/pdp-lade.css
   baukasten/sektionen/bewertungen/sektion.css
   baukasten/kern/pdp-b.css
   baukasten/sektionen/pdp-buehne/sektion.css
   baukasten/kern/pdp-wahl.css
   baukasten/sektionen/pdp-zustand/sektion.css
   baukasten/sektionen/pdp-akku/sektion.css
   baukasten/sektionen/pdp-speicher-farbe/sektion.css
   baukasten/sektionen/suchstil/sektion.css
   baukasten/sektionen/pdp-ankauf/sektion.css
   baukasten/sektionen/pdp-uebersicht/sektion.css
   baukasten/sektionen/pdp-details/sektion.css
   baukasten/sektionen/pdp-beweis/sektion.css
   baukasten/kern/karte.css
   baukasten/sektionen/empfehlungen/sektion.css
   baukasten/sektionen/raster/sektion.css
   baukasten/sektionen/pdp-stimmen/sektion.css
   baukasten/sektionen/pdp-abschluss/sektion.css
   baukasten/sektionen/fuss/universell.css
   Ohne 1290 Regeln gelöschter Fassungen (145.1 KB, ohneToteRegeln).
   Dazu lädt layout/header.tpl nb-feld.css und nb-tradein.css. */

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

    
    
    
    

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

    
    
    
    
    
    
    
    

    

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

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

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

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

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

    
    
    
    
    
    
    
    
    

    /* Modellliste kompakt, Textfarbe statt Linkblau */
    
    
    
    

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

/* baukasten/kern/schale.css */
/* Baukasten-Schale. Gilt für jede Sektion jeder Seite, damit alles ein System ist:
   eine linke Kante, zwei Breiten, zwei Sektionsköpfe, zwei Karten, ein Abstand.
   Nur Token aus nb-tokens-v3.css. Schwellen nur 768, 1100 und 1400.

   Kante L = max(Rand, (Fensterbreite − 1200) / 2). Rand 16 / 32 / 48 px.
   Bei 1440 px liegt jede Inhaltskante bei 120 px, bei 390 px bei 16 px. */

/* Maße gelten für die ganze Seite, auch für Kopf und Fuß außerhalb von main */
.nb-v3 {
  --nb-s-rand: var(--nb-space-s);
  --nb-s-breit: var(--nb-container);
  --nb-s-schmal: 720px;
  --nb-s-panel-schatten: 0 2px 4px rgb(0 0 0 / .04), 0 18px 44px -20px rgb(0 0 0 / .18);
}
@media (min-width: 768px) { .nb-v3 { --nb-s-rand: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-v3 { --nb-s-rand: var(--nb-space-xl); } }

.nb-bk {
  --nb-s-grund: var(--nb-surface-page);
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: var(--nb-border-hairline);
  --nb-s-karte-schatten: var(--nb-sh-card);
  --nb-s-abstand: var(--nb-space-sektion-normal);
  display: flow-root;
  background: var(--nb-s-grund);
  color: var(--nb-text-body);
  font-family: var(--nb-font-sans);
}

/* Seitengrund wie im Rechner. Bricht komponenten-tradein.md:511 und farbsystem.md:308, gewollt zum Vergleich */
.nb-bk[data-nb-grund="rechner"] {
  --nb-s-grund: var(--nb-surface-secondary);
  --nb-s-karte-schatten: var(--nb-s-panel-schatten);
}

/* Seitengrund in vier Fassungen für Konto und Kasse (Werkstatt konto-verkauf-detail Runde 2, Daniel 30.09.2026: „keine
   Tiefe … versuch es doch mal mit der background color f8f9fc“, Recherche RECHERCHE-tiefe-grund-karte-2026-09-30.md).
   Alle brechen farbsystem.md:352 („Karten sind weiß auf Weiß“). Freie Werte von Back Market und rebuy, weil es dafür
   keinen Token gibt. --nb-s-karte-schatten-hoch ist der Schatten für Hover und angehobene Karten */
.nb-bk { --nb-s-karte-schatten-hoch: 0 4px 12px rgb(0 0 0 / .08); }
/* bm · Back Market: Grund #F8F9FC (surface-default-mid), Karte weiß ohne Rand, Schatten 0 2px 4px / .05.
   Rand #DFE1E7 am 30.09.2026 raus: Back Markets Produktkacheln haben border 0 (gemessen in Daniels Chrome), und
   Daniel: „kannst du es mal so anpassen, dass backmarkets auch keinen rand hat?“ */
.nb-bk[data-nb-grund="bm"] {
  --nb-s-grund: #F8F9FC;
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: transparent;
  --nb-s-karte-schatten: 0 2px 4px rgba(17, 15, 21, .05);
  --nb-s-karte-schatten-hoch: 0 4px 8px rgba(17, 15, 21, .08);
  /* Schwebendes (Suchtreffer, Menü, Fenster), BM shadow-long */
  --nb-s-panel-schatten: 0 8px 16px rgba(17, 15, 21, .12);
}
/* grau · Grund ink-100 #F2F4F7 wie Apple und Carbon (1,10:1), Karte weiß ohne Rand, Schatten weich wie Back Market */
.nb-bk[data-nb-grund="grau"] {
  --nb-s-grund: var(--nb-ink-100);
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: transparent;
  --nb-s-karte-schatten: 0 2px 4px rgba(17, 15, 21, .05);
  --nb-s-karte-schatten-hoch: 0 4px 8px rgba(17, 15, 21, .08);
}
/* rebuy · Grund weiß, Karte ohne Rand, Kontur-Schatten 28 % bei 1 px plus weicher Schatten 16 % (rgb 47,47,47 als Night) */
.nb-bk[data-nb-grund="rebuy"] {
  --nb-s-grund: var(--nb-surface-page);
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: transparent;
  --nb-s-karte-schatten: 0 0 1px rgb(0 0 0 / .28), 0 1px 6px rgb(0 0 0 / .16);
  --nb-s-karte-schatten-hoch: 0 0 1px rgb(0 0 0 / .32), 0 4px 12px rgb(0 0 0 / .18);
}
/* Im Konto folgt jede Karte dem Grund: Karte e, S-Prüfliste, S-Auswahl-aufklappend, Detail-Blöcke, Tabellen und Kacheln,
   die direkt auf dem Grund stehen. .nb-f-karte liest die Variablen selbst (kern/formular.css) */

/* ---------- Flächen-System in drei Leitern (Daniel 30.09.2026, KRITIK-konto-verkauf-detail §4: „keine broder …
   mehr mit schatten arbeiten“, eigener Seitengrund, die graue Bühne behält ihren Effekt).
   Herleitung und Zahlen in .claude/progress/tradein/baukasten/RECHERCHE-flaechen-system-2026-09-30.md §3 und §4.
   Karte immer #FFFFFF ohne Rand, Tiefe nur über Schatten, Hover nur stärkerer Schatten, nie Rand.
   Die Schatten sind die Vorschläge aus §4 als LOKALE Variablen. nb-tokens-v3.css bleibt unverändert, bis Daniel wählt.
   Alle drei brechen farbsystem.md:241 und :352 (Seite weiß, Karten weiß auf Weiß mit Haarlinie), K3 dazu §3
   („ink-100 nie Seitengrund“). Die Bühne liest --nb-s-buehne (sektionen/buehne/sektion.css). ---------- */
.nb-bk { --nb-s-buehne: var(--nb-surface-secondary); }
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) {
  --nb-s-karte-grund: var(--nb-surface-page);
  --nb-s-karte-rand: transparent;
  /* Schatten nach Back Market, gemessen in Daniels Chrome am 30.09.2026 auf backmarket.de (Produktkacheln
     „shadow-short“, Hover „hover:shadow-middle“, Listen „shadow-long“, ohne Übergang, Grund bleibt weiß).
     Daniel: „der ist viel zu intensiv … der schatten wird immer minimal stärker beim hovern“. Farbe Night statt
     Back Markets rgb(17,15,21), Deckkraft und Maße gleich. Vorher 0,08/0,18/0,24 zweiteilig, verworfen. */
  /* Karte ruht, BM shadow-short */
  --nb-s-karte-schatten: var(--nb-sh-ruht);
  /* Hover und angehoben, BM shadow-middle */
  --nb-s-karte-schatten-hoch: var(--nb-sh-hoch);
  /* Rechner-Karte, Liste, Fenster, BM shadow-long */
  --nb-s-panel-schatten: var(--nb-sh-schwebt);
}
/* k1 „Leise“, Back-Market-Niveau, seit 30.09.2026 gewählt (ENTSCHEIDE-flaechen-kontrast-2026-09-30.md E1), Grund ink-50 */
.nb-bk[data-nb-grund="k1"] { --nb-s-grund: var(--nb-surface-base); --nb-s-buehne: var(--nb-ink-100); }
/* k2 „Mitte“, Empfehlung. Grund ist page (surface-secondary). BRUCH: Bühne #EEF0F6 ist eine neue Stufe
   (L 95,53 / C 0,0083 / H 271), kein Token */
.nb-bk[data-nb-grund="k2"] { --nb-s-grund: var(--nb-surface-secondary); --nb-s-buehne: #EEF0F6; }
/* k3 „Kräftig“, Apple-Niveau. BRUCH: ink-100 als Seitengrund (farbsystem.md §3 „nie Seitengrund“) */
.nb-bk[data-nb-grund="k3"] { --nb-s-grund: var(--nb-ink-100); --nb-s-buehne: var(--nb-ink-200); }
/* Rand ganz weg statt durchsichtig: ein transparenter 1-px-Rand ließ die weiße Kartenfläche als weißen Ring um das
   Kachelbild stehen (Daniel 30.09.2026: „hast du einen weißen rand um die karten gemacht?“) */
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) :is(.nb-s-kachel:not(.nb-s-kategorien--im-bild *), .nb-s-buehne__direkt a, .nb-bd--karte, .nb-vd-foto, .nb-vdh-c__mail, .nb-s-karte, .nb-s-karte--panel, .nb-s-suche__treffer, .nb-kr--menue, .nb-vk-fenster, .nb-vdz__fenster, .nb-ad__fenster, .nb-f-karte, .nb-vk, .nb-pr__liste, .nb-az__wahl--liste, .nb-vdl-b, .nb-vdb-t, .nb-vdz__panel, .nb-vdg-c li, .nb-vdd-c a) { border-width: 0; }
/* Konto auf K1 nach der Umkehr-Regel (G29, ENTSCHEIDE-flaechen-kontrast E2): ink-100 direkt auf dem Grund hat 1,055:1
   und verschwindet. Der aktive Reiter und der Hover werden weiß, der aktive trägt den ruhenden Schatten. Der Bildkasten
   im Detail-Kopf wird eine weiße Kachel mit ruhendem Schatten (known_issues flaechen-k1, Daniel 30.09.2026) */

/* Zusagen-Kasten in den Leitern wie Back Markets Vorteilsleiste (Daniel 30.09.2026: „nimm grau, einfach das hier von
   backmarket“, gemessen auf backmarket.de: Leiste #F2F3F7, Radius 12, Innenabstand 12, Abstand 12, Icon 24 in weißer
   Kachel 40 x 40 mit Radius 8, keine Trennlinien). Grau bleibt ink-100, die weiße Kachel trägt den Kontrast.
   Radius 16 statt 12, nächste Stufe der Skala */

/* Welche Bauteile dem Grund folgen: alle Fassungen außer weiss (heute) und rechner */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"], [data-nb-grund="grau"], [data-nb-grund="rebuy"]) :is(.nb-s-kachel:not(.nb-s-kategorien--im-bild *), .nb-s-buehne__direkt a, .nb-bd--karte, .nb-vd-foto, .nb-vdh-c__mail) {
  background: var(--nb-s-karte-grund); border-color: var(--nb-s-karte-rand); box-shadow: var(--nb-s-karte-schatten);
  transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), transform var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve);
}
/* Konto-Band trägt seinen Warnstreifen links als inset-Schatten weiter */

/* Hover: nie Rand, nie Tönung, nur der stärkere Schatten */
@media (hover: hover) and (pointer: fine) { .nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"], [data-nb-grund="grau"], [data-nb-grund="rebuy"]) :is(a.nb-s-kachel:not(.nb-s-kategorien--im-bild *), .nb-s-buehne__direkt a, .nb-vd-foto, .nb-vdd-c a):hover {
  background: var(--nb-s-karte-grund); border-color: var(--nb-s-karte-rand); box-shadow: var(--nb-s-karte-schatten-hoch);
} }
/* Panel, Liste, Fenster: ohne Rand, sh-panel neu */

/* Große Karten auf der Seite (Bühnen-Karte, Angebot, Stimmen, Kontakt, Schluss) wie Back Market nur mit dem leichten
   Kartenschatten. Den kräftigen nimmt nur, was schwebt: Suchtreffer, Menü, Fenster (Daniel 30.09.2026) */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"]) :is(.nb-s-karte, .nb-s-karte--panel) { border-color: transparent; box-shadow: var(--nb-s-karte-schatten); }

/* Jede Sektion: volle Breite, Inhalt an der einen Kante */
.nb-s { position: relative; margin-block: var(--nb-s-abstand); }
.nb-s[data-nb-flaeche="voll"] { margin-block: 0; padding-block: var(--nb-space-sektion-gross); }
.nb-s__innen { padding-inline: max(var(--nb-s-rand), (100% - var(--nb-s-breit)) / 2); }
.nb-s[data-nb-breite="schmal"] .nb-s__innen > * { max-width: var(--nb-s-schmal); }

/* Sektionskopf in zwei festen Formen: funktional (heading-01) und erzählend (display-02). Immer links. */
.nb-s-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--nb-space-2xs) var(--nb-space-m); margin-block-end: var(--nb-space-m); }

.nb-s-kopf__text { display: grid; gap: var(--nb-space-2xs); max-width: 60ch; }
.nb-v3 .nb-s-kopf h2 { margin: 0; text-wrap: balance; }
.nb-v3 .nb-s-kopf p { margin: 0; }

/* Karten in zwei Formen: mit Haarlinie und leichtem Schatten, oder als Panel mit dem Rechner-Schatten */
.nb-s-karte { background: var(--nb-s-karte-grund); border: 1px solid var(--nb-s-karte-rand); border-radius: var(--nb-radius-card); box-shadow: var(--nb-s-karte-schatten); }

/* Icon im Kreis wie im Rechner (.nb-vertrauen__icon). Fläche surface-info, siehe OFFENE-ENTSCHEIDE Nr. 20 */
.nb-s-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--nb-surface-info); color: var(--nb-text-heading); }
.nb-s-icon svg { width: 22px; height: 22px; }

/* Pillen */

.nb-s-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nb-s :focus-visible:not(.nb-fl__eingabe, .nb-su__eingabe) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* Kopf an der einen Kante (Variante „angeglichen“), nb-kopf.css bleibt unangetastet */
.nb-kopf-bereich.nb-kopf--bk .nb-main__inner, .nb-kopf-bereich.nb-kopf--bk .nb-nav__inner { box-sizing: border-box; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); padding-inline: var(--nb-s-rand); }

/* baukasten/kern/formular.css */
/* Bauteile für Strecke und Konto (vk-werkstatt-typen, 26.09.2026). Nur Token aus nb-tokens-v3.css.
   Vorgaben design-auditor Modus A vom 26.09.2026, Volltext in
   .claude/progress/tradein/baukasten/VORGABEN-strecke-konto-2026-09-26.md.
   Bewegung nur Farbe 200 ms und Rand 250 ms, keine Reveals, kein Rollwerk (farbsystem.md:396). */

/* Felder kommen aus nb-feld.css (Formular-System, komponenten-formular.md, 27.09.2026). Hier bleiben das Raster,
   die alte Klasse nb-f-feld für das Codefeld in anmelden und die Breite über beide Spalten */

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

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

/* Meldung. Fehler auf critical-bg 4,68:1. Hinweis ohne Flaeche, nur Night-Zeichen und Night-Text: die Warnflaeche steht
   nur im Konto-Band und im Band „Preis geaendert“ (farbsystem.md:69, komponenten-strecke-konto.md §7, design-auditor B 28.09.2026) */

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

/* Knöpfe. Primär Signal mit weißem Label 5,24:1 (komponenten-warenkorb.md:336-339). Umriss mit border-control */
.nb-f-knopf { min-height: 48px; }
.nb-f-knopf svg { width: 20px; height: 20px; }
.nb-f-knopf--primaer { background: var(--nb-action-primary); color: var(--nb-action-primary-label); border: 1px solid var(--nb-action-primary); }
@media (hover: hover) and (pointer: fine) { .nb-f-knopf--primaer:hover { background: var(--nb-action-primary-hover); border-color: var(--nb-action-primary-hover); } }
/* Druck: action-primary-active, weißes Label 9,57:1 (nb-tokens-v3.css:88, farbcheck). Wie ga-karte/sektion.css:184
   (qualitaet 05.10.2026, DRUCK: 3 Primärknöpfe ohne :active). Der Night-Knopf im Band hat keinen Wert, OE 94 Punkt 6 */
.nb-f-knopf--primaer:active { background: var(--nb-action-primary-active); border-color: var(--nb-action-primary-active); }
.nb-f-knopf--primaer[aria-disabled="true"] { opacity: .4; pointer-events: none; }

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

.nb-f-knopf--breit { width: 100%; }
/* Druck Fassung C (Daniel 09.10.2026): Primär und Umriss geben über scale nach, die Farbe wechselt sofort, der
   Rücksprung gleitet. Die Liste wiederholt .nb-knopf (nb-tradein.css) plus scale, die doppelte Klasse schlägt .nb-knopf */
.nb-f-knopf:is(.nb-f-knopf--primaer, .nb-f-knopf--umriss) { transition: background var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-farbe) var(--nb-motion-kurve), opacity var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-f-knopf:is(.nb-f-knopf--primaer, .nb-f-knopf--umriss):active { scale: var(--nb-motion-druck-scale); transition: scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-f-knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

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

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

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

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

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

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

/* Platzhalter: ink-100 mit Lichtstreif, Sweep 1200 ms, erst ab 400 ms sichtbar (farbsystem.md:379-382).
   Höhen als Klassen, damit das Nachgeladene genau den Platz findet, den es braucht */

/* Gemessen am 26.09.2026 bei 1440 und 390 px gegen das Nachgeladene: Maske 79/131, Band 119/247,
   Verkaufskarte 333 und 374 bis 592 (je nach Aktionen). Die Verkäufe lädt der Server mit Zeitlimit,
   im Browser springt dort nichts (SPEZ §C 8b), der Platzhalter ist die Rückfallebene */

/* Band und Verkaufskarte (Konto, Verkäufe): weiße Karte ohne Rand wie die echte im Flächen-System K1 (farbsystem.md
   Umkehr-Regel E2), die Zeilen ink-100 stehen damit auf Weiß statt auf dem Grund (vorher 1,055:1). Höhen neu gemessen
   am 04.10.2026 im Zustand normal (zustands-pruefer Z3): Band 131 bei 1440, 199 bei 390. Karten 335 bis 399 bei 1440,
   338 bis 441 bei 390, der Platzhalter nimmt die kleinste, damit nichts über einer Karte wandert */

@keyframes nb-f-platz-ein { from { visibility: hidden; } to { visibility: visible; } }
@keyframes nb-f-platz-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* Karte der Strecke und des Kontos: weiß, Haarlinie, sh-card, Radius 24 (farbsystem.md:332) */
/* Seit 30.09.2026 über die Karten-Variablen der Schale (Seitengrund bm, grau, rebuy, weiss), Rückfall wie bisher */

/* Felder und Suche (.nb-fl, .nb-su) tragen ihren Fokus selbst als eine Linie im Rand, deshalb ausgenommen (Daniel 27.09.2026, G18) */
/* Fokus für Strecke und Konto (farbsystem.md:349-355): 2 px Night mit 3 px Abstand, darunter ein weißer Ring,
   damit er auch auf surface-stage und warning-bg trägt. Kein Radius in der Fokusregel (:359) */
: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 */

 /* Druck, Fassung C 09.10.2026 */

/* Datei-Zeile: ink-100, Polster 8, Vorschau 48 px weiß. Radius der Vorschau 16 wie gerendert (eine spätere Studio-Regel
   überstimmt die 10 px aus §5d) */

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

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

 /* Druck, Fassung C 09.10.2026 */

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

 /* Druck, Fassung C 09.10.2026 */

/* Gewählt nach „Ändern“ (Daniel 03.10.2026): Haken 18 px plus „Gewählt“ rechts in der Zeile des Titels, Fläche bleibt
   ink-100. Die Zeile bleibt 24 px hoch wie der Titel, die Kachel behält ihre Höhe */

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

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

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

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

/* Senden läuft: aria-busy, das Wort bleibt unsichtbar stehen und hält die Breite, der Kreisel liegt mittig darüber.
   Kreisel 18 px, Ring in der Schriftfarbe zu 35 %, Umlauf 0,8 s wie im Studio (kein Motion-Token für Dauerdrehung) */

@keyframes nb-f-drehen { to { transform: rotate(360deg); } }

/* Kein Netz: Meldung in der Formularkarte. Pflicht: Fläche ink-100 (im Studio weiß und auf der Karte unsichtbar) */

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

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

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

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

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

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

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

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

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

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

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

/* baukasten/kern/pdp.css */
/* Gemeinsame Teile der Produktseite (Werkstatt pdp, autonome Schleife 11.10.2026). Jede pdp-Sektion lädt diese Datei
   über export const CSS. Werte nur als Token (nb-tokens-v3.css), Vorgaben BERICHT-pdp-2026-10-11.md.
   Wahlkachel .nb-pw: ruhend weiß mit sh-ruht auf dem Grund, in einer weißen Karte ink-100 ohne Schatten (G29).
   Gewählt ohne Blau: Auswahlkreis Night plus „Gewählt“ (G21). Die Sky-Fassung schaltet .nb-pw-stil--sky am Platz. */

/* ---------- Dachzeile, Satz, Pille ---------- */
.nb-pdp-dach { margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-muted); }
.nb-pdp-satz { color: var(--nb-text-body); }

/* ---------- Gruppe ---------- */
.nb-pdp-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }

/* ---------- Wahlkachel ---------- */
.nb-pw {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--nb-space-s);
  min-height: 64px; padding: var(--nb-space-s) var(--nb-space-m); box-sizing: border-box;
  border-radius: var(--nb-radius-input); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht);
  color: var(--nb-text-heading); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pw__eingabe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.nb-pw__kreis {
  position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; box-sizing: border-box;
  box-shadow: inset 0 0 0 2px var(--nb-ink-500); background: var(--nb-surface-page);
  transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pw__kreis::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--nb-surface-page); opacity: 0; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-pw__text { display: grid; gap: 2px; min-width: 0; }
.nb-pw__titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; }

.nb-pw__preis { font-size: var(--nb-t-price-02); font-weight: var(--nb-weight-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Gewählt: Kreis Night gefüllt mit weißem Punkt, „Gewählt“ steht da. Kein Rand, keine Fläche (G21) */
.nb-pw:has(.nb-pw__eingabe:checked) .nb-pw__kreis { box-shadow: inset 0 0 0 11px var(--nb-surface-dark); }
.nb-pw:has(.nb-pw__eingabe:checked) .nb-pw__kreis::after { opacity: 1; }

/* Fokus genau eine Linie um die Kachel (G18) */
.nb-pw:has(.nb-pw__eingabe:focus-visible) { outline: 2px solid var(--nb-night); outline-offset: 3px; }

/* Hover nur mit Maus, nur der stärkere Schatten (G28, G52). Druck nur Farbe (design-kurz Nr. 12) */
@media (hover: hover) and (pointer: fine) {
  .nb-pw:not(.is-aus):hover { box-shadow: var(--nb-sh-hoch); }
  .nb-pw:not(.is-aus):hover .nb-pw__kreis { box-shadow: inset 0 0 0 2px var(--nb-night); }
  .nb-pw:not(.is-aus):hover:has(.nb-pw__eingabe:checked) .nb-pw__kreis { box-shadow: inset 0 0 0 11px var(--nb-surface-dark); }
}
.nb-pw:not(.is-aus):active { background-color: var(--nb-ink-100); transition-duration: var(--nb-motion-druck); }

/* Nicht wählbar: grau, ohne Schatten, mit Grund statt Preis (Bericht Abschnitt 3, ausverkaufte Stufe grau) */
.nb-pw.is-aus { cursor: not-allowed; background: var(--nb-ink-100); box-shadow: none; color: var(--nb-text-muted); }
.nb-pw.is-aus .nb-pw__kreis { box-shadow: inset 0 0 0 2px var(--nb-ink-300); background: transparent; }

/* In der weißen Karte: Umkehr, ink-100 ohne Schatten (G29). Gewählt bleibt ink-100, Hover dunkelt um eine Stufe */
.nb-pw--innen { background: var(--nb-ink-100); box-shadow: none; }
/* Hover ohne Tönung (design-kurz Nr. 11, 13.10.2026), ihn trägt der Night-Ring des Kreises (Zeile 51) */
@media (hover: hover) and (pointer: fine) { .nb-pw--innen:not(.is-aus):hover { box-shadow: none; } }
/* Druck eine Stufe dunkler als Hover, sonst ist er mit Maus nicht zu sehen (5b, review-animations Fund 8) */
.nb-pw--innen:not(.is-aus):active { background-color: var(--nb-ink-200); }
/* Nicht wählbar in der Karte: Fläche ink-100 wie die wählbaren, ohne Linie (design-kurz Nr. 4, 5b design-auditor Fund 2).
   Den Unterschied tragen der graue Kreis, die gedämpfte Schrift und der Grund statt Preis */
.nb-pw--innen.is-aus { background: var(--nb-ink-100); box-shadow: none; }
/* Gesperrt wie im Formular-System: ganze Zeile opacity .5 (komponenten-formular.md Z. 62). Vorher sah „Nicht verfügbar“
   fast aus wie eine wählbare Zeile (Daniel 16.10.2026: „sieht so aus als wäre es verfügbar“) */
.nb-pw.is-aus { opacity: .5; }

/* Sky-Fassung (bricht G21): gewählt auf surface-stage, Kreis Sky 900 */
.nb-pw-stil--sky .nb-pw:has(.nb-pw__eingabe:checked) { background: var(--nb-surface-stage); color: var(--nb-text-on-stage); }
.nb-pw-stil--sky .nb-pw:has(.nb-pw__eingabe:checked) .nb-pw__kreis { box-shadow: inset 0 0 0 11px var(--nb-sky-900); }

/* Druck auf der gewählten Zeile eine Stufe dunkler (design-kurz Nr. 12, Daniel 13.10.2026) */
.nb-pw-stil--sky .nb-pw:not(.is-aus):active:has(.nb-pw__eingabe:checked) { background-color: var(--nb-sky-druck); transition-duration: var(--nb-motion-druck); }
@media (hover: hover) and (pointer: fine) { .nb-pw-stil--sky .nb-pw:not(.is-aus):hover:has(.nb-pw__eingabe:checked) .nb-pw__kreis { box-shadow: inset 0 0 0 11px var(--nb-sky-900); } }

/* Farbpunkt in der Farbkachel. Produktfarbe kommt als --farbe aus den Daten, Rand als Schatten, damit Weiß auf Hell steht */
.nb-pw__farbe { width: 28px; height: 28px; border-radius: 50%; background: var(--farbe); box-shadow: inset 0 0 0 1px rgb(var(--nb-night-rgb) / .16); flex: none; }
.nb-pw:has(.nb-pw__farbe) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.nb-pw__titel, .nb-pw__unter { overflow-wrap: anywhere; }

/* ---------- Brotkrume (frei auf dem Grund erlaubt, G41) ---------- */
.nb-pdp-krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs); margin: 0 0 var(--nb-space-m); padding: 0; list-style: none; font-size: var(--nb-t-body-02); line-height: 1.4; }
.nb-pdp-krumen li { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); }
.nb-pdp-krumen a { position: relative; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-pdp-krumen a::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .nb-pdp-krumen a:hover { text-decoration: underline; } }
/* 5b-1 (design-auditor B, DRUCK): Brotkrume ohne Druckzustand, jetzt Link-Farbe und Unterstrich sofort beim Tippen */
.nb-pdp-krumen a:active { color: var(--nb-text-link); text-decoration: underline; transition-duration: var(--nb-motion-druck); }
.nb-pdp-krumen a:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 2px; }
.nb-pdp-krumen li > span[aria-hidden] { color: var(--nb-text-muted); }
.nb-pdp-krumen [aria-current] { color: var(--nb-text-muted); }

/* ---------- Zustandskarte wechselt ohne Sprung und ohne Einblenden: alle im ersten HTML, die gewählte steht sofort da.
   Die Einblendung lief bei jeder Wahl und beim Laden, auch per Tastatur (5b, review-animations Fund 3) ---------- */

@media (prefers-reduced-motion: reduce) {
  .nb-pw, .nb-pw__kreis, .nb-pw__kreis::after { transition: none; }
}

/* ---------- Wahl folgt überall (5b-2a, Fundliste 5b K3, H2, N1) ----------
   Zweige zur gewählten Stufe stehen beide im ersten HTML, der falsche trägt hidden. Bauteile mit eigenem display
   (grid, flex) überstimmen sonst [hidden]. Dazu Rabatt und Neupreis je Einheit und Vater und die Bedienung der Galerie
   je Zahl der Fotos des Vaters (17.10.2026, pdp-neupreis-reste) */
[data-nb-pdp-wenn][hidden], [data-nb-pdp-befund][hidden], [data-nb-pdp-foto-hinweis][hidden],
[data-nb-pdp-nur-rabatt][hidden], [data-nb-pdp-neu][hidden], [data-nb-pg-teil][hidden] { display: none !important; }
/* Sprung zur Wahl: der Abschnittskopf steht ganz im Bild, nicht unter der Kante (N1) */
#pdp-zustand-titel { scroll-margin-top: var(--nb-space-xl); }
/* Handy: die Kopfleiste ist 64 px hoch, die Überschrift lag 16 px darunter (zustands-pruefer 15.10.2026) */
@media (max-width: 1099px) { #pdp-zustand-titel { scroll-margin-top: calc(64px + var(--nb-space-m)); } }
/* Fix 16.10.2026 (Daniel live): Sprung zu den Bewertungen. Ohne Skript bleibt der Anker #bewertungen, der Shop-Kopf klebt
   dann oben (Ansage 40 plus Kopf 125 = 165 px ab 861 px, darunter 133 px, gemessen lokal bei 320, 390, 768, 1100, 1440)
   und lag über dem Kopf der Stimmen. Mit Skript rechnet der Sprung in pdp-b.mjs die Leiste oben selbst heraus */
@media (scripting: none) {
  #bewertungen { scroll-margin-top: calc(133px + var(--nb-space-s)); }
}
@media (scripting: none) and (min-width: 861px) {
  #bewertungen { scroll-margin-top: calc(165px + var(--nb-space-s)); }
}
/* FOKUSVERDECKT 7f8b3a0b265e (Qualitätslauf Produktseite Runde 2, 16.10.2026): Der klebende Kopf (Ansage 40 px plus
   --header-height, die nb-kopf.js aus der echten Höhe setzt) lag ganz über „Alle Stufen vergleichen“. Chrome rollt ein
   Fokusziel nur nach, wenn es außerhalb des Bilds liegt. scroll-padding-top nimmt die Kopffläche aus dem Bild
   (WCAG-Technik C43), dazu 8 px für den Saum des Rings. Nur solange ein Tastaturfokus steht (:focus-visible), sonst
   landeten die Sprünge mit der Maus („Ändern“, Chips) 173 px tiefer, weil der Kopf beim Abwärtsrollen wegfährt.
   Erst ab 861 px, darunter fehlt die Ansage und der Lauf fand keinen verdeckten Fokus. Die Token hängen an .nb-v3
   (body), am html gibt es sie nicht, deshalb der Rückfall 8 px (space-2xs), sonst wäre die Regel ungültig (auto) */
@media (min-width: 861px) {
  html:has(main[data-nb-seite="pdp"]):has(:focus-visible) { scroll-padding-top: calc(40px + var(--header-height, 125px) + var(--nb-space-2xs, 8px)); }
}

/* ---------- Bildausfall (BILDAUSFALL resilienz-pruefer 16.10.2026) ----------
   Lädt ein Bild nicht, steht kein Kaputt-Symbol da und die Box hält ihr Maß. Wie das Kartenbild der Kategorie
   (nb-pk.tpl onerror, karte.css .nb-pk__foto): Die Laufzeit (kern/pdp.mjs VERHALTEN) setzt .is-kaputt, das Bild wird
   unsichtbar, die Fläche des Behälters (ink-100 oder surface-stage, Platzhalter nach farbsystem.md) bleibt stehen.
   Der Alt-Text ist durchsichtig und bleibt für Screenreader. :where hält die Regel ohne Gewicht, jede Klasse am Bild
   gewinnt. Das Maß halten die Regeln am Bauteil (pdp-wahl.css .nb-ph__figur, pdp-b.css Zahlungslogos und Folien,
   pdp-buehne .nb-pg__folie und .nb-pg__d) */
:where([data-nb-slot^="pdp-"], [data-nb-slot="empfehlungen"]) img { color: transparent; }
:where([data-nb-slot^="pdp-"], [data-nb-slot="empfehlungen"]) img.is-kaputt { visibility: hidden; }

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

/* Liefergebiet und Zahlarten in grauer Innenfläche (Umkehr), Logos 38 × 24 im Original */
.nb-kk-s__zahlinfo { display: grid; gap: var(--nb-space-xs); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
.nb-kk-s__land { display: flex; align-items: center; gap: var(--nb-space-2xs); margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-kk-s__land svg { flex: none; width: 18px; height: 18px; }

/* Sieben Logos in einer Reihe wie Back Market (Daniel 08.10.2026: „alles in eine Reihe“). Je Spalte höchstens 38 px,
   auf schmalen Handys werden alle gleich kleiner statt umzubrechen */
.nb-kk-logos { display: grid; grid-template-columns: repeat(7, minmax(0, 38px)); gap: var(--nb-space-3xs); margin: 0; padding: 0; list-style: none; }
.nb-kk-logos img { display: block; width: 100%; height: auto; aspect-ratio: 38 / 24; }
/* „Sicheres Bezahlen“ mit Schloss unter der Logo-Reihe, mittig wie bei Back Market (Daniel 08.10.2026) */
.nb-kk-logos__sicher { display: flex; align-items: center; justify-content: center; gap: var(--nb-space-3xs); margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-body); }
.nb-kk-logos__sicher svg { flex: none; width: 16px; height: 16px; }

/* m-wege */

/* Express-Kasse im Shop: PayPal-Plugin füllt .nb-kk-s__ppc. Ohne Knopf (Plugin aus, kein Consent-Platz) keine Reihe (Daniel 14.10.2026) */

/* PayPal setzt seinen iframe mit z-index 100 (component-frame). Ohne eigenen Stapel lag der Knopf der Karte beim Scrollen über
   der Leiste unten (z-index 20), am iPhone stand „Direkt zu PayPal“ über „Gesamtsumme“ (Daniel 14.10.2026) */

/* Express mit Apple Pay und Google Pay (Daniel 14.10.2026, js/nb-kasse-express.js). Nur Originale: Apples Knopf schwarz plain über
   -apple-pay-button, Googles über createButton. Höhe wie unser Hauptknopf (48 px), Radius pill wie PayPal. Satz darunter body-01 */

/* Leiste am Handy: steht ein Wallet-Knopf des Geräts, tritt PayPal dort zurück (Mappe: Leiste mit Apple Pay oder Google Pay) */

/* Hover: der Rand wird Night wie beim Zweitknopf der Hilfe (hilfe.css:48). Der Schatten (Prüfrunde D8) machte den weißen
   Knopf in der weißen Karte zum „weißen Button“, Umkehr G29 (Daniel 16.10.2026) */

/* Schalter wallet=schwarz: gefüllt in Night (#000 ist für Flächen verboten, FS:675). Bricht FS:674 (zwei gefüllte Systeme)
   und das Verbot „Night-Knopf gefüllt“ (Bauvertrag kasse). Dunkel-Anteil am Rechner 1,33 % je Knopf (VORGABEN-kasse-token §5) */

/* Apple Pay nur auf Apple-Geräten, sonst Google Pay an derselben Stelle, ohne Lücke (W12, Z08) */

/* Express bei Guthaben: guthaben nennt den Restbetrag, guthaben-ohne-express lässt die schnellen Wege weg (im Markup) */

/* JTL (Kasse-Rest 14.10.2026): der Satz steht hinter der Express-Reihe und gilt nur, solange dort ein Knopf steht */

/* Express verrechnet das Guthaben seit 14.10.2026 abends (src/KasseExpress.php), der Rest-Satz stimmt also */
/* Rechtszeile unter dem letzten Express-Knopf, eine Zeile wie Back Market (Daniel 14.10.2026 abends) */

/* Gutschein eingeklappt, Feld aus dem Formular-System (ink-100 in der weißen Karte) */

/* Höhe animiert nb-warenkorb.js (Gutschein auf- und zuklappen), dafür misst die Höhe mit Rand und Polster */

/* Am Handy kein Tipp-Aufblitzen und kein Rahmen nach Finger oder Maus, nur mit der Tastatur (nb-warenkorb.js, data-nb-zeiger) */

/* Unter 400 px Feld und Knopf untereinander, sonst ist das Label „Gutscheincode“ abgeschnitten (Prüfrunde S14) */

/* Zusagen mit weißem Zeichen auf grauer Kachel ist die Vorteilsleiste (G31); in der weißen Karte umgekehrt: Zeichen auf ink-100 */

 /* Tippfläche 43 px hoch bei gleichem Aussehen (Regel ZIEL, 08.10.2026) */

/* Trade-in-Box (KW §6): surface-component, radius-input */

/* b: Betrag groß wie price-01 im Angebot (Bruch M-SUMME) */

/* n: „Wir akzeptieren“ mittig wie nb-warenkorb.tpl */

/* Lädt: Höhe der Karte je Fassung (gemessen 08.10.2026) */

/* Leiste unten am Handy (G3): weiß mit Haarlinie oben, Safe Area, beim Tippen weg (Checkliste 15.23) */

/* Druck für Umriss-Knöpfe (Einlösen), kern/formular.css hat dafür keinen Wert */

/* Leiste am Handy wie Back Market (Daniel 08.10.2026): Gesamtsumme mit „inkl. MwSt.“, „Zur Kasse“ und der Expressknopf des Geräts
   untereinander über die volle Breite */

/* baukasten/kern/pdp-lade.css */
/* Schubladen-Knöpfe und Schubladen der Produktseite (kern/pdp-lade.mjs, Werkstatt pdp 12.10.2026).
   Knopf gleich gebaut wie „So geht's“ im Eintausch (kern/pdp-wahl.css .nb-pak-d__wie), Schublade nach der
   Eintausch-Schublade (pdp-ankauf/sektion.css) mit den Ebenen aus komponenten-warenkorb.md §11.7 (300 und 301). */

/* ---------- Knöpfe ---------- */

/* In der weißen Karte ink-100 ohne Schatten (Umkehr G29). Die Icon-Kachel trägt surface-info (Daniel Punkt 1, Farbakzent) */

 /* surface-info auf ink-100 hätte 1,03:1, Umkehr wie „So geht’s“ (pdp-wahl.css) */

/* ---------- Schirm und Schublade ---------- */
html.nb-pue-sperre { overflow: hidden; scrollbar-gutter: stable; }
.nb-pue-schirm[hidden], .nb-pue-lade[hidden] { display: none !important; }
.nb-pue-schirm { position: fixed; inset: 0; z-index: 199; background: var(--nb-alpha-scrim); opacity: 1; transition: opacity var(--nb-motion-fenster) var(--nb-motion-fenster-kurve); }
.nb-pue-lade {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  box-sizing: border-box; width: min(440px, 100vw); background: var(--nb-surface-page);
  border-radius: var(--nb-radius-card) 0 0 var(--nb-radius-card); box-shadow: var(--nb-sh-schwebt);
  font-family: var(--nb-font-sans); color: var(--nb-text-body); transform: none;
  transition: transform var(--nb-motion-fenster) var(--nb-motion-fenster-kurve);
}
@starting-style { .nb-pue-schirm { opacity: 0; } .nb-pue-lade { transform: translateX(100%); } }
.nb-pue-lade.is-zu { transform: translateX(100%); transition-duration: var(--nb-motion-fenster-aus); transition-timing-function: var(--nb-motion-kurve); }
.nb-pue-schirm.is-zu { opacity: 0; transition-duration: var(--nb-motion-fenster-aus); transition-timing-function: var(--nb-motion-kurve); }
.nb-pue-lade.nb-pue-still, .nb-pue-schirm.nb-pue-still { transition: none; }

.nb-pue-lade__kopf { display: flex; align-items: center; gap: var(--nb-space-xs); padding: var(--nb-space-m) var(--nb-space-m) var(--nb-space-s); }
.nb-pue-lade__kopfzeichen { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); color: var(--nb-text-heading); } /* Mint nur für Ersparnis (farbsystem.md:249) */
.nb-pue-lade__kopfzeichen svg { width: 18px; height: 18px; }
.nb-pue-lade__titel { flex: 1; margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; color: var(--nb-text-heading); outline: none; }
.nb-pue-lade__titel:focus, .nb-pue-lade__titel:focus-visible { outline: none; box-shadow: none; }
.nb-pue-lade__zu { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-pue-lade__zu svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .nb-pue-lade__zu:hover { background: var(--nb-ink-300); } }
.nb-pue-lade__zu:active { background: var(--nb-ink-300); transition-duration: var(--nb-motion-druck, 100ms); }
.nb-pue-lade :focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }

.nb-pue-lade__inhalt { display: grid; align-content: start; gap: var(--nb-space-m); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--nb-space-m) var(--nb-space-m); }
.nb-pue-lade__liste { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
/* Zeilen in ink-100 auf der weißen Schublade (Umkehr G29), Zeichen in der Icon-Kachel surface-info */
.nb-pue-lade__zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--nb-space-s); padding: var(--nb-space-s) var(--nb-space-m) var(--nb-space-s) var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-pue-lade__zeichen { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nb-surface-page); color: var(--nb-text-heading); }
.nb-pue-lade__zeichen svg { width: 22px; height: 22px; }
.nb-pue-lade__name { margin: 0 0 var(--nb-space-3xs); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-pue-lade__text { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }

.nb-pue-lade__fuss { display: grid; gap: var(--nb-space-2xs); padding: var(--nb-space-s) var(--nb-space-m) calc(var(--nb-space-m) + env(safe-area-inset-bottom)); }

/* Handy: Blatt von unten (Daniel 14.10.2026, tokens.json blatt, hebt Checkliste 15.15 auf). Volle Breite, oben gerundet,
   höchstens --nb-blatt-hoehe, Fuß über der Safe Area. Auf in motion-blatt, zu schneller in motion-blatt-aus */
@media (max-width: 767px) {
  .nb-pue-lade { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: var(--nb-blatt-hoehe); border-radius: var(--nb-blatt-radius); transform: none; transition: transform var(--nb-motion-blatt) var(--nb-motion-fenster-kurve); }
  @starting-style { .nb-pue-lade { transform: translateY(100%); } }
  .nb-pue-lade.is-zu { transform: translateY(100%); transition-duration: var(--nb-motion-blatt-aus); transition-timing-function: var(--nb-motion-kurve); }
  .nb-pue-lade__kopf { padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-xs) var(--nb-space-m); }
  .nb-pue-lade__inhalt { padding: 0 var(--nb-space-s) var(--nb-blatt-unten); }
  .nb-pue-lade:has(.nb-pue-lade__fuss) .nb-pue-lade__inhalt { padding-bottom: var(--nb-space-s); }
  .nb-pue-lade__fuss { padding: var(--nb-space-xs) var(--nb-space-s) var(--nb-blatt-unten); }
}

/* Reduzierte Bewegung: nur Deckkraft, kein Weg */
@media (prefers-reduced-motion: reduce) {
  .nb-pue-lade { opacity: 1; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
  @starting-style { .nb-pue-lade { opacity: 0; } }
  .nb-pue-lade.is-zu { opacity: 0; }
  @media (min-width: 768px) { .nb-pue-lade, .nb-pue-lade.is-zu { transform: none; } @starting-style { .nb-pue-lade { transform: none; } } }
  @media (max-width: 767px) { .nb-pue-lade, .nb-pue-lade.is-zu { transform: none; } @starting-style { .nb-pue-lade { transform: none; } } }
  
   /* kein Weg bei reduzierter Bewegung */
}

/* ---------- Eintausch gewählt: eigener Block, kein Minus (tauschGewaehlt, auch Eintausch und Seitenleiste) ---------- */
.nb-pue__tausch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--nb-space-s); align-items: center; padding: var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-pue__tausch-text { display: grid; gap: 2px; }
.nb-pue__tausch-titel { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pue__tausch-satz { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.4; color: var(--nb-text-body); }
.nb-pue__tausch-satz b { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pue__tausch .nb-s-icon { background: var(--nb-surface-page); } /* Umkehr auf ink-100 wie .nb-pue-wie */
.nb-pue-lade__zeichen--nr { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; }

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

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

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

.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; }
/* 5b-1 (impeccable 7): Kundentext darf Emoji tragen, Gilroy hat keine, Farb-Emoji-Schriften am Ende der Kette gegen Tofu */
.nb-bw__text { font-family: var(--nb-font-sans), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; 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); }
/* Hover nur mit Maus, Druck dunkelt die Linie und färbt den Text Sky (design-kurz Nr. 11 und 12, PDP 5b review-animations Fund 9) */
@media (hover: hover) and (pointer: fine) { .nb-bw__ansehen:hover { text-decoration-color: currentColor; } }
.nb-bw__ansehen:active { color: var(--nb-text-link); text-decoration-color: currentColor; transition-duration: var(--nb-motion-druck); }
.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); }
.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-duration: var(--nb-motion-druck); background: var(--nb-ink-300); } /* 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; }
  
}
@media (max-width: 767px) {
  
  .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__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 { position: relative; 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); }
/* Trefferfläche 44 px ohne Höhe in der Zeile (design-kurz Nr. 15, PDP 5b design-auditor Fund 5), Hover nur mit Maus */
.nb-bw__kurz a::before { content: ""; position: absolute; inset: 50% -6px auto; height: 44px; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .nb-bw__kurz a:hover { text-decoration-color: currentColor; } }
.nb-bw__kurz a:active { color: var(--nb-text-link); text-decoration-color: currentColor; transition-duration: var(--nb-motion-druck); }

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

/* Ohne Netz: weiße Karte wie die Meldung über dem Raster (nb-kategorie-jtl.css), nichts steht frei */
.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 (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/kern/pdp-b.css */
/* Fassung B der Produktseite (Daniel 13.10.2026 abends, .claude/progress/pdp/baukasten/KRITIK-pdp-2026-10-13-abend.md).
   Werte nur als Token (nb-tokens-v3.css). Gewählt heißt Sky (G21 Nachtrag 13.10.), Zusagen als Sky-Karten wie Back Market,
   Zustand-Schublade nach der Live-PDP (templates/NextBuy/snippets/nb-pdp-drawer-conditions.tpl), umgesetzt auf die neuen
   Token: prussian-100 wird surface-stage, prussian-900 wird text-on-stage. Schrift wie Back Market (G55). */

/* ---------- Wahl-Block B: Überschrift ohne Dachzeile, Zeilen ohne Unterzeile ---------- */
.nb-ph--b .nb-ph__kopf h2 { font-size: var(--nb-t-heading-01); }
.nb-ph--b .nb-pw { min-height: 56px; }
@media (min-width: 900px) { .nb-ph--b .nb-pw { min-height: 60px; } }
/* Nicht lieferbar: „Nicht verfügbar“ steht rechts statt des Preises, gedämpft (Back Market „Ausverkauft“) */
.nb-ph--b .nb-pw.is-aus .nb-pw__preis { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); }

/* Leiste „Gewählt · Alle Stufen vergleichen“ wie live (nb-pdp-condition-bar), auf Sky */
.nb-pbl {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); width: 100%; min-height: 52px;
  padding: var(--nb-space-xs) var(--nb-space-s); box-sizing: border-box; border: 0; border-radius: var(--nb-radius-input);
  background: var(--nb-surface-stage); color: var(--nb-text-heading); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve);
}
.nb-pbl__links { display: flex; align-items: baseline; gap: var(--nb-space-2xs); min-width: 0; }
.nb-pbl__label { font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); letter-spacing: .08em; text-transform: uppercase; }
.nb-pbl__stufe { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); white-space: nowrap; }
.nb-pbl__rechts { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); flex: none; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-pbl__text { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--nb-sky-700); transition: text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); } /* NULLWECHSEL bewegungs-pruefer 16.10.2026: Unterstrich wechselt im Hover weich */
.nb-pbl__kurz { display: none; }
.nb-pbl svg { width: 18px; height: 18px; flex: none; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) {
  .nb-pbl:hover { box-shadow: var(--nb-sh-hoch); }
  .nb-pbl:hover .nb-pbl__text { text-decoration-color: currentColor; }
  .nb-pbl:hover svg { transform: translateX(3px); }
}
.nb-pbl:active { background-color: var(--nb-sky-druck); transition-duration: var(--nb-motion-druck); }
.nb-pbl:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
@media (max-width: 479px) { .nb-pbl__lang { display: none; } .nb-pbl__kurz { display: inline; } }
/* Unter 380 px lief „Hervorragend“ in „Vergleichen“ hinein (gemessen 17.10.2026 bei 320 und 360). Das Etikett „Gewählt“
   fällt dort weg, die Stufe kürzt notfalls, statt zu überlaufen */
.nb-pbl__stufe { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379px) { .nb-pbl__label { display: none; } }

/* Bild der Zustand-Wahl mit Bildlauf Display und Rückseite. Am Handy groß über den Zeilen, damit man wischen kann */
.nb-ph.nb-ph--bild-gross { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "wahl"; }
.nb-ph--bild-gross .nb-ph__kopfpille, .nb-ph--bild-gross .nb-ph__pillen { display: block; }
.nb-ph--bild-gross .nb-ph__kopfpille, .nb-ph--bild-gross .nb-ph__pillen li {
  padding: var(--nb-space-3xs) var(--nb-space-xs); border-radius: var(--nb-radius-pill); background: var(--nb-night); color: var(--nb-text-on-dark);
  font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; white-space: nowrap;
}
.nb-ph--bild-gross .nb-ph__kopfpille { position: absolute; z-index: 2; top: var(--nb-space-xs); left: var(--nb-space-xs); }
.nb-ph--bild-gross .nb-ph__pillen { display: flex; flex-wrap: wrap; gap: var(--nb-space-3xs); position: absolute; z-index: 2; left: var(--nb-space-xs); right: var(--nb-space-xs); bottom: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.nb-ph--bild-gross .nb-ph__figur { overflow: visible; background: transparent; border-radius: 0; }
@media (min-width: 900px) {
  .nb-ph.nb-ph--bild-gross { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "bild ." "bild kopf" "bild wahl" "bild ."; }
  .nb-ph--bild-gross .nb-ph__kopfpille, .nb-ph--bild-gross .nb-ph__pillen li { font-size: var(--nb-t-body-02); }
  .nb-ph--bild-gross .nb-ph__kopfpille { top: var(--nb-space-s); left: var(--nb-space-s); }
  .nb-ph--bild-gross .nb-ph__pillen { left: var(--nb-space-s); right: var(--nb-space-s); bottom: var(--nb-space-s); gap: var(--nb-space-2xs); }
}

/* ---------- Bildlauf mit Punkten und Pfeilen unten (Zustand, Schublade, Übersicht) ----------
   Baut auf .nb-pg (pdp-buehne/sektion.css) auf: die Spur rollt per scroll-snap, Punkte und Pfeile rufen dieselbe Laufzeit
   (kern/pdp.mjs VERHALTEN). Bühne aus ink-100, Bild 1:1 */
.nb-pg--punkte { gap: var(--nb-space-xs); }
.nb-pg--punkte .nb-pg__buehne { border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-pg--punkte .nb-pg__folie { aspect-ratio: 1; padding: 0; }
/* BILDAUSFALL resilienz-pruefer 16.10.2026: picture füllt die Folie. Sonst schrumpft es ohne Bild auf die Breite des
   Alt-Texts (Zustandsfolie 460 → 277 px) */
.nb-pg--punkte .nb-pg__folie > picture { display: block; width: 100%; height: 100%; }
.nb-pg--punkte .nb-pg__folie img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-pg--punkte .nb-pg__pfeile, .nb-pg--punkte .nb-pg__zahl, .nb-pg--punkte .nb-pg__fortschritt { display: none; }
.nb-pg--sky .nb-pg__buehne { background: var(--nb-surface-stage); }
.nb-pgn { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-height: 44px; }
.nb-pgn__punkte, .nb-pg__daumen.nb-pgn__punkte { display: flex !important; gap: 0; }
/* Punkte eng beieinander wie Back Market, 14 px von Mitte zu Mitte, 6 px Lücke (Daniel 13.10.2026 spät: „näher
   aneinander, überall“, 24 px waren „wie Augen“). Trefferfläche schmal, Pfeile und Wischen sind die gleichwertige
   Bedienung (WCAG 2.5.8 Ausnahme Äquivalent) */
.nb-pgn__punkte button {
  position: relative; width: 14px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nb-pgn__punkte button::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--nb-ink-300); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pgn__punkte button[aria-current="true"]::after { background: var(--nb-night); }
@media (hover: hover) and (pointer: fine) { .nb-pgn__punkte button:not([aria-current="true"]):hover::after { background: var(--nb-ink-500); } }
.nb-pgn__punkte button:active::after { background: var(--nb-ink-700); transition-duration: var(--nb-motion-druck); }
.nb-pgn__punkte button:focus-visible { outline: 2px solid var(--nb-night); outline-offset: -8px; border-radius: var(--nb-radius-pill); }
.nb-pgn__name { flex: 1; margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pgn__pfeile { display: flex; gap: var(--nb-space-2xs); }
.nb-pgn__pfeil {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--nb-night); color: var(--nb-text-on-dark); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); /* NULLWECHSEL bewegungs-pruefer 16.10.2026: Schatten der hellen Pfeile im Hover */
}
.nb-pgn__pfeil svg { width: 20px; height: 20px; }
.nb-pgn__pfeil--weiter svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .nb-pgn__pfeil:hover { background: var(--nb-ink-800); } }
.nb-pgn__pfeil:active { background: var(--nb-ink-700); transition-duration: var(--nb-motion-druck); }
.nb-pgn__pfeil:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-pgn--hell .nb-pgn__pfeil { background: var(--nb-surface-page); color: var(--nb-text-heading); box-shadow: var(--nb-sh-ruht); }
@media (hover: hover) and (pointer: fine) { .nb-pgn--hell .nb-pgn__pfeil:hover { background: var(--nb-surface-page); box-shadow: var(--nb-sh-hoch); } }
.nb-pgn--hell .nb-pgn__pfeil:active { background: var(--nb-ink-100); }

/* Daumen statt Punkte, zwischen den Pfeilen wie bei Back Market (Übersicht). Bühne weiß, das Foto steht frei */
.nb-pg--weiss .nb-pg__buehne { background: transparent; }
.nb-pg--weiss .nb-pg__folie { background: transparent; }
.nb-pg--weiss .nb-pg__folie picture, .nb-pg--weiss .nb-pg__folie .nb-pueb__stufe { display: block; width: 100%; height: 100%; }

.nb-pg--weiss .nb-pg__folie .nb-pueb__foto { width: auto; height: 90%; max-width: 100%; object-fit: contain; }
/* Fix 16.10.2026 (Daniel live, Übersicht mit 4 Wawi-Fotos): height 90 % hatte keinen festen Bezug, das Foto gab der
   Folie seine Höhe aus dem Seitenverhältnis und die Spur wuchs auf das höchste Foto (Hochformat lg 560×1534: Spur 893 statt
   398 px bei 390, rund 530 px leer unter dem Bild). Wie in der Bühne (.nb-pg__folie--foto .nb-pg__foto) liegt das Foto
   jetzt absolut in der Folie, die Folie hält ihr 1 : 1 (.nb-pg--punkte), jedes Foto steht per contain darin */
.nb-pg--weiss .nb-pg__folie { position: relative; }
.nb-pg--weiss .nb-pg__folie .nb-pueb__foto { position: absolute; inset: 0; margin: auto; }
.nb-pgn--daumen { justify-content: center; gap: var(--nb-space-2xs); }
.nb-pgn--daumen .nb-pgn__pfeile { display: contents; }
.nb-pgn--daumen .nb-pgn__pfeil:first-child { order: 0; }
.nb-pgn--daumen .nb-pgn__daumen { order: 1; display: flex; gap: var(--nb-space-2xs); }
/* Mit allen Wawi-Fotos je Vater (d3bba348) machte die Daumenleiste die Galerie der Übersicht bei 320 px 336 px breit, die
   Seite scrollte quer (gemessen 17.10.2026). Galerie darf schrumpfen, die Daumen wischen dann seitlich */
.nb-pg, .nb-pg > * { min-width: 0; }
.nb-pgn--daumen .nb-pgn__daumen { min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.nb-pgn--daumen .nb-pgn__daumen::-webkit-scrollbar { display: none; }
.nb-pgn--daumen .nb-pgn__daumen button, .nb-pgn--daumen .nb-pgn__pfeil { flex: none; }
.nb-pgn--daumen .nb-pgn__pfeil--weiter { order: 2; }
.nb-pgn--daumen .nb-pgn__name { display: none; }
.nb-pgn--daumen .nb-pgn__pfeil { width: 44px; height: 44px; }
.nb-pgn--daumen .nb-pgn__pfeil svg { width: 18px; height: 18px; }
/* Umkehr G29 (16.10.2026): Die Daumenleiste steht in der weißen Übersichtskarte, der helle Pfeil dort ist ink-100 ohne
   Schatten, Hover eine Stufe dunkler wie die grauen Kacheln der Bühne (h). Über dem Foto bleibt er weiß mit Schatten */
.nb-pg--weiss .nb-pgn--daumen.nb-pgn--hell .nb-pgn__pfeil { background: var(--nb-surface-component); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .nb-pg--weiss .nb-pgn--daumen.nb-pgn--hell .nb-pgn__pfeil:hover { background: var(--nb-ink-200); box-shadow: none; } }
.nb-pg--weiss .nb-pgn--daumen.nb-pgn--hell .nb-pgn__pfeil:active { background: var(--nb-ink-200); }
.nb-pgn__daumen button {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; overflow: hidden; border: 0; border-radius: var(--nb-radius-badge);
  background: var(--nb-ink-100); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pgn__daumen button picture { display: block; width: 100%; height: 100%; }
.nb-pgn__daumen button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-pgn__daumen button img.nb-pueb__dfoto { object-fit: contain; padding: var(--nb-space-3xs); box-sizing: border-box; mix-blend-mode: multiply; }
/* Fix 16.10.2026 (Daniel live): wie .nb-pg__d (pdp-buehne). Ohne feste Zeile nahm das Bild seine Höhe aus dem
   Seitenverhältnis und lief aus dem 52×52-Kasten (Hochformat 73×200 als 52×129 px). Jetzt liegt jedes Bild darin */
.nb-pgn__daumen button { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.nb-pgn__daumen button img { min-width: 0; min-height: 0; }
.nb-pgn__daumen button[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--nb-night); }
@media (hover: hover) and (pointer: fine) { .nb-pgn__daumen button:not([aria-current="true"]):hover { box-shadow: inset 0 0 0 2px var(--nb-ink-300); } }
.nb-pgn__daumen button:active { box-shadow: inset 0 0 0 2px var(--nb-ink-500); transition-duration: var(--nb-motion-druck); }
.nb-pgn__daumen button:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }

/* ---------- Bühne B: eine Karte, Galerie links klebend, Kauf rechts ---------- */
.nb-pdpb { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-s); }

@media (min-width: 1100px) {
  .nb-pdpb { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--nb-space-xl); padding: var(--nb-space-l); align-items: start; }
  
}
/* Galerie: Bild füllt die Folie, Bühne ink-100 wie das Bild (#F3F4F8), Daumen links */

.nb-pdpb .nb-pg__folie { aspect-ratio: 1; }
/* Am Rechner hochkant wie ein iPhone, so endet die Galerie etwa mit der Kaufspalte (Daniel: keine weiße Fläche unter dem Bild) */
@media (min-width: 1100px) { .nb-pdpb .nb-pg__folie { aspect-ratio: 4 / 5; } }

.nb-pdpb__note .nb-bw__sterne { width: 80px; height: 16px; flex: none; color: var(--nb-text-heading); }

/* Titel, Bewertung, Wahl, Preis */
.nb-pdpb__titel { display: grid; gap: var(--nb-space-2xs); }
.nb-pdpb__h1 { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--nb-text-heading); text-wrap: balance; }
/* Letztes Wort in Poynter wie auf der Live-PDP und im Eintausch („Kreislauf.“), nb-tokens-v3.css:207 */
.nb-pdpb__h1 em { font-family: var(--nb-font-serif); font-style: italic; font-weight: var(--nb-weight-semibold); color: var(--nb-text-accent); }
/* Sticker oben rechts im Hauptbild wie live, still */
.nb-pdpb__sticker { position: absolute; z-index: 2; top: var(--nb-space-s); right: var(--nb-space-s); width: 104px; height: 104px; pointer-events: none; }
.nb-pdpb__sticker svg { display: block; width: 100%; height: 100%; }
.nb-pdpb__sticker-grund { fill: var(--nb-lime); }
.nb-pdpb__sticker-mitte { fill: var(--nb-night); }
.nb-pdpb__sticker-haken { fill: none; stroke: var(--nb-lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nb-pdpb__sticker-text { fill: var(--nb-night); font-size: 11px; font-weight: var(--nb-weight-semibold); letter-spacing: .06em; }
@media (max-width: 1099px) { .nb-pdpb__sticker { width: 80px; height: 80px; top: var(--nb-space-xs); right: var(--nb-space-xs); } }

.nb-pdpb__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-3xs) var(--nb-space-2xs); margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
.nb-pdpb__note b { font-weight: var(--nb-weight-semibold); }
.nb-pdpb__note .nb-bw__sterne { display: inline-flex; }
.nb-pdpb__note a { position: relative; color: var(--nb-text-heading); text-underline-offset: 3px; }
.nb-pdpb__note a::before { content: ''; position: absolute; inset: -12px -4px; }
@media (hover: hover) and (pointer: fine) { .nb-pdpb__note a:hover, .nb-pbkl a:hover { text-decoration-thickness: 2px; color: var(--nb-text-link); } }
.nb-pdpb__note a:active { color: var(--nb-text-link); transition-duration: var(--nb-motion-druck); }
.nb-pdpb__note a:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 2px; }

/* Pillen der Wahl in Sky, Ton in Ton (G46), ein Tipp springt zur Wahl */

/* Preis 20 am Handy, 22 am Rechner (typografie.md Nachträge 11. und 12.10.2026, G55) */
.nb-pbp { display: grid; gap: var(--nb-space-3xs); }
.nb-pbp__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nb-space-2xs); margin: 0; }
.nb-pbp__betrag { font-size: var(--nb-t-price-03); font-weight: var(--nb-weight-semibold); line-height: 1.1; letter-spacing: -0.01em; color: var(--nb-text-heading); }
@media (min-width: 768px) { .nb-pbp__betrag { font-size: calc(var(--nb-t-price-03) + 2px); } }
.nb-pbp__neu { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-pbp__neu s { text-decoration-thickness: 1px; }

/* Zustand mit Rabatt: Spar-Pille in Mint, Preis und „statt“ mit dem niedrigsten Preis der letzten 30 Tage in mint-ink
   (§ 11 PAngV), der Neupreis bleibt grau daneben (komponenten-global.md §2 und Nachtrag 06.10.2026) */
.nb-pbp__statt { font-size: var(--nb-t-body-01); color: var(--nb-mint-ink); white-space: nowrap; }
.nb-pbp__statt s { text-decoration-thickness: 1px; }
.nb-pbp__spar { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-mint); color: var(--nb-mint-ink); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-pbp--rabatt .nb-pbp__betrag { color: var(--nb-mint-ink); }
.nb-pbp__tiefst { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
/* OE 136 (16.10.2026): Versandzeile unter dem Preis, wie die Tiefstpreis-Zeile, nicht grau und dünn */
.nb-pbp__versand { margin: 0; font-size: var(--nb-t-legal-01); line-height: 1.4; color: var(--nb-text-body); } /* Daniel 16.10.2026: „noch kleiner“, Rechtstext legal-01 */

/* Kaufknopf mit Herz daneben */
.nb-pbk { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: var(--nb-space-2xs); align-items: stretch; }
.nb-pbk .nb-pdp-wenn { display: grid; }
.nb-pbk .nb-pdp-kauf { min-height: 60px; }
/* Fix 16.10.2026 (Daniel live): Bei „nicht lieferbar“ steht der Hinweis unter dem Knopf in derselben Zeile, stretch zog
   das Herz auf 118 statt 60 px. Das Herz bleibt 60 px und oben bündig mit dem Kaufknopf */
.nb-pbk > .nb-pbh { align-self: start; height: 60px; }
.nb-pbh {
  position: relative; display: grid; place-items: center; width: 60px; min-height: 60px; padding: 0; border: 0; border-radius: var(--nb-radius-pill);
  background: var(--nb-ink-100); color: var(--nb-text-heading); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pbh svg { width: 24px; height: 24px; }
.nb-pbh svg path { fill: transparent; transition: fill var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-pbh[aria-pressed="true"] { background: var(--nb-surface-stage); color: var(--nb-text-on-stage); }
.nb-pbh[aria-pressed="true"] svg path { fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .nb-pbh:hover { background: var(--nb-ink-200); } .nb-pbh[aria-pressed="true"]:hover { background: var(--nb-sky-druck); } }
.nb-pbh:active { background: var(--nb-ink-300); transition-duration: var(--nb-motion-druck); }
.nb-pbh[aria-pressed="true"]:active { background: var(--nb-sky-druck); }
.nb-pbh:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-pbh__meldung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Klarna-Zeile unter dem Knopf, Original-Logo (G51) */
.nb-pbkl { display: flex; align-items: center; gap: var(--nb-space-xs); margin: 0; font-size: var(--nb-t-body-02); line-height: 1.4; color: var(--nb-text-heading); }
.nb-pbkl img { flex: none; width: 38px; height: 24px; }
.nb-pbkl b { font-weight: var(--nb-weight-semibold); }
.nb-pbkl a { position: relative; color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-underline-offset: 3px; white-space: nowrap; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve), text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); } /* NULLWECHSEL bewegungs-pruefer 16.10.2026 */
/* ZIEL barriere-pruefer 16.10.2026: -12px gab 43,6 px Höhe (Zeile 19,6 + 24), -13px gibt 45,6 px */
.nb-pbkl a::before { content: ''; position: absolute; inset: -13px -4px; }
.nb-pbkl a:active { color: var(--nb-text-link); transition-duration: var(--nb-motion-druck); }
.nb-pbkl a:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 2px; }

/* Sky-Karten: Lieferung (ohne Schublade), Garantie, Prüfung. Fläche surface-stage, Schrift text-on-stage (G46) */
.nb-pbs { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-pbs__karte {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: var(--nb-space-xs);
  width: 100%; min-height: 64px; padding: var(--nb-space-xs) var(--nb-space-s); box-sizing: border-box; border: 0;
  border-radius: var(--nb-radius-input); background: var(--nb-surface-stage); color: var(--nb-text-heading); font: inherit; text-align: left;
}
button.nb-pbs__karte { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-pbs__zeichen { display: grid; place-items: center; width: 40px; height: 40px; color: var(--nb-text-heading); }
.nb-pbs__zeichen svg { width: 24px; height: 24px; }
.nb-pbs__text { display: grid; gap: 2px; min-width: 0; }
.nb-pbs__titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; }

.nb-pbs__pfeil { display: grid; place-items: center; width: 32px; height: 32px; }
.nb-pbs__pfeil svg { width: 20px; height: 20px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) {
  button.nb-pbs__karte:hover { box-shadow: var(--nb-sh-hoch); }
  button.nb-pbs__karte:hover .nb-pbs__pfeil svg { transform: translateX(3px); }
}
button.nb-pbs__karte:active { background: var(--nb-sky-druck); transition-duration: var(--nb-motion-druck); }
button.nb-pbs__karte:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }

/* Zahlarten mittig (Daniel 13.10.2026 abends, Bild 8), wie in der Kasse Fassung n */
.nb-pdpb .nb-kk-s__zahlinfo, .nb-pueb .nb-kk-s__zahlinfo { justify-items: center; text-align: center; }
.nb-pdpb .nb-kk-s__land, .nb-pueb .nb-kk-s__land { justify-content: center; }
.nb-pdpb .nb-kk-logos, .nb-pueb .nb-kk-logos { justify-content: center; }
/* BILDAUSFALL resilienz-pruefer 16.10.2026: Ohne Bild zählt der Alt-Text als Inhalt und aspect-ratio wächst mit
   (24 → 40 bis 64 px). min-height 0 hält 38 × 24 */
[data-nb-slot^="pdp-"] .nb-kk-logos img { min-height: 0; }

/* ---------- Prüf-Band wie Back Markets „Professionell erneuert“, Karten im Bildlauf ----------
   Dunkel mit Lime-Zeichen: ein Verlauf auf Hell und Lime auf Hell sind verboten (farbsystem.md:179, :662), im dunklen
   Band steht Lime als Akzent (farbsystem.md:240-243). Karte surface-dark-raised, Lime-Zeichen 13,08:1, Schrift 14,28:1 */
.nb-s-karte.nb-pbb, .nb-pbb { display: grid; gap: var(--nb-space-s); margin-block-start: var(--nb-space-m); padding: var(--nb-space-m) var(--nb-space-s); background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
@media (min-width: 900px) { .nb-pbb { padding: var(--nb-space-l); } }
.nb-pbb__kopf { display: flex; align-items: end; justify-content: space-between; gap: var(--nb-space-s); }
.nb-pbb__kopf h2 { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; color: var(--nb-text-on-dark); }
.nb-pbb__kopf p { margin: var(--nb-space-3xs) 0 0; font-size: var(--nb-t-body-01); color: var(--nb-text-on-dark-muted); }
.nb-pbb__spur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 44%); gap: var(--nb-space-xs); margin: -6px; padding: 6px; scroll-padding-inline: 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.nb-pbb__spur::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .nb-pbb__spur { grid-auto-columns: calc((100% - 3 * var(--nb-space-xs)) / 4); } }
@media (min-width: 1100px) { .nb-pbb__spur { grid-auto-columns: calc((100% - 4 * var(--nb-space-xs)) / 5); } }
.nb-pbb__spur li { display: grid; scroll-snap-align: start; }
.nb-pbb__karte {
  display: grid; align-content: space-between; gap: var(--nb-space-l); width: 100%; min-height: 148px; padding: var(--nb-space-s); box-sizing: border-box;
  border: 0; border-radius: var(--nb-radius-input); background: var(--nb-surface-dark-raised); color: var(--nb-text-on-dark); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pbb__karte svg { width: 28px; height: 28px; color: var(--nb-text-on-dark-accent); }
.nb-pbb__titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; }
.nb-pbb__unter { display: block; margin-block-start: 2px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); line-height: 1.4; color: var(--nb-text-on-dark-muted); }
@media (hover: hover) and (pointer: fine) { .nb-pbb__karte:hover { background: var(--nb-ink-800); } }
.nb-pbb__karte:active { background: var(--nb-ink-700); transition-duration: var(--nb-motion-druck); }
.nb-pbb__karte:focus-visible { outline: 2px solid var(--nb-text-on-dark); outline-offset: 3px; }
.nb-pbb__pfeile { display: none; gap: var(--nb-space-2xs); }
@media (min-width: 768px) { .nb-pbb__pfeile { display: flex; } }
.nb-pbb .nb-pgn__pfeil { background: var(--nb-surface-page); color: var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-pbb .nb-pgn__pfeil:not([disabled]):hover { background: var(--nb-ink-150); } }
.nb-pbb .nb-pgn__pfeil:not([disabled]):active { background: var(--nb-ink-200); }
.nb-pbb .nb-pgn__pfeil:focus-visible { outline-color: var(--nb-text-on-dark); }
.nb-pbb .nb-pgn__pfeil[disabled] { background: var(--nb-surface-dark-raised); color: var(--nb-text-on-dark-muted); cursor: default; }

/* ---------- Schubladen B: Garantie und Prüfung mit Gehalt ---------- */
.nb-pbd { display: grid; gap: var(--nb-space-m); }
.nb-pbd__aufmacher { display: grid; gap: var(--nb-space-2xs); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-stage); color: var(--nb-text-on-stage); }
.nb-pbd .nb-pbd__zahl { margin: 0; display: flex; align-items: baseline; gap: var(--nb-space-2xs); font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.1; }
.nb-pbd .nb-pbd__zahl span { font-size: var(--nb-t-body-01); }
.nb-pbd__aufmacher p { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; }
.nb-pbd h3 { margin: 0 0 var(--nb-space-2xs); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pbd__liste { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-pbd__liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--nb-space-xs); align-items: start; padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-pbd__liste svg { width: 20px; height: 20px; margin-block-start: 2px; color: var(--nb-text-heading); }
.nb-pbd__liste b { display: block; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pbd__liste--nein svg { color: var(--nb-text-muted); }
.nb-pbd__schritte { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; counter-reset: s; }
.nb-pbd__schritte li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--nb-space-xs); align-items: start; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-pbd__schritte li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nb-night); color: var(--nb-text-on-dark); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-pbd__links { display: flex; flex-wrap: wrap; gap: var(--nb-space-s); margin: 0; font-size: var(--nb-t-body-01); }
.nb-pbd__links a { position: relative; color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); text-underline-offset: 3px; }
.nb-pbd__links a::before { content: ''; position: absolute; inset: -12px -4px; }
.nb-pbd__links a:active { color: var(--nb-signal-800); transition-duration: var(--nb-motion-druck); }
.nb-pbd__links a:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 2px; }
.nb-pbd__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-pbd__raster li { display: grid; gap: var(--nb-space-2xs); align-content: start; padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); font-size: var(--nb-t-body-02); line-height: 1.4; color: var(--nb-text-body); }
.nb-pbd__raster svg { width: 22px; height: 22px; color: var(--nb-text-heading); }
.nb-pbd__raster b { display: block; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pbd__raster li.is-ziel { background: var(--nb-surface-stage); color: var(--nb-text-on-stage); }
.nb-pbd__raster li.is-ziel b, .nb-pbd__raster li.is-ziel svg { color: var(--nb-text-on-stage); }

/* ---------- Zustand-Schublade nach der Live-PDP: Aufklappliste, Bildlauf, Text, „So funktioniert's“ ---------- */
.nb-pzd { display: grid; gap: var(--nb-space-s); }
.nb-pzd__label { display: block; margin-block-end: var(--nb-space-2xs); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--nb-text-on-stage); }
.nb-pzd-select { position: relative; }
.nb-pzd-select__knopf {
  display: flex; align-items: center; gap: var(--nb-space-2xs); width: 100%; min-height: 52px; padding: var(--nb-space-xs) var(--nb-space-s); box-sizing: border-box;
  border: 0; border-radius: var(--nb-radius-input); background: var(--nb-ink-100); color: var(--nb-text-heading); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
@media (hover: hover) and (pointer: fine) { .nb-pzd-select__knopf:hover { background: var(--nb-ink-150); } }
.nb-pzd-select__knopf:active { background: var(--nb-ink-200); transition-duration: var(--nb-motion-druck); }
.nb-pzd-select__knopf:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-pzd-select__wert { flex: 1; min-width: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-pzd-select__marke { flex: none; padding: var(--nb-space-3xs) var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-stage); color: var(--nb-text-on-stage); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); }
.nb-pzd-select__marke[hidden] { display: none; }
.nb-pzd-select__knopf svg { flex: none; width: 20px; height: 20px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve-bewegung); }
.nb-pzd-select.is-offen .nb-pzd-select__knopf svg { transform: rotate(180deg); }
.nb-pzd-select__liste {
  position: absolute; z-index: 5; top: calc(100% + var(--nb-space-3xs)); left: 0; right: 0; display: grid; gap: 2px; margin: 0; padding: var(--nb-space-3xs);
  list-style: none; border-radius: var(--nb-radius-input); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt);
  opacity: 0; visibility: hidden; transform: scale(var(--nb-motion-liste-scale)); transform-origin: 50% 0;
  transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-liste-aus), transform var(--nb-motion-liste-aus) var(--nb-motion-kurve);
}
.nb-pzd-select.is-offen .nb-pzd-select__liste { opacity: 1; visibility: visible; transform: none; transition: opacity var(--nb-motion-liste) var(--nb-motion-kurve), visibility 0s, transform var(--nb-motion-liste) var(--nb-motion-kurve); }
.nb-pzd-select__liste button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2xs); width: 100%; min-height: 44px; padding: var(--nb-space-2xs) 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;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
@media (hover: hover) and (pointer: fine) { .nb-pzd-select__liste button:hover { background: var(--nb-ink-100); } }
.nb-pzd-select__liste button:active { background: var(--nb-ink-200); transition-duration: var(--nb-motion-druck); }
.nb-pzd-select__liste button[aria-selected="true"] { background: var(--nb-surface-stage); color: var(--nb-text-on-stage); font-weight: var(--nb-weight-semibold); }
.nb-pzd-select__liste button:focus-visible { outline: 2px solid var(--nb-night); outline-offset: -2px; }
.nb-pzd-select__aktuell { font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); }
.nb-pzd-select__aktuell[hidden] { display: none; }
.nb-pzd__stufe { display: grid; gap: var(--nb-space-s); }
.nb-pzd__stufe[hidden] { display: none !important; }
.nb-pzd__lead { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.55; color: var(--nb-text-body); }
.nb-pzd__spec h3 { margin: 0 0 var(--nb-space-3xs); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pzd__spec p { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.55; color: var(--nb-text-body); }
.nb-pzd__geteilt { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--nb-space-xs); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-stage); color: var(--nb-text-on-stage); }
.nb-pzd__geteilt svg { width: 22px; height: 22px; }
.nb-pzd__geteilt h3 { margin: 0 0 var(--nb-space-3xs); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-pzd__geteilt p { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.55; }

/* ---------- Eintausch B: „So geht's“ in Sky, „Ohne Eintausch“ als echte Wahl ---------- */
.nb-pak-b .nb-pak-d__wie { background: var(--nb-surface-stage); color: var(--nb-text-heading); }
.nb-pak-b .nb-pak-d__wie-unter { color: var(--nb-text-heading); }
.nb-pak-b .nb-pak-d__wie .nb-s-icon { background: transparent; }
@media (hover: hover) and (pointer: fine) { .nb-pak-b .nb-pak-d__wie:hover { background: var(--nb-surface-stage); box-shadow: var(--nb-sh-hoch); } }
.nb-pak-b .nb-pak-d__wie:active { background: var(--nb-sky-druck); }
.nb-pak-b__wahl { display: grid; gap: var(--nb-space-2xs); }
/* Eintausch-Suche ohne Knopf: das große Feld hält rechts 132 px für den Knopf frei, das Beispiel brach am Handy nach
   „Suchen nach …“ ab (Simulator iPhone 17, 14.10.2026). Nur Platz für das Leeren-Kreuz */
.nb-pak-d .nb-su--ohne-knopf .nb-su__beispiel { right: 48px; }
/* Kreis und Text senkrecht mittig wie in Zustand und Akku (.nb-ph .nb-pw), sonst 5 px zu hoch (Daniel 14.10.2026) */
.nb-pak-b__wahl .nb-pw { align-items: center; }
.nb-pak-b__geraet { grid-template-columns: auto minmax(0, 1fr) auto; }
.nb-pak-b__geraet .nb-pw__titel { font-size: var(--nb-t-body-01); }
.nb-pak-b__link { position: relative; z-index: 1; justify-self: start; margin-block-start: var(--nb-space-3xs); color: var(--nb-text-link); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nb-pak-b__link:hover { text-decoration-thickness: 2px; } }
.nb-pak-b__link:active { color: var(--nb-signal-800); transition-duration: var(--nb-motion-druck); }
.nb-pak-b__link:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 2px; }

/* ---------- Übersicht B: Box wie Back Market, Galerie schlicht mit Daumen und Pfeilen darunter ---------- */
.nb-pueb { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-s); }
@media (min-width: 1100px) { .nb-pueb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--nb-space-xl); padding: var(--nb-space-l); align-items: start; } }
.nb-pueb__bild { min-width: 0; display: grid; gap: var(--nb-space-xs); }
.nb-pueb__kauf { display: grid; gap: var(--nb-space-s); align-content: start; min-width: 0; }
/* Die Übersichtsbox: umrandet wie bei Back Market, bricht G28 (nie Rand), siehe brueche der Fassung */
.nb-pueb__box { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); box-shadow: inset 0 0 0 1px var(--nb-border-control); }
@media (min-width: 768px) { .nb-pueb__box { padding: var(--nb-space-m); } }
.nb-pueb__titel { display: flex; align-items: center; gap: var(--nb-space-2xs); margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; color: var(--nb-text-heading); }
.nb-pueb__punkt { width: 16px; height: 16px; border-radius: 50%; background: var(--farbe); box-shadow: inset 0 0 0 1px rgb(var(--nb-night-rgb) / .16); }

/* ---------- Kaufleiste oben am Rechner wie Back Market (OFFENE-ENTSCHEIDE 121 Punkt 1) ---------- */
.nb-pob { position: fixed; z-index: 20; /* tokens.json ebene.leiste */ top: var(--nb-space-2xs); left: 50%; width: min(1200px, calc(100% - 2 * var(--nb-space-m))); margin-left: calc(min(1200px, calc(100% - 2 * var(--nb-space-m))) / -2); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); transform: translateY(-110%); visibility: hidden; transition: transform var(--nb-motion-fenster-aus) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-fenster-aus); }
.nb-pob.is-da { transform: none; visibility: visible; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), visibility 0s; }
.nb-pob.is-still { transition: none; }
.nb-pob__innen { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: var(--nb-space-s); padding: var(--nb-space-xs) var(--nb-space-xs) var(--nb-space-xs) var(--nb-space-s); box-sizing: border-box; }

.nb-pob__text { display: grid; gap: 2px; min-width: 0; }
.nb-pob__name { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pob__wahl { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-pob__preis { margin: 0; display: grid; justify-items: end; gap: 2px; }

.nb-pob .nb-pdp-kauf { width: auto; min-height: 48px; padding-inline: var(--nb-space-l); }
@media (max-width: 1099px) { .nb-pob { display: none; } }
@media (prefers-reduced-motion: reduce) { .nb-pob, .nb-pob.is-da { transition: none; } }

/* ---------- Bewegung still bei reduzierter Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .nb-pbl, .nb-pbl svg, .nb-pbc .nb-pue-chip, .nb-pbh, .nb-pbh svg path, button.nb-pbs__karte, .nb-pbs__pfeil svg, .nb-pbb__karte,
  .nb-pzd-select__knopf, .nb-pzd-select__knopf svg, .nb-pzd-select__liste, .nb-pzd-select__liste button, .nb-pgn__pfeil, .nb-pgn__punkte button::after { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .nb-pbl:hover svg, button.nb-pbs__karte:hover .nb-pbs__pfeil svg { transform: none; }
}

/* Schublade: Display und Rahmen wie die Pillen am Bild, zwei kleine Karten nebeneinander (G26) */
.nb-pzd__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-2xs); }
.nb-pzd__specs .nb-pzd__spec { padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-pzd__specs .nb-pzd__spec h3 { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); font-weight: var(--nb-weight-semibold); }
.nb-pzd__specs .nb-pzd__spec p { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* ---------- Bühne C und D (Daniel 13.10.2026 spät, KRITIK-pdp-2026-10-13-spaet.md Punkt 6) ----------
   Zwei weiße Karten wie A (design-auditor A 13.10. spät). Die Galerie-Karte ist so hoch wie ihr Inhalt und klebt als
   Ganzes ab 1100 px. Unten fluchten die Karten nicht (G49), Daniel: „wäre ja nicht schlimm, wenn es unbündig wäre“.
   Klebekante unter dem sichtbaren Kopf (Ansage 40 + Kopf 125 = 165 px, gemessen bei 1100 bis 1920), nicht unter der
   Kaufleiste: der Kopf kommt beim Hochrollen zurück und lag über der Galerie (Daniel 13.10.2026 nachts). Fest statt dem
   Kopf folgend, sonst springt das Bild bei jedem Richtungswechsel um 85 px. Erst ab 780 px Höhe, darunter passt die
   Karte (bis 582 px) nicht unter den Kopf */
.nb-pdpc { --nb-kopf-unten: 165px; display: grid; gap: var(--nb-space-m); }
.nb-pdpc > .nb-s-karte { border-width: 0; box-shadow: var(--nb-sh-ruht); min-width: 0; }
.nb-pdpc__galerie { padding: var(--nb-space-s); }
.nb-pdpc__kauf { display: grid; gap: var(--nb-space-s); align-content: start; padding: var(--nb-space-m); }
@media (min-width: 1100px) {
  .nb-pdpc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .nb-pdpc__galerie { align-self: start; }
  .nb-pdpc__kauf { padding: var(--nb-space-l); }
}
/* Klebt erst, wenn die Galerie ganz ins Fenster passt: seit nur das Wawi-Foto steht (Daniel 16.10.2026) ist die Karte
   686 statt 582 px hoch, mit 181 px Abstand oben 867 px, darum 870 statt 780 px Fensterhöhe */
@media (min-width: 1100px) and (min-height: 870px) {
  .nb-pdpc__galerie { position: sticky; top: calc(var(--nb-kopf-unten) + var(--nb-space-s)); }
}

.nb-pdpc .nb-pg__folie { aspect-ratio: 1; } /* auch am Rechner quadratisch, Daniel 13.10. spät: 4:5 „nimmt fast eine ganze Seite ein“ */
/* Gerätename display-02 (tokens.json: Produkttitel), 40 px am Rechner, 24 am Handy. Daniel 13.10. spät: „größer“ */
.nb-pdpc .nb-pdpb__h1 { font-size: var(--nb-t-display-02); line-height: 1.08; letter-spacing: -0.03em; }
.nb-pdpc .nb-kk-s__zahlinfo { justify-items: center; text-align: center; }
.nb-pdpc .nb-kk-s__land, .nb-pdpc .nb-kk-logos { justify-content: center; }
/* Preis wieder price-01 wie A, 20 px am Handy, 34 px am Rechner (Daniels Wort, Bruch mit typografie.md:92) */
.nb-pbp--gross .nb-pbp__betrag { font-size: var(--nb-t-price-01); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.nb-pbp--gross .nb-pbp__neu { font-size: var(--nb-t-body-01); }
/* Etiketten (Fassung D): m-merkmal, komponenten-global.md:66-88. Nicht klickbar */
.nb-pdpc__etiketten { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; }
.nb-pdpc__etikett { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-stage); color: var(--nb-text-on-stage); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-pdpc__etikett[hidden] { display: none; }

/* Prüf-Band klein in der Kaufspalte wie Back Market „Professionell erneuert“ (Bild 3), in Night wie das große Band
   (Daniel 13.10.2026 spät: „wieso nicht im selben Farbschema wie vorher“). Dunkle Fläche in der weißen Karte, Karten
   surface-dark-raised, Zeichen in Lime (13,08:1, Bruch LIME wie B), rund 2,2 Karten sichtbar, am rechten Rand blendet
   die Spur aus, darunter eine Fortschrittslinie per scaleX. Kein gestaffeltes Einblenden, auf der Bühne gibt es kein
   Reveal (tokens.json motion, shop-build 11.2) */
.nb-s-karte.nb-pbb--klein, .nb-pbb--klein { gap: var(--nb-space-s); margin: var(--nb-space-2xs) 0 0; padding: var(--nb-space-m) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-pbb--klein .nb-pbb__kopf { align-items: center; }
.nb-pbb--klein .nb-pbb__kopf > div { min-width: 0; }
.nb-pbb--klein .nb-pbb__kopf h2 { font-size: var(--nb-t-heading-02); line-height: 1.3; }
.nb-pbb--klein .nb-pbb__kopf p { margin-block-start: 2px; font-size: var(--nb-t-body-02); }
/* Am Handy wischt man, Pfeile erst ab 768 px wie im großen Band */
.nb-pbb--klein .nb-pbb__spur { grid-auto-columns: calc((100% - var(--nb-space-xs)) / 1.6); -webkit-mask-image: linear-gradient(to right, var(--nb-night) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, var(--nb-night) calc(100% - 32px), transparent); }
@media (min-width: 768px) { .nb-pbb--klein .nb-pbb__spur { grid-auto-columns: calc((100% - 2 * var(--nb-space-xs)) / 2.2); } }
/* FOKUSRAND f969d44962c2 (Qualitätslauf Produktseite Runde 2, 16.10.2026): Die dritte Karte schaut nur 40 px in die Spur.
   Chrome rollt ein halb sichtbares Fokusziel nicht nach, der Ring ragte 133,9 px über den Ausschnitt. Liegt der
   Tastaturfokus in der Spur, ist die fokussierte Karte die einzige Rastmarke, bündig am Ende. Die Spur rastet dorthin
   und zeigt die Karte samt 5-px-Saum (Innenabstand 6 px). Ohne Fokus und bei Maus oder Finger bleibt alles, wie es ist.
   Im Prüf-Band klein hält der Rand die 32 px Ausblendung frei, sonst läge der Ring im Verlauf der Maske */
.nb-pbb__spur:has(.nb-pbb__karte:focus-visible) li { scroll-snap-align: none; }
.nb-pbb__spur li:has(> .nb-pbb__karte:focus-visible) { scroll-snap-align: end; }
.nb-pbb--klein .nb-pbb__spur li:has(> .nb-pbb__karte:focus-visible) { scroll-margin-inline-end: var(--nb-space-l); }
.nb-pbb--klein .nb-pbb__karte { gap: var(--nb-space-m); min-height: 0; }
.nb-pbb--klein .nb-pbb__zeichen { display: block; line-height: 0; }
.nb-pbb--klein .nb-pbb__karte svg { width: 24px; height: 24px; }
.nb-pbb__lauf { height: 2px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-dark-raised); overflow: hidden; }
.nb-pbb__lauf span { display: block; height: 100%; background: var(--nb-text-on-dark); transform: scaleX(.45); transform-origin: left center; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
@media (prefers-reduced-motion: reduce) { .nb-pbb__lauf span { transition: none; } }

/* ---------- Zustand-Auswahl J und G (Daniel 13.10.2026 nachts, ANALYSE-harmonie-2026-10-13.md) ----------
   Leiste bleibt Sky (Daniel). Bild auf eigenem Grund (signal oder skyfrei, Gerät 16 % kleiner, Ecke unten links frei),
   Bildseite als Titel, Pillen weiß, ungewählter Preis Regular. Gewählt mit heller Fläche und Linie im eigenen Ton */
.nb-ph--h .nb-pg__buehne, .nb-ph--h .nb-pg__folie { background: transparent; }
.nb-ph--h .nb-pg__folie { position: relative; }
/* Bildseite als weiße Pille oben links, wischt mit der Folie mit (Daniel 14.10.2026: „nicht als Aufschrift im Bild,
   als Label oben beim Durchswitchen“). Maße wie die Befund-Pillen, Night Semibold */
.nb-ph--h .nb-ph__seite { position: absolute; z-index: 1; top: var(--nb-space-xs); left: var(--nb-space-xs); padding: var(--nb-space-3xs) var(--nb-space-xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; white-space: nowrap; color: var(--nb-text-heading); pointer-events: none; }
@media (min-width: 900px) { .nb-ph--h .nb-ph__seite { top: var(--nb-space-s); left: var(--nb-space-s); font-size: var(--nb-t-body-02); } }
.nb-ph--h.nb-ph--bild-gross .nb-ph__pillen li { background: var(--nb-surface-page); color: var(--nb-text-heading); font-weight: var(--nb-weight-regular); box-shadow: var(--nb-sh-ruht); }
.nb-ph--h .nb-pgn__name { visibility: hidden; }
.nb-ph--h .nb-pw:not(:has(.nb-pw__eingabe:checked)) .nb-pw__preis { font-weight: var(--nb-weight-regular); }
/* Gewählt: Fläche, Linie 1,5 px und Kreis aus den Variablen der Fassung, Schrift Night */

/* J (Daniel 13.10.2026: „die Umrandung einfach farblich harmonisch“, Token-Ja): Fläche, Linie und Kreis im Farbton von
   Signal (farbsystem.md §2 Nachtrag 13.10.2026). Gilt auf Zustand, Akku, Speicher, Farbe und Eintausch (KLASSE_J) */
.nb-ph--h-signalton { --nb-h-flaeche: var(--nb-surface-selected); --nb-h-linie: var(--nb-border-selected); --nb-h-kreis: var(--nb-border-control-selected); }
/* J auf den übrigen Wahl-Plätzen: Bild auf dem J-Grund (Bilder -signal), Farbfoto auf surface-selected, Kopfpille weiß
   wie die Befund-Pillen im Zustand */
.nb-ph--h-signalton:not(.nb-ph--bild-gross) .nb-ph__figur, .nb-ph--h-signalton .nb-pwa__figur { background: var(--nb-surface-selected); }
/* Am Handy ist der Eintausch-Rahmen 16:10, das quadratische Bild füllt ihn (Box liegt in der Mitte), sonst Kanten zwischen
   Bildverlauf und Fläche (Simulator iPhone 17, 14.10.2026) */
.nb-ph--h-signalton .nb-pwa__figur img { object-fit: cover; }
@media (min-width: 900px) {
  .nb-ph--h .nb-ph__kopfpille { background: var(--nb-surface-page); color: var(--nb-text-heading); font-weight: var(--nb-weight-regular); box-shadow: var(--nb-sh-ruht); }
}
.nb-ph--h .nb-pw-stil--sky .nb-pw.nb-pw--innen:has(.nb-pw__eingabe:checked) { background: var(--nb-h-flaeche); color: var(--nb-text-heading); box-shadow: inset 0 0 0 1.5px var(--nb-h-linie); }
.nb-ph--h .nb-pw-stil--sky .nb-pw:has(.nb-pw__eingabe:checked) .nb-pw__kreis { box-shadow: inset 0 0 0 11px var(--nb-h-kreis); }

/* Gewählte Zeile reagiert beim Antippen nicht, sie ist schon gewählt (Daniel 14.10.2026, OE 128, Ausnahme zu design-kurz Nr. 12) */
.nb-ph--h .nb-pw-stil--sky .nb-pw.nb-pw--innen:not(.is-aus):active:has(.nb-pw__eingabe:checked) { background-color: var(--nb-h-flaeche); }
@media (hover: hover) and (pointer: fine) {
  .nb-ph--h .nb-pw-stil--sky .nb-pw.nb-pw--innen:not(.is-aus):hover:has(.nb-pw__eingabe:checked) { box-shadow: inset 0 0 0 1.5px var(--nb-h-linie); }
  .nb-ph--h .nb-pw-stil--sky .nb-pw:not(.is-aus):hover:has(.nb-pw__eingabe:checked) .nb-pw__kreis { box-shadow: inset 0 0 0 11px var(--nb-h-kreis); }
}

/* „Frag mich“ am Handy auf der Produktseite als runder Knopf mit Zeichen, ohne Wort (Daniel 14.10.2026, Simulator iPhone 17e:
   die Pille verdeckte Preise, „Nicht verfügbar“ und Überschriften). Das Wort bleibt als aria-label. Rechner unverändert */

/* ---------- Handy ruhiger, Bühne und Übersicht gleich (Daniel 14.10.2026, KRITIK-pdp-2026-10-14-mobile.md) ----------
   Weniger Luft über der Brotkrume, Zahlarten nur am Rechner, Klarna in einer Zeile, Preis am Handy 24 px wie der
   Gerätename (Daniel „bisschen größer“, sonst price-01 mit 20 px) */
.nb-pbkl { gap: var(--nb-space-2xs); flex-wrap: wrap; }
.nb-pbkl > span { min-width: 0; }
/* Rechner: Brotkrume 24 px unter dem Kopf wie Kategorie, Suche und Verkaufen (nb-s-kat-kopf), vorher erbte die Bühne
   den Sektionsabstand mit 96 px (Daniel 17.10.2026) */
.nb-s-pdp-buehne { margin-block-start: var(--nb-space-m); }
@media (max-width: 899px) {
  .nb-s-pdp-buehne { margin-block-start: var(--nb-space-xs); }
  .nb-pdpb .nb-kk-s__zahlinfo, .nb-pdpc .nb-kk-s__zahlinfo, .nb-pueb .nb-kk-s__zahlinfo { display: none; }
  .nb-pbp--gross .nb-pbp__betrag, .nb-pueb .nb-pbp__betrag { font-size: var(--nb-t-heading-01); }
}

/* ---------- Keine graue dünne Schrift oben (Regel Daniel 14.10.2026, OE 129) ----------
   Prüf-Band in der Bühne weiß in Semibold statt hellgrau, „Nicht verfügbar“ und Wahl der Leiste oben am Rechner Night
   Semibold. Der durchgestrichene Neupreis bleibt grau wie bei Back Market */
.nb-pbb--klein .nb-pbb__kopf p, .nb-pbb--klein .nb-pbb__unter { color: var(--nb-text-on-dark); font-weight: var(--nb-weight-semibold); }
.nb-ph--b .nb-pw.is-aus .nb-pw__preis { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pob__wahl { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* ---------- Ohne Skript (OHNEJS resilienz-pruefer 16.10.2026) ----------
   Am Ende der Datei, damit die Regeln jedes display davor überstimmen (.nb-pbb__pfeile ab 768 px). Pfeile, Punkte und
   Daumen der Bildläufe, Merken und die Leiste „Gewählt · Vergleichen“ wirken nur mit Skript (kern/pdp.mjs). Ohne stehen
   sie nicht da, die Spur rollt per scroll-snap, der Kaufknopf nimmt die ganze Breite. Die Sky-Karten und das Prüf-Band
   tragen Inhalt und bleiben, ohne Pfeil und Zeiger. Muster der Kategorie (checkliste, verkaeufe: @media scripting none) */
@media (scripting: none) {
  .nb-pgn, .nb-pbb__pfeile, .nb-pbh, .nb-pbl, .nb-pbs__pfeil { display: none; }
  .nb-pbk { grid-template-columns: minmax(0, 1fr); }
  button.nb-pbs__karte, .nb-pbb__karte { cursor: default; }
}

/* baukasten/sektionen/pdp-buehne/sektion.css */
/* P1 Bühne mit Galerie und Kaufkarte (Werkstatt pdp, autonome Schleife 11.10.2026). Werte nur als Token.
   Kein Reveal auf Bühne, Preis, Knopf (shop-build 11.2). Bewegung nur beim Bildwechsel (opacity, motion-farbe) und am
   Fortschritt (scaleX, motion-transform). Am Handy Wischen mit scroll-snap. */

.nb-s-pdp-buehne { padding-block: 0; }

/* ---------- Raster ---------- */
.nb-pdp-b { display: grid; gap: var(--nb-space-m); align-items: stretch; }

/* ---------- Galerie ---------- */
.nb-pg { display: grid; gap: var(--nb-space-s); }
.nb-pg__buehne { position: relative; border-radius: var(--nb-radius-input); background: var(--nb-ink-100); overflow: hidden; }
.nb-pg__spur { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.nb-pg__spur::-webkit-scrollbar { display: none; }
/* Safari am iPhone blendet mix-blend-mode nicht durch den Scroller: ohne eigenen Grund stand das Produktfoto als weißes
   Rechteck auf der Bühne (Simulator iPhone 17, 14.10.2026). Die Spur trägt deshalb den Grund der Bühne selbst */
.nb-pg__spur, .nb-pg__folie { background: inherit; }
/* FOKUSSICHT 5f01c7228c7a (Qualitätslauf Produktseite Runde 2, 16.10.2026): Der Ring nach innen an der Spur lag unter
   der aktiven Folie (z-index 1 am Rechner) und unter dem Inhalt der Scroll-Spur, nur 24 px änderten sich (0,01 %). Der
   Ring sitzt jetzt nach der Fokus-Formel (farbsystem.md §5) außen an der Bühne. Ihr overflow schneidet den eigenen
   Rahmen nicht ab, die Karte drumherum hat 16 px Polster für den 5-px-Saum (FOKUSRAND 11.10. bleibt gelöst).
   Die Spur selbst zeigt keine zweite Linie */
.nb-pg .nb-pg__buehne .nb-pg__spur[role="region"]:focus-visible { outline: none; box-shadow: none; }
.nb-pg .nb-pg__buehne:has(> .nb-pg__spur[role="region"]:focus-visible) { outline: 2px solid var(--nb-night); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page); }
/* BILDAUSFALL resilienz-pruefer 16.10.2026: Spalte minmax(0, 1fr) statt auto. Ein kaputtes Bild ist kein ersetztes Element
   mehr und drückt die Spalte auf seine Breite aus Höhe mal Seitenverhältnis (Stufenbild 326 → 436 px bei 390) */
.nb-pg__folie { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; aspect-ratio: 4 / 4.2; scroll-snap-align: start; min-width: 0; padding: var(--nb-space-l); box-sizing: border-box;}
/* Das Produktfoto hat weißen Grund. multiply legt es auf ink-100, ohne weißes Rechteck */
.nb-pg__foto { width: auto; height: 86%; max-height: 86%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Das Foto liegt absolut in der Folie und gibt ihr keine Höhe. Die Folie hält 4 : 4,2 ab dem ersten HTML, auch wenn das Bild
   spät kommt (5b-2b H6, vorher 578 auf 656 px bei 1440) */
.nb-pg__folie--foto .nb-pg__foto { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 2 * var(--nb-space-l)); }
.nb-pg__d img { mix-blend-mode: multiply; }

/* Rechner: Folien liegen übereinander, die aktive blendet ein (opacity). Ohne JS ist die erste zu sehen */
@media (min-width: 1100px) {
  .nb-pg--seite .nb-pg__spur, .nb-pg--unten .nb-pg__spur { grid-auto-flow: row; grid-auto-columns: auto; grid-template-areas: 'f'; overflow: visible; scroll-snap-type: none; }
  /* Überblendung ohne Doppelbild: die neue Folie liegt oben auf eigener Fläche und blendet ein, die alte bleibt darunter
     voll stehen und geht erst danach weg. Vorher blendeten beide zugleich, in der Mitte standen zwei halbe Bilder
     (5b, review-animations Fund 7) */
  .nb-pg--seite .nb-pg__folie, .nb-pg--unten .nb-pg__folie { grid-area: f; opacity: 0; visibility: hidden; background: var(--nb-ink-100); transition: opacity 0s linear var(--nb-motion-farbe), visibility 0s linear var(--nb-motion-farbe); }
  .nb-pg--seite .nb-pg__folie.is-aktiv, .nb-pg--unten .nb-pg__folie.is-aktiv { z-index: 1; opacity: 1; visibility: visible; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s; }
  /* Galerie bleibt stehen, während die Kaufkarte daneben weiterläuft. Die Karte selbst fluchtet unten mit der Kaufkarte
     (design-kurz Nr. 8), statt 180 px leer unter dem Bild klebt das Bild (5b, impeccable critique Fund 5) */
  
  .nb-pg--seite .nb-pg__fortschritt, .nb-pg--unten .nb-pg__fortschritt { display: none; }
  /* Fassung a: Daumen senkrecht links neben dem Bild (Baymard, Bericht Z. 68) */
  .nb-pg--seite { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
  .nb-pg--seite .nb-pg__daumen { grid-column: 1; grid-row: 1; flex-direction: column; }
  .nb-pg--seite .nb-pg__buehne { grid-column: 2; grid-row: 1; }
}

/* Pfeile: am Rechner bei a und b nur über dem Bild, beim Band immer */
/* FOKUSVERDECKT 46e084299449 (Qualitätslauf Produktseite Runde 2, 16.10.2026): Am Rechner liegt die aktive Folie mit
   z-index 1 über allem ohne eigene Ebene, auch über den Pfeilen. Die Pfeile waren dort weder zu sehen noch zu treffen,
   der Tab-Lauf fand sie ganz verdeckt (Verdecker gemeldet als die klebende Galerie-Karte, in der beide liegen).
   z-index 2 hebt sie über die Folie, wie den Sticker (pdp-b.css). Das Kleben der Karte bleibt */
.nb-pg__pfeile { position: absolute; z-index: 2; inset-inline: var(--nb-space-s); top: 50%; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.nb-pg__pfeil {
  pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--nb-surface-page); color: var(--nb-text-heading); box-shadow: var(--nb-sh-ruht); cursor: pointer;
  transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pg__pfeil svg { width: 20px; height: 20px; }
.nb-pg__pfeil--weiter svg { transform: scaleX(-1); }
.nb-pg__pfeil:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-pg__pfeil:active { background-color: var(--nb-ink-100); transition-duration: var(--nb-motion-druck); }
@media (hover: hover) and (pointer: fine) { .nb-pg__pfeil:hover { box-shadow: var(--nb-sh-hoch); } }
@media (max-width: 1099px) { .nb-pg--seite .nb-pg__pfeile, .nb-pg--unten .nb-pg__pfeile { display: none; } }

.nb-pg__zahl { position: absolute; inset-block-end: var(--nb-space-s); inset-inline-end: var(--nb-space-s); margin: 0; padding: 0 var(--nb-space-xs); min-height: 28px; display: inline-flex; align-items: center; border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); color: var(--nb-text-heading); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; }

/* Daumen */
.nb-pg__daumen { display: flex; gap: var(--nb-space-xs); }
.nb-pg__d {
  position: relative; display: grid; place-items: center; flex: none; width: 72px; height: 72px; padding: var(--nb-space-3xs); border: 0; border-radius: var(--nb-radius-badge);
  background: var(--nb-ink-100); color: var(--nb-text-heading); cursor: pointer; overflow: hidden;
  transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pg__d { grid-template-columns: minmax(0, 1fr); } /* BILDAUSFALL 16.10.2026: Daumen ohne Bild 72 → 96 px breit, wie .nb-pg__folie */
.nb-pg__d img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Fix 16.10.2026 (Daniel live): Die Zeile des Rasters war auto, height: 100% lief ins Leere und das Bild nahm seine
   Höhe aus dem Seitenverhältnis. Live wurden sm 99×200 und 73×200 zu 64×129 und 64×175 px, auch das erste (492×600)
   stand 64×78 in 64 px Innenhöhe und lief 14 px über. Feste Zeile: jedes Bild liegt per contain im 72×72-Kasten */
.nb-pg__d { grid-template-rows: minmax(0, 1fr); }
.nb-pg__d img { min-width: 0; min-height: 0; }

.nb-pg__d[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--nb-night); }
.nb-pg__d:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
/* Fokus genau eine Linie: der gewählte Daumen trägt schon den Night-Ring, mit Fokus nur noch die äußere (design-kurz Nr. 10,
   5b design-auditor Fund 3) */
.nb-pg__d[aria-current="true"]:focus-visible { box-shadow: none; }
/* Druck eine Stufe dunkler als Hover (5b, review-animations Fund 8) */
@media (hover: hover) and (pointer: fine) { .nb-pg__d:hover { background-color: var(--nb-ink-200); } }
/* Druck nach Hover, sonst gewinnt bei gleicher Spezifität der Hover und Druck sieht aus wie Hover (5b-2b M5) */
.nb-pg__d:active { background-color: var(--nb-ink-300); transition-duration: var(--nb-motion-druck); }
@media (max-width: 1099px) { .nb-pg__daumen { display: none; } }
/* OHNEJS resilienz-pruefer 16.10.2026: Pfeile und Daumen wirken nur mit Skript. Ohne bleiben sie weg wie auf der Kategorie
   (checkliste, verkaeufe: @media scripting none), am Handy wischt die Spur weiter per scroll-snap */
@media (scripting: none) {
  .nb-pg__pfeile, .nb-pg__daumen { display: none; }
  .nb-pg--seite { grid-template-columns: minmax(0, 1fr); }
  .nb-pg--seite .nb-pg__buehne { grid-column: 1; }
}

/* Fortschritt am Handy und beim Band: eine Linie, die mitwächst (scaleX) */
.nb-pg__fortschritt { height: 4px; border-radius: var(--nb-radius-pill); background: var(--nb-ink-200); overflow: hidden; }
.nb-pg__fortschritt span { display: block; height: 100%; background: var(--nb-surface-dark); transform-origin: left center; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve-bewegung); }

/* Fassung c: Band mit zweieinhalb Folien am Rechner, eine und ein Stück am Handy */

/* Spalte darf schmaler als der Inhalt sein, sonst schiebt die Spur die Bühne bei 320 px auf 336 px (5b-2b H7) */

/* Per Tastatur ohne Bewegung: Folie und Fortschritt springen (design-kurz Nr. 13, 5b review-animations Fund 2) */
.nb-pg.nb-pg--still .nb-pg__folie, .nb-pg.nb-pg--still .nb-pg__folie.is-aktiv, .nb-pg.nb-pg--still .nb-pg__fortschritt span { transition: none; }

/* ---------- Kaufblock ---------- */

.nb-pdp-preis { display: grid; gap: var(--nb-space-3xs); }

/* Doppelte Klasse schlägt .nb-price-01 aus nb-tokens-v3.css (lining-nums), sonst springt die Breite beim Preiswechsel (5b-2b M4) */

.nb-pdp-wahl { margin: 0; padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-heading); }

.nb-pdp-kaufen { display: grid; gap: var(--nb-space-s); }
.nb-pdp-kauf {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 60px; padding: 0 var(--nb-space-l);
  border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-action-primary); color: var(--nb-action-primary-label); text-decoration: none;
  font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); cursor: pointer;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
@media (hover: hover) and (pointer: fine) { .nb-pdp-kauf:not([aria-disabled="true"]):hover { background: var(--nb-action-primary-hover); } }
.nb-pdp-kauf:not([aria-disabled="true"]):active { background: var(--nb-action-primary-active); transition-duration: var(--nb-motion-druck); }
.nb-pdp-kauf:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-pdp-kauf[aria-disabled="true"] { background: var(--nb-ink-200); color: var(--nb-text-body); cursor: not-allowed; }
.nb-pdp-aus { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-pdp-aus a { position: relative; white-space: nowrap; color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Trefferfläche 44 px ohne Höhe in der Zeile, wie am Wahl-Link (design-kurz Nr. 15, 5b design-auditor Fund 5) */
/* Link bricht nicht um, sonst hängt die 44-px-Fläche nur an der ersten Zeile (5b-1 Messung bei 390 px) */
.nb-pdp-aus a::before { content: ''; position: absolute; inset: 50% -6px auto; height: 44px; transform: translateY(-50%); }
.nb-pdp-aus a:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .nb-pdp-aus a:hover { text-decoration-thickness: 2px; } }
.nb-pdp-aus a:active { color: var(--nb-text-heading); transition-duration: var(--nb-motion-druck); }

/* Trust-Leiste: Fläche ink-100 in der weißen Karte (Umkehr G29), radius-input (Bericht Abschnitt 1) */

/* Trefferfläche 44 px ohne Höhe in der Zeile (ZIEL 11.10.), Zeigen und Druck wie die übrigen Links */

/* Fassung c: Kaufkarte quer, Trust über die volle Breite in drei Spalten */

@media (prefers-reduced-motion: reduce) {
  .nb-pg__folie, .nb-pg__fortschritt span, .nb-pg__pfeil, .nb-pg__d, .nb-pdp-kauf { transition: none !important; }
}

/* ---------- 5b-2a ---------- */
/* Zweig zur Wahl: Knopf und Hinweis halten den Abstand der Kaufgruppe (K3) */
.nb-pdp-wenn { display: grid; gap: var(--nb-space-s); }
/* Farbe ohne eigenes Foto: das Foto der Hauptfarbe bleibt, die Pille sagt es (H1). Stil wie .nb-pg__zahl, oben links */
.nb-pg__folie--foto { position: relative; }
.nb-pg__hinweis { position: absolute; inset-block-start: var(--nb-space-s); inset-inline-start: var(--nb-space-s); margin: 0; padding: 0 var(--nb-space-xs); min-height: 28px; display: inline-flex; align-items: center; border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); color: var(--nb-text-heading); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }

/* Fassung d (Daniel 11.10.2026 abends, Punkt 1): Schubladen-Knöpfe und Zahlinfo unter dem Knopf, Zusagen ohne grauen
   Kasten direkt auf der weißen Karte, Zeichen im Kreis surface-info (.nb-s-icon) wie im Eintausch */

/* baukasten/kern/pdp-wahl.css */
/* Neue Wahl der Produktseite, Runde 1 (Werkstatt pdp, 12.10.2026). Entscheid A: die Rechner-Kachel
   (komponenten-tradein.md:561), Werte DOSSIER-pdp-daniel-2026-10-11.md Z. 633 bis 651. Markup in kern/pdp-wahl.mjs.
   Kein Höhensprung beim Klick: Haken hat einen festen Platz und wechselt nur die Deckkraft, Rand bleibt 1 px. */

/* ---------- Abschnitt „Bild und Wahl“ ---------- */
.nb-pwa { display: grid; gap: var(--nb-space-m); padding: var(--nb-space-m); align-items: start; }
.nb-pwa__bilder { position: relative; }
.nb-pwa__figur { margin: 0; border-radius: var(--nb-radius-container); overflow: hidden; background: var(--nb-ink-100); }
.nb-pwa__figur[hidden] { display: none !important; }
.nb-pwa__figur img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.nb-pwa__wahl { display: grid; gap: var(--nb-space-m); min-width: 0; }
.nb-pwa__kopf { display: grid; gap: var(--nb-space-2xs); }
.nb-pwa__kopf h2 { margin: 0; }
.nb-pwa__kopf .nb-pdp-satz { margin: 0; }

/* Zwei Abschnitte untereinander (Speicher und Farbe) */
.nb-pwa-stapel { display: grid; gap: var(--nb-space-m); }
/* Produktfoto der Farbe: weißer Grund verschwindet per multiply im ink-100, ganz sichtbar statt beschnitten */

.nb-pwa__pille {
  position: absolute; left: var(--nb-space-s); bottom: var(--nb-space-s); margin: 0; padding: var(--nb-space-2xs) var(--nb-space-s);
  border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht);
  font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading);
}
.nb-pwa__pille[hidden] { display: none; }

/* Bildgrund nach Schalter: ink-100 (Vorauswahl) oder surface-stage. Beide im HTML, eines ausgeblendet */

[data-nb-bildgrund="sky"] .nb-pwa__figur { background: var(--nb-surface-stage); }

/* Handy: Bild oben und flach (16:10), damit die Wahl im ersten Bildschirm beginnt */
@media (max-width: 899px) {
  .nb-pwa { padding: var(--nb-space-s); gap: var(--nb-space-s); }
  .nb-pwa__figur { border-radius: var(--nb-radius-card); }
  .nb-pwa__figur img { aspect-ratio: 16 / 10; object-fit: contain; }
  
}
/* Rechner: Bild links (5) und Wahl rechts (7), oder gespiegelt */
@media (min-width: 900px) {
  .nb-pwa { padding: var(--nb-space-l); gap: var(--nb-space-xl); }
  .nb-pwa--links, .nb-pwa--rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  
  
  .nb-pwa__bilder { position: sticky; top: var(--nb-space-l); }
  /* Kompakt: kleines Bild neben dem Kopf, Kacheln in einer Reihe */
  
  
  
}

/* ---------- Kachel ---------- */

/* Gewählt: surface-stage mit 1 px sky-700, Haken erscheint. Rand bleibt 1 px, nichts springt */

/* Fokus genau eine Linie (G18) */

/* Hover nur mit Maus: Rand auf border-control (Rechner-Kachel, Bruch gegen design-kurz Nr. 11, im Text genannt) */

/* Druck nur Farbe (design-kurz Nr. 12) */

/* Nicht verfügbar: Haarlinie, gedämpfte Schrift, Grund statt Preis */

/* Kompakt (Speicher, Farbe in zwei Spalten) */

/* Schalter: Ruhe-Rand und Wahl-Rand */

/* Speicher-Quadrat, wächst mit dem Speicher (Back Market, eigene Werte) */

/* Farbpunkt mit Ring, damit Weiß auf Weiß sichtbar bleibt */

/* ---------- Eintausch (pdp-ankauf d, e): Suche, „So geht's“, „Ohne Eintausch weiter“ ---------- */
.nb-pak-d .nb-pwa__wahl { align-content: start; }
.nb-pak-d__suche { margin: 0; }
.nb-pak-d__suche .nb-su { --su-hoehe: 56px; }
/* „So geht's“ steht in der weißen Karte, deshalb ink-100 ohne Schatten (Umkehr G29). Hover nur der Pfeil, keine Tönung */
.nb-pak-d__wie {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; align-items: center; gap: var(--nb-space-s);
  width: 100%; min-height: 72px; padding: var(--nb-space-s) var(--nb-space-xs) var(--nb-space-s) var(--nb-space-s);
  border: 0; border-radius: var(--nb-radius-card); background: var(--nb-ink-100); color: var(--nb-text-heading);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); /* NULLWECHSEL bewegungs-pruefer 16.10.2026: Schatten im Hover (pdp-b.css .nb-pak-b) */
}
.nb-pak-d__wie .nb-s-icon { background: var(--nb-surface-page); }
.nb-pak-d__wie-text { display: grid; gap: 2px; min-width: 0; }
.nb-pak-d__wie-titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; }
.nb-pak-d__wie-unter { font-size: var(--nb-t-body-02); line-height: 1.4; color: var(--nb-text-muted); }
.nb-pak-d__wie-pfeil { display: grid; place-items: center; width: 44px; height: 44px; }
.nb-pak-d__wie-pfeil svg { width: 22px; height: 22px; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-pak-d__wie:hover .nb-pak-d__wie-pfeil svg { transform: translateX(4px); } }
.nb-pak-d__wie:active { background: var(--nb-ink-200); transition-duration: var(--nb-motion-druck, 100ms); }
.nb-pak-d__wie:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .nb-pak-d__wie, .nb-pak-d__wie-pfeil svg { transition: none; }
}
/* OHNEJS resilienz-pruefer 16.10.2026: „So geht's“ öffnet nur mit Skript eine Schublade, ohne steht es nicht da
   (Muster der Kategorie, @media scripting none) */
@media (scripting: none) { .nb-pak-d__wie { display: none; } }

/* ---------- Wahl-Block, Runde 3 (Daniel 13.10.2026, KRITIK-pdp-2026-10-13.md) ----------
   Eine Form für Zustand, Akku, Speicher und Farbe. Zeilen sind die Wahlkachel .nb-pw (kern/pdp.css) mit nb-pw--innen
   in der Sky-Fassung: ruhend ink-100 in der weißen Karte (G29), gewählt surface-stage mit Kreis Sky 900 (G21, Bild 1).
   Handy: kleines Bild neben der Überschrift, ohne Pillen. Rechner: Bild links (5), Kopf und Zeilen rechts (7). */
.nb-ph {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "bild kopf" "wahl wahl";
  column-gap: var(--nb-space-s); row-gap: var(--nb-space-s); align-items: center; padding: var(--nb-space-s);
}
.nb-ph__bild { grid-area: bild; min-width: 0; }
.nb-ph__kopf { grid-area: kopf; display: grid; gap: var(--nb-space-3xs); min-width: 0; }
.nb-ph__kopf h2 { margin: 0; text-wrap: balance; }
.nb-ph__wahl { grid-area: wahl; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-xs); min-width: 0; }
.nb-ph__wahl .nb-pdp-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.nb-ph__figur { position: relative; margin: 0; border-radius: var(--nb-radius-input); overflow: hidden; background: var(--nb-ink-100); }
.nb-ph__figur[hidden] { display: none !important; }
/* min-height 0 (BILDAUSFALL resilienz-pruefer 16.10.2026): ohne Bild zählt der Alt-Text als Inhalt, das Quadrat wuchs
   bei 390 px von 88 auf 96 (Akku) und 112 px (Farbbild) */
.nb-ph__figur img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 1; object-fit: cover; }
.nb-ph__figur--foto img { object-fit: contain; padding: var(--nb-space-2xs); box-sizing: border-box; mix-blend-mode: multiply; }

.nb-ph__kopfpille, .nb-ph__pillen, .nb-ph__figur .nb-pwa__pille { display: none; }

.nb-ph__zeilen { display: grid; gap: var(--nb-space-2xs); }
/* Zwei Spalten nur, wenn jede Kachel mindestens 280 px hat. Zwischen 900 und 1180 px schrumpfte die Kachel auf 212 bis
   261 px und brach „Mitternacht“ und „Gelb“ Buchstabe für Buchstabe um (gemessen 17.10.2026). Dann eine Spalte wie am Handy */
@media (min-width: 480px) { .nb-ph__zeilen--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } }
.nb-ph .nb-pw { align-items: center; }
.nb-ph .nb-pw__kreis { align-self: center; }

/* Zeichen vor dem Titel: Speicher-Quadrat wächst mit dem Speicher (Back Market), Farbpunkt aus den Produktdaten */

/* „Beliebt“ hinter dem Titel. Lime als Pille bricht G20, Daniel will den gelben Akzent der heutigen Card (12.10.2026) */
.nb-pw__marke {
  display: inline-block; margin-inline-start: var(--nb-space-2xs); padding: var(--nb-space-3xs) var(--nb-space-2xs); border-radius: var(--nb-radius-pill);
  background: var(--nb-lime); color: var(--nb-text-on-lime); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1; vertical-align: middle;
}

@media (min-width: 900px) {
  .nb-ph {
    /* Kopf und Zeilen stehen mittig zum Bild wie bei Back Market, kurze Wahlen lassen unten keine leere Fläche */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "bild ." "bild kopf" "bild wahl" "bild .";
    grid-template-rows: 1fr auto auto 1fr; column-gap: var(--nb-space-l); row-gap: 0; padding: var(--nb-space-l); align-items: start;
  }
  .nb-ph__wahl { margin-block-start: var(--nb-space-m); }
  .nb-ph__kopf { gap: var(--nb-space-2xs); }
  .nb-ph__figur { border-radius: var(--nb-radius-card); }
  .nb-ph__figur--foto img { padding: var(--nb-space-xl) var(--nb-space-m) var(--nb-space-m); }
  .nb-ph__kopfpille, .nb-ph__pillen li {
    padding: var(--nb-space-3xs) var(--nb-space-xs); border-radius: var(--nb-radius-pill); background: var(--nb-night); color: var(--nb-text-on-dark);
    font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.2; white-space: nowrap;
  }
  .nb-ph__kopfpille { display: block; position: absolute; top: var(--nb-space-s); left: var(--nb-space-s); }
  .nb-ph__pillen { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); position: absolute; left: var(--nb-space-s); right: var(--nb-space-s); bottom: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
  .nb-ph__figur .nb-pwa__pille:not([hidden]) { display: block; }
}

/* Wahl-Blöcke stehen als eine Folge, 24 px Abstand wie Speicher zu Farbe, zur Bühne und zum Eintausch der Seitenabstand */
.nb-s:has(.nb-ph) { margin-block: var(--nb-space-m); }

@media (max-width: 899px) { .nb-ph .nb-pw { padding: var(--nb-space-2xs) var(--nb-space-s); column-gap: var(--nb-space-xs); } }

/* Prüfung 13.10.2026 (Kowalski und Gestaltung): Der Satz läuft unter den Preis, damit die Zeile am Handy nicht auf drei
   Zeilen wächst. Der Text-Span löst sich ins Raster auf, Kreis und Zeichen stehen über beide Zeilen mittig */
.nb-ph .nb-pw { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kreis titel preis" "kreis unter unter"; row-gap: 2px; }
.nb-ph .nb-pw:has(.nb-ph__zeichen), .nb-ph .nb-pw:has(.nb-pw__farbe) { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "kreis zeichen titel preis" "kreis zeichen unter unter"; }
.nb-ph .nb-pw__text { display: contents; }
.nb-ph .nb-pw__kreis { grid-area: kreis; }
.nb-ph .nb-ph__zeichen, .nb-ph .nb-pw__farbe { grid-area: zeichen; }
.nb-ph .nb-pw__titel { grid-area: titel; }

.nb-ph .nb-pw__preis { grid-area: preis; }
/* Beim Stufenwechsel blendet das Bild in motion-farbe ein, der ink-100-Grund der Figur bleibt stehen (kein Weißblitz) */
.nb-ph__figur img { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
@starting-style { .nb-ph__figur img { opacity: 0; } }

@media (min-width: 900px) { .nb-ph .nb-pw { padding-block: var(--nb-space-xs); } }

/* Ohne Unterzeile eine Reihe, der Titel steht mittig zum Kreis (Speicher gewählt, Farbe) */
.nb-ph .nb-pw:not(:has(.nb-pw__unter)) { grid-template-areas: "kreis titel preis"; }
.nb-ph .nb-pw:not(:has(.nb-pw__unter)):has(.nb-ph__zeichen, .nb-pw__farbe) { grid-template-areas: "kreis zeichen titel preis"; }

/* baukasten/sektionen/pdp-zustand/sektion.css */
/* P2 Auswahl Zustand (Werkstatt pdp, autonome Schleife 11.10.2026). Werte nur als Token. */

.nb-s-pdp-zustand { padding-block: 0; }
.nb-s-pdp-zustand .nb-s-kopf { margin-block-end: var(--nb-space-m); }
.nb-s-pdp-zustand .nb-s-kopf h2 { margin: var(--nb-space-3xs) 0 var(--nb-space-xs); }
.nb-pdp-satz { margin: 0; }

/* Fassung c: eine Karte, Liste links, Befund rechts. Innen ink-100 ohne Schatten (G29), Prüfliste dann weiß */

/* Fassung g, Runde 2 (Daniel 12.10.2026, KRITIK-pdp-2026-10-12.md Bild 6 und 7). Heutige Zustand-Card als Vorlage,
   Zeilen 70 px wie Back Market (_audit/vorbild-bm-pdp/02-zustand-1440.jpg). Ruhend ink-100 in der weißen Karte (G29),
   gewählt weiß mit Night-Ring per box-shadow, kein Rand, kein Höhensprung. */

/* Leiste „Gewählt · Stufe“ mit dem Vergleichs-Knopf */

/* Wahl-Zeile: Radio | Name … Preis / Satz */

/* Vergleichs-Seitenleiste */

/* Gewählt in Sky wie die Wahlkachel (G21, Daniel 13.10.2026), ohne Ring */

/* baukasten/sektionen/pdp-akku/sektion.css */
/* P3 Akku (Werkstatt pdp, autonome Schleife 11.10.2026). Werte nur als Token. */

.nb-s-pdp-akku { padding-block: 0; }
.nb-s-pdp-akku .nb-s-kopf { margin-block-end: var(--nb-space-m); }
.nb-s-pdp-akku .nb-s-kopf h2 { margin: var(--nb-space-3xs) 0 var(--nb-space-xs); }

.nb-pa { display: grid; gap: var(--nb-space-l); padding: var(--nb-space-l); align-items: center; }

@media (max-width: 767px) { .nb-pa { padding: var(--nb-space-m); } }

/* Füllbalken (Fassung b): scaleX bis --wert, einmal beim ersten Sehen. Ohne JS voll */

/* Fassung c: zwei große Kacheln auf dem Grund */

/* baukasten/sektionen/pdp-speicher-farbe/sektion.css */
/* P4 Speicher und Farbe (Werkstatt pdp, autonome Schleife 11.10.2026). Werte nur als Token, Farbpunkte aus den Daten. */

.nb-s-pdp-speicher-farbe { padding-block: 0; }
.nb-s-pdp-speicher-farbe .nb-s-kopf { margin-block-end: var(--nb-space-m); }
.nb-s-pdp-speicher-farbe .nb-s-kopf h2 { margin: var(--nb-space-3xs) 0 var(--nb-space-xs); }

/* 5b-1 (impeccable 1): bei 390 px brachen Titel, Preis und „Gewählt“ in zwei Spalten auf drei Zeilen, darunter einspaltig */

/* Fassung c: Farbflächen */

/* baukasten/sektionen/suchstil/sektion.css */
/* Suchstil, Werkstatt felder Runde 3 vom 27.09.2026. Daniel zu Runde 2: „mit einem scheiß Rahmen drum herum … mach
   den Rahmen weg“. Deshalb keine Fassung mit Rand. Grundform wie Back Market (gemessen 27.09.): graue Pille ink-100 ohne
   Rand und Schatten, 16 px Schrift gegen den Zoom am iPhone. Höhe 48 px im Kopf, 56 px in der Karte.
   Fünf Fassungen, nichts gewählt, bis Daniel „fertig“ sagt:
   A · Linie wie das Eingabefeld, B · Umkehr auf Night, C · Lime-Lupe, D · Vorhang über der Seite (Back Market, Apple),
   E · Neutral: beim Antippen wird die Pille ink-200, sonst nichts. Wechselnde Beispiele als Schalter. */

.nb-su {
  --su-hoehe: 48px;
  position: relative; display: flex; align-items: center; width: 100%; min-width: 0;
}
.nb-su--gross { --su-hoehe: 56px; }
.nb-su__eingabe {
  box-sizing: border-box; flex: 1; width: 100%; height: var(--su-hoehe); margin: 0; padding: 0 48px 0 50px;
  border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-ink-100);
  font: inherit; font-size: var(--nb-t-body-01); color: var(--nb-text-heading); caret-color: var(--nb-text-heading); /* Cursor Night, nie Lila (Daniel 27.09.2026) */
  -webkit-appearance: none; appearance: none; outline: none; box-shadow: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-su__eingabe::-webkit-search-cancel-button { display: none; }
.nb-su--gross .nb-su__eingabe { padding-right: 132px; }
/* Die Lupe ist der Knopf zum Suchen (Daniel 27.09.2026), Trefferfläche 44 px, ohne Fläche. Fokusring nur per Tastatur */
.nb-su__lupe { position: absolute; left: 3px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; transform: translateY(-50%); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-su__lupe:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.nb-su__lupe:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; }
.nb-su--gross .nb-su__lupe { left: 6px; }
.nb-su__lupe svg { width: 20px; height: 20px; }
.nb-su__beispiel { position: absolute; left: 50px; right: 48px; top: 50%; transform: translateY(-50%); font-size: var(--nb-t-body-01); color: var(--nb-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-su--gross .nb-su__beispiel { right: 132px; }
.nb-su__eingabe:is(:focus, :not(:placeholder-shown)) ~ .nb-su__beispiel, .nb-su.is-fokus .nb-su__beispiel { opacity: 0; }
.nb-su__leeren { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; transform: translateY(-50%); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--nb-ink-500); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-farbe); }
.nb-su__leeren svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .nb-su__leeren:hover { color: var(--nb-text-heading); } }
/* Unsichtbar heißt auch nicht per Tab erreichbar, sonst bleibt der Fokus in der leeren Suche hängen */
.nb-su__eingabe:not(:placeholder-shown) ~ .nb-su__leeren { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nb-su--gross .nb-su__leeren { right: 100px; }

/* Nie Rand, outline oder Ring. Zwei Klassen plus Zustand, damit keine globale Fokusregel greift */

@media (hover: hover) and (pointer: fine) { .nb-su .nb-su__eingabe:hover:not(:focus) { background: var(--nb-ink-200); } }
.nb-su .nb-su__eingabe:is(:focus, :focus-visible), .nb-su.is-fokus .nb-su__eingabe { outline: none; box-shadow: none; border: 0; }

/* Wechselnde Beispiele („Suchen nach iPhone 13“), Schalter beispiele an der Seite */
.nb-su__beispiel b { font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); display: inline-block; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-transform) var(--nb-motion-kurve); }

/* ---------- A · Linie, wie das Eingabefeld ---------- */

/* ---------- B · Umkehr ---------- */

/* ---------- C · Lime-Lupe ---------- */

/* ---------- D · Vorhang ---------- */

/* ---------- E · Neutral ---------- */

@media (prefers-reduced-motion: reduce) { .nb-su__eingabe, .nb-su__beispiel, .nb-su__lupe, .nb-su__leeren, .nb-su__linie, .nb-su-vorhang, .nb-su__beispiel b { transition: none !important; } }

/* Schaukasten */

/* baukasten/sektionen/pdp-ankauf/sektion.css */
/* P5 Ankauf als Zeile mit Drawer (Werkstatt pdp, autonome Schleife 11.10.2026). Werte nur als Token.
   Drawer nach kasse-drawer/sektion.css, Ebene schublade aus tokens.json (199 und 200). */

.nb-s-pdp-ankauf { padding-block: 0; }

/* Zeile: weiße Karte, Zeichen in ink-100 (Umkehr K1), Text, rechts Wahl oder Pfeil */
.nb-pak { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--nb-space-s); align-items: center; padding: var(--nb-space-m) var(--nb-space-l); color: var(--nb-text-body); text-decoration: none; }

/* a · Ja und Nein als zwei Knöpfe, gedrückt in Night (ohne Blau, G21), Druck nur Farbe */

/* Gewählter Knopf hat keinen Hover, im Druck hebt sich die Night-Fläche wie am Tausch-Knopf (5b-2b M5) */

/* b · ganze Zeile als Knopf. Hover hebt den Schatten (sh-ruht zu sh-hoch), der Pfeil fährt 4 px */

/* c · Karte mit Überschrift und Lime-Marker (Grundwert wie kern/karte.css .nb-s-angebot__mk), Fakten mit Haken */

.nb-pak .nb-s-angebot__mk { margin-inline: -4px; padding: 0 6px; border-radius: var(--nb-radius-badge); background: var(--nb-lime); color: var(--nb-night); white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nb-pak .nb-s-angebot__mk.nb-m-marker { background: linear-gradient(var(--nb-lime), var(--nb-lime)) 0 0 / 0% 100% no-repeat; }
.nb-pak .nb-s-angebot__mk.nb-m-marker.nb-m-da { background-size: 100% 100%; }

@media (max-width: 767px) {
  .nb-pak { padding: var(--nb-space-m); }
  
  
  
  
}

/* ---------- Drawer ---------- */

/* Übergang statt Keyframes: ein Klick mitten im Schließen dreht die Schublade von der Stelle aus um, statt neu zu
   starten (5b, review-animations Fund 1). Der Startwert beim Einblenden kommt aus @starting-style */
@starting-style { .nb-pak-schirm { opacity: 0; } .nb-pak-lade { transform: translateX(100%); } }

/* Schritte in ink-100 auf der weißen Schublade (Umkehr K1), Ziffer Night */

/* Handy: Blatt von unten nach den Token blatt (14.10.2026) */
@media (max-width: 767px) {
  
  @starting-style { .nb-pak-lade { transform: translateY(100%); } }
  
}

/* Reduzierte Bewegung: nur Deckkraft, kein Weg */
@media (prefers-reduced-motion: reduce) {
  
  @starting-style { .nb-pak-lade { transform: none; opacity: 0; } }
  
  
}

/* Eintausch noch nicht buchbar (Zustand eintausch-bald, Export JTL 5b, 16.10.2026): Spur weg-b baut die Übergabe in den Korb.
   Ausgegraut nach dem Muster „Geschlossen“ der Verkaufen-Kacheln (nb-verkaufen.css, Daniel 14.10.2026): Bild entsättigt und
   zurückgenommen, Titel leiser, Pille „Kommt bald“ oben links im Bild (m-merkmal, komponenten-global §1). Suche, „So geht’s“
   und die Wahl sind inert und genauso zurückgenommen wie das Bild */
.nb-pak-b--bald .nb-pwa__figur { position: relative; }
.nb-pak-b--bald .nb-pwa__figur img { filter: grayscale(1); opacity: .45; }
.nb-pak-b--bald .nb-pwa__kopf h2, .nb-pak-b--bald .nb-pwa__kopf h2 em { color: var(--nb-text-muted); }
.nb-pak-b--bald [inert] { filter: grayscale(1); opacity: .45; }
.nb-pak-b__bald { position: absolute; top: var(--nb-space-s); left: var(--nb-space-s); display: inline-flex; align-items: center; height: 24px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-stage); color: var(--nb-text-on-stage); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1; white-space: nowrap; }
@media (max-width: 767px) { .nb-pak-b__bald { top: var(--nb-space-xs); left: var(--nb-space-xs); } }

/* baukasten/sektionen/pdp-uebersicht/sektion.css */
/* Übersicht mit Kaufknopf (Werkstatt pdp 12.10.2026, Daniel Punkt 6 und 7). Werte nur als Token.
   Galerie, Preis und Knopf aus pdp-buehne, Zahlinfo aus kasse-korb-summe, Schubladen aus kern/pdp-lade.css. */

.nb-pue { display: grid; }

.nb-pue__kauf { display: grid; align-content: start; gap: var(--nb-space-m); min-width: 0; }

.nb-pue__kaufen { display: grid; }

/* ---------- Chips der Wahl ---------- */
/* In der weißen Karte ink-100 ohne Rand und Schatten (Umkehr G29). Zeigen unterstreicht, Druck färbt ink-200 */

.nb-pue-chip {
  display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 44px; padding: 0 var(--nb-space-s);
  border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); color: var(--nb-text-heading);
  font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); cursor: pointer; -webkit-tap-highlight-color: transparent;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
@media (hover: hover) and (pointer: fine) { .nb-pue-chip:hover { text-decoration-color: currentColor; } }
.nb-pue-chip:active { background: var(--nb-ink-200); transition-duration: var(--nb-motion-druck, 100ms); }
.nb-pue-chip:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-pue-chip__punkt { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--farbe); box-shadow: inset 0 0 0 1px var(--nb-alpha-decorative); }

/* ---------- Rabatt (Zustand rabatt) ---------- */

/* ---------- Fassung c: kleines Foto neben dem Titel ---------- */

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

/* baukasten/sektionen/pdp-details/sektion.css */
/* P6 Klapplisten (Werkstatt pdp, autonome Schleife 11.10.2026, Schritt 4b-2). Werte nur als Token.
   Klapp-Muster wie Cookie-Fenster (Fassung C, Daniel 09.10.2026): kein Höhen-Animieren, Inhalt blendet über opacity
   und einen kurzen Weg nach unten ein (@starting-style), schließt in akkordeon-zu per display allow-discrete.
   Keine Haarlinie (design-kurz Nr. 4): Listen sind Karten (a, b) oder ink-100-Zeilen in einer Karte (c, Umkehr G29). */

/* ---------- Anordnung je Fassung ---------- */

/* ---------- Klappliste ---------- */
.nb-pd-klapp { border-width: 0; transition: box-shadow var(--nb-motion-rand) var(--nb-motion-kurve); }

.nb-pd-klapp__kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--nb-space-s);
  width: 100%; min-height: 60px; padding: var(--nb-space-s) var(--nb-space-l); box-sizing: border-box;
  border: 0; border-radius: var(--nb-radius-card); background: transparent; color: var(--nb-text-heading); font: inherit; text-align: start;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-pd-klapp__titel { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; }
.nb-pd-klapp__pfeil { display: grid; place-items: center; width: 24px; height: 24px; grid-column: 3; }
.nb-pd-klapp__pfeil svg { width: 22px; height: 22px; transition: transform var(--nb-motion-akkordeon-zu) var(--nb-motion-kurve-bewegung); }
.nb-pd-klapp__kopf[aria-expanded="true"] .nb-pd-klapp__pfeil svg { transform: rotate(180deg); transition: transform var(--nb-motion-akkordeon-auf) var(--nb-motion-kurve-bewegung); }
.nb-pd-klapp__kopf:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }

/* Hover nur mit Maus: die Karte hebt sich über den Schatten (G28). Druck nur Farbe, sofort (Nr. 12) */
@media (hover: hover) and (pointer: fine) {
  .nb-pd-klapp.nb-s-karte:has(.nb-pd-klapp__kopf:hover) { box-shadow: var(--nb-sh-hoch); }
}
.nb-pd-klapp__kopf:active { background-color: var(--nb-ink-100); transition-duration: var(--nb-motion-druck); }

/* Inhalt: auf 300 ms, zu 200 ms, dann display none */

@starting-style { .nb-pd-klapp__inhalt { opacity: 0; transform: translateY(calc(var(--nb-space-3xs) * -1)); } }

/* Per Tastatur geöffnet oder bei reduzierter Bewegung: ohne Weg und ohne Dauer (Nr. 13) */
/* Pfeil-Selektor so spezifisch wie die Drehregel, sonst gewinnt deren Dauer */
.nb-pd-still .nb-pd-klapp__inhalt, .nb-pd-still .nb-pd-klapp__inhalt[hidden], .nb-pd-still .nb-pd-klapp__kopf .nb-pd-klapp__pfeil svg { transition: none; }
@media (prefers-reduced-motion: reduce) {
  
  @starting-style { .nb-pd-klapp__inhalt { transform: none; } }
  .nb-pd-klapp__pfeil svg, .nb-pd-klapp__kopf[aria-expanded="true"] .nb-pd-klapp__pfeil svg { transition: none; }
}
/* Ohne Skript steht alles offen, der Pfeil fällt weg */
@media (scripting: none) {
  
  .nb-pd-klapp__pfeil { display: none; }
}

/* ---------- Technik: Gruppen als ink-100-Flächen in der weißen Karte (Umkehr G29) ---------- */

/* ---------- Lieferumfang, Garantie, Fragen ---------- */

/* ---------- b · Technik offen ---------- */

/* ---------- c · eine Karte, Zeilen ink-100, Kernantwort als Pille im Kopf ---------- */

.nb-pd-klapp--zeile { border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-pd-klapp--zeile .nb-pd-klapp__kopf { padding-inline: var(--nb-space-m); border-radius: var(--nb-radius-input); }

@media (hover: hover) and (pointer: fine) { .nb-pd-klapp--zeile .nb-pd-klapp__kopf:hover { background-color: var(--nb-ink-200); } }
.nb-pd-klapp--zeile .nb-pd-klapp__kopf:active { background-color: var(--nb-ink-200); }
/* In der grauen Zeile kehren die inneren Flächen um: weiß (G29) */

@media (max-width: 767px) {
  .nb-pd-klapp__kopf { padding-inline: var(--nb-space-m); }
  
  
  /* Pille unter den Titel, Pfeil bleibt rechts oben */
  
  
  
  .nb-pd-klapp--zeile .nb-pd-klapp__kopf, .nb-pd-klapp--zeile .nb-pd-klapp__inhalt { padding-inline: var(--nb-space-s); }
  
}

/* ---------- D (14.10.2026): wie Back Market direkt unter der Übersicht ----------
   Weiße Karte ohne Rand, links Lieferumfang als Chips, rechts drei graue Zeilen, die ein Fenster öffnen (G29, G57) */
.nb-pdd { display: grid; gap: var(--nb-space-l); padding: var(--nb-space-l); border-width: 0; }
@media (min-width: 1024px) { .nb-pdd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--nb-space-xl); align-items: start; } }
.nb-pdd__titel { margin: 0 0 var(--nb-space-xs); font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-pdd__chips { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; }
.nb-pdd__chip {
  display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 36px; padding: 0 var(--nb-space-s);
  border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); color: var(--nb-text-heading);
  font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.3;
}
.nb-pdd__chipzeichen { display: grid; place-items: center; }
.nb-pdd__chipzeichen svg { width: 20px; height: 20px; }
.nb-pdd__link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--nb-space-2xs); padding: 0; border: 0; background: transparent;
  color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
@media (hover: hover) and (pointer: fine) { .nb-pdd__link:hover { text-decoration-thickness: 2px; } }
.nb-pdd__link:active { color: var(--nb-text-body); transition-duration: var(--nb-motion-druck); }
.nb-pdd__link:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 2px; }
.nb-pdd__zeilen { display: grid; gap: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; }
/* Pfeil nach rechts dreht nicht, das Fenster zeigt den Zustand */
.nb-pdd .nb-pd-klapp__kopf[aria-expanded="true"] .nb-pd-klapp__pfeil svg { transform: none; }
@media (max-width: 767px) { .nb-pdd { padding: var(--nb-space-m); gap: var(--nb-space-m); } }
/* Handy: beide Chips in einer Zeile ab 360 px */
@media (max-width: 767px) { .nb-pdd__chips { gap: var(--nb-space-2xs); } .nb-pdd__chip { gap: var(--nb-space-3xs); padding: 0 var(--nb-space-xs); } }

/* ---------- Fenster der Fassung D (14.10.2026, KRITIK-pdp-2026-10-14-fenster.md) ----------
   Sprache der Schubladen oben (.nb-pbd, kern/pdp-b.css). Hier nur Steckbrief, Wertekarten und Fragen */
.nb-pdt__steckbrief b.nb-pdt__wert { font-size: var(--nb-t-heading-03); line-height: 1.2; }
.nb-pdt__steckbrief li span { color: var(--nb-text-heading); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-pdt__karte { display: grid; gap: var(--nb-space-3xs); margin: 0; padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-pdt__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nb-space-s); min-height: 32px; }
.nb-pdt__zeile dt { font-size: var(--nb-t-body-01); line-height: 1.4; color: var(--nb-text-body); }
.nb-pdt__zeile dd { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); text-align: end; }

/* OHNEJS resilienz-pruefer 16.10.2026: Die Klappköpfe tragen die Überschrift und bleiben, ohne Zeiger. „Was nicht dabei
   ist“ öffnet nur mit Skript ein Fenster und fällt weg. Am Ende der Datei, sonst überstimmt .nb-pdd__link das display */
@media (scripting: none) {
  .nb-pd-klapp__kopf { cursor: default; }
  .nb-pdd__link { display: none; }
}

/* baukasten/sektionen/pdp-beweis/sektion.css */
/* P5 Beweis-Band (Werkstatt pdp, autonome Schleife 11.10.2026). Muster sektionen/ablauf: das eine dunkle Band.
   Werte nur als Token. Ziffern display-02 in on-dark-accent (Lime auf Night), kein Rollwerk. */

.nb-s.nb-s-pdp-beweis { background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-s-pdp-beweis .nb-pb__kopf { margin-block-end: var(--nb-space-l); }
.nb-v3 .nb-s-pdp-beweis h2, .nb-s-pdp-beweis h2 { margin: var(--nb-space-3xs) 0 var(--nb-space-xs); color: var(--nb-text-on-dark); }
.nb-s-pdp-beweis .nb-pdp-dach { color: var(--nb-text-on-dark-muted); }
.nb-v3 .nb-s-pdp-beweis .nb-s-kopf p.nb-pdp-satz, .nb-s-pdp-beweis .nb-pdp-satz { color: var(--nb-text-on-dark-muted); }

.nb-pb__raster { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-pb__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .nb-pb__raster:not(.nb-pb__raster--zwei) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 14.10.2026 abends: drei Karten statt vier (Prüfschritt-Zahl raus). Bleibt im Zweier-Raster eine allein, nimmt sie die Breite */
.nb-pb__raster--zwei > :last-child:nth-child(odd) { grid-column: 1 / -1; }

.nb-pb__karte { display: grid; align-content: start; gap: var(--nb-space-2xs); padding: var(--nb-space-l); border-radius: var(--nb-radius-card); background: var(--nb-surface-dark-raised); }
.nb-pb__zahl { display: flex; align-items: baseline; gap: var(--nb-space-2xs); font-size: var(--nb-t-display-02); font-weight: var(--nb-weight-semibold); line-height: 1; letter-spacing: -0.03em; color: var(--nb-text-on-dark-accent); font-variant-numeric: tabular-nums; }
.nb-pb__einheit { font-size: var(--nb-t-heading-02); letter-spacing: 0; }
.nb-pb__titel { margin: var(--nb-space-xs) 0 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-on-dark); }
.nb-pb__text { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-on-dark-muted); }
.nb-pb__link { position: relative; color: var(--nb-text-on-dark-link); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-underline-offset: 3px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-pb__link:hover { color: var(--nb-text-on-dark); } }
/* Druck eine Stufe unter Hover, vorher gleich Hover (5b-2b M5) */
.nb-pb__link:active { color: var(--nb-text-on-dark-muted); transition-duration: var(--nb-motion-druck); }
/* 5b-1 (design-auditor B): Inline-Link im Fließtext hatte 22 px Höhe, Trefferfläche jetzt 44 px ohne Layoutwechsel */
.nb-pb__link::before { content: ''; position: absolute; inset: 50% -6px auto; height: 44px; transform: translateY(-50%); }
.nb-pb__link:focus-visible { outline: 2px solid var(--nb-text-on-dark); outline-offset: 3px; border-radius: 2px; }

/* b · geteilt: links Kopf und Siegel, rechts zwei mal zwei */
.nb-pb__geteilt { display: grid; gap: var(--nb-space-l); }
@media (min-width: 1100px) { .nb-pb__geteilt { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.nb-pb__links { display: grid; gap: var(--nb-space-m); justify-items: start; }
.nb-pb__links .nb-pb__kopf { margin-block-end: 0; }
.nb-pb__siegel { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--nb-text-on-dark-accent); color: var(--nb-text-on-lime); border: 2px solid var(--nb-text-on-lime); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; text-align: center; transform: rotate(-8deg); }

/* c · Leiste der drei Belege, darunter die Schritte */

/* 5b-1 (impeccable 8): bei 390 px standen vier Karten je rund 190 px hoch übereinander. Jetzt Ziffer links in fester Spalte,
   Titel und Satz rechts, die Einheit unter der Ziffer. Gleiche Spaltenbreite hält die linke Kante der Titel (G12) */
@media (max-width: 767px) {
  .nb-pb__karte { padding: var(--nb-space-m); }
  .nb-pb__karte { grid-template-columns: 76px minmax(0, 1fr); column-gap: var(--nb-space-s); row-gap: var(--nb-space-3xs); }
  .nb-pb__karte > .nb-pb__zahl { grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; gap: var(--nb-space-3xs); }
  .nb-pb__karte > .nb-pb__titel { margin-top: 0; }
  .nb-pb__siegel { display: none; }
}

/* D (14.10.2026): Zahl und Wort. Zwei Spalten am Handy, die dritte Karte über die Breite, drei ab 768 px. Die Handy-Regel oben (Ziffer links) gilt
   hier nicht, die Karte steht als Spalte */

/* zustands-pruefer 14.10.2026: der Link „Garantiebedingungen“ ragte bei 360 px 39 px in die Nachbarkarte. Er bricht jetzt um,
   und jede Reihe ist gleich hoch, weil die Karten über das Raster gestreckt werden */

/* B mit Schweif (Daniel 14.10.2026 abends: „bau den Schweif auf Basis von B, für mobile optimieren, beim Siegel mehr Mühe,
   auch bei der Positionierung“). Vorbild ist das Ablauf-Band auf /verkaufen: Schweif aus Elements_1 gespiegelt, das
   Siegel sitzt als Stempel auf ihm, nie frei im Band. Bauteil kern/schweif.mjs, Token schweif. */
.nb-s.nb-s-pdp-beweis--b { position: relative; overflow: hidden; }
.nb-s-pdp-beweis--b .nb-pb__geteilt { position: relative; z-index: 1; }
/* Handy und Tablet: Siegel rechts neben dem Kopf wie auf /verkaufen, der Schweif läuft oben rechts aus dem Band */
/* -60 % statt -54 % wie im Ablauf: bei -54 % stand die gerade Kappe 5 px im Band (design-auditor B), bei -57 % lag die Wendung halb unter dem Siegel wie ein zweiter Kreis. Bei -60 % sind beide Strichenden von 360 bis 767 px verdeckt (gemessen 14.10.2026 abends) */
.nb-pb__schweif { right: -60%; top: -2%; width: 168%; transform: scaleX(-1); }
@media (max-width: 1099px) {
  .nb-s-pdp-beweis--b .nb-pb__links { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-m); }
  .nb-s-pdp-beweis--b .nb-pb__siegel { display: grid; }
}
/* Rechner: der Schweif kommt unten aus der Mitte und läuft hinter den Karten nach oben rechts. Das Siegel sitzt auf der
   oberen rechten Ecke der Karten, zur Hälfte über der Kante, genau dort, wo der Schweif die Ecke kreuzt */
@media (min-width: 1100px) {
  .nb-pb__schweif { right: -22%; top: auto; bottom: -8%; width: min(80%, 1400px); }
  .nb-s-pdp-beweis--b .nb-pb__geteilt { align-items: center; }
  /* Am Rechner größer als die 88 px am Handy, sonst geht der Stempel neben drei Karten unter. Mitte auf der Ecke */
  .nb-s-pdp-beweis--b .nb-pb__siegel { --pb-siegel: 112px; position: absolute; z-index: 2; top: calc(var(--pb-siegel) / -2); right: calc(var(--pb-siegel) / -2); width: var(--pb-siegel); height: var(--pb-siegel); font-size: var(--nb-t-body-02); }
}
/* Handy: drei kurze Zeilen, Zahl und Einheit in einer Zeile links in fester Spalte, rechts das Wort. Der Satz entfällt
   (Textmenge G57), der Link zu den Garantiebedingungen bleibt */
/* Bis 1327 px ist der Seitenrand nur 48 px breit, bei -56 px fehlten bei 1100 px 8 px vom Ring (design-auditor B 14.10.2026) */
@media (min-width: 1100px) and (max-width: 1327px) {
  .nb-s-pdp-beweis--b .nb-pb__siegel { right: calc(var(--nb-space-2xs) - var(--nb-space-xl)); }
}
/* 360 bis 429 px: Der Schweif wächst mit der Breite, das Siegel nicht. Die Wendung wandert je px Breite 0,24 px nach links und
   0,51 px nach unten unter dem Siegel hervor und stand dort halb sichtbar wie ein zweiter Kreis. Das Siegel folgt ihr bis 429 px,
   ab 430 px liegt die Wendung frei als Bogen unter dem Siegel, ab 480 px sitzt es auf dem Strang (gemessen 14.10.2026 abends,
   ohne Berührung von Text und Karten) */
@media (max-width: 429px) {
  .nb-s-pdp-beweis--b .nb-pb__siegel { translate: calc((360px - 100vw) * .2424) calc((100vw - 360px) * .511); }
}
@media (max-width: 767px) {
  .nb-s-pdp-beweis--b .nb-pb__raster { gap: var(--nb-space-2xs); }
  .nb-s-pdp-beweis--b .nb-pb__karte { align-content: center; align-items: center; row-gap: var(--nb-space-3xs); padding: var(--nb-space-s) var(--nb-space-m); }
  .nb-s-pdp-beweis--b .nb-pb__karte > .nb-pb__zahl { flex-direction: row; align-items: baseline; gap: var(--nb-space-3xs); }
  .nb-s-pdp-beweis--b .nb-pb__karte > .nb-pb__titel { margin: 0; }
  .nb-s-pdp-beweis--b .nb-pb__satz { display: none; }
  .nb-s-pdp-beweis--b .nb-pb__text:not(:has(a)) { display: none; }
  .nb-s-pdp-beweis--b .nb-pb__karte:not(:has(a)) > .nb-pb__zahl { grid-row: auto; }
}

/* Zahlenspalte am Handy so breit wie die breiteste Zahl („85–100 %“), alle Titel auf einer Kante. Vorher fest 76 bzw. 104 px,
   bei 600 px brach „85–100“ um und das % stand allein (Messung 14.10.2026 abends). Subgrid hält die Spalte über alle Karten */
@media (max-width: 767px) {
  .nb-s-pdp-beweis--a .nb-pb__raster, .nb-s-pdp-beweis--b .nb-pb__raster { grid-template-columns: max-content minmax(0, 1fr); }
  .nb-s-pdp-beweis--a .nb-pb__karte, .nb-s-pdp-beweis--b .nb-pb__karte { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .nb-s-pdp-beweis--a .nb-pb__zahl, .nb-s-pdp-beweis--b .nb-pb__zahl { white-space: nowrap; }
  /* 320 px (WCAG 1.4.10): „Garantiebedingungen“ ist breiter als die Spalte neben „85–100 %“ und bricht deshalb um */
  .nb-s-pdp-beweis--a .nb-pb__text, .nb-s-pdp-beweis--b .nb-pb__text { overflow-wrap: anywhere; hyphens: auto; }
}

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

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

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

/* 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); }
.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-duration: 0s; 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; }

/* 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); }
.nb-pk--b .nb-pk__preis { margin-top: auto; padding-top: var(--nb-space-2xs); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 /* OE 94 Punkt 6 */

/* baukasten/sektionen/empfehlungen/sektion.css */
/* „Das könnte dir auch gefallen“ (14.10.2026). Werte nur als Token. Karte b aus kern/karte.css, hier nur Kopf, Spur,
   Raster, Pfeile und Reiter. Pfeile wie .nb-pgn__pfeil der Produktseite in der hellen Fassung (G1) */
.nb-emp { display: grid; gap: var(--nb-space-m); min-width: 0; }
.nb-emp__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); }
.nb-v3 .nb-emp__titel, .nb-emp__titel { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; letter-spacing: -0.01em; color: var(--nb-text-heading); }

/* Spur: wischen mit Einrasten, Schatten der Karten bleiben sichtbar (Polster oben und unten) */
.nb-emp__spur {
  display: flex; gap: var(--nb-space-m); margin: calc(-1 * var(--nb-space-2xs)) 0; padding: var(--nb-space-2xs) 0 var(--nb-space-s);
  list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.nb-emp__spur::-webkit-scrollbar { display: none; }
.nb-emp__spur > li { display: flex; flex: 0 0 calc((100% - 3 * var(--nb-space-m)) / 4); min-width: 0; scroll-snap-align: start; }
.nb-emp__spur > li[hidden] { display: none; }
.nb-emp__spur .nb-pk, .nb-emp__raster .nb-pk { flex: 1; }
@media (max-width: 1099px) { .nb-emp__spur > li { flex-basis: calc((100% - 2 * var(--nb-space-m)) / 2.4); } }
@media (max-width: 767px) {
  .nb-emp__spur { gap: var(--nb-space-xs); }
  /* 2,3 Karten im Bild, die dritte angeschnitten zeigt das Wischen an (zustands-pruefer 14.10.2026) */
  .nb-emp__spur > li { flex-basis: calc((100% - var(--nb-space-xs)) / 1.6); }
}

/* Raster b: vier in M, am Handy als Spur */

/* Der Grund sitzt im Pillen-Behälter der Karte (karte.css .nb-pk__pillen), keine eigene Lage */

/* Pfeile nur mit Maus, am Handy wischt man */
.nb-emp__pfeile { display: flex; gap: var(--nb-space-2xs); }
.nb-emp__pfeil {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--nb-surface-page); color: var(--nb-text-heading); box-shadow: var(--nb-sh-ruht); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), opacity var(--nb-motion-farbe) var(--nb-motion-kurve), box-shadow var(--nb-motion-rand) var(--nb-motion-kurve);
}
.nb-emp__pfeil svg { width: 20px; height: 20px; }
.nb-emp__pfeil--weiter svg { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .nb-emp__pfeil:hover:not([aria-disabled="true"]) { box-shadow: var(--nb-sh-hoch); } }
.nb-emp__pfeil:active:not([aria-disabled="true"]) { background: var(--nb-ink-100); transition-duration: var(--nb-motion-druck); }
.nb-emp__pfeil:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; }
.nb-emp__pfeil[aria-disabled="true"] { opacity: 0.4; cursor: default; }
@media (hover: none), (pointer: coarse) { .nb-emp__pfeile { display: none; } }
/* OHNEJS resilienz-pruefer 16.10.2026: die Pfeile blättern nur mit Skript, die Reihe rollt auch so */
@media (scripting: none) { .nb-emp__pfeile { display: none; } }

/* Reiter c: Pillen wie die Wahl-Chips, gewählt Night gefüllt */
/* Polster rundum, damit der Fokusring (2 px plus 3 px Abstand) im Rollbereich nicht abgeschnitten wird */

/* Die Bühne hat kein eigenes Maß (Foto absolut), in der Spalte der Karte also strecken, sonst 0 px breit */
.nb-emp .nb-pk--b .nb-pk__buehne { align-self: stretch; flex: none; }

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

.nb-kr { display: block; }

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

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

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

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

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

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

 /* OE 94 Punkt 6 */

/* Weitere Modelle anzeigen, mit Zähler und Fortschritt (ux U4.1) */
.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); }
@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, ohne Schrumpfen (druck-scale 1 seit 11.10.2026, das leere scale ist
   seit PDP 5b raus, review-animations Fund 10). Hover nur mit Maus (Fund 11). Weißer Knopf wechselt den Schatten, Night-Knopf wird heller
   (dark-surface, farbsystem.md:381) */
.nb-kr__knopf:active { transition-duration: 0s; box-shadow: var(--nb-sh-hoch); }
.nb-kr__knopf--haupt:active { background: var(--nb-surface-dark-raised); box-shadow: none; }
.nb-kr__knopf[hidden] { display: none; }

/* Seitenzahlen (Schalter laden: seiten) */

 /* OE 94 Punkt 6 */

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

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

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

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

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

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

/* baukasten/sektionen/pdp-stimmen/sektion.css */
/* P7 Bewertungen (Werkstatt pdp, autonome Schleife 11.10.2026, Schritt 4b-3). Werte nur als Token.
   Karte, Note, „Weitere“ und Prüfung kommen aus sektionen/bewertungen (Fassung c der Kategorie, G1). Hier nur Kopf und
   die Anordnung der Fassungen b und c. Keine Haarlinie, Karten K1 weiß mit sh-ruht. */

.nb-pst__kopf { margin-block-end: var(--nb-space-m); }
.nb-pst__kopf h2 { margin: var(--nb-space-3xs) 0 var(--nb-space-xs); }
.nb-pst__kopf .nb-pdp-satz { margin: 0; max-width: var(--nb-measure, 65ch); }

/* ---------- b: Note quer, drei Karten in einer Reihe ---------- */

/* Handy: die Karten wischen seitlich, Schatten bleiben sichtbar (Polster oben und unten) */

/* ---------- c: eine Stimme groß, Note daneben ---------- */

/* Die große Stimme: Text heading-02 Semibold, ein Anker statt einer Liste (G39) */

/* ---------- d (14.10.2026, OE 129): kleine Schrift Night Semibold statt grau 400 ---------- */
.nb-pst--d .nb-bw__notesatz, .nb-pst--d .nb-bw__kurz, .nb-pst--d .nb-bw__meta, .nb-pst--d .nb-bw__dname { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }
.nb-pst-d__pruef {
  display: inline; padding: 0; border: 0; background: transparent; color: var(--nb-text-heading); font: inherit; font-weight: var(--nb-weight-semibold);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative;
  transition: color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
/* Trefferfläche 44 px ohne Größe im Text */
.nb-pst-d__pruef::before { content: ''; position: absolute; inset: 50% -4px auto; height: 44px; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .nb-pst-d__pruef:hover { text-decoration-thickness: 2px; } }
.nb-pst-d__pruef:active { color: var(--nb-text-body); transition-duration: var(--nb-motion-druck); }
.nb-pst-d__pruef:focus-visible { outline: 2px solid var(--nb-night); outline-offset: 3px; border-radius: 2px; }
.nb-pst-d__pruefsatz { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }

/* OHNEJS resilienz-pruefer 16.10.2026: „So prüfen wir Bewertungen“, „Hilfreich“ und „Weitere Bewertungen anzeigen“
   wirken nur mit Skript. Ohne stehen sie nicht da, die ersten Bewertungen bleiben (Muster der Kategorie) */
@media (scripting: none) {
  .nb-pst-d__pruef, [data-nb-slot="pdp-stimmen"] :is(.nb-bw__hilfreich, .nb-kr__knopf--haupt) { display: none; }
}

/* baukasten/sektionen/pdp-abschluss/sektion.css */
/* P8 Abschluss (Werkstatt pdp, autonome Schleife 11.10.2026, Schritt 4b-3). Werte nur als Token.
   Streifen am Ende: weiße Karte K1 (a, c) oder Fläche der Aktionsleiste (b). Knopf ist .nb-pdp-kauf aus der Bühne (G1).
   Feste Leiste nur bis 1099 px, hängt per Skript an body. Rein über transform in motion-transform, raus schneller in
   motion-fenster-aus (design-kurz Nr. 13), per Tastatur und bei reduzierter Bewegung ohne Bewegung (.is-still).
   visibility läuft nur als Schalter mit, damit die verborgene Leiste weder Fokus noch Klick fängt. */

.nb-pab { display: grid; }

/* ---------- Streifen ---------- */

.nb-pab__preis { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--nb-space-xs); }
.nb-pab__betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-pab__neu { font-size: var(--nb-t-body-02); color: var(--nb-ink-600); white-space: nowrap; }
.nb-pab__neu s { text-decoration-thickness: 1px; }
.nb-pab__knopf--aus { text-decoration: none; }

/* Gerätebild (c): in der weißen Karte ink-100 ohne Schatten (Umkehr G29) */

/* ---------- b: dunkel, Knopf in Lime (Token action-bar, Bruch Nr. 18) ---------- */

/* Night-Linie wäre auf Night unsichtbar, auf der dunklen Fläche ist sie hell */

/* ---------- Feste Leiste, nur bis 1099 px ---------- */
.nb-pab-fest { display: none; }
@media (max-width: 1099px) {
  .nb-pab-fest {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    transform: translateY(110%); visibility: hidden; pointer-events: none;
    transition: transform var(--nb-motion-fenster-aus) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-fenster-aus);
  }
  .nb-pab-fest.is-da {
    transform: none; visibility: visible; pointer-events: auto;
    transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), visibility 0s linear 0s;
  }
  .nb-pab-fest.is-still { transition: none; }
  .nb-pab-fest__innen { display: flex; align-items: center; gap: var(--nb-space-s); }
  .nb-pab-fest__text { display: grid; gap: var(--nb-space-3xs); flex: 1 1 auto; min-width: 0; }
  .nb-pab-fest .nb-pab__preis { flex-wrap: nowrap; }
  .nb-pab-fest .nb-pab__betrag { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.2; color: var(--nb-text-heading); }
  
  .nb-pab-fest .nb-pdp-kauf { flex: none; width: auto; min-height: 48px; padding: 0 var(--nb-space-m); }
  /* E (Daniel 14.10.2026): keine Merkmale in der Leiste, Preis in PDP-Größe (price-01 am Handy 20 px), darunter
     „vor Eintausch“ in Semibold 16 px */
  .nb-pab-fest--gross .nb-pab__betrag { font-size: var(--nb-t-price-01); letter-spacing: -0.03em; line-height: 1.1; }
  .nb-pab-fest--gross .nb-pab__vor { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-body); }

  /* a: weiße Karte schwebt 8 px über dem Rand */
  .nb-pab-fest--a, .nb-pab-fest--c { padding: 0 var(--nb-space-2xs) calc(var(--nb-space-2xs) + env(safe-area-inset-bottom)); }
  .nb-pab-fest--a .nb-pab-fest__innen { padding: var(--nb-space-xs) var(--nb-space-xs) var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt); }
  /* b: bündig am Rand, Fläche der Aktionsleiste */
  
  /* c: Pille, höchstens 520 px, mittig */
  

  /* Kein Platz unten am body: die Leiste ist ab dem Streifen am Ende weg, der Platz stand am iPhone als weißer Streifen
     unter dem dunklen Fuß (Simulator iPhone 17, 14.10.2026). Fokus und Sprungziele hält scroll-padding über der Leiste */
  /* scroll-padding am html setzt VERHALTEN aus der gemessenen Leistenhöhe. Die Token hängen an .nb-v3, am html sind sie
     leer und die Regel fiel auf auto zurück (5b-2b H5) */
}
/* Unter 380 px brach „vor Eintausch“ in der Leiste auf zwei Zeilen (gemessen 17.10.2026 bei 320 und 360). Die Zeile bleibt
   einzeilig, der Knopf gibt Innenabstand ab und bricht bei 320 px notfalls selbst um */
.nb-pab__vor { white-space: nowrap; }
@media (max-width: 379px) {
  .nb-pab-fest .nb-pdp-kauf { flex: 0 1 auto; min-width: 0; padding: var(--nb-space-3xs) var(--nb-space-s); text-align: center; line-height: 1.25; }
  .nb-pab-fest__text { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .nb-pab-fest, .nb-pab-fest.is-da, .nb-pab__aendern { transition: none; } }

/* ---------- F (Daniel 14.10.2026): Maße wie E (Daniel: „vorher war sie cooler, sleeker“), dazu Rabatt, Kopfleiste und
   Fortschrittslinie. Werte design-auditor A vom 14.10.2026. Mit Rabatt Preis und „statt“ in mint-ink (komponenten-global.md
   §2), Spar-Pille aus pdp-b.css */
.nb-pab__unter { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-3xs) var(--nb-space-2xs); }
@media (max-width: 1099px) {
  .nb-pab-fest--f .nb-pab__preis { flex-wrap: wrap; gap: 0 var(--nb-space-2xs); }
  .nb-pab-fest--f .nb-pab__preis--rabatt .nb-pab__betrag { color: var(--nb-mint-ink); }
  .nb-pab-fest--f .nb-pbp__statt { font-size: var(--nb-t-body-02); }
}

/* Ab der Auswahl ist die Kopfleiste der Kopf (Daniel 14.10.2026), wie nb-kf-kopfaus auf der Kategorie. Mit Tastatur im
   Kopf kommt er zurück */
@media (max-width: 1099px) {
  html.nb-pkl-kopfaus .nb-announcement-section { transform: translateY(-100%); }
  html.nb-pkl-kopfaus .nb-kopf-bereich { transform: translateY(calc(-100% - 40px)); }
  html.nb-pkl-kopfaus .nb-kopf-bereich:focus-within { transform: none; }
}
@media (max-width: 860px) { html.nb-pkl-kopfaus .nb-kopf-bereich { transform: translateY(-100%); } }

/* Leiste oben am Rechner ohne Gerätebild (Daniel 14.10.2026: „dort sollte kein Produktfoto drin sein“) */
.nb-pob--f { overflow: hidden; }
.nb-pob--f .nb-pob__innen { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: var(--nb-space-m); padding-bottom: calc(var(--nb-space-xs) + 4px); }
.nb-pob--f .nb-pob__preis { display: flex; align-items: center; gap: var(--nb-space-xs); }
.nb-pob--f .nb-pab__preis { flex-wrap: nowrap; }
.nb-pob--f .nb-pab__betrag { font-size: var(--nb-t-price-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-pob--f .nb-pab__preis--rabatt .nb-pab__betrag { color: var(--nb-mint-ink); }
.nb-pob--f .nb-pbp__statt { font-size: var(--nb-t-body-02); }

/* Kopfleiste oben am Handy: weiße Karte 8 px eingerückt (G30, nie ein weißes Band über die volle Breite, so zählt
   sie auch nicht für die Kante am iPhone). Ruht mit visibility: hidden */
.nb-pkl { display: none; }
@media (max-width: 1099px) {
  .nb-pkl {
    display: block; position: fixed; z-index: 20; /* tokens.json ebene.leiste */
    top: calc(var(--nb-space-2xs) + env(safe-area-inset-top)); left: var(--nb-space-2xs); right: var(--nb-space-2xs);
    overflow: hidden; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt);
    transform: translateY(calc(-100% - var(--nb-space-s))); visibility: hidden;
    transition: transform var(--nb-motion-fenster-aus) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-fenster-aus);
  }
  .nb-pkl.is-da { transform: none; visibility: visible; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), visibility 0s linear 0s; }
  .nb-pkl.is-still { transition: none; }
  .nb-pkl__innen { display: flex; align-items: center; gap: var(--nb-space-xs); min-height: 52px; padding: var(--nb-space-3xs) var(--nb-space-xs) 8px var(--nb-space-s); box-sizing: border-box; }
  /* Night in Semibold, nie grau und dünn (Daniel 14.10.2026: „sieht so schrecklich nach Windows XP aus“) */
  .nb-pkl__wahl { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); letter-spacing: -0.01em; color: var(--nb-text-heading); }
  .nb-pkl__aendern { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-badge); 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: color var(--nb-motion-farbe) var(--nb-motion-kurve), text-decoration-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
  .nb-pkl__aendern:active { color: var(--nb-ink-600); }
  .nb-pkl__aendern:focus-visible { outline: 2px solid var(--nb-night); outline-offset: -2px; }
  @media (hover: hover) and (pointer: fine) { .nb-pkl__aendern:hover { text-decoration-color: currentColor; } }
}

/* Fortschrittslinie wie Back Market, 4 px am unteren Rand der Karte. Füllung Sky (Information), am Schalter Signal */
.nb-pfl { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--nb-surface-component); pointer-events: none; }
.nb-pfl__lauf { display: block; height: 100%; background: var(--nb-sky-500); transform: scaleX(0); transform-origin: left center; }
:root:has(main[data-nb-linie="signal"]) .nb-pfl__lauf { background: var(--nb-signal-500); }
@media (prefers-reduced-motion: reduce) { .nb-pkl, .nb-pkl.is-da, .nb-pkl__aendern { transition: none; } }

/* Der Starter des Assistenten fährt mit der Leiste, statt nach dem Einfahren hochzuspringen (Daniel 14.10.2026: „sieht
   aus, als würde es nach oben buggen“). kern/assistent.js liest die Zielhöhe der Leiste (data-nb-leiste-ziel), der Knopf
   folgt über transform in Dauer und Kurve der Leiste: rein motion-transform, raus motion-fenster-aus */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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