/* NextBuy Trade-in-Rechner, Bauform F1. Band 1 auf /pages/verkaufen.
 *
 * Uebersetzt aus _previews/tradein-rechner-v2.html (Runde 4, von Daniel
 * abgenommen am 21.09.2026). Der Vorschau-Rahmen (Kopfleiste, Steuerung)
 * ist raus, der Rest ist unveraendert uebernommen.
 *
 * Tokens kommen aus assets/nb-tokens-v3.css, die Section laedt sie selbst.
 * Alles ist auf .nb-v3 gescoped, damit das laufende Impact-Theme unberuehrt
 * bleibt. Freie px-Werte fuer Abstand und Radius sind hier ein Audit-Fehler,
 * siehe web-architektur.md G1 bis G3.
 */

/* Grundlage. Steht nicht in nb-tokens-v3.css, weil die Datei nur Tokens und
   Rollen-Klassen traegt. */
.nb-v3 { font-family: var(--nb-font-sans); color: var(--nb-text-body); }

/* Zwei Feinjustierungen aus dem Rechner-Bau. nb-tokens-v3.css wird aus
   design-tokens.json erzeugt und nicht von Hand geaendert, deshalb stehen sie
   hier als Override. */
.nb-v3 .nb-price-02 { font-variant-numeric: tabular-nums lining-nums; }
.nb-v3 .nb-display-02 em { font-size: calc(1em * 1.03); }

/* ---------- Bauform F1 Rechner, Sektion. Band 1 auf Secondary statt Canvas (Daniel 21.09., Canvas wirkte schmutzig) ---------- */
/* Fester Viewport (Daniel 21.09.): das Band fuellt beim Laden das Fenster, damit der
   Rechner nicht als halbe Kachel im oberen Drittel haengt. Auf dem Preis-Bildschirm
   (Karte plus FAQ) faellt die Mindesthoehe weg, dort ist die Seite ohnehin lang.

   Abweichung von der Vorschau, bewusst: dort lagen die Regeln auf body und main, weil die
   Seite nur den Rechner trug. Im Theme haengen an body alle Seiten des Shops, deshalb
   traegt hier die Section ihre Hoehe selbst. --header-height kommt aus dem Impact-Theme
   (snippets/css-variables.liquid), der Fallback haelt die Regel heil, falls sie fehlt. */
.nb-tradein { box-sizing: border-box; min-height: calc(100svh - var(--header-height, 0px)); padding-block: min(var(--nb-space-sektion-gross), 8vh) var(--nb-space-m); background: var(--nb-surface-secondary); }
.nb-tradein--lang { min-height: 0; padding-block-end: var(--nb-space-sektion-gross); }
.nb-tradein__inner { max-width: var(--nb-container); margin-inline: auto; padding-inline: var(--nb-space-s); }
.nb-tradein__kopf { max-width: 44ch; display: flex; flex-direction: column; gap: var(--nb-space-xs); margin-bottom: var(--nb-space-l); }
.nb-tradein__kopf h1, .nb-tradein__kopf p { margin: 0; }
.nb-tradein__kopf h1 { text-wrap: balance; }

/* Entlastung (Daniel 21.09.): Zusagen ohne Untertext, Kurve ohne Panel, ungewaehlte Preis-Kachel ohne Rahmen, Stift nur beim Hover */
.va1--frei { padding: var(--nb-space-xs) var(--nb-space-2xs) 0; }
.nb-preis__wahl .nb-kachel[aria-checked="false"] { border-color: transparent; box-shadow: 0 1px 2px rgb(1 12 40 / .04); }
.nb-preis__wahl .nb-kachel[aria-checked="false"]:hover { border-color: var(--nb-border-control); }
/* Chip: Text sitzt mittig, beim Hover faehrt der Stift auf und schiebt den Text nach links. Auf Touch bleibt der Stift stehen. */
@media (hover: hover) {
  .nb-v3 .nb-chip svg { width: 0; margin-left: calc(-1 * var(--nb-space-2xs)); opacity: 0; transition: width var(--nb-motion-transform) var(--nb-motion-kurve), margin-left var(--nb-motion-transform) var(--nb-motion-kurve), opacity var(--nb-motion-rand) var(--nb-motion-kurve); }
  .nb-v3 .nb-chip:hover svg, .nb-v3 .nb-chip:focus-visible svg { width: 16px; margin-left: 0; opacity: 1; }
  /* Enge Chips (links kein Platz fuer den Stift): wachsen beim Hover nach rechts in den Kartenrand, Aussenmass bleibt gleich, der Text bricht nie (Daniel 21.09.) */
  .nb-v3 .nb-chip--eng { transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), margin-right var(--nb-motion-transform) var(--nb-motion-kurve); }
  .nb-v3 .nb-chip--eng:hover, .nb-v3 .nb-chip--eng:focus-visible { margin-right: -24px; }
  .nb-v3 .nb-chip--messen svg { width: 16px; margin-left: 0; }
  .nb-v3 .nb-chip--still svg { transition: none !important; }
}

/* Der Rechner: eine Flaeche auf Canvas, Kante plus Panel-Schatten, volle Containerbreite */
.nb-rechner { position: relative; border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-panel); padding: var(--nb-space-s); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-m); }
@media (min-width: 768px) { .nb-rechner { padding: var(--nb-space-m); } }
@media (min-width: 1100px) { .nb-rechner { padding: var(--nb-space-l); grid-template-columns: 360px minmax(0, 1fr); column-gap: var(--nb-space-xl); align-items: start; } }
.nb-haupt { display: flex; flex-direction: column; gap: var(--nb-space-m); min-width: 0; }
/* Ab 1100 px klebt nichts mehr, die Knopfleiste schliesst mit der Seitenleiste ab (Daniel 21.09.) */
@media (min-width: 1100px) { .nb-haupt { align-self: stretch; } .nb-haupt > .nb-leiste { margin-top: auto; } }
/* Ausgaenge: wenig Inhalt, deshalb mittig in der Spalte mit Luft oben und unten (Daniel 21.09.) */
.nb-haupt--ausgang { justify-content: center; padding-block: var(--nb-space-l); }
@media (min-width: 1100px) { .nb-haupt--ausgang { padding-block: var(--nb-space-xl) var(--nb-space-l); } }
@media (min-width: 768px) and (max-width: 1099px) { .nb-haupt { max-width: 720px; } }

