/* Erzeugt von baukasten/werkzeug/exportieren.mjs. Nicht von Hand ändern, Quelle ist der Baukasten:
   baukasten/kern/schale.css
   baukasten/kern/bewegung.css
   baukasten/sektionen/kopf/sektion.css
   baukasten/sektionen/buehne/sektion.css
   baukasten/sektionen/kategorien/sektion.css
   baukasten/sektionen/zusagen/sektion.css
   baukasten/sektionen/angebot/sektion.css
   baukasten/sektionen/ablauf/sektion.css
   baukasten/sektionen/stimmen/sektion.css
   baukasten/sektionen/fragen/sektion.css
   baukasten/sektionen/modelle/sektion.css
   baukasten/sektionen/schlussruf/sektion.css
   baukasten/sektionen/fuss/sektion.css */

/* 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(var(--nb-night-rgb) / .04), 0 18px 44px -20px rgb(var(--nb-night-rgb) / .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(var(--nb-night-rgb) / .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(var(--nb-night-rgb) / .28), 0 1px 6px rgb(var(--nb-night-rgb) / .16);
  --nb-s-karte-schatten-hoch: 0 0 1px rgb(var(--nb-night-rgb) / .32), 0 4px 12px rgb(var(--nb-night-rgb) / .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) */
.nb-konto-seite :is(.nb-pr__liste, .nb-az__wahl--liste, .nb-vdl-b, .nb-vdb-t, .nb-vdz__panel, .nb-vdg-c li, .nb-vdd-c a) {
  background: var(--nb-s-karte-grund); border-color: var(--nb-s-karte-rand); box-shadow: var(--nb-s-karte-schatten);
}

/* ---------- 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) { border-width: 0; }
/* 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 */
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten {
  gap: var(--nb-space-xs); padding: var(--nb-space-xs); border-radius: var(--nb-radius-input); background: var(--nb-ink-100);
}
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten .nb-s-zusage {
  gap: var(--nb-space-xs); padding: 0; border: 0;
}
.nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s-zusagen__liste--kasten .nb-s-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--nb-radius-badge); background: var(--nb-surface-page);
}

/* 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);
}
/* Konto-Band trägt seinen Warnstreifen links als inset-Schatten weiter */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"], [data-nb-grund="grau"], [data-nb-grund="rebuy"]) .nb-bd--karte { box-shadow: var(--nb-s-karte-schatten), inset 4px 0 0 var(--nb-warning-solid); }
/* Hover: nie Rand, nie Tönung, nur der stärkere Schatten */
.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 */
.nb-bk:is([data-nb-grund^="k"], [data-nb-grund="bm"]) :is(.nb-s-suche__treffer, .nb-kr--menue, .nb-vk-fenster, .nb-vdz__fenster, .nb-ad__fenster) {
  border-color: transparent; box-shadow: var(--nb-s-panel-schatten);
}
/* 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--erzaehlend { margin-block-end: var(--nb-space-l); }
.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; }
.nb-s-kopf__link { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--nb-ink-300); white-space: nowrap; }
.nb-s-kopf__link:hover { text-decoration-color: currentColor; }

/* 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); }
.nb-s-karte--panel { box-shadow: var(--nb-s-panel-schatten); }
.nb-s-feld { background: var(--nb-surface-component); border-radius: var(--nb-radius-input); }

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

/* Pillen */
.nb-s-pille { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 28px; padding: 0 var(--nb-space-xs); border-radius: var(--nb-radius-pill); font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-semibold); line-height: 1.2; white-space: nowrap; }
.nb-s-pille--mint { background: var(--nb-mint); color: var(--nb-mint-ink); }
.nb-s-pille--leise { background: var(--nb-surface-component); color: var(--nb-text-muted); }
.nb-s-pille--rand { border: 1px solid var(--nb-ink-300); color: var(--nb-text-heading); background: var(--nb-surface-page); }

.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/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; }
.nb-bk :is(.nb-s-buehne__bis, .nb-s-kachel__zeile) { -webkit-user-select: text; user-select: text; }

/* 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(20px); 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) * 60ms); }
.nb-m-reveal.nb-m-da { opacity: 1; transform: none; }

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

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

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

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

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

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

/* baukasten/sektionen/kopf/sektion.css */
/* Schmaler Kopf und Fuß (Varianten kopf:schmal, fuss:schmal), weiß mit Haarlinie, 64 px wie die Strecke */
.nb-anm-kopf { background: var(--nb-surface-page); border-bottom: 1px solid var(--nb-border-hairline); }
/* Wortmarke mittig (Daniel 27.09.2026 nachts: „Logo oben mittig“) */
.nb-anm-kopf__innen { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 64px; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin-inline: auto; padding-inline: var(--nb-s-rand); }
.nb-anm-kopf__logo { display: inline-flex; min-height: 44px; align-items: center; }
.nb-anm-kopf__logo img { display: block; width: 100px; height: auto; }

/* baukasten/sektionen/buehne/sektion.css */
/* Bühne (A1). Beide Varianten teilen Brotkrumen, Eyebrow, H1, Satz und Suchfeld. */
.nb-s-buehne { margin-block-start: 0; }
.nb-s-buehne__krumen ol { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: var(--nb-space-m) 0 0; list-style: none; font-size: var(--nb-t-body-02); }
.nb-s-buehne__krumen li + li::before { content: "›"; margin-inline-end: var(--nb-space-2xs); color: var(--nb-text-muted); }
.nb-s-buehne__krumen a { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; }
.nb-s-buehne__krumen a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nb-s-buehne__krumen [aria-current] { color: var(--nb-text-muted); }

.nb-s-buehne__kopf { display: flex; flex-direction: column; align-items: flex-start; padding-block-start: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-buehne__kopf { padding-block-start: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-s-buehne__kopf { padding-block-start: var(--nb-space-xl); } }
.nb-s-buehne__kopf--mittig { align-items: center; text-align: center; }
.nb-s-buehne__eyebrow { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); margin: 0 0 var(--nb-space-s); 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-s-buehne__eyebrow svg { width: 20px; height: 20px; color: var(--nb-text-heading); }
.nb-v3 .nb-s-buehne h1 { margin: 0; text-wrap: balance; }
.nb-v3 .nb-s-buehne h1 em { font-size: calc(1em * 1.03); }
.nb-s-buehne__satz { margin: var(--nb-space-s) 0 0; font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); line-height: 1.35; letter-spacing: -0.01em; color: var(--nb-text-heading); }

