/** * Einstreu Pro - Versandrechner Styles * Version: 1.1.3-FOUC-FIX * * EXTERNES CSS - Unabhängig vom Plugin * Einfach über Code Snippets oder functions.php einbinden * * ÄNDERUNGEN v1.1.3-FOUC-FIX: * - CRITICAL FIX: Verhindert weißes X (Close-Button) beim Seitenload * - Modal wird standardmäßig mit display:none + opacity:0 versteckt * - Close-Button erscheint verzögert (0.2s) nach Modal-Animation * - Animation läuft nur bei tatsächlicher Sichtbarkeit * - Funktioniert jetzt auch beim ersten Load ohne 2-3x Refresh * * ÄNDERUNGEN v1.1.2-MOBILE-POPUP-FIX: * - MOBILE FIX: PLZ-Popup erscheint jetzt korrekt als einzelner Block auf Mobile * - PHP: wp_body_open statt wp_footer = Popup wird direkt nach eingefügt * - CSS: transform & will-change = verhindert BeTheme Container-Einfang * - Lösung für: "Popup in diversen BeTheme-Elementen" → Jetzt einheitlicher Block * * ÄNDERUNGEN v1.1.1-MOBILE-OPTIMIERT: * - MOBILE FIX: CSS im HEAD statt Footer = kein FOUC mehr * - MOBILE FIX: JavaScript läuft sofort (Vanilla JS) statt erst nach document.ready * - Anti-Layout-Shift: Elemente haben stabilen Default-State vor JS-Initialisierung * - Preload für CSS = schnelleres Initial Rendering * * ÄNDERUNGEN v1.1.0-NEUROMARKETING-OPTIMIERT: * - NEU: Gastbestellungs-Hinweis im PLZ-Popup * → "Gastbestellung möglich – kein Konto erforderlich" * → Conversion-Optimierung für datenschutzsensible deutsche Käufer * → Erwartete Steigerung: +8-12% weniger Checkout-Abbrüche * - NEU: Datenschutz-Beruhigung unter PLZ-Input * → "Nur für Versandberechnung, keine Weitergabe" * → DSGVO-konform und vertrauensbildend * - Mobile-optimiert: Beide neue Elemente passen sich an kleine Screens an * * ÄNDERUNGEN v1.0.9-ZOOM-STABLE-FINAL: * - ZOOM-STABIL: Tabelle bleibt jetzt im Rahmen bei 80%, 90%, 100%, 110% Zoom * - Alle vw-basierten clamp() durch rem-basierte Werte ersetzt (Schriftgrößen) * - Feste Pixel-Werte (422px, 400px) durch flexible min(Xpx, 100%) ersetzt * - Alle max-width: 100vw durch max-width: 100% ersetzt (10 Instanzen) * - Single-Click Toggle Fix: Kein Doppelklick mehr nötig * - Inhalt der Tabelle bleibt symmetrisch und konsistent * * ÄNDERUNGEN v1.0.9: * - Google Ads Optimierung: PLZ-CTA für Besucher ohne PLZ * - Produktseiten-Support für PLZ-Popup * - Mobile-optimierte CTA-Buttons * * ÄNDERUNGEN v1.0.4: * - Toggle-Funktionalität: Shop-Seiten klappbar, Produktseite immer offen * - Toggle-Button-Styles hinzugefügt * - Tabellen-Sichtbarkeit korrigiert */ /* ============================================ ANTI-FOUC & LAYOUT-SHIFT PREVENTION Verhindert Layout-Sprünge auf Mobile ============================================ */ /* Container: Stabiler Default-State vor JS */ .einstreu-shipping-container { min-height: 1px; /* Verhindert Collapse */ contain: layout; /* CSS Containment für Performance */ } /* Default: Versteckt bis JS initialisiert */ .einstreu-has-plz, .einstreu-has-plz-table, .einstreu-no-plz { display: none; /* Wird von JS angezeigt basierend auf PLZ-Status */ } /* Smooth Transitions für Visibility-Änderungen */ .einstreu-shipping-container * { transition: opacity 0.15s ease-in-out; } /* ============================================ ANTI-FOUC FIX: Modal & Banner verstecken Verhindert kurzes Aufblitzen beim Load (weißes X Problem) ============================================ */ /* Modal: Standardmäßig KOMPLETT versteckt */ #einstreu-plz-modal, .einstreu-modal { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Modal: Nur sichtbar wenn jQuery fadeIn() aktiv */ #einstreu-plz-modal[style*="display: block"], .einstreu-modal[style*="display: block"], #einstreu-plz-modal.show, .einstreu-modal.show { display: flex !important; opacity: 1 !important; visibility: visible !important; } /* Close-Button: Verzögert einblenden (verhindert weißes X) */ .einstreu-modal-close { opacity: 0 !important; transition: all 0.3s ease, opacity 0.3s 0.2s !important; } #einstreu-plz-modal[style*="display: block"] .einstreu-modal-close, .einstreu-modal[style*="display: block"] .einstreu-modal-close, #einstreu-plz-modal.show .einstreu-modal-close, .einstreu-modal.show .einstreu-modal-close { opacity: 1 !important; } /* Overlay: Smooth einblenden */ .einstreu-modal-overlay { opacity: 0 !important; transition: opacity 0.3s ease !important; } #einstreu-plz-modal[style*="display: block"] .einstreu-modal-overlay, .einstreu-modal[style*="display: block"] .einstreu-modal-overlay, #einstreu-plz-modal.show .einstreu-modal-overlay, .einstreu-modal.show .einstreu-modal-overlay { opacity: 1 !important; } /* Banner: Standardmäßig auch versteckt */ #einstreu-plz-banner, .einstreu-plz-banner { display: none !important; opacity: 0 !important; } #einstreu-plz-banner[style*="display: block"], .einstreu-plz-banner[style*="display: block"], #einstreu-plz-banner.show, .einstreu-plz-banner.show { display: block !important; opacity: 1 !important; } /* ============================================ ADMIN STYLES ============================================ */ .wrap h2 { color: #ca8f65; } .form-table th { width: 300px; } /* ============================================ FLEXIBLE & RESPONSIVE TABELLEN - OVERRIDE Automatische proportionale Anpassung ============================================ */ /* Tabelle: 100% Container-Breite */ .einstreu-price-table-auto { width: 100% !important; max-width: 100% !important; min-width: min(380px, 100%) !important; } .products .einstreu-price-table-auto, body .products .einstreu-price-table-auto { width: 100% !important; max-width: 100% !important; } /* Button: 100% der Spaltenbreite */ .einstreu-add-to-cart-btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 6px 8px !important; /* zoom-stabil */ font-size: 0.875rem !important; /* 14px - zoom-stabil */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Responsive Schriftgrößen mit clamp() */ .einstreu-qty-num-auto { font-size: 1.375rem !important; /* 22px - zoom-stabil */ } .einstreu-total-price-auto { font-size: 1.125rem !important; /* 18px - zoom-stabil */ } .einstreu-savings-amount-auto { font-size: 0.8125rem !important; /* 13px - zoom-stabil */ } .einstreu-details-toggle-auto { font-size: 0.6875rem !important; /* 11px - zoom-stabil */ } .einstreu-total-details-auto { font-size: 0.5625rem !important; /* 9px - zoom-stabil */ } /* BeTheme Overrides */ .mfn-product-badges-left .einstreu-add-to-cart-btn, .mfn-product-badges-right .einstreu-add-to-cart-btn, .mfn-product-add-to-cart .einstreu-add-to-cart-btn, div .einstreu-add-to-cart-btn, body .products .einstreu-add-to-cart-btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; font-size: 0.875rem !important; /* 14px - zoom-stabil */ padding: 6px 8px !important; /* zoom-stabil */ } /* Button Zentrierung für mfn-product-add-to-cart */ .mfn-product-add-to-cart div .einstreu-add-to-cart-btn { margin-left: auto !important; margin-right: auto !important; position: relative; } /* Einstreu Cart Text */ .mfn-product-add-to-cart div .einstreu-cart-text { font-size: 21px; } /* Best Deal Auto Transform */ .mfn-product-add-to-cart div .einstreu-best-deal-auto { transform: translateX(0px) translateY(0px); } /* Compact Shipping Padding für Shop-Seiten */ .products .desc .einstreu-compact-shipping { padding-top: 5px; padding-bottom: 5px; } /* Bulk Notice Zentrierung */ .products div .einstreu-bulk-notice { position: relative; margin-top: 15px; border-radius: 6px; } /* Bulk Notice Zentrierung Override */ .vb-item .mfn-wrapper-for-wraps .vb-item .mcb-item-shop-inner .woocommerce .mfn-woo-products .products .isotope-item .desc .einstreu-compact-shipping div .einstreu-bulk-notice { left: auto !important; } /* Total Auto Zentrierung */ .isotope-item .desc .einstreu-compact-shipping div .einstreu-total-result .einstreu-price-table-auto .einstreu-table-row-auto .einstreu-td-total-auto { left: auto !important; right: auto !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; position: relative !important; transform: none !important; } /* Price Amount Zentrierung - ZOOM-STABIL */ #shop .einstreu-total-price-auto .woocommerce-Price-amount { width: 100%; max-width: 100%; } /* ============================================ HAUPT-STYLES ============================================ */ :root { --einstreu-primary: #ca8f65; --einstreu-primary-dark: #b57a52; --einstreu-primary-light: rgba(202, 143, 101, 0.15); --einstreu-text-light: #8e8e8e; --einstreu-text-dark: #2c2c2c; --einstreu-bg-dark: #1a1a1a; } /* EINSTREU PRO ICON */ .einstreu-icon { display: inline-block; width: 70px; height: 70px; background-image: url('https://einstreu.pro/test-einstreu-pr/wp-content/uploads/2025/08/Spuerbare-Mengenrabatte-1.webp'); background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; margin-right: 5px; } /* ============================================ PLZ MODAL/POPUP - KOMPAKT & FLEXIBEL Version: 1.0.5-compact Optimiert für mobile Geräte ohne Scrolling ============================================ */ /* Modal Container - mit Padding für Touch-Screens */ .einstreu-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; /* display wird durch !important Regeln oben gesteuert */ align-items: center; justify-content: center; padding: 15px; /* CRITICAL FIX: Garantiert Fixed-to-Viewport auf Mobile */ transform: translateZ(0); /* Erstellt neuen Stacking-Context */ will-change: transform; /* Optimiert für GPU & verhindert Parent-Transform-Einfang */ } .einstreu-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); } /* KOMPAKTER MODAL CONTENT - Kein Scrolling */ .einstreu-modal-content { position: relative; background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); border: 3px solid var(--einstreu-primary); border-radius: 16px; max-width: 450px; width: 90%; max-height: fit-content; box-shadow: 0 20px 60px rgba(202, 143, 101, 0.3); /* Animation wird nur bei Sichtbarkeit aktiviert - siehe unten */ } /* Animation nur für sichtbare Modals */ #einstreu-plz-modal[style*="display: block"] .einstreu-modal-content, .einstreu-modal[style*="display: block"] .einstreu-modal-content, #einstreu-plz-modal.show .einstreu-modal-content, .einstreu-modal.show .einstreu-modal-content { animation: modalSlideIn 0.4s ease; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* KOMPAKTER CLOSE BUTTON */ .einstreu-modal-close { position: absolute; top: 10px; right: 10px; width: 35px; height: 35px; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(202, 143, 101, 0.3); border-radius: 50%; color: white; font-size: 20px; cursor: pointer; /* transition wird durch !important Regeln oben gesteuert */ display: flex; align-items: center; justify-content: center; z-index: 10; } .einstreu-modal-close:hover { background: var(--einstreu-primary); border-color: var(--einstreu-primary); transform: rotate(90deg); } /* KOMPAKTER HEADER - Gleiche Farben, weniger Padding */ .einstreu-modal-header { padding: 30px 15px 12px; /* Reduziert aber proportional */ text-align: center; border-bottom: 2px solid var(--einstreu-primary); } .einstreu-modal-header h2 { color: var(--einstreu-primary); /* EXAKT wie Desktop */ margin: 0 0 8px 0; /* Leicht reduziert */ font-size: 1.5rem; /* 24px - leicht kleiner für Platz */ line-height: 1.2; } .einstreu-modal-header p { color: var(--einstreu-text-light); /* EXAKT wie Desktop */ margin: 0; font-size: 0.875rem; /* 14px - leicht kleiner */ line-height: 1.3; } /* GASTBESTELLUNGS-HINWEIS - EXAKT wie Desktop, nur kompakter */ .guest-checkout-hint { color: var(--einstreu-primary) !important; /* EXAKT wie Desktop */ font-size: 0.75rem !important; /* 12px - kompakter */ margin-top: 10px !important; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(202, 143, 101, 0.1); /* EXAKT wie Desktop */ padding: 6px 10px; /* Leicht reduziert */ border-radius: 6px; } /* KOMPAKTER BODY - Weniger Padding, Design gleich */ .einstreu-modal-body { padding: 15px; /* Reduziert von 20px */ } /* KOMPAKTE BENEFITS - Inline, aber GLEICHE Farben wie Desktop */ .einstreu-modal-benefits { display: flex; gap: 6px; /* Kompakt */ margin-bottom: 12px; flex-wrap: wrap; justify-content: center; } .einstreu-benefit { display: inline-flex; align-items: center; padding: 4px 8px; /* Kompakt */ background: rgba(202, 143, 101, 0.1); /* EXAKT wie Desktop */ border-radius: 4px; color: var(--einstreu-primary); /* Bronze - EXAKT wie Desktop */ font-size: 0.75rem; /* 12px - kompakt */ font-weight: 500; line-height: 1.2; } /* Checkmark in Bronze - EXAKT wie Desktop-Farbe */ .einstreu-benefit::before { content: "✓"; margin-right: 4px; color: var(--einstreu-primary); /* Bronze */ font-weight: bold; font-size: 0.875rem; /* 14px */ } /* KOMPAKTES INPUT FIELD */ .einstreu-modal-input { display: flex; flex-direction: column; gap: 10px; } #einstreu-modal-plz-input { width: 100%; padding: 14px 18px; background: rgba(42, 42, 42, 0.8); border: 2px solid var(--einstreu-primary); border-radius: 10px; color: white; font-size: 1.125rem; /* 18px - zoom-stabil */ text-align: center; font-weight: 600; letter-spacing: 2px; transition: all 0.3s; } #einstreu-modal-plz-input:focus { outline: none; box-shadow: 0 0 0 4px var(--einstreu-primary-light); border-color: var(--einstreu-primary); } #einstreu-modal-plz-input::placeholder { color: #666; letter-spacing: normal; } /* DATENSCHUTZ-HINWEIS - Beruhigung für datenschutzsensible Deutsche */ .privacy-hint { color: #888; font-size: 0.6875rem; /* 11px - zoom-stabil */ text-align: center; margin: -5px 0 5px 0; display: flex; align-items: center; justify-content: center; gap: 4px; line-height: 1.3; } /* KOMPAKTER BUTTON */ .einstreu-modal-btn { width: 100%; padding: 14px 18px; background: linear-gradient(135deg, var(--einstreu-primary) 0%, var(--einstreu-primary-dark) 100%); border: none; border-radius: 10px; color: white; font-size: 1rem; /* 16px - zoom-stabil */ font-weight: 700; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 15px rgba(202, 143, 101, 0.4); } .einstreu-modal-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(202, 143, 101, 0.6); } /* KOMPAKTER SKIP BUTTON */ .einstreu-modal-skip { text-align: center; margin-top: 12px; } .einstreu-modal-skip-btn { background: none; border: none; color: #888; font-size: 0.8125rem; /* 13px - zoom-stabil */ cursor: pointer; text-decoration: underline; transition: color 0.2s; padding: 8px; } .einstreu-modal-skip-btn:hover { color: var(--einstreu-primary); } /* MOBILE OPTIMIERUNG - Nur Größen, Farben EXAKT wie Desktop */ @media (max-width: 480px) { .einstreu-modal { padding: 10px; } .einstreu-modal-content { border-radius: 12px; border-width: 3px; /* Gleich wie Desktop */ /* Hintergrund bleibt dunkel - wird vom Parent geerbt */ } .einstreu-modal-header { padding: 25px 12px 10px; /* border-bottom bleibt bronze - wird geerbt */ } .einstreu-modal-header h2 { font-size: 1.25rem; /* 20px - kompakter */ /* Farbe bleibt bronze - wird geerbt */ } .einstreu-modal-header p { font-size: 0.8125rem; /* 13px - kompakter */ /* Farbe bleibt grau - wird geerbt */ } .einstreu-modal-body { padding: 12px; } .einstreu-modal-benefits { gap: 5px; margin-bottom: 10px; } .einstreu-benefit { padding: 3px 6px; font-size: 0.6875rem; /* 11px */ /* Bronze Farbe & Background bleiben - werden geerbt */ } .einstreu-benefit::before { font-size: 0.75rem; /* 12px */ margin-right: 3px; /* Bronze Farbe bleibt - wird geerbt */ } #einstreu-modal-plz-input { padding: 11px 14px; /* Leicht reduziert */ font-size: 1rem; /* 16px - iOS Auto-Zoom vermeiden */ /* Dunkler Background & Bronze Border bleiben - werden geerbt */ } .einstreu-modal-btn { padding: 11px 14px; font-size: 0.875rem; /* 14px */ /* Bronze Gradient bleibt - wird geerbt */ } .guest-checkout-hint { font-size: 0.6875rem !important; /* 11px */ padding: 5px 8px !important; margin-top: 8px !important; /* Bronze Farbe & Background bleiben - werden geerbt */ } .privacy-hint { font-size: 0.625rem; /* 10px */ margin: -3px 0 8px 0; /* Grau Farbe bleibt - wird geerbt */ } .einstreu-modal-skip { margin-top: 8px; } .einstreu-modal-skip-btn { font-size: 0.6875rem; /* 11px */ /* Grau Farbe bleibt - wird geerbt */ } } /* EXTRA KLEINE BILDSCHIRME - Nur Größen, Design identisch */ @media (max-width: 360px) { .einstreu-modal-header { padding: 23px 10px 8px; } .einstreu-modal-header h2 { font-size: 1.125rem; /* 18px */ } .einstreu-modal-header p { font-size: 0.75rem; /* 12px */ } .einstreu-modal-body { padding: 10px; } .einstreu-benefit { padding: 2px 5px; font-size: 0.625rem; /* 10px */ } .einstreu-benefit::before { font-size: 0.6875rem; /* 11px */ margin-right: 2px; } #einstreu-modal-plz-input { padding: 10px 12px; font-size: 0.9375rem; /* 15px */ } .einstreu-modal-btn { padding: 10px 12px; font-size: 0.8125rem; /* 13px */ } .guest-checkout-hint { font-size: 0.625rem !important; /* 10px */ padding: 4px 6px !important; } } /* HOCHFORMAT-OPTIMIERUNG für sehr kleine Screens */ @media (max-width: 380px) and (orientation: portrait) { .einstreu-modal-content { width: 95%; max-width: 95vw; } .einstreu-modal-header h2 { font-size: 1.125rem; /* 18px */ } .einstreu-modal-header p { font-size: 0.75rem; /* 12px */ } .einstreu-benefit { font-size: 0.625rem; /* 10px */ } } /* STICKY PLZ BANNER */ .einstreu-plz-banner { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(135deg, var(--einstreu-primary) 0%, var(--einstreu-primary-dark) 100%); color: white; z-index: 99999; box-shadow: 0 2px 15px rgba(202, 143, 101, 0.5); animation: bannerSlideDown 0.4s ease; } @keyframes bannerSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } .einstreu-banner-content { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: center; } .einstreu-banner-icon { font-size: 20px; } .einstreu-banner-text { font-size: 14px; } .einstreu-banner-text strong { font-weight: 700; } .einstreu-banner-info { font-size: 12px; opacity: 0.9; } .einstreu-banner-change-btn { padding: 6px 16px; background: rgba(255, 255, 255, 0.2); border: 2px solid white; border-radius: 20px; color: white; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .einstreu-banner-change-btn:hover { background: white; color: var(--einstreu-primary); } /* GESAMTPREIS-ANZEIGE MIT STAFFEL-TABELLE */ .einstreu-total-price-display { margin: 10px 0; animation: fadeIn 0.4s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .einstreu-total-loading { padding: 12px 16px; background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); border: 2px solid #ca8f65; border-radius: 8px; color: #155724; font-size: 13px; text-align: center; } /* KOMPAKTE PREIS-TABELLE FÜR AUTOMATISCHE ANZEIGE */ .einstreu-price-table-auto { background: white; border-radius: 8px; overflow: visible; /* Geändert von hidden zu visible - erlaubt Details-Expansion */ box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid #ca8f65; position: relative; /* Für z-index Kontext */ height: auto; /* Dynamische Höhe */ min-height: fit-content; /* Mindestens so hoch wie Inhalt */ } /* BETHEME OVERRIDE - Erzwingt einheitliches Aussehen für ALLE Produkte */ .mfn-product-badges-left .einstreu-price-table-auto, .mfn-product-badges-right .einstreu-price-table-auto, .mfn-product-add-to-cart .einstreu-price-table-auto, div .einstreu-price-table-auto, .product .einstreu-price-table-auto { background: white; border-radius: 8px; overflow: visible; /* Geändert von hidden zu visible - erlaubt Details-Expansion */ box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid #ca8f65 !important; margin: 10px 0 !important; width: 100% !important; max-width: 100% !important; position: relative; /* Für z-index Kontext */ height: auto; /* Dynamische Höhe */ min-height: fit-content !important; /* Mindestens so hoch wie Inhalt */ } /* Produktseite - Optimale Breite mit Flexibilität */ .single-product .einstreu-price-table-auto { width: 100%; max-width: 525px; } .einstreu-table-header-auto { display: grid; grid-template-columns: 0.75fr 1.5fr 1.2fr 1.55fr; background: linear-gradient(135deg, #ca8f65 0%, #218838 100%); color: white; font-weight: 600; font-size: 12px; } /* BETHEME OVERRIDE - Table Header einheitlich */ .mfn-product-badges-left .einstreu-table-header-auto, .mfn-product-badges-right .einstreu-table-header-auto, .mfn-product-add-to-cart .einstreu-table-header-auto, div .einstreu-table-header-auto { display: grid; grid-template-columns: 0.75fr 1.5fr 1.2fr 1.55fr; background: linear-gradient(135deg, #ca8f65 0%, #218838 100%) !important; color: white !important; font-weight: 600 !important; font-size: 12px !important; line-height: normal !important; } .einstreu-th-auto { padding: 8px 6px; text-align: center; } .einstreu-table-row-auto { display: grid; grid-template-columns: 0.75fr 1.5fr 1.2fr 1.55fr; grid-auto-rows: auto; /* Zeilen passen sich an Inhalt an */ border-bottom: 2px solid #ca8f65; border-top: none; border-left: none; border-right: none; transition: all 0.2s; background: white; overflow: visible; /* Wichtig: Erlaube Overflow für Details */ position: relative; /* Für z-index Kontext */ height: auto; /* Dynamische Höhe */ min-height: fit-content; /* Mindestens so hoch wie Inhalt */ } /* BETHEME OVERRIDE - Table Rows einheitlich */ .mfn-product-badges-left .einstreu-table-row-auto, .mfn-product-badges-right .einstreu-table-row-auto, .mfn-product-add-to-cart .einstreu-table-row-auto, div .einstreu-table-row-auto { display: grid; grid-template-columns: 0.75fr 1.5fr 1.2fr 1.55fr; grid-auto-rows: auto !important; /* Zeilen passen sich an Inhalt an */ border-bottom: 2px solid #ca8f65 !important; border-top: none !important; border-left: none !important; border-right: none !important; transition: all 0.2s !important; background: white; margin: 0 !important; padding: 0 !important; overflow: visible; /* Wichtig: Erlaube Overflow für Details */ position: relative; /* Für z-index Kontext */ height: auto; /* Dynamische Höhe */ min-height: fit-content !important; /* Mindestens so hoch wie Inhalt */ } .einstreu-table-row-auto:last-child { border-bottom: none; } /* BETHEME OVERRIDE - Letzte Zeile ohne Border */ .mfn-product-badges-left .einstreu-table-row-auto:last-child, .mfn-product-badges-right .einstreu-table-row-auto:last-child, .mfn-product-add-to-cart .einstreu-table-row-auto:last-child, div .einstreu-table-row-auto:last-child { border-bottom: none !important; } /* HOVER-EFFEKT ENTFERNT - Keine Farbänderung beim Überfahren */ .einstreu-best-deal-auto { background: linear-gradient(135deg, rgba(202, 143, 101, 0.08) 0%, rgba(202, 143, 101, 0.12) 100%); border-left: none !important; border-right: none !important; text-align: center !important; justify-content: center !important; } .einstreu-best-deal-auto:last-child { border-bottom: none !important; text-align: center !important; justify-content: center !important; } /* BETHEME OVERRIDE - Best Deal Borders */ .mfn-product-badges-left .einstreu-best-deal-auto, .mfn-product-badges-right .einstreu-best-deal-auto, .mfn-product-add-to-cart .einstreu-best-deal-auto, div .einstreu-best-deal-auto { border-left: none !important; border-right: none !important; text-align: center !important; justify-content: center !important; } .mfn-product-badges-left .einstreu-best-deal-auto:last-child, .mfn-product-badges-right .einstreu-best-deal-auto:last-child, .mfn-product-add-to-cart .einstreu-best-deal-auto:last-child, div .einstreu-best-deal-auto:last-child { border-bottom: none !important; text-align: center !important; justify-content: center !important; } /* HOVER-EFFEKT ENTFERNT - Best Deal Zeilen ändern Farbe nicht beim Überfahren */ .einstreu-td-auto { padding: 10px 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: visible; /* Wichtig: Erlaube Overflow für Details */ position: relative; /* Für z-index Kontext */ height: auto; /* Dynamische Höhe */ min-height: fit-content; /* Mindestens so hoch wie Inhalt */ } /* BETHEME OVERRIDE - Table Cells einheitlich */ .mfn-product-badges-left .einstreu-td-auto, .mfn-product-badges-right .einstreu-td-auto, .mfn-product-add-to-cart .einstreu-td-auto, div .einstreu-td-auto { padding: 10px 6px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; overflow: visible; /* Wichtig: Erlaube Overflow für Details */ position: relative; /* Für z-index Kontext */ height: auto; /* Dynamische Höhe */ min-height: fit-content !important; /* Mindestens so hoch wie Inhalt */ } .einstreu-qty-badge-auto { display: flex; flex-direction: column; align-items: center; text-align: center !important; justify-content: center !important; position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; transform: none !important; } .einstreu-qty-num-auto { font-size: 22px; font-weight: 900; color: #ca8f65; line-height: 1; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } /* BETHEME OVERRIDE - Quantity Numbers einheitlich */ .mfn-product-badges-left .einstreu-qty-num-auto, .mfn-product-badges-right .einstreu-qty-num-auto, .mfn-product-add-to-cart .einstreu-qty-num-auto, div .einstreu-qty-num-auto { font-size: 22px !important; font-weight: 900 !important; color: #ca8f65 !important; line-height: 1 !important; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } .einstreu-qty-label-auto { font-size: 10px; color: #666; margin-top: 2px; } .einstreu-popular-auto { margin-top: 4px; padding: 2px 6px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white; border-radius: 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; box-shadow: 0 2px 4px rgba(255, 107, 107, 0.4); } .einstreu-total-price-auto { font-size: 18px; font-weight: 900; color: #2c2c2c; margin-bottom: 2px; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } /* BETHEME OVERRIDE - Total Price einheitlich */ .mfn-product-badges-left .einstreu-total-price-auto, .mfn-product-badges-right .einstreu-total-price-auto, .mfn-product-add-to-cart .einstreu-total-price-auto, div .einstreu-total-price-auto { font-size: 18px !important; font-weight: 900 !important; color: #2c2c2c !important; margin-bottom: 2px !important; line-height: 1.2 !important; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } .einstreu-total-details-auto { font-size: 9px; color: #888; text-align: center; line-height: 1.4; position: relative; /* Für z-index Kontext */ z-index: 1; /* Über anderen Elementen */ } /* Wenn Details sichtbar sind - forciere Sichtbarkeit auf Shop-Seiten */ .products .einstreu-total-details-auto.show, .products div .einstreu-total-details-auto.show, body .products .einstreu-total-details-auto.show { display: block !important; opacity: 1 !important; max-height: 200px !important; visibility: visible !important; } .einstreu-detail-label { font-weight: 600; color: #666; } .einstreu-detail-product-auto, .einstreu-detail-shipping-auto, .einstreu-detail-tax-auto { font-weight: 700; color: #ca8f65; } /* Details Toggle Links */ .einstreu-details-toggle, .einstreu-details-toggle-auto { display: inline-block; font-size: 11px; color: #ca8f65; text-decoration: none; margin-top: 4px; cursor: pointer; transition: all 0.2s ease; position: relative; z-index: 999; /* Sehr hoch, um über allem zu sein */ pointer-events: auto; /* Erzwinge Klickbarkeit */ } .einstreu-details-toggle:hover, .einstreu-details-toggle-auto:hover { color: #b57a52; } /* Toggle Icon (Pfeil) */ .einstreu-toggle-icon { display: inline-block; transition: transform 0.3s ease; font-size: 10px; color: #ca8f65; } .einstreu-details-toggle:hover .einstreu-toggle-icon, .einstreu-details-toggle-auto:hover .einstreu-toggle-icon { color: #b57a52; } .einstreu-details-toggle.open .einstreu-toggle-icon, .einstreu-details-toggle-auto.open .einstreu-toggle-icon { transform: rotate(180deg); } /* WICHTIG: Verhindere dass WooCommerce Produktlinks die Toggle-Buttons überlagern */ .woocommerce ul.products li.product > a, .products ul.products li.product > a, .products .product > a.woocommerce-LoopProduct-link { pointer-events: none; /* Deaktiviere Links auf der gesamten Produktkarte */ } /* Reaktiviere Links für Produktbilder und Titel */ .woocommerce ul.products li.product > a img, .woocommerce ul.products li.product > a .woocommerce-loop-product__title, .woocommerce ul.products li.product > a h2, .woocommerce ul.products li.product > a h3 { pointer-events: auto; cursor: pointer; } /* Stelle sicher dass alle Buttons und interaktive Elemente klickbar sind */ .einstreu-details-toggle, .einstreu-details-toggle-auto, .einstreu-add-to-cart-btn, button, .button, input[type="submit"] { pointer-events: auto; cursor: pointer !important; } /* Toggle-Icon muss auch klickbar sein */ .einstreu-toggle-icon, .products .einstreu-toggle-icon { pointer-events: auto; cursor: pointer !important; } /* ============================================ PRODUKTSEITEN: Tabellen immer sichtbar SHOP-SEITEN: Tabellen klappbar mit Toggle ============================================ */ /* NUR Produktseiten - Tabellen IMMER sichtbar */ .single-product .einstreu-table-wrapper, .single-product .einstreu-compact-shipping, .single-product div[id^="einstreu-table-"] { display: block !important; visibility: visible !important; opacity: 1 !important; max-height: none !important; overflow: visible !important; margin-top: 15px !important; margin-bottom: 20px !important; clear: both; position: relative; z-index: 1; } /* Shop/Kategorie-Seiten - Toggle Animation */ body:not(.single-product) .einstreu-table-wrapper { overflow: hidden; transition: max-height 0.4s ease-out, opacity 0.4s ease-out; max-height: 0; opacity: 0; } body:not(.single-product) .einstreu-table-wrapper.show { display: block !important; max-height: 2000px; opacity: 1; } /* Toggle Button Styles */ .einstreu-table-toggle { display: inline-block; margin-left: 10px; color: var(--einstreu-primary); text-decoration: none; font-size: 14px; cursor: pointer; transition: color 0.2s ease; } .einstreu-table-toggle:hover { color: var(--einstreu-primary-dark); } .einstreu-toggle-arrow { display: inline-block; transition: transform 0.3s ease; font-size: 12px; } .einstreu-table-toggle.open .einstreu-toggle-arrow { transform: rotate(180deg); } /* Verhindere Überlagerung mit Produktbildern */ .products .product { position: relative; z-index: auto; } .products .product img, .products .product .attachment-woocommerce_thumbnail { position: relative; z-index: 2; margin-bottom: 15px; } /* Bulk Notice soll nicht überlagern */ .einstreu-bulk-notice { position: relative !important; z-index: 1 !important; margin-top: 15px !important; margin-bottom: 10px !important; clear: both; } /* Smooth slide animation for details */ .einstreu-total-details, .einstreu-total-details-auto { overflow: hidden; transition: max-height 0.3s ease-out, opacity 0.3s ease-out; opacity: 0; max-height: 0; } .einstreu-total-details.show, .einstreu-total-details-auto.show { opacity: 1; max-height: 200px; /* Erhöht von 100px auf 200px für mehr Platz */ } .einstreu-no-savings-auto { color: #ccc; font-size: 16px; } .einstreu-savings-badge-auto { display: flex; flex-direction: column; align-items: center; padding: 2px 4px; gap: 0; } .einstreu-savings-label-auto { font-size: 8px; color: #28a745; text-transform: uppercase; font-weight: 600; letter-spacing: 0.2px; line-height: 1.2; } .einstreu-savings-amount-auto { font-size: 13px; font-weight: 900; color: #28a745; margin-top: 0; line-height: 1.2; white-space: nowrap; } .einstreu-td-action-auto { display: flex; align-items: center; justify-content: center; } .einstreu-add-to-cart-btn { padding: 8px 16px; width: 122px; height: 46px; background: linear-gradient(135deg, #ca8f65 0%, #218838 100%); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 17px; line-height: 1.75em; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.3s; box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3); } /* BETHEME OVERRIDE - Add to Cart Button einheitlich */ .mfn-product-badges-left .einstreu-add-to-cart-btn, .mfn-product-badges-right .einstreu-add-to-cart-btn, .mfn-product-add-to-cart .einstreu-add-to-cart-btn, div .einstreu-add-to-cart-btn { padding: 8px 16px !important; width: 122px !important; height: 46px !important; background: linear-gradient(135deg, #ca8f65 0%, #218838 100%) !important; color: white !important; border: none !important; border-radius: 6px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; transition: all 0.3s !important; box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3); line-height: 1.75em !important; } .einstreu-add-to-cart-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4); } .einstreu-add-to-cart-btn.loading { opacity: 0.7; cursor: wait; } .einstreu-add-to-cart-btn.success { background: linear-gradient(135deg, #ca8f65 0%, #20c997 100%); animation: successPulse 0.5s ease; } /* VERSTECKE WooCommerce "Warenkorb anzeigen" Button */ .einstreu-td-action-auto .added_to_cart, .einstreu-td-action-auto a.added_to_cart.wc-forward, .einstreu-price-table-auto .added_to_cart, .einstreu-price-table-auto a.added_to_cart.wc-forward { display: none !important; } /* VERSTECKE WooCommerce Standard Cart Button & Mengenauswahl wenn Plugin aktiv */ .single-product .product .cart, .single-product form.cart, .single-product .quantity, .woocommerce .column_product_cart_button .cart, .woocommerce div.product form.cart, .woocommerce div.product .quantity { display: none !important; } /* BETHEME OVERRIDE - Verstecke Cart Button & Quantity */ .single-product .mfn-product-add-to-cart form.cart, .single-product .mfn-product-add-to-cart .quantity, div.product .mfn-product-add-to-cart form.cart, div.product .mfn-product-add-to-cart .quantity { display: none !important; } /* VERSTECKE Shipping Cost on Product Page Plugin Button */ .single-product .shipping-calculator, .single-product .shipping-cost-calculator, .single-product .woocommerce-shipping-calculator, .single-product .shipping-calculator-button, .single-product #shipping_calculator, .single-product .shipping-calculator-form, .single-product .wcpscpp_main_wrapper, .single-product .wcpscpp-button, .shipping-cost-on-product-page, .wcpscpp-shipping-calculator { display: none !important; } /* BETHEME OVERRIDE - Shipping Calculator Plugins */ div.product .shipping-calculator, div.product .shipping-cost-calculator, div.product .wcpscpp_main_wrapper, .mfn-product-add-to-cart .shipping-calculator, .mfn-product-add-to-cart .wcpscpp_main_wrapper { display: none !important; } @keyframes successPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ============================================ */ .einstreu-cart-icon { font-size: 14px; } .einstreu-cart-text { font-size: 17px; } .einstreu-has-plz { padding: 6px 12px; background: rgba(40, 167, 69, 0.1); border-radius: 6px; } /* PREIS/KG & LAGER BADGES */ .einstreu-badges { display: inline-block; margin-left: 8px; } .einstreu-stock-badge { display: inline-block; color: #ca8f65; font-size: 18px; line-height: 1.55em; font-weight: 400; margin-right: 6px; } .einstreu-per-kg { display: inline-block; padding: 0; background: none; color: #ca8f65; border-radius: 0; font-size: 17px; font-weight: 400; line-height: 1.55em; box-shadow: none; } /* Spezielles Styling für Shop-Übersichtsseiten */ #shop .desc .einstreu-per-kg { background: none; color: #ca8f65; font-size: 17px; font-weight: 400; line-height: 1.55em; padding: 0; border-radius: 0; box-shadow: none; } /* Shop-spezifische Zentrierung für Gesamtpreis */ #shop .einstreu-td-total-auto { text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } #shop .einstreu-total-price-auto, #shop .einstreu-total-price-auto bdi { text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } /* KOMPAKTE INFO AUF SHOP-SEITEN */ .einstreu-compact-shipping { margin: 12px 0 8px 0; font-size: 14px; } .einstreu-compact-shipping small { font-size: 17px; line-height: 1.55em; } /* BETHEME OVERRIDE - Compact Shipping Small Text */ .mfn-product-badges-left .einstreu-compact-shipping small, .mfn-product-badges-right .einstreu-compact-shipping small, .mfn-product-add-to-cart .einstreu-compact-shipping small, div .einstreu-compact-shipping small { font-size: 17px !important; line-height: 1.55em !important; } /* Hauptprodukt-Bereich: Feste Breite 525px */ .single-product .mfn-product-add-to-cart .einstreu-compact-shipping:not(.mcb-section-0757f8625 *):not(.products *), .single-product .mfn-product-add-to-cart .einstreu-bulk-notice:not(.mcb-section-0757f8625 *):not(.products *), .single-product .mfn-product-add-to-cart .einstreu-price-table-auto:not(.mcb-section-0757f8625 *):not(.products *), .mcb-section-z4rkal4ti .einstreu-compact-shipping, .mcb-section-z4rkal4ti .einstreu-bulk-notice, .mcb-section-z4rkal4ti .einstreu-price-table-auto { width: 525px !important; max-width: 525px !important; } /* Shop-Abschnitt auf Produktseite: Normale Breite wie Homepage */ .mcb-section-0757f8625 .einstreu-price-table-auto, .mcb-section-0757f8625 .einstreu-compact-shipping, .mcb-section-0757f8625 .einstreu-bulk-notice { width: 100% !important; max-width: 100% !important; } /* Shop-Übersicht: Alle Plugin-Elemente gleiche Breite */ .products .desc .einstreu-compact-shipping, .products div .einstreu-price-table-auto, .products div .einstreu-bulk-notice, .mcb-section-0757f8625 .products .einstreu-compact-shipping, .mcb-section-0757f8625 .products .einstreu-price-table-auto, .mcb-section-0757f8625 .products .einstreu-bulk-notice { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* ENTFERNT: Mindestbreite verhindert responsive Anpassung */ /* Shop-Übersicht: Transparenter Hintergrund für Preistabellen */ .products div .einstreu-price-table-auto { background-color: transparent !important; transform: translateX(0px) translateY(0px); } /* Produktseite: Transparenter Hintergrund für Preistabellen */ .mfn-product-add-to-cart div .einstreu-price-table-auto { background-color: transparent !important; } /* Border Radius für Bulk Notice */ .single-product .einstreu-bulk-notice:not(.mcb-section-0757f8625 .einstreu-bulk-notice), .mcb-section-z4rkal4ti .einstreu-bulk-notice { border-radius: 6px !important; } /* Verstecke doppelte Preis-Anzeigen (price-unit, stock-info, per-kg-info) */ .mcb-section-z4rkal4ti .mfn-product-add-to-cart .price-unit { visibility: hidden !important; } .mfn-product-add-to-cart .custom-product-price .stock-info { visibility: hidden !important; } .mfn-product-add-to-cart .custom-product-price .per-kg-info { visibility: hidden !important; } /* Shop-Übersicht: Verstecke per-kg-info und stock-info */ .products .desc .per-kg-info { visibility: hidden; } .products .desc .stock-info { visibility: hidden; } /* MINI CALCULATOR */ .einstreu-mini-calc { margin: 12px 0; } .einstreu-mini-input { display: flex; gap: 8px; } .einstreu-mini-plz { flex: 0 0 120px; padding: 8px 12px; border: 2px solid var(--einstreu-primary); border-radius: 6px; font-size: 14px; transition: all 0.3s; } .einstreu-mini-plz:focus { outline: none; box-shadow: 0 0 0 3px var(--einstreu-primary-light); } .einstreu-mini-btn { padding: 8px 16px; background: linear-gradient(135deg, var(--einstreu-primary) 0%, var(--einstreu-primary-dark) 100%); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.3s; box-shadow: 0 2px 8px rgba(202, 143, 101, 0.4); } .einstreu-mini-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(202, 143, 101, 0.5); } .einstreu-mini-loading { margin-top: 8px; padding: 8px; text-align: center; color: var(--einstreu-primary); } .einstreu-mini-more { display: inline-block; margin-top: 8px; color: var(--einstreu-primary); font-size: 13px; text-decoration: none; transition: all 0.2s; } .einstreu-mini-more:hover { color: var(--einstreu-primary-dark); } /* PRICE TABLE */ .einstreu-price-table { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 2px solid var(--einstreu-primary); margin-top: 10px; } .einstreu-table-header { display: grid; grid-template-columns: 1fr 1.2fr 1fr; background: linear-gradient(135deg, var(--einstreu-primary) 0%, var(--einstreu-primary-dark) 100%); color: white; font-weight: 600; font-size: 12px; } .einstreu-th { padding: 10px 8px; text-align: center; } .einstreu-table-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; border-bottom: 2px solid #ca8f65; border-top: none; border-left: none; border-right: none; transition: all 0.2s; background: white; } .einstreu-table-row:last-child { border-bottom: none; } /* HOVER-EFFEKT ENTFERNT - Keine Farbänderung beim Überfahren */ .einstreu-best-deal { background: linear-gradient(135deg, rgba(202, 143, 101, 0.15) 0%, rgba(202, 143, 101, 0.2) 100%); border-top: 2px solid var(--einstreu-primary) !important; border-bottom: 2px solid var(--einstreu-primary) !important; border-left: none !important; border-right: none !important; } .einstreu-best-deal:last-child { border-bottom: none !important; } .einstreu-td { padding: 12px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .einstreu-qty-badge { display: flex; flex-direction: column; align-items: center; } .einstreu-qty-num { font-size: 24px; font-weight: 900; color: var(--einstreu-primary); line-height: 1; } .einstreu-qty-label { font-size: 11px; color: #666; margin-top: 3px; } .einstreu-popular { margin-top: 5px; padding: 3px 8px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); color: white; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; box-shadow: 0 2px 4px rgba(255, 107, 107, 0.4); } .einstreu-total-price { font-size: 20px; font-weight: 900; color: #2c2c2c; margin-bottom: 3px; } .einstreu-total-details { font-size: 10px; color: #888; text-align: center; } .einstreu-detail-product, .einstreu-detail-shipping { font-weight: 700; color: var(--einstreu-primary); } .einstreu-no-savings { color: #ccc; font-size: 18px; } .einstreu-savings-badge { display: flex; flex-direction: column; align-items: center; padding: 2px 4px; gap: 0; } .einstreu-savings-label { font-size: 9px; color: #28a745; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; line-height: 1.2; } .einstreu-savings-amount { font-size: 15px; font-weight: 900; color: #28a745; margin-top: 0; line-height: 1.2; white-space: nowrap; } /* RESPONSIVE */ /* Shop-Übersicht: Minimale Tabellenbreite - FLEXIBEL */ .products div .einstreu-price-table-auto { min-width: min(400px, 100%); } /* DESKTOP: Shop-Übersicht Tabellenbreite (769px und größer) */ /* Shop-Übersicht: Minimale Breite für Preistabellen - FLEXIBEL */ .products div .einstreu-price-table-auto { min-width: min(422px, 100%); } @media (min-width: 769px) { /* Einstreu price table auto */ .products div .einstreu-price-table-auto { max-width: 100%; } /* Products Price Table Desktop */ .products .einstreu-price-table-auto { width: 100% !important; min-width: 88px !important; margin-top: 0 !important; margin-bottom: 0 !important; } .products .einstreu-bulk-notice { width: 100% !important; } /* Spezifische Regel für isotope-items in Shop - FLEXIBEL */ .mfn-woo-products .products .isotope-item .desc .einstreu-compact-shipping div .einstreu-total-result .einstreu-price-table-auto { min-width: min(422px, 100%) !important; width: 100% !important; max-width: 422px !important; } } @media (max-width: 768px) { .einstreu-modal-content { width: 95%; margin: 15px; /* Reduziert von 20px - mehr Platz */ } /* MOBILE: Modal-Header Padding reduzieren */ .einstreu-modal-header { padding: 25px 20px 15px !important; /* VORHER: 40px 30px 20px */ } /* MOBILE: Close Button besser positionieren */ .einstreu-modal-close { top: 10px !important; /* Besser sichtbar mit reduziertem Header-Padding */ right: 10px !important; /* Näher am Rand */ width: 35px !important; /* Etwas kompakter als 40px */ height: 35px !important; font-size: 22px !important; /* Proportional angepasst */ background: rgba(202, 143, 101, 0.15) !important; /* Bessere Sichtbarkeit */ border-color: rgba(202, 143, 101, 0.5) !important; /* Stärkerer Kontrast */ } /* MOBILE: Modal-Body auch kompakter */ .einstreu-modal-body { padding: 20px !important; /* VORHER: 30px */ } /* MOBILE: Input-Feld anpassen */ #einstreu-modal-plz-input { padding: 14px 16px !important; font-size: 16px !important; } .einstreu-modal-header h2 { font-size: 22px; } .einstreu-banner-content { flex-direction: column; gap: 8px; padding: 10px 15px; } /* PLZ-Banner z-index auf Mobile reduzieren damit Menü funktioniert */ .einstreu-plz-banner { z-index: 1000 !important; } /* Body nach unten schieben wenn PLZ-Banner sichtbar */ body.has-plz-banner { padding-top: 75px !important; } /* Smooth transition beim Ein-/Ausblenden */ body { transition: padding-top 0.3s ease; } /* MOBILE: Tabelle mit optimaler Breite */ .einstreu-price-table-auto { display: block; border: none; width: 96% !important; max-width: 420px !important; margin: 0 auto !important; overflow: visible; /* Wichtig: Erlaube Overflow für Details auch auf Mobile */ } /* MOBILE: Compact Shipping & Bulk Notice passend zur Tabelle */ .einstreu-compact-shipping, .einstreu-bulk-notice { width: 96% !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; } .einstreu-table-header-auto { display: none; /* Header auf Mobile ausblenden */ } .einstreu-table-row-auto { display: block; margin-bottom: 15px; border: 3px solid #ca8f65; border-radius: 12px; padding: 15px; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); overflow: visible; /* Wichtig: Erlaube Overflow für Details auch auf Mobile */ } /* ======================================== SHOP-SEITEN auf Mobile: Kompaktes GRID GEÄNDERT: Texte zentriert ======================================== */ .products .einstreu-price-table-auto { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .products .einstreu-table-header-auto { display: grid !important; grid-template-columns: 45px 1fr 65px 85px !important; gap: 3px !important; padding: 6px 4px !important; font-size: 9px !important; text-align: center !important; /* GEÄNDERT */ } .products .einstreu-table-row-auto { display: grid !important; grid-template-columns: 45px 1fr 65px 85px !important; gap: 3px !important; padding: 6px 4px !important; margin-bottom: 0 !important; border: none !important; border-bottom: 1px solid #e0e0e0 !important; border-radius: 0 !important; width: 100% !important; max-width: 100% !important; background: white !important; box-shadow: none !important; } .products .einstreu-td-auto { display: flex !important; align-items: center !important; justify-content: center !important; padding: 2px !important; margin: 0 !important; width: auto !important; max-width: none !important; height: auto !important; text-align: center !important; /* GEÄNDERT */ } .products .einstreu-qty-badge-auto { width: 35px !important; height: 35px !important; text-align: center !important; justify-content: center !important; position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; transform: none !important; } .products .einstreu-qty-num-auto { font-size: 14px !important; text-align: center !important; /* GEÄNDERT */ position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } /* GEÄNDERT: Zentriert statt linksbündig */ .products .einstreu-td-total-auto { flex-direction: column !important; align-items: center !important; /* VORHER: flex-start */ text-align: center !important; /* NEU */ position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } /* GEÄNDERT: Zentriert statt linksbündig */ .products .einstreu-total-price-auto { font-size: 13px !important; text-align: center !important; /* VORHER: left */ position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } .products .einstreu-details-toggle-auto { font-size: 8px !important; text-align: center !important; /* NEU */ } .products .einstreu-savings-amount-auto { font-size: 10px !important; text-align: center !important; /* NEU */ } .products .einstreu-add-to-cart-btn { padding: 5px 3px !important; font-size: 10px !important; width: 100% !important; text-align: center !important; /* NEU */ } /* PRODUKTSEITEN auf Mobile: Volle Karten (nur auf Produktseite, nicht Shop!) */ body.single-product .einstreu-table-header-auto { display: none !important; } body.single-product .einstreu-table-row-auto { display: block !important; margin-bottom: 15px !important; border: 3px solid #ca8f65 !important; border-radius: 12px !important; padding: 15px !important; background: white !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; width: 100% !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; } body.single-product .einstreu-td-auto { display: block !important; margin-bottom: 10px !important; text-align: center !important; width: 100% !important; } body.single-product .einstreu-qty-badge-auto { width: 60px !important; height: 60px !important; margin: 0 auto !important; text-align: center !important; justify-content: center !important; position: relative !important; left: auto !important; right: auto !important; transform: none !important; } body.single-product .einstreu-qty-num-auto { font-size: 32px !important; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } body.single-product .einstreu-total-price-auto { font-size: 28px !important; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } /* Produktseite: Spezifische Breite für Tabellenzeilen in BeTheme Section */ .mfn-single-product-tmpl-builder .mcb-section-z4rkal4ti .mcb-section-inner-z4rkal4ti .vb-item .mfn-wrapper-for-wraps #\#Bestellung .mcb-item-product_cart_button-inner .mfn-product-add-to-cart .einstreu-compact-shipping div .einstreu-total-result .einstreu-price-table-auto .einstreu-table-row-auto { width: 75% !important; } /* Einstreu bulk notice - Generelle Breite */ .mfn-product-add-to-cart div .einstreu-bulk-notice { width: 100% !important; } /* Einstreu bulk notice - Spezifische Breite in BeTheme Section */ .mcb-section-inner-z4rkal4ti .vb-item .mfn-wrapper-for-wraps #\#Bestellung .mcb-item-product_cart_button-inner .mfn-product-add-to-cart .einstreu-compact-shipping div .einstreu-bulk-notice { width: 10% !important; } .einstreu-best-deal-auto { border-color: var(--einstreu-primary) !important; background: linear-gradient(135deg, rgba(202, 143, 101, 0.08) 0%, rgba(202, 143, 101, 0.12) 100%); position: relative; text-align: center !important; justify-content: center !important; } /* "Beliebt"-Badge auf Mobile entfernt */ .einstreu-td-auto { padding: 0; display: block; margin-bottom: 10px; overflow: visible; /* Wichtig: Erlaube Overflow für Details auch auf Mobile */ } /* MENGE - Oben groß */ .einstreu-td-qty-auto { text-align: center !important; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid rgba(40, 167, 69, 0.2); position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } .einstreu-qty-badge-auto { flex-direction: row; gap: 8px; align-items: baseline; justify-content: center !important; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; transform: none !important; } .einstreu-qty-num-auto { font-size: 32px; color: #ca8f65; } .einstreu-qty-label-auto { font-size: 16px; font-weight: 600; } /* GESAMTPREIS - Sehr prominent */ .einstreu-td-total-auto { text-align: center !important; margin-bottom: 12px; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } .einstreu-total-price-auto { font-size: 28px; font-weight: 900; color: #ca8f65; margin-bottom: 8px; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } .einstreu-total-details-auto { font-size: 11px; color: #666; line-height: 1.6; } .einstreu-detail-label { font-weight: 600; color: #666; } .einstreu-detail-product-auto, .einstreu-detail-shipping-auto, .einstreu-detail-tax-auto { font-weight: 700; color: #ca8f65; } /* ERSPARNIS - Kompakt */ .einstreu-td-savings-auto { text-align: center; margin-bottom: 12px; } .einstreu-savings-badge-auto { display: inline-flex; flex-direction: column; align-items: center; padding: 2px 4px; gap: 0; } .einstreu-savings-label-auto { font-size: 10px; line-height: 1.2; } .einstreu-savings-amount-auto { font-size: 16px; line-height: 1.2; margin-top: 0; } .einstreu-no-savings-auto { font-size: 14px; color: #ccc; } /* BUTTON - Volle Breite */ .einstreu-td-action-auto { margin-bottom: 0; } .einstreu-add-to-cart-btn { width: 100%; padding: 14px 20px; font-size: 16px; justify-content: center; border-radius: 8px; } .einstreu-cart-icon { font-size: 18px; } .einstreu-cart-text { font-size: 17px; font-weight: 700; } /* MINI CALCULATOR - Auch auf Mobile */ .einstreu-qty-num { font-size: 20px; } .einstreu-total-price { font-size: 17px; } .einstreu-savings-amount { font-size: 13px; } /* BETHEME MOBILE OVERRIDE - Einheitliches Aussehen auf Mobile */ .mfn-product-badges-left .einstreu-price-table-auto, .mfn-product-badges-right .einstreu-price-table-auto, .mfn-product-add-to-cart .einstreu-price-table-auto, div .einstreu-price-table-auto { display: block !important; border: none !important; width: 100% !important; max-width: 100% !important; } .mfn-product-badges-left .einstreu-table-header-auto, .mfn-product-badges-right .einstreu-table-header-auto, .mfn-product-add-to-cart .einstreu-table-header-auto, div .einstreu-table-header-auto { display: none !important; } .mfn-product-badges-left .einstreu-table-row-auto, .mfn-product-badges-right .einstreu-table-row-auto, .mfn-product-add-to-cart .einstreu-table-row-auto, div .einstreu-table-row-auto { display: block !important; margin-bottom: 15px !important; border: 3px solid #ca8f65 !important; border-radius: 12px !important; padding: 15px !important; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); width: 100% !important; max-width: 100% !important; } .mfn-product-badges-left .einstreu-td-auto, .mfn-product-badges-right .einstreu-td-auto, .mfn-product-add-to-cart .einstreu-td-auto, div .einstreu-td-auto { padding: 0 !important; display: block !important; margin-bottom: 10px !important; } .mfn-product-badges-left .einstreu-qty-num-auto, .mfn-product-badges-right .einstreu-qty-num-auto, .mfn-product-add-to-cart .einstreu-qty-num-auto, div .einstreu-qty-num-auto { font-size: 32px !important; color: #ca8f65 !important; font-weight: 900 !important; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } .mfn-product-badges-left .einstreu-total-price-auto, .mfn-product-badges-right .einstreu-total-price-auto, .mfn-product-add-to-cart .einstreu-total-price-auto, div .einstreu-total-price-auto { font-size: 28px !important; font-weight: 900 !important; color: #ca8f65 !important; margin-bottom: 8px !important; text-align: center !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } .mfn-product-badges-left .einstreu-add-to-cart-btn, .mfn-product-badges-right .einstreu-add-to-cart-btn, .mfn-product-add-to-cart .einstreu-add-to-cart-btn, div .einstreu-add-to-cart-btn { width: 100% !important; padding: 14px 20px !important; font-size: 16px !important; justify-content: center !important; border-radius: 8px; } /* Compact Shipping Text auf Mobile */ .einstreu-compact-shipping small { font-size: 17px !important; line-height: 1.55em !important; } } /* SINGLE PRODUCT MOBILE ZENTRIERUNG */ @media (max-width: 479px) { body.single-product .einstreu-table-row-auto { margin-left: 0 !important; margin-right: 0 !important; max-width: 420px !important; width: 100% !important; } body.single-product .einstreu-compact-shipping { padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; max-width: 420px !important; width: 100% !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } body.single-product .einstreu-qty-num-auto { text-align: center !important; font-size: 32px !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } body.single-product .einstreu-total-price-auto { text-align: center !important; font-size: 28px !important; position: relative !important; left: auto !important; right: auto !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } body.single-product .einstreu-details-toggle-auto { text-align: center !important; } body.single-product .einstreu-add-to-cart-btn { width: 100% !important; padding: 12px 20px !important; font-size: 16px !important; text-align: center !important; } body.single-product .einstreu-bulk-notice { position: relative; left: auto !important; margin-top: 15px !important; padding: 10px !important; } } /* EXTRA KLEINE SCREENS */ @media (max-width: 425px) { /* Footer Sticky Menu für kleine Screens */ .mfn-footer-stickymenu ul { overflow: visible; height: 85px !important; max-width: 325px; } /* EXTRA KLEIN: Modal noch kompakter */ .einstreu-modal-header { padding: 20px 15px 12px !important; } .einstreu-modal-close { top: 8px !important; right: 8px !important; width: 32px !important; height: 32px !important; font-size: 20px !important; } /* Products Price Table */ .products .einstreu-price-table-auto { width: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; } .products .einstreu-compact-shipping small { font-size: 15px !important; } .products .einstreu-bulk-notice { width: 100% !important; margin-bottom: 5px !important; } /* MFN Product Badges Left - Zentrierungsregeln */ .mfn-product-badges-left div .einstreu-qty-badge-auto { position: relative !important; width: 100% !important; text-align: center !important; max-width: 100%; left: auto !important; right: auto !important; margin: 0 auto !important; transform: none !important; } .mfn-product-badges-left .einstreu-best-deal-auto .einstreu-savings-badge-auto { width: 100%; max-width: 100%; position: relative; font-size: 15px; } .mcb-item-shop_products-inner .mfn-woo-products .mfn-product-badges-left .mfn-product-li-item .mfn-after-shop-loop-item-title .einstreu-compact-shipping div .einstreu-total-result .einstreu-price-table-auto .einstreu-best-deal-auto .einstreu-td-savings-auto .einstreu-savings-badge-auto { left: auto !important; transform: translatex(0px) translatey(0px) !important; } .mfn-product-badges-left div .einstreu-savings-label-auto { font-size: 13px; } .mfn-product-badges-left div .einstreu-savings-amount-auto { font-size: 13px !important; } .mfn-product-badges-left div .einstreu-td-total-auto { transform: translatex(0px) translatey(0px); } /* Preis zentrieren - KRITISCH für Symmetrie */ .mfn-product-badges-left div .einstreu-total-price-auto { display: inline-block !important; position: relative !important; left: auto !important; right: auto !important; margin: 8px auto 0 auto !important; transform: none !important; text-align: center !important; width: 100%; } .vb-item .mcb-item-shop_products-inner .mfn-woo-products .mfn-product-badges-left .mfn-product-li-item .mfn-after-shop-loop-item-title .einstreu-compact-shipping div .einstreu-total-result .einstreu-price-table-auto .einstreu-best-deal-auto .einstreu-td-action-auto { width: 100% !important; max-width: 100% !important; } .mfn-product-badges-left .einstreu-best-deal-auto .einstreu-td-action-auto { left: 0px !important; margin-bottom: 0px !important; } .vb-item .mcb-item-shop_products-inner .mfn-woo-products .mfn-product-badges-left .mfn-product-li-item .mfn-after-shop-loop-item-title .einstreu-compact-shipping div .einstreu-total-result .einstreu-price-table-auto .einstreu-table-row-auto .einstreu-td-action-auto { max-width: 100% !important; width: 100% !important; } .mfn-product-badges-left div .einstreu-td-action-auto { margin-bottom: 0px !important; } .mfn-product-badges-left div .einstreu-best-deal-auto { transform: translatex(0px) translatey(0px); } .mfn-product-badges-left div .einstreu-table-row-auto { transform: translatex(0px) translatey(0px); } .mfn-wrapper-for-wraps .vb-item .mcb-item-shop_products-inner .mfn-woo-products .mfn-product-badges-left .mfn-product-li-item .mfn-after-shop-loop-item-title .einstreu-compact-shipping div .einstreu-total-result .einstreu-price-table-auto .einstreu-table-row-auto { width: 100% !important; } /* Menge (Badge) zentrieren - KRITISCH für Symmetrie */ .mfn-product-badges-left div .einstreu-td-qty-auto { display: inline-block !important; position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; transform: none !important; text-align: center !important; } /* #shop Selektoren - Zentrierungsregeln */ #shop div .einstreu-td-action-auto { max-width: 100%; transform: translatex(0px) translatey(0px); } #shop div .einstreu-add-to-cart-btn { left: 0px; width: 100%; max-width: 100% !important; } #shop div .einstreu-table-row-auto { display: inline-block; transform: translatex(0px) translatey(0px) !important; } #shop div .einstreu-td-total-auto { max-width: 100% !important; width: 100px !important; } #shop .einstreu-total-result a { margin-top: 0px; left: 0px !important; width: 100%; max-width: 100%; top: 0px !important; } /* BDI Zentrierung - WICHTIG für symmetrische Preise */ #shop .einstreu-total-price-auto bdi { display: block !important; width: auto !important; margin: 0 auto !important; text-align: center !important; } #shop div .einstreu-total-price-auto { max-width: 100%; margin-left: auto; margin-right: auto; left: 0px; } #shop .einstreu-total-price-auto .woocommerce-Price-amount { max-width: 100%; margin-left: auto; margin-right: auto; } } @media (max-width: 380px) { .einstreu-qty-num-auto { font-size: 28px; } .einstreu-total-price-auto { font-size: 24px; } .einstreu-add-to-cart-btn { padding: 12px 16px; font-size: 14px; } .einstreu-cart-icon { font-size: 16px; } .einstreu-cart-text { font-size: 14px; } /* BETHEME OVERRIDE - Extra kleine Screens */ .mfn-product-badges-left .einstreu-qty-num-auto, .mfn-product-badges-right .einstreu-qty-num-auto, .mfn-product-add-to-cart .einstreu-qty-num-auto, div .einstreu-qty-num-auto { font-size: 28px !important; } .mfn-product-badges-left .einstreu-total-price-auto, .mfn-product-badges-right .einstreu-total-price-auto, .mfn-product-add-to-cart .einstreu-total-price-auto, div .einstreu-total-price-auto { font-size: 24px !important; } .mfn-product-badges-left .einstreu-add-to-cart-btn, .mfn-product-badges-right .einstreu-add-to-cart-btn, .mfn-product-add-to-cart .einstreu-add-to-cart-btn, div .einstreu-add-to-cart-btn { padding: 12px 16px !important; font-size: 14px !important; } } /* ============================================ FLEXIBLE & RESPONSIVE TABELLEN - OVERRIDE Automatische proportionale Anpassung ============================================ */ /* Tabelle: 100% Container-Breite */ .einstreu-price-table-auto { width: 100% !important; max-width: 100% !important; min-width: min(380px, 100%) !important; } .products .einstreu-price-table-auto, body .products .einstreu-price-table-auto { width: 100% !important; max-width: 100% !important; } /* Button: 100% der Spaltenbreite */ .einstreu-add-to-cart-btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 6px 8px !important; /* zoom-stabil */ font-size: 0.875rem !important; /* 14px - zoom-stabil */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Responsive Schriftgrößen mit clamp() */ .einstreu-qty-num-auto { font-size: 1.375rem !important; /* 22px - zoom-stabil */ } .einstreu-total-price-auto { font-size: 1.125rem !important; /* 18px - zoom-stabil */ } .einstreu-savings-amount-auto { font-size: 0.8125rem !important; /* 13px - zoom-stabil */ } .einstreu-details-toggle-auto { font-size: 0.6875rem !important; /* 11px - zoom-stabil */ } .einstreu-total-details-auto { font-size: 0.5625rem !important; /* 9px - zoom-stabil */ } /* BeTheme Overrides */ .mfn-product-badges-left .einstreu-add-to-cart-btn, .mfn-product-badges-right .einstreu-add-to-cart-btn, .mfn-product-add-to-cart .einstreu-add-to-cart-btn, div .einstreu-add-to-cart-btn, body .products .einstreu-add-to-cart-btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; font-size: 0.875rem !important; /* 14px - zoom-stabil */ padding: 6px 8px !important; /* zoom-stabil */ } /* ============================================ STICKY FOOTER MENU AUSBLENDEN - MOBILE & TABLET ============================================ */ /* Alle mobilen und Tablet-Geräte bis 1240px */ @media only screen and (max-width: 1240px) { .mfn-footer-stickymenu ul, .mfn-footer-stickymenu { display: none !important; } } /* ============================================ WP CALL BUTTON FESTE POSITION - MOBILE & TABLET Links unten fixiert (gegenüber Captcha rechts unten) ============================================ */ /* Alle mobilen und Tablet-Geräte bis 1240px */ @media only screen and (max-width: 1240px) { .wp-call-button, #wp-call-button, .call-now-button, a.call-now-button { position: fixed !important; bottom: 20px !important; left: 20px !important; right: auto !important; top: auto !important; z-index: 999999 !important; margin: 0 !important; } } /* Für kleinere Mobile Geräte - etwas mehr Abstand vom Rand */ @media only screen and (max-width: 480px) { .wp-call-button, #wp-call-button, .call-now-button, a.call-now-button { bottom: 15px !important; left: 15px !important; } } /* ============================================ GOOGLE ADS FIX: PLZ-CTA für Besucher ohne PLZ Version 1.0.9-GOOGLE-ADS-FIX ============================================ */ /* Container für PLZ-CTA */ .einstreu-compact-shipping.einstreu-no-plz { margin: 15px 0; } /* CTA Box */ .einstreu-plz-cta { animation: einstreu-pulse 2s ease-in-out infinite; } @keyframes einstreu-pulse { 0%, 100% { box-shadow: 0 2px 8px rgba(202, 143, 101, 0.3); } 50% { box-shadow: 0 4px 16px rgba(202, 143, 101, 0.5); } } /* CTA Button Hover */ .einstreu-open-plz-modal:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } /* Mobile Optimierung */ @media (max-width: 768px) { .einstreu-plz-cta { padding: 12px !important; } .einstreu-plz-cta > div:first-child { font-size: 14px !important; } .einstreu-plz-cta > div:nth-child(2) { font-size: 12px !important; } .einstreu-open-plz-modal { font-size: 13px !important; padding: 8px 20px !important; } } /* Produkt-Seite: CTA prominenter */ .single-product .einstreu-plz-cta { padding: 20px !important; margin: 20px 0 !important; } .single-product .einstreu-plz-cta > div:first-child { font-size: 18px !important; } .single-product .einstreu-open-plz-modal { font-size: 16px !important; padding: 12px 28px !important; } /* ============================================================================ 🛒 CHECKOUT MOBILE FIX - Responsive Order Review Table ============================================================================ Problem: BeTheme + WooCommerce CSS verursacht Layout-Bruch auf kleinen Screens Lösung: Aggressive mobile-responsive Regeln mit hoher Spezifität ============================================================================ */ /* Basis: Alle Screen-Größen - Verhindere horizontales Scrollen */ body.woocommerce-checkout #order_review, body.woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order-table { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* Tabelle selbst flexibel machen */ body.woocommerce-checkout #order_review table, body.woocommerce-checkout .woocommerce-checkout-review-order-table table, .woocommerce-checkout #order_review table, .woocommerce-checkout .woocommerce-checkout-review-order-table table { width: 100% !important; max-width: 100% !important; table-layout: auto !important; } /* Tablet & Mobile: 768px und kleiner */ @media only screen and (max-width: 768px) { /* Checkout Container */ body.woocommerce-checkout #order_review, body.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading { width: 100% !important; max-width: 100% !important; padding: 15px 10px !important; margin: 0 !important; box-sizing: border-box !important; } /* Review Order Table */ body.woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Tabelle responsive */ body.woocommerce-checkout #order_review table, body.woocommerce-checkout .shop_table, .woocommerce-checkout #order_review table, .woocommerce-checkout .shop_table { width: 100% !important; max-width: 100% !important; font-size: 14px !important; border-collapse: collapse !important; } /* Table Cells */ body.woocommerce-checkout #order_review td, body.woocommerce-checkout #order_review th, .woocommerce-checkout #order_review td, .woocommerce-checkout #order_review th { padding: 8px 5px !important; word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; } /* Produktname - mehr Platz */ body.woocommerce-checkout #order_review .product-name, .woocommerce-checkout #order_review .product-name { max-width: 60% !important; font-size: 13px !important; } /* Preis - kompakter */ body.woocommerce-checkout #order_review .product-total, .woocommerce-checkout #order_review .product-total { text-align: right !important; font-size: 14px !important; white-space: nowrap !important; } } /* Kleine Smartphones: 600px und kleiner */ @media only screen and (max-width: 600px) { /* Noch kompakterer Checkout */ body.woocommerce-checkout #order_review, .woocommerce-checkout #order_review { padding: 10px 5px !important; } /* Tabelle noch kleiner */ body.woocommerce-checkout #order_review table, .woocommerce-checkout #order_review table { font-size: 12px !important; } /* Cells noch kompakter */ body.woocommerce-checkout #order_review td, body.woocommerce-checkout #order_review th, .woocommerce-checkout #order_review td, .woocommerce-checkout #order_review th { padding: 6px 3px !important; font-size: 12px !important; } /* Produktname - maximale Breite nutzen */ body.woocommerce-checkout #order_review .product-name, .woocommerce-checkout #order_review .product-name { max-width: 55% !important; font-size: 12px !important; } } /* Sehr kleine Smartphones: 483px und kleiner - KRITISCHER BREAKPOINT */ @media only screen and (max-width: 483px) { /* FORCE: Alles auf 100% Breite */ body.woocommerce-checkout #order_review, body.woocommerce-checkout #order_review_heading, body.woocommerce-checkout .woocommerce-checkout-review-order-table, body.woocommerce-checkout #order_review table, .woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading, .woocommerce-checkout .woocommerce-checkout-review-order-table, .woocommerce-checkout #order_review table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Container: Kein Padding das Platz wegnimmt */ body.woocommerce-checkout #order_review, .woocommerce-checkout #order_review { padding: 8px 0 !important; box-sizing: border-box !important; } /* Tabelle: Minimale Font-Size aber lesbar */ body.woocommerce-checkout #order_review table, .woocommerce-checkout #order_review table { font-size: 11px !important; } /* Cells: Ultra-kompakt */ body.woocommerce-checkout #order_review td, body.woocommerce-checkout #order_review th, .woocommerce-checkout #order_review td, .woocommerce-checkout #order_review th { padding: 5px 2px !important; font-size: 11px !important; line-height: 1.3 !important; } /* Produktname: Stack-Layout simulieren wenn nötig */ body.woocommerce-checkout #order_review .product-name, .woocommerce-checkout #order_review .product-name { max-width: 50% !important; font-size: 11px !important; line-height: 1.3 !important; } /* Preis: Rechts ausrichten, kompakt */ body.woocommerce-checkout #order_review .product-total, .woocommerce-checkout #order_review .product-total { font-size: 12px !important; font-weight: 600 !important; } /* Gesamt-Zeile: Hervorheben */ body.woocommerce-checkout #order_review .order-total th, body.woocommerce-checkout #order_review .order-total td, .woocommerce-checkout #order_review .order-total th, .woocommerce-checkout #order_review .order-total td { font-size: 13px !important; font-weight: 700 !important; padding: 8px 2px !important; } } /* Extra kleine Screens: 380px und kleiner */ @media only screen and (max-width: 380px) { /* Notfall: Stack-ähnliches Layout */ body.woocommerce-checkout #order_review .product-name, .woocommerce-checkout #order_review .product-name { display: block !important; max-width: 100% !important; margin-bottom: 3px !important; } body.woocommerce-checkout #order_review .product-total, .woocommerce-checkout #order_review .product-total { display: block !important; text-align: left !important; font-weight: 700 !important; } } /* ============================================================================ BETHEME SPEZIFISCHE CHECKOUT FIXES ============================================================================ BeTheme verwendet verschachtelte Container (.mcb-section, .vb-item, etc.) Diese Regeln überschreiben BeTheme's Layout-Einschränkungen ============================================================================ */ /* BeTheme Checkout Containers - Force Full Width */ @media only screen and (max-width: 768px) { /* BeTheme Section Wrapper */ body.woocommerce-checkout .mcb-section, body.woocommerce-checkout .mcb-section-inner, body.woocommerce-checkout .vb-item, body.woocommerce-checkout .mfn-wrapper-for-wraps, .woocommerce-checkout .mcb-section, .woocommerce-checkout .mcb-section-inner, .woocommerce-checkout .vb-item, .woocommerce-checkout .mfn-wrapper-for-wraps { width: 100% !important; max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; } /* BeTheme Column Wrapper */ body.woocommerce-checkout .column, body.woocommerce-checkout .columns, .woocommerce-checkout .column, .woocommerce-checkout .columns { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } @media only screen and (max-width: 483px) { /* Ultra-kompakt auf sehr kleinen Screens */ body.woocommerce-checkout .mcb-section, body.woocommerce-checkout .mcb-section-inner, body.woocommerce-checkout .vb-item, body.woocommerce-checkout .mfn-wrapper-for-wraps, .woocommerce-checkout .mcb-section, .woocommerce-checkout .mcb-section-inner, .woocommerce-checkout .vb-item, .woocommerce-checkout .mfn-wrapper-for-wraps { padding-left: 5px !important; padding-right: 5px !important; } } /* ============================================================================ 🔧 ALLGEMEINE WOOCOMMERCE CHECKOUT OPTIMIERUNGEN ============================================================================ */ /* Checkout Form Felder - Mobile optimiert */ @media only screen and (max-width: 768px) { body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-shipping-fields, body.woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields { width: 100% !important; max-width: 100% !important; padding: 10px !important; box-sizing: border-box !important; } /* Input Felder */ body.woocommerce-checkout input[type="text"], body.woocommerce-checkout input[type="email"], body.woocommerce-checkout input[type="tel"], body.woocommerce-checkout select, body.woocommerce-checkout textarea, .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout select, .woocommerce-checkout textarea { width: 100% !important; max-width: 100% !important; font-size: 16px !important; /* Verhindert Auto-Zoom auf iOS */ box-sizing: border-box !important; } /* Buttons */ body.woocommerce-checkout .button, body.woocommerce-checkout #place_order, .woocommerce-checkout .button, .woocommerce-checkout #place_order { width: 100% !important; max-width: 100% !important; padding: 15px 20px !important; font-size: 16px !important; box-sizing: border-box !important; } } @media only screen and (max-width: 483px) { /* Noch kompaktere Form-Felder */ body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-shipping-fields, body.woocommerce-checkout .woocommerce-additional-fields, .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields { padding: 5px !important; } } /* ============================================================================ 🚫 PAYPAL WERBUNG ENTFERNEN - Checkout sauber halten ============================================================================ PayPal zeigt automatisch "In 3 Raten zahlen" etc. - Stört den Checkout-Flow ============================================================================ */ /* PayPal Messages komplett verstecken */ .ppcp-messages, .ppcp-messages span, .ppcp-messages span iframe, .ppcp-messages iframe, .woocommerce-checkout .ppcp-messages, body.woocommerce-checkout .ppcp-messages, #order_review .ppcp-messages, .woocommerce-checkout-payment .ppcp-messages { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; opacity: 0 !important; overflow: hidden !important; } /* PayPal Messaging Container */ [data-pp-message], .payment_box .ppcp-messages, .wc_payment_method .ppcp-messages { display: none !important; } /* Falls PayPal andere Klassen verwendet */ .paypal-message, .paypal-credit-message, .paypal-installments-message, [class*="paypal-message"], [class*="ppcp-message"] { display: none !important; } /* ============================================================================ PRODUKTSEITE: Braune CTA-Box entfernen (redundant) ============================================================================ Produktseite hat bereits grüne Tabelle oben → braune Box unten nicht nötig Shop/Kategorie-Seiten behalten die braune Box (wichtig für Erstkontakt) ============================================================================ */ /* NUR auf Produktseiten: Braune CTA verstecken */ body.single-product .einstreu-compact-shipping.einstreu-no-plz, body.single-product .einstreu-plz-cta, .single-product .einstreu-compact-shipping.einstreu-no-plz, .single-product .einstreu-plz-cta, body.single-product .mfn-product-add-to-cart .einstreu-compact-shipping .einstreu-plz-cta, .single-product .mfn-product-add-to-cart .einstreu-compact-shipping .einstreu-plz-cta { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Sicherstellen dass grüne Version IMMER sichtbar auf Produktseite */ body.single-product .einstreu-compact-shipping.einstreu-has-plz, body.single-product .einstreu-has-plz-table, .single-product .einstreu-compact-shipping.einstreu-has-plz, .single-product .einstreu-has-plz-table { display: block !important; }