/* --- Das Markenlogo oben --- * * Der Shortcode [product_brand] gibt das Logo mit eigener Groessenangabe aus * (max-width 120, max-height 60). Neben der Artikelnummer sah es winzig aus, * weil die Datei selbst klein ist. Hier bekommt es eine verlaessliche Hoehe. */ .brand-logo-box{display:flex;align-items:center} .brand-logo-box img{height:26px!important;width:auto!important;max-width:150px!important; max-height:26px!important;object-fit:contain;object-position:left center} /* --- Artikelnummer oben --- */ /* Artikelnummer und EAN nebeneinander, auf schmalen Geraeten untereinander. */ .sg-ps-kopf{display:flex;flex-wrap:wrap;gap:4px 18px; margin:0 0 4px;font-size:15px;line-height:22px;color:#60646c} .sg-ps-kopf__paar{white-space:nowrap} .sg-ps-kopf__label{color:#8b8f97} .sg-ps-kopf__wert{font-weight:600;color:#3d4149;font-variant-numeric:tabular-nums} /* --- Bildunterschrift --- */ .sg-ps-bildfuss{margin:10px 0 0;font-size:15px;line-height:22px;color:#8b8f97;text-align:center} /* --- Das Produktbild fuellt seine Spalte --------------------------------- * * Thomas am 11.09.2026: „Bei der Produktseite ist immer noch viel zu viel. Es * gibt viel zu viel leeren Space. Vor allem nach dem Bild." * * Gemessen an einem Domotec-Flachboiler: Die linke Spalte ist 673 Pixel breit * und 1144 hoch, das Bild war 363 mal 170 — darunter blieben 955 Pixel leer. * Der Grund liegt in der Galerie: Breakdance gibt dem Slider 87 Prozent * Breite und laesst das Bild in seiner Originalhoehe stehen, statt es auf die * Spalte zu ziehen. * * Jetzt nimmt das Bild die volle Spaltenbreite. Bei diesem Querformat-Bild * sind das 673 statt 363 Pixel — fast doppelt so gross. Die Deckelung bei * 560 Pixel Hoehe sorgt dafuer, dass ein Hochformat-Bild die Seite nicht * sprengt. * -------------------------------------------------------------------- */ /* --- Die Groesse des Produktbilds -------------------------------------- * * ZWEIMAL DANEBEN, BEVOR ES SASS: * * Zuerst war das Bild zu klein — 363 mal 170 Pixel, darunter 955 Pixel * Leerraum. Ursache: 128 Pixel Innenabstand links und rechts an der Spalte * und eine Galerie auf 87 Prozent Breite. * * Danach war es zu gross. Auf volle Spaltenbreite gezogen wurde ein * Hochformat-Bild 577 mal 739 Pixel — und sobald die Seite bei 1100 Pixeln * auf eine Spalte umbricht, ist die Spalte 1060 breit und das Bild wuchs auf * 971 mal 1244. Thomas am 11.09.2026: „Das hast das Bild zu gross gemacht!" * * Der Fehler beide Male: eine PROZENTUALE Breite fuer etwas, das eine * absolute Obergrenze braucht. Ein Produktbild soll nicht mitwachsen, wenn * das Fenster breiter wird — es soll gut lesbar sein und dann aufhoeren. * * Deshalb jetzt eine feste Obergrenze in Pixeln, in beide Richtungen. Die * Galerie-Eigenschaft von Breakdance gibt weiterhin den Rahmen vor (100 %), * begrenzt wird darin. Das sind zwei verschiedene Eigenschaften — width dort, * max-width hier — sie stehen sich nicht im Weg. * -------------------------------------------------------------------- */ /* ======================================================================= * DAS PRODUKTBILD FUELLT SEINEN RAHMEN * * DIE GESCHICHTE DIESER DECKELUNG — drei Anlaeufe: * * 1. Zuerst war das Bild zu klein: 363 x 170 Pixel, darunter 955 Pixel * Leerraum. Ursache waren 128 Pixel Innenabstand und eine Galerie auf * 87 Prozent Breite. * 2. Dann war es zu gross. Auf volle Spaltenbreite gezogen wurde ein * Hochformat 971 x 1244, sobald die Seite einspaltig umbrach. Thomas am * 11.09.2026: „Das hast das Bild zu gross gemacht!" Daraufhin eine feste * Obergrenze von 420 Pixeln. * 3. Am 14.09.2026 gingen die Spalten auf 50/50. Die Bildspalte wurde damit * 673 statt 536 Pixel breit — die 420er Deckelung blieb stehen, und * daneben standen 253 Pixel Weiss, auf JEDER Bildschirmbreite. Thomas: * „katastrophal". * * WAS DARAN FALSCH WAR: Die Grenze sass am Bild statt am Rahmen. Ein Bild * mit fester Maximalgroesse schwimmt in jeder Spalte, die breiter ist. * * 4. Der erste Versuch dagegen war ein fester QUADRATISCHER Rahmen. Er * loeste das Schwimmen, schuf aber ein neues Problem: An 400 Produkt- * bildern gemessen gibt es kein vorherrschendes Format (174 hochkant, * 91 quadratisch, 135 quer). Ein Querformat in einem Quadrat laesst gut * 40 Prozent der Flaeche grau — beim FORS-Schutzbuegel 600 x 600 Rahmen * fuer ein 600 x 400 grosses Bild. Thomas: „es sieht sehr schlecht aus". * * JETZT: Kein Rahmen mehr, der dem Bild eine Form aufzwingt. Das Bild * bestimmt seine Groesse selbst — bis zur Spaltenbreite in die Breite, bis * 600 Pixel in die Hoehe. Ein Querformat wird 600 x 400, ein Hochformat * 330 x 600, ein quadratisches 600 x 600. Kein leerer Rand in keiner * Richtung. * * Das Gegenargument („die Spaltenhoehe springt je Produkt") zaehlt hier * nicht: auf einer Produktseite steht genau EIN Produkt. Springen wuerde es * nur in einem Gitter, und dort gilt die Regel weiterhin. * ==================================================================== */ /* * Der Rahmen bekommt eine eigene Flaeche. * * Ein quadratischer Rahmen mit `contain` laesst bei einem Querformat oben und * unten Platz frei. Auf weissem Grund liest sich dieser Platz als Loch; mit * einem hellen Feld und runden Ecken liest er sich als Bildflaeche — dieselbe * Sprache wie die Kacheln im Archiv und in den Kategorien. */ /* * KEIN RAHMEN UM DAS BILD — ABER RESERVIERTER PLATZ. * * Hier stand ein Passepartout: grauer Grund, Rahmen, abgerundete Ecken. Es * sollte den Weissraum neben dem Bild erklaeren. * * Thomas am 16.09.2026, mit einem Bildschirmfoto der AEG-Waschmaschine: * „Ich weiss nicht was dieser Rahmen bringt. Es hat ja schon teilweise * Modifikationen vom Hersteller, wir müssen nicht auch noch eine Schicht * drüber legen." * * Er hat recht. Die Herstellerbilder sind freigestellt und liegen bereits * auf Weiss. Ein grauer Kasten darum ist eine zweite Schicht um eine erste, * und der Weissraum faellt bei einem weissen Produktbild ohnehin nicht auf. * * Was BLEIBT, ist die reservierte Hoehe. Die hat nichts mit dem Aussehen zu * tun: sie haelt den Platz frei, bis das Bild geladen ist. Ohne sie rutscht * die ganze Kaufspalte, sobald das Bild ankommt — gemessen am 15.09.2026 * ein Sprungmass von 0,134, waehrend jede andere Seite bei 0,012 lag. */ .bde-column .bde-gallery{ width:100%; max-width:none; margin-inline:auto; /* * Das Bild steht MITTIG im reservierten Platz, nicht oben. * * Die reservierte Hoehe ist 520 Pixel, ein typisches Bild 460 — die * uebrigen 60 hingen unten, das Bild klebte an der Oberkante. Jetzt teilt * sich der Rest oben und unten. Gemessen am 16.09.2026: vorher 0 oben und * 60 unten, jetzt 30 und 30. * * Zur Breite, damit es niemand nachmisst und fuer falsch haelt: die * Galerie ist 641 Pixel breit, die Spalte 673. Die Differenz sind KEINE * verlorenen 32 Pixel, sondern der Innenabstand der Spalte zur Textspalte * daneben — Breakdances Spaltenrinne. Das Bild sitzt mittig im * Inhaltsbereich, und das ist richtig so. */ display:flex; align-items:center; justify-content:center; /* Haelt den Platz frei, bis das Bild geladen ist — siehe oben. */ min-height:520px; /* * DER INNENABSTAND MUSS VOM LAYOUT KOMMEN, NICHT VOM BILD. * * Am 17.09.2026 wurden alle 6'423 Hauptbilder am Eckpixel nachgemessen: * 84,0 % weiss oder transparent * 21,4 % zwar weiss, aber das Motiv BERUEHRT den Bildrand * 16,0 % gar nicht weiss — dunkles Studiograu bis Schwarz, oder eine * ganze Kuechenszene (ASKO, FALMEC, Electrolux, MIELE) * * Zusammen sind das 37,4 %, bei denen ein Layout nach dem Muster „Bild * schwebt frei im Weiss" nicht aufgeht. Ohne eigenen Abstand klebt jedes * fuenfte Motiv an der Kante; ohne Rahmen steht bei jedem sechsten ein * harter dunkler Kasten mitten in der weissen Seite. * * Also: eigener Abstand, ein zarter Rahmen als Fassung — und KEIN festes * Seitenverhaeltnis. Nur 25,0 % der Bilder sind quadratisch; 40,6 % sind * hochformatig (bis 1998x2560) und 35,6 % querformatig. Ein quadratisches * Feld wuerde die Hochformate auf halbe Hoehe schrumpfen. */ padding:22px; border:1px solid #f0f0f5; border-radius:16px; background:#fff; } @media (max-width:1023px){ .bde-column .bde-gallery{min-height:390px} } @media (max-width:600px){ .bde-column .bde-gallery{min-height:340px} } /* Der Inhalt der Galerie bleibt auf seiner Breite und steht mittig. */ .bde-column .bde-gallery .ee-gallery, .bde-column .bde-gallery .swiper{max-width:460px;margin-inline:auto} /* * OHNE BILD KEIN RAHMEN. * * 270 Geraete haben kein Produktbild. Fuer sie baut `sg_ps_bildfuss()` eine * Platzhalterflaeche — die Galerie daneben bleibt aber im HTML stehen und * ist nur leer. Mit dem Passepartout wurde daraus ein leerer Rahmen ueber * dem Platzhalter: zwei Kaesten uebereinander, der obere ohne Inhalt. * * `:empty` greift hier nicht, weil die Galerie ein leeres Swiper-Geruest * enthaelt. Gepruefft wird deshalb auf das Bild selbst. */ .bde-column .bde-gallery:not(:has(img)){display:none} .bde-column .bde-gallery .ee-gallery-item-figure{display:flex;align-items:center; justify-content:center} /* * Die Spalte richtet ihre Kinder linksbuendig aus (vorher zentriert) — * gelesen wird von links. */ .bde-column .bde-woo-product-meta, .bde-column .bde-woo-product-meta *{text-align:left!important} .bde-column .bde-gallery .breakdance-image-object{ /* * min-width MUSS hier stehen. Breakdances Slider-Stylesheet setzt * .ee-gallery--slider .ee-gallery-item-figure :where(img,…){min-width:100%} * und in CSS schlaegt min-width jedes max-width — das Bild blieb deshalb * 860 Pixel breit, obwohl max-width auf 360 stand. Gemessen am 11.09.2026. * * Dieselbe Regel setzt ausserdem object-fit:cover, was das Bild beschneidet. */ min-width:0!important; width:auto!important;height:auto!important; max-width:100%!important;max-height:460px!important; margin-inline:auto;object-fit:contain!important;object-position:center } /* Die Bildspalte waechst nicht mit der Textspalte mit. */ .bde-columns > .bde-column:first-child{align-self:flex-start} /* * BROTKRUMEN IN DER BREAKDANCE-VORLAGE: 44 PIXEL KLICKFLAECHE. * * Am 20.09.2026 auf Thomas' Wunsch feiner gestellt — 400 14px/20px in * #4A4F66 statt 700 17px in vollem Indigo, gleiche Werte wie in der eigenen * Vorlage (sanigroup-produkt-entwurf.php Zeile 746). Damit ist die Zeile * aber nur noch 17 Pixel hoch; verlangt sind 44. * * Breakdance bietet dafuer keine Eigenschaft: design.typography kennt Farbe * und Schrift, kein Padding. Deshalb hier, und mit derselben Loesung wie die * eigene Vorlage: 13 Pixel oben und unten an den Link, nicht an den Kasten — * sonst waere der Kasten hoch und das Ziel weiterhin klein. * * Der Aussenabstand nach unten steht im Builder auf 5px (Element 102); vorher * 18 — die 13 Pixel Polster ersetzen ihn, sonst rutscht das Bild nach unten. */ .bde-breadcrumbs a{display:inline-block;padding:13px 0} .bde-breadcrumbs .separator{margin:0 6px} /* * Und die Zeile darf nicht ueber den rechten Rand laufen. Bei langen Namen * ("Waschen und Trocknen - Waermepumpentrockner") stand der Text auf dem * Handy ausserhalb des Fensters, ohne dass die Seite waagrecht scrollte — * sichtbar nur im Bild, nicht in der Messung. Gleiche Lehre wie Zeile 822 * in sanigroup-produkt-entwurf.php. */ .bde-breadcrumbs{display:block;overflow-wrap:anywhere} /* * LEERE KINDER ERZEUGEN TROTZDEM EINEN ZWISCHENRAUM. * * Der Bilderstreifen ([sg_produkt_bildfuss]) gibt bei Geraeten mit nur EINEM * Bild nichts aus — das sind 82 Prozent des Sortiments. Sein Kasten bleibt * aber als Flex-Kind stehen: Hoehe 0, und links und rechts davon je ein * Zwischenraum. Gemessen am 14.09.2026 bei 390 Pixeln: zwischen Bild und * Marke standen 40 statt 20 Pixel, weil zweimal 20 addiert wurden. * * `:empty` trifft hier sicher, weil der Kurzbefehl eine wirklich leere * Zeichenkette liefert — kein Leerzeichen, kein Zeilenumbruch. */ .bde-columns > .bde-column > *:empty{display:none} /* * NUR EINE VERFUEGBARKEITSANGABE. * * Auf nicht lieferbaren Seiten standen zwei uebereinander, 46 Pixel * auseinander (gemessen am 15.09.2026): * * „Nicht mehr lieferbar" — unsere Angabe (span.sg-verf__text) * „Nicht vorrätig" — die von Breakdance (p.stock im Kaufknopf) * * Unsere ist die genauere: sie kennt die Stufen aus der Verfuegbarkeits- * pflege, nicht nur ja/nein. Die andere faellt weg — aber nur dort, wo * unsere wirklich steht. Fehlt sie einmal, bleibt lieber die von * Breakdance stehen als gar keine. */ body:has(.sg-verf) .bde-productbuilder p.stock{display:none} /* ======================================================================= * EIN RHYTHMUS FUER DIE KAUFSPALTE * * Gemessen am 14.09.2026 bei 1600 Pixeln, Abstand zwischen den Bloecken von * oben nach unten: 12, 24, 0, 0, 16, 0, 12 Pixel. Zweimal stiessen zwei * Bloecke ohne jeden Abstand aneinander (Kurztext an Preis, Energielabel an * Verfuegbarkeit), weil der eine einen Aussenabstand unten hatte und der * naechste keinen oben. * * Statt an sieben Elementen einzeln zu schrauben: die Spalte bekommt einen * gleichmaessigen Abstand, und die Einzelabstaende fallen weg. Ein Wert * bestimmt den Rhythmus, nicht sieben. * * `>` MUSS hier stehen — sonst faengt die Regel auch die Kinder INNERHALB * des Kaufbereichs (Montagezeile, Mengenwaehler) und zieht sie * auseinander. * ==================================================================== */ @media (min-width:1024px){ .bde-columns > .bde-column:nth-child(2){ display:flex;flex-direction:column;align-items:stretch;gap:6px} .bde-columns > .bde-column:nth-child(2) > *{margin-top:0!important;margin-bottom:0!important} /* --------------------------------------------------------------------- * GRUPPIERTER ABSTAND STATT GLEICHMAESSIGEM * * Vorher stand hier ein durchgehendes `gap:18px`. Bei acht Bloecken sind * das 126 Pixel reiner Abstand — und davon schiebt jeder einzelne den * Kaufknopf nach unten. Gemessen am 03.11.2026 auf der AEG-Waschmaschine * bei 1280x900: Kaufknopf bei y=856, also unter der Bildschirmkante. * * Thomas dazu: „die alte war etwas kompakter." Nachgemessen stimmt das — * [LIVE] hat den Knopf bei 683. Der Unterschied ist aber nicht Luft * allein: die neue Seite zeigt zusaetzlich Markenlogo, Artikelnummer, * EAN, Energielabel und Lieferzeit. Das soll bleiben. * * Darum: eng, was zusammengehoert, Luft nur zwischen den Gruppen. * * Marke · Artikelnummer/EAN <- Herkunft * Titel · Beschreibung <- was es ist * Preis · Energielabel · Lieferzeit <- was es kostet und wann * Kaufbereich <- die Entscheidung * * Die Gruppengrenzen bekommen `margin-top`, und das muss `!important` * tragen: die Zeile darueber setzt alle Aussenabstaende auf 0. * ------------------------------------------------------------------ */ .bde-columns > .bde-column:nth-child(2) > .bde-heading{margin-top:12px!important} .bde-columns > .bde-column:nth-child(2) > .bde-wooproductprice{margin-top:14px!important} .bde-columns > .bde-column:nth-child(2) > .bde-wooproductcartbutton{margin-top:16px!important} } /* * Die Bildspalte steht mittig zur Kaufspalte. * * Das Bild ist 460 Pixel hoch, die Kaufspalte gut 700. Oben ausgerichtet * blieb darunter ein Block von rund 240 Pixeln Leere; mittig verteilt sich * derselbe Platz oben und unten und liest sich als Rand statt als Loch. */ @media (min-width:1024px){ .bde-columns{align-items:stretch!important} /* * ZURUECK AUF OBEN — UND MITLAUFEND. * * Mittig war ein Fehler. Thomas am 14.09.2026: „sobald ich Montage oder * Offerte klicke wandert alles ploetzlich umher vorallem das Bild" und * „Bild sollte oben sein". * * Beides hat dieselbe Ursache: eine mittig ausgerichtete Spalte richtet * sich an der Hoehe der Nachbarspalte aus. Klappt rechts die Montagewahl * auf, waechst die Kaufspalte um rund 300 Pixel — und das Bild rutscht um * die Haelfte davon nach unten, obwohl sich an ihm nichts geaendert hat. * Ein Bild, das sich bewegt, weil man daneben etwas anklickt, fuehlt sich * kaputt an. * * Oben ausgerichtet steht es fest. Damit unter ihm kein Loch bleibt, * laeuft die Spalte beim Scrollen mit: das Bild bleibt sichtbar, solange * man rechts liest. Das ist auch der Grund, warum `align-self` jetzt * `flex-start` sein MUSS — eine gestreckte Spalte ist so hoch wie die * Zeile und kann darin nirgends kleben. */ /* * 123 UND NICHT 96 PIXEL (03.11.2026). * * Thomas: „Bei der Produktseite beim Scrollen verschwindet das Bild." * Nachgemessen beim Scrollen, nicht bei Scrollstand 0: die klebende * Kopfzeile endet bei 115 Pixeln, die Bildspalte klebte bei 96. Sie * schob sich also 19 Pixel UNTER den Kopf, und oben war das Bild * angeschnitten. * * 123 = 115 fuer den Kopf plus 8 Pixel Luft, damit die Kante nicht * klebt. Wer den Kopf hoeher macht, muss diese Zahl mitziehen — bei * Scrollstand 0 sieht man den Fehler nicht, erst ab etwa 350 Pixeln. */ .bde-columns > .bde-column:first-child{ align-self:flex-start!important; justify-content:flex-start; position:sticky; top:123px; } } /* ======================================================================= * DAS BAND „WAS SIE VON UNS BEKOMMEN“ * ==================================================================== */ .sg-ps-vertrauen{margin:34px 0 0;padding:26px 28px 28px; border:1px solid #ececf1;border-radius:16px;background:#fbfbfd} .sg-ps-vertrauen__titel{margin:0 0 18px;font-size:19px;line-height:27px; font-weight:700;color:#141861} .sg-ps-vertrauen__gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px 40px} .sg-ps-vertrauen__sp h3{margin:0 0 10px;font-size:14px;line-height:20px;font-weight:700; letter-spacing:.02em;text-transform:uppercase;color:#8b8f97} .sg-ps-vertrauen__sp ul{margin:0;padding:0;list-style:none} .sg-ps-vertrauen__sp li{position:relative;margin:0 0 9px;padding-left:22px; font-size:14.5px;line-height:22px;color:#3d4149} .sg-ps-vertrauen__sp li:last-child{margin-bottom:0} /* Der Haken als reines CSS — kein weiteres Bild, das laden muss. */ .sg-ps-vertrauen__sp li::before{content:"";position:absolute;left:2px;top:7px; width:9px;height:5px;border-left:2px solid #141861;border-bottom:2px solid #141861; transform:rotate(-45deg)} /* * ZAHLUNGSARTEN — jedes Logo in einer gleich grossen Kachel. * * Vorher hing der Rahmen am Bild selbst: `height:30px` mit * `box-sizing:border-box` liess vom Bild ganze 20 Pixel Hoehe uebrig, und * die Logos standen in unterschiedlich breiten Kaesten. Bei Apple Pay fiel * es am meisten auf, weil dessen Schriftzug breit und flach ist. * * Jetzt traegt das
  • die Kachel — feste 54x34 Pixel — und das Bild sitzt * mit `contain` mittig darin. Alle sechs Kacheln sind damit exakt gleich * gross, egal welches Seitenverhaeltnis das Logo hat. * * KEIN eigener Rahmen um die Kachel: Apple Pay und TWINT bringen ihren * Rahmen im Logo selbst mit — so schreiben es die Markenrichtlinien vor. * Ein zweiter Rahmen darum sah nach Fehler aus. */ /* Der Block unter dem Kaufknopf. */ /* * DIE ZAHLARTEN STEHEN WIEDER UNTEN — UND ZWAR RICHTIG. * * Zwei Runden, zwei Fehler: * * 1. Sie standen ganz unten, NACH dem Aufklappfeld „Frage zum Gerät" — also * dort, wo sie niemand mehr sieht. Thomas am 16.09.2026: „Es sollte oben * rechts im Block sein bei Order." * 2. Daraufhin habe ich sie mit `order:-1` an den ANFANG der Kaufspalte * geschoben. Ergebnis: ganz oben eine Logoreihe, darunter das Markenzeichen * links und Artikelnummer/EAN rechts, dann erst der Titel. Thomas am * 17.09.2026, mit Bild: „Dann hier oben komplett alles durcheinander." * * Beide Male dasselbe Missverstaendnis: „im Block" heisst nicht „ganz oben auf * der Seite", sondern im KAUFBLOCK — bei der Entscheidung. Also direkt unter * den Kaufknopf, vor das Aufklappfeld. Dort steht es bei galaxus und * nettoshop auch, und dort schaut hin, wer gerade ueberlegt. * * `order` bleibt, aber positiv: der Kaufknopf traegt `order:5`, die Zahlarten * `order:6`, das Aufklappfeld kommt danach. */ .bde-column > .bde-shortcode:has(> .sg-ps-zahlblock){order:6} .bde-column > .bde-wooproductcartbutton{order:5} .sg-ps-anfragepreis{font-size:22px;line-height:1.25;font-weight:700;color:#141861} .sg-ps-zahlblock{display:flex;align-items:center;flex-wrap:wrap; gap:6px 10px;margin:10px 0 2px;padding:0;border-top:0} .sg-ps-zahlblock__titel{font-size:16px;letter-spacing:.2px;color:#8b90a0} .sg-ps-zahlblock__dazu{margin:8px 0 0;font-size:16px;line-height:1.45;color:#60646c} .sg-ps-zahlblock .sg-ps-zahl li{width:40px;height:26px;padding:2px 4px} /* Im Vertrauensband (falls dort je wieder gezeigt) bleibt die alte Groesse. */ .sg-ps-vertrauen__sp .sg-ps-zahl li{width:54px;height:34px;padding:3px 5px} .sg-ps-zahl{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .sg-ps-zahl li{display:flex;align-items:center;justify-content:center; width:54px;height:34px;margin:0;padding:3px 5px;list-style:none; border-radius:var(--sg-radius-s,4px);background:#fff} .sg-ps-zahl img{display:block;width:100%;height:100%;object-fit:contain;object-position:center} .sg-ps-vertrauen__sp .sg-ps-zahl li::before{display:none} .sg-ps-vertrauen__sp--aus{display:none} @media (max-width:560px){ .sg-ps-vertrauen{padding:20px 18px 22px} .sg-ps-vertrauen__gitter{gap:22px} } /* ======================================================================= * DER BILDERSTREIFEN UND DIE PLATZHALTERFLAECHE * ==================================================================== */ .sg-bf{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px;margin:12px 0 0} .sg-bf__mini{display:block;padding:0;aspect-ratio:1/1;overflow:hidden;cursor:pointer; border:1px solid #ececf1;border-radius:8px;background:#fff} .sg-bf__mini img{display:block;width:100%;height:100%;object-fit:contain; padding:5px;opacity:.72;transition:opacity .15s ease} .sg-bf__mini:hover{border-color:#c9c9d1} .sg-bf__mini:hover img{opacity:1} .sg-bf__mini.is-aktiv{border-color:#141861;box-shadow:0 0 0 1px #141861 inset} .sg-bf__mini.is-aktiv img{opacity:1} .sg-bf__mini:focus-visible{outline:2px solid #141861;outline-offset:2px} /* * 270 der 6693 Produkte haben kein Bild. Ohne Platzhalter begann die * Bildspalte dort mit dem Kasten „Lieferung, Garantie und Rückgabe" — die * Seite sah aus, als fehle ein Stueck. Der Platzhalter sagt, was los ist, * und behauptet nichts. */ .sg-bf-leer{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;min-height:240px;padding:28px 24px;text-align:center; border:1px dashed #d9d9e0;border-radius:16px;background:#fbfbfd;color:#8b8f97} .sg-bf-leer svg{width:40px;height:40px;flex:0 0 auto} .sg-bf-leer p{margin:0;max-width:30ch;font-size:14px;line-height:1.5} /* * KEIN LOCH NEBEN DEM KAUFKNOPF, WENN DAS BILD FEHLT. * * Ohne Bild stand links ein 240 Pixel hoher Platzhalter neben einem 773 * Pixel hohen Kaufblock — 533 Pixel Weiss, die wie ein Fehler aussahen. * Jetzt waechst der gestrichelte Rahmen auf die Hoehe der Kaufspalte mit, * genau wie das Passepartout bei Geraeten mit Bild. Das Weiss liegt dann * INNERHALB eines Rahmens und liest sich als Innenabstand. * * Nur ab 1024 Pixel: darunter stehen die Spalten ohnehin untereinander, * und ein 700 Pixel hoher leerer Kasten waere auf dem Handy eine Zumutung. */ @media (min-width:1024px){ body.sg-ps-ohne-bild .bde-columns > .bde-column:first-child{ align-self:stretch!important;display:flex;flex-direction:column} body.sg-ps-ohne-bild .bde-columns > .bde-column:first-child > *{flex:0 0 auto} body.sg-ps-ohne-bild .bde-columns > .bde-column:first-child > .bde-shortcode{ flex:1 1 auto;display:flex;flex-direction:column} body.sg-ps-ohne-bild .sg-bf-leer{flex:1 1 auto;min-height:520px} } /* ======================================================================= * DER UNTERE TEIL: BESCHREIBUNG UND ANGABEN * * Warum das nicht mehr fest zweispaltig ist, steht bei * SG_PS_ZWEISPALTIG_AB. Kurz: bei 79 Prozent der Produkte trug die linke * Spalte zwei Zeilen und die rechte neun. * * Zwei Faelle, beide vom Inhalt bestimmt: * * --zwei lange Beschreibung, mindestens drei Angaben → nebeneinander * --eins alles andere → untereinander, Angaben ueber die volle Breite * in ein, zwei oder drei Spalten (sg_ps_angaben_spalten()). * ==================================================================== */ /* * DER ABSTAND ZWISCHEN DEN BLOECKEN * * Breakdance setzt `.breakdance-woocommerce div.product{display:flex; * gap:var(--bde-woo-base-extra-large-gaps)}` — gemessen 54,8 Pixel zwischen * Brotkrumen, Spalten, Angabenteil und Empfehlung. Zusammen mit dem eigenen * Aussenabstand des Angabenteils standen 99 Pixel Leere dazwischen. * * Wieder die Variable setzen, nicht die Eigenschaft — sonst faellt der * Breakdance-Weg aus und die Spaltenabstaende gleich mit. */ .bde-productbuilder{--bde-woo-base-extra-large-gaps:36px} /* ======================================================================= * DIE SPRUNGLEISTE * * Sieht aus wie Reiter, versteckt aber nichts. Sie klebt oben am Fenster, * solange man sich im unteren Teil der Seite bewegt. * * `top:0` und nicht `top:`: der Seitenkopf dieser Installation * scrollt mit und bleibt nicht stehen — gemessen am 17.09.2026. Bliebe er * stehen, muesste hier seine Hoehe stehen, sonst verschwindet die Leiste * darunter. * ==================================================================== */ .sg-ps-sprung{position:relative;z-index:20; display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain; margin:26px 0 0;padding:0; border-bottom:1px solid #ececf1;background:#fff; scrollbar-width:none} .sg-ps-sprung::-webkit-scrollbar{display:none} .sg-ps-sprung.is-leer{display:none} .sg-ps-sprung__reiter{position:relative;flex:0 0 auto; padding:14px 16px 13px;border:0;background:none;cursor:pointer; font-family:inherit;font-size:17px;line-height:21px;font-weight:600;color:#60646c; text-decoration:none;white-space:nowrap; transition:color .12s ease} /* Ein Abschnitt, der nicht dran ist, bleibt im Quelltext und verschwindet nur aus dem Bild — siehe die Begruendung beim Skript. */ .sg-ps-weg{display:none} .sg-ps-sprung__reiter::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px; height:2px;border-radius:2px;background:transparent;transition:background .12s ease} .sg-ps-sprung__reiter:hover{color:#1c2024;text-decoration:none} .sg-ps-sprung__reiter:focus-visible{outline:2px solid #141861;outline-offset:-2px;border-radius:6px} .sg-ps-sprung__reiter.is-hier{color:#141861} .sg-ps-sprung__reiter.is-hier::after{background:var(--hcl-orange,#FF8C00)} @media (max-width:600px){ .sg-ps-sprung__reiter{padding:13px 12px;font-size:14px} .sg-ps-sprung__reiter::after{left:12px;right:12px} } /* * DIE BREITE GEHOERT GEDECKELT — SONST LAEUFT DER UNTERE TEIL RANDLOS. * * Thomas am 20.09.2026 am Bosch Fettfilter: „Dann geht es bei dem Produkt * datenarm viel zu weit nach aussen, es ist wie full width." * * Gemessen bei 2000 px Fensterbreite in der EIGENEN Vorlage (?pd=1): * .sg-ps-unten 2000 px * .sg-ps-angaben 1946 px * Reiterleiste 2000 px, beginnt bei 0 * Waehrend der obere Teil auf 1240 px zentriert steht. Der Bruch ist in der * Mitte der Seite sichtbar: oben gesetzt, unten randlos. * * In der Breakdance-Fassung faellt es nicht auf, weil dort eine Section mit * container_width 1240 darum liegt. Die eigene Vorlage hat die nicht — die * Deckelung sass nur auf `.sg-pd-werk__innen`, also nur oben. * * 1240 px ist dieselbe Zahl wie in der Breakdance-Section: beide Unterbauten * sollen gleich aussehen, das war die Bedingung der ganzen Runde. */ .sg-ps-unten,.sg-ps-sprung{max-width:1240px;margin-inline:auto} .sg-ps-unten{margin:6px auto 0;padding-top:30px;border-top:1px solid #ececf1} /* Steht die Sprungleiste davor, traegt SIE die Trennlinie nach oben. */ .sg-ps-sprung + .sg-ps-unten{margin-top:0;padding-top:26px;border-top:0} .sg-ps-unten--zwei{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:44px;align-items:start} /* * DER EINSPALTIGE FALL IST EINE KARTE. * * Drei Viertel aller Beschreibungen sind hoechstens fuenf Zeilen lang. Auf * einer 1366 Pixel breiten Flaeche steht dann eine Ueberschrift, ein Satz — * und 900 Pixel Weiss daneben. Das liest sich als Fehler. * * Der Unterschied ist einfach: BEGRENZTES Weiss ist Innenabstand, UNBE- * GRENZTES Weiss ist ein Loch. Sobald Text und Angaben in einer gemeinsamen * Flaeche mit Rahmen stehen, ist der Platz rechts vom kurzen Satz Teil der * Karte — und sieht gewollt aus. */ .sg-ps-unten--eins{display:flex;flex-direction:column;gap:26px; padding:24px 26px 26px;border:1px solid #ececf1;border-radius:16px;background:#fbfbfd} /* In der Karte braucht die Angabenflaeche keinen zweiten Rahmen. */ .sg-ps-unten--eins .sg-ps-angaben{padding:0;border:0;background:transparent} /* Dasselbe fuer das Serviceband: es sitzt jetzt IN der Karte. */ .sg-ps-unten--eins .sg-ps-vertrauen{margin:0;padding:0;border:0;background:transparent} .sg-ps-unten--eins .sg-ps-vertrauen__titel{margin:0 0 18px;color:#141861} .sg-ps-unten h2{margin:0 0 14px;font-size:19px;line-height:27px;font-weight:700;color:#141861} .sg-ps-text__inhalt{font-size:17px;line-height:1.62;color:#3d4149;overflow-wrap:break-word} /* Zwei Zeilen im Kaufbereich standen auf 14 px: die Verfuegbarkeit und das „inbegriffen" in der Lieferzeile. Beide tragen eine Aussage, an der ein Kunde seine Entscheidung festmacht — sie gehoeren nicht zu den Nebenangaben. */ .sg-verf .sg-verf__text{font-size:17px;line-height:1.5} .sg-mz__kurz-text,.sg-mz__kurz-text b{font-size:17px;line-height:1.5} /* * Lesebreite. Ueber rund 75 Zeichen je Zeile findet das Auge den Anfang der * naechsten Zeile nicht mehr zuverlaessig. Im einspaltigen Fall ist die * Flaeche 1366 Pixel breit — ohne Deckelung waeren das 180 Zeichen. */ .sg-ps-unten--eins .sg-ps-text__inhalt{max-width:74ch} .sg-ps-text__inhalt > *:first-child{margin-top:0} .sg-ps-text__inhalt > *:last-child{margin-bottom:0} .sg-ps-text__inhalt h2,.sg-ps-text__inhalt h3,.sg-ps-text__inhalt h4{ margin:22px 0 8px;font-size:16.5px;line-height:24px;font-weight:700;color:#1c2024} .sg-ps-text__inhalt p{margin:0 0 14px} .sg-ps-text__inhalt ul,.sg-ps-text__inhalt ol{margin:0 0 14px;padding-left:22px} .sg-ps-text__inhalt li{margin:0 0 5px} /* ======================================================================= * DIE MERKMALSLISTE * * Fast jede zweite Beschreibung ist eine Komma-Liste (gemessen: 280 von 600). * Als Liste gesetzt liest sie sich in Sekunden statt in Saetzen. * * CSS-Spalten statt Raster — aus demselben Grund wie bei den Angaben: ein * Raster zwingt alle Zellen einer Reihe auf dieselbe Hoehe, Spalten lassen * jeden Eintrag so hoch sein, wie er ist. * ==================================================================== */ /* Am Finger brauchen auch Textlinks 44 Pixel Hoehe. Gemessen am 15.09.2026 auf iPhone SE: „Bauknecht" in den Angaben und „Alle Geräte von Bauknecht" waren 17 Pixel hoch. Die Schrift bleibt, die Flaeche waechst. */ @media (pointer:coarse){ .sg-ps-liste a, .sg-ps-mehr a{display:inline-flex;align-items:center;min-height:44px} /* Auch Bildlinks: das Markenlogo (110x26) und das Energielabel (66x36) waren am Finger zu klein. Das Bild bleibt gleich gross, die Flaeche darum herum waechst. */ .bde-column a:has(> img), .sg-elabel a{display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:44px} } .sg-ps-merkmale{margin:0;padding:0;list-style:none;column-gap:44px} .sg-ps-merkmale--1{columns:1} .sg-ps-merkmale--2{columns:2} .sg-ps-merkmale--3{columns:3} /* Zwei bis vier Merkmale stehen als Schilder nebeneinander, nicht als Liste. */ .sg-ps-merkmale--chips{display:flex;flex-wrap:wrap;gap:9px} .sg-ps-merkmale--chips li{ margin:0;padding:8px 15px;border:0;border-radius:999px; background:#f2f3f8;color:#1c2024;font-size:14.5px;line-height:21px;font-weight:600} .sg-ps-merkmale--chips li::before{display:none} .sg-ps-merkmale li{ break-inside:avoid; position:relative; margin:0; padding:7px 0 7px 22px; border-top:1px solid #ececf1; font-size:15px;line-height:22px;color:#3d4149; } /* Der Punkt sitzt auf der ersten Zeilenhoehe, nicht in der Mitte des Eintrags — sonst rutscht er bei zweizeiligen Merkmalen nach unten weg. */ .sg-ps-merkmale li::before{ content:"";position:absolute;left:4px;top:15px; width:5px;height:5px;border-radius:999px;background:#9aa0ad; } /* Die erste Zeile jeder Spalte braucht keine Linie nach oben. Bei CSS-Spalten weiss man nicht, welches Kind oben steht — deshalb die Linie nach UNTEN setzen und die des ersten Kindes im Dokument entfernen. */ .sg-ps-merkmale li:first-child{border-top:0} @media (max-width:900px){ .sg-ps-merkmale--3{columns:2} } @media (max-width:600px){ .sg-ps-merkmale--2,.sg-ps-merkmale--3{columns:1} } .sg-ps-text__inhalt a{color:#141861;text-decoration:underline;text-underline-offset:3px} /* * TABELLEN IM BESCHREIBUNGSTEXT * * 844 der 6693 Beschreibungen enthalten eine . Gemessen am * 14.09.2026 an der Stiebel-Eltron-Wärmepumpe: bei 320 Pixeln ragte die * Tabelle 1045 Pixel aus der Seite, bei 768 noch 597 — die Seite liess * sich seitlich schieben. * * `display:block` mit `overflow-x:auto` macht aus der Tabelle einen eigenen * Schiebebereich. Sie verliert damit die automatische Spaltenbreite, aber * sie sprengt die Seite nicht mehr, und `min-width:max-content` haelt die * Spalten lesbar breit statt sie zu quetschen. */ .sg-ps-text__inhalt table{display:block;width:100%;max-width:100%;overflow-x:auto; border-collapse:collapse;margin:0 0 16px;font-size:14.5px} .sg-ps-text__inhalt table tbody,.sg-ps-text__inhalt table thead{min-width:max-content} .sg-ps-text__inhalt th,.sg-ps-text__inhalt td{padding:9px 14px 9px 0;text-align:left; vertical-align:top;border-bottom:1px solid #ececf1} .sg-ps-text__inhalt th{font-weight:600;color:#1c2024} .sg-ps-text__inhalt td{color:#3d4149} /* Bilder im Text sprengen sonst dieselbe Spalte. */ .sg-ps-text__inhalt img{max-width:100%;height:auto} /* * Die Angaben bekommen eine eigene Flaeche. * * Ohne sie standen links und rechts zwei verschieden lange Textsaeulen auf * weissem Grund — die kuerzere sah aus wie ein Fehler. Mit Rahmen und * hellem Grund liest sich die kuerzere Seite als Karte neben Text, nicht * als Loch. */ /* * KEIN RAHMEN MEHR (03.11.2026). * * Thomas: „bei den Linien im Bild siehst du eine Linie und dann die Box. * Das neckt sich ein wenig." * * Er hat recht, und die Ursache war eine Inkonsequenz: die Reiterleiste * endet mit `border-bottom:1px solid #ececf1`, und direkt darunter begann * dieser Kasten mit genau derselben Linie in genau derselben Farbe. Zwei * Haarlinien im Abstand von wenigen Pixeln, die keine zwei Dinge trennen. * * Der Nachbarkasten `.sg-ps-blick` hat seit jeher NUR einen Hintergrund und * keinen Rahmen, und der sieht gut aus. Also dasselbe hier: Flaeche statt * Kante, und derselbe Ton wie beim Nachbarn, damit die beiden Kaesten auf * derselben Seite nicht zwei verschiedene Grau zeigen. */ .sg-ps-angaben{padding:20px 22px 22px;border:0;border-radius:16px; background:#f6f7fa} /* * Die Liste. Eine Tabelle bricht auf dem Handy schlecht, darum Zeilen. * Die Spaltenzahl kommt aus PHP als Klasse, damit die Medienabfragen * unten nur die Faelle anfassen, die mehr als eine Spalte haben. */ /* * CSS-SPALTEN STATT RASTER. * * Im Raster fliessen die Zeilen von links nach rechts. Die letzte Zeile * zeigte damit Luecken, und bei knappem Platz stiessen zwei Zellen * aneinander — gesehen am 14.09.2026: „EAN 3838782660016Marke ASKO". * * `columns` fuellt Spalte fuer Spalte und laesst keine Luecke; `break-inside` * haelt eine Zeile zusammen, und der Abstand zwischen den Spalten ist ein * echter Zwischenraum, kein blosser Rasterabstand. */ /* ======================================================================= * „AUF EINEN BLICK" — die Kennzahlen über den Angaben * * Thomas am 16.09.2026 zu den alten Entwürfen: „Auf einen Blick und Angaben * gefällt mir." Vier Kacheln, grosser Wert, kleines Etikett darunter. * * `auto-fit` statt fester Spaltenzahl: bei drei Kacheln füllen sie die * Breite, bei vier ebenso, und auf dem Handy stehen sie zu zweit. Eine * leere Kachel kann so gar nicht entstehen — der Block erscheint ohnehin * erst ab drei (siehe sg_ps_kennzahlen()). * ==================================================================== */ .sg-ps-blick{margin:0 0 30px;padding:22px 24px 24px; background:#f6f7fa;border-radius:var(--sg-radius-l,12px)} .sg-ps-blick h2{margin:0 0 14px;font-size:19px;line-height:1.3;font-weight:700;color:#141861} .sg-ps-blick__reihe{display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .sg-ps-blick__k{padding:15px 17px;background:#fff; border:1px solid #ececf1;border-radius:var(--sg-radius-m,8px)} .sg-ps-blick__k b{display:block;font-size:21px;line-height:1.2;font-weight:700; color:#141861;font-variant-numeric:tabular-nums;overflow-wrap:break-word} .sg-ps-blick__k span{display:block;margin-top:5px;font-size:13.5px;line-height:1.35;color:#60646c} @media (max-width:600px){ .sg-ps-blick{padding:17px 18px 19px} .sg-ps-blick__reihe{grid-template-columns:1fr 1fr;gap:10px} .sg-ps-blick__k{padding:12px 13px} .sg-ps-blick__k b{font-size:19px} } /* ======================================================================= * UNTERLAGEN — Datenblatt, Massskizze, Herstellerseite * * Als beschriftete Wege, nicht als nackte Links: bei einem PDF gehört dazu, * dass es eines ist. Wer auf dem Handy klickt, soll wissen, ob eine Seite * aufgeht oder eine Datei kommt. * ==================================================================== */ .sg-ps-unterlagen{margin:30px 0 0} .sg-ps-unterlagen h2{margin:0 0 12px;font-size:19px;line-height:1.3;font-weight:700;color:#141861} .sg-ps-unterlagen__liste{display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .sg-ps-unterlage{display:flex;align-items:center;justify-content:space-between;gap:14px; min-height:56px;padding:12px 16px;text-decoration:none; border:1px solid #ececf1;border-radius:var(--sg-radius-m,8px);background:#fff; transition:border-color .14s ease,box-shadow .14s ease} .sg-ps-unterlage:hover{border-color:#7a81cc;box-shadow:0 2px 10px rgba(20,24,97,.08)} .sg-ps-unterlage:focus-visible{outline:2px solid #141861;outline-offset:2px} .sg-ps-unterlage__text{min-width:0} .sg-ps-unterlage__text b{display:block;font-size:15px;font-weight:600;color:#141861} .sg-ps-unterlage__text span{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:#60646c} .sg-ps-unterlage__art{flex:0 0 auto;padding:3px 9px;border-radius:var(--sg-radius-s,4px); background:#f6f7fa;color:#60646c;font-size:12px;font-weight:700;letter-spacing:.4px} /* * Die orange Linie unter „Angaben zum Gerät" und „Auf einen Blick". * * Orange ist die zweite Markenfarbe (#FF8C00) und kommt sonst nirgends auf * der Produktseite vor — genau deshalb setzt sie einen Abschnitt ab, ohne * mit dem Indigo der Ueberschrift zu streiten. Aus dem Vorbild vom * 16.09.2026. */ /* * DIE ORANGEN LINIEN SIND WEG. * * Sie standen unter fuenf Ueberschriften auf einer Seite, dazu der orange * Reiterstrich und der orange Punkt im Logo. Thomas am 17.09.2026: „Und * dieses viele Orange überall." * * Orange ist die Akzentfarbe. Eine Akzentfarbe, die fuenfmal auf einer Seite * vorkommt, ist keine mehr — sie wird zur Tapete. Die Abschnitte brauchen sie * auch nicht: sie sind durch Abstand und Schriftgroesse schon getrennt. * * Orange bleibt genau dort, wo etwas Aufmerksamkeit braucht: beim aktiven * Reiter. Einmal pro Seite. */ .sg-ps-angaben h2, .sg-ps-blick h2, .sg-ps-text h2, .sg-ps-vertrauen__titel, .sg-ps-unterlagen h2{position:relative;padding-bottom:0} .sg-ps-liste{margin:0;padding:0;column-gap:48px;border-bottom:1px solid #ececf1} .sg-ps-liste--1{columns:1} .sg-ps-liste--2{columns:2} .sg-ps-liste--3{columns:3} .sg-ps-zeile{break-inside:avoid} /* * Jede Zeile traegt ihre Linie OBEN, nicht unten. Bei zwei oder drei * Spalten laufen die Zeilen von links nach rechts; mit einer Linie unten * fehlte der obersten Zeile jeder Spalte der Abschluss nach oben. */ /* * ETIKETT LINKS, WERT RECHTS — nach dem Vorbild, das Thomas am 16.09.2026 * ausgesucht hat („Dann dieses Angaben-Design ist schön"). * * Der Wert steht rechtsbuendig und fett. Das hat einen Grund ueber den * Geschmack hinaus: die Werte sind meist Zahlen mit Einheit, und * rechtsbuendig stehen die Einheiten untereinander — man vergleicht mit * dem Auge, ohne zu lesen. * * `gap:20px` statt fester Spaltenbreite: ein langes Etikett wie * „Schleuderdrehzahl (max. U/min.)" darf umbrechen, ohne den Wert * wegzudruecken. */ .sg-ps-zeile{display:flex;align-items:baseline;justify-content:space-between; gap:20px;padding:11px 0;border-top:1px solid #ececf1} .sg-ps-zeile dt{flex:1 1 auto;min-width:0;margin:0;font-size:14.5px;line-height:21px;color:#60646c} .sg-ps-zeile dd{flex:0 0 auto;max-width:56%;margin:0;font-size:14.5px;line-height:21px; font-weight:700;color:#1c2024;text-align:right;overflow-wrap:break-word} .sg-ps-zeile dd a{color:#141861;text-decoration:underline;text-underline-offset:3px} .sg-ps-mehr{margin:16px 0 0;font-size:14px;line-height:21px;color:#60646c} .sg-ps-mehr a{color:#141861;font-weight:600;text-decoration:underline;text-underline-offset:3px} /* ======================================================================= * DER KAUFBEREICH NUTZT DIE GANZE SPALTE * * Gemessen am 14.09.2026: die rechte Spalte ist bei 1440 Pixeln 810 breit, * `form.cart` war 360 — 44 Prozent. Breakdance richtet die Spaltenkinder * am Anfang aus, darum nahm das Formular nur seine Inhaltsbreite. * * Folge: die drei Montage-Moeglichkeiten passten nicht in eine Zeile, * jede war 128 statt 66 Pixel hoch, und der Kaufknopf stand bei 1418. * ==================================================================== */ /* * Die Deckelung kommt NICHT aus einer Breite, sondern aus einer Variablen. * Breakdance setzt `.breakdance-woocommerce div.product form.cart{max-width: * var(--bde-woo-forms__wrappers-small)}` — Spezifitaet 0-2-2. Eine eigene * Regel mit `max-width:none` verlor dagegen (0-2-1), gemessen am 14.09.2026. * * Richtig ist, die Variable selbst zu setzen, nicht die Eigenschaft: dann * bleibt der Breakdance-Weg intakt und wirkt nur hier, auf der Produktseite. */ .bde-column .bde-wooproductcartbutton{width:100%;--bde-woo-forms__wrappers-small:100%} /* Der Knopf selbst waechst nicht mit — er bleibt so breit wie sein Text. */ .bde-column .bde-wooproductcartbutton button.single_add_to_cart_button{width:auto;align-self:flex-start} /* ======================================================================= * DIE INNENABSTAENDE DER BILDSPALTE * * Die Spalte trug 96 Pixel unten und 96 rechts (`var(--hss-m)` aus der * Vorlage). Gemessen am 14.09.2026: * * - Unten: bei Geräten, wo die Bildspalte die längere ist (Zubehör ohne * Montagewahl), klafften dadurch 138 Pixel zwischen der letzten * Zeile und dem Angabenteil — 96 Innenabstand plus 36 Zwischen- * raum plus 6 Aussenabstand. * - Rechts: die Spalte ist 536 Pixel breit, der Inhalt war 440. Zusammen * mit dem Spaltenzwischenraum lagen 116 Pixel zwischen Bild und * Text. * * Beides gehört in die Vorlage; der Breakdance-Editor nahm die Eingabe aber * nicht an. Darum hier — mit höherer Spezifität als die Instanzklasse * `.bde-column-32-104` (0-1-0 gegen 0-2-0). Wird es später in der Vorlage * gesetzt, kann dieser Block ersatzlos weg. * ==================================================================== */ @media (min-width:1024px){ .bde-columns > .bde-column:first-child{padding-right:32px;padding-bottom:0} } /* ======================================================================= * KEINE MITLAUFENDE BILDSPALTE — SIE WAERE WIRKUNGSLOS * * Hier stand kurzzeitig `position:sticky` an der Bildspalte, damit das Bild * beim Scrollen stehen bleibt. Nachgemessen am 14.09.2026: es passierte * nichts, und zwar aus einem guten Grund. * * `sticky` braucht Spielraum — das Element muss KUERZER sein als der Kasten, * in dem es sitzt. Nach dem Umbau sind die beiden Spalten aber fast gleich * hoch: * * Waschmaschine links 914, rechts 966 → 52 Pixel Spielraum * FORS-Zubehör links 808, rechts 808 → 0 Pixel * Wärmepumpe links 928, rechts 862 → 0 Pixel (links ist die lange) * * Genau das war das Ziel: keine halbleere Spalte mehr. Damit ist `sticky` * ueberfluessig. Eine Regel, die nichts tut, bleibt nicht stehen — sonst * sucht beim naechsten Mal jemand den Fehler an der falschen Stelle. * ==================================================================== */ /* * Einspaltig ab 1280 Pixeln. * * Thomas am 11.09.2026: „Dann die Spaltenbreite wie so wie vorher machst. * Was ich meinte ist dass wir ab einem gewissen Punkt die Inhalte auf volle * Breite machen!" * * flex-wrap MUSS !important tragen: Breakdance setzt nowrap ueber die * Instanzklasse (.bde-columns-32-103), und ohne Umbruch legen sich die * beiden auf 100 Prozent gestellten Spalten uebereinander statt * untereinander. Gemessen am 11.09.2026: beide bei Position 379, die Seite * scrollte seitlich. */ /* * DIE GRENZE LIEGT BEI 1024, NICHT BEI 1280 — UND DAS IST GEMESSEN. * * Hier stand `max-width:1280px`. Die Grenze ist einschliessend: ein Fenster * von GENAU 1280 Pixeln — eine der haeufigsten Laptop-Breiten, und die * Breite, gegen die dieses Projekt sonst prueft — bekam damit die * Handy-Ansicht. Gemessen auf der AEG-Waschmaschine bei 1280x800: Bild * 380 Pixel breit mit je 423 Pixeln Weiss daneben, Titel bei y=1012, Preis * bei y=1133, Kaufknopf bei y=1374. Auf dem ersten Bildschirm sah man * Brotkrume und einen Bilderrahmen, sonst nichts. * * Wo die Grenze wirklich hingehoert, habe ich gesucht statt geraten — die * zweispaltige Ansicht im Browser erzwungen und nach unten gemessen: * * 1281 603 / 603 Kaufknopf y=856 sauber * 1024 480 / 469 Kaufknopf y=912 sauber, nichts gequetscht * 860 400 / 385 Kaufknopf y=794 Titel wird dreizeilig — zu eng * * 1024 ist ausserdem die Breite, bei der Breakdance ohnehin aufs * Klappmenue wechselt. Darunter ist es ein Tablet, und einspaltig richtig. */ @media (max-width:1023px){ /* --------------------------------------------------------------------- * EINSPALTIG HEISST: BILD, DANN KAUFEN, DANN DER REST. * * Gemessen am 14.09.2026 bei 390 Pixeln: der Titel stand bei 1348, der * Preis bei 1606, der Kaufknopf bei 2381. Grund: untereinander kam erst * die ganze linke Spalte — Bild, „Lieferung, Garantie und Rückgabe", * Zahlungsarten — und erst danach Titel und Preis. * * `display:contents` loest die beiden Spalten auf, ihre Kinder werden * Geschwister, und `order` bringt sie in die richtige Folge: * * 0 das Bild * 1 alles aus der Kaufspalte (Marke, Titel, Preis, Montage, Knopf) * 5 der Rest der Bildspalte (Lieferhinweise, Zahlungsarten) * * Innerhalb derselben Ordnungszahl bleibt die Reihenfolge aus dem * Quelltext erhalten — es braucht also keine Nummer je Element. * ------------------------------------------------------------------ */ .bde-columns{display:flex!important;flex-direction:column!important; flex-wrap:nowrap!important;gap:20px} .bde-columns > .bde-column{display:contents!important} .bde-columns > .bde-column > *{order:5} /* * `:first-child`, NICHT `.bde-gallery`. Die Zahlungslogos sind ebenfalls * eine Galerie — mit `.bde-gallery` sprangen sie am 14.09.2026 auf dem * Handy direkt unter das Produktbild, noch vor Titel und Preis. * Das Produktbild ist das erste Kind der Bildspalte. */ /* * Die ersten ZWEI Kinder der Bildspalte: die Galerie und der Streifen * darunter (bei Geraeten ohne Bild die Platzhalterflaeche). Sie gehoeren * zusammen und muessen beide vor den Kaufbereich. * * `:nth-child`, NICHT `.bde-gallery`: die Zahlungslogos sind ebenfalls * eine Galerie und sprangen damit am 14.09.2026 auf dem Handy direkt * unter das Produktbild, noch vor Titel und Preis. */ /* * Seit dem 14.09.2026 traegt die Bildspalte nur noch Galerie und * Bilderstreifen — „Lieferung, Garantie und Rückgabe" und die * Zahlungsarten stehen jetzt im Band „Was Sie von uns bekommen“ weiter * unten. Die Ordnungsregel bleibt trotzdem stehen: sie kostet nichts und * haelt die Reihenfolge richtig, falls wieder etwas dazukommt. */ .bde-columns > .bde-column:first-child > *:nth-child(-n+2){order:0} .bde-columns > .bde-column:nth-child(2) > *{order:1} /* * DERSELBE RHYTHMUS WIE AM RECHNER. * * Die Regel weiter unten gilt erst ab 1024 Pixeln. Einspaltig blieben die * Einzelabstaende der Elemente stehen und ergaben mit dem Zwischenraum der * Spalte zusammen 40, 32, 44, 20, 36, 20, 32 Pixel — gemessen am * 14.09.2026 bei 390 Pixeln. Auf einem Handy faellt Ungleichmass mehr auf * als am Rechner, weil man alles untereinander sieht. * * Jetzt bestimmt auch hier der Zwischenraum der Spalte allein. */ .bde-columns > .bde-column > *{margin-top:0!important;margin-bottom:0!important} .bde-columns > .bde-column:nth-child(2) > .bde-wooproductcartbutton{margin-top:6px!important} .sg-ps-unten--zwei{grid-template-columns:minmax(0,1fr);gap:30px} /* Einspaltig ist die Spalte so breit wie das Fenster — der RAHMEN wird begrenzt, nicht das Bild darin. */ .bde-column .bde-gallery{max-width:380px} /* * Einspaltig ist die Flaeche so breit wie das Fenster. Der Kaufbereich * bekommt eine Obergrenze, sonst stehen Radioknopf und Preis einer * Montagezeile 900 Pixel auseinander. */ .bde-column .bde-wooproductcartbutton{--bde-woo-forms__wrappers-small:660px} .sg-ps-liste--3{columns:2} } @media (max-width:1023px){ .bde-productbuilder{--bde-woo-base-extra-large-gaps:26px} .sg-ps-unten{margin-top:4px;padding-top:24px} .sg-ps-unten--eins{gap:26px} } @media (max-width:700px){ .sg-ps-liste--2,.sg-ps-liste--3{columns:1} /* * Die Brotkrumen bleiben in einer Zeile und lassen sich schieben. * Bei 390 Pixeln brach „Haushaltgeräte - Waschen Trocknen und Saugen - * Waschmaschine" auf drei Zeilen um, jede 44 Pixel hoch, und die * Trennstriche standen am Zeilenende in der Luft. Gemessen 14.09.2026. */ .bde-breadcrumbs,.woocommerce-breadcrumb,.rank-math-breadcrumb{ display:block;white-space:nowrap;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none} .bde-breadcrumbs::-webkit-scrollbar,.woocommerce-breadcrumb::-webkit-scrollbar, .rank-math-breadcrumb::-webkit-scrollbar{display:none} } /* * DIE REITERLEISTE LIEF AUS DEM BILD (14.10.2026). * * Gemessen bei 390 Pixeln: clientWidth 350, scrollWidth 768 — 418 Pixel * Ueberlauf. „Lieferung und Montage" lag von 361 bis 570, „Weitere Geräte * von …" von 574 bis 788. Beide standen vollstaendig ausserhalb des Fensters. * * Die Leiste war seitlich schiebbar, aber `scrollbar-width:none` nimmt den * einzigen Hinweis darauf weg. Zwei von fuenf Wegen waren damit unsichtbar, * und ausgerechnet der zu Lieferung und Montage — die Frage, die bei diesen * Geraeten zuerst kommt. * * Auf schmalen Fenstern bricht sie jetzt um. Das kostet eine Zeile und * verlangt keine Geste, die niemand findet. Der Strich unten faellt dabei * weg: ueber zwei Zeilen gezogen saehe er aus wie ein Trennfehler — die * Markierung sitzt ohnehin am Reiter selbst. */ @media (max-width:767px){ .sg-ps-sprung{flex-wrap:wrap;gap:2px 4px;overflow-x:visible;border-bottom:0; padding-bottom:6px} .sg-ps-sprung__reiter{padding:10px 12px 9px;font-size:15.5px} } @media (max-width:560px){ .sg-ps-angaben{padding:16px 15px 18px} .sg-ps-unten--eins{padding:18px 16px 20px;gap:22px} .sg-ps-zeile{flex-direction:column;gap:2px;padding:10px 0} .sg-ps-zeile dt{flex:0 0 auto;font-size:13.5px} .bde-column .bde-gallery{max-width:320px} }