/* =========================================================
   SD24 HEADER + MEGAMENU (refactored / variable-driven)
   Nichts entfernt – nur strukturiert + an SD24 Vars angepasst.
   ========================================================= */

/* =========================================================
   0) Global / Theme Overrides (Header shell)
   ========================================================= */

header{
  box-shadow: 0 1rem .5625rem -.75rem rgba(0,0,0,.06);
}

header#shop-nav{
  position: sticky;
  top: 0;
  z-index: 1000;     /* über Content */
  background: var(--sd-text-inverse); /* #fff -> Variable */
  padding-bottom: 0;
  padding-top: 0;
}

@media(max-width: 500px) {
  header#shop-nav {
    position: relative ;
  }
} 

#bc-w {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  margin: 0;
}

/* KK FM: toggler aus */
.kk-fm-entry.kk-fm-entry-type-toggler.kk-fm-entry-type-toggler-left{
  display:none;
}

@media(max-width: 550px) {
  .sd24-header__bottom {
    display: none !important;
  }
}
/* =========================================================
   1) Component Tokens (Single Source of Truth)
   ========================================================= */

.sd24-header{
  /* Colors */
  --hdr-bg: var(--sd-text-inverse); /* #fff */
  --hdr-fg: var(--sd-text);

  /* Layout spacing */
  --hdr-stack-gap: 6px;
  --hdr-top-gap: 18px;
  --hdr-left-gap: 28px;
  --hdr-actions-gap: 10px;

  --hdr-top-pad-top: 10px;
  --hdr-top-pad-bottom: 0px;

  --hdr-bottom-gap: 22px;
  --hdr-bottom-pad-top: 2px;
  --hdr-bottom-pad-bottom: 10px;

  /* Search sizing */
  --hdr-search-minw: 240px;
  --hdr-search-maxw: 100%;

  --hdr-search-height: 42px;
  --hdr-search-pad-x: 14px;
  --hdr-search-pad-right: 44px;
  --hdr-search-icon-size: 18px;
  --hdr-search-icon-right: 12px;

  /* Radius (nur über SD vars) */
  /* vorher: calc(var(--sd-radius-base) * 3) -> ok, aber wir definieren semantisch */
  --hdr-radius: var(--sd-radius-base);

  /* Header Logo Sizes (per viewport) */
  --sd-hdr-logo-minw-mobile: 110px;
  --sd-hdr-logo-maxw-mobile: 180px;
  --sd-hdr-logo-maxh-mobile: 44px;

  --sd-hdr-logo-minw-tablet: 120px;
  --sd-hdr-logo-maxw-tablet: 220px;
  --sd-hdr-logo-maxh-tablet: 50px;

  --sd-hdr-logo-minw-laptop: 120px;
  --sd-hdr-logo-maxw-laptop: 240px;
  --sd-hdr-logo-maxh-laptop: 60px;

  --sd-hdr-logo-minw-desktop: 120px;
  --sd-hdr-logo-maxw-desktop: 380px;
  --sd-hdr-logo-maxh-desktop: 60px;

  /* Logo (Default = Desktop > 1400px) */
  --hdr-logo-minw: var(--sd-hdr-logo-minw-desktop);
  --hdr-logo-maxw: var(--sd-hdr-logo-maxw-desktop);
  --hdr-logo-maxh: var(--sd-hdr-logo-maxh-desktop);

  /* Header tokens (SD24) */
  --sd-hdr-icon-size: 26px; /* Default (Desktop) */
  --sd-hdr-icon-hit: 44px;  /* Klickfläche */

  background: var(--hdr-bg);
  color: var(--hdr-fg);
}

/* =========================================================
   2) Header Layout: Container / Rows
   ========================================================= */

.sd24-header__container{
  display:flex;
  flex-direction:column;
  gap:var(--hdr-stack-gap);
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Header-Inhalt: gleiche Maximalbreite wie mw-container, aber zentriert
   Spezifität (1,1,1) schlägt #bxt-w .mw-container (1,1,0) */
header#shop-nav .sd24-header__container {
  max-width: calc(var(--wdt-pag) + 200px);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .sd24-header__container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ROW 1 */
.sd24-header__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap; /* kleinere Viewports: Search kann umbrechen */
  gap: 100px;
}

.sd24-header__left{
  display:flex;
  align-items:center;
  gap:var(--hdr-left-gap);
  flex:0 0 auto;
}

.sd24-header__burger,
.sd24-header__logo{
  display:flex;
  align-items:center;
}

/* Search wrapper */
.sd24-header__search{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  min-width:var(--hdr-search-minw);
  max-width:var(--hdr-search-maxw);
}

.sd24-header__search > *{
  width:min(var(--hdr-search-maxw), 100%);
}

/* Actions wrapper */
.sd24-header__actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:var(--hdr-actions-gap);
}

/* ROW 2 */
.sd24-header__bottom{
  display:flex;
  align-items:center;
  gap:var(--hdr-bottom-gap);
  margin-bottom: 1rem;
}

/* =========================================================
   3) Logo (Größen über Tokens)
   ========================================================= */

.sd24-header__logo{
  flex:0 0 auto;
  min-width:var(--hdr-logo-minw);
}

.sd24-header__logo > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:var(--hdr-logo-maxw);
  text-decoration:none;
}

/* img kann von Snackys auch über {image} kommen → robust */
#sd24-logo img,
#sd24-logo picture img,
#sd24-logo svg{
  display:block;
  width:auto;
  height:auto;
  max-width:var(--hdr-logo-maxw);
  max-height:var(--hdr-logo-maxh);
  object-fit:contain;
}

/* =========================================================
   4) Search Component
   ========================================================= */

.sd24-search{
  position:relative;
  width:100%;
  overflow:hidden;

  border:var(--sd-border-slim) solid var(--sd-border);
  border-radius:var(--hdr-radius);
  background:var(--sd-text-inverse);
}

