/* Erzeugt von baukasten/werkzeug/exportieren.mjs aus vergleich. 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/sektionen/kat-kopf/sektion.css
   baukasten/sektionen/auswahlstil/sektion.css
   baukasten/sektionen/vg-kopf/sektion.css
   baukasten/sektionen/vg-koepfe/sektion.css
   baukasten/sektionen/profil/sektion.css
   baukasten/sektionen/vg-leiste/sektion.css
   baukasten/sektionen/vg-sprung/sektion.css
   baukasten/sektionen/vg-gruppen/sektion.css
   baukasten/sektionen/vg-farben/sektion.css
   baukasten/sektionen/fragen/sektion.css
   baukasten/sektionen/vg-fragen/sektion.css
   baukasten/sektionen/vg-paare/sektion.css
   baukasten/sektionen/vg-alle/sektion.css
   baukasten/sektionen/fuss/universell.css
   Ohne 493 Regeln gelöschter Fassungen (60.8 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 */

/* 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; }
.nb-f-knopf--umriss { background: transparent; color: var(--nb-text-heading); border: 1px solid var(--nb-border-control); }
/* #FBFBFD hat kein Token, Wert aus komponenten-tradein.md:510 */
@media (hover: hover) and (pointer: fine) { .nb-f-knopf--umriss:hover { border-color: var(--nb-ink-500); background: var(--nb-ink-100); } }

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

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

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

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

/* Druck wie der Hover, nur Farbe mit Dauer (22.10.2026, bewegung.md Druck, vorher ohne Druckzustand) */

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================================================================
   Bausteine aus dem Hilfecenter, komponenten-formular.md §5c bis §5g (Task faq-design 4.6, Schnitt B, 03.10.2026).
   Werte gerendert im gesperrten Studio Version 10 gemessen, wo dessen Kaskade überstimmt, steht der Wert, der am Ende galt.
   Zahlen ohne Token (14, 18, 6, 26, 40 px) stehen so in §5c bis §5g. Zeilen „Pflicht“ sind umgesetzt und benannt.
   ========================================================================================================================== */

/* ---------- §5c Mehrzeiliges Feld (m-feld--text): wie nb-fl, sechs Zeilen 185 px, 28 px oben, Zeilenhöhe 1.55 ---------- */

/* Pflicht: hinter dem hochgewanderten Label ein Streifen in der Feldfläche über die volle Breite, 26 px hoch. Er folgt Hover,
   Fokus und Fehler wie die Fläche, damit langer Text beim Rollen nicht unter das Label läuft */

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

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

 /* Druck, Fassung C 09.10.2026 */

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

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

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

 /* Druck, Fassung C 09.10.2026 */

/* Fokus per Tastatur 2 px Night innen */

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

 /* Druck, Fassung C 09.10.2026 */

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

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

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

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

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

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

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

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

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

/* S-Rechtssatz: Links überall Night Semibold mit Unterstrich, nie blau, Hover und Druck nur dunkler (G59). Eine Regel für Strecke,
   Kasse, Warenkorb und Anmeldung, wie live in nb-kasse.css:2342 (Daniel 16.10.2026 „entscheid dich mal für schwarz“, 21.10.2026 in
   der Verkaufen-Strecke vergessen: „hinterlege das endlich in unserem branding“). Wer einen neuen Rechtssatz baut, nimmt eine der
   vier Klassen, nie eine eigene Linkfarbe */

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

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

.nb-kk__krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; font-size: var(--nb-t-body-02); line-height: 1.4; }
.nb-kk__krumen li { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); }
.nb-kk__krumen a { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nb-kk__krumen a:hover { text-decoration: underline; } }
/* Unterstrich gleitet ein statt zu springen, Druck wie die Links der Bewertungen: Linie und Text Sky (22.10.2026,
   bewegung.md „Kein Zustand wechselt ohne Dauer“ und Druck, vorher ohne Druckzustand). In Ruhe ist die Linie durchsichtig */
.nb-kk__krumen a { text-decoration: underline; text-decoration-color: transparent; transition: 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-kk__krumen a:hover { text-decoration-color: currentColor; } }
.nb-kk__krumen a:active { color: var(--nb-text-link); text-decoration-color: currentColor; transition-duration: var(--nb-motion-druck); }
/* OE 94 Punkt 8 (Daniel 05.10.2026): Trefferfläche 44 px, das Bild bleibt pixelgleich. Die Fläche liegt als ::before mittig
   über dem Link, der Link selbst und die Zeile (19,6 px) ändern sich nicht. Breite wie der Link, Nachbarn überlappen nicht */
.nb-kk__krumen a { position: relative; }
.nb-kk__krumen a::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nb-kk__krumen li > span[aria-hidden] { color: var(--nb-text-muted); }
.nb-kk__krumen [aria-current] { color: var(--nb-text-muted); user-select: none; }

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

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

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

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

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

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

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

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

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

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

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

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

.nb-dd__karte {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input);
  box-shadow: 0 2px 4px rgb(0 0 0 / .04), 0 18px 44px -20px rgb(0 0 0 / .18);
  transform-origin: 50% 0;
  animation: nb-dd-rein var(--nb-motion-liste) var(--nb-motion-kurve) backwards;
}
/* Schließen 150 ms ease-out, Fassung C (Daniel 09.10.2026). Der Keyframe läuft mit backwards, damit die Deckkraft nach
   dem Öffnen wieder der Regel gehört und hier ausblenden kann */
.nb-dd__karte[hidden] { display: none; opacity: 0; transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), display var(--nb-motion-liste-aus) allow-discrete; }
.nb-dd__blattkopf { display: none; }
.nb-dd__liste { max-height: 380px; box-sizing: border-box; overflow: auto; margin: 0; padding: var(--nb-space-2xs); list-style: none; outline: none; }
.nb-dd__gruppe { padding: var(--nb-space-xs) var(--nb-space-s) var(--nb-space-3xs); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--nb-text-muted); }
.nb-dd__gruppe:not(:first-child) { margin-top: var(--nb-space-2xs); border-top: 1px solid var(--nb-border-hairline); padding-top: var(--nb-space-s); }
.nb-dd__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs); min-height: 44px;
  padding: var(--nb-space-2xs) var(--nb-space-s); border-radius: var(--nb-radius-badge);
  font-size: var(--nb-t-body-01); font-weight: 500; color: var(--nb-text-heading); cursor: pointer; user-select: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-dd__option.is-aktiv { background: var(--nb-ink-100); }
@media (hover: hover) and (pointer: fine) { .nb-dd__option:hover { background: var(--nb-ink-100); } }
.nb-dd__haken { width: 20px; height: 20px; flex: none; color: var(--nb-action-primary); opacity: 0; }
.nb-dd__haken svg { width: 20px; height: 20px; }
.nb-dd__option[aria-selected="true"] { font-weight: var(--nb-weight-semibold); }
.nb-dd__option[aria-selected="true"] .nb-dd__haken { opacity: 1; }
.nb-dd__schleier { display: none; }
@keyframes nb-dd-rein { from { opacity: 0; transform: scale(var(--nb-motion-liste-scale)); } to { opacity: 1; transform: none; } }

