/* Die Takte: die Vorführung von Bildschirm 1 (Idee, Agenten, Report, Entscheidung) und der Website-Takt der
 * Aufnahme-Anleitung im Portal. Wird nach cp.css geladen, auf allen Seiten.
 * Vorlage ist die Takte-Bühne von founda.app (website-ref/SPEC.md, Abschnitte 1.3, 2.1, 3.2, 4.1): Ticket mit Abriss,
 * Spiel-Cockpit mit Countdown, Agenten-Avataren und Agentenprotokoll (wie das Dashboard), Kiste mit Ergebnis-Karte,
 * Einsatz-Kacheln mit Rahmen-Glühen, Website-Vorschauen.
 * Markup in makros.html (takt_*), Ablauf (Klassen cp-play, cp-k1 … an jedem Takt-Bild) setzt cp.js (buehne). Ohne
 * .cp-play steht jedes Bild im Endzustand, ohne Skript und bei reduzierter Bewegung also das Endbild. Bewegt werden
 * nur transform und opacity. */

/* ---------- Bühne: Takt-Reiter mit Fortschritt, Bilder überblenden wie auf founda.app ---------- */
.cp-flow{--stub:104px;isolation:isolate}
.cp-flow-stage{height:350px}
.cp-flow.cp-lauf .cp-flow-steps li span::after{transition:none}
.cp-flow.cp-lauf[data-b="1"] li:nth-child(1) span::after,.cp-flow.cp-lauf[data-b="2"] li:nth-child(2) span::after,
.cp-flow.cp-lauf[data-b="3"] li:nth-child(3) span::after,.cp-flow.cp-lauf[data-b="4"] li:nth-child(4) span::after{animation:cp1-voll var(--takt,6s) linear both}
@keyframes cp1-voll{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cp-flow .cp-fs{opacity:0;visibility:hidden;transform:translate3d(0,22px,0);transition:opacity .42s var(--cp-e),transform .42s var(--cp-e),visibility 0s linear .42s}
.cp-flow[data-b="1"] .cp-fs1,.cp-flow[data-b="2"] .cp-fs2,.cp-flow[data-b="3"] .cp-fs3,.cp-flow[data-b="4"] .cp-fs4,.cp-flow[data-b="5"] .cp-fs5,.cp-flow[data-b="6"] .cp-fs6,.cp-flow[data-b="7"] .cp-fs7{opacity:1;visibility:visible;transform:none;transition-delay:.18s,.18s,0s}
.cp-flow .cp-fs.cp-out{transform:translate3d(0,-22px,0);transition-duration:.24s,.24s,0s;transition-delay:0s,0s,.24s}
.cp-flow .cp-fs-body{justify-content:center}

/* Fingerring (simulierter Tipp) */
.cp-flow .cp-tap{position:absolute;z-index:3;width:44px;height:44px;border:2px solid rgba(255,255,255,.95);border-radius:50%;background:rgba(255,255,255,.28);pointer-events:none;opacity:0;transform:scale(1.6);transition:opacity .22s var(--cp-e),transform .22s var(--cp-e)}
/* Lichtball und Funken (Abriss, Kiste) */
.cp-burst{position:absolute;z-index:2;top:50%;width:170px;height:170px;margin:-85px -85px 0 0;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,.85) 18%,rgba(255,120,70,.5) 42%,rgba(255,61,20,0) 72%);opacity:0;pointer-events:none}
.cp-funken{position:absolute;z-index:2;left:50%;top:50%;width:0;height:0;pointer-events:none}
.cp-funken>i{position:absolute;left:0;top:0;width:0;height:0}
.cp-funken>i>i{position:absolute;left:0;top:-1px;width:24px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 60%,#ffe2d8);transform-origin:100% 50%;opacity:0}
@keyframes cp1-spark{0%{opacity:0;transform:translate3d(8px,0,0)}10%{opacity:1}100%{opacity:0;transform:translate3d(130px,0,0) scaleX(.2)}}
@keyframes cp1-burst{0%{opacity:0;transform:scale(.15)}15%{opacity:1}100%{opacity:0;transform:scale(2.4)}}
@keyframes cp1-puls{0%,100%{opacity:.1;transform:scale(.92)}50%{opacity:1;transform:scale(1.12)}}
@keyframes cp1-sheen{0%,100%{opacity:0}50%{opacity:.85}}
@keyframes cp1-tear{
  0%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.3,0,.3,1)}
  14%{transform:scale(.94);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  28%{transform:translate3d(4%,-6%,0) rotate(5deg);animation-timing-function:cubic-bezier(.45,0,.75,.4)}
  90%{opacity:1}
  100%{opacity:0;transform:translate3d(200%,-220%,0) rotate(34deg) scale(.8)}}