/* m-tradein-seitenleiste (neu, Abgleich 20.09.). Ab 1100 px offen, darunter ein Ausklapper */
.nb-seite { min-width: 0; }
.nb-seite__klapp summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs); padding: var(--nb-space-xs) var(--nb-space-s); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); font-size: var(--nb-t-body-02); font-weight: 600; color: var(--nb-text-heading); }
.nb-seite__klapp summary::-webkit-details-marker { display: none; }
.nb-seite__klapp summary svg { width: 18px; height: 18px; flex: none; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-seite__klapp[open] summary svg { transform: rotate(180deg); }
.nb-seite__inhalt { display: flex; flex-direction: column; gap: var(--nb-space-m); padding-top: var(--nb-space-s); }
@media (min-width: 1100px) {
  /* Seitenleiste klebt nicht mehr, sie bleibt oben in der Karte stehen (Daniel 21.09.) */
  .nb-seite { position: static; }
  .nb-seite__klapp summary { display: none; }
  .nb-seite__inhalt { padding-top: 0; }
}
/* Schritt 1 unter 1100 px ohne Leiste "Deine Angaben" (Daniel 24.09.2026, Variante A): dort
   steht noch nichts drin, ab Schritt 2 ist sie wieder da. Die Klasse steht schon im HTML, weil
   der Ladeplatzhalter auch Schritt 1 zeigt. Ein kleines Skript im HTML nimmt sie vor dem ersten
   Zeichnen weg, wenn die Adresse auf einen spaeteren Schritt zeigt, danach haelt zeige() sie. */
@media (max-width: 1099px) { .nb-rechner--start > .nb-seite { display: none; } }
/* Angebot, Versand, Angenommen und Ausgaenge zeigen keinen Balken, auch nicht im Erstbild. Das
   Skript im HTML setzt die Klasse, zeige() nimmt sie weg (zustands-pruefer 25.09.2026, vorher
   42 px Sprung beim direkten Laden eines Angebots). */
.nb-rechner--ohne-balken .nb-fortschritt { display: none; }
/* Ohne Katalog, also ohne Netz: keine leere Seitenleiste, keine leere Knopfleiste, die Meldung
   steht allein (zustands-pruefer 25.09.2026). */
.nb-rechner--fehlt > .nb-seite, .nb-rechner--fehlt .nb-leiste:empty { display: none; }
@media (min-width: 1100px) { .nb-rechner--fehlt { grid-template-columns: minmax(0, 1fr); } }
.nb-seite__bild { width: 200px; height: 200px; border-radius: var(--nb-radius-card); object-fit: contain; background: var(--nb-surface-component); }
.nb-seite__block { display: flex; flex-direction: column; gap: 0; }
.nb-seite__leerbox { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--nb-space-xs); align-items: center; padding: var(--nb-space-s); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); }
/* 40 px statt 32 px (Daniel 24.09.2026, Icon A1): bei 32 px war das Handy nur 13 px breit */
.nb-seite__leerbox svg { width: 40px; height: 40px; margin-inline: auto; color: var(--nb-text-heading); }
.nb-seite__leerbox p { margin: 0; }
.nb-seite__block > .nb-label-01 { margin: 0; padding-bottom: var(--nb-space-3xs); }
.nb-seite__zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs); min-height: 56px; padding: var(--nb-space-xs) 0; border-bottom: 1px solid var(--nb-border-hairline); }
/* Neue Zeilen und geaenderte Chips blenden ein statt zu springen (Daniel 21.09.) */
.nb-seite__zeile--neu, .nb-chip--neu { animation: nb-rein var(--nb-motion-transform) var(--nb-motion-kurve) both; animation-delay: calc(var(--nb-i, 0) * 40ms); }
/* Der Chip bekommt zuerst seine volle Breite, die Frage nimmt den Rest und bricht bei Bedarf an ihrer Sollbruchstelle um (Rueckseite/ Rahmen). Erst wenn die Frage auf ihrer schmalsten Form steht und es immer noch nicht reicht, bricht der Chip-Text (Daniel 21.09.) */
.nb-seite__zeile .nb-chip { flex: 0 1 auto; min-width: 0; text-align: center; }
.nb-seite__zeile .nb-chip > span { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
.nb-seite__frage { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); line-height: 1.35; flex: 1 1 0; }
.nb-seite__leer { margin: 0; }
/* Antwort-Chip, m-pill Outline mit Stift */
.nb-chip { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); max-width: 100%; min-height: 36px; padding: var(--nb-space-2xs) var(--nb-space-xs); border: 1px solid var(--nb-ink-300); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); font: inherit; font-size: var(--nb-t-body-02); font-weight: 600; line-height: 1.3; color: var(--nb-text-heading); text-align: left; cursor: pointer; flex: 0 1 auto; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-chip:hover { border-color: var(--nb-ink-500); background: #FBFBFD; }
.nb-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-chip svg { width: 16px; height: 16px; flex: none; color: var(--nb-text-muted); }
/* Trust-Zeile, drei gedeckte Zusagen */
.nb-vertrauen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--nb-space-s); }
.nb-vertrauen li { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--nb-space-xs); align-items: center; }
.nb-vertrauen__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--nb-surface-info); display: grid; place-items: center; }
.nb-vertrauen__icon svg { width: 22px; height: 22px; color: var(--nb-text-heading); }
.nb-vertrauen div strong { display: block; font-size: var(--nb-t-body-02); font-weight: 600; line-height: 1.35; color: var(--nb-text-heading); }
.nb-vertrauen div span { display: block; font-size: var(--nb-t-legal-01); line-height: 1.4; color: var(--nb-text-muted); }
.nb-vertrauen-zeile { display: none; margin: 0; font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); text-align: center; }
@media (max-width: 767px) { .nb-vertrauen { display: none; } .nb-vertrauen-zeile { display: block; } }

