/* N226 (Owner 13.11.2026): Kopf „H5 Ink hell“ (zuerst H1 dunkel, am selben Tag auf hell gestellt) + Desktop-Menü „M5 Bühne + Symbole (ohne Kontur)“. Eigene Datei, blockierend nach dem Bündel, nur im Desktop-Dokument (layout/header.tpl, !$isMobile) und nur ab 992 px. Kein Markup geändert: Links, Reihenfolge und Menü-Artefakt bleiben, alles hier ist Darstellung. Not-Aus ohne Deploy: touch templates/Sweet/KOPF_INK_AUS (nächster Request lädt die Datei nicht mehr). Höhen von Kopfzeile (77 px) und Weltleiste (48 px + 4 px Streifen) bleiben unverändert, damit klebende Leisten darunter ihre Abstände behalten. Bühnenfoto je Welt: buehne-mobil.webp der Shoppingwelt (lädt erst, wenn das Panel aufgeht). */ @media (min-width:992px){ /* ================= Kopf „Ink hell“ (H5; Owner 13.11. nach der Sichtung von H1): Form von H1, Flächen hell wie zuvor, gelbe Details an Suchknopf, Warenkorb und den Unterstrichen von Ratgeber/Blog ================= */ #jtl-nav-wrapper{--ki-ink:#17150e;--ki-hell:#f6f2e6;--ki-ge:#eab00e;--ki-pap:#fdfcf7;--ki-li:rgba(246,242,230,.16);background:var(--ki-pap)} #jtl-nav-wrapper > .navbar-wrapper{background:#fff} #jtl-nav-wrapper a.bb-hdr-rg{color:var(--ki-ink);border-bottom-color:var(--ki-ge)} #jtl-nav-wrapper a.bb-hdr-rg:hover, #jtl-nav-wrapper a.bb-hdr-rg:focus-visible{color:var(--ki-ink);border-bottom-color:var(--ki-ink)} /* Suche: Pille mit rundem gelbem Knopf */ #jtl-nav-wrapper #search .input-group{flex-wrap:nowrap;align-items:center;height:50px;padding:0 5px 0 0;border:1px solid rgba(23,21,14,.22);border-radius:999px;background:#fff;transition:border-color .15s,box-shadow .15s} #jtl-nav-wrapper #search .input-group:focus-within{border-color:var(--ki-ge);box-shadow:0 0 0 2px var(--ki-ge)} #jtl-nav-wrapper #search .form-control:focus, #jtl-nav-wrapper #search .form-control:focus-visible{outline:0 !important;border:0;box-shadow:none !important} #jtl-nav-wrapper #search .twitter-typeahead{flex:1 1 auto;min-width:0;width:auto;height:48px} #jtl-nav-wrapper #search .form-control{width:100%;height:48px;padding:12px 12px 12px 22px;border:0;border-radius:999px 0 0 999px;background:transparent !important;box-shadow:none;color:var(--ki-ink);caret-color:var(--ki-ink)} #jtl-nav-wrapper #search .form-control::placeholder{color:#756f5f;opacity:1} #jtl-nav-wrapper #search .form-control.tt-hint{color:rgba(23,21,14,.35)} #jtl-nav-wrapper #search .form-clear{color:var(--ki-ink)} #jtl-nav-wrapper #search .input-group-append{flex:none;width:auto;height:auto;margin:0} #jtl-nav-wrapper #search .input-group-append > .btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--ki-ge);color:var(--ki-ink);box-shadow:none;letter-spacing:0} #jtl-nav-wrapper #search .input-group-append > .btn > span{color:inherit} #jtl-nav-wrapper #search .input-group-append > .btn:hover, #jtl-nav-wrapper #search .input-group-append > .btn:focus-visible{background:var(--ki-ink);color:var(--ki-ge)} /* Warenkorb als gelbe Pille (Hilfe und Konto behalten ihre dunklen Symbole) */ #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown{margin-left:10px;padding-left:18px} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown::before{content:"";position:absolute;left:0;top:50%;width:1px;height:30px;margin-top:-15px;background:rgba(23,21,14,.16)} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link{display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 14px;border-radius:999px;background:var(--ki-ge);color:var(--ki-ink)} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link > i, #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link .cart-icon-dropdown-price{color:var(--ki-ink)} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link .cart-icon-dropdown-price{font-weight:700} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link:hover, #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link:focus-visible{background:var(--ki-ink);color:var(--ki-ge)} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link:hover > i, #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link:hover .cart-icon-dropdown-price, #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link:focus-visible > i, #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link:focus-visible .cart-icon-dropdown-price{color:var(--ki-ge)} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown .fa-sup{box-shadow:0 0 0 2px var(--ki-ge)} /* Weltleiste: hell, Namen in der Plakatschrift, offene Welt gelb hinterlegt */ #jtl-nav-wrapper .bb-fn-desktop .bb-fn-bar > .bb-fn-entry{min-height:48px} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__link, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__toggle{height:40px;color:var(--ki-ink);transition:background-color .12s} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__link{align-self:center;top:0;margin:0;padding:2px 4px 2px 8px;border-radius:8px 0 0 8px;font:400 18px/1.2 Anton,"Hanken Grotesk",sans-serif;letter-spacing:.06em;text-transform:uppercase} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__toggle{align-self:center;top:0;margin:0;border-radius:0 8px 8px 0} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry:not(:has(> .bb-fn-entry__toggle)) > .bb-fn-entry__link{padding-right:12px;border-radius:8px} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__text{line-height:1.2;color:inherit} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__toggle-icon{border-color:currentColor} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__toggle--overflow{gap:8px;padding:2px 10px;border-radius:8px;font:400 18px/1.2 Anton,"Hanken Grotesk",sans-serif;letter-spacing:.06em;text-transform:uppercase} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__link::after, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-marker{display:none} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry:hover > .bb-fn-entry__link, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry:hover > .bb-fn-entry__toggle, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry:focus-within > .bb-fn-entry__link, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry:focus-within > .bb-fn-entry__toggle{background:rgba(23,21,14,.07)} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-bar > .bb-fn-entry.bb-fn-entry--open > .bb-fn-entry__link, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-bar > .bb-fn-entry.bb-fn-entry--open > .bb-fn-entry__toggle{background:var(--ki-ge)} /* ================= Menü M5 Bühne + Symbole ================= */ #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel{--bbfn-ink:#fff;--bbfn-ink-soft:rgba(246,242,230,.74);--bbfn-accent:var(--ki-ge);--bbfn-line:var(--ki-li);--bbfn-panel-bg:var(--ki-ink); border-radius:0;background:var(--ki-ink);color:var(--ki-hell)} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel::before{display:none} /* dunkles Band mit gelber Abschlusslinie über die ganze Fensterbreite: border-image mit seitlichem Auslauf ändert weder die Panelbreite (= Inhaltsbreite) noch erzeugt es Überlauf */ #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel:not(.bb-fn-overflow__panel){padding-bottom:3px;box-shadow:none;border-image:linear-gradient(to bottom,var(--ki-ink) calc(100% - 3px),var(--ki-ge) 0) fill 0/0/0 100vmax} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-overflow__panel{border-radius:0 0 12px 12px;box-shadow:0 24px 50px -24px #000} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel-inner{display:grid;grid-template-columns:clamp(300px,29%,440px) minmax(0,1fr);grid-template-rows:1fr auto;grid-template-areas:"buehne index" "buehne marken";padding:0} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel-inner:not(:has(.bb-fn-region--feature)){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"alle" "index" "marken"} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-cols{display:contents} /* Bühne links: Foto der Welt, darauf Name, Zahl der Bereiche, Text und Knopf */ #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--feature{grid-area:buehne;display:flex;min-width:0;min-height:480px;flex:none; background:linear-gradient(180deg,rgba(23,21,14,.1) 0%,rgba(23,21,14,.5) 42%,rgba(23,21,14,.95) 100%),var(--ki-foto,none) center/cover no-repeat,#1b1611} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-feature{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:100%;padding:36px 32px 104px;border:0;border-radius:0;background:none;overflow:visible} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-feature__media, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-feature__cta{display:none} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-feature__body{width:100%;padding:0} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-feature__body::before{content:"";display:block;width:28px;height:4px;margin-bottom:14px;border-radius:2px;background:linear-gradient(90deg,#178a41 0 33.4%,#eab00e 33.4% 66.7%,#d8402c 66.7%)} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-feature__title{margin:0;font-size:clamp(44px,4.6vw,74px);line-height:.98;letter-spacing:.005em;color:#fff;overflow-wrap:anywhere} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-feature__title::after{display:none;width:max-content;margin-top:10px;padding:3px 12px 2px;border-radius:8px;background:var(--ki-ge);color:var(--ki-ink);font-size:30px;line-height:1.1;transform:rotate(-1.6deg);transform-origin:0 50%} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-feature__text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;height:auto;margin:18px 0 0;font-size:14px;line-height:1.5;color:rgba(246,242,230,.84)} /* „Alle Produkte in …“ ist der erste Link im Panel (Tastaturweg) und sitzt als Knopf unten auf der Bühne */ #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel__all{grid-area:buehne;align-self:end;justify-self:start;z-index:1;margin:0 32px 38px;gap:8px;padding:14px 22px;border-radius:999px;background:var(--ki-ge);color:var(--ki-ink) !important;font-size:15px;line-height:1.2;text-decoration:none} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel__all:hover, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel__all:focus-visible{background:#fff} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel-inner:not(:has(.bb-fn-region--feature)) > .bb-fn-panel__all{grid-area:alle;margin:30px 44px 0} /* Bereiche rechts: Symbol frei (ohne Kachel, ohne Kontur) vor der Überschrift */ #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--index{grid-area:index;min-width:0;padding:34px 40px 26px 44px;flex:none} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 24px} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__group{min-width:0;margin:0} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__head{gap:10px;margin:0 0 10px;padding:0;border:0;font:400 17px/1.14 Anton,"Hanken Grotesk",sans-serif;letter-spacing:.025em;text-transform:uppercase;color:#fff !important} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__head::after{display:none} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__head:hover, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__head:focus-visible{color:var(--ki-ge) !important} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__icon{flex:none;width:40px;height:40px;padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__icon img{width:40px;height:40px;transition:transform .18s} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__head:hover .bb-fn-index__icon img{transform:scale(1.1) rotate(-5deg)} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__head-label{min-width:0;font:inherit;letter-spacing:inherit;overflow-wrap:anywhere;hyphens:auto} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__children{padding-left:4px} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__children li{margin:0} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel .bb-fn-index__children .bb-fn-link{display:inline;padding:1px 0;border-radius:4px;font-size:13.5px;line-height:22px;color:rgba(246,242,230,.74) !important;text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel .bb-fn-index__children .bb-fn-link:hover, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-panel .bb-fn-index__children .bb-fn-link:focus-visible{background:var(--ki-ge);box-shadow:-6px 0 0 var(--ki-ge),6px 0 0 var(--ki-ge);color:var(--ki-ink) !important} /* Marken unten als Leiste */ #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--brands-slider{grid-area:marken;display:flex;align-items:center;gap:20px;min-width:0;margin:0;padding:16px 40px 22px 44px;border-top:1px solid var(--ki-li)} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--brands-slider::before{content:"Marken in dieser Welt";flex:none;width:92px;font:700 10px/1.5 "Space Mono","BB Space Fallback",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,242,230,.62)} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--brands-slider > .bb-fn-slider{flex:1 1 auto;min-width:0} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--brands-slider .bb-fn-crate{padding:4px 26px} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--brands-slider .bb-fn-crate__chip{flex:none;width:104px;height:58px;padding:9px 12px;border:0;border-radius:10px;box-shadow:none} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--brands-slider .bb-fn-crate__chip img{max-height:40px} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--brands-slider .bb-fn-slider__btn{top:50%;border-color:rgba(246,242,230,.3);background:var(--ki-ink);color:var(--ki-hell)} #jtl-nav-wrapper .bb-fn-desktop .bb-fn-region--brands-slider .bb-fn-slider__btn:hover{border-color:var(--ki-ge);color:var(--ki-ge)} /* Bühnenfoto je Welt */ #jtl-nav-wrapper .bb-fn-entry[data-url="/HEADSHOP"] .bb-fn-region--feature{--ki-foto:url(/bilder/intern/shoplogo/rasta/plp/headshop/buehne-mobil.webp)} #jtl-nav-wrapper .bb-fn-entry[data-url="/BONGSHOP"] .bb-fn-region--feature{--ki-foto:url(/bilder/intern/shoplogo/rasta/plp/bongshop/buehne-mobil.webp)} #jtl-nav-wrapper .bb-fn-entry[data-url="/PAPERS-BLUNTS"] .bb-fn-region--feature{--ki-foto:url(/bilder/intern/shoplogo/rasta/plp/papers-blunts/buehne-mobil.webp)} #jtl-nav-wrapper .bb-fn-entry[data-url="/VAPORIZER"] .bb-fn-region--feature{--ki-foto:url(/bilder/intern/shoplogo/rasta/plp/vaporizer/buehne-mobil.webp)} #jtl-nav-wrapper .bb-fn-entry[data-url="/DABBING"] .bb-fn-region--feature{--ki-foto:url(/bilder/intern/shoplogo/rasta/plp/dabbing/buehne-mobil.webp)} /* Zahl der Bereiche unter dem Weltnamen: aus der Zahl der Gruppen im Panel (reines CSS, kein Markup) */ #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group) .bb-fn-feature__title::after{display:block} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(1):last-child) .bb-fn-feature__title::after{content:"1 Bereich"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(2):last-child) .bb-fn-feature__title::after{content:"2 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(3):last-child) .bb-fn-feature__title::after{content:"3 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(4):last-child) .bb-fn-feature__title::after{content:"4 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(5):last-child) .bb-fn-feature__title::after{content:"5 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(6):last-child) .bb-fn-feature__title::after{content:"6 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(7):last-child) .bb-fn-feature__title::after{content:"7 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(8):last-child) .bb-fn-feature__title::after{content:"8 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(9):last-child) .bb-fn-feature__title::after{content:"9 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(10):last-child) .bb-fn-feature__title::after{content:"10 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(11):last-child) .bb-fn-feature__title::after{content:"11 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(12):last-child) .bb-fn-feature__title::after{content:"12 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(13):last-child) .bb-fn-feature__title::after{content:"13 Bereiche"} #jtl-nav-wrapper .bb-fn-panel-inner:has(.bb-fn-index__group:nth-child(14):last-child) .bb-fn-feature__title::after{content:"14 Bereiche"} } /* 992–1279 px: Suche schmaler und Warenkorb enger, damit die Kopfzeile einzeilig bleibt */ @media (min-width:992px) and (max-width:1279.98px){ #jtl-nav-wrapper #search .search-wrapper{width:300px} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown{margin-left:2px;padding-left:12px} #jtl-nav-wrapper #shop-nav > .cart-icon-dropdown > .nav-link{gap:10px;padding:9px 13px 9px 11px} } @media (min-width:1280px){ #jtl-nav-wrapper #search .search-wrapper{width:454px;max-width:100%} } @media (min-width:992px) and (prefers-reduced-motion:reduce){ #jtl-nav-wrapper .bb-fn-desktop .bb-fn-index__icon img, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__link, #jtl-nav-wrapper .bb-fn-desktop .bb-fn-entry__toggle, #jtl-nav-wrapper #search .input-group{transition:none} }