/* dauerschicht.com — Vorschau-Animationsloops der Produkt-Kacheln.
   Vier Inline-SVG-Szenen (viewBox 480x300) in den .tile-well-Flächen von index.html:
   pv-chat (Chatbot), pv-report (Berichte), pv-seo (Google), pv-auto (Automatisierung).
   Konventionen: Master-Takt pro Szene, Choreografie über Keyframe-Prozente,
   Basis-Markup = fertiges Endbild (=> prefers-reduced-motion zeigt Standbild),
   nur transform/opacity/stroke-dash animiert, IDs namespaced (pvc-/pvr-/pvs-/pva-).
   Ensemble-Phasenlage: pv-chat 0s, pv-report -4s, pv-seo -8s (uniforme negative
   Delays, drift-frei), pv-auto laeuft inhaerent nahtlos. */

.tile-well svg.pv { width: 100%; height: 100%; display: block; }

/* ============================================================
   Szene 1 · pv-chat — „Der Website-Assistent"
   Master-Takt: 12 s (1 % = 120 ms). Choreografie ausschließlich
   über Keyframe-Prozente, keine animation-delays.
   Ensemble-Phasenlage: pv-chat ist die Referenz-Szene und läuft
   OHNE Versatz (delay 0); pv-report (-4s) und pv-seo (-8s) werden
   per uniformem negativem Delay gegen sie verschoben.
   Dauer-Elemente laufen mit ganzzahligen Zyklen pro 12 s und
   sind daher am Loop-Übergang nahtlos:
   Caret 1 s (12×), Status-Atmen 3 s (4×), Typing-Punkte 1,2 s (10×).
   Das ✓ in Bot-Bubble 2 ist ein gezeichneter Stroke-Pfad (pva-Stil),
   keine Text-Glyphe — U+2713 fehlt in Manrope.
   ============================================================ */