/* m-fortschritt: Balken ohne Zahl (Daniel 20.09., bleibt) */
.nb-fortschritt { display: flex; align-items: center; gap: var(--nb-space-xs); }
.nb-fortschritt__balken { flex: 1 1 auto; height: 4px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component); overflow: hidden; }
.nb-fortschritt__zahl { flex: none; font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.nb-fortschritt__fuellung { height: 100%; width: 0; border-radius: var(--nb-radius-pill); background: var(--nb-action-primary); transition: width var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-fortschritt[hidden] { display: none; }

/* Bildschirm. Wechsel blendet in 300 ms ein, nicht auf Preis und Angebot */
.nb-bild { display: flex; flex-direction: column; gap: var(--nb-space-m); }
.nb-bild--rein { animation: nb-rein var(--nb-motion-transform) var(--nb-motion-kurve) both; }
@keyframes nb-rein { from { opacity: 0; transform: translateY(var(--nb-space-2xs)); } to { opacity: 1; transform: none; } }
.nb-bild__kopf { display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-bild__kopf h2 { margin: 0; outline: none; text-wrap: balance; }
.nb-bild__kopf h2:focus-visible { outline: none; box-shadow: none; }
.nb-bild__kopf p { margin: 0; }

/* m-tradein-hilfe: Fragen-Hinweis auf Flaeche, ab drei Saetzen ein Ausklapper */
.nb-hilfe { border: 1px solid var(--nb-border-hairline); background: var(--nb-surface-component); border-radius: var(--nb-radius-input); padding: var(--nb-space-xs) var(--nb-space-s); display: grid; grid-template-columns: 20px 1fr; column-gap: var(--nb-space-2xs); align-items: start; font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-body); }
.nb-hilfe svg { width: 20px; height: 20px; color: var(--nb-text-heading); margin-top: 0; }
.nb-hilfe p { margin: 0; }
.nb-hilfe summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--nb-text-heading); display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2xs); }
.nb-hilfe summary::-webkit-details-marker { display: none; }
.nb-hilfe summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 4px; transition: transform var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-hilfe details[open] summary::after { transform: rotate(-135deg); }
/* Fokus liegt um den ganzen Kasten, mit der einen Fokusformel. Die globale Regel (.nb-v3 :focus-visible) zog sonst
   einen eckigen Rahmen um den Text in der runden Fläche (Daniel 27.09.2026, Bild von Schritt 4) */
.nb-hilfe summary:focus, .nb-hilfe summary:focus-visible { outline: none; box-shadow: none; }
.nb-hilfe:has(summary:focus-visible) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page); }
.nb-hilfe details p { margin-top: var(--nb-space-2xs); }
.nb-hilfe__inhalt { overflow: hidden; transition: height var(--nb-motion-transform) var(--nb-motion-kurve), opacity var(--nb-motion-rand) var(--nb-motion-kurve); }
/* Keine Textmarkierung beim Klicken auf Bedienelemente */
.nb-hilfe summary, .nb-seite__klapp summary, .nb-kachel, .nb-chip, .nb-knopf, .nb-haken { user-select: none; -webkit-user-select: none; }
.nb-frage__bild { margin: 0; }
.nb-frage__bild img { width: 100%; max-width: 320px; border-radius: var(--nb-radius-input); display: block; }

/* m-tradein-kachel. Einspaltig in der Fragenspalte, zwei Spalten nur ohne Erklaertext */
.nb-kacheln { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-kacheln--zwei { grid-template-columns: 1fr 1fr; } .nb-kacheln--reihe { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.nb-kachel { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; column-gap: var(--nb-space-xs); align-items: center; width: 100%; min-height: 64px; padding: var(--nb-space-s) var(--nb-space-m); text-align: left; background: var(--nb-surface-page); border: 1px solid var(--nb-alpha-control); border-radius: var(--nb-radius-card); cursor: pointer; font: inherit; color: inherit; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), background var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kachel:hover { border-color: var(--nb-text-heading); }
.nb-kachel[aria-checked="true"] { border: 2px solid var(--nb-action-primary); padding: calc(var(--nb-space-s) - 1px) calc(var(--nb-space-m) - 1px); }
.nb-kachel__punkt { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--nb-border-control); display: grid; place-items: center; background: var(--nb-surface-page); }
.nb-kachel--multi .nb-kachel__punkt { border-radius: var(--nb-radius-badge); }
.nb-kachel[aria-checked="true"] .nb-kachel__punkt { border-color: var(--nb-action-primary); }
.nb-kachel[aria-checked="true"] .nb-kachel__punkt::after { content: ""; width: 10px; height: 10px; border-radius: inherit; background: var(--nb-action-primary); }
.nb-kachel--multi[aria-checked="true"] .nb-kachel__punkt::after { border-radius: calc(var(--nb-radius-badge) / 2); }
.nb-kachel__titel { display: block; font-size: var(--nb-t-body-01); font-weight: 600; line-height: 1.4; color: var(--nb-text-heading); }
.nb-kachel__sub { display: block; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); margin-top: var(--nb-space-3xs); }
.nb-kachel__haken { width: 24px; height: 24px; color: var(--nb-action-primary); opacity: 0; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kachel[aria-checked="true"] .nb-kachel__haken { opacity: 1; }
.nb-kachel__farbe { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--nb-alpha-decorative); }
.nb-kachel__ko { display: block; grid-column: 2 / -1; margin: var(--nb-space-2xs) 0 0; font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--nb-text-muted); }
.nb-kachel__ko[hidden] { display: none; }
.nb-kachel--kompakt { min-height: 56px; padding-inline: var(--nb-space-s); }
.nb-kachel--kompakt[aria-checked="true"] { padding-inline: calc(var(--nb-space-s) - 1px); }
.nb-kachel--kompakt .nb-kachel__titel { white-space: nowrap; }

/* Formular im Rechner. Felder, Aufklappliste und Fehler kommen aus nb-feld.css (komponenten-formular.md, Daniel
   27.09.2026). Hier bleibt nur das Raster und die Gruppe Speicher, die kein Feld ist, sondern Kacheln mit Überschrift. */
.nb-form { display: grid; grid-template-columns: 1fr; gap: var(--nb-space-s); }
@media (min-width: 768px) { .nb-form { grid-template-columns: 1fr 1fr; } .nb-form .nb-feld--voll { grid-column: 1 / -1; } }
.nb-feld { display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-feld[hidden] { display: none; }
.nb-feld__label { font-size: var(--nb-t-label-01); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nb-text-muted); }
.nb-dd__select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.nb-bild:has(.nb-dd.is-offen) { position: relative; z-index: 3; } /* offene Liste liegt ueber der klebenden Knopfleiste */
.nb-haken { display: grid; grid-template-columns: 24px 1fr; column-gap: var(--nb-space-xs); align-items: start; cursor: pointer; }
.nb-haken input { width: 20px; height: 20px; margin: 0; accent-color: var(--nb-action-primary); cursor: pointer; }
.nb-haken__text { font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-heading); }
.nb-haken--fehler .nb-haken__text { color: var(--nb-critical-text); }
.nb-klapp { grid-column: 2; margin-top: var(--nb-space-2xs); }
.nb-klapp summary { cursor: pointer; font-size: var(--nb-t-body-02); color: var(--nb-text-link); font-weight: 600; list-style: none; }
.nb-klapp summary::-webkit-details-marker { display: none; }
.nb-klapp ol { margin: var(--nb-space-xs) 0 0; padding-left: var(--nb-space-m); display: flex; flex-direction: column; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-body); }
.nb-fehlerbox { border: 1px solid var(--nb-critical-border); background: var(--nb-critical-bg); border-radius: var(--nb-radius-input); padding: var(--nb-space-s); outline: none; }
.nb-fehlerbox h3 { margin: 0 0 var(--nb-space-2xs); font-size: var(--nb-t-heading-03); color: var(--nb-critical-text); }
.nb-fehlerbox ul { margin: 0; padding-left: var(--nb-space-m); display: flex; flex-direction: column; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); }
.nb-fehlerbox a { color: var(--nb-critical-text); font-weight: 600; }
.nb-hinweisbox { border: 1px solid var(--nb-border-hairline); background: var(--nb-surface-component); border-radius: var(--nb-radius-input); padding: var(--nb-space-s); display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-hinweisbox h3 { margin: 0; font-size: var(--nb-t-heading-03); color: var(--nb-text-heading); }
.nb-hinweisbox ol { margin: 0; padding-left: var(--nb-space-m); display: flex; flex-direction: column; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); line-height: 1.5; color: var(--nb-text-body); }

/* m-tradein-preis: Panel mit Modellzeile, zwei gleichrangige Kacheln, Betrag 40 px in Night */
.nb-panel { background: var(--nb-surface-component); border-radius: var(--nb-radius-card); padding: var(--nb-space-m); display: flex; flex-direction: column; gap: var(--nb-space-s); }
.nb-panel p { margin: 0; }
.nb-m0 { margin: 0; }
.nb-preis__wahl { display: grid; grid-template-columns: 1fr; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-preis__wahl { grid-template-columns: 1fr 1fr; } }
.nb-preis__wahl li { display: flex; }
.nb-preis__wahl .nb-kachel { align-items: start; padding-block: var(--nb-space-m); height: 100%; }
.nb-preis__wahl .nb-kachel[aria-checked="true"] { padding-block: calc(var(--nb-space-m) - 1px); }
.nb-preis__wahl .nb-kachel > span:nth-child(2) > :not(.nb-preis__kopf) { display: block; }
.nb-preis__wahl .nb-kachel .nb-preis__kopf { display: flex; align-items: center; gap: var(--nb-space-2xs); }
/* ---------- Hellblau (Daniel 21.09., Probe): der uebliche Web-Look. Ruhe Haarlinie, Hover Haarlinie dunkler, gewaehlt hellblaue Flaeche (surface-stage) mit Sky-Rand, Night-Text und Signal-Haken. Kein Punkt. Achtung: Pastell-Flaeche als Kachelgrund ist im Farbsystem gestrichen, das waere eine Ausnahme. ---------- */
.nb-kachel { grid-template-columns: minmax(0, 1fr) 24px; border: 1px solid var(--nb-border-hairline); padding: var(--nb-space-s) var(--nb-space-m); background: var(--nb-surface-page); transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), background var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-kachel:hover { border-color: var(--nb-ink-300); background: #FBFBFD; }
.nb-kachel[aria-checked="true"] { border: 1px solid var(--nb-sky-500); padding: var(--nb-space-s) var(--nb-space-m); background: var(--nb-surface-stage); }
.nb-kachel[aria-checked="true"]:hover { border-color: var(--nb-sky-500); background: var(--nb-surface-stage); }
.nb-kachel__punkt { display: none; }
.nb-kachel:has(> .nb-kachel__farbe) { grid-template-columns: 16px minmax(0, 1fr) 24px; }
.nb-kachel__ko { grid-column: 1 / -1; }
.nb-kachel--kompakt, .nb-kachel--kompakt[aria-checked="true"] { padding-inline: var(--nb-space-s); }
.nb-preis__wahl .nb-kachel, .nb-preis__wahl .nb-kachel[aria-checked="false"] { border: 1px solid var(--nb-border-hairline); box-shadow: none; padding-block: var(--nb-space-m); }
.nb-preis__wahl .nb-kachel[aria-checked="false"]:hover { border-color: var(--nb-ink-300); }
.nb-preis__wahl .nb-kachel[aria-checked="true"] { border: 1px solid var(--nb-sky-500); padding-block: var(--nb-space-m); background: var(--nb-surface-stage); box-shadow: none; }
/* Preiskarten zur Information (SPEZ §C0, vk-rechner-uebergabe 28.09.2026): gewaehlt wird im Schritt Auszahlung. Masse
   der ruhenden Kachel oben, ohne Hover, Fokus und Wahl (design-auditor Modus A, Vorbild S-Aussage-Kacheln,
   komponenten-strecke-konto.md). .nb-preis__wahl und .nb-kachel bleiben fuer die statische Seite bis zum Go-live. */
.nb-preis__info { display: grid; grid-template-columns: 1fr; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-preis__info { grid-template-columns: 1fr 1fr; } }
.nb-preiskarte { background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); padding: var(--nb-space-m); }
.nb-preiskarte > :not(.nb-preis__kopf) { display: block; }
.nb-preiskarte .nb-preis__kopf { display: flex; align-items: center; gap: var(--nb-space-2xs); }

