/* NextBuy-Kopf fuer den JTL-Shop, Block 3.1 (24.09.2026).
 *
 * 1:1 aus dem Shopify-Theme, Anweisung Daniel am 24.09.2026. Diese Datei
 * wird erzeugt und nicht von Hand gepflegt. Sie besteht aus vier Teilen:
 *
 * 1. Die alten Variablen aus assets/nb-tokens.css, auf die das Header-CSS
 *    zeigt. Werte unveraendert, auch Alt-Lime #EAFF9F, damit es aussieht
 *    wie heute. Gescoped auf den Kopf, damit nb-tokens-v3.css woanders gilt.
 * 2. assets/nextbuy-announcement-bar.css, unveraendert.
 * 3. assets/nextbuy-header.css, unveraendert.
 * 4. Was in Shopify inline in der Section stand (Sticky) und was Impact
 *    global lieferte ([hidden]).
 *
 * Aendert sich das Shopify-CSS, werden Teil 2 und 3 neu hineinkopiert.
 */

/* ---------- 1. Alte Variablen aus assets/nb-tokens.css ---------- */
.nb-announcement-section, .nb-kopf-bereich, .nb-mobile-drawer, .nb-mobile-drawer__overlay {
  --nb-deep-night: #010C28;
  --nb-deep-night-hover: #1F2937;
  --nb-deep-night-active: #111827;
  --nb-signal-blue: #5850FF;
  --nb-signal-blue-dark: #4840e8;
  --nb-lime: #EAFF9F;
  --nb-search-bg: #EDEFF3;
  --nb-radius-input: 12px;
  --nb-radius-pill: 999px;
  --nb-hover-tint: rgba(1, 12, 40, 0.05);
  --nb-hover-tint-strong: rgba(1, 12, 40, 0.08);
  --nb-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --nb-page-width: 1300px;
  --container-max-width: 1300px;
  --nb-header-height-main: 72px;
  --nb-header-height-nav: 52px;
}

/* ---------- 2. assets/nextbuy-announcement-bar.css ---------- */
/* ============================================================
   NEXTBUY ANNOUNCEMENT BAR
   ============================================================ */

.nb-announcement {
  background: #010C28;
  color: #F7F5F0;
  overflow: hidden;
  max-height: 40px;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  font-family: 'Gilroy', -apple-system, sans-serif;
}

.nb-announcement.is-collapsed {
  max-height: 0;
  opacity: 0;
}

.nb-announcement__inner {
  max-width: var(--container-max-width, 1300px);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.nb-announcement__item {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
}

.nb-announcement__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #EAFF9F;
  flex-shrink: 0;
}

/* Mobile: Announcement-Bar komplett ausblenden */
@media (max-width: 860px) {
  .nb-announcement-section { display: none; }
}

/* ---------- 3. assets/nextbuy-header.css ---------- */
/* ============================================================
   NEXTBUY HEADER — V8 Final (eigene Insel, kein Impact)
   ============================================================ */

/* Filter-Sidebar bekommt zusätzlich Atemluft unter unserem Header.
   Impact-Default ist +20px Polster, unser Header ist visuell etwas
   üppiger und braucht spürbar mehr Abstand, damit die erste Filter-
   Zeile nicht direkt am Header klebt. */
@media screen and (min-width: 1100px) {
  .collection__facets-scroller {
    top: calc(var(--sticky-area-height) + 50px) !important;
  }
}

/* ============================================================
   :root-Tokens wurden 2026-05-24 nach assets/nb-tokens.css migriert
   (3-Layer Token-Architektur — siehe Plan-File "Brand-System V2" + brand-design.md §1).
   Alle hier vorher definierten Variablen (--nb-signal-blue, --nb-deep-night,
   --nb-canvas, --nb-lime, --nb-radius-*, --nb-easing etc.) sind via
   Legacy-Aliase in nb-tokens.css weiter verfügbar — Component-CSS kann
   schrittweise auf Semantic Aliases (--nb-surface-*, --nb-action-*, etc.)
   umgestellt werden ohne Bruch.
   ============================================================ */

.nb-header-root,
.nb-header-root *,
.nb-header-root *::before,
.nb-header-root *::after {
  box-sizing: border-box;
}

.nb-header-root {
  background-color: #ffffff;
  font-family: 'Gilroy', -apple-system, sans-serif;
  color: var(--nb-deep-night);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .nb-nav {
    transition: none !important;
  }
}

.nb-header-root a {
  color: inherit;
  text-decoration: none;
}

.nb-header-root button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.nb-header-root ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   MAIN HEADER (Zeile 1)
   ============================================================ */
.nb-main {
  background-color: #ffffff;
  position: relative;
  z-index: 2;
}

.nb-main__inner {
  max-width: var(--nb-page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--nb-header-height-main);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.nb-main__left {
  display: flex;
  align-items: center;
  justify-self: start;
}

.nb-main__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
}

/* === Logo === */
.nb-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}

.nb-logo__image {
  display: block;
  height: auto;
  max-height: var(--nb-logo-max-height, 40px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.nb-logo__text {
  font-family: 'Gilroy', sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.04em;
  color: var(--nb-deep-night);
}

/* === Sell-Button === */
.nb-sell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid rgba(1, 12, 40, 0.4);
  border-radius: var(--nb-radius-pill);
  font-family: 'Gilroy', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nb-deep-night);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0.75rem;
  transition: background 0.3s var(--nb-easing),
              border-color 0.3s var(--nb-easing);
}

.nb-sell-btn__icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.nb-sell-btn:hover {
  background: var(--nb-hover-tint);
  border-color: rgba(1, 12, 40, 0.6);
}

.nb-sell-btn:hover .nb-sell-btn__icon {
  transform: rotate(180deg);
}

/* === Suchleiste === */
.nb-search {
  position: relative;
  width: 600px;
  max-width: 100%;
}

.nb-search__form {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--nb-search-bg);
  border: 1.5px solid transparent;
  border-radius: var(--nb-radius-pill);
  height: 46px;
  padding-right: 4px;
  transition: background 0.3s var(--nb-easing),
              border-color 0.3s var(--nb-easing),
              box-shadow 0.3s var(--nb-easing);
}

.nb-search__form:hover {
  background: #e5e8ed;
}

.nb-search__form:focus-within {
  background: #ffffff;
  border-color: var(--nb-signal-blue);
  box-shadow: 0 0 0 3px rgba(88, 80, 255, 0.12);
}

