/* Eintausch beim Kauf, Produktseite. Erzeugt von baukasten/werkzeug/eintausch-export.mjs aus
   baukasten/sektionen/ein-modul/sektion.css, nie von Hand ändern. Dazu laden nb-tradein.css und nb-pdp.css. */
/* Eintausch beim Kauf, Produktseite (Werkstatt eintausch, Platz 1, Neubau 17.10.2026, Spur weg-b). Werte nur als Token.
   Karte pdp-ankauf j unverändert (kern/pdp.css, pdp-wahl.css, pdp-b.css), hier nur Trefferliste, Leeren-Kreuz und „Ändern“.
   Behälter nach der Schublade der Produktseite (kern/pdp-lade.css) und dem S-Fenster (ein-korb b), Antworten als
   Rechner-Kacheln aus nb-tradein.css. Fassung a Seitenfenster 440 px, b Fenster mittig 520 px, am Handy beide als Blatt. */

/* ---------- Karte: Suche mit Trefferliste (VORGABEN Platz 1: sh-schwebt, Radius 16, Option 44 px) ---------- */
.nb-em .nb-pak-d__suche { position: relative; }
.nb-em .nb-su--gross .nb-su__eingabe { padding-right: 56px; }
.nb-em .nb-su--gross .nb-su__beispiel { right: 56px; }
.nb-em .nb-su--gross .nb-su__leeren { right: 6px; width: 44px; height: 44px; }
/* Lupe in der Karte: Zeigen und Druck nur über die Schriftfarbe, ohne Fläche (design-kurz Nr. 11 und 12) */
@media (hover: hover) and (pointer: fine) { .nb-em .nb-pak-d__suche .nb-su__lupe:hover { color: var(--nb-text-link); } }
.nb-em .nb-pak-d__suche .nb-su__lupe:active { color: var(--nb-signal-800); transition-duration: var(--nb-motion-druck); }
.nb-em-treffer {
  position: absolute; top: calc(100% + var(--nb-space-2xs)); left: 0; right: 0; z-index: 20;
  display: grid; margin: 0; padding: var(--nb-space-2xs); list-style: none;
  border-radius: var(--nb-radius-input); background: var(--nb-surface-page); box-shadow: var(--nb-sh-schwebt);
  transform-origin: top center; opacity: 1; transform: none;
  transition: opacity var(--nb-motion-liste) var(--nb-motion-kurve), transform var(--nb-motion-liste) var(--nb-motion-kurve);
}
.nb-em-treffer[hidden] { display: none; }
@starting-style { .nb-em-treffer { opacity: 0; transform: scale(var(--nb-motion-liste-scale)); } }
.nb-em-treffer [role="option"] {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--nb-space-s); border-radius: var(--nb-radius-badge);
  font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); cursor: pointer;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-em-treffer [role="option"][aria-selected="true"] { background: var(--nb-ink-100); }
