/* ================================================================
   aveloa · Tour «Bauen Sie Ihren KI-Mitarbeiter»
   Kein Framework, kein Build-Schritt. Farben und Schriften wie
   auf aveloa.ch (assets/site.css).

   Aufbau: Der Hero scrollt normal. Die Tour darunter ist genau einen
   Bildschirm hoch und läuft von selbst ab — eine 3D-«Kamera» fährt
   über ein Modell der Website und zoomt auf die Stelle, um die es
   gerade geht. Gesteuert wird sie über die Abspielleiste, nicht
   mehr über das Scrollrad.
   ================================================================ */
:root{
  --cssver:"6";
  --night:#0b0a1f; --night-2:#16123a;
  --bg:#f7f6fb; --paper:#fff;
  --ink:#14112e; --ink-2:#3c3960; --muted:#67648a; --faint:#9a97b5;
  --line:#e6e3f2; --line-2:#efedf8;
  --indigo:#2f44d0; --violet:#6b4ef0; --magenta:#ec4899; --cyan:#06b6d4;
  --emerald:#10b981; --amber:#f59e0b; --coral:#ff6b5b;
  --grad:linear-gradient(100deg,#3b54ff 0%,#7b5cff 48%,#ec4899 100%);
  --pc:#6b4ef0;
  --fd:"Space Grotesk",system-ui,sans-serif;
  --fb:"Plus Jakarta Sans",system-ui,sans-serif;
  --hdr:80px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Kein Scrollbalken: die Tour soll wie ein Bookletworken, nicht wie
   eine lange Seite. Gescrollt wird weiterhin — nur ohne Anzeige. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:var(--violet);color:#fff}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--violet);color:#fff;padding:.6rem 1rem}
.skip:focus{left:0}

/* ---------------------------------------------------------- Kopf */
.prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:80;background:var(--grad);
  transform-origin:0 50%;transform:scaleX(0)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--fd);
  font-weight:600;text-decoration:none;border-radius:999px;transition:transform .25s,box-shadow .25s,background .25s}
.btn--sm{font-size:.92rem;padding:.6rem 1.15rem}
.btn--grad{background:var(--grad);color:#fff;box-shadow:0 8px 24px -8px rgba(107,78,240,.6)}
.btn--grad:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(107,78,240,.75)}
.btn--light{background:#fff;color:var(--ink);font-size:1.05rem;padding:.95rem 1.6rem;
  box-shadow:0 18px 40px -16px rgba(123,92,255,.8)}
.btn--light:hover{transform:translateY(-2px)}
.btn:focus-visible,.chip:focus-visible,.goal:focus-visible,.pb__segs button:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}

/* ---------------------------------------------------------- Hero
   Vom neuen Vorschlag uebernommen: das Motiv der Startseite, links
   dunkel verschleiert, damit der Titel darauf lesbar bleibt. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;
  overflow:hidden;color:#fff;padding:calc(var(--hdr) + 2rem) clamp(1.1rem,4vw,3rem) 5.5rem}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center}
.hero__veil{position:absolute;inset:0;
  background:linear-gradient(90deg,var(--night) 0%,rgba(11,10,31,.88) 42%,rgba(11,10,31,.30) 100%)}
.hero__veil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--bg) 0%,rgba(247,246,251,.55) 9%,transparent 26%)}
.hero__in{position:relative;z-index:2;width:min(1180px,100%);margin:0 auto}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fd);font-weight:700;
  font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pc)}
.hero .kicker{color:#d7d0ff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  padding:.45rem .95rem;border-radius:999px;letter-spacing:.1em;font-size:.78rem}
.pulse{width:7px;height:7px;border-radius:50%;background:#3ee6a6;box-shadow:0 0 0 0 rgba(62,230,166,.6);
  animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(62,230,166,0)}100%{box-shadow:0 0 0 0 rgba(62,230,166,0)}}
.hero h1{font-family:var(--fd);font-weight:700;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(2.1rem,5vw,4.5rem);margin:1.3rem 0 1.2rem;text-wrap:balance}
@keyframes blink{50%{opacity:0}}
.hero .lede{font-size:clamp(1.1rem,2.2vw,1.45rem);color:rgba(255,255,255,.72);max-width:30ch;margin-bottom:2.4rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.hero__cta .link{color:rgba(255,255,255,.72);font-weight:500;border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:2px;text-decoration:none}
.hero__cta .link:hover{color:#fff}
.reveal{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.15s}.reveal.d2{animation-delay:.35s}.reveal.d3{animation-delay:.55s}
@keyframes rise{to{opacity:1;transform:none}}
.cue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:3;display:flex;
  flex-direction:column;align-items:center;gap:.5rem;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.cue i{width:1px;height:34px;background:linear-gradient(180deg,transparent,var(--faint));
  animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}


/* ================================================================
   Steuerung der Tour: Phasen-Pille oben mit Sprungmenü
   ================================================================ */
/* ================================================================
   Abspielleiste — die Tour laeuft von selbst, hier steuert man sie.
   Liegt in der Flaeche der Tour, nicht fest am Fenster.
   ================================================================ */
.pb{position:absolute;left:50%;bottom:clamp(14px,2.4vh,26px);transform:translateX(-50%);z-index:8;
  display:flex;align-items:center}
/* Ein nummerierter Punkt je Baustein. Um den laufenden legt sich ein
   duenner Ring, der seinen Fortschritt zeigt (--p von 0 bis 1). */
.pb__segs{list-style:none;display:flex;align-items:center;gap:15px}
.pb__segs button{position:relative;display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;font-family:var(--fd);font-weight:700;font-size:11.5px;color:var(--muted);
  background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px var(--line);
  transition:color .3s,background .3s,transform .3s,box-shadow .3s}
.pb__segs button:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px #c9c3e6}
.pb__segs .done button{color:var(--ink-2);background:#fff;box-shadow:inset 0 0 0 1.5px #ddd8f0}
.pb__segs .cur button{color:#fff;background:var(--pc);transform:scale(1.14);
  box-shadow:0 8px 18px -8px var(--pc)}
.pb__segs .cur button::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(var(--pc) calc(var(--p,0) * 1turn),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px))}
/* Steht nur am Anfang da und sagt, wie es weitergeht. */
/* Steht neben der Leiste, nicht darueber — oben liegt der Untertitel. */
.pb__hint{position:absolute;right:calc(100% + 1.6rem);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:.35rem;white-space:nowrap;font-family:var(--fd);font-weight:600;
  font-size:.78rem;color:var(--muted);opacity:0;transition:opacity .5s;pointer-events:none}
.pb__hint .ic{width:14px;height:14px;animation:hintNudge 1.8s ease-in-out infinite}
@keyframes hintNudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.pb__hint.show{opacity:1}

/* ================================================================
   TOUR — Scrollstrecke, die Flaeche bleibt stehen
   Ohne JavaScript (kein .js) bleibt alles eine normale lange Seite.
   ================================================================ */
/* Die Tour ist wieder eine Scrollstrecke: die Flaeche bleibt stehen
   (sticky) und das Scrollrad treibt die Animation vor und zurueck.
   Die Gesamthoehe rechnet tour.js aus der Zahl der Bausteine. */
.tour{position:relative}
.tour__anchor{position:absolute;left:0;top:0;width:1px;height:1px}
.pin{position:relative;overflow:hidden}
.js .pin{position:sticky;top:0;height:100vh;height:100dvh}
.pin__bg{position:absolute;inset:0;pointer-events:none}
.pin__blob{position:absolute;right:-10%;top:0;width:75vw;height:100vh;border-radius:45%;filter:blur(90px);opacity:.34;
  background:radial-gradient(circle at 40% 40%,var(--pc),transparent 60%),radial-gradient(circle at 70% 75%,var(--magenta),transparent 58%);
  transition:background 1.2s,transform 1.4s cubic-bezier(.3,.7,.2,1)}
.pin[data-mode="wide"] .pin__blob{transform:translateX(-18vw) scale(1.1)}
.pin__dark{position:absolute;inset:0;opacity:0;transition:opacity .8s;
  background:radial-gradient(80% 60% at 20% 0%,#3b54ff 0%,transparent 60%),radial-gradient(70% 60% at 100% 30%,#ec4899 0%,transparent 55%),
    radial-gradient(90% 70% at 50% 110%,#7b5cff 0%,transparent 60%),#1a1446}
/* Lesbarkeit: links ein weicher Schleier, wenn die Kamera unter den Text fährt */
.pin::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--vx,40vw) + 30px);z-index:4;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(247,246,251,.9) calc(100% - 150px),rgba(247,246,251,0) 100%);transition:opacity .6s}
.pin[data-mode="wide"]::after{opacity:0}

/* ---------------------------------------------------------- 3D-Welt */
.world{position:absolute;inset:0;z-index:3;perspective:2200px;opacity:0}
.no-js .world{display:none}
.cam{position:absolute;left:67vw;top:52vh;width:1000px;height:640px;transform-style:preserve-3d;transform-origin:50% 50%}
.cam.moving{will-change:transform}
.floor{position:absolute;left:-260px;top:-180px;width:1520px;height:1000px;border-radius:50%;transform:translateZ(-110px);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%)}
.floor::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.55;
  background-image:linear-gradient(rgba(107,78,240,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(107,78,240,.16) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
.floor::after{content:"";position:absolute;left:30%;top:28%;width:40%;height:44%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 38%,transparent),transparent);filter:blur(30px);transition:background 1s}

.stage{position:absolute;left:60px;top:95px;width:600px;height:450px}


/* ---------------------------------------------------------- Szenen */
.scenes{position:relative}
.js .scenes{position:absolute;inset:0;z-index:5;pointer-events:none}
.scene{position:relative;padding:5rem clamp(1.25rem,6vw,5rem)}
.js .scene{position:absolute;top:var(--hdr);bottom:0;left:0;width:min(38vw,600px);display:flex;align-items:center;padding:0 0 4rem clamp(1.25rem,6vw,6rem);
  opacity:0;visibility:hidden;transform:translateY(30px);pointer-events:none;
  transition:opacity .5s,transform .7s cubic-bezier(.2,.75,.2,1),visibility .5s}
.js .scene.past{transform:translateY(-30px)}
.js .scene.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.js .scene--wide{width:auto;right:0;justify-content:center;padding:0 clamp(1.25rem,6vw,5rem) 7rem}
.scene__in{width:100%}
.scene--wide .scene__in{width:min(980px,100%);margin:0 auto;text-align:center}
.scene__num{font-family:var(--fd);font-weight:700;font-size:clamp(3rem,5vw,4.6rem);line-height:.9;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px var(--pc)}
/* Als Pille in der Farbe des Bausteins — damit das Kapitel auffaellt
   und nicht als graue Zeile über der Überschrift untergeht. */
