/* =========================================================================== KK-Megamenue - eigene Formatierung. Entscheidung des Inhabers vom 08.09.2026: Die CSS-Datei des zugekauften Rootways-Moduls wird NICHT weiterverwendet. Diese Datei ist von Grund auf nach den gemessenen Sollwerten geschrieben - nicht aus der Rootways-Datei abgeleitet, nicht umformatiert, nicht Zeile fuer Zeile uebernommen. *** DIE ROOTWAYS-CSS DARF NICHT WIEDER EINGEBAUT WERDEN. *** Grundlage sind ausschliesslich: a) die vier gemessenen Sollwerte (siehe unten), b) die HTML-Struktur, die das Theme ausliefert: nav.rootmenu ul#rw-menutop.rootmenu-list li.nav-N.category-item a.has-sub-cat div.megamenu.fullmenu.categoriesmenu div.root-col-1 div.root-sub-col-12 div.root-col-4 <- die vier Spalten SOLLWERTE, einzeln belegt: S1 ul.rootmenu-list 1460 x 40 px im Ruhezustand S2 Untermenue oeffnet beim Ueberfahren, schliesst beim Verlassen S3 Panel ueber die volle Leistenbreite, vier lesbare Spalten, weisser Hintergrund, Schatten, ueber dem Seiteninhalt S4 Bezugspunkt der absoluten Positionierung ist .rootmenu, NICHT die einzelnen li ZU S4 - das ist der Fehler vom 07.09.: Lag der Bezugspunkt auf dem li, berechnete der Browser die Panelbreite aus der Breite des einzelnen Menuepunktes. Ergebnis waren 37 px breite Panels. Deshalb steht unten ausdruecklich .rootmenu{position:relative} UND .rootmenu-list > li{position:static}. Beide Zeilen gehoeren zusammen; wird eine davon geaendert, bricht S3. =========================================================================== */ /* --- S4: der Bezugspunkt. Muss VOR allem anderen stehen. ----------------- */ nav.rootmenu { position: relative; /* Bezugspunkt fuer die Panels */ display: block; width: 100%; max-width: 1460px; /* S1 - Breite der Leiste */ margin: 0 auto; } /* --- S1: die Leiste, 1460 x 40 px im Ruhezustand ------------------------- */ /* -------------------------------------------------------------------------- LEISTE - am 08.09.2026 auf die GEMESSENEN kk-live-Werte umgestellt. BIS DAHIN FALSCH: Wir hatten display:flex. Damit sind die float-Angaben der li wirkungslos, und alle vier Punkte standen linksbuendig nebeneinander. kk-live hat display:table, dort greifen die floats - und erst dadurch entstehen die ZWEI GRUPPEN: Kuechenausstattung und Kuecheninventar links, Hersteller und Sonstiges rechts am Leistenende. Der bisherige Sollwert 14 px fuer die Schrift war ebenfalls falsch; er stammte aus einer Messung des DEMOSHOPS, nicht des Originals. kk-live hat 18 px bei 19,98 px Zeilenhoehe, Schnitt 700, Open Sans Condensed. -------------------------------------------------------------------------- */ ul.rootmenu-list { width: 100%; max-width: 1460px; height: 40px; /* S1 - Hoehe im Ruhezustand */ margin: 0; padding: 0; list-style: none; display: table; /* 08.09.2026: war flex - siehe oben */ table-layout: fixed; text-align: right; /* kk-live-Wert */ background: transparent; border-bottom: 1px solid #e0e0e0; box-sizing: border-box; } /* Die Punkte einzeln - x-Position und Innenabstand aus kk-live gemessen. Die Hoehe entsteht NICHT aus einer festen Angabe, sondern aus 10 px oben + 19,98 px Zeilenhoehe + 10 px unten = 39,98 px. */ ul.rootmenu-list > li { position: static; /* S4 - KEIN eigener Bezugspunkt! */ margin: 0; list-style: none; text-align: left; /* das text-align:right der ul nicht erben */ } /* Kuechenausstattung - x 280, Breite 178 */ ul.rootmenu-list > li.nav-1 { display: block; float: left; padding: 0; /* 08.09.2026: kk-live hat am li 0 */ } /* Kuecheninventar - x 458, Breite 179 */ ul.rootmenu-list > li.nav-2 { display: block; float: left; padding: 0; } /* Hersteller - x 1494, Breite 136. float:none, sitzt durch das text-align:right der ul rechts, aber links von Sonstiges. */ ul.rootmenu-list > li.nav-3 { display: inline-block; float: none; padding: 0; } /* Sonstiges - x 1631, Breite 109, rechte Kante 1631 + 109 = 1740 = 280 + 1460 */ ul.rootmenu-list > li.nav-4 { display: block; float: right; padding: 0; } /* 08.09.2026, KORREKTUR nach der Abnahme: Der Innenabstand stand SOWOHL am li ALS AUCH am a. 40 px Link plus 20 px li-Abstand ergaben 60, plus Rahmen 61 px Leistenhoehe statt 40. kk-live hat am li 0 und den Abstand nur am a. Damit ist das li so hoch wie der Link: 10 + 19,98 + 10 = 39,98 px. */ ul.rootmenu-list > li.nav-1 > a { padding: 10px 25px 10px 0; } ul.rootmenu-list > li.nav-2 > a { padding: 10px 25px; } ul.rootmenu-list > li.nav-3 > a { padding: 10px 25px; } ul.rootmenu-list > li.nav-4 > a { padding: 10px 0 10px 25px; } ul.rootmenu-list > li > a { display: block; padding: 10px 25px; /* Grundwert, je Punkt oben ueberschrieben */ color: #242222; /* kk-live rgb(36,34,34) */ font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; /* 08.09.2026 KORRIGIERT: kk-live-Wert. Der frueher angenommene Sollwert 14 px stammte aus einer Messung des Demoshops, nicht des Originals. */ line-height: 19.98px; /* kk-live-Wert */ font-weight: 700; /* kk-live-Wert */ text-decoration: none; white-space: nowrap; box-sizing: border-box; } ul.rootmenu-list > li > a:hover, ul.rootmenu-list > li:hover > a { background: #fff; color: #009900; /* 08.09.2026: hier stand ein Rot, beanstandet. kk-live setzt KK-Gruen rgb(0,153,0). */ text-decoration: none; } /* --- S2 und S3: das aufklappende Panel ----------------------------------- */ ul.rootmenu-list > li > .megamenu { display: none; /* S2 - Ruhezustand: zu */ position: absolute; /* bezogen auf nav.rootmenu, siehe S4 */ top: 40px; /* direkt unter der Leiste */ left: 0; right: 0; /* S3 - volle Leistenbreite */ z-index: 900; /* S3 - ueber dem Seiteninhalt */ background: #fff; /* S3 - weisser Hintergrund */ border: 1px solid #e0e0e0; box-shadow: 0 6px 18px rgba(0,0,0,.18); /* S3 - Schatten */ box-sizing: border-box; text-align: left; } /* ------------------------------------------------------------------------- S3-NACHBESSERUNG 08.09.2026 - Innenabstand des Panels. GEMESSENE URSACHE des Fehlers: Das Theme bringt in dev_css/bootstrap_v3.3.6/bootstrap_modules-basic.css die Regel .tpl-topnav-desk .rootmenu>.rootmenu-list>li>.megamenu{padding:35px 15px} Ihre Spezifitaet ist (0,4,1), die der obigen Regel nur (0,2,2). Das Theme GEWINNT, der Innenabstand betrug also 15 px statt der beabsichtigten 24. Nachgerechnet: 1460 - 2 Rahmen - 30 Innenabstand = 1428 Innenbreite, davon calc(25% - 18px) = 339,0 px - genau die im Browser gemessenen 339. Deshalb steht die folgende Regel mit HOEHERER Spezifitaet (0,4,3). Innenabstand 24 px ergibt 1460 - 2 - 48 = 1410 Innenbreite, geteilt durch vier = 352,5 -> der Browser rundet zu 352/353. kk-live misst 352, 353, 352 zwischen den x-Positionen. Das trifft. ------------------------------------------------------------------------- */ .tpl-topnav-desk nav.rootmenu > ul.rootmenu-list > li > .megamenu, nav.rootmenu > ul.rootmenu-list > li > .megamenu { padding: 24px; } /* S2 - oeffnet beim echten Ueberfahren, schliesst beim Verlassen. Zusaetzlich .is-offen fuer das eigene JavaScript kk-megamenu.js. */ ul.rootmenu-list > li:hover > .megamenu, ul.rootmenu-list > li.is-offen > .megamenu { display: block; } /* --- S3: die vier Spalten ------------------------------------------------ */ /* S3 - das Spaltenraster, 08.09.2026 nach den kk-live-Werten gesetzt. KEIN flex und KEIN gap mehr. Grund, gemessen: 4 x 339 + 3 x 24 = 1428 war GENAU gleich der Innenbreite. Bei exakter Gleichheit bricht der Browser um; dazu zaehlen in einem Flex-Container die Pseudoelemente von .clearfix als eigene Flex-Kinder mit. Ergebnis waren drei Spalten je Reihe und ein leeres rechtes Viertel. Stattdessen float mit glatten 25 %. Vier Spalten koennen dann rechnerisch nicht mehr umbrechen, weil 4 x 25 % = 100 % ist - ohne Zwischenraeume, die dazukaemen. Der Abstand entsteht INNERHALB der Spalte ueber padding-right; dadurch bleibt die linke Kante der Spalte identisch mit der linken Kante ihres Textes. Das ist der Grund, warum kk-live GENAU VIER x-Positionen hat und der Demoshop vorher sechs. */ .tpl-topnav-desk .megamenu .root-col-1, .tpl-topnav-desk .megamenu .root-sub-col-12, .megamenu .root-col-1, .megamenu .root-sub-col-12 { width: 100%; margin: 0; padding: 0; display: block; /* ausdruecklich KEIN flex */ } .tpl-topnav-desk nav.rootmenu > ul.rootmenu-list > li > .megamenu .root-col-4, .megamenu .root-col-4 { float: left; width: 25%; /* S3 - vier Spalten je Reihe, glatt */ box-sizing: border-box; margin: 0 0 18px 0; padding: 0 24px 0 0; /* Abstand nach rechts, linke Kante bleibt */ } /* ZEILENUMBRUCH - korrigiert am 08.09.2026, 07:5x, vor der Abnahme. ERSTER ANSATZ WAR FALSCH: .root-col-4:nth-child(4n+1). Die Messung des ausgelieferten HTML zeigt, dass zwischen den Spalten ZUSAETZLICHE
stehen - Panel 1 hat 15 direkte Kinder: 12 Spalten und 3 Trenner. nth-child haette damit den 5., 9. und 13. Kindknoten getroffen, also teils die Trenner statt der Spalten, und das Raster zerstoert. Das Markup bringt den Zeilenumbruch bereits SELBST mit: nach je vier Spalten steht ein Trenner. Er muss nur wirken. Genau das macht die folgende Regel. Sie ist unabhaengig von der Anzahl der Spalten und deshalb auch fuer die Panels mit sechs statt zwoelf Eintraegen richtig. :not(.root-col-4) ist noetig, weil die Spalten SELBST zusaetzlich die Klasse clearfix tragen (
). */ .tpl-topnav-desk .megamenu .root-sub-col-12 > .clearfix:not(.root-col-4), .megamenu .root-sub-col-12 > .clearfix:not(.root-col-4) { clear: both; float: none; display: block; width: 100%; height: 0; margin: 0; padding: 0; } /* Die Floats wieder einfangen, damit die Panelhoehe stimmt. */ .tpl-topnav-desk .megamenu .root-sub-col-12::after, .megamenu .root-sub-col-12::after { content: ""; display: block; clear: both; } /* Lesbarkeit der Spalteninhalte */ .tpl-topnav-desk .megamenu .root-col-4 > .title, .tpl-topnav-desk .megamenu .root-col-4 .level3-listing, .tpl-topnav-desk .megamenu .root-col-4 .level3-listing > li { margin-left: 0; padding-left: 0; /* S3 - genau VIER x-Positionen, nicht sechs */ } .megamenu .title, .megamenu .titl { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #242222; /* 08.09.2026: war #222 = rgb(34,34,34); kk-live rgb(36,34,34) */ line-height: 1.3; } .megamenu ul { margin: 0; padding: 0; list-style: none; } .megamenu li { margin: 0 0 4px; padding: 0; list-style: none; } .megamenu a { display: block; padding: 2px 0; color: #444; /* 08.09.2026 GEPRUEFT, bewusst NICHT geaendert: Diese Angabe ist wirkungslos. Das Theme setzt .rootmenu>.rootmenu-list .fullmenu ul>li>a{color:#424242} mit Spezifitaet (0,4,3) gegen unsere (0,1,1). Im Browser gilt daher rgb(66,66,66) - der kk-live-Wert. Anweisung des Inhabers: nicht anfassen. */ font-size: 13px; line-height: 1.45; text-decoration: none; } .megamenu a:hover { color: #009900; /* 08.09.2026: hier stand ein Rot, beanstandet. kk-live setzt KK-Gruen rgb(0,153,0). */ text-decoration: underline; } .megamenu img { max-width: 100%; height: auto; } /* --- Schmale Bildschirme: Leiste umbrechen lassen, Panel im Fluss -------- */ @media (max-width: 1024px) { ul.rootmenu-list { display: block; height: auto; text-align: left; } ul.rootmenu-list > li, ul.rootmenu-list > li.nav-1, ul.rootmenu-list > li.nav-2, ul.rootmenu-list > li.nav-3, ul.rootmenu-list > li.nav-4 { display: block; float: none; padding: 10px 12px; } ul.rootmenu-list > li > .megamenu { position: static; box-shadow: none; } .megamenu .root-col-4 { width: 50%; } } @media (max-width: 640px) { .megamenu .root-col-4 { width: 100%; float: none; } } /* =========================================================================== SCHRIFTGROESSE IM AUFGEKLAPPTEN PANEL - Faktor 1,28 Wunsch des Inhabers vom 08.09.2026. *** BEWUSSTE ABWEICHUNG VON 1:1 *** kk-live behaelt seine Groessen, der Demoshop bekommt groessere. Das ist KEIN Fehler und darf beim Vergleichslauf nicht als solcher gemeldet werden. Vermerk steht im ARBEITSBUCH zum 08.09.2026. IST, vom Inhaber im Browser ueber computed style gemessen: Ueberschrift (a in div.title) 16 px / 23,2 px / 700 Unterpunkt (a in ul.level3-listing) 13 px / 18,85 px / 300 SOLL, Faktor 1,28, hier zum zweiten Mal nachgerechnet: 16 x 1,28 = 20,48 -> 20,5 px 23,2 x 1,28 = 29,696 -> 29,7 px 13 x 1,28 = 16,64 -> 16,6 px 18,85 x 1,28 = 24,128 -> 24,1 px Das Verhaeltnis Zeilenhoehe zu Schrift bleibt bei 1,45. SCHRIFTSCHNITTE UND FARBEN BLEIBEN UNVERAENDERT - hier wird ausschliesslich font-size und line-height gesetzt. ZUR SPEZIFITAET - gemessene Ursache, warum die Ueberschrift 16 px trug: dev_css/theme-frontend-blank/styles/styles.css enthaelt .rootmenu .title a{color:#242222;font-size:16px} mit Spezifitaet (0,2,1). Meine bisherige Regel .megamenu a hatte nur (0,1,1) und verlor. Die Regeln unten stehen deshalb auf (0,5,3) bzw. (0,5,4) und gewinnen sicher. NICHT ANGEFASST: die Leiste selbst. ul.rootmenu-list > li > a bleibt bei 14 px. 28 Prozent waeren 17,9 px und wuerden die abgenommene Leistenhoehe von 1460 x 40 sprengen. Das entscheidet der Inhaber gesondert. =========================================================================== */ /* Spaltenueberschrift - Spezifitaet (0,5,3) gegen die (0,2,1) des Themes */ .tpl-topnav-desk nav.rootmenu > ul.rootmenu-list > li > .megamenu .root-col-4 > .title a, nav.rootmenu > ul.rootmenu-list > li > .megamenu .root-col-4 > .title a { font-size: 16px; /* 08.09.2026: kk-live-Wert, gemessen */ line-height: 17.76px; /* kk-live-Wert */ font-weight: 700; /* kk-live-Wert */ text-transform: uppercase; /* kk-live-Wert */ font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Der Container div.title selbst - kk-live 15 px / 16,65 px / 700 / uppercase */ .tpl-topnav-desk nav.rootmenu > ul.rootmenu-list > li > .megamenu .root-col-4 > .title, nav.rootmenu > ul.rootmenu-list > li > .megamenu .root-col-4 > .title { font-size: 15px; line-height: 16.65px; font-weight: 700; text-transform: uppercase; font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Unterpunkte - Spezifitaet (0,5,4) */ .tpl-topnav-desk nav.rootmenu > ul.rootmenu-list > li > .megamenu .level3-listing > li > a, nav.rootmenu > ul.rootmenu-list > li > .megamenu .level3-listing > li > a { font-size: 17px; /* 08.09.2026: kk-live-Wert, gemessen. Der Demoshop hatte hier 13 px - er war also schon VOR allen Prozentschritten anders als kk-live. */ line-height: 18px; /* kk-live-Wert */ font-weight: 300; /* kk-live-Wert */ font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Mehr... - kk-live 17 px / 18 px / 300 / rgb(36,34,34). Das Theme setzt Farbe und Schnitt mit !important, aber KEINE font-size; diese Regel kann deshalb ohne !important greifen. */ .tpl-topnav-desk nav.rootmenu > ul.rootmenu-list > li > .megamenu .view-more, nav.rootmenu > ul.rootmenu-list > li > .megamenu .view-more { font-size: 17px; line-height: 18px; font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; }