/* ========================================================================== ANSCHLAG — Produktseite. Alle Farben, Schriften und Masse über var(--hs-…). Kein transition, keine CSS-Animation: jede Bewegung ist eine Zahl, die das Skript schreibt, und eine Geometrie, die hier in calc() steht. ========================================================================== */ body.hs-p2 { --hs-p2-leiste: 64px; /* misst das Skript nach und schreibt es zurück */ --hs-p2-rand: clamp(24px, 4.2vw, 72px); --hs-p2-luft: clamp(40px, 5vw, 88px); /* * ⚠ DIE BILDBREITE IST GEMESSEN, NICHT GEWÄHLT. * * Gezählt auf der Staging-Datenbank (ch382000_huegi2, 1157 Artikel, davon * 1135 mit Beitragsbild): der Median der langen Kante liegt bei 650 px, * nur 25.6 % erreichen 1200 px, 38.5 % erreichen 800 px. * * Eine halbe Bildschirmbreite (720 px bei 1440) wäre auf einem Schirm mit * doppelter Pixeldichte eine 2.2-fache Vergrösserung — für drei Viertel des * Katalogs sichtbar weich. 520 px lassen dem Median eine 1.25-fache * Streckung. Die FLÄCHE bleibt halbseitig; gedeckelt ist nur das Bild darin. * * Wer den Katalog später mit grösseren Fotos nachrüstet, hebt genau diese * eine Zahl — sonst nichts. */ --hs-p2-bild-max: 520px; /* * ⚠ SELBSTVERSORGUNG. Diese vier Token stehen im Theme NUR in `dunkel.css` * (Dunkel-Startseite, Scope `body.hs-dunkel`) — die lädt hier nicht, und ohne * sie fiel u. a. der gesperrte Knopf lautlos auf Orange zurück (das «Braun»). * Darum hier mit den für diese Seite passenden Werten, wie sich schon * `ueber.css` selbst versorgt: * grau-70 AUSSCHLIESSLICH der gesperrte Knopfgrund — #4D4D4D / Weiss 8.45 : 1 * grau-45 gedämpfte Schrift (Nebenangaben, Datenkopf) * grau-20 feiner Rand auf Weiss (Datenblatt) * erfolg der Lager-Punkt auf dem schwarzen Kauffeld */ --hs-grau-70: #4D4D4D; --hs-grau-45: #94908B; --hs-grau-20: #D8D5D2; --hs-erfolg: #3FBF7F; background: var(--hs-weiss); } body.hs-p2 .hs-fuss { margin-top: 0; } /* -------------------------------------------------------------------------- Der Anschlag -------------------------------------------------------------------------- */ .hs-p2-anschlag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; /* ⚠ ohne diese Zeile klebt die Bühne nie */ min-height: calc(100svh - var(--hs-p2-leiste)); margin-top: var(--hs-p2-leiste); } @media (max-width: 1100px) and (min-width: 901px) { .hs-p2-anschlag { grid-template-columns: 44fr 56fr; } } /* --- Die Bühne ------------------------------------------------------------ */ .hs-p2-buehne { position: sticky; top: var(--hs-p2-leiste); display: flex; align-items: center; justify-content: center; /* * ⚠ WEISS UND NICHT PAPIER — und das ist gemessen, nicht geraten. * * 60 zufällige Beitragsbilder, an sechs Randpunkten geprüft: * 63.3 % weisser Grund (#FFFFFF, aufs Byte) * 15.0 % durchsichtig (PNG mit Alphakanal) * 21.7 % eigener Grund (echte Fotos, Werkstatt, Holzboden …) * * 78.3 % liegen also unauffällig auf einer hellen Fläche. Auf --hs-papier * (#F5F3F0) stünde bei den 63 % ein sichtbares weisses Rechteck mitten im * Bild — der Unterschied ist mit 1.11 : 1 zwar leise, aber als harte Kante * über 500 px sieht man ihn. * * ⚠ UND DAS LETZTE FÜNFTEL BLEIBT SICHTBAR EIN RECHTECK. Dagegen hilft * kein Grund und keine Regel — das ist eine Frage der Bildpflege im * Katalog, nicht der Gestaltung. Nicht «lösen» wollen. */ background: var(--hs-weiss); min-height: calc(100svh - var(--hs-p2-leiste)); padding: clamp(24px, 4vw, 64px); overflow: hidden; } .hs-p2-buehne__platte { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: var(--hs-p2-bild-max); } .hs-p2-buehne img { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--hs-p2-leiste) - clamp(48px, 8vw, 128px)); object-fit: contain; /* Ken Burns, an den Lauf gehängt statt an die Uhr. 2.4 % Hub, 5.5 % Wachstum über eine Bildschirmhöhe — spürbar nur als «nicht eingefroren». */ transform: translate3d(0, calc(var(--tief, 0) * -2.4%), 0) scale(calc(1 + var(--tief, 0) * .055)); opacity: calc(1 - var(--wechsel, 0) * .85); } /* --- Die Wabe: das Kachelmotiv der Startseite, rückwärts ------------------ */ .hs-p2-buehne__wabe { position: absolute; inset: -12%; perspective: 700px; pointer-events: none; } .hs-p2-buehne__wabe > span { --welle: .55; --v: calc( ( var(--sp) + var(--re) + 1 ) / 13 ); /* Rückwärts: --zug läuft von 1 nach 0, die Zelle klappt weg statt zu. */ --eigen: clamp(0, calc( ( var(--zug, 0) - var(--v) * var(--welle) ) / ( 1 - var(--welle) ) ), 1); position: absolute; top: 0; left: 0; width: 12.5%; aspect-ratio: .8660254 / 1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--hs-weiss); transform: translate( calc( ( var(--sp) - var(--vs) ) * 100% ), calc( var(--re) * 75% ) ) rotate3d( 1, 1, 0, calc( ( 1 - var(--eigen) ) * 90deg ) ) scale( calc( .55 + .462 * var(--eigen) ) ); opacity: var(--eigen); } /* --- Die Miniaturen ------------------------------------------------------- */ .hs-p2-mini { position: absolute; left: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); display: flex; gap: var(--hs-s2); z-index: 2; } .hs-p2-mini button { width: 56px; height: 56px; padding: 4px; border: 1px solid var(--hs-grau-20); border-radius: var(--hs-radius); background: var(--hs-weiss); cursor: pointer; } .hs-p2-mini button[aria-current="true"] { border-color: var(--hs-schwarz); } .hs-p2-mini button:focus-visible { outline: 3px solid var(--hs-orange-tief); outline-offset: 2px; } .hs-p2-mini img { width: 100%; height: 100%; object-fit: contain; display: block; } /* -------------------------------------------------------------------------- Der Kern — schwarz, weisse Schrift -------------------------------------------------------------------------- */ .hs-p2-kern { display: flex; flex-direction: column; justify-content: center; /* * 16 px statt 24 und knappere Polsterung: über sieben Blöcke sind das * 48 px, über die Polsterung noch einmal 44. Zusammen mit dem kleineren * Titel passt die Spalte damit auch auf einen 768 px hohen Laptop — bei * bis zu zwei Auswahlachsen, und die haben 98.6 % der Artikel. */ gap: var(--hs-s4); min-height: calc(100svh - var(--hs-p2-leiste)); padding: clamp(24px, 3.5vh, 40px) var(--hs-p2-luft); background: var(--hs-schwarz); color: var(--hs-weiss); } @media (max-height: 820px) and (min-width: 901px) { .hs-p2-kern { padding-block: 40px; gap: var(--hs-s4); } } /* Jeder Block rechnet seinen Stand aus EINER Zahl — wie die Wabenzellen ihren --eigen. 18 px Weg, nicht 60: die Startseite bewegt nirgends mehr. Grosse Wege wirken wie eine Vorführung, kleine wie Material, das sich setzt. */ .hs-p2-block { --eigen: clamp(0, calc( ( var(--auf, 1) - var(--i, 0) * .08 ) / .5 ), 1); transform: translate3d( calc( ( 1 - var(--eigen) ) * 18px ), 0, 0 ); opacity: calc(.2 + var(--eigen) * .8); } @media (max-width: 900px) { /* Dieselbe Zahl, andere Geometrie. Keine Zeile Skript ändert sich. */ .hs-p2-block { transform: translate3d( 0, calc( ( 1 - var(--eigen) ) * 12px ), 0 ); } } .hs-p2-pfad { font-size: var(--hs-label); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; } .hs-p2-pfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--hs-s2); list-style: none; margin: 0; padding: 0; } .hs-p2-pfad a { color: var(--hs-weiss); text-decoration: none; } .hs-p2-pfad a:hover { color: var(--hs-orange); } .hs-p2-pfad a:focus-visible { outline: 2px solid var(--hs-orange); outline-offset: 3px; } /* ⚠ Abstufung UMGEKEHRT zur Startseite: dort steht das erste Wort voll, und neu.css:678 vermerkt selbst, dass «Einkaufen» dadurch das leiseste der drei ist, obwohl es das wichtigste wäre. In einem Pfad ist die Rangfolge eindeutig — der Kunde steht in der tiefsten Kategorie, also steht die voll und die Wurzel am leisesten. */ .hs-p2-pfad li { opacity: .52; } .hs-p2-pfad li + li { opacity: .72; } .hs-p2-pfad li:last-child { opacity: 1; } .hs-p2-pfad__teiler { opacity: .4; } .hs-p2-marke { margin: 0; font-size: var(--hs-label); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: var(--hs-orange); } .hs-p2-titel { margin: 0; font-family: var(--hs-font-titel); /* * ⚠ KLEINER ALS AUF DER STARTSEITE, UND ZWAR MIT ABSICHT. * * Hier stand wörtlich der Titelgrad der Startseite (bis 3.5rem = 56 px). * Gemessen am 2026-08-23 auf 1440 × 900: die rechte Spalte war damit 891 px * hoch bei 835 px Platz — 56 px zu viel, man musste scrollen, um den * Warenkorbknopf zu sehen. Der Titel allein brauchte 129 px davon. * * Auf der Startseite steht der Titel allein auf einer Tafel. Hier steht er * über Preis, Auswahl und Kaufknopf, und die müssen zusammen sichtbar sein. * Derselbe Grad an zwei Orten wäre Konsequenz auf dem Papier und ein * Bedienfehler im Laden. */ font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.06; letter-spacing: .03em; font-weight: 700; color: var(--hs-weiss); } /* Ab 42 Zeichen kleiner. Gemessen am Staging-Bestand: das 80. Perzentil der Titellängen liegt bei 43 Zeichen, 20.7 % der 1157 Artikel liegen über 42. */ .hs-p2-titel--lang { font-size: clamp(1.25rem, 2vw, 1.75rem); } .hs-p2-preis { font-family: var(--hs-font-titel); /* 32 statt 40 px — derselbe Grund wie beim Titel: der Preis muss auffallen, aber nicht den Kaufknopf aus dem Bild schieben. */ font-size: clamp(1.75rem, 2.2vw, 2rem); font-weight: 700; color: var(--hs-weiss); font-variant-numeric: tabular-nums; line-height: 1.1; } /* * ⚠ DIE FARBE MUSS AUF DEN BETRAG SELBST, NICHT AUF DIE HÜLLE. * * `style.css:—` führt `.hs-preis, .woocommerce-Price-amount { color: * var(--hs-anthrazit); font-size: 1.25rem }`. Diese Regel sitzt AM BETRAG; * eine Farbe an der Hülle wird davon überschrieben, weil die eigene Regel * eines Elements immer die Vererbung schlägt — beide sind 0-1-0, aber * Vererbung verliert gegen JEDE Deklaration. * * Das war kein Schönheitsfehler: #1A1A1A auf #000000 misst 1.21 : 1. Der * Preis war auf dem Bildschirm praktisch nicht vorhanden. Am Klassennamen * allein war das nicht zu sehen — es ist im Bild aufgefallen. * * 0-2-0 statt !important: die Kaskade bleibt damit für spätere Regeln offen. */ .hs-p2-preis .woocommerce-Price-amount { color: var(--hs-weiss); font-size: inherit; font-weight: inherit; line-height: inherit; } .hs-p2-preis del, .hs-p2-preis del .woocommerce-Price-amount { /* grau-45 auf Schwarz: 6.24 : 1, trägt für den durchgestrichenen Preis. */ color: var(--hs-grau-45); font-size: .62em; font-weight: 400; } .hs-p2-preis ins, .hs-p2-preis ins .woocommerce-Price-amount { color: var(--hs-weiss); text-decoration: none; } .hs-p2-preis .woocommerce-Price-currencySymbol { font-size: .55em; margin-right: .18em; } /* Der Lieferstatus. Auf Schwarz tragen die Zustandsfarben nicht — Erfolg #17804A misst 4.22:1, Orange-tief 4.14:1, verlangt sind 4.5. Also: das WORT in Weiss (21:1), die Farbe sitzt im Punkt. Für Grafik gelten 3:1, und die erfüllen beide. Die Regel «Farbe nie ohne Wort» wird dadurch sauberer. */ .hs-p2-kern .hs-status { color: var(--hs-weiss); font-size: var(--hs-klein); margin: 0; } .hs-p2-kern .hs-status::before { background: currentColor; } .hs-p2-kern .hs-status--lager::before { background: var(--hs-erfolg); } .hs-p2-kern .hs-status--bestellung::before { background: var(--hs-orange); } .hs-p2-sku { margin: 0; font-size: var(--hs-label); color: rgba(255,255,255,.62); } /* -------------------------------------------------------------------------- Das Kaufteil -------------------------------------------------------------------------- */ .hs-p2-kern .hs-p2-wahl { display: grid; gap: var(--hs-s4); } .hs-p2-achse__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--hs-s3); margin-bottom: var(--hs-s2); } .hs-p2-achse__name { font-size: var(--hs-label); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; /* grau-45 auf Schwarz misst 6.24:1 und trägt. Auf WEISS wären es 3.36:1 — dort ist grau-70 zu nehmen. Die Farbe hängt am Grund, nicht am Bauteil. */ color: var(--hs-grau-45); } .hs-p2-achse__wert { font-size: var(--hs-text); color: var(--hs-weiss); font-weight: 700; } /* * Die Feldreihe. * * Gezählt auf der Staging-Datenbank: von 801 Achsen (Artikel × Achse) sind * 676 = 84.4 % feldreihentauglich, also höchstens 6 Werte und höchstens * 18 Zeichen je Wert. Die übrigen fallen auf einen Aufklapper zurück: * 118 scheitern an der ANZAHL (Farbachsen mit bis zu 73 Werten), nur 11 an * der Länge. * * Damit ist die Reihe keine Wette, sondern der Normalfall — und der * Aufklapper die begründete Ausnahme. Wäre es umgekehrt, wäre die ganze * Konstruktion die Mühe nicht wert. */ .hs-p2-felder { display: flex; flex-wrap: wrap; gap: var(--hs-s2); } .hs-p2-feld { min-height: var(--hs-touch-min); padding: 0 var(--hs-s4); border: 1px solid rgba(255,255,255,.28); border-radius: var(--hs-radius); background: transparent; color: var(--hs-weiss); font-family: var(--hs-font-text); font-size: var(--hs-klein); font-weight: 700; cursor: pointer; appearance: none; } .hs-p2-feld:hover { border-color: var(--hs-weiss); } .hs-p2-feld:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: 2px; } .hs-p2-feld[aria-checked="true"] { background: var(--hs-weiss); color: var(--hs-schwarz); border-color: var(--hs-weiss); } .hs-p2-feld[aria-disabled="true"] { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.34); cursor: not-allowed; /* Nicht nur blass: ein Strich, damit der Zustand auch ohne Farbe gilt. */ background-image: linear-gradient(to top left, transparent calc(50% - 1px), rgba(255,255,255,.28) 50%, transparent calc(50% + 1px)); } /* Der Aufklapper in Hausform, für Achsen, die nicht in eine Reihe passen. */ .hs-p2-auf { width: 100%; min-height: 52px; padding: 0 var(--hs-s10, 44px) 0 var(--hs-s3); border: 1px solid rgba(255,255,255,.28); border-radius: var(--hs-radius); background: transparent; color: var(--hs-weiss); font-family: var(--hs-font-text); /* 17 px und nicht kleiner: unter 16 px zoomt iOS beim Antippen ins Feld. */ font-size: var(--hs-text); appearance: none; } .hs-p2-auf option { background: var(--hs-schwarz); color: var(--hs-weiss); } .hs-p2-auf:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: 2px; } /* Woos echte Auswahlfelder BLEIBEN im Dokument — nur unsichtbar. Nicht display:none: add-to-cart-variation.js liest und schreibt sie, und die ganze Kombinatorik hängt daran. */ .hs-p2-verborgen { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .hs-p2-offen { margin: 0; font-size: var(--hs-label); color: var(--hs-orange); font-weight: 700; } .hs-p2-tun { display: grid; grid-template-columns: auto 1fr; gap: var(--hs-s3); align-items: stretch; } .hs-p2-menge { display: flex; } .hs-p2-menge button { width: 44px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: var(--hs-weiss); font-size: 1.25rem; cursor: pointer; } .hs-p2-menge button:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: -3px; } .hs-p2-tun .quantity { display: flex; margin: 0; } .hs-p2-tun .qty { width: 56px; height: 56px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-inline: 0; border-radius: var(--hs-radius); background: transparent; color: var(--hs-weiss); font-family: var(--hs-font-text); font-size: var(--hs-text); text-align: center; appearance: textfield; } .hs-p2-tun .qty::-webkit-outer-spin-button, .hs-p2-tun .qty::-webkit-inner-spin-button { appearance: none; margin: 0; } /* * Der Knopf. Je Zustand genau EINE zulässige Paarung — das ist gerechnet, * keine Laune: * Ruhe #FF6000 / Schwarz 6.92 : 1 * Überfahren #BF4800 / Weiss 5.07 : 1 * Gesperrt #4D4D4D / Weiss 8.45 : 1 * Unzulässig wären Weiss auf #FF6000 (3.03 : 1) und Schwarz auf #BF4800 * (4.14 : 1). Deshalb wechselt beim Überfahren AUCH die Schriftfarbe. */ .hs-p2-tun .single_add_to_cart_button, .hs-p2-tun button[type="submit"] { height: 56px; padding: 0 var(--hs-s6); border: 0; border-radius: var(--hs-radius); background: var(--hs-orange); color: var(--hs-schwarz); font-family: var(--hs-font-titel); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; appearance: none; width: 100%; } .hs-p2-tun .single_add_to_cart_button:hover, .hs-p2-tun .single_add_to_cart_button:focus-visible { background: var(--hs-orange-tief); color: var(--hs-weiss); } .hs-p2-tun .single_add_to_cart_button:focus-visible { outline: 3px solid var(--hs-weiss); outline-offset: 3px; } .hs-p2-tun .single_add_to_cart_button.disabled, .hs-p2-tun .single_add_to_cart_button[disabled], .hs-p2-tun .wc-variation-selection-needed { background: var(--hs-grau-70); color: var(--hs-weiss); cursor: not-allowed; } /* Woos eigene Ausgabe für Variantenpreis und -status wird nur ausgeblendet, WENN das Skript läuft. Ohne Skript zeigt WooCommerce an seiner Stelle an — die Rückfallebene ist gratis dabei. */ body.hs-p2-gesteuert .hs-p2-kern .woocommerce-variation-price, body.hs-p2-gesteuert .hs-p2-kern .woocommerce-variation-availability { display: none; } .hs-p2-kern .reset_variations { color: var(--hs-orange); font-size: var(--hs-label); } .hs-p2-kern .variations, .hs-p2-kern .variations tbody, .hs-p2-kern .variations tr, .hs-p2-kern .variations td, .hs-p2-kern .variations th { display: block; border: 0; padding: 0; } .hs-p2-kern .variations .label { display: none; } /* -------------------------------------------------------------------------- Der Schnitt — dieselbe Kante wie .hs-n2-ware__schnitt -------------------------------------------------------------------------- */ /* * Die Kante zwischen Bühne und Lesetext. Kundenvorgabe vom 2026-08-23: * durchgezogen, 2 px. * * ⚠ OHNE `transform` — und das ist der eigentliche Punkt. Vorher wuchs die * Linie von links ein (`scaleX(var(--an))`, gesetzt vom Beobachter im Skript). * Wer schnell scrollt oder kein Skript hat, sah sie halb. «Durchgezogen» * heisst: immer ganz da, nicht als Auftritt. */ .hs-p2-schnitt { height: 2px; background: var(--hs-orange); } /* -------------------------------------------------------------------------- Die Zusagen -------------------------------------------------------------------------- */ /* * ⚠ HIER STAND DAS ZUSAGEN-BAND («Teillieferung ohne Aufpreis · Im Laden * probeschiessen · Werkstatt im Haus»). Kundenentscheid vom 2026-08-23: * «fliegt komplett raus». Es war die einzige helle Fläche zwischen dem * schwarzen Kern und den Lesetexten — mit denen jetzt ebenfalls auf Schwarz * fällt der Bruch ohnehin weg. */ /* -------------------------------------------------------------------------- Daten und Beschreibung — der dunkle Abschnitt -------------------------------------------------------------------------- */ /* * ⚠ SCHWARZ, NICHT WEISS — Kundenentscheid vom 2026-08-23. * * Damit ist die ganze Seite unterhalb der Bühne dunkel: Kern, Daten, * Beschreibung, «Dazu passt». Weiss bleibt allein die Bildbühne, und die * bleibt es aus einem gemessenen Grund (siehe `.hs-p2-buehne`): 63 % der * Beitragsbilder haben einen weissen Grund und stünden auf jeder anderen * Fläche als sichtbares Rechteck. */ .hs-p2-lesen { background: var(--hs-schwarz); color: var(--hs-weiss); padding: clamp(72px, 10vh, 128px) var(--hs-p2-rand); } .hs-p2-lesen__inhalt { max-width: var(--hs-inhalt-max); margin-inline: auto; display: grid; grid-template-columns: 200px minmax(0, min(66ch, 100%)); gap: clamp(32px, 5vw, 88px); } .hs-p2-auge { font-size: var(--hs-label); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; /* Seit dem Wechsel auf Schwarz gilt das Umgekehrte: #FF6000 kommt hier auf 6.93 : 1, das tiefe #BF4800 fiele mit 2.7 : 1 durch. */ color: var(--hs-orange); position: sticky; top: calc(var(--hs-p2-leiste) + 32px); align-self: start; } /* Nicht reines Weiss: über einen langen Absatz flimmert 21 : 1. .88 sind immer noch 16.6 : 1 und lesen sich ruhiger. */ .hs-p2-text { font-size: var(--hs-text); line-height: 1.65; color: rgba(255, 255, 255, .88); } .hs-p2-text p { margin: 0 0 var(--hs-s4); } .hs-p2-text ul { margin: 0 0 var(--hs-s4) var(--hs-s6); } /* * ⚠ DER BESCHREIBUNGSTEXT KOMMT AUS DEM IMPORT UND GEHORCHT UNS NICHT. * * Gezählt über 976 Beschreibungen: 35 (3.6 %) enthalten eine ``, * 21 eine feste Breite ab 100 px, 7 ein ``. Bei «Hoyt Satori» steckt im * Text sogar fremdes Bootstrap-Markup (`tab-content`, `tab-pane`) mit einer * 602 px breiten Tabelle — gemessen am 2026-08-23 machte das die Handy-Ansicht * 626 px breit bei 390 px Fenster. Die ganze Seite liess sich seitwärts * schieben. * * Fremder Inhalt darf das Layout nicht aufbrechen. Der Textblock bekommt * deshalb seinen EIGENEN Rollbereich: die Tabelle rollt, die Seite steht. * `max-width` allein genügt nicht — eine Tabelle mit festen Zellbreiten * schrumpft nicht unter ihren Mindestinhalt. * * Das ersetzt keine Bereinigung der Importdaten, es verhindert nur, dass sie * die Seite kaputtmacht. */ /* ⚠ overflow-x:auto ENTFÄLLT (Kundenentscheid 2026-10-12): es gab den orangen Scrollbalken. Der Überlauf wird jetzt vermieden statt gerollt — siehe den Block (3) am Dateiende. */ .hs-p2-text { overflow-wrap: anywhere; word-break: break-word; } .hs-p2-text img { max-width: 100%; height: auto; } /* * ⚠ TABELLEN AUS DEM IMPORT SIND EXCEL-AUSWÜRFE UND MÜSSEN ENTGIFTET WERDEN. * * Angesehen am Beispiel «Hoyt Satori» (id=668), und es ist kein Einzelfall — * 35 der 976 Beschreibungen enthalten eine Tabelle. Was da mitkommt: * *
* * * Also: eigene helle Zellgründe, eigene Textfarben, Arial, `pt`-Masse, * `windowtext` als Rahmenfarbe und `cellpadding="0"`. * * Zwei sichtbare Folgen auf schwarzem Grund, beide im Kundenbild vom * 2026-08-23 zu sehen: * * 1. Zellen OHNE eigene Textfarbe erben unser Weiss und stehen damit auf * dem hellen Zellgrund #f9f9f9 — «Kurze Wurfarme» war praktisch * unsichtbar (1.05 : 1). * 2. Ohne Zellpolsterung klebt jeder Wert an der Zellkante. * * Die Inline-Angaben lassen sich nur mit `!important` überstimmen — dagegen * hilft keine Spezifität. Das ist hier kein Kaskaden-Krieg, sondern die * einzige Möglichkeit: fremdes Markup, das wir nicht ändern können, muss * unserem Grund folgen und nicht umgekehrt. * * Farben werden NUR innerhalb von Tabellen neutralisiert. Ein farbiger Satz im * Fliesstext bleibt, wie ihn der Lieferant gesetzt hat — das kann Absicht sein. * * ⚠ Auch das ersetzt keine Bereinigung der Importdaten. */ .hs-p2-text table { max-width: 100%; width: auto !important; height: auto !important; border-collapse: collapse; margin: 0 0 var(--hs-s4); } .hs-p2-text col { width: auto !important; } .hs-p2-text th, .hs-p2-text td { background: transparent !important; border: 1px solid rgba(255, 255, 255, .16) !important; padding: var(--hs-s2) var(--hs-s3); width: auto !important; height: auto !important; color: rgba(255, 255, 255, .88); vertical-align: top; text-align: left; } .hs-p2-text th * , .hs-p2-text td * { color: inherit !important; background: transparent !important; font-family: inherit !important; } /* Folgen Daten auf eine Beschreibung, entfällt die Fuge zwischen den beiden weissen Flächen — sonst stünde dort die doppelte Luft. Die Haarlinie übernimmt die Trennung. */ .hs-p2-lesen--anschluss { padding-top: 0; } .hs-p2-lesen--anschluss .hs-p2-lesen__inhalt { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: clamp(48px, 7vh, 96px); } .hs-p2-daten table { margin-top: 0; } .hs-p2-daten table { width: 100%; border-collapse: collapse; } .hs-p2-daten th { text-align: left; font-size: var(--hs-label); text-transform: uppercase; letter-spacing: .12em; color: var(--hs-grau-45); font-weight: 700; padding: var(--hs-s3) var(--hs-s4) var(--hs-s3) 0; border-bottom: 1px solid var(--hs-grau-20); width: 38%; vertical-align: top; } .hs-p2-daten td { font-size: var(--hs-text); color: var(--hs-weiss); padding: var(--hs-s3) 0; border-bottom: 1px solid var(--hs-grau-20); } .hs-p2-daten p { margin: 0; } /* -------------------------------------------------------------------------- Dazu passt — der Kartenstreifen -------------------------------------------------------------------------- */ .hs-p2-weiter { background: var(--hs-schwarz); padding: clamp(48px, 7vh, 96px) 0; color: var(--hs-weiss); } .hs-p2-weiter__kopf { padding-inline: var(--hs-p2-rand); margin-bottom: var(--hs-s6); } .hs-p2-weiter__auge { font-size: var(--hs-label); text-transform: uppercase; letter-spacing: .18em; font-weight: 700; color: var(--hs-orange); margin: 0; } /* * ⚠ KEIN `scroll-snap` UND KEIN SEITENRAND — beides wegen des Dauerlaufs. * * `scroll-snap-type: x mandatory` stand hier und würde gegen das Skript * arbeiten: der Lauf schiebt `scrollLeft` Bild für Bild um Bruchteile eines * Pixels, das Einrasten zöge ihn bei jedem Bild auf die nächste Karte zurück. * Das Ergebnis wäre kein Lauf, sondern ein Zittern. * * `padding-inline` ist aus demselben Grund auf 0: bei Stand 0 sähe man * [Rand][Karte 1], nach dem Umbruch aber [Klon 1] bündig an der Kante. Die * Schleife wäre genau an ihrer Nahtstelle sichtbar. Der Startseiten-Streifen * hat aus demselben Grund keinen (dort kam der Anstoss vom Kunden selbst: * «links und rechts jeweils 0px padding respektive margin»). * * `scroll-behavior: auto` überschreibt ein etwaiges `smooth` weiter oben — * sonst glättete der Browser jeden geschriebenen Wert und liefe dem Skript * hinterher. */ .hs-p2-spur { display: flex; gap: var(--hs-s4); padding-inline: 0; overflow-x: auto; scroll-behavior: auto; scrollbar-width: none; } .hs-p2-spur::-webkit-scrollbar { display: none; } .hs-p2-karte { flex: 0 0 clamp(180px, 23vw, 240px); /* * ⚠ DER ALTE GRUND FÜR WEISS TRÄGT HIER NICHT. * * Der Kommentar an dieser Stelle berief sich auf die Lieferstatus-Farben, * die auf Schwarz mit 4.22 und 4.14 durchfallen. Diese Karte zeigt aber gar * keinen Lieferstatus — nur Marke, Name und Preis. Also folgt sie den * Kategoriekarten: Anthrazit auf Schwarz, wie im ganzen Shop seit dem * 2026-08-20. * * Auf #1A1A1A: Weiss 17.4 : 1 · Orange 5.8 : 1. Beides trägt. */ background: var(--hs-anthrazit); color: var(--hs-weiss); transform: translate3d(0, calc((1 - var(--an, 1)) * 18px), 0); opacity: calc(.2 + var(--an, 1) * .8); } .hs-p2-karte__schnitt { height: 3px; background: var(--hs-orange); } .hs-p2-karte__bild { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: var(--hs-s4); } .hs-p2-karte__bild img { max-width: 100%; max-height: 100%; object-fit: contain; } .hs-p2-karte__text { padding: 0 var(--hs-s4) var(--hs-s4); } /* Marke, Name und Preis sind — ohne `block` liefen Marke (orange) und Name in einer Zeile ineinander und der Umbruch klebte am Rand. Jede Angabe auf eine eigene Zeile; die Marke als Label darüber. */ .hs-p2-karte__marke { display: block; font-size: var(--hs-label); text-transform: uppercase; letter-spacing: .16em; color: var(--hs-orange); font-weight: 700; margin: 0 0 var(--hs-s1); overflow-wrap: anywhere; } .hs-p2-karte__name { display: block; font-size: var(--hs-klein); font-weight: 700; line-height: 1.35; margin: 0 0 var(--hs-s2); color: var(--hs-weiss); overflow-wrap: anywhere; } .hs-p2-karte__preis { display: block; } .hs-p2-karte__preis { font-family: var(--hs-font-titel); font-weight: 700; font-size: var(--hs-h3); color: var(--hs-weiss); font-variant-numeric: tabular-nums; } .hs-p2-karte a { text-decoration: none; color: inherit; display: block; } .hs-p2-karte a:focus-visible { outline: 3px solid var(--hs-orange); outline-offset: 3px; } /* -------------------------------------------------------------------------- Flache Bildschirme — die Höhe entscheidet, nicht die Breite ⚠ EIN LAPTOP IST NICHT SCHMAL, SONDERN FLACH. Auf 1440 × 900 passt die Spalte mit 88 px Luft. Auf 1366 × 768 — dem verbreitetsten Notebook-Format — fehlten am 2026-08-23 gemessen 58 px, und zwar ausschliesslich wegen der geringeren HÖHE. Eine Breiten-Abfrage hilft dagegen nichts; `max-height` ist hier das richtige Werkzeug. Der Kunde will, dass auf dem Schreibtisch alles sichtbar ist. Auf einem flachen Schirm ist ein etwas kleinerer Titel der bessere Handel als ein Kaufknopf unterhalb der Falz. `min-width: 901px` schliesst das Handy aus — dort gilt der Block darunter, und dort ist Scrollen ohnehin der Normalfall. -------------------------------------------------------------------------- */ @media (min-width: 901px) and (max-height: 840px) { .hs-p2-kern { gap: var(--hs-s3); padding: var(--hs-s4) var(--hs-p2-luft); } .hs-p2-titel { font-size: clamp(1.25rem, 1.9vw, 1.5rem); } .hs-p2-titel--lang { font-size: clamp(1.125rem, 1.6vw, 1.25rem); } .hs-p2-preis { font-size: clamp(1.375rem, 1.8vw, 1.625rem); } /* Die Beschriftung rückt näher an ihre Werte — vier Pixel je Achse, bei drei Achsen also zwölf. Klingt nach nichts und ist ein Achtel dessen, was hier fehlte. */ .hs-p2-achse__kopf { margin-bottom: var(--hs-s1); } } /* * Zweite Stufe für 720 px Höhe. Gemessen beim Artikel mit VIER Achsen * («Olympisch Recurve Bogenset», einer von drei im ganzen Katalog): mit der * Stufe oben fehlten dort noch 4 px. Vier Pixel sind nichts — aber «alles * sichtbar» ist eine Zusage, und eine Zusage mit Sternchen ist keine. */ @media (min-width: 901px) and (max-height: 740px) { .hs-p2-kern { gap: var(--hs-s2); padding: var(--hs-s3) var(--hs-p2-luft); } } /* -------------------------------------------------------------------------- Handy — der Umbruch liegt bei 900, nicht bei 700: zwischen 700 und 900 wären es zwei Spalten à 350 px, und in ein 320-px-Feld passt «45–55 LBS / Rechtshand» nicht. -------------------------------------------------------------------------- */ @media (max-width: 900px) { .hs-p2-anschlag { grid-template-columns: 1fr; } .hs-p2-buehne { position: static; /* 62 svh und nicht 100: sonst steht unter der Falz nichts als Bild. 62 schneidet Marke und Titel gerade an — die bekannte Kante, die zum Weiterlesen zwingt. */ min-height: 62svh; height: 62svh; padding: var(--hs-s6); } .hs-p2-kern { min-height: 0; padding: var(--hs-s8) var(--hs-s6); } .hs-p2-tun { grid-template-columns: 1fr; } /* Gerechnet: 375 minus 48 Rand = 327 px nutzbar. Menge mit zwei 48ern und 56er-Feld = 152, plus 8 Fuge, Rest 167 — «IN DEN WARENKORB» in 1rem/700/Versalien/.06em misst rund 175. Passt nicht. Also stapeln. */ .hs-p2-menge { justify-content: flex-start; } /* Das Zusagen-Band ist entfallen — siehe oben. */ .hs-p2-lesen__inhalt { grid-template-columns: 1fr; } .hs-p2-auge { position: static; } .hs-p2-daten th, .hs-p2-daten td { display: block; width: auto; } .hs-p2-daten th { border-bottom: 0; padding-bottom: 0; } .hs-p2-mini { position: static; margin-top: var(--hs-s3); justify-content: center; } .hs-p2-buehne { flex-direction: column; } } /* -------------------------------------------------------------------------- Wer keine Bewegung will, bekommt keine — und trotzdem die fertige Seite. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hs-p2-buehne__wabe { display: none; } .hs-p2-block { transform: none; opacity: 1; } .hs-p2-buehne img { transform: none; } .hs-p2-karte { transform: none; opacity: 1; } /* Der Schnitt braucht hier nichts mehr — er wächst seit dem 2026-08-23 nicht mehr ein, sondern steht durchgezogen. */ } /* ========================================================================== Divi zurückholen — die klassische WooCommerce-Kauftaste ⚠ ERST LIVE SICHTBAR, NICHT IN DER VORSCHAU. Die Vorschau lief nicht als echtes Produkt (`is_product()` = false), darum lud Divi seine hoch spezifischen WooCommerce-Knopfregeln dort nicht. Auf der echten Produktseite laden sie und überschreiben die Regeln oben — die Taste erschien in Divis Blau, das Mengenfeld weiss. Divi zielt mit `#page-container` (ID) auf die Knöpfe; dagegen hilft keine Klassenspezifität, nur `!important`. Deshalb hier, eng auf Grund/Schrift/Rand begrenzt und auf `body.hs-p2` beschränkt, sonst nichts. ========================================================================== */ body.hs-p2 .hs-p2-tun .single_add_to_cart_button, body.hs-p2 .hs-p2-tun .single_add_to_cart_button.button, body.hs-p2 .hs-p2-tun button[type="submit"] { background: var(--hs-orange) !important; color: var(--hs-schwarz) !important; border: 0 !important; border-radius: var(--hs-radius) !important; /* Divi/Woo dämpft den gesperrten Knopf mit Deckkraft < 1 — das machte aus Grau ein Braun. Voll deckend, die Zustände tragen die Farbe selbst. */ opacity: 1 !important; } body.hs-p2 .hs-p2-tun .single_add_to_cart_button:hover, body.hs-p2 .hs-p2-tun .single_add_to_cart_button:focus-visible { background: var(--hs-orange-tief) !important; color: var(--hs-weiss) !important; } body.hs-p2 .hs-p2-tun .single_add_to_cart_button.disabled, body.hs-p2 .hs-p2-tun .single_add_to_cart_button[disabled], body.hs-p2 .hs-p2-tun .single_add_to_cart_button.wc-variation-selection-needed { background: var(--hs-grau-70) !important; color: var(--hs-weiss) !important; } body.hs-p2 .hs-p2-tun .qty { background: transparent !important; color: var(--hs-weiss) !important; border: 1px solid rgba(255, 255, 255, .28) !important; border-inline: 0 !important; } body.hs-p2 .hs-p2-menge button { background: transparent !important; color: var(--hs-weiss) !important; border: 1px solid rgba(255, 255, 255, .28) !important; } /* * Lagerstatus-Dublette bei EINFACHEN Produkten. * * WooCommerces `add-to-cart/simple.php` gibt `wc_get_stock_html()` selbst aus — * direkt im Kaufblock, vor dem Formular. Bei uns steht der Status schon nach dem * Preis (`[data-hs-p2-lage]`), also erschien er zweimal. Die WC-Ausgabe im Block * wird ausgeblendet; `> p.stock` trifft NUR das direkte Kind (die einfache * Ausgabe), nicht die Verfügbarkeit je Variante tief im Variantenformular. */ body.hs-p2 .hs-p2-block:not([data-hs-p2-lage]) > p.stock { display: none; } /* ========================================================================== Kundenentscheide 2026-10-12 — Produktseite (Anschlag) ========================================================================== */ /* * (1) ÜBERSCHRIFTEN IM BESCHREIBUNGSTEXT AUF WEISS. * * Gemessen am 2026-10-12: die Importtexte tragen keine eigenen Textfarben. * Die Absätze erben unser Weiss und standen richtig — die Überschriften aber * grau, weil Divi h1–h6 sein Vorgabe-#333 mitgibt (auf Schwarz 1.3 : 1, * praktisch unsichtbar). Darum seitenweit auf Weiss. Links und bewusste * Orange-Akzente bleiben: die sitzen auf /, nicht auf Überschriften. */ body.hs-p2 .hs-p2-text :is(h1, h2, h3, h4, h5, h6), body.hs-p2 .hs-p2-text :is(h1, h2, h3, h4, h5, h6) * { color: var(--hs-weiss); } /* * (2) «DAZU PASST» FLIEGT RAUS — Kundenentscheid 2026-10-12. * Der laufende Kartenstreifen wird auf ALLEN Produktseiten ausgeblendet. * Nur die Anzeige; das Skript bleibt unberührt (er ist dann nicht im Bild). */ body.hs-p2 .hs-p2-weiter { display: none; } /* * (3) KEIN HORIZONTALER ÜBERLAUF MEHR IM BESCHREIBUNGSTEXT. * * Bisher rollte der ganze Block (overflow-x:auto, oben entfernt) — daher der * orange Balken im Kundenbild. Kundenentscheid 2026-10-12: in jedem Fall * vermeiden. Statt zu rollen fügt sich jeder Fremdinhalt in die Spalte: * · nichts ist breiter als sie (max-width:100% auf alle Nachfahren), * · Tabellen rechnen auf feste Spaltenbreiten um und bleiben im Rahmen * (table-layout:fixed + width:100%); ihr Inhalt bricht statt zu rollen * (white-space:normal hebt das importierte nowrap="nowrap" auf), * · lange Wörter/URLs brechen (overflow-wrap:anywhere). * Die 39 Importtabellen (gezählt 2026-10-12) tragen so ohne Scrollfläche. */ body.hs-p2 .hs-p2-text * { max-width: 100%; } body.hs-p2 .hs-p2-text img, body.hs-p2 .hs-p2-text iframe { max-width: 100%; height: auto; } body.hs-p2 .hs-p2-text table { table-layout: fixed; width: 100% !important; } body.hs-p2 .hs-p2-text th, body.hs-p2 .hs-p2-text td { overflow-wrap: anywhere; word-break: break-word; white-space: normal !important; /* hebt importiertes nowrap="nowrap" auf */ } /* * (4) EINGEBETTETES VIDEO (YouTube) im Beschreibungstext — 16:9, randlos. * Ersetzt verwaiste Film-Vorschaubilder (z. B. die Hornet-Reihe), die als * toter Bildlink von der alten Domain kamen. Das