/* App-Werbung im Shop, die gewaehlten Fassungen der Werkstatt app-werbung (17. und 18.10.2026), 1:1 aus dem Baukasten:
   - App-Karte d (snippets/nb-app-karte.tpl)        baukasten/sektionen/app-karte/sektion.css, nur Fassung b/d, in der Seite
   - Seite /app d (nb-verkaufen/app.tpl)             baukasten/sektionen/app-seite/sektion.css, nur Fassung d
   - Startseite f (snippets/nb-app-start.tpl)        baukasten/sektionen/app-start/sektion.css und kern/schweif.css, nur f
   - Fuss d (snippets/nb-app-fuss.tpl)               baukasten/sektionen/app-fuss/sektion.css, nur d
   - „Kommt bald“ ohne Store-ID (snippets/nb-app-stores.tpl), wie live seit 17.10.2026
   Werte nur als Token. Geladen von den Snippets selbst, einmal je Seite ($nbAppCssGeladen). */

/* ---------- App-Karte ---------- */
.nb-ap { position: relative; display: grid; align-items: center; gap: var(--nb-space-m); min-width: 0; margin-block: var(--nb-space-m); padding: var(--nb-space-m); border: 0 solid transparent; border-width: 0; border-radius: var(--nb-radius-card); color: var(--nb-text-heading); font-family: var(--nb-font-sans); transition: opacity var(--nb-motion-fenster) var(--nb-motion-kurve), transform var(--nb-motion-fenster) var(--nb-motion-kurve); }
.nb-ap > * { min-width: 0; }
.nb-ap--weiss { background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); }
.nb-ap--grau { background: var(--nb-ink-100); }
.nb-ap[hidden] { display: none !important; }
.nb-ap.is-geht { opacity: 0; }
.nb-ap p { margin: 0; }
.nb-ap__symbol { display: block; flex: none; border-radius: var(--nb-geraetebild-radius); }
.nb-ap__symbol--40 { width: var(--nb-geraetebild-s); height: var(--nb-geraetebild-s); }
.nb-ap__text { display: grid; gap: var(--nb-space-xs); min-width: 0; justify-items: start; align-content: center; }
.nb-ap__titel { font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.4; text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }
.nb-ap__marke { display: flex; align-items: center; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-muted); }