.nb-search__input {
  flex: 1;
  border: none;
  background: transparent;
  height: 100%;
  padding: 0 12px 0 24px;
  font-family: 'Gilroy', sans-serif;
  font-size: 14.5px;
  color: var(--nb-deep-night);
  outline: none;
  letter-spacing: -0.005em;
  min-width: 0;
}

.nb-search__input::placeholder {
  color: var(--nb-deep-night);
  opacity: 0.5;
}

/* Browser-natives Cancel-X bei <input type="search"> ausblenden.
   Quelle des "Tippen-scrollt-nach-oben"-Bugs: das Cancel-X erscheint/
   verschwindet bei Inhalt vs. leer und kann je nach Browser/OS subtle
   Höhen-Schwankungen am Input verursachen, die der ResizeObserver auf
   der Header-Section wahrnimmt. Dazu kommt: appearance:none nimmt dem
   Input gleichzeitig browser-spezifische Default-Decorations ab, die
   zwischen Tastendrücken minimal repainten können. */
.nb-search__input::-webkit-search-cancel-button,
.nb-search__input::-webkit-search-decoration,
.nb-mobile-search__input::-webkit-search-cancel-button,
.nb-mobile-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.nb-search__input,
.nb-mobile-search__input {
  -webkit-appearance: none;
  appearance: none;
}

.nb-search__form .nb-search__submit {
  width: 38px;
  height: 38px;
  background: var(--nb-signal-blue);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nb-search__form .nb-search__submit svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* === Predictive Search Dropdown === */
.nb-search__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: var(--nb-radius-input);
  box-shadow: 0 12px 48px rgba(1, 12, 40, 0.14);
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--nb-easing),
              visibility 0.3s var(--nb-easing),
              transform 0.3s var(--nb-easing);
  z-index: 60;
  max-height: 70vh;
  overflow-y: auto;
}

.nb-search.is-active .nb-search__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nb-search__dropdown-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(1, 12, 40, 0.5);
  padding: 0.5rem 0.75rem 0.75rem;
}

.nb-search__results {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nb-search__result {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: var(--nb-radius-input);
  color: var(--nb-deep-night);
  transition: background 0.25s var(--nb-easing);
}

.nb-search__result:hover {
  background: rgba(88, 80, 255, 0.06);
}

.nb-search__result-img {
  width: 48px;
  height: 48px;
  border-radius: var(--nb-radius-input);
  background: linear-gradient(135deg, #ebe8df 0%, #d8d3c5 100%);
  flex-shrink: 0;
  object-fit: cover;
}

.nb-search__result-info {
  flex: 1;
  min-width: 0;
}

.nb-search__result-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nb-search__result-meta {
  font-size: 12.5px;
  color: rgba(1, 12, 40, 0.55);
}

.nb-search__result-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--nb-signal-blue);
  white-space: nowrap;
}

.nb-search__empty,
.nb-search__loading {
  padding: 1rem;
  font-size: 14px;
  color: rgba(1, 12, 40, 0.55);
  text-align: center;
}

/* === Icons rechts === */
.nb-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nb-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nb-deep-night);
  border-radius: var(--nb-radius-input);
  transition: background 0.3s var(--nb-easing);
}

.nb-icon-btn:hover {
  background: var(--nb-hover-tint);
}

.nb-icon-btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.nb-cart-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--nb-signal-blue);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: var(--nb-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  letter-spacing: -0.02em;
  border: 2px solid #ffffff;
}

.nb-cart-badge[hidden] {
  display: none;
}

/* ============================================================
   KATEGORIE-NAV (Zeile 2)
   ============================================================ */
.nb-nav {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(1, 12, 40, 0.06);
  overflow: visible;
}

.nb-nav__inner {
  max-width: var(--nb-page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--nb-header-height-nav);
  display: flex;
  align-items: center;
}

.nb-nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nb-nav__item {
  position: relative;
}

.nb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--nb-deep-night);
  position: relative;
  cursor: pointer;
  transition: font-weight 0.3s var(--nb-easing);
}

.nb-nav__link-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.nb-nav__link-text::after {
  content: attr(data-text);
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 600;
}

.nb-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--nb-deep-night);
  border-radius: var(--nb-radius-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--nb-easing);
}

.nb-nav__item:hover .nb-nav__link,
.nb-nav__item.is-open .nb-nav__link {
  font-weight: 600;
}

.nb-nav__item:hover .nb-nav__link::after,
.nb-nav__item.is-open .nb-nav__link::after {
  transform: scaleX(1);
}

.nb-nav__chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.4s var(--nb-easing);
  flex-shrink: 0;
}

.nb-nav__item:hover .nb-nav__chevron,
.nb-nav__item:focus-within .nb-nav__chevron,
.nb-nav__item.is-open .nb-nav__chevron {
  transform: rotate(180deg);
}

/* === Featured (erstes Item): Sparkle + Lime === */
.nb-nav__link--featured {
  color: var(--nb-deep-night);
  position: relative;
  padding-left: 24px !important;
}

.nb-nav__link--featured::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23010C28'%3E%3Cpath d='M12 0L13.5 8.5L22 10L13.5 11.5L12 20L10.5 11.5L2 10L10.5 8.5L12 0Z'/%3E%3Cpath d='M19 14L19.7 17.3L23 18L19.7 18.7L19 22L18.3 18.7L15 18L18.3 17.3L19 14Z' opacity='0.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.5s var(--nb-easing);
}

.nb-nav__item:hover .nb-nav__link--featured::before {
  transform: translateY(-50%) rotate(20deg) scale(1.1);
}

.nb-nav__link--featured::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 0;
  bottom: 2px;
  height: 8px;
  background: var(--nb-lime);
  border-radius: var(--nb-radius-pill);
  transform: scaleX(1);
  z-index: -1;
  opacity: 0.85;
  transition: height 0.4s var(--nb-easing);
}

.nb-nav__item:hover .nb-nav__link--featured::after {
  height: 10px;
}

/* ============================================================
   MEGA-MENU
   ============================================================ */
.nb-mega {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border-radius: var(--nb-radius-input);
  box-shadow: 0 20px 60px rgba(1, 12, 40, 0.12);
  padding: 2rem;
  min-width: 720px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--nb-easing),
              visibility 0.4s var(--nb-easing);
  z-index: 50;
}

