/* Such-Fenster im Kopf (Spur suche, Task suche-bau, 13.10.2026). 1:1 aus der Werkstatt kopfsuche
   (baukasten/sektionen/suchfenster/sektion.css), nur Daniels Wahl vom 13.10.2026 (Commit d2e97729):
   Fläche a (Band wie Mega-Menü a, volle Breite unter dem Kopf, feste Höhe 440 px), Beim Tippen a (zwei Spalten,
   Vorschläge links, Geräte als Karten rechts), Frag mich a (Signal-Pille oben), Handy a (Vollbild-Ebene mit
   „Abbrechen“, Geräte zuerst, wie Back Market). Die Schalter data-nb-sfw-* der Werkstatt entfallen, ebenso die Regeln der
   anderen Fassungen und die Pille der Katalog-Vorschau.
   Vorgaben design-auditor Modus A 13.10.2026: Zeile 44 px (komponenten-formular.md:125), getippter Teil Regular, Rest
   Semibold (:142), Scrim Night 40 % mit Unschärfe nur im Kopf (komponenten-global.md:255, .nb-kw-scrim in
   nb-kopf.css), Ebene schublade 200 (design/tokens.json). Verhalten js/nb-suche.js, Markup snippets/nb-kopf.tpl.
   Grenze Handy und Rechner bei 860 px wie der Kopf (nb-kopf.css @media max-width 860px), die Werkstatt rechnete
   mit 859. */

.nb-sf__band[hidden], .nb-sf__ebene[hidden] { display: none !important; }
html.nb-sf-gesperrt, html.nb-sf-gesperrt body { overflow: hidden; }
.nb-sf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Band am Rechner (Fläche a) ---------- */
.nb-sf__band {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--nb-surface-page);
  opacity: 0; transform: translateY(calc(-1 * var(--nb-space-2xs)));
  transition: opacity var(--nb-motion-liste-aus) var(--nb-motion-kurve), transform var(--nb-motion-liste-aus) var(--nb-motion-kurve);
  font-family: var(--nb-font-sans); color: var(--nb-text-heading);
}
.nb-sf__band.is-offen { opacity: 1; transform: none; transition-duration: var(--nb-motion-liste); }
/* Feste Höhe am Rechner, in jedem Zustand gleich (Daniel 13.10.2026: „sollte schon eine feste höhe haben und nicht
   so tief nach unten gehen“). Back Market misst 349 leer und 431 beim Tippen. Kein Scrollen im Band, der Inhalt ist
   auf zwei Spalten und feste Zahlen begrenzt (nb-suche.js). Token suche-hoehe (design/tokens.json layout) */
.nb-sf__innen { box-sizing: border-box; height: var(--nb-suche-hoehe); overflow: hidden; padding: var(--nb-space-m) var(--nb-s-rand) var(--nb-space-l); }
.nb-sf__inhalt { display: grid; gap: var(--nb-space-xl); align-items: start; }
/* Leer und ohne Treffer bündig unter der Pille, mit Geräten im Container */
.nb-sf__band:is([data-nb-sf-zustand="leer"], [data-nb-sf-zustand="nichts"]) .nb-sf__inhalt {
  margin-left: calc(var(--nb-sf-x, 0px) - var(--nb-s-rand)); width: max(var(--nb-sf-w, var(--nb-suche-mindestbreite)), var(--nb-suche-mindestbreite));
  grid-template-columns: minmax(0, 1fr) var(--nb-suche-neben); gap: var(--nb-space-l);
}
.nb-sf__band:is([data-nb-sf-zustand="treffer"], [data-nb-sf-zustand="laedt"]) .nb-sf__inhalt {
  max-width: var(--nb-s-breit); margin: 0 auto; grid-template-columns: var(--nb-suche-spalte) minmax(0, 1fr);
}