/* QR: Ruhezone ist in der Datei (4 Module), Flaeche Weiss. Auf Weiss in grauer Kachel, in grauer Karte weiss (G29) */
.nb-ap__qr { display: grid; justify-items: center; gap: var(--nb-space-2xs); margin: 0; }
.nb-ap__qr-flaeche { display: block; padding: var(--nb-space-2xs); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-ap--grau .nb-ap__qr-flaeche { background: var(--nb-surface-page); }
.nb-ap__qr img { display: block; background: var(--nb-surface-page); }
.nb-ap__qr--120 img { width: 112px; height: 112px; }
.nb-ap__qr figcaption { max-width: 128px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.4; text-align: center; text-wrap: balance; }

/* Abzeichen: in der Karte nur am Handy, nebeneinander, Freiraum 1/4 der Hoehe */
.nb-ap__stores { display: none; flex-wrap: wrap; gap: var(--nb-space-xs); }
.nb-ap__store { display: block; border-radius: var(--nb-radius-badge); transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ap__store img { display: block; height: 40px; width: auto; }
.nb-ap__store:active { opacity: .7; }
.nb-ap__store:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

/* X: in der Seite nur an Orten, die man oefter sieht. Zeichen ohne Flaeche (G59) */
.nb-ap__zu { position: absolute; top: var(--nb-space-2xs); right: var(--nb-space-2xs); display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--nb-text-muted); cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-ap--zu .nb-ap__zu { display: grid; }
.nb-ap__zu svg { width: 20px; height: 20px; }
.nb-ap__zu:active { color: var(--nb-ink-700); }
.nb-ap__zu:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -3px; border-radius: var(--nb-radius-badge); }
@media (hover: hover) and (pointer: fine) { .nb-ap__zu:hover { color: var(--nb-text-heading); } }

/* iPhone mit Dynamic Island. Alle Masse als Anteil der Geraetebreite (cqw), Breite kommt vom Traeger */
.nb-iphone { display: block; width: 100%; container-type: inline-size; }
.nb-iphone__koerper { position: relative; display: block; padding: 3.4cqw; border-radius: 17cqw 17cqw 0 0; background: var(--nb-night); outline: 0.9cqw solid var(--nb-ink-700); outline-offset: -0.9cqw; } /* Titanrand als Umriss, kein Schatten (G28) */
.nb-iphone__koerper::before, .nb-iphone__koerper::after { content: ""; position: absolute; width: 1.2cqw; border-radius: 1cqw; background: var(--nb-ink-700); }
.nb-iphone__koerper::before { left: -1cqw; top: 30cqw; height: 13cqw; } /* Lauter */
.nb-iphone__koerper::after { right: -1cqw; top: 38cqw; height: 22cqw; } /* Seitentaste */
.nb-iphone__bildschirm { position: relative; display: block; overflow: hidden; border-radius: 13.6cqw 13.6cqw 0 0; background: var(--nb-surface-base); }
.nb-iphone__bildschirm img { display: block; width: 100%; height: auto; }
.nb-iphone__insel { position: absolute; top: 2.6cqw; left: 50%; width: 28cqw; height: 8.2cqw; border-radius: var(--nb-radius-pill); background: var(--nb-night); transform: translateX(-50%); }

/* b, d: Buehne mit iPhone | Text | QR. Buehne umgekehrt zur Karte, Geraet unten angeschnitten (G44) */
.nb-ap--b { grid-template-columns: minmax(96px, 20%) minmax(0, 1fr) auto; gap: var(--nb-space-s) var(--nb-space-xs); align-items: stretch; padding: var(--nb-space-s); }
.nb-ap__buehne { position: relative; overflow: hidden; min-height: 212px; border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-ap--grau .nb-ap__buehne { background: var(--nb-surface-page); }
.nb-ap__geraet { position: absolute; left: 50%; top: var(--nb-space-m); width: 70%; max-width: 140px; transform: translateX(-50%); }
.nb-ap--b .nb-ap__text { padding-block: var(--nb-space-2xs); }
.nb-ap--b .nb-ap__qr { align-self: center; }

/* d: drei Nutzen mit Haken */
.nb-ap__punkte { display: grid; gap: var(--nb-space-2xs); margin: 0; padding: 0; list-style: none; }
.nb-ap__punkte li { display: flex; align-items: center; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); line-height: 1.4; }
.nb-ap__punkte svg { width: 18px; height: 18px; flex: none; color: var(--nb-success-text); }

/* Platz fuer das X in der Seite, nach den Fassungen, damit keine Fassung ihn ueberschreibt */
.nb-ap.nb-ap--zu { padding-right: calc(var(--nb-space-m) + 32px); }

@media (prefers-reduced-motion: reduce) { .nb-ap { transition: opacity var(--nb-motion-fenster) linear; transform: none !important; } }

/* Handy: kein QR, dafuer die Abzeichen. Buehne oben, unter 360 px faellt sie weg */
@media (max-width: 767px) {
  .nb-ap__qr { display: none !important; }
  .nb-ap__stores { display: flex; }
  .nb-ap { gap: var(--nb-space-s); padding: var(--nb-space-s); }
  .nb-ap.nb-ap--zu { padding-right: calc(var(--nb-space-s) + 32px); }
  .nb-ap--b { grid-template-columns: minmax(0, 1fr); padding: var(--nb-space-xs); }
  .nb-ap__buehne { min-height: 168px; }
  .nb-ap__geraet { width: 132px; top: var(--nb-space-s); }
  .nb-ap--b .nb-ap__marke { display: none; }
  .nb-ap--b .nb-ap__text { padding: 0 0 var(--nb-space-2xs); }
}
@media (max-width: 359px) { .nb-ap--b { grid-template-columns: minmax(0, 1fr); } .nb-ap__buehne { display: none; } }

/* ---------- „Kommt bald“ ohne Store-ID (wie live seit 17.10.2026) ----------
   Pille m-merkmal wie nb-f-pille--hell (komponenten-global.md §1), in grauer Karte und auf Night weiss (G29, 1,10:1 sonst).
   QR-Code entsaettigt und ohne Unterschrift, wie die geschlossene Kachel (nb-verkaufen.css, Daniel 14.10.2026) */
.nb-ap-bald { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-space-2xs); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.4; }
.nb-ap-pille { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-surface-stage); color: var(--nb-text-on-stage); font-size: 14px; font-weight: var(--nb-weight-semibold); line-height: 1.2; white-space: nowrap; }
.nb-ap--grau .nb-ap-pille { background: var(--nb-surface-page); color: var(--nb-text-heading); }
:is(.nb-ap, .nb-ast-nacht, .nb-as__nacht, .nb-afu-marke).is-bald :is(.nb-ap__qr, .nb-ast__qr2, .nb-as__qr, .nb-afu__qr) img { filter: grayscale(1); opacity: .45; }
:is(.nb-ap, .nb-ast-nacht, .nb-as__nacht).is-bald :is(.nb-ap__qr, .nb-ast__qr2, .nb-as__qr) figcaption { display: none; }

