/* ============================================================ ClipReverb — Bewegung Regeln: kurz (~.5s), kleine Wege (~24px), nur transform und opacity, und alles ist ohne JavaScript sichtbar. Wer im System "Bewegung reduzieren" gesetzt hat, bekommt Ruhe. ============================================================ */ /* --- Einblenden beim Scrollen ------------------------------ Fail-safe: ohne .js am passiert gar nichts, der Inhalt steht einfach da. Erst wenn JS läuft, wird versteckt. */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); will-change: opacity, transform; } .js [data-reveal="left"] { transform: translate3d(-24px, 0, 0); } .js [data-reveal="right"] { transform: translate3d(24px, 0, 0); } .js [data-reveal="scale"] { transform: scale(.96); } .js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; } /* Gestaffelt: Kinder laufen 60 ms versetzt nach */ .js [data-stagger] > * { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .js [data-stagger].is-in > * { opacity: 1; transform: none; } .js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; } .js [data-stagger].is-in > *:nth-child(2) { transition-delay: 60ms; } .js [data-stagger].is-in > *:nth-child(3) { transition-delay: 120ms; } .js [data-stagger].is-in > *:nth-child(4) { transition-delay: 180ms; } .js [data-stagger].is-in > *:nth-child(5) { transition-delay: 240ms; } .js [data-stagger].is-in > *:nth-child(6) { transition-delay: 300ms; } .js [data-stagger].is-in > *:nth-child(7) { transition-delay: 360ms; } .js [data-stagger].is-in > *:nth-child(8) { transition-delay: 420ms; } /* --- Nachhall-Ring ---------------------------------------- Das Markenmotiv: ein Impuls, der als Ring nach außen läuft. */ @keyframes cr-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45); } 70% { box-shadow: 0 0 0 11px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } } @keyframes cr-ring-out { 0% { transform: scale(.35); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } } /* Drei Ringe, zeitversetzt — als Hintergrund für Sektionen */ .ring-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .ring-field i { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border: 1px solid var(--ring-line); border-radius: 50%; animation: cr-ring-out 7s var(--ease-out) infinite; } .ring-field i:nth-child(2) { animation-delay: 2.33s; } .ring-field i:nth-child(3) { animation-delay: 4.66s; } /* --- Glaskarte: wandernder Lichthof ------------------------- @property macht die Gradientpositionen animierbar. Ohne Unterstützung bleibt der Schein einfach stehen — kein Bruch. */ @property --s1x { syntax: ""; inherits: false; initial-value: 20%; } @property --s1y { syntax: ""; inherits: false; initial-value: 12%; } @property --s2x { syntax: ""; inherits: false; initial-value: 82%; } @property --s2y { syntax: ""; inherits: false; initial-value: 88%; } .shine { position: relative; overflow: hidden; } .shine::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 220px at var(--s1x) var(--s1y), rgba(var(--accent-rgb), .11), transparent 70%), radial-gradient(circle 260px at var(--s2x) var(--s2y), rgba(var(--accent-rgb), .07), transparent 72%); } /* Vier Bahnen mit verschiedenen Dauern, damit Nachbarkarten nie im Gleichtakt laufen. */ .shine-a::before { animation: cr-drift-a 22s ease-in-out infinite alternate; } .shine-b::before { animation: cr-drift-b 26s ease-in-out infinite alternate; } .shine-c::before { animation: cr-drift-c 19s ease-in-out infinite alternate; } .shine-d::before { animation: cr-drift-d 24s ease-in-out infinite alternate; } @keyframes cr-drift-a { from { --s1x: 100%; --s1y: 0%; --s2x: 0%; --s2y: 100%; } to { --s1x: 72%; --s1y: 22%; --s2x: 26%; --s2y: 78%; } } @keyframes cr-drift-b { from { --s1x: 8%; --s1y: 4%; --s2x: 96%; --s2y: 88%; } to { --s1x: 34%; --s1y: 26%; --s2x: 70%; --s2y: 66%; } } @keyframes cr-drift-c { from { --s1x: 100%; --s1y: 78%; --s2x: 24%; --s2y: 0%; } to { --s1x: 74%; --s1y: 54%; --s2x: 46%; --s2y: 24%; } } @keyframes cr-drift-d { from { --s1x: 0%; --s1y: 34%; --s2x: 88%; --s2y: 100%; } to { --s1x: 24%; --s1y: 56%; --s2x: 64%; --s2y: 76%; } } /* --- Endlosband -------------------------------------------- */ .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee-track { display: flex; width: max-content; animation: cr-scroll 42s linear infinite; will-change: transform; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-slow .marquee-track { animation-duration: 64s; } .marquee-rev .marquee-track { animation-direction: reverse; } @keyframes cr-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* --- Verbindungslinien zwischen Ablaufkarten ---------------- */ @keyframes cr-dash { to { stroke-dashoffset: -22; } } .flow-dash { animation: cr-dash 1.1s linear infinite; } /* --- Sanftes Schweben -------------------------------------- */ @keyframes cr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .float { animation: cr-float 5.5s ease-in-out infinite; } .float-slow { animation: cr-float 7.5s ease-in-out infinite; } .float-delay { animation-delay: -2.6s; } /* --- Kleine Zeiger für Live-Zustände ----------------------- */ @keyframes cr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .38; } } .pulse { animation: cr-pulse 2.4s ease-in-out infinite; } .dot-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; } .dot-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok); animation: cr-dot-ring 2s var(--ease-out) infinite; } @keyframes cr-dot-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } } /* --- Zeiger-Interaktionen (JS setzt die Variablen) ---------- */ [data-tilt] { --tx: 0deg; --ty: 0deg; transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .2s var(--ease-out); will-change: transform; } [data-magnetic] { --mx: 0px; --my: 0px; transform: translate3d(var(--mx), var(--my), 0); } /* Lichtfleck, der dem Zeiger folgt */ [data-spotlight] { --px: 50%; --py: 50%; position: relative; } [data-spotlight]::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; background: radial-gradient(circle 240px at var(--px) var(--py), rgba(var(--accent-rgb), .1), transparent 65%); transition: opacity .3s var(--ease); } [data-spotlight]:hover::after { opacity: 1; } /* --- Leiste, die nach dem Hero hereinfährt ----------------- */ @keyframes cr-bar-in { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } } .ctabar { position: fixed; inset-inline: 0; bottom: 0; z-index: 80; display: none; padding: 13px var(--gutter); background: var(--header-bg); border-top: 1px solid var(--line); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); } .ctabar.is-on { display: block; animation: cr-bar-in .45s var(--ease); } .ctabar-in { display: flex; align-items: center; gap: 20px; width: min(var(--wrap), 100%); margin-inline: auto; } .ctabar b { font-size: 15px; color: var(--ink); } .ctabar .btn { margin-left: auto; } @media (max-width: 640px) { .ctabar b { display: none; } .ctabar .btn { margin-left: 0; width: 100%; justify-content: center; } } /* --- Lesefortschritt --------------------------------------- */ .progress { position: fixed; left: 0; top: 0; z-index: 95; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); pointer-events: none; } /* --- Aufklapper (FAQ) -------------------------------------- */ .acc-item { border-bottom: 1px solid var(--line); } .acc-btn { width: 100%; display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; text-align: left; font-size: clamp(16.5px, 1.6vw, 19px); font-weight: 620; color: var(--ink); letter-spacing: -.015em; line-height: 1.35; transition: color .18s var(--ease); } .acc-btn:hover { color: var(--accent-text); } .acc-sign { flex: none; width: 22px; height: 22px; margin-top: 2px; position: relative; } .acc-sign::before, .acc-sign::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent-btn); transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .3s var(--ease); } .acc-sign::before { width: 14px; height: 1.5px; } .acc-sign::after { width: 1.5px; height: 14px; } .acc-item.is-open .acc-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .acc-panel { overflow: hidden; height: 0; transition: height .35s var(--ease); } .acc-panel-in { padding-bottom: 26px; color: var(--muted); font-size: 16px; max-width: 68ch; line-height: 1.6; } .acc-panel-in p + p { margin-top: .85em; } /* Ohne JS bleibt jede Antwort offen und lesbar */ html:not(.js) .acc-panel { height: auto; } /* --- Reihen, die beim Scrollen leicht mitwandern ------------ */ .js [data-parallax] { will-change: transform; } /* --- Zahlenwechsel ----------------------------------------- */ @keyframes cr-num-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .num-flash { animation: cr-num-in .3s var(--ease-out); } /* --- Ladebalken in der Demo -------------------------------- */ @keyframes cr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .bar-fill { transform-origin: 0 50%; animation: cr-fill .7s var(--ease-out) forwards; } /* --- Hintergrundraster ------------------------------------- */ .grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 75%); } /* --- Weiche Lichthöfe hinter Sektionen --------------------- */ .glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(60% 50% at 12% 0%, rgba(var(--accent-rgb), .07), transparent 70%), radial-gradient(50% 45% at 92% 12%, rgba(var(--accent-rgb), .05), transparent 70%); } /* ============================================================ Bewegung reduzieren — alles bleibt stehen, nichts verschwindet ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .eyebrow::before, .ring-field i, .shine::before, .marquee-track, .flow-dash, .float, .float-slow, .pulse, .dot-live::after, .ctabar.is-on, .bar-fill, .num-flash { animation: none !important; } .bar-fill { transform: scaleX(1); } .ring-field { display: none; } *, *::before, *::after { transition-duration: .01ms !important; } }