
/* Ready4Web Animation V12 – in DIVI vollständig gekapselt. */
.r4w-v6-wrap{width:100%;max-width:1100px;margin:0 auto;position:relative;text-align:center;overflow:visible}
.r4w-v6{margin:0 auto!important;position:relative;isolation:isolate;width:100%;aspect-ratio:1000/685;line-height:0;overflow:visible;contain:layout style}
.r4w-v6 .r4w-v6-master{display:block;position:relative;z-index:0;width:100%;height:100%;object-fit:contain;transform:none!important;filter:none!important;animation:none!important}
.r4w-v6 .r4w-v6-effects{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;transform:none!important}
.r4w-v6 .r4w-grid{stroke:#62b3d2;stroke-opacity:.15;stroke-width:.8;fill:none}
.r4w-v6 .r4w-chalk{fill:none;stroke:#e6e3d7;stroke-opacity:.80;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.r4w-v6 .r4w-v2-sketchtitle{font:normal 29px Georgia,serif;fill:#f4eee7;letter-spacing:-.7px}
.r4w-v6 .r4w-v2-sketchlabel{font:9px ui-monospace,Consolas,monospace;fill:#abc4d0;letter-spacing:1.1px}
.r4w-v6 .r4w-v2-title{font:bold 23px Georgia,serif}
.r4w-v6 .r4w-v2-small{font:8px Arial,sans-serif;font-weight:600;letter-spacing:.2px}
.r4w-v6 .r4w-v2-tiny{font:7px Consolas,monospace;letter-spacing:1px}
.r4w-v6 .r4w-v2-code{fill:#83cee8;font:9px ui-monospace,Consolas,monospace}
/* At rest show a complete blueprint instead of a flash of finished content. */
.r4w-v6 .r4w-v6-sketch{opacity:1}
.r4w-v6 .r4w-v6-build{opacity:1}
.r4w-v6 .r4w-v6-scan,.r4w-v6 .r4w-v6-ui-toast{opacity:0}
.r4w-v6 .r4w-v6-draw{stroke-dasharray:var(--r4w-length,1300);stroke-dashoffset:var(--r4w-length,1300)}
@keyframes r4w6-pencil{from{stroke-dashoffset:var(--r4w-length,1300)}to{stroke-dashoffset:0}}
@keyframes r4w6-text-in{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:translateY(0)}}
@keyframes r4w6-blueprint{0%,5%{opacity:0}11%,68%{opacity:1}100%{opacity:0}}
@keyframes r4w6-sketch-desk{0%,18%{opacity:1;clip-path:inset(0 0 0 0)}22%{opacity:1}29%,100%{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes r4w6-sketch-phone{0%,23%{opacity:1;clip-path:inset(0 0 0 0)}29%{opacity:1}35%,100%{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes r4w6-build-desk{0%,67%{opacity:1;clip-path:inset(0 0 0 0)}92%,100%{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes r4w6-build-phone{0%,72%{opacity:1;clip-path:inset(0 0 0 0)}94%,100%{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes r4w6-ui-slide-left{0%,23%{opacity:0;transform:translateX(-22px)}32%,100%{opacity:1;transform:translateX(0)}}
@keyframes r4w6-ui-slide-up{0%,26%{opacity:0;transform:translateY(25px)}35%,100%{opacity:1;transform:translateY(0)}}
@keyframes r4w6-ui-slide-right{0%,30%{opacity:0;transform:translateX(24px)}39%,100%{opacity:1;transform:translateX(0)}}
@keyframes r4w6-ui-code{0%,25%{opacity:0;transform:translateY(12px)}33%,40%{opacity:1;transform:translateY(0)}45%,100%{opacity:0;transform:translateY(-7px)}}
@keyframes r4w6-ui-flash{0%,29%,36%,40%,46%,48%,100%{opacity:0}33%,38%,47%{opacity:1}}
@keyframes r4w6-ui-palette{0%,32%{opacity:0;transform:translateY(15px)}41%,100%{opacity:1;transform:translateY(0)}}
@keyframes r4w6-ui-toast{0%,39%{opacity:0;transform:translateY(10px)}43%,49%{opacity:1;transform:translateY(0)}53%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes r4w6-mob-badge{0%,32%{opacity:0;transform:translateY(-14px)}41%,100%{opacity:1;transform:translateY(0)}}
@keyframes r4w6-scan-desk{0%,67%{opacity:0;transform:translateX(0px)}70%{opacity:1}91%{opacity:1;transform:translateX(674px)}93%,100%{opacity:0;transform:translateX(674px)}}
@keyframes r4w6-scan-phone{0%,72%{opacity:0;transform:translateX(0px)}75%{opacity:1}93%{opacity:1;transform:translateX(144px)}95%,100%{opacity:0;transform:translateX(144px)}}
@keyframes r4w6-pixels{0%,21%{opacity:0}35%,60%{opacity:1}100%{opacity:0}}
@keyframes r4w6-photo-desk{0%,31%{opacity:0}39%{opacity:.3}48%,100%{opacity:1}}
@keyframes r4w6-photo-phone{0%,38%{opacity:0}47%{opacity:.4}54%,100%{opacity:1}}
@keyframes r4w6-photo-guide{0%,35%{opacity:0}42%,55%{opacity:1}62%,100%{opacity:0}}
@keyframes r4w6-design-text{0%,26%{opacity:0}34%,100%{opacity:1}}
.r4w-v6.r4w-v6-playing .r4w-v6-sketch-desk{animation:r4w6-sketch-desk 23s linear both}
.r4w-v6.r4w-v6-playing .r4w-v6-sketch-phone{animation:r4w6-sketch-phone 23s linear both}
.r4w-v6.r4w-v6-playing .r4w-v6-build-desk{animation:r4w6-build-desk 23s linear both}
.r4w-v6.r4w-v6-playing .r4w-v6-build-phone{animation:r4w6-build-phone 23s linear both}
.r4w-v6.r4w-v6-playing .r4w-v6-draw{animation:r4w6-pencil 1.25s cubic-bezier(.18,.65,.30,1) var(--delay,0s) both}
.r4w-v6.r4w-v6-playing .r4w-v2-sketchtitle{animation:r4w6-text-in .75s cubic-bezier(.2,.7,.2,1) 1.25s both}
.r4w-v6.r4w-v6-playing .r4w-v2-sketchlabel,.r4w-v6.r4w-v6-playing .r4w-v6-notes{animation:r4w6-text-in 1.1s ease 1.0s both}
.r4w-v6.r4w-v6-playing .r4w-v6-blueprint{animation:r4w6-blueprint 5s linear both}
.r4w-v6.r4w-v6-playing .r4w-v6-illustration .r4w-v6-ink{animation:r4w6-pencil 1.65s ease 1.65s both;stroke-dasharray:1300;stroke-dashoffset:1300}
.r4w-v6.r4w-v6-playing .r4w-v6-ui-sidebar{animation:r4w6-ui-slide-left 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-ui-text,.r4w-v6.r4w-v6-playing .r4w-v6-ui-colors{animation:r4w6-ui-slide-up 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-ui-hero,.r4w-v6.r4w-v6-playing .r4w-v6-ui-ruler{animation:r4w6-ui-slide-right 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-ui-code{animation:r4w6-ui-code 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-ui-measure,.r4w-v6.r4w-v6-playing .r4w-v6-ui-cursor{animation:r4w6-ui-flash 23s linear both}
.r4w-v6.r4w-v6-playing .r4w-v6-ui-toast{animation:r4w6-ui-toast 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-mobile-badge,.r4w-v6.r4w-v6-playing .r4w-v6-mobile-grid{animation:r4w6-mob-badge 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-photo-mask-desk{animation:r4w6-photo-desk 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-photo-mask-phone{animation:r4w6-photo-phone 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-photo-guide{animation:r4w6-photo-guide 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-scan-desk{animation:r4w6-scan-desk 23s linear both}
.r4w-v6.r4w-v6-playing .r4w-v6-scan-phone{animation:r4w6-scan-phone 23s linear both}
.r4w-v6.r4w-v6-playing .r4w-v6-pixels{animation:r4w6-pixels 1.1s ease-in-out infinite alternate}
.r4w-v6.r4w-v6-paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.r4w-v6 .r4w-v6-effects{display:none!important}.r4w-v6 .r4w-v6-scan{display:none!important}.r4w-v6-action .r4w-v6-button{transition:none!important}}

/* V7: Geometrisch korrekte Mobilansicht, zusätzliche Optimierungsphase. */
.r4w-v6 .r4w-v7-seo-panel,.r4w-v6 .r4w-v7-phone-opt{opacity:0;pointer-events:none}
.r4w-v6 .r4w-v7-seo-panel text,.r4w-v6 .r4w-v7-phone-opt text{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.r4w-v6 .r4w-v7-opt-heading{font-size:23px;font-weight:750;fill:#f3f9ff;letter-spacing:.25px}
.r4w-v6 .r4w-v7-opt-sub{font-size:10px;fill:#adc5d9;letter-spacing:.5px}
.r4w-v6 .r4w-v7-opt-label{font-size:9px;fill:#d8eefa;font-weight:650;letter-spacing:.6px}
.r4w-v6 .r4w-v7-opt-copy{font-size:12px;fill:#e5f2f9;font-weight:550}
.r4w-v6 .r4w-v7-opt-muted{font-size:9px;fill:#8faebf}
.r4w-v6 .r4w-v7-opt-check{fill:none;stroke:#7ce3d5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes r4w7-opt-phase{0%,46%{opacity:0}50%,67%{opacity:1}73%,100%{opacity:0}}
@keyframes r4w7-opt-card1{0%,49%{opacity:0;transform:translateY(16px)}53%,100%{opacity:1;transform:translateY(0)}}
@keyframes r4w7-opt-card2{0%,51%{opacity:0;transform:translateY(16px)}55%,100%{opacity:1;transform:translateY(0)}}
@keyframes r4w7-opt-card3{0%,53%{opacity:0;transform:translateY(16px)}57%,100%{opacity:1;transform:translateY(0)}}
@keyframes r4w7-opt-result{0%,55%{opacity:0;transform:translateX(16px)}59%,100%{opacity:1;transform:translateX(0)}}
@keyframes r4w7-opt-line{0%,51%{stroke-dashoffset:360;opacity:0}59%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes r4w7-opt-pulse{0%,55%,65%,100%{opacity:.12}59%,61%{opacity:.65}}
@keyframes r4w7-opt-phone{0%,49%{opacity:0}54%,68%{opacity:1}74%,100%{opacity:0}}
.r4w-v6.r4w-v6-playing .r4w-v7-seo-panel{animation:r4w7-opt-phase 23s linear both}
.r4w-v6.r4w-v6-playing .r4w-v7-opt-card1{animation:r4w7-opt-card1 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v7-opt-card2{animation:r4w7-opt-card2 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v7-opt-card3{animation:r4w7-opt-card3 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v7-opt-result{animation:r4w7-opt-result 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v7-opt-connection{stroke-dasharray:360;animation:r4w7-opt-line 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v7-opt-pulse{animation:r4w7-opt-pulse 23s ease-in-out both}
.r4w-v6.r4w-v6-playing .r4w-v7-phone-opt{animation:r4w7-opt-phone 23s linear both}
@media(prefers-reduced-motion:reduce){.r4w-v6 .r4w-v7-seo-panel,.r4w-v6 .r4w-v7-phone-opt{display:none!important}}

/* V8 | Alternative: MAGNETIC BUILD – staged diagonal construction rather than soft crossfades. */
@keyframes r4w8-sketch-desk{
  0%,20%{opacity:1;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  26%{opacity:1;clip-path:polygon(46% 0%,100% 0%,100% 100%,26% 100%)}
  32%,100%{opacity:0;clip-path:polygon(100% 0%,100% 0%,100% 100%,100% 100%)}
}
@keyframes r4w8-sketch-phone{
  0%,24%{opacity:1;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  30%{opacity:1;clip-path:polygon(57% 0%,100% 0%,100% 100%,29% 100%)}
  36%,100%{opacity:0;clip-path:polygon(100% 0%,100% 0%,100% 100%,100% 100%)}
}
@keyframes r4w8-build-desk{
  0%,69%{opacity:1;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  77%{opacity:1;clip-path:polygon(60% 0%,100% 0%,100% 100%,39% 100%)}
  86%,100%{opacity:0;clip-path:polygon(100% 0%,100% 0%,100% 100%,100% 100%)}
}
@keyframes r4w8-build-phone{
  0%,72%{opacity:1;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  82%{opacity:1;clip-path:polygon(65% 0%,100% 0%,100% 100%,46% 100%)}
  92%,100%{opacity:0;clip-path:polygon(100% 0%,100% 0%,100% 100%,100% 100%)}
}
/* SEO and underlying editor reveal the finished website together, avoiding a flash of the older editor. */
@keyframes r4w8-opt-desk{
  0%,46%{opacity:0;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  51%,69%{opacity:1;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  77%{opacity:1;clip-path:polygon(60% 0%,100% 0%,100% 100%,39% 100%)}
  86%,100%{opacity:0;clip-path:polygon(100% 0%,100% 0%,100% 100%,100% 100%)}
}
@keyframes r4w8-opt-phone{
  0%,49%{opacity:0;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  54%,72%{opacity:1;clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
  82%{opacity:1;clip-path:polygon(65% 0%,100% 0%,100% 100%,46% 100%)}
  92%,100%{opacity:0;clip-path:polygon(100% 0%,100% 0%,100% 100%,100% 100%)}
}
.r4w-v6.r4w-v6-playing .r4w-v6-sketch-desk{animation:r4w8-sketch-desk 23s cubic-bezier(.4,0,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w-v6-sketch-phone{animation:r4w8-sketch-phone 23s cubic-bezier(.4,0,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w-v6-build-desk{animation:r4w8-build-desk 23s cubic-bezier(.38,0,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w-v6-build-phone{animation:r4w8-build-phone 23s cubic-bezier(.38,0,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w-v7-seo-panel{animation:r4w8-opt-desk 23s cubic-bezier(.38,0,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w-v7-phone-opt{animation:r4w8-opt-phone 23s cubic-bezier(.38,0,.2,1) both}

/* Alignment markers visually snap the sketch into a grid. */
.r4w-v6 .r4w8-align-guides,.r4w-v6 .r4w8-mobile-align,.r4w-v6 .r4w8-opt-sweep,.r4w-v6 .r4w8-seo-signals,.r4w-v6 .r4w8-polish,.r4w-v6 .r4w8-phone-polish{opacity:0;pointer-events:none}
@keyframes r4w8-align-show{0%,19%{opacity:0}21%,30%{opacity:.98}34%,100%{opacity:0}}
@keyframes r4w8-align-phone-show{0%,24%{opacity:0}27%,34%{opacity:.85}37%,100%{opacity:0}}
@keyframes r4w8-align-dash{0%,18%{stroke-dashoffset:160;opacity:0}26%{stroke-dashoffset:0;opacity:1}32%,100%{stroke-dashoffset:-70;opacity:0}}
@keyframes r4w8-align-node{0%,19%,32%,100%{opacity:0;transform:scale(.6)}25%,27%{opacity:1;transform:scale(1.25)}29%{opacity:.8;transform:scale(1)}}
@keyframes r4w8-alignment-cursor{0%,20%{opacity:0;transform:translate(-20px,-15px)}23%{opacity:1;transform:translate(0,0)}28%{opacity:1;transform:translate(235px,-60px)}31%,100%{opacity:0;transform:translate(238px,-60px)}}
.r4w-v6.r4w-v6-playing .r4w8-align-guides{animation:r4w8-align-show 23s linear both}
.r4w-v6.r4w-v6-playing .r4w8-mobile-align{animation:r4w8-align-phone-show 23s linear both}
.r4w-v6.r4w-v6-playing .r4w8-align-track{stroke-dasharray:5 5;animation:r4w8-align-dash 23s linear both}
.r4w-v6.r4w-v6-playing .r4w8-align-node{transform-box:fill-box;transform-origin:center;animation:r4w8-align-node 23s ease both}
.r4w-v6.r4w-v6-playing .r4w8-align-cursor{animation:r4w8-alignment-cursor 23s cubic-bezier(.25,.7,.2,1) both}

/* An optical calibration wave introduces the search optimisation layer. */
@keyframes r4w8-opt-sweep{0%,45%{opacity:0;transform:translateY(-80px)}48%{opacity:.8}55%{opacity:0;transform:translateY(340px)}100%{opacity:0;transform:translateY(340px)}}
@keyframes r4w8-signals{0%,56%{opacity:0;transform:translateX(0)}58%{opacity:1}63%{opacity:.9;transform:translateX(40px)}66%,100%{opacity:0;transform:translateX(40px)}}
.r4w-v6.r4w-v6-playing .r4w8-opt-sweep{animation:r4w8-opt-sweep 23s ease-in-out both}
.r4w-v6.r4w-v6-playing .r4w8-seo-signals{animation:r4w8-signals 23s ease-in-out both}

/* Short, restrained last-pass surface polish. Subtler than glitter, no looping effects. */
@keyframes r4w8-polish{0%,87%{opacity:0;transform:translateX(0)}90%{opacity:.32}98%{opacity:0;transform:translateX(860px)}100%{opacity:0;transform:translateX(860px)}}
@keyframes r4w8-phone-polish{0%,90%{opacity:0;transform:translateX(0)}93%{opacity:.30}99%,100%{opacity:0;transform:translateX(175px)}}
.r4w-v6.r4w-v6-playing .r4w8-polish{animation:r4w8-polish 23s cubic-bezier(.24,.61,.3,1) both}
.r4w-v6.r4w-v6-playing .r4w8-phone-polish{animation:r4w8-phone-polish 23s cubic-bezier(.24,.61,.3,1) both}
/* Hide decorative digital noise from older version; focus on geometry and light instead. */
.r4w-v6 .r4w-v6-pixels{display:none}
@media(prefers-reduced-motion:reduce){.r4w-v6 .r4w8-align-guides,.r4w-v6 .r4w8-mobile-align,.r4w-v6 .r4w8-opt-sweep,.r4w-v6 .r4w8-seo-signals,.r4w-v6 .r4w8-polish,.r4w-v6 .r4w8-phone-polish{display:none!important}}


/* V12 — Finaler Übergang: Live-Website wird zeilenweise veröffentlicht statt diagonal weggewischt. */
@keyframes r4w9-release-desktop{
  0%,71.8%{opacity:1;clip-path:inset(0 0 0 0)}
  75%{opacity:1;clip-path:inset(17% 0 0 0)}
  79%{opacity:1;clip-path:inset(42% 0 0 0)}
  84%{opacity:1;clip-path:inset(75% 0 0 0)}
  88.6%,100%{opacity:0;clip-path:inset(100% 0 0 0)}
}
@keyframes r4w9-release-mobile{
  0%,75.2%{opacity:1;clip-path:inset(0 0 0 0)}
  80%{opacity:1;clip-path:inset(21% 0 0 0)}
  85%{opacity:1;clip-path:inset(58% 0 0 0)}
  91.7%,100%{opacity:0;clip-path:inset(100% 0 0 0)}
}
@keyframes r4w9-seo-desktop{
  0%,46%{opacity:0;clip-path:inset(0 0 0 0)}
  51%,71.8%{opacity:1;clip-path:inset(0 0 0 0)}
  75%{opacity:1;clip-path:inset(17% 0 0 0)}
  79%{opacity:1;clip-path:inset(42% 0 0 0)}
  84%{opacity:1;clip-path:inset(75% 0 0 0)}
  88.6%,100%{opacity:0;clip-path:inset(100% 0 0 0)}
}
@keyframes r4w9-seo-mobile{
  0%,49%{opacity:0;clip-path:inset(0 0 0 0)}
  54%,75.2%{opacity:1;clip-path:inset(0 0 0 0)}
  80%{opacity:1;clip-path:inset(21% 0 0 0)}
  85%{opacity:1;clip-path:inset(58% 0 0 0)}
  91.7%,100%{opacity:0;clip-path:inset(100% 0 0 0)}
}
/* Die bestehende Entwicklungsebene und die SEO-Ebene verlassen das Bild synchron. */
.r4w-v6.r4w-v6-playing .r4w-v6-build-desk{animation:r4w9-release-desktop 23s cubic-bezier(.24,.68,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w-v6-build-phone{animation:r4w9-release-mobile 23s cubic-bezier(.24,.68,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w-v7-seo-panel{animation:r4w9-seo-desktop 23s cubic-bezier(.24,.68,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w-v7-phone-opt{animation:r4w9-seo-mobile 23s cubic-bezier(.24,.68,.2,1) both}
/* Alte Querwischer und Lichtreflexe deaktivieren: ein ruhiger Veröffentlichungsmoment. */
.r4w-v6 .r4w-v6-scan,.r4w-v6 .r4w8-polish,.r4w-v6 .r4w8-phone-polish{display:none!important}
/* Eine schmale Lichtkante führt das Aufdecken an, mit sanftem Glow. */
.r4w-v6 .r4w9-deploy-desk,.r4w-v6 .r4w9-deploy-phone{opacity:0;pointer-events:none}
@keyframes r4w9-deploy-desk{
  0%,71.8%{opacity:0;transform:translateY(0)}
  72.5%{opacity:.87;transform:translateY(12px)}
  75%{opacity:.92;transform:translateY(63px)}
  79%{opacity:.92;transform:translateY(156px)}
  84%{opacity:.92;transform:translateY(278px)}
  88.6%{opacity:.7;transform:translateY(371px)}
  89.2%,100%{opacity:0;transform:translateY(371px)}
}
@keyframes r4w9-deploy-phone{
  0%,75.2%{opacity:0;transform:translateY(29px)}
  76%{opacity:.88;transform:translateY(37px)}
  80%{opacity:.88;transform:translateY(96px)}
  85%{opacity:.88;transform:translateY(215px)}
  91.7%{opacity:.78;transform:translateY(349px)}
  92.4%,100%{opacity:0;transform:translateY(349px)}
}
.r4w-v6.r4w-v6-playing .r4w9-deploy-desk{animation:r4w9-deploy-desk 23s cubic-bezier(.31,.66,.32,.97) both}
.r4w-v6.r4w-v6-playing .r4w9-deploy-phone{animation:r4w9-deploy-phone 23s cubic-bezier(.31,.66,.32,.97) both}
/* Content statt Keyword-Füllmaterial: jede Eigenschaft erscheint wie im Such-Snippet. */
.r4w-v6 .r4w9-keyword{opacity:0;transform:translateY(7px)}
@keyframes r4w9-keyword-a{0%,58%{opacity:0;transform:translateY(7px)}61%,100%{opacity:1;transform:translateY(0)}}
@keyframes r4w9-keyword-b{0%,60%{opacity:0;transform:translateY(7px)}63%,100%{opacity:1;transform:translateY(0)}}
@keyframes r4w9-keyword-c{0%,62%{opacity:0;transform:translateY(7px)}65%,100%{opacity:1;transform:translateY(0)}}
.r4w-v6.r4w-v6-playing .r4w9-keyword-a{animation:r4w9-keyword-a 23s ease both}
.r4w-v6.r4w-v6-playing .r4w9-keyword-b{animation:r4w9-keyword-b 23s ease both}
.r4w-v6.r4w-v6-playing .r4w9-keyword-c{animation:r4w9-keyword-c 23s ease both}
/* Die Mobilbeschriftung bleibt proportional zum perspektivischen Display. */
@media(prefers-reduced-motion:reduce){.r4w-v6 .r4w9-deploy-desk,.r4w-v6 .r4w9-deploy-phone{display:none!important}}



/* V12: Originalgeräte bleiben pixelgenau an Ort und Stelle. Kein Zoom, kein Verschieben. */
.r4w-v6 .r4w-v6-master{opacity:0;transform:none!important;transform-origin:50% 50%!important}
.r4w-v6 .r4w11-device-sketch{opacity:1;pointer-events:none}
.r4w-v6 .r4w11-monitor-outline,.r4w-v6 .r4w11-phone-outline,.r4w-v6 .r4w11-base-outline{
 fill:none;stroke:#e0e6e5;stroke-opacity:.82;stroke-width:1.55;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.r4w-v6 .r4w11-screen-guides,.r4w-v6 .r4w11-phone-guides{
 fill:none;stroke:#8fb5c0;stroke-opacity:.52;stroke-width:.95;vector-effect:non-scaling-stroke}
.r4w-v6 .r4w11-device-accent{stroke:#e8934b;stroke-opacity:.36;stroke-width:1;vector-effect:non-scaling-stroke}
.r4w-v6 .r4w11-shell-path{stroke-dasharray:2400;stroke-dashoffset:0}
@keyframes r4w11-draw{0%{stroke-dashoffset:2400}16%,100%{stroke-dashoffset:0}}
@keyframes r4w11-draw-phone{0%,6%{stroke-dashoffset:2400}23%,100%{stroke-dashoffset:0}}
@keyframes r4w11-device-sketch-fade{0%,37%{opacity:1}42%{opacity:.84}48%,100%{opacity:0}}
@keyframes r4w11-master-reveal{0%,37%{opacity:0}43%{opacity:.17}47%{opacity:.69}50%,100%{opacity:1}}
.r4w-v6 .r4w11-monitor-reveal,.r4w-v6 .r4w11-phone-reveal{opacity:0;pointer-events:none}
@keyframes r4w11-monitor-reveal{0%,40%{opacity:0;transform:translateX(-14px)}44%{opacity:.4}47%{opacity:.55}51%,100%{opacity:0;transform:translateX(20px)}}
@keyframes r4w11-phone-reveal{0%,42%{opacity:0;transform:translateX(-8px)}45%{opacity:.35}49%{opacity:.62}53%,100%{opacity:0;transform:translateX(16px)}}
.r4w-v6.r4w-v6-playing .r4w11-device-sketch{animation:r4w11-device-sketch-fade 23s ease both}
.r4w-v6.r4w-v6-playing .r4w11-shell-path{animation:r4w11-draw 23s ease both}
.r4w-v6.r4w-v6-playing .r4w11-phone-draw{animation:r4w11-draw-phone 23s ease both}
.r4w-v6.r4w-v6-playing .r4w-v6-master{animation:r4w11-master-reveal 23s cubic-bezier(.28,.67,.2,1) both!important}
.r4w-v6.r4w-v6-playing .r4w11-monitor-reveal{animation:r4w11-monitor-reveal 23s cubic-bezier(.24,.68,.2,1) both}
.r4w-v6.r4w-v6-playing .r4w11-phone-reveal{animation:r4w11-phone-reveal 23s cubic-bezier(.24,.68,.2,1) both}
@media(prefers-reduced-motion:reduce){.r4w-v6 .r4w-v6-master{opacity:1;transform:none!important}.r4w-v6 .r4w11-device-sketch,.r4w-v6 .r4w11-monitor-reveal,.r4w-v6 .r4w11-phone-reveal{display:none!important}}



/* V12: wirklich deckendes Smartphone vor dem Monitor, perspektivische Schriftlinien. */
.r4w-v6 .r4w12-phone-occluder{opacity:1;pointer-events:none}
@keyframes r4w12-phone-occlusion{
  /* Keine durchscheinenden Zwischenframes: Die Deckschicht bleibt voll opak,
     bis das originale Gerätebild selbst vollständig sichtbar ist. */
  0%,50%{opacity:1}
  53%,100%{opacity:0}
}
@keyframes r4w12-phone-outline-fade{0%,50%{opacity:1}54%,100%{opacity:0}}
.r4w-v6.r4w-v6-playing .r4w12-phone-occluder{animation:r4w12-phone-occlusion 23s linear both}
.r4w-v6.r4w-v6-playing .r4w12-phone-outline{animation:r4w12-phone-outline-fade 23s linear both}
.r4w-v6 .r4w12-phone-occluder .r4w12-shell{fill:#0a111a}
.r4w-v6 .r4w12-phone-occluder .r4w12-screen{fill:#081522}
.r4w-v6 .r4w12-phone-occluder .r4w12-bezel{fill:none;stroke:#233744;stroke-width:1.2}
/* Schrift entlang echter Display-Zeilen statt pauschaler Rotation. */
.r4w-v6 .r4w12-phone-type{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;letter-spacing:.03px;text-rendering:geometricPrecision}
.r4w-v6 .r4w12-phone-type textPath{dominant-baseline:alphabetic}
@media(prefers-reduced-motion:reduce){.r4w-v6 .r4w12-phone-occluder{display:none!important}}


/* V13: Ausschliesslich die Animation selbst; keine Fremdmodule beeinflussen. */
.r4w-v6-wrap,.r4w-v6-wrap *{box-sizing:border-box}
.r4w-v6-wrap{background:transparent!important}
.r4w-v6{background:transparent!important}
.r4w-v6.r4w-v6-done .r4w-v6-master{opacity:1!important;animation:none!important}
.r4w-v6.r4w-v6-done .r4w-v6-effects{opacity:0!important;visibility:hidden!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.r4w-v6 .r4w-v6-master{opacity:1!important;animation:none!important}.r4w-v6 .r4w-v6-effects{display:none!important}}