/* ---------- Seite /app (Fassung d) ----------
   K1: Karten surface-page mit sh-ruht, innen ink-100 (G29). H1 heading-01, Abstand oben seitenkopf (G58) */
.nb-s.nb-s-app-seite { margin-block: 0; padding-block: 0; } /* Huelle gibt sonst 144 px, Soll seitenkopf (G58) */
.nb-s-app-seite .nb-s__innen { padding-block: var(--nb-space-l) var(--nb-space-2xl); }
@media (min-width: 1100px) { .nb-s-app-seite .nb-s__innen { padding-top: var(--nb-space-xl); } }
.nb-as__karte { border: 0 solid transparent; border-width: 0; border-radius: var(--nb-radius-card); background: var(--nb-surface-page); box-shadow: var(--nb-sh-ruht); color: var(--nb-text-heading); }
.nb-as__kopf { display: grid; gap: var(--nb-space-s); margin-bottom: var(--nb-space-l); }
.nb-as__kopf--mitte { justify-items: center; text-align: center; }
.nb-as__symbol { display: block; width: var(--nb-geraetebild-l); height: var(--nb-geraetebild-l); border-radius: var(--nb-geraetebild-radius); }
.nb-as__h1 { 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); text-wrap: balance; }
.nb-as__drei p { margin: 0; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); line-height: 1.4; text-wrap: pretty; }
.nb-as__qr { display: grid; justify-items: center; gap: var(--nb-space-2xs); margin: 0; }
.nb-as__qr-flaeche { display: block; padding: var(--nb-space-2xs); border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-as__qr img { display: block; width: 160px; height: 160px; background: var(--nb-surface-page); }
.nb-as__qr figcaption { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.4; }
.nb-as__buehne { position: relative; overflow: hidden; height: 100%; min-height: 420px; border-radius: var(--nb-radius-input); background: var(--nb-ink-100); }
.nb-as__geraet { position: absolute; left: 50%; top: 10%; width: 56%; max-width: 280px; transform: translateX(-50%); }
.nb-as__drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nb-space-m); margin: 0 0 var(--nb-space-m); padding: 0; list-style: none; }
.nb-as__drei .nb-as__karte { display: grid; gap: var(--nb-space-s); align-content: start; padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-m); }
.nb-as__drei p { padding-inline: var(--nb-space-2xs); }
.nb-as__buehne--klein { min-height: 280px; height: auto; }
.nb-as__buehne--klein .nb-as__geraet { width: 62%; top: var(--nb-space-m); }
@media (max-width: 767px) {
  .nb-as-nur-rechner { display: none !important; }
  .nb-as__buehne { min-height: 240px; }
  .nb-as__geraet { width: 52%; }
  /* am Handy wischen, die naechste Karte schaut an der Kante heraus */
  .nb-as__drei { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--nb-space-s)); padding-inline: var(--nb-space-s); padding-bottom: var(--nb-space-2xs); scrollbar-width: none; }
  .nb-as__drei > li { scroll-snap-align: start; }
}
/* unter den drei Bildschirmen zwei Karten, links Vorteile, rechts Night mit QR */
.nb-as__unten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--nb-space-m); align-items: stretch; }
.nb-as__h2 { margin: 0; font-size: var(--nb-t-heading-03); font-weight: var(--nb-weight-semibold); line-height: 1.3; color: inherit; }
.nb-as__vorteile { display: grid; gap: var(--nb-space-s); align-content: start; padding: var(--nb-space-m); }
.nb-as__vorteile ul { display: grid; gap: var(--nb-space-s); margin: 0; padding: 0; list-style: none; }
.nb-as__vorteile li { display: flex; align-items: center; gap: var(--nb-space-xs); font-size: var(--nb-t-body-01); line-height: 1.4; }
.nb-as__vorteile svg { width: 20px; height: 20px; flex: none; color: var(--nb-success-text); }
.nb-as__nacht { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "qr kopf" "qr stores"; gap: var(--nb-space-s) var(--nb-space-m); align-items: center; padding: var(--nb-space-m); border-radius: var(--nb-radius-card); background: var(--nb-surface-dark); color: var(--nb-text-on-dark); box-shadow: var(--nb-sh-ruht); }
.nb-as__nacht-kopf { grid-area: kopf; display: flex; align-items: center; gap: var(--nb-space-s); align-self: end; }
.nb-as__nacht-kopf p { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.4; color: var(--nb-text-on-dark); }
.nb-as__symbol--56 { width: var(--nb-geraetebild-m); height: var(--nb-geraetebild-m); }
.nb-as__qr--nacht { grid-area: qr; }
.nb-as__qr--nacht .nb-as__qr-flaeche { background: var(--nb-surface-page); }
.nb-as__qr--nacht figcaption { color: var(--nb-text-on-dark); }
.nb-as__nacht-stores { grid-area: stores; align-self: start; }
.nb-as__nacht-stores .nb-ap__stores { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); }
.nb-as__nacht :focus-visible { outline-color: var(--nb-text-on-dark); }
@media (max-width: 1099px) { .nb-as__unten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .nb-as__vorteile { padding: var(--nb-space-s); }
  .nb-as__vorteile li { font-size: var(--nb-t-body-02); }
  .nb-as__nacht { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "stores"; padding: var(--nb-space-s); }
}
/* Tablet: drei Bildschirme zum Wischen statt drei schmaler Spalten, damit jeder Satz in einer Zeile bleibt */
@media (min-width: 768px) and (max-width: 1023px) {
  .nb-as__drei { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--nb-space-2xs); scrollbar-width: none; }
  .nb-as__drei > li { scroll-snap-align: start; }
}

