/** Shopify CDN: Minification failed Line 649:77 Unexpected "*" **/ /* ========================================================================== ENGORI Leder — eigenes Stylesheet der Leder-Linie Angelegt 30.09.2026 WOFUER Die Leder-Linie ist eine zweite Produktlinie, die sich vom Bestand absetzen soll: der Bestand arbeitet mit Dringlichkeit, Mengenstaffel und Rabatt, diese Seite arbeitet mit Ruhe, Material und Handwerk. Traeger sind templates/product.engori-leder.json und templates/collection.leder.json. WARUM EIGENE DATEI assets/engori-premium.css hat 6230 Zeilen und wird von mehreren Sitzungen bearbeitet (Leon am 27.09., diese Sitzung am 30.09.). Ein Anbau dort waere im naechsten Vergleich nicht mehr von fremder Arbeit zu trennen. Diese Datei laedt NUR auf Leder-Vorlagen (layout/theme.liquid, Bedingung `template.suffix contains 'leder'`) und kostet den Rest des Shops nichts. LADEREIHENFOLGE Nach base.css, engori-premium.css und engori-format.css. Dadurch gewinnt sie bei gleicher Spezifitaet ueber die Reihenfolge. `!important` steht hier nur, wo die Gegenregel selbst `!important` traegt oder inline gesetzt ist. ⚠️ SCHRIFTGROESSEN AUSSCHLIESSLICH IN rem Die Wurzelschrift des Shops ist 10,5 px (`calc(var(--font-body-scale) * 62.5%)`), 1rem = 10,5 px. Feste px-Werte wachsen bei hochgestellter Browserschrift nicht mit — das ist WCAG 1.4.4 / Fehlermuster F94 und in diesem Shop in der Woche vom 22.09. dreimal aufgetreten. In dieser Datei steht deshalb keine einzige Schriftgroesse in px, und keine Groesse wird gegen die Viewportbreite gedeckelt (kein `font-size: Xvw` und kein `clamp()`, dessen Obergrenze eine Viewporteinheit ist). px bleibt erlaubt fuer Abstaende, Rahmen, Radien und Bildmasse. FARBEN Die Marken des Shops (`--eng-*` in engori-premium.css, `:root`) bleiben unangetastet. Hier entstehen NEUE Marken `--eng-ld-*`. Abschnitt 2 legt sie innerhalb von `#MainContent` auf die vorhandenen `--eng-*`-Namen — das ist eine oertliche Ueberdeckung des geerbten Wertes, keine Neudefinition: ausserhalb der Leder-Vorlagen und in Kopf- und Fusszeile gilt weiter das `:root` des Shops. So folgen alle bestehenden Sections der warmen Palette, ohne dass jede einzelne Regel nachgebaut werden muss. Gemessene Kontraste (WCAG 2.1, 30.09.2026, gerechnet): --eng-ld-ink auf bg 13,69:1 auf surface 12,50:1 --eng-ld-ink-soft auf bg 8,29:1 auf surface 7,57:1 --eng-ld-ink-faint auf bg 5,71:1 auf surface 5,21:1 --eng-ld-akzent auf bg 6,75:1 auf surface 6,16:1 --eng-ld-akzent-ink auf bg 8,43:1 auf surface 7,70:1 Knopftext #FFFFFF auf akzent 5,34:1 auf akzent-hover 7,15:1 Buehnenbahn (02.10.2026, frueher helle Papierbahn): ink #F2EBE0 auf #23252A 13,37:1 soft #C3B8A8 auf #23252A 7,88:1 akzent #EC8FA6 auf #23252A 6,84:1 Akzent der Linie ist seit 01.10.2026 das Shoprot, nicht mehr das Messing #C9A15E. Werner: "wir bleiben im dunkel modus mit dem rot". Das loest zugleich den nie abgenommenen Befund, dass Weiss auf Messing nur 2,40:1 trug. 03.10.2026: Das Shoprot ist jetzt das Logo-Rot #982840 statt des alten Pinks #C42350 (shopweiter Wechsel). Selbst nachgerechnet an diesem Tag: Weiss auf #982840 7,74:1 (auf #C42350 waren es 5,67:1) Weiss auf Hover #A91C44 7,15:1 #982840 ist eine FLAECHENFARBE. Als Textfarbe auf dem dunklen Grund #23201D ergaebe es 2,09:1 (das alte Pink 2,86:1), dafuer ist --eng-ld-akzent-ink da: #EC8FA6 traegt dort 6,98:1. INHALT 1 Marken der Linie 2 Oertliche Ueberdeckung im Hauptinhalt 3 Seitengrund 4 Kaufbox: Kicker, Titel, Preis, Pflichthinweis 5 Farbauswahl (Swatches ohne Mengenstaffel) 6 Kaufknopf und Zahlarten 7 Aufklappzeilen 8 Bildgalerie 9 Erzaehlbahnen (ENGORI Bild-Showcase) und Papierbahn 10 Trust-Karten 11 Kollektionsseite 12 Bewegung reduziert ========================================================================== */ /* ── 1 Marken der Linie ──────────────────────────────────────────────────── */ :root { /* Flaechen: warmes Espresso statt des kuehlen Graus des Bestands. */ --eng-ld-bg: #282A2F; --eng-ld-bg-step: #202227; --eng-ld-surface: #2F3238; /* Die helle, warme Flaeche: eine Papierbahn fuer die Materialerzaehlung. */ --eng-ld-papier: #23252A; --eng-ld-papier-step: #2F3238; --eng-ld-papier-ink: #F2EBE0; --eng-ld-papier-soft: #C3B8A8; --eng-ld-papier-akzent: #EC8FA6; /* Schrift: warmes Gebrochen-Weiss, keine reinen Graustufen. */ --eng-ld-ink: #F2EBE0; --eng-ld-ink-soft: #C3B8A8; --eng-ld-ink-faint: #A2988A; /* Akzent: Messing. Ersetzt das Markenrot, das auf dieser Linie nach Aktion aussieht. Zwei Toene aus demselben Farbton, wie im Bestand: --eng-ld-akzent traegt Flaechen und Kanten, --eng-ld-akzent-ink traegt Schrift und Preise. */ --eng-ld-akzent: #982840; --eng-ld-akzent-ink: #EC8FA6; --eng-ld-akzent-hover: #A91C44; --eng-ld-akzent-wash: rgba(152, 40, 64, 0.13); --eng-ld-akzent-line: rgba(152, 40, 64, 0.48); /* Linien liegen im Farbton der Schrift, nicht in Neutralgrau. Sie tragen hier die ganze Struktur, weil Karte und Grund sich nur um 1,09:1 unterscheiden — gewollt: weiche Flaechen statt harter Kanten. */ --eng-ld-line: rgba(242, 235, 224, 0.16); --eng-ld-line-stark: rgba(242, 235, 224, 0.28); /* Licht von oben, Tiefe darunter — weicher und weiter gestreut als im Bestand, damit nichts kantig wirkt. */ --eng-ld-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 44px -26px rgba(0, 0, 0, 0.75); /* Rhythmus: deutlich mehr Luft als im Bestand. Das ist der Hauptunterschied zur Bestandsseite und traegt mehr zum Eindruck bei als jede Farbe. */ --eng-ld-luft: clamp(28px, 6vw, 56px); --eng-ld-luft-gross: clamp(44px, 9vw, 96px); --eng-ld-r: 14px; --eng-ld-r-gross: 22px; --eng-ld-t: 0.28s cubic-bezier(0.32, 0.72, 0, 1); } /* ── 1b Farbwelt HELL, Leder-Linie ─────────────────────────────────────────── 30.09.2026. Belegt dieselben --eng-ld-*-Rollen hell um. Abschnitt 2 legt sie unveraendert auf die --eng-*-Namen — dadurch folgt die ganze Leder-Seite, ohne dass eine einzige Regel darunter angefasst wird. EINE Stelle, ERSETZEN statt anhaengen. Festlegung (Werner, 30.09.2026): Messing ist die Signatur dieser Linie, weil die Beschlaege der Ledertaschen messingfarben sind, die Farbe kommt aus der Ware. ⚠️ UEBERHOLT AM 01.10.2026, aus zwei Gruenden: 1. Die Begruendung traegt nicht. An den Lieferantenbildern nachgesehen (ds19 und ds10 Brusttasche, at15 Aktentasche) sind Karabiner, D-Ringe, Schnallen und Reissverschluesse durchgehend SILBERN, nicht messingfarben. Die Farbe kam also nicht aus der Ware. 2. Werner am 01.10.2026: "wir bleiben im dunkel modus mit dem rot". Der Akzent ist deshalb jetzt das Shoprot. Das raeumt zugleich den nie abgenommenen Kontrastbefund ab (Weiss auf Messing 2,40:1). ZURUECK AUF MESSING geht an genau vier Werten in Abschnitt 1: --eng-ld-akzent #B39562, --eng-ld-akzent-ink #D9B679, --eng-ld-akzent-hover #755E31, --eng-ld-papier-akzent #7A5A22. Dann muss der Kaufknopf wieder dunkle Schrift bekommen (Abschnitt 6), sonst faellt er auf 2,40:1 zurueck. Die frueher hier stehende Aufteilung nach Funktion lautete: Linien, Rahmen, Marke -> Messing #B39562 (dekorativ) alles Klickbare -> Bronze #755E31 (Preis, Badge, Knopf) ⚠️ UEBERHOLT am 03.10.2026: Bronze ist raus, die helle Welt traegt jetzt das Markenrot. Siehe den Palettenblock weiter unten. Warenkorb und Kasse -> bleiben Magenta Der letzte Punkt braucht keine Regel: diese Datei laedt nur bei `template.suffix contains 'leder'`, Warenkorb und Kasse sehen sie nie. ⚠️ Abweichung von der Vorgabe, aus der Messung: vorgegeben war Bronze #8A6F3C mit „4,7:1 auf Creme". 4,7:1 gilt gegen Reinweiss. Gegen Creme sind es 4,26:1, auf der Papierbahn #E6DDCE nur 3,93:1 — beides unter 4,5:1. #755E31 traegt auf allen fuenf Flaechen dieser Seite: Creme 5,53:1, Flaeche 5,97:1, Bahn 5,11:1, Papier-Step 4,59:1, Messing-Chip 4,84:1. Rueckfrage an Werner offen, ob der dunklere Ton so bleibt. Messing #B39562 ist als SCHRIFT unbrauchbar (2,54:1 auf Creme) und steht deshalb nur in Linien, Rahmen und Flaechen ohne Text darauf. Alle Werte am 30.09.2026 gerechnet, Schwelle 4,5:1 (WCAG 1.4.3 AA). ========================================================================== */ /* ENGORI 03.10.2026 (Werner: "Header muss getrennt werden damit er in Leder hell ist und sonst dunkel"): Die hellen Rollen haengen jetzt zusaetzlich an `body.eng-hell`. Dort deklariert erben sie an die GANZE Seite, also auch an Kopf- und Fusszeile, nicht nur an #MainContent. Der Shop bleibt global dunkel, hell gilt nur dort, wo theme.liquid `eng-hell` setzt: Produktseiten mit dem Suffix "leder". Selektorliste ERWEITERT, kein zweiter Regelsatz. */ html[data-farbwelt="hell"], body.eng-hell { /* Flaechen: der Shopgrund, damit Kopf- und Fusszeile nicht springen. */ --eng-ld-bg: #F6F2EA; --eng-ld-bg-step: #EFE9DD; --eng-ld-surface: #FDFBF7; /* Die Papierbahn war im Dunkeln die HELLE Ausnahme. Auf Creme kann sie das nicht mehr sein, sonst verschwindet sie. Sie wird hier die abgesetzte, etwas tiefere Bahn — die Erzaehlfunktion bleibt, die Richtung dreht. */ --eng-ld-papier: #EFE9DD; /* 04.10.2026: stand noch auf #2F3238, dem Seitendunkel der alten Welt. Der Kommentar darueber dreht die Richtung der Bahn, die Stufe DARIN wurde dabei uebersehen. Gemessen ergab das ein dunkles Feld von 578 x 578 px unter dem Showcase-Bild auf LeatherSling und OfficeBag. Jetzt eine Stufe tiefer als die Bahn: Schrift #191714 darauf 13,36:1, Akzent #982840 darauf 5,78:1. */ --eng-ld-papier-step: #E5DECF; --eng-ld-papier-ink: #191714; /* 14,80:1 auf der Bahn */ --eng-ld-papier-soft: #45403A; /* 8,48:1 */ --eng-ld-papier-akzent: #982840; /* 6,40:1 auf der Bahn, 5,78:1 auf Step */ /* Schrift */ --eng-ld-ink: #191714; /* 16,02:1 auf Creme */ --eng-ld-ink-soft: #45403A; /* 9,19:1 */ --eng-ld-ink-faint: #6B655C; /* 5,17:1 */ /* Messing und Bronze. --eng-ld-akzent traegt in Abschnitt 2 die Rolle --eng-accent, also Flaechen UND Knoepfe. Deshalb steht hier Bronze, nicht Messing: ein Messingknopf haette nur 2,54:1 gegen den Cremegrund und waere als Bedienelement kaum abgegrenzt (WCAG 1.4.11 will 3:1). Bronze kommt auf 5,53:1, weisse Schrift darauf auf 6,17:1. Reines Messing bleibt der Linie und dem Rahmen — dort ist es dekorativ und an keine Kontrastschwelle gebunden. */ /* 03.10.2026 (Werner): "die roten Akzente nicht vergessen ueberall". Die helle Welt lief bisher auf Bronze #755E31. Ersetzt durch das Markenrot. Am 03.10.2026 wechselte der ganze Shop vom Pink #C42350 auf das Logo-Rot #982840; hier dieselben Messwerte auf Creme #F6F2EA, selbst nachgerechnet: #982840 als Flaeche, weisser Text darauf 7,74:1 (vorher 5,67:1) #9B1B3E als Text (Preis, Badge, Ueberzeile) 7,18:1 #A91C44 als Hover-Flaeche, weisser Text 7,15:1 Das Logo-Rot als TEXT auf Creme traegt 6,93:1 und waere damit brauchbar; Text behaelt trotzdem #9B1B3E (7,18:1), damit Flaeche und Schrift unterscheidbar bleiben. OFFEN: Der Hover-Ton #A91C44 ist HELLER als die neue Flaeche #982840, die Richtung der Hover-Aenderung dreht sich damit um. Der shopweite Austausch hat #A91C44 ueberall stehen lassen, deshalb bleibt er auch hier — das gehoert einmal fuer den ganzen Shop entschieden. */ --eng-ld-akzent: #982840; /* Flaechen, Knoepfe */ /* Hover in der HELLEN Welt: DUNKLER als die Flaeche, nicht heller. Ohne diese Zeile erbt die helle Welt --eng-ld-akzent-hover #A91C44 aus :root. Das ist fuer die dunkle Welt richtig (dort soll der Knopf beim Zeigen aufhellen), auf Creme dreht es die Richtung um: #A91C44 hat die Leuchtdichte 0,0968 gegen 0,0856 der Flaeche #982840, waere beim Zeigen also heller. #7E1C35 liegt bei 0,0552 und ist derselbe Ton 344,7 Grad. Weisse Schrift darauf 9,98:1 statt 7,15:1. Gemessen 04.10.2026. */ --eng-ld-akzent-hover: #7E1C35; /* 04.10.2026 auf das Logo-Rot vereinheitlicht. Hier stand #9B1B3E mit der Begruendung, Flaeche und Schrift sollten unterscheidbar bleiben. Die traegt nicht: rgb(155,27,62) gegen rgb(152,40,64) ist ein Abstand, den niemand sieht, und Werner hat EIN Rot verlangt (Auftrag A2, 03.10.2026). Kontrast auf der Bahn 6,40:1 statt 6,63:1, auf Creme 6,93:1 statt 7,18:1 — beide deutlich ueber der Anforderung 4,5:1. Alle vier Werte am 04.10.2026 selbst nachgerechnet; die alte Notiz „5,11:1 auf der Bahn" war nicht reproduzierbar. */ --eng-ld-akzent-ink: #982840; /* Preis, Badge, Text */ --eng-ld-akzent-wash: rgba(152, 40, 64, 0.13); /* Rot-Hauch */ --eng-ld-akzent-line: rgba(152, 40, 64, 0.55); /* Akzentlinie */ /* Linien im Farbton der Schrift, wie im Dunkeln — nur Ink statt Gebrochen-Weiss. */ --eng-ld-line: rgba(25, 23, 20, 0.14); --eng-ld-line-stark: rgba(25, 23, 20, 0.24); /* Schatten gedreht: die weisse Lichtkante von oben ist auf Creme unsichtbar und macht die Flaeche flach. Hier traegt allein die Tiefe in Ink, weit gestreut, damit die Ruhe der Linie bleibt. */ --eng-ld-schatten: 0 2px 4px rgba(25, 23, 20, 0.05), 0 18px 44px -26px rgba(25, 23, 20, 0.30); } /* ── 2 Oertliche Ueberdeckung im Hauptinhalt ───────────────────────────────── Nur innerhalb von #MainContent und nur auf Leder-Vorlagen. Kopfzeile, Fusszeile, Warenkorb-Hinweis und jede andere Seite behalten das `:root` des Shops. Dadurch folgen die vorhandenen Sections (Bild-Showcase, Trust-Karten, Aufklappzeilen) der Leder-Palette, ohne eigene Regeln. */ body.eng-leder #MainContent { --eng-accent: var(--eng-ld-akzent); --eng-accent-text: var(--eng-ld-akzent-ink); --eng-accent-preis: var(--eng-ld-akzent-ink); --eng-accent-icon: var(--eng-ld-akzent-ink); --eng-accent-hover: var(--eng-ld-akzent-ink); --eng-accent-wash: var(--eng-ld-akzent-wash); --eng-accent-line: var(--eng-ld-akzent-line); --eng-accent-glow: var(--eng-ld-akzent-wash); --eng-bg: var(--eng-ld-bg); --eng-bg-step: var(--eng-ld-bg-step); --eng-surface: var(--eng-ld-surface); --eng-line: var(--eng-ld-line); --eng-ink: var(--eng-ld-ink); --eng-ink-soft: var(--eng-ld-ink-soft); --eng-ink-faint: var(--eng-ld-ink-faint); --eng-shadow-card: var(--eng-ld-schatten); --eng-shadow-lift: var(--eng-ld-schatten); --eng-t: var(--eng-ld-t); /* WCAG 1.4.4: --eng-h2 steht im `:root` des Shops als 24px / 30px ab 750 px und wird von mehreren Sections mit `font-size: var(--eng-h2) !important` benutzt. In px wachsen diese Ueberschriften bei hochgestellter Browserschrift nicht mit. Hier derselbe Grad in rem — damit ist die Deckelung fuer die ganze Leder-Seite aufgehoben, ohne dass jede betroffene Regel einzeln ueberschrieben werden muss. 24 px / 10,5 = 2,29rem · 30 px / 10,5 = 2,86rem */ --eng-h2: 2.29rem; } @media screen and (min-width: 750px) { body.eng-leder #MainContent { --eng-h2: 2.86rem; } } /* ── 3 Seitengrund ────────────────────────────────────────────────────────── Das Theme setzt den Grund ueber Farbschemata an den Sections. Die Leder- Vorlagen benutzen background-1; hier wird dessen Grund und Schrift warm gestellt, damit zwischen den Sections keine kuehle Fuge stehenbleibt. */ body.eng-leder #MainContent, body.eng-leder #MainContent .color-background-1, body.eng-leder #MainContent .gradient { background: var(--eng-ld-bg); color: var(--eng-ld-ink); } body.eng-leder #MainContent .shopify-section + .shopify-section { border-top: 0; } /* ── 3b Tablet 750–989 px: Haftung abschalten ─────────────────────────────── GEMESSEN 30.09.2026 bei 800 px: In diesem Band stapelt Leons Regel (engori-premium.css ab 6091) Galerie und Kaufbox untereinander, beide bleiben aber `position: sticky` mit `top: 31,5px`. Folge: die Galerie bleibt oben kleben und die Kaufbox scrollt darueber hinweg — Text liegt dann auf dem Produktbild. ⚠️ Das ist KEIN Fehler dieser Vorlage. Am selben Tag an derselben Breite auch auf der Standardvorlage (templates/product.json) nachgestellt, dort identisch. Auf der Leder-Seite faellt es nur staerker auf, weil die Galerie hier groesser ist (media_size large, 901 px statt 579 px). Diese Regel raeumt es fuer die Leder-Seite weg; der Altfehler auf den uebrigen Produktseiten bleibt bestehen und ist gemeldet. */ @media screen and (min-width: 750px) and (max-width: 989px) { body.eng-leder .product__media-wrapper, body.eng-leder .product__info-wrapper { position: static !important; top: auto !important; } } /* ── 4 Kaufbox: Kicker, Titel, Preis, Pflichthinweis ──────────────────────── Die Kaufbox bleibt die des Themes (Shrine). Nur Typografie und Abstaende werden ruhiger; an der Mechanik (Variantenfeld, Express-Zahlarten) wird nichts angefasst. */ /* Die Linienbezeichnung ueber dem Namen. Der Text kommt aus einem custom-liquid-Block der Vorlage und traegt genau diese Klasse. */ body.eng-leder .eng-ld-kicker { margin: 0 0 0.6rem; font-size: 1.15rem; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--eng-ld-akzent-ink); } body.eng-leder .eng-ld-kicker__trenner { margin: 0 0.5em; color: var(--eng-ld-line-stark); } /* Der Produkttitel: Groesse kommt als rem aus dem Titel-Block der Vorlage (blocks/product_title.liquid rechnet px in rem um). Hier nur Laufweite, Zeilenhoehe und die Marke darueber. */ body.eng-leder .product__title h1 { font-weight: 600; letter-spacing: -0.005em; line-height: 1.18; color: var(--eng-ld-ink); } /* GEMESSEN 30.09.2026 bei 200 % Browserschrift: Diese Zeile blieb auf 12 px stehen. Ursache ist `.product__info-container h1 .eng-titel-marke { font-size: 12px !important }` in engori-premium.css Zeile 6111 (Leon, 27.09.). Ein fester px-Wert mit !important — deshalb hier derselbe Grad in rem, ebenfalls mit !important. 12 / 10,5 = 1,15rem. */ body.eng-leder .product__title .eng-titel-marke, body.eng-leder .product__info-container h1 .eng-titel-marke { display: block; margin-bottom: 0.35rem; font-size: 1.15rem !important; line-height: 1.3; letter-spacing: 0.2em; font-weight: 500; color: var(--eng-ld-ink-faint); } /* Preis in der Akzentfarbe. 03.10.2026 (Werner): "die roten Akzente nicht vergessen ueberall", und die Oxford-Produktseiten zeigen den Preis ebenfalls im Akzent. Einheitlichkeit ueber alle Produkte wiegt hier schwerer. ⚠️ Der frueher hier notierte Einwand bleibt gueltig und ist nur ueberstimmt: ein Preis in Signalfarbe liest sich als Angebot, bei Vollnarbenleder zu 299 Euro kann das gegen die Hochwertigkeit arbeiten. Rueckweg ist eine Zeile: --eng-ld-akzent-ink wieder durch --eng-ld-ink ersetzen. Kontrast gemessen: #9B1B3E auf Creme #F6F2EA = 7,18:1. */ body.eng-leder .product-page-price .price__regular .price-item, body.eng-leder .product-page-price .price-item--regular { color: var(--eng-ld-akzent-ink) !important; font-weight: 500; letter-spacing: 0.005em; } /* Kein Abzeichen auf dieser Linie. Die Vorlage setzt `displayed_badge: none` und `custom_badge_text: ""`; diese Regel ist die zweite Sicherung, falls jemand im Theme-Editor an der Einstellung dreht. Ausgenommen bleibt das Ausverkauft-Abzeichen: dass eine Farbe nicht lieferbar ist, muss der Kunde sehen. */ body.eng-leder .product-page-price .price__badge-sale { display: none !important; } /* 20.10.2026, Werner: "der neben dem preis die aktion wie auf den anderen produktseiten". Das Aktions-Abzeichen war hier mit ausgeblendet, weil es am 18.10. durch die Mengenstaffel voruebergehend falsch war. Die Staffel ist zurueckgedreht, "Zweite Tasche geschenkt" ist wieder ACTIVE (am Shop gemessen am 20.10.2026), der Text kommt aus settings.eng_angebot_badge. Also sichtbar wie auf den anderen Produktseiten. Das Sale-Abzeichen bleibt aus. */ body.eng-leder .product-page-price .price__badge-custom { display: inline-flex !important; } /* Infospalte enger: die Bloecke standen auf margin-top 18,9px. Werner am 20.10.2026: "enger zusammen". */ body.eng-leder .product__info-container > .eng-ab, body.eng-leder .product__info-container > .eng-tag, body.eng-leder .product__info-container > .eng-bnf, body.eng-leder .product__info-container > .eng-stf { margin-top: 10px !important; } body.eng-leder .product__info-container > .eng-tag, body.eng-leder .product__info-container > .eng-bnf { margin-bottom: 6px !important; } /* Pflichthinweis nach PAngV ("inkl. MwSt., zzgl. 4,99 € Versand"). Markup aus snippets/engori-ab-preis.liquid. Bleibt sichtbar und lesbar — hier wird nur die Groesse von 13 px auf rem gestellt, damit sie mitwaechst. */ body.eng-leder .eng-ab { font-size: 1.24rem; color: var(--eng-ld-ink-faint); } body.eng-leder .eng-ab__teil::before { background: var(--eng-ld-line-stark); } /* Der Abstand zwischen den Bausteinen der Kaufbox: gleichmaessig und groesser als im Bestand. */ body.eng-leder .product__info-container > * + * { margin-top: 1.8rem; } /* ── 5 Farbauswahl ────────────────────────────────────────────────────────── Ohne engori-staffel greift die Swatch-Politur aus engori-premium.css nicht (sie haengt komplett an `.eng-stf__picker`). Die Kugeln kommen deshalb hier aus dem Theme-Grundzustand und werden eigenstaendig gesetzt. */ /* GEMESSEN 30.09.2026 bei 200 % Browserschrift: blieb auf 15 px stehen. Ursache ist `.product-form__input .form__label, .product-form__input legend { font-size: 15px !important }` in base.css (Shrine), zusaetzlich noch einmal inline im Kopf. Deshalb hier derselbe Grad in rem mit !important. 15 / 10,5 = 1,43rem. */ body.eng-leder .product-form__input .form__label, body.eng-leder .product-form__input legend { display: block; margin-bottom: 0.9rem; font-size: 1.43rem !important; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--eng-ld-ink-soft); } /* Swatch-Groesse. Werner am 03.10.2026: "Swatches groesser". Die groesste Stufe des Themes (extra-large) liegt bei 7rem; die Leder-Produkte haben nur eine bzw. zwei Farben, die Spalte ist 476 px breit — zwei Kacheln zu 11rem plus Luecke brauchen rund 250 px, es ist also reichlich Platz. Gemessen vorher: 68 px. */ /* Swatch-Groesse. Werner am 03.10.2026: "Swatches groesser". Gemessen vorher: 53 px. Die Theme-Stufe extra-large gibt 7rem, meine Variable 11rem kam am Bild nicht an — die Breite entsteht an .color-swatch__image und wurde von der Kaskade ueberstimmt. Deshalb hier direkt gesetzt statt ueber die Variable, das ist eindeutig. Die Leder-Produkte haben eine bzw. zwei Farben, die Spalte ist 476 px breit: zwei Kacheln zu 112 px plus Luecke brauchen 238 px. Platz genug. */ body.eng-leder .color-swatches-container { display: flex; flex-wrap: wrap; gap: 16px; --swatch-size: 112px; } body.eng-leder .color-swatches-container .color-swatch, body.eng-leder .color-swatches-container .color-swatch__image { width: 112px; height: 112px; } body.eng-leder .color-swatches-container .color-swatch img { width: 100%; height: 100%; object-fit: cover; } /* Rand der NICHT gewaehlten Farbe. Gemessen am Live-Shop 03.10.2026, nachdem Werner meldete "Swatches kann ich nicht sehen": die Buehne im Swatch-Bild ist rgb(233,226,223), der Seitengrund rgb(246,242,234) — die Scheibe hob sich mit 1,15:1 ab, ihr Rand mit 1,67:1. Beides unsichtbar. Alpha 0,24 auf 0,55 und 1 px auf 2 px: Rand jetzt 3,85:1 gegen die Seite, 3,36:1 gegen die Buehne. Die vorherige Regel ist ERSETZT, nicht ueberschrieben — keine zweite Schicht. */ body.eng-leder .color-swatches-container .color-swatch__image { border-radius: 999px; border: 2px solid rgba(25, 23, 20, 0.55); box-shadow: none; transition: border-color var(--eng-ld-t), box-shadow var(--eng-ld-t); } /* Die gewaehlte Farbe: ein Messingring mit Luft dazwischen. Kein Haken, kein Rahmen in Signalfarbe. */ body.eng-leder .color-swatches-container .color-swatch:has(input:checked) .color-swatch__image { border-color: var(--eng-ld-akzent); box-shadow: 0 0 0 2px var(--eng-ld-bg), 0 0 0 3px var(--eng-ld-akzent); } body.eng-leder .color-swatches-container .color-swatch:has(input:focus-visible) .color-swatch__image { outline: 2px solid var(--eng-ld-akzent-ink); outline-offset: 3px; } @media (hover: hover) { body.eng-leder .color-swatches-container .color-swatch:hover .color-swatch__image { border-color: var(--eng-ld-akzent-line); } } body.eng-leder .color-swatch__label { font-size: 1.15rem; line-height: 1.3; } /* Klarschrift-Auswahl (Dropdown) als Rueckfall, falls die Vorlage einmal auf `dropdowns` gestellt wird. */ body.eng-leder .select__select { font-size: 1.5rem; background: var(--eng-ld-surface); color: var(--eng-ld-ink); border: 1px solid var(--eng-ld-line-stark); border-radius: var(--eng-ld-r); } /* ── 6 Kaufknopf und Zahlarten ────────────────────────────────────────────── Messingflaeche mit dunkler Schrift (6,75:1). Weisse Schrift auf Messing waere 2,40:1 und damit unter der Grenze. ⚠️ GEMESSEN AM STORE, 30.09.2026 — die Falle an diesem Knopf: Die sichtbare Farbe kommt NICHT aus `background-color` des Knopfes, sondern aus `.button::after` (assets/base.css Zeile 1961 ff.: content "", position absolute, inset = Rahmenbreite, z-index 1). Wer nur den Knopf einfaerbt, misst mit getComputedStyle die richtige Farbe und sieht trotzdem weiter Markenrot — der Fehler, der diese Sitzung eine Runde gekostet hat. Belegt durch eine Probe: `::after` testweise auf Gruen gesetzt, der ganze Knopf wurde gruen. Also IMMER `::after` mitfaerben. `::before` traegt die Hover-Fuellung. */ body.eng-leder .product-form__submit.button, body.eng-leder .atc-button { background: var(--eng-ld-akzent) !important; border-color: var(--eng-ld-akzent) !important; /* 01.10.2026: Bei Messing #C9A15E trug Weiss nur 2,40:1, deshalb stand hier dunkle Schrift. Auf dem Shoprot traegt Weiss deutlich mehr, also dreht sie mit der Farbe mit. 03.10.2026 nachgemessen, nachdem das Shoprot vom Pink #C42350 auf das Logo-Rot #982840 gewechselt ist: Weiss auf #982840 7,74:1 (vorher 5,67:1), auf dem Hover-Ton #A91C44 7,15:1. Dunkle Schrift waere auf beiden der schlechtere Wert. */ color: #FFFFFF !important; border-radius: var(--eng-ld-r) !important; font-size: 1.55rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: none !important; min-height: 54px; box-shadow: none !important; } body.eng-leder .product-form__submit.button::after, body.eng-leder .atc-button::after { background: var(--eng-ld-akzent) !important; background-image: none !important; border-radius: var(--eng-ld-r) !important; /* Der pulsierende Ring in Markenrot sitzt als box-shadow an genau diesem Pseudoelement (gemessen 30.09.2026: `rgba(255,255,255,0) 0 0 0 2.3px, rgb(152,40,64) 0 0 0 …`). Er ist Teil der Aufmerksamkeitssprache des Bestands und hat auf dieser Linie nichts zu suchen. */ box-shadow: none !important; animation: none !important; } body.eng-leder .product-form__submit.button::before, body.eng-leder .atc-button::before { background: var(--eng-ld-akzent-hover) !important; background-image: none !important; border-radius: var(--eng-ld-r) !important; /* Auch hier haengt ein Schlagschatten in Markenrot dran (gemessen 30.09.2026). Er wird nur beim Ueberfahren sichtbar. */ box-shadow: none !important; } @media (hover: hover) { body.eng-leder .product-form__submit.button:hover:not([disabled])::after, body.eng-leder .atc-button:hover:not([disabled])::after { background: var(--eng-ld-akzent-hover) !important; } body.eng-leder .product-form__submit.button:hover:not([disabled]), body.eng-leder .atc-button:hover:not([disabled]) { filter: none; transform: none; } } body.eng-leder .product-form__submit[disabled], body.eng-leder .product-form__submit[disabled]::after { background: transparent !important; color: var(--eng-ld-ink-soft) !important; } body.eng-leder .product-form__submit[disabled] { border: 1px solid var(--eng-ld-line-stark) !important; } /* Der Glanzstreifen des Bestands (assets/engori-atc-sheen.js haengt ein Element `.eng-sheen-el` in den Knopf) gehoert zur Rabattsprache und bleibt auf dieser Linie aus. */ body.eng-leder .eng-sheen-el { display: none !important; } body.eng-leder .payment-badges, body.eng-leder .eng-express { margin-top: 1.2rem; } /* ── 7 Aufklappzeilen ─────────────────────────────────────────────────────── Farben stehen als Einstellungen in der Vorlage (closed_state_*/open_state_*), damit sie im Theme-Editor sichtbar bleiben. Hier nur Typografie und Kanten. */ body.eng-leder .collapsible-row summary, body.eng-leder .collapsible-row__heading { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.01em; } body.eng-leder .collapsible-row .rte p, body.eng-leder .collapsible-row .rte li { font-size: 1.45rem; line-height: 1.65; color: var(--eng-ld-ink-soft); } body.eng-leder .collapsible-row .rte h4 { font-size: 1.5rem; margin: 0 0 0.6rem; color: var(--eng-ld-ink); } body.eng-leder .collapsible-row .rte strong { color: var(--eng-ld-ink); font-weight: 600; } /* Produktbeschreibung. Der Text steht bewusst NUR hier und nicht zusaetzlich in Aufklappzeilen: gepflegt wird er im Admin, die Seite zeigt genau das. Die Erzaehlbahnen weiter unten wiederholen ihn nicht, sie verdichten. */ body.eng-leder .product__description.rte { font-size: 1.5rem; line-height: 1.7; color: var(--eng-ld-ink-soft); max-width: 40em; } body.eng-leder .product__description.rte h3 { margin: 1.8rem 0 0.5rem; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--eng-ld-akzent-ink); } body.eng-leder .product__description.rte h3:first-child { margin-top: 0; } body.eng-leder .product__description.rte strong { color: var(--eng-ld-ink); font-weight: 600; } body.eng-leder .product__description.rte ul { padding-left: 1.4em; } body.eng-leder .product__description.rte li { margin-bottom: 0.4rem; } /* ── 8 Bildgalerie ───────────────────────────────────────────────────────── Gross und ruhig: quadratisch, weiche Ecken, keine Rahmen, kein Zoomglas. Das Bild traegt die Seite. */ body.eng-leder .product__media-wrapper .product__media, body.eng-leder .product__media-item .product__media { border-radius: var(--eng-ld-r-gross); overflow: hidden; background: var(--eng-ld-bg-step); } body.eng-leder .thumbnail-list .thumbnail { border-radius: var(--eng-ld-r); border: 1px solid transparent; transition: border-color var(--eng-ld-t), opacity var(--eng-ld-t); opacity: 0.6; } body.eng-leder .thumbnail-list .thumbnail[aria-current='true'], body.eng-leder .thumbnail-list .thumbnail:focus-visible { border-color: var(--eng-ld-akzent); opacity: 1; } @media (hover: hover) { body.eng-leder .thumbnail-list .thumbnail:hover { opacity: 1; } } /* Platzhalter, solange keine Produktbilder gepflegt sind. Ohne diese Regel steht ein weisses Shopify-Platzhaltersymbol auf dunklem Grund. */ body.eng-leder .product__media .placeholder-svg { background: var(--eng-ld-bg-step); fill: var(--eng-ld-line-stark); } /* ── 9 Erzaehlbahnen und Papierbahn ──────────────────────────────────────── Die Bahnen sind ENGORI Bild-Showcase-Sections (sections/ engori-feature-showcase.liquid): drei im Bild-Text-Modus (`engori-bt*`) und eine als Kartenreihe (`engori-showcase__card`). Farben erben sie aus Abschnitt 2, den Ueberschriftengrad aus dem rem-`--eng-h2` dort. ⚠️ Die Section setzt ihre Schriftgroessen als feste px mit `!important` (12px Kicker, 13px Bildunterschrift, 15/16px Fliesstext). Das ist die F94-Falle. Die Regeln hier stellen sie auf rem; sie gewinnen ueber Spezifitaet (body.eng-leder + #MainContent) UND ueber `!important`. */ body.eng-leder #MainContent .engori-showcase .engori-showcase__heading, body.eng-leder #MainContent .engori-showcase .engori-bt__titel { font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; color: var(--eng-ld-ink); } body.eng-leder #MainContent .engori-showcase .engori-showcase__heading { max-width: 24em; margin-left: auto; margin-right: auto; } body.eng-leder #MainContent .engori-showcase .engori-bt__kicker { margin: 0 0 10px; font-size: 1.15rem !important; line-height: 1.3; letter-spacing: 0.16em; font-weight: 600; text-transform: uppercase; color: var(--eng-ld-akzent-ink); } body.eng-leder #MainContent .engori-showcase .engori-bt__rte, body.eng-leder #MainContent .engori-showcase .engori-bt__rte p { font-size: 1.55rem; line-height: 1.7; color: var(--eng-ld-ink-soft); } body.eng-leder #MainContent .engori-showcase .engori-bt__rte { max-width: 34em; } body.eng-leder #MainContent .engori-showcase .engori-bt__rte strong { color: var(--eng-ld-ink); font-weight: 600; } /* Bilder: keine Akzentkante, weichere Ecken, warmer Grund unter dem Bild. */ /* 13.10.2026, Werner: „schau noch mal bitte nach der bildumrandung bei den bildern wie in den anderen produktseiten, bei der LeatherSling auch". Gemessen am selben Tag: SportFit traegt an .engori-showcase__card `1px solid rgba(152, 40, 64, 0.18)`, die beiden Leder-Seiten standen hier auf `border: 0`. Die Kante kommt zurueck, in der Linienfarbe der Leder-Welt (--eng-ld-line), damit sie in der hellen UND der dunklen Fassung traegt. Vorher stand hier: border: 0; */ body.eng-leder #MainContent .engori-showcase .engori-bt__bild, body.eng-leder #MainContent .engori-showcase .engori-showcase__card { border: 1px solid var(--eng-ld-line); border-radius: var(--eng-ld-r-gross); background: var(--eng-ld-bg-step); box-shadow: none; } /* 05.10.2026, Werner: „dann die Lederseiten dementsprechend angleichen". Bis hierher stand oben `box-shadow: none`, die Leder-Seiten waren damit die einzigen ohne Bildschatten — gemessen am 05.10.2026: 0 von 22 Bild-Text-Bildern auf LeatherSling und OfficeBag trugen einen, auf den drei Oxford-Seiten alle 14. Jetzt derselbe dezente Wert wie ueberall, gepflegt an einer Stelle in `engori-premium.css` (--eng-bt-bild-schatten, identisch mit dem Kartenschatten). Die Laufband-Karten (.engori-showcase__card) bleiben ohne Schatten, wie auf den uebrigen Seiten auch. */ body.eng-leder #MainContent .engori-showcase .engori-bt__bild { box-shadow: var(--eng-bt-bild-schatten); } @media screen and (max-width: 749px) { body.eng-leder #MainContent .engori-showcase .engori-bt__bild { box-shadow: var(--eng-bt-bild-schatten-klein); } } body.eng-leder #MainContent .engori-showcase .engori-showcase__caption { font-size: 1.24rem !important; line-height: 1.45; letter-spacing: 0.02em; font-weight: 500; color: var(--eng-ld-ink-faint); } /* Mehr Luft zwischen Bild und Text als im Bestand (20px / 48px). Ruhe entsteht hier mehr durch Abstand als durch Farbe. */ body.eng-leder #MainContent .engori-showcase .engori-bt { gap: var(--eng-ld-luft); } @media screen and (min-width: 750px) { body.eng-leder #MainContent .engori-showcase .engori-bt { gap: var(--eng-ld-luft-gross); align-items: center; } } body.eng-leder #MainContent .engori-showcase .engori-showcase__link { color: var(--eng-ld-akzent-ink); font-size: 1.45rem; } /* ── Die helle, warme Papierbahn ──────────────────────────────────────────── Eine Bahn, nicht mehr — sonst zerfaellt die Seite in Streifen. Getragen von der Materialerzaehlung (Section-Schluessel `leder_material` in templates/product.engori-leder.json). Warum ein Attributselektor und keine Klasse: JSON-Vorlagen koennen einer einzelnen Section-Instanz keine Klasse mitgeben. Shopify rendert die Section aber als `id="shopify-section-template--__leder_material"`. Der Theme-Teil der ID wechselt mit jedem Theme, der Schluessel dahinter nicht — `[id$="__leder_material"]` ist damit der stabile Griff. Wird der Section-Schluessel in der Vorlage umbenannt, muss er hier mit. */ body.eng-leder #MainContent [id$='__leder_material'] { background: var(--eng-ld-papier); color: var(--eng-ld-papier-ink); --eng-ink: var(--eng-ld-papier-ink); --eng-ink-soft: var(--eng-ld-papier-soft); --eng-ink-faint: var(--eng-ld-papier-soft); --eng-bg: var(--eng-ld-papier); --eng-bg-step: var(--eng-ld-papier-step); --eng-surface: var(--eng-ld-papier-step); --eng-line: rgba(42, 36, 32, 0.16); --eng-accent: var(--eng-ld-papier-akzent); --eng-accent-text: var(--eng-ld-papier-akzent); --eng-accent-icon: var(--eng-ld-papier-akzent); --eng-accent-wash: rgba(122, 90, 34, 0.12); } body.eng-leder #MainContent [id$='__leder_material'] .engori-bt__titel, body.eng-leder #MainContent [id$='__leder_material'] .engori-showcase__heading { color: var(--eng-ld-papier-ink); } body.eng-leder #MainContent [id$='__leder_material'] .engori-bt__rte, body.eng-leder #MainContent [id$='__leder_material'] .engori-bt__rte p { color: var(--eng-ld-papier-soft); } body.eng-leder #MainContent [id$='__leder_material'] .engori-bt__rte strong { color: var(--eng-ld-papier-ink); } body.eng-leder #MainContent [id$='__leder_material'] .engori-bt__kicker, body.eng-leder #MainContent [id$='__leder_material'] .engori-showcase__caption, body.eng-leder #MainContent [id$='__leder_material'] .engori-showcase__link { color: var(--eng-ld-papier-akzent); } body.eng-leder #MainContent [id$='__leder_material'] .engori-bt__bild, body.eng-leder #MainContent [id$='__leder_material'] .engori-showcase__card { background: var(--eng-ld-papier-step); } /* ── 10 Trust-Karten ─────────────────────────────────────────────────────── Erben die Palette aus Abschnitt 2. Hier nur Kante und Schriftgroesse; die festen px-Groessen der Section werden auf rem gestellt. */ body.eng-leder #MainContent .engori-trust__card { border: 1px solid var(--eng-ld-line); border-radius: var(--eng-ld-r); background: var(--eng-ld-surface); box-shadow: none; } /* Die Section setzt 16px / 14px mit `!important` (F94). Hier derselbe Grad in rem: 16 / 10,5 = 1,52rem · 14 / 10,5 = 1,33rem. */ body.eng-leder #MainContent .engori-trust__title { font-size: 1.52rem !important; font-weight: 600; color: var(--eng-ld-ink); } body.eng-leder #MainContent .engori-trust__text { font-size: 1.33rem !important; line-height: 1.6; color: var(--eng-ld-ink-soft); } /* Die Vorteilskacheln aus snippets/engori-benefits.liquid (Modus 'trust'). engori-premium.css deckelt `.eng-bnf__title` mit `clamp(..., 11.2cqi, ...)` — Ober- und Untergrenze stehen dort in rem, die Groesse waechst also mit der Browserschrift. Hier wird nur die Farbe gesetzt. */ body.eng-leder .eng-bnf__item { border-color: var(--eng-ld-line); background: var(--eng-ld-surface); } body.eng-leder .eng-bnf__icon { background: var(--eng-ld-akzent-wash); color: var(--eng-ld-akzent-ink); } /* ── 11 Kollektionsseite ─────────────────────────────────────────────────── templates/collection.leder.json. Gleiche Bildsprache: grosse Bilder, viel Luft. ⚠️ GEAENDERT 07.10.2026. Hier stand vorher „kein Angebotsabzeichen auf der Karte", und `.eng-kang__abzeichen` sowie `.eng-kang__zeile` waren per `display:none !important` abgeschaltet. Werner hat das an diesem Tag ausdruecklich umgedreht: „dass ersichtlich ist, dass man bei einem Kauf von zwei Taschen viel weniger bezahlt. Das soll ein bisschen hervorgehoben sein bei beiden Katalogen." Die Ausblendung ist deshalb aufgehoben. Gleichzeitig wurden die beiden Leder-Vorlagen in die Weissliste von snippets/engori-karten-angebot.liquid aufgenommen, das Abzeichen wird also jetzt wirklich gerendert. Gedeckt ist die Aussage durch den automatischen Rabatt „Zweite Tasche geschenkt" (ID 2218524016984, ACTIVE, ohne Enddatum), der beide Leder-Produkte in customerBuys und customerGets fuehrt. Am 07.10.2026 am Katalog gemessen: „Bei 2 Taschen: je 69,50 €" (von 139) und „je 149,50 €" (von 299). Das Abzeichen blendet weiterhin aus, solange die Hover-Buehne laeuft — diese Regel steht in engori-premium.css Zeile 6371 und bleibt unberuehrt. */ body.eng-leder #MainContent .collection .card__inner, body.eng-leder #MainContent .card__inner { border-radius: var(--eng-ld-r-gross); background: var(--eng-ld-bg-step); } body.eng-leder #MainContent .card__content .card__heading, body.eng-leder #MainContent .card__content .card__heading a { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.005em; color: var(--eng-ld-ink); } body.eng-leder #MainContent .card__information .price-item { color: var(--eng-ld-ink) !important; font-weight: 500; } body.eng-leder #MainContent .eng-kpf { font-size: 1.2rem; color: var(--eng-ld-ink-faint); } body.eng-leder #MainContent .eng-kang__abzeichen { /* In der Lederwelt etwas ruhiger als im Oxford-Katalog: gleiche Lage und Groesse, aber die gedeckte Lederschrift statt des harten Weiss. */ color: var(--eng-ld-bg-step); } /* ── Hartkodiertes Markenrot, das die Marken-Ueberdeckung nicht erreicht ──── GEMESSEN 30.09.2026 auf der Kollektionsseite: drei Stellen tragen den Farbwert 152,40,64 direkt im Stylesheet statt ueber `--eng-accent`. Eine Ueberdeckung der Marke greift dort nicht — sie muessen einzeln ersetzt werden. Wer spaeter weitere findet: derselbe Weg, und den Fundort dazuschreiben. 1. Die Hover-Buehne der Produktkarte (engori-premium.css Zeile 5622 und 5637): radialer Schein und Lichtkante in Markenrot. */ body.eng-leder #MainContent .eng-kb__buehne { background: radial-gradient( ellipse 64% 42% at 50% calc(100% - var(--eng-kb-sl) * 1% - 16%), rgba(201, 161, 94, 0.30) 0%, rgba(201, 161, 94, 0.12) 45%, rgba(201, 161, 94, 0) 75% ), linear-gradient(180deg, #2C2724 0%, #262220 58%, #1C1917 100%) !important; } body.eng-leder #MainContent .eng-kb__buehne::after { background: linear-gradient( 90deg, transparent, rgba(201, 161, 94, 0.32) 50%, transparent ) !important; } /* 2. Der Icon-Kreis der Vorteilskacheln (sections/engori-benefits-home.liquid Zeile 112–113). Die Schriftfarbe darin kommt schon aus `--eng-accent-icon` und ist damit versorgt; nur Flaeche und Innenring stehen fest. */ body.eng-leder #MainContent .eng-bh__icon { background: var(--eng-ld-akzent-wash) !important; box-shadow: inset 0 0 0 1px var(--eng-ld-akzent-line) !important; } body.eng-leder #MainContent .collection-hero__title, body.eng-leder #MainContent .collection__title .title { font-weight: 600; letter-spacing: -0.005em; } body.eng-leder #MainContent .collection-hero__description, body.eng-leder #MainContent .collection__description { font-size: 1.55rem; line-height: 1.7; max-width: 34em; color: var(--eng-ld-ink-soft); } /* Mehr Luft zwischen den Karten als im Bestandskatalog. */ body.eng-leder #MainContent .product-grid { row-gap: var(--eng-ld-luft); } /* ── 12 Bewegung reduziert ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.eng-leder #MainContent * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ───────────────────────────────────────────────────────────────────────── Pflichtangaben nach Artikel 19 GPSR und Artikel 50 KI-VO Angelegt 02.10.2026. Gehoert zu sections/engori-produkt-pflichtangaben.liquid. Die Farben kommen aus den Theme-Variablen, damit der Block in beiden Farbwelten traegt. Keine harten Werte — genau der Fehler, der am 30.09. im Footer passiert ist. ───────────────────────────────────────────────────────────────────────── */ .engori-pflicht { padding: 32px 0 40px; background: var(--eng-bg-step); color: var(--eng-ink); } .engori-pflicht__innen { max-width: 76rem; margin: 0 auto; padding: 0 2rem; } .engori-pflicht__titel { font-size: 1.9rem; margin: 0 0 1.4rem; color: var(--eng-ink); } /* Die Selbstsperre. Sie muss auffallen, auch wenn jemand nur ueberfliegt. */ .engori-pflicht__sperre { display: block; margin: 0 0 1.8rem; padding: 1.2rem 1.4rem; border: 2px solid var(--eng-accent); border-radius: var(--eng-r-sm); background: var(--eng-accent-wash); color: var(--eng-ink); font-size: 1.45rem; line-height: 1.5; } .engori-pflicht__sperre-wo { display: block; margin-top: .5rem; color: var(--eng-ink-soft); font-size: 1.3rem; } .engori-pflicht__liste { margin: 0; } /* Zwei Spalten ab Tablet, darunter untereinander. `dt` traegt die Bezeichnung, `dd` den Inhalt; die Semantik bleibt eine Beschreibungsliste, damit ein Screenreader Paare vorliest statt Fliesstext. */ .engori-pflicht__zeile { display: grid; grid-template-columns: 1fr; gap: .3rem 2rem; padding: 1.1rem 0; border-top: 1px solid var(--eng-line); } .engori-pflicht__zeile dt { font-weight: 600; color: var(--eng-ink); font-size: 1.45rem; } .engori-pflicht__zeile dd { margin: 0; color: var(--eng-ink-soft); font-size: 1.45rem; line-height: 1.6; } .engori-pflicht__zeile dd a { color: var(--eng-ink); } @media screen and (min-width: 750px) { .engori-pflicht__zeile { grid-template-columns: 22rem 1fr; } } /* ====================================================================== LEDER-DUO — beide Taschen zusammen, 20 Prozent guenstiger. Werner am 03.10.2026: "ein Buendel. Mit beiden Taschen". Steht als eigene Sektion unter der Kaufbox, Markup in snippets/engori-leder-buendel.liquid. ====================================================================== */ body.eng-leder .eng-ldb { max-width: 78rem; margin: 0 auto; padding: 4.8rem 2rem 5.2rem; text-align: center; background: var(--eng-ld-surface); border: 1px solid var(--eng-ld-line); border-radius: var(--eng-ld-r-gross); /* 22px, Grad grosser Flaechen */ } body.eng-leder .eng-ldb__titel { margin: 0 0 0.6rem; font-size: 2.6rem; letter-spacing: 0.01em; color: var(--eng-ld-ink); } body.eng-leder .eng-ldb__unter { margin: 0 0 2.8rem; font-size: 1.5rem; color: var(--eng-ld-ink-soft); } body.eng-leder .eng-ldb__reihe { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; } body.eng-leder .eng-ldb__teil { margin: 0; flex: 0 1 21rem; } body.eng-leder .eng-ldb__teil img { width: 100%; height: auto; border-radius: var(--eng-ld-r); /* 14px, Grad kleiner Bildkacheln */ border: 1px solid var(--eng-ld-line); background: var(--eng-ld-bg); } body.eng-leder .eng-ldb__teil figcaption { margin-top: 0.9rem; font-size: 1.4rem; color: var(--eng-ld-ink); } body.eng-leder .eng-ldb__teil figcaption span { display: block; color: var(--eng-ld-ink-soft); } body.eng-leder .eng-ldb__plus { font-size: 2.8rem; line-height: 1; /* 03.10.2026: Hier stand --eng-ld-akzent, also die FLAECHENfarbe, als Schriftfarbe. Im Dunkeln trug das Pink dort 2,86:1, das neue Logo-Rot waere auf 2,09:1 gefallen (selbst nachgerechnet). Richtig ist die Schriftrolle --eng-ld-akzent-ink: #EC8FA6 auf dem dunklen Grund 6,98:1, #9B1B3E auf Creme 7,18:1. Sie dreht mit der Farbwelt mit — ein fester Aufhellton wie #D25570 (4,07:1 dunkel) waere auf Creme nur 3,57:1. */ color: var(--eng-ld-akzent-ink); } body.eng-leder .eng-ldb__preis { margin: 2.6rem 0 0; font-size: 1.6rem; color: var(--eng-ld-ink-soft); } body.eng-leder .eng-ldb__preis s { margin-right: 0.9rem; } body.eng-leder .eng-ldb__preis strong { font-size: 2.8rem; color: var(--eng-ld-akzent-ink); } body.eng-leder .eng-ldb__spar { display: block; margin-top: 0.5rem; font-size: 1.4rem; font-weight: 600; color: var(--eng-ld-akzent-ink); } body.eng-leder .eng-ldb__form { margin: 2.4rem 0 0; } body.eng-leder .eng-ldb__cta { min-width: 30rem; padding: 1.5rem 3rem; font-size: 1.6rem; font-weight: 600; color: #fff; background: var(--eng-ld-akzent); border: 0; border-radius: var(--eng-r-md); /* 12px, wie der rote Kaufknopf */ cursor: pointer; transition: background var(--eng-ld-t); } body.eng-leder .eng-ldb__cta:hover { background: var(--eng-ld-akzent-hover); } body.eng-leder .eng-ldb__hinweis { margin: 1.2rem 0 0; font-size: 1.3rem; color: var(--eng-ld-ink-soft); } @media screen and (max-width: 749px) { body.eng-leder .eng-ldb { padding: 3.6rem 1.6rem 4rem; border-radius: var(--eng-ld-r); } body.eng-leder .eng-ldb__teil { flex: 0 1 14rem; } body.eng-leder .eng-ldb__cta { min-width: 0; width: 100%; } } /* ====================================================================== PRODUKT-AUFKLAPPZEILEN (.product__accordion, Bauteil accordion-v2) NICHT dasselbe wie .collapsible-row: davon steht auf den Leder-Seiten kein einziges Element im Dokument (gemessen 03.10.2026, 0 Treffer). Gemessen am Live-Theme 199007404376 am 03.10.2026 bei 1280x900 und 375x812, beide Leder-Seiten gleich: Die Vorlage setzt --header-bg und --content-bg auf #23201D, also eine volle dunkle Flaeche. base.css Zeile 15622 traegt sie auf .accordion__details auf, vergibt im ganzen accordion-v2-Satz aber KEINEN Radius. Mit margin 0 aus der Section stehen die drei Kaesten buendig uebereinander: ein Block von 369 x 159 px mit zwoelf scharfen Ecken, zwischen den Vorteilskacheln (12px) und der Leder-Duo-Karte. Auf den Oxford-Seiten faellt das nicht auf, dort traegt dasselbe Bauteil accordion-v2--colors-theme mit --header-bg: transparent, also gar keine Flaeche. Werner am 03.10.2026: "ecken nicht gerundet". NACHTRAG 03.10.2026, Werner: "die sind jetzt quasi komplett schwarz. Das soll bitte in der hellen Farbe sein." Ursache war nicht diese Datei, sondern `enable_custom_style: true` samt harter dunkler Hexwerte in den beiden Leder-Vorlagen. Dort steht jetzt `false`, wie auf den Oxford-Seiten — damit traegt das Bauteil wieder das Farbschema der Sektion und folgt beiden Farbwelten von allein. Der Radius unten bleibt. Kein :first-child und kein :nth-child: zwischen den drei Wrappern stehen style-Elemente, Geschwister-Selektoren greifen dort nicht. Jede Zeile wird deshalb eine eigene Karte. ====================================================================== */ body.eng-leder .product__info-container .product__accordion.accordion-v2 { border-radius: var(--eng-ld-r); overflow: hidden; margin-bottom: 6px; } body.eng-leder .product__info-container .product__accordion.accordion-v2[data-border-type='bottom'] { border-bottom: 0; } /* ====================================================================== LINKS IN DEN AUFKLAPPZEILEN (03.10.2026, am selben Tag nachgezogen) Erste Fassung: Die Links ("Rueckerstattungsbedingungen", "Versandbedingungen") erbten die Ink-Rolle, rgba(25,23,20,.85) auf der dunklen Flaeche #23201D ergab 1,1:1 — unsichtbar. Sie bekamen deshalb den festen hellen Ton #F2EBE0. Diese Regel ERSETZT jene Fassung, sie haengt nicht daneben. Grund: Die Flaeche ist seit heute nicht mehr dunkel. Mit `enable_custom_style: false` in beiden Leder-Vorlagen folgt der Aufklapper dem Farbschema der Sektion, in der hellen Welt also Creme. Ein fester heller Linkton waere dort genau derselbe Fehler mit umgedrehtem Vorzeichen. Die Links tragen deshalb die Akzent-SCHRIFTrolle, die mit der Farbwelt mitdreht. Selbst nachgerechnet 03.10.2026: hell: #9B1B3E auf Creme #F6F2EA 7,18:1 dunkel: #EC8FA6 auf #23201D 6,98:1 Unterstrichen bleiben sie, damit sie nicht allein ueber die Farbe erkennbar sind (WCAG 1.4.1). ====================================================================== */ body.eng-leder .product__accordion .accordion__content__inner a, body.eng-leder .product__accordion .accordion__content a { /* eng-ld-akkordeon-links */ color: var(--eng-ld-akzent-ink); text-decoration: underline; text-underline-offset: 2px; } body.eng-leder .product__accordion .accordion__content__inner a:hover, body.eng-leder .product__accordion .accordion__content a:hover { color: var(--eng-ld-ink); } /* ========================================================================== WERNERS 19 PUNKTE ZUR LEATHERSLING-SEITE — 03.10.2026 Alles, was sich nicht in der Vorlage einstellen liess, steht hier. Jede Regel nennt den Punkt, auf den sie antwortet. Schriftgroessen wie im ganzen Blatt in rem (Wurzel 10,5 px, 1rem = 10,5 px). ========================================================================== */ /* ── D3 "ENGORI Leder · Vollnarbenleder" ─────────────────────────────────── Werner: "darf ruhig irgendwo stehen, aber nicht ganz oben. Wir brauchen den Platz. Unter dem Preis quasi. Das darf noch enger zusammen." Die Zeile steht jetzt in der Vorlage direkt hinter dem Preis-Block (block_order). Hier nur noch der Abstand: sie soll am Preis haengen, nicht als eigener Absatz dastehen. Vorher 0 0 0.6rem, als erste Zeile der Spalte. Der Preis-Block hat margin_bottom 0, der Abstand kommt also allein von hier. ------------------------------------------------------------------------ */ body.eng-leder .eng-ld-kicker { margin: 0.2rem 0 0.4rem; } /* ── D4 Der Stueckpreis im Buendel ───────────────────────────────────────── Werner: "Die 79,20, die duerfen etwas groesser. Das darf ruhig erkannt werden, dass man die auch fuer 79,20 kaufen koennte, wenn man den Bundle nimmt." Der Betrag steht in innerhalb von .eng-stf__je-end (snippets/engori-staffel.liquid). engori-premium.css setzt ihn auf 22px, unter 400px auf 20px. Diese Datei laedt spaeter und nur auf Leder-Vorlagen, die Oxford-Seiten bleiben unberuehrt. 22px / 10,5 = 2,10rem -> 2,55rem = 26,8px (+22 Prozent) 20px / 10,5 = 1,90rem -> 2,35rem = 24,7px auf dem schmalen Handy ------------------------------------------------------------------------ */ body.eng-leder .eng-stf__je-wert { font-size: 2.55rem; font-weight: 700; } @media (max-width: 400px) { body.eng-leder .eng-stf__je-wert { font-size: 2.35rem; } } /* ── D13 Das Trage-Foto: Gesicht bleibt im Bild ──────────────────────────── Werner: "Wir haben ein Bild, wo sie die Tasche traegt. Dieses Bild auch immer so darstellen, dass das Gesicht immer mit auf dem Foto ist und gerne bleiben auf 1 zu 1." Die Showcase-Sektion zeigt ihr Bild fest in aspect-ratio 1 mit object-fit cover (sections/engori-feature-showcase.liquid). Die Vorlage bekommt jetzt 78e0ef6d-…_00001.jpg, 1536x2752 (Verhaeltnis 0,558). Bei der Vorgabe object-position center (50% 50%) faellt der Kopf aus dem Quadrat. Gemessen 03.10.2026 an Ausschnitten bei 0, 10, 20, 30 und 50 Prozent: bei 20 Prozent sind Gesicht UND Tasche vollstaendig im Quadrat. Rechenweg: sichtbar ist ein Band von 1536 px Hoehe aus 2752 px, der Versatz von oben ist (2752 - 1536) x 0,20 = 243 px. ------------------------------------------------------------------------ */ body.eng-leder #MainContent [id$='__leder_tragen'] .engori-bt__bild img { object-position: 50% 20%; } /* ── D8 Das Foto in der Mitte von "Was die LeatherSling ausmacht" ────────── Werner: "Da muss ein vernuenftiges Foto in die Mitte rein. Ein gut aussehendes Foto." Gemessen 03.10.2026: Die mittlere Spalte trug NUR einen Video-Block mit "disabled": true, und zwar mit der Videodatei der Oxford-Weekender-Seite. Die Spalte blieb damit leer. Sie bekommt in der Vorlage einen Bildblock mit df322b7d-…_00001.jpg (Mann traegt die LeatherSling, Altstadt). blocks/image.liquid setzt --ratio-percent aus dem Seitenverhaeltnis der Datei, hier 9:16 = 179 Prozent — das waere eine Saeule neben zwei kurzen Textspalten. Deshalb hier auf 1 zu 1, wie das Trage-Foto in D13. Das inline gesetzte --ratio-percent wird nur mit !important ueberstimmt. Ausschnitt bei 10 Prozent gemessen: Gesicht und Tasche vollstaendig im Bild. ------------------------------------------------------------------------ */ body.eng-leder #MainContent [id$='__leder_custom_columns_new'] .product-info__image-block .media.ratio { --ratio-percent: 100% !important; border-radius: var(--eng-ld-r-gross); } body.eng-leder #MainContent [id$='__leder_custom_columns_new'] .product-info__image-block .media > img { object-position: 50% 10%; } /* ── D11/D19 Sektionen ohne eigenes Bild ─────────────────────────────────── Werner: "Keine doppelten Bilder. Sonst muessen die Sektionen raus." Fuenf der zehn Materialsektionen zeigten ein Bild, das auf derselben Seite schon woanders stand (viermal bahn-sling-leder.jpg, dazu je eine Dublette von bahn-sling-vorn.jpg und bahn-sling-innen.jpg). Die Dubletten sind in der Vorlage entfernt. Ein eigenes, passendes Motiv gibt es fuer diese fuenf Stellen in der Mediathek nicht — die Liste der fehlenden Motive liegt beim Auftrag. sections/engori-feature-showcase.liquid laesst das Bild weg, wenn kein Bildblock da ist, behaelt ab 750 px aber zwei gleich breite Spalten. Der Text stuende dann auf halber Seitenbreite neben einer Luecke. Diese Regel gibt ihm die volle Breite, bis die Fotos da sind. Sie faellt von allein weg, sobald in der Vorlage wieder ein Bildblock steht: der Selektor greift nur, wenn die Sektion KEIN .engori-bt__bild enthaelt. ------------------------------------------------------------------------ */ @media screen and (min-width: 750px) { body.eng-leder #MainContent .engori-showcase .engori-bt:not(:has(.engori-bt__bild)) { grid-template-columns: minmax(0, 1fr); max-width: 78rem; margin: 0 auto; } } /* ── D16 Die Vergleichstabelle ───────────────────────────────────────────── Werner: "muss schoener angerichtet werden. Die Schrift nicht in vier Zeilen, sondern hoechstens in zwei Zeilen. Und kann ruhig breiter werden." Die Breite kam nicht aus der Section, sondern aus base.css: `.comparison-table-container { max-width: 50rem; }` — bei 1rem = 10,5 px sind das 525 px, davon gehen 120 px Logospalte und 92 px Andere-Spalte ab (engori-premium.css), es blieben 313 px fuer die Merkmalspalte. Genau dieser Deckel steht als offener Punkt in engori-premium.css ueber dem Tabellenabschnitt: "Ein breiteres Raster hilft dort nicht (geprueft: die Tabelle bleibt bei 525 px)". Er wird hier fuer die Leder-Seiten geloest. 76rem = 798 px, Merkmalspalte damit rund 586 px statt 313 px. Zusaetzlich sind die beiden langen Merkmale in der Vorlage gekuerzt (40 -> 34 und 49 -> 40 Zeichen), wie es derselbe Kommentar verlangt. Nicht gemessen: Wie viele Zeilen daraus im Browser werden. Das braucht einen Blick auf die gerenderte Seite, der in dieser Sitzung nicht moeglich war. ------------------------------------------------------------------------ */ @media screen and (min-width: 750px) { body.eng-leder #MainContent .comparison-table-container { max-width: 76rem; } body.eng-leder #MainContent .comparison-table__row-name { padding-top: 1.4rem !important; padding-bottom: 1.4rem !important; } } /* ── D18 Pflichtangaben und Sicherheit ───────────────────────────────────── Werner zu "Konstruktion und Details": "Das Design, was wir auf den anderen Produktseiten auch haben" — und zu "Pflichtangaben und Sicherheit": "genauso". Gemessen 03.10.2026: Die Sektion engori-produkt-pflichtangaben steht in KEINEM anderen Produkt-Template des Shops (nur in den beiden Leder-Seiten). Es gibt also keine fremde Seite zum Abschreiben. Angeglichen wird deshalb an die Formensprache der Nachbarsektion "Konstruktion im Detail" (sections/engori-icon-marquee.liquid), gemessen an deren Stylesheet: Behaelter max-width 1300px, zentriert (hier vorher 76rem = 798 px) Ueberschrift zentriert, var(--eng-h2), 700 (hier vorher 1,9rem, links) Karten border-radius 16px, Flaeche (hier vorher nur border-top) Aussenluft 48 px oben und unten (hier vorher 32 / 40 px) Die Farben bleiben die Theme-Variablen, damit beide Farbwelten tragen. ------------------------------------------------------------------------ */ body.eng-leder .engori-pflicht { padding: 48px 0; } body.eng-leder .engori-pflicht__innen { max-width: 1300px; padding: 0 16px; } body.eng-leder .engori-pflicht__titel { text-align: center; font-size: var(--eng-h2) !important; font-weight: 700; line-height: 1.2; margin: 0 0 24px; } body.eng-leder .engori-pflicht__liste { display: grid; gap: 12px; } body.eng-leder .engori-pflicht__zeile { border-top: 0; border-radius: 16px; background: var(--eng-ld-surface); padding: 18px 20px; } @media screen and (min-width: 750px) { body.eng-leder .engori-pflicht__titel { margin-bottom: 32px; } body.eng-leder .engori-pflicht__liste { gap: 16px; } body.eng-leder .engori-pflicht__zeile { grid-template-columns: 22rem minmax(0, 1fr); padding: 22px 24px; } } /* ── Vertrauenskarten im Quadrat statt in einer Reihe ───────────────────── Werner am 20.10.2026 zur Sektion "Alles drin. Nichts versteckt.": "gibt es hier noch eine vierte info und dann im quadrat". Die Sektion engori-trust-section verteilt von sich aus auf so viele Spalten, wie Karten da sind (Liquid Zeile 5, at_most 4). Bei vier Karten waere das eine Reihe mit vier schmalen Spalten. Hier stattdessen zwei mal zwei. Gilt nur fuer leder_garantie, nicht fuer leder_ueberzeugen, das weiterhin drei Karten nebeneinander zeigt. */ @media screen and (min-width: 750px) { body.eng-leder [id$='__leder_garantie'] .engori-trust__grid, body.eng-leder [id$='__leder_garantie'] .engori-trust__karten { --spalten: 2 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ── Vertrauenskarten: Quadrat nur ab Tablet, am Handy untereinander ───── Werner am 20.10.2026: "jetzt nur noch bei mobile ohne die hoehe der boxen zu veraendern 4 stueck im quadrat". **Gemessen nicht machbar**, drei Versuche, alle dokumentiert damit sie niemand wiederholt: 1. Unterzeile am Handy ausgeblendet, um die Hoehe von 74 px zu halten. Werner: "nein geht nicht". 2. Karte auf eine Spalte mit grid-template-areas: none, Icon ueber den Text. Zerstoert die Kartenstruktur, Icon lag ueber dem Text. 3. Nur das aeussere Raster auf zwei Spalten, Karte unangetastet. Gemessen bei 375 px: Karte 167 px breit, Text bricht an Silben um ("Kauf auf Rech-nung", "Versi-cherter Versand"), Hoehe springt von 74 auf 161 px, und die vier Karten sind nicht einmal gleich hoch (zweimal 159, zweimal 161). Der Grund ist Arithmetik: 167 px minus 32 px Innenabstand minus 40 px Icon lassen 82 px fuer den Text. "Versicherter Versand" braucht darin drei Zeilen mit Silbentrennung. Zwei Spalten, voller Text und 74 px Hoehe schliessen sich bei 375 px gegenseitig aus. Deshalb: Quadrat ab 750 px, darunter untereinander wie zuvor. */ @media screen and (min-width: 750px) { body.eng-leder [id$='__leder_garantie'] .engori-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }