/* Theme Name: Motip Theme URI: https://www.motip.com/ Description: Motip-Child-Theme für den PoC-Shop. Basiert auf Storefront. Layout-Anpassungen, Single-Product-Page im Motip-Look, Header-Layout in einer Zeile, keine Sidebar. Author: Netzspitze Template: storefront Version: 1.0 Text Domain: motip */ /* ============================================================ BASIS + DARK-THEME Diagonale Akzent-Wedges links/rechts (motip.com-Signatur). Base var(--motip-black-2, #0A0A0A), leicht hellere Wedges var(--motip-card-2, #161616) als „Bühnen-Rahmen". Wedges sitzen als ::before auf .site-content mit position:absolute, d.h. sie scrollen mit dem Inhalt (nicht am Viewport fixiert). Volle Breite, weil .site-content selbst die volle Viewport-Breite einnimmt — .col-full ist der content-zentrierende Wrapper *innerhalb*. ============================================================ */ /* Body: Schwarz-Grau-Schwarz Look auf ALLEN Seiten. Farben exakt nach motip.com: - Grau (Body-BG + Header): var(--motip-bg, #1D1E1D) - Schwarz (Wedges + Footer): var(--motip-black, #000000) Mit identischer Header- und Footer-Farbe verschwinden die Übergänge — kein Rahmen mehr zwischen Header/Content und Content/Footer. Wedge-Mechanik: - Zwei linear-gradient-Layer am Body, jeder 60vw × 80vh - `to bottom right` / `to top left` → Gradient-Achse exakt von Ecke zu Ecke der Box → Triangle-Spitze sitzt IMMER an der Body-Ecke - background-attachment: scroll → Wedges scrollen mit dem Content */ html { overflow-x: hidden; } /* WICHTIG: body.custom-background im Selektor, sonst überschreibt WPs inline-injiziertes `body.custom-background { background-color: ... }` am Ende des unsere Body-Farbe. */ body, body.wp-singular, body.custom-background, body.wp-singular.custom-background { background-color: var(--motip-bg, #1D1E1D) !important; color: var(--motip-text, #CCCCCC); background-image: /* TL schwarzer Wedge */ linear-gradient(to bottom right, var(--motip-black, #000000) 0%, var(--motip-black, #000000) 50%, transparent 50.1%), /* BR schwarzer Wedge */ linear-gradient(to top left, var(--motip-black, #000000) 0%, var(--motip-black, #000000) 50%, transparent 50.1%); background-repeat: no-repeat; background-size: 60vw 80vh, 60vw 80vh; background-position: 0 0, 100% 100%; background-attachment: scroll; overflow-x: hidden; } #content.site-content, .site-content, .site-main, .content-area, #content, .page-content { background-color: transparent !important; color: var(--motip-text, #CCCCCC); } #content.site-content::before { content: none !important; } h1, h2, h3, h4, h5, h6, .entry-title, .page-title, .product_title, .woocommerce-loop-product__title { color: var(--motip-light, #FFFFFF) !important; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800; } p, li, td, dd, dt { color: var(--motip-text, #CCCCCC); } a { color: var(--motip-light, #FFFFFF); text-decoration: none; } a:hover { color: var(--motip-accent, #E30613); } /* ============================================================ SIDEBAR aus ============================================================ */ body #secondary, body .widget-area, body aside.widget-area, body aside#secondary, body .sidebar, body.woocommerce-page #secondary { display: none !important; width: 0 !important; } body .content-area, body #primary, body .site-main, body.woocommerce-page .content-area, body.woocommerce-page #primary { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; float: none !important; } /* ============================================================ HEADER in 1 Zeile ============================================================ */ body .site-header, body .site-header *, body .site-header > * { float: none !important; clear: none !important; } body .site-header { position: relative !important; display: flex !important; align-items: center !important; background-color: var(--motip-bg, #1D1E1D) !important; /* 1px Border in der Body-Farbe — optisch unsichtbar, aber dient als Anker, sodass die Mega-Menü-Boxen exakt unter dem Header andocken und nicht ein paar Pixel reinragen. */ border-bottom: 1px solid var(--motip-bg, #1D1E1D) !important; padding: 1.5em 2.5em !important; min-height: 96px !important; box-sizing: border-box !important; } body .site-header > .col-full { display: flex !important; align-items: center !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } body .site-header .site-branding { margin: 0 !important; padding: 0 !important; width: auto !important; } body .site-header .site-branding .custom-logo { max-height: 48px !important; width: auto !important; display: block !important; } body .site-header .site-search, body .site-header .widget_product_search, body .site-header form.woocommerce-product-search { display: none !important; } body .site-header .skip-link { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; } body .site-header > .storefront-primary-navigation { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 1.5em 2.5em !important; pointer-events: none !important; } body .site-header > .storefront-primary-navigation > .col-full { display: flex !important; align-items: center !important; height: 100% !important; width: 100% !important; max-width: none !important; padding: 0 0 0 240px !important; margin: 0 !important; } body .site-header > .storefront-primary-navigation .main-navigation, body .site-header > .storefront-primary-navigation .site-header-cart { pointer-events: auto !important; } body .site-header .main-navigation, body .site-header nav#site-navigation { flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; width: auto !important; text-align: left !important; display: block !important; } body .site-header .primary-navigation { display: block !important; } body .site-header .menu-toggle, body .site-header .handheld-navigation { display: none !important; } body .site-header .main-navigation ul.menu, body .site-header .main-navigation ul.nav-menu { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; /* Continuous Scaling: gap zwischen 0.4em (sehr schmal) und 3em (großer Screen), wächst mit ~1.4 % der Viewport-Breite. Ersetzt diskrete Breakpoints — kein Wrap bei keiner Zoom-Stufe. */ gap: clamp(0.4em, 1.4vw, 3em) !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } body .site-header .main-navigation ul.menu > li, body .site-header .main-navigation ul.nav-menu > li { margin: 0 !important; padding: 0 !important; border: none !important; list-style: none !important; white-space: nowrap !important; flex: 0 0 auto !important; } /* Font-size ebenfalls clamp(): minimal 0.78em (lesbar auf Mobile), maximal 1em (großer Screen), Skalierung mit 0.85% der Viewport-Breite */ body .site-header .main-navigation ul.menu > li > a, body .site-header .main-navigation ul.nav-menu > li > a { font-size: clamp(0.78em, 0.85vw, 1em) !important; } body .site-header ul#site-header-cart, body .site-header .site-header-cart { flex: 0 0 auto !important; margin: 0 0 0 auto !important; padding: 0 !important; list-style: none !important; } body .site-header .site-header-cart > li { margin: 0 !important; padding: 0 !important; list-style: none !important; } body .site-header .site-header-cart .cart-contents { color: var(--motip-light, #FFFFFF) !important; font-size: 0.95em !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; display: flex !important; align-items: center !important; gap: 0.5em !important; } @media (max-width: 768px) { body .site-header > .storefront-primary-navigation { position: static !important; padding: 0 !important; } body .site-header > .storefront-primary-navigation > .col-full { padding: 0 !important; flex-wrap: wrap !important; } body .site-header .menu-toggle { display: block !important; } } /* Navigation: aktive Punkte in Rot */ .main-navigation ul li a { color: var(--motip-light, #FFFFFF) !important; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 1em; line-height: 1; display: inline-block; padding: 0.5em 0; } .main-navigation ul li a:hover, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current-menu-parent > a, .main-navigation ul li.current_page_item > a { color: var(--motip-accent, #E30613) !important; } /* ============================================================ BUTTONS ============================================================ */ /* WICHTIG: PhotoSwipe-Buttons (`.pswp__button`) und Cart-Quantity- Buttons explizit per :not() ausschließen — sonst wischt das `background: transparent !important` den `default-skin.png`-Sprite bzw. die +/-/×-Glyphen weg. */ body .button, body button:not(.pswp__button):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link), body input[type="submit"], body .added_to_cart, body a.button, body a.button.alt, body .woocommerce a.button, body .woocommerce a.button.alt, body .woocommerce button.button, body .woocommerce button.button.alt, body .woocommerce input.button, body .woocommerce input.button.alt, body .woocommerce #respond input#submit, body .woocommerce ul.products li.product a.button, body .single-product .single_add_to_cart_button, body .woocommerce .checkout-button { background: transparent !important; color: var(--motip-light, #FFFFFF) !important; border: 2px solid var(--motip-light, #FFFFFF) !important; border-radius: 0 !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; padding: 0.85em 2em !important; text-shadow: none !important; box-shadow: none !important; transition: background-color .2s ease, color .2s ease !important; } body .button:hover, body button:not(.pswp__button):not(.wc-block-components-quantity-selector__button):not(.wc-block-cart-item__remove-link):hover, body input[type="submit"]:hover, body .woocommerce a.button:hover, body .woocommerce a.button.alt:hover, body .woocommerce button.button:hover, body .woocommerce button.button.alt:hover, body .woocommerce input.button:hover, body .woocommerce input.button.alt:hover, body .woocommerce ul.products li.product a.button:hover, body .single-product .single_add_to_cart_button:hover, body .woocommerce .checkout-button:hover { background-color: var(--motip-light, #FFFFFF) !important; color: var(--motip-black-2, #0A0A0A) !important; border-color: var(--motip-light, #FFFFFF) !important; } /* ============================================================ PRODUKT-GRID ============================================================ */ .woocommerce ul.products li.product { background-color: transparent; border: none; padding: 0.5em 0 2em; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); } /* Bildgröße begrenzen: Spraydosen werden voll, aber nicht überdimensional */ .woocommerce ul.products li.product img, .woocommerce ul.products li.product a img, .woocommerce ul.products li.product .attachment-woocommerce_thumbnail { max-height: 320px !important; width: auto !important; margin: 0 auto !important; display: block !important; object-fit: contain !important; } @media (max-width: 768px) { .woocommerce ul.products li.product img, .woocommerce ul.products li.product a img { max-height: 240px !important; } } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--motip-accent, #E30613) !important; font-weight: 800; } .woocommerce span.onsale { background-color: var(--motip-accent, #E30613) !important; color: var(--motip-light, #FFFFFF) !important; border-radius: 0 !important; } /* ============================================================ INPUTS ============================================================ */ input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], textarea, select { background-color: var(--motip-card, #1A1A1A) !important; color: var(--motip-light, #FFFFFF) !important; border: 1px solid var(--motip-border, #2A2A2A) !important; border-radius: 0 !important; } label { color: var(--motip-light, #FFFFFF); } /* ============================================================ CART / CHECKOUT ============================================================ */ .woocommerce table.shop_table { background-color: var(--motip-card, #1A1A1A); border-color: var(--motip-border, #2A2A2A); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { color: var(--motip-light, #FFFFFF); border-color: var(--motip-border, #2A2A2A); } /* WC-Block-Cart (Gutenberg-basierter Cart) — Remove-Link ans Ende der Cart-Item-Zeile (rechts unten, am Fuß der Section). Per position:absolute am .wc-block-cart-items__row (das die ganze Zeile umschließt) — räumlich getrennt von den Quantity-Controls. */ .wc-block-cart-items__row, tr.wc-block-cart-items__row { position: relative !important; } .wc-block-cart-items .wc-block-cart-item__remove-link, .wc-block-cart-item__remove-link { position: absolute !important; bottom: 0.75em !important; right: 0.75em !important; display: inline-block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 6px 10px !important; background: transparent !important; border: 1px solid var(--motip-border, #2A2A2A) !important; border-radius: 0 !important; color: var(--motip-muted, #8A8A8A) !important; font-size: 0.75em !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; cursor: pointer !important; line-height: 1 !important; z-index: 5 !important; } .wc-block-cart-items .wc-block-cart-item__remove-link:hover, .wc-block-cart-item__remove-link:hover { color: var(--motip-accent, #E30613) !important; border-color: var(--motip-accent, #E30613) !important; background: transparent !important; } /* Falls Remove-Link ein SVG-Icon enthält: Icon-Color mitziehen */ .wc-block-cart-item__remove-link svg { fill: currentColor !important; stroke: currentColor !important; width: 14px !important; height: 14px !important; vertical-align: -2px !important; } /* Quantity-Selector im Cart-Block — klare Trennung von Remove-Link */ .wc-block-components-quantity-selector { position: relative !important; display: inline-flex !important; align-items: center !important; border: 1px solid var(--motip-border, #2A2A2A) !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; } .wc-block-components-quantity-selector__input { background: transparent !important; color: var(--motip-light, #FFFFFF) !important; border: none !important; text-align: center !important; } .wc-block-components-quantity-selector__button { background: transparent !important; color: var(--motip-light, #FFFFFF) !important; border: none !important; padding: 0 12px !important; } /* ============================================================ FOOTER — motip.com-Stil: schmale Zeile, Copyright | Logo | Nav | (Teilen + Social). Max-Höhe 80 px. ============================================================ */ .site-footer, .site-footer .footer-widgets { background-color: var(--motip-black, #000000) !important; color: var(--motip-light, #FFFFFF); border-top: none; } /* Storefronts eigenes vertikales Padding (2.6em ≈ 42 px) komplett raus — die Footer-Höhe ergibt sich rein aus dem Content + dem schmalen Padding der .col-full. */ .site-footer { padding: 0 !important; margin: 0 !important; } /* Flexibler, kompakter Footer: Padding 0.7em (≈ 11 px) oben/unten + Content (max 28 px Social-Icons) + 1 px Border = ~52 px. Wächst nur, wenn Inhalt größer wird. */ .site-footer .col-full { max-width: 1600px; margin: 0 auto !important; padding: 0.7em 2.5em !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } /* Storefront-Reste, die NICHT die .col-full sind, ausblenden. Wenn doch noch ein Element extra Höhe macht, wäre es eines davon. */ .site-footer > .storefront-handheld-footer-bar, .site-footer .storefront-handheld-footer-bar, .site-footer .site-info, .site-footer .credit, .site-footer .below-footer, .site-footer .storefront-credit { display: none !important; } /* Unser eigener Footer-Container (gerendert von motip_render_footer) — echte Flex-Zeile, kein Storefront-Float-Layout dazwischen. */ .site-footer .motip-footer-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 2em !important; margin: 0 !important; padding: 0 !important; width: 100%; } .site-footer .motip-footer-cell { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } .site-footer .motip-footer-cell--nav { flex: 1 1 auto !important; display: flex !important; justify-content: flex-end !important; } .site-footer .motip-footer-cell .widget { margin: 0 !important; padding: 0 !important; background-color: transparent !important; } .site-footer .motip-footer-cell .widget-title, .site-footer .motip-footer-cell .widgettitle { display: none !important; } /* Storefronts altes .footer-widgets-Layout (falls noch irgendwo gerendert) sicherheitshalber unsichtbar — wir nutzen unseren motip-footer-row */ .site-footer > .col-full > .footer-widgets { display: none !important; } .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: var(--motip-light, #FFFFFF) !important; } .site-footer a { color: var(--motip-light, #FFFFFF); text-decoration: none; } .site-footer a:hover { color: var(--motip-accent, #E30613); } /* "Powered by WooCommerce"-Zeile ausblenden */ .site-footer .site-info, .site-footer .credit { display: none !important; } /* Copyright (Footer 1) */ .motip-footer-copyright { color: var(--motip-light, #FFFFFF) !important; font-size: 0.78em !important; letter-spacing: 0.5px !important; white-space: nowrap; } /* Logo (Footer 2) — sehr klein, hohe Spezifität gegen Storefront */ .site-footer .motip-footer-logo a, .site-footer .motip-footer-logo { display: inline-block; } .site-footer .motip-footer-logo img, .site-footer .motip-footer-logo a img { max-height: 22px !important; height: auto !important; width: auto !important; max-width: none !important; display: block !important; margin: 0 !important; } /* Nav-Links (Footer 3) */ .motip-footer-nav { list-style: none !important; display: flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 2em !important; margin: 0 !important; padding: 0 !important; } .motip-footer-nav li { margin: 0 !important; padding: 0 !important; list-style: none !important; display: inline-block; } .motip-footer-nav a { color: var(--motip-light, #FFFFFF) !important; font-size: 0.75em !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 600 !important; white-space: nowrap; } .motip-footer-nav a:hover { color: var(--motip-accent, #E30613) !important; } /* Footer 4: Teilen + Social — horizontal angeordnet */ .motip-footer-right { display: flex !important; align-items: center !important; gap: 1.2em !important; } /* Teilen-Button (rot mit Share-Icon links) */ .motip-footer-share { display: inline-flex !important; align-items: center !important; gap: 0.45em !important; color: var(--motip-accent, #E30613) !important; font-size: 0.75em !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; white-space: nowrap; --icon-share: url("data:image/svg+xml;utf8,"); } .motip-footer-share::before { content: ''; display: inline-block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: var(--icon-share) center/contain no-repeat; mask: var(--icon-share) center/contain no-repeat; } /* Social-Icons (Footer 4, Teil 2) — Brand-Glyphs via mask-image */ .motip-footer-social { list-style: none !important; display: flex !important; gap: 0.8em !important; margin: 0 !important; padding: 0 !important; align-items: center !important; } .motip-footer-social li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .motip-footer-social a { display: inline-flex !important; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--motip-light, #FFFFFF) !important; transition: color .2s ease; } .motip-footer-social a::before { content: ''; display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .motip-footer-social a:hover { color: var(--motip-accent, #E30613) !important; } /* Brand-Icon-Glyphs — schlichte geometrische Formen */ .motip-footer-social .icon-facebook { --icon-fb: url("data:image/svg+xml;utf8,"); } .motip-footer-social .icon-facebook::before { -webkit-mask-image: var(--icon-fb); mask-image: var(--icon-fb); } .motip-footer-social .icon-youtube { --icon-yt: url("data:image/svg+xml;utf8,"); } .motip-footer-social .icon-youtube::before { -webkit-mask-image: var(--icon-yt); mask-image: var(--icon-yt); } .motip-footer-social .icon-instagram { --icon-ig: url("data:image/svg+xml;utf8,"); } .motip-footer-social .icon-instagram::before { -webkit-mask-image: var(--icon-ig); mask-image: var(--icon-ig); } /* Mobile: Footer-Stack */ @media (max-width: 900px) { .site-footer .footer-widgets { grid-template-columns: 1fr !important; gap: 1em !important; text-align: center; } .motip-footer-nav { justify-content: center !important; flex-wrap: wrap !important; } .motip-footer-right { justify-content: center !important; } .site-footer .motip-footer-logo img { margin: 0 auto !important; } } /* ============================================================ BREADCRUMBS ============================================================ */ .woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: var(--motip-muted, #8A8A8A) !important; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.5px; } .woocommerce-breadcrumb a:hover { color: var(--motip-light, #FFFFFF) !important; } /* ============================================================ SINGLE-PRODUCT-PAGE ============================================================ */ /* (Body-BG kommt vom globalen body-Block — kein eigener Hintergrund hier, sonst überdeckt var(--motip-black-2, #0A0A0A) den schwarzen Wedge-Layer.) */ body.single-product .site-content, body.single-product main#main, body.single-product #primary { background-color: transparent !important; } body.single-product .woocommerce-breadcrumb { font-size: .8em !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--motip-muted, #8A8A8A) !important; padding: 2em 0 1em !important; margin: 0 !important; } /* Produkt-Hero: transparent → Body-Wedges (schwarz auf grau) scheinen durch. */ body.single-product div.product { position: relative !important; background: transparent !important; padding: 3em 2em 5em !important; margin: 0 !important; display: flow-root !important; } body.single-product div.product::after { content:''; display:table; clear:both; } body.single-product div.product .woocommerce-product-gallery { position: relative !important; width: 45% !important; float: left !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } body.single-product div.product div.images img, body.single-product div.product .woocommerce-product-gallery img { background: transparent !important; padding: 0 !important; border: none !important; border-radius: 0 !important; max-height: 580px !important; width: auto !important; margin: 0 auto !important; display: block !important; } body.single-product div.product .summary, body.single-product div.product .entry-summary { width: 50% !important; float: right !important; margin: 0 !important; padding: 2em 0 !important; clear: none !important; } body.single-product .product_title { font-size: 3em !important; font-weight: 900 !important; text-transform: uppercase !important; color: var(--motip-light, #FFFFFF) !important; line-height: 1 !important; letter-spacing: 1px !important; margin: 0 0 1em !important; } body.single-product .woocommerce-product-details__short-description, body.single-product .woocommerce-product-details__short-description p { color: var(--motip-text, #CCCCCC) !important; font-size: 1em !important; line-height: 1.6 !important; margin: 0 0 2em !important; } .motip-specs { display: flex !important; gap: 2.5em !important; list-style: none !important; padding: 0 !important; margin: 0 0 2em !important; flex-wrap: wrap !important; } .motip-specs .motip-spec { display: flex !important; align-items: center !important; gap: .6em !important; color: var(--motip-light, #FFFFFF) !important; text-transform: uppercase !important; font-size: .85em !important; font-weight: 700 !important; letter-spacing: 1px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .motip-specs .motip-spec svg { width: 28px !important; height: 28px !important; color: var(--motip-light, #FFFFFF) !important; flex-shrink: 0 !important; } body.single-product .summary > .price { color: var(--motip-accent, #E30613) !important; font-size: 2em !important; font-weight: 900 !important; margin: 0 0 1em !important; } body.single-product form.cart { margin: 1.5em 0 2em !important; display: flex !important; align-items: center !important; gap: 1em !important; } body.single-product .quantity input.qty { width: 80px !important; height: 50px !important; text-align: center !important; background-color: var(--motip-card, #1A1A1A) !important; color: var(--motip-light, #FFFFFF) !important; border: 2px solid var(--motip-light, #FFFFFF) !important; border-radius: 0 !important; font-size: 1em !important; font-weight: 700 !important; } body.single-product .single_add_to_cart_button { height: 50px !important; padding: 0 2.5em !important; } body.single-product .product_meta { border-top: 1px solid var(--motip-border, #2A2A2A) !important; padding-top: 1.5em !important; margin-top: 2em !important; font-size: .85em !important; color: var(--motip-muted, #8A8A8A) !important; } body.single-product .product_meta > span { display: block !important; margin-bottom: .5em !important; } body.single-product .product_meta a { color: var(--motip-light, #FFFFFF) !important; } body.single-product .product_meta a:hover { color: var(--motip-accent, #E30613) !important; } /* WC-Tabs aus — wir rendern als Sektionen */ body.single-product .woocommerce-tabs { display: none !important; } /* Sektionen — Vollbreite via Pseudo-Element-Trick. Die Sektion selbst bleibt in der Container-Breite. Ein ::before- Pseudo positioniert sich absolut auf 100vw zentriert hinter der Sektion → erzeugt die volle Viewport-Breite für die BG-Farbe. 100vw + left:50% + translateX(-50%) ist robuster als box-shadow bzw. negative margins, weil es nicht auf Parent-Padding oder Stacking-Context angewiesen ist. */ body .motip-section, body section.motip-section { position: relative !important; padding: 4em 2em !important; clear: both !important; box-sizing: border-box !important; /* KEIN background-color hier — sonst gewinnt es per höherer Specificity (0,0,1,2 mit `section.motip-section`) gegen die Modifier-Klassen (0,0,1,1). Modifier setzt die BG-Farbe, ::before erbt sie via background-color: inherit. */ } /* Sektionen sitzen in ihrem natürlichen .col-full-Container. Kein Vollbreite-Trick mehr (CSS-only war nicht zuverlässig hinkriegbar ohne PHP-/Layout-Änderungen, die das Risiko anderer Regressionen einführen). BG-Farbe + Padding reichen für einen sauberen Look. */ body section.motip-section--eigenschaften { background-color: var(--motip-black, #000000) !important; } body section.motip-section--instructions { background-color: var(--motip-bg, #1D1E1D) !important; } body section.motip-section--farben { background-color: var(--motip-black, #000000) !important; } /* Pseudos abräumen — werden nicht mehr benutzt */ body .motip-section::before, body section.motip-section::before, body.single-product section.related.products::before { content: none !important; display: none !important; } .motip-section__inner { max-width: 1100px; margin: 0 auto; padding: 0 1em; } .motip-section__inner--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: start; } .motip-section__title { font-size: 2.5em !important; font-weight: 900 !important; text-transform: uppercase !important; color: var(--motip-light, #FFFFFF) !important; text-align: center !important; letter-spacing: 1px !important; margin: 0 0 .5em !important; } .motip-section__subtitle { text-align: center; color: var(--motip-light, #FFFFFF); font-size: 1.05em; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; max-width: 800px; margin: 0 auto 3em; } .motip-section--eigenschaften { padding-top: 5em; padding-bottom: 5em; } .motip-eigenschaften-content h4 { font-size: 1.4em !important; font-weight: 800 !important; text-transform: uppercase !important; color: var(--motip-light, #FFFFFF) !important; margin: 0 0 1em !important; letter-spacing: 1px !important; } .motip-eigenschaften-content ul { list-style: none !important; padding: 0 !important; margin: 1em 0 !important; } .motip-eigenschaften-content ul li { color: var(--motip-text, #CCCCCC) !important; padding: .4em 0 .4em 1.2em !important; position: relative !important; list-style: none !important; } .motip-eigenschaften-content ul li::before { content: '•' !important; position: absolute !important; left: 0 !important; top: .3em !important; color: var(--motip-accent, #E30613) !important; font-size: 1.3em !important; line-height: 1 !important; } .motip-datasheets-col { display: flex; flex-direction: column; gap: 1.2em; } .motip-datasheet-btn { display: block; text-align: center; background: transparent !important; color: var(--motip-light, #FFFFFF) !important; border: 2px solid var(--motip-light, #FFFFFF) !important; padding: 1.1em 2em !important; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-decoration: none !important; transition: all .2s ease; font-size: .85em; } .motip-datasheet-btn:hover { background-color: var(--motip-light, #FFFFFF) !important; color: var(--motip-black-2, #0A0A0A) !important; } .motip-section--instructions { padding-top: 6em; padding-bottom: 6em; } .motip-instructions-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em 4em; max-width: 900px; margin: 0 auto; text-align: left; counter-reset: motip-step; list-style: none; padding: 0; } .motip-instructions-list li { counter-increment: motip-step; padding-left: 2em; position: relative; color: var(--motip-text, #CCCCCC); line-height: 1.6; list-style: none; } .motip-instructions-list li::before { content: counter(motip-step) "."; position: absolute; left: 0; font-weight: 800; color: var(--motip-light, #FFFFFF); } .motip-section--farben { padding-top: 5em; padding-bottom: 5em; text-align: center; } .motip-farben-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 2em; margin: 2em 0; } .motip-color-tile { width: 220px; } .motip-color-swatch { width: 100%; aspect-ratio: 1.4 / 1; background-color: #E8E8E8; } .motip-color-info { background-color: var(--motip-light, #FFFFFF); color: var(--motip-black-2, #0A0A0A); padding: .8em 1em; font-size: .85em; text-align: left; line-height: 1.6; } .motip-color-info strong { display: block; text-transform: lowercase; font-weight: 700; margin-bottom: .3em; } .motip-color-info span { display: block; color: #333; } .motip-disclaimer { font-size: .85em; color: var(--motip-muted, #8A8A8A); margin-top: 2em; font-style: italic; } /* Related Products — bg + Padding. Vollbreite wird durch die width:100vw+transform-Regel weiter oben (mit-selektiert) erledigt. */ body.single-product section.related.products { background-color: var(--motip-bg, #1D1E1D) !important; margin: 0 !important; padding: 5em 2em !important; clear: both !important; box-sizing: border-box !important; } body.single-product section.related.products > * { position: relative; z-index: 1; } body.single-product .related.products > h2 { font-size: 1.6em !important; font-weight: 900 !important; text-transform: uppercase !important; color: var(--motip-light, #FFFFFF) !important; text-align: center !important; margin: 0 0 3em !important; letter-spacing: 1px !important; } body.single-product .related.products ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 2em !important; margin: 0 auto !important; padding: 0 !important; max-width: 1200px !important; } body.single-product .related.products ul.products li.product { width: auto !important; margin: 0 !important; text-align: center !important; } /* ============================================================ PRODUKT-GALERIE ============================================================ */ /* CSS-Fallback gegen Flexslider-Drag + Zoom: selbst wenn das JS noch initialisiert wird, neutralisiert das alle Slider-/Zoom- Transforms, das Bild bleibt statisch. Außerdem opacity:1 erzwingen — WC setzt initial opacity:0 inline und blendet erst nach JS-Init ein. Ohne Slider-Init kann es passieren dass das Bild unsichtbar bleibt. */ body.single-product .woocommerce-product-gallery { transform: none !important; opacity: 1 !important; } /* Wenn ein per zoom-JS in einen wrapper verpackt wurde, nicht zoomen */ body.single-product .woocommerce-product-gallery img.zoomImg { display: none !important; } body.single-product .woocommerce-product-gallery .flex-viewport { height: auto !important; overflow: visible !important; max-height: none !important; } body.single-product .woocommerce-product-gallery__wrapper { transform: none !important; width: auto !important; display: block !important; height: auto !important; } body.single-product .woocommerce-product-gallery__image { width: 100% !important; position: relative !important; left: auto !important; float: none !important; display: block !important; } /* Slider-Navigation komplett ausblenden (falls trotz allem gerendert) */ body.single-product .woocommerce-product-gallery .flex-direction-nav, body.single-product .woocommerce-product-gallery .flex-control-nav { display: none !important; } /* Lupen-Trigger im Produktbild — oben rechts auf dem Bild */ body.single-product .woocommerce-product-gallery__trigger { position: absolute !important; top: 1em !important; right: 1em !important; width: 40px !important; height: 40px !important; background: rgba(0,0,0,0.55) !important; color: var(--motip-light, #FFFFFF) !important; border: 2px solid var(--motip-light, #FFFFFF) !important; border-radius: 0 !important; font-size: 1.1em !important; line-height: 36px !important; text-align: center !important; text-indent: 0 !important; z-index: 10 !important; box-shadow: none !important; } body.single-product .woocommerce-product-gallery__trigger:hover { background: var(--motip-light, #FFFFFF) !important; color: var(--motip-black-2, #0A0A0A) !important; } /* Browser-Default-Focus-Outline (Edge nutzt #7a00df lila) auf dem -Wrapper um das Produktbild komplett unterdrücken. */ body.single-product .woocommerce-product-gallery a, body.single-product .woocommerce-product-gallery a:hover, body.single-product .woocommerce-product-gallery a:focus, body.single-product .woocommerce-product-gallery a:focus-visible, body.single-product .woocommerce-product-gallery a:active, body.single-product .woocommerce-product-gallery img, body.single-product .woocommerce-product-gallery img:hover, body.single-product .woocommerce-product-gallery img:focus { outline: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; } /* PhotoSwipe-Lightbox — Default-Skin-Icons sichtbar machen. Storefront setzt global `button { background-color: var(--motip-light, #FFFFFF) }`. Damit ist der Button-BG weiß → die weißen Icon-Sprites verschwinden auf weißem Grund. Fix: nur `background-color` auf transparent überschreiben (NICHT das `background`-Shorthand benutzen, sonst wird das `background-image` mit dem Sprite gelöscht!). Ebenso: Border + Padding der globalen Button-Regel aufheben. */ .pswp__top-bar { background: rgba(0,0,0,0.7) !important; } .pswp__button, .pswp .pswp__button { background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; width: 44px !important; height: 44px !important; } .pswp__button:hover, .pswp .pswp__button:hover { background-color: transparent !important; border: none !important; opacity: 0.7 !important; } .pswp__counter { color: var(--motip-light, #FFFFFF) !important; font-weight: 700 !important; } .pswp__element--disabled { display: none !important; } @media (max-width: 900px) { body.single-product div.product { background: var(--motip-black-2, #0A0A0A) !important; padding: 2em 1em !important; } /* Auf Mobile: Diagonal-Split aus, flacher Dark-BG */ body.single-product div.product::before { display: none !important; } body.single-product div.product .woocommerce-product-gallery, body.single-product div.product .summary { width: 100% !important; float: none !important; } body.single-product .product_title { font-size: 2em !important; } .motip-section__inner--cols, .motip-instructions-list { grid-template-columns: 1fr !important; } body.single-product .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; } } /* ============================================================ MENÜ — disabled-Items im Shop-Submenü ============================================================ */ .main-navigation li.menu-disabled > a, .main-navigation .menu-disabled > a { opacity: 0.4 !important; cursor: not-allowed !important; pointer-events: none !important; } .main-navigation li.menu-disabled > a:hover, .main-navigation .menu-disabled > a:hover { color: var(--motip-light, #FFFFFF) !important; } /* ============================================================ MEGA-MENU — 3-spaltiges Submenü unter "Shop", hover-getriggert ============================================================ */ /* Parent-Item braucht position:relative damit das absolute Submenü relativ zu IHM (= "Shop"-Link) positioniert wird. align-self: stretch + flex/align-items:center → LI nimmt die volle Header-Höhe ein, Link bleibt vertikal zentriert. Dadurch fällt `top: 100%` des Submenüs exakt mit der Header-Unterkante zusammen (kein paar-Pixel-Versatz mehr). */ body .site-header .main-navigation li.menu-item-has-children { position: relative; align-self: stretch !important; display: flex !important; align-items: center !important; } /* Trigger-Fläche unter Shop für Hover-Bridge — als unsichtbares ::after am li (nicht am a-Tag). So bleibt der Shop-Link genauso hoch wie die anderen Menü-Items, vertikale Ausrichtung passt. */ body .site-header .main-navigation li.menu-item-has-children::after { content: ''; position: absolute; top: 100%; left: -1em; right: -1em; height: 1em; pointer-events: auto; } /* Submenü: standardmäßig ausgeblendet, beim Hover als 3-spaltiges Grid. Column-major Flow: Items füllen Spalte-für-Spalte (oben → unten). Zentriert unter dem Trigger-Item via left:50% + translateX(-50%). */ body .site-header .main-navigation ul.sub-menu, body .site-header .main-navigation li.menu-item-has-children > ul { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 0; padding: 1.8em 2.5em 2em; background-color: var(--motip-black, #000000); /* Rahmen entfernt — die Box wirkt jetzt nur so groß wie ihr Inhalt. Die rote Top-Akzent-Linie bleibt als Design-Element erhalten. */ border-top: 3px solid var(--motip-accent, #E30613); border-left: none; border-right: none; border-bottom: none; list-style: none; min-width: 760px; z-index: 100; grid-template-columns: repeat(3, minmax(190px, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0.4em 2.5em; box-shadow: 0 12px 32px rgba(0,0,0,0.5); } /* Hover/Focus aufs Parent öffnet das Mega-Menü */ body .site-header .main-navigation li.menu-item-has-children:hover > ul.sub-menu, body .site-header .main-navigation li.menu-item-has-children:focus-within > ul.sub-menu, body .site-header .main-navigation li.menu-item-has-children:hover > ul, body .site-header .main-navigation li.menu-item-has-children:focus-within > ul { display: grid !important; } /* Einzelne Submenü-Items */ body .site-header .main-navigation ul.sub-menu > li { margin: 0 !important; padding: 0 !important; list-style: none !important; display: block; } body .site-header .main-navigation ul.sub-menu > li > a { display: block !important; padding: 0.7em 0 !important; font-size: 0.82em !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; color: var(--motip-light, #FFFFFF) !important; border-bottom: 1px solid var(--motip-card, #1A1A1A); transition: color .15s ease, border-color .15s ease, padding-left .15s ease; line-height: 1.3; } body .site-header .main-navigation ul.sub-menu > li > a:hover { color: var(--motip-accent, #E30613) !important; border-bottom-color: var(--motip-accent, #E30613); padding-left: 0.4em !important; } /* Disabled-Items im Submenü dezenter halten */ body .site-header .main-navigation ul.sub-menu > li.menu-disabled > a { border-bottom-color: var(--motip-border, #2A2A2A); } body .site-header .main-navigation ul.sub-menu > li.menu-disabled > a:hover { color: var(--motip-light, #FFFFFF) !important; border-bottom-color: var(--motip-border, #2A2A2A) !important; padding-left: 0 !important; } /* 3. EBENE — Hover-Flyout (unter Technische Sprays). Erscheint rechts neben dem Mega-Menü-Item, einspaltige Liste. */ body .site-header .main-navigation ul.sub-menu li.menu-item-has-children { position: relative; } /* Caret-Indikator neben Eltern-Item mit Sub-Submenü */ body .site-header .main-navigation ul.sub-menu li.menu-item-has-children > a::after { content: '›'; float: right; color: #888; font-size: 1.3em; line-height: 1; margin-left: 0.5em; transition: color .15s ease, transform .15s ease; } body .site-header .main-navigation ul.sub-menu li.menu-item-has-children:hover > a::after { color: var(--motip-accent, #E30613); transform: translateX(3px); } /* Das eigentliche 3.-Ebene-Submenü — überschreibt die Grid-Defaults der 2. Ebene. transform:none weil die 2. Ebene jetzt translateX(-50%) hat. */ body .site-header .main-navigation ul.sub-menu ul.sub-menu { display: none !important; position: absolute !important; top: calc(-1.8em - 3px) !important; left: 100% !important; transform: none !important; margin: 0 !important; margin-left: 0.4em !important; padding: 1.8em 2em !important; background-color: var(--motip-black, #000000) !important; border-top: 3px solid var(--motip-accent, #E30613) !important; border-right: none !important; border-bottom: none !important; border-left: none !important; list-style: none !important; min-width: 220px !important; z-index: 110 !important; grid-template-columns: none !important; grid-template-rows: none !important; grid-auto-flow: row !important; gap: 0 !important; box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important; } /* Hover/Focus auf das Parent (innerhalb des Mega-Menüs) öffnet das Flyout */ body .site-header .main-navigation ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu, body .site-header .main-navigation ul.sub-menu li.menu-item-has-children:focus-within > ul.sub-menu { display: block !important; } /* Items im Flyout */ body .site-header .main-navigation ul.sub-menu ul.sub-menu > li { margin: 0 !important; padding: 0 !important; list-style: none !important; display: block !important; } body .site-header .main-navigation ul.sub-menu ul.sub-menu > li > a { display: block !important; padding: 0.55em 0 !important; font-size: 0.8em !important; font-weight: 600 !important; color: var(--motip-text, #CCCCCC) !important; border-bottom: 1px solid var(--motip-card, #1A1A1A) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; transition: color .15s ease, padding-left .15s ease, border-color .15s ease; } body .site-header .main-navigation ul.sub-menu ul.sub-menu > li > a:hover { color: var(--motip-accent, #E30613) !important; padding-left: 0.4em !important; border-bottom-color: var(--motip-accent, #E30613) !important; } /* Mobile: Mega-Menü zurück zu einspaltigem Klassik-Dropdown */ @media (max-width: 768px) { body .site-header .main-navigation ul.sub-menu { position: static !important; grid-template-columns: 1fr !important; min-width: 0 !important; padding: 1em !important; box-shadow: none !important; border: none !important; } } /* ============================================================ KATEGORIE-ARCHIV — Hero + Subkat-Tiles + CTA ============================================================ */ body.tax-product_cat .site-content, body.archive.woocommerce .site-content { background-color: transparent !important; } body.tax-product_cat .page-title, body.archive.woocommerce .page-title { display: none !important; } /* Hero-Block */ .motip-cat-hero { position: relative; width: 100%; min-height: 340px; background-color: var(--motip-card, #1A1A1A); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; margin: 0 0 3em 0; overflow: hidden; box-sizing: border-box; padding: 3em 1em; } .motip-cat-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.55) 55%, rgba(22,22,22,0.75) 100%); } .motip-cat-hero__inner { position: relative; max-width: 900px; text-align: center; color: var(--motip-light, #FFFFFF); width: 100%; } .motip-cat-hero__title { font-size: 2.8em !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 2px; color: var(--motip-light, #FFFFFF) !important; margin: 0 0 0.6em !important; line-height: 1.05; } .motip-cat-hero__intro, .motip-cat-hero__intro p { color: var(--motip-light, #FFFFFF) !important; font-size: 1.05em; line-height: 1.65; text-transform: none; font-weight: 400 !important; margin: 0 auto; max-width: 800px; } /* Subkategorie-Tiles */ .motip-subcategories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; max-width: 1200px; margin: 0 auto 4em; padding: 0 1em; } .motip-subcat-tile { background-color: var(--motip-card, #1A1A1A); padding: 0; text-align: left; text-decoration: none !important; color: var(--motip-light, #FFFFFF) !important; display: flex; flex-direction: column; transition: transform .2s ease, background-color .2s ease; overflow: hidden; } .motip-subcat-tile:hover { transform: translateY(-4px); background-color: var(--motip-card-hover, #232323); } .motip-subcat-tile__image { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background-color: var(--motip-card-deep, #0F0F0F); } .motip-subcat-tile__body { padding: 1.3em 1.4em 1.6em; } .motip-subcat-tile h3 { font-size: 1.3em !important; font-weight: 800 !important; text-transform: uppercase; color: var(--motip-light, #FFFFFF) !important; margin: 0 0 .6em !important; letter-spacing: .5px; } .motip-subcat-tile p { color: var(--motip-text, #CCCCCC) !important; font-size: .9em; line-height: 1.6; margin: 0; } /* Colour Guide CTA-Box */ .motip-cat-cta { background-color: var(--motip-card-2, #161616); padding: 3.5em 2em; text-align: center; margin: 4em 0 0; } .motip-cat-cta h3 { font-size: 2em !important; font-weight: 900 !important; text-transform: uppercase !important; color: var(--motip-light, #FFFFFF) !important; margin: 0 0 .8em !important; letter-spacing: 1px; } .motip-cat-cta p { color: var(--motip-text, #CCCCCC) !important; max-width: 700px; margin: 0 auto 1.5em !important; line-height: 1.6; } .motip-cat-cta .motip-cat-cta__btn { display: inline-block; background: transparent !important; color: var(--motip-light, #FFFFFF) !important; border: 2px solid var(--motip-light, #FFFFFF) !important; padding: 1em 2.5em !important; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; text-decoration: none !important; transition: all .2s ease; } .motip-cat-cta .motip-cat-cta__btn:hover { background-color: var(--motip-light, #FFFFFF) !important; color: var(--motip-black-2, #0A0A0A) !important; } @media (max-width: 900px) { .motip-cat-hero__title { font-size: 2em !important; } .motip-subcategories { grid-template-columns: 1fr 1fr; gap: 1.5em; } } @media (max-width: 600px) { .motip-subcategories { grid-template-columns: 1fr; } }