.nb-nav__item:hover .nb-mega,
.nb-nav__item:focus-within .nb-mega,
.nb-nav__item.is-open .nb-mega {
  opacity: 1;
  visibility: visible;
}

.nb-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
}

.nb-mega--with-feature .nb-mega__grid {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) 1.2fr;
}

.nb-mega__col-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(1, 12, 40, 0.5);
  margin-bottom: 1rem;
}

.nb-mega__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nb-mega__link {
  display: block;
  padding: 8px 12px;
  margin: 0 -12px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--nb-deep-night);
  border-radius: var(--nb-radius-input);
  transition: all 0.3s var(--nb-easing);
  letter-spacing: -0.005em;
}

.nb-mega__link:hover {
  background: rgba(88, 80, 255, 0.06);
  color: var(--nb-signal-blue);
  padding-left: 16px;
}

.nb-mega__feature {
  background: linear-gradient(135deg, var(--nb-signal-blue) 0%, #7b74ff 100%);
  border-radius: var(--nb-radius-input);
  padding: 1.25rem;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}

.nb-mega__feature::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--nb-lime);
  opacity: 0.18;
}

.nb-mega__feature-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  z-index: 0;
}

.nb-mega__feature-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.nb-mega__feature-title {
  font-family: 'Gilroy', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  position: relative;
  color: #ffffff;
  z-index: 1;
}

.nb-mega__feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  position: relative;
  color: #ffffff;
  z-index: 1;
}

/* ============================================================
   MOBILE
   ============================================================ */
.nb-mobile-search { display: none; }
.nb-burger { display: none; }
.nb-sell-btn--mobile { display: none; }
.nb-mobile-drawer { display: none; }

@media (max-width: 1100px) {
  .nb-search { width: 480px; }
}

@media (max-width: 980px) {
  .nb-sell-btn { display: none; }
  .nb-search { width: 380px; }
}

@media (max-width: 860px) {
  .nb-header-root {
    --nb-header-height-main: 60px;
  }

  .nb-main__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    padding: 0 1rem;
  }

  .nb-search { display: none; }
  .nb-nav { display: none; }

  .nb-main__left  { display: contents; }
  .nb-burger      { grid-column: 1; justify-self: start; }
  .nb-logo        { grid-column: 2; justify-self: center; }
  .nb-main__right { grid-column: 3; justify-self: end; }
  .nb-icons       { gap: 0; }

  .nb-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--nb-deep-night);
    margin-left: -8px;
    border-radius: var(--nb-radius-input);
    transition: background 0.3s var(--nb-easing);
  }

  .nb-burger:hover { background: var(--nb-hover-tint); }
  .nb-burger svg { width: 24px; height: 24px; }

  .nb-logo__text { font-size: 22px; }

  .nb-mobile-search {
    display: block;
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    position: relative;
    border-bottom: 1px solid rgba(1, 12, 40, 0.06);
  }

  .nb-mobile-search__row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nb-sell-btn--mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 42px;
    padding: 0 16px;
    background: transparent;
    border: 1.5px solid rgba(1, 12, 40, 0.4);
    border-radius: var(--nb-radius-pill);
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--nb-deep-night);
    white-space: nowrap;
    transition: background 0.3s var(--nb-easing),
                border-color 0.3s var(--nb-easing);
  }

  .nb-sell-btn--mobile:hover {
    background: var(--nb-hover-tint);
    border-color: rgba(1, 12, 40, 0.6);
  }

  .nb-sell-btn--mobile svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nb-sell-btn--mobile:hover svg {
    transform: rotate(180deg);
  }

  .nb-mobile-search__form {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--nb-search-bg);
    border: 1.5px solid transparent;
    border-radius: var(--nb-radius-pill);
    height: 42px;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 4px;
    transition: background 0.3s var(--nb-easing),
                border-color 0.3s var(--nb-easing);
  }

  .nb-mobile-search__form:focus-within {
    background: #ffffff;
    border-color: var(--nb-signal-blue);
  }

  .nb-mobile-search__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 12px 0 16px;
    font-family: 'Gilroy', sans-serif;
    font-size: 14px;
    outline: none;
    height: 100%;
    min-width: 0;
  }

  .nb-mobile-search__input::placeholder {
    color: var(--nb-deep-night);
    opacity: 0.5;
  }

  .nb-mobile-search__form .nb-mobile-search__submit {
    width: 34px;
    height: 34px;
    background: var(--nb-signal-blue);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .nb-mobile-search__form .nb-mobile-search__submit svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }

  .nb-mobile-search__dropdown {
    position: absolute;
    top: calc(100% - 4px);
    left: 1rem;
    right: 1rem;
    background: #ffffff;
    border-radius: var(--nb-radius-input);
    box-shadow: 0 12px 48px rgba(1, 12, 40, 0.18);
    padding: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.3s var(--nb-easing),
                visibility 0.3s var(--nb-easing),
                transform 0.3s var(--nb-easing);
    z-index: 60;
    max-height: 70vh;
    overflow-y: auto;
  }

  .nb-mobile-search.is-active .nb-mobile-search__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* === MOBILE DRAWER === */
  .nb-mobile-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 85%;
    max-width: 360px;
    background: #ffffff;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.4s var(--nb-easing), box-shadow 0.4s var(--nb-easing);
    box-shadow: none;
    overflow-y: auto;
  }

  .nb-mobile-drawer.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(1, 12, 40, 0.2);
  }

  .nb-mobile-drawer__overlay {
    position: fixed;
    inset: 0;
    background: rgba(1, 12, 40, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--nb-easing), visibility 0.4s var(--nb-easing);
    z-index: 199;
  }

  .nb-mobile-drawer.is-open + .nb-mobile-drawer__overlay,
  .nb-mobile-drawer__overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nb-mobile-drawer__header {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem;
  }

  .nb-mobile-drawer__close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nb-radius-input);
    color: var(--nb-deep-night);
    transition: background 0.3s var(--nb-easing);
  }

  .nb-mobile-drawer__close:hover,
  .nb-mobile-drawer__close:active {
    background: var(--nb-hover-tint);
  }

  .nb-mobile-drawer__close svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
  }

  .nb-mobile-drawer__list {
    padding: 0.5rem 0.75rem 1rem;
  }

  .nb-mobile-drawer__item {
    border-bottom: none;
  }

  .nb-mobile-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0.75rem;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--nb-deep-night);
    border-radius: var(--nb-radius-input);
    transition: background 0.3s var(--nb-easing);
  }

  .nb-mobile-drawer__link:hover,
  .nb-mobile-drawer__link:active {
    background: var(--nb-hover-tint);
  }

  .nb-mobile-drawer__sublist {
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
    display: none;
  }

  .nb-mobile-drawer__item.is-open .nb-mobile-drawer__sublist {
    display: block;
  }

  .nb-mobile-drawer__sublink {
    display: block;
    padding: 0.625rem 0.75rem;
    font-size: 14px;
    color: rgba(1, 12, 40, 0.7);
    border-radius: var(--nb-radius-input);
    transition: background 0.3s var(--nb-easing), color 0.3s var(--nb-easing);
  }

  .nb-mobile-drawer__sublink:hover,
  .nb-mobile-drawer__sublink:active {
    background: var(--nb-hover-tint);
    color: var(--nb-deep-night);
  }
}