/* Suchfeld wie die Auswahlfelder im Rechner: Radius 16, Rand control, im Fokus Signal */
.nb-s-suche { position: relative; width: 100%; margin: var(--nb-space-l) 0 0; text-align: left; }
.nb-s-buehne__kopf--mittig .nb-s-suche { max-width: 720px; }
/* Die Pille ist m-suche aus nb-feld.css (komponenten-formular.md §4, 27.09.2026). Ohne Knopf rechts nur Platz fürs x */
.nb-su--ohne-knopf .nb-su__eingabe { padding-right: 48px; }
.nb-su--ohne-knopf .nb-su__beispiel { right: 16px; }
.nb-su--ohne-knopf .nb-su__leeren { right: 6px; }
.nb-s-suche__treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: var(--nb-space-2xs); list-style: none; background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input); box-shadow: var(--nb-sh-panel); }
.nb-s-suche__treffer a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; justify-content: space-between; gap: var(--nb-space-s); padding: var(--nb-space-xs) var(--nb-space-s); border-radius: var(--nb-radius-badge); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; }
.nb-s-suche__treffer a:hover, .nb-s-suche__treffer [aria-selected="true"] a { background: var(--nb-ink-100); }
.nb-s-suche__bis { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); white-space: nowrap; }
.nb-s-suche__leer { padding: var(--nb-space-xs) var(--nb-space-s); color: var(--nb-text-muted); font-size: var(--nb-t-body-02); }

/* Varianten b, c, d: Such-Karte auf dem Rechner-Grund. c und d nur ab 1100 px auf Grau, darunter Weiß */
.nb-s.nb-s-buehne--b, .nb-s.nb-s-buehne--c, .nb-s.nb-s-buehne--d { padding-block: 0 var(--nb-space-2xl); }
/* Bühnenton über --nb-s-buehne (kern/schale.css), heute surface-secondary, in den Leitern k1 bis k3 eine Stufe unter
   dem Seitengrund (Flächen-System, Daniel 30.09.2026) */
.nb-s.nb-s-buehne--b { background: var(--nb-s-buehne, var(--nb-surface-secondary)); }
@media (min-width: 1100px) { .nb-s.nb-s-buehne--c, .nb-s.nb-s-buehne--d { background: var(--nb-s-buehne, var(--nb-surface-secondary)); } }
/* OFFEN (Daniel): unter 1100 px ist die Bühne heute weiß. Auf getöntem Grund trägt sie hier vorerst den Bühnenton,
   sonst wäre sie vom Grund nicht zu unterscheiden. Mit Luft nach unten, damit die Suche nicht an der Kante klebt */
@media (max-width: 1099px) {
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--d { background: var(--nb-s-buehne); padding-block-end: var(--nb-space-l); margin-block-end: 0; }
}
.nb-s-buehne__raster { display: grid; gap: var(--nb-space-l); align-items: center; padding-block-start: var(--nb-space-l); }
@media (min-width: 1100px) { .nb-s-buehne__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nb-space-2xl); padding-block-start: var(--nb-space-xl); } }
.nb-s-buehne__raster .nb-s-buehne__kopf { padding-block-start: 0; }

/* c: unter 1100 px liegt die Karte in einem grauen Bühnenkasten, ab 1100 px trägt die Sektion das Grau */
.nb-s-buehne__kasten { padding: var(--nb-space-s); background: var(--nb-surface-secondary); border-radius: var(--nb-radius-container); }
@media (min-width: 768px) { .nb-s-buehne__kasten { padding: var(--nb-space-m); } }
@media (min-width: 1100px) { .nb-s-buehne__kasten { padding: 0; background: transparent; border-radius: 0; } }
.nb-s-buehne--c .nb-s-buehne__raster { gap: var(--nb-space-m); }
@media (min-width: 1100px) { .nb-s-buehne--c .nb-s-buehne__raster { gap: var(--nb-space-2xl); } }

/* d: bis 1099 px nur der kompakte Block, ab 1100 px nur die Such-Karte */
.nb-s-buehne--d .nb-s-buehne__nur-desktop { display: none; }
.nb-s-buehne--d .nb-s-buehne__nur-mobil { padding-block-end: 0; }
@media (min-width: 1100px) { .nb-s-buehne--d .nb-s-buehne__nur-desktop { display: block; } .nb-s-buehne--d .nb-s-buehne__nur-mobil { display: none; } }
.nb-s-buehne__beleg { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: var(--nb-space-m) 0 0; padding-block-start: var(--nb-space-m); border-block-start: 1px solid var(--nb-border-hairline); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-s-buehne__beleg b { font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); font-variant-numeric: lining-nums; }
.nb-s-buehne__karte { padding: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-buehne__karte { padding: var(--nb-space-l); } }
.nb-s-buehne__frage { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-heading); }
.nb-s-buehne__karte .nb-s-suche { margin-block-start: var(--nb-space-m); }
.nb-s-buehne__direkt-titel { margin: var(--nb-space-m) 0 var(--nb-space-2xs); 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-s-buehne__direkt { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-s-buehne__direkt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-s-buehne__direkt a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--nb-space-2xs); align-items: center; min-height: 64px; 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-page); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-s-buehne__direkt a:hover { border-color: var(--nb-sky-500); }
.nb-s-buehne__direkt a > svg { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; color: var(--nb-text-muted); transition: transform var(--nb-motion-rand) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
/* Bewegung „Pfeil färbt“ (Daniel 26.09.2026): Pfeil fährt 3 px nach rechts und wird Signal */
.nb-s-buehne__direkt a:hover > svg { transform: translateX(3px); color: var(--nb-action-primary); }
.nb-s-buehne__direkt .nb-s-buehne__bis { font-size: var(--nb-t-legal-01); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); }

