/* I do not know what this file does, but if it is deleted, the shop crashes. SO DON'T TOUCH THIS */ /* region LPs */ #carhifi { .breadcrumb-container { display:none; } } /* endregion */ /* region NAV */ header.niu-header-type-1 .dropdown-toggle::after{ display: none; } .niu-nav-worlds-t7-outer { border-top:1px solid #eaeaea; border-bottom:1px solid #eaeaea; } /* Layout-Shift beim Hovern der Welten-Navigation. Ursache: Hover setzt kein CSS, sondern niu.navWorlds.js schaltet per mouseenter die Klasse .active auf das
  • . Darauf greift im Parent .niu-nav-worlds-item.active > .niu-nav-worlds-link { font-weight: 700 }, und der fette Text ist breiter als der normale - die ganze Zeile ruckt. Die Border macht das nicht mit, die liegt im Parent schon transparent im Ruhezustand; nur die Textbreite war noch offen. Loesung: Der Link reserviert die fette Breite dauerhaft. Das ::after zieht den Text aus dem title-Attribut des Links (gesetzt in layout/header_categories_worlds.tpl, identisch zum Label), rendert ihn in 700 und liegt per Grid in derselben Zelle wie das sichtbare Label. Die Zellbreite ist damit immer die fette Breite, das Umschalten kostet keinen Platz mehr. height: 0 + visibility: hidden halten den Doppelgaenger unsichtbar, ausserhalb der Zeilenhoehe und aus dem Accessibility-Tree. Grid statt der Parent-Flexbox ist hier Pflicht: Als Flex-Item saesse das ::after NEBEN dem Label und machte den Link doppelt so breit. Deshalb auch die dritte Klasse im Selektor - .niu-nav-worlds-t7-row2 .niu-nav-worlds-link aus dem Parent traegt display: flex bei gleicher Spezifitaet. */ .niu-nav-worlds-t7-row2 .niu-nav-worlds-item > .niu-nav-worlds-link { display: grid; align-items: center; justify-items: center; } .niu-nav-worlds-t7-row2 .niu-nav-worlds-item > .niu-nav-worlds-link > .niu-nav-worlds-label, .niu-nav-worlds-t7-row2 .niu-nav-worlds-item > .niu-nav-worlds-link::after { grid-area: 1 / 1; } .niu-nav-worlds-t7-row2 .niu-nav-worlds-item > .niu-nav-worlds-link::after { content: attr(title); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; } /* Kategoriezeile mobil auf der Startseite ausgeblendet (Kundenwunsch Becker, 12.10.2026). Auf der Startseite ist noch keine Welt gewaehlt, die Zeile zeigt dann die Kategorien der ersten Welt (CarHifi) - der Besucher bekaeme Autoradios und Co. vorgesetzt, bevor er sich fuer eine Welt entschieden hat. Mobil fehlt die Welten-Zeile darueber, die das einordnen wuerde; der Weltenwechsel laeuft dort ueber den Burger. Ab lg bleibt die Zeile, weil die Welten-Zeile mit der aktiven Welt direkt darueber steht. data-page="18" ist PAGE_STARTSEITE. Ausgeblendet wird der ganze Wrapper, nicht nur die Zeilen darin - sonst bliebe ein leerer Streifen mit den beiden Rahmenlinien aus .niu-nav-worlds-t7-outer stehen. Die Links bleiben wie beim Parent-Schalter worldsCategoriesMobile im Quelltext. Breakpoint wie im Parent (media-breakpoint-down(md)). */ @media (max-width: 991.98px) { body[data-page="18"] .niu-nav-worlds-t7-outer { display: none; } } /* endregion NAV */ /* region OPC ADDONS */ .js-gradient-banner { &.js-orange { .dzm-itb-overlay { background: #EC6707; background: linear-gradient(0deg, rgba(236, 103, 7, 1) 0%, rgba(236, 103, 7, 0) 66%); } } &.js-black { .dzm-itb-overlay { background: #000; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 66%); } } } /* Sanfter Lift bei Hover fuer Portlet-Boxen (Kundenwunsch Becker, 02.09.2026). Wie js-gradient-banner eine Helferklasse, die im OPC von Hand am Portlet gesetzt wird und hier ihr Styling bekommt - im Code selbst kommt sie nicht vor. Aktuell gesetzt an einer ImageTextBox auf /Autoradios, dort am aeusseren Wrapper (div.dzm-itb-wrapper), also an der ganzen Box und nicht an einem Innenteil. Deshalb genuegt transform, ohne an Layout oder Innenabstaenden zu ruehren: Die Box bewegt sich als Ganzes und reisst nichts mit. transform statt margin/top, weil nur transform und opacity ohne Reflow animieren - bei margin wackelte das Nachbarelement mit. Zwei Stellschrauben: die Distanz (-4px, Hausmass des Parents, siehe _niu_productdetails.scss) und die Dauer (.25s). ease-out laesst die Bewegung schnell anlaufen und weich auslaufen, was bei einem Lift natuerlicher wirkt als ease-in-out. Reduced-Motion: Wer Bewegung abbestellt hat, bekommt keinen Lift. Die Rueckmeldung beim Hovern faellt damit nicht weg - der Button in der Box wechselt weiterhin die Farbe. Muster wie im Parent (_niu_toast.scss). */ /* Nachtrag 02.09.2026: Dieselbe Bewegung fuer die Hersteller-Box (DZMManufacturer, dzm_opc_plus). Auch dort ist die Klasse die ganze Box - das Portlet rendert genau EIN div.dzm-manufacturer-container pro Instanz, mit Rahmen und border-radius inline, also eine kartenartige Flaeche und kein Sammelcontainer. Ein Unterschied zu js-lift-hover: Dort sitzt der Link INNEN, hier aussen - das Portlet wickelt die Box in ein . :focus-within greift damit nicht (das fokussierbare Element ist der Vorfahre, kein Kind), darum zusaetzlich `a:focus .dzm-manufacturer-container`. Die Effektwerte stehen bewusst nur einmal hier und nicht als zweiter Block - wer die Distanz aendert, aendert sie fuer beide. */ .js-lift-hover, .dzm-manufacturer-container { transition: transform .25s ease-out; } .js-lift-hover:hover, .dzm-manufacturer-container:hover, a:focus .dzm-manufacturer-container, .js-lift-hover:focus-within { transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .js-lift-hover, .dzm-manufacturer-container { transition: none; } .js-lift-hover:hover, .dzm-manufacturer-container:hover, a:focus .dzm-manufacturer-container, .js-lift-hover:focus-within { transform: none; } } /* region THEME2 BUTTONS */ /* Weisse Beschriftung auf den Primary-Buttons (Kundenwunsch Becker, 02.09.2026). Warum ueberhaupt eine Regel: Die Button-Beschriftung ist in Theme 2.0 bewusst NICHT einstellbar, sondern abgeleitet - dzm_niuplus_companion, adminmenu/prime-vue/src/logic/theme2/deriveTokens.js, textOnFill(). Die Funktion nimmt zuerst die weiche getoente Textfarbe und faellt, wenn die unter 4,5:1 bleibt, auf den Pol mit dem hoeheren echten Kontrast zurueck. Auf #ec6707 ist das Schwarz (6,5:1) gegen Weiss (3,2:1) - daher der schwarze Text. Im Backend gibt es dafuer keinen Regler, der Weg fuehrt nur ueber das Token. Ein Token statt vier Regeln: --niu-btn-primary-text wird von genau vier kompilierten Regeln gelesen (.btn-primary normal/hover/focus/active und .btn-outline-primary in seinen gefuellten Zustaenden). Ueberschrieben auf body.niu-theme2, weil die Engine ihre Tokens auf :root emittiert - der naehere Vorfahre gewinnt, ohne !important und ohne Spezifitaets-Wettlauf. ACHTUNG Barrierefreiheit: Weiss auf #ec6707 sind 3,2:1. Das reicht fuer grosse Schrift (ab 24px bzw. 18,66px fett), nicht fuer normalen Fliesstext - WCAG 2.1 AA verlangt dort 4,5:1. Bewusste Entscheidung des Kunden gegen die Automatik. Nachtrag 09.09.2026: Die Checkout-Rolle steht seit dem 02.09. ebenfalls auf #ec6707 (vorher #111111 mit hellem Text). Dieselbe Engine, dasselbe Ergebnis (Schwarz), derselbe Kundenwunsch - darum dasselbe Token daneben. Gelesen wird es von .btn-checkout in allen Zustaenden und von .btn-outline-checkout in den gefuellten Zustaenden. gotocheckout und quickbuy stehen weiter auf #111111 und sind bewusst nicht angefasst. */ body.niu-theme2 { --niu-btn-primary-text: #ffffff; --niu-btn-checkout-text: #ffffff; } /* Link-Buttons der DZM-Portlets in der Primaerfarbe (Kundenwunsch Becker, 02.09.2026). Luecke im System, nicht im Shop: dzm_resources baut in Portlets/Snippets/button.tpl aus Typ und Farbe die Klassen zusammen, bei btntype=link/btncolor=primary also `dzm-btn dzm-btn-link-primary btn-link btn-link-primary`. Gestylt wird davon nur `.btn-link` - und zwar generisch ueber `body.niu-theme2 .btn-link { color: var(--s-accent) }`. Die Farbe im Klassennamen wertet niemand aus; `btn-link-primary` kommt im ganzen Codebestand nur als generierter String vor, nirgends als Regel. Der Button uebernimmt darum den Flaechen-Akzent (hier #262626) statt der Primaerfarbe. Deshalb hier nachgezogen. `.dzm-btn` steht bewusst mit im Selektor: Das hebt die Spezifitaet ueber die generische theme2-Regel (0,3,1 gegen 0,2,1) und trifft alle vier Zweige des Snippets - die Anker-Variante bekommt naemlich `btn btn-link-primary` OHNE `btn-link`, die Fake-Variante `btn-link btn-link-primary`. Gilt nur fuer primary: Die anderen Farben (`btn-link-secondary` usw.) haben dieselbe Luecke, werden in diesem Shop aber nicht eingesetzt (im OPC-Bestand gepruefte einzige Fundstelle: /Autoradios). Die Ursache gehoert in dzm_resources bzw. die theme2-Regeln, hier steht nur das Pflaster. Kontrast: #ec6707 auf Weiss sind 3,2:1 bei 16px/400 - unter WCAG 2.1 AA. Der theme2-eigene readable()-Ton waere #b75005 mit 5,0:1. */ body.niu-theme2 .dzm-btn.btn-link-primary, body.niu-theme2 .dzm-btn.dzm-btn-link-primary { color: var(--niu-btn-primary, #ec6707); transition: color .2s ease; } /* Hover: Schwarz statt abgedunkeltem Orange (Kundenwunsch Becker, 02.09.2026). Zwei Selektorgruppen, weil das Snippet zwei Bauformen kennt. Der echte -Zweig ist selbst der Link und reagiert auf seinen eigenen :hover. Der Fake-Zweig ist ein
    in einem umgebenden Link - auf /Autoradios haengt der Button in , die ganze Box ist klickbar. Ohne die zweite Gruppe wuerde der Text nur schwarz, wenn der Zeiger genau ueber den paar Pixeln Schrift steht, und nicht beim Hovern der Box. Bewusst ueber `a:hover` und nicht ueber die itb-Klasse: gilt so fuer jeden Portlet- Rahmen, der einen Fake-Button in einen Link setzt. */ body.niu-theme2 .dzm-btn.btn-link-primary:hover, body.niu-theme2 .dzm-btn.btn-link-primary:focus, body.niu-theme2 .dzm-btn.dzm-btn-link-primary:hover, body.niu-theme2 .dzm-btn.dzm-btn-link-primary:focus, body.niu-theme2 a:hover .dzm-btn.btn-link-primary, body.niu-theme2 a:hover .dzm-btn.dzm-btn-link-primary { color: #000000; } /* endregion THEME2 BUTTONS */ /* region CUSTOM BOXES */ /* Headings in den Custom Boxes der Produktseite eine Nummer kleiner (Kundenwunsch Becker, 09.09.2026). Die Wawi-Beschreibungen kommen mit h1-h4 daher - im Bestand tragen 90 % der Artikel ein h1, 43 % die Kombination h1+h2+h3, 5 % zusaetzlich h4; h5/h6 sind mit 82 Artikeln vernachlaessigbar. Das Theme skaliert Headings global auf der 1,125er-Leiter (h6 = 1,125rem ... h1 = 1,125^6 = 2,027rem). In der Box ist das zu gross: Der Boxtitel „Beschreibung" ist ein p.h4 mit 1,424rem, das h1 im Inhalt stand mit 2,027rem darueber - groesser sogar als der Produkttitel der Seite (1,802rem). Loesung: dieselbe Leiter, nur verschoben. h1 = 1,125^2, h2 = 1,125^1, h3 = 1,125^0 - also exakt die Werte, die das Theme fuer h5/h6/Fliesstext nutzt, das h1 damit eine Stufe unter dem Boxtitel. Unterhalb von 1rem gibt die Leiter mit 0,889rem nur noch einen Wert her, der fuer h4 zu klein wirkt (14px bei 16px Fliesstext); h4-h6 laufen deshalb in 1px-Schritten unter den Fliesstext aus. Vier sichtbare Stufen fuer die vier Ebenen, die real vorkommen - mehr passt zwischen Fliesstext und Boxtitel bei diesem Verhaeltnis nicht hinein. line-height bleibt aus dem Theme (1.2, einheitenlos) und skaliert mit; die Abstaende (mb 1rem) ebenfalls. Nur .niu-custom-boxes-container .desc, damit OPC-Inhalte und andere .desc-Vorkommen unberuehrt bleiben; trifft Desktop- und Mobilvariante der Boxen, beide nutzen den Container. Kein !important: 1,9 % der Headings im Bestand tragen Inline-Styles aus der Wawi, die bleiben wie sie sind. */ .niu-custom-boxes-container .desc h1, .niu-custom-boxes-container .desc .h1 { font-size: 1.265625rem; } .niu-custom-boxes-container .desc h2, .niu-custom-boxes-container .desc .h2 { font-size: 1.125rem; } .niu-custom-boxes-container .desc h3, .niu-custom-boxes-container .desc .h3 { font-size: 1rem; } .niu-custom-boxes-container .desc h4, .niu-custom-boxes-container .desc .h4 { font-size: .9375rem; } .niu-custom-boxes-container .desc h5, .niu-custom-boxes-container .desc .h5, .niu-custom-boxes-container .desc h6, .niu-custom-boxes-container .desc .h6 { font-size: .875rem; } /* endregion CUSTOM BOXES */ /* region MERKMALTABELLE */ /* Merkmaltabelle in den Custom Boxes der Produktseite (Kundenwunsch Becker, 09.09.2026): ruhig, spaltenbuendig, schnell erfassbar. Markup kommt aus dem Parent (product-attributes -> table.table-sm.table-striped, Label als td.h6, Werte als a.badge.badge-primary bzw. Klartext). Woran es lag, gemessen: vier Schriftgroessen in einer Tabelle (Label 16px/600, Badge 12px/700), Zebra UND orange Bloecke als Flaechensignal, und der Parent setzt td.attr-characteristic auf display:flex mit gap:15px - daher die grossen Luecken zwischen umgebrochenen Badge-Reihen. Label-Spalte: width:1% + nowrap laesst die Spalte auf das laengste Label schrumpfen, die Werte beginnen auf einer Kante. Laengstes Label im Bestand sind 32 Zeichen („Anzahl der Vorverstaerkerausgaenge"). Gilt nur ab 32rem Boxbreite (s. Container Query unten), darunter wuerde die Spalte die Werte erdruecken. Typo: eine Groesse fuer alles (.875rem), Label 400 gedaempft, Werte 600 dunkel - das Auge liest die Werte. IBM Plex Sans ist im Shop nur in 400/600/700 geladen, deshalb kein 500. Chips statt Badges: neutrale Flaeche (--s-hover), Text --s-text, Hover in Markenfarbe mit der Button-Textfarbe - Orange als Interaktions-, nicht als Flaechenfarbe. white-space:normal ist Pflicht: der laengste Merkmalwert hat 48 Zeichen und wuerde als nowrap-Badge auf dem Handy aus der Box laufen. Radius kommt weiter aus --niu-radius (hier 0). Zeilen: Trennlinie statt Zebra. Die Zebra-Regel des Themes steht auf body.niu-theme2 .table-striped tbody tr:nth-of-type(even), deshalb die Variante mit body.niu-theme2 davor - sonst verliert der Override. Container Query statt Media Query: Dieselbe Tabelle ist je nach Anordnung der Custom Boxes 518, 758 oder 1500px breit - die Breite haengt an der Box, nicht am Viewport. Unter 32rem stapeln die Zeilen (Label klein darueber, Werte darunter). Browser ohne Container Queries bekommen das heutige Zwei-Spalten-Layout mit umbrechenden Labels, es bricht nichts. td.attr-characteristic behaelt im Stapel sein display:flex aus dem Parent, nur table/tbody/tr/td.h6 werden block. thead ist sr-only und bleibt es. Vermessen am Kenwood DNX419DABS (6 Zeilen, 3 davon mehrzeilig): 758px Box -> Label-Spalte 128px, Zeilen 45-47px, kein Umbruch; 310px Box -> gestapelt, kein Ueberlauf. */ .product-attributes { container-type: inline-size; padding-top: .25rem; } .product-attributes .table { margin-bottom: 0; } body.niu-theme2 .product-attributes .table-striped tbody tr:nth-of-type(even), .product-attributes .table-striped tbody tr:nth-of-type(even) { background-color: transparent; } .product-attributes .table-sm td { padding: .625rem 0; vertical-align: top; font-size: .875rem; } .product-attributes tbody tr + tr > td { border-top: 1px solid var(--s-border, #eaeaea); } .product-attributes td.h6 { font-weight: 400; line-height: 1.5; color: var(--s-text-muted, #7d7d7d); padding-right: 1.5rem; } .product-attributes td.attr-characteristic { gap: .375rem .5rem; align-content: flex-start; } .product-attributes td.attr-characteristic .badge { font-size: .875rem; font-weight: 600; line-height: 1.25; padding: .1875rem .5rem; white-space: normal; text-align: left; color: var(--s-text, #262626); background-color: var(--s-hover, #f0f0f0); } .product-attributes td.attr-characteristic a.badge:hover, .product-attributes td.attr-characteristic a.badge:focus { color: var(--niu-btn-primary-text, #ffffff); background-color: var(--niu-btn-primary, #ec6707); } /* Nachtrag 12.10.2026: Der Parent setzt unter lg (_productdetails.scss:840) .product-attributes tr > td:first-child { width: 40% }. Mit (0,2,2) schlug das die beiden Label-Breiten hier (td.h6, (0,2,1)): Im Stapel brach das als Ueberschrift gesetzte Label bei 40 % der Boxbreite um („Anzahl der Vorverstaerkerausgaenge" dreizeilig), im Zwei-Spalten-Layout unter lg war die Label-Spalte 40 % statt auf das laengste Label geschrumpft. Deshalb tragen die beiden Breiten-Selektoren tbody tr > davor, (0,2,3) - unabhaengig von der Ladereihenfolge. */ @container (min-width: 32rem) { .product-attributes tbody tr > td.h6 { width: 1%; white-space: nowrap; } } @container (max-width: 31.99rem) { .product-attributes .table, .product-attributes tbody, .product-attributes tbody tr, .product-attributes tbody tr > td.h6 { display: block; width: auto; } .product-attributes tbody tr { padding: .5rem 0; } .product-attributes tbody tr + tr { border-top: 1px solid var(--s-border, #eaeaea); } .product-attributes tbody tr + tr > td { border-top: 0; } .product-attributes .table-sm td { padding: 0; } .product-attributes td.h6 { padding-bottom: .25rem; font-size: .8125rem; } } /* endregion MERKMALTABELLE */