.demo-phone{--s:.74;width:calc(390px * var(--s) + 1.1rem + 4px);border:2px solid var(--color-ink);background:var(--color-surface);border-radius:2.2rem;margin-inline:auto;padding:.55rem;box-shadow:6px 10px 30px -12px #1e262073}@media (width<=380px){.demo-phone{--s:.68}}.demo-screen{width:calc(390px * var(--s));height:calc(876px * var(--s));background:#fff;border-radius:1.75rem;position:relative;overflow:hidden}.ad{width:390px;height:876px;transform:scale(var(--s));transform-origin:0 0;background:#fff;position:absolute;top:0;left:0}.ad-status{letter-spacing:-.01em;color:#26332b;z-index:5;background:#fff;justify-content:space-between;align-items:center;height:32px;padding:2px 24px 0 28px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:700;display:flex;position:absolute;inset:0 0 auto}.ad-status-icons{align-items:center;gap:6px;display:flex}.ad-status-icons svg{width:auto;display:block}.ad-app{position:absolute;inset:32px 0 0;overflow:hidden}.ad-lage{background:#fff;position:absolute;inset:0}.ad-lage img{width:390px;max-width:none;height:844px;position:absolute;top:0;left:0}.ad-blattfenster{height:777px;position:absolute;inset:0 0 auto;overflow:hidden}.ad-blatt{background:#fff;border-radius:28px 28px 0 0;position:absolute;inset:249px 0 0;overflow:hidden;transform:translateY(440px);box-shadow:0 -4px 12px #26332b24}.ad-blatt img{top:-249px}.ad-seite{transform:translate(100%);box-shadow:-10px 0 20px #26332b33}.ad-dabei{opacity:0}.ad-finger{opacity:0;z-index:10;background:#26332b47;border:2px solid #ffffffd9;border-radius:999px;width:44px;height:44px;position:absolute;top:-22px;left:-22px;transform:scale(.6);box-shadow:0 4px 12px #0f172a40}.ad-entdecken,.ad-blatt,.ad-detail,.ad-dabei,.ad-chat,.ad-finger{animation-duration:16s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-iteration-count:infinite;animation-fill-mode:both}.ad-entdecken{animation-name:adEntdecken}.ad-blatt{animation-name:adBlatt}.ad-detail{animation-name:adDetail}.ad-dabei{animation-name:adDabei}.ad-chat{animation-name:adChat}.ad-finger{animation-name:adFinger}@keyframes adBlatt{0%,16%{transform:translateY(440px)}20%,69.9%{transform:translateY(0)}70%,to{transform:translateY(440px)}}@keyframes adEntdecken{0%,33%{transform:translate(0)}36%,69.9%{transform:translate(-8%)}70%,to{transform:translate(0)}}@keyframes adDetail{0%,33%{transform:translate(100%)}36%,58%{transform:translate(0)}61%,69.9%{transform:translate(-8%)}70%,to{transform:translate(100%)}}@keyframes adDabei{0%,46%{opacity:0}48%,69.9%{opacity:1}70%,to{opacity:0}}@keyframes adChat{0%,57.9%{opacity:0;transform:translate(100%)}58%{opacity:1;transform:translate(100%)}61%,94%{opacity:1;transform:translate(0)}99%,99.9%{opacity:0;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes adFinger{0%,27%{opacity:0;transform:scale(.6)translate(195px,350px)}29%,31%{opacity:1;transform:scale(1)translate(195px,350px)}31.6%{opacity:1;transform:scale(.82)translate(195px,350px)}32.2%{opacity:1;transform:scale(1)translate(195px,350px)}33.4%{opacity:0;transform:scale(.6)translate(195px,350px)}33.5%,41%{opacity:0;transform:scale(.6)translate(195px,799px)}43%,45%{opacity:1;transform:scale(1)translate(195px,799px)}45.6%{opacity:1;transform:scale(.82)translate(195px,799px)}46.2%,51%{opacity:1;transform:scale(1)translate(195px,799px)}54.5%,56%{opacity:1;transform:scale(1)translate(345px,799px)}56.6%{opacity:1;transform:scale(.82)translate(345px,799px)}57.2%{opacity:1;transform:scale(1)translate(345px,799px)}58.5%,to{opacity:0;transform:scale(.6)translate(345px,799px)}}.demo-schritt h3{color:var(--color-ink-soft)}.demo-schritt>.grip{transform-origin:50%}.demo-schritt-1 h3{animation:16s infinite both s1farbe}.demo-schritt-2 h3{animation:16s infinite both s2farbe}.demo-schritt-3 h3{animation:16s infinite both s3farbe}.demo-schritt-1>.grip{animation:16s infinite both s1grip}.demo-schritt-2>.grip{animation:16s infinite both s2grip}.demo-schritt-3>.grip{animation:16s infinite both s3grip}@keyframes s1farbe{0%,33%{color:var(--color-ink)}35%,94%{color:var(--color-ink-soft)}96%,to{color:var(--color-ink)}}@keyframes s2farbe{0%,33%{color:var(--color-ink-soft)}35%,58%{color:var(--color-ink)}60%,to{color:var(--color-ink-soft)}}@keyframes s3farbe{0%,58%{color:var(--color-ink-soft)}60%,94%{color:var(--color-ink)}96%,to{color:var(--color-ink-soft)}}@keyframes s1grip{0%,33%{transform:scale(1.3)rotate(10deg)}35%,94%{transform:scale(1)}96%,to{transform:scale(1.3)rotate(10deg)}}@keyframes s2grip{0%,33%{transform:scale(1)}35%,58%{transform:scale(1.3)rotate(-10deg)}60%,to{transform:scale(1)}}@keyframes s3grip{0%,58%{transform:scale(1)}60%,94%{transform:scale(1.3)rotate(10deg)}96%,to{transform:scale(1)}}[data-demo]:not(.laeuft) *,[data-demo]:not(.laeuft){animation-name:none!important}canvas#wand[data-bereit="1"]~div #wand-ersatz{opacity:0;transition:opacity .6s}#wand-ersatz g>g{transform-box:fill-box;transform-origin:50%;animation:.5s cubic-bezier(.34,1.4,.44,1) both facettePop}#wand-ersatz g>g:first-of-type{animation-delay:.25s}#wand-ersatz g>g:nth-of-type(2){animation-delay:.38s}#wand-ersatz g>g:nth-of-type(3){animation-delay:.48s}#wand-ersatz g>g:nth-of-type(4){animation-delay:.58s}#wand-ersatz g>g:nth-of-type(5){animation-delay:.68s}#wand-ersatz g>g:nth-of-type(6){animation-delay:.78s}#wand-ersatz g>g:nth-of-type(7){animation-delay:.88s}@keyframes facettePop{0%{opacity:0;transform:scale(.4)}}#wand-ersatz .pin-kontur{opacity:0;animation:.7s ease-out .95s forwards konturDa}@keyframes konturDa{to{opacity:1}}