/* Scroll-Szenen. Gilt nur mit html.fx (Kopf-Skript setzt es, wenn Bewegung erlaubt ist oder per ?fx=on / Schalter im Fuß).
   Ohne fx ist jede Szene ein normales Stück Dokument (style.css). Alles weich und langsam, Text bleibt sofort lesbar. */

/* Einblenden, JS setzt .in. Absicherung im JS: was im Bild ist, wird sofort gezeigt. */
html.fx .rv{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease) calc(var(--d,0) * .1s),transform .9s var(--ease) calc(var(--d,0) * .1s)}
html.fx .rv.in{opacity:1;transform:none}

/* Goldener Strich unter "die Sie kennen." zeichnet sich nach dem Laden */
html.fx .sw-line path{stroke-dashoffset:1;animation:gn-draw 1.2s .45s var(--ease) forwards}
@keyframes gn-draw{to{stroke-dashoffset:0}}

/* 1. Hero: das Video öffnet sich beim Scrollen aus dem goldenen Ring zur ganzen Fläche */
html.fx .hero{height:210svh;padding:0}
html.fx .hero-stick{position:sticky;top:0;height:100svh;max-width:none;padding:0;display:block}
html.fx .hero-text{position:absolute;z-index:3;left:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));top:calc(var(--head) + 6svh);width:min(44rem,calc(100vw - 2 * var(--gut)));opacity:calc(1 - var(--e,0) * 2.4);transform:translateY(calc(var(--e,0) * -5svh))}
html.fx .hero.past .hero-text{visibility:hidden}
html.fx .hero-frame{position:absolute;inset:0;width:100%;height:100%;justify-self:stretch;max-width:none;overflow:visible;aspect-ratio:auto;border-radius:0;clip-path:var(--clip,circle(0px at 50% 50%));will-change:clip-path}
html.fx .hero-frame::after{display:none}
html.fx .hero-media{inset:auto;left:50%;top:50%;width:max(100%,177.78svh);height:max(100%,56.25vw);transform:var(--mt,translate(-50%,-50%));will-change:transform}
html.fx .hero-ring{display:block;position:absolute;z-index:2;left:calc(var(--cx,50vw) - var(--d,0px) / 2 - 18px);top:calc(var(--cy,50svh) - var(--d,0px) / 2 - 18px);width:calc(var(--d,0px) + 36px);height:calc(var(--d,0px) + 36px);border-radius:50%;border:6px solid var(--gold);opacity:calc(1 - var(--e,0) * 3.2);transform:scale(calc(1 + var(--e,0) * .5));pointer-events:none}
html.fx .hero-cap{display:flex;position:absolute;z-index:3;left:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));bottom:max(26px,5svh);gap:12px;align-items:center;max-width:min(36rem,calc(100vw - 2 * var(--gut) - 64px));padding:14px 20px;background:var(--gold);color:var(--ink);font:700 clamp(1.05rem,1.6vw,1.3rem)/1.35 var(--disp);opacity:clamp(0,calc((var(--e,0) - .8) * 5),1);transform:translateY(calc((1 - clamp(0,calc((var(--e,0) - .8) * 5),1)) * 18px))}
html.fx .hero-cap .i{width:1.5em;height:1.5em}
html.fx .hero .vid-toggle{right:auto;bottom:auto;left:calc(var(--cx,50vw) + var(--d,0px) * .33);top:calc(var(--cy,50svh) + var(--d,0px) * .33);transition:left .5s var(--ease),top .5s var(--ease)}
html.fx .hero.past .vid-toggle{left:calc(100vw - var(--gut) - 48px);top:calc(100svh - max(26px,5svh) - 48px)}
@media (max-width:899px){
  html.fx .hero-text{top:calc(var(--head) + 3.5svh)}
  html.fx .hero-text .lead,html.fx .hero-more{display:none}
  html.fx .rating{margin:1.1em 0 1em}
}
@media (max-width:899px) and (max-height:700px){html.fx h1{font-size:2.15rem}html.fx .kick{margin-bottom:.5em}}