/* C1 (Daniel 21.09.): Mehrbetrag des Gutscheins als Mint-Pill, Mint nur fuer Ersparnis laut farbsystem.md. Betrag kommt vom Warehouse. */
.nb-mehr { margin-left: auto; padding: var(--nb-space-3xs) var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-mint); color: var(--nb-mint-ink); font-size: var(--nb-t-legal-01); font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.2; white-space: nowrap; }
.nb-preis__kopf svg { width: 22px; height: 22px; color: var(--nb-text-heading); }
/* Rollwerk fuer die Zaehlung */
.zk { display: inline-flex; }
.zk-slot { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.zk-strip { display: block; transition: transform 140ms cubic-bezier(.2, .7, .3, 1); will-change: transform; }
.zk-strip span { display: block; height: 1em; line-height: 1; }
.zk-fix { display: inline-block; height: 1em; line-height: 1; }
.nb-preis__betrag { display: block; font-size: var(--nb-t-display-02); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--nb-text-heading); font-variant-numeric: tabular-nums lining-nums; margin: var(--nb-space-xs) 0 var(--nb-space-2xs); }
.nb-angebot__summe { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nb-space-xs); }
.nb-angebot__nummer { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }

/* m-tradein-wertverlauf, Entwurf A1 vom 20.09. (Daniel: "genauso perfekt"). Prefix va1, Token gemappt */
.nb-v3 .va1 {
  --va1-night: var(--nb-text-heading);
  --va1-signal: var(--nb-action-primary);
  --va1-signal-700: var(--nb-text-accent);
  --va1-sky-300: var(--nb-surface-info);
  --va1-sky-500: var(--nb-sky-500);
  --va1-ink-100: var(--nb-surface-component);
  --va1-ink-200: var(--nb-border-hairline);
  --va1-ink-600: var(--nb-text-muted);
  --va1-ink-700: var(--nb-text-body);
  --va1-white: var(--nb-surface-page);
  --va1-ease: var(--nb-motion-kurve);
  display: block;
  max-width: 100%;
  color: var(--va1-night);
}
.va1 *,
.va1 *::before,
.va1 *::after { box-sizing: border-box; }

.va1-title {
  margin: 0 0 var(--nb-space-3xs);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--va1-night);
}
.va1-lead {
  margin: 0 0 var(--nb-space-s);
  max-width: 52ch;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--va1-ink-700);
}

/* Grafik */
.va1-chart { position: relative; }
.va1-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}
.va1-area {
  fill: url(#va1-grad);
  opacity: 1;
  transition: opacity 600ms var(--va1-ease);
}
.va1-area.va1-draw { opacity: 0; }
.va1-area.va1-draw.va1-drawn { opacity: 1; }
.va1-line {
  fill: none;
  stroke: var(--va1-night);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.va1-line.va1-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 600ms var(--va1-ease);
}
.va1-line.va1-draw.va1-drawn { stroke-dashoffset: 0; }
.va1-base {
  fill: none;
  stroke: var(--va1-ink-200);
  stroke-width: 1;
}
.va1-guide {
  fill: none;
  stroke: var(--va1-signal);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity 150ms var(--va1-ease);
}
.va1-guide.va1-on { opacity: 1; }

/* Punkte */
.va1-point { cursor: pointer; outline: none; }
.va1-hit { fill: var(--va1-white); fill-opacity: 0; stroke: none; }
.va1-dot {
  fill: var(--va1-white);
  stroke: var(--va1-night);
  stroke-width: 2;
  transition: fill 150ms var(--va1-ease), stroke 150ms var(--va1-ease);
}
.va1-dot.va1-dot-today { fill: var(--va1-night); }
.va1-halo {
  fill: none;
  stroke: var(--va1-signal);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 150ms var(--va1-ease);
}
.va1-point.va1-active .va1-dot {
  fill: var(--va1-signal);
  stroke: var(--va1-signal);
}
.va1-point.va1-active .va1-halo { opacity: .35; }
.va1-point:focus-visible .va1-halo { opacity: 1; }

/* Lupe */
.va1-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: grid;
  gap: var(--nb-space-3xs);
  padding: var(--nb-space-2xs) var(--nb-space-xs);
  border-radius: var(--nb-radius-input);
  background: var(--va1-white);
  box-shadow: 0 10px 28px rgba(1, 12, 40, .12), 0 1px 2px rgba(1, 12, 40, .08);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms var(--va1-ease), visibility 0s linear 150ms;
}
.va1-tip.va1-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 150ms var(--va1-ease), visibility 0s;
}
.va1-tip-when {
  font-size: 12px;
  line-height: 16px;
  color: var(--va1-ink-600);
}
.va1-tip-amount {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--va1-night);
  font-variant-numeric: tabular-nums;
}
.va1-tip-diff {
  font-size: 12px;
  line-height: 16px;
  color: var(--va1-ink-700);
  font-variant-numeric: tabular-nums;
}

