/* Funkel-Linie (Widget „Funkel-Linie“): Leuchtlinie mit funkelndem Partikelfeld darunter. Aufbau: .up-funkel > [.up-funkel__orb] + 4 × .up-funkel__linie + canvas.up-funkel__feld (Skript: funkel-linie.js). Die Regler schreiben die CSS-Variablen; das Kino-Intro läuft über Klassen an . */ .up-funkel { --up-funkel-breite: 640px; --up-funkel-hoehe: clamp(80px, 8vw, 110px); --up-funkel-linie: #00b7d1; --up-funkel-kern: #4be3f5; --up-funkel-ueberlappung: 36px; --up-funkel-orb: 260px; position: relative; width: min(var(--up-funkel-breite), 100%); height: var(--up-funkel-hoehe); /* Negativer Abstand: das nächste Element überlappt den ausgeblendeten unteren Rand des Felds */ margin: 0 auto calc(var(--up-funkel-ueberlappung) * -1); pointer-events: none; } /* Leuchtlinie: breiter Verlauf plus heller Kern, je scharf und weichgezeichnet */ .up-funkel__linie { position: absolute; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--up-funkel-linie), transparent); } .up-funkel__linie--weit { left: 12.5%; width: 75%; } .up-funkel__linie--kern { left: 37.5%; width: 25%; background: linear-gradient(90deg, transparent, var(--up-funkel-kern), transparent); } .up-funkel__linie--weit.up-funkel__linie--weich { height: 2px; filter: blur(4px); } .up-funkel__linie--kern.up-funkel__linie--weich { height: 5px; filter: blur(4px); } /* Partikelfeld: läuft elliptisch von der Linie aus in den Hintergrund aus */ .up-funkel__feld { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; -webkit-mask-image: radial-gradient(55% 130% at 50% 0%, #000 20%, transparent 100%); mask-image: radial-gradient(55% 130% at 50% 0%, #000 20%, transparent 100%); } .up-funkel__feld.ist-bereit { opacity: 1; } /* Punkte-Globus des Intros: sitzt mittig auf der Linie, nur während html.up-intro sichtbar */ .up-funkel__orb { position: absolute; top: 0; left: 50%; z-index: 3; display: none; width: var(--up-funkel-orb); height: var(--up-funkel-orb); margin: calc(var(--up-funkel-orb) / -2) 0 0 calc(var(--up-funkel-orb) / -2); pointer-events: none; opacity: 0; transform: scale(.4); } .up-funkel__orb::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 183 209 / .28), rgb(0 183 209 / .08) 60%, transparent); filter: blur(6px); } .up-funkel__orb canvas { position: relative; display: block; width: 100%; height: 100%; } @media (max-width: 767px) { .up-funkel { --up-funkel-ueberlappung: 20px; --up-funkel-orb: 220px; } } /* ---------- Kino-Intro ---------- Klassen an : up-intro (Startcode) → up-intro-bereit (Gruppen markiert) → up-intro-laden → up-intro-kopf → up-intro-orb-aus → up-intro-linie → up-intro-karten. Gruppen: .up-intro__kopf (vor dem Widget), .up-intro__karten (danach), .up-intro__rest (weitere Abschnitte). --up-intro-faktor an dehnt alle Dauern, --up-intro-i staffelt den Kopf. */ html.up-intro .up-funkel__orb { display: block; transition: opacity calc(.9s * var(--up-intro-faktor, 1)) ease, transform calc(1.3s * var(--up-intro-faktor, 1)) cubic-bezier(.16, 1, .3, 1); } html.up-intro.up-intro-laden .up-funkel__orb { opacity: 1; transform: scale(1); } /* Mit dem Kopf: klein in die Lücke zwischen Linie und Kacheln */ html.up-intro.up-intro-kopf .up-funkel__orb { transform: translateY(calc((var(--up-funkel-hoehe) - var(--up-funkel-ueberlappung)) / 2)) scale(.3); } /* Am Ende: zurück auf die Linie und flach zusammenfallen */ html.up-intro.up-intro-orb-aus .up-funkel__orb { opacity: 0; transform: translateY(0) scale(1.4, .03); transition: opacity calc(.55s * var(--up-intro-faktor, 1)) ease calc(.15s * var(--up-intro-faktor, 1)), transform calc(.7s * var(--up-intro-faktor, 1)) cubic-bezier(.7, 0, .3, 1); } /* Kopfleiste: nur Deckkraft, damit feste Positionierung erhalten bleibt */ html.up-intro [data-elementor-type="header"] { opacity: 0; transition: opacity calc(.9s * var(--up-intro-faktor, 1)) ease; } html.up-intro.up-intro-kopf [data-elementor-type="header"] { opacity: 1; } /* Kopf: gestaffelt einblenden und leicht aufsteigen (translate addiert sich zu vorhandenen Transforms) */ html.up-intro .elementor-element.up-intro__kopf { opacity: 0; translate: 0 16px; transition: opacity calc(.9s * var(--up-intro-faktor, 1)) ease calc(var(--up-intro-i, 0) * .15s * var(--up-intro-faktor, 1)), translate calc(1s * var(--up-intro-faktor, 1)) cubic-bezier(.16, 1, .3, 1) calc(var(--up-intro-i, 0) * .15s * var(--up-intro-faktor, 1)); } html.up-intro.up-intro-kopf .elementor-element.up-intro__kopf { opacity: 1; translate: none; } /* Kacheln: gemeinsam, wenn der Globus zur Linie wird */ html.up-intro .elementor-element.up-intro__karten { opacity: 0; translate: 0 28px; transition: opacity calc(.9s * var(--up-intro-faktor, 1)) ease, translate calc(1.1s * var(--up-intro-faktor, 1)) cubic-bezier(.16, 1, .3, 1); } html.up-intro.up-intro-karten .elementor-element.up-intro__karten { opacity: 1; translate: none; } /* Footer und weitere Abschnitte: mit den Kacheln */ html.up-intro :is([data-elementor-type="footer"], .elementor-element.up-intro__rest) { opacity: 0; transition: opacity calc(1s * var(--up-intro-faktor, 1)) ease calc(.3s * var(--up-intro-faktor, 1)); } html.up-intro.up-intro-karten :is([data-elementor-type="footer"], .elementor-element.up-intro__rest) { opacity: 1; } /* Leuchtlinie zeichnet sich von der Mitte aus, danach blendet das Partikelfeld ein */ html.up-intro .up-funkel[data-intro] .up-funkel__linie { opacity: 0; transform: scaleX(0); transition: transform calc(1s * var(--up-intro-faktor, 1)) cubic-bezier(.16, 1, .3, 1), opacity calc(.4s * var(--up-intro-faktor, 1)) ease; } html.up-intro.up-intro-linie .up-funkel[data-intro] .up-funkel__linie { opacity: 1; transform: none; } html.up-intro .up-funkel[data-intro] .up-funkel__feld { opacity: 0; transition: opacity calc(1.4s * var(--up-intro-faktor, 1)) ease calc(.3s * var(--up-intro-faktor, 1)); } html.up-intro.up-intro-linie .up-funkel[data-intro] .up-funkel__feld { opacity: 1; }