/* * Kaufstrecke auf dem Handy — Messbefunde 375/768/1280 vom 2026-08-04. * * Gemessen wurde live mit getBoundingClientRect(); die Zahlen in den * Kommentaren sind keine Schätzungen, sondern die Ausgangswerte. * * Der Warenkorb war bei allen drei Breiten sauber (kein Überlauf, die * Positionstabelle stapelt korrekt). Betroffen war allein die Kasse. */ /* ------------------------------------------------------------------------ * 1. Kasse: horizontaler Überlauf von 63 px bei 375 px Breite * * Gemessen: .woocommerce-checkout-review-order-table war 422 px breit in * einem 343-px-Container, dadurch scrollWidth 438 gegen clientWidth 375. * Die Seite ließ sich seitlich schieben — auf dem Handy genau in dem Moment, * in dem der Kunde bezahlen will. * * Ursache ist NICHT zu viel Inhalt, sondern `table-layout: auto` in * Verbindung mit langen deutschen Komposita: die Spaltenbreiten richten sich * nach der min-content-Breite des längsten unteilbaren Wortes — * „Zwischensumme" (141 px) links, „(Versandkostenpauschale):" (227 px) * rechts, zusammen 420 px. Das Elternelement fängt nichts auf * (overflow-x: visible). * * `overflow-wrap: anywhere` erlaubt den langen Wörtern den Umbruch — und zwar * bewusst `anywhere` und nicht `break-word`: nur `anywhere` zählt auch bei der * Berechnung der Mindestbreite mit, die Spalte darf also überhaupt erst * schmaler werden. Genau das nimmt dem Überlauf die Ursache. * * NACHTRAG 2026-08-04, live nachgemessen: Hier stand zuerst zusätzlich * `table-layout: fixed`. Das beseitigte den Überlauf zwar, teilte die Tabelle * aber stur in zwei gleich breite Hälften — die Versandwahl bekam 171 px, die * Beschriftungen brachen auf drei Wörter um und der erklärende Satz wurde * 230 px hoch (Axel-Befund „auf der Kassenseite gibt's auch noch das"). * Mit `auto` verteilt die Tabelle nach Bedarf: Namensspalte 117 px, * Wertspalte 225 px, Versandzeile 343 statt 419 px hoch — und weiterhin KEIN * Überlauf (scrollWidth 375 = clientWidth 375 bei 375 px gemessen). * * `hyphens: manual` statt `auto`: Die automatische Trennung zerlegte * „Bestellung" zu „Bestel-lung" und „Versandkostenpauschale" zu * „Versandkos-tenpauschale", auch wo gar nichts überlief. Der Umbruch wird * bereits von overflow-wrap sichergestellt. * --------------------------------------------------------------------- */ /* * ZWEITER NACHTRAG 2026-08-04, live nachgemessen — und diesmal ALLE Zeilen. * * Der erste Nachtrag (`table-layout: auto`) war ein Rückschritt: Ich hatte nur * die Versandzeile gemessen. Ohne feste Spalten zieht die Tabelle die * Produktspalte auf Mindestbreite zusammen, und `overflow-wrap: anywhere` * erlaubt den Umbruch nach JEDEM Buchstaben — die Spalte wurde einen * Buchstaben breit, „Produkt" stand senkrecht (Axel-Screenshot). * * Zwei Spalten sind bei 343 px schlicht eine zu viel. Deshalb wird die * Bestellübersicht auf schmalen Geräten GESTAPELT, so wie WooCommerce es beim * Warenkorb selbst macht: Tabelle, Zeilen und Zellen werden zu Blöcken, die * Kopfzeile entfällt. Damit gibt es keine Spaltenbreiten mehr, um die man * streiten könnte — jede Zelle hat die volle Breite. * * Gemessen bei 375 px: Produktzelle 341 statt 171 px, Versandzeile 216 statt * 419 px hoch, Tabelle 1096 statt 1120 px, kein Querlauf (scrollWidth 375 = * clientWidth 375). * * `overflow-wrap: break-word` statt `anywhere`: `break-word` zählt bei der * Mindestbreite NICHT mit und kann deshalb keine Spalte mehr kollabieren * lassen. Als Notnagel gegen ein einzelnes überlanges Wort genügt es. * `hyphens: manual`, weil die automatische Trennung „Bestel-lung" erzeugte. */ @media (max-width: 600px) { .woocommerce-checkout-review-order-table { display: block; width: 100%; } .woocommerce-checkout-review-order-table thead { display: none; /* Spaltennamen ohne Spalten sind sinnlos. */ } .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout-review-order-table tfoot, .woocommerce-checkout-review-order-table tr { display: block; width: 100%; } .woocommerce-checkout-review-order-table tr { padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { display: block; width: auto; padding: 0; border: 0; text-align: left; overflow-wrap: break-word; hyphens: manual; } .woocommerce-checkout-review-order-table th { margin-bottom: 2px; } /* * Die Versandzeile ist der breiteste Einzelposten (227 px). Als Liste ohne * Einzug und mit Umbruch passt sie in die Spalte. */ .woocommerce-checkout-review-order-table #shipping_method { margin: 0; padding: 0; list-style: none; } .woocommerce-checkout-review-order-table #shipping_method li { overflow-wrap: anywhere; } /* * Notnagel für den Fall, dass ein künftiger Inhalt (langer Zahlartname, * neue Gebührenzeile) doch wieder breiter wird: dann scrollt die Tabelle * in sich, statt die ganze Seite zu verschieben. */ .woocommerce-checkout-review-order { overflow-x: auto; } } /* ------------------------------------------------------------------------ * 2. Tippziele im Warenkorb * * Gemessen: Mengenfeld 21 px hoch, das „×" zum Entfernen 26×26 px — beides * weit unter den 44 px, die dieses Projekt sich selbst gibt * (siehe Kopf von archive-filters.css). Auf dem Handy trifft man das kaum. * --------------------------------------------------------------------- */ @media (max-width: 600px) { .woocommerce-cart-form .quantity .qty { min-height: 44px; padding: 0.3rem 0.4rem; font-size: 1rem; /* unter 16px zoomt iOS beim Antippen hinein */ } .woocommerce-cart-form .product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 1.4rem; } } /* ------------------------------------------------------------------------ * 3. Produktbild in der Bestellübersicht der Kasse * * Warum in DIESER Datei: sie lädt über zwcl_kaufstrecke_mobil_assets() exakt * auf Warenkorb und Kasse — genau die Reichweite, die das Bild braucht. Eine * eigene Datei wäre eine zusätzliche Anfrage für vier Regeln. (Die Regeln * gelten bewusst auf ALLEN Breiten, nicht nur unter 600 px.) * * Das Bild kommt aus kaufstrecke-bilder.php und steht VOR dem Artikelnamen. * Als Float, damit Name und Variantenangaben daneben weiterlaufen statt * darunter zu rutschen; eine Tabellenzelle schließt Floats ein (display: * table-cell erzeugt einen eigenen Formatierungskontext), die Zeile wächst * also mit und das Bild kann nicht in die nächste Zeile ragen. * * Feste Breite in Pixeln, nicht in Prozent: Auf schmalen Geräten ist die * Bestellübersicht gestapelt (Abschnitt 1), die Zelle also so breit wie die * Seite. Ein prozentuales Bild würde dort mitwachsen und den Namen daneben * erdrücken. * --------------------------------------------------------------------- */ .woocommerce-checkout-review-order-table .zwcl-kaufstrecke-bild { float: left; width: 56px; height: auto; margin: 2px 10px 4px 0; border-radius: 4px; } @media (max-width: 600px) { .woocommerce-checkout-review-order-table .zwcl-kaufstrecke-bild { width: 44px; margin-right: 8px; } } /* ------------------------------------------------------------------------ * 4. Die Versandwahl: linksbündig und als saubere Liste * * LIVE GEMESSEN am 2026-08-04 (Axel-Befund „die Radio Buttons sitzen weit * rechts und drücken die Texte nach rechts raus, an der Kasse nach unten"): * * td der Versandzeile -> text-align: right (aus der Summentabelle geerbt) * ul#shipping_method -> text-align: right (geerbt) * label -> display: inline (woocommerce.css erzwingt das) * * Rechtsbündig ist für BETRÄGE richtig — für eine Auswahlliste nicht. Der * Auswahlknopf klebte am rechten Rand, die Beschriftung franste nach links * aus, und der erklärende Satz unter der Abholung wurde aus der Spalte * gedrückt. Beträge daneben bleiben unangetastet: die Ausrichtung wird nicht * an der Zelle geändert, sondern direkt an der Liste — eine gesetzte Regel * schlägt eine geerbte, ganz ohne Wettlauf um Spezifität. * * Raster statt Fließtext, damit die Zusatzzeile (erklärender Satz) an der * Kante der Beschriftung beginnt und nicht unter dem Knopf. * --------------------------------------------------------------------- */ #shipping_method { margin: 0; padding: 0; list-style: none; text-align: left; } #shipping_method li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px 8px; padding: 4px 0; text-align: left; } #shipping_method li input[type="radio"] { margin: 3px 0 0; float: none; } /* * woocommerce.css setzt `.woocommerce ul#shipping_method li label * {display: inline}` — im Raster braucht die Beschriftung eine eigene Spalte, * sonst rutscht sie zurück in den Fließtext. `body` davor hebt die * Spezifität über die Woo-Regel, unabhängig von der Ladereihenfolge der * Stylesheets (die ist bei Plugin-CSS nicht garantiert). */ body .woocommerce ul#shipping_method li label { display: block; margin: 0; text-align: left; } /* * Der erklärende Satz unter der Abholung hängt an * woocommerce_after_shipping_rate und ist damit ein GESCHWISTER von Knopf und * Beschriftung, kein Kind. Ohne Spaltenangabe landet er deshalb in der ersten * Spalte — also unter dem Auswahlknopf. Genau das war zu sehen. */ #shipping_method li .zwcl-versand-abholung { grid-column: 2; margin-top: 0; } /* * Tippfläche: 44 px gibt sich dieses Projekt selbst (siehe Kopf von * archive-filters.css sowie Abschnitt 2). `pointer: coarse` statt einer * Breitenabfrage — der Finger ist das Problem, nicht das schmale Fenster: ein * Tablet im Querformat ist breit UND wird angetippt. */ @media (pointer: coarse) { #shipping_method li { min-height: 44px; padding: 6px 0; } #shipping_method li input[type="radio"] { width: 20px; height: 20px; margin-top: 2px; } body .woocommerce ul#shipping_method li label { /* Die Beschriftung selbst ist die Tippfläche (label[for] schaltet den Knopf) — deshalb die volle Höhe ausfüllen lassen. */ padding: 4px 0; } } /* ------------------------------------------------------------------------ * 5. Die Bildspalte im Warenkorb auf schmalen Geräten * * LIVE GEMESSEN am 2026-08-04 (Axel-Befund „bis jetzt werden die Bilder noch * nicht im Warenkorb angezeigt, an der Kasse schon"): Es lag NICHT an unserem * Code — WooCommerce blendet die Spalte auf schmalen Geräten selbst aus: * * woocommerce-smallscreen.css, @media (max-width: 768px): * .woocommerce table.cart .product-thumbnail { display: none } * * Genau dort ist das Bild aber am wichtigsten: Wer am Handy bestellt, sieht * sonst nur Text und merkt eine falsch gewählte Farbe erst im Paket. * * Auf schmalen Geräten stapelt Woo die Tabelle zu Karten (`tr td * {display:block}` plus `td::before` mit dem Spaltennamen). Die Zelle wird * deshalb als BLOCK wieder eingeblendet, nicht als Tabellenzelle — und der * Namensvorsatz unterdrückt, sonst stünde über dem Bild ein einsamer * Doppelpunkt (die Zelle trägt kein data-title, cart.php:85). * --------------------------------------------------------------------- */ @media (max-width: 768px) { .woocommerce table.cart td.product-thumbnail, .woocommerce #content table.cart td.product-thumbnail { display: block; text-align: left; padding-bottom: 0; } .woocommerce table.cart td.product-thumbnail::before, .woocommerce #content table.cart td.product-thumbnail::before { content: none; } .woocommerce table.cart td.product-thumbnail img, .woocommerce #content table.cart td.product-thumbnail img { width: 72px; height: auto; border-radius: 4px; } } /* ------------------------------------------------------------------------ * 6. Die Spaltenüberschrift der Versandzeile auf schmalen Geräten * * LIVE GEMESSEN bei 375 px am 2026-08-04 (Axel-Befund „das passt da noch * nicht, und da ist jede Menge Abstand dazwischen"): * * Auf schmalen Geräten blendet WooCommerce das aus und zeigt den * Spaltennamen stattdessen über `td::before` — und zwar GEFLOATET: * * woocommerce-smallscreen.css, @media (max-width: 768px): * .woocommerce table.shop_table_responsive tr td::before * { content: attr(data-title) ": "; float: left; } * * Gemessen war dieser Float 315,4 px breit — die volle Zellenbreite. Unsere * Auswahlzeile ist ein Raster und damit ein eigener Formatierungskontext: Sie * UMFLIESST einen Float nicht, sie weicht ihm aus. Daneben blieb null Platz, * also wurde die erste Möglichkeit auf Breite 0 gequetscht und an den rechten * Rand geschoben; der erklärende Satz brach dort auf 332 px Höhe um. Das war * die große leere Fläche — kein Abstand, sondern Text in einer haardünnen * Spalte außerhalb des Sichtfelds. * * Nur für die Versandzeile aufgehoben: Bei allen anderen Zeilen ist der * gefloatete Name richtig (links der Name, rechts der Betrag). Hier steht * darunter aber keine Zahl, sondern eine Auswahlliste — die braucht die * ganze Breite. * * Gemessen nach der Korrektur: erste Möglichkeit 315 px statt 0, Zeilenhöhe * 367 statt 589 px, kein Querlauf (scrollWidth 375 = clientWidth 375). * * `content` ohne das ": " des Originals — „Wohin soll der Versand Ihrer * Bestellung gehen?:" mit angehängtem Doppelpunkt liest sich falsch. * --------------------------------------------------------------------- */ @media (max-width: 768px) { .woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals td::before, .woocommerce-page table.shop_table_responsive tr.woocommerce-shipping-totals td::before { content: attr(data-title); float: none; display: block; width: auto; text-align: left; margin: 0 0 8px; } .woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals td, .woocommerce-page table.shop_table_responsive tr.woocommerce-shipping-totals td { text-align: left; } } /* ------------------------------------------------------------------------ * 7. An der Kasse wird die Versandart nicht noch einmal gefragt * * Axel 2026-08-04: „Warum habe ich denn jetzt die Frage, wohin geliefert * werden soll, hier nochmal? Bitte auf der Kassenseite den Teil mit der * Lieferung rausnehmen." — Die Wahl ist im Warenkorb getroffen; sie an der * Kasse zu wiederholen macht aus einer Entscheidung eine Rückfrage. * * Warum per CSS und nicht per PHP: Unsere Feststellungszeile * („Versandkostenpauschale 3,90 € — entfällt ab 170,00 €") hängt an * `woocommerce_review_order_after_shipping` und liegt damit INNERHALB des * Blocks `if ( needs_shipping() && show_shipping() )` (review-order.php:67–75). * Wer den Block per Filter abschaltet, nimmt die Pauschale mit — und die muss * nach PAngV § 6 stehen bleiben. Ausgeblendet wird deshalb genau die eine * Auswahlzeile. * * Die Auswahlknöpfe bleiben im Dokument und werden weiter mitgesendet: Die * gewählte Versandart und damit der Betrag bleiben unverändert. Nur gefragt * wird nicht mehr. * * Zwei Klassen im Selektor schlagen die Stapel-Regel aus Abschnitt 1 * (`… tr { display: block }`) unabhängig von der Reihenfolge. * --------------------------------------------------------------------- */ .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals { display: none; }