.elementor-kit-91{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#2A2828;--e-global-color-text:#000000;--e-global-color-accent:#7F0000;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:15px;--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:28px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-primary );color:var( --e-global-color-text );}.elementor-kit-91 button,.elementor-kit-91 input[type="button"],.elementor-kit-91 input[type="submit"],.elementor-kit-91 .elementor-button{background-color:var( --e-global-color-accent );color:var( --e-global-color-primary );}.elementor-kit-91 button:hover,.elementor-kit-91 button:focus,.elementor-kit-91 input[type="button"]:hover,.elementor-kit-91 input[type="button"]:focus,.elementor-kit-91 input[type="submit"]:hover,.elementor-kit-91 input[type="submit"]:focus,.elementor-kit-91 .elementor-button:hover,.elementor-kit-91 .elementor-button:focus{background-color:var( --e-global-color-accent );color:var( --e-global-color-primary );}.elementor-kit-91 e-page-transition{background-color:#FFBC7D;}body.e-wc-error-notice .woocommerce-error, body.e-wc-error-notice .wc-block-components-notice-banner.is-error{background-color:var( --e-global-color-accent );}body.e-wc-message-notice .woocommerce-message, body.e-wc-message-notice .wc-block-components-notice-banner.is-success{background-color:var( --e-global-color-accent );}body.e-wc-message-notice .woocommerce-message .button, body.e-wc-message-notice .wc-block-components-notice-banner.is-success .button{background-color:var( --e-global-color-primary );background-image:var( --e-global-color-primary );}body.e-wc-info-notice .woocommerce-info, body.e-wc-info-notice .wc-block-components-notice-banner.is-info{background-color:#706B6B;}body.e-wc-info-notice .woocommerce-info .button, body.e-wc-info-notice .wc-block-components-notice-banner.is-info .button{background-color:var( --e-global-color-primary );background-image:var( --e-global-color-primary );}.elementor-kit-91 a{color:#7F0000;text-decoration:none;}.elementor-kit-91 a:hover{text-decoration:underline;}.elementor-kit-91 h1{color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-91 h2{color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-91 h3{color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-91 h4{color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-91 h5{color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-kit-91 h6{color:var( --e-global-color-text );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.e-wc-error-notice .woocommerce-error, .e-wc-error-notice .wc-block-components-notice-banner.is-error{--error-message-text-color:var( --e-global-color-primary );--error-message-icon-color:var( --e-global-color-primary );--error-message-normal-links-color:var( --e-global-color-primary );--error-message-hover-links-color:var( --e-global-color-primary );}.e-wc-message-notice .woocommerce-message, .e-wc-message-notice .wc-block-components-notice-banner.is-success{--message-message-text-color:var( --e-global-color-primary );--message-message-icon-color:var( --e-global-color-primary );--message-buttons-normal-text-color:var( --e-global-color-accent );}.e-wc-message-notice .woocommerce-message .restore-item, .e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item, .e-wc-message-notice .woocommerce-message a:not([class]), .e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]){--notice-message-normal-links-color:var( --e-global-color-primary );}.e-wc-message-notice .woocommerce-message .restore-item:hover, .e-wc-message-notice .wc-block-components-notice-banner.is-success .restore-item:hover, .e-wc-message-notice .woocommerce-message a:not([class]):hover, .e-wc-message-notice .wc-block-components-notice-banner.is-success a:not([class]):hover{--notice-message-hover-links-color:var( --e-global-color-primary );}.e-wc-info-notice .woocommerce-info, .e-wc-info-notice .wc-block-components-notice-banner.is-info{--info-message-text-color:var( --e-global-color-primary );--info-message-icon-color:var( --e-global-color-primary );--info-buttons-normal-text-color:var( --e-global-color-accent );--info-buttons-hover-text-color:var( --e-global-color-accent );--info-buttons-hover-border-color:var( --e-global-color-primary );--info-border-color:var( --e-global-color-primary );}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-91 h1{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h2{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h3{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h4{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h5{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h6{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-91 h1{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h2{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h3{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h4{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h5{font-size:var( --e-global-typography-secondary-font-size );}.elementor-kit-91 h6{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Grundzustand */ .hover-switch .hover-text-area .text-left, .hover-switch .hover-text-area .text-right { display: none !important; } .hover-switch .hover-text-area .text-default { display: block !important; } /* Hover links */ .hover-switch:has(.hover-left:hover, .hover-left *:hover) .hover-text-area .text-default { display: none !important; } .hover-switch:has(.hover-left:hover, .hover-left *:hover) .hover-text-area .text-left { display: block !important; } .hover-switch:has(.hover-left:hover, .hover-left *:hover) .hover-text-area .text-right { display: none !important; } /* Hover rechts */ .hover-switch:has(.hover-right:hover, .hover-right *:hover) .hover-text-area .text-default { display: none !important; } .hover-switch:has(.hover-right:hover, .hover-right *:hover) .hover-text-area .text-right { display: block !important; } .hover-switch:has(.hover-right:hover, .hover-right *:hover) .hover-text-area .text-left { display: none !important; } .hover-left, .hover-right { transition: transform 0.3s ease; } .woocommerce-checkout .woocommerce table.shop_table { border: 1px solid #e6e6e6; margin: 0; background: #0000; text-align: left; width: 100%; border-collapse: separate; border-radius: 0; border-bottom: none; border-right: none; margin-bottom: 35px; border-bottom: 1px solid #e6e6e6; } body .woocommerce a.button.alt, body .woocommerce button.button.alt, body .woocommerce input.button.alt { background: ##7F0000 !important; } a { text-decoration: none !important; } /* FUNCK-IT mobile-h1 START */ @media(max-width:767px){h1.elementor-heading-title{font-size:28px!important;line-height:1.2!important}} /* FUNCK-IT mobile-h1 ENDE */ /* FUNCK-IT wpforms-abstand START */ .wpforms-container .wpforms-field-label{display:block;margin-bottom:10px;} .wpforms-container .wpforms-field{padding:14px 0;} .wpforms-container .wpforms-field-sublabel{margin-top:6px;} /* FUNCK-IT wpforms-abstand ENDE */ /* ---- Hamburger mittig, Platz fuer den Warenkorb (27.08.2026) ---- */ /* Der Warenkorb schwebt oben rechts (position:fixed) und lag dort auf dem Hamburger. Statt den Korb zu verschieben — er gehoert in jedem Shop nach oben rechts — rueckt der Hamburger in die Mitte. Der Platzhalter `::after` gibt der rechten Seite denselben Raum wie dem Logo links; dadurch steht das Menue dazwischen exakt mittig. ⚠️ Kein `position: absolute` am Symbol: Das nimmt dem Ausklappmenue den Anker und schiebt die Kopfzeile auf. */ @media (max-width: 767px) { .fk-kopfleiste > .e-con-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; } .fk-kopfleiste > .e-con-inner > :first-child { flex: 1 1 0; min-width: 0; } .fk-kopfleiste > .e-con-inner > .elementor-widget-nav-menu { flex: 0 0 auto; } .fk-kopfleiste > .e-con-inner::after { content: ''; flex: 1 1 0; } /* Damit das Symbol nicht auf der weissen Flaeche verschwindet. */ .fk-kopfleiste .elementor-menu-toggle { border-color: rgba(0,0,0,.16); } } /* FUNCK-SHOP-WOLLBERG START */ /* Portiert aus dem Kit von Imkerei Müller (Abschnitte META, REITER, PRODUKT, KACHELN, MENGE), Farben auf Wollberg umgestellt: Rot #7F0000 · Text #2A2828 · Linie #E6DEDB · heller Grund #F7F2F0 Angelegt 01.09.2026 zusammen mit der Produktvorlage #2137. */ /* --- Preis --------------------------------------------------------------- Der Preis kam grünlich heraus, weil er die Kit-Vorgabe erbt. Der Grundpreis darunter erbt seinerseits vom Preis (siehe funck-grundpreis.php). */ body.woocommerce div.product p.price, body.woocommerce div.product span.price, body.woocommerce .elementor-widget-woocommerce-product-price .price { color: #7F0000 !important; } body.woocommerce div.product p.price del { color: #2A2828; opacity: .6; } /* --- Meta-Zeile ---------------------------------------------------------- Füllmenge, Artikelnummer, Kategorien und Schlagwörter klebten in einer Zeile aneinander und hatten unterschiedliche Größen. Der Container wird zur Spalte — das wirkt unabhängig davon, welche Einzelteile WooCommerce und Germanized gerade ausliefern. */ body.woocommerce div.product .product_meta, body.woocommerce .elementor-widget-woocommerce-product-meta .product_meta { display: flex !important; flex-direction: column !important; gap: 6px; } body.woocommerce div.product .product_meta > span, body.woocommerce div.product .product_meta .sku_wrapper, body.woocommerce div.product .product_meta .posted_in, body.woocommerce div.product .product_meta .tagged_as, body.woocommerce div.product .wc-gzd-additional-info { display: block !important; margin: 0; font-size: 15px; line-height: 1.5; color: #2A2828; } body.woocommerce div.product .product_meta .sku_wrapper, body.woocommerce div.product .product_meta .posted_in, body.woocommerce div.product .product_meta .tagged_as { font-weight: 400; } /* WooCommerce setzt den Reiternamen als Überschrift noch einmal in den Inhalt. Einmal reicht — das betraf „Beschreibung" wie „Produktsicherheit". */ body.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child { display: none; } /* --- Reiter -------------------------------------------------------------- WooCommerce liefert graue Kästen mit runden Ecken und Pseudo-Elementen für die Kanten. Reduziert auf eine Linie mit roter Markierung des aktiven. */ body.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 2px solid #E6DEDB; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 2px; } body.woocommerce div.product .woocommerce-tabs ul.tabs::before, body.woocommerce div.product .woocommerce-tabs ul.tabs li::before, body.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; } body.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0; padding: 0; } body.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 20px; color: #2A2828; font-weight: 600; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; } body.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: #7F0000; } body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #7F0000; border-bottom-color: #7F0000; } body.woocommerce div.product .woocommerce-Tabs-panel { padding-top: 4px; } body.woocommerce div.product .woocommerce-Tabs-panel h2 { margin-top: 0; } /* --- Produktgalerie ------------------------------------------------------ Die stehenden Flaschenbilder liefen über die halbe Seitenhöhe. 🔴 NICHT die Breite der Galeriebilder anfassen — FlexSlider rechnet damit. Nur den Rahmen der Galerie schmaler machen. */ body.woocommerce div.product .woocommerce-product-gallery { max-width: 360px; margin-left: 0; margin-right: auto; } body.woocommerce div.product .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } body.woocommerce div.product .flex-control-thumbs li { width: 76px !important; max-width: 76px; margin: 0 !important; float: none !important; } body.woocommerce div.product .flex-control-thumbs img { width: 100%; height: auto; display: block; border-radius: 3px; } body.woocommerce div.product .woocommerce-product-details__short-description, body.woocommerce div.product .woocommerce-product-details__short-description p, body.woocommerce div.product .woocommerce-Tabs-panel, body.woocommerce div.product .woocommerce-Tabs-panel p, body.woocommerce div.product .woocommerce-Tabs-panel li { text-align: left !important; } /* --- Produktkacheln (Shop und ähnliche Produkte) ------------------------- Die stehenden Flaschen ragten aus ihren Kästen und wurden beschnitten. Quadratisch mit „contain" statt „cover" — dann bleibt die ganze Flasche sichtbar, die Restfläche bekommt den hellen Grundton. Germanized hängt je Produkt unterschiedlich viele Zeilen an, deshalb Kachel als Spalte und den Knopf mit automatischem Außenabstand ans Ende. */ body.woocommerce ul.products { align-items: stretch !important; } body.woocommerce ul.products li.product { display: flex !important; flex-direction: column !important; height: 100%; } body.woocommerce ul.products li.product img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto; background: #FFFFFF; border-radius: 4px; } body.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 3.9em; display: flex; align-items: flex-start; color: #2A2828; } body.woocommerce ul.products li.product > a.button, body.woocommerce ul.products li.product > .button, body.woocommerce ul.products li.product .add_to_cart_button, body.woocommerce ul.products li.product .product_type_simple, body.woocommerce ul.products li.product .product_type_variable { margin-top: auto !important; align-self: flex-start; } /* --- Mengenfeld ---------------------------------------------------------- War so schmal, dass die Zahl an den Pfeilen klebte. */ body.woocommerce div.product form.cart .quantity, body.woocommerce .quantity { display: inline-block; } body.woocommerce div.product form.cart .quantity input.qty, body.woocommerce .quantity input.qty { width: 88px !important; min-width: 88px; height: auto; padding: 12px 6px 12px 14px; text-align: left; font-size: 16px; line-height: 1.2; border: 1px solid #E6DEDB; border-radius: 4px; } body.woocommerce .quantity input.qty:focus { outline: 2px solid #7F0000; outline-offset: 1px; border-color: #7F0000; } body.woocommerce ul.products li.product .quantity input.qty { width: 72px !important; min-width: 72px; padding: 8px 4px 8px 10px; } /* --- Attributtabelle ----------------------------------------------------- */ body.woocommerce div.product table.shop_attributes { width: 100%; border: 0; border-collapse: collapse; margin: 0 0 8px; } body.woocommerce div.product table.shop_attributes tr { background: transparent !important; } body.woocommerce div.product table.shop_attributes tr:not(:last-child) { border-bottom: 1px solid #E6DEDB; } body.woocommerce div.product table.shop_attributes th, body.woocommerce div.product table.shop_attributes td { border: 0 !important; padding: 11px 8px; line-height: 1.5; font-style: normal !important; vertical-align: top; background: transparent !important; color: #2A2828; } body.woocommerce div.product table.shop_attributes th { width: 34%; font-weight: 600; text-align: left; white-space: nowrap; } /* FUNCK-SHOP-WOLLBERG ENDE */ /* FUNCK-SEITENWARENKORB START */ /* Die Preisspalte war zu groß gesetzt: „19,93 € / l" brach auf zwei Zeilen um und die Zahlen wirkten wie eine Rechenaufgabe. 🔴 Der Grundpreis bleibt stehen — die Preisangabenverordnung verlangt ihn überall dort, wo ein Preis steht, also auch im Warenkorb. Er wird nur kleiner und einzeilig. */ .xoo-wsc-container .xoo-wsc-product { font-size: 14px; } .xoo-wsc-container .xoo-wsc-pname { font-size: 15px; line-height: 1.35; } .xoo-wsc-container .xoo-wsc-priceBox, .xoo-wsc-container .xoo-wsc-pprice, .xoo-wsc-container .xoo-wsc-psubtotal, .xoo-wsc-container .xoo-wsc-price { font-size: 14px; line-height: 1.45; white-space: nowrap; } /* Grundpreis, Steuer- und Versandhinweise: klein, ruhig, einzeilig. */ .xoo-wsc-container .wc-gzd-additional-info, .xoo-wsc-container .wc-gzd-unit-price, .xoo-wsc-container .price-unit, .xoo-wsc-container .xoo-wsc-priceBox small { font-size: 12px; line-height: 1.4; white-space: nowrap; opacity: .7; display: block; } /* FUNCK-SEITENWARENKORB ENDE */ /* FUNCK-SEITENWARENKORB-2 START */ /* 🔴 Nachtrag: Die geerbte Schriftgröße kam bei den Preisen nicht an — das Plugin setzt für `.xoo-wsc-pprice` eine eigene Größe aus seinen Einstellungen, und die gewinnt gegen eine bloße Vererbung. Deshalb hier ausdrücklich, samt Kindelementen (WooCommerce packt den Betrag in eine eigene ``-Kette). Der Grundpreis bleibt stehen — Preisangabenverordnung —, wird aber klein und einzeilig. */ .xoo-wsc-container .xoo-wsc-priceBox, .xoo-wsc-container .xoo-wsc-priceBox *, .xoo-wsc-container .xoo-wsc-pprice, .xoo-wsc-container .xoo-wsc-pprice * { font-size: 14px !important; line-height: 1.45 !important; } .xoo-wsc-container .xoo-wsc-priceBox { min-width: 96px; text-align: right; } /* Der Betrag selbst darf nicht umbrechen. */ .xoo-wsc-container .xoo-wsc-priceBox .woocommerce-Price-amount, .xoo-wsc-container .xoo-wsc-pprice .woocommerce-Price-amount { white-space: nowrap !important; } /* Grundpreis, Steuer- und Versandhinweis: kleiner, ruhiger, eine Zeile. */ .xoo-wsc-container .xoo-wsc-priceBox .wc-gzd-additional-info, .xoo-wsc-container .xoo-wsc-priceBox .wc-gzd-additional-info *, .xoo-wsc-container .xoo-wsc-pprice .wc-gzd-additional-info, .xoo-wsc-container .xoo-wsc-pprice .wc-gzd-additional-info *, .xoo-wsc-container .xoo-wsc-priceBox small, .xoo-wsc-container .xoo-wsc-priceBox small * { font-size: 12px !important; line-height: 1.4 !important; white-space: nowrap !important; opacity: .7; } .xoo-wsc-container .xoo-wsc-priceBox .wc-gzd-additional-info, .xoo-wsc-container .xoo-wsc-pprice .wc-gzd-additional-info { display: block; margin-top: 2px; } /* FUNCK-SEITENWARENKORB-2 ENDE */ /* FUNCK-SEITENWARENKORB-3 START */ /* 🔴 Am 01.09.2026 im Browser ausgelesen statt geraten. Meine ersten beiden Anläufe zielten auf `.xoo-wsc-priceBox` und `.xoo-wsc-pprice` — die gibt es in dieser Warenkorbfassung GAR NICHT. Verwendet wird die kompakte Vorlage mit `sml`/`smr`: .xoo-wsc-sml-qty „Menge: 1" war 14 px .xoo-wsc-sm-right rechte Spalte nur 51 px breit → alles bricht um .xoo-wsc-smr-ptotal Betrag innen 16 px .wc-gzd-cart-info.unit-price Grundpreis — Hülle 12,6 px, die ZAHL darin aber wieder 16 px. Deshalb war „19,93 €" groß und nur „/ l" klein. */ /* Erst Platz schaffen, sonst hilft keine Schriftgröße. */ .xoo-wsc-container .xoo-wsc-sm-right { min-width: 112px; text-align: right; } /* Menge kleiner. */ .xoo-wsc-container .xoo-wsc-sml-qty { font-size: 12px !important; line-height: 1.4 !important; opacity: .8; } /* Betrag: ruhiger, einzeilig. */ .xoo-wsc-container .xoo-wsc-smr-ptotal, .xoo-wsc-container .xoo-wsc-smr-ptotal bdi, .xoo-wsc-container .xoo-wsc-smr-ptotal > .woocommerce-Price-amount, .xoo-wsc-container .xoo-wsc-smr-ptotal > .woocommerce-Price-amount * { font-size: 14px !important; line-height: 1.45 !important; white-space: nowrap !important; } /* Grundpreis — bleibt stehen (Preisangabenverordnung), aber klein und in EINER Zeile. Die verschachtelte Betragsspanne muss ausdrücklich mit. */ .xoo-wsc-container .wc-gzd-cart-info.unit-price, .xoo-wsc-container .wc-gzd-cart-info.unit-price *, .xoo-wsc-container .wc-gzd-cart-info.unit-price .woocommerce-Price-amount, .xoo-wsc-container .wc-gzd-cart-info.unit-price bdi, .xoo-wsc-container .wc-gzd-cart-info.unit-price .unit { font-size: 11px !important; line-height: 1.35 !important; white-space: nowrap !important; } .xoo-wsc-container .wc-gzd-cart-info.unit-price { display: block; margin-top: 2px; opacity: .7; } /* FUNCK-SEITENWARENKORB-3 ENDE */ /* FUNCK-NICHT-VORRAETIG ANFANG Gehoert zu mu-plugins/funck-nicht-vorraetig.php. Drei Dinge: 1. Der gesperrte Kaufen-Knopf. WooCommerce faerbt jeden .disabled-Knopf mit seiner eigenen Lila (#7F54B3) und sticht damit die Kit-Farbe #7F0000 aus. Deshalb hier ausdruecklich - grau, weil Rot bei uns die Aktionsfarbe ist und ein rotes Feld weiter zum Klicken einlaedt. 2. Die nicht lieferbaren Ausfuehrungen. Das Kreuz kommt vom Swatch-Plugin (Einstellung blurCross), die ruhige Farbe von hier. 3. Hinweiskasten auf der Produktseite und Band auf der Kachel im Shop. */ .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled[disabled], .woocommerce .single_add_to_cart_button.disabled, .woocommerce .single_add_to_cart_button:disabled, .elementor-widget-woocommerce-product-add-to-cart .cart button.disabled, .elementor-widget-woocommerce-product-add-to-cart .cart button:disabled { background-color: #E3E3E3 !important; color: #6B6B6B !important; border-color: #D2D2D2 !important; opacity: 1 !important; cursor: not-allowed !important; text-shadow: none !important; box-shadow: none !important; } .woocommerce button.button.disabled:hover, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled:hover, .woocommerce .single_add_to_cart_button.disabled:hover, .elementor-widget-woocommerce-product-add-to-cart .cart button.disabled:hover { background-color: #E3E3E3 !important; color: #6B6B6B !important; border-color: #D2D2D2 !important; } /* Ausfuehrungen, die es nicht gibt. Das Plugin setzt je nach Fall cfvsw-swatches-disabled (Kombination nicht vorhanden) oder cfvsw-swatches-out-of-stock (nicht vorraetig) - beide sollen gleich aussehen und beide sollen zeigen, dass sie nicht anklickbar sind. Die Plugin-Einstellung "blurCross" ist hier bewusst NICHT gesetzt: Ihr Kreuz ist ein ::before ueber der ganzen Flaeche und verdeckt bei Text-Ausfuehrungen die Groessenangabe vollstaendig - der Kunde saehe dann nicht mehr, welche Groessen es ueberhaupt gibt. Stattdessen bleibt es bei der Vorgabe "blur", deren weisses Feld hier weggenommen wird; den Zustand traegt die Beschriftung selbst. */ .cfvsw-swatches-option.cfvsw-swatches-disabled::before, .cfvsw-swatches-option.cfvsw-swatches-out-of-stock::before { display: none !important; } .cfvsw-swatches-option.cfvsw-swatches-disabled, .cfvsw-swatches-option.cfvsw-swatches-out-of-stock { cursor: not-allowed !important; background: #F5F5F5 !important; border-color: #DCDCDC !important; } .cfvsw-swatches-option.cfvsw-swatches-disabled .cfvsw-swatch-inner, .cfvsw-swatches-option.cfvsw-swatches-out-of-stock .cfvsw-swatch-inner { color: #9A9A9A !important; text-decoration: line-through !important; text-decoration-color: #B34747 !important; text-decoration-thickness: 1px !important; } /* Hinweiskasten ueber dem Varianten-Formular. */ .funck-nicht-vorraetig { display: block; margin: 0 0 18px; padding: 12px 16px; border: 1px solid #E6C3C3; border-left: 4px solid #7F0000; border-radius: 4px; background: #FBF3F3; color: #7F0000; line-height: 1.5; } .funck-nicht-vorraetig strong { display: block; font-size: 1.05em; font-weight: 700; color: #7F0000; } .funck-nicht-vorraetig span { display: block; margin-top: 3px; font-size: .9em; color: #5A4646; } /* Band auf der Kachel im Shop. */ .woocommerce ul.products li.product, .elementor-products-grid ul.products li.product { position: relative; } .funck-kachel-nicht-vorraetig { position: absolute; top: 8px; left: 8px; z-index: 9; display: inline-block; padding: 4px 10px; border-radius: 3px; background: #7F0000; color: #FFFFFF; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; } /* Falls ein Artikel gleichzeitig im Angebot und nicht vorraetig ist, sollen sich die beiden Baender nicht ueberdecken. */ .funck-kachel-nicht-vorraetig ~ .onsale { top: auto !important; bottom: 8px; } /* /alleartikel/ ist KEINE WooCommerce-Archivseite, sondern ein Elementor-Loop-Grid (Vorlage 2123) - und die ist bei Wollberg die eigentliche Shopseite, nicht /shop/. Dort laeuft woocommerce_before_shop_loop_item_title nicht, das Band aus funck-nicht-vorraetig.php kann also gar nicht erscheinen. WooCommerce haengt dem Loop-Element aber seine Bestandsklasse an (.outofstock) und Elementor gibt ihm bereits position: relative - das Band kommt hier deshalb aus dem CSS statt aus PHP. Bewusst auf .e-loop-item eingegrenzt: auf li.product wuerde es das Band aus dem mu-Plugin verdoppeln. Der Umlaut steht als CSS-Escape, damit er nicht an der Kodierung der erzeugten Datei haengt. \00E4 = ae. */ .e-loop-item.outofstock::before { content: "Nicht vorr\00E4 tig"; position: absolute; top: 8px; left: 8px; z-index: 9; padding: 4px 10px; border-radius: 3px; background: #7F0000; color: #FFFFFF; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; } /* Der Kaufen-Knopf der Kacheln ist ein , kein