.pv-chat text {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

.pv-chat .pvc-msg,
.pv-chat .pvc-typing,
.pv-chat .pvc-status-pulse {
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Basis-Markup = fertiges End-Bild: Typing-Bubbles sind dort unsichtbar
   (greift auch bei prefers-reduced-motion, wenn animation: none gilt) */
.pv-chat .pvc-typing { opacity: 0; }

.pv-chat .pvc-u1 { animation-name: pvc-kf-u1; }
.pv-chat .pvc-t1 { animation-name: pvc-kf-t1; }
.pv-chat .pvc-b1 { animation-name: pvc-kf-b1; }
.pv-chat .pvc-u2 { animation-name: pvc-kf-u2; }
.pv-chat .pvc-t2 { animation-name: pvc-kf-t2; }
.pv-chat .pvc-b2 { animation-name: pvc-kf-b2; }
.pv-chat .pvc-status-pulse { animation-name: pvc-kf-status-pulse; }

/* Dauer-Elemente (ganzzahlige Zyklen pro 12-s-Takt, s. o.) */
.pv-chat .pvc-status-dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pvc-kf-breathe 3s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.pv-chat .pvc-caret {
  animation: pvc-kf-caret 1s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.pv-chat .pvc-dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pvc-kf-dot-a 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
.pv-chat .pvc-dot-b { animation-name: pvc-kf-dot-b; }
.pv-chat .pvc-dot-c { animation-name: pvc-kf-dot-c; }

/* --- Beat 1 · 6–11 % (600 ms): User-Bubble „Liefern Sie auch samstags?"
       slide-in von rechts+unten; 90–98 % gemeinsamer Fade-out --- */
@keyframes pvc-kf-u1 {
  0%, 6%     { opacity: 0; transform: translate(8px, 8px); }
  11%        { opacity: 1; transform: translate(0, 0); }
  90%        { opacity: 1; transform: translate(0, 0); }
  98%        { opacity: 0; transform: translate(0, 0); }
  100%       { opacity: 0; transform: translate(8px, 8px); }
}

/* --- Beat 2 · 14–17 % rein (360 ms), 26–28 % raus (240 ms): Typing 1 --- */
@keyframes pvc-kf-t1 {
  0%, 14%    { opacity: 0; transform: translateY(4px); }
  17%        { opacity: 1; transform: translateY(0); }
  26%        { opacity: 1; transform: translateY(0); }
  28%        { opacity: 0; transform: translateY(0); }
  29%, 100%  { opacity: 0; transform: translateY(4px); }
}

/* --- Beat 3 · 28–31 % (360 ms): Bot-Bubble 1 (2 Zeilen) --- */
@keyframes pvc-kf-b1 {
  0%, 28%    { opacity: 0; transform: translate(-8px, 8px); }
  31%        { opacity: 1; transform: translate(0, 0); }
  90%        { opacity: 1; transform: translate(0, 0); }
  98%        { opacity: 0; transform: translate(0, 0); }
  100%       { opacity: 0; transform: translate(-8px, 8px); }
}

/* --- Beat 4 · 38–43 % (600 ms): User-Bubble „Ja, gerne!" --- */
@keyframes pvc-kf-u2 {
  0%, 38%    { opacity: 0; transform: translate(8px, 8px); }
  43%        { opacity: 1; transform: translate(0, 0); }
  90%        { opacity: 1; transform: translate(0, 0); }
  98%        { opacity: 0; transform: translate(0, 0); }
  100%       { opacity: 0; transform: translate(8px, 8px); }
}

/* --- Beat 5 · 46–48,5 % rein, Hold bis 54 %, 54–56 % raus: Typing 2.
       Fade-out startet exakt mit dem Einblende-Start von pvc-b2 (54 %)
       und überlappt minimal (Cross-Fade 54–56 %) — kein toter Beat. --- */
@keyframes pvc-kf-t2 {
  0%, 46%    { opacity: 0; transform: translateY(4px); }
  48.5%      { opacity: 1; transform: translateY(0); }
  54%        { opacity: 1; transform: translateY(0); }
  56%        { opacity: 0; transform: translateY(0); }
  57%, 100%  { opacity: 0; transform: translateY(4px); }
}

/* --- Beat 6 · 54–58 % (480 ms): Bot-Bubble „Erledigt ✓ …" (✓ = Stroke-Pfad,
       Teil der Gruppe); 58–90 % Ruhe-Hold (= Reduced-Motion-Standbild) --- */
@keyframes pvc-kf-b2 {
  0%, 54%    { opacity: 0; transform: translate(-8px, 8px); }
  58%        { opacity: 1; transform: translate(0, 0); }
  90%        { opacity: 1; transform: translate(0, 0); }
  98%        { opacity: 0; transform: translate(0, 0); }
  100%       { opacity: 0; transform: translate(-8px, 8px); }
}

/* --- Status-Punkt pulst einmal sanft zum ✓ (58–62,5 %) --- */
@keyframes pvc-kf-status-pulse {
  0%, 58%     { transform: scale(1); }
  60%         { transform: scale(1.35); }
  62.5%, 100% { transform: scale(1); }
}

/* --- Dauerhaft: Status-Punkt atmet dezent (3 s = 4 Zyklen/Takt) --- */
@keyframes pvc-kf-breathe {
  0%         { transform: scale(1);    opacity: 0.85; }
  50%        { transform: scale(1.25); opacity: 1; }
  100%       { transform: scale(1);    opacity: 0.85; }
}

/* --- Dauerhaft: Caret blinkt dezent (1 s = 12 Zyklen/Takt) --- */
@keyframes pvc-kf-caret {
  0%, 40%    { opacity: 1; }
  50%, 90%   { opacity: 0; }
  100%       { opacity: 1; }
}

/* --- Typing-Punkte: 1,2 s = 10 Zyklen/Takt, Versatz über Prozente --- */
@keyframes pvc-kf-dot-a {
  0%         { transform: translateY(0);      opacity: 0.4; }
  25%        { transform: translateY(-3.5px); opacity: 1; }
  50%, 100%  { transform: translateY(0);      opacity: 0.4; }
}
@keyframes pvc-kf-dot-b {
  0%, 15%    { transform: translateY(0);      opacity: 0.4; }
  40%        { transform: translateY(-3.5px); opacity: 1; }
  65%, 100%  { transform: translateY(0);      opacity: 0.4; }
}
@keyframes pvc-kf-dot-c {
  0%, 30%    { transform: translateY(0);      opacity: 0.4; }
  55%        { transform: translateY(-3.5px); opacity: 1; }
  80%, 100%  { transform: translateY(0);      opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-chat * { animation: none !important; }
}

/* ============================================================
   Szene 2 — pv-report · „Der Berichte-Automat“
   Master-Takt: 12 s · alle Elemente gleiche Duration, Choreografie
   über Keyframe-Prozente (1 % = 120 ms).
   Ensemble-Phasenversatz: uniformer negativer Delay -4 s auf ALLE
   animierten Elemente (pv-chat 0 s, pv-seo -8 s) — driftet nicht,
   hält die Szene intern synchron, versetzt nur den Startpunkt.
   ============================================================ */

.pv-report text {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

.pv-report .pvr-chip,
.pv-report .pvr-kpi,
.pv-report .pvr-bar,
.pv-report .pvr-line,
.pv-report .pvr-dot,
.pv-report .pvr-badge,
.pv-report .pvr-fmt {
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: -4s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Balken wachsen von der Baseline */
.pv-report .pvr-bar { transform-origin: 50% 100%; }

/* Transiente Datei-Chips: im statischen Endbild (reduced motion) unsichtbar */
.pv-report .pvr-chip { opacity: 0; }

/* Linie: Basiszustand = voll gezeichnet (Pfadlänge ≈ 243,4 → dasharray 260) */
.pv-report .pvr-line { stroke-dasharray: 260; stroke-dashoffset: 0; }

/* Marker-Atmen: Sub-Animation, 3 s = exakt 4 Zyklen pro 12-s-Loop → nahtlos.
   Gleicher -4-s-Ensemble-Delay wie alle anderen Elemente. */
.pv-report .pvr-dot-pulse {
  animation: pvr-dot-breathe 3s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation-delay: -4s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pv-report .pvr-chip-1 { animation-name: pvr-chip1; }
.pv-report .pvr-chip-2 { animation-name: pvr-chip2; }
.pv-report .pvr-chip-3 { animation-name: pvr-chip3; }
.pv-report .pvr-kpi-1  { animation-name: pvr-kpi1; }
.pv-report .pvr-kpi-2  { animation-name: pvr-kpi2; }
.pv-report .pvr-kpi-3  { animation-name: pvr-kpi3; }
.pv-report .pvr-bar-1  { animation-name: pvr-bar1; }
.pv-report .pvr-bar-2  { animation-name: pvr-bar2; }
.pv-report .pvr-bar-3  { animation-name: pvr-bar3; }
.pv-report .pvr-bar-4  { animation-name: pvr-bar4; }
.pv-report .pvr-bar-5  { animation-name: pvr-bar5; }
.pv-report .pvr-bar-6  { animation-name: pvr-bar6; }
.pv-report .pvr-line   { animation-name: pvr-line; }
.pv-report .pvr-dot-1  { animation-name: pvr-dot1; }
.pv-report .pvr-dot-2  { animation-name: pvr-dot2; }
.pv-report .pvr-dot-3  { animation-name: pvr-dot3; }
.pv-report .pvr-badge  { animation-name: pvr-badge; }
.pv-report .pvr-fmt-1  { animation-name: pvr-fmt1; }
.pv-report .pvr-fmt-2  { animation-name: pvr-fmt2; }
.pv-report .pvr-fmt-3  { animation-name: pvr-fmt3; }

/* --- 6–16 %: Datei-Chips fliegen von links oben ein (Flug 4 % = 480 ms,
       Absorption 1,8 % = 216 ms). Flugbahn bleibt unterhalb der Kopfzeile.
       Bei 0 % und 100 % unsichtbar → nahtlos. --- */
@keyframes pvr-chip1 {
  0%, 6%      { opacity: 0; transform: translate(-225px, -52px) scale(1); }
  7.2%        { opacity: 1; }
  10%         { opacity: 1; transform: translate(0, 0) scale(1); }
  11.8%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
}
@keyframes pvr-chip2 {
  0%, 8%      { opacity: 0; transform: translate(-250px, -70px) scale(1); }
  9.2%        { opacity: 1; }
  12%         { opacity: 1; transform: translate(0, 0) scale(1); }
  13.8%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
}
@keyframes pvr-chip3 {
  0%, 10%     { opacity: 0; transform: translate(-230px, -88px) scale(1); }
  11.2%       { opacity: 1; }
  14%         { opacity: 1; transform: translate(0, 0) scale(1); }
  15.8%, 100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
}

/* --- 16–24 %: KPI-Tiles gestaffelt (Rise 3,5 % = 420 ms, Versatz 2 %) --- */
@keyframes pvr-kpi1 {
  0%, 16%    { opacity: 0; transform: translateY(6px); }
  19.5%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100%  { opacity: 0; transform: translateY(6px); }
}
@keyframes pvr-kpi2 {
  0%, 18%    { opacity: 0; transform: translateY(6px); }
  21.5%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100%  { opacity: 0; transform: translateY(6px); }
}
@keyframes pvr-kpi3 {
  0%, 20%    { opacity: 0; transform: translateY(6px); }
  23.5%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100%  { opacity: 0; transform: translateY(6px); }
}

/* --- 24–33 %: Balken (Wachstum 4 % = 480 ms, Versatz 1 % = 120 ms) --- */
@keyframes pvr-bar1 { 0%, 24% { transform: scaleY(0); } 28%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes pvr-bar2 { 0%, 25% { transform: scaleY(0); } 29%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes pvr-bar3 { 0%, 26% { transform: scaleY(0); } 30%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes pvr-bar4 { 0%, 27% { transform: scaleY(0); } 31%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes pvr-bar5 { 0%, 28% { transform: scaleY(0); } 32%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
@keyframes pvr-bar6 { 0%, 29% { transform: scaleY(0); } 33%, 90% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }

/* --- 33–41 %: Amber-Linie zeichnet sich LINEAR (Zeit ∝ Pfadlänge → Marker
       synchron zur Linien-Spitze); Rückblende über Opacity, danach
       Offset-Reset im Unsichtbaren → 0 % == 100 % exakt --- */
@keyframes pvr-line {
  0%, 33% { stroke-dashoffset: 260; opacity: 1; animation-timing-function: linear; }
  41%     { stroke-dashoffset: 0;   opacity: 1; }
  90%     { stroke-dashoffset: 0;   opacity: 1; }
  96%     { stroke-dashoffset: 0;   opacity: 0; }
  97%     { stroke-dashoffset: 260; opacity: 0; }
  100%    { stroke-dashoffset: 260; opacity: 1; }
}

/* --- Marker poppen, wenn die (lineare) Linien-Spitze sie erreicht:
       dasharray 260, Draw 33→41 % → Spitze bei Pfad-px 49 / 146 / 243,4
       = 34,51 / 37,49 / 40,49 % --- */
@keyframes pvr-dot1 {
  0%, 34.5% { opacity: 0; transform: scale(0); }
  36%       { opacity: 1; transform: scale(1.25); }
  37%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes pvr-dot2 {
  0%, 37.5% { opacity: 0; transform: scale(0); }
  39%       { opacity: 1; transform: scale(1.25); }
  40%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes pvr-dot3 {
  0%, 40.5% { opacity: 0; transform: scale(0); }
  42%       { opacity: 1; transform: scale(1.25); }
  43%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0); }
}

/* --- Dauer-Leben im Ruhe-Hold: Amber-Marker atmen dezent (4 × 3 s) --- */
@keyframes pvr-dot-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* --- 46–54 %: Erfolgs-Moment (Gradient-Pille poppt, Format-Chips faden) --- */
@keyframes pvr-badge {
  0%, 46%   { opacity: 0; transform: scale(0.7); }
  48.5%     { opacity: 1; transform: scale(1.04); }
  50%, 90%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.7); }
}
@keyframes pvr-fmt1 {
  0%, 48.5% { opacity: 0; transform: translateY(5px); }
  51%, 90%  { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(5px); }
}
@keyframes pvr-fmt2 {
  0%, 50%    { opacity: 0; transform: translateY(5px); }
  52.5%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100%  { opacity: 0; transform: translateY(5px); }
}
@keyframes pvr-fmt3 {
  0%, 51.5% { opacity: 0; transform: translateY(5px); }
  54%, 90%  { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-report * { animation: none !important; }
}

/* Szene 3 — pv-seo · Google / Die Ratgeber-Fabrik (Master-Takt 12 s, 1 % = 120 ms) */
.pv-seo text { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }
.pv-seo .pvs-query { font-size: 12.5px; font-weight: 600; fill: #3C4043; }
.pv-seo .pvs-site  { font-size: 12.5px; font-weight: 700; fill: #1F2430; letter-spacing: 0.01em; }
.pv-seo .pvs-count { font-size: 12px; font-weight: 700; fill: #FFFFFF; letter-spacing: 0.02em; }
.pv-seo .pvs-p1 text { font-size: 11px; font-weight: 700; fill: #FFFFFF; letter-spacing: 0.02em; }

.pv-seo .pvs-anim {
  animation-duration: 12s;
  animation-delay: -8s; /* Ensemble-Phasenversatz: pv-chat 0 s, pv-report -4 s, pv-seo -8 s — uniform pro Szene, driftet nicht */
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.pv-seo .pvs-sheet,
.pv-seo .pvs-row,
.pv-seo .pvs-counter,
.pv-seo .pvs-fav,
.pv-seo .pvs-p1 {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.pv-seo .pvs-sheet-b   { animation-name: pvs-kf-sheet-b; }
.pv-seo .pvs-sheet-c   { animation-name: pvs-kf-sheet-c; }
.pv-seo .pvs-sheet-d   { animation-name: pvs-kf-sheet-d; }
.pv-seo .pvs-counter   { animation-name: pvs-kf-count-pop; }
.pv-seo .pvs-count-12  { animation-name: pvs-kf-count-12; }
.pv-seo .pvs-count-87  { animation-name: pvs-kf-count-87; }
.pv-seo .pvs-count-214 { animation-name: pvs-kf-count-214; }
.pv-seo .pvs-count-300 { animation-name: pvs-kf-count-300; }
.pv-seo .pvs-row-cust  { animation-name: pvs-kf-rise; }
.pv-seo .pvs-row-n     { animation-name: pvs-kf-drop; }
.pv-seo .pvs-shimmer   { animation-name: pvs-kf-shimmer; }
.pv-seo .pvs-p1        { animation-name: pvs-kf-p1; }
.pv-seo .pvs-fav       { animation-name: pvs-kf-fav; }

/* Blätter fächern auf (Landung je 480 ms bei 14/22/30 %).
   Rückbau als sichtbarer Stapel-Kollaps von oben nach unten: d weg bis 92.8 %, c bis 94.2 %, b bis 95.6 % —
   der Zähler zählt exakt an diesen Marken zurück (siehe pvs-kf-count-*). */
@keyframes pvs-kf-sheet-b {
  0%, 10%     { opacity: 0; transform: translate(-14px, -12px) rotate(-6deg); }
  14%, 93.2%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  95.6%       { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  95.8%, 100% { opacity: 0; transform: translate(-14px, -12px) rotate(-6deg); }
}
@keyframes pvs-kf-sheet-c {
  0%, 18%     { opacity: 0; transform: translate(-12px, -14px) rotate(-5deg); }
  22%, 91.8%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  94.2%       { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  94.4%, 100% { opacity: 0; transform: translate(-12px, -14px) rotate(-5deg); }
}
@keyframes pvs-kf-sheet-d {
  0%, 26%     { opacity: 0; transform: translate(-10px, -16px) rotate(-6deg); }
  30%, 90.4%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  92.8%       { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  93%, 100%   { opacity: 0; transform: translate(-10px, -16px) rotate(-6deg); }
}

/* Zähler: hoch 12 → 87 → 214 → 300+ synchron zu den Blatt-Landungen (14/22/30 %),
   runter 300+ → 214 → 87 → 12 synchron zum Blatt-Verschwinden (92.8/94.2/95.6 %) — nie leer, nie asynchron. */
@keyframes pvs-kf-count-12 {
  0%, 13.4%   { opacity: 1; }
  14%, 95.2%  { opacity: 0; }
  95.6%, 100% { opacity: 1; }
}
@keyframes pvs-kf-count-87 {
  0%, 13.4%    { opacity: 0; }
  14%, 21.4%   { opacity: 1; }
  22%, 93.8%   { opacity: 0; }
  94.2%, 95.2% { opacity: 1; }
  95.6%, 100%  { opacity: 0; }
}
@keyframes pvs-kf-count-214 {
  0%, 21.4%    { opacity: 0; }
  22%, 29.4%   { opacity: 1; }
  30%, 92.4%   { opacity: 0; }
  92.8%, 93.8% { opacity: 1; }
  94.2%, 100%  { opacity: 0; }
}
@keyframes pvs-kf-count-300 {
  0%, 29.4%   { opacity: 0; }
  30%, 92.4%  { opacity: 1; }
  92.8%, 100% { opacity: 0; }
}
@keyframes pvs-kf-count-pop {
  0%, 13.4%    { transform: scale(1); }
  14%          { transform: scale(1.07); }
  14.9%, 21.4% { transform: scale(1); }
  22%          { transform: scale(1.07); }
  22.9%, 29.4% { transform: scale(1); }
  30%          { transform: scale(1.07); }
  30.9%, 100%  { transform: scale(1); }
}

/* Der Aufstieg: 600 ms (45–50 %), Kunden-Zeile von Platz 3 auf Platz 1.
   Rückweg SICHTBAR (91–96 %, ebenfalls 600 ms): Kunden-Zeile gleitet zurück auf 3, die neutralen rutschen hoch —
   die Karte ist nie leer, es gibt keinen versteckten Positionssprung mehr. */
@keyframes pvs-kf-rise {
  0%, 45%   { transform: translateY(92px); }
  50%, 91%  { transform: translateY(0); }
  96%, 100% { transform: translateY(92px); }
}
@keyframes pvs-kf-drop {
  0%, 45%   { transform: translateY(-46px); }
  50%, 91%  { transform: translateY(0); }
  96%, 100% { transform: translateY(-46px); }
}
/* Pille + Schimmer verabschieden sich VOR dem Rückweg der Zeilen (88–91 %) */
@keyframes pvs-kf-shimmer {
  0%, 56%   { opacity: 0; }
  62%, 88%  { opacity: 0.07; }
  91%, 100% { opacity: 0; }
}
@keyframes pvs-kf-p1 {
  0%, 55%    { opacity: 0; transform: scale(0.6); }
  58.5%      { opacity: 1; transform: scale(1.08); }
  60.5%, 88% { opacity: 1; transform: scale(1); }
  91%, 100%  { opacity: 0; transform: scale(0.6); }
}
/* Dauer-Atmer: Gradient-Favicon der Kunden-Zeile — 4 Zyklen à 3 s pro 12-s-Loop, Echo der Status-Punkte in pv-chat/pv-auto */
@keyframes pvs-kf-fav {
  0%, 25%, 50%, 75%, 100% { transform: scale(1); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-seo * { animation: none !important; }
}

/* ============ Szene 4 · pv-auto · „Ihr Prozess, automatisiert" ============ */
/* Master-Takt: 8 s. Alle Animationen laufen mit derselben Duration, infinite,
   Choreografie ausschließlich über Keyframe-Prozente (keine Delays).
   Paket-Lanes: Phasenversatz 0 % / 33,33 % / 66,67 % via rotierte Keyframes.
   Eingangsband: langer Transit (Pop 5 % + Gleiten 47,33 % ≈ 20 px/s) →
   im Schnitt 1,75 graue Docs gleichzeitig links unterwegs, nie Stillstand.
   Ausgangsband: Gleiten 29,33 % ≈ 27 px/s, Spawn knapp AUSSERHALB des Rings.
   Verschluck-Mitten 33,33 / 66,67 / 100 % ≡ Ring-Puls; Ankünfte 19,67 / 53 /
   86,33 % ≡ Glow-Peaks (Beat-Choreografie unverändert).
   Kein Ensemble-Delay nötig: 8 s vs. 12 s der Nachbarszenen versetzt sich selbst. */

.pv-auto text {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
}
.pv-auto .pva-label {
  font-size: 11px;
  fill: #9A9AA6;
  letter-spacing: 0.02em;
}
.pv-auto .pva-chip-text {
  font-size: 11px;
  fill: #C9C9D1;
  letter-spacing: 0.02em;
}

.pv-auto .pva-doc,
.pv-auto .pva-ring-rot,
.pv-auto .pva-ring-pulse,
.pv-auto .pva-chip-dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* --- Dauer-Elemente (inhärent zyklisch, ganzzahlige Zyklen pro 8 s) --- */
.pv-auto .pva-ring-rot   { animation: pva-rot 8s linear infinite both; }               /* 1 Umdrehung/Loop */
.pv-auto .pva-ring-pulse { animation: pva-ring-pulse 8s cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.pv-auto .pva-bolt       { animation: pva-bolt 8s cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.pv-auto .pva-glow       { animation: pva-glow 8s cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
.pv-auto .pva-chip-dot   { animation: pva-breathe 8s ease-in-out infinite both; }      /* 4 Atemzüge/Loop */

/* --- Paket-Lanes (Gleit- und Schluck-Segmente linear = Fließband) --- */
.pv-auto .pva-in-a  { animation: pva-in-a 8s linear infinite both; }
.pv-auto .pva-in-b  { animation: pva-in-b 8s linear infinite both; }
.pv-auto .pva-in-c  { animation: pva-in-c 8s linear infinite both; }
.pv-auto .pva-out-a { animation: pva-out-a 8s linear infinite both; }
.pv-auto .pva-out-b { animation: pva-out-b 8s linear infinite both; }
.pv-auto .pva-out-c { animation: pva-out-c 8s linear infinite both; }

/* Ring: kontinuierliche Rotation, nahtlos (360° = ganzzahlig) */
@keyframes pva-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Ring-Puls exakt auf den Verschluck-Mitten: 33,33 % / 66,67 % / 100 %≡0 % */
@keyframes pva-ring-pulse {
  0%      { transform: scale(1.06); }
  3%      { transform: scale(1); }
  30.33%  { transform: scale(1); }
  33.33%  { transform: scale(1.06); }
  36.33%  { transform: scale(1); }
  63.67%  { transform: scale(1); }
  66.67%  { transform: scale(1.06); }
  69.67%  { transform: scale(1); }
  97%     { transform: scale(1); }
  100%    { transform: scale(1.06); }
}

/* Funke glimmt synchron zum Ring-Puls auf */
@keyframes pva-bolt {
  0%      { opacity: 1; }
  3%      { opacity: 0.8; }
  30.33%  { opacity: 0.8; }
  33.33%  { opacity: 1; }
  36.33%  { opacity: 0.8; }
  63.67%  { opacity: 0.8; }
  66.67%  { opacity: 1; }
  69.67%  { opacity: 0.8; }
  97%     { opacity: 0.8; }
  100%    { opacity: 1; }
}

/* Graues Doc, Lane A: Pop 78–83, Gleiten 83–130,33 (kreuzt die Loop-Grenze →
   Wrap-Wert bei 100 %/0 % exakt: tx −18,7 px, beidseitig linear = gleiche
   Geschwindigkeit), Verschlucken 30,33–36,33 (Fade früh: op 0,3 an der
   Ringlinie, Mitte = Ring-Puls 33,33 %) */
@keyframes pva-in-a {
  0%      { transform: translateX(-18.7px) scale(1);  opacity: 1;   animation-timing-function: linear; }
  30.33%  { transform: translateX(30px)    scale(1);  opacity: 1;   animation-timing-function: linear; }
  33.33%  { transform: translateX(37px)    scale(0.8); opacity: 0.3; animation-timing-function: linear; }
  36.33%  { transform: translateX(44px)    scale(0.6); opacity: 0; }
  37.33%, 78% { transform: translateX(-54px) scale(0.85); opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  83%     { transform: translateX(-46px)   scale(1);  opacity: 1;   animation-timing-function: linear; }
  100%    { transform: translateX(-18.7px) scale(1);  opacity: 1; }
}

/* Lane B = Lane A um +33,33 % rotiert (kein Wrap-Segment) */
@keyframes pva-in-b {
  0%, 11.33% { transform: translateX(-54px) scale(0.85); opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  16.33%  { transform: translateX(-46px) scale(1);   opacity: 1;   animation-timing-function: linear; }
  63.67%  { transform: translateX(30px)  scale(1);   opacity: 1;   animation-timing-function: linear; }
  66.67%  { transform: translateX(37px)  scale(0.8); opacity: 0.3; animation-timing-function: linear; }
  69.67%  { transform: translateX(44px)  scale(0.6); opacity: 0; }
  70.67%, 100% { transform: translateX(-54px) scale(0.85); opacity: 0; }
}

/* Lane C = +66,67 %; Verschluck-Mitte liegt EXAKT auf der Loop-Grenze →
   Wrap-Wert bei 100 %/0 %: tx 37 px, scale 0,8, op 0,3 (beidseitig linear) */
@keyframes pva-in-c {
  0%      { transform: translateX(37px)  scale(0.8); opacity: 0.3; animation-timing-function: linear; }
  3%      { transform: translateX(44px)  scale(0.6); opacity: 0; }
  4%, 44.67% { transform: translateX(-54px) scale(0.85); opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  49.67%  { transform: translateX(-46px) scale(1);   opacity: 1;   animation-timing-function: linear; }
  97%     { transform: translateX(30px)  scale(1);   opacity: 1;   animation-timing-function: linear; }
  100%    { transform: translateX(37px)  scale(0.8); opacity: 0.3; }
}

/* Grünes Ergebnis-Doc, Lane A: Pop 46–51 knapp AUSSERHALB des Ring-Strokes
   (x 298→306, nie durch den Stroke), Gleiten 51–80,33, frühes Ausfaden vor
   dem Stations-Icon 80,33–86,33 (op 0,3 schon bei x 378; Glow-Peak 86,33 %) */
@keyframes pva-out-a {
  0%, 46% { transform: translateX(-38px) scale(0.7); opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  51%     { transform: translateX(-30px) scale(1);   opacity: 1;   animation-timing-function: linear; }
  80.33%  { transform: translateX(34px)  scale(1);   opacity: 1;   animation-timing-function: linear; }
  83.33%  { transform: translateX(42px)  scale(0.85); opacity: 0.3; animation-timing-function: linear; }
  86.33%  { transform: translateX(50px)  scale(0.7); opacity: 0; }
  87.33%, 100% { transform: translateX(-38px) scale(0.7); opacity: 0; }
}

/* Lane B = +33,33 %; Gleiten kreuzt die Loop-Grenze (84,33→113,67) →
   Wrap-Wert bei 100 %/0 % exakt: tx 4,18 px (beidseitig linear) */
@keyframes pva-out-b {
  0%      { transform: translateX(4.18px) scale(1);  opacity: 1;   animation-timing-function: linear; }
  13.67%  { transform: translateX(34px)  scale(1);   opacity: 1;   animation-timing-function: linear; }
  16.67%  { transform: translateX(42px)  scale(0.85); opacity: 0.3; animation-timing-function: linear; }
  19.67%  { transform: translateX(50px)  scale(0.7); opacity: 0; }
  20.67%, 79.33% { transform: translateX(-38px) scale(0.7); opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  84.33%  { transform: translateX(-30px) scale(1);   opacity: 1;   animation-timing-function: linear; }
  100%    { transform: translateX(4.18px) scale(1);  opacity: 1; }
}

/* Lane C = +66,67 % (kein Wrap-Segment) */
@keyframes pva-out-c {
  0%, 12.67% { transform: translateX(-38px) scale(0.7); opacity: 0; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  17.67%  { transform: translateX(-30px) scale(1);   opacity: 1;   animation-timing-function: linear; }
  47%     { transform: translateX(34px)  scale(1);   opacity: 1;   animation-timing-function: linear; }
  50%     { transform: translateX(42px)  scale(0.85); opacity: 0.3; animation-timing-function: linear; }
  53%     { transform: translateX(50px)  scale(0.7); opacity: 0; }
  54%, 100% { transform: translateX(-38px) scale(0.7); opacity: 0; }
}

/* Zähler-Glow an „Erledigt": Peaks auf den Ankünften 19,67 / 53 / 86,33 % */
@keyframes pva-glow {
  0%, 16.67% { opacity: 0; }
  19.67%  { opacity: 0.8; }
  24.67%  { opacity: 0; }
  50%     { opacity: 0; }
  53%     { opacity: 0.8; }
  58%     { opacity: 0; }
  83.33%  { opacity: 0; }
  86.33%  { opacity: 0.8; }
  91.33%, 100% { opacity: 0; }
}

/* Status-Punkt atmet: 4 ganze Zyklen pro 8 s → nahtlos bei 0 %/100 % */
@keyframes pva-breathe {
  0%, 25%, 50%, 75%, 100% { transform: scale(1);    opacity: 0.85; }
  12.5%, 37.5%, 62.5%, 87.5% { transform: scale(1.25); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-auto * { animation: none !important; }
}