/* ============================================================
   CART-DRAWER (Impact) — NextBuy-Polish
   Hover-Tint hinter dem Close-X, analog .nb-icon-btn.
   Trifft beide Cart-Zustände: Empty (direktes Kind, keine Klasse)
   und Filled (.drawer__close-icon, verschachtelt). Der Shadow-DOM-
   ::part(close-button) wird im cart-drawer hidden (kein slot="header"
   Content → drawer.js _updateSlotVisibility setzt hidden=true).
   padding + negative margin = 44×44-Hover-Zone ohne Layout-Shift.
   ============================================================ */
.cart-drawer [is="close-button"] {
  padding: 8px;
  margin: -8px;
  border-radius: var(--nb-radius-input);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.3s var(--nb-easing);
}

.cart-drawer [is="close-button"]:hover {
  background: var(--nb-hover-tint);
}


/* ---------- 4. Sticky aus der Shopify-Section, [hidden] aus Impact ---------- */
.nb-announcement-section {
  position: sticky;
  top: 0;
  z-index: 101;
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.nb-announcement-section.is-hidden { transform: translateY(-100%); }
.nb-kopf-bereich {
  position: sticky;
  top: 40px;
  z-index: 100;
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.nb-kopf-bereich.is-hidden { transform: translateY(calc(-100% - 40px)); }
@media (max-width: 860px) {
  .nb-kopf-bereich { top: 0; }
  .nb-kopf-bereich.is-hidden { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-announcement-section, .nb-kopf-bereich { transition: none; }
  .nb-announcement-section.is-hidden, .nb-kopf-bereich.is-hidden { transform: none; }
}
.nb-kopf-bereich [hidden], .nb-mobile-drawer [hidden] { display: none !important; }

/* Die Fokusregel aus nb-tokens-v3.css (.nb-v3 :focus-visible, schwarzer
   Rahmen) greift ueber den Body auch im Kopf. In Shopify gab es sie dort
   nicht, das Suchfeld hat seinen eigenen Ring aus nextbuy-header.css.
   Daniel am 24.09.2026: "Was sind das fuer Animationen drum herum?" */
.nb-kopf-bereich input:focus-visible,
.nb-mobile-drawer input:focus-visible { outline: none; box-shadow: none; }

/* Mega-Menue unter 1400 px an der Navigationszeile ausrichten statt am Menuepunkt.
   Sonst ragt das versteckte Laptop-Menue bei 980 px 142 px ueber den Rand und die Seite
   scrollt seitlich (zustands-pruefer 25.09.2026). */
@media (max-width: 1399px) {
  .nb-nav__inner { position: relative; }
  .nb-nav__item { position: static; }
  .nb-mega { left: 1.5rem; min-width: 0; width: min(720px, calc(100% - 3rem)); }
}

/* ---------- 5. Shop-Kopf aus der Werkstatt (kopf-port, 27.09.2026) ----------
   Quelle baukasten/sektionen/shopkopf/sektion.css, Werte in nextbuy-brand/brand/komponenten-global.md
   Paragraf 6. Nur Daniels Endwahl: Leiste a, Navigation c, Mega-Menue a, Hilfe-Menue b, Verkaufen a,
   Kontomenue b (Gast x), Punkt b, Schublade c. Jede Regel body:has([data-nb-kopfwahl=...]) der Werkstatt
   ist hier auf die gewaehlte Fassung aufgeloest, nicht gewaehlte Fassungen fehlen ganz. Wo das Aufloesen
   die Spezifitaet gesenkt haette, steht eine zweite Klasse davor, damit die Kaskade dieselbe bleibt.
   Teile 1 bis 4 oben sind unveraendert. Bewegungsvertrag (Daniel 27.09.2026): keine neue Dauer, keine
   neue Kurve, geprueft mit tools/pruefung/bewegung-vergleich.mjs. */

/* 5.0 Was die Werkstatt aus baukasten/kern/schale.css und nb-verkaufen.css mitbrachte und der Kopf auf
   jeder Seite braucht: die eine Kante (1200 px plus Rand 16, 32, 48 px) und die Klasse fuer Vorlesetext.
   Werte gleich wie dort, auf /verkaufen/ gelten sie doppelt und identisch. */
.nb-kopf-bereich.nb-kw { --nb-s-rand: var(--nb-space-s); --nb-s-breit: var(--nb-container); }
@media (min-width: 768px) { .nb-kopf-bereich.nb-kw { --nb-s-rand: var(--nb-space-l); } }
@media (min-width: 1100px) { .nb-kopf-bereich.nb-kw { --nb-s-rand: var(--nb-space-xl); } }
.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); }
.nb-kopf-bereich .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; }

