/* Wegefinder-Design für den Tentary-Shop (shop.wegefinder.app) — #162. Einbindung: Tentary → Online-Shop → Eigener Code → Header: Leitplanken: NUR Farben, Schriften, Radien. Niemals display/visibility/ content/position; Checkout-Formulare und Bestell-Button bleiben unberührt. Das Tentary-DOM ist undokumentiert — Klassen-Selektoren unten stammen aus docs/tentary/dom/ (Stand 13.08.2026) und werden bei Tentary-Updates gegengeprüft (Testkauf-Routine #142). Farbwerte: globals.css, oklch→Hex. */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/lato-300.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-700.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-garamond-400.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cormorant-garamond-500.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cormorant-garamond-600.woff2') format('woff2'); } :root { --wf-background: #F3F0E9; /* globals.css --background (Anker, bestätigt gegen Live-Wert) */ --wf-foreground: #292622; /* --foreground */ --wf-card: #FDFBF7; /* --card (Anker, bestätigt gegen Live-Wert) */ --wf-border: #E1DCD4; /* --border */ --wf-muted-foreground: #59554F; /* --muted-foreground */ --wf-radius: 12px; /* Handoff: Standard-Radius */ --wf-radius-card: 18px; /* Handoff: Karten */ --wf-radius-small: 10px; --wf-primary: #B1C7A6; /* --primary */ --wf-primary-foreground: #1F261D;/* --primary-foreground */ --wf-primary-hover: #A1B895; /* --primary-hover */ } /* ── Seitenart-Schalter: warum fast alles unten `body.s-share`/`s-profile` trägt ── Tentary setzt die Seitenart als Klasse am `body` (inventar.md, Tabelle „Seitenart am body"): `s-profile` = Shop-Start, `s-share` = Verkaufs-/ Produktseite, `s-checkout` = Bezahlseite. Zwei Gründe für die Scopes: 1. Tentarys seiteneigenes Inline-CSS enthält `* { font-family:'Inter',… }` (verkaufsseite-wegefinder.html:82). Der Universalselektor trifft JEDES Element direkt — eine geerbte Angabe an `body` erreicht daher nur den `body` selbst. GEMESSEN vor dem Fix (nur gerenderte Elemente — dieselbe Basis wie unten bei der Bezahlseite): Lato 1 Element, Inter 107. Wer den Fließtext ändern will, muss `*` also selbst mit einem Selektor höherer Spezifität treffen — `body.s-share *` (0,1,1) tut das. 2. Der Checkout bleibt bewusst außen vor. Er ist die eine Seite, auf der ein Schriftwechsel Pflichttexte und Button-Beschriftungen umbrechen könnte, und die Leitplanke des Tickets lautet: Checkout nicht anfassen. `body.s-checkout` steht deshalb NIRGENDS unten — das ist Absicht, kein vergessener Fall. Bitte nicht „vervollständigen". GEMESSEN auf der Bezahlseite (13.08.2026, ohne die nicht gerenderten Kopf-Elemente): 482 Elemente bleiben auf Inter, Lato 0. Zugleich als unverändert nachgemessen: jedes Element der „Nicht anfassen"-Liste aus inventar.md — Bestell-Button, Zustimmungshäkchen, Widerruf, SEPA-Mandat, Steuertexte, Zahlartenschalter. Das `:not(i)` in den Universalregeln ist PFLICHT: Font Awesome setzt seine Familie auf `i.fas` (Warenkorb, Chevrons, Schloss) mit derselben Spezifität. GEMESSEN ohne `:not(i)`: die drei `i.fas` der Verkaufsseite fallen von „Font Awesome 6 Free" auf Lato — die Icons werden zu leeren Kästchen. Mit `:not(i)`: „Font Awesome 6 Free" bleibt. */ /* GEMESSEN (inventar.md, „Was bereits stimmt"): body-Hintergrund ist auf allen Seiten inkl. Checkout bereits rgb(243,240,233) = --wf-background — diese Regel ist demnach ein No-op. Bewusst als Sicherheitsnetz behalten, falls Tentary sein Theme ändert; unscoped, weil auch auf dem Checkout harmlos. */ body { background-color: var(--wf-background); } body.s-share, body.s-profile { color: var(--wf-foreground); } body.s-share, body.s-share *:not(i), body.s-profile, body.s-profile *:not(i) { font-family: 'Lato', system-ui, sans-serif; } /* Überschriften. Die Element-Ebene gilt DOM-unabhängig und erreicht auch den Checkout — dort sind es drei klassenlose `h3`-Abschnittstitel, die von „EB Garamond" auf Cormorant Garamond wechseln, bei unverändertem Gewicht (600) und unveränderter Farbe (rgb(0,0,0), GEMESSEN). Serif→Serif, kein Pflichttext, keine Button-Beschriftung — das ist der eine bewusst zugelassene Eingriff auf der Bezahlseite. `color` steht hier absichtlich NICHT: sonst würde die Überschriftenfarbe auch im Checkout verschoben. */ h1, h2, h3, h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; /* Serif nie fett über 600 (Handoff-Regel) */ } /* Auf den Marketingseiten hat die Serif-Regel dieselbe Spezifität wie die Universalregel oben (`body.s-share h1` und `body.s-share *:not(i)` beide (0,1,2)) — sie gewinnt nur, weil sie WEITER UNTEN im File steht (Cascade- Tiebreak über Quellreihenfolge, nicht über Spezifität). Würde man diesen Block vor die Universalregel verschieben, kippten Überschriften still auf Lato — die Reihenfolge (Serif-Regeln nach der Fließtext-Regel) ist deshalb Pflicht, nicht Zufall. Die Kinder der Überschrift müssen gleich mit, sonst landet ein `` in einer Überschrift auf Lato (GEMESSEN). */ body.s-share h1, body.s-share h2, body.s-share h3, body.s-share h4, body.s-share h1 *:not(i), body.s-share h2 *:not(i), body.s-share h3 *:not(i), body.s-share h4 *:not(i), body.s-profile h1, body.s-profile h2, body.s-profile h3, body.s-profile h4, body.s-profile h1 *:not(i), body.s-profile h2 *:not(i), body.s-profile h3 *:not(i), body.s-profile h4 *:not(i) { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; } /* Tentarys `#pp .share .share-descr h2 { font-weight:700 }` (Spezifität 1,2,1) schlägt jede Regel ohne ID. Wir liefern nur 400/500/600 Cormorant — 700 ließe der Browser also synthetisch fetten. GEMESSEN mit einem Probe-`h2` in `.share-descr`: ohne diese Regel „EB Garamond" 700, mit ihr Cormorant Garamond 600. Betrifft Überschriften, die im Tentary-Editor in die Verkaufsbeschreibung geschrieben werden (aktuell null auf der Live-Seite — die Regel ist Vorsorge, kein Ist-Fix). `color` steht hier mit, weil dieselbe Tentary-Regel auch Schwarz setzt: GEMESSEN rgb(0,0,0) ohne, rgb(41,38,34) mit — sonst stünde eine Editor-Überschrift schwärzer da als der Rest der Seite, der über `body.s-share` bereits auf --wf-foreground erbt. */ body.s-share #pp .share .share-descr h2 { font-weight: 600; color: var(--wf-foreground); } /* ── Klassen-Ebene: Selektoren aus docs/tentary/dom/ (Task-3-Step-3) ── */ /* Gelernt bei der Live-Messung am Shop (#162; damals noch unter der alten Domain shop.tabeagrosser.de, seit 14.08. shop.wegefinder.app — #177): Tentarys eigenes CSS kommt von cdn2.tentary.com und app.tentary.com (fremde Origin, `cssRules` aus der Seite heraus nicht enumerierbar — GEMESSEN: alle sieben fremden Stylesheets werfen beim Zugriff) und gewinnt zuverlässig gegen einfache Ein-Klassen-Selektoren. Verlässlich sind daher nur die Element-/Seitenart-Ebene oben sowie die unten mit „GEMESSEN, GREIFT" markierten Klassenregeln. Jede neue Klassenregel erst live gegen die Seite prüfen (getComputedStyle), bevor sie als wirksam gilt — eine Regel, die still nichts tut, ist schlimmer als keine Regel. */ /* Karten-/Boxflächen — Produktliste (Shop-Start). Quelle: inventar.md, Klassentabelle „Produktliste" (.product). GEMESSEN, GREIFT: 7 Karten auf der Shop-Startseite, computed background rgb(253,251,247), border rgb(225,220,212), radius 18px. Bewusst auf `.product-list .product` verengt: `.product` allein trifft auch `.order-bumps-wrap .order-bump .content .product` — Order-Bumps stehen im Checkout. (Auf der Live-Bezahlseite sind aktuell keine Order-Bumps konfiguriert, GEMESSEN 0 Treffer; die Verengung ist Vorsorge.) .section bewusst NICHT hier: auf der Live-Checkoutseite umschließt .section laut Node.contains()-Messung u. a. .buy, div.sepa-mandate, div.taxes, div.tax-note, input.styled-checkbox, .payment-switch und .payment-info — jedes Element der Tabu-Liste in inventar.md. */ .product-list .product { background-color: var(--wf-card); border-color: var(--wf-border); border-radius: var(--wf-radius-card); } /* Gutschein-Box im Checkout. Steht NICHT auf der „Nicht anfassen"-Liste (kein Pflichttext, kein Zustimmungshäkchen, kein Zahl-Widget). Quelle: inventar.md, Klassentabelle „Checkout-Inhalte" (.coupon-box), Radius-Ziel 12px = --wf-radius, nicht --wf-radius-card. GEMESSEN, GREIFT auf der Bezahlseite: background rgb(253,251,247), radius 12px (vorher transparent / 0px). */ .coupon-box { background-color: var(--wf-card); border-color: var(--wf-border); border-radius: var(--wf-radius); } /* Sekundärtext — Verkäufer-Byline auf der Verkaufsseite und die Preis-Nebenzeile „Preis" (die Betragszahl selbst bleibt --wf-foreground). Quelle: verkaufsseite-wegefinder.html (.product-seller, .product-price > span „Preis"). GEMESSEN, GREIFT auf der Verkaufsseite: computed color rgb(89,85,79). */ .product-seller, .product-price span { color: var(--wf-muted-foreground); } /* Entfernt und NICHT ersetzt — jede dieser Regeln war nachweislich wirkungslos. (Mit ihnen fielen auch die Tokens --wf-accent-strong/-hover und --wf-primary* weg: keine Verbraucher mehr, also gelöscht.) - `a { color: #455F40 }` + `a:hover`: GEMESSEN mit und ohne die Regel, Zeichen für Zeichen identisch. `.pp-footer-links a` und `.share-logo` bleiben rgb(0,0,0) (Tentarys `#pp-footer`-Regeln gewinnen), `.share-descr a` war schon rgb(69,95,64) — Tentarys `--link-color` ist bereits unser Akzent. Auf der Shop-Startseite ebenso: alle 14 `a` unverändert rgb(255,255,255) / rgb(44,44,44) / rgb(0,0,0). - `.product-buy` (Kauf-CTA „Zur Kasse"): computed background blieb rgb(69,95,64) — Tentarys eigene Regel gewinnt. Kein Verlust: rgb(69,95,64) = #455F40 = --accent-foreground aus globals.css, ist also bereits unsere Marke. - `select { border-radius: --wf-radius }`: computed radius blieb 4px auf der Verkaufsseite und 10px im Checkout. Auch die Buttons behalten Tentarys 10px statt unserer 12px. Alle drei bewusst NICHT mit höherer Spezifität oder !important erzwungen — das widerspräche der defensiven Leitplanke des Tickets und würde die Bezahlseite mit Cascade-Kämpfen fragil machen. Siehe inventar.md, Abschnitt „Die Lücke" — die dortigen ⛔-Zeilen (Radius Buttons, Radius `select`, Eingabefeld-Fläche) sind erledigt-durch-Verzicht, keine offenen To-dos. Wer sie mit `!important` „fertig macht", bricht die Leitplanke des Tickets an der einen Stelle, an der echtes Geld fließt. */ /* ── Bezahlseite (#187) ─────────────────────────────────────────────────── */ @media (min-width: 1240px) { body.s-checkout #wrapper { padding: 20px 20px 80px; } body.s-checkout #pp-footer { max-width: 1180px; margin-top: 20px; border-radius: 20px; background-color: var(--wf-card); box-shadow: 0 2px 4px rgba(22, 22, 22, 0.06), 0 20px 48px rgba(22, 22, 22, 0.12); } body.s-checkout #pp { max-width: 1180px; margin-inline: auto; background-color: var(--wf-card); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 4px rgba(22, 22, 22, 0.06), 0 20px 48px rgba(22, 22, 22, 0.12); } } body.s-checkout, body.s-checkout *:not(i) { font-family: 'Lato', system-ui, sans-serif; } html:has(body.s-checkout) { font-size: 17px; } body.s-checkout { --font-size: 17px; font-size: 17px; line-height: 1.65; } body.s-checkout #wrapper h1, body.s-checkout #wrapper h2, body.s-checkout #wrapper h3, body.s-checkout #wrapper h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.24; } body.s-checkout #payment-form .delivery .fields .form-row, body.s-checkout #payment-form .form-full-row { font-size: 1rem; } body.s-checkout #payment-form .payment-switch label { font-size: 1rem; } body.s-checkout #payment-form .widerruf, body.s-checkout #payment-form .marketing, body.s-checkout #payment-form .coupon-box .show-coupon, body.s-checkout #payment-form #basket .basket-footprint { font-size: 15px; } body.s-checkout #payment-form #basket .basket-footprint { color: var(--wf-muted-foreground); } body.s-checkout #payment-form #basket .basket-footprint a { color: var(--wf-foreground); } body.s-checkout #payment-form .the_price div:first-child div .price-tax-details { background-color: var(--wf-card); color: var(--wf-foreground); border: 1px solid var(--wf-border); border-radius: var(--wf-radius); box-shadow: 0 2px 4px rgba(22, 22, 22, 0.06), 0 12px 28px rgba(22, 22, 22, 0.12); font-size: 15px; padding: 10px 16px; } body.s-checkout #payment-form .the_price .price-tax-details .tax-msg-field { color: var(--wf-muted-foreground); } body.s-checkout { --font-color: #292622; } body.s-checkout #payment-form .payment-switch label, body.s-checkout #pp-footer, body.s-checkout #pp-footer a { color: var(--wf-foreground); } body.s-checkout #pp-footer .pp-footer-powered a.share-logo { color: var(--wf-muted-foreground); } body.s-checkout #payment-form .the_price .price-tax-details-hover { color: var(--wf-muted-foreground); } body.s-checkout #payment-form .buy .title { font-weight: 400; color: var(--wf-muted-foreground); } body.s-checkout #payment-form .the_price { align-items: baseline; } body.s-checkout #payment-form label.styled-checkbox-label { align-items: flex-start; } body.s-checkout #payment-form label.styled-checkbox-label input.styled-checkbox { margin-top: 3px; } body.s-checkout #payment-form .the_price_price .total-with-vat { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 38px !important; font-weight: 400; line-height: 24px; } body.s-checkout { background-color: var(--wf-background); color: var(--wf-foreground); } body.s-checkout #payment-form .flex-sections:first-child { background-color: var(--wf-card); } body.s-checkout #payment-form .flex-sections:nth-child(2) { background-color: #EDF4E6; border-left: 1px solid var(--wf-border); } @media (max-width: 750px) { body.s-checkout #payment-form .flex-sections:nth-child(2) { border-left: 0; border-top: 1px solid var(--wf-border); } } body.s-checkout input[type="text"], body.s-checkout input[type="email"], body.s-checkout input[type="tel"], body.s-checkout select { background-color: var(--wf-card); border-color: var(--wf-border); color: var(--wf-foreground); } body.s-checkout .flex-sections { border-radius: 0; } body.s-checkout #payment-form .buy .image, body.s-checkout #payment-form .buy .image img { border-radius: var(--wf-radius-small); } body.s-checkout select, body.s-checkout .payment-switch, body.s-checkout .show-coupon { border-radius: var(--wf-radius); } body.s-checkout button#submit { background-color: var(--wf-primary); color: var(--wf-primary-foreground); border-radius: var(--wf-radius); } body.s-checkout button#submit:hover:not(:disabled) { background-color: var(--wf-primary-hover); } body.s-checkout button#submit:disabled { opacity: 1; background-color: #EFECE8; color: #9B9893; } body.s-checkout input:not([type="checkbox"]):not([type="radio"]) { border-radius: var(--wf-radius); }