/* Motion-Layer (Micro-Interactions). Wird per sync-footer.py auf allen Seiten mit Footer geladen.
   Alles hängt an .cs-motion (gesetzt von motion.js) — ohne JS bleibt die Seite statisch.
   Nur transform/opacity, ein Easing (--ease-out), reduced-motion = aus. */

/* 10 · Cross-Document View Transitions */
@view-transition{navigation:auto}
.header{view-transition-name:cs-header}
#service-title-tv,:root:has(link[rel=canonical][href$="/tv-kalibrierung/"],link[rel=canonical][href$="/tv-display-calibration/"]) #lp-title{view-transition-name:cs-lp-tv}
#service-title-projektor,:root:has(link[rel=canonical][href$="/projektor-kalibrierung/"],link[rel=canonical][href$="/projector-calibration/"]) #lp-title{view-transition-name:cs-lp-projektor}
#service-title-hdr,:root:has(link[rel=canonical][href$="/hdr-dolby-vision-kalibrierung/"],link[rel=canonical][href$="/hdr-dolby-vision-calibration/"]) #lp-title{view-transition-name:cs-lp-hdr}
#service-title-lut,:root:has(link[rel=canonical][href$="/3d-lut-kalibrierung/"],link[rel=canonical][href$="/3d-lut-calibration/"]) #lp-title{view-transition-name:cs-lp-lut}
#service-title-colorimeter,:root:has(link[rel=canonical][href$="/colorimeter-profilierung/"],link[rel=canonical][href$="/colorimeter-profiling/"]) #lp-title{view-transition-name:cs-lp-colorimeter}
#service-title-consulting,:root:has(link[rel=canonical][href$="/consulting/"],link[rel=canonical][href$="/consultancy/"]) #lp-title{view-transition-name:cs-lp-consulting}
/* Icon-Flug Karte -> Detailseite, nur Desktop und DE (Ziel .lp-hero-icon kommt aus gen-landingpages.py) */
@media (min-width:1024px){
html[lang=de] .service-card[data-service=tv] .service-icon,:root:has(link[rel=canonical][href$="/tv-kalibrierung/"]) .lp-hero-icon{view-transition-name:cs-lp-tv-icon}
html[lang=de] .service-card[data-service=projektor] .service-icon,:root:has(link[rel=canonical][href$="/projektor-kalibrierung/"]) .lp-hero-icon{view-transition-name:cs-lp-projektor-icon}
html[lang=de] .service-card[data-service=hdr] .service-icon,:root:has(link[rel=canonical][href$="/hdr-dolby-vision-kalibrierung/"]) .lp-hero-icon{view-transition-name:cs-lp-hdr-icon}
html[lang=de] .service-card[data-service=lut] .service-icon,:root:has(link[rel=canonical][href$="/3d-lut-kalibrierung/"]) .lp-hero-icon{view-transition-name:cs-lp-lut-icon}
html[lang=de] .service-card[data-service=colorimeter] .service-icon,:root:has(link[rel=canonical][href$="/colorimeter-profilierung/"]) .lp-hero-icon{view-transition-name:cs-lp-colorimeter-icon}
html[lang=de] .service-card[data-service=consulting] .service-icon,:root:has(link[rel=canonical][href$="/consulting/"]) .lp-hero-icon{view-transition-name:cs-lp-consulting-icon}
}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease-out,cubic-bezier(.16,1,.3,1))}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}

