/* Theme Name: Kadence Child Template: kadence Version: 1.0.0 */ .mein-perfektes-icon { display: flex; align-items: center; text-decoration: none; /* Hier stellst du den Abstand nach links und rechts ein: */ margin: 0 30px !important; } .kunden-maske { display: inline-block; /* Hier erzwingen wir die Größe gegen das Theme: */ width: 40px !important; height: 35px !important; background-color: #2D2D2D; -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAyMXYtMmE0IDQgMCAwIDAtNC00SDhhNCA0IDAgMCAwLTQgNHYyIj48L3BhdGg+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ij48L2NpcmNsZT48L3N2Zz4='); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMCAyMXYtMmE0IDQgMCAwIDAtNC00SDhhNCA0IDAgMCAwLTQgNHYyIj48L3BhdGg+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ij48L2NpcmNsZT48L3N2Zz4='); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } /* Versteckt die Produktanzahl (die Zahlen in den Klammern) bei den Kategorien */ mark.count, .woocommerce-loop-category__title .count, .widget_product_categories .count { display: none !important; } button.single_add_to_cart_button, .woocommerce div.product form.cart .button { background-color: transparent !important; color: #ffffff !important; opacity: 1 !important; font-weight: bold !important; } button.single_add_to_cart_button:hover, .woocommerce div.product form.cart .button:hover { background-color: #9c7b52 !important; color: #ffffff !important; } /* ================================================= KOMPAKTE MODERNE DESKTOP-NAVIGATION ================================================= */ @media screen and (min-width: 1025px) { /* Kein künstliches Verschieben oder Verbreitern mehr */ .mega-menu-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Menüinhalt zentrieren und großzügig ausnutzen */ .mega-menu-wrap > ul.mega-menu { width: 100% !important; max-width: 1600px !important; margin: 0 auto !important; padding: 0 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Einzelne Menüpunkte */ .mega-menu-wrap > ul.mega-menu > li.mega-menu-item { flex: 0 0 auto !important; margin: 0 !important; } /* Beschriftungen kompakt und mittig */ .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-height: 52px !important; height: 52px !important; padding: 0 9px !important; white-space: nowrap !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #222222 !important; background: transparent !important; border-radius: 6px !important; transition: color 0.2s ease, background-color 0.2s ease !important; } /* Pfeile direkt neben dem Kategorienamen */ .mega-menu-wrap .mega-indicator { position: static !important; display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; margin: 0 0 0 3px !important; transform: none !important; } /* Dezenter Hover-Effekt */ .mega-menu-wrap > ul.mega-menu > li.mega-menu-item:hover > a.mega-menu-link, .mega-menu-wrap > ul.mega-menu > li.mega-current-menu-item > a.mega-menu-link, .mega-menu-wrap > ul.mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link { color: #84623b !important; background-color: rgba(184, 148, 104, 0.13) !important; } } /* Auf normalen Laptops darf das Menü kompakt zweizeilig werden */ @media screen and (min-width: 1025px) and (max-width: 1499px) { .mega-menu-wrap > ul.mega-menu { flex-wrap: wrap !important; padding-top: 5px !important; padding-bottom: 5px !important; } .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { min-height: 40px !important; height: 40px !important; padding-left: 7px !important; padding-right: 7px !important; font-size: 12px !important; } } /* Auf großen Bildschirmen alle Kategorien in einer Zeile */ @media screen and (min-width: 1500px) { .mega-menu-wrap > ul.mega-menu { flex-wrap: nowrap !important; } } /* Gleicht den 3px-Rahmen aus, damit das Aufklapp-Menü bündig mit der Außenkante abschließt */ .mega-menu-wrap ul.mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu { left: -3px !important; width: calc(100% + 6px) !important; } /* --- Neuer Block: Edler Hintergrund und Schatten für die Hauptleiste --- */ .mega-menu-wrap > ul.mega-menu { background-color: #fdfbf9 !important; /* Ein extrem sanftes, warmes Off-White/Beige */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important; /* Sehr weicher, moderner Schatten für etwas Tiefe */ } /* --- 1. KASSE-BUTTON KRÄFTIG MACHEN --- */ .woocommerce-mini-cart .buttons a.checkout, .widget_shopping_cart .buttons a.checkout { background-color: #b89468 !important; /* Euer Beigeton */ color: #ffffff !important; /* Weiße Schrift */ opacity: 1 !important; font-weight: bold !important; border-radius: 4px !important; /* Leichte Rundung passend zum Shop */ } .woocommerce-mini-cart .buttons a.checkout:hover, .widget_shopping_cart .buttons a.checkout:hover { background-color: #9c7b52 !important; /* Dunklerer Ton beim Drüberfahren */ color: #ffffff !important; } /* --- 2. MÜLLEIMER STATT "X" & SICHER NACH LINKS --- */ .woocommerce-mini-cart-item a.remove, .woocommerce-mini-cart-item a.remove_from_cart_button { transform: translateX(-25px) !important; /* Zieht den Button zwingend nach links */ z-index: 9999 !important; color: transparent !important; /* Versteckt das alte Text-X */ background: transparent !important; width: 24px !important; height: 24px !important; position: absolute !important; } /* Versteckt das Theme-eigene X, falls es eine Grafik ist */ .woocommerce-mini-cart-item a.remove svg, .woocommerce-mini-cart-item a.remove i { display: none !important; } /* Mülleimer erzwingen */ .woocommerce-mini-cart-item a.remove::before, .woocommerce-mini-cart-item a.remove_from_cart_button::before { content: "🗑️" !important; font-size: 18px !important; color: #333 !important; visibility: visible !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; /* Zentriert den Mülleimer exakt im Button */ } /* --- FINALE BESTELL-BUTTONS (inklusive WooCommerce Blocks) --- */ .woocommerce-checkout button[type="submit"], .wc-block-components-checkout-place-order-button, .wc-block-components-button.wp-element-button, .wc-block-components-button:not(.is-link) { background-color: #b89468 !important; /* Euer kräftiges Beige */ color: #ffffff !important; /* Strahlend weiße Schrift */ opacity: 1 !important; /* Hebt die blasse Darstellung auf */ font-weight: bold !important; border-radius: 4px !important; border: none !important; padding: 15px 20px !important; } .woocommerce-checkout button[type="submit"]:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-components-button.wp-element-button:hover, .wc-block-components-button:not(.is-link):hover { background-color: #b89468 !important; /* Etwas dunkler beim Drüberfahren */ color: #ffffff !important; } /* --- Weißer Abstand zwischen Hauptmenü und Kategorie-Balken --- */ body.archive.woocommerce .entry-hero, body.archive.woocommerce .kadence-hero-header, .woocommerce-products-header { margin-top: 40px !important; /* Bestimmt die Höhe des weißen Abstands */ } /* --- ABSTAND FÜR SEITEN: WARENKORB / KASSE --- */ body.page .entry-hero, body.page .kadence-hero-header { margin-top: 40px !important; } /* --- HOLZHAMMER: Original-Feld unsichtbar machen --- */ tr.shipping td[data-title="Versand"], .woocommerce-shipping-totals td[data-title="Versand"] { visibility: hidden !important; font-size: 0 !important; position: relative !important; } /* --- Euren sauberen Text ohne 'Kostenlos' neu aufbauen --- */ tr.shipping td[data-title="Versand"]::after, .woocommerce-shipping-totals td[data-title="Versand"]::after { content: "Frachtkosten (werden individuell im Angebot kalkuliert)" !important; visibility: visible !important; font-size: 15px !important; color: #555555 !important; /* Eure Standard-Textfarbe im Warenkorb */ display: block !important; line-height: 1.5 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; } /* --- 1. MÜLLEIMER MAXIMAL ERZWINGEN --- */ body.woocommerce-cart table.cart td.product-remove a.remove { color: transparent !important; background: transparent !important; border: none !important; } body.woocommerce-cart table.cart td.product-remove a.remove::before { content: "🗑️" !important; color: #555555 !important; font-size: 20px !important; display: block !important; visibility: visible !important; } /* --- 2. KASSE-BUTTON MAXIMAL ERZWINGEN --- */ body.woocommerce-cart .cart-collaterals .checkout-button, body.woocommerce-cart #main .checkout-button { background-color: #b89468 !important; color: #ffffff !important; opacity: 1 !important; padding: 15px 20px !important; border-radius: 4px !important; font-weight: bold !important; display: block !important; } /* Button „Warenkorb aktualisieren“ ausblenden */ body.woocommerce-cart button[name="update_cart"], body.woocommerce-cart input[name="update_cart"] { display: none !important; } /* Leere Aktionszeile unter dem Warenkorb entfernen */ body.woocommerce-cart table.cart td.actions { display: none !important; } /* Warenkorb-Überschrift im beigen Bereich nicht fett */ body.woocommerce-cart .entry-hero h1.entry-title, body.woocommerce-cart .kadence-hero-header h1.entry-title, body.woocommerce-cart h1.entry-title { font-weight: 400 !important; font-style: normal !important; } /* ------------------------------------------------- 1. Überschrift „Kasse“ nicht fett darstellen -------------------------------------------------- */ body.woocommerce-checkout .entry-hero h1.entry-title, body.woocommerce-checkout .kadence-hero-header h1.entry-title, body.woocommerce-checkout h1.entry-title { font-weight: 400 !important; font-variation-settings: "wght" 400 !important; font-style: normal !important; } /* ------------------------------------------------- 2. „Kostenlos“ bei den Versandoptionen entfernen -------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label, body.woocommerce-checkout .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__secondary-label, body.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__secondary-label { display: none !important; } /* Gesamtsumme über dem Warenkorbsymbol */ .header-cart-wrap .header-cart-button, .header-cart-wrap > a { position: relative !important; overflow: visible !important; } .header-cart-wrap .gfs-header-cart-sum { position: absolute !important; top: +35px !important; left: 60% !important; transform: translateX(-50%) !important; white-space: nowrap !important; font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; background-color: #b89468 !important; color: #ffffff !important; padding: 4px 8px !important; border-radius: 20px !important; pointer-events: none !important; z-index: 10 !important; } /* WooCommerce-Preisformat innerhalb der Summe */ .header-cart-wrap .gfs-header-cart-sum .woocommerce-Price-amount { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; } /* ------------------------------------------------- Mini-Warenkorb: Platz für Mülleimer reservieren -------------------------------------------------- */ /* Jeder Artikel erhält rechts einen festen Schutzabstand */ .woocommerce-mini-cart li.woocommerce-mini-cart-item, .widget_shopping_cart li.woocommerce-mini-cart-item { position: relative !important; box-sizing: border-box !important; padding-right: 48px !important; } /* Lange Artikelnamen dürfen sauber umbrechen */ .woocommerce-mini-cart li.woocommerce-mini-cart-item > a:not(.remove), .widget_shopping_cart li.woocommerce-mini-cart-item > a:not(.remove) { display: block !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* Mülleimer fest in der rechten Spalte positionieren */ .woocommerce-mini-cart-item a.remove, .woocommerce-mini-cart-item a.remove_from_cart_button { position: absolute !important; top: 12px !important; right: 10px !important; left: auto !important; width: 24px !important; height: 24px !important; margin: 0 !important; transform: none !important; z-index: 20 !important; } /* ================================================= KOMPAKTE MODERNE DESKTOP-NAVIGATION ================================================= */ @media screen and (min-width: 1025px) { /* Kein künstliches Verschieben oder Verbreitern mehr */ .mega-menu-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* Menüinhalt zentrieren und großzügig ausnutzen */ .mega-menu-wrap > ul.mega-menu { width: 100% !important; max-width: 1600px !important; margin: 0 auto !important; padding: 0 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Einzelne Menüpunkte */ .mega-menu-wrap > ul.mega-menu > li.mega-menu-item { flex: 0 0 auto !important; margin: 0 !important; } /* Beschriftungen kompakt und mittig */ .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-height: 52px !important; height: 52px !important; padding: 0 9px !important; white-space: nowrap !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #222222 !important; background: transparent !important; border-radius: 6px !important; transition: color 0.2s ease, background-color 0.2s ease !important; } /* Pfeile direkt neben dem Kategorienamen */ .mega-menu-wrap .mega-indicator { position: static !important; display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; margin: 0 0 0 3px !important; transform: none !important; } /* Dezenter Hover-Effekt */ .mega-menu-wrap > ul.mega-menu > li.mega-menu-item:hover > a.mega-menu-link, .mega-menu-wrap > ul.mega-menu > li.mega-current-menu-item > a.mega-menu-link, .mega-menu-wrap > ul.mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link { color: #84623b !important; background-color: rgba(184, 148, 104, 0.13) !important; } } /* Auf normalen Laptops darf das Menü kompakt zweizeilig werden */ @media screen and (min-width: 1025px) and (max-width: 1499px) { .mega-menu-wrap > ul.mega-menu { flex-wrap: wrap !important; padding-top: 5px !important; padding-bottom: 5px !important; } .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { min-height: 40px !important; height: 40px !important; padding-left: 7px !important; padding-right: 7px !important; font-size: 12px !important; } } /* Auf großen Bildschirmen alle Kategorien in einer Zeile */ @media screen and (min-width: 1500px) { .mega-menu-wrap > ul.mega-menu { flex-wrap: nowrap !important; } } /* Untertitel unter dem Shopnamen */ .site-branding .site-description { color: #777777 !important; font-size: 13px !important; line-height: 1.3 !important; margin-top: 3px !important; } /* Moderner Hover-Effekt für die Hauptnavigation */ @media screen and (min-width: 1025px) { .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { position: relative !important; background: transparent !important; } .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 2px; background-color: #6f5132; transform: scaleX(0); transform-origin: center; transition: transform 0.2s ease; } .mega-menu-wrap > ul.mega-menu > li.mega-menu-item:hover > a.mega-menu-link::after, .mega-menu-wrap > ul.mega-menu > li.mega-current-menu-item > a.mega-menu-link::after, .mega-menu-wrap > ul.mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link::after { transform: scaleX(1); } } /* Oberer Titelbereich auf Produktkategorie-Seiten dunkler einfärben */ body.tax-product_cat .entry-hero, body.tax-product_cat .kadence-hero-header, body.tax-product_cat .woocommerce-products-header { background-color: #b89468 !important; } /* Überschrift im Titelbereich */ body.tax-product_cat .entry-hero h1, body.tax-product_cat .kadence-hero-header h1, body.tax-product_cat .woocommerce-products-header h1 { color: #1f1f1f !important; font-weight: 400 !important; } /* Navigation: Text bei Hover und aktiver Kategorie gut lesbar */ @media screen and (min-width: 1025px) { .mega-menu-wrap > ul.mega-menu > li.mega-menu-item:hover > a.mega-menu-link, .mega-menu-wrap > ul.mega-menu > li.mega-current-menu-item > a.mega-menu-link, .mega-menu-wrap > ul.mega-menu > li.mega-current-menu-ancestor > a.mega-menu-link { color: #111111 !important; background-color: rgba(255, 255, 255, 0.18) !important; text-decoration: none !important; } } /* Oberkategorien auf der Startseite hervorheben */ body.home li.product-category .woocommerce-loop-category__title { font-size: clamp(17px, 1.1vw, 19px) !important; font-weight: 500 !important; line-height: 1.3 !important; color: #1f1f1f !important; } /* Kategorien in der oberen Navigation besser lesbar */ @media screen and (min-width: 1025px) { .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; } } .mein-rabatt-balken { display: block !important; /* Zwingt das System, es als eigenen Block zu behandeln */ width: fit-content !important; /* Macht den Balken EXAKT so breit wie den Text + Padding */ background-color: #b89565 !important; color: #000000 !important; margin: 0px !important; /* Zentriert den passgenauen Balken in der Mitte */ padding: 4px 20px !important; /* Dein Abstand: 8px oben/unten, 20px links/rechts */ border-radius: 4px !important; } /* Warenkorb-Button auf der Produktseite immer sichtbar machen */ .woocommerce div.product form.cart .button.single_add_to_cart_button { background-color: #b89565 !important; /* Dein brauner Farbton aus dem Rabatt-Balken */ color: #000000 !important; /* Schwarze Schrift */ opacity: 1 !important; /* Verhindert, dass der Button transparent ist */ display: inline-block !important; } /* Optional: Die Farbe, wenn du mit der Maus darüberfährst */ .woocommerce div.product form.cart .button.single_add_to_cart_button:hover { background-color: #333333 !important; /* Dunkelgrau beim Hovern */ color: #ffffff !important; } /* ================================================== Elegante Trennlinie über dem Copyright-Bereich ================================================== */ #colophon .site-bottom-footer-wrap { position: relative !important; margin-top: 30px !important; padding-top: 32px !important; } /* Feine, mittig auslaufende Linie */ #colophon .site-bottom-footer-wrap::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: min(1240px, calc(100% - 48px)) !important; height: 1px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent 0%, rgba(184, 148, 104, 0.25) 8%, #b89468 50%, rgba(184, 148, 104, 0.25) 92%, transparent 100% ) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important; pointer-events: none !important; } /* Copyright etwas feiner gestalten */ #colophon .site-bottom-footer-wrap, #colophon .site-bottom-footer-wrap p, #colophon .site-bottom-footer-wrap a { font-size: 15px !important; color: #666666 !important; } /* Mobile Anpassung */ @media screen and (max-width: 767px) { #colophon .site-bottom-footer-wrap { margin-top: 20px !important; padding-top: 26px !important; } #colophon .site-bottom-footer-wrap::before { width: calc(100% - 36px) !important; } } /* ================================================== Einheitliche Hoverfarbe für Textlinks – websiteweit ================================================== */ /* Sanfter Farbwechsel */ .site-footer a, #colophon a, .site-main a:not(.button):not(.wp-element-button):not(.checkout-button):not(.wc-block-components-button), #primary a:not(.button):not(.wp-element-button):not(.checkout-button):not(.wc-block-components-button) { transition: color 0.2s ease, text-decoration-color 0.2s ease !important; } /* Hover- und Tastaturfokus */ .site-footer a:hover, .site-footer a:focus-visible, #colophon a:hover, #colophon a:focus-visible, .site-main a:not(.button):not(.wp-element-button):not(.checkout-button):not(.wc-block-components-button):hover, .site-main a:not(.button):not(.wp-element-button):not(.checkout-button):not(.wc-block-components-button):focus-visible, #primary a:not(.button):not(.wp-element-button):not(.checkout-button):not(.wc-block-components-button):hover, #primary a:not(.button):not(.wp-element-button):not(.checkout-button):not(.wc-block-components-button):focus-visible { color: #b89468 !important; text-decoration-color: #b89468 !important; } /* ================================================== EINHEITLICHE SCHRIFTART – GESAMTE WEBSITE ================================================== */ body, h1, h2, h3, h4, h5, h6, p, a, li, label, button, input, select, textarea, th, td { font-family: "Montserrat", Arial, sans-serif !important; } /* ================================================== FOOTER-ÜBERSCHRIFTEN EINHEITLICH GESTALTEN ================================================== */ .site-footer .site-top-footer-wrap .widget-title, .site-footer .site-middle-footer-wrap .widget-title, .site-footer .site-top-footer-wrap .wp-block-heading, .site-footer .site-middle-footer-wrap .wp-block-heading, .site-footer .site-top-footer-wrap h2, .site-footer .site-top-footer-wrap h3, .site-footer .site-top-footer-wrap h4, .site-footer .site-middle-footer-wrap h2, .site-footer .site-middle-footer-wrap h3, .site-footer .site-middle-footer-wrap h4 { display: inline-block !important; margin: 0 0 20px 0 !important; padding: 0 0 7px 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #111111 !important; text-transform: none !important; letter-spacing: 0 !important; border-bottom: 2px solid #b89468 !important; } /* ================================================== FOOTER-TEXTE SCHWARZ STATT GRAU ================================================== */ .site-footer .site-top-footer-wrap p, .site-footer .site-middle-footer-wrap p, .site-footer .site-top-footer-wrap li, .site-footer .site-middle-footer-wrap li, .site-footer .site-top-footer-wrap a, .site-footer .site-middle-footer-wrap a, .site-footer .site-top-footer-wrap address, .site-footer .site-middle-footer-wrap address { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; font-weight: 400 !important; } /* Links im Footer beim Überfahren beige */ .site-footer .site-top-footer-wrap a:hover, .site-footer .site-middle-footer-wrap a:hover, .site-footer .site-top-footer-wrap a:focus-visible, .site-footer .site-middle-footer-wrap a:focus-visible { color: #b89468 !important; text-decoration-color: #b89468 !important; } /* ================================================== MOBILE ANPASSUNG ================================================== */ @media screen and (max-width: 767px) { .site-footer .site-top-footer-wrap .widget-title, .site-footer .site-middle-footer-wrap .widget-title, .site-footer .site-top-footer-wrap .wp-block-heading, .site-footer .site-middle-footer-wrap .wp-block-heading, .site-footer .site-top-footer-wrap h2, .site-footer .site-top-footer-wrap h3, .site-footer .site-top-footer-wrap h4, .site-footer .site-middle-footer-wrap h2, .site-footer .site-middle-footer-wrap h3, .site-footer .site-middle-footer-wrap h4 { font-size: 18px !important; margin-bottom: 16px !important; } } /* ================================================== ELEGANTE, SPITZ ZULAUFENDE FOOTER-TRENNLINIE Websiteweit über die gesamte Bildschirmbreite ================================================== */ .site-footer, #colophon { position: relative !important; margin-top: 72px !important; padding-top: 48px !important; overflow: visible !important; } /* Mittig kräftig, zu den Bildschirmrändern immer dünner */ .site-footer::before, #colophon::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: 100vw !important; height: 7px !important; transform: translateX(-50%) !important; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 42% ), linear-gradient( 90deg, #9f7446 0%, #b89468 18%, #c8aa83 50%, #b89468 82%, #9f7446 100% ) !important; /* Die Linie läuft an beiden Seiten spitz zu */ -webkit-clip-path: polygon( 0 50%, 3% 36%, 6% 22%, 10% 9%, 15% 0, 85% 0, 90% 9%, 94% 22%, 97% 36%, 100% 50%, 97% 64%, 94% 78%, 90% 91%, 85% 100%, 15% 100%, 10% 91%, 6% 78%, 3% 64% ) !important; clip-path: polygon( 0 50%, 3% 36%, 6% 22%, 10% 9%, 15% 0, 85% 0, 90% 9%, 94% 22%, 97% 36%, 100% 50%, 97% 64%, 94% 78%, 90% 91%, 85% 100%, 15% 100%, 10% 91%, 6% 78%, 3% 64% ) !important; box-shadow: 0 4px 13px rgba(65, 43, 22, 0.12), 0 -1px 4px rgba(0, 0, 0, 0.025) !important; pointer-events: none !important; z-index: 2 !important; } /* ================================================== TABLET ================================================== */ @media screen and (max-width: 1024px) { .site-footer, #colophon { margin-top: 60px !important; padding-top: 44px !important; } .site-footer::before, #colophon::before { height: 6px !important; } } /* ================================================== SMARTPHONE ================================================== */ @media screen and (max-width: 767px) { .site-footer, #colophon { margin-top: 48px !important; padding-top: 38px !important; } .site-footer::before, #colophon::before { height: 5px !important; box-shadow: 0 3px 9px rgba(65, 43, 22, 0.10), 0 -1px 3px rgba(0, 0, 0, 0.02) !important; } } /* ================================================== EDLE RAHMEN FÜR KATEGORIE- UND PRODUKTKACHELN ================================================== */ /* Kategorien, klassische Produktkacheln und Block-Produkte */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce ul.products li.product-category, .woocommerce-page ul.products li.product-category, .wc-block-grid__product, .wc-block-product { position: relative !important; box-sizing: border-box !important; background-color: #ffffff !important; border-radius: 10px !important; /* Sehr dezente Kontur im Normalzustand */ box-shadow: inset 0 0 0 1px rgba(184, 148, 104, 0.20), 0 8px 24px rgba(0, 0, 0, 0.045) !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } /* Hover und Tastaturfokus */ .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover, .woocommerce ul.products li.product-category:hover, .woocommerce-page ul.products li.product-category:hover, .wc-block-grid__product:hover, .wc-block-product:hover, .woocommerce ul.products li.product:focus-within, .woocommerce-page ul.products li.product:focus-within, .woocommerce ul.products li.product-category:focus-within, .woocommerce-page ul.products li.product-category:focus-within, .wc-block-grid__product:focus-within, .wc-block-product:focus-within { transform: translateY(-4px) !important; box-shadow: inset 0 0 0 1px #b89468, 0 14px 32px rgba(78, 54, 29, 0.13) !important; } /* Bilder passend zur Kartenform abrunden */ .woocommerce ul.products li.product img, .woocommerce-page ul.products li.product img, .wc-block-grid__product img, .wc-block-product img { border-radius: 10px 10px 0 0 !important; } /* Auf Geräten ohne echte Maus keine Bewegung erzwingen */ @media (hover: none) { .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover, .woocommerce ul.products li.product-category:hover, .woocommerce-page ul.products li.product-category:hover, .wc-block-grid__product:hover, .wc-block-product:hover { transform: none !important; } } /* ================================================== TITEL UND BESCHREIBUNG AUF PRODUKTKATEGORIE-SEITEN ================================================== */ /* Hauptüberschrift, z. B. „Handgefertigte Gläser“ */ body.tax-product_cat .entry-hero h1, body.tax-product_cat .kadence-hero-header h1, body.tax-product_cat .woocommerce-products-header h1, body.tax-product_cat h1.page-title, body.tax-product_cat h1.entry-title { color: #111111 !important; font-weight: 700 !important; font-variation-settings: "wght" 700 !important; } /* Gesamter Beschreibungstext unter der Überschrift */ body.tax-product_cat .archive-description, body.tax-product_cat .archive-description p, body.tax-product_cat .archive-description strong, body.tax-product_cat .term-description, body.tax-product_cat .term-description p, body.tax-product_cat .term-description strong, body.tax-product_cat .woocommerce-products-header__description, body.tax-product_cat .woocommerce-products-header__description p, body.tax-product_cat .woocommerce-products-header__description strong, body.tax-product_cat .entry-hero p, body.tax-product_cat .entry-hero strong, body.tax-product_cat .kadence-hero-header p, body.tax-product_cat .kadence-hero-header strong { color: #111111 !important; opacity: 1 !important; } /* Zwischenüberschriften innerhalb der Beschreibung */ body.tax-product_cat .archive-description h2, body.tax-product_cat .archive-description h3, body.tax-product_cat .term-description h2, body.tax-product_cat .term-description h3, body.tax-product_cat .woocommerce-products-header__description h2, body.tax-product_cat .woocommerce-products-header__description h3 { color: #111111 !important; font-weight: 700 !important; opacity: 1 !important; } /* ================================================== SEITENZAHLEN / PAGINIERUNG WEBSITEWEIT ================================================== */ /* Grunddarstellung aller Seitenzahlen */ .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce-pagination .page-numbers, .pagination .page-numbers, .navigation.pagination .page-numbers, .wc-block-pagination-page { color: #222222 !important; border-radius: 5px !important; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important; } /* Aktuell ausgewählte Seite */ .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce-pagination .page-numbers.current, .pagination .page-numbers.current, .navigation.pagination .page-numbers.current, .wc-block-pagination-page--active { background-color: #b89468 !important; color: #ffffff !important; border-color: #b89468 !important; box-shadow: 0 4px 12px rgba(89, 60, 31, 0.15) !important; } /* Andere Seitenzahlen und Pfeile beim Darüberfahren */ .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:focus-visible, .woocommerce-pagination a.page-numbers:hover, .woocommerce-pagination a.page-numbers:focus-visible, .pagination a.page-numbers:hover, .pagination a.page-numbers:focus-visible, .navigation.pagination a.page-numbers:hover, .navigation.pagination a.page-numbers:focus-visible, .wc-block-pagination-page:hover, .wc-block-pagination-page:focus-visible { background-color: #b89468 !important; color: #ffffff !important; border-color: #b89468 !important; } /* Aktive Seite auch beim Hover unverändert lassen */ .woocommerce nav.woocommerce-pagination ul li span.current:hover, .page-numbers.current:hover, .wc-block-pagination-page--active:hover { background-color: #b89468 !important; color: #ffffff !important; } /* ================================================== MEIN KONTO – BUTTONS UND AKTIVE NAVIGATION ================================================== */ /* Buttons im gesamten Mein-Konto-Bereich */ body.woocommerce-account .woocommerce-Button, body.woocommerce-account .woocommerce-button, body.woocommerce-account .button, body.woocommerce-account button[type="submit"], body.woocommerce-account input[type="submit"], body.woocommerce-account .wp-element-button { background-color: #b89468 !important; color: #ffffff !important; border-color: #b89468 !important; opacity: 1 !important; font-weight: 600 !important; text-decoration: none !important; border-radius: 5px !important; box-shadow: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important; } /* Buttons beim Darüberfahren */ body.woocommerce-account .woocommerce-Button:hover, body.woocommerce-account .woocommerce-button:hover, body.woocommerce-account .button:hover, body.woocommerce-account button[type="submit"]:hover, body.woocommerce-account input[type="submit"]:hover, body.woocommerce-account .wp-element-button:hover, body.woocommerce-account .woocommerce-Button:focus-visible, body.woocommerce-account .woocommerce-button:focus-visible, body.woocommerce-account .button:focus-visible, body.woocommerce-account button[type="submit"]:focus-visible { background-color: #9c7b52 !important; color: #ffffff !important; border-color: #9c7b52 !important; } /* ================================================== AKTIVER MENÜPUNKT, Z. B. „DASHBOARD“ ================================================== */ /* Gesamter aktive Navigationspunkt */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { border-color: #b89468 !important; } /* Text und Hintergrund des aktiven Menüpunktes */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a { background-color: rgba(184, 148, 104, 0.14) !important; color: #111111 !important; border-color: #b89468 !important; font-weight: 600 !important; } /* Beige Markierung links oder neben „Dashboard“ */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active::before, body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active::after, body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a::before, body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a::after { background-color: #b89468 !important; border-color: #b89468 !important; } /* Falls das Theme die aktive Markierung als linken Rand ausgibt */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active, body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a { border-left-color: #b89468 !important; } /* Nicht aktive Kontomenüpunkte beim Hover */ body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) > a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) > a:focus-visible { color: #b89468 !important; background-color: rgba(184, 148, 104, 0.08) !important; } /* ================================================== MEIN KONTO – TEXTLINKS KRÄFTIGES BEIGE ================================================== */ /* Links wie: „letzten Bestellungen“ „Liefer- und Rechnungsadresse“ „Passwort und Kontodetails“ */ body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.wp-element-button) { color: #b89468 !important; font-weight: 600 !important; opacity: 1 !important; text-decoration-color: #b89468 !important; text-underline-offset: 3px !important; transition: color 0.2s ease, text-decoration-color 0.2s ease !important; } /* Hover und Tastaturfokus */ body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.wp-element-button):hover, body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.wp-element-button):focus-visible { color: #9c7b52 !important; text-decoration-color: #9c7b52 !important; } /* ================================================== NAVIGATION LINKS IM MEIN-KONTO-BEREICH ================================================== */ /* Nicht aktive Menüpunkte */ body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) > a { color: #111111 !important; opacity: 1 !important; } /* Aktiver Menüpunkt, z. B. Dashboard */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a { color: #b89468 !important; font-weight: 700 !important; opacity: 1 !important; } /* Navigation beim Hover */ body.woocommerce-account .woocommerce-MyAccount-navigation li > a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation li > a:focus-visible { color: #b89468 !important; } /* ================================================== MEGA-MENÜ: UNTERKATEGORIEN BEIM HOVER HERVORHEBEN ================================================== */ /* Sanfter Übergang */ .mega-menu-wrap ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link { transition: color 0.2s ease, background-color 0.2s ease, text-decoration-color 0.2s ease !important; } /* Hover und Tastaturfokus */ .mega-menu-wrap ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover, .mega-menu-wrap ul.mega-sub-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus-visible { color: #b89468 !important; background-color: rgba(184, 148, 104, 0.10) !important; text-decoration: underline !important; text-decoration-color: #b89468 !important; text-underline-offset: 3px !important; } /* ================================================== „ZUSÄTZLICHE INFORMATIONEN“ AUF PRODUKTSEITEN VOLLSTÄNDIG AUSBLENDEN ================================================== */ /* Reiter beziehungsweise Schaltfläche ausblenden */ body.single-product .woocommerce-tabs .additional_information_tab { display: none !important; } /* Inhalt mit Verpackungseinheiten ausblenden */ body.single-product #tab-additional_information, body.single-product .woocommerce-Tabs-panel--additional_information { display: none !important; } /* Wenn „Zusätzliche Informationen“ der einzige Reiter ist: gesamten leeren Reiterbereich entfernen */ body.single-product .woocommerce-tabs.wc-tabs-wrapper:has( > ul.tabs > li.additional_information_tab:only-child ) { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* Mengenfeld groß genug für vierstellige Zahlen */ .woocommerce .quantity .qty, .woocommerce-page .quantity .qty, body.single-product input.qty { width: 100px !important; min-width: 100px !important; max-width: none !important; padding-left: 10px !important; padding-right: 28px !important; box-sizing: border-box !important; text-align: center !important; } /* Warenkorbsumme: schwarze Schrift auf beigem Hintergrund */ .header-cart-wrap .gfs-header-cart-sum, .header-cart-wrap .gfs-header-cart-sum .woocommerce-Price-amount, .header-cart-wrap .gfs-header-cart-sum .woocommerce-Price-currencySymbol { color: #111111 !important; } /* ================================================== PRODUKTSEITE: TEXTE SCHWARZ UND BESCHREIBUNGSREITER BEIGE ================================================== */ /* -------------------------------------------------- 1. Kurzbeschreibung unter dem Produkttitel -------------------------------------------------- */ body.single-product .woocommerce-product-details__short-description, body.single-product .woocommerce-product-details__short-description p, body.single-product .woocommerce-product-details__short-description li, body.single-product .summary .product-short-description, body.single-product .summary .product-short-description p, body.single-product .summary .product-short-description li { color: #111111 !important; opacity: 1 !important; } /* -------------------------------------------------- 2. Preis, Mehrwertsteuer und Verpackungseinheit -------------------------------------------------- */ body.single-product .summary .price, body.single-product .summary .price *, body.single-product .summary .woocommerce-Price-amount, body.single-product .summary .woocommerce-Price-currencySymbol, body.single-product .summary .wgm-info, body.single-product .summary .wgm-info *, body.single-product .summary .woocommerce-de_price_taxrate, body.single-product .summary .wc-gzd-additional-info, body.single-product .summary .wc-gzd-additional-info *, body.single-product .summary .tax-info, body.single-product .summary .product-units, body.single-product .summary .unit-price, body.single-product .summary .price-per-unit, body.single-product .summary .legal-price-info { color: #111111 !important; opacity: 1 !important; } /* Links innerhalb der Preis- und Steuerangaben */ body.single-product .summary .price a, body.single-product .summary .wgm-info a, body.single-product .summary .wc-gzd-additional-info a, body.single-product .summary .tax-info a { color: #111111 !important; text-decoration-color: #111111 !important; } /* Links beim Darüberfahren */ body.single-product .summary .price a:hover, body.single-product .summary .wgm-info a:hover, body.single-product .summary .wc-gzd-additional-info a:hover, body.single-product .summary .tax-info a:hover, body.single-product .summary .price a:focus-visible, body.single-product .summary .wgm-info a:focus-visible, body.single-product .summary .wc-gzd-additional-info a:focus-visible, body.single-product .summary .tax-info a:focus-visible { color: #b89468 !important; text-decoration-color: #b89468 !important; } /* -------------------------------------------------- 3. Artikelnummer und Kategorien -------------------------------------------------- */ body.single-product .product_meta, body.single-product .product_meta span, body.single-product .product_meta strong, body.single-product .product_meta .sku, body.single-product .sku_wrapper, body.single-product .posted_in, body.single-product .tagged_as { color: #111111 !important; opacity: 1 !important; } /* Kategorie- und Schlagwort-Links */ body.single-product .product_meta a { color: #111111 !important; opacity: 1 !important; text-decoration-color: #111111 !important; transition: color 0.2s ease, text-decoration-color 0.2s ease !important; } body.single-product .product_meta a:hover, body.single-product .product_meta a:focus-visible { color: #b89468 !important; text-decoration-color: #b89468 !important; } /* -------------------------------------------------- 4. Aktiver Reiter „Beschreibung“ -------------------------------------------------- */ body.single-product .woocommerce-tabs ul.tabs li.description_tab.active, body.single-product .woocommerce-tabs ul.wc-tabs li.active { background-color: #b89468 !important; border-color: #b89468 !important; } /* Text im aktiven Reiter */ body.single-product .woocommerce-tabs ul.tabs li.description_tab.active > a, body.single-product .woocommerce-tabs ul.wc-tabs li.active > a { background-color: #b89468 !important; color: #111111 !important; border-color: #b89468 !important; font-weight: 700 !important; opacity: 1 !important; text-decoration: none !important; } /* -------------------------------------------------- 5. Beschreibungstext und Überschriften -------------------------------------------------- */ body.single-product #tab-description, body.single-product #tab-description p, body.single-product #tab-description li, body.single-product #tab-description span, body.single-product #tab-description strong, body.single-product .woocommerce-Tabs-panel--description, body.single-product .woocommerce-Tabs-panel--description p, body.single-product .woocommerce-Tabs-panel--description li, body.single-product .woocommerce-Tabs-panel--description span, body.single-product .woocommerce-Tabs-panel--description strong { color: #111111 !important; opacity: 1 !important; } /* Überschrift „Beschreibung“ */ body.single-product #tab-description h2, body.single-product #tab-description h3, body.single-product #tab-description h4, body.single-product .woocommerce-Tabs-panel--description h2, body.single-product .woocommerce-Tabs-panel--description h3, body.single-product .woocommerce-Tabs-panel--description h4 { color: #111111 !important; font-weight: 600 !important; opacity: 1 !important; } /* ================================================== PRODUKTSEITE: BEIGE TRENNLINIEN ================================================== */ /* Linie direkt unter dem Reiter „Beschreibung“ */ body.single-product .woocommerce-tabs ul.tabs, body.single-product .woocommerce-tabs ul.wc-tabs { border-bottom: 1px solid #b89468 !important; } /* Theme-eigene Linie ebenfalls beige überschreiben */ body.single-product .woocommerce-tabs ul.tabs::before, body.single-product .woocommerce-tabs ul.wc-tabs::before { border-bottom-color: #b89468 !important; } /* Linie unter der Beschreibung und über „Ähnliche Produkte“ */ body.single-product .related.products, body.single-product .up-sells.products { margin-top: 45px !important; padding-top: 32px !important; border-top: 3px solid #b89468 !important; } /* Zusätzliche Überschrift „Beschreibung“ ausblenden */ body.single-product #tab-description > h2:first-child, body.single-product .woocommerce-Tabs-panel--description > h2:first-child { display: none !important; } /* ================================================== PRODUKTKACHELN: BEIGER TEXTBEREICH MIT SCHWARZER SCHRIFT ================================================== */ /* Unterer Informationsbereich jeder Produktkachel */ .woocommerce ul.products li.product .entry-content-wrap, .woocommerce-page ul.products li.product .entry-content-wrap, .woocommerce ul.products li.product .product-details, .woocommerce-page ul.products li.product .product-details, .woocommerce ul.products li.product .product-details.content-bg, .woocommerce-page ul.products li.product .product-details.content-bg { background-color: #b89468 !important; color: #111111 !important; } /* Produktname */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title a, .woocommerce-page ul.products li.product .woocommerce-loop-product__title a { color: #111111 !important; opacity: 1 !important; } /* Preis, MwSt. und Verpackungseinheit */ .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price *, .woocommerce-page ul.products li.product .price, .woocommerce-page ul.products li.product .price *, .woocommerce ul.products li.product .wc-gzd-additional-info, .woocommerce ul.products li.product .wc-gzd-additional-info *, .woocommerce-page ul.products li.product .wc-gzd-additional-info, .woocommerce-page ul.products li.product .wc-gzd-additional-info * { color: #111111 !important; opacity: 1 !important; } /* „In den Warenkorb“-Text innerhalb der Kachel */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button { color: #111111 !important; font-weight: 700 !important; text-decoration-color: #111111 !important; } /* Beim Hover bleibt alles gut lesbar */ .woocommerce ul.products li.product:hover .entry-content-wrap, .woocommerce ul.products li.product:hover .product-details, .woocommerce-page ul.products li.product:hover .entry-content-wrap, .woocommerce-page ul.products li.product:hover .product-details { background-color: #b89468 !important; color: #111111 !important; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__title, .woocommerce ul.products li.product:hover .price, .woocommerce ul.products li.product:hover .price *, .woocommerce ul.products li.product:hover .wc-gzd-additional-info, .woocommerce ul.products li.product:hover .wc-gzd-additional-info *, .woocommerce ul.products li.product:hover .button { color: #111111 !important; } /* ================================================== PRODUKTKACHELN: WARENKORB-LINK FEST IN DEN BEIGEN BEREICH INTEGRIEREN ================================================== */ /* Beiger Informationsbereich */ .woocommerce ul.products li.product .entry-content-wrap, .woocommerce-page ul.products li.product .entry-content-wrap, .woocommerce ul.products li.product .product-details, .woocommerce-page ul.products li.product .product-details { display: flex !important; flex-direction: column !important; background-color: #b89468 !important; color: #111111 !important; overflow: hidden !important; } /* Theme-eigenes Hereinschieben des Warenkorb-Links abschalten */ .woocommerce ul.products li.product .product-action-wrap, .woocommerce-page ul.products li.product .product-action-wrap { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 12px 0 0 !important; padding: 10px 0 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; border-top: 1px solid rgba(17, 17, 17, 0.22) !important; background: transparent !important; } /* „In den Warenkorb“ als ruhiger Textlink */ .woocommerce ul.products li.product .product-action-wrap .button, .woocommerce-page ul.products li.product .product-action-wrap .button, .woocommerce ul.products li.product a.button, .woocommerce-page ul.products li.product a.button { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #111111 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Dezente Reaktion beim Hover */ .woocommerce ul.products li.product .product-action-wrap .button:hover, .woocommerce-page ul.products li.product .product-action-wrap .button:hover, .woocommerce ul.products li.product .product-action-wrap .button:focus-visible, .woocommerce-page ul.products li.product .product-action-wrap .button:focus-visible { color: #111111 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* ================================================== PRODUKTKACHELN: EINHEITLICHE HÖHE ================================================== */ /* Alle Produkte einer Zeile gleich hoch strecken */ .woocommerce ul.products, .woocommerce-page ul.products { align-items: stretch !important; } /* Gesamte Produktkachel */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { display: flex !important; flex-direction: column !important; align-self: stretch !important; height: 100% !important; min-height: 0 !important; } /* Beiger Informationsbereich */ .woocommerce ul.products li.product .entry-content-wrap, .woocommerce-page ul.products li.product .entry-content-wrap, .woocommerce ul.products li.product .product-details, .woocommerce-page ul.products li.product .product-details, .woocommerce ul.products li.product .product-details.content-bg, .woocommerce-page ul.products li.product .product-details.content-bg { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; min-height: 160px !important; background-color: #b89468 !important; color: #111111 !important; } /* Platz für bis zu zwei Zeilen beim Produktnamen */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title { min-height: 3em !important; margin-bottom: 8px !important; color: #111111 !important; line-height: 1.5 !important; } /* Preis und Verpackungseinheit ebenfalls ausrichten */ .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price { min-height: 3em !important; margin-bottom: 8px !important; color: #111111 !important; } /* Warenkorb-Link immer unten platzieren */ .woocommerce ul.products li.product .product-action-wrap, .woocommerce-page ul.products li.product .product-action-wrap { margin-top: auto !important; } /* Die Schaltfläche selbst darf nichts verschieben */ .woocommerce ul.products li.product .product-action-wrap .button, .woocommerce-page ul.products li.product .product-action-wrap .button { position: static !important; transform: none !important; } /* Auf Smartphones wieder etwas kompakter */ @media screen and (max-width: 767px) { .woocommerce ul.products li.product .entry-content-wrap, .woocommerce-page ul.products li.product .entry-content-wrap, .woocommerce ul.products li.product .product-details, .woocommerce-page ul.products li.product .product-details { min-height: 145px !important; } } /* Pfeile passend zur Beschriftung */ html body :is(#gfs-menu-wrap, [id^="mega-menu-wrap-"]) :is(#gfs-main-menu, ul[id^="mega-menu-"]) > li.mega-menu-item > a.mega-menu-link .mega-indicator { font-size: 18px !important; font-weight: 600 !important; color: #111111 !important; } /* Auf kleineren Desktop- und Laptop-Bildschirmen kompakter */ @media screen and (min-width: 1025px) and (max-width: 1450px) { html body :is(#gfs-menu-wrap, [id^="mega-menu-wrap-"]) :is(#gfs-main-menu, ul[id^="mega-menu-"]) > li.mega-menu-item > a.mega-menu-link { font-size: 13px !important; padding-left: 7px !important; padding-right: 7px !important; } } /* ================================================== PRODUKTKACHELN: BEIGEN BEREICH MITTIG AUSRICHTEN ================================================== */ .woocommerce ul.products li.product .entry-content-wrap, .woocommerce-page ul.products li.product .entry-content-wrap, .woocommerce ul.products li.product .product-details, .woocommerce-page ul.products li.product .product-details, .woocommerce ul.products li.product .product-details.content-bg, .woocommerce-page ul.products li.product .product-details.content-bg { width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; box-sizing: border-box !important; left: auto !important; right: auto !important; transform: none !important; } /* Auch beim Hover mittig lassen */ .woocommerce ul.products li.product:hover .entry-content-wrap, .woocommerce-page ul.products li.product:hover .entry-content-wrap, .woocommerce ul.products li.product:hover .product-details, .woocommerce-page ul.products li.product:hover .product-details { margin-left: auto !important; margin-right: auto !important; transform: none !important; } /* Produktbezeichnungen in den Kacheln fett darstellen */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .woocommerce-loop-product__title a, .woocommerce-page ul.products li.product .woocommerce-loop-product__title a { font-weight: 700 !important; color: #111111 !important; } /* ================================================== SCHMALER BEIGER RAHMEN UM PRODUKTBILDER Einschließlich WooCommerce-Platzhalter ================================================== */ /* Großes Produktbild und Platzhalter auf Artikelseiten */ html body.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image, html body.single-product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image--placeholder, html body.single-product .woocommerce-product-gallery__wrapper > div:first-child { position: relative !important; box-sizing: border-box !important; overflow: hidden !important; border: 1px solid #b89468 !important; border-radius: 8px !important; } /* Das Bild sauber innerhalb des Rahmens halten */ html body.single-product .woocommerce-product-gallery__wrapper > div:first-child img { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; border: none !important; outline: none !important; border-radius: 7px !important; } /* ================================================== PRODUKTBILDER IN SHOP UND KATEGORIEN ================================================== */ html body.woocommerce ul.products li.product .product-image-wrap, html body.woocommerce ul.products li.product .woo-archive-img-wrap, html body.woocommerce ul.products li.product .kadence-woo-image-internal { position: relative !important; box-sizing: border-box !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px #b89468 !important; border-radius: 8px 8px 0 0 !important; } /* ================================================== NORMALE KATEGORIEN UND PRODUKTKACHELN: BEIGEN TEXTBEREICH ENTFERNEN ================================================== */ /* Produktkacheln auf Shop-, Kategorie- und Übersichtsseiten */ body:not(.single-product) .woocommerce ul.products li.product .entry-content-wrap, body:not(.single-product) .woocommerce ul.products li.product .product-details, body:not(.single-product) .woocommerce ul.products li.product .product-details.content-bg, body:not(.single-product) .woocommerce-page ul.products li.product .entry-content-wrap, body:not(.single-product) .woocommerce-page ul.products li.product .product-details, body:not(.single-product) .woocommerce-page ul.products li.product .product-details.content-bg { background-color: transparent !important; background: transparent !important; color: #111111 !important; box-shadow: none !important; } /* Kategoriekacheln ebenfalls transparent lassen */ body:not(.single-product) .woocommerce ul.products li.product-category .entry-content-wrap, body:not(.single-product) .woocommerce ul.products li.product-category .product-details, body:not(.single-product) .woocommerce-page ul.products li.product-category .entry-content-wrap, body:not(.single-product) .woocommerce-page ul.products li.product-category .product-details { background-color: transparent !important; background: transparent !important; color: #111111 !important; box-shadow: none !important; } /* Auch beim Hover keinen beigen Hintergrund anzeigen */ body:not(.single-product) .woocommerce ul.products li.product:hover .entry-content-wrap, body:not(.single-product) .woocommerce ul.products li.product:hover .product-details, body:not(.single-product) .woocommerce ul.products li.product-category:hover .entry-content-wrap, body:not(.single-product) .woocommerce ul.products li.product-category:hover .product-details { background-color: transparent !important; background: transparent !important; } /* Texte auf normalen Kacheln schwarz */ body:not(.single-product) .woocommerce ul.products li.product .woocommerce-loop-product__title, body:not(.single-product) .woocommerce ul.products li.product .price, body:not(.single-product) .woocommerce ul.products li.product .price *, body:not(.single-product) .woocommerce ul.products li.product .wc-gzd-additional-info, body:not(.single-product) .woocommerce ul.products li.product .wc-gzd-additional-info *, body:not(.single-product) .woocommerce ul.products li.product-category .woocommerce-loop-category__title { color: #111111 !important; opacity: 1 !important; } /* ================================================== „ÄHNLICHE PRODUKTE“ UND UPSELLS: BEIGEN BEREICH BEIBEHALTEN ================================================== */ body.single-product .related.products ul.products li.product .entry-content-wrap, body.single-product .related.products ul.products li.product .product-details, body.single-product .up-sells.products ul.products li.product .entry-content-wrap, body.single-product .up-sells.products ul.products li.product .product-details { background-color: #b89468 !important; background: #b89468 !important; color: #111111 !important; } /* ================================================== WARENKORB: MÜLLEIMER DURCH MODERNES ROTES X ERSETZEN ================================================== */ body.woocommerce-cart table.cart td.product-remove a.remove { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; margin: 0 auto !important; padding: 0 !important; color: transparent !important; font-size: 0 !important; line-height: 1 !important; background-color: rgba(196, 47, 47, 0.10) !important; border: 1px solid rgba(196, 47, 47, 0.28) !important; border-radius: 50% !important; transform: none !important; box-shadow: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important; } /* Beide Linien des X */ body.woocommerce-cart table.cart td.product-remove a.remove::before, body.woocommerce-cart table.cart td.product-remove a.remove::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 14px !important; height: 2px !important; background-color: #c42f2f !important; border: none !important; border-radius: 2px !important; visibility: visible !important; pointer-events: none !important; } /* Erste diagonale Linie */ body.woocommerce-cart table.cart td.product-remove a.remove::before { transform: translate(-50%, -50%) rotate(45deg) !important; } /* Zweite diagonale Linie */ body.woocommerce-cart table.cart td.product-remove a.remove::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* Hover */ body.woocommerce-cart table.cart td.product-remove a.remove:hover { background-color: #c42f2f !important; border-color: #c42f2f !important; transform: scale(1.08) !important; } body.woocommerce-cart table.cart td.product-remove a.remove:hover::before, body.woocommerce-cart table.cart td.product-remove a.remove:hover::after { background-color: #ffffff !important; } /* Bedienung mit Tastatur */ body.woocommerce-cart table.cart td.product-remove a.remove:focus-visible { outline: 2px solid #c42f2f !important; outline-offset: 3px !important; } /* Alle Texte innerhalb dieser beigen Felder schwarz */ body.single-product .related.products ul.products li.product :is( .woocommerce-loop-product__title, .price, .price *, .wc-gzd-additional-info, .wc-gzd-additional-info *, .button ), body.single-product .up-sells.products ul.products li.product :is( .woocommerce-loop-product__title, .price, .price *, .wc-gzd-additional-info, .wc-gzd-additional-info *, .button ) { color: #111111 !important; opacity: 1 !important; } /* ================================================== NORMALE KATEGORIEN UND PRODUKTÜBERSICHTEN: TEXTBEREICH TRANSPARENT „Ähnliche Produkte“ auf Einzelproduktseiten bleiben davon unberührt. ================================================== */ /* -------------------------------------------------- KATEGORIEKACHELN -------------------------------------------------- */ html body:not(.single-product) ul.products li.product-category .woocommerce-loop-category__title, html body:not(.single-product) ul.products li.product-category .entry-content-wrap, html body:not(.single-product) ul.products li.product-category .product-details, html body:not(.single-product) ul.products li.product-category .product-details.content-bg { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #111111 !important; box-shadow: none !important; } /* Eventuelle zusätzliche Hintergrundebenen entfernen */ html body:not(.single-product) ul.products li.product-category .woocommerce-loop-category__title::before, html body:not(.single-product) ul.products li.product-category .woocommerce-loop-category__title::after, html body:not(.single-product) ul.products li.product-category .entry-content-wrap::before, html body:not(.single-product) ul.products li.product-category .entry-content-wrap::after { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* -------------------------------------------------- NORMALE PRODUKTKACHELN AUF SHOP- UND KATEGORIESEITEN -------------------------------------------------- */ html body:not(.single-product) ul.products li.product:not(.product-category) .entry-content-wrap, html body:not(.single-product) ul.products li.product:not(.product-category) .product-details, html body:not(.single-product) ul.products li.product:not(.product-category) .product-details.content-bg { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #111111 !important; box-shadow: none !important; } /* -------------------------------------------------- AUCH BEIM HOVER TRANSPARENT LASSEN -------------------------------------------------- */ html body:not(.single-product) ul.products li.product-category:hover .woocommerce-loop-category__title, html body:not(.single-product) ul.products li.product-category:hover .entry-content-wrap, html body:not(.single-product) ul.products li.product-category:hover .product-details, html body:not(.single-product) ul.products li.product:not(.product-category):hover .entry-content-wrap, html body:not(.single-product) ul.products li.product:not(.product-category):hover .product-details { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* -------------------------------------------------- TEXTE SCHWARZ UND GUT LESBAR -------------------------------------------------- */ html body:not(.single-product) ul.products li.product .woocommerce-loop-category__title, html body:not(.single-product) ul.products li.product .woocommerce-loop-product__title, html body:not(.single-product) ul.products li.product .price, html body:not(.single-product) ul.products li.product .price *, html body:not(.single-product) ul.products li.product .wc-gzd-additional-info, html body:not(.single-product) ul.products li.product .wc-gzd-additional-info * { color: #111111 !important; opacity: 1 !important; } /* ================================================== MINI-WARENKORB: MÜLLEIMER DURCH MODERNES ROTES X ERSETZEN ================================================== */ body .woocommerce-mini-cart-item a.remove, body .woocommerce-mini-cart-item a.remove_from_cart_button, body .widget_shopping_cart .woocommerce-mini-cart-item a.remove { position: absolute !important; top: 12px !important; right: 10px !important; left: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; margin: 0 !important; padding: 0 !important; color: transparent !important; font-size: 0 !important; line-height: 1 !important; background-color: rgba(196, 47, 47, 0.10) !important; border: 1px solid rgba(196, 47, 47, 0.28) !important; border-radius: 50% !important; transform: none !important; box-shadow: none !important; z-index: 50 !important; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important; } /* Theme-eigene Symbole ausblenden */ body .woocommerce-mini-cart-item a.remove svg, body .woocommerce-mini-cart-item a.remove i, body .woocommerce-mini-cart-item a.remove_from_cart_button svg, body .woocommerce-mini-cart-item a.remove_from_cart_button i { display: none !important; } /* Die beiden Linien des roten X */ body .woocommerce-mini-cart-item a.remove::before, body .woocommerce-mini-cart-item a.remove::after, body .woocommerce-mini-cart-item a.remove_from_cart_button::before, body .woocommerce-mini-cart-item a.remove_from_cart_button::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 14px !important; height: 2px !important; display: block !important; visibility: visible !important; background-color: #c42f2f !important; border: none !important; border-radius: 2px !important; pointer-events: none !important; } /* Erste diagonale Linie */ body .woocommerce-mini-cart-item a.remove::before, body .woocommerce-mini-cart-item a.remove_from_cart_button::before { transform: translate(-50%, -50%) rotate(45deg) !important; } /* Zweite diagonale Linie */ body .woocommerce-mini-cart-item a.remove::after, body .woocommerce-mini-cart-item a.remove_from_cart_button::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* Hover: roter Kreis mit weißem X */ body .woocommerce-mini-cart-item a.remove:hover, body .woocommerce-mini-cart-item a.remove_from_cart_button:hover { background-color: #c42f2f !important; border-color: #c42f2f !important; transform: scale(1.08) !important; } body .woocommerce-mini-cart-item a.remove:hover::before, body .woocommerce-mini-cart-item a.remove:hover::after, body .woocommerce-mini-cart-item a.remove_from_cart_button:hover::before, body .woocommerce-mini-cart-item a.remove_from_cart_button:hover::after { background-color: #ffffff !important; } /* Tastaturbedienung */ body .woocommerce-mini-cart-item a.remove:focus-visible, body .woocommerce-mini-cart-item a.remove_from_cart_button:focus-visible { outline: 2px solid #c42f2f !important; outline-offset: 3px !important; } /* Rechts dauerhaft Platz für das X freihalten */ body .woocommerce-mini-cart li.woocommerce-mini-cart-item, body .widget_shopping_cart li.woocommerce-mini-cart-item { position: relative !important; box-sizing: border-box !important; padding-right: 48px !important; } /* ================================================== „WARENKORB ANZEIGEN“ UND „ZURÜCKSETZEN“ ================================================== */ /* Button „Warenkorb anzeigen“ */ .woocommerce-message a.button, .woocommerce-message a.wc-forward, .woocommerce-notices-wrapper a.button, .woocommerce-notices-wrapper a.wc-forward { background-color: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; opacity: 1 !important; visibility: visible !important; font-weight: 600 !important; text-decoration: none !important; border-radius: 4px !important; box-shadow: none !important; } /* Hover für „Warenkorb anzeigen“ */ .woocommerce-message a.button:hover, .woocommerce-message a.wc-forward:hover, .woocommerce-notices-wrapper a.button:hover, .woocommerce-notices-wrapper a.wc-forward:hover { background-color: #9c7b52 !important; border-color: #9c7b52 !important; color: #111111 !important; } /* Link „Zurücksetzen“ bei Varianten */ body.single-product a.reset_variations, body.single-product .reset_variations { color: #b89468 !important; opacity: 1 !important; visibility: visible !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: #b89468 !important; text-underline-offset: 3px !important; } /* Hover für „Zurücksetzen“ */ body.single-product a.reset_variations:hover, body.single-product a.reset_variations:focus-visible { color: #9c7b52 !important; text-decoration-color: #9c7b52 !important; } /* Mini-Warenkorb: rotes X vom Scrollbalken abrücken */ body .woocommerce-mini-cart-item a.remove, body .woocommerce-mini-cart-item a.remove_from_cart_button, body .widget_shopping_cart .woocommerce-mini-cart-item a.remove { right: 18px !important; left: auto !important; } /* Rechts genügend Freiraum für X und Scrollbalken */ body .woocommerce-mini-cart li.woocommerce-mini-cart-item, body .widget_shopping_cart li.woocommerce-mini-cart-item { padding-right: 62px !important; } /* ================================================== HAUPTKATEGORIEN IN DER BEIGEN NAVIGATIONSLEISTE ================================================== */ @media screen and (min-width: 1025px) { html body [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link, html body .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: #111111 !important; } /* Kleine Pfeile passend ausrichten */ html body [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link > .mega-indicator, html body .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link > .mega-indicator { font-size: 11px !important; margin-left: 5px !important; color: #111111 !important; } } /* Auf kleineren Desktop- und Laptop-Bildschirmen kompakter */ @media screen and (min-width: 1025px) and (max-width: 1550px) { html body [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link, html body .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { font-size: 13px !important; } } /* ================================================== „MEIN KONTO“ AUF DER KONToseite WIEDER ANZEIGEN ================================================== */ /* Tatsächlich verwendetes Konto-Element erzwingen */ body.woocommerce-account .mein-perfektes-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; min-width: max-content !important; max-width: none !important; height: auto !important; margin-left: 18px !important; padding: 8px 0 !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; color: #111111 !important; text-decoration: none !important; /* * Vorhandene unsichtbare Beschriftung ausblenden, * damit sie nicht doppelt ausgegeben wird. */ font-size: 0 !important; } /* Beschriftung zuverlässig neu erzeugen */ body.woocommerce-account .mein-perfektes-icon::after { content: "Mein Konto" !important; display: inline-block !important; flex: 0 0 auto !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #111111 !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; } /* Eventuelles Konto-Icon weiterhin sichtbar lassen */ body.woocommerce-account .mein-perfektes-icon .kunden-maske { display: inline-block !important; flex: 0 0 40px !important; width: 40px !important; height: 35px !important; visibility: visible !important; opacity: 1 !important; } /* Zusätzliche Absicherung für den Kontolink im Header */ body.woocommerce-account .site-header a[href*="mein-konto"] { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: none !important; color: #111111 !important; visibility: visible !important; opacity: 1 !important; } /* Hover */ body.woocommerce-account .mein-perfektes-icon:hover::after, body.woocommerce-account .mein-perfektes-icon:focus-visible::after { color: #b89468 !important; } /* ================================================== „MEIN KONTO“ AUF ALLEN SEITEN EINHEITLICH SCHLANK ================================================== */ /* Gesamter Konto-Link */ .site-header .mein-perfektes-icon, .site-header a[href*="mein-konto"], .site-header .header-account-button, .site-header .header-account-in-wrap > a { font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #111111 !important; } /* Vorhandene Beschriftungen innerhalb des Links */ .site-header .mein-perfektes-icon span, .site-header a[href*="mein-konto"] span, .site-header .header-account-label, .site-header .nav-drop-title-wrap { font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #111111 !important; } /* Falls der Text durch den früheren Code künstlich erzeugt wird */ body.woocommerce-account .mein-perfektes-icon::after { font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #111111 !important; } /* Auch auf der aktuell geöffneten Kontoseite nicht fett */ body.woocommerce-account .site-header a[href*="mein-konto"], body.woocommerce-account .site-header a[href*="mein-konto"] span { font-weight: 400 !important; } /* Hoverfarbe */ .site-header .mein-perfektes-icon:hover, .site-header .mein-perfektes-icon:hover::after, .site-header a[href*="mein-konto"]:hover, .site-header a[href*="mein-konto"]:hover span { color: #b89468 !important; } /* ================================================== ALLE PRODUKT- UND KATEGORIEKACHELN: UNTERER BEREICH BEIGE #b89468 Schriftgrößen und Abstände bleiben unverändert. ================================================== */ /* Gesamte Kachel als Bezugspunkt */ html body .woocommerce ul.products li.product, html body .woocommerce-page ul.products li.product { position: relative !important; isolation: isolate !important; overflow: hidden !important; background-color: #ffffff !important; background-image: none !important; } /* Beige Fläche hinter dem Informationsbereich */ html body .woocommerce ul.products li.product::before, html body .woocommerce-page ul.products li.product::before { content: "" !important; position: absolute !important; right: 6px !important; bottom: 6px !important; left: 6px !important; height: 160px !important; background-color: #b89468 !important; background-image: none !important; border-radius: 5px !important; pointer-events: none !important; z-index: 0 !important; } /* Bei Kategorie-Kacheln passend zur bisherigen Textfläche */ html body .woocommerce ul.products li.product-category::before, html body .woocommerce-page ul.products li.product-category::before { height: 145px !important; } /* ================================================== THEME-EIGENE HINTERGRÜNDE TRANSPARENT MACHEN ================================================== */ html body .woocommerce ul.products li.product .entry-content-wrap, html body .woocommerce ul.products li.product .product-details, html body .woocommerce ul.products li.product .product-details.content-bg, html body .woocommerce-page ul.products li.product .entry-content-wrap, html body .woocommerce-page ul.products li.product .product-details, html body .woocommerce-page ul.products li.product .product-details.content-bg, html body .woocommerce ul.products li.product .product-action-wrap, html body .woocommerce-page ul.products li.product .product-action-wrap { position: relative !important; z-index: 2 !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Kategorieüberschrift ebenfalls über der beigen Fläche */ html body .woocommerce ul.products li.product-category .woocommerce-loop-category__title, html body .woocommerce-page ul.products li.product-category .woocommerce-loop-category__title { position: relative !important; z-index: 2 !important; background-color: transparent !important; background-image: none !important; } /* ================================================== TEXTE SCHWARZ LASSEN ================================================== */ html body .woocommerce ul.products li.product .woocommerce-loop-product__title, html body .woocommerce ul.products li.product .woocommerce-loop-category__title, html body .woocommerce ul.products li.product .price, html body .woocommerce ul.products li.product .price *, html body .woocommerce ul.products li.product .wc-gzd-additional-info, html body .woocommerce ul.products li.product .wc-gzd-additional-info *, html body .woocommerce ul.products li.product .product-action-wrap, html body .woocommerce ul.products li.product .product-action-wrap .button, html body .woocommerce-page ul.products li.product .woocommerce-loop-product__title, html body .woocommerce-page ul.products li.product .woocommerce-loop-category__title, html body .woocommerce-page ul.products li.product .price, html body .woocommerce-page ul.products li.product .price *, html body .woocommerce-page ul.products li.product .wc-gzd-additional-info, html body .woocommerce-page ul.products li.product .wc-gzd-additional-info *, html body .woocommerce-page ul.products li.product .product-action-wrap, html body .woocommerce-page ul.products li.product .product-action-wrap .button { color: #111111 !important; opacity: 1 !important; } /* Auf Smartphones etwas kompakter */ @media screen and (max-width: 767px) { html body .woocommerce ul.products li.product::before, html body .woocommerce-page ul.products li.product::before { height: 145px !important; } html body .woocommerce ul.products li.product-category::before, html body .woocommerce-page ul.products li.product-category::before { height: 115px !important; } } /* ================================================== FINALE FARBREGEL FÜR ALLE KACHELN Kategorien und Produkte: Textbereich #b89468 ================================================== */ /* -------------------------------------------------- 1. PRODUKTKACHELN -------------------------------------------------- */ /* Kadence-/WooCommerce-Informationsbereich */ html body .site-main ul.products li.product:not(.product-category) .entry-content-wrap, html body .site-main ul.products li.product:not(.product-category) .product-details, html body .site-main ul.products li.product:not(.product-category) .product-details.content-bg, html body .woocommerce ul.products li.product:not(.product-category) .entry-content-wrap, html body .woocommerce ul.products li.product:not(.product-category) .product-details { background: #b89468 !important; background-color: #b89468 !important; background-image: none !important; /* Überschreibt auch alte transparente Hintergrundregeln */ box-shadow: inset 0 0 0 1000px #b89468 !important; color: #111111 !important; opacity: 1 !important; } /* -------------------------------------------------- 2. KATEGORIEKACHELN -------------------------------------------------- */ /* Kategoriename bildet bei diesen Kacheln die Textfläche */ html body .site-main ul.products li.product.product-category h2.woocommerce-loop-category__title, html body .site-main ul.products li.product-category .woocommerce-loop-category__title, html body .woocommerce ul.products li.product.product-category h2.woocommerce-loop-category__title, html body .woocommerce ul.products li.product-category .woocommerce-loop-category__title { display: block !important; box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding: 18px 20px !important; background: #b89468 !important; background-color: #b89468 !important; background-image: none !important; /* Erzwingt die Farbe auch gegen ältere CSS-Regeln */ box-shadow: inset 0 0 0 1000px #b89468 !important; color: #111111 !important; opacity: 1 !important; } /* Falls dein Theme auch bei Kategorien einen Innenbereich verwendet */ html body .site-main ul.products li.product-category .entry-content-wrap, html body .site-main ul.products li.product-category .product-details, html body .site-main ul.products li.product-category .product-details.content-bg { background: #b89468 !important; background-color: #b89468 !important; background-image: none !important; box-shadow: inset 0 0 0 1000px #b89468 !important; color: #111111 !important; } /* Titel innerhalb eines bereits beigen Innenbereichs */ html body .site-main ul.products li.product-category .entry-content-wrap .woocommerce-loop-category__title, html body .site-main ul.products li.product-category .product-details .woocommerce-loop-category__title { padding: 0 !important; background: transparent !important; box-shadow: none !important; } /* -------------------------------------------------- 3. ALLE TEXTE SCHWARZ -------------------------------------------------- */ html body .site-main ul.products li.product .woocommerce-loop-product__title, html body .site-main ul.products li.product .woocommerce-loop-category__title, html body .site-main ul.products li.product .price, html body .site-main ul.products li.product .price *, html body .site-main ul.products li.product .wc-gzd-additional-info, html body .site-main ul.products li.product .wc-gzd-additional-info *, html body .site-main ul.products li.product .product-action-wrap, html body .site-main ul.products li.product .product-action-wrap .button { color: #111111 !important; opacity: 1 !important; } /* -------------------------------------------------- 4. AUCH BEIM HOVER BEIGE LASSEN -------------------------------------------------- */ html body .site-main ul.products li.product:hover .entry-content-wrap, html body .site-main ul.products li.product:hover .product-details, html body .site-main ul.products li.product-category:hover .woocommerce-loop-category__title { background-color: #b89468 !important; background-image: none !important; box-shadow: inset 0 0 0 1000px #b89468 !important; color: #111111 !important; } /* Produktanzahl bei Kategorien weiterhin ausblenden */ html body .site-main ul.products li.product-category .count { display: none !important; } /* ================================================== ALLE KACHELN: BEIGEN TEXTBEREICH SYMMETRISCH EINRÜCKEN 6px Weißraum links, rechts UND unten ================================================== */ /* Die komplette Kachel bleibt weiß */ html body ul.products li.product, html body ul.products li.product-category { background-color: #ffffff !important; overflow: hidden !important; box-sizing: border-box !important; } /* ================================================== PRODUKTKACHELN ================================================== */ html body ul.products li.product:not(.product-category) .entry-content-wrap, html body ul.products li.product:not(.product-category) .product-details, html body ul.products li.product:not(.product-category) .product-details.content-bg { width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 6px !important; box-sizing: border-box !important; background-color: #b89468 !important; background-image: none !important; border-radius: 5px !important; } /* Beim Hover Position nicht verändern */ html body ul.products li.product:not(.product-category):hover .entry-content-wrap, html body ul.products li.product:not(.product-category):hover .product-details { width: calc(100% - 12px) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 6px !important; transform: none !important; } /* ================================================== KATEGORIEKACHELN ================================================== */ /* Falls dein Theme einen eigenen Textcontainer benutzt */ html body ul.products li.product-category .entry-content-wrap, html body ul.products li.product-category .product-details, html body ul.products li.product-category .product-details.content-bg { width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 6px !important; box-sizing: border-box !important; background-color: #b89468 !important; background-image: none !important; border-radius: 5px !important; } /* Falls der Kategoriename selbst die beige Fläche bildet */ html body ul.products li.product-category .woocommerce-loop-category__title { width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 6px !important; box-sizing: border-box !important; background-color: #b89468 !important; background-image: none !important; border-radius: 5px !important; } /* Wenn der Titel bereits INNERHALB des Textcontainers liegt, nicht doppelt einrücken */ html body ul.products li.product-category .entry-content-wrap .woocommerce-loop-category__title, html body ul.products li.product-category .product-details .woocommerce-loop-category__title { width: 100% !important; max-width: 100% !important; margin: 0 !important; background: transparent !important; border-radius: 0 !important; } /* ================================================== AUCH BEI „ÄHNLICHE PRODUKTE“ / UPSELLS ================================================== */ html body.single-product .related.products ul.products li.product .entry-content-wrap, html body.single-product .related.products ul.products li.product .product-details, html body.single-product .up-sells.products ul.products li.product .entry-content-wrap, html body.single-product .up-sells.products ul.products li.product .product-details { width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 6px !important; box-sizing: border-box !important; background-color: #b89468 !important; border-radius: 5px !important; } /* Unterkategorien etwas kräftiger, aber weiterhin kleiner als die Oberkategorien */ body.tax-product_cat ul.products li.product-category .woocommerce-loop-category__title { font-family: "Montserrat", Arial, sans-serif !important; font-size: 17px !important; font-weight: 500 !important; color: #111111 !important; } /* ================================================== STARTSEITE: 5 KATEGORIEKACHELN PRO REIHE = 2 Reihen bei 10 Kategorien ================================================== */ @media screen and (min-width: 1200px) { body.home .woocommerce ul.products, body.home .woocommerce-page ul.products, body.home ul.products { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; column-gap: 30px !important; row-gap: 52px !important; width: 100% !important; } /* Alte WooCommerce-4-Spalten-Breiten vollständig aufheben */ body.home ul.products li.product-category, body.home ul.products li.product { float: none !important; clear: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; } } /* ================================================== TABLET / KLEINERE DESKTOPS: 3 PRO REIHE ================================================== */ @media screen and (min-width: 768px) and (max-width: 1199px) { body.home ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; } body.home ul.products li.product-category, body.home ul.products li.product { float: none !important; clear: none !important; width: 100% !important; margin: 0 !important; } } /* ================================================== SMARTPHONE: 2 PRO REIHE ================================================== */ @media screen and (max-width: 767px) { body.home ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } body.home ul.products li.product-category, body.home ul.products li.product { float: none !important; clear: none !important; width: 100% !important; margin: 0 !important; } } /* Sehr schmale Smartphones: 1 Kachel */ @media screen and (max-width: 480px) { body.home ul.products { grid-template-columns: 1fr !important; } } /* Hauptkategorien in der beigen Navigationsleiste fett */ @media screen and (min-width: 1025px) { html body [id^="mega-menu-wrap-"] > ul[id^="mega-menu-"] > li.mega-menu-item > a.mega-menu-link, html body .mega-menu-wrap > ul.mega-menu > li.mega-menu-item > a.mega-menu-link { font-weight: 600 !important; color: #111111 !important; } } /* „Mein Konto“ im Header fett darstellen */ .site-header .mein-perfektes-icon, .site-header .mein-perfektes-icon::after, .site-header a[href*="mein-konto"], .site-header a[href*="mein-konto"] span, .site-header .header-account-label, .site-header .nav-drop-title-wrap { font-weight: 600 !important; } /* ================================================== „MEIN KONTO“ AUCH AUF DER KONTOSEITE FETT ================================================== */ body.woocommerce-account .site-header .mein-perfektes-icon, body.woocommerce-account .site-header .mein-perfektes-icon::after, body.woocommerce-account .site-header a[href*="mein-konto"], body.woocommerce-account .site-header a[href*="mein-konto"] span, body.woocommerce-account .site-header .header-account-label, body.woocommerce-account .site-header .nav-drop-title-wrap { font-weight: 600 !important; } /* ================================================== MEIN KONTO → KONTDETAILS HELL, KLAR UND PASSEND ZUM SHOP-STIL ================================================== */ /* Eingabefelder */ body.woocommerce-account form.edit-account input[type="text"], body.woocommerce-account form.edit-account input[type="email"], body.woocommerce-account form.edit-account input[type="password"], body.woocommerce-account form.edit-account input[type="tel"], body.woocommerce-account .woocommerce-EditAccountForm input { background: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; border: 1px solid #b89468 !important; border-radius: 5px !important; opacity: 1 !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; } /* Eingetragene Werte sicher schwarz */ body.woocommerce-account form.edit-account input::placeholder, body.woocommerce-account .woocommerce-EditAccountForm input::placeholder { color: #666666 !important; opacity: 1 !important; } /* Beschriftungen: Vorname, Nachname, Anzeigename, E-Mail usw. */ body.woocommerce-account form.edit-account label, body.woocommerce-account .woocommerce-EditAccountForm label { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; } /* Roter Pflichtfeld-Stern */ body.woocommerce-account form.edit-account label .required, body.woocommerce-account .woocommerce-EditAccountForm .required { color: #c42f2f !important; } /* Erklärung unter „Anzeigename“ */ body.woocommerce-account form.edit-account em, body.woocommerce-account form.edit-account small, body.woocommerce-account .woocommerce-EditAccountForm em, body.woocommerce-account .woocommerce-EditAccountForm small { color: #444444 !important; opacity: 1 !important; } /* ================================================== PASSWORT-BEREICH ================================================== */ /* Rahmen um „Passwort ändern“ */ body.woocommerce-account form.edit-account fieldset, body.woocommerce-account .woocommerce-EditAccountForm fieldset { border: 1px solid rgba(184, 148, 104, 0.65) !important; border-radius: 5px !important; } /* Überschrift „Passwort ändern“ */ body.woocommerce-account form.edit-account fieldset legend, body.woocommerce-account .woocommerce-EditAccountForm fieldset legend { color: #111111 !important; font-weight: 700 !important; padding: 0 8px !important; } /* Passwort-Auge */ body.woocommerce-account .show-password-input { color: #111111 !important; opacity: 0.75 !important; } /* ================================================== FOKUS BEIM ANKLICKEN ================================================== */ body.woocommerce-account form.edit-account input:focus, body.woocommerce-account .woocommerce-EditAccountForm input:focus { background-color: #ffffff !important; color: #111111 !important; border-color: #b89468 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(184, 148, 104, 0.16) !important; } /* ================================================== BUTTON „ÄNDERUNGEN SPEICHERN“ ================================================== */ body.woocommerce-account form.edit-account button[type="submit"], body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] { background-color: #b89468 !important; border-color: #b89468 !important; color: #ffffff !important; opacity: 1 !important; font-weight: 700 !important; border-radius: 5px !important; } /* Button Hover */ body.woocommerce-account form.edit-account button[type="submit"]:hover, body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover { background-color: #9c7b52 !important; border-color: #9c7b52 !important; color: #ffffff !important; } /* Artikel-Variationen und Details im modernen Checkout-Block ausblenden */ .wc-block-components-product-metadata { display: none !important; } /* ================================================== MINI-WARENKORB: TEXTE SCHWARZ + BUTTONS AN SHOP-STIL ANGLEICHEN ================================================== */ /* -------------------------------------------------- 1. PRODUKTNAMEN SCHWARZ -------------------------------------------------- */ .woocommerce-mini-cart .woocommerce-mini-cart-item a:not(.remove), .widget_shopping_cart .woocommerce-mini-cart-item a:not(.remove) { color: #111111 !important; opacity: 1 !important; } /* -------------------------------------------------- 2. MENGE, PREISE UND SONSTIGE PRODUKTINFOS SCHWARZ -------------------------------------------------- */ .woocommerce-mini-cart .woocommerce-mini-cart-item, .woocommerce-mini-cart .woocommerce-mini-cart-item span, .woocommerce-mini-cart .woocommerce-mini-cart-item .quantity, .woocommerce-mini-cart .woocommerce-mini-cart-item .woocommerce-Price-amount, .woocommerce-mini-cart .woocommerce-mini-cart-item .woocommerce-Price-currencySymbol, .widget_shopping_cart .woocommerce-mini-cart-item, .widget_shopping_cart .woocommerce-mini-cart-item span, .widget_shopping_cart .woocommerce-mini-cart-item .quantity, .widget_shopping_cart .woocommerce-mini-cart-item .woocommerce-Price-amount, .widget_shopping_cart .woocommerce-mini-cart-item .woocommerce-Price-currencySymbol { color: #111111 !important; opacity: 1 !important; } /* -------------------------------------------------- 3. ZWISCHENSUMME + GESAMTBETRAG SCHWARZ -------------------------------------------------- */ .woocommerce-mini-cart__total, .woocommerce-mini-cart__total strong, .woocommerce-mini-cart__total span, .woocommerce-mini-cart__total .woocommerce-Price-amount, .woocommerce-mini-cart__total .woocommerce-Price-currencySymbol, .widget_shopping_cart .total, .widget_shopping_cart .total strong, .widget_shopping_cart .total span, .widget_shopping_cart .total .woocommerce-Price-amount, .widget_shopping_cart .total .woocommerce-Price-currencySymbol { color: #111111 !important; opacity: 1 !important; } /* -------------------------------------------------- 4. BUTTON „WARENKORB ANZEIGEN“ -------------------------------------------------- */ .woocommerce-mini-cart__buttons a:not(.checkout), .widget_shopping_cart .buttons a:not(.checkout) { background: transparent !important; background-color: transparent !important; color: #111111 !important; opacity: 1 !important; font-weight: 500 !important; text-decoration: none !important; } /* Hover */ .woocommerce-mini-cart__buttons a:not(.checkout):hover, .widget_shopping_cart .buttons a:not(.checkout):hover { color: #b89468 !important; } /* -------------------------------------------------- 5. BUTTON „KASSE“ BEIGER HINTERGRUND + SCHWARZE SCHRIFT -------------------------------------------------- */ .woocommerce-mini-cart__buttons a.checkout, .widget_shopping_cart .buttons a.checkout { background-color: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; opacity: 1 !important; font-weight: 700 !important; box-shadow: none !important; } /* Kasse beim Hover */ .woocommerce-mini-cart__buttons a.checkout:hover, .widget_shopping_cart .buttons a.checkout:hover { background-color: #9c7b52 !important; border-color: #9c7b52 !important; color: #111111 !important; } /* ================================================== WARENKORB – SCHRIFTEN UND KASSE-BUTTON ANPASSEN ================================================== */ /* 1. Überschrift „Warenkorb“ im beigen Titelbereich fett */ body.woocommerce-cart .entry-hero h1, body.woocommerce-cart .kadence-hero-header h1, body.woocommerce-cart h1.entry-title, body.woocommerce-cart h1.page-title { color: #111111 !important; font-weight: 700 !important; } /* Preis, Menge und Zwischensummen ebenfalls klar schwarz */ body.woocommerce-cart table.shop_table.cart td.product-price, body.woocommerce-cart table.shop_table.cart td.product-subtotal, body.woocommerce-cart table.shop_table.cart .woocommerce-Price-amount, body.woocommerce-cart table.shop_table.cart .woocommerce-Price-currencySymbol { color: #111111 !important; opacity: 1 !important; } /* 3. Warenkorb-Summe rechts schwarz */ body.woocommerce-cart .cart_totals, body.woocommerce-cart .cart_totals th, body.woocommerce-cart .cart_totals td, body.woocommerce-cart .cart_totals span, body.woocommerce-cart .cart_totals strong, body.woocommerce-cart .cart_totals .woocommerce-Price-amount, body.woocommerce-cart .cart_totals .woocommerce-Price-currencySymbol { color: #111111 !important; opacity: 1 !important; } /* 4. Button „Weiter zur Kasse“ Beige Hintergrund + schwarze Schrift */ body.woocommerce-cart .cart-collaterals .checkout-button, body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, body.woocommerce-cart #main .checkout-button { background-color: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; opacity: 1 !important; font-weight: 700 !important; box-shadow: none !important; } /* Hover */ body.woocommerce-cart .cart-collaterals .checkout-button:hover, body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, body.woocommerce-cart #main .checkout-button:hover { background-color: #9c7b52 !important; border-color: #9c7b52 !important; color: #111111 !important; } /* ================================================== WARENKORB – GROSSE ÜBERSCHRIFT FETT ================================================== */ html body.woocommerce-cart .entry-hero h1, html body.woocommerce-cart .entry-hero .entry-title, html body.woocommerce-cart .kadence-hero-header h1, html body.woocommerce-cart .kadence-hero-header .entry-title, html body.woocommerce-cart h1.page-title, html body.woocommerce-cart h1.entry-title { font-weight: 700 !important; color: #111111 !important; } /* ================================================== MEIN KONTO – ALLE BUTTONS BEIGE #b89468 + SCHWARZE SCHRIFT ================================================== */ /* Links, die WooCommerce als Buttons verwendet */ html body.woocommerce-account .woocommerce-MyAccount-content a.button, html body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button, html body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button, /* Echte Buttons */ html body.woocommerce-account .woocommerce-MyAccount-content button, html body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"], html body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] { background: #b89468 !important; background-color: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 700 !important; text-decoration: none !important; border-radius: 5px !important; box-shadow: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } /* Falls sich Text/Span innerhalb eines Buttons befindet */ html body.woocommerce-account .woocommerce-MyAccount-content a.button *, html body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button *, html body.woocommerce-account .woocommerce-MyAccount-content button * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Hover */ html body.woocommerce-account .woocommerce-MyAccount-content a.button:hover, html body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button:hover, html body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover, html body.woocommerce-account .woocommerce-MyAccount-content button:hover, html body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover { background: #9c7b52 !important; background-color: #9c7b52 !important; border-color: #9c7b52 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* ================================================== MEIN KONTO – BUTTONS ETWAS KOMPAKTER ================================================== */ html body.woocommerce-account .woocommerce-MyAccount-content a.button, html body.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button, html body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button, html body.woocommerce-account .woocommerce-MyAccount-content button, html body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"], html body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] { font-size: 15px !important; padding: 10px 16px !important; min-height: 0 !important; line-height: 1.2 !important; border-radius: 5px !important; } /* ================================================== MEIN KONTO – TEXTLINKS BEIM HOVER SICHTBAR HERVORHEBEN ================================================== */ body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.wp-element-button) { transition: color 0.2s ease, text-decoration-color 0.2s ease, background-color 0.2s ease !important; } /* Hover und Tastaturfokus */ body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.wp-element-button):hover, body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.wp-element-button):focus-visible { color: #9c7b52 !important; text-decoration: underline !important; text-decoration-color: #9c7b52 !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; } /* ================================================== MINI-WARENKORB – GESAMTBETRAG FETT HERVORHEBEN ================================================== */ .woocommerce-mini-cart__total .woocommerce-Price-amount, .widget_shopping_cart .total .woocommerce-Price-amount { font-weight: 700 !important; color: #111111 !important; font-size: 16px !important; } /* ================================================== MEIN KONTO – LOGIN & REGISTRIERUNG SCHWARZE TEXTE + BEIGE BUTTONS MIT SCHWARZER SCHRIFT ================================================== */ /* -------------------------------------------------- 1. ALLE BESCHRIFTUNGEN UND HINWEISTEXTE SCHWARZ -------------------------------------------------- */ body.woocommerce-account .woocommerce-form-login label, body.woocommerce-account .woocommerce-form-register label, body.woocommerce-account .woocommerce-form-login p, body.woocommerce-account .woocommerce-form-register p, body.woocommerce-account .woocommerce-form-login span, body.woocommerce-account .woocommerce-form-register span, body.woocommerce-account .woocommerce-form-login em, body.woocommerce-account .woocommerce-form-register em, body.woocommerce-account .woocommerce-privacy-policy-text, body.woocommerce-account .woocommerce-privacy-policy-text p { color: #111111 !important; opacity: 1 !important; } /* Pflichtfeld-Stern weiterhin rot */ body.woocommerce-account .woocommerce-form-login .required, body.woocommerce-account .woocommerce-form-register .required { color: #c42f2f !important; } /* -------------------------------------------------- 2. TEXT IN DEN EINGABEFELDERN SCHWARZ -------------------------------------------------- */ body.woocommerce-account .woocommerce-form-login input, body.woocommerce-account .woocommerce-form-register input { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; } /* Platzhalter */ body.woocommerce-account .woocommerce-form-login input::placeholder, body.woocommerce-account .woocommerce-form-register input::placeholder { color: #555555 !important; opacity: 1 !important; } /* -------------------------------------------------- 3. „ANGEMELDET BLEIBEN“ SCHWARZ -------------------------------------------------- */ body.woocommerce-account .woocommerce-form-login__rememberme, body.woocommerce-account .woocommerce-form-login__rememberme span { color: #111111 !important; opacity: 1 !important; } /* -------------------------------------------------- 4. LINKS IM LOGIN-/REGISTRIERBEREICH -------------------------------------------------- */ body.woocommerce-account .woocommerce-form-login a, body.woocommerce-account .woocommerce-form-register a, body.woocommerce-account .woocommerce-privacy-policy-text a { color: #b89468 !important; opacity: 1 !important; text-decoration-color: #b89468 !important; } /* Hover der Links */ body.woocommerce-account .woocommerce-form-login a:hover, body.woocommerce-account .woocommerce-form-register a:hover, body.woocommerce-account .woocommerce-privacy-policy-text a:hover { color: #9c7b52 !important; text-decoration-color: #9c7b52 !important; } /* -------------------------------------------------- 5. BUTTONS „ANMELDEN“ UND „REGISTRIEREN“ -------------------------------------------------- */ html body.woocommerce-account .woocommerce-form-login button[type="submit"], html body.woocommerce-account .woocommerce-form-register button[type="submit"], html body.woocommerce-account .woocommerce-form-login .button, html body.woocommerce-account .woocommerce-form-register .button { background: #b89468 !important; background-color: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-weight: 700 !important; opacity: 1 !important; box-shadow: none !important; } /* Falls Text innerhalb des Buttons in einem Span liegt */ html body.woocommerce-account .woocommerce-form-login button[type="submit"] *, html body.woocommerce-account .woocommerce-form-register button[type="submit"] * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Button-Hover */ html body.woocommerce-account .woocommerce-form-login button[type="submit"]:hover, html body.woocommerce-account .woocommerce-form-register button[type="submit"]:hover, html body.woocommerce-account .woocommerce-form-login .button:hover, html body.woocommerce-account .woocommerce-form-register .button:hover { background: #9c7b52 !important; background-color: #9c7b52 !important; border-color: #9c7b52 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* ================================================== MEIN KONTO → ADRESSEN FELDER AN DEN SHOP-STIL ANPASSEN ================================================== */ /* Eingabefelder und Auswahlfelder */ body.woocommerce-account .woocommerce-address-fields input, body.woocommerce-account .woocommerce-address-fields select, body.woocommerce-account .woocommerce-address-fields textarea, body.woocommerce-account form.edit-address input, body.woocommerce-account form.edit-address select, body.woocommerce-account form.edit-address textarea { background: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; border: 1px solid #b89468 !important; border-radius: 5px !important; opacity: 1 !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important; } /* Platzhaltertexte */ body.woocommerce-account .woocommerce-address-fields input::placeholder, body.woocommerce-account .woocommerce-address-fields textarea::placeholder, body.woocommerce-account form.edit-address input::placeholder, body.woocommerce-account form.edit-address textarea::placeholder { color: #666666 !important; opacity: 1 !important; } /* Beschriftungen wie Vorname, Straße, Ort etc. */ body.woocommerce-account .woocommerce-address-fields label, body.woocommerce-account form.edit-address label { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; } /* Pflichtfeld-Stern */ body.woocommerce-account .woocommerce-address-fields .required, body.woocommerce-account form.edit-address .required { color: #c42f2f !important; } /* Auswahlfelder von Select2, z. B. Land / Region */ body.woocommerce-account .select2-container--default .select2-selection--single { background-color: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 5px !important; color: #111111 !important; box-shadow: none !important; } /* Text innerhalb des Select2-Feldes */ body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered { color: #111111 !important; opacity: 1 !important; } /* Pfeil rechts im Auswahlfeld */ body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: #111111 !important; } /* Fokus beim Anklicken */ body.woocommerce-account .woocommerce-address-fields input:focus, body.woocommerce-account .woocommerce-address-fields select:focus, body.woocommerce-account .woocommerce-address-fields textarea:focus, body.woocommerce-account form.edit-address input:focus, body.woocommerce-account form.edit-address select:focus, body.woocommerce-account form.edit-address textarea:focus { background-color: #ffffff !important; color: #111111 !important; border-color: #b89468 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(184, 148, 104, 0.16) !important; } /* Select2 beim Fokus */ body.woocommerce-account .select2-container--open .select2-selection--single, body.woocommerce-account .select2-container--focus .select2-selection--single { border-color: #b89468 !important; box-shadow: 0 0 0 3px rgba(184, 148, 104, 0.16) !important; } /* Speichern-Button */ body.woocommerce-account .woocommerce-address-fields button[type="submit"], body.woocommerce-account form.edit-address button[type="submit"] { background-color: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; font-weight: 700 !important; border-radius: 5px !important; box-shadow: none !important; } /* Button Hover */ body.woocommerce-account .woocommerce-address-fields button[type="submit"]:hover, body.woocommerce-account form.edit-address button[type="submit"]:hover { background-color: #9c7b52 !important; border-color: #9c7b52 !important; color: #111111 !important; } /* ================================================== WOOCOMMERCE ERFOLGSMELDUNGEN DEUTLICHER HERVORHEBEN ================================================== */ body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-notice--success { position: relative !important; background-color: #f8f3ed !important; color: #111111 !important; border: 2px solid #b89468 !important; border-left: 6px solid #b89468 !important; border-radius: 6px !important; padding: 18px 22px 18px 56px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.5 !important; opacity: 1 !important; box-shadow: 0 8px 24px rgba(70, 50, 30, 0.10) !important; } /* Modernes Häkchen links */ body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-notice--success::before { content: "✓" !important; position: absolute !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; background-color: #b89468 !important; color: #111111 !important; border-radius: 50% !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; } /* Links innerhalb einer Erfolgsmeldung */ body.woocommerce-account .woocommerce-message a, body.woocommerce-account .woocommerce-notice--success a { color: #111111 !important; font-weight: 700 !important; text-decoration-color: #b89468 !important; } /* Mobile etwas kompakter */ @media screen and (max-width: 767px) { body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-notice--success { padding: 16px 18px 16px 50px !important; font-size: 15px !important; } body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-notice--success::before { left: 16px !important; } } /* ================================================== STARTSEITE – KATEGORIEKACHELN GRÖSSER DARSTELLEN 5 Kacheln pro Reihe, breiterer Inhaltsbereich ================================================== */ @media screen and (min-width: 1200px) { /* Gesamtes Kategorienraster breiter als bisherigen Seitencontainer darstellen */ body.home .site-main ul.products { display: grid !important; grid-template-columns: repeat(5, minmax(220px, 1fr)) !important; width: calc(100vw - 100px) !important; max-width: 1500px !important; margin-left: 50% !important; margin-right: 0 !important; transform: translateX(-50%) !important; column-gap: 28px !important; row-gap: 36px !important; } /* Alte WooCommerce-Breiten aufheben */ body.home .site-main ul.products li.product-category { float: none !important; clear: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; } /* Bilder nutzen die größere Kachelbreite vollständig */ body.home .site-main ul.products li.product-category img { width: 100% !important; height: auto !important; max-width: none !important; } } /* ================================================== SEHR GROSSE BILDSCHIRME ================================================== */ @media screen and (min-width: 1700px) { body.home .site-main ul.products { max-width: 1550px !important; column-gap: 32px !important; } } /* ================================================== KLEINERE DESKTOPS / LAPTOPS ================================================== */ @media screen and (min-width: 1200px) and (max-width: 1450px) { body.home .site-main ul.products { width: calc(100vw - 60px) !important; grid-template-columns: repeat(5, minmax(190px, 1fr)) !important; column-gap: 20px !important; } } /* ================================================== STARTSEITE – ABSTAND ZWISCHEN NAVIGATION UND KACHELN ================================================== */ @media screen and (min-width: 1200px) { body.home .site-main ul.products { margin-top: -25px !important; } } /* ================================================== STARTSEITE – KATEGORIEKACHELN KOMPAKTER Beige Textfläche niedriger gestalten ================================================== */ @media screen and (min-width: 1200px) { /* Falls Kadence/WooCommerce einen eigenen Textbereich verwendet */ html body.home ul.products li.product-category .entry-content-wrap, html body.home ul.products li.product-category .product-details, html body.home ul.products li.product-category .product-details.content-bg { min-height: 120px !important; height: 120px !important; padding-top: 20px !important; padding-bottom: 20px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; } /* Falls der Kategoriename selbst die beige Fläche bildet */ html body.home ul.products li.product-category .woocommerce-loop-category__title { min-height: 120px !important; height: 120px !important; padding-top: 20px !important; padding-bottom: 20px !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } /* Falls der Titel bereits in einem Textcontainer liegt */ html body.home ul.products li.product-category .entry-content-wrap .woocommerce-loop-category__title, html body.home ul.products li.product-category .product-details .woocommerce-loop-category__title { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; } } /* ================================================== KATEGORIEKACHELN – KOMPAKTER BEIGER BEREICH NUR Ober- und Unterkategorien Produktkacheln bleiben komplett unverändert ================================================== */ /* -------------------------------------------------- 1. KATEGORIEKACHEL NICHT MEHR KÜNSTLICH STRECKEN -------------------------------------------------- */ html body .site-main ul.products li.product-category, html body .woocommerce ul.products li.product-category, html body .woocommerce-page ul.products li.product-category { height: auto !important; min-height: 0 !important; max-height: none !important; align-self: start !important; } /* Der anklickbare Bereich darf ebenfalls nicht wachsen */ html body .site-main ul.products li.product-category > a, html body .woocommerce ul.products li.product-category > a, html body .woocommerce-page ul.products li.product-category > a { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; background: #ffffff !important; } /* -------------------------------------------------- 2. ALTE GROSSE BEIGE THEME-FLÄCHE ZURÜCKSETZEN -------------------------------------------------- */ html body .site-main ul.products li.product-category .entry-content-wrap, html body .site-main ul.products li.product-category .product-details, html body .site-main ul.products li.product-category .product-details.content-bg, html body .woocommerce ul.products li.product-category .entry-content-wrap, html body .woocommerce ul.products li.product-category .product-details, html body .woocommerce ul.products li.product-category .product-details.content-bg { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; transform: none !important; } /* -------------------------------------------------- 3. NUR DER KATEGORIENAME BILDET DEN BEIGEN KASTEN -------------------------------------------------- */ html body .site-main ul.products li.product-category .woocommerce-loop-category__title, html body .woocommerce ul.products li.product-category .woocommerce-loop-category__title, html body .woocommerce-page ul.products li.product-category .woocommerce-loop-category__title { display: flex !important; align-items: center !important; /* 6px weißer Rand links und rechts */ width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; /* Jetzt wirklich kompakt */ height: 88px !important; min-height: 88px !important; max-height: 88px !important; /* 6px weißer Rand unten */ margin: 0 6px 6px 6px !important; padding: 0 18px !important; box-sizing: border-box !important; background: #b89468 !important; background-color: #b89468 !important; background-image: none !important; /* Alte Farbübergüsse sicher überschreiben */ box-shadow: inset 0 0 0 1000px #b89468 !important; border-radius: 5px !important; color: #111111 !important; opacity: 1 !important; /* Schriftgröße und Schriftstärke NICHT verändern */ } /* -------------------------------------------------- 4. HOVER DARF DIE GRÖSSE NICHT VERÄNDERN -------------------------------------------------- */ html body .site-main ul.products li.product-category:hover .woocommerce-loop-category__title, html body .woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title { height: 88px !important; min-height: 88px !important; max-height: 88px !important; margin: 0 6px 6px 6px !important; background: #b89468 !important; color: #111111 !important; } /* -------------------------------------------------- 5. SMARTPHONE -------------------------------------------------- */ @media screen and (max-width: 767px) { html body ul.products li.product-category .woocommerce-loop-category__title { height: 76px !important; min-height: 76px !important; max-height: 76px !important; padding-left: 14px !important; padding-right: 14px !important; } } .product-details { align-items: center !important; justify-content: center !important; text-align: center !important; } /* Auch mehrzeilige Kategorienamen sauber zentrieren */ html body ul.products li.product-category .woocommerce-loop-category__title, html body ul.products li.product-category .woocommerce-loop-category__title * { text-align: center !important; } /* ========================================================== KATEGORIE-KACHELN – FINALE SAUBERE VERSION - nur EIN beiger Textkasten - exakt zentriert - schmaler beiger Außenrahmen - gilt für Ober- und Unterkategorien - Produktkacheln werden NICHT verändert ========================================================== */ /* ========================================================== 1. GESAMTE KATEGORIEKACHEL ========================================================== */ html body ul.products li.product-category { position: relative !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; /* Schmaler beiger Außenrahmen */ border: 1px solid #b89468 !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 7px 22px rgba(0, 0, 0, 0.045) !important; transform: none !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; } /* ========================================================== 2. ALLE ALTEN PSEUDO-FLÄCHEN ENTFERNEN Das beseitigt den zweiten beigen Kasten ========================================================== */ html body ul.products li.product-category::before, html body ul.products li.product-category::after, html body ul.products li.product-category .entry-content-wrap::before, html body ul.products li.product-category .entry-content-wrap::after, html body ul.products li.product-category .product-details::before, html body ul.products li.product-category .product-details::after, html body ul.products li.product-category .woocommerce-loop-category__title::before, html body ul.products li.product-category .woocommerce-loop-category__title::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; } /* ========================================================== 3. DER KATEGORIE-LINK FÜLLT DIE GANZE KACHEL ========================================================== */ html body ul.products li.product-category > a { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: transparent !important; color: #111111 !important; text-decoration: none !important; } /* ========================================================== 4. ALTE THEME-TEXTCONTAINER AUFLÖSEN display: contents ist hier wichtig: Dadurch kann kein zweiter Kasten mehr entstehen. ========================================================== */ html body ul.products li.product-category .entry-content-wrap, html body ul.products li.product-category .product-details, html body ul.products li.product-category .product-details.content-bg { display: contents !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* ========================================================== 5. DER EINZIGE BEIGE TEXTKASTEN ========================================================== */ html body ul.products li.product-category .woocommerce-loop-category__title { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; /* Immer unten in der Kachel */ flex: 0 0 88px !important; width: calc(100% - 12px) !important; max-width: calc(100% - 12px) !important; height: 88px !important; min-height: 88px !important; max-height: 88px !important; /* 6 px links, rechts und unten */ margin: auto 6px 6px 6px !important; padding: 0 16px !important; box-sizing: border-box !important; background: #b89468 !important; background-color: #b89468 !important; background-image: none !important; /* Alte riesige inset-box-shadow-Regeln entfernen */ box-shadow: none !important; border: none !important; border-radius: 6px !important; /* Text mittig */ display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; color: #111111 !important; opacity: 1 !important; z-index: 2 !important; } /* ========================================================== 6. PRODUKTANZAHL AUSBLENDEN ========================================================== */ html body ul.products li.product-category .woocommerce-loop-category__title .count, html body ul.products li.product-category mark.count { display: none !important; } /* ========================================================== 7. HOVER ========================================================== */ html body ul.products li.product-category:hover, html body ul.products li.product-category:focus-within { transform: translateY(-3px) !important; border-color: #b89468 !important; box-shadow: 0 13px 30px rgba(78, 54, 29, 0.12) !important; } /* Der beige Kasten selbst darf beim Hover NICHT verrutschen */ html body ul.products li.product-category:hover .woocommerce-loop-category__title, html body ul.products li.product-category:focus-within .woocommerce-loop-category__title { width: calc(100% - 12px) !important; margin: auto 6px 6px 6px !important; background: #b89468 !important; color: #111111 !important; transform: none !important; } /* ========================================================== 8. BILDER ========================================================== */ html body ul.products li.product-category img { display: block !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================== 9. MOBILE ========================================================== */ @media screen and (max-width: 767px) { html body ul.products li.product-category .woocommerce-loop-category__title { flex-basis: 76px !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; padding-left: 12px !important; padding-right: 12px !important; } } /* ========================================================== KATEGORIEKACHELN – BEIGE TEXTFLÄCHE FINAL - exakt zentriert - überall identische Höhe - Ober- und Unterkategorien - Produktkacheln bleiben unberührt ========================================================== */ /* Gesamte Kategorie-Kachel */ html body ul.products li.product-category { position: relative !important; box-sizing: border-box !important; background: #ffffff !important; /* schmaler beiger Außenrahmen */ border: 1px solid #b89468 !important; border-radius: 10px !important; overflow: hidden !important; } /* Der komplette Kategorie-Link wird zum Bezugspunkt */ html body ul.products li.product-category > a { position: relative !important; display: block !important; width: 100% !important; height: 100% !important; box-sizing: border-box !important; /* * Reserviert unten Platz für den beigen Bereich. * So kann nichts mit dem Bild überlappen. */ padding-bottom: 104px !important; background: transparent !important; } /* Theme-Zwischencontainer dürfen die Position nicht beeinflussen */ html body ul.products li.product-category .entry-content-wrap, html body ul.products li.product-category .product-details, html body ul.products li.product-category .product-details.content-bg { position: static !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; transform: none !important; } /* ========================================================== DER EINE BEIGE KASTEN ========================================================== */ html body ul.products li.product-category .woocommerce-loop-category__title { position: absolute !important; /* exakt gleicher Abstand links und rechts */ left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important; /* Breite ergibt sich automatisch aus left + right */ width: auto !important; max-width: none !important; /* IMMER identische Höhe */ height: 88px !important; min-height: 88px !important; max-height: 88px !important; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box !important; background: #b89468 !important; background-color: #b89468 !important; background-image: none !important; border: none !important; border-radius: 6px !important; box-shadow: none !important; /* Text exakt horizontal und vertikal mittig */ display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; color: #111111 !important; transform: none !important; z-index: 10 !important; } /* Zweizeilige Namen ebenfalls sauber mittig */ html body ul.products li.product-category .woocommerce-loop-category__title, html body ul.products li.product-category .woocommerce-loop-category__title * { text-align: center !important; } /* Produktanzahl weiterhin ausblenden */ html body ul.products li.product-category .count, html body ul.products li.product-category mark.count { display: none !important; } /* Hover darf weder Position noch Größe verändern */ html body ul.products li.product-category:hover .woocommerce-loop-category__title, html body ul.products li.product-category:focus-within .woocommerce-loop-category__title { left: 8px !important; right: 8px !important; bottom: 8px !important; height: 88px !important; min-height: 88px !important; max-height: 88px !important; margin: 0 !important; background-color: #b89468 !important; color: #111111 !important; transform: none !important; } /* Smartphone */ @media screen and (max-width: 767px) { html body ul.products li.product-category > a { padding-bottom: 90px !important; } html body ul.products li.product-category .woocommerce-loop-category__title { left: 6px !important; right: 6px !important; bottom: 6px !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; padding: 0 12px !important; } } /* ========================================================== KATEGORIEKACHELN – TEXTBEREICH FINAL AUSRICHTEN - überall exakt gleiche Höhe - exakt gleicher Weißraum links/rechts/unten - Text mittig - nur Kategorien, keine Produktkacheln ========================================================== */ /* ---------------------------------------------------------- 1. Kategorie-Link sauber als vertikale Kachel aufbauen ---------------------------------------------------------- */ html body ul.products li.product-category > a { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: transparent !important; } /* ---------------------------------------------------------- 2. BEIGER TEXTBEREICH Das ist jetzt der eigentliche Kasten ---------------------------------------------------------- */ html body ul.products li.product-category .product-details.content-bg.entry-content-wrap, html body ul.products li.product-category > a > .entry-content-wrap, html body ul.products li.product-category > a > .product-details { /* Ganz wichtig: immer dieselbe Höhe */ flex: 0 0 88px !important; height: 88px !important; min-height: 88px !important; max-height: 88px !important; /* exakt 8px Weißraum links und rechts */ width: calc(100% - 16px) !important; max-width: calc(100% - 16px) !important; /* automatisch horizontal zentrieren + 8px unten */ margin-top: auto !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 8px !important; padding: 0 18px !important; box-sizing: border-box !important; background: #b89468 !important; background-color: #b89468 !important; background-image: none !important; border: none !important; border-radius: 6px !important; box-shadow: none !important; /* Inhalt exakt mittig */ display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; transform: none !important; } /* ---------------------------------------------------------- 3. TITEL SELBST Kein eigener beiger Kasten mehr ---------------------------------------------------------- */ html body ul.products li.product-category .woocommerce-loop-category__title { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: #111111 !important; text-align: center !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; } /* Auch Elemente innerhalb des Titels zentrieren */ html body ul.products li.product-category .woocommerce-loop-category__title * { text-align: center !important; } /* ---------------------------------------------------------- 4. ALTE PSEUDO-KÄSTEN SICHER ABSCHALTEN ---------------------------------------------------------- */ html body ul.products li.product-category::before, html body ul.products li.product-category::after, html body ul.products li.product-category .woocommerce-loop-category__title::before, html body ul.products li.product-category .woocommerce-loop-category__title::after { content: none !important; display: none !important; } /* ---------------------------------------------------------- 5. Hover darf weder Größe noch Position verändern ---------------------------------------------------------- */ html body ul.products li.product-category:hover .product-details.content-bg.entry-content-wrap, html body ul.products li.product-category:hover > a > .entry-content-wrap, html body ul.products li.product-category:hover > a > .product-details { height: 88px !important; min-height: 88px !important; max-height: 88px !important; width: calc(100% - 16px) !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 8px !important; background: #b89468 !important; transform: none !important; } /* Produktanzahl weiterhin verstecken */ html body ul.products li.product-category .count, html body ul.products li.product-category mark.count { display: none !important; } /* ================================================== MEIN KONTO – HINWEIS NACH REGISTRIERUNG E-MAIL-BESTÄTIGUNG DEUTLICH HERVORHEBEN ================================================== */ body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-notice, body.woocommerce-account .woocommerce-notices-wrapper > div { position: relative !important; background: #f8f3ed !important; background-color: #f8f3ed !important; color: #111111 !important; border: 2px solid #b89468 !important; border-left: 6px solid #b89468 !important; border-radius: 7px !important; padding: 22px 25px 22px 65px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.6 !important; opacity: 1 !important; box-shadow: 0 8px 24px rgba(70, 50, 30, 0.10) !important; } /* Briefsymbol links */ body.woocommerce-account .woocommerce-info::before, body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-notice::before, body.woocommerce-account .woocommerce-notices-wrapper > div::before { content: "✉" !important; position: absolute !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; background-color: #b89468 !important; color: #111111 !important; border-radius: 50% !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; } /* Sämtliche Texte innerhalb der Meldung schwarz */ body.woocommerce-account .woocommerce-info *, body.woocommerce-account .woocommerce-message *, body.woocommerce-account .woocommerce-notice *, body.woocommerce-account .woocommerce-notices-wrapper > div * { color: #111111 !important; opacity: 1 !important; } /* Links innerhalb der Meldung */ body.woocommerce-account .woocommerce-info a, body.woocommerce-account .woocommerce-message a, body.woocommerce-account .woocommerce-notice a, body.woocommerce-account .woocommerce-notices-wrapper > div a { color: #111111 !important; font-weight: 700 !important; text-decoration: underline !important; text-decoration-color: #b89468 !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } /* Mobile */ @media screen and (max-width: 767px) { body.woocommerce-account .woocommerce-info, body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-notice, body.woocommerce-account .woocommerce-notices-wrapper > div { padding: 18px 18px 18px 56px !important; font-size: 15px !important; } body.woocommerce-account .woocommerce-info::before, body.woocommerce-account .woocommerce-message::before, body.woocommerce-account .woocommerce-notice::before, body.woocommerce-account .woocommerce-notices-wrapper > div::before { left: 15px !important; width: 28px !important; height: 28px !important; } } /* ================================================== MEIN KONTO → PASSWORT VERGESSEN SCHWARZE TEXTE + BEIGER BUTTON MIT SCHWARZER SCHRIFT ================================================== */ /* Erklärungstext oberhalb des Formulars */ body.woocommerce-account .woocommerce-ResetPassword, body.woocommerce-account .woocommerce-ResetPassword p, body.woocommerce-account form.lost_reset_password, body.woocommerce-account form.lost_reset_password p { color: #111111 !important; opacity: 1 !important; } /* Feldbeschriftungen */ body.woocommerce-account .woocommerce-ResetPassword label, body.woocommerce-account form.lost_reset_password label { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; } /* Pflichtfeld-Stern */ body.woocommerce-account .woocommerce-ResetPassword .required, body.woocommerce-account form.lost_reset_password .required { color: #c42f2f !important; } /* Eingabefelder */ body.woocommerce-account .woocommerce-ResetPassword input, body.woocommerce-account form.lost_reset_password input { background-color: #ffffff !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; border: 1px solid #b89468 !important; border-radius: 5px !important; opacity: 1 !important; box-shadow: none !important; } /* Platzhalter */ body.woocommerce-account .woocommerce-ResetPassword input::placeholder, body.woocommerce-account form.lost_reset_password input::placeholder { color: #555555 !important; opacity: 1 !important; } /* Feld beim Anklicken */ body.woocommerce-account .woocommerce-ResetPassword input:focus, body.woocommerce-account form.lost_reset_password input:focus { background-color: #ffffff !important; color: #111111 !important; border-color: #b89468 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(184, 148, 104, 0.16) !important; } /* ================================================== BUTTON „PASSWORT ZURÜCKSETZEN“ / „ZURÜCKSETZEN“ ================================================== */ html body.woocommerce-account .woocommerce-ResetPassword button[type="submit"], html body.woocommerce-account form.lost_reset_password button[type="submit"], html body.woocommerce-account .woocommerce-ResetPassword .button, html body.woocommerce-account form.lost_reset_password .button { background: #b89468 !important; background-color: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-weight: 700 !important; opacity: 1 !important; border-radius: 5px !important; box-shadow: none !important; } /* Auch eventuell verschachtelten Button-Text schwarz machen */ html body.woocommerce-account .woocommerce-ResetPassword button[type="submit"] *, html body.woocommerce-account form.lost_reset_password button[type="submit"] * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Hover */ html body.woocommerce-account .woocommerce-ResetPassword button[type="submit"]:hover, html body.woocommerce-account form.lost_reset_password button[type="submit"]:hover, html body.woocommerce-account .woocommerce-ResetPassword .button:hover, html body.woocommerce-account form.lost_reset_password .button:hover { background: #9c7b52 !important; background-color: #9c7b52 !important; border-color: #9c7b52 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* ========================================================== INFO-POPUP – GOTTFRIED FREY SHOP Montserrat + Beige #b89468 ========================================================== */ /* ---------------------------------------------------------- 1. HINTERGRUND / OVERLAY ---------------------------------------------------------- */ .pum-overlay, .elementor-popup-modal, [class*="popup-overlay"], [class*="modal-overlay"] { background-color: rgba(184, 148, 104, 0.48) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ---------------------------------------------------------- 2. POPUP-FENSTER ---------------------------------------------------------- */ .pum-container, .elementor-popup-modal .dialog-widget-content, [class*="popup-container"], [class*="popup-content"], [role="dialog"] { position: relative !important; background: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 12px !important; box-shadow: 0 20px 55px rgba(45, 35, 25, 0.18) !important; overflow: visible !important; font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; } /* Elegante beige Linie oben */ .pum-container::before, .elementor-popup-modal .dialog-widget-content::before, [role="dialog"]::before { content: "" !important; position: absolute !important; top: 0 !important; left: 28px !important; right: 28px !important; height: 4px !important; background: #b89468 !important; border-radius: 0 0 4px 4px !important; pointer-events: none !important; } /* ---------------------------------------------------------- 3. INHALT / TEXT ---------------------------------------------------------- */ .pum-content, .elementor-popup-modal .dialog-message, [class*="popup-content"] { padding: 30px 34px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; color: #111111 !important; } /* Alle Texte schwarz statt grau */ .pum-content p, .pum-content span, .pum-content div, .elementor-popup-modal .dialog-message p, .elementor-popup-modal .dialog-message span, .elementor-popup-modal .dialog-message div, [role="dialog"] p, [role="dialog"] span { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; } /* Begrüßung etwas hervorheben */ .pum-content p:first-child, .elementor-popup-modal .dialog-message p:first-child, [role="dialog"] p:first-child { font-size: 18px !important; font-weight: 600 !important; margin-bottom: 16px !important; } /* Saubere Abstände zwischen Absätzen */ .pum-content p, .elementor-popup-modal .dialog-message p, [role="dialog"] p { margin-top: 0 !important; margin-bottom: 13px !important; } /* Letzten Absatz ohne unnötigen Abstand */ .pum-content p:last-child, .elementor-popup-modal .dialog-message p:last-child, [role="dialog"] p:last-child { margin-bottom: 0 !important; } /* Fett markierte wichtige Begriffe */ .pum-content strong, .pum-content b, .elementor-popup-modal .dialog-message strong, .elementor-popup-modal .dialog-message b, [role="dialog"] strong, [role="dialog"] b { color: #111111 !important; font-weight: 700 !important; text-decoration: underline !important; text-decoration-color: #b89468 !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } /* ---------------------------------------------------------- 4. SCHLIESSEN-BUTTON ---------------------------------------------------------- */ .pum-close, .elementor-popup-modal .dialog-close-button, [class*="popup-close"], [class*="modal-close"] { width: 38px !important; height: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; color: #111111 !important; opacity: 1 !important; border: 2px solid #b89468 !important; border-radius: 50% !important; box-shadow: 0 5px 15px rgba(45, 35, 25, 0.13) !important; font-family: Arial, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important; } /* Hover des X */ .pum-close:hover, .elementor-popup-modal .dialog-close-button:hover, [class*="popup-close"]:hover, [class*="modal-close"]:hover { background-color: #b89468 !important; color: #111111 !important; transform: scale(1.07) !important; } /* ---------------------------------------------------------- 5. MOBILE ---------------------------------------------------------- */ @media screen and (max-width: 767px) { .pum-container, .elementor-popup-modal .dialog-widget-content, [role="dialog"] { width: calc(100% - 30px) !important; max-width: calc(100% - 30px) !important; border-radius: 9px !important; } .pum-content, .elementor-popup-modal .dialog-message, [class*="popup-content"] { padding: 26px 22px !important; font-size: 15px !important; line-height: 1.6 !important; } .pum-content p:first-child, .elementor-popup-modal .dialog-message p:first-child, [role="dialog"] p:first-child { font-size: 17px !important; } .pum-close, .elementor-popup-modal .dialog-close-button, [class*="popup-close"], [class*="modal-close"] { width: 34px !important; height: 34px !important; } } /* ========================================================== POPUP – LESBARKEIT VERBESSERN ========================================================== */ /* Popup etwas kompakter und angenehmer lesbar */ .pum-container, .elementor-popup-modal .dialog-widget-content, [role="dialog"] { max-width: 1050px !important; width: calc(100% - 80px) !important; background-color: #ffffff !important; opacity: 1 !important; } /* Inhalt */ .pum-content, .elementor-popup-modal .dialog-message, [role="dialog"] { padding: 38px 46px !important; font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; opacity: 1 !important; } /* Fließtext deutlich dunkler und kräftiger */ .pum-content p, .elementor-popup-modal .dialog-message p, [role="dialog"] p { color: #111111 !important; opacity: 1 !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.75 !important; margin-top: 0 !important; margin-bottom: 14px !important; } /* Begrüßung */ .pum-content p:first-child, .elementor-popup-modal .dialog-message p:first-child, [role="dialog"] p:first-child { color: #111111 !important; font-size: 18px !important; font-weight: 700 !important; margin-bottom: 18px !important; } /* Wichtige Begriffe */ .pum-content strong, .pum-content b, .elementor-popup-modal .dialog-message strong, .elementor-popup-modal .dialog-message b, [role="dialog"] strong, [role="dialog"] b { color: #111111 !important; font-weight: 700 !important; text-decoration: underline !important; text-decoration-color: #b89468 !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; } /* Beige Akzentlinie etwas feiner */ .pum-container::before, .elementor-popup-modal .dialog-widget-content::before, [role="dialog"]::before { height: 3px !important; left: 28px !important; right: 28px !important; background-color: #b89468 !important; } /* Smartphone */ @media screen and (max-width: 767px) { .pum-container, .elementor-popup-modal .dialog-widget-content, [role="dialog"] { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; } .pum-content, .elementor-popup-modal .dialog-message, [role="dialog"] { padding: 28px 22px !important; } .pum-content p, .elementor-popup-modal .dialog-message p, [role="dialog"] p { font-size: 15px !important; line-height: 1.7 !important; } } /* ========================================================== POPUP – FOKUS STÄRKER / RAHMEN DICKER / HINTERGRUND DUNKLER ========================================================== */ /* Dunkler Hintergrund hinter dem Popup */ .pum-overlay, .popmake-overlay, .elementor-popup-modal, .dialog-widget-overlay { background: rgba(0, 0, 0, 0.55) !important; opacity: 1 !important; } /* Popup-Fenster selbst */ .pum-container, .popmake, .elementor-popup-modal .dialog-widget-content, [role="dialog"] { background: #ffffff !important; border: 3px solid #b89468 !important; border-radius: 18px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28) !important; overflow: visible !important; position: relative !important; } /* Optional: obere Akzentlinie etwas kräftiger */ .pum-container::before, .popmake::before, .elementor-popup-modal .dialog-widget-content::before, [role="dialog"]::before { content: "" !important; position: absolute !important; top: -3px !important; left: 28px !important; right: 28px !important; height: 5px !important; background: #b89468 !important; border-radius: 999px !important; z-index: 2 !important; } /* Schließen-Button etwas markanter */ .pum-close, .popmake-close, .dialog-close-button, button[aria-label="Close"] { background: #ffffff !important; border: 2px solid #b89468 !important; color: #111111 !important; border-radius: 50% !important; width: 42px !important; height: 42px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important; font-weight: 700 !important; } .pum-close:hover, .popmake-close:hover, .dialog-close-button:hover, button[aria-label="Close"]:hover { background: #b89468 !important; color: #111111 !important; } /* ========================================================== POPUP – HINTERGRUND DEUTLICH ABDUNKELN ========================================================== */ /* Popup Maker */ html body .pum-overlay.pum-active, html body .pum-overlay, html.pum-open .pum-overlay, /* Elementor Popups */ html body .elementor-popup-modal .dialog-widget-overlay, /* Popup Builder / weitere gängige Plugins */ html body .sgpb-popup-overlay, html body [class*="popup-overlay"], html body [class*="modal-overlay"] { background: rgba(17, 17, 17, 0.62) !important; background-color: rgba(17, 17, 17, 0.62) !important; opacity: 1 !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; } /* ========================================================== EXTRA-ABSICHERUNG FÜR POPUP MAKER Falls der Plugin-Hintergrund weiterhin transparent bleibt ========================================================== */ html.pum-open.pum-open-overlay body::before { content: "" !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(17, 17, 17, 0.62) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; z-index: 99990 !important; pointer-events: none !important; } /* Popup selbst garantiert ÜBER der Abdunklung */ html.pum-open .pum-container, html.pum-open .pum-content, html.pum-open .pum-close { position: relative !important; z-index: 99999 !important; } /* ================================================== POPUP 3762 – SCHLIESSEN-X EXAKT OBEN RECHTS ================================================== */ /* Popup als Bezugspunkt */ #popmake-3762 { position: relative !important; } /* Exakter Schließen-Button dieses Popups */ #popmake-3762 > button.pum-close.popmake-close { position: absolute !important; /* oben rechts INNERHALB des Fensters */ top: 14px !important; right: 14px !important; bottom: auto !important; left: auto !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; color: #111111 !important; border: 2px solid #b89468 !important; border-radius: 50% !important; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.14) !important; font-family: Arial, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; transform: none !important; z-index: 999999 !important; cursor: pointer !important; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } /* Hover */ #popmake-3762 > button.pum-close.popmake-close:hover { background: #b89468 !important; color: #111111 !important; transform: scale(1.08) !important; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18) !important; } /* ========================================================== UNTERKATEGORIEN – FEINSCHLIFF SHOPWEIT - weniger Abstand oberhalb der Kacheln - Kategorienamen etwas kräftiger - Produktkacheln bleiben unverändert ========================================================== */ /* ---------------------------------------------------------- 1. UNTERKATEGORIE-Raster etwas nach oben ziehen Nur auf Produktkategorie-Seiten, auf denen tatsächlich Unterkategorien vorhanden sind ---------------------------------------------------------- */ @media screen and (min-width: 1025px) { body.tax-product_cat .site-main ul.products:has(> li.product-category) { margin-top: -25px !important; } } /* Tablet etwas weniger stark */ @media screen and (min-width: 768px) and (max-width: 1024px) { body.tax-product_cat .site-main ul.products:has(> li.product-category) { margin-top: -16px !important; } } /* Smartphone nur leicht reduzieren */ @media screen and (max-width: 767px) { body.tax-product_cat .site-main ul.products:has(> li.product-category) { margin-top: -8px !important; } } /* ---------------------------------------------------------- 2. UNTERKATEGORIE-NAMEN ETWAS KRÄFTIGER Schriftgröße bleibt komplett unverändert ---------------------------------------------------------- */ html body.tax-product_cat ul.products li.product-category .woocommerce-loop-category__title, html body.tax-product_cat ul.products li.product-category .woocommerce-loop-category__title * { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; color: #111111 !important; opacity: 1 !important; } /* Hover weiterhin schwarz, damit der beige Bereich ruhig und hochwertig bleibt */ html body.tax-product_cat ul.products li.product-category:hover .woocommerce-loop-category__title, html body.tax-product_cat ul.products li.product-category:focus-within .woocommerce-loop-category__title { color: #111111 !important; } /* ========================================================== PRODUKTNAMEN – IMMER SCHWARZ AUCH BEIM HOVER Gilt shopweit für alle Produktkacheln ========================================================== */ /* Produktname im normalen Zustand */ html body ul.products li.product:not(.product-category) .woocommerce-loop-product__title, html body ul.products li.product:not(.product-category) .woocommerce-loop-product__title a, html body ul.products li.product:not(.product-category) .entry-content-wrap .woocommerce-loop-product__title, html body ul.products li.product:not(.product-category) .product-details .woocommerce-loop-product__title, html body ul.products li.product:not(.product-category) .entry-content-wrap a:not(.button), html body ul.products li.product:not(.product-category) .product-details a:not(.button) { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; } /* ========================================================== HOVER AUF DER GESAMTEN PRODUKTKACHEL ========================================================== */ html body ul.products li.product:not(.product-category):hover .woocommerce-loop-product__title, html body ul.products li.product:not(.product-category):hover .woocommerce-loop-product__title a, html body ul.products li.product:not(.product-category):hover .entry-content-wrap .woocommerce-loop-product__title, html body ul.products li.product:not(.product-category):hover .product-details .woocommerce-loop-product__title, html body ul.products li.product:not(.product-category):hover .entry-content-wrap a:not(.button), html body ul.products li.product:not(.product-category):hover .product-details a:not(.button) { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; } /* Direkter Hover auf dem Artikelnamen */ html body ul.products li.product:not(.product-category) a:hover .woocommerce-loop-product__title, html body ul.products li.product:not(.product-category) .woocommerce-loop-product__title:hover, html body ul.products li.product:not(.product-category) .woocommerce-loop-product__title a:hover { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Bereits besuchte Produktlinks ebenfalls schwarz */ html body ul.products li.product:not(.product-category) a:visited .woocommerce-loop-product__title, html body ul.products li.product:not(.product-category) .product-details a:visited:not(.button), html body ul.products li.product:not(.product-category) .entry-content-wrap a:visited:not(.button) { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* ========================================================== GOTTFRIED FREY SHOP – HEADER FEINSCHLIFF FiboSearch + Warenkorb + Mein Konto + Navigation ========================================================== */ /* ========================================================== 1. OBERER WEISSER HEADER ========================================================== */ .site-header { background: #ffffff !important; /* sehr dezente Abgrenzung */ box-shadow: 0 3px 18px rgba(0, 0, 0, 0.035) !important; } /* ========================================================== 2. FIBOSEARCH – SUCHFELD ========================================================== */ .site-header .dgwt-wcas-search-wrapp { width: 320px !important; max-width: 320px !important; min-width: 320px !important; margin-right: 24px !important; font-family: "Montserrat", Arial, sans-serif !important; } /* Suchfeld-Container */ .site-header .dgwt-wcas-sf-wrapp { background: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 24px !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important; } /* Eingabefeld */ .site-header .dgwt-wcas-search-input { height: 42px !important; padding-left: 44px !important; padding-right: 18px !important; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Placeholder */ .site-header .dgwt-wcas-search-input::placeholder { color: #777777 !important; opacity: 1 !important; } /* Lupe IM Suchfeld */ .site-header .dgwt-wcas-sf-wrapp svg, .site-header .dgwt-wcas-search-submit svg, .site-header .dgwt-wcas-ico-magnifier { width: 18px !important; height: 18px !important; color: #111111 !important; opacity: 1 !important; } /* Fokus */ .site-header .dgwt-wcas-sf-wrapp:focus-within { border-color: #b89468 !important; box-shadow: 0 0 0 3px rgba(184, 148, 104, 0.14) !important; } /* ========================================================== 3. ABSTAND SUCHFELD → WARENKORB ========================================================== */ .site-header .header-cart-wrap, .site-header .site-header-item-cart, .site-header [class*="header-cart"] { margin-left: 4px !important; } /* ========================================================== 4. WARENKORB ========================================================== */ .site-header .header-cart-button, .site-header .header-cart-wrap a { color: #111111 !important; transition: color 0.2s ease, transform 0.2s ease !important; } /* Warenkorb Hover */ .site-header .header-cart-button:hover, .site-header .header-cart-wrap a:hover { color: #b89468 !important; } /* ========================================================== 5. WARENKORB-BETRAG / BADGE ========================================================== */ .site-header .header-cart-total, .site-header .cart-total, .site-header .woocommerce-Price-amount { color: #111111 !important; } /* Das beige Preis-Badge */ .site-header .header-cart-wrap .header-cart-total, .site-header .site-header-item-cart .header-cart-total { background: #b89468 !important; color: #111111 !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 8px !important; } /* ========================================================== 6. „MEIN KONTO“ ========================================================== */ .site-header a[href*="mein-konto"], .site-header a[href*="mein-konto"] span, .site-header .header-account-label { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; transition: color 0.2s ease !important; } .site-header a[href*="mein-konto"]:hover, .site-header a[href*="mein-konto"]:hover span { color: #b89468 !important; } /* ========================================================== 7. HAUPTNAVIGATION – BEIGE LEISTE ========================================================== */ /* Menüleiste selbst */ .site-header .site-main-header-wrap + *, .site-header .main-navigation, .site-header-row-container-inner { font-family: "Montserrat", Arial, sans-serif !important; } /* Haupt-Menüpunkte */ .site-header .main-navigation .primary-menu-container > ul > li > a, .site-header [id^="mega-menu-wrap-"] > ul > li.mega-menu-item > a.mega-menu-link { color: #111111 !important; font-weight: 600 !important; transition: background-color 0.2s ease, color 0.2s ease !important; } /* Hover auf Hauptkategorien */ .site-header .main-navigation .primary-menu-container > ul > li > a:hover, .site-header [id^="mega-menu-wrap-"] > ul > li.mega-menu-item > a.mega-menu-link:hover { background-color: rgba(255, 255, 255, 0.15) !important; color: #111111 !important; border-radius: 6px !important; } /* Aktiver Menüpunkt */ .site-header .main-navigation .current-menu-item > a, .site-header .main-navigation .current-menu-ancestor > a, .site-header [id^="mega-menu-wrap-"] .mega-current-menu-item > a.mega-menu-link, .site-header [id^="mega-menu-wrap-"] .mega-current-menu-ancestor > a.mega-menu-link { background-color: rgba(255, 255, 255, 0.16) !important; color: #111111 !important; border-radius: 6px !important; } /* ========================================================== 8. TABLET ========================================================== */ @media screen and (min-width: 768px) and (max-width: 1200px) { .site-header .dgwt-wcas-search-wrapp { width: 250px !important; min-width: 250px !important; max-width: 250px !important; margin-right: 16px !important; } } /* ========================================================== 9. MOBIL FiboSearch darf wieder auf das Icon-Layout wechseln ========================================================== */ @media screen and (max-width: 992px) { .site-header .dgwt-wcas-search-wrapp { width: auto !important; min-width: 0 !important; max-width: none !important; margin-right: 12px !important; } } /* ================================================== HEADER-SUCHE – LETZTER FEINSCHLIFF ================================================== */ /* Suchfeld etwas kompakter */ .site-header .dgwt-wcas-search-wrapp { width: 300px !important; min-width: 300px !important; max-width: 300px !important; margin-right: 18px !important; } /* Feldhöhe etwas eleganter */ .site-header .dgwt-wcas-search-input { height: 40px !important; } /* Placeholder besser lesbar */ .site-header .dgwt-wcas-search-input::placeholder { color: #555555 !important; opacity: 1 !important; } /* Rahmen weiterhin fein und beige */ .site-header .dgwt-wcas-sf-wrapp { border: 1px solid #b89468 !important; border-radius: 22px !important; } /* ========================================= HEADER – FIBOSEARCH + WARENKORB FEINTUNING ========================================= */ /* --- Suchfeld insgesamt --- */ .site-header .dgwt-wcas-search-wrapp { width: 300px !important; min-width: 300px !important; max-width: 300px !important; margin-right: 18px !important; } .site-header .dgwt-wcas-sf-wrapp { position: relative !important; display: flex !important; align-items: center !important; height: 56px !important; border: 1px solid #b89468 !important; border-radius: 24px !important; background: #fff !important; overflow: hidden !important; } /* --- Eingabefeld --- */ .site-header .dgwt-wcas-search-input { height: 56px !important; min-height: 56px !important; line-height: 56px !important; padding: 0 18px 0 54px !important; border: none !important; background: transparent !important; color: #111111 !important; font-size: 16px !important; font-weight: 500 !important; box-shadow: none !important; } /* Placeholder dunkler und besser lesbar */ .site-header .dgwt-wcas-search-input::placeholder { color: #555555 !important; opacity: 1 !important; font-weight: 500 !important; } /* --- Lupe sauber mittig ausrichten --- */ .site-header .dgwt-wcas-search-submit, .site-header .dgwt-wcas-ico-loupe { display: flex !important; align-items: center !important; justify-content: center !important; } .site-header .dgwt-wcas-search-submit { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; z-index: 3 !important; } .site-header .dgwt-wcas-search-submit svg, .site-header .dgwt-wcas-ico-loupe svg, .site-header .dgwt-wcas-ico-loupe { width: 20px !important; height: 20px !important; color: #111111 !important; fill: #111111 !important; stroke: #111111 !important; } /* ========================================= WARENKORB-SUMME UNTER DEM ICON ZENTRIEREN ========================================= */ /* Cart-Container als Bezugspunkt */ .site-header .header-cart-button, .site-header .site-header-cart, .site-header .header-cart-wrap, .site-header .cart-item-link, .site-header .cart-trigger-wrap { position: relative !important; } /* Preis-Badge mittig unter dem Warenkorb-Icon */ .site-header .header-cart-button .cart-total, .site-header .site-header-cart .cart-total, .site-header .header-cart-wrap .cart-total, .site-header .cart-item-link .cart-total, .site-header .cart-trigger-wrap .cart-total, .site-header .cart-total { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; top: 30px !important; margin: 0 !important; white-space: nowrap !important; text-align: center !important; line-height: 1 !important; } /* ========================================================== HEADER + FIBOSEARCH – FEINSCHLIFF Gottfried Frey Shop ========================================================== */ /* ========================================================== 1. SUCHFELD KOMPLETT IN MONTSERRAT ========================================================== */ .site-header .dgwt-wcas-search-wrapp, .site-header .dgwt-wcas-search-form, .site-header .dgwt-wcas-sf-wrapp, .site-header .dgwt-wcas-search-input, .site-header .dgwt-wcas-search-input::placeholder { font-family: "Montserrat", Arial, sans-serif !important; } /* Texteingabe */ .site-header .dgwt-wcas-search-input { color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-size: 15px !important; font-weight: 500 !important; } /* Platzhalter */ .site-header .dgwt-wcas-search-input::placeholder { color: #555555 !important; opacity: 1 !important; font-size: 15px !important; font-weight: 500 !important; } /* ========================================================== 2. LUPE IM SUCHFELD ETWAS KLEINER ========================================================== */ .site-header .dgwt-wcas-search-submit, .site-header .dgwt-wcas-ico-loupe { display: flex !important; align-items: center !important; justify-content: center !important; } /* SVG / Lupensymbol */ .site-header .dgwt-wcas-search-submit svg, .site-header .dgwt-wcas-ico-loupe, .site-header .dgwt-wcas-ico-loupe svg, .site-header .dgwt-wcas-ico-magnifier { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 17px !important; color: #111111 !important; } /* ========================================================== 3. WARENKORB-SUMME LEICHT NACH LINKS ========================================================== */ .site-header .header-cart-button .cart-total, .site-header .site-header-cart .cart-total, .site-header .header-cart-wrap .cart-total, .site-header .cart-item-link .cart-total, .site-header .cart-trigger-wrap .cart-total, .site-header .header-cart-total { left: calc(50% - 5px) !important; transform: translateX(-50%) !important; text-align: center !important; } /* ========================================================== 4. FIBOSEARCH SCHNELLAUSWAHL – BEIGER RAHMEN ========================================================== */ .dgwt-wcas-suggestions-wrapp { font-family: "Montserrat", Arial, sans-serif !important; background-color: #ffffff !important; border: 1px solid #b89468 !important; border-top: 1px solid #b89468 !important; border-radius: 0 0 8px 8px !important; overflow: hidden !important; box-shadow: 0 10px 28px rgba(45, 35, 25, 0.13) !important; } /* ========================================================== 5. EINZELNE SUCHERGEBNISSE ========================================================== */ .dgwt-wcas-suggestion, .dgwt-wcas-suggestion-product { background: #ffffff !important; border-bottom: 1px solid rgba(184, 148, 104, 0.25) !important; font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; transition: background-color 0.18s ease !important; } /* Hover eines Ergebnisses */ .dgwt-wcas-suggestion:hover, .dgwt-wcas-suggestion-selected { background-color: rgba(184, 148, 104, 0.10) !important; } /* ========================================================== 6. ARTIKELNAMEN DEUTLICHER ========================================================== */ .dgwt-wcas-suggestion .dgwt-wcas-st-title, .dgwt-wcas-suggestion .dgwt-wcas-st, .dgwt-wcas-suggestion-product .dgwt-wcas-st-title { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; } /* Alle normalen Texte innerhalb der Treffer */ .dgwt-wcas-suggestion span, .dgwt-wcas-suggestion div, .dgwt-wcas-suggestion a { font-family: "Montserrat", Arial, sans-serif !important; } /* ========================================================== 7. PREISE BESSER LESBAR ========================================================== */ .dgwt-wcas-suggestion .dgwt-wcas-sp, .dgwt-wcas-suggestion .woocommerce-Price-amount, .dgwt-wcas-suggestion .woocommerce-Price-currencySymbol, .dgwt-wcas-suggestion-product .dgwt-wcas-sp { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; } /* MwSt.- / Zusatzinformationen */ .dgwt-wcas-suggestion small, .dgwt-wcas-suggestion .wc-gzd-additional-info, .dgwt-wcas-suggestion .woocommerce-de_price_taxrate, .dgwt-wcas-suggestion .woocommerce_de_versandkosten { color: #444444 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; } /* ========================================================== 8. „SIEHE ALLE PRODUKTE“ ========================================================== */ .dgwt-wcas-suggestion-more, .dgwt-wcas-suggestion-more a, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; text-decoration-color: #b89468 !important; } /* Hover */ .dgwt-wcas-suggestion-more:hover, .dgwt-wcas-suggestion-more a:hover { color: #b89468 !important; } /* ========================================================== 9. PRODUKTBILDER IN DER SCHNELLSUCHE ETWAS SAUBERER ========================================================== */ .dgwt-wcas-suggestion .dgwt-wcas-si img { background-color: #ffffff !important; border: 1px solid rgba(184, 148, 104, 0.28) !important; border-radius: 4px !important; } /* ========================================================== FIBOSEARCH – SUCHFELD BREITER + LUPE SAUBER AUSRICHTEN ========================================================== */ @media screen and (min-width: 993px) { /* Suchfeld breiter */ .site-header .dgwt-wcas-search-wrapp { width: 360px !important; min-width: 360px !important; max-width: 360px !important; } /* Suchfeld-Container */ .site-header .dgwt-wcas-sf-wrapp { position: relative !important; height: 56px !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } /* Texteingabe – etwas mehr Platz für die Lupe */ .site-header .dgwt-wcas-search-input { height: 56px !important; min-height: 56px !important; padding-left: 54px !important; padding-right: 45px !important; font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; } /* ====================================================== LUPE LINKS – EXAKT ZENTRIERT UND NICHT ABGESCHNITTEN ====================================================== */ .site-header .dgwt-wcas-search-submit { position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; z-index: 5 !important; } /* Das eigentliche Lupen-SVG */ .site-header .dgwt-wcas-search-submit svg, .site-header .dgwt-wcas-ico-loupe, .site-header .dgwt-wcas-ico-loupe svg, .site-header .dgwt-wcas-ico-magnifier { display: block !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; color: #111111 !important; } /* Falls einzelne SVG-Linien vom Plugin beschnitten werden */ .site-header .dgwt-wcas-search-submit svg path, .site-header .dgwt-wcas-search-submit svg circle, .site-header .dgwt-wcas-search-submit svg line { overflow: visible !important; } } /* ================================================== HEADER – LETZTER FEINSCHLIFF ================================================== */ /* Suchfeld-Rahmen etwas kräftiger */ .site-header .dgwt-wcas-sf-wrapp { border: 1.5px solid #b89468 !important; border-radius: 24px !important; } /* Suchtext etwas kräftiger */ .site-header .dgwt-wcas-search-input, .site-header .dgwt-wcas-search-input::placeholder { font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; color: #111111 !important; opacity: 1 !important; } /* „Mein Konto“ etwas weniger massiv */ .site-header a[href*="mein-konto"], .site-header a[href*="mein-konto"] span, .site-header .header-account-label { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 500 !important; color: #111111 !important; } /* Warenkorb-Symbol und Konto optisch ruhig halten */ .site-header .header-cart-button, .site-header .header-cart-wrap a { color: #111111 !important; } /* ========================================================== PRODUKTSEITE – BREADCRUMBS SCHWARZ + DOPPELTE KATEGORIEANGABE ENTFERNEN ========================================================== */ /* ---------------------------------------------------------- 1. NAVIGATION ÜBER DEM PRODUKTBILD Start / Shop / Kategorie / Unterkategorie / Produkt ---------------------------------------------------------- */ body.single-product .woocommerce-breadcrumb, body.single-product .woocommerce-breadcrumb a, body.single-product .kadence-breadcrumbs, body.single-product .kadence-breadcrumbs a, body.single-product .entry-hero-container-inner .kadence-breadcrumbs, body.single-product .entry-hero-container-inner .kadence-breadcrumbs a { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; } /* Auch Trennzeichen deutlich darstellen */ body.single-product .woocommerce-breadcrumb, body.single-product .kadence-breadcrumbs { color: #111111 !important; } /* Hover der anklickbaren Breadcrumbs in eurem Beige */ body.single-product .woocommerce-breadcrumb a:hover, body.single-product .kadence-breadcrumbs a:hover { color: #b89468 !important; } /* ---------------------------------------------------------- 2. KATEGORIEN UNTER DER ARTIKELNUMMER ENTFERNEN ---------------------------------------------------------- */ body.single-product .product_meta .posted_in { display: none !important; } /* Artikelnummer ausdrücklich sichtbar lassen */ body.single-product .product_meta .sku_wrapper { display: block !important; color: #111111 !important; opacity: 1 !important; } /* ========================================================== PRODUKTÜBERSICHT – ERGEBNISANZAHL + SORTIERUNG SCHWARZ UND BESSER LESBAR ========================================================== */ /* Ergebnisanzahl links */ .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; } /* Sortierung rechts */ .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; } /* Auswahlfeld „Standardsortierung“ */ .woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select { color: #111111 !important; -webkit-text-fill-color: #111111 !important; background-color: #ffffff !important; border: none !important; border-bottom: 1px solid #b89468 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important; } /* Optionen im Dropdown */ .woocommerce .woocommerce-ordering select option, .woocommerce-page .woocommerce-ordering select option { color: #111111 !important; background-color: #ffffff !important; font-family: "Montserrat", Arial, sans-serif !important; } /* Fokus beim Anklicken */ .woocommerce .woocommerce-ordering select:focus, .woocommerce-page .woocommerce-ordering select:focus { color: #111111 !important; border-bottom-color: #b89468 !important; outline: none !important; box-shadow: none !important; } /* ========================================================== SHOP-BREADCRUMBS Produktkategorien + Shopseite Unterhalb des beigen Kategorie-Headers ========================================================== */ /* Hero/Kategoriekopf als Bezugspunkt */ body.tax-product_cat .entry-hero, body.post-type-archive-product .entry-hero, body.tax-product_cat .entry-hero-container-inner, body.post-type-archive-product .entry-hero-container-inner { overflow: visible !important; } /* Platz unter dem beigen Kategoriekopf schaffen */ body.tax-product_cat .entry-hero, body.post-type-archive-product .entry-hero { margin-bottom: 58px !important; } /* Breadcrumbs unter den beigen Bereich verschieben */ body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { position: absolute !important; left: 50% !important; bottom: -48px !important; transform: translateX(-50%) !important; width: calc(100% - 48px) !important; max-width: 1260px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; z-index: 5 !important; } /* ========================================================== TYPOGRAFIE ========================================================== */ body.tax-product_cat .kadence-breadcrumbs, body.post-type-archive-product .kadence-breadcrumbs, body.tax-product_cat .kadence-breadcrumbs *, body.post-type-archive-product .kadence-breadcrumbs * { font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; color: #111111 !important; opacity: 1 !important; } /* Anklickbare Ebenen */ body.tax-product_cat .kadence-breadcrumbs a, body.post-type-archive-product .kadence-breadcrumbs a { color: #111111 !important; text-decoration: none !important; transition: color 0.2s ease !important; } /* Hover */ body.tax-product_cat .kadence-breadcrumbs a:hover, body.post-type-archive-product .kadence-breadcrumbs a:hover { color: #b89468 !important; } /* Trennzeichen etwas dezenter */ body.tax-product_cat .kadence-breadcrumbs .bc-delimiter, body.post-type-archive-product .kadence-breadcrumbs .bc-delimiter { color: #777777 !important; margin-left: 6px !important; margin-right: 6px !important; } /* ========================================================== TABLET ========================================================== */ @media screen and (max-width: 1024px) { body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { width: calc(100% - 36px) !important; } } /* ========================================================== SMARTPHONE ========================================================== */ @media screen and (max-width: 767px) { body.tax-product_cat .entry-hero, body.post-type-archive-product .entry-hero { margin-bottom: 52px !important; } body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { bottom: -43px !important; width: calc(100% - 28px) !important; font-size: 12px !important; white-space: nowrap !important; overflow-x: auto !important; } } /* ========================================================== BREADCRUMBS – FEINSCHLIFF Montserrat + Schwarz + Beige Hover Gilt auf allen Kategorie-Seiten ========================================================== */ /* Gesamter Breadcrumb-Bereich */ body.tax-product_cat .kadence-breadcrumbs, body.post-type-archive-product .kadence-breadcrumbs, body.tax-product_cat .kadence-breadcrumbs-wrap, body.post-type-archive-product .kadence-breadcrumbs-wrap { font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; color: #111111 !important; opacity: 1 !important; } /* Einzelne Links */ body.tax-product_cat .kadence-breadcrumbs a, body.post-type-archive-product .kadence-breadcrumbs a { display: inline-block !important; color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 500 !important; text-decoration: none !important; padding: 3px 6px !important; margin: 0 1px !important; border-radius: 4px !important; transition: background-color 0.18s ease, color 0.18s ease !important; } /* Hover – dezente beige Markierung */ body.tax-product_cat .kadence-breadcrumbs a:hover, body.post-type-archive-product .kadence-breadcrumbs a:hover { background-color: rgba(184, 148, 104, 0.18) !important; color: #111111 !important; text-decoration: none !important; } /* Aktuelle Kategorie etwas kräftiger */ body.tax-product_cat .kadence-breadcrumbs span:last-child, body.post-type-archive-product .kadence-breadcrumbs span:last-child { color: #111111 !important; opacity: 1 !important; font-weight: 600 !important; } /* Trennzeichen / */ body.tax-product_cat .kadence-breadcrumbs .bc-delimiter, body.post-type-archive-product .kadence-breadcrumbs .bc-delimiter, body.tax-product_cat .kadence-breadcrumbs .delimiter, body.post-type-archive-product .kadence-breadcrumbs .delimiter { color: #b89468 !important; opacity: 1 !important; margin-left: 3px !important; margin-right: 3px !important; } /* Fokus für Tastatur-Navigation */ body.tax-product_cat .kadence-breadcrumbs a:focus-visible, body.post-type-archive-product .kadence-breadcrumbs a:focus-visible { outline: 2px solid #b89468 !important; outline-offset: 2px !important; } /* Mobil etwas kompakter */ @media screen and (max-width: 767px) { body.tax-product_cat .kadence-breadcrumbs, body.post-type-archive-product .kadence-breadcrumbs { font-size: 12px !important; } body.tax-product_cat .kadence-breadcrumbs a, body.post-type-archive-product .kadence-breadcrumbs a { padding: 2px 4px !important; } } /* ========================================================== FIBOSEARCH – LUPEN-HINTERGRUND IMMER TRANSPARENT ========================================================== */ /* Lupen-Button – alle Zustände */ .site-header .dgwt-wcas-search-submit, .site-header .dgwt-wcas-search-submit:hover, .site-header .dgwt-wcas-search-submit:focus, .site-header .dgwt-wcas-search-submit:focus-visible, .site-header .dgwt-wcas-search-submit:active, .site-header button.dgwt-wcas-search-submit, .site-header button.dgwt-wcas-search-submit:hover, .site-header button.dgwt-wcas-search-submit:focus, .site-header button.dgwt-wcas-search-submit:active { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; outline: none !important; box-shadow: none !important; color: #111111 !important; } /* Auch Pseudo-Elemente dürfen keinen Hintergrund erzeugen */ .site-header .dgwt-wcas-search-submit::before, .site-header .dgwt-wcas-search-submit::after { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* Lupensymbol selbst weiterhin schwarz */ .site-header .dgwt-wcas-search-submit svg, .site-header .dgwt-wcas-search-submit svg path, .site-header .dgwt-wcas-search-submit svg circle, .site-header .dgwt-wcas-ico-loupe, .site-header .dgwt-wcas-ico-magnifier { color: #111111 !important; fill: none !important; stroke: #111111 !important; background: transparent !important; box-shadow: none !important; } /* Auch bei aktivem / fokussiertem Suchfeld */ .site-header .dgwt-wcas-sf-wrapp:focus-within .dgwt-wcas-search-submit { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* ========================================================== MEIN KONTO – FIBOSEARCH VON BUTTON-STYLING AUSNEHMEN Lupe im Header immer ohne beigen Hintergrund ========================================================== */ /* Suchbutton innerhalb von FiboSearch */ html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp button, html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp button[type="submit"], html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit, html body.woocommerce-account .site-header .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 0 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Auch Hover / Fokus / Aktiv */ html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp button:hover, html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp button:focus, html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp button:active, html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp button:focus-visible { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #111111 !important; } /* FiboSearch erzeugt die Lupe teilweise über ::before */ html body.woocommerce-account .site-header .dgwt-wcas-search-submit::before, html body.woocommerce-account .site-header .dgwt-wcas-search-submit::after { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* SVG / Icon selbst */ html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp svg, html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp .dgwt-wcas-ico-loupe, html body.woocommerce-account .site-header .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier { background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: #111111 !important; } /* ========================================================== FIBOSEARCH – LUPE MODERNER UND KRÄFTIGER ohne Hintergrund ========================================================== */ /* Suchbutton sauber zentrieren */ .site-header .dgwt-wcas-search-submit { display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; } /* Eigentliche Lupe */ .site-header .dgwt-wcas-search-submit svg, .site-header .dgwt-wcas-ico-loupe, .site-header .dgwt-wcas-ico-magnifier { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; color: #111111 !important; fill: none !important; stroke: #111111 !important; stroke-width: 2 !important; opacity: 1 !important; background: transparent !important; overflow: visible !important; } /* Einzelne Linien ebenfalls sauber schwarz */ .site-header .dgwt-wcas-search-submit svg path, .site-header .dgwt-wcas-search-submit svg circle, .site-header .dgwt-wcas-search-submit svg line { fill: none !important; stroke: #111111 !important; stroke-width: 2 !important; opacity: 1 !important; } /* Hover: nur dezenter Farbwechsel */ .site-header .dgwt-wcas-search-submit:hover svg, .site-header .dgwt-wcas-search-submit:hover svg path, .site-header .dgwt-wcas-search-submit:hover svg circle, .site-header .dgwt-wcas-search-submit:hover svg line { stroke: #b89468 !important; } /* ========================================================== SUCHFELD – LUPE FEINER + RAHMEN KRÄFTIGER ========================================================== */ /* Rahmen etwas kräftiger */ .site-header .dgwt-wcas-sf-wrapp { border: 2.0px solid #b89468 !important; } /* Lupe etwas kleiner und deutlich feiner */ .site-header .dgwt-wcas-search-submit svg, .site-header .dgwt-wcas-ico-loupe, .site-header .dgwt-wcas-ico-magnifier { width: 17px !important; height: 17px !important; min-width: 17px !important; min-height: 20px !important; fill: none !important; stroke: #111111 !important; stroke-width: 1.5 !important; opacity: 1 !important; } /* Einzelne Linien ebenfalls feiner */ .site-header .dgwt-wcas-search-submit svg path, .site-header .dgwt-wcas-search-submit svg circle, .site-header .dgwt-wcas-search-submit svg line { fill: none !important; stroke: #111111 !important; stroke-width: 1.5 !important; } /* Hover weiterhin beige, aber ebenfalls fein */ .site-header .dgwt-wcas-search-submit:hover svg, .site-header .dgwt-wcas-search-submit:hover svg path, .site-header .dgwt-wcas-search-submit:hover svg circle, .site-header .dgwt-wcas-search-submit:hover svg line { stroke: #b89468 !important; stroke-width: 1.5 !important; } /* ========================================================== MEIN KONTO – HOVER UND AKTIVER ZUSTAND EINHEITLICH ========================================================== */ /* Grundzustand */ .site-header a[href*="mein-konto"], .site-header a[href*="mein-konto"] span, .site-header .header-account-button, .site-header .header-account-button span { color: #111111 !important; background: transparent !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 500 !important; box-shadow: none !important; transition: color 0.2s ease, background-color 0.2s ease !important; } /* Hover – auf ALLEN Seiten identisch */ .site-header a[href*="mein-konto"]:hover, .site-header a[href*="mein-konto"]:hover span, .site-header .header-account-button:hover, .site-header .header-account-button:hover span { color: #b89468 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* Aktive Mein-Konto-Seite */ body.woocommerce-account .site-header a[href*="mein-konto"], body.woocommerce-account .site-header a[href*="mein-konto"] span, body.woocommerce-account .site-header .header-account-button, body.woocommerce-account .site-header .header-account-button span { color: #111111 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; font-weight: 500 !important; } /* Hover auch auf der aktiven Mein-Konto-Seite */ body.woocommerce-account .site-header a[href*="mein-konto"]:hover, body.woocommerce-account .site-header a[href*="mein-konto"]:hover span, body.woocommerce-account .site-header .header-account-button:hover, body.woocommerce-account .site-header .header-account-button:hover span { color: #b89468 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* Besuchter Link ebenfalls nicht anders darstellen */ .site-header a[href*="mein-konto"]:visited { color: #111111 !important; } /* Fokus per Tastatur */ .site-header a[href*="mein-konto"]:focus-visible { color: #b89468 !important; outline: 1px solid #b89468 !important; outline-offset: 4px !important; background: transparent !important; } /* ========================================================== MEIN KONTO – HOVER AUF ALLEN SEITEN DAUERHAFT BEIGE ========================================================== */ /* Solange die Maus auf dem Link liegt: immer beige */ html body .site-header a[href*="mein-konto"]:hover, html body .site-header a[href*="mein-konto"]:hover *, html body .site-header .header-account-button:hover, html body .site-header .header-account-button:hover *, html body .site-header [class*="account"]:hover, html body .site-header [class*="account"]:hover * { color: #b89468 !important; -webkit-text-fill-color: #b89468 !important; background: transparent !important; background-color: transparent !important; opacity: 1 !important; transition: none !important; } /* Auch visited + hover darf nicht wieder schwarz werden */ html body .site-header a[href*="mein-konto"]:visited:hover, html body .site-header a[href*="mein-konto"]:visited:hover * { color: #b89468 !important; -webkit-text-fill-color: #b89468 !important; } /* Falls Kadence den Hover über current-/menu-Klassen überschreibt */ html body .site-header .current-menu-item > a:hover, html body .site-header .current-menu-item > a:hover *, html body .site-header .current_page_item > a:hover, html body .site-header .current_page_item > a:hover * { color: #b89468 !important; -webkit-text-fill-color: #b89468 !important; } /* ================================================== HEADER – MEHR ABSTAND ZWISCHEN WARENKORB UND MEIN KONTO ================================================== */ .site-header a[href*="mein-konto"], .site-header .header-account-button, .site-header .header-account-wrap { margin-left: 18px !important; } /* ================================================== GRAUEN SCHATTEN UNTER DEM SEITENINHALT ENTFERNEN ================================================== */ html body main#inner-wrap article.entry.single-entry { box-shadow: none !important; } /* ========================================================== BREADCRUMBS – LUFTIGER + WENIGER FETT ========================================================== */ /* Gesamter Breadcrumb-Bereich */ body.tax-product_cat .kadence-breadcrumbs, body.post-type-archive-product .kadence-breadcrumbs { margin-top: 24px !important; margin-bottom: 28px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; color: #111111 !important; } /* Alle Links etwas leichter */ body.tax-product_cat .kadence-breadcrumbs a, body.post-type-archive-product .kadence-breadcrumbs a { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; color: #111111 !important; padding: 3px 3px !important; } /* Aktuelle Kategorie nicht mehr so fett */ body.tax-product_cat .kadence-breadcrumbs span:last-child, body.post-type-archive-product .kadence-breadcrumbs span:last-child { font-weight: 400 !important; color: #111111 !important; } /* Trennzeichen weiterhin dezent beige */ body.tax-product_cat .kadence-breadcrumbs .bc-delimiter, body.post-type-archive-product .kadence-breadcrumbs .bc-delimiter, body.tax-product_cat .kadence-breadcrumbs .delimiter, body.post-type-archive-product .kadence-breadcrumbs .delimiter { color: #b89468 !important; margin-left: 5px !important; margin-right: 5px !important; } /* Hover */ body.tax-product_cat .kadence-breadcrumbs a:hover, body.post-type-archive-product .kadence-breadcrumbs a:hover { color: #b89468 !important; background: transparent !important; } /* ========================================================== BREADCRUMBS – MEHR ABSTAND OBEN UND UNTEN Korrektur für absolute Positionierung ========================================================== */ /* Mehr Platz zwischen beigem Titelbereich und Produktinhalt */ body.tax-product_cat .entry-hero, body.post-type-archive-product .entry-hero { margin-bottom: 100px !important; } /* Breadcrumb innerhalb dieses Zwischenraums positionieren */ body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { bottom: -90px !important; /* alte Margins sind hier nicht erforderlich */ margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================== BREADCRUMBS – FEINER BEIGER RAHMEN ========================================================== */ body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { border: 1px solid #b89468 !important; border-radius: 6px !important; padding: 8px 12px !important; background: #ffffff !important; box-sizing: border-box !important; } /* ========================================= BREADCRUMBS – letzter Feinschliff ========================================= */ body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { border: 1px solid rgba(184, 148, 104, 0.85) !important; border-radius: 6px !important; padding: 11px 16px !important; background: #ffffff !important; } /* ========================================================== BREADCRUMBS – EINHEITLICH AUF ALLEN SHOP-/KATEGORIESEITEN Feiner beiger Rahmen + Montserrat ========================================================== */ /* Breadcrumb-Box */ body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { border: 1px solid rgba(184, 148, 104, 0.85) !important; border-radius: 6px !important; background: #ffffff !important; padding: 11px 16px !important; box-sizing: border-box !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #111111 !important; box-shadow: none !important; } /* Links */ body.tax-product_cat .kadence-breadcrumbs a, body.post-type-archive-product .kadence-breadcrumbs a { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; text-decoration: none !important; transition: color 0.18s ease, background-color 0.18s ease !important; } /* Hover */ body.tax-product_cat .kadence-breadcrumbs a:hover, body.post-type-archive-product .kadence-breadcrumbs a:hover { color: #b89468 !important; background: transparent !important; } /* Aktuelle Kategorie */ body.tax-product_cat .kadence-breadcrumbs span:last-child, body.post-type-archive-product .kadence-breadcrumbs span:last-child { color: #111111 !important; font-weight: 500 !important; } /* Trennzeichen */ body.tax-product_cat .kadence-breadcrumbs .bc-delimiter, body.post-type-archive-product .kadence-breadcrumbs .bc-delimiter, body.tax-product_cat .kadence-breadcrumbs .delimiter, body.post-type-archive-product .kadence-breadcrumbs .delimiter { color: #b89468 !important; margin-left: 5px !important; margin-right: 5px !important; } /* Abstand des gesamten Breadcrumb-Bereichs */ body.tax-product_cat .entry-hero, body.post-type-archive-product .entry-hero { margin-bottom: 86px !important; } /* Position im Zwischenraum */ body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { bottom: -54px !important; } /* Mobile */ @media screen and (max-width: 767px) { body.tax-product_cat .entry-hero, body.post-type-archive-product .entry-hero { margin-bottom: 76px !important; } body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs { bottom: -48px !important; padding: 9px 12px !important; font-size: 12px !important; } } /* ========================================================== BREADCRUMBS – RAHMEN AUF ALLEN SHOP-SEITEN ENTFERNEN ========================================================== */ body.tax-product_cat .entry-hero-container-inner .kadence-breadcrumbs, body.post-type-archive-product .entry-hero-container-inner .kadence-breadcrumbs, body.single-product .entry-hero-container-inner .kadence-breadcrumbs, body.single-product .woocommerce-breadcrumb { border: none !important; border-width: 0 !important; border-color: transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Hover weiterhin dezent beige */ body.tax-product_cat .kadence-breadcrumbs a:hover, body.post-type-archive-product .kadence-breadcrumbs a:hover, body.single-product .kadence-breadcrumbs a:hover, body.single-product .woocommerce-breadcrumb a:hover { color: #b89468 !important; background: transparent !important; } /* ========================================================== WARENKORB – SUMME EXAKT MITTIG UNTER DEM SYMBOL ========================================================== */ /* Warenkorb-Button als Bezugspunkt */ .site-header a.header-cart-button { position: relative !important; } /* Exakter Container des Warenkorb-Betrags */ .site-header a.header-cart-button > .gfs-header-cart-sum { position: absolute !important; /* horizontal exakt zur Mitte des Warenkorbbuttons */ left: 50% !important; right: auto !important; transform: translateX(-50%) !important; /* vertikale Position unter dem Symbol */ top: calc(100% + 3px) !important; bottom: auto !important; margin: 0 !important; width: max-content !important; min-width: max-content !important; text-align: center !important; white-space: nowrap !important; z-index: 5 !important; } /* Betrag selbst darf keine eigene Verschiebung mehr haben */ .site-header a.header-cart-button .gfs-header-cart-sum .woocommerce-Price-amount { position: static !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: center !important; white-space: nowrap !important; } /* ================================================== HEADER – LETZTER FEINSCHLIFF Mehr Abstand + Warenkorbsumme etwas größer ================================================== */ /* Mehr Abstand zwischen Warenkorb und "Mein Konto" */ .site-header a[href*="mein-konto"], .site-header .header-account-button, .site-header .header-account-wrap { margin-left: 24px !important; } /* Warenkorb-Summe etwas größer und klarer */ .site-header a.header-cart-button > .gfs-header-cart-sum, .site-header a.header-cart-button .gfs-header-cart-sum .woocommerce-Price-amount { font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #111111 !important; line-height: 1.2 !important; } /* Beige Badge proportional etwas angenehmer */ .site-header a.header-cart-button > .gfs-header-cart-sum { padding: 3px 8px !important; background-color: #b89468 !important; border-radius: 999px !important; white-space: nowrap !important; } /* ========================================================== SHOP-PAGINATION – BEIGE BUTTONS + SCHWARZE SCHRIFT ========================================================== */ /* Alle Seitenbuttons */ .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce-pagination .page-numbers li a, .woocommerce-pagination .page-numbers li span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; height: 40px !important; padding: 0 12px !important; background: #b89468 !important; background-color: #b89468 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; border: none !important; border-radius: 5px !important; box-shadow: none !important; opacity: 1 !important; text-decoration: none !important; transition: background-color 0.2s ease, transform 0.2s ease !important; } /* Aktuelle Seite */ .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce-pagination .page-numbers li span.current { background: #b89468 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-weight: 700 !important; box-shadow: inset 0 0 0 2px rgba(17, 17, 17, 0.18) !important; } /* Hover auf anklickbaren Seiten */ .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce-pagination .page-numbers li a:hover { background: #9f7c53 !important; background-color: #9f7c53 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; transform: translateY(-1px) !important; } /* Pfeile ebenfalls gut sichtbar */ .woocommerce nav.woocommerce-pagination ul li a.next, .woocommerce nav.woocommerce-pagination ul li a.prev, .woocommerce-pagination a.next, .woocommerce-pagination a.prev { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* Falls Theme innere Elemente einfärbt */ .woocommerce-pagination a *, .woocommerce-pagination span * { color: inherit !important; -webkit-text-fill-color: inherit !important; } /* ================================================== AKTIVE PAGINATION-SEITE – SCHWARZER RAHMEN ================================================== */ .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce-pagination .page-numbers li span.current { background: #b89468 !important; color: #111111 !important; border: 2px solid #111111 !important; box-shadow: none !important; font-weight: 700 !important; } /* ================================================== MEIN KONTO – NORMALE TEXTE SCHWARZ ================================================== */ /* Allgemeine Texte im Konto-Bereich */ body.woocommerce-account .woocommerce-MyAccount-content, body.woocommerce-account .woocommerce-MyAccount-content p, body.woocommerce-account .woocommerce-MyAccount-content span, body.woocommerce-account .woocommerce-MyAccount-content strong, body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-navigation li, body.woocommerce-account .woocommerce-MyAccount-navigation li a { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; } /* Benutzername oberhalb der Navigation */ body.woocommerce-account .woocommerce-MyAccount-navigation::before, body.woocommerce-account .woocommerce-MyAccount-navigation .username, body.woocommerce-account .woocommerce-MyAccount-navigation .user-name { color: #111111 !important; opacity: 1 !important; } /* Links im Haupttext weiterhin Beige */ body.woocommerce-account .woocommerce-MyAccount-content a { color: #b89468 !important; opacity: 1 !important; text-decoration-color: #b89468 !important; } /* Hover der Links etwas dunkler */ body.woocommerce-account .woocommerce-MyAccount-content a:hover { color: #8f6d45 !important; } /* Navigation rechts schwarz */ body.woocommerce-account .woocommerce-MyAccount-navigation li a { color: #111111 !important; } /* Aktiver Menüpunkt weiterhin Beige */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #b89468 !important; font-weight: 600 !important; } /* ========================================================== FOOTER-UNTERSEITEN – TYPOGRAFIE VEREINHEITLICHEN Schwarz + Montserrat ========================================================== */ /* Hauptinhalt statischer Seiten */ body.page .entry-content, body.page .entry-content p, body.page .entry-content li, body.page .entry-content ul, body.page .entry-content ol, body.page .entry-content div, body.page .entry-content span, body.page .entry-content strong, body.page .entry-content em { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; opacity: 1 !important; } /* Fließtext */ body.page .entry-content p, body.page .entry-content li { font-size: 16px !important; font-weight: 400 !important; line-height: 1.65 !important; } /* Überschriften innerhalb der Seiten */ body.page .entry-content h1, body.page .entry-content h2, body.page .entry-content h3, body.page .entry-content h4, body.page .entry-content h5, body.page .entry-content h6 { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; opacity: 1 !important; } /* Links */ body.page .entry-content a { font-family: "Montserrat", Arial, sans-serif !important; color: #b89468 !important; opacity: 1 !important; text-decoration-color: #b89468 !important; } /* Hover auf Links */ body.page .entry-content a:hover { color: #8f6d45 !important; } /* ========================================================== KONTAKTSEITE – GOTTFRIED FREY SHOP Montserrat + Schwarz + Beige #b89468 ========================================================== */ /* ---------------------------------------------------------- 1. GESAMTER INHALT DER KONTAKTSEITE ---------------------------------------------------------- */ body.page .entry-content, body.page .entry-content p, body.page .entry-content div, body.page .entry-content span, body.page .entry-content label, body.page .entry-content input, body.page .entry-content textarea, body.page .entry-content button { font-family: "Montserrat", Arial, sans-serif !important; } /* Fließtext klar schwarz */ body.page .entry-content p { color: #111111 !important; opacity: 1 !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.65 !important; } /* ---------------------------------------------------------- 2. FORMULAR-LABELS ---------------------------------------------------------- */ body.page .entry-content form label, body.page .entry-content .wpforms-field-label, body.page .entry-content .wpcf7-form label, body.page .entry-content .fluentform label { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; opacity: 1 !important; } /* ---------------------------------------------------------- 3. EINGABEFELDER ---------------------------------------------------------- */ body.page .entry-content form input[type="text"], body.page .entry-content form input[type="email"], body.page .entry-content form input[type="tel"], body.page .entry-content form input[type="number"], body.page .entry-content form input[type="url"], body.page .entry-content form textarea, body.page .entry-content form select { background: #ffffff !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; border: 1px solid rgba(184, 148, 104, 0.75) !important; border-radius: 5px !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; opacity: 1 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } /* Normale Eingabefelder */ body.page .entry-content form input[type="text"], body.page .entry-content form input[type="email"], body.page .entry-content form input[type="tel"], body.page .entry-content form input[type="number"], body.page .entry-content form input[type="url"], body.page .entry-content form select { min-height: 44px !important; padding: 10px 13px !important; } /* Nachricht */ body.page .entry-content form textarea { min-height: 130px !important; padding: 13px !important; resize: vertical !important; } /* ---------------------------------------------------------- 4. FOKUS – WENN MAN INS FELD KLICKT ---------------------------------------------------------- */ body.page .entry-content form input:focus, body.page .entry-content form textarea:focus, body.page .entry-content form select:focus { border-color: #b89468 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(184, 148, 104, 0.14) !important; background: #ffffff !important; } /* ---------------------------------------------------------- 5. PLACEHOLDER ---------------------------------------------------------- */ body.page .entry-content form input::placeholder, body.page .entry-content form textarea::placeholder { color: #666666 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; } /* ---------------------------------------------------------- 6. SENDEN-BUTTON ---------------------------------------------------------- */ body.page .entry-content form button[type="submit"], body.page .entry-content form input[type="submit"], body.page .entry-content .wpforms-submit, body.page .entry-content .wpcf7-submit { background: #b89468 !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; border: 1px solid #b89468 !important; border-radius: 5px !important; padding: 10px 20px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: none !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important; } /* Button Hover */ body.page .entry-content form button[type="submit"]:hover, body.page .entry-content form input[type="submit"]:hover, body.page .entry-content .wpforms-submit:hover, body.page .entry-content .wpcf7-submit:hover { background: #a9855a !important; border-color: #a9855a !important; color: #111111 !important; transform: translateY(-1px) !important; } /* ---------------------------------------------------------- 7. LINKS IM KONTAKTTEXT ---------------------------------------------------------- */ body.page .entry-content a { font-family: "Montserrat", Arial, sans-serif !important; color: #b89468 !important; text-decoration-color: #b89468 !important; } body.page .entry-content a:hover { color: #8f6d45 !important; } /* ---------------------------------------------------------- 8. MOBILE ---------------------------------------------------------- */ @media screen and (max-width: 767px) { body.page .entry-content form input, body.page .entry-content form textarea, body.page .entry-content form select { font-size: 16px !important; } } /* ========================================================== IMPRESSUM – FEINSCHLIFF ========================================================== */ /* Gesamte Typografie */ body.page .entry-content { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; } /* Ersten Block hervorheben: Gottfried Frey GmbH Groß- und Außenhandel */ body.page .entry-content > p:first-of-type { font-weight: 600 !important; color: #111111 !important; } /* Normaler Impressumstext */ body.page .entry-content p { color: #111111 !important; opacity: 1 !important; font-family: "Montserrat", Arial, sans-serif !important; line-height: 1.6 !important; } /* ========================================================== INFORMATIONSSSEITEN – FLIESSTEXT NORMAL, NUR WICHTIGE STELLEN FETT ========================================================== */ /* Normaler Fließtext */ body.page .entry-content p, body.page .entry-content li { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; color: #111111 !important; opacity: 1 !important; line-height: 1.65 !important; } /* Auch verschachtelte Texte zunächst normal */ body.page .entry-content p span { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; } /* Nur bewusst fett formatierte Stellen hervorheben */ body.page .entry-content strong, body.page .entry-content b, body.page .entry-content p strong, body.page .entry-content p b { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; color: #111111 !important; } /* Überschriften natürlich weiterhin kräftig */ body.page .entry-content h2, body.page .entry-content h3, body.page .entry-content h4 { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; color: #111111 !important; } /* ========================================================== INFOSEITEN – SCHRIFTGEWICHT KORREKT DARSTELLEN Normal = 400 / bewusst fett = 600 ========================================================== */ /* Normaler Fließtext */ html body.page article.entry.single-entry .entry-content p, html body.page article.entry.single-entry .entry-content p span, html body.page article.entry.single-entry .entry-content li, html body.page article.entry.single-entry .entry-content li span { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; font-style: normal !important; color: #111111 !important; opacity: 1 !important; } /* Links im normalen Text ebenfalls nicht automatisch fett */ html body.page article.entry.single-entry .entry-content p a, html body.page article.entry.single-entry .entry-content li a { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; } /* NUR das, was im WordPress-Editor wirklich fett markiert ist */ html body.page article.entry.single-entry .entry-content strong, html body.page article.entry.single-entry .entry-content b, html body.page article.entry.single-entry .entry-content p strong, html body.page article.entry.single-entry .entry-content p b, html body.page article.entry.single-entry .entry-content li strong, html body.page article.entry.single-entry .entry-content li b { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; color: #111111 !important; } /* Überschriften weiterhin kräftig */ html body.page article.entry.single-entry .entry-content h2, html body.page article.entry.single-entry .entry-content h3, html body.page article.entry.single-entry .entry-content h4 { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; } /* ================================================== KONTAKTSEITE – SOCIAL ICONS GRÖSSER ================================================== */ /* Nur die Social Icons im Inhaltsbereich */ body.page .entry-content .wp-block-social-links, body.page .entry-content .social-links, body.page .entry-content .social-icons { gap: 12px !important; } /* Einzelne Icon-Buttons */ body.page .entry-content .wp-social-link, body.page .entry-content .social-link, body.page .entry-content .social-icon { width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; } /* Eigentliche Symbole */ body.page .entry-content .wp-social-link svg, body.page .entry-content .social-link svg, body.page .entry-content .social-icon svg, body.page .entry-content .wp-social-link img, body.page .entry-content .social-link img, body.page .entry-content .social-icon img { width: 20px !important; height: 20px !important; object-fit: contain !important; } /* Hover etwas präsenter */ body.page .entry-content .wp-social-link:hover, body.page .entry-content .social-link:hover, body.page .entry-content .social-icon:hover { transform: translateY(-1px) scale(1.05) !important; } /* ================================================== KONTAKTFORMULAR – ABSTÄNDE DIREKT AN DEN FELDERN ================================================== */ /* Abstand unter Name, E-Mail, Firma und Telefonnummer */ body.page .entry-content form input[type="text"], body.page .entry-content form input[type="email"], body.page .entry-content form input[type="tel"] { margin-bottom: 16px !important; } /* Labels etwas vom Eingabefeld absetzen */ body.page .entry-content form label { display: block !important; margin-bottom: 5px !important; } /* Vor dem Nachrichtenbereich etwas mehr Luft */ body.page .entry-content form textarea { margin-top: 4px !important; margin-bottom: 18px !important; } /* Senden-Button sauber darunter */ body.page .entry-content form button[type="submit"], body.page .entry-content form input[type="submit"] { margin-top: 0 !important; } /* ================================================== KONTAKTFORMULAR – ERFOLGSMELDUNG IM SHOP-DESIGN ================================================== */ html body .kb-adv-form-message.kb-adv-form-success { background: #f7f1e9 !important; background-color: #f7f1e9 !important; color: #111111 !important; border: 1px solid #b89468 !important; border-left: 5px solid #b89468 !important; border-radius: 6px !important; padding: 16px 20px !important; margin-top: 22px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.5 !important; box-shadow: none !important; opacity: 1 !important; } /* Text innerhalb der Meldung */ html body .kb-adv-form-message.kb-adv-form-success, html body .kb-adv-form-message.kb-adv-form-success * { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; } /* kleines Häkchen davor */ html body .kb-adv-form-message.kb-adv-form-success::before { content: "✓"; display: inline-block; margin-right: 10px; color: #b89468 !important; font-weight: 700 !important; font-size: 17px !important; } /* ========================================================== AGB / RECHTSTEXTE – MONTSERRAT + BESSERE LESBARKEIT ========================================================== */ /* Gesamter Seiteninhalt */ body.page .entry-content { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; } /* Normaler Fließtext */ body.page .entry-content p, body.page .entry-content li { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; opacity: 1 !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; } /* Große Überschriften innerhalb des Inhalts */ body.page .entry-content h1, body.page .entry-content h2 { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; font-weight: 600 !important; line-height: 1.25 !important; margin-top: 0 !important; margin-bottom: 22px !important; } /* Abschnittsüberschriften der AGB */ body.page .entry-content h3, body.page .entry-content h4 { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; font-weight: 600 !important; line-height: 1.35 !important; margin-top: 32px !important; margin-bottom: 12px !important; } /* Inhaltsverzeichnis */ body.page .entry-content ol, body.page .entry-content ul { margin-top: 12px !important; margin-bottom: 30px !important; padding-left: 28px !important; } /* Einzelne Punkte im Inhaltsverzeichnis */ body.page .entry-content ol li, body.page .entry-content ul li { margin-bottom: 5px !important; } /* Links */ body.page .entry-content a { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; text-decoration-color: #b89468 !important; font-weight: 400 !important; } /* Hover */ body.page .entry-content a:hover { color: #b89468 !important; } /* Wirklich fett formatierte Stellen */ body.page .entry-content strong, body.page .entry-content b { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; font-weight: 600 !important; } /* ========================================================== AGB – IT-RECHT LOGO, STAND UND EIGENES LOGO SAUBER TRENNEN Seite: page-id-3084 ========================================================== */ /* IT-Recht-Kanzlei Logo */ body.page-id-3084 .entry-content > figure.wp-block-image:first-of-type { display: block !important; float: none !important; clear: both !important; margin-top: 28px !important; margin-bottom: 8px !important; } /* IT-Recht Logo nicht künstlich vergrößern */ body.page-id-3084 .entry-content > figure.wp-block-image:first-of-type img { display: block !important; width: auto !important; height: auto !important; max-width: 240px !important; margin: 0 !important; float: none !important; } /* Leeren Absatz zwischen Logo und Stand ausblenden */ body.page-id-3084 .entry-content > figure.wp-block-image:first-of-type + p:empty { display: none !important; } /* "Stand: 17.08.2026 ..." sauber darunter */ body.page-id-3084 .entry-content > figure.wp-block-image:first-of-type + p + p { display: block !important; clear: both !important; margin-top: 8px !important; margin-bottom: 22px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #111111 !important; } /* ========================================================== EIGENES GOTTFRIED-FREY-LOGO DARUNTER ========================================================== */ body.page-id-3084 .entry-content > figure.wp-block-image:last-of-type { display: block !important; float: none !important; clear: both !important; margin-top: 20px !important; margin-bottom: -80px !important; } body.page-id-3084 .entry-content > figure.wp-block-image:last-of-type img { display: block !important; width: 110px !important; max-width: 110px !important; height: auto !important; margin: 0 !important; float: none !important; } /* AGB – eigenes Logo etwas größer */ body.page-id-3084 .entry-content > figure.wp-block-image:last-of-type img { width: 150px !important; max-width: 150px !important; height: auto !important; } /* ========================================================== DATENSCHUTZ – KOMPLETTES DESIGN Montserrat + Schwarz + IT-Recht + eigenes Logo ========================================================== */ /* ========================================================== 1. GRUNDTYPOGRAFIE ========================================================== */ body.privacy-policy .entry-content, body.privacy-policy .entry-content p, body.privacy-policy .entry-content li, body.privacy-policy .entry-content span { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; opacity: 1 !important; font-weight: 400 !important; } /* Normaler Fließtext */ body.privacy-policy .entry-content p, body.privacy-policy .entry-content li { font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; } /* ========================================================== 2. GROSSE ABSCHNITTSÜBERSCHRIFTEN ========================================================== */ body.privacy-policy .entry-content h1, body.privacy-policy .entry-content h2 { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; font-weight: 600 !important; line-height: 1.3 !important; margin-top: 38px !important; margin-bottom: 18px !important; } /* Erste Überschrift nicht unnötig weit nach unten drücken */ body.privacy-policy .entry-content h1:first-child, body.privacy-policy .entry-content h2:first-child { margin-top: 0 !important; } /* ========================================================== 3. KLEINERE ZWISCHENÜBERSCHRIFTEN ========================================================== */ body.privacy-policy .entry-content h3, body.privacy-policy .entry-content h4, body.privacy-policy .entry-content h5 { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; font-weight: 600 !important; line-height: 1.4 !important; margin-top: 28px !important; margin-bottom: 12px !important; } /* ========================================================== 4. BEWUSST FETT MARKIERTE STELLEN ========================================================== */ body.privacy-policy .entry-content strong, body.privacy-policy .entry-content b { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; font-weight: 600 !important; } /* ========================================================== 5. LISTEN ========================================================== */ body.privacy-policy .entry-content ul, body.privacy-policy .entry-content ol { margin-top: 10px !important; margin-bottom: 24px !important; padding-left: 28px !important; } body.privacy-policy .entry-content li { margin-bottom: 6px !important; } /* ========================================================== 6. LINKS ========================================================== */ body.privacy-policy .entry-content a { font-family: "Montserrat", Arial, sans-serif !important; color: #b89468 !important; text-decoration-color: #b89468 !important; font-weight: 400 !important; transition: color 0.2s ease !important; } body.privacy-policy .entry-content a:hover { color: #8f6d45 !important; } /* ========================================================== 7. IT-RECHT-KANZLEI LOGO AM ENDE ========================================================== */ body.privacy-policy .entry-content figure.wp-block-image:has(a[href*="it-recht-kanzlei.de"]) { display: block !important; float: none !important; clear: both !important; margin-top: 32px !important; margin-bottom: 8px !important; } /* IT-Recht Logo in Originalgröße bzw. vernünftiger Größe */ body.privacy-policy .entry-content figure.wp-block-image:has(a[href*="it-recht-kanzlei.de"]) img { display: block !important; width: auto !important; height: auto !important; max-width: 240px !important; margin: 0 !important; float: none !important; } /* ========================================================== 8. LEEREN ABSATZ NACH IT-RECHT-LOGO ENTFERNEN ========================================================== */ body.privacy-policy .entry-content figure.wp-block-image:has(a[href*="it-recht-kanzlei.de"]) + p:empty { display: none !important; } /* ========================================================== 9. "STAND: ..." SAUBER DARUNTER ========================================================== */ /* Wenn Stand direkt nach dem Logo kommt */ body.privacy-policy .entry-content figure.wp-block-image:has(a[href*="it-recht-kanzlei.de"]) + p:not(:empty), /* Wenn ein leerer Absatz dazwischen liegt */ body.privacy-policy .entry-content figure.wp-block-image:has(a[href*="it-recht-kanzlei.de"]) + p:empty + p { display: block !important; clear: both !important; margin-top: 8px !important; margin-bottom: 24px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #111111 !important; } /* ========================================================== 10. EIGENES GOTTFRIED-FREY-LOGO AM SEITENENDE ========================================================== */ body.privacy-policy .entry-content > figure.wp-block-image:last-of-type { display: block !important; float: none !important; clear: both !important; margin-top: 24px !important; margin-bottom: 25px !important; } body.privacy-policy .entry-content > figure.wp-block-image:last-of-type img { display: block !important; width: 150px !important; max-width: 150px !important; height: auto !important; margin: 0 !important; float: none !important; } /* ========================================================== 11. KEINE ÜBERLAGERUNGEN AM SEITENENDE ========================================================== */ body.privacy-policy .entry-content figure.wp-block-image:has(a[href*="it-recht-kanzlei.de"]), body.privacy-policy .entry-content > figure.wp-block-image:last-of-type { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; } /* ========================================================== WARENKORB – VERSANDARTEN SAUBER FORMATIEREN ========================================================== */ /* Spaltenverhältnis in der Warenkorb-Summe verbessern */ body.woocommerce-cart .cart_totals table.shop_table th { width: 32% !important; } body.woocommerce-cart .cart_totals table.shop_table td { width: 68% !important; } /* Versandmethoden */ body.woocommerce-cart .cart_totals ul#shipping_method { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Radio-Button + Text sauber nebeneinander */ body.woocommerce-cart .cart_totals ul#shipping_method li { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; column-gap: 9px !important; align-items: start !important; margin: 0 0 12px 0 !important; padding: 0 !important; text-align: left !important; } /* Radio-Button */ body.woocommerce-cart .cart_totals ul#shipping_method li input[type="radio"] { margin: 5px 0 0 0 !important; } /* Text der Versandart */ body.woocommerce-cart .cart_totals ul#shipping_method li label { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #111111 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; text-align: left !important; } /* Abstand zwischen mehreren Versandarten */ body.woocommerce-cart .cart_totals ul#shipping_method li:last-child { margin-bottom: 0 !important; } /* ================================================== KASSE – SEITENTITEL RICHTIG FETT ================================================== */ body.woocommerce-checkout .entry-hero h1.entry-title, body.woocommerce-checkout .kadence-hero-header h1.entry-title, body.woocommerce-checkout h1.entry-title { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 700 !important; font-variation-settings: "wght" 700 !important; font-style: normal !important; color: #111111 !important; } /* ========================================================== KASSE – LABELS ÜBER DEN FELDERN Keine überlappenden Floating Labels mehr ========================================================== */ /* ---------------------------------------------------------- NORMALE TEXTFELDER ---------------------------------------------------------- */ /* WooCommerce hat im HTML erst Input, dann Label. Deshalb drehen wir die Reihenfolge optisch um. */ body.woocommerce-checkout .wc-block-components-text-input { display: flex !important; flex-direction: column-reverse !important; position: relative !important; margin-bottom: 16px !important; } /* Beschriftung oberhalb des Feldes */ body.woocommerce-checkout .wc-block-components-text-input label, body.woocommerce-checkout .wc-block-components-text-input.is-active label, body.woocommerce-checkout .wc-block-components-text-input.has-value label { position: static !important; display: block !important; transform: none !important; width: auto !important; height: auto !important; margin: 0 0 6px 2px !important; padding: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.3 !important; color: #111111 !important; opacity: 1 !important; pointer-events: none !important; } /* Eingabefeld selbst */ body.woocommerce-checkout .wc-block-components-text-input input { min-height: 48px !important; height: 48px !important; padding: 0 13px !important; background: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 5px !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 48px !important; box-shadow: none !important; } /* ---------------------------------------------------------- LAND / REGION + BUNDESLAND ---------------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-combobox { margin-bottom: 16px !important; } body.woocommerce-checkout .wc-block-components-combobox-control { position: relative !important; padding-top: 23px !important; } /* Label fest oberhalb des eigentlichen Auswahlbereichs */ body.woocommerce-checkout .wc-block-components-combobox-control label { position: absolute !important; top: 0 !important; left: 2px !important; transform: none !important; margin: 0 !important; padding: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.3 !important; color: #111111 !important; opacity: 1 !important; background: transparent !important; } /* Auswahlfeld */ body.woocommerce-checkout .wc-block-components-combobox-control input { min-height: 48px !important; height: 48px !important; padding: 0 42px 0 13px !important; border: 1px solid #b89468 !important; border-radius: 5px !important; background: #ffffff !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; box-shadow: none !important; } /* ---------------------------------------------------------- FOKUS ---------------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-text-input input:focus, body.woocommerce-checkout .wc-block-components-combobox-control input:focus { outline: none !important; border-color: #b89468 !important; box-shadow: 0 0 0 2px rgba(184, 148, 104, 0.15) !important; } /* ========================================================== KASSE – LAND/REGION + BUNDESLAND LABEL SAUBER OBERHALB DES FELDES ========================================================== */ /* Gesamter Select-Container */ body.woocommerce-checkout .wc-block-components-select__container { position: relative !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto 48px !important; row-gap: 6px !important; width: 100% !important; height: auto !important; padding: 0 !important; } /* WICHTIG: WooCommerce verwendet hier "wc-blocks..." */ body.woocommerce-checkout .wc-blocks-components-select__label { position: static !important; grid-row: 1 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 0 0 2px !important; padding: 0 !important; transform: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.3 !important; color: #111111 !important; opacity: 1 !important; background: transparent !important; pointer-events: none !important; z-index: 1 !important; } /* Eigentliches Auswahlfeld */ body.woocommerce-checkout .wc-block-components-select__select { position: static !important; grid-row: 2 !important; width: 100% !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 42px 0 13px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 5px !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; box-shadow: none !important; } /* Dropdown-Pfeil – auch hier "wc-blocks..." */ body.woocommerce-checkout .wc-blocks-components-select__expand { position: absolute !important; right: 12px !important; bottom: 12px !important; top: auto !important; left: auto !important; width: 22px !important; height: 22px !important; transform: none !important; pointer-events: none !important; } /* Abstand zum nächsten Feld */ body.woocommerce-checkout .wc-block-components-select { margin-bottom: 16px !important; } /* Fokus */ body.woocommerce-checkout .wc-block-components-select__select:focus { outline: none !important; border-color: #b89468 !important; box-shadow: 0 0 0 2px rgba(184, 148, 104, 0.15) !important; } /* ================================================== KASSE – MENGEN-BADGE IN DER BESTELLÜBERSICHT ================================================== */ body.woocommerce-checkout .wc-block-components-order-summary-item__quantity { background: #b89468 !important; background-color: #b89468 !important; color: #111111 !important; min-width: 22px !important; width: auto !important; height: 22px !important; padding: 0 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #b89468 !important; border-radius: 999px !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1 !important; opacity: 1 !important; } /* Die eigentliche Mengen-Zahl sichtbar machen */ body.woocommerce-checkout .wc-block-components-order-summary-item__quantity span[aria-hidden="true"] { display: block !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1 !important; opacity: 1 !important; } /* ========================================================== KASSE – VERSANDOPTIONEN Beige / Schwarz / Montserrat ========================================================== */ /* Einzelne Versandoption */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option { padding: 14px 16px !important; margin-bottom: 10px !important; background: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 6px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; box-shadow: none !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } /* Aktuell ausgewählte Versandoption */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option--checked-option-highlighted { background: #f7f1e9 !important; border: 2px solid #111111 !important; color: #111111 !important; } /* Radio Button */ body.woocommerce-checkout .wc-block-components-shipping-rates-control input[type="radio"] { accent-color: #b89468 !important; } /* Haupttext der Versandoption */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label { font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.45 !important; color: #111111 !important; white-space: normal !important; } /* Zusatztext / Beschreibung */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label { font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.5 !important; color: #111111 !important; white-space: normal !important; } /* Hover auf nicht ausgewählten Versandarten */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover { background: #faf7f2 !important; } /* ========================================================== KASSE – VERSANDOPTION SCHLICHTER Radio-Button entfernen + keinen beigen Flächenhintergrund ========================================================== */ /* Radio-Button komplett ausblenden */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__input { display: none !important; } /* Versandoption ohne gefüllten Hintergrund */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option, body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option--checked-option-highlighted { background: #ffffff !important; background-color: #ffffff !important; /* nur feine beige Kontur */ border: 1px solid #b89468 !important; border-radius: 5px !important; padding: 13px 15px !important; box-shadow: none !important; } /* Text sauber links ausrichten */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-layout { margin: 0 !important; padding: 0 !important; } /* Versandtext */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__label { margin: 0 !important; padding: 0 !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.5 !important; } /* Auch beim Hover kein gefüllter Hintergrund */ body.woocommerce-checkout .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option:hover { background: #ffffff !important; } /* ========================================================== KASSE – LIEFERADRESSE FEINSCHLIFF "Bearbeiten" einzeilig + Checkbox sauber ========================================================== */ /* ---------------------------------------------------------- 1. "BEARBEITEN" IMMER IN EINER ZEILE ---------------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-address-card__edit { width: auto !important; min-width: 82px !important; max-width: none !important; padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; color: #111111 !important; line-height: 1.3 !important; } /* Falls der umgebende Bereich den Button zu schmal macht */ body.woocommerce-checkout .wc-block-components-address-card { grid-template-columns: minmax(0, 1fr) auto !important; } /* ---------------------------------------------------------- 2. CHECKBOX "GLEICHE ADRESSE ALS RECHNUNGSADRESSE" ---------------------------------------------------------- */ /* Checkbox-Container sauber ausrichten */ body.woocommerce-checkout .wc-block-components-checkbox { display: flex !important; align-items: center !important; gap: 8px !important; } /* Native Checkbox vereinheitlichen */ body.woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; position: relative !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 3px !important; box-shadow: none !important; vertical-align: middle !important; } /* Häkchen nur anzeigen, wenn wirklich ausgewählt */ body.woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"]:checked::after { content: "✓"; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -52%) !important; color: #111111 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } /* WooCommerce-eigenes zusätzliches SVG-Häkchen entfernen, damit nicht zwei Haken übereinander liegen */ body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark { display: none !important; } /* Text sauber neben der Checkbox */ body.woocommerce-checkout .wc-block-components-checkbox label, body.woocommerce-checkout .wc-block-components-checkbox__label { margin: 0 !important; padding: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; color: #111111 !important; line-height: 1.4 !important; } /* ========================================================== KASSE – ZAHLUNGSOPTION "BESTELLANFRAGE SENDEN" Weiß + feiner Beige-Rahmen + kein Radio-Button ========================================================== */ /* Gesamter Zahlungs-Kasten */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 5px !important; box-shadow: none !important; overflow: hidden !important; } /* Auch ausgewählte Option NICHT schwarz umranden */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option--checked-option-highlighted, body.woocommerce-checkout .wc-block-components-radio-control__option--checked { background: #ffffff !important; border: none !important; box-shadow: none !important; } /* Radio-Button entfernen */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option input[type="radio"] { display: none !important; } /* Kopfbereich "Bestellanfrage senden" */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { background: #ffffff !important; border: none !important; padding: 14px 16px 8px 16px !important; margin: 0 !important; box-shadow: none !important; } /* Titel */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__label { margin: 0 !important; padding: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.4 !important; color: #111111 !important; } /* Beschreibung darunter */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-content { padding: 3px 16px 15px 16px !important; background: #ffffff !important; border: none !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.55 !important; } /* Text innerhalb der Beschreibung */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-content p, body.woocommerce-checkout .wc-block-components-radio-control-accordion-content div { margin-top: 0 !important; margin-bottom: 0 !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; } /* Hover ebenfalls ruhig halten */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:hover { background: #ffffff !important; } /* ========================================================== KASSE – BESTELLÜBERSICHT RECHTS FEINTUNING ========================================================== */ /* Äußerer Rahmen der kompletten Bestellübersicht */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block { border: 1px solid #b89468 !important; border-radius: 6px !important; background: #ffffff !important; box-shadow: none !important; overflow: hidden !important; font-family: "Montserrat", Arial, sans-serif !important; } /* Überschrift "Bestellübersicht" */ body.woocommerce-checkout .wc-block-components-checkout-order-summary__title { padding: 16px 18px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; } /* Trennlinien im Summenbereich beige statt grau */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper { border-top-color: rgba(184, 148, 104, 0.65) !important; border-bottom-color: rgba(184, 148, 104, 0.65) !important; } /* Einzelne Summenzeilen */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item { padding-top: 11px !important; padding-bottom: 11px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; } /* Texte + Beträge schwarz */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__label, body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-item__value { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; } /* ========================================================== GESAMTSUMME ETWAS STÄRKER HERVORHEBEN ========================================================== */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item { border-top: 1px solid #b89468 !important; padding-top: 15px !important; padding-bottom: 15px !important; color: #111111 !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 600 !important; font-variation-settings: "wght" 600 !important; color: #111111 !important; } /* ========================================================== KASSE – ZAHLUNGSINFO UNTER DEN BESTELLBUTTON VERSCHIEBEN ========================================================== */ /* 1. Alte Beschreibung im Zahlungsbereich ausblenden */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-content { display: none !important; } /* Zahlungsart oben nur noch schlicht anzeigen */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Eventuelle alte Umrandung der Option ebenfalls entfernen */ body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { background: transparent !important; border: none !important; box-shadow: none !important; padding: 4px 0 10px 0 !important; } /* ========================================================== 2. NEUE INFOBOX UNTER "BESTELLANFRAGE SENDEN" ========================================================== */ body.woocommerce-checkout .wc-block-checkout__actions_row { flex-wrap: wrap !important; } body.woocommerce-checkout .wc-block-checkout__actions_row::after { content: "Indem du auf „Bestellanfrage senden“ klickst, übermittelst du uns eine unverbindliche Bestellanfrage. Anschließend prüfen wir die Frachtkosten und senden dir ein individuelles Angebot zu."; display: block !important; flex: 0 0 100% !important; width: 100% !important; box-sizing: border-box !important; margin-top: 16px !important; padding: 14px 16px !important; background: #ffffff !important; border: 1px solid #b89468 !important; border-radius: 5px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.6 !important; text-align: left !important; } /* ========================================================== KASSE – LETZTER FEINSCHLIFF Zahlungsart ausblenden + Abstand bei "Eine Notiz" ========================================================== */ /* Checkbox selbst nicht an den Text kleben lassen */ body.woocommerce-checkout .wc-block-checkout__add-note input[type="checkbox"] { margin-right: 9px !important; } /* ========================================================== KASSE – ÜBERFLÜSSIGE ZAHLUNGSART KOMPLETT AUSBLENDEN Zahlungsart bleibt technisch ausgewählt ========================================================== */ /* Komplette sichtbare Zahlungsoption "Bestellanfrage senden" anhand des tatsächlichen BACS-Radio-Inputs entfernen */ body.woocommerce-checkout #payment-method .wc-block-components-radio-control-accordion-option:has( input[value="bacs"] ) { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* Eventuell reservierten Platz im Zahlungsbereich entfernen */ body.woocommerce-checkout #payment-method .wc-block-components-radio-control { margin: 0 !important; padding: 0 !important; } /* ========================================================== KASSE – PRODUKTZEILEN IN BESTELLÜBERSICHT SAUBER AUSRICHTEN ========================================================== */ /* Jede Produktzeile sauber in 3 Bereiche teilen: Bild | Produkttext | Preis */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) auto !important; column-gap: 14px !important; align-items: start !important; width: 100% !important; box-sizing: border-box !important; } /* Produktbild */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image { grid-column: 1 !important; width: 48px !important; margin: 0 !important; padding: 0 !important; align-self: start !important; } /* Produktbeschreibung */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description { grid-column: 2 !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; align-self: start !important; } /* Produktname */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name { display: block !important; margin: 0 0 6px 0 !important; padding: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1.4 !important; text-align: left !important; } /* Preis rechts */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price { grid-column: 3 !important; width: auto !important; margin: 0 !important; padding: 0 !important; align-self: start !important; text-align: right !important; white-space: nowrap !important; } /* Alle Produktbeschreibungen beginnen auf exakt gleicher Höhe */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description > *:first-child { margin-top: 0 !important; } /* ========================================================== KASSE – BESTELLÜBERSICHT BESSER STRUKTURIEREN Artikel trennen + Einzelpreis / Gesamtpreis unterscheiden ========================================================== */ /* ---------------------------------------------------------- 1. MEHR LUFT + TRENNLINIE ZWISCHEN DEN ARTIKELN ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item { padding-top: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(184, 148, 104, 0.35) !important; } /* Beim letzten Produkt keine unnötige Linie */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item:last-child { border-bottom: none !important; } /* ---------------------------------------------------------- 2. PRODUKTNAME ETWAS KLARER ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name { margin-bottom: 7px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1.35 !important; } /* ---------------------------------------------------------- 3. EINZELPREIS DEUTLICH KENNZEICHNEN ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-price { display: block !important; margin-top: 3px !important; color: #555555 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; } /* Text "Einzelpreis:" davor */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-price::before { content: "Einzelpreis: "; color: #555555 !important; font-weight: 400 !important; } /* ---------------------------------------------------------- 4. GESAMTPREIS RECHTS KLAR HERVORHEBEN ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; text-align: right !important; white-space: nowrap !important; } /* Optional kleine Kennzeichnung über dem Gesamtpreis */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price::before { content: "Gesamt"; display: block !important; margin-bottom: 2px !important; color: #777777 !important; font-size: 10px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.2 !important; } /* ========================================================== KASSE – EINZELPREIS / GESAMTPREIS KLARER DARSTELLEN ========================================================== */ /* ---------------------------------------------------------- 1. LINKER EINZELPREIS DEUTLICHER LESBAR ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-price { color: #111111 !important; font-size: 12px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.4 !important; } /* Begriff "Einzelpreis:" etwas hervorheben */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__description .wc-block-components-product-price::before { content: "Einzelpreis: " !important; color: #111111 !important; font-size: 12px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; } /* ---------------------------------------------------------- 2. DAS FALSCHE "EINZELPREIS:" RECHTS ENTFERNEN ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price .wc-block-components-product-price::before { content: none !important; display: none !important; } /* ---------------------------------------------------------- 3. "GESAMT" RECHTS BESSER LESBAR ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price::before { content: "Gesamt" !important; display: block !important; margin-bottom: 4px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.2 !important; text-align: right !important; } /* ---------------------------------------------------------- 4. GESAMTPREIS SELBST KLARER ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price, body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price * { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; text-align: right !important; } /* ================================================== KASSE – ETWAS MEHR ABSTAND ZWISCHEN PRODUKTEN ================================================== */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item { padding-top: 18px !important; padding-bottom: 18px !important; } /* ========================================================== KASSE – FRACHTKOSTEN IN DIE BESTELLÜBERSICHT VERSCHIEBEN ========================================================== */ /* ---------------------------------------------------------- 1. VERSANDOPTION LINKS NUR OPTISCH AUSBLENDEN Technisch bleibt sie vorhanden und ausgewählt. ---------------------------------------------------------- */ body.woocommerce-checkout .wc-block-components-shipping-rates-control { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%) !important; } /* ---------------------------------------------------------- 3. "GESAMTSUMME" IN "WARENWERT GESAMT" UMBENENNEN ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 0 !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::after { content: "Warenwert gesamt"; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; color: #111111 !important; } /* Warenwert rechts weiterhin deutlich */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; } /* ---------------------------------------------------------- 4. HINWEIS DIREKT UNTER DEM WARENWERT ---------------------------------------------------------- */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item::after { content: "Die Frachtkosten werden individuell berechnet und mit unserem persönlichen Angebot mitgeteilt."; display: block !important; width: 100% !important; box-sizing: border-box !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid rgba(184, 148, 104, 0.45) !important; color: #555555 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.55 !important; text-align: left !important; } /* ========================================================== KASSE – FRACHTKOSTEN DIREKT UNTER ZWISCHENSUMME ========================================================== */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block::after { content: "Frachtkosten individuell nach Angebot"; display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 10px !important; border-top: 1px solid rgba(184, 148, 104, 0.35) !important; background: #ffffff !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.4 !important; white-space: pre !important; } /* ========================================================== KASSE – FRACHTKOSTEN SAUBER UNTER ZWISCHENSUMME ========================================================== */ /* Platz für zusätzliche Frachtkostenzeile */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block { position: relative !important; padding-bottom: 52px !important; overflow: visible !important; } /* Linke Beschriftung: Frachtkosten */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block::before { content: "Frachtkosten"; position: absolute !important; left: 16px !important; bottom: 0 !important; width: auto !important; height: 52px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; color: #111111 !important; background: transparent !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.3 !important; white-space: nowrap !important; z-index: 2 !important; } /* Rechte Information */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block::after { content: "individuell nach Angebot"; position: absolute !important; right: 16px !important; bottom: 0 !important; left: auto !important; width: auto !important; height: 52px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; padding: 0 !important; color: #111111 !important; background: transparent !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.3 !important; white-space: nowrap !important; text-align: right !important; z-index: 2 !important; } /* Dezenter Hintergrund ausschließlich für diese zusätzliche Zeile */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block { background: linear-gradient( to bottom, transparent calc(100% - 52px), #faf7f2 calc(100% - 52px), #faf7f2 100% ) !important; } /* Dezente Linie oberhalb der Frachtkostenzeile */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block::marker { display: none !important; } /* ================================================== KASSE – DOPPELTE LINIE VOR WARENWERT ENTFERNEN ================================================== */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item { border-top: none !important; } /* ================================================== KASSE – "BESTELLÜBERSICHT" FETT ================================================== */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 700 !important; font-variation-settings: "wght" 700 !important; color: #111111 !important; } /* ================================================== KASSE – BEZEICHNUNGEN IM SUMMENBEREICH ANPASSEN ================================================== */ /* "Zwischensumme" → "Zwischensumme Netto" */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__label { font-size: 0 !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-subtotal-block .wc-block-components-totals-item__label::after { content: "Zwischensumme Netto"; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; color: #111111 !important; } /* "Warenwert gesamt" → "Warenwert Brutto" */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 0 !important; } body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::after { content: "Warenwert Brutto"; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; color: #111111 !important; } /* ================================================== KASSE – ABSTAND BEI "GLEICHE ADRESSE ..." ================================================== */ body.woocommerce-checkout .wc-block-checkout__use-address-for-billing .wc-block-components-checkbox__label { margin-left: 9px !important; } body.woocommerce-checkout .wc-block-checkout__use-address-for-billing input[type="checkbox"] { margin-right: 0px !important; } /* KASSE – INFOTEXT UNTER BESTELLBUTTON KÜRZEN */ body.woocommerce-checkout .wc-block-checkout__actions_row::after { content: "Indem du auf „Bestellanfrage senden“ klickst, übermittelst du uns eine unverbindliche Bestellanfrage." !important; } /* ================================================== KASSE – ADRESSFELDER ETWAS KOMPAKTER ================================================== */ body.woocommerce-checkout .wc-block-components-address-form { row-gap: 10px !important; } /* Normale Textfelder */ body.woocommerce-checkout .wc-block-components-address-form .wc-block-components-text-input { margin-bottom: -14px !important; } /* Dropdowns wie Land */ body.woocommerce-checkout .wc-block-components-address-form .wc-block-components-select { margin-bottom: 8px !important; } /* ========================================================== KASSE – ADRESSKARTE NACH "ADRESSE ÜBERNEHMEN" Höhe und Position korrekt wiederherstellen ========================================================== */ /* Wrapper muss nach dem Einklappen wieder echte Höhe bekommen */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-address-wrapper.gfs-address-collapsed { display: block !important; position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important; margin-bottom: 18px !important; } /* Bearbeitungsformular wirklich entfernen */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-address-wrapper.gfs-address-collapsed .wc-block-components-address-form-wrapper { display: none !important; position: static !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Adresskarte wieder normal in den Dokumentfluss setzen */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-address-wrapper.gfs-address-collapsed .wc-block-components-address-card-wrapper { display: block !important; position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; inset: auto !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } /* Auch die eigentliche Karte darf nicht absolut positioniert bleiben */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-address-wrapper.gfs-address-collapsed .wc-block-components-address-card { position: relative !important; width: 100% !important; height: auto !important; inset: auto !important; transform: none !important; } /* Elemente NACH der Lieferadresse müssen wieder darunter beginnen */ body.woocommerce-checkout #shipping-fields { overflow: visible !important; } body.woocommerce-checkout #shipping-fields .wc-block-components-address-address-wrapper.gfs-address-collapsed + * { clear: both !important; } /* ========================================================== KASSE – LIEFERADRESSE NEU ANORDNEN OHNE JAVASCRIPT / OHNE ZUSÄTZLICHES SNIPPET ========================================================== */ /* ---------------------------------------------------------- 1. GRUNDLAYOUT ---------------------------------------------------------- */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 14px !important; row-gap: 12px !important; } /* ---------------------------------------------------------- 2. LAND / REGION – VOLLE BREITE ---------------------------------------------------------- */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-block-components-address-form__country { order: 10 !important; grid-column: 1 / -1 !important; } /* ---------------------------------------------------------- 3. VORNAME + NACHNAME NEBENEINANDER ---------------------------------------------------------- */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="given-name"]) { order: 20 !important; grid-column: 1 !important; } body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="family-name"]) { order: 21 !important; grid-column: 2 !important; } /* ---------------------------------------------------------- 4. UNTERNEHMEN – VOLLE BREITE ---------------------------------------------------------- */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="organization"]) { order: 30 !important; grid-column: 1 / -1 !important; } /* ---------------------------------------------------------- 5. DEINE ÖFFNUNGSZEITEN DIREKT UNTER UNTERNEHMEN + VOLLE BREITE ---------------------------------------------------------- */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[id*="opening-hours"]), body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[name*="opening-hours"]) { order: 40 !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; } /* ---------------------------------------------------------- 6. ADRESSE – VOLLE BREITE ---------------------------------------------------------- */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="address-line1"]) { order: 50 !important; grid-column: 1 / -1 !important; } /* ---------------------------------------------------------- 7. POSTLEITZAHL + STADT ---------------------------------------------------------- */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="postal-code"]) { order: 60 !important; grid-column: 1 !important; } body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="address-level2"]) { order: 61 !important; grid-column: 2 !important; } /* ---------------------------------------------------------- 8. TELEFON – VOLLE BREITE ---------------------------------------------------------- */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[type="tel"]), body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > *:has(input[autocomplete="tel"]) { order: 70 !important; grid-column: 1 / -1 !important; } /* ========================================================== 9. ALLE FELDÜBERSCHRIFTEN IDENTISCH ========================================================== */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form label, body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-block-components-select__label, body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-blocks-components-select__label { font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.35 !important; color: #111111 !important; opacity: 1 !important; } /* ========================================================== 10. ABSTÄNDE ETWAS KOMPAKTER ========================================================== */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-block-components-text-input, body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-block-components-select { margin-top: 0 !important; margin-bottom: 4px !important; } /* ========================================================== KASSE – LIEFERADRESSE SAUBER ANORDNEN nur CSS / keine Scripts ========================================================== */ /* Grundraster */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 14px !important; row-gap: 14px !important; align-items: start !important; } /* ========================================================== REIHENFOLGE ========================================================== */ /* 1. Land / Region */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__country { order: 10 !important; grid-column: 1 / -1 !important; } /* 2. Vorname | Nachname */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__first_name { order: 20 !important; grid-column: 1 !important; } body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__last_name { order: 21 !important; grid-column: 2 !important; } /* 3. Unternehmen – volle Breite */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__company { order: 30 !important; grid-column: 1 / -1 !important; width: 100% !important; } /* 4. Öffnungszeiten DIREKT unter Unternehmen */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__gfs-opening-hours { order: 31 !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; } /* 5. Adresse – volle Breite */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__address_1 { order: 40 !important; grid-column: 1 / -1 !important; width: 100% !important; } /* 6. Postleitzahl | Stadt */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__postcode { order: 50 !important; grid-column: 1 !important; } body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__city { order: 51 !important; grid-column: 2 !important; } /* 7. Telefon – volle Breite */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form__phone { order: 60 !important; grid-column: 1 / -1 !important; width: 100% !important; } /* ========================================================== ALLE FELDÜBERSCHRIFTEN IDENTISCH ========================================================== */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form label, body.woocommerce-checkout #shipping-fields .wc-blocks-components-select__label { font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.35 !important; color: #111111 !important; opacity: 1 !important; } /* Einheitlicher Abstand zwischen Label und Feld */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-block-components-text-input, body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-block-components-select { margin-top: 0 !important; margin-bottom: 2px !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { body.woocommerce-checkout #shipping-fields .wc-block-components-address-form { grid-template-columns: 1fr !important; column-gap: 0 !important; } body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > * { grid-column: 1 !important; } } /* ================================================== KASSE – ADRESSFORMULAR ETWAS KOMPAKTER ================================================== */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form { row-gap: 10px !important; column-gap: 14px !important; } /* Zusätzliche Außenabstände der einzelnen Felder entfernen */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-block-components-text-input, body.woocommerce-checkout #shipping-fields .wc-block-components-address-form .wc-block-components-select { margin-top: 0 !important; margin-bottom: 0 !important; } /* Label etwas näher ans Eingabefeld */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form label, body.woocommerce-checkout #shipping-fields .wc-blocks-components-select__label { margin-bottom: 5px !important; } /* Button nicht zu weit vom letzten Feld entfernen */ body.woocommerce-checkout #shipping-fields .gfs-address-apply-wrap { margin-top: 10px !important; } /* ========================================================== WARENKORB – SUMMENBOX WIE IN DER KASSE ========================================================== */ /* Grundtypografie */ body.woocommerce-cart .cart_totals, body.woocommerce-cart .cart_totals * { font-family: "Montserrat", Arial, sans-serif !important; color: #111111; } /* Tabelle */ body.woocommerce-cart .cart_totals table.shop_table { border-collapse: collapse !important; border: 1px solid #b89468 !important; border-radius: 6px !important; overflow: hidden !important; background: #ffffff !important; } /* Alle Zeilen */ body.woocommerce-cart .cart_totals table.shop_table tr { border-bottom: 1px solid rgba(184, 148, 104, 0.45) !important; } /* Zellen */ body.woocommerce-cart .cart_totals table.shop_table th, body.woocommerce-cart .cart_totals table.shop_table td { padding: 16px 12px !important; border: none !important; vertical-align: middle !important; font-size: 14px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; } /* Linke Bezeichnung */ body.woocommerce-cart .cart_totals table.shop_table th { width: 50% !important; text-align: left !important; } /* Betrag rechts */ body.woocommerce-cart .cart_totals table.shop_table td { width: 50% !important; text-align: right !important; } /* ========================================================== ZWISCHENSUMME → ZWISCHENSUMME NETTO ========================================================== */ body.woocommerce-cart .cart_totals .cart-subtotal th { font-size: 0 !important; } body.woocommerce-cart .cart_totals .cart-subtotal th::after { content: "Zwischensumme Netto"; font-size: 14px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; color: #111111 !important; } /* ========================================================== VERSANDZEILE → FRACHTKOSTEN ========================================================== */ /* Hintergrund wie in der Kasse leicht absetzen */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals { background: #faf7f2 !important; } /* "Sendung" → "Frachtkosten" */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th { font-size: 0 !important; } body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th::after { content: "Frachtkosten"; font-size: 14px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; color: #111111 !important; } /* Versandoptionen in der Summenzeile ausblenden */ body.woocommerce-cart .cart_totals ul#shipping_method { display: none !important; } /* Stattdessen reiner Infotext */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td::after { content: "individuell nach Angebot"; display: block !important; color: #111111 !important; font-size: 13px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.4 !important; text-align: right !important; } /* WooCommerce-Zusatztexte in dieser Zeile ausblenden */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-destination, body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-calculator { display: none !important; } /* ========================================================== MWST. BEREINIGEN ========================================================== */ body.woocommerce-cart .cart_totals .tax-rate th { font-size: 0 !important; } body.woocommerce-cart .cart_totals .tax-rate th::after { content: "MwSt."; font-size: 14px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; color: #111111 !important; } /* ========================================================== GESAMTSUMME → WARENWERT BRUTTO ========================================================== */ body.woocommerce-cart .cart_totals .order-total th { font-size: 0 !important; } body.woocommerce-cart .cart_totals .order-total th::after { content: "Warenwert Brutto"; font-size: 16px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; color: #111111 !important; } body.woocommerce-cart .cart_totals .order-total td { font-size: 16px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; color: #111111 !important; } /* Letzte Tabellenzeile */ body.woocommerce-cart .cart_totals .order-total { border-bottom: none !important; } /* ========================================================== FRACHTKOSTEN-HINWEIS UNTER DER SUMME ========================================================== */ body.woocommerce-cart .cart_totals table.shop_table::after { content: "Die Frachtkosten werden individuell berechnet und mit unserem persönlichen Angebot mitgeteilt."; display: block !important; padding: 12px 14px !important; margin: 0 !important; background: #faf7f2 !important; border-top: 1px solid rgba(184, 148, 104, 0.45) !important; color: #555555 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.55 !important; text-align: left !important; } /* ========================================================== "WEITER ZUR KASSE"-BUTTON PASSEND ========================================================== */ body.woocommerce-cart .wc-proceed-to-checkout .checkout-button { background: #b89468 !important; border: 1px solid #b89468 !important; border-radius: 5px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; box-shadow: none !important; } body.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover { background: #a9855a !important; color: #111111 !important; } /* ========================================================== WARENKORB – SUMMENBEREICH FINAL BEREINIGEN ========================================================== */ /* ---------------------------------------------------------- 1. SPALTENVERHÄLTNIS ---------------------------------------------------------- */ body.woocommerce-cart .cart_totals table.shop_table { width: 100% !important; table-layout: fixed !important; } body.woocommerce-cart .cart_totals table.shop_table th { width: 44% !important; } body.woocommerce-cart .cart_totals table.shop_table td { width: 56% !important; text-align: right !important; } /* ---------------------------------------------------------- 2. ZWISCHENSUMME → ZWISCHENSUMME NETTO ---------------------------------------------------------- */ /* WooCommerce-Originaltext vollständig entfernen */ body.woocommerce-cart .cart_totals .cart-subtotal th { font-size: 0 !important; line-height: 0 !important; color: transparent !important; } body.woocommerce-cart .cart_totals .cart-subtotal th > * { display: none !important; } /* neuer Text */ body.woocommerce-cart .cart_totals .cart-subtotal th::after { content: "Zwischensumme Netto" !important; display: block !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.4 !important; color: #111111 !important; } /* ---------------------------------------------------------- 3. FRACHTKOSTEN ---------------------------------------------------------- */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th { font-size: 0 !important; line-height: 0 !important; color: transparent !important; } body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th > * { display: none !important; } body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th::after { content: "Frachtkosten" !important; display: block !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.4 !important; color: #111111 !important; } /* echte Versand-Auswahl in dieser Summenbox verstecken */ body.woocommerce-cart .cart_totals ul#shipping_method { display: none !important; } /* alten Inhalt rechts ebenfalls entfernen */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td { font-size: 0 !important; line-height: 0 !important; } /* neuer Infotext */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td::after { content: "individuell nach Angebot" !important; display: block !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.4 !important; color: #111111 !important; text-align: right !important; } /* ---------------------------------------------------------- 4. MWST. BEREINIGEN ---------------------------------------------------------- */ body.woocommerce-cart .cart_totals tr.tax-rate th { font-size: 0 !important; line-height: 0 !important; color: transparent !important; } /* "Geschätzt auf Deutschland" komplett entfernen */ body.woocommerce-cart .cart_totals tr.tax-rate th > * { display: none !important; } body.woocommerce-cart .cart_totals tr.tax-rate th::after { content: "MwSt." !important; display: block !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.4 !important; color: #111111 !important; } /* ---------------------------------------------------------- 5. GESAMTSUMME → WARENWERT BRUTTO ---------------------------------------------------------- */ body.woocommerce-cart .cart_totals .order-total th { font-size: 0 !important; line-height: 0 !important; color: transparent !important; } body.woocommerce-cart .cart_totals .order-total th > * { display: none !important; } body.woocommerce-cart .cart_totals .order-total th::after { content: "Warenwert Brutto" !important; display: block !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1.35 !important; color: #111111 !important; } /* Betrag Warenwert Brutto */ body.woocommerce-cart .cart_totals .order-total td, body.woocommerce-cart .cart_totals .order-total td * { font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; color: #111111 !important; } /* ---------------------------------------------------------- 6. ALTEN FRACHTKOSTEN-HINWEIS AM TABLE ENTFERNEN ---------------------------------------------------------- */ body.woocommerce-cart .cart_totals table.shop_table::after { content: none !important; display: none !important; } /* ---------------------------------------------------------- 7. NEUEN HINWEIS SAUBER ZWISCHEN TABELLE UND BUTTON SETZEN ---------------------------------------------------------- */ body.woocommerce-cart .cart_totals .wc-proceed-to-checkout::before { content: "Die Frachtkosten werden individuell berechnet und mit unserem persönlichen Angebot mitgeteilt."; display: block !important; box-sizing: border-box !important; width: 100% !important; margin: 0 0 18px 0 !important; padding: 12px 14px !important; background: #faf7f2 !important; border: 1px solid rgba(184, 148, 104, 0.45) !important; border-radius: 4px !important; color: #555555 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.55 !important; text-align: left !important; } /* ---------------------------------------------------------- 8. SAUBERE ABSTÄNDE ---------------------------------------------------------- */ body.woocommerce-cart .cart_totals table.shop_table th, body.woocommerce-cart .cart_totals table.shop_table td { padding: 16px 12px !important; vertical-align: middle !important; } /* Frachtkosten leicht hervorheben wie in der Kasse */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals { background: #faf7f2 !important; } /* ================================================== KASSE – BESTEHENDEN FRACHTKOSTEN-HINWEIS BEIGE HINTERLEGEN ================================================== */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item::after { /* KEIN neues content – vorhandenen Text behalten */ display: block !important; box-sizing: border-box !important; width: 100% !important; margin-top: 14px !important; padding: 12px 14px !important; background: #faf7f2 !important; border: 1px solid rgba(184, 148, 104, 0.45) !important; border-radius: 4px !important; color: #555555 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.55 !important; text-align: left !important; } /* ========================================= KASSE – Beige Gestaltung für Lieferung und Lieferadresse ========================================= */ /* Lieferadresse-Karte */ body.woocommerce-checkout .wc-block-components-address-card { background: #faf7f2 !important; border: 1px solid rgba(184, 148, 104, 0.35) !important; border-radius: 4px !important; box-shadow: none !important; } /* Bereich Versand / Abholung gesamt */ body.woocommerce-checkout .wc-block-components-shipping-rates-control { background: #f7f2ea !important; border-radius: 6px !important; padding: 4px !important; } /* Einzelne Versandoptionen */ body.woocommerce-checkout .wc-block-components-radio-control__option { background: transparent !important; border-radius: 4px !important; box-shadow: none !important; } /* Aktive Versandoption */ body.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted { background: #fffdf9 !important; border: 1px solid #111111 !important; } /* Inaktive Versandoption */ body.woocommerce-checkout .wc-block-components-radio-control__option:not(.wc-block-components-radio-control__option--checked-option-highlighted) { background: transparent !important; border: 1px solid transparent !important; } /* Bearbeiten-Link optisch sauber */ body.woocommerce-checkout .wc-block-components-address-card__edit { color: #111111 !important; font-weight: 500 !important; text-decoration: none !important; } /* Optional: Hover etwas weicher */ body.woocommerce-checkout .wc-block-components-address-card:hover { background: #f8f3ec !important; } /* ========================================================== KASSE – VERSENDEN / ABHOLUNG PASSEND ZUM BEIGE-DESIGN ========================================================== */ /* Gesamter Hintergrund hinter beiden Optionen */ body.woocommerce-checkout #shipping-method.wp-block-checkout__shipping_method-container { background: #faf7f2 !important; background-color: #faf7f2 !important; border: 1px solid rgba(184, 148, 104, 0.35) !important; border-radius: 6px !important; padding: 4px !important; box-shadow: none !important; } /* Beide Auswahlflächen grundsätzlich */ body.woocommerce-checkout #shipping-method .wc-block-checkout__shipping-method-option { background: transparent !important; border: 1px solid transparent !important; border-radius: 4px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; box-shadow: none !important; } /* AKTIVE Option – z. B. Versenden */ body.woocommerce-checkout #shipping-method .wc-block-checkout__shipping-method-option--selected { background: #ffffff !important; border: 2px solid #111111 !important; color: #111111 !important; box-shadow: none !important; } /* Inaktive Option */ body.woocommerce-checkout #shipping-method .wc-block-checkout__shipping-method-option:not( .wc-block-checkout__shipping-method-option--selected ) { background: #faf7f2 !important; border-color: transparent !important; } /* Hover auf inaktiver Option */ body.woocommerce-checkout #shipping-method .wc-block-checkout__shipping-method-option:not( .wc-block-checkout__shipping-method-option--selected ):hover { background: #f4ede4 !important; } /* ========================================= KASSE – AKTIVE VERSANDART BEIGE UMRANDEN ========================================= */ body.woocommerce-checkout #shipping-method .wc-block-checkout__shipping-method-option--selected { background: #ffffff !important; border: 2px solid #b89468 !important; border-radius: 4px !important; color: #111111 !important; box-shadow: none !important; } /* Hover der aktiven Auswahl */ body.woocommerce-checkout #shipping-method .wc-block-checkout__shipping-method-option--selected:hover { border-color: #a9855a !important; background: #fffdf9 !important; } /* ================================================== KASSE – LADEPLATZHALTER NUR LINKS AUSBLENDEN ================================================== */ body.woocommerce-checkout .wc-block-components-main .wc-block-components-skeleton { display: none !important; } /* ================================================== WARENKORB – HAUPTÜBERSCHRIFTEN DEZENTER ================================================== */ /* Warenkorb-Übersicht */ body.woocommerce-cart .woocommerce-cart-form h2, /* Warenkorb-Summe */ body.woocommerce-cart .cart_totals h2 { font-family: "Montserrat", Arial, sans-serif !important; font-size: 24px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: #111111 !important; margin-bottom: 24px !important; } /* ========================================================== SUCHE – ALTE LUPE ENTFERNEN + NEUE FEINE LUPE ========================================================== */ /* ---------------------------------------------------------- 1. ORIGINALE FIBOSEARCH-LUPE AUSBLENDEN ---------------------------------------------------------- */ /* SVG / Icon innerhalb des Suchbuttons */ .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit svg, .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier { display: none !important; } /* Falls FiboSearch die Lupe als Hintergrundgrafik setzt */ .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit { background-image: none !important; background-color: transparent !important; color: transparent !important; border: none !important; box-shadow: none !important; } /* Eventuelle zusätzliche Pseudo-Lupe des Submit-Buttons */ .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit::before, .dgwt-wcas-search-wrapp .dgwt-wcas-search-submit::after { content: none !important; display: none !important; } /* ---------------------------------------------------------- 2. NEUE, SCHLANKE LUPE ---------------------------------------------------------- */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp { position: relative !important; } /* Kreis */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp::before { content: "" !important; position: absolute !important; left: 19px !important; top: 50% !important; width: 13px !important; height: 13px !important; border: 1.6px solid #111111 !important; border-radius: 50% !important; background: transparent !important; transform: translateY(-60%) !important; box-sizing: border-box !important; z-index: 20 !important; pointer-events: none !important; } /* Griff */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp::after { content: "" !important; position: absolute !important; left: 30px !important; top: 50% !important; width: 7px !important; height: 1.6px !important; background: #111111 !important; border-radius: 2px !important; transform: translateY(4px) rotate(45deg) !important; transform-origin: left center !important; z-index: 20 !important; pointer-events: none !important; } /* ---------------------------------------------------------- 3. SUCHTEXT MIT GENÜGEND ABSTAND ---------------------------------------------------------- */ .dgwt-wcas-search-wrapp .dgwt-wcas-search-input { padding-left: 49px !important; } /* ================================================== SUCHE – LUPE OBEN AN SUCHVERLAUF ANGLEICHEN ================================================== */ /* Kreis etwas größer und kräftiger */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp::before { width: 14px !important; height: 14px !important; left: 19px !important; border-width: 1.8px !important; border-color: #111111 !important; transform: translateY(-58%) !important; } /* Griff etwas kräftiger und länger */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp::after { left: 31px !important; width: 7.5px !important; height: 1.8px !important; background: #111111 !important; transform: translateY(4.5px) rotate(45deg) !important; } /* SUCHE – LUPE LETZTER FEINSCHLIFF */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp::before { width: 15px !important; height: 15px !important; border-width: 2px !important; left: 19px !important; transform: translateY(-58%) !important; } .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp::after { left: 32px !important; width: 8px !important; height: 2px !important; transform: translateY(5px) rotate(45deg) !important; } /* SUCHE – LUPE MINIMAL ANGLEICHEN */ .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp::before { width: 16px !important; height: 16px !important; } .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp::after { left: 33px !important; width: 8px !important; height: 2px !important; } /* ================================================== KASSE – ÖFFNUNGSZEITEN UND ADRESSE TAUSCHEN stärkere Selektoren gegen ältere order-Regeln ================================================== */ /* DEINE ÖFFNUNGSZEITEN direkt nach Unternehmen */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > .wc-block-components-text-input:has(#shipping-gfs-opening-hours) { order: 35 !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; } /* ADRESSE direkt nach den Öffnungszeiten */ body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > .wc-block-components-text-input:has(#shipping-address_1), body.woocommerce-checkout #shipping-fields .wc-block-components-address-form > .wc-block-components-text-input:has( input[autocomplete="address-line1"] ) { order: 40 !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; } /* ================================================== WARENKORB – PRODUKTBILDER + BILDSPALTE ENTFERNEN ================================================== */ body.woocommerce-cart .woocommerce-cart-form th.product-thumbnail, body.woocommerce-cart .woocommerce-cart-form td.product-thumbnail { display: none !important; } /* Produktname bekommt den frei gewordenen Platz */ body.woocommerce-cart .woocommerce-cart-form td.product-name, body.woocommerce-cart .woocommerce-cart-form th.product-name { padding-left: 14px !important; } /* ========================================================== WARENKORB – ENTFERNEN-BUTTON + TRENNLINIEN ========================================================== */ /* ---------------------------------------------------------- ENTFERNEN-BUTTON ---------------------------------------------------------- */ body.woocommerce-cart table.woocommerce-cart-form__contents td.product-remove a.remove[role="button"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; background: #faf7f2 !important; border: 1px solid #b89468 !important; border-radius: 50% !important; color: #111111 !important; font-family: Arial, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; } /* Hover */ body.woocommerce-cart table.woocommerce-cart-form__contents td.product-remove a.remove[role="button"]:hover { background: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; } /* ---------------------------------------------------------- TRENNLINIEN ZWISCHEN DEN ARTIKELN ---------------------------------------------------------- */ body.woocommerce-cart table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item > td { border-bottom: 1px solid rgba(184, 148, 104, 0.35) !important; } /* Kopfzeile ebenfalls beige abgrenzen */ body.woocommerce-cart table.woocommerce-cart-form__contents thead > tr > th { border-bottom: 1px solid rgba(184, 148, 104, 0.55) !important; } /* ================================================== KASSE – FEINER BEIGER RAHMEN UM ARTIKELBILDER ================================================== */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image { border: 1px solid rgba(184, 148, 104, 0.45) !important; border-radius: 4px !important; background: #ffffff !important; padding: 3px !important; box-sizing: border-box !important; } /* Bild selbst sauber innerhalb des Rahmens */ body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img { display: block !important; width: 100% !important; height: auto !important; border: none !important; border-radius: 2px !important; } /* ========================================================== MEIN KONTO – NAVIGATION FINAL Beige / Schwarz / Montserrat ========================================================== */ /* Gesamte Navigation */ body.woocommerce-account .woocommerce-MyAccount-navigation { border: none !important; border-left: none !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; } /* Eventuelle Theme-Linie links entfernen */ body.woocommerce-account .woocommerce-MyAccount-navigation::before, body.woocommerce-account .woocommerce-MyAccount-navigation::after { content: none !important; display: none !important; } /* Liste zurücksetzen */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; border: none !important; list-style: none !important; } /* Alle Menüpunkte neutral */ body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 0 5px 0 !important; padding: 0 !important; border: none !important; border-left: none !important; background: transparent !important; box-shadow: none !important; } /* Auch eventuell vom Theme erzeugte Balken entfernen */ body.woocommerce-account .woocommerce-MyAccount-navigation li::before, body.woocommerce-account .woocommerce-MyAccount-navigation li::after { content: none !important; display: none !important; } /* Normale Links */ body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 16px !important; background: #ffffff !important; border: none !important; border-radius: 4px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.4 !important; text-decoration: none !important; box-shadow: none !important; outline: none !important; transition: background-color 0.18s ease, color 0.18s ease !important; } /* ========================================================== AKTUELL AUSGEWÄHLTE SEITE ========================================================== */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #b89468 !important; color: #111111 !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; } /* Aktive Seite bleibt auch beim Hover gleich */ body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active:hover a { background: #b89468 !important; color: #111111 !important; } /* ========================================================== HOVER AUF NICHT AKTIVEN MENÜPUNKTEN ========================================================== */ body.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active):hover a { background: #faf7f2 !important; color: #111111 !important; } /* Fokus ebenfalls ohne Blau */ body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus, body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { outline: none !important; box-shadow: none !important; color: #111111 !important; } /* ========================================================== MEIN KONTO – LINKE LINIE KOMPLETT NEU AUFBAUEN ========================================================== */ /* 1. ALLE ALTEN LINIEN / PSEUDO-ELEMENTE ENTFERNEN */ body.woocommerce-account .account-navigation-wrap::before, body.woocommerce-account .account-navigation-wrap::after, body.woocommerce-account .woocommerce-MyAccount-navigation::before, body.woocommerce-account .woocommerce-MyAccount-navigation::after, body.woocommerce-account .woocommerce-MyAccount-navigation > ul::before, body.woocommerce-account .woocommerce-MyAccount-navigation > ul::after, body.woocommerce-account .woocommerce-MyAccount-navigation li::before, body.woocommerce-account .woocommerce-MyAccount-navigation li::after, body.woocommerce-account .woocommerce-MyAccount-navigation li a::before, body.woocommerce-account .woocommerce-MyAccount-navigation li a::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* 2. AUCH ECHTE ALTE LINien ENTFERNEN */ body.woocommerce-account .account-navigation-wrap, body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-navigation > ul, body.woocommerce-account .woocommerce-MyAccount-navigation li, body.woocommerce-account .woocommerce-MyAccount-navigation li a { border-left: 0 !important; box-shadow: none !important; background-image: none !important; } /* 3. NUR EINE EINZIGE DURCHGEHENDE LINIE */ body.woocommerce-account .account-navigation-wrap { border-left: 1px solid rgba(184, 148, 104, 0.55) !important; padding-left: 10px !important; } /* Navigation selbst sauber an die neue Linie anschließen */ body.woocommerce-account .woocommerce-MyAccount-navigation { margin-left: 0 !important; padding-left: 0 !important; } /* ================================================== MEIN KONTO – BENUTZERANZEIGE ================================================== */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar { display: block !important; box-sizing: border-box !important; width: 100% !important; margin: 0 0 14px 0 !important; padding: 11px 16px 12px !important; background: #faf7f2 !important; border: 1px solid rgba(184, 148, 104, 0.45) !important; border-radius: 5px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1.35 !important; text-align: left !important; cursor: default !important; box-shadow: none !important; } /* Kleine Erklärung oberhalb des Benutzernamens */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar::before { content: "Angemeldet als"; display: block !important; margin-bottom: 3px !important; color: #777777 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; line-height: 1.3 !important; } /* Keine Hover-Reaktion – es ist kein Button */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar:hover { background: #faf7f2 !important; border-color: rgba(184, 148, 104, 0.45) !important; } /* ========================================================== MEIN KONTO – DASHBOARD ENTFERNEN + BENUTZERBOX VERFEINERN ========================================================== */ /* ---------------------------------------------------------- 1. DASHBOARD AUS DER NAVIGATION ENTFERNEN ---------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard { display: none !important; } /* Nach Entfernen des Dashboards etwas Luft */ body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders { margin-top: 8px !important; } /* ---------------------------------------------------------- 2. BENUTZERBOX ZENTRIEREN ---------------------------------------------------------- */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 13px 16px 14px !important; margin-bottom: 12px !important; background: #faf7f2 !important; border: 1px solid rgba(184, 148, 104, 0.55) !important; border-radius: 5px !important; text-align: center !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 17px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1.35 !important; cursor: default !important; } /* "Angemeldet als" klarer darstellen */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar::before { content: "Angemeldet als" !important; display: block !important; margin-bottom: 5px !important; color: #555555 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.3 !important; letter-spacing: 0.2px !important; text-align: center !important; } /* ========================================================== MEIN KONTO – BENUTZERANZEIGE ALS KOMPAKTER PROFILKOPF ========================================================== */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar { display: block !important; box-sizing: border-box !important; width: 100% !important; margin: 0 0 14px 0 !important; padding: 13px 16px 14px !important; background: #faf7f2 !important; border: none !important; border-top: 3px solid #b89468 !important; border-radius: 4px !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; line-height: 1.25 !important; text-align: left !important; cursor: default !important; box-shadow: none !important; } /* "Angemeldet als" */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar::before { content: "Angemeldet als" !important; display: block !important; margin: 0 0 4px 0 !important; color: #666666 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; font-variation-settings: "wght" 500 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; text-align: left !important; } /* Keine Hover-Wirkung – kein Button */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar:hover { background: #faf7f2 !important; color: #111111 !important; } /* ================================================== MEIN KONTO – AVATARPLATZ VOLLSTÄNDIG ENTFERNEN ================================================== */ /* Kompletten Avatar-/Bildcontainer entfernen */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar .kadence-customer-image { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Die vom Theme reservierten 50px vor "Gotty" entfernen */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar .kadence-customer-name { padding-left: 0 !important; margin-left: 0 !important; width: 100% !important; text-align: left !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; font-weight: 600 !important; font-variation-settings: "wght" 600 !important; color: #111111 !important; } /* Auch der gesamte Profilkopf ohne Avatar-Einrückung */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar { padding-left: 16px !important; padding-right: 16px !important; text-align: left !important; } /* "ANGEMELDET ALS" auf dieselbe linke Linie */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar::before { text-align: left !important; margin-left: 0 !important; padding-left: 0 !important; } /* ================================================== MEIN KONTO – HOVER-SCHRIFT ENDGÜLTIG KORRIGIEREN ================================================== */ /* Aktiver Menüpunkt */ body.woocommerce-account .account-navigation-wrap nav.woocommerce-MyAccount-navigation ul li.is-active > a[aria-current="page"], body.woocommerce-account .account-navigation-wrap nav.woocommerce-MyAccount-navigation ul li.is-active > a[aria-current="page"]:hover, body.woocommerce-account .account-navigation-wrap nav.woocommerce-MyAccount-navigation ul li.is-active:hover > a[aria-current="page"] { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; visibility: visible !important; background-color: #b89468 !important; text-decoration: none !important; text-shadow: none !important; font-weight: 600 !important; } /* Auch alle anderen Kontomenüpunkte beim Hover */ body.woocommerce-account .account-navigation-wrap nav.woocommerce-MyAccount-navigation ul li:not(.is-active) > a:hover { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; background-color: #faf7f2 !important; text-decoration: none !important; } /* ================================================== MEIN KONTO – BENUTZERBOX IMMER DUNKELBEIGE ================================================== */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar, body.woocommerce-account .account-navigation-wrap .kadence-account-avatar:hover, body.woocommerce-account .account-navigation-wrap .kadence-account-avatar:focus, body.woocommerce-account .account-navigation-wrap .kadence-account-avatar:active { background: #b89468 !important; background-color: #b89468 !important; border-color: #b89468 !important; color: #111111 !important; cursor: default !important; box-shadow: none !important; } /* "ANGEMELDET ALS" ebenfalls immer schwarz */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar::before { color: #111111 !important; } /* Benutzername "Gotty" */ body.woocommerce-account .account-navigation-wrap .kadence-account-avatar .kadence-customer-name { color: #111111 !important; } /* ========================================================== GFS – SANFTER BEIGE-VERLAUF Navigation → Seitentitel ========================================================== */ :root { --gfs-nav-beige: #b89468; --gfs-mid-beige: #c1a078; --gfs-light-beige: #c9aa82; /* Höhe des Bereichs zwischen Navigation und Titel */ --gfs-hero-bridge: 38px; } /* ========================================================== 1. TITELBEREICH ========================================================== */ body:not(.home) .entry-hero { position: relative !important; background: linear-gradient( 180deg, var(--gfs-mid-beige) 0%, #c5a57d 48%, var(--gfs-light-beige) 100% ) !important; border: none !important; box-shadow: none !important; } /* Inneren Kadence-Hintergrund neutralisieren */ body:not(.home) .entry-hero .entry-hero-container-inner { background: transparent !important; } /* Eventuelles Overlay entfernen */ body:not(.home) .entry-hero .hero-section-overlay { background: transparent !important; opacity: 1 !important; } /* ========================================================== 2. WEISSEN ZWISCHENRAUM SANFT ÜBERBRÜCKEN ========================================================== */ body:not(.home) .entry-hero::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: calc(-1 * var(--gfs-hero-bridge)) !important; height: var(--gfs-hero-bridge) !important; /* * Beginnt exakt mit dem dunkleren Header-Beige * und geht sehr weich in den Titelbereich über. */ background: linear-gradient( 180deg, var(--gfs-nav-beige) 0%, #bc9870 30%, var(--gfs-mid-beige) 68%, var(--gfs-mid-beige) 100% ) !important; pointer-events: none !important; z-index: 0 !important; } /* Titel immer über dem Verlauf */ body:not(.home) .entry-hero .entry-hero-container-inner, body:not(.home) .entry-hero .entry-header { position: relative !important; z-index: 1 !important; } /* ========================================================== 3. TITEL – BESTEHENDEN LOOK BEIBEHALTEN ========================================================== */ body:not(.home) .entry-hero h1.entry-title { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 700 !important; font-variation-settings: "wght" 700 !important; text-shadow: none !important; } /* ========================================================== 4. WOOCOMMERCE-SICHERHEIT ========================================================== */ body.tax-product_cat .entry-hero, body.woocommerce-cart .entry-hero, body.woocommerce-checkout .entry-hero, body.woocommerce-account .entry-hero { background: linear-gradient( 180deg, var(--gfs-mid-beige) 0%, #c5a57d 48%, var(--gfs-light-beige) 100% ) !important; } /* ========================================================== 5. MOBILE ========================================================== */ @media (max-width: 767px) { :root { --gfs-hero-bridge: 26px; } } /* ========================================================== GFS – VERLAUF FEINSCHLIFF bestehenden Verlaufs-CSS beibehalten ========================================================== */ /* 1. Kleine helle Trennkante zwischen Navigation und Hero schließen */ body:not(.home) .entry-hero { margin-top: -1px !important; background: linear-gradient( 180deg, #c09c73 0%, #c3a079 22%, #c6a57e 52%, #c9aa82 100% ) !important; border-top: none !important; } /* 2. Übergangsbereich etwas weiter und weicher machen */ body:not(.home) .entry-hero::before { top: calc(-1 * var(--gfs-hero-bridge) - 1px) !important; height: calc(var(--gfs-hero-bridge) + 2px) !important; background: linear-gradient( 180deg, #b89468 0%, #ba966d 20%, #bd9970 42%, #bf9d74 68%, #c09c73 100% ) !important; } /* 3. Eventuelle Border direkt unter der Kategoriennavigation entfernen */ body:not(.home) #masthead, body:not(.home) .site-header, body:not(.home) .site-header-row-container-inner { border-bottom-color: transparent !important; } /* Mobile etwas kompakter */ @media (max-width: 767px) { body:not(.home) .entry-hero { margin-top: -1px !important; } } /* ================================================== GFS – HELLE TRENNKANTE ZWISCHEN HEADER UND HERO ENTFERNEN ================================================== */ body:not(.home) #inner-wrap::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Hero ohne Zwischenraum direkt anschließen */ body:not(.home) #inner-wrap > .entry-hero { margin-top: 0 !important; border-top: 0 !important; } /* ========================================================== GFS – SICHTBARER, ABER RUHIGER BEIGE-VERLAUF Navigation → Seitentitel ========================================================== */ /* Der frühere Übergangs-Pseudo-Bereich wird nicht mehr benötigt, da Navigation und Hero jetzt direkt aneinanderliegen */ body:not(.home) .entry-hero::before { content: none !important; display: none !important; } /* Verlauf über den kompletten Titelbereich */ body:not(.home) .entry-hero, body.tax-product_cat .entry-hero, body.woocommerce-cart .entry-hero, body.woocommerce-checkout .entry-hero, body.woocommerce-account .entry-hero { background: linear-gradient( 180deg, #b89468 0%, #bf9b72 22%, #c7a57e 55%, #d0b38f 100% ) !important; background-color: #b89468 !important; border: none !important; box-shadow: none !important; } /* Kadence-Innenbereich transparent halten */ body:not(.home) .entry-hero .entry-hero-container-inner { background: transparent !important; } /* Titel weiterhin klar schwarz */ body:not(.home) .entry-hero h1.entry-title { color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 700 !important; font-variation-settings: "wght" 700 !important; text-shadow: none !important; } /* ================================================== MEGAMENÜ – AUSSENRAHMEN SCHWARZ gilt für alle Oberkategorien ================================================== */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { border-top-color: #111111 !important; border-right-color: #111111 !important; border-bottom-color: #111111 !important; border-left-color: #111111 !important; } /* ================================================== MEGAMENÜ – SCHMALER SCHWARZER RAHMEN ================================================== */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { border-width: 1px !important; border-style: solid !important; border-color: #111111 !important; } /* ================================================== MEGAMENÜ – DEZENTER FEINSCHLIFF ================================================== */ /* Hintergrund minimal wärmer */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { background: #fffdf9 !important; } /* Oberste Links im Megamenü nicht dauerhaft unterstreichen */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { text-decoration: none !important; } /* Unterstreichung nur beim Hover */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu a.mega-menu-link:hover { text-decoration: underline !important; } /* ================================================== MEGAMENÜ – ETWAS UNTERHALB DER HEADERLEISTE STARTEN ================================================== */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { margin-top: 5px !important; } /* ========================================================== GFS – HEADER + HERO SAUBERER FARBVERLAUF volle Breite / keine Zwischenbalken ========================================================== */ :root { --gfs-nav-beige: #b18f68; --gfs-hero-1: #b18f68; --gfs-hero-2: #b89a74; --gfs-hero-3: #c0a580; --gfs-hero-4: #c8b08f; } /* ========================================================== GFS – HEADER / HERO FINAL gleiche Optik wie vorher, aber volle Browserbreite ========================================================== */ :root { --gfs-menu-beige: #b18f68; } /* ========================================================== GFS – Verlauf beibehalten FIX: volle Breite oben + heller Zwischenbalken weg ========================================================== */ :root{ --gfs-nav: #b18f68; --gfs-hero-1: #b18f68; --gfs-hero-2: #b79872; --gfs-hero-3: #bfa27f; --gfs-hero-4: #c6ad8d; --gfs-hero-5: #ccb69b; } /* ========================================================== 1) OBERKATEGORIEN ÜBER VOLLE BREITE -> mit Box-Shadow-Trick, damit links/rechts nichts abgeschnitten ist ========================================================== */ #mega-menu-wrap-primary{ position: relative !important; z-index: 20 !important; background: var(--gfs-nav) !important; /* volle Breite bis an den Browserrand */ box-shadow: 0 0 0 100vmax var(--gfs-nav) !important; clip-path: inset(0 -100vmax 0 -100vmax) !important; border: 0 !important; } #mega-menu-wrap-primary #mega-menu-primary{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* falls Kadence/Theme hier noch eigene Containerfarben drauflegt */ .site-header-row-container, .site-bottom-header-wrap, .site-header-row-layout-standard{ border: 0 !important; box-shadow: none !important; } /* ========================================================== 2) HELLEN ZWISCHENBALKEN KOMPLETT ENTFERNEN ========================================================== */ /* alle typischen Störenfriede neutralisieren */ body:not(.home) #inner-wrap::before, body:not(.home) #inner-wrap::after, body:not(.home) .entry-hero::before, body:not(.home) .entry-hero::after, body:not(.home) .entry-hero-container-inner::before, body:not(.home) .entry-hero-container-inner::after, body:not(.home) .hero-section-overlay::before, body:not(.home) .hero-section-overlay::after{ content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* nichts darf oben am Hero noch einen Rand / Schatten erzeugen */ body:not(.home) .entry-hero, body.tax-product_cat .entry-hero, body.woocommerce-cart .entry-hero, body.woocommerce-checkout .entry-hero, body.woocommerce-account .entry-hero{ margin-top: 0 !important; border-top: 0 !important; box-shadow: none !important; } /* ========================================================== 3) DEIN SCHÖNER VERLAUF (wie von dir bevorzugt) ========================================================== */ body:not(.home) .entry-hero, body.tax-product_cat .entry-hero, body.woocommerce-cart .entry-hero, body.woocommerce-checkout .entry-hero, body.woocommerce-account .entry-hero{ background: linear-gradient( 180deg, #b18f68 0%, #b18f68 14%, #b79872 34%, #bfa27f 56%, #c6ad8d 78%, #ccb69b 100% ) !important; border: none !important; box-shadow: none !important; } /* innere Kadence-Flächen durchsichtig */ body:not(.home) .entry-hero .entry-hero-container-inner, body:not(.home) .entry-hero .hero-section-overlay{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================== 4) AKTIVE OBERKATEGORIE ========================================================== */ #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-ancestor > a.mega-menu-link{ background: rgba(255,255,255,0.17) !important; color: #111111 !important; } /* ========================================================== 5) TITEL ========================================================== */ body:not(.home) .entry-hero h1.entry-title{ color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-weight: 700 !important; text-shadow: none !important; } /* ========================================================== GFS – HELLEN BALKEN UNTER OBERKATEGORIEN ENTFERNEN vorhandenen Verlauf NICHT verändern ========================================================== */ /* Äußere Kadence-Zeile exakt auf dasselbe Beige setzen */ .site-main-header-wrap, .site-main-header-wrap.site-header-row-container, .site-main-header-wrap .site-header-row-container-inner, .site-main-header-wrap .site-container, .site-main-header-wrap .site-header-row, .site-main-header-wrap .site-header-main-section-center { background-color: #b18f68 !important; background: #b18f68 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* Eventuelle Pseudo-Linien dieser Zeile entfernen */ .site-main-header-wrap::before, .site-main-header-wrap::after, .site-main-header-wrap .site-header-row-container-inner::before, .site-main-header-wrap .site-header-row-container-inner::after { content: none !important; display: none !important; border: 0 !important; background: none !important; box-shadow: none !important; } /* ================================================== GFS – HEADER/HERO FARBÜBERGANG FINAL ANGLEICHEN ================================================== */ body:not(.home) .entry-hero, body.tax-product_cat .entry-hero, body.woocommerce-cart .entry-hero, body.woocommerce-checkout .entry-hero, body.woocommerce-account .entry-hero { background: linear-gradient( 180deg, /* oben exakt identisch zum Kategorien-Header */ #b18f68 0%, #b18f68 24%, /* erst danach sanft heller */ #b79872 42%, #bfa27f 62%, #c6ad8d 82%, #ccb69b 100% ) !important; } /* ========================================================== MEGAMENÜ – FUNKTION WIEDERHERSTELLEN alten Full-Width-Trick neutralisieren ========================================================== */ #mega-menu-wrap-primary { clip-path: none !important; overflow: visible !important; /* verursacht sonst die riesige beige Fläche */ box-shadow: none !important; position: relative !important; z-index: 9999 !important; } /* Eventuellen alten Full-Width-Hintergrund entfernen */ #mega-menu-wrap-primary::before { content: none !important; display: none !important; } #mega-menu-wrap-primary #mega-menu-primary { clip-path: none !important; overflow: visible !important; box-shadow: none !important; } /* Kadence darf das Dropdown ebenfalls nicht abschneiden */ .site-main-header-wrap, .site-main-header-wrap .site-header-row-container, .site-main-header-wrap .site-header-row-container-inner, .site-main-header-wrap .site-container { overflow: visible !important; } /* ================================================== OBERKATEGORIEN – MINIMAL DUNKLER Hero / Überschriftsbereich bleibt unangetastet ================================================== */ #mega-menu-wrap-primary, #mega-menu-wrap-primary #mega-menu-primary, .site-main-header-wrap, .site-main-header-wrap .site-header-row-container, .site-main-header-wrap .site-header-row-container-inner, .site-main-header-wrap .site-container, .site-main-header-wrap .site-header-row, .site-main-header-wrap .site-header-section { background: #ad8a63 !important; background-color: #ad8a63 !important; } /* ================================================== OBERKATEGORIEN – SPITZ AUSLAUFENDER TRENNBALKEN direkt an der Unterkante der markierten Zeile ================================================== */ .site-main-header-wrap .site-header-row-container-inner > .site-container { background-image: linear-gradient( to right, transparent 0%, rgba(70, 70, 70, 0.10) 4%, rgba(55, 55, 55, 0.32) 12%, rgba(55, 55, 55, 0.32) 88%, rgba(70, 70, 70, 0.10) 96%, transparent 100% ) !important; background-repeat: no-repeat !important; background-position: center bottom !important; background-size: 100% 2px !important; } /* ========================================================== HEADER – WARENKORB IMMER ÜBER KATEGORIENLEISTE ========================================================== */ /* Weißen oberen Header über die Kategoriennavigation legen */ .site-top-header-wrap { position: relative !important; z-index: 10020 !important; overflow: visible !important; } /* Kategorienleiste darunter */ .site-main-header-wrap { position: relative !important; z-index: 10010 !important; } /* Warenkorb selbst ganz nach vorne */ .header-cart-wrap, .header-cart-inner-wrap, #cart-menu, #cart-menu .menu-item-kadence-cart { position: relative !important; z-index: 10030 !important; overflow: visible !important; } /* Das eigentliche ausgeklappte Warenkorbfeld */ #cart-menu .menu-item-kadence-cart > ul.sub-menu { z-index: 10040 !important; } /* Auch umliegende obere Header-Container dürfen das Dropdown nicht abschneiden */ .site-top-header-wrap .site-header-row-container, .site-top-header-wrap .site-header-row-container-inner, .site-top-header-wrap .site-container, .site-top-header-wrap .site-header-row { overflow: visible !important; } /* ================================================== WARENKORB – HINWEIS "WARENKORB AKTUALISIERT" ================================================== */ body.woocommerce-cart .woocommerce-message { background: #faf7f2 !important; color: #111111 !important; border: 1px solid rgba(184, 148, 104, 0.55) !important; border-left: 5px solid #b89468 !important; border-radius: 5px !important; padding: 17px 20px !important; margin-bottom: 28px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important; } /* Eventuelles WooCommerce-Blau entfernen */ body.woocommerce-cart .woocommerce-message::before { color: #b89468 !important; } /* Gesamt und Zahlungsart im oberen Block absolut ausblenden (alle Varianten) */ ul.woocommerce-order-overview li.total, ul.woocommerce-order-overview li.method, .woocommerce-order-overview .woocommerce-order-overview__total, .woocommerce-order-overview .woocommerce-order-overview__payment-method { display: none !important; } /* Holzhammer-Selektor: Gruppierte Produkte (Sortenschilder) kompakt */ html body.woocommerce div.product form.cart table.woocommerce-grouped-product-list.group_table { width: 100% !important; border-collapse: collapse !important; } html body.woocommerce div.product form.cart table.woocommerce-grouped-product-list.group_table td, html body.woocommerce div.product form.cart table.woocommerce-grouped-product-list.group_table td.woocommerce-grouped-product-list-item__label { padding: 4px 8px !important; vertical-align: middle !important; } html body.woocommerce div.product form.cart table.woocommerce-grouped-product-list.group_table .quantity input.qty { width: 60px !important; height: 35px !important; min-height: 35px !important; padding: 0 5px !important; margin: 0 !important; } /* --- KADENCE FIX: SORTENSCHILDER KOMPAKT --- */ /* 1. Echte Tabelle erzwingen */ table.woocommerce-grouped-product-list { display: table !important; width: 100% !important; border-collapse: collapse !important; } /* 2. Zeilen in eine saubere Linie zwingen */ table.woocommerce-grouped-product-list tr { display: table-row !important; border-bottom: 1px solid #eaeaea !important; } /* 3. Kompakte Zellen & mittige Ausrichtung */ table.woocommerce-grouped-product-list td { display: table-cell !important; padding: 5px 10px !important; /* Etwas enger gemacht (5px statt 8px) */ vertical-align: middle !important; border: none !important; } /* 4. MÜLLABFUHR: Doppelte Mobile-Preise von Kadence löschen! */ table.woocommerce-grouped-product-list td::before, table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__quantity .price { content: none !important; display: none !important; } /* 5. Das Eingabefeld kompakt einschränken */ table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__quantity { width: 70px !important; } table.woocommerce-grouped-product-list .quantity { margin: 0 !important; } table.woocommerce-grouped-product-list .quantity input.qty { width: 60px !important; height: 35px !important; min-height: 35px !important; padding: 0 5px !important; margin: 0 !important; } /* ========================================================== MEIN KONTO – HINWEIS "NOCH KEINE BESTELLUNG" kaputtes Symbol ersetzen ========================================================== */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before { content: "\2709" !important; /* Briefumschlag */ display: flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; margin: 0 14px 0 0 !important; background: #b89468 !important; color: #111111 !important; border-radius: 50% !important; font-family: Arial, sans-serif !important; font-size: 15px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1 !important; } /* ========================================================== KASSE – CHECKBOXEN SAUBER DARSTELLEN kaputte Zeichen wie "oe" / "ae" entfernen ========================================================== */ body.woocommerce-checkout input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; width: 16px !important; height: 16px !important; min-width: 16px !important; margin: 0 6px 0 0 !important; border: 1px solid #b89468 !important; border-radius: 3px !important; background-color: #ffffff !important; background-image: none !important; vertical-align: middle !important; cursor: pointer !important; box-shadow: none !important; } /* Aktivierte Checkbox */ body.woocommerce-checkout input[type="checkbox"]:checked { background-color: #b89468 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.3 6.4 11.5 13 4.8' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 12px 12px !important; } /* Eventuelle alte Theme-Symbole sicher abschalten */ body.woocommerce-checkout input[type="checkbox"]::before, body.woocommerce-checkout input[type="checkbox"]::after { content: none !important; display: none !important; } /* ========================================================== PRODUKTSEITE – MENGENZAHL SCHWARZ DARSTELLEN ========================================================== */ body.single-product .quantity input.qty, body.single-product .quantity input.qty:disabled { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; } /* ========================================================== WARENKORB – REMOVE-BUTTON FINAL Nur sauberes rotes X, kein zusätzliches Symbol ========================================================== */ body.woocommerce-cart td.product-remove a.remove { /* vorhandene Zeichen unsichtbar machen */ font-size: 0 !important; color: transparent !important; text-decoration: none !important; /* eigener Button */ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; min-width: 28px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; background-image: none !important; border: 1px solid #d9a27b !important; border-radius: 50% !important; box-shadow: none !important; overflow: hidden !important; line-height: 1 !important; } /* eigenes X zeichnen */ body.woocommerce-cart td.product-remove a.remove::before { content: "\00D7" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 22px !important; font-weight: 300 !important; line-height: 1 !important; color: #d9342b !important; margin: 0 !important; padding: 0 !important; background: none !important; } /* alles Weitere sicher deaktivieren */ body.woocommerce-cart td.product-remove a.remove::after { content: none !important; display: none !important; } /* Falls doch noch ein echtes Icon innerhalb des Links steckt */ body.woocommerce-cart td.product-remove a.remove svg, body.woocommerce-cart td.product-remove a.remove img, body.woocommerce-cart td.product-remove a.remove i, body.woocommerce-cart td.product-remove a.remove span { display: none !important; } /* ========================================================== WARENKORB – REMOVE-BUTTON FINAL eigenes X, keine Theme-/WooCommerce-Icons ========================================================== */ body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove:hover, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove:focus, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove:active { position: relative !important; display: inline-block !important; width: 28px !important; height: 28px !important; min-width: 28px !important; margin: 0 !important; padding: 0 !important; /* vorhandenes Zeichen sicher verstecken */ font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-indent: -9999px !important; /* keine Icon-Schrift */ font-family: Arial, sans-serif !important; /* kompletter Button wird selbst gezeichnet */ background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='%23ffffff' stroke='%23d9a27b' stroke-width='1'/%3E%3Cpath d='M10 10 L18 18 M18 10 L10 18' stroke='%23d9342b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 28px 28px !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; outline: none !important; overflow: hidden !important; } /* sämtliche Theme-/WooCommerce-Pseudoelemente abschalten */ body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove::before, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove::after { content: none !important; display: none !important; } /* eventuell eingesetzte echte Icon-Elemente ebenfalls entfernen */ body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove svg, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove i, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove span, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove > a.remove img { display: none !important; } /* ========================================================== GFS – KLASSISCHER WOOCOMMERCE CHECKOUT Grundlayout / 2 Spalten / Shop-Design ========================================================== */ /* ---------------------------------------------------------- Gesamter Checkout-Bereich ---------------------------------------------------------- */ body.woocommerce-checkout .woocommerce { max-width: 1180px !important; width: calc(100% - 40px) !important; margin: 0 auto !important; } /* Checkout selbst als 2-Spalten-Layout */ body.woocommerce-checkout form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.85fr) !important; column-gap: 55px !important; row-gap: 12px !important; align-items: start !important; } /* Linke Spalte */ body.woocommerce-checkout #customer_details { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 100% !important; margin: 0 !important; } /* Rechte Überschrift */ body.woocommerce-checkout #order_review_heading { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; margin: 0 0 14px 0 !important; font-size: 21px !important; font-weight: 700 !important; color: #111111 !important; } /* Rechte Bestellübersicht */ body.woocommerce-checkout #order_review { grid-column: 2 !important; grid-row: 2 !important; width: 100% !important; margin: 0 !important; } /* ---------------------------------------------------------- Linke Spalte auf volle Breite ---------------------------------------------------------- */ body.woocommerce-checkout #customer_details .col-1, body.woocommerce-checkout #customer_details .col-2 { float: none !important; width: 100% !important; max-width: none !important; } /* Überschriften */ body.woocommerce-checkout .woocommerce-billing-fields > h3, body.woocommerce-checkout .woocommerce-shipping-fields > h3, body.woocommerce-checkout .woocommerce-additional-fields > h3 { margin: 0 0 22px 0 !important; font-size: 21px !important; font-weight: 700 !important; color: #111111 !important; } /* ---------------------------------------------------------- Beschriftungen ---------------------------------------------------------- */ body.woocommerce-checkout .woocommerce form .form-row label, body.woocommerce-checkout form.checkout .form-row label { margin-bottom: 7px !important; font-size: 14px !important; font-weight: 500 !important; color: #111111 !important; } /* ---------------------------------------------------------- Eingabefelder ---------------------------------------------------------- */ body.woocommerce-checkout form.checkout input.input-text, body.woocommerce-checkout form.checkout select, body.woocommerce-checkout form.checkout textarea, body.woocommerce-checkout form.checkout .select2-container .select2-selection--single { width: 100% !important; border: 1px solid #c29a6c !important; border-radius: 4px !important; background: #ffffff !important; color: #111111 !important; box-shadow: none !important; font-size: 14px !important; } /* Normale Felder */ body.woocommerce-checkout form.checkout input.input-text, body.woocommerce-checkout form.checkout select, body.woocommerce-checkout form.checkout .select2-container .select2-selection--single { min-height: 42px !important; padding: 8px 12px !important; } /* Textarea */ body.woocommerce-checkout form.checkout textarea { min-height: 110px !important; padding: 12px !important; } /* Select2 vertikal zentrieren */ body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px !important; padding-left: 0 !important; color: #111111 !important; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; } /* Abstand zwischen Feldern */ body.woocommerce-checkout form.checkout .form-row { margin-bottom: 18px !important; } /* ---------------------------------------------------------- Bestellübersicht rechts ---------------------------------------------------------- */ body.woocommerce-checkout #order_review { border: 1px solid #c29a6c !important; border-radius: 5px !important; background: #ffffff !important; overflow: hidden !important; } /* Tabelle */ body.woocommerce-checkout #order_review table.shop_table { margin: 0 !important; border: none !important; border-radius: 0 !important; background: #ffffff !important; } /* Tabellenzellen */ body.woocommerce-checkout #order_review table.shop_table th, body.woocommerce-checkout #order_review table.shop_table td { padding: 13px 14px !important; border-bottom: 1px solid rgba(184, 148, 104, 0.35) !important; color: #111111 !important; font-size: 14px !important; } /* Tabellenüberschriften */ body.woocommerce-checkout #order_review table.shop_table thead th { font-weight: 700 !important; } /* Summenzeilen */ body.woocommerce-checkout #order_review table.shop_table tfoot th { font-weight: 600 !important; } /* Gesamtsumme hervorheben */ body.woocommerce-checkout #order_review table.shop_table .order-total th, body.woocommerce-checkout #order_review table.shop_table .order-total td { font-size: 16px !important; font-weight: 700 !important; } /* ---------------------------------------------------------- Zahlungsbereich ---------------------------------------------------------- */ body.woocommerce-checkout #payment { margin: 0 !important; padding: 18px 14px !important; background: #ffffff !important; border-radius: 0 !important; } /* Zahlungsboxen neutral */ body.woocommerce-checkout #payment div.payment_box { background: #f8f4ef !important; color: #111111 !important; } /* Datenschutz / Bedingungen */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text, body.woocommerce-checkout #payment .form-row { font-size: 13px !important; line-height: 1.55 !important; color: #111111 !important; } /* ---------------------------------------------------------- Bestellbutton ---------------------------------------------------------- */ body.woocommerce-checkout #place_order { width: 100% !important; margin-top: 14px !important; padding: 13px 18px !important; background: #b89468 !important; color: #111111 !important; border: none !important; border-radius: 4px !important; font-size: 15px !important; font-weight: 700 !important; box-shadow: none !important; } body.woocommerce-checkout #place_order:hover { background: #a9845d !important; color: #111111 !important; } /* ---------------------------------------------------------- "Bereits Kunde?" Hinweis ---------------------------------------------------------- */ body.woocommerce-checkout .woocommerce-form-login-toggle { max-width: 1180px !important; margin: 0 auto 30px auto !important; } body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { padding: 14px 18px !important; border: none !important; border-left: 3px solid #b89468 !important; background: #faf8f5 !important; color: #111111 !important; font-size: 14px !important; } /* ---------------------------------------------------------- Mobile / Tablet ---------------------------------------------------------- */ @media (max-width: 900px) { body.woocommerce-checkout form.checkout.woocommerce-checkout { display: block !important; } body.woocommerce-checkout #customer_details { margin-bottom: 35px !important; } body.woocommerce-checkout #order_review_heading { margin-top: 20px !important; } body.woocommerce-checkout .woocommerce { width: calc(100% - 28px) !important; } } /* ========================================================== GFS CHECKOUT – FEINSCHLIFF LAYOUT ========================================================== */ /* Gesamten Checkout etwas großzügiger */ body.woocommerce-checkout .woocommerce { max-width: 1240px !important; } /* Verhältnis linke/rechte Spalte optimieren */ body.woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-columns: minmax(0, 1.35fr) minmax(400px, 0.9fr) !important; column-gap: 60px !important; } /* Überschriften etwas kräftiger und größer */ body.woocommerce-checkout .woocommerce-billing-fields > h3, body.woocommerce-checkout #order_review_heading { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 20px !important; } /* normale Texte etwas angenehmer lesbar */ body.woocommerce-checkout form.checkout, body.woocommerce-checkout #order_review { font-size: 15px !important; } /* Bestellübersicht etwas luftiger */ body.woocommerce-checkout #order_review table.shop_table th, body.woocommerce-checkout #order_review table.shop_table td { padding: 15px 16px !important; } /* Zahlungs-/Hinweisbereich rechts luftiger */ body.woocommerce-checkout #payment { padding: 20px 16px !important; } /* Bestellbutton etwas hochwertiger */ body.woocommerce-checkout #place_order { min-height: 46px !important; font-size: 15px !important; } /* ========================================================== CHECKOUT – "EIN KONTO ERSTELLEN?" ALS AUFKLAPPBARE ZEILE ========================================================== */ /* Abstand zum vorherigen Feld */ body.woocommerce-checkout p.create-account { margin: 8px 0 20px 0 !important; } /* Nur diese Checkbox unsichtbar machen */ body.woocommerce-checkout input#createaccount { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Klickbarer Bereich */ body.woocommerce-checkout p.create-account label.woocommerce-form__label-for-checkbox { display: block !important; width: 100% !important; margin: 0 !important; cursor: pointer !important; } /* Sichtbare Auswahlzeile */ body.woocommerce-checkout input#createaccount + span { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; padding: 12px 42px 12px 14px !important; background: #faf8f5 !important; border: 1px solid #c29a6c !important; border-radius: 4px !important; color: #111111 !important; font-size: 15px !important; font-weight: 600 !important; box-sizing: border-box !important; transition: background 0.2s ease, border-color 0.2s ease !important; } /* Pfeil rechts */ body.woocommerce-checkout input#createaccount + span::after { content: "" !important; position: absolute !important; right: 16px !important; top: 50% !important; width: 8px !important; height: 8px !important; border-right: 2px solid #111111 !important; border-bottom: 2px solid #111111 !important; transform: translateY(-65%) rotate(45deg) !important; transition: transform 0.2s ease !important; } /* Geöffneter Zustand */ body.woocommerce-checkout input#createaccount:checked + span { background: #f3ece4 !important; border-color: #b89468 !important; } /* Pfeil nach oben drehen */ body.woocommerce-checkout input#createaccount:checked + span::after { transform: translateY(-30%) rotate(225deg) !important; } /* Aufgeklappter Passwortbereich */ body.woocommerce-checkout div.create-account { margin: -8px 0 22px 0 !important; padding: 18px !important; background: #faf8f5 !important; border: 1px solid #c29a6c !important; border-radius: 4px !important; } /* ========================================================== CHECKOUT – BESTELLÜBERSICHT FEST OBEN VERANKERN bleibt stehen, wenn links Bereiche aufgeklappt werden ========================================================== */ /* Checkout weiterhin zweispaltig */ body.woocommerce-checkout form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(400px, 0.9fr) !important; grid-template-rows: auto !important; column-gap: 60px !important; align-items: start !important; } /* Linke Spalte */ body.woocommerce-checkout #customer_details { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; width: 100% !important; } /* Alte separate Überschrift aus dem Grid nehmen */ body.woocommerce-checkout #order_review_heading { display: none !important; } /* Rechte Bestellbox direkt neben die linke Spalte setzen */ body.woocommerce-checkout #order_review { position: relative !important; grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; width: 100% !important; margin: 52px 0 0 0 !important; transform: none !important; } /* Überschrift "Deine Bestellung" neu oberhalb der Box erzeugen */ body.woocommerce-checkout #order_review::before { content: "Deine Bestellung"; position: absolute !important; left: 0 !important; top: -52px !important; display: block !important; color: #111111 !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; } /* ---------------------------------------------------------- Mobile wieder untereinander ---------------------------------------------------------- */ @media (max-width: 900px) { body.woocommerce-checkout form.checkout.woocommerce-checkout { display: block !important; } body.woocommerce-checkout #order_review { margin-top: 70px !important; } } /* ========================================================== CHECKOUT – "LIEFERUNG AN EINE ANDERE ADRESSE?" zuverlässige Checkbox mit eigenem Haken ========================================================== */ body.woocommerce-checkout #ship-to-different-address-checkbox { -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 9px 0 0 !important; padding: 0 !important; border: 1px solid #c29a6c !important; border-radius: 3px !important; background-color: #ffffff !important; background-image: none !important; box-shadow: none !important; opacity: 1 !important; cursor: pointer !important; vertical-align: middle !important; } /* Aktivierter Zustand */ body.woocommerce-checkout #ship-to-different-address-checkbox:checked { background-color: #b89468 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.2 7.4 12.4 14 5.6' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; } /* Eventuelle Theme-Pseudoelemente deaktivieren */ body.woocommerce-checkout #ship-to-different-address-checkbox::before, body.woocommerce-checkout #ship-to-different-address-checkbox::after { content: none !important; display: none !important; } /* Beschriftung sauber ausrichten */ body.woocommerce-checkout #ship-to-different-address label { display: flex !important; align-items: center !important; cursor: pointer !important; } /* ========================================================== GFS CHECKOUT – OPTISCHER FEINSCHLIFF klassische WooCommerce-Kasse ========================================================== */ /* ---------------------------------------------------------- RECHTE BESTELLÜBERSICHT ---------------------------------------------------------- */ /* Titel etwas näher an die Box */ body.woocommerce-checkout #order_review { margin-top: 44px !important; } body.woocommerce-checkout #order_review::before { top: -44px !important; } /* Box etwas hochwertiger */ body.woocommerce-checkout #order_review { border: 1px solid #c29a6c !important; border-radius: 7px !important; overflow: hidden !important; background: #ffffff !important; box-shadow: 0 3px 12px rgba(0,0,0,0.025) !important; } /* Tabellenzeilen */ body.woocommerce-checkout #order_review table.shop_table th, body.woocommerce-checkout #order_review table.shop_table td { padding: 16px 15px !important; vertical-align: middle !important; } /* Versandzeile leicht hervorheben */ body.woocommerce-checkout #order_review table.shop_table tr.woocommerce-shipping-totals { background: #faf8f5 !important; } /* Gesamtsumme etwas deutlicher */ body.woocommerce-checkout #order_review table.shop_table tr.order-total { background: #f8f3ed !important; } body.woocommerce-checkout #order_review table.shop_table tr.order-total th, body.woocommerce-checkout #order_review table.shop_table tr.order-total td { font-size: 16px !important; font-weight: 700 !important; } /* ---------------------------------------------------------- BESTELLANFRAGE / ZAHLUNGSBEREICH ---------------------------------------------------------- */ body.woocommerce-checkout #payment { padding: 22px 20px 24px !important; background: #ffffff !important; } /* Titel der Zahlungsart */ body.woocommerce-checkout #payment ul.payment_methods li > label { display: block !important; margin-bottom: 12px !important; font-weight: 600 !important; color: #111111 !important; } /* Infobox "unverbindliche Bestellanfrage" */ body.woocommerce-checkout #payment div.payment_box { margin: 10px 0 24px !important; padding: 14px 16px !important; background: #f8f4ef !important; border: none !important; border-left: 3px solid #b89468 !important; border-radius: 2px !important; color: #111111 !important; font-size: 14px !important; line-height: 1.55 !important; } /* hässliches Dreieck von WooCommerce entfernen */ body.woocommerce-checkout #payment div.payment_box::before { display: none !important; } /* Datenschutztext etwas ruhiger */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin-top: 8px !important; font-size: 14px !important; line-height: 1.55 !important; } /* ---------------------------------------------------------- AGB-CHECKBOX SAUBER DARSTELLEN ---------------------------------------------------------- */ body.woocommerce-checkout #terms { -webkit-appearance: none !important; appearance: none !important; width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 2px 8px 0 0 !important; border: 1px solid #c29a6c !important; border-radius: 3px !important; background-color: #ffffff !important; background-image: none !important; cursor: pointer !important; } body.woocommerce-checkout #terms:checked { background-color: #b89468 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.2 7.4 12.4 14 5.6' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important; } /* AGB-Zeile */ body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .validate-required label { display: flex !important; align-items: flex-start !important; line-height: 1.55 !important; } /* ---------------------------------------------------------- BESTELLBUTTON ---------------------------------------------------------- */ body.woocommerce-checkout #place_order { min-height: 48px !important; margin-top: 20px !important; border-radius: 4px !important; font-size: 15px !important; font-weight: 700 !important; transition: background-color .18s ease, transform .18s ease !important; } body.woocommerce-checkout #place_order:hover { background: #aa865e !important; } /* ---------------------------------------------------------- LOGIN-HINWEIS OBEN ---------------------------------------------------------- */ body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { padding: 15px 18px !important; background: #faf8f5 !important; border-left: 3px solid #b89468 !important; font-size: 14px !important; } /* ---------------------------------------------------------- "LIEFERUNG AN EINE ANDERE ADRESSE?" etwas mehr Abstand / sauberere Zeile ---------------------------------------------------------- */ body.woocommerce-checkout #ship-to-different-address { margin: 24px 0 22px !important; } body.woocommerce-checkout #ship-to-different-address label { font-weight: 500 !important; } /* ---------------------------------------------------------- BESTELLHINWEISE ---------------------------------------------------------- */ body.woocommerce-checkout .woocommerce-additional-fields { margin-top: 8px !important; } body.woocommerce-checkout #order_comments { min-height: 115px !important; } /* ========================================================== CHECKOUT – BESTELLANFRAGE + DATENSCHUTZ FEINSCHLIFF ========================================================== */ /* etwas dezenter Hover-Effekt */ body.woocommerce-checkout #payment ul.payment_methods li > label:hover { background: #aa865e !important; border-color: #aa865e !important; } /* ---------------------------------------------------------- DATENSCHUTZHINWEIS DEUTLICH KLEINER ---------------------------------------------------------- */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin: 18px 0 14px 0 !important; font-size: 12px !important; line-height: 1.45 !important; color: #333333 !important; } /* Links darin ebenfalls klein halten */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text a { font-size: inherit !important; } /* ========================================================== CHECKOUT – DATENSCHUTZ KOMPAKTER + SEKUNDÄRBUTTON RUHIGER ========================================================== */ /* Zahlungsart / Bestellanfrage oben etwas dezenter */ body.woocommerce-checkout #payment ul.payment_methods li > label { background: #f6f1eb !important; border: 1px solid #c29a6c !important; color: #111111 !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 14px !important; } /* Hover nur leicht */ body.woocommerce-checkout #payment ul.payment_methods li > label:hover { background: #efe6dc !important; border-color: #b89468 !important; } /* Datenschutztext deutlich kleiner */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text, body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p { font-size: 12px !important; line-height: 1.45 !important; color: #444444 !important; margin-bottom: 10px !important; } /* AGB-Zeile ebenfalls etwas kompakter */ body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper, body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label, body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper span { font-size: 12px !important; line-height: 1.45 !important; } /* etwas weniger Abstand vor dem finalen Button */ body.woocommerce-checkout #place_order { margin-top: 14px !important; } /* ========================================================== CHECKOUT – OBEREN "BESTELLANFRAGE SENDEN"-BUTTON ENTFERNEN ========================================================== */ body.woocommerce-checkout #payment ul.payment_methods li > label { display: none !important; } /* unnötigen Abstand entfernen */ body.woocommerce-checkout #payment ul.payment_methods, body.woocommerce-checkout #payment ul.payment_methods li { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; } /* ========================================================== CHECKOUT – BESTELLÜBERSCHRIFT + LIEFERADRESSE AUFKLAPPBAR ========================================================== */ /* ---------------------------------------------------------- "DEINE BESTELLUNG" WIEDER SICHTBAR MACHEN ---------------------------------------------------------- */ body.woocommerce-checkout #order_review { position: relative !important; overflow: visible !important; margin-top: 48px !important; } body.woocommerce-checkout #order_review::before { content: "Deine Bestellung" !important; position: absolute !important; top: -48px !important; left: 0 !important; display: block !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #111111 !important; } /* ---------------------------------------------------------- "LIEFERUNG AN EINE ANDERE ADRESSE?" ALS AUFKLAPPBARE ZEILE ---------------------------------------------------------- */ body.woocommerce-checkout #ship-to-different-address { width: 100% !important; margin: 26px 0 22px 0 !important; } /* komplette Zeile klickbar */ body.woocommerce-checkout #ship-to-different-address label { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; padding: 12px 42px 12px 14px !important; border: 1px solid #c29a6c !important; border-radius: 4px !important; background: #faf8f5 !important; box-sizing: border-box !important; cursor: pointer !important; font-size: 15px !important; font-weight: 600 !important; } /* Text nimmt restliche Breite ein */ body.woocommerce-checkout #ship-to-different-address label span { flex: 1 !important; } /* Pfeil rechts */ body.woocommerce-checkout #ship-to-different-address label span::after { content: "" !important; position: absolute !important; right: 16px !important; top: 50% !important; width: 8px !important; height: 8px !important; border-right: 2px solid #111111 !important; border-bottom: 2px solid #111111 !important; transform: translateY(-65%) rotate(45deg) !important; transition: transform .2s ease !important; } /* Pfeil bei geöffneter Lieferadresse nach oben */ body.woocommerce-checkout #ship-to-different-address-checkbox:checked + span::after { transform: translateY(-30%) rotate(225deg) !important; } /* geöffnete Zeile leicht hervorheben */ body.woocommerce-checkout #ship-to-different-address:has( #ship-to-different-address-checkbox:checked ) label { background: #f3ece4 !important; } /* ========================================================== GFS CHECKOUT – VERSAND / ABHOLUNG WIE ALTER BLOCK-CHECKOUT ========================================================== */ body.woocommerce-checkout .gfs-delivery-selector { margin: 26px 0 28px 0 !important; } /* Überschrift */ body.woocommerce-checkout .gfs-delivery-selector h3 { margin: 0 0 14px 0 !important; color: #111111 !important; font-size: 18px !important; font-weight: 700 !important; } /* Gemeinsamer Rahmen */ body.woocommerce-checkout .gfs-delivery-options { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; padding: 3px !important; background: #f7f4ef !important; border-radius: 5px !important; box-sizing: border-box !important; } /* Einzelne Auswahl */ body.woocommerce-checkout .gfs-delivery-option { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 44px !important; padding: 10px 14px !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 4px !important; color: #111111 !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; box-shadow: none !important; } /* Aktive Auswahl */ body.woocommerce-checkout .gfs-delivery-option.is-active { background: #ffffff !important; border-color: #c29a6c !important; font-weight: 600 !important; } /* Hover */ body.woocommerce-checkout .gfs-delivery-option:hover { background: #ffffff !important; } /* Icon */ body.woocommerce-checkout .gfs-delivery-icon { font-size: 16px !important; line-height: 1 !important; } /* ========================================================= Versand / Abholung im klassischen WooCommerce Checkout ========================================================= */ .woocommerce-checkout-review-order-table ul#shipping_method { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .woocommerce-checkout-review-order-table ul#shipping_method li { margin: 0 !important; padding: 0 !important; position: relative; } .woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .woocommerce-checkout-review-order-table ul#shipping_method li label { display: flex !important; align-items: center; justify-content: center; min-height: 58px; padding: 14px 16px; margin: 0 !important; border: 1px solid #c49a67; border-radius: 8px; background: #f8f5f1; color: #111 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; text-align: center; cursor: pointer; box-sizing: border-box; transition: all 0.2s ease; } .woocommerce-checkout-review-order-table ul#shipping_method li input[type="radio"]:checked + label { background: #c19a62; border-color: #c19a62; color: #fff !important; } .woocommerce-checkout-review-order-table ul#shipping_method li label:hover { background: #f2ebe2; } /* Versandzeile insgesamt etwas schöner */ .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td { vertical-align: middle; } /* Falls WooCommerce unterhalb noch Zusatztext ausgibt */ .woocommerce-shipping-destination, .woocommerce-shipping-calculator { display: none !important; } /* Mobile */ @media (max-width: 768px) { .woocommerce-checkout-review-order-table ul#shipping_method { grid-template-columns: 1fr; } } /* ========================================================== GFS CHECKOUT – VERSAND / ABHOLUNG LINKS ========================================================== */ /* Originale WooCommerce-Versandzeile NUR ausblenden, wenn unsere linke Auswahl erfolgreich aufgebaut wurde */ body.woocommerce-checkout.gfs-shipping-ui-ready tr.woocommerce-shipping-totals.shipping { display: none !important; } /* gesamter neuer Bereich */ body.woocommerce-checkout .gfs-shipping-selector { clear: both !important; width: 100% !important; margin: 26px 0 28px 0 !important; box-sizing: border-box !important; } /* Überschrift "Lieferung" */ body.woocommerce-checkout .gfs-shipping-selector h3 { margin: 0 0 14px 0 !important; color: #111111 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; } /* äußerer Bereich wie im alten Checkout */ body.woocommerce-checkout .gfs-shipping-selector__options { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100% !important; padding: 3px !important; background: #f7f4ef !important; border-radius: 5px !important; box-sizing: border-box !important; } /* Versand / Abholung */ body.woocommerce-checkout .gfs-shipping-choice { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: 10px 16px !important; background: transparent !important; color: #111111 !important; border: 1px solid transparent !important; border-radius: 4px !important; box-shadow: none !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.2 !important; cursor: pointer !important; transition: background-color .18s ease, border-color .18s ease !important; } /* aktive Versandart */ body.woocommerce-checkout .gfs-shipping-choice.is-active { background: #ffffff !important; color: #111111 !important; border-color: #c29a6c !important; font-weight: 600 !important; } /* Hover */ body.woocommerce-checkout .gfs-shipping-choice:not(.is-active):hover { background: #f1ebe4 !important; } /* Mobile */ @media (max-width: 600px) { body.woocommerce-checkout .gfs-shipping-selector__options { grid-template-columns: 1fr !important; } } /* ========================================================== GFS CHECKOUT – RECHNUNGSDATEN AUFKLAPPBAR ========================================================== */ body.woocommerce-checkout .gfs-billing-section > h3 { position: relative !important; margin: 0 0 22px 0 !important; padding: 14px 46px 14px 16px !important; background: #faf8f5 !important; border: 1px solid #c29a6c !important; border-radius: 5px !important; cursor: pointer !important; font-size: 20px !important; font-weight: 700 !important; } /* Pfeil */ body.woocommerce-checkout .gfs-billing-section > h3::after { content: "" !important; position: absolute !important; right: 18px !important; top: 50% !important; width: 9px !important; height: 9px !important; border-right: 2px solid #111 !important; border-bottom: 2px solid #111 !important; transform: translateY(-65%) rotate(225deg) !important; transition: transform .2s ease !important; } /* eingeklappt */ body.woocommerce-checkout .gfs-billing-section.is-collapsed .woocommerce-billing-fields__field-wrapper { display: none !important; } /* Pfeil nach unten */ body.woocommerce-checkout .gfs-billing-section.is-collapsed > h3::after { transform: translateY(-65%) rotate(45deg) !important; } /* im eingeklappten Zustand weniger Abstand */ body.woocommerce-checkout .gfs-billing-section.is-collapsed > h3 { margin-bottom: 8px !important; } /* ========================================================== CHECKOUT – RECHNUNGSDATEN EINKLAPPBAR ========================================================== */ body.woocommerce-checkout .gfs-billing-section > h3 { position: relative !important; margin: 0 0 22px 0 !important; padding: 14px 46px 14px 16px !important; background: #faf8f5 !important; border: 1px solid #c29a6c !important; border-radius: 5px !important; color: #111 !important; font-size: 20px !important; font-weight: 700 !important; cursor: pointer !important; } /* Pfeil */ body.woocommerce-checkout .gfs-billing-section > h3::after { content: "" !important; position: absolute !important; right: 18px !important; top: 50% !important; width: 9px !important; height: 9px !important; border-right: 2px solid #111 !important; border-bottom: 2px solid #111 !important; transform: translateY(-35%) rotate(225deg) !important; transition: transform .2s ease !important; } /* Felder bei geschlossenem Zustand ausblenden */ body.woocommerce-checkout .gfs-billing-section.is-collapsed .woocommerce-billing-fields__field-wrapper { display: none !important; } /* Pfeil nach unten */ body.woocommerce-checkout .gfs-billing-section.is-collapsed > h3::after { transform: translateY(-65%) rotate(45deg) !important; } /* kompakter Abstand */ body.woocommerce-checkout .gfs-billing-section.is-collapsed > h3 { margin-bottom: 8px !important; } /* ========================================================== CHECKOUT – REIHENFOLGE / ABSTÄNDE LINKS ========================================================== */ body.woocommerce-checkout .gfs-shipping-selector { margin: 0 0 24px 0 !important; } body.woocommerce-checkout .gfs-shipping-selector h3 { margin: 0 0 12px 0 !important; } body.woocommerce-checkout .gfs-billing-section { margin-bottom: 22px !important; } body.woocommerce-checkout #ship-to-different-address { margin: 0 0 26px 0 !important; } body.woocommerce-checkout .woocommerce-additional-fields { margin-top: 0 !important; } /* ========================================================== GFS CHECKOUT – EINHEITLICHE TYPOGRAFIE ========================================================== */ body.woocommerce-checkout form.checkout, body.woocommerce-checkout form.checkout input, body.woocommerce-checkout form.checkout select, body.woocommerce-checkout form.checkout textarea, body.woocommerce-checkout form.checkout button, body.woocommerce-checkout form.checkout label, body.woocommerce-checkout form.checkout table, body.woocommerce-checkout form.checkout p, body.woocommerce-checkout form.checkout span, body.woocommerce-checkout form.checkout a { font-family: "Montserrat", Arial, sans-serif !important; } /* Normale Texte */ body.woocommerce-checkout form.checkout { font-weight: 400 !important; } /* Feldbeschriftungen */ body.woocommerce-checkout .woocommerce-billing-fields label, body.woocommerce-checkout .woocommerce-shipping-fields label, body.woocommerce-checkout .woocommerce-additional-fields label { font-weight: 500 !important; } /* Bereichsüberschriften */ body.woocommerce-checkout .gfs-shipping-selector h3, body.woocommerce-checkout .gfs-billing-section > h3, body.woocommerce-checkout #order_review::before { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 700 !important; } /* Versand / Abholung */ body.woocommerce-checkout .gfs-shipping-choice { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 500 !important; } body.woocommerce-checkout .gfs-shipping-choice.is-active { font-weight: 600 !important; } /* Bestellübersicht */ body.woocommerce-checkout #order_review table.shop_table { font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; } body.woocommerce-checkout #order_review table.shop_table th { font-weight: 700 !important; } /* Summen */ body.woocommerce-checkout #order_review .cart-subtotal th, body.woocommerce-checkout #order_review .cart-subtotal td, body.woocommerce-checkout #order_review .tax-rate th, body.woocommerce-checkout #order_review .tax-rate td, body.woocommerce-checkout #order_review .order-total th, body.woocommerce-checkout #order_review .order-total td { font-weight: 700 !important; } /* ========================================================== GFS CHECKOUT – PRODUKTZEILEN WIE ALTE BESTELLÜBERSICHT ========================================================== */ /* Produktzeilen */ body.woocommerce-checkout #order_review table.shop_table tr.cart_item td { padding-top: 16px !important; padding-bottom: 16px !important; vertical-align: middle !important; } /* Produktname */ body.woocommerce-checkout #order_review td.product-name { position: relative !important; padding-right: 16px !important; color: #111111 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; } /* Mengen-Badge */ body.woocommerce-checkout #order_review .gfs-checkout-qty { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 24px !important; height: 24px !important; margin-left: 7px !important; padding: 0 7px !important; background: #c19a62 !important; color: #111111 !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; vertical-align: middle !important; } /* Einzelpreis unter Produktname */ body.woocommerce-checkout #order_review .gfs-checkout-unit-price { display: block !important; margin-top: 5px !important; color: #444444 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.35 !important; } /* Preis rechts */ body.woocommerce-checkout #order_review td.product-total { white-space: nowrap !important; color: #111111 !important; font-size: 14px !important; font-weight: 600 !important; vertical-align: middle !important; } /* etwas mehr Breite für den Produktnamen */ body.woocommerce-checkout #order_review table.shop_table th.product-name { width: 64% !important; } body.woocommerce-checkout #order_review table.shop_table th.product-total { width: 36% !important; } /* ========================================================== CHECKOUT – RECHNUNGSDATEN KOMPAKTER ========================================================== */ body.woocommerce-checkout .gfs-billing-section > h3 { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; padding: 13px 44px 13px 14px !important; } /* ========================================================== CHECKOUT – MENGE | PRODUKT | ZWISCHENSUMME ========================================================== */ /* ========================================================== CHECKOUT – TABELLENKOPF Menge | Produkt | Zwischensumme ========================================================== */ body.woocommerce-checkout #order_review table.shop_table th.product-name { position: relative !important; width: 68% !important; height: 52px !important; padding: 0 !important; font-size: 0 !important; color: transparent !important; vertical-align: middle !important; } /* Menge */ body.woocommerce-checkout #order_review table.shop_table th.product-name::before { content: "Menge" !important; position: absolute !important; left: 0 !important; top: 50% !important; width: 52px !important; transform: translateY(-50%) !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; text-align: center !important; } /* Produkt */ body.woocommerce-checkout #order_review table.shop_table th.product-name::after { content: "Produkt" !important; position: absolute !important; left: 60px !important; top: 50% !important; transform: translateY(-50%) !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; text-align: left !important; } /* Zwischensumme */ body.woocommerce-checkout #order_review table.shop_table th.product-total { width: 32% !important; padding: 0 14px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; text-align: right !important; vertical-align: middle !important; } /* Produktzelle ebenfalls in Menge + Produkt teilen */ body.woocommerce-checkout #order_review table.shop_table td.product-name { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) !important; column-gap: 8px !important; align-items: center !important; padding-top: 14px !important; padding-bottom: 14px !important; } /* Menge steht VOR Produkt */ body.woocommerce-checkout #order_review .gfs-checkout-qty { grid-column: 1 !important; grid-row: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: center !important; width: 25px !important; min-width: 25px !important; height: 25px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: #c19a62 !important; color: #111 !important; font-size: 12px !important; font-weight: 700 !important; } /* Produktblock */ body.woocommerce-checkout #order_review .gfs-checkout-product-info { grid-column: 2 !important; grid-row: 1 !important; display: block !important; min-width: 0 !important; } /* Produktname */ body.woocommerce-checkout #order_review .gfs-checkout-product-name { display: block !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; color: #111 !important; } /* Einzelpreis darunter */ body.woocommerce-checkout #order_review .gfs-checkout-unit-price { display: block !important; margin-top: 4px !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #555 !important; } /* Zwischensumme rechts */ body.woocommerce-checkout #order_review td.product-total { vertical-align: middle !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; } /* Breiten etwas sinnvoller verteilen */ body.woocommerce-checkout #order_review table.shop_table th.product-name { width: 68% !important; } body.woocommerce-checkout #order_review table.shop_table th.product-total { width: 32% !important; } body.woocommerce-checkout #order_review .gfs-checkout-product-name { font-weight: 500 !important; } body.woocommerce-checkout #order_review .gfs-checkout-unit-price { font-weight: 400 !important; } body.woocommerce-checkout #order_review td.product-total { font-weight: 500 !important; } /* ========================================================== CHECKOUT – RECHNUNGSDATEN VORSCHAU ========================================================== */ /* Vorschau standardmäßig ausblenden */ body.woocommerce-checkout .gfs-billing-preview { display: none; } /* Nur im eingeklappten Zustand sichtbar */ body.woocommerce-checkout .gfs-billing-section.is-collapsed .gfs-billing-preview { display: block !important; margin: -8px 0 22px 0 !important; padding: 12px 15px 14px !important; border: 1px solid #c29a6c !important; border-top: 0 !important; border-radius: 0 0 5px 5px !important; background: #ffffff !important; font-family: "Montserrat", Arial, sans-serif !important; color: #222222 !important; } /* Titel oben mit Vorschau optisch verbinden */ body.woocommerce-checkout .gfs-billing-section.is-collapsed > h3 { margin-bottom: 8px !important; border-radius: 5px 5px 0 0 !important; } /* Name / Firma */ body.woocommerce-checkout .gfs-billing-preview__name { margin-bottom: 4px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; } /* Adresse */ body.woocommerce-checkout .gfs-billing-preview__address { margin-bottom: 3px !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* Telefon + E-Mail */ body.woocommerce-checkout .gfs-billing-preview__contact { margin-bottom: 3px !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #555555 !important; } /* Öffnungszeiten */ body.woocommerce-checkout .gfs-billing-preview__hours { margin-top: 5px !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #555555 !important; } /* ========================================================== GFS CHECKOUT – LETZTER FEINSCHLIFF ========================================================== */ /* Aktive Versandart deutlicher */ body.woocommerce-checkout .gfs-shipping-choice.is-active { background: #c19a62 !important; border-color: #c19a62 !important; color: #111111 !important; font-weight: 600 !important; } /* Nicht aktive Auswahl ruhig halten */ body.woocommerce-checkout .gfs-shipping-choice:not(.is-active) { background: #f7f4ef !important; } /* Rechnungsdaten-Vorschau etwas luftiger */ body.woocommerce-checkout .gfs-billing-preview { padding: 12px 14px 13px !important; } body.woocommerce-checkout .gfs-billing-preview__name { font-size: 13px !important; font-weight: 600 !important; } body.woocommerce-checkout .gfs-billing-preview__address, body.woocommerce-checkout .gfs-billing-preview__contact, body.woocommerce-checkout .gfs-billing-preview__hours { font-size: 11px !important; line-height: 1.45 !important; } /* Rechte Bestellübersicht etwas kompakter */ body.woocommerce-checkout #order_review table.shop_table tr.cart_item td { padding-top: 13px !important; padding-bottom: 13px !important; } /* Zahlungs-/Hinweisbereich kompakter */ body.woocommerce-checkout #payment { padding-top: 18px !important; padding-bottom: 20px !important; } body.woocommerce-checkout #payment div.payment_box { margin-bottom: 18px !important; } body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin-top: 12px !important; margin-bottom: 8px !important; } body.woocommerce-checkout #place_order { margin-top: 12px !important; } /* ========================================================== GFS CHECKOUT – BESTELLHINWEISE ALS AUFKLAPPFELD ========================================================== */ body.woocommerce-checkout #order_comments_field { margin-top: 24px !important; } /* Klickbare Überschrift */ body.woocommerce-checkout #order_comments_field > label.gfs-order-notes-toggle { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 13px 44px 13px 14px !important; border: 1px solid #c29a6c !important; border-radius: 5px !important; background: #faf8f5 !important; box-sizing: border-box !important; color: #111111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; } /* Pfeil */ body.woocommerce-checkout #order_comments_field > label.gfs-order-notes-toggle::after { content: "" !important; position: absolute !important; right: 17px !important; top: 50% !important; width: 8px !important; height: 8px !important; border-right: 2px solid #111111 !important; border-bottom: 2px solid #111111 !important; transform: translateY(-30%) rotate(225deg) !important; transition: transform .18s ease !important; } /* geschlossen = Pfeil nach unten */ body.woocommerce-checkout #order_comments_field.is-collapsed > label.gfs-order-notes-toggle::after { transform: translateY(-65%) rotate(45deg) !important; } /* Textarea beim Öffnen */ body.woocommerce-checkout #order_comments_field textarea { margin-top: 10px !important; } /* Tabellenkopf rechts */ body.woocommerce-checkout #order_review th.product-total { font-weight: 600 !important; } /* ========================================================== CHECKOUT – FINALER FEINSCHLIFF RECHTE BESTELLBOX ========================================================== */ /* ---------------------------------------------------------- 1. ÄUSSEREN BEIGEN RAHMEN SAUBER DARSTELLEN ---------------------------------------------------------- */ body.woocommerce-checkout #order_review { box-sizing: border-box !important; border: 1px solid #c29a6c !important; border-radius: 6px !important; background: #ffffff !important; /* verhindert abgeschnittene / übermalte Rahmenteile */ background-clip: padding-box !important; } /* Tabelleninhalt darf den äußeren Rahmen nicht übermalen */ body.woocommerce-checkout #order_review table.shop_table { box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; border-left: 0 !important; border-right: 0 !important; } /* erste Zeile oben sauber innerhalb der Rundung */ body.woocommerce-checkout #order_review table.shop_table thead tr:first-child th:first-child { border-top-left-radius: 5px !important; } body.woocommerce-checkout #order_review table.shop_table thead tr:first-child th:last-child { border-top-right-radius: 5px !important; } /* ---------------------------------------------------------- 2. HINWEIS ZUR BESTELLANFRAGE LINKSBÜNDIG ---------------------------------------------------------- */ body.woocommerce-checkout #payment div.payment_box { box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 22px 0 30px 0 !important; padding: 16px 18px !important; text-align: left !important; background: #f7f3ee !important; border-left: 3px solid #c19a62 !important; } /* sämtliche Texte darin links */ body.woocommerce-checkout #payment div.payment_box, body.woocommerce-checkout #payment div.payment_box p { text-align: left !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.65 !important; } /* ---------------------------------------------------------- 3. DATENSCHUTZ ETWAS VOM AGB-BEREICH TRENNEN ---------------------------------------------------------- */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin: 0 0 20px 0 !important; padding: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.55 !important; color: #444444 !important; } /* ---------------------------------------------------------- 4. AGB-PFLICHTFELD DEUTLICH PRÄSENTER ---------------------------------------------------------- */ body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row.validate-required { box-sizing: border-box !important; width: 100% !important; margin: 0 0 22px 0 !important; padding: 13px 14px !important; background: #faf7f2 !important; border: 1px solid #c29a6c !important; border-radius: 5px !important; } /* Label sauber ausrichten */ body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row.validate-required label { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; color: #111111 !important; cursor: pointer !important; } /* Checkbox größer und deutlich sichtbar */ body.woocommerce-checkout #payment input[name="terms"] { flex: 0 0 auto !important; width: 18px !important; height: 18px !important; margin: 1px 0 0 0 !important; accent-color: #c19a62 !important; cursor: pointer !important; } /* rotes Pflichtsternchen etwas klarer */ body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .required { color: #d60000 !important; font-weight: 700 !important; } /* ---------------------------------------------------------- 5. ABSCHLUSSBUTTON SAUBER VOM AGB-FELD TRENNEN ---------------------------------------------------------- */ body.woocommerce-checkout #place_order { margin-top: 0 !important; min-height: 50px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; } /* ========================================================== CHECKOUT – AUSSENRAHMEN ZUVERLÄSSIG ÜBER ALLEM ZEICHNEN ========================================================== */ body.woocommerce-checkout #order_review { position: relative !important; /* bisherigen echten Rahmen entfernen */ border: 0 !important; border-radius: 6px !important; /* wichtig wegen "Deine Bestellung" oberhalb */ overflow: visible !important; box-sizing: border-box !important; } /* ========================================================== CHECKOUT – AUSSENRAHMEN AUCH WÄHREND AJAX-LADEN SICHTBAR ========================================================== */ body.woocommerce-checkout #order_review { position: relative !important; border: 0 !important; border-radius: 6px !important; box-sizing: border-box !important; /* zuverlässiger Außenrahmen */ box-shadow: 0 0 0 1px #c29a6c !important; overflow: visible !important; } /* alten künstlichen Rahmen sicher deaktivieren */ body.woocommerce-checkout #order_review::after { display: none !important; } /* ========================================================== WOOCOMMERCE AJAX-LADEEBENE innerhalb des Rahmens halten ========================================================== */ body.woocommerce-checkout #order_review > .blockUI.blockOverlay { top: 1px !important; left: 1px !important; width: calc(100% - 2px) !important; height: calc(100% - 2px) !important; border-radius: 5px !important; box-sizing: border-box !important; } /* auch bei anderen BlockUI-Varianten */ body.woocommerce-checkout #order_review .blockUI { border-radius: 5px !important; } /* ========================================================== BESTELLANFRAGE-HINWEIS LINKS AUSRICHTEN ========================================================== */ body.woocommerce-checkout #payment ul.payment_methods, body.woocommerce-checkout #payment ul.payment_methods li { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.woocommerce-checkout #payment div.payment_box { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; text-align: left !important; } body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row.validate-required { margin-top: 24px !important; } /* ========================================================== CHECKOUT – HINWEISBOX BREITER + ABSTÄNDE OPTIMIEREN ========================================================== */ /* WooCommerce-Wrapper der Hinweisbox komplett ausnutzen */ body.woocommerce-checkout #payment ul.payment_methods, body.woocommerce-checkout #payment ul.payment_methods li { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Hinweisbox auf volle verfügbare Breite */ body.woocommerce-checkout #payment div.payment_box { float: none !important; display: block !important; width: 100% !important; max-width: none !important; margin: 18px 0 18px 0 !important; padding: 16px 18px !important; box-sizing: border-box !important; text-align: left !important; background: #f7f3ee !important; border-left: 3px solid #c19a62 !important; } /* Falls WooCommerce noch den kleinen Dreieck-Pfeil erzeugt */ body.woocommerce-checkout #payment div.payment_box::before { display: none !important; } /* Datenschutz näher an die Hinweisbox rücken */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin-top: 8px !important; margin-bottom: 18px !important; } /* AGB-Bereich mit sauberem Abstand zum Datenschutz */ body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row.validate-required { margin-top: 0 !important; margin-bottom: 20px !important; } /* Abschlussbutton etwas näher an den AGB-Bereich */ body.woocommerce-checkout #place_order { margin-top: 0 !important; } /* ========================================================== CHECKOUT – BESTELLÜBERSICHT LAYOUT WIEDERHERSTELLEN ========================================================== */ body.woocommerce-checkout #order_review { box-sizing: border-box !important; max-width: 100% !important; } /* ========================================================== GFS CHECKOUT – BESTELLÜBERSICHT AUSSENRAHMEN FINAL ========================================================== */ body.woocommerce-checkout #order_review { position: relative !important; box-sizing: border-box !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible !important; } /* Außenrahmen über sämtlichem WooCommerce-Inhalt */ body.woocommerce-checkout #order_review::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; box-sizing: border-box !important; border: 1px solid #c29a6c !important; border-radius: 6px !important; pointer-events: none !important; z-index: 2147483647 !important; } /* WooCommerce-Ladeoverlay bleibt UNTER unserem Rahmen */ body.woocommerce-checkout #order_review > .blockUI.blockOverlay { z-index: 999999 !important; top: 1px !important; right: 1px !important; bottom: 1px !important; left: 1px !important; width: auto !important; height: auto !important; border-radius: 5px !important; box-sizing: border-box !important; } /* ========================================================== GFS CHECKOUT – LETZTER FEINSCHLIFF BESTELLÜBERSICHT ========================================================== */ /* ---------------------------------------------------------- 1. MENGE ALS "4x", "6x", "24x" DARSTELLEN ---------------------------------------------------------- */ body.woocommerce-checkout #order_review .gfs-checkout-qty::after { content: "x" !important; margin-left: 1px !important; font-size: 11px !important; font-weight: 700 !important; } /* Badge etwas breiter, damit z.B. 24x sauber hineinpasst */ body.woocommerce-checkout #order_review .gfs-checkout-qty { width: auto !important; min-width: 28px !important; height: 25px !important; padding: 0 6px !important; border-radius: 999px !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- 2. SPALTE "GESAMT" EXAKT ÜBER DEN PREISEN AUSRICHTEN ---------------------------------------------------------- */ body.woocommerce-checkout #order_review table.shop_table th.product-total { text-align: right !important; padding-right: 16px !important; } body.woocommerce-checkout #order_review table.shop_table td.product-total { text-align: right !important; padding-right: 16px !important; } /* ---------------------------------------------------------- 3. HINWEISBOX ETWAS BREITER ---------------------------------------------------------- */ body.woocommerce-checkout #payment div.payment_box { width: calc(100% - 24px) !important; max-width: none !important; margin-left: 12px !important; margin-right: 12px !important; padding: 16px 18px !important; box-sizing: border-box !important; text-align: left !important; } /* Auch alle Absätze darin linksbündig */ body.woocommerce-checkout #payment div.payment_box p { margin: 0 !important; text-align: left !important; line-height: 1.6 !important; } /* ---------------------------------------------------------- 4. WENIGER LEERRAUM ZWISCHEN HINWEIS UND DATENSCHUTZ ---------------------------------------------------------- */ body.woocommerce-checkout #payment div.payment_box { margin-bottom: 16px !important; } body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin-top: 0 !important; margin-bottom: 18px !important; } /* ---------------------------------------------------------- 5. DATENSCHUTZTEXT KOMPAKT HALTEN ---------------------------------------------------------- */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text, body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p { font-size: 12px !important; line-height: 1.5 !important; } /* ---------------------------------------------------------- 6. SUMMENZEILEN RECHTS SAUBER AUSRICHTEN ---------------------------------------------------------- */ body.woocommerce-checkout #order_review .cart-subtotal td, body.woocommerce-checkout #order_review .tax-rate td, body.woocommerce-checkout #order_review .order-total td { text-align: right !important; padding-right: 16px !important; } /* ========================================================== CHECKOUT – HINWEISBOX / DATENSCHUTZ FINAL ========================================================== */ /* WooCommerce-Container um die Hinweisbox */ body.woocommerce-checkout #payment ul.payment_methods { margin: 0 !important; padding: 18px 18px 0 !important; box-sizing: border-box !important; } /* Listenelement ohne zusätzliche Einrückung */ body.woocommerce-checkout #payment ul.payment_methods > li { width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Hinweisbox fast über die komplette Breite */ body.woocommerce-checkout #payment ul.payment_methods li div.payment_box { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 15px 17px !important; box-sizing: border-box !important; text-align: left !important; background: #f7f3ee !important; border-left: 3px solid #c19a62 !important; } /* Text darin sauber links */ body.woocommerce-checkout #payment ul.payment_methods li div.payment_box p { margin: 0 !important; text-align: left !important; line-height: 1.55 !important; } /* Weniger Leerraum vor dem Datenschutz */ body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { margin-top: 14px !important; margin-bottom: 16px !important; } /* Gesamt exakt über Preis-Spalte */ body.woocommerce-checkout #order_review table.shop_table th.product-total { text-align: right !important; padding-right: 16px !important; } body.woocommerce-checkout #order_review table.shop_table td.product-total { text-align: right !important; padding-right: 16px !important; } /* ========================================================== GFS CHECKOUT – GASTANSICHT FEINSCHLIFF ========================================================== */ /* ---------------------------------------------------------- 1. RECHNUNGSFELDER ETWAS KOMPAKTER ---------------------------------------------------------- */ body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row { margin-bottom: 18px !important; } /* Abstand Label -> Eingabefeld */ body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row label { margin-bottom: 6px !important; } /* Eingabefelder etwas kompakter */ body.woocommerce-checkout .woocommerce-billing-fields input.input-text, body.woocommerce-checkout .woocommerce-billing-fields select { min-height: 42px !important; } /* ---------------------------------------------------------- 2. "EIN KONTO ERSTELLEN?" ETWAS NÄHER AN E-MAIL ---------------------------------------------------------- */ body.woocommerce-checkout .create-account { margin-top: 18px !important; margin-bottom: 28px !important; } /* ---------------------------------------------------------- 3. BESTELLÜBERSICHT AM DESKTOP BEIM SCROLLEN SICHTBAR ---------------------------------------------------------- */ @media (min-width: 1025px) { body.woocommerce-checkout #order_review { position: sticky !important; top: 25px !important; align-self: flex-start !important; } } /* ---------------------------------------------------------- 4. AUF TABLET / MOBIL KEIN STICKY ---------------------------------------------------------- */ @media (max-width: 1024px) { body.woocommerce-checkout #order_review { position: relative !important; top: auto !important; } } /* ========================================================== GFS OFF-CANVAS WARENKORB Floating Basket ausblenden ========================================================== */ .xoo-wsc-basket { display: none !important; } /* ========================================================== GFS OFF-CANVAS CART – GRUNDDESIGN ========================================================== */ .xoo-wsc-container, .xoo-wsc-modal, .xoo-wsc-header, .xoo-wsc-body, .xoo-wsc-footer { font-family: "Montserrat", Arial, sans-serif !important; } /* Seitenpanel */ .xoo-wsc-container { width: 440px !important; max-width: 100% !important; background: #ffffff !important; box-shadow: -4px 0 20px rgba(0,0,0,.08) !important; } /* ========================================================== HEADER ========================================================== */ .xoo-wsc-header { min-height: 68px !important; padding: 18px 22px !important; background: #ffffff !important; border-bottom: 1px solid #c29a6c !important; box-sizing: border-box !important; } /* Warenkorb Überschrift */ .xoo-wsc-header, .xoo-wsc-header * { color: #111111 !important; } .xoo-wsc-header span, .xoo-wsc-header div { font-family: "Montserrat", Arial, sans-serif !important; } /* Schließen-X */ .xoo-wsc-close { color: #111111 !important; font-size: 24px !important; font-weight: 400 !important; } /* ========================================================== BODY / PRODUKTE ========================================================== */ .xoo-wsc-body { padding: 0 18px !important; background: #ffffff !important; } /* Einzelnes Produkt */ .xoo-wsc-product { position: relative !important; margin: 0 !important; padding: 18px 4px !important; background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #e4d5c3 !important; box-shadow: none !important; } /* Produktname */ .xoo-wsc-product .xoo-wsc-smr-title, .xoo-wsc-product .xoo-wsc-pname, .xoo-wsc-product a { font-family: "Montserrat", Arial, sans-serif !important; color: #111111 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; text-decoration: none !important; } /* kleinere Produktinformationen */ .xoo-wsc-product .xoo-wsc-smr-del, .xoo-wsc-product .xoo-wsc-sm-info, .xoo-wsc-product .variation { font-size: 11px !important; font-weight: 400 !important; color: #555555 !important; } /* Produkt-Gesamtpreis */ .xoo-wsc-product .xoo-wsc-smr-ptotal, .xoo-wsc-product .amount { color: #111111 !important; font-weight: 600 !important; } /* Entfernen-X */ .xoo-wsc-product .xoo-wsc-smr-del, .xoo-wsc-product .xoo-wsc-icon-trash { color: #111111 !important; } /* ========================================================== MENGENSTEUERUNG ========================================================== */ .xoo-wsc-qtybox, .xoo-wsc-qtybox * { font-family: "Montserrat", Arial, sans-serif !important; } .xoo-wsc-qtybox { border: 1px solid #c29a6c !important; border-radius: 4px !important; overflow: hidden !important; } /* Minus / Plus */ .xoo-wsc-chng { background: #f7f3ee !important; color: #111111 !important; border: 0 !important; } /* Mengenfeld */ .xoo-wsc-qty { background: #ffffff !important; color: #111111 !important; border: 0 !important; text-align: center !important; } /* ========================================================== FOOTER ========================================================== */ .xoo-wsc-footer { padding: 18px 20px 20px !important; background: #ffffff !important; border-top: 1px solid #c29a6c !important; } /* Summe */ .xoo-wsc-footer .xoo-wsc-ft-amt, .xoo-wsc-footer .xoo-wsc-ft-amt *, .xoo-wsc-footer .amount { color: #111111 !important; font-size: 15px !important; font-weight: 600 !important; } /* ========================================================== BUTTONS – alte blaue Optik entfernen ========================================================== */ .xoo-wsc-ft-buttons-cont { display: flex !important; flex-direction: column !important; gap: 9px !important; margin-top: 14px !important; } /* Grundstil */ .xoo-wsc-ft-buttons-cont a, .xoo-wsc-ft-buttons-cont button { width: 100% !important; min-height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; border-radius: 4px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: none !important; } /* Zur Kasse = Hauptbutton */ .xoo-wsc-ft-btn-checkout { order: 1 !important; background: #c19a62 !important; color: #111111 !important; border: 1px solid #c19a62 !important; } /* Warenkorb ansehen = sekundär */ .xoo-wsc-ft-btn-cart { order: 2 !important; background: #ffffff !important; color: #111111 !important; border: 1px solid #c19a62 !important; } /* Einkauf fortsetzen = dezent */ .xoo-wsc-ft-btn-continue { order: 3 !important; min-height: 32px !important; background: transparent !important; color: #111111 !important; border: 0 !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: underline !important; } /* ========================================================== OFF-CANVAS CART – MOBIL ========================================================== */ @media (max-width: 600px) { .xoo-wsc-container { width: 100% !important; max-width: 100% !important; } .xoo-wsc-header { padding: 16px 18px !important; } .xoo-wsc-body { padding: 0 14px !important; } .xoo-wsc-footer { padding: 16px !important; } } /* ========================================================== GFS OFF-CANVAS – FEINSCHLIFF 2 ========================================================== */ /* ---------------------------------------------------------- 1. SCHWEBENDEN ZWEITEN WARENKORB SICHER AUSBLENDEN ---------------------------------------------------------- */ .xoo-wsc-modal .xoo-wsc-basket, .xoo-wsc-container > .xoo-wsc-basket { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ---------------------------------------------------------- 2. KAPUTTES ICON LINKS IM HEADER ENTFERNEN ---------------------------------------------------------- */ .xoo-wsc-header .xoo-wsc-bki, .xoo-wsc-header [class*="xoo-wsc-icon-basket"] { display: none !important; } /* Warenkorb-Titel */ .xoo-wsc-header .xoo-wsc-ctxt { margin: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 21px !important; font-weight: 500 !important; color: #111 !important; } /* ---------------------------------------------------------- 3. KAPUTTES SCHLIESSEN-ICON DURCH SAUBERES × ERSETZEN ---------------------------------------------------------- */ .xoo-wsc-close { position: relative !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; cursor: pointer !important; } .xoo-wsc-close::before { content: "×" !important; font-family: Arial, sans-serif !important; font-size: 28px !important; font-weight: 400 !important; line-height: 1 !important; color: #111 !important; } /* ---------------------------------------------------------- 4. PRODUKTNAME SAUBER TRENNEN ---------------------------------------------------------- */ .xoo-wsc-product .xoo-wsc-smr-title { display: block !important; margin: 0 24px 5px 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #111 !important; } /* Produktinfos nicht an den Titel ankleben lassen */ .xoo-wsc-product .xoo-wsc-sm-info { display: block !important; margin-top: 3px !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.45 !important; color: #555 !important; } /* ---------------------------------------------------------- 5. DOPPELTE STANDARD-PREISZEILE AUSBLENDEN Ziel: Einzelpreis: 55,00 € statt zusätzlich: Preis: 55,00 € ---------------------------------------------------------- */ .xoo-wsc-product .xoo-wsc-smr-price { display: none !important; } /* ---------------------------------------------------------- 6. PREISE NICHT ÜBERTRIEBEN FETT ---------------------------------------------------------- */ .xoo-wsc-product .amount { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 500 !important; } /* Gesamtpreis rechts darf kräftiger sein */ .xoo-wsc-product .xoo-wsc-smr-ptotal .amount { font-weight: 600 !important; } /* ---------------------------------------------------------- 7. MENGENSTEUERUNG SCHÖNER ---------------------------------------------------------- */ .xoo-wsc-qty-box, .xoo-wsc-qtybox { display: inline-flex !important; align-items: center !important; margin-top: 10px !important; border: 1px solid #c29a6c !important; border-radius: 4px !important; overflow: hidden !important; background: #fff !important; } /* Minus / Plus */ .xoo-wsc-chng { width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; background: #f7f3ee !important; color: #111 !important; border: 0 !important; font-size: 16px !important; font-weight: 500 !important; cursor: pointer !important; } /* Anzahl */ input.xoo-wsc-qty { width: 38px !important; height: 34px !important; padding: 0 !important; background: #fff !important; color: #111 !important; border: 0 !important; border-left: 1px solid #e4d5c3 !important; border-right: 1px solid #e4d5c3 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; text-align: center !important; } /* ---------------------------------------------------------- 8. PRODUKT-ENTFERNEN-X DEZENTER ---------------------------------------------------------- */ .xoo-wsc-product .xoo-wsc-smr-del { font-size: 13px !important; color: #777 !important; opacity: .8 !important; } .xoo-wsc-product .xoo-wsc-smr-del:hover { color: #111 !important; opacity: 1 !important; } /* ========================================================== GFS SIDE CART – HEADER + PRODUKT FIX ========================================================== */ /* ---------------------------------------------------------- HEADER SAUBER AUFBAUEN ---------------------------------------------------------- */ .xoo-wsc-header { display: flex !important; align-items: center !important; justify-content: space-between !important; } /* linkes Basket-Icon + Count im Header entfernen */ .xoo-wsc-header .xoo-wsc-bki, .xoo-wsc-header [class*="basket"], .xoo-wsc-header .xoo-wsc-items-count, .xoo-wsc-header [class*="count"] { display: none !important; } /* Titel sauber */ .xoo-wsc-header .xoo-wsc-ctxt { margin: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 21px !important; font-weight: 500 !important; line-height: 1.2 !important; color: #111 !important; } /* ---------------------------------------------------------- SCHLIESSEN-X KOMPLETT SELBST ZEICHNEN ---------------------------------------------------------- */ .xoo-wsc-close, .xoo-wsch-close { position: relative !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; color: transparent !important; cursor: pointer !important; } /* vorhandene Plugin-Glyphen neutralisieren */ .xoo-wsc-close::before, .xoo-wsch-close::before { content: "×" !important; font-family: Arial, sans-serif !important; font-size: 28px !important; font-weight: 400 !important; line-height: 1 !important; color: #111 !important; } .xoo-wsc-close::after, .xoo-wsch-close::after { display: none !important; content: none !important; } /* ---------------------------------------------------------- PRODUKTNAME ---------------------------------------------------------- */ .xoo-wsc-product .xoo-wsc-smr-title, .xoo-wsc-product .xoo-wsc-pname { display: block !important; width: 100% !important; margin: 0 0 5px 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #111 !important; } /* Link darin ebenfalls als Block */ .xoo-wsc-product .xoo-wsc-smr-title a, .xoo-wsc-product .xoo-wsc-pname a { display: block !important; } /* ---------------------------------------------------------- DOPPELTE "PREIS:" ZEILE AUSBLENDEN ---------------------------------------------------------- */ .xoo-wsc-product .xoo-wsc-smr-price, .xoo-wsc-product [class*="smr-price"] { display: none !important; } /* ---------------------------------------------------------- PRODUKT-ENTFERNEN-X SAUBER POSITIONIEREN ---------------------------------------------------------- */ .xoo-wsc-product .xoo-wsc-smr-del { position: absolute !important; top: 16px !important; right: 4px !important; margin: 0 !important; font-size: 13px !important; color: #777 !important; } /* Produkt braucht dafür Positionierung */ .xoo-wsc-product { position: relative !important; padding-right: 28px !important; } /* ========================================================== GFS SIDE CART – SUMMENBEREICH ========================================================== */ /* MwSt.-Zeile */ .xoo-wsc-footer .gfs-wsc-vat { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 8px 0 15px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #111111 !important; } /* Betrag */ .xoo-wsc-footer .gfs-wsc-vat-value, .xoo-wsc-footer .gfs-wsc-vat-value * { font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; font-style: normal !important; color: #111111 !important; } /* ---------------------------------------------------------- "Zur Kasse – 65,45 €" NICHT KURSIV ---------------------------------------------------------- */ .xoo-wsc-ft-btn-checkout, .xoo-wsc-ft-btn-checkout *, .xoo-wsc-ft-btn-checkout em, .xoo-wsc-ft-btn-checkout i, .xoo-wsc-ft-btn-checkout .amount, .xoo-wsc-ft-btn-checkout .woocommerce-Price-amount { font-style: normal !important; } /* Betrag im Button etwas sauberer hervorheben */ .xoo-wsc-ft-btn-checkout .amount, .xoo-wsc-ft-btn-checkout .woocommerce-Price-amount { font-weight: 600 !important; } /* ========================================================== GFS SIDE CART – POPUP AUS + MWST. ========================================================== */ /* ---------------------------------------------------------- "Artikel aktualisiert" vollständig ausblenden ---------------------------------------------------------- */ .xoo-wsc-notice-box, .xoo-wsc-notice { display: none !important; } /* Falls eine neuere Plugin-Version einen anderen Notice-Wrapper verwendet */ .xoo-wsc-container [class*="notice-box"], .xoo-wsc-container [class*="notice-wrap"] { display: none !important; } /* ---------------------------------------------------------- MWST.-ZEILE ---------------------------------------------------------- */ .xoo-wsc-footer .gfs-wsc-vat { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 8px 0 16px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; font-style: normal !important; color: #111111 !important; } .xoo-wsc-footer .gfs-wsc-vat *, .xoo-wsc-footer .gfs-wsc-vat-value { font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; font-style: normal !important; color: #111111 !important; } /* ---------------------------------------------------------- CHECKOUT-BETRAG AUF KEINEN FALL KURSIV ---------------------------------------------------------- */ .xoo-wsc-ft-btn-checkout, .xoo-wsc-ft-btn-checkout *, .xoo-wsc-ft-btn-checkout .amount, .xoo-wsc-ft-btn-checkout em, .xoo-wsc-ft-btn-checkout i, .xoo-wsc-ft-btn-checkout bdi { font-style: normal !important; } /* ========================================================== GFS CHECKOUT – FRACHTKOSTEN ZEILE ========================================================== */ body.woocommerce-checkout #order_review .gfs-checkout-freight-info th, body.woocommerce-checkout #order_review .gfs-checkout-freight-info td { padding: 14px 14px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; line-height: 1.4 !important; color: #111 !important; border-top: 1px solid #e4d5c3 !important; background: #f7f3ee !important; } /* Bezeichnung links */ body.woocommerce-checkout #order_review .gfs-checkout-freight-info th { font-weight: 600 !important; text-align: left !important; } /* Hinweis rechts */ body.woocommerce-checkout #order_review .gfs-checkout-freight-info td { font-weight: 500 !important; text-align: right !important; } /* nicht kursiv */ body.woocommerce-checkout #order_review .gfs-checkout-freight-info span { font-style: normal !important; } /* ========================================================== CHECKOUT – FRACHTKOSTEN IN EINER ZEILE ========================================================== */ body.woocommerce-checkout #order_review .gfs-checkout-freight-info th { width: 35% !important; white-space: nowrap !important; } body.woocommerce-checkout #order_review .gfs-checkout-freight-info td { width: 65% !important; white-space: nowrap !important; text-align: right !important; font-size: 12px !important; line-height: 1.4 !important; } /* ========================================================== KASSE – FRACHTKOSTEN GARANTIERT EINZEILIG ========================================================== */ body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info { display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; background: #f7f3ee !important; } body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info th, body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info td { display: block !important; width: auto !important; min-width: 0 !important; padding: 14px 14px !important; box-sizing: border-box !important; background: transparent !important; } body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info th { text-align: left !important; white-space: nowrap !important; } body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info td { text-align: right !important; white-space: nowrap !important; font-size: 12px !important; } body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info td span { white-space: nowrap !important; } /* ========================================================== SIDE CART – MWST. + PRODUKTNAME FINAL ========================================================== */ /* Falls "Einzelpreis" aus einer alten CSS-Regel stammt */ .xoo-wsc-product .xoo-wsc-smr-title::after, .xoo-wsc-product .xoo-wsc-pname::after, .xoo-wsc-product a::after { content: none !important; } /* MwSt.-Zeile */ .xoo-wsc-footer .gfs-sidecart-vat { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 8px 0 16px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; font-style: normal !important; color: #111 !important; } .xoo-wsc-footer .gfs-sidecart-vat *, .xoo-wsc-footer .gfs-sidecart-vat-value { font-style: normal !important; font-weight: 600 !important; } /* Kassenbutton weiterhin nicht kursiv */ .xoo-wsc-ft-btn-checkout, .xoo-wsc-ft-btn-checkout *, .xoo-wsc-ft-btn-checkout em, .xoo-wsc-ft-btn-checkout i, .xoo-wsc-ft-btn-checkout bdi, .xoo-wsc-ft-btn-checkout .amount { font-style: normal !important; } /* ========================================================== KASSE – FRACHTKOSTEN SAUBER IN EINER ZEILE ========================================================== */ body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info { display: table-row !important; } /* beide Zellen wieder normale Tabellenzellen */ body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info th, body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info td { display: table-cell !important; box-sizing: border-box !important; padding-top: 14px !important; padding-bottom: 14px !important; vertical-align: middle !important; background: #f7f3ee !important; } /* links */ body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info th { width: 42% !important; padding-left: 14px !important; padding-right: 8px !important; text-align: left !important; white-space: nowrap !important; } /* rechts */ body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info td { width: 58% !important; padding-left: 18px !important; padding-right: 14px !important; text-align: right !important; white-space: nowrap !important; font-size: 12px !important; } /* Text definitiv nicht umbrechen */ body.woocommerce-checkout #order_review tr.gfs-checkout-freight-info td span { display: inline-block !important; white-space: nowrap !important; } /* ========================================================== SIDE CART – BRUTTOPREIS KENNZEICHNEN ========================================================== */ .xoo-wsc-ft-btn-checkout::after { content: " (inkl. MwSt.)" !important; margin-left: 4px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; font-style: normal !important; } /* gesamter Button garantiert nicht kursiv */ .xoo-wsc-ft-btn-checkout, .xoo-wsc-ft-btn-checkout *, .xoo-wsc-ft-btn-checkout::after { font-style: normal !important; } /* ========================================================== SIDE CART – SCHLIESSEN-X WEITER IN DIE ECKE ========================================================== */ .xoo-wsc-close, .xoo-wsch-close { position: absolute !important; top: 10px !important; right: 10px !important; margin: 0 !important; z-index: 20 !important; } /* sicherstellen, dass der Header Bezugspunkt ist */ .xoo-wsc-header { position: relative !important; } /* ========================================================== SIDE CART – TITEL ZENTRIERT + FETT ========================================================== */ .xoo-wsc-header { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Titel */ .xoo-wsc-header .xoo-wsc-ctxt { width: 100% !important; margin: 0 !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #111 !important; } /* X bleibt unabhängig rechts oben */ .xoo-wsc-close, .xoo-wsch-close { position: absolute !important; top: 8px !important; right: 8px !important; margin: 0 !important; } /* ========================================================== SIDE CART – MELDUNGEN NUR BEI GEÖFFNETEM WARENKORB ========================================================== */ /* Sobald der Side Cart geschlossen ist: Add-to-cart / Update-Meldung vollständig ausblenden */ body:not(.xoo-wsc-cart-active):not(.xoo-wsc-active) .xoo-wsc-notice-box, body:not(.xoo-wsc-cart-active):not(.xoo-wsc-active) .xoo-wsc-notice-container, body:not(.xoo-wsc-cart-active):not(.xoo-wsc-active) .xoo-wsc-notice { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================== SIDE CART – HEADER FINAL ========================================================== */ .xoo-wsch-top { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* tatsächliche Xootix-Titelklasse */ .xoo-wsch-text { width: 100% !important; margin: 0 !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #111 !important; } /* X unabhängig rechts */ .xoo-wsch-close { position: absolute !important; top: 50% !important; right: 8px !important; transform: translateY(-50%) !important; margin: 0 !important; } /* ========================================================== SIDE CART – "ARTIKEL HINZUGEFÜGT" MELDUNG ========================================================== */ /* Container der Meldung wieder über die volle Breite */ .xoo-wsc-notice-box, .xoo-wsc-notice-container { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* eigentliche grüne Meldung */ .xoo-wsc-notice { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 14px 44px 14px 18px !important; box-sizing: border-box !important; background: #e1f1dc !important; border: 0 !important; border-left: 3px solid #4f9a48 !important; border-radius: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #3f793b !important; text-align: left !important; box-shadow: none !important; } /* Text soll nicht in so einer schmalen Spalte umbrechen */ .xoo-wsc-notice span, .xoo-wsc-notice p, .xoo-wsc-notice div { width: auto !important; max-width: none !important; margin: 0 !important; white-space: normal !important; } /* kaputtes Icon / Hieroglyphe links entfernen */ .xoo-wsc-notice::before, .xoo-wsc-notice [class*="icon"] { display: none !important; content: none !important; } /* Schließen-X der Meldung rechts oben */ .xoo-wsc-notice-box .xoo-wsc-notice-close, .xoo-wsc-notice-container .xoo-wsc-notice-close, .xoo-wsc-notice [class*="close"] { position: absolute !important; top: 50% !important; right: 14px !important; transform: translateY(-50%) !important; margin: 0 !important; color: #111 !important; font-size: 18px !important; line-height: 1 !important; cursor: pointer !important; } /* ========================================================== SIDE CART – WARENKORB-TITEL BEREINIGEN ========================================================== */ /* Titel selbst sauber darstellen */ .xoo-wsch-text, .xoo-wsc-header .xoo-wsc-ctxt { position: relative !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; font-style: normal !important; font-variant: normal !important; letter-spacing: 0 !important; text-transform: none !important; color: #111 !important; text-align: center !important; background: none !important; } /* Sämtliche alten Icon-/Pfeil-Pseudoelemente am Titel entfernen */ .xoo-wsch-text::before, .xoo-wsch-text::after, .xoo-wsc-header .xoo-wsc-ctxt::before, .xoo-wsc-header .xoo-wsc-ctxt::after { content: none !important; display: none !important; } /* Falls innerhalb des Titels noch ein Icon-Span steckt */ .xoo-wsch-text [class*="icon"], .xoo-wsch-text [class*="arrow"], .xoo-wsc-ctxt [class*="icon"], .xoo-wsc-ctxt [class*="arrow"] { display: none !important; } /* ========================================================== GFS SIDE CART – HEADER + NOTICE FINAL ========================================================== */ /* ---------------------------------------------------------- HEADER ---------------------------------------------------------- */ .xoo-wsc-header, .xoo-wsch-top { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 68px !important; box-sizing: border-box !important; } /* Warenkorb wirklich mittig */ .xoo-wsch-text, .xoo-wsc-header .xoo-wsc-ctxt { position: static !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 55px !important; box-sizing: border-box !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1.2 !important; color: #111 !important; } /* ---------------------------------------------------------- SCHLIESSEN-X FEST RECHTS ---------------------------------------------------------- */ .xoo-wsch-close, .xoo-wsc-close { position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 100 !important; font-size: 0 !important; color: transparent !important; cursor: pointer !important; } /* eigenes sauberes X */ .xoo-wsch-close::before, .xoo-wsc-close::before { content: "×" !important; display: block !important; font-family: Arial, sans-serif !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1 !important; color: #111 !important; } .xoo-wsch-close::after, .xoo-wsc-close::after { content: none !important; display: none !important; } /* ---------------------------------------------------------- GRÜNE MELDUNG ---------------------------------------------------------- */ .xoo-wsc-notice-box, .xoo-wsc-notice-container { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; z-index: 20 !important; } /* eigentliche Meldung */ .xoo-wsc-notice { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 14px 42px 14px 18px !important; box-sizing: border-box !important; background: #e2f1dc !important; border: 0 !important; border-left: 3px solid #4b9b48 !important; border-radius: 0 !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-style: normal !important; line-height: 1.4 !important; color: #397738 !important; text-align: left !important; } /* kaputtes Icon links entfernen */ .xoo-wsc-notice::before { content: none !important; display: none !important; } /* Texte innerhalb der Meldung */ .xoo-wsc-notice p, .xoo-wsc-notice span, .xoo-wsc-notice div { margin: 0 !important; font-family: "Montserrat", Arial, sans-serif !important; font-style: normal !important; color: inherit !important; } /* X der grünen Meldung */ .xoo-wsc-notice [class*="close"], .xoo-wsc-notice-box [class*="close"] { position: absolute !important; top: 50% !important; right: 14px !important; transform: translateY(-50%) !important; color: #111 !important; z-index: 5 !important; } /* ========================================================== SIDE CART – HEADER ENDGÜLTIG FIXIEREN ========================================================== */ /* Header als feste Bezugsebene */ .xoo-wsc-header, .xoo-wsch-top { position: relative !important; display: block !important; width: 100% !important; height: 68px !important; min-height: 68px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* ---------------------------------------------------------- WARENKORB EXAKT MITTIG ---------------------------------------------------------- */ .xoo-wsch-text, .xoo-wsc-header .xoo-wsc-ctxt { position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; width: auto !important; max-width: calc(100% - 120px) !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; color: #111 !important; z-index: 2 !important; } /* Keine alten Icons/Pfeile am Titel */ .xoo-wsch-text::before, .xoo-wsch-text::after, .xoo-wsc-ctxt::before, .xoo-wsc-ctxt::after { display: none !important; content: none !important; } /* ---------------------------------------------------------- SCHLIESSEN-X FEST RECHTS ---------------------------------------------------------- */ .xoo-wsch-close, .xoo-wsc-close { position: absolute !important; top: 50% !important; right: 14px !important; bottom: auto !important; left: auto !important; transform: translateY(-50%) !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; color: transparent !important; z-index: 10 !important; cursor: pointer !important; } /* eigenes sauberes X */ .xoo-wsch-close::before, .xoo-wsc-close::before { display: block !important; content: "×" !important; font-family: Arial, sans-serif !important; font-size: 25px !important; font-weight: 400 !important; line-height: 1 !important; color: #111 !important; } /* eventuell vorhandenes zweites Symbol entfernen */ .xoo-wsch-close::after, .xoo-wsc-close::after { display: none !important; content: none !important; } /* ========================================================== SIDE CART – WEISSEN REST AM RECHTEN RAND ENTFERNEN ========================================================== */ /* Geschlossen: komplette 440px aus dem Bildschirm schieben */ .xoo-wsc-container { width: 440px !important; max-width: 440px !important; right: -440px !important; /* verhindert, dass selbst der Schatten noch sichtbar bleibt */ box-shadow: none !important; } /* Geöffnet: exakt am rechten Rand */ .xoo-wsc-cart-active .xoo-wsc-container { right: 0 !important; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08) !important; } /* Mobil */ @media (max-width: 600px) { .xoo-wsc-container { width: 100vw !important; max-width: 100vw !important; right: -100vw !important; } .xoo-wsc-cart-active .xoo-wsc-container { right: 0 !important; } } /* ========================================================== SIDE CART – ZUSÄTZLICHEN EINZELPREIS ENTFERNEN ========================================================== */ .xoo-wsc-container .gfs-checkout-unit-price { display: none !important; } /* ========================================================== GFS CHECKOUT – PFLICHTFELD / VALIDIERUNGSFEHLER ========================================================== */ /* Fehlerhafte Eingabefelder */ body.woocommerce-checkout .woocommerce-invalid input.input-text, body.woocommerce-checkout .woocommerce-invalid select, body.woocommerce-checkout .woocommerce-invalid textarea { border: 2px solid #c93b3b !important; background: #fff8f8 !important; box-shadow: 0 0 0 1px rgba(201, 59, 59, 0.08) !important; } /* Select2 / Länder-Auswahl */ body.woocommerce-checkout .woocommerce-invalid .select2-selection { border: 2px solid #c93b3b !important; background: #fff8f8 !important; } /* Label eines fehlerhaften Feldes */ body.woocommerce-checkout .woocommerce-invalid label { color: #a62929 !important; font-weight: 600 !important; } /* ---------------------------------------------------------- INLINE-FEHLERMELDUNGEN ---------------------------------------------------------- */ body.woocommerce-checkout .woocommerce-invalid .woocommerce-error, body.woocommerce-checkout .woocommerce-invalid .required-field-message, body.woocommerce-checkout .woocommerce-invalid .validation-error, body.woocommerce-checkout .form-row .woocommerce-error { display: block !important; margin: 7px 0 0 !important; padding: 9px 12px !important; background: #fff1f1 !important; border-left: 3px solid #c93b3b !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #9e2424 !important; border-radius: 2px !important; } /* ---------------------------------------------------------- ALLGEMEINE WOOCOMMERCE-FEHLERMELDUNG OBEN ---------------------------------------------------------- */ body.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error, body.woocommerce-checkout .woocommerce-error { padding: 12px 16px !important; background: #fff1f1 !important; border: 1px solid #e4a5a5 !important; border-left: 4px solid #c93b3b !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; color: #8e2020 !important; list-style: none !important; } /* Fehlerpunkte / Standard-WooCommerce-Deko entfernen */ body.woocommerce-checkout .woocommerce-error::before { color: #c93b3b !important; } /* Beim erneuten Fokus etwas deutlicher */ body.woocommerce-checkout .woocommerce-invalid input:focus, body.woocommerce-checkout .woocommerce-invalid textarea:focus, body.woocommerce-checkout .woocommerce-invalid select:focus { outline: none !important; border-color: #a82929 !important; box-shadow: 0 0 0 3px rgba(201, 59, 59, 0.10) !important; } /* ========================================================== GFS CHECKOUT – FEHLERDARSTELLUNG ========================================================== */ /* Fehlerhaftes Eingabefeld */ body.woocommerce-checkout .gfs-checkout-error-field { border: 2px solid #c84444 !important; background: #fff8f8 !important; box-shadow: 0 0 0 2px rgba(200, 68, 68, 0.06) !important; } /* Fehlermeldung */ body.woocommerce-checkout .gfs-checkout-error-message { display: block !important; width: 100% !important; margin: 7px 0 14px !important; padding: 9px 12px !important; box-sizing: border-box !important; background: #fff1f1 !important; border-left: 3px solid #c84444 !important; border-radius: 2px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #9c2929 !important; } /* kleines Warnsymbol davor */ body.woocommerce-checkout .gfs-checkout-error-message::before { content: "⚠" !important; margin-right: 6px !important; font-size: 12px !important; color: #c84444 !important; } /* ========================================================== RECHNUNGSDATEN – SPEICHERN BUTTON ========================================================== */ body.woocommerce-checkout .gfs-billing-save-wrap { width: 100% !important; margin: 20px 0 6px !important; text-align: right !important; } body.woocommerce-checkout .gfs-billing-save-button { min-width: 180px !important; min-height: 46px !important; padding: 11px 26px !important; background: #c39b64 !important; color: #111111 !important; border: 1px solid #c39b64 !important; border-radius: 3px !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: background .15s ease, border-color .15s ease !important; } body.woocommerce-checkout .gfs-billing-save-button:hover { background: #b88e57 !important; border-color: #b88e57 !important; } body.woocommerce-checkout .gfs-billing-save-button:focus-visible { outline: 2px solid #111111 !important; outline-offset: 2px !important; } @media (max-width: 600px) { body.woocommerce-checkout .gfs-billing-save-button { width: 100% !important; } } /* ========================================================== RECHNUNGSDATEN – SPEICHERN BUTTON POSITION ========================================================== */ body.woocommerce-checkout .gfs-billing-save-wrap { width: 100% !important; margin: 22px 0 4px !important; display: flex !important; justify-content: flex-end !important; } body.woocommerce-checkout .gfs-billing-save-button { min-width: 180px !important; } /* ========================================================== RECHNUNGSDATEN – SPEICHERN UNTER E-MAIL ========================================================== */ body.woocommerce-checkout .gfs-billing-save-wrap { width: 100% !important; margin: 18px 0 24px !important; display: flex !important; justify-content: flex-end !important; clear: both !important; /* falls WooCommerce mit Flex-/Order-Werten arbeitet */ order: 99999 !important; } body.woocommerce-checkout .gfs-billing-save-button { min-width: 180px !important; min-height: 46px !important; padding: 11px 26px !important; background: #c39b64 !important; border: 1px solid #c39b64 !important; border-radius: 3px !important; color: #111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; } body.woocommerce-checkout .gfs-billing-save-button:hover { background: #b88e57 !important; border-color: #b88e57 !important; } @media (max-width: 600px) { body.woocommerce-checkout .gfs-billing-save-button { width: 100% !important; } } /* ========================================================== THANK YOU / BESTELLANFRAGE ERFOLGREICH ========================================================== */ body.woocommerce-order-received .woocommerce-notice, body.woocommerce-order-received .woocommerce-thankyou-order-received { display: block !important; margin: 0 0 32px 0 !important; padding: 22px 26px !important; background: #f3efe8 !important; border: 1px solid #c39b64 !important; border-left: 5px solid #c39b64 !important; border-radius: 4px !important; color: #111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 18px !important; line-height: 1.6 !important; font-weight: 500 !important; box-sizing: border-box !important; } /* Falls du den ersten Satz noch stärker hervorheben willst */ body.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 22px !important; font-weight: 700 !important; letter-spacing: 0 !important; } /* Optional: etwas mehr Luft zum restlichen Inhalt */ body.woocommerce-order-received .woocommerce-order { margin-top: 10px !important; } body.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 18px !important; font-weight: 600 !important; line-height: 1.6 !important; } /* ========================================================== GFS – BESTELLDETAILS Lange Hinweise umbrechen, Bezeichnungen NICHT trennen ========================================================== */ /* * Linke Bezeichnungsspalte: * MwSt., Lieferung, Anmerkung usw. * * Niemals mitten im Wort umbrechen. */ .woocommerce-order-details table.shop_table tfoot th { white-space: nowrap !important; overflow-wrap: normal !important; word-wrap: normal !important; word-break: normal !important; width: 1% !important; min-width: 100px !important; vertical-align: middle !important; } /* * Rechte Wertespalte: * Hier dürfen sehr lange Hinweise umgebrochen werden, * damit sie die Tabelle nicht auseinanderziehen. */ .woocommerce-order-details table.shop_table tfoot td { white-space: normal !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; word-break: break-word !important; max-width: 100% !important; vertical-align: middle !important; } /* * Tabelle soll ihre Spalten natürlich verteilen. */ .woocommerce-order-details table.shop_table { table-layout: auto !important; } /* ========================================================== CHECKOUT – SPEDITIONSFEHLER ========================================================== */ body.woocommerce-checkout .gfs-shipping-rule-errors { margin: 0 0 18px !important; padding: 13px 16px !important; background: #fff3f3 !important; border: 1px solid #df9b9b !important; border-left: 4px solid #c84444 !important; border-radius: 2px !important; list-style: none !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; } /* ========================================================== GFS SIDE CART – ARTIKEL KOMPAKT FINAL ========================================================== */ /* ---------------------------------------------------------- KOMPLETTER ARTIKELBLOCK ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-product { min-height: 0 !important; height: auto !important; padding: 10px 18px !important; margin: 0 !important; border-bottom: 1px solid #ead8c1 !important; } /* ---------------------------------------------------------- INNERER PRODUKT-INHALT ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-sm-info, .xoo-wsc-container .xoo-wsc-sm-left, .xoo-wsc-container .xoo-wsc-sm-right { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ---------------------------------------------------------- PRODUKTNAME ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-pname, .xoo-wsc-container .xoo-wsc-pname a { margin: 0 0 4px 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 700 !important; } /* ---------------------------------------------------------- VARIANTE / AUSFÜHRUNG ---------------------------------------------------------- */ .xoo-wsc-container dl.variation, .xoo-wsc-container .variation, .xoo-wsc-container .xoo-wsc-variation { margin: 0 0 5px 0 !important; padding: 0 !important; font-size: 12.5px !important; line-height: 1.25 !important; } .xoo-wsc-container dl.variation dt, .xoo-wsc-container dl.variation dd { display: inline !important; margin: 0 !important; padding: 0 !important; } .xoo-wsc-container dl.variation dd p { display: inline !important; margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- EINZELPREIS ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-pprice, .xoo-wsc-container .xoo-wsc-price { margin: 0 0 6px 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.25 !important; } /* ---------------------------------------------------------- MENGE + GESAMTPREIS ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-qty-price { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 5px 0 0 0 !important; padding: 0 !important; min-height: 32px !important; } /* ---------------------------------------------------------- MENGENWAHL ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-qty { margin: 0 !important; padding: 0 !important; } .xoo-wsc-container .xoo-wsc-qty-box { margin: 0 !important; padding: 0 !important; } .xoo-wsc-container .xoo-wsc-qty-box, .xoo-wsc-container .xoo-wsc-qty-box input, .xoo-wsc-container .xoo-wsc-qty-box span, .xoo-wsc-container .xoo-wsc-qty-box button { height: 30px !important; min-height: 30px !important; line-height: 28px !important; } .xoo-wsc-container .xoo-wsc-qty-box input { width: 34px !important; padding: 0 !important; text-align: center !important; font-size: 13px !important; } .xoo-wsc-container .xoo-wsc-qty-box span, .xoo-wsc-container .xoo-wsc-qty-box button { width: 28px !important; min-width: 28px !important; padding: 0 !important; font-size: 14px !important; } /* ---------------------------------------------------------- GESAMTPREIS RECHTS ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-qty-price .amount, .xoo-wsc-container .xoo-wsc-sm-right .amount { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 700 !important; } /* ---------------------------------------------------------- LÖSCHEN-X ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-smr-del, .xoo-wsc-container .xoo-wsc-remove { top: 8px !important; right: 8px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* ---------------------------------------------------------- ALLE INNEREN STANDARDABSTÄNDE REDUZIEREN ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-product p { margin-top: 0 !important; margin-bottom: 4px !important; } .xoo-wsc-container .xoo-wsc-product br { line-height: 1 !important; } /* ---------------------------------------------------------- FOOTER NICHT VERÄNDERN ---------------------------------------------------------- */ .xoo-wsc-container .xoo-wsc-footer { flex-shrink: 0 !important; } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 767px) { .xoo-wsc-container .xoo-wsc-product { padding: 9px 14px !important; } .xoo-wsc-container .xoo-wsc-pname, .xoo-wsc-container .xoo-wsc-pname a { font-size: 14.5px !important; } .xoo-wsc-container dl.variation, .xoo-wsc-container .variation, .xoo-wsc-container .xoo-wsc-variation { font-size: 12px !important; } } /* ========================================================== GFS SIDE CART – FOOTER KOMPAKT FINAL V2 Gemessen am tatsächlichen Xootix-Markup ========================================================== */ /* ---------------------------------------------------------- FOOTER SELBST ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px 20px 8px !important; display: block !important; } /* ---------------------------------------------------------- SUMMENBEREICH ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer .xoo-wsc-ft-totals { height: auto !important; min-height: 0 !important; margin: 0 0 6px 0 !important; padding: 0 !important; } /* Summe-Zeile */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer .xoo-wsc-ft-amt-subtotal { height: 30px !important; min-height: 30px !important; max-height: 30px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; line-height: 30px !important; } /* Label + Wert */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer .xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-label, html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer .xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-value { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 30px !important; } /* ---------------------------------------------------------- BUTTON-CONTAINER ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer .xoo-wsc-ft-buttons-cont { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; } /* ---------------------------------------------------------- ALLE 3 BUTTONS: Plugin-Padding und Mindesthöhe hart neutralisieren ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn.xoo-wsc-btn { box-sizing: border-box !important; width: 100% !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; overflow: hidden !important; } /* ---------------------------------------------------------- ZUR KASSE ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer a.xoo-wsc-ft-btn-checkout { order: 1 !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; flex: 0 0 38px !important; padding-left: 12px !important; padding-right: 12px !important; line-height: 38px !important; } /* Inhalt im Checkout-Button */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer a.xoo-wsc-ft-btn-checkout * { line-height: 1 !important; } /* ---------------------------------------------------------- WARENKORB ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer a.xoo-wsc-ft-btn-cart { order: 2 !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; flex: 0 0 36px !important; padding-left: 12px !important; padding-right: 12px !important; line-height: 36px !important; } /* ---------------------------------------------------------- EINKAUF FORTSETZEN ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer a.xoo-wsc-ft-btn-continue { order: 3 !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; flex: 0 0 26px !important; margin: 0 !important; padding: 0 8px !important; line-height: 26px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 13px !important; } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 767px) { html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer { padding: 7px 14px !important; } } /* ========================================================== GFS SIDE CART – LETZTER FEINSCHLIFF ========================================================== */ /* ---------------------------------------------------------- EINZELPREIS UNTER DEM ARTIKEL ETWAS KLEINER ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pprice, html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-price { font-size: 12px !important; line-height: 1.2 !important; margin-top: 0 !important; margin-bottom: 5px !important; } /* Auch Preisbetrag selbst kleiner */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pprice .woocommerce-Price-amount, html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-price .woocommerce-Price-amount { font-size: 13px !important; line-height: 1.2 !important; } /* ---------------------------------------------------------- "EINKAUF FORTSETZEN" wieder etwas mehr Luft geben ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-footer a.xoo-wsc-ft-btn-continue { height: 32px !important; min-height: 32px !important; max-height: 32px !important; flex: 0 0 32px !important; margin-top: 2px !important; margin-bottom: 2px !important; padding: 0 8px !important; line-height: 32px !important; font-size: 13px !important; } /* ========================================================== PRODUKTSEITE / PRODUKTBOXEN – FELDER & BESCHRIFTUNGEN ========================================================== */ /* 1) Labels wie "Größe" und "VE" schwarz */ .woocommerce div.product form.cart .variations label, .woocommerce-page div.product form.cart .variations label, .single-product .variations label { color: #000 !important; opacity: 1 !important; font-weight: 600 !important; } /* 2) Dropdown-Felder auf Produktseiten weiß + schwarze Schrift */ .woocommerce div.product form.cart .variations select, .woocommerce-page div.product form.cart .variations select, .single-product .variations select { background: #ffffff !important; color: #000000 !important; border: 1px solid #d9d9d9 !important; border-radius: 2px !important; box-shadow: none !important; } /* Auch die Platzhalter-/Optionen schwarz */ .woocommerce div.product form.cart .variations select option, .woocommerce-page div.product form.cart .variations select option, .single-product .variations select option { color: #000000 !important; background: #ffffff !important; } /* 3) Mengenfeld auf Produktseite weiß + schwarze Schrift */ .woocommerce div.product form.cart input.qty, .woocommerce-page div.product form.cart input.qty, .single-product form.cart input.qty { background: #ffffff !important; color: #000000 !important; border: 1px solid #d9d9d9 !important; border-radius: 2px !important; box-shadow: none !important; text-align: center !important; font-weight: 500 !important; } /* ========================================================== PRODUKTBOXEN / SHOP-ÜBERSICHT – MENGENFELD SCHÖNER ========================================================== */ /* Mengenfeld in Produktkarten weiß + schwarze Schrift */ .woocommerce ul.products li.product input.qty, .woocommerce-page ul.products li.product input.qty, .woocommerce ul.products li.product .quantity input.qty, .woocommerce-page ul.products li.product .quantity input.qty { background: #ffffff !important; color: #000000 !important; border: 1px solid #d9d9d9 !important; border-radius: 2px !important; box-shadow: none !important; text-align: center !important; font-size: 18px !important; font-weight: 500 !important; min-height: 40px !important; height: 40px !important; padding: 6px 10px !important; } /* Container vom Mengenfeld in den Produktboxen */ .woocommerce ul.products li.product .quantity, .woocommerce-page ul.products li.product .quantity { margin: 0 !important; } /* Breite des Mengenfelds in Produktboxen */ .woocommerce ul.products li.product .quantity input.qty, .woocommerce-page ul.products li.product .quantity input.qty { width: 90px !important; min-width: 90px !important; } /* Falls die Pfeile im Mengenfeld grau/blass sind */ .woocommerce ul.products li.product input.qty::-webkit-outer-spin-button, .woocommerce ul.products li.product input.qty::-webkit-inner-spin-button, .single-product input.qty::-webkit-outer-spin-button, .single-product input.qty::-webkit-inner-spin-button { opacity: 1 !important; } /* ========================================================== OPTIONAL: SELECT2 / THEME-STYLING ABFANGEN Falls das Theme eigene Select-Darstellung nutzt ========================================================== */ .select2-container--default .select2-selection--single { background: #ffffff !important; color: #000000 !important; border: 1px solid #d9d9d9 !important; border-radius: 2px !important; min-height: 42px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #000000 !important; line-height: 42px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: #000000 !important; } /* Produktkarten – Mengenfeld kompakter */ .woocommerce ul.products li.product .quantity input.qty, .woocommerce-page ul.products li.product .quantity input.qty { width: 78px !important; min-width: 78px !important; font-size: 16px !important; min-height: 38px !important; height: 38px !important; } /* ========================================================== UNSERE HISTORIE – EINZELNES LOGO ENTFERNEN Seite 3086 / Bild 3295 ========================================================== */ body.page-id-3086 img.wp-image-3295 { display: none !important; } /* Parent-Figure ebenfalls ohne Restabstand */ body.page-id-3086 figure.wp-block-image:has(img.wp-image-3295) { display: none !important; } /* ========================================================== ÜBER UNS – HISTORIE BILDERBEREICH BEIGE ========================================================== */ body.page-id-3086 .wp-block-kadence-rowlayout { background-color: #c3a174 !important; } /* ========================================================== GFS SIDE CART – KOMPAKTER FEINSCHLIFF ========================================================== */ /* ---------------------------------------------------------- 1. ARTIKELKACHELN DEUTLICH KOMPAKTER ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product { padding: 6px 14px !important; min-height: 0 !important; height: auto !important; } /* Produktname */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pname, html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pname a { font-size: 14px !important; line-height: 1.15 !important; margin: 0 0 2px 0 !important; } /* Variante / VE */ html body .xoo-wsc-container .xoo-wsc-product dl.variation, html body .xoo-wsc-container .xoo-wsc-product .variation, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-variation { font-size: 11.5px !important; line-height: 1.15 !important; margin: 0 0 3px 0 !important; } /* Einzelpreis */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pprice, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-price { font-size: 11px !important; line-height: 1.1 !important; margin: 0 0 2px 0 !important; } /* ---------------------------------------------------------- 2. MENGENFELD KLEINER ---------------------------------------------------------- */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty { margin-top: 2px !important; } html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box input, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box span, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box button { height: 25px !important; min-height: 25px !important; line-height: 23px !important; } html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box input { width: 29px !important; font-size: 11.5px !important; } html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box span, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box button { width: 23px !important; min-width: 23px !important; } /* ---------------------------------------------------------- 3. ERSPARNIS-BADGE KLEINER, ABER WEITERHIN KLAR GRÜN ---------------------------------------------------------- */ html body .xoo-wsc-container .gfs-item-saving { margin: 0 0 3px auto !important; padding: 3px 6px !important; background: #eff9f1 !important; border: 1px solid #24963f !important; border-radius: 4px !important; color: #167532 !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.1 !important; text-transform: none !important; box-shadow: none !important; } html body .xoo-wsc-container .gfs-item-saving span { font-size: 10.5px !important; font-weight: 700 !important; text-transform: none !important; } html body .xoo-wsc-container .gfs-item-saving strong { margin-left: 3px !important; font-size: 13px !important; font-weight: 800 !important; color: #148632 !important; text-transform: none !important; } /* ---------------------------------------------------------- 4. ARTIKEL-GESAMTPREIS ETWAS KOMPAKTER ---------------------------------------------------------- */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-right .woocommerce-Price-amount, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-line-total .woocommerce-Price-amount { font-size: 14px !important; line-height: 1.1 !important; } /* Rechter Bereich insgesamt enger */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-right { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ---------------------------------------------------------- 5. LÖSCHEN-X GRÖSSER UND DEUTLICHER ---------------------------------------------------------- */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-smr-del, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-remove { top: 7px !important; right: 8px !important; width: 22px !important; height: 22px !important; font-size: 18px !important; line-height: 20px !important; font-weight: 700 !important; color: #111111 !important; opacity: 1 !important; cursor: pointer !important; } /* Falls das X selbst in einem Kind-Element sitzt */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-smr-del *, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-remove * { font-size: 18px !important; color: #111111 !important; opacity: 1 !important; } /* ========================================================== GFS SIDE CART – ARTIKELKACHELN NOCH KOMPAKTER ========================================================== */ /* Gesamte Produkt-Kachel enger */ html body .xoo-wsc-container .xoo-wsc-product { padding: 8px 14px !important; margin: 0 !important; min-height: auto !important; } /* Abstand unter jeder Kachel verkleinern */ html body .xoo-wsc-container .xoo-wsc-products, html body .xoo-wsc-container .xoo-wsc-basket { gap: 0 !important; } /* Produktname kompakter */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pname, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pname a { font-size: 13px !important; line-height: 1.15 !important; margin: 0 0 3px 0 !important; padding: 0 !important; } /* Variation / VE enger */ html body .xoo-wsc-container .xoo-wsc-product dl.variation, html body .xoo-wsc-container .xoo-wsc-product .variation, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-variation { margin: 0 0 4px 0 !important; padding: 0 !important; line-height: 1.15 !important; font-size: 11.5px !important; } /* Einzelpreis enger */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pprice, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-price { margin: 0 0 4px 0 !important; padding: 0 !important; line-height: 1.1 !important; font-size: 11.5px !important; color: #111111 !important; } /* Mengenbox näher an den Rest */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty { margin-top: 2px !important; margin-bottom: 0 !important; } /* Mengenfeld insgesamt kleiner */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box input, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box button, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box span { height: 24px !important; min-height: 24px !important; line-height: 22px !important; } html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box input { width: 30px !important; font-size: 11px !important; } html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box button, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-qty-box span { width: 22px !important; min-width: 22px !important; font-size: 11px !important; } /* Rechter Bereich kompakter */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-right { padding-top: 0 !important; padding-bottom: 0 !important; } /* Ersparnis etwas näher an Preis */ html body .xoo-wsc-container .gfs-item-saving { margin: 2px 0 2px auto !important; } /* Gesamtpreis rechts kompakter */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-right .woocommerce-Price-amount, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-line-total .woocommerce-Price-amount { font-size: 13px !important; line-height: 1.1 !important; } /* Trennlinie unter jedem Artikel etwas enger */ html body .xoo-wsc-container .xoo-wsc-product:after, html body .xoo-wsc-container .xoo-wsc-product::after { margin-top: 6px !important; } /* ========================================================== GFS SIDE CART – PRODUKTKACHELN ECHT KOMPAKT Links Produktinfos / rechts Ersparnis + Gesamtpreis ========================================================== */ /* ---------------------------------------------------------- HAUPTINHALT DES ARTIKELS ALS 2-SPALTEN-LAYOUT ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-info { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 10px !important; align-items: end !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- LINKER BEREICH Name / VE / Preis / Menge ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-left { grid-column: 1 !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- RECHTER BEREICH Ersparnis + Gesamtpreis ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-right { grid-column: 2 !important; width: auto !important; min-width: 110px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 1px 0 !important; align-self: end !important; text-align: right !important; } /* ---------------------------------------------------------- ÄUSSERE PRODUKTZEILE AUCH NICHT MEHR AUFBLÄHEN ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-row { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- PRODUKTKACHEL SELBST ---------------------------------------------------------- */ html body .xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container .xoo-wsc-product { height: auto !important; min-height: 0 !important; padding: 7px 14px !important; margin: 0 !important; } /* ---------------------------------------------------------- ERSPARNIS RECHTS KOMPAKT ---------------------------------------------------------- */ html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving { margin: 0 0 5px auto !important; padding: 3px 6px !important; width: max-content !important; font-size: 10.5px !important; line-height: 1.1 !important; } html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving strong { font-size: 13px !important; line-height: 1 !important; } /* ---------------------------------------------------------- GESAMTPREIS DIREKT UNTER DER ERSPARNIS ---------------------------------------------------------- */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-right .woocommerce-Price-amount { display: block !important; margin: 0 !important; font-size: 14px !important; line-height: 1.1 !important; color: #111111 !important; font-weight: 700 !important; } /* ---------------------------------------------------------- LINKEN BEREICH NOCH ETWAS ENGER ---------------------------------------------------------- */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pname { margin-bottom: 3px !important; } html body .xoo-wsc-container .xoo-wsc-product dl.variation { margin-bottom: 3px !important; } html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pprice { margin-bottom: 3px !important; } /* ---------------------------------------------------------- LÖSCHEN-X BLEIBT PRÄSENT ---------------------------------------------------------- */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-smr-del, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-remove { font-size: 18px !important; font-weight: 700 !important; color: #111111 !important; opacity: 1 !important; } /* ========================================================== GFS SIDE CART – ERSPARNIS BADGE NOCH KLEINER ========================================================== */ html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving { padding: 2px 5px !important; font-size: 9.5px !important; line-height: 1.05 !important; border-width: 1px !important; border-radius: 4px !important; margin-bottom: 3px !important; } html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving span { font-size: 9.5px !important; line-height: 1.05 !important; } html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving strong { margin-left: 2px !important; font-size: 12px !important; line-height: 1 !important; } /* ========================================================== GFS SIDE CART – ERSPARNISBETRAG NORMAL / DÜNN ========================================================== */ /* Betrag selbst */ html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving strong, html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving strong *, html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving .woocommerce-Price-amount, html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving .woocommerce-Price-amount *, html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving bdi { font-weight: 400 !important; } /* "Ersparnis" darf weiterhin etwas kräftiger bleiben */ html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving > span:first-child { font-weight: 700 !important; } /* ========================================================== GFS SIDE CART – ERSPARNISBETRAG ETWAS KLEINER ========================================================== */ html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving strong, html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving strong *, html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving .woocommerce-Price-amount, html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving .woocommerce-Price-amount *, html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving bdi { font-size: 11px !important; font-weight: 400 !important; } /* ========================================================== GFS SIDE CART – MOBILE FEINSCHLIFF ========================================================== */ @media (max-width: 767px) { /* Artikel etwas weniger seitlichen Platz verschwenden */ html body .xoo-wsc-container .xoo-wsc-product { padding: 7px 10px !important; } /* Linke Infos + rechter Preisbereich weiterhin nebeneinander, aber mit kleinerem Abstand */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-info { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 6px !important; } /* Produktname */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pname, html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-pname a { font-size: 13px !important; } /* VE / Variante */ html body .xoo-wsc-container .xoo-wsc-product dl.variation { font-size: 11px !important; } /* Rechter Bereich nicht unnötig breit */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-right { min-width: 78px !important; } /* Ersparnis kompakt halten */ html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving { padding: 2px 4px !important; font-size: 9px !important; } html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving span { font-size: 9px !important; } html body .xoo-wsc-container .xoo-wsc-product .gfs-item-saving strong { font-size: 10px !important; font-weight: 400 !important; } /* Artikelpreis rechts */ html body .xoo-wsc-container .xoo-wsc-product .xoo-wsc-sm-right .woocommerce-Price-amount { font-size: 13px !important; } /* Footer etwas platzsparender */ html body .xoo-wsc-container .xoo-wsc-footer { padding-left: 10px !important; padding-right: 10px !important; } } /* ========================================================== BESTELLBESTÄTIGUNG – VARIATIONEN / GRÖSSE NORMALISIEREN ========================================================== */ body.woocommerce-order-received .woocommerce-table--order-details td.product-name dl.variation, body.woocommerce-order-received .woocommerce-table--order-details td.product-name dl.variation dt, body.woocommerce-order-received .woocommerce-table--order-details td.product-name dl.variation dd, body.woocommerce-order-received .woocommerce-table--order-details td.product-name dl.variation dd p { font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; } /* "Größe:" etwas hervorheben, aber nicht riesig */ body.woocommerce-order-received .woocommerce-table--order-details td.product-name dl.variation dt { font-weight: 600 !important; margin: 0 4px 0 0 !important; padding: 0 !important; width: auto !important; } /* Gewählte Option normal */ body.woocommerce-order-received .woocommerce-table--order-details td.product-name dl.variation dd, body.woocommerce-order-received .woocommerce-table--order-details td.product-name dl.variation dd p { font-weight: 400 !important; margin: 0 !important; padding: 0 !important; width: auto !important; } /* ========================================================== GFS BESTELLDETAILS – PRODUKTVARIANTEN KOMPAKT Bestellbestätigung + Mein Konto ========================================================== */ body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta, body.woocommerce-account .woocommerce-table--order-details .wc-item-meta { margin: 3px 0 0 !important; padding: 0 !important; list-style: none !important; font-size: 13px !important; line-height: 1.3 !important; } /* Eine Variante möglichst in EINER Zeile */ body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li, body.woocommerce-account .woocommerce-table--order-details .wc-item-meta li { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 0 4px !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.3 !important; } /* "Größe:" */ body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta .wc-item-meta-label, body.woocommerce-account .woocommerce-table--order-details .wc-item-meta .wc-item-meta-label { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 600 !important; } /* Gewählte Größe */ body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta p, body.woocommerce-account .woocommerce-table--order-details .wc-item-meta p { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 400 !important; } /* Eventuelle Listenpunkte entfernen */ body.woocommerce-order-received .woocommerce-table--order-details .wc-item-meta li::before, body.woocommerce-account .woocommerce-table--order-details .wc-item-meta li::before { display: none !important; } /* ========================================================== MEIN KONTO – NACH LETZTEM ARTIKEL KEINE TRENNSTRICHE MEHR ========================================================== */ /* Keine Linie unter dem letzten Produkt */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tbody tr:last-child td { border-bottom: 0 !important; } /* MwSt., Lieferung, Anmerkung usw. ohne Trennlinien */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot th, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot td { border-top: 0 !important; border-bottom: 0 !important; } /* ========================================================== MEIN KONTO – LETZTE LINIE NACH DEN ARTIKELN ========================================================== */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tbody tr:last-child > td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tbody tr:last-child > th { border-bottom: 1px solid #d2dbe5 !important; } /* ========================================================== GFS BESTELLDETAILS – TRENNLINIEN UNTEN FINAL - Eine letzte Linie nach dem letzten Artikel / vor MwSt. - Keine Linien zwischen MwSt., Lieferung und Anmerkung - Mehr Abstand vor Anmerkung ========================================================== */ /* ---------------------------------------------------------- Alle Linien im Summen-/Infobereich entfernen ---------------------------------------------------------- */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr th, body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr th, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr td { border-top: 0 !important; border-bottom: 0 !important; } /* ---------------------------------------------------------- NUR eine Linie direkt vor MwSt. ---------------------------------------------------------- */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child th, body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child th, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child td { border-top: 1px solid #d2dbe5 !important; } /* ---------------------------------------------------------- MWST UND LIEFERUNG NORMAL KOMPAKT ---------------------------------------------------------- */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:not(:last-child) th, body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:not(:last-child) td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:not(:last-child) th, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:not(:last-child) td { padding-top: 8px !important; padding-bottom: 8px !important; } /* ---------------------------------------------------------- ANMERKUNG – MEHR ABSTAND NACH OBEN ---------------------------------------------------------- */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child th, body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child th, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td { padding-top: 20px !important; padding-bottom: 6px !important; border-top: 0 !important; border-bottom: 0 !important; } /* ========================================================== GFS BESTELLDETAILS – ANMERKUNG SAUBER ALS INFOBOX ========================================================== */ /* Mehr Abstand nach Lieferung / Abholung */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child th, body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child th, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td { padding-top: 18px !important; } /* Label "Anmerkung:" bleibt außerhalb der Box */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child th, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child th { border: 0 !important; padding-right: 16px !important; vertical-align: top !important; } /* Nur Textbereich als beige Box */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td { border: 1px solid #c3a174 !important; border-radius: 4px !important; padding: 12px 14px !important; vertical-align: top !important; background: #fffdf9 !important; text-align: left !important; line-height: 1.5 !important; } /* Innere Texte ohne zusätzliche Abstände */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td p, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td p { margin-top: 0 !important; } /* ========================================================== GFS BESTELLDETAILS – ANMERKUNG WIRKLICH KOMPAKTER ========================================================== */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td { padding: 8px 12px !important; line-height: 1.35 !important; } /* Alle inneren Absätze deutlich enger */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td p, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td p { margin: 0 0 3px 0 !important; line-height: 1.35 !important; } /* Leerzeilen innerhalb der Anmerkung verkleinern */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td br, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td br { line-height: 0.7 !important; } /* Letzter Absatz ohne Zusatzabstand */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td p:last-child, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td p:last-child { margin-bottom: 0 !important; } /* ========================================================== GFS – ANMERKUNGSBOX DOPPELTE LEERZEILEN REDUZIEREN ========================================================== */ /* Bei zwei aufeinanderfolgenden Umbrüchen den zweiten ausblenden */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td br + br, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td br + br { display: none !important; } /* Text insgesamt etwas kompakter */ body.woocommerce-order-received .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td { padding: 8px 12px !important; line-height: 1.3 !important; } /* ========================================================== GFS MEIN KONTO – ADRESSBOXEN BEIGER RAHMEN ========================================================== */ /* ---------------------------------------------------------- Rechnungs- und Lieferadresse mit beigem Rahmen ---------------------------------------------------------- */ body.woocommerce-account .woocommerce-customer-details address { border: 1px solid #c3a174 !important; border-radius: 4px !important; background: #fffdfa !important; } /* Überschriften unverändert sauber schwarz */ body.woocommerce-account .woocommerce-customer-details .woocommerce-column__title { color: #111111 !important; } /* ========================================================== GFS – BESTELLDETAILS FINAL: Lieferzeile ohne Rahmen / Anmerkung mit Box ========================================================== */ /* Footer-/Infozeilen grundsätzlich OHNE Box */ .woocommerce-order-details table.woocommerce-table--order-details tfoot th, .woocommerce-order-details table.woocommerce-table--order-details tfoot td { border-left: 0 !important; border-right: 0 !important; background: transparent !important; } /* Insbesondere Lieferung niemals als Box darstellen */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:not(:has(td[colspan="2"])) td { border: 0 !important; background: transparent !important; } /* Nur die echte Anmerkungszelle mit colspan="2" als Box */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan="2"]) td[colspan="2"] { border: 1px solid #d4bc9a !important; border-radius: 4px !important; background: #fffdfa !important; padding: 8px 12px !important; text-align: left !important; line-height: 1.3 !important; } /* Leerzeilen in der Anmerkung weiterhin kompakt */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan="2"]) td[colspan="2"] br + br { display: none !important; } /* ========================================================== GFS – BESTELLDETAILS PRODUKTLINKS + TRENNLINIEN DESKTOP UND MOBIL ========================================================== */ /* ---------------------------------------------------------- Produktnamen beige und als Link erkennbar ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details td.woocommerce-table__product-name.product-name > a { color: #bd966c !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: #bd966c !important; text-underline-offset: 2px !important; } /* Hover / Tastaturfokus etwas dunkler */ .woocommerce-order-details table.woocommerce-table--order-details td.woocommerce-table__product-name.product-name > a:hover, .woocommerce-order-details table.woocommerce-table--order-details td.woocommerce-table__product-name.product-name > a:focus { color: #8f6842 !important; text-decoration-color: #8f6842 !important; } /* ---------------------------------------------------------- Kopfzeile – beige Linie ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details thead th { border-bottom: 1px solid rgba(189,150,108,.50) !important; border-color: rgba(189,150,108,.50) !important; } /* ---------------------------------------------------------- Produktzeilen – graue Linien durch beige ersetzen ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details tbody td { border-bottom: 1px solid rgba(189,150,108,.45) !important; border-color: rgba(189,150,108,.45) !important; } /* letzte Produktzeile ebenfalls sauber */ .woocommerce-order-details table.woocommerce-table--order-details tbody tr:last-child td { border-bottom: 1px solid rgba(189,150,108,.45) !important; } /* ========================================================== GFS BESTELLDETAILS – FOOTER / ANMERKUNG FINAL ========================================================== */ /* ---------------------------------------------------------- 1. ALLE INFOZEILEN GRUNDSÄTZLICH OHNE RAHMEN ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr th, .woocommerce-order-details table.woocommerce-table--order-details tfoot tr td { border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; } /* ---------------------------------------------------------- 2. EINE TRENNLINIE VOR MWST. ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child th, .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child td { border-top: 1px solid #d2dbe5 !important; } /* ---------------------------------------------------------- 3. MWST. + LIEFERUNG NORMAL UND KOMPAKT ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:not(:has(td[colspan="2"])) th, .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:not(:has(td[colspan="2"])) td { padding-top: 8px !important; padding-bottom: 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important; } /* Trennlinie vor MwSt. trotz obiger Neutralisierung */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child th, .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child td { border-top: 1px solid #d2dbe5 !important; } /* ---------------------------------------------------------- 4. NUR ECHTE ANMERKUNG MIT COLSPAN=2 ALS BEIGE BOX ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan="2"]) td[colspan="2"] { border: 1px solid #d4bc9a !important; border-radius: 4px !important; background: #fffdfa !important; padding: 8px 12px !important; text-align: left !important; line-height: 1.3 !important; } /* Label "Anmerkung:" bleibt außerhalb der Box */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan="2"]) th { border: 0 !important; background: transparent !important; padding-top: 18px !important; padding-right: 16px !important; vertical-align: top !important; } /* Etwas Abstand vor der Anmerkungsbox */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan="2"]) td[colspan="2"] { position: relative !important; top: 10px !important; } /* Doppelte Leerzeilen kompakter */ .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan="2"]) td[colspan="2"] br + br { display: none !important; } /* ========================================================== GFS – FINAL FIX LIEFERUNG + BUTTON ========================================================== */ /* ---------------------------------------------------------- 1. LIEFERUNG / ABHOLUNG: Die 2. tfoot-Zeile darf NIEMALS einen Rahmen bekommen ---------------------------------------------------------- */ html body .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:nth-child(2) th, html body .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:nth-child(2) td { border: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; } /* ---------------------------------------------------------- 2. "BESTELLANFRAGE WIEDERHOLEN" sichtbar fett erzwingen ---------------------------------------------------------- */ html body p.order-again > a.button { font-family: "Montserrat", Arial, sans-serif !important; font-weight: 700 !important; font-synthesis: weight !important; /* sichtbare Verstärkung, falls das Theme nur den Regular-Font lädt */ text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor !important; } /* ========================================================== GFS – BESTELLBESTÄTIGUNG ADRESSBOXEN BEIGE ========================================================== */ body.woocommerce-order-received .woocommerce-customer-details address { border: 1px solid #c3a174 !important; border-radius: 4px !important; background: #fffdfa !important; } /* ========================================================== ÜBER UNS – PINKES HISTORIENBILD WEISSEN SCHNIPSEL LINKS UNTEN ABSCHNEIDEN ========================================================== */ body.page-id-3086 figure:has(img.wp-image-4453) { width: 332px !important; max-width: 100% !important; aspect-ratio: 332 / 470 !important; overflow: hidden !important; } /* Bild minimal vergrößern, dabei oben rechts festhalten. Dadurch werden links einige Pixel abgeschnitten. */ body.page-id-3086 figure:has(img.wp-image-4453) img.wp-image-4453 { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.025) !important; transform-origin: top right !important; } /* Button sauber unter Passwort wiederholen */ body.woocommerce-checkout .gfs-create-account-action { display: block !important; width: 100% !important; margin-top: 18px !important; margin-bottom: 2px !important; } /* ========================================================== GFS – SCHNELLSUCHE FINAL Nur Bild + Artikelname ========================================================== */ /* ---------------------------------------------------------- PREIS + MWST. KOMPLETT AUSBLENDEN ---------------------------------------------------------- */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-meta, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-sp, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .woocommerce-Price-amount, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .woocommerce-price-suffix { display: none !important; } /* ---------------------------------------------------------- EINZELNE TREFFERZEILE KOMPAKTER ---------------------------------------------------------- */ .dgwt-wcas-suggestions-wrapp a.dgwt-wcas-suggestion-product { min-height: 0 !important; height: auto !important; padding-top: 6px !important; padding-bottom: 6px !important; align-items: center !important; } /* ---------------------------------------------------------- PRODUKTBILD KLEINER ---------------------------------------------------------- */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-si { width: 40px !important; min-width: 40px !important; margin-right: 10px !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-si img { width: 38px !important; height: 38px !important; max-width: 38px !important; max-height: 38px !important; object-fit: contain !important; } /* ---------------------------------------------------------- TEXTBEREICH DARF DIE FREIE BREITE NUTZEN ---------------------------------------------------------- */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-content-wrapp { flex: 1 1 auto !important; width: auto !important; padding-right: 4px !important; } /* ---------------------------------------------------------- ARTIKELNAME KOMPAKT ---------------------------------------------------------- */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product .dgwt-wcas-st { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.25 !important; color: #111111 !important; } /* ========================================================== GFS – BESTELLDETAILS BREITE / LANGE ANMERKUNGEN FINAL ========================================================== */ /* Bestellbereich darf niemals über die Konto-Spalte hinaus */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Tabelle fest innerhalb des verfügbaren Bereichs halten */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details table.woocommerce-table--order-details { width: 100% !important; max-width: 100% !important; table-layout: fixed !important; box-sizing: border-box !important; } /* Spalten wieder sauber verteilen */ body.woocommerce-account .woocommerce-order-details thead th:nth-child(1), body.woocommerce-account .woocommerce-order-details tbody td:nth-child(1) { width: 12% !important; } body.woocommerce-account .woocommerce-order-details thead th:nth-child(2), body.woocommerce-account .woocommerce-order-details tbody td:nth-child(2) { width: 58% !important; } body.woocommerce-account .woocommerce-order-details thead th:nth-child(3), body.woocommerce-account .woocommerce-order-details tbody td:nth-child(3) { width: 30% !important; } /* Produktnamen dürfen normal umbrechen */ body.woocommerce-account .woocommerce-order-details tbody td { white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* ---------------------------------------------------------- ANMERKUNG: auch extrem lange Wörter/Zeichenfolgen umbrechen ---------------------------------------------------------- */ body.woocommerce-account .woocommerce-order-details tfoot td[colspan] { width: auto !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; word-break: break-word !important; box-sizing: border-box !important; } /* Auch innere Elemente dürfen die Box nicht verbreitern */ body.woocommerce-account .woocommerce-order-details tfoot td[colspan] * { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* ========================================================== GFS – MEIN KONTO BESTELLDETAILS FOOTER FINAL V3 ========================================================== */ /* ========================================================== FOOTER AUS DEM NORMALEN TABELLENRASTER LÖSEN ========================================================== */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Jede Footer-Zeile als eigene horizontale Zeile */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr { display: flex !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================== BESCHRIFTUNG LINKS ========================================================== */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot th { display: block !important; flex: 0 0 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; margin: 0 !important; padding: 8px 12px !important; box-sizing: border-box !important; text-align: left !important; vertical-align: top !important; white-space: nowrap !important; border: 0 !important; background: transparent !important; } /* ========================================================== WERT RECHTS ========================================================== */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot td { display: block !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 8px 12px !important; box-sizing: border-box !important; text-align: left !important; vertical-align: top !important; border: 0 !important; background: transparent !important; } /* ========================================================== TRENNLINIE NACH LETZTEM ARTIKEL / VOR MWST. ========================================================== */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:first-child { border-top: 1px solid #d2dbe5 !important; } /* ========================================================== MWST. + LIEFERUNG NICHT UMBRECHEN ========================================================== */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:not(:has(td[colspan])) td { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; } /* Lieferung etwas Luft nach unten */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:nth-child(2) th, body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:nth-child(2) td { padding-bottom: 14px !important; } /* ========================================================== ANMERKUNG ========================================================== */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan]) { align-items: flex-start !important; margin-top: 4px !important; } /* Beschriftung "Anmerkung:" */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan]) th { padding-top: 10px !important; } /* Beige Anmerkungsbox */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan]) td[colspan] { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; padding: 10px 12px !important; border: 1px solid #c3a174 !important; border-radius: 4px !important; background: #fffdfa !important; white-space: normal !important; overflow-wrap: anywhere !important; word-wrap: break-word !important; word-break: break-word !important; line-height: 1.4 !important; overflow: hidden !important; } /* Alle Inhalte innerhalb der Anmerkungsbox einsperren */ body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:has(td[colspan]) td[colspan] * { width: auto !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; box-sizing: border-box !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { body.woocommerce-account .woocommerce-order-details table.woocommerce-table--order-details tfoot th { flex-basis: 145px !important; width: 145px !important; min-width: 145px !important; max-width: 145px !important; white-space: normal !important; } } /* ========================================================== GFS – MOBILE HEADER nur Smartphone ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ HEADER INSGESAMT KOMPAKTER ------------------------------------------------------ */ .site-header-main-section-left, .site-header-main-section-right { min-height: 0 !important; } /* ------------------------------------------------------ LOGO + SHOPNAME ------------------------------------------------------ */ .mobile-site-branding .brand { display: flex !important; align-items: center !important; gap: 12px !important; } /* Logo etwas kompakter */ .mobile-site-branding img, .mobile-site-branding .custom-logo { width: auto !important; max-width: 92px !important; max-height: 105px !important; object-fit: contain !important; } /* Shopname kompakter */ .mobile-site-branding .site-title, .mobile-site-branding .site-title a { font-size: 23px !important; line-height: 1.12 !important; font-weight: 400 !important; margin: 0 !important; padding: 0 !important; color: #111111 !important; } /* ------------------------------------------------------ HAMBURGER PRÄSENTER ------------------------------------------------------ */ #mobile-toggle { width: 44px !important; height: 44px !important; padding: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #mobile-toggle .kadence-svg-iconset svg { width: 28px !important; height: 28px !important; } } /* ========================================================== GFS – MOBILE KATEGORIEKACHELN KOMPAKT ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ ABSTAND ZWISCHEN DEN KACHELN ------------------------------------------------------ */ body.post-type-archive-product ul.products li.product-category { margin-bottom: 14px !important; min-height: 0 !important; height: auto !important; } /* ------------------------------------------------------ BILD BEREICH KLEINER ------------------------------------------------------ */ body.post-type-archive-product ul.products li.product-category > a { display: block !important; height: auto !important; min-height: 0 !important; } body.post-type-archive-product ul.products li.product-category > a > img { display: block !important; width: 100% !important; height: 245px !important; margin: 0 auto !important; object-fit: contain !important; object-position: center center !important; } /* ------------------------------------------------------ UNTERER TEXT-/BUTTONBEREICH KOMPAKTER ------------------------------------------------------ */ body.post-type-archive-product ul.products li.product-category .product-details { min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 10px 8px !important; } /* Kategoriebezeichnung */ body.post-type-archive-product ul.products li.product-category .product-details .woocommerce-loop-category__title { margin: 0 !important; padding: 14px 8px !important; font-size: 16px !important; line-height: 1.25 !important; min-height: 0 !important; } /* ------------------------------------------------------ GESAMTE KACHEL NICHT KÜNSTLICH STRECKEN ------------------------------------------------------ */ body.post-type-archive-product ul.products li.product-category .entry-content-wrap { min-height: 0 !important; height: auto !important; } } @media (max-width: 767px) { body.post-type-archive-product ul.products li.product-category .product-details { padding: 6px 8px !important; } body.post-type-archive-product ul.products li.product-category .woocommerce-loop-category__title { padding: 10px 8px !important; line-height: 1.2 !important; } } /* ========================================================== GFS – MOBILE UNTERKATEGORIEN KOMPAKT ========================================================== */ @media (max-width: 767px) { body.tax-product_cat ul.products li.product-category { margin-bottom: 14px !important; min-height: 0 !important; height: auto !important; } body.tax-product_cat ul.products li.product-category > a { display: block !important; height: auto !important; min-height: 0 !important; } body.tax-product_cat ul.products li.product-category > a > img { display: block !important; width: 100% !important; height: 245px !important; margin: 0 auto !important; object-fit: contain !important; object-position: center center !important; } body.tax-product_cat ul.products li.product-category .product-details { min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 6px 8px !important; } body.tax-product_cat ul.products li.product-category .woocommerce-loop-category__title { margin: 0 !important; padding: 10px 8px !important; font-size: 16px !important; line-height: 1.2 !important; min-height: 0 !important; } body.tax-product_cat ul.products li.product-category .entry-content-wrap { min-height: 0 !important; height: auto !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIE TITELBEREICH KOMPAKT ========================================================== */ @media (max-width: 767px) { /* Gesamten beigen Titelbereich deutlich flacher */ body.tax-product_cat .entry-hero.product-archive-hero-section .entry-hero-container-inner { min-height: 0 !important; height: auto !important; padding-top: 26px !important; padding-bottom: 26px !important; } /* Innere Container nicht künstlich strecken */ body.tax-product_cat .entry-hero.product-archive-hero-section .hero-container, body.tax-product_cat .entry-hero.product-archive-hero-section .entry-header { min-height: 0 !important; height: auto !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Überschrift kompakter */ body.tax-product_cat .entry-hero.product-archive-hero-section h1.page-title.archive-title { margin: 0 !important; padding: 0 !important; font-size: 28px !important; line-height: 1.15 !important; font-weight: 700 !important; text-align: center !important; } } /* ========================================================== GFS – MOBILE PRODUKTKARTEN KOMPAKT ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ GESAMTE PRODUKTKARTE ------------------------------------------------------ */ body.tax-product_cat ul.products li.type-product { min-height: 0 !important; height: auto !important; margin-bottom: 16px !important; } /* ------------------------------------------------------ PRODUKTBILD-BEREICH ------------------------------------------------------ */ body.tax-product_cat ul.products li.type-product .woocommerce-loop-image-link { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0 !important; height: 230px !important; padding: 10px !important; box-sizing: border-box !important; } body.tax-product_cat ul.products li.type-product .woocommerce-loop-image-link img { display: block !important; width: auto !important; height: auto !important; max-width: 90% !important; max-height: 210px !important; margin: 0 auto !important; object-fit: contain !important; } /* ------------------------------------------------------ BEIGER PRODUKTBEREICH ------------------------------------------------------ */ body.tax-product_cat ul.products li.type-product .product-details { min-height: 0 !important; height: auto !important; padding: 16px 14px !important; } /* ------------------------------------------------------ PRODUKTNAME ------------------------------------------------------ */ body.tax-product_cat ul.products li.type-product .woocommerce-loop-product__title { margin: 0 0 10px 0 !important; font-size: 16px !important; line-height: 1.25 !important; } /* ------------------------------------------------------ PREIS + VE ------------------------------------------------------ */ body.tax-product_cat ul.products li.type-product .price { margin: 0 0 12px 0 !important; font-size: 13px !important; line-height: 1.35 !important; } /* ------------------------------------------------------ PRODUKTBESCHREIBUNG / EXCERPT falls vorhanden ------------------------------------------------------ */ body.tax-product_cat ul.products li.type-product .product-excerpt { margin: 0 0 10px 0 !important; padding: 0 !important; } /* ------------------------------------------------------ AKTIONSBEREICH ------------------------------------------------------ */ body.tax-product_cat ul.products li.type-product .product-action-wrap { margin-top: 10px !important; padding-top: 10px !important; } /* Dein Mengenfeld + Warenkorb-Button */ body.tax-product_cat ul.products li.type-product .frey-catalog-qty-wrapper { gap: 8px !important; margin-bottom: 0 !important; align-items: center !important; justify-content: center !important; } /* Mengenfeld */ body.tax-product_cat ul.products li.type-product .quantity input.qty { width: 68px !important; min-width: 68px !important; height: 38px !important; padding: 4px 6px !important; } /* Warenkorb / Ausführung wählen */ body.tax-product_cat ul.products li.type-product .button { min-height: 38px !important; margin: 0 !important; padding: 8px 10px !important; font-size: 13px !important; line-height: 1.2 !important; } } /* ========================================================== GFS – MOBILE PRODUKTKARTEN FEINSCHLIFF ========================================================== */ @media (max-width: 767px) { body.tax-product_cat ul.products li.type-product .product-details { padding: 12px 14px !important; } body.tax-product_cat ul.products li.type-product .woocommerce-loop-product__title { margin-bottom: 6px !important; } body.tax-product_cat ul.products li.type-product .price { margin-bottom: 8px !important; } body.tax-product_cat ul.products li.type-product .product-action-wrap { margin-top: 6px !important; padding-top: 8px !important; } body.tax-product_cat ul.products li.type-product .frey-catalog-qty-wrapper { margin-bottom: 0 !important; } } /* ========================================================== GFS – MOBILE PRODUKTDETAILSEITE KOMPAKT ========================================================== */ @media (max-width: 767px) { /* ====================================================== 1. HAUPTBILD KOMPAKTER ====================================================== */ body.single-product .woocommerce-product-gallery { margin-bottom: 22px !important; } body.single-product .woocommerce-product-gallery__wrapper { min-height: 0 !important; height: auto !important; } body.single-product .woocommerce-product-gallery__image, body.single-product .woocommerce-product-gallery__image--placeholder { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 260px !important; min-height: 0 !important; overflow: hidden !important; } body.single-product .woocommerce-product-gallery__image img, body.single-product .woocommerce-product-gallery__image--placeholder img, body.single-product .woocommerce-product-gallery img.wp-post-image { display: block !important; width: auto !important; height: auto !important; max-width: 92% !important; max-height: 240px !important; margin: 0 auto !important; object-fit: contain !important; } /* ====================================================== 2. PRODUKTTITEL ETWAS KOMPAKTER ====================================================== */ body.single-product .summary h1.product_title { font-size: 29px !important; line-height: 1.15 !important; margin-bottom: 18px !important; } /* ====================================================== 3. ÄHNLICHE PRODUKTE – ÜBERSCHRIFT ====================================================== */ body.single-product section.related.products > h2 { font-size: 28px !important; line-height: 1.15 !important; margin-bottom: 18px !important; } /* ====================================================== 4. ÄHNLICHE PRODUKTE – KARTE ====================================================== */ body.single-product section.related.products ul.products li.type-product { min-height: 0 !important; height: auto !important; margin-bottom: 16px !important; } /* Bildbereich */ body.single-product section.related.products ul.products li.type-product .woocommerce-loop-image-link { display: flex !important; align-items: center !important; justify-content: center !important; height: 220px !important; min-height: 0 !important; padding: 8px !important; box-sizing: border-box !important; } body.single-product section.related.products ul.products li.type-product .woocommerce-loop-image-link img { width: auto !important; height: auto !important; max-width: 90% !important; max-height: 205px !important; margin: 0 auto !important; object-fit: contain !important; } /* ====================================================== 5. BEIGER BEREICH ====================================================== */ body.single-product section.related.products ul.products li.type-product .product-details { min-height: 0 !important; height: auto !important; padding: 12px 14px !important; } /* Produktname */ body.single-product section.related.products .woocommerce-loop-product__title { margin: 0 0 6px 0 !important; font-size: 16px !important; line-height: 1.25 !important; } /* Preis / VE */ body.single-product section.related.products .price { margin: 0 0 8px 0 !important; font-size: 13px !important; line-height: 1.35 !important; } /* ====================================================== 6. WARENKORB-BEREICH DER ÄHNLICHEN PRODUKTE ====================================================== */ body.single-product section.related.products .product-action-wrap { margin-top: 6px !important; padding-top: 8px !important; } body.single-product section.related.products .frey-catalog-qty-wrapper { gap: 8px !important; margin-bottom: 0 !important; justify-content: center !important; align-items: center !important; } body.single-product section.related.products .quantity input.qty { width: 68px !important; min-width: 68px !important; height: 38px !important; } body.single-product section.related.products .button { min-height: 38px !important; margin: 0 !important; padding: 8px 10px !important; font-size: 13px !important; line-height: 1.2 !important; } } /* ========================================================== GFS – MOBILE WARENKORB FINAL ========================================================== */ @media (max-width: 767px) { /* ====================================================== 1. WARENKORB-INHALT ====================================================== */ body.woocommerce-cart .woocommerce-cart-form { width: 100% !important; max-width: 100% !important; } body.woocommerce-cart table.woocommerce-cart-form__contents, body.woocommerce-cart table.woocommerce-cart-form__contents tbody { display: block !important; width: 100% !important; border: 0 !important; } /* Tabellenkopf mobil ausblenden */ body.woocommerce-cart table.woocommerce-cart-form__contents thead { display: none !important; } /* ====================================================== 2. EIN ARTIKEL = EINE KOMPAKTE KARTE ====================================================== */ body.woocommerce-cart table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item.cart_item { display: block !important; position: relative !important; width: 100% !important; margin: 0 0 14px 0 !important; padding: 12px 14px !important; box-sizing: border-box !important; border: 1px solid #d9c3a7 !important; border-radius: 5px !important; background: #ffffff !important; } /* Alle Zellen zunächst neutralisieren */ body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td { width: 100% !important; margin: 0 !important; padding: 7px 0 !important; box-sizing: border-box !important; border: 0 !important; border-bottom: 1px solid #ddd !important; vertical-align: middle !important; } /* ====================================================== 3. PRODUKTBILD MOBIL NICHT ANZEIGEN aktuell ist es bei dir ohnehin nicht sichtbar ====================================================== */ body.woocommerce-cart td.product-thumbnail { display: none !important; } /* ====================================================== 4. PRODUKTNAME ====================================================== */ body.woocommerce-cart td.product-name { display: block !important; padding: 2px 38px 10px 0 !important; border-bottom: 1px solid #ddd !important; font-weight: 600 !important; line-height: 1.35 !important; } /* Das künstliche "Produkt:" vor dem Namen entfernen */ body.woocommerce-cart td.product-name::before { display: none !important; content: none !important; } body.woocommerce-cart td.product-name a { display: inline !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* ====================================================== 5. ENTFERNEN-X OBEN RECHTS ====================================================== */ body.woocommerce-cart td.product-remove { display: block !important; position: absolute !important; top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; padding: 0 !important; border: 0 !important; z-index: 3 !important; } body.woocommerce-cart td.product-remove::before { display: none !important; content: none !important; } body.woocommerce-cart td.product-remove a.remove { display: flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; margin: 0 !important; line-height: 1 !important; } /* ====================================================== 6. PREIS / ANZAHL / ZWISCHENSUMME jeweils kompakte Zweispalten-Zeile ====================================================== */ body.woocommerce-cart td.product-price, body.woocommerce-cart td.product-quantity, body.woocommerce-cart td.product-subtotal { display: grid !important; grid-template-columns: 120px minmax(0, 1fr) !important; align-items: center !important; column-gap: 10px !important; min-height: 42px !important; } body.woocommerce-cart td.product-price::before, body.woocommerce-cart td.product-quantity::before, body.woocommerce-cart td.product-subtotal::before { display: block !important; position: static !important; float: none !important; width: auto !important; margin: 0 !important; font-weight: 700 !important; text-align: left !important; } body.woocommerce-cart td.product-price { text-align: right !important; } body.woocommerce-cart td.product-quantity { text-align: right !important; } body.woocommerce-cart td.product-subtotal { padding-bottom: 2px !important; border-bottom: 0 !important; font-weight: 500 !important; text-align: right !important; } /* ====================================================== 7. MENGENFELD ====================================================== */ body.woocommerce-cart td.product-quantity .quantity { display: flex !important; justify-content: flex-end !important; width: 100% !important; } body.woocommerce-cart td.product-quantity input.qty { width: 82px !important; min-width: 82px !important; height: 38px !important; margin: 0 !important; text-align: center !important; } /* ====================================================== 8. EVENTUELLE ACTIONS-ZEILE UNTER DER TABELLE ====================================================== */ body.woocommerce-cart table.woocommerce-cart-form__contents tr:last-child:not(.cart_item) { display: block !important; margin-top: 10px !important; } /* ====================================================== 9. WARENKORB-SUMME ====================================================== */ body.woocommerce-cart .cart-collaterals { width: 100% !important; margin-top: 24px !important; } body.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; max-width: 100% !important; float: none !important; } body.woocommerce-cart .cart_totals > h2 { margin: 0 0 14px 0 !important; font-size: 25px !important; line-height: 1.2 !important; } /* ====================================================== 10. SUMMENTABELLE KOMPAKT ====================================================== */ body.woocommerce-cart .cart_totals table.shop_table { display: block !important; width: 100% !important; margin: 0 !important; border: 1px solid #c99a63 !important; border-radius: 0 !important; box-sizing: border-box !important; } body.woocommerce-cart .cart_totals table.shop_table tbody { display: block !important; width: 100% !important; } body.woocommerce-cart .cart_totals table.shop_table tr { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; width: 100% !important; padding: 12px 12px !important; box-sizing: border-box !important; border-bottom: 1px solid #e0cdb6 !important; } body.woocommerce-cart .cart_totals table.shop_table tr:last-child { border-bottom: 0 !important; } body.woocommerce-cart .cart_totals table.shop_table th, body.woocommerce-cart .cart_totals table.shop_table td { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; } body.woocommerce-cart .cart_totals table.shop_table td { text-align: right !important; } /* WooCommerce-Mobile-Pseudolabels hier entfernen */ body.woocommerce-cart .cart_totals table.shop_table td::before { display: none !important; content: none !important; } /* ====================================================== 11. VERSAND / "INDIVIDUELL NACH ANGEBOT" ====================================================== */ body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals, body.woocommerce-cart .cart_totals tr.shipping { grid-template-columns: 1fr !important; } body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th, body.woocommerce-cart .cart_totals tr.shipping th { display: none !important; } body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td, body.woocommerce-cart .cart_totals tr.shipping td { width: 100% !important; text-align: center !important; line-height: 1.3 !important; } /* ====================================================== 12. GESAMTSUMME ====================================================== */ body.woocommerce-cart .cart_totals tr.order-total { padding-top: 14px !important; padding-bottom: 14px !important; } body.woocommerce-cart .cart_totals tr.order-total td { font-size: 18px !important; font-weight: 700 !important; } /* ====================================================== 13. KASSE-BUTTON ====================================================== */ body.woocommerce-cart .wc-proceed-to-checkout { margin-top: 18px !important; padding: 0 !important; } body.woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 12px 16px !important; box-sizing: border-box !important; font-size: 18px !important; font-weight: 700 !important; } } /* ========================================================== GFS – MOBILE WARENKORB ARTIKEL FEINSCHLIFF ========================================================== */ @media (max-width: 767px) { body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-name { padding-left: 0 !important; padding-right: 42px !important; text-align: left !important; } body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-name a { display: block !important; width: 100% !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-remove { top: 9px !important; right: 8px !important; } } /* ========================================================== GFS – MOBILE WARENKORB FOOTER ABSTAND ========================================================== */ @media (max-width: 767px) { body.page-id-8 #colophon .site-middle-footer-wrap { margin-top: 0 !important; padding-top: 20px !important; min-height: 0 !important; } body.page-id-8 #colophon .site-middle-footer-container { margin-top: 0 !important; padding-top: 0 !important; min-height: 0 !important; } body.page-id-8 #colophon .site-middle-footer-inner-wrap { margin-top: 0 !important; padding-top: 0 !important; min-height: 0 !important; height: auto !important; } } /* ========================================================== GFS – MOBILE WARENKORB ABSTAND ZUM FOOTER FINAL ========================================================== */ @media (max-width: 767px) { /* Seiteninhalt unten kompakter */ body.page-id-8 article#post-8, body.page-id-8 article#post-8 .entry-content-wrap, body.page-id-8 article#post-8 .entry-content { margin-bottom: 0 !important; padding-bottom: 10px !important; min-height: 0 !important; } /* Abstand zwischen Hauptinhalt und Footer reduzieren */ body.page-id-8 #primary { margin-bottom: 0 !important; padding-bottom: 0 !important; } body.page-id-8 #inner-wrap { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Footer direkt danach beginnen lassen */ body.page-id-8 #colophon { margin-top: 0 !important; padding-top: 0 !important; } } /* ========================================================== GFS – MOBILE FOOTER KOMPAKT FINAL ========================================================== */ @media (max-width: 767px) { /* ====================================================== 1. KADENCE FOOTER-GRID AUF MOBIL AUFLÖSEN ====================================================== */ #colophon .site-middle-footer-inner-wrap { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ====================================================== 2. EINZELNE FOOTER-SEKTIONEN NATÜRLICH UNTEREINANDER ====================================================== */ #colophon .site-middle-footer-inner-wrap > [class*="site-footer-middle-section-"] { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 30px 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Letzten Bereich nicht unnötig nach unten verlängern */ #colophon .site-middle-footer-inner-wrap > [class*="site-footer-middle-section-"]:last-child { margin-bottom: 10px !important; } /* ====================================================== 3. WIDGET-CONTAINER KOMPAKT ====================================================== */ #colophon .footer-widget-area, #colophon .footer-widget-area-inner { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } #colophon .footer-widget-area section.widget { height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== 4. ÜBERSCHRIFTEN ====================================================== */ #colophon .widget-title { margin: 0 0 18px 0 !important; padding: 0 !important; } /* ====================================================== 5. MENÜPUNKTE ETWAS KOMPAKTER ====================================================== */ #colophon .widget_nav_menu ul { margin: 0 !important; padding: 0 !important; } #colophon .widget_nav_menu li { margin: 0 0 8px 0 !important; padding: 0 !important; } #colophon .widget_nav_menu li:last-child { margin-bottom: 0 !important; } /* ====================================================== 6. MITTLEREN FOOTER SELBST NICHT STRECKEN ====================================================== */ #colophon .site-middle-footer-wrap, #colophon .site-middle-footer-container, #colophon .site-footer-row-container-inner { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; } /* ====================================================== 7. COPYRIGHT-BEREICH NÄHER HERANHOLEN ====================================================== */ #colophon .site-bottom-footer-wrap { margin-top: 0 !important; padding-top: 18px !important; padding-bottom: 18px !important; min-height: 0 !important; height: auto !important; } } /* ========================================================== GFS – MOBILE FOOTER FEINSCHLIFF Restliche Abstände reduzieren ========================================================== */ @media (max-width: 767px) { /* Weniger Abstand zwischen Kontakt / Service / Informationen */ #colophon .site-middle-footer-inner-wrap > [class*="site-footer-middle-section-"] { margin-bottom: 18px !important; } /* Letzte Footer-Sektion noch enger zum Copyright */ #colophon .site-middle-footer-inner-wrap > [class*="site-footer-middle-section-"]:last-child { margin-bottom: 2px !important; } /* Überschrift etwas näher an ihren Inhalt */ #colophon .widget-title { margin-bottom: 12px !important; } /* Menüpunkte etwas enger untereinander */ #colophon .widget_nav_menu li { margin-bottom: 6px !important; } /* Copyright-Bereich näher an "Informationen" */ #colophon .site-bottom-footer-wrap { padding-top: 10px !important; padding-bottom: 12px !important; } } /* ========================================================== GFS – MOBILE WARENKORB GRAUE TRENNLINIEN ENTFERNEN ========================================================== */ @media (max-width: 767px) { body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td { border-bottom: 0 !important; border-top: 0 !important; } body.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item td.product-name { border-bottom: 0 !important; } } /* ========================================================== GFS – MOBILE CHECKOUT BESTELLÜBERSICHT FINAL V2 ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ TABELLE ------------------------------------------------------ */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table { width: 100% !important; max-width: 100% !important; table-layout: auto !important; } /* Kopfzeile mobil ausblenden */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table thead { display: none !important; } /* ------------------------------------------------------ PRODUKTZEILEN ------------------------------------------------------ */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tbody tr.cart_item { display: flex !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border-bottom: 1px solid #e1cdb4 !important; } /* ------------------------------------------------------ LINKE SEITE: 1x + PRODUKTNAME + EINZELPREIS ------------------------------------------------------ */ body.woocommerce-checkout #order_review tbody tr.cart_item td.product-name { display: flex !important; flex: 1 1 auto !important; align-items: center !important; gap: 10px !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 12px 6px 12px 10px !important; box-sizing: border-box !important; border: 0 !important; text-align: left !important; grid-template-columns: none !important; grid-template-areas: none !important; } /* Mengen-Kreis ganz nach links */ body.woocommerce-checkout #order_review .gfs-checkout-qty { order: 1 !important; flex: 0 0 32px !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; margin: 0 !important; align-self: center !important; text-align: center !important; } /* Produktinfos bekommen den kompletten Rest */ body.woocommerce-checkout #order_review .gfs-checkout-product-info { order: 2 !important; display: block !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } /* Produktname */ body.woocommerce-checkout #order_review .gfs-checkout-product-name { display: block !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.3 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; } /* Einzelpreis */ body.woocommerce-checkout #order_review .gfs-checkout-unit-price { display: block !important; width: auto !important; margin: 5px 0 0 0 !important; font-size: 11.5px !important; line-height: 1.3 !important; text-align: left !important; white-space: normal !important; } /* ------------------------------------------------------ GESAMTPREIS RECHTS ------------------------------------------------------ */ body.woocommerce-checkout #order_review tbody tr.cart_item td.product-total { display: flex !important; flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; align-items: center !important; justify-content: flex-end !important; padding: 12px 8px 12px 4px !important; box-sizing: border-box !important; border: 0 !important; text-align: right !important; white-space: nowrap !important; } body.woocommerce-checkout #order_review tbody tr.cart_item td.product-total .woocommerce-Price-amount { font-size: 14px !important; white-space: nowrap !important; } /* WooCommerce-Mobilbeschriftungen entfernen */ body.woocommerce-checkout #order_review tbody td.product-name::before, body.woocommerce-checkout #order_review tbody td.product-total::before { display: none !important; content: none !important; } } /* ========================================================== GFS – MOBILE CHECKOUT SUMMEN FINAL ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ SUMMENZEILEN ALS EINFACHE FLEX-ZEILEN ------------------------------------------------------ */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot tr { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 0 !important; border-bottom: 1px solid #e1cdb4 !important; } /* ------------------------------------------------------ BESCHRIFTUNG LINKS ------------------------------------------------------ */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot th { display: block !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 14px 12px !important; box-sizing: border-box !important; border: 0 !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ------------------------------------------------------ WERT RECHTS ------------------------------------------------------ */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot td { display: block !important; flex: 0 1 48% !important; width: auto !important; min-width: 0 !important; max-width: 48% !important; padding: 14px 12px !important; box-sizing: border-box !important; border: 0 !important; text-align: right !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* WooCommerce-Mobilbeschriftungen entfernen */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot td::before { display: none !important; content: none !important; } /* ------------------------------------------------------ BETRÄGE NICHT UNNÖTIG UMBRECHEN ------------------------------------------------------ */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot .woocommerce-Price-amount { white-space: nowrap !important; } /* ------------------------------------------------------ GESAMTSUMME ETWAS HERVORHEBEN ------------------------------------------------------ */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot tr.order-total th, body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot tr.order-total td { font-weight: 700 !important; } } /* ========================================================== GFS – MOBILE CHECKOUT DOPPELTE VERSANDAUSWAHL AUSBLENDEN ========================================================== */ @media (max-width: 767px) { body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping, body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot tr.shipping { display: none !important; } } /* ========================================================== GFS – MOBILE CHECKOUT UNTERER BEREICH FINAL ========================================================== */ @media (max-width: 767px) { /* ====================================================== 1. HINWEIS "INDEM DU AUF ..." VERFÜGBARE BREITE BESSER NUTZEN ====================================================== */ body.woocommerce-checkout #payment .payment_box.payment_method_bacs { width: 100% !important; max-width: 100% !important; margin: 18px 0 22px 0 !important; padding: 14px 16px !important; box-sizing: border-box !important; } body.woocommerce-checkout #payment .payment_box.payment_method_bacs p { width: 100% !important; max-width: 100% !important; margin: 0 !important; line-height: 1.45 !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ====================================================== 2. DATENSCHUTZ + BESTELLBUTTON GLEICHE BREITE NUTZEN ====================================================== */ body.woocommerce-checkout #payment .form-row.place-order { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 16px 16px 16px !important; box-sizing: border-box !important; } body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { width: 100% !important; max-width: 100% !important; margin: 0 0 18px 0 !important; box-sizing: border-box !important; } body.woocommerce-checkout #payment #place_order { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* ====================================================== 3. UNNÖTIGEN LEERRAUM VOR DEM FOOTER ENTFERNEN ====================================================== */ body.woocommerce-checkout #inner-wrap, body.woocommerce-checkout #primary, body.woocommerce-checkout #main, body.woocommerce-checkout article#post-9, body.woocommerce-checkout article#post-9 .entry-content-wrap, body.woocommerce-checkout article#post-9 .entry-content { min-height: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Footer direkt nach dem Checkout beginnen lassen */ body.woocommerce-checkout #colophon { margin-top: 0 !important; padding-top: 0 !important; } } /* ========================================================== GFS – MOBILE CHECKOUT ABSCHLUSS BREITER ========================================================== */ @media (max-width: 767px) { /* Hinweisblock breiter */ body.woocommerce-checkout #payment .payment_box.payment_method_bacs { width: calc(100% - 32px) !important; max-width: none !important; margin: 18px 16px 24px 16px !important; padding: 14px 16px !important; box-sizing: border-box !important; } /* Datenschutz + Button ebenfalls breiter */ body.woocommerce-checkout #payment .form-row.place-order { width: calc(100% - 32px) !important; max-width: none !important; margin: 0 16px 16px 16px !important; padding: 0 !important; box-sizing: border-box !important; } body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { width: 100% !important; max-width: none !important; margin: 0 0 18px 0 !important; } body.woocommerce-checkout #payment #place_order { width: 100% !important; max-width: none !important; min-height: 50px !important; white-space: nowrap !important; } } /* ========================================================== GFS – MOBILE CHECKOUT FEINSCHLIFF FINAL Frachtkosten + Abstand zum Footer ========================================================== */ @media (max-width: 767px) { /* ====================================================== 1. SUMMENZEILEN: ETWAS MEHR PLATZ FÜR RECHTE SPALTE ====================================================== */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot th { flex: 0 0 43% !important; width: 43% !important; max-width: 43% !important; padding-left: 12px !important; padding-right: 6px !important; box-sizing: border-box !important; } body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot td { flex: 1 1 57% !important; width: 57% !important; max-width: 57% !important; min-width: 0 !important; padding-left: 6px !important; padding-right: 12px !important; box-sizing: border-box !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* Auch innere Elemente dürfen nicht rechts herauslaufen */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot td * { max-width: 100% !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; box-sizing: border-box !important; } /* Geldbeträge weiterhin schön in einer Zeile */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot .woocommerce-Price-amount { white-space: nowrap !important; } /* ====================================================== 2. ETWAS LUFT ZWISCHEN CHECKOUT UND FOOTER ====================================================== */ body.woocommerce-checkout #colophon { margin-top: 24px !important; padding-top: 0 !important; } } /* ========================================================== GFS – MOBILE CHECKOUT ABSTÄNDE FINAL - Rechnungsdaten / Lieferadresse / Anmerkung enger - mehr Luft vor dem Footer ========================================================== */ @media (max-width: 767px) { /* ------------------------------------------------------ RECHNUNG / LIEFERADRESSE / ANMERKUNG dichter untereinander ------------------------------------------------------ */ body.woocommerce-checkout #customer_details { row-gap: 14px !important; gap: 14px !important; } body.woocommerce-checkout #customer_details .col-1, body.woocommerce-checkout #customer_details .col-2 { margin-top: 0 !important; margin-bottom: 0 !important; } body.woocommerce-checkout .woocommerce-billing-fields { margin-bottom: 14px !important; } body.woocommerce-checkout .woocommerce-shipping-fields { margin-top: 0 !important; margin-bottom: 14px !important; } body.woocommerce-checkout #ship-to-different-address { margin-top: 0 !important; margin-bottom: 0 !important; } body.woocommerce-checkout .woocommerce-additional-fields { margin-top: 0 !important; margin-bottom: 14px !important; } body.woocommerce-checkout #order_comments_field { margin-top: 0 !important; margin-bottom: 0 !important; } /* ------------------------------------------------------ CHECKOUT → FOOTER deutlich mehr Luft vor "Öffnungszeiten" ------------------------------------------------------ */ body.woocommerce-checkout #colophon { margin-top: 38px !important; padding-top: 0 !important; } /* ------------------------------------------------------ SUMMEN-BESCHRIFTUNGEN NICHT MITTEN IM WORT TRENNEN ------------------------------------------------------ */ body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot th { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } } /* ========================================================== GFS – MOBILE CHECKOUT SAUBERER ABSTAND VOR FOOTER ========================================================== */ @media (max-width: 767px) { /* Nach dem Checkout-Kasten bewusst Luft lassen */ body.woocommerce-checkout #primary { padding-bottom: 32px !important; } /* Footer selbst nicht zusätzlich verschieben */ body.woocommerce-checkout #colophon { margin-top: 0 !important; } /* Etwas Luft NACH der beigen Trennlinie */ body.woocommerce-checkout #colophon .site-middle-footer-wrap { padding-top: 22px !important; } } /* ========================================================== GFS – MOBILE MEIN KONTO ========================================================== */ @media (max-width: 767px) { /* ====================================================== 1. TITELBEREICH "MEIN KONTO" KOMPAKTER ====================================================== */ body.woocommerce-account .entry-hero { min-height: 0 !important; height: auto !important; } body.woocommerce-account .entry-hero-container-inner { min-height: 0 !important; height: auto !important; padding-top: 32px !important; padding-bottom: 32px !important; } body.woocommerce-account .entry-hero h1 { margin: 0 !important; font-size: 30px !important; line-height: 1.15 !important; } /* ====================================================== 2. ANMELDEN / REGISTRIEREN BEIGER RAHMEN ====================================================== */ body.woocommerce-account form.woocommerce-form-login, body.woocommerce-account form.woocommerce-form-register { border: 1px solid #c99a63 !important; border-radius: 4px !important; padding: 20px !important; margin-top: 0 !important; margin-bottom: 24px !important; box-shadow: none !important; } /* ====================================================== 3. FELDER ETWAS KOMPAKTER ====================================================== */ body.woocommerce-account form.woocommerce-form-login .form-row, body.woocommerce-account form.woocommerce-form-register .form-row { margin-bottom: 16px !important; } body.woocommerce-account form.woocommerce-form-login input.input-text, body.woocommerce-account form.woocommerce-form-register input.input-text { min-height: 42px !important; padding: 8px 12px !important; border-color: #c99a63 !important; border-radius: 4px !important; } /* ====================================================== 4. ÜBERSCHRIFTEN ====================================================== */ body.woocommerce-account .u-column1 > h2, body.woocommerce-account .u-column2 > h2 { margin-bottom: 16px !important; font-size: 28px !important; line-height: 1.2 !important; } /* ====================================================== 5. DATENSCHUTZTEXT REGISTRIERUNG ====================================================== */ body.woocommerce-account .woocommerce-privacy-policy-text { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 14px !important; } /* ====================================================== 6. BUTTONS ====================================================== */ body.woocommerce-account button.woocommerce-button { min-height: 44px !important; padding: 10px 18px !important; font-weight: 700 !important; } } /* ========================================================== GFS – MOBILE MEIN KONTO / BESTELLUNGEN KOMPAKT ========================================================== */ @media (max-width: 767px) { /* Tabelle mobil komplett selbst steuern */ body.woocommerce-account table.woocommerce-orders-table { display: block !important; width: 100% !important; border: 0 !important; } body.woocommerce-account table.woocommerce-orders-table thead { display: none !important; } body.woocommerce-account table.woocommerce-orders-table tbody { display: block !important; width: 100% !important; } /* ====================================================== EINE BESTELLUNG = EINE KARTE ====================================================== */ body.woocommerce-account table.woocommerce-orders-table tr.woocommerce-orders-table__row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "number actions" "date actions" "total total" !important; column-gap: 12px !important; row-gap: 5px !important; align-items: center !important; width: 100% !important; margin: 0 0 14px 0 !important; padding: 14px !important; box-sizing: border-box !important; border: 1px solid #c99a63 !important; border-radius: 4px !important; background: #fff !important; } /* Alle Tabellenzellen neutralisieren */ body.woocommerce-account table.woocommerce-orders-table tr.woocommerce-orders-table__row td, body.woocommerce-account table.woocommerce-orders-table tr.woocommerce-orders-table__row th { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; } /* WooCommerce-Mobilbeschriftungen entfernen: Datum:, Gesamtsumme:, Aktionen: */ body.woocommerce-account table.woocommerce-orders-table tr.woocommerce-orders-table__row td::before, body.woocommerce-account table.woocommerce-orders-table tr.woocommerce-orders-table__row th::before { display: none !important; content: none !important; } /* ====================================================== BESTELLNUMMER ====================================================== */ body.woocommerce-account .woocommerce-orders-table__cell-order-number { grid-area: number !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 700 !important; } body.woocommerce-account .woocommerce-orders-table__cell-order-number a { font-weight: 700 !important; text-decoration: none !important; } /* ====================================================== DATUM ====================================================== */ body.woocommerce-account .woocommerce-orders-table__cell-order-date { grid-area: date !important; font-size: 13px !important; line-height: 1.35 !important; opacity: .8; } /* ====================================================== GESAMTSUMME ====================================================== */ body.woocommerce-account .woocommerce-orders-table__cell-order-total { grid-area: total !important; margin-top: 7px !important; padding-top: 9px !important; border-top: 1px solid #e1cdb4 !important; font-size: 14px !important; line-height: 1.35 !important; } /* ====================================================== ANZEIGEN-BUTTON ====================================================== */ body.woocommerce-account .woocommerce-orders-table__cell-order-actions { grid-area: actions !important; align-self: center !important; text-align: right !important; } body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button { min-height: 38px !important; margin: 0 !important; padding: 8px 14px !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 700 !important; white-space: nowrap !important; } /* ====================================================== PAGINATION / "WEITER" ====================================================== */ body.woocommerce-account .woocommerce-pagination { margin-top: 16px !important; } } /* ========================================================== GFS – MOBILE MEGA MENU OPTIK ========================================================== */ @media (max-width: 768px) { /* ====================================================== AUFGEKLAPPTES UNTERMENÜ ====================================================== */ #mobile-drawer #mega-menu-primary li.mega-menu-item-has-children > ul.mega-sub-menu { width: calc(100% - 20px) !important; margin: 4px 10px 8px 10px !important; padding: 6px 6px !important; box-sizing: border-box !important; background: #f2ebe2 !important; border: 1px solid #c99a63 !important; border-radius: 3px !important; box-shadow: none !important; } /* ====================================================== EINZELNE UNTERKATEGORIEN ====================================================== */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item { width: 100% !important; margin: 0 0 3px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item:last-child { margin-bottom: 0 !important; } /* ====================================================== LINKS DER UNTERKATEGORIEN ====================================================== */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 8px 10px !important; background: rgba(255,255,255,0.28) !important; border: 0 !important; border-radius: 2px !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 600 !important; color: #111 !important; text-align: left !important; box-shadow: none !important; } /* etwas Luft zwischen den Einträgen */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item + li.mega-menu-item { margin-top: 3px !important; } /* ====================================================== HOVER / AKTIV ====================================================== */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus, #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-current-menu-item > a.mega-menu-link { background: #dcc4a6 !important; color: #111 !important; } /* ====================================================== PFEILE IN UNTERKATEGORIEN ====================================================== */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu .mega-indicator { margin-left: auto !important; padding-left: 10px !important; font-size: 12px !important; } } /* ========================================================== GFS – MOBILE MEGA MENU MODERN FINAL ========================================================== */ @media (max-width: 768px) { /* ====================================================== 1. INTERNEN MAX-MEGA-MENU HAMBURGER ENTFERNEN Kadence-X oben rechts reicht vollkommen ====================================================== */ #mobile-drawer #mega-menu-wrap-primary > .mega-menu-toggle, #mobile-drawer .mega-menu-toggle { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* ====================================================== 2. MEGA-MENU WRAPPER KEIN SCHWARZER BALKEN / RAHMEN ====================================================== */ #mobile-drawer #mega-menu-wrap-primary { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #mobile-drawer #mega-menu-primary { margin: 0 !important; padding: 8px 14px 14px 14px !important; background: #bd966c !important; border: 0 !important; box-shadow: none !important; } /* ====================================================== 3. HAUPTKATEGORIEN ====================================================== */ #mobile-drawer #mega-menu-primary > li.mega-menu-item { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { min-height: 40px !important; height: auto !important; margin: 0 !important; padding: 9px 10px !important; background: transparent !important; border: 0 !important; border-radius: 6px !important; outline: 0 !important; box-shadow: none !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #111 !important; } /* Geöffnet / Fokus / Hover: kein schwarzer Kasten mehr */ #mobile-drawer #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus, #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:active { background: rgba(255,255,255,0.13) !important; color: #111 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ====================================================== 4. UNTERMENÜ – MODERNER, RUHIGER ====================================================== */ #mobile-drawer #mega-menu-primary li.mega-menu-item-has-children > ul.mega-sub-menu { width: calc(100% - 12px) !important; margin: 4px 6px 10px 6px !important; padding: 5px 10px !important; box-sizing: border-box !important; background: #e8d7c2 !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; } /* ====================================================== 5. UNTERKATEGORIEN KEINE EINZELNEN WEISSEN KÄSTCHEN ====================================================== */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center !important; width: 100% !important; min-height: 36px !important; height: auto !important; margin: 0 !important; padding: 8px 8px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(80, 55, 30, 0.10) !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; color: #111 !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 500 !important; text-align: left !important; } /* Beim letzten Eintrag keine Trennlinie */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item:last-child > a.mega-menu-link { border-bottom: 0 !important; } /* Hover / aktiver Unterpunkt */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus, #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-current-menu-item > a.mega-menu-link { background: rgba(255,255,255,0.24) !important; color: #111 !important; border-radius: 4px !important; box-shadow: none !important; } /* ====================================================== 6. PFEILE ====================================================== */ #mobile-drawer #mega-menu-primary .mega-indicator { margin-left: auto !important; padding-left: 10px !important; color: #111 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } } /* ========================================================== GFS – MOBILE MENÜ DRAWER HINTERGRUND ========================================================== */ @media (max-width: 768px) { /* Gesamter aufgeklappter Menübereich */ #mobile-drawer, #mobile-drawer .drawer-inner, #mobile-drawer .drawer-content, #mobile-drawer .drawer-header { background: #bd966c !important; } /* Menü selbst soll sich nahtlos einfügen */ #mobile-drawer #mega-menu-wrap-primary, #mobile-drawer #mega-menu-primary { background: transparent !important; } /* Äußerer Menücontainer nicht mehr wie eine Karte */ #mobile-drawer #mega-menu-primary { border-radius: 0 !important; box-shadow: none !important; } /* X oben rechts schwarz statt weiß */ #mobile-drawer .drawer-header, #mobile-drawer .drawer-header button, #mobile-drawer .drawer-header .drawer-toggle { color: #111 !important; } #mobile-drawer .drawer-header svg { color: #111 !important; fill: currentColor !important; stroke: currentColor !important; } /* Scrollbar unauffälliger */ #mobile-drawer .drawer-inner { scrollbar-color: rgba(0,0,0,.28) transparent; } } /* ========================================================== GFS – MOBILE MEGA MENU MODERN V2 ========================================================== */ @media (max-width: 768px) { /* ====================================================== 1. DRAWER VOLLE BILDSCHIRMBREITE dunklen Streifen links entfernen ====================================================== */ #mobile-drawer .drawer-inner { width: 100vw !important; max-width: 100vw !important; background: #bd966c !important; } #mobile-drawer .drawer-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; background: #bd966c !important; } /* ====================================================== 2. KOPFBEREICH MIT X ====================================================== */ #mobile-drawer .drawer-header { min-height: 64px !important; padding: 0 22px !important; background: #bd966c !important; border-bottom: 1px solid rgba(17,17,17,.12) !important; } #mobile-drawer .drawer-header button { width: 38px !important; height: 38px !important; padding: 7px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #111 !important; } /* ====================================================== 3. HAUPTMENÜ VOLLE BREITE ====================================================== */ #mobile-drawer #mega-menu-wrap-primary { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #mobile-drawer #mega-menu-primary { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 8px 22px 28px 22px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ====================================================== 4. HAUPTKATEGORIEN ALS KLARE ZEILEN ====================================================== */ #mobile-drawer #mega-menu-primary > li.mega-menu-item { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center !important; width: 100% !important; min-height: 46px !important; height: auto !important; margin: 0 !important; padding: 11px 4px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(17,17,17,.12) !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; color: #111 !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 400 !important; text-decoration: none !important; } /* Geöffnete Hauptkategorie */ #mobile-drawer #mega-menu-primary > li.mega-toggle-on > a.mega-menu-link { margin-top: 4px !important; padding-left: 12px !important; padding-right: 12px !important; background: rgba(255,255,255,.18) !important; border-bottom: 0 !important; border-radius: 8px !important; font-weight: 500 !important; text-decoration: none !important; } /* Hover / Fokus */ #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover, #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus { color: #111 !important; text-decoration: none !important; box-shadow: none !important; outline: 0 !important; } /* ====================================================== 5. UNTERMENÜ ruhige helle Fläche statt Kachel-Optik ====================================================== */ #mobile-drawer #mega-menu-primary li.mega-menu-item-has-children > ul.mega-sub-menu { width: 100% !important; max-width: 100% !important; margin: 6px 0 12px 0 !important; padding: 5px 14px !important; box-sizing: border-box !important; background: #eadbc9 !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important; } /* ====================================================== 6. UNTERKATEGORIEN ====================================================== */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { display: flex !important; align-items: center !important; width: 100% !important; min-height: 40px !important; margin: 0 !important; padding: 9px 6px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(70,50,30,.12) !important; border-radius: 0 !important; box-shadow: none !important; color: #111 !important; font-size: 13.5px !important; line-height: 1.3 !important; font-weight: 500 !important; text-decoration: none !important; } #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item:last-child > a.mega-menu-link { border-bottom: 0 !important; } /* Unterpunkt beim Antippen */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus { background: rgba(255,255,255,.30) !important; border-radius: 5px !important; color: #111 !important; text-decoration: none !important; } /* ====================================================== 7. PFEILE ETWAS RUHIGER ====================================================== */ #mobile-drawer #mega-menu-primary .mega-indicator { margin-left: auto !important; padding-left: 12px !important; background: transparent !important; border: 0 !important; color: #111 !important; opacity: .72 !important; box-shadow: none !important; } } /* ========================================================== GFS – MOBILE MEGA MENU FEINSCHLIFF ========================================================== */ @media (max-width: 768px) { /* Hauptmenü etwas mehr Innenabstand */ #mobile-drawer #mega-menu-primary { padding: 10px 18px 28px 18px !important; } /* Hauptkategorien */ #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { min-height: 44px !important; padding: 10px 10px !important; border-bottom: 1px solid rgba(17,17,17,.07) !important; font-size: 15px !important; font-weight: 400 !important; } /* Letzte Linie entfernen */ #mobile-drawer #mega-menu-primary > li.mega-menu-item:last-child > a.mega-menu-link { border-bottom: 0 !important; } /* Geöffnete Hauptkategorie stärker als aktive Ebene */ #mobile-drawer #mega-menu-primary > li.mega-toggle-on > a.mega-menu-link { margin: 4px 0 6px 0 !important; padding: 11px 13px !important; background: rgba(255,255,255,.20) !important; border: 0 !important; border-radius: 8px !important; font-weight: 500 !important; } /* Untermenü etwas eleganter */ #mobile-drawer #mega-menu-primary li.mega-menu-item-has-children > ul.mega-sub-menu { width: calc(100% - 16px) !important; margin: 0 8px 14px 8px !important; padding: 6px 12px !important; background: #eadbc9 !important; border-radius: 10px !important; } /* Unterkategorien */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { min-height: 39px !important; padding: 9px 7px !important; font-size: 13.5px !important; font-weight: 400 !important; border-bottom: 1px solid rgba(70,50,30,.09) !important; } /* Pfeile dezenter */ #mobile-drawer #mega-menu-primary .mega-indicator { font-size: 11px !important; opacity: .65 !important; } } /* ========================================================== MOBILE MEGA MENU – Pfeile auch für Unterkategorien ========================================================== */ @media (max-width: 768px) { /* Alle Menüeinträge mit Unterpunkten */ #mobile-drawer .mega-menu-item-has-children > a.mega-menu-link { position: relative !important; padding-right: 38px !important; } /* Standard-Plugin-Pfeil etwas sauber ausrichten */ #mobile-drawer .mega-menu-item-has-children > a.mega-menu-link .mega-indicator { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; font-size: 11px !important; opacity: .8 !important; } /* Pfeil bei geöffnetem Eintrag drehen */ #mobile-drawer .mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link .mega-indicator, #mobile-drawer .mega-menu-item-has-children.submenu-open > a.mega-menu-link .mega-indicator { transform: translateY(-50%) rotate(180deg) !important; } /* Unter-Untermenüs optisch eingerückt */ #mobile-drawer ul.mega-sub-menu ul.mega-sub-menu { margin: 6px 0 10px 10px !important; padding: 6px 10px !important; background: rgba(255,255,255,.35) !important; border-radius: 8px !important; } /* Einträge innerhalb der 3. Ebene */ #mobile-drawer ul.mega-sub-menu ul.mega-sub-menu > li > a.mega-menu-link { font-size: 13px !important; line-height: 1.35 !important; padding: 8px 6px !important; min-height: auto !important; border-bottom: 1px solid rgba(70,50,30,.08) !important; } #mobile-drawer ul.mega-sub-menu ul.mega-sub-menu > li:last-child > a.mega-menu-link { border-bottom: 0 !important; } } /* ========================================================== GFS – MOBILE MEGA MENU PFEILE FINAL ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ Originale Max-Mega-Menu-Pfeile komplett weg ------------------------------------------------------ */ #mobile-drawer #mega-menu-primary .mega-indicator { display: none !important; } /* ------------------------------------------------------ Jeder Menüpunkt mit Kindern braucht Platz rechts ------------------------------------------------------ */ #mobile-drawer #mega-menu-primary li.gfs-has-submenu { position: relative !important; } #mobile-drawer #mega-menu-primary li.gfs-has-submenu > a.mega-menu-link { padding-right: 50px !important; } /* ------------------------------------------------------ Unser eigener Toggle bleibt IMMER exakt an derselben Position ------------------------------------------------------ */ #mobile-drawer #mega-menu-primary .gfs-submenu-toggle { position: absolute !important; top: 0 !important; right: 2px !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; color: #111 !important; cursor: pointer !important; } /* ------------------------------------------------------ Eigener Pfeil ------------------------------------------------------ */ #mobile-drawer #mega-menu-primary .gfs-chevron { display: block !important; width: 7px !important; height: 7px !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: rotate(45deg) !important; transform-origin: center center !important; transition: transform .18s ease !important; opacity: .75 !important; } /* geöffnet = Pfeil nach oben */ #mobile-drawer #mega-menu-primary .gfs-submenu-toggle[aria-expanded="true"] .gfs-chevron { transform: rotate(225deg) !important; } /* ------------------------------------------------------ Pfeil bei Unterkategorien wie "Eisbecher" ebenfalls exakt mittig ------------------------------------------------------ */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu li.gfs-has-submenu > .gfs-submenu-toggle { width: 40px !important; height: 40px !important; right: 2px !important; } #mobile-drawer #mega-menu-primary ul.mega-sub-menu li.gfs-has-submenu > a.mega-menu-link { padding-right: 46px !important; } /* ------------------------------------------------------ 3. Ebene – z.B. Eisbecher → Pappbecher / Bio-Pappbecher ... ------------------------------------------------------ */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu { width: calc(100% - 12px) !important; margin: 4px 0 8px 12px !important; padding: 4px 8px !important; box-sizing: border-box !important; background: rgba(255,255,255,.24) !important; border: 0 !important; border-radius: 7px !important; box-shadow: none !important; } } /* ========================================================== GFS – MOBILE MEGA MENU 3. EBENE FEINSCHLIFF ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ 3. EBENE – z.B. Eisbecher → Pappbecher / Bio-Pappbecher ... ------------------------------------------------------ */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu { width: calc(100% - 18px) !important; margin: 5px 0 10px 12px !important; padding: 4px 8px 4px 12px !important; box-sizing: border-box !important; background: rgba(255,255,255,.20) !important; border: 0 !important; border-left: 2px solid rgba(153,105,58,.55) !important; border-radius: 0 7px 7px 0 !important; box-shadow: none !important; } /* ------------------------------------------------------ EINTRÄGE DER 3. EBENE ------------------------------------------------------ */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { min-height: 36px !important; padding: 8px 6px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(70,50,30,.08) !important; border-radius: 0 !important; font-size: 13px !important; line-height: 1.3 !important; font-weight: 400 !important; color: #111 !important; box-shadow: none !important; } /* Letzter Eintrag ohne Trennlinie */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item:last-child > a.mega-menu-link { border-bottom: 0 !important; } /* Antippen / Fokus */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus { background: rgba(255,255,255,.22) !important; border-radius: 4px !important; } } /* ========================================================== GFS – MOBILE MEGA MENU 3. EBENE NOCH RUHIGER ========================================================== */ @media (max-width: 768px) { #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu { background: rgba(255,255,255,.12) !important; border-left: 2px solid rgba(150,100,55,.75) !important; border-radius: 0 6px 6px 0 !important; } #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { padding: 7px 6px !important; font-size: 13px !important; border-bottom: 1px solid rgba(70,50,30,.07) !important; } } /* ========================================================== GFS – MOBILE MEGA MENU Usercentrics-Zahnrad bei geöffnetem Menü ausblenden ========================================================== */ @media (max-width: 768px) { body:has(#mobile-drawer.show-drawer) #usercentrics-root, body:has(#mobile-drawer.active) #usercentrics-root { display: none !important; } } /* ========================================================== GFS – MOBILE MENÜ FUNKTIONSLEISTE ========================================================== */ @media (max-width: 768px) { .gfs-mobile-menu-tools { width: 100%; padding: 10px 22px 14px 22px; box-sizing: border-box; background: #bd966c; } /* ====================================================== SUCHE ====================================================== */ .gfs-mobile-tool-search { display: flex; align-items: center; gap: 11px; width: 100%; height: 46px; margin: 0 0 10px 0; padding: 0 15px; background: rgba(255,255,255,.23); border: 1px solid rgba(70,45,25,.15); border-radius: 9px; box-shadow: none; color: #111; font-family: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; } /* Lupe */ .gfs-mobile-search-icon { position: relative; flex: 0 0 16px; width: 16px; height: 16px; border: 1.7px solid #111; border-radius: 50%; box-sizing: border-box; } .gfs-mobile-search-icon::after { content: ""; position: absolute; width: 7px; height: 1.7px; right: -5px; bottom: -3px; background: #111; transform: rotate(45deg); transform-origin: left center; } /* ====================================================== WARENKORB + KONTO ====================================================== */ .gfs-mobile-tool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .gfs-mobile-tool-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 8px 10px; box-sizing: border-box; background: transparent; border: 1px solid rgba(70,45,25,.20); border-radius: 8px; box-shadow: none; color: #111; font-family: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; } .gfs-mobile-tool-button:hover, .gfs-mobile-tool-button:focus { background: rgba(255,255,255,.15); color: #111; text-decoration: none; } /* ====================================================== WARENKORB-ICON ====================================================== */ .gfs-mobile-cart-icon { position: relative; width: 17px; height: 15px; border: 1.5px solid #111; border-radius: 2px; box-sizing: border-box; } .gfs-mobile-cart-icon::before { content: ""; position: absolute; width: 8px; height: 5px; left: 3px; top: -6px; border: 1.5px solid #111; border-bottom: 0; border-radius: 5px 5px 0 0; } /* ====================================================== KONTO-ICON ====================================================== */ .gfs-mobile-account-icon { position: relative; width: 17px; height: 17px; } .gfs-mobile-account-icon::before { content: ""; position: absolute; left: 5px; top: 0; width: 7px; height: 7px; border: 1.5px solid #111; border-radius: 50%; } .gfs-mobile-account-icon::after { content: ""; position: absolute; left: 2px; bottom: 0; width: 13px; height: 7px; border: 1.5px solid #111; border-radius: 8px 8px 3px 3px; } /* ====================================================== WARENKORBANZAHL ====================================================== */ .gfs-mobile-cart-count { position: absolute; top: -6px; right: -5px; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; background: #eadbc9; border: 1px solid #bd966c; border-radius: 999px; color: #111; font-size: 10px; font-weight: 700; } /* ====================================================== ABMELDEN ====================================================== */ .gfs-mobile-logout { display: block; width: fit-content; margin: 11px auto 0 auto; padding: 2px 4px; color: rgba(17,17,17,.75); font-size: 12px; line-height: 1.3; text-decoration: underline; text-underline-offset: 3px; } .gfs-mobile-logout:hover, .gfs-mobile-logout:focus { color: #111; } } /* ========================================================== GFS – MOBILE MENÜ TOOLS FEINSCHLIFF ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ SUCHE – KLARES WEISSES FELD ------------------------------------------------------ */ .gfs-mobile-tool-search { height: 48px !important; margin-bottom: 12px !important; padding: 0 15px !important; background: #ffffff !important; border: 1px solid #c99a63 !important; border-radius: 8px !important; color: #111 !important; box-shadow: 0 2px 7px rgba(0,0,0,.06) !important; font-size: 14px !important; } /* ------------------------------------------------------ WARENKORB + MEIN KONTO DEUTLICHER SICHTBAR ------------------------------------------------------ */ .gfs-mobile-tool-row { gap: 10px !important; } .gfs-mobile-tool-button { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; min-height: 48px !important; padding: 10px 13px !important; background: #eadbc9 !important; border: 1px solid #a97848 !important; border-radius: 8px !important; color: #111 !important; box-shadow: 0 2px 6px rgba(0,0,0,.06) !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; } .gfs-mobile-tool-button:hover, .gfs-mobile-tool-button:focus { background: #f1e5d6 !important; border-color: #8f643b !important; color: #111 !important; } /* Icons dürfen nicht zusammengedrückt werden */ .gfs-mobile-cart-icon, .gfs-mobile-account-icon { flex: 0 0 18px !important; width: 18px !important; min-width: 18px !important; } /* Text sauber daneben */ .gfs-mobile-tool-label { display: block !important; flex: 1 1 auto !important; white-space: nowrap !important; } /* Warenkorb-Zähler etwas sauberer */ .gfs-mobile-cart-count { top: -7px !important; right: -4px !important; min-width: 21px !important; height: 21px !important; background: #ffffff !important; border: 1px solid #a97848 !important; font-size: 10px !important; font-weight: 700 !important; box-shadow: 0 1px 4px rgba(0,0,0,.10) !important; } /* Falls alte Abmelde-Ausgabe irgendwo noch gecacht ist */ .gfs-mobile-logout { display: none !important; } } /* ========================================================== GFS – MOBILE MENÜ TOOLS + NAVIGATION FEINSCHLIFF ========================================================== */ @media (max-width: 768px) { /* ====================================================== 1. ECHTES SUCHFELD ====================================================== */ .gfs-mobile-search-form { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; height: 48px !important; margin: 0 0 12px 0 !important; padding: 0 14px !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #111 !important; border-radius: 8px !important; box-shadow: none !important; } .gfs-mobile-search-input { display: block !important; flex: 1 1 auto !important; width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 0 0 13px !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #111 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; appearance: none !important; } .gfs-mobile-search-input::placeholder { color: #111 !important; opacity: 1 !important; } /* Lupe */ .gfs-mobile-search-form .gfs-mobile-search-icon { position: relative !important; flex: 0 0 16px !important; width: 16px !important; height: 16px !important; border: 1.7px solid #111 !important; border-radius: 50% !important; box-sizing: border-box !important; } .gfs-mobile-search-form .gfs-mobile-search-icon::after { content: "" !important; position: absolute !important; width: 7px !important; height: 1.7px !important; right: -5px !important; bottom: -3px !important; background: #111 !important; transform: rotate(45deg) !important; transform-origin: left center !important; } /* ====================================================== 2. WARENKORB + MEIN KONTO SCHWARZER RAHMEN ====================================================== */ .gfs-mobile-tool-button { background: #eadbc9 !important; border: 1px solid #111 !important; border-radius: 8px !important; color: #111 !important; box-shadow: none !important; } .gfs-mobile-tool-button:hover, .gfs-mobile-tool-button:focus { background: #f1e5d6 !important; border-color: #111 !important; color: #111 !important; } /* Warenkorb-Zähler ebenfalls klarer */ .gfs-mobile-cart-count { background: #fff !important; border: 1px solid #111 !important; color: #111 !important; } /* ====================================================== 3. NUR OBERKATEGORIEN FETT ====================================================== */ #mobile-drawer #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { font-weight: 600 !important; } /* Unterkategorien ausdrücklich normal lassen */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { font-weight: 400 !important; } /* Auch 3. Ebene normal */ #mobile-drawer #mega-menu-primary ul.mega-sub-menu ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { font-weight: 400 !important; } /* ====================================================== 4. HAMBURGER IM HEADER SCHWARZ ====================================================== */ #mobile-toggle, #mobile-toggle:hover, #mobile-toggle:focus { color: #111 !important; } #mobile-toggle .menu-toggle-icon, #mobile-toggle svg, #mobile-toggle svg.kadence-menu-svg { color: #111 !important; fill: currentColor !important; stroke: currentColor !important; } #mobile-toggle svg * { color: #111 !important; stroke: currentColor !important; } } /* ========================================= MOBILE HAMBURGER – schlanker / feiner ========================================= */ @media (max-width: 768px) { .menu-toggle-style-default .menu-toggle-icon, .menu-toggle-style-default .menu-toggle-icon::before, .menu-toggle-style-default .menu-toggle-icon::after { height: 2px !important; border-radius: 2px !important; } .menu-toggle-style-default .menu-toggle-icon { width: 22px !important; } .menu-toggle-style-default .menu-toggle-icon::before { top: -6px !important; } .menu-toggle-style-default .menu-toggle-icon::after { top: 6px !important; } } /* ========================================= MOBILE MENÜ – SUCHFELD + SUCHEN-BUTTON ========================================= */ @media (max-width: 768px) { .gfs-mobile-search-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .gfs-mobile-search-field { display: flex; align-items: center; gap: 10px; background: #ffffff !important; border: 1.5px solid #111 !important; border-radius: 10px; padding: 12px 14px; } .gfs-mobile-search-input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 16px; color: #111 !important; padding: 0 !important; } .gfs-mobile-search-input::placeholder { color: #444 !important; opacity: 1; } .gfs-mobile-search-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; background: #f7efe4; border: 1.5px solid #111; color: #111; border-radius: 10px; font-weight: 700; font-size: 15px; padding: 10px 16px; cursor: pointer; } .gfs-mobile-search-submit:hover, .gfs-mobile-search-submit:focus { background: #efe2d0; color: #111; } } /* ========================================================== GFS – MOBILE MENÜ TOOLS FINAL Suche + Warenkorb + Konto + schlanker Hamburger ========================================================== */ @media (max-width: 768px) { /* ====================================================== FUNKTIONSBEREICH ====================================================== */ #mobile-drawer .gfs-mobile-menu-tools { width: 100% !important; padding: 10px 22px 16px 22px !important; box-sizing: border-box !important; background: transparent !important; } /* ====================================================== SUCHE Eingabefeld + Suchen-Button nebeneinander ====================================================== */ #mobile-drawer .gfs-mobile-search-form { display: grid !important; grid-template-columns: minmax(0, 1fr) 88px !important; gap: 8px !important; align-items: stretch !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 12px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Weißes Suchfeld */ #mobile-drawer .gfs-mobile-search-field { display: flex !important; align-items: center !important; gap: 11px !important; width: 100% !important; height: 48px !important; min-width: 0 !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #111 !important; border-radius: 8px !important; box-shadow: none !important; } #mobile-drawer .gfs-mobile-search-input { display: block !important; flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 44px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #111 !important; font-family: inherit !important; font-size: 14px !important; font-weight: 400 !important; appearance: none !important; } #mobile-drawer .gfs-mobile-search-input::placeholder { color: #444 !important; opacity: 1 !important; } /* ====================================================== SUCHEN-BUTTON ====================================================== */ #mobile-drawer .gfs-mobile-search-submit { display: flex !important; align-items: center !important; justify-content: center !important; width: 88px !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box !important; background: #eadbc9 !important; border: 1px solid #111 !important; border-radius: 8px !important; box-shadow: none !important; color: #111 !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer !important; } #mobile-drawer .gfs-mobile-search-submit:hover, #mobile-drawer .gfs-mobile-search-submit:focus { background: #f2e7d9 !important; color: #111 !important; } /* ====================================================== LUPE ====================================================== */ #mobile-drawer .gfs-mobile-search-icon { position: relative !important; flex: 0 0 16px !important; width: 16px !important; height: 16px !important; margin: 0 !important; border: 1.5px solid #111 !important; border-radius: 50% !important; box-sizing: border-box !important; } #mobile-drawer .gfs-mobile-search-icon::after { content: "" !important; position: absolute !important; width: 7px !important; height: 1.5px !important; right: -5px !important; bottom: -3px !important; background: #111 !important; transform: rotate(45deg) !important; transform-origin: left center !important; } /* ====================================================== WARENKORB + MEIN KONTO ====================================================== */ #mobile-drawer .gfs-mobile-tool-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; margin: 0 !important; } #mobile-drawer .gfs-mobile-tool-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-width: 0 !important; min-height: 48px !important; margin: 0 !important; padding: 9px 10px !important; box-sizing: border-box !important; background: #eadbc9 !important; border: 1px solid #111 !important; border-radius: 8px !important; box-shadow: none !important; color: #111 !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; } #mobile-drawer .gfs-mobile-tool-label { white-space: nowrap !important; } /* ========================================================== GFS – MOBILE HEADER MENÜBUTTON FINAL ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ BUTTON ------------------------------------------------------ */ #mobile-toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; margin: 0 !important; padding: 0 !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(17,17,17,.20) !important; border-radius: 7px !important; box-shadow: none !important; color: #111 !important; } /* Falls vom früheren Versuch noch "Menü" erzeugt wird */ #mobile-toggle::before { content: none !important; display: none !important; } /* ------------------------------------------------------ ICON-CONTAINER ------------------------------------------------------ */ #mobile-toggle .menu-toggle-icon { position: relative !important; display: block !important; width: 20px !important; height: 14px !important; flex: 0 0 20px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; } /* ------------------------------------------------------ OBERER + MITTLERER STRICH ------------------------------------------------------ */ #mobile-toggle .menu-toggle-icon::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 20px !important; height: 2px !important; background: #111 !important; border-radius: 2px !important; /* mittlerer Strich */ box-shadow: 0 6px 0 #111 !important; } /* ------------------------------------------------------ UNTERER STRICH ------------------------------------------------------ */ #mobile-toggle .menu-toggle-icon::after { content: "" !important; position: absolute !important; left: 0 !important; top: 12px !important; width: 20px !important; height: 2px !important; background: #111 !important; border-radius: 2px !important; } /* ------------------------------------------------------ ORIGINALES KADENCE-ICON AUSBLENDEN ------------------------------------------------------ */ #mobile-toggle .menu-toggle-icon svg, #mobile-toggle .menu-toggle-icon .kadence-svg-iconset { display: none !important; } } /* ========================================================== GFS – MOBILE MENÜ FEINSCHLIFF mehr Abstand + Suchen-Button hervorheben ========================================================== */ @media (max-width: 768px) { /* Mehr Abstand zwischen Funktionsbereich und Kategorien */ #mobile-drawer .gfs-mobile-menu-tools { margin-bottom: 8px !important; } /* Suchen-Button klarer abheben */ #mobile-drawer .gfs-mobile-search-submit { background: #111 !important; color: #fff !important; border: 1px solid #111 !important; font-weight: 700 !important; } #mobile-drawer .gfs-mobile-search-submit:hover, #mobile-drawer .gfs-mobile-search-submit:focus { background: #2a2a2a !important; color: #fff !important; } } /* ========================================================== GFS – MOBILE MENÜ BRANDING + SUCHEN-BUTTON + TRENNLINIE ========================================================== */ @media (max-width: 768px) { /* ====================================================== KLEINES LOGO OBEN LINKS ====================================================== */ #mobile-drawer .gfs-mobile-drawer-brand { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 50px !important; margin: 0 0 10px 0 !important; padding: 0 !important; box-sizing: border-box !important; } #mobile-drawer .gfs-mobile-menu-logo-img { display: block !important; width: auto !important; height: 46px !important; max-width: 70px !important; object-fit: contain !important; margin: 0 !important; } /* ====================================================== SUCHEN-BUTTON – SHOP-BRAUN STATT SCHWARZ ====================================================== */ #mobile-drawer .gfs-mobile-search-submit { background: #8f6842 !important; color: #fff !important; border: 1px solid #765536 !important; box-shadow: none !important; font-weight: 700 !important; } #mobile-drawer .gfs-mobile-search-submit:hover, #mobile-drawer .gfs-mobile-search-submit:focus { background: #7d5b3a !important; color: #fff !important; } /* ====================================================== ETWAS LUFT NACH DEN FUNKTIONSBUTTONS ====================================================== */ #mobile-drawer .gfs-mobile-menu-tools { margin-bottom: 12px !important; } /* ====================================================== TRENNLINIE VOR DEN KATEGORIEN ====================================================== */ #mobile-drawer #mega-menu-wrap-primary { position: relative !important; padding-top: 15px !important; } #mobile-drawer #mega-menu-wrap-primary::before { content: "" !important; position: absolute !important; top: 0 !important; left: 22px !important; right: 22px !important; height: 1px !important; background: rgba(70,45,25,.28) !important; } } /* ========================================================== GFS – MOBILE MENÜ Logo in Kopfzeile + Trennlinie vor Kategorien ========================================================== */ @media (max-width: 768px) { /* Drawer als Bezugspunkt fürs Logo */ #mobile-drawer .drawer-inner { position: relative !important; } /* ------------------------------------------------------ LOGO OBEN LINKS AUF HÖHE DES X ------------------------------------------------------ */ #mobile-drawer .gfs-mobile-menu-tools { position: static !important; } #mobile-drawer .gfs-mobile-drawer-brand { position: absolute !important; top: 10px !important; left: 22px !important; z-index: 50 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; height: 44px !important; margin: 0 !important; padding: 0 !important; } #mobile-drawer .gfs-mobile-menu-logo-img { display: block !important; width: auto !important; height: 42px !important; max-width: 60px !important; margin: 0 !important; object-fit: contain !important; } /* ------------------------------------------------------ LOGO NIMMT IM FUNKTIONSBEREICH KEINEN PLATZ MEHR EIN ------------------------------------------------------ */ #mobile-drawer .gfs-mobile-menu-tools { padding-top: 10px !important; margin-bottom: 0 !important; } /* ------------------------------------------------------ DEUTLICHE TRENNLINIE NACH WARENKORB | MEIN KONTO ------------------------------------------------------ */ #mobile-drawer .gfs-mobile-menu-tools::after { content: "" !important; display: block !important; width: 100% !important; height: 1px !important; margin-top: 18px !important; background: rgba(70,45,25,.32) !important; } /* Abstand zwischen Linie und erster Kategorie */ #mobile-drawer #mega-menu-wrap-primary { margin-top: 12px !important; padding-top: 0 !important; border-top: 0 !important; } /* alten Trennlinien-Versuch deaktivieren */ #mobile-drawer #mega-menu-wrap-primary::before { content: none !important; display: none !important; } } /* ========================================================== GFS – MOBILE MENÜ LOGO / TRENNLINIEN / SUCHEN-BUTTON / DRAWER-HINTERGRUND ========================================================== */ @media (max-width: 768px) { /* ====================================================== 1. GESAMTER DRAWER DURCHGEHEND GLEICHES BRAUN beseitigt den dunklen Bereich unten ====================================================== */ #mobile-drawer, #mobile-drawer .drawer-inner, #mobile-drawer .drawer-content { background: #bd966c !important; } #mobile-drawer .drawer-inner { min-height: 100vh !important; } #mobile-drawer .drawer-content { min-height: 100% !important; } /* ====================================================== 2. KOPFZEILE MIT LOGO + X ====================================================== */ #mobile-drawer .drawer-header { position: relative !important; min-height: 64px !important; background: #bd966c !important; border-bottom: 0 !important; box-shadow: none !important; } /* gleiche Trennlinie wie unter Warenkorb / Konto */ #mobile-drawer .drawer-header::after { content: "" !important; position: absolute !important; left: 22px !important; right: 22px !important; bottom: 0 !important; height: 1px !important; background: rgba(70,45,25,.32) !important; } /* ====================================================== 3. LOGO OBEN LINKS GRÖSSER ====================================================== */ #mobile-drawer .gfs-mobile-drawer-brand { position: absolute !important; top: 4px !important; left: 22px !important; z-index: 50 !important; display: flex !important; align-items: center !important; width: 82px !important; height: 56px !important; margin: 0 !important; padding: 0 !important; } #mobile-drawer .gfs-mobile-menu-logo-img { display: block !important; width: auto !important; height: 55px !important; max-width: 82px !important; max-height: 55px !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } /* ====================================================== 4. SUCHEN-BUTTON gleiche Designfamilie, aber weiterhin hervorgehoben ====================================================== */ #mobile-drawer .gfs-mobile-search-submit { background: #9d744c !important; color: #111 !important; border: 1px solid #765536 !important; box-shadow: none !important; font-weight: 700 !important; } #mobile-drawer .gfs-mobile-search-submit:hover, #mobile-drawer .gfs-mobile-search-submit:focus { background: #aa8056 !important; color: #111 !important; } /* ====================================================== 5. TRENNLINIE UNTER WARENKORB / MEIN KONTO exakt gleiche Optik wie oben ====================================================== */ #mobile-drawer .gfs-mobile-menu-tools::after { content: "" !important; display: block !important; width: 100% !important; height: 1px !important; margin-top: 18px !important; background: rgba(70,45,25,.32) !important; } /* Abstand nach der Linie bis zur ersten Kategorie */ #mobile-drawer #mega-menu-wrap-primary { margin-top: 12px !important; } } /* ========================================================== GFS – MOBILE MEIN KONTO FINALER FEINSCHLIFF ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ 1. HERO "MEIN KONTO" ETWAS KOMPAKTER ------------------------------------------------------ */ body.woocommerce-account .entry-hero { min-height: 190px !important; } body.woocommerce-account .entry-hero-container-inner { min-height: 190px !important; padding-top: 35px !important; padding-bottom: 35px !important; } /* ------------------------------------------------------ 2. KONTODATEN-FORMULAR Vorname / Nachname untereinander ------------------------------------------------------ */ body.woocommerce-account .woocommerce-EditAccountForm .form-row-first, body.woocommerce-account .woocommerce-EditAccountForm .form-row-last { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* alle Eingabefelder volle Breite */ body.woocommerce-account .woocommerce-EditAccountForm input.input-text { width: 100% !important; box-sizing: border-box !important; } /* ------------------------------------------------------ 3. PASSWORT-BEREICH ------------------------------------------------------ */ body.woocommerce-account .woocommerce-EditAccountForm fieldset { margin-top: 26px !important; padding: 18px 16px !important; border: 1px solid #c99a63 !important; border-radius: 5px !important; } body.woocommerce-account .woocommerce-EditAccountForm fieldset legend { padding: 0 8px !important; font-weight: 700 !important; } /* ------------------------------------------------------ 4. SPEICHERN-BUTTON DEUTLICHER ------------------------------------------------------ */ body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] { width: 100% !important; min-height: 46px !important; margin-top: 18px !important; font-weight: 700 !important; } /* ------------------------------------------------------ 5. ADRESSEN Bearbeiten-Link sauber platzieren ------------------------------------------------------ */ body.woocommerce-account .woocommerce-Address-title { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; } body.woocommerce-account .woocommerce-Address-title h2 { margin-bottom: 12px !important; } body.woocommerce-account .woocommerce-Address-title .edit { float: none !important; white-space: nowrap !important; } } /* ========================================================== GFS – MOBILE MEIN KONTO Hero kompakter ========================================================== */ @media (max-width: 768px) { body.woocommerce-account section.entry-hero { min-height: 220px !important; height: 220px !important; } body.woocommerce-account .entry-hero-container-inner { min-height: 220px !important; height: 220px !important; padding-top: 20px !important; padding-bottom: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.woocommerce-account .entry-hero h1 { margin: 0 !important; font-size: 30px !important; line-height: 1.15 !important; } } /* ========================================================== GFS – MOBILE MEIN KONTO HERO KOMPAKT WIE KATEGORIESEITEN ========================================================== */ @media (max-width: 768px) { body.woocommerce-account section.entry-hero { min-height: 88px !important; height: 88px !important; } body.woocommerce-account .entry-hero-container-inner { min-height: 88px !important; height: 88px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.woocommerce-account .entry-hero h1 { margin: 0 !important; font-size: 29px !important; line-height: 1.15 !important; } } /* ========================================================== GFS – MOBILE SUCHE Lupe sauber und filigran ========================================================== */ @media (max-width: 768px) { #mobile-drawer .gfs-mobile-search-icon { display: block !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important; } /* alten selbstgebauten Griff entfernen */ #mobile-drawer .gfs-mobile-search-icon::after { content: none !important; display: none !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN HERO + BREADCRUMB SAUBER GETRENNT ========================================================== */ @media (max-width: 768px) { /* ====================================================== HERO DARF VOLLSTÄNDIG NACH INHALT WACHSEN ====================================================== */ body.tax-product_cat section.product-archive-hero-section { height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow: visible !important; } body.tax-product_cat section.product-archive-hero-section .entry-hero-container-inner, body.tax-product_cat section.product-archive-hero-section .hero-container, body.tax-product_cat section.product-archive-hero-section .entry-header { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* Hero-Inhalt */ body.tax-product_cat section.product-archive-hero-section .entry-header { width: 100% !important; padding: 26px 12px 28px 12px !important; box-sizing: border-box !important; text-align: center !important; } /* Titel */ body.tax-product_cat section.product-archive-hero-section h1.page-title { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 28px !important; line-height: 1.15 !important; white-space: normal !important; overflow: visible !important; } /* Beschreibung */ body.tax-product_cat section.product-archive-hero-section .term-description, body.tax-product_cat section.product-archive-hero-section .archive-description { width: 100% !important; margin: 16px auto 0 auto !important; padding: 0 10px !important; box-sizing: border-box !important; overflow: visible !important; } /* ====================================================== BREADCRUMB – JETZT ECHTER EIGENER BEREICH ====================================================== */ body.tax-product_cat #kadence-breadcrumbs.gfs-mobile-category-breadcrumb { position: static !important; display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 14px 24px !important; box-sizing: border-box !important; transform: none !important; background: #fff !important; color: #111 !important; font-size: 14px !important; line-height: 1.5 !important; text-align: left !important; white-space: normal !important; overflow: visible !important; z-index: auto !important; } body.tax-product_cat #kadence-breadcrumbs.gfs-mobile-category-breadcrumb a { color: #111 !important; text-decoration: none !important; } } /* ========================================================== GFS – MOBILE SHOP Abstände zwischen Kategorie- und Produktkacheln reduzieren ========================================================== */ @media (max-width: 768px) { .woocommerce ul.products, .woocommerce-page ul.products { row-gap: 8px !important; gap: 8px !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce ul.products li.product-category, .woocommerce-page ul.products li.product-category { margin-top: 0 !important; margin-bottom: 0 !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN Breadcrumb → erste Kachel kompakter ========================================================== */ @media (max-width: 768px) { /* Breadcrumb selbst kompakt halten */ body.tax-product_cat #kadence-breadcrumbs.gfs-mobile-category-breadcrumb { padding-top: 8px !important; padding-bottom: 4px !important; margin-bottom: 0 !important; } /* Kadence-Contentbereich direkt darunter */ body.tax-product_cat #primary, body.tax-product_cat #primary.content-area, body.tax-product_cat #primary .content-container, body.tax-product_cat #primary .site-main { margin-top: 0 !important; padding-top: 0 !important; } /* WooCommerce selbst */ body.tax-product_cat #primary .woocommerce { margin-top: 0 !important; padding-top: 0 !important; } /* Grid der Kategorie-/Produktkacheln */ body.tax-product_cat #primary ul.products { margin-top: 8px !important; padding-top: 0 !important; } /* Falls vor dem Grid noch leere Wrapper Raum erzeugen */ body.tax-product_cat #primary .woocommerce-notices-wrapper:empty { display: none !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN Breadcrumb + Sortierung kompakter ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ BREADCRUMB KLEINER ------------------------------------------------------ */ body.tax-product_cat #kadence-breadcrumbs.gfs-mobile-category-breadcrumb { font-size: 13px !important; line-height: 1.4 !important; padding-top: 10px !important; padding-bottom: 10px !important; } body.tax-product_cat #kadence-breadcrumbs.gfs-mobile-category-breadcrumb a { font-size: inherit !important; } /* ------------------------------------------------------ "ALLE X ERGEBNISSE ..." ------------------------------------------------------ */ body.tax-product_cat .woocommerce-result-count { font-size: 13px !important; line-height: 1.35 !important; margin-top: 0 !important; margin-bottom: 10px !important; } /* ------------------------------------------------------ SORTIERUNG KOMPAKTER ------------------------------------------------------ */ body.tax-product_cat .woocommerce-ordering { margin-top: 0 !important; margin-bottom: 16px !important; } body.tax-product_cat .woocommerce-ordering select { font-size: 13px !important; min-height: 36px !important; padding-top: 6px !important; padding-bottom: 6px !important; } /* Falls Kadence den Select-Text separat stylt */ body.tax-product_cat .woocommerce-ordering, body.tax-product_cat .woocommerce-ordering * { font-size: 13px !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN Ergebnisanzahl fett + "Filtern nach:" ========================================================== */ @media (max-width: 768px) { /* Ergebnisanzahl fett */ body.tax-product_cat .woocommerce-result-count { font-weight: 700 !important; } /* "Filtern nach:" oberhalb der Sortierung */ body.tax-product_cat .woocommerce-ordering::before { content: "Filtern nach:"; display: block; margin: 0 0 6px 0; color: #111; font-size: 13px; line-height: 1.3; font-weight: 400; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN Ergebnis + Sortierung als kompakter Bereich ========================================================== */ @media (max-width: 768px) { /* Ergebnisanzahl – oberer Teil */ body.tax-product_cat .woocommerce-result-count { margin: 0 !important; padding: 12px 14px 7px !important; background: rgba(189,150,108,.12) !important; border: 1px solid rgba(160,110,65,.28) !important; border-bottom: 0 !important; border-radius: 8px 8px 0 0 !important; color: #111 !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* Sortierbereich – unterer Teil */ body.tax-product_cat .woocommerce-ordering { width: 100% !important; margin: 0 0 18px 0 !important; padding: 5px 14px 13px !important; box-sizing: border-box !important; background: rgba(189,150,108,.12) !important; border: 1px solid rgba(160,110,65,.28) !important; border-top: 0 !important; border-radius: 0 0 8px 8px !important; } /* Beschriftung */ body.tax-product_cat .woocommerce-ordering::before { content: "Filtern nach:"; display: block !important; margin: 0 0 6px 0 !important; color: rgba(17,17,17,.68) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 400 !important; } /* Dropdown selbst */ body.tax-product_cat .woocommerce-ordering select { display: block !important; width: 100% !important; height: 40px !important; margin: 0 !important; padding: 0 36px 0 11px !important; box-sizing: border-box !important; background-color: #fff !important; border: 1px solid rgba(160,110,65,.42) !important; border-radius: 6px !important; box-shadow: none !important; color: #111 !important; font-size: 13px !important; font-weight: 600 !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN Abstand Breadcrumb → Ergebnis-/Sortierbereich reduzieren ========================================================== */ @media (max-width: 768px) { /* Breadcrumb unten etwas kompakter */ body.tax-product_cat #kadence-breadcrumbs.gfs-mobile-category-breadcrumb { padding-bottom: 6px !important; margin-bottom: 0 !important; } /* Abstand bis zum Ergebnis-/Sortierbereich verkleinern */ body.tax-product_cat .woocommerce-result-count { margin-top: 8px !important; } /* Falls davor noch ein WooCommerce-/Kadence-Wrapper Abstand erzeugt */ body.tax-product_cat #primary, body.tax-product_cat #primary .site-main, body.tax-product_cat #primary .woocommerce { padding-top: 0 !important; margin-top: 0 !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN Shop-Steuerung final ausrichten ========================================================== */ @media (max-width: 768px) { /* Gesamten Bereich näher an Breadcrumb heranholen */ body.tax-product_cat .kadence-shop-top-row { margin-top: 12px !important; margin-bottom: 16px !important; padding-top: 0 !important; gap: 0 !important; } /* Ergebniszeile über volle Breite */ body.tax-product_cat .woocommerce-result-count { display: block !important; float: none !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } /* Sortierblock exakt gleich breit */ body.tax-product_cat .woocommerce-ordering { display: block !important; float: none !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } /* Select ebenfalls volle Breite */ body.tax-product_cat .woocommerce-ordering select { width: 100% !important; box-sizing: border-box !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN Ergebnis + Sortierung exakt gleiche Breite ========================================================== */ @media (max-width: 768px) { body.tax-product_cat .kadence-shop-top-row { display: block !important; width: 100% !important; margin-top: 6px !important; margin-bottom: 16px !important; padding: 0 !important; } body.tax-product_cat .woocommerce-result-count, body.tax-product_cat .woocommerce-ordering { display: block !important; float: none !important; width: 100% !important; max-width: none !important; flex: none !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } body.tax-product_cat .woocommerce-ordering select { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } } /* ========================================================== GFS – MOBILE PRODUKTKATEGORIEN Ergebnis + Sortierung als EIN zusammenhängender Block ========================================================== */ @media (max-width: 768px) { /* Gemeinsame Karte */ body.tax-product_cat .kadence-shop-top-row { display: block !important; width: 100% !important; margin-top: 6px !important; margin-bottom: 16px !important; padding: 0 !important; background: rgba(189,150,108,.12) !important; border: 1px solid rgba(160,110,65,.28) !important; border-radius: 8px !important; overflow: hidden !important; box-sizing: border-box !important; } /* Ergebniszeile */ body.tax-product_cat .woocommerce-result-count { display: block !important; width: 100% !important; margin: 0 !important; padding: 12px 14px 8px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-weight: 700 !important; } /* Sortierbereich */ body.tax-product_cat .woocommerce-ordering { display: block !important; width: 100% !important; margin: 0 !important; padding: 4px 14px 12px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; } /* "Filtern nach:" */ body.tax-product_cat .woocommerce-ordering::before { margin: 0 0 6px 0 !important; font-size: 12px !important; color: rgba(17,17,17,.65) !important; } /* Dropdown */ body.tax-product_cat .woocommerce-ordering select { width: 100% !important; height: 40px !important; margin: 0 !important; background: #fff !important; border: 1px solid rgba(160,110,65,.42) !important; border-radius: 6px !important; box-sizing: border-box !important; } } /* ========================================================== GFS – MOBILE PRODUKTDETAIL Mengensteuerung − 1 + ========================================================== */ @media (max-width: 768px) { body.single-product form.cart .quantity.gfs-qty-ready { display: inline-flex !important; align-items: stretch !important; width: auto !important; height: 44px !important; margin: 0 !important; border: 1px solid #c99a63 !important; border-radius: 5px !important; overflow: hidden !important; background: #fff !important; } body.single-product form.cart .quantity.gfs-qty-ready input.qty { width: 48px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-left: 1px solid #e1c8aa !important; border-right: 1px solid #e1c8aa !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; color: #111 !important; font-size: 15px !important; text-align: center !important; appearance: textfield !important; -moz-appearance: textfield !important; } /* Browser-eigene Spinner ausblenden */ body.single-product form.cart .quantity.gfs-qty-ready input.qty::-webkit-inner-spin-button, body.single-product form.cart .quantity.gfs-qty-ready input.qty::-webkit-outer-spin-button { margin: 0 !important; -webkit-appearance: none !important; } body.single-product form.cart .gfs-qty-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; background: #f4eadf !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #111 !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important; cursor: pointer !important; } body.single-product form.cart .gfs-qty-button:active { background: #e8d5be !important; } } /* ========================================================== GFS – MOBILE PRODUKTDETAIL Beschreibung + VE + Menge/Warenkorb FINAL ========================================================== */ @media (max-width: 768px) { /* ====================================================== 1. KURZBESCHREIBUNG KOMPAKTER ====================================================== */ body.single-product .summary .woocommerce-product-details__short-description { margin-top: 0 !important; margin-bottom: 18px !important; line-height: 1.32 !important; } body.single-product .summary .woocommerce-product-details__short-description p { margin-top: 0 !important; margin-bottom: 6px !important; line-height: 1.32 !important; } body.single-product .summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0 !important; } body.single-product .summary .woocommerce-product-details__short-description ul { margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 18px !important; } body.single-product .summary .woocommerce-product-details__short-description li { margin: 0 0 5px 0 !important; line-height: 1.32 !important; } /* ====================================================== 2. VARIATIONS-BEREICH KOMPAKTER ====================================================== */ body.single-product form.variations_form table.variations { margin-top: 0 !important; margin-bottom: 8px !important; } body.single-product form.variations_form table.variations th.label { vertical-align: middle !important; padding-right: 12px !important; font-weight: 700 !important; } /* ====================================================== 3. VE-PFLICHTAUSWAHL DEUTLICH HERVORHEBEN ====================================================== */ body.single-product form.variations_form table.variations td.value select, body.single-product form.variations_form table.variations select { width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 8px 36px 8px 12px !important; box-sizing: border-box !important; background: #f3e6d6 !important; border: 1px solid #c99a63 !important; border-radius: 5px !important; color: #111 !important; font-size: 15px !important; font-weight: 500 !important; box-shadow: none !important; } body.single-product form.variations_form table.variations select:focus { outline: none !important; border-color: #9d744c !important; box-shadow: 0 0 0 2px rgba(189,150,108,.20) !important; } /* Zurücksetzen-Link etwas kompakter */ body.single-product form.variations_form .reset_variations { display: inline-block !important; margin-top: 5px !important; font-size: 12px !important; } /* ====================================================== 4. MENGE + WARENKORB AUF EINER ZEILE Variable Produkte ====================================================== */ body.single-product .woocommerce-variation-add-to-cart.variations_button { display: grid !important; grid-template-columns: 126px minmax(0, 1fr) !important; column-gap: 10px !important; align-items: stretch !important; width: 100% !important; margin-top: 10px !important; } /* ====================================================== 5. MENGENSTEUERUNG exakt: Minus | Zahl | Plus ====================================================== */ body.single-product .quantity.gfs-qty-ready { display: grid !important; grid-template-columns: 38px 48px 38px !important; align-items: stretch !important; width: 126px !important; min-width: 126px !important; max-width: 126px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #c99a63 !important; border-radius: 5px !important; overflow: hidden !important; } /* Minus + Plus */ body.single-product .quantity.gfs-qty-ready .gfs-qty-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #f4eadf !important; border: 0 !important; border-radius: 0 !important; color: #111 !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; } body.single-product .quantity.gfs-qty-ready .gfs-qty-minus { grid-column: 1 !important; } body.single-product .quantity.gfs-qty-ready input.qty { grid-column: 2 !important; width: 48px !important; min-width: 0 !important; max-width: 48px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #fff !important; border: 0 !important; border-left: 1px solid #e1c8aa !important; border-right: 1px solid #e1c8aa !important; border-radius: 0 !important; color: #111 !important; font-size: 15px !important; text-align: center !important; box-shadow: none !important; appearance: textfield !important; -moz-appearance: textfield !important; } body.single-product .quantity.gfs-qty-ready .gfs-qty-plus { grid-column: 3 !important; } /* native Browser-Pfeile entfernen */ body.single-product .quantity.gfs-qty-ready input.qty::-webkit-inner-spin-button, body.single-product .quantity.gfs-qty-ready input.qty::-webkit-outer-spin-button { margin: 0 !important; -webkit-appearance: none !important; } /* ====================================================== 6. WARENKORB-BUTTON ====================================================== */ body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 8px 10px !important; box-sizing: border-box !important; white-space: nowrap !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 700 !important; } /* ====================================================== 7. EINFACHE PRODUKTE ebenfalls Menge + Warenkorb nebeneinander ====================================================== */ body.single-product .summary form.cart:not(.variations_form) { display: grid !important; grid-template-columns: 126px minmax(0, 1fr) !important; column-gap: 10px !important; align-items: stretch !important; width: 100% !important; } body.single-product .summary form.cart:not(.variations_form) .single_add_to_cart_button { width: 100% !important; min-width: 0 !important; margin: 0 !important; white-space: nowrap !important; } } /* ========================================================== GFS – MOBILE PRODUKTDETAIL Menge + Warenkorb wirklich nebeneinander ========================================================== */ @media (max-width: 768px) { /* Variable Produkte */ body.single-product form.variations_form .woocommerce-variation-add-to-cart.variations_button { display: grid !important; grid-template-columns: 126px minmax(0, 1fr) !important; grid-template-rows: 44px !important; column-gap: 10px !important; align-items: stretch !important; width: 100% !important; margin-top: 14px !important; padding: 0 !important; } /* Menge FEST in Spalte 1 */ body.single-product form.variations_form .woocommerce-variation-add-to-cart.variations_button > .quantity { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: stretch !important; margin: 0 !important; } /* Warenkorb FEST in Spalte 2 */ body.single-product form.variations_form .woocommerce-variation-add-to-cart.variations_button > .single_add_to_cart_button { grid-column: 2 !important; grid-row: 1 !important; justify-self: stretch !important; align-self: stretch !important; width: 100% !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 8px 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; white-space: nowrap !important; font-size: 14px !important; line-height: 1 !important; } /* WooCommerce-Hidden-Inputs dürfen das Grid nicht beeinflussen */ body.single-product form.variations_form .woocommerce-variation-add-to-cart.variations_button > input[type="hidden"] { display: none !important; } /* ------------------------------------------------------ VE-ZEILE noch etwas sauberer ausrichten ------------------------------------------------------ */ body.single-product form.variations_form table.variations th.label { width: 40px !important; padding: 0 10px 0 0 !important; vertical-align: middle !important; } body.single-product form.variations_form table.variations td.value { padding: 0 !important; } } /* ========================================================== GFS – MOBILE PRODUKTDETAIL Abstand Warenkorb → Artikelnummer wirklich reduzieren ========================================================== */ @media (max-width: 768px) { /* Gesamtes Warenkorb-/Variationsformular unten kompakter */ body.single-product .summary form.cart { margin-bottom: 2px !important; padding-bottom: 0 !important; } /* Variations-Wrapper darf keinen Extra-Abstand erzeugen */ body.single-product .summary .single_variation_wrap { margin-bottom: 0 !important; padding-bottom: 0 !important; } body.single-product .summary .woocommerce-variation-add-to-cart { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Artikelnummer direkt anschließend */ body.single-product .summary .product_meta { margin-top: 0 !important; padding-top: 0 !important; } body.single-product .summary .product_meta .sku_wrapper { display: block !important; margin-top: 0 !important; padding-top: 0 !important; } } /* ========================================================== GFS – MOBILE PRODUKTDETAIL VE exakt zum Auswahlfeld ausrichten ========================================================== */ @media (max-width: 768px) { body.single-product form.variations_form table.variations th.label { vertical-align: top !important; padding-top: 11px !important; padding-right: 10px !important; padding-bottom: 0 !important; line-height: 20px !important; } body.single-product form.variations_form table.variations td.value { vertical-align: top !important; padding-top: 0 !important; } } /* ========================================================== GFS – B2B HINWEIS POPUP Mobile scrollbar + sauberer Viewport ========================================================== */ @media (max-width: 768px) { /* Popup selbst bleibt innerhalb des Handy-Bildschirms */ #popmake-3762 { display: flex !important; flex-direction: column !important; width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; height: auto !important; max-height: calc(100dvh - 32px) !important; box-sizing: border-box !important; overflow: hidden !important; } /* Nur der eigentliche weiße Inhalt scrollt */ #popmake-3762 > .pum-content { display: block !important; width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 64px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; box-sizing: border-box !important; /* etwas Platz, damit Text nicht unter dem X liegt */ padding-right: 8px !important; } /* X bleibt sichtbar und scrollt NICHT mit */ #popmake-3762 > .pum-close { position: absolute !important; z-index: 50 !important; } } /* ========================================================== GFS – B2B HINWEIS POPUP Mobile Typografie kompakter ========================================================== */ @media (max-width: 768px) { /* Popup etwas großzügiger in der Breite nutzen */ #popmake-3762 { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; padding: 22px 18px 20px !important; border-radius: 14px !important; } /* Grundschrift */ #popmake-3762 .pum-content { font-size: 16px !important; line-height: 1.48 !important; padding: 8px 4px 4px !important; } /* Absätze enger zusammen */ #popmake-3762 .pum-content p { margin-top: 0 !important; margin-bottom: 14px !important; font-size: 16px !important; line-height: 1.48 !important; } /* Überschrift */ #popmake-3762 .pum-content h1, #popmake-3762 .pum-content h2, #popmake-3762 .pum-content h3 { margin-top: 0 !important; margin-bottom: 18px !important; font-size: 24px !important; line-height: 1.25 !important; font-weight: 700 !important; } /* Falls "Liebe Kundinnen und Kunden" nur fett formatiert ist */ #popmake-3762 .pum-content p:first-child { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 18px !important; } /* Hervorgehobene Begriffe nicht unnötig vergrößern */ #popmake-3762 .pum-content strong, #popmake-3762 .pum-content b { font-size: inherit !important; line-height: inherit !important; } /* Schließen-Button kompakter */ #popmake-3762 .pum-close { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; top: 12px !important; right: 12px !important; padding: 0 !important; font-size: 20px !important; line-height: 40px !important; } } @media (max-width: 768px) { #popmake-3762 .pum-content p:first-child { font-size: 20px !important; line-height: 1.25 !important; margin-bottom: 16px !important; } #popmake-3762 { padding-top: 18px !important; } } /* ========================================================== GFS – B2B POPUP Mobiler Feinschliff ========================================================== */ @media (max-width: 768px) { /* Popup etwas feiner und moderner */ #popmake-3762 { border-width: 1px !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(0,0,0,.18) !important; padding: 18px 18px 20px !important; } /* Überschrift etwas ruhiger */ #popmake-3762 .pum-content p:first-child { font-size: 19px !important; line-height: 1.25 !important; margin-bottom: 16px !important; } /* Fließtext minimal kompakter */ #popmake-3762 .pum-content, #popmake-3762 .pum-content p { font-size: 16px !important; line-height: 1.43 !important; } #popmake-3762 .pum-content p { margin-bottom: 13px !important; } /* X kleiner und weniger dominant */ #popmake-3762 .pum-close { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; top: 10px !important; right: 10px !important; font-size: 18px !important; line-height: 36px !important; border-width: 1px !important; box-shadow: 0 4px 12px rgba(0,0,0,.12) !important; } } /* ========================================================== GFS – B2B POPUP Platz für Schließen-X in der Überschrift ========================================================== */ @media (max-width: 768px) { #popmake-3762 .pum-content p:first-child { padding-right: 52px !important; box-sizing: border-box !important; } #popmake-3762 .pum-close { top: 10px !important; right: 10px !important; z-index: 100 !important; } } /* ========================================================== GFS – MOBILE WARENKORB FINAL kompakter Hero + saubere Produktkarten + Warenkorb-Summe ========================================================== */ @media (max-width: 768px) { /* ====================================================== 1. HERO ====================================================== */ body.woocommerce-cart section.entry-hero { height: 88px !important; min-height: 88px !important; max-height: 88px !important; } body.woocommerce-cart .entry-hero-container-inner { height: 88px !important; min-height: 88px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.woocommerce-cart .entry-hero h1 { margin: 0 !important; font-size: 30px !important; line-height: 1.15 !important; } /* ====================================================== 2. HAUPTINHALT ====================================================== */ body.woocommerce-cart #primary { padding-top: 24px !important; } body.woocommerce-cart .cart-summary h2 { margin-top: 0 !important; margin-bottom: 18px !important; font-size: 25px !important; line-height: 1.2 !important; } /* ====================================================== 3. PRODUKTKARTEN Wichtig: Tabellenzellen NICHT auf flex umstellen ====================================================== */ body.woocommerce-cart table.shop_table.cart tr.cart_item { height: auto !important; max-height: none !important; margin-bottom: 10px !important; overflow: visible !important; background: #fff !important; border: 1px solid #d6a16a !important; border-radius: 6px !important; } /* Alle Zellen wieder normal behandeln */ body.woocommerce-cart table.shop_table.cart tr.cart_item td { height: auto !important; max-height: none !important; overflow: visible !important; background: transparent !important; box-sizing: border-box !important; } /* ====================================================== 4. PRODUKTNAME VOLLSTÄNDIG ANZEIGEN ====================================================== */ body.woocommerce-cart table.shop_table.cart td.product-name { height: auto !important; max-height: none !important; padding-top: 12px !important; padding-bottom: 10px !important; padding-right: 42px !important; overflow: visible !important; white-space: normal !important; line-height: 1.35 !important; } body.woocommerce-cart table.shop_table.cart td.product-name a { display: inline !important; height: auto !important; max-height: none !important; overflow: visible !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; line-height: 1.35 !important; } /* ====================================================== 5. PREIS / ANZAHL / ZWISCHENSUMME WooCommerce-Mobile-Struktur erhalten ====================================================== */ body.woocommerce-cart table.shop_table.cart td.product-price, body.woocommerce-cart table.shop_table.cart td.product-quantity, body.woocommerce-cart table.shop_table.cart td.product-subtotal { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 0 !important; overflow: visible !important; } /* Zwischensumme stärker */ body.woocommerce-cart table.shop_table.cart td.product-subtotal { font-weight: 700 !important; } /* Menge rechts weiterhin sauber */ body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity { margin-left: auto !important; } /* ====================================================== 6. ENTFERNEN-X ====================================================== */ body.woocommerce-cart table.shop_table.cart td.product-remove { background: transparent !important; } body.woocommerce-cart table.shop_table.cart a.remove { line-height: 1 !important; } /* ====================================================== 7. ABSTAND ZWISCHEN PRODUKTKARTEN ====================================================== */ body.woocommerce-cart table.shop_table.cart tbody { row-gap: 10px !important; } /* ====================================================== 8. WARENKORB-SUMME ====================================================== */ body.woocommerce-cart .cart-collaterals { margin-top: 28px !important; } body.woocommerce-cart .cart_totals h2 { margin-top: 0 !important; margin-bottom: 14px !important; font-size: 25px !important; line-height: 1.2 !important; } body.woocommerce-cart .cart_totals table.shop_table { margin-bottom: 18px !important; } body.woocommerce-cart .cart_totals table.shop_table th, body.woocommerce-cart .cart_totals table.shop_table td { padding-top: 12px !important; padding-bottom: 12px !important; vertical-align: middle !important; } /* Werte rechts */ body.woocommerce-cart .cart_totals table.shop_table td { text-align: right !important; } /* ====================================================== 9. FRACHT-HINWEIS ====================================================== */ body.woocommerce-cart .cart_totals + .woocommerce-info, body.woocommerce-cart .cart-collaterals .woocommerce-info { margin-top: 14px !important; margin-bottom: 18px !important; } /* ====================================================== 10. CHECKOUT-BUTTON ====================================================== */ body.woocommerce-cart .wc-proceed-to-checkout { padding-top: 0 !important; } body.woocommerce-cart .wc-proceed-to-checkout .checkout-button { width: 100% !important; min-height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; box-sizing: border-box !important; font-size: 18px !important; font-weight: 600 !important; } } /* ========================================================== GFS – MOBILE WARENKORB Abstand Hero → Warenkorb-Übersicht reduzieren ========================================================== */ @media (max-width: 768px) { body.woocommerce-cart #primary, body.woocommerce-cart #primary.content-area, body.woocommerce-cart #primary .site-main, body.woocommerce-cart #primary .content-wrap, body.woocommerce-cart #primary .entry-content-wrap, body.woocommerce-cart #primary .entry-content { margin-top: 0 !important; padding-top: 0 !important; } /* kontrollierter Abstand direkt nach dem Hero */ body.woocommerce-cart section.entry-hero + #primary { margin-top: 0 !important; padding-top: 12px !important; } /* Überschrift selbst ohne Extra-Abstand */ body.woocommerce-cart .cart-summary h2 { margin-top: 0 !important; margin-bottom: 16px !important; } } /* ========================================================== GFS – MOBILE WARENKORB doppelte Überschrift entfernen ========================================================== */ @media (max-width: 768px) { /* "Warenkorb-Übersicht" ausblenden */ body.woocommerce-cart .cart-summary > h2 { display: none !important; } /* Inhalt sauber unter dem Hero beginnen lassen */ body.woocommerce-cart #primary { padding-top: 16px !important; } /* erste Warenkorbkarte ohne zusätzlichen oberen Abstand */ body.woocommerce-cart .woocommerce-cart-form { margin-top: 0 !important; padding-top: 0 !important; } body.woocommerce-cart table.shop_table.cart { margin-top: 0 !important; } } /* ========================================================== GFS – MOBILE BESTELLBESTÄTIGUNG Bestellnummer / Datum / E-Mail kompakter ========================================================== */ @media (max-width: 768px) { /* Übersicht unter der Dankesmeldung */ body.woocommerce-order-received .woocommerce-order-overview { display: block !important; margin: 22px 0 26px !important; padding: 0 !important; list-style: none !important; } /* einzelne Angaben */ body.woocommerce-order-received .woocommerce-order-overview li { float: none !important; width: 100% !important; margin: 0 0 10px 0 !important; padding: 0 !important; border: 0 !important; border-right: 0 !important; color: #111 !important; font-size: 12px !important; line-height: 1.3 !important; text-transform: uppercase !important; } /* eigentliche Werte: Bestellnummer, Datum, E-Mail usw. */ body.woocommerce-order-received .woocommerce-order-overview li strong { display: block !important; margin-top: 2px !important; color: #111 !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 700 !important; text-transform: none !important; overflow-wrap: anywhere !important; word-break: normal !important; } /* E-Mail darf sauber umbrechen */ body.woocommerce-order-received .woocommerce-order-overview .woocommerce-order-overview__email strong { font-size: 16px !important; } /* Bestelldetails-Überschrift etwas kompakter */ body.woocommerce-order-received .woocommerce-order-details h2 { font-size: 25px !important; line-height: 1.2 !important; margin-top: 26px !important; margin-bottom: 16px !important; } } /* ========================================================== GFS – MOBILE BESTELLBESTÄTIGUNG Hero + Adresse + Lieferung/Abholung ========================================================== */ @media (max-width: 768px) { /* ====================================================== 1. HERO "KASSE" KOMPAKT wie Warenkorb / Mein Konto ====================================================== */ body.woocommerce-order-received section.entry-hero { height: 88px !important; min-height: 88px !important; max-height: 88px !important; } body.woocommerce-order-received .entry-hero-container-inner { height: 88px !important; min-height: 88px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.woocommerce-order-received .entry-hero h1 { margin: 0 !important; font-size: 30px !important; line-height: 1.15 !important; } /* ====================================================== 2. RECHNUNGSADRESSE / LIEFERADRESSE KLEINER ====================================================== */ body.woocommerce-order-received .woocommerce-customer-details h2, body.woocommerce-order-received .woocommerce-column__title { margin-top: 24px !important; margin-bottom: 14px !important; font-size: 25px !important; line-height: 1.2 !important; font-weight: 700 !important; } /* ====================================================== 3. LIEFERUNG / ABHOLUNG rechte Spalte bekommt genug Platz ====================================================== */ body.woocommerce-order-received .woocommerce-table--order-details tfoot th { width: 55% !important; padding-right: 10px !important; box-sizing: border-box !important; vertical-align: top !important; } body.woocommerce-order-received .woocommerce-table--order-details tfoot td { width: 45% !important; box-sizing: border-box !important; vertical-align: top !important; text-align: right !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; line-height: 1.35 !important; } /* speziell der Inhalt darf nicht Buchstabe für Buchstabe umbrechen */ body.woocommerce-order-received .woocommerce-table--order-details tfoot td, body.woocommerce-order-received .woocommerce-table--order-details tfoot td * { word-break: keep-all !important; overflow-wrap: normal !important; } } /* ========================================================== GFS – MOBILE BESTELLBESTÄTIGUNG Abstand Hero → Dankesbox reduzieren ========================================================== */ @media (max-width: 768px) { body.woocommerce-order-received #primary, body.woocommerce-order-received #primary.content-area, body.woocommerce-order-received #primary .site-main, body.woocommerce-order-received #primary .content-wrap, body.woocommerce-order-received #primary .entry-content-wrap, body.woocommerce-order-received #primary .entry-content { margin-top: 0 !important; padding-top: 0 !important; } /* kontrollierter Abstand direkt unter dem Hero */ body.woocommerce-order-received section.entry-hero + #primary { padding-top: 16px !important; margin-top: 0 !important; } /* Dankesbox selbst ohne zusätzlichen oberen Abstand */ body.woocommerce-order-received .woocommerce-thankyou-order-received { margin-top: 0 !important; } } /* ========================================================== GFS – MOBILE BESTELLBESTÄTIGUNG Bestellinfos als Karte ========================================================== */ @media (max-width: 768px) { body.woocommerce-order-received .woocommerce-order-overview { margin: 18px 0 24px !important; padding: 14px 16px !important; box-sizing: border-box !important; background: rgba(189,150,108,.08) !important; border: 1px solid #d6a16a !important; border-radius: 7px !important; list-style: none !important; } /* einzelne Angaben innerhalb der Karte */ body.woocommerce-order-received .woocommerce-order-overview li { margin: 0 0 10px 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-order-received .woocommerce-order-overview li:last-child { margin-bottom: 0 !important; } } /* ========================================================== GFS – BESTELLDETAILS Desktop + Mobil Beige Trennlinien + erkennbare Produktlinks ========================================================== */ /* ---------------------------------------------------------- 1. TRENNLINIEN IN BEIGE ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details th, .woocommerce-order-details table.woocommerce-table--order-details td { border-color: rgba(189, 150, 108, .48) !important; } /* Kopfzeile ebenfalls beige abgrenzen */ .woocommerce-order-details table.woocommerce-table--order-details thead th { border-bottom: 1px solid rgba(189, 150, 108, .55) !important; } /* Produktzeilen */ .woocommerce-order-details table.woocommerce-table--order-details tbody tr td { border-bottom: 1px solid rgba(189, 150, 108, .42) !important; } /* Summenbereich unten */ .woocommerce-order-details table.woocommerce-table--order-details tfoot th, .woocommerce-order-details table.woocommerce-table--order-details tfoot td { border-color: rgba(189, 150, 108, .48) !important; } /* ---------------------------------------------------------- 2. PRODUKTNAMEN ALS KLICKBARE LINKS ERKENNBAR MACHEN ---------------------------------------------------------- */ .woocommerce-order-details table.woocommerce-table--order-details td.woocommerce-table__product-name a, .woocommerce-order-details table.woocommerce-table--order-details td.product-name a { color: #bd966c !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: #bd966c !important; text-underline-offset: 2px !important; } /* Hover / Fokus etwas dunkler */ .woocommerce-order-details table.woocommerce-table--order-details td.woocommerce-table__product-name a:hover, .woocommerce-order-details table.woocommerce-table--order-details td.woocommerce-table__product-name a:focus, .woocommerce-order-details table.woocommerce-table--order-details td.product-name a:hover, .woocommerce-order-details table.woocommerce-table--order-details td.product-name a:focus { color: #8f6842 !important; text-decoration-color: #8f6842 !important; } /* ========================================================== GFS – BESTELLDETAILS DESKTOP Beige Trennlinien + klickbare Produktnamen ========================================================== */ @media (min-width: 769px) { /* ------------------------------------------------------ Produktlinks beige/golden ------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-order-details table.shop_table a, body.woocommerce-account .woocommerce-order-details table.shop_table a { color: #bd966c !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-color: #bd966c !important; text-underline-offset: 2px !important; } body.woocommerce-order-received .woocommerce-order-details table.shop_table a:hover, body.woocommerce-order-received .woocommerce-order-details table.shop_table a:focus, body.woocommerce-account .woocommerce-order-details table.shop_table a:hover, body.woocommerce-account .woocommerce-order-details table.shop_table a:focus { color: #8f6842 !important; text-decoration-color: #8f6842 !important; } /* ------------------------------------------------------ Kopfzeile beige ------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-order-details table.shop_table thead th, body.woocommerce-account .woocommerce-order-details table.shop_table thead th { border-bottom: 1px solid rgba(189,150,108,.50) !important; } /* ------------------------------------------------------ Produktzeilen beige trennen ------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-order-details table.shop_table tbody th, body.woocommerce-order-received .woocommerce-order-details table.shop_table tbody td, body.woocommerce-account .woocommerce-order-details table.shop_table tbody th, body.woocommerce-account .woocommerce-order-details table.shop_table tbody td { border-bottom: 1px solid rgba(189,150,108,.45) !important; border-color: rgba(189,150,108,.45) !important; } /* ------------------------------------------------------ Summenbereich ebenfalls beige ------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-order-details table.shop_table tfoot th, body.woocommerce-order-received .woocommerce-order-details table.shop_table tfoot td, body.woocommerce-account .woocommerce-order-details table.shop_table tfoot th, body.woocommerce-account .woocommerce-order-details table.shop_table tfoot td { border-color: rgba(189,150,108,.45) !important; } } /* ========================================================== GFS – BESTELLDETAILS Menge | Produkt | Gesamtsumme Desktop + Mobil ========================================================== */ /* ========================================================== GRUNDLAYOUT ========================================================== */ .woocommerce-order-details table.gfs-order-table-three-cols { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; } /* Desktop-Spalten */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-qty { width: 8% !important; } .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-product { width: 74% !important; } .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-total { width: 18% !important; } /* ========================================================== KOPFZEILE ========================================================== */ .woocommerce-order-details table.gfs-order-table-three-cols thead th { padding: 10px 12px !important; box-sizing: border-box !important; border-bottom: 1px solid rgba(189,150,108,.50) !important; color: #111 !important; font-weight: 700 !important; } .woocommerce-order-details th.gfs-order-quantity-heading { text-align: center !important; } .woocommerce-order-details table.gfs-order-table-three-cols thead th:last-child { text-align: right !important; } /* ========================================================== MENGENSPALTE ========================================================== */ .woocommerce-order-details td.gfs-order-quantity-cell { padding: 10px 8px !important; box-sizing: border-box !important; text-align: center !important; vertical-align: top !important; color: #111 !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 700 !important; white-space: nowrap !important; border-bottom: 1px solid rgba(189,150,108,.45) !important; } /* ========================================================== PRODUKTSPALTE ========================================================== */ .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-name.product-name { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 10px 12px !important; box-sizing: border-box !important; vertical-align: top !important; border-bottom: 1px solid rgba(189,150,108,.45) !important; } .woocommerce-order-details table.gfs-order-table-three-cols td.product-name > a { display: inline !important; width: auto !important; max-width: none !important; margin: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; line-height: 1.4 !important; } /* ========================================================== PREISSPALTE ========================================================== */ .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-total.product-total { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 10px 12px !important; box-sizing: border-box !important; text-align: right !important; vertical-align: top !important; white-space: nowrap !important; border-bottom: 1px solid rgba(189,150,108,.45) !important; } /* ========================================================== FOOTER / SUMMEN ========================================================== */ .woocommerce-order-details table.gfs-order-table-three-cols tfoot th { text-align: left !important; } .woocommerce-order-details table.gfs-order-table-three-cols tfoot td { text-align: right !important; } /* Bestehende Anmerkungsbox auch mit neuem colspan=3 erhalten */ .woocommerce-order-details table.gfs-order-table-three-cols tfoot td.gfs-order-fullwidth-note { border: 1px solid #d4bc9a !important; border-radius: 4px !important; background: #fffdfa !important; padding: 8px 12px !important; text-align: left !important; line-height: 1.3 !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 768px) { /* * Mobil bekommt Menge eine feste kleine Spalte, * Preis ebenfalls fest. * Der gesamte Rest gehört dem Produktnamen. */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-qty { width: 48px !important; } .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-product { width: auto !important; } .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-total { width: 82px !important; } /* Kopf */ .woocommerce-order-details table.gfs-order-table-three-cols thead th { padding: 9px 5px !important; font-size: 13px !important; line-height: 1.2 !important; white-space: normal !important; } .woocommerce-order-details th.gfs-order-quantity-heading { text-align: center !important; } /* Menge */ .woocommerce-order-details td.gfs-order-quantity-cell { padding: 11px 4px !important; font-size: 13px !important; line-height: 1.3 !important; text-align: center !important; } /* Produkt */ .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-name.product-name { padding: 10px 6px !important; font-size: 14px !important; line-height: 1.4 !important; } .woocommerce-order-details table.gfs-order-table-three-cols td.product-name > a { font-size: 14px !important; line-height: 1.4 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; } /* Gesamt */ .woocommerce-order-details table.gfs-order-table-three-cols td.product-total { padding: 11px 5px !important; font-size: 13px !important; line-height: 1.3 !important; text-align: right !important; white-space: nowrap !important; } } /* ========================================================== GFS – BESTELLDETAILS 3-SPALTEN-AUSRICHTUNG FINAL Menge | Produkt | Gesamtsumme ========================================================== */ /* ========================================================== DESKTOP ========================================================== */ @media (min-width: 769px) { .woocommerce-order-details table.gfs-order-table-three-cols { width: 100% !important; table-layout: fixed !important; } /* Menge bekommt eine echte feste Spalte */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-qty { width: 72px !important; } /* Produkt bekommt den gesamten verbleibenden Platz */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-product { width: auto !important; } /* Preis ausreichend breit */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-total { width: 180px !important; } /* MENGE */ .woocommerce-order-details th.gfs-order-quantity-heading, .woocommerce-order-details td.gfs-order-quantity-cell { width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding-left: 12px !important; padding-right: 14px !important; box-sizing: border-box !important; text-align: left !important; white-space: nowrap !important; } /* PRODUKT – bewusster Abstand nach Menge */ .woocommerce-order-details table.gfs-order-table-three-cols thead th:nth-child(2), .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-name.product-name { width: auto !important; padding-left: 16px !important; padding-right: 14px !important; box-sizing: border-box !important; text-align: left !important; } /* GESAMTSUMME */ .woocommerce-order-details table.gfs-order-table-three-cols thead th:last-child, .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-total.product-total { width: 180px !important; min-width: 180px !important; max-width: 180px !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; text-align: right !important; white-space: nowrap !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 768px) { .woocommerce-order-details table.gfs-order-table-three-cols { width: 100% !important; table-layout: fixed !important; } /* genug Platz für "Menge" */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-qty { width: 54px !important; } /* Produkt nimmt den Rest */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-product { width: auto !important; } /* Preis bleibt gut lesbar */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-total { width: 86px !important; } /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ .woocommerce-order-details table.gfs-order-table-three-cols thead th { font-size: 13px !important; line-height: 1.2 !important; box-sizing: border-box !important; } /* Menge */ .woocommerce-order-details th.gfs-order-quantity-heading { width: 54px !important; padding: 9px 7px 9px 4px !important; text-align: center !important; white-space: nowrap !important; } /* Produkt – etwas Abstand zur Menge */ .woocommerce-order-details table.gfs-order-table-three-cols thead th:nth-child(2) { padding: 9px 5px 9px 9px !important; text-align: left !important; } /* Gesamtsumme */ .woocommerce-order-details table.gfs-order-table-three-cols thead th:last-child { width: 86px !important; padding: 9px 4px !important; text-align: right !important; font-size: 12px !important; white-space: nowrap !important; } /* ------------------------------------------------------ MENGE ------------------------------------------------------ */ .woocommerce-order-details td.gfs-order-quantity-cell { width: 54px !important; padding: 11px 7px 10px 4px !important; box-sizing: border-box !important; text-align: center !important; font-size: 13px !important; font-weight: 700 !important; white-space: nowrap !important; } /* ------------------------------------------------------ PRODUKT ------------------------------------------------------ */ .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-name.product-name { width: auto !important; min-width: 0 !important; padding: 10px 5px 10px 9px !important; box-sizing: border-box !important; } .woocommerce-order-details table.gfs-order-table-three-cols td.product-name > a { font-size: 14px !important; line-height: 1.4 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; } /* ------------------------------------------------------ PREIS ------------------------------------------------------ */ .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-total.product-total { width: 86px !important; padding: 11px 4px 10px 4px !important; box-sizing: border-box !important; text-align: right !important; font-size: 13px !important; white-space: nowrap !important; } } /* ========================================================== GFS – BESTELLDETAILS MOBILE Produktspalte etwas breiter ========================================================== */ @media (max-width: 768px) { .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-qty { width: 48px !important; } .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-total { width: 78px !important; } .woocommerce-order-details th.gfs-order-quantity-heading, .woocommerce-order-details td.gfs-order-quantity-cell { width: 48px !important; } .woocommerce-order-details table.gfs-order-table-three-cols thead th:last-child, .woocommerce-order-details table.gfs-order-table-three-cols td.product-total { width: 78px !important; } } /* ========================================================== GFS – BESTELLDETAILS MOBILE Kopfzeile Menge | Produkt sauber trennen ========================================================== */ @media (max-width: 768px) { /* Mengenspalte minimal breiter */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-qty { width: 56px !important; } .woocommerce-order-details th.gfs-order-quantity-heading, .woocommerce-order-details td.gfs-order-quantity-cell { width: 56px !important; } /* Preisspalte etwas schmaler */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-total { width: 76px !important; } .woocommerce-order-details table.gfs-order-table-three-cols thead th:last-child, .woocommerce-order-details table.gfs-order-table-three-cols td.product-total { width: 76px !important; } /* "Menge" kompakt und sauber zentrieren */ .woocommerce-order-details th.gfs-order-quantity-heading { padding: 9px 6px 9px 2px !important; font-size: 12px !important; text-align: center !important; white-space: nowrap !important; } /* "Produkt" bewusst etwas nach rechts */ .woocommerce-order-details table.gfs-order-table-three-cols thead th:nth-child(2) { padding: 9px 5px 9px 10px !important; font-size: 13px !important; text-align: left !important; } /* Produktzellen passend zur Überschrift */ .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-name.product-name { padding-left: 10px !important; } } /* ========================================================== GFS – BESTELLDETAILS MOBILE Menge und Produkt klarer trennen ========================================================== */ @media (max-width: 768px) { /* Mengenspalte etwas breiter */ .woocommerce-order-details table.gfs-order-table-three-cols col.gfs-col-qty { width: 62px !important; } .woocommerce-order-details th.gfs-order-quantity-heading, .woocommerce-order-details td.gfs-order-quantity-cell { width: 62px !important; } /* Produktüberschrift + Produktinhalt weiter nach rechts */ .woocommerce-order-details table.gfs-order-table-three-cols thead th:nth-child(2), .woocommerce-order-details table.gfs-order-table-three-cols td.woocommerce-table__product-name.product-name { padding-left: 14px !important; } } /* ========================================================== GFS – MOBILE SUCHERGEBNISSE Hero + Ergebnis-/Sortierbereich ========================================================== */ @media (max-width: 768px) { /* ====================================================== 1. HERO KOMPAKTER ====================================================== */ body.search.search-results section.entry-hero { height: 120px !important; min-height: 120px !important; max-height: 120px !important; } body.search.search-results .entry-hero-container-inner { height: 120px !important; min-height: 120px !important; padding-top: 0 !important; padding-bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.search.search-results .entry-hero h1 { margin: 0 !important; padding: 0 20px !important; font-size: 27px !important; line-height: 1.22 !important; text-align: center !important; } /* ====================================================== 2. BREADCRUMB KOMPAKTER ====================================================== */ body.search.search-results #kadence-breadcrumbs { font-size: 13px !important; line-height: 1.4 !important; padding-top: 12px !important; padding-bottom: 8px !important; } /* ====================================================== 3. ERGEBNIS + SORTIERUNG ALS GEMEINSAME KARTE ====================================================== */ body.search.search-results .kadence-shop-top-row { display: block !important; width: 100% !important; margin-top: 8px !important; margin-bottom: 16px !important; padding: 0 !important; background: rgba(189,150,108,.12) !important; border: 1px solid rgba(160,110,65,.28) !important; border-radius: 8px !important; overflow: hidden !important; box-sizing: border-box !important; } /* Ergebnisanzahl */ body.search.search-results .woocommerce-result-count { display: block !important; width: 100% !important; margin: 0 !important; padding: 12px 14px 7px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; color: #111 !important; font-size: 13px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* Sortierbereich */ body.search.search-results .woocommerce-ordering { display: block !important; width: 100% !important; margin: 0 !important; padding: 5px 14px 13px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; } /* richtige Bezeichnung */ body.search.search-results .woocommerce-ordering::before { content: "Sortieren nach:"; display: block !important; margin: 0 0 6px 0 !important; color: rgba(17,17,17,.68) !important; font-size: 12px !important; line-height: 1.3 !important; font-weight: 400 !important; } /* Dropdown */ body.search.search-results .woocommerce-ordering select { display: block !important; width: 100% !important; height: 40px !important; margin: 0 !important; padding: 0 36px 0 11px !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid rgba(160,110,65,.42) !important; border-radius: 6px !important; color: #111 !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; } /* ====================================================== 4. ABSTAND ZUR ERSTEN PRODUKTKARTE ====================================================== */ body.search.search-results ul.products { margin-top: 12px !important; } } /* ========================================================== GFS – MOBILE SUCHERGEBNISSE Breadcrumb + Sortierbox kompakt ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ BREADCRUMB ------------------------------------------------------ */ body.search.search-results #kadence-breadcrumbs.gfs-search-breadcrumb-mobile { position: static !important; width: 100% !important; margin: -54px 0 8px 0 !important; padding: 0 !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================== GFS – MOBILE SUCHERGEBNISSE Sortierauswahl normale Schriftstärke ========================================================== */ @media (max-width: 768px) { body.search.search-results .woocommerce-ordering select { font-weight: 400 !important; } body.search.search-results .woocommerce-ordering select option { font-weight: 400 !important; } } /* ========================================================== GFS – MEIN KONTO / BESTELLDETAILS Mobile Kopfzeile Menge | Produkt sauber trennen ========================================================== */ @media (max-width: 768px) { body.woocommerce-account .woocommerce-order-details table.shop_table th:first-child { width: 58px !important; min-width: 58px !important; padding-left: 10px !important; padding-right: 10px !important; text-align: left !important; white-space: nowrap !important; } body.woocommerce-account .woocommerce-order-details table.shop_table th:nth-child(2) { padding-left: 12px !important; text-align: left !important; } /* Werte passend zur Überschrift ausrichten */ body.woocommerce-account .woocommerce-order-details table.shop_table td:first-child { width: 58px !important; min-width: 58px !important; padding-left: 10px !important; padding-right: 10px !important; text-align: left !important; white-space: nowrap !important; } body.woocommerce-account .woocommerce-order-details table.shop_table td:nth-child(2) { padding-left: 12px !important; } } /* ========================================================== GFS – MEIN KONTO → BESTELLDETAILS Footer + Abschlusslinie sauber ========================================================== */ /* ========================================================== DESKTOP Doppelte Linie vor MwSt. entfernen ========================================================== */ @media (min-width: 769px) { /* letzte Produktzeile ohne eigene Unterkante */ body.woocommerce-account .woocommerce-order-details table.shop_table tbody tr:last-child td { border-bottom: 0 !important; } /* genau EINE Trennlinie oberhalb des Summenbereichs */ body.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:first-child th, body.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:first-child td { border-top: 1px solid rgba(189,150,108,.45) !important; } } /* ========================================================== MOBIL MwSt. + Lieferung wieder sauber zweispaltig ========================================================== */ @media (max-width: 768px) { /* Wichtig: Grid/Flex aus dem Footer wieder komplett entfernen */ body.woocommerce-account .woocommerce-order-details table.shop_table tfoot tr { display: table-row !important; } body.woocommerce-account .woocommerce-order-details table.shop_table tfoot th, body.woocommerce-account .woocommerce-order-details table.shop_table tfoot td { display: table-cell !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important; padding-top: 9px !important; padding-bottom: 9px !important; font-size: 13px !important; line-height: 1.35 !important; transform: none !important; } /* linke Seite: MwSt. / Lieferung-Abholung */ body.woocommerce-account .woocommerce-order-details table.shop_table tfoot th { width: 55% !important; padding-left: 8px !important; padding-right: 8px !important; text-align: left !important; white-space: normal !important; } /* rechte Seite: Betrag / Abholung vor Ort */ body.woocommerce-account .woocommerce-order-details table.shop_table tfoot td { width: 45% !important; padding-left: 6px !important; padding-right: 8px !important; text-align: right !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* "Abholung vor Ort" nicht Wort für Wort zerlegen */ body.woocommerce-account .woocommerce-order-details table.shop_table tfoot td strong { white-space: normal !important; word-break: normal !important; } } /* ========================================================== GFS – MEIN KONTO / BESTELLDETAILS Mobile Tabellenüberschriften kompakter ========================================================== */ @media (max-width: 768px) { body.woocommerce-account .woocommerce-order-details table.shop_table thead th { font-size: 11px !important; line-height: 1.15 !important; font-weight: 700 !important; padding-top: 8px !important; padding-bottom: 8px !important; } /* Menge */ body.woocommerce-account .woocommerce-order-details table.shop_table thead th:first-child { width: 52px !important; min-width: 52px !important; max-width: 52px !important; padding-left: 4px !important; padding-right: 4px !important; text-align: left !important; } /* Produkt */ body.woocommerce-account .woocommerce-order-details table.shop_table thead th:nth-child(2) { padding-left: 4px !important; padding-right: 4px !important; text-align: left !important; } /* Gesamtsumme */ body.woocommerce-account .woocommerce-order-details table.shop_table thead th:last-child { width: 86px !important; min-width: 86px !important; max-width: 86px !important; padding-left: 2px !important; padding-right: 2px !important; text-align: right !important; font-size: 10px !important; letter-spacing: -0.2px !important; white-space: nowrap !important; } } /* ========================================================== GFS – MEIN KONTO / BESTELLDETAILS Mobile Kopfzeile Feinschliff ========================================================== */ @media (max-width: 768px) { /* Produkt etwas weiter nach rechts */ body.woocommerce-account .woocommerce-order-details table.shop_table thead th:nth-child(2) { padding-left: 10px !important; padding-right: 2px !important; } /* Gesamtsumme etwas nach links + 1px größer */ body.woocommerce-account .woocommerce-order-details table.shop_table thead th:last-child { font-size: 11px !important; padding-left: 0 !important; padding-right: 8px !important; text-align: right !important; white-space: nowrap !important; } } /* ========================================================== GFS – MEIN KONTO / BESTELLDETAILS MwSt. + Lieferung sauber untereinander ========================================================== */ @media (max-width: 768px) { body.woocommerce-account .woocommerce-order-details table.shop_table tfoot th { width: 55% !important; padding-left: 10px !important; padding-right: 8px !important; text-align: left !important; } body.woocommerce-account .woocommerce-order-details table.shop_table tfoot td { width: 45% !important; padding-left: 8px !important; padding-right: 6px !important; text-align: left !important; white-space: normal !important; } } /* ========================================================== GFS – PRODUKTKARTEN Mengenfeld beige hervorheben ========================================================== */ .woocommerce ul.products li.product .quantity input.qty, .woocommerce-page ul.products li.product .quantity input.qty { background: #f3e6d3 !important; border: 1px solid #c9a06f !important; border-radius: 4px !important; color: #111 !important; box-shadow: none !important; } /* ========================================================== GFS – PRODUKTKARTEN Mengenpfeile schwarz / besser sichtbar ========================================================== */ .woocommerce ul.products li.product .quantity input.qty, .woocommerce-page ul.products li.product .quantity input.qty { color-scheme: light !important; } /* Chrome / Edge / Safari */ .woocommerce ul.products li.product .quantity input.qty::-webkit-inner-spin-button, .woocommerce-page ul.products li.product .quantity input.qty::-webkit-inner-spin-button { opacity: 1 !important; filter: grayscale(1) brightness(0) !important; cursor: pointer !important; } /* ========================================================== GFS – PRODUKTKARTEN Beige Mengeneingabe + schwarze Pfeile ========================================================== */ .woocommerce ul.products li.product .quantity.gfs-qty-ready { position: relative !important; width: 78px !important; height: 38px !important; } /* Zahlenfeld */ .woocommerce ul.products li.product .quantity.gfs-qty-ready input.qty { width: 78px !important; height: 38px !important; padding: 0 26px 0 8px !important; box-sizing: border-box !important; background: #f3e6d3 !important; border: 1px solid #c9a06f !important; border-radius: 4px !important; color: #111 !important; text-align: center !important; box-shadow: none !important; /* native Browser-Pfeile entfernen */ appearance: textfield !important; -moz-appearance: textfield !important; } /* Chrome / Edge / Safari native Pfeile entfernen */ .woocommerce ul.products li.product .quantity.gfs-qty-ready input.qty::-webkit-inner-spin-button, .woocommerce ul.products li.product .quantity.gfs-qty-ready input.qty::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* beide eigenen Pfeile */ .woocommerce ul.products li.product .quantity.gfs-qty-ready .gfs-qty-arrow { position: absolute !important; right: 1px !important; width: 23px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ead8bf !important; border: 0 !important; border-left: 1px solid #c9a06f !important; color: #111 !important; font-size: 9px !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; } /* hoch */ .woocommerce ul.products li.product .quantity.gfs-qty-ready .gfs-qty-up { top: 1px !important; border-radius: 0 3px 0 0 !important; } /* runter */ .woocommerce ul.products li.product .quantity.gfs-qty-ready .gfs-qty-down { bottom: 1px !important; border-top: 1px solid #c9a06f !important; border-radius: 0 0 3px 0 !important; } /* Hover */ .woocommerce ul.products li.product .quantity.gfs-qty-ready .gfs-qty-arrow:hover { background: #ddc29e !important; color: #000 !important; } /* ========================================================== GFS – Mengenpfeile Feinschliff ========================================================== */ .woocommerce ul.products li.product .quantity.gfs-qty-ready .gfs-qty-arrow { width: 24px !important; font-size: 10px !important; font-weight: 700 !important; } /* ========================================================== GFS – Mengenfeld Feinschliff sichtbar breiter ========================================================== */ .woocommerce ul.products li.product .quantity.gfs-qty-ready { width: 94px !important; } .woocommerce ul.products li.product .quantity.gfs-qty-ready input.qty { width: 94px !important; padding-left: 12px !important; padding-right: 30px !important; text-align: center !important; } /* ========================================================== GFS – PRODUKTKARTEN "In den Warenkorb" als echter Button ========================================================== */ .woocommerce ul.products li.product .product-action-wrap .button, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce-page ul.products li.product .product-action-wrap .button, .woocommerce-page ul.products li.product a.add_to_cart_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 0 14px !important; box-sizing: border-box !important; background: #f3e6d3 !important; border: 1px solid #c9a06f !important; border-radius: 5px !important; color: #111 !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; } /* Hover auf Desktop */ .woocommerce ul.products li.product .product-action-wrap .button:hover, .woocommerce ul.products li.product a.add_to_cart_button:hover { background: #ead8bf !important; color: #111 !important; } /* ========================================================== GFS – WARENKORB-BUTTON etwas stärker vom Mengenfeld abheben ========================================================== */ .woocommerce ul.products li.product .product-action-wrap .button, .woocommerce ul.products li.product a.add_to_cart_button { background: #ead8bf !important; border-color: #b88955 !important; transition: background .15s ease, transform .15s ease !important; } .woocommerce ul.products li.product .product-action-wrap .button:hover, .woocommerce ul.products li.product a.add_to_cart_button:hover { background: #dfc39e !important; } .woocommerce ul.products li.product .product-action-wrap .button:active, .woocommerce ul.products li.product a.add_to_cart_button:active { transform: translateY(1px) !important; } /* ========================================================== GFS – MOBILE PRODUKTDETAIL Preis über volle Breite oberhalb der Kaufzeile ========================================================== */ @media (max-width: 768px) { body.single-product form.cart > p.price { /* entscheidend: Preis über beide Grid-Spalten */ grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; justify-self: stretch !important; align-self: start !important; margin: 16px 0 14px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #111 !important; font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important; text-align: left !important; white-space: normal !important; box-sizing: border-box !important; } /* Preisbestandteile einheitlich */ body.single-product form.cart > p.price .woocommerce-Price-amount, body.single-product form.cart > p.price .woocommerce-price-suffix, body.single-product form.cart > p.price .ve-anzeige { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; } /* VE-Text nicht künstlich nach rechts schieben */ body.single-product form.cart > p.price .ve-anzeige { margin-left: 4px !important; } } /* ========================================================== GFS – ÄHNLICHE PRODUKTE Mengenfeld sauber + kompakt ========================================================== */ @media (max-width: 768px) { /* Kaufzeile */ body.single-product .related.products .product-action-wrap { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; } /* Mengensteuerung */ body.single-product .related.products .quantity.gfs-qty-ready { position: relative !important; flex: 0 0 94px !important; width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; } /* Zahlenfeld über die komplette Breite */ body.single-product .related.products .quantity.gfs-qty-ready > input.qty { display: block !important; position: static !important; width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 38px !important; margin: 0 !important; padding: 0 26px 0 8px !important; box-sizing: border-box !important; background: #f3e6d3 !important; border: 1px solid #c9a06f !important; border-radius: 4px !important; color: #111 !important; font-size: 15px !important; line-height: 38px !important; text-align: center !important; appearance: textfield !important; -moz-appearance: textfield !important; } /* native Pfeile sicher weg */ body.single-product .related.products .quantity.gfs-qty-ready > input.qty::-webkit-inner-spin-button, body.single-product .related.products .quantity.gfs-qty-ready > input.qty::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* eigene schwarze Pfeile */ body.single-product .related.products .quantity.gfs-qty-ready > .gfs-qty-arrow { right: 1px !important; width: 24px !important; color: #111 !important; font-size: 10px !important; font-weight: 700 !important; } /* Warenkorb-Button nimmt den Rest */ body.single-product .related.products .product-action-wrap .button { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } } /* ========================================================== GFS – ÄHNLICHE PRODUKTE Mengenfeld Grid vollständig neutralisieren ========================================================== */ @media (max-width: 768px) { body.single-product .related.products .quantity.gfs-qty-ready { display: block !important; position: relative !important; grid-template-columns: none !important; grid-template-rows: none !important; flex: 0 0 94px !important; width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Zahlenfeld wirklich über die komplette Fläche legen */ body.single-product .related.products .quantity.gfs-qty-ready input.qty { position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; display: block !important; width: 94px !important; min-width: 94px !important; max-width: 94px !important; height: 38px !important; margin: 0 !important; padding: 0 28px 0 8px !important; box-sizing: border-box !important; background: #f3e6d3 !important; border: 1px solid #c9a06f !important; border-radius: 4px !important; color: #111 !important; font-size: 15px !important; line-height: 38px !important; font-weight: 400 !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; z-index: 1 !important; } /* Eigene Pfeile über dem Input */ body.single-product .related.products .quantity.gfs-qty-ready .gfs-qty-arrow { position: absolute !important; right: 1px !important; width: 24px !important; z-index: 2 !important; } body.single-product .related.products .quantity.gfs-qty-ready .gfs-qty-up { top: 1px !important; } body.single-product .related.products .quantity.gfs-qty-ready .gfs-qty-down { bottom: 1px !important; } } /* ========================================================== GFS – MOBILE HEADER MegaMenü-Button größer und präsenter ========================================================== */ @media (max-width: 768px) { /* eigentlicher Menü-Button */ .mobile-toggle-open-container .menu-toggle-open, button.menu-toggle-open { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(17,17,17,.30) !important; border-radius: 8px !important; color: #111 !important; box-sizing: border-box !important; cursor: pointer !important; } /* Hamburger-Symbol größer */ .mobile-toggle-open-container .menu-toggle-open svg, button.menu-toggle-open svg { width: 26px !important; height: 26px !important; } /* Linien etwas kräftiger, sofern SVG stroke nutzt */ .mobile-toggle-open-container .menu-toggle-open svg *, button.menu-toggle-open svg * { stroke-width: 1.8 !important; } /* leichtes Feedback beim Antippen */ .mobile-toggle-open-container .menu-toggle-open:active, button.menu-toggle-open:active { transform: scale(.96) !important; } } /* ========================================================== GFS – MOBILE HEADER Menü-Button stärker hervorheben ========================================================== */ @media (max-width: 768px) { .mobile-toggle-open-container .menu-toggle-open, button.menu-toggle-open { background: #f3e6d3 !important; border: 1.5px solid #8f6842 !important; border-radius: 8px !important; color: #111 !important; box-shadow: 0 2px 5px rgba(0,0,0,.12) !important; } /* Hamburger selbst kräftiger */ .mobile-toggle-open-container .menu-toggle-open svg, button.menu-toggle-open svg { width: 26px !important; height: 26px !important; } .mobile-toggle-open-container .menu-toggle-open svg *, button.menu-toggle-open svg * { stroke: #111 !important; stroke-width: 2 !important; } /* leichtes Feedback beim Tippen */ .mobile-toggle-open-container .menu-toggle-open:active, button.menu-toggle-open:active { background: #ead8bf !important; transform: scale(.96) !important; } } /* ========================================================== GFS – MOBILE HEADER Hamburger-Button dezent, aber klar erkennbar ========================================================== */ @media (max-width: 768px) { #mobile-toggle { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; /* gleiche Farbfamilie wie Header */ background: rgba(255,255,255,.06) !important; border: 1.5px solid rgba(17,17,17,.42) !important; border-radius: 7px !important; color: #111 !important; box-shadow: none !important; box-sizing: border-box !important; appearance: none !important; -webkit-appearance: none !important; cursor: pointer !important; } /* Hamburger-Symbol */ #mobile-toggle svg { width: 26px !important; height: 26px !important; } #mobile-toggle svg line, #mobile-toggle svg path { stroke: #111 !important; stroke-width: 2.1 !important; } /* beim Antippen */ #mobile-toggle:active { background: rgba(255,255,255,.15) !important; transform: scale(.96) !important; } } /* ========================================================== GFS – MEIN KONTO / ADRESSEN MOBILE Rechnungs- und Lieferadresse sauber darstellen ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ Beide Adressbereiche untereinander ------------------------------------------------------ */ body.woocommerce-account .woocommerce-Addresses, body.woocommerce-account .woocommerce-Addresses.col2-set { display: block !important; width: 100% !important; } body.woocommerce-account .woocommerce-Addresses .woocommerce-Address, body.woocommerce-account .woocommerce-Addresses .col-1, body.woocommerce-account .woocommerce-Addresses .col-2 { float: none !important; display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 30px 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------ Kopfbereich: Überschrift + Bearbeiten-Link NICHT nebeneinander ------------------------------------------------------ */ body.woocommerce-account .woocommerce-Address-title { display: block !important; width: 100% !important; margin: 0 0 12px 0 !important; padding: 0 !important; } /* Rechnungsadresse / Lieferadresse */ body.woocommerce-account .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-Address-title .woocommerce-column__title { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 0 5px 0 !important; padding: 0 !important; font-size: 26px !important; line-height: 1.15 !important; font-weight: 700 !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; white-space: normal !important; } /* "Rechnungsadresse bearbeiten" */ body.woocommerce-account .woocommerce-Address-title a.edit { display: inline-block !important; float: none !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #bd966c !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 2px !important; white-space: normal !important; } /* ------------------------------------------------------ Adresse selbst ------------------------------------------------------ */ body.woocommerce-account .woocommerce-Address address { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 16px !important; line-height: 1.5 !important; word-break: normal !important; overflow-wrap: normal !important; box-sizing: border-box !important; } } /* ========================================================== GFS – MEIN KONTO / ADRESSEN MOBILE Adressbox + Bearbeiten-Button darunter ========================================================== */ @media (max-width: 768px) { /* ------------------------------------------------------ Adressbereich als vertikale Struktur ------------------------------------------------------ */ body.woocommerce-account .woocommerce-Addresses .woocommerce-Address { display: flex !important; flex-direction: column !important; width: 100% !important; margin-bottom: 30px !important; } /* * Wrapper optisch auflösen. * Dadurch können Überschrift, Adresse und Bearbeiten-Link * unabhängig untereinander angeordnet werden. */ body.woocommerce-account .woocommerce-Address-title { display: contents !important; } /* ------------------------------------------------------ ÜBERSCHRIFT kein Rahmen ------------------------------------------------------ */ body.woocommerce-account .woocommerce-Address-title h2 { order: 1 !important; width: 100% !important; margin: 0 0 10px 0 !important; padding: 0 !important; font-size: 26px !important; line-height: 1.15 !important; color: #111 !important; } /* ------------------------------------------------------ EIGENTLICHE ADRESSE beige umrahmte Box ------------------------------------------------------ */ body.woocommerce-account .woocommerce-Address address { order: 2 !important; display: block !important; width: 100% !important; margin: 0 0 10px 0 !important; padding: 14px 16px !important; box-sizing: border-box !important; background: #fffdfa !important; border: 1px solid #c3a174 !important; border-radius: 6px !important; color: #111 !important; font-size: 15px !important; line-height: 1.55 !important; font-style: normal !important; } /* ------------------------------------------------------ BEARBEITEN ALS ECHTER BUTTON UNTER DER BOX ------------------------------------------------------ */ body.woocommerce-account .woocommerce-Address-title a.edit { order: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; width: auto !important; min-height: 40px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; background: #bd966c !important; border: 1px solid #bd966c !important; border-radius: 5px !important; color: #111 !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; } /* Feedback beim Antippen */ body.woocommerce-account .woocommerce-Address-title a.edit:active { background: #ad855a !important; transform: translateY(1px) !important; } } /* ========================================================== GFS – MEIN KONTO / ADRESSEN Bearbeiten-Buttons besser lesbar ========================================================== */ @media (max-width: 768px) { body.woocommerce-account .woocommerce-Address-title a.edit { background: #bd966c !important; color: #111111 !important; border: 1px solid #a67f55 !important; font-size: 13px !important; font-weight: 700 !important; opacity: 1 !important; text-shadow: none !important; } body.woocommerce-account .woocommerce-Address-title a.edit:hover, body.woocommerce-account .woocommerce-Address-title a.edit:focus { background: #ad855a !important; color: #111111 !important; } } /* ========================================================== GFS – MEIN KONTO / ADRESSEN Bearbeiten-Buttons Text FINAL ========================================================== */ @media (max-width: 768px) { body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit, body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit:link, body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit:visited, body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit:hover, body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit:focus, body.woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit:active { color: #111111 !important; -webkit-text-fill-color: #111111 !important; opacity: 1 !important; background: #bd966c !important; border: 1px solid #a67f55 !important; text-decoration: none !important; text-shadow: none !important; font-weight: 700 !important; } } /* ========================================================== GFS – MEIN KONTO / ADRESSEN MOBILE Abstand zum Footer verkleinern ========================================================== */ @media (max-width: 768px) { /* letzter Adressblock */ body.woocommerce-account .woocommerce-Addresses .woocommerce-Address:last-child { margin-bottom: 8px !important; } /* gesamter Adressbereich */ body.woocommerce-account .woocommerce-Addresses { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Inhaltsbereich unten kompakter */ body.woocommerce-account .woocommerce-MyAccount-content { margin-bottom: 0 !important; padding-bottom: 18px !important; } body.woocommerce-account .woocommerce { margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ========================================================== GFS – FIBOSEARCH MOBILE Optik im MegaMenü ========================================================== */ @media (max-width: 768px) { /* ====================================================== SUCHBEREICH ====================================================== */ .gfs-mobile-fibosearch { width: 100% !important; margin: 8px 0 12px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .gfs-mobile-fibosearch .dgwt-wcas-search-wrapp, .gfs-mobile-fibosearch .dgwt-wcas-search-form, .gfs-mobile-fibosearch .dgwt-wcas-sf-wrapp { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* eigentliches Suchfeld */ .gfs-mobile-fibosearch .dgwt-wcas-search-input { width: 100% !important; height: 48px !important; padding-left: 46px !important; padding-right: 44px !important; box-sizing: border-box !important; background: #fffdfa !important; border: 1.5px solid #8f6842 !important; border-radius: 10px !important; color: #111 !important; font-size: 14px !important; font-weight: 400 !important; box-shadow: none !important; } .gfs-mobile-fibosearch .dgwt-wcas-search-input::placeholder { color: #666 !important; opacity: 1 !important; } /* ====================================================== VORSCHLAGSFENSTER ====================================================== */ .dgwt-wcas-suggestions-wrapp { overflow: hidden !important; background: #fffdfa !important; border: 1px solid #c9a06f !important; border-top: 0 !important; border-radius: 0 0 9px 9px !important; box-shadow: 0 5px 12px rgba(0,0,0,.12) !important; z-index: 9999999 !important; } /* einzelne Vorschläge */ .dgwt-wcas-suggestion { min-height: 52px !important; padding: 6px 10px !important; box-sizing: border-box !important; background: #fffdfa !important; border-bottom: 1px solid rgba(189,150,108,.30) !important; } .dgwt-wcas-suggestion:last-child { border-bottom: 0 !important; } /* Produktbild */ .dgwt-wcas-suggestion img { width: 40px !important; height: 40px !important; object-fit: contain !important; border: 1px solid rgba(189,150,108,.28) !important; border-radius: 4px !important; background: #fff !important; } /* Produkttitel */ .dgwt-wcas-suggestion .dgwt-wcas-st { color: #111 !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 600 !important; } /* Hover / Touch-Highlight */ .dgwt-wcas-suggestion:hover, .dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected { background: #f3e6d3 !important; } /* ====================================================== "SIEHE ALLE PRODUKTE" ====================================================== */ .dgwt-wcas-suggestion-more { min-height: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 12px !important; background: #ead8bf !important; border: 0 !important; color: #111 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 700 !important; text-align: center !important; text-decoration: none !important; } .dgwt-wcas-suggestion-more:hover { background: #ddc29e !important; } } /* ========================================================== GFS – FIBOSEARCH MOBILE Placeholder besser lesbar ========================================================== */ @media (max-width: 768px) { .gfs-mobile-fibosearch .dgwt-wcas-search-input::placeholder { color: #555555 !important; opacity: 1 !important; font-weight: 400 !important; } /* Firefox */ .gfs-mobile-fibosearch .dgwt-wcas-search-input::-moz-placeholder { color: #555555 !important; opacity: 1 !important; } } /* ========================================================== GFS – MOBILE MEGAMENÜ Touch-Scroll auf echtem Handy ========================================================== */ @media (max-width: 768px) { /* Der komplette Drawer wird zum Scrollbereich */ #mobile-drawer .drawer-inner { height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; overscroll-behavior-y: contain !important; box-sizing: border-box !important; padding-bottom: calc(35px + env(safe-area-inset-bottom)) !important; } /* Inhalt selbst nicht zusätzlich scrollen */ #mobile-drawer .drawer-content.mobile-drawer-content { height: auto !important; max-height: none !important; overflow: visible !important; touch-action: auto !important; } /* Menü darf vollständig nach unten wachsen */ #mobile-drawer #mobile-site-navigation, #mobile-drawer #mega-menu-wrap-primary, #mobile-drawer #mega-menu-primary { height: auto !important; max-height: none !important; overflow: visible !important; } /* Untermenüs ebenfalls nicht abschneiden */ #mobile-drawer .mega-sub-menu { max-height: none !important; overflow: visible !important; } } /* ========================================================== MOBIL: "Bearbeiten"-Link unter die jeweilige Adressbox setzen ========================================================== */ @media (max-width: 767px) { body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* Header auflösen, damit Überschrift und Edit-Link getrennt angeordnet werden können */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address .woocommerce-Address-title { display: contents !important; } /* Überschrift */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address h3 { order: 1 !important; margin: 0 0 14px 0 !important; } /* Adressbox */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address address { order: 2 !important; margin: 0 !important; } /* Bearbeiten-Link unter die Box */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address a.edit { order: 3 !important; display: inline-block !important; margin-top: 14px !important; /* Leerzeile zwischen Box und Link */ margin-bottom: 18px !important; } } /* ========================================================== GFS – MEIN KONTO / KEINE BESTELLUNGEN Nur mobile Ansicht ========================================================== */ @media (max-width: 767px) { body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; margin: 20px 0 0 0 !important; padding: 22px 18px 20px !important; background: #fffdfa !important; border: 1px solid #c9a06f !important; border-left: 4px solid #c9a06f !important; border-radius: 10px !important; text-align: center !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.5 !important; color: #111 !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important; } /* Icon oben mittig */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; margin: 0 0 10px 0 !important; background: #c9a06f !important; border-radius: 50% !important; color: #111 !important; line-height: 1 !important; } /* Button unter dem Text */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button { float: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 190px !important; min-height: 42px !important; margin: 14px 0 0 0 !important; padding: 10px 18px !important; background: #c19a6b !important; border: 0 !important; border-radius: 6px !important; color: #111 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; } } /* ========================================================== GFS – MOBILE FIBOSEARCH Suchfeld stabilisieren / braunen Submit-Button entfernen ========================================================== */ @media (max-width: 768px) { /* Suchbereich */ .gfs-mobile-fibosearch, .gfs-mobile-fibosearch .dgwt-wcas-search-wrapp, .gfs-mobile-fibosearch .dgwt-wcas-search-form, .gfs-mobile-fibosearch .dgwt-wcas-sf-wrapp { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ------------------------------------------------------ FiboSearch Submit-Button KOMPLETT entfernen Das ist sehr wahrscheinlich das braune Rechteck. ------------------------------------------------------ */ .gfs-mobile-fibosearch button.dgwt-wcas-search-submit, .gfs-mobile-fibosearch .dgwt-wcas-search-submit { display: none !important; position: absolute !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ------------------------------------------------------ Eingabefeld ------------------------------------------------------ */ .gfs-mobile-fibosearch .dgwt-wcas-search-input { display: block !important; width: 100% !important; max-width: 100% !important; height: 48px !important; box-sizing: border-box !important; margin: 0 !important; /* * links Platz für Lupe, * rechts Platz für X */ padding: 0 46px 0 48px !important; background: #fff !important; font-size: 14px !important; line-height: 48px !important; text-indent: 0 !important; border-radius: 9px !important; } /* Placeholder sauber lesbar */ .gfs-mobile-fibosearch .dgwt-wcas-search-input::placeholder { opacity: 1 !important; color: #777 !important; font-family: "Montserrat", Arial, sans-serif !important; font-size: 14px !important; } /* ------------------------------------------------------ Lupe fest links positionieren ------------------------------------------------------ */ .gfs-mobile-fibosearch .dgwt-wcas-ico-magnifier { position: absolute !important; left: 16px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; z-index: 5 !important; pointer-events: none !important; } /* ------------------------------------------------------ X zum Löschen fest rechts ------------------------------------------------------ */ .gfs-mobile-fibosearch .dgwt-wcas-close { position: absolute !important; right: 15px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; z-index: 6 !important; } /* ------------------------------------------------------ Wrapper darf beim Fokus seine Geometrie NICHT ändern ------------------------------------------------------ */ .gfs-mobile-fibosearch .dgwt-wcas-sf-wrapp { position: relative !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; background: transparent !important; border: 0 !important; } } /* * Fallback für Produktbilder ohne direkten Link */ body.single-product .woocommerce-product-gallery__image > img:not(.zoomImg) { display: block !important; width: 128% !important; max-width: none !important; height: auto !important; max-height: none !important; margin-left: 50% !important; transform: translateX(-50%) !important; object-fit: contain !important; } } /* ========================================================== GFS – ÄHNLICHE PRODUKTE Mengensteuerung optisch wie in der Produktübersicht ========================================================== */ /* ---------------------------------------------------------- KOMPLETTE UNTERE ZEILE Menge + Warenkorb ---------------------------------------------------------- */ body.single-product .related.products ul.products li.product .frey-catalog-qty-wrapper { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; height: 36px !important; gap: 8px !important; margin: 0 !important; padding: 0 7px !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- KOMPLETTER MENGENBLOCK ---------------------------------------------------------- */ body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready { position: relative !important; display: grid !important; grid-template-columns: 68px 24px !important; grid-template-rows: 18px 18px !important; flex: 0 0 92px !important; width: 92px !important; min-width: 92px !important; max-width: 92px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; border: 1px solid #B89468 !important; border-radius: 3px !important; background: #F3E6D3 !important; } /* ---------------------------------------------------------- MENGENEINGABE Gleicher heller Beigeton wie in der Produktübersicht ---------------------------------------------------------- */ body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready input.qty[type="number"] { position: static !important; grid-column: 1 !important; grid-row: 1 / 3 !important; display: block !important; width: 68px !important; min-width: 68px !important; max-width: 68px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; margin: -1px 0 -1px -1px !important; padding: 0 !important; box-sizing: border-box !important; border: 0 !important; border-right: 1px solid #B89468 !important; border-radius: 0 !important; background: #F3E6D3 !important; color: #111111 !important; text-align: center !important; font-size: 16px !important; font-weight: 400 !important; line-height: 36px !important; box-shadow: none !important; transform: none !important; -moz-appearance: textfield !important; appearance: textfield !important; } /* Browser-eigene Pfeile entfernen */ body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready input.qty[type="number"]::-webkit-inner-spin-button, body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready input.qty[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* ---------------------------------------------------------- EIGENE PFEILFELDER Gleicher Beigeton wie in der Produktübersicht ---------------------------------------------------------- */ body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready .gfs-qty-arrow { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; min-width: 24px !important; max-width: 24px !important; height: 18px !important; min-height: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; border: 0 !important; border-radius: 0 !important; background: #EAD8BF !important; color: #111111 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; box-shadow: none !important; transform: none !important; cursor: pointer !important; } /* Pfeil nach oben */ body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready .gfs-qty-up { grid-column: 2 !important; grid-row: 1 !important; border-bottom: 1px solid #B89468 !important; } /* Pfeil nach unten */ body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready .gfs-qty-down { grid-column: 2 !important; grid-row: 2 !important; } /* ---------------------------------------------------------- HOVER DER PFEILE ---------------------------------------------------------- */ body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready .gfs-qty-arrow:hover { background: #B89468 !important; color: #ffffff !important; } /* ---------------------------------------------------------- WARENKORB-BUTTON ---------------------------------------------------------- */ body.single-product .related.products ul.products li.product .frey-catalog-qty-wrapper .add_to_cart_button, body.single-product .related.products ul.products li.product .frey-catalog-qty-wrapper .button { display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 8px !important; box-sizing: border-box !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; } /* ---------------------------------------------------------- SEHR SCHMALE HANDYS ---------------------------------------------------------- */ @media (max-width: 370px) { body.single-product .related.products ul.products li.product .frey-catalog-qty-wrapper { gap: 6px !important; padding-left: 5px !important; padding-right: 5px !important; } body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready { grid-template-columns: 62px 24px !important; flex-basis: 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; } body.single-product .related.products ul.products li.product .quantity.gfs-qty-ready input.qty[type="number"] { width: 62px !important; min-width: 62px !important; max-width: 62px !important; } body.single-product .related.products ul.products li.product .frey-catalog-qty-wrapper .add_to_cart_button, body.single-product .related.products ul.products li.product .frey-catalog-qty-wrapper .button { padding-left: 5px !important; padding-right: 5px !important; font-size: 12px !important; } }