/* Gewählt auf surface-stage mit Haken Signal, wie m-auswahl im Rechner (§1b). Daniel 27.09.2026: „genau diese
   Dropdown-Menüs finde ich perfekt“. Werte live gemessen auf /verkaufen/smartphones/apple/iphone-17-pro */
.nb-dd__option[aria-selected="true"] { background: var(--nb-surface-stage); }

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

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

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

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

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

/* baukasten/sektionen/vg-kopf/sektion.css */
/* Kopf der Vergleichsseite. Wahl als weiße Karte mit dd() (komponenten-formular.md), Felder ink-100 in Weiß (G29) */

.nb-vgw__dazu { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: var(--nb-space-xl); padding: 0 var(--nb-space-2xs); border: 0; background: none; font: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: var(--nb-space-3xs); cursor: pointer; touch-action: manipulation; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vgw__dazu:active { color: var(--nb-ink-700); }
.nb-vgw__dazu:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; } /* tokens.json focus */
@media (hover: hover) and (pointer: fine) { .nb-vgw__dazu:hover { text-decoration-thickness: 2px; } }
 /* body-01 Regular in text-body als Klasse, neben der H1 nichts fett (README Schrift) */
/* Am Handy höchstens zwei Modelle (VORGABEN-ux Spaltenzahl), steht hinter .nb-vgw__dazu, sonst gewinnt dessen display */
@media (max-width: 767px) { .nb-vgw__feld:nth-child(3), .nb-vgw__dazu, .nb-vg-ab3 { display: none; } }
@media (min-width: 768px) { .nb-vg-bis2 { display: none; } }
.nb-vgk .nb-kk__krumen a { touch-action: manipulation; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-vgk .nb-kk__krumen a:active { color: var(--nb-ink-700); }
/* Feldtext steht in einer Zeile und bricht nie (Feld/README.md, 23.10.2026). Wo die Breite nicht reicht, stehen die Felder
   untereinander (Handy) statt dass der Name umbricht. Gilt auch für die Wahl in den Modellköpfen b */
.nb-vgw .nb-fl, .nb-vgw .nb-fl__rahmen, .nb-vgm__wahl .nb-fl, .nb-vgm__wahl .nb-fl__rahmen { min-width: 0; max-width: 100%; }

/* Ein Fluss von Kopf bis Modellköpfen (README Layout, Daniel 23.10.2026): Kopf, Wahl und Köpfe sind ein Werkzeug. Der
   Baukasten gibt jeder .nb-s space-sektion-normal (kern/schale.css:147), das nimmt die Seite hier zurück, ohne schale.css
   anzufassen. Bis zur Brotkrume seitenkopf (space-l, ab 1100 px space-xl), Titel zur Wahl space-m, Wahl zu Köpfen space-l
   (vg-koepfe/sektion.css) */
.nb-s.nb-s-vg-kopf { margin-top: var(--nb-space-l); margin-bottom: 0; }
@media (min-width: 1100px) { .nb-s.nb-s-vg-kopf { margin-top: var(--nb-space-xl); } }
.nb-kk.nb-vgk { gap: 0; }
.nb-vgk .nb-kk__titelblock { margin-top: var(--nb-space-s); }

/* Rechner: die Liste ist mindestens so breit wie der längste Eintrag (Feld/README.md Aufbau) */
@media (min-width: 768px) { :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__karte { right: auto; min-width: 100%; width: max-content; } }

/* Handy: Felder untereinander über die volle Breite, ohne Karte, weiß mit sh-ruht auf dem Grund. Der Feldtext steht in einer
   Zeile („iPhone 16 Pro Max“ braucht 130 px). Die Liste kommt als Blatt von unten über die volle Breite, Zeilen 48 px,
   gewählt Semibold mit Haken (Feld/README.md, bewegung.md Fenster und Blatt). Ebenen fenster-scrim 109 und fenster 110 */
@media (max-width: 767px) {
  
  
  
  
  
  /* Das Feld trägt z-index 7 (lokaler Stapel). Offen wäre das Blatt darin gefangen und läge unter dem Kopf (ebene kopf 100),
     im iOS-Simulator 23.10. gesehen. Offen gibt das Feld den Stapel ab, Schleier und Blatt stehen auf fenster-scrim und fenster */
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd.is-offen { z-index: auto; }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__schleier { display: block; position: fixed; inset: 0; z-index: 109; background: var(--nb-alpha-scrim); animation: nb-vg-scrim var(--nb-motion-farbe) var(--nb-motion-kurve) both; }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__schleier[hidden] { display: none; }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__karte { position: fixed; z-index: 110; top: auto; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; max-height: var(--nb-blatt-hoehe); padding-bottom: env(safe-area-inset-bottom); border: 0; border-radius: var(--nb-blatt-radius); box-shadow: var(--nb-sh-schwebt); animation: nb-vg-blatt var(--nb-motion-blatt) var(--nb-motion-kurve-bewegung) both; }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__karte[hidden] { display: none; }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__blattkopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-2xs) var(--nb-space-m); font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__zu { display: grid; place-items: center; width: var(--nb-space-xl); height: var(--nb-space-xl); padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; touch-action: manipulation; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__zu:active { color: var(--nb-ink-700); }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__zu svg { width: var(--nb-space-s); height: var(--nb-space-s); }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__liste { flex: 1 1 auto; max-height: none; overflow: auto; overscroll-behavior: contain; padding: var(--nb-space-2xs) var(--nb-space-s) var(--nb-space-m); }
  :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__option { min-height: var(--nb-space-xl); touch-action: manipulation; }
  /* Die Seite dahinter scrollt nicht (Fenster/README.md Zustände) */
  html:has(:is(.nb-vgw, .nb-vgm__wahl) .nb-dd.is-offen) { overflow: hidden; }
}
@keyframes nb-vg-blatt { from { transform: translateY(100%); } to { transform: none; } }
@keyframes nb-vg-scrim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { :is(.nb-vgw, .nb-vgm__wahl) .nb-dd__karte { animation: nb-vg-scrim var(--nb-motion-farbe) var(--nb-motion-kurve) both; } }

/* Handy (mobile-native, Werkstatt Schritt 5b): Links und Listenzeilen, die Bedienelemente sind, markieren beim langen Drücken
   keinen Text und rufen kein Menü auf. Knöpfe und summary deckt nb-basis.css:184 ab. Inhalt bleibt markierbar */
:is(.nb-vgs__chip, .nb-vgl__modell, .nb-vgp a, .nb-dd__option, .nb-vgt__nur, .nb-vgl__nur) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:is(.nb-vgw, .nb-vgm__wahl) .nb-dd__knopf { touch-action: manipulation; }

/* b, c, d: ohne eigene Wahl steht „Modell hinzufügen“ rechts auf der Grundlinie des Titelblocks, nur am Rechner (23.10.2026) */
.nb-vgk__zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--nb-space-m); }
.nb-vgk__zeile .nb-kk__titelblock { min-width: 0; }
.nb-vgk__zeile .nb-vgw__dazu { flex: none; }
/* d: das Paar als zwei weiße Chips mit Foto, wie die Chips der Sprungleiste weiß mit sh-ruht auf dem Grund. Kein
   Bedienelement, darum kein Hover und kein Druck. Name body-02 Regular, neben der H1 ist nichts fett (README Schrift) */

