/* Kopfleiste: so breit wie ihr Inhalt, zwei Produkte mit eigenem Menü (BOXY = Software, BOXY.S = Geräte).
 * Gilt für alle Seiten; überschreibt die Breite aus basis.css und index.html. */
.nav { width: max-content; max-width: calc(100% - 28px); }
.nav .menue { display: flex; }
.nav .menue > ul { display: flex; align-items: center; gap: 2px; margin: 0 6px; padding: 0; list-style: none; }
.nav .menue li { position: relative; }
.nav .menue .trenn { width: 1px; height: 22px; margin: 0 6px; background: color-mix(in srgb, var(--fg) 12%, transparent); }

/* Produktknöpfe: Marke oben, Art darunter – auf einen Blick zwei Produkte */
.mm-b { display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 11px; border: 0; border-radius: 10px; background: none; color: var(--fg); cursor: pointer; font: inherit; transition: background-color .2s; }
.mm-b:hover, .mm.auf .mm-b, .mm-b[aria-current="true"] { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.mm-b .mm-w { display: grid; text-align: left; line-height: 1.05; }
.mm-t { font: 700 12.5px var(--sans); letter-spacing: .09em; }
.mm-u { font: 500 10.5px var(--mono); color: var(--fg-3); margin-top: 2px; }
.mm-b svg { width: 10px; height: 10px; fill: none; stroke: var(--fg-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease, ease); }
.mm.auf .mm-b svg { transform: rotate(180deg); }

/* Menüfenster */
.mm-p { position: absolute; top: calc(100% + 12px); left: -6px; min-width: 300px; display: grid; gap: 2px; padding: 8px; border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 97%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-line, rgb(255 255 255 / .14)); box-shadow: 0 30px 60px -24px rgb(0 0 0 / .45);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .2s ease, transform .3s var(--ease, ease), visibility 0s .3s; }
.mm.auf .mm-p { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .35s var(--ease, ease), visibility 0s; }
@media (hover: hover) and (min-width: 881px) { .mm:hover .mm-p { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .35s var(--ease, ease), visibility 0s; } }
.nav .mm-p a { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 12px; text-decoration: none; white-space: normal; color: var(--fg); }
.nav .mm-p a:hover, .nav .mm-p a:focus-visible, .nav .mm-p a[aria-current="page"] { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.mm-p a i { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 7%, transparent); }
.mm-p a i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mm-p a b { font-size: 14px; font-weight: 600; }
.mm-p a span { font-size: 12.5px; color: var(--fg-3); }
.nav .mm-p a.mm-fuss { grid-template-columns: 1fr; padding-left: 12px; margin-top: 4px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); border-radius: 0 0 12px 12px; }
.mm-p .mm-fuss span { font: 500 12px var(--mono); }
.nav .menue > ul > li > a { padding: 6px 11px; }

/* Schmal: zweite Zeile, Menüfenster über die volle Leistenbreite (Bezug: .nav, nicht die scrollende Liste) */
@media (max-width: 880px) {
  .nav { width: calc(100% - 28px); }
  .nav .menue { order: 3; width: 100%; }
  .nav .menue > ul { width: 100%; margin: 0; justify-content: space-between; }
  .nav .menue .trenn { display: none; }
  .mm { position: static; }
  .mm-p { position: fixed; left: 0; right: 0; top: calc(100% + 8px); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .mm-p, .mm.auf .mm-p { transition: none; } }