/* Beschriftungen */
.va1-axis { min-height: 52px;
  position: relative;
  height: 40px;
  margin-top: 8px;
}
.va1-tick {
  position: absolute;
  top: 0;
  display: grid;
  gap: var(--nb-space-3xs);
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.va1-tick-when {
  font-size: 12px;
  line-height: 16px;
  color: var(--va1-ink-600);
  transition: color 150ms var(--va1-ease);
}
.va1-tick-amount {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: var(--va1-night);
  font-variant-numeric: tabular-nums;
}
.va1-tick.va1-active .va1-tick-when {
  color: var(--va1-signal-700);
  font-weight: 600;
}

/* Schmale Container (unter 420 px): Grafik höher, Labels zweizeilig */
.va1-narrow .va1-axis { height: 56px; }
.va1-narrow .va1-tick { top: auto; bottom: 0; }
.va1-narrow .va1-tick-when {
  white-space: normal;
  width: 4.6em;
  margin: 0 auto;
}

.va1-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--va1-ink-600);
}

@media (prefers-reduced-motion: reduce) {
  .va1 *,
  .va1 *::before,
  .va1 *::after { transition: none !important; }
  .va1-line.va1-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .va1-area.va1-draw { opacity: 1; }
}

/* Knoepfe. Signal-Blau als einziges CTA-System (Daniel 20.09.) */
.nb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs); min-height: 48px; padding: 0 var(--nb-space-m); border-radius: var(--nb-radius-pill); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; 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); }
.nb-knopf--primaer { background: var(--nb-action-primary); color: var(--nb-action-primary-label); border: 1px solid var(--nb-action-primary); }
.nb-knopf--primaer:hover { background: var(--nb-action-primary-hover); border-color: var(--nb-action-primary-hover); }
.nb-knopf--primaer:active { background: var(--nb-action-primary-active); }
.nb-knopf--primaer[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.nb-knopf--pille { background: transparent; color: var(--nb-text-heading); border: 1px solid var(--nb-ink-300); }
.nb-knopf--pille:hover { border-color: var(--nb-ink-500); background: #FBFBFD; }
.nb-knopf--laedt { position: relative; color: transparent; }
/* Der ladende Knopf behaelt seine Flaeche (farbsystem.md, Ladezustand), er ist nicht gesperrt, er wartet */
.nb-knopf--primaer.nb-knopf--laedt[aria-disabled="true"] { opacity: 1; }
/* Ablehnen-Abfrage (Daniel 21.09.) */
.nb-dialog { width: min(520px, calc(100vw - 32px)); margin: auto; padding: var(--nb-space-l); border: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); color: var(--nb-text-body); box-shadow: var(--nb-sh-panel); display: none; flex-direction: column; gap: var(--nb-space-m); }
.nb-dialog[open] { display: flex; animation: nb-rein var(--nb-motion-transform) var(--nb-motion-kurve) both; }
.nb-dialog::backdrop { background: rgb(1 12 40 / .55); }
.nb-dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); }
.nb-dialog__kopf h2 { margin: 0; }
.nb-dialog__schliessen { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--nb-border-control); border-radius: 50%; background: transparent; color: var(--nb-text-heading); cursor: pointer; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-dialog__schliessen:hover { border-color: var(--nb-text-heading); }
.nb-dialog__schliessen svg { width: 18px; height: 18px; }
.nb-dialog__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-wahl { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs); min-height: 56px; padding: var(--nb-space-s) var(--nb-space-m); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); cursor: pointer; font-size: var(--nb-t-body-01); font-weight: 600; color: var(--nb-text-heading); transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), background var(--nb-motion-farbe) var(--nb-motion-kurve); user-select: none; }
.nb-wahl:hover { border-color: var(--nb-ink-300); background: #FBFBFD; }
.nb-wahl:has(input:checked) { border-color: var(--nb-sky-500); background: var(--nb-surface-stage); }
.nb-wahl input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nb-wahl::after { content: ""; width: 22px; height: 22px; flex: none; opacity: 0; background: no-repeat center / 22px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235850FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>"); transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-wahl:has(input:checked)::after { opacity: 1; }
.nb-wahl:has(input:focus-visible) { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
.nb-dialog__absenden { width: 100%; }
.nb-dialog__ueberspringen { align-self: center; background: none; border: 0; padding: var(--nb-space-2xs); font: inherit; font-size: var(--nb-t-body-02); font-weight: 600; color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 767px) { .nb-dialog { padding: var(--nb-space-m); } }
/* Textlinks in Rechtssaetzen (Ankaufsbedingungen, Datenschutz), wie der Textknopf im Ablehnen-Dialog: Night, unterstrichen (25.09.2026) */
.nb-bild .nb-legal-01 a { color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; }
.nb-knopf--laedt::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--nb-action-primary-label); border-right-color: transparent; animation: nb-dreh .8s linear infinite; }
@keyframes nb-dreh { to { transform: rotate(360deg); } }
.nb-leiste { display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
.nb-leiste .nb-knopf { width: 100%; }
.nb-leiste__gruppe { display: flex; flex-direction: column-reverse; gap: var(--nb-space-2xs); }
@media (min-width: 768px) { .nb-leiste__gruppe { flex-direction: row; gap: var(--nb-space-xs); } .nb-leiste__gruppe .nb-knopf { width: auto; } }
.nb-leiste--klebt { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--nb-space-s)) calc(-1 * var(--nb-space-s)); padding: var(--nb-space-xs) var(--nb-space-s) calc(var(--nb-space-xs) + env(safe-area-inset-bottom)); background: var(--nb-surface-page); border-top: 1px solid var(--nb-border-hairline); border-radius: 0 0 var(--nb-radius-card) var(--nb-radius-card); z-index: 2; }
@media (min-width: 768px) {
  .nb-leiste { flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  .nb-leiste .nb-knopf { width: auto; }
  .nb-leiste--klebt { position: static; margin: 0; padding: 0; border: 0; background: transparent; }
}
.nb-recht { margin: var(--nb-space-s) 0 0; font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); display: flex; gap: var(--nb-space-xs); flex-wrap: wrap; }
.nb-recht a { color: var(--nb-text-muted); text-underline-offset: 2px; }