/* 1 · Hero: Foto schwingt ein, Parallax-Tiefe beim Scrollen, einmal pro Sitzung ein Messfenster auf dem TV im Foto */
.cs-motion .hero-photo{overflow:hidden}
.cs-motion .hero-photo img,.cs-screen{transform:translateY(var(--cs-py,0px)) scale(var(--cs-ps,1));transform-origin:60% 50%;animation:cs-settle 1.6s var(--ease-out) .1s both}
@keyframes cs-settle{from{scale:1.1}to{scale:1}}
.cs-screen{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.cs-screen__map{position:absolute}
.cs-screen__panel,.cs-screen__patch{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease-out)}
.cs-screen__panel{background:#050506;clip-path:polygon(16.78% 8.43%,68.28% 16.82%,68.28% 59.61%,16.78% 60.59%)}
.cs-screen__patch{background:#ECEAE4;clip-path:polygon(36.85% 28.41%,52.83% 30.03%,52.83% 44.22%,36.85% 43.52%)}
.cs-screen.is-on .cs-screen__panel{opacity:1}
.cs-screen.is-on .cs-screen__patch{opacity:1}
.cs-screen.is-off .cs-screen__patch{transition-duration:.2s}
.cs-screen.is-off .cs-screen__panel{transition-duration:.8s;transition-delay:.15s}
.cs-screen[data-patch=r] .cs-screen__patch{background:#C8342C}
.cs-screen[data-patch=g] .cs-screen__patch{background:#3FA84A}
.cs-screen[data-patch=b] .cs-screen__patch{background:#3350C8}

/* 2/6/8 · Zahlen-Roll: echter Text bleibt im DOM, sichtbar ist die Zwischenzahl */
.cs-motion .cs-rolling{position:relative;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.cs-motion .cs-rolling::after{content:attr(data-cs-roll);position:absolute;inset:0;box-sizing:border-box;display:flex;align-items:center;justify-content:var(--cs-roll-align,flex-start);padding:inherit;white-space:nowrap;-webkit-text-fill-color:var(--cs-roll-color,currentColor)}
.cs-motion .report-delta-badge{position:relative}
.cs-motion .report-delta-badge.cs-locked::before{content:"";position:absolute;inset:-4px;border:1.5px solid var(--accent-primary);border-radius:11px;opacity:0;animation:cs-lock .9s var(--ease-out)}
@keyframes cs-lock{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.08)}}

/* 5 · Buttons: Fill-Sweep, Pfeil-Nudge, Press */
.cs-motion .btn-primary{position:relative;isolation:isolate;overflow:hidden}
.cs-motion .btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent-light);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease-out)}
.cs-motion .btn-primary:hover{background:var(--accent-primary)}
.cs-motion .btn-primary:is(:hover,:focus-visible)::before{transform:none}
.cs-motion .cs-arrow>svg:last-child{transition:transform .3s var(--ease-out)}
.cs-motion .cs-arrow:is(:hover,:focus-visible)>svg:last-child{transform:translateX(3px)}
.cs-motion .btn:active{transform:scale(.97);transition-duration:.08s}

/* 6 · Featured-Paket: wandernde Lichtkante */
.cs-edge{position:absolute;top:-2px;left:14px;right:14px;height:2px;overflow:hidden;pointer-events:none;z-index:1}
.cs-edge::before{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,236,190,.95),transparent);transform:translateX(-100%);animation:cs-edge 6s var(--ease-out) 1s infinite}
@keyframes cs-edge{0%{transform:translateX(-100%)}40%,100%{transform:translateX(290%)}}

/* 7 · FAQ: Plus → Minus, Antwort blendet ein */
.cs-motion .faq-icon-svg line{transform-box:fill-box;transform-origin:center;transition:transform .3s var(--ease-out),opacity .3s var(--ease-out)}
.cs-motion .faq-icon-svg{transition:transform .3s var(--ease-out)}
.cs-motion .faq-item.active .faq-icon svg{transform:rotate(180deg)}
.cs-motion .faq-item.active .faq-icon-svg line:first-child{transform:scaleY(0);opacity:0}
.cs-motion .faq-item.active .faq-answer-inner{animation:cs-fade-up .45s var(--ease-out) both}
@keyframes cs-fade-up{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* 8 · Konfigurator: Häkchen beim Abschließen */
.cs-motion .stepper-step.completed .stepper-num::after{animation:cs-check .4s var(--ease-out) both}
@keyframes cs-check{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1;transform:none}}

/* 9 · Kundenstimmen: Fokus-Karte hebt sich, Rest tritt zurück */
.cs-motion .testimonials-marquee-track .testimonial-card{transition:background .3s var(--ease-out),opacity .3s var(--ease-out),transform .3s var(--ease-out)}
@media (hover:hover){
.cs-motion .testimonials-marquee-track:hover .testimonial-card{opacity:.5}
.cs-motion .testimonials-marquee-track .testimonial-card:hover{opacity:1;transform:translateY(-4px)}
}

/* 11 · Lesefortschritt mit Skala */
.cs-progress{position:fixed;top:0;left:0;right:0;z-index:1001;height:3px;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(245,240,230,.18) calc(10% - 1px) 10%)}
.cs-progress>span{position:absolute;inset:0;background:var(--accent-primary);transform:scaleX(0);transform-origin:left center}

@media (prefers-reduced-motion:reduce){
@view-transition{navigation:none}
.cs-edge,.cs-screen{display:none}
.cs-motion .hero-photo img{animation:none;transform:none}
.cs-motion .btn-primary::before,.cs-motion .cs-arrow>svg:last-child,.cs-motion .faq-icon-svg,.cs-motion .faq-icon-svg line,.cs-motion .testimonials-marquee-track .testimonial-card{transition:none}
.cs-motion .btn:active,.cs-motion .testimonials-marquee-track .testimonial-card:hover{transform:none}
.cs-motion .faq-item.active .faq-answer-inner,.cs-motion .stepper-step.completed .stepper-num::after,.cs-motion .report-delta-badge.cs-locked::before{animation:none}
}