/* Formular-System. Jedes Eingabefeld, jede Suche, jede Aufklappliste und jeder Feldfehler im Shop.
   Werte: ../nextbuy-brand/brand/komponenten-formular.md (gesperrt am 27.09.2026, Daniel).
   Referenz-Umsetzung: baukasten/sektionen/feldstil, suchstil, auswahlstil, fehlerstil. Gewählt sind Feld D (neutral),
   Suche E (neutral), Liste B (gewählte Zeile ohne Fläche), Fehler B (ganzes Feld zart rot).
   Fünf Grundsätze: graue Fläche ohne Rahmen, Label im Feld, beim Klick wird nur das angeklickte Feld einen Hauch
   dunkler, Auswahl immer als eigenes Bauteil, Fehler färben das ganze Feld.
   Nie outline, nie Ring, nie Schein. Zwei Klassen plus Zustand, damit keine globale Fokusregel greift.
   Der Cursor ist Night wie die Schrift, nie Lila (Daniel 27.09.2026: „das geht gar nicht“). */

/* ---------- Eingabefeld (m-feld) ---------- */
.nb-fl {
  --fl-hoehe: 56px;
  --fl-grund: var(--nb-ink-100);
  --fl-grund-aktiv: var(--nb-ink-200);
  --fl-label: var(--nb-text-body);
  --fl-label-oben: var(--nb-text-muted);
  --fl-label-fokus: var(--nb-text-heading);
  display: grid; gap: var(--nb-space-2xs); align-content: start; min-width: 0;
}
.nb-fl[hidden] { display: none; }
.nb-fl__rahmen { position: relative; border-radius: var(--nb-radius-input); }
.nb-fl__eingabe {
  box-sizing: border-box; display: block; width: 100%; height: var(--fl-hoehe); margin: 0;
  padding: 24px var(--nb-space-s) 6px;
  border: 1px solid transparent; border-radius: var(--nb-radius-input);
  background: var(--fl-grund); color: var(--nb-text-heading); caret-color: var(--nb-text-heading);
  font: inherit; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; outline: none; box-shadow: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-fl__label {
  position: absolute; left: calc(var(--nb-space-s) + 1px); top: 16px; max-width: calc(100% - 2 * var(--nb-space-s));
  font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0; text-transform: none; color: var(--fl-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  transform-origin: left top;
  transition: transform var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
/* Label oben: Fokus, hat Wert (placeholder=" "), Autofill, Auswahl mit Wert */
.nb-fl__eingabe:is(:focus, :not(:placeholder-shown), :autofill, :-webkit-autofill) + .nb-fl__label,
.nb-fl.is-auswahl:not(.is-leer) .nb-fl__label,
.nb-dd.is-offen .nb-fl__label { transform: translateY(-10px) scale(.75); color: var(--fl-label-oben); }

/* Hover und Fokus: nur die Fläche, einen Hauch dunkler. Der Knopf einer Aufklappliste wird im Fokus nur per
   Tastatur dunkler (:focus-visible). Nach einer Wahl mit der Maus behält er den Fokus, und mit :focus blieb das
   erledigte Feld dunkel stehen, als wäre es dran (Daniel 27.09.2026, Fassung C) */
.nb-fl .nb-fl__eingabe:hover:not(:disabled) { background: var(--fl-grund-aktiv); }
.nb-fl .nb-fl__eingabe:is(:focus, :focus-visible) { outline: none; box-shadow: none; border-color: transparent; }
.nb-fl .nb-fl__eingabe:not(.nb-dd__knopf):focus, .nb-fl .nb-fl__eingabe:focus-visible { background: var(--fl-grund-aktiv); }
.nb-fl .nb-fl__eingabe:not(.nb-dd__knopf):focus + .nb-fl__label, .nb-dd.is-offen .nb-fl__label { color: var(--fl-label-fokus); }
/* Autofill färbt Chrome hellblau, auch im Fokus. Der innere Schatten füllt die Fläche grau, er ist kein Ring */
.nb-fl .nb-fl__eingabe:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) { -webkit-box-shadow: inset 0 0 0 40px var(--fl-grund) !important; box-shadow: inset 0 0 0 40px var(--fl-grund) !important; -webkit-text-fill-color: var(--nb-text-heading); transition: background-color 600000s 0s, color 600000s 0s; }
.nb-fl .nb-fl__eingabe:autofill { box-shadow: inset 0 0 0 40px var(--fl-grund) !important; }

/* Hilfetext und Meldung darunter */
.nb-fl__hilfe { margin: 0; font-size: var(--nb-t-body-02); line-height: 1.45; color: var(--nb-text-muted); }
.nb-fl__fehler { display: none; align-items: flex-start; gap: var(--nb-space-2xs); margin: 0; font-size: 13px; line-height: 1.45; color: var(--nb-critical-text); }
.nb-fl__fehler svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.nb-fl.is-fehler .nb-fl__fehler { display: flex; }

/* Fehler: das ganze Feld critical-bg, auch in Hover und Fokus, Label critical-text. Kein Rahmen, keine Linie */
.nb-fl.is-fehler .nb-fl__eingabe,
.nb-fl.is-fehler .nb-fl__eingabe:is(:hover, :focus, :focus-visible) { background: var(--nb-critical-bg); }
.nb-fl.is-fehler .nb-fl__eingabe:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 40px var(--nb-critical-bg) !important; box-shadow: inset 0 0 0 40px var(--nb-critical-bg) !important; }
.nb-fl.is-fehler .nb-fl__label, .nb-fl.is-fehler .nb-fl__eingabe:focus + .nb-fl__label { color: var(--nb-critical-text); }

/* Gesperrt: dieselbe Fläche, halb durchsichtig */
.nb-fl:has(.nb-fl__eingabe:disabled) { opacity: .5; }
.nb-fl .nb-fl__eingabe:disabled { cursor: not-allowed; }

/* Passwort mit Auge, Trefferfläche 44 px */
.nb-fl.has-auge .nb-fl__eingabe { padding-right: 56px; }
.nb-fl__auge { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; transform: translateY(-50%); padding: 0; border: 0; border-radius: var(--nb-radius-pill); background: none; color: var(--nb-ink-500); cursor: pointer; transition: color var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-fl__auge svg { width: 20px; height: 20px; }
.nb-fl__auge:hover, .nb-fl__auge[aria-pressed="true"] { color: var(--nb-text-heading); }
.nb-fl__auge:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ---------- Aufklappliste (m-auswahl) ---------- */
.nb-dd { position: relative; }
.nb-dd__knopf { display: block; padding-right: 48px; text-align: left; cursor: pointer; }
.nb-dd__wert { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nb-dd.is-offen .nb-dd__knopf { background: var(--fl-grund-aktiv); }
.nb-dd.is-fehler.is-offen .nb-dd__knopf { background: var(--nb-critical-bg); }
.nb-dd .nb-dd__knopf:focus-visible + .nb-fl__label { color: var(--fl-label-fokus); }
/* Ein Knopf hat keinen Platzhalter, :not(:placeholder-shown) trifft ihn immer. Leer und zu bleibt das Label groß */
.nb-dd.is-leer:not(.is-offen) .nb-fl__label { transform: none; }
.nb-dd.is-leer:not(.is-offen):not(.is-fehler) .nb-fl__label { color: var(--fl-label); }
.nb-dd.is-fehler .nb-fl__label, .nb-dd.is-fehler .nb-dd__knopf:focus + .nb-fl__label { color: var(--nb-critical-text); }
.nb-fl__pfeil { position: absolute; right: var(--nb-space-s); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--nb-text-heading); pointer-events: none; transition: transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-dd.is-offen .nb-fl__pfeil { transform: translateY(-50%) rotate(180deg); }
/* Die offene Liste liegt über allem, was folgt, etwa einer klebenden Knopfleiste */
.nb-dd.is-offen { z-index: 7; }

.nb-dd__karte {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline); border-radius: var(--nb-radius-input);
  box-shadow: 0 2px 4px rgb(var(--nb-night-rgb) / .04), 0 18px 44px -20px rgb(var(--nb-night-rgb) / .18);
  animation: nb-dd-rein var(--nb-motion-farbe) var(--nb-motion-kurve) both;
}
.nb-dd__karte[hidden] { display: none; }
.nb-dd__liste { box-sizing: border-box; max-height: 380px; overflow: auto; margin: 0; padding: var(--nb-space-2xs); list-style: none; outline: none; }
.nb-dd__gruppe { padding: var(--nb-space-xs) var(--nb-space-s) var(--nb-space-3xs); 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-dd__gruppe:not(:first-child) { margin-top: var(--nb-space-2xs); padding-top: var(--nb-space-s); border-top: 1px solid var(--nb-border-hairline); }
.nb-dd__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs); min-height: 44px;
  padding: var(--nb-space-2xs) var(--nb-space-s); border-radius: var(--nb-radius-badge);
  font-size: 16px; font-weight: 500; color: var(--nb-text-heading); cursor: pointer; user-select: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-dd__option:hover, .nb-dd__option.is-aktiv { background: var(--nb-ink-100); }
/* Gewählt: keine Fläche, Semibold, Haken Night, auch direkt nach dem Öffnen */
.nb-dd__option[aria-selected="true"] { font-weight: var(--nb-weight-semibold); }
.nb-dd__option[aria-selected="true"].is-aktiv:not(:hover) { background: none; }
.nb-dd__haken { display: grid; width: 20px; height: 20px; flex: none; color: var(--nb-text-heading); opacity: 0; }
.nb-dd__haken svg { width: 20px; height: 20px; }
.nb-dd__option[aria-selected="true"] .nb-dd__haken { opacity: 1; }
@keyframes nb-dd-rein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Suchleiste (m-suche) ---------- */
.nb-su { --su-hoehe: 48px; position: relative; display: flex; align-items: center; width: 100%; min-width: 0; }
.nb-su--gross { --su-hoehe: 56px; }
.nb-su__eingabe {
  box-sizing: border-box; flex: 1; width: 100%; height: var(--su-hoehe); margin: 0; padding: 0 48px 0 50px;
  border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-ink-100);
  font: inherit; font-size: 16px; color: var(--nb-text-heading); caret-color: var(--nb-text-heading);
  -webkit-appearance: none; appearance: none; outline: none; box-shadow: none;
  transition: background-color var(--nb-motion-farbe) var(--nb-motion-kurve);
}
.nb-su__eingabe::-webkit-search-cancel-button, .nb-su__eingabe::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.nb-su__eingabe::placeholder { color: var(--nb-text-body); opacity: 1; }
.nb-su .nb-su__eingabe:hover, .nb-su .nb-su__eingabe:is(:focus, :focus-visible) { outline: none; box-shadow: none; border: 0; background: var(--nb-ink-200); }
.nb-su--gross .nb-su__eingabe { padding-right: 132px; }
/* Die Lupe ist der Knopf zum Suchen, 44 px Trefferfläche, ohne Fläche. Fokusring nur per Tastatur */
.nb-su__lupe { position: absolute; left: 3px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; transform: translateY(-50%); color: var(--nb-text-heading); cursor: pointer; }
.nb-su--gross .nb-su__lupe { left: 6px; }
.nb-su__lupe svg { width: 20px; height: 20px; }
.nb-su__lupe:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.nb-su__lupe:focus-visible { outline: 2px solid var(--nb-text-heading); outline-offset: -2px; box-shadow: none; }
/* Wechselnde Beispiele im leeren Feld, aria-hidden. Beim Antippen oder mit Wert weg */
.nb-su__beispiel { position: absolute; left: 50px; right: 48px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--nb-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve); }
.nb-su--gross .nb-su__beispiel { right: 132px; }
.nb-su__eingabe:is(:focus, :not(:placeholder-shown)) ~ .nb-su__beispiel { opacity: 0; }
.nb-su__beispiel b { display: inline-block; font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), transform var(--nb-motion-transform) var(--nb-motion-kurve); }
.nb-su__beispiel b.is-weg { opacity: 0; transform: translateY(6px); }
/* x zum Löschen: erscheint mit Wert. Unsichtbar heißt auch nicht per Tab erreichbar */
.nb-su__leeren { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; transform: translateY(-50%); margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--nb-ink-500); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--nb-motion-farbe) var(--nb-motion-kurve), color var(--nb-motion-farbe) var(--nb-motion-kurve), visibility 0s linear var(--nb-motion-farbe); }
.nb-su__leeren svg { width: 18px; height: 18px; }
.nb-su__leeren:hover { color: var(--nb-text-heading); }
.nb-su__leeren:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.nb-su__eingabe:not(:placeholder-shown) ~ .nb-su__leeren { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nb-su--gross .nb-su__leeren { right: 100px; }
.nb-su__knopf { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 var(--nb-space-m); }
.nb-su-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .nb-fl__eingabe, .nb-fl__label, .nb-fl__pfeil, .nb-fl__auge, .nb-dd__option,
  .nb-su__eingabe, .nb-su__beispiel, .nb-su__beispiel b, .nb-su__leeren { transition: none !important; }
  .nb-dd__karte { animation: none !important; }
}