/* autour.me – Bewegungs-Paket (Entwurf 3.11.): mehr Leben, nie hektisch. Bei „Bewegung reduzieren“ komplett aus. */
@media (prefers-reduced-motion:no-preference){
/* 1 Überschriften: Wort für Wort */
h2.worte{opacity:1!important;transform:none!important}
h2.worte .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--n)*70ms)}
h2.worte.da .w{opacity:1;transform:none}
/* 2 Handys: schweben + neigen sich beim Scrollen */
.hand-buehne{perspective:1400px}
.telefon.lebt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .25s linear;will-change:transform}
.telefon.lebt::after{content:"";position:absolute;inset:-40%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);transform:translateX(-120%);pointer-events:none;z-index:3}
.telefon.lebt.glanz::after{animation:glanz 1.6s ease .3s}
@keyframes glanz{to{transform:translateX(120%)}}
/* 3 Stand-Bildschirme bekommen Leben: Finger tippt, Bild atmet */
.telefon .tipp{position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(255,255,255,.8);opacity:0;z-index:4;pointer-events:none}
.telefon.tippt .tipp{animation:tipp 3.2s ease-in-out infinite}
@keyframes tipp{0%,55%{opacity:0;transform:scale(1.4)}62%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(.8)}80%{opacity:0;transform:scale(2.2)}100%{opacity:0}}
.telefon.atmet img{animation:atmen 9s ease-in-out infinite alternate}
@keyframes atmen{from{transform:scale(1)}to{transform:scale(1.06) translateY(-1.5%)}}
/* 4 Fleißig dahinter: erst „prüft …“, dann Ergebnis */
.chip .prueft{display:inline-block;margin-left:8px;color:var(--leise);font-size:15px}
.chip .prueft::after{content:"";display:inline-block;width:12px;height:12px;margin-left:6px;border:2px solid var(--akzent);border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:dreh .7s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.chip small{display:inline-block;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .3s}
.chip:not(.fertig) small{opacity:0;transform:scale(.4);width:0;margin:0;overflow:hidden}
.chip.fertig .prueft{display:none}
.chip.fertig{box-shadow:0 12px 30px rgba(47,158,88,.18)}
/* 5 Momente: erst die Frage, dann kommt autour */
.moment .antwort{opacity:0;transform:translateY(24px);transition:opacity .6s ease .9s,transform .7s cubic-bezier(.2,.8,.2,1) .9s}
.moment.da .antwort{opacity:1;transform:none}
.moment .frage em{display:inline-block}
.moment.da .frage em{animation:wackel2 .9s ease .2s}
@keyframes wackel2{20%{transform:rotate(-14deg) scale(1.15)}40%{transform:rotate(10deg) scale(1.15)}60%{transform:rotate(-6deg)}100%{transform:none}}
.moment-raster>.moment:nth-child(2){transition-delay:.15s}.moment-raster>.moment:nth-child(3){transition-delay:.3s}
/* 6 Kacheln und Preise: nacheinander, mit Schwung, und heben sich beim Zeigen */
.kacheln>a.auf{transition-delay:calc(var(--n)*70ms)}
.kacheln>a,.preis,.null>div{transition:transform .25s ease,box-shadow .25s ease,opacity .8s ease}
.kacheln>a:hover,.preis:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.14)}
.kacheln>a em{display:inline-block;transition:transform .3s}
.kacheln>a:hover em{transform:scale(1.25) rotate(-8deg)}
/* 7 Knöpfe pulsieren sanft */
.knopf.lockt{animation:locken 2.8s ease-in-out infinite}
@keyframes locken{0%,70%,100%{box-shadow:0 10px 30px rgba(239,106,42,.35),0 0 0 0 rgba(239,106,42,.5)}85%{box-shadow:0 10px 30px rgba(239,106,42,.35),0 0 0 14px rgba(239,106,42,0)}}
}