/* 5.1 Altwerte auf v3 (Teil 1 oben). Gleiche Variablennamen wie in nb-tokens-v3.css */
.nb-announcement-section.nb-kw, .nb-kopf-bereich.nb-kw, .nb-mobile-drawer.nb-kw {
  --nb-lime: #D4FA64;                              /* nb-tokens-v3.css:23, statt gestrichenem #EAFF9F */
  --nb-radius-input: 16px;                         /* nb-tokens-v3.css:107, statt 12 px (Regel RADIUS) */
  --nb-hover-tint: var(--nb-surface-component);    /* statt Night 5 %, Mischwert gleich (design-auditor 27.09., dE 0,004) */
  --nb-search-bg: var(--nb-surface-component);     /* #F2F4F7 statt #EDEFF3, dE 0,015 */
  --nb-signal-blue: var(--nb-action-primary);
  --nb-signal-blue-dark: var(--nb-action-primary-hover); /* #473BDA statt #4840e8 */
  --nb-deep-night: var(--nb-night);
}
.nb-kw .nb-announcement__item:not(:last-child)::after { background: var(--nb-text-on-dark-accent); }
.nb-kw .nb-announcement__inner { font-size: var(--nb-t-body-02); gap: var(--nb-space-s); }
.nb-kw .nb-announcement__item { gap: var(--nb-space-s); }
/* Marker unter Top-Angebote: Lime auf Hell ist gesperrt (farbsystem.md:145), Textmarker ist Sky (:72),
   Night darauf 9,06:1. Nur die Farbe wechselt, Hoehe und Uebergang (8 auf 10 px, 0.4s) bleiben */
.nb-kw .nb-nav__link--featured::after { background: var(--nb-sky-500); opacity: 1; }
/* Grautoene unter AA (3,54 bis 4,35:1) auf text-muted (5,42 bis 5,97:1) */
.nb-kw :is(.nb-search__dropdown-title, .nb-search__result-meta, .nb-search__empty, .nb-search__loading) { color: var(--nb-text-muted); }
.nb-kw .nb-search__form:hover { background: var(--nb-ink-200); }
.nb-kw .nb-search__dropdown { box-shadow: var(--nb-sh-panel); }
.nb-kw .nb-cart-badge { font-size: var(--nb-t-label-01); }
.nb-kw .nb-nav { border-bottom-color: var(--nb-border-hairline); }
/* Nur offen wie im Bestand (Teil 3, .nb-mobile-drawer.is-open). In der Werkstatt galt der Schatten auch
   zu, dann lag er bei 390 px als grauer Streifen von rund 26 px an der linken Kante (gemessen 27.09.2026) */
.nb-mobile-drawer.nb-kw.is-open { box-shadow: var(--nb-sh-float); }
.nb-mobile-drawer.nb-kw .nb-mobile-drawer__link { font-weight: var(--nb-weight-regular); }
.nb-kw a { text-decoration: none; }
.nb-mobile-drawer.nb-kw .nb-mobile-drawer__close { border: 0; background: none; }

/* 5.2 Verkaufen-Knopf a: Umriss wie heute, Rand border-control (Entscheid 37), ohne Betrag */
.nb-kw .nb-sell-btn, .nb-kw .nb-sell-btn--mobile { border: 1px solid var(--nb-border-control); }
.nb-kw .nb-sell-btn:hover, .nb-kw .nb-sell-btn--mobile:hover { border-color: var(--nb-ink-600); }
/* Luecke 861 bis 980 px: dort stand nirgends "Geraet verkaufen" (Teil 3, Regel bei 980 px) */
@media (min-width: 861px) and (max-width: 980px) {
  .nb-kw .nb-sell-btn { display: inline-flex; margin-right: 0; }
  .nb-kw .nb-search { width: 300px; }
}

/* 5.3 Navigationszeile c und Mega-Menue a */
.nb-kw .nb-nav { position: relative; }
.nb-kw .nb-nav__list { flex: 1; }
.nb-kw .nb-nav__item.nb-kw-hatmega { position: static; display: inline-flex; align-items: center; }
.nb-kw-rechts { margin-left: auto; }
.nb-kw .nb-kw-mitzeichen { gap: var(--nb-space-2xs); }
.nb-kw .nb-kw-mitzeichen svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Pfeil als eigener Knopf neben dem Link (W3C APG, Disclosure mit Link und Knopf) */
.nb-kw-auf {
  width: 24px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; color: var(--nb-night); cursor: pointer;
}

.nb-kw-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--nb-easing), visibility 0.4s var(--nb-easing);
}
/* Ein Menue, das gerade ausblendet, faengt keine Maus mehr. Sonst oeffnete es sich wieder, wenn man von
   Laptops nach links auf Tablets und dann nach unten ging (Daniel 27.09.2026). Die Bewegung bleibt */
.nb-kw-mega { pointer-events: none; }
.nb-nav__item.is-open > .nb-kw-mega { opacity: 1; visibility: visible; pointer-events: auto; }
/* Bruecke ueber die 4 px zwischen Leiste und Menue, damit die Maus auf dem Weg nach unten nicht ins Leere
   faellt und das Menue schliesst (Daniel 27.09.2026 nach e815b4b). Unsichtbar, ohne Bewegung */
.nb-nav__item.is-open > .nb-kw-mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; }
/* Kopf und Menue sind eine weisse Flaeche, keine Linie dazwischen (Daniel 27.09.2026 mittags) */
.nb-kw-mega__flaeche { background: var(--nb-surface-page); }
.nb-kw .nb-nav:has(.nb-kw-hatmega.is-open) { border-bottom-color: transparent; }
.nb-kw-mega__v {
  box-sizing: border-box; max-width: calc(var(--nb-s-breit) + 2 * var(--nb-s-rand)); margin: 0 auto; padding: var(--nb-space-l) var(--nb-s-rand);
  grid-template-columns: 240px 1fr; gap: var(--nb-space-xl); align-items: start;
}
.nb-kw-mega__v.nb-kw-mega__v--ac { display: grid; }

/* Ueberschriften in Satzschreibung wie bei Back Market (14 px normal) */
.nb-kw-gut__titel, .nb-kw-mega__titel {
  font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-regular); color: var(--nb-text-body); margin: 0 0 var(--nb-space-s);
}
/* Links ein flacher grauer Kasten, buendig an der Fensterkante, ueber die volle Hoehe, ohne Radius,
   Schatten oder Ebene darin. Der Kasten ist ein Verlauf auf der Flaeche, damit er bis an den Rand
   reicht, waehrend der Text an der Kante der Seite bleibt. surface-secondary */
