/*
Theme Name: Ecomall Child
Theme URI: https://demo.theme-sky.com/ecomall/
Author: Theme Sky Team
Author URI: http://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Template: ecomall
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: ecomall-child
*/
/* ===== Megamenü aus dem alten Hauptmenü =====
Die Bausteine liefern reines HTML (ohne Elementor). Die Spaltenzahl steuert
das Theme über die Klasse .ts-megamenu-columns-N am Menüpunkt. */
.cf-mega {
display: grid;
gap: 22px 34px;
padding: 26px 30px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ts-megamenu-columns-2 .cf-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-megamenu-columns-3 .cf-mega { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ts-megamenu-columns-4 .cf-mega { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-mega-spalte { min-width: 0; }
/* Kategorie-Kachel über dem Spaltentitel: WooCommerce-Kategoriebild, 3:2.
Die Spalte ist rund 165 px breit, die Bilddatei 720x480 reicht auch für Retina. */
.cf-mega-bild {
display: block;
aspect-ratio: 3 / 2;
margin-bottom: 10px;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
}
.cf-mega-bild img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s ease;
}
.cf-mega-spalte:hover .cf-mega-bild img { transform: scale(1.04); }
.cf-mega-titel {
display: block;
font-weight: 600;
font-size: 15px;
line-height: 1.35;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.cf-mega-links {
list-style: none;
margin: 0;
padding: 0;
}
.cf-mega-links li { margin: 0 0 6px; }
.cf-mega-links a {
display: block;
font-size: 14px;
line-height: 1.5;
opacity: 0.85;
}
.cf-mega-links a:hover,
.cf-mega-titel:hover { opacity: 1; }
/* Auf schmalen Bildschirmen klappt das Menü ohnehin mobil auf */
@media (max-width: 991px) {
.cf-mega { grid-template-columns: 1fr; gap: 14px; padding: 14px 16px; }
}
/* ===== Breaking-Bad-Farbwelt =====
Die Farben stammen direkt aus dem Logo: giftgrün über tannengrün bis
fast schwarzes Blaugrün. */
:root {
/* Breaking-Bad-Palette, gemessen aus den Originalvorlagen */
--cf-gelb: #7fb857; /* Akzent: gedämpftes Grün */
--cf-gelb-hell: #98cf6d;
--cf-kastengruen: #0a503c; /* Grün der Periodensystem-Kästen */
--cf-oliv: #2f3a12;
--cf-oliv-tief: #16210c;
--cf-grund: #0b0f07; /* Seitenhintergrund */
--cf-flaeche: #141a10;
--cf-flaeche-hoch:#1d2615;
--cf-tief: #080b05; /* Fußzeile, Aufklappflächen */
--cf-schrift: #e4e8dc;
--cf-schrift-matt:#a3ab97;
--cf-rahmen: #2a331f;
--cf-auf-gelb: #0b0f07;
/* alte Namen bleiben als Verweis bestehen, damit nichts bricht */
--cf-gruen-hell: var(--cf-gelb);
--cf-gruen: var(--cf-kastengruen);
--cf-gruen-tief: var(--cf-oliv);
--cf-dunkel: var(--cf-oliv-tief);
--cf-schwarz: var(--cf-tief);
--cf-schrift-hell: var(--cf-schrift);
}
/* Kopfzeile mit dem Verlauf aus dem Logo */
.header-template {
background: linear-gradient(115deg,
var(--cf-gruen-hell) 0%,
var(--cf-gruen) 32%,
var(--cf-gruen-tief) 62%,
var(--cf-dunkel) 100%);
color: rgba(255, 255, 255, 0.97);
}
/* Logo flach halten, damit die Kopfzeile eine Zeile bleibt */
.header-template .logo img {
max-height: 68px;
width: auto;
}
.cf-mega-titel {
color: rgba(255, 255, 255, 0.97);
border-bottom-color: rgba(255, 255, 255, 0.16);
}
.cf-mega-links a {
color: var(--cf-schrift-hell);
}
.cf-mega-links a:hover,
.cf-mega-titel:hover {
color: var(--cf-gruen-hell);
}
/* Das Theme färbt die Kopfzeilen-Bereiche einzeln über seine Optionen weiß.
Deshalb liegt der Verlauf auf der äußeren Kopfzeile und die inneren
Bereiche werden durchsichtig gemacht. */
/* Seit Eintrag 31 liegt der Verlauf auf dem festen Seitenhintergrund
(body::before, siehe Abschnitt "Durchgehender Verlauf und Qualm").
Die Kopfzeile ist durchsichtig, damit er ohne Bruch weiterläuft. */
header.ts-header {
background: transparent !important;
}
/* Beim Scrollen mitlaufende Kopfzeile: gleicher Verlauf, leicht abgedunkelt */
header.ts-header .header-sticky.is-sticky,
.header-sticky.sticky-wrapper.is-sticky .header-sticky {
background: linear-gradient(115deg,
#0b3b2c 0%,
var(--cf-oliv-tief) 55%,
var(--cf-grund) 100%) !important;
}
/* Suchfeld an die dunkle Kopfzeile anpassen */
header.ts-header input[type="text"],
header.ts-header input[type="search"],
header.ts-header select {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.97);
}
header.ts-header input::placeholder {
color: rgba(255, 255, 255, 0.65);
}
/* ===== Megamenü mit Produkten =====
Links die Unterkategorien in Spalten, rechts drei beliebte Produkte.
Die Produktkarten sind fest im Baustein gespeichert und kosten beim
Seitenaufruf keine zusätzliche Datenbankabfrage. */
.cf-mega.cf-mega-mit-produkten {
display: grid;
grid-template-columns: minmax(0, 1fr) 290px;
gap: 0;
padding: 0;
}
.cf-mega-spalten {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px 28px;
padding: 26px 30px;
}
.ts-megamenu-columns-2 .cf-mega-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ts-megamenu-columns-4 .cf-mega-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Rechte Seite: Produktvorschau, farblich abgesetzt */
.cf-mega-produkte {
padding: 22px 22px 18px;
background: rgba(27, 174, 70, 0.06);
border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.cf-mega-produkte-titel {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cf-gruen-hell);
margin-bottom: 14px;
}
.cf-mega-karten {
display: flex;
flex-direction: column;
gap: 12px;
}
.cf-karte {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 12px;
align-items: center;
padding: 8px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.04);
transition: background 0.15s ease;
}
.cf-karte:hover { background: rgba(27, 174, 70, 0.14); }
.cf-karte-bild {
grid-row: span 2;
display: block;
width: 56px;
height: 56px;
border-radius: 4px;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
}
.cf-karte-bild img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cf-karte-name {
font-size: 13px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.92);
align-self: end;
}
.cf-karte-preis {
font-size: 13px;
font-weight: 600;
color: var(--cf-gruen-hell);
align-self: start;
}
.cf-karte-preis del { opacity: 0.5; font-weight: 400; margin-right: 5px; }
.cf-karte-preis ins { text-decoration: none; }
/* Kategorie-Überschriften im Megamenü deutlicher */
.cf-mega-titel {
font-size: 14px;
letter-spacing: 0.01em;
}
.cf-mega-links a { font-size: 13px; }
@media (max-width: 1200px) {
.cf-mega.cf-mega-mit-produkten { grid-template-columns: minmax(0, 1fr); }
.cf-mega-produkte { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.cf-mega-karten { flex-direction: row; }
.cf-karte { flex: 1; }
}
/* ===== Aufklappflächen =====
Hintergrund und Grundschrift kommen jetzt aus den Theme-Einstellungen
(dunkel mit heller Schrift). Hier nur noch die Feinheiten. */
.cf-mega-titel {
color: rgba(255, 255, 255, 0.97);
border-bottom-color: rgba(255, 255, 255, 0.16);
}
.cf-mega-links a {
color: rgba(255, 255, 255, 0.82);
}
/* ===== Produktboxen aufräumen ===== */
/* Artikelnummer und das obere "inkl. MwSt." raus - beides steht doppelt,
der Steuerhinweis erscheint weiter unten direkt am Preis. */
.product-wrapper .product-sku,
.product-wrapper .meta-wrapper > .wc-gzd-additional-info-loop.tax-info,
.elementor-widget-wc-archive-products .product-sku,
.products .product-sku {
display: none !important;
}
/* Kategorien in der Produktbox raus */
.product-wrapper .posted_in,
.product-wrapper .product-categories,
.product-wrapper .loop-product-categories,
.products .product-wrapper .meta-wrapper .product-cat {
display: none !important;
}
/* Der Steuerhinweis am Preis: kleiner und zurückhaltender als der Preis */
.product-wrapper .price .woocommerce-price-suffix,
.products .woocommerce-price-suffix {
display: inline-block;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.01em;
color: var(--cf-schrift-matt);
opacity: 0.85;
}
/* Versandkostenhinweis ebenfalls zurückhaltend (rechtlich nötig, bleibt) */
.product-wrapper .wc-gzd-additional-info-loop.shipping-costs-info,
.product-wrapper .wc-gzd-additional-info-loop.shipping-costs-info a {
font-size: 11px;
color: var(--cf-schrift-matt);
}
/* ===== Mitlaufende Kopfzeile ===== */
/* Beim Scrollen wurde sie durchsichtig - jetzt dunkel abgesetzt. */
header.ts-header .header-sticky.is-sticky,
.header-sticky.sticky-wrapper.is-sticky .header-sticky,
.is-sticky .header-sticky,
header.ts-header.has-sticky .header-sticky.is-sticky {
background: rgba(8, 11, 5, 0.92) !important;
backdrop-filter: blur(6px);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
/* ===== Kein waagerechtes Scrollen ===== */
/* Einzelne Bausteine ragten über den rechten Rand hinaus und erzeugten
einen weißen Streifen samt Scrollbalken. */
html, body {
max-width: 100%;
overflow-x: hidden;
}
.cf-mega,
.cf-mega-spalten,
.cf-mega-produkte {
max-width: 100%;
box-sizing: border-box;
}
/* ===== Produktseite ===== */
/* Artikelnummer aus der Meta-Zeile (Kategorien und Schlagwörter bleiben) */
.product_meta .sku_wrapper,
.single-product .product_meta .sku_wrapper {
display: none !important;
}
/* Beschreibung und Aufklapper statt Reiter */
.cf-produkt-inhalte {
margin-top: 26px;
}
.cf-beschreibung {
font-size: 15px;
line-height: 1.7;
color: var(--cf-schrift);
}
.cf-aufklapp {
margin-top: 10px;
border-top: 1px solid var(--cf-rahmen);
padding-top: 10px;
}
.cf-aufklapp > summary {
cursor: pointer;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--cf-schrift-matt);
list-style: none;
display: flex;
align-items: center;
gap: 7px;
}
.cf-aufklapp > summary::-webkit-details-marker { display: none; }
.cf-aufklapp > summary::before {
content: "+";
display: inline-block;
width: 16px;
height: 16px;
line-height: 15px;
text-align: center;
border: 1px solid var(--cf-rahmen);
border-radius: 3px;
font-size: 13px;
}
.cf-aufklapp[open] > summary::before { content: "–"; }
.cf-aufklapp > summary:hover { color: var(--cf-gelb); }
.cf-aufklapp-inhalt {
padding: 12px 0 4px;
font-size: 14px;
color: var(--cf-schrift-matt);
}
/* ===== Produktseite im Laborstil =====
Das Produktbild bekommt den Rahmen der Periodensystem-Kästen aus dem Logo,
dazu ein sehr dezenter Qualmschimmer im Hintergrund. */
.single-product .woocommerce-product-gallery {
position: relative;
background: var(--cf-flaeche);
border: 2px solid rgba(216, 229, 39, 0.35);
border-radius: 2px;
padding: 10px;
}
.single-product .woocommerce-product-gallery::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(120% 80% at 15% 0%, rgba(216, 229, 39, 0.07), transparent 60%);
}
.single-product .product_title {
letter-spacing: 0.01em;
}
.single-product .summary .price {
color: var(--cf-gelb);
}
/* Bild immer scharf darstellen */
.single-product .woocommerce-product-gallery img {
image-rendering: auto;
width: 100%;
height: auto;
}
/* Der Suchknopf saß als schwarze Fläche im schwarzen Kopfbereich und war
dadurch unsichtbar - hier bekommt er die grüne Umrandung zurück. */
header.ts-header button[type="submit"],
header.ts-header .search-button,
header.ts-header .searchsubmit,
header.ts-header form button {
background: transparent !important;
color: var(--cf-gelb) !important;
border: 1px solid var(--cf-gelb) !important;
font-weight: 700;
}
header.ts-header button[type="submit"]:hover,
header.ts-header .search-button:hover,
header.ts-header form button:hover {
background: var(--cf-gelb) !important;
color: #0d1108 !important;
}
/* Verfügbarkeitshinweis auch in der Produktbox verbergen */
.product-wrapper .availability,
.product-wrapper .stock.in-stock {
display: none !important;
}
/* ===== Alte bunte Knöpfe ruhigstellen =====
In den Inhalten stecken 23 Farbverläufe, davon 3 im Kassenbereich. Statt die
Inhalte umzuschreiben (heikel bei der Kasse) werden die Verläufe hier
überschrieben: schwarze Fläche, grüne Schrift, grüner Rand. */
/* Eintrag 34b: Knöpfe – dunkle Pille mit grünem Schein. Die Elementor-Knöpfe
der Startseite haben keinen Eigenstil mehr (Verlauf, Rahmen, Schrift
Preahvihear entfernt), dieser Block ist die einzige Quelle. */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button,
.elementor-widget-button .elementor-button {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)) #0d1108 !important;
color: var(--cf-gelb) !important;
border: 1px solid rgba(127, 184, 87, 0.55) !important;
border-radius: 999px !important;
padding: 14px 30px !important;
font-family: Mulish, sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: 0.02em !important;
line-height: 1.2 !important;
text-shadow: none !important;
box-shadow: 0 10px 26px -12px rgba(127, 184, 87, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
transition: background-color 0.15s ease, color 0.15s ease,
box-shadow 0.15s ease, transform 0.15s ease;
}
.elementor-button .elementor-button-icon {
opacity: 0.85;
}
.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover,
a.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
background: var(--cf-gelb) !important;
color: #0d1108 !important;
border-color: var(--cf-gelb) !important;
box-shadow: 0 14px 30px -12px rgba(127, 184, 87, 0.85) !important;
transform: translateY(-1px);
}
/* Die Kasse bleibt bewusst unberührt */
.wfacp-main-form .elementor-button,
.woocommerce-checkout .elementor-button {
background-image: revert !important;
background-color: revert !important;
color: revert !important;
border: revert !important;
}
/* Artikelnummer und Teilen-Leiste auf der Produktseite ausblenden.
Das Theme gibt beides in der Meta-Zeile aus (Klassen sku-wrapper und
ts-social-sharing), nicht über die WooCommerce-Standardstellen. */
.single-product .sku-wrapper,
.single-product .product_meta .sku,
.single-product .ts-social-sharing,
.single-product .meta-content .sku-wrapper {
display: none !important;
}
/* Knöpfe auf der Produktseite deutlich sichtbar machen */
.single-product .single_add_to_cart_button,
.single-product .ts-buy-now-button {
background: #0d1108 !important;
color: var(--cf-gelb) !important;
border: 1px solid var(--cf-gelb) !important;
font-weight: 700;
}
.single-product .single_add_to_cart_button:hover,
.single-product .ts-buy-now-button:hover {
background: var(--cf-gelb) !important;
color: #0d1108 !important;
}
/* ===== Altershinweis (Age Gate Lite) im neuen Stil =====
War ein weißer Kasten mit buntem Blatt und pinkem Knopf - der einzige
helle Fleck und das Erste, was jeder Besucher sieht. */
#agl_wrapper,
.agl_wrapper {
background: rgba(5, 8, 4, 0.92) !important;
backdrop-filter: blur(3px);
}
#agl_form,
.agl_form,
.agl_main {
background: #0d1108 !important;
border: 1px solid rgba(127, 184, 87, 0.40) !important;
border-radius: 4px;
color: var(--cf-schrift) !important;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
/* Buntes Blatt raus, stattdessen das Cannafree-Logo */
#agl_form img,
.agl_form img {
display: none !important;
}
#agl_form::before,
.agl_form::before {
content: "";
display: block;
width: min(320px, 70%);
height: 90px;
margin: 6px auto 18px;
background: url("/wp-content/uploads/2026/09/cannafree-logo-v5.png") center/contain no-repeat;
}
#agl_form h2,
.agl_form h2 {
color: rgba(255, 255, 255, 0.97) !important;
font-size: 26px;
letter-spacing: 0.01em;
}
#agl_form p,
.agl_form p {
color: var(--cf-schrift-matt) !important;
}
/* Knöpfe: Ja deutlich, Nein zurückhaltend */
#agl_yes_button,
.agl_yes_button {
background: var(--cf-gelb) !important;
color: #0d1108 !important;
border: 1px solid var(--cf-gelb) !important;
font-weight: 700 !important;
letter-spacing: 0.04em;
padding: 11px 30px !important;
border-radius: 3px !important;
}
#agl_yes_button:hover,
.agl_yes_button:hover {
background: #98cf6d !important;
border-color: #98cf6d !important;
}
#agl_no_button,
.agl_no_button {
background: transparent !important;
color: var(--cf-schrift-matt) !important;
border: 1px solid var(--cf-rahmen) !important;
padding: 11px 26px !important;
border-radius: 3px !important;
}
#agl_no_button:hover,
.agl_no_button:hover {
color: rgba(255, 255, 255, 0.97) !important;
border-color: var(--cf-schrift-matt) !important;
}
/* Überschrift "Product details" über der Beschreibung raus */
.cf-beschreibung > h2:first-child {
display: none;
}
/* Warenkorb-Knopf: das Theme setzt eigene Klassen, deshalb breiter gefasst */
.single-product button.single_add_to_cart_button,
.single-product .cart button[type="submit"],
.single-product .cart .button {
background: #0d1108 !important;
color: var(--cf-gelb) !important;
border: 1px solid var(--cf-gelb) !important;
font-weight: 700 !important;
}
.single-product button.single_add_to_cart_button:hover,
.single-product .cart button[type="submit"]:hover,
.single-product .cart .button:hover {
background: var(--cf-gelb) !important;
color: #0d1108 !important;
}
/* ===== Dunkelgrüner Grund statt Schwarz =====
Der Seitenhintergrund nimmt jetzt das Grün des Kopfzeilen-Verlaufs auf,
mit einem sehr leichten Verlauf nach unten. */
:root {
--cf-grund-gruen: #0e2419;
--cf-grund-gruen-tief:#091710;
--cf-flaeche-gruen: #123023;
--cf-rahmen-gruen: #27412f;
}
/* ===== Durchgehender Verlauf und Qualm (Eintrag 31) =====
EIN fester Hintergrund für die ganze Seite: der Kopfzeilen-Verlauf
(115°, Kastengrün → Oliv → Grund) und darüber gelber Qualm wie auf den
Breaking-Bad-Vorlagen. Der Qualm ist eine eingebettete SVG-Grafik
(Rauschen + Maske), keine Bilddatei, keine Animation.
Er liegt in body::before mit position: fixed – background-attachment: fixed
funktioniert auf iPhones nicht, das Pseudo-Element schon.
Kopfzeile und Inhaltsrahmen sind durchsichtig, damit der Verlauf
von ganz oben bis unten ohne Bruch durchläuft. */
body {
background: var(--cf-grund) !important;
color: #e8efe6;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%201000%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%20%3Cdefs%3E%20%3Cfilter%20id=%22q%22%20x=%220%22%20y=%220%22%20width=%221%22%20height=%221%22%20color-interpolation-filters=%22sRGB%22%3E%20%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.0026%200.0040%22%20numOctaves=%225%22%20seed=%2211%22/%3E%20%3CfeColorMatrix%20values=%220%200%200%200%200.93%200%200%200%200%200.98%200%200%200%200%200.18%200%200%200%203.0%20-1.3%22/%3E%20%3CfeGaussianBlur%20stdDeviation=%221.5%22/%3E%20%3C/filter%3E%20%3CradialGradient%20id=%22l%22%20cx=%220.18%22%20cy=%220.95%22%20r=%220.75%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22%20stop-opacity=%220.9%22/%3E%20%3Cstop%20offset=%220.45%22%20stop-color=%22%23fff%22%20stop-opacity=%220.35%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23fff%22%20stop-opacity=%220%22/%3E%20%3C/radialGradient%3E%20%3CradialGradient%20id=%22r%22%20cx=%220.92%22%20cy=%220.42%22%20r=%220.55%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22%20stop-opacity=%220.55%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23fff%22%20stop-opacity=%220%22/%3E%20%3C/radialGradient%3E%20%3Cmask%20id=%22m%22%3E%20%3Crect%20width=%221000%22%20height=%221000%22%20fill=%22url(%23l)%22/%3E%20%3Crect%20width=%221000%22%20height=%221000%22%20fill=%22url(%23r)%22/%3E%20%3C/mask%3E%20%3C/defs%3E%20%3Crect%20width=%221000%22%20height=%221000%22%20filter=%22url(%23q)%22%20mask=%22url(%23m)%22%20opacity=%220.62%22/%3E%20%3C/svg%3E") center / cover no-repeat,
linear-gradient(115deg,
var(--cf-kastengruen) 0%,
#123a1e 30%,
var(--cf-oliv-tief) 68%,
var(--cf-grund) 100%);
}
body.woocommerce,
.single-product,
#main,
.site-content,
.main-content-wrapper {
background: transparent !important;
color: #e8efe6;
}
/* Flächen darauf: eine Spur heller, damit sie sich abheben */
.product-wrapper,
.woocommerce-tabs,
.cf-produkt-inhalte,
.summary.entry-summary {
background: transparent;
}
.products .product-wrapper,
.single-product .woocommerce-product-gallery {
background: var(--cf-flaeche-gruen) !important;
border-color: var(--cf-rahmen-gruen);
}
/* Schriften auf sicheren Kontrast bringen */
body, p, li, td, th, dd, dt,
.single-product .summary,
.cf-beschreibung, .cf-beschreibung p, .cf-beschreibung li,
.woocommerce-product-details__short-description {
color: #e8efe6 !important;
}
h1, h2, h3, h4, h5, h6,
.product_title, .entry-title {
color: rgba(255, 255, 255, 0.97) !important;
}
.cf-aufklapp-inhalt,
.cf-aufklapp-inhalt p,
.cf-aufklapp-inhalt li,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
color: #b9c7b4 !important;
}
.woocommerce-breadcrumb a:hover { color: var(--cf-gelb) !important; }
/* ===== Zeilen kompakter ===== */
/* Brotkrumen niedriger */
.ts-breadcrumb,
.breadcrumb-title-wrapper,
.woocommerce-breadcrumb,
.breadcrumbs-wrapper {
padding-top: 8px !important;
padding-bottom: 8px !important;
min-height: 0 !important;
line-height: 1.4;
font-size: 13px;
}
/* Logobereich der Kopfzeile niedriger */
header.ts-header .header-middle {
padding-top: 6px !important;
padding-bottom: 6px !important;
min-height: 0 !important;
}
header.ts-header .logo img {
max-height: 54px;
}
/* ===== Abstände in der Kopfzeile straffen ===== */
header.ts-header .header-middle {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* ===== Suchschlitz: dunkelgrau mit milder weißer Schrift ===== */
header.ts-header form,
header.ts-header .search-wrapper,
header.ts-header .ts-search-by-category {
background: #23282a !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 6px;
overflow: hidden;
}
header.ts-header form input[type="text"],
header.ts-header form input[type="search"],
header.ts-header form .search-field,
header.ts-header .ts-search-by-category input {
background: #23282a !important;
color: #e9edec !important;
border: 0 !important;
font-size: 15px;
}
header.ts-header form input::placeholder,
header.ts-header form .search-field::placeholder {
color: #9aa4a2 !important;
opacity: 1 !important;
}
header.ts-header button[type="submit"],
header.ts-header form button {
border-radius: 0 !important;
border: 0 !important;
border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
}
/* ===== Überschriften ohne Umrandungseffekt =====
In den Inhalten steckte eine Textumrandung (heller Rand, helle Füllung),
die auf dunklem Grund unruhig wirkt. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
-webkit-text-stroke: 0 !important;
text-stroke: 0 !important;
-webkit-text-fill-color: currentColor !important;
text-shadow: none !important;
paint-order: normal;
}
/* ===== Eingabefelder außerhalb der Kopfzeile ===== */
.woocommerce select, .variations select, select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="search"], textarea {
background: var(--cf-flaeche-gruen, #123023) !important;
color: #e8efe6 !important;
border: 1px solid var(--cf-rahmen-gruen, #27412f) !important;
}
select option { background: #123023 !important; color: #e8efe6 !important; }
/* ===== Überlauf nach rechts beheben =====
Auf der Startseite haben zehn Textblöcke eine fest eingetragene Breite von
1306 Pixeln. Auf schmaleren Bildschirmen ragen sie über den Rand hinaus -
daher der helle Streifen und das seitliche Scrollen. Auf dem Handy wäre das
noch drastischer. Die feste Breite wird hier zur Obergrenze gemacht. */
.elementor-widget,
.elementor-element,
.elementor-widget-text-editor,
.elementor-widget-heading {
--container-widget-width: 100% !important;
max-width: 100% !important;
}
.elementor-element > .elementor-widget-container {
max-width: 100%;
}
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
max-width: 100%;
}
/* Bilder und eingebettete Inhalte nie breiter als der Platz */
img, iframe, video, table {
max-width: 100%;
height: auto;
}
/* Lange Wörter und Adressen umbrechen statt hinausragen */
p, li, h1, h2, h3, h4, .elementor-heading-title {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* ===== Archivseiten ===== */
.cf-archiv-titel {
font-size: 28px;
line-height: 1.2;
margin: 4px 0 6px;
color: rgba(255, 255, 255, 0.97);
}
.cf-archiv-text {
font-size: 14px;
line-height: 1.6;
color: var(--cf-schrift-matt);
margin-bottom: 18px;
max-width: 80ch;
}
@media (max-width: 767px) {
.cf-archiv-titel { font-size: 22px; }
}
/* ===== Preiszeile in den Produktkarten =====
Preis links, "inkl. MwSt." direkt daneben, "zzgl. Versandkosten" darunter -
ohne Umbruch und ohne die Kachelhöhe aufzublähen. */
.product-wrapper .meta-wrapper {
display: flex;
flex-direction: column;
}
.product-wrapper .price {
display: flex;
align-items: baseline;
flex-wrap: nowrap;
gap: 6px;
line-height: 1.25;
white-space: nowrap;
}
.product-wrapper .price .woocommerce-price-suffix {
font-size: 11px;
font-weight: 400;
color: var(--cf-schrift-matt);
white-space: nowrap;
flex: 0 0 auto;
}
/* Versandkostenhinweis rutscht unter den Preis */
.product-wrapper .meta-wrapper .wc-gzd-additional-info-loop.shipping-costs-info {
order: 99;
margin: 1px 0 0 !important;
padding: 0 !important;
font-size: 11px;
line-height: 1.3;
white-space: nowrap;
color: var(--cf-schrift-matt);
}
.product-wrapper .meta-wrapper .wc-gzd-additional-info-loop.shipping-costs-info a {
font-size: 11px;
color: var(--cf-schrift-matt);
text-decoration: underline;
}
/* ===== Suchbox =====
Zwei Eigenheiten des Themes werden hier aufgehoben:
1. ".no-category" setzt 44px Abstand oben - das war der leere Kasten,
seit die Kategorieauswahl entfernt ist.
2. ".search-field" bricht um (flex-wrap), dadurch rutschte der Knopf
unter das Eingabefeld. */
header.ts-header .ts-search-by-category.no-category {
padding-top: 0 !important;
}
header.ts-header .ts-search-by-category .search-field {
flex-wrap: nowrap !important;
background: #1b1f1d !important;
border: 1px solid var(--cf-gelb) !important;
border-radius: 6px !important;
overflow: hidden !important;
}
header.ts-header .ts-search-by-category .search-field input[type="text"] {
flex: 1 1 auto !important;
min-width: 0;
background: transparent !important;
color: #e9edec !important;
border: 0 !important;
box-shadow: none !important;
font-size: 15px;
padding: 12px 18px !important;
}
header.ts-header .ts-search-by-category input::placeholder {
color: #8f9a96 !important;
opacity: 1 !important;
}
header.ts-header .ts-search-by-category .search-button {
flex: 0 0 auto !important;
border-radius: 0 !important;
border-left: 1px solid rgba(127, 184, 87, 0.45) !important;
background: none !important;
}
header.ts-header .ts-search-by-category .search-button input[type="submit"] {
background: transparent !important;
color: rgba(255, 255, 255, 0.97) !important;
border: 0 !important;
border-radius: 0 !important;
font-weight: 700 !important;
letter-spacing: 0.05em;
padding: 12px 26px !important;
cursor: pointer;
}
header.ts-header .ts-search-by-category .search-button input[type="submit"]:hover {
background: var(--cf-gelb) !important;
color: #0d1108 !important;
}
/* Aufklappfläche nur so hoch wie nötig - die Zeilen wurden gestreckt */
.cf-mega-spalten {
grid-auto-rows: min-content !important;
align-content: start !important;
row-gap: 16px !important;
}
.cf-mega.cf-mega-mit-produkten {
align-items: start;
}
.cf-mega-produkte {
align-self: stretch;
}
/* Grundpreis: klein und zurückhaltend unter dem Preis */
.cf-grundpreis {
font-size: 12px;
line-height: 1.35;
color: var(--cf-schrift-matt);
margin: 2px 0 0;
}
.single-product .cf-grundpreis {
font-size: 13px;
margin: 4px 0 8px;
}
/* ===== Mengen-Kacheln =====
Vier pro Reihe. Gibt es mehr, wird die nächste Reihe nur angeschnitten
gezeigt (rund ein Fünftel), darunter ein Aufklapper. Auf dem Handy zwei
pro Reihe, Flächen mindestens 44 Pixel hoch. */
.cf-mengen {
margin: 14px 0 18px;
}
.cf-mengen-titel {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--cf-schrift-matt);
margin-bottom: 8px;
}
.cf-mengen-raster {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 9px;
max-height: 96px; /* eine Reihe plus Anschnitt der zweiten */
overflow: hidden;
transition: max-height 0.25s ease;
}
.cf-mengen.offen .cf-mengen-raster {
max-height: 1200px;
}
.cf-menge {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 74px;
padding: 12px 8px 10px;
background: var(--cf-flaeche-gruen, #123023);
border: 1px solid var(--cf-rahmen-gruen, #27412f);
border-radius: 8px;
color: var(--cf-schrift);
font: inherit;
cursor: pointer;
transition: border-color 0.14s ease, background 0.14s ease;
}
.cf-menge:hover {
border-color: var(--cf-gelb);
}
.cf-menge.aktiv {
border-color: var(--cf-gelb);
background: rgba(127, 184, 87, 0.14);
box-shadow: inset 0 0 0 1px var(--cf-gelb);
}
.cf-menge-leer {
opacity: 0.4;
cursor: not-allowed;
}
.cf-menge-wert {
font-size: 17px;
font-weight: 700;
line-height: 1.1;
}
.cf-menge-grund {
font-size: 11px;
color: var(--cf-schrift-matt);
line-height: 1.2;
text-align: center;
}
.cf-spare {
position: absolute;
top: -9px;
right: -4px;
background: var(--cf-gelb);
color: #0d1108;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 2px 7px;
border-radius: 10px;
white-space: nowrap;
}
.cf-mengen-mehr {
display: block;
width: 100%;
margin-top: 9px;
padding: 9px;
background: transparent;
border: 1px solid var(--cf-rahmen-gruen, #27412f);
border-radius: 7px;
color: var(--cf-gelb);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.cf-mengen-mehr:hover {
border-color: var(--cf-gelb);
background: rgba(127, 184, 87, 0.10);
}
/* Die ursprüngliche Auswahlliste wird nicht mehr gebraucht */
.cf-mengen ~ .variations,
.variations_form .variations {
display: none !important;
}
@media (max-width: 600px) {
.cf-mengen-raster {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-height: 166px;
}
.cf-menge { min-height: 68px; }
}
/* Anschnitt der zweiten Kachelreihe ruhiger: die Hinweise der verdeckten
Reihe sollen nicht halb hereinragen. */
.cf-mengen-raster {
max-height: 86px;
padding-top: 10px;
margin-top: -10px;
}
.cf-mengen.offen .cf-mengen-raster {
max-height: 1200px;
}
@media (max-width: 600px) {
.cf-mengen-raster { max-height: 172px; }
}
/* ===== Nachladen statt Seitenblättern ===== */
.cf-nachladen {
display: flex;
justify-content: center;
padding: 18px 0 26px;
min-height: 40px;
}
.cf-mehr-produkte {
background: #0d1108;
color: var(--cf-gelb);
border: 1px solid var(--cf-gelb);
border-radius: 7px;
padding: 13px 30px;
font: inherit;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer;
min-height: 46px;
}
.cf-mehr-produkte:hover {
background: var(--cf-gelb);
color: #0d1108;
}
.cf-laedt {
color: var(--cf-schrift-matt);
font-size: 14px;
}
/* Die Seitennummerierung bleibt für Suchmaschinen im Quelltext, wird aber
nicht mehr angezeigt, sobald das Nachladen greift. */
/* ===== Reihenfolge in der Produktkachel =====
Name, dann Preis, dann Grundpreis, dann Versandhinweis. Die Angaben
kommen von verschiedenen Stellen (Theme, WooCommerce, Germanized),
deshalb wird die Reihenfolge hier festgelegt. */
.product-wrapper .meta-wrapper {
display: flex;
flex-direction: column;
gap: 2px;
}
.product-wrapper .meta-wrapper .product-name,
.product-wrapper .meta-wrapper h3 { order: 1; margin-bottom: 2px; }
.product-wrapper .meta-wrapper .price { order: 2; }
.product-wrapper .meta-wrapper .cf-grundpreis { order: 3; }
.product-wrapper .meta-wrapper .product-units { order: 4; }
.product-wrapper .meta-wrapper .shipping-costs-info { order: 5; }
.product-wrapper .meta-wrapper .product-group-button-meta { order: 6; }
/* Germanized-Mengenangabe ("Produkt enthält: 2 g – 5 g") zurückhaltend */
.product-wrapper .product-units {
font-size: 11px;
line-height: 1.3;
color: var(--cf-schrift-matt);
margin: 0 !important;
}
/* ===== Ähnliche Produkte als Raster =====
Der Schieberegler des Themes wird zum festen Raster: vier Kacheln
nebeneinander, auf dem Tablet drei, auf dem Handy zwei. */
.related.products ul.products,
.up-sells ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
transform: none !important;
width: auto !important;
}
.related.products ul.products li.product,
.up-sells ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
}
/* Bedienelemente des Schiebereglers werden nicht mehr gebraucht */
.related.products .slick-arrow,
.related.products .slick-dots,
.related.products .owl-nav,
.related.products .owl-dots,
.related.products .swiper-button-next,
.related.products .swiper-button-prev,
.related.products .swiper-pagination {
display: none !important;
}
.related.products > h2,
.up-sells > h2 {
font-size: 22px;
margin: 26px 0 16px;
color: rgba(255, 255, 255, 0.97);
}
/* Trusted-Shops-Baustein einbetten, damit er nicht als weißer Block
aus der Seite fällt. Die Darstellung darin liefert Trusted Shops selbst. */
.trustedShopsWidget {
background: var(--cf-flaeche-gruen, #123023);
border: 1px solid var(--cf-rahmen-gruen, #27412f);
border-radius: 8px;
padding: 14px;
margin: 22px 0;
overflow: hidden;
}
@media (max-width: 1024px) {
.related.products ul.products,
.up-sells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.related.products ul.products,
.up-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.related.products > h2, .up-sells > h2 { font-size: 18px; }
}
/* Anschnitt so wählen, dass ein Stück der nächsten Kachelreihe sichtbar ist
und nicht nur deren Hinweisschildchen. */
.cf-mengen-raster { max-height: 100px; }
.cf-mengen.offen .cf-mengen-raster { max-height: 1400px; }
@media (max-width: 600px) {
.cf-mengen-raster { max-height: 190px; }
}
/* ===== Zwei gezielte Ergänzungen zum Theme-Menü =====
Das Menü kommt ansonsten unverändert von Ecomall. */
/* 1. Das Theme gibt dem Burger-Feld 300 Pixel Mindestbreite. Ohne die
Kategorieauswahl im Suchfeld wirkt das überdehnt. */
header.ts-header .vertical-menu-heading {
min-width: 0;
padding-right: 18px;
margin-right: 18px;
}
/* 2. Die Aufklappfläche war so hoch wie der Produktblock rechts, während die
Spalten links kurz sind - dadurch viel Leerraum unten. */
.cf-mega.cf-mega-mit-produkten {
align-items: stretch;
}
.cf-mega-spalten {
align-content: start;
}
/* Die inneren Bereiche der Kopfzeile sind durchsichtig, damit der Verlauf
darunter sichtbar bleibt. Das Theme färbt sie sonst einzeln ein und deckt
ihn ab. (Diese Regel war beim Aufräumen des Menüs versehentlich mit
entfernt worden.) */
header.ts-header .header-template,
header.ts-header .header-top,
header.ts-header .header-middle,
header.ts-header .header-bottom,
header.ts-header .header-sticky {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.10) !important;
}
/* ===== Eintrag 34b: Startseite ohne Blockhintergründe =====
Alle Abschnitte der Startseite sind durchsichtig (Verlauf und Qualm
scheinen durch). Als Trenner zwischen zwei Abschnitten eine feine helle
Linie mit weichem Schein statt der bisherigen Wellen/Wolken/Dreiecke. */
.elementor-101 > :is(.elementor-top-section, .e-con) + :is(.elementor-top-section, .e-con) {
position: relative;
}
.elementor-101 > :is(.elementor-top-section, .e-con) + :is(.elementor-top-section, .e-con)::before {
content: "";
position: absolute;
left: 6%;
right: 6%;
top: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 18%,
rgba(255, 255, 255, 0.22) 82%, transparent);
box-shadow: 0 0 22px 3px rgba(238, 251, 36, 0.16);
}
/* „Hot"-Aufkleber des Themes (Top-Produkte) nicht anzeigen */
.product-label .featured {
display: none !important;
}
/* ===== Eintrag 34b: Menüzeile als Glasleiste =====
Steht bewusst NACH der Pflichtregel, die alle inneren Kopfzeilen-Bereiche
durchsichtig macht (die bleibt unangetastet): nur die Menüzeile bekommt
eine leicht aufgehellte Fläche mit Lichtkante oben, grüner Kante unten und
Schatten auf den Inhalt. Kein Weichzeichner – der kostet beim Scrollen GPU. */
body header.ts-header .header-bottom {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
border-bottom: 1px solid rgba(127, 184, 87, 0.30) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
header.ts-header {
box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.75);
position: relative;
z-index: 100; /* Eintrag 39: vorher 5, Megamenü lag hinter dem Kategorietext */
}
/* ===== Eintrag 34b: Produktraster in Elementor-Widgets =====
Das Theme baut sein Produktraster aus der Variablen --ts-columns. Das
Elementor-Widget „WooCommerce-Produkte" setzt sie nicht, deshalb galt
überall die Vorgabe (5 Spalten) – Karten in 3er-Widgets waren zu klein,
auf dem Handy standen fünf Karten nebeneinander. Spaltenzahl kommt jetzt
aus den Widget-Klassen; auf dem Handy immer 2 wie auf den Kategorieseiten. */
.elementor-widget-woocommerce-products .woocommerce.columns-1 { --ts-columns: 1; }
.elementor-widget-woocommerce-products .woocommerce.columns-2 { --ts-columns: 2; }
.elementor-widget-woocommerce-products .woocommerce.columns-3 { --ts-columns: 3; }
.elementor-widget-woocommerce-products .woocommerce.columns-4 { --ts-columns: 4; }
.elementor-widget-woocommerce-products .woocommerce.columns-5 { --ts-columns: 5; }
.elementor-widget-woocommerce-products .woocommerce.columns-6 { --ts-columns: 6; }
@media (max-width: 1024px) {
.elementor-widget-woocommerce-products.elementor-grid-tablet-2 .woocommerce { --ts-columns: 2; }
.elementor-widget-woocommerce-products.elementor-grid-tablet-3 .woocommerce { --ts-columns: 3; }
.elementor-widget-woocommerce-products.elementor-grid-tablet-4 .woocommerce { --ts-columns: 4; }
}
@media (max-width: 767px) {
.elementor-widget-woocommerce-products .woocommerce { --ts-columns: 2; --ts-h-gap: 10px; }
}
/* ===== Eintrag 35b: Fußzeile im Ecomall-Aufbau =====
Baustein „Fußzeile Ecomall" (ts_footer_block, reines HTML). Vier Spalten:
Marke mit Siegeln, Service, Rechtliches, Newsletter; darunter die
Copyright-Zeile. Die Fläche ist halbdurchsichtig, damit Verlauf und Qualm
bis unten durchlaufen; oben die gleiche Lichtkante wie zwischen den
Startseiten-Abschnitten. */
#colophon.footer-container {
background: linear-gradient(180deg, rgba(8, 11, 5, 0.35), rgba(8, 11, 5, 0.85)) !important;
border-top: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 -18px 40px -30px rgba(238, 251, 36, 0.25);
margin-top: 60px;
}
.cf-footer {
max-width: 1322px;
margin: 0 auto;
padding: 56px 24px 0;
color: var(--cf-schrift-matt);
font-size: 14px;
}
.cf-footer-main {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
gap: 40px;
padding-bottom: 40px;
}
.cf-footer h5 {
margin: 0 0 14px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cf-gelb);
}
.footer-container .cf-footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-container .cf-footer ul li {
list-style: none;
padding: 5px 0;
line-height: 1.4;
}
.footer-container .cf-footer ul li::before {
content: none;
}
.footer-container .cf-footer a {
color: var(--cf-schrift);
text-decoration: none;
transition: color 0.15s ease;
}
.footer-container .cf-footer a:hover {
color: var(--cf-gelb);
}
.cf-footer-logo img {
display: block;
width: 200px;
max-width: 100%;
height: auto;
margin-bottom: 22px;
}
.cf-footer-siegel {
display: flex;
align-items: center;
gap: 18px;
}
.cf-footer-siegel img {
height: 64px;
width: auto;
border-radius: 8px;
background: rgba(255, 255, 255, 0.06);
padding: 6px;
}
.cf-footer-newsletter p {
margin: 0 0 14px;
color: var(--cf-schrift-matt);
}
.cf-footer-newsletter .elementor-field-group {
padding: 0;
width: 100% !important;
flex-basis: 100% !important;
margin-bottom: 10px;
}
.cf-footer-newsletter .elementor-field-type-submit .elementor-button {
width: 100%;
}
.cf-footer-newsletter .elementor-form .elementor-field-group .elementor-field-textual {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
color: var(--cf-schrift);
border-radius: 999px;
padding: 12px 18px;
}
.cf-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.10);
padding: 18px 0 22px;
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
justify-content: space-between;
font-size: 13px;
color: var(--cf-schrift-matt);
}
@media (max-width: 1024px) {
.cf-footer-main {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.cf-footer {
padding-top: 40px;
}
.cf-footer-main {
grid-template-columns: 1fr;
gap: 28px;
}
.cf-footer-bottom {
justify-content: center;
text-align: center;
}
}
/* ===== Eintrag 34b (Nachtrag): Abstände und Strukturformel =====
Die Startseiten-Abschnitte hatten für Tablet 0 Innenabstand oben/unten –
ohne Hintergründe klebte der Knopf eines Abschnitts an der Überschrift des
nächsten. Ab Tablet abwärts fester Abstand. (cf-abschnitt-tablet) */
@media (max-width: 1024px) {
.elementor-101 > .elementor-top-section {
padding-top: 44px !important;
padding-bottom: 44px !important;
}
}
/* Spalte mit der THCa-Strukturformel („Was ist THCa?"): die SVG war schwarz
auf dunklem Grund und ohne Größenangabe. Jetzt zentriert, eingepasst und
per Filter grün eingefärbt – wirkt wie eine Linienzeichnung im Stil der
Periodensystem-Kästen. */
.elementor-101 .elementor-element-4cee6cb {
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
min-height: 240px;
filter: invert(1) sepia(1) hue-rotate(50deg) saturate(3) brightness(0.85);
opacity: 0.6;
}
/* ===== Eintrag 36: Produktkarten – Bildquadrat, Preiszeile, Ausverkauft =====
1. Bildfläche immer quadratisch (alte Hochformat-Bilder werden eingepasst,
nicht beschnitten), dadurch beginnt der Textblock in jeder Karte auf
gleicher Höhe.
2. Der Textblock hängt am unteren Kartenrand (Karten einer Reihe sind
gleich hoch), Preise stehen damit in einer Reihe.
3. Preis etwas größer; „inkl. MwSt." und „zzgl. Versandkosten" als
zweizeiliger Block rechts daneben (HTML aus functions.php, Eintrag 36),
Germanizeds eigener Versand-Absatz ist verborgen.
4. Ausverkaufte Produkte: Bild zu 80 % entsättigt. */
.products .product .product-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.products .product .product-wrapper .thumbnail-wrapper figure {
aspect-ratio: 1 / 1;
overflow: hidden;
margin: 0;
}
.products .product .product-wrapper .thumbnail-wrapper figure img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.products .product .product-wrapper .meta-wrapper {
margin-top: auto;
}
.products .product.outofstock .thumbnail-wrapper img {
filter: grayscale(0.8);
opacity: 0.85;
}
.cf-preis-zeile {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 9px;
}
.cf-preis-zeile .amount {
white-space: nowrap;
}
.product-wrapper .price .cf-preis-zeile .woocommerce-Price-amount,
.product-wrapper .price .cf-preis-zeile .amount {
font-size: 19px;
font-weight: 700;
line-height: 1.15;
color: var(--cf-gelb);
}
.cf-preis-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
font-size: 10.5px;
line-height: 1.15;
font-weight: 400;
color: var(--cf-schrift-matt);
}
.cf-preis-info a {
color: inherit;
text-decoration: underline;
}
.product-wrapper .meta-wrapper > .wc-gzd-additional-info-loop.shipping-costs-info {
display: none !important;
}
.product-wrapper .price {
flex-wrap: wrap !important;
row-gap: 2px;
}
.product-wrapper .price .cf-grundpreis {
flex: 0 0 100%;
margin-top: 0;
}
/* ===== Eintrag 36: Startseite – Luft zwischen Text und Karten ===== */
.elementor-101 .elementor-widget-text-editor + .elementor-widget-woocommerce-products,
.elementor-101 .elementor-widget-heading + .elementor-widget-woocommerce-products {
margin-top: 26px;
}
.elementor-101 .elementor-widget-woocommerce-products + .elementor-widget-button {
margin-top: 36px;
}
/* Nach-oben-Knopf: siehe Eintrag 39 (Elementkästchen) */
/* ===== Eintrag 36: Logo etwas größer ===== */
header.ts-header .logo img {
max-height: 62px !important;
}
/* ===== Eintrag 36: Suchschlitz – ein Rahmen statt zwei =====
Der Suchen-Knopf hatte zusätzlich zum Rahmen des Feldes einen eigenen
(Regel weiter oben, alle vier Seiten). Jetzt nur der Feldrahmen und eine
Trennlinie links vom Knopf. */
header.ts-header .ts-search-by-category .search-button {
border: 0 !important;
border-left: 1px solid rgba(127, 184, 87, 0.45) !important;
box-shadow: none !important;
}
/* ===== Eintrag 36: „Mein Account" – Kopf mit Joint (Strichzeichnung) ===== */
.ts-tiny-account-wrapper .account-control > a:before {
content: "" !important;
display: inline-block;
width: 28px;
height: 28px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2028%2028%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212.5%22%20cy=%229%22%20r=%225.6%22/%3E%3Cpath%20d=%22M3.5%2025c0-5%204-8.2%209-8.2s9%203.2%209%208.2%22/%3E%3Cpath%20d=%22M16.3%2011.4l7.2%203.1%22/%3E%3Cpath%20d=%22M23.5%2014.5l1.6.7%22%20stroke-width=%222.6%22/%3E%3Cpath%20d=%22M25.6%2012.6c.7-1%20.1-1.9.8-2.9M27%2011.5c.5-.8.2-1.5.6-2.2%22%20stroke-width=%221.2%22%20opacity=%22.85%22/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2028%2028%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.7%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212.5%22%20cy=%229%22%20r=%225.6%22/%3E%3Cpath%20d=%22M3.5%2025c0-5%204-8.2%209-8.2s9%203.2%209%208.2%22/%3E%3Cpath%20d=%22M16.3%2011.4l7.2%203.1%22/%3E%3Cpath%20d=%22M23.5%2014.5l1.6.7%22%20stroke-width=%222.6%22/%3E%3Cpath%20d=%22M25.6%2012.6c.7-1%20.1-1.9.8-2.9M27%2011.5c.5-.8.2-1.5.6-2.2%22%20stroke-width=%221.2%22%20opacity=%22.85%22/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ===== Eintrag 36: Handy – Suchfeld immer sichtbar =====
Statt des kleinen Aufklapp-Symbols oben rechts steht das Suchfeld auf dem
Handy als eigene Zeile unter dem Logo. */
@media (max-width: 767px) {
header.ts-header .search-button.search-icon {
display: none !important;
}
header.ts-header .header-middle .container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
header.ts-header .header-middle .header-center {
display: block !important;
flex: 0 0 100%;
width: 100%;
order: 10;
padding: 0 0 10px;
}
header.ts-header .header-middle .header-center .ts-search-by-category {
display: block !important;
position: static !important;
width: 100% !important;
max-width: none !important;
}
}
/* ===== Eintrag 38: Hintergrund-Variante „Chemie" (Vorschau ?hintergrund=chemie) =====
Zweite Fassung des Seitenhintergrunds: zwischen Verlauf und Qualm liegt
eine leicht unscharfe Ebene mit Summenformeln (C₂₁H₃₀O₂ = THC,
C₂₂H₃₀O₄ = THCa), Benzolringen und zwei Elementkästen (Cf 420, Th 90),
Deckkraft 9 %, Serifenschrift wie in den Breaking-Bad-Vorlagen. */
body.cf-hintergrund-chemie::before {
background:
url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%201000%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%20%3Cdefs%3E%20%3Cfilter%20id=%22q%22%20x=%220%22%20y=%220%22%20width=%221%22%20height=%221%22%20color-interpolation-filters=%22sRGB%22%3E%20%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.0026%200.0040%22%20numOctaves=%225%22%20seed=%2211%22/%3E%20%3CfeColorMatrix%20values=%220%200%200%200%200.93%200%200%200%200%200.98%200%200%200%200%200.18%200%200%200%203.0%20-1.3%22/%3E%20%3CfeGaussianBlur%20stdDeviation=%221.5%22/%3E%20%3C/filter%3E%20%3CradialGradient%20id=%22l%22%20cx=%220.18%22%20cy=%220.95%22%20r=%220.75%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22%20stop-opacity=%220.9%22/%3E%20%3Cstop%20offset=%220.45%22%20stop-color=%22%23fff%22%20stop-opacity=%220.35%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23fff%22%20stop-opacity=%220%22/%3E%20%3C/radialGradient%3E%20%3CradialGradient%20id=%22r%22%20cx=%220.92%22%20cy=%220.42%22%20r=%220.55%22%3E%20%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22%20stop-opacity=%220.55%22/%3E%20%3Cstop%20offset=%221%22%20stop-color=%22%23fff%22%20stop-opacity=%220%22/%3E%20%3C/radialGradient%3E%20%3Cmask%20id=%22m%22%3E%20%3Crect%20width=%221000%22%20height=%221000%22%20fill=%22url(%23l)%22/%3E%20%3Crect%20width=%221000%22%20height=%221000%22%20fill=%22url(%23r)%22/%3E%20%3C/mask%3E%20%3C/defs%3E%20%3Crect%20width=%221000%22%20height=%221000%22%20filter=%22url(%23q)%22%20mask=%22url(%23m)%22%20opacity=%220.62%22/%3E%20%3C/svg%3E") center / cover no-repeat,
url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201000%201000%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%3Cdefs%3E%3Cfilter%20id=%22w%22%20x=%22-5%25%22%20y=%22-5%25%22%20width=%22110%25%22%20height=%22110%25%22%3E%3CfeGaussianBlur%20stdDeviation=%221.1%22/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter=%22url(%23w)%22%20fill=%22%23eefb24%22%20font-family=%22Georgia,%20Times%20New%20Roman,%20serif%22%20opacity=%220.09%22%3E%3Ctext%20x=%22719%22%20y=%22860%22%20font-size=%2230%22%20transform=%22rotate(-4.1%20719%20860)%22%20opacity=%220.41%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E30%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%2260%22%20y=%22594%22%20font-size=%2230%22%20transform=%22rotate(-0.3%2060%20594)%22%20opacity=%220.77%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E26%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22589%22%20y=%22399%22%20font-size=%2236%22%20transform=%22rotate(-4.2%20589%20399)%22%20opacity=%220.93%22%3ETHCa%3C/text%3E%3Ctext%20x=%22308%22%20y=%22907%22%20font-size=%2226%22%20transform=%22rotate(3.3%20308%20907)%22%20opacity=%220.99%22%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E15%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22218%22%20y=%22553%22%20font-size=%2256%22%20transform=%22rotate(-7.2%20218%20553)%22%20opacity=%220.67%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22654%22%20y=%22875%22%20font-size=%2222%22%20transform=%22rotate(0.3%20654%20875)%22%20opacity=%220.79%22%3EN%3C/text%3E%3Ctext%20x=%22953%22%20y=%22942%22%20font-size=%2244%22%20transform=%22rotate(-5.2%20953%20942)%22%20opacity=%220.45%22%3EHHC%3C/text%3E%3Ctext%20x=%22570%22%20y=%2268%22%20font-size=%2272%22%20transform=%22rotate(-4.1%20570%2068)%22%20opacity=%220.43%22%3ETHCa%3C/text%3E%3Ctext%20x=%2247%22%20y=%22759%22%20font-size=%2226%22%20transform=%22rotate(7.3%2047%20759)%22%20opacity=%220.69%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E30%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22707%22%20y=%22538%22%20font-size=%2256%22%20transform=%22rotate(-5.3%20707%20538)%22%20opacity=%220.63%22%3EN%3C/text%3E%3Ctext%20x=%2277%22%20y=%22702%22%20font-size=%2244%22%20transform=%22rotate(-0.9%2077%20702)%22%20opacity=%220.47%22%3ETHCa%3C/text%3E%3Ctext%20x=%22509%22%20y=%22273%22%20font-size=%2222%22%20transform=%22rotate(6.6%20509%20273)%22%20opacity=%220.49%22%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22547%22%20y=%22599%22%20font-size=%2272%22%20transform=%22rotate(3.8%20547%20599)%22%20opacity=%220.54%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E10%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22896%22%20y=%22211%22%20font-size=%2256%22%20transform=%22rotate(8.4%20896%20211)%22%20opacity=%220.64%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E30%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22235%22%20y=%2299%22%20font-size=%2230%22%20transform=%22rotate(8.0%20235%2099)%22%20opacity=%220.49%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3E%3C/text%3E%3Ctext%20x=%2274%22%20y=%22331%22%20font-size=%2226%22%20transform=%22rotate(6.2%2074%20331)%22%20opacity=%220.45%22%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E15%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22861%22%20y=%22965%22%20font-size=%2256%22%20transform=%22rotate(-2.6%20861%20965)%22%20opacity=%220.90%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E22%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E30%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E4%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22619%22%20y=%22470%22%20font-size=%2236%22%20transform=%22rotate(4.9%20619%20470)%22%20opacity=%220.48%22%3E%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E420%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22102%22%20y=%22823%22%20font-size=%2244%22%20transform=%22rotate(-4.7%20102%20823)%22%20opacity=%220.75%22%3E%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E314%3C/tspan%3E.%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E46%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22318%22%20y=%22285%22%20font-size=%2222%22%20transform=%22rotate(3.8%20318%20285)%22%20opacity=%220.95%22%3ETHCa%3C/text%3E%3Ctext%20x=%22853%22%20y=%22502%22%20font-size=%2226%22%20transform=%22rotate(7.5%20853%20502)%22%20opacity=%220.52%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E32%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22387%22%20y=%22397%22%20font-size=%2256%22%20transform=%22rotate(-3.5%20387%20397)%22%20opacity=%220.76%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E26%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22166%22%20y=%22611%22%20font-size=%2236%22%20transform=%22rotate(3.6%20166%20611)%22%20opacity=%220.50%22%3ETHCa%3C/text%3E%3Ctext%20x=%2269%22%20y=%22560%22%20font-size=%2272%22%20transform=%22rotate(-0.1%2069%20560)%22%20opacity=%220.43%22%3E%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E420%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22154%22%20y=%22559%22%20font-size=%2236%22%20transform=%22rotate(2.6%20154%20559)%22%20opacity=%220.56%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E32%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22906%22%20y=%22322%22%20font-size=%2230%22%20transform=%22rotate(-4.0%20906%20322)%22%20opacity=%220.83%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E26%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22330%22%20y=%22482%22%20font-size=%2256%22%20transform=%22rotate(8.0%20330%20482)%22%20opacity=%220.35%22%3EC%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E21%3C/tspan%3EH%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E30%3C/tspan%3EO%3Ctspan%20baseline-shift=%22sub%22%20font-size=%2260%25%22%3E2%3C/tspan%3E%3C/text%3E%3Ctext%20x=%22174%22%20y=%22180%22%20font-size=%2222%22%20transform=%22rotate(3.6%20174%20180)%22%20opacity=%220.46%22%3EHHC%3C/text%3E%3Ctext%20x=%22765%22%20y=%22324%22%20font-size=%2230%22%20transform=%22rotate(0.8%20765%20324)%22%20opacity=%220.98%22%3ETHCa%3C/text%3E%3Ctext%20x=%22537%22%20y=%22623%22%20font-size=%2222%22%20transform=%22rotate(-7.1%20537%20623)%22%20opacity=%220.79%22%3ECBD%3C/text%3E%3Cpolygon%20points=%22698.4,265.2%20639.5,276.8%20600.1,231.5%20619.6,174.8%20678.5,163.2%20717.9,208.5%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.6%22%20opacity=%220.47%22/%3E%3Ccircle%20cx=%22659%22%20cy=%22220%22%20r=%2237.2%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.2%22%20opacity=%220.5%22/%3E%3Cpolygon%20points=%22685.3,229.1%20665.3,245.6%20640.9,236.5%20636.7,210.9%20656.7,194.4%20681.1,203.5%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.6%22%20opacity=%220.79%22/%3E%3Ccircle%20cx=%22661%22%20cy=%22220%22%20r=%2216.1%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.2%22%20opacity=%220.5%22/%3E%3Cpolygon%20points=%22355.9,814.7%20331.5,823.6%20311.6,806.9%20316.1,781.3%20340.5,772.4%20360.4,789.1%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.6%22%20opacity=%220.58%22/%3E%3Ccircle%20cx=%22336%22%20cy=%22798%22%20r=%2216.1%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.2%22%20opacity=%220.5%22/%3E%3Cpolygon%20points=%22246.0,222.8%20223.1,235.0%20201.0,221.2%20202.0,195.2%20224.9,183.0%20247.0,196.8%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.6%22%20opacity=%220.67%22/%3E%3Ccircle%20cx=%22224%22%20cy=%22209%22%20r=%2216.1%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.2%22%20opacity=%220.5%22/%3E%3Cpolygon%20points=%22619.8,206.9%20586.1,211.5%20565.3,184.6%20578.2,153.1%20611.9,148.5%20632.7,175.4%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.6%22%20opacity=%220.60%22/%3E%3Ccircle%20cx=%22599%22%20cy=%22180%22%20r=%2221.1%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.2%22%20opacity=%220.5%22/%3E%3Cpolygon%20points=%22895.1,721.7%20872.2,734.0%20850.1,720.3%20850.9,694.3%20873.8,682.0%20895.9,695.7%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.6%22%20opacity=%220.40%22/%3E%3Ccircle%20cx=%22873%22%20cy=%22708%22%20r=%2216.1%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%221.2%22%20opacity=%220.5%22/%3E%3Cg%20opacity=%220.7%22%3E%3Crect%20x=%22120%22%20y=%22150%22%20width=%2292%22%20height=%2292%22%20rx=%224%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%222%22/%3E%3Ctext%20x=%22128%22%20y=%22168%22%20font-size=%2212%22%3E149.24%3C/text%3E%3Ctext%20x=%22128%22%20y=%22234%22%20font-size=%2212%22%3E420%3C/text%3E%3Ctext%20x=%22142%22%20y=%22216%22%20font-size=%2244%22%20font-weight=%22bold%22%3ECf%3C/text%3E%3C/g%3E%3Cg%20opacity=%220.7%22%3E%3Crect%20x=%22820%22%20y=%22760%22%20width=%2292%22%20height=%2292%22%20rx=%224%22%20fill=%22none%22%20stroke=%22%23eefb24%22%20stroke-width=%222%22/%3E%3Ctext%20x=%22828%22%20y=%22778%22%20font-size=%2212%22%3E232.04%3C/text%3E%3Ctext%20x=%22828%22%20y=%22844%22%20font-size=%2212%22%3E90%3C/text%3E%3Ctext%20x=%22842%22%20y=%22826%22%20font-size=%2244%22%20font-weight=%22bold%22%3ETh%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
linear-gradient(115deg,
var(--cf-kastengruen) 0%,
#123a1e 30%,
var(--cf-oliv-tief) 68%,
var(--cf-grund) 100%);
}
/* ===== Eintrag 39: Karten verschlankt, Abstände, Nach-oben als Elementkästchen =====
Aus den Karten raus: Lieferzeit, Grundpreis, „Produkt enthält". Preis und der
zweizeilige Steuer/Versand-Block sind exakt gleich hoch (22 px). Titel hat
feste zwei Zeilen, damit der Textblock in jeder Karte gleich hoch ist und kein
Leerraum zwischen Bild und Name entsteht. */
.products .product .product-wrapper .meta-wrapper .delivery-time-info,
.products .product .product-wrapper .meta-wrapper .product-units,
.products .product .product-wrapper .price .cf-grundpreis {
display: none !important;
}
.products .product .product-wrapper .meta-wrapper {
padding-top: 8px !important;
gap: 4px;
}
.products .product .product-wrapper .meta-wrapper .product-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.3;
min-height: 2.6em;
margin: 0 !important;
}
.product-wrapper .price .cf-preis-zeile .woocommerce-Price-amount,
.product-wrapper .price .cf-preis-zeile .amount {
font-size: 22px;
line-height: 22px;
height: 22px;
display: inline-block;
}
.cf-preis-info {
height: 22px;
gap: 0;
font-size: 10px;
line-height: 11px;
justify-content: space-between;
}
/* Kopfzeile muss über dem Inhalt liegen (Megamenü lag hinter dem Kategorietext) */
header.ts-header {
z-index: 100;
}
/* Kategorieseiten: halb so viel Luft zwischen Kategorietext und Produkten */
.cf-archiv-text {
margin-bottom: 8px;
}
.site-content .before-loop-wrapper {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.site-content .ts-active-filters:empty {
display: none;
}
/* Nach-oben-Knopf: Kästchen wie die Knöpfe (Eintrag 41: Rand und Pfeil in Akzentgrün, ohne „420“) */
#to-top,
#to-top a {
width: 50px !important;
height: 50px !important;
}
#to-top a {
border-radius: 7px !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)) #0d1108 !important;
border: 1px solid rgba(127, 184, 87, 0.55) !important;
box-shadow: 0 10px 26px -12px rgba(127, 184, 87, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
overflow: hidden;
transition: background-color 0.15s ease, transform 0.15s ease;
}
#to-top a:before {
content: "" !important;
position: absolute;
inset: 0;
background: var(--cf-gelb);
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020V7%22/%3E%3Cpath%20d=%22M5.5%2013.5%2012%207l6.5%206.5%22/%3E%3C/svg%3E") center / 24px 24px no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2020V7%22/%3E%3Cpath%20d=%22M5.5%2013.5%2012%207l6.5%206.5%22/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
#to-top a:after {
content: none !important;
}
#to-top a:hover {
background: var(--cf-gelb) !important;
border-color: var(--cf-gelb) !important;
transform: translateY(-2px);
}
#to-top a:hover:before {
background: #0d1108;
}
/* ===== Eintrag 41: Preiszeile auf Desktop nie umbrechen =====
In Elementor-Karten mit „AB"-Preis rutschte der Steuer/Versand-Block unter
den Preis. Ab 768 px bleibt alles in einer Zeile wie auf den Kategorieseiten,
nur auf dem Handy darf umgebrochen werden. */
@media (min-width: 768px) {
.cf-preis-zeile {
flex-wrap: nowrap;
}
.cf-preis-info {
min-width: 0;
overflow: hidden;
}
}
/* Eintrag 41: Suchfeld der WordPress-Admin-Leiste (nur für eingeloggte
Admins sichtbar, Kunden sehen die Leiste nie) ausblenden */
#wpadminbar #wp-admin-bar-search {
display: none !important;
}
/* =====================================================================
Eintrag 42: CI-Schwarz, Menü, Suchschlitz, Preiszeile, Archivseiten
===================================================================== */
/* ----- CI-Schwarz -----
Das Aufklappmenü und der Suchschlitz waren praktisch schwarz (#080b05 bzw.
#23282a/#1b1f1d) und dadurch uneinheitlich. Beide nutzen jetzt dieselbe
Hausfarbe: ein Schwarz mit einem Hauch Olivgrün, minimal heller als vorher.
Doppeltes :root, weil die Theme-Einstellungen (uploads/ecomallchild.css)
nach dieser Datei geladen werden. */
:root:root {
--cf-ci-schwarz: #12170f; /* CI-Schwarz */
--cf-menue-flaeche: rgba(18, 23, 15, 0.97); /* CI-Schwarz mit 97 % Deckung */
--ts-dropdown-bg: #12170f;
}
/* ----- Aufklappmenü: CI-Schwarz, leicht durchscheinend ----- */
header.ts-header nav > ul.menu li ul.sub-menu:after,
header.ts-header nav.vertical-menu > ul.menu li ul.sub-menu:after {
background-color: var(--cf-menue-flaeche);
box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.7);
}
/* ----- Der Menüpunkt, auf dem die Maus steht, bekommt die Menüfarbe -----
Die Fläche reicht über die ganze Höhe der Menüzeile und 16 px darunter -
genau bis dorthin, wo die Aufklappfläche beginnt. Dadurch sieht es aus,
als flösse das Menü aus dem Menüpunkt heraus. Die Schrift bleibt grün
(kommt aus den Theme-Einstellungen). */
body header.ts-header .header-bottom nav:not(.vertical-menu) > ul.menu > li {
position: relative;
}
body header.ts-header .header-bottom nav:not(.vertical-menu) > ul.menu > li.parent:before {
content: "";
position: absolute;
left: -14px;
right: -14px;
top: -11px;
bottom: -16px;
z-index: 0;
border-radius: 8px 8px 0 0;
background: var(--cf-menue-flaeche);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
body header.ts-header .header-bottom nav:not(.vertical-menu) > ul.menu > li.parent:hover:before {
opacity: 1;
}
body header.ts-header .header-bottom nav:not(.vertical-menu) > ul.menu > li.parent > a,
body header.ts-header .header-bottom nav:not(.vertical-menu) > ul.menu > li.parent > .ts-menu-drop-icon {
position: relative;
z-index: 1;
}
/* ----- Rechte Spalte "Beliebt": ganz grün, Wort größer und weiter oben ----- */
.cf-mega-produkte {
padding: 13px 22px 18px;
background: linear-gradient(180deg, rgba(10, 80, 60, 0.92), rgba(10, 80, 60, 0.66));
border-left: 1px solid rgba(127, 184, 87, 0.28);
}
.cf-mega-produkte-titel {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: rgba(255, 255, 255, 0.97);
margin-bottom: 12px;
}
.cf-karte {
background: rgba(0, 0, 0, 0.26);
}
.cf-karte:hover {
background: rgba(0, 0, 0, 0.42);
}
/* ----- Suchschlitz in CI-Schwarz ----- */
header.ts-header form,
header.ts-header .search-wrapper,
header.ts-header .ts-search-by-category,
header.ts-header form input[type="text"],
header.ts-header form input[type="search"],
header.ts-header form .search-field,
header.ts-header .ts-search-by-category input,
header.ts-header .ts-search-by-category .search-field {
background: var(--cf-ci-schwarz) !important;
}
header.ts-header .ts-search-by-category .search-field input[type="text"] {
background: transparent !important;
}
/* ----- Suchen-Knopf: etwas körperlich -----
Ein flacher Lichtverlauf von der Mitte nach außen, dazu eine helle Kante
oben und ein dunkler Fuß - das reicht, damit er wie ein Knopf wirkt. */
header.ts-header .ts-search-by-category .search-button {
background: radial-gradient(130% 150% at 50% 42%,
#1e2716 0%,
#161c11 55%,
#0a0d07 100%) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.55),
inset 1px 0 0 rgba(255, 255, 255, 0.04),
0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
header.ts-header .ts-search-by-category .search-button:hover {
background: radial-gradient(130% 150% at 50% 42%,
#27321c 0%,
#1c2415 55%,
#0d1108 100%) !important;
}
header.ts-header .ts-search-by-category .search-button input[type="submit"]:active {
transform: translateY(1px);
}
/* ----- Preiszeile: "AB" klein und auf der Linie des Preises -----
"AB" war so groß wie der Betrag und stand weit davon weg; auf schmalen
Karten schob es den Steuer-/Versandblock über den Kartenrand hinaus. */
.cf-preis-betrag {
display: inline-flex;
align-items: baseline;
gap: 3px;
flex: 0 0 auto;
white-space: nowrap;
}
.cf-preis-ab {
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
color: var(--cf-schrift-matt);
}
.cf-preis-zeile {
gap: 4px 7px;
max-width: 100%;
}
/* ----- Warenkorb-Symbol saß über seinem Kreis -----
In den Elementor-Produktwidgets steckt der Knopf in einem Zwischen-DIV ohne
Höhe. Das Symbol richtet sich an der Mitte dieses Kastens aus - bei Höhe 0
also an der Oberkante, oberhalb des Kreises. Der Knopf füllt den Kreis jetzt
ganz aus, dadurch sitzt das Symbol wieder mittig. */
.product-group-button > div.loop-add-to-cart .woocommerce-loop-product__buttons {
display: block;
width: 100%;
height: 100%;
}
.product-group-button > div.loop-add-to-cart .woocommerce-loop-product__buttons > a {
display: block;
width: 100%;
height: 100%;
min-height: 0;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 50% !important;
box-shadow: none !important;
line-height: 0;
font-size: 0;
}
/* ----- Produktkarten leicht durchscheinend (97 %) -----
Nur die Kartenfläche, nicht die Produktbilder: statt Deckkraft bekommt der
Kartengrund eine Farbe mit 97 % Deckung. */
.products .product .product-wrapper,
.woocommerce .products .product .product-wrapper {
background-color: rgba(18, 48, 35, 0.97);
}
/* ----- Archivseiten: Kategorietext nur noch einmal, in der größeren Schrift -----
Der WooCommerce-Absatz ist abgemeldet (functions.php). Unser Text übernimmt
dessen Größe (15 px statt 14 px). */
.cf-archiv-text {
font-size: 15px;
line-height: 1.6;
}
.term-description {
display: none;
}
/* ----- Nachladen: keine englischen Einblendungen, dafür eine Ladeanzeige -----
"Showing 12 of 72 results" und "Showing all" fallen weg. Solange das Skript
selbst nachlädt (unter 100 Produkten), ist der Knopf unsichtbar und zeigt nur
während des Ladens einen Ring. Ab 100 Produkten steht dort ein richtiger
Knopf mit der Aufschrift "Weitere Produkte laden". */
.ts-shop-result-count,
.woocommerce-result-count {
display: none !important;
}
.ts-shop-load-more.cf-auto .load-more {
visibility: hidden;
min-width: 0 !important;
padding: 14px !important;
background: none !important;
border-color: transparent !important;
}
.ts-shop-load-more.cf-auto .load-more.loading {
visibility: visible;
color: transparent !important;
}
.ts-shop-load-more.cf-auto .load-more.loading:before,
.ts-shop-load-more.cf-auto .load-more.loading:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
border-radius: 50%;
border: 2px solid rgba(127, 184, 87, 0.25);
border-top-color: var(--cf-gelb);
background: none !important;
opacity: 1;
visibility: visible;
animation: cf-dreht 0.7s linear infinite;
}
.ts-shop-load-more.cf-auto .load-more.loading:after {
display: none;
}
@keyframes cf-dreht {
to { transform: rotate(360deg); }
}
/* =====================================================================
Eintrag 42b: Produktseite, Brotkrumen, ähnliche Produkte, Newsletter
===================================================================== */
/* ----- Die grüne Spalte füllt die Aufklappfläche ganz aus -----
Die Aufklappfläche hat oben 70 px und unten 60 px Innenabstand, die sichtbare
Fläche beginnt 11 px unter dem Menüpunkt. Die Spalte greift mit negativen
Außenabständen darüber hinaus und holt sich den Abstand als Innenabstand
zurück - der Inhalt steht also unverändert, nur die Farbe reicht bis an die
Kanten. */
/* ÜBERHOLT durch Eintrag 43 - die Aufklappfläche hat oben und unten keinen
Leerraum mehr, negative Außenabstände sind dadurch überflüssig. */
/* ----- Produktseite: Preisangaben nur einmal -----
Über dem Preis steht bereits "inkl. MwSt. zzgl. Versandkosten"; der Anhang
direkt am Betrag ist damit doppelt. Der Grundpreis kommt aus den Kacheln der
Mengenauswahl (siehe functions.php). */
.single-product .summary .price .woocommerce-price-suffix {
display: none;
}
/* ----- Brotkrumen abgeschaltet ----- */
.breadcrumb-title-wrapper {
display: none !important;
}
/* ----- Ähnliche Produkte: festes Raster statt Schieberegler -----
Der Bereich heißt jetzt ".cf-aehnliche" (eigene Vorlage), damit das
Theme-Skript ihn nicht mehr zum Schieberegler macht. Die alten
".related"-Regeln bleiben als Netz stehen. */
.cf-aehnliche > .products,
.cf-aehnliche > ul.products,
.related.products > .products,
.up-sells > .products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 16px;
transform: none !important;
width: auto !important;
}
.cf-aehnliche > .products > .product,
.related.products > .products > .product,
.up-sells > .products > .product {
width: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
}
.cf-aehnliche > h2 {
font-size: 22px;
margin: 26px 0 16px;
color: rgba(255, 255, 255, 0.97);
}
@media (max-width: 1024px) {
.cf-aehnliche > .products,
.cf-aehnliche > ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
.cf-aehnliche > .products,
.cf-aehnliche > ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px; }
.cf-aehnliche > h2 { font-size: 18px; }
}
/* ----- Newsletter-Feld in der Fußzeile wie der Suchschlitz oben ----- */
.cf-footer-newsletter .elementor-field-textual,
.cf-footer-newsletter input[type="email"] {
background: var(--cf-ci-schwarz) !important;
color: #e9edec !important;
border: 1px solid var(--cf-gelb) !important;
border-radius: 6px !important;
box-shadow: none !important;
font-size: 15px;
padding: 12px 18px !important;
height: auto !important;
}
.cf-footer-newsletter .elementor-field-textual::placeholder,
.cf-footer-newsletter input[type="email"]::placeholder {
color: #8f9a96 !important;
opacity: 1 !important;
}
/* ----- Archivkopf: Überschrift oben, Text darunter -----
Das Theme setzt ".before-loop-wrapper" als Flex-Zeile (dort stehen sonst
Trefferzahl und Sortierung nebeneinander). Überschrift und Kategorietext
bekommen deshalb die volle Breite, damit sie untereinander stehen. */
.site-content .before-loop-wrapper {
flex-wrap: wrap;
}
.cf-archiv-titel,
.cf-archiv-text {
flex: 0 0 100%;
width: 100%;
}
/* =====================================================================
Eintrag 43: Aufklappmenü ohne Leerraum, nach rechts geöffnet,
Produktspalte füllt sich nach Platz
===================================================================== */
/* ----- Kein Leerraum mehr oben und unten -----
Das Theme gibt der Aufklappfläche 70 px Innenabstand oben und 60 px unten
(beim Burger-Feld 36 px). Sichtbar wird sie aber erst 11 px unter dem
Menüpunkt - der Rest war leere Fläche. Jetzt endet der Innenabstand dort,
wo die sichtbare Fläche beginnt; die Abstände zum Inhalt setzen die beiden
Spalten selbst. */
header.ts-header nav:not(.vertical-menu) > ul.menu li.ts-megamenu > ul.sub-menu {
padding-top: 11px;
padding-bottom: 0;
}
header.ts-header .is-sticky nav:not(.vertical-menu) > ul.menu li.ts-megamenu > ul.sub-menu {
padding-top: 11px;
}
header.ts-header nav.vertical-menu > ul.menu li.ts-megamenu > ul.sub-menu {
padding-top: 0;
padding-bottom: 0;
}
.cf-mega-spalten {
padding: 18px 30px 22px;
}
.cf-mega.cf-mega-mit-produkten .cf-mega-produkte {
padding: 16px 22px 18px;
border-bottom-right-radius: 10px;
}
/* ----- Die Produktspalte bestimmt die Höhe nicht mehr mit -----
"height: 0" nimmt die Spalte aus der Höhenrechnung des Rasters (die linke
Seite gibt die Höhe vor), "min-height: 100 %" zieht sie dann auf genau diese
Höhe. Was nicht hineinpasst, wird abgeschnitten; die angeschnittene Karte
blendet cannafree-megamenue.js aus. */
.cf-mega.cf-mega-mit-produkten {
align-items: stretch;
}
.cf-mega.cf-mega-mit-produkten .cf-mega-produkte {
display: flex;
flex-direction: column;
height: 0;
min-height: 100%;
}
.cf-mega-karten {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
gap: 10px;
}
/* ----- Aufklappfläche öffnet nach rechts -----
Sie beginnt am linken Rand des Menüpunkts, also genau dort, wo auch die
dunkle Fläche unter dem Menüpunkt beginnt - dadurch gibt es keinen Versatz
mehr, in dem die grüne Spalte unter dem Menüpunkt durchscheinen könnte.
Reicht der Platz nach rechts nicht, schiebt das Skript sie zurück. */
header.ts-header .header-bottom nav:not(.vertical-menu) > ul.menu > li.ts-megamenu > ul.sub-menu {
left: -14px;
margin-left: 0 !important;
}
header.ts-header .header-bottom nav:not(.vertical-menu) > ul.menu li ul.sub-menu:after {
border-top-left-radius: 8px;
}
/* ----- Burger-Feld "Alle Kategorien": Spalte über die volle Höhe -----
Dort ist die Aufklappfläche so hoch wie die Kategorienliste daneben, der
Inhalt aber oft viel kürzer. Ohne diese Regel stünde die grüne Spalte als
kurzer Block in einer großen schwarzen Fläche. */
header.ts-header nav.vertical-menu > ul.menu li.ts-megamenu > ul.sub-menu > li,
header.ts-header nav.vertical-menu > ul.menu li.ts-megamenu .ts-megamenu-container,
header.ts-header nav.vertical-menu > ul.menu li.ts-megamenu .cf-mega {
height: 100%;
}
/* ----- Hinweisfähnchen an den Karten-Symbolen abheben -----
Die grüne Fläche steht sonst ohne Kante auf dem grünen Seitenhintergrund. */
.product-group-button .button-tooltip,
.product-group-button-meta .button-tooltip,
.ts-product-attribute .button-tooltip {
border: 1px solid rgba(13, 17, 8, 0.75);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
padding: 4px 8px;
}
/* ----- Suchschlitz: ein einziger, kräftiger grüner Rahmen -----
Vorher lagen zwei Rahmen übereinander: der helle Rahmen des Theme-Feldes
(wirkt auf dunklem Grund wie ein schwarzer Saum) und darin der grüne des
Eingabefeldes. Der äußere fällt weg, der grüne wird doppelt so dick und
bekommt einen Verlauf von hell oben nach dunkel unten - dadurch wirkt er
plastisch statt flach.
Der Verlauf steckt im Hintergrund: die innere Fläche liegt im Feld
(padding-box), der Verlauf darunter reicht bis in den Rahmen (border-box).
Der Rahmen selbst ist durchsichtig und zeigt den Verlauf. */
header.ts-header form,
header.ts-header .search-wrapper,
header.ts-header .ts-search-by-category {
border: 0 !important;
background: transparent !important;
}
header.ts-header .ts-search-by-category .search-field {
border: 2px solid transparent !important;
border-radius: 7px !important;
background:
linear-gradient(var(--cf-ci-schwarz), var(--cf-ci-schwarz)) padding-box,
linear-gradient(180deg, #b6e58c 0%, #7fb857 45%, #45702d 100%) border-box !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}
/* Trennlinie zum Suchen-Knopf in derselben Stärke und mit demselben Verlauf */
header.ts-header .ts-search-by-category .search-button {
border: 0 !important;
border-left: 2px solid transparent !important;
background:
radial-gradient(130% 150% at 50% 42%,
#1e2716 0%,
#161c11 55%,
#0a0d07 100%) padding-box,
linear-gradient(180deg, #b6e58c 0%, #7fb857 45%, #45702d 100%) border-box !important;
}
header.ts-header .ts-search-by-category .search-button:hover {
background:
radial-gradient(130% 150% at 50% 42%,
#27321c 0%,
#1c2415 55%,
#0d1108 100%) padding-box,
linear-gradient(180deg, #c6f09c 0%, #8fc966 45%, #4f7f34 100%) border-box !important;
}
/* ----- Produktbild kleiner und im Stil der Mengen-Kacheln -----
Die Bildbox war so breit wie ihre Spalte und trug den eckigen gelben
Laborrahmen aus einer früheren Fassung. Jetzt 70 % der Spaltenbreite,
mittig, und dieselbe Umrandung wie die Kacheln der Mengenauswahl
(1 px `#27412f`, 8 px Ecken, Fläche `#123023`). Auf dem Handy volle Breite. */
.single-product .woocommerce-product-gallery {
max-width: 70%;
margin-left: auto;
margin-right: auto;
background: var(--cf-flaeche-gruen, #123023);
border: 1px solid var(--cf-rahmen-gruen, #27412f);
border-radius: 8px;
padding: 10px;
}
@media (max-width: 767px) {
.single-product .woocommerce-product-gallery {
max-width: 100%;
}
}
/* =====================================================================
Eintrag 44: Menükarten kompakter, Produktbild kleiner, Karten 93 %
===================================================================== */
/* ----- Karten in der Spalte "Beliebt" kompakter -----
Damit in derselben Höhe mehr Produkte Platz finden: Bild 46 statt 56 px,
engere Innenabstände, kleinere Lücke. */
.cf-karte {
grid-template-columns: 46px minmax(0, 1fr);
column-gap: 10px;
padding: 6px;
}
.cf-karte-bild {
width: 46px;
height: 46px;
}
.cf-karte-name {
font-size: 12.5px;
line-height: 1.3;
}
.cf-karte-preis {
font-size: 12.5px;
}
.cf-mega-karten {
gap: 7px;
}
/* ----- Produktbild auf der Produktseite kleiner -----
Achtung beim Nachstellen: Die Bildspalte nimmt von Haus aus nur rund 58 % der
Breite ein, die Prozentangabe bezieht sich aber auf den ganzen Bereich
(Bild + Beschreibung). Werte über 58 % bleiben deshalb wirkungslos - genau
daran sind 70 % und 60 % vorbeigelaufen. 40 % entsprechen rund 70 % der
ursprünglichen Bildgröße. */
.single-product .woocommerce-product-gallery {
max-width: 40%;
}
@media (max-width: 767px) {
.single-product .woocommerce-product-gallery {
max-width: 100%;
}
}
/* ----- Produktkarten: 93 % statt 97 % Deckung (Bilder bleiben voll deckend) ----- */
.products .product .product-wrapper,
.woocommerce .products .product .product-wrapper {
background-color: rgba(18, 48, 35, 0.93);
}
/* =====================================================================
Eintrag 45: Menükarten ohne Rahmen, Preiszeile wie im Archiv,
Produktseite zweispaltig nachgezogen, Karten 80 %
===================================================================== */
/* ----- Karten in "Beliebt": kein eigener Kasten, größeres Bild -----
Die eigene Fläche und der Innenabstand haben jeden Eintrag eingerahmt und
das Bild klein gehalten. Jetzt sitzen die Karten frei auf der grünen Spalte,
das Bild ist 62 px groß, und nur beim Überfahren erscheint eine Fläche. */
.cf-karte {
grid-template-columns: 62px minmax(0, 1fr);
column-gap: 12px;
padding: 4px;
background: none;
border-radius: 6px;
}
.cf-karte:hover {
background: rgba(255, 255, 255, 0.07);
}
.cf-karte-bild {
width: 62px;
height: 62px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.05);
}
.cf-karte-name {
font-size: 13px;
line-height: 1.3;
color: rgba(255, 255, 255, 0.95);
}
.cf-mega-karten {
gap: 10px;
}
/* Preiszeile wie auf den Kategorieseiten, nur an die schmale Spalte angepasst:
Betrag groß und grün, davor klein das "AB" auf derselben Linie, daneben
zweizeilig MwSt. und Versandkosten. */
.cf-karte-preis .cf-preis-zeile {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 4px 7px;
}
.cf-karte-preis .cf-preis-betrag .amount,
.cf-karte-preis .cf-preis-betrag .woocommerce-Price-amount {
font-size: 16px;
font-weight: 700;
line-height: 1.15;
color: var(--cf-gelb);
}
.cf-karte-preis .cf-preis-ab {
font-size: 10px;
}
/* In der schmalen Spalte ist neben dem Betrag kein Platz für zwei Zeilen -
MwSt. und Versandkosten stehen deshalb nebeneinander unter dem Preis. */
.cf-karte-preis .cf-preis-zeile {
flex-wrap: wrap;
row-gap: 1px;
}
.cf-karte-preis .cf-preis-info {
flex: 0 0 100%;
flex-direction: row;
gap: 5px;
font-size: 9.5px;
line-height: 1.2;
min-width: 0;
overflow: visible;
white-space: nowrap;
}
/* ----- Newsletter-Feld: derselbe Rahmen wie der Suchschlitz -----
Zwei Hintergründe: Fläche in der padding-box, grüner Verlauf in der
border-box, Rahmen selbst durchsichtig. */
.cf-footer-newsletter .elementor-field-textual,
.cf-footer-newsletter input[type="email"] {
border: 2px solid transparent !important;
border-radius: 7px !important;
background:
linear-gradient(var(--cf-ci-schwarz), var(--cf-ci-schwarz)) padding-box,
linear-gradient(180deg, #b6e58c 0%, #7fb857 45%, #45702d 100%) border-box !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}
/* ----- Produktseite: die Angaben rücken mit dem Bild nach links -----
Bild und Beschreibung stehen nebeneinander (gefloatet). Wird nur das Bild
schmaler, bleibt die Beschreibung rechts kleben und in der Mitte klafft eine
Lücke. Deshalb werden beide Breiten gesetzt. */
.single-product .product-images-summary > .woocommerce-product-gallery {
width: 40% !important;
max-width: 40% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.single-product .product-images-summary > .summary {
width: 56% !important;
}
@media (max-width: 767px) {
.single-product .product-images-summary > .woocommerce-product-gallery,
.single-product .product-images-summary > .summary {
width: 100% !important;
max-width: 100% !important;
}
}
/* ----- Produktkarten: 80 % Deckung (Versuchswert) ----- */
.products .product .product-wrapper,
.woocommerce .products .product .product-wrapper {
background-color: rgba(18, 48, 35, 0.80);
}
/* =====================================================================
Eintrag 46: Produktkarten wirklich durchscheinend, Lücke auf der
Produktseite kleiner
===================================================================== */
/* ----- Die Durchsicht muss über die Theme-Farbe laufen -----
Eigene Regeln auf ".product-wrapper" sind an den Theme-Regeln abgeprallt
(höhere Gewichtung), und außerdem hat die Bildfläche ".thumbnail-wrapper"
dieselbe Farbe noch einmal - zwei deckende Schichten übereinander. Deshalb
wird die Farbe selbst durchscheinend gemacht: Das Theme setzt sie über
"--ts-product-bg-color", und die gilt dann überall in der Karte.
Doppeltes :root, weil die Theme-Einstellungen (uploads/ecomallchild.css)
nach dieser Datei geladen werden. */
:root:root {
--ts-product-bg-color: rgba(18, 48, 35, 0.80);
}
.products .product .product-wrapper,
.woocommerce .products .product .product-wrapper {
background-color: rgba(18, 48, 35, 0.80) !important;
}
/* Die Bildfläche liegt in der Karte und trug dieselbe Farbe ein zweites Mal -
zwei Schichten zu 80 % ergeben zusammen 96 %, also fast wieder deckend.
Sie ist deshalb ganz durchsichtig; die Farbe kommt von der Karte darunter. */
.products .product .thumbnail-wrapper {
background-color: transparent !important;
}
/* ----- Produktseite: Abstand zwischen Bild und Angaben auf zwei Drittel -----
Die Lücke lag bei 4 % der Breite (rund 55 px), jetzt bei rund 2,7 % (37 px).
Umgesetzt über die Breite der Beschreibung. */
.single-product .product-images-summary > .summary {
width: 57.3% !important;
}
/* =========================================================================
Eintrag 48: Kasse und Warenkorb - Gestaltung
=========================================================================
Gehört zum gleichnamigen Block in der functions.php.
========================================================================= */
/* ----- Hinweis zum kostenlosen Versand (Punkte 7 und 8) ----- */
.cf-versandbalken {
margin: 0 0 22px;
max-width: 100%;
padding: 14px 16px;
border: 1px solid #27412f;
border-radius: 10px;
background: #12170f;
color: #e8efe6;
}
.cf-versandbalken__text {
margin: 0 0 8px;
font-size: 15px;
line-height: 1.4;
}
.cf-versandbalken__text strong { color: #7fb857; }
.cf-versandbalken__spur {
height: 8px;
border-radius: 999px;
background: #27412f;
overflow: hidden;
}
/* Der Balken wächst nur, wenn sich der Warenkorb ändert - keine Dauerbewegung. */
.cf-versandbalken__spur span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #7fb857, #98cf6d);
transition: width .4s ease;
}
.cf-versandbalken__hinweis {
margin: 8px 0 0;
font-size: 13px;
color: #b9c7b4;
}
.cf-versandbalken--erreicht .cf-versandbalken__spur span { background: #98cf6d; }
/* ----- Vorschläge zum Auffüllen (Punkt 7) ----- */
.cf-auffuellen { margin-top: 14px; border-top: 1px solid #27412f; padding-top: 12px; }
.cf-auffuellen__titel { margin: 0 0 10px; font-size: 13px; color: #b9c7b4; }
.cf-auffuellen__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cf-auffuellen__posten {
display: grid !important;
grid-template-columns: 44px 1fr auto auto !important;
gap: 10px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.cf-auffuellen__posten br { display: none !important; }
.cf-auffuellen__posten p { margin: 0 !important; }
.cf-auffuellen__bild img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.cf-auffuellen__name { font-size: 13px; line-height: 1.3; color: #e8efe6; }
.cf-auffuellen__preis { font-size: 13px; font-weight: 700; color: #7fb857; white-space: nowrap; }
.cf-auffuellen__knopf.button {
padding: 6px 12px !important;
font-size: 12px !important;
min-height: 0 !important;
line-height: 1.4 !important;
}
.cf-auffuellen__posten .added_to_cart { display: none; }
/* ----- Vertrauensbausteine unter der Bestellübersicht (Punkte 16 und 18) ----- */
.cf-vertrauen {
margin-top: 16px;
padding: 16px;
border: 1px solid #27412f;
border-radius: 10px;
background: #12170f;
}
.cf-vertrauen__zusagen { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cf-vertrauen__zusagen li {
position: relative;
padding-left: 24px;
font-size: 13px;
line-height: 1.45;
color: #b9c7b4;
}
.cf-vertrauen__zusagen li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 14px;
height: 8px;
border-left: 2px solid #7fb857;
border-bottom: 2px solid #7fb857;
transform: rotate(-45deg);
}
.cf-vertrauen__zusagen strong { color: #e8efe6; }
.cf-vertrauen__stimmen { margin-top: 14px; border-top: 1px solid #27412f; padding-top: 12px; display: grid; gap: 10px; }
.cf-vertrauen__stimmen blockquote {
margin: 0;
padding: 0 0 0 12px;
border-left: 2px solid #7fb857;
font-size: 13px;
font-style: italic;
line-height: 1.45;
color: #b9c7b4;
}
/* ----- Kaufknopf erst im Zahlungsschritt (Punkt 14) ----- */
.cf-kaufknopf-aus { display: none !important; }
/* ----- Kasse: keine tote Fläche mehr (Punkte 16 und 23) ----- */
.woocommerce-checkout .fc-checkout,
.woocommerce-checkout .elementor-section-wrap > .elementor-section:last-child { padding-bottom: 24px; }
.woocommerce-checkout #content,
.woocommerce-checkout .site-content,
.woocommerce-checkout .elementor-location-single { min-height: 0 !important; }
.woocommerce-checkout .fc-checkout__main { padding-bottom: 8px; }
/* Die Bewertungsleiste des Vertrauenssiegels gehört nicht in die Kasse -
die Stimmen stehen jetzt direkt neben der Bestellübersicht. */
.woocommerce-checkout .trustedShopsWidget { display: none !important; }
/* ----- Warenkorbseite aufgeräumt (Punkt 21) ----- */
.woocommerce-cart .woocommerce > .woocommerce-cart-form { width: 100%; }
.woocommerce-cart .shop_table.cart { width: 100%; }
/* Leeren ist keine Hauptaktion - schlicht, klein, neben dem Aktualisieren. */
.woocommerce-cart .cart .button.empty-cart-button,
.woocommerce-cart .cart .button[name="ts_empty_cart"],
.woocommerce-cart .cart .button[name="empty_cart"] {
background: transparent !important;
border: 1px solid #27412f !important;
color: #b9c7b4 !important;
font-size: 12px !important;
padding: 8px 14px !important;
}
.woocommerce-cart .cart-collaterals { width: 100%; max-width: 420px; margin-left: auto; }
.cf-versandzeile small { display: block; color: #b9c7b4; font-size: 12px; }
/* ----- Handy: der Weiter-Knopf bleibt erreichbar (Punkt 24) ----- */
@media (max-width: 782px) {
.woocommerce-checkout .fc-step__next-step {
position: sticky;
bottom: 0;
z-index: 30;
margin: 0 -14px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(10,15,7,0), #0a0f07 32%);
}
.woocommerce-checkout .fc-step__next-step .button { width: 100%; }
.cf-versandbalken { padding: 12px; }
.cf-auffuellen__posten { grid-template-columns: 38px 1fr auto; row-gap: 4px; }
.cf-auffuellen__bild img { width: 38px; height: 38px; }
.cf-auffuellen__knopf.button { grid-column: 3; }
/* Das Vertrauenssiegel klebte über dem Formular. */
.woocommerce-checkout [id^="trustbadge-container"],
.woocommerce-checkout .trustbadge { display: none !important; }
}
/* Die Bausteine dürfen nicht in Absätze zerfallen (Elementor-Textfeld). */
.cf-versandbalken p, .cf-vertrauen p { margin-top: 0; }
.cf-versandbalken br, .cf-vertrauen br { display: none; }
/* ----- Dunkle Kasse: Beschriftungen und Hinweise lesbar (Punkt 12) -----
Im dunklen Erscheinungsbild waren die Feldbeschriftungen dunkelgrau auf
schwarzem Grund - praktisch unsichtbar. */
body.woocommerce-checkout label,
body.woocommerce-checkout .form-row label,
body.woocommerce-checkout legend,
body.woocommerce-checkout .fc-step__substep-title,
body.woocommerce-checkout .fc-step__substep-title-text { color: #e8efe6 !important; }
body.woocommerce-checkout .description,
body.woocommerce-checkout .optional,
body.woocommerce-checkout .woocommerce-input-wrapper .description { color: #b9c7b4 !important; }
body.woocommerce-checkout .required { color: #d96b6b !important; }
body.woocommerce-checkout input::placeholder,
body.woocommerce-checkout textarea::placeholder { color: #8ea189 !important; }
/* Versandzeile im Warenkorb: dieselbe Helligkeit wie die übrigen Summen. */
.woocommerce-cart .cart_totals .shipping td,
.woocommerce-cart .cart_totals .shipping td * { color: #e8efe6 !important; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { color: #b9c7b4 !important; }
/* ----- GiroCode für Vorkasse (Punkt 2) ----- */
.cf-girocode {
/* Flex statt Raster: WordPress schiebt in diesen Kasten gelegentlich einen
leeren Absatz, der ein Raster durcheinanderbringen würde. */
display: flex !important;
flex-wrap: wrap;
gap: 18px;
align-items: flex-start;
margin: 0 0 26px;
padding: 18px;
border: 1px solid #27412f;
border-radius: 10px;
background: #12170f;
color: #e8efe6;
}
.cf-girocode__bild {
width: 150px;
height: 150px;
display: block;
background: #fff;
border-radius: 6px;
padding: 4px;
}
.cf-girocode__text { flex: 1 1 260px; min-width: 240px; }
.cf-girocode > p:empty, .cf-vertrauen > p:empty, .cf-versandbalken > p:empty { display: none !important; }
.cf-girocode__titel { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #7fb857; }
.cf-girocode p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.cf-girocode__zweck { color: #b9c7b4; font-size: 13px; }
@media (max-width: 600px) {
.cf-girocode { justify-content: center; text-align: center; }
.cf-girocode__text { flex-basis: 100%; }
}
/* =========================================================================
Eintrag 52: Leerer Warenkorb, Konto-Aufklapp im Kopf, Mengen-Kacheln
=========================================================================
1. Leerer Warenkorb zeigt den traurigen Kiffer statt des Einkaufswagens.
2. Konto-Aufklapp im Kopf (angemeldet wie abgemeldet) in unserer CI:
Fläche CI-Schwarz, Eingabefelder wie der Suchschlitz, lesbare Schrift.
3. Einkaufswagen im Kopf: Überfahren färbt grün statt in Theme-Farben.
4. Mengen-Kacheln: beim Überfahren dunkel mit heller Schrift statt
hellgrüner Fläche mit grauer Schrift.
========================================================================= */
/* ----- 1. Leerer Warenkorb: trauriger Kiffer ----- */
body .wc-empty-cart-message .wc-block-components-notice-banner.is-info:before,
body .woocommerce .cart-empty.woocommerce-info:before {
background: url('images/warenkorb-leer-kiffer.svg') no-repeat center;
background-size: contain;
opacity: 0.95;
}
/* ----- 2. Konto-Aufklapp: Fläche und Schrift ----- */
body header.ts-header .my-account-wrapper .dropdown-container,
body header.ts-header .shopping-cart-wrapper .dropdown-container {
color: #e8efe6;
}
body header.ts-header .my-account-wrapper .dropdown-container:before,
body header.ts-header .shopping-cart-wrapper .dropdown-container:before {
background-color: var(--cf-menue-flaeche, rgba(18, 23, 15, 0.97));
box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.7);
}
/* Beschriftungen und Nebentexte */
body header.ts-header .my-account-wrapper .dropdown-container form label,
body header.ts-header .my-account-wrapper .dropdown-container .login-remember label,
body header.ts-header .my-account-wrapper .dropdown-container .create-account-wrapper span {
color: #b9c7b4 !important;
font-size: 13px;
}
/* Eingabefelder: gleiche Optik wie der Suchschlitz, beide gleich hoch */
body header.ts-header .my-account-wrapper .dropdown-container input[type="text"],
body header.ts-header .my-account-wrapper .dropdown-container input[type="email"],
body header.ts-header .my-account-wrapper .dropdown-container input[type="password"] {
width: 100% !important;
height: 46px !important;
padding: 0 14px !important;
background: var(--cf-ci-schwarz, #12170f) !important;
border: 1px solid #27412f !important;
border-radius: 8px !important;
color: #e8efe6 !important;
box-shadow: none !important;
-webkit-text-fill-color: #e8efe6;
caret-color: #7fb857;
}
body header.ts-header .my-account-wrapper .dropdown-container input[type="text"]:focus,
body header.ts-header .my-account-wrapper .dropdown-container input[type="email"]:focus,
body header.ts-header .my-account-wrapper .dropdown-container input[type="password"]:focus {
border-color: #7fb857 !important;
outline: none !important;
}
body header.ts-header .my-account-wrapper .dropdown-container input::placeholder {
color: #7c8c78 !important;
}
/* Der Browser färbt gespeicherte Zugangsdaten sonst weiß-blau ein */
body header.ts-header .my-account-wrapper .dropdown-container input:-webkit-autofill,
body header.ts-header .my-account-wrapper .dropdown-container input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--cf-ci-schwarz, #12170f) inset !important;
-webkit-text-fill-color: #e8efe6 !important;
}
/* Anmelde-Knopf im Haus-Stil (schwarz, grüne Schrift, grüner Rand) */
body header.ts-header .my-account-wrapper .dropdown-container .login-submit input[type="submit"] {
width: 100% !important;
height: 46px !important;
background: #0d1108 !important;
border: 1px solid #7fb857 !important;
border-radius: 8px !important;
color: #7fb857 !important;
font-weight: 700 !important;
}
body header.ts-header .my-account-wrapper .dropdown-container .login-submit input[type="submit"]:hover {
background: #98cf6d !important;
color: #0d1108 !important;
}
/* Liste im angemeldeten Zustand */
body header.ts-header .my-account-wrapper .dropdown-container ul li a {
color: #e8efe6 !important;
}
body header.ts-header .my-account-wrapper .dropdown-container ul li a:hover,
body header.ts-header .my-account-wrapper .dropdown-container .create-account-wrapper a {
color: #7fb857 !important;
}
/* ----- 3. Einkaufswagen und Konto im Kopf: Überfahren ----- */
body header.ts-header .shopping-cart-wrapper:hover .cart-control,
body header.ts-header .shopping-cart-wrapper:hover .cart-control .ic-cart:before,
body header.ts-header .shopping-cart-wrapper:hover .cart-control .cart-total,
body header.ts-header .my-account-wrapper:hover .account-control > a,
body header.ts-header .my-account-wrapper:hover .account-control > a:before {
color: #7fb857 !important;
}
body header.ts-header .shopping-cart-wrapper:hover .cart-control .label,
body header.ts-header .my-account-wrapper:hover .account-control > a .label {
color: #b9c7b4 !important;
}
body header.ts-header .shopping-cart-wrapper .cart-control .cart-number {
background: #7fb857 !important;
color: #0d1108 !important;
}
/* Hinweis im leeren Aufklapp-Warenkorb */
body header.ts-header .ts-tiny-cart-wrapper .form-content > label span {
color: #b9c7b4 !important;
}
/* ----- 4. Mengen-Kacheln: Kontrast beim Überfahren ----- */
.cf-menge:hover {
background: rgba(127, 184, 87, 0.16) !important;
border-color: var(--cf-gelb, #d8e527) !important;
color: rgba(255, 255, 255, 0.97) !important;
}
.cf-menge:hover .cf-menge-wert {
color: rgba(255, 255, 255, 0.97) !important;
}
.cf-menge:hover .cf-menge-grund {
color: #dbe8d6 !important;
}
.cf-mengen-mehr:hover {
background: rgba(127, 184, 87, 0.16) !important;
color: rgba(255, 255, 255, 0.97) !important;
}
/* ----- 5. „Ausverkauft" hebt sich ab (Eintrag 52) -----
Das Fähnchen war weiß auf Graugrün (#4a5340) und ging im grünen Shop unter.
Jetzt ein kräftiges Rot - die einzige Signalfarbe im Haus, die nirgends
sonst vorkommt (Qualmgelb bleibt dem Sale-Aufkleber vorbehalten).
Die Variablen wirken überall dort, wo das Theme das Fähnchen setzt:
Produktkarten, Listen in Seitenspalten, Menükacheln, Schnellansicht. */
:root:root {
--ts-soldout-label-bg: #cf3a2a;
--ts-soldout-label-color: #ffffff;
}
.product_list_widget .product-label .out-of-stock,
body .woocommerce .product .product-label .out-of-stock {
background: #cf3a2a !important;
color: rgba(255, 255, 255, 0.97) !important;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.6);
}
/* Produktseite: dieselbe Signalfarbe, damit es überall gleich aussieht */
body .woocommerce div.product .stock.out-of-stock {
display: inline-block;
padding: 5px 12px;
border-radius: 999px;
background: #cf3a2a;
color: rgba(255, 255, 255, 0.97) !important;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.02em;
}
/* =========================================================================
Eintrag 54/55/56 — Versand-Badge in der oberen Kopfzeile
Badge rechts in der Menüzeile (Rechner/Tablet) und als schmale Leiste
unter der Kopfzeile (Handy). Das Sternchen klappt die Bedingungen auf.
Keine Dauer-Animation — nur kurze Übergänge als Antwort auf eine Aktion.
========================================================================= */
.cf-versand-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 0;
font-size: 13px;
line-height: 1.2;
white-space: nowrap;
}
.cf-versand-badge__link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 1px 6px 11px;
color: #98cf6d;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 999px 0 0 999px;
transition: color 0.15s ease;
}
.cf-versand-badge__link:hover,
.cf-versand-badge__link:focus-visible {
color: rgba(255, 255, 255, 0.97);
}
.cf-versand-badge__bild {
flex: 0 0 auto;
color: #7fb857;
}
.cf-versand-badge__stern {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin: 0;
padding: 3px 10px 3px 0;
background: none;
border: 0;
color: #98cf6d;
font-size: 15px;
font-weight: 700;
line-height: 1;
cursor: help;
border-radius: 0 999px 999px 0;
transition: color 0.15s ease;
}
.cf-versand-badge__stern:hover,
.cf-versand-badge__stern:focus-visible,
.cf-versand-badge.is-offen .cf-versand-badge__stern {
color: rgba(255, 255, 255, 0.97);
}
/* Umriss des ganzen Badges */
.cf-versand-badge::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgba(127, 184, 87, 0.45);
border-radius: 999px;
background: rgba(127, 184, 87, 0.08);
pointer-events: none;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cf-versand-badge:hover::before,
.cf-versand-badge.is-offen::before {
border-color: rgba(152, 207, 109, 0.8);
background: rgba(127, 184, 87, 0.16);
}
/* Die aufklappbare Box mit den genauen Bedingungen */
.cf-versand-badge__box {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1000;
width: 340px;
max-width: calc(100vw - 32px);
padding: 16px 18px 14px;
background: #0d1108;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
color: #e6ecdf;
font-size: 12.5px;
font-weight: 400;
line-height: 1.55;
white-space: normal;
text-align: left;
}
/* kleine Spitze zum Sternchen hin */
.cf-versand-badge__box::before {
content: "";
position: absolute;
top: -6px;
right: 18px;
width: 10px;
height: 10px;
background: #0d1108;
border-left: 1px solid rgba(255, 255, 255, 0.14);
border-top: 1px solid rgba(255, 255, 255, 0.14);
transform: rotate(45deg);
}
.cf-versand-badge__titel {
display: block;
margin-bottom: 8px;
color: #98cf6d;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cf-versand-badge__liste {
margin: 0 0 10px;
padding: 0;
list-style: none;
}
.cf-versand-badge__liste li {
margin: 0 0 7px;
padding-left: 12px;
position: relative;
list-style: none;
}
.cf-versand-badge__liste li::marker {
content: "";
font-size: 0;
}
.cf-versand-badge__liste li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 4px;
height: 4px;
border-radius: 50%;
background: #7fb857;
}
.cf-versand-badge__liste strong {
color: rgba(255, 255, 255, 0.97);
font-weight: 600;
}
.cf-versand-badge__fuss {
margin: 0 0 10px;
color: rgba(230, 236, 223, 0.7);
font-size: 11.5px;
line-height: 1.5;
}
.cf-versand-badge__mehr {
display: inline-block;
color: #98cf6d;
font-weight: 600;
font-size: 12px;
text-decoration: underline;
text-underline-offset: 3px;
}
.cf-versand-badge__mehr:hover {
color: rgba(255, 255, 255, 0.97);
}
/* Am Rechner reicht das Überfahren, geklickt werden kann trotzdem */
@media (min-width: 1025px) {
.cf-versand-badge:hover .cf-versand-badge__box[hidden] {
display: block;
}
}
/* Platzierung in der oberen Kopfzeile: eine Zeile ÜBER Konto und Warenkorb,
linksbündig zum Konto. Das Badge steht außerhalb des Textflusses — so behält
die Suchleiste in der Mitte ihre volle Breite und nichts verschiebt sich.
Nur ab 1200 px; darunter übernimmt die Leiste unter der Kopfzeile. */
header.ts-header .header-middle .header-right {
position: relative;
}
header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile {
position: absolute;
left: 0;
bottom: calc(100% + 7px);
margin: 0;
font-size: 11.5px;
}
/* dezenter als in der Menüzeile: es sitzt dicht über den Symbolen */
header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__link {
padding: 4px 1px 4px 9px;
gap: 6px;
font-weight: 500;
letter-spacing: 0.02em;
}
header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__stern {
padding: 2px 8px 2px 0;
font-size: 13px;
}
header.ts-header .header-middle .cf-versand-badge--kopfzeile::before {
border-color: rgba(127, 184, 87, 0.35);
background: rgba(127, 184, 87, 0.10);
}
/* Die Box klappt unterhalb von Konto und Warenkorb auf, nicht darüber — sonst
verdeckt sie genau die Schaltflächen, die der Kunde als Nächstes braucht.
Der Versatz entspricht der Höhe der Symbolzeile plus etwas Luft. Rechtsbündig
zum Badge, damit die Box bei schmaleren Fenstern nicht aus dem Bild läuft. */
header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__box {
top: calc(100% + 58px);
right: 0;
left: auto;
}
header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__box::before {
display: none;
}
@media (max-width: 1199px) {
header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile {
display: none;
}
}
/* Handy-Leiste unter der Kopfzeile */
.cf-versand-leiste {
display: none;
padding: 7px 16px;
background: rgba(127, 184, 87, 0.07);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
text-align: center;
}
.cf-versand-leiste .cf-versand-badge__box {
right: auto;
left: 50%;
transform: translateX(-50%);
}
.cf-versand-leiste .cf-versand-badge__box::before {
right: auto;
left: calc(50% - 5px);
}
@media (max-width: 1199px) {
.cf-versand-leiste {
display: block;
}
}
@media (max-width: 767px) {
.cf-versand-badge {
font-size: 12.5px;
}
.cf-versand-badge__box {
width: min(340px, calc(100vw - 24px));
}
}
/* =========================================================================
Eintrag 55: Warenkorb, Konto-Aufklapp, Anmeldeseite
=========================================================================
Gehört zum gleichnamigen Block in der functions.php.
========================================================================= */
/* ----- Luft über der Überschrift (Warenkorb und Konto) -----
Die beiden Elementor-Abschnitte trugen 63 bzw. 70 Pixel Außenabstand oben. */
body .elementor-44 .elementor-element.elementor-element-333f653b { margin-top: 18px !important; }
body .elementor-46 .elementor-element.elementor-element-5c3f8094 { margin-top: 18px !important; }
/* ----- Kontoseite: die Überschrift „Mein Konto" stand doppelt ----- */
body .elementor-46 .elementor-element.elementor-element-d5df32c { display: none !important; }
/* ----- Leerer Warenkorb: Hinweis mit Kontrast ----- */
body .woocommerce .cart-empty.woocommerce-info {
color: #e8efe6 !important;
font-size: 17px;
}
/* ----- Knopf „Zurück zum Shop": Text mittig, Höhe passend -----
Im Knopf steckte ein Zeilenumbruch, dadurch war er zu hoch und die Schrift
saß unten. Der Umbruch ist in der functions.php beseitigt; die Regeln hier
halten den Knopf zusätzlich in Form. */
body .woocommerce .return-to-shop a.button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 28px !important;
line-height: 1.2 !important;
}
body .woocommerce .return-to-shop a.button br { display: none; }
/* ----- Konto-Aufklapp im Kopf: breiter, kein Umbruch ----- */
body.logged-in header.ts-header .my-account-wrapper .dropdown-container {
width: 290px !important;
margin-left: -145px !important; /*rtl*/
}
body header.ts-header .my-account-wrapper .dropdown-container ul li a {
white-space: nowrap;
}
/* ----- Anmeldefelder im Kopf: kräftigerer Rand, Schrift bleibt hell -----
Beim Hineinklicken färbte das Theme die Schrift schwarz - auf schwarzem
Grund unsichtbar. */
body header.ts-header .my-account-wrapper .dropdown-container input[type="text"],
body header.ts-header .my-account-wrapper .dropdown-container input[type="email"],
body header.ts-header .my-account-wrapper .dropdown-container input[type="password"] {
border-width: 2px !important;
}
body header.ts-header .my-account-wrapper .dropdown-container input[type="text"]:focus,
body header.ts-header .my-account-wrapper .dropdown-container input[type="email"]:focus,
body header.ts-header .my-account-wrapper .dropdown-container input[type="password"]:focus,
body header.ts-header .my-account-wrapper .dropdown-container input[type="text"]:active,
body header.ts-header .my-account-wrapper .dropdown-container input[type="password"]:active {
color: #e8efe6 !important;
-webkit-text-fill-color: #e8efe6 !important;
background: var(--cf-ci-schwarz, #12170f) !important;
}
/* =====================================================================
Anmelde-, Registrier- und Passwortseite (/mein-konto/)
===================================================================== */
/* Beschriftungen: lesbar, dicht über dem Feld, normale Schreibweise */
body.woocommerce-account .woocommerce form .form-row label,
body.woocommerce-account .woocommerce-form label,
body.woocommerce-account .woocommerce form label {
display: block;
margin: 0 0 6px !important;
padding: 0 !important;
color: #e8efe6 !important;
text-transform: none !important;
font-size: 14px;
line-height: 1.35;
}
body.woocommerce-account .woocommerce form .required { color: #7fb857 !important; }
/* Hakenbox: Text steht daneben, nicht darunter */
body.woocommerce-account .woocommerce-form__label-for-checkbox {
display: flex !important;
align-items: center;
gap: 9px;
margin: 4px 0 14px !important;
}
body.woocommerce-account .woocommerce-form__label-for-checkbox input[type="checkbox"] {
margin: 0 !important;
width: 18px;
height: 18px;
flex: 0 0 auto;
}
body.woocommerce-account .woocommerce-form__label-for-checkbox span {
text-transform: none !important;
color: #b9c7b4 !important;
}
/* Eingabefelder wie im übrigen Shop */
body.woocommerce-account .woocommerce form .input-text,
body.woocommerce-account .woocommerce form input[type="text"],
body.woocommerce-account .woocommerce form input[type="email"],
body.woocommerce-account .woocommerce form input[type="password"] {
width: 100%;
height: 46px;
padding: 0 14px !important;
background: var(--cf-ci-schwarz, #12170f) !important;
border: 2px solid #27412f !important;
border-radius: 8px !important;
color: #e8efe6 !important;
-webkit-text-fill-color: #e8efe6;
caret-color: #7fb857;
box-shadow: none !important;
}
body.woocommerce-account .woocommerce form .input-text:focus,
body.woocommerce-account .woocommerce form input:focus {
border-color: #7fb857 !important;
color: #e8efe6 !important;
-webkit-text-fill-color: #e8efe6 !important;
outline: none !important;
}
body.woocommerce-account .woocommerce form input:-webkit-autofill,
body.woocommerce-account .woocommerce form input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--cf-ci-schwarz, #12170f) inset !important;
-webkit-text-fill-color: #e8efe6 !important;
}
/* Die Zeilenumbrüche des Text-Bausteins aufräumen (Netz zum Fix in der PHP) */
body.woocommerce-account .woocommerce form br { display: none; }
body.woocommerce-account .woocommerce form p { margin-bottom: 16px; }
/* Überschriften „Anmelden in meinem Konto" / „Registrieren" bündig zum Inhalt */
body.woocommerce-account #customer_login h2,
body.woocommerce-account .woocommerce > h2 {
margin: 0 0 16px !important;
padding: 0 !important;
color: #e8efe6;
font-size: 26px;
line-height: 1.25;
}
/* ----- Kleiner Warenkorb im Kopf: gleiche Zeichnung wie auf der Seite -----
Das Theme setzt dort eine fest eingebaute Zeichnung (grauer Einkaufswagen)
in den Quelltext. Sie wird ausgeblendet, davor steht unsere eigene. */
body header.ts-header .ts-tiny-cart-wrapper .form-content > label > svg {
display: none !important;
}
body header.ts-header .ts-tiny-cart-wrapper .form-content > label:before {
content: "";
display: block;
width: 100%;
height: 130px;
margin: 0 auto 12px;
background: url('images/warenkorb-leer-kiffer.svg') no-repeat center;
background-size: contain;
opacity: 0.95;
}
/* =========================================================================
Eintrag 56: Leerer Warenkorb mit Empfehlungen, Kontoseite nachgebessert
========================================================================= */
/* ----- Streifen mit den beliebtesten Produkten ----- */
.cf-leer-empfehlung {
position: relative;
margin: 26px 0 38px;
}
.cf-leer-empfehlung .cf-leer-liste {
display: flex !important;
gap: 14px;
margin: 0 !important;
padding: 2px 0 10px !important;
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: #27412f transparent;
}
.cf-leer-empfehlung .cf-leer-liste > .product {
flex: 0 0 calc(25% - 11px);
max-width: calc(25% - 11px);
margin: 0 !important;
scroll-snap-align: start;
text-align: left;
}
.cf-leer-empfehlung .cf-leer-liste::-webkit-scrollbar { height: 6px; }
.cf-leer-empfehlung .cf-leer-liste::-webkit-scrollbar-thumb {
background: #27412f;
border-radius: 999px;
}
/* Pfeile links und rechts - nur sichtbar, wo Platz ist */
.cf-leer-pfeil {
position: absolute;
top: 42%;
z-index: 3;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid #27412f;
background: rgba(18, 23, 15, 0.94);
color: #7fb857;
font-size: 15px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.cf-leer-pfeil:hover { background: #7fb857; color: #0d1108; }
.cf-leer-pfeil--zurueck { left: -14px; }
.cf-leer-pfeil--vor { right: -14px; }
@media (max-width: 1024px) {
.cf-leer-empfehlung .cf-leer-liste > .product {
flex: 0 0 calc(50% - 7px);
max-width: calc(50% - 7px);
}
}
@media (max-width: 600px) {
.cf-leer-empfehlung .cf-leer-liste > .product {
flex: 0 0 78%;
max-width: 78%;
}
.cf-leer-pfeil { display: none; }
}
/* Luft zwischen Empfehlungen und dem Knopf „Zurück zum Shop" */
body .woocommerce > .return-to-shop,
body .woocommerce .return-to-shop {
margin-top: 8px !important;
margin-bottom: 40px !important;
}
/* ----- Großschreibung jedes Wortes gibt es im Shop nicht mehr ----- */
body .my-account-wrapper .account-control > a > span,
body .ts-search-by-category .select-category,
body .woocommerce.ts-product-category-wrapper .product-category .meta-wrapper .shop-now-button > a,
body .woocommerce #customer_login .woocommerce-form-login .woocommerce-form-login__rememberme,
body .elementor-widget-text-editor,
body .elementor-heading-title,
body .woocommerce h2,
body .woocommerce label {
text-transform: none !important;
}
/* ----- Formularfelder: Schrift bleibt hell, auch beim Tippen und bei
eingesetzten Zugangsdaten. Gilt im ganzen Shop, nicht nur im Konto. ----- */
body .woocommerce form input[type="text"],
body .woocommerce form input[type="email"],
body .woocommerce form input[type="password"],
body .woocommerce form input[type="tel"],
body .woocommerce form .input-text,
body header.ts-header .dropdown-container input {
font-size: 16px !important;
color: #e8efe6 !important;
-webkit-text-fill-color: #e8efe6 !important;
}
body .woocommerce form input:focus,
body .woocommerce form input:active,
body .woocommerce form input:autofill,
body header.ts-header .dropdown-container input:focus,
body header.ts-header .dropdown-container input:active {
color: #e8efe6 !important;
-webkit-text-fill-color: #e8efe6 !important;
background-color: var(--cf-ci-schwarz, #12170f) !important;
}
/* ----- Anmelden und Registrieren: gleiche Knopfhöhe ----- */
body.woocommerce-account #customer_login .woocommerce-form-login__submit,
body.woocommerce-account #customer_login .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce-ResetPassword button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 48px !important;
padding: 12px 28px !important;
line-height: 1.2 !important;
font-size: 15px !important;
}
/* =========================================================================
Eintrag 58: Hinweis zweizeilig, Preiszeile bricht um statt abzuschneiden,
Anmelden und Registrieren bündig
========================================================================= */
/* ----- Hinweis im leeren Warenkorb: zwei Zeilen ----- */
body .woocommerce .cart-empty.woocommerce-info {
display: block !important;
text-align: center;
}
.cf-leer-zeile { display: block; }
.cf-leer-zeile--zwei { margin-top: 4px; color: #b9c7b4; }
/* ----- Preiszeile: „zzgl. Versandkosten" wurde abgeschnitten -----
Steht neben dem Preis ein durchgestrichener zweiter Betrag, wurde es eng.
Beide Teile schrumpfen nicht mehr, sondern die Zeile bricht um. */
.cf-preis-zeile { align-items: flex-end; }
.cf-preis-zeile .cf-preis-betrag { flex: 0 1 auto; min-width: 0; }
.cf-preis-info {
flex: 0 0 auto;
white-space: nowrap;
overflow: visible;
}
.products .product .meta-wrapper,
.products .product .price { overflow: visible; }
/* ----- Anmelden und Registrieren: Knöpfe auf gleicher Höhe ----- */
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
display: flex;
flex-direction: column;
}
body.woocommerce-account #customer_login form.login,
body.woocommerce-account #customer_login form.register {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* Leere Absätze (Reste der Absatz-Automatik) nehmen sonst Platz weg */
body.woocommerce-account #customer_login form p:empty { display: none; }
/* Die Zeile mit dem Knopf rutscht in beiden Spalten ganz nach unten */
body.woocommerce-account #customer_login form.login > p.form-row:has(button),
body.woocommerce-account #customer_login form.register > p.woocommerce-form-row:has(button) {
margin-top: auto;
margin-bottom: 0;
}
/* ----- Eintrag 58: Preiszeile bei Angeboten (Nachtrag) -----
Steht ein durchgestrichener Preis daneben, passten zwei Beträge plus
„inkl. MwSt. / zzgl. Versandkosten" nicht mehr in die feste Zeilenhöhe von
22 Pixeln - die zweite Zeile lag über der ersten. Bei Angeboten darf die
Zeile jetzt wachsen, der alte Preis wird kleiner und gedämpft dargestellt.
Karten ohne Angebot bleiben unverändert. */
.products .product .product-wrapper .price .cf-preis-zeile {
min-height: 22px;
align-items: baseline;
row-gap: 2px;
}
.products .product .product-wrapper .price .cf-preis-betrag {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 7px;
}
.products .product .product-wrapper .price .cf-preis-zeile del .amount {
font-size: 15px !important;
line-height: 20px !important;
height: auto !important;
color: var(--cf-schrift-matt, #b9c7b4) !important;
font-weight: 500 !important;
}
.products .product .product-wrapper .price .cf-preis-zeile ins {
text-decoration: none;
background: transparent;
}
.products .product .product-wrapper .cf-preis-info {
height: auto !important;
min-height: 22px;
}
/* ----- Eintrag 58: Anmelden und Registrieren wirklich bündig (Nachtrag) -----
Im Registrier-Formular steckt zwischen Hakenbox und Knopf ein Absatz mit
einem unsichtbaren Baustein von WooCommerce (Herkunft der Bestellung). Er
ist leer, nimmt aber Platz - dadurch stand der Knopf 32 Pixel tiefer als
der Anmelde-Knopf. */
body.woocommerce-account #customer_login form.register > p:has(wc-order-attribution-inputs),
body.woocommerce-account #customer_login form.register > p:has(> wc-order-attribution-inputs) {
display: none !important;
}
body.woocommerce-account #customer_login wc-order-attribution-inputs {
display: none !important;
}
/* ----- Eintrag 58: letzte 16 Pixel Versatz (Nachtrag) -----
Beim Anmelden steckt die Hakenbox im selben Absatz wie der Knopf, beim
Registrieren in einem eigenen. Dadurch waren die Abstände verschieden.
Jetzt gilt für beide: Hakenbox, 14 Pixel Luft, Knopf. */
body.woocommerce-account #customer_login form .woocommerce-form__label-for-checkbox {
margin: 4px 0 0 !important;
}
body.woocommerce-account #customer_login form.login button.woocommerce-form-login__submit {
margin-top: 14px !important;
}
body.woocommerce-account #customer_login form.register > p:has(button.woocommerce-form-register__submit) {
margin-top: 14px !important;
margin-bottom: 0 !important;
}
body.woocommerce-account #customer_login form.login > p.form-row:has(button) {
margin-bottom: 0 !important;
}
/* ---------------------------------------------------------------------------
Eintrag 59: Megamenü — Platzhalter für die nachgeladenen Kacheln und
Handy-Fassung ohne Produktspalte
--------------------------------------------------------------------------- */
/* Der Platzhalter hält die Höhe frei, die vier Karten brauchen (MINDESTENS im
Menü-Skript). So klappt die Fläche gleich in ihrer endgültigen Größe auf und
springt nicht nach, wenn die Kacheln ankommen. */
.cf-mega-produkte.cf-mega-spaeter {
min-height: 300px;
}
/* Handy-Menü: Dort entfällt die rechte Spalte ganz, also bekommt die
Kategorieliste die volle Breite statt einer Viertelspalte. */
.cf-mega.cf-mega-ohne-produkte {
display: block;
gap: 0;
padding: 0;
}
/* Der Absatz, der beim Registrieren nur die Hakenbox enthält, brachte
zusätzlich 16 Pixel Abstand mit - beim Anmelden steht die Hakenbox im
selben Absatz wie der Knopf und hat diesen Abstand nicht. */
body.woocommerce-account #customer_login form.register > p:has(.woocommerce-form__label-for-checkbox) {
margin-bottom: 0 !important;
}
/* Feste Höhe für die Hakenbox-Zeile - dann starten beide Knöpfe auf
derselben Linie, unabhängig von der Länge der Beschriftung. */
body.woocommerce-account #customer_login form .woocommerce-form__label-for-checkbox {
height: 24px;
line-height: 24px;
}
/* Der Knopf-Absatz beim Registrieren bringt 6 Pixel Innenabstand von
WooCommerce mit (.form-row hat padding: 3px). Beim Anmelden steht der Knopf
im selben Absatz wie die Hakenbox und hat diesen Abstand nicht. Deshalb
14 - 6 = 8 Pixel, dann liegen beide Knöpfe auf derselben Linie. */
body.woocommerce-account #customer_login form.register > p:has(button.woocommerce-form-register__submit) {
margin-top: 8px !important;
padding-top: 0 !important;
}
/* =========================================================================
Eintrag 69: Eine H1 für die ganze Seite, Kategorietext in voller Breite,
Suchvorschläge im CI, Kasse im CI mit Fortschritt am unteren Rand
========================================================================= */
/* 18. H1 ist H1 — Kategorie, Wunschliste, Warenkorb, Konto, Produktseite, Elementor-Überschriften */
h1, .breadcrumb-title-wrapper .page-title, h1.cf-archiv-titel, h1.product_title, h1.entry-title,
.elementor-widget-heading h1.elementor-heading-title {
font-size: 34px !important;
line-height: 1.2 !important;
font-weight: 600;
margin-top: 0;
}
@media (max-width: 767px) {
h1, .breadcrumb-title-wrapper .page-title, h1.cf-archiv-titel, h1.product_title, h1.entry-title,
.elementor-widget-heading h1.elementor-heading-title { font-size: 26px !important; }
}
/* 19. Kategorietext so breit wie das Produktraster */
.cf-archiv-text { max-width: none !important; }
/* 4. Suchvorschläge: Fläche im CI-Schwarz statt tiefschwarz, „Alle Treffer ansehen" als Knopf */
body > .ts-search-result-container:before {
background-color: var(--cf-menue-flaeche, rgba(18, 23, 15, 0.97)) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important;
border-bottom: 1px solid rgba(127, 184, 87, 0.35);
}
body > .ts-search-result-container,
body > .ts-search-result-container .ts-wg-meta a.title { color: rgba(255, 255, 255, 0.97) !important; }
body > .ts-search-result-container .ts-wg-meta .description { color: #b9c7b4; }
body > .ts-search-result-container .ts-wg-meta .price { color: #9ad072; font-weight: 700; }
body > .ts-search-result-container .view-all-wrapper { text-align: center; padding: 6px 0 0; }
body > .ts-search-result-container .view-all-wrapper a {
display: inline-block; padding: 10px 18px; border: 1px solid #7fb857; border-radius: 6px;
color: #9ad072 !important; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none !important;
}
body > .ts-search-result-container .view-all-wrapper a:hover { background: #7fb857; color: #12170f !important; }
body > .ts-search-result-container > p:first-child:last-child { color: #b9c7b4; }
/* 21. Kasse (Fluid Checkout) im CI — über die Farbvariablen des Plugins, kein Eingriff in dessen Vorlagen */
body.woocommerce-checkout {
--fluidcheckout--color--white: #12170f;
--fluidcheckout--color--lighter-grey: #171d13;
--fluidcheckout--color--light-grey: #27322a;
--fluidcheckout--color--grey: #8ea189;
--fluidcheckout--color--dark-grey: #c5cbbb;
--fluidcheckout--color--darker-grey: #e9ece3;
--fluidcheckout--color--black: #f4f7f0;
--fluidcheckout--color--success: #7fb857;
--fluidcheckout--border-color: rgba(127, 184, 87, 0.35);
--fluidcheckout--section--border-radius: 12px;
--fluidcheckout--section--border-color: rgba(127, 184, 87, 0.35);
--fluidcheckout--section--border-width: 1px;
--fluidcheckout--section--highlighted-background-color: #171d13;
--fluidcheckout--button--primary--background-color: var(--cf-gelb);
--fluidcheckout--button--primary--border-color: var(--cf-gelb);
--fluidcheckout--button--primary--text-color: #0d1108;
--fluidcheckout--button--primary--background-color--hover: #0d1108;
--fluidcheckout--button--primary--border-color--hover: var(--cf-gelb);
--fluidcheckout--button--primary--text-color--hover: var(--cf-gelb);
--fluidcheckout--button--border-radius: 6px;
--fluidcheckout--button--font-weight: 700;
--fluidcheckout--field--border-color: rgba(127, 184, 87, 0.45);
--fluidcheckout--field--text-color: #f4f7f0;
--fluidcheckout--field--border-radius: 6px;
--fluidcheckout--option-box--background-color: #171d13;
--fluidcheckout--option-box--background-color--hover: rgba(127, 184, 87, 0.08);
--fluidcheckout--option-box--background-color--checked: rgba(127, 184, 87, 0.14);
--fluidcheckout--option-box--border-color: rgba(127, 184, 87, 0.35);
--fluidcheckout--option-box--label-border-color: rgba(127, 184, 87, 0.35);
--fluidcheckout--option-box--label-border-color--checked: #7fb857;
--fluidcheckout--option-box--radio-color: #8ea189;
--fluidcheckout--option-box--radio-color--checked: #7fb857;
--fluidcheckout--option-box--radio-icon-color--checked: #12170f;
--fluidcheckout--option-box--label-color--checked: #f4f7f0;
--fluidcheckout--checkout-progress--background-color: rgba(18, 23, 15, 0.96);
--fluidcheckout--checkout-progress--bar-color: #27322a;
--fluidcheckout--checkout-progress--bar-color--complete: #7fb857;
--fluidcheckout--checkout-progress--bar-color--current: #b9ea8f;
--fluidcheckout--checkout-progress--step-count--text-color: #e9ece3;
padding-bottom: 60px;
}
body.woocommerce-checkout .fc-checkout-header { background: rgba(18, 23, 15, 0.6); border-bottom: 1px solid rgba(127, 184, 87, 0.3); }
body.woocommerce-checkout .fc-checkout-header .custom-logo { max-height: 44px; width: auto; }
body.woocommerce-checkout .fc-checkout-header .fc-checkout__cart-link { color: #9ad072; }
body.woocommerce-checkout .fc-step,
/* Eintrag 71: Kasse freundlicher - grünes Glas wie die Kästen links (vorher #12170f) */
body.woocommerce-checkout .fc-checkout-order-review { background: linear-gradient(180deg, rgba(46, 68, 36, 0.88) 0%, rgba(30, 45, 24, 0.9) 100%) !important; border: 1px solid rgba(127, 184, 87, 0.4) !important; border-radius: 14px !important; }
body.woocommerce-checkout .fc-step__substep { border-color: rgba(127, 184, 87, 0.2) !important; }
body.woocommerce-checkout h2.fc-step__title:not(.screen-reader-text),
body.woocommerce-checkout h3.fc-step__substep-title { color: #f4f7f0 !important; letter-spacing: 0.04em; }
body.woocommerce-checkout .fc-step__substep-text-content,
body.woocommerce-checkout .fc-step__substep-text-line { color: #e9ece3 !important; }
body.woocommerce-checkout .fc-step__substep-edit,
body.woocommerce-checkout .fc-checkout-order-review__edit-cart,
body.woocommerce-checkout .fc-expansible-form-section__toggle-plus { color: #9ad072 !important; }
/* Schritt-Fortschritt unten festgeklebt — getrennt vom Ernte-Meter in der Kopfzeile */
body.woocommerce-checkout .fc-progress-bar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 300 !important; margin: 0 !important; width: auto !important; transform: none !important; }
body.woocommerce-checkout .fc-progress-bar .fc-progress-bar__inner { position: static !important; transform: none !important; border-radius: 0 !important; border-top: 1px solid rgba(127, 184, 87, 0.4); padding: 8px 20px 10px !important; max-width: none !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.woocommerce-checkout .fc-progress-bar__steps br { display: none !important; } /* Absatz-Automatik setzte Umbrüche zwischen die Balkenstücke — der Balken blieb bei 1/3 stehen */
body.woocommerce-checkout .fc-progress-bar .fc-progress-bar__count { margin: 0 0 6px !important; font-size: 12px !important; letter-spacing: 0.06em; }
body.woocommerce-checkout .fc-progress-bar--bars .fc-progress-bar__steps,
body.woocommerce-checkout .fc-progress-bar--bars .fc-progress-bar__steps .fc-progress-bar__step { height: 6px !important; }
body.woocommerce-checkout .fc-progress-bar--bars .fc-progress-bar__steps { max-width: 720px; margin: 0 auto; }
/* Bestellübersicht kompakt: kleines Bild, Name, Preis — keine Lieferzeit- und Mengenzeilen, die stehen im Warenkorb */
body.woocommerce-checkout .fc-checkout-order-review .cart-item .wc-gzd-cart-info,
body.woocommerce-checkout .fc-checkout-order-review .cart-item .unit-price,
body.woocommerce-checkout .fc-checkout-order-review .cart-item .cart-item__price { display: none !important; }
body.woocommerce-checkout .fc-checkout-order-review .cart-item img { object-fit: cover; border-radius: 8px; } /* Eintrag 71: Größe kommt vom Plugin (56 px, füllt den Kasten) */
body.woocommerce-checkout .fc-checkout-order-review .cart-item .cart-item__name { font-size: 13.5px !important; font-weight: 600; line-height: 1.3; color: #f4f7f0; }
body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-total { font-size: 14px; font-weight: 700; color: #f4f7f0; }
body.woocommerce-checkout .fc-checkout-order-review .cart-item { padding: 10px 0 !important; border-color: rgba(255, 255, 255, 0.1) !important; }
body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot th,
body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot td { color: #f4f7f0 !important; }
body.woocommerce-checkout .fc-checkout-order-review .order-total th,
body.woocommerce-checkout .fc-checkout-order-review .order-total td { font-size: 17px; }
body.woocommerce-checkout .cfs-ernte-kasse { color: #9ad072; font-weight: 600; }
body.woocommerce-checkout .cf-vertrauen { background: #171d13; border-color: rgba(127, 184, 87, 0.35); }
/* Eintrag 69 (Nachtrag): Seitentitel aus Elementor-Überschriften (Warenkorb, Konto, Kasse) in derselben H1-Größe */
body.woocommerce-cart .elementor-widget-heading .elementor-heading-title,
body.woocommerce-account .elementor-widget-heading .elementor-heading-title,
body.woocommerce-checkout .elementor-widget-heading .elementor-heading-title {
font-size: 34px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
}
@media (max-width: 767px) {
body.woocommerce-cart .elementor-widget-heading .elementor-heading-title,
body.woocommerce-account .elementor-widget-heading .elementor-heading-title,
body.woocommerce-checkout .elementor-widget-heading .elementor-heading-title { font-size: 26px !important; }
}
/* ----- Eintrag 73: Preisblock der Karten, skaliert mit der Kartenbreite (Felix, 02.10. abends) -----
Ersetzt Eintrag 71. Gilt für jede Karte (Kategorien, Startseite, Suche, Konto).
- Preis und „inkl. MwSt. / zzgl. Versandkosten" werden über Container-Einheiten gemeinsam kleiner,
statt dass der Steuerblock umbricht oder nach oben rutscht.
- Der Steuerblock ist so hoch wie die Ziffern des Preises: oben bündig mit dem Preis, unten mit der Grundlinie.
- Streichpreis einheitlich UNTER dem Preis, „AB" klein davor, Preis bündig unter dem Namen.
- Bundle-Text („3–12 Sorten frei wählbar") klein und mitskalierend. */
/* Container am Preisblock, NICHT an der Karte: container-type auf der Karte ließ den Raster-Behälter schrumpfen
(Produkte liefen über den Footer, zweiter Scrollbalken - Fehler 02.10. abends) */
body .products section.product .product-wrapper .price { display: block !important; width: 100%; container-type: inline-size; }
body .products section.product .product-wrapper .price { min-height: 0 !important; }
body .products section.product .product-wrapper .price .cf-preis-zeile {
--cf-pg: clamp(15px, 9.2cqi, 22px);
display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important;
gap: 3px max(5px, 2.6cqi) !important; min-height: 0 !important; max-width: 100%;
}
body .products section.product .product-wrapper .price .cf-preis-betrag {
display: inline-grid !important; grid-template-columns: auto auto; justify-content: start; align-items: baseline;
gap: 1px 0 !important; flex: 0 0 auto; margin: 0 !important; padding: 0 !important;
}
body .products section.product .product-wrapper .price .cf-preis-ab { grid-column: 1; grid-row: 1; margin: 0 4px 0 0 !important; font-size: calc(var(--cf-pg) * 0.5) !important; line-height: 1 !important; }
body .products section.product .product-wrapper .price .cf-preis-betrag > ins,
body .products section.product .product-wrapper .price .cf-preis-betrag > .woocommerce-Price-amount { grid-column: 2; grid-row: 1; text-decoration: none; background: none; }
body .products section.product .product-wrapper .price .cf-preis-zeile .cf-preis-betrag > ins .amount,
body .products section.product .product-wrapper .price .cf-preis-zeile .cf-preis-betrag > .woocommerce-Price-amount {
font-size: var(--cf-pg) !important; line-height: 1 !important; height: auto !important; display: inline-block; white-space: nowrap;
}
body .products section.product .product-wrapper .price .cf-preis-betrag > del { grid-column: 2; grid-row: 2; line-height: 1.1 !important; opacity: 1; }
body .products section.product .product-wrapper .price .cf-preis-zeile .cf-preis-betrag > del .amount {
font-size: calc(var(--cf-pg) * 0.6) !important; line-height: 1.1 !important; height: auto !important; font-weight: 500 !important; color: var(--cf-schrift-matt, #b9c7b4) !important;
}
body .products section.product .product-wrapper .price .cf-preis-info {
display: flex !important; flex-direction: column !important; justify-content: space-between !important;
height: calc(var(--cf-pg) * 0.84) !important; min-height: 0 !important; margin-top: calc(var(--cf-pg) * 0.09) !important;
font-size: clamp(7.5px, 4.3cqi, 10px) !important; line-height: 1 !important; white-space: nowrap; flex: 0 1 auto; min-width: 0;
}
body .products section.product .product-wrapper .price .cf-preis-info > span { display: block; line-height: 1 !important; }
body .products section.product .product-wrapper .price .cf-preis-info > span:only-child { margin-top: auto; }
body .products section.product .product-wrapper .price .cfb-ab-preis {
grid-column: 1 / -1; grid-row: 1; font-size: clamp(11px, 5.6cqi, 14px) !important; line-height: 1.25 !important; font-weight: 700; white-space: normal; overflow-wrap: anywhere;
}
/* Eintrag 73: schmale Karten (unter 185 px) einheitlich - Preis oben, MwSt./Versand in EINER Zeile darunter */
@container (max-width: 165px) {
body .products section.product .product-wrapper .price .cf-preis-info {
flex: 0 0 100% !important; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important;
gap: 0 4px; height: auto !important; margin-top: 0 !important; font-size: 8.5px !important; line-height: 1.3 !important; white-space: normal;
}
body .products section.product .product-wrapper .price .cf-preis-info > span { line-height: 1.3 !important; white-space: nowrap; }
}
/* Eintrag 73: Kategorie-Kopf auf schmalen Bildschirmen wie am Rechner - das Theme machte daraus eine klebende Leiste
mit grünem Hintergrund, Rahmen und negativem Rand (Text lief an den Rand) */
.woocommerce .site-content .before-loop-wrapper,
.woocommerce .before-loop-wrapper {
position: relative !important; top: auto !important; background: transparent !important; border: 0 !important;
padding: 0 !important; margin: 0 0 8px !important; gap: 0 !important;
}
.woocommerce .before-loop-wrapper > .cf-archiv-titel,
.woocommerce .before-loop-wrapper > .cf-archiv-text, .woocommerce .before-loop-wrapper > * { width: 100% !important; text-align: left !important; }
/* ----- Eintrag 76: zehnte Sichtprüfung (Felix, 05.10.) -----
1. Karten: Name und Preis sitzen in jeder Karte einer Reihe auf derselben Höhe. Vorher wurde der Textblock an den
unteren Kartenrand gedrückt (margin-top:auto) - eine ausverkaufte Karte mit „Benachrichtige mich" schob Name und
Preis dadurch nach oben. Jetzt beginnt der Text direkt unter dem Bild, der Knopf kommt unten dazu. */
body .products section.product .product-wrapper .meta-wrapper { margin-top: 0 !important; }
/* 2. „Benachrichtige mich" in Karten (Kategorie, Startseite, Suche) immer einzeilig, Schrift schrumpft mit der Kartenbreite */
body .products section.product .cfla-kasten.cfla-kachel { container-type: inline-size; }
body .products section.product .cfla-kasten.cfla-kachel { margin-top: 8px !important; }
body .products section.product .cfla-kasten.cfla-kachel .cfla-knopf { padding: 5px 6px 6px !important; overflow: hidden; }
/* Zweizeilig, aber flach (Felix, 05.10.): groß „Benachrichtigen", klein „sobald wieder verfügbar" — zusammen ≈ 38 px hoch */
.cfla-knopf { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1 !important; }
.cfla-knopf .cfla-knopf-gross { font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.cfla-knopf .cfla-knopf-klein { font-size: 11px; font-weight: 600; letter-spacing: .01em; text-transform: none; white-space: nowrap; opacity: .85; }
body .products section.product .cfla-kasten.cfla-kachel .cfla-knopf .cfla-knopf-gross { font-size: clamp(10px, 6.4cqi, 14px); }
body .products section.product .cfla-kasten.cfla-kachel .cfla-knopf .cfla-knopf-klein { font-size: clamp(8.5px, 5.2cqi, 11px); }
/* Antwort nach dem Eintragen: Link „Mein Konto" im CI */
.cfla-antwort a { color: #9ad072 !important; text-decoration: underline !important; font-weight: 700; }
/* 3. Ein Knopftyp für den ganzen Shop (Felix, 05.10.): wie „Gutschein anwenden" - dunkle Fläche, grüner Rand,
abgerundete Ecken (6 px) statt halber Rundungen. Gilt für Elementor-Knöpfe (Startseite, Newsletter) und Lieferavis. */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button,
.elementor-widget-button .elementor-button { border-radius: 6px !important; }
.cf-footer-newsletter .elementor-field-type-submit .elementor-button,
.cf-footer-newsletter .elementor-button {
background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px !important;
text-transform: uppercase; letter-spacing: .04em !important; font-weight: 700 !important; font-size: 13px !important; box-shadow: none !important;
}
.cf-footer-newsletter .elementor-field-type-submit .elementor-button:hover,
.cf-footer-newsletter .elementor-button:hover { background: #7fb857 !important; color: #12170f !important; }
.cf-footer-newsletter .elementor-form .elementor-field-group .elementor-field-textual { border-radius: 6px !important; }
.cfla-knopf {
background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px !important;
text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.cfla-knopf:hover, .cfla-knopf:focus { background: #7fb857 !important; border-color: #7fb857 !important; color: #12170f !important; }
/* 4. Preis der Karten etwas größer: unten bündig mit „zzgl. Versandkosten" (oben war er es schon) */
body .products section.product .product-wrapper .price .cf-preis-zeile .cf-preis-betrag > ins .amount,
body .products section.product .product-wrapper .price .cf-preis-zeile .cf-preis-betrag > .woocommerce-Price-amount { font-size: calc(var(--cf-pg) * 1.14) !important; }
/* 4b. Nachgemessen über 6 Breiten (05.10. nachmittags, canvas-Tintenmaße): Preis saß 0,5–1,7 px zu tief und ragte unten 0–1 px
über „Versandkosten" hinaus. Textblock einen Hauch tiefer beginnen und flacher machen → oben und unten bündig. */
body .products section.product .product-wrapper .price .cf-preis-info { margin-top: calc(var(--cf-pg) * 0.145) !important; height: calc(var(--cf-pg) * 0.825) !important; }
/* 5. Handy-Menü: kein zweites Herz unter den Menüpunkten - es steht schon oben in der Kopfzeile */
#group-icon-header .group-button-header { display: none !important; }
/* 6. Newsletter im Footer ohne Einfahr-Animation (Elementor-Formular hatte „fadeInUp") — einfach da */
.cf-footer-newsletter .elementor-invisible { visibility: visible !important; }
.cf-footer-newsletter .animated, .cf-footer-newsletter .elementor-element[data-settings*="_animation"] { animation: none !important; opacity: 1 !important; transform: none !important; }
/* =========================================================================
Eintrag 81: Korrekturrunde 2 Umzug (13.10.2026)
Ausverkaufte Produktkarten so hoch wie ihre Nachbarn (Felix 11b: ausverkaufte bleiben in „Für dich“/Vorschlägen,
aber die Reihe bleibt gleich). Der Knopf „Benachrichtigen“ steht an der Stelle der Preiszeile und ist genau so hoch
wie sie (der Preis bleibt unsichtbar stehen und hält die Höhe). Erst nach dem Klick (Mailfeld, Rückmeldung) darf
die Karte wachsen. Gilt für alle Produktraster (Kategorien, Suche, Startseite, Für dich, Vorschläge).
========================================================================= */
body .products section.product.outofstock .meta-wrapper:has(> .cfla-kasten.cfla-kachel) { display: grid !important; grid-template-columns: minmax(0, 1fr); align-content: start; }
body .products section.product.outofstock .meta-wrapper:has(> .cfla-kasten.cfla-kachel) > .price { grid-row: 2; grid-column: 1; visibility: hidden; }
/* Größen-Container von Anfang an (hält die Höhe der Preiszeile; der Inhalt zählt nicht mit) */
body .products section.product.outofstock .meta-wrapper > .cfla-kasten.cfla-kachel { grid-row: 2; grid-column: 1; margin: 0 !important; align-self: stretch; container-type: size; }
body .products section.product.outofstock .meta-wrapper > .cfla-kasten.cfla-kachel:has(.cfla-feldzeile:not(.cfla-versteckt)),
body .products section.product.outofstock .meta-wrapper > .cfla-kasten.cfla-kachel:has(.cfla-antwort:not(:empty)) { container-type: inline-size; }
body .products section.product.outofstock .meta-wrapper > .cfla-kasten.cfla-kachel:not(:has(.cfla-feldzeile:not(.cfla-versteckt))):not(:has(.cfla-antwort:not(:empty))) .cfla-inhalt { height: 100%; }
body .products section.product.outofstock .meta-wrapper > .cfla-kasten.cfla-kachel:not(:has(.cfla-feldzeile:not(.cfla-versteckt))):not(:has(.cfla-antwort:not(:empty))) .cfla-inhalt > .cfla-knopf { height: 100%; min-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; }
/* Unter 30 px Höhe nur „Benachrichtigen“ – die Klasse setzt lieferavis.js (1.3.0) per ResizeObserver */
body .products section.product .cfla-kasten.cfla-kachel.cfla-kompakt .cfla-knopf .cfla-knopf-klein { display: none; }
/* Eingebetteter eigener Beitrag (WordPress-Einbettung, z. B. „Tresconol Erfahrungen“): functions.php Eintrag 81 entfernt das
weiße iframe; die Zitat-Karte nutzt die vorhandene blockquote-Gestaltung des Themes (keine eigene Regel). */
/* =========================================================================
Eintrag 82: Sichtbefunde vor dem Livegang (14.10.2026)
========================================================================= */
/* Felix 6: Knopf „Benachrichtigen“ in Produktkarten = derselbe Kartenknopf wie „Guthaben verschenken“: immer zweizeilig
(„sobald wieder verfügbar“), gleiche Schrift und Höhe an jeder Breite – nicht mehr auf die Höhe der Preiszeile gestaucht
(bei 1440 px war er 23 px hoch). Er steht weiter an der Preisstelle; alle Karten einer Reihe bleiben gleich hoch. */
body .products section.product.outofstock .meta-wrapper > .cfla-kasten.cfla-kachel { container-type: inline-size; }
body .products section.product.outofstock .meta-wrapper > .cfla-kasten.cfla-kachel:not(:has(.cfla-feldzeile:not(.cfla-versteckt))):not(:has(.cfla-antwort:not(:empty))) .cfla-inhalt { height: auto; }
body .products section.product.outofstock .meta-wrapper > .cfla-kasten.cfla-kachel:not(:has(.cfla-feldzeile:not(.cfla-versteckt))):not(:has(.cfla-antwort:not(:empty))) .cfla-inhalt > .cfla-knopf { height: auto; min-height: 0; padding: 3px 6px 4px !important; gap: 0; }
body .products section.product .cfla-kasten.cfla-kachel .cfla-knopf .cfla-knopf-gross,
body .products section.product .cfla-kasten.cfla-kachel.cfla-kompakt .cfla-knopf .cfla-knopf-gross { font-size: clamp(10px, 6cqi, 13px) !important; line-height: 1.1; }
body .products section.product .cfla-kasten.cfla-kachel .cfla-knopf .cfla-knopf-klein,
body .products section.product .cfla-kasten.cfla-kachel.cfla-kompakt .cfla-knopf .cfla-knopf-klein { display: block; font-size: clamp(8.5px, 4.8cqi, 10.5px) !important; line-height: 1.1; }
/* Felix 7: Auge im Passwortfeld (Anmelden, Registrieren, Kasse „Konto anlegen“, Passwort ändern/zurücksetzen) im CI –
vorher ein schwarzes Bild auf dem dunklen Feld. Dieselben WooCommerce-Symbole, jetzt als Maske in Gedämpft, Hover Grün. */
body .show-password-input::before { background-image: none !important; background-color: #b9c7b4 !important; -webkit-mask: url('data:image/svg+xml,') center / contain no-repeat; mask: url('data:image/svg+xml,') center / contain no-repeat; }
body .show-password-input.display-password::before { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); }
body .show-password-input:hover::before, body .show-password-input:focus-visible::before { background-color: #9ad072 !important; }
/* Felix 6/8: Knöpfe, die vom einen Knopftyp „Gutschein anwenden“ abwichen (Fläche #0d1108 statt #12170f, Schrift #7fb857 statt #9ad072,
„Mehr anzeigen“ durchsichtig, „Weitere Produkte laden“ in der Suche weiß ohne Rand), auf dessen Farben/Ecken/Hover gebracht – Größe bleibt:
Warenkorb „Dazulegen“ (Karten) + „Mehr anzeigen“, Konto „Anmelden“/„Registrieren“, leerer Warenkorb „Zurück zum Shop“, Kasse
„Weiter zum Versand/zur Zahlung“, „Weitere Produkte laden“, Warenkorb „Weiter zur Kasse“, Konto-Formulare („Änderungen speichern“ u. a.),
„Passwort zurücksetzen“. Kaufknöpfe (In den Warenkorb, Direkt kaufen, Jetzt kaufen) bleiben wie freigegeben. */
body :is(.cf-auffuellen__knopf, .cfs-mehr-zeile .cfs-mehr, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .return-to-shop .wc-backward, .fc-step__next-step, .ts-shop-load-more .load-more, .wc-proceed-to-checkout .checkout-button, .woocommerce-MyAccount-content .button, .woocommerce-ResetPassword .button, .not-found .button).button { background: #12170f !important; background-image: none !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px !important; box-shadow: none !important; text-shadow: none !important; }
body :is(.cf-auffuellen__knopf, .cfs-mehr-zeile .cfs-mehr, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .return-to-shop .wc-backward, .fc-step__next-step, .ts-shop-load-more .load-more, .wc-proceed-to-checkout .checkout-button, .woocommerce-MyAccount-content .button, .woocommerce-ResetPassword .button, .not-found .button).button:hover, body :is(.cf-auffuellen__knopf, .cfs-mehr-zeile .cfs-mehr, .woocommerce-form-login__submit, .woocommerce-form-register__submit, .return-to-shop .wc-backward, .fc-step__next-step, .ts-shop-load-more .load-more, .wc-proceed-to-checkout .checkout-button, .woocommerce-MyAccount-content .button, .woocommerce-ResetPassword .button, .not-found .button).button:focus-visible { background: #7fb857 !important; color: #12170f !important; }
/* Eintrag 82: 404-Seite (jetzt deutsch, functions.php) – Überschrift/Text nicht durch die Theme-Breite umbrechen, Knopf = CI-Knopf (Liste oben) */
.not-found { max-width: none !important; }
.not-found h1, .not-found p { max-width: none !important; text-wrap: balance; }
/* Felix 8: Produktseite am Handy – die Angaben-Spalte war durch die Regel „Abstand zwischen Bild und Angaben“ (57,3 % !important, ohne
Bildschirmgrenze) auch unter 768 px nur 57 % breit: Mengen-Kacheln gequetscht, „In den Warenkorb“ 47 px breit, Schrift lief heraus. */
@media (max-width: 767px) { .single-product .product-images-summary > .summary { width: 100% !important; } }
/* ----- Kartenknöpfe mobil: der EINE CI-Kartenknopf (Felix, 14.10.2026) -----
Unter 1280 px zeigt Ecomall in jeder Produktkarte einen Textknopf (In den Warenkorb /
Ausführung wählen / Weiterlesen). Er kam in Theme-Grün, und seine Beschriftung steckt
in einem Hinweisfähnchen (.button-tooltip), das die Fähnchen-Regel oben dunkel umrandet
-> zweiter, versetzter Rahmen im Knopf. Jetzt: dunkle Fläche, grüner Rand, grüne Schrift,
6 px Ecken, einzeilig; grün gefüllt nur unter dem Mauszeiger bzw. kurz beim Antippen. */
@media (max-width: 1279px) {
/* Schriftgröße folgt der Knopfbreite (Container-Abfrage): die längste Beschriftung passt einzeilig */
.products .product .product-group-button-meta .loop-add-to-cart {
width: 100%;
container-type: inline-size;
}
.products .product .product-group-button-meta .loop-add-to-cart a.button {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 34px;
box-sizing: border-box;
padding: 5px 6px 6px !important;
background: #12170f !important;
border: 1px solid #7fb857 !important;
border-radius: 6px !important;
box-shadow: none !important;
color: #9ad072 !important;
font-size: 12px !important;
font-size: clamp(9px, calc((100cqi - 14px) / 12.6), 12.5px) !important;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.15s, color 0.15s;
}
.products .product .product-group-button-meta .loop-add-to-cart a.button.product_type_cf_bundle {
font-size: clamp(9px, calc((100cqi - 14px) / 14.8), 12.5px) !important; /* „Paket zusammenstellen" ist die längste */
}
.products .product .product-group-button-meta .loop-add-to-cart a.button .button-tooltip {
display: inline !important;
position: static !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
color: inherit !important;
font: inherit !important;
letter-spacing: inherit;
transform: none !important;
}
.products .product .product-group-button-meta .loop-add-to-cart a.button .button-tooltip::before,
.products .product .product-group-button-meta .loop-add-to-cart a.button .button-tooltip::after {
display: none !important;
}
/* Ausverkauft: wie am Desktop nur „Benachrichtigen“, kein zusätzliches „Weiterlesen“ darunter */
.products .product .meta-wrapper:has(> .cfla-kasten) > .product-group-button-meta .loop-add-to-cart {
display: none !important;
}
.products .product .product-group-button-meta .loop-add-to-cart a.button:active {
background: #7fb857 !important;
color: #12170f !important;
}
}
@media (max-width: 1279px) and (hover: hover) {
.products .product .product-group-button-meta .loop-add-to-cart a.button:hover {
background: #7fb857 !important;
color: #12170f !important;
}
}
/* Sehr schmale Karten (drei nebeneinander am Handy): normale Groß-/Kleinschreibung, ohne Sperrung, schmalerer Innenabstand */
@container (max-width: 140px) {
.products .product .product-group-button-meta .loop-add-to-cart a.button {
padding-left: 3px !important;
padding-right: 3px !important;
letter-spacing: 0;
text-transform: none;
font-size: clamp(8.5px, calc((100cqi - 8px) / 9.4), 12px) !important;
}
}
/* Produktseite am Handy: „In den Warenkorb“ einzeilig statt „In den / Warenkorb“ (Felix, 14.10.2026) */
@media (max-width: 600px) {
body.single-product .summary form.cart button.single_add_to_cart_button {
gap: 8px;
padding: 0 12px !important;
white-space: nowrap;
font-size: clamp(12px, 3.6vw, 14px) !important;
}
}
/* =====================================================================
Eintrag 84: Block B (Felix, 14.10.2026)
===================================================================== */
/* B3: Handy-Burgermenü — Reiterzeile im CI (keine weiße Fläche), Schließen-Kreuz gut sichtbar */
#group-icon-header .tab-mobile-menu { background: #12170f !important; border-bottom: 1px solid rgba(127,184,87,.3); }
#group-icon-header .tab-mobile-menu li { background: #12170f !important; color: rgba(255,255,255,.75) !important; border-right: 1px solid rgba(127,184,87,.22) !important; border-bottom: 2px solid transparent; box-sizing: border-box; transition: color .15s, background .15s; }
#group-icon-header .tab-mobile-menu li:last-child { border-right: 0 !important; }
#group-icon-header .tab-mobile-menu li.active { background: rgba(127,184,87,.14) !important; color: #9ad072 !important; border-bottom-color: #7fb857; }
#group-icon-header .tab-mobile-menu li#vertical-menu > span { font-weight: 800; letter-spacing: .02em; }
#group-icon-header .tab-mobile-menu li.close { color: rgba(255,255,255,.97) !important; background: #12170f !important; cursor: pointer; opacity: 1 !important; }
#group-icon-header .tab-mobile-menu li.close::after { color: rgba(255,255,255,.97) !important; opacity: 1 !important; font-size: 1.5rem !important; }
#group-icon-header .tab-mobile-menu li.close:hover, #group-icon-header .tab-mobile-menu li.close:active { color: #9ad072 !important; background: rgba(127,184,87,.14) !important; }
#group-icon-header .tab-mobile-menu li.close:hover::after { color: #9ad072 !important; }
/* B9: Megamenü „Beliebt“ — Spalte breiter, Produktbilder größer und oben bündig mit dem Namen, Namen ohne Umbruch */
@media (min-width: 992px) {
header.ts-header .header-bottom .cf-mega.cf-mega-mit-produkten { grid-template-columns: minmax(0, 1fr) 470px; }
header.ts-header .header-bottom .cf-karte-preis .cf-preis-zeile { flex-wrap: nowrap !important; align-items: center !important; }
header.ts-header .header-bottom .cf-karte-preis .cf-preis-info { flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 1px !important; font-size: 10px !important; line-height: 1.15 !important; }
header.ts-header .header-bottom .cf-karte { grid-template-columns: 76px minmax(0, 1fr) !important; align-items: start !important; column-gap: 14px !important; padding: 6px !important; }
header.ts-header .header-bottom .cf-karte-bild { width: 76px !important; height: 76px !important; align-self: start !important; margin-top: 0 !important; }
header.ts-header .header-bottom .cf-karte { grid-template-rows: auto 1fr !important; align-content: start !important; }
header.ts-header .header-bottom .cf-karte-name { font-size: 13.5px !important; line-height: 1.3 !important; margin-top: -3px; align-self: start !important; }
header.ts-header .header-bottom .cf-karte-preis { align-self: start !important; margin-top: 4px; }
header.ts-header .header-bottom .cf-karte-preis .cf-preis-betrag .amount { font-size: 17px !important; }
header.ts-header .header-bottom .cf-mega-karten { gap: 12px !important; }
}
/* B10: Gratisversand-Box beim Überfahren — auf großen Bildschirmen größer und mit größerer Schrift */
.cf-versand-badge__liste li::before { top: calc(.775em - 2px); } /* Punkt mittig zur ersten Zeile, bei jeder Schriftgröße */
@media (min-width: 1200px) {
.cf-versand-badge__box { width: 400px; padding: 18px 22px 16px; font-size: 14px; line-height: 1.55; background: #12170f; }
.cf-versand-badge__box::before { background: #12170f; }
.cf-versand-badge__titel { font-size: 13px; }
.cf-versand-badge__liste li { margin-bottom: 8px; }
.cf-versand-badge__fuss { font-size: 13px !important; line-height: 1.5 !important; }
.cf-versand-badge__mehr { font-size: 13.5px; }
}
@media (min-width: 1600px) {
.cf-versand-badge__box { width: 440px; font-size: 15px; }
.cf-versand-badge__fuss { font-size: 13.5px !important; }
}
/* B11: Footer — Siegel auf heller, kaum durchsichtiger Fläche; neue Spalte „Mein Konto“ (Shortcode cfs_footer_konto) */
.cf-footer-siegel img { background: rgba(255, 255, 255, 0.92) !important; padding: 6px !important; }
.cf-footer-main { grid-template-columns: 1.15fr 1.1fr 0.8fr 1.1fr 1.25fr; gap: 36px; }
@media (max-width: 1199px) { .cf-footer-main { grid-template-columns: 1fr 1fr 1fr; } .cf-footer-main > .cf-footer-marke { grid-column: 1 / -1; } }
@media (max-width: 767px) { .cf-footer-main { grid-template-columns: 1fr 1fr; } .cf-footer-main > .cf-footer-newsletter { grid-column: 1 / -1; } }
@media (max-width: 600px) { .cf-footer-main { grid-template-columns: 1fr; } }
/* B12: Kategoriebilder im Megamenü — eigene Zeile über den Spalten, gleiche Spaltenbreite */
.cf-mega-bilderzeile { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; grid-template-columns: subgrid; gap: inherit; margin-bottom: 2px; }
.cf-mega-bilderzeile .cf-mega-bild { margin-bottom: 0; border: 1px solid rgba(127,184,87,.3); transition: border-color .15s; }
.cf-mega-bilderzeile .cf-mega-bild:hover { border-color: #9ad072; }
.cf-mega-bilderzeile .cf-mega-bild:hover img { transform: scale(1.04); }
@media (min-width: 992px) {
header.ts-header .header-bottom nav:not(.vertical-menu) > ul.menu > li.ts-megamenu:has(.cf-mega-mit-produkten) > ul.sub-menu { width: min(1180px, calc(100vw - 48px)) !important; }
}
/* ===== 14.10.2026 Reparatur Kasse (A) ===== */
/* A-a: Anmelde-Overlay – gleichmäßiger Innenabstand, Rundung wie die Kassen-Karten, dezenter CI-Rand, dunkler Schatten
(Fluid Checkout: 20/50/50 px, eckig, im Dunkelmodus hellgrauer Schatten) */
body.has-flyout [data-flyout][data-flyout-modal].is-activated .fc-login-form__inner[data-flyout-content] {
padding: 24px 24px 32px !important;
box-shadow: none !important;
}
@media (min-width: 550px) {
body.has-flyout [data-flyout][data-flyout-modal].is-activated .fc-login-form__inner[data-flyout-content] {
padding: 32px 36px 36px !important;
border: 1px solid rgba(127, 184, 87, 0.45) !important;
border-radius: 14px !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
}
/* A-a: Handy – Kassen-Karten nicht mehr randlos (Fluid Checkout zieht sie mit −20 px an den Rand), bündig mit den Vertrauens-Boxen */
@media (max-width: 749px) {
body.woocommerce-checkout .fc-wrapper .fc-checkout-steps { margin-left: 0 !important; margin-right: 0 !important; }
}
/* A-b: Kundendaten nach dem Anmelden lesbar (Fluid Checkout: 13 px) */
body.woocommerce-checkout .fc-wrapper .fc-step__substep-text { font-size: 15px !important; line-height: 1.5 !important; }
/* A-a: Handy – „Jetzt anmelden" bleibt zusammen (die Karten sind jetzt 40 px schmaler) */
body.woocommerce-checkout .fc-contact-login__action { white-space: nowrap; }
/* =====================================================================
Eintrag 86 (15.10.2026, Felix-Liste I/J/G): Child-Runde 3
===================================================================== */
/* J7/J9/I9: Bestelldetails überall im CI – Danke-Seite (order-received), Bezahlseite (order-pay), Konto → Bestellung.
Vorher: auf Kassen-Seiten #eee-Fläche mit hellem Text (unlesbar), im Konto weit auseinander gezogene Zeilen.
Jetzt: dunkler CI-Container mit Transparenz, Werte rechts, feine Linien nur zwischen den Gruppen
(Kopf | Produkte | Summen | Gesamt + Steuer). Die Zeile „Gesamt“ erkennt das CSS an der Marke cf-sum--order_total
(functions.php, Filter woocommerce_get_order_item_totals). */
body.woocommerce-order-received table.woocommerce-table--order-details,
body.woocommerce-view-order table.woocommerce-table--order-details,
body.woocommerce-order-pay form#order_review > table.shop_table {
width: 100%;
border-collapse: separate !important;
border-spacing: 0 !important;
background: rgba(18, 23, 15, 0.78) !important;
border: 1px solid rgba(127, 184, 87, 0.3) !important;
border-radius: 12px !important;
overflow: hidden;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.97) !important;
font-size: 15px !important;
line-height: 1.45 !important;
margin: 0 0 24px !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) :is(th, td) {
background: transparent !important;
color: rgba(255, 255, 255, 0.97) !important;
border: 0 !important;
padding: 7px 22px !important;
font-size: 15px !important;
line-height: 1.45 !important;
vertical-align: top;
text-align: left;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) :is(th, td):last-child {
text-align: right !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) .amount { white-space: nowrap; }
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) { table-layout: auto; }
/* Kopfzeile */
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) thead th {
padding-top: 14px !important;
padding-bottom: 12px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #b9c7b4 !important;
border-bottom: 1px solid rgba(127, 184, 87, 0.22) !important;
}
/* Produkte: je Produkt ein Block, dazwischen eine feine Linie */
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody tr + tr td {
border-top: 1px solid rgba(127, 184, 87, 0.12) !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td.product-name,
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td.product-name a {
font-weight: 600 !important;
color: rgba(255, 255, 255, 0.97) !important;
white-space: normal;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td.product-name a:hover { color: #9ad072 !important; }
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td .product-quantity {
margin-left: 5px;
font-weight: 700;
color: #9ad072 !important;
white-space: nowrap;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td :is(.wc-gzd-cart-info, .wc-item-meta, .wc-item-meta li, .wc-item-meta p, .unit-price) {
display: block;
margin: 3px 0 0 !important;
padding: 0 !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: #b9c7b4 !important;
list-style: none;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td :is(.wc-gzd-cart-info, .unit-price) * { font-size: inherit !important; color: inherit !important; font-weight: inherit !important; }
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td > p:empty { display: none; }
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td.product-quantity { white-space: nowrap; }
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tbody td:last-child > .amount { font-weight: 700; }
/* Summen: Linie über dem ersten Summenposten, Posten selbst ohne Linien */
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tfoot tr:first-child :is(th, td) {
border-top: 1px solid rgba(127, 184, 87, 0.22) !important;
padding-top: 14px !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tfoot th {
font-weight: 400 !important;
color: #dbe8d6 !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tfoot tr:last-child :is(th, td) { padding-bottom: 16px !important; }
/* Gesamt + die Steuerzeilen darunter gehören zusammen: Linie darüber, Gesamt fett und größer, Steuer gedämpft */
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tfoot tr:has(.cf-sum--order_total):not(:first-child) :is(th, td) {
border-top: 1px solid rgba(127, 184, 87, 0.22) !important;
padding-top: 12px !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tfoot tr:has(.cf-sum--order_total) :is(th, td) {
font-size: 17px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.97) !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tfoot tr:has(.cf-sum--order_total) td .amount { color: #9ad072 !important; }
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) tfoot tr:has(.cf-sum--order_total) ~ tr :is(th, td) {
font-size: 13px !important;
font-weight: 400 !important;
color: #b9c7b4 !important;
padding-top: 2px !important;
}
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) .cf-sum { display: none !important; }
@media (max-width: 600px) {
:is(body.woocommerce-order-received table.woocommerce-table--order-details, body.woocommerce-view-order table.woocommerce-table--order-details, body.woocommerce-order-pay form#order_review > table.shop_table) :is(th, td) { padding-left: 14px !important; padding-right: 14px !important; }
}
/* I9/J9: Rechnungs-/Lieferadresse gut lesbar – derselbe Container, weiße Schrift, normaler Zeilenabstand */
body:is(.woocommerce-order-received, .woocommerce-view-order) .woocommerce-customer-details address {
font-style: normal;
color: rgba(255, 255, 255, 0.95) !important;
font-size: 15px !important;
line-height: 1.6 !important;
background: rgba(18, 23, 15, 0.78);
border: 1px solid rgba(127, 184, 87, 0.3) !important;
border-radius: 12px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
padding: 16px 22px !important;
margin: 0 0 24px;
}
body:is(.woocommerce-order-received, .woocommerce-view-order) .woocommerce-customer-details address p {
color: rgba(255, 255, 255, 0.95) !important;
line-height: 1.6 !important;
margin: 8px 0 0 !important;
font-size: 15px !important;
}
body:is(.woocommerce-order-received, .woocommerce-view-order) .woocommerce-customer-details address p:empty { display: none; }
/* J7: Bezahlseite (order-pay, z. B. nach „Abbrechen“ bei Google Pay) – Zahlarten als CI-Auswahlkästen wie in der Kasse */
body.woocommerce-order-pay #payment { background: transparent !important; padding: 0 !important; border: 0 !important; }
body.woocommerce-order-pay #payment ul.payment_methods {
list-style: none;
margin: 0 0 18px !important;
padding: 0 !important;
display: grid;
gap: 10px;
border: 0 !important;
}
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
align-items: center;
column-gap: 12px;
margin: 0 !important;
padding: 14px 18px !important;
background: rgba(18, 23, 15, 0.78) !important;
border: 1px solid rgba(127, 184, 87, 0.3);
border-radius: 10px;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
cursor: pointer;
transition: border-color .15s;
}
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method:has(> input:checked) { border-color: #7fb857; box-shadow: inset 0 0 0 1px #7fb857; }
@media (hover: hover) { body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method:hover { border-color: #7fb857; } }
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > input[type="radio"] {
margin: 0 !important;
width: 18px;
height: 18px;
-webkit-appearance: none;
appearance: none;
border: 1.5px solid #8ea189;
border-radius: 50%;
background: #12170f;
display: grid;
place-content: center;
cursor: pointer;
}
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #7fb857;
transform: scale(0);
transition: transform .12s;
}
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked { border-color: #7fb857; }
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked::before { transform: scale(1); }
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:focus-visible { outline: 2px solid #9ad072; outline-offset: 2px; }
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > label {
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.97) !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.4;
cursor: pointer;
}
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > label img { max-height: 22px; width: auto; margin: 0 0 0 auto !important; float: none !important; }
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > .payment_box {
grid-column: 2;
margin: 8px 0 0 !important;
padding: 0 !important;
background: transparent !important;
color: #b9c7b4 !important;
font-size: 13.5px !important;
line-height: 1.5;
}
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > .payment_box::before { display: none !important; }
body.woocommerce-order-pay #payment ul.payment_methods > li.wc_payment_method > .payment_box p { margin: 0 !important; color: inherit !important; font-size: inherit !important; }
body.woocommerce-order-pay #payment ul.payment_methods > li > .woocommerce-info { margin: 0 !important; }
/* J5: Zahlarten-Symbole (Kasse + Bezahlseite) – schlichte CI-Linien wie auf der Seite „Zahlungsmethoden“ */
.wc_payment_methods .cf-zahl-symbol { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; color: #9ad072; line-height: 0; }
.wc_payment_methods .cf-zahl-symbol svg { width: 24px; height: 24px; display: block; }
.wc_payment_methods li:has(> input:checked) .cf-zahl-symbol { color: #b5e08f; }
body.woocommerce-checkout .wc_payment_methods .payment-method__label-icon:has(.cf-zahl-symbol) { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
/* I12/J4: Eingabefelder mit logischen Breiten (ab 768 px; am Handy volle Breite)
Konto → Rechnungs-/Lieferadresse: Raster aus 6 Spalten, höchstens 656 px breit. Vor-/Nachname, Anrede, Land,
Ort, Bundesland je 3 Spalten (≈ 320 px), PLZ 2 Spalten (≈ 208 px; steht sie vor dem Ort, rückt der Ort daneben),
Straße, Adresszusatz, Firma, E-Mail und Telefon über die volle Formularbreite. */
@media (min-width: 768px) {
body.woocommerce-edit-address .woocommerce-address-fields__field-wrapper {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr));
column-gap: 16px;
max-width: 656px;
}
body.woocommerce-edit-address div.woocommerce form .woocommerce-address-fields__field-wrapper > .form-row { width: auto !important; float: none !important; }
body.woocommerce-edit-address .woocommerce-address-fields__field-wrapper > * {
grid-column: 1 / -1;
width: auto !important;
max-width: none !important;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
clear: none !important;
}
body.woocommerce-edit-address .woocommerce-address-fields__field-wrapper > :is([id$="_title_field"], [id$="_first_name_field"], [id$="_country_field"], [id$="_city_field"], [id$="_vat_id_field"]) { grid-column: 1 / span 3; }
body.woocommerce-edit-address .woocommerce-address-fields__field-wrapper > :is([id$="_last_name_field"], [id$="_state_field"]) { grid-column: 4 / span 3; }
body.woocommerce-edit-address .woocommerce-address-fields__field-wrapper > [id$="_postcode_field"] { grid-column: 1 / span 2; }
body.woocommerce-edit-address .woocommerce-address-fields__field-wrapper > [id$="_postcode_field"] + [id$="_city_field"] { grid-column: 3 / span 4; }
body.woocommerce-edit-address .woocommerce-address-fields__field-wrapper > [id$="_postcode_field"] + [id$="_city_field"] + [id$="_state_field"] { grid-column: 1 / span 3; }
body.woocommerce-edit-address .woocommerce-address-fields__field-wrapper :is(input.input-text, select, .ts-wrapper) { width: 100% !important; max-width: none !important; }
/* Konto → Meine Daten: Formular höchstens 656 px, Vor-/Nachname nebeneinander, Passwortfelder mittel (≈ 420 px) */
body.woocommerce-edit-account form.woocommerce-EditAccountForm { display: block !important; width: 100%; max-width: 656px; }
body.woocommerce-edit-account form.woocommerce-EditAccountForm > .form-row-first,
body.woocommerce-edit-account form.woocommerce-EditAccountForm > .form-row-last { width: calc(50% - 8px) !important; }
body.woocommerce-edit-account form.woocommerce-EditAccountForm fieldset .form-row { max-width: 420px; }
}
/* J4: Kasse – „Anrede“ so breit wie „Vorname“ (eigene Zeile), „Telefon“ so breit wie „Straße“ */
body.woocommerce-checkout form.checkout :is(.woocommerce-shipping-fields__field-wrapper, .woocommerce-billing-fields__field-wrapper) > .form-row[id$="_title_field"] {
width: calc(50% - 8px) !important;
margin-right: 50% !important;
}
body.woocommerce-checkout form.checkout :is(.woocommerce-shipping-fields__field-wrapper, .woocommerce-billing-fields__field-wrapper) > :is(.form-row[id$="_phone_field"], .fc-expansible-form-section:has([id$="_phone_field"])) {
width: calc(70% - 8px) !important;
margin-right: 30% !important;
}
@media (max-width: 480px) {
body.woocommerce-checkout form.checkout :is(.woocommerce-shipping-fields__field-wrapper, .woocommerce-billing-fields__field-wrapper) > :is(.form-row[id$="_phone_field"], .fc-expansible-form-section:has([id$="_phone_field"])) { width: calc(60% - 8px) !important; margin-right: 40% !important; }
}
/* J4/I12: Auswahlfelder (Fluid Checkout „Tom Select“) wie die Eingabefelder. Vorher stand beim Antippen in der
Anrede ein schmales Kästchen „Keine“ neben einem eigenen Eingabefeld; im Konto waren die Felder tiefschwarz und eckig. */
body:is(.woocommerce-checkout, .woocommerce-account) .ts-wrapper .ts-control > input,
body:is(.woocommerce-checkout, .woocommerce-account) .ts-wrapper .ts-control > input:focus,
body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce form .ts-wrapper .ts-control > input[type],
body:is(.woocommerce-checkout, .woocommerce-account) .woocommerce form .ts-wrapper .ts-control > input[type]:focus {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
min-width: 0 !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
}
body.woocommerce-account .ts-wrapper .ts-control {
background: #12170f !important;
border: 2px solid #27412f !important;
border-radius: 8px !important;
min-height: 46px;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.97) !important;
padding-left: 14px !important;
}
body.woocommerce-account .ts-wrapper.focus .ts-control,
body.woocommerce-account .ts-wrapper .ts-control:focus-within { border-color: #7fb857 !important; }
body:is(.woocommerce-checkout, .woocommerce-account) .ts-dropdown {
background: #12170f !important;
border: 1px solid rgba(127, 184, 87, 0.45) !important;
border-radius: 8px !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55) !important;
color: rgba(255, 255, 255, 0.97) !important;
overflow: hidden;
}
body:is(.woocommerce-checkout, .woocommerce-account) .ts-dropdown .option { color: rgba(255, 255, 255, 0.97) !important; background: transparent !important; }
body:is(.woocommerce-checkout, .woocommerce-account) .ts-dropdown .option.active,
body:is(.woocommerce-checkout, .woocommerce-account) .ts-dropdown .option:hover { background: rgba(127, 184, 87, 0.22) !important; color: rgba(255, 255, 255, 0.97) !important; }
body:is(.woocommerce-checkout, .woocommerce-account) .ts-dropdown .option.selected { color: #9ad072 !important; }
/* I12: USt-IdNr. erscheint unter dem Firmennamen – nur wenn „Firmenname hinzufügen“ aufgeklappt ist oder schon eine Nummer eingetragen ist */
.fc-expansible-form-section:has(.fc-expansible-form-section__content--billing_company.is-collapsed) ~ .cf-feld-ustid:has(input:placeholder-shown) { display: none !important; }
/* J11: Kasse – „Du willst an eine Postfiliale oder Packstation liefern?“ mit Info-Knopf und aufklappbarem CI-Kasten */
body.woocommerce-checkout form.checkout details.cf-packstation { width: 100% !important; margin: 2px 0 14px !important; padding: 0 !important; }
details.cf-packstation > summary {
display: block;
list-style: none;
text-wrap: pretty;
cursor: pointer;
color: #9ad072;
font-size: 14px;
line-height: 1.4;
padding: 2px 0;
}
details.cf-packstation > summary::-webkit-details-marker { display: none; }
details.cf-packstation > summary::marker { content: ""; }
details.cf-packstation .cf-packstation__info {
display: inline-flex;
margin-left: 7px;
vertical-align: -3px;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 18px;
height: 18px;
border: 1.5px solid #7fb857;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
font-style: normal;
line-height: 1;
color: #9ad072;
transition: background .15s, color .15s;
}
@media (hover: hover) {
details.cf-packstation > summary:hover { color: #b5e08f; }
details.cf-packstation > summary:hover .cf-packstation__info { background: #7fb857; color: #12170f; }
}
details.cf-packstation[open] .cf-packstation__info { background: #7fb857; color: #12170f; }
details.cf-packstation > summary:focus-visible { outline: 2px solid #9ad072; outline-offset: 3px; border-radius: 4px; }
details.cf-packstation .cf-packstation__kasten {
margin-top: 8px;
padding: 12px 16px;
background: rgba(18, 23, 15, 0.85);
border: 1px solid rgba(127, 184, 87, 0.45);
border-radius: 8px;
color: rgba(255, 255, 255, 0.95);
font-size: 13.5px;
line-height: 1.5;
}
details.cf-packstation .cf-packstation__kasten ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
details.cf-packstation .cf-packstation__kasten li { position: relative; margin: 0 0 4px !important; padding: 0 0 0 14px !important; list-style: none !important; text-wrap: pretty; }
details.cf-packstation .cf-packstation__kasten li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #9ad072; }
details.cf-packstation .cf-packstation__kasten strong { color: rgba(255, 255, 255, 0.97); font-weight: 700; }
details.cf-packstation .cf-packstation__hinweis { margin: 8px 0 0 !important; padding-top: 8px; border-top: 1px solid rgba(127, 184, 87, 0.2); color: #e0a326 !important; font-size: 13px !important; font-weight: 600 !important; }
/* I7: Live-Suche (Aufklappfläche im Kopf) – Karten exakt wie in der Kategorie
Seller setzt dort 6 Spalten ab 1400 px und 13,5-px-Namen; die Kategorie hat bei denselben Breiten 5 Spalten und
die Theme-Schrift (1,06 rem, ab ≤ 1400 px 1 rem). Bei 5 Spalten nur volle Reihen (10 von 12 Treffern). */
@media (min-width: 1200px) {
body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten { --ts-columns: 5 !important; }
body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten .products > .product:nth-child(n+11) { display: none !important; }
}
body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten .products { gap: 20px !important; }
@media (min-width: 1600px) { body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten .products { gap: 30px !important; } }
@media (max-width: 1279px) { body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten .products { gap: 10px !important; } }
body > .ts-search-result-container .cfs-suchkarten .product-name,
body > .ts-search-result-container .cfs-suchkarten .product-name a { font-size: 1.06rem !important; line-height: 1.3 !important; }
@media (max-width: 1400px) {
body > .ts-search-result-container .cfs-suchkarten .product-name,
body > .ts-search-result-container .cfs-suchkarten .product-name a { font-size: 1rem !important; }
}
/* I7: „Weitere Produkte einblenden“ – die Unterstreich-Linien des Themes (a::before/::after) machten den doppelten Strich unten */
.ts-search-result-container .view-all-wrapper.cfs-mehr-treffer > a::before,
.ts-search-result-container .view-all-wrapper.cfs-mehr-treffer > a::after { display: none !important; content: none !important; }
/* I7: „Ausverkauft“ im Badge-Stil des Shops statt Rot (überall: Kategorie, Suche, Live-Suche, Produktseite) –
wie die Seller-Badges (11 px, fett, Großbuchstaben, 6 px Ecken, plastisch), neutral hellgrau („nicht verfügbar“).
Ersetzt das Rot aus Eintrag 52 (#cf3a2a); die Stelle auf dem Bild bleibt, damit es nicht mit den Badges unten links kollidiert. */
:root:root { --ts-soldout-label-bg: #dfe4d9; --ts-soldout-label-color: #2c3427; }
body .product_list_widget .product-label .out-of-stock,
body .woocommerce .product .product-label .out-of-stock,
body .products .product .product-label .out-of-stock {
background: linear-gradient(180deg, rgba(240, 243, 236, 0.92), rgba(206, 212, 200, 0.92)) !important;
color: #2c3427 !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase;
line-height: 1 !important;
padding: 6px 10px !important;
border-radius: 6px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
body .woocommerce .product .product-label .out-of-stock span { color: inherit !important; }
body .woocommerce div.product .stock.out-of-stock {
background: linear-gradient(180deg, rgba(240, 243, 236, 0.92), rgba(206, 212, 200, 0.92)) !important;
color: #2c3427 !important;
border-radius: 6px !important;
font-size: 12px !important;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 7px 12px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
/* G2: Produktseite „Tags:“ – Tags auf derselben Grundlinie wie das Wort, als Link erkennbar (CI-Hellgrün, Hover unterstrichen) */
body.single-product .meta-content .tags-link { align-items: baseline !important; column-gap: 8px; flex-wrap: wrap; }
body.single-product .meta-content .tags-link > span,
body.single-product .meta-content .tags-link .tag-links { line-height: 1.5 !important; }
body.single-product .meta-content .tags-link .tag-links { color: #b9c7b4 !important; }
body.single-product .meta-content .tags-link .tag-links a {
display: inline !important;
line-height: inherit !important;
color: #9ad072 !important;
text-decoration: none !important;
transition: color .15s;
}
body.single-product .meta-content .tags-link .tag-links a:hover,
body.single-product .meta-content .tags-link .tag-links a:focus-visible { color: #b5e08f !important; text-decoration: underline !important; text-underline-offset: 3px; }
/* G4: Footer – Links hellgrün (#9ad072 wie Knopftext), Überschriften und Fließtext weiß: Link ≠ Text */
.footer-container .cf-footer,
.footer-container .cf-footer p,
.footer-container .cf-footer .cf-footer-konto-text,
.footer-container .cf-footer .cf-footer-nl-hinweis,
.footer-container .cf-footer .cf-footer-bottom { color: rgba(255, 255, 255, 0.92) !important; }
.footer-container .cf-footer h5,
.footer-container .cf-footer h5 a { color: rgba(255, 255, 255, 0.97) !important; }
.footer-container .cf-footer h5 a:hover { color: #9ad072 !important; }
.footer-container .cf-footer ul a,
.footer-container .cf-footer .cf-footer-bottom a { color: #9ad072 !important; }
.footer-container .cf-footer ul a:hover,
.footer-container .cf-footer .cf-footer-bottom a:hover,
.footer-container .cf-footer ul a:focus-visible { color: #b5e08f !important; text-decoration: underline !important; text-underline-offset: 3px; }
/* G5: Footer-Siegel – helle Fläche zu ~85 % deckend (vorher 92 %) */
.cf-footer-siegel img { background: rgba(255, 255, 255, 0.85) !important; }
/* I6: Burger-Feld „Alle Kategorien“ – die Liste endet über dem unteren Fensterrand und scrollt (Höhe setzt
cannafree-megamenue.js beim Öffnen als --cf-vm-max). Damit die Aufklappflächen daneben beim Scrollen nicht
abgeschnitten werden, beziehen sie sich auf die Navigation statt auf die Liste (Liste position: static);
sie stehen 11 px tiefer (Innenabstand der Navigation) und sind genau so hoch wie der sichtbare Teil der Liste. */
header.ts-header .vertical-menu-wrapper nav.vertical-menu > ul.menu {
position: static !important;
max-height: var(--cf-vm-max, calc(100vh - 280px));
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #27412f transparent;
}
header.ts-header .vertical-menu-wrapper nav.vertical-menu > ul.menu::-webkit-scrollbar { width: 6px; }
header.ts-header .vertical-menu-wrapper nav.vertical-menu > ul.menu::-webkit-scrollbar-thumb { background: #27412f; border-radius: 3px; }
header.ts-header .vertical-menu-wrapper nav.vertical-menu > ul.menu > li > ul.sub-menu {
top: 11px !important;
bottom: 0 !important;
left: 100% !important;
height: auto !important;
min-height: 0 !important;
}
/* I4: Aufklappflächen im Burger-Feld mit Produkten alle gleich breit (wie „Wirkstoffe“) – vorher bekamen Punkte mit
2 Spalten (Extrakte & DABs, Seeds, Stecklinge) nur 600 px, davon 470 px für „Beliebt“ (Eintrag 84) → Unterkategorien
in zwei extrem schmalen Spalten. Die Theme-Höchstbreite (70vw bzw. 100vw − 417 px) hält sie im Fenster. */
header.ts-header nav.vertical-menu > ul.menu > li.ts-megamenu:has(.cf-mega-mit-produkten) > ul.sub-menu { width: 1036px !important; }
header.ts-header nav.vertical-menu .cf-mega-spalten .cf-mega-titel { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* I3: ausgeblendete Karten wirklich ausblenden – eine spätere Regel gibt .cf-karte display: grid, das hob das hidden-Attribut auf (angeschnittene Karte unten) */
.cf-mega-karten .cf-karte[hidden] { display: none !important; }
/* I12: Platzhalter der USt-IdNr. gedämpft (sonst wirkt er wie ein eingetragener Wert) */
.cf-feld-ustid input::placeholder { color: #8ea189 !important; -webkit-text-fill-color: #8ea189 !important; opacity: 1; }
/* I9/J9: Brief-/Telefon-Symbol vor E-Mail und Telefon in der Adress-Box im CI-Hellgrün (Theme-Schriftsymbol tb-icon) */
body:is(.woocommerce-order-received, .woocommerce-view-order, .woocommerce-order-pay) .woocommerce-customer-details :is(.woocommerce-customer-details--email, .woocommerce-customer-details--phone)::before { color: #9ad072 !important; background: none !important; }