/* ======================================== Mobiles Off-Canvas-Menue - Accordion (progressive Disclosure) -------------------------------------------------------------- Verhalten/Inject steuert js/mobile-menu.js. Hier die Optik + die Klapp-Mechanik via eigener .o2e-open-Klasse. Alles <=991px gescoped, damit das Desktop-Megamenue (>=992px) voellig unberuehrt bleibt. Hintergrund: die native Theme-Mechanik klappte am Level 0 die komplette Unterstruktur auf (~20 Eintraege); das Theme-Toggle (.open-children-toggle) wird ausgeblendet, wir besitzen das Accordion selbst. ======================================== */ @media (max-width: 991px) { /* Drawer: "Vollbreite"-Variante = 90vw + Scrim-Streifen (Material-Drawer). width immer 90vw; geschlossen komplett nach links (eigener Offset, da Theme-Default nur -336px schiebt). Offen setzt das Theme html.nav-open .nav-sections{left:0} -> bleibt erhalten. */ .nav-sections { width: 90vw !important; z-index: 1001 !important; } html:not(.nav-open) .nav-sections { left: -90vw !important; } /* X-Button oben rechts im Panel (Issue 2026-07-21: Menue liess sich oeffnen, aber schlecht schliessen - kein X, erneuter Hamburger-Klick traf haeufig den Drawer statt den Button). Absolut im Panel selbst positioniert (.nav-sections ist bereits position:fixed -> eigener Positionierungskontext), auf Hoehe der Tab-Leiste (71px, Vendor- _navigation.less) zentriert. !important-Riegel durchgaengig wie beim Filter-Sheet-Pendant .o2e-filtersheet-close: Porto gibt Buttons generisch Border/Flaeche/Hover-Hintergrund in Markenfarbe - !important gewinnt unabhaengig von der Spezifitaet des Hover-Selektors. */ .o2e-nav-close { position: absolute; top: 12px; right: 0; z-index: 2; /* ueber der Tab-Leiste (.nav-sections-items z-index:1, Vendor) */ display: inline-flex !important; align-items: center; justify-content: center; width: 48px !important; height: 48px !important; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; font-size: 28px !important; line-height: 1 !important; color: #2f2f2f !important; cursor: pointer; } /* Tab-Leiste: live gemessen (375px-Viewport) belegen die beiden Tabs "Menue"/"Konto" nur 2x112px von 338px Panelbreite - rechts ist fuer den 48px-X-Button bereits Platz, KEINE Breitenkorrektur noetig (.nav-sections-items umschliesst Tabs UND Inhalt; eine calc-Breite dort wuerde den gesamten Menue-Inhalt verschmaelern). */ /* Theme-Chevron (rechte 42px) raus - wir toggeln ueber die ganze Zeile. */ .nav-sections .navigation .open-children-toggle { display: none !important; } /* Schreibweise normalisieren (Default schrie in ALL-CAPS). */ .nav-sections .navigation a { text-transform: none !important; } /* Zeilen als komfortable Tap-Targets (>=48px), klare Trennlinien. */ .nav-sections .navigation li.level0 > a.level-top, .nav-sections .navigation li.level1 > a, .nav-sections .navigation li.level2 > a, .nav-sections .navigation li.o2e-view-all > a { display: flex !important; align-items: center; min-height: 48px; box-sizing: border-box; padding: 11px 16px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06); line-height: 1.35; } /* Progressive Einrueckung pro Ebene -> sichtbare Hierarchie. */ .nav-sections .navigation li.level1 > a { padding-left: 26px !important; } .nav-sections .navigation li.level2 > a { padding-left: 40px !important; } /* Typo-Hierarchie: die Hauptkategorie traegt die Zeile, nicht ihre Kinder. Vorher stand die Hierarchie Kopf: Level 0 kam als 13px/400 in Porto-Grau (#777, unter AA), waehrend die level1-Titel ihr DESKTOP-Megamenue-Styling (15px/700, ungegated weiter oben in dieser Datei) mit in den Drawer schleppten -> "Gruener Tee" schrie fetter als "Tee" selbst. Jetzt: 14px/600 Ink fuer Level 0, 14px/500 fuer level1 (Einrueckung + Chevron tragen die Ebene, das Gewicht muss es nicht), 13px/400 fuer level2. !important noetig, weil die Desktop- Megamenue-Regeln (15px/700 bzw. 13px/500) selbst !important tragen — gleiche Spezifitaet, diese Regeln stehen spaeter in der Datei und gewinnen deshalb. */ .nav-sections .navigation li.level0 > a.level-top { font-size: 14px !important; font-weight: 600 !important; color: #2f2f2f !important; } /* .submenu im Selektor ist KEINE Deko: die Desktop-Titel-Regel (.sw-megamenu.navigation .submenu li.level1 > a, weiter oben) traegt 4 Klassen — ohne .submenu verloere diese Regel den Spezifitaets- Vergleich (0,3,2 vs 0,4,2) trotz spaeterer Position. */ .nav-sections .navigation .submenu li.level1 > a { font-size: 14px !important; font-weight: 500 !important; color: #2f2f2f !important; } .nav-sections .navigation li.level2 > a { font-size: 13px !important; font-weight: 400 !important; color: #4a4a4a !important; } /* Aufgeklappte Eltern-Zeile in Markenfarbe (ersetzt Portos a:hover-Gruen, das die Ink-Regeln oben jetzt ueberstimmen wuerden): hoehere Spezifitaet durch .o2e-open -> gewinnt gegen die Basisregeln. */ .nav-sections .navigation li.level0.parent.o2e-open > a.level-top, .nav-sections .navigation li.level1.parent.o2e-open > a { color: var(--theme-color, #179c80) !important; } /* Klapp-Mechanik: alle Panels per Default zu, nur .o2e-open zeigt seine direkte naechste Ebene. !important schlaegt die Theme-Basisregeln (die das Submenu absolut/visibility-hidden positionieren). */ .nav-sections .navigation li.level0.parent > .submenu, .nav-sections .navigation li.level1.parent > ul.subchildmenu { display: none !important; } .nav-sections .navigation li.level0.parent.o2e-open > .submenu { display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important; width: auto !important; max-width: none !important; box-shadow: none !important; padding: 0 !important; /* Theme haelt das Submenu eingeklappt via height:0 + overflow:hidden (normal per .opened freigegeben - das wir bewusst nicht nutzen). Ohne diese drei Zeilen wird der Inhalt auf 1px weggeclippt. */ height: auto !important; max-height: none !important; overflow: visible !important; } .nav-sections .navigation li.level0.parent.o2e-open > .submenu .container { width: auto !important; max-width: none !important; padding: 0 !important; } .nav-sections .navigation li.level1.parent.o2e-open > ul.subchildmenu { display: block !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* Die Megamenue-Spaltenstruktur (Bootstrap .row + .mega-columns) ist fuer horizontale Desktop-Spalten gedacht und traegt im mobilen Block-Fluss keine Hoehe (Container kollabiert -> Hit-Test daneben). Mobil: alles als vollbreite, gestapelte Bloecke; Kategorie-Thumbnails (teils absolut positioniert) raus -> kein unsichtbarer Klick-Faenger. */ .nav-sections .navigation li.level0.parent.o2e-open > .submenu .row, .nav-sections .navigation li.level0.parent.o2e-open > .submenu > .container > .row > ul.subchildmenu { display: block !important; width: auto !important; margin: 0 !important; columns: auto !important; } .nav-sections .navigation .submenu li.level1, .nav-sections .navigation .submenu li.level2 { float: none !important; width: auto !important; display: block !important; } .nav-sections .navigation .submenu .menu-thumb-img { display: none !important; } /* Eigener Chevron nur an Eltern-Zeilen (Items MIT Kindern). Border-Dreieck in Markengruen, dreht beim Aufklappen. */ .nav-sections .navigation li.level0.parent > a.level-top::after, .nav-sections .navigation li.level1.parent > a::after { content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--theme-color, #179c80); border-bottom: 2px solid var(--theme-color, #179c80); transform: rotate(45deg); transition: transform 0.2s ease; } .nav-sections .navigation li.level0.parent.o2e-open > a.level-top::after, .nav-sections .navigation li.level1.parent.o2e-open > a::after { transform: rotate(-135deg); } /* Theme-Marker (graues "\203A" vor jeder Kategorie) raus -> nur unser gruener, rotierender Klapp-Chevron (::after) signalisiert Klappbarkeit; zwei Chevrons pro Zeile waeren redundant. Der "->"-Pfeil an "Alle anzeigen" (li.o2e-view-all > a::before) bleibt - andere Klasse. */ .nav-sections .navigation li.level0 > a.level-top::before, .nav-sections .navigation li.level1 > a::before, .nav-sections .navigation li.level2 > a::before, .nav-sections .navigation li:not(.parent) > a::before { display: none !important; } } /* ================================================================== Off-Canvas-Reiter "Menue | Konto" + Konto-Inhalt Befund 375px: Portos design.phtml fuellt die INAKTIVEN Reiter mit der Markenfarbe (weisse Schrift), der aktive ist transparent mit gruener Schrift - invertiert zur Erwartung: im Startzustand (Menue offen) wirkt "Konto" als gruener Block wie ausgewaehlt bzw. wie ein Knopf. Jetzt Unterstrich-Reiter: aktiv = Ink 600 + Icon in Markenfarbe + 3px Markenlinie; inaktiv = gedaempft (#6b6b6b, 4.9:1 auf #f6f6f6), keine Flaeche. Konto bekommt das Kopfzeilen-Konto-Glyph (porto-icons e91a) analog zum Menue-Glyph. Konto-Inhalt: Porto setzt #777/13px (4.1:1, unter AA) - Links jetzt in der Typo der Menue-Eintraege (14px/600 Ink, 16px Einzug); der Gruss ist kein Link mehr in Link-Optik, sondern leise Ueberschrift ohne Trennlinie. !important: design.phtml rendert inline und spaeter ([[porto-css-override-important]]). ================================================================== */ @media (max-width: 991px) { header.page-header .nav-sections-item-title { background-color: transparent !important; border: 0 !important; } header.page-header .nav-sections-item-title > a.nav-sections-item-switch { color: #6b6b6b !important; font-size: 14px; font-weight: 500; } header.page-header .nav-sections-item-title.active { box-shadow: inset 0 -3px 0 var(--theme-color, #179c80); } header.page-header .nav-sections-item-title.active > a.nav-sections-item-switch { color: #2f2f2f !important; font-weight: 600; } header.page-header .nav-sections-item-title.active > a.nav-sections-item-switch::before { color: var(--theme-color, #179c80); } header.page-header .nav-sections-item-title > a[href="#store.links"]::before { content: "\e91a"; font-family: "porto-icons"; font-size: 14px; margin-right: 5px; } .section-item-content[id="store.links"] li.greet.welcome { border-bottom: 0 !important; color: #6b6b6b !important; font-size: 13px; padding: 18px 16px 6px !important; } .section-item-content[id="store.links"] ul.header.links li > a { color: #2f2f2f !important; font-size: 14px !important; font-weight: 600; padding: 13px 16px !important; } } /* Desktop-Sicherung: .nav-sections ist ab 992px Portos sichtbares Desktop-Megamenue (kein verstecktes Off-Canvas-Panel mehr) - der von mobile-menu.js injizierte X-Button darf dort nicht auftauchen. */ @media (min-width: 992px) { .o2e-nav-close { display: none !important; } } /* @media(max-width:991px) hier geschlossen: der Checkout-Block laeuft bewusst Top-Level (sonst greift er nur mobil, nicht am Desktop). */