.sd24-search input.form-control.ac_input{
  width:100%;
  height:var(--hdr-search-height);

  border:0 !important;
  outline:0;
  box-shadow:none !important;

  padding:0 var(--hdr-search-pad-right) 0 var(--hdr-search-pad-x);
  color:var(--sd-text);
  background:transparent;
}

.sd24-search input.form-control.ac_input::placeholder{
  color:var(--sd-muted);
}

.sd24-search input.form-control.ac_input:focus-visible{
  outline:none;
  box-shadow:var(--sd-focus);
}

.sd24-search__icon{
  position:absolute;
  right:var(--hdr-search-icon-right);
  top:50%;
  transform:translateY(-50%);

  display:flex;
  align-items:center;
  justify-content:center;

  pointer-events:none;
  color:var(--sd-muted);
}

.sd24-search__icon svg{
  width:var(--hdr-search-icon-size);
  height:var(--hdr-search-icon-size);
}

/* =========================================================
   5) Gender Nav + Main Nav
   ========================================================= */

.sd24-gendernav{
  display:flex;
  align-items:center;
  gap:18px;
  flex:0 0 auto;
  white-space:nowrap;
}

.sd24-gendernav__link{
  color:var(--sd-text);
  text-decoration:none;
  font-weight:500;
}

.sd24-gendernav__link:hover{
  text-decoration:underline;
}

.sd24-mainnav{
  margin-left:auto;
  flex:1 1 auto;
  display:flex;
  justify-content:flex-end;
}

.sd24-mainnav ul{
  display:flex;
  align-items:left;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}

/* =========================================================
   6) Actions (Icons)
   ========================================================= */

.sd24-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
}

.sd24-actions__item{
  display:flex;
  align-items:center;
}

/* Cart-Icon: Badge als Overlay oben rechts über dem Icon */
.sd24-actions__cart .basket-opener{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-text);
  text-decoration: none;
}
.sd24-actions__cart .basket-opener .badge{
  position: absolute;
  top: -.4rem;
  right: -.6rem;
  z-index: 2;
  background: var(--sd-primary);
  color: var(--sd-text-inverse);
  border-radius: var(--sd-radius-pill);
  font-size: .75rem;
  line-height: 1.15rem;
  min-width: 1.15rem;
  padding: 0 .35rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}
.sd24-actions__cart .basket-opener .badge em{
  font-style: normal;
}

.sd24-iconlink{
  display:flex;
  align-items:center;
  justify-content:center;

  line-height:1;
  text-decoration:none;
  color:var(--sd-text);
}

.sd24-wishlink{
  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--sd-text);
  text-decoration:none;

  padding:6px;
  border-radius:var(--hdr-radius);
}

.sd24-wishlink:focus-visible{
  outline:none;
  box-shadow:var(--sd-focus);
}

.sd24-wishlink svg{
  display:block;
}

/* =========================================================
   7) Leftmenu (KK Filter Menu)
   ========================================================= */

#leftmenu{
  width:100%;
  padding:0;
  margin:0;
}

#leftmenu span.kk-fm-entry-label--name{
  font-size:1.1rem;
}

#leftmenu span.kk-fm-entry-label--name:hover{
  color:var(--sd-primary);
}

#leftmenu span.kk-fm-caret-down{
  display:none;
}

#leftmenu .kk-fm-entry-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Wichtig: keine Transition im Leftmenu */
#leftmenu .kk-fm-entry-label,
#leftmenu .kk-fm-entry-label *,
#leftmenu .kk-fm.kk-fm-aa79fda4-1c99-42ce-b308-1751fa34857e .kk-fm-entry.kk-fm-hover .kk-fm-entry-label,
#leftmenu .kk-fm.kk-fm-aa79fda4-1c99-42ce-b308-1751fa34857e .kk-fm-entry.kk-fm-active .kk-fm-entry-label{
  transition:none !important;
}

/* Active/Hover Style */
#leftmenu .kk-fm.kk-fm-aa79fda4-1c99-42ce-b308-1751fa34857e .kk-fm-entry.kk-fm-hover .kk-fm-entry-label,
#leftmenu .kk-fm.kk-fm-aa79fda4-1c99-42ce-b308-1751fa34857e .kk-fm-entry.kk-fm-active .kk-fm-entry-label{
  color:var(--sd-text);
  background-color:var(--sd-text-inverse);
  border-bottom:none;
}

/* Active underline */
#leftmenu a.kk-fm-entry-label.kk-fm-link.active span.kk-fm-entry-label--name{
  position:relative;
  display:inline-block;
}

#leftmenu a.kk-fm-entry-label.kk-fm-link.active span.kk-fm-entry-label--name::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:3px;
  background:var(--sd-primary);
  border-radius:var(--sd-radius-pill);
}
.merkMobil.active {
border-bottom: var(--sd-border-thick) solid var(--sd-primary);
} 
/* Cat wrapper */
#cat-w .mgm{
  top:0;
  bottom:0;
  padding-left:0 !important;
}

#cat-w .mm-mainlink, #cat-w a  {
  font-weight: 400;
  font-size: 1rem;
}

ul#cat-ul li.is-lth {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

@media screen and (min-width: 768px) {
    #cat-w li:has(a.mm-mainlink) {
        border-bottom: 1px solid #eee;
        position: static;
        box-shadow: none;
    }
    #cat-w .mm-mainlink {
    padding: .5rem 3rem .5rem 2rem;
  }
}
/* =========================================================
   8) Responsive – 3 Queries
   ========================================================= */

/* LAPTOP: <= 1400px */
@media (max-width: 1400px){
  .sd24-header{
    --hdr-logo-minw: var(--sd-hdr-logo-minw-laptop);
    --hdr-logo-maxw: var(--sd-hdr-logo-maxw-laptop);
    --hdr-logo-maxh: var(--sd-hdr-logo-maxh-laptop);
  }

  #leftmenu span.kk-fm-entry-label--name{
    font-size:.9rem;
  }
}