.nb-kw-mega__v--ac { --nb-kw-gut-breite: 240px; }
.nb-kw-mega__flaeche:has(.nb-kw-mega__v--ac) {
  background: linear-gradient(90deg, var(--nb-surface-secondary) 0 calc(max(var(--nb-s-rand), (100% - var(--nb-s-breit)) / 2) + 240px + var(--nb-space-m)), var(--nb-surface-page) 0);
}
.nb-kw-gut { align-self: start; }
/* Zwischen Kasten und Karten weisse Luft, 40 px statt 24 px */
.nb-kw-mega__v.nb-kw-mega__v--ac { column-gap: var(--nb-space-2xl); }
.nb-kw .nb-kw-gut__karte { display: flex; gap: var(--nb-space-xs); align-items: flex-start; color: var(--nb-text-heading); }
.nb-kw-gut__karte:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* Zeichen frei, ohne Kreis oder Kachel dahinter */
.nb-kw-gut__symbol { flex-shrink: 0; display: inline-flex; color: var(--nb-action-primary); padding-top: 1px; }
.nb-kw-gut__symbol svg { width: 24px; height: 24px; }
.nb-kw-gut__text { display: flex; flex-direction: column; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); }
.nb-kw-gut__text b { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-kw-gut__text span { color: var(--nb-text-body); }

.nb-kw-mega__kopf { display: flex; justify-content: space-between; align-items: baseline; }
.nb-kw .nb-kw-mega__alle { font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); text-decoration: underline; text-underline-offset: 3px; }
.nb-kw-kacheln { display: flex; flex-wrap: wrap; gap: var(--nb-space-m); list-style: none; margin: 0; padding: 0; }
.nb-kw-kachel { display: flex; flex-direction: column; gap: var(--nb-space-xs); width: 220px; color: var(--nb-text-heading); }
/* Zwei Klassen: .nb-header-root a { color: inherit } (Teil 3) ueberstimmt sonst jede Linkfarbe */
.nb-kw .nb-kw-kachel { color: var(--nb-text-heading); }
.nb-kw-kachel__bild { display: block; border-radius: var(--nb-radius-input); overflow: hidden; }
.nb-kw-kachel__bild img { display: block; width: 100%; height: auto; }
.nb-kw-kachel__name { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-kw-kachel:hover .nb-kw-kachel__name { text-decoration: underline; text-underline-offset: 3px; }

/* Abdunkeln hinter dem Mega-Menue. Unter dem Kopf (z 100), ueber der Seite */
.nb-kw-scrim {
  position: fixed; inset: 0; z-index: 99; background: var(--nb-alpha-scrim);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--nb-motion-kurve), visibility 0.4s var(--nb-motion-kurve);
}
.nb-kw-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
/* Die Seite dahinter zusaetzlich weich, wie bei Back Market. Keine Bewegung, nur Filter */
.nb-kw-scrim { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* 5.4 Hilfe-Menue b: drei Bildkarten wie "Services" bei Back Market */
.nb-kw-mega__v--dienst { display: block; }
.nb-kw-dienste { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: var(--nb-space-m); list-style: none; margin: 0; padding: 0; }
.nb-kw .nb-kw-dienst { display: flex; flex-direction: column; gap: var(--nb-space-xs); color: var(--nb-text-heading); }
.nb-kw-dienst__bild { display: block; border-radius: var(--nb-radius-input); overflow: hidden; }
.nb-kw-dienst__bild img { display: block; width: 100%; height: auto; }
.nb-kw-dienst__text { display: flex; flex-direction: column; gap: var(--nb-space-3xs); font-size: var(--nb-t-body-02); }
.nb-kw-dienst__text b { font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); }
.nb-kw-dienst__text span { color: var(--nb-text-body); }
.nb-kw-dienst:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* 5.5 Kontomenue b, Gast x (komponenten-strecke-konto.md Paragraf 6) */
.nb-kw-konto { position: relative; display: inline-flex; }
.nb-kw-konto__knopf { border: 0; padding: 0; background: none; cursor: pointer; }
/* Offen ohne blauen Ring (Daniel 27.09.2026), nur die graue Flaeche wie beim Zeigen. Fokusring bleibt */
.nb-kw-konto.is-open .nb-kw-konto__knopf { box-shadow: none; background: var(--nb-surface-component); }
/* Punkt b: steht nur im Markup, wenn es eine offene Aufgabe gibt */
.nb-kw-konto__punkt {
  display: block; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--nb-action-primary); box-shadow: 0 0 0 2px var(--nb-surface-page);
}
/* Angemeldet: Kreis mit Initialen statt Symbol (Daniel 28.09.2026). Farben wie die Eingabefelder
   (nb-feld.css:13-14, Daniel: „wie unsere Textfelder, minimalistisch“, kein Sky): ink-100 mit Night, bei Hover
   und offen ink-200. Rolle label-01 in Versalien (typografie.md:87), Innenabstand links gleicht die Laufweite
   hinter dem letzten Buchstaben aus. Nachtrag im Brand-Repo komponenten-global.md Paragraf 6 steht aus */
