/* WSK Dynamische Megamenüs 1.4 – kompaktes Layout */
.wsk-mm{--wsk-orange:#e75303;--wsk-orange-dark:#ac3b00;--wsk-ink:#303030;--wsk-muted:#5f5f5f;--wsk-line:#ece9e5;--wsk-soft:#f7f6f3;box-sizing:border-box;width:100%;max-width:none;margin:0 auto;background:#fff;color:var(--wsk-ink);font-family:inherit;font-size:14px;line-height:1.5;text-align:left;border:1px solid #e9e7e4;border-top:3px solid var(--wsk-orange);border-radius:0 0 12px 12px;overflow:hidden}
.wsk-mm *{box-sizing:border-box}
.wsk-mm a{color:inherit;text-decoration:none;text-transform:none;letter-spacing:normal;white-space:normal}
.wsk-mm a:focus-visible{outline:2px solid var(--wsk-orange);outline-offset:2px;border-radius:2px}
.wsk-mm h3{text-transform:none}

/* Aufbau: schmale Hero-Spalte links, Kategorien rechts */
.wsk-mm .wsk-mm-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;padding:24px 28px}
.wsk-mm .wsk-mm-main{min-width:0;display:flex;flex-direction:column;gap:20px}

/* Hero */
.wsk-mm .wsk-mm-hero{display:flex;flex-direction:column;align-items:flex-start;align-self:start;position:relative;overflow:hidden;padding:22px 20px 20px;border-radius:8px;background:radial-gradient(ellipse at 100% 75%,#62615d 0,transparent 65%),#343434;color:#fff;min-width:0}
.wsk-mm .wsk-mm-tag{font-size:9px;letter-spacing:1.5px;color:#ffc3a2;font-weight:700;line-height:1.4}
.wsk-mm .wsk-mm-hero h3{color:#fff;font-size:27px;line-height:1.1;letter-spacing:-.6px;font-weight:750;margin:12px 0 10px}
.wsk-mm .wsk-mm-hero p{font-size:13px;line-height:1.6;color:#e3e0dd;margin:0}
.wsk-mm .wsk-mm-art{width:100%;margin:10px 0 12px}
.wsk-mm .wsk-mm-art img{display:block;width:100%;height:auto;max-width:220px;max-height:130px;object-fit:contain;margin:auto}
.wsk-mm .wsk-mm-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:var(--wsk-orange);border-radius:4px;color:#fff;padding:11px 14px;font-size:12.5px;font-weight:750}
.wsk-mm .wsk-mm-button:hover{background:#bf4300;color:#fff}
.wsk-mm-area-werbeartikel .wsk-mm-hero{background:radial-gradient(ellipse at 100% 80%,#705842,transparent 70%),#343434}
.wsk-mm-area-werbetechnik .wsk-mm-hero{background:radial-gradient(ellipse at 100% 80%,#445966,transparent 70%),#303538}
.wsk-mm-area-druckprodukte .wsk-mm-hero{background:radial-gradient(ellipse at 100% 80%,#695c64,transparent 70%),#343134}
.wsk-mm-area-teamsport .wsk-mm-hero{background:radial-gradient(ellipse at 100% 80%,#3f6150,transparent 70%),#2f3431}
.wsk-mm-area-kataloge .wsk-mm-hero{background:radial-gradient(ellipse at 100% 80%,#676653,transparent 70%),#363630}

/* Schnellzugriff für Kategorien ohne Unterkategorien */
.wsk-mm .wsk-mm-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 0 18px;border-bottom:1px solid var(--wsk-line)}
.wsk-mm .wsk-mm-quick-label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#8a8580;margin-right:4px}
.wsk-mm .wsk-mm-quick a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #e4e0da;border-radius:999px;background:var(--wsk-soft);font-size:12.5px;font-weight:600;line-height:1.3}
.wsk-mm .wsk-mm-quick a:hover{border-color:#f0c9ae;background:#fff5ed;color:var(--wsk-orange-dark)}

/* Kategoriegruppen fließen spaltenweise – keine leeren Lücken durch unterschiedlich lange Listen */
.wsk-mm .wsk-mm-categories{column-width:200px;column-gap:32px;column-fill:balance}
.wsk-mm-fit-fixed .wsk-mm-categories{column-width:auto;column-count:3}
.wsk-mm-fit-fixed.wsk-mm-cols-2 .wsk-mm-categories{column-count:2}
.wsk-mm-fit-fixed.wsk-mm-cols-4 .wsk-mm-categories{column-count:4}
.wsk-mm-fit-fixed.wsk-mm-cols-5 .wsk-mm-categories{column-count:5}
.wsk-mm .wsk-mm-group{display:inline-block;width:100%;break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 22px;min-width:0}
.wsk-mm .wsk-mm-group h3{font-size:14.5px;font-weight:750;line-height:1.35;color:var(--wsk-ink);margin:0 0 6px;padding:0 0 7px;border-bottom:2px solid var(--wsk-line);letter-spacing:-.1px}
.wsk-mm .wsk-mm-group h3 a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;overflow-wrap:anywhere}
.wsk-mm .wsk-mm-group h3 span{flex:0 0 auto;font-size:14px;color:var(--wsk-orange);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.wsk-mm .wsk-mm-group h3 a:hover{color:var(--wsk-orange-dark)}
.wsk-mm .wsk-mm-group h3 a:hover span,.wsk-mm .wsk-mm-group h3 a:focus-visible span{opacity:1;transform:none}
.wsk-mm .wsk-mm-group:hover h3{border-bottom-color:#f3c7aa}

.wsk-mm ul.wsk-mm-links{display:block;list-style:none!important;margin:0!important;padding:0!important;position:static;box-shadow:none;border:0;width:auto;min-width:0;background:none}
.wsk-mm .wsk-mm-links li{display:block;list-style:none!important;margin:0!important;padding:0!important;border:0;float:none;width:auto}
.wsk-mm .wsk-mm-links li>a{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:4px 0!important;margin:0;border:0!important;font-size:13px;font-weight:400;line-height:1.45;color:var(--wsk-muted);overflow-wrap:anywhere}
.wsk-mm .wsk-mm-links li>a:hover{color:var(--wsk-orange-dark)}
.wsk-mm ul.wsk-mm-links ul.wsk-mm-links{padding-left:12px!important;border-left:1px solid #eee;margin:2px 0 6px!important}
.wsk-mm .wsk-mm-more{display:inline-block;margin-top:4px;padding:3px 0;font-size:12px;font-weight:700;color:var(--wsk-orange-dark)}
.wsk-mm .wsk-mm-more:hover{text-decoration:underline;text-underline-offset:3px}
.wsk-mm .wsk-mm-count{flex:0 0 auto;font-size:11px;font-weight:600;color:#9a958f;font-variant-numeric:tabular-nums}

/* Bereiche ohne Unterkategorien (z. B. Teamsport): kompaktes Kachelraster */
.wsk-mm ul.wsk-mm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;list-style:none!important;margin:0!important;padding:0!important}
.wsk-mm-fit-fixed.wsk-mm-cols-2 ul.wsk-mm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.wsk-mm-fit-fixed.wsk-mm-cols-3 ul.wsk-mm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.wsk-mm-fit-fixed.wsk-mm-cols-4 ul.wsk-mm-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.wsk-mm-fit-fixed.wsk-mm-cols-5 ul.wsk-mm-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.wsk-mm .wsk-mm-tiles li{list-style:none!important;margin:0!important;padding:0!important}
.wsk-mm .wsk-mm-tiles a{display:flex;align-items:center;gap:10px;height:100%;min-height:46px;padding:11px 14px;border:1px solid #ebe8e3;border-radius:7px;background:var(--wsk-soft);font-size:13.5px;font-weight:650;line-height:1.3;color:var(--wsk-ink)}
.wsk-mm .wsk-mm-tile-name{flex:1 1 auto;min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.wsk-mm .wsk-mm-tile-arrow{flex:0 0 auto;color:var(--wsk-orange);opacity:.45;transition:opacity .15s,transform .15s}
.wsk-mm .wsk-mm-tiles a:hover{background:#fff5ed;border-color:#f0c9ae;color:var(--wsk-orange-dark)}
.wsk-mm .wsk-mm-tiles a:hover .wsk-mm-tile-arrow{opacity:1;transform:translateX(2px)}

/* 1.5: Top-Marken */
.wsk-mm .wsk-mm-brands{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:auto;padding-top:18px;border-top:1px solid var(--wsk-line)}
.wsk-mm .wsk-mm-brands ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none!important;margin:0!important;padding:0!important}
.wsk-mm .wsk-mm-brands li{list-style:none!important;margin:0!important;padding:0!important}
.wsk-mm .wsk-mm-brand{display:inline-flex;align-items:center;justify-content:center;min-width:92px;min-height:40px;padding:8px 16px;background:#fff;border:1px solid #dcd7d0;border-radius:6px;font-size:13.5px;font-weight:750;letter-spacing:.1px;color:var(--wsk-ink);box-shadow:0 1px 0 rgba(0,0,0,.03);transition:border-color .15s,color .15s,box-shadow .15s}
.wsk-mm .wsk-mm-brand:hover{border-color:var(--wsk-orange);color:var(--wsk-orange-dark);box-shadow:0 2px 8px rgba(231,83,3,.12)}
.wsk-mm .wsk-mm-brand-logo{padding:6px 14px}
.wsk-mm .wsk-mm-brand-logo img{display:block;height:24px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .15s,opacity .15s}
.wsk-mm .wsk-mm-brand-logo:hover img{filter:none;opacity:1}

/* Kataloge */
.wsk-mm .wsk-mm-catalogs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.wsk-mm-fit-fixed.wsk-mm-cols-2 .wsk-mm-catalogs{grid-template-columns:repeat(2,minmax(0,1fr))}
.wsk-mm-fit-fixed.wsk-mm-cols-3 .wsk-mm-catalogs{grid-template-columns:repeat(3,minmax(0,1fr))}
.wsk-mm-fit-fixed.wsk-mm-cols-4 .wsk-mm-catalogs{grid-template-columns:repeat(4,minmax(0,1fr))}
.wsk-mm .wsk-mm-catalog{min-width:0;background:var(--wsk-soft);border:1px solid #eae7e1;border-radius:7px;padding:16px}
.wsk-mm .wsk-mm-catalog:focus-within,.wsk-mm .wsk-mm-catalog:hover{background:#fff5ed;border-color:#f0c9ae}
.wsk-mm .wsk-mm-catalog h3{font-size:15px;font-weight:750;line-height:1.35;margin:0 0 4px;color:var(--wsk-ink)}
.wsk-mm .wsk-mm-catalog h3 a{display:flex;justify-content:space-between;gap:8px;min-width:0;overflow-wrap:anywhere}
.wsk-mm .wsk-mm-catalog h3 span{flex:0 0 auto;color:var(--wsk-orange)}
.wsk-mm .wsk-mm-format{display:block;color:#8c4d25;font-size:9px;font-weight:700;letter-spacing:1.3px;margin-bottom:8px}
.wsk-mm .wsk-mm-group-all{display:inline-flex;gap:8px;font-size:11.5px;font-weight:700;color:var(--wsk-orange-dark);margin-top:4px;padding:3px 0}
.wsk-mm .wsk-mm-group-all:hover{text-decoration:underline}
.wsk-mm .wsk-mm-catalog-preview{display:flex;align-items:center;justify-content:center;height:150px;margin:0 0 14px;padding:8px;background:#fff;border:1px solid var(--wsk-line);border-radius:5px;overflow:hidden}
.wsk-mm .wsk-mm-catalog-preview img{display:block;width:100%;height:100%;max-height:134px;object-fit:contain;object-position:center}
.wsk-mm .wsk-mm-catalog-preview:hover{border-color:var(--wsk-orange)}

.wsk-mm .wsk-mm-empty{padding:22px;border:1px solid #eae7e1;border-radius:8px;background:#faf9f7}
.wsk-mm .wsk-mm-empty h3{font-size:20px;color:var(--wsk-ink);margin:0 0 6px}
.wsk-mm-note{padding:15px;border:1px solid #e75303}
.wsk-mm .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Fußzeile mit Übersichtslink */
.wsk-mm .wsk-mm-footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;background:#f7f6f4;padding:12px 28px;border-top:1px solid var(--wsk-line);font-size:11.5px;color:#62605c}
.wsk-mm .wsk-mm-footer i{color:#a84004;font-style:normal;margin-right:5px}
.wsk-mm .wsk-mm-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-left:auto}
.wsk-mm .wsk-mm-footer-links a{font-weight:700;color:#343434}
.wsk-mm .wsk-mm-footer-links a:hover{color:var(--wsk-orange-dark)}
.wsk-mm .wsk-mm-footer .wsk-mm-all{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:5px;background:#fff;border:1px solid #e4e0da;font-size:12.5px}
.wsk-mm .wsk-mm-footer .wsk-mm-all:hover{border-color:#f0c9ae;background:#fff5ed}

/* Tablet */
@media(max-width:1000px){
  .wsk-mm .wsk-mm-body{grid-template-columns:200px minmax(0,1fr);gap:22px;padding:20px}
  .wsk-mm .wsk-mm-hero{padding:18px 16px}
  .wsk-mm .wsk-mm-hero h3{font-size:23px}
  .wsk-mm-fit-fixed .wsk-mm-categories,.wsk-mm .wsk-mm-categories{column-count:auto;column-width:180px;column-gap:24px}
}
/* Smartphone */
@media(max-width:600px){
  .wsk-mm .wsk-mm-body{display:flex;flex-direction:column;padding:16px;gap:18px}
  .wsk-mm .wsk-mm-hero{padding:18px}
  .wsk-mm .wsk-mm-hero h3{font-size:23px;margin:8px 0}
  .wsk-mm .wsk-mm-art{display:none}
  .wsk-mm .wsk-mm-button{margin-top:14px;max-width:280px}
  .wsk-mm .wsk-mm-categories{column-width:150px;column-gap:18px}
  .wsk-mm .wsk-mm-links li>a{padding:8px 0!important}
  .wsk-mm ul.wsk-mm-tiles,.wsk-mm-fit-fixed ul.wsk-mm-tiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:6px}
  .wsk-mm .wsk-mm-tiles a{padding:10px 12px;font-size:13px}
  .wsk-mm .wsk-mm-tile-arrow{display:none}
  .wsk-mm .wsk-mm-catalogs,.wsk-mm-fit-fixed .wsk-mm-catalogs{grid-template-columns:1fr!important}
  .wsk-mm .wsk-mm-brand{min-width:0;min-height:40px;padding:8px 13px}
  .wsk-mm .wsk-mm-footer{padding:14px 16px}
  .wsk-mm .wsk-mm-footer-links{margin-left:0;width:100%}
}
@media(max-width:360px){.wsk-mm .wsk-mm-categories{column-count:1}}
@media(prefers-reduced-motion:reduce){.wsk-mm *{transition:none!important}}

/* 1.2: Full-Width-Dropdown, kein interner Scrollbereich. */
.nav-dropdown.wsk-mm-wide{box-sizing:border-box;max-height:none!important;overflow:visible!important;padding:0!important}
.nav-dropdown.wsk-mm-wide>.container,.nav-dropdown.wsk-mm-wide>.row{width:100%;max-width:none;margin-left:0;margin-right:0}

/* 1.3.3: nur das geöffnete Panel verlässt den Sticky Header, nie der Header selbst. */
@media(min-width:850px){
  #header .wsk-mm-detached>.nav-dropdown{display:none!important}
  /* 1.4.1: Theme-Hover-Dropdown ausblenden; geöffnet wird erst nach der Verweildauer. */
  #header .wsk-mm-item>.nav-dropdown{display:none!important}
  .wsk-mm-document-panel{position:absolute!important;display:block!important;box-sizing:border-box;left:16px;top:0;margin:0!important;padding:0!important;max-width:none!important;max-height:none!important;overflow:visible!important;z-index:29;text-align:left;box-shadow:0 7px 20px rgba(0,0,0,.13)}
  .wsk-mm-document-panel>.wsk-mm{width:100%;max-width:none;margin:0}
}

/* 1.7: gemeinsame Bildsprache für sechs Produktwelten; Desktop-Steuerung unverändert. */
@media(min-width:850px){
  .wsk-mm{--wsk-ink:#292b2b;--wsk-muted:#62635f;--wsk-line:#e9e6e0;background:#fdfcf9;border:1px solid #e9e6e0;border-top:3px solid #e75303;border-radius:0 0 18px 18px}
  .wsk-mm .wsk-mm-body{gap:30px;padding:28px;grid-template-columns:250px minmax(0,1fr)}
  .wsk-mm .wsk-mm-hero{padding:26px 22px 22px;border-radius:14px;background:radial-gradient(ellipse at 90% 75%,#65513e 0,transparent 68%),#292d2d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .wsk-mm .wsk-mm-tag{font-size:9px;letter-spacing:1.6px;color:#ffc49e}
  .wsk-mm .wsk-mm-hero h3{font-size:32px;line-height:1.08;letter-spacing:-.9px;margin:16px 0 12px}
  .wsk-mm .wsk-mm-hero p{font-size:13px;line-height:1.65;color:#e4e2db}
  .wsk-mm .wsk-mm-art{margin:20px -8px 18px;width:calc(100% + 16px)}
  .wsk-mm .wsk-mm-art img{max-width:240px;max-height:160px;filter:drop-shadow(0 12px 10px rgba(0,0,0,.16))}
  .wsk-mm .wsk-mm-button{padding:13px 14px;border-radius:7px;background:#bd4100;line-height:1.4;box-shadow:0 4px 12px rgba(0,0,0,.12)}
  .wsk-mm .wsk-mm-button:hover{background:#a53700}
  .wsk-mm .wsk-mm-group{margin-bottom:24px}
  .wsk-mm .wsk-mm-group h3{font-size:15px;letter-spacing:-.2px;border-bottom:1px solid #dedbd5;padding-bottom:10px;margin-bottom:8px}
  .wsk-mm .wsk-mm-group h3 span{opacity:.7;transform:none}
  .wsk-mm .wsk-mm-links li>a{padding:5px 0!important;line-height:1.5}
  .wsk-mm .wsk-mm-tiles a{min-height:52px;background:#fff;border-color:#e8e5df;border-radius:9px}
  .wsk-mm .wsk-mm-catalog{background:#fff;border-radius:10px;padding:18px}
  .wsk-mm .wsk-mm-catalog-preview{border:0;background:#f6f4ee;border-radius:7px}
  .wsk-mm .wsk-mm-brand{border-radius:6px;border-color:#e5e1da;box-shadow:none;font-size:13px}
  .wsk-mm .wsk-mm-footer{background:#f2f0eb;padding:14px 28px;border-top:1px solid #e7e3dc}
  .wsk-mm .wsk-mm-footer .wsk-mm-all{border-radius:6px;background:#fff}
}
@media(min-width:850px) and (max-width:1100px){
  .wsk-mm .wsk-mm-body{grid-template-columns:210px minmax(0,1fr);gap:24px;padding:22px}
  .wsk-mm .wsk-mm-hero{padding:22px 18px}
  .wsk-mm .wsk-mm-hero h3{font-size:28px}
}