/* TABLET: <= 992px */
@media (max-width: 992px){
  .sd24-header{
    --hdr-logo-minw: var(--sd-hdr-logo-minw-tablet);
    --hdr-logo-maxw: var(--sd-hdr-logo-maxw-tablet);
    --hdr-logo-maxh: var(--sd-hdr-logo-maxh-tablet);
  }

  .sd24-header__top {
    position: relative;
    gap: 5px;
    padding: 10px 0 20px 0;
  }

  .sd24-header__left{
    width:100%;
    justify-content:center;
  }

  .sd24-header__burger{
    position:absolute;
    left:0;
  }

  .sd24-header__actions{
    position:absolute;
    right:0;
    top:10px;
  }

  .sd24-header__search{
    order:3;
    flex:1 0 100%;
    min-width:0;
    justify-content:stretch;
    margin-top:10px;
  }

  .sd24-header__search > *{
    width:100%;
  }

  /* Wie von dir gewollt: Actions komplett ausblenden */
  .sd24-actions{
    display:none !important;
  }
}

/* MOBILE: <= 500px */
@media (max-width: 500px){
  .sd24-header{
    --hdr-logo-minw: var(--sd-hdr-logo-minw-mobile);
    --hdr-logo-maxw: var(--sd-hdr-logo-maxw-mobile);
    --hdr-logo-maxh: var(--sd-hdr-logo-maxh-mobile);
  }
}

/* =========================================================
   9) MENU TOKENS (Mobile + Desktop, single source of truth)
   ========================================================= */

.sd24-mainnav,
#cat-w{
  /* Spacing */
  --menu-pad-x: 1.25rem;        /* horizontal padding */
  --menu-pad-y: 0.875rem;       /* vertical padding   */
  --menu-row-h: 3rem;           /* uniform row height */
  --menu-row-h-sub: 2.875rem;   /* subrow height      */
  --menu-back-h: 3.5rem;        /* back button height */
  --menu-gap: 0.5rem;

  /* Type */
  --menu-fz-1: 1rem;            /* level 1   */
  --menu-fz-2: 0.95rem;         /* level 2   */
  --menu-fz-3: 0.9rem;          /* level 3+  */
  --menu-fw-1: 600;
  --menu-fw-2: 500;
  --menu-fw-3: 400;

  /* Colors */
  --menu-bg: #ffffff;
  --menu-bg-soft: #f8f8f8;
  --menu-text: var(--sd-text);
  --menu-text-muted: #555;
  --menu-accent: var(--sd-primary);
  --menu-divider: #eee;
  --menu-shadow: 0 16px 40px rgba(0,0,0,.08);

  /* Mobile drawer */
  --menu-drawer-w: min(420px, 100vw);

  /* Misc */
  --menu-radius: var(--sd-radius-base);
  --menu-trans: .25s cubic-bezier(.4, 0, .2, 1);
}

/* Nav-Layer immer ueber sticky Header */
#cat-w{
  z-index: 1100 !important;
}

/* Reset old paddings/borders/transitions that conflicted */
#cat-w .mm-mainlink,
#cat-w a,
#cat-w button,
#cat-w .defaultlink,
#cat-w .fa-caret-down,
#cat-w .close-btn{
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

#cat-w .mm-mainlink:active,
#cat-w a:active,
#cat-w button:active,
#cat-w .fa-caret-down:active,
#cat-w .close-btn:active,
#cat-w .mm-mainlink:focus,
#cat-w a:focus,
#cat-w button:focus,
#cat-w .fa-caret-down:focus,
#cat-w .close-btn:focus{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   10) BURGER-DRAWER MENU (alle Breakpoints)
   Funktioniert auf Mobile UND Desktop, denn beide haben den
   gleichen Burger-Button. Hauptnav (Dropper) im
   .sd24-header__bottom bleibt davon unberührt.
   ========================================================= */

/* Drawer Container - Hard-Override aller Snackys-Default-Styles
   Slide-in von LINKS (nicht rechts), kein transform damit nested fixed-elemente
   (Submenüs) nicht in einem Containing-Block gefangen werden. */
#cat-w,
.sd24-mainnav#cat-w{
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: calc(-1 * var(--menu-drawer-w)) !important;
  right: auto !important;
  width: var(--menu-drawer-w) !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--menu-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 0 40px rgba(0,0,0,.18) !important;
  transform: none !important;
  transition: left var(--menu-trans), visibility var(--menu-trans) !important;
  visibility: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 1100 !important;
  display: block !important;
}
body.shw-sb #cat-w,
body.shw-sb .sd24-mainnav#cat-w{
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  visibility: visible !important;
}

/* Burger bleibt im DOM (verhindert Layout-Sprung beim Schließen).
   ACHTUNG: position auf Mobile MUSS absolute bleiben (parent CSS @media max-width:992px),
   damit Burger ganz links ist und Logo mittig im viewport. */
.sd24-header__burger,
#mob-nt{
  visibility: visible;
}
/* Nur auf Desktop relative setzen */
@media (min-width: 993px){
  .sd24-header__burger,
  #mob-nt{
    position: relative;
  }
}
/* Body offen: Burger sichtbar bleiben */
body.shw-sb .sd24-header__burger,
body.shw-sb #mob-nt{
  visibility: visible !important;
  opacity: 1 !important;
}

/* Body-Scrolllock wenn Drawer offen.
   KEIN position:fixed auf body, weil das Layout-Sprung verursacht
   (scroll-position wird verloren, Burger spring beim Schließen).
   Stattdessen overflow:hidden + overscroll-behavior. */
html:has(body.shw-sb),
body.shw-sb{
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: none;
}