/* Tastaturfokus der Wahl: Fläche ink-200 wie beim Hover, kein Ring (Feld/README.md Zustände). Der Feldstil setzt beim
   Fokus ink-100 und damit dieselbe Fläche wie im Ruhezustand, das Messwerk sah 0,5 % Unterschied (FOKUSSICHT, 23.10.2026) */
:is(.nb-vgw, .nb-vgm__wahl) .nb-fl .nb-dd__knopf:focus-visible { background: var(--fl-grund-hover); }

/* baukasten/sektionen/vg-koepfe/sektion.css */
/* Modellköpfe. Karte weiß ohne Rand mit sh-ruht (G28), Bühne surface-component wie die Produktkarte (karte.css:65-66,
   G60: Foto 78 % breit, 12 % von oben, unten angeschnitten). Preis price-02 Night, Neupreis body-02 text-muted mit
   Durchstrich nur auf dem Betrag (Preiszeile). Zwei Spalten am Handy, drei ab 768 px, nie mehr als drei. */
.nb-vgm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-s); align-items: stretch; }
@media (min-width: 768px) { .nb-vgm { gap: var(--nb-space-m); } .nb-vgm[data-nb-vg-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .nb-vgm > :nth-child(3) { display: none; } .nb-vgm__buehne { aspect-ratio: 4 / 3.4; } }

.nb-vgm__karte { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-width: 0; box-shadow: var(--nb-sh-ruht); transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (hover: hover) and (pointer: fine) { .nb-vgm__karte:hover { box-shadow: var(--nb-sh-hoch); } }

.nb-vgm__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); }
/* Feste Höhe statt fester Breite (Daniel 23.10.2026): die Fotos sind verschieden schmal (iPhone 15 461 × 600, iPhone 16
   495 × 600). Nach Breite skaliert endete das iPhone 16 über der Bühnenkante. So steht jedes Gerät 15 % von oben (Platz über dem Max, Größe wie bei Apple) und ist
   unten um dasselbe Maß angeschnitten (G60), in jeder Variante, Breite und Farbe.
   Breite Fotos wie das aufgeklappte Duo enden bei 92 % der Bühne und werden darin verkleinert, statt an den Rand zu stoßen */
/* --skala: echte Gerätehöhe zum 6,1-Zoll-Modell (kern/vergleich.mjs skala). Ein größeres Gerät ragt weiter nach oben, unten
   bleibt der Anschnitt gleich, so stehen die Geräte auf einer Linie wie bei Apple */
.nb-vgm__foto { position: absolute; left: 50%; top: calc(15% + (1 - var(--skala, 1)) * 100%); width: auto; height: calc(100% * var(--skala, 1)); max-width: 92%; object-fit: contain; object-position: 50% 0; transform: translateX(-50%); mix-blend-mode: multiply; }

.nb-vgm__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--nb-space-3xs); padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-m); }
/* Rechner: Karte polstert mit space-l (README Fläche). Die frühere Fluchtlinie l + m zur Tabelle ließ bei 768 px und drei
   Modellen nur 8 px Rand und brach Wörter (design-auditor 22.10.2026, Brandbook) */
@media (min-width: 768px) { .nb-vgm__text { padding: var(--nb-space-m) var(--nb-space-l) var(--nb-space-l); } }
 /* Rolle heading-03 als Klasse aus nb-tokens-v3.css */
.nb-v3 .nb-vgm__preis { margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
/* Preis price-02 als Rollenklasse, Laufweite aus der Rolle. „Gerade ausverkauft“ bleibt body-02 Semibold wie die Zeile */
.nb-vgm__preis b { font-weight: var(--nb-weight-semibold); } /* <b> wäre bolder, also 900 auf 600 (künstliches Fett) */
/* Ohne Neupreis bleibt die Zeile stehen, damit die Karten gleich hoch sind (Preiszeile, Zustand „Ohne Neupreis“) */
/* Neupreis wie die Preiszeile der Karte (kern/karte.css:365), ein Baustein sieht überall gleich aus */
.nb-v3 .nb-vgm__neu { min-height: 1lh; margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); }
.nb-vgm__knopf { margin-top: auto; align-self: stretch; justify-content: center; text-align: center; }
/* Am Rechner bricht ein Knopftext nie um (stimme.md Satzformen), am Handy in der halben Spalte darf er */
@media (min-width: 768px) { .nb-vgm__knopf { white-space: nowrap; } }
/* Ausverkauft am Handy: „Benachrichtige mich“ passt in der halben Spalte nicht auf eine Zeile. Erst das Layout ändern, nie den
   Wortlaut (stimme.md Satzmaß): Textknopf ohne Fläche (Knopf/README.md Aufbau), der umbrechen darf */
@media (max-width: 767px) {
  .nb-vgm__knopf--melden { min-height: var(--nb-space-xl); padding-inline: 0; border-color: transparent; background: none; text-decoration: underline; text-underline-offset: var(--nb-space-3xs); white-space: normal; }
  .nb-vgm__knopf--melden:active { color: var(--nb-ink-700); }
}

/* Wahl zu Köpfen space-l, ein Fluss mit dem Kopf (README Layout, vg-kopf/sektion.css) */
.nb-s.nb-s-vg-koepfe { margin-top: var(--nb-space-l); }

/* c: am Handy Foto 72 px links (Kategoriezeile, seiten.md Kategorie), Bühne quadratisch geraetebild-l */

@media (prefers-reduced-motion: reduce) { .nb-vgm__karte { transition: none; } }
.nb-vgm__wahl .nb-fl, .nb-vgm__wahl .nb-fl__rahmen, .nb-vgm__wahl .nb-dd__knopf { min-width: 0; max-width: 100%; }
/* Rechner: die Karte ist halb so breit wie die Seite, eine 4:4,2-Bühne wäre über 600 px hoch. Flachere Bühne, das Foto
   folgt ihrer Höhe */
@media (min-width: 768px) { .nb-vgm--a .nb-vgm__buehne, .nb-vgm--b .nb-vgm__buehne { aspect-ratio: 16 / 10; } }
@media (min-width: 768px) { .nb-vgm[data-nb-vg-n="3"] .nb-vgm__buehne { aspect-ratio: 4 / 3; } }
/* Fällt ein Foto aus, zeigt der Platz seine Flächenfarbe (README Bild), Muster der Produktkarte (kern/karte.css:68-70).
   Gilt für Köpfe, Leiste und Paare */
:is(.nb-vgm__foto, .nb-vgl__bild img, .nb-vgp__bild img) { color: transparent; overflow-clip-margin: 1px; }
:is(.nb-vgm__foto, .nb-vgl__bild img, .nb-vgp__bild img)::after { content: ''; position: absolute; inset: -1px; background: var(--nb-surface-page); }

/* b: die Wahl sitzt über dem Gerät, bündig mit der Bühne. Gleicher Einzug space-2xs links, rechts und dazwischen, gleicher
   Radius radius-input, am Rechner und am Handy (Daniel 23.10.2026). Feld ink-100 in der weißen Karte (Feld README) */