/* 2. Tag und Nacht: Hintergrund wird vom hellen Tag zur Nacht, das Zifferblatt läuft einmal rund, Stellen im Zitat werden unterstrichen */
html.fx .night{height:250svh;padding:0;background:var(--sky);color:var(--ink);--soft:#3E4C59;--ringbg:var(--sky);transition:background-color .9s ease,color .9s ease}
html.fx .night.is-night{background:var(--ink);color:#fff;--soft:#C9D6E2;--ringbg:var(--ink)}
html.fx .night-stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-top:var(--head);overflow:hidden}
html.fx .dial-hand i{box-shadow:0 0 0 5px var(--ringbg);transition:box-shadow .9s ease}
html.fx .dial-label>span{transition:opacity .5s ease}
html.fx .l-both{opacity:0}
html.fx .l-day{opacity:1}
html.fx .is-night .l-day{opacity:0}
html.fx .is-night .l-night{opacity:1}
html.fx .dial-moon{opacity:.35;transition:opacity .6s}
html.fx .is-night .dial-moon{opacity:1}
html.fx .is-night .dial-sun{opacity:.35}
html.fx .dial-sun{transition:opacity .6s;color:var(--gold-edge)}
html.fx .is-night .dial-sun{color:var(--gold)}
html.fx .night .bigquote figcaption{transition:color .9s ease}
@media (max-width:899px){
  html.fx .night-grid{display:block}
  html.fx .dial{width:min(44vw,180px);margin:0 auto 16px}
  html.fx .night-txt h2{font-size:clamp(1.8rem,7vw,2.4rem);margin-bottom:.4em}
}
@media (max-width:899px) and (max-height:720px){html.fx .dial{width:min(38vw,148px);margin-bottom:10px}html.fx .night-txt h2{margin-bottom:.25em}html.fx .bigquote blockquote{font-size:1.04rem;margin-top:.4em}}
@media (max-width:899px) and (max-height:620px){html.fx .dial{width:118px}html.fx .night-txt h2{font-size:1.65rem}}

/* 3. Leistungen: Bühne bleibt stehen, je Leistung wechseln Farbe, Bild (öffnet sich als Kreis) und Text */
html.fx .svc{height:400svh}
html.fx .svc-stick{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--stage,var(--blue));color:var(--stagefg,#fff);transition:background-color .7s ease,color .7s ease}
html.fx .svc-head{position:absolute;z-index:3;top:calc(var(--head) + 3svh);left:0;right:0;background:none;color:inherit;padding-top:0}
html.fx .svc-head .eyebrow{margin-bottom:.4em}
html.fx .svc-head h2{font-size:clamp(1.6rem,3.2vw,2.8rem);max-width:none}
html.fx .svc-panel{position:absolute;inset:0;background:none;color:inherit;padding:0}
html.fx .svc-in{height:100%;padding-top:calc(var(--head) + 3svh + var(--hh,130px));padding-bottom:calc(6svh + 48px);align-items:center;align-content:center}
html.fx .svc-figwrap{width:min(38vw,54svh);order:2}
html.fx .svc-figwrap::before{opacity:0;transition:opacity .5s}
html.fx .svc-panel.on .svc-figwrap::before{opacity:1}
html.fx .svc-fig{clip-path:circle(0% at 50% 50%);transition:clip-path 1s cubic-bezier(.65,0,.25,1)}
html.fx .svc-panel.on .svc-fig,html.fx .svc-panel.past .svc-fig{clip-path:circle(50% at 50% 50%)}
html.fx .svc-copy{opacity:0;transform:translateY(28px);visibility:hidden;transition:opacity .45s ease,transform .6s var(--ease),visibility 0s .6s}
html.fx .svc-panel.on .svc-copy{opacity:1;transform:none;visibility:visible;transition:opacity .6s ease .2s,transform .8s var(--ease) .2s,visibility 0s}
html.fx .svc-index{display:flex;position:absolute;z-index:3;left:0;right:0;bottom:calc(3svh + 8px);gap:clamp(10px,2vw,28px)}
html.fx .svc-index li{flex:1;display:grid;gap:8px;font:700 .98rem/1.2 var(--body)}
html.fx .svc-index span{opacity:.62;transition:opacity .4s}
html.fx .svc-index i{display:block;height:4px;background:currentColor;opacity:.25;transition:opacity .4s}
html.fx .svc-index li.on span,html.fx .svc-index li.on i{opacity:1}
@media (max-width:899px){
  html.fx .svc-in{gap:22px;justify-items:start;align-content:start;padding-top:calc(var(--head) + 3svh + var(--hh,130px) + 30px);padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  html.fx .svc-figwrap{order:0;width:min(56vw,27svh);justify-self:center;margin:0}
  html.fx .svc-copy h3{font-size:clamp(1.6rem,6.6vw,2.2rem)}
  html.fx .svc-copy p{font-size:1.1rem;margin-top:.5em}
  html.fx .svc-tag{margin-bottom:.6em}
  html.fx .svc-ic{width:44px;height:44px}
  html.fx .more{margin-top:.6em}
  html.fx .svc-index{top:calc(var(--head) + 3svh + var(--hh,130px) + 6px);bottom:auto}
  html.fx .svc-index span{display:none}
}
@media (max-width:899px) and (max-height:720px){html.fx .svc-figwrap{width:23svh}html.fx .svc-copy p{font-size:1rem}html.fx .svc-head h2{font-size:1.4rem}}

/* 4. Ablauf: die goldene Linie füllt sich beim Scrollen, erreichte Schritte werden golden */
html.fx .steps::after{transform-origin:top;transform:scaleY(var(--line,0))}
html.fx .dot{background:#fff;color:var(--blue);box-shadow:0 0 0 6px var(--sky),inset 0 0 0 3px var(--blue)}
html.fx .step.on .dot{background:var(--gold);color:var(--ink);box-shadow:0 0 0 6px var(--sky)}

/* 5. Herz und Zeit: die zwei Zeilen kommen von links und rechts zusammen, der Kreis wächst und dreht sich ein */
html.fx .claim .c1{transform:translate3d(calc((1 - var(--h,1)) * -9vw),0,0)}
html.fx .claim .c2{transform:translate3d(calc((1 - var(--h,1)) * 9vw),0,0)}
html.fx .claim-vid{transform:scale(calc(.7 + var(--h,1) * .3)) rotate(calc((1 - var(--h,1)) * -24deg))}
html.fx .claim span,html.fx .claim-vid,html.fx [data-par]{will-change:transform}
@media (min-width:900px){html.fx .hero-text{width:min(44rem,52vw)}}