/* Rechte Spalte: Verkaufen und Hilfe nebeneinander unter den Geräten */
.nb-sf__unten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nb-space-l); margin-top: var(--nb-space-s); }
.nb-sf__unten:first-child { margin: 0 0 var(--nb-space-s); }
.nb-sf__unten > div { min-width: 0; }
.nb-sf__unten .nb-sf__gruppe { margin-top: 0; }
.nb-sf__unten + .nb-sf__gruppe { margin-top: 0; }
/* Hilfe-Titel höchstens zwei Zeilen */
.nb-sf__kurz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* ---------- Bausteine ---------- */
.nb-sf__spalte { display: flex; flex-direction: column; min-width: 0; }
.nb-sf__gruppe { margin: var(--nb-space-m) 0 var(--nb-space-2xs); padding: 0 var(--nb-space-xs); font-size: var(--nb-t-body-02); font-weight: 400; line-height: 1.4; color: var(--nb-text-body); }
.nb-sf__spalte > .nb-sf__gruppe:first-child, .nb-sf__spalte > .nb-sf__frag + .nb-sf__gruppe, .nb-sf__spalte > .nb-sf__korrektur + .nb-sf__gruppe { margin-top: 0; }
.nb-sf__zeile {
  display: flex; align-items: center; gap: var(--nb-space-xs); min-height: 44px; padding: 0 var(--nb-space-xs);
  border: 0; border-radius: var(--nb-radius-badge); background: none; font: inherit; font-size: var(--nb-t-body-01); font-weight: 600; line-height: 1.3;
  color: var(--nb-text-heading); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-sf__zeile:active { background: var(--nb-ink-200); transition-duration: 0s; }
/* Aktiv per Pfeiltaste: Fläche und Linie, die Fläche allein trägt nur 1,10:1 (design-auditor A, Hinweis) */
.nb-sf__zeile.is-aktiv { background: var(--nb-ink-100); outline: 2px solid var(--nb-text-heading); outline-offset: -2px; }
.nb-sf__zeichen { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--nb-text-heading); }
.nb-sf__zeichen svg { width: 100%; height: 100%; }
.nb-sf__text { display: flex; align-items: baseline; gap: var(--nb-space-xs); flex: 1; min-width: 0; text-wrap: pretty; overflow-wrap: anywhere; }
.nb-sf__getippt { font-weight: 400; }
.nb-sf__zwei { display: flex; flex-direction: column; gap: var(--nb-space-3xs); min-width: 0; }
.nb-sf__betrag { font-size: var(--nb-t-body-02); font-weight: 400; color: var(--nb-text-body); white-space: nowrap; }
.nb-sf__zeile--verkaufen { min-height: var(--nb-suche-zeile-zwei); }
.nb-sf__zeile--alle { color: var(--nb-text-link); }
.nb-sf__zeile--alle .nb-sf__zeichen { color: var(--nb-text-link); }
.nb-sf__zeile--hilfe .nb-sf__zeichen { color: var(--nb-action-primary); }
.nb-sf__zeile--hilfe .nb-sf__text { font-weight: 400; }
@media (hover: hover) and (pointer: fine) {
  .nb-sf__zeile:hover { background: var(--nb-ink-100); }
}

/* „Frag mich“ als Signal-Pille wie der Starter (komponenten-assistent.md:51-57) */
.nb-sf__frag {
  display: inline-flex; align-items: center; gap: var(--nb-space-2xs); align-self: flex-start; height: 48px; margin: 0 0 var(--nb-space-s);
  padding: 0 var(--nb-space-s); border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-action-primary); color: var(--nb-action-primary-label);
  font: inherit; font-size: var(--nb-t-body-01); font-weight: 600; cursor: pointer; max-width: 100%;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-sf__frag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-sf__frag svg { flex: none; width: 20px; height: 20px; }
.nb-sf__frag:active { background: var(--nb-action-primary-active); transition-duration: 0s; }
.nb-sf__frag.is-aktiv { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nb-sf__frag:hover { background: var(--nb-action-primary-hover); } }

.nb-sf__nichts { margin: 0 0 var(--nb-space-s); padding: 0 var(--nb-space-xs); font-size: var(--nb-t-body-01); font-weight: 600; text-wrap: balance; overflow-wrap: anywhere; }
.nb-sf__korrektur { margin: 0 0 var(--nb-space-s); padding: 0 var(--nb-space-xs); font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-sf__korrektur b { font-weight: 600; color: var(--nb-text-heading); }

/* Farbpunkte wie die Produktkarte (kern/karte.css:46), hier nur zum Lesen */
.nb-sf__farben { display: inline-flex; align-items: center; gap: var(--nb-space-3xs); min-height: 20px; }
.nb-sf__punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--nb-sf-farbe); box-shadow: inset 0 0 0 1px var(--nb-border-control); }
.nb-sf__mehr { font-size: var(--nb-t-body-02); line-height: 1; color: var(--nb-text-body); }