.nb-vgm__wahl { padding: var(--nb-space-2xs) var(--nb-space-2xs) 0; }
.nb-vgm--b .nb-vgm__buehne { margin-top: var(--nb-space-2xs); }
/* Rechner „1. Modell“ über „iPhone 16“, Handy „iPhone“ über „16“. display: none nimmt den Span auch aus dem Namen fürs Vorlesen */
.nb-vgm__h { display: none; }
@media (max-width: 767px) {
  .nb-vgm__r { display: none; }
  .nb-vgm__h { display: inline; }
  /* Kompaktes Feld in der halben Spalte: Polster xs, Pfeil rückt nach (frei bei 390 px rund 113 px) */
  .nb-vgm__wahl .nb-dd__knopf { padding-left: var(--nb-space-xs); padding-right: var(--nb-space-l); }
  .nb-vgm__wahl .nb-fl__label { left: calc(var(--nb-space-xs) + 1px); max-width: calc(100% - var(--nb-space-xs) - var(--nb-space-l)); }
  .nb-vgm__wahl .nb-fl__pfeil { right: var(--nb-space-xs); }
}
/* Nur die SE-Namen sind breiter als das Feld (Handy, Rechner mit drei Modellen bei 768 px). Sie gehen auf zwei Zeilen statt
   abgeschnitten zu werden, das Feld wächst mit (Bruch im Fassungstext) */
.nb-vgm__wahl .nb-dd__knopf { height: auto; min-height: var(--fl-hoehe); }
.nb-vgm__wahl .nb-dd__wert { display: block; overflow: visible; white-space: normal; text-overflow: clip; text-wrap: balance; }

/* Farbpunkte unter dem Gerät wie bei Apple, am Rechner kompakt in einer Reihe (Daniel 23.10.2026).
   Punkt 24 px (space-m) in 32 px Trefferfläche mit Innenring alpha-decorative, damit Weiß auf Weiß sichtbar bleibt. Gewählt: Ring in text-heading
   mit 2 px Abstand. Trefferfläche am Rechner 32 × 32 in einer Reihe, am Handy größer (unten). Name darunter (README Farbe) */
.nb-vgm__farben { display: grid; justify-items: center; gap: 0; padding: var(--nb-space-2xs) var(--nb-space-2xs) 0; }
.nb-vgm__punkte { display: flex; justify-content: center; min-height: var(--nb-space-l); }
.nb-vgm__farbe { display: grid; place-items: center; width: var(--nb-space-l); height: var(--nb-space-l); padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: none; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
/* Handy wie Apple: großer Punkt 32 px, dicht gesetzt (Trefferfläche 40 breit, 48 hoch, 8 px Luft), die Reihe bricht um,
   drei oben, zwei unten (Daniel 23.10.2026: Punkte größer, Abstand kleiner). Bis 768 px, dort greift die Prüfregel ZIEL */
@media (max-width: 768px) {
  .nb-vgm__farben { padding-inline: 0; }
  .nb-vgm__punkte { flex-wrap: wrap; max-width: calc(3 * (var(--nb-space-l) + var(--nb-space-2xs))); min-height: var(--nb-space-xl); } /* höchstens drei je Reihe */
  .nb-vgm__farbe { width: calc(var(--nb-space-l) + var(--nb-space-2xs)); height: var(--nb-space-xl); }
  .nb-vgm__farbe span { width: var(--nb-space-l); height: var(--nb-space-l); }
}
.nb-vgm__farbe span { width: var(--nb-space-m); height: var(--nb-space-m); border-radius: var(--nb-radius-pill); background: var(--farbe); box-shadow: inset 0 0 0 1px var(--nb-alpha-decorative); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-vgm__farbe[aria-checked="true"] span { outline-color: var(--nb-text-heading); }
@media (hover: hover) and (pointer: fine) { .nb-vgm__farbe:hover span { outline-color: var(--nb-border-control); } .nb-vgm__farbe[aria-checked="true"]:hover span { outline-color: var(--nb-ink-700); } }
.nb-vgm__farbe:active span { outline-color: var(--nb-ink-700); }
.nb-vgm__farbe:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; } /* tokens.json focus */
.nb-v3 .nb-vgm__farbname { min-height: 1lh; margin: 0; color: var(--nb-text-body); }
.nb-vgm--b .nb-vgm__text { padding-top: var(--nb-space-xs); }
@media (min-width: 768px) { .nb-vgm--b .nb-vgm__text { padding-top: var(--nb-space-s); } }
/* b: Wahl, Bühne, Farbpunkte und Preis stehen in allen Karten auf einer Linie, auch wenn ein Modell mehr Punkte hat und am
   Handy zwei Reihen braucht (18 Pro Max vier, Duo zwei, 23.10.2026). Die Karten teilen sich die Zeilen des Rasters */
.nb-vgm--b .nb-vgm__karte { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
/* Farbname aller Karten auf einer Höhe, auch wenn eine Karte zwei Reihen Punkte hat (Daniel 23.10.2026: „wieso sind die
   Farbnamen nicht auf einer Höhe“). Die Zeile ist per subgrid gleich hoch, die Punkte oben, der Name unten */
.nb-vgm--b .nb-vgm__farben { grid-template-rows: 1fr auto; align-content: stretch; }
.nb-vgm--b .nb-vgm__punkte { align-self: start; }
@media (max-width: 767px) { .nb-vgm--b > .nb-vgm__karte:nth-child(3) { display: none; } } /* sonst hebt das Raster oben das Ausblenden auf */

/* baukasten/sektionen/profil/sektion.css */
/* Profil im Kundencenter (Werkstatt konto-profil, Runde 2 vom 02.10.2026, Fassung c). Karten weiß ohne Rand mit
   --nb-sh-ruht über .nb-f-karte (K1), Zeichen im Kreis ink-100 in der weißen Karte (Umkehr G29), Titel body-01 600,
   Stand body-01 400 (G42, Entscheid 65: keine 14-px-Sätze im Konto). Jeder Wert ein Token aus nb-tokens-v3.css.
   Fenster und H1 aus verkaeufe/sektion.css. Der Teil „Gemeinsam“ gilt auch für Bankverbindung und Adressen */

/* Die Verkaufsnummer bricht nie am Bindestrich */

/* Gemeinsam: Karte mit Titel, Werte, Links */

 /* Druck wie der Hover, 22.10.2026 */

/* Liste zum Antippen */
/* Ohne Innenabstand oben und unten: die Hover-Fläche reicht bis an die Kartenkante und folgt ihrem Radius (overflow).
   Mit 3xs blieb ein weißer Streifen über und unter der Fläche stehen (Daniel 02.10.2026: „hover sieht minimal komisch aus“) */

 /* Druck, Fassung C 09.10.2026 */

/* Hover der Zeile surface-component (KSK:320, :335), ink-50 ist nur Seitengrund (farbsystem.md:259-260) */

/* Fokus nach innen, eine Linie (Memory „Fokus: eine Linie“). Die Fokusregel für Strecke und Konto in kern/formular.css:96
   (3 px außen plus weißer Ring) gewann bisher und wurde von overflow: hidden der Karte abgeschnitten, bei „Konto löschen“ war
   gar nichts zu sehen (Prüflauf konto-lauf 04.10.2026, Befund 1). Erste und letzte Zeile tragen den Radius der Karte, damit die
   Linie in den Ecken nicht abbricht */

/* Zeichen im Kreis: ink-100 in der weißen Karte, weiß auf ink-100 im Fenster, Signal mit Ausrufezeichen bei einer Aufgabe
   (G38, wie der Schritt mit Aufgabe in der Verkaufskarte) */
/* Wieder ink-100 wie bis zum 04.10.2026 (Daniel 06.10.2026: „die grauen Kreise zu grau … stell das einfach wieder aufs andere“).
   Der aktive Menüpunkt bleibt ink-200 */

/* Gespeichert: grüner Haken in der Zeile, die sich geändert hat (G41, ux-pruefer A: kein Toast) */

/* Newsletter-Schalter mit den Werten des S-Hakens (KSK:411-412, design-auditor B 02.10.2026). Aus: Bahn weiß mit Rand
   2 px border-control, Knopf border-control. An: Bahn Signal, Knopf weiß. Kein Schatten am inneren Element (Umkehr) */

.nb-pf-schalter { position: relative; display: inline-grid; }
.nb-pf-schalter input { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); margin: 0; opacity: 0; cursor: pointer; }
.nb-pf-schalter__bahn { position: relative; box-sizing: border-box; width: 44px; height: 26px; border: 2px solid var(--nb-border-control); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), border-color var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-pf-schalter__bahn::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--nb-border-control); transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-pf-schalter input:checked + .nb-pf-schalter__bahn { border-color: var(--nb-action-primary); background: var(--nb-action-primary); }
.nb-pf-schalter input:checked + .nb-pf-schalter__bahn::after { background: var(--nb-action-primary-label); transform: translateX(18px); }
.nb-pf-schalter input:focus-visible + .nb-pf-schalter__bahn { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* Fenster: Inhalt auf der inneren Fläche ink-100, Sätze body-01 */

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

/* Der Klick auf die Bahn trifft das unsichtbare Eingabefeld darüber (zustands-pruefer 02.10.2026: Klick in die Mitte ohne Wirkung) */
.nb-pf-schalter input { z-index: 1; }
.nb-pf-schalter__bahn { pointer-events: none; }
/* Der Stand des Newsletters hält zwei Zeilen am Handy, damit die Zeile beim Umschalten nicht springt */

/* Meldungen und Kontakt in body-01, Mail-Link mit Tippfläche 44 px (G42) */

/* Newsletter ausgegraut, bis der Versand läuft (Daniel 02.10.2026). Keine Deckkraft auf Text (design-auditor A, ink-600
   bei 50 % nur 2,13:1): Titel und Stand muted, Bahn mit Rand ink-300 ohne Knopf-Farbe, Zeiger zeigt nicht klickbar */

/* Runde 3 (Daniel 02.10.2026: „Konto hover sieht minimal komisch aus“). In der Liste tönt sich die Zeile bündig bis zur
   Kartenkante (KSK:320-321). Eine Karte mit nur einer Zeile ist selbst die Karte, sie hebt nur den Schatten (G28,
   komponenten-global.md:312, design-auditor A). Hover nur mit Zeiger, am Handy bleibt der Pfeil */

/* Der Kreis ändert sich im Hover und im Druck nicht (Daniel 06.10.2026: Weiß „grässlich“, dunkler „verbuggt“, „mach das
   minimalistischste was geht“). Nur die Zeile tönt sich, der Kreis geht in ihr auf, wie bis zum 04.10.2026 */
/* Am Handy setzt der Browser :active sofort beim Aufsetzen des Fingers, also auch beim Scrollen (Daniel 06.10.2026:
   „wenn ich runter scrolle und mein Finger auf einen der Teile tippt kommt direkt Hovereffekt“). Der Druck kommt
   deshalb erst nach 120 ms, ein Wischen ist dann schon ein Scrollen und zeigt nichts. Zurück ohne Verzögerung. Seit 17.10.2026 ohne Fläche, nur
   die Zeile gibt nach (Daniel in der App: Scrollen „sieht so aus als würde ich hovern“, Memory kein-druck-kasten) */

/* baukasten/sektionen/vg-leiste/sektion.css */
/* Kompaktleiste oben. Werte wie .nb-pkl (pdp-abschluss/sektion.css:136-148): weiße Karte 8 px eingerückt (G30, nie ein
   Band voller Breite), sh-schwebt, radius-card, ebene.leiste 20. Ruht mit visibility: hidden, nie nur Deckkraft (iPhone-Kante). */
.nb-vgl {
  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);
  max-width: var(--nb-container); margin-inline: auto;
  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-vgl.is-da { transform: none; visibility: visible; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), visibility 0s linear 0s; }
