/** Shopify CDN: Minification failed Line 161:0 All "@import" rules must come first **/ /* ========================================================================== LOCHER & LANDWEHR · Shopify Design Refresh Drop-in CSS · Navy/Weiß · Premium-Reduktion (Cucinelli / Apple) -------------------------------------------------------------------------- INSTALLATION: 1. Shopify Admin → Online Store → Themes → "..." → Edit Code 2. assets/ → "Add a new asset" → ll-design-refresh.css 3. Paste den gesamten Inhalt dieser Datei 4. In layout/theme.liquid im einfügen (vor ): {{ 'll-design-refresh.css' | asset_url | stylesheet_tag }} 5. Speichern → Vorschau prüfen → Veröffentlichen -------------------------------------------------------------------------- PRIORITY: Diese Datei lädt zuletzt und überschreibt Theme-Defaults via höhere Spezifität + body-Scope. Falls Werte nicht greifen, !important gezielt einsetzen (markiert mit "FALLBACK"-Kommentar). ========================================================================== */ /* ========================================================================== 0. MOBILE HORIZONTAL-DRIFT FIX -------------------------------------------------------------------------- Die Scroll-Einblend-Animationen (section-animate / need-animate) blenden Sections/Bilder per transform: scale(1.05–1.1) ein → kurzzeitig 5–15 % breiter als der Viewport. Das Theme klippt das nur via overflow-x:hidden auf . iOS Safari scrollt aber am -Element → der Überstand leckt raus und die Seite driftet beim Scrollen seitlich ("wackelt"). overflow-x:clip fängt den Überstand am Root ab, OHNE einen neuen Scroll-Container zu erzeugen (hidden würde Sticky-Header/Off-Canvas-Drawer brechen). WICHTIG: `overflow-x: clip` auf bricht in Chrome (Desktop) das MAUSRAD-Scrollen (Scrollbar geht, Wheel nicht — bekannter Chromium-Bug). Der Drift ist ein Mobile-Problem, der Wheel-Bug ein Desktop-Problem → deshalb den Clip NUR auf Touch/Mobile anwenden. Desktop bleibt unberührt. ========================================================================== */ html, body { max-width: 100%; } @media (max-width: 990px), (pointer: coarse) { html, body { overflow-x: clip; } } /* Such-Button vorerst ausgeblendet (nur wenige Produkte, kein Katalog nötig) */ .header__icon--search, .header__icon--search-mobile, .header__icon--search-close { display: none !important; } /* Footer-Newsletter-Button „Eintragen": Animation raus, Text bleibt weiß (kein Blau-Swap beim Hover) */ .footer-form__button, .footer-form__button::before, .footer-form__button::after, .footer-form__button span, .footer-form__button * { transition: none !important; transform: none !important; animation: none !important; } .footer-form__button, .footer-form__button:hover, .footer-form__button:focus, .footer-form__button span, .footer-form__button span span { color: #ffffff !important; } /* Der eigentliche Slide: Duplikat-Text ::after (content:attr(data-text), top:100%) — komplett entfernen */ .footer-form__button span[data-text]::before, .footer-form__button span[data-text]::after { display: none !important; content: none !important; transform: none !important; transition: none !important; } .footer-form__button span[data-text] > span, .footer-form__button:hover span[data-text] > span { transform: none !important; transition: none !important; } /* Instagram/Social aus dem Footer (jetzt im Hamburger unter „Contact Details") */ .footer__navigation-item--contact { display: none !important; } /* Blog & Article on-brand: Inter (Body) / Cormorant (Headings) im Hauptinhalt erzwingen (überschreibt geleakte System-/Georgia-Fonts + Inline-Styles) */ .template-blog #MainContent, .template-article #MainContent, .template-blog #MainContent *, .template-article #MainContent * { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important; } .template-blog #MainContent h1, .template-blog #MainContent h2, .template-blog #MainContent h3, .template-blog #MainContent h4, .template-blog #MainContent .h0, .template-blog #MainContent .h1, .template-blog #MainContent .h2, .template-article #MainContent h1, .template-article #MainContent h2, .template-article #MainContent h3, .template-article #MainContent h4, .template-article #MainContent .h0, .template-article #MainContent .h1, .template-article #MainContent .h2 { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important; } /* ========================================================================== 1. DESIGN TOKENS (CSS Custom Properties) ========================================================================== */ :root { /* Farben */ --ll-navy: #001F3F; --ll-navy-90: #1a3653; --ll-navy-60: #677c93; --ll-navy-20: #ccd2db; --ll-navy-05: #f2f4f7; --ll-white: #ffffff; --ll-paper: #fafaf8; /* sehr leichter Off-White für Sections */ --ll-line: #e7e7e3; /* Trennlinien */ --ll-text: #001F3F; --ll-text-muted: #677c93; /* Typografie Hier stand "Playfair Display". Damit liefen im Shop zwei Serifenschriften nebeneinander: alle ll-*-Snippets (Startseite, Club, Produktseiten, Rechtstexte) setzen "Cormorant Garamond" direkt, waehrend ueberall dort, wo diese Variable greift, Playfair erschien. ll-club-styles.liquid musste das sogar eigens zurueckdrehen. Jetzt eine Schrift fuer alles. "Cormorant" als zweite Stufe, weil das Theme diese Variante ueber die Shopify-Schrifteinstellung laedt — optisch dieselbe Familie. */ --ll-font-head: "Cormorant Garamond", "Cormorant", Georgia, serif; --ll-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --ll-fs-xs: 12px; --ll-fs-sm: 14px; --ll-fs-base: 16px; --ll-fs-md: 18px; --ll-fs-lg: 22px; --ll-fs-xl: 32px; --ll-fs-2xl: 44px; --ll-fs-3xl: 64px; --ll-lh-tight: 1.15; --ll-lh-base: 1.55; --ll-tracking-tight: -0.01em; --ll-tracking-wide: 0.08em; /* 8-Punkt-Spacing-Scale */ --ll-s-1: 8px; --ll-s-2: 16px; --ll-s-3: 24px; --ll-s-4: 32px; --ll-s-5: 48px; --ll-s-6: 64px; --ll-s-7: 96px; --ll-s-8: 128px; /* Radien & Transitions */ --ll-radius: 2px; --ll-radius-lg: 4px; --ll-trans: 180ms cubic-bezier(0.4, 0, 0.2, 1); /* Touch-Targets */ --ll-touch: 44px; } /* ========================================================================== 2. WEB FONTS (laden falls Theme sie nicht schon einbindet) -------------------------------------------------------------------------- Playfair Display wurde hier mitgeladen, wird aber seit der Vereinheitlichung von --ll-font-head nirgends mehr benutzt — der Download ist entfallen. Cormorant Garamond kommt aus layout/theme.liquid, Inter braucht hier die 600er-Staerke, die dort fehlt. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"); /* ========================================================================== 3. GLOBAL RESET & BASE ========================================================================== */ body, .shopify-section, .page-width, .container { font-family: var(--ll-font-body); color: var(--ll-text); background: var(--ll-white); font-size: var(--ll-fs-base); line-height: var(--ll-lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ll-font-head); color: var(--ll-navy); font-weight: 500; letter-spacing: var(--ll-tracking-tight); line-height: var(--ll-lh-tight); margin: 0 0 var(--ll-s-3); } h1, .h1 { font-size: var(--ll-fs-3xl); font-weight: 500; } h2, .h2 { font-size: var(--ll-fs-2xl); } h3, .h3 { font-size: var(--ll-fs-xl); } h4, .h4 { font-size: var(--ll-fs-lg); } p { margin: 0 0 var(--ll-s-2); } a { color: var(--ll-navy); text-decoration: none; transition: color var(--ll-trans), opacity var(--ll-trans); } a:hover { opacity: 0.7; } img, picture, video { max-width: 100%; height: auto; display: block; } /* Eyebrow / Kategorielabels */ .eyebrow, .section__subheading, .product__category { font-family: var(--ll-font-body); font-size: var(--ll-fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); color: var(--ll-text-muted); } /* ========================================================================== 4. LAYOUT · CONTAINERS & SPACING ========================================================================== */ .page-width, .container, .shopify-section > .section, main .content-for-layout { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: var(--ll-s-3); padding-right: var(--ll-s-3); } @media (min-width: 750px) { .page-width, .container { padding-left: var(--ll-s-5); padding-right: var(--ll-s-5); } } /* Section-Spacing: großzügig, ruhig */ .shopify-section + .shopify-section { margin-top: 0; } section, .shopify-section > .section { padding-top: var(--ll-s-6); padding-bottom: var(--ll-s-6); } @media (min-width: 990px) { section, .shopify-section > .section { padding-top: var(--ll-s-7); padding-bottom: var(--ll-s-7); } } /* ========================================================================== 5. HEADER · Clean Navigation ========================================================================== */ .header, .site-header, header.section-header, .shopify-section-header { background: var(--ll-white); border-bottom: 1px solid var(--ll-line); padding: var(--ll-s-2) 0; } .header__heading-logo, .header__logo img, .site-header__logo img { max-height: 40px; width: auto; } /* Navigation – flach, viel Whitespace, kleine Caps */ .header__inline-menu .list-menu__item, .site-nav__link, nav.header__menu a { font-family: var(--ll-font-body); font-size: var(--ll-fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); color: var(--ll-navy); padding: var(--ll-s-1) var(--ll-s-2); } .header__inline-menu .list-menu__item:hover, .site-nav__link:hover { opacity: 0.6; } /* Announcement Bar – sehr dezent */ .announcement-bar, .utility-bar { background: var(--ll-navy); color: var(--ll-white); font-size: var(--ll-fs-xs); letter-spacing: var(--ll-tracking-wide); text-transform: uppercase; padding: 10px 0; text-align: center; } .announcement-bar a, .announcement-bar p { color: var(--ll-white); } /* ========================================================================== 6. HERO · Single Image, Restrained ========================================================================== */ .banner, .hero, .image-with-text, .section-image-banner { background: var(--ll-paper); } .banner__media, .hero__image, .banner__media img { object-fit: cover; min-height: 60vh; max-height: 80vh; } .banner__content, .hero__content { text-align: left; padding: var(--ll-s-6) var(--ll-s-4); max-width: 560px; } @media (min-width: 990px) { .banner__content, .hero__content { padding: var(--ll-s-7) var(--ll-s-5); } } .banner__heading, .hero__heading { font-family: var(--ll-font-head); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.05; color: var(--ll-navy); margin-bottom: var(--ll-s-3); } .banner__text, .hero__text { font-size: var(--ll-fs-md); color: var(--ll-text-muted); max-width: 440px; margin-bottom: var(--ll-s-4); } /* Slider-Dots & Pfeile dezent (falls Slider doch genutzt wird, sieht er ruhig aus) */ .slider-button { background: transparent; color: var(--ll-navy); } .slideshow__controls { gap: var(--ll-s-2); } /* ========================================================================== 7. BUTTONS · Konsistent, Navy-First ========================================================================== */ .btn, .button, .shopify-payment-button__button, button.product-form__submit, .cta, input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ll-touch); padding: 14px 28px; border: 1px solid var(--ll-navy); border-radius: var(--ll-radius); background: var(--ll-navy); color: var(--ll-white); font-family: var(--ll-font-body); font-size: var(--ll-fs-sm); font-weight: 500; letter-spacing: var(--ll-tracking-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--ll-trans), color var(--ll-trans), transform var(--ll-trans); line-height: 1; } .btn:hover, .button:hover, .shopify-payment-button__button:hover, button.product-form__submit:hover { background: var(--ll-navy-90); color: var(--ll-white); opacity: 1; } .btn:active, .button:active { transform: translateY(1px); } /* Outline-Variante */ .btn--secondary, .button--secondary, .btn-outline, .button.button--outline { background: transparent; color: var(--ll-navy); } .btn--secondary:hover, .button--secondary:hover { background: var(--ll-navy); color: var(--ll-white); } /* Disabled */ .btn:disabled, .button:disabled { background: var(--ll-navy-20); border-color: var(--ll-navy-20); cursor: not-allowed; } /* ========================================================================== 8. COLLECTION GRID · Sauberes 3/4er Grid ========================================================================== */ .collection, .product-grid-container, .section-collection-list { background: var(--ll-white); } .product-grid, .grid--collection, ul.collection-grid, .grid.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ll-s-3); list-style: none; padding: 0; margin: 0; } @media (min-width: 750px) { .product-grid, .grid--collection, ul.collection-grid, .grid.product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--ll-s-4); } } @media (min-width: 1200px) { .product-grid, .grid--collection, ul.collection-grid, .grid.product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--ll-s-4); } } /* Card */ .card-wrapper, .card, .product-card, .grid__item { background: transparent; border: none; overflow: hidden; } .card__media, .product-card__media, .media--product { background: var(--ll-paper); border-radius: var(--ll-radius); overflow: hidden; margin-bottom: var(--ll-s-2); aspect-ratio: 4 / 5; } .card__media img, .product-card__media img, .media--product img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); } /* Subtiler Hover – kein wildes Skalieren */ .card-wrapper:hover .card__media img, .product-card:hover .product-card__media img { transform: scale(1.02); } .card__content, .product-card__content, .card__information { padding: 0; text-align: left; } .card__heading, .product-card__title, .card__heading a { font-family: var(--ll-font-body); font-size: var(--ll-fs-base); font-weight: 500; color: var(--ll-navy); margin: 0 0 4px; line-height: 1.3; } .price, .product-card__price, .card-information__price { font-family: var(--ll-font-body); font-size: var(--ll-fs-sm); color: var(--ll-text-muted); font-weight: 400; } .price--on-sale .price__sale, .price__regular { color: var(--ll-navy); } .price--on-sale .price__regular { text-decoration: line-through; opacity: 0.5; } /* Quick-Add ausblenden – Cards bleiben ruhig */ .quick-add, .card__quick-add, .product-card__quick-add { display: none; } /* Sale-Badge dezent */ .badge, .card__badge, .product-card__badge { background: var(--ll-white); color: var(--ll-navy); border: 1px solid var(--ll-navy); font-size: var(--ll-fs-xs); font-weight: 500; letter-spacing: var(--ll-tracking-wide); text-transform: uppercase; padding: 4px 10px; border-radius: 0; } /* ========================================================================== 9. FILTER / SORT · Eine Bar, dezent ========================================================================== */ .facets, .collection-filters, .product-filters { border-top: 1px solid var(--ll-line); border-bottom: 1px solid var(--ll-line); padding: var(--ll-s-2) 0; margin-bottom: var(--ll-s-4); } .facets summary, .collection-filters__summary { font-size: var(--ll-fs-xs); text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); color: var(--ll-navy); padding: var(--ll-s-1) var(--ll-s-2); cursor: pointer; } .collection-sort__select, .facets__select { border: 1px solid var(--ll-line); border-radius: var(--ll-radius); padding: 10px 14px; background: var(--ll-white); font-size: var(--ll-fs-sm); color: var(--ll-navy); font-family: var(--ll-font-body); } /* ========================================================================== 10. PRODUCT DETAIL PAGE · 2-Column Desktop ========================================================================== */ .product, .section-product, .product-page { padding-top: var(--ll-s-4); padding-bottom: var(--ll-s-6); } .product__container, .product-page__grid, .product .grid { display: grid; grid-template-columns: 1fr; gap: var(--ll-s-4); } @media (min-width: 990px) { .product__container, .product-page__grid, .product .grid { grid-template-columns: 1.2fr 1fr; gap: var(--ll-s-6); align-items: start; } } /* Media */ .product__media, .product__media-list, .product-page__media { position: sticky; top: var(--ll-s-4); } .product__media img, .product-media img { border-radius: var(--ll-radius); background: var(--ll-paper); } /* Info */ .product__info, .product-page__info { max-width: 480px; } .product__title, h1.product__title, .product-page__title { font-family: var(--ll-font-head); font-size: clamp(28px, 3.5vw, 44px); font-weight: 500; line-height: 1.1; margin: 0 0 var(--ll-s-2); color: var(--ll-navy); } .product__price, .price--large { font-family: var(--ll-font-body); font-size: var(--ll-fs-md); color: var(--ll-navy); font-weight: 500; margin-bottom: var(--ll-s-3); } .product__description, .product__text, .rte { color: var(--ll-text); font-size: var(--ll-fs-base); line-height: var(--ll-lh-base); margin-bottom: var(--ll-s-4); } .product__description p:last-child { margin-bottom: 0; } .product__description ul { list-style: none; padding: 0; margin: var(--ll-s-2) 0; } .product__description li { padding: var(--ll-s-1) 0; border-bottom: 1px solid var(--ll-line); font-size: var(--ll-fs-sm); color: var(--ll-text); } .product__description li:last-child { border-bottom: none; } /* Variant-Picker · Buttons statt Dropdowns */ .product-form__input, .variant-input-wrap, fieldset.product-form__input { border: none; padding: 0; margin: 0 0 var(--ll-s-3); } .product-form__input legend, .form__label { font-size: var(--ll-fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); color: var(--ll-text-muted); margin-bottom: var(--ll-s-1); display: block; } .product-form__input input[type="radio"] + label, .variant-input label, .product-form__pill, .swatch { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 44px; padding: 0 var(--ll-s-2); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); margin-right: 8px; margin-bottom: 8px; font-size: var(--ll-fs-sm); color: var(--ll-navy); background: var(--ll-white); cursor: pointer; transition: border-color var(--ll-trans), background var(--ll-trans); } .product-form__input input[type="radio"]:checked + label, .variant-input label.is-active, .swatch.is-active { border-color: var(--ll-navy); background: var(--ll-navy); color: var(--ll-white); } /* Engraving / Customization · separate Section, deutlich abgegrenzt */ .product-customization, .engraving-section, .product-personalization, .product-form__input--engraving { margin: var(--ll-s-4) 0; padding: var(--ll-s-3); background: var(--ll-navy-05); border-radius: var(--ll-radius-lg); border-left: 3px solid var(--ll-navy); } .product-customization legend, .engraving-section h3 { font-family: var(--ll-font-head); font-size: var(--ll-fs-md); margin-bottom: var(--ll-s-2); color: var(--ll-navy); text-transform: none; letter-spacing: normal; } .product-customization input[type="text"], .engraving-section input, .product-personalization textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ll-line); border-radius: var(--ll-radius); font-family: var(--ll-font-body); font-size: var(--ll-fs-base); color: var(--ll-navy); background: var(--ll-white); } .product-customization input:focus, .engraving-section input:focus { outline: none; border-color: var(--ll-navy); } /* CTA – Add to Cart */ .product-form__buttons, .product-form__submit-buttons { display: flex; flex-direction: column; gap: var(--ll-s-1); margin-top: var(--ll-s-3); } .product-form__submit, .shopify-payment-button__button--unbranded { width: 100%; padding: 18px 28px; font-size: var(--ll-fs-sm); } /* Quantity – minimal */ .quantity__button, .quantity__input { height: 44px; background: var(--ll-white); border: 1px solid var(--ll-line); color: var(--ll-navy); } /* ========================================================================== 11. FOOTER · 3-4 Spalten, viel Luft, Legal dezent ========================================================================== */ .footer, footer.site-footer, .shopify-section-footer { background: var(--ll-navy); color: var(--ll-white); padding: var(--ll-s-6) 0 var(--ll-s-3); margin-top: var(--ll-s-7); } .footer__content-top, .site-footer__content { display: grid; grid-template-columns: 1fr; gap: var(--ll-s-4); max-width: 1280px; margin: 0 auto; padding: 0 var(--ll-s-3); } @media (min-width: 750px) { .footer__content-top, .site-footer__content { grid-template-columns: repeat(4, 1fr); gap: var(--ll-s-5); padding: 0 var(--ll-s-5); } } .footer-block__heading, .site-footer__heading { font-family: var(--ll-font-body); font-size: var(--ll-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); color: var(--ll-white); margin-bottom: var(--ll-s-2); } .footer-block__details-content a, .site-footer__linklist a { color: var(--ll-white); font-size: var(--ll-fs-sm); opacity: 0.75; display: block; padding: 4px 0; } .footer-block__details-content a:hover { opacity: 1; } /* Bottom-Bar mit Legal-Links – sehr klein, sehr dezent */ .footer__content-bottom, .site-footer__copyright { margin-top: var(--ll-s-5); padding: var(--ll-s-2) 0 0; border-top: 1px solid rgba(255,255,255,0.15); font-size: var(--ll-fs-xs); color: rgba(255,255,255,0.5); letter-spacing: var(--ll-tracking-wide); text-transform: uppercase; } .footer__content-bottom a { color: rgba(255,255,255,0.7); margin-left: var(--ll-s-2); } /* Newsletter im Footer – ruhig */ .footer__newsletter input[type="email"] { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: var(--ll-white); padding: 12px 14px; border-radius: var(--ll-radius); width: 100%; } .footer__newsletter input[type="email"]::placeholder { color: rgba(255,255,255,0.5); } .footer__newsletter button { background: var(--ll-white); color: var(--ll-navy); border-color: var(--ll-white); margin-top: var(--ll-s-1); } /* ========================================================================== 12. CART · Clean, klare Controls ========================================================================== */ .cart-page, .cart, main.cart-page { padding: var(--ll-s-5) 0; } .cart-items, .cart__items table { width: 100%; border-collapse: collapse; } .cart-item, .cart__row { display: grid; grid-template-columns: 100px 1fr auto auto; gap: var(--ll-s-3); align-items: center; padding: var(--ll-s-3) 0; border-bottom: 1px solid var(--ll-line); } @media (max-width: 749px) { .cart-item, .cart__row { grid-template-columns: 80px 1fr; grid-template-rows: auto auto; } } .cart-item__media img { border-radius: var(--ll-radius); background: var(--ll-paper); } .cart-item__name { font-family: var(--ll-font-body); font-size: var(--ll-fs-base); font-weight: 500; color: var(--ll-navy); } .cart-item__price { font-size: var(--ll-fs-sm); color: var(--ll-text-muted); } .cart-item__quantity .quantity { display: inline-flex; border: 1px solid var(--ll-line); border-radius: var(--ll-radius); overflow: hidden; } .cart-item__quantity .quantity__button { border: none; width: 36px; height: 36px; background: var(--ll-white); } .cart-remove, .cart-item__remove, button[name="updates[]"][value="0"] { background: none; border: none; color: var(--ll-text-muted); font-size: var(--ll-fs-xs); text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); cursor: pointer; padding: 0; min-height: auto; text-decoration: underline; } .cart-remove:hover { color: var(--ll-navy); background: none; } .cart__footer, .cart-summary { margin-top: var(--ll-s-4); padding-top: var(--ll-s-4); border-top: 1px solid var(--ll-line); display: flex; flex-direction: column; align-items: flex-end; gap: var(--ll-s-2); } .cart__total, .totals__total { font-family: var(--ll-font-head); font-size: var(--ll-fs-lg); color: var(--ll-navy); } /* ========================================================================== 13. FORMS · Inputs, Selects, Textareas ========================================================================== */ input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="password"], select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--ll-line); border-radius: var(--ll-radius); background: var(--ll-white); font-family: var(--ll-font-body); font-size: var(--ll-fs-base); color: var(--ll-navy); min-height: var(--ll-touch); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ll-navy); } label, .form__label { font-size: var(--ll-fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); color: var(--ll-text-muted); margin-bottom: 6px; display: block; } /* ========================================================================== 14. ANIMATIONEN · Subtil oder aus ========================================================================== */ html { /* Sanfte Anker-Sprünge — NICHT auf * (das blockiert gefühlt das Mausrad auf animationslastigen Seiten wie der Startseite). */ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } .scroll-trigger, .animate-on-scroll { transition: opacity 400ms ease, transform 400ms ease; } /* Aggressive Theme-Animationen abschalten */ [data-aos], .banner__media img.animate { animation: none !important; } /* ========================================================================== 15. SEARCH · Unauffällig ========================================================================== */ .search-modal, .predictive-search { background: var(--ll-white); border-top: 1px solid var(--ll-line); } .search__input, .predictive-search__input { border: none; border-bottom: 1px solid var(--ll-line); border-radius: 0; font-size: var(--ll-fs-lg); padding: var(--ll-s-3) 0; font-family: var(--ll-font-head); color: var(--ll-navy); } /* ========================================================================== 16. MOBILE OVERRIDES ========================================================================== */ @media (max-width: 749px) { h1, .h1 { font-size: 36px; } h2, .h2 { font-size: 28px; } h3, .h3 { font-size: 22px; } body { font-size: 15px; } .page-width, .container { padding-left: var(--ll-s-2); padding-right: var(--ll-s-2); } section, .shopify-section > .section { padding-top: var(--ll-s-5); padding-bottom: var(--ll-s-5); } /* Mobile-Touch-Targets */ a, button, .btn, input, select { min-height: var(--ll-touch); } /* Mobile-Nav (Drawer) */ .menu-drawer { background: var(--ll-white); padding: var(--ll-s-4) var(--ll-s-3); } .menu-drawer__menu a { font-size: var(--ll-fs-md); padding: var(--ll-s-2) 0; border-bottom: 1px solid var(--ll-line); } } /* ========================================================================== 17. UTILITIES ========================================================================== */ .u-mt-0 { margin-top: 0 !important; } .u-mb-0 { margin-bottom: 0 !important; } .u-text-center { text-align: center; } .u-text-muted { color: var(--ll-text-muted); } .u-divider { height: 1px; background: var(--ll-line); margin: var(--ll-s-4) 0; border: none; } /* ========================================================================== 18. ALLURE THEME · Spezifische Overrides (Switch Themes · Allure) -------------------------------------------------------------------------- Allure folgt weitgehend Shopify-2.0/Dawn-Konventionen, hat aber ein paar eigene Klassen. Diese Regeln stellen sicher, dass unser Design-Refresh auch wirklich greift. ========================================================================== */ /* --- Header / Navigation --- */ .header, .header-wrapper, .section-header { background: var(--ll-white) !important; border-bottom: 1px solid var(--ll-line); box-shadow: none; } .header__heading-link { padding: 0; } .header__menu-item, .header__inline-menu .list-menu__item { font-family: var(--ll-font-body); font-size: var(--ll-fs-xs); text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); font-weight: 500; color: var(--ll-navy); } .mega-menu__content, .header__submenu { background: var(--ll-white); border: 1px solid var(--ll-line); border-radius: var(--ll-radius); box-shadow: 0 4px 16px rgba(0,31,63,0.04); padding: var(--ll-s-3); } /* --- Allure Hero / Image-Banner --- */ .banner--content-align-mobile-center .banner__content, .banner__box, .image-banner__content { padding: var(--ll-s-6) var(--ll-s-4) !important; max-width: 560px; background: transparent !important; border: none !important; text-align: left !important; } .banner h2.banner__heading, .banner__heading { font-family: var(--ll-font-head) !important; font-weight: 400 !important; font-size: clamp(36px, 5vw, 64px) !important; letter-spacing: -0.01em !important; } .banner__text { font-size: var(--ll-fs-md); color: rgba(255,255,255,0.85); } .slideshow__autoplay, .slideshow-button { display: none; } /* --- Allure Product Cards --- */ .card-wrapper, .product-card-wrapper { background: transparent !important; border: none !important; box-shadow: none !important; } .card, .card__inner { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .card__media, .card .media { background: var(--ll-paper); border-radius: var(--ll-radius); overflow: hidden; aspect-ratio: 4/5; } .card__heading, .card-information__text, .card-information a { font-family: var(--ll-font-body) !important; font-size: var(--ll-fs-base); font-weight: 500; color: var(--ll-navy) !important; text-transform: none !important; letter-spacing: 0 !important; } .card__heading a:hover { color: var(--ll-navy-90) !important; } .price__regular .price-item--regular, .price-item--regular { color: var(--ll-text-muted); font-size: var(--ll-fs-sm); font-weight: 400; } .price__sale .price-item--sale { color: var(--ll-navy); font-weight: 500; } /* Allure Hover-Animationen abschalten */ .card-wrapper:hover .card__media .motion-reduce, .card-wrapper .card__media img.motion-reduce { transform: none !important; } /* Card-Hover: subtiles Scale */ .card-wrapper:hover .card__media img { transform: scale(1.02) !important; } /* Quick-View Overlay aus */ .card__overlay, .card__quick-shop, .quick-view-btn { display: none !important; } /* --- Allure Collection Grid --- */ .grid--3-col-desktop > .grid__item, .grid--4-col-desktop > .grid__item { padding: 0; } ul.grid.product-grid { gap: var(--ll-s-3); } @media (min-width: 990px) { ul.grid.product-grid { gap: var(--ll-s-4); } } /* --- Allure PDP --- */ .product-section, .section-main-product { padding-top: var(--ll-s-5); padding-bottom: var(--ll-s-7); } .product__title h1, .product__title.h1 { font-family: var(--ll-font-head) !important; font-weight: 500 !important; font-size: clamp(28px, 3.5vw, 44px) !important; letter-spacing: -0.01em !important; text-transform: none !important; } .product__media-wrapper { background: var(--ll-paper); border-radius: var(--ll-radius); } .product__info-wrapper, .product__info { padding-left: var(--ll-s-4); } @media (max-width: 989px) { .product__info-wrapper { padding-left: 0; } } .product .price--large .price-item { font-family: var(--ll-font-body); font-size: var(--ll-fs-md); color: var(--ll-navy); } /* Allure-Variant-Buttons (Pill-Style) */ .product-form__input--pill input[type="radio"] + label, .product-form__input--swatch input[type="radio"] + label { border-radius: var(--ll-radius) !important; border: 1px solid var(--ll-line) !important; padding: 0 var(--ll-s-2) !important; min-width: 48px; height: 44px; background: var(--ll-white); color: var(--ll-navy); font-weight: 500; } .product-form__input--pill input[type="radio"]:checked + label { background: var(--ll-navy) !important; color: var(--ll-white) !important; border-color: var(--ll-navy) !important; } /* Allure Add-to-Cart */ .product-form__submit, .shopify-payment-button__button { background: var(--ll-navy) !important; color: var(--ll-white) !important; border: 1px solid var(--ll-navy) !important; border-radius: var(--ll-radius) !important; font-family: var(--ll-font-body) !important; text-transform: uppercase !important; letter-spacing: var(--ll-tracking-wide) !important; font-weight: 500 !important; } .product-form__submit:hover { background: var(--ll-navy-90) !important; } .shopify-payment-button__more-options { color: var(--ll-text-muted) !important; font-size: var(--ll-fs-xs); text-transform: uppercase; letter-spacing: var(--ll-tracking-wide); } /* --- Allure Quick-Cart-Drawer --- */ .drawer, .cart-drawer { background: var(--ll-white); border-left: 1px solid var(--ll-line); } .drawer__header, .cart-drawer__header { border-bottom: 1px solid var(--ll-line); padding: var(--ll-s-3); } .drawer__heading { font-family: var(--ll-font-head); font-size: var(--ll-fs-lg); font-weight: 500; } /* --- Allure Footer --- */ .footer__content-top { padding-top: var(--ll-s-6); padding-bottom: var(--ll-s-5); } .footer-block__heading { font-family: var(--ll-font-body) !important; font-size: var(--ll-fs-xs); letter-spacing: var(--ll-tracking-wide); text-transform: uppercase; font-weight: 600; } .footer-block__details-content { font-size: var(--ll-fs-sm); } .footer__content-bottom-wrapper { border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--ll-s-2); margin-top: var(--ll-s-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ll-s-2); } .footer__column--social .list-social { gap: var(--ll-s-1); } /* --- Allure Predictive-Search / Search-Overlay --- */ .predictive-search, .search-modal__content { background: var(--ll-white) !important; } .search__input.field__input { font-family: var(--ll-font-head); font-size: var(--ll-fs-lg); border: none; border-bottom: 1px solid var(--ll-line); border-radius: 0; padding: var(--ll-s-2) 0; } /* --- Allure Sticky-Add-to-Cart (falls aktiv) --- */ .sticky-product-form, .product-form-sticky { background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--ll-line); box-shadow: 0 -4px 16px rgba(0,31,63,0.04); padding: var(--ll-s-2) var(--ll-s-3); } /* --- Allure Animationen reduzieren --- */ .scroll-trigger.animate--slide-in, .scroll-trigger.animate--fade-in { animation-duration: 300ms !important; animation-timing-function: ease-out !important; } [data-aos] { transition-duration: 200ms !important; } /* --- Allure Color-Swatch (separate Engraving-Anpassung) --- */ .product-form__input.product-form__input--engraving, .product-form__input[data-property="Initialen"], .product-form__input[data-property="Garnfarbe"] { background: var(--ll-navy-05); padding: var(--ll-s-3); border-radius: var(--ll-radius-lg); border-left: 3px solid var(--ll-navy); margin: var(--ll-s-3) 0; } /* ========================================================================== 19. ALLURE-FEATURES, die du im Theme-Editor abschalten solltest -------------------------------------------------------------------------- Diese sind im Theme-Editor (nicht im Code) zu erledigen, damit das Design ruhig bleibt: - Slideshow: max. 1 Slide, Autoplay aus - Promo-Grid mit großen Icons: aus - Newsletter-Pop-up: aus oder Delay > 30 Sek - "Bestseller / Trending"-Karussell: stattdessen Grid-Section verwenden - Sticky Add-to-Cart: optional, aber dezent - Image-Animationen ("Ken Burns" Effekt): aus - Cursor-Effects (Custom Cursor): aus - Marquee / Lauftext-Banner: aus ========================================================================== */ /* ========================================================================== CTA "Ein Gürtel, den man nur einmal kauft" — Farben global wie Startseite Die alte Variante (.footer-cta) setzt keine Heading-Farbe, daher erbt das

das Navy aus dem Theme (unsichtbar auf Navy-Hintergrund). Hier global auf Weiß/Gold gezwungen, damit es auf ALLEN Seiten wie die Startseite aussieht. ========================================================================== / .footer-cta h2 { color: #FFFAE9 !important; / cream/weiß / } .footer-cta h2 em { color: #B48A3A !important; / gold / } / ========================================================================== Startseite Hero (.lh-hero) — Bildausschnitt auf Desktop. Ziel: Köpfe + Oberkörper + Gürtel sichtbar, Füße/untere Beine abgeschnitten. URSACHE des Abschneidens: Das Theme nutzt auf Desktop `background-attachment: fixed` (Parallax). Dadurch bezieht sich `background-position: top` auf den VIEWPORT (y=0, hinter der Navbar) statt auf die Hero-Box → die Köpfe landen hinter der Navigationsleiste. Fix: `scroll` → Position bezieht sich auf die Box, der obere Bildrand schließt direkt unter der Navbar an, Köpfe sichtbar. `cover` bleibt → keine seitlichen Ränder. Geringere Höhe (64vh) schneidet unten mehr ab, Fokus auf Oberkörper/Gürtel. Nur Desktop (≥768px). ========================================================================== / @media screen and (min-width: 768px) { .lh-hero { background-attachment: scroll !important; background-position: center top !important; background-size: cover !important; min-height: 64vh !important; } } / logo-size: desktop 120 / mobile 64 — build marker LL-2026-06-04 / / ========================================================================== Header-Logo — war mit 40px viel zu klein (eine bestehende Regel `max-height: 40px` in dieser Datei hielt es klein → hier mit !important überschrieben). Dasselbe Logo-Bild (`.headerheading-logo`, Wappen + Schriftzug "LOCHER & LANDWEHR") wird auf Desktop UND Mobile genutzt. `object-fit: contain` bleibt → keine Verzerrung; Bild hat 2×-srcset → scharf. Mobile: 64px (Schriftzug klar lesbar, passt in den schmalen Header). Desktop (≥768px): 120px (≈ verdoppelt, füllt den weißen Raum der Leiste). So sieht das Logo auf allen Seiten konsistent groß aus. ========================================================================== / .headerheading-logo { height: 64px !important; max-height: 64px !important; } .headerheading-link { height: auto !important; } @media screen and (min-width: 768px) { .headerheading-logo { height: 120px !important; max-height: 120px !important; } } / ========================================================================== "Accessoires" temporär ausblenden (WE-Launch: erstmal nur Gürtel). Blendet den Menüpunkt "Accessoires" (Desktop + Mobile) inkl. Dropdown aus. Damit sind auch die Schlüsselanhänger (nur dort verlinkt) nicht mehr in der Navigation sichtbar. Zum Reaktivieren: diesen Block entfernen. Hinweis: Die Schlüsselbund-Produktseiten (/products/schluesselbund-) bleiben per Direkt-URL erreichbar → falls ganz raus, im Admin auf "unveröffentlicht". ========================================================================== / .header-menuitem-wrapper:has(a[href="/collections/accessoires"]), .header-mobilemenu-item-wrapper:has(a[href="/collections/accessoires"]) { display: none !important; } /* ========================================================================== FOOTER-REVEAL-SPRUNG FIX (global) -------------------------------------------------------------------------- Der Footer ist `need-animate js-animate`. Sein Scroll-Reveal startet mit transform: translateY(-40px) (--animate-section-translateY) und rutscht beim ersten Sichtbarwerden nach unten in Position. Dadurch erscheint der weiße Link-Block kurz 40px zu hoch und "springt" über den blauen Balken — genau einmal, beim ersten Scrollen zum Footer nach dem Laden. Fix: dem Footer NUR den vertikalen Versatz nehmen (kein translateY mehr). Der dezente Opacity-Fade bleibt erhalten; der Sprung ist weg. ========================================================================== / .footer.need-animate, .footer.animated { transform: none !important; } / ========================================================================== BLOG-UEBERSICHT: SCHRIFT DER ARTIKELKARTEN (/blogs/news) -------------------------------------------------------------------------- Die Artikelkarte traegt `article-cardtitle h4` (snippets/article-card.liquid). Das Theme setzt die Serifenschrift nur fuer h1-h3; ab h4 kommt Inter. Auf der Uebersicht standen die Artikeltitel dadurch in Inter, waehrend die Seiten- ueberschrift darueber und die Artikelseiten selbst Cormorant Garamond nutzen. Hier nur die Schrift angleichen — Groesse und Abstaende bleiben, wie das Theme sie setzt. Die Selektoren muessen ueber "#MainContent" laufen: weiter oben in dieser Datei setzt `.template-blog #MainContent { font-family: Inter !important }` den ganzen Blogbereich auf die Grundschrift. Gegen diese ID-Spezifitaet kommt eine reine Klassenregel auch mit !important nicht an. ========================================================================== / .template-blog #MainContent .article-cardtitle, .template-blog #MainContent .article-cardtitle-link, .template-article #MainContent .article-cardtitle, .template-article #MainContent .article-cardtitle-link, #MainContent .featured-blog .article-cardtitle, #MainContent .featured-blog .article-cardtitle-link { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 400 !important; letter-spacing: 0.2px; } / ========================================================================== SEITENKOEPFE: KLEINES GOLDLABEL UEBER DER UEBERSCHRIFT -------------------------------------------------------------------------- Muster der Startseite (.lh-models-label / .lh-worlds-label): eine kleine Zeile in Gold, darunter die Ueberschrift in Cormorant. Damit die Unterseiten dieselbe Handschrift tragen, gilt es hier auch fuer .preamble — die Klasse nutzen sowohl das Ueber-uns-Snippet als auch Seiten, deren HTML im Shopify-Editor gepflegt wird (z. B. Die Werkstatt). Letztere bringen ihr eigenes CSS mit und setzen die Farbe auf Grau; deshalb !important. ========================================================================== / #MainContent .preamble { color: #B48A3A !important; } / Wiederverwendbares Goldlabel fuer Seitenkoepfe (Blog, Kontakt, weitere). Bewusst hier und nicht je Section, damit alle Seiten dieselbe Zeile teilen. / #MainContent .ll-page-label { font-family: var(--ll-font-body); font-size: 11px; font-weight: 400; letter-spacing: 2.8px; text-transform: uppercase; color: #B48A3A; text-align: center; margin: 0 0 14px; } / Seitenkopf (snippets/ll-page-head.liquid): Goldlabel + Ueberschrift. / #MainContent .ll-page-head { max-width: 900px; margin: 0 auto; padding: 72px 32px 8px; text-align: center; } #MainContent .ll-page-title { font-family: var(--ll-font-head); font-size: clamp(34px, 5vw, 52px); font-weight: 300; line-height: 1.15; letter-spacing: -0.4px; color: var(--ll-navy); margin: 0; } #MainContent .ll-page-sub { margin: 16px auto 0; max-width: 620px; font-size: 16px; line-height: 1.7; color: var(--ll-text-muted); } @media (max-width: 640px) { #MainContent .ll-page-head { padding: 52px 24px 4px; } } / Seiten, deren HTML im Shopify-Editor gepflegt wird (Die Werkstatt u. a.), bringen eigene Abstaende mit: dort sass das Goldlabel deutlich hoeher als auf den Theme-Seiten. Gleicher Kopfabstand fuer alle .page-Container. / #MainContent .page { padding-top: 110px !important; } @media (max-width: 640px) { #MainContent .page { padding-top: 72px !important; } } / Der Blogtitel traegt zusaetzlich .ll-page-title (siehe blog-template.liquid). Die Theme-Regel setzt darunter noch einen eigenen Abstand — hier angeglichen, damit Label, Titel und Liste denselben Rhythmus haben wie die Seitenkoepfe. */ .template-blog #MainContent .blogtitle.ll-page-title { margin-bottom: 40px; }