/* Mega-Menü nach dem Vorbild des ATE Store (06.11.2026). Gehört zu /static/js/mega-menu-store.js.
   Farben und Schriften der bisherigen Website bleiben: Navy #002649, Magenta var(--firstColor, #f90bf9), Rubik kursiv in Großbuchstaben. */
@media (min-width: 1200px) {
  .m-mega-menu.mmx-on .m-mega-menu__row { display: none !important; }
  .m-mega-menu.mmx-on { height: auto !important; max-height: var(--mmx-h, none); overflow: hidden; }
  .m-mega-menu.mmx-on.mmx-open { visibility: visible; opacity: 1; }
  .m-mega-menu.mmx-on .m-mega-menu__inner { position: relative; }

  .mmx {
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(250px, 320px) 1fr;
    padding: 44px 60px 52px 0;
    color: #fff;
    font-family: Roboto, sans-serif;
  }
  .mmx--flach { grid-template-columns: minmax(250px, 1fr) minmax(280px, 380px); }
  .mmx [hidden] { display: none !important; }

  .mmx__col {
    max-height: var(--mmx-col, calc(100vh - 220px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 28px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
  }
  .mmx__col--l1 { padding-left: 0; }
  .mmx__col + .mmx__col { border-left: 1px solid rgba(255, 255, 255, .14); }

  .mmx__kopf {
    font: italic 700 12px/1.4 Rubik, sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin: 0 0 12px;
    min-height: 17px;
  }

  .mmx__liste { list-style: none; margin: 0; padding: 0; }
  /* Viele Einträge ohne Unterpunkte (z. B. Linecard): Raster statt Spalten, damit die Liste nach unten scrollt statt abgeschnitten zu werden */
  .mmx--viele .mmx__col--l1 .mmx__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); column-gap: 24px; }
  .mmx__item { margin: 0; padding: 0; break-inside: avoid; }

  /* Spalte 1: Kategorien */
  a.mmx__l1 {
    position: relative;
    display: block;
    padding: 8px 30px 8px 14px;
    font: italic 700 14px/22px Rubik, sans-serif;
    letter-spacing: .34px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  a.mmx__l1.has-children::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(255, 255, 255, .55);
    border-top: 2px solid rgba(255, 255, 255, .55);
    transform: translateY(-50%) rotate(45deg);
  }
  a.mmx__l1:hover, a.mmx__l1:focus-visible, a.mmx__l1.is-active {
    background: rgba(255, 255, 255, .08);
    border-left-color: var(--firstColor, #f90bf9);
    color: #fff;
    outline: none;
  }
  a.mmx__l1.is-active::after { border-color: var(--firstColor, #f90bf9); }

  /* Spalte 2: Unterkategorien – leicht gedimmt, bis die Maus in der Spalte ist (wie im Store) */
  .mmx__col--l2 .mmx__liste--l2 { opacity: .6; transition: opacity .15s ease; }
  .mmx__col--l2.is-hot .mmx__liste--l2, .mmx__col--l2:hover .mmx__liste--l2, .mmx__col--l2:focus-within .mmx__liste--l2 { opacity: 1; }
  .mmx__col--l2 .mmx__item { padding: 5px 0; }
  .mmx__col--l2 a.mmx__l2 {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    font: italic 400 14px/20.4px Rubik, sans-serif;
    letter-spacing: .34px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
  }
  .mmx__col--l2 a.mmx__l2:hover, .mmx__col--l2 a.mmx__l2:focus-visible { color: var(--firstColor, #f90bf9); outline: none; }

  /* Spalte 3: Info */
  .mmx__col--info { padding-right: 0; }
  .mmx__info-titel {
    font: italic 700 22px/27px Rubik, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin: 0 0 10px;
  }
  /* Herstellerlogo: einheitliche weiße Karte im Format der Logo-Dateien (590 × 433) */
  .mmx__logo {
    width: 240px;
    aspect-ratio: 590 / 433;
    margin: 4px 0 16px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  }
  .mmx__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .mmx__info-zusatz { color: #fff; font-size: 16px; line-height: 1.5; margin: 0 0 14px; max-width: 520px; text-align: left; }
  .mmx__info-zusatz + .mmx__knopf { margin-top: 2px; }
  a.mmx__knopf {
    display: inline-block;
    margin: 6px 0 26px;
    padding: 11px 26px;
    border: 2px solid #fff;
    font: italic 700 14px/20px Rubik, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
  }
  a.mmx__knopf:hover, a.mmx__knopf:focus-visible { background: var(--firstColor, #f90bf9); border-color: var(--firstColor, #f90bf9); color: #fff; outline: none; }
  .mmx__intro { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .85); max-width: 520px; text-align: left; }
  .mmx__intro * { text-align: left !important; }
  .mmx__intro p { margin: 0 0 12px; color: inherit; font-size: inherit; line-height: inherit; }
  .mmx__intro a { color: #fff; text-decoration: underline; }
  a.mmx__alle {
    display: table; /* eigene Zeile, immer unter dem Knopf (auch ohne Einleitungstext) */
    clear: both;
    margin-top: 6px;
    padding-left: 35px;
    position: relative;
    font: italic 400 14px/20px Rubik, sans-serif;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
  }
  a.mmx__alle::before { content: ">>"; position: absolute; left: 0; color: var(--firstColor, #f90bf9); font-weight: 700; }
  a.mmx__alle:hover { color: var(--firstColor, #f90bf9); }

  @media (max-width: 1399.98px) {
    .mmx { padding: 40px 40px 48px 0; grid-template-columns: minmax(230px, 270px) minmax(230px, 290px) 1fr; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mmx * { transition: none !important; }
}

/* Knopf „> Im ATE-Store ansehen“ */
@media (min-width: 1200px) {
  .mmx__knopf-pfeil { color: var(--firstColor, #f90bf9); font-weight: 700; margin-right: 2px; }
  a.mmx__knopf:hover .mmx__knopf-pfeil, a.mmx__knopf:focus-visible .mmx__knopf-pfeil { color: #fff; }
}

/* ---- Laptop und kleine Monitore (06.11.2026) ---- */
@media (min-width: 1200px) {
  /* Hinweis, dass eine Spalte weiter nach unten scrollt */
  .mmx__col.is-mehr { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
}
/* Hauptnavigation: Schrift und Abstände mitwachsen lassen, kein Umbruch */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .m-header .m-header__main-navigation-link {
    font-size: clamp(14px, 1.12vw, 18px) !important;
    padding-left: clamp(9px, 1.05vw, 20px) !important;
    padding-right: clamp(9px, 1.05vw, 20px) !important;
    letter-spacing: clamp(.6px, .09vw, 1.5px) !important;
    white-space: nowrap;
  }
  .m-header .m-header__main-navigation-item { margin-left: clamp(2px, .4vw, 10px) !important; }
  .m-header .m-header__top-navigation-link { font-size: clamp(13px, 1vw, 16px) !important; }
  .mmx { padding-right: 32px; }
  .mmx__info-titel { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; }
}
/* Niedrige Bildschirme (Laptops 720–800 px Höhe) */
@media (min-width: 1200px) and (max-height: 860px) {
  .mmx { padding-top: 26px; padding-bottom: 26px; }
  .mmx__kopf { margin-bottom: 8px; }
  a.mmx__l1 { padding-top: 6px; padding-bottom: 6px; font-size: 13px; line-height: 19px; }
  .mmx__col--l2 .mmx__item { padding: 3px 0; }
  .mmx__col--l2 a.mmx__l2 { font-size: 13px; line-height: 18px; }
  .mmx__logo { width: 200px; margin-bottom: 12px; }
  .mmx__info-zusatz { font-size: 15px; margin-bottom: 10px; }
  a.mmx__knopf { margin: 4px 0 18px; padding: 9px 20px; }
  .mmx__intro { font-size: 14px; }
}
@media (min-width: 1200px) and (max-height: 700px) {
  .mmx { padding-top: 18px; padding-bottom: 18px; }
  a.mmx__l1 { padding-top: 4px; padding-bottom: 4px; }
  .mmx__intro { display: none; }
  .mmx__logo { width: 160px; }
}