/* Overlay-BG nur sichtbar wenn Drawer offen */
#cls-catw{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0,0,0,.4) !important;
  z-index: 1099 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity var(--menu-trans), visibility var(--menu-trans) !important;
  pointer-events: none !important;
}
body.shw-sb #cls-catw{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* === ab hier: alle inneren Drawer-Styles - global, nicht mehr @media === */
@media (min-width: 0px){

  /* Drawer-Inhalt: padding-top für fixed menu-title oben drüber.
     padding-bottom damit Mobile-Bottom-Nav (~64px) nicht über dem Inhalt liegt. */
  #cat-w .mgm,
  body #cat-w .mgm,
  html body #cat-w .mgm{
    padding-top: var(--menu-back-h) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 120px !important;
    margin: 0 !important;
    width: 100%;
    background: var(--menu-bg);
  }

  /* Header (Menü-Titel + Close) - immer fixed oben, X immer sichtbar (auch in Sub).
     fullscreen-title ist im DOM doppelt vorhanden (im #cat-ul), wird ausgeblendet. */
  #cat-w .fullscreen-title,
  #cat-w #cat-ul > .fullscreen-title{
    display: none !important;
  }
  #cat-w .menu-title{
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    height: var(--menu-back-h) !important;
    min-height: var(--menu-back-h) !important;
    max-height: var(--menu-back-h) !important;
    line-height: var(--menu-back-h) !important;
    padding: 0 var(--menu-pad-x) !important;
    margin: calc(-1 * var(--menu-back-h)) 0 0 0 !important;
    width: 100% !important;
    background: var(--menu-bg) !important;
    border-bottom: 1px solid var(--menu-divider) !important;
    z-index: 5;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }
  #cat-w .menu-title > *{
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  #cat-w .menu-title .h3,
  #cat-w .menu-title span:not(.close-btn){
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--menu-text) !important;
    line-height: 1 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* X Close-Button: gleiche Höhe wie Header für perfekte Y-Mitte */
  #cat-w .menu-title .close-btn{
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    position: relative !important;
    z-index: 8 !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    line-height: 36px !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }
  /* X-Linien innerhalb des Buttons exakt zentriert */
  #cat-w .menu-title .close-btn::before,
  #cat-w .menu-title .close-btn::after{
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
  }
  /* Im Submenü: Menü-Text verstecken, X bleibt aber sichtbar.
     menu-title bleibt im DOM, aber wird auf 0px Width geschrumpft + transparent.
     Der X-Button bleibt sichtbar als overflow rechts. */
  #cat-w:has(li.open) > .mgm > .menu-title > .h3,
  #cat-w:has(li.open) > .mgm > .menu-title > span:not(.close-btn):not(:has(.close-btn)){
    visibility: hidden !important;
  }
  #cat-w:has(li.open) > .mgm > .menu-title{
    visibility: visible !important;
    display: flex !important;
    background: transparent !important;
    border-bottom: none !important;
    pointer-events: none !important;
    z-index: 7 !important;
  }
  #cat-w:has(li.open) > .mgm > .menu-title .close-btn{
    pointer-events: auto !important;
  }
  #cat-w .close-btn{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--menu-bg-soft) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    position: relative;
  }
  #cat-w .close-btn::before,
  #cat-w .close-btn::after{
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    background: var(--menu-text);
    top: 50%;
    left: 50%;
  }
  #cat-w .close-btn::before{ transform: translate(-50%,-50%) rotate(45deg); }
  #cat-w .close-btn::after{  transform: translate(-50%,-50%) rotate(-45deg); }

  /* Im Submenu bleibt menu-title sichtbar (für X), aber Title-Text wird hidden.
     siehe oberer Block für visibility-rules. */

  /* Top Lists - überschreibt Snackys-parent .blanklist { top: 5rem; height: calc(100% - 5rem) }
     padding-top kommt vom .mgm parent (var(--menu-back-h)). */
  body #cat-w #cat-ul,
  body #cat-w .mgm > .blanklist,
  body #cat-w > .mw-container > .blanklist{
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Default LI */
  #cat-w li{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
    box-sizing: border-box;
  }
  #cat-w li + li{
    border-top: 1px solid var(--menu-divider) !important;
  }
  /* Erste Reihe (Gender Buttons) bleibt klar abgegrenzt */
  #cat-w #cat-ul > li.is-lth{
    border-top: none !important;
    border-bottom: 1px solid var(--menu-divider) !important;
  }

  /* Einheitliche Links – ALLE Levels gleich.
     Icon + Schrift LINKS, Pfeil rechts (caret ist absolute right). */
  #cat-w .mm-mainlink,
  #cat-w .dropdown-menu .mm-mainlink,
  #cat-w .dropdown-menu a,
  #cat-w .subsub li a,
  #cat-w .defaultlink,
  #cat-w .mega-X__title,
  #cat-w .mega-X__subsub a,
  #cat-w .home-icon{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: var(--menu-row-h) !important;
    padding: var(--menu-pad-y) var(--menu-pad-x) !important;
    margin: 0 !important;
    color: var(--menu-text) !important;
    font-size: var(--menu-fz-1) !important;
    font-weight: var(--menu-fw-2) !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background-color var(--menu-trans), color var(--menu-trans) !important;
    transform: none !important;
    text-align: left !important;
    white-space: normal !important;
    position: relative !important;
  }

  /* Top-Level dicker, sub etwas leichter */
  #cat-w #cat-ul > li > .mm-mainlink{
    font-weight: var(--menu-fw-1) !important;
    font-size: var(--menu-fz-1) !important;
  }
  #cat-w .dropdown-menu .mm-mainlink,
  #cat-w .dropdown-menu a,
  #cat-w .mega-X__title{
    font-weight: var(--menu-fw-2) !important;
    font-size: var(--menu-fz-2) !important;
  }
  #cat-w .subsub li a,
  #cat-w .mega-X__subsub a{
    font-weight: var(--menu-fw-3) !important;
    font-size: var(--menu-fz-3) !important;
    color: var(--menu-text-muted) !important;
    min-height: var(--menu-row-h-sub) !important;
  }

  /* Active-Backgrounds + Hover-Backgrounds entfernen */
  #cat-w li.active > .mm-mainlink,
  #cat-w li:hover > .mm-mainlink,
  #cat-w .mm-mainlink:hover,
  #cat-w .mm-mainlink.tapped,
  #cat-w .dropdown-menu li.active > a,
  #cat-w .subsub li.active a{
    background: transparent !important;
    color: var(--menu-accent) !important;
  }

  /* Pfeil-Button - GANZE ZEILE ist Toggle-Bereich (nicht nur 56px rechts).
     Mit padding-right: 1.3rem rückt der Pfeil rechts an die Kante. */
  #cat-w .fa-caret-down,
  body.mmlca-n #cat-w .fa-caret-down,
  body.mmlca-n #cat-w li:not(.open) > .mm-mainlink .fa-caret-down,
  body.mmlca-n #cat-w li:not(.open) > .mm-mainlink .fa-caret-down.visible-xs{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    z-index: 2;
    padding: 0 1.5rem 0 0 !important;
    margin: 0 !important;
    cursor: pointer;
  }
  /* Bei offener LI (Back-Pfeil) bleibt der Pfeil links: width 56px */
  body #cat-w li.open > .mm-mainlink > .fa-caret-down{
    width: 56px !important;
    left: 0 !important;
    right: auto !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  #cat-w .fa-caret-down .ar{
    border-color: var(--menu-text) !important;
    margin: 0 !important;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    display: inline-block;
    background: transparent !important;
  }
  #cat-w .fa-caret-down .ar.ar-r{
    transform: rotate(-45deg);
  }
  #cat-w .fa-caret-down .ar.ar-l,
  #cat-w .fa-caret-down .title{
    display: none !important;
  }
  /* mm-mainlink mit Pfeil hat zusätzliches rechtes Padding (damit Text nicht unter Button läuft) */
  #cat-w .mm-mainlink:has(> .fa-caret-down){
    padding-right: 60px !important;
  }

  /* Submenüs – sliden komplett rein.
     Slide-in von LINKS, kein transform (vermeidet Containing-Block für
     nested fixed-elemente in 3. Ebene). */
  #cat-w .dropdown-menu,
  #cat-w .subsub{
    position: fixed !important;
    top: 0 !important;
    left: calc(-1 * var(--menu-drawer-w)) !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--menu-drawer-w) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--menu-bg) !important;
    transform: none !important;
    transition: left var(--menu-trans), visibility var(--menu-trans) !important;
    visibility: hidden;
    z-index: 3;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    list-style: none !important;
  }
  #cat-w li.open > .dropdown-menu,
  #cat-w li.open > .subsub,
  #cat-w .open > .row > .row .col-12 > .subsub{
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    visibility: visible !important;
  }
  /* Wenn Drawer geschlossen, sind Submenüs ohnehin nicht sichtbar */
  body:not(.shw-sb) #cat-w .dropdown-menu,
  body:not(.shw-sb) #cat-w .subsub{
    visibility: hidden !important;
    left: calc(-1 * var(--menu-drawer-w)) !important;
    right: auto !important;
  }

  /* "Back" Header beim offenen Submenu: fixiert oben links im Drawer.
     Width minus 64px lässt rechts Platz für X-Close-Button.
     Hoher z-index UND isolation um über menu-title zu rendern. */
  #cat-w li.open > .mm-mainlink,
  #cat-w li.open > a.mm-mainlink,
  #cat-w li.open > span.mm-mainlink,
  #cat-w li.open > .defaultlink.title{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: calc(var(--menu-drawer-w) - 64px) !important;
    height: var(--menu-back-h) !important;
    min-height: var(--menu-back-h) !important;
    background: var(--menu-bg) !important;
    border-bottom: 1px solid var(--menu-divider) !important;
    z-index: 100 !important;
    isolation: isolate !important;
    padding-left: 3.25rem !important;
    padding-right: var(--menu-pad-x) !important;
    font-weight: 700 !important;
    color: var(--menu-text) !important;
    box-shadow: 0 2px 0 transparent;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  /* Wenn drawer geschlossen, normale Top-Level Optik wiederherstellen */
  body:not(.shw-sb) #cat-w li.open > .mm-mainlink{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--menu-row-h) !important;
    padding: var(--menu-pad-y) var(--menu-pad-x) !important;
    box-shadow: none !important;
    border-bottom: none !important;
  }
  /* Back-Caret links - überschreibt Snackys-Parent .open > a .fa-caret-down rules */
  body #cat-w li.open > .mm-mainlink > .fa-caret-down,
  body #cat-w li.open > a.mm-mainlink > .fa-caret-down,
  body #cat-w li.open > span.mm-mainlink > .fa-caret-down,
  body #cat-w .mgm .open > a .fa-caret-down.visible-xs,
  body #cat-w .mgm .open > span .fa-caret-down.visible-xs{
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 56px !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Im open-State: nur .ar-r sichtbar als ‹ (rotated 135deg). .ar-l und .title hidden. */
  body #cat-w li.open > .mm-mainlink > .fa-caret-down .ar.ar-r,
  body #cat-w .mgm .open > a .fa-caret-down.visible-xs .ar-r,
  body #cat-w .mgm .open > span .fa-caret-down.visible-xs .ar-r{
    display: inline-block !important;
    transform: rotate(135deg) !important;
    border-color: var(--menu-text) !important;
    border-style: solid !important;
    border-width: 0 2px 2px 0 !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
  }
  body #cat-w li.open > .mm-mainlink > .fa-caret-down .ar.ar-l,
  body #cat-w li.open > .mm-mainlink > .fa-caret-down .title,
  body #cat-w .mgm .open > a .fa-caret-down.visible-xs .ar-l,
  body #cat-w .mgm .open > a .fa-caret-down.visible-xs .title,
  body #cat-w .mgm .open > span .fa-caret-down.visible-xs .ar-l,
  body #cat-w .mgm .open > span .fa-caret-down.visible-xs .title{
    display: none !important;
  }
  /* Submenu erhält Top-Padding für den fixed Back-Header */
  #cat-w li.open > .dropdown-menu,
  #cat-w li.open > .subsub{
    padding-top: var(--menu-back-h) !important;
  }
  /* Top-Level Drawer-Inhalt versteckt, wenn ein Submenu offen ist (verhindert "ghost" Items unter dem fixed Header).
     menu-title NICHT verstecken - nur sein Title-Text. X bleibt sichtbar. */
  #cat-w:has(li.open) > .mgm > #cat-ul{
    visibility: hidden;
  }
  /* Aber: das offene LI mit fixed Back-Header und Submenu bleibt sichtbar */
  #cat-w:has(li.open) #cat-ul li.open,
  #cat-w:has(li.open) #cat-ul li.open > .mm-mainlink,
  #cat-w:has(li.open) #cat-ul li.open > .mm-mainlink > .fa-caret-down,
  #cat-w:has(li.open) #cat-ul li.open > .mm-mainlink > .fa-caret-down *,
  #cat-w:has(li.open) #cat-ul li.open > .dropdown-menu,
  #cat-w:has(li.open) #cat-ul li.open > .dropdown-menu *{
    visibility: visible !important;
  }
  /* Wenn ein LI.open selbst ein offenes Kind-LI hat: dessen Back-Header verstecken,
     damit das Header-Stacking-Issue (fixed-elemente in eigenem Stacking-Context)
     vermieden wird. Nur das innerste li.open zeigt seinen Back-Header. */
  #cat-w:has(li.open) #cat-ul li.open:has(li.open) > .mm-mainlink,
  #cat-w:has(li.open) #cat-ul li.open:has(li.open) > .mm-mainlink *,
  #cat-w:has(li.open) #cat-ul li.open:has(li.open) > .mm-mainlink > .fa-caret-down,
  #cat-w:has(li.open) #cat-ul li.open:has(li.open) > .mm-mainlink > .fa-caret-down *{
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* row/col layout reset – damit das mega-X grid auch im Mobile als Liste fließt */
  #cat-w .row,
  #cat-w .row > div,
  #cat-w .mgm-c,
  #cat-w .info-col{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
  }

  /* mega-X im Mobile als Liste */
  #cat-w .mega-X,
  #cat-w .mega-categories.mega-X{
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  #cat-w .mega-X__item{
    display: block !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--menu-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    gap: 0 !important;
  }
  #cat-w .mega-X__thumb,
  #cat-w .mega-X__thumbLink,
  #cat-w .info-col .img-ct,
  #cat-w .info-col img,
  #cat-w .info-col picture,
  #cat-w .info-col .description{
    display: none !important;
  }
  #cat-w .mega-X__title{
    border-bottom: none !important;
  }
  /* mega-X__title hat keinen Drilldown (DIV-Wrapper kompatibel kein <li>),
     daher Pfeil ausblenden - Click auf Titel führt direkt zur URL.
     Sub-Sub-Liste komplett ausblenden (nur 2 Ebenen im Drawer).
     Spec verstärkt um Section-12 Desktop-Override zu schlagen. */
  body #cat-w .mega-X .mega-X__title .fa-caret-down,
  body #cat-w .mega-X .mega-X__title > button,
  body.mmlca-n #cat-w .mega-X .mega-X__title .fa-caret-down,
  body[class] #cat-w .mega-X .mega-X__title .fa-caret-down{
    display: none !important;
  }
  body #cat-w .mega-X .mega-X__subsub,
  body[class] #cat-w .mega-X .mega-X__subsub{
    display: none !important;
  }

  /* Erste Reihe: Gender-Toggles */
  #cat-w #cat-ul > .is-lth{
    padding: 0 !important;
  }
  #cat-w #cat-ul > .is-lth .merkMobilWrapper{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0.75rem var(--menu-pad-x) !important;
    background: var(--menu-bg-soft) !important;
  }
  #cat-w #cat-ul > .is-lth .merkMobilWrapper > .merkMobil{
    flex: 1 1 auto;
    text-align: center;
    padding: 0.5rem 0.25rem !important;
    cursor: pointer;
    background: transparent !important;
    color: var(--menu-text) !important;
    border-bottom: 2px solid transparent;
    transition: color var(--menu-trans), border-color var(--menu-trans);
  }
  #cat-w #cat-ul > .is-lth .merkMobilWrapper > .merkMobil span{
    font-weight: 600;
    font-size: .85rem;
  }
  /* Gender-Toggles: nicht-aktive grau, aktive SCHWARZ mit schwarzer Underline.
     Override der globalen .merkMobil.active border-bottom (rot/primary). */
  body #cat-w #cat-ul > .is-lth .merkMobilWrapper > .merkMobil,
  body #cat-w #cat-ul > .is-lth .merkMobilWrapper:has(.merkMobil.active) .merkMobil:not(.active){
    color: #999 !important;
    border-bottom: 2px solid transparent !important;
  }
  body #cat-w #cat-ul > .is-lth .merkMobilWrapper > .merkMobil.active{
    color: var(--menu-text) !important;
    border-bottom: 2px solid var(--menu-text) !important;
  }

  /* Visibility Snackys-Klassen */
  #cat-w .hidden-xs{ display: none !important; }
  #cat-w .visible-xs{ display: block !important; }
  #cat-w .caret{ display: none !important; }

  /* Account / Wishlist / Basket Items im Mobil-Menü
     Layout exakt wie .mm-mainlink (Icon links, Text neben Icon, beide nach links rückend) */
  #cat-w .home-icon{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: var(--menu-row-h) !important;
    padding: var(--menu-pad-y) var(--menu-pad-x) !important;
    margin: 0 !important;
    color: var(--menu-text) !important;
    font-size: var(--menu-fz-1) !important;
    font-weight: var(--menu-fw-1) !important;
    text-decoration: none !important;
    background: transparent !important;
  }
  #cat-w .home-icon .dpflex-a-center{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Icon links - gleiche Größe & Margin wie Top-Level SVG-Icons (22px + 14px gap) */
  #cat-w .home-icon .img-ct,
  #cat-w .home-icon .icon{
    width: 22px !important;
    height: 22px !important;
    margin: 0 14px 0 0 !important;
    padding: 0 !important;
    flex: 0 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #cat-w .home-icon .img-ct svg,
  #cat-w .home-icon .icon svg{
    width: 22px;
    height: 22px;
    fill: var(--menu-text);
  }
  #cat-w .home-icon .text{
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.3;
  }

  /* ScrollLock fuer offenes Menue */
  body.shw-sb{ overflow: hidden; }
}