/* Spalten mit Token-Abstand. Die frühere Fluchtlinie zur Tabelle brach bei 768 px „iPhon|e“ (design-auditor 22.10.2026) */
.nb-vgl__innen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--nb-space-s); padding: var(--nb-space-2xs) var(--nb-space-s); box-sizing: border-box; }
.nb-vgl[data-nb-vg-n="3"] .nb-vgl__innen { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 767px) {
  .nb-vgl[data-nb-vg-n="3"] .nb-vgl__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nb-vgl .nb-vgl__spalte:nth-child(3) { display: none; }
  /* Am Handy steht der Schalter in einer zweiten Zeile unter beiden Modellen */
  
  
}
/* Ab 768 px sitzt die Leiste auf der Containerkante (--nb-s-rand, --nb-s-breit), sonst flüchtet sie 24 px neben der Tabelle */
@media (min-width: 768px) { .nb-vgl { left: var(--nb-s-rand); right: var(--nb-s-rand); max-width: var(--nb-s-breit); } }
@media (min-width: 768px) { .nb-vgl__innen { gap: var(--nb-space-m); padding: var(--nb-space-2xs) var(--nb-space-l); } }

.nb-vgl__modell { display: flex; align-items: center; gap: var(--nb-space-xs); min-width: 0; min-height: var(--nb-space-xl); color: var(--nb-text-heading); text-decoration: none; touch-action: manipulation; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
a.nb-vgl__modell:active { color: var(--nb-ink-700); }
.nb-vgl__modell:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-badge); } /* tokens.json focus */
@media (hover: hover) and (pointer: fine) { a.nb-vgl__modell:hover .nb-vgl__text > b { text-decoration: underline; text-underline-offset: var(--nb-space-3xs); } }
.nb-vgl__bild { flex: none; position: relative; width: var(--nb-geraetebild-s); height: var(--nb-geraetebild-s); overflow: hidden; border-radius: var(--nb-geraetebild-radius); background: var(--nb-surface-component); }
.nb-vgl__bild img { position: absolute; left: 50%; top: 12%; width: 78%; height: auto; transform: translateX(-50%); mix-blend-mode: multiply; }
.nb-vgl__text { display: grid; min-width: 0; }
/* Lange Namen brechen um statt abgeschnitten zu werden („Galaxy S24 Ultra“ bei 320 px, zustands-pruefer 22.10.2026) */
/* Rollen heading-03, body-02 und price-02 als Klasse. Lange Namen trennen mit Strich statt mitten im Wort (README Schrift) */
.nb-v3 .nb-vgl__text > b, .nb-v3 .nb-vgl__text > span { overflow-wrap: break-word; hyphens: auto; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

@media (prefers-reduced-motion: reduce) {
  .nb-vgl, .nb-vgl.is-da { transform: none; opacity: 0; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-farbe); }
  .nb-vgl.is-da { opacity: 1; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s linear 0s; }
}