/* d unter 1100 px wie a: kein Kasten-Abstand nach unten, nur der normale Sektionsabstand (Daniel 26.09.2026: „komischer Abstand“) */
.nb-s.nb-s-buehne--d { padding-block-end: 0; margin-block-end: var(--nb-s-abstand); }
@media (min-width: 1100px) { .nb-s.nb-s-buehne--d { padding-block-end: var(--nb-space-2xl); margin-block-end: 0; } }

/* h, i, j (Runde angebot-typo, Daniel 30.09.2026): wie d, bis 1099 px kompakt, ab 1100 px mit Such-Karte auf der Bühne.
   Regel: die Fläche kehrt sich zum Untergrund um, nie Weiß auf Weiß mit Schatten (RECHERCHE-weisse-sektionen §Regeln) */
.nb-s.nb-s-buehne--geteilt { padding-block: 0 var(--nb-space-2xl); }
@media (min-width: 1100px) { .nb-s.nb-s-buehne--geteilt { background: var(--nb-s-buehne, var(--nb-surface-secondary)); } }
@media (max-width: 1099px) {
  .nb-bk:is([data-nb-grund="k1"], [data-nb-grund="k2"], [data-nb-grund="k3"]) .nb-s.nb-s-buehne--geteilt { background: var(--nb-s-buehne); padding-block-end: var(--nb-space-l); margin-block-end: 0; }
}
.nb-s-buehne--geteilt .nb-s-buehne__nur-desktop { display: none; }
.nb-s-buehne--geteilt .nb-s-buehne__nur-mobil { padding-block-end: 0; }
@media (min-width: 1100px) { .nb-s-buehne--geteilt .nb-s-buehne__nur-desktop { display: block; } .nb-s-buehne--geteilt .nb-s-buehne__nur-mobil { display: none; } }