/* =========================================================
   10b) Per-Title-Icon Block - Top-Level Items mit SVG-Icons links
   ========================================================= */

#cat-w #cat-ul > li > a.mm-mainlink[title]::before{
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 14px;
  flex: 0 0 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/* Damit der Text nach dem Icon kommt, mainlink als flex */
#cat-w #cat-ul > li > a.mm-mainlink{
  display: flex !important;
  align-items: center !important;
}

/* Sportarten - Trophäe */
#cat-w #cat-ul > li > a.mm-mainlink[title="Sportarten"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>") !important;
}

/* Sportausrüstung - Sporttasche (umlaut-safe via prefix selector) */
#cat-w #cat-ul > li > a.mm-mainlink[title="Sportausrüstung"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[title^="Sportausr"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h18l-1 13H4L3 7Z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/><path d='M3 12h18'/></svg>") !important;
}

/* Sportbekleidung - T-Shirt */
#cat-w #cat-ul > li > a.mm-mainlink[title="Sportbekleidung"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/></svg>") !important;
}

/* Sportschuhe - Schuh */
#cat-w #cat-ul > li > a.mm-mainlink[title="Sportschuhe"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 18h20a0 0 0 0 1 0 0v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1Z'/><path d='M2 18v-4a2 2 0 0 1 2-2h2.5l3-7L13 7l4 1.5 5 1.5v8H2Z'/><path d='M9 12v6'/><path d='M13 7v8'/></svg>") !important;
}