/* Solange die Leiste steht, ist sie der Kopf (wie nb-pkl-kopfaus der Produktseite, pdp-abschluss/sektion.css:119-125).
   Mit Tastatur im Kopf kommt er zurück. Beim Hochscrollen kommt nur der Kopf zurück, sobald die Köpfe wieder im Bild sind.
   40 px und 860 px sind Maße des Live-Kopfs (nb-kopf.css:90, Ankündigung), die Leiste folgt ihm wie die Produktseite */
html.nb-vgl-kopfaus .nb-announcement-section { transform: translateY(-100%); }
html.nb-vgl-kopfaus .nb-kopf-bereich { transform: translateY(calc(-100% - 40px)); }
html.nb-vgl-kopfaus .nb-kopf-bereich:focus-within { transform: none; }
@media (max-width: 860px) { html.nb-vgl-kopfaus .nb-kopf-bereich { transform: translateY(-100%); } }

/* Spalte: Modell links, „Kaufen“ rechts (Leiste/README.md Aufbau). Am Handy steht der Knopf unter dem Modell über die
   Spaltenbreite, in der halben Spalte wäre neben Foto und Name kein Platz (23.10.2026) */
.nb-vgl__spalte { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); min-width: 0; }
.nb-vgl__kaufen { flex: none; white-space: nowrap; }
@media (max-width: 767px) {
  .nb-vgl__spalte { flex-direction: column; align-items: stretch; gap: var(--nb-space-2xs); }
  .nb-vgl__kaufen { justify-content: center; }
}

/* baukasten/sektionen/vg-sprung/sektion.css */
/* Sprungleiste. Chip weiß mit sh-ruht auf dem Grund, aktiv Night mit heller Schrift, beides wie der Schnellchip der
   Kategorie im Live-Shop (kat-filter/sektion.css:84-86, brandbook „Der Live-Shop ist die Vorlage“). Zweites Merkmal aria-current */
/* Sprungziel landet unter Leiste und Chips (design-auditor B: 96 px war kleiner als die Leiste am Handy) */
html { scroll-padding-top: calc(var(--nb-vgl-h, 0px) + var(--nb-space-2xl) + var(--nb-space-s)); }
.nb-vgs__leiste ul { display: flex; gap: var(--nb-space-2xs); margin: calc(var(--nb-space-2xs) * -1); padding: var(--nb-space-2xs); overflow-x: auto; scrollbar-width: none; list-style: none; overscroll-behavior-x: contain; }
.nb-vgs__leiste ul::-webkit-scrollbar { display: none; }
.nb-vgs__chip { display: inline-flex; align-items: center; height: var(--nb-space-xl); padding: 0 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); text-decoration: none; white-space: nowrap; touch-action: manipulation; transition: box-shadow 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); }
@media (hover: hover) and (pointer: fine) { .nb-vgs__chip:not(.is-aktiv):hover { box-shadow: var(--nb-sh-hoch); } }
.nb-vgs__chip:active { color: var(--nb-ink-700); }
.nb-vgs__chip.is-aktiv { background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-vgs__chip:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; } /* tokens.json focus */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* „Nur Unterschiede“ blendet ganz gleiche Gruppen aus, ihre Chips gehen mit (zustands-pruefer 22.10.2026) */
html.nb-vg-nur .nb-vgs__leiste li.is-gleich { display: none; }
@media (max-width: 767px) { html.nb-vg-nur .nb-vgs__leiste li.is-gleich2 { display: none; } }
/* b: klebt oben, Ebene klebt 60 (tokens.json ebene) */

/* Klebend trägt die Reihe den Grund über die volle Breite, sonst scheint zwischen den Chips der Inhalt durch (iOS-Simulator
   23.10.2026). Nach dem Vergleich fährt sie mit der Leiste hoch (vg-leiste VERHALTEN, html.nb-vg-vorbei) */

/* Ist die Leiste da, kleben die Chips unter ihr statt darüber (Leiste README „Nie zwei Leisten übereinander“). Lokaler
   Stapel 1 (tokens.json ebene, 1 bis 7 frei) liegt unter der Leiste (20), ihr Schatten fällt auf die Chips */

/* baukasten/sektionen/vg-gruppen/sektion.css */
/* Technik im Vergleich. Muster pi-tabelle (sektion.css): Zeile ink-100 in der weißen Karte mit radius-input, Abstand
   space-2xs, keine Linien, kein Zebra. Merkmal body-02 Night Semibold, Wert heading-03 Night Semibold (VORGABEN-design).
   Rechner: Merkmal links in fester Spalte, Werte in den Spalten der Köpfe. Handy: Merkmal über den Werten, zwei Spalten. */
.nb-vgt__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--nb-space-s) var(--nb-space-m); }
.nb-v3 .nb-vgt__unter { margin: var(--nb-space-3xs) 0 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-vgt__nur { display: inline-flex; align-items: center; gap: var(--nb-space-xs); min-height: var(--nb-space-xl); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; touch-action: manipulation; }
/* Schalter „Nur Unterschiede“ (Tabelle und Leiste b): Hover nur mit Maus, Druck nur Farbe, die Bahn dunkelt auf Night
   (bewegung.md Hover und Druck). Im an-Zustand bleibt Signal */
@media (hover: hover) and (pointer: fine) { :is(.nb-vgt__nur, .nb-vgl__nur):hover input:not(:checked) + .nb-pf-schalter__bahn { border-color: var(--nb-text-heading); } :is(.nb-vgt__nur, .nb-vgl__nur):hover input:checked + .nb-pf-schalter__bahn { border-color: var(--nb-action-primary-hover); background: var(--nb-action-primary-hover); } }
:is(.nb-vgt__nur, .nb-vgl__nur):active input:not(:checked) + .nb-pf-schalter__bahn { border-color: var(--nb-text-heading); }
:is(.nb-vgt__nur, .nb-vgl__nur):active input:checked + .nb-pf-schalter__bahn { border-color: var(--nb-action-primary-active); background: var(--nb-action-primary-active); }

.nb-vgt { display: grid; gap: var(--nb-space-s); }
@media (min-width: 768px) { .nb-vgt { gap: var(--nb-space-m); } }
.nb-vgt__gruppe { padding: var(--nb-space-m); border-width: 0; box-shadow: var(--nb-sh-ruht); }
@media (min-width: 768px) { .nb-vgt__gruppe { padding: var(--nb-space-l); } }
.nb-v3 .nb-vgt__titel { margin: 0 0 var(--nb-space-s); } /* Rolle heading-02 als Klasse */

.nb-vgt__tabelle th { font-weight: var(--nb-weight-semibold); }
.nb-vgt__tabelle { display: block; width: 100%; border-collapse: separate; }
.nb-vgt__tabelle tbody { display: grid; gap: var(--nb-space-2xs); }
.nb-vgt__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-3xs) var(--nb-space-s); padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
/* Merkmal in Regular, Wert in heading-03 Semibold: Gruppe, Merkmal und Wert sind drei Stufen (Daniel 23.10.2026: Merkmal sah
   aus wie ein eigener Titel). Night bleibt, kleine Schrift nie grau in 400 (Memory keine-graue-duenne-schrift) */
