/* ==========================================================================
   Gemeinsame Animationen der Vetta-Demos, angelehnt an privatehealthclub.de:
   gestaffelter Einstieg, weiches Hereinschweben beim Scrollen, Wort mit
   geschwungenem Strich und Glanz, laufendes Band, Fortschrittsbalken.
   Ohne JavaScript oder bei „Bewegung reduzieren“ ist alles sofort sichtbar.
   ========================================================================== */

/* Fortschritt beim Scrollen */
.a-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: var(--a-accent, var(--accent)); pointer-events: none; }

/* Einstieg oben: Elemente kommen nacheinander von unten */
html.a-on .a-hero > * { opacity: 0; animation: a-fade-up .7s cubic-bezier(.2, .7, .2, 1) both; }
html.a-on .a-hero > *:nth-child(1) { animation-delay: .15s; }
html.a-on .a-hero > *:nth-child(2) { animation-delay: .27s; }
html.a-on .a-hero > *:nth-child(3) { animation-delay: .39s; }
html.a-on .a-hero > *:nth-child(4) { animation-delay: .51s; }
html.a-on .a-hero > *:nth-child(n + 5) { animation-delay: .63s; }
html.a-on .a-hero-media { opacity: 0; animation: a-zoom-in 1.1s .2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes a-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes a-zoom-in { from { opacity: 0; transform: scale(.96) translateY(14px); } to { opacity: 1; transform: none; } }

/* Hereinschweben beim Scrollen */
html.a-on .a-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--a-delay, 0s); }
html.a-on .a-reveal.is-in { opacity: 1; transform: none; }
html.a-on .a-reveal--left { transform: translateX(-30px); }
html.a-on .a-reveal--zoom { transform: scale(.94); }

/* Hervorgehobenes Wort: Strich zeichnet sich, Glanz läuft einmal darüber */
.a-word { position: relative; display: inline-block; white-space: nowrap; }
.a-word__line { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .32em; overflow: visible; pointer-events: none; }
.a-word__line path { fill: none; stroke: var(--a-line, var(--accent)); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.1s .35s cubic-bezier(.65, 0, .35, 1); }
.a-word.is-in .a-word__line path { stroke-dashoffset: 0; }
.a-word__text { background-image: linear-gradient(105deg, currentColor 0 42%, var(--a-shine, rgba(255, 255, 255, .85)) 50%, currentColor 58% 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
.a-word.is-in .a-word__text { -webkit-text-fill-color: transparent; animation: a-shine 1.6s .9s ease-in-out both; }
@keyframes a-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Laufendes Band mit Begriffen */
.a-band { overflow: hidden; border-block: 1px solid var(--a-band-line, var(--line)); background: var(--a-band-bg, var(--surface)); color: var(--a-band-text, var(--muted)); }
.a-band__track { display: flex; width: max-content; animation: a-marquee 38s linear infinite; }
.a-band__group { display: flex; align-items: center; gap: 0; padding-block: 18px; }
.a-band__item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-size: clamp(16px, 1.6vw, 20px); white-space: nowrap; }
.a-band__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--a-accent, var(--accent)); opacity: .7; }
.a-band:hover .a-band__track { animation-play-state: paused; }
@keyframes a-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Karten kippen leicht unter der Maus */
.a-tilt { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; transform-style: preserve-3d; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html.a-on .a-hero > *, html.a-on .a-hero-media { animation: none; opacity: 1; }
  html.a-on .a-reveal { opacity: 1; transform: none; transition: none; }
  .a-word__line path { transition: none; stroke-dashoffset: 0; }
  .a-word.is-in .a-word__text { animation: none; -webkit-text-fill-color: currentColor; }
  .a-band__track { animation: none; }
  .a-progress { display: none; }
}

/* Variante Zeilen-Maske: jede Zeile fährt von unten ins Bild */
.a-line { display: block; overflow: hidden; padding-bottom: .06em; }
.a-line > span { display: block; }
html.a-on .a-lines .a-line > span { transform: translateY(105%); animation: a-line-up 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--a-i, 0) * .14s); }
@keyframes a-line-up { to { transform: none; } }

/* Variante Unschärfe: Wort atmet sich ins Bild */
html.a-on .a-blur { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(6px); transition: opacity 1.4s .5s ease, filter 1.4s .5s ease, transform 1.4s .5s ease; }
html.a-on .a-blur.is-in { opacity: 1; filter: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.a-on .a-lines .a-line > span { animation: none; transform: none; }
  html.a-on .a-blur { opacity: 1; filter: none; transform: none; transition: none; }
}

/* Variante Textmarker: gelber Balken wischt hinter das Wort */
.a-mark { background: linear-gradient(transparent 58%, var(--a-mark, #FFD54A) 58%, var(--a-mark, #FFD54A) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; color: inherit; padding: 0 .08em; transition: background-size 1s .6s cubic-bezier(.65, 0, .35, 1); }
html.a-on .a-mark { background-size: 0% 100%; }
html.a-on .a-mark.is-in { background-size: 100% 100%; }
/* Balken wachsen, Zeitleiste zeichnet sich */
[data-a-bars] i { transform-origin: left; }
html.a-on [data-a-bars] i { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
[data-a-bars] li:nth-child(2) i { transition-delay: .12s; }
[data-a-bars] li:nth-child(3) i { transition-delay: .24s; }
[data-a-bars] li:nth-child(4) i { transition-delay: .36s; }
html.a-on [data-a-bars].is-in i { transform: none; }
@media (prefers-reduced-motion: reduce) { .a-mark { background-size: 100% 100%; transition: none; } [data-a-bars] i { transform: none; transition: none; } }