/* ===== T-0127 (Design-Übergabe 01.10.): Menü-Gestaltung aus HookainRelaunch übernommen – Eigentümer ist das rendernde Plugin (DESIGN-REGELN Regel 3). Wortgleich aus dem kompilierten Theme bzw. route-home (body.hk-relaunch-/Startseiten-Gültigkeit unverändert); Abstände als --hk-space-Token (exakt per calc), Hover nur mit Maus (T-0097), ohne den doppelten Abstand unter der Weltweiche (T-0118). Abhängigkeiten: @keyframes hk-welt-puls / hk-welt-stups* und die Welt-Tokens (--hk-welt*, :has([data-hk-welt-aktiv=vape])) bleiben in HookainRelaunch (_shell.scss / _home-shell-overlay.scss). Relaunch löscht die Quellen mit design-drawer1 (Auslieferung direkt nach B1m + K2k). ===== */ body.hk-relaunch .hk-menu{--hm-paper:var(--hk-paper);--hm-ink:var(--hk-ink);--hm-muted:var(--hk-ink-2);--hm-line:var(--hk-line);--hm-card:var(--hk-surface-2);--hm-surface:var(--hk-surface);--hm-accent:var(--hk-welt-akzent);--hm-max:var(--hk-container);--hm-gutter:var(--hk-gutter)} body.hk-relaunch .hk-menu[data-hk-welt-aktiv="vape"]{--hm-accent:var(--hk-vape-punkt)} body.hk-relaunch .hk-menu .hk-nav__welten{position:relative;height:40px;gap:0;padding:calc(var(--hk-space-05) * 0.75);border:0;border-radius:var(--hk-radius-pill);background:var(--hk-surface-2);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hk-ink) 12%, transparent), inset 0 1px 3px color-mix(in srgb, var(--hk-ink) 14%, transparent)} body.hk-relaunch .hk-menu .hk-nav__welten::before{position:absolute;top:calc(var(--hk-space-05) * 0.75);bottom:calc(var(--hk-space-05) * 0.75);left:calc(var(--hk-space-05) * 0.75);width:calc(50% - var(--hk-space-05) * 0.75);border-radius:var(--hk-radius-pill);background:var(--hk-welt);box-shadow:0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2);content:"";transition:transform 260ms var(--hk-ease-spring), background-color 260ms var(--hk-ease)} body.hk-relaunch .hk-menu .hk-nav__welten:has(> [data-hk-welt="vape"][aria-pressed="true"])::before{transform:translateX(100%)} body.hk-relaunch .hk-menu .hk-nav__welten button{position:relative;min-width:0;min-height:0;flex:1 1 0;padding:0 var(--hk-space-2);border-radius:var(--hk-radius-pill);background:transparent;color:var(--hk-ink);font:var(--hk-fw-medium) var(--hk-fs-s) / var(--hk-lh-s) var(--hk-font);letter-spacing:var(--hk-tracking-caps-s);text-transform:uppercase} body.hk-relaunch .hk-menu .hk-nav__welten button::before{position:absolute;inset:-5px 0;content:""} body.hk-relaunch .hk-menu .hk-nav__welten button[aria-pressed="true"]{background:transparent;color:var(--hk-on-welt);font-weight:var(--hk-fw-bold)} body.hk-relaunch .hk-menu .hk-nav__welten button[aria-pressed="true"]::after{position:absolute;top:calc(50% - 3px);right:10px;width:6px;height:6px;margin-top:0;border-radius:50%;background:var(--hk-welt-akzent);content:"";animation:hk-welt-puls 2s var(--hk-ease) infinite} body.hk-relaunch .hk-menu.hk-nav .hk-nav__welten{width:200px} body.hk-relaunch .hk-menu.hk-drawer{padding:0;font:var(--hk-fw-regular) var(--hk-fs-m) / var(--hk-lh-m) var(--hk-font)} body.hk-relaunch .hk-menu.hk-drawer .hk-nav__welten{height:var(--hk-control);margin-bottom:var(--hk-space-2)} body.hk-relaunch .hk-menu.hk-drawer .hk-drawer__aufgaben{margin-bottom:var(--hk-space-2)} body.hk-relaunch .hk-menu.hk-drawer .hk-drawer__liste{grid-template-columns:minmax(0, 1fr);gap:var(--hk-space-1)} body.hk-relaunch .hk-menu.hk-drawer .hk-drawer__link{gap:calc(var(--hk-space-1) + var(--hk-space-05) * 1);min-height:52px;padding:var(--hk-space-1) var(--hk-space-2);border-radius:var(--hk-radius-s);background:var(--hk-surface);color:var(--hk-ink);font-weight:var(--hk-fw-medium);transition:background-color var(--hk-duration) var(--hk-ease)} @media(hover:hover){body.hk-relaunch .hk-menu.hk-drawer .hk-drawer__link:hover{background:var(--hk-hover-2)}} body.hk-relaunch .hk-menu.hk-drawer .hk-drawer__link>span[aria-hidden]{color:var(--hk-ink-3);font-size:20px;line-height:1} body.hk-relaunch .hk-menu.hk-drawer .hk-drawer__link>.hk-panel__icon{width:40px;height:40px} body.hk-relaunch .hk-menu.hk-drawer .hk-drawer__aufgaben .hk-aufgabe{min-height:64px;border:var(--hk-border);background:var(--hk-paper)} body.hk-relaunch .hk-menu.hk-drawer .hk-nav__zusatz,body.hk-relaunch .hk-menu.hk-drawer .hk-panel__zahl{color:var(--hk-ink-3);font:var(--hk-fw-regular) var(--hk-fs-s) / var(--hk-lh-s) var(--hk-font)} body.hk-relaunch .hk-menu.hk-drawer .hk-drawer__zurueck{min-height:48px;margin-bottom:0;padding:0 var(--hk-space-1);border-bottom:var(--hk-border);background:var(--hk-surface);color:var(--hk-ink-2);font-size:var(--hk-fs-s)} body.hk-relaunch .hk-menu.hk-drawer .hk-nav__panel{border:0;border-radius:0;background:var(--hk-paper)} body.hk-relaunch .hk-menu.hk-drawer .hk-panel{gap:var(--hk-space-2);padding:var(--hk-space-2) 0 var(--hk-space-3)} body.hk-relaunch .hk-menu.hk-drawer .hk-panel__kopf h2{font:var(--hk-fw-medium) var(--hk-fs-l) / var(--hk-lh-l) var(--hk-font);letter-spacing:0} body.hk-relaunch .hk-menu.hk-drawer .hk-panel__row{min-height:var(--hk-tap);padding:calc(var(--hk-space-1) + var(--hk-space-05) * 1) 0;border-bottom:var(--hk-border);border-radius:0} body.hk-relaunch .hk-menu.hk-drawer .hk-panel__row>.hk-panel__icon{width:24px;height:24px} body.hk-relaunch .hk-menu.hk-drawer .hk-panel__gh{color:var(--hk-welt-text)} body.hk-relaunch .hk-menu.hk-drawer .hk-panel__chips{flex-wrap:nowrap;overflow-x:auto;padding-block:calc(var(--hk-space-05) + var(--hk-space-05) * 0.5);scrollbar-width:none} body.hk-relaunch .hk-menu.hk-drawer .hk-panel__chips>li{flex:none} body.hk-relaunch .hk-menu.hk-drawer .hk-panel__chips::-webkit-scrollbar{display:none} body.hk-relaunch .hk-menu.hk-nav{z-index:calc(var(--hk-shell-layer-header) - 1);border-bottom:var(--hk-border);background:var(--hk-paper)} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen{height:var(--hk-shell-navigation-height);min-height:var(--hk-shell-navigation-height)} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste{margin:0} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link,body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__mehr>.hk-nav__link{height:var(--hk-shell-navigation-height);min-height:var(--hk-shell-navigation-height);padding-top:0;padding-bottom:0;border-bottom-width:2px} body.hk-relaunch .hk-menu .hk-nav__link{font-size:var(--hk-fs-s);font-weight:var(--hk-fw-medium);letter-spacing:var(--hk-tracking-caps-s);text-transform:uppercase} body.hk-relaunch .hk-menu.hk-nav .hk-nav__panel{border:0;border-radius:0 0 8px 8px;background:var(--hk-shell-panel-flaeche);box-shadow:var(--hk-elev-2);-webkit-backdrop-filter:none;backdrop-filter:none} body.hk-relaunch .hk-menu .hk-panel{gap:var(--hk-space-2) var(--hk-space-3);font:var(--hk-fw-regular) var(--hk-fs-m) / var(--hk-lh-m) var(--hk-font)} body.hk-relaunch .hk-menu .hk-panel__kopf h2{font:var(--hk-fw-bold) var(--hk-fs-xl) / var(--hk-lh-xl) var(--hk-font);letter-spacing:var(--hk-tracking-tight)} body.hk-relaunch .hk-menu .hk-panel__alle{font:var(--hk-fw-medium) var(--hk-fs-s) / var(--hk-lh-s) var(--hk-font);letter-spacing:var(--hk-tracking-caps-s);text-transform:uppercase} body.hk-relaunch .hk-menu .hk-panel__gh{color:var(--hk-ink-2);font:var(--hk-fw-medium) var(--hk-fs-xs) / var(--hk-lh-xs) var(--hk-font);letter-spacing:var(--hk-tracking-caps)} body.hk-relaunch .hk-menu .hk-panel__row{align-items:center;min-height:36px;padding:var(--hk-space-05) var(--hk-space-1);border-radius:var(--hk-radius-s)} @media(hover:hover){body.hk-relaunch .hk-menu .hk-panel__row:hover,body.hk-relaunch .hk-menu .hk-panel__markenkachel:hover{background:var(--hk-welt-tint-2);color:var(--hk-ink)}} body.hk-relaunch .hk-menu .hk-panel__zahl{color:var(--hk-ink-3);font-size:var(--hk-fs-xs)} body.hk-relaunch .hk-menu .hk-panel__markenkachel{border-radius:var(--hk-radius-s);background:var(--hk-surface);font:var(--hk-fw-regular) var(--hk-fs-xs) / var(--hk-lh-xs) var(--hk-font)} @media(hover:hover){body.hk-relaunch .hk-menu .hk-panel__markenkachel:hover{border-color:var(--hk-welt)}} body.hk-relaunch .hk-menu .hk-chip--panel{min-height:32px;gap:calc(var(--hk-space-05) + var(--hk-space-05) * 0.5);padding:0 calc(var(--hk-space-1) + var(--hk-space-05) * 0.5);border-color:var(--hk-line);font-size:var(--hk-fs-s)} body.hk-relaunch .hk-menu .hk-chip--panel::after{position:absolute;inset:-6px 0;content:""} @media(hover:hover){body.hk-relaunch .hk-menu .hk-chip--panel:hover{border-color:var(--hk-welt);background:var(--hk-welt-tint-2)}} @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){body.hk-relaunch .hk-menu.hk-nav .hk-nav__panel{background:color-mix(in srgb, var(--hk-shell-panel-flaeche) 93%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}} @media (prefers-reduced-transparency:reduce){body.hk-relaunch .hk-menu.hk-nav .hk-nav__panel{background:var(--hk-shell-panel-flaeche);-webkit-backdrop-filter:none;backdrop-filter:none}} @media (min-width:992px){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste .hk-nav__zusatz{font-size:var(--hk-fs-xs);font-weight:var(--hk-fw-medium);line-height:var(--hk-lh-xs);letter-spacing:0;text-transform:none}} body.hk-relaunch .hk-menu .hk-nav__aufgaben .hk-aufgabe{font-size:var(--hk-fs-s);font-weight:var(--hk-fw-medium);line-height:var(--hk-lh-s);letter-spacing:0;text-transform:none} body.hk-relaunch .hk-menu .hk-nav__aufgaben .hk-aufgabe[aria-expanded="true"]{border-color:var(--hk-welt, var(--hk-ink));background:var(--hk-welt, var(--hk-ink));color:var(--hk-on-welt, var(--hk-paper))} @media (prefers-reduced-motion:reduce){body.hk-relaunch .hk-menu .hk-nav__welten::before{transition:none}} @media (prefers-reduced-motion:reduce){body.hk-relaunch .hk-menu .hk-nav__welten button[aria-pressed="true"]::after{animation:none}} body.hk-relaunch .hk-menu.hk-nav{border-bottom:1px solid var(--hk-line);background:var(--hk-paper)} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen{gap:var(--hk-space-2);height:72px;min-height:72px} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste{align-items:stretch;gap:0;height:72px;flex-wrap:nowrap} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item{display:flex;align-items:stretch;height:100%} /* T-0126 (B1l) bleibt wirksam: die Regel darüber (0,6,1) schlug das Ausblenden der anderen Welt vor menue.js (0,5,1). */ html[data-hk-welt=shisha] body.hk-relaunch .hk-menu.hk-nav:not(.is-enhanced)>.hk-nav__innen>.hk-nav__liste>[data-hk-welt-item=vape],html[data-hk-welt=vape] body.hk-relaunch .hk-menu.hk-nav:not(.is-enhanced)>.hk-nav__innen>.hk-nav__liste>[data-hk-welt-item=shisha]{display:none} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:calc(var(--hk-space-05) * 0.5);height:100%;min-height:0;padding:calc(var(--hk-space-3) + var(--hk-space-05) * 1) calc(var(--hk-space-1) + var(--hk-space-05) * 1.5) calc(var(--hk-space-1) + var(--hk-space-05) * 1);border-bottom:0;background:transparent;color:var(--hk-ink);font:var(--hk-fw-medium) var(--hk-fs-s) / var(--hk-lh-s) var(--hk-font);letter-spacing:var(--hk-tracking-caps-s);text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow var(--hk-duration) var(--hk-ease), color var(--hk-duration) var(--hk-ease), background-color var(--hk-duration) var(--hk-ease)} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link[aria-expanded="true"],body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link.is-active,body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link[aria-current="page"]{background:var(--hk-surface);color:var(--hk-ink);box-shadow:inset 0 -2px 0 var(--hk-welt-akzent, var(--hk-welt))} @media(hover:hover){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link:hover{background:var(--hk-surface);color:var(--hk-ink);box-shadow:inset 0 -2px 0 var(--hk-welt-akzent, var(--hk-welt))}} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link>.hk-nav__label{display:block} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link>.hk-nav__zusatz{display:block;max-width:none;color:var(--hk-ink-3);font:var(--hk-fw-medium) var(--hk-fs-xs) / var(--hk-lh-xs) var(--hk-font);letter-spacing:0;text-transform:none;white-space:nowrap} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link[aria-expanded="true"]>.hk-nav__zusatz{color:var(--hk-welt-text)} @media(hover:hover){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link:hover>.hk-nav__zusatz{color:var(--hk-welt-text)}} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__mehr>.hk-nav__link{flex-direction:row;align-items:center;justify-content:center;gap:var(--hk-space-1);height:72px;padding:0 calc(var(--hk-space-1) + var(--hk-space-05) * 1.5);border-bottom:0} body.hk-relaunch .hk-menu.hk-nav .hk-nav__aufgaben{border-bottom:1px solid var(--hk-line);background:var(--hk-welt-tint)} body.hk-relaunch .hk-menu.hk-nav .hk-nav__aufgaben-innen{align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:var(--hk-space-1);padding-block:calc(var(--hk-space-05) + var(--hk-space-05) * 0.5)} body.hk-relaunch .hk-menu.hk-nav .hk-nav__aufgaben .hk-nav__link.hk-aufgabe{display:inline-flex;flex-direction:row;align-items:center;gap:calc(var(--hk-space-05) + var(--hk-space-05) * 0.5);height:28px;min-height:28px;padding:0 calc(var(--hk-space-1) + var(--hk-space-05) * 1);border:1px solid var(--hk-line);border-radius:var(--hk-radius-pill);background:var(--hk-paper);color:var(--hk-ink);font:var(--hk-fw-medium) var(--hk-fs-s) / var(--hk-lh-s) var(--hk-font);letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:none;transition:background-color var(--hk-duration) var(--hk-ease), border-color var(--hk-duration) var(--hk-ease), color var(--hk-duration) var(--hk-ease)} body.hk-relaunch .hk-menu.hk-nav .hk-nav__aufgaben .hk-nav__link.hk-aufgabe::after{width:0;height:0;border-top:5px solid currentColor;border-right:4px solid transparent;border-left:4px solid transparent;content:"";opacity:0.6;transition:transform var(--hk-duration) var(--hk-ease)} @media(hover:hover){body.hk-relaunch .hk-menu.hk-nav .hk-nav__aufgaben .hk-nav__link.hk-aufgabe:hover{border-color:var(--hk-line-strong);background:var(--hk-welt-tint-2);box-shadow:none}} body.hk-relaunch .hk-menu.hk-nav .hk-nav__aufgaben .hk-nav__link.hk-aufgabe[aria-expanded="true"]{border-color:var(--hk-welt);background:var(--hk-welt);color:var(--hk-on-welt)} body.hk-relaunch .hk-menu.hk-nav .hk-nav__aufgaben .hk-nav__link.hk-aufgabe[aria-expanded="true"]::after{opacity:1;transform:rotate(180deg)} body.hk-relaunch .hk-menu .hk-nav__welten{border:1px solid var(--hk-welt-akzent);transition:border-color 260ms var(--hk-ease-spring, var(--hk-ease)), background-color var(--hk-duration) var(--hk-ease)} body.hk-relaunch .hk-menu .hk-nav__welten::before{top:calc(var(--hk-space-05) * 0.75);bottom:calc(var(--hk-space-05) * 0.75)} body.hk-relaunch .hk-menu .hk-nav__welten button{height:32px} body.hk-relaunch .hk-menu .hk-nav__welten button[aria-pressed="true"]::after{right:8px} @media(hover:hover){body.hk-relaunch .hk-menu .hk-nav__welten button[aria-pressed="false"]:hover{background:color-mix(in srgb, var(--hk-ink) 10%, transparent);color:var(--hk-ink);filter:grayscale(1)}} @media (max-width:1279.98px){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link{justify-content:center;padding-block:0;padding-inline:calc(var(--hk-space-1) + var(--hk-space-05) * 0.25)}} @media (max-width:1279.98px){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__liste>.hk-nav__item>.hk-nav__link>.hk-nav__zusatz{display:none}} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__wissen{display:inline-flex;flex:none;align-items:center;gap:var(--hk-space-1);height:40px;margin-left:auto;padding:0 calc(var(--hk-space-1) + var(--hk-space-05) * 1.5) 0 calc(var(--hk-space-1) + var(--hk-space-05) * 0.5);border:1px solid currentColor;border-radius:var(--hk-radius-pill);color:inherit;font:var(--hk-fw-bold) var(--hk-fs-m) / var(--hk-lh-m) var(--hk-font);white-space:nowrap;text-decoration:none;transition:background-color var(--hk-duration) var(--hk-ease)} @media(hover:hover){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__wissen:hover{background:color-mix(in srgb, currentColor 10%, transparent)}} body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__wissen:focus-visible{outline:2px solid currentColor;outline-offset:2px} body.hk-relaunch .hk-nav__wissen-icon{display:block;flex:none;width:24px;height:24px;image-rendering:pixelated} body.hk-relaunch .hk-nav__wissen-pfeil{font-weight:var(--hk-fw-regular)} @media (max-width:1199.98px){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__wissen{justify-content:center;width:40px;padding:0}} @media (max-width:1199.98px){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__wissen>.hk-nav__wissen-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap}} @media (max-width:1199.98px){body.hk-relaunch .hk-menu.hk-nav>.hk-nav__innen>.hk-nav__wissen>.hk-nav__wissen-pfeil{display:none}} html[data-hk-cookie-hub] body.hk-relaunch .offcanvas.navigation-offcanvas>.offcanvas-body:has(.hk-md__foot){padding-bottom:var(--hk-cookie-hub, 0px)} /* T-0166 (Abnahme 02.10.): kein bottom am klebenden Fuß – Chromium misst sticky ab der Inhaltskante des Scrollbereichs, dessen padding-bottom das Band schon freihält; bottom zusätzlich hob den Fuß um 173 px in die Liste. */ body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu.hk-nav{border-color:transparent;background:transparent} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu.hk-nav>.hk-nav__innen{color:var(--hk-hero-ink)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__liste>li>.hk-nav__link>.hk-nav__zusatz,body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__mehr>.hk-nav__link>.hk-nav__zusatz{color:var(--hk-hero-ink-2)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__liste>li>.hk-nav__link,body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__mehr>.hk-nav__link{color:var(--hk-hero-ink)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__liste>li>.hk-nav__link[aria-expanded="true"],body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__mehr>.hk-nav__link[aria-expanded="true"]{background:var(--hk-hero-flaeche)} @media(hover:hover){body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__liste>li>.hk-nav__link:hover,body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__mehr>.hk-nav__link:hover{background:var(--hk-hero-flaeche)}} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__liste>li>.hk-nav__link:focus-visible,body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__mehr>.hk-nav__link:focus-visible{outline-color:var(--hk-hero-ink)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten{border-color:var(--hk-hero-line);background:var(--hk-hero-weiche, color-mix(in srgb, var(--hk-black) 55%, transparent));box-shadow:inset 0 0 0 1px var(--hk-hero-line), inset 0 1px 3px rgba(0, 0, 0, 0.25)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten::before{background:var(--hk-hero-ink)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten button{color:var(--hk-hero-ink)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten button[aria-pressed="true"]{color:var(--hk-hero-knauf-ink, var(--hk-black))} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__aufgaben{border-color:transparent;background:transparent} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__aufgaben .hk-aufgabe:not([aria-expanded="true"]){border-color:var(--hk-hero-line);background:var(--hk-hero-pille, color-mix(in srgb, var(--hk-black) 55%, transparent));color:var(--hk-hero-ink)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__aufgaben .hk-aufgabe:not([aria-expanded="true"]):focus-visible{outline-color:var(--hk-hero-ink)} body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready.is-scrolled .nav-main .hk-menu.hk-nav,body.hk-relaunch.hk-relaunch-content:is(.is-act-home, .hk-weltseite):has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)) .hk-shell-frame.is-ready.is-scrolled .nav-main .hk-menu .hk-nav__aufgaben{background:transparent} body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten{outline:0} body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten::before{background:color-mix(in srgb, var(--hk-ink) 12%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hk-ink) 28%, transparent);animation:hk-welt-stups 4s linear 0.4s infinite} body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten:has(> [data-hk-welt="vape"][aria-pressed="true"])::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten:has(> [data-hk-welt="vape"][aria-pressed="true"])::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten:has(> [data-hk-welt="vape"][aria-pressed="true"])::before{animation-name:hk-welt-stups-vape} @media (prefers-reduced-motion:reduce){body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten::before,body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten:has(> [data-hk-welt="vape"][aria-pressed="true"])::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten:has(> [data-hk-welt="vape"][aria-pressed="true"])::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten:has(> [data-hk-welt="vape"][aria-pressed="true"])::before{animation:none}} body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten button,body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten button[aria-pressed="true"],body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten button,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten button[aria-pressed="true"],body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten button,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten button[aria-pressed="true"]{color:var(--hk-ink);font-weight:var(--hk-fw-medium)} body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten button[aria-pressed="true"]::after,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten button[aria-pressed="true"]::after,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten button[aria-pressed="true"]::after{opacity:0.6} @media(hover:hover){body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten button:hover,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu .hk-nav__welten button:hover,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu .hk-nav__welten button:hover{background:color-mix(in srgb, var(--hk-ink) 10%, transparent);filter:none}} body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu:not(.hk-drawer) .hk-nav__welten::before{background:color-mix(in srgb, var(--hk-hero-ink) 16%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hk-hero-ink) 28%, transparent)} body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu:not(.hk-drawer) .hk-nav__welten button,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu:not(.hk-drawer) .hk-nav__welten button[aria-pressed="true"]{color:var(--hk-hero-ink)} @media(hover:hover){body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-shell-frame.is-ready:not(.is-scrolled) .hk-menu:not(.hk-drawer) .hk-nav__welten button:hover{background:color-mix(in srgb, var(--hk-hero-ink) 12%, transparent)}} body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu.hk-drawer .hk-nav__welten::before,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu.hk-drawer .hk-nav__welten::before{background:color-mix(in srgb, var(--hk-ink) 12%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hk-ink) 28%, transparent)} body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu.hk-drawer .hk-nav__welten button,body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu.hk-drawer .hk-nav__welten button[aria-pressed="true"],body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu.hk-drawer .hk-nav__welten button,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu.hk-drawer .hk-nav__welten button[aria-pressed="true"]{color:var(--hk-ink)} @media(hover:hover){body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu.hk-drawer .hk-nav__welten button:hover,body.hk-relaunch.hk-relaunch-content.is-act-home:has(.cms-block.hk-relaunch-hero):not(:has(.storefront-staging-info)):not(.hk-home-weltweiche) .hk-menu.hk-drawer .hk-nav__welten button:hover{background:color-mix(in srgb, var(--hk-ink) 10%, transparent)}} @media (prefers-reduced-motion:reduce){body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten{animation:none}} @media (prefers-reduced-motion:reduce){body.hk-relaunch.hk-relaunch-content.is-act-home:not(.hk-home-weltweiche) .hk-menu .hk-nav__welten::before{animation:none}} /* HookainMenue: eigene Darstellung, keine Produktdaten oder Preise im CSS. */ .hk-menu{--hm-paper:#fff;--hm-ink:#15191b;--hm-muted:#596169;--hm-line:rgba(20,30,35,.14);--hm-card:rgba(255,255,255,.75);--hm-surface:#f1f3f3;--hm-accent:#087f87;--v7-stern:#fbbc04;--v7-stern-leer:#dadce0;--v7-neu-flaeche:#be1522;--v7-neu-schrift:#fff;--v7-rabatt-flaeche:#0f7a3e;--v7-rabatt-schrift:#fff;--v7-streich:#be1522;--hm-max:1400px;--hm-gutter:24px;color:var(--hm-ink);font-family:inherit;font-size:14px;line-height:1.45;box-sizing:border-box}.hk-menu[data-hk-welt-aktiv=shisha]{--hm-accent:#b33248} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .hk-menu{--hm-paper:#171d20;--hm-ink:#f3f6f6;--hm-muted:#b8c0c3;--hm-line:rgba(240,248,250,.2);--hm-card:rgba(27,34,38,.75);--hm-surface:#242c30;--hm-accent:#5ed5db;--v7-stern:#fdd663;--v7-stern-leer:#5f6368;--v7-neu-flaeche:#f5707a;--v7-neu-schrift:#000;--v7-rabatt-flaeche:#2ee58a;--v7-rabatt-schrift:#063d22;--v7-streich:#f5707a}}:root[data-theme=dark] .hk-menu,[data-theme=dark] .hk-menu{--hm-paper:#171d20;--hm-ink:#f3f6f6;--hm-muted:#b8c0c3;--hm-line:rgba(240,248,250,.2);--hm-card:rgba(27,34,38,.75);--hm-surface:#242c30;--hm-accent:#5ed5db;--v7-stern:#fdd663;--v7-stern-leer:#5f6368;--v7-neu-flaeche:#f5707a;--v7-neu-schrift:#000;--v7-rabatt-flaeche:#2ee58a;--v7-rabatt-schrift:#063d22;--v7-streich:#f5707a}.hk-menu *,.hk-menu *::before,.hk-menu *::after{box-sizing:border-box}.hk-menu [hidden]{display:none!important}.hk-menu a{color:inherit;text-decoration:none}.hk-menu button{font:inherit;color:inherit;cursor:pointer}.hk-menu a:focus-visible,.hk-menu button:focus-visible,.hk-menu [tabindex]:focus-visible{outline:2px solid var(--hk-ink,var(--hm-ink));outline-offset:2px}.hk-menu ul{list-style:none;margin:0;padding:0}.hk-menu h2,.hk-menu h3,.hk-menu p{margin:0}.hk-menu .hk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hk-menu.hk-nav{position:relative;background:var(--hm-paper);isolation:isolate;z-index:105}.hk-menu .hk-nav__innen{display:flex;align-items:center;gap:20px;min-height:72px;max-width:var(--hm-max);margin:auto;padding:0 var(--hm-gutter)}.hk-menu .hk-nav__welten{display:flex;flex:none;border:1px solid var(--hm-line);border-radius:28px;padding:3px;gap:3px;background:var(--hm-surface)}.hk-menu .hk-nav__welten button{border:0;background:transparent;border-radius:24px;min-height:36px;padding:8px 18px}.hk-menu .hk-nav__welten button[aria-pressed=true]{background:var(--hm-ink);color:var(--hm-paper)}.hk-menu .hk-nav__liste{display:flex;flex:1;min-width:0;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:thin}.hk-menu.is-enhanced .hk-nav__liste{overflow:visible}.hk-menu .hk-nav__item{flex:none}.hk-menu .hk-nav__link{display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-bottom:3px solid transparent;background:transparent;min-height:72px;padding:10px 12px;white-space:nowrap;font-size:13px}.hk-menu .hk-nav__link:hover,.hk-menu .hk-nav__link[aria-expanded=true]{background:var(--hm-surface);border-bottom-color:var(--hm-accent)}.hk-menu .hk-nav__badge{font-size:11px;color:var(--hm-accent)}.hk-menu .hk-nav__mehr{flex:none}.hk-menu .hk-nav__mehrliste{position:absolute;right:var(--hm-gutter);top:100%;z-index:4;min-width:220px;max-width:min(360px,90vw);padding:8px!important;border:1px solid var(--hm-line);border-radius:12px;background:var(--hm-paper);box-shadow:0 14px 28px #0002}.hk-menu .hk-nav__mehrliste .hk-nav__link{min-height:44px;white-space:normal;justify-content:flex-start;width:100%}.hk-menu .hk-nav__mehrliste .hk-nav__item{display:block}.hk-menu .hk-nav__panel{position:absolute;top:100%;left:var(--hm-left,max(24px,calc((100% - 1400px)/2 + 24px)));right:var(--hm-right,max(24px,calc((100% - 1400px)/2 + 24px)));z-index:3;border:1px solid var(--hm-line);border-radius:14px;background:color-mix(in srgb,var(--hm-paper) 90%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 16px 38px #0003;max-height:var(--hm-height,calc(100dvh - 220px));overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;container:hk-menu-panel/inline-size}.hk-menu .hk-nav__panel:focus{outline-offset:-4px}.hk-menu .hk-panel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;padding:16px;align-items:start}.hk-menu .hk-panel__kopf{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-width:0}.hk-menu .hk-panel__kopf h2{font-size:17px;font-weight:700;overflow-wrap:anywhere}.hk-menu .hk-panel__alle{font-weight:600;font-size:13px;overflow-wrap:anywhere}.hk-menu .hk-panel__alle:hover{text-decoration:underline}.hk-menu .hk-panel__schliessen{margin-left:auto;width:36px;height:36px;border:0;border-radius:8px;background:var(--hm-surface);font-size:23px!important;flex:none}.hk-menu .hk-panel__region{min-width:0;display:grid;gap:18px;align-content:start}.hk-menu .hk-panel__region--oben,.hk-menu .hk-panel__region--unten,.hk-menu .hk-panel__region--voll{grid-column:1/-1}.hk-menu .hk-panel__region--links{grid-column:span 2}.hk-menu .hk-panel__region--mitte{grid-column:span 7}.hk-menu .hk-panel__region--rechts{grid-column:span 3}.hk-menu .hk-panel__region--voll{grid-column:1/-1}.hk-menu .hk-panel__gh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.025em;margin-bottom:8px!important;overflow-wrap:anywhere}.hk-menu .hk-panel__rows{display:grid;align-content:start;gap:2px}.hk-menu .hk-panel__row{display:flex;align-items:baseline;gap:6px;min-height:32px;padding:5px 4px;border-radius:6px;overflow-wrap:anywhere}.hk-menu .hk-panel__row:hover,.hk-menu .hk-chip:hover{background:var(--hm-surface);color:var(--hm-accent)}.hk-menu .hk-panel__rowtext{min-width:0;flex:1}.hk-menu .hk-panel__zahl{color:var(--hm-muted);font-size:11px;font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}.hk-menu .hk-panel__kategorie>.hk-panel__rows{padding-left:12px;margin:0 0 8px 8px;border-left:1px solid var(--hm-line)}.hk-menu .hk-panel__icon{width:22px;height:22px;object-fit:contain;flex:none;align-self:center}.hk-menu .hk-panel__markenbahn{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr));gap:8px}.hk-menu .hk-panel__markenkachel{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:8px 6px;border:1px solid var(--hm-line);border-radius:8px;background:var(--hm-card);height:100%;overflow-wrap:anywhere;text-align:center;font-size:12px}.hk-menu .hk-panel__logo{width:88px;max-width:100%;height:30px;object-fit:contain}.hk-menu .hk-panel__facetten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:20px}.hk-menu .hk-panel__facette{min-width:0}.hk-menu .hk-panel__chips{display:flex;flex-wrap:wrap;gap:5px}.hk-menu .hk-panel__chips>li{max-width:100%}.hk-menu .hk-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;min-height:32px;background:var(--hm-surface);border-radius:6px;max-width:100%;overflow-wrap:anywhere}.hk-menu .hk-chip>span:first-of-type{min-width:0}.hk-menu .hk-panel__prodkacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:10px}.hk-menu .hk-kachel--panel{display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--hm-card);border:1px solid var(--hm-line);border-radius:9px;min-width:0;height:100%}.hk-menu .hk-kachel__bild{width:100%;height:120px;object-fit:contain;background:var(--hm-surface);border-radius:5px}.hk-menu .hk-kachel__name{overflow-wrap:anywhere;font-weight:600;font-size:13px}.hk-menu .hk-panel__karte{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:0;border:1px solid var(--hm-line);border-radius:9px;background:var(--hm-card);overflow-wrap:anywhere}.hk-menu .hk-panel__karte h3{font-size:16px}.hk-menu .hk-panel__kartenbild{max-width:100%;width:100%;height:130px;object-fit:contain}.hk-menu .hk-panel__cta{display:block;min-width:0;max-width:100%;padding:10px 14px;text-align:center;background:var(--hm-ink);color:var(--hm-paper)!important;border-radius:6px;white-space:normal;overflow-wrap:anywhere}.hk-menu .hk-panel__abstand--s{height:8px}.hk-menu .hk-panel__abstand--m{height:16px}.hk-menu .hk-panel__abstand--l{height:24px}.hk-menu .hk-panel__tabs{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:7px;background:var(--hm-surface)}.hk-menu .hk-panel__tabs button{border:0;border-radius:5px;padding:7px 12px;background:transparent;min-height:36px}.hk-menu .hk-panel__tabs button[aria-selected=true]{background:var(--hm-paper);box-shadow:0 2px 5px #0002}.hk-nav__panel:has(>.hk-menu__ladehinweis){padding:var(--hk-space-2,16px)}.hk-menu__ladehinweis{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hk-space-1,8px);box-sizing:border-box;max-width:100%;padding:var(--hk-alert-padding-y,12px) var(--hk-alert-padding-x,16px);border:var(--hk-border-width,1px) solid var(--hk-error,#FF6A1F);border-radius:var(--hk-radius-s,2px);background:var(--hk-error-bg,#FFF0E8);color:var(--hk-error-text,#A63500);font-size:var(--hk-fs-s,12px);line-height:var(--hk-lh-s,16px);overflow-wrap:anywhere}.hk-menu__ladehinweis a{color:inherit;text-decoration:underline}.hk-menu__ladehinweis>.btn{margin:0}.hk-menu .hk-panel--grund{display:flex;flex-direction:column;gap:var(--hk-space-2,16px);padding:var(--hk-space-2,16px)}.hk-menu .hk-panel__grundhinweis{color:var(--hm-muted);font-size:var(--hk-fs-s,12px);line-height:var(--hk-lh-s,16px)}.hk-menu .hk-panel__grundliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:var(--hk-space-05,4px)}.hk-menu .hk-panel__grundfuss{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hk-space-2,16px)}.hk-menu .hk-panel__grundfuss>.btn{margin:0} @container hk-menu-panel (max-width:1150px){.hk-menu .hk-panel__region--links{grid-column:span 3}.hk-menu .hk-panel__region--mitte{grid-column:span 9}.hk-menu .hk-panel__region--rechts{grid-column:1/-1}.hk-menu .hk-panel__region--rechts .hk-panel__prodkacheln{grid-template-columns:repeat(auto-fit,minmax(min(100%,10em),1fr))}.hk-menu .hk-panel__region--voll{grid-column:1/-1}} @container hk-menu-panel (max-width:680px){.hk-menu .hk-panel{gap:16px;padding:12px}.hk-menu .hk-panel__region--links,.hk-menu .hk-panel__region--mitte,.hk-menu .hk-panel__region--rechts{grid-column:1/-1}.hk-menu .hk-panel__row,.hk-menu .hk-chip{min-height:44px}.hk-menu .hk-panel__markenkachel{min-height:70px}.hk-menu .hk-panel__kopf h2{font-size:16px}}.hk-menu.hk-drawer{width:100%;max-width:100%;padding:4px}.hk-menu.hk-drawer .hk-nav__welten{display:flex;width:100%;margin-bottom:16px}.hk-menu.hk-drawer .hk-nav__welten button{flex:1;min-height:44px}.hk-menu .hk-drawer__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hk-menu .hk-drawer__link{display:flex;align-items:center;gap:8px;min-height:72px;height:100%;padding:12px;background:var(--hm-surface);border-radius:8px;overflow-wrap:anywhere}.hk-menu .hk-drawer__link>span:first-of-type{flex:1;min-width:0}.hk-menu .hk-drawer__zurueck{width:100%;text-align:left;border:0;border-bottom:1px solid var(--hm-line);background:var(--hm-paper);padding:10px;min-height:44px;margin-bottom:8px}.hk-menu.hk-drawer .hk-nav__panel{position:relative;inset:auto;max-height:none;box-shadow:none;width:100%;overflow:visible;scrollbar-gutter:auto;background:var(--hm-paper);-webkit-backdrop-filter:none;backdrop-filter:none}.hk-menu.hk-drawer .hk-panel__schliessen{display:none}.hk-menu.hk-drawer .hk-panel__tabs{display:none!important}.hk-menu.hk-drawer [data-hk-tabpanel]{display:block!important}.hk-menu-vorschau{margin:0;padding:16px;background:#8881}.hk-menu .hk-nav__panel--vorschau{position:relative;inset:auto;max-height:none;width:100%;margin:auto;max-width:1352px}.hk-menu .hk-nav__panel--vorschau .hk-panel__schliessen{display:none} @media(max-width:991px){.hk-menu.hk-nav{display:none}} @media(prefers-reduced-motion:no-preference){.hk-menu a,.hk-menu button{transition:background-color .12s,color .12s,border-color .12s}}.hk-menu .hk-panel__kategoriekarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10em),1fr));gap:10px}.hk-menu .hk-panel__suche{display:grid;gap:6px;margin-bottom:12px}.hk-menu .hk-panel__suche input{width:100%;min-height:44px;border:1px solid var(--hm-line);border-radius:6px;background:var(--hm-paper);color:var(--hm-ink);padding:8px 10px} .hk-menu .hk-panel__mehr{min-width:0;margin-top:12px}.hk-menu .hk-panel__mehr>summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;font-weight:600}.hk-menu .hk-provider{min-width:0}.hk-menu .hk-provider--kategorie-index>.hk-panel__rows{display:grid;grid-template-columns:repeat(var(--hk-provider-spalten,1),minmax(0,1fr));gap:12px}.hk-menu .hk-provider--marken-liste .hk-panel__markenbahn{grid-template-columns:1fr}.hk-menu .hk-provider--marken-liste .hk-panel__markenkachel{display:flex;justify-content:flex-start;text-align:left}.hk-menu .hk-panel__chips--liste{display:grid;grid-template-columns:1fr}.hk-menu .hk-provider--bild-xs .hk-panel__kartenbild{height:40px}.hk-menu .hk-provider--bild-sm .hk-panel__kartenbild{height:72px}.hk-menu .hk-provider--bild-md .hk-panel__kartenbild{height:120px}.hk-menu .hk-provider--band>.hk-panel__karte{display:flex;align-items:center;flex-wrap:wrap;gap:16px}.hk-menu .hk-provider--band>.hk-panel__karte>*{flex:1 1 160px;min-width:0}.hk-menu .hk-provider--band>.hk-panel__karte>.hk-panel__kartenbild{flex:0 1 120px}@media(max-width:991.98px){.hk-menu .hk-provider--kategorie-index>.hk-panel__rows{grid-template-columns:1fr}} .hk-menu.hk-menu--scrollleiste .hk-nav__liste{overflow-x:auto;scrollbar-width:thin}.hk-menu.hk-drawer [data-hk-mobil-versteckt]{display:none!important}.hk-menu .hk-panel__kategorie--hervorgehoben{border-left:3px solid var(--hm-accent);padding-left:8px}.hk-menu .hk-panel__facette--primaer{grid-column:1/-1;padding:12px;border:1px solid var(--hm-accent);border-radius:8px}.hk-menu .hk-panel__werttabelle{table-layout:fixed}.hk-menu .hk-panel__werttabelle th,.hk-menu .hk-panel__werttabelle td{overflow-wrap:anywhere}.hk-menu .hk-panel__werttabelle td{width:35%}body:not(.hk-relaunch) .hk-menu .hk-panel__werttabelle,.hk-menu .hk-panel__werttabelle:not(.hk-tabelle){width:100%;border-collapse:collapse}body:not(.hk-relaunch) .hk-menu .hk-panel__werttabelle :is(th,td),.hk-menu .hk-panel__werttabelle:not(.hk-tabelle) :is(th,td){padding:var(--hk-space-1,8px);text-align:left;border-bottom:1px solid var(--hm-line)}.hk-menu .hk-panel__werttabelle th{width:65%}.hk-menu .hk-panel__chips--bilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr))}.hk-menu .hk-panel__chips--bilder .hk-chip{display:flex;flex-direction:column;text-align:center;align-items:center;height:100%;padding:12px}.hk-menu .hk-panel__chips--bilder .hk-panel__icon{width:48px;height:48px;object-fit:contain}.hk-menu .hk-panel__reglerlabel{display:block}.hk-menu .hk-panel__reglerlabel input{display:block;width:100%;min-height:44px;accent-color:var(--hm-accent)}.hk-menu [data-hk-regler] output{display:block;overflow-wrap:anywhere}.hk-menu.hk-drawer .hk-provider--kategorie-index>.hk-panel__rows{grid-template-columns:1fr} .hk-menu .hk-nav__zusatz{display:block;font-size:11px;white-space:normal;max-width:200px;overflow-wrap:anywhere}.hk-menu .hk-nav__liste>.hk-nav__item--rechts{margin-inline-start:auto}.hk-menu .hk-nav__liste>.hk-nav__item--rechts~.hk-nav__item--rechts{margin-inline-start:0} .hk-menu .hk-nav__mehrliste{max-height:var(--hm-height,calc(100dvh - 160px));overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.hk-menu .hk-panel__suchstatus:not(:empty){display:block;margin:8px 0;overflow-wrap:anywhere} .hk-menu .hk-panel__prodkacheln{grid-template-columns:repeat(auto-fit,minmax(min(100%,10em),1fr))} .hk-menu .hk-panel__region--spalten{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.hk-menu.hk-drawer .hk-panel__region--spalten{grid-template-columns:1fr}.hk-auswahl-filter{padding:16px;border:1px solid var(--hm-line);border-radius:8px;background:var(--hm-paper)} .hk-menu.hk-drawer [data-hk-tabpanel][hidden]{display:none!important} /* The exterior keeps its radius and shadow; only the inset content scrolls. */ /* FL1 (draft R 1190, 1204f, 1840–1850): the panel itself scrolls below the nav (max height = window − nav − 16), fades in with −8 px, and the page is locked while it is open. */ .hk-menu.hk-nav .hk-nav__panel{top:calc(100% + 1px);padding:6px;max-height:var(--hm-height,calc(100dvh - 240px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:auto;scrollbar-width:thin;scrollbar-color:var(--hk-line-strong,color-mix(in srgb,var(--hm-ink) 32%,transparent)) transparent} .hk-menu.hk-nav .hk-nav__panel::-webkit-scrollbar{width:8px}.hk-menu.hk-nav .hk-nav__panel::-webkit-scrollbar-thumb{background:var(--hk-line-strong,color-mix(in srgb,var(--hm-ink) 32%,transparent));border-radius:999px}.hk-menu.hk-nav .hk-nav__panel::-webkit-scrollbar-track{background:transparent} .hk-menu.hk-nav .hk-nav__panel>.hk-panel{max-height:none;overflow:visible;padding:10px} @media(prefers-reduced-motion:no-preference){.hk-menu.hk-nav .hk-nav__panel:not([hidden]){animation:hk-panel-auf var(--hk-duration,150ms) var(--hk-ease-out,cubic-bezier(.2,0,0,1)) both}} @keyframes hk-panel-auf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} html.hk-panel-offen{overflow:hidden} /* Task entry points stay in their own row while categories retain their order. */ .hk-menu .hk-nav__aufgaben{border-bottom:1px solid var(--hm-line);background:var(--hm-paper)} .hk-menu .hk-nav__aufgaben:not(:has([data-hk-eintrag],[data-hk-aktion]:not([hidden]))){display:none} .hk-menu .hk-nav__aufgaben-innen{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;max-width:var(--hm-max);margin:auto;padding:8px var(--hm-gutter)} .hk-menu .hk-nav__aufgaben-innen>li{min-width:0;max-width:100%} .hk-menu .hk-nav__aufgaben .hk-aufgabe{min-height:36px;padding:7px 14px;border:1px solid var(--hm-line);border-radius:22px;white-space:normal;text-align:left;overflow-wrap:anywhere;background:var(--hm-card)} .hk-menu .hk-nav__aufgaben .hk-aufgabe[aria-expanded=true]{border-color:var(--hm-accent);background:var(--hm-surface)} .hk-menu .hk-drawer__aufgaben{margin-bottom:16px} .hk-menu .hk-drawer__aufgaben>ul{display:grid;gap:8px} .hk-menu .hk-drawer__aufgaben .hk-aufgabe{min-height:52px;border:1px solid var(--hm-line);background:var(--hm-card)} .hk-menu .hk-panel__reiter-inhalt{display:grid;gap:18px;min-width:0} /* Compiled guidance: equal path cards, readable steps and a separate decision area. */ .hk-menu .hk-einstieg{min-width:0;display:grid;gap:20px;width:100%} .hk-menu .hk-einstieg__intro{max-width:80ch;line-height:1.55;color:var(--hm-muted)} .hk-menu .hk-einstieg h3,.hk-menu .hk-einstieg h4{margin:0;overflow-wrap:anywhere} .hk-menu .hk-einstieg h3{font-size:17px;line-height:1.3} .hk-menu .hk-einstieg h4{font-size:13px;line-height:1.4} .hk-menu .hk-einstieg p{font-size:13px;line-height:1.5;overflow-wrap:anywhere} .hk-menu .hk-einstieg__wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch} .hk-menu .hk-weg{display:flex;flex-direction:column;gap:16px;padding:18px;border:1px solid var(--hm-line);border-radius:12px;min-width:0;background:var(--hm-card)} .hk-menu .hk-weg.is-empfohlen{border-color:var(--hm-accent);box-shadow:inset 0 0 0 2px var(--hm-accent)} .hk-menu .hk-weg__kopf{display:grid;gap:5px} .hk-menu .hk-weg__kopf>p{color:var(--hm-muted)} .hk-menu .hk-weg__buehne{display:flex;justify-content:center;align-items:center;min-height:136px;border-radius:8px;background:var(--hm-surface);padding:8px} .hk-menu .hk-weg__bild{width:100%;max-height:152px;object-fit:contain} .hk-menu .hk-weg__schritte{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;counter-reset:step} .hk-menu .hk-weg__schritte>li{counter-increment:step;display:flex;align-items:center;gap:6px;flex:1 1 80px;min-width:0;font-size:12px;overflow-wrap:anywhere} .hk-menu .hk-weg__schritte>li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hm-line);border-radius:50%;width:22px;height:22px;flex:none;font-size:11px} .hk-menu .hk-weg__schritte>li>span{display:block;color:var(--hm-muted)} .hk-menu .hk-einstieg__teile{display:grid;gap:10px;margin-top:8px} .hk-menu .hk-einstieg__teile>li{display:flex;align-items:flex-start;gap:10px;min-width:0;font-size:13px;overflow-wrap:anywhere} .hk-menu .hk-einstieg__teile>li>div{min-width:0} .hk-menu .hk-einstieg__teilbild{width:40px;height:40px;object-fit:contain;flex:none} .hk-menu .hk-einstieg__status{display:inline-block;font-size:11px;line-height:1.4;padding:2px 6px;border-radius:5px;background:var(--hm-surface);margin-top:3px} .hk-menu .hk-weg__optional,.hk-menu .hk-einstieg__leer{color:var(--hm-muted)} .hk-menu .hk-weg__optional .hk-einstieg__teilbild{width:24px;height:24px} .hk-menu .hk-weg__abschluss{display:grid;gap:9px;margin-top:auto} .hk-menu .hk-einstieg__textlink{display:block;margin-top:4px;text-decoration:underline} .hk-menu .hk-einstieg__textbutton{font:inherit;padding:6px 0;min-height:36px;background:none;border:0;text-decoration:underline;text-underline-offset:3px} .hk-menu .hk-check{display:grid;gap:14px;padding:16px;border:1px solid var(--hm-line);border-radius:10px;background:var(--hm-surface);margin:0;min-width:0} .hk-menu .hk-check__fragen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px} .hk-menu .hk-check fieldset{min-inline-size:0;border:0;margin:0;padding:0} .hk-menu .hk-check legend{float:none;width:auto;font-size:13px;font-weight:600;margin:0 0 7px;line-height:1.4;overflow-wrap:anywhere} .hk-menu .hk-check__antworten{display:flex;flex-wrap:wrap;gap:6px} .hk-menu .hk-check__antwort{position:relative;min-width:0;max-width:100%;margin:0;cursor:pointer} .hk-menu .hk-check__antwort>input{position:absolute;opacity:0;width:1px;height:1px} .hk-menu .hk-check__antwort>span{display:block;padding:8px 10px;font-size:13px;border:1px solid var(--hm-line);border-radius:7px;background:var(--hm-paper);overflow-wrap:anywhere} .hk-menu .hk-check__antwort>input:checked+span{border-color:var(--hm-accent);box-shadow:inset 0 0 0 1px var(--hm-accent)} .hk-menu .hk-check__antwort>input:focus-visible+span{outline:3px solid var(--hm-accent);outline-offset:2px} .hk-menu .hk-check__ergebnis{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px} .hk-menu .hk-check__ergebnis>p{flex:1 1 240px;min-width:0} .hk-menu .hk-ersatz{min-width:0;display:grid;gap:18px} .hk-menu .hk-ersatz__werkzeuge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .hk-menu .hk-ersatz:not(.has-brand) [data-hk-ersatz-markenschritt]{grid-column:1/-1} .hk-menu .hk-ersatz__schritt{min-width:0;display:grid;gap:12px;align-content:start;padding:16px;border:1px solid var(--hm-line);border-radius:10px;background:var(--hm-card)} .hk-menu .hk-ersatz__suche{display:block;margin:0} .hk-menu .hk-ersatz__suche input{font:inherit;width:100%;min-width:0;min-height:42px;padding:8px 10px;border:1px solid var(--hm-line);border-radius:7px;background:var(--hm-paper);color:var(--hm-ink)} .hk-menu .hk-ersatz__suche input:focus-visible{outline:3px solid var(--hm-accent);outline-offset:2px} .hk-menu .hk-ersatz__marken,.hk-menu .hk-ersatz__serien{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,112px),1fr));gap:8px} /* D-14: im Drawer (332 px Innenbreite) drei Markenkacheln je Zeile wie im Entwurf. */ .hk-menu.hk-md .hk-ersatz__marken,.hk-menu.hk-md .hk-ersatz__serien{grid-template-columns:repeat(auto-fill,minmax(min(100%,96px),1fr))} .hk-menu .hk-ersatz__wahl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:60px;padding:10px 8px;border:1px solid var(--hm-line);border-radius:8px;background:var(--hm-paper);font-size:13px;line-height:1.4;overflow-wrap:anywhere} .hk-menu .hk-ersatz__wahl>img{display:block;width:80px;height:36px;object-fit:contain;max-width:100%;background:#fff} .hk-menu .hk-ersatz__wahl>.hk-brand-fit-frame{box-sizing:border-box;position:relative;display:block;flex:none;width:96px;height:64px;max-width:100%;padding:var(--hk-space-1);overflow:hidden;background:#fff;border-radius:4px} .hk-menu .hk-ersatz__wahl>.hk-brand-fit-frame>img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain} .hk-menu .hk-ersatz__wahl[aria-pressed=true]{border-color:var(--hm-accent);box-shadow:inset 0 0 0 1px var(--hm-accent)} .hk-menu .hk-ersatz__auswahl{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;grid-column:1/-1} .hk-menu .hk-ersatz__ergebnisse{min-width:0;display:grid;gap:14px} .hk-menu .hk-ersatz__ergebnisse details{margin-top:10px} .hk-menu .hk-ersatz__ergebnisse summary{cursor:pointer;min-height:36px;overflow-wrap:anywhere} .hk-menu .hk-ersatz.is-enhanced [data-hk-ersatz-serie]>summary{display:none} .hk-menu .hk-ersatz__teile{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;min-width:0} .hk-menu .hk-ersatz__teiletitel{grid-column:1/-1} .hk-menu .hk-ersatz__teil{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding:16px;border:1px solid var(--hm-line);border-radius:10px;background:var(--hm-card)} .hk-menu .hk-ersatz__teil .hk-panel__cta{margin-top:auto;width:100%} .hk-menu .hk-panel__kopf>h2,.hk-menu .hk-panel__kopf>.hk-panel__alle{align-self:baseline} .hk-menu .hk-ersatz__bestand{margin:0;font-size:13px;line-height:18px;color:var(--hm-muted)} .hk-menu .hk-ersatz__bestand.hk-ersatz__nichtlieferbar{margin:0;color:var(--hk-ink-2,var(--hm-muted))} .hk-menu .hk-ersatz__teilbild{width:64px;height:64px;object-fit:contain} .hk-menu.hk-finder-seite{container:hk-menu-panel/inline-size} .hk-menu.hk-finder-seite>h1{margin-bottom:16px;overflow-wrap:anywhere} .hk-menu .hk-finder-seite__zurueck{margin-bottom:20px} @container hk-menu-panel (max-width:900px){.hk-menu .hk-einstieg__wege{grid-template-columns:1fr}.hk-menu .hk-weg{padding:14px}.hk-menu .hk-weg__buehne{min-height:110px}.hk-menu .hk-weg__bild{max-height:130px}} @container hk-menu-panel (max-width:600px){.hk-menu .hk-ersatz__werkzeuge{grid-template-columns:1fr}.hk-menu .hk-ersatz__wahl{min-height:64px}.hk-menu .hk-check__antwort>span{min-height:44px;display:flex;align-items:center}.hk-menu .hk-check{padding:12px}.hk-menu .hk-ersatz__schritt{padding:12px}} .hk-menu .hk-panel__kategoriegruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}.hk-menu .hk-panel__kategoriegruppe{min-width:0}.hk-menu.hk-drawer .hk-panel__kategoriegruppen{grid-template-columns:1fr} .hk-menu .hk-weg__schritte>li{display:grid;grid-template-columns:22px minmax(0,1fr);align-content:start;align-items:start}.hk-menu .hk-weg__schritte>li>strong,.hk-menu .hk-weg__schritte>li>span{grid-column:2}.hk-menu .hk-weg__schritte>li:has(>.hk-panel__icon)::before{display:none} /* ===== V7-Desktop-Panel (OD-3, K-15/K-16) — nur unter .hk-panel--v7, klassische Darstellung unverändert ===== */ .hk-menu .hk-panel--v7{--v7-tint:var(--hk-welt-tint,color-mix(in srgb,var(--hm-accent) 7%,var(--hm-paper)));--v7-tint-2:var(--hk-welt-tint-2,color-mix(in srgb,var(--hm-accent) 14%,var(--hm-paper)));--v7-welt:var(--hk-welt,var(--hm-accent));--v7-region:var(--hk-surface,var(--hm-surface));--v7-kachel:var(--hk-surface-2,var(--hm-card));--v7-ink:var(--hk-ink,var(--hm-ink));--v7-ink-2:var(--hk-ink-2,var(--hm-muted));--v7-ink-3:var(--hk-ink-3,var(--hm-muted));--v7-r:8px;--v7-rs:var(--hk-radius-s,4px);--v7-dauer:120ms;position:relative} :root[data-theme=dark] .hk-menu .hk-panel--v7{--v7-region:var(--hk-surface-2,var(--hm-surface));--v7-kachel:var(--hk-surface,var(--hm-card))} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .hk-menu .hk-panel--v7{--v7-region:var(--hk-surface-2,var(--hm-surface));--v7-kachel:var(--hk-surface,var(--hm-card))}} .hk-menu .hk-panel--v7.hk-panel--vape{--v7-region:var(--hm-paper);--v7-rs:4px} /* Fläche: Shisha Papier 93 % + blur 16, Radius 0 0 8 8; Vape 90 % + blur 22 saturate 1.05, Radius 14. */ .hk-menu.hk-nav .hk-nav__panel:has(>.hk-panel--v7){border:0;border-radius:0 0 8px 8px;background:color-mix(in srgb,var(--hk-shell-panel-flaeche,var(--hm-paper)) 93%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--hk-elev-2,0 4px 12px rgba(0,0,0,.1),0 12px 32px rgba(0,0,0,.1))} .hk-menu.hk-nav .hk-nav__panel:has(>.hk-panel--v7.hk-panel--vape){border-radius:14px;background:color-mix(in srgb,var(--hk-shell-panel-flaeche,var(--hm-paper)) 90%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.05);backdrop-filter:blur(22px) saturate(1.05);box-shadow:var(--hk-shadow-2,0 8px 32px rgba(0,0,0,.18))} @media(prefers-reduced-transparency:reduce){.hk-menu.hk-nav .hk-nav__panel:has(>.hk-panel--v7.hk-panel--v7){background:var(--hk-shell-panel-flaeche,var(--hm-paper));-webkit-backdrop-filter:none;backdrop-filter:none}} .hk-menu .hk-nav__panel>.hk-panel.hk-panel--v7{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:12px 24px;align-items:start;align-content:start;min-height:min(clamp(420px,48vh,520px),calc(var(--hm-height,100dvh - 220px) - 14px));font-size:14px;line-height:1.45} .hk-menu .hk-nav__panel>.hk-panel.hk-panel--v7-marken{grid-template-rows:auto minmax(0,1fr)} .hk-menu .hk-v7__region{min-width:0} .hk-menu .hk-v7__marken,.hk-menu .hk-v7__az{grid-column:1/-1} .hk-menu .hk-v7--s2{grid-column:span 2}.hk-menu .hk-v7--s3{grid-column:span 3}.hk-menu .hk-v7--s7{grid-column:span 7}.hk-menu .hk-v7--s9{grid-column:span 9}.hk-menu .hk-v7--s10{grid-column:span 10}.hk-menu .hk-v7--s12{grid-column:1/-1} .hk-menu .hk-panel--v7.is-az>.hk-v7__region:not(.hk-v7__marken):not(.hk-v7__az){display:none} .hk-menu .hk-v7__gh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 4px;font-weight:700;font-size:11px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--v7-ink-2);overflow-wrap:anywhere} .hk-menu .hk-v7__ghmerkmal{font-weight:400;text-transform:none;letter-spacing:0} .hk-menu .hk-v7__noch{flex:none;font-weight:400;text-transform:none;letter-spacing:0;color:var(--v7-ink-2);white-space:nowrap} .hk-menu .hk-v7__noch:hover{color:var(--hm-ink);text-decoration:underline} /* R13/A7: Zahl im Entwurf 11px und normal gewichtet, nicht 12px fett. */ /* MV-B1b (Astra P2-N4-02, WCAG 1.4.3): Zähler und Chevrons in ink-2 statt ink-3 – ink-3 (#6e6e6e) erreichte auf der Hover-/Aktivfläche nur 4,085:1. */ .hk-menu .hk-v7__zahl{color:var(--v7-ink-2);font-size:11px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none} .hk-menu .hk-v7__marken{display:flex;align-items:center;gap:var(--hk-space-1,8px);padding:var(--hk-space-1,8px) var(--hk-space-2,16px);align-self:start;background:#e8e8e8;border:1px solid var(--hm-line);border-radius:var(--v7-r)} .hk-menu .hk-v7__markenbahn{display:flex;flex-wrap:wrap;gap:var(--hk-space-1,8px);flex:1;min-width:0;height:72px;margin:0;overflow:hidden} .hk-menu .hk-v7__markenbahn>li{flex:none} .hk-menu .hk-nav__panel>.hk-panel.hk-panel--v7:has(>.hk-v7__marken){row-gap:var(--hk-space-3,24px)} .hk-menu .hk-v7__marke{position:relative;display:grid;place-items:center;width:120px;height:72px;padding:var(--hk-space-1,8px);background:var(--v7-region);border:1px solid var(--hm-line);border-radius:var(--v7-rs);transition:background-color var(--v7-dauer),border-color var(--v7-dauer)} .hk-menu .hk-v7__marke:hover{background:var(--v7-tint-2);border-color:var(--v7-welt)} /* MV-B1b: Logos jeder Markenleiste (Shisha und Vape, hell und dunkel) auf der weißen Platte. */ .hk-menu .hk-v7__markenbahn .hk-v7__marke:not(.hk-v7__marke--text){background:#fff;border-color:#e0e0e0} .hk-menu .hk-v7__markenbahn .hk-v7__marke:not(.hk-v7__marke--text):hover{background:#fff;border-color:var(--v7-welt)} .hk-menu .hk-v7__logo{width:104px;height:48px;object-fit:contain;max-width:100%;max-height:100%} .hk-menu .hk-v7__markentext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:12px;text-align:center;color:var(--v7-ink-2);overflow-wrap:anywhere} .hk-menu .hk-v7__marke--alle{flex:none;display:flex;align-items:center;justify-content:center;gap:4px;width:auto;min-width:128px;padding:0 16px;background:var(--hm-ink);border-color:var(--hm-ink);color:var(--hm-paper)!important;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .hk-menu .hk-v7__marke--alle:hover{background:var(--v7-ink-2);border-color:var(--v7-ink-2)} /* Links 2/12: Unterkategorien (Zeile 36) und Kategorie-Karte auf Welt-Tönung. */ .hk-menu .hk-v7__unter{display:flex;flex-direction:column;gap:12px;min-height:0} .hk-menu .hk-v7__rows{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:36px;align-content:start} .hk-menu .hk-v7__row{display:flex;align-items:center;gap:4px;height:36px;padding:0 8px;border-radius:var(--v7-rs);white-space:nowrap;transition:background-color var(--v7-dauer)} .hk-menu .hk-v7__row:hover{background:var(--v7-tint-2)} .hk-menu .hk-v7__row--alle{font-weight:700} .hk-menu .hk-v7__unter .hk-v7__rows{grid-auto-rows:minmax(44px,auto)} .hk-menu .hk-v7__unter .hk-v7__rows .hk-v7__row{height:auto;min-height:44px;font-weight:400} .hk-menu .hk-v7__unter .hk-v7__rows .hk-v7__row--alle{font-weight:500} .hk-menu .hk-v7__unter .hk-v7__row>.hk-v7__zahl{font-weight:400;color:var(--v7-ink-2,var(--hm-muted))} .hk-menu .hk-v7__row--hervorgehoben{box-shadow:inset 3px 0 var(--hm-accent)} .hk-menu .hk-v7__rowtext{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:16px} .hk-menu .hk-v7__badge{font-size:11px;color:var(--hm-accent)} .hk-menu .hk-v7__karte{flex:none;display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--v7-tint);border-radius:var(--v7-r);overflow-wrap:anywhere;transition:background-color var(--v7-dauer)} .hk-menu .hk-v7__karte:hover{background:var(--v7-tint-2)} .hk-menu .hk-v7__kartenbild{display:grid;place-items:center;height:48px} .hk-menu .hk-v7__kartenbild img{width:48px;height:48px;object-fit:contain} /* R13/A5: Kacheltitel wie im Entwurf — dort gemessen: 11px, 700, 0.88px Sperrung, Versalien, Zeilenhoehe 14px. Die Sperrung als em, damit sie bei anderer Schriftgroesse mitgeht (0.08em = 0.88px bei 11px). Das Gewicht stimmte bereits. */ .hk-menu .hk-v7__kartentitel{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .hk-menu .hk-v7__kartentext{font-size:12px;line-height:1.45;color:var(--v7-ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* R13/A6: Kachellink wie im Entwurf gemessen — 11px, 700, 0.66px Sperrung, Versalien. 0.06em sind bei 11px genau die gemessenen 0.66px. */ .hk-menu .hk-v7__kartenlink{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* Mitte 7/12 · Konzept 3: Primär-Kacheln h56, zwei Box-Spalten, Fußband. */ .hk-menu .hk-v7__mitte{min-height:0} .hk-menu .hk-v7__k3{display:flex;flex-direction:column;gap:12px} .hk-menu .hk-v7__prim{display:grid;grid-template-columns:repeat(var(--hk-v7-primspalten,4),minmax(0,1fr));grid-auto-rows:56px;gap:8px} .hk-menu .hk-v7__pr{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:8px;height:100%;padding:4px 8px;background:var(--v7-tint);border:1px solid var(--hm-line);border-radius:var(--v7-rs);transition:background-color var(--v7-dauer),border-color var(--v7-dauer)} .hk-menu .hk-v7__prim--ohnebild .hk-v7__pr{grid-template-columns:minmax(0,1fr)} .hk-menu .hk-v7__pr:hover{background:var(--v7-tint-2);border-color:var(--v7-welt)} .hk-menu .hk-v7__prbild{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px} .hk-menu .hk-v7__prbild img{width:100%;height:100%;object-fit:contain} .hk-menu .hk-v7__prname{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hk-menu .hk-v7__przahl{font-size:22px;line-height:28px;font-weight:700;font-variant-numeric:tabular-nums;min-height:28px} .hk-menu .hk-v7__ebene2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start} .hk-menu .hk-v7__ebene2--eine{grid-template-columns:minmax(0,1fr)} .hk-menu .hk-v7__sek{display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px;background:var(--v7-region);border:1px solid var(--hm-line);border-radius:var(--v7-r)} .hk-menu .hk-v7__sekg{display:flex;flex-direction:column;gap:4px;min-width:0} .hk-menu .hk-v7__chips{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start} .hk-menu .hk-v7__chips>li{max-width:100%} .hk-menu .hk-v7__chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;height:28px;padding:0 8px;background:var(--v7-kachel);border:1px solid var(--hm-line);border-radius:var(--v7-rs);font-size:12px;white-space:nowrap;transition:background-color var(--v7-dauer),border-color var(--v7-dauer)} .hk-menu .hk-v7__chip:has(>img){padding-left:4px} .hk-menu .hk-v7__chip:hover{background:var(--v7-tint-2);border-color:var(--v7-welt)} .hk-menu .hk-v7__chipbild{width:18px;height:18px;object-fit:contain;flex:none} .hk-menu .hk-v7__chiptext{min-width:0;overflow:hidden;text-overflow:ellipsis} .hk-menu .hk-v7__tabrows{display:grid;grid-auto-rows:28px} .hk-menu .hk-v7__tabzeile{display:grid;grid-template-columns:20px minmax(0,1fr) 56px auto;align-items:center;gap:4px;height:28px;padding:0 4px;border-bottom:1px solid var(--hm-line);font-size:12px;transition:background-color var(--v7-dauer)} .hk-menu .hk-v7__tabrows>li:last-child>.hk-v7__tabzeile{border-bottom:0} .hk-menu .hk-v7__tabzeile:hover{background:var(--v7-tint-2)} .hk-menu .hk-v7__tabbild{display:grid;place-items:center;width:20px;height:20px} .hk-menu .hk-v7__tabbild img{width:100%;height:100%;object-fit:contain} .hk-menu .hk-v7__tabwert{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hk-menu .hk-v7__balken{display:block;height:4px;overflow:hidden;background:var(--hm-line);border-radius:999px} .hk-menu .hk-v7__balken>span{display:block;height:100%;background:var(--v7-ink-3)} .hk-menu .hk-v7__tabzahl{min-width:24px;text-align:right;color:var(--v7-ink-3);font-variant-numeric:tabular-nums} .hk-menu .hk-v7__raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:12px 24px;align-content:start} .hk-menu .hk-v7__blocklink:hover{color:var(--hm-ink);text-decoration:underline} .hk-menu .hk-v7__unten{display:grid;grid-template-columns:minmax(0,1fr);gap:12px} .hk-menu .hk-v7__mix{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;padding:8px 12px;background:var(--v7-tint);border:1px solid var(--hm-line);border-radius:var(--v7-r);transition:border-color var(--v7-dauer)} .hk-menu .hk-v7__mix:hover{border-color:var(--v7-welt)} .hk-menu .hk-v7__mixwort{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .hk-menu .hk-v7__mixsatz{grid-column:1;font-size:11px;line-height:14px;color:var(--v7-ink-2)} .hk-menu .hk-v7__mixbtn{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px;background:var(--hm-ink);color:var(--hm-paper);border-radius:var(--v7-rs);font-size:12px;font-weight:600;white-space:nowrap} /* OD-43 Beliebte Kombinationen: neben MixMate im Raster 232/1fr, Chips als markierte Beispiele. */ .hk-menu .hk-v7__unten--mix{grid-template-columns:232px minmax(0,1fr);align-items:start;gap:12px 24px} .hk-menu .hk-v7__kombi{min-width:0} .hk-menu .hk-v7__kombireihe{display:flex;flex-wrap:wrap;gap:8px} .hk-menu .hk-v7__kombichip{max-width:100%;background:var(--v7-tint)} .hk-menu .hk-v7__kombichip:hover{border-color:var(--v7-welt)} .hk-menu .hk-v7__beispiel{flex:none;height:16px;padding:0 6px;border:1px solid var(--hm-line);border-radius:999px;font-weight:600;font-size:10px;line-height:14px;letter-spacing:.04em;color:var(--v7-ink-3)} /* D-073 M1 Reiter (M-38/M-39): Streifen 28 hoch, Beschriftung 11/14 Versalien, aktiver Reiter Papier auf Ink-Schatten. */ .hk-menu .hk-vp__reiter{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;align-content:start;min-height:0} .hk-menu .hk-vp__tabs{display:flex;align-items:center;gap:4px;height:28px;padding:2px;background:var(--v7-region);border:1px solid var(--hm-line);border-radius:var(--v7-rs)} .hk-menu .hk-vp__tab{display:inline-flex;align-items:center;height:22px;padding:0 10px;border:0;border-radius:var(--v7-rs);background:transparent;color:var(--v7-ink-2);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background-color var(--v7-dauer),color var(--v7-dauer)} .hk-menu .hk-vp__tab:hover{color:var(--hm-ink)} .hk-menu .hk-vp__tab[aria-selected=true]{background:var(--hm-paper);color:var(--hm-ink);box-shadow:0 1px 3px color-mix(in srgb,var(--hm-ink) 22%,transparent)} .hk-menu .hk-vp__tabpanel{min-width:0;min-height:0} /* M-39 Marken: Top-Marken als große Kacheln mit Artikelzahl, A–Z bleibt der vollständige Index. */ .hk-menu .hk-v7__markenraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:8px;align-content:start} .hk-menu .hk-v7__marke--gross{display:grid;grid-template-columns:minmax(0,1fr) auto;place-items:center start;gap:var(--hk-space-1,8px);width:auto;height:72px;padding:var(--hk-space-1,8px);background:var(--v7-kachel)} .hk-menu .hk-v7__marke--gross:hover{border-color:var(--v7-welt)} .hk-menu .hk-v7__marke--gross .hk-v7__logo{width:104px;height:48px} .hk-menu .hk-v7__marke--gross .hk-v7__markentext{text-align:left;font-size:12px;line-height:14px;color:var(--hm-ink)} /* Rechts 3/12: Neu (und Sale) in zwei Spalten, Bild 96. */ .hk-menu .hk-v7__produkte{display:flex;flex-direction:column;gap:12px;min-height:0} .hk-menu .hk-v7__prod{display:flex;flex-direction:column;gap:var(--hk-space-1,8px);min-width:0} .hk-menu .hk-v7__prod>.hk-v7__gh{margin:0;font-size:14px;line-height:20px;letter-spacing:0;text-transform:none} .hk-menu .hk-v7__prodkacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start} .hk-menu .hk-v7__produkte:not(.hk-v7--s3) .hk-v7__prodkacheln{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))} .hk-menu .hk-v7__kachel{display:grid;grid-template-rows:96px auto;gap:6px;height:100%;padding:6px;background:var(--v7-kachel);border:1px solid var(--hm-line);border-radius:var(--v7-rs);transition:border-color var(--v7-dauer)} .hk-menu .hk-v7__kachel:hover{border-color:var(--v7-welt)} .hk-menu .hk-v7__prodbild{display:grid;place-items:center;height:96px;border-radius:var(--v7-rs);background:var(--v7-region);overflow:hidden} .hk-menu .hk-v7__prodbild img{width:100%;height:96px;object-fit:contain} .hk-menu .hk-v7__prodname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:16px;font-weight:600;overflow-wrap:anywhere} .hk-menu .hk-v7__az{display:grid;gap:12px;align-content:start;min-height:0} .hk-menu .hk-v7__azkopf{display:flex;align-items:center;justify-content:space-between;gap:12px} .hk-menu .hk-v7__zurueck{min-height:36px;padding:0 12px;border:1px solid var(--hm-line);border-radius:var(--v7-rs);background:var(--v7-region)} .hk-menu .hk-v7__schliessen{position:absolute;top:8px;right:8px;z-index:2;min-height:36px;padding:0 12px;border:0;border-radius:var(--v7-rs);background:var(--hm-ink);color:var(--hm-paper)!important} .hk-menu .hk-v7__schliessen:not(:focus-visible){width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hk-menu .hk-panel--vape .hk-v7__marken{padding:var(--hk-space-1,8px) var(--hk-space-2,16px);background:#e8e8e8} .hk-menu .hk-panel--vape .hk-v7__markenbahn{height:72px} .hk-menu .hk-panel--vape .hk-v7__marke{width:120px;height:72px} .hk-menu .hk-panel--vape .hk-v7__marke--alle{width:auto;height:72px} .hk-menu .hk-panel--vape .hk-v7__logo{width:104px;height:48px} @container hk-menu-panel (max-width:1150px){ .hk-menu .hk-nav__panel>.hk-panel.hk-panel--v7{grid-template-rows:none;grid-auto-rows:auto;align-content:start} .hk-menu .hk-v7__unter.hk-v7--s2{grid-column:span 3} .hk-menu .hk-v7__mitte.hk-v7--s7,.hk-menu .hk-v7__mitte.hk-v7--s10{grid-column:span 9} .hk-menu .hk-v7__produkte.hk-v7--s10{grid-column:span 9} .hk-menu .hk-v7__produkte.hk-v7--s3{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;padding-top:12px;border-top:1px solid var(--hm-line)} .hk-menu .hk-v7__produkte.hk-v7--s3 .hk-v7__prodkacheln{grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr))} } @container hk-menu-panel (max-width:680px){ .hk-menu .hk-panel--v7>.hk-v7__region{grid-column:1/-1} .hk-menu .hk-v7__prim{grid-template-columns:repeat(2,minmax(0,1fr))} .hk-menu .hk-v7__ebene2,.hk-menu .hk-v7__produkte.hk-v7--s3{grid-template-columns:minmax(0,1fr)} .hk-menu .hk-v7__row,.hk-menu .hk-v7__tabzeile{min-height:44px} .hk-menu .hk-v7__unten--mix{grid-template-columns:minmax(0,1fr)} .hk-menu .hk-vp__tabs{height:auto;flex-wrap:wrap;padding:4px} .hk-menu .hk-vp__tab{min-height:44px} } /* Höhenstufen ohne JS-Messung: feste Deckel je Fensterhöhe, das Panel scrollt nicht. „Noch n“ folgt der Stufe. */ .hk-menu .hk-v7__noch:not(.hk-v7__noch--voll),.hk-menu .hk-v7__noch-m,.hk-menu .hk-v7__noch-s{display:none} @media(max-height:940px){ /* R24 (Weg C): Ab fuenf Facettenboxen nur noch zwei Tabellenzeilen. Die Spalte mit drei Boxen trieb das Panel bei 1440x900 ueber den Deckel (Inhalt 773 gegen 621 sichtbar); mit zwei Zeilen sind es 615 bei 615. Drei Spalten waeren der naheliegende Ausweg und sind gemessen gescheitert: Chips brechen um, die Hoehe wandert nur in die andere Spalte. Die zugehoerige Zahl im Kopf liefert die Vorlage als [5, 2, 2] mit. */ .hk-menu .hk-v7__ebene2--fuenf .hk-v7__tabrows>li:nth-child(n+3){display:none} .hk-menu .hk-v7__tabrows>li:nth-child(n+5),.hk-menu .hk-v7__noch-voll{display:none} .hk-menu .hk-v7__noch.hk-v7__noch--m,.hk-menu .hk-v7__noch-m{display:inline} } @media(max-height:840px){ .hk-menu .hk-v7__tabrows>li:nth-child(n+4),.hk-menu .hk-v7__chips>li:nth-child(n+7),.hk-menu .hk-v7__block .hk-v7__rows>li:nth-child(n+6),.hk-menu .hk-v7__noch-m{display:none} .hk-menu .hk-v7__noch.hk-v7__noch--s,.hk-menu .hk-v7__noch-s{display:inline} } /* ===== K-17 Einstieg-Panels am Desktop: Wege links, Schnellcheck rechts, kompakt, ohne Innenscroll ===== */ /* FL1 R8: Der neue Berater (.hk-einstieg2) bringt sein eigenes Raster mit – K-17 gilt nur noch für den alten Aufbau/Ersatzfinder. */ .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2){grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:12px 24px;align-items:start} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2)>.hk-einstieg__intro{grid-column:1;grid-row:1} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2)>.hk-check{grid-column:2;grid-row:1/span 2;gap:10px;padding:12px} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2)>.hk-einstieg__wege{grid-column:1;grid-row:2;gap:12px} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2)>.hk-ersatz,.hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2)>.hk-einstieg__leer{grid-column:1/-1} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2):not(:has(>.hk-check))>.hk-einstieg__wege{grid-column:1/-1} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-check__fragen{grid-template-columns:minmax(0,1fr);gap:10px} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-check__ergebnis{flex-direction:column;align-items:flex-start} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-check__ergebnis>p{flex:none} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg{gap:8px;padding:12px} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg__buehne{min-height:0;height:96px;padding:4px} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg__bild{max-height:88px} .hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg__schritte{gap:6px} @media(max-height:940px){.hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg__optional{display:none}.hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg__buehne{height:72px}.hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg__bild{max-height:64px}} @media(max-height:840px){.hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2)>.hk-einstieg__intro,.hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg__buehne,.hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2) .hk-weg>p{display:none}.hk-menu.hk-nav .hk-einstieg:not(.hk-einstieg2)>.hk-einstieg__wege{grid-row:1/span 2}} /* ===== K-18 mobiler Drawer (hk-md): L0 Einstiege/Aktionen/Warengruppen, L2 mit Kopf, Alle, Zeilen, Merkmal-Bahnen ===== */ .hk-menu.hk-md{--md-surface:var(--hk-surface,var(--hm-surface));--md-tint:var(--hk-welt-tint,color-mix(in srgb,var(--hm-accent) 8%,var(--hm-paper)));--md-tint-2:var(--hk-welt-tint-2,color-mix(in srgb,var(--hm-accent) 14%,var(--hm-paper)));--md-welt:var(--hk-welt,var(--hm-accent));--md-welt-text:var(--hk-welt-text,var(--hm-accent));--md-ink-2:var(--hk-ink-2,var(--hm-muted));--md-ink-3:var(--hk-ink-3,var(--hm-muted));--md-r:8px;overflow-x:clip} .hk-menu.hk-drawer.hk-md.hk-md{padding:0 16px} .hk-menu.hk-md .hk-md__einstiege>ul{display:grid;gap:8px;margin-bottom:12px} .hk-menu.hk-md .hk-md__einstieg{display:grid;grid-template-columns:40px minmax(0,1fr) 20px;align-items:center;gap:8px;min-height:64px;padding:10px 12px;background:var(--md-tint);border:1px solid var(--md-welt);border-radius:var(--md-r);transition:background-color .15s} .hk-menu.hk-md .hk-md__einstieg--ohnebild{grid-template-columns:minmax(0,1fr) 20px} @media(hover:hover){.hk-menu.hk-md .hk-md__einstieg:hover{background:var(--md-surface)}} .hk-menu.hk-md .hk-md__et{display:grid;gap:2px;min-width:0} .hk-menu.hk-md .hk-md__einstieg .hk-md__etitel{font-weight:700;overflow-wrap:anywhere} .hk-menu.hk-md .hk-md__esatz{font-size:12px;line-height:16px;color:var(--md-ink-2);text-transform:none;letter-spacing:0;overflow-wrap:anywhere} .hk-menu.hk-md .hk-md__chev{width:20px;text-align:center;font-size:20px;line-height:1;color:var(--md-ink-2)} .hk-menu.hk-md .hk-md__pixel{display:grid;place-items:center;width:40px;height:40px} .hk-menu.hk-md .hk-md__pixel img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated} .hk-menu.hk-md .hk-md__liste{display:grid;gap:0} .hk-menu.hk-md .hk-md__liste>li:has(>.hk-md__aktion){margin-bottom:8px} .hk-menu.hk-md .hk-md__aktion{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:8px;min-height:48px;padding:4px 12px 4px 16px;background:var(--md-surface);border-radius:var(--md-r);font-weight:500;text-transform:uppercase;letter-spacing:.04em;transition:background-color .15s} @media(hover:hover){.hk-menu.hk-md .hk-md__aktion:hover,.hk-menu.hk-md .hk-md__zeile:hover,.hk-menu.hk-md .hk-md__row:hover{background:var(--md-tint-2)}} .hk-menu.hk-md .hk-md__zeile{display:grid;grid-template-columns:40px minmax(0,1fr) auto 20px;align-items:center;gap:8px;min-height:52px;padding:8px 0;border-bottom:1px solid var(--hm-line);transition:background-color .15s} .hk-menu.hk-md .hk-md__zeile--ohnebild{grid-template-columns:minmax(0,1fr) auto 20px} .hk-menu.hk-md .hk-md__zeile .hk-md__etitel{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hk-menu.hk-md .hk-md__n{font-size:12px;line-height:16px;color:var(--md-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap} .hk-menu.hk-md .hk-drawer__ebene:has([data-hk-md])>.hk-drawer__zurueck{display:none} /* FL1 R2: Ebenen-Stapel wie Entwurf R 586–589 – beide Richtungen 200 ms, geparkte Ebene links. */ .hk-menu.hk-md .hk-drawer__stack{display:grid;overflow-x:clip} .hk-menu.hk-md .hk-drawer__stack>.hk-drawer__panel{grid-area:1/1;min-width:0;transform:translateX(100%);transition:transform 200ms var(--hk-ease,cubic-bezier(.2,0,0,1))} .hk-menu.hk-md .hk-drawer__stack>.hk-drawer__panel.is-active{transform:none} .hk-menu.hk-md .hk-drawer__stack>.hk-drawer__panel.is-parked{transform:translateX(-100%)} @media(prefers-reduced-motion:reduce){.hk-menu.hk-md .hk-drawer__stack>.hk-drawer__panel{transition:none}} .hk-menu.hk-md .hk-md__foot{position:sticky;bottom:0;z-index:3;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:56px;margin:16px -16px 0;border-top:1px solid var(--hm-line);background:var(--hm-paper)} .hk-menu.hk-md .hk-md__foot>a,.hk-menu.hk-md .hk-md__foot>button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:0;background:transparent;color:var(--hm-ink);font-size:11px;line-height:14px;font-weight:500} .hk-menu.hk-md .hk-md__foot>*+*{border-left:1px solid var(--hm-line)} .hk-menu.hk-drawer.hk-md .hk-panel.hk-md__panel{display:block;gap:0;padding:0 0 24px} .hk-menu.hk-md .hk-md__kopf{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:4px;min-height:56px;padding:0 8px 0 0;background:var(--hk-paper,var(--hm-paper));border-bottom:1px solid var(--hm-line)} /* MV-B1b (Regel MV-0): die Kopfleiste mit dem Pixelbild hat keine eigene Fläche – Papier wie der Drawer, in jeder Welt (vorher grau ohne Feinschliff). */ .hk-menu.hk-md .hk-md__zurueck{display:inline-flex;align-items:center;gap:2px;flex:none;height:48px;padding:0 8px 0 12px;border:0;background:transparent;color:var(--hk-ink-2,var(--hm-muted));font-size:12px;line-height:16px} .hk-menu.hk-md .hk-md__titel{margin:0;font-size:16px;line-height:24px;font-weight:500;overflow-wrap:anywhere} .hk-menu.hk-md .hk-md__alle{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;margin-top:8px;padding:10px 0;border-bottom:1px solid var(--hm-line);font-weight:500} .hk-menu.hk-md .hk-md__block,.hk-menu.hk-md .hk-md__fac{min-width:0;margin-top:16px} .hk-menu.hk-md .hk-md__fh{display:block;margin:0 0 6px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--md-welt-text)} .hk-menu.hk-md .hk-md__rows{display:grid} .hk-menu.hk-md .hk-md__row{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:8px;min-height:44px;padding:8px 0;border-bottom:1px solid var(--hm-line)} .hk-menu.hk-md .hk-md__rt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hk-menu.hk-md .hk-md__bahn{display:flex;gap:8px;padding:6px 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} .hk-menu.hk-md .hk-md__bahn::-webkit-scrollbar{display:none} .hk-menu.hk-md .hk-md__bahn>li{flex:none} .hk-menu.hk-md .hk-md__pille{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--md-surface);border-radius:999px;font-size:12px;white-space:nowrap} /* T-1514: Trefferfläche ≥ 44×44 px um die Pille zentriert, Optik unverändert (32/36 px sichtbar, Wählen rund) */ .hk-menu.hk-md .hk-md__pille::after{content:'';position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)} @media(hover:hover){.hk-menu.hk-md .hk-md__pille:hover{background:var(--md-tint)}} .hk-menu.hk-md .hk-md__pbild{width:18px;height:18px;object-fit:contain} .hk-menu.hk-md .hk-md__pz{color:var(--md-ink-3)} .hk-menu.hk-md .hk-md__kachel{display:grid;justify-items:start;align-content:start;gap:2px;width:132px;height:100%;padding:8px 10px;background:var(--md-surface);border:1px solid var(--hm-line);border-radius:4px} @media(hover:hover){.hk-menu.hk-md .hk-md__kachel:hover,.hk-menu.hk-md .hk-md__marke:hover{border-color:var(--md-welt)}} .hk-menu.hk-md .hk-md__kbild{width:32px;height:32px;object-fit:contain} .hk-menu.hk-md .hk-md__kt{font-size:14px;line-height:18px;font-weight:500;overflow-wrap:anywhere} .hk-menu.hk-md .hk-md__kn{font-size:11px;line-height:14px;color:var(--md-ink-3)} .hk-menu.hk-md .hk-md__kachel--produkt{justify-items:stretch} .hk-menu.hk-md .hk-md__kachel--produkt .hk-md__kt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:16px} .hk-menu.hk-md .hk-md__prodbild{display:grid;place-items:center;height:96px;background:var(--hm-paper);border-radius:4px;overflow:hidden} .hk-menu.hk-md .hk-md__prodbild img{width:100%;height:96px;object-fit:contain} .hk-menu.hk-md .hk-md__marke{display:grid;justify-items:center;gap:2px;width:88px;min-height:44px;padding:6px 4px;background:var(--md-surface);border:1px solid var(--hm-line);border-radius:4px} .hk-menu.hk-md .hk-md__platte{display:grid;place-items:center;width:100%;height:26px;overflow:hidden} .hk-menu.hk-md .hk-md__platte img{max-width:100%;height:26px;object-fit:contain} /* MV-B1b: Marken-Logos im Drawer (Markenbahn) jeder Welt auf weißer Platte, auch dunkel – wie die Desktop-Leisten. */ .hk-menu.hk-md .hk-md__marke .hk-md__platte:has(>img){background:#fff;border-radius:4px;padding:0 4px} /* MV-B1f-R1: Marke ohne Logo – der Name bricht um statt „…“ (Abnahme Rev 124: „Geometry Hookah“); die Textplatte wächst mit, Logo-Platten bleiben 26 px. */ .hk-menu.hk-md .hk-md__platte:not(:has(>img)){height:auto;min-height:26px} .hk-menu.hk-md .hk-md__logotext{max-width:100%;overflow-wrap:anywhere;text-align:center;font-size:11px;line-height:13px;font-weight:500} .hk-menu.hk-md .hk-md__mn{font-size:10px;line-height:12px;color:var(--md-ink-2)} .hk-menu.hk-md .hk-md__bahn--raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible} .hk-menu.hk-md .hk-md__bahn--raster .hk-md__marke{width:100%} .hk-menu.hk-md .hk-md__hinweis{margin:0;font-size:11px;line-height:14px;color:var(--md-ink-3)} .hk-menu .hk-nav__liste{position:relative} .hk-menu .hk-nav__liste.is-walze{overflow:hidden} .hk-menu .hk-nav__item{transform-origin:50% 0} .hk-menu .hk-nav__liste>.hk-nav__item.is-raus[hidden]{display:flex!important} .hk-menu .hk-nav__liste>.hk-nav__item.is-raus.nav-slot-out{position:absolute;left:var(--nav-slot-left);top:var(--nav-slot-top);width:var(--nav-slot-width);height:var(--nav-slot-height);pointer-events:none} .hk-menu .hk-nav__item.is-raus{animation:hk-slot-raus 180ms ease-out both} .hk-menu .hk-nav__item.is-rein{animation:hk-slot-rein 240ms cubic-bezier(.22,.75,.2,1) both} @keyframes hk-slot-raus{from{transform:translateY(0);opacity:1}to{transform:translateY(25%);opacity:0}} @keyframes hk-slot-rein{from{transform:translateY(-25%);opacity:0}to{transform:translateY(0);opacity:1}} @media(prefers-reduced-motion:reduce){.hk-menu .hk-nav__item.is-raus,.hk-menu .hk-nav__item.is-rein{animation:none}} /* ===== FL1: Kategorie-Pixel-Icons hell/dunkel ===== */ .hk-menu .hk-ico{display:inline-grid;place-items:center;flex:none} .hk-menu .hk-ico>img{grid-area:1/1;width:100%;height:100%;object-fit:contain} .hk-menu .hk-ico--pixel>img{image-rendering:pixelated} .hk-menu .hk-ico>.hk-ico__d{display:none} :root[data-theme=dark] .hk-menu .hk-ico:has(>.hk-ico__d)>.hk-ico__l{display:none}:root[data-theme=dark] .hk-menu .hk-ico>.hk-ico__d{display:block} @media(prefers-color-scheme:dark){:root:not([data-theme=light]) .hk-menu .hk-ico:has(>.hk-ico__d)>.hk-ico__l{display:none}:root:not([data-theme=light]) .hk-menu .hk-ico>.hk-ico__d{display:block}} .hk-menu.hk-md .hk-md__pixel.hk-ico{width:40px;height:40px} .hk-menu.hk-md .hk-md__kopfbild.hk-ico{width:32px;height:32px} .hk-menu .hk-v7__kartenbild .hk-ico{width:48px;height:48px} /* ===== FL1 R2: Schnellcheck mit abwählbaren Chips und Treffer-Karte (Entwurf R 36154ff, 17482–17496) ===== */ .hk-menu .hk-check__chip{min-height:32px;padding:6px 12px;border:1px solid var(--hk-line-strong,var(--hm-line));border-radius:999px;background:var(--hm-paper);color:var(--hm-ink);font-size:12px;line-height:16px;text-align:left} .hk-menu .hk-check__chip[aria-pressed=true]{border-color:var(--hk-welt,var(--hm-accent));background:var(--hk-welt,var(--hm-accent));color:var(--hk-on-welt,var(--hm-paper))} .hk-menu .hk-weg{transition:border-color .15s,opacity .15s} .hk-menu .hk-weg.is-treffer{border-color:var(--hk-welt,var(--hm-accent));box-shadow:inset 0 0 0 1px var(--hk-welt,var(--hm-accent))} .hk-menu .hk-weg.is-blass{opacity:.45} .hk-menu .hk-weg__treffer{margin:0;padding:6px 10px;border-radius:4px;background:color-mix(in srgb,var(--hk-welt,var(--hm-accent)) 12%,var(--hm-paper));font-size:12px;line-height:16px} .hk-menu .hk-weg__treffer>strong{color:var(--hk-green-text,#1B7A3A)} .hk-menu .hk-weg__treffer>strong::before{content:"✓ "} @media(prefers-reduced-motion:reduce){.hk-menu .hk-weg{transition:none}} /* ===== FL1 R8 · Vape-Einstieg „Neu hier“ 1:1 nach Entwurf (relaunch.html, Panel hk-panel hk-einstieg2) ===== Klassennamen und Werte stammen aus den