/* ======================================================================
   Home Variante 2: fünf Kapitel, scrollgesteuerte Szenen
   baut auf css/site.css auf (Tokens, Nav, Buttons, Footer)
   ====================================================================== */
.v2{--sq:38%} /* Squircle-Radius: die Logo-Form als Signatur */
.v2 .nav{mix-blend-mode:normal}
.v2main{overflow:clip}

/* Kapitel-Kicker: Typografie der Seite statt Pille */
.chapter__kicker{font-family:var(--font-head);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.chapter__kicker span{color:var(--pink)}
.chapter__kicker--light{color:rgba(255,255,255,.7)}
.chapter__kicker--light span{color:#fff}
.chapter{padding:clamp(88px,11vw,150px) 0}
.chapter--soft{background:var(--soft)}
.chapter h2{margin-bottom:18px}
.chapter__big{font-size:clamp(2.6rem,7vw,6rem);letter-spacing:-.035em;line-height:.98;margin-bottom:26px}
.chapter__lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:60ch;color:rgba(255,255,255,.85)}
.actions--tight{margin-top:18px}
.actions--left{justify-content:flex-start}

/* ---------- Szenen: hoher Container, klebende Bühne ---------- */
.scene{position:relative;height:calc(var(--len,300) * 1vh)}
.scene__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene__hint{position:relative;width:22px;height:36px;margin:26px auto 0;border:2px solid var(--line);border-radius:12px;opacity:.8} /* direkt unter der Copy, damit er am Laptop nicht in die Skills ragt */
.scene__hint span{position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--pink);animation:hint 1.6s ease-in-out infinite}
@keyframes hint{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(12px);opacity:0}}

/* ---------- Signatur: Ring als Cursor ---------- */
.ring-cursor{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;pointer-events:none;z-index:60;color:var(--pink);opacity:0;transition:opacity .3s,transform .35s var(--ease);will-change:transform}
.ring-cursor svg{width:100%;height:100%;fill:currentColor;animation:spin 14s linear infinite}
.ring-cursor.is-on{opacity:.85}
.ring-cursor.is-big{transform:scale(2.2);opacity:.35}
@media (hover:none){.ring-cursor{display:none}}

/* ======================================================================
   Kapitel 1: Hero
   ====================================================================== */