/* h: graue Kacheln in der weißen Karte, ohne Schatten und Rand, Hover eine Stufe dunkler wie die Suchpille */
.nb-bk .nb-s.nb-s-buehne--kachel-grau .nb-s-buehne__direkt a { border: 0; background: var(--nb-ink-100); box-shadow: none; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-bk .nb-s.nb-s-buehne--kachel-grau .nb-s-buehne__direkt a:hover { background: var(--nb-ink-200); box-shadow: none; }

/* i: ohne Karte, Suche weiß auf der grauen Bühne, Kacheln weiß mit ruhendem Schatten */
.nb-s-buehne__karte--frei { padding: 0; }
.nb-s-buehne--frei .nb-s-buehne__karte--frei .nb-su__eingabe { background: var(--nb-surface-page); box-shadow: var(--nb-s-karte-schatten, none); }
.nb-s-buehne--frei .nb-s-buehne__karte--frei .nb-su .nb-su__eingabe:is(:hover, :focus, :focus-visible) { background: var(--nb-surface-page); box-shadow: var(--nb-s-karte-schatten-hoch, none); }

/* j: Direktwahl als graue Pillen ohne Betrag */
.nb-s-buehne__direkt--pillen { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
@media (min-width: 768px) { .nb-s-buehne__direkt--pillen { grid-template-columns: none; } }
.nb-bk .nb-s.nb-s-buehne--pillen .nb-s-buehne__direkt--pillen a { display: inline-flex; align-items: center; gap: var(--nb-space-2xs); min-height: 44px; padding: 0 var(--nb-space-s) 0 var(--nb-space-m); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); box-shadow: none; transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-bk .nb-s.nb-s-buehne--pillen .nb-s-buehne__direkt--pillen a:hover { background: var(--nb-ink-200); box-shadow: none; }
.nb-s-buehne__direkt--pillen a > svg { grid-row: auto; grid-column: auto; width: 16px; height: 16px; }

/* baukasten/sektionen/kategorien/sektion.css */
/* Kategorien (B1). Kachel m-bildkachel aus komponenten-tradein.md:167-197: Bild 4:3 randlos,
   Streifen surface-page mit Haarlinie, Radius 24, Titel body-01 600, Pfeil 20 px, Innenabstand m,
   Hover Rand ink-300 und #FBFBFD. Geschlossen ohne Hover, „Noch nicht“ in legal-01 ink-600. */
.nb-s-kategorien__raster { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
.nb-s-kategorien__raster > li { display: flex; min-width: 0; }

/* Treppe: 2 Spalten bis 1099 px, 4 darüber; die kürzere letzte Reihe steht mittig */
.nb-s-kategorien__raster--treppe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nb-s-kategorien__raster--treppe > li { grid-column: span 2; }
.nb-s-kategorien__raster--treppe > li:last-child:nth-child(odd) { grid-column: 2 / span 2; }
@media (min-width: 1100px) {
  .nb-s-kategorien__raster--treppe { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--nb-space-m); }
  .nb-s-kategorien__raster--treppe > li, .nb-s-kategorien__raster--treppe > li:last-child:nth-child(odd) { grid-column: span 2; }
  .nb-s-kategorien__raster--treppe > li:nth-child(5) { grid-column: 2 / span 2; }
}

/* Die Kachel */
.nb-s-kachel { display: flex; flex-direction: column; width: 100%; overflow: hidden; background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-card); color: var(--nb-text-heading); text-decoration: none; }
a.nb-s-kachel { transition: border-color var(--nb-motion-rand) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve); }
a.nb-s-kachel:hover { border-color: var(--nb-ink-300); background: #FBFBFD; }
.nb-s-kachel__bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nb-surface-component); }
.nb-s-kachel__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-s-kachel__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-2xs); padding: var(--nb-space-s) var(--nb-space-m); }
@media (max-width: 767px) { .nb-s-kachel__fuss { padding: var(--nb-space-xs) var(--nb-space-s); } }
.nb-s-kachel__text { display: grid; gap: 2px; min-width: 0; }
.nb-s-kachel__titel { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.3; overflow-wrap: anywhere; }
.nb-s-kachel__noch { font-size: var(--nb-t-legal-01); line-height: 1.4; color: var(--nb-text-muted); }
.nb-s-kachel__zeile { font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-s-kachel__pfeil { display: grid; place-items: center; flex: none; color: var(--nb-text-heading); }
.nb-s-kachel__pfeil svg { width: 20px; height: 20px; }

/* Variante b: Titel auf der Bildfläche, kein Streifen */
.nb-s-kategorien--im-bild .nb-s-kachel { position: relative; border: 0; background: var(--nb-surface-component); }
.nb-s-kategorien--im-bild a.nb-s-kachel:hover { background: var(--nb-surface-component); box-shadow: 0 0 0 1px var(--nb-ink-300); }
.nb-s-kategorien--im-bild .nb-s-kachel__fuss { position: absolute; inset: 0; align-items: flex-start; padding: var(--nb-space-s); pointer-events: none; }
.nb-s-kategorien--im-bild .nb-s-kachel__text { height: 100%; align-content: space-between; }
.nb-s-kategorien--im-bild .nb-s-kachel__titel { font-size: var(--nb-t-heading-02); letter-spacing: -0.01em; }
.nb-s-kategorien--im-bild .nb-s-kachel__noch { justify-self: start; padding: 2px var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: rgb(255 255 255 / .88); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }
.nb-s-kategorien--im-bild .nb-s-kachel__pfeil { align-self: flex-end; width: 36px; height: 36px; border-radius: 50%; background: var(--nb-text-heading); color: var(--nb-surface-page); }

/* Variante c: iPhone groß, sechs klein. 2 Spalten, 3 ab 768, 5 ab 1100 */
.nb-s-kategorien__raster--gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-s-kategorien__raster--gross > li:first-child { grid-column: 1 / -1; }
.nb-s-kachel--gross .nb-s-kachel__titel { font-size: var(--nb-t-heading-01); letter-spacing: -0.02em; line-height: 1.15; }
.nb-s-kachel--gross .nb-s-kachel__zeile { font-size: var(--nb-t-body-01); color: var(--nb-text-body); }
.nb-s-kachel--gross .nb-s-kachel__fuss { padding: var(--nb-space-m); }
.nb-s-kachel__kreis { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--nb-action-primary); color: var(--nb-action-primary-label); transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-transform) var(--nb-motion-kurve); }
a.nb-s-kachel:hover .nb-s-kachel__kreis { background: var(--nb-action-primary-hover); }
.nb-s-kachel__kreis svg { width: 22px; height: 22px; transition: transform var(--nb-motion-rand) var(--nb-motion-kurve); }
/* Bewegung „Schieben“ (Daniel 26.09.2026, Bewegungs-Werkstatt): Pfeil 4 px nach rechts, Kreis auf 1,03, die Obergrenze aus brand-design.md §5 */
a.nb-s-kachel:hover .nb-s-kachel__kreis { transform: scale(1.03); }
a.nb-s-kachel:hover .nb-s-kachel__kreis svg { transform: translateX(4px); }
@media (min-width: 768px) {
  .nb-s-kategorien__raster--gross { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nb-s-kachel--gross { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .nb-s-kachel--gross .nb-s-kachel__bild { aspect-ratio: auto; min-height: 260px; }
  .nb-s-kachel--gross .nb-s-kachel__fuss { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--nb-space-m); }
}
@media (min-width: 1100px) {
  .nb-s-kategorien__raster--gross { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--nb-space-m); }
  .nb-s-kategorien__raster--gross > li:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .nb-s-kachel--gross { display: flex; flex-direction: column; }
  .nb-s-kachel--gross .nb-s-kachel__bild { flex: 1; aspect-ratio: auto; min-height: 0; }
  .nb-s-kachel--gross .nb-s-kachel__fuss { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .nb-s-kategorien__raster--gross .nb-s-kachel:not(.nb-s-kachel--gross) .nb-s-kachel__fuss { padding: var(--nb-space-s); }
}

/* baukasten/sektionen/zusagen/sektion.css */
/* Zusagen (D1). Drei Punkte, gleiche Anatomie in allen Varianten: Icon, Titel, eine Zeile. */
.nb-s-zusagen__liste { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-s-zusagen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-s-zusage { display: flex; align-items: center; gap: var(--nb-space-s); }
.nb-s-zusage__text { display: grid; gap: 2px; min-width: 0; }
.nb-s-zusage__text b { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.35; color: var(--nb-text-heading); }
.nb-s-zusage__text span { font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }

/* a: Karten */
.nb-s-zusagen__liste--karten { gap: var(--nb-space-s); }
@media (min-width: 1100px) { .nb-s-zusagen__liste--karten { gap: var(--nb-space-m); } }
.nb-s-zusagen__liste--karten .nb-s-zusage { min-height: 88px; padding: var(--nb-space-s) var(--nb-space-m); }

/* b und c: ein Kasten, Punkte nebeneinander mit Trennlinie */
.nb-s-zusagen__liste--kasten { gap: 0; padding: var(--nb-space-2xs) var(--nb-space-m); border-radius: var(--nb-radius-card); background: var(--nb-surface-component); }
.nb-s-zusagen--canvas .nb-s-zusagen__liste--kasten { background: var(--nb-surface-warm); }
.nb-s-zusagen__liste--kasten .nb-s-zusage { padding: var(--nb-space-s) 0; }
.nb-s-zusagen__liste--kasten .nb-s-icon { width: 24px; height: 24px; background: none; }
.nb-s-zusagen__liste--kasten .nb-s-icon svg { width: 24px; height: 24px; }
.nb-s-zusagen__liste--kasten .nb-s-zusage + .nb-s-zusage { border-block-start: 1px solid rgb(var(--nb-night-rgb) / .08); }
@media (min-width: 768px) {
  .nb-s-zusagen__liste--kasten { padding: var(--nb-space-m) 0; }
  .nb-s-zusagen__liste--kasten .nb-s-zusage { padding: 0 var(--nb-space-m); }
  .nb-s-zusagen__liste--kasten .nb-s-zusage + .nb-s-zusage { border-block-start: 0; border-inline-start: 1px solid rgb(var(--nb-night-rgb) / .08); }
}

/* baukasten/sektionen/angebot/sektion.css */
/* Angebot (E5). Betrag als Zahl, Tabelle im Preisfeld (surface-component, Radius 16) wie im Rechner. */
.nb-s-angebot__karte { display: grid; gap: var(--nb-space-l); padding: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-angebot__karte { padding: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-s-angebot__karte { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--nb-space-2xl); padding: var(--nb-space-xl); align-items: center; } }
.nb-s-angebot__links { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

.nb-v3 .nb-s-angebot__titel { display: flex; flex-direction: column; margin: 0; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-s-angebot__bis, .nb-s-angebot__fuer { font-size: var(--nb-t-heading-02); line-height: 1.3; letter-spacing: -0.01em; }
.nb-s-angebot__bis { color: var(--nb-text-body); }
.nb-s-angebot__betrag { margin-block: var(--nb-space-3xs); font-size: clamp(48px, 36px + 3.1vw, 80px); line-height: 1; letter-spacing: -0.04em; color: var(--nb-text-heading); font-variant-numeric: lining-nums; white-space: nowrap; }
.nb-s-angebot__satz { margin: var(--nb-space-s) 0 0; max-width: 46ch; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-s-angebot__aktion { margin-block-start: var(--nb-space-m); }
.nb-s-angebot__gutschein .nb-s-pille { min-height: 24px; padding: 0 var(--nb-space-2xs); font-size: var(--nb-t-body-02); }
.nb-s-angebot__gutschein { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs) var(--nb-space-xs); margin: var(--nb-space-m) 0 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }

.nb-s-angebot__feld { padding: var(--nb-space-2xs) var(--nb-space-m); }
.nb-s-angebot__tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nb-s-angebot__tabelle th { padding: var(--nb-space-s) 0 var(--nb-space-xs); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--nb-text-muted); text-align: left; }
.nb-s-angebot__tabelle th + th, .nb-s-angebot__tabelle td + td { text-align: right; }
.nb-s-angebot__tabelle td { padding: var(--nb-space-xs) 0; border-block-start: 1px solid rgb(var(--nb-night-rgb) / .08); font-size: var(--nb-t-body-01); color: var(--nb-text-heading); }
.nb-s-angebot__tabelle td + td { font-weight: var(--nb-weight-semibold); white-space: nowrap; }
.nb-s-angebot__tabelle a { color: inherit; text-decoration: none; font-weight: var(--nb-weight-semibold); }
.nb-s-angebot__tabelle a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nb-s-angebot__gb { margin-inline-start: var(--nb-space-2xs); font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }
.nb-s-angebot__stand { margin: var(--nb-space-xs) 0 0; font-size: var(--nb-t-legal-01); line-height: 1.5; color: var(--nb-text-muted); }

/* b: getönte Box */
.nb-s-angebot--getoent .nb-s-angebot__karte { background: var(--nb-surface-stage); border-radius: var(--nb-radius-card); }
.nb-s-angebot--getoent .nb-s-angebot__feld { background: var(--nb-surface-page); }

/* c: mit Bild */
.nb-s-angebot--bild .nb-s-angebot__karte { padding: var(--nb-space-2xs); gap: 0; }
@media (min-width: 1100px) { .nb-s-angebot--bild .nb-s-angebot__karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.nb-s-angebot__bild { overflow: hidden; border-radius: var(--nb-radius-input); background: var(--nb-surface-component); aspect-ratio: 4 / 3; }
@media (min-width: 1100px) { .nb-s-angebot__bild { aspect-ratio: auto; } }
.nb-s-angebot__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nb-s-angebot--bild .nb-s-angebot__links { padding: var(--nb-space-m); }
@media (min-width: 1100px) { .nb-s-angebot--bild .nb-s-angebot__links { padding: var(--nb-space-xl); } }
.nb-s-angebot--bild .nb-s-angebot__feld { width: 100%; margin-block-start: var(--nb-space-m); }
.nb-s-angebot__tabelle--klein td { padding-block: var(--nb-space-2xs); font-size: var(--nb-t-body-02); }


/* k, l, m, n: Runde angebot-typo 2 (Daniel 30.09.2026 abends). Überschrift mit Lime-Marker, ein Satz, Knopf, Liste */
.nb-s-angebot--neu2 .nb-s-angebot__karte { border: 0; border-radius: var(--nb-radius-card); }
@media (min-width: 1100px) { .nb-s-angebot--neu2 .nb-s-angebot__karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nb-space-xl); padding: var(--nb-space-xl) var(--nb-space-2xl); } }
.nb-v3 .nb-s-angebot__zeile2 { margin: 0; font-size: var(--nb-t-display-02); font-weight: var(--nb-weight-semibold); line-height: 1.12; letter-spacing: -0.02em; color: var(--nb-text-heading); text-wrap: balance; }
.nb-s-angebot__mk { margin-inline: -4px; padding: 0 6px; border-radius: var(--nb-radius-badge); background: var(--nb-lime); white-space: nowrap; font-variant-numeric: lining-nums; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nb-s-angebot--halb .nb-s-angebot__mk { padding: 0 2px; border-radius: 0; background: linear-gradient(transparent 55%, var(--nb-lime) 55%, var(--nb-lime) 92%, transparent 92%); }
.nb-s-angebot--neu2 .nb-s-angebot__satz { margin-block-start: var(--nb-space-s); color: var(--nb-text-heading); }
.nb-s-angebot--neu2 .nb-s-angebot__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-s); margin-block-start: var(--nb-space-l); }
.nb-s-angebot__plus { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-s-angebot__liste { border-radius: var(--nb-radius-input); background: var(--nb-surface-page); padding: var(--nb-space-2xs) var(--nb-space-m); }
.nb-s-angebot__liste ul { margin: 0; padding: 0; list-style: none; }
.nb-s-angebot__liste li + li { border-block-start: 1px solid rgb(var(--nb-night-rgb) / .08); }
.nb-s-angebot__liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: var(--nb-space-s); min-height: 52px; color: var(--nb-text-heading); text-decoration: none; }
.nb-s-angebot__liste a > svg { width: 18px; height: 18px; color: var(--nb-text-muted); transition: transform var(--nb-motion-rand) var(--nb-motion-kurve); }
.nb-s-angebot__liste a:hover > svg { transform: translateX(3px); color: var(--nb-text-heading); }
.nb-s-angebot__liste a:hover .nb-s-angebot__m-name { text-decoration: underline; text-underline-offset: 3px; }
.nb-s-angebot__liste .nb-s-angebot__m-name { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-s-angebot__liste .nb-s-angebot__m-name span { margin-inline-start: 4px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); }
.nb-s-angebot__liste .nb-s-angebot__m-betrag { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nb-s-angebot__liste .nb-s-angebot__m-betrag span { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-muted); }

/* k, l, m: Sky-Fläche ohne Schatten, Knopf in Night (G9: auf farbiger Fläche gefüllt, Signal auf Sky zu schwach) */
.nb-bk .nb-s-angebot--sky .nb-s-angebot__karte { background: var(--nb-sky-500); box-shadow: none; }
.nb-bk .nb-s-angebot--kraeftig .nb-s-angebot__karte { background: var(--nb-sky-700); }
.nb-s-angebot--sky .nb-knopf--primaer { background: var(--nb-text-heading); border-color: var(--nb-text-heading); color: var(--nb-surface-page); }
.nb-s-angebot--sky .nb-knopf--primaer:hover { background: #1F2937; border-color: #1F2937; }

/* n: weiße Karte, Liste auf Grau (Umkehr) */
.nb-s-angebot--weiss .nb-s-angebot__liste { background: var(--nb-ink-100); }
.nb-s-angebot--weiss .nb-s-angebot__liste li + li { border-block-start-color: rgb(var(--nb-night-rgb) / .1); }

/* baukasten/sektionen/ablauf/sektion.css */
/* Ablauf (E1): die eine dunkle Sektion mit Lime-Ziffern, Siegel und Schweif (web-architektur.md:417-421). */
.nb-s.nb-s-ablauf { overflow: hidden; background: var(--nb-surface-dark); color: var(--nb-text-on-dark); }
.nb-s-ablauf__kopf { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-m); }
.nb-s-ablauf__kopf .nb-s-kopf { margin-block-end: 0; }
.nb-v3 .nb-s-ablauf h2 { color: var(--nb-text-on-dark); }
.nb-v3 .nb-s-ablauf .nb-s-kopf p { color: var(--nb-text-on-dark-muted); }
.nb-s-ablauf__siegel { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--nb-text-on-dark-accent); color: var(--nb-text-on-lime); border: 2px solid var(--nb-text-on-lime); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold); letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; text-align: center; transform: rotate(-8deg); }
.nb-s-ablauf__schritte { position: relative; z-index: 1; display: grid; gap: var(--nb-space-m); margin: var(--nb-space-xl) 0 0; padding: 0; list-style: none; }
@media (min-width: 1100px) { .nb-s-ablauf__schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-s-ablauf__schritt { padding: var(--nb-space-m); background: var(--nb-surface-dark-raised); border-radius: var(--nb-radius-card); overflow: hidden; }
.nb-s-ablauf__bild { display: block; aspect-ratio: 4 / 3; margin: calc(-1 * var(--nb-space-m)) calc(-1 * var(--nb-space-m)) var(--nb-space-s); background: var(--nb-surface-dark-raised); }
.nb-s-ablauf__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 768 bis 1099 px: Karten quer, Bild links, sonst wird das Band über 2.400 px hoch */
@media (min-width: 768px) and (max-width: 1099px) {
  .nb-s-ablauf__schritt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr; column-gap: var(--nb-space-m); padding: 0; }
  .nb-s-ablauf__bild { grid-row: 1 / 4; margin: 0; aspect-ratio: auto; min-height: 100%; }
  .nb-s-ablauf__nr { margin-top: var(--nb-space-m); }
  .nb-s-ablauf__schritt p { padding-inline-end: var(--nb-space-m); padding-block-end: var(--nb-space-m); }
}
.nb-s-ablauf__nr { display: block; font-size: var(--nb-t-display-02); line-height: 1; font-weight: var(--nb-weight-semibold); color: var(--nb-text-on-dark-accent); }
.nb-v3 .nb-s-ablauf__schritt h3 { margin: var(--nb-space-s) 0 var(--nb-space-2xs); color: var(--nb-text-on-dark); }
.nb-s-ablauf__schritt p { margin: 0; color: var(--nb-text-on-dark-muted); font-size: var(--nb-t-body-01); line-height: 1.5; }

