/* Hero-Animationen der Angebotsseiten (data/seiten.json, Feld hero): "rechnung" (Kassenbon einer klassischen Agentur, dann das Abo)
   und "formate" (ein Sujet baut sich auf und erscheint in vier Formaten). Steuerung in js/hero-anim.js: .ha-js = Animation aktiv,
   .is-play = laeuft, .is-fade/.is-reset = Neustart. Ohne JS und bei reduzierter Bewegung ist der Endzustand sichtbar.
   Animiert werden nur transform, opacity und stroke-dashoffset. */
.ha-stage{position:relative;z-index:1;margin:40px auto 0;transition:opacity .45s var(--ease)}
.ha-stage.is-fade{opacity:0}
.ha-stage.is-reset,.ha-stage.is-reset *,.ha-stage.is-reset *::before,.ha-stage.is-reset *::after{transition:none !important}

/* ---------- Rechnung ---------- */
.ha-bill{width:min(640px,100%);padding-bottom:120px}
.ha-printer{position:relative;z-index:2;width:min(380px,92%);height:16px;margin:0 auto;border-radius:10px;background:var(--ink);box-shadow:0 10px 24px rgba(11,11,15,.18)}
.ha-printer::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:3px;border-radius:3px;background:#2a2a33}
.ha-roll{position:relative;width:min(380px,90%);margin:-8px auto 0;padding:0 18px 34px;overflow:hidden}
.ha-paper{position:relative;background:#fff;padding:26px 22px 22px;text-align:left;font-size:.9rem;color:var(--ink);box-shadow:0 18px 40px rgba(11,11,15,.10)}
.ha-paper::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(-45deg,transparent 7px,#fff 0) 0 0/14px 10px repeat-x,linear-gradient(45deg,transparent 7px,#fff 0) 0 0/14px 10px repeat-x}
.ha-paper__head{text-align:center;padding-bottom:12px;margin-bottom:12px;border-bottom:1.5px dashed #d5d5dd}
.ha-paper__head b{display:block;font-family:var(--font-head);font-weight:800;font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.ha-paper__head span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}
.ha-list{display:grid;gap:9px}
.ha-row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.ha-row small{grid-column:1;color:var(--muted);font-size:.74rem;line-height:1.2}
.ha-row em{position:relative;grid-column:2;grid-row:1;font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ha-row em::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:2px;border-radius:2px;background:var(--pink);transform:scaleX(0);transform-origin:left center}
.ha-row span{font-weight:600;line-height:1.25}
.ha-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;padding-top:12px;border-top:1.5px dashed #d5d5dd}
.ha-sum span{font-family:var(--font-head);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.ha-sum b{font-family:var(--font-head);font-weight:800;font-size:1.45rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ha-paper__foot{margin:12px 0 0;text-align:center;color:var(--muted);font-size:.72rem}
.ha-abo{position:absolute;z-index:3;right:0;bottom:-6px;width:250px;padding:20px 20px 18px;border-radius:22px;background:var(--pink);color:#fff;text-align:left;transform:rotate(-4deg);box-shadow:0 22px 44px rgba(253,56,112,.32)}
.ha-abo__k{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ha-abo b{display:block;font-family:var(--font-head);font-weight:800;font-size:1.9rem;letter-spacing:-.03em;line-height:1.05;margin-top:6px}
.ha-abo b small{font-size:.95rem;font-weight:700;letter-spacing:0}
.ha-abo ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:5px;font-size:.84rem;font-weight:600;line-height:1.3}
.ha-abo li{position:relative;padding-left:16px}
.ha-abo li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:#fff}
/* Ablauf: Bon druckt sich (0,2 s), Zeilen nacheinander, Summe zaehlt hoch, Betraege werden gestrichen, das Abo legt sich darueber */
.ha-js .ha-paper{transform:translateY(-102%)}
.ha-js .ha-row,.ha-js .ha-sum,.ha-js .ha-paper__foot{opacity:0;transform:translateY(6px)}
.ha-js .ha-abo{opacity:0;transform:translateY(46px) rotate(4deg) scale(.86)}
.ha-js.is-play .ha-paper{transform:none;transition:transform 1.3s cubic-bezier(.3,.8,.3,1) .2s}
.ha-js.is-play .ha-row,.ha-js.is-play .ha-sum,.ha-js.is-play .ha-paper__foot{opacity:1;transform:none;transition:opacity .4s var(--ease) var(--d),transform .5s var(--ease) var(--d)}
.ha-js.is-play .ha-list{opacity:.5;transition:opacity .6s var(--ease) 4.9s}
.ha-js.is-play .ha-row em::after{transform:scaleX(1);transition:transform .35s var(--ease) var(--s)}
.ha-js.is-play .ha-sum b{transition:opacity .4s var(--ease) 4.9s;opacity:.5}
.ha-js.is-play .ha-abo{opacity:1;transform:rotate(-4deg);transition:opacity .35s var(--ease) 5.4s,transform .8s cubic-bezier(.2,1.35,.35,1) 5.4s}
.ha-row em::after{transform:scaleX(1)}
.ha-list{opacity:.5}
.ha-sum b{opacity:.5}
.ha-js .ha-row em::after{transform:scaleX(0)}
.ha-js .ha-list,.ha-js .ha-sum b{opacity:1}
@media (max-width:640px){
  .ha-roll{width:100%;max-width:330px;padding:0 10px 30px}
  .ha-paper{padding:22px 16px 18px;font-size:.84rem}
  .ha-bill{padding-bottom:10px}
  .ha-abo{position:relative;right:auto;bottom:auto;width:min(290px,88%);margin:-36px auto 0}
}

/* ---------- Formate ---------- */
.ha-formats{--h:clamp(170px,24vw,280px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:44px 20px;width:min(1080px,100%);padding-bottom:34px}
.ha-f{position:relative;flex:none;margin:0;height:var(--h);width:calc(var(--h) * var(--r))}
.ha-f--story{--r:.5625;--s:.62}
.ha-f--post{--r:.8;--s:.66}
.ha-f--banner{--r:1;height:calc(var(--h) * .5625);--s:.62}
.ha-f--flyer{--r:.707;--s:.74}
.ha-f__art{position:absolute;inset:0;text-align:left;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px rgba(11,11,15,.09)}
.ha-f__lbl{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font-size:.78rem;font-weight:700;color:var(--muted)}
.ha-f__lbl b{color:var(--ink);font-family:var(--font-head);font-weight:800}
.ha-el{position:absolute}
.ha-bg{background:var(--pink-soft)}
.ha-ring{aspect-ratio:55/54;overflow:visible}
.ha-ring path{fill:none;stroke:var(--pink);stroke-width:2.6;stroke-linecap:round}
.ha-hl{font-family:var(--font-head);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1;font-size:calc(var(--h) * var(--s) * .14)}
.ha-sub{color:var(--muted);font-weight:600;line-height:1.2;font-size:calc(var(--h) * var(--s) * .062)}
.ha-btn{display:flex;align-items:center;justify-content:center;border-radius:calc(var(--h) * .03);background:var(--pink);color:#fff;font-weight:700;font-size:calc(var(--h) * var(--s) * .058);white-space:nowrap}
.ha-mark{width:calc(var(--h) * .07);aspect-ratio:1;border-radius:30%;background:var(--ink)}
/* Positionen je Format */
.ha-f--story .ha-bg{left:0;right:0;top:0;height:54%}
.ha-f--story .ha-ring{left:16%;top:10%;width:68%}
.ha-f--story .ha-hl{left:10%;right:8%;top:58%}
.ha-f--story .ha-sub{left:10%;right:8%;top:77.5%}
.ha-f--story .ha-btn{left:10%;right:10%;bottom:6%;height:8%}
.ha-f--story .ha-mark{left:8%;top:4%}
.ha-f--post .ha-bg{right:0;top:0;bottom:0;width:48%}
.ha-f--post .ha-ring{right:6%;top:9%;width:38%}
.ha-f--post .ha-hl{left:8%;width:46%;top:34%}
.ha-f--post .ha-sub{left:8%;width:46%;top:62%}
.ha-f--post .ha-btn{left:8%;width:52%;bottom:9%;height:9%}
.ha-f--post .ha-mark{left:8%;top:7%}
.ha-f--banner .ha-bg{left:0;top:0;bottom:0;width:40%}
.ha-f--banner .ha-ring{left:6%;top:11%;width:28%}
.ha-f--banner .ha-hl{left:46%;right:5%;top:16%}
.ha-f--banner .ha-sub{left:46%;right:5%;top:50%}
.ha-f--banner .ha-btn{left:46%;width:38%;bottom:12%;height:15%}
.ha-f--banner .ha-mark{right:5%;top:9%;width:calc(var(--h) * .05)}
.ha-f--flyer .ha-bg{left:0;right:0;top:0;height:46%}
.ha-f--flyer .ha-ring{left:26%;top:6%;width:48%}
.ha-f--flyer .ha-hl{left:9%;right:9%;top:50%;text-align:center}
.ha-f--flyer .ha-sub{left:9%;right:9%;top:74%;text-align:center}
.ha-f--flyer .ha-btn{left:24%;right:24%;bottom:7%;height:7.5%}
.ha-f--flyer .ha-mark{left:7%;top:5%}
/* Ablauf: das erste Format baut sich Stueck fuer Stueck auf, die anderen folgen schneller */
.ha-js .ha-f{opacity:0;transform:translateY(18px) scale(.94)}
.ha-js .ha-f__lbl{opacity:0}
.ha-js .ha-f .ha-el{opacity:0;transform:translateY(10px)}
.ha-js .ha-f .ha-bg{transform:scaleY(0);transform-origin:top}
.ha-js .ha-f--post .ha-bg,.ha-js .ha-f--banner .ha-bg{transform:scaleX(0);transform-origin:right}
.ha-js .ha-f--banner .ha-bg{transform-origin:left}
.ha-js .ha-ring path{stroke-dasharray:1;stroke-dashoffset:1}
.ha-js.is-play .ha-f{opacity:1;transform:none;transition:opacity .5s var(--ease) var(--fd),transform .7s var(--ease) var(--fd)}
.ha-js.is-play .ha-f__lbl{opacity:1;transition:opacity .5s var(--ease) calc(var(--fd) + var(--st) * 6)}
.ha-js.is-play .ha-f .ha-el{opacity:1;transform:none;transition:opacity .45s var(--ease) calc(var(--fd) + var(--st) * var(--k)),transform .6s var(--ease) calc(var(--fd) + var(--st) * var(--k))}
.ha-js.is-play .ha-ring path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease) calc(var(--fd) + var(--st) * 1.4)}
@media (max-width:640px){.ha-formats{--h:172px;gap:40px 16px}}
@media (max-width:380px){.ha-formats{--h:150px}}

/* ---------- Umlaufbahn ---------- */
.ha-orbit{width:min(860px,100%)}
.ha-o{position:relative;width:100%;aspect-ratio:16/8.4}
.ha-o__ring{position:absolute;left:50%;top:52%;width:46%;transform:translate(-50%,-50%);overflow:visible}
.ha-o__ring path{fill:none;stroke:var(--pink);stroke-width:.5;opacity:.45;stroke-dasharray:1;stroke-dashoffset:0}
.ha-o__lines{position:absolute;inset:0;width:100%;height:100%}
.ha-o__lines line{stroke:var(--pink);stroke-width:1.5;stroke-dasharray:3 6;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.55}
.ha-o__m{position:absolute;left:var(--x);top:var(--y);z-index:1;margin:0;width:92px;height:92px;transform:translate(-50%,-50%)}
.ha-o__m img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:38%;border:4px solid #fff;background:#fff;box-shadow:0 14px 34px rgba(24,67,65,.16)}
.ha-o__m figcaption{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);width:max-content;max-width:150px;line-height:1.2;text-align:center}
.ha-o__m b{display:block;font-family:var(--font-head);font-weight:800;font-size:.9rem;color:var(--ink)}
.ha-o__m span{display:block;color:var(--muted);font-size:.76rem}
.ha-o__m--c{width:124px;height:124px;z-index:2}
.ha-o__m--c img{border:0;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--pink),0 18px 40px rgba(24,67,65,.18)}
.ha-o__m--c b{font-size:1.05rem}
.ha-o__m--c span{color:var(--pink);font-weight:700}
.ha-o__foot{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 36px;margin-top:64px}
.ha-o__foot div{text-align:center}
.ha-o__foot b{display:block;font-family:var(--font-head);font-weight:800;font-size:1.6rem;letter-spacing:-.03em;color:var(--ink)}
.ha-o__foot span{display:block;color:var(--muted);font-size:.84rem}
/* Ablauf: Ring zeichnet sich, die Managerin erscheint, die Spezialist:innen kreisen von innen auf ihre Plaetze, Linien verbinden */
.ha-js .ha-o__ring path{stroke-dashoffset:1}
.ha-js .ha-o__m{opacity:0;transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px))) scale(.5)}
.ha-js .ha-o__lines line,.ha-js .ha-o__foot div{opacity:0}
.ha-js .ha-o__foot div{transform:translateY(10px)}
.ha-js.is-play .ha-o__ring path{stroke-dashoffset:0;transition:stroke-dashoffset 2s var(--ease) .1s}
.ha-js.is-play .ha-o__m{opacity:1;transform:translate(-50%,-50%);transition:opacity .45s var(--ease) var(--d),transform 1s cubic-bezier(.2,1.2,.35,1) var(--d)}
.ha-js.is-play .ha-o__lines line{opacity:.55;transition:opacity .7s var(--ease) var(--d)}
.ha-js.is-play .ha-o__foot div{opacity:1;transform:none;transition:opacity .5s var(--ease) var(--d),transform .6s var(--ease) var(--d)}
@media (max-width:640px){
  .ha-o{aspect-ratio:10/11}
  .ha-o__ring{width:84%}
  .ha-o__m{width:60px;height:60px;left:var(--mx,var(--x));top:var(--my,var(--y))}
  .ha-o__lines{display:none}
  .ha-o__m img{border-width:3px}
  .ha-o__m figcaption{max-width:96px}
  .ha-o__m b{font-size:.78rem}
  .ha-o__m span{font-size:.66rem}
  .ha-o__m--c{width:88px;height:88px}
  .ha-o__m--c b{font-size:.9rem}
  .ha-o__foot{gap:14px 22px}
  .ha-o__foot b{font-size:1.3rem}
}

/* Mit Hero-Animation: keine Logo-Signatur im Hintergrund, die Szene ist der Blickfang */
.pg-intro--anim .uu-logo{display:none}
.pg-intro--anim .pg-intro__wrap{min-height:0;padding-top:4vh}