.elementor-kit-6{--e-global-color-primary:#0B8890;--e-global-color-secondary:#A9BCA4;--e-global-color-text:#1D1D1B;--e-global-color-accent:#F0EDE4;--e-global-color-a4e748a:#2D2D2C;--e-global-color-c755995:#5A5A58;--e-global-color-2856832:#075D63;--e-global-color-9beeb5b:#E4D3BD;--e-global-typography-primary-font-family:"Commissioner";--e-global-typography-primary-font-size:clamp(2.375rem, 1.65rem + 3.6vw, 3.875rem);--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:1.08em;--e-global-typography-secondary-font-family:"Commissioner";--e-global-typography-secondary-font-size:clamp(2rem, 1.45rem + 2.75vw, 3.25rem);--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.08em;--e-global-typography-text-font-family:"Commissioner";--e-global-typography-text-font-size:clamp(1.55rem, 1.36rem + 1.95vw, 2.625rem);--e-global-typography-text-font-weight:800;--e-global-typography-text-line-height:1.08em;--e-global-typography-accent-font-family:"Commissioner";--e-global-typography-accent-font-size:clamp(1.1575rem, 0.9rem + 0.19vw, 1rem);--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.8em;--e-global-typography-110e484-font-family:"Commissioner";--e-global-typography-110e484-font-size:clamp(0.8rem, 0.9rem + 0.19vw, 1rem);--e-global-typography-110e484-font-weight:400;--e-global-typography-110e484-line-height:1.4em;--e-global-typography-f2d0de8-font-family:"Commissioner";--e-global-typography-f2d0de8-font-size:clamp(1.1375rem, 0.9rem + 0.19vw, 1rem);--e-global-typography-f2d0de8-font-weight:600;--e-global-typography-f2d0de8-text-transform:uppercase;--e-global-typography-0e0da8f-font-family:"Commissioner";--e-global-typography-0e0da8f-font-size:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);--e-global-typography-0e0da8f-font-weight:600;--e-global-typography-0e0da8f-line-height:1.2em;--e-global-typography-88fc9dd-font-family:"Commissioner";--e-global-typography-88fc9dd-font-size:clamp(1.6rem, 1.039vw + 1.231rem, 2.063rem);--e-global-typography-88fc9dd-font-weight:800;--e-global-typography-88fc9dd-line-height:1.05em;--e-global-typography-b1e499a-font-family:"Commissioner";--e-global-typography-b1e499a-font-size:clamp(0.8575rem, 0.65rem + 0.19vw, 1rem);--e-global-typography-b1e499a-font-weight:400;--e-global-typography-b1e499a-line-height:1.05em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:12801140px;}.e-con{--container-max-width:12801140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===================================================== SMART HEADER ===================================================== */ .smart-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 9999; /* 100 % Größe am Webseitenanfang */ padding-block: 14px; background: transparent !important; opacity: 1 !important; transform: translateY(0); transition: transform 0.35s ease, padding 0.35s ease; overflow: visible; } .smart-header > * { position: relative; z-index: 2; } /* ===================================================== HEADER HINTERGRUND ===================================================== */ .smart-header::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* Am Webseitenanfang: Türkis mit 20 % Transparenz */ background-color: rgba(7, 93, 99, 0.8); backdrop-filter: none; -webkit-backdrop-filter: none; transition: background-color 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease; } /* ===================================================== RUNTERSCROLLEN Header verschwindet komplett ===================================================== */ .smart-header.is-hidden { transform: translateY(-100%) !important; } /* ===================================================== HOCHSCROLLEN Header erscheint kompakt ===================================================== */ .smart-header.is-compact { padding-block: 10px !important; } .smart-header.is-compact::before { /* 50 % transparent */ background-color: rgba(7, 93, 99, 0.5); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } /* ===================================================== AM WEBSEITENANFANG wieder volle Größe ===================================================== */ .smart-header:not(.is-compact)::before { background-color: rgba(7, 93, 99, 0.3); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /*PROZESS BUTTONS*/ /* ========================================================= VERTIKALE TIMELINE ========================================================= */ .timeline-animation { position: relative; } /* ========================================================= DIE PUNKTE Form und Farbe werden bewusst NICHT hier gesetzt, sondern kommen aus dem Elementor-Styling des Widgets. Diese Datei kuemmert sich nur um Position/Animation. ========================================================= */ .timeline-dot { position: relative; z-index: 5; opacity: 0; /* * Sehr wichtig: * Die ursprüngliche Elementor-Position * bleibt erhalten. */ will-change: transform, opacity; } /* ========================================================= 8 PUNKTE JEWEILS 0,5 SEKUNDEN VERSATZ Hinweis: Die aeussere cubic-bezier() wurde entfernt und durch "linear" ersetzt, weil ab jetzt JEDER Keyframe-Schritt seine eigene Timing-Funktion bekommt (siehe @keyframes unten). So wird jeder einzelne Ein-/Ausschwung sauber abgebremst, statt dass eine einzige globale Kurve ueber die komplette Bounce-Sequenz "durchgezogen" wird - das war der Hauptgrund fuer das vorher etwas ruckartige Gefuehl. ========================================================= */ .dot-1 { animation: timelineBall 2.5s linear 0s both; } .dot-2 { animation: timelineBall 2.5s linear .5s both; } .dot-3 { animation: timelineBall 2.5s linear 1s both; } .dot-4 { animation: timelineBall 2.5s linear 1.5s both; } .dot-5 { animation: timelineBall 2.5s linear 2s both; } .dot-6 { animation: timelineBall 2.5s linear 2.5s both; } .dot-7 { animation: timelineBall 2.5s linear 3s both; } .dot-8 { animation: timelineBall 2.5s linear 3.5s both; } /* ========================================================= ANIMATION Jeder Keyframe traegt jetzt eine eigene animation-timing-function, die bestimmt, WIE die Bewegung in genau diesen Punkt hineinlaeuft: - ease-out = schneller Start, sanftes Abbremsen (fuer den Einflug und jeden Ausschwung nach aussen) - ease-in = sanfter Start, schnelleres Ende (fuer die Rueckbewegung zum Aufprallpunkt, fuehlt sich an wie echte Schwerkraft) Dadurch federt jeder Rueckprall organisch aus, statt abgehackt zwischen linearen Wegpunkten zu springen. ========================================================= */ @keyframes timelineBall { /* ----------------------------------------------------- START bis AUFPRALL Ein einziges durchgehendes Segment von der Startposition (weit rechts ausserhalb) bis zum Aufprallpunkt (0), OHNE Zwischenstopp - so bleibt die Geschwindigkeit ueber die gesamte Anflugstrecke gleichmaessig. Der Aufprall liegt jetzt bei 27% statt vorher 43% der Gesamtdauer (2,5s) -> Anflug dauert nur noch ca. 0,68s statt vorher ca. 1,38s, also spuerbar schneller. Alle Bounce-Keyframes danach wurden proportional nach vorne verschoben, damit die Sprungphase in absoluten Sekunden etwa gleich lang bleibt wie zuvor. ----------------------------------------------------- */ 0% { opacity: 1; transform: translateX(100vw); animation-timing-function: linear; } /* ----------------------------------------------------- ERSTER AUFPRALL ----------------------------------------------------- */ 27% { transform: translateX(0); animation-timing-function: ease-out; } /* ===================================================== ERSTER RÜCKPRALL ca. 2 cm ===================================================== */ 37% { transform: translateX(76px); animation-timing-function: ease-in; } /* zurück zum Aufprallpunkt */ 47% { transform: translateX(0); animation-timing-function: ease-out; } /* ===================================================== ZWEITER RÜCKPRALL ca. 1,5 cm ===================================================== */ 56% { transform: translateX(57px); animation-timing-function: ease-in; } /* wieder zum Punkt */ 65% { transform: translateX(0); animation-timing-function: ease-out; } /* ===================================================== DRITTER – kleiner ===================================================== */ 74% { transform: translateX(30px); animation-timing-function: ease-in; } /* wieder zum Punkt */ 81% { transform: translateX(0); animation-timing-function: ease-out; } /* ===================================================== LETZTER KLEINER RÜCKPRALL ===================================================== */ 87% { transform: translateX(14px); animation-timing-function: ease-in-out; } /* ===================================================== ENDPOSITION ===================================================== */ 100% { opacity: 1; transform: translateX(0); } }/* End custom CSS */