.nb-vgt__tabelle th.nb-vgt__merkmal { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--nb-space-2xs); padding: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-heading); text-align: left; }
.nb-vgt__wert { min-width: 0; padding: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); text-align: left; overflow-wrap: break-word; hyphens: auto; font-variant-numeric: tabular-nums lining-nums; } /* lh heading-03, trennt mit Strich (README Schrift) */
/* Handy bei drei Modellen: nur das Paar. Drittes Modell, sein Spaltenkopf und die Pille einer Zeile, in der das Paar gleich ist,
   gehen mit, „Nur Unterschiede“ blendet solche Zeilen aus (zustands-pruefer 22.10.2026) */
@media (max-width: 767px) {
  .nb-vgt__zeile > .nb-vgt__wert:nth-child(4), .nb-vgt__tabelle thead th:nth-child(4), .nb-vgt__zeile.is-gleich2 .nb-vgt__anders { display: none; }
  .nb-vgt.is-nur .nb-vgt__zeile.is-gleich2, .nb-vgt.is-nur .nb-vgt__zeile.is-gleich2 + .nb-vgt__hinweis, .nb-vgt.is-nur .nb-vgt__gruppe.is-gleich2 { display: none; }
}
/* Spaltenabstand space-l, Zeile polstert m. Die frühere Fluchtlinie zu den Köpfen rechnete 136 px aus Token zusammen und
   brach bei 768 px Wörter (design-auditor 22.10.2026, README Layout „nie ein freier Wert“) */
/* Rechner wie Handy: Merkmal über den Werten, Werte in gleich breiten Spalten in der Reihenfolge der Modellköpfe */
@media (min-width: 768px) {
  .nb-vgt__zeile { column-gap: var(--nb-space-l); padding: var(--nb-space-s) var(--nb-space-m); }
  .nb-vgt__tabelle[data-nb-vg-n="3"] .nb-vgt__zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Fehlender Wert als Wort in Regular, damit er hinter echten Werten zurücktritt, ohne grau zu werden */
.nb-vgt__wert .nb-vgt__leer { font-weight: var(--nb-weight-regular); color: var(--nb-text-heading); }

/* Pille „Anders“ als Zustandspille (components/Zustandspille): surface-stage, text-on-stage, body-02 Semibold, ohne Rand,
   nie Großbuchstaben. Night gefüllt hieße „gerade bedient“ (seiten.md). Die Fläche hebt sich von ink-100 kaum ab (1,10:1),
   das trägt das Wort, die Schrift steht mit 4,5:1 auf der Pille */
.nb-vgt__anders { display: inline-flex; align-items: center; height: var(--nb-space-m); padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-stage); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1; color: var(--nb-text-on-stage); white-space: nowrap; }

/* b: gleicher Wert über alle Spalten, „bei beiden“ als Merkmal daneben */

 /* klein nie grau */

/* c: Gleiches Regular, Anderes Semibold, beides Night */

.nb-vgt--gewicht summary svg, .nb-vgt__quellen summary svg { flex: none; color: var(--nb-text-heading); transition: transform var(--nb-motion-transform) var(--nb-motion-kurve-bewegung); }
.nb-vgt--gewicht .nb-vgt__gruppe[open] > summary svg, .nb-vgt__quellen[open] summary svg { transform: rotate(180deg); }
.nb-vgt--gewicht summary:focus-visible, .nb-vgt__quellen summary:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-badge); } /* tokens.json focus */
.nb-vgt--gewicht summary:active .nb-vgt__titel, .nb-vgt__quellen summary:active { color: var(--nb-ink-700); }

/* Hinweis Wasserschutz direkt unter der Zeile, Night Semibold body-02 (Anker ist die Zeile darüber) */
.nb-vgt__hinweis { display: block; padding: 0 var(--nb-space-s); }
.nb-vgt__hinweis td { display: block; padding: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* Fuß: Quellen als Aufklapper (G62 über nb-klappen.js) in einer weißen Karte, nichts steht frei auf dem Grund (README Fläche).
   Links Night Semibold unterstrichen wie S-Rechtssatz */
.nb-vgt__fuss { padding: var(--nb-space-2xs) var(--nb-space-m); border-width: 0; box-shadow: var(--nb-sh-ruht); }
@media (min-width: 768px) { .nb-vgt__fuss { padding-inline: var(--nb-space-l); } }
.nb-vgt__quellen summary { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2xs); min-height: var(--nb-space-xl); list-style: none; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer; touch-action: manipulation; }
.nb-vgt__quellen summary::-webkit-details-marker { display: none; }
.nb-vgt__quellen ul { display: grid; gap: var(--nb-space-3xs); margin: 0; padding: 0 0 var(--nb-space-s); list-style: none; }
.nb-vgt__quellen a { display: inline-flex; align-items: center; min-height: var(--nb-space-xl); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: var(--nb-space-3xs); overflow-wrap: anywhere; }
.nb-vgt__quellen a:active { color: var(--nb-ink-700); }

/* Nur Unterschiede: gleiche Zeilen und ganz gleiche Gruppen gehen, der Hinweis zur gleichen Zeile mit */
.nb-vgt.is-nur .nb-vgt__zeile.is-gleich, .nb-vgt.is-nur .nb-vgt__zeile.is-gleich + .nb-vgt__hinweis, .nb-vgt.is-nur .nb-vgt__gruppe.is-gleich { display: none; }
@media (prefers-reduced-motion: reduce) { .nb-vgt summary svg { transition: none; } }
@media (hover: hover) and (pointer: fine) { .nb-vgt__quellen a:hover { text-decoration-thickness: 2px; } .nb-vgt summary:hover .nb-vgt__titel, .nb-vgt__quellen summary:hover span { text-decoration: underline; text-underline-offset: var(--nb-space-3xs); } }

/* Wechsel lädt (Plan Phase 3, Wechsel ohne Neuladen wie Back Market): jeder Wert hält Platz und Größe, darüber ein Balken
   mit Lichtstreif (bewegung.md „Ein Skelett läuft über ink-100“, formular.css nb-f-platz). Auf Weiß ink-100, in der grauen
   Zeile ink-150. Foto und Leiste bleiben stehen, nichts springt (G15) */
@keyframes nb-vg-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
main[data-nb-zustand="laedt"] :is(.nb-vgm__name, .nb-vgm__preis, .nb-vgm__neu, .nb-vgf__wert b, .nb-vgt__wert, .nb-vgf__saetze li) {
  justify-self: start; width: fit-content; min-width: 4em; color: transparent; border-radius: var(--nb-radius-badge);
  background: var(--nb-ink-100) linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--nb-surface-page) 90%, transparent) 50%, transparent 100%) no-repeat;
  background-size: 40% 100%; animation: nb-vg-sweep var(--nb-motion-skeleton-sweep) linear calc(var(--nb-motion-farbe) * 2) infinite; /* erst nach kurzer Wartezeit (400 ms) wie kern/formular.css:74 (bewegung.md) */
}
main[data-nb-zustand="laedt"] :is(.nb-vgt__wert, .nb-vgf__wert b) { background-color: var(--nb-ink-150); }
main[data-nb-zustand="laedt"] :is(.nb-vgm__preis, .nb-vgm__neu) s, main[data-nb-zustand="laedt"] .nb-vgm__preis b { color: transparent; }
main[data-nb-zustand="laedt"] .nb-vgm__foto { opacity: 0; }
main[data-nb-zustand="laedt"] .nb-vgt__anders { visibility: hidden; }
main[data-nb-zustand="laedt"] .nb-vgm a { pointer-events: none; } /* Knopf führt sonst zum alten Modell */
@media (prefers-reduced-motion: reduce) { main[data-nb-zustand="laedt"] * { animation: none; } }

