/* cannafree Seller Dashboard — Frontend 0.7.0. CI: Schwarz #12170f, Grün #7fb857, Amber #e0a326. * Badges liegen UNTEN LINKS auf dem Produktbild (Felix, 30.09.), leicht transparent, plastisch. */ /* ---- Badge auf dem Bild ---- */ .cfs-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; line-height: 1; padding: 6px 10px; border-radius: 6px; white-space: nowrap; color: #12170f; background: linear-gradient(180deg, rgba(160,214,110,.92), rgba(112,170,74,.92)); box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .cfs-badge.cfs-amber { background: linear-gradient(180deg, rgba(243,190,74,.94), rgba(214,150,32,.94)); } .cfs-badge.cfs-grau { background: linear-gradient(180deg, rgba(240,243,236,.92), rgba(206,212,200,.92)); color: #2c3427; } .cfs-badge.cfs-herz { background: linear-gradient(180deg, rgba(40,48,34,.92), rgba(18,23,15,.92)); color: #f4f7f0; } .cfs-badge-kachel, .cfs-badge-pdp { position: absolute !important; left: 10px !important; bottom: 10px !important; top: auto !important; right: auto !important; z-index: 3; pointer-events: none; margin: 0 !important; } .cfs-badge-pdp { left: 14px !important; bottom: 14px !important; font-size: 12px; padding: 7px 12px; } .product-wrapper .thumbnail-wrapper, .thumbnail-wrapper > a { position: relative; } .woocommerce-product-gallery { position: relative; } /* Badge unter dem Titel (Rang) und als zweite Zeile in Karten: im Textfluss, nie absolut */ .cfs-slot-titel { margin: 6px 0 10px; } .cfs-badge-titel, .cfs-badge-zeile { position: static; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 5px 10px; } .woocommerce div.product .summary > .cfs-slot.cfs-slot { padding: 0; margin: 0 0 8px; } .cfs-badge-inline { position: static; margin-left: 6px; font-size: 10px; padding: 3px 6px; text-transform: none; } /* ---- Zeilen auf der Produktseite ---- */ .cfs-zeilen { display: flex; flex-direction: column; gap: 5px; } .cfs-zeile { margin: 0 !important; font-size: 13.5px; line-height: 1.4; display: flex; align-items: center; gap: 8px; } .cfs-zeile[hidden] { display: none; } .cfs-zeile.cfs-kg::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7fb857; flex: none; } .cfs-slot-lieferzeit .cfs-zeile { font-weight: 600; font-size: 14px; } /* ---- LED: grün, blinkt bis zur Grenzzeit ---- */ .cfs-led, .cfs-led-kopf { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, #b9ea8f, #7fb857 60%, #4f8a2e); box-shadow: 0 0 0 3px rgba(127,184,87,.22), 0 0 8px rgba(127,184,87,.7); } .cfs-hv-an .cfs-led, .cfs-led-kopf.cfs-hv-an { animation: cfs-blink 1.3s ease-in-out infinite; } @keyframes cfs-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(127,184,87,.22), 0 0 10px rgba(127,184,87,.9); } 50% { opacity: .35; box-shadow: 0 0 0 2px rgba(127,184,87,.1), 0 0 2px rgba(127,184,87,.3); } } @media (prefers-reduced-motion: reduce) { .cfs-hv-an .cfs-led, .cfs-led-kopf.cfs-hv-an { animation: none; } } .cfs-led-kopf { position: absolute; margin: 0; top: -2px; right: -4px; z-index: 5; width: 10px; height: 10px; } .shopping-cart-wrapper { position: relative; } /* ---- Ernte-Meter (Leiste: dick, plastisch, Verlauf dunkel → hell mit dem Fortschritt) ---- */ .cfs-ernte { margin: 0 0 18px; } .cfs-ernte-kopf { display: flex; align-items: center; gap: 10px; } .cfs-ernte-text { margin: 0; font-size: 16px; font-weight: 700; } .cfs-ernte-pflanze { display: none !important; } .cfs-ernte-leiste { position: relative; height: 14px; border-radius: 8px; margin: 16px 36px 44px; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); box-shadow: inset 0 2px 4px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.06); } .cfs-ernte-fuell { position: absolute; left: 0; top: 0; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #3f7a24 0%, #6aa646 55%, #a5dc74 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), 0 0 10px rgba(127,184,87,.45); transition: width .8s cubic-bezier(.2,.7,.3,1); } .cfs-ernte-fuell::after { content: ""; position: absolute; right: -2px; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #dbffb8, #9ad072 55%, rgba(127,184,87,.2) 75%); box-shadow: 0 0 12px rgba(165,220,116,.9); } @media (prefers-reduced-motion: reduce) { .cfs-ernte-fuell { transition: none; } } .cfs-ernte-punkt { position: absolute; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: #1a2116; border: 2px solid rgba(127,184,87,.6); transform: translateX(-50%); box-sizing: border-box; box-shadow: 0 1px 3px rgba(0,0,0,.5); } .cfs-ernte-punkt.ist { background: #7fb857; border-color: #b9ea8f; } .cfs-ernte-punkt.naechster { box-shadow: 0 0 0 4px rgba(127,184,87,.25), 0 1px 3px rgba(0,0,0,.5); } .cfs-ernte-label { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font-style: normal; white-space: nowrap; text-align: center; font-size: 13px; line-height: 1.2; } .cfs-ernte-betrag { font-weight: 700; opacity: .95; } .cfs-ernte-name { font-weight: 600; opacity: .85; } .cfs-ernte-punkt.ist .cfs-ernte-name { color: #9ad072; opacity: 1; } .cfs-haken { color: #7fb857; font-weight: 700; margin-left: 3px; } .cfs-ernte-punkt.cfs-neu { animation: cfs-pop .9s cubic-bezier(.3,1.6,.5,1) 1; } @keyframes cfs-pop { 0% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.7); } 100% { transform: translateX(-50%) scale(1); } } .cfs-jubel { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); font-size: 26px; line-height: 0; animation: cfs-jubel 2.25s ease-out 1 forwards; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); z-index: 5; } .cfs-jubel svg { display: block; } @keyframes cfs-jubel { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -4px) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -28px) scale(1); } } .cfs-ernte-minicart, .cfs-ernte-kasse { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 8px 0; } .cfs-ernte-freunde { font-size: 13.5px; margin: 8px 0 0; } @media (max-width: 991px) { .cfs-ernte-betrag, .cfs-ernte-trenner { display: none; } .cfs-ernte-label { font-size: 12px; } } @media (max-width: 600px) { .cfs-ernte-label { font-size: 11px; } } /* ---- Vorschlagskarten (Auffüll-Karten des Child-Themes, größer, Name klickbar, Badge als zweite Zeile) ---- */ .cf-auffuellen__posten.cfs-karte { grid-template-columns: 80px minmax(0, 1fr) auto auto !important; gap: 14px !important; align-items: center !important; padding: 6px 0 !important; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__bild img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; display: block; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__name { font-size: 15px; line-height: 1.35; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; white-space: normal; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__name a { color: inherit; text-decoration: none; font-weight: 600; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__name a:hover { color: #7fb857; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__preis { font-size: 15px; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__knopf.button { padding: 9px 16px !important; font-size: 13px !important; } .cf-auffuellen__preis s { opacity: .6; margin-right: 4px; } .cfs-block { margin: 0 0 18px !important; padding: 14px 16px !important; border-top: 0 !important; border-radius: 10px; } .cfs-block.cfs-gratis { border: 1px dashed #7fb857; } .cfs-block.cfs-empfehlungen { border: 1px solid transparent; } .cfs-block-titel { font-size: 16px !important; font-weight: 700 !important; color: inherit !important; margin: 0 0 12px !important; } .cfs-gratis-wechsel { font-size: 13px; margin-left: 8px; } .woocommerce-cart-form th { font-size: 16px !important; font-weight: 700; white-space: nowrap; } .woocommerce-cart-form th.product-subtotal, .woocommerce-cart-form td.product-subtotal { min-width: 130px; padding-right: 14px !important; text-align: right; } /* Warenkorb-Summe: Lastwagen und Zusatzzeile weg, Haken nur hinter der Lieferung */ .cart_totals .shipping-calculator-button::before, .cart_totals .shipping-calculator-button::after, .cart_totals .woocommerce-shipping-destination { display: none !important; } .cart_totals .woocommerce-shipping-methods label .cfs-haken { margin-left: 6px; } /* ---- Warenkorb: Überlagerung hellgrün und transparent, Lade-Symbol oben; Tabellenkopf lesbar ---- */ body.woocommerce-cart div.blockUI.blockOverlay, body.woocommerce-checkout div.blockUI.blockOverlay { background: rgba(127,184,87,.14) !important; opacity: 1 !important; } body.woocommerce-cart div.blockUI.blockOverlay::before, body.woocommerce-checkout div.blockUI.blockOverlay::before { top: 70px !important; bottom: auto !important; height: 40px !important; margin-top: 0 !important; } .woocommerce-cart-form { margin-top: 10px; } .cart_totals .cfs-haken { margin-left: 6px; } /* ---- Kundenkonto ---- */ .cfs-konto-hero { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 10px; background: #12170f; color: #f4f7f0; margin: 0 0 18px; } .cfs-konto-gross { font-size: 34px; font-weight: 700; line-height: 1.1; color: #7fb857; } .cfs-konto-klein { font-size: 13px; opacity: .85; } .cfs-konto-hero a { color: #7fb857; } .cfs-stufe { padding: 14px 16px; border: 1px solid rgba(127,184,87,.5); border-radius: 10px; margin: 0 0 18px; } .cfs-stufe-kopf { display: flex; gap: 12px; align-items: center; } .cfs-stufe-icon { font-size: 28px; line-height: 1; } .cfs-stufe-balken { height: 8px; border-radius: 4px; background: rgba(127,184,87,.18); margin: 12px 0 6px; overflow: hidden; } .cfs-stufe-balken span { display: block; height: 100%; background: #7fb857; border-radius: 4px; } .cfs-stufe-chip { display: inline-block; padding: 2px 8px; border-radius: 3px; border: 1px solid rgba(127,184,87,.5); font-size: 12px; margin: 2px 4px 2px 0; opacity: .7; } .cfs-stufe-chip.ist { background: #7fb857; color: #12170f; opacity: 1; font-weight: 600; } .cfs-link { margin: 0 0 18px; } .cfs-link-zeile { display: flex; gap: 8px; margin: 6px 0; } .cfs-link-zeile input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 13px; } .cfs-graph { margin: 0 0 18px; } .cfs-graph svg { display: block; max-width: 420px; margin-top: 6px; } .cfs-konto-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0 18px; } .cfs-konto-tabelle th, .cfs-konto-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(127,184,87,.3); } .cfs-konto-tabelle tr.st-verbraucht, .cfs-konto-tabelle tr.st-eingeloest, .cfs-konto-tabelle tr.st-abgelaufen, .cfs-konto-tabelle tr.st-verfallen { opacity: .55; } .cfs-bald { font-size: 11px; color: #e0a326; font-weight: 700; } .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; } .cfs-zuhause-gruss { font-size: 22px; font-weight: 700; margin: 0 0 4px; } .cfs-zuhause-unter { margin: 0 0 18px; opacity: .8; } .cfs-zuhause { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 22px; } .cfs-kachel { display: block; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(127,184,87,.35); background: rgba(127,184,87,.07); text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; } a.cfs-kachel:hover { transform: translateY(-2px); border-color: #7fb857; } .cfs-kachel-titel { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; } .cfs-kachel-wert { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; color: #7fb857; } .cfs-kachel-text { display: block; font-size: 13px; margin-top: 6px; opacity: .85; } .cfs-kachel-dunkel { background: #12170f; color: #f4f7f0; border-color: #12170f; } .cfs-kachel-dunkel .cfs-kachel-titel { opacity: .75; } /* ---- GiroCode: scharf und mit Bankdaten daneben ---- */ .cf-girocode__bild { image-rendering: pixelated; image-rendering: crisp-edges; width: auto !important; height: auto !important; max-width: 220px; } .cfs-bank { margin: 8px 0 0; padding: 10px 12px; border: 1px solid rgba(127,184,87,.35); border-radius: 8px; font-size: 13.5px; line-height: 1.6; } .cfs-bank b { display: inline-block; min-width: 130px; opacity: .75; font-weight: 600; } .cfs-bank code { font-family: ui-monospace, monospace; font-size: 13px; } /* ---- Rabatt-Label des Themes und Bundle-Band im selben Stil wie unsere Badges ---- */ .product-label.on-thumbnail { inset: auto 10px 10px auto !important; top: auto !important; left: auto !important; z-index: 3; } .product-label > span.onsale, .product-label > span.new, .woocommerce .woocommerce-product-gallery .product-label > span:not(.out-of-stock) { min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; line-height: 1 !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .03em; text-transform: uppercase; padding: 6px 10px !important; color: #12170f !important; background: linear-gradient(180deg, rgba(243,190,74,.94), rgba(214,150,32,.94)) !important; box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .product-label > span.onsale > span { display: inline; font-size: inherit !important; line-height: inherit !important; } .cfb-karte-band, li.product.cfb-produkt .cfb-karte-band { position: absolute !important; top: auto !important; bottom: 10px !important; left: 10px !important; margin: 0 !important; z-index: 3; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .03em; text-transform: uppercase; line-height: 1 !important; padding: 6px 10px !important; border-radius: 6px !important; color: #12170f !important; background: linear-gradient(180deg, rgba(160,214,110,.92), rgba(112,170,74,.92)) !important; box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12); backdrop-filter: blur(4px); } .woocommerce div.product .summary .onsale.percent { position: static !important; display: inline-block !important; margin: 0 0 8px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; line-height: 1 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .03em; text-transform: uppercase; padding: 6px 10px !important; border-radius: 6px !important; color: #12170f !important; background: linear-gradient(180deg, rgba(243,190,74,.94), rgba(214,150,32,.94)) !important; box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.45); text-align: left; } .woocommerce div.product .summary .onsale.percent > span { font-size: inherit !important; line-height: inherit !important; } /* „inkl. MwSt. zzgl. Versand" direkt am Preis */ .woocommerce div.product .summary > .legal-price-info.legal-price-info { margin: -10px 0 10px !important; padding: 0 !important; } .woocommerce div.product .summary > .legal-price-info p { margin: 0 !important; font-size: 12.5px; opacity: .8; } .cfs-kachel, .cfs-kachel * { text-decoration: none !important; } .cfs-kachel { background: #141b11; border-color: rgba(127,184,87,.4); color: #f4f7f0; } .cfs-kachel-titel { color: #c5cbbb; opacity: 1; } .cfs-kachel-text { color: #e9ece3; opacity: 1; } .cfs-kachel-wert { color: #b9ea8f; } .cfs-kachel-dunkel { background: #0d1109; } .cfs-zuhause-gruss { font-size: 24px; } .cfs-meilenstein { margin: 0 0 20px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(127,184,87,.45); background: linear-gradient(135deg, rgba(127,184,87,.14), rgba(127,184,87,.04)); } .cfs-meilenstein-zeile { margin: 0 0 10px; font-size: 16px; color: #f4f7f0; } .cfs-meilenstein-balken { height: 10px; border-radius: 6px; background: rgba(0,0,0,.35); box-shadow: inset 0 2px 4px rgba(0,0,0,.45); overflow: hidden; } .cfs-meilenstein-balken span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3f7a24, #6aa646 55%, #a5dc74); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); } .cfs-meilenstein-klein { margin: 8px 0 0; font-size: 13px; color: #c5cbbb; } /* ===================================================================== 0.5.0 (01.10.2026, dritte Sichtprüfung) — alles im CI: Schwarz #12170f, Grün #7fb857/#9ad072, Gelb var(--cf-gelb), Schrift rgba(255,255,255,.97) ===================================================================== */ /* ---- Kopfleiste: dicker Balken, die Beschriftung steht IM Balken, jeweils vor dem Punkt, den man erreicht ---- */ .cfs-kopfleiste { background: rgba(18,23,15,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,.97); border-top: 1px solid rgba(127,184,87,.25); border-bottom: 1px solid rgba(127,184,87,.25); } .cfs-kopfleiste[hidden] { display: none; } .cfs-kopfleiste-innen { max-width: 1360px; margin: 0 auto; padding: 7px 20px; } .cfs-kopfleiste .cfs-ernte-leiste { margin: 0 44px 0 24px; height: 28px; border-radius: 14px; } .cfs-kopfleiste .cfs-ernte-fuell { border-radius: 14px; } .cfs-kopfleiste .cfs-ernte-fuell::after { width: 32px; height: 32px; top: -2px; right: -5px; } .cfs-kopfleiste .cfs-ernte-punkt { width: 20px; height: 20px; top: 4px; } .cfs-kopfleiste .cfs-ernte-label { top: 50%; left: auto; right: calc(100% + 7px); transform: translateY(-50%); font-size: 12.5px; line-height: 1; letter-spacing: .01em; /* lesbar auf dunkler Spur, auf grüner Füllung und unter der leuchtenden Spitze: heller Text mit dunklem Schein */ color: #fff; text-shadow: 0 0 2px #0a0f07, 0 0 4px #0a0f07, 0 1px 2px rgba(10,15,7,.95), 0 0 8px rgba(10,15,7,.6); } .cfs-kopfleiste .cfs-ernte-betrag, .cfs-kopfleiste .cfs-ernte-name { opacity: 1; } .cfs-kopfleiste .cfs-ernte-punkt.ist .cfs-ernte-name { color: #fff; } .cfs-kopfleiste .cfs-haken { color: #dfffc2; margin: 0 2px 0 0; } .cfs-kopfleiste .cfs-jubel { top: -34px; } @media (max-width: 1199px) { .cfs-kopfleiste .cfs-ernte-label { font-size: 12px; } } .cfs-ernte-name-kurz { display: none; } /* Schmal (Felix, 02.10.): im Balken nur „ab 69 €", der Vorteil erscheint beim Antippen; erreichte Punkte tragen den Haken im Kreis */ @media (max-width: 1199px) { .cfs-kopfleiste .cfs-ernte-name, .cfs-kopfleiste .cfs-ernte-name-kurz, .cfs-kopfleiste .cfs-haken { display: none !important; } .cfs-kopfleiste .cfs-ernte-trenner, .cfs-kopfleiste .cfs-ernte-betrag { display: inline !important; } .cfs-kopfleiste .cfs-ernte-trenner { font-weight: 500; } .cfs-kopfleiste .cfs-ernte-punkt { cursor: pointer; } .cfs-kopfleiste .cfs-ernte-punkt::before { content: ""; position: absolute; inset: -12px; } .cfs-kopfleiste .cfs-ernte-punkt.ist::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #12170f; } } @media (max-width: 767px) { .cfs-kopfleiste .cfs-ernte-leiste { margin: 0 30px 0 10px; height: 24px; } .cfs-kopfleiste .cfs-ernte-punkt { width: 18px; height: 18px; top: 3px; } .cfs-kopfleiste .cfs-ernte-label { font-size: 11px; } } /* Handy: nur der nächste Meilenstein ist beschriftet — mehr passt nicht in den Balken; erreichte Punkte zeigen den Haken */ @media (max-width: 600px) { .cfs-kopfleiste .cfs-ernte-label { font-size: 10.5px; right: calc(100% + 5px); } } @media (max-width: 420px) { .cfs-kopfleiste .cfs-ernte-label { font-size: 9.5px; right: calc(100% + 3px); letter-spacing: 0; } .cfs-kopfleiste .cfs-ernte-leiste { margin: 0 22px 0 6px; } } .cfs-kopfleiste-innen { position: relative; } .cfs-kl-tipp { position: absolute; top: calc(100% + 2px); z-index: 50; min-width: 150px; max-width: 260px; padding: 10px 14px; border-radius: 10px; background: linear-gradient(180deg, #1f2b19 0%, #141c10 100%); border: 1px solid rgba(127,184,87,.6); box-shadow: 0 10px 24px rgba(0,0,0,.5); color: rgba(255,255,255,.97); font-size: 13px; line-height: 1.35; animation: cfs-tipp .2s ease-out 1; } .cfs-kl-tipp::before { content: ""; position: absolute; top: -6px; left: calc(var(--pfeil, 50%) - 6px); width: 10px; height: 10px; background: #1f2b19; border-left: 1px solid rgba(127,184,87,.6); border-top: 1px solid rgba(127,184,87,.6); transform: rotate(45deg); } .cfs-kl-tipp b { display: block; font-weight: 700; } .cfs-kl-tipp span { display: block; color: #b9c7b4; font-size: 12px; margin-top: 2px; } .cfs-kl-tipp.cfs-kl-ist span { color: #9ad072; } @keyframes cfs-tipp { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .woocommerce-MyAccount-navigation-link--dashboard a { --cfs-icon: url("data:image/svg+xml;utf8,"); } .woocommerce-MyAccount-navigation-link--orders a { --cfs-icon: url("data:image/svg+xml;utf8,"); } .woocommerce-MyAccount-navigation-link--guthaben a, .woocommerce-MyAccount-navigation-link--meine-gutscheine a { --cfs-icon: url("data:image/svg+xml;utf8,"); } .woocommerce-MyAccount-navigation-link--benachrichtigungen a { --cfs-icon: url("data:image/svg+xml;utf8,"); } .woocommerce-MyAccount-navigation-link--edit-address a { --cfs-icon: url("data:image/svg+xml;utf8,"); } .woocommerce-MyAccount-navigation-link--edit-account a { --cfs-icon: url("data:image/svg+xml;utf8,"); } .woocommerce-MyAccount-navigation-link--customer-logout a { --cfs-icon: url("data:image/svg+xml;utf8,"); } /* ---- Warenkorb: Überschriften einheitlich, Karten-Text oben bündig, Tabelle wie die Karten eingerückt, Bilder rund, alles oben ausgerichtet ---- */ .cfs-block-titel, .woocommerce-cart-form th { color: rgba(255,255,255,.97) !important; font-size: 16px !important; font-weight: 700 !important; } .cf-auffuellen__posten.cfs-karte { align-items: start !important; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__name { padding-top: 1px; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__preis { padding-top: 3px; } .woocommerce-cart-form table.shop_table th.product-thumbnail, .woocommerce-cart-form table.shop_table td.product-thumbnail { padding-left: 16px !important; width: 126px; } .woocommerce-cart-form table.shop_table td.product-thumbnail img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; display: block; } .woocommerce-cart-form table.shop_table td.product-thumbnail a { display: block; } .woocommerce-cart-form table.shop_table tbody td { vertical-align: top !important; padding-top: 16px !important; padding-bottom: 16px !important; } .woocommerce-cart-form table.shop_table td.product-quantity .quantity { margin-top: 0; } .woocommerce-cart-form table.shop_table td.product-remove { padding-top: 18px !important; padding-right: 0 !important; } /* Name wie im Theme kräftig, Lieferzeit und Mengenangabe klein und zurückhaltend (wie die Hinweise im Theme, #b9c7b4) */ .woocommerce-cart-form td.product-name > a { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.97); text-decoration: none; display: inline-block; margin: 0 0 6px; line-height: 1.3; } .woocommerce-cart-form td.product-name > a:hover { color: #9ad072; } .woocommerce-cart-form td.product-name p { margin: 0; } .woocommerce-cart-form td.product-name .wc-gzd-cart-info, .woocommerce-cart-form td.product-price .wc-gzd-cart-info { display: block; font-size: 12.5px; font-weight: 400; color: #b9c7b4 !important; margin: 0 0 2px; line-height: 1.4; } .woocommerce-cart-form td.product-name .wc-gzd-cart-info *, .woocommerce-cart-form td.product-price .wc-gzd-cart-info * { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; } .woocommerce-cart-form td.product-price > .amount, .woocommerce-cart-form td.product-subtotal > .amount { display: block; font-size: 16px; font-weight: 700; margin-top: 2px; line-height: 1.3; } .woocommerce-cart-form td.product-price .unit-price { margin-top: 4px; } /* Kreuzchen: mittig im Kreis, beim Hover im CI-Grün */ .woocommerce-cart-form td.product-remove { width: 40px; text-align: right; } body.woocommerce-cart table.shop_table td.product-remove a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; line-height: 1 !important; font-size: 0 !important; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; opacity: .6; color: rgba(255,255,255,.97) !important; background: transparent !important; transition: opacity .15s, border-color .15s, background .15s; } body.woocommerce-cart table.shop_table td.product-remove a.remove::before { font-size: 12px !important; line-height: 1 !important; margin: 0 !important; width: auto !important; height: auto !important; display: block; } body.woocommerce-cart table.shop_table td.product-remove a.remove:hover { opacity: 1; border-color: #7fb857; color: #9ad072 !important; background: rgba(127,184,87,.14) !important; } /* Gutscheinzeile: Leeren links (unauffällig), Gutschein rechts — Eingabefeld und Knopf wie die Shop-Knöpfe; „Warenkorb aktualisieren" ist überflüssig (Menge rechnet sofort) */ .woocommerce-cart table.cart td.actions { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 6px 16px !important; } .woocommerce-cart table.cart td.actions > p, .woocommerce-cart table.cart td.actions > br { display: none; } .woocommerce-cart table.cart td.actions .coupon { display: flex !important; gap: 8px; align-items: stretch; order: 2; margin: 0 0 0 auto; position: static !important; text-align: initial; } .woocommerce-cart table.cart td.actions .coupon .input-text { box-sizing: border-box; width: 240px !important; min-width: 0; height: 44px; margin: 0; padding: 0 14px !important; float: none !important; background: #12170f !important; border: 1px solid rgba(127,184,87,.55) !important; border-radius: 6px; color: rgba(255,255,255,.97) !important; font-size: 14px; box-shadow: none !important; } .woocommerce-cart table.cart td.actions .coupon .input-text:focus { border-color: #7fb857 !important; outline: none; } .woocommerce-cart table.cart td.actions .coupon .button { position: static !important; box-sizing: border-box; height: 44px; margin: 0; padding: 0 18px !important; line-height: 42px !important; background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 13px; white-space: nowrap; } .woocommerce-cart table.cart td.actions .coupon .button:hover { background: #7fb857 !important; color: #12170f !important; } .woocommerce-cart table.cart td.actions .coupon .coupon-error-notice { width: 100%; } .woocommerce-cart table.cart td.actions .button[name="update_cart"] { display: none !important; } .woocommerce-cart table.cart td.actions .empty-cart-button { order: 1; margin: 0; background: transparent !important; border: 1px solid rgba(255,255,255,.18) !important; color: #b9c7b4 !important; font-size: 12px !important; padding: 8px 14px !important; border-radius: 6px; text-transform: none; letter-spacing: 0; } .woocommerce-cart table.cart td.actions .empty-cart-button:hover { border-color: #7fb857 !important; color: #9ad072 !important; } .woocommerce-cart table.cart td.actions input[type="hidden"] { display: none; } @media (max-width: 600px) { .woocommerce-cart table.cart td.actions .coupon { width: 100%; margin: 0; } .woocommerce-cart table.cart td.actions .coupon .input-text { width: auto !important; flex: 1; } } /* Warenkorb-Summe: keine Leerzeile unter „Adresse ändern" */ .cart_totals .woocommerce-shipping-totals td > p, .cart_totals .woocommerce-shipping-totals form.woocommerce-shipping-calculator, .cart_totals ul#shipping_method { margin: 0 !important; } .cart_totals .woocommerce-shipping-totals td > p:empty, .cart_totals .woocommerce-shipping-totals td > br { display: none !important; } .cart_totals .woocommerce-shipping-totals .shipping-calculator-button { display: inline-block; margin: 4px 0 0; } /* „Mehr anzeigen" unter den Vorschlägen */ .cfs-mehr-zeile { margin: 10px 0 0 !important; text-align: center; } .cfs-mehr.button { background: transparent !important; border: 1px solid rgba(127,184,87,.55) !important; color: #9ad072 !important; border-radius: 6px; font-size: 13px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 9px 18px !important; } .cfs-mehr.button:hover { background: #7fb857 !important; color: #12170f !important; } .cfs-mehr.button[disabled] { opacity: .5; } /* Hinweis „… wurde in den Warenkorb gelegt": kurze Einblendung oben rechts im CI, verschwindet nach 3 s (seller.js) */ body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message, body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-info { position: fixed; top: 110px; right: 24px; z-index: 9999; max-width: 380px; margin: 0 !important; padding: 14px 18px !important; display: block; background: #12170f !important; color: rgba(255,255,255,.97) !important; border: 1px solid #7fb857 !important; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); font-size: 14px; line-height: 1.45; transition: opacity .4s ease, transform .4s ease; } body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::before, body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info::before, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner > svg { display: none !important; } body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner .button { display: none !important; } body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner__content { padding: 0; color: inherit; } body.woocommerce-cart .woocommerce-notices-wrapper .cfs-toast-weg { opacity: 0; transform: translateY(-8px); } @media (max-width: 600px) { body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner { left: 12px; right: 12px; top: 80px; max-width: none; } } /* ===================================================================== 0.6.0 (01.10.2026, vierte Sichtprüfung) ===================================================================== */ /* ---- 2. Kopfzeile: Versand-Kasten zweizeilig in der Zeile mit Logo, Suche, Konto, Warenkorb; Suche schrumpft, nie Overlay ---- */ body header.ts-header .header-middle .header-right { flex-wrap: nowrap !important; align-items: center !important; } .cf-versand-badge--kopfzeile { display: inline-flex !important; align-items: center !important; flex: none; } .cf-versand-badge--kopfzeile .cf-versand-badge__link { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 5px 10px !important; border: 1px solid rgba(127,184,87,.55) !important; border-radius: 8px !important; background: rgba(127,184,87,.08) !important; } .cf-versand-badge--kopfzeile .cf-versand-badge__text { display: flex !important; flex-direction: column; line-height: 1.1 !important; } .cf-versand-badge--kopfzeile .cfs-vb-oben { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .9; } .cf-versand-badge--kopfzeile .cfs-vb-unten { font-size: 15px; font-weight: 800; color: #b9ea8f; } .cf-versand-badge--kopfzeile::before { display: none !important; } .cf-versand-badge--kopfzeile { position: relative; } .cf-versand-badge--kopfzeile .cf-versand-badge__stern { position: absolute; top: -6px; right: -4px; padding: 2px 4px; font-size: 13px; } .cf-versand-leiste { display: none !important; } /* die Extra-Leiste unter dem Menü gibt es nicht mehr — der Kasten sitzt in der Zeile */ body header.ts-header .header-middle .header-center { flex: 1 1 auto !important; min-width: 140px; max-width: 540px; width: auto !important; order: 0 !important; padding: 0 !important; position: static; } body header.ts-header .header-middle .header-center .ts-search-by-category, body header.ts-header .header-middle .header-center:focus-within .ts-search-by-category { position: static !important; width: 100% !important; max-width: none !important; box-shadow: none; transition: none; } body header.ts-header .ts-search-by-category .search-field input[type="text"] { min-width: 0 !important; width: 100% !important; } @media (max-width: 991px) { body header.ts-header .ts-search-by-category .search-button input[type="submit"] { padding: 12px 14px !important; } .cf-versand-badge--kopfzeile .cfs-vb-oben { font-size: 9.5px; } .cf-versand-badge--kopfzeile .cfs-vb-unten { font-size: 13px; } } /* ---- 8. Wunschliste wie der Warenkorb: Bild 110 px rund, Name kräftig, Kleintext gedämpft, Kreuz rechts, Überlagerung hellgrün ---- */ .ts-wishlist-table-wrapper { margin: 0 0 26px; } .ts-wishlist-table-wrapper .heading-row, .ts-wishlist-table-wrapper .item.wishlist-item { display: grid !important; grid-template-columns: 126px minmax(0, 1fr) 130px 150px 170px 40px; gap: 0 12px; align-items: start; border-bottom: 1px solid rgba(255,255,255,.12); } .ts-wishlist-table-wrapper .heading-row { padding: 0 0 12px; font-size: 16px; font-weight: 700; color: rgba(255,255,255,.97); } .ts-wishlist-table-wrapper .heading-row > span, .ts-wishlist-table-wrapper .item.wishlist-item > span { display: block !important; float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; text-align: left !important; } .ts-wishlist-table-wrapper .heading-row .product-thumbnail { padding-left: 16px !important; } .ts-wishlist-table-wrapper .heading-row .product-remove, .ts-wishlist-table-wrapper .item .product-remove { order: 6; } .ts-wishlist-table-wrapper .item.wishlist-item { padding: 16px 0 !important; } .ts-wishlist-table-wrapper .item .product-thumbnail { padding-left: 16px !important; } .ts-wishlist-table-wrapper .item .product-thumbnail img { width: 110px !important; height: 110px !important; object-fit: cover; border-radius: 8px; display: block; } .ts-wishlist-table-wrapper .item .product-name a { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.97); text-decoration: none; line-height: 1.3; } .ts-wishlist-table-wrapper .item .product-name a:hover { color: #9ad072; } .ts-wishlist-table-wrapper .item .product-price { font-size: 16px; font-weight: 700; padding-top: 2px !important; } .ts-wishlist-table-wrapper .item .product-price del { opacity: .6; font-weight: 400; font-size: 13px; margin-right: 4px; } .ts-wishlist-table-wrapper .item .product-stock-status { font-size: 12.5px; color: #b9c7b4; padding-top: 4px !important; } .ts-wishlist-table-wrapper .item .product-stock-status * { color: inherit !important; } .ts-wishlist-table-wrapper .item .product-add-to-cart .button { display: inline-flex !important; align-items: center; height: 40px; padding: 0 16px !important; background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 13px !important; white-space: nowrap; min-height: 0 !important; line-height: 1 !important; } .ts-wishlist-table-wrapper .item .product-add-to-cart .button:hover { background: #7fb857 !important; color: #12170f !important; } .ts-wishlist-table-wrapper .item .product-add-to-cart .added_to_cart { display: none; } .ts-wishlist-table-wrapper .item .product-remove { text-align: right !important; padding-top: 2px !important; } .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist { display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 0 !important; line-height: 1 !important; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; opacity: .6; color: rgba(255,255,255,.97) !important; background: transparent !important; text-decoration: none !important; transition: opacity .15s, border-color .15s, background .15s; } .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist::before { content: "×" !important; font-size: 15px; line-height: 1; font-weight: 400; } .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist::after { display: none !important; } .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist:hover { opacity: 1; border-color: #7fb857; color: #9ad072 !important; background: rgba(127,184,87,.14) !important; } .ts-wishlist-table-wrapper.loading { position: relative; } .ts-wishlist-table-wrapper.loading::before, .ts-wishlist-table-wrapper.loading::after { background: rgba(127,184,87,.14) !important; opacity: 1 !important; } .ts-wishlist-table-wrapper.empty-wishlist .heading-row, .ts-wishlist-table-wrapper.empty-wishlist .items { display: none !important; } .cfs-wunschliste-leer-text { font-size: 16px; margin: 0 0 22px; color: #e9ece3; } @media (max-width: 782px) { .ts-wishlist-table-wrapper .heading-row { display: none !important; } .ts-wishlist-table-wrapper .item.wishlist-item { grid-template-columns: 96px minmax(0, 1fr) 32px; gap: 4px 12px; } .ts-wishlist-table-wrapper .item .product-thumbnail { grid-row: 1 / span 4; padding-left: 0 !important; } .ts-wishlist-table-wrapper .item .product-thumbnail img { width: 90px !important; height: 90px !important; } .ts-wishlist-table-wrapper .item .product-name, .ts-wishlist-table-wrapper .item .product-price, .ts-wishlist-table-wrapper .item .product-stock-status, .ts-wishlist-table-wrapper .item .product-add-to-cart { grid-column: 2; } .ts-wishlist-table-wrapper .item .product-remove { grid-column: 3; grid-row: 1; order: 0; } } /* ---- 14. Warenkorb-Summe: Zeile „Sendung" ohne Leerzeile unter „Adresse ändern" ---- */ .cart_totals .woocommerce-shipping-totals th, .cart_totals .woocommerce-shipping-totals td { padding-bottom: 10px !important; vertical-align: top; } .cart_totals .woocommerce-shipping-totals td > *:last-child, .cart_totals .woocommerce-shipping-totals td form:last-child, .cart_totals .woocommerce-shipping-totals form .shipping-calculator-button { margin-bottom: 0 !important; } .cart_totals .woocommerce-shipping-totals td p:empty, .cart_totals .woocommerce-shipping-totals td br, .cart_totals .woocommerce-shipping-totals .shipping-calculator-form[style*="display:none"], .cart_totals .woocommerce-shipping-totals .shipping-calculator-form[style*="display: none"] { display: none !important; margin: 0 !important; height: 0 !important; } .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; border: 0 !important; padding-top: 0 !important; margin-top: 0 !important; } .woocommerce-account .woocommerce-MyAccount-content::before, .woocommerce-account .woocommerce-MyAccount-navigation::after { display: none !important; } .cfs-seitentitel { margin: 0 0 18px; } /* 14. Warenkorb-Summe: Zeile „Sendung" so eng wie die anderen Zeilen — der versteckte Versandrechner brachte Außenabstand mit */ body .cart_totals table tr.woocommerce-shipping-totals th, body .cart_totals table tr.woocommerce-shipping-totals td { padding-top: 12px !important; padding-bottom: 12px !important; vertical-align: top !important; } body .cart_totals table tr.woocommerce-shipping-totals td > *, body .cart_totals table tr.woocommerce-shipping-totals form.woocommerce-shipping-calculator, body .cart_totals table tr.woocommerce-shipping-totals ul#shipping_method, body .cart_totals table tr.woocommerce-shipping-totals ul#shipping_method li { margin: 0 !important; padding: 0 !important; line-height: 1.5; } body .cart_totals table tr.woocommerce-shipping-totals .shipping-calculator-button { display: inline-block; margin: 4px 0 0 !important; } body .cart_totals table tr.woocommerce-shipping-totals .shipping-calculator-form { margin: 0 !important; } /* 5./7. Kaufbereich: das Theme gibt jedem Kind der Zusammenfassung ~30 px Außenabstand — unten dicht zusammenrücken */ .woocommerce div.product .summary > .cfs-zeilen, .woocommerce div.product .summary > .single-product-buttons, .woocommerce div.product .summary > .button-in, .woocommerce div.product .summary > .meta-content, .woocommerce div.product .summary > .cfs-unten { margin: 0 !important; padding: 0 !important; } .woocommerce div.product .summary > .cfs-unten { margin-top: 10px !important; } .woocommerce div.product .summary > .cfs-unten + .cfs-unten { margin-top: 4px !important; } .woocommerce div.product .summary > .cfs-unten p { margin: 0 !important; padding: 0 !important; } .woocommerce div.product .summary > .meta-content { margin-top: 6px !important; } /* 14. Versandrechner: der verirrte

erzeugt im Formular einen leeren Absatz mit Außenabstand */ body .cart_totals tr.woocommerce-shipping-totals td form > p, body .cart_totals tr.woocommerce-shipping-totals td form > p:empty { display: none !important; margin: 0 !important; } body .cart_totals tr.woocommerce-shipping-totals td form > a.shipping-calculator-button { display: inline-block !important; } /* 14. Versandzeile der Summe: Theme-Innenabstand 22 px unten auf 10 px */ .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals td, .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals th { padding-bottom: 10px !important; } .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals + tr td, .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals + tr th { padding-top: 16px !important; } /* ===================================================================== 0.7.0 (01.10.2026, fünfte Sichtprüfung) ===================================================================== */ /* ---- 2. Versand-Kasten: das Child-Theme (Eintrag 54) setzte ihn absolut ÜBER die Zeile — jetzt echt in der Zeile neben Konto und Warenkorb ---- */ body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { position: relative !important; left: auto !important; bottom: auto !important; top: auto !important; right: auto !important; display: inline-flex !important; margin: 0 6px 0 0 !important; font-size: 12.5px !important; } body header.ts-header .header-middle .header-right { position: static !important; padding-top: 0 !important; margin-top: 0 !important; flex-wrap: nowrap !important; align-items: center !important; } @media (min-width: 768px) and (max-width: 1199px) { body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { display: inline-flex !important; } } /* ---- 3. Handy (≤ 767 px): EINE Zeile — Logo · Lupe (Kasten wie das Suchfeld) · Herz · Konto · Warenkorb · Menü; die Suche öffnet die Theme-Sidebar ---- */ @media (max-width: 767px) { body header.ts-header .header-middle .container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; padding: 8px 10px !important; } body header.ts-header .header-middle .header-left { flex: 0 1 auto !important; min-width: 0 !important; } body header.ts-header .header-middle .header-left .logo-wrapper, body header.ts-header .logo-wrapper { min-width: 0 !important; } body header.ts-header .header-middle .logo img { max-height: 34px !important; height: 34px !important; width: auto !important; max-width: 150px !important; } body header.ts-header .header-middle .header-center { display: none !important; } body header.ts-header .header-middle .header-right { margin-left: auto !important; gap: 2px !important; flex-wrap: nowrap !important; flex: 0 0 auto !important; } body header.ts-header .header-middle .search-button.search-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 42px; height: 40px; margin: 0 2px; border: 1px solid var(--cf-gelb, #7fb857); border-radius: 6px; background: #1b1f1d; cursor: pointer; } body header.ts-header .header-middle .search-button.search-icon .icon { display: block; width: 20px; height: 20px; background: rgba(255,255,255,.97); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } body header.ts-header .header-middle .search-button.search-icon .icon::before { display: none !important; content: none !important; } body header.ts-header .header-right .my-wishlist-wrapper.cfs-herz-handy { display: inline-flex !important; align-items: center; line-height: 0; } body header.ts-header .header-right .my-wishlist-wrapper.cfs-herz-handy .tini-wishlist { padding: 0 8px; position: relative; } /* Felix, 02.10.: Logo so hoch wie die Symbole (Schriftzug ≈ Suchkasten), Versand-Badge kompakt mittig im freien Feld */ body header.ts-header .header-middle .logo img { height: 46px !important; max-height: 46px !important; max-width: none !important; margin: -3px 0; } body header.ts-header .header-middle .header-right { flex: 1 1 auto !important; min-width: 0 !important; justify-content: flex-end; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { display: inline-flex !important; order: -1; margin: 0 auto !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cf-versand-badge__link { padding: 3px 7px !important; gap: 0 !important; border-radius: 6px !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cf-versand-badge__bild { display: none !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cfs-vb-oben { font-size: 8.5px; letter-spacing: .03em; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cfs-vb-unten { font-size: 12.5px; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cf-versand-badge__stern { top: -8px; right: -6px; font-size: 11px; } } @media (max-width: 767px) { body header.ts-header .header-middle .header-left { flex: 0 0 auto !important; } } /* Unter 500 px reicht der Platz neben dem großen Logo nicht — dann bleibt das Badge aus der Zeile */ @media (max-width: 499px) { body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { display: none !important; } body header.ts-header .header-middle .logo img { height: 42px !important; max-height: 42px !important; } } .my-wishlist-wrapper.cfs-herz-handy { display: none; } /* Such-Sidebar des Themes im CI: Fläche, Suchfeld wie oben, Schließen-Kreuz sichtbar */ #ts-search-sidebar .ts-sidebar-content { background: rgba(18,23,15,.98) !important; color: rgba(255,255,255,.97); } #ts-search-sidebar .ts-sidebar-content .close { width: 44px !important; height: 44px !important; top: 14px !important; right: 14px !important; border: 1px solid rgba(127,184,87,.6) !important; border-radius: 50% !important; background: #12170f !important; color: rgba(255,255,255,.97) !important; } #ts-search-sidebar .ts-sidebar-content .close:after { font-size: 16px !important; color: inherit !important; } #ts-search-sidebar .ts-search-by-category form > .search-table { padding: 74px 16px 0 !important; } #ts-search-sidebar .ts-search-by-category .search-field { display: flex; flex-wrap: nowrap !important; background: #1b1f1d !important; border: 1px solid var(--cf-gelb, #7fb857) !important; border-radius: 6px !important; overflow: hidden !important; } #ts-search-sidebar .ts-search-by-category .search-field input[type="text"] { flex: 1 1 auto !important; min-width: 0; background: transparent !important; color: rgba(255,255,255,.97) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 15px; padding: 12px 16px !important; } #ts-search-sidebar .ts-search-by-category input::placeholder { color: #8f9a96 !important; opacity: 1 !important; } #ts-search-sidebar .ts-search-by-category .search-button { flex: 0 0 auto !important; border-left: 1px solid rgba(127,184,87,.45) !important; background: none !important; } #ts-search-sidebar .ts-search-by-category .search-button input[type="submit"] { background: transparent !important; color: rgba(255,255,255,.97) !important; border: 0 !important; border-radius: 0 !important; font-weight: 700 !important; letter-spacing: .05em; padding: 12px 18px !important; cursor: pointer; } #ts-search-sidebar .ts-search-by-category .search-button input[type="submit"]:hover { background: var(--cf-gelb, #7fb857) !important; color: #0d1108 !important; } /* Suche (Felix, 02.10.): Treffer und „nichts gefunden" sind dieselben Archivkarten wie in den Kategorien (content-product.php), Raster und Spaltenzahl kommen vom Theme (.main-products.grid), seller.js zeigt nur volle Reihen */ body > .ts-search-result-container .search-content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 30px; box-sizing: border-box; } body > .ts-search-result-container { max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, #12170f 0%, #16200f 100%) !important; border-bottom: 1px solid rgba(127,184,87,.35); box-shadow: 0 18px 40px rgba(0,0,0,.55); padding-top: 26px !important; padding-bottom: 26px !important; } body > .ts-search-result-container:before { display: none !important; } .ts-search-result-container .cfs-suchkarten { margin: 0 !important; } .ts-search-result-container .cfs-suchkarten .products { margin: 0 !important; } .ts-search-result-container .cfs-suche-titel { color: rgba(255,255,255,.97); font-size: 17px !important; font-weight: 700; line-height: 1.4; margin: 0 0 14px !important; } #ts-search-sidebar .ts-search-result-container .search-content { padding: 0; } #ts-search-sidebar .ts-search-result-container .cfs-suchkarten .products { --ts-columns: 2; } /* 4. Suchergebnisseite ohne Treffer */ body.search .woocommerce-no-products-found .woocommerce-info, body.search .woocommerce-info { background: #12170f !important; border: 1px solid rgba(127,184,87,.45) !important; border-radius: 10px; color: rgba(255,255,255,.97) !important; padding: 16px 18px !important; font-size: 16px; } body.search .woocommerce-info::before { color: #7fb857 !important; } body.search .cfs-beliebt { margin-top: 22px !important; } /* ---- 5./6./7. Produktseite: Raster — Titel, Preis links + Rang-Badge rechts, Knöpfe, LED mittig dazwischen, unten (am Bildrand) Wunschliste, Lieferzeit · Menge, Tags ---- */ .woocommerce div.product div.summary { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto auto auto; row-gap: 0; column-gap: 14px; align-items: start; align-self: stretch; align-content: stretch; min-height: 100%; } .woocommerce div.product div.summary > * { grid-column: 1 / -1; width: auto !important; margin: 0 !important; } .woocommerce div.product div.summary > .product_title { grid-row: 1; margin-bottom: 2px !important; } .woocommerce div.product div.summary > .price { grid-row: 2; grid-column: 1; align-self: center; } .woocommerce div.product div.summary > .cfs-slot-titel { grid-row: 2; grid-column: 2; align-self: center; justify-self: end; margin: 0 !important; } .woocommerce div.product div.summary > .legal-price-info.legal-price-info { grid-row: 3; margin: -10px 0 8px !important; } .woocommerce div.product div.summary > form.cart { grid-row: 4; } .woocommerce div.product div.summary > .cfs-slot-lieferzeit { grid-row: 5; justify-self: center; text-align: center; margin: 4px 0 !important; } .woocommerce div.product div.summary > .cfs-slot-lieferzeit .cfs-zeile { justify-content: center; } .woocommerce div.product div.summary > a.ts-buy-now-button { grid-row: 6; margin: 0 0 0 179px !important; width: calc(100% - 179px) !important; } .woocommerce div.product div.summary > .cfs-zeilen, .woocommerce div.product div.summary > .ts-product-ratings-stock, .woocommerce div.product div.summary > .ts-variation-price.hidden, .woocommerce div.product div.summary > .single-product-buttons:empty { display: none !important; } .woocommerce div.product div.summary > .button-in.wishlist { grid-row: 8; margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; } .woocommerce div.product div.summary > .cfs-unten { grid-row: 9; margin: 4px 0 0 !important; padding: 0 !important; font-size: 13px !important; color: #b9c7b4 !important; line-height: 1.4; } .woocommerce div.product div.summary > .cfs-unten * { color: inherit !important; font-size: inherit !important; margin: 0 !important; padding: 0 !important; display: inline !important; } .woocommerce div.product div.summary > .meta-content { grid-row: 10; margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; } .woocommerce div.product div.summary > .meta-content > div { margin: 0 !important; border: 0 !important; } .single-product .summary .ts-discount-percent { display: none !important; } .woocommerce div.product .summary > .legal-price-info p { margin: 0 !important; } .cf-produkt-inhalte { margin-top: 10px !important; } /* Knöpfe: gleich groß, plastisch (Verlauf, Glanzkante, Schatten) — grün mit Warenkorb-Icon, amber mit Rakete */ .single-product .summary form.cart .single_add_to_cart_button, .single-product .summary a.ts-buy-now-button { box-sizing: border-box !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; height: 52px !important; min-height: 52px !important; line-height: 1 !important; padding: 0 20px !important; margin: 0; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; border-radius: 8px !important; border: 0 !important; color: #12170f !important; text-shadow: 0 1px 0 rgba(255,255,255,.25); box-shadow: 0 6px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s, filter .15s; } .single-product .summary form.cart .single_add_to_cart_button::after, .single-product .summary a.ts-buy-now-button::after { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--cfs-icon) center / contain no-repeat; mask: var(--cfs-icon) center / contain no-repeat; } .single-product .summary form.cart .single_add_to_cart_button::before { display: none !important; } .single-product .summary form.cart .single_add_to_cart_button { --cfs-icon: url("data:image/svg+xml;utf8,"); background: linear-gradient(180deg, #a5dc74 0%, #7fb857 55%, #5f9a3d 100%) !important; } .single-product .summary a.ts-buy-now-button { --cfs-icon: url("data:image/svg+xml;utf8,"); background: linear-gradient(180deg, #f3c35a 0%, #e0a326 55%, #bf861a 100%) !important; } .single-product .summary form.cart .single_add_to_cart_button:hover, .single-product .summary a.ts-buy-now-button:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 9px 18px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.18); } .single-product .summary form.cart div.quantity .qty, .single-product .summary form.cart div.quantity { height: 52px !important; } @media (max-width: 767px) { .woocommerce div.product div.summary { min-height: 0; grid-template-rows: auto; } .woocommerce div.product div.summary > a.ts-buy-now-button { margin-left: 0 !important; width: 100% !important; } .woocommerce div.product div.summary > .button-in.wishlist { margin-top: 14px !important; } } /* ---- 8./11. Herz hinter dem Produktnamen in den Karten (Gratis, Passt dazu, Wunschliste, Konto, Suche) ---- */ .cfs-name-zeile { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } a.cfs-herz-knopf { display: inline-block; width: 18px; height: 18px; flex: none; background: #9ad072; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; opacity: .8; transition: opacity .15s, transform .15s; font-size: 0; } a.cfs-herz-knopf::before, a.cfs-herz-knopf::after, a.cfs-herz-knopf .ts-tooltip { display: none !important; content: none !important; } a.cfs-herz-knopf:hover { opacity: 1; transform: scale(1.15); } a.cfs-herz-knopf.added { background: #e0a326; opacity: 1; } .cf-auffuellen__posten.cfs-karte .cf-auffuellen__name .cfs-name-zeile a:not(.cfs-herz-knopf) { min-width: 0; } /* ---- 10. Konto: Profilkopf mit Geschenk-Fortschritt, Reiterleiste füllt die Breite ---- */ .cfs-profil { display: flex; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 14px; background: linear-gradient(135deg, rgba(127,184,87,.16), rgba(18,23,15,.55)); border: 1px solid rgba(127,184,87,.4); margin: 0 0 18px; flex-wrap: wrap; } .cfs-profil-links { display: flex; align-items: center; gap: 16px; flex: 0 1 280px; min-width: 220px; } .cfs-profil-avatar { width: 56px; height: 56px; border-radius: 50%; background: #7fb857; color: #12170f; font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 0 4px rgba(127,184,87,.22); } .cfs-profil-text { min-width: 0; } .cfs-profil-name { display: block; font-size: 20px; font-weight: 700; color: rgba(255,255,255,.97); line-height: 1.2; } .cfs-profil-fakten { display: block; font-size: 13px; color: #c5cbbb; margin-top: 4px; } .cfs-profil-geschenk { flex: 1 1 320px; min-width: 260px; padding: 0 0 0 20px; border-left: 1px solid rgba(127,184,87,.3); } .cfs-profil-geschenk-zeile { margin: 0 0 8px; font-size: 15px; color: #f4f7f0; line-height: 1.35; } .cfs-profil-geschenk .cfs-meilenstein-balken { margin: 0; } .cfs-profil-geschenk-klein { margin: 7px 0 0; font-size: 12.5px; color: #c5cbbb; } .cfs-profil-abmelden { margin-left: auto; flex: none; font-size: 13px; font-weight: 600; color: #c5cbbb; text-decoration: none !important; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 14px; transition: color .15s, border-color .15s; } .cfs-profil-abmelden:hover { color: #9ad072; border-color: #7fb857; } .woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 100%; margin: 0 0 26px; border-bottom: 1px solid rgba(127,184,87,.3); overflow-x: auto; overflow-y: hidden; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: normal !important; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation li { flex: 1 1 auto !important; margin: 0 !important; border: 0 !important; min-width: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { position: relative; display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 16px 18px 17px !important; border: 0 !important; border-radius: 10px 10px 0 0; background: transparent; font-size: 15px !important; font-weight: 600; line-height: 1 !important; white-space: nowrap; color: #c5cbbb; text-decoration: none !important; transition: color .15s, background .15s; } .woocommerce-account .woocommerce-MyAccount-navigation li a::before { content: "" !important; display: block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--cfs-icon) center / contain no-repeat; mask: var(--cfs-icon) center / contain no-repeat; position: static !important; margin: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: rgba(255,255,255,.97); background: rgba(127,184,87,.08); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: rgba(255,255,255,.97); background: rgba(127,184,87,.12); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: #7fb857; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active::after { display: none !important; } .woocommerce-MyAccount-navigation-link--freunde-werben a { --cfs-icon: url("data:image/svg+xml;utf8,"); } .cfs-herz { color: #9ad072; margin-left: 2px; } @media (max-width: 991px) { .woocommerce-account .woocommerce-MyAccount-navigation li { flex: 0 0 auto !important; } .woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 14px 16px !important; font-size: 14px !important; } } @media (max-width: 600px) { .cfs-profil { padding: 14px 16px; gap: 12px; } .cfs-profil-avatar { width: 44px; height: 44px; font-size: 20px; } .cfs-profil-name { font-size: 17px; } .cfs-profil-abmelden { padding: 6px 10px; font-size: 12px; } .cfs-profil-geschenk { padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(127,184,87,.3); } } /* „Was du jetzt tun kannst" */ .cfs-zuhause-h2 { font-size: 22px !important; margin: 30px 0 14px !important; color: rgba(255,255,255,.97); } .cfs-tun .cfs-block { padding: 0 !important; border: 0 !important; } .cfs-tun-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 6px 0 22px; } .cfs-tun-kachel { display: block; padding: 18px 20px; border-radius: 12px; border: 1px solid rgba(127,184,87,.4); background: #141b11; color: #f4f7f0; text-decoration: none !important; transition: transform .15s, border-color .15s; } a.cfs-tun-kachel:hover { transform: translateY(-2px); border-color: #7fb857; } .cfs-tun-kachel-titel { display: block; font-size: 16px; font-weight: 700; color: #b9ea8f; margin: 0 0 6px; } .cfs-tun-kachel-text { display: block; font-size: 13.5px; color: #e9ece3; line-height: 1.5; } .cfs-tun-newsletter { border: 1px dashed #7fb857; background: linear-gradient(135deg, rgba(127,184,87,.12), rgba(18,23,15,.6)); } .cfs-tun-newsletter .elementor-form { margin-top: 12px; } .cfs-tun-newsletter .elementor-form-fields-wrapper { gap: 8px; } .cfs-tun-newsletter .elementor-field-group { padding: 0 !important; width: 100% !important; } .cfs-tun-newsletter .elementor-field { background: #12170f !important; border: 1px solid rgba(127,184,87,.55) !important; color: rgba(255,255,255,.97) !important; border-radius: 6px !important; } .cfs-tun-newsletter .elementor-button { width: 100%; background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .cfs-tun-newsletter .elementor-button:hover { background: #7fb857 !important; color: #12170f !important; } /* ---- 11./13. Warenkorb: Zeilen sind beim Theme Flex-Zeilen (mittig) → oben ausrichten; Einrückung wie die Karten (17 px) ---- */ .woocommerce table.shop_table.woocommerce-cart-form__contents tr, .woocommerce table.shop_table.woocommerce-cart-form__contents tbody tr { align-items: flex-start !important; } .woocommerce table.shop_table.woocommerce-cart-form__contents td, .woocommerce table.shop_table.woocommerce-cart-form__contents th { align-self: flex-start !important; vertical-align: top !important; } .woocommerce-cart-form table.shop_table th.product-thumbnail, .woocommerce-cart-form table.shop_table td.product-thumbnail { padding-left: 17px !important; } .woocommerce-cart-form table.shop_table th.product-name { padding-left: 0 !important; } .woocommerce-cart-form td.product-name > a { margin: 0 0 6px !important; padding: 0 !important; position: static !important; } .woocommerce-cart-form table.shop_table td.product-remove { padding-right: 17px !important; } .woocommerce-cart table.cart td.actions { padding-right: 17px !important; } /* Summe: Gesamtsumme und MwSt. ohne Trennstrich zusammen; „Sendung" und „Kostenlose Lieferung" auf einer Linie */ .woocommerce-cart .cart-collaterals .cart_totals table tr.order-total th, .woocommerce-cart .cart-collaterals .cart_totals table tr.order-total td { padding-bottom: 2px !important; border-bottom: 0 !important; } .woocommerce-cart .cart-collaterals .cart_totals table tr.order-total + tr th, .woocommerce-cart .cart-collaterals .cart_totals table tr.order-total + tr td { padding-top: 0 !important; border-top: 0 !important; font-size: 12.5px !important; color: #b9c7b4 !important; font-weight: 400 !important; } .woocommerce-cart .cart-collaterals .cart_totals table tr.order-total + tr td * { font-size: inherit !important; color: inherit !important; font-weight: inherit !important; } .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals th, .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals td { line-height: 24px !important; } .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals td ul#shipping_method li, .woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals td label { line-height: 24px !important; margin: 0 !important; padding: 0 !important; display: inline-block; vertical-align: top; } /* ---- 12. „Mehr anzeigen": Knopf verschwindet, deutlicher Ladekreis an seiner Stelle ---- */ .cfs-mehr.button.cfs-laedt { display: none !important; } .cfs-spinner { display: inline-block; width: 34px; height: 34px; border: 3px solid rgba(154,208,114,.25); border-top-color: #9ad072; border-radius: 50%; animation: cfs-dreh .7s linear infinite; vertical-align: middle; } @keyframes cfs-dreh { to { transform: rotate(360deg); } } /* ---- Bestellweg: festgeklebte Schrittleiste (Warenkorb: Schritt 1 von 4; Kasse: Fluid-Checkout-Leiste, umgezählt) ---- */ .cfs-schritte { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: rgba(18,23,15,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(127,184,87,.4); color: rgba(255,255,255,.97); } .cfs-schritte-innen { max-width: 760px; margin: 0 auto; padding: 10px 20px 12px; } .cfs-schritte-text { text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; } .cfs-schritte-text b { color: #b9ea8f; } .cfs-schritte-balken { display: flex; gap: 6px; } .cfs-schritt { flex: 1; height: 10px; border-radius: 5px; background: #27322a; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); } .cfs-schritt i { display: none; } .cfs-schritt.ist-fertig { background: #7fb857; } .cfs-schritt.ist-aktuell { background: linear-gradient(90deg, #7fb857, #b9ea8f); box-shadow: 0 0 10px rgba(185,234,143,.6); } body.woocommerce-cart { padding-bottom: 70px; } /* Kasse: dieselbe Optik auf der Fluid-Checkout-Leiste */ body.woocommerce-checkout .fc-progress-bar .fc-progress-bar__inner { padding: 10px 20px 12px !important; } body.woocommerce-checkout .fc-progress-bar .fc-progress-bar__count { font-size: 14px !important; letter-spacing: .06em; margin: 0 0 8px !important; color: rgba(255,255,255,.97) !important; } body.woocommerce-checkout .fc-progress-bar .fc-progress-bar__count .fc-progress-bar__current-step { color: #b9ea8f; } body.woocommerce-checkout .fc-progress-bar--bars .fc-progress-bar__steps { display: flex !important; gap: 6px; height: auto !important; background: transparent !important; overflow: visible !important; max-width: 720px; margin: 0 auto; } body.woocommerce-checkout .fc-progress-bar--bars .fc-progress-bar__steps .fc-progress-bar__step { float: none !important; flex: 1 1 0 !important; width: auto !important; height: 10px !important; border-radius: 5px; background: #27322a !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); font-size: 0; transition: background .3s; } body.woocommerce-checkout .fc-progress-bar--bars .fc-progress-bar__steps .fc-progress-bar__step.is-complete { background: #7fb857 !important; } body.woocommerce-checkout .fc-progress-bar--bars .fc-progress-bar__steps .fc-progress-bar__step.is-current { background: linear-gradient(90deg, #7fb857, #b9ea8f) !important; box-shadow: 0 0 10px rgba(185,234,143,.6); } body.woocommerce-checkout .fc-progress-bar--bars .fc-progress-bar__steps .fc-progress-bar__step[data-step-visible="no"] { display: none !important; } /* ---- 21. Kasse: milder, 50/50, Bestellübersicht wie der Warenkorb, Zusagen oben als Kästen, Stimmen unter der linken Spalte ---- */ body.woocommerce-checkout .cfs-kopfleiste { display: none !important; } body.woocommerce-checkout { --fluidcheckout--color--white: #1a2317; --fluidcheckout--color--lighter-grey: #1f2a1c; --fluidcheckout--section--border-color: rgba(127,184,87,.3); } body.woocommerce-checkout .fc-step, body.woocommerce-checkout .fc-checkout-order-review { background: #1a2317 !important; border-color: rgba(127,184,87,.3) !important; } body.woocommerce-checkout.has-fc-sidebar div.woocommerce .fc-wrapper .fc-inside, body.woocommerce-checkout.has-fc-sidebar div.woocommerce .fc-inside, body.has-fc-sidebar.woocommerce-checkout .woocommerce-notices-wrapper, body.has-fc-sidebar .fc-checkout-notices { width: calc(50% - 20px) !important; max-width: none !important; } body.woocommerce-checkout.has-fc-sidebar div.woocommerce .fc-wrapper .fc-sidebar, body.woocommerce-checkout.has-fc-sidebar div.woocommerce .fc-sidebar { width: 50% !important; max-width: none !important; } body.woocommerce-checkout .fc-sidebar .fc-sidebar__inner { max-width: none !important; } /* Breite nur außerhalb des Sticky-Zustands frei: Fluid Checkout setzt beim Mitlaufen die gemessene Breite als Inline-Stil (05.10.: „auto !important" überschrieb sie, die Übersicht wurde beim Scrollen breit bis zum Rand) */ body.woocommerce-checkout .fc-sidebar:not(.is-sticky):not(.is-end-position) .fc-sidebar__inner { width: auto !important; } body.woocommerce-checkout .fc-checkout-order-review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } body.woocommerce-checkout .fc-checkout-order-review__head > p { margin: 0 !important; } body.woocommerce-checkout .fc-checkout-order-review__edit-cart { font-size: 13px; font-weight: 600; color: #9ad072 !important; text-decoration: none !important; border: 1px solid rgba(127,184,87,.5); border-radius: 999px; padding: 5px 12px; } body.woocommerce-checkout .fc-checkout-order-review__edit-cart:hover { background: #7fb857; color: #12170f !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item td { padding: 12px 0 !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item td { position: relative !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-name { display: flex !important; align-items: flex-start !important; gap: 12px; width: auto !important; max-width: none !important; padding-right: 96px !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-total { position: absolute !important; right: 0 !important; top: 12px !important; width: auto !important; text-align: right; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-name > p { margin: 0 !important; flex: 0 0 56px !important; width: 56px !important; max-width: 56px !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item img { width: 56px !important; height: 56px !important; max-width: none !important; object-fit: cover; border-radius: 8px !important; border: 0 !important; padding: 0 !important; background: transparent !important; display: block; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details { flex: 1 1 auto; min-width: 0; padding-top: 0 !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .cart-item__name { font-size: 14px !important; font-weight: 700; line-height: 1.3; color: #f4f7f0; margin: 0 0 4px !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-quantity, body.woocommerce-checkout .fc-checkout-order-review .cart-item .cart-item__price { font-size: 12.5px; color: #b9c7b4; font-weight: 400; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details > p { margin: 0 !important; display: inline; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-total { padding-top: 0 !important; font-weight: 700; font-size: 14px; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.cart-subtotal th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.cart-subtotal td { border-bottom: 0 !important; padding-bottom: 2px !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.woocommerce-shipping-totals th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.woocommerce-shipping-totals td { border-top: 0 !important; padding-top: 2px !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total td { border-bottom: 0 !important; padding-bottom: 2px !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total + tr th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total + tr td { border-top: 0 !important; padding-top: 0 !important; font-size: 12.5px !important; color: #b9c7b4 !important; font-weight: 400 !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total + tr td * { font-size: inherit !important; color: inherit !important; } body.woocommerce-checkout .fc-checkout-order-review .order-total .includes_tax { display: none !important; } body.woocommerce-checkout input[type="checkbox"], body.woocommerce-checkout input[type="radio"] { accent-color: #7fb857; } body.woocommerce-checkout .woocommerce-info, body.woocommerce-checkout .woocommerce-notice, body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-info, body.woocommerce-checkout #payment .woocommerce-notice, body.woocommerce-checkout .fc-step .woocommerce-info { background: #12170f !important; border: 1px solid rgba(127,184,87,.45) !important; border-radius: 10px !important; color: rgba(255,255,255,.97) !important; padding: 14px 18px !important; margin: 0 0 12px !important; line-height: 1.5; } body.woocommerce-checkout .woocommerce-info::before, body.woocommerce-checkout .woocommerce-notice::before { color: #7fb857 !important; } /* Zusagen und Stimmen: per JS umgehängt (seller.js kasseBloecke) */ body.woocommerce-checkout .cfs-zusagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 20px; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage { background: #1a2317; border: 1px solid rgba(127,184,87,.35); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; color: #e9ece3; position: relative; padding-left: 40px; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage::before { content: ""; position: absolute; left: 16px; top: 18px; width: 12px; height: 7px; border-left: 2px solid #7fb857; border-bottom: 2px solid #7fb857; transform: rotate(-45deg); } body.woocommerce-checkout .cfs-zusagen .cfs-zusage strong { color: #f4f7f0; display: block; } body.woocommerce-checkout .cfs-stimmen { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 20px 0 0; } body.woocommerce-checkout .cfs-stimmen blockquote { margin: 0; padding: 14px 18px; background: #1a2317; border: 1px solid rgba(127,184,87,.3); border-left: 3px solid #7fb857; border-radius: 10px; font-size: 16px; line-height: 1.5; font-style: italic; color: #f4f7f0; } body.woocommerce-checkout .cfs-stimmen blockquote p { margin: 0 !important; font-size: inherit !important; } body.woocommerce-checkout .cfs-stimmen blockquote::before { display: none !important; content: none !important; } body.woocommerce-checkout .cf-vertrauen { display: none !important; } @media (max-width: 767px) { body.woocommerce-checkout .cfs-zusagen { grid-template-columns: 1fr; } body.has-fc-sidebar .fc-inside, body.has-fc-sidebar .fc-sidebar { width: 100% !important; } } /* 12.10.: die 50/50-Regel oben ist spezifischer als die Handy-Regel und drückte die Kasse unter 1000 px auf halbe Breite. Fluid Checkout stellt erst ab 1000 px nebeneinander — darunter volle Breite mit gleicher Spezifität. */ @media (max-width: 999px) { body.woocommerce-checkout.has-fc-sidebar div.woocommerce .fc-wrapper .fc-inside, body.woocommerce-checkout.has-fc-sidebar div.woocommerce .fc-inside, body.has-fc-sidebar.woocommerce-checkout .woocommerce-notices-wrapper, body.has-fc-sidebar .fc-checkout-notices, body.woocommerce-checkout.has-fc-sidebar div.woocommerce .fc-wrapper .fc-sidebar, body.woocommerce-checkout.has-fc-sidebar div.woocommerce .fc-sidebar { width: 100% !important; } } body.woocommerce-checkout #payment ul.wc_payment_methods li .woocommerce-info, body.woocommerce-checkout .fc-payment-methods__wrapper .woocommerce-info, body.woocommerce-checkout #payment .woocommerce-no-available-payment-methods-message { background: #12170f !important; border: 1px solid rgba(127,184,87,.45) !important; border-radius: 10px !important; color: rgba(255,255,255,.97) !important; padding: 14px 18px !important; margin: 0 !important; line-height: 1.5 !important; display: block; } body.woocommerce-checkout #payment ul.wc_payment_methods li .woocommerce-info::before, body.woocommerce-checkout #payment ul.wc_payment_methods li .woocommerce-info::after { display: none !important; } body.woocommerce-checkout #payment ul.wc_payment_methods li .woocommerce-info .woocommerce-no-available-payment-methods-message { border: 0 !important; padding: 0 !important; background: transparent !important; } /* Konto: Newsletter-Kachel — Elementor-Formular ohne Einblend-Animation, Felder untereinander */ .cfs-tun-kacheln { align-items: start; } .cfs-tun-newsletter .elementor-invisible { visibility: visible !important; opacity: 1 !important; animation: none !important; } .cfs-tun-newsletter .elementor-form-fields-wrapper { display: flex !important; flex-direction: column; gap: 8px; } .cfs-tun-newsletter .elementor-field-group { float: none !important; width: 100% !important; max-width: none !important; flex: none; padding: 0 !important; margin: 0 !important; } .cfs-tun-newsletter .elementor-widget-form { margin-top: 12px; } /* Kasse: Produktdetails nicht auf Spaltenbreite einengen (Elementor-Kassen-Widget) */ body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details, body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details > * { width: auto !important; max-width: none !important; min-width: 0 !important; float: none !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details { display: block !important; flex: 1 1 auto !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details > * { display: block !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details > p { display: inline !important; } /* Konto: drei Kacheln nebeneinander, Newsletter rechts */ .cfs-tun-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 991px) { .cfs-tun-kacheln { grid-template-columns: 1fr; } } /* Kasse: die Namensspalte stand auf Mindestbreite (Raster „auto auto") — Raster und Flex beide abdecken, Lieferzeit-/Mengenzeilen bleiben weg */ body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-name { grid-template-columns: 56px minmax(0, 1fr) !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details { width: 100% !important; grid-column: 2 !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details > p.wc-gzd-cart-info, body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details > .wc-gzd-cart-info, body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details .unit-price, body.woocommerce-checkout .fc-checkout-order-review .cart-item .product-details .cart-item__price { display: none !important; } /* Konto-Kacheln: drei nebeneinander, Newsletter rechts */ .cfs-tun-kacheln { display: flex !important; flex-wrap: wrap; gap: 12px; } .cfs-tun-kacheln > .cfs-tun-kachel { flex: 1 1 calc(33.333% - 8px); min-width: 240px; max-width: 100%; } @media (max-width: 991px) { .cfs-tun-kacheln > .cfs-tun-kachel { flex-basis: 100%; } } /* Kasse: eigene Produktzeile (seller.js kasseZeilen) — Bild 56 px rund, Name oben, Menge klein, Summe rechts */ body.woocommerce-checkout .fc-checkout-order-review .cart-item td { display: table-cell !important; padding: 12px 0 !important; } .cfs-kz { display: flex; align-items: flex-start; gap: 12px; width: 100%; } .cfs-kz-bild { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); } .cfs-kz-bild img { width: 56px !important; height: 56px !important; max-width: none !important; object-fit: cover; display: block; border: 0 !important; padding: 0 !important; } .cfs-kz-text { flex: 1 1 auto; min-width: 0; display: block; } .cfs-kz-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: #f4f7f0; } .cfs-kz-menge { display: block; font-size: 12.5px; color: #b9c7b4; margin-top: 3px; } .cfs-kz-summe { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: #f4f7f0; white-space: nowrap; padding-top: 1px; } .cfs-kz-summe .screen-reader-text { display: none; } body.woocommerce-checkout .fc-checkout-order-review table.woocommerce-checkout-review-order-table { width: 100% !important; table-layout: auto !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item { display: table-row !important; } body.woocommerce-checkout .fc-checkout-order-review .cart-item td { width: auto !important; box-sizing: border-box; text-align: left !important; } .cfs-kz, .cfs-kz-text, .cfs-kz-name, .cfs-kz-menge { text-align: left !important; } .cfs-kz-summe { margin-left: auto; text-align: right !important; } /* Kasse: keine doppelten Ränder — Seitenleiste und Zahlungsliste ohne eigenen Rahmen, Hinweis ohne Options-Kasten */ body.woocommerce-checkout .fc-sidebar, body.woocommerce-checkout .fc-sidebar .fc-sidebar__inner, body.woocommerce-checkout .fc-checkout-order-review .fc-checkout-order-review__inner { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.woocommerce-checkout .fc-checkout-order-review { padding-bottom: 4px; } body.woocommerce-checkout .fc-checkout-order-review .shop_table, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr:last-child th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr:last-child td { border-bottom: 0 !important; } body.woocommerce-checkout #payment ul.wc_payment_methods, body.woocommerce-checkout #payment ul.wc_payment_methods > li, body.woocommerce-checkout .fc-payment-methods__wrapper { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } body.woocommerce-checkout #payment ul.wc_payment_methods > li::after, body.woocommerce-checkout #payment ul.wc_payment_methods > li::before { display: none !important; } body.woocommerce-checkout .fc-step .fc-step__substep:last-child, body.woocommerce-checkout .fc-step .fc-step__substep:last-child .fc-step__substep-fields { border-bottom: 0 !important; } body.woocommerce-checkout .fc-step .fc-step__actions, body.woocommerce-checkout .fc-step .fc-place-order { border-top: 0 !important; } /* Produktseite: Knöpfe dichter zusammen */ .woocommerce div.product div.summary > form.cart { margin-bottom: 0 !important; } /* Produktseite: Bildspalte ohne Außenabstand (sonst endet das Raster 60 px unter dem Bild), LED-Zeile ohne Luft, Knöpfe dichter */ .woocommerce div.product div.images { margin-bottom: 0 !important; } .woocommerce div.product div.summary > .cfs-slot-lieferzeit.cfs-slot-lieferzeit { margin: 2px 0 !important; padding: 0 !important; line-height: 1.2 !important; min-height: 0 !important; } .woocommerce div.product div.summary > .cfs-slot-lieferzeit .cfs-zeile { margin: 0 !important; padding: 0 !important; line-height: 1.2; } .woocommerce div.product div.summary > a.ts-buy-now-button { margin-top: 0 !important; } .cf-produkt-inhalte { margin-top: 36px !important; } /* Das Theme setzt gap: 30px auf die Zusammenfassung — im Raster nur die Spaltenlücke behalten */ .woocommerce div.product div.summary { gap: 0 14px !important; row-gap: 0 !important; column-gap: 14px !important; } .woocommerce div.product div.summary > form.cart { margin: 10px 0 0 !important; } .woocommerce div.product div.summary > .cfs-slot-lieferzeit.cfs-slot-lieferzeit { margin: 10px 0 !important; } /* Produktseite: Luft zwischen den Elementen, Block unten endet auf Bildhöhe (seller.js setzt die Mindesthöhe der Zusammenfassung) */ .woocommerce div.product div.summary > .product_title { margin-bottom: 6px !important; } .woocommerce div.product div.summary > .price { margin-bottom: 2px !important; } .woocommerce div.product div.summary > .legal-price-info.legal-price-info { margin: 0 0 14px !important; } .woocommerce div.product div.summary > form.cart { margin: 6px 0 0 !important; } .woocommerce div.product div.summary > .cfs-slot-lieferzeit.cfs-slot-lieferzeit { margin: 12px 0 !important; } .woocommerce div.product div.summary > .button-in.wishlist { margin-top: 14px !important; } .woocommerce div.product div.summary > .cfs-unten { margin-top: 8px !important; } .woocommerce div.product div.summary > .meta-content { margin-top: 6px !important; } /* ---- 02.10.: Mini-Warenkorb (Hover am Korb) — Grundpreis wie im Warenkorb: klein, matt, eigene Zeile, nur einmal ---- */ .cart-dropdown-form .cart_list .price .wc-gzd-cart-info.unit-price { display: block; font-size: 12.5px !important; font-weight: 400 !important; color: #b9c7b4 !important; margin: 2px 0 0; line-height: 1.4; } .cart-dropdown-form .cart_list .price .wc-gzd-cart-info.unit-price * { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; } /* Scrollbalken seitenweit im CI (Seite, Mini-Warenkorb, Suche) */ html { scrollbar-color: #5e9a3a #12170f; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #12170f; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8fca63 0%, #4f7a35 100%); border-radius: 8px; border: 2px solid #12170f; } ::-webkit-scrollbar-thumb:hover { background: #8fca63; } .cart-dropdown-form .cart-content, .cart-dropdown-form .cart_list { scrollbar-color: #7fb857 #1a2317; scrollbar-width: thin; } /* Nach-oben-Knopf im CI: plastisch grün statt grau */ #to-top a { background: linear-gradient(180deg, #8fca63 0%, #5e9a3a 100%) !important; color: #0d1108 !important; border: 1px solid #3f6b26; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 12px rgba(0,0,0,.45); } #to-top a:hover { background: linear-gradient(180deg, #a2dc74 0%, #6bab43 100%) !important; color: #0d1108 !important; } /* ======== 02.10. — Felix' sechste Sichtprüfung ======== */ /* Kasse freundlicher: grünes Glas statt Fast-Schwarz, weichere Ränder, etwas Tiefe — bleibt im CI */ body.woocommerce-checkout { --fluidcheckout--color--white: #23341d; --fluidcheckout--color--lighter-grey: #2a3d22; --fluidcheckout--section--border-color: rgba(127,184,87,.38); } body.woocommerce-checkout .fc-step, body.woocommerce-checkout .fc-checkout-order-review, body.woocommerce-checkout .cfs-zusagen .cfs-zusage, body.woocommerce-checkout .cfs-stimmen blockquote { background: linear-gradient(180deg, rgba(46,68,36,.88) 0%, rgba(30,45,24,.9) 100%) !important; border: 1px solid rgba(127,184,87,.4) !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; } body.woocommerce-checkout .fc-checkout-step { background: linear-gradient(180deg, rgba(46,68,36,.88) 0%, rgba(30,45,24,.9) 100%) !important; border: 1px solid rgba(127,184,87,.4) !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; } body.woocommerce-checkout .fc-step__substep, body.woocommerce-checkout .fc-checkout-order-review__inner, body.woocommerce-checkout .fc-checkout-order-review table.shop_table, body.woocommerce-checkout .fc-checkout-order-review table.shop_table tr, body.woocommerce-checkout .fc-checkout-order-review table.shop_table td, body.woocommerce-checkout .fc-checkout-order-review table.shop_table th, body.woocommerce-checkout .fc-checkout-order-review .fc-place-order { background: transparent !important; } body.woocommerce-checkout .fc-step__substep { border-color: rgba(127,184,87,.22) !important; } body.woocommerce-checkout .fc-sidebar__inner > *:not(.fc-checkout-order-review) { background: transparent !important; } body.woocommerce-checkout .fc-checkout-header, body.woocommerce-checkout header.fc-checkout-header { background: rgba(18,23,15,.55) !important; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(127,184,87,.3) !important; } body.woocommerce-checkout .fc-checkout-footer, body.woocommerce-checkout footer.fc-checkout-footer { background: rgba(18,23,15,.55) !important; } body.woocommerce-checkout .fc-progress-bar { background: rgba(28,42,22,.92) !important; } body.woocommerce-checkout input.input-text, body.woocommerce-checkout select, body.woocommerce-checkout textarea { background-color: rgba(18,23,15,.55) !important; } /* Zusagen oben: großer Haken über zwei Zeilen, kein Bindestrich; Trusted-Shops-Siegel rechts im dritten Kasten */ body.woocommerce-checkout .cfs-zusagen .cfs-zusage { padding: 14px 16px 14px 56px !important; display: flex; flex-direction: column; justify-content: center; min-height: 66px; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage::before { left: 18px !important; top: 50% !important; width: 20px !important; height: 11px !important; border-left: 3.5px solid #9ad072 !important; border-bottom: 3.5px solid #9ad072 !important; border-radius: 1px; transform: translateY(-70%) rotate(-45deg) !important; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage.cf-zusage-ts { padding-right: 70px !important; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage.cf-zusage-ts::after, body.woocommerce-checkout .cfs-stimmen blockquote::after { content: ""; position: absolute; right: 14px; top: 50%; width: 44px; height: 44px; transform: translateY(-50%); background: url("/wp-content/uploads/2023/06/hauptbild_original.png") center / contain no-repeat; } /* Kundenstimmen: Siegel rechts in jedem Kasten, Schrift passend dazu */ body.woocommerce-checkout .cfs-stimmen blockquote { position: relative; padding: 14px 70px 14px 18px !important; font-size: 15px !important; line-height: 1.5 !important; border-left: 3px solid #7fb857 !important; } body.woocommerce-checkout .cfs-stimmen blockquote::after { width: 40px; height: 40px; } /* Bestellübersicht rechts: zwei Blöcke ohne Strich darin — Zwischensumme+Versand, Gesamtsumme+MwSt.; ein Strich nur zwischen den Blöcken */ body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot td { border: 0 !important; box-shadow: none !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr::before, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr::after { display: none !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr td { padding-top: 3px !important; padding-bottom: 3px !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.cart-subtotal th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.cart-subtotal td { border-top: 1px solid rgba(127,184,87,.3) !important; padding-top: 14px !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total td { border-top: 1px solid rgba(127,184,87,.3) !important; padding-top: 12px !important; padding-bottom: 0 !important; } body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total + tr th, body.woocommerce-checkout .fc-checkout-order-review .shop_table tfoot tr.order-total + tr td { padding-top: 0 !important; padding-bottom: 6px !important; font-size: 12px !important; line-height: 1.3 !important; } /* weniger Luft unter „Jetzt kaufen" */ body.woocommerce-checkout .fc-checkout-order-review { padding-bottom: 0 !important; } body.woocommerce-checkout .fc-checkout-order-review .fc-checkout-order-review__inner { padding-bottom: 12px !important; margin-bottom: 0 !important; } body.woocommerce-checkout .fc-checkout-order-review .fc-place-order, body.woocommerce-checkout .fc-sidebar .fc-place-order { margin-bottom: 0 !important; padding-bottom: 14px !important; } body.woocommerce-checkout .fc-checkout-order-review .fc-place-order > *:last-child { margin-bottom: 0 !important; } /* Produktbilder füllen ihren Kasten */ .cfs-kz-bild { background: transparent !important; } /* Warenkorb + Kasse: Ladesymbol wie bei „Mehr anzeigen" (grüner Ring) statt Theme-Grafik */ body.woocommerce-cart div.blockUI.blockOverlay::before, body.woocommerce-checkout div.blockUI.blockOverlay::before, .woocommerce .blockUI.blockOverlay::before, .cart-dropdown-form .blockUI.blockOverlay::before { content: "" !important; background: none !important; width: 34px !important; height: 34px !important; left: 50% !important; margin-left: -17px !important; font-size: 0 !important; border: 3px solid rgba(154,208,114,.25) !important; border-top-color: #9ad072 !important; border-radius: 50% !important; animation: cfs-dreh .7s linear infinite !important; box-sizing: border-box; } body.woocommerce-cart div.blockUI.blockOverlay::after, body.woocommerce-checkout div.blockUI.blockOverlay::after { display: none !important; } /* Hinweise „in den Warenkorb gelegt" / „entfernt – rückgängig?": kurze Einblendung im CI über der Kopfleiste (Position setzt seller.js) */ body #ts-ajax-add-to-cart-message, body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message, body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-info { background: linear-gradient(180deg, #2b4022 0%, #1c2a16 100%) !important; color: rgba(255,255,255,.97) !important; border: 1px solid #7fb857 !important; border-radius: 999px !important; box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important; font-size: 14px !important; line-height: 1.4 !important; } body #ts-ajax-add-to-cart-message { width: auto !important; max-width: min(560px, calc(100vw - 24px)); left: 50% !important; right: auto !important; padding: 9px 20px 9px 46px !important; transform: translate(-50%, -6px); transition: opacity .25s ease, transform .25s ease !important; } body #ts-ajax-add-to-cart-message.show { transform: translate(-50%, 0) !important; } body #ts-ajax-add-to-cart-message::before { content: "" !important; position: absolute; left: 18px !important; top: 50% !important; width: 14px; height: 8px; border-left: 2.5px solid #9ad072; border-bottom: 2.5px solid #9ad072; transform: translateY(-70%) rotate(-45deg); font-size: 0 !important; background: none !important; } body #ts-ajax-add-to-cart-message.error { border-color: #e0a43a !important; } body #ts-ajax-add-to-cart-message a { color: #b9ea8f !important; font-weight: 700; } body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message, body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-info, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner.is-info { right: auto !important; left: 50% !important; transform: translateX(-50%); max-width: min(560px, calc(100vw - 24px)) !important; padding: 9px 22px !important; text-align: center; } body.woocommerce-cart .woocommerce-notices-wrapper .cfs-toast-weg { opacity: 0; transform: translate(-50%, -8px) !important; } body.woocommerce-cart .woocommerce-notices-wrapper a.restore-item { display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: linear-gradient(180deg, #8fca63, #5e9a3a); color: #0d1108 !important; font-weight: 700; text-decoration: none !important; font-size: 13px; } @media (max-width: 600px) { body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message, body.woocommerce-cart .woocommerce-notices-wrapper .wc-block-components-notice-banner { left: 50% !important; right: auto !important; width: calc(100vw - 24px); border-radius: 14px !important; } } /* Produktseite: Knöpfe exakt gleich breit, LED-Zeile mittig darunter — Maße setzt seller.js (--cfs-kl / --cfs-kb) */ .woocommerce div.product div.summary.cfs-gemessen > a.ts-buy-now-button { margin-left: var(--cfs-kl) !important; width: var(--cfs-kb) !important; box-sizing: border-box; } .woocommerce div.product div.summary.cfs-gemessen > .cfs-slot-lieferzeit { justify-self: start !important; margin-left: var(--cfs-kl) !important; width: var(--cfs-kb) !important; text-align: center; } .woocommerce div.product div.summary.cfs-gemessen > .cfs-slot-lieferzeit .cfs-zeile { justify-content: center !important; } /* Test (Felix, 02.10.): Menge + Knöpfe im gestrichelten Kasten wie die Gratis-Sorten im Warenkorb */ .woocommerce div.product div.summary > .cfs-kaufbox { grid-row: 4 / 7; grid-column: 1 / -1; border: 1px dashed #7fb857; border-radius: 10px; background: rgba(127,184,87,.05); pointer-events: none; margin: 0 !important; align-self: stretch; } .woocommerce div.product div.summary.cfs-mit-kaufbox > form.cart { margin: 14px 14px 0 !important; z-index: 1; position: relative; } .woocommerce div.product div.summary.cfs-mit-kaufbox > a.ts-buy-now-button { margin-bottom: 14px !important; z-index: 1; position: relative; } .woocommerce div.product div.summary.cfs-mit-kaufbox > .cfs-slot-lieferzeit { z-index: 1; position: relative; } @media (max-width: 767px) { .woocommerce div.product div.summary > .cfs-kaufbox { display: none; } } /* Konto: grünes Herz hinter der Begrüßung */ /* Newsletter (Elementor-Vorlage 20233, Footer): Knopf dicht am Feld, eigener Hinweis statt Browser-Blase */ form[name="Newsletter Form"] .elementor-form-fields-wrapper { --e-form-row-gap: 8px; row-gap: 8px; margin-bottom: 0 !important; } form[name="Newsletter Form"] .elementor-field-group { margin-bottom: 8px !important; } form[name="Newsletter Form"] .elementor-field-group.e-form__buttons { margin-bottom: 0 !important; } .cfs-feldhinweis { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; padding: 7px 12px; border-radius: 8px; background: linear-gradient(180deg, #2b4022, #1c2a16); border: 1px solid #7fb857; color: rgba(255,255,255,.97); font-size: 13px; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.4); } .cfs-feldhinweis::before { content: ""; position: absolute; top: -6px; left: 16px; width: 10px; height: 10px; background: #2b4022; border-left: 1px solid #7fb857; border-top: 1px solid #7fb857; transform: rotate(45deg); } .cfs-feld-halter { position: relative; } /* Anmelden/Registrieren: vom Browser vorbefüllte Felder bleiben hell auf dunkel und in Schriftgröße des Feldes */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: rgba(255,255,255,.97) !important; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #1b1f1d inset !important; box-shadow: 0 0 0 1000px #1b1f1d inset !important; transition: background-color 99999s ease-out 0s; } input:-webkit-autofill::first-line { font-family: inherit !important; font-size: inherit !important; } input:autofill { -webkit-text-fill-color: rgba(255,255,255,.97) !important; box-shadow: 0 0 0 1000px #1b1f1d inset !important; } body.woocommerce-account #customer_login input.input-text, body.woocommerce-account #customer_login input.input-text:focus { color: rgba(255,255,255,.97) !important; -webkit-text-fill-color: rgba(255,255,255,.97); background-color: #1b1f1d !important; font-size: 15px !important; } /* Hakenkästchen im CI (Anmelden, Registrieren, Newsletter) — die Kasse hat eigene von Fluid Checkout */ body:not(.woocommerce-checkout) .woocommerce form input[type="checkbox"], body.woocommerce-account input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex: none; margin: 0 8px 0 0 !important; vertical-align: -5px; cursor: pointer; position: relative; border: 1.5px solid #7fb857 !important; border-radius: 5px !important; background: #1b1f1d !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); } body:not(.woocommerce-checkout) .woocommerce form input[type="checkbox"]:checked, body.woocommerce-account input[type="checkbox"]:checked { background: linear-gradient(180deg, #8fca63, #5e9a3a) !important; border-color: #8fca63 !important; } body:not(.woocommerce-checkout) .woocommerce form input[type="checkbox"]:checked::after, body.woocommerce-account input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #0d1108; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .woocommerce form input[type="checkbox"]:focus-visible { outline: 2px solid #b9ea8f; outline-offset: 2px; } /* „Jetzt kaufen" plastisch wie die Kaufknöpfe der Produktseite */ body.woocommerce-checkout #place_order, body.woocommerce-checkout .fc-place-order button[type="submit"] { background: linear-gradient(180deg, #a2dc74 0%, #6fae45 55%, #5e9a3a 100%) !important; color: #0d1108 !important; border: 1px solid #4f8a2e !important; border-radius: 10px !important; font-weight: 800 !important; letter-spacing: .06em; box-shadow: 0 6px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.18) !important; text-shadow: 0 1px 0 rgba(255,255,255,.25); } body.woocommerce-checkout #place_order:hover { filter: brightness(1.06); transform: translateY(-1px); } /* ======== 02.10. nachmittags — siebte Sichtprüfung ======== */ /* --- Suche am Rechner: kleinere Karten (mehr Spalten), Reihen passen in den Bildschirm (seller.js), Knopf darunter --- */ @media (min-width: 1400px) { body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten { --ts-columns: 6 !important; } } @media (min-width: 1200px) and (max-width: 1399px) { body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten { --ts-columns: 5 !important; } } @media (min-width: 992px) and (max-width: 1199px) { body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten { --ts-columns: 4 !important; } } @media (min-width: 768px) and (max-width: 991px) { body > .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten { --ts-columns: 3 !important; } } .ts-search-result-container .cfs-suchkarten .product-name, .ts-search-result-container .cfs-suchkarten .product-name a { font-size: 13.5px !important; line-height: 1.3 !important; } .ts-search-result-container .view-all-wrapper.cfs-mehr-treffer { padding: 18px 0 2px !important; text-align: center; } .ts-search-result-container .view-all-wrapper.cfs-mehr-treffer a { display: inline-flex !important; align-items: center; gap: 10px; padding: 13px 30px !important; border-radius: 10px !important; border: 1px solid #4f8a2e !important; background: linear-gradient(180deg, #a2dc74 0%, #6fae45 55%, #5e9a3a 100%) !important; color: #0d1108 !important; font-weight: 800 !important; font-size: 14px !important; letter-spacing: .06em; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.18); } .ts-search-result-container .view-all-wrapper.cfs-mehr-treffer a::after { content: "→"; font-size: 16px; } .ts-search-result-container .view-all-wrapper.cfs-mehr-treffer a:hover { filter: brightness(1.06); } /* Handy-Sidebar: gleiche, etwas kleinere Karten für Treffer und „nichts gefunden"; Platz für den Scrollbalken */ #ts-search-sidebar .ts-search-result-container { scrollbar-gutter: stable; padding-right: 6px !important; } #ts-search-sidebar .ts-search-result-container .woocommerce.main-products.grid.cfs-suchkarten .products { --ts-columns: 2 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } /* Lade-Symbol im Suchknopf = grüner Ring wie „Mehr anzeigen"; kein „Suchen"-Tooltip */ .ts-search-by-category .search-table .search-button::before { background: #1b1f1d !important; border-radius: 0 6px 6px 0; } .ts-search-by-category .search-table .loading .search-button::after, .ts-search-by-category .search-table .loading ~ .search-button::after, #ts-search-sidebar .ts-search-by-category .search-table .loading .search-button::after { width: 24px !important; height: 24px !important; margin: -12px 0 0 -12px !important; border: 3px solid rgba(154,208,114,.25) !important; border-top-color: #9ad072 !important; border-radius: 50% !important; animation: cfs-dreh .7s linear infinite !important; opacity: 1 !important; visibility: visible !important; } /* --- Kopfzeile: nie zwei Reihen (Tablet/gezoomt), Menüzeile mit Herz ebenfalls einzeilig --- */ @media (min-width: 768px) and (max-width: 1199px) { body header.ts-header .header-middle > .container { flex-wrap: nowrap !important; gap: 12px !important; } body header.ts-header .header-middle .header-left { flex: 0 0 auto !important; } body header.ts-header .header-middle .header-center { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } body header.ts-header .header-middle .header-right { flex: 0 0 auto !important; flex-wrap: nowrap !important; width: auto !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { display: inline-flex !important; } body header.ts-header .header-middle .logo img { max-height: 46px !important; width: auto !important; } body header.ts-header .header-middle .my-account-wrapper .account-control > a > span:not(.icon), body header.ts-header .header-middle .shopping-cart-wrapper .cart-total, body header.ts-header .header-middle .shopping-cart-wrapper .cart-text { display: none !important; } } /* Menü-Symbol (drei Striche) immer gleich: ohne grüne Fläche, ohne Rahmen, in jeder Breite */ .vertical-menu-heading .icon::before, .ts-mobile-icon-toggle .icon::before, .icon-menu-sticky-header .icon::before { background: transparent !important; color: inherit !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 3px 5px !important; } /* --- Sticky-Kopfzeile: keine Animation, keine Verwandlung — die Kopfzeile bleibt einfach stehen --- */ header .sticky-wrapper.is-sticky .header-sticky { animation: none !important; transition: none !important; } /* (02.10. abends) Sticky-Höhe wieder vom Theme (20 px) — meine Gleichsetzung machte die Kopfzeile beim Scrollen höher */ /* (14.10.) nur ab 768 px — am Handy überschrieb die Regel .hidden-phone: die ganze Menüzeile samt zweitem Herz lief in der Sticky-Kopfzeile mit */ @media (min-width: 768px) { .ts-header .is-sticky .header-bottom { display: block !important; } } .sticky-wrapper.is-sticky .icon-menu-sticky-header { display: none !important; } .is-sticky .header-top, .is-sticky .header-middle, .is-sticky .header-bottom { background-color: rgba(14,20,11,.96) !important; } /* --- Handy (≤ 767 px): nie breiter als der Bildschirm; Logo darf schrumpfen; Lupe und Badge so groß wie die Symbole --- */ /* (02.10. abends) kein overflow-x auf html/body: machte body zum zweiten Scrollbereich — zwei Scrollbalken, Footer unter den Produkten */ @media (max-width: 767px) { body header.ts-header .header-middle .header-left { flex: 0 1 auto !important; min-width: 0 !important; } body header.ts-header .header-middle .logo, body header.ts-header .header-middle .logo a { display: block; min-width: 0; max-width: 100%; } body header.ts-header .header-middle .logo img { height: auto !important; max-height: 44px !important; max-width: 100% !important; width: auto !important; margin: 0 !important; } body header.ts-header .header-middle .header-right { flex: 0 0 auto !important; } body header.ts-header .header-middle .search-button.search-icon { width: 36px !important; height: 36px !important; margin: 0 2px !important; padding: 0 !important; border-radius: 7px !important; } body header.ts-header .header-middle .search-button.search-icon .icon { width: 24px !important; height: 24px !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cf-versand-badge__link { height: 36px; box-sizing: border-box; padding: 0 8px !important; flex-direction: column; justify-content: center; align-items: flex-start !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cf-versand-badge__text { line-height: 1.05 !important; } .cfs-vb-lang { display: none; } .cfs-vb-kurz { display: inline !important; } /* Kategorieseiten: Überschrift und Text linksbündig wie am Rechner */ h1.cf-archiv-titel, .cf-archiv-text, .cf-archiv-text p { text-align: left !important; } /* Versand-Fenster am Handy: unter der Kopfzeile, volle Breite (öffnet per Antippen des Badges) */ header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__box { position: fixed !important; top: var(--cfs-kopf-unten, 70px) !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; } } .cfs-vb-kurz { display: none; } @media (max-width: 499px) { body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { display: inline-flex !important; } } @media (max-width: 359px) { body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { display: none !important; } } /* --- Hinweisfenster im CI (Kopfleiste je Schwelle, abgeschnittene Produktnamen, Herz) --- */ .cfs-tipp { position: fixed; z-index: 100000; max-width: min(320px, calc(100vw - 16px)); padding: 9px 13px; border-radius: 10px; background: linear-gradient(180deg, #2b4022 0%, #1c2a16 100%); border: 1px solid #7fb857; box-shadow: 0 10px 24px rgba(0,0,0,.5); color: rgba(255,255,255,.97); font-size: 13px; font-weight: 600; line-height: 1.35; pointer-events: none; animation: cfs-tipp .15s ease-out 1; } .cfs-tipp::after { content: ""; position: absolute; bottom: -6px; left: calc(var(--pfeil, 50%) - 5px); width: 10px; height: 10px; background: #1c2a16; border-right: 1px solid #7fb857; border-bottom: 1px solid #7fb857; transform: rotate(45deg); } .cfs-tipp.cfs-tipp-unten::after { bottom: auto; top: -6px; transform: rotate(225deg); background: #2b4022; } .cfs-kopfleiste .cfs-ernte-punkt { cursor: pointer; } .cfs-kopfleiste .cfs-ernte-punkt::before { content: ""; position: absolute; inset: -10px; } .cfs-kl-tipp b { font-size: 13.5px; } /* --- Schwelle erreicht: grüne Sonnenstrahlen statt Daumen (einmal, 2,2 s) --- */ .cfs-strahlen { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; pointer-events: none; z-index: 4; background: repeating-conic-gradient(from 0deg, rgba(185,234,143,.95) 0deg 7deg, rgba(185,234,143,0) 7deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 30% 58%, transparent 72%); mask: radial-gradient(circle, transparent 0 22%, #000 30% 58%, transparent 72%); animation: cfs-strahlen 2.2s cubic-bezier(.2,.7,.3,1) 1 forwards; } .cfs-strahlen::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; box-shadow: 0 0 18px 6px rgba(154,208,114,.75); } @keyframes cfs-strahlen { 0% { opacity: 0; transform: scale(.25) rotate(0deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) rotate(40deg); } } .cfs-ernte-punkt.cfs-noch-nicht { filter: saturate(.2) brightness(.7); } /* --- Mini-Warenkorb: Grundpreis klein unter der Zeilensumme, Kreuz im CI, Name oben, ein Lade-Ring über dem Bild --- */ .cart-dropdown-form .cart_list .subtotal .wc-gzd-cart-info.unit-price { display: block !important; font-size: 12.5px !important; font-weight: 400 !important; color: #b9c7b4 !important; line-height: 1.4; margin-top: 2px; } .cart-dropdown-form .cart_list .subtotal .wc-gzd-cart-info.unit-price * { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; } .cart-dropdown-form .cart_list li, .cart-dropdown-form .cart_list li .cart-item-wrapper { align-items: flex-start !important; } .cart-dropdown-form .cart_list li .product-name { margin-top: 0 !important; padding-top: 0 !important; } .cart_list li .cart-item-wrapper a.remove, .cart-dropdown-form .cart_list li a.remove { color: #9ad072 !important; background: transparent !important; border: 1px solid rgba(127,184,87,.55) !important; border-radius: 50% !important; } .cart_list li .cart-item-wrapper a.remove::before, .cart-dropdown-form .cart_list li a.remove::before { color: inherit !important; } .cart_list li .cart-item-wrapper a.remove:hover, .cart-dropdown-form .cart_list li a.remove:hover { background: #7fb857 !important; color: #12170f !important; } .cart-dropdown-form .cart_list li div.blockUI.blockOverlay::before { display: none !important; } .cart-dropdown-form .cart_list li div.blockUI.blockOverlay { background: rgba(18,23,15,.55) !important; } .cart-dropdown-form .cart_list li div.blockUI.blockOverlay::after, .dropdown-container ul.cart_list li.loading::after { content: "" !important; position: absolute !important; left: 22px !important; top: 50% !important; width: 40px !important; height: 40px !important; margin: -20px 0 0 0 !important; border: 3px solid rgba(154,208,114,.25) !important; border-top-color: #9ad072 !important; border-radius: 50% !important; background: none !important; animation: cfs-dreh .7s linear infinite !important; opacity: 1 !important; visibility: visible !important; } /* --- Produktseite: Warenkorb-Symbol bleibt nach dem Klick, kein Theme-Spinner; weniger Abstand zum Produkttext --- */ .single-product .summary form.cart .single_add_to_cart_button.loading::after, .single-product .summary form.cart .single_add_to_cart_button.added::after { content: "" !important; position: static !important; display: block !important; width: 20px !important; height: 20px !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; animation: none !important; opacity: 1 !important; visibility: visible !important; background: currentColor !important; -webkit-mask: var(--cfs-icon) center / contain no-repeat !important; mask: var(--cfs-icon) center / contain no-repeat !important; } .single-product .summary form.cart .single_add_to_cart_button.loading::before, .single-product .summary form.cart .single_add_to_cart_button.added::before { display: none !important; } .single-product .summary form.cart .single_add_to_cart_button.loading { opacity: .85; } .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .cfs-produkttext, .single-product div.product > .summary + * { margin-top: 18px !important; } .woocommerce div.product div.images, .woocommerce div.product div.summary { margin-bottom: 0 !important; } /* --- Warenkorb „Dazulegen" während des Ladens: dunkler Knopf mit grünem Ring statt hellgrüner Fläche --- */ .cf-auffuellen__knopf.loading, .cf-auffuellen__knopf.loading:hover { background: #12170f !important; color: transparent !important; border-color: #7fb857 !important; position: relative; } .cf-auffuellen__knopf.loading::after { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 22px !important; height: 22px !important; margin: -11px 0 0 -11px !important; border: 3px solid rgba(154,208,114,.25) !important; border-top-color: #9ad072 !important; border-radius: 50% !important; animation: cfs-dreh .7s linear infinite !important; opacity: 1 !important; visibility: visible !important; background: none !important; } .cf-auffuellen__knopf.loading::before { display: none !important; } .cf-auffuellen__knopf.added::after, .cf-auffuellen__knopf.added::before { display: none !important; } /* --- Warenkorb am Rechner: Summenbox rechts neben den Produkten, Gutscheinfeld links darunter --- */ .cfs-wk-spalten .cart-collaterals { position: absolute !important; right: 0; width: 340px !important; max-width: 340px !important; margin: 0 !important; } .cfs-wk-spalten .woocommerce-cart-form table.cart { width: calc(100% - 366px) !important; } .cfs-wk-spalten .woocommerce-cart-form table.shop_table th.product-thumbnail, .cfs-wk-spalten .woocommerce-cart-form table.shop_table td.product-thumbnail { width: 96px !important; padding-left: 10px !important; } .cfs-wk-spalten .woocommerce-cart-form table.shop_table td.product-thumbnail img { width: 80px !important; height: 80px !important; } .cfs-wk-spalten .woocommerce-cart-form th.product-subtotal, .cfs-wk-spalten .woocommerce-cart-form td.product-subtotal { min-width: 96px !important; } .cfs-wk-spalten .woocommerce-cart-form td.product-name { min-width: 200px; } .woocommerce-cart table.cart td.actions .coupon { order: 1 !important; margin: 0 auto 0 0 !important; } .woocommerce-cart table.cart td.actions .empty-cart-button { order: 2 !important; } /* --- Kasse: Zusagen oben im Periodensystem-Grün abgesetzt, großer plastischer Haken; Kundenstimmen in Oliv mit Anführungszeichen --- */ body.woocommerce-checkout .cfs-zusagen .cfs-zusage { background: linear-gradient(180deg, #0f6449 0%, #0a503c 100%) !important; border: 1px solid rgba(154,208,114,.55) !important; padding-left: 66px !important; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage::before { left: 14px !important; top: 50% !important; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 50%; transform: translateY(-50%) !important; background: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); } body.woocommerce-checkout .cfs-stimmen blockquote { background: linear-gradient(180deg, rgba(47,58,18,.95) 0%, rgba(30,38,12,.95) 100%) !important; border: 1px solid rgba(185,200,120,.35) !important; border-left: 4px solid #b9c878 !important; padding-left: 46px !important; } body.woocommerce-checkout .cfs-stimmen blockquote::before { content: "„" !important; display: block !important; position: absolute; left: 14px; top: 2px; font-size: 44px; line-height: 1; font-style: normal; color: #b9c878; opacity: .85; } body.woocommerce-checkout .cfs-stimmen { gap: 12px; } /* Gesamtsumme + MwSt.: die MwSt. steht klein direkt unter dem Betrag */ .fc-checkout-order-review tfoot tr.order-total td .cfs-mwst { display: block; font-size: 12px; font-weight: 400; color: #b9c7b4; line-height: 1.3; margin-top: 2px; text-align: right; } /* --- Konto: dasselbe Herz wie auf der Wunschliste, gefüllt, größer, direkt am Wort --- */ .cfs-herz-familie { display: inline-block; width: 22px; height: 22px; margin-left: 4px; vertical-align: -3px; background: #7fb857; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Konto-Unterseiten (Meine Produkte, Vorlieben, Geburtstag) */ .cfs-konto-hinweis { color: #c5cbbb; margin: 0 0 16px; } .cfs-vorlieben-gruppe { border: 0; margin: 0 0 18px; padding: 0; } .cfs-vorlieben-gruppe legend { font-weight: 700; margin-bottom: 8px; color: rgba(255,255,255,.97); } .cfs-chips { display: flex; flex-wrap: wrap; gap: 8px; } .cfs-chip input { position: absolute; opacity: 0; pointer-events: none; } .cfs-chip span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(127,184,87,.5); background: rgba(18,23,15,.6); color: rgba(255,255,255,.97); cursor: pointer; font-size: 14px; } .cfs-chip input:checked + span { background: linear-gradient(180deg, #8fca63, #5e9a3a); color: #0d1108; border-color: #8fca63; font-weight: 700; } .cfs-chip input:focus-visible + span { outline: 2px solid #b9ea8f; outline-offset: 2px; } .cfs-geburtstag-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cfs-geburtstag-form label { width: 100%; font-weight: 700; } .cfs-geburtstag-form input[type="date"] { background: #1b1f1d; color: rgba(255,255,255,.97); border: 1px solid #7fb857; border-radius: 8px; padding: 10px 12px; color-scheme: dark; } .button.cfs-knopf-plastisch { background: linear-gradient(180deg, #a2dc74 0%, #6fae45 55%, #5e9a3a 100%) !important; color: #0d1108 !important; border: 1px solid #4f8a2e !important; border-radius: 10px !important; font-weight: 800 !important; box-shadow: 0 6px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.18) !important; } .cfs-tun-geburtstag { border-style: dashed !important; } /* Handy 380–499 px: Logo behält mindestens 108 px, das Badge wird dafür knapper */ @media (max-width: 499px) { body header.ts-header .header-middle .header-left { min-width: 108px !important; } body header.ts-header .header-middle .header-right { gap: 0 !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cf-versand-badge__link { padding: 0 6px !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cfs-vb-oben { font-size: 7.8px !important; letter-spacing: 0 !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile .cfs-vb-unten { font-size: 11.5px !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { margin: 0 4px !important; } } @media (max-width: 379px) { body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { display: none !important; } } @media (max-width: 399px) { body header.ts-header .header-middle > .container { padding-left: 6px !important; padding-right: 6px !important; } body header.ts-header .header-middle .header-left { min-width: 96px !important; } body header.ts-header .header-right .my-wishlist-wrapper.cfs-herz-handy .tini-wishlist { padding: 0 5px !important; } } /* Menüzeile (768–991 px): kleinere Schrift statt Umbau der Menü-Struktur (der Flex-Umbau zerlegte das Megamenü) */ @media (min-width: 768px) and (max-width: 991px) { body header.ts-header .header-bottom nav > ul.menu > li > a { font-size: 14px !important; } body header.ts-header .header-bottom nav > ul.menu { gap: 0 10px !important; } } /* ======== 02.10. abends — achte Sichtprüfung ======== */ /* Produktraster nie breiter als der Inhaltsbereich: der Inhaltsbereich ist ein Raster, dessen Kinder sonst ihre Inhaltsbreite erzwingen (bei 850–1100 px ragten Karten rechts aus dem Bild). Spalten passend zur Breite. */ .main-products, #primary > .main-products, .site-content > .main-products, .main-products .products, .main-products .products > section.product, .products > section.product .product-wrapper { min-width: 0 !important; max-width: 100%; } .main-products .products { width: 100% !important; box-sizing: border-box; } @media (min-width: 992px) and (max-width: 1199px) { .woocommerce.main-products.grid:not(.cfs-suchkarten) { --ts-columns: 4 !important; } } @media (min-width: 768px) and (max-width: 991px) { .woocommerce.main-products.grid:not(.cfs-suchkarten) { --ts-columns: 3 !important; } } /* ======== 02.10. abends — achte Sichtprüfung (Fortsetzung) ======== */ /* Kopfleiste: liegt über der Menüzeile (Fenster war verdeckt); Fenster listet alles, was man an der Schwelle hat */ header.ts-header .cfs-kopfleiste { position: relative; z-index: 1001; } .cfs-kl-tipp { min-width: 170px; } .cfs-kl-liste { list-style: none; margin: 0 0 6px !important; padding: 0 !important; } .cfs-kl-liste li { margin: 0; padding: 0 0 0 16px; position: relative; font-weight: 600; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.97); } .cfs-kl-liste li::before { content: "✓"; position: absolute; left: 0; color: #9ad072; font-weight: 800; } .cfs-kl-liste li:first-child { font-weight: 800; font-size: 13.5px; } .cfs-kl-stand { display: block; color: #b9c7b4; font-size: 12px; border-top: 1px solid rgba(127,184,87,.3); padding-top: 5px; } .cfs-kl-ist .cfs-kl-stand { color: #9ad072; } /* nächste Schwelle blinkt nach dem Erreichen zweimal grün */ .cfs-ernte-punkt.cfs-blink2 { animation: cfs-blink2 .55s ease-in-out 2; } @keyframes cfs-blink2 { 0%, 100% { box-shadow: 0 0 0 4px rgba(127,184,87,.25), 0 1px 3px rgba(0,0,0,.5); background-color: inherit; } 50% { box-shadow: 0 0 0 7px rgba(154,208,114,.55), 0 0 18px 6px rgba(154,208,114,.85); background-color: #9ad072; } } .cfs-ernte-punkt.cfs-noch-nicht { filter: none !important; } /* Sticky (ab 768 px): Menüzeile weg, Menü-Knopf links neben der Kopfleiste holt sie zurück; Platz ist immer reserviert → kein Zucken */ @media (min-width: 768px) { .cfs-kopfleiste .cfs-ernte-leiste { margin-left: 52px !important; } .cfs-menue-knopf { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 34px; height: 30px; padding: 6px 7px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(127,184,87,.55); border-radius: 7px; background: #12170f; cursor: pointer; visibility: hidden; opacity: 0; transition: opacity .15s; } .cfs-menue-knopf span { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.97); } .is-sticky .cfs-menue-knopf { visibility: visible; opacity: 1; } .cfs-menue-knopf:hover, .cfs-menue-offen .cfs-menue-knopf { background: #7fb857; border-color: #7fb857; } .cfs-menue-knopf:hover span, .cfs-menue-offen .cfs-menue-knopf span { background: #12170f; } body header.ts-header .is-sticky .header-bottom { display: none !important; } body header.ts-header.cfs-menue-offen .is-sticky .header-bottom { display: block !important; } } @media (max-width: 767px) { .cfs-menue-knopf { display: none !important; } } /* 15.10. (Felix: „Das Herz muss immer sichtbar sein“): Ab 768 px blendet die mitlaufende Kopfzeile die Menüzeile samt Herz aus → dort steht das Herz (dieselbe Kopie wie am Handy, seller.js handyKopf) in der Kopfzeile vor dem Einkaufswagen; klappt der Menü-Knopf die Menüzeile auf, nur deren Herz. */ @media (min-width: 768px) { body header.ts-header .is-sticky .header-right .my-wishlist-wrapper.cfs-herz-handy { display: inline-flex !important; align-items: center; line-height: 0; transform: none; } body header.ts-header .is-sticky .header-right .my-wishlist-wrapper.cfs-herz-handy .tini-wishlist { padding: 0 10px; position: relative; } body header.ts-header.cfs-menue-offen .is-sticky .header-right .my-wishlist-wrapper.cfs-herz-handy { display: none !important; } } body header.ts-header .sticky-wrapper.is-sticky .icon-menu-sticky-header, body header.ts-header .is-sticky .icon-menu-sticky-header { display: none !important; } /* Handy: Lupe immer links neben dem Gratisversand-Badge */ @media (max-width: 767px) { body header.ts-header .header-middle .search-button.search-icon { order: -2 !important; } body header.ts-header .header-middle .header-right .cf-versand-badge--kopfzeile { order: -1 !important; margin: 0 4px 0 2px !important; } } /* Mini-Warenkorb: Lade-Ring genau mittig über dem Produktbild */ .dropdown-container ul.cart_list li.loading::after, .cart-dropdown-form .cart_list li div.blockUI.blockOverlay::after { display: none !important; } .dropdown-container ul.cart_list li > a.thumbnail { position: relative; display: block; } .dropdown-container ul.cart_list li.loading > a.thumbnail::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(154,208,114,.25); border-top-color: #9ad072; border-radius: 50%; animation: cfs-dreh .7s linear infinite; z-index: 5; box-sizing: border-box; } .dropdown-container ul.cart_list li.loading > a.thumbnail img { opacity: .45; } /* Produktseite: Variantenpreis (erscheint, sobald eine Menge gewählt ist) steht an derselben Stelle wie der Preis */ .woocommerce div.product div.summary > .ts-variation-price { grid-row: 2; grid-column: 1; align-self: center; margin: 0 0 2px !important; } .woocommerce div.product div.summary > .ts-variation-price.hidden { display: none !important; } .woocommerce div.product div.summary > .ts-variation-price .price { margin: 0 !important; } /* Warenkorb: Produkte volle Breite, Summenbox rechts auf Höhe des Gutscheinfelds */ .cfs-wk-spalten .woocommerce-cart-form table.cart { width: 100% !important; } .cfs-wk-spalten .woocommerce-cart-form table.cart td.actions { padding-right: 380px !important; } .cfs-wk-spalten .woocommerce-cart-form table.shop_table th.product-thumbnail, .cfs-wk-spalten .woocommerce-cart-form table.shop_table td.product-thumbnail { width: 126px !important; padding-left: 16px !important; } .cfs-wk-spalten .woocommerce-cart-form table.shop_table td.product-thumbnail img { width: 110px !important; height: 110px !important; } body.woocommerce-cart .elementor-widget-heading h1, body.woocommerce-cart .elementor-widget-heading .elementor-heading-title, body.woocommerce-cart h1.cfs-seitentitel { margin-top: 0 !important; } /* Warenkorb: vier Boxen statt zweitem Balken, Pfeil zur nächsten leuchtet */ .cfs-boxen { display: flex; align-items: stretch; gap: 0; margin: 4px 0 14px; } .cfs-box { flex: 1 1 0; min-width: 0; position: relative; padding: 12px 12px 11px; border-radius: 12px; border: 1px solid rgba(127,184,87,.3); background: rgba(18,23,15,.55); display: flex; flex-direction: column; gap: 2px; opacity: .78; } .cfs-box-titel { font-size: 14px; line-height: 1.25; color: rgba(255,255,255,.97); } .cfs-box-ab { font-size: 12px; color: #b9c7b4; } .cfs-box-stand { font-size: 13px; font-weight: 700; color: #d6e8c4; margin-top: 4px; } .cfs-box-haken { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(127,184,87,.45); } .cfs-box-ist { opacity: 1; border-color: #8fca63; background: linear-gradient(180deg, #2f5a21 0%, #1f3d16 100%); box-shadow: 0 0 0 1px rgba(154,208,114,.25), 0 6px 18px rgba(127,184,87,.25); } .cfs-box-ist .cfs-box-stand { color: #b9ea8f; } .cfs-box-ist .cfs-box-haken { border: 0; background: linear-gradient(180deg, #a2dc74, #5e9a3a); } .cfs-box-ist .cfs-box-haken::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #0d1108; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .cfs-box-naechste { opacity: 1; border-color: #9ad072; border-style: dashed; } .cfs-boxen-pfeil { flex: 0 0 28px; position: relative; align-self: center; height: 14px; opacity: .35; } .cfs-boxen-pfeil::before { content: ""; position: absolute; left: 4px; right: 9px; top: 6px; height: 2px; background: #7fb857; } .cfs-boxen-pfeil::after { content: ""; position: absolute; right: 4px; top: 2px; width: 8px; height: 8px; border-top: 2px solid #7fb857; border-right: 2px solid #7fb857; transform: rotate(45deg); } .cfs-boxen-pfeil.cfs-pfeil-ist { opacity: .75; } .cfs-boxen-pfeil.cfs-pfeil-naechster { opacity: 1; filter: drop-shadow(0 0 4px #9ad072) drop-shadow(0 0 8px rgba(154,208,114,.8)); } .cfs-boxen-pfeil.cfs-pfeil-naechster::before, .cfs-boxen-pfeil.cfs-pfeil-naechster::after { background-color: #b9ea8f; border-color: #b9ea8f; } @media (max-width: 767px) { .cfs-boxen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cfs-boxen-pfeil { display: none; } .cfs-box { padding: 10px; } .cfs-box-titel { font-size: 13px; } } /* Kasse: Zusagen mit größerer Schrift (Platz nutzen); MwSt.-Text unter „Gesamtsumme", Betrag unter dem Betrag; Stimmen unter der Bestellübersicht */ body.woocommerce-checkout .cfs-zusagen .cfs-zusage { font-size: 15px !important; line-height: 1.4 !important; padding-top: 16px !important; padding-bottom: 16px !important; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage strong { font-size: 16.5px; } @media (max-width: 1100px) { body.woocommerce-checkout .cfs-zusagen .cfs-zusage { font-size: 13.5px !important; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage strong { font-size: 14.5px; } } .fc-checkout-order-review tfoot tr.order-total th .cfs-mwst-text { text-align: left; text-transform: none; letter-spacing: 0; } .fc-checkout-order-review tfoot tr.order-total .cfs-mwst { font-size: 12px !important; font-weight: 400 !important; color: #b9c7b4 !important; line-height: 1.3; margin-top: 2px; } body.woocommerce-checkout .fc-sidebar__inner > .cfs-stimmen { margin: 12px 0 0 !important; gap: 10px; } body.woocommerce-checkout .fc-sidebar__inner > .cfs-stimmen blockquote { font-size: 16.5px !important; padding-top: 12px !important; padding-bottom: 12px !important; } /* Konto: Herz so groß wie die Schrift; Kacheln gleich hoch mit Symbol; zwei große Kacheln farblich abgesetzt */ .cfs-herz-familie { width: 1em !important; height: 1em !important; vertical-align: -0.12em !important; margin-left: .18em !important; } .cfs-tun-kacheln { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch !important; } .cfs-tun-kacheln > .cfs-tun-kachel { min-width: 0 !important; height: 100%; box-sizing: border-box; padding-left: 62px !important; position: relative; } .cfs-tun-kacheln > .cfs-tun-kachel::before { content: ""; position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; background: #9ad072; -webkit-mask: var(--cfs-ik) center / contain no-repeat; mask: var(--cfs-ik) center / contain no-repeat; } .cfs-ik-freunde { --cfs-ik: url("data:image/svg+xml;utf8,"); } .cfs-ik-korb { --cfs-ik: url("data:image/svg+xml;utf8,"); } .cfs-ik-liste { --cfs-ik: url("data:image/svg+xml;utf8,"); } @media (max-width: 991px) { .cfs-tun-kacheln { grid-template-columns: 1fr; } } .cfs-tun-gross { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; margin: 12px 0 22px; align-items: stretch; } @media (max-width: 991px) { .cfs-tun-gross { grid-template-columns: 1fr; } } .cfs-kachel-gross { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 18px 66px; border-radius: 14px; border: 1px solid rgba(154,208,114,.5); background: linear-gradient(160deg, #0f6449 0%, #0a503c 55%, #083d2e 100%); box-shadow: 0 10px 24px rgba(0,0,0,.25); color: rgba(255,255,255,.97); } .cfs-kachel-gross::before { content: ""; position: absolute; left: 18px; top: 18px; width: 34px; height: 34px; background: #b9ea8f; -webkit-mask: var(--cfs-ik) center / contain no-repeat; mask: var(--cfs-ik) center / contain no-repeat; } .cfs-kachel-vorlieben { --cfs-ik: url("data:image/svg+xml;utf8,"); } .cfs-kachel-geburtstag { --cfs-ik: url("data:image/svg+xml;utf8,"); } .cfs-kachel-gross .cfs-tun-kachel-titel { font-size: 17px; font-weight: 800; color: #fff; } .cfs-kachel-gross .cfs-tun-kachel-text { color: #d6e8dc; font-size: 13.5px; line-height: 1.45; } .cfs-chip-titel { display: block; margin: 6px 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #b9ea8f; } .cfs-kachel-gross .cfs-chips { display: flex; flex-wrap: wrap; gap: 8px; } .cfs-kachel-gross .cfs-chip input { position: absolute; opacity: 0; pointer-events: none; } .cfs-kachel-gross .cfs-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(185,234,143,.55); background: rgba(8,30,22,.55); color: #fff; cursor: pointer; font-size: 14px; font-weight: 600; transition: transform .12s ease, background .12s ease; user-select: none; } .cfs-kachel-gross .cfs-chip span:hover { transform: translateY(-1px); border-color: #b9ea8f; } .cfs-kachel-gross .cfs-chip input:checked + span { background: linear-gradient(180deg, #a2dc74 0%, #6fae45 60%, #5e9a3a 100%); color: #0d1108; border-color: #b9ea8f; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 8px rgba(0,0,0,.25); } .cfs-kachel-gross .cfs-chip input:checked + span::before { content: "✓"; font-weight: 800; } .cfs-kachel-gross .cfs-chip input:focus-visible + span { outline: 2px solid #b9ea8f; outline-offset: 2px; } .cfs-kachel-meldung { min-height: 1.2em; font-size: 13.5px; font-weight: 700; color: #b9ea8f; opacity: 0; transition: opacity .2s; } .cfs-kachel-meldung.cfs-zeigen { opacity: 1; } .cfs-kachel-meldung.cfs-fehler { color: #f0c36b; } .cfs-kachel-geburtstag .cfs-geburtstag-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; } .cfs-kachel-geburtstag input[type="date"] { flex: 1 1 150px; min-width: 0; background: rgba(8,30,22,.7); color: #fff; border: 1px solid rgba(185,234,143,.6); border-radius: 8px; padding: 10px 12px; color-scheme: dark; font-size: 15px; } /* Hinweise von WooCommerce seitenweit im CI — nie mehr der weiße Balken */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { background: linear-gradient(180deg, #2b4022 0%, #1c2a16 100%) !important; color: rgba(255,255,255,.97) !important; border: 1px solid #7fb857 !important; border-radius: 12px !important; box-shadow: 0 8px 20px rgba(0,0,0,.3) !important; } .woocommerce-error, .wc-block-components-notice-banner.is-error { border-color: #e0a43a !important; } .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { color: #b9ea8f !important; } .woocommerce-message::before, .woocommerce-info::before { color: #9ad072 !important; } .woocommerce-error::before { color: #e0a43a !important; } .wc-block-components-notice-banner > svg { fill: #9ad072 !important; background: transparent !important; } /* Footer-Newsletter: kleiner Hinweis unter dem Formular */ .cf-footer-nl-hinweis { margin: 10px 0 0 !important; font-size: 12.5px; line-height: 1.5; color: #b9c7b4; } .cf-spare.cf-spare-aus { opacity: .6; filter: saturate(.5); } /* ======== 02.10. später Abend — neunte Sichtprüfung ======== */ /* Aufklappfenster von Konto und Warenkorb liegen über der Kopfleiste; die Kopfleiste über der Menüzeile */ body header.ts-header .header-middle { position: relative; z-index: 1002; } /* Kopfleiste ohne Sticky: grüner Balken 50 % durchscheinend, im Sticky-Kopf voll */ header.ts-header .cfs-kopfleiste .cfs-ernte-fuell { opacity: 1; } /* 05.10. abends: Dämpfung zurückgenommen (Felix) */ header.ts-header .is-sticky .cfs-kopfleiste .cfs-ernte-fuell { opacity: 1; } /* Fenster der Schwellen: keine Aufzählungspunkte, alle Zeilen gleich ausgerichtet */ .cfs-kl-tipp ul.cfs-kl-liste, .cfs-kl-tipp ul.cfs-kl-liste li { list-style: none !important; } .cfs-kl-tipp ul.cfs-kl-liste li { margin: 0 !important; padding: 0 0 0 17px !important; text-indent: 0 !important; font-size: 13px !important; font-weight: 700 !important; } .cfs-kl-tipp ul.cfs-kl-liste li::marker { content: none; } .cfs-kl-tipp ul.cfs-kl-liste li::before { left: 0; top: 0; width: 14px; text-align: left; } .cfs-kl-tipp ul.cfs-kl-liste li:first-child { font-size: 13px !important; } /* Menü-Knopf links neben der Kopfleiste: dieselben drei weißen Striche wie im Menü — ohne Fläche, ohne Rahmen */ .cfs-menue-knopf { border: 0 !important; background: transparent !important; padding: 7px 6px !important; width: 32px !important; height: 28px !important; } .cfs-menue-knopf span { height: 2px !important; background: rgba(255,255,255,.97) !important; } .cfs-menue-knopf:hover, .cfs-menue-offen .cfs-menue-knopf { background: transparent !important; } .cfs-menue-knopf:hover span, .cfs-menue-offen .cfs-menue-knopf span { background: #9ad072 !important; } /* Handy: Menü-Knopf immer links neben der Kopfleiste (öffnet das Handy-Menü), oben im Kopf kein zweiter */ @media (max-width: 767px) { .cfs-menue-knopf { display: flex !important; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); flex-direction: column; justify-content: space-between; visibility: visible !important; opacity: 1 !important; cursor: pointer; } .cfs-kopfleiste .cfs-ernte-leiste { margin-left: 44px !important; } body header.ts-header .header-middle .ts-mobile-icon-toggle { display: none !important; } } /* Warenkorb-Boxen: größere Schrift, alle Vorteile untereinander, Abstand mit Pfeil mittig dazwischen */ .cfs-boxen { gap: 10px !important; align-items: stretch; } .cfs-box { padding: 14px 14px 12px !important; gap: 6px !important; } .cfs-box-ab { font-size: 14px !important; font-weight: 700; color: #b9ea8f !important; } .cfs-box-liste { list-style: none !important; margin: 0 !important; padding: 0 !important; } .cfs-box-liste li { list-style: none !important; position: relative; padding-left: 18px; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: rgba(255,255,255,.97); } .cfs-box-liste li::before { content: "✓"; position: absolute; left: 0; color: #9ad072; } .cfs-box:not(.cfs-box-ist) .cfs-box-liste li::before { color: rgba(154,208,114,.5); } .cfs-box-stand { font-size: 14.5px !important; margin-top: auto !important; padding-top: 6px; } .cfs-box-haken { display: none !important; } .cfs-boxen-pfeil { flex: 0 0 26px !important; height: 18px !important; align-self: center !important; } .cfs-boxen-pfeil::before { top: 8px !important; } .cfs-boxen-pfeil::after { top: 4px !important; width: 9px !important; height: 9px !important; } /* Herzen der Wunschliste überall = das Herz aus dem Menü (Theme-Schrift tb-icon) */ a.cfs-herz-knopf { background: none !important; -webkit-mask: none !important; mask: none !important; width: auto !important; height: auto !important; font-size: 17px !important; line-height: 1 !important; color: #9ad072 !important; opacity: 1 !important; display: inline-flex !important; align-items: center; } a.cfs-herz-knopf::before { font-family: 'tb-icon' !important; content: "\e97c" !important; font-size: 17px; line-height: 1; } a.cfs-herz-knopf.added::before, a.ts-add-to-wishlist.added::before { content: "\e97d" !important; } a.ts-add-to-wishlist:not(.added)::before, .product-group-button > div.wishlist a:not(.added)::before { content: "\e97c" !important; } .cfs-name-zeile { display: inline-flex !important; align-items: center; gap: 6px; flex-wrap: nowrap; } .cfs-name-zeile > a:first-child { line-height: 1.3; } /* Badge „+39,99 € → 15 €-Gutschein": Pfeil als Grafik, mittig */ .cfs-pfeil { display: inline-block; width: 13px; height: 13px; margin: 0 4px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Warenkorb: Summenbox breit genug (kein Umbruch bei „Kostenlose Lieferung"), Überschrift größer und unterstrichen, weniger Luft über der H1 */ .cfs-wk-spalten .cart-collaterals { width: 380px !important; max-width: 380px !important; } .cfs-wk-spalten .woocommerce-cart-form table.cart td.actions { padding-right: 410px !important; } .woocommerce-cart .cart-collaterals .cart_totals > h2 { font-size: 22px !important; font-weight: 800 !important; padding-bottom: 8px !important; margin-bottom: 10px !important; border-bottom: 2px solid #7fb857 !important; display: block; } body.woocommerce-cart .elementor-section:first-child, body.woocommerce-cart .e-con:first-child, body.woocommerce-cart #main > .page-container, body.woocommerce-cart .site-content { padding-top: 6px !important; margin-top: 0 !important; } /* Kasse: Trusted-Shops-Kasten — Siegel statt Haken links, Text einzeilig */ body.woocommerce-checkout .cfs-zusagen .cfs-zusage.cf-zusage-ts { padding-right: 16px !important; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage.cf-zusage-ts::after { display: none !important; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage.cf-zusage-ts::before { background: url("/wp-content/uploads/2023/06/hauptbild_original.png") center / contain no-repeat !important; border-radius: 50%; } body.woocommerce-checkout .cfs-zusagen .cfs-zusage.cf-zusage-ts strong { white-space: nowrap; } /* Kasse: Kundenstimmen links, Sterne + Quelle */ body.woocommerce-checkout .cfs-stimmen blockquote { font-size: 16.5px !important; } body.woocommerce-checkout .cfs-stimmen .cfs-sterne { display: block; font-style: normal; color: #f5c518; letter-spacing: 2px; font-size: 15px; margin-bottom: 4px; } body.woocommerce-checkout .cfs-stimmen .cfs-stimme-quelle { display: block; font-style: normal; font-size: 12px; color: #b9c7b4; margin-top: 6px; } /* Konto: große Kacheln — Titel so groß wie das Symbol, Texte größer, Datum und Knopf gleich hoch */ .cfs-kachel-gross { padding-left: 70px !important; gap: 10px !important; } .cfs-kachel-gross::before { width: 32px !important; height: 32px !important; left: 22px !important; top: 20px !important; } .cfs-kachel-gross .cfs-tun-kachel-titel { font-size: 26px !important; line-height: 32px !important; white-space: nowrap; } .cfs-kachel-gross .cfs-tun-kachel-text { font-size: 15.5px !important; } .cfs-chip-titel { font-size: 14.5px !important; margin-top: 8px !important; } .cfs-kachel-gross .cfs-chip span { font-size: 15px !important; padding: 9px 16px !important; } .cfs-kachel-geburtstag .cfs-geburtstag-form { align-items: stretch !important; } .cfs-kachel-geburtstag .cfs-geburtstag-form input[type="date"], .cfs-kachel-geburtstag .cfs-geburtstag-form .button { height: 48px !important; box-sizing: border-box; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; } @media (max-width: 600px) { .cfs-kachel-gross .cfs-tun-kachel-titel { font-size: 21px !important; white-space: normal; } } /* Geburtstag: drei Auswahlfelder Tag/Monat/Jahr im CI statt nativem Datumsfeld (14.10.2026) – eigene Zeile, Knopf darunter, gleiche Höhe. Selektor mit .cfs-kachel-geburtstag, weil die globale select-Regel des Child-Themes (Rahmen/Fläche !important) später lädt. */ .cfs-kachel-geburtstag .cfs-geb-auswahl { display: flex; gap: 4px; flex: 0 1 auto; min-width: 0; } /* 15.10.: kompakt wie das alte Datumsfeld, Knopf rechts in derselben Zeile */ /* Drei Felder brauchen mehr Platz als das alte Datumsfeld: Formular darf umbrechen (Knopf bleibt rechts, rückt bei Platzmangel darunter) */ .cfs-tun-gross > .cfs-kachel-gross > .cfs-geburtstag-form:has(.cfs-geb-auswahl), .cfs-kachel-geburtstag .cfs-geburtstag-form:has(.cfs-geb-auswahl) { flex-wrap: wrap !important; row-gap: 10px; } .cfs-kachel-geburtstag .cfs-geb-auswahl select { -webkit-appearance: none; appearance: none; height: 48px; box-sizing: border-box; margin: 0 !important; padding: 0 24px 0 10px !important; border: 1px solid #7fb857 !important; border-radius: 8px !important; background: #1b1f1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239ad072' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center !important; color: rgba(255,255,255,.97) !important; font-family: inherit !important; font-size: 14px !important; letter-spacing: normal; line-height: 46px; cursor: pointer; color-scheme: dark; text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s; } .cfs-kachel-geburtstag .cfs-geb-auswahl .cfs-geb-tag { flex: 0 0 62px; } .cfs-kachel-geburtstag .cfs-geb-auswahl .cfs-geb-monat { flex: 0 0 112px; min-width: 0; } .cfs-kachel-geburtstag .cfs-geb-auswahl .cfs-geb-jahr { flex: 0 0 74px; } .cfs-kachel-geburtstag .cfs-geburtstag-form:has(.cfs-geb-auswahl) { column-gap: 10px !important; } .cfs-kachel-geburtstag .cfs-geburtstag-form:has(.cfs-geb-auswahl) > .button, .cfs-kachel-geburtstag .cfs-geburtstag-form:has(.cfs-geb-auswahl) > p:has(> .button) { margin: 0 0 0 auto !important; flex: 0 0 auto; display: flex; } /* Knopf steckt nach wpautop in einem

*/ .cfs-kachel-geburtstag .cfs-geb-auswahl select:hover { border-color: #9ad072 !important; } .cfs-kachel-geburtstag .cfs-geb-auswahl select:focus, .cfs-kachel-geburtstag .cfs-geb-auswahl select:focus-visible { outline: none; border-color: #9ad072 !important; box-shadow: 0 0 0 2px rgba(154,208,114,.35) !important; } .cfs-kachel-geburtstag .cfs-geb-auswahl select option { background: #12170f !important; color: rgba(255,255,255,.97) !important; } .cfs-kachel-geburtstag .cfs-geb-auswahl select option:disabled { color: #5d6858 !important; } /* ======== 05.10. — zehnte Sichtprüfung ======== */ /* Herz-Knöpfe wieder sichtbar: die alte Regel (::before ausgeblendet) verdeckte das Menü-Herz seit 0.11.0 */ a.cfs-herz-knopf::before { display: inline-block !important; } /* Warenkorb-Boxen: Schrift nutzt die Box, kleiner Hover-Effekt */ .cfs-box { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .cfs-box:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(154,208,114,.35), 0 10px 24px rgba(127,184,87,.3); border-color: #9ad072; } .cfs-box-ab { font-size: 17px !important; } .cfs-box-liste li { font-size: 19px !important; line-height: 1.35 !important; padding-left: 22px !important; } .cfs-box-stand { font-size: 16px !important; } @media (max-width: 1100px) { .cfs-box-liste li { font-size: 16.5px !important; } } /* Hervorgehobener Pfeil = derselbe Winkelpfeil, nur hellgrün mit Schein (vorher füllte die Farbe die Spitze zu einem Viereck) */ .cfs-boxen-pfeil.cfs-pfeil-naechster::before { background-color: #b9ea8f !important; } .cfs-boxen-pfeil.cfs-pfeil-naechster::after { background: transparent !important; border-color: #b9ea8f !important; } /* Nächste Schwelle: einmal kurz aufleuchten, 2 s nach dem Laden (Klasse setzt seller.js), keine Dauer-Animation */ @keyframes cfs-box-hallo { 0%, 100% { transform: none; box-shadow: none; } 30% { transform: scale(1.045); box-shadow: 0 0 0 2px #9ad072, 0 0 26px rgba(154,208,114,.7); } 60% { transform: scale(.99); } } .cfs-box-naechste.cfs-hallo { animation: cfs-box-hallo .9s ease-in-out 2; } @media (prefers-reduced-motion: reduce) { .cfs-box-naechste.cfs-hallo { animation: none; } } /* „Warenkorb-Summe" groß und präsent */ .woocommerce-cart .cart-collaterals .cart_totals > h2 { font-size: 30px !important; line-height: 1.15 !important; } /* Ein Knopftyp (Felix, 05.10.): wie „Gutschein anwenden" — auch die bisher plastischen Konto-Knöpfe */ .button.cfs-knopf-plastisch, .button.cfs-vorlieben-speichern { background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px !important; text-transform: uppercase; letter-spacing: .04em; font-weight: 700 !important; font-size: 13px !important; box-shadow: none !important; text-shadow: none !important; } .button.cfs-knopf-plastisch:hover, .button.cfs-vorlieben-speichern:hover { background: #7fb857 !important; color: #12170f !important; } /* Vorlieben: Speichern-Knopf unter den Chips, Meldung daneben; Vorschläge blenden sanft ein */ .cfs-vorlieben-fuss { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .cfs-vorlieben-fuss .cfs-kachel-meldung { margin: 0 !important; } .button.cfs-vorlieben-speichern { height: 44px; padding: 0 22px !important; line-height: 42px !important; } .button.cfs-vorlieben-speichern[disabled] { opacity: .6; } .cfs-vorlieben-ziel { margin-top: 18px; scroll-margin-top: 140px; } .cfs-vorlieben-ziel .cfs-vorlieben-treffer { scroll-margin-top: 140px; } @keyframes cfs-einblenden { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .cfs-vorlieben-treffer.cfs-einblenden { animation: cfs-einblenden .6s ease-out both; } .cfs-vorlieben-treffer.cfs-einblenden .cfs-block-titel { animation: cfs-einblenden .6s ease-out .15s both; } .cfs-vorlieben-treffer .cfs-block-titel { font-size: 20px !important; } @media (prefers-reduced-motion: reduce) { .cfs-vorlieben-treffer.cfs-einblenden, .cfs-vorlieben-treffer.cfs-einblenden .cfs-block-titel { animation: none; } } /* Geburtstag: Bedingungen, sobald das Datum steht */ ul.cfs-geb-bedingungen { list-style: none !important; margin: 8px 0 10px !important; padding: 0 !important; } ul.cfs-geb-bedingungen li { list-style: none !important; position: relative; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #d6e8c4; } ul.cfs-geb-bedingungen li::before { content: "✓"; position: absolute; left: 0; color: #9ad072; font-weight: 700; } /* Mengenrabatt: Kärtchen „Anzahl wählen" unter den Packungsgrößen, volle Breite auch im Formular einfacher Produkte */ .single-product .summary form.cart > .cfs-anzahl { flex: 0 0 100%; width: 100%; order: -1; margin: 0 0 14px; } .single-product .summary .single_variation_wrap > .cfs-anzahl { margin: 0 0 14px; } .cfs-anzahl .cf-mengen-raster { max-height: none !important; overflow: visible !important; } .cfs-anzahl .cf-menge[disabled] { cursor: not-allowed; } /* Warenkorb: Nachlass als Badge, Anreiz zur nächsten Stufe darunter */ .cfs-mengen-badge { margin-top: 4px; } .cfs-mengen-anreiz { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #9ad072; } .woocommerce-cart table.cart td.product-price del { display: block; font-size: 12px; opacity: .65; } /* Packungsgrößen und Anzahl gleich groß: die Packungs-Kärtchen schrumpften im Varianten-Formular auf ihren Inhalt */ .single-product .summary form.variations_form > .cf-mengen { width: 100%; flex: 0 0 100%; } /* „Weitere Produkte einblenden" in der Suche: derselbe Knopftyp wie „Gutschein anwenden" (Felix, 05.10.) */ .ts-search-result-container .view-all-wrapper.cfs-mehr-treffer a { border-radius: 6px !important; border: 1px solid #7fb857 !important; background: #12170f !important; color: #9ad072 !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: .04em; box-shadow: none !important; padding: 0 22px !important; height: 44px; } .ts-search-result-container .view-all-wrapper.cfs-mehr-treffer a:hover { background: #7fb857 !important; color: #12170f !important; filter: none; } /* ======== 05.10. nachmittags — elfte Sichtprüfung ======== */ /* Warenkorb-Boxen ruhiger: alle Texte beginnen an derselben Kante, Haken hängen links im Rand */ .cfs-box { padding-left: 34px !important; } .cfs-box-liste li { padding-left: 0 !important; } .cfs-box-liste li::before { left: -20px !important; } .cfs-box-stand { position: relative; } .cfs-box-stand .cfs-stand-ist::before { content: "✓"; position: absolute; left: -20px; color: #9ad072; } .cfs-box-ist .cfs-box-stand { color: #b9ea8f; } /* Pfeil zur nächsten Box deutlicher leuchten */ .cfs-boxen-pfeil.cfs-pfeil-naechster { filter: drop-shadow(0 0 3px #d4ffb0) drop-shadow(0 0 8px #9ad072) drop-shadow(0 0 16px rgba(154,208,114,.9)) !important; } .cfs-boxen-pfeil.cfs-pfeil-naechster::before { background-color: #e2ffc9 !important; height: 2.5px !important; } .cfs-boxen-pfeil.cfs-pfeil-naechster::after { border-color: #e2ffc9 !important; border-width: 2.5px 2.5px 0 0 !important; } /* Leuchtpunkt mit Schweif um die nächste Box, danach hellerer Rahmen */ .cfs-box-naechste { position: relative; } .cfs-komet { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; filter: drop-shadow(0 0 4px #c8f59d) drop-shadow(0 0 10px rgba(154,208,114,.8)); } .cfs-komet rect { fill: none; stroke: #eaffd6; stroke-linecap: round; stroke-dasharray: 1.6 98.4; stroke-dashoffset: 0; animation: cfs-komet 2.8s cubic-bezier(.45,.05,.4,1) both; } @keyframes cfs-komet { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } } .cfs-box-naechste { transition: border-color .6s ease, box-shadow .6s ease; } .cfs-box-naechste.cfs-hell { border-color: #c8f59d !important; box-shadow: 0 0 0 1px rgba(200,245,157,.35), 0 0 18px rgba(154,208,114,.45); } .cfs-box-naechste.cfs-hallo { animation: none !important; } /* Konto: „Speichern" (Vorlieben) und der Geburtstagsknopf auf derselben Höhe — beide Kacheln gleich hoch, Knopfzeile unten */ .cfs-tun-gross { align-items: stretch !important; } .cfs-tun-gross > .cfs-kachel-gross { display: flex !important; flex-direction: column; } .cfs-tun-gross > .cfs-kachel-gross > .cfs-vorlieben-fuss, .cfs-tun-gross > .cfs-kachel-gross > .cfs-geburtstag-form { margin-top: auto !important; } .cfs-tun-gross > .cfs-kachel-gross > .cfs-chips:last-of-type { margin-bottom: 16px; } .cfs-geburtstag-form .button, .button.cfs-vorlieben-speichern { height: 44px !important; line-height: 42px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .cfs-vorlieben-fuss { margin-bottom: 0 !important; position: relative; } .cfs-tun-gross .cfs-kachel-gross > .cfs-kachel-meldung:empty { display: none; } /* Produktseite: Preis oben immer CI-Grün (#7fb857) — einfache Produkte zeigten ihn weiß, Variantenprodukte grün */ .woocommerce div.product div.summary > p.price, .woocommerce div.product div.summary > p.price .amount, .woocommerce div.product div.summary > p.price bdi, .woocommerce div.product div.summary > .ts-variation-price .price, .woocommerce div.product div.summary > .ts-variation-price .amount { color: #7fb857 !important; } /* Packungsgröße und Anzahl optisch getrennt: Packungen = gefüllte grüne Glasflächen, Anzahl = dunkle Kärtchen mit Strichrahmen */ .cf-mengen:not(.cfs-anzahl) .cf-menge { background: linear-gradient(180deg, rgba(127,184,87,.22), rgba(127,184,87,.08)) !important; border-color: rgba(127,184,87,.6) !important; } .cf-mengen:not(.cfs-anzahl) .cf-menge.aktiv { background: linear-gradient(180deg, #4f7f34, #355a22) !important; border-color: #b9ea8f !important; box-shadow: 0 0 0 1px rgba(185,234,143,.35); } .cfs-anzahl .cf-menge { background: rgba(10,14,8,.55) !important; border: 1px dashed rgba(154,208,114,.45) !important; } .cfs-anzahl .cf-menge.aktiv { border: 1px solid #9ad072 !important; background: rgba(18,23,15,.9) !important; box-shadow: inset 0 0 0 1px rgba(154,208,114,.35); } .cfs-anzahl .cf-menge .cf-menge-wert { letter-spacing: .03em; } .cf-mengen .cf-mengen-titel { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; color: #b9c7b4 !important; } .cf-mengen.cfs-anzahl { padding-top: 12px; border-top: 1px solid rgba(127,184,87,.18); } .single-product .summary form.cart > .cfs-anzahl { border-top: 0; padding-top: 0; } /* Treue-Geschenk: Profilkopf mit Knopf, Auswahlblock, Badge „Als Geschenk wählbar" */ .cfs-profil-geschenk-offen { display: flex; align-items: center; gap: 16px; } .cfs-profil-geschenk-offen .cfs-profil-geschenk-zeile { margin: 0 !important; } .button.cfs-geschenk-knopf { flex: none; height: 44px; line-height: 42px !important; padding: 0 20px !important; background: #7fb857 !important; color: #12170f !important; border: 1px solid #9ad072 !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 0 14px rgba(154,208,114,.45) !important; } .button.cfs-geschenk-knopf:hover { background: #9ad072 !important; } .cfs-treue-block { scroll-margin-top: 150px; border-style: solid !important; border-color: #9ad072 !important; } .cfs-badge.cfs-geschenk { background: var(--cf-gelb, #f2c230) !important; color: #12170f !important; } .cfs-treue-block .cf-auffuellen__preis del { opacity: .6; margin-right: 4px; font-size: .85em; } @media (max-width: 767px) { .cfs-profil-geschenk-offen { flex-direction: column; align-items: flex-start; } } .button.cfs-geschenk-knopf { white-space: nowrap !important; } /* Boxen: „Noch X €" an derselben Kante wie die übrigen Texte (die alte Grundregel schob die Zeile nach links) */ .cfs-box .cfs-box-stand, .cfs-box .cfs-box-ab { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; } /* ======== 05.10. abends — zwölfte Sichtprüfung ======== */ /* Benachrichtigungs-Stream: Zeitleiste mit Symbol je Art, neue Einträge hervorgehoben */ .cfs-konto-h2 { font-size: 22px !important; font-weight: 800 !important; margin: 26px 0 12px !important; color: rgba(255,255,255,.97); } .cfs-konto-h3 { font-size: 17px !important; font-weight: 800 !important; margin: 20px 0 10px !important; } .cfs-stream-block .cfs-konto-h2:first-child { margin-top: 0 !important; } ul.cfs-stream { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; } .cfs-st > a, .cfs-st > .cfs-st-ohne { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(127,184,87,.22); border-radius: 10px; background: rgba(18,23,15,.55); color: rgba(255,255,255,.97) !important; text-decoration: none !important; transition: border-color .15s, background .15s; } .cfs-st > a:hover { border-color: #9ad072; background: rgba(127,184,87,.1); } .cfs-st.cfs-st-neu > a, .cfs-st.cfs-st-neu > .cfs-st-ohne { border-color: #8fca63; background: linear-gradient(90deg, rgba(127,184,87,.18), rgba(18,23,15,.55) 60%); box-shadow: inset 3px 0 0 #9ad072; } .cfs-st-symbol { width: 40px; height: 40px; border-radius: 50%; background: rgba(127,184,87,.14); position: relative; } .cfs-st-symbol::before { content: ''; position: absolute; inset: 9px; background: #9ad072; -webkit-mask: var(--cfs-st) center / contain no-repeat; mask: var(--cfs-st) center / contain no-repeat; } .cfs-st-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cfs-st-titel { font-weight: 700; font-size: 15px; line-height: 1.3; } .cfs-st-klein { font-size: 13px; color: #b9c7b4; line-height: 1.35; } .cfs-st-wann { font-size: 12px; color: #b9c7b4; white-space: nowrap; } .cfs-st-neu .cfs-st-wann::before { content: 'neu'; display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #9ad072; color: #12170f; font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; } .cfs-st.cfs-st-einschub { margin: 4px 0; } /* Glocke in der Kopfzeile — Zahl wie am Warenkorb (Theme-Klasse .cart-number), Fenster mit den letzten Einträgen */ header.ts-header .header-right .cfs-glocke-wrapper { position: relative; display: inline-flex; align-items: center; margin-left: 4px; } .cfs-glocke-wrapper .cart-icon { position: relative; } .cfs-glocke-knopf { display: inline-flex !important; align-items: center; justify-content: center; position: relative; padding: 0 8px; line-height: 0; } .cfs-ic-glocke { display: block; width: 26px; height: 26px; background: rgba(255,255,255,.97); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; transition: background .15s; } .cfs-glocke-knopf:hover .cfs-ic-glocke, .cfs-glocke-wrapper.offen .cfs-ic-glocke { background: #9ad072; } .cfs-glocke-fenster { position: absolute; right: -8px; top: calc(100% + 12px); width: 380px; max-width: calc(100vw - 24px); padding: 14px; border: 1px solid rgba(127,184,87,.55); border-radius: 12px; background: rgba(18,23,15,.98); box-shadow: 0 18px 40px rgba(0,0,0,.55); z-index: 1003; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; } .cfs-glocke-wrapper.offen .cfs-glocke-fenster { opacity: 1; visibility: visible; transform: none; } .cfs-glocke-kopf { font-weight: 800; font-size: 16px; margin-bottom: 10px; color: rgba(255,255,255,.97); display: flex; align-items: center; justify-content: space-between; } .cfs-glocke-zahl { font-size: 12px; font-weight: 800; color: #12170f; background: #9ad072; border-radius: 999px; padding: 2px 9px; } .cfs-stream-klein .cfs-st > a, .cfs-stream-klein .cfs-st > .cfs-st-ohne { grid-template-columns: 32px minmax(0,1fr); padding: 9px 10px; gap: 2px 10px; } .cfs-stream-klein .cfs-st-symbol { width: 32px; height: 32px; grid-row: span 2; } .cfs-stream-klein .cfs-st-symbol::before { inset: 7px; } .cfs-stream-klein .cfs-st-wann { grid-column: 2; font-size: 11.5px; } .cfs-stream-klein .cfs-st-titel { font-size: 13.5px; } .cfs-stream-klein .cfs-st-klein { display: none; } .button.cfs-glocke-alle { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 12px; background: #7fb857 !important; color: #12170f !important; border: 1px solid #9ad072 !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .04em; } .button.cfs-glocke-alle:hover { background: #9ad072 !important; } @media (max-width: 767px) { header.ts-header .header-right .cfs-glocke-wrapper { margin-left: 0; position: static !important; } .cfs-glocke-knopf { padding: 0 5px; } .cfs-ic-glocke { width: 23px; height: 23px; } .cfs-glocke-fenster { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; } } /* Zahl am Menüpunkt Benachrichtigungen, gleicher Kreis wie am Warenkorb */ .cfs-nav-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: #7fb857; color: #12170f; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: 1px; box-shadow: 0 0 8px rgba(154,208,114,.6); } /* Konto-Karte Benachrichtigungen: positiv, beim ersten Mal kurz aufleuchten und hervorgehoben bis zum Klick */ .cfs-kachel-bescheid .cfs-kachel-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #7fb857; color: #12170f; font-size: 12px; font-weight: 800; } .cfs-kachel-bescheid.cfs-kachel-da .cfs-kachel-wert { color: #b9ea8f; } .cfs-kachel.cfs-kachel-neu { border-color: #9ad072 !important; box-shadow: 0 0 0 1px rgba(154,208,114,.45), 0 0 22px rgba(127,184,87,.4) !important; animation: cfs-kachel-hallo 1.2s ease-out 1s 1 both; } @keyframes cfs-kachel-hallo { 0% { transform: none; } 35% { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 2px #c8f59d, 0 0 30px rgba(154,208,114,.8); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .cfs-kachel.cfs-kachel-neu { animation: none; } } /* Freunde-Karte: im Raster wie eine Produktkarte, im Stream/Konto quer */ .cfs-freunde-karte { border: 1px solid #9ad072; border-radius: 12px; background: linear-gradient(160deg, rgba(127,184,87,.22), rgba(18,23,15,.85) 55%); color: rgba(255,255,255,.97); } .cfs-fk-bild { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 10px 10px 0 0; background: radial-gradient(circle at 50% 40%, rgba(154,208,114,.45), rgba(18,23,15,.2) 70%); } .cfs-fk-symbol { width: 44%; height: 44%; background: #c8f59d; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(154,208,114,.7)); } .cfs-fk-betrag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 6px; background: var(--cf-gelb, #f2c230); color: #12170f; font-weight: 900; font-size: 15px; } .cfs-fk-stream .cfs-fk-titel, .cfs-fk-konto .cfs-fk-titel { margin: 0 0 6px !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 800 !important; color: rgba(255,255,255,.97) !important; } .cfs-fk-text { margin: 0 0 10px !important; font-size: 13px; line-height: 1.4; color: #d6e8c4; } .cfs-fk-code { display: inline-block; margin: 0 0 8px; padding: 6px 12px; border: 1px dashed #9ad072; border-radius: 6px; font: 800 15px/1.2 ui-monospace, monospace; letter-spacing: .06em; color: #c8f59d; } .button.cfs-fk-knopf, .button.cfs-fk-whatsapp { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 42px; padding: 6px 10px !important; background: #7fb857 !important; color: #12170f !important; border: 1px solid #9ad072 !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 12.5px !important; line-height: 1.2 !important; text-transform: uppercase; letter-spacing: .03em; text-align: center; white-space: normal; } .button.cfs-fk-knopf:hover { background: #9ad072 !important; } .button.cfs-fk-whatsapp { margin-top: 8px; background: #12170f !important; color: #9ad072 !important; border-color: #7fb857 !important; } .button.cfs-fk-whatsapp:hover { background: #7fb857 !important; color: #12170f !important; } .cfs-fk-zeile { display: flex; gap: 6px; } .cfs-fk-zeile input { flex: 1; min-width: 0; height: 40px; font-size: 12px; } .products section.product.cfs-freunde-karte .product-wrapper { height: 100%; display: flex; flex-direction: column; } .products section.product.cfs-freunde-karte .meta-wrapper { padding: 12px !important; display: flex; flex-direction: column; flex: 1; } .products section.product.cfs-freunde-karte .cfs-fk-inhalt { margin-top: auto; } .cfs-fk-stream, .cfs-fk-konto { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 0; overflow: hidden; } .cfs-fk-stream .cfs-fk-bild, .cfs-fk-konto .cfs-fk-bild { aspect-ratio: auto; border-radius: 0; min-height: 150px; } .cfs-fk-rechts { padding: 14px 16px; } .cfs-fk-stream .button.cfs-fk-knopf, .cfs-fk-konto .button.cfs-fk-knopf, .cfs-fk-stream .button.cfs-fk-whatsapp, .cfs-fk-konto .button.cfs-fk-whatsapp { width: auto; display: inline-flex !important; padding: 0 18px !important; } @media (max-width: 600px) { .cfs-fk-stream, .cfs-fk-konto { grid-template-columns: 1fr; } .cfs-fk-stream .cfs-fk-bild, .cfs-fk-konto .cfs-fk-bild { min-height: 110px; } } /* Meine Gutscheine als Landingpage */ .cfs-landing-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border: 1px solid #8fca63; border-radius: 14px; background: linear-gradient(135deg, #2f5a21 0%, #1a2e13 100%); box-shadow: 0 8px 24px rgba(127,184,87,.22); } .cfs-landing-hero > div { display: flex; flex-direction: column; gap: 2px; } .cfs-landing-gross { font-size: 40px; font-weight: 900; line-height: 1.05; color: #c8f59d; } .cfs-landing-klein { font-size: 14px; color: #d6e8c4; } .button.cfs-landing-cta { flex: none; display: inline-flex !important; align-items: center; height: 48px; padding: 0 24px !important; background: var(--cf-gelb, #f2c230) !important; color: #12170f !important; border: 0 !important; border-radius: 6px !important; font-weight: 800 !important; font-size: 14px !important; text-transform: uppercase; letter-spacing: .04em; } .cfs-gs-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .cfs-gs-karte { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px dashed rgba(154,208,114,.6); border-radius: 12px; background: rgba(18,23,15,.6); } .cfs-gs-karte.cfs-gs-ok { border-style: solid; border-color: #9ad072; background: linear-gradient(160deg, rgba(127,184,87,.2), rgba(18,23,15,.7)); } .cfs-gs-karte.cfs-gs-aus { opacity: .6; } .cfs-gs-wert { font-size: 30px; font-weight: 900; color: #c8f59d; line-height: 1; } .cfs-gs-ab, .cfs-gs-stand { font-size: 13px; color: #b9c7b4; } .cfs-gs-code { align-self: flex-start; margin: 4px 0; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.35); font-size: 13px; letter-spacing: .05em; color: rgba(255,255,255,.97); } .button.cfs-gs-einloesen { margin-top: 8px; display: flex !important; align-items: center; justify-content: center; height: 40px; background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 12.5px !important; text-transform: uppercase; letter-spacing: .04em; } .button.cfs-gs-einloesen:hover { background: #7fb857 !important; color: #12170f !important; } .cfs-fw-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; } .cfs-fw-zahlen > div { padding: 14px; border: 1px solid rgba(127,184,87,.3); border-radius: 10px; background: rgba(18,23,15,.55); display: flex; flex-direction: column; gap: 2px; } .cfs-fw-zahlen b { font-size: 24px; font-weight: 900; color: #c8f59d; } .cfs-fw-zahlen span { font-size: 12.5px; color: #b9c7b4; } .cfs-fw-stufe { margin: 0 0 14px; } .cfs-fw-stufe .cfs-stufe-balken { margin-bottom: 6px; } ul.cfs-fw-liste { list-style: none !important; margin: 0 0 10px !important; padding: 0 !important; } .cfs-fw-liste li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; align-items: center; padding: 10px 2px; border-bottom: 1px solid rgba(127,184,87,.15); font-size: 14px; } .cfs-fw-name { font-weight: 700; } .cfs-fw-wann { color: #b9c7b4; font-size: 13px; } .cfs-fw-liste li.st-bezahlt .cfs-fw-stand { color: #9ad072; font-weight: 800; } .cfs-fw-liste li:not(.st-bezahlt) .cfs-fw-stand { color: #b9c7b4; } @media (max-width: 767px) { .cfs-landing-hero { flex-direction: column; align-items: flex-start; } .cfs-fw-zahlen { grid-template-columns: 1fr 1fr; } } /* Konto: Speichern rechtsbündig wie Ändern; Knopftexte waagerecht und senkrecht mittig */ .cfs-vorlieben-fuss { justify-content: flex-end !important; } .cfs-vorlieben-fuss .cfs-kachel-meldung { margin-right: auto !important; } .cfs-geburtstag-form .button, .button.cfs-vorlieben-speichern { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1 !important; } /* Warenkorb-Boxen: Schwelle als Badge statt Textzeile */ .cfs-box .cfs-box-ab { align-self: flex-start; display: inline-block; padding: 3px 10px !important; margin-bottom: 4px; border-radius: 6px; background: rgba(127,184,87,.2); border: 1px solid rgba(154,208,114,.5); color: #c8f59d !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: .02em; line-height: 1.3; } .cfs-box.cfs-box-ist .cfs-box-ab { background: #7fb857; border-color: #b9ea8f; color: #12170f !important; } .cfs-box.cfs-box-naechste .cfs-box-ab { background: rgba(127,184,87,.3); border-color: #c8f59d; } /* Pfeil zwischen den Boxen: eine Linie, Spitze und Schaft gleich stark, mittig (SVG statt zwei Pseudo-Elementen) */ .cfs-boxen-pfeil { flex: 0 0 28px !important; height: 16px !important; align-self: center !important; position: relative; color: #7fb857; } .cfs-boxen-pfeil::after { display: none !important; } .cfs-boxen-pfeil::before { content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; border: 0 !important; transform: none !important; background: currentColor !important; -webkit-mask: url("data:image/svg+xml;utf8,") center / 28px 16px no-repeat !important; mask: url("data:image/svg+xml;utf8,") center / 28px 16px no-repeat !important; } .cfs-boxen-pfeil.cfs-pfeil-naechster { color: #e2ffc9; } .cfs-boxen-pfeil.cfs-pfeil-naechster::before { background-color: #e2ffc9 !important; height: auto !important; } /* Kopfleiste: Haken in den Schwellen-Kreis statt hinter den Text */ .cfs-kopfleiste .cfs-ernte-label .cfs-haken { display: none !important; } .cfs-kopfleiste .cfs-ernte-punkt.ist::before { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 9px; margin: -6px 0 0 -3px; border: solid #12170f; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); z-index: 1; } .cfs-st-bestellung { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-bezahlt { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-versand { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-wieder_da { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-gutschein { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-eingeloest { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-guthaben { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-freund { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-geschenk { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-geburtstag { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-storno { --cfs-st: url("data:image/svg+xml;utf8,"); } /* Glocke: Zahl exakt wie am Warenkorb (gemessen 05.10.: 18×18, Kreis, top −3 px, 11 px Schrift), Knopf so hoch wie der Warenkorb-Knopf (37 px) */ header.ts-header .header-right .cfs-glocke-knopf { height: 37px; padding: 0 8px !important; } header.ts-header .cfs-glocke-wrapper .cfs-glocke-knopf .cart-number { position: absolute; top: -3px; left: 22px; width: 18px; height: 18px; border-radius: 50%; display: block; text-align: center; font-size: 11px; line-height: 18px; font-weight: 700; background: #7fb857 !important; color: #0d1108 !important; box-shadow: 0 0 8px rgba(154,208,114,.7); } header.ts-header .header-right .cfs-glocke-knopf { position: relative; top: 1px; } header.ts-header .header-right .cfs-ic-glocke { position: relative; top: 1px; } @media (max-width: 1279px) { header.ts-header .cfs-glocke-wrapper .cfs-glocke-knopf .cart-number { top: -1.25px; } } @media (max-width: 991px) { header.ts-header .cfs-glocke-wrapper .cfs-glocke-knopf .cart-number { top: 1.5px; } } ul.cfs-stream > li { list-style: none !important; margin: 0 !important; padding: 0 !important; } ul.cfs-stream > li::before, ul.cfs-stream > li::marker { content: none !important; display: none !important; } ul.cfs-stream.cfs-stream-aelter { margin-top: 8px !important; } ul.cfs-stream[hidden] { display: none !important; } .cfs-glocke-wrapper.offen .cfs-glocke-fenster, .cfs-glocke-wrapper.offen .cfs-glocke-fenster * { visibility: visible !important; } /* eine Theme-Regel versteckte den Knopf (gemessen: visibility hidden) */ /* Gemessen 05.10.: „Speichern" stand 461 px vom rechten Rand — Fußzeile über die ganze Kachelbreite, Knopf rechts; Geburtstagsformular ebenso; beide Knöpfe 48 px */ .cfs-tun-gross > .cfs-kachel-gross > .cfs-vorlieben-fuss { align-self: stretch !important; width: 100% !important; display: flex !important; } .cfs-tun-gross > .cfs-kachel-gross > .cfs-geburtstag-form { align-self: stretch !important; width: 100% !important; display: flex !important; gap: 10px; } .cfs-geburtstag-form input[type="date"] { flex: 1 1 auto; min-width: 0; } .cfs-geburtstag-form .button, .button.cfs-vorlieben-speichern { flex: none; height: 48px !important; margin-left: auto !important; } .cfs-vorlieben-fuss .cfs-kachel-meldung { order: -1; margin-right: 0 !important; } .cfs-tun-gross > .cfs-kachel-gross > .cfs-geburtstag-form { flex-wrap: nowrap !important; } .cfs-tun-gross .cfs-geburtstag-form input[type="date"] { width: auto !important; flex: 1 1 0 !important; } .cfs-tun-gross .cfs-vorlieben-fuss .button.cfs-vorlieben-speichern, .cfs-tun-gross .cfs-geburtstag-form .button { margin-right: 0 !important; } .cfs-vorlieben-fuss::before, .cfs-vorlieben-fuss::after { content: none !important; display: none !important; } .cfs-vorlieben-fuss > p:empty, .cfs-geburtstag-form > p:empty { display: none !important; } /* leerer Absatz der Absatz-Automatik verschob „Speichern" um die 14-px-Lücke */ /* Freunde-Karte im Raster: Titel vor dem Knopf (Theme ordnet .meta-wrapper h3 sonst nach hinten), kurz wie eine Produktkarte */ .products section.product.cfs-freunde-karte .meta-wrapper > * { order: 0 !important; } .products section.product.cfs-freunde-karte .cfs-fk-text { display: none; } /* (05.10. abends) Titel im Raster ohne eigene Schrift — es gilt die Produktnamen-Regel des Themes */ .products section.product.cfs-freunde-karte .meta-wrapper { padding: 10px 12px 12px !important; } .products section.product.cfs-freunde-karte .cfs-fk-bild { aspect-ratio: 1 / .84; } /* gemessen: Karte machte die Reihe 19 px höher als die Produktkarten */ /* Warenkorb-Summe (Felix, 05.10. abends): Gutschein-/Guthabenzeile einzeilig, Betrag rechtsbündig, Kreuz links daneben statt „[Entfernen]"; Versand in derselben Schrift wie die übrigen Beträge, rechtsbündig */ .cart_totals tr.cart-discount th { white-space: nowrap; } .cart_totals tr.cart-discount td { display: flex !important; align-items: center; justify-content: flex-end; gap: 8px; text-align: right !important; font-weight: 700; white-space: nowrap; } .cart_totals tr.cart-discount td a.woocommerce-remove-coupon { order: -1; display: inline-flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; font-size: 0 !important; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; position: relative; opacity: .65; transition: opacity .15s, border-color .15s; } .cart_totals tr.cart-discount td a.woocommerce-remove-coupon::before, .cart_totals tr.cart-discount td a.woocommerce-remove-coupon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: rgba(255,255,255,.97); } .cart_totals tr.cart-discount td a.woocommerce-remove-coupon::before { transform: translate(-50%, -50%) rotate(45deg); } .cart_totals tr.cart-discount td a.woocommerce-remove-coupon::after { transform: translate(-50%, -50%) rotate(-45deg); } .cart_totals tr.cart-discount td a.woocommerce-remove-coupon:hover { opacity: 1; border-color: #9ad072; } .cart_totals tr.woocommerce-shipping-totals td { text-align: right !important; } .cart_totals tr.woocommerce-shipping-totals td ul#shipping_method, .cart_totals tr.woocommerce-shipping-totals td ul#shipping_method li { text-align: right !important; margin: 0 !important; padding: 0 !important; } .cart_totals tr.woocommerce-shipping-totals td ul#shipping_method label { font-family: inherit !important; font-size: inherit !important; font-weight: 700 !important; color: rgba(255,255,255,.97) !important; margin: 0 !important; } .cart_totals tr.woocommerce-shipping-totals td .shipping-calculator-button { display: inline-block; } /* Warenkorb: zwei Kundenstimmen links neben der Summenbox, unten bündig (wie in der Kasse) */ .cfs-korb-stimmen { flex: 1 1 auto; max-width: 600px; display: grid; gap: 12px; } .cfs-korb-stimmen blockquote { position: relative; margin: 0 !important; padding: 12px 70px 12px 46px !important; background: linear-gradient(180deg, rgba(47,58,18,.95) 0%, rgba(30,38,12,.95) 100%) !important; border: 1px solid rgba(185,200,120,.35) !important; border-left: 4px solid #b9c878 !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important; font-size: 16.5px !important; line-height: 1.5 !important; font-style: italic; color: rgba(255,255,255,.97); } .cfs-korb-stimmen blockquote::before { content: "„" !important; display: block !important; position: absolute; left: 14px; top: 2px; font-size: 44px; line-height: 1; font-style: normal; color: #b9c878; opacity: .85; } .cfs-korb-stimmen blockquote::after { content: ""; position: absolute; right: 14px; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); background: url("/wp-content/uploads/2023/06/hauptbild_original.png") center / contain no-repeat; } .cfs-korb-stimmen .cfs-sterne { display: block; font-style: normal; color: #f5c518; letter-spacing: 2px; font-size: 15px; margin-bottom: 4px; } .cfs-korb-stimmen .cfs-stimme-quelle { display: block; font-style: normal; font-size: 12px; color: #b9c7b4; margin-top: 6px; } @media (max-width: 1099px) { .cfs-korb-stimmen { max-width: none; margin-top: 20px; } } /* ======== 05.10. abends — dreizehnte Sichtprüfung ======== */ /* Leichter Schein auf Guthaben-Beträgen */ .cfs-glow { color: #c8f59d !important; text-shadow: 0 0 10px rgba(154,208,114,.55), 0 0 22px rgba(127,184,87,.3); } .cfs-profil-guthaben { display: block; margin-top: 3px; font-size: 14px; font-weight: 800; color: #c8f59d; text-shadow: 0 0 10px rgba(154,208,114,.55); } .cfs-landing-gross small { font-size: 18px; font-weight: 700; color: #d6e8c4; text-shadow: none; } .cfs-landing-bedingung { margin: 8px 2px 0 !important; font-size: 12.5px; line-height: 1.45; color: #b9c7b4; } .cfs-landing-bedingung + .cfs-fw-zahlen { margin-top: 20px; } /* 15.10. (Felix): Bedingungstext klebte an den Kennzahl-Kästen – Abstand wie zwischen den übrigen Blöcken */ .cfs-fw-intro { margin: 0 0 12px !important; font-size: 15px; line-height: 1.5; color: #d6e8c4; } .cfs-fw-zahlen b.cfs-fw-stufe-name { font-size: 17px !important; line-height: 1.25; color: #c8f59d; } .cfs-fw-zahlen span { font-size: 13.5px !important; color: #d6e8c4 !important; line-height: 1.35; } /* Freunde-Karte: Knopf wie „Benachrichtigen" (zweizeilig, CI), Titel = Produktname-Stil des Themes, quadratisches Bild */ .cfs-freunde-karte .cfla-knopf.cfs-fk-knopf { width: 100%; min-height: 0; padding: 5px 6px 6px !important; text-decoration: none !important; cursor: pointer; } .cfs-fk-stream .cfla-knopf.cfs-fk-knopf, .cfs-fk-konto .cfla-knopf.cfs-fk-knopf { width: auto; display: inline-flex !important; padding: 6px 22px 7px !important; } .products section.product.cfs-freunde-karte .cfs-fk-bild { aspect-ratio: 1 / 1 !important; } .cfs-fk-badge { position: absolute; left: 10px; bottom: 10px; font-size: 12px !important; } .cfs-fk-betrag { display: none !important; } .cfs-freunde-karte .cfs-fk-titel { margin: 0 0 8px !important; } .cfs-fk-stream .cfs-fk-titel, .cfs-fk-konto .cfs-fk-titel { font-size: 18px !important; } .cfs-fk-stream .cfs-fk-bild, .cfs-fk-konto .cfs-fk-bild { aspect-ratio: 1 / 1 !important; min-height: 0 !important; height: auto; align-self: start; } .cfs-fk-stream, .cfs-fk-konto { grid-template-columns: 170px minmax(0,1fr) !important; align-items: center; } /* Teilen-Zeilen: Code und Link je mit Kopier-Symbol */ .cfs-teilen-titel { margin: 0 0 6px !important; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #9ad072; } .cfs-teilen-zeile { display: grid; grid-template-columns: auto minmax(0,1fr) 30px; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 10px; margin-bottom: 6px; border: 1px solid rgba(127,184,87,.45); border-radius: 6px; background: rgba(10,14,8,.55); } .cfs-teilen-art { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #9ad072; } .cfs-teilen-wert { font: 700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255,255,255,.97); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfs-kopier { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; position: relative; } .cfs-kopier::before { content: ""; position: absolute; inset: 5px; background: #9ad072; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .cfs-kopier:hover { background: rgba(127,184,87,.18); } .cfs-kopier.kopiert::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); background: #c8f59d; } .cfs-teilen-whatsapp { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 700; color: #9ad072 !important; text-decoration: underline !important; } .products section.product.cfs-freunde-karte .cfs-teilen-whatsapp, .products section.product.cfs-freunde-karte .cfs-teilen-titel { display: none; } .products section.product.cfs-freunde-karte .cfs-teilen-zeile { height: 30px; margin-bottom: 4px; } .cfs-teilen-kasten { max-width: 560px; } .cfs-teilen-hinweis { margin: 8px 0 0 !important; font-size: 14px; line-height: 1.5; color: #d6e8c4; } /* Stufen-Blöcke: eigene Fortschrittsform (Kästen statt Leiste) */ .cfs-stufen-bloecke { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 6px 0 8px; } .cfs-stufe-block { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid rgba(127,184,87,.35); border-radius: 12px; background: rgba(18,23,15,.6); } .cfs-stufe-fuell { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(127,184,87,.38), rgba(127,184,87,.18)); z-index: 0; } .cfs-stufe-block > span:not(.cfs-stufe-fuell) { position: relative; z-index: 1; } .cfs-stufe-block.erreicht { border-color: #8fca63; } .cfs-stufe-block.aktuell { border-color: #c8f59d; box-shadow: 0 0 0 1px rgba(200,245,157,.35), 0 0 18px rgba(127,184,87,.35); } .cfs-stufe-ab { font-size: 12.5px; font-weight: 700; color: #b9ea8f; text-transform: uppercase; letter-spacing: .04em; } .cfs-stufe-name { font-size: 17px; font-weight: 800; color: rgba(255,255,255,.97); line-height: 1.25; } .cfs-stufe-betrag { font-size: 15px; font-weight: 700; color: #c8f59d; } .cfs-stufe-du { align-self: flex-start; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: #9ad072; color: #12170f; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .cfs-stufen-text { margin: 4px 0 14px !important; font-size: 15px; line-height: 1.5; color: #d6e8c4; } @media (max-width: 767px) { .cfs-stufen-bloecke { grid-template-columns: 1fr; } } /* Erklärtext */ .cfs-erklaerung { margin: 22px 0 6px; padding: 18px 20px; border: 1px solid rgba(127,184,87,.35); border-radius: 12px; background: rgba(18,23,15,.55); } .cfs-erklaerung-titel { margin: 0 0 8px !important; font-size: 18px; font-weight: 800; color: rgba(255,255,255,.97); } .cfs-erklaerung ol { margin: 0 0 0 20px !important; padding: 0 !important; } .cfs-erklaerung li { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: #d6e8c4; } .cfs-erklaerung li b { color: rgba(255,255,255,.97); } /* Freunde-werben-Seite: Diagramm und Tabelle gut lesbar */ .cfs-freunde-seite .cfs-graph { padding: 14px 16px 6px; border: 1px solid rgba(127,184,87,.3); border-radius: 12px; background: rgba(18,23,15,.55); } .cfs-fw-tabelle th, .cfs-fw-tabelle td { font-size: 15px !important; color: rgba(255,255,255,.97) !important; padding: 10px 12px !important; } .cfs-fw-tabelle th { color: #b9ea8f !important; font-weight: 800; } .cfs-fw-tabelle tr.st-verbraucht td { color: #b9c7b4 !important; } /* Menü: Zahl an der Glocke statt hinter dem Wort — überlagert die rechte obere Ecke des Symbols, Text bleibt an seinem Platz */ .woocommerce-account .woocommerce-MyAccount-navigation li a .cfs-nav-zahl { order: 0; flex: none; position: relative; top: -9px; width: 18px; min-width: 18px; height: 18px; padding: 0; margin: 0 -8px 0 -20px; justify-content: center; font-size: 11px; line-height: 18px; z-index: 1; } /* Konto-Karte Benachrichtigungen: kleine Glocke mit Zahl im Kopf, Hervorhebung bis zum Klick, Leuchtpunkt-Lauf (seller.js) */ .cfs-glocke-mini { position: relative; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; } .cfs-glocke-mini .cfs-ic-glocke { width: 18px !important; height: 18px !important; background: #9ad072 !important; position: static !important; } .cfs-glocke-mini .cart-number { position: absolute; top: -8px; left: 11px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #7fb857; color: #0d1108; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 8px rgba(154,208,114,.7); letter-spacing: 0; } .cfs-kachel.cfs-kachel-neu { animation: none !important; position: relative; overflow: visible; } .cfs-kachel.cfs-kachel-neu.cfs-hell { border-color: #c8f59d !important; box-shadow: 0 0 0 1px rgba(200,245,157,.35), 0 0 18px rgba(154,208,114,.45) !important; } .cfs-kachel-neu .cfs-komet { filter: drop-shadow(0 0 3px #c8f59d) drop-shadow(0 0 7px rgba(154,208,114,.6)); } /* Menü etwas größer, seit Adressen und Kontodetails zusammengelegt sind */ .woocommerce-account .woocommerce-MyAccount-navigation li a { font-size: 16px !important; padding: 18px 16px 19px !important; } .woocommerce-account .woocommerce-MyAccount-navigation li a::before { width: 22px; height: 22px; } .cfs-adressen .woocommerce-Addresses { margin-top: 6px; } /* Stream-Zeile mit eigenem Knopf rechts (Knopftyp „Gutschein anwenden", klein) */ .cfs-stream-block .cfs-st > .cfs-st-ohne { grid-template-columns: 40px minmax(0,1fr) auto !important; } .cfs-st-text .cfs-st-wann { margin-top: 2px; } .cfs-st-knopf { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border: 1px solid #7fb857; border-radius: 6px; background: #12170f; color: #9ad072 !important; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; text-decoration: none !important; transition: background .15s, color .15s; } .cfs-st-knopf:hover { background: #7fb857; color: #12170f !important; } .cfs-st-neu .cfs-st-knopf { background: #7fb857; color: #12170f !important; } .cfs-st-neu .cfs-st-knopf:hover { background: #9ad072; } .cfs-stream-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .cfs-stream-gelesen { font-size: 14px; font-weight: 700; color: #9ad072 !important; text-decoration: underline !important; } .cfs-stream-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .cfs-stream-filter button { height: 36px; padding: 0 14px; border: 1px solid rgba(127,184,87,.45); border-radius: 6px; background: rgba(18,23,15,.6); color: #d6e8c4; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .cfs-stream-filter button:hover { border-color: #9ad072; color: rgba(255,255,255,.97); } .cfs-stream-filter button.aktiv { background: #7fb857; border-color: #7fb857; color: #12170f; } .cfs-stream-leer { margin: 6px 0 0 !important; color: #b9c7b4; } @media (max-width: 600px) { .cfs-stream-block .cfs-st > .cfs-st-ohne { grid-template-columns: 34px minmax(0,1fr) !important; } .cfs-st-knopf { grid-column: 2; justify-self: start; margin-top: 4px; } } .cfs-st-sendung { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-faellig { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-preis { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-nachkauf { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-bewertung { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-geburtsdatum { --cfs-st: url("data:image/svg+xml;utf8,"); } /* Überschrift der Bescheid-Liste mit Unterzeile; „Sofort lieferbar" gleich groß (h2) */ .cfs-bescheid-kopf { margin-top: 30px; } .cfs-bescheid-kopf .cfs-konto-h2 { margin-bottom: 2px !important; } .cfs-bescheid-unter { margin: 0 0 12px !important; font-size: 14px; color: #b9c7b4; } .cfs-bescheid-vorschlaege { margin-top: 0 !important; } /* Kanal-Einstellungen mit Schaltern im CI */ .cfs-kanaele { margin-top: 30px; } .cfs-kanaele-tabelle { width: 100%; border-collapse: collapse; } .cfs-kanaele-tabelle th, .cfs-kanaele-tabelle td { padding: 12px 10px; border-bottom: 1px solid rgba(127,184,87,.18); text-align: center; font-size: 15px; color: rgba(255,255,255,.97); } .cfs-kanaele-tabelle thead th { font-size: 13px; color: #b9ea8f; text-transform: uppercase; letter-spacing: .04em; } .cfs-kanaele-tabelle tbody th { text-align: left; font-weight: 700; } .cfs-kanaele-tabelle tbody th small { display: block; font-size: 12px; font-weight: 500; color: #b9c7b4; } .cfs-schalter { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; } .cfs-schalter input { position: absolute; opacity: 0; width: 0; height: 0; } .cfs-schalter span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(127,184,87,.45); transition: background .15s; } .cfs-schalter span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d6e8c4; transition: transform .15s, background .15s; } .cfs-schalter input:checked + span { background: #7fb857; } .cfs-schalter input:checked + span::after { transform: translateX(20px); background: #12170f; } .cfs-schalter input:disabled + span { opacity: .45; cursor: not-allowed; } .cfs-kanaele-hinweis { margin: 8px 0 0 !important; font-size: 13px; color: #b9c7b4; } .cfs-kanaele-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; } .cfs-kanaele-fuss .cfs-kachel-meldung { margin-right: auto !important; } /* Für dich: Unterzeile, Kategorie-Streifen zwischen den Kartenreihen */ .cfs-fuer-dich-unter { margin: 0 0 18px !important; font-size: 16px; line-height: 1.5; color: #d6e8c4; max-width: 900px; } .cfs-fuer-dich .cfs-suchkarten { margin-bottom: 18px; } .cfs-kat-streifen { margin: 6px 0 26px; padding: 16px; border: 1px solid rgba(127,184,87,.35); border-radius: 14px; background: linear-gradient(135deg, rgba(127,184,87,.14), rgba(18,23,15,.6)); } .cfs-kat-streifen-titel { margin: 0 0 10px !important; font-size: 18px; font-weight: 800; color: rgba(255,255,255,.97); } .cfs-kat-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .cfs-kat-kachel { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; background: #1a2317; text-decoration: none !important; } .cfs-kat-kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; } .cfs-kat-kachel:hover img { transform: scale(1.05); } .cfs-kat-kachel span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(0deg, rgba(10,14,8,.92), transparent); color: rgba(255,255,255,.97); font-weight: 800; font-size: 16px; } @media (max-width: 767px) { .cfs-kat-kacheln { grid-template-columns: 1fr 1fr; } } /* Konto-Menü „Für dich" und Aufklapp in der Kopfzeile */ .woocommerce-MyAccount-navigation-link--fuer-dich a { --cfs-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .dropdown-container a.cfs-fuer-dich-link { color: #9ad072 !important; font-weight: 800 !important; } .my-account-wrapper .dropdown-container a.cfs-bescheid-link .cfs-nav-zahl { margin-left: 6px; } .cfs-stream-leer[hidden] { display: none !important; } .cfs-landing-gross small { margin-left: 8px; } /* Freunde-Karte im Raster gleich hoch wie die Produktkarten (gemessen 05.10. abends: +9…23 px geschlossen, +35…49 px offen): Innenabstand des Themes, Knopf kompakt, offen ohne Titel (das Badge sagt dasselbe), Code/Link ohne Beschriftung */ .products section.product.cfs-freunde-karte .meta-wrapper { padding: 8px 12px 0 !important; } .products section.product.cfs-freunde-karte .cfs-fk-titel { margin: 0 0 4px !important; } .products section.product.cfs-freunde-karte .cfla-knopf.cfs-fk-knopf { padding: 3px 6px 4px !important; gap: 0; } .products section.product.cfs-freunde-karte .cfla-knopf .cfla-knopf-gross { font-size: clamp(10px, 6cqi, 13px); line-height: 1.1; } .products section.product.cfs-freunde-karte .cfla-knopf .cfla-knopf-klein { font-size: clamp(8.5px, 4.8cqi, 10.5px); line-height: 1.1; } .products section.product.cfs-freunde-karte .cfs-fk-inhalt { container-type: inline-size; } .products section.product.cfs-freunde-karte.cfs-fk-offen .cfs-fk-titel { display: none; } .products section.product.cfs-freunde-karte .cfs-teilen-art { display: none; } .products section.product.cfs-freunde-karte .cfs-teilen-zeile { grid-template-columns: minmax(0,1fr) 26px; height: 28px; padding-left: 8px; } .products section.product.cfs-freunde-karte .cfs-teilen-wert { font-size: clamp(10px, 6.2cqi, 12.5px); } .products section.product.cfs-freunde-karte .cfs-kopier { width: 24px; height: 24px; } .cfs-fuer-dich-titel { margin: 0 0 6px !important; font-size: 34px !important; line-height: 1.15 !important; color: rgba(255,255,255,.97); } @media (max-width: 767px) { .cfs-fuer-dich-titel { font-size: 26px !important; } } /* ===================================================================================================================== 0.15.0 (06.10.) — Stream mit eigenem Charakter je Art: Leiste links + Symbolfarbe je Gruppe (Bestellung weiß, Guthaben amber, Produkte grün mit Produktbild, Für dich hellgrün), Kennzeile über dem Titel, „Dringend" amber, feste Zeilenhöhe (Filter springen nicht), Zeit + Knopf rechts in fester Spalte. ===================================================================================================================== */ .cfs-stream-block .cfs-st > .cfs-st-ohne { position: relative; grid-template-columns: 56px minmax(0,1fr) 150px !important; min-height: 88px; padding: 12px 16px 12px 20px; gap: 14px; overflow: hidden; } .cfs-st > .cfs-st-ohne::before, .cfs-st > a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cfs-st-farbe, #7fb857); opacity: .9; } .cfs-st-g-bestellung { --cfs-st-farbe: rgba(255,255,255,.75); --cfs-st-symbol: rgba(255,255,255,.92); --cfs-st-grund: rgba(255,255,255,.08); } .cfs-st-g-guthaben { --cfs-st-farbe: #e0a326; --cfs-st-symbol: #f3c35a; --cfs-st-grund: rgba(224,163,38,.13); } .cfs-st-g-produkte { --cfs-st-farbe: #9ad072; --cfs-st-symbol: #9ad072; --cfs-st-grund: rgba(127,184,87,.14); } .cfs-st-g-fuer_dich { --cfs-st-farbe: #c8f59d; --cfs-st-symbol: #c8f59d; --cfs-st-grund: rgba(200,245,157,.12); } .cfs-stream-block .cfs-st-symbol { width: 48px; height: 48px; justify-self: center; background: var(--cfs-st-grund, rgba(127,184,87,.14)); } .cfs-stream-block .cfs-st-symbol::before { inset: 12px; background: var(--cfs-st-symbol, #9ad072); } .cfs-st-bild { display: block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(127,184,87,.3); } .cfs-st-bild img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; } .cfs-st-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; } .cfs-st-marke { font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--cfs-st-farbe, #9ad072); } .cfs-st-a-wieder_da .cfs-st-marke:not(.cfs-st-marke-knapp):not(.cfs-st-marke-dringend) { padding: 4px 8px; border-radius: 4px; background: linear-gradient(180deg, #a2dc74, #5e9a3a); color: #0d1108; } .cfs-st-a-preis .cfs-st-marke:not(.cfs-st-marke-knapp) { padding: 3px 7px; border: 1px solid #9ad072; border-radius: 4px; } .cfs-st-marke-knapp { padding: 3px 7px; border: 1px solid #e0a326; border-radius: 4px; color: #f3c35a !important; } .cfs-st-marke-dringend { padding: 4px 8px; border-radius: 4px; background: linear-gradient(180deg, #f3c35a, #e0a326 55%, #bf861a); color: #12170f !important; } .cfs-stream-block .cfs-st-titel { font-size: 15.5px; } .cfs-st-rechts { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; align-self: stretch; } .cfs-stream-block .cfs-st-text .cfs-st-wann { display: none; } .cfs-st-rechts .cfs-st-wann { margin: 0; } .cfs-st-rechts .cfs-st-knopf { min-width: 130px; } .cfs-st-knopf-leer { display: block; height: 36px; } /* Dringend: amber Rahmen mit leichtem Schein — läuft in höchstens zwei Tagen ab */ .cfs-st.cfs-st-dringend > .cfs-st-ohne { border-color: #e0a326 !important; background: linear-gradient(90deg, rgba(224,163,38,.16), rgba(18,23,15,.6) 55%) !important; box-shadow: 0 0 16px rgba(224,163,38,.18); } .cfs-st.cfs-st-dringend .cfs-st-knopf { background: linear-gradient(180deg, #f3c35a, #e0a326 55%, #bf861a); border-color: #f3c35a; color: #12170f !important; } /* neu: heller Grund + „neu" an der Zeit; nach „Alle als gelesen" sanft zurück */ .cfs-stream-block .cfs-st.cfs-st-neu > .cfs-st-ohne { box-shadow: none; background: linear-gradient(90deg, rgba(127,184,87,.16), rgba(18,23,15,.55) 60%); } .cfs-st > .cfs-st-ohne { transition: background .6s ease, border-color .6s ease; } .cfs-st-wird-gelesen .cfs-st-wann::before { content: none; } .cfs-weg { opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s; } .cfs-stream-gelesen.cfs-erledigt { color: #9ad072 !important; text-decoration: none !important; pointer-events: none; } .cfs-stream-gelesen.cfs-erledigt::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: #9ad072; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .cfs-stream-leer { list-style: none; padding: 18px; border: 1px dashed rgba(127,184,87,.4); border-radius: 10px; color: #b9c7b4; font-size: 14px; } .cfs-stream-leer[hidden] { display: none !important; } html { scrollbar-gutter: stable; } /* Glocken-Fenster: Bild klein, Kennzeile knapp */ .cfs-stream-klein .cfs-st-bild { width: 32px; height: 32px; grid-row: span 2; border-radius: 6px; } .cfs-stream-klein .cfs-st-marken { margin-bottom: 1px; } .cfs-stream-klein .cfs-st-marke { font-size: 10px; } .cfs-stream-klein .cfs-st-a-wieder_da .cfs-st-marke:not(.cfs-st-marke-knapp) { padding: 2px 6px; } .cfs-stream-klein .cfs-st > a { position: relative; padding-left: 14px; } @media (max-width: 600px) { .cfs-stream-block .cfs-st > .cfs-st-ohne { grid-template-columns: 44px minmax(0,1fr) !important; padding: 12px 12px 12px 16px; gap: 10px 12px; min-height: 0; } .cfs-stream-block .cfs-st-symbol { width: 40px; height: 40px; } .cfs-stream-block .cfs-st-symbol::before { inset: 10px; } .cfs-st-bild { width: 44px; height: 44px; } .cfs-st-rechts { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; } .cfs-st-knopf-leer { display: none; } } /* Einstellungen: Überschrift und Schalter linksbündig übereinander, Meldung unter der Tabelle */ .cfs-kanaele-tabelle th, .cfs-kanaele-tabelle td { text-align: left !important; } .cfs-kanaele-tabelle thead th:not(:first-child), .cfs-kanaele-tabelle td { width: 18%; } .cfs-schalter { vertical-align: middle; } .cfs-schalter-gesperrt { cursor: help; } .cfs-schalter-gesperrt input:disabled + span { cursor: help; } .cfs-kanaele-fuss { justify-content: flex-start; min-height: 22px; margin-top: 10px; } .cfs-kanaele-fuss .cfs-kachel-meldung { color: #9ad072; font-weight: 700; } .cfs-kanaele-fuss .cfs-kachel-meldung.cfs-fehler { color: #f3c35a; } @media (max-width: 600px) { .cfs-kanaele-tabelle th, .cfs-kanaele-tabelle td { padding: 10px 6px; font-size: 14px; } .cfs-kanaele-tabelle thead th { font-size: 11px; } } /* Freunde-Karte 0.15.0: Badge zweizeilig, bleibt im Bild; breite Fassung mit drei Schritten und Aktion rechts */ .cfs-fk-badge { display: inline-flex !important; flex-direction: column; align-items: flex-start; gap: 3px; max-width: calc(100% - 20px); padding: 6px 9px !important; line-height: 1.05 !important; white-space: nowrap; } .cfs-fk-badge b { font-weight: 900; font-size: 13px; letter-spacing: .02em; } .cfs-fk-badge span { font-size: 10.5px; font-weight: 800; } .cfs-fk-stream, .cfs-fk-konto { grid-template-columns: 150px minmax(0,1fr) 300px !important; align-items: center; gap: 0 !important; } .cfs-fk-stream .cfs-fk-bild, .cfs-fk-konto .cfs-fk-bild { align-self: stretch; aspect-ratio: auto !important; min-height: 150px !important; } .cfs-fk-mitte { padding: 16px 20px; min-width: 0; } .cfs-fk-mitte .cfs-fk-titel { margin: 0 0 10px !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.25 !important; color: rgba(255,255,255,.97) !important; } .cfs-fk-schritte { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; counter-reset: fk; } .cfs-fk-schritte li { counter-increment: fk; position: relative; margin: 0 !important; padding: 8px 10px 8px 36px; border: 1px solid rgba(127,184,87,.3); border-radius: 8px; background: rgba(10,14,8,.45); display: flex; flex-direction: column; gap: 2px; } .cfs-fk-schritte li::before { content: counter(fk); position: absolute; left: 9px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: #7fb857; color: #12170f; font-size: 12px; font-weight: 900; line-height: 20px; text-align: center; } .cfs-fk-schritte b { font-size: 14px; color: rgba(255,255,255,.97); } .cfs-fk-schritte span { font-size: 12.5px; line-height: 1.3; color: #b9c7b4; } .cfs-fk-stream .cfs-fk-inhalt, .cfs-fk-konto .cfs-fk-inhalt { padding: 16px 18px 16px 0; display: flex; flex-direction: column; justify-content: center; } .cfs-fk-stream .cfla-knopf.cfs-fk-knopf, .cfs-fk-konto .cfla-knopf.cfs-fk-knopf { width: 100% !important; display: flex !important; } .cfs-fk-stream .cfs-teilen-titel, .cfs-fk-konto .cfs-teilen-titel { margin-bottom: 6px !important; } @media (max-width: 900px) { .cfs-fk-stream, .cfs-fk-konto { grid-template-columns: 120px minmax(0,1fr) !important; } .cfs-fk-stream .cfs-fk-inhalt, .cfs-fk-konto .cfs-fk-inhalt { grid-column: 1 / -1; padding: 0 16px 16px; } } @media (max-width: 600px) { .cfs-fk-stream, .cfs-fk-konto { grid-template-columns: 1fr !important; } .cfs-fk-stream .cfs-fk-bild, .cfs-fk-konto .cfs-fk-bild { min-height: 120px !important; } .cfs-fk-schritte { grid-template-columns: 1fr; } } /* WhatsApp teilen: richtiger Knopf (gefüllt grün, Linien-Symbol) statt unterstrichenem Link */ a.cfs-teilen-whatsapp { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 4px; padding: 0 14px; border: 1px solid #9ad072; border-radius: 6px; background: #7fb857; color: #12170f !important; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none !important; transition: background .15s, box-shadow .15s; } a.cfs-teilen-whatsapp:hover { background: #9ad072; box-shadow: 0 0 14px rgba(154,208,114,.45); } .cfs-ic-wa { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Nachladen: grüner Ring im Knopf, solange geladen wird (nur während des Ladens, keine Daueranimation) */ .button.cfs-bescheid-mehr.cfs-laedt { color: transparent !important; position: relative; } .button.cfs-bescheid-mehr.cfs-laedt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(154,208,114,.25); border-top-color: #9ad072; border-radius: 50%; animation: cfs-dreh .7s linear infinite; } .cfs-stream-block .cfs-st > .cfs-st-ohne { min-height: 96px; } /* gemessen 06.10.: 92/94 px gemischt → alle 96 px */ /* Profilkopf 0.15.0 (06.10.): Status „Felix, Auszubildender bei CannaFree" oben, Unterstreichung = vier Stufen-Kästchen, Avatar rückt darunter; Guthaben größer mit Schein; Geschenk-Zähler in Segmenten je Bestellung */ .cfs-profil-links { flex-direction: column; align-items: flex-start; gap: 12px; flex: 0 1 340px; } .cfs-profil-reihe { display: flex; align-items: center; gap: 16px; } .cfs-status { display: inline-flex; flex-direction: column; gap: 6px; max-width: 100%; } .cfs-status-text { font-size: 17px; font-weight: 600; line-height: 1.25; color: rgba(255,255,255,.97); } .cfs-status-text b { font-weight: 800; color: #c8f59d; text-shadow: 0 0 10px rgba(154,208,114,.55); } .cfs-status-leiste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; height: 6px; } .cfs-status-leiste span { border-radius: 2px; background: rgba(255,255,255,.14); } .cfs-status-leiste span.an { background: linear-gradient(90deg, #7fb857, #9ad072); box-shadow: 0 0 8px rgba(154,208,114,.6); } .cfs-profil-guthaben { margin-top: 6px; font-size: 17px; } .cfs-segmente { display: flex; gap: 4px; margin: 2px 0 0; } .cfs-seg { position: relative; flex: 1; height: 22px; border-radius: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; } .cfs-seg small { font-size: 10.5px; font-weight: 800; color: rgba(255,255,255,.45); letter-spacing: .02em; } .cfs-seg.an { background: linear-gradient(180deg, #9ad072, #6ea648); border-color: #9ad072; box-shadow: 0 0 10px rgba(154,208,114,.4); } .cfs-seg.an small { color: #12170f; } .cfs-seg-geschenk { border: 1px dashed rgba(200,245,157,.7); background: rgba(127,184,87,.12); } .cfs-seg-geschenk small { display: none; } .cfs-seg-geschenk::before { content: ""; width: 14px; height: 14px; background: #c8f59d; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } @media (max-width: 600px) { .cfs-status-text { font-size: 15.5px; } .cfs-profil-links { flex-basis: auto; } } /* Konto-Aufklapp in der Kopfzeile 0.15.0 (Felix, 06.10.: „noch etwas trüde"): oben Status in grüner Leuchtschrift mit Stufen-Leiste und Guthaben, darunter Links mit denselben Linien-Symbolen wie die Konto-Reiter, Hover grün */ .my-account-wrapper .account-dropdown-form { min-width: 290px; padding: 0 !important; border: 1px solid rgba(127,184,87,.55) !important; border-radius: 12px !important; background: linear-gradient(180deg, #1c2a16 0%, #12170f 100%) !important; box-shadow: 0 16px 34px rgba(0,0,0,.55) !important; overflow: hidden; } .my-account-wrapper .account-dropdown-form .form-content { padding: 0 !important; } .my-account-wrapper .account-dropdown-form ul { margin: 0 !important; padding: 6px 0 8px !important; } .my-account-wrapper .account-dropdown-form li.cfs-dd-kopf { padding: 14px 16px 12px !important; margin: 0 0 6px !important; border-bottom: 1px solid rgba(127,184,87,.25); background: radial-gradient(circle at 0% 0%, rgba(127,184,87,.22), transparent 70%); } .cfs-dd-kopf .cfs-status-text { font-size: 15px; } .cfs-dd-kopf .cfs-status-text b { color: #c8f59d; text-shadow: 0 0 10px rgba(154,208,114,.7), 0 0 2px rgba(200,245,157,.6); } .cfs-dd-kopf .cfs-dd-guthaben { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 800; color: #c8f59d; text-shadow: 0 0 10px rgba(154,208,114,.55); text-decoration: none !important; } .my-account-wrapper .account-dropdown-form li:not(.cfs-dd-kopf) a { position: relative; display: flex !important; align-items: center; gap: 10px; padding: 8px 16px !important; color: rgba(255,255,255,.97) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: background .15s, color .15s; } .my-account-wrapper .account-dropdown-form li:not(.cfs-dd-kopf) a::before { content: ""; flex: none; width: 18px; height: 18px; background: #9ad072; -webkit-mask: var(--cfs-dd-icon) center / contain no-repeat; mask: var(--cfs-dd-icon) center / contain no-repeat; } .my-account-wrapper .account-dropdown-form li:not(.cfs-dd-kopf) a:hover { background: rgba(127,184,87,.14); color: #9ad072 !important; } .my-account-wrapper .account-dropdown-form li a.log-out { margin-top: 4px; border-top: 1px solid rgba(127,184,87,.18); color: #b9c7b4 !important; } .my-account-wrapper .account-dropdown-form a.my-account { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .account-dropdown-form a.orders { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .account-dropdown-form a.change-password { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .account-dropdown-form a.log-out { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .account-dropdown-form a.cfs-freunde-link { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .account-dropdown-form a.cfs-fuer-dich-link { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .account-dropdown-form a.cfs-bescheid-link { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .account-dropdown-form a.cfs-gutscheine-link { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } .my-account-wrapper .account-dropdown-form { min-width: 330px; } /* Statuszeile einzeilig */ /* Guthaben in der Kopfleiste (0.15.0): rechts in der Balkenzeile, über dem Herz — kompakt, leichter Schein, klickbar */ .cfs-kopfleiste-innen { display: flex; align-items: center; } .cfs-kopfleiste-innen > .cfs-ernte-leiste { flex: 1 1 auto; min-width: 0; } .cfs-kl-guthaben { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; margin-left: 4px; border: 1px solid rgba(154,208,114,.7); border-radius: 6px; background: rgba(127,184,87,.16); color: #c8f59d !important; font-size: 12.5px; font-weight: 800; white-space: nowrap; text-decoration: none !important; text-shadow: 0 0 8px rgba(154,208,114,.6); transition: background .15s, border-color .15s; } .cfs-kl-guthaben:hover { background: rgba(127,184,87,.3); border-color: #c8f59d; } .cfs-kl-guthaben.aktiv { border-color: #9ad072; box-shadow: 0 0 10px rgba(154,208,114,.35); } .cfs-kl-guthaben-ic { width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } @media (max-width: 767px) { .cfs-kl-guthaben { height: 22px; padding: 0 7px; font-size: 11px; gap: 4px; } .cfs-kl-guthaben-wort { display: none; } .cfs-kl-guthaben-ic { width: 13px; height: 13px; } } /* Einlösen-Rückmeldung: Anzeige leuchtet einmal auf, darunter eine Einblendung (nur nach dem Klick, keine Daueranimation) */ .cfs-kl-guthaben.cfs-poppt { animation: cfs-guthaben-pop 1.4s ease-out 1; } @keyframes cfs-guthaben-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(200,245,157,.8); } 20% { transform: scale(1.18); } 45% { transform: scale(1); box-shadow: 0 0 0 10px rgba(200,245,157,0); } 100% { box-shadow: 0 0 10px rgba(154,208,114,.35); } } .cfs-guthaben-hinweis { position: fixed; z-index: 100001; width: min(340px, calc(100vw - 24px)); padding: 12px 14px 12px 46px; border: 1px solid #9ad072; border-radius: 10px; background: linear-gradient(180deg, #2b4022 0%, #1c2a16 100%); box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 18px rgba(127,184,87,.3); color: rgba(255,255,255,.97); font-size: 13.5px; line-height: 1.4; animation: cfs-tipp .25s ease-out 1; } .cfs-guthaben-hinweis b { display: block; margin-bottom: 2px; font-size: 15px; color: #c8f59d; text-shadow: 0 0 8px rgba(154,208,114,.6); } .cfs-guthaben-hinweis::before { content: ""; position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; background: #9ad072; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .cfs-guthaben-hinweis::after { content: ""; position: absolute; top: -6px; right: var(--pfeil, 30px); width: 10px; height: 10px; background: #2b4022; border-left: 1px solid #9ad072; border-top: 1px solid #9ad072; transform: rotate(45deg); } .cfs-guthaben-hinweis.cfs-weg { opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; } /* Freunde werben 0.15.0: Diagramm als HTML-Balken in echter Schriftgröße + Kennzahlen daneben (Kasten gefüllt) */ .cfs-freunde-seite .cfs-graph.cfs-graph-neu { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 24px; align-items: stretch; padding: 18px 20px; } .cfs-graph-balken { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 8px; height: 200px; align-items: end; padding-bottom: 2px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 25%); background-size: 100% calc(100% - 24px); background-repeat: no-repeat; } .cfs-gb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .cfs-gb-zahl { font-size: 15px; font-weight: 800; color: #c8f59d; line-height: 1; margin-bottom: 5px; min-height: 15px; } .cfs-gb-saeule { display: block; width: 100%; max-width: 44px; border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,.12); max-height: calc(100% - 44px); } .cfs-gb.an .cfs-gb-saeule { background: linear-gradient(180deg, #9ad072, #5e9a3a); box-shadow: 0 0 12px rgba(127,184,87,.35); } .cfs-gb-monat { margin-top: 7px; font-size: 13px; font-weight: 600; color: #d6e8c4; line-height: 1; } .cfs-graph-zahlen { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding-left: 22px; border-left: 1px solid rgba(127,184,87,.25); } .cfs-graph-zahlen div { display: flex; flex-direction: column; gap: 2px; } .cfs-graph-zahlen b { font-size: 26px; font-weight: 800; line-height: 1.1; color: rgba(255,255,255,.97); } .cfs-graph-zahlen div:first-child b { color: #c8f59d; text-shadow: 0 0 10px rgba(154,208,114,.5); } .cfs-graph-zahlen span { font-size: 13.5px; color: #b9c7b4; } @media (max-width: 767px) { .cfs-freunde-seite .cfs-graph.cfs-graph-neu { grid-template-columns: 1fr; gap: 16px; padding: 14px; } .cfs-graph-balken { gap: 4px; height: 170px; } .cfs-gb-monat { font-size: 11px; } .cfs-gb-zahl { font-size: 13px; } .cfs-graph-zahlen { flex-direction: row; justify-content: space-between; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(127,184,87,.25); } .cfs-graph-zahlen b { font-size: 20px; } .cfs-graph-zahlen span { font-size: 12px; } } /* Guthaben-Tabelle: als Kasten abgehoben, Kopf noch einmal deutlich davon abgesetzt */ .cfs-tabelle-rahmen { margin: 6px 0 22px; border: 1px solid rgba(127,184,87,.45); border-radius: 12px; overflow: hidden; background: rgba(10,14,8,.7); box-shadow: 0 8px 22px rgba(0,0,0,.3); overflow-x: auto; } .cfs-tabelle-rahmen .cfs-konto-tabelle { margin: 0 !important; } .cfs-tabelle-rahmen .cfs-fw-tabelle thead th { background: linear-gradient(180deg, #2f4a24, #22361a) !important; color: #c8f59d !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; padding: 12px 14px !important; border-bottom: 2px solid #7fb857 !important; } .cfs-tabelle-rahmen .cfs-fw-tabelle tbody td { padding: 12px 14px !important; border-bottom: 1px solid rgba(127,184,87,.15) !important; } .cfs-tabelle-rahmen .cfs-fw-tabelle tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); } .cfs-tabelle-rahmen .cfs-fw-tabelle tbody tr:last-child td { border-bottom: 0 !important; } .cfs-tabelle-rahmen .cfs-fw-tabelle td:nth-child(2), .cfs-tabelle-rahmen .cfs-fw-tabelle td:nth-child(3), .cfs-tabelle-rahmen .cfs-fw-tabelle th:nth-child(2), .cfs-tabelle-rahmen .cfs-fw-tabelle th:nth-child(3) { text-align: right; white-space: nowrap; } .cfs-stufen-bloecke.cfs-stufen-vier { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 991px) { .cfs-stufen-bloecke.cfs-stufen-vier { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 480px) { .cfs-stufen-bloecke.cfs-stufen-vier { grid-template-columns: 1fr; } } /* Wunschliste teilen (0.15.0): Wahl Privat / Nur für Freunde als zwei Kacheln im Knopf-Stil, darunter Link + WhatsApp */ .cfs-wl-teilen { margin: 0 0 22px; padding: 16px 18px; border: 1px solid rgba(127,184,87,.4); border-radius: 12px; background: rgba(18,23,15,.6); } .cfs-wl-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cfs-wl-frage { margin-right: 6px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.97); } .cfs-wl-option { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 16px; border: 1px solid #7fb857; border-radius: 6px; background: #12170f; color: #9ad072; cursor: pointer; text-align: left; transition: background .15s, color .15s; } .cfs-wl-option b { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .cfs-wl-option small { font-size: 11.5px; color: #b9c7b4; } .cfs-wl-option:hover { background: rgba(127,184,87,.18); } .cfs-wl-option.aktiv { background: #7fb857; color: #12170f; cursor: default; } .cfs-wl-option.aktiv small { color: #1f3318; } .cfs-wl-link { margin-top: 14px; max-width: 560px; } .cfs-wl-link[hidden] { display: none; } .cfs-wl-knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 2px; } .cfs-wl-knoepfe .cfs-teilen-whatsapp { flex: 1; margin-top: 0; } .cfs-wl-neu { flex: none; height: 40px; padding: 0 14px; border: 1px solid #7fb857; border-radius: 6px; background: #12170f; color: #9ad072; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; } .cfs-wl-neu:hover { background: #7fb857; color: #12170f; } .cfs-wl-hinweis { margin: 8px 0 0 !important; font-size: 13px; color: #b9c7b4; } .cfs-wl-gast { font-size: 14px; color: #d6e8c4; } .cfs-wl-gast a { color: #9ad072; font-weight: 700; } .cfs-wl-geteilt { padding-top: 30px; padding-bottom: 50px; } .cfs-wl-geteilt-kopf { margin-bottom: 18px; } .cfs-wl-geteilt-text { margin: 4px 0 0 !important; font-size: 15px; color: #d6e8c4; } @media (max-width: 600px) { .cfs-wl-option { flex: 1; } .cfs-wl-knoepfe { flex-direction: column; align-items: stretch; } } /* Einschübe neben der Freunde-Karte: gleiche Form, eigenes Symbol, Text statt Schritte */ .cfs-es-text { margin: 0 !important; font-size: 14px; line-height: 1.45; color: #d6e8c4; } .cfs-fk-symbol.cfs-es-herz { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .cfs-fk-symbol.cfs-es-liste { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* Wunschliste (06.10. gemessen): Preiszeile mit „inkl. MwSt." ist 180 px breit, Spalte war 130 px → überlappte die Verfügbarkeit; „Auf Lager" kam rot (rgb 255,0,0) aus einer fremden Regel → CI-Grün, ausverkauft amber */ @media (min-width: 992px) { .ts-wishlist-table-wrapper .heading-row, .ts-wishlist-table-wrapper .item.wishlist-item { grid-template-columns: 126px minmax(0,1fr) 190px 130px 210px 40px !important; } } /* nur Desktop – Handy hat eigene Regel; Knopf ist 200 px breit */ .ts-wishlist-table-wrapper .item .product-price .cf-preis-zeile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .ts-wishlist-table-wrapper .item .product-stock-status span.in-stock { color: #9ad072 !important; font-weight: 700; } .ts-wishlist-table-wrapper .item .product-stock-status span.out-of-stock { color: #f3c35a !important; font-weight: 700; } @media (min-width: 992px) and (max-width: 1199px) { .cfs-fuer-dich .woocommerce.main-products.grid.cfs-suchkarten { --ts-columns: 4 !important; } } /* 06.10. gemessen: bei 1024 px 5 statt 4 Spalten → Preiszeile brach um (35 statt 21 px) */ .products > .cfs-kat-streifen { grid-column: 1 / -1; margin: 4px 0 8px; } /* im Produktraster über die ganze Breite */ /* Produktzeilen (Vorschläge, Warenkorb-Auffüller) auf dem Handy (06.10. gemessen: Name wurde 1 Zeichen breit, weil die Desktop-Spalten 80 px | 1fr | auto | auto ohne Handy-Regel galten): Bild links über zwei Reihen, Name oben, Preis + Knopf darunter */ @media (max-width: 600px) { .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) { grid-template-columns: 64px minmax(0,1fr) auto !important; gap: 6px 12px !important; align-items: center !important; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__bild { grid-row: 1 / span 2; grid-column: 1; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__bild img { width: 64px; height: 64px; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__name { grid-row: 1; grid-column: 2 / 4; font-size: 14.5px; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__preis { grid-row: 2; grid-column: 2; padding-top: 0 !important; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__knopf { grid-row: 2; grid-column: 3; } } /* Warenkorb auf dem Handy (06.10. gemessen: Tabelle 518 px breit in 338 px Formular → Titel und Preise liefen rechts aus dem Bild). Nur ≤ 600 px: Tabelle füllt die Breite, Bild links, Name daneben umbrechend, Preis/Anzahl/Summe als beschriftete Zeilen darunter. */ @media (max-width: 600px) { body.woocommerce-cart .woocommerce-cart-form table.shop_table.cart, body.woocommerce-cart .woocommerce-cart-form table.shop_table.cart tbody { display: block !important; width: 100% !important; } body.woocommerce-cart .woocommerce-cart-form table.shop_table.cart thead { display: none !important; } body.woocommerce-cart .woocommerce-cart-form table.shop_table.cart tr.cart_item { position: relative; display: flex !important; flex-wrap: wrap; width: 100% !important; padding: 12px 40px 12px 0 !important; } body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail { display: block !important; flex: 0 0 84px; width: 84px !important; padding: 0 0 0 10px !important; } body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail img { width: 72px !important; height: 72px !important; } body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name { flex: 1 1 0; min-width: 0; width: auto !important; padding: 0 0 0 10px !important; white-space: normal !important; } body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name * { white-space: normal !important; overflow-wrap: anywhere; } body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-price, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal { display: flex !important; align-items: center; justify-content: space-between; flex: 0 0 100%; width: 100% !important; padding: 6px 0 0 10px !important; text-align: right !important; } body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-price::before, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-quantity::before, body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-subtotal::before { content: attr(data-title); float: none !important; font-size: 13px; color: #b9c7b4; } body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-remove { position: absolute; right: 6px; top: 12px; padding: 0 !important; border: 0 !important; } } @media (max-width: 600px) { body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name::before { display: none !important; } } /* Glocke: Schwellen-Anstoß „Noch X € bis zum Gratisversand" (06.10.) — feste erste Zeile, zählt nicht in die Glocke */ .cfs-glocke-schwelle { margin: 0 0 10px; padding: 10px 10px 10px 12px; border: 1px solid rgba(127,184,87,.45); border-left: 3px solid #7fb857; border-radius: 8px; background: rgba(127,184,87,.07); display: grid; gap: 8px; } .cfs-glocke-schwelle[hidden] { display: none; } .cfs-gs-kopf { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; align-items: center; color: rgba(255,255,255,.97) !important; font-size: 13.5px; line-height: 1.35; font-weight: 600; text-decoration: none !important; } .cfs-gs-kopf .cfs-st-symbol { width: 32px; height: 32px; } .cfs-gs-kopf .cfs-st-symbol::before { inset: 7px; } .cfs-gs-kopf strong { color: #9ad072; font-weight: 800; white-space: nowrap; } .cfs-gs-balken { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; } .cfs-gs-balken > span { display: block; height: 100%; background: #7fb857; border-radius: 2px; } .cfs-gs-produkt { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 6px; border-radius: 6px; background: rgba(18,23,15,.6); text-decoration: none !important; } .cfs-gs-produkt:hover { background: rgba(127,184,87,.14); } .cfs-gs-bild img { width: 40px !important; height: 40px !important; object-fit: cover; border-radius: 6px; display: block; } .cfs-gs-ptext { display: grid; min-width: 0; } .cfs-gs-hinweis { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9ad072; } .cfs-gs-name { font-size: 13px; color: rgba(255,255,255,.97); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfs-gs-preis { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.97); white-space: nowrap; } .cfs-gs-korb { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #9ad072 !important; text-decoration: none !important; } .cfs-gs-korb:hover { color: #c8f59d !important; } /* Geschenkkarte (06.10.): Knopf im Einheits-Knopftyp + Fenster mit Vorschau, Motiven, Namensfeld */ .cfs-gk-ic { display: inline-block; width: 17px; height: 17px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } button.cfs-gk-knopf, .cfs-gk-steuer button.cfs-gk-teilen, .cfs-gk-steuer button.cfs-gk-laden { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 8px; padding: 0 14px; border: 1px solid #7fb857; border-radius: 6px; background: #12170f; color: #9ad072; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background .15s, color .15s; } button.cfs-gk-knopf:hover, .cfs-gk-steuer button.cfs-gk-laden:hover { background: #7fb857; color: #12170f; } .cfs-gk-steuer button.cfs-gk-teilen { margin-top: 18px; background: #7fb857; color: #12170f; border-color: #9ad072; } .cfs-gk-steuer button.cfs-gk-teilen:hover { background: #9ad072; box-shadow: 0 0 14px rgba(154,208,114,.45); } html.cfs-gk-offen { overflow: hidden; } .cfs-gk { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; } .cfs-gk[hidden] { display: none; } .cfs-gk-grund { position: absolute; inset: 0; background: rgba(5,7,4,.78); } .cfs-gk-box { position: relative; display: grid; grid-template-columns: minmax(0, 360px) 300px; gap: 24px; align-items: start; max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border: 1px solid rgba(127,184,87,.55); border-radius: 12px; background: #12170f; box-shadow: 0 24px 60px rgba(0,0,0,.6); } .cfs-gk-vorschau { position: relative; } .cfs-gk-vorschau canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 8px; background: #0b0f09; } .cfs-gk-vorschau .cfs-spinner { position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; display: none; } /* nur beim Zeichnen, keine Daueranimation */ .cfs-gk-laedt .cfs-gk-vorschau .cfs-spinner { display: inline-block; } .cfs-gk-titel { margin: 0 32px 14px 0; font-size: 18px; font-weight: 800; color: rgba(255,255,255,.97); } .cfs-gk-label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #b9c7b4; } .cfs-gk-label small { font-weight: 600; text-transform: none; letter-spacing: 0; } .cfs-gk-motive { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; } .cfs-gk-motiv { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; display: grid; gap: 4px; color: #b9c7b4; font-size: 11px; font-weight: 700; } .cfs-gk-motiv img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; } .cfs-gk-motiv:hover { color: #9ad072; } .cfs-gk-motiv.aktiv { border-color: #7fb857; color: #9ad072; } .cfs-gk-name { width: 100%; height: 44px; padding: 0 12px; border: 1px solid rgba(127,184,87,.55) !important; border-radius: 6px !important; background: #0b0f09 !important; color: rgba(255,255,255,.97) !important; font-size: 15px; } .cfs-gk-name:focus { border-color: #9ad072 !important; outline: none; box-shadow: 0 0 0 3px rgba(127,184,87,.2); } .cfs-gk-meldung { margin: 10px 0 0; font-size: 13px; line-height: 1.35; color: #b9c7b4; } .cfs-gk-zu { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; } .cfs-gk-zu::before, .cfs-gk-zu::after { content: ''; position: absolute; left: 8px; right: 8px; top: 15px; height: 2px; border-radius: 1px; background: #9ad072; transform: rotate(45deg); } .cfs-gk-zu::after { transform: rotate(-45deg); } .cfs-gk-zu:hover { background: rgba(127,184,87,.18); } @media (max-width: 767px) { .cfs-gk { padding: 0; align-items: stretch; } .cfs-gk-box { grid-template-columns: 1fr; gap: 14px; max-height: 100vh; border-radius: 0; padding: 16px 16px 24px; } .cfs-gk-vorschau { width: min(100%, 300px); justify-self: center; margin-top: 30px; } } /* ===== Für dich als Swipe (06.10., erste Fassung) — Theme-Archivkarten, nur Steuerleiste/Kopfstreifen eigen ===== */ .cfs-sw { position: relative; } .cfs-sw-kopftext { margin-bottom: 18px; } .cfs-sw .main-products.grid .products, .cfs-sw .products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; margin: 0 !important; } .cfs-sw .products > section.product { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; position: relative; display: flex; flex-direction: column; border-radius: 10px; transition: opacity .2s, box-shadow .2s; } .cfs-sw .products > section.product > .product-wrapper { flex: 1 1 auto; } .cfs-sw .cfs-sw-karte .quickshop, .cfs-sw .cfs-sw-karte .loop-add-to-cart { display: none !important; } .cfs-sw-steuer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .cfs-sw-steuer-weiter { grid-template-columns: 1fr; } .cfs-sw-k, .cfs-sw-daumen { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid #7fb857; border-radius: 6px; background: #12170f; color: #9ad072 !important; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: background .15s, color .15s; } .cfs-sw-k:hover, .cfs-sw-daumen:hover { background: #7fb857; color: #12170f !important; } .cfs-sw-k[disabled] { opacity: .6; cursor: default; } .cfs-sw-k.cfs-sw-drin { background: #7fb857; color: #12170f !important; } .cfs-sw-daumen { height: 44px; } .cfs-sw-daumen::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--cfs-daumen) center / contain no-repeat; mask: var(--cfs-daumen) center / contain no-repeat; } .cfs-sw-daumen::after { font-size: 12px; } .cfs-sw-daumen.cfs-sw-ja::after { content: 'Gefällt mir'; } .cfs-sw-daumen.cfs-sw-nein::after { content: 'Eher nicht'; } .cfs-sw-daumen { --cfs-daumen: url("data:image/svg+xml;utf8,"); } .cfs-sw-daumen.cfs-sw-nein::before { transform: rotate(180deg); } .cfs-sw-karte[data-art="ausverkauft"] .cfs-sw-korb { display: none; } .cfs-sw-karte[data-art="ausverkauft"] .cfs-sw-ansehen { grid-column: 1 / -1; } .cfs-sw-steuer .cfs-sw-nein { order: 1; } .cfs-sw-steuer .cfs-sw-ja { order: 2; } .cfs-sw-steuer .cfs-sw-ansehen { order: 3; } .cfs-sw-steuer .cfs-sw-korb { order: 4; } /* Runde 3, 3a (Felix, 08.10.): Rahmen nur ums Produkt, nicht um die Knöpfe — mit leichtem Schein */ .cfs-sw .woocommerce .products > section.product.cfs-sw-karte.cfs-sw-ja > .product-wrapper.product-wrapper { /* Theme-Hover-Regel hat 6 Klassen + !important */ box-shadow: 0 0 0 2px #7fb857, 0 0 16px 2px rgba(154,208,114,.45) !important; border-radius: 10px; } section.cfs-sw-karte.cfs-sw-ja .cfs-sw-daumen.cfs-sw-ja { background: #7fb857; color: #12170f !important; } section.cfs-sw-karte.cfs-sw-nein { opacity: .45; } section.cfs-sw-karte.cfs-sw-nein .cfs-sw-daumen.cfs-sw-nein { background: rgba(255,255,255,.12); color: rgba(255,255,255,.97) !important; border-color: rgba(255,255,255,.4); } .cfs-sw-badge { position: relative; z-index: 2; } .cfs-sw-stempel { display: none; } .cfs-sw-mehr { display: flex; justify-content: center; min-height: 1px; padding: 18px 0; } .cfs-sw-mehr .cfs-spinner { display: none; } .cfs-sw-laedt .cfs-sw-mehr .cfs-spinner { display: inline-block; } .cfs-sw-ende[hidden] { display: none !important; } .cfs-sw-ende { text-align: center; color: #b9c7b4; margin: 10px 0 30px; } .cfs-sw-ende a { color: #9ad072; } .cfs-sw-kopf, .cfs-sw-hinweis { display: none; } /* Varianten-Auswahl (von unten, Desktop mittig) */ .cfs-sw-auswahl { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; } .cfs-sw-auswahl[hidden] { display: none; } .cfs-sw-auswahl-grund { position: absolute; inset: 0; background: rgba(5,7,4,.7); } .cfs-sw-auswahl-box { position: relative; width: 100%; max-width: 460px; padding: 18px 16px 20px; border: 1px solid rgba(127,184,87,.55); border-bottom: 0; border-radius: 12px 12px 0 0; background: #12170f; animation: cfs-sw-hoch .22s ease-out; } @keyframes cfs-sw-hoch { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .cfs-sw-auswahl-titel { margin: 0 0 12px; font-weight: 800; font-size: 15px; color: rgba(255,255,255,.97); } .cfs-sw-auswahl-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; } .cfs-sw-auswahl-liste button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1px solid #7fb857; border-radius: 6px; background: #12170f; color: rgba(255,255,255,.97); font-size: 14px; text-align: left; cursor: pointer; } .cfs-sw-auswahl-liste button:hover { background: rgba(127,184,87,.18); } .cfs-sw-auswahl-liste button[disabled] { opacity: .45; cursor: default; } .cfs-sw-auswahl-liste small { display: block; font-size: 11.5px; color: #b9c7b4; } .cfs-sw-auswahl-liste b { color: #9ad072; white-space: nowrap; } .cfs-sw-auswahl-zu { width: 100%; height: 40px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: transparent; color: #b9c7b4; font-weight: 700; cursor: pointer; } @media (min-width: 768px) and (max-width: 1199px) { .cfs-sw .main-products.grid .products, .cfs-sw .products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; } } @media (min-width: 768px) { .cfs-sw-auswahl { align-items: center; } .cfs-sw-auswahl-box { border-bottom: 1px solid rgba(127,184,87,.55); border-radius: 12px; } } /* Spiel am Handy: Kopfstreifen + Einstieg (Stapel siehe unten, gilt für alle Breiten) */ @media (max-width: 767px) { body.cfs-swipe-seite:not(.cfs-sw-kopf-voll) header.ts-header, body.cfs-swipe-seite:not(.cfs-sw-kopf-voll) .cfs-kopfleiste { display: none !important; } body.cfs-swipe-seite #main-content, body.cfs-swipe-seite .page-container { padding-top: 0 !important; } .cfs-sw-spiel .cfs-sw-kopftext { display: none; } .cfs-sw-kopf { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 50; height: 48px; margin: 0 -15px 12px; padding: 0 8px; background: #12170f; border-bottom: 1px solid rgba(127,184,87,.35); } .cfs-sw-zurueck, .cfs-sw-gross { position: relative; width: 40px; height: 40px; border: 0; background: none; padding: 0; cursor: pointer; } .cfs-sw-zurueck::before, .cfs-sw-gross::before { content: ''; position: absolute; inset: 10px; background: #9ad072; -webkit-mask: var(--cfs-sw-pfeil) center / contain no-repeat; mask: var(--cfs-sw-pfeil) center / contain no-repeat; } .cfs-sw-zurueck { --cfs-sw-pfeil: url("data:image/svg+xml;utf8,"); } .cfs-sw-gross { --cfs-sw-pfeil: url("data:image/svg+xml;utf8,"); } body.cfs-sw-kopf-voll .cfs-sw-gross::before { transform: rotate(180deg); } .cfs-sw-leiste { position: relative; min-width: 0; } .cfs-sw-balken { position: relative; display: block; width: 100%; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; } .cfs-sw-balken::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); } .cfs-sw-fuell { position: absolute; left: 0; top: 14px; height: 4px; border-radius: 2px; background: #7fb857; } .cfs-sw-punkt { position: absolute; top: 11px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #12170f; border: 2px solid rgba(255,255,255,.35); } .cfs-sw-punkt.ok { background: #9ad072; border-color: #c8f59d; } .cfs-sw-punkt.cfs-sw-neu { animation: cfs-sw-erreicht 1.5s ease-out 1; } @keyframes cfs-sw-erreicht { 0% { box-shadow: 0 0 0 0 rgba(200,245,157,.9); transform: scale(1); } 30% { transform: scale(1.7); } 100% { box-shadow: 0 0 0 16px rgba(200,245,157,0); transform: scale(1); } } .cfs-sw-info { position: absolute; left: -48px; right: -48px; top: 44px; z-index: 60; padding: 14px; border: 1px solid rgba(127,184,87,.55); border-radius: 10px; background: rgba(18,23,15,.98); box-shadow: 0 16px 36px rgba(0,0,0,.55); } .cfs-sw-info[hidden] { display: none; } .cfs-sw-info-kopf { margin: 0 0 10px; font-weight: 800; font-size: 14px; color: rgba(255,255,255,.97); } .cfs-sw-info ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; } .cfs-sw-info li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: rgba(255,255,255,.97); } .cfs-sw-info li small { color: #b9c7b4; } .cfs-sw-info li b { font-size: 12px; color: #b9c7b4; } .cfs-sw-info li.ok b { color: #9ad072; } .cfs-sw-info-punkt { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); } .cfs-sw-info li.ok .cfs-sw-info-punkt { background: #9ad072; border-color: #c8f59d; } .cfs-sw-info-korb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #9ad072 !important; text-decoration: none !important; } /* Einstieg (14.10.): keine Brückenseite mehr — das Spiel startet sofort, oben steht nur eine kleine Zeile für Neulinge */ .cfs-sw-spiel .cfs-sw-hinweis { display: block; margin: 0 0 8px; color: #b9c7b4; font-size: 13px; line-height: 1.4; text-align: center; text-wrap: balance; } .cfs-sw-spiel .cfs-sw-hinweis b { color: #9ad072; } .cfs-sw-spiel.cfs-sw-kennt .cfs-sw-hinweis { display: none; } /* Stapel: eine Karte */ } /* 06.10. abends (Felix): Status im Profilkopf so breit wie die Spalte bis zum Trennstrich (Schriftgröße per JS eingepasst), im Konto-Aufklapp zwei Zeilen: Name groß, darunter „Auszubildender bei CannaFree" */ .cfs-profil-links { align-self: stretch; } .cfs-status-profil { display: flex; width: 100%; } .cfs-status-profil .cfs-status-text { white-space: nowrap; align-self: flex-start; } .cfs-status-dd .cfs-status-name { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; } .cfs-status-dd .cfs-status-rolle { display: block; margin-top: 2px; font-size: 14.5px; white-space: nowrap; } .cfs-dd-kopf .cfs-status-text { font-size: inherit; } /* Schwellenleiste 1200–1439 px: Kurzform der Belohnung, sonst stoßen „129 €" und „15 €-Gutschein" aneinander (gemessen 1280) */ @media (min-width: 1200px) and (max-width: 1439px) { .cfs-kopfleiste .cfs-ernte-name { display: none !important; } .cfs-kopfleiste .cfs-ernte-name-kurz { display: inline !important; } } /* Logo im Kopf: Vergrößerung vom 06.10. auf Felix' Wunsch zurückgenommen (08.10.) — wieder Theme-Größe 186 × 62 px */ /* Abstand Name–Rolle als Rand statt Leerzeichen (ein Minifier entfernt das Leerzeichen zwischen den Spans im Profilkopf) */ .cfs-status-rolle { margin-left: .28em; } .cfs-status-dd .cfs-status-rolle { margin-left: 0; } /* 06.10. abends (Felix): Konto-Aufklapp — Rolle + vier Stufenkästchen über die volle Breite, dünne grüne Linie zwischen den Menüpunkten */ .cfs-status-dd { display: flex; width: 100%; } .cfs-status-dd .cfs-status-text { display: block; width: 100%; } .cfs-status-dd .cfs-status-rolle { display: inline-block; } .my-account-wrapper .account-dropdown-form li:not(.cfs-dd-kopf) + li:not(.cfs-dd-kopf) { border-top: 1px solid rgba(127,184,87,.28); } .my-account-wrapper .account-dropdown-form li a.log-out { margin-top: 0; } /* Abmelden: ans Ende der Konto-Seite (über dem Footer), nicht mehr im Profilkopf */ .cfs-abmelden-zeile { display: flex; justify-content: flex-end; margin: 36px 0 0; padding-top: 16px; border-top: 1px solid rgba(127,184,87,.25); } .cfs-korb-stups { animation: cfs-stups .45s ease-out 1; } @keyframes cfs-stups { 40% { transform: scale(1.18); } 100% { transform: none; } } a[data-cfs-treue].cfs-laedt { opacity: .6; pointer-events: none; } /* ===== 06.10. abends: „Für dich" = Raster, Spiel „Sorten-Match" = eine Karte in der Mitte ===== */ .cfs-sw-daumen::after { content: none !important; } .cfs-sw-daumen span { pointer-events: none; } .cfs-sw-steuer { grid-template-columns: 1fr 1fr; } .cfs-sw-fortschritt { height: 4px; margin-top: 14px; max-width: 440px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; } .cfs-sw-fortschritt span { display: block; width: 0; height: 100%; background: #7fb857; transition: width .3s ease-out; } .cfs-sw-spiel-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 700; color: #9ad072 !important; text-decoration: none !important; } .cfs-sw-spiel-link:hover { color: #c8f59d !important; } .cfs-sw-spiel-ic { width: 18px; height: 18px; background: currentColor; } /* Form (Cannabis-Blatt) siehe Block „CannaMatch-Symbol“ weiter unten */ .cfs-sw-feed .cfs-fuer-dich-unter b { color: #9ad072; } .cfs-sw-feed .products > .cfs-freunde-karte { height: auto; } @media (max-width: 767px) { .cfs-sw-feed .main-products.grid .products, .cfs-sw-feed .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .cfs-sw-feed .cfs-sw-daumen { height: 38px; padding: 0 4px; font-size: 10.5px; } .cfs-sw-feed .cfs-sw-steuer { gap: 6px; } } /* Spiel: eine Karte, mittig, alle Breiten */ .cfs-sw-spiel .cfs-sw-kopftext { text-align: center; } .cfs-sw-spiel .cfs-sw-fortschritt { margin-left: auto; margin-right: auto; } .cfs-sw-spiel .main-products.grid .products, .cfs-sw-spiel .products { display: block !important; position: relative; max-width: 440px; margin: 0 auto !important; } .cfs-sw-spiel .products > section.product { display: none; padding: 14px !important; border: 1px solid rgba(127,184,87,.35); background: rgba(18,23,15,.92); touch-action: pan-y; user-select: none; -webkit-user-select: none; } .cfs-sw-spiel .products > section.product.cfs-sw-oben { display: flex; animation: cfs-sw-rein .18s ease-out; } @keyframes cfs-sw-rein { from { transform: scale(.97); opacity: .6; } to { transform: none; opacity: 1; } } .cfs-sw-spiel .products > section.cfs-sw-zieht { transition: none !important; } .cfs-sw-spiel section.cfs-sw-karte.cfs-sw-nein { opacity: 1; } .cfs-sw-spiel .products img { -webkit-user-drag: none; } .cfs-sw-spiel .cfs-sw-daumen { height: 52px; font-size: 14px; } .cfs-sw-spiel .cfs-sw-mehr { min-height: 0; padding: 8px 0; } .cfs-sw-stempel { display: block; position: absolute; top: 28px; z-index: 5; padding: 6px 12px; border: 3px solid; border-radius: 6px; font-size: 20px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; opacity: 0; } .cfs-sw-stempel-ja { left: 22px; color: #9ad072; border-color: #9ad072; transform: rotate(-12deg); opacity: var(--cfs-sw-ja, 0); } .cfs-sw-stempel-nein { right: 22px; color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); transform: rotate(12deg); opacity: var(--cfs-sw-nein, 0); } .cfs-sw-feed .cfs-sw-stempel { display: none; } /* Erkenntnis-Karte („Belohnung") */ .cfs-sw-erkenntnis { flex-direction: column; justify-content: space-between; min-height: 420px; background: radial-gradient(circle at 30% 0%, rgba(127,184,87,.28), rgba(18,23,15,.95) 70%) !important; border-color: #7fb857 !important; } .cfs-sw-erk-innen { padding: 28px 12px 10px; text-align: center; } .cfs-sw-erk-kenn { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9ad072; } .cfs-sw-erk-titel { margin: 18px 0 12px; font-size: 28px; line-height: 1.2; font-weight: 800; color: rgba(255,255,255,.97); text-shadow: 0 0 18px rgba(154,208,114,.35); } .cfs-sw-erk-text { margin: 0; font-size: 15px; line-height: 1.5; color: #b9c7b4; } .cfs-sw-erkenntnis .cfs-sw-steuer-weiter { grid-template-columns: 1fr; } .cfs-sw-kurz { display: none; } .cfs-sw-steuer { min-width: 0; } .cfs-sw-steuer > * { min-width: 0; } @media (max-width: 767px) { .cfs-sw-feed .cfs-sw-lang { display: none; } .cfs-sw-feed .cfs-sw-kurz { display: inline; } .cfs-sw-feed .cfs-sw-daumen { gap: 6px; font-size: 11.5px; } } /* ==== 0.19.0 (07.10.2026) ==== */ /* Ausverkauft: überall dasselbe rote Schild wie auf den Karten — auch im Bild der Produktseite. Die rot-weiße Pille des Plugins „Sold Out Badge" (.wcsob_soldout) erscheint nirgends mehr. */ .wcsob_soldout { display: none !important; } .product-label > span.out-of-stock, .woocommerce .woocommerce-product-gallery .product-label > span.out-of-stock { min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; padding: 4px 8px !important; border-radius: 6px !important; background: #cf3a2a !important; color: rgba(255,255,255,.97) !important; font-size: 12px !important; line-height: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em; } .product-label > span.out-of-stock > span { font-size: inherit !important; line-height: inherit !important; padding: 0 !important; } /* Kunden kauften auch: das Theme blasst Bilder in jedem ausverkauften Hauptprodukt ab (opacity .5) — das traf auch alle lieferbaren Empfehlungen darunter. */ .woocommerce .product.outofstock .product:not(.outofstock) figure img { opacity: 1 !important; filter: none !important; } /* Versand-Kasten im Kopf: Die Box hängt 58 px tiefer — auf dem Weg dorthin ging der Hover verloren. Unsichtbare Brücke direkt unter dem Kasten + kurze Ausblend-Verzögerung, damit man die Box erreicht und anklicken kann. */ @media (min-width: 1025px) { header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__box[hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s ease .25s, visibility 0s linear .4s; } header.ts-header .header-middle .cf-versand-badge--kopfzeile:hover .cf-versand-badge__box[hidden], header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__box:not([hidden]) { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .12s ease 0s, visibility 0s linear 0s; } header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__box::after { content: ""; position: absolute; right: 0; bottom: 100%; width: 180px; height: 62px; } } /* Anmelde-Fenster (Gäste) im Kopf: eigener Innenrand, „Konto anlegen" sichtbar im Kasten, helle Schrift in den Feldern (auch beim Tippen und bei Google-Autofill), und das Fenster bleibt offen, solange ein Feld den Fokus hat — sonst schloss es sich, sobald die Autofill-Auswahl des Browsers aufging. */ .my-account-wrapper .account-dropdown-form #ts-login-form { margin: 0 !important; padding: 18px 20px 6px !important; } .my-account-wrapper .account-dropdown-form #ts-login-form p { margin: 0 0 12px !important; } .my-account-wrapper .account-dropdown-form #ts-login-form p.login-submit { margin: 4px 0 8px !important; } .my-account-wrapper .account-dropdown-form .create-account-wrapper { height: auto !important; min-height: 0 !important; line-height: 1.4 !important; display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 !important; padding: 12px 20px 16px !important; border-top: 1px solid rgba(127,184,87,.25); color: #b9c7b4; } .my-account-wrapper .account-dropdown-form .create-account-wrapper a { color: #9ad072 !important; font-weight: 700; } .my-account-wrapper #ts-login-form input.input, .my-account-wrapper #ts-login-form input.input:focus { background: #12170f !important; color: rgba(255,255,255,.97) !important; -webkit-text-fill-color: rgba(255,255,255,.97); caret-color: #9ad072; } .my-account-wrapper #ts-login-form input.input:focus { border-color: #7fb857 !important; outline: none; } .my-account-wrapper #ts-login-form input.input:-webkit-autofill, .my-account-wrapper #ts-login-form input.input:autofill { -webkit-text-fill-color: rgba(255,255,255,.97) !important; -webkit-box-shadow: 0 0 0 1000px #12170f inset !important; box-shadow: 0 0 0 1000px #12170f inset !important; transition: background-color 9999s 0s; } /* Runde 3, 2b (Felix 08.10.): „Anmelden“ saß 3,5 px zu tief — Theme-Polster 17 px passt nicht in die feste Knopfhöhe 46 px; Schrift über die Zeilenhöhe mittig, Nachlauf der Laufweite ausgeglichen */ .my-account-wrapper #ts-login-form #wp-submit { height: 46px !important; padding: 0 30px 0 30.8px !important; line-height: 44px !important; } .my-account-wrapper:focus-within { z-index: 996; } .my-account-wrapper:focus-within .ts-tiny-account-wrapper .dropdown-container { display: block; z-index: 5; } /* Konto-Aufklapp 0.19.0: Warenkorb-Symbol (Linien wie die übrigen) */ .my-account-wrapper .account-dropdown-form a.cfs-warenkorb-link { --cfs-dd-icon: url("data:image/svg+xml;utf8,"); } /* Kein schmaler Streifen ohne Verlauf mehr über dem Status-Kopf (ul hatte 6 px Innenrand oben) */ .my-account-wrapper .account-dropdown-form ul:has(> li.cfs-dd-kopf) { padding-top: 0 !important; } .my-account-wrapper .account-dropdown-form li.cfs-dd-kopf { margin-top: 0 !important; } /* Geschenk ausgesucht: Hinweis an der Stelle des Knopfs, Fortschritt darüber bleibt (Felix, 07.10.) */ .cfs-profil-geschenk-ausgesucht { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border: 1px solid rgba(127,184,87,.55); border-radius: 6px; background: rgba(127,184,87,.12); font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.97); } .cfs-profil-geschenk-ausgesucht::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: #9ad072; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .cfs-profil-geschenk-ausgesucht b { color: #9ad072; } /* Meine Daten: „Passwort ändern" (legend) war schwarz auf Grün — jetzt wie die übrigen Zwischenüberschriften */ .woocommerce-MyAccount-content fieldset legend { color: rgba(255,255,255,.97) !important; background: transparent !important; font-size: 16px !important; font-weight: 800 !important; padding: 0 6px !important; } /* Karten auf Konto-/Elementor-Seiten: Elementors Absatz-Automatik wickelt den Preis in ein

— Reihenfolge wie in der Kategorie halten */ .products .product .meta-wrapper > p:has(> .price) { order: 2; margin: 0 !important; } .products .product .product-wrapper .meta-wrapper > .cf-grundpreis { display: none !important; } /* wie in der Kategorie (Felix-Entscheidung: kein Grundpreis in Karten) */ .products .product .meta-wrapper > p:empty, .products .product .meta-wrapper > p:not(:has(*)):not([class]) { display: none !important; } /* Meine Produkte: Kopf mit Knopf rechts, Meldung darunter, Zwischenüberschrift „Passt gut dazu" */ .cfs-mp-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 16px; } .cfs-mp-kopf .cfs-konto-hinweis { margin: 0 !important; } .cfs-mp-kopf .cfs-alle-korb { flex: none; height: 42px; padding: 0 18px !important; } .cfs-alle-korb-meldung { display: none; margin: -4px 0 16px !important; padding: 8px 12px; border: 1px solid rgba(127,184,87,.55); border-radius: 6px; background: rgba(127,184,87,.12); color: rgba(255,255,255,.97); font-size: 14px; } .cfs-alle-korb-meldung.cfs-zeigen { display: block; } .cfs-alle-korb-meldung a { color: #9ad072 !important; font-weight: 700; } .cfs-konto-zwischen { margin: 34px 0 14px !important; font-size: 22px !important; font-weight: 800 !important; color: rgba(255,255,255,.97) !important; } /* Freunde-Karte breit (Konto/Stream) 0.19.0: Badge mittig, Schritte bündig und einzeilig (umbrechen nur als ganzer Kasten), breiter Knopf */ .cfs-fk-stream .cfs-fk-badge, .cfs-fk-konto .cfs-fk-badge { left: 50% !important; transform: translateX(-50%); } .cfs-fk-badge { align-items: center !important; text-align: center; } .cfs-fk-badge span { display: block; text-transform: uppercase; letter-spacing: .06em; line-height: 1 !important; } .cfs-fk-schritte { display: flex !important; flex-wrap: wrap; gap: 8px; } .cfs-fk-schritte li { flex: 1 1 auto; justify-content: flex-start; padding: 9px 12px 9px 38px !important; white-space: nowrap; } .cfs-fk-schritte li > br, .cfs-fk-schritte li > p:empty { display: none !important; } .cfs-fk-schritte li b { display: block; line-height: 20px; margin: 0 !important; } .cfs-fk-schritte li span { display: block; margin: 0 !important; } @media (max-width: 600px) { .cfs-fk-schritte li { white-space: normal; flex-basis: 100%; } } .button.cfs-knopf-breit { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 46px; margin: 14px 0 0 !important; box-sizing: border-box; } /* ===== 0.19.0 (07.10.2026): „Für dich" + CannaMatch ===== */ .cfs-fuer-dich-unter { max-width: none !important; } .cfs-sw { padding-bottom: 64px; } .cfs-sw-spiel .cfs-sw-mehr, .cfs-sw-spiel .cfs-sw-mehr .cfs-spinner, .cfs-sw-spiel .cfs-sw-fortschritt { display: none !important; } /* kein Ladekreisel, keine Leiste oben */ .cfs-sw-spiel section.cfs-sw-karte > .cfla-kasten { margin-top: 10px; } /* Für-dich-Sternchen in Amber (Felix, 07.10.) */ .cfs-sw-spiel-ic { background: #f3be4a !important; } /* CannaMatch = Amber */ .woocommerce-MyAccount-navigation-link--fuer-dich a::before, .my-account-wrapper .account-dropdown-form a.cfs-fuer-dich-link::before { background: #c8f59d !important; filter: drop-shadow(0 0 4px rgba(154,208,114,.6)); } /* Für dich = hellgrün (08.10.) */ /* Lernbalken unten — klebt, schmal, nimmt keine Klicks weg außer sich selbst */ .cfs-lern { position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; background: rgba(13,17,8,.94); border-top: 1px solid rgba(127,184,87,.45); color: rgba(255,255,255,.97); font-size: 13px; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .cfs-lern-fuell { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: linear-gradient(90deg, #7fb857, #c8f59d); box-shadow: 0 0 8px rgba(154,208,114,.6); transition: width .5s ease-out; } .cfs-lern-kopf { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9ad072; } .cfs-lern-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d6e8c4; } .cfs-lern-zahl { flex: none; font-weight: 800; color: #c8f59d; font-variant-numeric: tabular-nums; } @media (max-width: 600px) { .cfs-lern-kopf { display: none; } .cfs-lern { font-size: 12px; } } /* Fliegende Rückmeldung: Symbol bei jedem Klick, ab und zu ein kurzer Spruch; verschwindet von selbst */ .cfs-flug { position: fixed; z-index: 991; pointer-events: none; will-change: transform, opacity; } .cfs-flug-ic { display: block; width: 30px; height: 30px; background: #9ad072; filter: drop-shadow(0 0 8px rgba(154,208,114,.7)); -webkit-mask: var(--cfs-flug-m) center / contain no-repeat; mask: var(--cfs-flug-m) center / contain no-repeat; } .cfs-flug-hoch { --cfs-flug-m: url("data:image/svg+xml;utf8,"); } .cfs-flug-weg { background: #f3be4a; filter: drop-shadow(0 0 8px rgba(243,190,74,.6)); --cfs-flug-m: url("data:image/svg+xml;utf8,"); } .cfs-flug-text { padding: 7px 14px; border: 1px solid rgba(154,208,114,.7); border-radius: 6px; background: rgba(13,17,8,.92); color: #c8f59d; font-size: 15px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 18px rgba(154,208,114,.35); } .cfs-flug-gross { font-size: 17px; color: rgba(255,255,255,.97); border-color: #c8f59d; } @media (max-width: 600px) { .cfs-flug-text { font-size: 13px; white-space: normal; max-width: 80vw; text-align: center; } } /* Rand leuchtet einmal nach innen (nur an Schwellen) */ .cfs-rand-glow { position: fixed; inset: 0; z-index: 989; pointer-events: none; box-shadow: inset 0 0 70px 6px rgba(154,208,114,.55), inset 0 0 0 2px rgba(200,245,157,.6); } /* Info-Karte „So lernt Für dich": gleiche Größe wie eine Produktkarte, hebt sich mit leichtem Schein ab */ .cfs-sw section.cfs-sw-info { display: flex; border: 1px solid rgba(154,208,114,.75) !important; border-radius: 10px; background: radial-gradient(circle at 50% 18%, rgba(154,208,114,.28), rgba(18,23,15,.92) 70%) !important; box-shadow: 0 0 22px rgba(154,208,114,.35), inset 0 0 18px rgba(154,208,114,.12); } .cfs-sw-info-innen { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 20px; text-align: center; width: 100%; } .cfs-sw-info-ic { align-self: center; width: 46px; height: 46px; background: #f3be4a; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .cfs-sw-info-kenn { margin: 0 !important; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9ad072; } .cfs-sw-info-titel { margin: 0 !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.2 !important; color: rgba(255,255,255,.97) !important; } .cfs-sw-info-text { margin: 0 !important; font-size: 14px; line-height: 1.45; color: #d6e8c4; } .cfs-sw-info-zu { align-self: center; margin-top: 4px; height: 38px; padding: 0 18px; background: #12170f; border: 1px solid #7fb857; border-radius: 6px; color: #9ad072; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; } .cfs-sw-info-zu:hover { background: #7fb857; color: #12170f; } /* Freunde-Karte im Raster: Text, der Lust macht; Knopf mit Innenrand */ .cfs-fk-raster .cfs-fk-motiv { margin: 4px 0 10px !important; font-size: 13px; line-height: 1.4; color: #d6e8c4; } .cfs-fk-raster .cfla-knopf.cfs-fk-knopf { padding: 9px 14px 10px !important; margin-top: auto; } .cfs-fk-raster .cfs-fk-badge { left: 50% !important; transform: translateX(-50%); bottom: 12px; } /* Freunde- und Info-Karte im Raster genau so hoch wie die Produktkarten der Reihe: eigene Höhe zählt nicht (contain: size), die Karte füllt die Reihe, das Bild gibt nach (Felix, 07.10.: „Gutscheinbox größer als die Produktbox") */ .cfs-sw .products > section.cfs-freunde-karte, .cfs-sw .products > section.cfs-sw-info { contain: size; align-self: stretch; display: flex !important; flex-direction: column; min-height: 0; } .cfs-sw .products > section.cfs-freunde-karte > .product-wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .cfs-sw .products > section.cfs-freunde-karte .thumbnail-wrapper { flex: 1 1 0; min-height: 70px; aspect-ratio: auto !important; } .cfs-sw .products > section.cfs-freunde-karte .cfs-fk-bild { height: 100%; aspect-ratio: auto !important; } .cfs-sw .products > section.cfs-freunde-karte .meta-wrapper { flex: none; } @media (max-width: 600px) { .cfs-sw .products > section.cfs-freunde-karte .cfs-fk-motiv { display: none; } } /* CannaMatch-Block auf der Startseite (testweise, 07.10.) */ .cfs-cm-teaser { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 24px; max-width: 1290px; margin: 26px auto 10px; padding: 26px 30px; border: 1px solid rgba(127,184,87,.55); border-radius: 12px; background: radial-gradient(circle at 85% 50%, rgba(154,208,114,.22), rgba(18,23,15,.88) 62%); box-shadow: 0 0 24px rgba(154,208,114,.18); box-sizing: border-box; } .cfs-cm-kenn { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #f3be4a; } .cfs-cm-kenn .cfs-sw-spiel-ic { width: 18px; height: 18px; } .cfs-cm-titel { margin: 8px 0 8px !important; font-size: 28px !important; line-height: 1.2 !important; font-weight: 800 !important; color: rgba(255,255,255,.97) !important; } .cfs-cm-unter { margin: 0 0 16px !important; font-size: 16px; line-height: 1.5; color: #d6e8c4; } .button.cfs-cm-knopf { display: inline-flex !important; align-items: center; height: 44px; padding: 0 22px !important; } .cfs-cm-stapel { position: relative; height: 190px; } .cfs-cm-bild { position: absolute; top: 10px; width: 150px; height: 170px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(127,184,87,.5); background: #12170f; box-shadow: 0 10px 24px rgba(0,0,0,.45); } .cfs-cm-bild img { width: 100%; height: 100%; object-fit: contain; display: block; } .cfs-cm-bild-1 { left: 0; transform: rotate(-9deg); } .cfs-cm-bild-2 { left: 75px; transform: rotate(0deg); z-index: 2; } .cfs-cm-bild-3 { left: 150px; transform: rotate(9deg); } @media (max-width: 991px) { .cfs-cm-teaser { grid-template-columns: 1fr; margin: 18px 16px 6px; padding: 20px; } .cfs-cm-stapel { display: none; } .cfs-cm-titel { font-size: 22px !important; } } /* ===================================================================== 0.20.0 (08.10.2026, Felix' Sichtprüfung zu 0.19.0) — Kopfzeile ===================================================================== */ /* 6a. Versand-Kasten im Kopf: klappt direkt unter dem Badge auf (vorher 58 px tiefer, auf Höhe der Kopfleiste); Brücke nur noch 10 px */ @media (min-width: 1025px) { header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__box { top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; } header.ts-header .header-middle .cf-versand-badge--kopfzeile .cf-versand-badge__box::after { width: 100% !important; height: 10px !important; } } /* 6b. Leuchtende Spitze der Kopfleiste: liegt immer im Rahmen — bei 0 € am inneren linken Rand, etwas kleiner als die Leiste */ .cfs-kopfleiste .cfs-ernte-fuell { min-width: 28px; } .cfs-kopfleiste .cfs-ernte-fuell::after { width: 24px !important; height: 24px !important; top: 2px !important; right: 2px !important; } @media (max-width: 767px) { .cfs-kopfleiste .cfs-ernte-fuell { min-width: 24px; } .cfs-kopfleiste .cfs-ernte-fuell::after { width: 20px !important; height: 20px !important; } } /* 6c + 7a. Kopf-Fenster (Konto, Warenkorb): eine deckende Fläche im CI mit grünem Rahmen; der Rahmen sitzt an der Fläche, nicht am Behälter — so bleibt oben kein grüner Strich über einer Lücke (die 15 px darüber sind die unsichtbare Hover-Brücke) */ body header.ts-header .my-account-wrapper .dropdown-container, body header.ts-header .shopping-cart-wrapper .dropdown-container { border: 0 !important; background: transparent !important; } body header.ts-header .my-account-wrapper .dropdown-container::before, body header.ts-header .shopping-cart-wrapper .dropdown-container::before { top: 15px !important; background: #12170f !important; border: 1px solid rgba(127,184,87,.55) !important; border-radius: 12px !important; box-shadow: 0 18px 34px -10px rgba(0,0,0,.75) !important; } body header.ts-header .ts-tiny-cart-wrapper .form-content > label span { color: rgba(255,255,255,.97); } .cfs-leerkorb-fuss { margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; } .cfs-leerkorb-fuss .button.view-cart { width: 100%; margin: 0 !important; } .cfs-leerkorb { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(127,184,87,.25); text-align: center; } .cfs-leerkorb-titel { margin: 0 0 16px !important; color: #b9c7b4; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .cfs-leerkorb-knoepfe { display: flex; flex-direction: column; gap: 8px; } .cfs-leerkorb-knopf { width: 100%; padding: 8px 14px 9px !important; text-decoration: none !important; } /* 6f. Für dich und CannaMatch im Hauptmenü in Amber */ /* 18 (Felix, 08.10.): Amber ist die Farbe von CannaMatch; „Für dich" leuchtet hellgrün mit leichtem Schein */ header.ts-header .menu > li.cfs-menue-cannamatch > a, header.ts-header .menu > li.cfs-menue-cannamatch > a .menu-label { color: #f3be4a !important; } header.ts-header .menu > li.cfs-menue-cannamatch > a:hover .menu-label, header.ts-header .menu > li.cfs-menue-cannamatch.current-menu-item > a .menu-label { color: #ffd77a !important; } header.ts-header .menu > li.cfs-menue-fuerdich > a, header.ts-header .menu > li.cfs-menue-fuerdich > a .menu-label { color: #c8f59d !important; text-shadow: 0 0 8px rgba(154,208,114,.55), 0 0 16px rgba(154,208,114,.25); } header.ts-header .menu > li.cfs-menue-fuerdich > a:hover .menu-label, header.ts-header .menu > li.cfs-menue-fuerdich.current-menu-item > a .menu-label { color: #e2ffc9 !important; } /* 7b. Anmelde-Fenster bleibt offen, solange darin gearbeitet wird (Klasse setzt seller.js; schließt erst bei Klick daneben oder Esc) */ .my-account-wrapper.cfs-anmelde-offen { z-index: 996; } .my-account-wrapper.cfs-anmelde-offen .ts-tiny-account-wrapper .dropdown-container { display: block !important; z-index: 5; } /* 7c. Hakenkästchen überall im CI — auch im Anmelde-Fenster des Kopfs (vorher Browser-Blau); Schalter und Chips haben eigene Optik */ body:not(.woocommerce-checkout) input[type="checkbox"]:not(.cfs-schalter > input):not(.cfs-chip > input):not(.cfa-schalter > input) { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex: none; margin: 0 8px 0 0 !important; vertical-align: -5px; cursor: pointer; position: relative; border: 1.5px solid #7fb857 !important; border-radius: 5px !important; background: #1b1f1d !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); accent-color: #7fb857; } body:not(.woocommerce-checkout) input[type="checkbox"]:not(.cfs-schalter > input):not(.cfs-chip > input):not(.cfa-schalter > input):checked { background: linear-gradient(180deg, #8fca63, #5e9a3a) !important; border-color: #8fca63 !important; } body:not(.woocommerce-checkout) input[type="checkbox"]:not(.cfs-schalter > input):not(.cfs-chip > input):not(.cfa-schalter > input):checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #0d1108; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } body:not(.woocommerce-checkout) input[type="checkbox"]:focus-visible { outline: 2px solid #b9ea8f; outline-offset: 2px; } .my-account-wrapper .login-remember label { display: inline-flex !important; align-items: center; } /* Menüzeile: zwischen 1280 und 1699 px rutschte das Herz in eine zweite Zeile (Menü 1270 px + Herz > Platz) → engere Abstände, keine zweite Zeile */ @media (min-width: 1200px) and (max-width: 1699px) { body header.ts-header .header-bottom > .container { flex-wrap: nowrap !important; column-gap: 24px !important; } body header.ts-header .header-bottom nav.main-menu > ul { column-gap: clamp(18px, calc(18px + (100vw - 1200px) * .044), 40px) !important; } } /* 34a. Wunschliste-Herz: leichter Schein in der Farbe des Dampfs dahinter (gemessen: Grün-Gelb, Farbton 77°) */ header.ts-header .my-wishlist-wrapper .tini-wishlist::before { filter: drop-shadow(0 0 5px rgba(180,214,92,1)) drop-shadow(0 0 12px rgba(180,214,92,.85)) drop-shadow(0 0 22px rgba(180,214,92,.5)); } /* 08.10.: doppelt so stark */ /* 35. Herz unter der Glocke: Versatz setzt seller.js (gleiche Mittelachse, gemessen per Pixel) */ header.ts-header .my-wishlist-wrapper { transform: translateX(var(--cfs-herz-x, 0px)); } @media (min-width: 1200px) and (max-width: 1359px) { body header.ts-header .header-bottom nav.main-menu > ul { column-gap: 16px !important; } body header.ts-header .header-bottom nav.main-menu > ul > li > a { font-size: 15px !important; } } /* 7a. Die Fläche beginnt 15 px unter der Behälterkante (Hover-Brücke) → Innenrand oben entsprechend größer, gleich wie seitlich */ .my-account-wrapper .account-dropdown-form #ts-login-form { padding-top: 33px !important; } /* ===================================================================== 0.20.0 — Konto ===================================================================== */ /* 14. Gutschein einlösen: Feld wie der Suchschlitz, Knopf wie „Gutschein anwenden" daneben */ .cfs-einloesen { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 0 0 8px; } .cfs-einloesen .cfs-einloesen-feld { flex: 1 1 260px; min-width: 0; height: 46px; padding: 0 14px !important; background: #12170f !important; border: 1px solid rgba(127,184,87,.45) !important; border-radius: 6px !important; color: rgba(255,255,255,.97) !important; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; } .cfs-einloesen .cfs-einloesen-feld::placeholder { text-transform: none; letter-spacing: 0; color: #b9c7b4; opacity: .8; } .cfs-einloesen .cfs-einloesen-feld:focus { border-color: #7fb857 !important; outline: none; box-shadow: 0 0 0 3px rgba(127,184,87,.18); } .cfs-einloesen .cfs-einloesen-knopf { flex: none; height: 46px; padding: 0 26px !important; background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .cfs-einloesen .cfs-einloesen-knopf:hover, .cfs-einloesen .cfs-einloesen-knopf:focus-visible { background: #7fb857 !important; color: #12170f !important; } .cfs-einloesen .cfs-einloesen-knopf[disabled] { opacity: .6; } .cfs-einloesen-antwort { flex: 1 0 100%; margin: 0 !important; min-height: 0; font-size: 14px; color: #b9c7b4; } .cfs-einloesen-antwort:empty { display: none; } .cfs-einloesen-antwort.cfs-gut { color: #9ad072; } .cfs-einloesen-antwort.cfs-schlecht { color: #f3be4a; } .cfs-einloesen-info { margin: 0 0 6px !important; color: #b9c7b4; font-size: 13.5px; } /* 36b. Breite Freunde-Karte: Geschenk-Symbol höher, damit „10 € + 12,50 € geschenkt" Luft hat */ .cfs-fk-stream .cfs-fk-bild, .cfs-fk-konto .cfs-fk-bild { align-items: flex-start !important; padding-top: 16px; } .cfs-fk-stream .cfs-fk-bild .cfs-fk-symbol, .cfs-fk-konto .cfs-fk-bild .cfs-fk-symbol { width: 40%; height: auto; aspect-ratio: 1 / 1; } /* 36d. Hauptzeile groß, Zusatz klein — hebt sich ab */ .cfs-fk-stream .cfla-knopf.cfs-fk-knopf .cfla-knopf-gross, .cfs-fk-konto .cfla-knopf.cfs-fk-knopf .cfla-knopf-gross { font-size: 15.5px; letter-spacing: .05em; } .cfs-fk-stream .cfla-knopf.cfs-fk-knopf .cfla-knopf-klein, .cfs-fk-konto .cfla-knopf.cfs-fk-knopf .cfla-knopf-klein { font-size: 11px; text-transform: none; letter-spacing: .02em; opacity: .8; } /* Einlösen-Knopf neben dem Feld: Theme setzte oben einen Abstand */ .cfs-einloesen .cfs-einloesen-knopf { margin: 0 !important; } /* 12a. Konto so breit wie die Kategorieseiten (Elementor-Seite „Mein Konto" war auf 1140 px begrenzt) → gleiche Produktkarten */ body.woocommerce-account .elementor-section.elementor-top-section > .elementor-container { max-width: none !important; } body.woocommerce-account .elementor-section.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; } /* 12c. Abmelden als letzter Reiter, ganz rechts, etwas zurückgenommen */ .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-left: auto !important; } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #b9c7b4 !important; } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: #9ad072 !important; } .cfs-abmelden-zeile { display: none !important; } /* 9. Konto-Aufklapp: über „Abmelden" EIN dickerer Strich statt zwei dünner (Linie der Zeile + Linie am Link) */ .my-account-wrapper .account-dropdown-form li a.log-out { border-top: 0 !important; margin-top: 0 !important; } .my-account-wrapper .account-dropdown-form li:has(> a.log-out) { border-top: 2px solid rgba(127,184,87,.55) !important; margin-top: 4px; } /* 36c. Knopf als vierter Kasten in der Schritt-Reihe: alle vier gleich breit und gleich hoch (ohne Skript) */ .cfs-fk-mit-reihe.cfs-fk-stream, .cfs-fk-mit-reihe.cfs-fk-konto { grid-template-columns: 150px minmax(0,1fr) !important; } .cfs-fk-mit-reihe .cfs-fk-mitte { padding-right: 18px; } .cfs-fk-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; } .cfs-fk-reihe > .cfs-fk-schritte { display: contents !important; } .cfs-fk-reihe > .cfs-fk-schritte > li, .cfs-fk-reihe > .cfs-fk-inhalt { flex: 1 1 0 !important; min-width: 0; box-sizing: border-box !important; } .cfs-fk-reihe > .cfs-fk-inhalt { padding: 0 !important; display: flex !important; } .cfs-fk-reihe > .cfs-fk-inhalt > .cfla-knopf.cfs-fk-knopf { width: 100% !important; height: auto !important; margin: 0 !important; padding: 4px 10px !important; flex: 1 1 auto; } @media (max-width: 1199px) { .cfs-fk-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cfs-fk-reihe > .cfs-fk-inhalt { grid-column: 1 / -1; } .cfs-fk-reihe > .cfs-fk-inhalt > .cfla-knopf.cfs-fk-knopf { padding: 9px 10px !important; } } @media (max-width: 600px) { .cfs-fk-reihe { grid-template-columns: 1fr; } } @media (max-width: 1023px) { .cfs-fk-mit-reihe.cfs-fk-stream, .cfs-fk-mit-reihe.cfs-fk-konto { grid-template-columns: 120px minmax(0,1fr) !important; } } @media (max-width: 600px) { .cfs-fk-mit-reihe.cfs-fk-stream, .cfs-fk-mit-reihe.cfs-fk-konto { grid-template-columns: 1fr !important; } .cfs-fk-mit-reihe .cfs-fk-mitte { padding: 14px 16px 16px !important; } } @media (max-width: 600px) { .cfs-fk-stream .cfs-fk-bild .cfs-fk-symbol, .cfs-fk-konto .cfs-fk-bild .cfs-fk-symbol { width: 64px; } .cfs-fk-stream .cfs-fk-bild, .cfs-fk-konto .cfs-fk-bild { min-height: 140px !important; } } /* 38. Meine Daten → Adressen: Rechnungs- und Lieferadresse zusammen in einem Kasten im CI, „bearbeiten" als erkennbarer Knopf, Stift mit Abstand zum Wort; Adresse normal lesbar statt kursiv-grau mit großen Lücken */ .cfs-adressen .woocommerce-Addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 6px 0 0 !important; border: 1px solid rgba(127,184,87,.45); border-radius: 12px; background: rgba(13,17,8,.62); overflow: hidden; } .cfs-adressen .woocommerce-Addresses::before, .cfs-adressen .woocommerce-Addresses::after { display: none !important; } .cfs-adressen .woocommerce-Addresses .woocommerce-Address { width: auto !important; float: none !important; max-width: none !important; margin: 0 !important; padding: 18px 22px 20px !important; } .cfs-adressen .woocommerce-Addresses .woocommerce-Address + .woocommerce-Address { border-left: 1px solid rgba(127,184,87,.25); } .cfs-adressen .woocommerce-Address-title { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 12px !important; } .cfs-adressen .woocommerce-Address-title::before, .cfs-adressen .woocommerce-Address-title::after { display: none !important; } .cfs-adressen .woocommerce-Address-title h2 { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: rgba(255,255,255,.97) !important; } .cfs-adressen .woocommerce-Address-title p { margin: 0 !important; } .woocommerce-account .cfs-adressen .addresses .title .edit, .cfs-adressen .woocommerce-Address-title a.edit { display: inline-flex !important; align-items: center; gap: 8px; float: none !important; position: static !important; margin: 0 !important; padding: 6px 12px !important; background: #12170f !important; border: 1px solid #7fb857 !important; border-radius: 6px !important; color: #9ad072 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; line-height: 1.2 !important; white-space: nowrap; } .woocommerce-account .cfs-adressen .addresses .title .edit::before { margin: 0 !important; font-size: 11px; position: static !important; } .woocommerce-account .cfs-adressen .addresses .title .edit:hover { background: #7fb857 !important; color: #12170f !important; } .cfs-adressen .woocommerce-Address address { margin: 0 !important; font-style: normal !important; color: rgba(255,255,255,.9) !important; line-height: 1.65 !important; font-size: 15px; } @media (max-width: 767px) { .cfs-adressen .woocommerce-Addresses { grid-template-columns: 1fr; } .cfs-adressen .woocommerce-Addresses .woocommerce-Address + .woocommerce-Address { border-left: 0; border-top: 1px solid rgba(127,184,87,.25); } } /* 26b. Datenauskunft per E-Mail */ .cfs-auskunft { padding: 18px 22px; border: 1px solid rgba(127,184,87,.45); border-radius: 12px; background: rgba(13,17,8,.62); } .cfs-auskunft .cfs-konto-hinweis { margin: 0 0 12px !important; } .cfs-auskunft .cfs-auskunft-knopf { margin: 0 !important; background: #12170f !important; border: 1px solid #7fb857 !important; color: #9ad072 !important; border-radius: 6px !important; padding: 10px 18px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .cfs-auskunft .cfs-auskunft-knopf:hover { background: #7fb857 !important; color: #12170f !important; } .cfs-auskunft-antwort { margin: 10px 0 0 !important; font-size: 14px; } .cfs-auskunft-antwort:empty { display: none; } .cfs-auskunft-antwort.cfs-gut { color: #9ad072; } .cfs-auskunft-antwort.cfs-schlecht { color: #f3be4a; } /* 12b. „Alle in den Warenkorb legen": leicht pulsierender Schein (Felix, 08.10.) — nur die Deckkraft einer Schein-Ebene ändert sich (günstig für die Grafik) */ .cfs-alle-korb { position: relative; isolation: isolate; } .cfs-alle-korb::after { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; box-shadow: 0 0 14px 3px rgba(154,208,114,.55); opacity: .25; animation: cfs-puls-schein 2.6s ease-in-out infinite; pointer-events: none; } @keyframes cfs-puls-schein { 0%, 100% { opacity: .2; } 50% { opacity: .85; } } @media (prefers-reduced-motion: reduce) { .cfs-alle-korb::after { animation: none; opacity: .5; } } /* ===================================================================== 0.20.0 — Für dich ===================================================================== */ /* 18a. Nachladen: Ladekreis + kurzer Tipp, warum Mehr/Weniger hilft; 27. Schranke nach zwei Reihen ohne Tipp */ .cfs-sw-feed .cfs-sw-mehr { flex-direction: column; align-items: center; gap: 10px; text-align: center; } .cfs-sw-lade-tipp { display: none; margin: 0 !important; color: #b9c7b4; font-size: 14px; } .cfs-sw-laedt .cfs-sw-lade-tipp { display: block; animation: cfs-tipp-ein .35s ease-out 1; } @keyframes cfs-tipp-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .cfs-sw-schranke { max-width: 560px; margin: 0 auto !important; padding: 14px 18px; border: 1px solid rgba(243,190,74,.6); border-radius: 10px; background: rgba(18,23,15,.85); color: rgba(255,255,255,.97); font-size: 14px; line-height: 1.45; } .cfs-sw-schranke b { display: block; margin-bottom: 4px; color: #f3be4a; font-size: 15px; } .cfs-sw-spiel .cfs-sw-lade-tipp, .cfs-sw-spiel .cfs-sw-schranke { display: none !important; } /* ===================================================================== 0.20.0 — CannaMatch ===================================================================== */ /* 39a/39b. Geschenkkarte im Spiel: nur sichtbar, wenn sie dran ist (eine !important-Regel hielt sie dauerhaft unter den anderen Karten), und sie wächst mit ihrem Inhalt statt ihn abzuschneiden */ .cfs-sw-spiel .products > section.cfs-freunde-karte:not(.cfs-sw-oben) { display: none !important; } .cfs-sw-spiel .products > section.cfs-freunde-karte.cfs-sw-oben { contain: none !important; height: auto !important; overflow: visible; } .cfs-sw-spiel .products > section.cfs-freunde-karte .cfs-fk-titel { white-space: normal !important; overflow: visible !important; } /* 19a. Karte passt in den Bildschirm: Bild schrumpft auf den freien Platz (Wert rechnet swipe.js) */ .cfs-sw-spiel section.cfs-sw-oben .thumbnail-wrapper { max-height: var(--cfs-cm-bild, none); } .cfs-sw-spiel section.cfs-sw-oben .thumbnail-wrapper img { max-height: var(--cfs-cm-bild, none); width: auto !important; margin: 0 auto; object-fit: contain; } /* 39f. Zu schnell getippt: Karte wackelt kurz */ .cfs-sw-spiel section.cfs-sw-warte { animation: cfs-wackeln .32s ease-in-out 1; } @keyframes cfs-wackeln { 0%, 100% { translate: 0; } 25% { translate: -6px; } 75% { translate: 6px; } } .cfs-flug-leise { color: #f3be4a; border-color: rgba(243,190,74,.7); box-shadow: 0 0 14px rgba(243,190,74,.3); font-size: 14px; } .cfs-flug-hinweis { color: rgba(255,255,255,.97); border-color: #f3be4a; font-size: 15px; white-space: normal; max-width: min(560px, 86vw); text-align: center; line-height: 1.35; } .cfs-flug-beweis { color: rgba(255,255,255,.97); border-color: #f3be4a; box-shadow: 0 0 20px rgba(243,190,74,.35); } /* 39c/39e. Balken wächst bei jedem Tipp gleichmäßig und leuchtet stärker, je voller er wird (--voll 0…1) */ .cfs-sw-spiel .cfs-lern-fuell { height: 4px !important; top: -2px !important; transition: width .35s ease-out !important; box-shadow: 0 0 calc(6px + 18px * var(--voll, 0)) calc(1px * var(--voll, 0) * 4) rgba(200,245,157, calc(.35 + .6 * var(--voll, 0))) !important; } .cfs-sw-spiel .cfs-lern { border-top-color: rgba(154,208,114, calc(.35 + .5 * var(--voll, 0))); } /* 40e. Effekte: Rand nur seitlich / oben+unten / rundum (Stärke --st), Leuchten hinter der Karte, Symbol fliegt auf den Betrachter zu */ .cfs-rand-glow.cfs-rg-seiten { box-shadow: inset calc(70px * var(--st, 1)) 0 70px -40px rgba(154,208,114,.6), inset calc(-70px * var(--st, 1)) 0 70px -40px rgba(154,208,114,.6); } .cfs-rand-glow.cfs-rg-obenunten { box-shadow: inset 0 calc(70px * var(--st, 1)) 70px -40px rgba(154,208,114,.6), inset 0 calc(-70px * var(--st, 1)) 70px -40px rgba(154,208,114,.6); } .cfs-rand-glow.cfs-rg-ganz { box-shadow: inset 0 0 calc(70px * var(--st, 1)) calc(6px * var(--st, 1)) rgba(154,208,114,.6), inset 0 0 0 2px rgba(200,245,157,.65); } .cfs-sw-spiel section.cfs-karte-strahlt { animation: cfs-strahlen 1.4s ease-out 1; } @keyframes cfs-strahlen { 0% { box-shadow: 0 0 0 0 rgba(200,245,157,0); } 30% { box-shadow: 0 0 calc(40px * var(--st, 1)) calc(14px * var(--st, 1)) rgba(200,245,157,.55); } 100% { box-shadow: 0 0 0 0 rgba(200,245,157,0); } } .cfs-zu-betrachter { position: fixed; left: 50%; top: 46%; z-index: 992; width: 140px; height: 140px; color: #c8f59d; pointer-events: none; filter: drop-shadow(0 0 16px rgba(154,208,114,.8)); } .cfs-zu-betrachter svg { width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .cfs-sw-spiel section.cfs-sw-warte, .cfs-sw-spiel section.cfs-karte-strahlt { animation: none; } } /* 39d. Nach-oben-Knopf und Trusted-Shops-Siegel über den Balken unten heben, wenn er da ist */ body:has(.cfs-lern) #to-top { bottom: 46px !important; } body:has(.cfs-lern) div[id^="trustbadge-container"] > div, body:has(.cfs-lern) div[id^="minimized-trustbadge"] { bottom: 46px !important; } /* ===================================================================== 0.20.0 — Startseite: Mini-CannaMatch oben, Entwurf der automatischen Startseite ===================================================================== */ .cfs-cm-mini { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 28px; align-items: center; margin: 0 0 36px; padding: 24px 28px; border: 1px solid rgba(127,184,87,.45); border-radius: 14px; background: linear-gradient(135deg, rgba(18,23,15,.94), rgba(18,23,15,.78)); } .cfs-cm-mini .cfs-cm-titel { margin: 8px 0 10px !important; font-size: clamp(22px, 2.2vw, 30px) !important; line-height: 1.2 !important; color: rgba(255,255,255,.97) !important; } .cfs-cm-mini .cfs-cm-unter { margin: 0 0 16px !important; color: #b9c7b4; font-size: 15px; } .cfs-cm-mini-punkte { display: flex; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; } .cfs-cm-mini-punkte li { width: 34px; height: 8px; border-radius: 4px; background: rgba(127,184,87,.22); transition: background .25s, box-shadow .25s; } .cfs-cm-mini-punkte li.an { background: #9ad072; box-shadow: 0 0 10px rgba(154,208,114,.7); } .cfs-sw-mini { margin: 0 !important; } .cfs-sw-mini .cfs-sw-stapel { max-width: 340px; margin: 0 auto; } .cfs-sw-mini .products > section.product { width: 100% !important; max-width: 340px; } .cfs-sw-mini .thumbnail-wrapper, .cfs-sw-mini .thumbnail-wrapper img { max-height: 230px; width: auto !important; margin: 0 auto; object-fit: contain; } .cfs-sw-mini .cfs-sw-mehr, .cfs-sw-mini .cfs-sw-ende { display: none !important; } @media (max-width: 767px) { .cfs-cm-mini { grid-template-columns: 1fr; padding: 18px 16px; gap: 16px; } } /* Entwurf: Reihen mit Kopf, Steckbrief, gleiche Karten wie die Kategorie */ .cfs-startseite { display: flex; flex-direction: column; gap: 40px; } .cfs-startseite > .cfs-cm-mini, .cfs-startseite > .cfs-cm-teaser { margin: 0 !important; } .cfs-start-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; } .cfs-start-kenn { display: block; flex: 1 0 100%; color: #f3be4a; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .cfs-start-titel { margin: 0 !important; font-size: clamp(20px, 1.8vw, 26px) !important; color: rgba(255,255,255,.97) !important; } .cfs-start-alle { margin-left: auto; color: #9ad072 !important; font-weight: 700; font-size: 14px; text-decoration: none !important; } .cfs-start-steckbrief { display: grid; grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 32px; align-items: center; padding: 26px; border: 1px solid rgba(243,190,74,.55); border-radius: 14px; background: radial-gradient(circle at 20% 30%, rgba(243,190,74,.12), rgba(18,23,15,.9) 60%); } .cfs-sb-bild img { width: 100%; height: auto; border-radius: 10px; display: block; } .cfs-sb-name { margin: 6px 0 10px !important; font-size: clamp(22px, 2.2vw, 32px) !important; } .cfs-sb-name a { color: rgba(255,255,255,.97) !important; text-decoration: none !important; } .cfs-sb-kurz { color: #b9c7b4; margin: 0 0 12px !important; } .cfs-sb-fakten { margin: 0 0 14px !important; padding: 0 !important; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .cfs-sb-fakten li { padding: 5px 10px; border: 1px solid rgba(127,184,87,.45); border-radius: 6px; color: #c8f59d; font-size: 13px; font-weight: 700; } .cfs-sb-preis { font-size: 26px; font-weight: 800; color: #9ad072; margin: 0 0 14px !important; } @media (max-width: 767px) { .cfs-start-steckbrief { grid-template-columns: 1fr; padding: 16px; gap: 16px; } } .cfs-sw.cfs-sw-mini { min-height: 0 !important; padding: 0 !important; } .cfs-cm-mini-punkte, .cfs-cm-mini-punkte li { list-style: none !important; } .cfs-cm-mini-punkte li::marker, .cfs-cm-mini-punkte li::before { content: none !important; display: none !important; } .cfs-cm-mini-punkte li { margin: 0 !important; padding: 0 !important; } /* Echte Startseite (Elementor, volle Breite): Mini-Spiel und Banner auf Inhaltsbreite wie die übrigen Bereiche */ body.home .cfs-cm-mini, body.home > * .cfs-cm-teaser:last-child { width: calc(100% - 100px); max-width: 1328px; margin: 24px auto 36px !important; box-sizing: border-box; } @media (max-width: 767px) { body.home .cfs-cm-mini, body.home > * .cfs-cm-teaser:last-child { width: calc(100% - 32px); } } /* ===================================================================== 0.20.0 — Ersatz-Reihe zwischen Bild-Kaufen-Box und Produkttext ===================================================================== */ .cfs-ersatz { flex: 1 0 100%; width: 100%; margin: 28px 0 32px; padding: 20px 22px 6px; border: 1px solid rgba(127,184,87,.45); border-radius: 14px; background: rgba(13,17,8,.62); clear: both; } .cfs-ersatz-nie { border-color: rgba(243,190,74,.6); } .cfs-ersatz-kopf { margin: 0 0 14px; } .cfs-ersatz-titel { margin: 0 0 4px !important; font-size: clamp(20px, 1.8vw, 26px) !important; color: rgba(255,255,255,.97) !important; } .cfs-ersatz-nie .cfs-ersatz-titel { color: #f3be4a !important; } .cfs-ersatz-unter { margin: 0 !important; color: #b9c7b4; font-size: 14.5px; } @media (min-width: 768px) { .cfs-ersatz .products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* Handy: wischbar statt untereinander */ @media (max-width: 767px) { .cfs-ersatz { padding: 16px 0 4px 16px; } .cfs-ersatz-kopf { padding-right: 16px; } .cfs-ersatz .products { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 10px 0 !important; -webkit-overflow-scrolling: touch; } .cfs-ersatz .products > section.product { flex: 0 0 62%; scroll-snap-align: start; margin: 0 !important; } } /* ===================================================================== 0.20.1 (08.10.2026, zweite Sichtprüfung) ===================================================================== */ /* 2. Anmelde-Fenster offen: keine Ein-/Ausblend-Animation des Themes, sonst flackert es beim Zurückkommen aus der Google-Kontoauswahl */ .my-account-wrapper.cfs-anmelde-offen .dropdown-container, .my-account-wrapper.cfs-anmelde-offen .dropdown-container * { animation: none !important; transition: none !important; } .my-account-wrapper.cfs-anmelde-offen .dropdown-container { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* 4b. Konto-Fenster (angemeldet): Inhalt beginnt auf der Fläche (15 px Hover-Brücke darüber), kein Schatten am unsichtbaren Behälter */ body header.ts-header .my-account-wrapper .dropdown-container, body header.ts-header .shopping-cart-wrapper .dropdown-container { box-shadow: none !important; outline: 0 !important; } body.logged-in header.ts-header .my-account-wrapper .dropdown-container > ul, body.logged-in header.ts-header .my-account-wrapper .dropdown-container .form-content > ul { margin-top: 15px !important; } /* 6. Bestellungen: Streichpreis mit Abstand; „erstattet" gedämpft */ .woocommerce-orders-table del, .woocommerce-table--order-details del { margin-right: .35em; opacity: .7; } .cfs-erstattet { color: #b9c7b4; font-size: .9em; } /* 7. Geschenkkarte im Raster bei Platzmangel (setzt swipe.js) */ .cfs-sw .products > section.cfs-freunde-karte.cfs-fk-eng .cfs-fk-motiv { display: none !important; } .cfs-sw .products > section.cfs-freunde-karte.cfs-fk-enger .cfs-fk-titel { font-size: .88em !important; line-height: 1.2 !important; } .cfs-sw .products > section.cfs-freunde-karte .meta-wrapper { overflow: hidden; } /* 8b. Geschenkkarte im Spiel: Maße der Produktkarte (setzt swipe.js), Inhalt passt sich an */ .cfs-sw-spiel .products > section.cfs-freunde-karte.cfs-sw-oben { width: var(--cfs-cm-w, auto) !important; height: var(--cfs-cm-h, auto) !important; max-width: none !important; box-sizing: border-box; overflow: hidden; display: flex !important; flex-direction: column; } .cfs-sw-spiel .products > section.cfs-freunde-karte.cfs-sw-oben > .product-wrapper { flex: 1 1 auto; min-height: 0; } .cfs-sw-spiel .products > section.cfs-freunde-karte.cfs-sw-oben .cfs-fk-bild { aspect-ratio: auto !important; flex: 1 1 auto; min-height: 120px; } /* 11. Schnellansicht (Theme-Fenster, im Spiel per Klick aufs Produkt): Schließen-Kreuz und Rahmen im CI */ #ts-quickshop-modal .quickshop-container { border: 1px solid rgba(127,184,87,.55) !important; border-radius: 12px !important; background: #12170f !important; box-shadow: 0 20px 50px rgba(0,0,0,.6) !important; } #ts-quickshop-modal .quickshop-container > .close { background: #12170f !important; border: 1px solid #7fb857 !important; border-radius: 6px !important; color: #9ad072 !important; } #ts-quickshop-modal .quickshop-container > .close::before, #ts-quickshop-modal .quickshop-container > .close::after { background-color: #9ad072 !important; border-color: #9ad072 !important; color: #9ad072 !important; } #ts-quickshop-modal .quickshop-container > .close:hover { background: #7fb857 !important; } #ts-quickshop-modal .overlay { background: rgba(8,10,6,.72) !important; } /* 33. Geleerte Hinweise erscheinen nicht als leere Kästen */ .woocommerce-message:empty, .woocommerce-info:empty, .woocommerce-notices-wrapper:empty, .wc-block-components-notice-banner:empty { display: none !important; } /* 21. Erklärtext direkt unter dem Einlösefeld */ form.cfs-einloesen { margin: 0 !important; padding: 0 !important; } .cfs-einloesen + .cfs-einloesen-info { margin: -2px 0 0 !important; } /* Formular hat 10 px Eigenhöhe unter dem Feld → 8 px sichtbarer Abstand */ form.cfs-einloesen > p:not(.cfs-einloesen-antwort), form.cfs-einloesen > br { display: none !important; } .cfs-einloesen-antwort:not(.cfs-gut):not(.cfs-schlecht):not(.cfs-laeuft) { display: none !important; } form.cfs-einloesen { row-gap: 0 !important; } /* ===================================================================== 0.20.1 — 24. Wunschliste teilen: neuer Aufbau (links Nutzen, rechts Umschalter, darunter Link + WhatsApp) ===================================================================== */ .cfs-wl-teilen { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px 32px; align-items: start; margin: 0 0 26px !important; padding: 22px 24px !important; border: 1px solid rgba(127,184,87,.45) !important; border-radius: 14px !important; background: linear-gradient(135deg, rgba(18,23,15,.95), rgba(18,23,15,.8)) !important; } .cfs-wl-kopf { display: flex; gap: 16px; align-items: flex-start; } .cfs-wl-ic { flex: none; width: 52px; height: 52px; border-radius: 12px; background: rgba(127,184,87,.14); border: 1px solid rgba(127,184,87,.4); position: relative; } .cfs-wl-ic::after { content: ""; position: absolute; inset: 12px; background: #c8f59d; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .cfs-wl-kenn { margin: 0 0 4px !important; color: #f3be4a; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .cfs-wl-titel { margin: 0 0 6px !important; font-size: clamp(20px, 1.8vw, 26px) !important; line-height: 1.2 !important; color: rgba(255,255,255,.97) !important; } .cfs-wl-text { margin: 0 !important; color: #b9c7b4; font-size: 15px; line-height: 1.5; } /* Umschalter: zwei gleich große Felder, das aktive grün gefüllt mit Haken — auf einen Blick klar */ .cfs-wl-wahl { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; padding: 4px; border: 1px solid rgba(127,184,87,.45); border-radius: 10px; background: #0d1108; } .cfs-wl-option { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; margin: 0 !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #b9c7b4 !important; text-align: left; cursor: pointer; transition: background .15s, color .15s; min-width: 0; } .cfs-wl-option:hover:not(.aktiv) { background: rgba(127,184,87,.12) !important; color: rgba(255,255,255,.97) !important; } .cfs-wl-option.aktiv { background: linear-gradient(180deg, #8fca63, #6aa646) !important; color: #0d1108 !important; box-shadow: 0 2px 10px rgba(127,184,87,.35); cursor: default; } .cfs-wl-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cfs-wl-option b { font-size: 14px !important; font-weight: 800; text-transform: none !important; letter-spacing: 0 !important; } .cfs-wl-option small { font-size: 12px !important; color: inherit !important; opacity: .8; } .cfs-wl-opt-ic { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .cfs-wl-opt-privat .cfs-wl-opt-ic { --m: url("data:image/svg+xml;utf8,"); } .cfs-wl-opt-freunde .cfs-wl-opt-ic { --m: url("data:image/svg+xml;utf8,"); } .cfs-wl-haken { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; position: relative; } .cfs-wl-option.aktiv .cfs-wl-haken { opacity: 1; background: #0d1108; border-color: #0d1108; } .cfs-wl-option.aktiv .cfs-wl-haken::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #9ad072; border-width: 0 2px 2px 0; transform: rotate(45deg); } .cfs-wl-link { margin-top: 14px; } .cfs-wl-link .cfs-teilen-zeile { margin: 0 0 10px !important; } .cfs-wl-wa { display: flex !important; width: 100%; justify-content: center; } .cfs-wl-hinweis, .cfs-wl-privat-hinweis { margin: 10px 0 0 !important; color: #b9c7b4; font-size: 13px; line-height: 1.5; } .cfs-wl-neu { display: inline !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; color: #9ad072 !important; font: inherit !important; text-decoration: underline; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; } .cfs-wl-neu:hover { color: #c8f59d !important; } @media (max-width: 899px) { .cfs-wl-teilen { grid-template-columns: 1fr; padding: 18px 16px !important; } } @media (max-width: 480px) { .cfs-wl-wahl { grid-template-columns: 1fr; } } /* 25. Lösch-Kreuz der Wunschliste: zwei gezeichnete Linien, exakt mittig im Kreis (das Zeichen „×" saß optisch links) */ .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist { position: relative !important; } .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist::before, .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist::after { content: "" !important; display: block !important; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: 0 !important; border-radius: 1px; background: currentColor; font-size: 0 !important; } .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist::before { transform: translate(-50%, -50%) rotate(45deg); } .ts-wishlist-table-wrapper .item .product-remove a.ts-remove-from-wishlist::after { transform: translate(-50%, -50%) rotate(-45deg); } .cfs-wl-teilen [hidden] { display: none !important; } .cfs-wl-option small { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; } .cfs-wl-neu { line-height: inherit !important; height: auto !important; min-height: 0 !important; vertical-align: baseline !important; box-shadow: none !important; } .cfs-wl-link .cfs-teilen-zeile, .cfs-wl-wa { width: 100% !important; max-width: none !important; box-sizing: border-box; } .cfs-wl-teilen .cfs-wl-link { max-width: none !important; width: 100% !important; } /* ===================================================================== 0.20.1 — Startseite: Amber-CannaMatch, abwechslungsreiche Formen ===================================================================== */ /* 19. CannaMatch-Kasten in Amber mit Schein; Karte in der Mitte und höher (drei Spalten: Text | Karte | Weiter) */ .cfs-cm-mini { grid-template-columns: minmax(0,1fr) 340px minmax(0,.8fr) !important; align-items: start !important; padding: 26px 28px !important; border: 1px solid rgba(243,190,74,.75) !important; background: radial-gradient(ellipse at 50% 0%, rgba(243,190,74,.28), rgba(243,190,74,.08) 55%, rgba(18,23,15,.92) 100%), #12170f !important; box-shadow: 0 0 34px rgba(243,190,74,.35), inset 0 0 40px rgba(243,190,74,.08) !important; } .cfs-cm-mini .cfs-cm-kenn, .cfs-cm-mini .cfs-cm-kenn .cfs-sw-spiel-ic { color: #f3be4a !important; } .cfs-cm-mini-text { align-self: center; } .cfs-cm-mini .cfs-sw-mini { margin-top: -6px !important; } .cfs-cm-mini-rechts { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .cfs-cm-mini-punkte li { background: rgba(243,190,74,.25) !important; } .cfs-cm-mini-punkte li.an { background: #f3be4a !important; box-shadow: 0 0 10px rgba(243,190,74,.8) !important; } .cfs-cm-mini-weiter { border-color: #f3be4a !important; color: #f3be4a !important; } .cfs-cm-mini-weiter:hover { background: #f3be4a !important; color: #12170f !important; } @media (max-width: 1099px) { .cfs-cm-mini { grid-template-columns: minmax(0,1fr) 320px !important; } .cfs-cm-mini-rechts { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; } } @media (max-width: 767px) { .cfs-cm-mini { grid-template-columns: 1fr !important; } } /* Siegerpodest: Platz 1 groß, Rang als Badge aufs Bild */ .cfs-start-podest .products { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; grid-auto-flow: dense; counter-reset: rang; } .cfs-start-podest .products > section.product { counter-increment: rang; position: relative; } .cfs-start-podest .products > section.product:first-child { grid-column: span 2; grid-row: span 2; } .cfs-start-podest .products > section.product::before { content: "#" counter(rang); position: absolute; z-index: 5; left: 10px; top: 10px; padding: 3px 9px; border-radius: 6px; background: #12170f; border: 1px solid #f3be4a; color: #f3be4a; font-weight: 900; font-size: 14px; } .cfs-start-podest .products > section.product:first-child::before { font-size: 20px; padding: 5px 12px; background: #f3be4a; color: #12170f; } @media (max-width: 767px) { .cfs-start-podest .products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } /* Karussell: dieselben Karten, wischbar */ .cfs-start-karussell .products { display: flex !important; gap: 14px !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px !important; scrollbar-width: thin; scrollbar-color: #7fb857 transparent; } .cfs-start-karussell .products > section.product { flex: 0 0 calc((100% - 4 * 14px) / 4.4) !important; max-width: none !important; margin: 0 !important; scroll-snap-align: start; } @media (max-width: 767px) { .cfs-start-karussell .products > section.product { flex-basis: 62% !important; } } /* Textblock links, drei Karten rechts */ .cfs-start-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 28px; align-items: center; padding: 26px; border: 1px solid rgba(127,184,87,.4); border-radius: 14px; background: rgba(13,17,8,.55); } .cfs-split-unter { color: #b9c7b4; margin: 8px 0 16px !important; } .cfs-split-karten .products { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } @media (max-width: 899px) { .cfs-start-split { grid-template-columns: 1fr; padding: 18px; } } /* Kategorie-Kacheln */ .cfs-kachel-raster { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; } .cfs-kachel-kat { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid rgba(127,184,87,.35); border-radius: 12px; background: rgba(13,17,8,.6); text-decoration: none !important; transition: border-color .15s, transform .15s; } .cfs-kachel-kat:hover { border-color: #9ad072; transform: translateY(-2px); } .cfs-kachel-bild img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; } .cfs-kachel-name { margin-top: 6px; color: rgba(255,255,255,.97); font-weight: 800; font-size: 15px; } .cfs-kachel-zahl { color: #b9c7b4; font-size: 12.5px; } @media (max-width: 1023px) { .cfs-kachel-raster { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 480px) { .cfs-kachel-raster { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* Marken-Banner */ .cfs-start-marke { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 24px; align-items: center; padding: 24px; border-radius: 14px; border: 1px solid rgba(200,245,157,.35); background: linear-gradient(120deg, rgba(127,184,87,.22), rgba(18,23,15,.9) 45%); } .cfs-marke-name { margin: 4px 0 6px !important; font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.05 !important; color: #c8f59d !important; } .cfs-marke-unter { color: #b9c7b4; margin: 0 0 10px !important; } .cfs-start-marke .products { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } @media (max-width: 899px) { .cfs-start-marke { grid-template-columns: 1fr; padding: 18px; } .cfs-start-marke .products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } /* 18. CannaMatch = Amber auch im Banner */ .cfs-cm-teaser { border-color: rgba(243,190,74,.6) !important; box-shadow: 0 0 24px rgba(243,190,74,.2) !important; } .cfs-cm-teaser .cfs-cm-kenn, .cfs-cm-teaser .cfs-cm-kenn .cfs-sw-spiel-ic { color: #f3be4a !important; } .cfs-cm-teaser .cfs-cm-knopf { border-color: #f3be4a !important; color: #f3be4a !important; } .cfs-cm-teaser .cfs-cm-knopf:hover { background: #f3be4a !important; color: #12170f !important; } /* Runde 3, 2c (Felix 08.10.): grüner Schein im Profilkopf lief als 90°-Ecke über die runde Fensterecke */ .my-account-wrapper .cfs-dd-kopf { border-radius: 11px 11px 0 0 !important; overflow: hidden; } /* Runde 3, 3b: „Verstanden" — Info-Karte bleibt, wird still; Knöpfe danach leuchten nacheinander amber (einmalig, keine Daueranimation) */ .cfs-sw section.cfs-sw-info.cfs-sw-info-ok { opacity: .55; box-shadow: none; } .cfs-sw-info-ok .cfs-sw-info-zu, .cfs-sw-info-zu:disabled { background: transparent; border-color: rgba(154,208,114,.4); color: #b9c7b4; cursor: default; } .cfs-sw-daumen.cfs-sw-welle { animation: cfs-welle .9s ease-out; } @keyframes cfs-welle { 0% { box-shadow: none; } 35% { background: #f3be4a; border-color: #f3be4a; color: #12170f !important; box-shadow: 0 0 16px rgba(243,190,74,.7); } 100% { box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .cfs-sw-daumen.cfs-sw-welle { animation: none; } } /* Runde 3, 6d (Felix, 08.10.): Lernbalken-Text mittig statt linksbündig; Prozent bleibt rechts */ .cfs-lern { justify-content: center; padding-right: 150px; padding-left: 150px; } .cfs-lern-text { flex: 0 1 auto; } .cfs-lern-zahl { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } @media (max-width: 600px) { .cfs-lern { padding-left: 12px; padding-right: 108px; } } /* 6c: Rundenende — groß, mittig, länger sichtbar */ .cfs-flug-runde { font-size: 22px; padding: 12px 22px; white-space: normal; max-width: min(640px, 90vw); text-align: center; line-height: 1.3; border-width: 2px; box-shadow: 0 0 34px rgba(154,208,114,.55); } @media (max-width: 600px) { .cfs-flug-runde { font-size: 17px; } } /* Runde 3, 6b (Felix, 08.10.): Geschenkkarte im Spiel — Text in voller Kartenbreite und normaler Größe (das Bild gibt Platz ab, nicht die Schrift), größeres Geschenkt-Schild, Innenabstand unter „Guthaben verschenken" (auch im Raster von „Für dich") */ .cfs-sw-spiel .products > section.cfs-freunde-karte.cfs-sw-oben > .product-wrapper { display: flex !important; flex-direction: column; } .cfs-sw-spiel .products > section.cfs-freunde-karte.cfs-sw-oben .thumbnail-wrapper { flex: 1 1 auto; min-height: 0; display: flex; } .cfs-sw-spiel .products > section.cfs-freunde-karte.cfs-sw-oben .meta-wrapper { flex: none; overflow: visible; } .cfs-sw-spiel .products > section.cfs-freunde-karte.cfs-sw-oben .cfs-fk-motiv { display: block !important; } .cfs-sw-spiel .cfs-freunde-karte .cfs-fk-badge { padding: 9px 16px !important; gap: 4px; } .cfs-sw-spiel .cfs-freunde-karte .cfs-fk-badge b { font-size: 17px; } .cfs-sw-spiel .cfs-freunde-karte .cfs-fk-badge span { font-size: 12.5px; } .cfs-sw .products > section.cfs-freunde-karte .meta-wrapper { padding-bottom: 12px !important; } @media (max-width: 600px) { .cfs-sw-spiel .cfs-freunde-karte .cfs-fk-badge { padding: 6px 12px !important; } .cfs-sw-spiel .cfs-freunde-karte .cfs-fk-badge b { font-size: 14px; } .cfs-sw-spiel .cfs-freunde-karte .cfs-fk-badge span { font-size: 11px; } } /* Runde 3, 6f: Schnellansicht-Fenster (echte Produktseite im iframe) */ .cfs-schnell-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; } .cfs-schnell-modal[hidden] { display: none; } .cfs-schnell-grund { position: absolute; inset: 0; background: rgba(8,10,6,.72); } .cfs-schnell-box { position: relative; width: min(1100px, 100%); max-height: calc(100vh - 48px); border: 1px solid rgba(127,184,87,.55); border-radius: 12px; background: #12170f; box-shadow: 0 20px 50px rgba(0,0,0,.6); overflow: hidden; } .cfs-schnell-box iframe { display: block; width: 100%; height: min(640px, calc(100vh - 48px)); border: 0; background: #12170f; transition: opacity .2s; } .cfs-schnell-laedt .cfs-schnell-box iframe { opacity: 0; } .cfs-schnell-box > .cfs-spinner { position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; display: none; } .cfs-schnell-laedt .cfs-schnell-box > .cfs-spinner { display: block; } .cfs-schnell-zu { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 1px solid #7fb857; border-radius: 6px; background: #12170f; cursor: pointer; } .cfs-schnell-zu::before, .cfs-schnell-zu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 1px; background: #9ad072; transform: rotate(45deg); } .cfs-schnell-zu::after { transform: rotate(-45deg); } .cfs-schnell-zu:hover { background: #7fb857; } .cfs-schnell-zu:hover::before, .cfs-schnell-zu:hover::after { background: #12170f; } html.cfs-schnell-offen, html.cfs-schnell-offen body { overflow: hidden !important; } @media (max-width: 767px) { .cfs-schnell-modal { padding: 10px; } .cfs-schnell-box { max-height: calc(100vh - 20px); } } /* Runde 3, 7b: Vorteils-Karte für Gäste (Optik der Geschenkkarte) */ .cfs-fk-symbol.cfs-vk-symbol { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .cfs-vorteil-karte .cfs-vk-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; } .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf { width: 100%; min-height: 40px; padding: 8px 6px !important; justify-content: center; text-align: center; } .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf-gross { font-size: 12px !important; white-space: normal; line-height: 1.15; } .cfs-vorteil-karte .cfs-vk-klein { margin: 6px 0 0 !important; font-size: 11px; line-height: 1.35; color: #b9c7b4; } .cfs-vorteil-karte .cfs-vk-klein a { color: #9ad072 !important; } .cfs-vorteil-karte.cfs-vk-danke .cfs-fk-titel { color: #c8f59d !important; } @media (max-width: 600px) { .cfs-vorteil-karte .cfs-vk-knoepfe { grid-template-columns: 1fr; } } .products section.cfs-vorteil-karte .meta-wrapper { padding-bottom: 12px !important; display: flex; flex-direction: column; } /* ===== Runde 3 (08.10.2026): Startseite ===== */ /* CannaMatch-Symbol: Cannabis-Blatt (Felix, 13.10.; vorher zwei Karten mit Blatt) — überall, wo das Spiel-Symbol steht, und in der Glocke */ .cfs-sw-spiel-ic { -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat !important; } /* 10g: Mini-CannaMatch — Text + Knopf links, Spiel Mitte, Bühne rechts */ .cfs-cm-mini-text .cfs-cm-mini-weiter { margin-top: 4px; } .cfs-cm-mini-rechts { align-self: stretch !important; display: block !important; position: relative; min-height: 300px; } .cfs-cm-buehne { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 18%, #000 70%, transparent 100%); mask-image: linear-gradient(to top, transparent 0, #000 18%, #000 70%, transparent 100%); } .cfs-bu-spruch, .cfs-bu-daumen { position: absolute; bottom: 0; animation: cfs-bu-steigen 4.2s ease-out forwards; } .cfs-bu-spruch { padding: 6px 12px; border: 1px solid rgba(243,190,74,.7); border-radius: 6px; background: rgba(13,17,8,.92); color: #f3be4a; font-size: 14px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 16px rgba(243,190,74,.3); } .cfs-bu-daumen { width: 34px; height: 34px; background: #9ad072; filter: drop-shadow(0 0 8px rgba(154,208,114,.7)); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .cfs-bu-runter { background: #f3be4a; filter: drop-shadow(0 0 8px rgba(243,190,74,.6)); transform: rotate(180deg); } @keyframes cfs-bu-steigen { 0% { transform: translateY(20px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-300px); opacity: 0; } } .cfs-bu-runter { animation-name: cfs-bu-steigen-r; } @keyframes cfs-bu-steigen-r { 0% { transform: translateY(20px) rotate(180deg); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-300px) rotate(180deg); opacity: 0; } } @media (max-width: 1099px) { .cfs-cm-mini-rechts { display: none !important; } } /* 10h: Handy — nur der CannaMatch-Container: Kennung, Titel, Spiel */ @media (max-width: 767px) { .cfs-cm-mini .cfs-cm-unter, .cfs-cm-mini .cfs-cm-mini-weiter { display: none !important; } .cfs-cm-mini .cfs-cm-titel { font-size: 20px !important; margin: 4px 0 0 !important; } } /* 10c: CannaMatch-Banner — zwei Pfeile über den Karten: links weniger, rechts mehr */ .cfs-cm-rechts { display: flex; flex-direction: column; align-items: center; gap: 6px; } .cfs-cm-pfeile { display: flex; justify-content: space-between; width: 300px; } .cfs-cm-pfeil { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #f3be4a; } .cfs-cm-pfeil::before, .cfs-cm-rechts-pf::after { content: ""; width: 26px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .cfs-cm-rechts-pf::before { content: none; } .cfs-cm-rechts-pf::after { transform: scaleX(-1); } .cfs-cm-teaser .cfs-cm-stapel { width: 300px; } @media (max-width: 991px) { .cfs-cm-rechts { display: none; } } /* 10b: Top 5 — Platz 1 kleiner (Bilder sind nicht hochauflösend genug), sein Karteninhalt wächst gleichmäßig mit */ .cfs-start-podest .products > section.product:first-child .product-wrapper { height: 100%; display: flex; flex-direction: column; justify-content: center; } .cfs-start-podest .products > section.product:first-child .thumbnail-wrapper { flex: none; width: 62%; margin: 22px auto 0 !important; } .cfs-start-podest .products > section.product:first-child .meta-wrapper { width: 62%; margin: 0 auto; box-sizing: border-box; } .cfs-start-podest .products > section.product:first-child .meta-wrapper { zoom: 1.35; } @media (max-width: 767px) { .cfs-start-podest .products > section.product:first-child .meta-wrapper { zoom: 1; width: 100%; } .cfs-start-podest .products > section.product:first-child .thumbnail-wrapper { width: 100%; margin: 0 !important; } } /* 10f: Produkt des Monats — Fakten als Theme-Badges, Preis exakt wie auf den Karten */ .cfs-sb-fakten { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px !important; } .cfs-sb-fakten .cfs-sb-badge { position: static !important; display: inline-flex; align-items: center; padding: 6px 10px !important; line-height: 1 !important; } .cfs-sb-preisblock.product-wrapper { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 16px !important; border-radius: 0 !important; } .cfs-sb-preisblock .price { min-height: 0 !important; } /* 10i: Untertitel unter der Überschrift einer Reihe */ .cfs-start-unter { flex-basis: 100%; margin: 2px 0 0 !important; color: #b9c7b4; font-size: 14px; } .cfs-start-kopf { flex-wrap: wrap; } /* 10e: Vorteile-Leiste */ .cfs-start-vorteile ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none; } .cfs-start-vorteile li { display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid rgba(127,184,87,.45); border-radius: 10px; background: rgba(18,23,15,.6); } .cfs-start-vorteile li::before, .cfs-start-vorteile li::marker { content: none !important; } .cfs-start-vorteile .cfs-vt-ic { grid-row: 1 / 3; width: 34px; height: 34px; background: #9ad072; -webkit-mask: var(--vt) center / contain no-repeat; mask: var(--vt) center / contain no-repeat; } .cfs-start-vorteile b { color: rgba(255,255,255,.97); font-size: 15px; line-height: 1.2; } .cfs-start-vorteile li > span:last-child { color: #b9c7b4; font-size: 12.5px; line-height: 1.3; } .cfs-vt-versand { --vt: url("data:image/svg+xml;utf8,"); } .cfs-vt-paket { --vt: url("data:image/svg+xml;utf8,"); } .cfs-vt-guthaben { --vt: url("data:image/svg+xml;utf8,"); } .cfs-vt-blatt { --vt: url("data:image/svg+xml;utf8,"); } .cfs-vt-herz { --vt: url("data:image/svg+xml;utf8,"); } .cfs-bu-spruch { max-width: 100%; white-space: normal; } .cfs-cm-mini a.button.cfs-cm-mini-weiter { border-color: #f3be4a !important; color: #f3be4a !important; } .cfs-cm-mini a.button.cfs-cm-mini-weiter:hover { background: #f3be4a !important; color: #12170f !important; } /* CannaMatch = Amber */ .cfs-wl-vorschlaege { padding-left: 0 !important; padding-right: 0 !important; } /* bündig mit den Wunschlisten-Zeilen */ /* Unterer Kategorietext (08.10.): wie der obere, mit Luft zur Produktliste */ .cfs-archiv-text-unten { clear: both; margin: 40px 0 10px !important; padding-top: 28px; border-top: 1px solid rgba(127,184,87,.25); } /* ===== Produktbewertungen (08.10.2026) ===== */ .cfs-sterne { position: relative; display: inline-block; width: 100px; height: 19px; vertical-align: middle; background: rgba(243,190,74,.22); -webkit-mask: url("data:image/svg+xml;utf8,") 0 0 / 20px 19px repeat-x; mask: url("data:image/svg+xml;utf8,") 0 0 / 20px 19px repeat-x; } .cfs-sterne-voll { position: absolute; inset: 0 auto 0 0; background: #f3be4a; } .cfs-sterne-klein { width: 75px; height: 14px; -webkit-mask-size: 15px 14px; mask-size: 15px 14px; } /* Kundenstimmen (Kasse, Warenkorb) setzen Sterne als Text ★★★★★ — die Masken-Sterne der Produktbewertungen dort nicht anwenden (sonst doppelt + verrutscht, 13.10.) */ .cfs-stimmen .cfs-sterne { width: auto !important; height: auto !important; background: none !important; -webkit-mask: none !important; mask: none !important; vertical-align: baseline; } .cfs-bew { margin: 40px 0 10px; padding: 26px 28px; border: 1px solid rgba(127,184,87,.45); border-radius: 12px; background: rgba(18,23,15,.6); } .cfs-bew-titel { margin: 0 0 18px !important; font-size: 26px !important; color: rgba(255,255,255,.97) !important; } .cfs-bew-kopf { display: grid; grid-template-columns: minmax(0,240px) minmax(0,1fr); gap: 32px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgba(127,184,87,.25); } .cfs-bew-gesamt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .cfs-bew-note { font-size: 44px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.97); } .cfs-bew-anzahl { color: #b9c7b4; font-size: 14px; } .cfs-bew-wieder { color: #c8f59d; font-size: 14px; } .cfs-bew-kriterien { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; } .cfs-bew-kriterien li { display: grid; grid-template-columns: minmax(0,170px) minmax(0,1fr) 34px; gap: 12px; align-items: center; margin: 0 !important; } .cfs-bew-kriterien li::before, .cfs-bew-liste li::before { content: none !important; } .cfs-bew-kname { color: rgba(255,255,255,.97); font-size: 14px; } .cfs-bew-balken { height: 8px; border-radius: 4px; background: rgba(127,184,87,.18); overflow: hidden; } .cfs-bew-balken span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7fb857, #c8f59d); } .cfs-bew-kwert { color: #c8f59d; font-weight: 800; font-size: 14px; text-align: right; } .cfs-bew-galerie { padding: 18px 0; border-bottom: 1px solid rgba(127,184,87,.25); } .cfs-bew-galerie-titel { margin: 0 0 10px !important; font-weight: 800; color: rgba(255,255,255,.97); } .cfs-bew-fotos { display: flex; flex-wrap: wrap; gap: 8px; } .cfs-bew-foto img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(127,184,87,.45); display: block; } .cfs-bew-liste { list-style: none; margin: 0 !important; padding: 0 !important; } .cfs-bew-eintrag { margin: 0 !important; padding: 18px 0; border-bottom: 1px solid rgba(127,184,87,.18); } .cfs-bew-ezeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cfs-bew-autor { font-weight: 800; color: rgba(255,255,255,.97); } .cfs-bew-geprueft { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #9ad072; } .cfs-bew-geprueft::before { content: ""; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); } .cfs-bew-datum { margin-left: auto; color: #b9c7b4; font-size: 13px; } .cfs-bew-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cfs-bew-chip { padding: 4px 8px; border: 1px solid rgba(127,184,87,.4); border-radius: 6px; font-size: 12px; color: #d6e8c4; } .cfs-bew-chip-ja { border-color: rgba(154,208,114,.8); color: #c8f59d; } .cfs-bew-text { margin: 10px 0 0 !important; color: #d6e8c4; line-height: 1.55; } .cfs-bew-eintrag .cfs-bew-fotos { margin-top: 10px; } .cfs-bew-selbst { margin: 16px 0 0 !important; } .cfs-bew-selbst a { color: #9ad072 !important; font-weight: 700; } .cfs-bew-pruefung { margin: 14px 0 0 !important; font-size: 12.5px; line-height: 1.5; color: #b9c7b4; } .cfs-bew-leer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .cfs-bew-leer p { margin: 0 !important; color: #d6e8c4; } @media (max-width: 767px) { .cfs-bew { padding: 18px 14px; } .cfs-bew-kopf { grid-template-columns: 1fr; gap: 18px; } .cfs-bew-kriterien li { grid-template-columns: minmax(0,120px) minmax(0,1fr) 30px; } } /* Konto → Bewertungen */ .cfs-bew-intro { color: #d6e8c4; margin: 0 0 20px !important; } .cfs-bew-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #f3be4a; color: #12170f; font-size: 13px; vertical-align: middle; } .cfs-bew-nichts { color: #b9c7b4; } .cfs-bew-zeile { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(127,184,87,.2); } .cfs-bew-zeile > p:empty { display: none; } .cfs-bew-bild a { display: block; } .cfs-bew-bild img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #12170f; display: block; } .cfs-bew-name { color: rgba(255,255,255,.97) !important; font-weight: 700; text-decoration: none !important; display: block; } .cfs-bew-wann { color: #b9c7b4; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cfs-bew-form { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 6px; padding: 18px; border: 1px dashed rgba(154,208,114,.55); border-radius: 10px; background: rgba(127,184,87,.05); } .cfs-bew-form[hidden] { display: none; } .cfs-bew-feld { display: grid; grid-template-columns: minmax(0,220px) minmax(0,1fr); gap: 12px; align-items: center; margin: 0 !important; } .cfs-bew-flabel { color: rgba(255,255,255,.97); font-size: 14px; font-weight: 700; } .cfs-bew-flabel small { margin-left: 6px; font-weight: 400; color: #b9c7b4; font-size: 12px; } .cfs-bew-wahl { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; } .cfs-bew-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cfs-bew-wahl label { width: 28px; height: 27px; cursor: pointer; background: rgba(243,190,74,.25); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; transition: background .12s; } .cfs-bew-wahl input:checked ~ label, .cfs-bew-wahl label:hover, .cfs-bew-wahl label:hover ~ label { background: #f3be4a; } .cfs-bew-wahl input:focus-visible + label { outline: 2px solid #b9ea8f; outline-offset: 2px; } .cfs-bew-janein { display: inline-flex; gap: 8px; } .cfs-bew-janein input { position: absolute; opacity: 0; } .cfs-bew-janein span { display: inline-block; padding: 7px 14px; border: 1px solid #7fb857; border-radius: 6px; color: #9ad072; font-size: 13px; font-weight: 700; cursor: pointer; } .cfs-bew-janein input:checked + span { background: #7fb857; color: #12170f; } .cfs-bew-feld-text { align-items: start; } .cfs-bew-feld-text textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid rgba(127,184,87,.55) !important; border-radius: 6px !important; background: #12170f !important; color: rgba(255,255,255,.97) !important; font: inherit; } .cfs-bew-fotowahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cfs-bew-altfoto { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: #b9c7b4; cursor: pointer; } .cfs-bew-altfoto img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; } .cfs-bew-altfoto input { margin: 0 !important; } .cfs-bew-foto-knopf { cursor: pointer; } .cfs-bew-foto-info { color: #b9c7b4; font-size: 13px; } .cfs-bew-namehinweis { margin: 0 !important; color: #b9c7b4; font-size: 12.5px; } .cfs-bew-aktion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cfs-bew-meldung { font-size: 14px; } .cfs-bew-ok { color: #c8f59d; } .cfs-bew-fehler { color: #f3be4a; } .cfs-bew-meldung .cfs-spinner { width: 22px; height: 22px; border-width: 2px; } @media (max-width: 767px) { .cfs-bew-zeile { grid-template-columns: 56px minmax(0,1fr); } .cfs-bew-zeile > .cfs-bew-knopfspalte { grid-column: 1 / -1; } .cfs-bew-feld { grid-template-columns: 1fr; gap: 6px; } } .woocommerce-MyAccount-navigation-link--bewertungen a { --cfs-icon: url("data:image/svg+xml;utf8,"); } /* Linien-Stern wie die übrigen Konto-Symbole */ .cfs-bew-konto p:empty, .cfs-bew-konto br { display: none !important; } /* Absatz-Automatik der Konto-Seite */ .cfs-bew-foto-knopf.cfla-knopf { display: inline-flex !important; align-items: center; height: 38px; padding: 0 16px !important; border: 1px solid #7fb857 !important; border-radius: 6px !important; background: #12170f !important; color: #9ad072 !important; font-size: 13px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-decoration: none !important; } .cfs-bew-foto-knopf.cfla-knopf:hover { background: #7fb857 !important; color: #12170f !important; } .cfs-bew-liste li, .cfs-bew-kriterien li { list-style: none !important; } .cfs-bew-liste li::marker, .cfs-bew-kriterien li::marker { content: none !important; } .cfs-bew-kriterien li { grid-template-columns: minmax(0,220px) minmax(0,1fr) 34px; } /* ===== Runde 4 (Felix, 11.10.2026) ===== */ /* 1: Mini-CannaMatch — Vorführen (Knöpfe amber + Wackeln, einmal je Aufruf), danach Erklärung rechts */ .cfs-sw-daumen.cfs-sw-zeig { animation: cfs-zeig 1.5s ease-in-out; } @keyframes cfs-zeig { 0% { transform: none; box-shadow: none; } 15% { background: #f3be4a; border-color: #f3be4a; color: #12170f !important; box-shadow: 0 0 18px rgba(243,190,74,.75); transform: rotate(-4deg); } 30% { transform: rotate(4deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); background: #f3be4a; border-color: #f3be4a; color: #12170f !important; box-shadow: 0 0 18px rgba(243,190,74,.75); } 100% { transform: none; box-shadow: none; } } .cfs-cm-erklaer { position: absolute; left: 0; right: 64px; top: 50%; transform: translateY(-40%); margin: 0 !important; opacity: 0; transition: opacity .6s ease, transform .6s ease; pointer-events: none; z-index: 2; text-wrap: pretty; } .cfs-cm-erklaert .cfs-cm-erklaer { opacity: 1; transform: translateY(-50%); } .cfs-cm-erklaer b, .cfs-cm-erklaer span { text-wrap: balance; } .cfs-cm-erklaer b { display: block; color: #f3be4a; font-size: 20px; line-height: 1.25; font-weight: 800; margin-bottom: 8px; } .cfs-cm-erklaer span { display: block; color: rgba(255,255,255,.97); font-size: 15px; line-height: 1.5; } .cfs-cm-erklaert .cfs-bu-spruch { display: none; } @media (prefers-reduced-motion: reduce) { .cfs-sw-daumen.cfs-sw-zeig { animation: none; } .cfs-cm-erklaer { transition: none; } } /* 10d: beide CannaMatch-Kästen so breit wie alle anderen Bausteine (vorher 100 px schmaler bzw. 1290 px linksbündig) */ body.home .cfs-cm-mini, body.home .cfs-cm-teaser, .cfs-startseite > .cfs-cm-teaser { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* 10a: Produkt des Monats — Grundpreis unten auf Höhe der Bildunterkante */ .cfs-start-steckbrief .cfs-sb-text { align-self: stretch; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-bottom: 28px; } .cfs-start-steckbrief .cfs-sb-text > * { flex: none !important; } .cfs-start-steckbrief .cfs-sb-text > .cfs-sb-kurz, .cfs-start-steckbrief .cfs-sb-text > .cfs-sb-name, .cfs-start-steckbrief .cfs-sb-text > .cfs-sb-fakten { align-self: stretch; } .cfs-sb-grundpreis.product-wrapper { position: absolute; left: 0; bottom: 0; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } .cfs-sb-grundpreis .cf-grundpreis { margin: 0 !important; } @media (max-width: 767px) { .cfs-start-steckbrief .cfs-sb-text { padding-bottom: 0; } .cfs-sb-grundpreis.product-wrapper { position: static; margin-top: 10px !important; } } /* 10b: Top 5 — Platz 1 ohne riesigen Innenrand: Bild füllt die Karte wie bei jeder Karte, Text normal groß, Karte so hoch wie die zwei Reihen daneben */ .cfs-start-podest .products > section.product:first-child .product-wrapper { justify-content: flex-start !important; } .cfs-start-podest .products > section.product:first-child .thumbnail-wrapper { width: auto !important; margin: 0 !important; } .cfs-start-podest .products > section.product:first-child .meta-wrapper { width: auto !important; margin: 0 !important; zoom: 1.2 !important; } /* 10e: Vorteile — Symbol und Textblock je Kasten mittig, Titel und Untertext immer auf derselben Höhe */ .cfs-start-vorteile ul { grid-template-columns: repeat(5, minmax(0,1fr)) !important; } .cfs-start-vorteile li { grid-template-rows: 1fr auto auto 1fr !important; row-gap: 3px; min-height: 72px; box-sizing: border-box; padding: 12px 16px !important; margin: 0 !important; } /* Theme nimmt dem ersten Punkt oben und dem letzten unten den Innenabstand */ .cfs-start-vorteile .cfs-vt-ic { grid-row: 1 / -1 !important; align-self: center; } .cfs-start-vorteile li > b { grid-column: 2; grid-row: 2; } .cfs-start-vorteile li > span:last-child { grid-column: 2; grid-row: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1199px) { .cfs-start-vorteile ul { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } } @media (max-width: 767px) { .cfs-start-vorteile ul { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .cfs-start-vorteile li > span:last-child { white-space: normal; } } /* 2a (Felix, 11.10.): Chrome zeigt den Vorschlag beim Überfahren der Kontoliste (und vorbefüllte Felder vor der ersten Eingabe) in „FieldText“ – bei hellem Farbschema schwarz auf unserem schwarzen Feld. Mit dunklem Farbschema ist FieldText hell; Hintergrund überdecken wie bisher. */ input, textarea, select { color-scheme: dark; } input:-webkit-autofill, input:autofill { caret-color: #fff; } /* 2b: Anmeldekasten mit leichtem grünem Schein */ /* Fläche ist ein Pseudo-Element des Themes (Behälter selbst unsichtbar, s. 0.20.1/4b) → Schein per drop-shadow auf die gemalte Fläche */ body:not(.logged-in) header.ts-header .my-account-wrapper .dropdown-container { filter: drop-shadow(0 0 16px rgba(127,184,87,.38)) drop-shadow(0 0 2px rgba(154,208,114,.45)); } /* 3b: Schranke in Für dich — zählt die nötigen Tipps sichtbar herunter */ .cfs-sw-schranke span { display: block; } .cfs-sch-punkte { display: flex !important; justify-content: center; gap: 8px; margin: 8px 0 8px; } .cfs-sch-punkte i { width: 30px; height: 6px; border-radius: 3px; background: rgba(243,190,74,.25); transition: background .25s, box-shadow .25s; } .cfs-sch-punkte i.an { background: #f3be4a; box-shadow: 0 0 10px rgba(243,190,74,.7); } .cfs-sw-schranke { text-align: center; text-wrap: pretty; transition: opacity .5s; } .cfs-sw-schranke.cfs-sch-frei { opacity: .4; } /* 3d: Vorteils-Karte als Verkaufselement — Bildfläche = Vorteile, Knöpfe in der Knopfreihe (Für dich/CannaMatch), Rahmen wie bei Produkten */ .cfs-vk-bild { flex-direction: column; align-items: stretch !important; justify-content: center !important; gap: 14px; padding: 18px 18px 16px; box-sizing: border-box; background: radial-gradient(circle at 30% 20%, rgba(154,208,114,.32), rgba(18,23,15,.15) 70%) !important; } .cfs-vk-vorteile { margin: 18px 0 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 14px; } .cfs-vk-vorteile li { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 12px; align-items: center; margin: 0 !important; padding: 0 !important; list-style: none !important; } .cfs-vk-vorteile li::marker, .cfs-vk-vorteile li::before { content: none !important; } .cfs-vk-vorteile .cfs-vk-ic { grid-row: 1 / 3; width: 30px; height: 30px; background: #9ad072; -webkit-mask: var(--vk) center / contain no-repeat; mask: var(--vk) center / contain no-repeat; } .cfs-vk-vorteile b { color: rgba(255,255,255,.97); font-size: 15px; line-height: 1.25; } .cfs-vk-herz { --vk: url("data:image/svg+xml;utf8,"); } .cfs-vk-guthaben { --vk: url("data:image/svg+xml;utf8,"); } .cfs-vk-liste { --vk: url("data:image/svg+xml;utf8,"); } .products section.cfs-vorteil-karte .meta-wrapper { padding-bottom: 12px !important; } .cfs-vorteil-karte .cfs-fk-titel { margin-bottom: 4px !important; } .cfs-vorteil-karte .cfs-fk-motiv { margin: 0 0 6px !important; } .cfs-vorteil-karte .cfs-vk-klein { margin: 8px 0 0 !important; font-size: 11px; line-height: 1.35; color: #b9c7b4; text-wrap: balance; } /* in Für dich/CannaMatch: Knöpfe als Knopfreihe unter dem Rahmen, gleiche Höhe und Optik wie „Weniger/Mehr zeigen“ */ .cfs-vorteil-karte > .cfs-vk-knoepfe.cfs-sw-steuer { margin-top: 12px; } .cfs-vorteil-karte > .cfs-vk-knoepfe .cfla-knopf { height: 44px; min-height: 0; padding: 0 6px !important; border-radius: 6px !important; } .cfs-vorteil-karte > .cfs-vk-knoepfe .cfla-knopf-gross { font-size: 12px !important; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; } .cfs-vk-weiter { grid-column: 1 / -1; background: none !important; border: 0 !important; color: #b9c7b4 !important; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px 0 !important; } .cfs-vk-weiter:hover { color: #9ad072 !important; } /* 3c (Felix, 11.10.): Sonderkarten (Geschenk-/Vorteils-Karte) in Für dich/CannaMatch — Rahmen nur um die Karte, nie um die Knopfreihe; endet auf derselben Höhe wie der Rahmen der Produktkarten daneben */ .cfs-sw .products > section.product.cfs-freunde-karte { border: 0 !important; background: none !important; box-shadow: none !important; display: flex !important; flex-direction: column; } .cfs-sw .woocommerce .products > section.product.cfs-freunde-karte > .product-wrapper.product-wrapper { flex: 1 1 auto; height: auto !important; border: 1px solid #9ad072 !important; border-radius: 12px !important; overflow: hidden; background: linear-gradient(160deg, rgba(127,184,87,.22), rgba(18,23,15,.85) 55%) !important; } .cfs-sw .products > section.product.cfs-freunde-karte > .cfs-sw-steuer { flex: none; } .cfs-sw .woocommerce .products > section.product.cfs-vorteil-karte .cfs-fk-bild.cfs-vk-bild { aspect-ratio: 1 / 1 !important; height: auto !important; } /* Titel auf Höhe der Produkttitel daneben */ .cfs-sw .products > section.cfs-vorteil-karte .thumbnail-wrapper { flex: none !important; } /* 5a: Zeitbalken unten in der Spielkarte (amber, 1 s) — zeigt, ab wann der Tipp zählt; bei zu frühem Klick pulsiert er */ .cfs-sw-spiel section.product > .product-wrapper { position: relative; } .cfs-sw-zeit { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 2px; background: rgba(243,190,74,.18); overflow: hidden; pointer-events: none; opacity: 0; z-index: 3; } .cfs-sw-zeit i { display: block; height: 100%; width: 0; background: #f3be4a; box-shadow: 0 0 8px rgba(243,190,74,.8); } .cfs-sw-zeit.cfs-zeit-lauf { animation: cfs-zeit-weg .5s ease 1.25s forwards; opacity: 1; } .cfs-sw-zeit.cfs-zeit-lauf i { animation: cfs-zeit-fuell 1s linear forwards; } @keyframes cfs-zeit-fuell { to { width: 100%; } } @keyframes cfs-zeit-weg { to { opacity: 0; } } .cfs-sw-spiel section.cfs-sw-warte .cfs-sw-zeit { opacity: 1; height: 5px; } @media (prefers-reduced-motion: reduce) { .cfs-sw-zeit.cfs-zeit-lauf i { animation-duration: 1s; } } /* 5c: Anleitung für Durchklicker — größer, länger, gut lesbar */ .cfs-flug.cfs-flug-anleitung { max-width: min(560px, 90vw); white-space: normal; text-align: center; text-wrap: balance; line-height: 1.35; } /* 10c: Kategorie-Kacheln als Bild mit Namen im Bild (aktiv, sobald jede gezeigte Kategorie ein Bild hat) */ .cfs-start-kacheln-bild .cfs-kachel-raster { grid-template-columns: repeat(3, minmax(0,1fr)); } .cfs-kachel-kat.cfs-kachel-kat-bild { padding: 0; overflow: hidden; } .cfs-kachel-kat-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .25s ease; } .cfs-kachel-kat-bild:hover img { transform: scale(1.03); } @media (max-width: 480px) { .cfs-start-kacheln-bild .cfs-kachel-raster { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* 3d am Handy: Vorteils-Karte über die ganze Reihe, Bildfläche so hoch wie ihr Inhalt, Knöpfe nebeneinander */ @media (max-width: 767px) { .cfs-sw .woocommerce .products > section.product.cfs-vorteil-karte { grid-column: 1 / -1; contain: none !important; height: auto !important; } .cfs-sw .woocommerce .products > section.product.cfs-vorteil-karte .cfs-fk-bild.cfs-vk-bild { aspect-ratio: auto !important; padding: 18px 16px 16px; } .cfs-vorteil-karte > .cfs-vk-knoepfe.cfs-sw-steuer { grid-template-columns: 1fr 1fr !important; } } /* Glocke (Felix, 12.10.): „Alle als gelesen" im Kopf des Fensters; Farbleiste links bleibt im abgerundeten Kasten */ .cfs-glocke-kopf > span { display: inline-flex; align-items: center; gap: 8px; } .cfs-glocke-kopf .cfs-glocke-gelesen { font-size: 12.5px; font-weight: 700; white-space: nowrap; } .cfs-glocke-kopf .cfs-glocke-gelesen:hover { color: rgba(255,255,255,.97) !important; } .cfs-st > a, .cfs-st > .cfs-st-ohne { position: relative; overflow: hidden; } /* Glocke (13.10.): CannaMatch-Meilenstein mit Blatt in Amber, „Für dich“-Meilenstein mit eigenem Symbol statt leerem Quadrat */ .cfs-st-cannamatch { --cfs-st: url("data:image/svg+xml;utf8,"); } .cfs-st-cannamatch.cfs-st-symbol { background: rgba(243,190,74,.14); } .cfs-st-cannamatch.cfs-st-symbol::before { background: #f3be4a; inset: 5px; } .cfs-stream-klein .cfs-st-cannamatch.cfs-st-symbol::before { inset: 4px; } .cfs-st-fuer_dich { --cfs-st: url("data:image/svg+xml;utf8,"); } /* ========================================================================= 0.29.2 (Felix, 14.10.2026) Sichtbefunde vor dem Livegang ========================================================================= */ /* 2: CannaMatch – eine weggeflogene Vorteils-/Freunde-Karte bleibt weg. Die Regel „.cfs-sw .products > section.product.cfs-freunde-karte { display:flex !important }“ war gleich spezifisch wie das Ausblenden im Spiel und stand später → die alte Karte lag unter der neuen. */ .cfs-sw-spiel .products > section.product.cfs-freunde-karte:not(.cfs-sw-oben) { display: none !important; } /* 4: Freunde-Karte im Kategorie-Raster so hoch wie die Produktkarten der Reihe (sie bestimmt die Reihenhöhe nicht mehr mit, contain: size), das Geschenkbild gibt nach; Knopf mit demselben Innenabstand unten wie der Inhalt der Produktkarten (Theme: 14 px, unter 1280 px 8 px). */ body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-freunde-karte.cfs-fk-raster:not(.cfs-vorteil-karte) { container: cfs-fk-raster / size; contain: size; align-self: stretch; height: auto !important; min-height: 0; display: flex !important; flex-direction: column; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-freunde-karte.cfs-fk-raster:not(.cfs-vorteil-karte) > .product-wrapper { flex: 1 1 auto; min-height: 0; height: auto !important; display: flex; flex-direction: column; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-freunde-karte.cfs-fk-raster:not(.cfs-vorteil-karte) .thumbnail-wrapper { flex: 1 1 0; min-height: 0; aspect-ratio: auto !important; overflow: hidden; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-freunde-karte.cfs-fk-raster:not(.cfs-vorteil-karte) .cfs-fk-bild { height: 100%; aspect-ratio: auto !important; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-freunde-karte.cfs-fk-raster:not(.cfs-vorteil-karte) .meta-wrapper { flex: none; padding-bottom: 13px !important; } @media (max-width: 1279px) { body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-freunde-karte.cfs-fk-raster:not(.cfs-vorteil-karte) .meta-wrapper { padding-bottom: 7px !important; } } /* niedrige Reihe (unter 312 px, z. B. 1200 und 390 px): Werbesatz weg, damit das Geschenkbild sichtbar bleibt */ @container cfs-fk-raster (max-height: 312px) { .cfs-fk-motiv { display: none !important; } } /* 5: Unterer Kategorietext linksbündig wie der obere (vorher am Rechner mittig) – Überschriften, Absätze, Listen darin ebenso */ .cfs-archiv-text-unten, .cfs-archiv-text-unten :is(h1, h2, h3, h4, h5, h6, p, li, ul, ol, div, blockquote) { text-align: left !important; } /* 9: Vorteilsleiste Startseite – Symbol + Text mittig in der Box (links = rechts), Größe wächst mit der Box: Maßstab ist die längste Zeile („Versand am selben Werktag“), alle Boxen gleich groß (gleiche Breite → gleiche Schrift), Titel und Unterzeile immer einzeilig. */ .cfs-start-vorteile li { container-type: inline-size; grid-template-columns: auto auto !important; justify-content: center; column-gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .cfs-start-vorteile .cfs-vt-ic { width: 14cqi; height: 14cqi; margin-right: 5cqi; } .cfs-start-vorteile li > b { font-size: 6.2cqi; white-space: nowrap; } .cfs-start-vorteile li > span:last-child { font-size: 5.15cqi; white-space: nowrap !important; overflow: visible; text-overflow: clip; } /* 8: „Produkt bewerten“ (Produktseite ohne Bewertungen) – Knopf hatte keinen Innenabstand (Rand klebte an der Schrift) */ .cfs-bew-leer .cfla-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px !important; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; } /* 8: „Für dich“ Info-Karte („So lernt Für dich“) – die alte Regel des Lern-Fensters (.cfs-sw-info, left/right: -48px) verschob die Karte im Raster um 48 px nach links aus dem Bild; am Handy lief der Text zudem unten aus der halben Spalte → dort über die ganze Reihe. */ .cfs-sw .products > section.cfs-sw-info { left: auto; right: auto; top: auto; } @media (max-width: 767px) { .cfs-sw .products > section.cfs-sw-info { grid-column: 1 / -1; contain: none; height: auto; } } /* 0.29.3 (12): Herstellerlogo in „Marke im Trend“ – oben im Kopf, waagerecht mittig (einheitlich für alle Marken), Saum + Schatten */ /* 0.30.6: Breite kommt flächengleich aus PHP (--cfs-lb), Höhe folgt dem Seitenverhältnis (width/height-Attribute reservieren den Platz) */ .cfs-start-marke .cfs-marke-logo { display: block; width: var(--cfs-lb, 170px); height: auto; max-width: 100%; margin: 0 auto 14px; filter: drop-shadow(0 0 1.5px rgba(232,247,214,.75)) drop-shadow(0 6px 14px rgba(0,0,0,.6)); } @media (max-width: 899px) { .cfs-start-marke .cfs-marke-logo { width: calc(var(--cfs-lb, 170px) * .76); } } /* 0.30.6 (Felix, 14.10.): Herstellerlogo im Kopf der Markenseite – feste Logospalte (alle Markenseiten gleich aufgebaut), feine grüne Trennlinie, Text daneben in voller Breite. Am Handy steht das Logo linksbündig über der Überschrift. */ .cfs-markenkopf { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; flex: 0 0 100%; margin: 0 0 4px; } .cfs-markenkopf-logo { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 110px; padding: 6px 30px 6px 0; border-right: 1px solid rgba(127,184,87,.3); } .cfs-markenkopf-text { padding-left: 30px; min-width: 0; } .cfs-markenkopf-text > .cf-archiv-titel { margin-top: 0 !important; } .cfs-markenkopf-text > .cf-archiv-text { max-width: none !important; margin-bottom: 0 !important; } .cfs-markenkopf .cfs-marke-logo { display: block; width: var(--cfs-lb, 170px); height: auto; max-width: 100%; filter: drop-shadow(0 0 1.5px rgba(232,247,214,.75)) drop-shadow(0 6px 14px rgba(0,0,0,.6)); } @media (max-width: 767px) { .cfs-markenkopf { grid-template-columns: minmax(0, 1fr); } .cfs-markenkopf-logo { justify-content: flex-start; min-height: 0; padding: 2px 0 14px; border-right: 0; } .cfs-markenkopf-text { padding-left: 0; } .cfs-markenkopf .cfs-marke-logo { width: calc(var(--cfs-lb, 170px) * .68); } } /* 0.30.6: Produktseite „Mehr von “ – Logo + Verweis auf die Markenseite, Kasten im Knopf-CI (dunkel, grüner Rand, 6 px Ecken) */ .cfs-produkt-marke { display: flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; margin: 14px 0 0; padding: 10px 16px 10px 14px; border: 1px solid rgba(127,184,87,.45); border-radius: 6px; background: rgba(18,23,15,.6); text-decoration: none !important; transition: border-color .15s ease-out, background-color .15s ease-out; } .cfs-produkt-marke .cfs-marke-logo { display: block; flex: 0 0 auto; width: var(--cfs-lb, 64px); height: auto; filter: drop-shadow(0 0 1px rgba(232,247,214,.7)) drop-shadow(0 3px 8px rgba(0,0,0,.55)); } .cfs-produkt-marke-text { color: #9ad072; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .cfs-produkt-marke:hover, .cfs-produkt-marke:focus-visible { border-color: #7fb857; background: rgba(127,184,87,.14); } .cfs-produkt-marke:hover .cfs-produkt-marke-text, .cfs-produkt-marke:focus-visible .cfs-produkt-marke-text { color: #c8f59d; } .cfs-produkt-marke:focus-visible { outline: 2px solid #9ad072; outline-offset: 2px; } .cfs-produkt-marke.cfs-ohne-link .cfs-produkt-marke-text { color: #b9c7b4; font-weight: 600; } .cfs-produkt-marke.cfs-ohne-link:hover { border-color: rgba(127,184,87,.45); background: rgba(18,23,15,.6); } /* dunkle Logos (schwarze Flächen, z. B. Holy Hemp): kräftigerer heller Saum, damit die Form auf #12170f lesbar bleibt */ img.cfs-marke-logo.cfs-logo-dunkel { filter: drop-shadow(0 0 1px rgba(240,250,230,.95)) drop-shadow(0 0 1px rgba(240,250,230,.9)) drop-shadow(0 0 7px rgba(232,247,214,.28)) !important; } /* 0.29.5 (Felix, 14.10., Marketing): Vorteils-Karte neu — Headline „Passt zu dir.“ statt Badge, drei kurze Vorteile in großer Schrift, Social Proof als Titel (Zahl grün), Pflichtzeile klein unter den Knöpfen. Im Kategorie-Raster kommt die Höhe allein von den Produktkarten der Reihe (contain: size); der Inhalt staucht sich per Container-Abfrage, Knöpfe unten bündig. Für dich/CannaMatch größer. */ .cfs-vk-bild { justify-content: center !important; gap: 16px; padding: 22px 20px 20px; } .cfs-vk-kopf { margin: 0 !important; color: #9ad072; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; } .cfs-vk-vorteile { margin: 0 !important; gap: 14px; } .cfs-vk-vorteile b { font-size: 17px; line-height: 1.25; text-wrap: pretty; } .cfs-vk-vorteile li .cfs-vk-ic { grid-row: auto; } .cfs-vk-ziel { --vk: url("data:image/svg+xml;utf8,"); } .cfs-vorteil-karte .cfs-vk-zahl { color: #9ad072; } .cfs-vorteil-karte .cfs-fk-titel { text-wrap: balance; display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; } /* Theme kürzt Produkttitel auf 2 Zeilen */ .cfs-vorteil-karte .cfs-vk-klein { color: rgba(185,199,180,.8); } .cfs-vorteil-karte .cfs-vk-klein a { color: inherit !important; text-decoration: underline; } .cfs-vorteil-karte .cfs-vk-klein a:hover { color: #9ad072 !important; } .cfs-vorteil-karte > .cfs-vk-klein { margin: 8px 0 0 !important; text-align: center; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-vorteil-karte { container: cfs-vk-raster / size; contain: size; align-self: stretch; height: auto !important; min-height: 0; display: flex !important; flex-direction: column; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-vorteil-karte > .product-wrapper { flex: 1 1 auto; min-height: 0; height: auto !important; display: flex; flex-direction: column; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-vorteil-karte .thumbnail-wrapper { flex: 1 1 0; min-height: 0; aspect-ratio: auto !important; overflow: hidden; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-vorteil-karte .cfs-fk-bild.cfs-vk-bild { height: 100%; aspect-ratio: auto !important; justify-content: center !important; gap: 10px; padding: 12px 14px; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-kopf { font-size: clamp(16px, 8.4cqi, 22px); } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-vorteile { gap: 9px; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-vorteile li { grid-template-columns: 22px minmax(0,1fr); column-gap: 9px; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-vorteile .cfs-vk-ic { width: 22px; height: 22px; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-vorteile b { font-size: clamp(12.5px, 6.1cqi, 16px); line-height: 1.25; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .products > section.product.cfs-vorteil-karte .meta-wrapper { flex: none; padding-bottom: 10px !important; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-fk-titel { margin-bottom: 0 !important; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-klein { margin: 6px 0 0 !important; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-knoepfe { grid-template-columns: 1fr 1fr !important; gap: 6px; margin-top: 8px; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf { min-height: 36px; padding: 5px 4px !important; border-radius: 6px !important; } body:is(.tax-product_cat, .tax-product_tag, .post-type-archive-product) .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf-gross { font-size: 11px !important; } @container cfs-vk-raster (max-height: 330px) { .cfs-vorteil-karte li.cfs-vk-guthaben { display: none !important; } } @container cfs-vk-raster (max-width: 215px) { .cfs-vorteil-karte .cfs-fk-bild.cfs-vk-bild { padding: 8px 8px 6px !important; gap: 6px !important; } .cfs-vorteil-karte .cfs-vk-kopf { font-size: 15px !important; } .cfs-vorteil-karte .cfs-vk-vorteile { gap: 5px !important; } .cfs-vorteil-karte .cfs-vk-vorteile li { grid-template-columns: 16px minmax(0,1fr) !important; column-gap: 6px !important; } .cfs-vorteil-karte .cfs-vk-vorteile .cfs-vk-ic { width: 16px !important; height: 16px !important; } .cfs-vorteil-karte .cfs-vk-vorteile b { line-height: 1.2 !important; } .cfs-vorteil-karte .cfs-fk-titel { font-size: 13px !important; line-height: 1.25 !important; } .cfs-vorteil-karte .cfs-vk-klein { font-size: 10px !important; line-height: 1.3 !important; } } /* 0.29.5 (Felix, 14.10., Variante C): Vorteilsleiste Startseite am Handy mit Kurztexten („Heute versendet“, „ab 69 €“) statt winziger Schrift; Raster bleibt, alles einzeilig, Symbol + Text mittig (links = rechts). Ab 601 px unverändert. */ .cfs-start-vorteile .cfs-vt-k { display: none; } @media (max-width: 600px) { .cfs-start-vorteile .cfs-vt-l { display: none; } .cfs-start-vorteile .cfs-vt-k { display: inline; } .cfs-start-vorteile li > b { font-size: 8.4cqi; } .cfs-start-vorteile li > span:last-child { font-size: 7.2cqi; } } @container cfs-vk-raster (max-height: 270px) { .cfs-vorteil-karte li.cfs-vk-herz { display: none !important; } } /* sehr kleine Handys (360 px): nur Hauptvorteil */ /* 0.29.7 — Konto-Menü bei jeder Breite ohne Überlappung (14.10.): richtet sich nach der Breite des Menüs selbst (Container-Abfrage), nicht nach dem Fenster — passt alles in eine Zeile, bleibt es eine Zeile; sonst 3 × 3 Raster; ganz schmal Symbol über Wort */ .woocommerce-account .woocommerce-MyAccount-navigation { container: cfs-kontonav / inline-size; } @container cfs-kontonav (max-width: 1339px) { .woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px !important; margin: 0 0 14px !important; } .woocommerce-account .woocommerce-MyAccount-navigation li, .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { min-width: 0; margin: 0 !important; padding: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation li a { height: 100%; justify-content: flex-start; padding: 15px 16px 16px !important; font-size: 15px !important; border-radius: 6px; background: rgba(127,184,87,.05); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after { left: 16px; right: auto; width: 40px; bottom: 0; } } @container cfs-kontonav (max-width: 639px) { .woocommerce-account .woocommerce-MyAccount-navigation li a { flex-direction: column; justify-content: center; gap: 7px; padding: 13px 4px 14px !important; font-size: 12.5px !important; text-align: center; } .woocommerce-account .woocommerce-MyAccount-navigation li a::before { width: 22px; height: 22px; } .woocommerce-account .woocommerce-MyAccount-navigation li a .cfs-nav-zahl { position: absolute; top: 6px; left: calc(50% + 3px); margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after { left: 50%; width: 32px; margin-left: -16px; } } @container cfs-kontonav (max-width: 349px) { .woocommerce-account .woocommerce-MyAccount-navigation li a { padding-left: 2px !important; padding-right: 2px !important; font-size: 11.5px !important; } } @container cfs-kontonav (max-width: 309px) { /* nur sehr alte Kleinst-Handys: das lange Wort darf getrennt werden */ .woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: normal; -webkit-hyphens: auto; hyphens: auto; line-height: 1.2 !important; } } /* 0.29.7 — CannaMatch (14.10.): Tipp während der 1-Sekunden-Bremse färbt den Knopf nicht grün (Rückmeldung: amberfarbener Rand + Bremse-Spruch); am Handy bleibt kein Hover-Grün nach dem Tippen stehen — grün nur, solange der Finger drauf ist */ .cfs-sw-spiel section.cfs-sw-bremse .cfs-sw-daumen:hover, .cfs-sw-spiel section.cfs-sw-bremse .cfs-sw-daumen:focus, .cfs-sw-spiel section.cfs-sw-bremse .cfs-sw-daumen:active { background: #12170f; color: #9ad072 !important; } .cfs-sw-spiel section.cfs-sw-bremse .cfs-sw-daumen:active { border-color: #f3be4a; } @media (hover: none) { .cfs-sw-k:hover, .cfs-sw-daumen:hover, .cfs-sw-k:focus, .cfs-sw-daumen:focus { background: #12170f; color: #9ad072 !important; } .cfs-sw-k:active, .cfs-sw-daumen:active { background: #7fb857; color: #12170f !important; } .cfs-sw-spiel section.cfs-sw-bremse .cfs-sw-daumen:active { background: #12170f; color: #9ad072 !important; border-color: #f3be4a; } } /* 0.29.7 — CannaMatch am Handy (14.10.): Kopfzeile über den Pfeil eingeblendet = sofort mit Glas-Hintergrund und oben angeheftet, Spielkopf rutscht darunter; der Umschaltknopf bleibt in beiden Zuständen derselbe (nur der Pfeil dreht sich) */ @media (max-width: 767px) { body.cfs-swipe-seite.cfs-sw-kopf-voll header.ts-header .header-sticky { position: fixed !important; top: 0; left: 0; right: 0; z-index: 993; background: linear-gradient(115deg, #0b3b2c 0%, var(--cf-oliv-tief) 55%, var(--cf-grund) 100%) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 14px rgba(0,0,0,.45); } body.cfs-swipe-seite.cfs-sw-kopf-voll #main-content { padding-top: calc(var(--cfs-kopf-h, 148px) + 60px) !important; } body.cfs-swipe-seite.cfs-sw-kopf-voll .cfs-sw-kopf { position: fixed; top: var(--cfs-kopf-h, 148px); left: 0; right: 0; margin: 0; z-index: 992; } .cfs-sw-gross, .cfs-sw-gross:hover, .cfs-sw-gross:focus, .cfs-sw-gross:active { background: none !important; box-shadow: none !important; outline: 0; } .cfs-sw-gross::before { transition: transform .2s ease-out; } } @media (max-width: 600px) { .cfs-flug.cfs-flug-text { width: max-content; max-width: 86vw; } } /* 0.29.7: Sprüche am Handy in voller Breite statt schmaler Säule */ /* 0.29.7b — Vorteilskarte + Herz (14.10.) — Felix: Headline „Immer bessere Produkte.“, überall EIN Herz (das Wunschlisten-Herz aus dem Kopf, Theme-Schrift tb-icon, Zeichen e97c, hier als Maske aus derselben Glyphe), Konto-Vorteil mit dem Konto-Symbol aus dem Kopf, größere Knopfschrift, Social-Proof-Zeile immer einzeilig (Schrift passt sich der Kartenbreite an) */ :root { --cfs-wl-herz: url("data:image/svg+xml;utf8,"); --cfs-kopf-konto: url("data:image/svg+xml;utf8,"); } .cfs-vk-herz { --vk: var(--cfs-wl-herz); } .cfs-vk-guthaben { --vk: var(--cfs-kopf-konto); } .cfs-herz-familie { -webkit-mask: var(--cfs-wl-herz) center / contain no-repeat !important; mask: var(--cfs-wl-herz) center / contain no-repeat !important; } .cfs-badge.cfs-herz::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .35em; vertical-align: -.2em; background: #9ad072; -webkit-mask: var(--cfs-wl-herz) center / contain no-repeat; mask: var(--cfs-wl-herz) center / contain no-repeat; } .cfs-vorteil-karte .cfs-vk-bild, .cfs-vorteil-karte .meta-wrapper, .cfs-vorteil-karte .cfs-vk-knoepfe { container-type: inline-size; } .cfs-vorteil-karte .cfs-vk-kopf { white-space: nowrap; font-size: min(24px, calc((100cqi - 40px) / 11.6)) !important; } .cfs-sw .products > section.product.cfs-freunde-karte.cfs-vorteil-karte .meta-wrapper .cfs-fk-titel, body .products > section.product.cfs-vorteil-karte .meta-wrapper h3.cfs-fk-titel { white-space: nowrap !important; overflow: visible !important; font-size: clamp(8.5px, calc((100cqi - 1px) / 23.4), 15.9px) !important; } /* Satz misst 23,3 em */ .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf { padding: 0 4px !important; } .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf-gross { font-size: clamp(11.5px, calc((50cqi - 13px) / 10.6), 13.5px) !important; letter-spacing: .02em !important; } @container (max-width: 264px) { .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf-gross { white-space: normal !important; line-height: 1.1 !important; } } /* schmale Karten: zwei Zeilen statt Mini-Schrift */ .cfs-sw-spiel .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf { height: 52px; } .cfs-sw-spiel .cfs-vorteil-karte .cfs-vk-knoepfe .cfla-knopf-gross { font-size: clamp(11.5px, calc((50cqi - 13px) / 10.6), 14px) !important; } @media (max-width: 379px) { .cfs-sw-mini .cfs-sw-lang { display: none; } .cfs-sw-mini .cfs-sw-kurz { display: inline; } } /* 0.29.7: Mini-CannaMatch auf Kleinst-Handys „Mehr“/„Weniger“ statt Überlauf */ /* ===== Block A (Felix, 14.10.2026): CannaMatch mobil, Wisch-Stempel, Startseite „Für dich“ ===== */ /* A3/A4: Handy und Touch-Tablets — im Spiel (CannaMatch + Startseiten-CannaMatch) keine Mehr/Weniger-Knöpfe, nur Wischen. Die Vorteils-Karte behält ihre eigenen Knöpfe. Desktop unverändert. */ @media (max-width: 767px), (max-width: 1024px) and (hover: none) { .cfs-sw-spiel section.cfs-sw-karte:not(.cfs-vorteil-karte) > .cfs-sw-steuer { display: none !important; } .cfs-sw-spiel .cfs-sw-hinweis { display: none !important; } } /* A5: Wisch-Stempel voll deckend im Vordergrund (über dem Wunschlisten-Herz), mit Glow; schon nach halbem Weg ganz sichtbar */ .cfs-sw-spiel .cfs-sw-stempel { z-index: 60; top: 16px; padding: 7px 14px; border-width: 2px; background: #12170f; font-size: 19px; line-height: 1.15; white-space: nowrap; } .cfs-sw-spiel .cfs-sw-stempel-ja { opacity: min(1, calc(var(--cfs-sw-ja, 0) * 2)); box-shadow: 0 0 18px rgba(154,208,114,.85), 0 0 2px rgba(154,208,114,.9) inset, 0 8px 20px rgba(0,0,0,.55); text-shadow: 0 0 10px rgba(154,208,114,.55); } .cfs-sw-spiel .cfs-sw-stempel-nein { opacity: min(1, calc(var(--cfs-sw-nein, 0) * 2)); color: #fff; border-color: #fff; box-shadow: 0 0 18px rgba(255,255,255,.5), 0 8px 20px rgba(0,0,0,.55); text-shadow: 0 0 10px rgba(255,255,255,.4); } .cfs-sw-spiel section.cfs-sw-stupst .cfs-sw-stempel { transition: opacity .18s ease-out; } /* A7: Startseite „Für dich“ — 6 Produkte: Handy 3 Reihen à 2, Tablet 2 à 3, ab 1024 px eine Reihe à 5 (die sechste ausgeblendet) */ @media (min-width: 1024px) { .cfs-start-fuerdich .products > section.product:nth-child(n+6) { display: none !important; } } .cfs-start-fuerdich .products > section.product { display: flex !important; flex-direction: column; } .cfs-start-fuerdich .products > section.product > .product-wrapper { flex: 1 1 auto; } .cfs-start-fuerdich .cfs-sw-steuer { margin-top: 10px; gap: 8px; } .cfs-start-fuerdich .cfs-sw-daumen { height: 40px; padding: 0 6px; font-size: 12px; } .cfs-fd-karte.cfs-fd-ja .cfs-sw-daumen.cfs-sw-ja { background: #7fb857; color: #12170f !important; } .cfs-fd-karte.cfs-fd-nein .cfs-sw-daumen.cfs-sw-nein { background: rgba(255,255,255,.12); color: rgba(255,255,255,.97) !important; border-color: rgba(255,255,255,.4); } .cfs-start-fuerdich .cfs-start-unter { text-wrap: pretty; } /* A7: Banner unter „Für dich“ — motiviert zur Seite „Für dich“, ein Knopf */ a.cfs-fd-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; margin: 18px 0 36px; padding: 22px 26px; border: 1px solid rgba(127,184,87,.55); border-radius: 14px; background: linear-gradient(135deg, rgba(127,184,87,.16), rgba(18,23,15,.96) 60%); box-shadow: 0 0 24px rgba(127,184,87,.12); text-decoration: none !important; color: inherit; } .cfs-fd-banner-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cfs-fd-banner-text b { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.25; font-weight: 800; color: rgba(255,255,255,.97); text-wrap: balance; } .cfs-fd-banner-text > span:last-child { color: #b9c7b4; font-size: 15px; line-height: 1.5; text-wrap: pretty; } .cfs-fd-banner-knopf { flex: none; white-space: nowrap; } a.cfs-fd-banner:hover .cfs-fd-banner-knopf { background: #7fb857 !important; color: #12170f !important; } @media (max-width: 767px) { a.cfs-fd-banner { flex-direction: column; align-items: stretch; padding: 18px 16px; margin: 14px 0 28px; } .cfs-fd-banner-knopf { text-align: center; } } /* A4: Startseiten-CannaMatch — Titel bricht an der Satzgrenze um („Mehr oder weniger?“ | „Zeig, was dir gefällt.“), Text fließt */ .cfs-cm-mini .cfs-cm-titel { text-wrap: balance; } .cfs-cm-mini .cfs-cm-unter { text-wrap: pretty; } .cfs-start-fuerdich .cfs-sw-daumen { gap: 6px; } .cfs-start-fuerdich .cfs-sw-daumen::before { flex: none; width: 16px; height: 16px; } /* Daumen-Symbol nie zusammengedrückt */ @media (max-width: 767px) { .cfs-start-fuerdich .cfs-sw-daumen { font-size: 11px; padding: 0 4px; letter-spacing: .02em; } .cfs-start-fuerdich .cfs-sw-steuer { gap: 6px; } } /* 5e (14.10.2026): Social-Proof-Zeile der Vorteils-Karte bricht nie um und bleibt gut lesbar — „Über 4.000 sind schon dabei“ (misst 14,2 em), in schmalen Karten die Kurzform „Über 4.000 dabei“ (9,2 em) statt Mini-Schrift */ .cfs-vorteil-karte .cfs-vk-satz { white-space: nowrap; } .cfs-vorteil-karte .cfs-vk-kurz { display: none; } .cfs-sw .products > section.product.cfs-freunde-karte.cfs-vorteil-karte .meta-wrapper .cfs-fk-titel:has(.cfs-vk-satz), body .products > section.product.cfs-vorteil-karte .meta-wrapper h3.cfs-fk-titel:has(.cfs-vk-satz) { font-size: clamp(12px, calc((100cqi - 2px) / 14.6), 17px) !important; } @container (max-width: 204px) { .cfs-vorteil-karte .cfs-vk-lang { display: none; } .cfs-vorteil-karte .cfs-vk-kurz { display: inline; } .cfs-sw .products > section.product.cfs-freunde-karte.cfs-vorteil-karte .meta-wrapper .cfs-fk-titel:has(.cfs-vk-satz), body .products > section.product.cfs-vorteil-karte .meta-wrapper h3.cfs-fk-titel:has(.cfs-vk-satz) { font-size: clamp(12px, calc((100cqi - 2px) / 9.6), 17px) !important; } } /* ===== Block B (Felix, 14.10.2026) ===== */ /* B1: Handy — Ernte-Meter nutzt die Breite links/rechts (Menü-Knopf dichter am Rand, kaum Rand rechts) */ @media (max-width: 767px) { .cfs-kopfleiste-innen { padding-left: 6px !important; padding-right: 6px !important; } .cfs-menue-knopf { left: 6px !important; } .cfs-kopfleiste .cfs-ernte-leiste { margin-left: 42px !important; margin-right: 10px !important; } } /* B2: Lupe im Kopf so dezent wie der Rand von „Gratisversand“ */ body header.ts-header .header-middle .search-button.search-icon { border-color: rgba(127,184,87,.55) !important; background: rgba(127,184,87,.08) !important; border-radius: 6px !important; } /* B4: Wunschlisten-Herz auf allen Produktkarten — etwas tiefer, grüner Grund zu 70 % durchsichtig, Herz hell mit dunklem Schein */ .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist { background: rgba(127,184,87,.3) !important; border: 1px solid rgba(154,208,114,.55) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 2px 8px rgba(0,0,0,.25) !important; top: 22px !important; } .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist a::before { color: rgba(255,255,255,.97) !important; text-shadow: 0 1px 2px rgba(10,15,7,.75), 0 0 6px rgba(10,15,7,.45); } .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist:hover { background: rgba(127,184,87,.55) !important; } /* 15.10. (Felix): am Handy genauso tief wie die Hover-Gruppe am Desktop (fix2: clamp(44px, 18cqi, 140px), CannaMatch fest 54 px) – unter den Schriftzügen oben im Bild */ @media (max-width: 767px) { .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist { top: clamp(44px, 18cqi, 140px) !important; } .cfs-sw-spiel .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist { top: 54px !important; } } /* B5: Badges auf dem Bild — nie Umbruch, nie aus dem Bild: Schrift passt sich der Kartenbreite an, schmale Karten zeigen die Kurzform */ .product-wrapper .thumbnail-wrapper { container-type: inline-size; } .cfs-sw-spiel .product-wrapper .thumbnail-wrapper { container-type: normal; } /* CannaMatch-Karten richten ihre Breite nach dem Bild (einpassen in swipe.js) — dort keine Größen-Eingrenzung */ .cfs-badge-kachel { max-width: calc(100% - 20px); overflow: hidden; text-overflow: clip; font-size: min(11px, 6.4cqi) !important; } .cfs-badge .cfs-b-kurz { display: none; } @container (max-width: 249px) { .cfs-badge-kachel .cfs-b-lang { display: none; } .cfs-badge-kachel .cfs-b-kurz { display: inline; } } /* B5: Produkt des Monats — Knopf am Handy so breit wie der Kasten */ @media (max-width: 767px) { .cfs-start-steckbrief .cfs-sb-knopf { display: flex !important; width: 100% !important; justify-content: center; box-sizing: border-box; } } /* B6: „Beliebt“ (Kategorie mit Text) — Knopf so breit wie der Textkasten; am Handy zwei Karten nebeneinander wie in allen Reihen (die dritte ab 600 px) */ .cfs-start-split .cfs-split-text .cfs-knopf-plastisch { display: flex !important; width: 100% !important; justify-content: center; text-align: center; box-sizing: border-box; } @media (max-width: 899px) { .cfs-start-split .cfs-split-text { margin-bottom: 4px; } } @media (max-width: 599px) { .cfs-split-karten .products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .cfs-split-karten .products > section.product:nth-child(n+3) { display: none !important; } } /* B7: Karussells (Bundles …) — alle Karten gleich hoch, Knöpfe unten bündig */ .cfs-start-karussell .products > section.product { display: flex !important; flex-direction: column; height: auto !important; } .cfs-start-karussell .products > section.product > .product-wrapper { flex: 1 1 auto; display: flex !important; flex-direction: column; } .cfs-start-karussell .products > section.product .meta-wrapper { flex: 1 1 auto; display: flex !important; flex-direction: column; } .cfs-start-karussell .products > section.product .meta-wrapper > .product-group-button-meta { margin-top: auto !important; } /* B8: Vorteilsleiste — Tablet ohne Lücke (3 + 2), Handy in Zweiergruppen zwischen den Bausteinen, das einzelne Kästchen breit */ .cfs-start-vorteile.cfs-vt-mobil { display: none; } @media (min-width: 768px) and (max-width: 1199px) { .cfs-start-vorteile:not(.cfs-vt-mobil) ul { grid-template-columns: repeat(6, minmax(0,1fr)) !important; } .cfs-start-vorteile:not(.cfs-vt-mobil) li { grid-column: span 2; } .cfs-start-vorteile:not(.cfs-vt-mobil) li:nth-child(n+4) { grid-column: span 3; } .cfs-start-vorteile:not(.cfs-vt-mobil) li:nth-child(n+4) > b { font-size: 4.13cqi; } .cfs-start-vorteile:not(.cfs-vt-mobil) li:nth-child(n+4) > span:last-child { font-size: 3.43cqi; } .cfs-start-vorteile:not(.cfs-vt-mobil) li:nth-child(n+4) .cfs-vt-ic { width: 9.33cqi; height: 9.33cqi; margin-right: 3.33cqi; } } /* breite Kästchen: gleiche Schrift wie die Reihe darüber */ @media (max-width: 767px) { .cfs-startseite .cfs-start-vorteile:not(.cfs-vt-mobil) { display: none !important; } .cfs-startseite .cfs-start-vorteile.cfs-vt-mobil { display: block; } .cfs-start-vorteile.cfs-vt-einzeln ul { grid-template-columns: minmax(0,1fr) !important; } .cfs-start-vorteile.cfs-vt-einzeln li > b { font-size: min(8.4cqi, 19px); } .cfs-start-vorteile.cfs-vt-einzeln li > span:last-child { font-size: min(7.2cqi, 15px); } .cfs-start-vorteile.cfs-vt-einzeln .cfs-vt-ic { width: min(14cqi, 34px); height: min(14cqi, 34px); margin-right: min(5cqi, 14px); } .cfs-start-vorteile.cfs-vt-einzeln li { min-height: 76px; } } /* B11: Footer — Spalte „Mein Konto“ */ .footer-container .cf-footer h5 a.cf-footer-konto-titel { color: inherit !important; } .footer-container .cf-footer h5 a.cf-footer-konto-titel:hover { color: #9ad072 !important; } .cf-footer-konto-text { margin: 0 0 8px !important; font-size: 13px; line-height: 1.5; color: #b9c7b4; text-wrap: pretty; } /* B12: Kategorie-Kacheln mit Handy-Fassung — am Handy quadratisch (größere Schrift im Bild) */ .cfs-kachel-kat-bild picture { display: block; } @media (max-width: 480px) { .cfs-kachel-kat-bild.cfs-kachel-mobil img { aspect-ratio: 1 / 1; } } /* Block B: Startseiten-Reihen mit fünf Karten ohne Lücke im Raster — Handy 2 × 2, Tablet eine volle Reihe à 3 (Desktop alle 5) */ @media (max-width: 480px) { .cfs-startseite section.cfs-start-reihe.cfs-start-reihe:not(.cfs-start-podest):not(.cfs-start-karussell):not(.cfs-start-fuerdich) .products > section.product:nth-child(5):last-child { display: none !important; } } @media (min-width: 481px) and (max-width: 769px) { .cfs-startseite section.cfs-start-reihe.cfs-start-reihe:not(.cfs-start-podest):not(.cfs-start-karussell):not(.cfs-start-fuerdich) .products:has(> section.product:nth-child(5):last-child) > section.product:nth-child(n+4) { display: none !important; } } /* ===== Block C (14.10.) ===== */ /* C1 – 15.10. auf den gebauten Stand zurück (Felix: keine neue Kartenform): Vorschläge bleiben die Zeilen-Karte von 05.10. (Bild links, Name, Preis + „Dazulegen“ rechts). Felix' C1-Wunsch nur innerhalb dieser Form: ab 768 px Bild etwas größer und oben bündig mit dem Namen, Schrift und Knopf etwas größer. Handy unverändert wie vorher. */ @media (min-width: 768px) { .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) { grid-template-columns: 96px minmax(0, 1fr) auto auto !important; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__bild img { width: 96px; height: 96px; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__name { font-size: 16px; padding-top: 0; margin-top: -.2em; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__preis { font-size: 16px; } .cf-auffuellen__posten.cfs-karte:not(.cfla-konto-posten) .cf-auffuellen__knopf.button { padding: 10px 18px !important; font-size: 14px !important; } } /* „Mehr anzeigen“ / „Mehr laden“ unter den Vorschlägen größer */ .cf-auffuellen .cfs-mehr-zeile { margin-top: 16px !important; } .cf-auffuellen .cfs-mehr-zeile .button.cfs-mehr { min-height: 48px; padding: 14px 36px !important; font-size: 15px !important; } /* C5: leere Wunschliste — angeheftete Hinweiskarte + vier Kategorie-Karten (Handy 2 × 2), Herzen mit pulsierendem Schein (Felix' ausdrücklicher Wunsch) */ .cfs-wl-leer-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 6px 0 10px; } .cfs-wl-leer-raster > .cfs-wl-hinweis, .cfs-wl-leer-raster > .cfs-suchkarten, .cfs-wl-leer-raster .cfs-suchkarten > .products { margin-top: 0 !important; margin-bottom: 0 !important; } .cfs-wl-leer-raster > .cfs-suchkarten, .cfs-wl-leer-raster .cfs-suchkarten > .products { padding-bottom: 0 !important; } .cfs-wl-leer-raster .woocommerce.main-products.grid.cfs-suchkarten { margin: 0 !important; } .cfs-wl-leer-raster .cfs-suchkarten .products { --ts-columns: 2 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin: 0 !important; } .cfs-wl-hinweis { position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 18px 18px 18px 16px; border: 1px solid rgba(154,208,114,.6); border-radius: 12px; background: linear-gradient(160deg, rgba(127,184,87,.16) 0%, rgba(127,184,87,.04) 60%), #12170f; box-shadow: 0 10px 26px rgba(0,0,0,.35); } .cfs-wl-hinweis p { margin: 0 !important; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.97); text-wrap: pretty; } .cfs-wl-hinweis-herz { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #9ad072; background: rgba(127,184,87,.14); border: 1px solid rgba(154,208,114,.55); } /* Zeiger zur ersten Karte: Handy/Tablet nach unten (erste Karte steht links unter der Hinweiskarte) */ .cfs-wl-hinweis::after { content: ""; position: absolute; left: 26%; bottom: -9px; width: 16px; height: 16px; background: #141c11; border-right: 1px solid rgba(154,208,114,.6); border-bottom: 1px solid rgba(154,208,114,.6); transform: translateX(-50%) rotate(45deg); } @media (min-width: 640px) { .cfs-wl-leer-raster .cfs-suchkarten .products { --ts-columns: 4 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; } .cfs-wl-hinweis::after { left: 12%; } } @media (min-width: 1200px) { .cfs-wl-leer-raster { grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: stretch; } .cfs-wl-hinweis { flex-direction: column; justify-content: center; gap: 14px; padding: 22px 24px; } .cfs-wl-hinweis p { font-size: 15.5px; } .cfs-wl-hinweis::after { left: auto; right: -9px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); } } .cfs-wl-leer .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist { display: block !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; } /* Theme zeigt das Herz sonst nur beim Darüberfahren */ .cfs-wl-leer .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: cfs-herz-puls 1.9s ease-out infinite; } .cfs-wl-leer .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist a::before { animation: cfs-herz-schein 1.9s ease-in-out infinite; } @keyframes cfs-herz-puls { 0% { box-shadow: 0 0 0 0 rgba(154,208,114,.75), 0 0 10px 2px rgba(154,208,114,.45); } 70% { box-shadow: 0 0 0 12px rgba(154,208,114,0), 0 0 18px 6px rgba(154,208,114,0); } 100% { box-shadow: 0 0 0 0 rgba(154,208,114,0), 0 0 0 0 rgba(154,208,114,0); } } @keyframes cfs-herz-schein { 0%, 100% { filter: drop-shadow(0 0 0 rgba(154,208,114,0)); } 50% { filter: drop-shadow(0 0 6px rgba(154,208,114,.95)); } } @media (prefers-reduced-motion: reduce) { .cfs-wl-leer .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist::after { animation: none; box-shadow: 0 0 10px 2px rgba(154,208,114,.45); } .cfs-wl-leer .product .product-wrapper .thumbnail-wrapper .product-group-button > div.wishlist a::before { animation: none; } } /* fix2 Punkt 10 (Felix, 14.10.): „alle Herzsymbole sollen gleich sein" — jedes Herz außerhalb der Wunschliste nutzt dieselbe Glyphe wie das Wunschlisten-Herz (Theme-Schrift tb-icon e97c als Maske --cfs-wl-herz): Vorteilsleiste, Einschub „Sag uns, was du magst", Konto-Kachel „Vorlieben", Wunschliste teilen, Hinweis der leeren Wunschliste (Vorteilskarte, Konto-Gruß und Badge nutzen sie schon seit 0.29.7b) */ .cfs-vt-herz { --vt: var(--cfs-wl-herz); } .cfs-fk-symbol.cfs-es-herz { -webkit-mask-image: var(--cfs-wl-herz); mask-image: var(--cfs-wl-herz); } .cfs-kachel-vorlieben { --cfs-ik: var(--cfs-wl-herz); } .cfs-wl-ic::after { -webkit-mask: var(--cfs-wl-herz) center / contain no-repeat !important; mask: var(--cfs-wl-herz) center / contain no-repeat !important; } .cfs-herz-maske { display: block; width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--cfs-wl-herz) center / contain no-repeat; mask: var(--cfs-wl-herz) center / contain no-repeat; } /* fix2 (Felix, 14.10.): B4 galt nur fürs Handy. Desktop/Tablet (ab 768 px): alle Hover-Symbole der Produktkarten (Herz, Schnellansicht, Warenkorb) in derselben Glas-Optik wie das Herz (grüner Grund zu 70 % durchsichtig), gleiche Abstände (38 px Knopf + 6 px Luft), die ganze Gruppe gemeinsam tiefer — unter den Schriftzügen oben im Produktbild (Abstand wächst mit der Bildbreite). Handy unverändert. */ @media (min-width: 768px) { .product .product-wrapper .thumbnail-wrapper .product-group-button { --cfs-hb-oben: clamp(44px, 18cqi, 140px); } .product .product-wrapper .thumbnail-wrapper .product-group-button > div { background: rgba(127,184,87,.3) !important; border: 1px solid rgba(154,208,114,.55) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 2px 8px rgba(0,0,0,.25) !important; } .product .product-wrapper .thumbnail-wrapper .product-group-button > div > a { background: transparent !important; } .product .product-wrapper .thumbnail-wrapper .product-group-button > div > a::before { color: rgba(255,255,255,.97) !important; text-shadow: 0 1px 2px rgba(10,15,7,.75), 0 0 6px rgba(10,15,7,.45); } .product .product-wrapper .thumbnail-wrapper .product-group-button > div:hover { background: rgba(127,184,87,.55) !important; } .product .product-wrapper .thumbnail-wrapper .product-group-button > div:nth-child(1) { top: var(--cfs-hb-oben) !important; } .product .product-wrapper .thumbnail-wrapper .product-group-button > div:nth-child(2) { top: calc(var(--cfs-hb-oben) + 44px) !important; } .product .product-wrapper .thumbnail-wrapper .product-group-button > div:nth-child(3) { top: calc(var(--cfs-hb-oben) + 88px) !important; } .product .product-wrapper .thumbnail-wrapper .product-group-button > div:nth-child(4) { top: calc(var(--cfs-hb-oben) + 132px) !important; } } /* fix2 C2: Konto ohne gespeicherte Vorlieben — „Das könnte dir gefallen" mit kurzem Hinweis darunter (gedämpfter Hinweistext, fließt frei) */ .cfs-vorlieben-treffer .cfs-vorlieben-hinweis { margin: -6px 0 14px !important; font-size: 14.5px; line-height: 1.5; color: #b9c7b4; text-wrap: pretty; } @media (min-width: 768px) { .cfs-sw-spiel .product .product-wrapper .thumbnail-wrapper .product-group-button { --cfs-hb-oben: 54px; } } /* CannaMatch-Karten haben keine Größen-Eingrenzung (B5) → fester Wert wie bei 300 px Bildbreite */ /* ===== 15.10. Wiederherstellung VPS-Stand + Felix-Punkte 9/11 ===== */ /* 9: Benachrichtigungen – „Neu“ im Badge-Stil der Produktkarten (.cfs-badge), fest links neben dem Knopf; Zeitangabe darüber; alle Knöpfe gleich breit → Badges und Knöpfe stehen in jeder Zeile exakt untereinander, egal wie lang „gerade eben“ / „vor 8 Stunden“ ist. */ .cfs-st-rechts .cfs-st-wann::before { content: none !important; } .cfs-st-aktion { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .cfs-st-aktion .cfs-st-knopf, .cfs-st-aktion .cfs-st-knopf-leer { width: 150px; min-width: 0 !important; box-sizing: border-box; white-space: nowrap; } .cfs-st-aktion .cfs-st-neu-badge { flex: none; padding: 5px 8px; font-size: 10.5px; } .cfs-st-wird-gelesen .cfs-st-neu-badge { visibility: hidden; } @media (max-width: 600px) { .cfs-st-aktion .cfs-st-knopf { width: 140px; margin-top: 0; } } /* 11 (Felix): Freunde-werben-Baustein in Benachrichtigungen/Konto – Schritt-Texte und Zahlen groß, Kästen gefüllt, Überschrift größer; Knopf „10 € kostenlos verschenken“ als vierter Kasten in derselben Reihe (wie bisher), Text in Knopfgröße. */ .cfs-fk-stream .cfs-fk-titel, .cfs-fk-konto .cfs-fk-titel, .cfs-fk-mitte .cfs-fk-titel { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 12px !important; } .cfs-fk-stream .cfs-fk-schritte li, .cfs-fk-konto .cfs-fk-schritte li { justify-content: center !important; padding: 14px 14px 14px 52px !important; gap: 3px; min-height: 72px; box-sizing: border-box; } .cfs-fk-stream .cfs-fk-schritte li::before, .cfs-fk-konto .cfs-fk-schritte li::before { width: 28px; height: 28px; line-height: 28px; font-size: 15px; left: 13px; top: 50%; transform: translateY(-50%); } .cfs-fk-stream .cfs-fk-schritte li b, .cfs-fk-konto .cfs-fk-schritte li b { font-size: 17px; line-height: 1.25; } .cfs-fk-stream .cfs-fk-schritte li span, .cfs-fk-konto .cfs-fk-schritte li span { font-size: 14px; line-height: 1.35; } .cfs-fk-reihe > .cfs-fk-inhalt > .cfla-knopf.cfs-fk-knopf { min-height: 72px; padding: 8px 12px !important; } .cfs-fk-stream .cfla-knopf.cfs-fk-knopf .cfla-knopf-gross, .cfs-fk-konto .cfla-knopf.cfs-fk-knopf .cfla-knopf-gross { font-size: 15.5px; line-height: 1.25; text-align: center; white-space: normal; text-wrap: balance; } /* F5: Karte im Produkt-Raster (Kategorie, Für dich, CannaMatch) – „10 € kostenlos verschenken“ passt in den Knopf (darf zweizeilig werden), Knopf gleich hoch wie die übrigen Kartenknöpfe */ .products section.product.cfs-freunde-karte .cfla-knopf.cfs-fk-knopf { min-height: 40px; padding: 6px 10px !important; justify-content: center; align-items: center; } .products section.product.cfs-freunde-karte .cfla-knopf .cfla-knopf-gross { white-space: normal !important; text-align: center; text-wrap: balance; font-size: clamp(10.5px, 5.2cqi, 13px); line-height: 1.2; } /* =================================================================================================================== 0.31.0 (Felix-Liste 14./15.10., Seller-Punkte F/G/I/J) =================================================================================================================== */ /* F8: EIN Glow für den ganzen Shop (CI-Wert, siehe Skill cannafree → CI-PFLICHT). --cf-glow = ruhiger Schein für Flächen/Kästen, --cf-glow-stark = einmaliges Aufleuchten (Hinweis, „schau hier“) */ :root { --cf-glow: 0 0 22px rgba(154,208,114,.28); --cf-glow-stark: 0 0 30px rgba(154,208,114,.6), 0 0 0 1px rgba(154,208,114,.55); } /* F3/F9: Trusted-Shops-Siegel nicht mehr über allem (es setzte z-index 2147483647): unter fliegenden Texten, Lernbalken, Schnellansicht, Menüs und Seitenleisten. Lage und Abstände bleiben, wie das Siegel sie selbst setzt. */ div[id^="trustbadge-container"] { z-index: 980 !important; } /* F4: CannaMatch / Für dich – der feste Lernbalken unten verdeckt den Fuß nicht mehr (Platz in Balkenhöhe unter der Seite) */ body.cfs-swipe-seite:has(.cfs-lern) { padding-bottom: 34px !important; } /* F5: Karten „10 € + 10 € geschenkt“ leuchten einmal grün auf (Klasse setzt seller.js, sobald die Karte im Blick ist) */ @keyframes cfs-glut { 0% { box-shadow: 0 0 0 0 rgba(154,208,114,0); } 35% { box-shadow: var(--cf-glow-stark); } 100% { box-shadow: 0 0 0 0 rgba(154,208,114,0); } } /* Schein als eigene Ebene über der Karte (der Kartenrahmen setzt seinen Schatten mit !important, eine Animation käme dort nicht durch) */ .cfs-freunde-karte.cfs-glueht { position: relative; } .cfs-freunde-karte.cfs-glueht::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: 10px; pointer-events: none; animation: cfs-glut 1.9s ease-out 1 both; } /* F7: Marke im Trend – Logo mittig im oberen Feld, Text direkt über dem Knopf „ Produkte“, Knopf unten bündig mit den Karten. Handy/Tablet: Kopf, Karten, Knopf untereinander. */ .cfs-start-marke { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "kopf karten" "knopf karten"; align-items: stretch !important; column-gap: 24px; row-gap: 16px !important; } .cfs-start-marke > .cfs-marke-kopf { grid-area: kopf; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .cfs-start-marke > :not(.cfs-marke-kopf):not(.cfs-marke-knopf) { grid-area: karten; min-width: 0; align-self: end; } .cfs-start-marke .cfs-marke-logofeld { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 90px; } .cfs-start-marke .cfs-marke-logofeld .cfs-marke-logo { margin: 0 auto !important; } .cfs-start-marke .cfs-marke-textblock { margin-top: 14px; } .cfs-start-marke:not(.cfs-mit-logo) .cfs-marke-textblock { margin-top: auto; } .cfs-start-marke .cfs-marke-unter { margin-bottom: 0 !important; } .cfs-start-marke > .cfs-marke-knopf { grid-area: knopf; align-self: end; display: flex !important; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; margin: 0 !important; text-align: center; white-space: normal; text-wrap: balance; } @media (max-width: 899px) { .cfs-start-marke { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto; grid-template-areas: "kopf" "karten" "knopf"; } .cfs-start-marke .cfs-marke-logofeld { min-height: 0; } } /* F8: Vorteilskommunikation am Handy (Zweier + großer Einer) – deckender, mit dem einheitlichen Glow */ @media (max-width: 767px) { .cfs-startseite .cfs-start-vorteile.cfs-vt-mobil li { background: rgba(18,23,15,.9) !important; border-color: rgba(127,184,87,.6) !important; box-shadow: var(--cf-glow); } } /* F1: Banner „Neu: CannaMatch“ – Rechner (wo CannaMatch Knöpfe hat): „Weniger“/„Mehr“ unter der mittleren Karte, keine Wisch-Pfeile oben. Handy/Touch: keine Knöpfe, nur die Wisch-Andeutung (Pfeile links/rechts über dem Stapel, die mittlere Karte wackelt einmal). */ .cfs-cm-teaser .cfs-cm-rechts { display: flex !important; flex-direction: column; align-items: center; } .cfs-cm-teaser .cfs-cm-stapel { display: block !important; position: relative; width: 300px; height: 190px; text-decoration: none !important; } .cfs-cm-teaser .cfs-cm-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 220px; margin-top: 12px; } .cfs-cm-teaser .cfs-cm-knoepfe .cfs-sw-daumen { height: 40px; padding: 0 8px; text-decoration: none !important; } .cfs-cm-teaser .cfs-cm-knoepfe .cfs-sw-daumen:hover { background: #7fb857; color: #12170f !important; } .cfs-cm-teaser .cfs-cm-pfeile { display: none; } .cfs-cm-pfeil { transition: filter .25s ease-out, color .25s ease-out; } .cfs-cm-wink .cfs-cm-pfeil { filter: drop-shadow(0 0 6px rgba(243,190,74,.85)); } @media (max-width: 767px), (max-width: 1024px) and (hover: none) { .cfs-cm-teaser .cfs-cm-knoepfe { display: none; } .cfs-cm-teaser .cfs-cm-pfeile { display: flex; width: 300px; margin-bottom: 6px; } } @media (max-width: 991px) { .cfs-cm-teaser .cfs-cm-rechts { margin-top: 8px; } } @media (max-width: 359px) { .cfs-cm-teaser .cfs-cm-stapel, .cfs-cm-teaser .cfs-cm-pfeile { transform: scale(.88); transform-origin: top center; } } /* G1: Produktseite – Markenbox klein und rechtsbündig neben „Auf meine Wunschliste“ / „Produkt enthält …“ (seller.js setzt Rahmen + Höhe): oben bündig mit der Wunschlisten-Zeile, unten bündig mit der Zeile „Produkt enthält … · Lieferzeit“; beide Zeilen halten Abstand */ .cfs-wl-zeile { position: relative; } .cfs-wl-zeile-links { padding-right: var(--cfs-mb-platz, 0px); min-width: 0; } .single-product .summary .cfs-wl-zeile ~ .cfs-unten { padding-right: var(--cfs-mb-platz, 0px) !important; box-sizing: border-box; } .cfs-wl-zeile > .cfs-produkt-marke { position: absolute; right: 0; top: 0; z-index: 1; margin: 0 !important; gap: 10px; padding: 4px 12px 4px 8px; box-sizing: border-box; } .cfs-wl-zeile > .cfs-produkt-marke .cfs-marke-logo { width: calc(var(--cfs-lb, 64px) * .62); max-height: 34px; object-fit: contain; } .cfs-wl-zeile > .cfs-produkt-marke .cfs-produkt-marke-text { font-size: 13px; } .cfs-wl-zeile .wishlist, .cfs-wl-zeile .wishlist a { white-space: nowrap; } @media (max-width: 479px) { .cfs-wl-zeile > .cfs-produkt-marke { gap: 6px !important; padding: 3px 8px 3px 5px !important; } .cfs-wl-zeile > .cfs-produkt-marke .cfs-marke-logo { width: 30px !important; } .cfs-wl-zeile > .cfs-produkt-marke .cfs-produkt-marke-text { font-size: 11px !important; } .cfs-wl-zeile > .cfs-produkt-marke .cfs-pfeil { width: 10px; height: 10px; margin: 0 0 0 2px; } } @media (max-width: 1023px) { .cfs-wl-zeile > .cfs-produkt-marke { gap: 8px; padding: 4px 10px 4px 6px; } .cfs-wl-zeile > .cfs-produkt-marke .cfs-marke-logo { width: calc(var(--cfs-lb, 64px) * .5); } .cfs-wl-zeile > .cfs-produkt-marke .cfs-produkt-marke-text { font-size: 12px; } } /* I1: Startseite „Gerade am beliebtesten“ – #1 nicht mehr doppelt so groß (Bild wurde unscharf hochgezogen): #1 als breite Karte (Bild so hoch wie die Reihe, Name/Preis daneben), #2–#5 größer im selben Raster. Bilder kommen in Produktseiten-Größe (startseite.php). */ @media (min-width: 768px) { .cfs-start-podest .products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; } .cfs-start-podest .products > section.product:first-child { grid-column: span 2 !important; grid-row: auto !important; } .cfs-start-podest .products > section.product:first-child .product-wrapper { display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: flex-start !important; height: 100% !important; } .cfs-start-podest .products > section.product:first-child .thumbnail-wrapper { flex: none !important; width: 58% !important; height: auto !important; aspect-ratio: 1 / 1; margin: 0 !important; } .cfs-start-podest .products > section.product:first-child .thumbnail-wrapper img { width: 100% !important; height: 100% !important; object-fit: cover; } .cfs-start-podest .products > section.product:first-child .meta-wrapper { flex: 1 1 0 !important; min-width: 0; width: auto !important; margin: 0 !important; display: flex !important; flex-direction: column; justify-content: center; zoom: 1.25 !important; } } @media (min-width: 1024px) { .cfs-start-podest .products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* ab drei Spalten teilt sich #1 die Reihe mit #2: Bild so hoch wie die Reihe (quadratisch), Name/Preis im Rest der Breite */ .cfs-start-podest .products > section.product:first-child .thumbnail-wrapper { width: auto !important; height: 100% !important; } } /* I2: Startseiten-Karussells – Pfeile links/rechts (dieselben wie im leeren Warenkorb, .cf-leer-pfeil), mittig auf Bildhöhe */ .cfs-kar-rahmen { position: relative; } .cfs-start-karussell .cfs-kar-pfeil { top: calc(var(--cfs-kar-mitte, 150px) - 19px) !important; } .cfs-start-karussell .cfs-kar-pfeil[hidden] { display: none !important; } /* I11: Sprungziel im Konto bleibt frei vom festen Kopf (Rückfall, falls das Skript nicht läuft) */ #cfs-geburtstag, #cfs-geschenk-auswahl { scroll-margin-top: 170px; } /* J1: Warenkorb – nach dem Leuchtpunkt-Lauf um die nächste Schwelle (Klasse cfs-hell) leuchtet „Noch … €“ dreimal mild auf und behält danach einen leichten Schein (keine Dauer-Animation) */ @keyframes cfs-noch-puls { 0%, 100% { text-shadow: 0 0 0 rgba(154,208,114,0); color: #d6e8c4; } 50% { text-shadow: 0 0 12px rgba(154,208,114,.75); color: #c8f59d; } } .cfs-box-naechste.cfs-hell .cfs-box-stand { animation: cfs-noch-puls 1.8s ease-in-out .2s 3; color: #c8f59d; text-shadow: 0 0 8px rgba(154,208,114,.35); } @media (prefers-reduced-motion: reduce) { .cfs-box-naechste.cfs-hell .cfs-box-stand { animation: none; } } /* J2: „Passt auch noch dazu“ – Herz auf der Schriftlinie der ersten Namenszeile (nicht mittig zwischen zwei Zeilen, nicht tiefer als der Name) */ .cf-auffuellen__posten .cfs-name-zeile { align-items: baseline !important; } /* I10 (Felix, 15.10.): Stationskreise im Kopfbalken – geometrisch exakt mittig (gemessen ±0,0 px bei 390–1920 px, auch mitlaufend); der Schatten fiel aber 1 px nach unten und ließ die Kreise tiefer wirken → Schatten rundum statt nach unten */ .cfs-kopfleiste .cfs-ernte-punkt { box-shadow: 0 0 3px rgba(0,0,0,.55); } .cfs-kopfleiste .cfs-ernte-punkt.naechster { box-shadow: 0 0 0 4px rgba(127,184,87,.25), 0 0 3px rgba(0,0,0,.55); } .cf-auffuellen__posten .cfs-name-zeile > a.cfs-herz-knopf { position: relative; top: .12em; } /* Herz-Mitte = Mitte der Großbuchstaben (gemessen) */