@media (hover: hover) and (pointer: fine) { .nb-em-treffer [role="option"]:hover { background: var(--nb-ink-100); } }
.nb-em-treffer [role="option"]:active { background: var(--nb-ink-200); transition-duration: var(--nb-motion-druck); }
.nb-em-treffer__leer { padding: var(--nb-space-xs) var(--nb-space-s); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* Gewählt: „Ändern“ an der Stelle von „Anderes iPhone wählen“, Textknopf mit 44 px Trefferfläche, Druck nur Farbe */
.nb-em__aendern { justify-self: start; min-height: 44px; margin-top: calc(-1 * var(--nb-space-3xs)); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-em__aendern:active { color: var(--nb-signal-800); transition-duration: var(--nb-motion-druck); }
.nb-em__gewaehlt .nb-pw__unter { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* ---------- Behälter ---------- */
html:has(.nb-em-box[open]) { overflow: hidden; scrollbar-gutter: stable; }
.nb-em-box {
  position: fixed; box-sizing: border-box; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--nb-surface-page); color: var(--nb-text-body); box-shadow: var(--nb-sh-schwebt);
  font-family: var(--nb-font-sans); overflow: hidden;
}
.nb-em-box[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.nb-em-box__kopf { grid-row: 1; }
.nb-em-box__lauf { grid-row: 2; }
.nb-em-box__inhalt { grid-row: 3; }
.nb-em-box__fuss { grid-row: 4; }
.nb-em-box::backdrop { background: var(--nb-alpha-scrim); opacity: 1; transition: opacity var(--nb-motion-fenster) var(--nb-motion-fenster-kurve); }
@starting-style { .nb-em-box[open]::backdrop { opacity: 0; } }
.nb-em-box.is-zu::backdrop { opacity: 0; transition-duration: var(--nb-motion-fenster-aus); transition-timing-function: var(--nb-motion-kurve); }
.nb-em-box.is-still, .nb-em-box.is-still::backdrop { transition: none; }

/* a · Seitenfenster rechts wie die Schublade der Produktseite (440 px, Radius links, auf in motion-fenster) */
.nb-em-box--seite {
  inset: 0 0 0 auto; width: min(440px, 100vw); height: 100dvh;
  border-radius: var(--nb-radius-card) 0 0 var(--nb-radius-card);
  transform: none; transition: transform var(--nb-motion-fenster) var(--nb-motion-fenster-kurve);
}
@starting-style { .nb-em-box--seite[open] { transform: translateX(100%); } }
.nb-em-box--seite.is-zu { transform: translateX(100%); transition-duration: var(--nb-motion-fenster-aus); transition-timing-function: var(--nb-motion-kurve); }

/* Eine Höhe für jeden Bildschirm (Daniel 17.10.2026: „überall eine einheitlich große Ansicht, nicht immer so halb viertel,
   sondern die normale hohe Ansicht, die noch oben geht“). Kein kurzes Fenster mehr: a volle Höhe, b 680 px, Handy Blatt 88svh. */
/* b · Fenster mittig 520 px, feste Höhe, damit es zwischen den Bildschirmen nicht springt */
.nb-em-box--mitte {
  inset: 0; margin: auto; width: min(520px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 64px));
  border-radius: var(--nb-radius-card); opacity: 1; transform: none;
  transition: opacity var(--nb-motion-fenster) var(--nb-motion-fenster-kurve), transform var(--nb-motion-fenster) var(--nb-motion-fenster-kurve);
}
@starting-style { .nb-em-box--mitte[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
.nb-em-box--mitte.is-zu { opacity: 0; transform: translateY(8px) scale(.98); transition-duration: var(--nb-motion-fenster-aus); transition-timing-function: var(--nb-motion-kurve); }

/* Kopf: Titel und rundes Kreuz wie die Schublade (pdp-lade.css) */
.nb-em-box__kopf { display: flex; align-items: center; gap: var(--nb-space-xs); padding: var(--nb-space-m) var(--nb-space-m) var(--nb-space-s); }
.nb-em-box__titel { flex: 1; margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; color: var(--nb-text-heading); text-wrap: balance; outline: none; }
.nb-em-box__zu { display: inline-grid; place-items: center; flex: none; align-self: start; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); color: var(--nb-text-heading); cursor: pointer; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-em-box__zu svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .nb-em-box__zu:hover { background: var(--nb-ink-300); } }
.nb-em-box__zu:active { background: var(--nb-ink-300); transition-duration: var(--nb-motion-druck); }
.nb-em-box :focus-visible:not(input) { outline: 2px solid var(--nb-night); outline-offset: 3px; }
/* Titel bekommen den Fokus nur fürs Vorlesen, ohne Ring */
.nb-em-box :is(.nb-em-box__titel, .nb-em__teil-titel):is(:focus, :focus-visible) { outline: none; box-shadow: none; }

/* Fortschritt wie im Rechner, die Füllung wächst über scaleX statt Breite (nur transform, design-kurz Nr. 13) */
.nb-em-box__lauf { padding: 0 var(--nb-space-m) var(--nb-space-s); }
.nb-em-box__lauf[hidden] { display: none; }
.nb-em-box .nb-fortschritt__fuellung { width: 100%; transform-origin: left center; transform: scaleX(var(--nb-em-anteil, 0)); transition: transform var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-em-box .nb-fortschritt__zahl { min-width: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); white-space: nowrap; }

.nb-em-box__inhalt { display: grid; align-content: start; gap: var(--nb-space-s); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--nb-space-3xs) var(--nb-space-m) var(--nb-space-m); }
.nb-em-box__inhalt.is-neu { animation: nb-em-neu var(--nb-motion-transform) var(--nb-motion-kurve) both; }
/* „Deine Angaben“ aus dem Rechner (nb-tradein.css .nb-seite__klapp), im Fenster in jeder Breite als Aufklapper. Der Rechner
   blendet die Zeile ab 1100 px aus, weil dort die Seitenleiste steht, das Fenster hat keine (Daniel 17.10.2026) */
.nb-em-box .nb-seite__klapp summary { display: flex; }
.nb-em-box .nb-seite__inhalt { padding-top: var(--nb-space-s); }
.nb-em-box .nb-seite__zeile:last-child { border-bottom: 0; }
.nb-em-box__fuss { padding: var(--nb-space-s) var(--nb-space-m) calc(var(--nb-space-m) + env(safe-area-inset-bottom)); }
.nb-em__knoepfe { display: flex; gap: var(--nb-space-2xs); }
.nb-em__knoepfe > [data-nb-em-weiter] { flex: 1; }
.nb-em__knoepfe--stapel { display: grid; }
@keyframes nb-em-neu { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Gerät: Modell, Speicher, Farbe auf einem Bildschirm ---------- */
.nb-em__geraet-wahl { display: grid; gap: var(--nb-space-2xs); }
.nb-em__teil { display: grid; gap: var(--nb-space-xs); padding-block: var(--nb-space-2xs) var(--nb-space-xs); }
.nb-em__teil.is-neu { animation: nb-em-neu var(--nb-motion-transform) var(--nb-motion-kurve) both; }
.nb-em__teil-titel { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); outline: none; }
.nb-em__raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-em__leer { margin: 0; padding: var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-em__suche .nb-su { --su-hoehe: 56px; }
.nb-em-box [data-nb-em-reihe=""] { justify-self: start; gap: var(--nb-space-2xs); font-weight: var(--nb-weight-semibold); text-decoration: none; }
.nb-em-box [data-nb-em-reihe=""]:active { color: var(--nb-signal-800); transition-duration: var(--nb-motion-druck); }
.nb-em-box [data-nb-em-reihe=""] svg { width: 18px; height: 18px; }
#nb-em-raster { display: grid; gap: var(--nb-space-2xs); }

/* Erledigtes als Zeile mit Stift. In der weißen Fläche ink-100 ohne Schatten (Umkehr G29), Druck nur Farbe */
.nb-em-zeile {
  display: flex; align-items: center; gap: var(--nb-space-xs); width: 100%; min-height: 56px; padding: var(--nb-space-2xs) var(--nb-space-2xs) var(--nb-space-2xs) var(--nb-space-s);
  border: 0; border-radius: var(--nb-radius-card); background: var(--nb-ink-100); color: var(--nb-text-heading);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-em-zeile__wert { flex: 1; min-width: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; }
.nb-em-zeile__farbe { flex: none; }
.nb-em-zeile__stift { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--nb-text-heading); }
.nb-em-zeile__stift svg { width: 20px; height: 20px; }
.nb-em-zeile:active { background: var(--nb-ink-200); transition-duration: var(--nb-motion-druck); }

/* ---------- Fragen: Rechner-Kacheln, K.-o.-Hinweis body-02 Night 600 statt legal-01 grau (VORGABEN W11) ---------- */
/* Beschreibung unter der Antwort (Daniel 17.10.2026). Night statt text-muted, kleine Schrift nie grau 400 (14.10.2026), Titel bleibt 600 */
.nb-em-box .nb-kachel__sub { color: var(--nb-text-heading); font-weight: var(--nb-weight-regular); }
.nb-em-box .nb-kachel__ko { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.45; color: var(--nb-text-heading); }
.nb-em__hinweis { margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-em-box .nb-kacheln__oder { margin-block: var(--nb-space-2xs); }
/* „So prüfst du das“ mit 44 px Trefferfläche, die Box bleibt gleich hoch (design-kurz Nr. 15) */
.nb-em-box .nb-hilfe summary { min-height: 44px; margin-block: calc(-1 * var(--nb-space-xs)); }

/* ---------- Angebot ---------- */
.nb-em__angebot { display: grid; gap: var(--nb-space-s); }
.nb-em__geraet { display: grid; grid-template-columns: var(--nb-geraetebild-l) minmax(0, 1fr); align-items: center; gap: var(--nb-space-s); }
.nb-em__bild { width: var(--nb-geraetebild-l); }
.nb-em__bild > .nb-em__ersatz { display: block; width: 100%; height: auto; border-radius: var(--nb-geraetebild-radius); }
.nb-em__geraet--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.nb-em__geraet-text { display: grid; justify-items: start; gap: var(--nb-space-2xs); min-width: 0; }
.nb-em__name { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-em__betrag-karte { display: grid; gap: var(--nb-space-2xs); padding: var(--nb-space-m); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-em__du { margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
/* Betrag als Anker des Bildschirms wie im Rechner (price-01), Bruch W6 in VARIANTEN */
.nb-em__betrag { margin: 0; font-size: var(--nb-t-price-01); font-weight: var(--nb-weight-semibold); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--nb-text-heading); }
.nb-em__zeit { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-em__bindung { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); }
.nb-em__angebot [data-nb-em-korrektur] { justify-self: start; margin-top: calc(-1 * var(--nb-space-2xs)); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-em__angebot [data-nb-em-korrektur]:active { color: var(--nb-signal-800); transition-duration: var(--nb-motion-druck); }

/* ---------- Ausgänge und Korb-Einstieg ---------- */
/* Einstieg a: Chips für Marke und häufige Modelle, 44 px, ink-100 auf Weiß (Umkehr), gewählte Marke in Night. Druck nur Farbe */
.nb-em-chips { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-em-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill);
  background: var(--nb-ink-100); color: var(--nb-text-heading); font: inherit; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: 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-em-chip:hover { background: var(--nb-ink-200); } }
.nb-em-chip:active { background: var(--nb-ink-300); transition-duration: var(--nb-motion-druck); }
.nb-em-chip[aria-pressed="true"] { background: var(--nb-night); color: var(--nb-text-on-dark); }
.nb-em-chips--modelle { padding-bottom: var(--nb-space-3xs); }

/* Einstieg b: drei Richtwerte als Zeilen in ink-100, Foto auf weißer Bühne (Umkehr G29), Betrag price-03 */
.nb-em-werte { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-em-wert { display: grid; grid-template-columns: var(--nb-geraetebild-m) minmax(0, 1fr) auto; align-items: center; gap: var(--nb-space-s); padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-em-wert .nb-em__bild:has(> img.nb-produktbild) { width: var(--nb-geraetebild-m); background: var(--nb-surface-page); }
.nb-em-wert__text { display: grid; justify-items: start; gap: var(--nb-space-3xs); min-width: 0; }
.nb-em-wert__name { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-em-wert__betrag { font-size: var(--nb-t-price-03); font-weight: var(--nb-weight-semibold); line-height: 1; font-variant-numeric: tabular-nums; color: var(--nb-text-heading); white-space: nowrap; }

/* Einstieg c: Anleitung als nummerierte Zeilen (G64), Nummer 24 px weiß auf ink-100, Bedienwort fett */
.nb-em-schritte { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-em-schritt { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: var(--nb-space-xs); min-height: 56px; padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-em-schritt__nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; color: var(--nb-text-heading); }
.nb-em-schritt__text { font-size: var(--nb-t-body-01); line-height: 1.4; color: var(--nb-text-heading); }
.nb-em-schritt__text b { font-weight: var(--nb-weight-semibold); }
/* K.-o.: je Grund eine Zeile in ink-100 (Umkehr in der weißen Fläche), Frage klein, Antwort fett, „Ändern“ als Textknopf */
.nb-em-ko { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-em-ko__zeile { display: flex; align-items: center; gap: var(--nb-space-s); min-height: 64px; padding: var(--nb-space-2xs) var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-em-ko__inhalt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.nb-em-ko__frage { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.35; color: var(--nb-text-heading); }
.nb-em-ko__antwort { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-em-ko [data-nb-em-zur-frage] { flex: none; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); }
.nb-em-ko [data-nb-em-zur-frage]:active { color: var(--nb-signal-800); transition-duration: var(--nb-motion-druck); }
.nb-em__text { margin: 0; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-heading); }
.nb-em__text strong { font-weight: var(--nb-weight-semibold); }

/* ---------- Handy: beide Fassungen als Blatt von unten (Daniel 14.10.2026, tokens.json blatt) ---------- */
@media (max-width: 767px) {
  .nb-em-box.nb-em-box--seite, .nb-em-box.nb-em-box--mitte {
    inset: auto 0 0 0; margin: 0; width: 100%; height: var(--nb-blatt-hoehe); border-radius: var(--nb-blatt-radius);
    opacity: 1; transform: none; transition: transform var(--nb-motion-blatt) var(--nb-motion-fenster-kurve);
  }
  @starting-style { .nb-em-box.nb-em-box--seite[open], .nb-em-box.nb-em-box--mitte[open] { opacity: 1; transform: translateY(100%); } }
  .nb-em-box.nb-em-box--seite.is-zu, .nb-em-box.nb-em-box--mitte.is-zu { opacity: 1; transform: translateY(100%); transition-duration: var(--nb-motion-blatt-aus); transition-timing-function: var(--nb-motion-kurve); }
  .nb-em-box__kopf { padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-xs); }
  .nb-em-box__lauf { padding-inline: var(--nb-space-s); }
  .nb-em-box__inhalt { padding: var(--nb-space-3xs) var(--nb-space-s) var(--nb-space-s); }
  .nb-em-box__fuss { padding: var(--nb-space-xs) var(--nb-space-s) var(--nb-blatt-unten); }
}

/* ---------- Reduzierte Bewegung: nur Deckkraft, kein Weg ---------- */
@media (prefers-reduced-motion: reduce) {
  .nb-em-box.nb-em-box--seite, .nb-em-box.nb-em-box--mitte { opacity: 1; transform: none; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
  @starting-style { .nb-em-box.nb-em-box--seite[open], .nb-em-box.nb-em-box--mitte[open] { opacity: 0; transform: none; } }
  .nb-em-box.nb-em-box--seite.is-zu, .nb-em-box.nb-em-box--mitte.is-zu { opacity: 0; transform: none; }
  .nb-em-box .nb-fortschritt__fuellung, .nb-em-treffer { transition: none; }
  .nb-em-box__inhalt.is-neu, .nb-em__teil.is-neu { animation: none; }
}

/* ==========================================================================================================================
   Werkstatt-Runde 17.10.2026 spät (Spur weg-b): Kauf-Einstieg d, e, f und Angebot a, b, c. Schalter S.korbArt und
   S.angebotArt, im Baukasten ?s=korbart:d oder ?s=angebotart:b. Werte nur aus tokens.json, Umkehr G29 (in ink-100 wird die
   Foto-Bühne weiß), Hover nur mit Maus, Druck nur Farbe, Bewegung nur transform, opacity, stroke-dashoffset und der
   Lime-Marker wie kern/bewegung.css (background-size, G20).
   ========================================================================================================================== */
.nb-em__bild--s { width: var(--nb-geraetebild-s); }
.nb-em__bild--m { width: var(--nb-geraetebild-m); }
.nb-em__bild--l { width: var(--nb-geraetebild-l); }
:is(.nb-em-schaetz, .nb-em-rechnung-karte, .nb-em-streifen, .nb-em-nach, .nb-em-glueck--b) .nb-em__bild:has(> img.nb-produktbild) { background: var(--nb-surface-page); }

/* Lime-Marker hinter einem Night-Wort in einer Überschrift (design-kurz 18, G20), zeichnet sich einmal von links */
.nb-em-mk { margin-inline: calc(-1 * var(--nb-space-3xs)); padding: 0 var(--nb-space-3xs); border-radius: var(--nb-radius-badge); background: linear-gradient(var(--nb-lime), var(--nb-lime)) 0 0 / 100% 100% no-repeat; color: var(--nb-text-on-lime); white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: nb-em-mk var(--nb-motion-reveal) var(--nb-motion-kurve) var(--nb-motion-farbe) both; }
@keyframes nb-em-mk { from { background-size: 0% 100%; } }

/* Fußnote zur Schätzung: body-02 Night, nie grau dünn (feedback-keine-graue-duenne-schrift) */
.nb-em-note { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-heading); text-wrap: pretty; }
.nb-em-note > span { font-weight: var(--nb-weight-semibold); color: var(--nb-text-accent); }
.nb-em-zwischen { margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-em-schaetz sup, .nb-em-streifen sup, .nb-em-rechnung sup { line-height: 0; margin-left: 1px; font-size: max(.55em, var(--nb-t-legal-01)); vertical-align: .7em; }

/* d · Karte der Schätzung in ink-100, „Nach Eintausch“ als Anker in Signal (text-accent 7,23:1 auf Weiß) */
.nb-em-schaetz { display: grid; gap: var(--nb-space-s); padding: var(--nb-space-m); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-em-schaetz__geraet, .nb-em-rechnung__kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--nb-space-s); }
.nb-em-schaetz__text { display: grid; gap: var(--nb-space-3xs); min-width: 0; }
.nb-em-schaetz__name { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); }
.nb-em-schaetz__preise { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--nb-space-2xs) var(--nb-space-s); margin: 0; }
.nb-em-schaetz__nach { display: grid; gap: var(--nb-space-3xs); }
.nb-em-schaetz__label { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-em-schaetz__nach b { font-size: var(--nb-t-price-01); font-weight: var(--nb-weight-semibold); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--nb-text-accent); white-space: nowrap; }
.nb-em-schaetz__voll { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-em-box__titel .nb-em-mk { font-weight: inherit; }

/* e · Chips schalten das Beispiel, Rechnung in ink-100. Kaufpreis bleibt Anker (price-03), Nach Eintausch body-01 in Signal */
.nb-em-chips--bsp .nb-em-chip { flex: 1 1 auto; justify-content: center; }
.nb-em-rechnung-karte { padding: var(--nb-space-m); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-em-rechnung { display: grid; gap: var(--nb-space-xs); margin: 0; }
.nb-em-rechnung__kopf { margin-bottom: var(--nb-space-3xs); }
.nb-em-rechnung__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nb-space-s); }
.nb-em-rechnung__zeile dt { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-em-rechnung__zeile dd { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; color: var(--nb-text-heading); white-space: nowrap; }
.nb-em-rechnung__zeile--anker dd { font-size: var(--nb-t-price-03); }
.nb-em-rechnung__zeile--nach :is(dt, dd) { color: var(--nb-text-accent); }
.nb-em-rechnung__zeile--nach dd { font-size: var(--nb-t-price-03); }
.nb-em-rechnung-karte .nb-em-rechnung { animation: nb-em-neu var(--nb-motion-transform) var(--nb-motion-kurve) both; }

/* f · Streifen mit dem Kaufgerät, Geräte als Knöpfe (Listenzeile G56: Hover ink-200, Druck ink-300, nur Farbe) */
.nb-em-streifen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--nb-space-xs); padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); }
.nb-em-streifen__name { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); text-wrap: balance; }
.nb-em-streifen__betrag { font-size: var(--nb-t-price-03); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; color: var(--nb-text-accent); white-space: nowrap; }
.nb-em-werte--knopf .nb-em-wert--knopf { display: block; padding: 0; background: none; }
.nb-em-wert__wahl {
  display: grid; grid-template-columns: var(--nb-geraetebild-m) minmax(0, 1fr) auto 20px; align-items: center; gap: var(--nb-space-s); width: 100%; min-height: 72px;
  padding: var(--nb-space-xs) var(--nb-space-s); border: 0; border-radius: var(--nb-radius-card); background: var(--nb-ink-100); color: var(--nb-text-heading);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-em-wert__wahl .nb-em__bild:has(> img.nb-produktbild) { width: var(--nb-geraetebild-m); background: var(--nb-surface-page); }
@media (hover: hover) and (pointer: fine) { .nb-em-wert__wahl:hover { background: var(--nb-ink-200); } }
.nb-em-wert__wahl:active { background: var(--nb-ink-300); transition-duration: var(--nb-motion-druck); }
.nb-em-wert__pfeil { display: grid; place-items: center; color: var(--nb-text-heading); }
.nb-em-wert__pfeil svg { width: 20px; height: 20px; }

/* ---------- Angebot a, b, c ---------- */
.nb-em__angebot--a, .nb-em__angebot--b, .nb-em__angebot--c { gap: var(--nb-space-s); }
.nb-em-glueck { display: grid; border-radius: var(--nb-radius-card); animation: nb-em-pop var(--nb-motion-transform) var(--nb-motion-kurve) both; }
@keyframes nb-em-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.nb-em-glueck__du { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; }
.nb-em-glueck__betrag { display: inline-block; font-size: var(--nb-t-price-01); font-weight: var(--nb-weight-semibold); line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* Haken im Kreis zeichnet sich: erst der Kreis, dann der Haken (G27, motion-reveal) */
.nb-em-erfolg { display: block; width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nb-em-erfolg__kreis, .nb-em-erfolg__haken { stroke-dasharray: 1; stroke-dashoffset: 0; animation: nb-em-strich var(--nb-motion-reveal) var(--nb-motion-kurve) both; }
.nb-em-erfolg__haken { animation-delay: var(--nb-motion-transform); }
@keyframes nb-em-strich { from { stroke-dashoffset: 1; } }

/* a · Night-Bühne: Betrag in text-on-dark (16,9:1), Haken in Sky auf Night (9,06:1, farbsystem §8) */
.nb-em-glueck--a { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--nb-space-s); padding: var(--nb-space-m); background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-em-glueck__zahl { display: grid; gap: var(--nb-space-3xs); }
.nb-em-glueck--a .nb-em-erfolg { width: 56px; height: 56px; color: var(--nb-text-on-dark-link); }
.nb-em-glueck--a .nb-em-glueck__du, .nb-em-glueck--a .nb-em-glueck__betrag { color: var(--nb-text-on-dark); }

/* b · ink-100, Foto oben, Satz als Überschrift, Betrag auf Lime */
.nb-em-glueck--b { justify-items: center; gap: var(--nb-space-xs); padding: var(--nb-space-m); background: var(--nb-ink-100); text-align: center; }
.nb-em-glueck__titel { display: grid; justify-items: center; gap: var(--nb-space-2xs); margin: 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.25; color: var(--nb-text-heading); text-wrap: balance; }
.nb-em-glueck__titel .nb-em-mk { padding: var(--nb-space-3xs) var(--nb-space-2xs); }

/* c · Rahmen „Dein Eintausch“ wie im Warenkorb (komponenten-warenkorb.md §11.17): surface-stage, innen weiß */
.nb-em-glueck--c { padding: 0 var(--nb-space-2xs) var(--nb-space-2xs); background: var(--nb-surface-stage); }
.nb-em-glueck__kopf { display: flex; align-items: center; gap: var(--nb-space-2xs); margin: 0; padding: var(--nb-space-xs) var(--nb-space-2xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-on-stage); }
.nb-em-glueck__kopf svg { width: 20px; height: 20px; }
.nb-em-glueck__innen { display: grid; justify-items: center; gap: var(--nb-space-2xs); padding: var(--nb-space-m) var(--nb-space-s) var(--nb-space-s); border-radius: calc(var(--nb-radius-card) - var(--nb-space-2xs)); background: var(--nb-surface-page); text-align: center; color: var(--nb-text-heading); }
.nb-em-glueck__innen .nb-em-erfolg { color: var(--nb-action-primary); }
.nb-em-glueck__innen .nb-em__geraet { justify-self: stretch; margin-top: var(--nb-space-xs); text-align: left; }

/* Nach Eintausch fürs Kaufgerät, kommt nach dem Betrag (Versatz motion-reveal) */
.nb-em-nach { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--nb-space-xs); padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-card); background: var(--nb-ink-100); animation: nb-em-neu var(--nb-motion-transform) var(--nb-motion-kurve) var(--nb-motion-reveal) both; }
.nb-em-nach__text { display: grid; gap: 2px; min-width: 0; }
.nb-em-nach__label { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: var(--nb-text-heading); text-wrap: balance; }
.nb-em-nach__voll { font-size: var(--nb-t-body-02); line-height: 1.3; color: var(--nb-text-heading); font-variant-numeric: tabular-nums; }
.nb-em-nach__betrag { display: grid; justify-items: end; font-size: var(--nb-t-price-03); font-weight: var(--nb-weight-semibold); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--nb-text-accent); white-space: nowrap; }
.nb-em-nach__vs { font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

/* Satz zur Bindung mit Paket, wortgleich */
.nb-em-bindung { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: var(--nb-space-xs); margin: 0; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.4; color: var(--nb-text-heading); text-wrap: pretty; }
.nb-em-bindung__zeichen svg { display: block; width: 24px; height: 24px; }

@media (max-width: 767px) {
  .nb-em-schaetz { padding: var(--nb-space-s); gap: var(--nb-space-xs); }
  .nb-em-schaetz .nb-em__bild--l { width: var(--nb-geraetebild-m); }
  .nb-em-rechnung-karte { padding: var(--nb-space-s); }
  .nb-em-glueck--a, .nb-em-glueck--b { padding: var(--nb-space-s); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-em-mk, .nb-em-glueck, .nb-em-nach, .nb-em-erfolg__kreis, .nb-em-erfolg__haken, .nb-em-rechnung-karte .nb-em-rechnung { animation: none; }
}

/* Knöpfe Umriss und Text aus baukasten/kern/formular.css, nur im Modul */
:where(.nb-em) .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) { :where(.nb-em) .nb-f-knopf--umriss:hover { border-color: var(--nb-ink-500); background: #FBFBFD; } }
:where(.nb-em) .nb-f-knopf--text { min-height: 44px; padding-inline: 0; background: none; border: 0; color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 4px; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Hover wie .nb-anm__link, Farbe text-link (Daniel 27.09.2026: „beim Hovern über ja übernehmen passiert nichts“) */
@media (hover: hover) and (pointer: fine) { :where(.nb-em) .nb-f-knopf--text:hover { color: var(--nb-text-link); } }
:where(.nb-em) .nb-f-knopf--breit { width: 100%; }
/* Druck Fassung C (Daniel 09.10.2026): Primär und Umriss geben über scale nach, die Farbe wechselt sofort, der
   Rücksprung gleitet. Die Liste wiederholt .nb-knopf (nb-tradein.css) plus scale, die doppelte Klasse schlägt .nb-knopf */
:where(.nb-em) .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); }
:where(.nb-em) .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); }
:where(.nb-em) .nb-f-knopf:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }