/* ── Bewegung ────────────────────────────────────────────────────────────────
   Kleine Antworten auf das, was die Hand gerade tut: Knöpfe geben nach, Karten
   fangen Licht, Inhalte kommen beim Scrollen ruhig herein. Alles hier ist
   Zugabe. Ohne diese Datei und ohne motion.js steht die Seite genauso da, nur
   stiller. Wer weniger Bewegung eingestellt hat, bekommt nichts davon. */
:root{
  --m-ease:cubic-bezier(.16,1,.3,1);       /* läuft weich aus */
  --m-spring:cubic-bezier(.34,1.56,.64,1); /* federt einmal kurz nach */
  --m-press:cubic-bezier(.3,0,.5,1)        /* fester Druck */
}

@media (prefers-reduced-motion:no-preference){

/* Auftritt der ersten Seite. Reines CSS, damit nichts erst sichtbar ist und
   dann verschwindet. Das Porträt bleibt immer gemalt, nur der Ausschnitt öffnet sich. */
@keyframes m-rise{from{opacity:0;transform:translate3d(0,18px,0);filter:blur(6px)}}
@keyframes m-unveil{from{clip-path:inset(7% 7% 7% 7% round 44px);transform:scale(1.035)}to{clip-path:inset(0 round 28px)}}
@keyframes m-settle{from{transform:scale(1.14)}}
.hero-intro>*{animation:m-rise .95s var(--m-ease) backwards}
.hero-intro>.eyebrow{animation-delay:.05s}
.hero-intro>h1{animation-delay:.12s}
.hero-intro>.hero-promise{animation-delay:.22s}
.hero-intro>.lead{animation-delay:.3s}
.hero-intro>.hero-actions{animation-delay:.38s}
.hero-intro>.hero-note{animation-delay:.46s}
.hero-portrait{animation:m-unveil 1.25s var(--m-ease) .08s backwards}
.hero-portrait>img{animation:m-settle 1.8s var(--m-ease) .08s backwards;scale:1.06;will-change:translate}
.hero-foot>*{animation:m-rise .8s var(--m-ease) backwards}
.hero-foot>:nth-child(1){animation-delay:.52s}.hero-foot>:nth-child(2){animation-delay:.58s}
.hero-foot>:nth-child(3){animation-delay:.64s}.hero-foot>:nth-child(4){animation-delay:.7s}
.hero-foot>:nth-child(5){animation-delay:.76s}
.marquee-track img{animation:m-rise .8s var(--m-ease) backwards}
.marquee-track img:nth-child(1){animation-delay:.55s}.marquee-track img:nth-child(2){animation-delay:.6s}
.marquee-track img:nth-child(3){animation-delay:.65s}.marquee-track img:nth-child(4){animation-delay:.7s}
.marquee-track img:nth-child(5){animation-delay:.75s}.marquee-track img:nth-child(6){animation-delay:.8s}
.marquee-track img:nth-child(7){animation-delay:.85s}.marquee-track img:nth-child(8){animation-delay:.9s}
.marquee-track img:nth-child(9){animation-delay:.95s}
.marquee-track img{transition:filter .45s var(--m-ease),opacity .45s var(--m-ease),transform .5s var(--m-spring)}
.marquee-track img:hover{transform:translateY(-2px) scale(1.04)}

/* Der grüne Punkt atmet: hier ist jemand erreichbar. */
@keyframes m-ping{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3.2);opacity:0}}
.location-dot,.status i{position:relative}
.location-dot:after,.status i:after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:m-ping 2.8s var(--m-ease) infinite}

/* Hereinkommen beim Scrollen. Versteckt wird nur, was motion.js ausdrücklich
   übernimmt, und nur solange es noch unterhalb des Blicks liegt. */
.m-on .m-rv{opacity:0;transform:translate3d(0,28px,0) scale(.985);
  transition:opacity .9s var(--m-ease),transform 1s var(--m-ease),filter .9s var(--m-ease);
  transition-delay:var(--m-d,0s)}
.m-on .m-rv.m-soft{filter:blur(5px)}
.m-on .m-rv.is-in{opacity:1;transform:none;filter:none}

/* Kopfzeile: fester werden beim Scrollen, dazu ein Haarstrich, der mitläuft. */
header{transition:background-color .4s var(--m-ease),box-shadow .4s var(--m-ease)}
header.m-scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.18)}
header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#0066cc,#3d8bfd);transform-origin:0 50%;transform:scaleX(var(--m-p,0));opacity:.9}
.nav-links{position:relative}
.nav-links a{position:relative;z-index:1;transition:color .3s var(--m-ease)}
.nav-links a.m-active{color:var(--ink)}
.m-pill{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;border-radius:999px;background:rgba(0,0,0,.055);
  pointer-events:none;opacity:0;transform:translateX(var(--px,0));width:var(--pw,0);
  transition:transform .5s var(--m-ease),width .5s var(--m-ease),opacity .3s var(--m-ease)}
.m-pill.m-show{opacity:1}
.m-pill.m-jump{transition:opacity .3s var(--m-ease)}

/* Mobilmenü klappt auf statt aufzuspringen, der Burger wird zum X. */
@keyframes m-drop{from{opacity:0;transform:translateY(-10px)}}
.mobile-menu.active{animation:m-drop .4s var(--m-ease)}
.mobile-menu.active>*{animation:m-rise .5s var(--m-ease) backwards}
.mobile-menu.active>:nth-child(2){animation-delay:.03s}.mobile-menu.active>:nth-child(3){animation-delay:.06s}
.mobile-menu.active>:nth-child(4){animation-delay:.09s}.mobile-menu.active>:nth-child(5){animation-delay:.12s}
.mobile-menu.active>:nth-child(6){animation-delay:.15s}.mobile-menu.active>:nth-child(7){animation-delay:.18s}
.burger span{transition:transform .45s var(--m-spring),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Knöpfe: geben beim Drücken nach, federn zurück, fangen das Licht unter dem Finger. */
.btn{position:relative;isolation:isolate;overflow:hidden;
  transition:transform .55s var(--m-spring),translate .45s var(--m-ease),background-color .25s,box-shadow .35s var(--m-ease),color .25s}
.btn:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 70%);
  transition:opacity .35s var(--m-ease)}
.btn-ghost:before,.btn-white:before{background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),rgba(0,102,204,.12),transparent 70%)}
.btn:hover:before{opacity:1}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.96);transition-duration:.12s;transition-timing-function:var(--m-press)}
.btn .arr,.service-cta .arr{display:inline-block;transition:transform .5s var(--m-spring)}
.btn:hover .arr{transform:translateX(4px)}
.btn-blue{box-shadow:0 1px 0 rgba(255,255,255,.18) inset}
.btn-blue:hover{box-shadow:0 12px 28px -12px rgba(0,102,204,.65),0 1px 0 rgba(255,255,255,.18) inset}
.btn-wa:hover{box-shadow:0 12px 28px -12px rgba(20,122,71,.6)}

/* Ein einziger Lichtstreif über den ersten Knopf, sobald die Seite steht. */
@keyframes m-sheen{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(230%) skewX(-18deg)}}
.hero-intro .btn-blue:after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-130%) skewX(-18deg);animation:m-sheen 1.1s var(--m-ease) 1.25s}

.text-link{background:linear-gradient(currentColor,currentColor) 0 calc(50% + .65em)/0 1px no-repeat;
  transition:background-size .5s var(--m-ease)}
.text-link:hover{text-decoration:none;background-size:100% 1px}

/* Karten fangen Licht dort, wo der Zeiger steht. */
.m-glow{isolation:isolate}
.m-glow>.m-spot{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(var(--m-r,380px) circle at var(--mx,50%) var(--my,50%),var(--m-c,rgba(0,102,204,.075)),transparent 70%);
  transition:opacity .6s var(--m-ease)}
.m-glow:hover>.m-spot{opacity:1}
.sec-cta>.m-spot,.vgl-karte>.m-spot{--m-c:rgba(140,185,255,.16)}
.vgl-andere>.m-spot{--m-c:rgba(255,150,150,.13)}
.service-card>.m-spot{--m-r:300px;--m-c:rgba(140,185,255,.45);border-radius:22px}
@supports (color:color-mix(in srgb,red 50%,transparent)){
  .service-card>.m-spot{--m-c:color-mix(in srgb,var(--svc,#0066cc) 70%,transparent)}}
.final{position:relative;overflow:hidden}
.final>.m-spot{--m-r:620px;--m-c:rgba(10,132,255,.2)}

.paket{transition:transform .6s var(--m-spring),box-shadow .6s var(--m-ease),border-color .35s}
.paket:hover{transform:translateY(-4px)}
.paket:active{transform:scale(.985);transition-duration:.15s}
.paket-link .arr{transition:transform .5s var(--m-spring)}
.paket:hover .paket-link .arr{transform:translateX(5px)}

/* Leistungskarten drehen mit etwas Gewicht und kommen weich zur Ruhe. */
.svc-inner{transition:transform .85s cubic-bezier(.3,1.25,.45,1),scale .3s var(--m-ease)}
.service-card:active .svc-inner{scale:.985}

/* Kurzvideos: wie ein Poster, das man leicht in der Hand kippt. */
.m-tilt{transition:transform .7s var(--m-ease)!important}
.m-tilt.m-tilting{transition:transform .14s linear!important}
.m-glare{position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.26),transparent 55%);
  transition:opacity .5s var(--m-ease)}
.m-tilting>.m-glare{opacity:1}
.rm-reel>img{transition:transform .9s var(--m-ease)}
.rm-reel:hover>img{transform:scale(1.045)}
.reel-play{transition:transform .5s var(--m-spring),background-color .3s,color .3s}
.rm-reel:hover .reel-play{transform:scale(1.12);background:#fff}
.rm-reel:active{scale:.98}
.reel-label{transition:transform .6s var(--m-ease)}
.rm-reel:hover .reel-label{transform:translateY(-4px)}
.rm-nav{transition:transform .45s var(--m-spring),box-shadow .3s,background-color .3s}
.rm-nav:hover{transform:scale(1.08);box-shadow:0 10px 24px -8px rgba(0,0,0,.2)}
.rm-nav:active{transform:scale(.92);transition-duration:.1s}
.rm-track.m-grab{cursor:grab}
.rm-track.m-drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.rm-track.m-drag .rm-reel{pointer-events:none}
.rm-track img{-webkit-user-drag:none}
#rmCur{display:inline-block}

.hero-portrait figcaption a{transition:transform .5s var(--m-spring),background-color .3s,color .3s,border-color .3s}
.hero-portrait figcaption a:hover{background:#fff;color:var(--ink);border-color:#fff;transform:rotate(45deg)}

/* Kundenbeispiel: das Bild atmet, der Play-Knopf lädt ein. */
.case-card>img{transition:transform 1.4s var(--m-ease)}
.case-card:hover>img{transform:scale(1.035)}
@keyframes m-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 20px rgba(255,255,255,0)}}
.cplay i{animation:m-ring 2.6s var(--m-ease) infinite;transition:transform .5s var(--m-spring)}
.case-card:hover .cplay i{transform:scale(1.1)}
.case-stat b{display:inline-block;font-variant-numeric:tabular-nums}

/* Schnell-Check: Auswahl rastet ein, Schritte gleiten herein. */
@keyframes m-step{from{opacity:0;transform:translate3d(18px,0,0)}}
@keyframes m-pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.q-step.active,#quizResult:not([hidden]){animation:m-step .55s var(--m-ease) backwards}
.q-opt{transition:transform .45s var(--m-spring),border-color .25s,background-color .25s,box-shadow .35s var(--m-ease)}
.q-opt:hover{transform:translateY(-1px)}
.q-opt:active{transform:scale(.98);transition-duration:.1s}
.q-opt.sel{box-shadow:0 0 0 4px rgba(0,102,204,.12)}
.q-opt .chk{transition:background-color .25s,border-color .25s}
.q-opt.sel .chk{animation:m-pop .36s var(--m-spring)}
.q-bar i{transition:width .8s var(--m-ease)}
.q-field input,.q-field textarea{transition:border-color .25s,box-shadow .35s var(--m-ease)}
.q-field input:focus,.q-field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,102,204,.13)}

/* Fragen klappen auf, statt zu springen. */
.faq-item summary{transition:color .25s}
.faq-item summary:hover{color:var(--blue)}
.faq-item summary>span{display:inline-block;transition:transform .5s var(--m-spring),color .25s}
.faq-item.m-closing summary>span{transform:none}
.faq-a{overflow:hidden}

.why-card>.ic{display:inline-block;transition:transform .6s var(--m-spring)}
.why-card:hover>.ic{transform:translateY(-3px) rotate(-6deg) scale(1.1)}

@keyframes m-pop-in{from{opacity:0;transform:scale(.6) translateY(12px)}}
.wa-float{animation:m-pop-in .7s var(--m-spring) 1.4s backwards;transition:transform .5s var(--m-spring),box-shadow .3s}
.wa-float:hover{transform:scale(1.08);box-shadow:0 12px 30px -6px rgba(20,122,71,.5)}
.wa-float:active{transform:scale(.94)}
.cookie.show{animation:m-rise .6s var(--m-ease) .2s backwards}

/* Über mich: zwei Bilder, zwei Tiefen. */
.m-on .ph-portrait img{scale:1.08}
.ph-portrait img,.ph-small{will-change:translate}
}