/** Shopify CDN: Minification failed Line 1311:25 Unexpected "`" **/ /* ========================================================================== Schnellkauf als rechte Schublade statt mittigem Fenster Vorbild snocks.com: Beim Klick auf „Auswählen" fährt die Konfiguration von rechts ein, dort wo danach auch der Warenkorb aufgeht. Der Blick bleibt auf einer Seite, statt von der Mitte an den Rand zu springen. Der Warenkorb selbst fährt bereits rechts ein — `cart_type: drawer` in den Theme-Einstellungen. Hier geht es nur um den Schritt davor. Ausschliesslich `.quick-add-modal`, nicht `.dialog-modal` — diese Klasse teilen sich mehrere Fenster im Theme, unter anderem die Bildvergrösserung auf der Produktseite. Nur ab 750 px. Auf dem Handy fährt das Fenster von unten ein, das ist dort die bessere Bewegung und bleibt unangetastet. ========================================================================== */ /* WICHTIG — warum über die Variablen und nicht über width/height: Das Theme setzt die Grösse in `quick-add-modal-styles.liquid` aus `--quick-add-modal-width` und `--quick-add-modal-height`. Diese Sektions-Stylesheets laden NACH `custom.css` und gewinnen deshalb jeden direkten `width`-Kampf — der erste Versuch am 12.08. blieb genau daran wirkungslos. Statt dagegen anzuschreiben, werden hier die beiden Variablen am Element selbst neu gesetzt. Die Theme-Regel rechnet dann mit unseren Werten. `dialog.quick-add-modal` sticht dabei die Vorgabe aus den Theme-Variablen (Element + Klasse schlägt Klasse allein). */ @media screen and (min-width: 750px) { dialog.quick-add-modal { --quick-add-modal-width: min(520px, 92vw); --quick-add-modal-height: 100dvh; max-width: none; max-height: 100dvh; margin: 0 0 0 auto; inset-block: 0; border-radius: 0; } /* Der Inhalt liegt in einem siebenspaltigen Raster — und die beiden Kinder haben FESTE Plätze darin: das Bild auf Spalte 1–4, die Angaben auf 4 bis Ende. Nur das Raster umzustellen genügt deshalb nicht, die Plätze müssen mit. Genau daran hing der zweite Fehlversuch. Die Selektoren sind absichtlich lang: Die Theme-Regeln stehen in einem Sektions-Stylesheet, das nach `custom.css` lädt. Bei gleicher Gewichtung gewinnt das spätere — also braucht es hier mehr. */ dialog.quick-add-modal .quick-add-modal__content { grid-template-columns: 1fr; grid-template-rows: auto 1fr; max-height: 100dvh; } dialog.quick-add-modal .quick-add-modal__content .product-information__media { position: relative; grid-column: 1 / -1; grid-row: 1; width: 100%; /* Sonst füllt ein quadratisches Foto die halbe Schublade und Länge, Menge und Kaufknopf rutschen unter die Falz. */ max-height: 260px; overflow: hidden; } dialog.quick-add-modal .quick-add-modal__content .product-details { grid-column: 1 / -1; grid-row: 2; } dialog.quick-add-modal[open] { animation: hhSchubladeRein var(--animation-speed) var(--animation-easing) forwards; } dialog.quick-add-modal.dialog-closing { animation: hhSchubladeRaus var(--animation-speed) var(--animation-easing) forwards; } } @keyframes hhSchubladeRein { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes hhSchubladeRaus { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } /* ========================================================================== Holzhof Rheinsberg - eigene Anpassungen Mega-Menue: Bild klein links neben dem Text, immer zwei gleich breite Spalten, mit Trennlinien. Referenz: morenutrition.de Markup laut snippets/mega-menu-list.liquid + snippets/link-featured-image.liquid: ul.mega-menu__list > li.mega-menu__column > div > a.mega-menu__link > img.mega-menu__link-image + span.wrap-text Wichtig: Horizon vergibt bei 4 oder weniger Eintraegen die Klasse .mega-menu__column--wide-collection-image, wodurch das Layout je nach Anzahl der Eintraege springt. Das wird hier bewusst neutralisiert. Hohe Spezifitaet noetig, weil Horizon seine Stile nach dieser Datei einbindet. ========================================================================== */ @media screen and (min-width: 750px) { ul.mega-menu__list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 3rem !important; row-gap: 0 !important; width: 100% !important; max-width: 900px !important; } /* Spaltenspannen des Themes aufheben - jeder Eintrag genau eine Spalte */ ul.mega-menu__list li.mega-menu__column, ul.mega-menu__list li.mega-menu__column--wide-collection-image, ul.mega-menu__list li[class*="mega-menu__column--span-"] { grid-column: span 1 !important; width: auto !important; } ul.mega-menu__list li.mega-menu__column a.mega-menu__link { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 1rem !important; text-align: left !important; padding-block: 0.85rem !important; border-bottom: 1px solid #dddddd !important; } ul.mega-menu__list li.mega-menu__column a.mega-menu__link img.mega-menu__link-image { width: 64px !important; max-width: 64px !important; min-width: 64px !important; height: 64px !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 4px !important; margin: 0 !important; } ul.mega-menu__list li.mega-menu__column a.mega-menu__link span.wrap-text { flex: 1 1 auto !important; } } /* ========================================================================== Produktkacheln: sichtbarer Rahmen um das Bildfeld Das Bildfeld ist bereits quadratisch (`image_ratio: square`), aber die Fotos haben sehr unterschiedliche Formate: manche füllen den Rahmen aus, andere sind Freisteller auf weißem Grund. Ohne sichtbaren Rahmen scheinen die Freisteller frei im Raster zu schweben, und die Übersicht wirkt unruhig, obwohl alle Felder gleich groß sind. Die Freisteller sind KEINE PNG mit Transparenz, ihr Hintergrund ist echtes Weiß. Deshalb ist der Rahmen innen weiß und nicht beige — sonst stünde in jeder Kachel ein weißer Kasten auf beigem Grund. Gilt bewusst für jede Kachel im Shop, nicht nur auf Kollektionsseiten. ========================================================================== */ /* Der Rahmen um die GANZE Karte — Bild, Titel, Preis, Steuerhinweis — kommt NICHT von hier, sondern aus der Theme-Einstellung des Blocks „Produktkarte": Ränder = Einfarbig, Stärke 1, Eckenradius 8, Padding 10/16/12/12. Bewusst nativ statt per CSS, damit die Werte im Theme-Editor sichtbar und änderbar sind. Gesetzt wurde er per Skript in ALLEN acht Vorlagen, die Produktkarten zeigen (Kollektion, Suche, Startseite, Warenkorb, 404, ähnliche Produkte auf beiden Produktseiten) — von Hand übersieht man eine. Wird der Rahmen im Editor geändert, hier nichts anpassen. Die Rahmenfarbe stammt aus dem Farbschema der Sektion, nicht aus dieser Datei. */ product-card .card-gallery { background: #FFFFFF; border-radius: 4px; overflow: hidden; } product-card .card-gallery .product-media-container img { object-fit: contain; } /* -------------------------------------------------------------------------- Produktseite: Bildbereich auf 600 px begrenzt NUR die Galerie im Hauptbereich der Produktseite. Der Selektor war am 12.08. schon einmal zu weit gefasst: 1. `media-gallery { max-width: 600px }` ohne Einschränkung traf auch die mitlaufende Kaufleiste — die stand danach 600 px breit da, mit einzelnen Wörtern pro Zeile. 2. `product-card .card-gallery { margin-inline: auto }` liess in jeder Kachel das Bild verschwinden: In einem Flex-Container macht ein automatischer Seitenrand aus „so breit wie die Spalte" ein „so breit wie der Inhalt". Das Bild darin steht auf `width: 100%` — von null. Deshalb hier: an `.product-information` gebunden, `.sticky-*` ausdrücklich ausgenommen, keine Ränder. */ .product-information > media-gallery, .product-information > * > media-gallery { max-width: 600px; } /* Mitlaufende Kaufleiste. Sie ist von Haus aus 600 px breit (Theme-Vorgabe) und teilt sich in Bild, Textspalte, Preis und Knopf. Die Textspalte hat `flex: 1; min-width: 0`, gibt also als Einzige nach. Seit Gorillas „Endkundenpreis" eingeschaltet ist, hängt hinter dem Preis eine zweite Zahl samt Beschriftung. Der Preis kann nicht schrumpfen, also schrumpft die Textspalte — bis die Variante Wort für Wort untereinander stand. Der Endkundenpreis steht ohnehin oben im Preisblock; in der Leiste ist er nur Ballast. */ .sticky-add-to-cart__bar .wsgRetailPrice, .sticky-add-to-cart__bar .wsg-retail-label, .sticky-add-to-cart__bar .hh-brutto-hinweis, .sticky-add-to-cart__bar .hh-netto { display: none; } .sticky-add-to-cart__price { flex-shrink: 0; white-space: nowrap; } .sticky-add-to-cart__variant { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== Anmelde- und Login-Formular für Händler Das Markup steht in `templates/page.wsg-registration-form.liquid` und gehört Wholesale Gorilla — deren Kopfzeile warnt ausdrücklich davor, die Datei zu ändern. Angepasst wird deshalb ausschließlich von hier aus. ========================================================================== */ /* Überschriften: Gorilla setzt sie sehr groß und mittig, der Shop sonst ruhiger und linksbündig. */ .wsg-proxy-container h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.2; margin-bottom: 0.6rem; } .wsg-proxy-container .wsg-section-header h2, .wsg-proxy-container .wsg-section-header h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; margin: 1.8rem 0 0.6rem; } /* „Hast du bereits ein Konto? Bitte hier einloggen." stand auf 1.2em und damit größer als der Fließtext. Es ist ein Hinweis, keine Ansage. */ .wsg-proxy-container .wsg-signup-link { font-size: 0.95rem !important; margin-bottom: 2rem; } /* Mobil klebten Felder und Beschriftungen an den Bildschirmkanten — Gorillas Rahmen hat keinen Innenabstand, Horizons Seitenrand greift hier nicht (Mirco, 14.09., Handy-Screenshot). */ @media screen and (max-width: 749px) { .wsg-proxy-container { padding-left: 16px; padding-right: 16px; } /* Gorilla schachtelt zwei .wsg-proxy-container — nur der äußere bekommt den Rand, sonst 32 px. */ .wsg-proxy-container .wsg-proxy-container { padding-left: 0; padding-right: 0; } } /* Der Rahmen hatte `min-width: 570px` — das überläuft jedes Handy. */ .wsg-proxy-container .wsg-one-half { min-width: 0 !important; max-width: 640px !important; width: 100%; } /* ⚠️ Bundesland ausblenden, solange es nichts zu wählen gibt. Shopify kennt für Deutschland keine Provinzen. Gorillas Skript setzt aber eine leere Platzhalter-Option hinein, deshalb reicht `:not(:has(option))` nicht — geprüft wird auf eine ZWEITE Option. Wählt jemand ein Land mit Provinzen, erscheint das Feld von selbst wieder. */ .wsg-proxy-container .wsg-input-small:has(> #wsg-form-province:not(:has(option:nth-child(2)))) { display: none !important; } /* Postleitzahl rückt dann auf die volle Breite statt rechts zu kleben */ .wsg-proxy-container .wsg-two-column:has(#wsg-form-province:not(:has(option:nth-child(2)))) .wsg-zip { width: 100% !important; float: none !important; } /* --- Schnellbestellformular --------------------------------------------- Der Inhalt wird per XHR von Gorilla nachgeladen. Die Klassennamen stammen aus dem Inspektor (11.08.): .wsg-spof-container-main äußerer Rahmen .swiper-wrapper.nav-menu Kategorieleiste (Swiper-Karussell) a.swiper-slide.wsg-nav-link ein Kategorie-Eintrag -------------------------------------------------------------------- */ /* ⚠️ Gorilla setzt jedem Eintrag `width: 164px` als Inline-Stil. Lange Namen wie „Pfahlholz & Rundholz" brechen dadurch auf zwei Zeilen und die Leiste wirkt unruhig. `auto` mit Innenabstand lässt jeden Eintrag so breit werden, wie er sein muss. Inline-Stil schlägt Klassen — deshalb `!important`. */ #wsg-quick-order-form a.swiper-slide.wsg-nav-link { width: auto !important; min-width: 0 !important; padding: 0.45rem 1rem !important; margin-right: 0.4rem !important; white-space: nowrap; border-radius: 999px; line-height: 1.4; color: #675F4B !important; } #wsg-quick-order-form a.swiper-slide.wsg-nav-link:hover { background: #F7F4EF !important; color: #212121 !important; } /* Die aktive Kategorie trägt bei Gorilla einen Rahmen — in CI-Farbe und mit Fläche wird sie deutlicher, ohne laut zu werden. */ #wsg-quick-order-form a.swiper-slide.wsg-nav-link[aria-current], #wsg-quick-order-form a.swiper-slide.wsg-nav-link.active, #wsg-quick-order-form a.swiper-slide.wsg-nav-link.wsg-nav-link-active { background: #212121 !important; color: #FFFFFF !important; border-color: #212121 !important; } /* Überschriften auf Gorillas Seiten. Die Regel galt zuerst für alle `h1` und `h2` in `.wsg-proxy-container` — gedacht war sie fürs Schnellbestellformular, wo die Überschrift linksbündig stehen soll wie im übrigen Shop. Auf der Anmeldeseite ist aber alles andere zentriert, dort hing die Überschrift dann schief. Jetzt: `h1` zentriert, ausser im Schnellbestellformular. Die Abschnittsüberschriften (`h2`, „Ihre Angaben", „Lieferadresse") bleiben linksbündig — sie gehören zu den Feldern darunter. */ .wsg-proxy-container h1 { text-align: center; } .wsg-proxy-container h2 { text-align: left; } #wsg-quick-order-form h1 { text-align: left; } /* Die Hülle brachte einen großen Leerraum zwischen Titel und Inhalt mit */ #wsg-quick-order-form { margin-top: 0; padding-top: 0; } #wsg-quick-order-form > *:first-child { margin-top: 0; } /* Suchfeld auf die Feldbreite des Themes bringen */ #wsg-quick-order-form input[type="text"], #wsg-quick-order-form input[type="search"] { max-width: 420px; width: 100%; } /* Tabellenzeilen ruhiger: Linien in der CI-Farbe statt im Grau des Browsers */ #wsg-quick-order-form table { width: 100%; border-collapse: collapse; } #wsg-quick-order-form td, #wsg-quick-order-form th { border-color: #C6C1B8; } /* Knopf in CI statt im ausgegrauten Standard */ .wsg-proxy-container #wsg-submit { background: #212121 !important; border-color: #212121 !important; color: #FFFFFF !important; border-radius: 6px; padding-inline: 2.5rem; } .wsg-proxy-container #wsg-submit:hover { background: #000000 !important; border-color: #000000 !important; } /* ========================================================================== Gorillas Prüfseite vor der Kasse (/pages/ws-cart) Sie ist Gorillas Bestellweg, nicht ein doppelter Warenkorb — „Auschecken" in der Schublade führt hierher. Klassennamen aus dem Inspektor (11.08.), Gorillas eigenes Stylesheet ist `wscart.css`: #wsg-cart-main äußerer Rahmen #wsg-cart-items.wsg-cart-table Positionsliste .wsg-cart-product eine Position .wsg-product-img Bild .wsg-product-full-info-block Titel, Preis, Menge (Flex, space-between) .wsg-cart-bottom-block Summe und Knöpfe #wsg-cart-shipping Versandschritt ========================================================================== */ /* Positionen als abgesetzte Zeilen statt als lose Reihe */ #wsg-cart-main .wsg-cart-product { padding-block: 1.1rem; border-bottom: 1px solid #C6C1B8; } #wsg-cart-main .wsg-cart-product:last-of-type { border-bottom: 0; } /* Gorilla reserviert für das Bild 172 px und zentriert es darin — bei unserem 72-px-Bild blieben links 50 px Luft, die Positionen wirkten eingerückt (Mirco, 14.09.). Spalte auf Bildbreite plus Abstand, Bild linksbündig an der Kante, an der auch Überschrift und Linien stehen. */ #wsg-cart-main .wsg-product-img, #wsg-cart-main .wsg-product-img .wsg-product-img-link { width: 92px !important; justify-content: flex-start; } /* Gorillas Textspalte ist auf `calc(100% - 516px)` festgelegt — gerechnet mit der 172-px-Bildspalte. Nach dem Schmälern blieb rechts Luft, Preis und Papierkorb rückten von der Kante weg. Die Textspalte füllt jetzt, was übrig ist; Menge, Preis und Papierkorb sitzen wieder rechts bündig. */ #wsg-cart-main .wsg-product-info-block { width: auto !important; flex: 1 1 auto; min-width: 0; } /* … und die Hülle darum ebenso: `.wsg-product-full-info-block` steht bei Gorilla auf `calc(100% - 172px)` — die eigentliche Ursache der rechten Einrückung. Füllt jetzt den Platz neben dem Bild. */ #wsg-cart-main .wsg-product-full-info-block { width: auto !important; flex: 1 1 auto; min-width: 0; padding-left: 20px; } /* Produktbild auf ein ruhiges Maß, mit demselben Rahmen wie die Kacheln */ #wsg-cart-main .wsg-product-img img { width: 72px; height: 72px; object-fit: contain; background: #FFFFFF; border: 1px solid #C6C1B8; border-radius: 6px; padding: 4px; } /* Der Infoblock zieht sich über `calc(100% - 172px)` — auf schmalen Fenstern quetscht das den Titel. Unter 750 px umbrechen lassen. */ @media (max-width: 749px) { #wsg-cart-main .wsg-product-full-info-block { width: 100% !important; padding-left: 1rem !important; flex-wrap: wrap; gap: 0.5rem; } } /* Nettozeilen auf der Prüfseite in eine eigene Zeile zwingen — Gorillas Infoblock ist ein Flex-Container, sonst kleben sie am Bruttobetrag. */ #wsg-cart-main .hh-netto { display: block !important; flex: 0 0 100%; width: 100%; margin-top: 0.1rem; font-size: 0.8rem; color: #675F4B; white-space: nowrap; } /* Summenbereich absetzen */ #wsg-cart-main .wsg-cart-bottom-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #C6C1B8; } /* Gorillas Knöpfe in CI */ #wsg-cart-main button, #wsg-cart-main .wsg-button-fix { border-radius: 6px; } /* ========================================================================== Händler-Links nur dort zeigen, wo sie Sinn ergeben Shopify-Menüs kennen keine Bedingungen. Die Kennung `hh-haendler` setzt layout/theme.liquid im , sobald ein Kunde den Tag `b2b` trägt. Schnellbestellformular nur für angemeldete Firmenkunden — sonst führt es auf eine Seite, die ohne Anmeldung leer ist Firmenkonto anlegen nur für Nicht-Firmenkunden — wer eins hat, Firmen-Login braucht beides nicht mehr Die Kollektion `spielgerate-gewerblich` stand hier bis zum 10.09.2026 ebenfalls. Sie ist jetzt öffentlich: Kommunen, Kitas und Vereine kaufen dort ein, und die Produkte waren über Bestseller, Sortiment und Suche ohnehin erreichbar. Nur die Preise bleiben der Anmeldung vorbehalten. `li:has(...)` blendet den ganzen Listenpunkt aus; ohne das bliebe in manchen Fußzeilen-Varianten ein leerer Aufzählungspunkt stehen. ========================================================================== */ :root:not(.hh-haendler) li:has(> a[href^="/pages/ws-quick-order-form"]), :root:not(.hh-haendler) a[href^="/pages/ws-quick-order-form"] { display: none !important; } :root.hh-haendler li:has(> a[href^="/pages/ws-account-create"]), :root.hh-haendler li:has(> a[href^="/pages/ws-account-login"]), :root.hh-haendler a[href^="/pages/ws-account-create"], :root.hh-haendler a[href^="/pages/ws-account-login"] { display: none !important; } /* ========================================================================== B2B: Umschalter zwischen Brutto- und Nettoanzeige Vorbild contorion.de. Der Schalter sitzt im Kopf, ein zweiter Einstieg als Textlink in der Fußzeile. Er setzt nur die Klasse `hh-netto-modus` auf ; die Umschaltung passiert hier per CSS. Wichtig: Die Bruttowerte werden NICHT überschrieben, sondern ausgeblendet. Wholesale Gorilla schreibt laufend in dieselben Elemente — würden wir dagegenhalten, flackerte es. ========================================================================== */ /* Rabattstufe des Händlers. Zwei Orte, ein Stil-Gedanke: in der Kopfzeile als ruhige Pille neben dem Steuerschalter, im Portal als Zeile über dem Inhalt. Gefüllt wird beides per JavaScript (layout/theme.liquid) — ohne Händlerkonto ist nichts davon im HTML. */ .hh-stufe { display: inline-flex; align-items: center; /* Flacher als hoch: schmales Innenmaß oben und unten, damit die Pille neben den Symbolen der Kopfzeile ruhig wirkt. */ /* Feste Höhe statt Innenmass oben/unten: so sind beide Pillen exakt gleich hoch, unabhängig von Schriftgrösse und Zeilenhöhe. */ height: 28px; /* Mittig zu Suche, Konto und Warenkorb. `align-self` wirkt nur, wenn die Kopfzeile ein Flex-Container ist — ist sie nicht, schadet es nichts. Die Ausrichtung wird hier am eigenen Element gesetzt, nicht am Container: der trägt auch Suche, Konto und Warenkorb. */ align-self: center; /* Zweiter Weg für den Fall, dass die Kopfzeile kein Flex-Container ist: dann zählt die Grundlinie, nicht align-self. */ vertical-align: middle; padding: 0 0.6rem; margin-inline-end: 0.6rem; border-radius: 999px; background: #EFEAE0; font-size: 0.72rem; line-height: 1.4; color: #4B463E; white-space: nowrap; } .hh-stufe[hidden] { display: none; } .hh-stufe-portal { margin: 0 0 1.25rem; padding: 0.6rem 0.9rem; border-radius: 6px; background: #EFEAE0; font-size: 0.95rem; color: #4B463E; } /* Dunkle Fassung, entspricht dem Sekundär-Button der CI: Fläche #4B463E, Text Sand, beim Überfahren invertiert. Das hebt den Schalter von der hellen Stufen-Pille ab, statt beide gleich blass nebeneinanderzustellen. */ .hh-steuerschalter { display: inline-flex; align-items: center; gap: 0.4rem; height: 28px; align-self: center; /* Zweiter Weg für den Fall, dass die Kopfzeile kein Flex-Container ist: dann zählt die Grundlinie, nicht align-self. */ vertical-align: middle; padding: 0 0.45rem 0 0.35rem; border: 1px solid #212121; border-radius: 999px; background: #212121; font: inherit; font-size: 0.72rem; line-height: 1; color: #FFFFFF; cursor: pointer; white-space: nowrap; } /* Kein Farbwechsel beim Überfahren. Die Pille bleibt dunkel — sie ist ein Zustandsanzeiger, kein Knopf, der sich melden muss. Der Punkt allein zeigt, was gerade gilt. */ /* „inkl. MwSt." und „exkl. MwSt." sind unterschiedlich breit — beim Umschalten wäre die Pille gesprungen und der Punkt mit ihr. Feste Breite am Textfeld, in em: sie wächst mit der Schriftgrösse mit und ist bemessen auf die längere der beiden Beschriftungen. Dadurch bleibt der Punkt an derselben Stelle. */ .hh-steuerschalter__text { display: inline-block; width: 6.1em; text-align: left; } /* Der Punkt zeigt den Zustand. Auf dunklem Grund muss er hell werden, sonst verschwindet er. Beim Überfahren kehrt sich das mit um. */ .hh-steuerschalter__punkt { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: background 0.15s ease; } .hh-netto-modus .hh-steuerschalter__punkt { background: #FFFFFF; } /* Mobil (14.09.2026, Mirco: „hier oben stört unser mwst schalter"): Die Pille lag über dem mittigen Logo. Für Gäste fällt sie in der Kopfzeile weg — die Einladung zum Firmenkonto steht auf der Startseite im Band und in der Fußzeile bei „Preisanzeige". Firmenkunden behalten den Schalter, aber knapper: kleinere Schrift, Textfeld ohne feste Breite. Die Stufen-Pille wandert mobil ebenfalls aus der Kopfzeile. */ @media screen and (max-width: 749px) { .hh-steuerschalter--gast, .hh-stufe { display: none !important; } .hh-steuerschalter { height: 24px; gap: 0.3rem; padding: 0 0.4rem 0 0.3rem; font-size: 0.62rem; } .hh-steuerschalter__text { width: auto; } } /* Soziale Symbole in der Fusszeile: grösser und weiss. Das Theme setzt sie auf `--icon-size-lg` und erbt die Textfarbe des Farbschemas — auf dem dunklen Grund wirkten sie stumpf und zu klein. Nur innerhalb der Fusszeile; im übrigen Shop bleibt alles wie es ist. */ /* Das Bestellformular ist der meistgenutzte Weg eines Händlers in den Shop. Menüeinträge tragen keine eigenen Klassen, deshalb über die Adresse angesprochen — das trifft den Eintrag, egal in welchem Menü er steht. */ a[href*="ws-quick-order-form"] { font-weight: 600; } /* Der Selektor muss `.shopify-section-group-footer-group` heissen — die Fusszeile trägt KEINE Klasse `.footer`, sondern nur `.section` und ihr Farbschema. Die erste Fassung griff deshalb ins Leere. */ .shopify-section-group-footer-group .social-icons__icon-wrapper, .shopify-section-group-footer-group .social-icons__icon { width: 36px; height: 36px; } .shopify-section-group-footer-group .social-icons__icon-wrapper { color: #FFFFFF; } .shopify-section-group-footer-group .social-icons__icon, .shopify-section-group-footer-group .social-icons__icon path { fill: currentColor; color: #FFFFFF; } .shopify-section-group-footer-group .social-icons__wrapper { gap: 16px; } /* Fusszeile: der Steuerschalter als vierte Spalte der Abschlusszeile, zusammen mit Newsletter, Sozialen Medien und Zahlungsarten. WICHTIG — die Fusszeile ist dunkelbraun. Die Kopfzeilen-Fassung des Schalters ist ebenfalls dunkel und würde hier verschwinden. Deshalb umgekehrt: helle Fläche, dunkler Text. Nur innerhalb dieser Spalte, die Kopfzeile bleibt unberührt. */ .hh-fuss-schalter { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } /* Als
ausgezeichnet, damit dieselbe Überschriftenform greift wie bei „Newsletter", „Folgen Sie uns" und „Zahlungsarten" — Grösse, Gewicht und Laufweite kommen aus dem Theme, nicht von hier. Nur der Aussenabstand muss weg, den bringt h6 von Haus aus mit. */ .hh-fuss-schalter__titel { margin: 0; } /* In der Fusszeile ebenfalls schwarz — aber mit heller Kante. Der Grund dort ist #2F2C27; ohne Rahmen verschwände die Pille fast vollständig. */ .hh-fuss-schalter .hh-steuerschalter { background: #212121; border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; } /* Fußzeile: derselbe Schalter als Textzeile mit Standortangabe */ .hh-steuerhinweis-fuss { font-size: 0.85rem; color: #675F4B; } .hh-steuerhinweis-fuss button { padding: 0; border: 0; background: none; font: inherit; color: #4B463E; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* --- Was der Modus umschaltet ------------------------------------------- */ /* Mit Schalter ist immer GENAU EIN Preis sichtbar — nicht beide. Zwei Zahlen untereinander zwingen zum Nachdenken, welche gilt. */ /* ⚠️ Der Umschalter gilt NUR für Produktpreise, NICHT für den Warenkorb. Im Warenkorb hatte die Umschaltung den Bruttopreis ausgeblendet, ohne dass die Nettozeile zuverlässig an seine Stelle trat — es standen gar keine Preise mehr da. Im Warenkorb zählt Sichtbarkeit mehr als Konsequenz: dort steht der Bruttobetrag und darunter klein der Netto, in beiden Ansichten. Die Aufschlüsselung darunter (19 % MwSt., Gesamt netto) liefert ohnehin beide Werte. Erkennbar sind die Warenkorb-Zeilen am Attribut `data-hh-netto` — sie kommen aus cart-products.liquid, die anderen setzt das Skript. */ /* Bruttomodus: Nettozeile an Produktpreisen verborgen, im Warenkorb bleibt sie */ :root:not(.hh-netto-modus) .hh-netto:not([data-hh-netto]) { display: none !important; } /* Nettomodus: Bruttopreis weg, Nettowert übernimmt dessen Darstellung */ .hh-netto-modus product-price .price { display: none !important; } /* `inline`, damit ein vorangestelltes „ab" auf derselben Zeile bleibt. Als Block stand „ab" allein über dem Preis. Gilt nicht für den Warenkorb — dort bleibt die Nettozeile die kleine Zweitzeile. */ .hh-netto-modus .hh-netto:not([data-hh-netto]) { display: inline !important; flex: 0 1 auto; width: auto; margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } /* Die Angabe „inkl./exkl. MwSt." steht seit 11.08. IM Text, nicht mehr als CSS-Endung. Grund: Im Bruttomodus fehlte sie, und im Warenkorb standen zwei Zahlen untereinander, ohne dass erkennbar war, welche welche ist. */ .hh-brutto-hinweis { font-size: 0.8rem; font-weight: 400; color: #675F4B; white-space: nowrap; } /* Firmen-Prüfseite: Gorilla gibt dem Preisblock feste 130 px (120 px auf kleinen Schirmen). „1.792,05 € inkl. MwSt." passt da nicht hinein — das € brach um, nach dem geschützten Leerzeichen klebte die Zahl am Mengenfeld (Mirco, 14.09.). Der Block wächst jetzt mit seinem Inhalt, hält Abstand zum Mengenfeld, und der Hinweis darf als eigene Zeile darunter rutschen. */ #wsg-cart-main .wsg-line-price-block { width: auto !important; min-width: 130px; flex-shrink: 0; padding-left: 16px; } #wsg-cart-main .wsg-line-price-block .hh-brutto-hinweis { display: inline-block; } /* Zwei Fassungen des Steuerhinweises, je nach Modus */ .hh-netto-modus .hh-wenn-brutto, :root:not(.hh-netto-modus) .hh-wenn-netto { display: none; } /* ========================================================================== B2B: Nettopreis unter dem Bruttopreis Erscheint nur bei angemeldeten Händlern. Der Wert wird im Browser gerechnet, weil Wholesale Gorilla die Händlerpreise erst nach dem Laden einsetzt — siehe den Block am Ende von layout/theme.liquid. ========================================================================== */ /* Die Zeile steht IM Preiselement, nicht daneben — als Nachbar rutscht sie in Rasterlayouts wie der Warenkorbzeile in die falsche Zelle. `!important` ist nötig, weil Horizons Preiszeile ein Flex-Container ist: ohne das stünde „2,28 € netto" direkt hinter „€2,71". */ .hh-netto { display: block !important; flex: 0 0 100%; width: 100%; margin-top: 0.15rem; font-size: 0.8rem; font-weight: 400; line-height: 1.3; color: #675F4B; white-space: nowrap; } /* Steuer und Nettosumme unter dem Gesamtbetrag im Warenkorb. Vorbild contorion.de: Der Gesamtbetrag bleibt brutto, darunter stehen ruhiger gesetzt die enthaltene Steuer und die Nettosumme. */ .hh-steuerzeile { font-size: 0.9rem; color: #675F4B; } .hh-steuerzeile--netto { font-weight: 600; color: #4B463E; } /* Vor dem Preis steht bei Spannen ein "ab". Es liegt bewusst außerhalb von .price, weil Gorilla dessen Inhalt ersetzt. */ .hh-preis-ab { white-space: nowrap; } /* Steuerhinweis unter dem Preis (Pflichtangabe nach PAngV) */ .hh-steuerhinweis { margin: 0.35rem 0 0 0; font-size: 0.85rem; opacity: 0.75; line-height: 1.4; } .hh-steuerhinweis a { color: inherit; text-decoration: underline; } /* Dieselbe Angabe auf Produktkacheln — kleiner, damit sie die Kachel nicht dominiert. Der Link braucht z-index, weil product-card__link die ganze Kachel überlagert. */ .hh-steuerhinweis--karte { margin: 0.2rem 0 0 0; font-size: 0.75rem; line-height: 1.3; } .hh-steuerhinweis--karte a { position: relative; z-index: 2; } /* ========================================================================== Kollektionsseiten: Kopf und Textabschnitte Inhalte kommen aus Titel/Beschreibung der Kollektion und aus den Metafeldern custom.einleitung_bild und custom.abschnitte. ========================================================================== */ /* Farbige Bänder für Holzarten-Leiste und Textabschnitte. Das Band gehört zu MEINEM Inhalt, nicht zur Shopify-Sektion. Eine Sektion rendert ihren Hintergrund auch dann, wenn der Block darin nichts ausgibt — auf Kollektionen ohne Text stand deshalb ein leeres beiges Band in der Seite. Jetzt liegen beide Bereiche in eigenen Sektionsdateien, die bei fehlendem Inhalt gar nichts ausgeben, und die Fläche kommt von hier. */ .hh-band { background: #F7F4EF; width: 100%; } .hh-band--holzarten { padding-block: 28px; } .hh-band--text { padding-block: 56px; margin-top: 32px; } /* Auf die Inhaltsbreite des Themes ziehen. Horizons `.section` ist ein Grid, das nur seine direkten Kinder in die mittlere Spalte setzt (`.section--page-width > * { grid-column: 2 }`). Der Inhalt eines Custom-Liquid-Blocks liegt eine Ebene tiefer und lief deshalb bis an den Fensterrand. `max-width` statt fester Breite, damit die Regel auch dann stimmt, wenn ein Elternelement schon begrenzt -- dann greift sie einfach nicht. */ .hh-kolkopf, .hh-kolabschnitte { width: 100%; max-width: var(--page-content-width); margin-inline: auto; } /* ENTSCHIEDEN (10.08.): Der Textbereich bekommt KEINE Zeilenlängen-Begrenzung. Zweimal versucht (78ch, dann 68ch), zweimal verworfen -- auch auf dem warmen Grund wirkt eine schmale Spalte neben dem breiten Raster falsch. Nicht wieder einbauen. */ .hh-kolkopf__text, .hh-kolabschnitt__text { width: 100%; } /* Überschriftenhierarchie h1 Kollektionstitel (Theme-Vorgabe) h2 Abschnittsüberschrift hier gedämpft, die Theme-Vorgabe war zu wuchtig h3 Zwischenüberschrift innerhalb eines Abschnitts Alles, was im Fließtext als h1 oder h2 gesetzt wird, wandelt der Baustein `hh_abschnitte` in ein h3 um -- die Gliederung bleibt dadurch sauber, egal was im Backend angeklickt wird. */ .hh-kolkopf__titel { margin: 0 0 0.6rem 0; } .hh-kolabschnitt__titel { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; } .hh-kolabschnitt__text .rte h3 { font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.3; margin: 1.6rem 0 0.5rem 0; } .hh-kolkopf__einstieg > *:last-child, .hh-kolabschnitt__text > .rte > *:last-child { margin-bottom: 0; } /* Zweispaltig erst, wenn ein Einleitungsbild hinterlegt ist. Das Bild bleibt schmal — es begleitet den Text, es trägt ihn nicht. */ /* Raster 3:2 wie auf der bestehenden Website — Text drei Teile, Bild zwei. Der Kreis ist auf 380 px gedeckelt: ohne Deckel würde er bei 1400 px Inhaltsbreite 560 px groß und risse wieder eine Lücke unter den kurzen Einstiegstext. Deckel raus, wenn er größer sein soll. */ .hh-kolkopf--zweispaltig { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; align-items: center; width: 100%; } .hh-kolkopf__bild { justify-self: end; width: 100%; max-width: 380px; margin: 0; } /* Rund, wie auf der bestehenden Website */ .hh-kolkopf__bild img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; } /* Schnellzugriff nach Holzart — runde Produktfotos über dem Raster. Die Sektion richtet ihre Kinder mittig aus und schrumpft sie auf Inhaltsbreite. Dagegen hilft nur `!important`: Horizon sammelt die `{% stylesheet %}`-Blöcke seiner Sektionen ein und hängt sie NACH custom.css in die Seite. Dieselbe Begründung wie beim Mega-Menü oben. */ .hh-holzarten { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; align-self: stretch !important; gap: 1.6rem; width: 100% !important; max-width: var(--page-content-width) !important; margin-inline: auto !important; padding: 0; } .hh-holzart { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #675F4B; } .hh-holzart__kreis { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #F7F4EF; box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.15s ease; } .hh-holzart__kreis img { width: 100%; height: 100%; object-fit: cover; } /* „Alle" trägt keine Produktfoto-Fläche und wirkte ohne Umrandung wie blosser Text, sobald eine Holzart gewählt war. Der Rahmen steht deshalb dauerhaft — die dickere Markierung der aktiven Wahl kommt getrennt über `box-shadow` und bleibt dadurch unterscheidbar. */ .hh-holzart__kreis--alle { font-size: 0.8rem; color: #4B463E; background: #FFFFFF; border: 1px solid #C6C1B8; } .hh-holzart__text { font-size: 0.85rem; line-height: 1.2; } .hh-holzart:hover .hh-holzart__kreis, .hh-holzart.is-aktiv .hh-holzart__kreis { box-shadow: 0 0 0 2px #4B463E; } .hh-holzart.is-aktiv .hh-holzart__text { color: #4B463E; font-weight: 600; } .hh-kolabschnitte { display: grid; gap: 2.75rem; width: 100%; } .hh-kolabschnitt__titel { margin: 0 0 0.75rem 0; } /* Ohne Bild läuft der Abschnitt einspaltig — der Regelfall. */ .hh-kolabschnitt--bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 2.5rem; align-items: center; } /* Bild links: Reihenfolge tauschen, Markup bleibt Text-zuerst, damit Vorlesegeräte die Überschrift zuerst bekommen. */ .hh-kolabschnitt--links .hh-kolabschnitt__text { order: 2; } .hh-kolabschnitt--links .hh-kolabschnitt__bild { order: 1; } .hh-kolabschnitt__bild { margin: 0; } .hh-kolabschnitt__bild img { display: block; width: 100%; height: auto; border-radius: 8px; } /* Kauf-Link am Absatzende. Bewusst kein Knopf: auf der bestehenden Website stehen diese Verweise als schlichte Textlinks unter dem Absatz. Damit sieht ein Link aus dem Feld genauso aus wie einer im Fließtext. */ .hh-kolabschnitt__text .rte a, .hh-kolabschnitt__knopf { color: #4B463E; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .hh-kolabschnitt__text .rte a:hover, .hh-kolabschnitt__knopf:hover { color: #675F4B; } .hh-kolabschnitt__knopf { display: inline-block; margin-top: 0.9rem; } @media (max-width: 749px) { .hh-kolkopf--zweispaltig, .hh-kolabschnitt--bild { grid-template-columns: 1fr; gap: 1.5rem; } /* Bild oben, Text darunter — auch wenn "links" gewählt ist */ .hh-kolabschnitt--links .hh-kolabschnitt__text, .hh-kolabschnitt--links .hh-kolabschnitt__bild { order: initial; } .hh-kolkopf__bild img { max-width: 220px; margin-inline: auto; } .hh-kolabschnitte { gap: 2rem; } } /* Hersteller/Marke über dem Produkttitel — nur bei Fremdmarken sichtbar */ .hh-marke { margin: 0 0 0.25rem 0; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } /* Produktbild auf der Detailseite begrenzen */ product-card .product-card__content { height: 100%; } /* Holzhof: Produkttitel in der Kachel auf zwei Zeilen, Rest mit Auslassungspunkten. Bewusste Entscheidung (04.08.): Bei diesem Sortiment steht die Unterscheidung oft am Titelende ("roh - ohne Impraegnierung" gegen "KDI - gruen"). Der Kunde sieht sie erst nach einem Klick auf die Produktseite. Das wurde abgewogen und zugunsten der ruhigeren Kachelansicht entschieden. Greift nur in der Kachel (), nicht auf der Produktseite. */ product-card a[ref="productTitleLink"] p { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== Gorillas Kaufknöpfe (Prüfseite, Schnellbestellformular) Ursache der grauen, unfertigen Knöpfe: In `snippets/wsg-custom.liquid` stand noch Gorillas Platzhalter `xxButtonClassesHerexx` statt der Button-Klasse des Themes. Am 11.08. auf `button` gesetzt — damit greift Horizons Grundgestaltung. Was hier folgt, bringt sie auf die CI und fängt den Ladezustand ab. #wsg-checkout-one Hauptknopf „Bezahlen" .button--loading Gorillas Ladezustand (blendet .button__text aus) .spof-btn Schnellbestell-Knopf, den Gorillas JS inline färbt ========================================================================== */ /* Luft zwischen Summe und Kaufknopf. Der Knopf kommt aus Gorillas nachgeladenem Markup, das Passwort auf dem Storefront verhindert einen Blick hinein — deshalb bekommen alle infrage kommenden Ebenen denselben Abstand statt nur eine geratene. */ /* NUR der Kaufknopf. Vorher stand hier zusätzlich `.wsg-cart-bottom-block button` — das traf auch die Notiz-Zeile über der Summe, schob sie um 2,75rem nach unten und alles darunter gleich mit. */ /* NUR auf dem Container. Lag der Abstand zusätzlich auf `#wsg-finalize`, addierten sich beide zu 5,5rem. */ .wsg-proxy-container .wsg-checkout-buttons, #wsg-cart-main #wsg-checkout-one { margin-top: 2.75rem !important; } /* Gorillas Summenbereich brachte oben zu viel Luft mit */ #wsg-cart-main .wsg-cart-bottom-block { margin-top: 0.75rem !important; padding-top: 1rem !important; } /* Horizons eigener Warenkorb: Knopfbereich und Summen sind Geschwister */ .cart__ctas, .cart-drawer__summary .cart__ctas { margin-block-start: 2.75rem !important; } /* Shopifys Schnellkasse-Knöpfe laden als grauer Platzhalter nach und sassen ohne Abstand direkt unter dem Betrag */ .additional-checkout-buttons { margin-block-start: 2.75rem !important; } .wsg-proxy-container #wsg-checkout-one, #wsg-cart-main #wsg-checkout-one, .wsg-proxy-container #wsg-finalize, .wsg-proxy-container button.wsg-button-fix { background: #212121 !important; border: 1px solid #212121 !important; color: #FFFFFF !important; border-radius: 6px !important; min-width: 220px; padding: 0.85rem 2.5rem !important; font-size: 1rem; line-height: 1.3; letter-spacing: 0.01em; } .wsg-proxy-container #wsg-checkout-one:hover, #wsg-cart-main #wsg-checkout-one:hover, .wsg-proxy-container button.wsg-button-fix:hover { background: #000000 !important; border-color: #000000 !important; } /* -------------------------------------------------------------------------- Der Kaufknopf heisst `#wsg-finalize` (Inspektor, 11.08.). `.button--loading` aus dem Anmeldeformular gilt hier NICHT — Gorilla nutzt auf der Prüfseite ein anderes Verfahren: Beim Laden bekommt der Knopf `wsg-loading-btn` und `disabled`, der Text wird per `.hide` ausgeblendet und der Ladekringel eingeblendet. Der zieht die Höhe auf — daher wirkte der Knopf als grauer Klotz. -------------------------------------------------------------------------- */ /* Feste Höhe, damit zwischen Beschriftung und Ladekringel nichts springt. Als Flex-Box, weil `overflow: hidden` mit fester Zeilenhöhe den Kringel schlicht abgeschnitten hat — der Knopf stand dann leer da. */ .wsg-proxy-container #wsg-finalize { display: flex !important; align-items: center; justify-content: center; height: 52px !important; padding-block: 0 !important; line-height: normal !important; } /* Im Ladezustand Farbe halten statt in Grau zu verfallen */ .wsg-proxy-container #wsg-finalize:has(#wsg-finalize-text.hide), .wsg-proxy-container #wsg-finalize:disabled, .wsg-proxy-container button.wsg-button-fix:disabled { background: #212121 !important; border-color: #212121 !important; color: #FFFFFF !important; opacity: 1 !important; cursor: progress; } /* Gorillas Ladekringel bringt kein eigenes Mass mit und dehnte den Knopf auf ~85 px. Sein Innenleben kommt aus dem nachgeladenen Markup und ist von hier nicht zuverlaessig zu treffen — deshalb wird er ausgeblendet und durch einen eigenen ersetzt, der in die 52 px passt. */ Ausgeloest wird ueber `#wsg-finalize-text.hide`, nicht ueber `.wsg-loading-btn` oder `:disabled`: die Klasse stand im Inspektor auch im Ruhezustand in der Liste, und `disabled` ist der Knopf auch bei leerem Warenkorb. Beides wuerde den Kringel dauerhaft drehen lassen. Der ausgeblendete Text dagegen heisst eindeutig: laedt gerade. */ .wsg-proxy-container #wsg-finalize:has(#wsg-finalize-text.hide) #wsg-finalize-loader { display: none !important; } .wsg-proxy-container #wsg-finalize:has(#wsg-finalize-text.hide)::after { content: ""; width: 22px; height: 22px; border: 3px solid rgba(203, 193, 169, 0.35); border-top-color: #CBC1A9; border-radius: 50%; animation: hh-kringel 0.8s linear infinite; } @keyframes hh-kringel { to { transform: rotate(1turn); } } /* ========================================================================== Eigenschaftstabelle auf der Produktseite Löst die HTML-Tabellen ab, die aus Ecwid in den Beschreibungen steckten. Zeilenlinien sind hier bewusst gesetzt: eine Datentabelle ohne Trennung ist auf Zeilenhöhe nicht mehr lesbar, und die alte Tabelle hatte sie auch. Auf schmalen Fenstern bricht sie in zwei Zeilen um — die alte tat das nicht. ========================================================================== */ .hh-eig { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.95rem; } .hh-eig__zeile { border-bottom: 1px solid #E3DED3; } .hh-eig__zeile:last-child { border-bottom: 0; } .hh-eig__bez { width: 34%; padding: 0.65rem 1rem 0.65rem 0; text-align: left; font-weight: 600; color: #4B463E; vertical-align: top; } .hh-eig__wert { padding: 0.65rem 0; color: #675F4B; vertical-align: top; } @media (max-width: 599px) { .hh-eig__bez, .hh-eig__wert { display: block; width: 100%; } .hh-eig__bez { padding-bottom: 0.15rem; } .hh-eig__wert { padding-top: 0; padding-bottom: 0.75rem; } } /* ========================================================================== Händlerexklusive Ware für Nicht-Händler Wholesale Gorilla sperrt die Produktseite („Einloggen und ansehen"), lässt die Kachel in der Kollektion aber stehen. Der Hinweis kommt deshalb eine Ebene früher — sonst klickt sich jemand durch und läuft in eine Sperrseite. ========================================================================== */ .hh-haendlerhinweis { grid-column: 2; width: 100%; max-width: var(--page-content-width); margin: 0 auto 1.5rem auto; padding: 1.25rem 1.5rem; background: #F7F4EF; border-left: 3px solid #CBC1A9; border-radius: 6px; } .hh-haendlerhinweis__text { margin: 0; color: #4B463E; font-size: 0.95rem; line-height: 1.5; } .hh-haendlerhinweis__links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: 0.9rem 0 0 0; font-size: 0.9rem; } .hh-haendlerhinweis__links a { color: #4B463E; text-decoration: underline; text-underline-offset: 3px; } .hh-haendlerhinweis__knopf { padding: 0.5rem 1.5rem; border-radius: 999px; background: #CBC1A9; color: #212121 !important; text-decoration: none !important; font-weight: 600; } .hh-haendlerhinweis__knopf:hover { background: #4B463E; color: #FFFFFF !important; } /* Steht auf der Kachel anstelle des Preises */ .hh-nur-haendler { display: inline-block; padding: 0.2rem 0.7rem; border: 1px solid #C6C1B8; border-radius: 999px; background: #F7F4EF; color: #675F4B; font-size: 0.8rem; white-space: nowrap; } /* Steht auf der Produktseite anstelle des Kaufknopfs, wenn die Ware gewerblich ist und niemand angemeldet ist. Siehe blocks/buy-buttons.liquid. */ .hh-kauf-gesperrt { margin: 1.25rem 0; padding: 1rem 1.25rem; border: 1px solid #C6C1B8; border-radius: 8px; background: #F7F4EF; } .hh-kauf-gesperrt__text { margin: 0 0 0.75rem 0; color: #4B463E; font-size: 0.95rem; line-height: 1.5; } .hh-kauf-gesperrt__links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0; font-size: 0.9rem; } .hh-kauf-gesperrt__knopf { display: inline-block; padding: 0.5rem 1.1rem; border-radius: 999px; background: #4B463E; color: #FFFFFF !important; text-decoration: none !important; font-weight: 600; } .hh-kauf-gesperrt__knopf:hover { background: #675F4B; color: #FFFFFF !important; } /* Pflichtfeld-Kennzeichnung im Händler-Anmeldeformular. Gorilla setzt `required` an den Eingaben, zeigt es aber nicht an — der Stern und der Hinweis oben werden per JS ergänzt (layout/theme.liquid). */ .hh-pflicht { color: #8A4B3C; font-weight: 600; } .hh-pflicht-hinweis { margin: 0 0 1.25rem 0; color: #675F4B; font-size: 0.85rem; } /* Luft unter dem Absenden-Knopf im Händlerformular — er klebte am Fussbereich */ .wsg-proxy-container .wsg-shipping-footer, #wsg-signup .wsg-shipping-footer { padding-bottom: 100px; } /* Leere Pflichtfelder im Händlerformular kennzeichnen. `:user-invalid` greift erst, nachdem jemand das Feld benutzt und leer verlassen hat — nicht beim Laden. `.hh-fehlt` setzt das Skript beim Absendeversuch. Rot ist bewusst gedämpft: Die CI kennt kein Signalrot, ein grelles #FF0000 würde in den warmen Tönen wie ein Fremdkörper wirken. */ #wsg-signup input:user-invalid, #wsg-signup select:user-invalid, #wsg-signup textarea:user-invalid, #wsg-signup .hh-fehlt { border-color: #A8342A !important; background-color: #FBF1EF !important; } #wsg-signup input:user-invalid:focus, #wsg-signup .hh-fehlt:focus { outline: 2px solid #A8342A; outline-offset: 1px; } /* Das Sternchen in derselben Farbe, damit der Zusammenhang sichtbar ist */ .hh-pflicht { color: #A8342A; } /* Fehlermeldung über dem Anmeldeformular, wenn Gorilla mit ?error= zurückkommt */ .hh-formfehler { margin: 0 0 1.5rem 0; padding: 0.9rem 1.1rem; border-left: 3px solid #A8342A; border-radius: 6px; background: #FBF1EF; color: #7A2A22; font-size: 0.95rem; line-height: 1.5; } /* Bestätigungsseite nach der Anmeldung: Der Knopf stand links unter mittigem Text. `.wsg-proxy-container` ist hier der Träger des gesamten Inhalts. */ #wsg-proxy-content { text-align: center; } #wsg-proxy-content .btn, #wsg-proxy-content button, #wsg-proxy-content a.button { margin-inline: auto; } /* ========================================================================== Händler-Login: Bild links, Anmeldung rechts Zwei Dinge, die beim ersten Anlauf nicht stimmten: 1. Unter dem Bild stand weisse Fläche bis zur Fussleiste. Ursache ist der Innenabstand der umgebenden Sektion — `:has()` nimmt ihn nur auf dieser Seite weg, damit das Bild bündig an die Fussleiste stösst. 2. Die Texte waren gemischt ausgerichtet: Überschrift links, Absätze mittig. Jetzt durchgängig zentriert — das ist Gorillas eigene Ausrichtung, so muss nichts dagegen überschrieben werden. ========================================================================== */ .section:has(.hh-login) { padding-block: 0 !important; max-width: none !important; } .hh-login { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; min-height: 78vh; margin: 0; } .hh-login__bild { background-image: url('/cdn/shop/files/hero-open-202602.jpg'); background-size: cover; background-position: center; background-color: #EFE8DE; min-height: 320px; } .hh-login__inhalt { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; text-align: center; } .hh-login__inhalt .wsg-proxy-container { width: 100%; max-width: 440px; } /* Gleichmässig zentriert — auch die Überschrift, die sonst links stünde */ .hh-login__inhalt h1, .hh-login__inhalt p { text-align: center; } .hh-login__inhalt h1 { margin-bottom: 1rem; } .hh-login__inhalt input, .hh-login__inhalt .wsg-login-input { width: 100%; } @media (max-width: 899px) { .hh-login { grid-template-columns: 1fr; min-height: 0; } .hh-login__bild { min-height: 220px; } .hh-login__inhalt { padding: 2.5rem 1rem 3rem 1rem; } } /* -------------------------------------------------------------------------- Prüfseite: mehr Kontrast im Text Gorillas Seite erbt den warmen Braunton des Themes (#675F4B). Auf der Seite, auf der über Geld entschieden wird, ist Schwarz das bessere Argument. Die Netto-Zeilen bleiben gedämpft — sie sind Beiwerk zum Bruttopreis, keine gleichrangige Angabe. -------------------------------------------------------------------------- */ #wsg-cart-main, #wsg-cart-main a, #wsg-cart-main .wsg-cart-product, #wsg-cart-main .wsg-product-full-info-block, #wsg-cart-main .wsg-cart-bottom-block { color: #212121; } #wsg-cart-main .hh-netto, #wsg-cart-main .hh-brutto-hinweis { color: #675F4B; } /* Notiz und Bestellnummer, jetzt oben unter der Überschrift. `.hh-notiz` setzt das Skript beim Verschieben, `__grund` ist die Begründungszeile darunter. */ /* Als grauer Kasten wie die Kacheln unten, nur neutral statt beige (Mirco, 14.09.: „smarter grauer Kasten drum"). */ .wsg-cart-notes { margin-block: 0 2rem; width: 100%; padding: 14px 18px; background: #F1F1EE; border-radius: 8px; box-sizing: border-box; } /* Der Auslöser ist ein nacktes