/* Szenen: Die Startseite baut sich beim Scrollen auf. Gesteuert von szenen.js (setzt --p und data-step).
   Alles Bewegte steht unter html.js-scenes. Ohne JavaScript oder bei "Bewegung reduzieren" bleibt die normale Seite. */
:root{--spring:cubic-bezier(.34,1.56,.64,1)}

/* In der normalen Seite sind die Szenen-Zutaten unsichtbar */
.bg-fx,.scene-visual,.scene-dots{display:none}
html.js-scenes body{overflow-x:hidden;overflow-x:clip}
.scene-services .scene-sticky{display:block}
.scene-statement .scene-sticky{display:block}
.scene-process .scene-sticky{display:contents}

/* ---------- Hintergrund, der sich je Abschnitt wandelt ---------- */
html.js-scenes .bg-fx{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-fx i{position:absolute;left:0;top:0;width:78vmax;height:78vmax;margin:-39vmax 0 0 -39vmax;border-radius:50%;background:radial-gradient(circle,var(--c,transparent) 0,transparent 62%);opacity:var(--o,0);translate:var(--x,50vw) var(--y,50vh)}

/* ---------- Hero: Text und Bildschirm scrollen weg, der Hintergrund wandelt sich dahinter ---------- */
html.js-scenes .hero .hero-inner{translate:0 calc(var(--p,0) * -70px);opacity:calc(1 - var(--p,0) * 1.5)}
html.js-scenes .hero .screen{translate:calc(var(--p,0) * -50px) calc(var(--p,0) * -100px);scale:calc(1 + var(--p,0) * .12);opacity:calc(1 - var(--p,0) * .9)}
html.js-scenes .hero .orb-one{translate:0 calc(var(--p,0) * -120px)}
html.js-scenes .hero .orb-two{translate:calc(var(--p,0) * 80px) calc(var(--p,0) * -70px)}

@media (min-height:561px){

/* ---------- Szene Leistungen: erst der Titel, dann Websites, SEO und GEO nacheinander ---------- */
html.js-scenes .scene-services{height:380vh;padding:0;--v1:var(--s1,0);--v2:var(--s2,0);--v3:var(--s3,0)}
html.js-scenes .scene-services .scene-sticky{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;padding:84px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);align-items:center;column-gap:56px;opacity:clamp(0,calc((1 - var(--p,0)) * 14),1)}

/* Schritt 0: der Titel, die Wörter poppen nacheinander auf */
html.js-scenes .scene-services .services-head{grid-column:1 / -1;grid-row:1;transition:opacity .45s ease,translate .7s var(--spring)}
html.js-scenes .scene-services .services-intro{display:block;margin:26px 0 0}
html.js-scenes .scene-services .services-intro h2{font-size:clamp(44px,7vw,104px)}
html.js-scenes .scene-services .services-intro h2 .w{display:inline-block;--k:clamp(0,calc((var(--s0,0) * 1.4 + .12) * var(--n,10) - var(--i)),1);opacity:var(--k);translate:0 calc((1 - var(--k)) * .5em)}
html.js-scenes .scene-services .services-intro p{width:auto;max-width:470px;margin:34px 0 0;font-size:17px;line-height:1.65;opacity:clamp(0,calc((var(--s0,0) - .45) * 5),1);translate:0 calc((1 - clamp(0,calc((var(--s0,0) - .45) * 5),1)) * 18px)}
html.js-scenes .scene-services:not([data-step="0"]) .services-head{opacity:0;translate:0 -36px;pointer-events:none}

/* Schritte 1 bis 3: eine Leistung nach der anderen, ohne den Titel */
html.js-scenes .scene-services .service-grid{grid-column:1;grid-row:1;display:block;position:relative;align-self:stretch;margin:0}
html.js-scenes .scene-services .service{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;width:100%;min-height:0;padding:0;border:0;border-radius:0;background:none;overflow:visible;opacity:0;translate:0 28px;scale:.97;pointer-events:none;transition:opacity .45s ease,translate .8s var(--spring),scale .8s var(--spring)}
html.js-scenes .scene-services .service:hover{transform:none;box-shadow:none;border:0}
html.js-scenes .scene-services .service-icon{display:none}
html.js-scenes .scene-services .service h3{margin:16px 0 0;font-size:clamp(48px,6vw,88px)}
html.js-scenes .scene-services .service p{width:auto;max-width:440px;margin:24px 0 30px;font-size:16px;line-height:1.65}
html.js-scenes .scene-services .service a{position:static;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;border:1px solid #464b4b;border-radius:30px;padding:11px 17px;font:600 12px Manrope,Arial,sans-serif;transition:border-color .3s}
html.js-scenes .scene-services .service a:hover,html.js-scenes .scene-services .service a:focus-visible{border-color:var(--mint);outline:0}
html.js-scenes .scene-services .service a b{margin:0}
html.js-scenes .scene-services[data-step="1"] .service[data-ix="1"],
html.js-scenes .scene-services[data-step="2"] .service[data-ix="2"],
html.js-scenes .scene-services[data-step="3"] .service[data-ix="3"]{opacity:1;translate:0 0;scale:1;pointer-events:auto}

html.js-scenes .scene-services .scene-visual{display:block;grid-column:2;grid-row:1;position:relative;align-self:center;height:min(66vh,540px)}
.scene-visual .v{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
html.js-scenes .scene-services[data-step="1"] .v-websites,
html.js-scenes .scene-services[data-step="2"] .v-seo,
html.js-scenes .scene-services[data-step="3"] .v-geo{opacity:1}

html.js-scenes .scene-services .scene-dots{display:flex;gap:8px;position:absolute;left:0;bottom:30px}
.scene-dots i{display:block;width:26px;height:3px;border-radius:3px;background:#ffffff26;transition:background .4s,width .4s var(--spring)}
.scene-services[data-step="0"] .scene-dots i:nth-child(1),
.scene-services[data-step="1"] .scene-dots i:nth-child(2),
.scene-services[data-step="2"] .scene-dots i:nth-child(3),
.scene-services[data-step="3"] .scene-dots i:nth-child(4){background:var(--mint);width:46px}

/* Visual 1: Fenster fächern sich auf (Größen in cqw = Prozent der Spaltenbreite, damit der Fächer immer hineinpasst) */
.v-websites{container-type:inline-size;--spread:.8}
.fan{position:absolute;left:50%;top:50%;width:0;height:0}
.fw{position:absolute;width:42cqw;aspect-ratio:16/10;left:-21cqw;top:-19cqw;border:1px solid #2b3232;border-radius:12px;background:#10151a;overflow:hidden;box-shadow:0 36px 60px -28px #000;transform-origin:50% 165%;translate:calc(var(--v1) * var(--dx) * var(--spread)) calc(var(--v1) * var(--dy));rotate:calc(var(--v1) * var(--rot))}
.fw-bar{display:flex;gap:4px;padding:2.4cqw 2.8cqw;background:#161d1d}
.fw-bar b{width:1.7cqw;height:1.7cqw;min-width:5px;min-height:5px;border-radius:50%;background:#ffffff30}
.fw-body{display:grid;grid-template-columns:1.2fr .8fr;gap:2.4cqw 3cqw;padding:3.4cqw}
.fw-body s{display:block;height:1.5cqw;min-height:4px;border-radius:3px;background:#ffffff22}
.fw-body s.h{height:3.6cqw;width:72%;background:var(--ac)}
.fw-body s.short{width:60%}
.fw-body u{grid-row:1 / 5;grid-column:2;border-radius:8px;background:linear-gradient(145deg,var(--ac),#0b1f1b);min-height:12cqw}

/* Visual 2: Balken wachsen, die Linie zeichnet sich */
.chart{position:absolute;left:3%;right:3%;top:9%;bottom:9%;display:flex;align-items:flex-end;gap:3.2%;padding:28px 26px 26px;border:1px solid var(--line);border-radius:12px;background:#0b0e0e;overflow:hidden}
.chart:before{content:"";position:absolute;inset:26px;background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#ffffff12 calc(25% - 1px),#ffffff12 25%)}
.chart .bar{position:relative;flex:1;height:100%;border-radius:5px 5px 0 0;background:linear-gradient(to top,#36e2a41f,#36e2a4);transform-origin:50% 100%;scale:1 calc(.05 + var(--v2) * var(--h));opacity:.9}
.chart svg{position:absolute;left:26px;right:26px;top:26px;bottom:26px;width:calc(100% - 52px);height:calc(100% - 52px);overflow:visible;clip-path:inset(-8px calc((1 - var(--v2)) * 100%) -8px -8px)}
.chart path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart .chip{position:absolute;right:22px;top:20px;padding:6px 11px;border:1px solid #36e2a455;border-radius:30px;background:#0b0e0ecc;color:var(--mint);font:10px 'DM Mono',monospace;letter-spacing:.8px;text-transform:uppercase;scale:calc(.7 + var(--v2) * .3);opacity:clamp(0,calc((var(--v2) - .55) * 4),1)}

/* Visual 3: Wellen, Umlaufbahn und Punkte */
.radar{position:absolute;left:50%;top:50%;width:min(100%,480px);aspect-ratio:1;translate:-50% -50%;overflow:hidden}
.radar .r{position:absolute;inset:0;border:1px solid #36e2a444;border-radius:50%;scale:calc(.25 + var(--v3) * var(--k));opacity:calc(var(--v3) * 1.2)}
.radar .r1{--k:.75}
.radar .r2{--k:.5;inset:0}
.radar .r3{--k:.28}
.radar .orbit{position:absolute;inset:6%;border:1px dashed #36e2a455;border-radius:50%;rotate:calc(var(--v3) * 200deg)}
.radar .orbit b{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--mint);box-shadow:0 0 14px var(--mint)}
.radar .globe{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;margin:-13% 0 0 -13%;border:2px solid var(--mint);border-radius:50%;scale:calc(.5 + var(--v3) * .5)}
.radar .globe:before,.radar .globe:after{content:"";position:absolute}
.radar .globe:before{inset:22% -2px;border-block:1px solid var(--mint)}
.radar .globe:after{inset:-2px 32%;border-inline:1px solid var(--mint);border-radius:50%}
.radar .pin{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #ffffff14;scale:clamp(0,calc((var(--v3) - var(--t)) * 6),1)}
.radar .pin1{left:18%;top:30%;--t:.3}
.radar .pin2{left:78%;top:24%;--t:.5}
.radar .pin3{left:70%;top:76%;--t:.7}
.radar .pin4{left:24%;top:72%;--t:.85}

/* ---------- Szene Anspruch: Text erscheint in der Mitte, Wort für Wort ---------- */
html.js-scenes .scene-statement{height:240vh;padding:0;background:transparent;color:#edeeee;overflow:visible}
html.js-scenes .scene-statement:after{display:none}
html.js-scenes .scene-statement .scene-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
html.js-scenes .scene-statement .scene-sticky:after{content:"K";position:absolute;right:-40px;top:50%;translate:0 -50%;font-size:min(78vh,640px);line-height:1;font-weight:800;color:#cdd0cf;opacity:calc(var(--p,0) * 0.9);pointer-events:none}
html.js-scenes .scene-statement .container{position:relative;z-index:1;opacity:clamp(0,calc((1 - var(--p,0)) * 14),1)}
html.js-scenes .scene-statement .section-label{color:#a7adad;transition:color .35s}
html.js-scenes .scene-statement h2 em{color:#aab0af;transition:color .35s}
html.js-scenes[data-tone="light"] .scene-statement{color:#111515}
html.js-scenes[data-tone="light"] .scene-statement .section-label{color:#5a6261}
html.js-scenes[data-tone="light"] .scene-statement h2 em{color:#59615f}
html.js-scenes .scene-statement .w{opacity:calc(.14 + .86 * clamp(0,calc((var(--p,0) * 1.25 - .06) * var(--n,10) - var(--i)),1))}
html.js-scenes .scene-statement .statement-copy{opacity:clamp(0,calc((var(--p,0) - .62) * 6),1);translate:0 calc((1 - clamp(0,calc((var(--p,0) - .62) * 6),1)) * 24px)}

/* ---------- Szene Prozess: Schritte poppen nacheinander auf ---------- */
html.js-scenes .scene-process{display:block;height:300vh;padding:0}
html.js-scenes .scene-process .scene-sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:1fr 1.35fr;gap:80px;align-items:center}
html.js-scenes .scene-process li{opacity:0;translate:0 34px;scale:.94;transition:opacity .45s ease,translate .8s var(--spring),scale .8s var(--spring),border-color .4s}
html.js-scenes .scene-process[data-step="0"] li:nth-child(-n+1),
html.js-scenes .scene-process[data-step="1"] li:nth-child(-n+2),
html.js-scenes .scene-process[data-step="2"] li{opacity:1;translate:0 0;scale:1}
html.js-scenes .scene-process[data-step="0"] li:nth-child(1),
html.js-scenes .scene-process[data-step="1"] li:nth-child(2),
html.js-scenes .scene-process[data-step="2"] li:nth-child(3){border-top-color:var(--mint)}
html.js-scenes .scene-process .scene-sticky{opacity:clamp(0,calc((1 - var(--p,0)) * 14),1)}

/* ---------- Pakete: Karten fächern sich aus dem Stapel auf ---------- */
html.js-scenes .offers .offer-grid{perspective:1400px}
html.js-scenes .offers .offer-card{translate:calc((1 - var(--p,1)) * var(--fx,0%)) calc((1 - var(--p,1)) * 36px);rotate:calc((1 - var(--p,1)) * var(--fr,0deg));scale:calc(.9 + var(--p,1) * .1);opacity:calc(.25 + var(--p,1) * .75)}
html.js-scenes .offers .offer-card:nth-child(1){--fx:106%;--fr:5deg}
html.js-scenes .offers .offer-card:nth-child(3){--fx:-106%;--fr:-5deg}
html.js-scenes .offers .offer-card:nth-child(2){position:relative;z-index:2;opacity:1}

/* ---------- Demo-Fenster: kippt beim Hereinscrollen gerade ---------- */
html.js-scenes .demo .window{transform:perspective(1500px) rotateX(calc((1 - var(--p,1)) * 12deg)) scale(calc(.94 + var(--p,1) * .06))}
html.js-scenes .demo .window.is-expanded{transform:none}

}

/* ---------- Handy und kleine Bildschirme ---------- */
@media (max-width:820px) and (min-height:561px){
  html.js-scenes .scene-services{height:340vh}
  html.js-scenes .scene-services .scene-sticky{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;align-items:start;padding:76px 0 40px;column-gap:0;row-gap:6px}
  html.js-scenes .scene-services .scene-visual{grid-column:1;grid-row:1;height:min(33vh,290px);align-self:start}
  html.js-scenes .v-websites{--spread:.62}
  html.js-scenes .scene-services .service-grid{grid-column:1;grid-row:2;height:300px;align-self:start}
  html.js-scenes .scene-services .services-head{grid-row:1 / span 2;align-self:center}
  html.js-scenes .scene-services .services-intro{margin-top:20px}
  html.js-scenes .scene-services .services-intro h2{font-size:clamp(32px,9.4vw,48px)}
  html.js-scenes .scene-services .services-intro p{font-size:15px;margin-top:24px}
  html.js-scenes .scene-services .service h3{font-size:clamp(36px,11vw,52px);margin:10px 0 0}
  html.js-scenes .scene-services .service p{font-size:14.5px;margin:16px 0 20px}
  html.js-scenes .scene-services .scene-dots{display:none}
  html.js-scenes .scene-statement{height:210vh}
  html.js-scenes .scene-process{height:270vh}
  html.js-scenes .scene-process .scene-sticky{grid-template-columns:1fr;gap:26px;align-content:center}
  html.js-scenes .offers .offer-card:nth-child(1),html.js-scenes .offers .offer-card:nth-child(3){--fx:0%;--fr:0deg}
}

/* Sehr niedrige Fenster (z. B. Handy quer): lieber die ruhige, normale Seite */
@media (max-height:560px){
  html.js-scenes .bg-fx{display:none}
}