/* ==========================================================================
   menu.css · loaded on every page (main website and /3d)
   ========================================================================== */

/* --- Menu: compact dropdown cards ---------------------------------------
   Instead of a full-width panel that reached far down the page, every menu
   opens a small card right under its entry: icon, title, one line of text. */
@media (min-width: 60rem) {
  body.qptr .site-header .nav__item.has-menu { position: relative; }
  body.qptr .site-header .mega {
    position: absolute !important;
    top: 100% !important;
    left: -1rem !important;
    right: auto !important;
    width: max-content !important;
    max-width: min(46rem, calc(100vw - 2rem));
    padding-top: .5rem;
    background: transparent !important;
    border: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: translateY(6px);
    transition: opacity .22s ease, visibility .22s ease, transform .3s cubic-bezier(.16, 1, .3, 1) !important;
  }
  body.qptr .site-header .nav__item[data-open] > .mega,
  body.qptr .site-header .nav__item[data-hover] > .mega,
  body.qptr .site-header .nav__item:focus-within > .mega { transform: none; }
  body.qptr .site-header [data-nav-item='company'] .mega,
  body.qptr .site-header [data-nav-item='knowledge'] .mega { left: auto !important; right: -1rem !important; }
  body.qptr .site-header .mega__inner {
    display: grid !important;
    grid-template-columns: auto !important;
    gap: .25rem 1rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: .6rem !important;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 24px 60px -22px rgba(11, 23, 23, .32), 0 0 0 1px rgba(11, 23, 23, .06);
  }
  body.qptr .site-header .mega__cols { display: block !important; }
  body.qptr .site-header .mega__list,
  body.qptr .site-header .mega__list--vier {
    display: grid !important;
    grid-template-columns: minmax(19rem, 1fr) !important;
    gap: .15rem !important;
  }
  body.qptr .site-header [data-nav-item='usecases'] .mega__list { grid-template-columns: repeat(2, minmax(17rem, 1fr)) !important; }
  body.qptr .site-header [data-nav-item='services'] .mega__inner { grid-template-columns: auto auto !important; }

  body.qptr .site-header .mega__link,
  body.qptr .site-header .mega__ind {
    display: grid !important;
    grid-template-columns: 2.5rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    column-gap: .9rem !important;
    row-gap: .1rem !important;
    align-items: center;
    min-height: 0 !important;
    padding: .65rem .8rem !important;
    border: 0 !important;
    border-radius: .7rem;
    background: transparent !important;
    color: var(--schwarz) !important;
    transition: background-color .2s ease !important;
  }
  body.qptr .site-header .mega__link:hover,
  body.qptr .site-header .mega__link:focus-visible,
  body.qptr .site-header .mega__ind:hover,
  body.qptr .site-header .mega__ind:focus-visible { background: #f1f5f3 !important; }
  body.qptr .site-header .mega__icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin: 0 !important;
    justify-self: center;
    color: var(--schwarz) !important;
    opacity: 1 !important;
  }
  body.qptr .site-header .mega__link:hover .mega__icon,
  body.qptr .site-header .mega__ind:hover .mega__icon { color: var(--lila) !important; }
  body.qptr .site-header .mega__label,
  body.qptr .site-header .mega__ind-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    color: var(--schwarz) !important;
  }
  body.qptr .site-header .mega__hint,
  body.qptr .site-header .mega__ind-text {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-family: var(--font-primary) !important;
    font-size: .875rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    color: #0b1717a3 !important;
  }
  body.qptr .site-header .mega__ind-eyebrow { display: none !important; }

  /* Services: industries as a second column with one small heading */
  body.qptr .site-header .mega__industries {
    display: grid !important;
    grid-template-columns: minmax(17rem, 1fr) !important;
    align-content: start;
    gap: .15rem !important;
    padding-left: 1rem !important;
    border-left: 1px solid rgba(11, 23, 23, .08);
  }
  body.qptr .site-header .mega__industries::before {
    content: attr(data-label);
    padding: .5rem .8rem .35rem;
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: .8125rem;
    color: #0b1717a3;
  }
  body.qptr .site-header .mega__ind--critical { grid-column: auto !important; }

  /* Use cases: the overview link as a quiet last row */
  body.qptr .site-header .mega__feature {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    margin: .25rem 0 0 !important;
    padding: .75rem .8rem !important;
    background: transparent !important;
    border-top: 1px solid rgba(11, 23, 23, .08) !important;
    border-radius: 0 0 .7rem .7rem;
    color: var(--lila) !important;
  }
  body.qptr .site-header .mega__feature-eyebrow,
  body.qptr .site-header .mega__feature-title { display: none !important; }
  body.qptr .site-header .mega__feature-text { color: var(--lila) !important; font-size: .95rem !important; }
  body.qptr .site-header .mega__feature-text::after { content: " →"; }
  body.qptr .site-header .mega__feature:hover .mega__feature-text { text-decoration: underline; text-underline-offset: 3px; }
}

/* --- Opening a dropdown no longer turns the header black ------------------
   The main site switched the whole bar to its dark set while a menu was
   open. Now the bar keeps the look it had before: at the top of the
   homepage transparent with dark type. (On /3d the film part is handled by
   site.css, hence :not(.dt-over-film).) */
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-open]),
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-hover]) {
  --fg: var(--schwarz) !important;
  --fg-quiet: #0b1717a8 !important;
  --line: var(--line-on-light) !important;
  --line-soft: var(--line-on-light-soft) !important;
  --surface: var(--surface-on-light) !important;
  --accent: var(--schwarz) !important;
  --focus: var(--schwarz) !important;
  color: var(--schwarz) !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-open]) .nav__link,
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-hover]) .nav__link,
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-open]) .lang__item,
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-hover]) .lang__item { color: #0b1717b8 !important; }
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-open]) .nav__item:hover > .nav__link,
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-open]) .nav__item[data-open] > .nav__link,
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-hover]) .nav__item[data-hover] > .nav__link,
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-open]) .lang__item.is-current { color: var(--schwarz) !important; }
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-open]) .logo__word path,
body.qptr.page-home:not(.dt-over-film) .site-header:not(.is-solid):has([data-nav-item][data-hover]) .logo__word path { fill: currentColor !important; }

/* --- "Book a call": lila on hover, on every page ------------------------- */
html body.qptr .site-header .site-header__cta:hover,
html body.qptr .site-header .site-header__cta:focus-visible {
  background: var(--lila, #596dff) !important;
  color: var(--weiss, #fff) !important;
}

/* --- Between 64rem and 80rem the full menu does not fit next to the language
   switch and the call button: the burger menu takes over until 80rem. ----- */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  body.qptr .site-header .nav__list,
  body.qptr .site-header .site-header__meta { display: none !important; }
  body.qptr .site-header .site-header__toggle { display: inline-flex !important; }
  body.qptr .site-header .mobile:not([hidden]) { display: block !important; }
}
/* From 80rem the full menu (seven entries since qentin) fits with tighter
   spacing; from 90rem it gets its normal spacing back. */
@media (min-width: 80rem) and (max-width: 89.99rem) {
  body.qptr .site-header .site-header__inner { padding-inline: 3rem !important; }
  body.qptr .site-header .nav { margin-left: 1.25rem !important; }
  body.qptr .site-header .nav__list { gap: .75rem !important; }
}