.nb-kw-konto__kreis {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--nb-space-l); height: var(--nb-space-l); border-radius: var(--nb-radius-pill);
  background: var(--nb-ink-100); color: var(--nb-text-heading);
  transition: background-color 0.3s var(--nb-easing);
  font-family: var(--nb-font-sans); font-size: var(--nb-t-label-01); font-weight: var(--nb-weight-semibold);
  line-height: 1; letter-spacing: 0.12em; padding-left: 0.12em; text-transform: uppercase;
}
/* Mit Kreis traegt der Kreis selbst den Zustand, die Knopfflaeche bleibt ruhig, sonst stuende grau auf grau */
.nb-kw-konto__knopf:has(.nb-kw-konto__kreis):hover,
.nb-kw-konto.is-open .nb-kw-konto__knopf:has(.nb-kw-konto__kreis) { background: none; }
.nb-kw-konto__knopf:hover .nb-kw-konto__kreis,
.nb-kw-konto.is-open .nb-kw-konto__kreis { background: var(--nb-ink-200); }
/* Mit Kreis sitzt der Punkt auf der Kreiskante, 15,6 px von der Mitte (Radius 16) */
.nb-kw-konto__kreis ~ .nb-kw-konto__punkt { top: 7px; right: 7px; }
.nb-kw-km {
  position: absolute; right: 0; top: calc(100% + 6px); width: 280px; z-index: 60;
  background: var(--nb-surface-page); border: 1px solid var(--nb-border-hairline);
  border-radius: var(--nb-radius-input); box-shadow: var(--nb-sh-panel); padding: var(--nb-space-2xs);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--nb-easing), visibility 0.4s var(--nb-easing);
}
.nb-kw-konto.is-open .nb-kw-km { opacity: 1; visibility: visible; }
.nb-kw-km__liste { list-style: none; margin: 0; padding: 0; }
.nb-kw-km__eintrag a, .nb-kw-km__ab button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-xs);
  min-height: 44px; width: 100%; padding: 0 var(--nb-space-xs); border-radius: var(--nb-radius-badge);
  font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-regular); color: var(--nb-text-heading); text-align: left;
  transition: background 0.3s var(--nb-easing);
}
.nb-kw .nb-kw-km__eintrag a { color: var(--nb-text-heading); }
.nb-kw-km__eintrag a:hover, .nb-kw-km__eintrag a:focus-visible { background: var(--nb-ink-100); }
.nb-kw-km__ab { margin: var(--nb-space-2xs) 0 0; padding-top: var(--nb-space-2xs); border-top: 1px solid var(--nb-border-hairline); }
.nb-kw-km__ab button { border: 0; background: none; cursor: pointer; color: var(--nb-text-link); font-family: inherit; }
.nb-kw .nb-kw-km__ab button { color: var(--nb-text-link); }
.nb-kw-km__ab button:hover { background: var(--nb-ink-100); }
/* b: Haupt- und Nebenpfade getrennt (Baymard 2019, Checkliste 13.9) */
.nb-kw-km__liste--haupt .nb-kw-km__eintrag a { font-weight: var(--nb-weight-semibold); }
.nb-kw-km__liste--neben { margin-top: var(--nb-space-2xs); padding-top: var(--nb-space-2xs); border-top: 1px solid var(--nb-border-hairline); }
.nb-kw-km__liste--neben .nb-kw-km__eintrag a { font-size: var(--nb-t-body-02); min-height: 44px; }
/* x: abgemeldet */
.nb-kw-km__v--x { padding: var(--nb-space-xs); }
.nb-kw-km__satz { text-wrap: balance; margin: 0 0 var(--nb-space-s); font-size: var(--nb-t-body-02); color: var(--nb-text-heading); }
/* Zwei Klassen: .nb-header-root a { color: inherit } machte die Schrift im Knopf dunkel auf Signal.
   Weiss auf Signal 5,24:1, farbcheck.mjs */
.nb-kw .nb-kw-km__anmelden {
  display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--nb-radius-pill);
  background: var(--nb-action-primary); color: var(--nb-action-primary-label); font-weight: var(--nb-weight-semibold);
  transition: background 0.3s var(--nb-easing);
}
.nb-kw-km__anmelden:hover { background: var(--nb-action-primary-hover); }
.nb-kw .nb-kw-km__anlegen { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--nb-space-2xs); color: var(--nb-text-link); font-weight: var(--nb-weight-semibold); border-radius: var(--nb-radius-pill); transition: background 0.3s var(--nb-easing); }
/* Zeigen wie die Eintraege angemeldet, graue Flaeche ink-100 (Daniel 28.09.2026: Konto anlegen ohne Hover) */
.nb-kw-km__anlegen:hover, .nb-kw-km__anlegen:focus-visible { background: var(--nb-ink-100); }

/* 5.6 Handy */
@media (max-width: 860px) {
  .nb-kw .nb-main__inner { position: relative; }
  .nb-kw-konto { position: static; }
  .nb-kw-km { left: var(--nb-space-s); right: var(--nb-space-s); width: auto; top: 100%; }
}

/* 5.7 Schublade c: ganzer Bildschirm mit Ebenen, wie Back Market am Handy. Bewegung wie die Schublade
   (transform 0.4s, eine Kurve, Teil 3) */
.nb-kw-se, .nb-kw-se__zurueck, .nb-kw-se__kopf { display: none; }
@media (max-width: 860px) {
  .nb-mobile-drawer.nb-kw {
    width: 100%; max-width: none; display: flex; flex-direction: column; overflow: hidden;
  }
  .nb-mobile-drawer.nb-kw .nb-mobile-drawer__header {
    display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--nb-space-2xs);
    padding: var(--nb-space-xs) var(--nb-space-s); border-bottom: 1px solid var(--nb-border-hairline); flex-shrink: 0;
  }
  .nb-mobile-drawer.nb-kw :is(.nb-mobile-drawer__close, .nb-kw-se__zurueck) {
    grid-row: 1; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    /* Kreis als Flaeche statt Haarlinie: Haarlinie als Rand eines Bedienelements ist gesperrt (1,25:1) */
    border: 0; border-radius: var(--nb-radius-pill); background: var(--nb-surface-component);
    color: var(--nb-text-heading); cursor: pointer; padding: 0;
  }
  .nb-mobile-drawer.nb-kw .nb-mobile-drawer__close { grid-column: 3; }
  .nb-mobile-drawer.nb-kw .nb-kw-se__zurueck { grid-column: 1; }
  .nb-mobile-drawer.nb-kw .nb-kw-se__zurueck[hidden] { visibility: hidden; display: inline-flex; }
  .nb-kw-se__zurueck svg { width: 20px; height: 20px; }
  .nb-mobile-drawer.nb-kw .nb-kw-se__kopf {
    display: flex; justify-content: center; align-items: center; grid-column: 2; grid-row: 1; margin: 0; min-width: 0;
  }
  .nb-kw-se__logo { display: block; height: 26px; width: auto; }
  .nb-kw-se__titel { font-size: var(--nb-t-heading-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); white-space: nowrap; }
  .nb-kw-se__titel:empty { display: none; }
  .nb-kw-se__kopf:has(.nb-kw-se__titel:not(:empty)) .nb-kw-se__logo { display: none; }

  .nb-mobile-drawer.nb-kw .nb-kw-se { display: block; position: relative; flex: 1; overflow: hidden; }
  .nb-kw-se__ebene {
    position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--nb-space-s) var(--nb-space-s) var(--nb-space-l);
    background: var(--nb-surface-page); transform: translateX(100%); visibility: hidden;
    transition: transform 0.4s var(--nb-easing), visibility 0.4s var(--nb-easing);
  }
  .nb-kw-se__ebene.is-aktiv { transform: none; visibility: visible; }
  .nb-kw-se__ebene.is-davor { transform: translateX(-100%); }

  .nb-kw-se__haupt, .nb-kw-se__neben, .nb-kw-se__kacheln { list-style: none; margin: 0; padding: 0; }
  .nb-kw .nb-kw-se__zeile {
    display: flex; align-items: center; gap: var(--nb-space-s); width: 100%; min-height: 56px; padding: 0 var(--nb-space-2xs);
    border: 0; background: none; border-radius: var(--nb-radius-input); cursor: pointer; text-align: left;
    font-family: inherit; font-size: var(--nb-t-body-01); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading);
    transition: background 0.3s var(--nb-easing);
  }
  .nb-kw-se__zeile:active, .nb-kw-se__zeile:hover { background: var(--nb-surface-component); }
  .nb-kw-se__zeile > svg { width: 24px; height: 24px; flex-shrink: 0; }
  .nb-kw-se__zeile > span { flex: 1; }
  .nb-kw-se__zeile > svg:last-child:not(:first-child) { width: 20px; height: 20px; color: var(--nb-text-muted); }
  .nb-kw .nb-kw-se__zeile--top { color: var(--nb-text-link); }
  .nb-kw-se__neben { margin-top: var(--nb-space-m); padding: var(--nb-space-s) var(--nb-space-2xs) 0; border-top: 1px solid var(--nb-border-hairline); display: grid; gap: var(--nb-space-3xs); }
  .nb-kw .nb-kw-se__neben a { display: flex; align-items: center; min-height: 44px; font-size: var(--nb-t-body-02); font-weight: var(--nb-weight-semibold); color: var(--nb-text-heading); }

  /* Ebene 2: Gut zu wissen als flacher grauer Kasten ueber die volle Breite, dann Karten in zwei Spalten */
  .nb-kw-se__gut { margin: calc(-1 * var(--nb-space-s)) calc(-1 * var(--nb-space-s)) var(--nb-space-m); padding: var(--nb-space-s); background: var(--nb-surface-secondary); }
  .nb-kw-se__gut .nb-kw-gut__titel { margin-bottom: var(--nb-space-xs); }
  .nb-kw-se__kat .nb-kw-mega__kopf { margin-bottom: var(--nb-space-s); }
  .nb-kw-se__kat .nb-kw-mega__titel { margin: 0; }
  .nb-kw-se__kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-m) var(--nb-space-s); }
  .nb-kw-se__kacheln .nb-kw-kachel { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .nb-kw-se__ebene { transition: none; } }