/* Schweif: Original-Pfad, Farbe Lime per CSS (Alt-Lime #EAFF9F ist gestrichen) */
.nb-s-ablauf__schweif { position: absolute; z-index: 0; pointer-events: none; }
.nb-s-ablauf__schweif path { fill: none; stroke: var(--nb-text-on-dark-accent); stroke-width: 163; stroke-miterlimit: 10; }

/* a: Elements_1 gespiegelt, rechts von unten bis an die Oberkante */
/* Lage gemessen am 26.09.2026: unter 1100 px so weit rechts, dass das gerade Strichende nicht sichtbar ist (Daniel), Tinte 1,8 % bei 390 und 3,5 % bei 768 px */
.nb-s-ablauf__schweif--hoch { right: -54%; top: -2%; width: 168%; height: auto; transform: scaleX(-1); }
@media (min-width: 1100px) { .nb-s-ablauf__schweif--hoch { right: -22%; top: auto; bottom: -8%; width: min(80%, 1400px); } }

/* b: Elements_6, die große Schleife fasst die Karten von rechts ein */
.nb-s-ablauf__schweif--schleife path { stroke-width: 152; }
.nb-s-ablauf__schweif--schleife { right: -40%; top: -10%; width: 120%; height: auto; }
@media (min-width: 768px) { .nb-s-ablauf__schweif--schleife { right: -26%; top: -24%; width: 90%; } }
@media (min-width: 1100px) { .nb-s-ablauf__schweif--schleife { right: -16%; top: -38%; width: min(70%, 1200px); } }