/* Lifestyle - Sparkle */
#cat-w #cat-ul > li > a.mm-mainlink[title="Lifestyle"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4'/></svg>") !important;
}

/* Teamsport Serien - Personen */
#cat-w #cat-ul > li > a.mm-mainlink[title="Teamsport Serien"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>") !important;
}

/* Teamsportkataloge - Buch */
#cat-w #cat-ul > li > a.mm-mainlink[title="Teamsportkataloge"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>") !important;
}

/* Beflockung - Stempel */
#cat-w #cat-ul > li > a.mm-mainlink[title="Beflockung"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-3-3c-1.66 0-3 1-3 3 0 2 1 2 1 3.5V13'/><path d='M5 17h14v3a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-3z'/><path d='M5 17l1.5-3.5h11L19 17'/></svg>") !important;
}

/* Bundles - Box */
#cat-w #cat-ul > li > a.mm-mainlink[title="Bundles"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>") !important;
}

/* Unsere Top 24 - Stern */
#cat-w #cat-ul > li > a.mm-mainlink[title="Unsere Top 24"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>") !important;
}

/* SALE - Tag mit Prozent */
#cat-w #cat-ul > li > a.mm-mainlink[title="SALE"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[title="Sale"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[title="% SALE"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B02812' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/><line x1='15' y1='9' x2='9' y2='15'/><circle cx='10' cy='10' r='1'/><circle cx='14' cy='14' r='1'/></svg>") !important;
}