/* Hilfe als eigene Ebene in Schublade c (Entscheid 27.09.2026 mittags) */
.nb-kw-se__dienste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-m) var(--nb-space-s); list-style: none; margin: 0; padding: 0; }
.nb-kw-se__dienste .nb-kw-dienst__text span { font-size: var(--nb-t-body-02); }

/* 5.8 Leiste am Handy sichtbar wie bei Back Market. Sie steht oben im Fluss und scrollt weg, statt zu
   kleben, weil Kleben top und Verschiebung des Kopfs am Handy aendern wuerde (Teil 4, Bewegungsvertrag).
   Bei 390 px brauchen zwei Zusagen 398 px, frei sind 358. Am Telefon deshalb eine, ab 600 px zwei */
@media (max-width: 860px) {
  .nb-announcement-section.nb-kw { display: block; position: relative; top: auto; }
  .nb-kw .nb-kw-leiste .nb-announcement__item:nth-child(n+3) { display: none; }
  .nb-kw .nb-kw-leiste .nb-announcement__item:nth-child(2)::after { display: none; }
}
@media (max-width: 599px) {
  .nb-kw .nb-kw-leiste .nb-announcement__item:nth-child(n+2) { display: none; }
  .nb-kw .nb-kw-leiste .nb-announcement__item:first-child::after { display: none; }
}


/* 5.9 Suche nach dem Formular-System (komponenten-formular.md §4, Daniel 27.09.2026). Graue Pille ink-100 ohne Rand,
   48 px hoch, Hover und Fokus ink-200, sonst nichts: kein Rand, kein Ring, kein Weiß. Die Lupe links ist der
   Suchknopf, das x rechts erscheint mit Wert, im leeren Feld wechselt das Beispiel. Schrift 16 px gegen den Zoom
   am iPhone (vorher 14,5 und 14 px). Teile (Lupe, Beispiel, x) aus nb-feld.css, hier nur die Pille im Kopf.
   Die Übergänge der Pille bleiben wie im Bestand (Bewegungsvertrag, tools/pruefung/bewegung-vergleich.mjs). */
.nb-kw .nb-search__form, .nb-kw .nb-mobile-search__form { height: 48px; padding: 0; border: 0; background: var(--nb-ink-100); box-shadow: none; }
.nb-kw .nb-search__form:hover, .nb-kw .nb-search__form:focus-within,
.nb-kw .nb-mobile-search__form:hover, .nb-kw .nb-mobile-search__form:focus-within { border: 0; background: var(--nb-ink-200); box-shadow: none; }
.nb-kw .nb-search__form .nb-su__eingabe, .nb-kw .nb-mobile-search__form .nb-su__eingabe {
  flex: 1; height: 100%; padding: 0 44px 0 50px; border: 0; background: transparent; box-shadow: none; outline: none;
  font-family: inherit; font-size: 16px; letter-spacing: 0; color: var(--nb-text-heading); caret-color: var(--nb-text-heading); /* Cursor Night, nie Lila (Daniel 27.09.2026) */
}
.nb-kw .nb-search__form .nb-su__eingabe:is(:hover, :focus, :focus-visible),
.nb-kw .nb-mobile-search__form .nb-su__eingabe:is(:hover, :focus, :focus-visible) { background: transparent; outline: none; box-shadow: none; }
/* Beispiel und x stehen nie gleichzeitig, das Beispiel darf deshalb bis 16 px vor den Rand */
.nb-kw .nb-search__form .nb-su__beispiel, .nb-kw .nb-mobile-search__form .nb-su__beispiel { right: 16px; }
/* Am Handy ist die Pille rund 174 px breit (gemessen 375 px), „Suchen nach iPhone 13“ passt nicht. Dort steht nur
   das wechselnde Gerät, in Platzhalterfarbe und ohne Fettung, damit es nicht wie eine Eingabe aussieht */
.nb-kw .nb-mobile-search__form .nb-su__vor { display: none; }
.nb-kw .nb-mobile-search__form .nb-su__beispiel b { font-weight: var(--nb-weight-regular); color: var(--nb-text-body); }
.nb-kw .nb-search__form .nb-su__leeren, .nb-kw .nb-mobile-search__form .nb-su__leeren { right: 4px; }