.numbered-list-badge { background: var(--awb-color4); color: white!important; max-width: 55px!important; position: absolute; z-index: 100; top: -20px; left: 0px; border-radius: 100%; } .numbered-list-badge p { margin-bottom: 0px!important; padding: 10px; width: 53px; font-size: 20px; text-align: center; } .numbered-col h3 { height: 63px; } .postion-fixed { position: fixed; } /* ========================================================= SPIEKO ECOLIGHT COUNTER – FINAL ========================================================= */ /* Avada clearfix entfernen */ .fusion-counters-box.home-counter::before, .fusion-counters-box.home-counter::after { content: none !important; display: none !important; } /* ========================================================= DESKTOP LAYOUT 4 Karten nebeneinander ========================================================= */ .fusion-counters-box.home-counter { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; width: 100% !important; max-width: 1320px !important; margin: 35px auto 40px !important; padding: 0 !important; align-items: stretch !important; } /* ========================================================= AVADA COLUMN SYSTEM KOMPLETT NEUTRALISIEREN ========================================================= */ .fusion-counters-box.home-counter > .fusion-counter-box { float: none !important; clear: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding: 0 !important; position: relative !important; display: block !important; } /* Avada nth-child clear entfernen */ .fusion-counters-box.home-counter > .fusion-counter-box:nth-child(2n+1), .fusion-counters-box.home-counter > .fusion-counter-box:nth-child(3n+1), .fusion-counters-box.home-counter > .fusion-counter-box:nth-child(4n+1) { clear: none !important; } /* ========================================================= CARD ========================================================= */ .fusion-counters-box.home-counter .counter-box-container { box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-height: 340px !important; padding: 28px 25px 30px !important; background: #fffdf9 !important; border: 1px solid #eadfd2 !important; border-radius: 20px !important; box-shadow: 0 12px 32px rgba(25, 20, 15, 0.05) !important; text-align: left !important; display: flex !important; flex-direction: column !important; transition: transform 0.25s ease, box-shadow 0.25s ease; } .fusion-counters-box.home-counter .counter-box-container:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(25, 20, 15, 0.08) !important; } /* ========================================================= ERSTE CARD HERVORHEBEN ========================================================= */ .fusion-counters-box.home-counter > .fusion-counter-box:first-child .counter-box-container { position: relative !important; overflow: hidden !important; border-color: rgba(180, 0, 0, 0.28) !important; background: linear-gradient( 180deg, #fffdfa 0%, #fff8f5 100% ) !important; } /* ========================================================= SOFT GLOW – ERSTE CARD ========================================================= */ .fusion-counters-box.home-counter > .fusion-counter-box:first-child .counter-box-container::after { content: ""; position: absolute; top: 15px; left: 65px; width: 220px; height: 220px; background: radial-gradient( circle, rgba(180, 0, 0, 0.13) 0%, rgba(180, 0, 0, 0.07) 35%, rgba(180, 0, 0, 0) 72% ); filter: blur(18px); pointer-events: none; z-index: 0; } /* Inhalte über den Glow */ .fusion-counters-box.home-counter > .fusion-counter-box:first-child .content-box-percentage, .fusion-counters-box.home-counter > .fusion-counter-box:first-child .counter-box-content { position: relative; z-index: 1; } /* ========================================================= ICON + ZAHL ========================================================= */ .fusion-counters-box.home-counter .content-box-percentage { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 14px !important; margin: 0 0 22px !important; padding: 0 !important; line-height: 1 !important; } /* Icon */ .fusion-counters-box.home-counter .counter-box-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: #fff0e9 !important; color: #b40000 !important; font-size: 25px !important; line-height: 1 !important; } /* Zahl */ .fusion-counters-box.home-counter .display-counter { font-size: 56px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -2px !important; margin: 0 !important; padding: 0 !important; color: #151515 !important; white-space: nowrap !important; } /* Einheit */ .fusion-counters-box.home-counter .unit { font-size: 56px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -2px !important; margin-left: -5px !important; color: #151515 !important; white-space: nowrap !important; } /* 40 % rot */ .fusion-counters-box.home-counter > .fusion-counter-box:first-child .display-counter, .fusion-counters-box.home-counter > .fusion-counter-box:first-child .unit { color: #b40000 !important; text-shadow: 0 6px 18px rgba(180, 0, 0, 0.08); } /* ========================================================= TEXT ========================================================= */ .fusion-counters-box.home-counter .counter-box-content { margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 17px !important; line-height: 1.55 !important; color: #505050 !important; } /* Bold allgemein */ .fusion-counters-box.home-counter .counter-box-content b, .fusion-counters-box.home-counter .counter-box-content strong { color: #171717 !important; font-weight: 700 !important; } /* Erster Bold-Satz als eigene Überschrift */ .fusion-counters-box.home-counter .counter-box-content > b:first-child, .fusion-counters-box.home-counter .counter-box-content > strong:first-child { display: block !important; margin-bottom: 16px !important; font-size: 18px !important; line-height: 1.3 !important; color: #171717 !important; font-weight: 700 !important; } /* ========================================================= TABLET / KLEINER DESKTOP 2 + 2 ========================================================= */ @media only screen and (max-width: 1199px) { .fusion-counters-box.home-counter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } .fusion-counters-box.home-counter .counter-box-container { min-height: 300px !important; } } /* ========================================================= MOBILE 1 Karte pro Zeile ========================================================= */ @media only screen and (max-width: 767px) { .fusion-counters-box.home-counter { grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 24px !important; margin-bottom: 30px !important; } .fusion-counters-box.home-counter .counter-box-container { min-height: 0 !important; padding: 20px 20px 22px !important; border-radius: 17px !important; } .fusion-counters-box.home-counter .content-box-percentage { gap: 12px !important; margin-bottom: 15px !important; } .fusion-counters-box.home-counter .counter-box-icon { width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 21px !important; } .fusion-counters-box.home-counter .display-counter, .fusion-counters-box.home-counter .unit { font-size: 46px !important; } .fusion-counters-box.home-counter .counter-box-content { font-size: 16px !important; line-height: 1.5 !important; } .fusion-counters-box.home-counter .counter-box-content > b:first-child, .fusion-counters-box.home-counter .counter-box-content > strong:first-child { font-size: 17px !important; margin-bottom: 12px !important; } /* Glow mobil dezenter */ .fusion-counters-box.home-counter > .fusion-counter-box:first-child .counter-box-container::after { width: 160px; height: 160px; left: 55px; top: 10px; opacity: 0.75; } } /* ========================================================= SPIEKO – PRODUKTVERBINDUNG Basis → Veredelt → Premium Animation startet erst beim Sichtbarwerden ========================================================= */ /* --------------------------------------------------------- Produktspalten vorbereiten --------------------------------------------------------- */ .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2), .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3), .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(4) { position: relative !important; } /* ========================================================= VERBINDUNGSLINIEN ========================================================= */ .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2)::after, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3)::after { content: ""; position: absolute; /* etwas weiter nach unten */ top: 178px; /* * symmetrisch um die Spaltengrenze * 82% → 100% → 118% */ left: 82%; width: 36%; height: 2px; /* * weicher Verlauf an beiden Enden */ background: linear-gradient( 90deg, rgba(191, 161, 74, 0) 0%, rgba(191, 161, 74, 0.75) 12%, rgba(191, 161, 74, 0.75) 88%, rgba(191, 161, 74, 0) 100% ); border-radius: 999px; /* dezenter Glow */ box-shadow: 0 0 4px rgba(191, 161, 74, 0.10); z-index: 2; pointer-events: none; transform-origin: left center; /* Startzustand */ transform: scaleX(0); opacity: 0; } /* ========================================================= MITTELPUNKTE ========================================================= */ .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2)::before, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3)::before { content: ""; position: absolute; /* passend zur Linie nach unten gesetzt */ top: 172px; /* exakt auf der Spaltengrenze */ left: calc(100% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #bfa14a; z-index: 4; pointer-events: none; /* Startzustand */ transform: scale(0); opacity: 0; } /* ========================================================= ANIMATION STARTET ERST MIT .is-visible ========================================================= */ /* Linie 1 – Basis → Veredelt */ .home-prducts-wrapper.is-visible > .fusion-builder-row > .fusion-layout-column:nth-child(2)::after { animation: spieko-line-in 0.9s ease-out 0.15s forwards; } /* Punkt 1 */ .home-prducts-wrapper.is-visible > .fusion-builder-row > .fusion-layout-column:nth-child(2)::before { animation: spieko-dot-in 0.45s ease-out 0.85s forwards, spieko-dot-pulse 3.5s ease-in-out 1.6s infinite; } /* Linie 2 – Veredelt → Premium */ .home-prducts-wrapper.is-visible > .fusion-builder-row > .fusion-layout-column:nth-child(3)::after { animation: spieko-line-in 0.9s ease-out 1.05s forwards; } /* Punkt 2 */ .home-prducts-wrapper.is-visible > .fusion-builder-row > .fusion-layout-column:nth-child(3)::before { animation: spieko-dot-in 0.45s ease-out 1.75s forwards, spieko-dot-pulse 3.5s ease-in-out 2.5s infinite; } /* ========================================================= LINIE EINBLENDEN ========================================================= */ @keyframes spieko-line-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } /* ========================================================= PUNKT EINBLENDEN ========================================================= */ @keyframes spieko-dot-in { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } to { transform: scale(1); opacity: 1; } } /* ========================================================= DEZENTER PULS ========================================================= */ @keyframes spieko-dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(191, 161, 74, 0.08); } 50% { box-shadow: 0 0 0 8px rgba(191, 161, 74, 0); } } /* ========================================================= TABLET ========================================================= */ @media only screen and (max-width: 1024px) { .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2)::after, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3)::after { top: 158px; left: 82%; width: 36%; } .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2)::before, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3)::before { top: 152px; } } /* ========================================================= MOBILE – PRODUKTE UNTEREINANDER MIT VERTIKALER VERBINDUNG ========================================================= */ @media only screen and (max-width: 640px) { /* Mehr Abstand zwischen Basis → Veredelt → Premium */ .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2), .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3) { margin-bottom: 150px !important; } /* Premium braucht unten keinen großen Zusatzabstand */ .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(4) { margin-bottom: 30px !important; } /* ===================================================== VERTIKALE VERBINDUNGSLINIEN ===================================================== */ .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2)::after, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3)::after { display: block !important; position: absolute; top: auto; left: 50%; bottom: -120px; width: 2px; height: 90px; background: linear-gradient( 180deg, rgba(191, 161, 74, 0) 0%, rgba(191, 161, 74, 0.75) 15%, rgba(191, 161, 74, 0.75) 85%, rgba(191, 161, 74, 0) 100% ); border-radius: 999px; box-shadow: 0 0 5px rgba(191, 161, 74, 0.12); z-index: 2; pointer-events: none; transform: translateX(-50%) scaleY(0); transform-origin: top center; opacity: 0; animation: none !important; } /* ===================================================== PUNKTE AUF DER VERTIKALEN LINIE ===================================================== */ .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2)::before, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3)::before { display: block !important; position: absolute; top: auto; left: 50%; bottom: -81px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #bfa14a; z-index: 4; pointer-events: none; transform: scale(0); opacity: 0; animation: none !important; } /* ===================================================== JEDER VERBINDER STARTET EINZELN Das JS setzt .mobile-connector-visible ===================================================== */ .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column.mobile-connector-visible::after { animation: spieko-line-mobile-in 0.85s ease-out forwards !important; } .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column.mobile-connector-visible::before { animation: spieko-dot-mobile-in 0.45s ease-out 0.55s forwards !important; } /* ===================================================== BADGES MOBILE SAUBER ZENTRIEREN ===================================================== */ .home-kork-arguments { display: flex; flex-wrap: wrap; justify-content: center !important; align-items: center; gap: 8px; width: calc(100% - 32px); max-width: 420px; margin-top: 20px !important; margin-left: auto !important; margin-right: auto !important; padding: 0; text-align: center; } .home-kork-arguments span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 8px 13px; font-size: 12px; text-align: center; } } /* ========================================================= MOBILE – VERTIKALE LINIE EINBLENDEN ========================================================= */ @keyframes spieko-line-mobile-in { from { transform: translateX(-50%) scaleY(0); opacity: 0; } to { transform: translateX(-50%) scaleY(1); opacity: 1; } } /* ========================================================= MOBILE – PUNKT EINBLENDEN ========================================================= */ @keyframes spieko-dot-mobile-in { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } to { transform: scale(1); opacity: 1; } } /* ========================================================= ACCESSIBILITY Animation deaktivieren bei reduzierter Bewegung ========================================================= */ @media (prefers-reduced-motion: reduce) { .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2)::before, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(2)::after, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3)::before, .home-prducts-wrapper > .fusion-builder-row > .fusion-layout-column:nth-child(3)::after { animation: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================= SPIEKO – KORK ARGUMENTE ========================================================= */ .home-kork-arguments { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%; max-width: 100%; margin-top: 20px; box-sizing: border-box; } /* Einzelne Pills */ .home-kork-arguments span { display: inline-flex; align-items: center; justify-content: center; padding: 8px 13px; background: rgba(255, 255, 255, 0.42); border: 1px solid rgba(191, 161, 74, 0.18); border-radius: 999px; box-shadow: 0 3px 10px rgba(31, 25, 15, 0.035); color: #1f1f1f; font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; white-space: normal; box-sizing: border-box; transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .home-kork-arguments span:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.65); border-color: rgba(191, 161, 74, 0.38); } /* ========================================================= TABLET ========================================================= */ @media only screen and (max-width: 1024px) { .home-kork-arguments { gap: 7px; margin-top: 18px; } .home-kork-arguments span { padding: 7px 11px; font-size: 11px; } }