/* Bühne wie die Kategoriekarte live (Fassung quer, nb-pdp.css [data-nb-foto="quer"] .nb-pk--b, G60). Daniel 16.10.2026:
   „haben wir das nicht mit unserem category page design gemacht“. Graue Bühne über die ganze Kartenbreite, flacher als
   hoch, das Gerät beginnt mit Luft oben und läuft unten aus dem Bild. mix-blend-mode multiply nimmt den weißen Grund der
   nicht freigestellten Fotos weg, das weiße Rechteck vom 13.10. („es muss auf weißem hintergrund sein“) entsteht so nicht
   mehr. Höhe bleibt der Token suche-buehne, das Band behält seine 440 px. */
.nb-sf__buehne { position: relative; display: block; flex: none; overflow: hidden; background: var(--nb-surface-component); border-radius: var(--nb-radius-input); }
.nb-sf__buehne img {
  position: absolute; left: 50%; top: var(--nb-sf-luft); width: auto; height: calc((100% - var(--nb-sf-luft)) * 1.2); max-width: none;
  transform: translateX(-50%); mix-blend-mode: multiply;
}
.nb-sf__buehne--hoch { --nb-sf-luft: var(--nb-space-m); height: var(--nb-suche-buehne); }
.nb-sf__buehne--klein { --nb-sf-luft: var(--nb-space-2xs); width: var(--nb-suche-bild-klein); height: var(--nb-suche-bild-klein); border-radius: var(--nb-radius-badge); }

.nb-sf__name { font-size: var(--nb-t-heading-03); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.nb-sf__preis { font-size: var(--nb-t-body-02); color: var(--nb-text-body); }
.nb-sf__preis b { font-size: var(--nb-t-price-02); font-weight: 600; color: var(--nb-text-heading); }
.nb-sf__neu { display: block; font-size: var(--nb-t-body-02); color: var(--nb-text-muted); }

/* Beim Tippen a: Geräte als Karten */
.nb-sf__karten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--nb-space-s); }
.nb-sf__karte { display: flex; flex-direction: column; gap: var(--nb-space-xs); padding: 0; border-radius: var(--nb-radius-input); color: var(--nb-text-heading); text-decoration: none; }
.nb-sf__karte-text { display: flex; flex-direction: column; gap: 0; padding: 0 var(--nb-space-3xs); }
.nb-sf__karte.is-aktiv, .nb-sf__gzeile.is-aktiv { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  /* Karten nur unterstreichen wie .nb-kw-dienst, kein grauer Hover an Zeilen mit Foto, das weiße Foto stünde sonst als
     Kasten darauf (G28, formular §5) */
  .nb-sf__gzeile:hover .nb-sf__name, .nb-sf__karte:hover .nb-sf__name { text-decoration: underline; text-underline-offset: 3px; }
}

/* Handy b: Gerätezeile mit kleinem Foto */
.nb-sf__gzeile {
  display: grid; grid-template-columns: var(--nb-suche-bild-klein) minmax(0, 1fr) auto; align-items: center; gap: var(--nb-space-xs);
  min-height: 64px; padding: var(--nb-space-3xs) var(--nb-space-3xs) var(--nb-space-3xs) var(--nb-space-3xs);
  border-radius: var(--nb-radius-input); color: var(--nb-text-heading); text-decoration: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-sf__gzeile:active .nb-sf__name { color: var(--nb-text-body); }
.nb-sf__gzeile-text { display: flex; flex-direction: column; gap: var(--nb-space-3xs); min-width: 0; }
.nb-sf__gzeile-preis { text-align: right; }

/* ---------- Laden (farbsystem.md Ladezustand) ---------- */
/* Unter 400 ms kein Platzhalter, die Wartezeit zählt nb-suche.js, der alte Inhalt bleibt so lange stehen. ink-100 mit
   Streif ink-50, Sweep motion-skeleton-sweep. Bewegt wird nur transform am Streif */
.nb-sf__skelett { position: relative; overflow: hidden; display: block; border-radius: var(--nb-radius-badge); background: var(--nb-ink-100); opacity: 0; animation: nb-sf-zeigen var(--nb-motion-farbe) var(--nb-motion-kurve) forwards; }
.nb-sf__skelett::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, var(--nb-ink-50) 50%, transparent 100%); transform: translateX(-100%); animation: nb-sf-streif var(--nb-motion-skeleton-sweep) var(--nb-motion-kurve) infinite; }
.nb-sf__skelett--zeile { height: 44px; margin-bottom: var(--nb-space-3xs); }
.nb-sf__skelett--titel { width: 96px; height: 20px; margin: 0 0 var(--nb-space-2xs); }
.nb-sf__skelett--buehne { height: var(--nb-suche-buehne); border-radius: var(--nb-radius-input); }
.nb-sf__skelett--text { height: 20px; margin-top: var(--nb-space-2xs); }
.nb-sf__skelett--g { height: 64px; margin-bottom: var(--nb-space-3xs); border-radius: var(--nb-radius-input); }
@keyframes nb-sf-zeigen { to { opacity: 1; } }
@keyframes nb-sf-streif { to { transform: translateX(100%); } }