/* Geschenkideen - Geschenk */
#cat-w #cat-ul > li > a.mm-mainlink[title="Geschenkideen"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[title="Geschenkgutscheine"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>") !important;
}

/* Second Chance Deals - Refresh/Recycle */
#cat-w #cat-ul > li > a.mm-mainlink[title="Second Chance Deals"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 4 1 10 7 10'/><polyline points='23 20 23 14 17 14'/><path d='M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4-4.64 4.36A9 9 0 0 1 3.51 15'/></svg>") !important;
}

/* Teamshops - Storefront */
#cat-w #cat-ul > li > a.mm-mainlink[title="Teamshops"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 7h20l-2 5H4z'/><path d='M4 12v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-8'/><path d='M9 21v-6h6v6'/></svg>") !important;
}

/* Kundenservice - Headphones (auch via href-Fallback weil kein title-attr in linkgroup) */
#cat-w #cat-ul > li > a.mm-mainlink[title="Kundenservice"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[href*="Kundenservice"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[href*="kundenservice"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 18v-6a9 9 0 0 1 18 0v6'/><path d='M21 19a2 2 0 0 1-2 2h-1v-7h3z'/><path d='M3 19a2 2 0 0 0 2 2h1v-7H3z'/></svg>") !important;
}

/* Neu im Sortiment - Sparkle (href fallback) */
#cat-w #cat-ul > li > a.mm-mainlink[title="Neu im Sortiment"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[href*="neu-im-sortiment"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[href*="Neu-im-Sortiment"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3M12 18v3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M3 12h3M18 12h3M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1'/><circle cx='12' cy='12' r='3'/></svg>") !important;
}

/* Linkgroup-Items ohne title bekommen ::before damit Layout in der Flucht ist.
   Greift nur für Top-Level a.mm-mainlink WITHOUT title (linkgroup pages). */
#cat-w #cat-ul > li > a.mm-mainlink:not([title])::before{
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 14px;
  flex: 0 0 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Hersteller / Marken (Snackys megamenu-manufacturers) */
#cat-w #cat-ul > li > a.mm-mainlink[title*="Hersteller"]::before,
#cat-w #cat-ul > li > a.mm-mainlink[title*="Marken"]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' y1='7' x2='7.01' y2='7'/></svg>") !important;
}

/* Im offenen Submenu (Back-Header) Icon ausblenden, damit der Back-Caret Platz hat */
#cat-w li.open > a.mm-mainlink[title]::before{
  display: none !important;
}

/* =========================================================
   11) DESKTOP & TABLET Anpassungen
   Hauptnav-Dropper im .sd24-header__bottom bleibt unangetastet.
   Der Burger-Drawer #cat-w funktioniert auf allen Breakpoints
   identisch (Slide-in von rechts).
   ========================================================= */