.scene .kicker{margin-top:1.1rem;padding:.45rem 1.05rem;border-radius:999px;
  background:color-mix(in srgb,var(--pc) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--pc) 30%,#fff)}
.scene--wide .kicker{color:var(--violet);
  background:color-mix(in srgb,var(--violet) 11%,#fff);
  border-color:color-mix(in srgb,var(--violet) 30%,#fff)}
.more .kicker{color:var(--violet);margin-bottom:1.3rem;padding:.4rem .95rem;border-radius:999px;
  background:color-mix(in srgb,var(--violet) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--violet) 30%,#fff)}
.scene h2{font-family:var(--fd);font-weight:700;letter-spacing:-.045em;line-height:.98;
  font-size:clamp(2.6rem,4.3vw,5rem);margin-top:.8rem;text-wrap:balance}
.scene h2 em{font-style:normal;color:var(--pc)}
.scene__p{margin-top:1.3rem;font-size:clamp(1.05rem,1.3vw,1.22rem);color:var(--ink-2);max-width:min(30ch,100%)}
.scene--wide .scene__p{margin-left:auto;margin-right:auto;max-width:46ch}
.scene--wide h2{font-size:clamp(2.8rem,6.4vw,6.2rem)}
.note{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;font-size:.85rem;color:var(--muted)}
.note .ic{color:var(--pc)}
.addon{display:inline-block;margin-left:.1rem;font-size:.66rem;letter-spacing:.06em;padding:.12rem .5rem;border-radius:999px;
  background:#fff3dd;color:#a35a00;border:1px solid #f7d79c;vertical-align:middle}
.js .scene .kicker,.js .scene h2,.js .scene__p,.js .scene .pick,.js .scene .note,.js .scene .trk,.js .scene .flowx,.js .scene__num{
  opacity:0;transform:translateY(16px);transition:opacity .5s,transform .7s cubic-bezier(.2,.75,.2,1)}
.js .scene.on .scene__num{opacity:1;transform:none}
.js .scene.on .kicker{opacity:1;transform:none;transition-delay:.06s}
.js .scene.on h2{opacity:1;transform:none;transition-delay:.12s}
.js .scene.on .scene__p{opacity:1;transform:none;transition-delay:.22s}
.js .scene.on .pick,.js .scene.on .note,.js .scene.on .flowx{opacity:1;transform:none;transition-delay:.32s}
.js .scene.on .trk{opacity:1;transform:none;transition-delay:.4s}

.pick{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.goal,.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;font-weight:600;font-size:.95rem;transition:border-color .2s,background .2s,color .2s,transform .2s}
.goal .ic{font-size:1.1rem;color:var(--pc)}
.goal:hover,.chip:hover{border-color:var(--pc);transform:translateY(-1px)}
.goal[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--pc);border-color:var(--pc);color:#fff}
.goal[aria-pressed="true"] .ic{color:#fff}
.chip{font-size:.88rem;padding:.48rem .9rem}
.chip--more{border-style:dashed;color:var(--muted);cursor:default;background:transparent}
.chip--more:hover{transform:none;border-color:var(--line)}

.trk{list-style:none;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.5rem;width:min(1040px,100%);margin:2.4rem auto 0}
.slot{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;padding:.65rem .3rem .6rem;border-radius:14px;
  border:1.5px dashed #d6d2ea;background:rgba(255,255,255,.6);color:var(--faint);transition:background .5s,border-color .5s,color .5s}
.slot__ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--line-2);font-size:16px;transition:background .5s,color .5s}
.slot__t{font-family:var(--fd);font-weight:600;font-size:.72rem;line-height:1.15;hyphens:auto}
.slot__s{font-size:.64rem;line-height:1.2;color:var(--muted);min-height:.8em;max-width:100%;hyphens:auto;overflow-wrap:anywhere}
.slot.done{border-style:solid;border-color:transparent;background:#fff;color:var(--ink);box-shadow:0 6px 18px -10px rgba(20,17,46,.25)}
.slot.done .slot__ic{background:var(--c);color:#fff}
.slot.next{border:2px dashed var(--magenta);color:var(--magenta);background:#fff;animation:want 1.8s ease-in-out infinite}
@keyframes want{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.35)}50%{box-shadow:0 0 0 8px rgba(236,72,153,0)}}

.flowx{margin:2.4rem auto 0;display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.4rem);flex-wrap:wrap}
.flowx span{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.3rem;border-radius:18px;background:#fff;border:1px solid var(--line);
  font-family:var(--fd);font-weight:600;font-size:1.05rem;box-shadow:0 14px 30px -18px rgba(20,17,46,.35)}
.flowx span .ic{font-size:1.4rem;color:var(--violet)}
.flowx span:last-child{background:var(--grad);color:#fff;border:0}
.flowx span:last-child .ic{color:#fff}
.flowx > .ic{font-size:1.5rem;color:var(--faint)}

/* ================================================================
   Abschluss — vom neuen Vorschlag. Steht da, wo frueher die
   Schluss-Szene der Tour stand.
   ================================================================ */
.end{position:relative;background:radial-gradient(90% 70% at 50% 0%,#2a1f63,transparent 70%),var(--night);
  color:#fff;text-align:center;padding:clamp(4rem,9vh,6.5rem) clamp(1.1rem,4vw,3rem);
  scroll-margin-top:var(--hdr)}
.end__in{width:min(640px,100%);margin:0 auto}
.end h2{font-family:var(--fd);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(2rem,4.6vw,3.3rem)}
.end .sub{color:rgba(255,255,255,.72);font-size:clamp(1.02rem,2vw,1.2rem);margin-top:1rem}
.cta{margin:2rem auto 0;width:min(640px,100%);display:flex;gap:.6rem;padding:.5rem;border-radius:20px;
  background:#fff;box-shadow:0 30px 70px -24px rgba(10,6,40,.8)}
.cta label{position:absolute;left:-9999px}
.cta__f{flex:1;display:flex;align-items:center;gap:.6rem;padding:0 .9rem;color:var(--muted)}
.cta__f .ic{font-size:1.2rem;color:var(--violet)}
.cta input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:1.08rem;color:var(--ink);
  padding:.9rem 0;background:none}
.cta input::placeholder{color:#a5a2c0}
.cta button{font-family:var(--fd);font-weight:700;font-size:1.02rem;color:#fff;background:var(--grad);
  border-radius:14px;padding:.95rem 1.4rem;white-space:nowrap;
  box-shadow:0 12px 26px -10px rgba(107,78,240,.8);transition:transform .2s,box-shadow .2s}
.cta button:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(107,78,240,.9)}
.cta:focus-within{box-shadow:0 0 0 4px rgba(255,255,255,.35),0 30px 70px -24px rgba(10,6,40,.8)}
.cta__err{margin-top:.7rem;font-weight:600;color:#ffd1ea}
.trust{list-style:none;margin:1.3rem auto 0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 1.4rem;font-size:.92rem;color:rgba(255,255,255,.85)}
.trust li{display:flex;align-items:center;gap:.4rem}
.trust .ic{color:#9ff3d6;font-size:1.05rem;stroke-width:2.4}
.end__buy{display:inline-block;margin-top:1.4rem;color:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;text-decoration:none}
.end__buy:hover{color:#fff}
.end__flex{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.45);font-size:.95rem}

/* ============================================================
   Das Website-Modell (600 × 450 im Kamera-Raum)
   ============================================================ */
.br{position:absolute;inset:0;border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:0 2px 6px rgba(20,17,46,.06),0 50px 90px -30px rgba(40,28,110,.45);border:1px solid #e9e6f5}
/* Lichtreflex auf dem Glas — wandert mit der Maus.
   ------------------------------------------------------------------
   Hier stand mix-blend-mode:screen, und das war die Ursache dafuer, dass
   auf dem iPhone im Browserfenster ausser der gezeichneten Website
   nichts zu sehen war — keine Mattscheibe, kein Avatar, keine
   Sprechblasen, kein Chat, kein Mauszeiger.

   Eine Mischung zwingt den Browser, alles unter dem Element zu einer
   Gruppe zusammenzurechnen. Diese Gruppe liegt hier in .br
   (overflow:hidden, border-radius) in .cam (preserve-3d) unter .world
   (perspective). Auf diesem Pfad verliert WebKit alles ausser der
   untersten Ebene: .site bleibt stehen, alles danach faellt weg. Die
   Geometrie stimmt dabei weiterhin — deshalb meldete die Ferndiagnose
   "sichtbar, Deckkraft 1, 408x284" fuer etwas, das gar nicht gezeichnet
   wurde, und deshalb haben meine Eingriffe an .ov nichts geholfen: das
   Problem lag nie dort.

   Auf weissem Grund sieht ein weisser Verlauf mit "screen" praktisch
   gleich aus wie ohne. Die Mischung ist also ersatzlos weg.

   Auf dem Handy faellt der Reflex ganz weg: er folgt der Maus, die es
   dort nicht gibt, und eine Gefahrenquelle weniger im Modell ist mehr
   wert als eine Spiegelung, die niemand bedient. */
.br::after{content:"";position:absolute;inset:0;z-index:30;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 47%,rgba(255,255,255,.08) 52%,transparent 60%);
  background-size:320% 100%;background-position:calc(50% - var(--px,0) * 35%) 0}
@media (max-width:980px){ .br::after{display:none} }
.br__bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f3f1fa;border-bottom:1px solid #e9e6f5}
.br__bar>i{width:9px;height:9px;border-radius:50%;background:#dcd8ec}
.br__url{margin-left:10px;flex:1;max-width:300px;height:20px;border-radius:7px;background:#fff;display:flex;align-items:center;
  gap:5px;padding:0 8px;font-size:10.5px;color:#7b7899;white-space:nowrap;overflow:hidden}
.br__url .ic{font-size:10px;color:#10b981}
.br__url b{font-weight:600;color:#3c3960}
.br__page{position:absolute;left:0;right:0;top:34px;bottom:0;overflow:hidden}
.site{position:absolute;left:0;top:0;width:336px;bottom:0;padding:12px 16px}
.site__nav{display:flex;align-items:center;justify-content:space-between}
.site__logo{display:flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:700;font-size:12px;color:#2b2a33;white-space:nowrap;overflow:hidden;max-width:220px}
.site__logo i{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--sa,#c8a27a),#2b2a33);flex:none}
.site__menu{display:flex;gap:7px}
.site__menu i{width:26px;height:5px;border-radius:3px;background:#e6e2da}
.site__h{margin-top:12px;font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:-.02em;color:#2b2a33;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site__sub{font-size:10.5px;color:#8b8579;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site__art{margin-top:9px;width:304px;height:118px;border-radius:12px;overflow:hidden;position:relative}
.site__art svg{position:absolute;inset:0}
.site__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.card{position:relative;border:1px solid #ece8e1;border-radius:10px;padding:7px 8px;background:#fff;transition:box-shadow .4s,border-color .4s,transform .4s;min-width:0}
.card i{display:block;height:34px;border-radius:6px}
.card b{display:block;margin-top:5px;font-family:var(--fd);font-size:11px;color:#2b2a33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card small{display:block;font-size:9.5px;color:#8b8579;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.hot{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(236,72,153,.18),0 10px 24px -12px rgba(236,72,153,.6);transform:translateY(-2px)}
.site__more{margin-top:10px;display:grid;gap:5px}
.site__more i{display:block;height:6px;border-radius:3px;background:#f0ece6}

.chat{position:absolute;right:10px;top:10px;width:240px;height:342px;border-radius:16px;background:#fff;
  border:1px solid #ebe8f6;box-shadow:0 22px 50px -20px rgba(40,28,110,.45);display:flex;flex-direction:column;overflow:hidden;
  transform-origin:calc(100% - 22px) calc(100% + 30px);transition:transform .55s cubic-bezier(.3,1.2,.4,1),opacity .4s;z-index:4}
.stage.closed .chat{transform:scale(.2);opacity:0}
.chat__hd{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid #f0eef8;background:linear-gradient(180deg,#f6f4ff,#fff)}
.chat__face{width:28px;height:28px;border-radius:50%;flex:none;background-repeat:no-repeat;
  background-color:#eceafa;background-size:auto 250%;background-position:50% 5%;
  background-image:url(../assets/Aveloa-Bot.png);transition:opacity .3s;
  display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:10px;color:#fff}
.chat__face.swap{opacity:0}
.chat__hd b{display:block;font-family:var(--fd);font-size:11.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.chat__hd small{display:flex;align-items:center;gap:4px;font-size:9.5px;color:#10b981;line-height:1.2}
.chat__hd small::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.chat__lang{margin-left:auto;font-family:var(--fd);font-weight:700;font-size:9.5px;padding:3px 6px;border-radius:6px;background:#f0eefe;color:var(--violet)}
.chat__log{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px 10px 6px;overflow:hidden}
.chat__in{display:flex;align-items:center;gap:6px;margin:0 8px 8px;padding:7px 8px 7px 10px;border-radius:12px;border:1px solid #ebe8f6;font-size:10.5px;color:#9a97b5}
.chat__in span:first-child{flex:1}
.chat__in .ic{font-size:13px;color:var(--violet)}
.chat__send{width:22px;height:22px;border-radius:7px;background:var(--grad);display:grid;place-items:center;color:#fff}
.chat__send .ic{color:#fff;font-size:12px}
.wave{display:none;align-items:center;gap:2px;height:14px}
.wave i{width:2.5px;border-radius:2px;background:var(--violet);animation:wv 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}.wave i:nth-child(4){animation-delay:.36s}
.wave i:nth-child(5){animation-delay:.48s}.wave i:nth-child(6){animation-delay:.6s}.wave i:nth-child(7){animation-delay:.72s}
@keyframes wv{0%,100%{height:3px}50%{height:14px}}
.stage.voice .wave{display:flex}
.stage.voice .chat__in{border-color:var(--violet);box-shadow:0 0 0 3px rgba(107,78,240,.12)}

/* Nachrichten: erscheinen, sobald die Animation ihre Stelle erreicht */
.m{display:none;max-width:88%;padding:7px 9px;border-radius:12px;font-size:10.5px;line-height:1.45}
.m.in{display:block;animation:pop .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.m--you{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.m--bot{align-self:flex-start;background:#f3f1fb;color:var(--ink);border-bottom-left-radius:4px}
.m--human{align-self:flex-start;background:#e7f8f1;color:#0f3d2d;border-bottom-left-radius:4px;border:1px solid #bfeedb}
.m--human::before{content:attr(data-who);display:block;font-weight:700;font-size:9px;color:#059669;margin-bottom:2px}
.m--sys{align-self:center;background:none;color:#059669;font-size:9.5px;font-weight:600;padding:2px 6px}
.m b{font-weight:700}
.m sup{color:var(--violet);font-weight:700;font-size:8px}
.m .src{display:flex;align-items:center;gap:4px;margin-top:5px;font-size:9px;color:var(--violet);font-weight:600}
.m .src .ic{font-size:10px}
.m .opts{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.m .opts i{font-style:normal;font-size:9.5px;font-weight:600;padding:3px 8px;border-radius:999px;border:1px solid #d9d4f3;background:#fff;transition:all .3s}
.m .opts i.sel{background:var(--violet);color:#fff;border-color:var(--violet)}
.m--voice .ic{display:inline;vertical-align:-2px;font-size:11px;margin-right:2px}
.m--win{background:linear-gradient(135deg,#ecfdf5,#fff);border:1px solid #a7f3d0;align-self:stretch;max-width:none;gap:8px;align-items:center}
.m--win.in{display:flex}
.m--win .wi{width:30px;height:30px;border-radius:10px;background:#10b981;color:#fff;display:grid;place-items:center;font-size:16px;flex:none}
.m--win b{display:block;font-family:var(--fd);font-size:11.5px;color:#065f46}
.m--win small{font-size:9.5px;color:#047857}
.dots{display:flex;gap:3px;padding:2px 0}
.dots i{width:5px;height:5px;border-radius:50%;background:#a9a5c7;animation:td 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes td{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

.launcher{position:absolute;right:14px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-size:20px;box-shadow:0 12px 26px -10px rgba(107,78,240,.8);z-index:3}
.teaser{position:absolute;right:14px;bottom:66px;width:220px;padding:10px 11px;border-radius:14px 14px 4px 14px;background:#fff;
  border:1px solid #ebe8f6;box-shadow:0 20px 40px -16px rgba(40,28,110,.5);font-size:10.5px;line-height:1.45;z-index:5;
  opacity:0;transform:translateY(10px) scale(.95);transform-origin:100% 100%;transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}
.teaser.in{opacity:1;transform:none}
.teaser b{display:flex;align-items:center;gap:5px;font-family:var(--fd);font-size:10px;color:var(--violet);margin-bottom:3px}
.teaser .badge{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:var(--magenta);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.hushnote{position:absolute;right:66px;bottom:22px;font-size:10px;font-weight:600;color:#475569;background:#fff;border:1px dashed #94a3b8;
  border-radius:999px;padding:4px 9px;opacity:0;transform:translateX(8px);transition:opacity .5s,transform .5s;z-index:5}
.hushnote.in{opacity:1;transform:none}
/* ---- 1 · Sie meldet sich neben ihrem Kopf ----------------------
   Zwei Blasen rechts vom Avatar: erst der Stand ihrer Arbeit, dann
   der Befund. Das frostige Feld geht dafuer ueber die ganze Seite —
   sonst laegen die Blasen auf der gezeichneten Beispielseite. In
   diesem Kapitel ist das Chatfenster ohnehin zu. */
#ovKnow{width:auto;right:0}
.say{position:absolute;left:252px;width:310px;padding:10px 12px;border-radius:14px;z-index:3;
  background:#fff;border:1px solid #e9e6f5;box-shadow:0 14px 32px -12px rgba(26,20,60,.3);
  opacity:0;transform:translateX(-10px) scale(.96);transform-origin:0 50%;
  transition:opacity .4s,transform .55s cubic-bezier(.3,1.3,.5,1)}
.say.in{opacity:1;transform:none}
/* Der Zipfel zeigt auf sie — die obere Blase von unten, die untere
   von oben, denn sie steht zwischen den beiden. Die Ecke daneben ist
   knapp gerundet, damit es als Sprechblase liest. */
.say::before{content:"";position:absolute;left:-6px;width:12px;height:12px;
  background:#fff;border-left:1px solid #ddd7f0;border-bottom:1px solid #ddd7f0;
  transform:rotate(45deg);border-radius:0 0 0 3px}
#say1{top:140px;border-bottom-left-radius:4px}
#say1::before{bottom:9px}
#say2{top:216px;border-top-left-radius:4px}
#say2::before{top:11px}
.say__r{display:flex;align-items:center;gap:8px;margin:0;
  font-family:var(--fd);font-weight:600;font-size:10.5px;line-height:1.35;color:#14112e;
  opacity:0;transform:translateY(5px);transition:opacity .35s,transform .45s cubic-bezier(.3,1.3,.5,1)}
.say__r.in{opacity:1;transform:none}
.say__r+.say__r{margin-top:7px}
.say__r .ic{width:14px;height:14px;stroke-width:2.6}
.say__ok{color:#0ea371}

/* Solange sie liest, laufen drei Punkte — danach steht der Haken. */
.say__busy{display:none;align-items:center;justify-content:center;gap:2px;width:14px;flex:none}
#say1:not(.fertig) .say__busy{display:inline-flex}
#say1:not(.fertig) #sayStudy .say__ok{display:none}
.say__busy i{width:3px;height:3px;border-radius:50%;background:var(--indigo);animation:sayDot 1.1s infinite}
.say__busy i:nth-child(2){animation-delay:.16s}
.say__busy i:nth-child(3){animation-delay:.32s}
@keyframes sayDot{0%,55%,100%{opacity:.22}25%{opacity:1}}

/* Jeder Befund kommt mit der Handlung, die ihn aus der Welt schafft. */
.say--find .say__r span{flex:1;white-space:nowrap}
.say--find .say__r[data-f="0"] .ic{color:var(--indigo)}
.say--find .say__r[data-f="1"] .ic{color:#d97706}
.say--find .say__r b{flex:none;padding:4px 9px;border-radius:999px;background:var(--grad);
  color:#fff;font-family:var(--fd);font-weight:600;font-size:9px;white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(107,78,240,.8)}

@media (prefers-reduced-motion:reduce){
  .say,.say__r{transition:none}
  .say__busy i{animation:none}
}

/* Überlagerungen auf der Seite
   ------------------------------------------------------------------
   display statt opacity, und das ist kein Geschmack, sondern ein Befund.

   Die Ferndiagnose auf einem echten iPhone sagte: die Flaeche traegt
   .in, ist sichtbar, Deckkraft 1, liegt bei -38,90 und misst 408x284 —
   gezeichnet wurde sie trotzdem nicht. Also kein Logik-, kein
   Layoutfehler, sondern Komposition.

   Der Grund: eine Deckkraft zwischen 0 und 1 macht aus dem Element eine
   eigene Ebene. Liegt die in .br__page (overflow:hidden) in .br
   (overflow:hidden) in .cam (preserve-3d) unter .world (perspective),
   verwirft WebKit sie und baut sie nicht wieder auf. Der berechnete Stil
   bleibt dabei "sichtbar", nur das Bild fehlt. Auf iOS trifft das alle
   Browser: Chrome und Brave laufen dort zwingend mit WebKit.

   display:none erzeugt keine Ebene. Der Wechsel loest einen vollen
   Neuaufbau aus, und damit kann nichts Altes stehenbleiben.

   Die Einblendung fehlt dadurch nicht: die ganze Buehne blendet ohnehin
   ueber worldFade auf, und prepare() schaltet die Flaeche schon vor dem
   Vorspann ein — beim Umschalten ist die Buehne noch unsichtbar. */
.ov{position:absolute;left:0;top:0;bottom:0;width:336px;display:none;z-index:2}
.ov.in{display:block}
.ov--frost{background:rgba(250,249,254,.93)}
.core{position:absolute;left:118px;top:170px;width:100px;height:100px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#7d8dff,#2f44d0 70%);color:#fff;font-size:34px;
  box-shadow:0 0 0 10px rgba(47,68,208,.08),0 20px 50px -14px rgba(47,68,208,.7)}
.core.hit{animation:corePulse 1s cubic-bezier(.3,1.5,.5,1)}
@keyframes corePulse{0%{transform:scale(1)}40%{transform:scale(1.18);box-shadow:0 0 0 26px rgba(47,68,208,.12),0 20px 50px -14px rgba(47,68,208,.7)}100%{transform:scale(1)}}
.core__lbl{position:absolute;left:0;right:0;top:282px;text-align:center;font-family:var(--fd);font-weight:600;font-size:12px;color:#14112e}
.core__lbl small{display:block;font-family:var(--fb);font-weight:500;font-size:10px;color:#67648a}
.flow{position:absolute;inset:0;width:336px;height:416px}
.flow path{fill:none;stroke:url(#flowGrad);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.node{position:absolute;display:flex;align-items:center;gap:7px;padding:7px 11px 7px 7px;border-radius:999px;background:#fff;
  border:1px solid #e3dff3;font-size:10.5px;font-weight:600;color:#3c3960;box-shadow:0 8px 18px -10px rgba(40,28,110,.4);
  opacity:0;transform:scale(.7);transition:opacity .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.node.in{opacity:1;transform:none}
.node i{width:20px;height:20px;border-radius:50%;background:var(--violet);color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center}
.node--1{left:26px;top:54px}.node--2{left:178px;top:128px}.node--3{left:24px;top:214px}
.node--goal{left:118px;top:300px;padding:10px 16px 10px 10px;background:var(--grad);color:#fff;border:0;font-size:12px;box-shadow:0 18px 36px -12px rgba(123,92,255,.8)}
.node--goal i{width:30px;height:30px;background:rgba(255,255,255,.22);font-size:16px}
.node--goal small{display:block;font-size:9px;font-weight:600;opacity:.8;letter-spacing:.06em;text-transform:uppercase}
.node--goal.bump{animation:bump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(.85)}100%{transform:scale(1)}}
.cursor{position:absolute;left:0;top:0;width:18px;height:22px;z-index:3;opacity:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));transition:opacity .3s}
.cursor.in{opacity:1}
.heat{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(236,72,153,.45),transparent 70%);opacity:0;transform:scale(.4);transition:opacity .8s,transform 1s}
.heat.in{opacity:1;transform:none}
.big97{position:absolute;left:0;right:0;top:118px;text-align:center}
.big97 b{display:block;font-family:var(--fd);font-weight:700;font-size:118px;line-height:.9;letter-spacing:-.05em;
  background:linear-gradient(120deg,#06b6d4,#3b54ff 55%,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.big97 small{display:block;font-family:var(--fd);font-weight:700;font-size:26px;letter-spacing:-.01em;color:#14112e;margin-top:2px}
.big97 em{display:block;font-style:normal;font-size:10.5px;color:#67648a;margin-top:2px}

/* ============================================================
   Satelliten — schweben in echter Tiefe (translateZ) neben dem Modell
   ============================================================ */
.doc3{position:absolute;left:164px;top:332px;width:128px;height:34px;border-radius:10px;background:#fff;border:1px solid #e3dff3;
  display:flex;align-items:center;gap:7px;padding:0 9px;font-size:10px;font-weight:600;color:#3c3960;white-space:nowrap;overflow:hidden;
  box-shadow:0 14px 30px -12px rgba(40,28,110,.45);opacity:0;pointer-events:none}
.doc3 .ic{font-size:14px;color:var(--indigo)}
.sat{position:absolute;opacity:0;pointer-events:none;transform:translate3d(0,28px,var(--z,80px)) rotateY(var(--ry,0deg));
  transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.sat.in{opacity:1;transform:translate3d(0,0,var(--z,80px)) rotateY(var(--ry,0deg))}
/* Satelliten schweben sanft — jeder in seinem eigenen Takt */
@media (prefers-reduced-motion:no-preference){
  .sat.in{animation:bob 7s ease-in-out infinite}
  #sPhone.in,#sErp.in,#sThumb.in,#sModes.in{animation-duration:8.5s;animation-delay:-3s}
  #sIns.in{animation-delay:-5s}
}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.sat__lbl{display:flex;align-items:center;gap:6px;margin-top:10px;justify-content:center;font-size:10px;font-weight:600;color:#059669}
.sat__lbl .ic{font-size:14px}
#sSig{left:468px;top:150px;width:196px}
#sPhone{left:705px;top:105px;width:160px}
#sCrm{left:690px;top:115px;width:300px}
#sErp{left:690px;top:290px;width:300px}
#sCo{left:690px;top:92px;width:300px}
#sThumb{left:690px;top:182px;width:300px}
#sIns{left:690px;top:352px;width:300px}
#sRival{left:690px;top:125px;width:300px}
#sModes{left:690px;top:320px;width:300px}

.sig{padding:12px 13px;border-radius:16px;background:#17133a;color:#fff;box-shadow:0 30px 60px -20px rgba(20,17,46,.7)}
.sig__hd{display:flex;align-items:center;gap:6px;font-family:var(--fd);font-weight:600;font-size:11px}
.sig__hd i{width:7px;height:7px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 8px #ff4d6d;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.sig ul{list-style:none;margin-top:7px;display:grid;gap:5px}
.sig li{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:rgba(255,255,255,.65);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s}
.sig li.in{opacity:1;transform:none}
.sig li b{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meter{margin-top:9px;font-size:9.5px;color:rgba(255,255,255,.65)}
.meter span{display:flex;justify-content:space-between}
.meter span b{color:#ff8ac5}
.meter div{height:6px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:4px;overflow:hidden}
.meter div i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#7b5cff,#ec4899)}

.phone{position:relative;width:158px;height:318px;border-radius:26px;background:#14112e;padding:7px;box-shadow:0 40px 70px -24px rgba(20,17,46,.75)}
.phone.ring{animation:ring .45s 2}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.phone__scr{position:relative;height:100%;border-radius:20px;background:linear-gradient(180deg,#f6f4ff,#fff);overflow:hidden;padding:20px 9px 9px}
.phone__scr::before{content:"";position:absolute;left:50%;top:6px;width:44px;height:9px;margin-left:-22px;border-radius:6px;background:#14112e}
.phone__app{font-family:var(--fd);font-weight:700;font-size:11px;display:flex;align-items:center;gap:5px;padding:2px 2px 8px}
.phone__app i{width:16px;height:16px;border-radius:5px;background:var(--grad)}
.ncard{border-radius:12px;background:#fff;border:1px solid #f1c7d8;padding:8px;box-shadow:0 10px 20px -12px rgba(236,72,153,.5);
  opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1),border-color .4s,background .4s}
.phone.alert .ncard{opacity:1;transform:none}
.ncard__t{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:#be185d}
.ncard__t i{width:6px;height:6px;border-radius:50%;background:#ec4899;animation:blink 1s infinite}
.ncard p{font-size:9px;line-height:1.4;color:#3c3960;margin-top:4px}
.ncard__btns{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:7px}
.ncard__btns span{font-size:8px;font-weight:700;text-align:center;padding:5px 2px;border-radius:7px;background:#f3f1fb;color:#3c3960;white-space:nowrap;overflow:hidden}
.ncard__btns span.go{background:var(--grad);color:#fff;position:relative}
.phone.tap .ncard__btns span.go::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;
  background:rgba(255,255,255,.7);animation:tapr .6s ease-out forwards}
@keyframes tapr{from{transform:scale(.2);opacity:1}to{transform:scale(1.6);opacity:0}}
.phone.taken .ncard{border-color:#a7f3d0;background:#ecfdf5}
.phone.taken .ncard__t{color:#047857}
.phone.taken .ncard__t i{background:#10b981;animation:none}
.ncard__ok{display:none;font-size:9px;font-weight:700;color:#047857;margin-top:6px}
.phone.taken .ncard__ok{display:block}
.phone.taken .ncard__btns{display:none}
.phone__more{margin-top:9px;display:grid;gap:6px}
.phone__more div{height:30px;border-radius:9px;background:#f3f1fb}

.sys{padding:11px 12px;border-radius:16px;background:#fff;border:1px solid #e3dff3;box-shadow:0 30px 60px -24px rgba(40,28,110,.5)}
.sys__hd{display:flex;align-items:center;gap:7px;font-family:var(--fd);font-weight:600;font-size:12px}
.sys__hd .ic{font-size:16px;color:#7c3aed}
.sys--erp .sys__hd .ic{color:#0e7490}
.sys__hd em{margin-left:auto;font-style:normal;font-family:var(--fb);font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:#f3f1fb;color:#6b4ef0}
.sys ul{list-style:none;margin-top:8px;display:grid;gap:5px}
.sys li{display:flex;align-items:center;gap:7px;font-size:10px;color:#67648a;padding:7px 9px;border-radius:9px;background:#faf9fe;
  transition:background .4s,color .4s,box-shadow .4s;min-width:0}
.sys li b{color:#3c3960;font-weight:600;white-space:nowrap}
.sys li em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sys li span:last-child:not(.dot){margin-left:auto;font-weight:600;white-space:nowrap}
.sys li.hot{background:#ecfeff;color:#0e7490;box-shadow:inset 0 0 0 1px #a5f3fc}
.sys li.new{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1),background .4s}
.sys li.new.in{opacity:1;transform:none;background:#f5f3ff;color:#5b21b6;box-shadow:inset 0 0 0 1px #ddd6fe}
.sys li .dot{width:6px;height:6px;border-radius:50%;background:#cbd5e1;flex:none}
.sys li.hot .dot{background:#06b6d4;box-shadow:0 0 8px #06b6d4}
.sys li.new .dot{background:#7c3aed;box-shadow:0 0 8px #7c3aed}

.radar{position:absolute;left:28px;top:28px;width:0;height:0;z-index:3;pointer-events:none}
.radar i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px solid #f59e0b;opacity:0}
.sat.in .radar i{animation:ping 2.2s ease-out infinite}
.sat.in .radar i:nth-child(2){animation-delay:.7s}.sat.in .radar i:nth-child(3){animation-delay:1.4s}
@keyframes ping{0%{transform:scale(.3);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.coCard{position:relative;padding:11px;border-radius:16px;background:#fff;border:1px solid #f6d79e;display:flex;align-items:center;gap:9px;
  box-shadow:0 30px 60px -24px rgba(217,119,6,.6)}
.coCard__logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff;
  font-family:var(--fd);font-weight:700;font-size:13px;display:grid;place-items:center;flex:none}
.coCard>span:nth-child(2){flex:1;min-width:0}
.coCard b{display:block;font-family:var(--fd);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coCard small{display:block;font-size:9.5px;color:#67648a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coCard em{position:absolute;right:10px;top:-9px;font-style:normal;font-size:8.5px;font-weight:700;color:#a35a00;background:#fff3dd;
  border:1px solid #f6d79e;border-radius:999px;padding:3px 8px;white-space:nowrap}
.thumb{position:relative;height:150px;border-radius:14px;background:#fff;border:1px solid #e3dff3;overflow:hidden;box-shadow:0 30px 60px -26px rgba(40,28,110,.45)}
.thumb__bar{height:22px;background:#f3f1fa;display:flex;align-items:center;padding:0 9px;font-size:9px;color:#7b7899;gap:4px}
.thumb__body{padding:10px;display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
.thumb__body .sk{background:#f1eef8}
.scanline{position:absolute;left:0;right:0;top:22px;height:2px;background:linear-gradient(90deg,transparent,#f59e0b,transparent);box-shadow:0 0 14px #f59e0b;opacity:0}
.ins{display:flex;flex-wrap:wrap;gap:6px}
.ins>span{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #f6d79e;
  color:#7c4400;box-shadow:0 14px 26px -16px rgba(217,119,6,.6);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .35s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.ins>span.in{opacity:1;transform:none}
.ins>span .ic{font-size:11px;color:#d97706}

.rival{padding:12px;border-radius:16px;background:#fff;border:1.5px solid #fecaca;box-shadow:0 30px 60px -24px rgba(220,38,38,.5)}
.rival__row{display:flex;align-items:center;gap:9px}
.rival__row>span:nth-child(2){flex:1;min-width:0}
.rival__logo{width:36px;height:36px;border-radius:10px;background:#334155;color:#fff;font-family:var(--fd);font-weight:700;font-size:13px;display:grid;place-items:center;flex:none}
.rival b{display:block;font-family:var(--fd);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rival small{display:block;font-size:9.5px;color:#67648a}
.rival__tag{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:700;color:#b91c1c;background:#fee2e2;border-radius:999px;padding:4px 8px;
  transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.3,1.8,.5,1),opacity .3s;flex:none}
.rival__tag.in{transform:none;opacity:1}
.rival__list{list-style:none;margin-top:10px;display:grid;gap:5px;font-size:10.5px;color:#475569}
.rival__list li{display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .4s}
.rival__list li.in{opacity:1}
.rival__list .ic{color:#dc2626;font-size:12px}
.modes{padding:11px;border-radius:16px;background:#fff;border:1px solid #e3dff3;box-shadow:0 30px 60px -26px rgba(40,28,110,.45)}
.modes small{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9a97b5}
.modes div{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}
.modes span{font-size:10.5px;font-weight:600;text-align:center;padding:8px 0;border-radius:9px;border:1px solid #e3dff3;color:#475569;transition:all .4s}
.modes span.on{background:#334155;color:#fff;border-color:#334155}
.shield{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;font-weight:600;color:#334155;opacity:0;transition:opacity .5s}
.shield.in{opacity:1}
.shield .ic{font-size:18px;color:#059669}

.beam{position:absolute;left:600px;top:100px;width:120px;height:420px;overflow:visible;transform:translateZ(70px);opacity:0;transition:opacity .4s;pointer-events:none}
.beam.in{opacity:1}
.beam__line{fill:none;stroke:rgba(107,78,240,.6);stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px rgba(107,78,240,.55))}
.beam__dot{fill:none;stroke:#06b6d4;stroke-width:6;stroke-linecap:round;stroke-dasharray:.04 1.2;stroke-dashoffset:.04;opacity:0}

.hello3{position:absolute;left:var(--x);top:var(--y);font-family:var(--fd);font-weight:700;font-size:var(--fs,20px);color:var(--hc,#0891b2);
  white-space:nowrap;opacity:0;pointer-events:none;text-shadow:0 10px 30px rgba(255,255,255,.9)}

/* ---------------------------------------------------- Nach der Tour: Rechnung & Fragen */
.more{width:min(1120px,100%);margin:0 auto;padding:clamp(4rem,8vw,6.5rem) clamp(1.1rem,4vw,2.5rem);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start;scroll-margin-top:var(--hdr)}
.more h2{font-family:var(--fd);font-weight:700;letter-spacing:-.03em;line-height:1.08;font-size:clamp(1.7rem,3vw,2.5rem)}
/* Fließtext statt Kacheln — die sahen wie Knöpfe aus und luden zum
   Klicken ein, obwohl es nichts zu klicken gibt. */
.calc{margin-top:1.4rem}
.calc__p{font-size:1.05rem;line-height:1.7;color:var(--ink-2);margin-bottom:.9rem;max-width:46ch}
.calc__p b{font-family:var(--fd);font-weight:700;font-size:1.25rem;color:var(--ink);
  white-space:nowrap;letter-spacing:-.01em}
.calc__p b.calc__us{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc__old{display:grid;gap:.8rem}
.calc__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border-radius:18px;background:#fff;border:1px solid var(--line)}
.calc__row b{display:block;font-family:var(--fd);font-size:1.05rem}
.calc__row small{color:var(--muted);font-size:.86rem}
.calc__row strong{font-family:var(--fd);font-size:1.35rem;white-space:nowrap}
.calc__row.us{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
.calc__row.us strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc__note{font-size:.82rem;color:var(--faint);margin-top:1.2rem}
.faq{display:grid;gap:.7rem}
.faq details{border-radius:16px;background:#fff;border:1px solid var(--line);padding:0 1.2rem;transition:box-shadow .3s}
.faq details[open]{box-shadow:0 16px 36px -22px rgba(20,17,46,.4)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 0;
  font-family:var(--fd);font-weight:600;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--violet);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.1rem;color:var(--ink-2)}
.again{text-align:center;padding:0 1.1rem clamp(4rem,8vw,6rem)}
.again h2{font-family:var(--fd);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.6rem,3vw,2.4rem)}
.again p{color:var(--muted);margin:.7rem auto 1.6rem;max-width:44ch}

/* ---------------------------------------------------- Mobil */
@media (max-width:980px){
  /* Die Buehne wird auf dem Handy flach gezeichnet.
     ------------------------------------------------------------------
     Der Grund ist nicht Geschmack, sondern ein Fehler, den fuenf
     Reparaturversuche nicht umgehen konnten: in der Kette aus
     perspective (.world), preserve-3d (.cam) und zwei overflow:hidden
     (.br, .br__page) rastert WebKit den Inhalt des Browserfensters
     einmal und zeichnet ihn danach nicht neu. Alles, was spaeter
     dazukommt — Mattscheibe, Avatar, Sprechblasen, Chat, Mauszeiger —
     bleibt unsichtbar, obwohl Geometrie und berechneter Stil stimmen.
     Nachgewiesen auf dem Geraet: unter ?diag=1, wo laufend Stile
     gelesen und Knoten eingehaengt werden, erscheint alles.

     Ohne perspective und ohne preserve-3d gibt es diese Textur nicht,
     und damit auch nichts, was veralten koennte.

     Verloren geht die Neigung des Modells. Auf einem Telefon ist die
     ohnehin kaum zu sehen, und ein flaches, vollstaendiges Bild ist
     mehr wert als ein gekipptes, halbes. Am Desktop bleibt alles. */
  .world{perspective:none}
  .cam{transform-style:flat}

  /* Weiter nach rechts als am Desktop: auf einem hochkanten Schirm
     ist nur ein schmaler Streifen des Bildes zu sehen, und bei 66 %
     lag die Frau komplett ausserhalb. Bei 80 % ist sie rechts im
     Bild, waehrend der Titel auf dem dunklen Fenster bleibt. */
  .hero__bg{object-position:80% center}
  /* Auf dem Handy zaehlt jeder Punkt Hoehe: ein Kapitel soll auf einen
     Schirm passen, ohne dass man darin scrollen muss. Weg kommt alles,
     was nur schmueckt — der Fortschrittsstrich ganz oben, die Augenbraue
     ueber dem Titel und die Knoepfe unter dem Text. Der Text selbst und
     die Animation bleiben. */
  .prog{display:none}
  .scene .kicker{display:none}
  .scene .pick{display:none}
  .hero__veil{background:linear-gradient(180deg,rgba(11,10,31,.5) 0%,rgba(11,10,31,.85) 52%,rgba(11,10,31,.95) 100%)}
  .hero{padding-bottom:7rem}
  .brand img{width:96px}
  .pb{bottom:12px}
  .pb__segs{gap:9px}
  .pb__segs button{width:25px;height:25px;font-size:10.5px}
  .pb__hint{display:none}
  .pin::after{display:none}
  .toast{left:auto;right:14px;bottom:76px;width:240px}
  .js .scene{left:0;right:0;width:auto;top:auto;bottom:104px;height:auto;align-items:center;padding:0 1.35rem}
  /* Auch das Schlusskapitel endet ueber Knopf und Punkten — mit
     bottom:0 lief der Kauflink unter den FAQ-Knopf. */
  .js .scene--wide{top:var(--oben,56px);bottom:104px;align-items:center;padding:1.5rem 1.35rem}
  .scene__num{display:none}
  .scene .kicker{margin-top:0;font-size:.82rem;padding:.32rem .8rem}
  .scene h2{font-size:clamp(1.75rem,7.8vw,2.5rem);margin-top:0;line-height:1.08}
  .scene--wide h2{font-size:clamp(2.2rem,10vw,3.2rem)}
  .scene__p{font-size:.95rem;margin-top:.55rem;max-width:none}
  .note{display:none}
  .pick{margin-top:.8rem;gap:.35rem}
  .goal{font-size:.84rem;padding:.45rem .75rem}
  .chip{font-size:.8rem;padding:.38rem .7rem}
  .trk{gap:.3rem;margin-top:1.4rem}
  .slot{padding:.35rem .1rem;border-radius:9px}
  .slot__t,.slot__s{display:none}
  .slot__ic{width:24px;height:24px;font-size:12px;border-radius:7px}
  .flowx{flex-direction:column;gap:.5rem}
  .flowx span{font-size:.92rem;padding:.7rem 1rem}
  .flowx > .ic{transform:rotate(90deg)}
  .more{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cta{flex-direction:column;padding:.55rem;margin-top:1.3rem}
  .cta__f{padding:.1rem .6rem}
  .cta input{padding:.75rem 0}
  .cta button{width:100%;padding:.85rem 1rem}
  .trust{font-size:.82rem;gap:.35rem 1rem;margin-top:1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}


/* ================================================================
   Zweiter Durchgang — Hero, Kapitel, Choreografie
   ================================================================ */

/* ---- Vom Hero direkt in die Animation ---------------------------
   CSS-Snap wäre hier zu launisch (proximity greift mal, mal nicht,
   mandatory macht die ganze Seite klebrig). Den Sprung macht
   heroSnap() in tour.js — genau einmal und nur nach unten. */

/* ---- «Beispiel» über dem Browserfenster -------------------------
   Haengt an der Buehne, nicht am Browser: .br schneidet ab. */
.br__demo{position:absolute;left:2px;top:-20px;z-index:3;font-family:var(--fd);font-weight:600;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9a97b5}

/* ---- Screenshot der Besucher-Website ----------------------------
   Liegt einer vor, deckt er das gezeichnete Beispiel zu. */
.site__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;opacity:0;transition:opacity .7s;pointer-events:none}
.site{transition:opacity .7s}
.br__page.shot .site__shot{opacity:1}
.br__page.shot .site{opacity:0}

/* ---- 1 · Ihr Kopf statt des Funkens ----------------------------
   Der Ausschnitt ist über die Variablen gesetzt, damit er sich ohne
   Bildbearbeitung nachjustieren laesst. */
.face{background-repeat:no-repeat;background-color:#eceafa;
  background-image:var(--face);background-size:auto var(--face-z,420%);
  background-position:var(--face-x,50%) var(--face-y,16%)}
.core--face{--face:url(../assets/Aveloa-Bot.png);--face-z:250%;--face-y:5%;
  background-repeat:no-repeat;background-color:#eceafa;
  background-image:var(--face);background-size:auto var(--face-z);
  background-position:var(--face-x,50%) var(--face-y);
  border:3px solid #fff;box-shadow:0 18px 40px -14px rgba(47,68,208,.55)}
.core--face .ic{display:none}
.core__ring{position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--indigo);
  opacity:.25;transition:opacity .4s,transform .4s}
.core.hit .core__ring{opacity:.9;transform:scale(1.07)}

/* ---- 3 · Sie schaut der Seite zu --------------------------------
   Steht neben dem Browser, nicht darin — sie beobachtet von aussen. */
.watch3{position:absolute;left:-30px;top:-22px;width:68px;text-align:center;z-index:4;
  opacity:0;transform:translateY(14px) scale(.85);transition:opacity .5s,transform .6s cubic-bezier(.3,1.3,.5,1)}
.watch3.in{opacity:1;transform:none}
.watch3__face{display:block;width:62px;height:62px;margin:0 auto;border-radius:50%;
  background-repeat:no-repeat;background-color:#eceafa;
  background-image:url(../assets/Aveloa-Bot.png);background-size:auto 250%;background-position:50% 5%;
  border:3px solid #fff;box-shadow:0 16px 34px -12px rgba(219,39,119,.6)}
.watch3__eye{position:absolute;left:50%;top:0;width:72px;height:72px;margin-left:-36px;
  border-radius:50%;border:2px solid var(--magenta);opacity:0}
.watch3.look .watch3__eye{animation:eyePulse 2.2s ease-out infinite}
@keyframes eyePulse{0%{opacity:.75;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.45)}}
.watch3__lbl{margin-top:8px;font-family:var(--fd);font-weight:700;font-size:10.5px;
  letter-spacing:.04em;color:var(--magenta);white-space:nowrap}

/* ---- 5 · Tastatur auf dem Handy -------------------------------- */
.kb{position:absolute;left:0;right:0;bottom:0;padding:7px 6px 7px;border-radius:14px 14px 20px 20px;
  background:#e8e5f6;box-shadow:0 -10px 24px -14px rgba(20,17,46,.5);
  opacity:0;transform:translateY(100%);transition:opacity .35s,transform .45s cubic-bezier(.3,1.2,.5,1)}
.phone.kbd .kb{opacity:1;transform:none}
.kb__in{position:relative;display:flex;align-items:center;gap:2px;min-height:26px;padding:5px 30px 5px 8px;
  border-radius:9px;background:#fff;font-size:8.5px;line-height:1.3;color:var(--ink);text-align:left}
.kb__car{width:1px;height:10px;background:var(--emerald);animation:blink 1s steps(1) infinite}
.phone.sent .kb__car{animation:none;opacity:0}
/* Nach dem Senden ist Ruhe — vorher zappelten die Tasten endlos weiter. */
.phone.sent.kbd .kb__keys i{animation:none}
/* Sobald die Tastatur hochkommt, braucht der Verlauf den Platz. */
.phone.kbd .phone__more{display:none}
.kb__msg{display:block;max-width:86%;margin:0 0 6px auto;padding:6px 8px;border-radius:10px 10px 3px 10px;
  background:linear-gradient(135deg,#34d399,#0891b2);color:#fff;font-size:8.5px;line-height:1.35;
  text-align:left;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s cubic-bezier(.3,1.3,.5,1)}
.phone.sent .kb__msg{opacity:1;transform:none}
.kb__send{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  border-radius:50%;display:grid;place-items:center;background:#dcd8f0;color:#9a97b5;transition:background .3s,color .3s}
.kb__send .ic{width:11px;height:11px;stroke-width:2.6}
.phone.send .kb__send{background:var(--emerald);color:#fff}
.kb__keys{display:grid;gap:3px;margin-top:6px}
.kb__keys span{display:flex;justify-content:center;gap:3px}
.kb__keys i{width:10px;height:13px;border-radius:3px;background:#fff;box-shadow:0 1px 0 rgba(20,17,46,.12)}
.kb__keys i.w{width:66px}
.phone.kbd .kb__keys i{animation:keyTap 1.6s infinite}
.kb__keys span:nth-child(2) i{animation-delay:.2s}
.kb__keys span:nth-child(3) i{animation-delay:.4s}
@keyframes keyTap{0%,88%,100%{background:#fff}92%{background:#cfc9ea}}

/* ---- Szenen ohne Chatfenster -----------------------------------
   1, 2 und 10 erzaehlen auf der Flaeche; der leere Chat lenkt dort nur ab. */
/* Auch hier display: dieselbe Kette, dieselbe Falle — und hier war es
   das Wiederauftauchen des Chats in den anderen Kapiteln, das fehlte. */
.stage[data-n="1"] .chat,.stage[data-n="2"] .chat,
.stage[data-n="4"] .chat,.stage[data-n="10"] .chat,
.stage[data-n="1"] .launcher,.stage[data-n="2"] .launcher,
.stage[data-n="4"] .launcher,.stage[data-n="10"] .launcher{display:none}

/* ---- Ohne Chat fuellt die Website das ganze Browserfenster -------
   Sonst klafft rechts die weisse Flaeche, wo sonst der Chat liegt. */
.stage[data-n="1"] .site,.stage[data-n="2"] .site,
.stage[data-n="4"] .site,.stage[data-n="10"] .site{width:100%}
.stage[data-n="1"] #ovKnow,.stage[data-n="4"] #ovLang,.stage[data-n="10"] #ovIdea{width:100%}
/* Die Milchglasflaeche wird dafuer etwas durchsichtiger — die Seite
   soll dahinter noch zu ahnen sein. */
.stage[data-n="1"] #ovKnow{background:rgba(250,249,254,.88)}

/* ---- 2 · Der Weg steht mittig, weil rechts nichts mehr ist ------
   Die Milchglas-Flaeche deckt die ganze Seite, nur der Inhalt rueckt
   nach rechts — sonst schaut das Beispiel daneben hervor. */
.stage[data-n="2"] #ovGuide{width:100%}
.stage[data-n="2"] #ovGuide .flow{left:132px}
.stage[data-n="2"] .node--1{left:158px}
.stage[data-n="2"] .node--2{left:310px}
.stage[data-n="2"] .node--3{left:156px}
.stage[data-n="2"] .node--goal{left:250px}

/* ---- 3 · Ihr Kopf darf die Kopfzeile der Karte nicht verdecken -- */
.sig__hd{padding-left:46px}

/* ---- 9 · Ihr Auftritt ------------------------------------------ */
/* display gehoert in den .in-Zustand: .ov versteckt mit display:none,
   und eine ID-Regel mit display:flex wuerde das ueberstimmen — dann
   liegen alle Flaechen gleichzeitig uebereinander. */
#ovBrand{flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:0 24px}
#ovBrand.in{display:flex}
.brand3__t{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--ink)}
/* Ablagefeld: das Porträt wird hineingezogen. */
.up{position:relative;width:188px;height:62px;border-radius:14px;border:2px dashed #cfc9ea;
  background:#fff;display:grid;place-items:center;transition:border-color .3s,background .3s}
.up.over{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 8%,#fff)}
.up.done{border-style:solid;border-color:var(--pc)}
.up__hint{display:flex;align-items:center;gap:5px;font-family:var(--fd);font-weight:600;
  font-size:10px;color:#9a97b5;transition:opacity .3s}
.up__hint .ic{width:13px;height:13px}
.up.done .up__hint{opacity:0}
.up__file{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:12px;
  background-repeat:no-repeat;background-image:url(../assets/aveloa-avatar.jpg);
  background-size:auto 170%;background-position:50% 6%;
  box-shadow:0 16px 30px -12px rgba(20,17,46,.6);opacity:0}
/* Namensfeld mit blinkendem Strich */
.fld{width:188px}
.fld small{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#9a97b5;margin-bottom:4px}
.fld__v{display:flex;align-items:center;gap:1px;height:30px;padding:0 9px;border-radius:9px;
  background:#fff;border:1.5px solid var(--pc);font-family:var(--fd);font-weight:700;font-size:12px;color:var(--ink)}
.fld__car{width:1.5px;height:13px;background:var(--pc);animation:blink 1s steps(1) infinite}
/* Farbwahl */
.sws{display:flex;gap:8px}
.sws i{width:20px;height:20px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1.5px var(--line);transition:box-shadow .3s,transform .3s}
.sws i[data-sw="0"]{background:#6b4ef0}
.sws i[data-sw="1"]{background:#0891b2}
.sws i[data-sw="2"]{background:#059669}
.sws i[data-sw="3"]{background:#f59e0b}
.sws i.on{box-shadow:0 0 0 2.5px var(--ink);transform:scale(1.2)}
.brand3__n{font-size:10.5px;color:var(--muted);text-align:center;max-width:200px}

/* Der Chat uebernimmt die gewaehlte Farbe sofort. */
.stage[data-n="9"]{--acc:#6b4ef0}
.stage[data-n="9"] .m--you,
.stage[data-n="9"] .chat__send,
.stage[data-n="9"] .launcher{background:var(--acc);transition:background .45s}
.stage[data-n="9"] .chat__in .ic{color:var(--acc);transition:color .45s}

/* ---- 10 · Ihre Ideen ------------------------------------------- */
#ovIdea{flex-direction:column;justify-content:center;align-items:center;gap:13px;padding:0 20px}
#ovIdea.in{display:flex}
.idea3{display:flex;flex-direction:column;gap:8px;width:100%}
.idea3__card{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:13px;
  background:#fff;border:1px solid var(--line);font-family:var(--fd);font-weight:700;font-size:11.5px;
  box-shadow:0 12px 26px -18px rgba(20,17,46,.5);
  opacity:0;transform:translateX(26px);transition:opacity .4s,transform .55s cubic-bezier(.3,1.25,.5,1),background .4s,color .4s}
.idea3__card .ic{font-size:15px;color:var(--pc)}
.idea3__card.in{opacity:1;transform:none}
.idea3__card.done{background:var(--grad);color:#fff;border-color:transparent}
.idea3__card.done .ic{color:#fff}
.idea3__bar{width:100%;height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.idea3__bar i{display:block;height:100%;width:100%;border-radius:3px;background:var(--grad);
  transform-origin:0 50%;transform:scaleX(0)}
.idea3__who{list-style:none;display:flex;justify-content:center;gap:6px}
.idea3__who li{width:22px;height:22px;border-radius:50%;background:var(--line-2);
  border:1.5px solid #fff;transition:background .35s,transform .35s}
.idea3__who li.on{background:var(--grad);transform:translateY(-3px)}
.idea3__n{font-size:10.5px;color:var(--muted);text-align:center}

/* ---- Platz fuer den laengsten Untertitel (Szene 10) -------------- */
.scene--long .scene__p{max-width:min(34ch,100%)}



/* ---- Schmale Bildschirme ---------------------------------------- */
@media (max-width:980px){
  .watch3{left:-18px;top:-24px;width:56px}
  .watch3__face{width:52px;height:52px}
  .watch3__eye{width:60px;height:60px;margin-left:-30px}
  .br__demo{top:-17px;font-size:9px}
  .scene--long .scene__p{max-width:none}
}


/* ================================================================
   Choreografie je Baustein

   Zehn Mal derselbe Auftritt wird langweilig. Jede Szene traegt
   darum drei Attribute:
     data-side    l = Text links, r = Text rechts (Buehne wechselt mit)
     data-enter   wie der Text kommt: mitte | auf | ort
     data-stagefx wie die Buehne kommt: zoom | iris | links | rechts | auf
   Die Reihenfolge bleibt immer dieselbe: zuerst der Satz allein,
   dann die Buehne. Nur der Weg dorthin wechselt.
   ================================================================ */

/* Huelle um die 3D-Welt. Sie darf verschoben werden; die Perspektive
   sitzt auf .world darunter und bleibt davon unberuehrt. */
.worldwrap{position:absolute;inset:0;z-index:3}
.worldwrap .world{z-index:auto}

/* ---- Textspalte rechts statt links ------------------------------ */
@media (min-width:981px){
  .js .pin[data-side="r"] .scene{left:auto;right:0;padding:0 clamp(1.25rem,6vw,6rem) 4rem 0}
  .pin[data-side="r"]::after{inset:0 0 0 auto;
    background:linear-gradient(270deg,var(--bg) 0%,rgba(247,246,251,.9) calc(100% - 150px),rgba(247,246,251,0) 100%)}
  .pin[data-side="r"] .pin__blob{right:auto;left:-10%}
}

/* ---- Abgang: jede Szene geht so, wie sie gekommen ist ----------- */
.js .scene[data-enter="mitte"].past{transform:translateY(-34px)}
.js .scene[data-enter="auf"].past{transform:translateY(34px)}
.js .scene[data-enter="ort"].past{transform:scale(.955)}

/* ---- Der Farbschleier im Hintergrund wandert mit --------------- */
.pin[data-stagefx="auf"] .pin__blob{transform:translateY(-8vh) scale(1.06)}
.pin[data-stagefx="iris"] .pin__blob{transform:scale(1.16)}
.pin[data-stagefx="links"] .pin__blob{transform:translateX(-10vw) scale(1.04)}
.pin[data-side="r"][data-stagefx="links"] .pin__blob{transform:translateX(10vw) scale(1.04)}

/* ---- Lese-Rhythmus je Stil --------------------------------------
   «mitte» behaelt den bisherigen Takt. «auf» laesst den Block als
   Ganzes steigen, also kommen die Zeilen fast gleichzeitig. «ort»
   bewegt nichts — dort baut sich der Text Zeile fuer Zeile auf und
   bekommt dadurch sein eigenes Tempo. */
.js .scene[data-enter="auf"].on .scene__num,
.js .scene[data-enter="auf"].on .kicker,
.js .scene[data-enter="auf"].on h2,
.js .scene[data-enter="auf"].on .scene__p{transition-delay:.04s}
.js .scene[data-enter="auf"].on .pick,
.js .scene[data-enter="auf"].on .note{transition-delay:.18s}

.js .scene[data-enter="ort"].on .scene__num{transition-delay:0s}
.js .scene[data-enter="ort"].on .kicker{transition-delay:.12s}
.js .scene[data-enter="ort"].on h2{transition-delay:.26s}
.js .scene[data-enter="ort"].on .scene__p{transition-delay:.46s}
.js .scene[data-enter="ort"].on .pick,
.js .scene[data-enter="ort"].on .note{transition-delay:.62s}


/* ================================================================
   Titelseite und Schluss-Slide
   ================================================================ */

/* ---- Schluss-Slide: dasselbe Formular, aber auf hellem Grund ---- */
.scene--cta .scene__p{margin-bottom:.4rem}
/* Die Pille traegt die Farbe des Kapitels, nicht das Standard-Violett. */
.scene--cta .kicker{color:var(--pc);
  background:color-mix(in srgb,var(--pc) 11%,#fff);
  border-color:color-mix(in srgb,var(--pc) 30%,#fff)}
.scene--cta .cta{border:1px solid var(--line);box-shadow:0 26px 60px -28px rgba(20,17,46,.5)}
.scene--cta .cta:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 18%,transparent),
  0 26px 60px -28px rgba(20,17,46,.5)}
.scene--cta .trust{color:var(--ink-2)}
.scene--cta .trust .ic{color:#10b981}
.scene--cta .cta__err{color:#be123c}
/* Der zweite Weg hinaus — er darf nicht so klein sein, dass man ihn
   uebersieht, aber auch nicht mit dem Knopf daneben konkurrieren. */
.scene--cta .end__buy{display:inline-block;margin-top:1.5rem;color:var(--muted);
  font-size:1.06rem;font-weight:600;
  border-bottom:1px solid rgba(20,17,46,.18);padding-bottom:3px;text-decoration:none}
.scene--cta .end__buy:hover{color:var(--ink)}
/* Der letzte Punkt in der Leiste ist die Handlung — der darf leuchten. */
.pb__segs li:last-child.cur button{background:var(--grad)}


/* ================================================================
   Kopfzeile — nachgebaut nach aveloa.ch
   Heller Balken mit Unschaerfe, Icon plus Wortmarke, dieselben
   Ziele. Font Awesome laedt diese Seite nicht, darum stehen die
   Symbole als SVG im Markup.
   ================================================================ */
.hd{position:fixed;inset:0 0 auto 0;z-index:70;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(203,213,225,.6);
  transition:transform .3s cubic-bezier(.3,.8,.3,1),background .35s,border-color .35s,box-shadow .35s}
.hd__in{height:var(--hdr);max-width:1280px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem}

.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:none}
.brand img{width:36px;height:36px;transition:transform .3s}
.brand:hover img{transform:scale(1.05)}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__t b{font-family:var(--fd);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:#0f172a}
.brand__t small{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#0891b2;margin-top:1px}

.hd__nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);
  font-size:.875rem;font-weight:500;color:#475569}
.hd__nav a{text-decoration:none;transition:color .2s}
.hd__nav a:hover{color:#0f172a}
.hd__price{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .75rem;border-radius:999px;
  font-weight:600;color:#4f46e5;background:#eef2ff;border:1px solid #e0e7ff}
.hd__price:hover{color:#3730a3}
.hd__price .ic{width:13px;height:13px}

.hd__act{display:flex;align-items:center;gap:.6rem}
.hd__login{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;
  font-size:.875rem;font-weight:600;color:#334155;text-decoration:none;transition:background .2s,color .2s}
.hd__login:hover{background:#f1f5f9;color:#0f172a}
.hd__login .ic{width:16px;height:16px}
.hd__demo{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:999px;
  font-family:var(--fb);font-size:.875rem;font-weight:600;color:#fff;background:#0f172a;text-decoration:none;
  box-shadow:0 10px 24px -12px rgba(15,23,42,.8);transition:background .2s,box-shadow .2s}
.hd__demo:hover{background:#1e293b;box-shadow:0 14px 30px -12px rgba(8,145,178,.5)}
.ping{width:8px;height:8px;border-radius:50%;background:#22d3ee;flex:none;
  box-shadow:0 0 0 0 rgba(34,211,238,.7);animation:pingDot 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes pingDot{70%{box-shadow:0 0 0 7px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}

.hd__burger{display:none;width:44px;height:44px;border-radius:12px;color:#334155;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:background .2s}
.hd__burger:hover{background:#f1f5f9}
.hd__burger span{display:block;width:18px;height:2px;border-radius:1px;background:currentColor;
  transition:transform .25s,opacity .25s}
.hd__burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd__burger.on span:nth-child(2){opacity:0}
.hd__burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* display:flex wuerde das hidden-Attribut aushebeln — darum nur,
   wenn es wirklich offen ist. Oberhalb von 1100px gibt es das Menue
   gar nicht, dort steht die Navigation offen im Balken. */
.hd__mob{display:none;border-top:1px solid rgba(203,213,225,.6);background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:.6rem clamp(1rem,4vw,1.5rem) 1rem;
  flex-direction:column;gap:.15rem}
.hd__mob:not([hidden]){display:flex}
@media (min-width:1101px){.hd__mob{display:none !important}}
.hd__mob a{padding:.8rem .75rem;border-radius:12px;font-weight:500;color:#334155;text-decoration:none}
.hd__mob a:hover{background:#f1f5f9}
.hd__mobdemo{margin-top:.5rem;text-align:center;font-weight:600;color:#fff !important;background:#0f172a}
.hd__mobdemo:hover{background:#1e293b !important}

@media (max-width:1100px){
  .hd__nav{display:none}
  .hd__burger{display:flex}
}
@media (max-width:640px){
  .hd__login{display:none}
  .brand__t small{display:none}
  .brand img{width:32px;height:32px}
  .brand__t b{font-size:1.2rem}
}



/* ================================================================
   Die Kopfzeile kennt drei Zustände — wie auf aveloa.ch, nur mit
   einem zusätzlichen:

     hero  über dem Bild durchsichtig mit heller Schrift
     weg   während der Kapitel fährt sie nach oben aus dem Bild;
           die Tour soll dort wie ein Booklet wirken, ohne Rahmen
     hell  darunter (Rechnung, Fragen, Fuss) wieder weiss

   Den Zustand setzt onScroll() in tour.js als data-mode.
   ================================================================ */

/* ---- 1 · Über dem Hero: durchsichtig ---------------------------- */
.hd[data-mode="hero"]{background:transparent;border-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.hd[data-mode="hero"] .brand__t b{color:#fff}
.hd[data-mode="hero"] .brand__t small{color:#67e8f9}
.hd[data-mode="hero"] .hd__nav{color:rgba(255,255,255,.82)}
.hd[data-mode="hero"] .hd__nav a:hover{color:#fff}
.hd[data-mode="hero"] .hd__price{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.22);color:#fff}
.hd[data-mode="hero"] .hd__login{color:#fff}
.hd[data-mode="hero"] .hd__login:hover{background:rgba(255,255,255,.12)}
.hd[data-mode="hero"] .hd__demo{background:#fff;color:#0b1120;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.hd[data-mode="hero"] .hd__demo:hover{background:#e2e8f0}
.hd[data-mode="hero"] .ping{background:#0891b2;box-shadow:0 0 0 0 rgba(8,145,178,.7)}
.hd[data-mode="hero"] .hd__burger{color:#fff}
.hd[data-mode="hero"] .hd__burger:hover{background:rgba(255,255,255,.12)}

/* ---- 2 · Während der Kapitel: aus dem Bild ---------------------- */
.hd[data-mode="weg"]{transform:translateY(-100%);pointer-events:none;box-shadow:none}

/* ---- 3 · Darunter: weiss wie die gescrollte Startseite ---------- */
.hd[data-mode="hell"]{background:rgba(255,255,255,.92);
  box-shadow:0 8px 30px -12px rgba(11,17,32,.18)}

/* Solange die Kopfzeile weg ist, braucht der Text oben weniger Rand. */
@media (min-width:981px){
  .js .pin[data-hd="weg"] .scene{top:1.75rem}
}


/* ================================================================
   Während der Kapitel: zwei Wege hinaus und ein Weiter
   ================================================================ */

/* Oben rechts, solange die Kopfzeile weg ist. */
.tbar{position:fixed;top:clamp(.9rem,2vh,1.4rem);right:clamp(.9rem,3vw,2rem);z-index:75;
  display:flex;align-items:center;gap:.6rem;
  opacity:0;transform:translateY(-12px);pointer-events:none;
  transition:opacity .3s,transform .35s cubic-bezier(.3,1.2,.5,1)}
.tbar.show{opacity:1;transform:none;pointer-events:auto}
.tbar a{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;
  font-family:var(--fd);font-weight:700;font-size:.85rem;text-decoration:none;
  padding:.6rem 1.15rem;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.tbar__test{color:#fff;background:var(--grad);box-shadow:0 10px 26px -12px rgba(123,92,255,.9)}
.tbar__test:hover{transform:translateY(-1px);box-shadow:0 16px 32px -14px rgba(123,92,255,1)}
.tbar__end{color:var(--ink-2);background:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px var(--line),0 8px 20px -14px rgba(20,17,46,.5)}
.tbar__end:hover{color:var(--ink);background:#fff}
.tbar__end .ic{width:14px;height:14px;stroke-width:2.4}

/* Unten rechts, sobald das Kapitel fertig gespielt ist. */
.nxt{position:fixed;right:clamp(.9rem,3vw,2rem);bottom:clamp(14px,2.4vh,26px);z-index:75;
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;border-radius:999px;
  font-family:var(--fd);font-weight:700;font-size:.92rem;color:#fff;background:var(--pc);
  box-shadow:0 14px 30px -14px var(--pc);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s,transform .35s cubic-bezier(.3,1.2,.5,1),background .5s,box-shadow .5s}
.nxt.show{opacity:1;transform:none;pointer-events:auto}
.nxt:hover{transform:translateY(-2px)}
.nxt .ic{width:16px;height:16px;stroke-width:2.4}
/* Auf dem letzten Kapitel zeigt der Pfeil nach unten, nicht nach rechts. */
.nxt .ic--d{display:none}
.nxt[data-mode="faq"] .ic--w{display:none}
.nxt[data-mode="faq"] .ic--d{display:block}
@media (max-width:640px){
  .tbar a{font-size:.78rem;padding:.5rem .85rem}
  .nxt{font-size:.85rem;padding:.6rem 1.05rem}
}

/* ================================================================
   Fusszeile — nachgebaut nach aveloa.ch
   ================================================================ */
.ft{background:#0f172a;color:#94a3b8;border-top:1px solid #1e293b;
  padding:clamp(2.5rem,6vw,4rem) 0 clamp(2rem,4vw,3rem)}
.ft__in{max-width:1280px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.ft__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);margin-bottom:clamp(2rem,4vw,3rem)}
.ft__brand{display:flex;align-items:center;gap:.75rem;font-family:var(--fd);font-weight:800;
  font-size:1.5rem;letter-spacing:-.02em;color:#fff;margin-bottom:1rem}
.ft__mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:#22d3ee;color:#0f172a;font-size:1.1rem;line-height:1}
.ft__t{font-size:.75rem;line-height:1.7;color:#94a3b8}
.ft__swiss{display:inline-block;margin-top:1rem;padding:.25rem .75rem;border-radius:999px;
  background:#1e293b;border:1px solid #334155;color:#22d3ee;font-size:.75rem;font-weight:600}
.ft h4{color:#fff;font-family:var(--fb);font-weight:700;font-size:.875rem;margin-bottom:1rem}
.ft ul{list-style:none;display:grid;gap:.15rem;font-size:.75rem}
.ft__plain{gap:.6rem;color:#cbd5e1}
.ft a{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 0;
  color:#94a3b8;text-decoration:none;transition:color .2s}
.ft a:hover{color:#fff}
.ft__hi{color:#22d3ee !important;font-weight:600}
.ft__hi:hover{text-decoration:underline}
.ft__hi .ic{width:14px;height:14px}
.ft__end{padding-top:clamp(1.4rem,3vw,2rem);border-top:1px solid #1e293b;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.75rem;color:#64748b}
.ft__soc{display:flex;gap:.25rem}
.ft__soc a{width:40px;height:40px;border-radius:12px;justify-content:center;padding:0;
  transition:background .2s,color .2s}
.ft__soc a:hover{background:#1e293b;color:#cbd5e1}
.ft__soc .ic{width:17px;height:17px}
@media (max-width:860px){ .ft__cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .ft__cols{grid-template-columns:1fr} }


/* ================================================================
   Titelseite in zwei Schritten
   Erst der Satz, der das Problem benennt, dann die Vorstellung.
   Beide Schritte liegen uebereinander; der obere Rand von Schritt 0
   haelt die <h1> genau dort, wo sie in Schritt 1 wieder auftaucht.
   ================================================================ */
/* Schritt 0 hat drei Zeilen, Schritt 1 zwei plus Augenbraue und
   Untertitel — die Flaeche muss fuer beide reichen, sonst springt es. */
.hero__stack{position:relative;min-height:clamp(330px,42vh,460px)}
.hero__step{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(14px);
  pointer-events:none;transition:opacity .28s ease,transform .4s cubic-bezier(.2,.75,.2,1)}
.hero__step[data-step="0"]{padding-top:3.2rem}
.hero__stack[data-step="0"] .hero__step[data-step="0"],
.hero__stack[data-step="1"] .hero__step[data-step="1"]{opacity:1;transform:none;pointer-events:auto}
/* Der Problemsatz geht nach oben weg, wenn die Antwort kommt. */
.hero__stack[data-step="1"] .hero__step[data-step="0"]{opacity:0;transform:translateY(-26px)}

/* Innerhalb von Schritt 1 bauen sich die Zeilen nacheinander auf. */
.hero__step[data-step="1"] .kicker,
.hero__step[data-step="1"] .lede{opacity:0;transform:translateY(12px);
  transition:opacity .5s,transform .6s cubic-bezier(.2,.75,.2,1)}
.hero__stack[data-step="1"] .hero__step[data-step="1"] .kicker{opacity:1;transform:none;transition-delay:.05s}
.hero__stack[data-done="1"] .hero__step[data-step="1"] .lede{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .hero__step,.hero__step[data-step="1"] .kicker,.hero__step[data-step="1"] .lede{transition:none}
}
@media (max-width:980px){
  .hero__stack{min-height:clamp(380px,54vh,540px)}
  /* Der Weiter-Knopf sass unten rechts — auf dem Handy genau auf den
     letzten drei Punkten. Eine Reihe hoeher. Die Regel MUSS hier unten
     stehen: weiter oben haette .nxt{bottom:...} sie bei gleicher
     Spezifitaet wieder ueberschrieben.
     --unten setzt tour.js: der Abstand zwischen Fensterunterkante und
     Pin. Sonst haengt der Knopf am Fenster und die Punkte am Pin. */
  .nxt{bottom:calc(60px + var(--unten,0px))}
}


/* ---- Die Titel tippen sich -------------------------------------
   Jede Zeile ist ein eigenes Feld. Zeilen mit Verlauf tragen ihn auf
   einem inneren <i>: haette das Feld selbst background-clip:text,
   wuerde der Schreibstrich darin verschwinden. */
.ty{white-space:pre-wrap}
.ty[data-grad] i{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ty.cur::after{content:"";display:inline-block;width:.055em;height:.78em;
  vertical-align:-.06em;margin-left:.05em;background:var(--magenta);
  animation:blink 1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){ .ty.cur::after{display:none} }