/** Shopify CDN: Minification failed Line 1412:3 Unexpected "=" **/ /* ── Globale Skalierung: Produktseiten ×1.18 ── */ /* ══════════════════════════════════════════════════════════════════════════ ⛔ UMBRUCHPUNKT DER PRODUKTSEITEN: 1279 / 1280 px, NICHT 900 / 901 ══════════════════════════════════════════════════════════════════════════ Geaendert am 2026-08-08 (Auftraggeber: „auf iPad/Tablet-Groesse ist die Formatierung zerschossen"). ⛔ DER PUNKT SASS AM FALSCHEN ENDE. Das Raster loeste sich erst UNTER 901 px auf. Direkt darueber war die Kaufspalte gemessen **277 px** breit — schmaler als die 350 px, die ein Telefon bei 390 px bekommt. Die Seite war in diesem Band nicht „etwas eng", sie war enger als auf dem Handy. Gemessen am gerenderten Dokument, Innenbreite der Kaufspalte: 901 px → 277 px H1 auf 5 Zeilen 1024 px → 333 px H1 auf 4 Zeilen ← iPad quer 1180 px → 403 px H1 auf 3 Zeilen 1366 px → 487 px H1 auf 2 Zeilen 1440 px → 520 px ✅ der gezeichnete Wert Die Spalte erreicht ihre Sollbreite erst bei 1440. Der neue Punkt liegt bei 1280, weil die Spalte dort 448 px haelt — 86 % des Solls, H1 dreizeilig, und ein 1280er-Laptop behaelt damit das zweispaltige Layout. ⚠️ ES IST EINE ZAHL, NICHT ZWEI: Der Mobilblock traegt bereits alles, was der einspaltige Zustand braucht — auch die Deckelung des Galeriebilds auf 421 px (Z. ~2418 im alten Stand). Ich hatte hier zuerst einen zweiten Fix fuer die Bildhoehe angekuendigt; das war ein Irrtum aus meiner Probe, die nur zwei der Regeln injiziert und die Deckelung nicht mitgenommen hatte. **Eine Probe, die einen Teil des Blocks nachstellt, misst nicht den Block.** ⛔ DIE DATEI WIRD NUR AUF PRODUKTSEITEN GELADEN (`layout/theme.liquid:857`, hinter `request.page_type == 'product'`). Deshalb ist die Umstellung ALLER 900er-Queries dieser Datei vertretbar: Sie erreicht keine andere Seite. Gegengeprueft: Startseite, Collection, Warenkorb, Ueber uns, Versand, Kontakt, Suche und Buch zeigen bei 768 / 834 / 1024 px null Ueberlauf und sind unveraendert. ══════════════════════════════════════════════════════════════════════════ */ html { font-size: 118% !important; } /* Mobil minimal groesser fuer bessere Lesbarkeit (auch aeltere Nutzer) */ @media (max-width: 749px) { html { font-size: 124% !important; } } /* ══════════════════════════════════════════════════════════════════════════ KEINE SERIF AUF PRODUKTSEITEN — 2026-08-07 (Auftraggeber) Auftrag: „das serif auf den PDPs wegnehmen und nur mit plain oder bold arbeiten." Gilt für die elf Einzelprodukte UND die Set-Seite (ausdrücklich nachgefragt); der Schnitt ist Outfit 600, aus einer Schriftprobe in den echten Graden gewählt (46 · 21 · 1,575rem · 2,625rem · 23 px). ⛔ ES SIND ZWEI ZEILEN UND KEINE 32, WEIL BEIDES ÜBER TOKEN LÄUFT. Jede Display-Regel im Theme sagt `var(--vbg-ff-display)` und seit heute `var(--vbg-fw-display)`. Hier werden nur die beiden Token umgehängt — die 65 Regeln, die sie lesen, bleiben unangetastet. Wer statt dessen die Regeln einzeln überschreibt, muss die `!important` der Kaufspalte nachbauen und verpasst jede Regel, die später dazukommt. ⛔ DER GELTUNGSBEREICH IST `#MainContent`, NICHT `body` — und das ist der Punkt, an dem es schiefgehen würde: Kopfzeile, Fußzeile und der Warenkorb-Drawer stehen AUSSERHALB. Läge die Umstellung am `body`, trüge das Logo auf der Produktseite Outfit und auf jeder anderen Seite Cormorant. **Eine Marke, die je nach Seite anders heißt.** ✅ Die schwebende Kaufleiste wandert dagegen mit: Sie ist `position: fixed`, aber DOM-Kind der Kaufspalte — Vererbung folgt dem Baum, nicht dem Layout. (Dieselbe Eigenschaft, die am 2026-08-03 einen Defekt verursacht hat, ist hier genau das Gewünschte.) ⚠️ GESPIEGELT IM CRITICAL CSS (`layout/theme.liquid`). Ohne das zeigt der erste Paint die Serif und der Nachladeschritt die Groteske — ein Wechsel der Schriftart bei jedem Seitenaufruf, und die Zeilen brechen dabei anders um. 📝 Zurückdrehen ist eine Zeile: den Block löschen. Die 32 umgehängten Regeln sind verhaltensneutral — `--vbg-fw-display` steht per Vorgabe auf `--vbg-fw-light`, also auf 300 wie vorher. ══════════════════════════════════════════════════════════════════════════ */ body.vbg-product-page #MainContent { --vbg-ff-display: var(--vbg-ff-body); --vbg-fw-display: var(--vbg-fw-semibold); } /* ============================================================ VBG PRODUCT PAGE CSS Abhängigkeit: vbg-tokens.css + vbg-global.css Eingebunden in: layout/theme.liquid NACH vbg-global.css Inhalt: 0. Section Resets 1. Utility Classes 2. Preise & Varianten 3. Scroll Reveal 4. Vergleich (Vorher/Nachher + Kosten) 5. Listen 6. Zeitplan 7. Dosierung 8. Kräuter Animation (INGA v4) 9. Kombi-Produkte 10. Kontakt 11. Lightbox ============================================================ */ /* ============================================================ 0. SECTION RESETS Entkoppelt HTML-Tags innerhalb bestimmter Sections von den globalen Tag-Styles in vbg-global.css. Danach greifen nur noch die jeweiligen Klassen-Styles. ============================================================ */ /* ============================================================ 1. UTILITY CLASSES ============================================================ */ .vbg-text-center { text-align: center; } .vbg-mb-16 { margin-bottom: 16px; } .vbg-mb-40 { margin-bottom: 40px; } .vbg-mb-48 { margin-bottom: 48px; } .vbg-order-first { order: -1; } .vbg-order-last { order: 1; } .vbg-stars { color: var(--vbg-gold); font-size: 1.155rem; /* Skala B: war 1.1rem = 20.8 px */ letter-spacing: 2px; } .vbg-img { width: 100%; height: auto; display: block; border-radius: var(--vbg-radius-lg); } /* ============================================================ 2. PREISE & VARIANTEN ============================================================ */ .vbg-price { font-family: var(--vbg-ff-display); font-weight: var(--vbg-fw-display); color: var(--vbg-forest); } /* ⛔ `.vbg-price-large` und `.vbg-price-strike` sind am 2026-08-03 mit der Preiszeile ueber dem Selektor gefallen. Auf Produktseiten hatten sie keinen Traeger mehr. Landing-Pages verwenden dieselben Namen, beziehen ihre Regeln aber gescopt aus `assets/vbg-lp.css:756-768` und laden diese Datei nicht. */ /* ══════════════════════════════════════════════════════════════ MENGEN-SELEKTOR — senkrechte Liste Umgebaut am 2026-08-03 nach `Sari's Dental-Hygiene Spray PDP.html` Z. 1518-1538 (dekodiert). Vorher: Dreier-Kartenraster. ⛔ FESTE px, keine rem. `vbg-product-page.css:2` setzt `html{font-size:118%}` fuer alle Produktseiten — jeder rem-Wert laendet 18 % ueber dem gezeichneten. Der Entwurf ist auf px gezeichnet. ⛔ Die Klasse `.vbg-variant-pill` heisst weiter so, obwohl es keine Pille mehr ist. `assets/vbg-product.js:5` ist der einzige Schreiber von `.vbg-variant-input`; ein neuer Name haette das Formular stumm auf die erste Variante festgenagelt. ⛔ HIER STANDEN 32 ZEILEN MOBILES GRID-LAYOUT, die zu 90 % wirkungslos waren: Die Media-Query stand VOR den Grundregeln derselben Datei, also gewann bei gleicher Spezifitaet die spaetere. Gemessen bei 390 px kam `display:flex` statt `grid` heraus, `padding 30/14/14` statt `28/16/14`, und `grid-template-areas` war damit inert. Von 32 Zeilen wirkten 4. Die neue Media-Query steht deshalb HINTER den Grundregeln. ══════════════════════════════════════════════════════════════ */ .vbg-variant-pills { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .vbg-variant-pill { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; padding: 18px 20px; border: 1px solid var(--vbg-sand); border-radius: 0; background: var(--vbg-white); font-family: var(--vbg-ff-body); text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s; } .vbg-variant-pill:hover { border-color: var(--vbg-ink); } /* ⛔ Die AUSWAHL laeuft ueber Rahmenfarbe und Flaeche: `2px solid moss` auf `cream` (Entwurf Z. 2269-2273). Das padding gleicht das eine Pixel aus, damit die Zeile beim Anklicken nicht springt — hier ist die Kompensation richtig, denn der Entwurf WILL die breitere Kante. ⛔ Die EMPFEHLUNG sitzt dagegen ausschliesslich am Badge. Zwei Rahmen mit zwei Bedeutungen an derselben Kante koennen nicht beide gewinnen, und die empfohlene Zeile ist oft genau die ausgewaehlte. */ .vbg-variant-pill.active { border-color: var(--vbg-moss); border-width: 2px; padding: 17px 19px; background: var(--vbg-cream); } .vbg-variant-pill.active:hover { border-color: var(--vbg-moss); } .vbg-variant-pill:disabled { opacity: 0.4; cursor: not-allowed; } .vbg-variant-pill-radio { flex: none; width: 20px; height: 20px; border: 1px solid var(--vbg-sand); border-radius: 50%; background: var(--vbg-white); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .vbg-variant-pill.active .vbg-variant-pill-radio { border-color: var(--vbg-moss); background: var(--vbg-moss); box-shadow: inset 0 0 0 3px var(--vbg-cream); } /* ── Mitte: Titel · Grundpreis und Reichweite · Eignung ── */ .vbg-variant-pill-main { flex: 1 1 auto; min-width: 0; } .vbg-variant-pill-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vbg-variant-pill-qty { font-size: 18px; font-weight: var(--vbg-fw-normal, 400); color: var(--vbg-ink); line-height: 1.2; } /* ⛔ EIN Badge, und es hat eine Aussage: die Empfehlung. Vorher trug jede Zeile eines („Einzelpack", „Vorrat-Deal", „Mehrhunde" …) — wenn alle eines tragen, unterscheidet keines. Gold ist hier richtig und das einzige Gold in der Kaufspalte (Entwurf Z. 1525). */ .vbg-variant-pill-badge { flex: none; padding: 2px 8px; /* Der Rahmen bleibt `--vbg-gold`: Linie, nicht Text. */ border: 1px solid var(--vbg-gold); border-radius: 0; background: none; /* ⛔ `--vbg-gold-dark` gemessen 2,84:1 auf Weiß und 2,50:1 auf Cream — das Badge steht in BEIDEN Zuständen, weil die ausgewählte Zeile cream gefüllt ist. `--vbg-gold-deep`: 4,64 auf Weiß, 4,09 auf Cream. ⚠️ Damit ist der ausgewählte Zustand weiterhin unter AA. Das Badge trägt die Empfehlung, also Information — es bleibt Gold (Entscheidung „Gold markiert die Empfehlung"), aber der Token müsste auf `#7d6608` nachdunkeln, damit beide Zustände tragen. Vorschlag liegt vor. */ color: var(--vbg-gold-deep); font-size: 13px; font-weight: var(--vbg-fw-normal, 400); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .vbg-variant-pill-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; font-size: 15px; color: var(--vbg-warm-gray); line-height: 1.3; } .vbg-variant-pill-sub { display: block; margin-top: 2px; font-size: 15px; color: var(--vbg-ink); line-height: 1.3; } /* ── Rechts: Endpreis · Ersparnis · Versand ── */ .vbg-variant-pill-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .vbg-variant-pill-price { font-family: var(--vbg-ff-display); font-size: 23px; font-weight: var(--vbg-fw-display, 300); color: var(--vbg-ink); line-height: 1.1; } /* Ersparnis in Moos. Rot ist im Regelwerk die FEHLERfarbe; eine Ersparnis ist kein Fehler. Im Critical-Block stand sie bis heute auf `#c0392b` — die Farbe sprang beim Async-Load von Rot auf Gruen. */ .vbg-variant-pill-save { margin-top: 2px; font-size: 15px; color: var(--vbg-moss); } .vbg-variant-pill-ship { margin-top: 2px; font-size: 14px; color: var(--vbg-warm-gray); } .vbg-variant-pill-ship.is-free { color: var(--vbg-moss); } /* ⛔ HIER STAND `:nth-child(n+4){display:none}` — GEFALLEN AM 2026-08-10. Seit der Begrenzung in `vbg-zpp-kauf.liquid` (`for … limit: 3`) rendert die Seite nur noch drei Pillen; die Regel haette nichts mehr zu verbergen. ⛔ SIE IST NICHT NUR UEBERFLUESSIG, SIE WAERE GEFAEHRLICH. Wer das `limit` im Liquid spaeter anhebt, bekaeme die Plaetze ab vier weiterhin still ausgeblendet — und suchte den Fehler in der Schleife, nicht in einer CSS-Datei zwei Ordner weiter. Die Zahl steht jetzt an genau einer Stelle. 📝 Kein Gegenstueck im Critical CSS zu entfernen: dort standen die Pillen-Regeln (Z. 832-834), diese Zeile nie. Gemessen, nicht angenommen. */ /* ⛔ AUSGEKLAPPT LEGEN SICH 6x/10x/20x AUF DIE PLAETZE VON 1x/2x/3x — 2026-08-07 (Auftraggeber: „dass die Varianten 1x 2x und 3x durch die Varianten 6x 10x und 20x ersetzt werden, also praktisch dass die sich genau da drueber legen"). Vorher wuchs die Liste beim Ausklappen von drei auf SECHS Zeilen und schob alles darunter — Rechner, Kaufknopf, Versandzeile — um rund 300 px nach unten. Jetzt bleibt die Hoehe gleich, es tauscht nur der Inhalt. */ .vbg-variant-pills.is-expanded .vbg-variant-pill:nth-child(-n+3) { display: none; } /* ⛔⛔ DIE GEWAEHLTE OPTION BLEIBT IMMER SICHTBAR — und das ist keine Feinheit, sondern der Grund, warum der Tausch ueberhaupt gefahrlos ist. Ohne diese zwei Zeilen koennte der Kunde `2 x 150 ml` waehlen, ausklappen, und die gewaehlte Zeile waere WEG — waehrend das Formular sie weiter traegt und der Kaufknopf ihren Preis zeigt. Ein Preis, der zu einer nirgends sichtbaren Menge gehoert: exakt der Defekt, der am 2026-08-03 an der schwebenden Kaufleiste gefunden wurde (`mirrorEl` zeigte „150 ml · 39,95", der Knopf legte etwas anderes in den Warenkorb). ⚠️ Die Spezifitaet MUSS 0,4,0 erreichen, sonst verliert die Regel gegen die zwei `nth-child`-Regeln darueber (ebenfalls 0,4,0, aber frueher). `.vbg-variant-pills .vbg-variant-pill.active` waere nur 0,3,0 und wirkungslos — sichtbar wuerde davon nichts, und der Fehler traete erst beim Kunden auf. */ .vbg-variant-pills.is-expanded .vbg-variant-pill.active, .vbg-variant-pills:not(.is-expanded) .vbg-variant-pill.active { display: flex; } /* Das „+" dreht sich beim Ausklappen zum „x" — dieselbe Mechanik wie beim FAQ-Akkordeon (`assets/vbg-global.css`, `.vbg-faq-item.open .vbg-faq-icon`). ⛔ Kein zweites Zeichen im Markup: Ein ausgetauschtes Textzeichen springt, eine Drehung ist eine Bewegung — und sie sagt zugleich, dass derselbe Knopf wieder zurueckfuehrt. */ .vbg-variant-toggle__icon { display: inline-block; transition: transform 0.2s var(--vbg-ease-out); } .vbg-variant-toggle[aria-expanded='true'] .vbg-variant-toggle__icon { transform: rotate(45deg); } /* ── Umschalter: gerahmter Kasten mit „+" (Entwurf Z. 1545-1546) ── */ .vbg-variant-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 12px; padding: 14px 20px; border: 1px solid var(--vbg-parchment); border-radius: 0; background: none; font-family: var(--vbg-ff-body); font-size: 16px; font-weight: var(--vbg-fw-normal, 400); color: var(--vbg-ink); cursor: pointer; transition: border-color 0.2s; } .vbg-variant-toggle:hover, .vbg-variant-toggle:focus-visible { border-color: var(--vbg-ink); outline: none; } /* ══════════════════════════════════════════════════════════════ LESBARKEIT DES FLIESSTEXTS — zwei Massnahmen, eine davon gegen den Entwurf (1) Langkopie einheitlich auf 14 px / 1.7. DAS IST DER ENTWURFSWERT: er staffelt in drei Stufen — 16/1.5 fuer die Produktbeschreibung im Kopf (genau einmal), 14/1.7 fuer jede echte Langkopie (Spray PDP Z. 1569, 1754, 1804), 12 px fuer Fussnoten. Die Zeilenhoehe ist der Hebel, den er selbst benutzt. (2) ⛔ ZEILENLAENGE BEGRENZT — ABWEICHUNG. Der Entwurf hat KEINE Begrenzung: null `max-width`, null `ch`, null `measure` in der ganzen Kaufspalte (ausgezaehlt ueber Z. 1462-1819; am 2026-08-04 gegen beide Entwurfsdateien nachgezaehlt, Ergebnis unveraendert). Die Zeilenlaenge ist dort schlicht die Spaltenbreite — 520 px, genau unsere. ⚠️ Er loest das Problem nicht, er HAT es nur nicht: seine Texte sind Platzhalter, unsere ein Vielfaches laenger. ⛔ Das laesst sich NICHT mit „steht so im Entwurf" begruenden. Es ist eine Entscheidung, und sie steht hier, damit sie beim naechsten Abgleich nicht als Abweichung zurueckgedreht wird. ⛔ KORREKTUR 2026-08-04: HIER STAND `62ch`, UND DAS HAT NIE GEGRIFFEN. Hier stand dazu „62ch bringt das in den lesbaren Bereich" — es hat den Bereich nie erreicht. `ch` ist der Vorschub der ZIFFER NULL, nicht die Breite eines Zeichens. Aus der Schriftdatei gemessen (fontTools, `hmtx`): Outfit `0` = **0,659 em**, also 9,23 px bei 14 px Schrift. 62ch = 572 px > 520 px Spaltenbreite Die Regel war damit auf JEDER Seite wirkungslos, und die Zeilen liefen weiter ueber die vollen 520 px. Das mittlere Zeichen desselben Textes misst 0,4398 em = 6,16 px, eine 520-px-Zeile fasst also rund **84 Zeichen** — die Zahl, die der Auftraggeber am Bildschirm auf „rund 80" geschaetzt hat. ⚠️ Die Lehre ist aelter als der Fall: eine Einheit, deren Wert man nicht gemessen hat, ist eine Schaetzung mit Nachkommastelle. Und eine Begrenzung, die groesser ist als der Behaelter, sieht im Quelltext genauso aus wie eine, die greift. Jetzt in px, weil in der Kaufspalte ohnehin feste px gelten und die Regel die Schriftgroesse selbst setzt: 62 Zeichen × 0,4398 em × 14 px = 381 px → **380 px**. Die 62 bleibt, sie war als ZEICHEN gemeint. ⛔ WARM-GRAY BLEIBT. Der Entwurf setzt JEDEN laufenden Sachtext in warm-gray (12 Saetze); in Ink steht dort kein einziger Satz in der Body-Schrift — wo er lange Passagen in Ink stellt, wechselt er zugleich auf Display kursiv, und das sind Zitate. Ein Wechsel auf Ink kehrte die Farbhierarchie der Seite um. Gemessen traegt warm-gray auf Weiss 5,79:1 und liegt damit ueber der AA-Schwelle. ══════════════════════════════════════════════════════════════ */ body.vbg-product-page #MainContent:has(.vbg-hero--galerie) p, body.vbg-product-page #MainContent:has(.vbg-hero--galerie) li { font-size: 20px; line-height: 1.7; /* ⛔ HIER STAND `max-width: 464px` — 62 Zeichen x 0,4398 em x 17 px. GEFALLEN am 2026-08-08 auf Entscheidung des Auftraggebers, nach fuenf Bildern derselben Sache: Kostenvergleich, Herstellung, Zeitplan, Kombi-Sets, Kundenstimmen — ueberall stand der Text in einer schmalen Saeule, waehrend die Spalte daneben leer blieb. ⛔ DAS KEHRT EINE FESTLEGUNG UM, es korrigiert keinen Fehler. Die Rechnung war richtig und die Absicht auch. Was sich geaendert hat, ist ihre VORAUSSETZUNG: Sie wurde fuer die 520 px breite Spalte des Entwurfs (Artboard 1440) gerechnet. Gemessen waechst die Spalte darueber hinaus mit — 520 px bei 1440, **736 bei 1920, 1024 bei 2560**. Eine feste Zeichenzahl in einem wachsenden Behaelter ergibt nicht eine gute Zeile, sondern eine schmale Saeule mit Leerraum daneben. ⚠️ WAS ES KOSTET, damit es niemand suchen muss: Die Zeilen werden laenger, und zwar mit der Breite. Bei 1440 rund 70 statt 62 Zeichen (die Grenze griff auch dort — 464 in einer 520er Spalte). Bei 2560 rund 137. Ueber 90 Zeichen gilt als schwer lesbar; der Auftraggeber hat die Zahlen vor der Entscheidung gesehen. 🚩 Der eigentliche Hebel liegt woanders und ist NICHT gebaut: Der Entwurf setzt „Content max. 1180 px". Bekaeme die Seite eine Hoechstbreite, bliebe die Spalte ueberall ~520 px und die Frage stellte sich nicht. Vorgelegt und verworfen zugunsten dieses Wegs. */ } /* ══════════════════════════════════════════════════════════════════ ⛔ DIE REGEL IST GETEILT (2026-08-05) — und der Grund ist eine Entscheidung, nicht die Technik. Bis hierher galt EINE Regel fuer beides: die Abschnitte der rechten Spalte UND die Kaufspalte. Gemessen regierte sie 47 von 54 Absaetzen der Abschnitte und 10 von 16 in der Kaufspalte. Die shopweite Vergroesserung will die Abschnitte anheben; die Kaufspalte ist davon ausdruecklich ausgenommen (Entwurf auf feste Werte gezeichnet, Spalte 520 px breit). Beides in einer Regel ist nicht moeglich. Oben stehen deshalb die Abschnitte: 14 -> 17 px, und die Breite MUSS mit. Sie ist aus der Schrift gerechnet, nicht gesetzt: 62 Zeichen x 0,4398 em x 17 px = 463,6 -> 464 px Ohne die Breite fielen 62 Zeichen auf 51 — genau der Fehler, den die Zahl verhindern soll. Hier unten behaelt die Kaufspalte ihre gemessenen Werte. Ein Selektor mit einer Klasse mehr genuegt (0,4,1 gegen 0,3,1); es braucht kein `:not()` und kein `!important`. ⚠️ Wer diese zwei Bloecke je wieder zusammenlegt, muss vorher entscheiden, welche der beiden Zahlen gewinnt — sie widersprechen sich mit Absicht. ══════════════════════════════════════════════════════════════════ */ body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-hero--kauf p, body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-hero--kauf li { /* Skala B 2026-08-05, zweiter Durchgang: die Kaufspalten-Ausnahme ist aufgehoben (Auftraggeber). 14 -> 16 px. ⛔ Die Breite MUSS mit: 380 px hielten 58 Zeichen bei 14 px, bei 16 px sind es 50. 437 px stellen die 58 wieder her. Gemessen nach dem Bau. */ font-size: 16px; max-width: 437px; } /* ⛔ Ausnahme A — LISTEN, DIE ZEILEN SIND, KEINE KOPIE. Solange die Begrenzung wirkungslos war (572 px in einer 520-px-Spalte), war das folgenlos. Mit 380 px wird es sichtbar, und zwar doppelt: die Haarlinie unter der Zeile wuerde mitschrumpfen, und bei den beiden `space-between`-Listen liefe die rechte Spalte nach innen. Ausgezaehlt ueber `sections/vbg-zpp-*.liquid` — es sind genau diese drei. */ body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-hero__usp li, body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-kaufakk__dauer li, body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-kv7-lines li { max-width: none; } /* ⛔ Ausnahme C — DIE ZUTATENDEKLARATION, 2026-08-08 (Auftraggeber: „Desktop: Nutze den Raum vollstaendig bis zum rechten Rand aus; Mobile: ist ok"). Sie ist KEINE Langkopie, sondern eine Aufzaehlung ohne Satzbau: elf mit `·` getrennte Glieder, die der Leser ueberfliegt und nicht Zeile fuer Zeile liest. Die 58-Zeichen-Regel ist fuer Fliesstext gerechnet und erzeugt hier das Gegenteil ihres Zwecks — sie streckt die Liste auf sieben Zeilen, waehrend rechts daneben die halbe Spalte leer bleibt. ⛔ `min-width: 1280px` IST NICHT VORSICHT, SONDERN DER AUFTRAG. „Mobile ist ok" heisst: unterhalb des Umbruchpunkts aendert sich nichts. Ohne die Query bekaeme auch der gestapelte Bereich den Wegfall — die Spalte ist dort BREITER als 437 px, der Deckel bindet also und sein Wegfall waere sichtbar. Nur unter rund 437 px waere es folgenlos, und das ist nicht „mobil", das ist Telefon. 📝 STAND HIER `901`, bis der Umbruchpunkt am 2026-08-08 auf 1280 ging. Die Zahl ist mitgewandert, weil sie DENSELBEN Punkt meint — nicht, weil sich an dieser Entscheidung etwas geaendert haette. 📝 Nur die Deklaration, nicht der ganze Akkordeon-Inhalt: Die Anwendungstabelle darunter ist eine Tabelle und traegt den Deckel gar nicht; `.vbg-kaufakk__meta` („Ergaenzungsfuttermittel fuer Hunde") ist eine kurze Zeile, die ihn nie erreicht. ⛔ `.vbg-hero--kauf p.vbg-kaufakk__deklaration` — UND ZWAR VOLLSTAENDIG, nicht gekuerzt. Die erste Fassung hiess nur `… :has(…) .vbg-kaufakk__deklaration` und war WIRKUNGSLOS. Gemessen: 437 px, unveraendert. Der Grund ist knapp und leicht zu uebersehen — Deckel … .vbg-hero--kauf p (1,3,2) Ausnahme … .vbg-kaufakk__deklaration (1,3,1) Gleiche id, gleiche Klassenzahl; der Deckel hat EIN ELEMENT MEHR im Selektor (`body` + `p` gegen nur `body`) und gewinnt damit. Ein Klassenselektor schlaegt einen Elementselektor eben NICHT, wenn alles davor gleich ist. Mit `.vbg-hero--kauf` und `p.` davor sind es (1,4,2). ⚠️ Wer diesen Selektor je kuerzt, macht die Ausnahme lautlos wirkungslos — es faellt nichts aus, der Text wird nur wieder schmal. */ @media (min-width: 1280px) { body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-hero--kauf p.vbg-kaufakk__deklaration { max-width: none; } } /* ⛔ AUSNAHME B IST AM 2026-08-07 ERSATZLOS GEFALLEN — mit ihrer Voraussetzung. Hier stand `margin-inline: auto` fuer `.vbg-ts2-video-lead` und `-caption`, mit dieser Begruendung: > „Eine Begrenzung ohne `margin-inline: auto` schiebt zentrierten Text > nach links: die Zeile bleibt in ihrer Box zentriert, die Box sitzt aber > am linken Rand." Die Begruendung war richtig — **solange die beiden Absaetze zentriert waren.** Am 2026-08-07 ist die Zentrierung gefallen (Auftraggeber: „Echte Stimmen vom Markt linksbuendig wie alles andere"), und damit dreht die Regel ihre Wirkung um: Sie zentriert jetzt die 437-px-BOX in der 520-px- Spalte, und der linksbuendige Text begaenne 41 px vom linken Rand — also sichtbar eingerueckt gegen alles darueber. **Die Regel wuerde exakt das verhindern, wofuer sie einmal gebaut wurde.** ⚠️ Und das ist der zweite Fall dieser Klasse an EINEM Tag; der erste war `border-top: none` an der mobilen Auswahlleiste (`vbg-homepage.css`). Beide Male: eine Hilfsregel, die zusammen mit ihrer Voraussetzung entstand, die Voraussetzung ueberlebte, und danach das Gegenteil tat. Keine Pruefung schlaegt dabei an — der Wert steht ja da und ist fuer sich richtig. > **Wer eine Ausrichtung aendert, sucht die Regeln, die AN ihr haengen.** > Sie nennen sie im Kommentar, nicht im Selektor. */ /* ⛔ Ausnahme C — DIE ZWEI KOMPONENTENLISTEN, DIE KEINE KOPIE SIND. Beide Regeln stehen HIER und nicht in ihrer Section, und das ist kein Versehen: die Langkopie-Regel oben traegt eine id im Selektor (1,2,1) und schlaegt damit JEDEN Klassenselektor der Section, egal wie spezifisch er dort aussieht. Wer den Grad in der Section sucht, findet ihn und misst trotzdem etwas anderes. 1. Kopfbereich, USP-Zeilen: Begriff 14 px (eigene Regel in vbg-zpp-kauf.liquid), Erklaerung 13 px — die Werte des massgeblichen Entwurfs (Spray PDP Z. 1471-1483). Ueber die Langkopie-Regel standen beide auf 14 px / 1.7 und lasen als EIN Absatz. 2. Komponentenzeile der Kombi-Karten: dritte Stufe der Kartenhierarchie, 11 px. Ueber die Langkopie-Regel stand sie auf 14 px / 1.7 — also GROESSER als die 12-px-Beschreibung und optisch groesser als der Titel (14 px Cormorant = 11,8 px Outfit). Begruendung und Messung: sections/vbg-zpp-kombi.liquid, Block „HIERARCHIE DER KARTE". */ body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-hero__usp li { /* Skala B, zweiter Durchgang: 13 -> 15 px. Die zugehoerige Breite steht an den SPANS in vbg-zpp-kauf.liquid (360 -> 414). */ font-size: 15px; line-height: var(--vbg-lh-normal); } body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-col-fset-contents li { font-size: 13px; line-height: var(--vbg-lh-normal); max-width: none; } /* Ausgenommen: alles, was keine Langkopie ist. Ueberschriften, Fussnoten, Zitate und die Zeilen des Selektors tragen eigene Groessen — sie hier mitzuziehen hiesse, sechs bewusste Werte durch einen zu ersetzen. */ body.vbg-product-page #MainContent:has(.vbg-hero--galerie) [class$="-headline"], body.vbg-product-page #MainContent:has(.vbg-hero--galerie) [class*="disclaimer"], body.vbg-product-page #MainContent:has(.vbg-hero--galerie) [class*="vorbehalt"], body.vbg-product-page #MainContent:has(.vbg-hero--galerie) [class*="hinweis"], body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-variant-pill p, body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-testi-text, body.vbg-product-page #MainContent:has(.vbg-hero--galerie) .vbg-ts2-mehr-zitat { /* ⛔ `revert` WAR HIER FALSCH und ist am 2026-08-03 korrigiert. `revert` auf Autorenebene faellt auf das BROWSER-Stylesheet zurueck, nicht auf die vorige Autorenregel — es hat also nicht nur meine 14 px zurueckgenommen, sondern auch `.vbg-bedarf__vorbehalt { font-size: var(--vbg-text-xs) }` mit. Gemessen kamen 16 px heraus, die UA-Vorgabe, statt der gemeinten 12. ⚠️ Und der Fehler war nicht am Selektor zu sehen: Die Ausnahmeliste sah richtig aus, sie hat nur mehr ausgenommen als gemeint. Aufgefallen ist es erst beim Nachmessen am gerenderten Dokument — die Regel schien zu greifen, das Ergebnis war ein anderes. `unset` waere derselbe Fehler; `initial` auch. Die Ausnahme darf die Eigenschaft schlicht NICHT anfassen. */ max-width: none; } /* Der Hinweis, wenn die Empfehlung den Zielzeitraum nicht traegt. Bewusst ruhig: keine Warnfarbe, kein Rahmen, keine Flaeche. Er ist eine Auskunft ueber die eigene Eingabe, keine Beanstandung — und Rot waere hier ohnehin die Fehlerfarbe des Regelwerks. */ .vbg-variant-hinweis { margin: 10px 0 0; font-family: var(--vbg-ff-body); font-size: 15px; line-height: 1.4; color: var(--vbg-warm-gray); } .vbg-variant-hinweis[hidden] { display: none; } .vbg-variant-toggle__icon { flex: none; font-size: 21px; line-height: 1; color: var(--vbg-warm-gray); } /* ── Mobil. STEHT HINTER den Grundregeln, sonst wirkt sie nicht. ── */ @media (max-width: 600px) { .vbg-variant-pill { gap: 12px; padding: 14px; } .vbg-variant-pill.active { padding: 13px; } .vbg-variant-pill-qty { font-size: 15px; } .vbg-variant-pill-meta, .vbg-variant-pill-sub { font-size: 12px; } .vbg-variant-pill-price { font-size: 20px; } .vbg-variant-pill-badge { font-size: 10px; padding: 1px 6px; } } .vbg-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* ============================================================ 3. SCROLL REVEAL ============================================================ */ .vbg-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .vbg-reveal.visible { opacity: 1; transform: translateY(0); } .vbg-reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s ease, transform 0.7s ease; } .vbg-reveal-left.visible { opacity: 1; transform: translateX(0); } .vbg-reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s ease, transform 0.7s ease; } .vbg-reveal-right.visible { opacity: 1; transform: translateX(0); } /* Staggered delays */ [data-delay="1"] { transition-delay: 0.05s; } [data-delay="2"] { transition-delay: 0.10s; } [data-delay="3"] { transition-delay: 0.15s; } [data-delay="4"] { transition-delay: 0.20s; } [data-delay="5"] { transition-delay: 0.25s; } [data-delay="6"] { transition-delay: 0.30s; } /* ============================================================ 4. VERGLEICH (Vorher/Nachher + Kosten) ============================================================ */ .vbg-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .vbg-comp-col { border-radius: var(--vbg-radius-xl); padding: 32px; } .vbg-comp-col-bad { background: #fff5f5; border: 1px solid #f5c6c6; } .vbg-comp-col-good { background: #f2f8f4; border: 1px solid #b8dfc4; } .vbg-comp-title { font-family: var(--vbg-ff-display); font-size: 1.47rem; /* Skala B: war 1.4rem = 26.4 px */ font-weight: var(--vbg-fw-display); color: var(--vbg-forest); margin-bottom: 16px; } @media (max-width: 1279px) { .vbg-comparison { grid-template-columns: 1fr; } } /* ============================================================ 5. LISTEN ============================================================ */ .vbg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .vbg-list li { font-family: var(--vbg-ff-body); font-size: 1.0925rem; /* Skala B: war 0.95rem = 17.9 px */ font-weight: var(--vbg-fw-light); line-height: 1.5; padding-left: 28px; position: relative; color: var(--vbg-warm-gray); } .vbg-list li::before { position: absolute; left: 0; top: 0; font-size: 1.15rem; /* Skala B: war 1rem = 18.9 px */ } /* Checkmarks (grün) – .vbg-list-green ist ein Alias */ .vbg-list-check li::before, .vbg-list-green li::before { content: '✓'; color: var(--vbg-sage); font-weight: 700; } /* Rote X */ .vbg-list-red li::before { content: '✗'; color: var(--vbg-red); font-weight: 700; } /* ============================================================ 6. ZEITPLAN ============================================================ */ /* Zeitplan-Styles leben jetzt vollständig in sections/vbg-zpp-zeitplan.liquid */ /* ============================================================ 7. DOSIERUNG ============================================================ */ .vbg-dosage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 32px; } .vbg-dosage-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--vbg-radius-xl); padding: 24px 20px; cursor: pointer; transition: var(--vbg-transition-card); position: relative; display: flex; flex-direction: column; gap: 12px; } .vbg-dosage-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); } .vbg-dosage-card-highlight { border-color: var(--vbg-gold); background: rgba(201, 151, 58, 0.1); } .vbg-dosage-card-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--vbg-gold); color: var(--vbg-forest); font-family: var(--vbg-ff-body); font-size: 0.7475rem; /* Skala B: war 0.65rem = 12.3 px */ font-weight: var(--vbg-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 12px; border-radius: var(--vbg-radius-full); white-space: nowrap; } .vbg-dosage-weight { font-family: var(--vbg-ff-display); font-size: 1.26rem; /* Skala B: war 1.2rem = 22.7 px */ font-weight: var(--vbg-fw-display); color: var(--vbg-cream); line-height: 1.2; } .vbg-dosage-detail { display: flex; flex-direction: column; gap: 2px; font-family: var(--vbg-ff-body); font-size: 1.012rem; /* Skala B: war 0.88rem = 16.6 px */ color: var(--vbg-cream); font-weight: var(--vbg-fw-light); padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .vbg-dosage-detail span { font-size: 0.828rem; /* Skala B: war 0.72rem = 13.6 px */ font-weight: var(--vbg-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vbg-mint); } @media (max-width: 1279px) { .vbg-dosage-cards { grid-template-columns: 1fr 1fr; } } /* ============================================================ 8. KRÄUTER ANIMATION (INGA v4) ============================================================ */ /* Section-Wrapper */ /* Hintergrund-Gradient */ /* Dekor-Linien */ /* SVG Verbindungslinien */ /* Bühne */ /* Dimmer */ /* Nicht-fokussierte Karten abdunkeln */ /* --- Header --- */ /* --- Flasche --- */ @keyframes vbgBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* --- Kräuter-Karten --- */ /* --- Footer CTA --- */ /* --- Inhaltsstoffe-Overlay --- */ /* --- Hybrid-List (Inhaltsstoffe) --- */ /* --- Mobile Bottom Sheet --- */ /* --- Responsive INGA --- */ /* ── Desktop: Carousel-Wrapper unsichtbar, Dots ausblenden ── */ /* ── Mobile: Linearer Flow + Karten-Carousel ── */ @media (max-width: 768px) { /* Hint über Flasche zentriert */ /* ── 3D Cover-Flow Carousel ── */ /* Glow-Verbindung von Flasche → aktive Karte */ /* Goldener Glow-Pool unter der Flasche */ @keyframes vbgGlowLine { 0%, 100% { opacity: 0.3; height: 54px; } 50% { opacity: 0.9; height: 62px; } } @keyframes vbgGlowPulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; } 50% { transform: translateX(-50%) scale(1.4); opacity: 0.9; } } /* Alle Infos immer sichtbar */ /* Expand-Button nicht nötig */ /* Inactive Karten: leichter Blur (Depth-of-Field) */ /* Aktive Karte: Glow + Breathing */ @keyframes vbgCardBreathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.01); filter: brightness(1.08); } } /* Aktive Karte: Emoji pulsiert */ @keyframes vbgEmojiPop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1.1); } } /* Dots — genug Abstand damit Karten nicht reinragen */ /* Footer CTA — genug Abstand zum Carousel darüber */ /* Dimmer: fixed für Sheet */ /* Dekorative Linien verstecken */ /* Overlay nur auf Desktop */ } @media (min-width: 769px) { /* Sheet nur auf Mobile */ } /* (alte 600px-Overrides für absolute Karten-Positionierung entfernt – Carousel löst das) */ /* ============================================================ 9. KOMBI-PRODUKTE ============================================================ */ .vbg-kombi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; } .vbg-kombi-card { background: var(--vbg-white); border-radius: var(--vbg-radius-2xl); border: 1px solid var(--vbg-sand); overflow: hidden; transition: var(--vbg-transition-card); position: relative; box-shadow: var(--vbg-shadow-sm); } .vbg-kombi-card:hover { transform: translateY(-8px); box-shadow: var(--vbg-shadow-xl); } .vbg-kombi-card-highlight { border-color: var(--vbg-gold); box-shadow: 0 8px 24px rgba(201,151,58,0.15); } .vbg-kombi-bestseller { position: absolute; top: 20px; left: -30px; width: 128px; text-align: center; transform: rotate(-45deg); transform-origin: center center; background: var(--vbg-gold); color: var(--vbg-forest); font-family: var(--vbg-ff-body); font-size: 0.7475rem; /* Skala B: war 0.65rem = 12.3 px */ font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 0; box-shadow: 0 2px 8px rgba(201,151,58,0.35); z-index: 10; } /* ⛔ DER DREIFARBEN-VERLAUF IST GEFALLEN — 2026-08-07 (Auftraggeber). Hier stand `linear-gradient(150deg, #ddeee3 0%, #c8e2d0 60%, #b8d9c4 100%)`: drei Toene quer ueber die Flaeche, keiner davon aus dem Token-Satz. Jetzt eine Flaeche, und nur ihr RAND blendet nach Weiss (`--vbg-flaeche-weich` am `::after` darunter). 📝 `--vbg-parchment` ist derselbe Ton wie die Galeriespalte und die Set-Komposition — die drei Produktflaechen des Shops tragen jetzt eine Farbe statt drei verschiedener Verlaeufe. */ .vbg-kombi-img-wrap { background: var(--vbg-parchment); height: 240px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } /* ⛔ WEICHE KANTE AUF ALLEN VIER SEITEN — vorher nur unten und nur zu 35 %. Der alte Streifen war ein Rest aus der Verlaufszeit: Er sollte den dunkelsten Punkt des Verlaufs abmildern und stand deshalb genau dort. Ohne den Verlauf hat er keine Stelle mehr, an der er richtig waere. */ .vbg-kombi-img-wrap::after { content: ''; position: absolute; inset: 0; background: var(--vbg-flaeche-weich); pointer-events: none; } .vbg-kombi-img { max-height: 200px; max-width: 82%; object-fit: contain; transition: transform 0.4s ease; position: relative; z-index: 1; } .vbg-kombi-card:hover .vbg-kombi-img { transform: scale(1.06); } .vbg-kombi-body { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; } .vbg-kombi-title { font-family: var(--vbg-ff-display); font-size: 1.365rem; /* Skala B: war 1.3rem = 24.5 px */ font-weight: var(--vbg-fw-display); color: var(--vbg-forest); line-height: 1.25; } .vbg-kombi-desc { font-size: 1.012rem; /* Skala B: war 0.88rem = 16.6 px */ color: var(--vbg-warm-gray); line-height: 1.6; margin: 0; } .vbg-kombi-price { font-family: var(--vbg-ff-display); font-size: 1.68rem; /* Skala B: war 1.6rem = 30.2 px */ font-weight: var(--vbg-fw-display); color: var(--vbg-forest); display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--vbg-sand); margin-top: 4px; } @media (max-width: 1279px) { .vbg-kombi-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .vbg-kombi-grid { grid-template-columns: 1fr; } } /* ============================================================ 11. FIXES – Mobile & Allgemein ============================================================ */ /* Fix: Kombi Button Textfarbe explizit (globale a-Styles überschreiben) */ .vbg-kombi-card .vbg-btn-dark, .vbg-kombi-card .vbg-btn-dark:visited, .vbg-kombi-card .vbg-btn-dark:hover { color: var(--vbg-cream) !important; text-decoration: none !important; } /* Fix: Dosierung Hint lesbarer */ .vbg-dosage-hint { text-align: center; margin-top: 16px; font-size: 1.012rem; /* Skala B: war 0.88rem = 16.6 px */ color: rgba(255,255,255,0.65); letter-spacing: 0.03em; } /* Fix: Preisvergleich 3er-Grid auf Mobile umbrechen */ @media (max-width: 600px) { .vbg-kv-dogs-grid { grid-template-columns: 1fr !important; max-width: 280px; margin-left: auto; margin-right: auto; } } /* ── FIX: Bindestrich – kein Zeilenumbruch davor/danach ── */ /* Wörter können umbrechend, aber der Bindestrich bleibt an der vorherigen Zeile, da overflow-wrap ihn nicht trennt */ @media (max-width: 600px) { .vbg-order-last h1 { overflow-wrap: break-word; hyphens: none; /* Verhindert Umbruch VOR einem Bindestrich: word-break:keep-all würde CJK-Zeichen ignorieren, stattdessen nutzen wir white-space-collapse normal + word-break normal + kein automatisches Trennen */ word-break: normal; } } /* ── FIX: "In den Warenkorb" Button im Hero – Dawn setzt auf button[type="submit"] in Produktformularen eigene font-size/padding ── */ .vbg-page button[type="submit"].vbg-btn-cart, .vbg-page button[type="submit"].vbg-btn-primary { font-size: 1.0062rem !important; /* Skala B: war 0.875rem = 16.5 px */ padding: 14px 20px !important; height: 52px !important; white-space: nowrap !important; line-height: 1 !important; box-sizing: border-box !important; letter-spacing: 0.08em !important; } @media (max-width: 480px) { .vbg-page button[type="submit"].vbg-btn-cart, .vbg-page button[type="submit"].vbg-btn-primary { font-size: 0.7rem !important; } } /* ══════════════════════════════════════════════════════════════ KAUFKNOPF — zwei Farben, mit Absicht (2026-08-03) `.is-moss` → Produktseite. `--vbg-moss` auf Weiss, mit dem Preis im Knopf. `.is-liquid-gold` → NUR NOCH die Set-Seite (`vbg-set-hero.liquid:1648`). ⛔ Die Trennung ist entschieden, nicht entstanden. Bis zum 2026-08-03 lief beides ueber `.is-liquid-gold`, und A12 stand auf „Moos ueberall — im Theme bereits so". Das war falsch gemessen: die Pruefung hatte Goldflaechen gezaehlt und den Kaufknopf nicht mitgezaehlt. Er war die ganze Zeit Gold. Die Entwuerfe verlangen Verschiedenes — PDP Moos (Spray PDP Z. 1552, 2208), Set-Seite Gold (`Set-Produktseite.dc.html:91, 251`) —, und das ist Absicht: die Set-Seite verkauft ein Buendel, die PDP ein Produkt. ⚠️ Wer daraus wieder EINE Regel macht, zieht die Set-Seite stumm mit. ══════════════════════════════════════════════════════════════ */ /* ⚠️ Ohne `button[type=submit]`-Praefix: die schwebende Leiste nutzt `type="button"`. Die alte Gold-Regel hat sie deshalb nie getroffen — ihre Farbe kam aus der Grundregel in `vbg-global.css:385`. */ .vbg-btn-primary.is-moss { background: var(--vbg-moss); color: var(--vbg-white); font-family: var(--vbg-ff-body); font-weight: var(--vbg-fw-semibold); letter-spacing: 0.04em; gap: 10px; border-radius: 0; box-shadow: none; transition: background 0.2s; } .vbg-btn-primary.is-moss:hover { background: var(--vbg-forest); color: var(--vbg-white); transform: none; box-shadow: none; } .vbg-btn-primary.is-moss:active { background: var(--vbg-forest); transform: none; } /* Der Preis im Knopf — er macht sichtbar, was der Klick kostet. Der Gedankenstrich ist nur Trennung und traegt keine Bedeutung. */ .vbg-atc-label { letter-spacing: inherit; } .vbg-atc-sep { opacity: 0.55; } .vbg-atc-price { font-variant-numeric: tabular-nums; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════ Liquid-Gold Add-to-Cart Conversion-Button — nur noch Set-Seite 135°-Gold-Gradient + Hover-Glow + Icon-Nudging + Micro-Copy. Aktiviert auf jedem ATC-Button mit .is-liquid-gold. ══════════════════════════════════════════════════════════════ */ button[type="submit"].vbg-btn-primary.is-liquid-gold { /* ⛔ Flach. Vorher ein dreistufiger Verlauf mit drei rohen Hexwerten und vierlagigem Schatten. Der Entwurf setzt den Kauf-Button auf die volle Tokenfarbe, ohne Verlauf und ohne Schatten. ⚠️ Diese Regel ist mit der SET-SEITE geteilt (vbg-set-hero.liquid:1642). Sie wird dort mit flach -- der Set-Entwurf verlangt dasselbe. */ background: var(--vbg-gold) !important; color: var(--vbg-forest) !important; font-family: var(--vbg-ff-body) !important; font-weight: var(--vbg-fw-semibold) !important; letter-spacing: 0.12em !important; gap: 12px !important; padding: 14px 26px !important; box-shadow: none !important; border-radius: 0 !important; transition: filter 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease !important; position: relative; } button[type="submit"].vbg-btn-primary.is-liquid-gold:hover { filter: brightness(1.08) saturate(1.05); transform: translateY(-1px) scale(1.015); box-shadow: 0 6px 18px rgba(166, 124, 0, 0.38), 0 14px 34px rgba(166, 124, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 0 0 1px rgba(212, 175, 55, 0.55) !important; } button[type="submit"].vbg-btn-primary.is-liquid-gold:active { transform: translateY(0) scale(1.005); filter: brightness(0.98); } .vbg-atc-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; } .vbg-atc-icon--arrow { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } .vbg-btn-primary.is-liquid-gold:hover .vbg-atc-icon--arrow { transform: translateX(4px); } /* Micro-Copy unter dem Button — Variante A: Versand + Test-Garantie 14px / Semi-Bold / Dunkelgrau (#444444) — outdoor-lesbar bei Sonnenlicht */ .vbg-atc-microcopy { font-family: var(--vbg-ff-body); font-size: 16px; color: #444444; font-weight: 600; text-align: center; margin: 12px 0 0; line-height: 1.5; letter-spacing: 0.01em; } /* ── FIX: Bestseller Ribbon – schräges Banner oben links: siehe Sektion 9 ── */ /* ── FIX: INGA Section – Texte schwarz statt weiß ── .vbg-page h2 { color: var(--vbg-forest) } hat Spezifität (0,1{ color: var(--vbg-white) } hat Spezifität (0,1{ color: var(--vbg-white) !important; } /* Alle p-Tags in der INGA Section: weiß statt warm-gray */ /* Hint-Text unter der Flasche */ /* Footer CTA */ /* Bild-Lightbox */ .vbg-lightbox-trigger { cursor: zoom-in; position: relative; } .vbg-lightbox-trigger::after { content: '🔍'; position: absolute; bottom: 8px; right: 8px; font-size: 1.26rem; /* Skala B: war 1.2rem = 22.7 px */ opacity: 0; transition: opacity 0.2s; pointer-events: none; } .vbg-lightbox-trigger:hover::after { opacity: 1; } .vbg-lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9999; align-items: center; justify-content: center; cursor: zoom-out; } .vbg-lightbox-overlay.is-open { display: flex; } .vbg-lightbox-overlay img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; } .vbg-lightbox-close { position: absolute; top: 16px; right: 20px; color: white; font-size: 2.1rem; /* Skala B: war 2rem = 37.8 px */ cursor: pointer; line-height: 1; opacity: 0.8; } .vbg-lightbox-close:hover { opacity: 1; } ============================================================ */ .vbg-contact-wrap { max-width: 560px; margin: 0 auto; text-align: center; } .vbg-founder-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 24px; display: block; border: 3px solid var(--vbg-sand); } /* ============================================================ 11. LIGHTBOX ============================================================ */ #vbg-lightbox { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; animation: vbgLbFade 0.25s ease; } #vbg-lightbox.is-active { display: flex; } #vbg-lightbox-img { width: auto; height: auto; max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: var(--vbg-radius-lg); animation: vbgLbZoom 0.25s ease; } #vbg-lightbox-close { position: fixed; top: 16px; right: 20px; background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 1.47rem; /* Skala B: war 1.4rem = 26.4 px */ width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } #vbg-lightbox-close:hover { background: rgba(255,255,255,0.22); } /* ============================================================ GLOBALE RESPONSIVE-OVERRIDES (nur für Utilities die keine eigene Sektion haben) ============================================================ */ @media (max-width: 1279px) { .vbg-order-first { order: 0; } .vbg-order-last { order: 0; } } /* ============================================================ PREFERS-REDUCED-MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .vbg-reveal, .vbg-reveal-left, .vbg-reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; } [data-delay] { transition-delay: 0s !important; } } /* ══════════════════════════════════════════════════════════════════════ PDP-HERO — gemeinsame Wurzel der beiden Hälften ══════════════════════════════════════════════════════════════════════ Angelegt am 2026-08-03 mit der Teilung von vbg-zpp-hero.liquid in vbg-zpp-galerie und vbg-zpp-kauf (Weg A, PDP-ZWEISPALTIG-WEGE.md). Beide Sections brauchen dieselbe Wurzel. Sie steht deshalb HIER und nicht doppelt in den beiden