/* Back to Outdoor – Cinematic Scroll für die Startseite (DE / EN / FR)
   Reine CSS-/JS-Erweiterung ohne Abhängigkeiten. Alles Animierte hängt an der Klasse
   html.fx (wird nur gesetzt, wenn JS läuft und KEINE reduzierte Bewegung gewünscht ist).
   Ohne html.fx bleibt die Seite statisch und vollständig lesbar. */

/* ---------- Fortschrittsbalken ---------- */
.h3d-bar{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--teal-bright,#e36d27);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* ---------- Hero: Kamerafahrt beim Scrollen ---------- */
html.fx .hero{--hp:0;--mx:0;--my:0}
html.fx .hero-video-bg{transform:translate3d(0,calc(var(--hp) * 90px),0) scale(calc(1.02 + var(--hp) * .16));will-change:transform}
html.fx .hero .wrap{transform:translate3d(0,calc(var(--hp) * -64px),0);opacity:calc(1 - var(--hp) * 1.2);will-change:transform,opacity}
html.fx .hero .contour{transform:translate3d(calc(var(--mx) * 10px),calc(var(--hp) * -40px),0)}
html.fx .hero-logo-watermark{transform:translate3d(calc(var(--mx) * -18px),calc(-50% + var(--hp) * -120px + var(--my) * -10px),0) rotate(calc(var(--hp) * -5deg));will-change:transform}
@keyframes h3dRise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
html.fx .hero-kicker,
html.fx h1.hero-headline,
html.fx .hero-sub,
html.fx .hero-actions,
html.fx .hero-stats{animation:h3dRise .95s cubic-bezier(.2,.7,.2,1) both}
html.fx .hero-kicker{animation-delay:.05s}
html.fx h1.hero-headline{animation-delay:.15s}
html.fx .hero-sub{animation-delay:.3s}
html.fx .hero-actions{animation-delay:.42s}
html.fx .hero-stats{animation-delay:.55s}

/* ---------- Leistungen: Karten kippen aus der Tiefe ein ---------- */
html.fx .pkg-grid{perspective:1100px}
html.fx .pkg-grid.reveal > .pkg{opacity:0;transform:rotateX(16deg) translate3d(0,46px,-40px);transform-origin:50% 100%;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 130ms)}
html.fx .pkg-grid.reveal.in > .pkg{opacity:1;transform:none}
html.fx .pkg-grid.reveal.in > .pkg:hover{transform:translate3d(0,-6px,0);transition-delay:0s;transition-duration:.3s}

/* ---------- Karten-Gruppen: gestaffeltes Einblenden ---------- */
html.fx :is(.aud-grid,.why-list,.paths-grid,.journal-grid).reveal > *{opacity:0;transform:translate3d(0,34px,0);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 110ms)}
html.fx :is(.aud-grid,.why-list,.paths-grid,.journal-grid).reveal.in > *{opacity:1;transform:none}
.pkg-grid > :nth-child(2),.aud-grid > :nth-child(2),.why-list > :nth-child(2),.paths-grid > :nth-child(2),.journal-grid > :nth-child(2){--i:1}
.pkg-grid > :nth-child(3),.aud-grid > :nth-child(3),.why-list > :nth-child(3),.paths-grid > :nth-child(3),.journal-grid > :nth-child(3){--i:2}

