/* Vier-Vier-Consulting – ruhige Animationen für alle Seiten.
   Nach dem <style> der Seite einbinden. Bewusst NICHT: Glanzstreifen, Maus-Lichtkegel, 3D-Kippen,
   magnetische Buttons, rotierende Rahmen, schwebende Karten, Maus-Parallaxe, grüne Lichtflächen im Hero. */

/* Fortschrittsbalken oben */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: var(--green-grad); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* Hero: Einstieg nacheinander, insgesamt unter einer Sekunde */
.js-anim .hero-copy > *, .js-anim .feature, .js-anim .hero-media .portrait, .js-anim .stat { opacity: 0; }
.loaded .hero-copy > * { animation: rise-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.loaded .hero-copy > :nth-child(1) { animation-delay: .05s; }
.loaded .hero-copy > :nth-child(2) { animation: none; opacity: 1; }
.loaded .hero-copy > :nth-child(3) { animation-delay: .4s; }
.loaded .hero-copy > :nth-child(4) { animation-delay: .5s; }
.loaded .hero-copy > :nth-child(5) { animation-delay: .6s; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .w > span { display: inline-block; transform: translateY(110%); }
.loaded .hero h1 .w > span { animation: word-up .75s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.12s + var(--i) * 60ms); }
.loaded .hero-media .portrait { animation: portrait-in 1s .1s cubic-bezier(.2, .7, .2, 1) both; }
.loaded .stat { animation: rise-in .6s .6s cubic-bezier(.2, .7, .2, 1) both; }
.loaded .feature { animation: rise-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.loaded .feature:nth-child(1) { animation-delay: .65s; }
.loaded .feature:nth-child(2) { animation-delay: .75s; }
.loaded .feature:nth-child(3) { animation-delay: .85s; }
/* Hero ohne Zeile darüber (Danke-Seiten, Rechtsseiten): Überschrift steht an erster Stelle
   (Wörter kommen einzeln), der Text direkt darunter folgt */
@media (prefers-reduced-motion: no-preference) {
  .loaded .hero-copy > h1:first-child { animation: none; opacity: 1; }
  .loaded .hero-copy > h1:first-child + p { animation: rise-in .7s .45s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes word-up { to { transform: none; } }
@keyframes portrait-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Buttons: Pfeil */
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(4px); }
.site-link svg { transition: transform .25s ease; }
.site-link:hover svg { transform: translateX(3px); }

/* Überschriften Wort für Wort */
.wsplit .wd { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease; transition-delay: calc(var(--i) * 55ms); }
.wsplit.words-in .wd { opacity: 1; transform: none; filter: none; }

/* Timeline: Linie füllt sich beim Scrollen */
.timeline::before { opacity: .22; }
.tl-progress { position: absolute; left: 50%; top: 0; width: 2px; height: 0; transform: translateX(-50%); background: linear-gradient(to bottom, var(--green-1), var(--green-2)); box-shadow: 0 0 12px rgba(18, 193, 122, .7); border-radius: 2px; }
.tl-item::before { border-color: rgba(255,255,255,.35); box-shadow: none; transition: border-color .4s, box-shadow .4s, transform .4s ease; z-index: 1; }
.tl-item.hit::before { border-color: var(--green-2); box-shadow: 0 0 0 6px rgba(18, 193, 122, .15), 0 0 16px rgba(18, 193, 122, .8); transform: translateX(-50%) scale(1.15); }
.tl-card { transition: transform .4s ease, box-shadow .4s ease; }
.tl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }

/* Karten heben sich beim Drüberfahren leicht an */
.step { transition: transform .35s ease, background .35s ease; }
.step:hover { transform: translateY(-4px); }
.review { transition: border-color .2s, transform .35s ease; }
.review:hover { transform: translateY(-4px); }

/* FAQ weich aufklappen */
.faq details[open] .answer { animation: faq-in .45s ease; }
.faq summary { transition: color .2s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 860px) {
  .tl-progress { left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .hero-copy > *, .js-anim .feature, .js-anim .hero-media .portrait, .js-anim .stat { opacity: 1; }
  .loaded .hero-copy > *, .loaded .feature, .loaded .hero-media .portrait, .loaded .stat, .loaded .hero h1 .w > span { animation: none; transform: none; }
  .wsplit .wd { opacity: 1; transform: none; filter: none; transition: none; }
}