.scene--hero .scene__stage{display:flex;align-items:center;justify-content:center;background:#fff}
/* Logo-Ring: zeichnet sich nach dem Laden selbst, dreht sich, ein Lichtsegment kreist;
   beim Scrollen rastet je Expert:in ein Segment ein */
.hero2__glow{position:absolute;left:50%;top:50%;width:min(120vh,140vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(253,56,112,.10),rgba(253,56,112,.04) 40%,transparent 68%);animation:glow-in 6s var(--ease) forwards,glow-breathe 9s ease-in-out 6s infinite;pointer-events:none}
@keyframes glow-in{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes glow-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.hero2__ring{position:absolute;left:50%;top:50%;width:min(84vh,94vw);aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(var(--rs,.6) * var(--rsm,1))) rotate(var(--rr,0deg));opacity:var(--rop,1);pointer-events:none;transition:transform .6s var(--ease)}
.hero2__ring svg{width:100%;height:100%;overflow:visible;animation:sway 90s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
/* Wackeln in eigenem Tempo je Ring (--k), Konturen zeichnen sich nacheinander */
.wob{transform-origin:25.5px 25px;animation:wobble 16s ease-in-out 2.4s infinite}
.wob.k1{animation-duration:19s;animation-direction:reverse}
.wob.k2{animation-duration:23s}
@keyframes wobble{0%,100%{transform:translate(var(--wx,0px),var(--wy,0px)) rotate(-3deg) scale(1)}50%{transform:translate(var(--wx,0px),var(--wy,0px)) rotate(3deg) scale(1.03)}}
.draw{stroke-dasharray:1 1;stroke-dashoffset:1;animation:draw 2.4s var(--ease) forwards}
.lr.draw.k0{animation:draw 2.2s var(--ease) .2s forwards,wobble 16s ease-in-out 2.4s infinite}
.lr.draw.k1{animation:draw 2.2s var(--ease) .9s forwards,wobble 19s ease-in-out 2.4s infinite reverse}
.track__base.draw{animation-delay:1.6s}
@keyframes draw{to{stroke-dashoffset:0}}
.lr{fill:none;stroke:#ffd3df;stroke-width:.55;stroke-linejoin:round}
/* Dicke Spur auf der Außenkontur: Basis, kreisendes Licht, sechs Segmente */
.track{fill:none;stroke-linejoin:round}
.track__base{stroke:var(--pink-soft);stroke-width:7}
.track__runner{stroke:#ffc7d7;stroke-width:7;stroke-dasharray:.7 6;stroke-linecap:round;opacity:0;animation:runner-in .8s 4s forwards,orbit 7s linear 4s infinite;transition:opacity .5s}
@keyframes runner-in{to{opacity:1}}
@keyframes orbit{from{stroke-dashoffset:0}to{stroke-dashoffset:-6}}
.hero2__ring.is-team .track__runner{animation-play-state:paused;opacity:0}
.track__segs path{fill:none;stroke:#ffc7d7;stroke-width:7;stroke-linejoin:round;stroke-dasharray:var(--s,0) 6;stroke-dashoffset:calc(-1 * var(--i));transition:stroke-dasharray .7s var(--ease),stroke .4s}
.hero2__ring.is-full .track__segs path{stroke:#ffb0c7}
.hero2__ring.is-full{}

.hero2__center{position:relative;text-align:center;z-index:2;transform:translateY(calc(-1px * var(--hu,0))) scale(var(--hs,1));opacity:var(--ho,1)}
.hero2__title{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero2__pre{font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.hero2__big{display:block;font-size:clamp(3.2rem,9.4vw,8rem);line-height:.92;letter-spacing:-.04em}
.rotor{display:inline-block;position:relative;color:var(--pink);vertical-align:baseline;line-height:inherit;transition:width .5s var(--ease);text-align:left;white-space:nowrap}
.rotor > span.rotor__sizer{position:static;visibility:hidden;opacity:1;transform:none;transition:none} /* haelt Hoehe und Grundlinie im Textfluss */
.rotor > span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(.5em);transition:opacity .45s,transform .6s var(--ease)}
.rotor > span.is-on{opacity:1;transform:none}
.rotor > span.is-out{opacity:0;transform:translateY(-.5em)}
.hero2__sub{color:var(--muted);margin-top:22px;font-size:1.1rem;max-width:44ch;margin-inline:auto}
.pkg__skills{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:10px;max-width:520px;margin-inline:auto}
.pkg__skills span{font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:0;text-transform:none;padding:2px 7px;line-height:1.4;border-radius:999px;border:1.5px dashed var(--line);color:#c9c9d2;transition:background .35s,color .35s,border-color .35s,transform .45s var(--ease)}
.pkg__skills span.is-on{background:var(--pink-soft);border-color:var(--pink-soft);border-style:solid;color:var(--pink);transform:none}
/* Flug aus dem Foto in die Reihe: Position per JS gesetzt, Landung mit kleinem Überschwingen */
.pkg__skills span{transition:transform .55s cubic-bezier(.2,1.4,.4,1),opacity .35s,background .35s,color .35s,border-color .35s}
.pkg__skills span.is-flying{background:var(--pink);border-color:var(--pink);color:#fff;z-index:5;position:relative;box-shadow:0 8px 18px rgba(253,56,112,.35);transition:none}
.hero2__trails{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible} /* unter Fotos, Text und Skill-Reihe */
.hero2__trails path{fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;opacity:.65}
.pkg__skills span.is-flying{will-change:transform,offset-distance}
.pkg__count b.is-tick{transform:scale(1.25)}
.pkg__count b{display:inline-block;transition:transform .2s var(--ease)}
.hero2__team{position:absolute;inset:0;pointer-events:none;z-index:2}
.member{position:absolute;left:50%;top:50%;margin:0;width:clamp(96px,13vw,168px);--p:0;
  --fx:1;--fy:.78;--px:var(--x);--py:var(--y);
  --g:0;--gx:0;--gy:0; /* --g 0..1: Kreisposition -> Reihe (Kapitel 2) */
  transform:translate(calc(-50% + (var(--px) * (1 - var(--g)) + var(--gx) * var(--g)) * var(--fx) * 1vw * var(--p) + var(--sx) * 60vw * (1 - var(--p))),calc(-50% + (var(--py) * (1 - var(--g)) + var(--gy) * var(--g)) * var(--fy) * 1vh * var(--p) + var(--sy) * 60vh * (1 - var(--p)))) rotate(calc(var(--r) * 1deg * var(--p) * (1 - var(--g)))) scale(calc((.6 + .4 * var(--p)) * var(--ms,1)));
  opacity:calc(var(--p) * var(--op,1));will-change:transform,opacity}
.member img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--sq);box-shadow:0 18px 40px rgba(24,67,65,.18);border:4px solid #fff}
.member figcaption{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;text-align:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.78rem;line-height:1.2;box-shadow:0 8px 20px rgba(11,11,15,.08);opacity:var(--lp,0);transition:opacity .3s}
.member figcaption b{display:block;font-family:var(--font-head);font-weight:800;color:var(--ink)}
.member figcaption span{color:var(--muted)}
.hero2__done{position:absolute;left:50%;bottom:5vh;transform:translate(-50%,calc(20px * (1 - var(--dp,0)) - var(--ry,0) * 1px));opacity:var(--dp,0);text-align:center;z-index:3;width:min(92vw,760px);padding:18px 22px 22px;border-radius:24px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 40px rgba(24,67,65,.10)}
.pkg{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap;white-space:nowrap;font-family:var(--font-head);font-weight:700;color:var(--ink)}
.pkg__count b{font-size:1.5rem;font-weight:800;color:var(--pink);font-variant-numeric:tabular-nums}
.pkg__bar{display:block;width:90px;height:8px;border-radius:4px;background:var(--pink-soft);overflow:hidden;flex:none}
.pkg__bar i{display:block;height:100%;width:0;background:var(--pink);border-radius:4px;transition:width .4s var(--ease)}
.pkg__name{padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;transition:transform .35s var(--ease),background .3s}
.pkg__name.is-bump{transform:scale(1.15)}
.pkg__price{font-size:.95rem;color:var(--muted);margin-right:auto}
.pkg__price b{font-size:1.5rem;font-weight:800;color:var(--ink)}
.pkg__count{font-size:1rem}
.pkg__count b{font-size:1.9rem}
.pkg__hint{margin-top:8px;color:var(--muted);font-size:.9rem}
.hero2__cta{opacity:var(--cp,0);transform:translateY(calc(8px * (1 - var(--cp,0))));max-height:calc(var(--cp,0) * 140px);overflow:hidden;margin-top:calc(var(--cp,0) * 14px)}
@media (max-width:640px){
  .hero2__pre{font-size:1rem}
  .hero2__big{font-size:clamp(2.6rem,13vw,3.4rem)}
  .hero2__sub{font-size:.95rem;margin-top:14px}
  .pkg__skills{gap:3px;margin-top:8px}
  .pkg__skills span{font-size:.56rem;padding:1px 6px}
  .pkg__hint{display:none}
  .hero2__center{transform:translateY(calc(-14vh - 1px * var(--hu,0))) scale(var(--hs,1))}
  .pkg{flex-wrap:wrap;white-space:normal}
  .pkg__price{margin-left:0}
  /* Mobil: Gesichter reihen sich unter dem Text auf statt im Kreis */
  .member{width:62px;--fx:1;--fy:1;--px:var(--mx);--py:var(--my);--my:16}
  .member:nth-child(1){--mx:-30}.member:nth-child(2){--mx:-18}.member:nth-child(3){--mx:-6}
  .member:nth-child(4){--mx:6}.member:nth-child(5){--mx:18}.member:nth-child(6){--mx:30}
  .member img{border-width:3px}
  .member figcaption{display:none}
  .hero2__done{bottom:2vh;padding:12px 14px 14px}
  .hero2__cta .btn{padding:11px 18px;font-size:.92rem}
  .hero2__cta{gap:8px}
  .hero2__cta .btn--ghost{display:none}
  .pkg{gap:10px}
  .pkg__bar{width:80px}
  .pkg__count b{font-size:1.3rem}
  .pkg__price b{font-size:1.2rem}
}

/* ======================================================================
   Kapitel 2: Pink als Raum
   ====================================================================== */
.chapter--pink{background:var(--pink);color:#fff}
.chapter--pink .chapter__big{color:#fff}
.people{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:clamp(40px,6vw,72px)}
.person{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#000}
.person img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease),transform 1.2s var(--ease);opacity:.92}
.person:hover img,.person.is-on img{filter:none;transform:scale(1.06)}
.person__meta{position:absolute;inset:auto 0 0 0;padding:28px 18px 18px;background:linear-gradient(to top,rgba(11,11,15,.85),transparent);color:#fff;transform:translateY(46%);transition:transform .5s var(--ease)}
.person:hover .person__meta,.person.is-on .person__meta{transform:none}
.person__meta b{display:block;font-family:var(--font-head);font-weight:800;font-size:1.2rem}
.person__meta span{display:block;font-size:.85rem;opacity:.85}
.person__meta em{display:block;font-style:normal;font-size:.9rem;margin-top:10px;opacity:0;transition:opacity .4s .1s}
.person:hover em,.person.is-on em{opacity:1}
.chapter__foot{margin-top:28px;color:rgba(255,255,255,.8)}
.chapter__foot a{color:#fff;font-weight:600;border-bottom:2px solid rgba(255,255,255,.5)}
@media (max-width:900px){.people{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.people{grid-template-columns:repeat(2,1fr)}}

/* ======================================================================
   Kapitel 3: Zahlen
   ====================================================================== */
.scene--numbers .scene__stage{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}
.numbers__bg{position:absolute;inset:-10% -5%;display:flex;gap:2vw;transform:rotate(-6deg);opacity:.28}
.numbers__bg .hero__col{flex:1;display:flex;flex-direction:column;gap:2vw;transform:translateY(calc(var(--np,0) * -30%))}
.numbers__bg .hero__col:nth-child(even){transform:translateY(calc(-30% + var(--np,0) * 30%))}
.numbers__bg img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;filter:grayscale(.4)}
.numbers__veil{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(11,11,15,.2),rgba(11,11,15,.9))}
.numbers__kicker{position:absolute;top:calc(var(--nav-h) + 24px);left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6)}
.numbers__stack{position:relative;text-align:center;width:100%}
.num{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) scale(calc(.7 + .3 * var(--v,0)));opacity:var(--v,0)}
.num b{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(5rem,20vw,17rem);line-height:.9;letter-spacing:-.05em;color:#fff}
.num > span{display:block;margin-top:14px;color:rgba(255,255,255,.75);font-size:clamp(1rem,1.6vw,1.25rem);max-width:40ch;margin-inline:auto;padding:0 24px}

/* ======================================================================
   KI-Dialog
   ====================================================================== */
.dialog{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:900px){.dialog{grid-template-columns:1fr}}
.dialog__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.dialog__links a{font-family:var(--font-head);font-weight:700;padding:10px 16px;border:1.5px solid var(--line);border-radius:var(--r-btn);transition:border-color .25s,color .25s,transform .3s var(--ease)}
.dialog__links a:hover{border-color:var(--pink);color:var(--pink);transform:translateY(-2px)}
.chat{display:flex;flex-direction:column;gap:14px}
.chat__msg{max-width:88%;padding:16px 20px;border-radius:22px;font-size:1.02rem;line-height:1.55;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s var(--ease)}
.chat__msg.is-on{opacity:1;transform:none}
.chat__msg--user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.chat__msg--ai{align-self:flex-start;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-bottom-left-radius:6px;position:relative;padding-left:56px}
.chat__avatar{position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--pink-soft);color:var(--pink);display:flex;align-items:center;justify-content:center}
.chat__avatar svg{width:16px;height:16px;fill:currentColor}
.chat__text.is-typing::after{content:"";display:inline-block;width:2px;height:1em;background:var(--pink);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.chat__note{display:block;margin-top:12px;color:var(--muted);font-size:.8rem}

/* ======================================================================
   Kapitel 4: Der Stapel (ein Bildschirm, Showcases als Polaroids, blaettert von selbst)
   ====================================================================== */
.chapter--stack{background:#fff;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 4vh) 0 6vh}
.stack__wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.stack__head h2{margin:0}
.stack{position:relative;width:min(50vh,78vw);aspect-ratio:1;margin:clamp(28px,4vh,44px) auto 0;cursor:pointer}
.stack__card{position:absolute;inset:0;display:block;background:#fff;padding:10px 10px 12px;border-radius:22px;box-shadow:0 18px 44px rgba(11,11,15,.12),0 2px 6px rgba(11,11,15,.06);transform-origin:50% 60%;transition:transform .7s var(--ease),opacity .45s;will-change:transform;opacity:0;pointer-events:none}
.stack__card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;background:var(--soft)}
.stack__card.is-top{pointer-events:auto}
.stack__cap{margin:22px 0 0;min-height:3.4em;transition:opacity .3s,transform .3s var(--ease)}
.stack__cap.is-swap{opacity:0;transform:translateY(6px)}
.stack__cap i{display:block;font-style:normal;font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.stack__cap b{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.02em;color:var(--ink);margin-top:4px}
.stack__dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.stack__dots span{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.stack__dots span.is-on{background:var(--pink);transform:scale(1.4)}
.stack__actions{margin-top:clamp(22px,3vh,32px)}
@media (max-width:640px){
  .chapter--stack{padding-top:calc(var(--nav-h) + 2vh)}
  .stack{width:min(46vh,78vw)}
  .stack__cap{margin-top:18px}
}

/* ======================================================================
   Konfigurator
   ====================================================================== */
.konf{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,64px);margin-top:clamp(32px,5vw,56px);align-items:start}
@media (max-width:900px){.konf{grid-template-columns:1fr}}
.konf__skills{display:flex;flex-wrap:wrap;gap:10px}
.konf__skills button{font:inherit;font-family:var(--font-head);font-weight:700;font-size:.98rem;padding:12px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.konf__skills button:hover{border-color:var(--ink);transform:translateY(-2px)}
.konf__skills button.is-on{background:var(--pink);border-color:var(--pink);color:#fff}
.konf__result{position:sticky;top:calc(var(--nav-h) + 20px);background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--shadow)}
.konf__team{display:flex;flex-wrap:wrap;gap:14px;min-height:96px;margin-bottom:22px}
.konf__member{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--soft);border:1px solid var(--line);animation:pop .45s var(--ease) both}
.konf__member img{width:44px;height:44px;border-radius:var(--sq);object-fit:cover}
.konf__member b{display:block;font-family:var(--font-head);font-weight:800;font-size:.92rem;line-height:1.1}
.konf__member span{display:block;font-size:.78rem;color:var(--muted)}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.konf__price{display:flex;flex-direction:column;gap:2px;padding-top:18px;border-top:1px solid var(--line)}
.konf__pkg{font-family:var(--font-head);font-weight:800;color:var(--pink);letter-spacing:.1em;text-transform:uppercase;font-size:.8rem}
.konf__price b{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,4.5vw,3.4rem);letter-spacing:-.03em;line-height:1.05}
.konf__per{color:var(--muted);font-size:.92rem}
.konf__note{margin:16px 0 20px;color:var(--muted);font-size:.95rem}

/* ======================================================================
   Kapitel 5: Start. Von Wien aus starten Bogenlinien in den ganzen DACH-Raum
   ====================================================================== */
.chapter--dach{background:#fff;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 4vh) 0 6vh}
.dach__wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.dach__head{display:flex;flex-direction:column;align-items:center}
.dach__head h2{margin:0 0 14px}
.dach__head .lead{margin:0 auto;max-width:58ch}
.dach{width:min(35vh,92vw);aspect-ratio:1000/1297;margin:clamp(18px,3vh,32px) auto 0} /* Hoehe rund 45vh, damit Kopf, Karte und Buttons auf einen Bildschirm passen */
.dach svg{width:100%;height:100%;overflow:visible;display:block}
.dach__land path{fill:#fff3f7;stroke:#ffc2d3;stroke-width:1.6;stroke-linejoin:round}
.dach__line{fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.dach__dot{fill:var(--pink);opacity:0;transform-origin:center;transform-box:fill-box}
.dach__label{font-family:var(--font-body);font-size:24px;font-weight:600;fill:#8a8a95}
.dach__label--home{font-family:var(--font-head);font-weight:800;fill:var(--ink);font-size:30px}
.dach__home{fill:var(--pink)}
.dach__home--ring{fill:none;stroke:var(--pink);stroke-width:3;opacity:0;transform-origin:center;transform-box:fill-box}
.dach.is-live .dach__line{animation:dach-line 11s var(--ease) infinite;animation-delay:var(--d,0s)}
.dach.is-live .dach__dot{animation:dach-dot 11s var(--ease) infinite;animation-delay:var(--d,0s)}
.dach.is-live .dach__home--ring{animation:dach-pulse 2.6s ease-out infinite}
.dach.is-live .dach__home--ring2{animation-delay:1.3s}
@keyframes dach-line{0%{stroke-dashoffset:1;opacity:1}14%{stroke-dashoffset:0;opacity:1}72%{stroke-dashoffset:0;opacity:1}82%{opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes dach-dot{0%{opacity:0;transform:scale(.2)}4%{opacity:1;transform:scale(1.5)}9%{transform:scale(1)}60%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(.6)}100%{opacity:0}}
@keyframes dach-pulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(2.8)}}
.dach__office{margin:clamp(14px,2vh,22px) 0 0;font-family:var(--font-head);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dach__actions{margin-top:clamp(18px,2.4vh,28px)}
@media (max-width:640px){
  .chapter--dach{padding-top:calc(var(--nav-h) + 2vh)}
  .dach{width:min(48vh,88vw)}
  .dach__label{font-size:30px}
  .dach__label--home{font-size:36px}
  .dach__line{stroke-width:3}
  .dach__dot{r:9}
}
@media (prefers-reduced-motion:reduce){.dach__line{stroke-dashoffset:0;opacity:1}.dach__dot{opacity:1}.dach.is-live .dach__line,.dach.is-live .dach__dot,.dach.is-live .dach__home--ring{animation:none}}

/* ---------- Footer-Variante ---------- */
.footer--v2 .footer__bottom{display:flex;justify-content:space-between;gap:16px}
.footer--v2 .footer__bottom a{color:var(--pink);font-weight:600}

@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Reduzierte Bewegung: Szenen als Endzustand ---------- */
@media (prefers-reduced-motion:reduce){
  .scene{height:auto}
  .scene__stage{position:relative;height:auto;min-height:80vh}
  .member{--p:1;--lp:1}
  .hero2__done{--dp:1;position:relative;bottom:auto;left:auto;transform:none;margin:24px auto 0}
  .num{position:relative;transform:none;opacity:1;top:auto;margin:24px 0}
  .ring-cursor{display:none}
}

/* Frei stehende Skills: kein Kasten, keine Zahlen */
.hero2__done--free{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;width:min(92vw,760px)}
.hero2__done--free .pkg__skills{gap:6px;margin-top:0;max-width:640px}
.hero2__done--free .pkg__skills span{font-size:.72rem;padding:4px 10px}
/* Spuren als feine Striche wie die Logo-Konturen: zeichnen sich, dann verblassen sie */
.hero2__trails path{stroke:var(--pink);stroke-linecap:round}

/* ---------- Kapitel 2 in der Hero-Buehne ---------- */
.hero2__center2{position:absolute;left:50%;top:15vh;transform:translateX(-50%);text-align:center;z-index:2;width:min(92vw,900px);opacity:var(--h2,0);pointer-events:none}
.hero2__center2.is-on{pointer-events:auto}
.hero2__title2{font-size:clamp(2rem,4.2vw,3.1rem);letter-spacing:-.02em;line-height:1.1;margin:0} /* wie die H2 von Kapitel 3 (Das Original) */
.hero2__sub2{font-family:var(--font-head);font-weight:700;font-size:clamp(1.05rem,2vw,1.6rem);margin-top:12px;color:var(--ink)}
.pkg__skills span.is-placing{transition:none}
.scene__hint{opacity:var(--hint,.8)}
@media (max-width:640px){
  .hero2__center2{top:12vh}
  .hero2__title2{font-size:clamp(2rem,10vw,2.6rem)}
  .hero2__sub2{font-size:1rem}
}

/* ---------- Kapitel 2: fixe Manager:in, wechselnde Expert:innen ---------- */
.member--bench{--p:1;--g:1;--op:0;--gx:70;--gy:18;--x:0;--y:0;--sx:0;--sy:0;--r:0;--mx:0;--my:0}
.member figcaption em{display:block;font-style:normal;color:var(--pink);font-weight:800;font-family:var(--font-head);font-size:.74rem;margin-top:2px}
.hero2__project{position:absolute;left:50%;top:calc(50% - 10vh);transform:translate(-50%,-100%);text-align:center;opacity:var(--pp,0);transition:opacity .3s;pointer-events:none;z-index:2}
.hero2__project-k{display:block;font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero2__project-k b{color:var(--pink)}
.hero2__project-t{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.01em;color:var(--ink);margin-top:2px}
.hero2__sub3{color:var(--muted);font-size:clamp(.95rem,1.3vw,1.1rem);max-width:52ch;margin:16px auto 0}
@media (max-width:640px){
  .hero2__project{left:50%;top:calc(50% + 3vh)}
  .hero2__project-t{font-size:1rem}
  .hero2__sub3{font-size:.9rem}
  /* Mobil: keine Namenskarten unter den Gesichtern, nur Andrea traegt in Kapitel 2 den Hinweis "immer dabei" */
  .member figcaption,.member--bench figcaption{display:none}
  .scene__stage.is-k2 .member.is-anchor figcaption{display:block;font-size:.62rem;padding:4px 10px;bottom:auto;top:calc(100% + 6px)}
  /* Mobil, Kapitel 2: Linien-Logo kleiner und unter die Copy geschoben, Andrea in seiner Mitte, Spezialist:innen auf der Linie */
  .scene__stage.is-k2 .hero2__ring{--rsm:.68;top:calc(50% + 13vh);transition:transform 1.1s var(--ease),opacity .8s,top .9s var(--ease)}
}

/* ---------- Kapitel 2 in Pink: Farben kippen, wenn die Buehne pink wird ---------- */
.scene__stage.is-pink .hero2__glow{opacity:0}
.scene__stage .hero2__center2,.scene__stage .hero2__project,.scene__stage .chapter__kicker,.scene__stage .hero2__title2,.scene__stage .hero2__sub2,.scene__stage .hero2__sub3,.scene__stage .rotor,.scene__stage .hero2__project-k,.scene__stage .hero2__project-t,.scene__stage .hero2__project-k b{transition:color .5s}
.scene__stage.is-pink .scene__hint{opacity:0}

/* ---------- Kapitel 3: Das Original ---------- */
.original{background:#fff}
.original__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:900px){.original__grid{grid-template-columns:1fr}}
.original__logo{position:relative;width:min(440px,100%);aspect-ratio:1;margin-inline:auto}
.original__logo svg{width:100%;height:100%;overflow:visible}
.olr{fill:none;stroke:#ffc0d2;stroke-width:.55;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.olr--main{stroke:var(--pink);stroke-width:.9}
.original__logo.is-in .olr{animation:draw 2s var(--ease) forwards}
.original__logo.is-in .olr.k1{animation-delay:.5s}
.original__logo.is-in .olr.k2{animation-delay:1s;animation-duration:2.2s}
.original__year{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:-.04em;color:var(--ink);display:grid}
.original__year span{grid-area:1/1;opacity:0;transform:translateY(.4em)}
.original__logo.is-in .original__y1{animation:yin .7s var(--ease) 1.4s forwards,yout .6s var(--ease) 3.6s forwards}
.original__logo.is-in .original__y2{color:var(--pink);animation:yin .7s var(--ease) 3.9s forwards}
@keyframes yin{to{opacity:1;transform:none}}
@keyframes yout{to{opacity:0;transform:translateY(-.4em)}}
.original__text h2{margin:0 0 14px}
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(24px,3vw,36px)}
@media (max-width:520px){.proofs{grid-template-columns:1fr 1fr}}
.proof b{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.proof > span{display:block;color:var(--muted);font-size:.92rem;margin-top:4px}
.seals{display:flex;gap:clamp(14px,2vw,28px);align-items:center;margin-top:clamp(20px,3vw,32px)}
.seals img{height:clamp(84px,9vw,118px);width:auto;border:0;padding:0;background:none;border-radius:0}

/* ---------- Kapitel 2, Richtung A: Buttons am unteren Buehnenrand ---------- */
.hero2__cta--stage{position:absolute;left:50%;bottom:1.5vh;transform:translateX(-50%);z-index:3;margin:0;white-space:nowrap}
@media (max-width:640px){.hero2__cta--stage{bottom:2vh;width:calc(100% - 32px);justify-content:center}}
.hero2__sub3{margin-top:10px}

/* ---------- Kapitel 2: Projektstrom ---------- */
.member.is-anchor img{box-shadow:0 0 0 4px #fff,0 0 0 7px rgba(253,56,112,.9),0 18px 40px rgba(24,67,65,.18);animation:anchor-breathe 3.2s ease-in-out infinite}
@keyframes anchor-breathe{0%,100%{box-shadow:0 0 0 4px #fff,0 0 0 7px rgba(253,56,112,.9),0 18px 40px rgba(24,67,65,.18)}50%{box-shadow:0 0 0 4px #fff,0 0 0 10px rgba(253,56,112,.35),0 18px 40px rgba(24,67,65,.18)}}
.member figcaption .why{display:block;font-style:normal;color:var(--pink);font-weight:800;font-family:var(--font-head);font-size:.74rem;margin-top:2px}
.hero2__project-n{display:block;font-size:.85rem;color:var(--muted);margin-top:3px}
.hero2__project-t,.hero2__project-n{transition:opacity .3s}
.hero2__project.is-swap .hero2__project-t,.hero2__project.is-swap .hero2__project-n{opacity:0}
@media (max-width:640px){.hero2__project-n{font-size:.72rem}}

/* ---------- Kapitel 2: Logo weitet sich, Artefakte fliegen nach aussen ---------- */
.frags path{fill:none;stroke:var(--pink);stroke-linecap:round;stroke-linejoin:round;transform-origin:25.5px 25px;will-change:transform,opacity}
.hero2__ring{transition:transform 1.1s var(--ease),opacity .8s}

/* ---------- Kapitel 2: Logo als wachsende Striche ---------- */
.hero2__ring .track,.hero2__ring .track__segs,.hero2__ring .lr{transition:opacity .8s}
.hero2__ring.is-lines .track,.hero2__ring.is-lines .track__segs{opacity:0}
/* Kapitel 2: das Band wird zu drei feinen Linien, die wackeln und pulsieren. Akzente: Pink, Koralle (zweite Logofarbe), Schwarz */
.lr3{fill:none;stroke:#fe6c6d;stroke-width:.5;stroke-linejoin:round;opacity:0;transition:opacity .8s}
.hero2__ring.is-lines .lr3{opacity:1}
.hero2__ring.is-lines .lr{opacity:1;stroke-width:.5;stroke-dashoffset:0}
.hero2__ring.is-lines .lr.draw.k0{stroke:var(--pink);animation:wobble 16s ease-in-out 2.4s infinite,pulse-line 3.6s ease-in-out infinite}
.hero2__ring.is-lines .lr.draw.k1{stroke:#fe6c6d;animation:wobble 19s ease-in-out 2.4s infinite reverse,pulse-line 5.2s ease-in-out .8s infinite}
@keyframes pulse-line{0%,100%{stroke-opacity:.45}50%{stroke-opacity:1}}
.echoes path{fill:none;stroke:var(--pink);stroke-width:.32;stroke-linejoin:round;stroke-linecap:round;transform-origin:25.5px 25px;opacity:.55}
.echoes{transform-origin:25.5px 25px;animation:echo-spin 110s linear infinite} /* eine Drehung fuer alle Striche, nicht je Strich */
@keyframes echo-spin{to{transform:rotate(360deg)}}
/* Kein Filter-Schatten am vollen Ring (teuer auf Mobilgeraeten), stattdessen leichtes Atmen */
.hero2__ring.is-full{animation:breathe-soft 5s ease-in-out infinite}
@keyframes breathe-soft{0%,100%{opacity:var(--rop,1)}50%{opacity:calc(var(--rop,1) * .82)}}

/* ---------- Kapitel 2: Projekt-Widget unter Andrea (gruener Punkt, "Working on") ---------- */
.hero2__project{left:50%;top:auto;transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:10px 16px 11px;border-radius:18px;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:0 12px 30px rgba(24,67,65,.10);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-width:200px;max-width:min(320px,80vw)}
.hero2__project-k{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;letter-spacing:.14em;color:var(--muted)}
.hero2__dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.45);animation:dot-blink 2.2s ease-in-out infinite}
@keyframes dot-blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.45)}50%{opacity:.55;box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.hero2__project-t{font-size:clamp(1rem,1.4vw,1.15rem);margin-top:1px}
.hero2__project-n{font-size:.78rem;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (max-width:640px){
  .hero2__project{left:50%;top:auto;bottom:calc(2vh + 64px);transform:translateX(-50%);padding:8px 14px 9px;min-width:0;max-width:calc(100% - 32px)}
  .hero2__project-t{font-size:.95rem}
  .hero2__project-n{font-size:.7rem}
}

/* ---------- Laptops (unter 800px Hoehe): kompakter, damit Team und Copy nicht kollidieren ---------- */
@media (min-width:641px) and (max-height:800px){
  .member{width:clamp(80px,10.5vw,138px)}
  .hero2__center2{top:10vh}
  .hero2__title2{font-size:clamp(2rem,4.2vw,3.1rem)}
  .hero2__sub2{font-size:clamp(1rem,1.7vw,1.3rem);margin-top:8px}
  .hero2__sub3{font-size:.9rem;margin-top:6px}
  .hero2__project{padding:8px 14px 9px}
  .hero2__project-t{font-size:1rem}
  .hero2__project-n{font-size:.72rem}
}

/* ---------- Kapitel 2: weniger gedraengt (Headline, Copy, Buttons bleiben) ---------- */
@media (min-width:641px){
  .scene__stage.is-k2 .member figcaption{font-size:.68rem;padding:4px 9px;bottom:-10px}
  .scene__stage.is-k2 .member figcaption .why,.scene__stage.is-k2 .member figcaption em{font-size:.66rem}
  .scene__stage.is-k2 .hero2__project{padding:7px 13px 8px;min-width:170px;border-radius:14px}
  .scene__stage.is-k2 .hero2__project-k{font-size:.58rem;letter-spacing:.12em}
  .scene__stage.is-k2 .hero2__project-t{font-size:.95rem}
  .scene__stage.is-k2 .hero2__project-n{font-size:.68rem}
  .scene__stage.is-k2 .hero2__dot{width:6px;height:6px}
}

/* Zentrierung Kapitel 3 (Das Original) und KI-Kapitel: eine Spalte, alles mittig */
.original__grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:clamp(20px,3vw,36px)}
.original__logo{width:min(340px,80vw)}
.original__text{max-width:760px}
.proofs{justify-items:center}
.seals{justify-content:center;flex-wrap:wrap}
.dialog{grid-template-columns:1fr;justify-items:center;text-align:center}
.dialog__intro{max-width:760px}
.dialog__links{justify-content:center}
.chat{width:min(100%,720px);text-align:left}
/* Handy: keine Transform-Verzoegerung am Ring (der Scroll treibt ihn ohnehin je Bild), kein Weichzeichner hinter den Kaesten */
@media (max-width:640px){
  .hero2__ring{transition:opacity .8s}
  .hero2__project,.hero2__done{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Kapitel 2 Beschriftungen: Typografie statt Kaesten (keine Pillen, kein Punkt, kein Weichzeichner) */
.member figcaption,.scene__stage.is-k2 .member figcaption,.scene__stage.is-k2 .member.is-anchor figcaption{background:none;border:0;box-shadow:none;padding:0;bottom:auto;top:calc(100% + 10px);font-size:.8rem;line-height:1.25}
.member figcaption b{font-size:.92rem;letter-spacing:-.01em}
.member figcaption span{font-size:.72rem}
.member figcaption em,.member figcaption .why,.scene__stage.is-k2 .member figcaption .why,.scene__stage.is-k2 .member figcaption em{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.hero2__project,.scene__stage.is-k2 .hero2__project{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;min-width:0;border-radius:0;gap:2px}
.hero2__project-k,.scene__stage.is-k2 .hero2__project-k{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);font-weight:800}
.hero2__project-k b{color:var(--pink);margin-left:.3em}
.hero2__dot{display:none}
.hero2__project-t,.scene__stage.is-k2 .hero2__project-t{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.02em}
.hero2__project-n,.scene__stage.is-k2 .hero2__project-n{font-size:.78rem;color:var(--muted)}
/* Projektzeilen dicht beieinander: Kicker, Titel und Bedarf als ein Block */
.hero2__project,.scene__stage.is-k2 .hero2__project{gap:0}
.hero2__project-k,.scene__stage.is-k2 .hero2__project-k{line-height:1.1;margin-bottom:3px}
.hero2__project-t,.scene__stage.is-k2 .hero2__project-t{line-height:1.1;margin-top:0}
.hero2__project-n,.scene__stage.is-k2 .hero2__project-n{line-height:1.2;margin-top:2px}

/* Siegel-Reihe mit geprueft.com: gleich breite Spalten, jedes Siegel in seiner Spalte mittig */
.seals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;align-items:center;gap:clamp(12px,2vw,28px);max-width:640px;margin-left:auto;margin-right:auto}
.seals img{max-width:100%}
.seal--gp{max-width:100%;display:flex;justify-content:center}
.seal--gp .gp-siegel{max-width:100%}
@media (max-width:640px){.seals{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}