/* baukasten/sektionen/stimmen/sektion.css */
/* Stimmen (D3). Karten tragen mit Schatten, Quote als Zahl, Bewertungen im Wortlaut. */
.nb-s-stimmen__kopfzeile { display: grid; gap: var(--nb-space-s) var(--nb-space-l); align-items: end; margin-block-end: var(--nb-space-l); }
@media (min-width: 1100px) { .nb-s-stimmen__kopfzeile { grid-template-columns: minmax(0, 1fr) auto; } }
.nb-s-stimmen__kopfzeile .nb-s-kopf { margin-block-end: 0; }
.nb-s-stimmen__kopfzeile .nb-s-stimmen__quote { display: grid; grid-template-columns: auto minmax(0, 30ch); column-gap: var(--nb-space-s); align-items: center; }
.nb-s-stimmen__kopfzeile .nb-s-stimmen__text { margin: 0; }
.nb-s-stimmen__kopfzeile .nb-s-stimmen__beleg { grid-column: 1 / -1; margin-block-start: var(--nb-space-2xs); }
.nb-s-stimmen__wert { margin: 0; font-size: var(--nb-t-display-02); font-weight: var(--nb-weight-semibold); line-height: 1; letter-spacing: -0.03em; color: var(--nb-text-heading); }
.nb-s-stimmen__text { margin: var(--nb-space-2xs) 0 0; max-width: 32ch; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-s-stimmen__beleg { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nb-space-2xs) var(--nb-space-s); margin: var(--nb-space-m) 0 0; font-size: var(--nb-t-body-02); }
.nb-s-stimmen__beleg a { color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.nb-s-stimmen__beleg span { color: var(--nb-text-muted); font-size: var(--nb-t-legal-01); }

.nb-s-stimmen__liste { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-s-stimmen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nb-s-stimme { display: flex; flex-direction: column; gap: var(--nb-space-s); padding: var(--nb-space-m); box-shadow: var(--nb-s-panel-schatten); }
.nb-s-stimme__zeichen { display: block; width: 28px; height: 21px; fill: var(--nb-text-heading); }
.nb-s-stimme blockquote { flex: 1; margin: 0; font-size: var(--nb-t-body-01); line-height: 1.55; color: var(--nb-text-heading); }
.nb-s-stimme__fuss { display: flex; align-items: center; gap: var(--nb-space-2xs); font-size: var(--nb-t-legal-01); color: var(--nb-text-muted); }
.nb-s-stimme__fuss svg { width: 18px; height: 18px; flex: none; color: var(--nb-text-heading); }
.nb-s-stimme__fuss b { color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); }

/* b: Mosaik mit einer großen Stimme */
.nb-s-stimmen__mosaik { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .nb-s-stimmen__mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .nb-s-stimmen__mosaik { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--nb-space-m); }
  .nb-s-stimme--gross { grid-row: span 2; }
  .nb-s-stimmen__zahl { grid-column: span 2; }
}
.nb-s-stimme--gross { padding: var(--nb-space-l); justify-content: space-between; }
.nb-s-stimme--gross blockquote { flex: 0 1 auto; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.25; letter-spacing: -0.02em; }
.nb-s-stimme--gross .nb-s-stimme__zeichen { width: 44px; height: 33px; }
.nb-s-stimmen__zahl { display: flex; }
.nb-s-stimmen__quote--karte { flex: 1; padding: var(--nb-space-m); box-shadow: var(--nb-s-panel-schatten); }

