/* ============================================================ Bruecke zwischen WooCommerce-Markup und der Entwurfs-Optik. stil.css ist die Vorlage aus der Klick-Demo und bleibt unveraendert, damit Entwurf und Shop nicht auseinanderlaufen. Hier steht nur, was noetig ist, um die Klassen von WooCommerce und WordPress auf dieselbe Optik zu ziehen. Grundsatz: die Farbregel aus dem Entwurf gilt weiter. Pink gehoert allein dem Warenkorb, alles andere ist Beere, Weiss oder Umriss. ============================================================ */ /* ---------- WordPress-Grundlagen ---------- */ .admin-bar .kopf{ top:32px } @media (max-width:782px){ .admin-bar .kopf{ top:46px } } .screen-reader-text{ position:absolute !important;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);white-space:nowrap; } /* Der Kopf klebt. Ohne das springt die Seite beim Anker. */ html{ scroll-padding-top:130px } /* ---------- Tierwahl sind hier Links, keine Knoepfe ---------- */ .tierwahl a{ font-family:var(--schrift-kopf);font-weight:700;font-size:14.5px; padding:8px 20px;border-radius:99px;background:transparent; color:var(--grau);cursor:pointer;display:inline-flex;align-items:center;gap:7px; text-decoration:none; } /* TIERZEICHEN ALS MASKE (24.08.2026) * * Hier stand .tierwahl a svg{width:18px;height:18px} fuer die selbst * gezeichneten Zeichen. Seit dem 24.08. stecken dort die bei Adobe Stock * gekauften, und die liegen nur als PNG vor, nicht als Vektor. * * Ein PNG kann die Farbe nicht wechseln. Deshalb wird die Datei nicht * angezeigt, sondern als MASKE benutzt: Die Flaeche bekommt currentColor, * die Maske schneidet die Form heraus. Damit folgt das Zeichen der * Schriftfarbe, dunkel auf heller Pille und weiss auf der aktiven. * * 22 px statt 18: In der Vorlage nimmt die Zeichnung nur rund zwei Drittel * der Bildhoehe ein, es ist Luft rundherum eingebaut. Bei 18 px waere das * Zeichen dadurch sichtbar kleiner als das alte. * * Nachgemessen im Browser, damit es nicht bei einer Behauptung bleibt: Die * Zeilenbox des Textes ist 23.2 px hoch, das Zeichen 22 px. Solange das * Zeichen unter 23.2 bleibt, bestimmt der Text die Hoehe und die Pille * aendert sich nicht (gemessen 39.2 px Linkhoehe, 48.2 px Pille). Ab 24 px * waechst sie. Wer also vergroessern will, muss auch die Zeilenhoehe * anfassen, sonst rutscht der Kopf auseinander. * * FALLRUECKZIEHER: Ohne mask-Unterstuetzung bliebe ein farbiges Rechteck * stehen, und das waere schlimmer als kein Zeichen. Deshalb ist die Flaeche * standardmaessig aus und wird erst innerhalb von @supports eingeschaltet. * Dann steht dort nur das Wort "Hund" bzw. "Katze", der Umschalter * funktioniert weiter. */ .tierwahl a .tierzeichen{width:22px;height:22px;flex:none;display:none} @supports ((-webkit-mask-image:url("../img/tier-hund.png")) or (mask-image:url("../img/tier-hund.png"))){ .tierwahl a .tierzeichen{ display:block;background-color:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } } .tierwahl a .tierzeichen-hund{ -webkit-mask-image:url("../img/tier-hund.png");mask-image:url("../img/tier-hund.png"); } .tierwahl a .tierzeichen-katze{ -webkit-mask-image:url("../img/tier-katze.png");mask-image:url("../img/tier-katze.png"); } .tierwahl a[aria-pressed="true"]{background:var(--beere);color:#fff} /* ---------- Produktraster ---------- WooCommerce gibt ul.products aus, nicht .raster. */ ul.products, ul.produkte{ list-style:none;margin:0;padding:0; display:grid;gap:24px;grid-template-columns:repeat(4,1fr); } ul.products li.product, ul.produkte li.product{margin:0;position:relative;list-style:none} /* Der Startseiten-Block traegt .raster aus der Demo UND ist eine Liste. Ohne das doppelte list-style stehen Aufzaehlungspunkte neben den Kacheln. */ ul.produkte li::marker{content:""} .katlayout ul.products{grid-template-columns:repeat(3,1fr)} /* ACHTUNG: hier muss .produkte immer mitgenannt werden. Beim ersten Mal stand es nur in der Grundregel, dadurch blieb der Produktblock der Startseite auf schmalen Schirmen vierspaltig und die Seite lief seitlich ueber (gefunden 21.08.2026). */ @media (max-width:1000px){ ul.products,ul.produkte,.katlayout ul.products{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ ul.products,ul.produkte,.katlayout ul.products{grid-template-columns:1fr} } /* Echte Produktbilder in der Kachel wie der Platzhalter behandeln * * BEFUND 22.08.2026, Michaels Frage "kann man das nicht steuern, dass der * Beutel ganz drauf ist": * Die Kachel erzwang aspect-ratio 1/1 mit object-fit:cover. Damit wurde * jedem Produkt oben und unten der Rand abgeschnitten. * * Nachgemessen: ALLE 57 Produktbilder sind hochformatig, die * Seitenverhaeltnisse liegen zwischen 0,60 und 0,75. Kein einziges ist * quadratisch. Ein quadratischer Rahmen war also von Anfang an die falsche * Form. Bei den Hundebeuteln ist es nur weniger aufgefallen, weil dort * oben und unten weniger Luft war. * * Jetzt 3/4, das haeufigste Verhaeltnis im Sortiment, und * object-fit:contain, damit nichts mehr beschnitten wird. Der Rahmen bleibt * bei allen Kacheln gleich hoch, das Raster steht also weiter sauber. * Schmalere Bilder bekommen links und rechts etwas Creme, das sieht * gewollt aus. * * Die zweite Haelfte der Ursache lag NICHT im CSS: WooCommerce hat die * Kachelbilder schon beim Erzeugen quadratisch beschnitten * (woocommerce_thumbnail_cropping). Steht jetzt auf "uncropped", danach * alle 57 neu berechnet. Ohne diesen Schritt haette contain nur den * bereits abgeschnittenen Ausschnitt gezeigt, und man haette den Fehler * im CSS gesucht. */ .produktkachel img, .produktkachel-bild{ /* Hintergrund WEISS, nicht Creme (Michael, 22.08.2026). * * Mit object-fit:contain bleiben links und rechts Streifen frei, weil die * Bilder schmaler sind als der Rahmen. Diese Streifen zeigen die * Hintergrundfarbe. Die Packshots haben aber selbst weissen Grund, also * stand neben dem weissen Bild ein cremefarbener Balken. Das sah aus wie * ein Fehler im Bild, nicht wie Gestaltung. * * Der Platzhalter fuer fehlende Bilder hat eine eigene Klasse (.bildph) * und ist davon nicht betroffen, der darf cremefarben bleiben. */ width:100%;aspect-ratio:3/4;object-fit:contain;display:block;background:#fff; } .kategoriekachel img{ width:100%;aspect-ratio:3/4;object-fit:cover;display:block; } /* Preis in der Kachel: WooCommerce packt ihn in mit */ .produktkachel-preis .price, .produktkachel-preis bdi{font:inherit;color:inherit} .produktkachel-preis del{font-size:.7em;font-weight:500;color:var(--grau);margin-right:6px} .produktkachel-preis ins{text-decoration:none} /* ---------- Katalogleiste ---------- */ .katleiste .woocommerce-result-count{ margin:0;font-size:14.5px;color:var(--grau); } .katleiste .woocommerce-ordering{margin:0} .katleiste .woocommerce-ordering select, .katleiste select{ font-family:inherit;font-size:14.5px;padding:10px 14px; border:1.5px solid var(--linie);border-radius:var(--radius-klein);background:var(--weiss); } /* ---------- Blaetterung ---------- */ .woocommerce-pagination{margin-top:36px} .woocommerce-pagination ul{ list-style:none;display:flex;gap:8px;padding:0;margin:0;flex-wrap:wrap; } .woocommerce-pagination a, .woocommerce-pagination span{ display:grid;place-items:center;min-width:42px;height:42px;padding-inline:12px; border:1.5px solid var(--linie);border-radius:var(--radius-klein); font-family:var(--schrift-kopf);font-weight:600;text-decoration:none; } .woocommerce-pagination a:hover{border-color:var(--beere)} .woocommerce-pagination .current{background:var(--beere);border-color:var(--beere);color:#fff} /* ---------- Produktseite ---------- FEHLER, der hier behoben wurde (21.08.2026): Das Raster stand auf .produktlayout. WooCommerce legt aber noch einen eigenen Behaelter
dazwischen, und darin liegen erst Galerie, Kaufspalte, Reiter und verwandte Produkte. Das Raster hatte dadurch genau ein Kind, die Galerie lief ueber die volle Breite und die Kaufspalte rutschte darunter. Das Raster gehoert also eine Ebene tiefer. */ .produktlayout{display:block !important} .produktlayout > .product{display:block} /* Das Raster sitzt jetzt auf .produkt-oben, nicht mehr auf .product. Damit endet der Bezugsrahmen der mitlaufenden Kaufspalte genau hier, statt bis ans Ende der aehnlichen Produkte zu reichen. */ .produkt-oben{ display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start; } .produkt-oben > .woocommerce-product-gallery{grid-column:1;min-width:0} .produkt-oben > .summary{grid-column:2;min-width:0} @media (max-width:1000px){ /* FEHLER, der hier behoben wird (gefunden 21.08.2026 durch Michaels Hinweis auf die Handy-Ansicht): grid-template-columns:1fr allein reicht NICHT. Galerie und Kaufspalte tragen oben ausdruecklich grid-column 1 und 2. CSS Grid legt fuer die Zwei dann eine implizite zweite Spalte an, obwohl im Raster nur eine steht. Ergebnis: die Produktseite blieb auf dem Handy zweispaltig, Galerie und Kaufspalte je rund 174 px breit nebeneinander. Der Abstand aus derselben Regel griff dagegen, was die Fehlersuche verschleiert hat. Die Spaltenzuweisung muss also mit zurueckgesetzt werden. */ .produkt-oben{grid-template-columns:1fr;gap:34px} .produkt-oben > .woocommerce-product-gallery, .produkt-oben > .summary{grid-column:1 / -1} } .woocommerce-product-gallery{position:relative} .woocommerce-product-gallery__wrapper{margin:0} .woocommerce-product-gallery img{ width:100%;border-radius:var(--radius);background:var(--creme); } .woocommerce-product-gallery__trigger{ position:absolute;top:14px;right:14px;z-index:5; width:40px;height:40px;border-radius:99px;background:#fff; display:grid;place-items:center;text-decoration:none; border:1px solid var(--linie); } .flex-control-thumbs{ list-style:none;display:flex;gap:10px;padding:0;margin:14px 0 0;flex-wrap:wrap; } .flex-control-thumbs li{width:74px} .flex-control-thumbs img{ border:2px solid var(--linie);border-radius:var(--radius-klein);cursor:pointer; } .flex-control-thumbs img.flex-active{border-color:var(--beere)} .summary{position:sticky;top:130px} @media (max-width:1000px){ .summary{position:static} } .summary .price{ font-family:var(--schrift-kopf);font-weight:800;font-size:34px;color:var(--text); } .summary .price del{font-size:.6em;font-weight:500;color:var(--grau)} .summary .price ins{text-decoration:none} .preiszeile{align-items:baseline} /* ---------- Varianten: das Groessenraster ---------- WooCommerce gibt eine Tabelle mit Auswahlfeldern aus. Die Tabelle wird aufgeloest, das Auswahlfeld bleibt als Rueckfall bedienbar. */ .variations{width:100%;border:0;margin:0 0 20px} .variations tbody,.variations tr,.variations td,.variations th{display:block;width:auto;padding:0;border:0} .variations tr + tr{margin-top:18px} .variations th.label label{ font-family:var(--schrift-kopf);font-weight:700;font-size:15px; display:block;margin-bottom:11px; } .variations td.value{position:relative} .variations select{ width:100%;font-family:inherit;font-size:15.5px;padding:13px 14px; border:2px solid var(--linie);border-radius:var(--radius-klein);background:var(--weiss); } .reset_variations{ display:inline-block;margin-top:9px;font-size:13.5px;color:var(--grau); } .woocommerce-variation-price .price{font-size:30px} .woocommerce-variation-availability p{ display:inline-flex;align-items:center;gap:9px; color:var(--gruen);font-weight:600;font-size:15px;margin:10px 0 0; } .woocommerce-variation-availability .out-of-stock{color:#a33} /* ---------- Menge und Kaufknopf ---------- */ .quantity{display:inline-flex;margin-right:12px} .quantity input{ width:78px;font-family:var(--schrift-kopf);font-weight:700;font-size:16px; text-align:center;padding:14px 8px; border:2px solid var(--linie);border-radius:var(--radius-klein);background:var(--weiss); } form.cart{margin:0 0 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:stretch} form.variations_form.cart{display:block} form.variations_form .woocommerce-variation-add-to-cart{ display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-top:16px; } /* Der eine pinke Knopf der Seite. Dunkler Text, nicht weisser: Pink mit Weiss liegt bei 3,05:1, mit dunklem Text bei 5,92:1. */ .single_add_to_cart_button, button[name="add-to-cart"], .wc-block-components-button{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--schrift-kopf);font-weight:700;font-size:17px; padding:15px 30px;border:2px solid transparent;border-radius:var(--radius-klein); background:var(--pink);color:var(--text);cursor:pointer;line-height:1.2; flex:1;min-width:200px; } .single_add_to_cart_button:hover{filter:brightness(.96)} .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed} /* Sonstige Knoepfe von WooCommerce: Beere, nicht Pink. */ .woocommerce .button:not(.single_add_to_cart_button):not(.wc-forward), .wc-block-components-button:not(.wc-block-cart__submit-button){ background:var(--beere);color:#fff; font-family:var(--schrift-kopf);font-weight:700; padding:13px 24px;border:0;border-radius:var(--radius-klein);cursor:pointer; text-decoration:none;display:inline-block; } .checkout-button,.wc-block-cart__submit-button{ background:var(--pink) !important;color:var(--text) !important; } /* ---------- Hinweis auf die Datenluecke ---------- Bewusst auffaellig, aber nicht rot: es ist kein Fehler der Seite, sondern eine offene Aufgabe in der Produktpflege. */ .hinweis-luecke{ background:var(--gruen-blass);border-left:4px solid var(--gruen); padding:13px 16px;border-radius:var(--radius-klein); font-size:14px;color:var(--text);margin:0 0 20px; } .hinweis-luecke strong{color:var(--gruen)} /* ---------- Reiter als Akkordeon-Optik ---------- */ .woocommerce-tabs{margin-top:56px;border-top:1px solid var(--linie)} .woocommerce-tabs ul.tabs{ list-style:none;display:flex;gap:6px;padding:0;margin:0 0 28px;flex-wrap:wrap; border-bottom:1px solid var(--linie); } .woocommerce-tabs ul.tabs li{margin:0} .woocommerce-tabs ul.tabs a{ display:block;padding:16px 18px; font-family:var(--schrift-kopf);font-weight:700;font-size:16px; border-bottom:3px solid transparent;text-decoration:none;color:var(--grau); } .woocommerce-tabs ul.tabs li.active a{color:var(--text);border-bottom-color:var(--beere)} /* Michaels Ansage 21.08.2026: die verfuegbare Breite voll nutzen. Vorher stand hier max-width:70ch, dadurch endete der Text bei rund der halben Seite und rechts blieb eine grosse leere Flaeche. Damit die Zeilen trotzdem lesbar bleiben, laeuft die Aufzaehlung ab 1100 px in zwei Spalten. Eine durchgehende Zeile ueber 1200 px waere rund 180 Zeichen lang, das liest niemand gern. Fliesstext und Ueberschriften bleiben einspaltig, sonst zerfaellt der Einstieg. */ .woocommerce-tabs .panel{max-width:none} @media (min-width:1100px){ .woocommerce-tabs .panel > ul, .woocommerce-tabs .panel > ol{ columns:2;column-gap:56px; } .woocommerce-tabs .panel > ul > li, .woocommerce-tabs .panel > ol > li{ break-inside:avoid; /* kein Punkt, der ueber den Spaltenrand reisst */ margin-bottom:14px; } } .woocommerce-tabs h2{font-size:22px;margin-bottom:14px} /* Die Merkmalstabelle bekommt eine Obergrenze, obwohl das Panel jetzt die volle Breite nutzt. Nebenwirkung der Umstellung vom 21.08.2026: auf 1200 px war die Beschriftungsspalte 504 px breit, "Geschmack" und "Fisch" standen dadurch eine halbe Bildschirmbreite auseinander. Bei einer Datentabelle mit kurzen Werten ist Breite kein Gewinn, das Auge muss den Weg von der Beschriftung zum Wert zuruecklegen. */ table.shop_attributes{ width:100%;max-width:760px;border-collapse:collapse;font-size:14.5px; } table.shop_attributes th,table.shop_attributes td{ padding:9px 0;border-bottom:1px solid var(--linie);text-align:left; } table.shop_attributes th{color:var(--grau);font-weight:500;width:34%} table.shop_attributes p{margin:0} /* ---------- Verwandte Produkte ---------- */ .related,.upsells{ margin-top:56px;padding-top:40px;border-top:1px solid var(--linie); } .related > h2,.upsells > h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:26px} /* ---------- Meldungen ---------- */ .woocommerce-message,.woocommerce-info,.woocommerce-error{ list-style:none;border-radius:var(--radius);padding:16px 20px;margin:0 0 24px; border-left:4px solid var(--beere);background:var(--beere-blass);font-size:15px; } .woocommerce-message{border-left-color:var(--gruen);background:var(--gruen-blass)} .woocommerce-error{border-left-color:#a33;background:#fbeaea} .woocommerce-message .button{margin-left:12px} /* ---------- Warenkorb und Kasse ---------- */ .woocommerce table.shop_table{ width:100%;border-collapse:collapse;font-size:15px; border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden; } .woocommerce table.shop_table th{ background:var(--creme);font-family:var(--schrift-kopf);font-weight:700; text-align:left;padding:14px 16px; } .woocommerce table.shop_table td{padding:14px 16px;border-top:1px solid var(--linie)} .woocommerce-cart-form__cart-item img{width:72px;border-radius:var(--radius-klein)} /* ---------- Germanized ---------- */ .wc-gzd-additional-info{font-size:13px;color:var(--grau);margin-top:6px} .produktkachel .wc-gzd-additional-info{margin-top:2px} p.price .wc-gzd-additional-info{font-family:var(--schrift-text);font-size:13px;font-weight:400} /* ---------- Suchergebnisse und einfache Seiten ---------- */ .textblock article{ border-bottom:1px solid var(--linie);padding-bottom:22px;margin-bottom:22px; } .textblock h1{margin-bottom:24px} /* ---------- Kachelfuss ---------- Hier landen die Pflichtangaben von Germanized. Sie stehen bewusst ausserhalb des Kachel-Links, weil sie selbst Links enthalten. */ .kachel-fuss{ display:block;padding:0 16px 14px;background:var(--weiss); border:1px solid var(--linie);border-top:0; border-radius:0 0 var(--radius) var(--radius); margin-top:-1px; } .kachel-fuss:empty{display:none} /* Enger und kleiner (Michael, 24.08.2026). * * Es sind Pflichtangaben, keine Verkaufsargumente. Sie muessen lesbar sein * und dastehen, aber sie sollen die Kachel nicht dominieren. 12,5 auf 11,5 * px, Zeilenabstand 1,5 auf 1,3. * * WICHTIG: margin:0 allein reichte nicht. Germanized gibt seinen * Absaetzen ueber .wc-gzd-additional-info eigene Abstaende, und die kamen * zwischen den beiden Zeilen durch. Deshalb hier ausdruecklich auch die * Germanized-Klasse. */ /* GEWICHT MUSS UEBER (0,2,1) LIEGEN. * * Germanized bringt in layout-styles.css mit: * .product p.wc-gzd-additional-info { font-size: .9em } * Gewicht (0,2,1). Meine erste Fassung war * .kachel-fuss .wc-gzd-additional-info * mit (0,2,0) und hat deshalb VERLOREN. * * Das Tueckische daran: Der Zeilenabstand griff (den setzt Germanized dort * nicht), die Schriftgroesse nicht. Die Zeilen ruecken also zusammen, * bleiben aber gleich gross. Es sah aus wie "die Aenderung wirkt kaum", * nicht wie "eine Eigenschaft kommt gar nicht an". * * Aufgefallen erst durch einen Beweistest: Schriftgroesse auf 8 px gesetzt * und gemessen. Die Abstaende aenderten sich, die Tintenhoehe nicht. Damit * war klar, dass genau EINE Eigenschaft ueberschrieben wird. * * MERKPOSTEN: Wenn eine Aenderung "halb" wirkt, ist das ein Hinweis auf * eine konkurrierende Regel, die nur einen Teil der Eigenschaften setzt. * Nicht nachbessern, sondern nachsehen wer sonst noch schreibt. */ .kachel-fuss p, .product .kachel-fuss p.wc-gzd-additional-info, .kachel-fuss p.wc-gzd-additional-info, .kachel-fuss .wc-gzd-additional-info{ margin:0;font-size:11px;color:var(--grau);line-height:1.25; } /* Der groesste Abstand sass gar nicht zwischen den beiden Zeilen, sondern * DARUEBER: Der Kachelkoerper hat 18 px Innenabstand unten, der Fuss * keinen oben. Gemessen waren es 28 px zwischen Preis und erster Zeile, * gegenueber 19 px zwischen den Zeilen selbst. * * Erst hatte ich nur an Schriftgroesse und Zeilenabstand gedreht. Das * brachte 2 px. Nachgemessen statt geschaetzt, dann war klar, wo der Platz * wirklich liegt. */ .kachel-huelle .produktkachel-koerper{padding-bottom:10px} .kachel-fuss{padding-top:2px} .kachel-fuss .yith-add-to-wishlist-button-block{margin-top:8px !important} .kachel-fuss a{text-decoration:underline} .produktkachel{border-radius:var(--radius) var(--radius) 0 0} .kachel-huelle:has(.kachel-fuss:empty) .produktkachel{border-radius:var(--radius)} /* ---------- Zeigezustand gilt fuer die GANZE Kachel ---------- * * BEFUND 31.08.2026 (Michael): Beim Zeigen bekam nur der obere Teil den * rosa Rahmen, der Kachelfuss mit MwSt. und Versandkosten blieb grau. * Das sah nach einem halben Rahmen aus. * * URSACHE liegt im Aufbau, nicht in der Farbe: Eine Kachel besteht aus * ZWEI Kaesten mit je eigenem Rahmen. Oben der Link .produktkachel, darunter * .kachel-fuss. Der Fuss steht bewusst AUSSERHALB des Links, weil er selbst * Links enthaelt (Versandkosten), und ein Link im Link ist nicht erlaubt. * Der Zeigezustand hing bisher nur am Link, also konnte er den zweiten * Kasten gar nicht erreichen. * * Jetzt haengt er an der Huelle, die beide umschliesst. Beide Rahmen * faerben sich, und der Schatten umschliesst die ganze Kachel. * * Der Schatten wandert dabei vom Link zur Huelle. Bliebe er zusaetzlich am * Link, laegen zwei Schatten uebereinander und der obere Teil wirkte * dunkler als der untere, also genau die Zweiteilung, die hier weg soll. * * Tastaturbedienung bleibt unberuehrt: Dafuer sorgt die globale * a:focus-visible-Regel in stil.css. Hier wird nur der Mauszustand * angefasst. */ .kachel-huelle{border-radius:var(--radius);transition:box-shadow .15s ease} .kachel-huelle:hover{box-shadow:0 8px 26px rgba(129,63,99,.13)} .kachel-huelle:hover .produktkachel, .kachel-huelle:hover .kachel-fuss{border-color:var(--beere)} .produktkachel:hover{box-shadow:none} /* ---------- Gleiche Kachelhoehe ---------- Ohne das haengen die Kachelfuesse auf verschiedenen Hoehen, weil die Produktnamen unterschiedlich viele Zeilen brauchen. */ ul.products li.product, ul.produkte li.product{display:flex} .kachel-huelle{display:flex;flex-direction:column;width:100%} .kachel-huelle .produktkachel{flex:1} /* ---------- Groessenraster statt Auswahlfeld ---------- Das Auswahlfeld bleibt im Formular und bedienbar, es wird nur ausgeblendet, sobald das Raster uebernimmt. Ohne Skript bleibt es sichtbar, die Seite ist also nie unbedienbar. */ .variations tr.variation-versteckt{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);white-space:nowrap; } .variations th.label label{text-align:left} .variations th.label{text-align:left} .saeckeraster button small{display:block} .saeckeraster button:disabled small{text-decoration:none;color:var(--grau-hell)} /* ---------- Galerie-Schieber einfangen ---------- FlexSlider legt alle Folien nebeneinander und macht seinen Behaelter so breit wie die Summe. Auf schmalen Schirmen lief die Produktseite dadurch seitlich ueber (gefunden 21.08.2026). */ .woocommerce-product-gallery, .woocommerce-product-gallery .flex-viewport{ max-width:100%;overflow:hidden; } .woocommerce-product-gallery__wrapper{max-width:100%} /* ---------- Schmale Schirme, Produktseite ---------- Die Beschriftungszeile ist ein Flex mit space-between. Bei langen Zusatztexten ("Reicht bei 20 kg Koerpergewicht etwa") schob das den rechten Teil aus der Spalte. Und der Kaufknopf hatte eine feste Mindestbreite von 200 px, die neben dem Mengenfeld nicht mehr passte. */ @media (max-width:520px){ .block > span.titel{flex-wrap:wrap;row-gap:2px} .block > span.titel em{flex-basis:100%} /* Mengenfeld schmal halten, Knopf nimmt den Rest. Die erste Fassung hatte width:100% auf dem Mengenfeld. Dadurch war es so breit wie der Kaufknopf, und dessen Beschriftung brach auf zwei Zeilen um ("In den / Warenkorb"). */ .quantity{margin-right:0;flex:0 0 84px} .quantity input{width:84px} .single_add_to_cart_button{min-width:0;flex:1 1 0%;white-space:nowrap} form.cart, form.variations_form .woocommerce-variation-add-to-cart{flex-wrap:nowrap;gap:10px} } /* ============================================================ Rueckmeldung der Kundin, 21.08.2026 ============================================================ */ /* ---------- Suche rauf in die Logozeile ---------- Vorher standen auf dem Handy vier Zeilen uebereinander: Logo mit Werkzeugen, Tierwahl, Suche, Menue. Der Kopf war dadurch 243 px hoch, also fast ein Drittel des Bildschirms, bevor Inhalt kam. Jetzt teilen sich Logo, Suche und Werkzeuge die erste Zeile. Das spart eine ganze Zeile und holt die Suche dorthin, wo sie hingehoert: sie ist in einem Katalogshop der wichtigste Einstieg. */ @media (max-width:720px){ .kopf-inner{flex-wrap:wrap;gap:10px} .marke{order:1;flex:0 0 auto} /* flex:1 1 0% ist hier entscheidend. Mit einer Basis von 120px nahm das Suchfeld die ganze Zeile und drueckte Konto und Warenkorb in eine eigene, damit waeren es weiter vier Zeilen gewesen. Mit Basis 0 teilt es sich den Rest der Zeile. */ .suche{order:2;flex:1 1 0%;min-width:0} .kopf-werkzeuge{order:3;flex:0 0 auto;margin-left:0} .tierwahl{order:4;flex-basis:100%} .tierwahl a{flex:1;justify-content:center} /* Die Werkzeuge schmaler, damit das Suchfeld nutzbar breit bleibt. */ .kopf-werkzeuge{gap:0} .kopf-werkzeuge a{padding:8px 5px} /* Das Suchfeld braucht weniger Innenabstand, sonst bleibt vom Platzhaltertext nichts uebrig. */ .suche input{padding:11px 12px 11px 38px;font-size:14.5px} .suche svg{left:12px;width:16px;height:16px} } @media (max-width:430px){ .marke-bild{height:36px} } /* ---------- Mehr Luft zwischen Menue und Hero ---------- Rueckmeldung der Kundin: der Abstand ist zu klein, der Hero klebt am Menue. Betrifft nur schmale Schirme, am Schreibtisch stimmt es. */ @media (max-width:720px){ .hero .mitte{padding-top:calc(var(--luft) + 20px)} } /* ---------- Grüne Packungsgrößen-Box: Innenabstand oben ---------- FEHLER (gefunden 21.08.2026 durch Michael): Die Überschrift klebte an der Oberkante der Box. Ursache ist eine Regel aus der Demo-stil.css: .filtergruppe:first-child setzt padding-top auf 0, weil über der ersten Filtergruppe nichts steht. Die hervorgehobene Box ist aber zufällig das erste Kind, und .filtergruppe:first-child hat mit (0,2,0) eine höhere Spezifität als .filtergruppe-oben mit (0,1,0). Die Null hat also gewonnen. Hier bewusst mit (0,3,0) dagegengehalten, statt die stil.css zu ändern: die bleibt unverändert, damit Entwurf und Shop nicht auseinanderlaufen. */ .filter .filtergruppe.filtergruppe-oben{ padding-top:18px; padding-bottom:18px; } /* ---------- Tippziele auf dem Handy ---------- Gemessen am 21.08.2026: Filter-Beschriftungen, Größenknöpfe, der Hund/Katze-Umschalter und die Kopfwerkzeuge lagen unter 40 px Höhe. Übliche Mindestgröße für einen Finger sind 44 px. Bewusst nur unter 720 px. Am Schreibtisch zeigt eine Maus genauer, dort würden 44 px die Filterspalte unnötig auseinanderziehen. */ @media (max-width:720px){ .filterliste label{ min-height:44px;align-items:center;padding-block:4px; } .filterliste li{margin-bottom:2px} .filterliste input{width:20px;height:20px} .filterwahl button{min-height:44px;padding-inline:16px} .tierwahl a{min-height:44px} .tierwahl{padding:4px} .kopf-werkzeuge a{ min-width:44px;min-height:44px; padding:0;justify-content:center; } .kopf-werkzeuge .korbzahl{margin-left:-4px} .saeckeraster button{min-height:52px} } /* ---------- Filter zusammenklappbar ---------- */ .filter-klapp > summary{ display:none; /* am Schreibtisch kein Schalter */ list-style:none;cursor:pointer; } .filter-klapp > summary::-webkit-details-marker{display:none} @media (max-width:1000px){ .filter-klapp > summary{ display:flex;align-items:center;justify-content:space-between;gap:10px; min-height:52px;padding:0 18px; font-family:var(--schrift-kopf);font-weight:700;font-size:16px; background:var(--gruen-blass);border:1.5px solid var(--gruen); border-radius:var(--radius);color:var(--text); } .filter-klapp > summary::after{ content:"+";font-size:24px;font-weight:400;color:var(--gruen);line-height:1; } .filter-klapp[open] > summary::after{content:"\2212"} .filter-klapp[open] > summary{margin-bottom:18px} /* Der grüne Kasten steckt jetzt IM Aufklapper, deshalb dort keine zweite grüne Fläche mehr. Sonst steht Grün auf Grün. */ .filter .filtergruppe.filtergruppe-oben{ background:transparent;border:0;margin-inline:0;padding-inline:0; } } /* ---------- Echtes JollyCat-Logo ---------- Bis 21.08.2026 wurde die Katzen-Wortmarke aus Outfit nachgebaut, weil die Datei fehlte. Jetzt liegt sie vor, der Textsatz im Kopf entfaellt. Im Fussbereich bleibt er, dort steht weisse Schrift auf dunklem Grund und ein farbiges Logo waere dort falsch. */ .kopf .marke-text{display:none !important} .m-katze .kopf .marke-bild{display:block} /* ========================================================================== Produktbeschreibung -------------------------------------------------------------------------- Die Katzentexte bringen seit 21.08.2026 Struktur mit: Zwischentitel, zwei Listenarten, zwei Tabellen und den Deklarationsblock. Ohne eigene Regeln laeuft das im Reiter als Fliesstext zusammen und die Tabellen sprengen auf dem Telefon die Breite. ========================================================================== */ /* Kein max-width hier. Die volle Breite ist weiter oben bewusst gesetzt worden ("panel{max-width:none}"), weil der Text sonst auf halber Seite klebte. Lesbar bleiben die Zeilen ueber die Zweispaltigkeit ab 1100 px. */ .woocommerce-Tabs-panel--description > h2:first-child{margin-top:0} .woocommerce-Tabs-panel--description h3{ font-family:var(--schrift-kopf); font-size:1.05rem; margin:2rem 0 .6rem; padding-top:1.2rem; border-top:1px solid var(--linie); } .woocommerce-Tabs-panel--description h3:first-of-type{border-top:0;padding-top:0} .woocommerce-Tabs-panel--description p{line-height:1.65;margin:0 0 .9rem} /* Die drei Aussagen vom Beutel. Bewusst als Block abgesetzt: im Laden entscheidet der Kunde nach genau diesen drei Zeilen. */ ul.jd-etikett{ list-style:none;margin:0 0 .5rem;padding:1rem 1.2rem; background:var(--beere-blass);border-radius:var(--radius-klein); /* Ausnahme von der Zweispaltigkeit weiter oben: das sind genau die drei Aussagen, die vorne auf dem Beutel stehen, und die will man am Stueck lesen. Bei drei Punkten verteilt der Umbruch sonst zwei nach rechts und einen nach links, was wie ein Fehler aussieht. */ columns:1 !important; } ul.jd-etikett li{position:relative;padding-left:1.5rem;margin:.35rem 0} ul.jd-etikett li::before{ content:"";position:absolute;left:0;top:.55em; width:.5rem;height:.5rem;border-radius:50%;background:var(--beere); } ul.jd-punkte{list-style:none;margin:0 0 .5rem;padding:0} ul.jd-punkte li{ margin:0 0 .9rem;padding:0 0 .9rem 0; border-bottom:1px solid var(--linie);line-height:1.55; } ul.jd-punkte li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} ul.jd-punkte strong{color:var(--beere-tief)} /* Waagerecht scrollbar, statt das Layout zu sprengen. Die Fuetterungstabelle hat bei Kitten fuenf Spalten. */ .woocommerce-Tabs-panel--description table.jd-tabelle{ display:block;overflow-x:auto;width:100%; border-collapse:collapse;margin:0 0 .9rem;font-size:.92rem; } table.jd-tabelle th,table.jd-tabelle td{ border:1px solid var(--linie);padding:.5rem .7rem; text-align:left;white-space:nowrap; } table.jd-tabelle thead th{background:var(--creme);font-weight:600} table.jd-tabelle tbody td:first-child{font-weight:600;white-space:normal} p.jd-hinweis{font-size:.9rem;color:var(--grau);line-height:1.55} /* Pflichtangaben. Klein, aber lesbar, und klar vom Werbetext getrennt. */ p.jd-deklaration{font-size:.88rem;line-height:1.6;color:var(--grau)} p.jd-deklaration strong{color:var(--text)} /* ========================================================================== Mobile Fussnavigation -------------------------------------------------------------------------- Aufbau wie bei benzerdental, Farben und Schrift von hier. Der Platz war schon da: In stil.css steht seit der Klick-Demo body{padding-bottom:78px} fuer eine ".kaufleiste", die nie ausgegeben wurde. Mobil standen also auf jeder Seite 78 Pixel Leerraum unten fuer eine Leiste, die es nicht gibt. Den nimmt jetzt die Navigation. Die Leiste ist die einzige Stelle, an der Pink neben Beere auftaucht, naemlich am Warenkorb-Zaehler. Das ist die Regel aus der Farbmessung: Pink gehoert dem Warenkorb. ========================================================================== */ .mobilnav{display:none} @media (max-width:720px){ .mobilnav{ display:flex; position:fixed; left:50%; transform:translateX(-50%); /* Abstand zur Systemleiste bei Geraeten mit abgerundeten Ecken */ bottom:calc(env(safe-area-inset-bottom, 0px) + 12px); z-index:90; width:min(460px, calc(100% - 24px)); padding:6px 10px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); border:1px solid rgba(30,16,25,.09); border-radius:22px; box-shadow:0 6px 24px -8px rgba(30,16,25,.28), 0 2px 6px rgba(30,16,25,.06); } .mobilnav-punkt{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:48px; /* Fingerkuppe, nicht Mauszeiger */ padding:7px 3px 6px; color:var(--grau); font-family:var(--schrift-kopf); font-size:.68rem; font-weight:600; text-align:center; text-decoration:none; border-radius:17px; transition:color .15s ease, background .15s ease; } /* Symbol und Zahl bilden eine eigene Ebene. Ohne den Behaelter zaehlt die Zahl in der Spalte mit und schiebt die Beschriftung des Warenkorbs nach unten, obwohl sie absolut sitzt. */ .mobilnav-symbol{ position:relative;display:block; width:23px;height:23px;margin-inline:auto;line-height:0; } .mobilnav-punkt svg{width:23px;height:23px;display:block;margin-inline:auto} .mobilnav-text{display:block;width:100%;line-height:1.2} .mobilnav-punkt.ist-aktiv{color:var(--beere);background:var(--beere-blass)} .mobilnav-punkt:hover, .mobilnav-punkt:focus-visible{color:var(--beere-tief)} .mobilnav-punkt:focus-visible{outline:2px solid var(--beere);outline-offset:2px} .mobilnav-zahl{ position:absolute;top:-5px;right:-9px; min-width:17px;height:17px;padding:0 4px; display:flex;align-items:center;justify-content:center; background:var(--pink);color:#3a1226; font-size:.62rem;font-weight:700;line-height:1; border-radius:9px; } /* Der reservierte Platz aus stil.css passt fast, hier die Feinabstimmung inklusive Systemleiste. Sonst verschwindet der Fussbereich darunter. */ body{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 88px) !important} } /* Bei sehr schmalen Geraeten wird die Beschriftung sonst umgebrochen. */ @media (max-width:360px){ .mobilnav-punkt{font-size:.62rem} .mobilnav{padding:5px 6px} } /* ========================================================================== Formulare: Kasse, Warenkorb, Konto -------------------------------------------------------------------------- Bis 21.08.2026 gab es dafuer keine einzige Regel. Die Kasse stand in den Browser-Voreinstellungen da: Beschriftung neben dem Feld statt darueber, Felder in Standardbreite, keine Innenabstaende, Zahlungsarten als Aufzaehlungspunkte. Das Theme hatte nur das Suchfeld und den Newsletter gestylt, beides Sonderfaelle. Vorbild fuer die Felder ist das Suchfeld aus stil.css, damit der Shop ueberall dieselbe Eingabe hat. ========================================================================== */ /* ---------------------------------------------------------- Eingabefelder */ .woocommerce form .form-row, .woocommerce-page form .form-row{ display:block;margin:0 0 16px;padding:0; } /* Beschriftung ueber das Feld. Vorher stand sie daneben, wodurch die Felder auf verschiedenen Hoehen anfingen und die Spalte zerfiel. */ .woocommerce form .form-row label, .woocommerce-page form .form-row label, .woocommerce-EditAccountForm label, .woocommerce-form label:not(.woocommerce-form__label-for-checkbox){ display:block;margin:0 0 6px; font-family:var(--schrift-kopf);font-size:14.5px;font-weight:600; color:var(--text); } .woocommerce form .form-row .required, .woocommerce-page form .form-row .required{ color:var(--beere);text-decoration:none;border:0; } .woocommerce form .form-row .optional{color:var(--grau);font-weight:500} .woocommerce .input-text, .woocommerce-page .input-text, .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce select, .woocommerce textarea, .woocommerce-page input[type="text"], .woocommerce-page input[type="email"], .woocommerce-page input[type="tel"], .woocommerce-page input[type="password"], .woocommerce-page select, .woocommerce-page textarea{ width:100%; font-family:var(--schrift-text);font-size:15.5px;line-height:1.4; padding:12px 14px; border:1.5px solid var(--linie);border-radius:var(--radius-klein); background:var(--creme);color:var(--text); transition:border-color .14s ease, background .14s ease; } .woocommerce textarea,.woocommerce-page textarea{min-height:104px;resize:vertical} .woocommerce .input-text::placeholder, .woocommerce-page .input-text::placeholder{color:var(--grau-hell)} .woocommerce .input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus, .woocommerce-page .input-text:focus, .woocommerce-page select:focus, .woocommerce-page textarea:focus{ outline:none;border-color:var(--beere);background:var(--weiss); } /* Auswahlfelder bekommen einen eigenen Pfeil, sonst zeigt jeder Browser einen anderen. */ .woocommerce select,.woocommerce-page select{ appearance:none;-webkit-appearance:none; padding-right:38px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d626a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:17px; } /* Fehlerhafte Felder erkennbar machen, ohne Rot zu schreien. */ .woocommerce form .form-row.woocommerce-invalid .input-text, .woocommerce form .form-row.woocommerce-invalid select{ border-color:#b3261e;background:#fdf3f2; } .woocommerce form .form-row.woocommerce-validated .input-text{border-color:var(--gruen)} /* Zwei Felder nebeneinander (Vorname/Nachname). WooCommerce loest das ueber Floats, das bricht in einem Raster. Deshalb hier sauber als Grid. */ @media (min-width:560px){ .woocommerce form .form-row-first, .woocommerce form .form-row-last{width:100%;float:none;margin-right:0} .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper{ display:grid;grid-template-columns:1fr 1fr;gap:0 18px; } .woocommerce-billing-fields__field-wrapper > .form-row-wide, .woocommerce-shipping-fields__field-wrapper > .form-row-wide, .woocommerce-address-fields__field-wrapper > .form-row-wide{grid-column:1 / -1} } /* -------------------------------------------------------------- Kasse */ .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading{ font-family:var(--schrift-kopf);font-size:21px;margin:0 0 16px; } #customer_details{margin-bottom:34px} @media (min-width:1000px){ /* Adressen links, Bestellung rechts und mitlaufend. Die Bestellung ist die Spalte, die man beim Ausfuellen im Blick behalten will. */ form.checkout.woocommerce-checkout{ display:grid;grid-template-columns:1.15fr .85fr;gap:0 48px;align-items:start; } /* FEHLER, den ich erst am Bild gesehen habe: Vorher standen hier nur grid-column-Angaben plus grid-row:1 fuer die Ueberschrift. Der Hinweiskasten von WooCommerce belegt aber schon Zeile 1, also rutschte die ganze rechte Spalte per Auto-Platzierung ans Ende. Ergebnis: rechts oben ein grosses weisses Loch und die Bestelluebersicht erst unterhalb des Formulars. Deshalb jetzt ALLE Zeilen ausdruecklich. */ form.checkout.woocommerce-checkout > *{grid-column:1} .woocommerce-checkout .woocommerce-notices-wrapper{grid-column:1 / -1;grid-row:1} #customer_details{grid-column:1;grid-row:2 / span 2;margin-bottom:0} #order_review_heading{grid-column:2;grid-row:2;margin-top:0} #order_review{grid-column:2;grid-row:3;position:sticky;top:96px} /* Die beiden Spalten von WooCommerce selbst aufloesen, sonst stehen Rechnungs- und Lieferadresse nebeneinander in einer 55-Prozent-Spalte. */ #customer_details .col-1, #customer_details .col-2{width:100%;float:none;margin:0} #customer_details .col-2{margin-top:26px} } /* Mehr Luft in der Zusammenfassung (Michael, 31.08.2026). Vorher 22px Polsterung und 11px je Zeile. Bei einer Tabelle mit Produktbild, drei Summenzeilen und der Steuerzeile wirkte das gedraengt, ausgerechnet an der Stelle, an der jemand seine Bestellung nachrechnet. */ #order_review{ background:var(--creme);border:1px solid var(--linie); border-radius:var(--radius);padding:28px; } .woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;margin:0 0 6px} .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td{ padding:16px 0;border-bottom:1px solid var(--linie); text-align:left;font-size:15px;vertical-align:top; } .woocommerce-checkout-review-order-table td:last-child, .woocommerce-checkout-review-order-table th:last-child{text-align:right;white-space:nowrap} .woocommerce-checkout-review-order-table tfoot .order-total th, .woocommerce-checkout-review-order-table tfoot .order-total td{ font-family:var(--schrift-kopf);font-size:19px;font-weight:700;border-bottom:0; padding-top:20px; } .woocommerce-checkout-review-order-table .product-name{padding-right:20px} /* Die Zeile mit dem Produktbild braucht am meisten Platz, dort stehen Bild, Name und Menge nebeneinander. */ .woocommerce-checkout-review-order-table .cart_item th, .woocommerce-checkout-review-order-table .cart_item td{padding-block:20px} /* Zahlungsarten als Karten statt als Aufzaehlung. Vorher standen dort Punkte wie in einer Einkaufsliste. */ .woocommerce-checkout #payment{background:transparent;border-radius:0} .woocommerce-checkout #payment ul.payment_methods{ list-style:none;margin:0 0 18px;padding:0;border:0; } .woocommerce-checkout #payment ul.payment_methods li{ list-style:none;margin:0 0 10px;padding:14px 16px; border:1.5px solid var(--linie);border-radius:var(--radius-klein); background:var(--weiss); } .woocommerce-checkout #payment ul.payment_methods li:has(input:checked){ border-color:var(--beere);background:var(--beere-blass); } .woocommerce-checkout #payment ul.payment_methods li label{ display:inline;font-family:var(--schrift-kopf);font-weight:600;cursor:pointer; } .woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{ width:18px;height:18px;margin-right:9px;accent-color:var(--beere); vertical-align:-3px; } .woocommerce-checkout #payment .payment_box{ background:transparent;margin:10px 0 0;padding:0; font-size:14.5px;line-height:1.6;color:var(--grau); } .woocommerce-checkout #payment .payment_box::before{display:none} /* Pflichthaken. Der Kasten ist die letzte Huerde vor dem Kauf, deshalb deutlich abgesetzt und mit genug Flaeche zum Antippen. */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ margin:0 0 18px;padding:14px 16px; background:var(--weiss);border:1.5px solid var(--linie); border-radius:var(--radius-klein); } .woocommerce-checkout .form-row.validate-required > label.checkbox, .woocommerce-checkout .wc-gzd-checkbox-placeholder label, .woocommerce form .form-row label.checkbox{ display:flex;align-items:flex-start;gap:10px; font-family:var(--schrift-text);font-weight:400;font-size:14.5px; line-height:1.55;cursor:pointer;margin:0; } .woocommerce-checkout input[type="checkbox"]{ width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--beere); } /* Kaufknopf in Pink, wie ueberall im Shop, wo es zur Kasse geht. */ .woocommerce #place_order, .woocommerce-page #place_order{ display:block;width:100%; font-family:var(--schrift-kopf);font-size:17px;font-weight:700; padding:19px 26px;border:0;border-radius:var(--radius-klein); background:var(--pink);color:var(--text);cursor:pointer; transition:filter .12s ease, transform .12s ease; } .woocommerce #place_order:hover{filter:brightness(.96)} .woocommerce #place_order:active{transform:translateY(1px)} /* "Lieferung an eine andere Adresse" sah aus wie eine Ueberschrift mit Kaestchen davor. Jetzt eine Zeile zum Antippen. */ #ship-to-different-address{ display:flex;align-items:center;gap:10px; font-family:var(--schrift-kopf);font-size:16px;font-weight:600; margin:0 0 14px; } #ship-to-different-address label{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer} #ship-to-different-address input{width:19px;height:19px;accent-color:var(--beere)} /* ------------------------------------------------------- Hinweise */ .woocommerce-message,.woocommerce-info,.woocommerce-error, .woocommerce-NoticeGroup ul{ margin:0 0 20px;padding:14px 18px;list-style:none; border:1px solid var(--linie);border-left:4px solid var(--beere); border-radius:var(--radius-klein);background:var(--creme); font-size:15px;line-height:1.55; } .woocommerce-error{border-left-color:#b3261e;background:#fdf3f2} .woocommerce-message{border-left-color:var(--gruen);background:var(--gruen-blass)} .woocommerce-message .button,.woocommerce-info .button{float:right;margin-left:14px} /* ------------------------------------------------------- Konto-Seiten */ .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register, .woocommerce-account .woocommerce-ResetPassword{ max-width:460px;padding:26px; border:1px solid var(--linie);border-radius:var(--radius);background:var(--creme); } .woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px; } .woocommerce-account .woocommerce-MyAccount-navigation li a{ display:inline-block;padding:9px 15px; border:1.5px solid var(--linie);border-radius:999px; font-family:var(--schrift-kopf);font-size:14.5px;font-weight:600; color:var(--text);text-decoration:none;background:var(--weiss); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--beere);border-color:var(--beere);color:#fff; } /* --------------------------------------------------- Germanized im Checkout Nachtrag 21.08.2026: Ich hatte zuerst auf .woocommerce-terms-and-conditions-wrapper gestylt, also den Kasten, den WooCommerce selbst baut. Den gibt es hier gar nicht. Germanized ersetzt ihn durch eigenes Markup: div.wc-gzd-checkbox-placeholder-legal p.legal.form-row.checkbox-legal label.woocommerce-form__label-for-checkbox input#legal + span.woocommerce-gzd-legal-checkbox-text Am gerenderten HTML abgelesen, nicht geraten. */ .wc-gzd-checkbox-placeholder{margin:0 0 14px} /* HIER STAND EINMAL DIE GESTALTUNG DER PFLICHTHAKEN. Sie ist am 22.08.2026 ersatzlos rausgeflogen, weil sie nie gewirkt hat. Warum, steht ausfuehrlich weiter unten im Block "Pflichthaken". Kurz: Germanized gestaltet dieselben Elemente mit einem #order_review davor und hatte damit mehr Gewicht. Von hier aus dagegen anzuschreiben, hat nur eine zweite Regel erzeugt, die ebenfalls verliert. Zustaendig ist ausschliesslich der Block unten. Nicht wieder aufmachen. */ .woocommerce-gzd-legal-checkbox-text a{color:var(--beere);text-underline-offset:2px} /* Abschlussbereich: Pflichtangaben, Haken und Kaufknopf gehoeren zusammen. */ .wc-gzd-order-submit{margin-top:6px} /* AUF DIE KASSE EINGEGRENZT (24.08.2026). * * Hier stand zusaetzlich ein nacktes `.wc-gzd-additional-info`. Der * Kommentar sagt "Abschlussbereich", die Regel galt aber fuer JEDE * Pflichtangabe im ganzen Shop, auch fuer die auf den Produktkacheln. Von * dort kamen die 10 px Abstand zwischen "inkl. 7 % MwSt." und "zzgl. * Versandkosten", die Michael aufgefallen sind. * * Auf der Kasse sind 14 px und Zeilenabstand 1,6 richtig, dort steht der * Text als Fliesstext. Auf einer Kachel ist es eine Fussnote. * * MERKPOSTEN: Eine Regel, deren Kommentar einen Ort nennt, sollte auch auf * diesen Ort eingegrenzt sein. Sonst wirkt sie ueberall und man sucht die * Ursache spaeter im falschen Abschnitt. */ .woocommerce-checkout .wc-gzd-additional-info, #order_review .wc-gzd-additional-info{ font-size:14px;line-height:1.6;color:var(--grau);margin:0 0 10px; } /* Germanized zeigt im Bestellueberblick ein kleines Produktbild. Ohne Regel steht es in Originalgroesse in der Tabelle. */ /* object-fit CONTAIN bei Produktbildern in Listen (31.08.2026). Die Packshots sind weisse Tueten und Dosen auf weissem Grund, hochkant. Ein quadratischer Ausschnitt aus der Mitte zeigt deshalb nur Weiss, und die Zelle sieht leer aus. Genau so ist es im Warenkorb aufgefallen und vorher schon in der Suchvorschlagsliste. Mit contain ist das ganze Gebinde zu sehen, klein, aber erkennbar. */ .wc-gzd-cart-item-thumbnail img{ width:46px;height:46px;object-fit:contain;border-radius:6px; background:var(--creme); } .wc-gzd-cart-item-name-wrapper{display:flex;align-items:center;gap:11px} /* Gutscheinfeld. Steht oberhalb der Kasse und sah aus wie ein Fremdkoerper. */ .woocommerce-form-coupon-toggle .woocommerce-info{margin-bottom:16px} form.checkout_coupon{ margin:0 0 24px;padding:18px; border:1.5px solid var(--linie);border-radius:var(--radius); background:var(--creme); } @media (min-width:560px){ form.checkout_coupon .form-row-first, form.checkout_coupon .form-row-last{ display:inline-block;width:calc(50% - 9px);vertical-align:top; } form.checkout_coupon .form-row-last{margin-left:14px} } form.checkout_coupon button{ width:100%;font-family:var(--schrift-kopf);font-weight:700;font-size:15.5px; padding:12px 20px;border:2px solid var(--text);border-radius:var(--radius-klein); background:transparent;color:var(--text);cursor:pointer; } /* ---------------------------------------- Nachbesserungen nach Sichtprüfung 21.08.2026, am gerenderten Bild abgelesen, nicht am Quelltext geraten. */ /* Der Produktname brach auf sechs Zeilen um, weil das Vorschaubild die Spalte auffrass. Bild kleiner, Name bekommt die Breite. */ .woocommerce-checkout-review-order-table .product-name{width:66%} .woocommerce-checkout-review-order-table .product-total{width:34%} .wc-gzd-cart-item-thumbnail img{width:38px;height:38px} .wc-gzd-cart-item-name-wrapper{gap:9px;align-items:flex-start} .woocommerce-checkout-review-order-table .product-name a{ color:var(--text);text-decoration:none; } .woocommerce-checkout-review-order-table .product-quantity{ color:var(--grau);white-space:nowrap; } /* Der Versand stand als Aufzaehlungspunkt in der Tabelle. */ .woocommerce-checkout-review-order-table #shipping_method{ list-style:none;margin:0;padding:0; } .woocommerce-checkout-review-order-table #shipping_method li{ list-style:none;margin:0;padding:0; } /* Die Steuerzeile unter der Gesamtsumme hatte keinen Abschluss und sah abgeschnitten aus. */ .woocommerce-checkout-review-order-table tfoot tr:last-child th, .woocommerce-checkout-review-order-table tfoot tr:last-child td{ border-bottom:0;padding-bottom:14px; } .woocommerce-checkout-review-order-table tfoot .includes_tax, .woocommerce-checkout-review-order-table tfoot small{ font-size:13.5px;color:var(--grau);font-weight:400; } /* Das Landfeld ist ein select2-Widget und hatte deshalb eine andere Hoehe und einen anderen Rahmen als alle anderen Felder daneben. */ .woocommerce .select2-container--default .select2-selection--single{ height:auto;padding:11px 14px; border:1.5px solid var(--linie);border-radius:var(--radius-klein); background:var(--creme); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:1.4;padding:0;color:var(--text);font-size:15.5px; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:10px} .woocommerce .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--beere);background:var(--weiss)} .select2-dropdown{ border:1.5px solid var(--beere);border-radius:var(--radius-klein);overflow:hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--beere); } /* Gleichmaessiger Zeilenabstand. Die Zusatzzeile der Adresse (Appartement) klebte an der Strasse, die naechste Zeile stand weiter weg. */ .woocommerce form .form-row#billing_address_2_field, .woocommerce form .form-row#shipping_address_2_field{margin-top:-6px} /* ========================================================================== Warenkorb-Seite -------------------------------------------------------------------------- NACHTRAG 21.08.2026. Ich hatte nur die Kasse gestylt und den Warenkorb uebersehen, obwohl er auf demselben Weg liegt. Sichtbare Folgen: - "Weiter zur Kasse" war gar kein Knopf, sondern nackter rosa Text unten links ausserhalb des Kastens. Der wichtigste Knopf der Seite. - Gutscheinfeld ueber die volle Breite, darunter zwei Knoepfe, die sich gegenseitig ueberlappten. - Der Versand stand als Aufzaehlungspunkt: "• 6,95 €". Meine Regel dafuer traf nur die Kassentabelle, nicht die des Warenkorbs. - Der Summenblock war links creme und rechts weiss, wirkte wie zwei verschiedene Kaesten. ========================================================================== */ .woocommerce-cart .woocommerce{max-width:var(--breite);margin-inline:auto} /* ------------------------------------------------------- Positionstabelle */ .woocommerce table.shop_table.cart{ width:100%;border-collapse:collapse;margin:0 0 26px; border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden; } .woocommerce table.shop_table.cart thead th{ background:var(--creme); font-family:var(--schrift-kopf);font-size:14.5px;font-weight:700; text-align:left;padding:14px 12px;border-bottom:1px solid var(--linie); } .woocommerce table.shop_table.cart td{ padding:16px 12px;border-bottom:1px solid var(--linie); vertical-align:middle;font-size:15px;background:var(--weiss); } .woocommerce table.shop_table.cart tr:last-child td{border-bottom:0} .woocommerce table.shop_table.cart .product-price, .woocommerce table.shop_table.cart .product-subtotal, .woocommerce table.shop_table.cart th.product-price, .woocommerce table.shop_table.cart th.product-subtotal{text-align:right;white-space:nowrap} .woocommerce table.shop_table.cart .product-thumbnail img{ width:62px;height:62px;object-fit:contain;border-radius:8px;display:block; background:var(--creme); } .woocommerce table.shop_table.cart .product-name a{ color:var(--text);text-decoration:none;font-weight:600; } .woocommerce table.shop_table.cart .product-remove{width:44px;text-align:center} .woocommerce table.shop_table.cart .product-remove a.remove{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:50%; background:var(--creme);color:var(--grau); font-size:19px;line-height:1;text-decoration:none; } .woocommerce table.shop_table.cart .product-remove a.remove:hover{ background:var(--beere);color:#fff; } .woocommerce table.shop_table.cart .quantity .qty{ width:74px;text-align:center;padding:10px 6px; } /* Gutschein und Aktualisieren. Vorher lagen die beiden Knoepfe uebereinander, weil WooCommerce sie mit float und einer Breitenangabe setzt, die in einem Raster nicht greift. */ .woocommerce table.shop_table.cart td.actions{ padding:16px 12px;background:var(--creme);border-top:1px solid var(--linie); /* ZWEI FEHLVERSUCHE, hier festgehalten, weil beide verlockend aussehen: 1. margin-left:auto am Aktualisieren-Knopf. Der ist aber ein Geschwister von .coupon, kein Kind, also wirkungslos. 2. display:flex auf dieser Zelle. Damit verlaesst das td den Tabellenfluss, das colspan gilt nicht mehr, und die ganze Aktionszeile schrumpfte auf die Breite der ersten Spalte. Eine Zelle mit colspan bleibt table-cell. Gearbeitet wird mit float, wie WooCommerce es ohnehin vorsieht, nur sauber aufgeraeumt. */ overflow:hidden; } .woocommerce table.shop_table.cart td.actions::after{ content:"";display:table;clear:both; } .woocommerce table.shop_table.cart td.actions .coupon{ display:flex;gap:10px;flex-wrap:wrap;align-items:center; float:left;width:auto;max-width:70%; } .woocommerce table.shop_table.cart td.actions .coupon label{display:none} .woocommerce table.shop_table.cart td.actions .coupon .input-text{ flex:1;min-width:180px;max-width:320px;width:auto; } .woocommerce table.shop_table.cart td.actions .button{ float:none;width:auto; font-family:var(--schrift-kopf);font-weight:700;font-size:15px; padding:12px 22px;border-radius:var(--radius-klein); background:var(--beere);color:#fff;border:0;cursor:pointer; transition:filter .12s ease; } .woocommerce table.shop_table.cart td.actions .button:hover{filter:brightness(.94)} .woocommerce table.shop_table.cart td.actions .button:disabled{opacity:.45;cursor:default} /* Aktualisieren ist die schwächere Handlung, deshalb nur Umriss. */ .woocommerce table.shop_table.cart td.actions button[name="update_cart"]{ background:transparent;color:var(--text);border:2px solid var(--linie); float:right; } /* ---------------------------------------------------------- Summenkasten */ .cart-collaterals{display:block} .cart_totals{ max-width:520px;margin-left:auto; background:var(--creme);border:1px solid var(--linie); border-radius:var(--radius);padding:28px; } .cart_totals h2{font-family:var(--schrift-kopf);font-size:21px;margin:0 0 18px} .cart_totals table{width:100%;border-collapse:collapse} .cart_totals th,.cart_totals td{ padding:16px 0;border-bottom:1px solid var(--linie); text-align:left;font-size:15px;background:transparent;vertical-align:top; } .cart_totals td{text-align:right} .cart_totals .order-total th,.cart_totals .order-total td{ font-family:var(--schrift-kopf);font-size:20px;font-weight:700; padding-block:20px; } .cart_totals tr:last-child th,.cart_totals tr:last-child td{border-bottom:0} /* Der Versand stand als Aufzaehlungspunkt. */ .cart_totals ul#shipping_method, .cart_totals .woocommerce-shipping-methods{ list-style:none;margin:0;padding:0; } .cart_totals ul#shipping_method li, .cart_totals .woocommerce-shipping-methods li{list-style:none;margin:0;padding:0} .cart_totals .woocommerce-shipping-destination{ font-size:13.5px;color:var(--grau);margin:6px 0 0; } .cart_totals .shipping-calculator-button{ font-size:13.5px;color:var(--beere);text-underline-offset:2px; } /* Der wichtigste Knopf der Seite war vorher gar keiner. */ .wc-proceed-to-checkout{margin-top:18px;padding:0} .woocommerce .wc-proceed-to-checkout a.checkout-button{ display:block;width:100%;text-align:center; font-family:var(--schrift-kopf);font-size:17px;font-weight:700; padding:16px 26px;border:0;border-radius:var(--radius-klein); background:var(--pink);color:var(--text);text-decoration:none; transition:filter .12s ease, transform .12s ease; } .woocommerce .wc-proceed-to-checkout a.checkout-button:hover{filter:brightness(.96)} .woocommerce .wc-proceed-to-checkout a.checkout-button:active{transform:translateY(1px)} /* ========================================================================== Luft um die Zahlungsknoepfe von PayPal ========================================================================== * ANLASS 31.08.2026, Michaels Meldung: "unter Weiter zur Kasse mehr Platz zu * den Zahlungsbuttons". * * Im Warenkorb liegen drei Dinge im selben Behaelter, alle drei ohne * Aussenabstand, im Browser nachgemessen: * .ppcp-messages der Hinweis "Bezahlen Sie nach 30 Tagen" * a.checkout-button "Weiter zur Kasse" * .ppc-button-wrapper PayPal, Spaeter Bezahlen, Google Pay * * Dadurch klebte der gelbe PayPal-Knopf direkt unter unserem Kaufknopf. Das * sieht nicht nur gedraengt aus, es fuehrt auch in die Irre: Die beiden sind * ALTERNATIVEN, nicht zwei Schritte hintereinander. Der Abstand macht das * sichtbar. * * Die Klassen gehoeren dem Zahlungs-Plugin. Wir setzen deshalb nur Abstaende * und fassen Farbe, Form und Beschriftung nicht an. Faellt das Plugin weg * oder benennt es etwas um, greifen diese Regeln einfach ins Leere und * nichts geht kaputt. */ .woocommerce .wc-proceed-to-checkout .ppcp-messages{margin-bottom:16px} .woocommerce .wc-proceed-to-checkout .ppc-button-wrapper{margin-top:24px} /* Dasselbe in der Kasse, dort liegen sie ueber dem Formular. */ .woocommerce-checkout .ppc-button-wrapper{margin-block:20px} /* "Zurueck zum Shop" beim leeren Warenkorb */ .cart-empty + p.return-to-shop{margin-top:18px} .woocommerce .return-to-shop .button{ display:inline-block; font-family:var(--schrift-kopf);font-weight:700;font-size:16px; padding:14px 24px;border-radius:var(--radius-klein); background:var(--beere);color:#fff;text-decoration:none; } /* --------------------------------------------- Bestelluebersicht der Kasse Die Zeilen hatten graue Streifen aus dem WooCommerce-Grundstil, im cremefarbenen Kasten sah das nach Fehler aus. */ .woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td{background:transparent} .woocommerce-checkout-review-order-table .cart_item td{background:transparent} /* Die Menge klebte mitten im Namen. Sie gehoert ans Ende der Zeile. */ .woocommerce-checkout-review-order-table .product-name{ display:table-cell; } .woocommerce-checkout-review-order-table .product-quantity{ display:inline;font-weight:600;color:var(--text);margin-left:4px; } /* Mobil: Tabellenkopf weg, Zeilen als Bloecke. Sonst quetscht sich die Positionstabelle auf 500 Pixel in fuenf Spalten. */ @media (max-width:720px){ .woocommerce table.shop_table.cart thead{display:none} .woocommerce table.shop_table.cart tr.cart_item{ display:grid;grid-template-columns:62px 1fr auto; gap:4px 12px;align-items:center; padding:14px 12px;border-bottom:1px solid var(--linie); } .woocommerce table.shop_table.cart tr.cart_item td{ display:block;border:0;padding:0;background:transparent; } /* JEDE Zelle bekommt Spalte UND Zeile. Beim ersten Versuch hatte ich nur einzelne gesetzt und den Rest der Auto-Platzierung ueberlassen. Die richtet sich aber nach der Reihenfolge im Quelltext (Loeschen, Vorschaubild, Name, Preis, Menge, Summe), und die passt nicht zur gewuenschten Anordnung. Ergebnis: Der Produktname stand UNTER dem Bild statt daneben und die Summe klebte oben rechts. */ .woocommerce table.shop_table.cart .product-remove{ grid-column:3;grid-row:1;text-align:right;width:auto; } .woocommerce table.shop_table.cart .product-thumbnail{ grid-column:1;grid-row:1 / span 3; } .woocommerce table.shop_table.cart .product-name{ grid-column:2;grid-row:1;font-size:15px;line-height:1.35; } .woocommerce table.shop_table.cart .product-price{ grid-column:2;grid-row:2;text-align:left;color:var(--grau);font-size:14px; } .woocommerce table.shop_table.cart .product-quantity{grid-column:2;grid-row:3} .woocommerce table.shop_table.cart .product-subtotal{ grid-column:3;grid-row:3;text-align:right;font-weight:600;align-self:end; } .woocommerce table.shop_table.cart td.actions .coupon{ width:100%;max-width:none;float:none; } .woocommerce table.shop_table.cart td.actions .coupon .input-text{max-width:none} .woocommerce table.shop_table.cart td.actions .button{ width:100%;float:none;margin-top:10px; } .cart_totals{max-width:none} } /* ------------------------------------------- Pflichthaken, Nachbesserung 22.08.2026, am gerenderten DOM abgelesen. Der Aufbau ist anders, als er im Quelltext aussieht, weil Germanized die Kaestchen per JS umhaengt: div.wc-gzd-checkbox-placeholder-legal p.legal.form-row.checkbox-legal <- bleibt LEER p.cr-customer-consent <- Bewertungs-Einwilligung label.checkbox label.checkbox[for=legal] <- die Pflichtzustimmung, DIREKT span.woocommerce-gzd-legal-checkbox-text im Platzhalter, NICHT span.required im p p <- bleibt LEER ZWEI FEHLER, die daraus entstanden sind: 1. Ich hatte p.form-row einen weissen Kasten mit Rahmen gegeben. Weil das p leer bleibt, stand im Bestellbereich ein leerer weisser Kasten. 2. Meine Regel gegen das doppelte Sternchen zielte auf "p.form-row label > .required". Das Label ist aber kein Kind des p. Also blieb das Original-Sternchen rechts stehen UND mein ::after kam dazu. Zwei Sterne statt einem. Deshalb hier nach dem, was wirklich im DOM steht. */ /* Leere Platzhalter und leere Absaetze verschwinden lassen. NICHT ueber :empty. Im leeren p.legal steht ein Zeilenumbruch, damit ist es fuer den Browser nicht leer und die Regel greift nicht. Gemessen, nachdem der weisse Kasten trotz :empty stehen blieb. Entscheidend ist, ob ein Kaestchen drin sitzt. */ .wc-gzd-checkbox-placeholder:empty{display:none} #order_review .wc-gzd-checkbox-placeholder > p:not(:has(input[type="checkbox"])){ display:none; } .wc-gzd-checkbox-placeholder{margin:0} /* Kasten bekommt, was wirklich ein Kaestchen enthaelt. */ /* DRITTER FEHLER an derselben Stelle, gemessen am 22.08.2026: Hier stand zusaetzlich "> p.form-row:not(:empty)". Das leere p.legal enthaelt einen Zeilenumbruch, ist also nicht :empty, und bekam damit von DIESER Regel den weissen Kasten. Meine Ausblend-Regel darueber hatte weniger Gewicht und verlor. Ich habe zweimal gegen meine eigene Regel angeschrieben, statt zu messen, wer den Rahmen setzt. Kasten bekommt nur noch, was nachweislich ein Kaestchen enthaelt. */ /* VIERTER FEHLER an derselben Stelle, gefunden am 22.08.2026, weil Michael die Kasse auf der Vorschau angesehen hat und der Kasten dort eng und schief aussah. Der Aufbau oben stimmt NUR, solange das Plugin Customer Reviews mitlaeuft. Das haengt an einer Regel von HTML, die man leicht uebersieht: Ein

darf kein zweites

enthalten. Sobald der Browser im offenen p.legal auf

stoesst, schliesst er das erste p sofort. Alles danach, auch das Pflicht-Label, rutscht dadurch eine Ebene hoch und wird direktes Kind des Platzhalters. Meine Regeln zielten auf genau diesen hochgerutschten Zustand. Ohne Customer Reviews bleibt das Label im p, mein "> label.checkbox" trifft nichts mehr, und stattdessen greift die Regel von Germanized: #order_review .wc-gzd-checkbox-placeholder p.form-row { padding: 0 1em 0 0 } Die hat ein #order_review davor und schlaegt jede Regel von mir, die nur mit Klassen arbeitet. Ergebnis auf der Vorschau: Rahmen ja, Innenabstand nein, Kaestchen klebt am Rand. WAS ICH DARAUS MITNEHME Die Gestaltung der Kasse hing unbemerkt an einem Bewertungs-Plugin. Lokal sah alles gut aus, und genau deshalb habe ich nie gemerkt, dass meine Regeln gar nicht greifen, sondern nur zufaellig danebenlagen. Ein Layout, das von einem fremden Plugin abhaengt, ist kein Layout, sondern ein Zufall mit Ablaufdatum. Deshalb deckt der Wahlausdruck jetzt BEIDE Aufbauten ab, mit und ohne Customer Reviews, und hat genug Gewicht gegen Germanized. */ /* Das p, in dem das Label sitzt, wenn Customer Reviews fehlt: kein eigener Kasten, nur Huelle. Der Kasten kommt vom Label selbst, damit beide Aufbauten gleich aussehen. Das :has() zaehlt bei der Gewichtung mit und bringt uns ueber die Germanized-Regel. */ #order_review .wc-gzd-checkbox-placeholder > p.form-row:has(> label.checkbox){ margin:0;padding:0;border:0;background:none;width:auto;float:none; } #order_review .wc-gzd-checkbox-placeholder > label.checkbox, #order_review .wc-gzd-checkbox-placeholder > p.form-row > label.checkbox, #order_review .wc-gzd-checkbox-placeholder > p.cr-customer-consent{ display:flex; align-items:flex-start; gap:13px; margin:0 0 12px; padding:18px 20px; background:var(--weiss); border:1.5px solid var(--linie); border-radius:var(--radius-klein); font-family:var(--schrift-text); font-weight:400; font-size:14.5px; line-height:1.6; cursor:pointer; } #order_review .wc-gzd-checkbox-placeholder > label.checkbox:has(input:checked), #order_review .wc-gzd-checkbox-placeholder > p.form-row > label.checkbox:has(input:checked), #order_review .wc-gzd-checkbox-placeholder > p.cr-customer-consent:has(input:checked){ border-color:var(--beere);background:var(--beere-blass); } /* Das p um die Bewertungs-Einwilligung ist selbst der Kasten, das Label darin darf deshalb keinen zweiten aufmachen. */ #order_review .wc-gzd-checkbox-placeholder > p.cr-customer-consent label{ display:flex;align-items:flex-start;gap:13px;margin:0; padding:0;border:0;background:transparent;font-weight:400;cursor:pointer; } #order_review .wc-gzd-checkbox-placeholder input[type="checkbox"]{ width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--beere); } #order_review .woocommerce-gzd-legal-checkbox-text, #order_review .woocommerce-terms-and-conditions-checkbox-text{flex:1} /* Sternchen: das eigene Element ist aria-hidden, der Vorlesetext "Erforderlich" steht separat daneben. Es darf also weg und wird ans Textende gehaengt, wo es hingehoert, statt oben rechts zu kleben. */ #order_review .wc-gzd-checkbox-placeholder .required{display:none} #order_review .woocommerce-gzd-legal-checkbox-text::after{ content:" *";color:var(--beere); } /* ------------------------------------------------ Nachbestell-Erinnerung Beim Bauen des Abo-light-Bausteins am 22.08.2026 habe ich das CSS schlicht vergessen. Der Block lief mit Browser-Standard und stand als einziger Haken der Kasse ohne Kasten da, direkt unter zwei Haken, die einen haben. Aufgefallen ist es erst beim Durchscrollen der fertigen Seite, nicht beim Testen der Funktion. Die Funktion stimmte ja. Gleiche Optik wie die Pflichthaken darueber, damit die drei Haken als eine Gruppe lesbar sind. Der Unterschied liegt in der Sache, nicht in der Gestaltung: Die beiden oberen sind Pflicht, dieser ist freiwillig und deshalb bewusst NICHT vorangehakt (§ 7 UWG). */ /* #order_review davor ist kein Zierrat. Ohne das gewinnt eine Regel weiter oben in DIESER Datei, ".woocommerce form .form-row label {display:block}", und aus dem Flex-Label wird wieder ein Block: Kaestchen und Text kleben aneinander. Genau derselbe Gewichtsfehler wie beim Pflichthaken, nur diesmal gegen mich selbst statt gegen Germanized. Zweimal an einem Tag, deshalb hier ausgeschrieben statt nur repariert. */ /* Abstand nach unten dazu (31.08.2026): Der Kasten klebte sonst am Bestellknopf, und die beiden gehoeren nicht zusammen. Der eine ist ein Angebot, der andere loest die Bestellung aus. */ #order_review .jd-erinnerung{ margin:18px 0 18px;padding:20px 22px; background:var(--weiss);border:1.5px solid var(--linie); border-radius:var(--radius-klein); } #order_review .jd-erinnerung:has(input:checked){ border-color:var(--beere);background:var(--beere-blass); } #order_review .jd-erinnerung .jd-erinnerung-frage{ display:flex;align-items:flex-start;gap:13px;margin:0; font-family:var(--schrift-text);font-weight:600;font-size:14.5px; line-height:1.6;cursor:pointer; } #order_review .jd-erinnerung .jd-erinnerung-frage input[type="checkbox"]{ width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--beere); } #order_review .jd-erinnerung .jd-erinnerung-text{ margin:9px 0 0 33px; /* 20px Kaestchen + 13px Abstand, buendig zum Text */ font-size:13.5px;line-height:1.6;color:var(--grau); } /* Das "Wann" erscheint erst, wenn der Haken gesetzt ist. Vorher waere es eine Frage zu etwas, das man noch gar nicht will. */ #order_review .jd-erinnerung .jd-erinnerung-wann{display:none;margin:12px 0 0 33px} #order_review .jd-erinnerung:has(input[name="jd_erinnerung"]:checked) .jd-erinnerung-wann{ display:block; } #order_review .jd-erinnerung .jd-erinnerung-wann label{ display:block;margin:0 0 6px;font-size:13.5px;font-weight:600; } #order_review .jd-erinnerung .jd-erinnerung-wann select{ width:100%;padding:10px 12px;font-size:14.5px; font-family:var(--schrift-text);color:var(--text); background:var(--weiss);border:1.5px solid var(--linie); border-radius:var(--radius-klein); } /* ========================================================================== YITH Wunschliste -------------------------------------------------------------------------- WIEDERAUFGEBAUT am 22.08.2026. Dieser Block war schon einmal da und ist durch einen eigenen Fehler verlorengegangen: Beim Neuschreiben des Pflichthaken-Blocks habe ich alles ab dessen Anfang bis zum Dateiende ersetzt, statt nur den Block selbst. Alles, was danach stand, war weg. Merkposten steht unten in der LIESMICH. Gestaltung: Der Knopf kommt ab Werk als schwarze Pille mit weisser Schrift. Schwarz kommt im ganzen Shop sonst nirgends vor und zieht in der Kachel mehr Aufmerksamkeit auf sich als der Preis. Er nimmt jetzt dieselbe Form wie die Packungsgroessen-Chips darueber, also Umriss-Pille. Damit hat die Kachel eine Formsprache statt zwei. Der Knopf sitzt an woocommerce_after_shop_loop_item Prioritaet 15, also zwischen unserem Kachel-Ende (5) und dem Huellen-Ende (20). Geprueft: er landet in der Huelle und NICHT im Kachel-Link, also kein verschachteltes a-Element. ========================================================================== */ /* Linksbuendig wie alles andere in der Kachel. GEMESSEN, nicht geraten: Der Block hat margin-left und margin-right je 75,1 px. Das sind YITHs automatische Raender, die den Knopf mittig ziehen. Ein margin:0 auf das KIND aendert daran nichts, der Rand haengt am Block selbst. */ .kachel-fuss .yith-wcwl-add-to-wishlist, .yith-add-to-wishlist-button-block{ margin:12px auto 0 0 !important; display:flex; justify-content:flex-start; text-align:left; width:auto; } /* NACHTRAG 24.08.2026: Der Knopf stand trotz der Regel oben mittig. * * Die Regel oben trifft den BLOCK. YITH fuellt den Block aber per Skript, * und das erzeugte Element bringt eigene automatische Raender mit. Ein * linksbuendiger Block mit einem mittig gezogenen Kind sieht aus wie ein * mittiger Knopf. * * Zweiter Fall derselben Art in diesem Projekt: erst der Block, jetzt das * Kind. Merksatz: Bei Bausteinen, die per Skript entstehen, reicht es * nicht, den Behaelter zu bearbeiten. */ .yith-wcwl-add-to-wishlist-button, .yith-wcwl-add-to-wishlist button, .yith-add-to-wishlist-button-block button, .yith-add-to-wishlist-button-block > *{ margin-left:0 !important;margin-right:auto !important; } .yith-wcwl-add-to-wishlist-button, .yith-wcwl-add-to-wishlist button, .yith-add-to-wishlist-button-block button{ display:inline-flex !important;align-items:center;gap:7px; padding:7px 14px !important; background:transparent !important; border:1.5px solid var(--linie) !important; border-radius:999px !important; color:var(--grau) !important; font-family:var(--schrift-kopf) !important; font-size:13px !important;font-weight:600 !important; line-height:1.2 !important; min-height:0 !important; box-shadow:none !important; text-transform:none !important; transition:border-color .14s ease, color .14s ease, background .14s ease; } .yith-wcwl-add-to-wishlist-button:hover, .yith-wcwl-add-to-wishlist button:hover, .yith-add-to-wishlist-button-block button:hover{ border-color:var(--beere) !important; color:var(--beere) !important; background:var(--beere-blass) !important; } /* Gemerkt: gefuellt in Beere, damit der Zustand ohne Nachdenken sichtbar ist. Pink bleibt dem Warenkorb vorbehalten. */ .yith-wcwl-add-to-wishlist-button--added, .yith-wcwl-add-to-wishlist-button.exists, .yith-add-to-wishlist-button-block button[class*="added"]{ border-color:var(--beere) !important; background:var(--beere-blass) !important; color:var(--beere-tief) !important; } /* Das Herz. Ab Werk deutlich zu gross fuer die Zeile. */ .yith-wcwl-icon-svg__wrapper svg, .yith-wcwl-add-to-wishlist-button svg, .yith-add-to-wishlist-button-block svg{ width:14px !important;height:14px !important; } /* Auf der Produktseite darf er etwas mehr Gewicht haben, dort ist Platz und er steht allein unter dem Kaufknopf. */ .summary .yith-wcwl-add-to-wishlist, .summary .yith-add-to-wishlist-button-block{margin:14px auto 0 0 !important} .summary .yith-wcwl-add-to-wishlist-button, .summary .yith-add-to-wishlist-button-block button{ padding:10px 18px !important;font-size:14px !important; } /* YITH bringt eigene Feedback-Meldungen mit, die als schwarzer Kasten ueber der Seite liegen. Auf Markenfarbe gebracht. */ .yith-wcwl-popup,.yith-wcwl-feedback{ background:var(--beere) !important;color:#fff !important; border-radius:var(--radius-klein) !important; font-family:var(--schrift-kopf) !important; } /* ========================================================================== Widerrufsknopf in der Fussleiste -------------------------------------------------------------------------- ALS KNOPF, nicht als Textlink. § 356a BGB verlangt "hervorgehoben platziert", und ein unterstrichener Fusslink ist das nicht. Sitzt unten rechts, wie es inzwischen die meisten Shops loesen. Er kommt als

mit einem darin. Der Absatz muss seine Zentrierung und seine Blockbreite verlieren, sonst schiebt er sich ueber die ganze Zeile. ========================================================================== */ .fuss-unten{align-items:center} .fuss-unten .fuss-vermerk{opacity:.75} .fuss-unten .fuss-vermerk em{font-style:normal;opacity:.7} .fuss-unten p.eu-owb-order-withdraw-from-contract-button{ margin:0 !important;padding:0 !important; width:auto; text-align:right !important; } .fuss-unten .eu-owb-order-withdraw-from-contract-button a, .fuss-unten .eu-owb-order-withdraw-from-contract-button a.button{ display:inline-flex;align-items:center;justify-content:center; padding:11px 22px !important; margin:0 !important; /* Heller Knopf auf dunklem Grund. Kontrast gemessen: #ffffff auf #1f1418 ergibt 16,8:1, also weit ueber der Anforderung. Beere waere auf diesem Grund zu dunkel, Pink gehoert dem Warenkorb. */ background:#fff !important; color:var(--text) !important; border:0 !important; border-radius:var(--radius-klein) !important; font-family:var(--schrift-kopf) !important; font-size:14px !important; font-weight:700 !important; line-height:1.2 !important; text-decoration:none !important; min-height:0 !important; white-space:nowrap; transition:filter .12s ease, transform .12s ease; } .fuss-unten .eu-owb-order-withdraw-from-contract-button a:hover{ filter:brightness(.93); } .fuss-unten .eu-owb-order-withdraw-from-contract-button a:active{ transform:translateY(1px); } .fuss-unten .eu-owb-order-withdraw-from-contract-button a:focus-visible{ outline:2px solid #fff;outline-offset:3px; } /* Auf schmalen Geraeten unter den Vermerk, ueber die volle Breite. */ @media (max-width:640px){ .fuss-unten{flex-direction:column;align-items:flex-start;gap:16px} .fuss-unten p.eu-owb-order-withdraw-from-contract-button{width:100%} .fuss-unten .eu-owb-order-withdraw-from-contract-button a{width:100%} } /* ========================================================================== Inhaltsseiten: Service und Recht -------------------------------------------------------------------------- BEFUND 22.08.2026: Die Seiten liefen ueber .textblock mit max-width 68ch und mittigem Rand. Fuer Fliesstext ist das richtige Typografie, fuer die Servicesseiten war es falsch: Dort stehen Daten, keine Prosa, und die standen als schmale Spalte mit viel Leere daneben. Loesung: Der Lesetext bleibt bei einer angenehmen Zeilenlaenge, aber Tabellen und Kartenblöcke duerfen ausbrechen und die Breite nutzen. ========================================================================== */ /* Die Seitenvorlage vergibt BEIDE Klassen an dasselbe Element:

. Ein max-width hier hebelt also nicht die Lesespalte aus, sondern den Rahmen der ganzen Seite. ZWEI FEHLER nacheinander an dieser Stelle: 1. Erst 920 px. Damit war der Inhalt SCHMALER als der Kopf, links und rechts blieben je 160 px leer. 2. Dann max-width:none. Damit lief der Inhalt ueber die volle Fensterbreite, bei 2560 px also 2520 px breit, waehrend der Kopf bei 1240 blieb. Der Inhalt war jetzt BREITER als der Kopf. Richtig ist genau die Rahmenbreite, dann deckt sich der Inhalt mit dem Logo links und dem Warenkorb rechts. */ .textblock{max-width:74ch} :is(.page,.single) .textblock{max-width:var(--breite);margin-inline:auto} /* UEBERSCHRIFT AUF TEXTSEITEN KLEINER (25.08.2026, Michaels Rueckmeldung: "zu wuchtig"). Die Grundregel in stil.css lautet h1{clamp(32px,4.4vw,52px)}. Die ist fuer den Hero auf der Startseite gedacht, wo die Ueberschrift den halben Bildschirm traegt. Auf einer Ratgeberseite steht sie ueber einem Fliesstext und war damit gemessene 52 px gross, bei einer h2 von 26 px. Genau das Doppelte, und deshalb wirkte sie wie ein Plakat. Kandidaten in echter Groesse nebeneinander gerendert (52, 42, 38, 34, 30) und danach entschieden, statt eine Zahl zu raten. Ab 34 px rueckt die Ueberschrift so nah an die 26er h2, dass die Gliederung verwaessert. 38 px traegt sie noch klar. ZWEITER ANLAUF, weil der erste auf schmalen Schirmen die Gliederung zerstoert haette. Mit clamp(27px,2.9vw,38px) gemessen: 1400 px h1 38 h2 26 gut 900 px h1 27 h2 26 praktisch gleich 500 px h1 27 h2 26 praktisch gleich Der untere Anschlag greift schon ab rund 930 px, waehrend die h2 fest auf 26 px steht. Von dort abwaerts gab es keinen Groessenunterschied mehr. Das war uebrigens vorher genauso, nur mit 52 statt 38 oben, und deshalb unten nie aufgefallen. Jetzt schrumpfen beide, und zwar im selben Verhaeltnis. Das Ergebnis ist ueber alle Breiten ein Faktor von rund 1,45: 1400 px h1 38 h2 26 900 px h1 30 h2 21 500 px h1 30 h2 21 Bewusst auf .textblock eingegrenzt. Der Hero und die Kaufspalte haben eigene Regeln und bleiben unberuehrt. */ .textblock h1{font-size:clamp(30px,3vw,38px);line-height:1.2;margin-bottom:8px} .textblock > h2{ font-family:var(--schrift-kopf);font-size:24px;margin:40px 0 14px; } .textblock > h2:first-of-type{margin-top:22px} .textblock h3{font-family:var(--schrift-kopf);font-size:18px;margin:24px 0 8px} .textblock p{line-height:1.7;margin:0 0 14px} .textblock ul,.textblock ol{margin:0 0 16px;padding-left:22px;line-height:1.7} .textblock li{margin:0 0 6px} /* Textlinks im Artikel sind beere. Knoepfe NICHT: Die bringen ihre eigene * Farbe mit, und .textblock a (Gewicht 0,2,0) schlaegt .knopf-marke (0,1,0). * * BEFUND 31.08.2026: Der Knopf "Zum Produktfilter" auf der FAQ-Seite war * eine leere violette Flaeche. Der Text war da, nur beere auf beere, also * unsichtbar. Zweiter Fall derselben Art an einem Tag (siehe die * Bildhoehe bei .rg-produkt-bild). Die .textblock-Regeln sind gierig, weil * sie fremdes Markup baendigen sollen. Sie duerfen aber nichts uebersteuern, * was wir selbst mit eigener Klasse setzen. * * :not(.knopf) statt einer Gegenregel mit hoeherem Gewicht: Das loest den * Fall ein fuer alle Mal, statt Regel gegen Regel zu stellen. */ .textblock a:not(.knopf){color:var(--beere);text-underline-offset:2px} /* Tabellen duerfen breiter werden als die Lesespalte. Auf einer Versandkostenseite ist die Tabelle der Inhalt, nicht der Text. */ .textblock table.jd-tabelle{ width:100%;max-width:none; border-collapse:collapse;margin:0 0 22px; font-size:15.5px; } .textblock table.jd-tabelle th, .textblock table.jd-tabelle td{ padding:14px 16px;border-bottom:1px solid var(--linie); text-align:left;vertical-align:top; } .textblock table.jd-tabelle thead th{ background:var(--creme);font-family:var(--schrift-kopf);font-weight:700; border-bottom:1px solid var(--linie); } .textblock table.jd-tabelle tbody tr:last-child td{border-bottom:0} .textblock table.jd-versand td:last-child{ white-space:nowrap;font-family:var(--schrift-kopf);font-weight:700; } .textblock table.jd-versand{ border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden; } /* Zahlarten als Karten nebeneinander, statt als Liste untereinander. */ .jd-zahlarten{ display:grid;gap:16px;margin:0 0 22px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } .jd-zahlart{ padding:20px;background:var(--creme); border:1px solid var(--linie);border-radius:var(--radius); } .jd-zahlart h3{margin:0 0 8px;font-size:17px} .jd-zahlart p{margin:0;font-size:14.5px;line-height:1.6;color:var(--grau)} .textblock p.jd-hinweis{ font-size:14px;color:var(--grau);line-height:1.6; padding:14px 16px;background:var(--creme);border-radius:var(--radius-klein); } /* KORREKTUR 22.08.2026: Vorher stand hier max-width:920px. Bei einem Rahmen von 1240 px blieben damit links und rechts je 160 px leer, die Seite nutzte also nur rund 80 Prozent der Breite, waehrend Kopf und Menue darueber ueber die volle Breite liefen. Genau das hat Michael gesehen. Jetzt nimmt der Inhaltsbereich die volle Breite des Rahmens. Damit Fliesstext trotzdem lesbar bleibt, sind die ABSAETZE begrenzt, nicht der Kasten drumherum. Ein Absatz ueber 1240 px waere rund 200 Zeichen lang, das liest niemand. Tabellen, Karten und Ueberschriften duerfen die Breite dagegen voll nutzen. */ :is(.page,.single) .textblock, :is(.page,.single) .textblock:has(table.jd-tabelle), :is(.page,.single) .textblock:has(.jd-zahlarten){max-width:var(--breite);margin-inline:auto} /* NACHTRAG 22.08.2026: Vorher stand hier der direkte Kindselektor ">". Die Ratgeberseiten bringen aber noch Flatsome-Huellen mit, die Absaetze sind dort NICHT direkte Kinder. Ergebnis: keine Zeilenbegrenzung, keine Abstaende, alles ein dichter Block. Derselbe Fehlertyp wie beim Pflichthaken, wo das Label auch nicht dort sass, wo ich es vermutet hatte. Deshalb Nachfahren statt Kinder. */ /* Michaels Ansage 22.08.2026: volle Seitenbreite, auch fuer den Fliesstext. Vorher 78 Zeichen, das liess rechts rund 500 px leer. MEIN EINWAND, der Vollstaendigkeit halber: Bei 1200 px Spaltenbreite sind das rund 150 Zeichen je Zeile. Ab etwa 90 Zeichen verliert das Auge beim Zeilenwechsel haeufiger den Anschluss. Deshalb hier wenigstens groessere Zeilenabstaende, das faengt einen Teil davon auf. Wenn es beim Lesen stoert, ist die Stellschraube dieser eine Wert. */ :is(.page,.single) .textblock p:not(.jd-hinweis), :is(.page,.single) .textblock ul, :is(.page,.single) .textblock ol{max-width:none} :is(.page,.single) .textblock p{line-height:1.85} :is(.page,.single) .textblock li{line-height:1.8} /* Lange Rechtstexte bekommen etwas Luft, sonst kleben 45.000 Zeichen Datenschutzerklaerung als ein Block zusammen. */ .textblock ol > li{margin-bottom:10px} .textblock strong{color:var(--text)} /* ========================================================================== Ratgeberseiten -------------------------------------------------------------------------- Daschas SEO-Einstiege. Sie kamen aus dem Flatsome-Baukasten und trugen dessen Struktur mit: Ueberschriften als section-title, Absaetze ohne Abstand, alles in Huellen. Im neuen Theme stand das als ein dichter Textblock ohne Hierarchie. Die URLS BLEIBEN. Beim Umzug wird nur das Theme getauscht, die Seiten bleiben in derselben Installation. Hier geht es nur um die Darstellung. ========================================================================== */ /* KORREKTUR 22.08.2026, Michaels Ansage: Ich hatte jeder h2 eine Trennlinie gegeben. Bei hundefutter-pferd mit 26 Ueberschriften sind das 26 Striche auf einer Seite. Das zerhackt die Seite, statt sie zu gliedern, und das Auge findet keinen Halt mehr. Gliederung macht jetzt der Abstand, nicht die Linie. Eine Linie ist ein starkes Signal und gehoert an wenige Stellen: vor die Produktempfehlung und vor das Weiterlesen am Ende. */ :is(.page,.single) .textblock h2{ font-family:var(--schrift-kopf); /* Mitgeschrumpft, sonst steht sie auf schmalen Schirmen gleichauf mit der h1. Siehe die Messreihe beim h1-Kommentar weiter oben. */ font-size:clamp(21px,2vw,26px);line-height:1.25; margin:52px 0 14px;color:var(--text); } :is(.page,.single) .textblock h2:first-of-type{margin-top:26px} :is(.page,.single) .textblock h3{ font-family:var(--schrift-kopf);font-size:19px;margin:30px 0 10px; } :is(.page,.single) .textblock h4{ font-family:var(--schrift-kopf);font-size:16.5px;margin:22px 0 8px; } :is(.page,.single) .textblock p{line-height:1.75;margin:0 0 18px} :is(.page,.single) .textblock li{margin:0 0 8px;line-height:1.7} /* Flatsome-Bausteine wie section-title bringen eigene Farben mit, die nicht zur neuen Hierarchie passen. Die werden zurueckgesetzt. ZU GROB WAR mein erster Versuch: [style*="color"] mit !important. Damit habe ich AUCH die gewollten Hervorhebungen im Text platt gemacht. In den Artikeln stehen 116 Stellen mit inline gesetzter Farbe, und die ist meist #813f63, also unser Beere. Das ist Absicht und darf bleiben. */ :is(.page,.single) .textblock .section-title, :is(.page,.single) .textblock .section-title-main{color:inherit !important} /* Scheinueberschriften: In brokkoli-und-hunde stehen drei Absaetze, die nur aus eingefaerbtem Fettdruck bestehen. Das sind fuer Google keine Ueberschriften, die Seite hat deshalb null h2. Bis der Text repariert ist, bekommen sie wenigstens die Optik einer Zwischenueberschrift. */ :is(.page,.single) .textblock p > span[style*="color"] > strong:only-child, :is(.page,.single) .textblock p > strong:only-child{ display:block; font-family:var(--schrift-kopf);font-size:19px;font-weight:700; margin-top:10px; } /* Bilder in den Artikeln bekommen Form und Abstand. Bei hunde-trockenfutter sind es 30 Stueck, ohne Regel stehen die randlos im Text. */ :is(.page,.single) .textblock img{ max-width:100%;height:auto;display:block; border-radius:var(--radius);margin:24px 0; } :is(.page,.single) .textblock figure{margin:24px 0} :is(.page,.single) .textblock figcaption{ font-size:13.5px;color:var(--grau);margin-top:8px; } /* Bilder aus [jollydog_bild], Daschas Fotos in Ueber uns (27.08.2026). * * Die Hoehe fuehrt, die Breite folgt. NICHT umgekehrt. * * Erster Versuch war `width:100%` plus Hoehendeckel und `object-fit:cover`. * Das sieht bei Querformaten gut aus und zerstoert Hochformate: Ein 3:4-Foto * ueber die volle Textbreite waere fast 1000 Pixel hoch, der Deckel schneidet * es auf 460, und vom Hund bleibt ein Streifen. Beim Ansehen der gerenderten * Seite sofort aufgefallen, in der Vorschau der Mediathek dagegen nicht. * * Jetzt begrenzt die Hoehe, die Breite ergibt sich. Damit bleibt jedes Foto * vollstaendig, egal ob hoch, quer oder quadratisch, und es wird nichts * beschnitten und nichts verzerrt. */ :is(.page,.single) .textblock .jd-bild{margin:32px 0;text-align:center} :is(.page,.single) .textblock .jd-bild img{ margin:0 auto; width:auto;max-width:100%; max-height:min(62vh,540px); } :is(.page,.single) .textblock .jd-bild figcaption{text-align:center} /* Die Doppelaufnahme vom ersten Hund lebt vom Vergleich der beiden Haelften und vertraegt deshalb etwas mehr Hoehe. */ :is(.page,.single) .textblock .jd-bild-quad img{max-height:min(72vh,620px)} /* Die Flatsome-Huellen, die noch drinstecken, duerfen keine eigene Breite oder Polsterung mehr aufmachen. */ :is(.page,.single) .textblock .row, :is(.page,.single) .textblock .col, :is(.page,.single) .textblock .col-inner, :is(.page,.single) .textblock .container{ width:auto !important;max-width:none !important; padding:0 !important;margin:0 !important; } /* ========================================================================== Produktbloecke in Ratgeberartikeln -------------------------------------------------------------------------- BEFUND 22.08.2026: Am Ende von brokkoli-und-hunde steht "Jetzt unser Angebot nutzen" und darunter ein Produkt. Das rutschte voellig ohne Gestaltung durch: nackte Textzeilen, kein Bild, kein Rahmen. Ursache: Es ist Flatsomes Produktraster-Markup (product-small box has-hover, badge-container, image-tools). Ohne Flatsome-CSS steht davon nichts mehr. ACHTUNG, groesseres Thema: Auf dem Livesystem erzeugt das vermutlich ein Flatsome-Kurzbefehl. Wenn ja, faellt er beim Themewechsel aus und der Kurzbefehl steht als Text auf der Seite. Muss Michael im Editor nachsehen. Siehe Projektnotiz. ========================================================================== */ :is(.page,.single) .textblock .section-title-container{margin:44px 0 18px} :is(.page,.single) .textblock h3.section-title{ font-family:var(--schrift-kopf);font-size:24px;margin:0; } :is(.page,.single) .textblock h3.section-title b{display:none} /* Das Raster wieder zu einem Raster machen. */ :is(.page,.single) .textblock .row.equalize-box{ display:grid;gap:20px;margin:0 0 24px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } :is(.page,.single) .textblock .product-small.box{ display:flex;flex-direction:column;height:100%; background:var(--weiss);border:1px solid var(--linie); border-radius:var(--radius);overflow:hidden; } :is(.page,.single) .textblock .product-small .box-image img{ width:100%;height:auto;margin:0;border-radius:0; aspect-ratio:1/1;object-fit:contain;background:#fff; } :is(.page,.single) .textblock .product-small .box-text{padding:16px} :is(.page,.single) .textblock .product-small .name a, :is(.page,.single) .textblock .product-small .woocommerce-loop-product__title a{ font-family:var(--schrift-kopf);font-weight:700;font-size:15px; color:var(--text);text-decoration:none;line-height:1.35; } :is(.page,.single) .textblock .product-small .price, :is(.page,.single) .textblock .product-small .woocommerce-Price-amount{ font-family:var(--schrift-kopf);font-weight:700;font-size:17px; color:var(--text); } :is(.page,.single) .textblock .product-small .category, :is(.page,.single) .textblock .product-small .cat-label{ font-size:11.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--grau); } :is(.page,.single) .textblock .product-small .add-to-cart-button a, :is(.page,.single) .textblock .product-small a.button{ display:inline-block;margin-top:10px; padding:9px 16px;border-radius:var(--radius-klein); background:var(--pink);color:var(--text); font-family:var(--schrift-kopf);font-weight:700;font-size:14px; text-decoration:none; } /* Flatsome-Reste, die ohne dessen CSS nur stoeren. */ :is(.page,.single) .textblock .badge-container, :is(.page,.single) .textblock .image-tools, :is(.page,.single) .textblock .is-divider{display:none} /* ========================================================================== Ratgeber: Uebersicht und Kacheln ========================================================================== */ .ratgeber-anzahl{color:var(--grau);font-size:15px;margin:0 0 22px} .ratgeber-raster{ display:grid;gap:24px;margin:0 0 24px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } .ratgeber-kachel{ display:flex;flex-direction:column; background:var(--weiss); border:1px solid var(--linie);border-radius:var(--radius); overflow:hidden;text-decoration:none;color:var(--text); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .ratgeber-kachel:hover{ border-color:var(--beere); transform:translateY(-2px); box-shadow:0 10px 26px -14px rgba(30,16,25,.32); } /* HIER STANDEN DIE REGELN FUER .ratgeber-kachel-bild (raus am 25.08.2026). * * Michaels Ansage: keine Bildkacheln im Ratgeber, weil bei den alten * Beitraegen nie ein Beitragsbild gepflegt wurde. Die Kacheln fielen deshalb * auf eine leere Farbflaeche zurueck, und die sieht aus wie ein Bild, das * nicht geladen hat. * * Regeln geloescht statt liegengelassen. Ein Stylesheet voller Selektoren, * die kein Markup mehr treffen, ist genau die Falle, in die wir beim * Umschalter gelaufen sind: Dort standen `.tierwahl button`-Regeln, waehrend * das Markup laengst `` benutzte. Wer etwas aendern will, erwischt die * falsche Stelle und wundert sich, dass nichts passiert. * * Sollen die Bilder zurueck, gehoert hier wieder her: * aspect-ratio 16/10, object-fit cover, kein eigener Radius. * Das Markup dafuer steht in jollydog_ratgeber_raster(), auch die Funktion * jollydog_ratgeber_bild() gibt es weiterhin. */ .ratgeber-kachel-text{display:flex;flex-direction:column;gap:8px;padding:20px} .ratgeber-kachel-titel{ font-family:var(--schrift-kopf);font-size:18px;font-weight:700;line-height:1.3; } .ratgeber-kachel-vorschau{ font-size:14.5px;line-height:1.6;color:var(--grau); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .ratgeber-kachel-mehr{ margin-top:auto;font-family:var(--schrift-kopf);font-size:14px;font-weight:700; color:var(--beere); } .ratgeber-kachel:hover .ratgeber-kachel-mehr{color:var(--beere-tief)} /* Rueckweg oben im Artikel */ .ratgeber-rueckweg{margin:0 0 6px;font-size:14.5px} .ratgeber-rueckweg a{color:var(--grau);text-decoration:none} .ratgeber-rueckweg a:hover{color:var(--beere)} /* Weiterlesen am Artikelende */ .ratgeber-weiter{margin-top:56px;padding-top:34px;border-top:1px solid var(--linie)} .ratgeber-weiter h2{ font-family:var(--schrift-kopf);font-size:24px;margin:0 0 22px; padding-top:0;border-top:0; } /* Im Ratgeber-Raster gelten die Bildregeln der Artikel nicht. */ .ratgeber-raster img{margin:0;border-radius:0} /* --------------------------------------------- Losgeloeste Produktbausteine BEFUND 22.08.2026, gemessen: In den Ratgeberseiten hat das Produktraster nur noch 2 Kinder statt 8. WordPress' wpautop hat beim Speichern

-Tags eingefuegt und die Verschachtelung zerrissen, die uebrigen sieben Produkte liegen lose im Textfluss. Das ist ein Artefakt des Imports: Ich habe gerendertes HTML abgezogen und neu gespeichert, und das uebersteht WordPress' Inhaltsfilter nicht. Auf dem Livesystem sieht das anders aus. Diese Regeln sind eine Notbremse, damit die Seiten lokal nicht entgleisen. Die richtige Loesung ist ein eigener Baustein, siehe Projektnotiz. */ :is(.page,.single) .textblock .product-small{ max-width:260px; background:var(--weiss);border:1px solid var(--linie); border-radius:var(--radius);overflow:hidden;margin:0 0 20px; } :is(.page,.single) .textblock .product-small .box-image img{ width:100%;max-width:100%;height:auto; aspect-ratio:1/1;object-fit:contain;background:#fff; margin:0;border-radius:0; } :is(.page,.single) .textblock .col, :is(.page,.single) .textblock .col-inner{max-width:260px} :is(.page,.single) .textblock .row.equalize-box{align-items:start} /* ------------------------------------------- Produktbaustein im Ratgeber Erzeugt vom Kurzbefehl [jollydog_produkte] aus dem Plugin jollydog-ratgeber. Ersetzt die eingefrorenen Flatsome-Raster, siehe Projektnotiz. */ .rg-produkte{margin:56px 0 0;padding-top:34px;border-top:1px solid var(--linie)} .rg-produkte h2{ font-family:var(--schrift-kopf);font-size:24px;margin:0 0 22px; padding-top:0;border-top:0; } .rg-produkte-raster{ display:grid;gap:20px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); } .rg-produkt{ display:flex;flex-direction:column; background:var(--weiss);border:1px solid var(--linie); border-radius:var(--radius);overflow:hidden; text-decoration:none;color:var(--text); transition:border-color .15s ease, transform .15s ease; } .rg-produkt:hover{border-color:var(--beere);transform:translateY(-2px)} .rg-produkt-bild{display:block;aspect-ratio:1/1;background:#fff} /* BEFUND 31.08.2026: Auf der FAQ-Seite blieben ALLE 33 Produktbilder leer, * lokal dagegen nicht. Ursache war eine unserer eigenen Regeln: * * :is(.page, .single) .textblock img { height:auto } Gewicht (0,2,1) * .rg-produkt-bild img { height:100% } Gewicht (0,1,1) * * Die Textblock-Regel gewinnt, also galt height:auto. Solange ein Bild * nicht geladen ist, ist auto gleich NULL Pixel. Ein Bild ohne Hoehe gilt * dem Browser als nicht im Sichtbereich, also laedt er es nie, also bleibt * die Hoehe null. Eine Schleife, aus der die Seite nicht herauskommt. * * Lokal fiel es nicht auf: Dort waren die Bilder schon geladen, und auto * ergab dann die echte Hoehe. Der Unterschied lag also nicht am Aufbau, * sondern am Ladezustand. Genau deshalb muss so etwas dort geprueft * werden, wo es auftritt. * * Gelöst NICHT mit mehr Spezifitaet (das waere ein Wettruesten, das die * naechste Regel wieder gewinnt), sondern indem das Bild seine Hoehe aus * dem Seitenverhaeltnis bekommt. Damit steht die Hoehe fest, BEVOR das Bild * da ist. Das arbeitet mit height:auto zusammen statt dagegen, beendet die * Schleife und verhindert nebenbei das Springen des Layouts beim Nachladen. */ .rg-produkt-bild img{ width:100%;aspect-ratio:1/1;height:auto; object-fit:contain;display:block; margin:0;border-radius:0; } .rg-produkt-text{display:flex;flex-direction:column;gap:6px;padding:16px} .rg-produkt-name{ font-family:var(--schrift-kopf);font-size:15px;font-weight:700;line-height:1.35; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .rg-produkt-preis{font-family:var(--schrift-kopf);font-weight:700;font-size:16px} .rg-produkt-preis del{opacity:.5;font-weight:400;font-size:14px} .rg-produkt-mehr{ margin-top:auto;font-family:var(--schrift-kopf);font-size:13.5px;font-weight:700; color:var(--beere); } .ratgeber-leer{padding:20px 0} .ratgeber-leer-titel{font-family:var(--schrift-kopf);font-size:19px;margin:0 0 10px} /* Aufmacherbild im Ratgeberartikel. Bewusst breiter als der Fliesstext wirkt, aber im Rahmen. 16 zu 9 zugeschnitten, damit alle Artikel oben gleich anfangen, egal welches Bild Dascha waehlt. */ .ratgeber-aufmacher{margin:0 0 30px} .ratgeber-aufmacher img{ width:100%;height:auto;display:block;margin:0; aspect-ratio:16/9;object-fit:cover; border-radius:var(--radius);background:var(--creme); } .ratgeber-aufmacher figcaption{ font-size:13.5px;color:var(--grau);margin-top:9px; } /* Hinweisband auf der Vorschau. Bewusst auffaellig und nicht wegklickbar. */ .vorschau-band{ background:var(--beere-tief);color:#fff; font-family:var(--schrift-text);font-size:13.5px;line-height:1.4; text-align:center;padding:9px 18px; } .vorschau-band strong{ font-family:var(--schrift-kopf);text-transform:uppercase; letter-spacing:.08em;font-size:12px;margin-right:8px; } /* ========================================================================== Textseiten laufen ueber die volle Inhaltsbreite -------------------------------------------------------------------------- HIER STAND EINE LESESPALTE MIT 68ch, und sie war falsch. Ich hatte sie am 22.08.2026 von mir aus eingebaut, weil die neue Seite "Über uns" mir mit ueber 150 Zeichen je Zeile zu breit vorkam. Michaels Antwort: "Hier nutzt du aber wieder nur ungefaehr die Haelfte der zur Verfuegung stehenden Content-Breite." Er hat das damit zum dritten Mal gesagt, vorher schon bei den Servicesseiten und bei den Ratgeberseiten. Die Breite des Inhalts richtet sich in diesem Shop nach dem Rahmen, also nach dem Logo links und dem Warenkorb rechts. Das ist eine Gestaltungsentscheidung, keine Frage der Typografielehre, und sie ist getroffen. Merksatz fuer mich: Wenn derselbe Hinweis dreimal kommt, ist es keine Geschmacksfrage mehr, sondern eine Vorgabe. Nicht wieder einbauen. ========================================================================== */ /* Der Schlusssatz von Dascha, als Zitat gesetzt. */ .jd-zitat{ margin:34px 0 8px;padding:20px 24px;border-left:3px solid var(--beere); background:var(--creme);border-radius:0 var(--radius) var(--radius) 0; } .jd-zitat p{ margin:0;font-family:var(--schrift-kopf);font-size:19px;line-height:1.55; } /* GELTUNGSBEREICH ERWEITERT (25.08.2026, Michaels Rueckmeldung) * * Alle Regeln oben hiessen bis heute ".page .textblock". Ein BEITRAG traegt * aber die Koerperklasse .single, nicht .page, und lief deshalb weiter in * der schmalen Grundspalte von 74ch. Auf /praxistest/ war das sofort zu * sehen: halbe Breite, waehrend jede Seite daneben die volle nutzt. * * Statt zwanzig Regeln zu verdoppeln steht jetzt :is(.page,.single) davor. * Das hat dasselbe Gewicht wie eine einzelne Klasse, verschiebt also keine * Spezifitaet, und beide Faelle bleiben fuer immer synchron. Wer eine Regel * aendert, aendert sie fuer beide. * * Dass dabei auch die Flatsome-Regeln (product-small, section-title) fuer * Beitraege gelten, ist ohne Wirkung: In den vier Beitraegen steckt kein * Flatsome-Markup. */ /* ---------- Händlerformular ---------- * Angelegt 31.08.2026, siehe inc/haendler.php fuer den Befund (rohe * Flatsome-Bausteine im Klartext plus ein Formular, dessen Plugin gar nicht * installiert ist). * * Bewusst schlicht: zwei Spalten am Schreibtisch, eine auf dem Handy, sonst * dieselben Formen wie im Rest des Shops. Ein Anmeldeformular soll nicht * gestalterisch auffallen, es soll ausfuellbar sein. */ .jd-haendlerform{max-width:680px;margin:28px 0 0} .jd-formzeile{margin-bottom:18px} .jd-formzeile label{ display:block;font-family:var(--schrift-kopf);font-weight:700; font-size:15px;margin-bottom:6px; } .jd-formzeile input, .jd-formzeile textarea{ width:100%;font-family:inherit;font-size:16px; padding:12px 14px;border:1px solid var(--linie); border-radius:var(--radius-klein);background:var(--weiss); } .jd-formzeile textarea{resize:vertical;min-height:96px} .jd-formzeile input:focus-visible, .jd-formzeile textarea:focus-visible{outline:2px solid var(--beere);outline-offset:1px} .jd-formpaar{display:grid;grid-template-columns:1fr 1fr;gap:0 20px} @media (max-width:700px){ .jd-formpaar{grid-template-columns:1fr} } .jd-formhinweis{font-size:13.5px;line-height:1.6;color:var(--grau);margin:0 0 22px} .jd-haendlerform .jd-lockfeld{ position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; } /* Die Rueckmeldung nutzt die Newsletter-Optik, dort steht sie aber auf dunklem Grund. Hier auf hellem, deshalb eigene Farben. */ .jd-formmeldung{max-width:680px;margin:0 0 22px;padding:14px 18px;border-radius:var(--radius-klein)} .jd-formmeldung.newsletter-meldung-gut{background:var(--gruen-blass);color:var(--text)} .jd-formmeldung.newsletter-meldung-schlecht{background:#fdecec;color:var(--text)} /* ========================================================================== Bewertungen -------------------------------------------------------------------------- BEFUND 31.08.2026, gemeldet von Dascha: "Bei manchen Artikeln stehen Bewertungen, aber wo kann man sie lesen?" Es gab keinen Ort dafuer. Der Bereich war in WooCommerce abgeschaltet, die Sterne standen trotzdem da. Seit heute ist er an, und damit taucht zum ersten Mal WooCommerce-Markup auf, das noch nie jemand gestaltet hat. ========================================================================== */ /* Die verlinkte Sternereihe unter dem Produktnamen. */ .sterne-link{text-decoration:none;color:var(--grau)} .sterne-link .sterne-zahl{border-bottom:1px solid var(--linie)} .sterne-link:hover .sterne-zahl, .sterne-link:focus-visible .sterne-zahl{color:var(--beere);border-bottom-color:var(--beere)} /* Der Sprung aus der Sternezeile darf nicht unter der klebenden Kopfzeile landen. Ohne das steht die Ueberschrift verdeckt hinter dem Menue. */ #reviews{scroll-margin-top:96px} #reviews .woocommerce-Reviews-title{ font-family:var(--schrift-kopf);font-size:1.25rem;margin:0 0 20px } #reviews .commentlist{list-style:none;margin:0;padding:0;display:grid;gap:14px} #reviews .commentlist li{margin:0} #reviews .comment_container{ display:block;background:var(--creme);border:1px solid var(--linie); border-radius:var(--radius);padding:18px 20px } /* Gravatar aus. Die Bilder kaemen von secure.gravatar.com, also von einem Dritten, und zwar ohne Einwilligung. Serverseitig ist show_avatars abgeschaltet; diese Regel ist der Riegel davor, falls die Einstellung jemand versehentlich zurueckdreht. */ #reviews .comment_container img.avatar{display:none} #reviews .comment-text{margin:0} #reviews .meta{font-size:14px;color:var(--grau);margin:0 0 8px} #reviews .woocommerce-review__author{ font-family:var(--schrift-kopf);color:var(--text);font-weight:600 } #reviews .description p{line-height:1.65;margin:0 0 .6rem} #reviews .description p:last-child{margin-bottom:0} /* Die Sterne einer einzelnen Bewertung. WooCommerce arbeitet hier mit einer Schriftart und einer prozentualen Breite, nicht mit fuenf Symbolen. */ #reviews .star-rating{ float:none;margin:0 0 6px;color:var(--pink);font-size:14px;overflow:hidden } /* Herkunftshinweis von Germanized, "Verifizierter Kauf". */ #reviews .wc-gzd-review-authenticity-status{ font-size:13px;color:var(--grau);margin:10px 0 0 } #reviews .wc-gzd-review-authenticity-status.is-verified{color:var(--gruen)} /* Der Hinweis, dass nur Kaeufer bewerten duerfen, und die Meldung wenn noch nichts da ist. Beides waren vorher nackte Absaetze. */ #reviews .woocommerce-verification-required, #reviews .woocommerce-noreviews{ background:var(--beere-blass);border-radius:var(--radius-klein); padding:14px 18px;margin:0;color:var(--text);font-size:15px } /* Unsere Pflichtangabe nach Paragraf 5b Absatz 3 UWG. */ .jd-bewertungsherkunft{ margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--grau) } .jd-bewertungsherkunft a{color:var(--beere)} @media(max-width:640px){ #reviews .comment_container{padding:15px 16px} } /* Sterne einer einzelnen Bewertung, unsere eigenen statt der WooCommerce-Schriftart. Etwas groesser als in der Kachel, hier sind sie die Kernaussage. */ #reviews .sterne-einzeln{margin:0 0 8px;display:block} #reviews .sterne-einzeln svg{width:17px;height:17px} /* ========================================================================== Bewertungsformular hinter dem Link aus der Bewertungsbitte ========================================================================== */ .jd-bw-formular{max-width:680px} .jd-bw-vor{color:var(--grau);margin:0 0 22px} .jd-bw-block{ border:1px solid var(--linie);border-radius:var(--radius); padding:18px 20px;margin:0 0 16px;background:var(--creme) } .jd-bw-block legend{ font-family:var(--schrift-kopf);font-weight:600;padding:0 8px; background:var(--weiss);border-radius:6px } /* Sterne zum Anklicken. Die Eingaben stehen im HTML in der Reihenfolge 5 bis 1 und werden per row-reverse wieder als 1 bis 5 angezeigt. Nur so kann eine reine CSS-Regel "alles bis hierher" einfaerben: input:checked ~ label trifft im Quelltext genau die Sterne mit kleinerer Zahl. */ .jd-bw-sterne{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin:4px 0 14px} .jd-bw-sterne input{position:absolute;opacity:0;width:1px;height:1px} .jd-bw-sterne label{cursor:pointer;line-height:0;padding:2px} .jd-bw-sterne svg{ width:30px;height:30px;fill:none;stroke:var(--grau-hell);stroke-width:1.5; transition:fill .1s ease,stroke .1s ease } .jd-bw-sterne input:checked ~ label svg, .jd-bw-sterne label:hover svg, .jd-bw-sterne label:hover ~ label svg{fill:var(--pink);stroke:var(--pink)} /* Tastaturbedienung muss sichtbar bleiben, die Eingaben selbst sind versteckt. */ .jd-bw-sterne input:focus-visible + label svg{stroke:var(--beere);stroke-width:2.4} .jd-bw-feld{display:block;margin:0 0 14px} .jd-bw-feld > span{display:block;font-size:14px;color:var(--grau);margin:0 0 6px} .jd-bw-feld textarea,.jd-bw-feld input[type=text]{ width:100%;padding:11px 13px;border:1px solid var(--linie); border-radius:var(--radius-klein);font:inherit;background:var(--weiss) } .jd-bw-feld textarea:focus,.jd-bw-feld input[type=text]:focus{ outline:2px solid var(--beere);outline-offset:1px;border-color:var(--beere) } .jd-bw-name{max-width:340px} .jd-bw-hinweis{font-size:13.5px;color:var(--grau);line-height:1.6;margin:0 0 18px} .jd-bw-hinweis a{color:var(--beere)} .jd-bw-meldung{padding:14px 18px;border-radius:var(--radius-klein);margin:0 0 20px} .jd-bw-gut{background:var(--gruen-blass)} .jd-bw-schlecht{background:#fdecec} /* Das Kaestchen in der Kasse. */ .jd-bewertungsbitte{margin:14px 0 4px} .jd-bw-frage{display:flex;gap:9px;align-items:flex-start;font-weight:600} .jd-bw-text{font-size:13.5px;color:var(--grau);line-height:1.55;margin:6px 0 0 27px}