/* ============================================================================ MARA VITAL — Etappe 2, Probelauf auf EINER Produktseite Ziel auf der Box: themes/shoptimizer-child-theme/mv-etappe2-probe.css Angelegt 2026-09-08. Snapshot davor: 48a0d41. GELTUNGSBEREICH Nur Produkt 5683 (Lyocellkissen). Doppelt begrenzt: 1. In functions.php nur bei is_singular('product') && ID 5683 eingereiht. 2. Jede Regel zusaetzlich auf body.postid-5683 gescopet. Ruecknahme: die if-Bedingung in functions.php entfernen. WAS DAS HIER IST — UND WAS NICHT Das echte Etappe 2 kippt die 14 globalen Typografie-Felder des Themes. Diese Datei simuliert nur das Ergebnis auf einer Seite, damit Jost im echten Kontext beurteilt werden kann, ohne den Shop anzufassen. ZU DEN !important Das Theme setzt Titel und Preis selbst mit !important (siehe DESIGN-GUIDE.md Abschnitt 1). Solange die Quelle nicht bereinigt ist, kommt man dort nur mit !important vorbei. In Etappe 2 faellt beides zusammen weg — deshalb steht es hier bewusst und nicht aus Bequemlichkeit. GROESSEN Jost hat eine kleinere x-Hoehe als Arial und wirkt bei gleicher Pixelzahl kleiner. Die Auszeichnungsgrade sind deshalb rund 2 px groesser gesetzt als der Bestand, damit die Praesenz gleich bleibt. ========================================================================== */ /* ---- Werkschrift verbindlich: alles, was heute sans-serif rendert -------- */ body.postid-5683, body.postid-5683 p, body.postid-5683 li, body.postid-5683 td, body.postid-5683 th, body.postid-5683 dd, body.postid-5683 dt, body.postid-5683 label, body.postid-5683 input, body.postid-5683 select, body.postid-5683 textarea, body.postid-5683 button, body.postid-5683 .button, body.postid-5683 .woocommerce-tabs .tabs a { font-family: var(--mv-werk); } /* ---- Produkttitel -------------------------------------------------------- Das Theme setzt hier .single-product div.product .product_title (0,3,1) mit !important. Der Scope wird deshalb bis auf (0,5,3) angehoben — nicht aus Uebermut, sondern weil es darunter nicht durchkommt. -------------------------------------------------------------------------- */ body.postid-5683.single-product div.product .entry-summary h1.product_title, body.postid-5683.single-product div.product h1.product_title { font-family: var(--mv-aus) !important; font-weight: 400 !important; font-size: 30px !important; /* war 27px sans-serif 600 */ line-height: 1.2 !important; letter-spacing: var(--mv-sperrung-titel); color: var(--mv-petrol-700) !important; /* war #0F2A44 */ } /* ---- Preis --------------------------------------------------------------- */ body.postid-5683.single-product div.product p.price, body.postid-5683.single-product div.product p.price .amount, body.postid-5683.single-product div.product p.price ins .amount, body.postid-5683.single-product div.product .woocommerce-variation-price .amount { font-family: var(--mv-aus) !important; font-weight: 500 !important; font-size: 26px !important; /* war 27px */ color: var(--mv-petrol-700) !important; } /* ---- Streichpreis -------------------------------------------------------- ACHTUNG, zweimal falsch gemacht: 1. Die Preisregel oben erfasst AUCH .woocommerce-variation-price .amount. Wird der Streichpreis hier nicht ebenso erfasst, bekommt sein die Theme-Groesse (12,75 px), der Betrag darin aber 26 px. 2. Die Linie von text-decoration wird immer mit den Schriftmetriken des DEKORIERENDEN Elements gezeichnet — also des . Sind und der Betrag darin unterschiedlich gross, sitzt der Strich ueber den Ziffern statt durch sie hindurch. Beide Kontexte muessen deshalb dieselbe Groesse bekommen. -------------------------------------------------------------------------- */ body.postid-5683.single-product div.product p.price del, body.postid-5683.single-product div.product p.price del .amount, body.postid-5683.single-product div.product p.price del .woocommerce-Price-currencySymbol, body.postid-5683.single-product div.product .woocommerce-variation-price del, body.postid-5683.single-product div.product .woocommerce-variation-price del .amount, body.postid-5683.single-product div.product .woocommerce-variation-price del .woocommerce-Price-currencySymbol { font-family: var(--mv-werk) !important; font-weight: 400 !important; font-size: var(--mv-fs-basis) !important; /* 15px, in BEIDEN Kontexten */ line-height: 1.4 !important; color: var(--mv-n-600) !important; } /* Der Strich gehoert an das ; der Betrag darin bekommt ausdruecklich keinen zweiten, sonst entstehen zwei Linien uebereinander. */ body.postid-5683.single-product div.product p.price del, body.postid-5683.single-product div.product .woocommerce-variation-price del { text-decoration-line: line-through !important; text-decoration-thickness: 1px !important; } body.postid-5683.single-product div.product p.price del .amount, body.postid-5683.single-product div.product .woocommerce-variation-price del .amount { text-decoration: none !important; } /* ---- Ausnahme: das "Du sparst"-Badge ------------------------------------ Das Badge kommt aus dem Code-Snippet "Mara Vital — Produktseiten CRO" (ID 5) und traegt seine Farben als Inline-Style: Navy #0F2A44 mit Gold #C9A24B. Der Betrag darin stammt aber aus wc_price() und bringt ein eigenes mit — das faellt sonst unter die Preisregel oben und wird petrolfarben und 26 px gross. Ergebnis: dunkel auf dunkel und zu gross. Deshalb wird das Badge hier ausdruecklich zurueckgeholt. MERKEN FUER ETAPPE 2 UND 4: Jede globale Regel auf .price .amount muss .mv-save-badge ausnehmen, sonst tritt derselbe Fehler shopweit auf. -------------------------------------------------------------------------- */ /* Wichtig: die Ausnahme muss MINDESTENS so spezifisch sein wie die Preisregel oben (0,5,3) — sonst gewinnt die Preisregel trotz gleichem !important. Deshalb dieselbe Kette plus .mv-save-badge (0,6,3). */ body.postid-5683.single-product div.product p.price .mv-save-badge, body.postid-5683.single-product div.product p.price .mv-save-badge .amount, body.postid-5683.single-product div.product p.price .mv-save-badge .woocommerce-Price-currencySymbol, body.postid-5683.single-product div.product .woocommerce-variation-price .mv-save-badge, body.postid-5683.single-product div.product .woocommerce-variation-price .mv-save-badge .amount, body.postid-5683.single-product div.product .woocommerce-variation-price .mv-save-badge .woocommerce-Price-currencySymbol, body.postid-5683 .mv-save-badge, body.postid-5683 .mv-save-badge .amount, body.postid-5683 .mv-save-badge .woocommerce-Price-currencySymbol { font-family: var(--mv-werk) !important; font-size: 12px !important; font-weight: 600 !important; color: #C9A24B !important; line-height: 1.4 !important; } /* ---- Kurzbeschreibung ---------------------------------------------------- */ body.postid-5683 .woocommerce-product-details__short-description, body.postid-5683 .woocommerce-product-details__short-description p, body.postid-5683 .woocommerce-product-details__short-description li { font-family: var(--mv-werk); font-size: var(--mv-fs-basis); /* 15px, war 14,5px */ line-height: var(--mv-lh-basis); color: var(--mv-n-700); /* war #3A4654 */ } /* ---- Reiter-Navigation: bleibt Bedienung, bleibt Werkschrift ------------- */ body.postid-5683 .woocommerce-tabs .tabs a { font-weight: var(--mv-w-semibold); font-size: var(--mv-fs-basis); color: var(--mv-n-900); } body.postid-5683 .woocommerce-tabs .tabs li.active a { color: var(--mv-petrol-700); } /* ---- Ueberschriften im Beschreibungstext und in den Querverweisen -------- */ body.postid-5683 .woocommerce-Tabs-panel h2, body.postid-5683 .woocommerce-Tabs-panel h3, body.postid-5683 .woocommerce-Tabs-panel h4, body.postid-5683 .related h2, body.postid-5683 .upsells h2, body.postid-5683 .up-sells h2, body.postid-5683 .cross-sells h2, body.postid-5683 .product-details-wrapper h2, body.postid-5683 .product-details-wrapper h3 { font-family: var(--mv-aus); letter-spacing: var(--mv-sperrung-titel); color: var(--mv-petrol-700); } body.postid-5683 .woocommerce-Tabs-panel h2, body.postid-5683 .related h2, body.postid-5683 .upsells h2, body.postid-5683 .up-sells h2, body.postid-5683 .cross-sells h2, body.postid-5683 .product-details-wrapper h2 { font-weight: 500; font-size: 26px; /* war Open Sans 700 24px schwarz */ line-height: 1.25; } body.postid-5683 .woocommerce-Tabs-panel h3, body.postid-5683 .product-details-wrapper h3 { font-weight: 500; font-size: 21px; /* war Open Sans 700 18,7px schwarz */ line-height: 1.3; } /* ---- Fliesstext im Beschreibungsreiter ---------------------------------- */ body.postid-5683 .woocommerce-Tabs-panel p, body.postid-5683 .woocommerce-Tabs-panel li { font-family: var(--mv-werk); font-size: 16px; line-height: var(--mv-lh-basis); color: var(--mv-n-900); /* war reines Schwarz */ } /* ---- Varianten-Auswahl: Bedienung, bleibt Werkschrift ------------------- */ body.postid-5683.single-product div.product .variations label, body.postid-5683.single-product div.product .variations th { /* Theme setzt hier 13px/#0F2A44 mit !important — Spezifitaet allein reicht nicht, !important schlaegt sie. */ font-family: var(--mv-werk) !important; font-weight: var(--mv-w-semibold) !important; font-size: var(--mv-fs-klein) !important; color: var(--mv-petrol-700) !important; } /* ---- Der Hauptbutton bleibt unangetastet in der Werkschrift ------------- Die Auszeichnungsschrift geht nie in die Bedienung. -------------------------------------------------------------------------- */ body.postid-5683 .single_add_to_cart_button { font-family: var(--mv-werk) !important; font-weight: var(--mv-w-semibold); border-radius: var(--mv-radius) !important; }