/* Drawer breite responsiv. Auf Desktop 520px (überdeckt den Burger komplett). */
@media (min-width: 768px){
  #cat-w{
    --menu-drawer-w: 520px;
  }
}

/* Auf sehr kleinen Viewports volle Breite */
@media (max-width: 480px){
  #cat-w{
    --menu-drawer-w: 100vw;
  }
}

/* Hide footer of header below very small viewports (Dropper too crowded) */
@media (max-width: 550px) {
  .sd24-header__bottom {
    display: none !important;
  }
}

/* =========================================================
   12) Hard-Override Snackys Parent #cat-w Desktop Defaults
   (Snackys macht #cat-w auf Desktop zur horizontalen Top-Bar
    mit hover-Dropdowns - das wollen wir hier NICHT.)
   ========================================================= */
@media (min-width: 768px){
  /* Snackys parent setzt #cat-w sticky/relative + display:flex etc.
     Hier wieder right-transition statt transform. */
  body #cat-w,
  body #cat-w.sd24-mainnav,
  body[class] #cat-w{
    position: fixed !important;
    top: 0 !important;
    right: calc(-1 * var(--menu-drawer-w)) !important;
    left: auto !important;
    bottom: 0 !important;
    width: var(--menu-drawer-w) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    background: var(--menu-bg) !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 0 40px rgba(0,0,0,.18) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
  }
  body.shw-sb #cat-w{
    right: 0 !important;
    transform: none !important;
  }
  /* megamenu-fullscreen Stil deaktivieren */
  body #cat-w .mgm,
  body #cat-w.sd24-mainnav .mgm{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
  }
  /* Snackys Desktop Top-Bar Layout deaktivieren - cat-ul nicht mehr horizontal */
  body #cat-w #cat-ul,
  body #cat-w .mgm > ul.blanklist{
    display: block !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body #cat-w #cat-ul > li,
  body #cat-w .mgm > ul.blanklist > li{
    width: 100% !important;
    flex: none !important;
    background: transparent !important;
    position: relative !important;
  }
  /* Kein hover-Dropdown auf Desktop für #cat-w (Snackys parent slidet auf :hover hoch).
     Wir überschreiben das nur für LI ohne .open class. Open LI bleibt sichtbar. */
  body #cat-w li:not(.open).mgm-fw:hover > .dropdown-menu,
  body #cat-w li:not(.open).mgm-fw:focus-within > .dropdown-menu,
  body #cat-w li:not(.open).dropdown-multi:hover > .dropdown-menu,
  body #cat-w li:not(.open).dropdown-multi:focus-within > .dropdown-menu,
  body #cat-w li:not(.open).mgm-fw:hover > .mgm-c,
  body #cat-w li:not(.open).mgm-fw:focus-within > .mgm-c,
  body #cat-w .dropdown-style li:not(.open):hover > .dropdown-menu,
  body #cat-w .dropdown-style li:not(.open):focus-within > .dropdown-menu{
    right: calc(-1 * var(--menu-drawer-w)) !important;
    transform: none !important;
    opacity: 1 !important;
    transition: right var(--menu-trans) !important;
    transition-delay: 0s !important;
    visibility: hidden !important;
  }
  /* Open LI öffnet sein Submenü - höhere Spezifität als hover-Regeln */
  body #cat-w li.mgm-fw.open > .dropdown-menu,
  body #cat-w li.dropdown-style.open > .dropdown-menu,
  body #cat-w li.open.mgm-fw > .dropdown-menu,
  body #cat-w li.open > .dropdown-menu,
  body #cat-w li.open > .subsub,
  body #cat-w li.open:hover > .dropdown-menu,
  body #cat-w li.open:focus-within > .dropdown-menu{
    right: 0 !important;
    transform: none !important;
    visibility: visible !important;
  }
  /* Snackys Desktop Hover-Background entfernen */
  body #cat-w li.active .mm-mainlink,
  body #cat-w li:hover > .mm-mainlink,
  body #cat-w .dropdown-menu li.active > .mm-mainlink,
  body #cat-w .dropdown-menu li:hover > .mm-mainlink{
    background: transparent !important;
  }
  /* close-btn auf Desktop sichtbar lassen (falls Snackys es vorher versteckt) */
  body #cat-w .close-btn{
    display: inline-flex !important;
  }
  body #cat-w .menu-title{
    display: flex !important;
  }
  body #cat-w .fullscreen-title,
  body #cat-w #cat-ul > .fullscreen-title{
    display: none !important;
  }
  /* fa-caret-down (Pfeil-Buttons) auch auf Desktop sichtbar */
  body #cat-w .fa-caret-down,
  body #cat-w .fa-caret-down.visible-xs{
    display: flex !important;
  }
  body #cat-w .caret{
    display: none !important;
  }
}

/* =========================================================
   Service Bar (above sticky header)
   ========================================================= */

#sd24-servicebar {
  background: #0e0f12;
  color: #cfd1d6;
  font-size: 12.5px;
  border-bottom: 1px solid #1d1f24;
  width: 100%;
  margin-bottom: 1rem;
}

.sd24-servicebar__inner {
  max-width: calc(var(--wdt-pag) + 200px);
  margin: 0 auto;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2rem;
  flex-wrap: wrap;
}

.sd24-servicebar__inner span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sd24-servicebar__inner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--sd-primary);
}

.sd24-servicebar__inner b {
  color: #fff;
}

@media (max-width: 768px) {
    #sd24-servicebar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 0 !important;
  }

  #sd24-servicebar::-webkit-scrollbar {
    display: none;
  }

  .sd24-servicebar__inner {
    flex-wrap: nowrap;
    gap: 20px;
    padding: 8px 1rem;
    max-width: none;
    width: max-content;
    justify-content: flex-start;
    white-space: nowrap;
  }

  .sd24-servicebar__inner span {
    white-space: nowrap;
    flex-shrink: 0;
  }

    ._openConsentManagerButton_1xezp_748 {
    bottom: 70px !important;
    z-index: 31 !important;
}
  .dfd-chat-bubble {
    bottom: 70px !important;
  }
}