/* * Produktdetailseite — templates/single-product.html. * * GEMESSEN AM ENTWURF, Abschnitt "07 PRODUKTDETAIL" (26.08.2026): * Raster grid-template-columns:1fr 1fr; gap:48px * Hauptbild width:100%; height:420px; border-radius:20px * Vorschau grid, 4 Spalten, gap:12px, margin-top:14px; * je width:100%; height:84px; border-radius:12px * Kategorie Mulish 11px; letter-spacing:.18em; uppercase; #8E2E94; 700 * Titel Allura 46px; line-height:1.2; #80008B; margin:6px 0 10px * Preis Mulish 800; 28px; #80008B; margin-bottom:18px * Beschreibung Mulish 15px; line-height:1.8; margin-bottom:24px * Mengenwaehler Rahmen 1px rgba(128,0,139,.2); border-radius:40px * Kaufknopf #911694 auf #E9CE7D; padding:15px 24px; border-radius:40px; * Cormorant Garamond 600; 17px; hover #5E0068 + translateY(-2px) * Angaben margin-top:24px; padding-top:20px; * border-top:1px solid rgba(128,0,139,.1); * Mulish 12.5px; line-height:2; #9A3AA0 * Reiter Grund #FEFEBE; padding:48px 56px; * Leiste flex gap:30px, untere Linie rgba(128,0,139,.12); * aktiver Reiter 2px untere Linie #80008B * * 🔴 DIE GALERIE — ENTSCHEIDUNG AUS AUFGABE 1 DES C3-PLANS, GEMESSEN * Der Plan liess offen, ob woocommerce/product-gallery (verlangt den * Vorfahren woocommerce/single-product) oder das freistehende * woocommerce/product-image-gallery genommen wird. Beide wurden gebaut und * an der Instanz angesehen: * * product-image-gallery rendert, ist aber EIN Block ohne Unterbloecke - * Hauptbild und Vorschau sind nicht getrennt * ansprechbar. Der Entwurf braucht aber zwei * verschiedene Hoehen (420 gegen 84) und zwei * verschiedene Radien (20 gegen 12). * product-gallery bringt product-gallery-large-image und * product-gallery-thumbnails als eigene Bloecke - * genau die zwei Groessen des Entwurfs. * * Gewaehlt ist product-gallery. 🔴 ABER: mit dem Attribut "productId":0 * rendert der Wrapper GAR NICHTS - gemessen, die ganze linke Spalte blieb * leer, ohne jede Meldung. OHNE das Attribut nimmt er das Produkt aus der * Abfrage. Wer hier eine 0 einsetzt, weil das Feld "leer" aussehen soll, * loescht die Galerie. * * ⚠️ Die Vorschauleiste rendert bei EINEM Produktbild nichts. Das ist * richtiges Verhalten und dieselbe Klasse wie der Preisfilter ohne * Preisspanne: gemessen erst nachweisbar, als das Testprodukt ein zweites * Bild bekam (13 Fundstellen statt 0). * * Ausschliesslich Token, keine Hexfarbe, keine absolute Laenge (P2). */ /* --- Galerie ------------------------------------------------------------ */ /* * 🔴 WooCommerce stellt Hauptbild und Vorschauleiste NEBENEINANDER - gemessen * am gebauten Stand: Hauptbild 282px breit, Vorschau 115px daneben, beides in * einer 412px-Spalte. Der Entwurf stapelt sie: grosses Bild ueber die volle * Breite, darunter vier Vorschaubilder in einer Reihe. * Der Block hat dafuer KEIN Attribut (block.json kennt nur hoverZoom und * fullScreenOnClick), also gehoert es hierher. */ .hh-produktgalerie { display: flex; flex-direction: column; } .hh-produktgalerie .wc-block-product-gallery-large-image { width: 100%; } /* * ⚠️ object-fit braucht hier den Vorrang. Gemessen: der Block liefert * contain, das Bild stand mit Rand statt formatfuellend - und es ragte * ausserdem aus seinem 282px hohen Behaelter heraus, weil nur das BILD eine * Hoehe bekam. Deshalb bekommt auch der Behaelter dieselbe Hoehe. * * 🔴 Der erste Versuch griff daneben: er sprach das Bild ueber * .wp-block-woocommerce-product-image an - dieses Element gibt es im * gelieferten Markup GAR NICHT. Gemessene Kette: * li.wc-block-product-gallery-large-image__wrapper > a > img * Damit blieb nur der zweiklassige Selektor uebrig, der WooCommerces eigener * Regel gleichkommt - und bei Gleichstand entscheidet die Ladereihenfolge, * nicht die Absicht. Der dreiklassige Selektor unten gewinnt in jedem Fall. */ .hh-produktgalerie .wc-block-product-gallery-large-image, .hh-produktgalerie .wc-block-product-gallery-large-image__inner-blocks { height: var(--wp--custom--abmessung--galerie-gross); } .hh-produktgalerie .wc-block-product-gallery-large-image .wc-block-product-gallery-large-image__wrapper img, .hh-produktgalerie .wc-block-product-gallery-large-image img { width: 100%; height: var(--wp--custom--abmessung--galerie-gross); /* !important, weil WooCommerce object-fit:contain SELBST mit !important setzt (product-gallery-style.css, Regel .wc-block-components-product-image--aspect-ratio-auto img). Gemessen: das Bild traegt inline style="object-fit:cover" und die berechnete Eigenschaft blieb trotzdem contain - gegen !important kommt weder ein Inline-Stil noch ein dreiklassiger Selektor an. Dieselbe Lage wie bei den Farben der Mengenblase im Kopfbereich. */ object-fit: cover !important; border-radius: var(--wp--custom--radius--galerie); display: block; } .hh-produktgalerie .wc-block-product-gallery-thumbnails { margin-top: var(--wp--preset--spacing--40); gap: var(--wp--preset--spacing--30); } .hh-produktgalerie .wc-block-product-gallery-thumbnails img { width: 100%; height: var(--wp--custom--abmessung--galerie-vorschau); object-fit: cover; border-radius: var(--wp--custom--radius--vorschau); display: block; } /* --- Angaben rechts ----------------------------------------------------- */ .hh-produkt-preis { font-size: var(--wp--custom--schriftgroesse--produktpreis); } /* * Der Angabenblock (Art.-Nr., Kategorie, Schlagwoerter) traegt im Entwurf * eine Trennlinie ueber sich. woocommerce/product-meta hat dafuer kein * Attribut. */ .hh-produkt-angaben { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); border-top: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft); line-height: 2; } /* --- Kaufbereich -------------------------------------------------------- */ /* * woocommerce/add-to-cart-with-options bringt Mengenwaehler und Knopf als * eine Einheit. Der Entwurf setzt beide nebeneinander, den Knopf dehnbar. */ .hh-produkt-kaufen form, .hh-produkt-kaufen .wc-block-add-to-cart-with-options__form { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; } .hh-produkt-kaufen .wc-block-components-quantity-selector, .hh-produkt-kaufen .quantity { border: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft); border-radius: var(--wp--custom--radius--gross); overflow: hidden; flex: none; } .hh-produkt-kaufen button[type="submit"], .hh-produkt-kaufen .single_add_to_cart_button, .hh-produkt-kaufen .wp-block-button__link { flex: 1; background-color: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--accent-3); border: 0; border-radius: var(--wp--custom--radius--gross); padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); font-family: var(--wp--preset--font-family--subheading); font-size: var(--wp--preset--font-size--large); font-weight: 600; transition: var(--wp--custom--uebergang--ruhig); cursor: pointer; } .hh-produkt-kaufen button[type="submit"]:hover, .hh-produkt-kaufen .single_add_to_cart_button:hover, .hh-produkt-kaufen .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--accent-3); transform: translateY(var(--wp--custom--versatz--knopf-hover)); } /* --- Reiter (Beschreibung / Bewertungen / Versand) ----------------------- */ /* * woocommerce/product-details rendert die Reiterleiste selbst. Der Entwurf * zeigt sie als Textzeile mit Unterstrich am aktiven Reiter, nicht als * Kaesten - WooCommerce liefert ab Werk Kaesten mit Grund und Rahmen. * * 🔴 NACHTRAG 13.09.2026 - DIESE REGELN HABEN SEIT C2 NIE GEGRIFFEN. * Gefunden erst bei der ersten Messung der Schmalansicht, gilt aber genauso * am Desktop: gemessen standen die Reiter als graue Kaesten mit Rahmen und * grauer Schrift da. woocommerce.css schreibt * .woocommerce div.product .woocommerce-tabs ul.tabs li (0,4,3) * und laedt spaeter. Die erste Fassung hier hiess `.hh-produkt-reiter .wc-tabs li` * (0,2,1) - chancenlos. Derselbe Fehlertyp wie in C3 an Konto und Kasse. * Jetzt ueber die am DOM abgelesene Kette * div.woocommerce-tabs.wc-tabs-wrapper > ul.tabs.wc-tabs > li > a * (Leiste 0,5,2, Eintrag 0,5,3, aktiv 0,6,3). Dazu WooCommerces Zierecken * (li::before/::after) und die Grundlinie (ul::before) aus, und die Leiste * bricht um: bei 375px lag "Beschreibung" gemessen links ausserhalb des * Bildes und "Rezensionen" rechts ausserhalb. */ .hh-produkt-reiter div.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs, .hh-produkt-reiter .wc-block-product-details__tabs { display: flex; flex-wrap: wrap; column-gap: var(--wp--preset--spacing--70); row-gap: var(--wp--preset--spacing--30); border-bottom: var(--wp--custom--rand--breite) solid var(--wp--custom--rand--gedaempft); margin: 0 0 var(--wp--preset--spacing--60); padding: 0; list-style: none; overflow: visible; } .hh-produkt-reiter div.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs::before, .hh-produkt-reiter div.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li::before, .hh-produkt-reiter div.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li::after { content: none; } .hh-produkt-reiter div.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li, .hh-produkt-reiter .wc-block-product-details__tab { background: none; border: 0; border-radius: 0; margin: 0; padding: 0 0 var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 700; text-transform: uppercase; color: var(--wp--preset--color--primary-light); } .hh-produkt-reiter div.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li a { padding: 0; color: inherit; font-weight: inherit; text-decoration: none; } .hh-produkt-reiter div.woocommerce-tabs.wc-tabs-wrapper ul.tabs.wc-tabs li.active, .hh-produkt-reiter .wc-block-product-details__tab--active { background: none; color: var(--wp--preset--color--primary); font-weight: 800; border-bottom: var(--wp--custom--rand--breite) solid var(--wp--preset--color--primary); }