/* N236 (Owner 14.11.2026, Dummy B + C): Desktop-Kopf beim Scrollen + breiteres Suchfeld.
   Nur im Desktop-Dokument geladen (header.tpl, nach bb-kopf-ink.css) und nur ab 992 px wirksam.
   Zustände setzt js/bb-kopf-scroll.js am <html>:
     (ohne)        oben: Kopf wie gehabt, zwei Zeilen (130 px)
     .bbk-klein    gescrollt: eine 56-px-Zeile  BB-Zeichen · Welten · Suche · Merkzettel/Konto/Warenkorb
     .bbk-weg      gelbe Leiste (Kapitelleiste #bbim-bar bzw. Weltleiste #bbk-bar) klebt und es geht weiter runter:
                   Kopf fährt nach oben weg, die Leiste rückt an die Oberkante und trägt BB-Zeichen + Warenkorb (.bbk-mini)
   Der Höhenunterschied klein/groß wird per margin-bottom am Kopf ausgeglichen (JS), der Inhalt springt nicht.
   Not-Aus ohne Deploy: templates/Sweet/KOPF_SCROLL_AUS anlegen (Blatt + Skript entfallen, nächster Request). */
@media (min-width:992px){
  /* ---- Suchfeld: Vendor fest 350 px (.menu-search-position-center .nav-item.search) -> 36vw, 300..560 px ---- */
  #jtl-nav-wrapper #search{width:clamp(300px,36vw,560px)!important;flex:0 1 auto}
  #jtl-nav-wrapper #search .search-wrapper{width:100%!important;max-width:none!important}
  #jtl-nav-wrapper #search form,#jtl-nav-wrapper #search .form-icon,#jtl-nav-wrapper #search .input-group{width:100%}

  /* ---- .bbk-klein: beide Zeilen werden eine ---- */
  html.bbk-klein #jtl-nav-wrapper{display:flex!important;align-items:center;gap:16px;height:56px;padding-inline:var(--bbk-rand,24px)}
  html.bbk-klein #jtl-nav-wrapper>.hide-navbar,html.bbk-klein #jtl-nav-wrapper>.hide-navbar>.navbar,
  html.bbk-klein #jtl-nav-wrapper>.navbar-wrapper,html.bbk-klein #jtl-nav-wrapper>.navbar-wrapper>.container,
  html.bbk-klein #jtl-nav-wrapper>.navbar-wrapper .navbar{display:contents!important}
  html.bbk-klein #jtl-nav-wrapper .nav-logo-wrapper{order:0;flex:none;width:auto;max-width:none;padding:0}
  html.bbk-klein #mainNavigation{order:1;flex:1 1 auto;min-width:0;height:56px!important;display:flex;align-items:center}
  html.bbk-klein #jtl-nav-wrapper .nav-icons-wrapper{order:2;flex:none;width:auto;max-width:none;padding:0}
  html.bbk-klein #jtl-nav-wrapper .bb-hdr-rg,html.bbk-klein #servicebar{display:none!important}
  html.bbk-klein #shop-logo{width:30px!important;height:30px!important;object-fit:cover;object-position:left center}
  html.bbk-klein #logo .navbar-brand{padding:0!important;margin:0}
  html.bbk-klein #jtl-nav-wrapper .bb-fn-bar{gap:0!important}
  html.bbk-klein #jtl-nav-wrapper .bb-fn-bar,html.bbk-klein #jtl-nav-wrapper .bb-fn-entry{height:40px!important;min-height:0!important}
  html.bbk-klein #jtl-nav-wrapper .bb-fn-entry__link{height:34px!important;min-height:0!important;font-size:15px!important;padding-left:6px!important}
  html.bbk-klein #jtl-nav-wrapper .bb-fn-entry__icon{width:22px!important;height:22px!important}
  html.bbk-klein #jtl-nav-wrapper .bb-fn-entry__icon img,html.bbk-klein #jtl-nav-wrapper .bb-fn-entry__icon svg{width:100%!important;height:100%!important}
  html.bbk-klein #jtl-nav-wrapper .bb-fn-entry__toggle{height:34px!important;width:22px!important;padding:0!important}
  /* Menü-Panel: hängt an der Weltenleiste (.bb-fn-bar), die in der einen Zeile nur einen Teil der Breite hat ->
     im kleinen Kopf auf die Inhaltsbreite wie oben legen (Maße setzt das Skript aus dem Container), direkt unter der Zeile */
  html.bbk-klein #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel:not(.bb-fn-overflow__panel){position:fixed!important;top:56px!important;
    left:var(--bbk-rand,24px)!important;right:auto!important;width:var(--bbk-breite,calc(100vw - 48px))!important;max-width:none!important}
  html.bbk-klein #jtl-nav-wrapper #search{width:clamp(190px,15vw,340px)!important}
  html.bbk-klein #jtl-nav-wrapper #search .input-group,html.bbk-klein #jtl-nav-wrapper #search input,
  html.bbk-klein #jtl-nav-wrapper #search button,html.bbk-klein #jtl-nav-wrapper #search .search-wrapper,
  html.bbk-klein #jtl-nav-wrapper #search form,html.bbk-klein #jtl-nav-wrapper #search .form-icon{height:38px!important;min-height:38px!important}
  html.bbk-klein #jtl-nav-wrapper #search input{padding-block:0!important}
  html.bbk-klein #shop-nav>.nav-item>.nav-link{padding:6px 9px!important}
  html.bbk-klein #shop-nav .cart-icon-dropdown{padding-left:8px!important}
  html.bbk-klein #shop-nav .cart-icon-dropdown>.nav-link{padding-block:4px!important}

  /* ---- gelbe Leisten kompakt, solange gescrollt; Andockkante = feste Kopfhöhe 56 px (die Leisten-Skripte messen nur
     beim Scrollen und erwischen sonst die Kopfkante mitten in der Einfahrt) ---- */
  html.bbk-klein .bbim-bar,html.bbk-klein .bbk-bar{top:56px!important}
  html.bbk-klein .bbi--g{--bbim-bar-h:44px}
  html.bbk-klein .bbim-bar__in{min-height:44px;padding-block:3px;gap:10px}
  html.bbk-klein .bbim-bar__kap{min-height:34px;padding:3px 12px 3px 3px;font-size:12px}
  html.bbk-klein .bbim-bar__nr{height:26px;font-size:12px;padding:0 10px}
  html.bbk-klein .bbi--g .bbim-bar__spur a{min-height:32px;font-size:13.5px;padding:0 11px}
  html.bbk-klein .bbi--g .bbim-bar__shop{min-height:34px;font-size:13px;padding:0 14px}
  html.bbk-klein .bbim-bar__pf{width:30px;height:30px}
  html.bbk-klein .bbim-bar__prog{height:2px}
  html.bbk-klein .bbk-bar__in{min-height:46px!important;padding-block:4px!important}
  html.bbk-klein .bbk-bar__finder{min-height:36px!important;padding-block:4px!important}
  html.bbk-klein #bbk-tabs button{padding-block:4px!important}
  html.bbk-klein .bbk-chip{min-height:0!important;padding-block:3px!important}

  /* ---- .bbk-weg: Kopf weg, Leiste an die Oberkante ---- */
  #jtl-nav-wrapper{transition:transform .25s ease}
  html.bbk-weg #jtl-nav-wrapper{transform:translateY(-105%)}
  .bbim-bar,.bbk-bar{transition:top .25s ease}
  html.bbk-weg .bbim-bar,html.bbk-weg .bbk-bar{top:0!important}
  html.bbk-weg .bbk-mini{display:inline-flex!important}
}
.bbk-mini{display:none!important}
.bbk-mini--logo{flex:none;align-items:center;width:30px;height:30px;overflow:hidden}
.bbk-mini--logo img{width:30px;height:30px;max-width:none;object-fit:cover;object-position:left center}
.bbk-mini--korb{flex:none;align-items:center;gap:8px;height:34px;padding:0 14px 0 12px;border-radius:999px;background:#17150e;
  color:#fff!important;text-decoration:none!important;font:700 13px/1 "Space Mono",ui-monospace,monospace;white-space:nowrap}
.bbk-mini--korb:hover{background:#000}
.bbk-mini--korb svg{width:18px;height:18px;flex:none}
.bbk-mini--korb b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#c8432b;color:#fff;font-size:11px}
.bbk-mini--korb b:empty{display:none}
@media (prefers-reduced-motion:reduce){#jtl-nav-wrapper,.bbim-bar,.bbk-bar{transition:none!important}}