/* ---------- Startseite (Fassung f) ----------
   Schale wie im Baukasten (kern/schale.css), die Startseite ist ein alter Shopify-Port ohne nb-kasse.css */
.nb-s.nb-s-app-start { position: relative; margin-block: 0; font-family: var(--nb-font-sans); --nb-s-rand: var(--nb-space-s); } /* .nb-start setzt Inter */
/* Die alte Startseite (nb-start-impact.css, :where(.nb-start)) ueberschreibt drei Token mit Shopify-Werten, darunter das
   gestrichene Lime #EAFF9F (design-kurz 20). Der Abschnitt nimmt die Werte aus nb-tokens-v3.css wieder auf, ueber Aliase an
   .nb-v3 (body, dort stehen die Token), die dort schon aufgeloest sind. Keine eigene Zahl, gemessen 18.10.2026 (space-xs 8 statt 12, Karte 24 px kuerzer) */
.nb-v3 { --nb-app-lime: var(--nb-lime); --nb-app-space-xs: var(--nb-space-xs); --nb-app-radius-input: var(--nb-radius-input); }
.nb-s.nb-s-app-start { --nb-lime: var(--nb-app-lime); --nb-space-xs: var(--nb-app-space-xs); --nb-radius-input: var(--nb-app-radius-input); }
@media (min-width: 768px) { .nb-s.nb-s-app-start { --nb-s-rand: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-s.nb-s-app-start { --nb-s-rand: var(--nb-space-xl); } }
.nb-s-app-start .nb-s__innen { padding-block: var(--nb-space-xl); padding-inline: max(var(--nb-s-rand), (100% - var(--nb-container)) / 2); }

/* Schweif als Bauteil (baukasten/kern/schweif.css, gleich wie in nb-pdp.css) */
.nb-schweif { position: absolute; z-index: 0; height: auto; pointer-events: none; }
.nb-schweif path { fill: none; stroke: var(--nb-schweif-farbe, var(--nb-text-on-dark-accent)); stroke-width: var(--nb-schweif-strich, 163); stroke-miterlimit: 10; }

.nb-ast__mk { padding: 0 6px; border-radius: var(--nb-radius-badge); background: var(--nb-lime); color: var(--nb-night); white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nb-ast__qr2 { display: grid; justify-items: center; gap: var(--nb-space-2xs); margin: 0; }
.nb-ast__qr2-flaeche { display: block; padding: var(--nb-space-2xs); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); }
.nb-ast__qr2 img { display: block; width: 96px; height: 96px; }
.nb-ast__qr2 figcaption { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.4; }

/* Night-Karte */
.nb-ast-nacht { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; min-height: 440px; border-radius: var(--nb-radius-card); background: var(--nb-surface-dark); color: var(--nb-text-on-dark); box-shadow: var(--nb-sh-ruht); isolation: isolate; }
.nb-ast-nacht__text { position: relative; z-index: 3; display: grid; gap: var(--nb-space-m); align-content: center; padding: var(--nb-space-xl); }
.nb-ast-nacht__h2 { margin: 0; max-width: 18ch; font-size: var(--nb-t-display-02); font-weight: var(--nb-weight-semibold); line-height: 1.15; letter-spacing: -0.02em; color: var(--nb-text-on-dark); text-wrap: balance; }
.nb-ast-nacht__liste { display: grid; gap: var(--nb-space-xs); margin: 0; padding: 0; list-style: none; }
.nb-ast-nacht__liste li { display: flex; align-items: center; gap: var(--nb-space-xs); font-size: var(--nb-t-body-01); line-height: 1.4; }
.nb-ast-nacht__liste svg { width: 20px; height: 20px; flex: none; color: var(--nb-text-on-dark); } /* Lime nur als Flaeche hinter einem Wort (design-kurz 18) */
.nb-ast-nacht__laden { display: flex; align-items: center; gap: var(--nb-space-m); }
.nb-ast-nacht__laden figcaption { color: var(--nb-text-on-dark); }
.nb-ast-nacht__stores .nb-ap__stores { display: grid; gap: var(--nb-space-2xs); justify-items: start; }
.nb-ast-nacht :focus-visible { outline-color: var(--nb-text-on-dark); }

/* Bild: Buehne mit fester Seitenlage 10:11, damit Geraete, Schweif und Fenster gemeinsam skalieren. Unten schneidet die
   Kartenkante die Geraete an. Ebenen: Schweif 0, hinteres Geraet 1, Fenster 2, vorderes Geraet 3, Fenster vorn 4 */
.nb-ast-nacht__bild { position: relative; min-height: 360px; }
.nb-ast-nacht__buehne { position: absolute; bottom: 0; left: 0; width: 100%; aspect-ratio: 10 / 11; transform: translateY(18%); } /* unten verankert, das untere Fuenftel liegt unter der Kartenkante */
.nb-ast-nacht__geraet { position: absolute; display: block; perspective: 1400px; }
.nb-ast-nacht__hinten { z-index: 1; top: 18%; left: 6%; width: 42%; perspective-origin: 100% 0%; }
.nb-ast-nacht__vorn { z-index: 3; top: 8%; left: 40%; width: 48%; perspective-origin: 0% 0%; }
.nb-ast-nacht__foto { position: relative; display: block; width: 100%; height: auto; }
.nb-ast3d__neig, .nb-ast3d { position: relative; display: block; }
.nb-ast3d { container-type: inline-size; }

/* Schweif 6, Box in Anteilen der Buehne. Das Fenster zeigt nur den mittleren Strich (Schleife unten links bis
   Spitze oben rechts) im Bereich des hinteren Geraets, die beiden anderen Striche liegen dort hinter dem Geraet */
.nb-ast-nacht__schweif { left: -30%; top: -25%; width: 140%; max-width: none; }
.nb-ast-nacht__schweif path { stroke-width: 150; }
.nb-ast-nacht__buehne > .nb-ast-nacht__schweif { z-index: 0; }
.nb-ast-nacht__vorhang.nb-ast-nacht__vorhang--vorn { z-index: 4; clip-path: inset(100%); }
.nb-ast-nacht__vorhang { position: absolute; inset: 0; z-index: 2; pointer-events: none; clip-path: polygon(-32% 82.2%, 52% 18.2%, 52% 60%, -32% 101.8%); }

@media (max-width: 1099px) { .nb-ast-nacht__text { padding: var(--nb-space-l); } }
/* Handy und Tablet bis 999 px: Text oben, Geraete gross darunter, oben angesetzt, unten von der Kartenkante angeschnitten.
   Lage wie Daniels Bild vom 18.10.2026 (65 Grad), um 5 % nach links, damit der untere Strich links aus der Karte laeuft.
   Werte exakt aus dem Baukasten, nicht runden */
@media (max-width: 999px) {
  .nb-ast-nacht { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .nb-ast-nacht__text { padding: var(--nb-space-l) var(--nb-space-m) 0; gap: var(--nb-space-s); }
  .nb-ast-nacht__h2 { max-width: none; }
  .nb-ast-nacht__laden { margin-top: var(--nb-space-2xs); }
  .nb-ast__qr2 { display: none; }
  .nb-ast-nacht__stores .nb-ap__stores { display: flex; flex-wrap: wrap; gap: var(--nb-space-xs); }
  .nb-ast-nacht__bild { height: 300px; min-height: 0; margin-top: var(--nb-space-m); }
  .nb-ast-nacht__buehne { top: 0; bottom: auto; transform: none; }
  .nb-ast-nacht__schweif { left: -5%; top: -15%; width: 120%; transform: rotate(65deg); }
  .nb-ast-nacht__vorhang { clip-path: polygon(-15% -5%, 47% -5%, 47% 55%, -5% 38%, -15% 36%); }
  .nb-ast-nacht__vorhang.nb-ast-nacht__vorhang--vorn { clip-path: inset(100%); }
}
@media (max-width: 767px) { .nb-ast-nacht__liste li { font-size: var(--nb-t-body-02); } }
/* Schmale Handys: der laengste Punkt bleibt einzeilig */
@media (max-width: 399px) {
  .nb-ast-nacht__text { padding-inline: var(--nb-space-s); }
  .nb-ast-nacht__liste li { gap: var(--nb-space-2xs); }
}

/* ---------- Fuss (Fassung d): rechts unten neben Pflichtzeile und Copyright ----------
   Auf Night: Text text-on-dark, QR auf weisser Flaeche */
.nb-afu__qr { margin: 0; flex: none; }
.nb-afu__qr-flaeche { display: block; padding: var(--nb-space-3xs); border-radius: var(--nb-radius-input); background: var(--nb-surface-page); }
.nb-afu__qr img { display: block; width: 64px; height: 64px; }
.nb-afu-marke { display: flex; align-items: center; gap: var(--nb-space-s); }
.nb-afu-marke :focus-visible { outline-color: var(--nb-text-on-dark); } /* Night-Ring auf Night nur 1,24:1 */
@media (min-width: 768px) {
  .nb-fu__ende:has(> .nb-afu-marke) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--nb-space-l); }
  .nb-fu__ende > .nb-afu-marke { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .nb-fu__ende:has(> .nb-afu-marke) > :not(.nb-afu-marke) { grid-column: 1; }
}
.nb-afu-marke__text { display: grid; gap: var(--nb-space-2xs); }
.nb-afu-marke__titel { margin: 0; color: var(--nb-text-on-dark); font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); line-height: 1.4; }
.nb-afu-marke .nb-ap__stores { display: flex; }
@media (max-width: 767px) {
  .nb-afu__qr { display: none; }
  .nb-afu-marke { flex-wrap: wrap; }
}