@keyframes cp1-rise{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes cp1-fade{from{opacity:0}to{opacity:1}}

/* ---------- Takt 1 Idee: weißes Ticket wie founda.app, Feuer-Abriss „Gründen“, Perforation mit Kerben ---------- */
.cp-flow .cp-idee{--n:9px;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);align-items:stretch;width:100%;height:76px;margin:6px 0 0}
.cp-idee::before{content:"";position:absolute;z-index:-1;inset:14px 18px 0;border-radius:var(--cp-r);box-shadow:0 26px 40px rgba(0,0,0,.7);transition:opacity .2s ease .1s}
.cp-idee::after{content:"";position:absolute;z-index:-1;right:-22px;top:-22px;bottom:-22px;width:150px;background:radial-gradient(closest-side,rgba(255,61,20,.75),rgba(255,61,20,0));opacity:0;pointer-events:none;animation:cp1-puls 2.2s ease-in-out infinite}
/* Schlitz: Das Ticket wird nach oben in einen weichen Masken-Rand gezogen (Kante zuerst weg, nie grau). */
.cp-idee-slot{--slot:72px;--edge:12px;display:grid;min-width:0;margin-top:calc(var(--slot) * -1);padding-top:var(--slot);
  -webkit-mask:linear-gradient(#0000 calc(var(--slot) - var(--edge)),#000 var(--slot));mask:linear-gradient(#0000 calc(var(--slot) - var(--edge)),#000 var(--slot))}
.cp-idee-in{position:relative;display:flex;align-items:center;min-width:0;margin:0;padding:0 14px 0 30px;background:#fff;border-radius:var(--cp-r) 0 0 var(--cp-r);transform-origin:50% 0;
  font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.015em;color:#14161c;text-wrap:balance;
  -webkit-mask:radial-gradient(circle var(--n) at 100% 0,#0000 calc(var(--n) - .7px),#000 var(--n)),radial-gradient(circle var(--n) at 100% 100%,#0000 calc(var(--n) - .7px),#000 var(--n)),radial-gradient(circle at 100% 50%,#0000 1.6px,#000 2.2px) 0 0/100% 10px;
  -webkit-mask-composite:source-in;mask:radial-gradient(circle var(--n) at 100% 0,#0000 calc(var(--n) - .7px),#000 var(--n)),radial-gradient(circle var(--n) at 100% 100%,#0000 calc(var(--n) - .7px),#000 var(--n)),radial-gradient(circle at 100% 50%,#0000 1.6px,#000 2.2px) 0 0/100% 10px;mask-composite:intersect}
.cp-flow .cp-caret{position:absolute;left:15px;top:50%;width:3px;height:24px;margin:-12px 0 0;background:var(--cp-fire);animation:cp1-blink 1.2s steps(1) infinite}
@keyframes cp1-blink{0%{opacity:1}70%{opacity:.25}}
.cp-idee-go{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:.4em;padding-left:2px;background:var(--cp-fire);border-radius:0 var(--cp-r) var(--cp-r) 0;transform-origin:0 100%;
  font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--cp-on-fire);
  -webkit-mask:radial-gradient(circle var(--n) at 0 0,#0000 calc(var(--n) - .7px),#000 var(--n)),radial-gradient(circle var(--n) at 0 100%,#0000 calc(var(--n) - .7px),#000 var(--n)),radial-gradient(circle at 0 50%,#0000 1.6px,#000 2.2px) 0 0/100% 10px;
  -webkit-mask-composite:source-in;mask:radial-gradient(circle var(--n) at 0 0,#0000 calc(var(--n) - .7px),#000 var(--n)),radial-gradient(circle var(--n) at 0 100%,#0000 calc(var(--n) - .7px),#000 var(--n)),radial-gradient(circle at 0 50%,#0000 1.6px,#000 2.2px) 0 0/100% 10px;mask-composite:intersect}
.cp-idee-go::before{content:"";position:absolute;inset:0;z-index:-1;background:#ff8f63;opacity:0;animation:cp1-sheen 2.2s ease-in-out infinite}
.cp-idee-go .cp-ic{width:.86em;height:.86em;stroke-width:2.5}
.cp-idee .cp-tap{top:50%;right:calc(var(--stub) / 2);margin:-22px -22px 0 0}
.cp-idee .cp-burst{right:var(--stub)}
.cp-idee .cp-funken{left:auto;right:var(--stub)}
/* Schlag 1: der Finger setzt auf. Schlag 2: Druck, der Abriss reißt ab, Licht, Funken, das Ticket wird eingezogen. */
.cp-fs1.cp-k1 .cp-tap{opacity:1;transform:none}
.cp-fs1.cp-k2 .cp-tap{transform:scale(.8);animation:cp1-aus .3s ease .3s forwards}
@keyframes cp1-aus{to{opacity:0}}
.cp-fs1.cp-k2 .cp-idee::after,.cp-fs1.cp-k2 .cp-idee-go::before{animation:none;opacity:0}
.cp-fs1.cp-k2 .cp-idee::before{opacity:0}
.cp-fs1.cp-k2 .cp-idee-go{animation:cp1-tear .8s linear forwards}
.cp-fs1.cp-k2 .cp-burst{animation:cp1-burst .6s cubic-bezier(.1,.7,.2,1) .18s both}
.cp-fs1.cp-k2 .cp-funken>i>i{animation:cp1-spark .7s cubic-bezier(.15,.7,.3,1) calc(.2s + var(--d,0ms)) both}
.cp-fs1.cp-k2 .cp-idee-in{animation:cp1-take .8s linear .78s forwards}
@keyframes cp1-take{
  0%{transform:none;animation-timing-function:cubic-bezier(.3,0,.5,1)}
  22%{transform:translate3d(0,4px,0) scale(.985);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  100%{transform:translate3d(0,-120px,0) scale(.92)}}

/* ---------- Takt 2 Agenten: Spiel-Cockpit wie das Dashboard auf founda.app. Kopfkarte: Countdown mit Walzen-Ziffern,
   drei Agenten-Avatare (Lämpchen, Glühen in Orange, Erledigt-Haken mit Pop), Energie-Linie. Darunter das Agentenprotokoll:
   Zeit · Agent · Tat läuft Zeile für Zeile nach unten, die laufende Zeile glüht, erledigte bekommen den Haken. ---------- */
.cp-flow .cp-ck{display:flex;flex-direction:column;gap:8px;width:100%}
.cp-ck-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px 14px 11px;border:1px solid #303540;border-radius:8px;background:linear-gradient(180deg,#1f232c,#1b1e25);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 30px -22px #000}
.cp-fs2.cp-play .cp-ck-head{animation:cp1-rise .45s var(--cp-e) backwards}
.cp-uhr{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;min-width:0}
.cp-uhr small{font:700 12px/1.3 var(--cp-sans);letter-spacing:0;color:#9ca1ad;animation:cp1-fade .5s ease .3s backwards}
.cp-uhr b{display:flex;font:700 36px/1 var(--cp-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff}
.cp-dg{display:grid;padding:.06em .12em .12em;margin:-.06em -.12em -.12em;
  -webkit-mask:linear-gradient(#0000,#000 .05em,#000 calc(100% - .1em),#0000);mask:linear-gradient(#0000,#000 .05em,#000 calc(100% - .1em),#0000)}
.cp-dg i{grid-area:1/1;font-style:normal;animation:cp1-dg .5s cubic-bezier(.25,1.25,.45,1) backwards}
.cp-dg i.cp-weg{animation:cp1-dgweg .5s cubic-bezier(.25,1.25,.45,1) forwards}
@keyframes cp1-dg{from{transform:translate3d(0,calc(-100% - .3em),0)}}
@keyframes cp1-dgweg{to{transform:translate3d(0,calc(100% + .3em),0)}}
.cp-fs2.cp-hot .cp-uhr b{color:var(--cp-fire);transition:color 0s linear .12s;animation:cp1-beat 1s linear infinite}
@keyframes cp1-beat{0%{transform:none;animation-timing-function:cubic-bezier(.3,0,.4,1)}12%{transform:scale(1.06);animation-timing-function:cubic-bezier(.2,.8,.2,1)}100%{transform:none}}
/* Energie-Linie: füllt sich in Orange bis zum Report */
.cp-uhr-line{grid-column:1/-1;display:block;width:100%;height:4px;margin:0;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;animation:cp1-fade .5s ease .3s backwards}
.cp-uhr-line i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#ff8a5c,var(--cp-fire));box-shadow:0 0 10px rgba(255,61,20,.7);transform-origin:0 50%;transform:scaleX(.6)}
.cp-fs2.cp-play .cp-uhr-line i{animation:cp1-voll 6s linear both}
/* Avatare: Kreis mit Anfangsbuchstabe; läuft = oranger Rand und Glühen, erledigt = grüner Haken springt auf */
.cp-flow .cp-crew{display:flex;gap:9px;margin:0;padding:0;list-style:none}
.cp-flow .cp-crew li{position:relative;display:block;width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;opacity:1;transform:none;transition:none}
.cp-fs2.cp-play .cp-crew li{animation:cp1-rise .45s var(--cp-e) .06s backwards}
.cp-fs2.cp-play .cp-crew li:nth-child(2){animation-delay:.14s}
.cp-fs2.cp-play .cp-crew li:nth-child(3){animation-delay:.22s}
.cp-crew li::before{content:"";position:absolute;z-index:0;inset:-3px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,61,20,.3),0 0 16px 3px rgba(255,61,20,.55);opacity:0}
.cp-crew-av{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border:1px solid #3d4351;border-radius:50%;background:#242832;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);font:700 13px/1 var(--cp-mono);font-style:normal;color:#b4bac7}
.cp-crew li.cp-lauf .cp-crew-av{border-color:var(--cp-fire);color:#fff}
.cp-crew li.cp-lauf::before{animation:cp1-lamp 1.4s ease-in-out infinite}
@keyframes cp1-lamp{0%,100%{opacity:.4}50%{opacity:1}}
.cp-crew-ok{position:absolute;z-index:2;right:-4px;bottom:-3px;display:grid;place-items:center;width:16px;height:16px;border:2px solid #1b1e25;border-radius:50%;background:var(--cp-up);color:#06130c}
.cp-crew-ok .cp-ic{width:8px;height:8px;stroke-width:4}
.cp-fs2.cp-play .cp-crew-ok{opacity:0;transform:scale(.3)}
.cp-fs2.cp-play .cp-crew li.cp-fertig .cp-crew-av{border-color:rgba(39,208,122,.55)}
.cp-fs2.cp-play .cp-crew li.cp-fertig .cp-crew-ok{animation:cp1-pop .45s var(--cp-pop) forwards}
@keyframes cp1-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:none}}
/* Agentenprotokoll: Kopf mit >_ und Status-Lämpchen, darin das Feed */
.cp-prot{display:flex;flex-direction:column;border:1px solid #303540;border-radius:8px;background:#1b1e25;overflow:hidden}
.cp-fs2.cp-play .cp-prot{animation:cp1-rise .45s var(--cp-e) .1s backwards}
.cp-prot-h{display:flex;align-items:center;gap:7px;height:32px;margin:0;padding:0 10px 0 12px;border-bottom:1px solid #303540;font:800 13px/1 var(--cp-sans);letter-spacing:-.01em;color:#fff}
.cp-prot-h>span{font:700 12px/1 var(--cp-mono);color:#b4bac7}
.cp-prot-st{display:flex;align-items:center;gap:6px;margin-left:auto;font:700 10.5px/1 var(--cp-sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#b4bac7}
.cp-prot-st i{width:7px;height:7px;border-radius:50%;background:var(--cp-fire);box-shadow:0 0 8px rgba(255,61,20,.8);animation:cp1-lamp 1.4s ease-in-out infinite}
.cp-fs2.cp-k4 .cp-prot-st i{background:var(--cp-up);box-shadow:0 0 8px rgba(39,208,122,.8);animation:none}
.cp-flow .cp-fs2 .cp-prot .cp-agents{display:flex;flex-direction:column;gap:2px;margin:5px;padding:4px;border:1px solid #303540;border-radius:5px;background:#15181e}
.cp-flow .cp-fs2 .cp-prot .cp-agents li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 18px;grid-template-areas:"a t s" "x x s";align-items:center;gap:1px 8px;width:auto;height:auto;min-height:42px;margin:0;padding:4px 8px 4px 10px;border:0;border-radius:4px;background:none;box-shadow:none;font:500 13.5px/1.3 var(--cp-sans);color:#fff;opacity:1;transform:none;transition:none}
.cp-flow .cp-fs2 .cp-prot .cp-agents li:nth-child(n){transition-delay:0s}
.cp-flow .cp-fs2 .cp-prot .cp-agents li::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:1px;background:var(--cp-fire);box-shadow:0 0 8px rgba(255,61,20,.7);opacity:0}
.cp-flow .cp-fs2 .cp-prot .cp-agents li.cp-neu{background:rgba(255,61,20,.07)}
.cp-flow .cp-fs2 .cp-prot .cp-agents li.cp-neu::before{opacity:1}
.cp-flow .cp-fs2 .cp-prot .cp-agents .cp-ag-name{grid-area:a;display:block;min-width:0;font:600 12.5px/1.3 var(--cp-sans);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b4bac7}
.cp-flow .cp-fs2 .cp-prot .cp-agents li.cp-neu .cp-ag-name{color:var(--cp-fire)}
.cp-flow .cp-fs2 .cp-prot .cp-agents .cp-ag-zeit{grid-area:t;font:500 11px/1.3 var(--cp-mono);font-variant-numeric:tabular-nums;color:#9ca1ad}
.cp-flow .cp-fs2 .cp-prot .cp-agents .cp-ag-txt{grid-area:x;display:block;min-width:0;font:500 13.5px/1.3 var(--cp-sans);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-flow .cp-fs2 .cp-prot .cp-agents li.cp-fertig .cp-ag-txt{color:#b4bac7}
/* Status rechts: Lämpchen solange die Zeile läuft, dann grüner Haken mit Pop */
.cp-flow .cp-fs2 .cp-prot .cp-agents .cp-ag-st{grid-area:s;position:relative;display:grid;place-items:center;width:18px;height:18px;border:1.5px solid rgba(39,208,122,.55);border-radius:50%;background:rgba(39,208,122,.12);opacity:1;transform:none;transition:none}
.cp-ag-st::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cp-fire);box-shadow:0 0 8px rgba(255,61,20,.8);opacity:0}
.cp-flow .cp-fs2 .cp-prot .cp-agents li .cp-ic{width:10px;height:10px;margin:0;stroke-width:3.5;color:var(--cp-up);opacity:1;transform:none;transition:none}
.cp-flow .cp-fs2 .cp-prot .cp-agents li:nth-child(n) .cp-ic{transition-delay:0s}
/* Ablauf: Zeilen erst unsichtbar, kommen bei ihrem Schlag von unten; laufend = Lämpchen, erledigt = Haken-Pop */
.cp-flow .cp-fs2.cp-play .cp-prot .cp-agents li{opacity:0;transform:translate3d(0,8px,0)}
.cp-flow .cp-fs2.cp-play .cp-prot .cp-agents li.cp-da{opacity:1;transform:none;animation:cp1-line .32s ease-out both}
@keyframes cp1-line{from{opacity:0;transform:translate3d(0,8px,0)}}
.cp-flow .cp-fs2.cp-play .cp-prot .cp-agents li .cp-ag-st{border-color:#3d4351;background:none}
.cp-flow .cp-fs2.cp-play .cp-prot .cp-agents li .cp-ic{opacity:0;transform:scale(.3)}
.cp-flow .cp-fs2.cp-play .cp-prot .cp-agents li.cp-neu .cp-ag-st{border-color:rgba(255,61,20,.5)}
.cp-flow .cp-fs2.cp-play .cp-prot .cp-agents li.cp-neu .cp-ag-st::before{animation:cp1-lamp 1.4s ease-in-out infinite}
.cp-flow .cp-fs2.cp-play .cp-prot .cp-agents li.cp-fertig .cp-ag-st{border-color:rgba(39,208,122,.55);background:rgba(39,208,122,.12)}
.cp-flow .cp-fs2.cp-play .cp-prot .cp-agents li.cp-fertig .cp-ic{animation:cp1-pop .45s var(--cp-pop) forwards}

/* ---------- Takt 3 Report: Kiste schwebt ein, wackelt, springt auf; die Ergebnis-Karte steigt aus dem Licht ---------- */
.cp-flow .cp-loot{position:relative;display:flex;align-items:center;justify-content:center;height:100%}
.cp-licht{position:absolute;left:-20%;top:20%;width:140%;height:60%;background:radial-gradient(50% 50% at 50% 50%,rgba(39,208,122,.16),rgba(39,208,122,0) 70%);pointer-events:none;transition:opacity .9s ease-out}
.cp-flow .cp-rep{position:relative;z-index:1;isolation:isolate;display:flex;flex-direction:column;align-items:center;width:100%;max-width:340px;padding:14px 0 0;opacity:1;transform:none;transition:none}
.cp-rep-bg{position:absolute;inset:0;z-index:-2;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:linear-gradient(180deg,#121722 0%,#0b0e15 46%,#080a10 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -36px #000;transition:opacity .5s ease,transform .8s cubic-bezier(.2,1.25,.4,1)}
.cp-rep-bg::before{content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;background:linear-gradient(90deg,rgba(39,208,122,0),rgba(39,208,122,.9) 50%,rgba(39,208,122,0))}
.cp-rep-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;border-radius:11px 11px 0 0;background:radial-gradient(60% 100% at 50% 0,rgba(39,208,122,.13),rgba(39,208,122,0));opacity:.6}
.cp-flow .cp-rep-top{display:flex;align-self:stretch;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;margin:0 0 8px;transition:opacity .5s ease .15s}
.cp-flow .cp-rep-l{display:block;font:800 18px/1 var(--cp-sans);letter-spacing:-.02em;text-transform:none;color:var(--cp-text)}
.cp-flow .cp-rep-sub{font-size:12px;line-height:1.2;color:var(--cp-dim)}
.cp-flow .cp-rep-sum{position:relative;display:block;margin:6px 0 0;font:800 56px/.95 var(--cp-sans);letter-spacing:-.05em;color:var(--cp-up);white-space:nowrap}
.cp-flow .cp-rep-sum::after{content:none}
.cp-rep-glow{position:absolute;left:-12%;right:-12%;top:-30%;bottom:-30%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(39,208,122,.42),rgba(39,208,122,.12) 55%,rgba(39,208,122,0));opacity:.5;pointer-events:none}
.cp-steady{display:inline-grid;font-variant-numeric:tabular-nums}
.cp-steady>span{grid-area:1/1;justify-self:end}
.cp-steady>.cp-w{visibility:hidden}
.cp:lang(en) .cp-steady>span{justify-self:start}
.cp-kurve{position:relative;display:block;width:100%;height:36px;margin:2px 0 0;opacity:.6;overflow:hidden;transition:opacity .5s ease}
.cp-kurve-in{position:absolute;inset:8px 16px 0;transition:transform 1.2s cubic-bezier(.4,0,.2,1) .1s}
.cp-kurve svg{display:block;width:100%;height:100%;overflow:visible}
.cp-kurve polygon{fill:var(--cp-up);opacity:.14}
.cp-kurve polyline{fill:none;stroke:var(--cp-up);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cp-kurve-in i{position:absolute;right:0;top:12%;width:9px;height:9px;margin:-4.5px -4.5px 0 0;border-radius:50%;background:var(--cp-up)}
.cp-flow .cp-rep-zahlen{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:stretch;gap:0;margin:0;padding:12px 0 14px;border-top:0}
.cp-rep-zahlen::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--cp-hair);transition:opacity .5s ease}
.cp-flow .cp-rep-zahlen>span{display:flex;flex-direction:column;align-items:center;gap:4px;border-left:1px solid var(--cp-hair);transition:opacity .08s ease,transform .45s var(--cp-pop)}
.cp-flow .cp-rep-zahlen>span:first-child{border-left:0}
.cp-flow .cp-rep-zahlen b{display:inline-grid;font:800 24px/1 var(--cp-sans);letter-spacing:-.04em;color:var(--cp-text)}
.cp-flow .cp-rep-zahlen small{margin:0;font-size:12.5px;color:var(--cp-dim)}
.cp-rep-fx{position:absolute;inset:0;z-index:1;border-radius:12px;overflow:hidden;pointer-events:none}
.cp-rep-fx i{position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.07) 40%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.07) 60%,rgba(255,255,255,0));opacity:0;transform:translate3d(-110%,0,0) skewX(-16deg)}
/* Die Kiste: dunkles Glas, Absender, Feuer-Schloss, Feuerband mit „Report 1 · versiegelt“, Lichtnaht in der Mitte.
   Zwei Hälften (je die halbe Kiste), die beim Öffnen auseinanderfliegen. Ohne .cp-play unsichtbar. */
.cp-flow .cp-lid{position:absolute;z-index:2;inset:0;display:block;width:100%;max-width:300px;height:156px;margin:auto;filter:none;transform-origin:50% 50%;opacity:0;visibility:hidden;pointer-events:none}
.cp-lid-h{position:absolute;inset:0}
.cp-lid-a{clip-path:inset(0 50% 0 0)}
.cp-lid-b{clip-path:inset(0 0 0 50%)}
.cp-lid-box{position:absolute;inset:0;display:block;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:linear-gradient(180deg,#1b2130 0%,#0e121b 55%,#0a0c12 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 30px 50px -18px #000}
.cp-lid-box::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.07);border-radius:7px}
.cp-lid-top{position:absolute;left:18px;right:18px;top:17px;display:flex;align-items:center;justify-content:space-between}
.cp-lid-top small{font:600 13px/1 var(--cp-sans);color:var(--cp-mute)}
.cp-lid-top .cp-ic{width:17px;height:17px;color:var(--cp-fire);stroke-width:2}
.cp-lid-band{position:absolute;left:0;right:0;top:50%;height:42px;margin-top:-13px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--cp-fire);color:var(--cp-on-fire);box-shadow:0 0 34px rgba(255,61,20,.45)}
.cp-lid-band b{font:800 21px/1 var(--cp-sans);letter-spacing:-.03em}
.cp-lid-band small{font:700 12px/1 var(--cp-mono);letter-spacing:.02em}
.cp-naht{position:absolute;left:50%;top:-14%;bottom:-14%;width:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,214,190,.85) 30%,rgba(255,61,20,0));opacity:0;transform:scaleX(.4)}
.cp-blitz{position:absolute;z-index:3;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,.85) 25%,rgba(255,255,255,0));opacity:0;pointer-events:none}
.cp-strahlen{position:absolute;z-index:0;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.16) 0deg 2.5deg,rgba(255,255,255,0) 2.5deg 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,#0000 100%);mask:radial-gradient(closest-side,#000 18%,#0000 100%);opacity:0;pointer-events:none}
/* Ablauf */
.cp-fs3.cp-play .cp-lid{opacity:1;visibility:visible;animation:cp1-lade 2s linear forwards}
.cp-fs3.cp-play .cp-naht{animation:cp1-naht 2s linear forwards}
@keyframes cp1-lade{
  0%{opacity:0;transform:translate3d(0,26px,0) scale(.92);animation-timing-function:cubic-bezier(.2,1.2,.4,1)}
  35%{opacity:1;transform:none}
  38%{transform:translate3d(-3px,0,0) rotate(-.6deg)}
  43%{transform:translate3d(3px,0,0) rotate(.6deg)}
  49%{transform:none}
  64%{transform:translate3d(-7px,0,0) rotate(-1.5deg) scale(1.02)}
  70%{transform:translate3d(7px,0,0) rotate(1.5deg) scale(1.03)}
  76%{transform:translate3d(-4px,0,0) rotate(-.8deg) scale(1.03)}
  80%{opacity:1;transform:scale(1.03)}
  100%{opacity:1;transform:scale(1.05)}}
@keyframes cp1-naht{0%,35%{opacity:0;transform:scaleX(.4)}40%{opacity:.5}64%{opacity:.75}80%{opacity:.85;transform:scaleX(.9)}100%{opacity:1;transform:scaleX(1.1)}}
.cp-fs3.cp-play .cp-rep{opacity:0}
.cp-fs3.cp-play .cp-licht{opacity:0}
.cp-fs3.cp-play .cp-rep-bg{opacity:0;transform:scale(.965)}
.cp-fs3.cp-play .cp-rep-top,.cp-fs3.cp-play .cp-kurve,.cp-fs3.cp-play .cp-rep-zahlen::before{opacity:0}
.cp-fs3.cp-play .cp-kurve-in{transform:translate3d(-104%,0,0)}
.cp-fs3.cp-play .cp-rep-zahlen>span{opacity:0;transform:scale(.7)}
/* Schlag 1: auf. Hälften fliegen auseinander, Blitz, Strahlen, Funken, der Umsatz steigt aus dem Licht. */
.cp-fs3.cp-k1 .cp-lid-a{animation:cp1-links .8s cubic-bezier(.2,.7,.2,1) forwards}
.cp-fs3.cp-k1 .cp-lid-b{animation:cp1-rechts .8s cubic-bezier(.2,.7,.2,1) forwards}
.cp-fs3.cp-k1 .cp-naht{animation:cp1-aus .2s ease forwards}
@keyframes cp1-links{0%{transform:none}12%{opacity:1}52%{opacity:0}100%{opacity:0;transform:translate3d(-46%,6%,0) rotate(-8deg)}}
@keyframes cp1-rechts{0%{transform:none}12%{opacity:1}52%{opacity:0}100%{opacity:0;transform:translate3d(46%,6%,0) rotate(8deg)}}
.cp-fs3.cp-k1 .cp-blitz{animation:cp1-blitz .8s cubic-bezier(.1,.7,.2,1) both}
@keyframes cp1-blitz{0%{opacity:0;transform:scale(.2)}12%{opacity:1}100%{opacity:0;transform:scale(4.8)}}
.cp-fs3.cp-k1 .cp-strahlen{animation:cp1-strahl 1.8s ease-out .05s both}
@keyframes cp1-strahl{0%{opacity:0;transform:scale(.6) rotate(0)}18%{opacity:1}100%{opacity:0;transform:scale(1) rotate(24deg)}}
.cp-fs3.cp-k1 .cp-funken-rep>i>i{animation:cp1-spark .9s cubic-bezier(.15,.7,.3,1) calc(.05s + var(--d,0ms)) both}
.cp-fs3.cp-k1 .cp-rep{opacity:1;transition:opacity .3s ease .05s}
.cp-fs3.cp-k1 .cp-rep-sum{animation:cp1-win .85s cubic-bezier(.18,1.45,.4,1) .08s backwards}
@keyframes cp1-win{0%{opacity:0;transform:translate3d(0,40px,0) scale(.3)}30%{opacity:1}}
.cp-fs3.cp-k1 .cp-rep-glow{animation:cp1-glow 1.1s ease-out 1s backwards}
@keyframes cp1-glow{0%{opacity:0;transform:scale(.7)}25%{opacity:1;transform:scale(1.08)}100%{opacity:.5;transform:none}}
/* Schlag 2: die Karte. Fläche federt ein, Kopf, Kurve fährt ein, Trennlinie, grünes Bühnenlicht. */
.cp-fs3.cp-k2 .cp-rep-bg{opacity:1;transform:none}
.cp-fs3.cp-k2 .cp-rep-top,.cp-fs3.cp-k2 .cp-rep-zahlen::before,.cp-fs3.cp-k2 .cp-licht{opacity:1}
.cp-fs3.cp-k2 .cp-kurve{opacity:.6}
.cp-fs3.cp-k2 .cp-kurve-in{transform:none}
/* Schlag 3 bis 5: die Kennzahlen springen auf; danach atmet die Kante, ein Glanz läuft über die Karte. */
.cp-fs3.cp-k3 .cp-rep-zahlen>span:nth-child(1),.cp-fs3.cp-k4 .cp-rep-zahlen>span:nth-child(2),.cp-fs3.cp-k5 .cp-rep-zahlen>span:nth-child(3){opacity:1;transform:none}
.cp-fs3.cp-k5 .cp-rep-bg::after{animation:cp1-kante 1.6s ease-out .45s}
@keyframes cp1-kante{30%{opacity:1}}
.cp-fs3.cp-k5 .cp-rep-fx i{animation:cp1-sweep 1.4s cubic-bezier(.45,0,.2,1) .45s}
@keyframes cp1-sweep{0%{opacity:1;transform:translate3d(-110%,0,0) skewX(-16deg)}100%{opacity:1;transform:translate3d(330%,0,0) skewX(-16deg)}}

/* ---------- Takt 4 Entscheidung: drei Einsatz-Kacheln mit 3D-Bild, eine empfohlen; die Wahl bekommt orangenen Rahmen,
   leichtes Glühen und den Haken (kein Vollorange), die anderen treten zurück; am Ende eine ruhige Status-Pille ---------- */
.cp-flow .cp-kat-box{position:relative;padding:0;border:0;border-radius:0;background:none;transition:opacity .45s ease}
.cp-flow .cp-kat-h{display:block;text-align:center;font:800 21px/1.1 var(--cp-sans);letter-spacing:-.025em;text-transform:none;color:var(--cp-text)}
.cp-flow .cp-kat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}
.cp-flow .cp-fs4 .cp-kat li{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:7px 7px 10px;border:1px solid #303540;border-radius:8px;background:linear-gradient(180deg,#1e2129,#16191f);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 26px -16px #000;text-align:left;opacity:1;transform:none;transition:opacity .35s ease,transform .35s var(--cp-e)}
.cp-flow .cp-fs4 .cp-kat li:nth-child(n){transition-delay:0s}
.cp-flow .cp-fs4 .cp-kat li.cp-empf{border-color:#626d80}
.cp-flow .cp-kat .cp-kat-bild,.cp-flow .cp-kat li b{position:relative;z-index:1}
/* Glühen der Wahl: eigener Ring hinter der Kachel, nur die Deckkraft bewegt sich. */
.cp-flow .cp-fs4 .cp-kat li.cp-empf::after{content:"";position:absolute;z-index:-1;left:-1px;right:-1px;top:-1px;bottom:-1px;width:auto;height:auto;margin:0;border-radius:8px;background:none;box-shadow:0 0 0 1px rgba(255,61,20,.6),0 0 22px rgba(255,61,20,.38),0 0 44px rgba(255,61,20,.16);opacity:0;transition:opacity .4s ease}
.cp-flow .cp-kat li>.cp-kat-fx{position:absolute;z-index:0;inset:0;border-radius:7px;overflow:hidden;pointer-events:none}
.cp-kat-fx::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,61,20,.2),rgba(255,61,20,.05));opacity:0;transition:opacity .35s ease}
.cp-kat-fx::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.28) 50%,rgba(255,255,255,0));opacity:0;transform:translate3d(-110%,0,0) skewX(-18deg)}
.cp-kat-bild{display:grid;place-items:center;height:64px;border-radius:6px;isolation:isolate}
.cp-kat-bild::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:6px;background:linear-gradient(145deg,#2a2e39,#242832);transition:opacity .3s ease}
.cp-flow .cp-kat img{width:54px;height:auto;margin-top:4px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.cp-flow .cp-kat b{display:block;min-height:2.4em;padding:0 2px;font:800 12.5px/1.2 var(--cp-sans);letter-spacing:-.01em;color:var(--cp-text);text-wrap:balance;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.cp-flow .cp-kat li .cp-lbl{position:absolute;z-index:2;left:50%;top:-10px;height:19px;padding:0 6px;font-size:10px;transform:translateX(-50%);transition:opacity .15s ease}
.cp-flow .cp-kat .cp-ring{position:absolute;z-index:2;top:11px;right:11px;display:grid;place-items:center;width:19px;height:19px;border:1.5px solid #626d80;border-radius:50%;background:#15181e;color:var(--cp-on-fire)}
.cp-ring .cp-ic{width:12px;height:12px;stroke-width:3;opacity:0;transform:scale(.3)}
.cp-kat .cp-tap{top:22px;right:22px;margin:-22px -22px 0 0}
.cp-flow .cp-fs4 .cp-kat-all{height:44px;margin-top:14px;opacity:1;transition:opacity .35s ease}
.cp-flow .cp-weiter{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 8px;margin:0;opacity:0;transform:scale(.92);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.cp-flow .cp-weiter span{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 18px 0 16px;border:1px solid #303540;border-radius:999px;background:#15181e;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 30px -18px #000;font:700 15px/1.2 var(--cp-sans);letter-spacing:-.01em;color:var(--cp-text);text-align:center;white-space:nowrap}
.cp-flow .cp-weiter i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--cp-up);box-shadow:0 0 10px rgba(39,208,122,.8)}
/* Ablauf: Kacheln steigen auf, Finger, Wahl (Rahmen, Glühen, kurzer Glanz, Haken-Pop), die anderen treten zurück, weiter. */
.cp-fs4.cp-play .cp-kat-h{animation:cp1-fade .5s ease backwards}
.cp-fs4.cp-play .cp-kat li{animation:cp1-rise .5s var(--cp-e) backwards}
.cp-fs4.cp-play .cp-kat li:nth-child(2){animation-delay:.08s}
.cp-fs4.cp-play .cp-kat li:nth-child(3){animation-delay:.16s}
.cp-fs4.cp-play .cp-kat-all{animation:cp1-rise .5s var(--cp-e) .24s backwards}
.cp-fs4.cp-k1 .cp-tap{opacity:1;transform:none}
.cp-fs4.cp-k2 .cp-tap{transform:scale(.8);animation:cp1-aus .3s ease .35s forwards}
.cp-flow .cp-fs4.cp-k2 .cp-kat li.cp-empf{border-color:var(--cp-fire);transition:border-color 0s linear .22s;animation:cp1-stake .5s var(--cp-pop) .22s}
@keyframes cp1-stake{40%{transform:scale(1.035)}}
.cp-flow .cp-fs4.cp-k2 .cp-kat li.cp-empf::after{opacity:1;transition-delay:.22s}
.cp-fs4.cp-k2 .cp-empf .cp-kat-fx::before{opacity:1;transition-delay:.22s}
.cp-fs4.cp-k2 .cp-empf .cp-kat-fx::after{animation:cp1-shine .65s cubic-bezier(.4,0,.2,1) .3s}
@keyframes cp1-shine{0%{opacity:1;transform:translate3d(-110%,0,0) skewX(-18deg)}100%{opacity:1;transform:translate3d(260%,0,0) skewX(-18deg)}}
.cp-fs4.cp-k2 .cp-empf .cp-kat-bild::before{opacity:0}
.cp-fs4.cp-k2 .cp-empf .cp-ring{border-color:var(--cp-fire);background:var(--cp-fire);box-shadow:0 0 12px rgba(255,61,20,.6);transition:border-color 0s linear .3s,background-color 0s linear .3s,box-shadow 0s linear .3s;animation:cp1-pop .45s var(--cp-pop) .3s}
.cp-fs4.cp-k2 .cp-empf .cp-ring .cp-ic{opacity:1;transform:none;transition:opacity .15s ease .32s,transform .45s var(--cp-pop) .32s}
.cp-flow .cp-fs4.cp-k2 .cp-kat li:not(.cp-empf){transform:scale(.97);animation:none}
.cp-flow .cp-fs4.cp-k2 .cp-kat li:not(.cp-empf)>*{opacity:.35;transition:opacity .35s ease}
.cp-flow .cp-fs4.cp-k2 .cp-kat-all{opacity:.35}
.cp-flow .cp-fs4.cp-k3 .cp-kat-box{opacity:.16}
.cp-flow .cp-fs4.cp-k3 .cp-weiter{opacity:1;transform:none;transition:opacity .45s ease .3s,transform .6s cubic-bezier(.2,1.3,.4,1) .3s}


/* ---------- Takt 5 Website (Aufnahme-Anleitung, Szene 2): drei gezeichnete Website-Vorschauen (Kopfzeile mit drei
   Punkten, Bild, zwei Zeilen, Knopf), jede in einer anderen Farbe; der Finger wählt die zweite, dann „Gründen“ in Feuer ---------- */
.cp-flow .cp-fs5 .cp-kat li{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:7px 7px 10px;border:1px solid #303540;border-radius:8px;background:linear-gradient(180deg,#1e2129,#16191f);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 26px -16px #000;text-align:left;opacity:1;transform:none;transition:opacity .35s ease,transform .35s var(--cp-e)}
.cp-flow .cp-fs5 .cp-kat li:nth-child(n){transition-delay:0s}
.cp-flow .cp-fs5 .cp-kat li.cp-empf{border-color:#626d80}
.cp-flow .cp-fs5 .cp-kat li.cp-empf::after{content:"";position:absolute;z-index:-1;left:-1px;right:-1px;top:-1px;bottom:-1px;width:auto;height:auto;margin:0;border-radius:8px;background:none;box-shadow:0 0 0 1px rgba(255,61,20,.6),0 0 22px rgba(255,61,20,.38),0 0 44px rgba(255,61,20,.16);opacity:0;transition:opacity .4s ease}
.cp-flow .cp-fs5 .cp-kat b{min-height:0}
.cp-web-bild{display:flex;flex-direction:column;gap:4px;height:72px;padding:5px 6px;overflow:hidden;border-radius:6px;background:#fff}
.cp-web-bild::before{content:none}
.cp-web-top{display:flex;gap:3px}
.cp-web-top i{width:4px;height:4px;border-radius:50%;background:#d4d7df}
.cp-web-hero{display:block;height:22px;border-radius:3px;background:linear-gradient(135deg,var(--cp-web,#3b82f6),rgba(255,255,255,.35))}
.cp-web-z{display:block;width:88%;height:4px;border-radius:2px;background:#dfe2e8}
.cp-web-z2{width:62%}
.cp-web-btn{display:block;width:40%;height:8px;margin-top:auto;border-radius:3px;background:var(--cp-web,#3b82f6)}
.cp-web li:nth-child(1){--cp-web:#2f6df6}
.cp-web li:nth-child(2){--cp-web:var(--cp-fire)}
.cp-web li:nth-child(3){--cp-web:#1fb27a}
.cp-flow .cp-fs5 .cp-kat .cp-ring{top:auto;bottom:9px;right:8px;width:17px;height:17px}
.cp-flow .cp-fs5 .cp-kat b{text-align:left;padding-right:22px}
.cp-flow .cp-fs5 .cp-kat .cp-tap{top:50%;right:50%;margin:-22px -22px 0 0}
.cp-flow .cp-fs5 .cp-kat-go{background:var(--cp-fire);color:var(--cp-on-fire);font-weight:800;opacity:0;transform:translate3d(0,8px,0);transition:opacity .35s ease,transform .35s var(--cp-e)}
/* Ablauf: Kacheln steigen auf, Finger, Wahl (Rahmen, Glühen, Haken-Pop), die anderen treten zurück, „Gründen“ erscheint. */
.cp-fs5.cp-play .cp-kat-h{animation:cp1-fade .5s ease backwards}
.cp-fs5.cp-play .cp-kat li{animation:cp1-rise .5s var(--cp-e) backwards}
.cp-fs5.cp-play .cp-kat li:nth-child(2){animation-delay:.08s}
.cp-fs5.cp-play .cp-kat li:nth-child(3){animation-delay:.16s}
.cp-fs5.cp-k1 .cp-tap{opacity:1;transform:none}
.cp-fs5.cp-k2 .cp-tap{transform:scale(.8);animation:cp1-aus .3s ease .35s forwards}
.cp-flow .cp-fs5.cp-k2 .cp-kat li.cp-empf{border-color:var(--cp-fire);transition:border-color 0s linear .22s;animation:cp1-stake .5s var(--cp-pop) .22s}
.cp-flow .cp-fs5.cp-k2 .cp-kat li.cp-empf::after{opacity:1;transition-delay:.22s}
.cp-fs5.cp-k2 .cp-empf .cp-kat-fx::before{opacity:1;transition-delay:.22s}
.cp-fs5.cp-k2 .cp-empf .cp-kat-fx::after{animation:cp1-shine .65s cubic-bezier(.4,0,.2,1) .3s}
.cp-fs5.cp-k2 .cp-empf .cp-ring{border-color:var(--cp-fire);background:var(--cp-fire);box-shadow:0 0 12px rgba(255,61,20,.6);transition:border-color 0s linear .3s,background-color 0s linear .3s,box-shadow 0s linear .3s;animation:cp1-pop .45s var(--cp-pop) .3s}
.cp-fs5.cp-k2 .cp-empf .cp-ring .cp-ic{opacity:1;transform:none;transition:opacity .15s ease .32s,transform .45s var(--cp-pop) .32s}
.cp-flow .cp-fs5.cp-k2 .cp-kat li:not(.cp-empf){transform:scale(.97);animation:none}
.cp-flow .cp-fs5.cp-k2 .cp-kat li:not(.cp-empf)>*{opacity:.35;transition:opacity .35s ease}
.cp-flow .cp-fs5.cp-k3 .cp-kat-go{opacity:1;transform:none}
.cp-fs5.cp-k3 .cp-kat-go{animation:cp1-stake .5s var(--cp-pop) .2s}


/* ---------- Takt 6 Hook (Video aufnehmen): ein Sucher-Bild. Dunkle Fläche, vier Ecken, roter REC-Punkt (pulst),
   die Zeit zählt 00:00 bis 00:03 (cp.js), mittig der Beispiel-Hook Wort für Wort (kinetische Typo, 22px/750),
   unten „Du, in die Kamera“. Ohne .cp-play (ohne Skript) steht der ganze Satz. ---------- */
.cp-flow .cp-cam{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:230px;padding:44px 22px 40px;border-radius:10px;background:radial-gradient(120% 90% at 50% 30%,#171a22,#0a0b0f 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 60px rgba(0,0,0,.6)}
.cp-cam-e{position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.55);pointer-events:none}
.cp-cam-e1{left:12px;top:12px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.cp-cam-e2{right:12px;top:12px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.cp-cam-e3{left:12px;bottom:12px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.cp-cam-e4{right:12px;bottom:12px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.cp-cam-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:14px 20px 0;font:700 12px/1 var(--cp-mono);letter-spacing:.06em;color:var(--cp-dim)}
.cp-cam-rec{display:inline-flex;align-items:center;gap:6px;color:#fff}
.cp-cam-rec i{width:8px;height:8px;border-radius:50%;background:#ff2d2d;box-shadow:0 0 10px rgba(255,45,45,.8);animation:cp1-rec 1.1s ease-in-out infinite}
@keyframes cp1-rec{50%{opacity:.25}}
.cp-cam-zeit{font-variant-numeric:tabular-nums}
.cp-cam-txt{margin:0;max-width:22ch;font:750 22px/1.25 var(--cp-sans);letter-spacing:-.02em;color:#fff;text-align:center;text-wrap:balance}
.cp-cam-w{display:inline-block;opacity:1;transform:none}
.cp-cam-du{position:absolute;left:0;right:0;bottom:16px;font:600 12.5px/1.2 var(--cp-sans);color:var(--cp-dim);text-align:center}
/* Ablauf: jedes Wort steigt kurz auf, eins nach dem anderen (Index --w aus dem Markup). */
.cp-fs6.cp-play .cp-cam-w{opacity:0;transform:translate3d(0,10px,0) scale(.96);animation:cp1-wort .42s var(--cp-pop) calc(.55s + var(--w,0) * .26s) forwards}
@keyframes cp1-wort{to{opacity:1;transform:none}}
.cp-fs6.cp-play .cp-cam-du{animation:cp1-fade .5s ease 2.6s backwards}

/* ---------- Takt 7 Abschluss (Call to Action): „Kommentier FIRMA“, darunter eine Kommentar-Zeile wie bei
   Instagram: der Kommentar erscheint (Schlag 2) und bekommt ein Herz (Schlag 3); die Eingabe-Zeile darunter tippt
   FIRMA (cp.js), der Senden-Pfeil leuchtet auf (Schlag 1). Ohne .cp-play: Kommentar gesendet, Feld leer. ---------- */
.cp-flow .cp-kom{display:flex;flex-direction:column;justify-content:center;gap:16px;height:100%;padding:8px 6px 4px}
.cp-kom-h{margin:0 0 6px;font:750 22px/1.2 var(--cp-sans);letter-spacing:-.02em;color:#fff;text-align:center;text-wrap:balance}
.cp-kom-av{display:block;flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#3a3f4c,#23262e);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.cp-kom-av2{background:linear-gradient(145deg,#ff7a55,#ff3d14)}
.cp-kom-post{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 4px 12px;border-bottom:1px solid var(--cp-hair);opacity:1;transform:none}
.cp-kom-post-t{flex:1;min-width:0;font:700 17px/1.2 var(--cp-sans);letter-spacing:.02em;color:#fff}
.cp-kom-herz{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;color:#ff2d55}
.cp-kom-herz .cp-ic{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.5}
.cp-kom-feld{display:flex;align-items:center;gap:12px}
.cp-kom-in{position:relative;display:flex;align-items:center;flex:1;min-width:0;height:46px;padding:0 48px 0 16px;border:1px solid var(--cp-hair-2);border-radius:999px;background:rgba(255,255,255,.05);font:600 16px/1 var(--cp-sans);color:#fff;white-space:nowrap;overflow:hidden}
.cp-kom-txt{letter-spacing:.02em}
.cp-kom-ph{color:var(--cp-mute);font-weight:500}
.cp-kom-txt:not(:empty)+.cp-kom-ph{display:none}
.cp-kom-caret{display:none;width:2px;height:20px;margin-left:2px;background:#fff;animation:cp1-blink 1s steps(1) infinite}
.cp-kom-send{position:absolute;right:66px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--cp-mute);transition:background .25s ease,color .25s ease,transform .25s var(--cp-pop)}
.cp-kom-feld{position:relative}
.cp-kom-feld .cp-kom-send{right:6px}
.cp-kom-send .cp-ic{width:17px;height:17px;stroke-width:2.2;transform:translate3d(-1px,1px,0)}
/* Ablauf */
.cp-fs7.cp-play .cp-kom-h{animation:cp1-rise .5s var(--cp-e) backwards}
.cp-fs7.cp-play .cp-kom-post{opacity:0;transform:translate3d(0,10px,0);transition:opacity .4s ease,transform .5s var(--cp-pop)}
.cp-fs7.cp-play .cp-kom-herz{opacity:0;transform:scale(.3)}
.cp-fs7.cp-play .cp-kom-caret{display:block}
.cp-fs7.cp-play .cp-kom-ph{animation:cp1-fade .3s ease .2s backwards}
.cp-fs7.cp-k1 .cp-kom-send{background:var(--cp-fire);color:var(--cp-on-fire);transform:scale(1.08);box-shadow:0 0 16px rgba(255,61,20,.6)}
.cp-fs7.cp-k2 .cp-kom-send{transform:none;box-shadow:none;transition:transform .3s ease,box-shadow .3s ease}
.cp-fs7.cp-k2 .cp-kom-post{opacity:1;transform:none}
.cp-fs7.cp-k2 .cp-kom-caret{display:none}
.cp-fs7.cp-k3 .cp-kom-herz{opacity:1;transform:none;animation:cp1-herz .6s var(--cp-pop) both}
@keyframes cp1-herz{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:none}}

/* ---------- Die Video-Leiste auf der Bühne: data-b der Bühne wählt das Segment (6 → Hook, 1 → 1, 5 → 2, 3 → 3,
   4 → 4, 7 → Abschluss); der Feuer-Balken läuft über die Dauer des Takts (--takt aus cp.js). ---------- */

/* ---------- Eine Bühne mit nur einem Takt (Aufnahme-Anleitung): ohne Reiter, etwas niedriger ---------- */
.cp-flow-solo{margin:0 0 18px}
.cp-flow-solo .cp-flow-stage{height:330px}
.cp-flow-solo .cp-fs{padding:12px 14px 14px}
.cp-flow-solo[data-folge="1"] .cp-flow-stage{height:240px}
.cp-flow-solo[data-folge="5"] .cp-flow-stage{height:300px}
.cp-flow-solo[data-folge="6"] .cp-flow-stage{height:270px}
.cp-flow-solo[data-folge="7"] .cp-flow-stage{height:280px}
/* Die ganze Folge (Seite 1 „So ist dein Video aufgebaut“): wie die Bühne von Bildschirm 1 */
.cp-flow-video .cp-flow-stage{height:350px}

/* ---------- Breiter (ab 600px): größere Bühne ---------- */
@media (min-width:600px){
  .cp-flow{--stub:136px}
  .cp-flow-stage{height:380px}
  .cp-flow .cp-idee{height:86px}
  .cp-idee-in{padding:0 18px 0 38px;font-size:20px}
  .cp-flow .cp-caret{left:19px;height:28px;margin-top:-14px}
  .cp-idee-go{font-size:18px}
  .cp-uhr b{font-size:40px}
  .cp-flow .cp-fs2 .cp-prot .cp-agents li{grid-template-columns:118px minmax(0,1fr) auto 18px;grid-template-areas:"a x t s";gap:12px;min-height:40px}
  .cp-flow .cp-fs2 .cp-prot .cp-agents .cp-ag-txt{font-size:14px}
  .cp-flow .cp-rep{max-width:400px}
  .cp-flow .cp-rep-sum{font-size:68px}
  .cp-flow .cp-lid{max-width:360px;height:180px}
  .cp-kat-bild{height:78px}
  .cp-flow .cp-kat img{width:70px}
  .cp-flow .cp-kat b{font-size:14.5px;-webkit-hyphens:manual;hyphens:manual}
  .cp-flow .cp-weiter span{font-size:16px}
  .cp-flow-solo .cp-flow-stage{height:330px}
  .cp-flow-video .cp-flow-stage{height:380px}
  .cp-cam-txt{font-size:26px}
  .cp-kom-h{font-size:24px}
  .cp-web-bild{height:86px}
}

/* ---------- Reduzierte Bewegung: Endbild, ohne Licht, Finger und Funken ---------- */
@media (prefers-reduced-motion:reduce){
  .cp-flow .cp-tap,.cp-burst,.cp-funken,.cp-blitz,.cp-strahlen,.cp-idee::after{display:none}
  .cp-prot-st i,.cp-crew li::before,.cp-ag-st::before,.cp-cam-rec i{animation:none}
}