/* VP Megamenue (NIU Menu Builder) - erzeugt von css_bauen.py, Stand 29.09.2026. Farben nur ueber Theme-2.0-Variablen. Alles erst ab 992px (Desktop); das Handy-Menue (Seitenleiste) bleibt unberuehrt. */ @media (min-width:992px){ /* Schrift im Menue: unser Anthrazit #4D4D4D (Styleguide), NICHT --niu-nav-text: das steht seit Theme 2.0 auf #262626 und wirkt schwarz (Anja 30.09.2026) */ #mainNavigation{--vp-anthrazit:#4D4D4D} #mainNavigation .niu-header-nav > .nav-item > a{color:var(--vp-anthrazit)} #mainNavigation .niu-nav-dropdown .nav-link,#mainNavigation .niu-nav-dropdown .submenu-headline{color:var(--vp-anthrazit)} /* Hauptleiste: eine Zeile, Abstand waechst mit der Breite */ #mainNavigation .niu-header-nav > .nav-item > a{padding-left:clamp(.4rem,.8vw,.9rem)!important;padding-right:clamp(.4rem,.8vw,.9rem)!important;white-space:nowrap} /* Live rendert der Builder die Hauptpunkte OHNE .nav-link (nur dropdown-toggle), Punkte ohne Aufklappmenue (Neu, Gravur, Sale) stehen dann inline und rutschen eine Zeile tiefer (30.09.2026) */ #mainNavigation .niu-header-nav > .nav-item > a{display:flex;align-items:center;padding-bottom:.75rem!important} /* Luft ueber und unter den Punkten je 12 px (Anja 01.10.2026: "zu knapp", in der festen Leiste "viel zu schmal") - dauerhaft, nicht nur beim Scrollen, sonst springt die Seite beim Umschalten. Oben zugleich Platz fuer die Neu-Flaeche: die Leiste schneidet ab, was darueber ragt */ #mainNavigation .niu-header-nav{padding-top:.75rem} /* Feste Leiste beim Scrollen: NIU schiebt den Kopf per translateY(-…) nach oben weg - daran haengen Schatten und Home-Knopf (Favicon links, Link auf die Startseite) */ #jtl-nav-wrapper[style*="translateY(-"]{box-shadow:0 2px 8px rgba(77,77,77,.08)} /* Anker ist die Kopfzeile (sticky), NICHT #mainNavigation: die traegt overflow:hidden, und mit position:relative dort schnitt sie das ganze Aufklappmenue weg (live 01.10.2026, sofort behoben). bottom 6px = mittig in der 46-px-Leiste */ #mainNavigation .niu-header-nav > .nav-item:has(> a.vp-home){position:absolute;left:16px;bottom:6px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s} /* erst ab 1100 px: darunter ist links neben "Neu" kein Platz (992 px: 2 px frei, 1024: 19, 1280: 146; gemessen live 01.10.2026), das Favicon laege auf dem ersten Punkt */ @media (min-width:1100px){#jtl-nav-wrapper[style*="translateY(-"] #mainNavigation .niu-header-nav > .nav-item:has(> a.vp-home){opacity:1;visibility:visible}} #mainNavigation .niu-header-nav > .nav-item > a.vp-home{padding:0!important;width:34px;height:34px;font-size:0;color:transparent;background:url(/favicon.svg) center/contain no-repeat} #mainNavigation .niu-header-nav > .nav-item > a.vp-home *{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} #mainNavigation .niu-header-nav > .nav-item > a.vp-home::after{display:none!important} /* NIU blendet Scroll-Pfeile (je 40 px) ein - die Leiste passt ohne; mit Pfeilen brach sie bei 1024 px um (881 statt 961 px Platz, gemessen live 30.09.2026) */ #mainNavigation .niu-nav-scroller-arrow{display:none!important} /* NIU laesst jede Spalte einzeln einfahren (fadeInUp 0,35 s, je 0,05 s versetzt) - bei 13 Spalten fast eine Sekunde, „zoegerlich von links nach rechts" (Anja 30.09.2026): Menue sofort ganz da */ #mainNavigation .niu-sub-ani{animation:none!important} /* Der Schleier beim Aufklappen (.modal-backdrop, z 1020) liegt ueber der rosa Leiste oben, weil sie ausserhalb der Kopfzeile steht (DZM-Section vor #jtl-nav-wrapper) - Leiste darueber legen */ body > .dzm-section-wrapper:has(~ #jtl-nav-wrapper){position:relative;z-index:1021} /* Notnetz fuer Uebersetzung und Browserzoom: lieber zwei Zeilen als aus dem Rand laufen, und lange Kachelnamen in jedem Band trennen (Test 30.09.2026: Texte +40 %, Schrift 120 %) */ #mainNavigation .niu-header-nav{flex-wrap:wrap} #mainNavigation .vp-icon-link.nav-item .nav-link{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere} /* Neu: Rose als Flaeche (Styleguide: Rose nie als Schrift), dunkle Schrift wie der Primaerknopf */ /* Neu: Flaeche per Innenabstand, der Text bleibt auf der Grundlinie der anderen Punkte - vorher sass er 2 px tiefer (Anja 30.09.: "tanzt aus der Reihe") */ #mainNavigation .niu-header-nav > .nav-item > a.vp-nav-neu .nav-mobile-heading{background:var(--primary);border-radius:.375rem;padding:.15rem .6rem;margin:-.15rem -.15rem;display:inline;box-decoration-break:clone} #mainNavigation .niu-header-nav > .nav-item > a.vp-nav-akzent{font-weight:600;color:var(--vp-anthrazit)} #mainNavigation .niu-header-nav > .nav-item > a.vp-nav-sale{font-weight:600;color:var(--niu-accent1)} #mainNavigation .niu-header-nav > .nav-item:has(> .vp-nav-akzent){border-left:1px solid var(--niu-nav-border);margin-left:.5rem;padding-left:.5rem} /* Pfeil statt "+" im Ruhezustand (Anja 29.09.); geoeffnet bleibt das NIU-"x" (+ um 45 Grad gedreht) */ #mainNavigation .niu-header-nav > .nav-item:not(.show) > .dropdown-toggle::after{content:""!important;width:0;height:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.35em solid currentColor;margin-left:.4em;vertical-align:.18em;opacity:.7;transform:none!important} /* Aufklappmenue: eigene Flaeche und Schatten aus dem Theme, Namen umbrechen statt abschneiden */ #mainNavigation .niu-nav-dropdown{background:var(--niu-nav-bg);box-shadow:0 14px 28px var(--niu-nav-shadow);border-top:1px solid var(--niu-nav-border)} #mainNavigation .niu-nav-dropdown .text-truncate{white-space:normal;overflow:visible;text-overflow:clip} /* Aufklappmenue: Raster */ #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row{display:grid!important;position:relative;margin:0;padding:24px 0 16px;column-gap:2.25rem;row-gap:0;grid-auto-rows:min-content;align-content:start} #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col{max-width:none;width:auto;flex:none;padding:0;margin:0!important} /* Kategorien fest in Spalte 1; die Zusatzspalten laufen ueber ALLE Zeilen (grid-row 1 / -1). Das Menue waechst mit seinem Inhalt, und alle gerahmten Kaesten enden an derselben Linie - ohne geschaetzte Hoehen, also auch uebersetzt, gezoomt oder mit groesserer Schrift (Anja 30.09.2026) */ #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col:not(.dropdown){grid-column:1} #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col.dropdown:not(.d-lg-none){position:static;grid-row:1 / -1;align-self:start} /* Gerahmte Kaesten: so hoch wie ihr Inhalt; nur wo ein Menue ZWEI Kaesten hat, strecken sie sich auf die gemeinsame Hoehe (Regel je Menue) - ein einzelner Kasten wuerde sonst bis zur Unterkante der Kategorieliste reichen und unten leer stehen (Anja 30.09.2026) */ #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col.dropdown:has(> span > .vp-spalte-merkmal){padding-bottom:.75rem!important} /* Kopf der Kategorieliste: der Handy-Link "X anzeigen" (title = Kategoriename) als fette Zeile */ #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col.d-lg-none{display:block!important;position:static;grid-column:1 / span var(--vp-k,1);grid-row:1} #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col.d-lg-none > a{display:block;padding:0 0 .45rem;margin:0 0 .35rem;font-size:.9rem;font-weight:700;color:var(--vp-anthrazit);border-bottom:1px solid var(--niu-nav-border)} /* der Kopf ist selbst ein Link auf die Kategorie: Hover wie die Links darunter */ #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col.d-lg-none > a:hover{color:var(--niu-nav-accent);text-decoration:underline} #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:attr(title)} #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row > .col.d-lg-none strong{display:none} #mainNavigation .niu-header-nav > .nav-item:has(> a.vp-nav-ideen) .subcategory-wrapper > .row > .col.d-lg-none{display:none!important} /* Merkmal-Spalten: zarter, abgerundeter Rahmen wie bisher bei Dropper */ #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-spalte-merkmal){border:1px solid var(--niu-nav-border);border-radius:6px;background:var(--niu-card-bg,#fff);margin-top:calc(-.75rem - 1px)!important} #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-spalte-merkmal) > span > .submenu-headline{padding:.75rem 1rem .45rem!important;margin:0!important} #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-spalte-merkmal) .categories-recursive-dropdown{padding:.5rem 1rem .75rem} /* Kategorien als ruhige Liste */ #mainNavigation .niu-nav-dropdown .row > .col:not(.dropdown) .submenu-headline{border-bottom:0!important;margin:0!important;padding:.3rem 0!important;font-size:.9rem;font-weight:400;color:var(--vp-anthrazit)} #mainNavigation .niu-nav-dropdown .row > .col:not(.dropdown) .submenu-headline:hover{color:var(--niu-nav-accent);text-decoration:underline} /* Zusatzspalten: Kopf mit Linie, Liste darunter */ #mainNavigation .niu-nav-dropdown .row > .col.dropdown > span > .submenu-headline{display:block;font-size:.9rem;font-weight:600;color:var(--vp-anthrazit);border-bottom:1px solid var(--niu-nav-border)!important;padding:0 0 .45rem!important;margin:0 0 .35rem!important} #mainNavigation .niu-nav-dropdown .row > .col.dropdown > span > .submenu-headline::after{display:none} #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown{display:block!important;position:static!important;float:none;border:0;box-shadow:none;background:transparent;padding:0;margin:0;min-width:0;transform:none!important} #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown .nav{display:block} #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown .nav-item{break-inside:avoid} #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown .nav-link{padding:.3rem 0;font-size:.9rem;color:var(--vp-anthrazit);display:flex;align-items:center} #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown .nav-link:hover{color:var(--niu-nav-accent);text-decoration:underline} #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-2sp) .categories-recursive-dropdown .nav{columns:2;column-gap:1.5rem} /* Ratgeber: Akzentfarbe, damit er als Wissen und nicht als Sortiment gelesen wird */ #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-ratgeber) .categories-recursive-dropdown .nav-link{color:var(--niu-nav-accent)} /* Menuebild: ohne Spaltenkopf, Bild 4:3 mit Radius 10, Text darunter */ #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-menuebild) > span > .submenu-headline{display:none!important} #mainNavigation .vp-bild-link.nav-item .nav-link{flex-direction:column;align-items:flex-start;padding:0!important;font-weight:600} #mainNavigation .vp-bild{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin:0 0 .5rem;transition:opacity .15s} #mainNavigation .vp-bild-link .nav-link:hover .vp-bild{opacity:.9} #mainNavigation .vp-bild-link .text-truncate{display:block!important} /* Icons mit eigenem Fleck im Bild (Startseiten-Raster): keinen zweiten dahinter */ #mainNavigation .vp-icon-link.vp-icon-eigen .nav-link::before{display:none} #mainNavigation .vp-icon-link.vp-fleck-drin .nav-link::before{display:none} #mainNavigation .vp-icon-link.vp-fleck-drin .vp-icon{mix-blend-mode:normal} #mainNavigation .vp-icon-link.vp-icon-eigen .vp-icon{transform:scale(min(var(--vp-s,1.75),1.55))} /* --vp-s je Icon aus baum_bauen.icon_skala */ /* wenige Kacheln (vp-n2..5): eine Reihe, jedes Icon mittig in seinem Anteil des Kastens (Anja 30.09.) */ #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > [class*=" vp-n"]) .categories-recursive-dropdown{padding-left:0!important;padding-right:0!important} #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-n2) .categories-recursive-dropdown .nav{grid-template-columns:repeat(2,1fr)!important;gap:.6rem 0;padding:.5rem 0 0} #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-n3) .categories-recursive-dropdown .nav{grid-template-columns:repeat(3,1fr)!important;gap:.6rem 0;padding:.5rem 0 0} #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-n4) .categories-recursive-dropdown .nav{grid-template-columns:repeat(4,1fr)!important;gap:.6rem 0;padding:.5rem 0 0} #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-n5) .categories-recursive-dropdown .nav{grid-template-columns:repeat(5,1fr)!important;gap:.6rem 0;padding:.5rem 0 0} /* Bild unter den Kacheln: volle Breite, 16:9 */ #mainNavigation .vp-bild-link.vp-bild-breit{grid-column:1 / -1;padding:.75rem 1rem 0} #mainNavigation .vp-bild-breit .vp-bild{aspect-ratio:16/9} /* Bild unter einer Liste (Ratgeber): Abstand nach oben, Bildunterschrift nicht in Akzentfarbe */ #mainNavigation .vp-bild-link.vp-bild-unten{padding-top:1rem} /* alle Ratgeberbilder gleich gross, egal wie breit die Spalte ist (190 bis 286 px gemessen) */ #mainNavigation .vp-bild-unten .vp-bild{max-width:230px} #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown .vp-bild-unten .nav-link{color:var(--vp-anthrazit);text-decoration:none} /* Dropper-Icons: Zeichnung kleiner im Bild, deshalb groesser anzeigen */ #mainNavigation .vp-icon-link.vp-icon-gross .vp-icon{transform:scale(1.65)} #mainNavigation .vp-icon-link.vp-icon-gross .nav-link:hover .vp-icon{transform:scale(1.75)} #mainNavigation .vp-icon-link.vp-icon-eigen .nav-link:hover .vp-icon{transform:scale(calc(var(--vp-s,1.75) + .1))} /* Zwischenkopf im Kasten (Zubehoer: Material / Beschichtung) - sieht aus wie ein Spaltenkopf, ist ein Link zum Ratgeber */ #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown .vp-zwischenkopf{margin-top:.6rem;border-top:1px solid var(--niu-nav-border);padding-top:.5rem} #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown .vp-zwischenkopf .nav-link{font-weight:600;color:var(--vp-anthrazit);text-decoration:none} #mainNavigation .niu-nav-dropdown .row > .col.dropdown .categories-recursive-dropdown .vp-zwischenkopf .nav-link:hover{text-decoration:underline} /* Farbpunkte aus CSS statt Bildern */ #mainNavigation .vp-swatch{display:inline-block;flex:0 0 auto;width:15px;height:15px;border-radius:50%;margin-right:.5rem;box-shadow:inset 0 0 0 1px var(--niu-nav-border)} #mainNavigation .vp-swatch-link .text-truncate{display:inline!important} /* Merkmal-Icons (Kettenarten, Verschluesse) aus dem Shop als Kacheln, Bild ueber dem Namen */ #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(.vp-icon-link) .categories-recursive-dropdown .nav{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.2rem .4rem;columns:auto!important} #mainNavigation .vp-icon-link.nav-item .nav-link{position:relative;flex-direction:column;align-items:center;text-align:center;padding:.35rem .15rem!important;font-size:.82rem;line-height:1.25} #mainNavigation .vp-icon-link .text-truncate{display:block!important;position:relative} #mainNavigation .vp-icon{position:relative;z-index:1;width:72px;height:72px;margin:0 0 .15rem;object-fit:contain;mix-blend-mode:multiply;transform:scale(1.25);transition:transform .15s} #mainNavigation .vp-icon-link .nav-link:hover .vp-icon{transform:scale(1.35)} /* Rose Fleck hinter dem Icon: die echten Flecken der Kat-Icons (fleck_png.py), vier Formen im Wechsel, je Kachel leicht gedreht und versetzt - nie zwei gleiche nebeneinander */ #mainNavigation .vp-icon-link .nav-link::before{content:"";position:absolute;top:.45rem;left:50%;width:64px;height:54px;z-index:0;background:var(--vp-fleck) center/100% 100% no-repeat} #mainNavigation .vp-icon-link:nth-child(4n+1){--vp-fleck:url(/bilder/vp_menue/fleck_1.png)} #mainNavigation .vp-icon-link:nth-child(4n+2){--vp-fleck:url(/bilder/vp_menue/fleck_2.png)} #mainNavigation .vp-icon-link:nth-child(4n+3){--vp-fleck:url(/bilder/vp_menue/fleck_3.png)} #mainNavigation .vp-icon-link:nth-child(4n+4){--vp-fleck:url(/bilder/vp_menue/fleck_4.png)} #mainNavigation .vp-icon-link:nth-child(8n+1) .nav-link::before{transform:translateX(calc(-50% + -3px)) translateY(1px) rotate(-6deg)} #mainNavigation .vp-icon-link:nth-child(8n+2) .nav-link::before{transform:translateX(calc(-50% + 4px)) translateY(-1px) rotate(8deg)} #mainNavigation .vp-icon-link:nth-child(8n+3) .nav-link::before{transform:translateX(calc(-50% + 2px)) translateY(2px) rotate(-14deg)} #mainNavigation .vp-icon-link:nth-child(8n+4) .nav-link::before{transform:translateX(calc(-50% + -4px)) translateY(0px) rotate(4deg)} #mainNavigation .vp-icon-link:nth-child(8n+5) .nav-link::before{transform:translateX(calc(-50% + -2px)) translateY(1px) rotate(172deg)} #mainNavigation .vp-icon-link:nth-child(8n+6) .nav-link::before{transform:translateX(calc(-50% + 3px)) translateY(-2px) rotate(196deg)} #mainNavigation .vp-icon-link:nth-child(8n+7) .nav-link::before{transform:translateX(calc(-50% + -3px)) translateY(-1px) rotate(9deg)} #mainNavigation .vp-icon-link:nth-child(8n+8) .nav-link::before{transform:translateX(calc(-50% + 2px)) translateY(1px) rotate(-170deg)} } @media (min-width:1300px){ /* Perlen: 9 Kategorien in 1 Spalte(n), 3 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(190px,1fr) minmax(300px,2fr) minmax(300px,2fr) minmax(190px,1fr);grid-template-rows:repeat(10,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.dropdown:has(> span > .vp-spalte-merkmal){align-self:stretch} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Alle Perlen"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(3 of .col.dropdown){grid-column:-4 / -3} /* Anhänger: 12 Kategorien in 1 Spalte(n), 3 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(190px,1fr) minmax(320px,2fr) minmax(190px,1fr) minmax(190px,1fr);grid-template-rows:repeat(13,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.dropdown:has(> span > .vp-spalte-merkmal){align-self:stretch} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Alle Anhänger & Verbinder"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(3 of .col.dropdown){grid-column:-4 / -3} /* Ketten & Bänder: 9 Kategorien in 1 Spalte(n), 2 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="705"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(190px,1fr) minmax(470px,3fr) minmax(190px,1fr);grid-template-rows:repeat(10,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="705"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Alle Ketten & Bänder"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="705"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="705"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} /* Zubehör: 17 Kategorien in 2 Spalte(n), 3 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row{--vp-k:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(10,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.dropdown:has(> span > .vp-spalte-merkmal){align-self:stretch} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Gesamtes Schmuckzubehör"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col:not(.dropdown):nth-child(even of .col:not(.dropdown)){grid-column:2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col:not(.dropdown):nth-child(odd of .col:not(.dropdown)){grid-column:1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(3 of .col.dropdown){grid-column:-4 / -3} /* Bastelsets: 5 Kategorien in 1 Spalte(n), 2 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="702"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(190px,1fr) minmax(540px,2fr) minmax(190px,1fr);grid-template-rows:repeat(6,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="702"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Alle Bastelsets"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="702"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="702"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} /* Schmuck: 4 Kategorien in 1 Spalte(n), 2 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="707"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(190px,1fr) minmax(320px,2fr) minmax(190px,1fr);grid-template-rows:repeat(5,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="707"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Gesamter Schmuck"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="707"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="707"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} /* Bastelbedarf: 8 Kategorien in 1 Spalte(n), 3 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(190px,1fr) minmax(190px,1fr) minmax(190px,1fr) minmax(190px,1fr);grid-template-rows:repeat(9,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Gesamter Bastelbedarf"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(3 of .col.dropdown){grid-column:-4 / -3} /* Ideen & Wissen: 0 Kategorien in 0 Spalte(n), 4 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a.vp-nav-ideen) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)} #mainNavigation .niu-header-nav > .nav-item:has(> a.vp-nav-ideen) .subcategory-wrapper > .row > .col.dropdown{position:static;grid-row:auto;grid-column:auto} } /* 992-1299 px: Raster 928 px - engere Abstaende und Hauptleiste, keine festen Mindestbreiten */ @media (min-width:992px) and (max-width:1299.98px){ #mainNavigation .niu-nav-dropdown .subcategory-wrapper > .row{column-gap:1.5rem} #mainNavigation .niu-header-nav > .nav-item > a{padding-left:.32rem!important;padding-right:.32rem!important} #mainNavigation .niu-header-nav > .nav-item:has(> .vp-nav-akzent){margin-left:.25rem;padding-left:.25rem} /* Kacheln im schmalen Band: Icons und Namen kleiner, lange Woerter trennen (1024 px: Knebelverschluss ragte heraus) */ #mainNavigation .vp-icon-link.nav-item .nav-link{font-size:.74rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere} #mainNavigation .vp-icon{transform:scale(1.05)} #mainNavigation .vp-icon-link.vp-icon-gross .vp-icon{transform:scale(1.4)} #mainNavigation .vp-icon-link.vp-icon-eigen .vp-icon{transform:scale(min(calc(var(--vp-s,1.75) * .85),1.3))} /* fuenf Kacheln in einer Reihe (Bastelsets) bekommen hier nur ~88 px: Icon 56 statt 72 px */ #mainNavigation .niu-nav-dropdown .row > .col.dropdown:has(> span > .vp-n5) .vp-icon{width:56px;height:56px} /* Perlen: 9 Kategorien in 1 Spalte(n), 3 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(10,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.dropdown:has(> span > .vp-spalte-merkmal){align-self:stretch} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Alle Perlen"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="703"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(3 of .col.dropdown){grid-column:-4 / -3} /* Anhänger: 12 Kategorien in 1 Spalte(n), 3 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(13,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.dropdown:has(> span > .vp-spalte-merkmal){align-self:stretch} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Alle Anhänger & Verbinder"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="704"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(3 of .col.dropdown){grid-column:-4 / -3} /* Ketten & Bänder: 9 Kategorien in 1 Spalte(n), 2 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="705"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,1fr);grid-template-rows:repeat(10,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="705"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Alle Ketten & Bänder"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="705"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="705"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} /* Zubehör: 17 Kategorien in 2 Spalte(n), 3 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row{--vp-k:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(10,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.dropdown:has(> span > .vp-spalte-merkmal){align-self:stretch} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Gesamtes Schmuckzubehör"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col:not(.dropdown):nth-child(even of .col:not(.dropdown)){grid-column:2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col:not(.dropdown):nth-child(odd of .col:not(.dropdown)){grid-column:1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="706"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(3 of .col.dropdown){grid-column:-4 / -3} /* Bastelsets: 5 Kategorien in 1 Spalte(n), 2 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="702"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(6,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="702"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Alle Bastelsets"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="702"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="702"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} /* Schmuck: 4 Kategorien in 1 Spalte(n), 2 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="707"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(5,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="707"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Gesamter Schmuck"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="707"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="707"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} /* Bastelbedarf: 8 Kategorien in 1 Spalte(n), 3 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(9,min-content) 1fr} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row > .col.d-lg-none > a::before{content:"Gesamter Bastelbedarf"} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(1 of .col.dropdown){grid-column:-2 / -1} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(2 of .col.dropdown){grid-column:-3 / -2} #mainNavigation .niu-header-nav > .nav-item:has(> a[data-category-id="708"]) .subcategory-wrapper > .row > .col.dropdown:nth-last-child(3 of .col.dropdown){grid-column:-4 / -3} /* Ideen & Wissen: 0 Kategorien in 0 Spalte(n), 4 Zusatzspalten */ #mainNavigation .niu-header-nav > .nav-item:has(> a.vp-nav-ideen) .subcategory-wrapper > .row{--vp-k:1;grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)} #mainNavigation .niu-header-nav > .nav-item:has(> a.vp-nav-ideen) .subcategory-wrapper > .row > .col.dropdown{position:static;grid-row:auto;grid-column:auto} } /* VP Megamenue - Handy (Seitenleiste des Menu Builders), erzeugt von mobil_bauen.py, Stand 30.09.2026 */ @media (max-width:991.98px){ /* ausblenden */ .niu-sidebar .niu-navlink-category.vp-menuebild,.niu-sidebar .niu-navlink-category.vp-nur-desktop{display:none!important} .niu-sidebar .vp-bild-unten .vp-bild{display:none} /* Home-Knopf (Favicon) gehoert nur in die feste Desktop-Leiste (01.10.2026) */ .niu-sidebar .vp-home,.niu-sidebar li:has(> .vp-home),#mainNavigation .nav-item:has(> .vp-home){display:none!important} /* Farbpunkt und Icon VOR den Namen (NIU stellt das HTML-Feld sonst darueber) */ .niu-sidebar .vp-swatch-link .h5,.niu-sidebar .vp-swatch-link .h6{flex-direction:row!important;align-items:center;justify-content:flex-start!important} .niu-sidebar .vp-swatch{display:inline-block;flex:0 0 auto;width:16px;height:16px;border-radius:50%;margin-right:.6rem;box-shadow:inset 0 0 0 1px var(--niu-nav-border,#d7d5d5)} /* Kachelseite: Raster mit drei Icons je Reihe, "Direkt zu"/Linie ueber die ganze Breite */ .niu-sidebar .nav-panel:has(> .vp-icon-link){display:grid!important;grid-template-columns:repeat(3,1fr);column-gap:.5rem;align-content:start} .niu-sidebar .nav-panel:has(> .vp-icon-link) > :not(.vp-icon-link){grid-column:1 / -1} .niu-sidebar a.vp-icon-link{flex-direction:column;justify-content:flex-start!important;white-space:normal!important;margin:0!important;padding:.5rem 0!important} .niu-sidebar a.vp-icon-link .h6{align-items:center;text-align:center;font-size:.82rem;line-height:1.25;white-space:normal} .niu-sidebar a.vp-icon-link .col-2{display:none!important} .niu-sidebar .vp-icon{width:64px;height:64px;object-fit:contain;margin:0 auto .45rem;transform:scale(1.25)} .niu-sidebar .vp-icon-gross .vp-icon{transform:scale(1.65)} .niu-sidebar .vp-icon-eigen .vp-icon{transform:scale(var(--vp-s,1.75))} /* Zwischenkopf (Zubehoer: Beschichtung): sieht aus wie eine Ueberschrift, fuehrt zum Ratgeber Beschichtungen */ .niu-sidebar a.vp-zwischenkopf{border-top:1px solid var(--niu-nav-border,#d7d5d5);margin-top:.5rem!important;padding-top:.75rem!important} .niu-sidebar a.vp-zwischenkopf .h6{font-weight:600} .niu-sidebar a.vp-zwischenkopf .col-2{display:none!important} /* Hauptebene: Neu als Rose-Pille, Gravur betont, Sale rot */ .niu-sidebar .vp-nav-neu .h5{align-self:flex-start;background:var(--primary);border-radius:4px;padding:.1rem .5rem} .niu-sidebar .vp-nav-akzent .h5{font-weight:600} .niu-sidebar .vp-nav-sale .h5{font-weight:600;color:var(--niu-accent1)} /* 'Direkt zu ""' ausblenden - IDs aus baum_bauen.py (feste_ids) */ .niu-sidebar .nav-panel > a#niu-navlink-u-fc534ce5, .niu-sidebar .nav-panel > a#niu-navlink-u-fc534ce5 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-3fc2942f, .niu-sidebar .nav-panel > a#niu-navlink-u-3fc2942f + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-5293e83d, .niu-sidebar .nav-panel > a#niu-navlink-u-5293e83d + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-21f5abdb, .niu-sidebar .nav-panel > a#niu-navlink-u-21f5abdb + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-7820e1e3, .niu-sidebar .nav-panel > a#niu-navlink-u-7820e1e3 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-d42fd1e9, .niu-sidebar .nav-panel > a#niu-navlink-u-d42fd1e9 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-7b465426, .niu-sidebar .nav-panel > a#niu-navlink-u-7b465426 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-d1a82296, .niu-sidebar .nav-panel > a#niu-navlink-u-d1a82296 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-730caebf, .niu-sidebar .nav-panel > a#niu-navlink-u-730caebf + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-ee08fd28, .niu-sidebar .nav-panel > a#niu-navlink-u-ee08fd28 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-668627be, .niu-sidebar .nav-panel > a#niu-navlink-u-668627be + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-c4a40ac1, .niu-sidebar .nav-panel > a#niu-navlink-u-c4a40ac1 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-031f4cf8, .niu-sidebar .nav-panel > a#niu-navlink-u-031f4cf8 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-815bc0a0, .niu-sidebar .nav-panel > a#niu-navlink-u-815bc0a0 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-9daa0b6f, .niu-sidebar .nav-panel > a#niu-navlink-u-9daa0b6f + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-a5674305, .niu-sidebar .nav-panel > a#niu-navlink-u-a5674305 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-dd9088b9, .niu-sidebar .nav-panel > a#niu-navlink-u-dd9088b9 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-14bc78ea, .niu-sidebar .nav-panel > a#niu-navlink-u-14bc78ea + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-4cddd57b, .niu-sidebar .nav-panel > a#niu-navlink-u-4cddd57b + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-d8682b02, .niu-sidebar .nav-panel > a#niu-navlink-u-d8682b02 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-74b3f0b7, .niu-sidebar .nav-panel > a#niu-navlink-u-74b3f0b7 + div:has(> hr), .niu-sidebar .nav-panel > a#niu-navlink-u-375b6f15, .niu-sidebar .nav-panel > a#niu-navlink-u-375b6f15 + div:has(> hr){display:none!important} }