/* 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 .nb-s-fragen__kontakt-titel { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-s-fragen__kontakt a, .nb-s-fragen__mail a { color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); }
.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 svg { width: 20px; height: 20px; flex: none; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.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); }
.nb-s-frage__antwort[data-nb-laeuft] { overflow: hidden; }
.nb-s-frage__antwort p { margin: 0 0 var(--nb-space-xs); }
/* 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 */
.nb-s-fragen__rechner { display: grid; gap: var(--nb-space-l); padding: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-fragen__rechner { padding: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-s-fragen__rechner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--nb-space-2xl); padding: var(--nb-space-xl); } }
.nb-s-fragen__mail { margin: 0; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }

/* Modelle als Pillen, nach Generation (auch in der Antwort „Welche iPhones kauft ihr an?“) */
.nb-s-modelle__gruppen { display: grid; gap: var(--nb-space-xs); margin-block-start: var(--nb-space-s); }
.nb-s-modelle__gruppe { display: grid; gap: var(--nb-space-2xs); align-items: baseline; }
@media (min-width: 768px) { .nb-s-modelle__gruppe { grid-template-columns: 96px minmax(0, 1fr); } }
.nb-s-modelle__titel { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }
.nb-s-modelle__gruppe ul { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-s-modelle__pille { 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); }
.nb-s-modelle__pille:hover { border-color: var(--nb-ink-500); }

/* baukasten/sektionen/modelle/sektion.css */
/* Modellliste (B1). Pillen-Stil steht in fragen/sektion.css, weil die Frage dieselbe Liste zeigt. */
.nb-s-modelle__karte { padding: var(--nb-space-m); }
@media (min-width: 768px) { .nb-s-modelle__karte { padding: var(--nb-space-l); } }
.nb-s-modelle__karte .nb-s-modelle__gruppen { gap: var(--nb-space-s); margin-block-start: 0; }
.nb-s-modelle__karte .nb-s-modelle__gruppe + .nb-s-modelle__gruppe { padding-block-start: var(--nb-space-s); border-block-start: 1px solid var(--nb-border-hairline); }

/* baukasten/sektionen/schlussruf/sektion.css */
/* Schlussruf (F3). */
.nb-s-schluss__satz { margin: var(--nb-space-s) 0 0; max-width: 44ch; font-size: var(--nb-t-body-01); line-height: 1.5; color: var(--nb-text-body); }
.nb-v3 .nb-s-schlussruf h2 { margin: 0; }
.nb-v3 .nb-s-schlussruf h2 em { font-size: calc(1em * 1.03); }
.nb-s-schluss__text .nb-knopf { margin-block-start: var(--nb-space-m); }

