/* ── MEGAMENU 3. EBENE (catalog/navigation/max_depth = 4) ── Die dritte Ebene erscheint nicht als Flyout zur Seite, sondern direkt in der Klapptafel unter ihrer Rubrik. Grund: bei bis zu 14 Rubriken je Hauptpunkt ist ein Flyout zu schmal zum Zielen, und der Kunde sieht das Sortiment ohne zweites Hovern. Nur Desktop - unter 768px bleibt das bestehende Akkordeon. */ @media (min-width: 768px) { /* Tafel ueber die volle Breite der Navigation. .navigation ist bereits position:relative (styles-l), das li muss dafuer static werden. box-sizing ist Pflicht: ohne border-box kaemen 26px Innenabstand links und rechts auf die 100% obendrauf, die Tafel waere 1494px breit und schoebe die Seite um 54px nach rechts (waagerechte Bildlaufleiste). */ .nav-sections .navigation .level0:has(ul.level1.submenu) { position: static !important; } .nav-sections .navigation .level0 > .submenu:has(ul.level1.submenu) { box-sizing: border-box !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; /* KEIN max-height: bei Mehrspalten-Satz wird ueberzaehliger Inhalt nicht gescrollt, sondern in weitere Spalten RECHTS umbrochen - die liefen aus der Seite heraus. Ohne Deckel waechst die Tafel einfach nach unten. */ overflow: visible !important; padding: 20px 24px 6px !important; border: 1px solid #dce3e8 !important; border-top: 3px solid #D82115 !important; box-shadow: 0 14px 30px rgba(1, 26, 59, .16) !important; transition: none !important; /* Mehrspalten-Satz mit vier Spalten - die einzige Verteilung, die hier stabil laeuft. grid und flex verteilen die Rubriken zwar sauberer auf alle vier Spalten, aber beide bringen den Renderer von Chrome zum Kreisen (gemessen 109-116% CPU, Seite tot). Ursache ist das Zusammenspiel mit dem Menue-Skript, das Groesse und Position der Tafel nachrechnet. */ columns: 260px 4; column-gap: 24px; } /* Jede Rubrik ist ein Block, der nie ueber den Spaltenumbruch zerrissen wird. */ .nav-sections .navigation .level0 > .submenu:has(ul.level1.submenu) > li.level1 { /* inline-block + break-inside:avoid = geschlossener Kasten, eine Rubrik wird nie ueber zwei Spalten zerrissen. */ display: inline-block; width: 100%; box-sizing: border-box; margin: 0 0 13px !important; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; background: transparent !important; } /* Rubrik-Ueberschrift = 2. Ebene */ .nav-sections .navigation .level0 > .submenu:has(ul.level1.submenu) > li.level1 > a { display: block !important; box-sizing: border-box; padding: 0 0 5px !important; margin: 0 0 6px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #011a3b !important; border-bottom: 1px solid #dce3e8; break-after: avoid; -webkit-column-break-after: avoid; page-break-after: avoid; } .nav-sections .navigation .level0 > .submenu:has(ul.level1.submenu) > li.level1:hover { background: transparent !important; } .nav-sections .navigation .level0 > .submenu:has(ul.level1.submenu) > li.level1 > a:hover { color: #D82115 !important; background: transparent !important; } /* 3. Ebene: immer offen, im Fluss, ohne eigenen Rahmen. display:block !important schlaegt das inline display:none, das die Breeze-Menuekomponente beim Start setzt. */ .nav-sections .navigation ul.level1.submenu { display: block !important; position: static !important; left: auto !important; top: auto !important; width: auto !important; min-width: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: none !important; columns: auto !important; } .nav-sections .navigation ul.level1.submenu:before { display: none !important; } .nav-sections .navigation ul.level1.submenu > li.level2 { margin: 0 !important; background: transparent !important; } .nav-sections .navigation ul.level1.submenu > li.level2 > a { display: block !important; padding: 1px 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; /* vorher #40525f (graublau) - auf hellem Grund zu schwach. #1d1d1f ist der Fliesstext-Ton, den das Theme auch auf der Artikelseite nutzt. */ color: #1d1d1f !important; } .nav-sections .navigation ul.level1.submenu > li.level2:hover, .nav-sections .navigation ul.level1.submenu > li.level2 > a:hover { background: transparent !important; } .nav-sections .navigation ul.level1.submenu > li.level2 > a:hover { color: #D82115 !important; text-decoration: underline; } /* KEINE Pfeile innerhalb der Tafel. Der Pfeil der 2. Ebene ist ein :after mit dem FontAwesome- Zeichen \f105 - und zwar position:static, also direkt hinter dem Wort im Textfluss. Bei langen Namen klebte er am Wort und sass auf der Trennlinie der Rubrik. Er zeigte auf ein Flyout, das es hier nicht mehr gibt, also faellt er weg. */ .nav-sections .navigation .level0 > .submenu:has(ul.level1.submenu) a:after, .nav-sections .navigation .level0 > .submenu:has(ul.level1.submenu) a:before, .nav-sections .navigation .level0 > .submenu:has(ul.level1.submenu) .ui-menu-icon { content: none !important; display: none !important; } } /* Die unsichtbare 10px-Bruecke rechts am Hauptpunkt half frueher beim Weg der Maus zur Klapptafel. Da das li jetzt static ist, rechnet sie vom ganzen