/* ---------- Ablauf: Linie und Schritte folgen dem Scrollen ---------- */
.process-line svg{left:0}
html.fx .process-step{opacity:.3;transition:opacity .5s ease}
html.fx .process-step.on{opacity:1}
html.fx .process-step .step-num{transition:transform .5s cubic-bezier(.2,.7,.2,1),background .5s ease}
html.fx .process-step.on .step-num{transform:scale(1.2);background:var(--teal-bright,#e36d27)}

/* ---------- Portfolio: Banner gleiten im Rahmen (ohne Zoom, ohne zusätzlichen Beschnitt) ---------- */
html.fx .portfolio-banner img{object-position:50% var(--oy,50%)}
html.fx .portfolio-region.reveal .p-photo{opacity:0;transform:translate3d(0,38px,0) scale(.97);transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
html.fx .portfolio-region.reveal.in .p-photo{opacity:1;transform:none}
.p-photo:nth-child(2){--i:1}.p-photo:nth-child(3){--i:2}.p-photo:nth-child(4){--i:3}

/* ---------- Reviere-Bühne ---------- */
.reviere{background:var(--ink,#132030);color:var(--foam,#f7f5f0);position:relative;padding:0}
.reviere-pin{padding:104px 0;position:relative}
.reviere-in{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:56px;align-items:center}
.reviere h2{font-size:clamp(2.2rem,4.2vw,3.6rem);margin-top:14px;color:var(--foam,#f7f5f0)}
.reviere-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:2px}
.reviere-steps li{padding:12px 0 12px 22px;border-left:2px solid var(--line-light,rgba(247,245,240,.16));color:rgba(247,245,240,.7)}
.reviere-steps b{display:block;font-family:'Big Shoulders Display',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:.01em;text-transform:uppercase;line-height:1.05;color:var(--foam,#f7f5f0)}
.reviere-steps span{display:block;margin-top:4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright,#e36d27)}
.reviere-steps em{display:block;margin-top:8px;font-style:normal;font-size:.92rem;line-height:1.5;color:rgba(247,245,240,.7);max-width:40ch}
.reviere-caption{display:none}
.reviere-cta{margin-top:30px}
.reviere-scene{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.rcard{position:relative;margin:0;aspect-ratio:var(--ar,.75);overflow:hidden;border-radius:6px;background:#0c1520}
.rcard img{width:100%;height:100%;object-fit:cover;display:block}
.rcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;background:linear-gradient(transparent,rgba(16,24,28,.88));font-family:'Big Shoulders Display',sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;color:var(--foam,#f7f5f0)}
@media (max-width:900px){
  .reviere-pin{padding:72px 0}
  .reviere-in{grid-template-columns:1fr;gap:34px}
}

/* Bühne aktiv (nur mit fx): gepinnt, Karten fliegen durch den Raum */
html.fx .reviere{height:420vh}
html.fx .reviere-pin{position:sticky;top:var(--navh,68px);height:calc(100vh - var(--navh,68px));height:calc(100svh - var(--navh,68px));padding:0;display:flex;align-items:center;overflow:hidden}
html.fx .reviere-pin::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 68% 50%,rgba(227,109,39,.17),transparent 70%);pointer-events:none}
html.fx .reviere-in{width:100%;position:relative}
html.fx .reviere-scene{display:block;position:relative;height:min(74vh,620px);perspective:1400px;perspective-origin:50% 45%}
html.fx .rcard{position:absolute;left:50%;top:50%;width:300px;height:auto;aspect-ratio:var(--ar,.75);margin:calc(-150px / var(--ar,.75)) 0 0 -150px;opacity:0;border-radius:10px;transform-style:preserve-3d;will-change:transform,opacity;box-shadow:0 0 0 1px rgba(247,245,240,.1),0 40px 80px rgba(0,0,0,.55)}
html.fx .reviere-steps{gap:4px}
html.fx .reviere-steps li{padding:0;border-left:0}
html.fx .reviere-steps button{display:block;width:100%;text-align:left;background:none;border:0;border-left:2px solid var(--line-light,rgba(247,245,240,.16));padding:13px 0 13px 22px;font:inherit;color:rgba(247,245,240,.55);cursor:pointer;transition:color .4s,border-color .4s}
html.fx .reviere-steps button:hover{color:rgba(247,245,240,.85)}
html.fx .reviere-steps button:focus-visible{outline:2px solid var(--teal-bright,#e36d27);outline-offset:2px}
html.fx .reviere-steps b{color:inherit;transition:color .4s}
html.fx .reviere-steps li.on button{border-color:var(--teal-bright,#e36d27);color:rgba(247,245,240,.8)}
html.fx .reviere-steps li.on b{color:var(--foam,#f7f5f0)}
html.fx .reviere-steps em{display:none}
html.fx .reviere-caption{display:block;margin:22px 0 0;max-width:40ch;min-height:3.2em;font-size:.95rem;line-height:1.55;color:rgba(247,245,240,.72)}
@media (max-width:900px){
  html.fx .reviere{height:380vh}
  html.fx .reviere-in{grid-template-columns:1fr;gap:0;align-content:center}
  html.fx .reviere h2{font-size:2rem;margin-top:8px}
  html.fx .reviere-steps{margin-top:14px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
  html.fx .reviere-steps button{border-left:0;border-top:2px solid var(--line-light,rgba(247,245,240,.16));padding:8px 0 0}
  html.fx .reviere-steps li.on button{border-top-color:var(--teal-bright,#e36d27)}
  html.fx .reviere-steps b{font-size:1rem}
  html.fx .reviere-steps span{display:none}
  html.fx .reviere-caption{margin-top:12px;font-size:.88rem;min-height:4.2em}
  html.fx .reviere-cta{display:none}
  html.fx .reviere-scene{height:40vh;margin-top:6px;transform:scale(.72);transform-origin:50% 30%}
}
@media (max-width:900px) and (max-height:700px){
  html.fx .reviere-caption{display:none}
  html.fx .reviere-scene{height:36vh;transform:scale(.62)}
}
@media (min-width:901px) and (max-height:760px){
  html.fx .reviere-caption{display:none}
  html.fx .reviere-steps{margin-top:20px}
  html.fx .reviere-cta{margin-top:18px}
}