/* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-LAYOUT-FIX-01 */ /* TITEL: Layout Fix | Horizontalen Scrollbalken / Überhang blockieren */ /* SCOPE: Global für das gesamte Dokument (html, body) */ /* EFFEKT: Verhindert seitliches Verschieben und Wackeln auf Mobilgeräten */ /* ========================================================================== */ html, body { max-width: 100% !important; /* 🟠 Überhang-Verhalten bei Bedarf anpassbar */ overflow-x: hidden !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Horizontal Scroll blockieren / CSS-LAYOUT-FIX-01 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-SCROLL-TOP-07 */ /* TITEL: Scroll to Top Button | Sichtbarkeit & Animation */ /* WICHTIG: TEIL 1/2 (CSS) – Gehört zwingend zu Teil 2/2: */ /* PHP-SCROLL-TOP-03 in inc/frontend-ux/frontend-ux.php */ /* KLASSE: .scroll-to-top-btn (wird dynamisch mit .is-visible gesteuert) */ /* ========================================================================== */ body .scroll-to-top-btn { opacity: 0 !important; visibility: hidden !important; /* 🟠 Übergangsdauer und Easing anpassbar */ transition: opacity 0.3s ease, visibility 0.3s ease !important; cursor: pointer !important; } body .scroll-to-top-btn.is-visible { opacity: 1 !important; visibility: visible !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Scroll to Top Button / CSS-SCROLL-TOP-07 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-TYPO-HYPHEN-08 */ /* TITEL: Typografie | Automatische Silbentrennung Überschriften (H1-H6) */ /* SCOPE: Global für alle Überschriften auf der gesamten Website */ /* EFFEKT: Vermeidet unschöne Umbrüche & Layout-Bruch auf Mobilgeräten */ /* ========================================================================== */ body h1, body h2, body h3, body h4, body h5, body h6 { /* 🟠 Silbentrennungs-Verhalten bei Bedarf anpassbar */ -webkit-hyphens: auto !important; /* Safari / WebKit */ -ms-hyphens: auto !important; /* Ältere Browser */ hyphens: auto !important; /* Standard */ overflow-wrap: break-word !important; /* Fallback für überlange Wörter */ word-wrap: break-word !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Silbentrennung Überschriften / CSS-TYPO-HYPHEN-08 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-ADMIN-BAR-09 */ /* TITEL: Fix WP-Adminleiste Versatz | Elementor Pop-ups & Lightbox */ /* SCOPE: Nur für eingeloggte Administratoren (body.admin-bar) */ /* EFFEKT: Kompensiert 32px (Desktop) bzw. 46px (Mobile) Leisten-Höhe */ /* ========================================================================== */ body.admin-bar .elementor-popup-modal, body.admin-bar .dialog-widget.dialog-lightbox-widget { position: fixed !important; /* 🟠 Höhe der WP Admin Bar auf Desktop */ top: 32px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 999999 !important; } @media screen and (max-width: 782px) { body.admin-bar .elementor-popup-modal, body.admin-bar .dialog-widget.dialog-lightbox-widget { /* 🟠 Höhe der WP Admin Bar auf Mobile */ top: 46px !important; } } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Fix WP-Adminleiste Versatz / CSS-ADMIN-BAR-09 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-SCROLL-SCALE-12 */ /* TITEL: Scroll-Trigger Suite V2, V3 & V4 (Effekt-Katalog) */ /* WICHTIG: TEIL 1/2 (CSS) – Gehört zwingend zu Teil 2/2: */ /* PHP-SCROLL-TOUCH-09 in inc/frontend-ux/frontend-ux.php */ /* BESCHREIBUNG: Zentrale Steuerung für Zentrums-Skalierung im Viewport. */ /* */ /* KLASSEN ZUM KOPIEREN: */ /* .scroll-scale-center_v2 */ /* .scroll-scale-center_v2_2 */ /* .scroll-scale-center_v2_3 */ /* .scroll-scale-center_v3 */ /* .scroll-scale-center_v3_2 */ /* .scroll-scale-center_v3_3 */ /* .scroll-scale-center_v4 */ /* .scroll-scale-center_v4_2 */ /* .scroll-scale-center_v4_3 */ /* */ /* EFFEKT-ÜBERSICHT: */ /* • v2: Scale (1.1) + Akzentfarbe (1cc6d10) | Allround */ /* • v2_2: Scale (1.1) + Akzentfarbe (1cc6d10) | Nur Desktop*/ /* • v2_3: Scale (1.1) + Akzentfarbe (1cc6d10) | Nur Touch */ /* • v3: Nur Scale (1.1) | Farben unberührt | Allround */ /* • v3_2: Nur Scale (1.1) | Farben unberührt | Nur Desktop*/ /* • v3_3: Nur Scale (1.1) | Farben unberührt | Nur Touch */ /* • v4: Nur Scale (1.1) | Farben unberührt | Allround */ /* • v4_2: Nur Scale (1.1) | Farben unberührt | Nur Desktop*/ /* • v4_3: Nur Scale (1.1) | Farben unberührt | Nur Touch */ /* HOOK / KLASSE: .scroll-scale-center_v2 bis .scroll-scale-center_v2_3 */ /* .scroll-scale-center_v3 bis .scroll-scale-center_v3_3 */ /* .scroll-scale-center_v4 bis .scroll-scale-center_v4_3 */ /* TYPO-REFERENZ ID: N/A */ /* FARB-REFERENZ ID: 1cc6d10 (SI_Cr_Acc_1 / #3BB6BF) */ /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* A. V2-SERIE: SKALIERUNG + FARBWECHSEL */ /* -------------------------------------------------------------------------- */ /* 1. V2 Allround (Alle Geräte) */ body .scroll-scale-center_v2 { /* 🟠 Übergangsdauer für Skalierung */ transition: transform 0.5s ease-out !important; will-change: transform; } body .scroll-scale-center_v2 .elementor-icon, body .scroll-scale-center_v2 .elementor-icon svg, body .scroll-scale-center_v2 .elementor-icon-box-title, body .scroll-scale-center_v2 .elementor-icon-box-title a, body .scroll-scale-center_v2 .elementor-icon-box-description { /* 🟠 Übergangsdauer für Farbwechsel */ transition: color 0.35s ease-out, fill 0.35s ease-out !important; } body .scroll-scale-center_v2.is-in-center { /* 🟠 Skalierungsfaktor */ transform: scale(1.1) !important; } body .scroll-scale-center_v2.is-in-center .elementor-icon, body .scroll-scale-center_v2.is-in-center .elementor-icon svg, body .scroll-scale-center_v2.is-in-center .elementor-icon-box-title, body .scroll-scale-center_v2.is-in-center .elementor-icon-box-title a, body .scroll-scale-center_v2.is-in-center .elementor-icon-box-description { color: var(--e-global-color-1cc6d10) !important; fill: var(--e-global-color-1cc6d10) !important; } /* 2. V2_2 Nur Desktop / Maus-Geräte */ @media (hover: hover) and (pointer: fine) { body .scroll-scale-center_v2_2 { /* 🟠 Übergangsdauer für Skalierung */ transition: transform 0.5s ease-out !important; will-change: transform; } body .scroll-scale-center_v2_2 .elementor-icon, body .scroll-scale-center_v2_2 .elementor-icon svg, body .scroll-scale-center_v2_2 .elementor-icon-box-title, body .scroll-scale-center_v2_2 .elementor-icon-box-title a, body .scroll-scale-center_v2_2 .elementor-icon-box-description { /* 🟠 Übergangsdauer für Farbwechsel */ transition: color 0.35s ease-out, fill 0.35s ease-out !important; } body .scroll-scale-center_v2_2.is-in-center { /* 🟠 Skalierungsfaktor */ transform: scale(1.1) !important; } body .scroll-scale-center_v2_2.is-in-center .elementor-icon, body .scroll-scale-center_v2_2.is-in-center .elementor-icon svg, body .scroll-scale-center_v2_2.is-in-center .elementor-icon-box-title, body .scroll-scale-center_v2_2.is-in-center .elementor-icon-box-title a, body .scroll-scale-center_v2_2.is-in-center .elementor-icon-box-description { color: var(--e-global-color-1cc6d10) !important; fill: var(--e-global-color-1cc6d10) !important; } } /* 3. V2_3 Nur Touchscreens / Mobilgeräte */ @media (hover: none) and (pointer: coarse) { body .scroll-scale-center_v2_3 { /* 🟠 Übergangsdauer für Skalierung */ transition: transform 0.5s ease-out !important; will-change: transform; } body .scroll-scale-center_v2_3 .elementor-icon, body .scroll-scale-center_v2_3 .elementor-icon svg, body .scroll-scale-center_v2_3 .elementor-icon-box-title, body .scroll-scale-center_v2_3 .elementor-icon-box-title a, body .scroll-scale-center_v2_3 .elementor-icon-box-description { /* 🟠 Übergangsdauer für Farbwechsel */ transition: color 0.35s ease-out, fill 0.35s ease-out !important; } body .scroll-scale-center_v2_3.is-in-center { /* 🟠 Skalierungsfaktor */ transform: scale(1.1) !important; } body .scroll-scale-center_v2_3.is-in-center .elementor-icon, body .scroll-scale-center_v2_3.is-in-center .elementor-icon svg, body .scroll-scale-center_v2_3.is-in-center .elementor-icon-box-title, body .scroll-scale-center_v2_3.is-in-center .elementor-icon-box-title a, body .scroll-scale-center_v2_3.is-in-center .elementor-icon-box-description { color: var(--e-global-color-1cc6d10) !important; fill: var(--e-global-color-1cc6d10) !important; } } /* -------------------------------------------------------------------------- */ /* B. V3-SERIE & V4-SERIE: REINE SKALIERUNG (FARBE UNBERÜHRT) */ /* (V3 & V4 nutzen identische Styles, Korridor wird via JS gesteuert) */ /* -------------------------------------------------------------------------- */ /* 4. V3 & V4 Allround (Alle Geräte) */ body .scroll-scale-center_v3, body .scroll-scale-center_v4 { /* 🟠 Übergangsdauer für Skalierung */ transition: transform 0.5s ease-out !important; will-change: transform; } body .scroll-scale-center_v3.is-in-center, body .scroll-scale-center_v4.is-in-center { /* 🟠 Skalierungsfaktor */ transform: scale(1.1) !important; } /* 5. V3_2 & V4_2 Nur Desktop / Maus-Geräte */ @media (hover: hover) and (pointer: fine) { body .scroll-scale-center_v3_2, body .scroll-scale-center_v4_2 { /* 🟠 Übergangsdauer für Skalierung */ transition: transform 0.5s ease-out !important; will-change: transform; } body .scroll-scale-center_v3_2.is-in-center, body .scroll-scale-center_v4_2.is-in-center { /* 🟠 Skalierungsfaktor */ transform: scale(1.1) !important; } } /* 6. V3_3 & V4_3 Nur Touchscreens / Mobilgeräte */ @media (hover: none) and (pointer: coarse) { body .scroll-scale-center_v3_3, body .scroll-scale-center_v4_3 { /* 🟠 Übergangsdauer für Skalierung */ transition: transform 0.5s ease-out !important; will-change: transform; } body .scroll-scale-center_v3_3.is-in-center, body .scroll-scale-center_v4_3.is-in-center { /* 🟠 Skalierungsfaktor */ transform: scale(1.1) !important; } } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Scroll-Trigger Suite / CSS-SCROLL-SCALE-12 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-FORM-MSGBOX-17 */ /* TITEL: Elementor Formulare | Benachrichtigungs-Boxen Styling */ /* BESCHREIBUNG: Gestaltete Hintergrund-Boxen für Formularmeldungen */ /* inklusive Support-Avatar bei Erfolgsmeldung & smarter */ /* Fade-In-Animation beim Erscheinen. */ /* CSS-KLASSEN: .m-return-form, .m-contact-form, .m-faq-form, */ /* .custom-acceptance-form */ /* FARB-REFERENZEN: Erfolg: ff81f4e (BG Hellgrün) | 5721865 (Text Grün) */ /* Fehler: #fde8e8 (BG Hellrot) | 215b9bc (Text Rot) */ /* Hinweis: #fef08a (BG Hellgelb) | #713f12 (Text Braun) */ /* ========================================================================== */ /* 1. Basis-Container für Formularmeldungen */ body .m-return-form .elementor-message, body .m-contact-form .elementor-message, body .m-faq-form .elementor-message, body .custom-acceptance-form .elementor-message { box-sizing: border-box !important; text-align: left !important; line-height: 1.5 !important; /* 🟠 Innenabstand, Aussenabstand & Eckenrundung */ padding: 16px 20px !important; margin-top: 20px !important; border-radius: 6px !important; animation: formMsgSlideFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; will-change: transform, opacity; } @keyframes formMsgSlideFade { 0% { opacity: 0; transform: translateY(12px) scale(0.99); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* 2. Erfolgsmeldung (Success) mit Avatar */ body .m-return-form .elementor-message.elementor-message-success, body .m-contact-form .elementor-message.elementor-message-success, body .m-faq-form .elementor-message.elementor-message-success { display: flex !important; align-items: center !important; /* 🟠 Abstand zwischen Avatar-Bild und Text */ gap: 16px !important; background-color: var(--e-global-color-ff81f4e) !important; border: 1px solid var(--e-global-color-5721865) !important; color: var(--e-global-color-5721865) !important; } body .m-return-form .elementor-message.elementor-message-success::before, body .m-contact-form .elementor-message.elementor-message-success::before, body .m-faq-form .elementor-message.elementor-message-success::before { content: '' !important; display: block !important; flex-shrink: 0 !important; width: 52px !important; height: 52px !important; background-image: url('https://kevin123.de/wp-content/uploads/2026/09/Kundensupport.png') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 50% !important; border: 2px solid #ffffff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; } /* 🟠 Sonderregel Newsletter: Erfolgsmeldung unterdrücken (läuft über Pop-up) */ body .custom-acceptance-form .elementor-message.elementor-message-success { display: none !important; } /* 3. Fehler- & Validierungsmeldungen */ body .m-return-form .elementor-message.elementor-message-danger, body .m-return-form .elementor-message.elementor-message-error, body .m-contact-form .elementor-message.elementor-message-danger, body .m-contact-form .elementor-message.elementor-message-error, body .m-faq-form .elementor-message.elementor-message-danger, body .m-faq-form .elementor-message.elementor-message-error, body .custom-acceptance-form .elementor-message.elementor-message-danger, body .custom-acceptance-form .elementor-message.elementor-message-error { display: block !important; background-color: #fde8e8 !important; border: 1px solid var(--e-global-color-215b9bc) !important; color: var(--e-global-color-215b9bc) !important; } /* 4. Hinweis- & Statusmeldungen */ body .m-return-form .elementor-message.elementor-message-help, body .m-contact-form .elementor-message.elementor-message-help, body .m-faq-form .elementor-message.elementor-message-help, body .custom-acceptance-form .elementor-message.elementor-message-help { display: block !important; background-color: #fef08a !important; border: 1px solid #eab308 !important; color: #713f12 !important; } @media (max-width: 767px) { body .m-return-form .elementor-message, body .m-contact-form .elementor-message, body .m-faq-form .elementor-message, body .custom-acceptance-form .elementor-message { padding: 14px 16px !important; margin-top: 16px !important; margin-bottom: 24px !important; font-size: 13.5px !important; line-height: 1.45 !important; } body .m-return-form .elementor-message.elementor-message-success, body .m-contact-form .elementor-message.elementor-message-success, body .m-faq-form .elementor-message.elementor-message-success { flex-direction: row !important; align-items: flex-start !important; gap: 12px !important; } body .m-return-form .elementor-message.elementor-message-success::before, body .m-contact-form .elementor-message.elementor-message-success::before, body .m-faq-form .elementor-message.elementor-message-success::before { width: 44px !important; height: 44px !important; margin-top: 2px !important; } } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Elementor Formulare Boxen Styling / CSS-FORM-MSGBOX-17 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-FORM-FIELDS-18 */ /* TITEL: Elementor Formulare | Schatten-System für Eingabefelder */ /* CSS-KLASSEN: has-field-shadow-s, has-field-shadow-m, */ /* has-field-shadow-l, has-field-shadow-xl, */ /* has-field-shadow-xxl */ /* ATOMIC-REFERENZ: Bx_Sn_S bis Bx_Sn_Xxl (inkl. weicher Fokus-Stufe) */ /* ========================================================================== */ /* 1. Schatten S (Bx_Sn_S: 1px 2px 2px 0px 5% | Fokus: M) */ body .has-field-shadow-s .elementor-field-group:not(.elementor-field-type-acceptance):not(.elementor-field-type-submit) .elementor-field { box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.05) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease !important; } body .has-field-shadow-s .elementor-field-group .elementor-field:focus { box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.08) !important; } /* 2. Schatten M (Bx_Sn_M: 2px 4px 4px 0px 8% | Fokus: L) */ body .has-field-shadow-m .elementor-field-group:not(.elementor-field-type-acceptance):not(.elementor-field-type-submit) .elementor-field { box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.08) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease !important; } body .has-field-shadow-m .elementor-field-group .elementor-field:focus { box-shadow: 4px 12px 12px 0px rgba(0, 0, 0, 0.10) !important; } /* 3. Schatten L (Bx_Sn_L: 4px 12px 12px 0px 10% | Fokus: XL) */ body .has-field-shadow-l .elementor-field-group:not(.elementor-field-type-acceptance):not(.elementor-field-type-submit) .elementor-field { box-shadow: 4px 12px 12px 0px rgba(0, 0, 0, 0.10) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease !important; } body .has-field-shadow-l .elementor-field-group .elementor-field:focus { box-shadow: 8px 24px 24px 0px rgba(0, 0, 0, 0.12) !important; } /* 4. Schatten XL (Bx_Sn_Xl: 8px 24px 24px 0px 12% | Fokus: XXL) */ body .has-field-shadow-xl .elementor-field-group:not(.elementor-field-type-acceptance):not(.elementor-field-type-submit) .elementor-field { box-shadow: 8px 24px 24px 0px rgba(0, 0, 0, 0.12) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease !important; } body .has-field-shadow-xl .elementor-field-group .elementor-field:focus { box-shadow: 12px 36px 36px 0px rgba(0, 0, 0, 0.15) !important; } /* 5. Schatten XXL (Bx_Sn_Xxl: 12px 36px 36px 0px 15% | Fokus: Intensiviert) */ body .has-field-shadow-xxl .elementor-field-group:not(.elementor-field-type-acceptance):not(.elementor-field-type-submit) .elementor-field { box-shadow: 12px 36px 36px 0px rgba(0, 0, 0, 0.15) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease !important; } body .has-field-shadow-xxl .elementor-field-group .elementor-field:focus { box-shadow: 16px 48px 48px 0px rgba(0, 0, 0, 0.18) !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Elementor Formulare Schatten-System / CSS-FORM-FIELDS-18 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-BUTTON-UNIVERSAL-15 */ /* TITEL: Universal Button | Hover Lift & Bodenschatten */ /* WICHTIG: TEIL 1/1 (CSS) */ /* BESCHREIBUNG: Hebt alle Buttons dezent an (-4px) und projiziert */ /* einen ovalen Bodenschatten darunter (Standard, Atomic, */ /* Elementor Forms, WooCommerce & Newsletter Plugin). */ /* Menü-Warenkorb Icon neutral, Side-Cart Buttons vollbreit*/ /* HOOK / KLASSE: .btn-lift, a.btn-lift, .e-button-base, */ /* .elementor-button, .button, .add_to_cart_button, */ /* .tnp-submit, .tnp-field-button */ /* TYPO-REFERENZ ID: N/A */ /* FARB-REFERENZ ID: N/A */ /* ========================================================================== */ /* 1. Umgebende Wrapper & Container freigeben */ body .elementor-widget.btn-lift, body .btn-lift, body .btn-lift .elementor-widget-container, body .btn-lift .elementor-button-wrapper, body .btn-lift .elementor-field-type-submit, body .btn-lift .tnp-subscription, body .btn-lift .tnp-button-form, body .btn-lift .elementor-menu-cart__container, body .btn-lift .elementor-menu-cart__main, body .btn-lift .woocommerce-mini-cart__buttons { overflow: visible !important; } /* Spezieller Wrapper für Input-Submit im Newsletter */ body .btn-lift .tnp-field-button { position: relative !important; display: inline-block !important; overflow: visible !important; max-width: fit-content !important; } /* 2. Basis-Zustand des Buttons */ body a.btn-lift, body button.btn-lift, body .btn-lift.e-button-base, body .btn-lift .e-button-base, body .btn-lift .elementor-button, body .btn-lift .button, body .btn-lift a.add_to_cart_button, body .btn-lift button.single_add_to_cart_button, body .btn-lift button.tnp-submit, body .btn-lift input.tnp-submit { position: relative !important; overflow: visible !important; max-width: fit-content !important; box-shadow: none !important; /* 🟠 Dauer & Easing für das Anheben */ transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1) !important; will-change: transform; } /* 2.1 Menü-Warenkorb: Toggle-Icon STRIKT neutralisieren (kein Lift, kein Schatten) */ body .btn-lift .elementor-menu-cart__toggle, body .btn-lift .elementor-menu-cart__toggle *, body .elementor-widget-woocommerce-menu-cart.btn-lift .elementor-menu-cart__toggle { transform: none !important; box-shadow: none !important; } body .btn-lift .elementor-menu-cart__toggle::after, body .elementor-widget-woocommerce-menu-cart.btn-lift .elementor-menu-cart__toggle::after { display: none !important; content: none !important; opacity: 0 !important; visibility: hidden !important; } /* 2.2 Mini-Cart Slide-In Buttons: Volle 100% Breite erzwingen */ body .elementor-widget-woocommerce-menu-cart.btn-lift .elementor-menu-cart__container .button, body .elementor-widget-woocommerce-menu-cart.btn-lift .elementor-menu-cart__container .elementor-button, body .btn-lift .elementor-menu-cart__container a.button, body .btn-lift .elementor-menu-cart__container a.elementor-button, body .btn-lift .woocommerce-mini-cart__buttons a, body .btn-lift .woocommerce-mini-cart__buttons a.button { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; } /* 3. Der ovale Boden-Schatten via ::after (Im Ruhezustand unsichtbar) */ body a.btn-lift:not([class*="elementor-menu-cart__toggle"])::after, body button.btn-lift::after, body .btn-lift.e-button-base::after, body .btn-lift .e-button-base::after, body .btn-lift .elementor-button:not([class*="elementor-menu-cart__toggle"])::after, body .btn-lift .button:not([class*="elementor-menu-cart__toggle"])::after, body .btn-lift a.add_to_cart_button::after, body .btn-lift button.single_add_to_cart_button::after, body .btn-lift button.tnp-submit::after, body .btn-lift .tnp-field-button:has(input.tnp-submit)::after { content: '' !important; position: absolute !important; display: block !important; /* 🟠 Abstand des Schattens unter dem Button */ bottom: -12px !important; /* 🟠 Horizontale Ausrichtung & Breite */ left: 15% !important; width: 70% !important; /* 🟠 Höhe erzeugt die ovale Form */ height: 10px !important; border-radius: 50% !important; z-index: -1 !important; pointer-events: none !important; /* 🟠 Absicherung Ruhezustand */ opacity: 0 !important; visibility: hidden !important; /* 🟠 Schattenfarbe & Weichheit: radial-gradient */ background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%) !important; /* Startet kleiner für eine flüssige Animation */ transform: scale(0.6) !important; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-in-out, visibility 0.3s !important; } /* 4. Hover-Zustand: Triggert direkt auf dem Button */ body a.btn-lift:not([class*="elementor-menu-cart__toggle"]):hover, body button.btn-lift:hover, body .btn-lift.e-button-base:hover, body .btn-lift .e-button-base:hover, body .btn-lift .elementor-button:not([class*="elementor-menu-cart__toggle"]):hover, body .btn-lift .button:not([class*="elementor-menu-cart__toggle"]):hover, body .btn-lift a.add_to_cart_button:hover, body .btn-lift button.single_add_to_cart_button:hover, body .btn-lift button.tnp-submit:hover, body .btn-lift input.tnp-submit:hover { /* 🟠 Vertikales Anheben des Buttons */ transform: translateY(-4px) !important; box-shadow: none !important; } /* 4.1 Schatten-Ausbreitung beim Schweben */ body a.btn-lift:not([class*="elementor-menu-cart__toggle"]):hover::after, body button.btn-lift:hover::after, body .btn-lift.e-button-base:hover::after, body .btn-lift:hover .e-button-base::after, body .btn-lift .elementor-button:not([class*="elementor-menu-cart__toggle"]):hover::after, body .btn-lift .button:not([class*="elementor-menu-cart__toggle"]):hover::after, body .btn-lift a.add_to_cart_button:hover::after, body .btn-lift button.single_add_to_cart_button:hover::after, body .btn-lift button.tnp-submit:hover::after, body .btn-lift .tnp-field-button:hover:has(input.tnp-submit)::after { /* 🟠 Deckkraft & Sichtbarkeit des Schattens beim Hovern */ opacity: 0.45 !important; visibility: visible !important; /* 🟠 Ausbreitung und Position des Schattens am Boden */ transform: scale(1.1, 0.8) translateY(6px) !important; } /* 5. Klick-Zustand: Haptisches Feedback beim Draufdrücken */ body a.btn-lift:not([class*="elementor-menu-cart__toggle"]):active, body button.btn-lift:active, body .btn-lift.e-button-base:active, body .btn-lift .e-button-base:active, body .btn-lift .elementor-button:not([class*="elementor-menu-cart__toggle"]):active, body .btn-lift .button:not([class*="elementor-menu-cart__toggle"]):active, body .btn-lift a.add_to_cart_button:active, body .btn-lift button.single_add_to_cart_button:active, body .btn-lift button.tnp-submit:active, body .btn-lift input.tnp-submit:active { /* 🟠 Zurückfedern */ transform: translateY(-1px) !important; box-shadow: none !important; } body a.btn-lift:not([class*="elementor-menu-cart__toggle"]):active::after, body button.btn-lift:active::after, body .btn-lift.e-button-base:active::after, body .btn-lift:active .e-button-base::after, body .btn-lift:active .elementor-button:not([class*="elementor-menu-cart__toggle"]):after, body .btn-lift .button:not([class*="elementor-menu-cart__toggle"]):active::after, body .btn-lift a.add_to_cart_button:active::after, body .btn-lift button.single_add_to_cart_button:active::after, body .btn-lift button.tnp-submit:active::after, body .btn-lift .tnp-field-button:active:has(input.tnp-submit)::after { opacity: 0.7 !important; visibility: visible !important; transform: scale(0.9, 1) translateY(1px) !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Universal Button Hover Shadow / CSS-BUTTON-UNIVERSAL-15 ⛔ 🛑 */