/* ---------- Handy a: Ebene über allem ---------- */
.nb-sf__ebene {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: var(--nb-surface-page); font-family: var(--nb-font-sans); color: var(--nb-text-heading);
  opacity: 0; transform: translateY(var(--nb-space-xs));
  transition: opacity var(--nb-motion-fenster-aus) var(--nb-motion-kurve), transform var(--nb-motion-fenster-aus) var(--nb-motion-kurve);
}
.nb-sf__ebene.is-offen { opacity: 1; transform: none; transition-duration: var(--nb-motion-transform); }
.nb-sf__ekopf {
  display: flex; align-items: center; gap: var(--nb-space-2xs);
  padding: calc(var(--nb-space-2xs) + env(safe-area-inset-top)) var(--nb-space-s) var(--nb-space-2xs);
}
.nb-sf__abbrechen { flex: none; height: 44px; padding: 0 var(--nb-space-3xs); border: 0; background: none; font: inherit; font-size: var(--nb-t-body-01); font-weight: 600; color: var(--nb-text-heading); cursor: pointer; }
.nb-sf__abbrechen:active { color: var(--nb-text-body); }
@media (hover: hover) and (pointer: fine) {
  .nb-sf__abbrechen:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* Am Handy steht „Frag mich“ nach den Geräten (Back Market, Daniel 13.10.2026) */
.nb-sf__gzeile + .nb-sf__frag { margin-top: var(--nb-space-m); }
.nb-sf__epille { display: flex; align-items: center; flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 var(--nb-space-s); gap: var(--nb-space-2xs); border-radius: var(--nb-radius-pill); background: var(--nb-ink-100); }
.nb-sf__epille:focus-within { background: var(--nb-ink-200); }
.nb-sf__elupe { display: inline-flex; width: 20px; height: 20px; flex: none; }
.nb-sf__elupe svg { width: 100%; height: 100%; }
.nb-sf__efeld { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--nb-t-body-01); color: var(--nb-text-heading); caret-color: var(--nb-text-heading); -webkit-appearance: none; appearance: none; }
.nb-sf__efeld::-webkit-search-cancel-button { display: none; }
/* Fokus zeigt nur die Fläche ink-200 an der Pille (komponenten-formular.md §4), nicht den globalen Ring */
.nb-v3 .nb-sf__efeld:focus-visible, .nb-sf__efeld:focus-visible { outline: none; box-shadow: none; }
.nb-sf__einhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--nb-space-2xs) var(--nb-space-s) calc(var(--nb-space-l) + env(safe-area-inset-bottom)); }
.nb-sf__einhalt .nb-sf__gruppe { margin-top: var(--nb-space-s); }
.nb-sf__einhalt .nb-sf__frag { margin-bottom: var(--nb-space-s); }

/* Fokus: Felder zeigen ihn als Fläche ink-200 an der Pille (G18), Knöpfe als eine Linie */
.nb-sf__abbrechen:focus-visible, .nb-sf__zeile:focus-visible, .nb-sf__frag:focus-visible,
.nb-sf__karte:focus-visible, .nb-sf__gzeile:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .nb-sf__band, .nb-sf__ebene { transform: none; transition-property: opacity; }
  .nb-sf__skelett { animation: none; opacity: 1; }
  .nb-sf__skelett::after { display: none; }
}

/* Unter 1280 px wird es in der festen Höhe eng (Messung 1100 px, 13.10.2026): ein Hilfe-Treffer unter den Geräten,
   vier Karten statt fünf. Die Höhe bleibt 440 px */
@media (min-width: 861px) and (max-width: 1279px) {
  .nb-sf__band .nb-sf__unten .nb-sf__zeile--hilfe:nth-of-type(n+2) { display: none; }
  .nb-sf__band .nb-sf__karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nb-sf__band .nb-sf__karten > :nth-child(n+5) { display: none; }
}