/* KI-Assistent, Starter (Spur faq, Session 5 Teil 1, 08.10.2026). Das einzige CSS des Assistenten, das vor dem ersten
   Klick lädt. Fenster und Gespräch liegen in nb-assistent.css und kommen erst mit dem Klick (js/nb-assistent-starter.js).
   1:1 aus baukasten/sektionen/assistent-starter/sektion.css (Fassung a, b und c fallen weg) und baukasten/kern/assistent.css
   (Hub über fester Leiste, Ausweichen). Werte design/werte/komponenten-assistent.md §1, Ebene 90 nach §18.
   Ohne Starter bleiben Strecke und Kasse (snippets/nb-assistent.tpl). */
.nb-as-st-ort {
  --as-rand: var(--nb-space-s);
  --as-leiste: 0px;
  position: fixed; z-index: 90;
  right: calc(var(--as-rand) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--as-rand) + var(--as-leiste) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { .nb-as-st-ort { --as-rand: var(--nb-space-m); } }

/* Zwei Teile übereinander an der rechten Kante, nur transform und opacity bewegen sich (keine Breite). Der Knopf selbst ist
   unsichtbar und fängt keine Klicks, nur der sichtbare Teil */
.nb-as-st {
  display: inline-grid; justify-items: end; align-items: end;
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none;
  font: var(--nb-weight-semibold) var(--nb-t-heading-03)/1 var(--nb-font-sans);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.nb-as-st:focus-visible { outline: none; }
.nb-as-st__teil {
  grid-area: 1 / 1; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nb-space-2xs);
  height: 48px; border-radius: var(--nb-radius-pill); pointer-events: auto;
  box-shadow: var(--nb-sh-schwebt);
  transform-origin: right center;
  transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-rand) var(--nb-motion-kurve), background-color var(--nb-motion-farbe) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve);
}
.nb-as-st__teil--zu { padding: 0 var(--nb-space-m) 0 var(--nb-space-s); }
.nb-as-st__teil--offen { width: 48px; opacity: 0; transform: scale(.6); pointer-events: none; }
.nb-as-st__x { display: inline-flex; transform: rotate(-90deg); transition: transform 250ms var(--nb-motion-kurve); }
.nb-as-st__zeichen { display: inline-flex; }
/* Offen: Pille schrumpft zur Kante und blendet aus, der Kreis mit X dreht sich herein */
.nb-as-st[aria-expanded="true"] .nb-as-st__teil--zu { opacity: 0; transform: scale(.85); pointer-events: none; }
.nb-as-st[aria-expanded="true"] .nb-as-st__teil--offen { opacity: 1; transform: none; pointer-events: auto; }
.nb-as-st[aria-expanded="true"] .nb-as-st__x { transform: none; }
.nb-as-st[aria-expanded="false"]:focus-visible .nb-as-st__teil--zu, .nb-as-st[aria-expanded="true"]:focus-visible .nb-as-st__teil--offen { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; box-shadow: 0 0 0 5px var(--nb-surface-page), var(--nb-sh-schwebt); }
.nb-as-st:active .nb-as-st__teil { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-rand) var(--nb-motion-kurve), scale var(--nb-motion-druck) var(--nb-motion-kurve); }

/* a: Signal, Wort weiß 5,24:1 */
.nb-as-st--a .nb-as-st__teil { background: var(--nb-action-primary); color: var(--nb-action-primary-label); }
@media (hover: hover) and (pointer: fine) { .nb-as-st--a:hover .nb-as-st__teil { background: var(--nb-action-primary-hover); } }
.nb-as-st--a .nb-as-st__teil:active { background: var(--nb-action-primary-active); scale: var(--nb-motion-druck-scale); }

/* Offen: der Starter wird zum Schließen-Knopf. Nur beim schwebenden Fenster am Rechner sichtbar, sonst schließt das Fenster selbst */
.nb-as-st-ort:has([aria-expanded="true"]) { display: none; }
@media (min-width: 768px) { :root:has([data-nb-as-rahmen="schwebend"]:not([hidden])) .nb-as-st-ort:has([aria-expanded="true"]) { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .nb-as-st__teil, .nb-as-st__x { transition: none; }
}

/* ---------- aus baukasten/kern/assistent.css ---------- */
/* Vertrag mit der Seite: hat sie unten eine feste Leiste, steht deren Höhe in --nb-leiste-unten an :root. Der Starter steht
   dann 16 px darüber (knowledge/checklisten/shop-build.md 18.4). Setzt die Seite nichts, misst js/nb-assistent-starter.js
   die Leiste. Ohne Leiste bleibt der Rand des Starters (16 px, ab 768 px 24 px). */
[data-nb-ueberlagerung="assistent"] .nb-as-st-ort {
  --as-leiste: max(0px, calc(var(--nb-leiste-unten, 0px) + var(--nb-space-s) - var(--as-rand)));
}
/* Ausweichen (Daniel 08.10.2026): data-nb-weicht, solange Hauptknopf, Feld oder Preis näher als 16 px am Starter liegen.
   Ausblenden in 200 ms, visibility folgt. Den Übergang gibt es erst ab data-nb-weicht-bereit, der Stand beim Laden setzt
   ohne Einblenden (G15) */
[data-nb-ueberlagerung="assistent"] .nb-as-st-ort[data-nb-weicht] { opacity: 0; visibility: hidden; pointer-events: none; }
[data-nb-ueberlagerung="assistent"] .nb-as-st-ort[data-nb-weicht-bereit] { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s; }
[data-nb-ueberlagerung="assistent"] .nb-as-st-ort[data-nb-weicht-bereit][data-nb-weicht] { transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s var(--nb-motion-farbe); }
@media (prefers-reduced-motion: reduce) {
  [data-nb-ueberlagerung="assistent"] .nb-as-st-ort[data-nb-weicht-bereit] { transition: none; }
}