/* d: Zeilen mit Haarlinie statt grauer Kästen, die Karte bleibt eine Fläche (23.10.2026) */

/* baukasten/sektionen/vg-farben/sektion.css */
/* Farben bei uns. Spalten in ink-100 in der weißen Karte (G29), Punkt 20 px mit Ring border-control */
.nb-vgc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-s); padding: var(--nb-space-m); border-width: 0; box-shadow: var(--nb-sh-ruht); }
@media (min-width: 768px) { .nb-vgc { padding: var(--nb-space-l); } .nb-vgc[data-nb-vg-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .nb-vgc > :nth-child(3) { display: none; } }
.nb-vgc__spalte { padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-v3 .nb-vgc__spalte h3 { margin: 0 0 var(--nb-space-2xs); } /* Rolle heading-03 als Klasse */
.nb-vgc__punkte { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-vgc__punkte li { display: flex; align-items: center; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-vgc__punkt { flex: none; width: calc(var(--nb-space-s) + var(--nb-space-3xs)); aspect-ratio: 1; border-radius: var(--nb-radius-pill); box-shadow: inset 0 0 0 1px var(--nb-border-control); }

/* baukasten/sektionen/fragen/sektion.css */
/* Fragen (E4). Klappliste mit Haarlinien, geschlossen, Antworten aus dem Rechner. */
.nb-s-fragen__raster { display: grid; gap: var(--nb-space-l); align-items: start; }
@media (min-width: 1100px) { .nb-s-fragen__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--nb-space-2xl); } }
.nb-s-fragen__links { display: grid; gap: var(--nb-space-m); align-content: start; }
.nb-s-fragen__links .nb-s-kopf { margin-block-end: 0; }
.nb-s-fragen__kontakt { display: flex; align-items: center; gap: var(--nb-space-s); padding: var(--nb-space-m); }
.nb-s-fragen__kontakt p { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-body); }

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

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

/* Unter der Antwort derselbe Abstand wie ueber ihr (summary padding s), ohne Rand des letzten Absatzes (Daniel 27.09.2026) */
.nb-s-frage__antwort > :last-child { margin-bottom: 0; }

/* b: eine Karte wie .nb-fragen-karte im Rechner */

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

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

/* baukasten/sektionen/vg-fragen/sektion.css */
/* Link in der Antwort (Garantiebedingungen): Night Semibold unterstrichen wie der Rechtssatz, nie eigene Linkfarbe.
   Hover verstärkt den Unterstrich, Druck nur Farbe (Knopf/README.md Textlink, bewegung.md Druck) */
.nb-s-frage__antwort a { position: relative; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: var(--nb-space-3xs); touch-action: manipulation; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-s-frage__antwort a:active { color: var(--nb-ink-700); }
.nb-s-frage__antwort a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; border-radius: var(--nb-radius-badge); } /* tokens.json focus */
@media (hover: hover) and (pointer: fine) { .nb-s-frage__antwort a:hover { text-decoration-thickness: 2px; } }
/* Trefferfläche am Handy 48 px hoch über eine unsichtbare Fläche, die Zeile bleibt unverändert (README Layout 44 px) */
.nb-s-frage__antwort a::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--nb-space-xl); transform: translateY(-50%); }

/* baukasten/sektionen/vg-paare/sektion.css */
/* Weitere Vergleiche. a: Zeilen ink-100 in weißer Karte (G29), Name heading-03, Pfeil 20 px rechts auf derselben Mitte.
   b: weiße Karten mit sh-ruht, Fotos geraetebild-m auf grauer Bühne (G60, G63). */
.nb-vgp { margin: 0; padding: 0; list-style: none; }

.nb-vgp a:active { color: var(--nb-ink-700); }
.nb-vgp a:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; } /* tokens.json focus */

.nb-vgp--b { display: grid; gap: var(--nb-space-s); }
@media (min-width: 768px) { .nb-vgp--b { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nb-space-m); } }
.nb-vgp--b a { display: flex; align-items: center; gap: var(--nb-space-s); height: 100%; padding: var(--nb-space-s); border-width: 0; box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); text-decoration: none; touch-action: manipulation; transition: box-shadow var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
@media (min-width: 768px) { .nb-vgp--b a { flex-direction: column; align-items: flex-start; padding: var(--nb-space-m); } }
@media (hover: hover) and (pointer: fine) { .nb-vgp--b a:hover { box-shadow: var(--nb-sh-hoch); } }
.nb-vgp__bilder { display: flex; flex: none; gap: var(--nb-space-3xs); }
.nb-vgp__bild { position: relative; width: var(--nb-geraetebild-m); height: var(--nb-geraetebild-m); overflow: hidden; border-radius: var(--nb-geraetebild-radius); background: var(--nb-surface-component); }
.nb-vgp__bild img { position: absolute; left: 50%; top: 12%; width: 78%; height: auto; transform: translateX(-50%); mix-blend-mode: multiply; }
.nb-vgp__name { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); }
@media (prefers-reduced-motion: reduce) { .nb-vgp a, .nb-vgp svg { transition: none; } }

/* baukasten/sektionen/vg-alle/sektion.css */
/* Alle Vergleiche auf /vergleich (OE 145 Nr. 3). Reihe und Knöpfe wortgleich zu .nb-s-modelle__* in langtext/sektion.css
   (Alle iPhone-Modelle der Kategorie), die Vergleichsseite lädt deren CSS nicht. Weiße Karte wie vg-farben */
.nb-vga { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-m); border-width: 0; box-shadow: var(--nb-sh-ruht); }
@media (min-width: 768px) { .nb-vga { padding: var(--nb-space-l); } }
.nb-vga__reihe { display: grid; gap: var(--nb-space-2xs); align-items: baseline; }
.nb-vga__reihe + .nb-vga__reihe { padding-block-start: var(--nb-space-s); border-block-start: 1px solid var(--nb-border-hairline); }
@media (min-width: 768px) { .nb-vga__reihe { grid-template-columns: 112px minmax(0, 1fr); } }
.nb-v3 .nb-vga__titel { margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-vga__reihe ul { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
/* Pillen 32 px, Fläche unsichtbar 44 px, am Handy Zeilenabstand 12 (Handy-Gesamtprüfung 14.10.2026 wie .nb-s-modelle__pille) */
@media (max-width: 767px) { .nb-vga__reihe ul { row-gap: var(--nb-space-xs); } }
.nb-vga__paar { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--nb-space-xs); border: 1px solid var(--nb-ink-300); 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); text-decoration: none; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }
.nb-vga__paar::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.nb-vga__paar:active { scale: var(--nb-motion-druck-scale); }
@media (hover: hover) and (pointer: fine) { .nb-vga__paar:hover { border-color: var(--nb-ink-500); } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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