/* a: Karte mit Bild */
.nb-s-schluss__karte { display: grid; overflow: hidden; }
@media (min-width: 1100px) { .nb-s-schluss__karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nb-s-schluss__karte .nb-s-schluss__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--nb-space-l) var(--nb-space-m); }
@media (min-width: 1100px) { .nb-s-schluss__karte .nb-s-schluss__text { padding: var(--nb-space-2xl) var(--nb-space-xl); } }
.nb-s-schluss__bild { aspect-ratio: 4 / 3; background: var(--nb-surface-component); }
.nb-s-schluss__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* b: dunkle Aktionsleiste mit Lime-Knopf (farbsystem.md:367-375) */
.nb-s-schluss__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-m); padding: var(--nb-space-l) var(--nb-space-m); border-radius: var(--nb-radius-container); background: var(--nb-action-bar-surface); }
@media (min-width: 1100px) { .nb-s-schluss__leiste { padding: var(--nb-space-xl); } }
.nb-v3 .nb-s-schluss__leiste h2 { color: var(--nb-text-on-dark); }
.nb-s-schluss__leiste .nb-s-schluss__satz { color: var(--nb-text-on-dark-muted); }
.nb-s-schluss__lime { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--nb-space-l); border-radius: var(--nb-radius-pill); background: var(--nb-action-bar-button); color: var(--nb-action-bar-button-label); font-weight: var(--nb-weight-semibold); text-decoration: none; }

/* c: Signal-Fläche */
.nb-s.nb-s-schluss--signal { background: var(--nb-action-primary); }
.nb-s-schluss__signal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-m); }
.nb-v3 .nb-s-schluss--signal h2, .nb-v3 .nb-s-schluss--signal h2 em { color: var(--nb-text-on-signal); }
.nb-s-schluss--signal .nb-s-schluss__satz { color: var(--nb-text-on-signal); }
.nb-s-schluss__weiss { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--nb-space-l); border-radius: var(--nb-radius-pill); background: var(--nb-surface-page); color: var(--nb-text-heading); font-weight: var(--nb-weight-semibold); text-decoration: none; }

/* baukasten/sektionen/fuss/sektion.css */
/* Fuß (N5) in Deep Night, Newsletter als dunkle Aktionsleiste mit Lime-Knopf (farbsystem.md:45, 367-370). */
.nb-s.nb-s-fuss { margin-block: 0; padding-block: var(--nb-space-2xl) var(--nb-space-l); background: var(--nb-surface-dark); color: var(--nb-text-on-dark-muted); font-family: var(--nb-font-sans); font-size: var(--nb-t-body-02); line-height: 1.5; }
.nb-s-fuss a { color: var(--nb-text-on-dark-muted); text-decoration: none; }
.nb-s-fuss a:hover { color: var(--nb-text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.nb-s-fuss :focus-visible { outline: 2px solid var(--nb-text-on-dark); outline-offset: 3px; }

.nb-s-fuss__eintrag { display: grid; gap: var(--nb-space-m); padding-block-end: var(--nb-space-xl); border-block-end: 1px solid var(--nb-border-dark-hairline); }
@media (min-width: 1100px) { .nb-s-fuss__eintrag { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: var(--nb-space-2xl); } }
.nb-v3 .nb-s-fuss__eintrag h2 { margin: 0; font-size: var(--nb-t-heading-01); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-on-dark); }
.nb-s-fuss__eintrag p { margin: var(--nb-space-2xs) 0 0; max-width: 60ch; font-size: var(--nb-t-body-01); }
.nb-s-fuss__form { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); }
.nb-s-fuss__form input { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 var(--nb-space-m); border: 1px solid var(--nb-border-dark-control); border-radius: var(--nb-radius-pill); background: transparent; color: var(--nb-text-on-dark); font: inherit; font-size: 16px; }
.nb-s-fuss__form input::placeholder { color: var(--nb-text-on-dark-muted); }
.nb-s-fuss__form button { min-height: 52px; padding: 0 var(--nb-space-l); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-action-bar-button); color: var(--nb-action-bar-button-label); font: inherit; font-size: 16px; font-weight: var(--nb-weight-semibold); cursor: pointer; }

.nb-s-fuss__raster { display: grid; gap: var(--nb-space-l); padding-block: var(--nb-space-xl); }
@media (min-width: 768px) { .nb-s-fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nb-s-fuss__raster { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--nb-space-xl); } }
.nb-s-fuss__marke svg { display: block; width: 132px; height: auto; color: var(--nb-text-on-dark); }
.nb-s-fuss__marke p { margin: var(--nb-space-s) 0 0; max-width: 30ch; }
.nb-s-fuss__sozial { display: flex; gap: var(--nb-space-xs); margin: var(--nb-space-m) 0 0; padding: 0; list-style: none; }
.nb-s-fuss__sozial a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--nb-border-dark-hairline); border-radius: 50%; color: var(--nb-text-on-dark); }
.nb-s-fuss__sozial svg { width: 18px; height: 18px; }
.nb-s-fuss__menue p { margin: 0 0 var(--nb-space-s); font-weight: var(--nb-weight-semibold); color: var(--nb-text-on-dark); }
.nb-s-fuss__menue ul { display: grid; gap: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; }

.nb-s-fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nb-space-s) var(--nb-space-l); padding-block-start: var(--nb-space-m); border-block-start: 1px solid var(--nb-border-dark-hairline); font-size: var(--nb-t-legal-01); }
.nb-s-fuss__unten p { margin: 0; }
.nb-s-fuss__recht { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-m); margin: 0; padding: 0; list-style: none; }
.nb-s-fuss__zahlung { display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-s-fuss__zahlung svg { display: block; width: 38px; height: 24px; }

/* Schmaler Fuß (Variante schmal), eine Zeile Rechtslinks */
.nb-anm-fuss { padding: var(--nb-space-m) 0; border-top: 1px solid var(--nb-border-hairline); background: var(--nb-surface-page); }
.nb-anm-fuss__innen { box-sizing: border-box; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin-inline: auto; padding-inline: var(--nb-s-rand); }
.nb-anm-fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nb-space-2xs) var(--nb-space-m); font-size: var(--nb-t-legal-01); }
.nb-anm-fuss a { display: inline-flex; min-height: 44px; align-items: center; color: var(--nb-text-muted); text-decoration: underline; text-underline-offset: 2px; }