/** * 99WAVES – Mega-Menü auf Touch-Geräten: App-Style Drill-down. * * Die @media(hover:none)-Regeln greifen NUR auf Touch – Desktop bleibt beim * eingebauten Hover-Mega-Menü unverändert. Das eigentliche Drill-down-Markup * (.nw-drill …) baut das JS beim Öffnen; es existiert nur auf Touch, deshalb * brauchen dessen Regeln keine Media-Query. */ @media (hover: none) { /* Kein weißer Klick-Unterstrich beim Antippen der Kategorien. */ .pm-parent > a::after { display: none !important; } .pm-parent > a, .pm-parent > a:hover, .pm-parent > a:active, .pm-parent > a:focus { text-decoration: none !important; cursor: pointer; } /* Offene Kategorie dezent hervorheben (kein Pfeil, kein Unterstrich). */ .pm-parent.active > a { color: var(--color-sky, #7fd3ff) !important; } } /* ===== Portaliertes Panel (ans verschoben) ===== */ .pm-panel.nw-portaled { background: var(--color-blue, #021E3C) !important; color: #fff !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); -webkit-overflow-scrolling: touch; } /* ===== Drill-down ===== */ .nw-drill { overflow: hidden; } .nw-view { display: block; } .nw-view.nw-anim-r { animation: nw-slide-r .18s ease; } .nw-view.nw-anim-l { animation: nw-slide-l .18s ease; } @keyframes nw-slide-r { from { transform: translateX(10%); opacity: .35; } to { transform: none; opacity: 1; } } @keyframes nw-slide-l { from { transform: translateX(-10%); opacity: .35; } to { transform: none; opacity: 1; } } .nw-list { display: block; } /* Zeile (Link oder Verzweigung) */ .nw-drill .nw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 14px 20px; margin: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); background: transparent; color: #fff; font-family: inherit; font-size: 16px; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nw-drill .nw-row:active { background: rgba(255, 255, 255, .07); } .nw-drill .nw-row-label { flex: 1 1 auto; } /* "Alle … ansehen" – als Primär-Aktion abgesetzt */ .nw-drill .nw-row--all { color: var(--color-sky, #7fd3ff); font-weight: 600; } .nw-drill .nw-row--all .nw-row-label::after { content: "→"; margin-left: 8px; opacity: .8; } /* Chevron rechts (führt tiefer) */ .nw-drill .nw-chev { flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid rgba(255, 255, 255, .55); border-bottom: 2px solid rgba(255, 255, 255, .55); transform: rotate(-45deg); margin-right: 2px; } /* Zurück-Zeile oben */ .nw-drill .nw-back { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 20px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--color-sky, #7fd3ff); font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nw-drill .nw-back:active { background: rgba(255, 255, 255, .09); } .nw-drill .nw-back-chev { width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } /* Titel der aktuellen Ebene */ .nw-drill .nw-title { padding: 16px 20px 6px; font-size: 20px; font-weight: 700; color: #fff; } /* Abschnitts-Überschrift (z. B. Top Brands) */ .nw-drill .nw-head { padding: 20px 20px 8px; font-size: 15px; font-style: italic; color: var(--color-sky, #7fd3ff); }