/* Ausgaenge */
.nb-ausgang { display: flex; flex-direction: column; gap: var(--nb-space-m); }
.nb-ausgang__text { margin: 0; max-width: 60ch; }
.nb-ausgang__knoepfe { display: flex; flex-direction: column; gap: var(--nb-space-2xs); }
@media (min-width: 768px) { .nb-ausgang__knoepfe { flex-direction: row; } }
.nb-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-2xs); }
.nb-vergleich > div { border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); padding: var(--nb-space-s); background: var(--nb-surface-page); }
.nb-vergleich .nb-preis__betrag { font-size: var(--nb-t-price-01); }
.nb-vergleich--alt .nb-preis__betrag { color: var(--nb-text-muted); text-decoration: line-through; }

/* ---------- FAQ-Karte unter dem Preis-Bildschirm (Daniel 21.09.), Bauform E4 in der Huelle "Karte". Variante B, Ruhe: nur Haarlinien, offene Zeile auf surface-component ---------- */
.nb-fragen-karte { position: relative; margin-top: var(--nb-space-m); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-panel); padding: var(--nb-space-s); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nb-space-m); }
.nb-fragen-karte[hidden] { display: none; }
.nb-fragen-karte__kopf { display: flex; flex-direction: column; gap: var(--nb-space-2xs); max-width: 34ch; }
.nb-fragen-karte__kopf h2, .nb-fragen-karte__kopf p { margin: 0; }
.nb-fragen-karte__kopf h2 { text-wrap: balance; }
.nb-fragen-karte__kopf p { color: var(--nb-text-muted); }
@media (min-width: 768px) { .nb-fragen-karte { padding: var(--nb-space-m); } }
@media (min-width: 1100px) {
  .nb-fragen-karte { margin-top: var(--nb-space-l); padding: var(--nb-space-l); grid-template-columns: 360px minmax(0, 1fr); column-gap: var(--nb-space-xl); align-items: start; }
  .nb-fragen-karte__kopf { position: sticky; top: var(--nb-space-m); }
}
/* Die Liste ist huellen-neutral, dieselben Klassen gehen auf das weisse Band der Startseite (nb-fragen) */
.nb-fragen__liste { display: flex; flex-direction: column; min-width: 0; }
.nb-fragen__eintrag { position: relative; border-radius: var(--nb-radius-input); background: transparent; transition: background var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-fragen__eintrag + .nb-fragen__eintrag::before { content: ""; position: absolute; inset: 0 var(--nb-space-xs) auto; height: 1px; background: var(--nb-border-hairline); transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-fragen__eintrag[open] { background: var(--nb-surface-component); }
.nb-fragen__eintrag[open]::before, .nb-fragen__eintrag[open] + .nb-fragen__eintrag::before { opacity: 0; }
.nb-fragen__frage { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-s) var(--nb-space-xs); cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; border-radius: var(--nb-radius-input); }
.nb-fragen__frage::-webkit-details-marker { display: none; }
.nb-fragen__frage-text { min-width: 0; }
.nb-fragen__zeichen { width: 20px; height: 20px; flex: none; color: var(--nb-text-muted); transition: transform var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-fragen__frage:hover .nb-fragen__zeichen { color: var(--nb-text-heading); }
.nb-fragen__eintrag[open] .nb-fragen__zeichen { transform: rotate(180deg); }
.nb-fragen__antwort { overflow: hidden; transition: height var(--nb-motion-farbe) var(--nb-motion-kurve), opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-fragen__antwort-inhalt { padding: 0 var(--nb-space-xs) var(--nb-space-s); max-width: var(--nb-measure); }
.nb-fragen__antwort-inhalt p { margin: 0; }
.nb-fragen__antwort-inhalt p + p { margin-top: var(--nb-space-xs); }
@media (min-width: 768px) {
  .nb-fragen__frage { padding: var(--nb-space-s); }
  .nb-fragen__eintrag + .nb-fragen__eintrag::before { inset: 0 var(--nb-space-s) auto; }
  .nb-fragen__antwort-inhalt { padding: 0 var(--nb-space-s) var(--nb-space-s); }
}
@media (prefers-reduced-motion: reduce) { .nb-fragen__eintrag, .nb-fragen__eintrag::before, .nb-fragen__zeichen, .nb-fragen__antwort { transition: none; } }

/* Weicherer Panel-Schatten, wenn zwei Karten untereinander stehen (Daniel 21.09.): Deckung 0,34 auf 0,18. Abweichung vom Token --nb-sh-panel, Frage an Design im Briefkasten */
.nb-tradein { --nb-sh-panel: 0 2px 4px rgb(var(--nb-night-rgb) / .04), 0 18px 44px -20px rgb(var(--nb-night-rgb) / .18); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hinweisband im Modus Testdaten. Faellt im Live-Betrieb weg, weil die
   Section es dann gar nicht erst rendert. Bewusst leise, es ist kein Kundentext. ---------- */
.nb-tradein__testband { margin: 0 0 var(--nb-space-s); padding: var(--nb-space-2xs) var(--nb-space-xs); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); background: var(--nb-surface-component); text-align: center; }

/* ---------- Ladezustand, bis der Katalog da ist (Daniel 24.09.2026) ----------
   Vorher stand bis zum Katalog nur ein leerer Rahmen von 118 px, danach 409 px
   (gemessen bei 1440 px). Die Seite sprang also um 291 px. Jetzt liegt im Markup
   ein Abbild des ersten Bildschirms, das der Rechner beim ersten Zeichnen ersetzt.
   Es traegt die echten Texte, aber unsichtbar. So hat es auf jeder Breite exakt die
   Hoehe des fertigen Bildschirms, auch wo Zeilen umbrechen.

   Werte aus farbsystem.md Zeile 288: Flaeche ink-100, Lichtstreif #F9FAFC, Sweep
   1200 ms auf der einen Kurve, bei reduced-motion statisch, unter 400 ms Wartezeit
   gar nichts. Der Platz ist trotzdem sofort reserviert, nur die Flaeche erscheint
   erst nach 400 ms. #F9FAFC steht noch nicht in design-tokens.json, deshalb hier
   als lokale Variable. */
.nb-rechner { --nb-skelett-licht: #F9FAFC; }
.nb-skelett {
  color: transparent !important;
  border-color: transparent !important;
  background: var(--nb-ink-100) linear-gradient(90deg, transparent 0, var(--nb-skelett-licht) 50%, transparent 100%) no-repeat !important;
  background-size: 200% 100% !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: var(--nb-radius-badge);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  animation: nb-skelett-zeigen var(--nb-motion-farbe) var(--nb-motion-kurve) 400ms forwards, nb-skelett-streif var(--nb-motion-skeleton-sweep) var(--nb-motion-kurve) 400ms infinite;
}
.nb-skelett svg { visibility: hidden; }
/* Texte in Kindern bringen eigene Farben mit (.nb-v3 .nb-body-02), deshalb auch dort. */
.nb-skelett * { color: transparent !important; }
.nb-skelett.nb-knopf, .nb-skelett.nb-vertrauen__icon { border-radius: var(--nb-radius-pill); }
.nb-skelett.nb-fl__eingabe, .nb-skelett.nb-hilfe, .nb-skelett.nb-seite__leerbox { border-radius: var(--nb-radius-input); }
@keyframes nb-skelett-zeigen { to { opacity: 1; } }
@keyframes nb-skelett-streif { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
  .nb-skelett { background-image: none !important; animation: nb-skelett-zeigen 1ms linear 400ms forwards; }
}
/* Die Seitenleiste ist ein <details>, ab 1100 px oeffnet sie erst das Skript. Ihr
   Abbild steht deshalb neben dem <details> und zeigt sich nur, solange der Rechner
   laedt und nur ab 1100 px. Darunter ist die Leiste eingeklappt, da reicht die
   Zusammenfassung, die schon im Markup steht. */
.nb-seite__skelett { display: none; }
@media (min-width: 1100px) {
  .nb-rechner--laedt .nb-seite__skelett { display: flex; flex-direction: column; gap: var(--nb-space-m); }
}

/* Platzhalter des eingeklappten Hinweises: eine Zeile wie die summary, gleiches Gewicht,
   damit beim ersten Zeichnen nichts springt (Daniel 24.09.2026, alle Hinweise eingeklappt). */
.nb-hilfe__zu { font-weight: 600; }

/* Angebot am Handy (Daniel 24.09.2026, Vorbild Back Market): Ablehnen und Annehmen stehen fest
   am unteren Bildschirmrand, nebeneinander, mit deckender Flaeche, solange man ueber Angebot,
   Kurve und Fragen scrollt. Auf den Fragen davor klebt nichts mehr. Zurueck faellt in der
   festen Leiste weg, dafuer gibt es die Zurueck-Taste des Browsers und die Angaben oben. */
@media (max-width: 767px) {
  .nb-leiste--angebot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: var(--nb-space-xs) var(--nb-space-s) calc(var(--nb-space-xs) + env(safe-area-inset-bottom)); background: var(--nb-surface-page); border-top: 1px solid var(--nb-border-hairline); }
  .nb-leiste--angebot > .nb-knopf--pille { display: none; }
  .nb-leiste--angebot .nb-leiste__gruppe { flex-direction: row; gap: var(--nb-space-xs); }
  .nb-leiste--angebot .nb-leiste__gruppe .nb-knopf { flex: 1 1 0; width: auto; padding-inline: var(--nb-space-xs); }
  /* Platz unter dem letzten Inhalt, damit die feste Leiste nichts verdeckt */
  .nb-tradein--lang { padding-block-end: calc(var(--nb-space-sektion-gross) + 72px + env(safe-area-inset-bottom)); }
}

/* Desktop (Daniel 24.09.2026): Rechner oben, 48 px unter dem Kopf, wie in der Vorschau vom
   21.09. oben angeschlagen, nur mit weniger Luft als die frueheren 85 px. Kurz davor stand er
   mittig, das wurde verworfen: kurze Stufen standen tiefer als lange, der Rechner wanderte beim
   Weiterklicken, und die geoeffnete Modellliste lief unten aus dem Fenster. Gemessen mit 48 px:
   Modellliste ganz sichtbar bei 1440 x 900 und 1900 x 1066, laengste Stufe (Display) ohne
   Scrollen bei 1900 x 1066. Das graue Band fuellt weiter das Fenster (min-height). */
@media (min-width: 1100px) {
  .nb-tradein { padding-block: var(--nb-space-xl) var(--nb-space-m); }
}

/* Luft ueber dem Rechner unter 1100 px (Daniel 24.09.2026, "auf mobile ist oben auch ein recht
   grosser Abstand"): vorher min(sektion-gross, 8vh), am iPhone 68 px. Jetzt 16 px bis 767 px,
   24 px bis 1099 px, wie ueber dem Desktop-Rechner. */
@media (max-width: 767px) { .nb-tradein { padding-block-start: var(--nb-space-s); } }
@media (min-width: 768px) and (max-width: 1099px) { .nb-tradein { padding-block-start: var(--nb-space-m); } }

/* Lang- und Kurzform eines Knopfs. Kurz nur in der festen Angebotsleiste am Handy. */
.nb-knopf__kurz { display: none; }
@media (max-width: 767px) {
  .nb-leiste--angebot .nb-knopf__lang { display: none; }
  .nb-leiste--angebot .nb-knopf__kurz { display: inline; }
}
@media (min-width: 1100px) { .nb-tradein--lang { padding-block-start: var(--nb-space-xl); } }

/* Marke als Auswahlfeld ueber dem Modell (Daniel 25.09.2026 nachmittags, Vertrag v2.9). Der
   Hinweis einer gesperrten Marke steht als Hilfetext .nb-fl__hilfe darunter (m-feld,
   komponenten-tradein §2). Platzhalter beim Laden: Ueberschrift, Marke, Modell. Nennt die Adresse
   nur die Kategorie (/verkaufen/smartphones), setzt das Inline-Skript nb-rechner--ohne-marke,
   dann steht die Ueberschrift ohne iPhone da und das Modell faellt weg. */
.nb-rechner--ohne-marke .nb-skelett-mit-marke, .nb-rechner--ohne-marke .nb-skelett-modell, .nb-rechner:not(.nb-rechner--ohne-marke) .nb-skelett-ohne-marke { display: none; }