/* ========================================================================= * DIE TOKENS — Ecken und Linien für den ganzen Shop * * DER BEFUND (16.09.2026, gemessen über Startseite, Kategorie, Produktseite * und Montagepreise): ZWÖLF verschiedene Eckenradien im Einsatz — * 4, 6, 7, 8, 9, 10, 11, 12, 14, 16, 500 und 999 Pixel — und SIEBEN kaum * unterscheidbare Grautöne für ein und dieselbe Haarlinie. * * 9 und 10 Pixel standen je 25 mal nebeneinander. Den Unterschied sieht * niemand, aber die Summe wirkt unruhig: Kacheln neben Kacheln, die nicht * ganz gleich sind. * * Dazu kam: `var(--sg-radius-m, 8px)` wurde an mehreren Stellen benutzt, * aber die Variable war NIRGENDS definiert. Es griff immer der Ersatzwert. * Hier steht sie jetzt — an genau einer Stelle, die auf jeder Seite lädt. * * Die Leiter ist bewusst kurz. Wer eine neue Ecke braucht, nimmt die * nächstliegende Stufe statt eines neuen Werts. * ==================================================================== */ :root{ --sg-radius-s:4px; /* Plättchen, kleine Marken */ --sg-radius-m:8px; /* Knöpfe, Eingabefelder */ --sg-radius-l:12px; /* Karten, Kacheln, Kästen */ --sg-radius-xl:16px; /* grosse Flächen, Passepartout */ --sg-radius-pille:999px; --sg-linie:#ececf1; /* Haarlinie, kaum sichtbar — trennt */ --sg-rand:#d9d9e0; /* sichtbarer Rand — fasst ein */ --sg-rand-stark:#c9c9d1; } /* * ZWEI FREMDE ECKEN AUF DIE LEITER. * * Breakdance rundet sein Klappmenue mit 6 px, FiboSearch sein Suchfeld mit * 10 px. Beides steht im Kopf, direkt nebeneinander — und damit standen dort * drei verschiedene Rundungen auf einem Bildschirmabschnitt: 6, 8 und 10. * Den einzelnen Unterschied sieht niemand, die Summe wirkt unruhig. * * Nur diese beiden: sie sind gross, sichtbar und sitzen nebeneinander. Die * uebrigen fremden Werte (500 px an Breakdance-Pillen, 6 px an * Galeriebildern) bleiben unangetastet — 500 px und 999 px sehen an einem * kleinen Element ohnehin gleich aus. */ .breakdance-dropdown-body{border-radius:var(--sg-radius-m,8px)} .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp, .dgwt-wcas-search-wrapp .dgwt-wcas-search-input{border-radius:var(--sg-radius-m,8px)} /* ========================================================================= * Mega-Menue — Aussehen * * Alle Werte stammen aus der Vermessung von 13 Fachhandels-Menues * (Digitec, Galaxus, Fust, MediaMarkt, expert, Otto, Miele, V-ZUG, Quooker, * Geberit, Richner, Sabag, Hornbach), nicht aus dem Bauchgefuehl: * Eintrag 14 px / Zeilenhoehe 20 / Gewicht 400 (Median der 13) * Gruppentitel 15 px / Gewicht 600, normale Schreibweise, KEINE Versalien * Zeilensprung 32 px * Spaltenrinne 32 px mit 1 px Haarlinie mittig * Kein Schatten, keine Karten, keine Rundungen im Panel * Farbe an genau drei Stellen: aktive Rubrik, "Gesamtes Sortiment", "Aktionen" * ========================================================================= */ /* * Sicherung gegen unerreichbare Panels. * * Ein Aufklappmenue scrollt nicht mit der Seite: was unter dem Fensterrand * liegt, ist weg. Am 14.09.2026 ragte auf 1280x800 jedes der sechs Panels * hinaus, Quooker um 376px. Die Straffung oben loest den Normalfall — dies * hier ist das Netz darunter, falls eine Kategorie spaeter waechst. * * 210px sind Kopfleiste plus Menuezeile plus etwas Luft. */ /* ======================================================================= * DAS SUCHFELD IM KOPF, AUF TABLET UND HANDY-QUER * * FiboSearch zeigt unter 1024 Pixeln ein Lupen-Symbol und klappt daraus ein * Suchfeld auf. Das Feld steht im Fluss in einem 20 Pixel breiten Behaelter * und bekommt von FiboSearch eine feste Breite — auf einem iPhone im * Querformat (844 Pixel) waren das 820 Pixel ab Position 569. Gemessen am * 15.09.2026: es lief unter dem Warenkorb-Symbol hindurch und 545 Pixel aus * dem Bild. Auf dem Bildschirmfoto gut zu sehen. * * Warum es trotzdem kein Querschieben gab: die Kopfleiste schneidet ab. Der * Fehler war also nur sichtbar, nicht messbar — ein Test, der bloss auf * seitliches Scrollen prueft, findet ihn nie. * * Das Feld haengt sich jetzt unter das Symbol und richtet sich nach RECHTS * aus, begrenzt auf die Fensterbreite. Damit kann es nicht mehr hinauslaufen, * egal welche Breite FiboSearch setzt. * ==================================================================== */ @media (max-width:1023px){ /* `.bde-shortcode-102-635` ist der Behaelter des Tablet-/Handy-Suchfelds in der Kopfvorlage (Beitrag 102). Ein Versuch mit `.bde-header` griff nicht — diese Klasse gibt es dort nicht. Gemessene Elternkette: dgwt-wcas-search-wrapp → bde-shortcode-102-635 → bde-div-102-597. */ .bde-shortcode-102-635 .dgwt-wcas-search-wrapp{position:relative} .bde-shortcode-102-635 .dgwt-wcas-search-wrapp .dgwt-wcas-search-form{ position:absolute; top:calc(100% + 8px); right:0; left:auto; position:absolute!important; width:min(460px,calc(100vw - 24px))!important; max-width:calc(100vw - 24px)!important; z-index:60; } } /* Textlinks am Finger: 44 Pixel Hoehe. * Gemessen am 15.09.2026 auf iPhone SE und iPhone 14: die Links im Fuss und * in den Textabschnitten waren 22 Pixel hoch — halb so gross wie ein Finger * breit ist. Die Schrift bleibt, nur die Flaeche waechst. Gilt nur fuer * Bedienung per Finger; mit der Maus zielt man auf 20 Pixel genau. */ /* * ZWEI KLASSEN IM SELEKTOR, UND DAS IST ABSICHT. * * Die Menue-Eintraege stehen ZUSAETZLICH als Breakdance-Selektor in * selectors.css. Die Datei laedt NACH dieser hier — bei gleicher Spezifitaet * gewinnt sie also immer. Das hat am 21.09.2026 dazu gefuehrt, dass diese * Regel hier wirkungslos war: `min-height:44px` aus Breakdance galt auf dem * Handy genauso wie auf dem Schreibtisch, und die 48-Pixel-Regel fuer * Handys weiter unten galt ueberhaupt nicht. * * `.sg-mm .sg-mm__link` hat zwei Klassen und schlaegt eine. Wer hier je auf * eine Klasse zurueckgeht, verliert die Fingerhoehe wieder — lautlos. */ @media (pointer:coarse){ .bde-f-text-link, .bde-text-link, .bde-container-link, .sg-mm .sg-mm__tel, .sg-mm .sg-mm__alle, .sg-mm .sg-mm__mehr{display:inline-flex;align-items:center;min-height:44px} /* * DER MENUEEINTRAG IST DIE GANZE ZEILE, NICHT DAS WORT. * * Hier stand `inline-flex` und die Zeile schrumpfte auf Textbreite. Gemessen * am 21.09.2026 bei 390 Pixeln: die Listenzeile war 343 Pixel breit, das * antippbare Feld bei „Herd" 43,5, bei „Sela" 39 und bei „Alba" 40,2 Pixel * — alle drei unter den 44, die eine Fingerkuppe braucht. Daneben lagen * 300 Pixel, die aussahen wie der Eintrag und nichts taten. */ .sg-mm .sg-mm__link{display:flex;align-items:center;min-height:44px} } /* ======================================================================= * DIE 404-SEITE * * Sie bestand aus „404", „not found" und einem traurigen Gesicht — englisch, * ohne einen einzigen Weg weiter. Gefunden am 15.09.2026. * * Jetzt steht dort ein deutscher Satz und drei Wege: alle Geräte, die * Montagepreise, und uns fragen. Das Suchfeld ist ohnehin im Kopf. * * Gezielt auf die Klassen, die Breakdance selbst vergibt: freie Namen aus * `meta.classes` rendert es nicht — geprüft am 15.09.2026, im HTML standen * nur `bde-f-container-7-106` und `bde-f-text-link-7-107` bis `-109`. * Die Nummern gehören zur Vorlage 7 und sind stabil. * ==================================================================== */ .bde-section-7-100 .section-container{max-width:760px;margin-inline:auto;text-align:center} .bde-f-container-7-106{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px} .bde-f-text-link-7-107, .bde-f-text-link-7-108, .bde-f-text-link-7-109{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:0 22px;border-radius:12px; font-weight:600;font-size:15.5px;text-decoration:none; transition:background .12s ease,border-color .12s ease} .bde-f-text-link-7-107{background:var(--hcl-brand-9,#141861);color:#fff} .bde-f-text-link-7-107:hover{background:#0f1149;color:#fff;text-decoration:none} .bde-f-text-link-7-108, .bde-f-text-link-7-109{background:#fff;color:var(--hcl-brand-9,#141861); border:1px solid var(--hcl-neutral-6,#d9d9e0)} .bde-f-text-link-7-108:hover, .bde-f-text-link-7-109:hover{background:var(--hcl-neutral-2,#f9f9fb); border-color:var(--hcl-brand-9,#141861);color:var(--hcl-brand-9,#141861);text-decoration:none} .bde-f-text-link-7-107:focus-visible, .bde-f-text-link-7-108:focus-visible, .bde-f-text-link-7-109:focus-visible{outline:2px solid var(--hcl-brand-9,#141861);outline-offset:3px} .sg-mm{background:#fff} /* Der Deckel gehoert an die Aufklappflaeche selbst, nicht an unseren Inhalt. * Beim Markenpanel legt Breakdance Polster um den Shortcode — ein Deckel * weiter innen misst daran vorbei (gemessen: Inhalt 582px, Flaeche 668px). * * Nachgemessen am 17.09.2026: das Polster sitzt auf * `.breakdance-dropdown-custom-content`, nicht auf `.breakdance-dropdown-body`. * Die alte Zeile zielte eine Ebene zu hoch und hat nie gewirkt — deshalb war * das Quooker-Panel 84px hoeher als noetig und scrollte auf 13-Zoll-Fenstern. * Die Kategorieflaechen haben dieses Polster nicht; nur die drei * Markenflaechen (Quooker, Boiler, Enthaertung) sind im Kopf so eingestellt. */ .breakdance-dropdown-floater:has(.sg-mk) .breakdance-dropdown-body, .breakdance-dropdown-floater:has(.sg-mm) .breakdance-dropdown-body, .breakdance-dropdown-floater:has(.sg-mk) .breakdance-dropdown-custom-content, .breakdance-dropdown-floater:has(.sg-mm) .breakdance-dropdown-custom-content{padding:0} .breakdance-dropdown-floater:has(.sg-mm), .breakdance-dropdown-floater:has(.sg-mk){ max-height:calc(100vh - 230px);overflow-y:auto;overscroll-behavior:contain} /* * AUF DEM HANDY UND DEM TABLET DARF NICHTS GEDECKELT WERDEN. * * Die Deckelung oben ist fuer das Aufklappmenue am Rechner gedacht: dort * haengt das Panel frei im Fenster und darf nicht ueber die Unterkante * hinauslaufen. Im eingeklappten Burger-Menue ist die Lage umgekehrt — die * Liste steht in einer eigenen Scrollflaeche, und die Deckelung schneidet * den Inhalt einfach ab. * * Gemessen am 17.09.2026 auf 390x844: Rahmen 614 px, Inhalt 1813 px — * 1199 px unerreichbar. Von 33 Links unter „Haushaltgeräte" waren 11 zu * sehen. Die Liste endete nach „Kaffeemaschinen" mitten in der Ueberschrift * „Kühlen und Gefrieren" und sprang zu „Sanitär". Betroffen waren alle * sechs Menuepunkte, auf dem Handy und auf dem Tablet (768x1024: 15 von 33). * * Scrollen half nicht: der Rahmen traegt im Burger-Menue `overflow-y:hidden` * (von Breakdance fuer die Aufklapp-Bewegung), unsere `auto`-Regel greift * dort nicht durch. Also wird die Deckelung unterhalb von 1024 px ganz * aufgehoben — die Menueliste selbst scrollt ohnehin. */ /* * NACHTRAG 21.09.2026: NUR DER OFFENE EINTRAG DARF SICH AUSDEHNEN. * * Die Regel unten stand ohne Zustandsbedingung da und galt damit auch fuer * die sieben ZUGEKLAPPTEN Panels. Breakdance setzt deren Rahmen zwar auf * Hoehe 0, aber mit `overflow:visible` zaehlt der Koerper darin trotzdem im * Rollbereich mit. * * Gemessen am 21.09.2026 bei 390x844, alle Punkte zugeklappt: die Menueliste * meldete scrollHeight 1941 px bei clientHeight 844 px. Der letzte Menuepunkt * endete bei y=588 — darunter 1'353 Pixel nichts. Wer wischte, landete nach * 1'097 Pixeln auf einer weissen Flaeche mit Logo und Schliessen-Kreuz, und * kein einziger Menuepunkt war mehr im Bild. Die Summe aller sieben * zugeklappten Koerper: 8'444 Pixel. * * Mit der `:not(--open)`-Zeile faellt scrollHeight auf 844 px — gleich * clientHeight, also gar kein Rollbereich mehr. Das `!important` ist noetig, * sonst gewinnt die Breakdance-Regel. */ @media (max-width:1023px){ .breakdance-dropdown--open .breakdance-dropdown-floater:has(.sg-mm), .breakdance-dropdown--open .breakdance-dropdown-floater:has(.sg-mk){ max-height:none!important;overflow:visible!important} .breakdance-dropdown--open .breakdance-dropdown-floater:has(.sg-mm) .breakdance-dropdown-body, .breakdance-dropdown--open .breakdance-dropdown-floater:has(.sg-mk) .breakdance-dropdown-body{ max-height:none!important;overflow:visible!important} .breakdance-dropdown:not(.breakdance-dropdown--open) .breakdance-dropdown-floater{ max-height:0!important;overflow:hidden!important} } /* Die Polsterung ist knapp gesetzt, und das ist gemessen, nicht geschaetzt: mit 20/16 endete das Haushaltgeraete-Panel samt Fussband bei 823 Pixeln in einem 800 Pixel hohen Fenster — 23 Pixel des Wegs „Gesamtes Sortiment ansehen" lagen unter der Falz, bei einem Menue, das nicht scrollt. */ .sg-mm__innen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 280px; gap:0;max-width:1406px;margin-inline:auto;padding:14px 20px 10px} /* Spalten durch Abstand getrennt, nicht durch Striche. * * Die Haarlinien liefen ueber die volle Hoehe des Panels — auch dort, wo * eine Spalte nach sechs Eintraegen zu Ende war. Bei „Haushaltgeräte" stehen * elf Eintraege in der ersten und sechs in der zweiten Spalte: vier lange * Striche in einer halbleeren Flaeche. Thomas am 14.09.2026: „Mega menu * braucht auch noch extrem viel polish! Es muss wirklich clean sein." * * Ein Strich, der nichts trennt, weil daneben nichts mehr steht, ist Unruhe. * Weissraum trennt hier besser — nur die Servicespalte behaelt ihre Linie, * weil sie etwas anderes ist als eine Kategorieliste. */ .sg-mm__spalte{padding:0 26px 0 0} /* * Der Showroom steht IMMER in der fuenften Spalte — der einzigen mit fester * Breite (280px). Ohne diese Zeile rutschte er bei Panels mit weniger als * vier Spalten in eine 1fr-Spalte und wurde zu schmal: bei „Sanitär" brach * dadurch „Montag – Donnerstag" auf zwei Zeilen um, waehrend bei * „Haushaltgeräte" daneben dieselbe Zeile Platz hatte. Zwei Panels, zwei * verschiedene Oeffnungszeiten-Bloecke — das sieht aus wie ein Fehler. */ .sg-mm__service{grid-column:5;padding:0 0 0 40px} /* * Schutz fuer den Tag, an dem jemand eine fuenfte Gruppe anlegt. * * Das Raster hat fuenf Spuren, und die fuenfte ist fest fuer den Showroom. * Eine fuenfte Inhaltsspalte wuerde von der Auto-Platzierung genau dorthin * gelegt — beide Bloecke laegen uebereinander. Mit dieser Zeile rutscht sie * stattdessen in die zweite Zeile. Heute hat kein Panel mehr als vier * Gruppen (gezaehlt am 21.09.2026), aber das bleibt nicht so. */ .sg-mm__innen:not(.sg-mm__innen--vier):not(.sg-mm__innen--fuenf) .sg-mm__spalte:nth-of-type(n+5){grid-row:2} .sg-mm__spalte:first-child{padding-left:0} /* ===================================================================== * DIE FRAGE UEBER DER LISTE — aus Thomas' Entwurf vom 21.09.2026. * ================================================================== */ .sg-mm__kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px; max-width:1406px;margin-inline:auto;padding:18px 20px 0} .sg-mm__frage{margin:0;font-size:22px;line-height:1.25;font-weight:700; letter-spacing:-.3px;color:var(--hcl-brand-9,#141861)} /* Der Satz steht NEBEN der Frage, nicht darunter: zwei Zeilen kosten 26 Pixel Hoehe, und ein Aufklappmenue hat keine zu verschenken. Bricht er um (schmale Fenster), rutscht er von selbst in die zweite Zeile. */ .sg-mm__frage-satz{margin:0;font-size:15px;line-height:1.45; color:var(--hcl-neutral-11,#60646c)} /* Vier gleich breite Spalten, kein Showroom-Block. Fest auf vier, damit alle Panels dieselbe Spaltenbreite haben — bei „auto-fit" waere das Sanitaer-Panel dreispaltig und saehe aus wie ein anderes Menue. */ /* * SO VIELE SPALTEN, WIE DER BEREICH HAT — hoechstens fuenf. * * Mit festen vier Spalten hatte „Backen und Kochen" elf Eintraege und war * 393 Pixel hoch, waehrend daneben drei Spalten nach sechs Zeilen aufhoerten. * Ein Panel ist so hoch wie seine laengste Spalte; die 393 Pixel haben das * Ganze 74 Pixel unter den Fensterrand gedrueckt. * * Mit fuenf Spalten ist die laengste acht Zeilen lang. Die Spaltenbreite * bleibt zwischen den Panels gleich, weil `1fr` und `gap` fuer alle * dieselben sind. */ .sg-mm__innen--vier{grid-template-columns:repeat(4,minmax(0,1fr))} .sg-mm__innen--fuenf{grid-template-columns:repeat(5,minmax(0,1fr))} .sg-mm__innen--fuenf .sg-mm__spalte{padding-right:26px} .sg-mm__innen--fuenf .sg-mm__spalte:last-child{padding-right:0} .sg-mm__innen--fuenf .sg-mm__spalte-titel{min-height:0;margin:0 0 10px; padding-bottom:9px;border-bottom:1px solid var(--hcl-neutral-6,#d9d9e0); font-size:16px;font-weight:700;color:var(--hcl-brand-9,#141861)} .sg-mm__innen--vier .sg-mm__spalte{padding-right:32px} .sg-mm__innen--vier .sg-mm__spalte:last-child{padding-right:0} /* Der Strich unter dem Spaltentitel trennt Ueberschrift und Liste, ohne dass es dafuer Weissraum braucht — im Entwurf der sparsamste Griff. */ .sg-mm__innen--vier .sg-mm__spalte-titel{min-height:0;margin:0 0 10px; padding-bottom:9px;border-bottom:1px solid var(--hcl-neutral-6,#d9d9e0); font-size:16px;font-weight:700;color:var(--hcl-brand-9,#141861)} .sg-mm__fuss-satz{margin:0;font-size:14px;line-height:1.4; color:var(--hcl-neutral-11,#60646c)} .sg-mm__fuss-satz b{font-weight:700;color:var(--hcl-neutral-12,#1c2024)} /* Gruppentitel: Platz fuer zwei Zeilen, damit alle Listen gleich hoch beginnen — aber knapper als die 38 Pixel von vorher. Der laengste Titel („Backen, Kochen und Steamen") bleibt bei 1280 Pixeln einzeilig. */ .sg-mm__spalte-titel{display:flex;align-items:flex-start;min-height:30px;margin:0 0 4px; font-size:15px;font-weight:600;line-height:1.3;color:var(--hcl-neutral-12,#1c2024)} /* Ist der Titel ein Link, erbt er Groesse und Farbe des Titels — er soll aussehen wie eine Ueberschrift, nicht wie ein Eintrag mehr. Dass er klickbar ist, zeigt erst der Zeiger und die Unterstreichung beim Ueberfahren. Die Flaeche geht ueber die volle Spaltenbreite, damit man nicht das Wort treffen muss. */ .sg-mm__spalte-titel a, .sg-mm__spalte-titel > span{flex:1 1 auto;color:inherit;font:inherit;text-decoration:none} /* Der Aufklapp-Knopf gehoert dem Handy. Am Desktop steht er im Quelltext, ist aber weg: dort sind alle Gruppen ohnehin offen, und ein Knopf, der nichts zu tun hat, ist ein Knopf zu viel. */ /* Die Markenzeile im Fuss. Die Logos sind unterschiedlich proportioniert — Geberit ist eine breite Wortmarke, Laufen eine schmale. Darum eine feste HOEHE und freie Breite, sonst stehen sie auf verschiedenen Grundlinien. `multiply` nimmt den weissen Rand der SVG gegen den hellen Grund weg. */ .sg-mm__marken-zeile{display:flex;align-items:center;gap:16px;margin:0; font-size:13px;color:var(--hcl-neutral-11,#60646c)} .sg-mm__marken-zeile > span{flex:0 0 auto} .sg-mm__marke{display:inline-flex;align-items:center;min-height:32px; padding:0 2px;opacity:.78;transition:opacity .14s ease} .sg-mm__marke:hover{opacity:1} .sg-mm__marke:focus-visible{outline:2px solid var(--hcl-brand-9,#141861); outline-offset:2px;border-radius:4px} .sg-mm__marke img{height:18px;width:auto;max-width:92px;object-fit:contain; mix-blend-mode:multiply} .sg-mm__auf{display:none} .sg-mm__auf-text{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .sg-mm__spalte-titel a:hover{color:var(--hcl-brand-9,#141861); text-decoration:underline;text-underline-offset:3px} .sg-mm__spalte-titel a:focus-visible{outline:2px solid var(--hcl-brand-9,#141861); outline-offset:2px;border-radius:4px} .sg-mm__liste{list-style:none;margin:0;padding:0} .sg-mm__liste li{margin:0} /* Eine Gruppe, die zwei Spuren belegt: die Ueberschrift steht einmal oben ueber der ganzen Breite, die Eintraege fliessen darunter in zwei Spalten. `grid-auto-flow:column` mit fester Zeilenzahl waere kuerzer, braucht aber die Zahl der Eintraege im Voraus — so fuellt der Browser selbst auf. */ .sg-mm__spalte--breit{grid-column:span 2} /* `columns` und nicht `grid`: ein Raster fuellt ZEILENWEISE, die Liste laese sich dann quer lesen — Backofen, rechts Back-Mikro-Kombi, wieder links Steamer. Der Mehrspaltensatz fuellt erst die linke Spalte fertig und dann die rechte, so wie man eine Liste liest. `break-inside:avoid` haelt einen Eintrag zusammen, falls ein Name einmal zweizeilig wird. */ .sg-mm__spalte--breit .sg-mm__liste{columns:2;column-gap:26px} .sg-mm__spalte--breit .sg-mm__liste li{break-inside:avoid} /* Eintrag: ganze Spaltenbreite klickbar, Balken ragt ueber den Text hinaus */ .sg-mm__link{display:flex;align-items:center;gap:12px;min-height:28px; margin:0 -10px;padding:4px 10px;border-radius:4px; font-size:14px;line-height:20px;font-weight:400; color:var(--hcl-neutral-12,#1c2024);text-decoration:none; transition:background-color .12s ease} .sg-mm__link:hover,.sg-mm__link:focus-visible{background:var(--hcl-neutral-2,#f9f9fb); color:var(--hcl-brand-9,#141861);text-decoration:underline;text-underline-offset:3px} .sg-mm__link:focus-visible{outline:2px solid var(--hcl-brand-9,#141861);outline-offset:-2px} .sg-mm__name{flex:1 1 auto;min-width:0} /* Artikelzahlen: standardmaessig aus. Keiner der 13 Referenz-Shops zeigt sie. */ .sg-mm__zahl{display:none} .sg-mm--zahlen .sg-mm__zahl{display:block;flex:0 0 auto; font-size:12px;font-variant-numeric:tabular-nums;color:var(--hcl-neutral-11,#60646c)} /* Showroom rechts — Text, keine Karte */ .sg-mm__adr{margin:0 0 10px;font-size:14px;line-height:22px;color:var(--hcl-neutral-11,#60646c)} .sg-mm__tel{display:inline-block;margin:0 0 12px;font-size:18px;font-weight:600; font-variant-numeric:tabular-nums;color:var(--hcl-neutral-12,#1c2024);text-decoration:none} .sg-mm__tel:hover{color:var(--hcl-brand-9,#141861)} .sg-mm__service .sg-oeffnung__zeile{padding:1px 0;font-size:13px} .sg-mm__service .sg-oeffnung__tag{color:var(--hcl-neutral-11,#60646c);font-weight:400} .sg-mm__service .sg-oeffnung__zeit{color:var(--hcl-neutral-12,#1c2024)} .sg-mm__service .sg-oz-heute{margin:0 0 8px;font-size:13px;flex-wrap:nowrap} .sg-mm__service .sg-oz-heute__text{flex:1 1 auto;min-width:0} .sg-mm__mehr{display:inline-block;margin-top:12px;font-size:14px;font-weight:500; color:var(--hcl-brand-9,#141861);text-decoration:none} .sg-mm__mehr:hover{text-decoration:underline;text-underline-offset:3px} /* Fussband ueber die volle Breite — wie Fust */ .sg-mm__fuss{border-top:1px solid var(--hcl-neutral-6,#d9d9e0); background:var(--hcl-neutral-2,#f9f9fb)} /* `justify-content:space-between` setzte den Sortiment-Link ans rechte Ende, solange links „Eigene Monteure" stand. Seit das weg ist, war der Link der einzige Inhalt und rutschte nach links. `flex-end` haelt ihn rechts, wo das Auge am Ende eines Panels ohnehin landet — und mit „Aktionen" daneben stehen beide wieder nebeneinander. */ .sg-mm__fuss-innen{display:flex;align-items:center;justify-content:flex-end;gap:22px; gap:16px;max-width:1406px;margin-inline:auto;padding:0 20px;min-height:44px} .sg-mm__alle,.sg-mm__aktion{display:inline-flex;align-items:center;min-height:44px; font-size:14px;font-weight:500;text-decoration:none} .sg-mm__alle{color:var(--hcl-brand-9,#141861)} /* * „Aktionen" war das einzige orange Wort im ganzen Menue und stand ohne * Bezug in der Ecke — es las sich wie ein Versehen, nicht wie eine * Hervorhebung. Als kleines Feld mit hellem Grund ist dieselbe Farbe eine * Auszeichnung: man sieht, dass sie gewollt ist. */ .sg-mm__aktion{padding:0 12px;border-radius:999px; background:var(--sg-accent-hell,#fff4e5);color:var(--sg-accent-dunkel,#b35c00); font-weight:600} .sg-mm__aktion:hover{background:var(--sg-accent,#ff8c00);color:#fff;text-decoration:none} .sg-mm__alle:hover{text-decoration:underline;text-underline-offset:3px} /* --- Baureihen: hier ist die Zahl die Auskunft -------------------------- */ .sg-mm__link--reihe{justify-content:space-between} .sg-mm__link--reihe .sg-mm__zahl{display:inline-block!important;margin-left:auto;padding-left:10px; font-size:13px;color:var(--hcl-neutral-11,#60646c);font-variant-numeric:tabular-nums} .sg-mm__trenner{height:1px;margin:7px 4px;background:var(--hcl-neutral-3,#f0f0f3);list-style:none} /* --- Geraete aus dem Bereich: eine Reihe unter den Spalten -------------- */ /* * 16 PIXEL UNTER DEM FENSTERRAND (21.09.2026). * * Bei 1280x800 begann das Haushaltgeraete-Panel auf 277 und endete auf 816 — * „Gesamtes Haushaltgeräte-Sortiment ansehen" und die drei Geraetekacheln * lagen unter der Falz, bei einem Menue, das nicht scrollt. Die Hoehe haengt * fast ganz an diesem Block: 72 Pixel Kachel plus Abstaende. * * Statt den Block wegzunehmen (er ist der einzige Ort, an dem man im Menue * ein Geraet SIEHT), sind die Abstaende und die Kachelhoehe knapper gesetzt. * Gemessen nachher: Panel endet auf 780 statt 816. */ .sg-mm__kachelblock{grid-column:1/-1;margin-top:8px;padding-top:8px; border-top:1px solid var(--hcl-neutral-3,#ececf1)} .sg-mm__kachelblock .sg-mm__spalte-titel{min-height:0;margin-bottom:5px; font-size:13px;font-weight:600;color:var(--hcl-neutral-11,#60646c)} .sg-mm__kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .sg-mm__kachel{display:flex;align-items:center;gap:10px;min-height:60px; padding:6px 10px;border:1px solid var(--hcl-neutral-6,#d9d9e0);border-radius:12px; background:#fff;text-decoration:none; transition:border-color 120ms ease,background 120ms ease} .sg-mm__kachel:hover{border-color:var(--hcl-brand-3,#e4e6f5);background:var(--hcl-neutral-2,#f9f9fb)} .sg-mm__kachel:focus-visible{outline:2px solid var(--hcl-brand-9,#141861);outline-offset:2px} .sg-mm__kachel-bild{flex:0 0 56px;width:56px;height:56px;object-fit:contain; background:#fff;border-radius:4px} .sg-mm__kachel-tx{min-width:0} /* * Zwei Zeilen fuer den Namen statt Abschneiden. * * „MIELE Staubsauger Boost CX1 125 Gala…" sagt nicht, um welches Geraet es * geht. Zwei Zeilen reichen fuer fast jeden Namen; erst danach wird gekuerzt, * damit die drei Kacheln gleich hoch bleiben. */ .sg-mm__kachel-tx b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;font-size:14px;font-weight:600;line-height:19px; color:var(--hcl-neutral-12,#1c2024)} .sg-mm__kachel-tx span{display:block;font-size:13px;line-height:18px; color:var(--hcl-neutral-11,#60646c)} /* --- So laeuft es bei uns ---------------------------------------------- */ /* * Als Band mit runden Ecken, nicht als randlose Leiste: Die beiden * Menuebauweisen ([sg_megamenu] und [sg_megamenu_marke]) sitzen in * Breakdance-Containern mit unterschiedlichem Innenabstand — gemessen 1364 * gegen 1254 Pixel. Randlos faellt dieser Unterschied als Fehler auf, als * abgesetztes Band liest er sich als Layout. */ .sg-mm__ablauf{margin:0 16px 14px;border-radius:12px; background:var(--hcl-brand-2,#f2f2fa); border:1px solid var(--hcl-brand-3,#e4e6f5)} /* `flex-wrap:wrap` liess den Telefon-Knopf auf eine zweite Zeile rutschen — der Streifen war dadurch 120 statt 70 Pixel hoch. Er bleibt jetzt bis 1119 Pixel einzeilig; darunter greift die Regel im @media-Block. */ .sg-mm__ablauf-innen{display:flex;align-items:center;flex-wrap:nowrap;gap:10px 20px; max-width:1406px;margin-inline:auto;padding:10px 16px} .sg-mm__ablauf-t{margin:0;flex:0 0 auto;font-size:13px;font-weight:700;line-height:20px; color:var(--hcl-brand-9,#141861)} .sg-mm__schritte{list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0; display:flex;align-items:center;flex-wrap:nowrap;gap:8px 14px} .sg-mm__schritte li{display:flex;align-items:center;gap:9px;min-width:0} /* KEINE VERBINDUNGSSTRICHE MEHR. Hier stand ein `li::after` als 14 Pixel langer Strich zwischen den Punkten. Eine Kette liest sich als Ablauf, der durchlaeuft — und genau das stimmt nicht: Montage und Altgeraet nimmt der Kunde dazu oder eben nicht. Dasselbe galt fuer die Nummern 1 bis 4, die jetzt zwei verschiedene Zeichen sind. */ .sg-mm__schritt-n{flex:0 0 24px;width:24px;height:24px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--hcl-brand-9,#141861); background:var(--hcl-brand-9,#141861);color:#fff} .sg-mm__schritt-n svg{width:13px;height:13px;fill:none;stroke:currentColor; stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round} /* Was dazukommt, traegt dasselbe Zeichenmass, aber offen statt gefuellt: gefuellt = gilt immer, offen mit Plus = Sie nehmen es dazu. */ .sg-mm__schritt--dazu .sg-mm__schritt-n{background:#fff; color:var(--hcl-brand-9,#141861)} .sg-mm__schritt-tx{min-width:0} .sg-mm__schritt-tx b{display:block;font-size:14px;font-weight:600;line-height:18px; color:var(--hcl-neutral-12,#1c2024)} .sg-mm__schritt-tx i{display:block;font-style:normal;font-size:12.5px;line-height:17px; color:var(--hcl-neutral-11,#60646c)} .sg-mm__ablauf-tel{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:10px; min-height:44px;padding:5px 14px;border-radius:12px;background:#fff; border:1px solid var(--hcl-brand-3,#e4e6f5);text-decoration:none; transition:border-color 120ms ease} .sg-mm__ablauf-tel svg{width:19px;height:19px;flex:0 0 auto;stroke:var(--hcl-brand-9,#141861); fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .sg-mm__ablauf-tel b{display:block;font-size:15.5px;font-weight:700;line-height:20px; color:var(--hcl-brand-9,#141861)} .sg-mm__ablauf-tel i{display:block;font-style:normal;font-size:12.5px;line-height:17px; color:var(--hcl-neutral-11,#60646c)} .sg-mm__ablauf-tel:hover{border-color:var(--hcl-brand-9,#141861)} .sg-mm__ablauf-tel:focus-visible{outline:2px solid var(--hcl-brand-9,#141861);outline-offset:2px} /* --- schmalere Fenster ------------------------------------------------- */ /* * DIE GRENZE GEHOERT AUF 1120, NICHT AUF 1101. * * Breakdance schaltet die Kopfleiste bei genau 1120 Pixeln auf das * Klappmenue um — gemessen am 15.09.2026: bei 1119 ist der Hamburger da, bei * 1120 nicht mehr. Diese Regel begann aber schon bei 1101. * * In den 19 Pixeln dazwischen lag das Panel im 340 Pixel schmalen Klappmenue * UND bekam drei Spalten: je 97 Pixel breit, also unbrauchbar. Gemessen bei * 1110px. */ @media (max-width:1279px) and (min-width:1120px){ .sg-mm__innen{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;padding:22px 16px 18px} .sg-mm__service{grid-column:1/-1;margin-top:14px;padding-top:14px;padding-left:0; border-left:0;border-top:1px solid var(--hcl-neutral-6,#d9d9e0)} .sg-mm__spalte:nth-child(3n+1){border-left:0;padding-left:0} } /* * EINSPALTIG NUR IM SCHMALEN KLAPP-PANEL — bis 1100 Pixel. * * ZWEI FEHLER NACHEINANDER, BEIDE HIER: * * 1. Am 12.09.2026 bei 1024 x 768: Breakdance zeigt dort schon den * Klappknopf, das Panel ist aber nur 400 Pixel breit. Meine * Einspaltigkeit endete bei 1023, also griff im Panel noch das * Drei-Spalten-Raster — 28 Menuenamen liefen ueber ihren Kasten. * * 2. Die Abhilfe war falsch: die Regel haengte am Panel OHNE * Breitenbedingung. Damit war das Mega-Menue auch bei 1440 Pixeln * einspaltig — eine endlose Liste mit gut 900 Pixeln Leere daneben. * Thomas am 14.09.2026: „Dann das Mega menü scheint kaputt zu sein". * * Nachgemessen am 14.09.2026 ueber zwoelf Fensterbreiten. Breakdance * klappt bei **1100 Pixeln und darunter** zu einem 400-Pixel-Panel * (Klappknopf sichtbar); ab 1120 ist das Panel 1073 bis 1357 Pixel breit. * Der Schnitt liegt also bei 1100, nicht bei 1023 und nicht „immer". */ @media (max-width:1119px){ .breakdance-dropdown-floater .sg-mm__innen{ grid-template-columns:minmax(0,1fr)!important; padding:8px 16px 12px; } .breakdance-dropdown-floater .sg-mm__spalte{border-left:0!important;padding-left:0!important} .breakdance-dropdown-floater .sg-mm__spalte+.sg-mm__spalte{ margin-top:10px;padding-top:10px; border-top:1px solid var(--hcl-neutral-3,#ececf1); } .breakdance-dropdown-floater .sg-mm__kacheln{grid-template-columns:minmax(0,1fr)} .breakdance-dropdown-floater .sg-mm__name{overflow-wrap:anywhere} .breakdance-dropdown-floater .sg-mm__service{grid-column:auto} } @media (max-width:1023px){ /* Im Fluss statt schwebend, Fingergroesse statt Mausgroesse. */ .sg-mm__innen{grid-template-columns:minmax(0,1fr);padding:8px 16px 12px} /* * AUF DEM HANDY NUR DIE FRAGE, NICHT DEN GANZEN KOPF. * * Gemessen bei 390 Pixeln: der Kopfblock war 144 Pixel hoch, der * Ablaufstreifen noch einmal rund 150. Zusammen rund 300 Pixel, bevor der * erste Menuepunkt kommt — bei einem Fenster von 844. Wer im Handy-Menue * einen Punkt aufklappt, sucht einen Weg, keine Verkaufsaussage; die * steht auf der Startseite ohnehin als eigener Abschnitt. * * Die Frage bleibt: sie ist kurz und sagt, worum es in der Liste geht. */ .sg-mm__kopf{padding:12px 16px 0} .sg-mm__frage{font-size:18px} .sg-mm__frage-satz{display:none} .sg-mm__ablauf{display:none} /* Einspaltig gibt es keine fuenfte Spalte — ohne diese Zeile erzwaenge `grid-column:5` vier leere Rasterzeilen ueber dem Showroom. */ .sg-mm__service{grid-column:auto} .sg-mm__spalte{border-left:0;padding:0} .sg-mm__spalte+.sg-mm__spalte{margin-top:10px;padding-top:10px; border-top:1px solid var(--hcl-neutral-3,#ececf1)} /* * DIE GRUPPE WIRD AUF DEM HANDY ZUM AUFKLAPPER. * * Vorher war die Ueberschrift eine 18 Pixel hohe Zeile in blassem Grau — * zum Antippen zu klein und zum Lesen zu leise. Jetzt ist sie eine Zeile * von 48 Pixeln: links der Name als Link auf die Oberkategorie, rechts * ein eigener Knopf von 48 Pixeln zum Aufklappen. */ .sg-mm .sg-mm__spalte-titel{display:flex;align-items:center;gap:8px; min-height:48px;margin:0;font-size:16px;font-weight:600; color:var(--hcl-neutral-12,#1c2024)} .sg-mm .sg-mm__spalte-titel a, .sg-mm .sg-mm__spalte-titel > span{min-height:48px;display:flex;align-items:center} .sg-mm .sg-mm__auf{display:flex;align-items:center;justify-content:center; flex:0 0 48px;width:48px;min-height:48px;padding:0; border:0;background:none;cursor:pointer;color:var(--hcl-neutral-11,#60646c)} .sg-mm .sg-mm__auf svg{width:20px;height:20px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round;stroke-linejoin:round; transition:transform .14s ease} .sg-mm .sg-mm__auf[aria-expanded="true"] svg{transform:rotate(180deg)} .sg-mm .sg-mm__auf:focus-visible{outline:2px solid var(--hcl-brand-9,#141861); outline-offset:-2px;border-radius:6px} /* `data-zu` und nicht `hidden`: eine Klassenregel mit `display` schlaegt das Attribut, und davon gibt es hier mehrere. */ .sg-mm .sg-mm__liste[data-zu]{display:none} /* * Die breite Gruppe ist am Desktop zwei Spuren breit und ihre Liste * zweispaltig. Auf dem Handy ergibt das zwei Spalten von 122 und 206 * Pixeln, in denen sieben Namen mitten im Wort brechen. Hier eine Spur, * eine Spalte. */ .sg-mm__spalte--breit{grid-column:auto} .sg-mm__spalte--breit .sg-mm__liste{columns:1} .sg-mm .sg-mm__link{min-height:48px;margin:0;padding:0 4px;font-size:16px;border-radius:0} .sg-mm__fuss-innen{flex-direction:column;align-items:stretch;padding:6px 16px} .sg-mm__alle,.sg-mm__aktion{min-height:48px;font-size:16px} /* * Auf dem Handy ist die Klappflaeche eine Liste zum Weiterkommen, keine * Auslage. Drei Geraetekacheln machen sie um 320 Pixel laenger, ohne bei * der Frage „wo will ich hin" zu helfen — deshalb bleiben sie hier weg. */ .sg-mm__kachelblock{display:none} .sg-mm__ablauf-innen{display:block;padding:12px 16px} .sg-mm__ablauf-t{margin:0 0 8px} .sg-mm__schritte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .sg-mm__ablauf-tel{display:flex;width:100%;margin-left:0;margin-top:12px;min-height:56px} }