{"id":14864,"date":"2026-07-23T11:32:19","date_gmt":"2026-07-23T11:32:19","guid":{"rendered":"https:\/\/www.d-id.com\/?page_id=14864"},"modified":"2026-07-28T13:07:30","modified_gmt":"2026-07-28T13:07:30","slug":"self-hosting-realtime-avatare","status":"publish","type":"page","link":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/","title":{"rendered":"Self Host"},"content":{"rendered":"\n\n<style>\n\/* ==================== BLOCK 0 - BASE STYLES ==================== *\/\n.did-sh{\n  --orange:#ff882e;\n  --orange-2:#ffa257;\n  --orange-deep:#e06a16;\n  --orange-hover:#ff9640;\n  --orange-ink:#c2410c;      \/* AA-safe orange for text\/icons on LIGHT *\/\n  --ink:#090604;\n  --ink-2:#0E0C17;\n  --paper:#F3F3F3;\n  --paper-2:#FFFFFF;\n  --text:#161616;\n  --muted:rgba(22,22,22,.7);\n  --muted-light:rgba(255,255,255,.72);\n  --line:rgba(0,0,0,.1);\n  --line-dark:rgba(255,255,255,.1);\n  --radius:16px;\n  --maxw:1180px;\n  --ease:cubic-bezier(.16,1,.3,1);\n  font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;\n  color:var(--text);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;font-weight:400;\n}\n.did-sh *{box-sizing:border-box;margin:0;padding:0}\n.did-sh a{text-decoration:none;color:inherit}\n.did-sh img,.did-sh svg,.did-sh canvas{display:block;max-width:100%}\n.did-sh .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}\n.did-sh h1,.did-sh h2,.did-sh h3,.did-sh h3{font-family:'Manrope',sans-serif;line-height:1.1;letter-spacing:-.03em;font-weight:600}\n.did-sh h3,.did-sh h3{letter-spacing:-.02em}\n.did-sh h2{font-size:clamp(28px,3.6vw,40px);font-weight:600}\n.did-sh .eyebrow{display:inline-block;font-size:12px;line-height:1.5;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--orange-ink);margin-bottom:18px;font-family:'Manrope',sans-serif}\n.did-sh .accent-rust{color:var(--orange-ink)}\n\n\/* focus-visible: consistent, high-contrast on light and dark *\/\n.did-sh a:focus-visible,\n.did-sh button:focus-visible,\n.did-sh summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:8px}\n.did-sh .btn:focus-visible{outline-offset:4px}\n\n\/* BUTTONS *\/\n.did-sh .btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:16px 30px;border-radius:11px;font-weight:700;font-size:13px;font-family:'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.6px;line-height:1.5;cursor:pointer;border:none;overflow:hidden;transition:transform .22s var(--ease),box-shadow .28s var(--ease),background .2s ease}\n.did-sh .btn svg{width:15px;height:15px;flex:0 0 auto}\n.did-sh .btn .arrow{transform-origin:center;transform:rotate(45deg) !important;transition:transform .28s var(--ease) !important}\n.did-sh .btn:hover .arrow,.did-sh .btn:focus-visible .arrow{transform:rotate(0deg) !important}\n.did-sh .btn-primary{background:var(--orange);color:#161616;box-shadow:0 10px 28px rgba(255,136,46,.3)}\n\/* sheen sweep on primary *\/\n.did-sh .btn-primary::after{content:\"\";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none}\n.did-sh .btn-primary:hover{background:var(--orange-hover);color:#161616;transform:translateY(-3px);box-shadow:0 16px 40px rgba(255,136,46,.45)}\n.did-sh .btn-primary:hover::after{left:130%}\n.did-sh .btn-primary:active{transform:translateY(-1px)}\n.did-sh .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}\n.did-sh .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}\n\n\/* SCROLL REVEAL *\/\n.did-sh [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rd,0ms);will-change:opacity,transform}\n.did-sh [data-reveal].in{opacity:1;transform:none}\n\n\/* SEGMENTED PILL NAV *\/\n.did-sh .seg-spacer{width:100%;height:0}\n\/* .seg-wrap sits in normal flow (position:relative) right after the KPI strip - exactly\n   where it's meant to first appear - and JS toggles it to position:fixed only once the\n   user has scrolled past that natural point, manually reproducing what position:sticky\n   is supposed to do. This is NOT decorative: native sticky silently fails to stick if ANY\n   ancestor in the live theme markup has overflow!=visible or a transform set - extremely\n   common in WordPress themes - and fails invisibly (no console error). fixed anchors to\n   the viewport regardless of ancestor overflow, so the JS-toggled version is robust to\n   embedding in markup we don't control, while .is-fixed only applies once actually needed.\n   .seg-spacer (JS-measured, 0 by default) reserves the layout space ONLY while .is-fixed\n   is active, so nothing jumps when it switches out of flow. *\/\n.did-sh .seg-wrap{position:relative;z-index:40;padding:14px 12px;display:flex;justify-content:center;pointer-events:none}\n.did-sh .seg-wrap.is-fixed{position:fixed;left:0;right:0}\n.did-sh .seg-wrap .seg{pointer-events:auto}\n.did-sh .seg{position:relative;display:flex;align-items:center;gap:2px;max-width:fit-content;margin:0 auto;padding:6px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:999px;border:1px solid rgba(22,22,22,.07);box-shadow:0 6px 26px rgba(16,24,40,.14);overflow-x:auto;scrollbar-width:none}\n.did-sh .seg::-webkit-scrollbar{display:none}\n.did-sh .seg-ind{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:var(--orange);box-shadow:0 4px 14px rgba(255,136,46,.4);transform:translateX(0);transition:transform .38s var(--ease),width .38s var(--ease);z-index:0;pointer-events:none}\n.did-sh .seg a{position:relative;z-index:1;flex:0 0 auto;padding:11px 17px;border-radius:999px;font-family:'Manrope',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--text);white-space:nowrap;transition:color .25s ease,background .2s ease}\n.did-sh .seg a.active{color:#161616}\n.did-sh .seg a:not(.active):hover{background:rgba(22,22,22,.05)}\n\/* On narrow screens the pill scrolls horizontally; browsers drop the trailing\n   (inline-end) padding of a scrolling flex row, so the last tab kisses the edge.\n   A trailing flex spacer survives the scroll and restores the end gap. *\/\n@media(max-width:768px){.did-sh .seg::after{content:\"\";flex:0 0 8px;align-self:stretch}}\n\n\/* HERO *\/\n.did-sh .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:96px 0 88px}\n.did-sh .hero::before{content:\"\";position:absolute;inset:0;background:radial-gradient(880px 460px at 80% 4%,rgba(255,136,46,.32),transparent 60%),radial-gradient(640px 420px at 6% 96%,rgba(255,136,46,.12),transparent 60%);pointer-events:none;animation:heroGlow 14s ease-in-out infinite alternate}\n@keyframes heroGlow{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}\n.did-sh .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}\n.did-sh .hero h1{font-size:clamp(36px,5.6vw,60px);margin-bottom:22px;font-weight:600}\n.did-sh .hero h1 .accent{color:var(--orange)}\n.did-sh .hero p.lead{font-size:18px;color:var(--muted-light);max-width:560px;margin-bottom:34px;font-weight:400}\n.did-sh .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}\n.did-sh .hero-note{font-size:13.5px;color:var(--muted-light);font-weight:400}\n.did-sh .hero-note b{color:#fff;font-weight:500}\n\n\/* hero on-load entrance *\/\n.did-sh .hero .anim{opacity:0;transform:translateY(22px);animation:heroRise .9s var(--ease) forwards}\n.did-sh .hero .anim.d1{animation-delay:.05s}\n.did-sh .hero .anim.d2{animation-delay:.16s}\n.did-sh .hero .anim.d3{animation-delay:.27s}\n.did-sh .hero .anim.d4{animation-delay:.38s}\n.did-sh .hero .visual,.did-sh .hero .hl-frame{opacity:0;transform:translateY(30px) scale(.98);animation:heroRise 1s var(--ease) .3s forwards}\n\n\/* HERO H1 live-avatar call frame *\/\n.did-sh .hl-frame{position:relative;width:100%;aspect-ratio:4\/5;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}\n.did-sh .hl-av{width:100%;height:100%;object-fit:cover;display:block}\n.did-sh .hl-scan{position:absolute;left:0;right:0;height:130px;top:-130px;background:linear-gradient(transparent,rgba(255,136,46,.14),transparent);pointer-events:none;z-index:2;animation:hlScan 5.5s linear infinite}\n@keyframes hlScan{0%{top:-130px}100%{top:100%}}\n.did-sh .hl-live{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(11,11,15,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;font-family:'Manrope',sans-serif}\n.did-sh .hl-live .dot{width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:hlLive 1.6s infinite}\n@keyframes hlLive{0%{box-shadow:0 0 0 0 rgba(255,77,77,.6)}70%{box-shadow:0 0 0 8px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}\n.did-sh .hl-private{position:absolute;top:14px;right:14px;z-index:3;background:var(--orange);color:#161616;font-size:11px;font-weight:700;padding:6px 11px;border-radius:999px;font-family:'Manrope',sans-serif}\n.did-sh .hl-pause{position:absolute;left:14px;bottom:72px;z-index:4;width:34px;height:34px;border-radius:50%;background:rgba(11,11,15,.7);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s}\n.did-sh .hl-pause:hover{transform:scale(1.08);background:rgba(11,11,15,.92)}\n.did-sh .hl-pause svg{width:14px;height:14px}\n.did-sh .hl-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.82));display:flex;align-items:center;justify-content:space-between;gap:12px}\n.did-sh .hl-wave{display:inline-flex;align-items:flex-end;gap:3px;height:28px}\n.did-sh .hl-wave i{width:3px;height:8px;border-radius:2px;background:var(--orange-2);animation:hlWave 1s ease-in-out infinite}\n@keyframes hlWave{0%,100%{height:7px}50%{height:26px}}\n.did-sh .hl-lat{font-size:12px;color:#fff;font-weight:600;background:rgba(255,255,255,.16);padding:6px 11px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:'Manrope',sans-serif}\n@keyframes heroRise{to{opacity:1;transform:none}}\n\n\/* hero loop visual *\/\n.did-sh .visual{position:relative;border-radius:18px;padding:26px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,136,46,.05));border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.5)}\n.did-sh .visual .badge{position:absolute;right:-10px;top:-12px;background:var(--orange);color:#161616;font-size:12px;font-weight:700;padding:8px 14px;border-radius:999px;box-shadow:0 8px 24px rgba(255,136,46,.5)}\n.did-sh .loop-title{font-size:13px;color:var(--muted-light);font-weight:400;margin-bottom:16px}\n.did-sh .loop-title b{color:#fff;font-weight:600}\n.did-sh .loop-step{position:relative;display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:13px 16px;transition:border-color .3s ease,background .3s ease}\n.did-sh .loop-step.lit{border-color:rgba(255,136,46,.5);background:rgba(255,136,46,.09)}\n.did-sh .loop-step .si{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,136,46,.16);color:var(--orange-2);flex:0 0 auto;transition:transform .3s var(--ease)}\n.did-sh .loop-step.lit .si{transform:scale(1.08)}\n.did-sh .loop-step .si svg{width:18px;height:18px}\n.did-sh .loop-step .lt{font-size:14px;font-weight:500;color:#fff}\n.did-sh .loop-step .ls{font-size:12px;color:var(--muted-light);font-weight:400}\n.did-sh .loop-arrow{display:flex;justify-content:center;color:var(--orange);height:16px;align-items:center}\n.did-sh .loop-arrow svg{width:16px;height:16px}\n\n\/* KPI strip *\/\n.did-sh .kpi{background:var(--ink-2);color:#fff;padding:42px 0;border-top:1px solid rgba(255,255,255,.07)}\n.did-sh .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}\n.did-sh .kpi .num{font-size:clamp(28px,3.5vw,40px);font-weight:700;color:var(--orange);letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-height:2.15em;display:flex;align-items:center;justify-content:center;line-height:1.07;text-align:center}\n.did-sh .kpi .lbl{font-size:13.5px;color:var(--muted-light);margin-top:6px;font-weight:400}\n\n\/* sections *\/\n.did-sh section.block{padding:88px 0}\n.did-sh .center{text-align:center;max-width:740px;margin:0 auto 56px}\n.did-sh .center p{color:var(--muted);font-size:17px;margin-top:16px;font-weight:400}\n\n.did-sh .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;background:rgba(255,136,46,.16);color:var(--orange);transition:transform .3s var(--ease),background .3s ease}\n.did-sh .ic svg{width:24px;height:24px}\n\n\/* why cards *\/\n.did-sh .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}\n.did-sh .card{position:relative;background:#fff;border:1px solid rgba(22,22,22,.06);border-radius:20px;padding:30px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px rgba(16,24,40,.07);transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .3s ease}\n.did-sh .card::before{content:\"\";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(140deg,rgba(255,136,46,.5),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}\n.did-sh .card:hover{transform:translateY(-6px);box-shadow:0 1px 2px rgba(16,24,40,.04),0 22px 50px rgba(16,24,40,.14)}\n.did-sh .card:hover::before{opacity:1}\n.did-sh .card:hover .ic{transform:translateY(-3px) scale(1.06);background:rgba(255,136,46,.24)}\n.did-sh .card h3{font-size:18px;margin-bottom:10px;font-weight:600}\n.did-sh .card p{color:var(--muted);font-size:15px;font-weight:400}\n\n\/* value grid (unused placeholder retained) *\/\n.did-sh .val{background:var(--ink-2);color:#fff}\n\n\/* HOW IT WORKS - pipeline flow *\/\n.did-sh .how{background:var(--paper)}\n.did-sh .loop-dark{position:relative;overflow:hidden;background:var(--ink-2);color:#fff}\n.did-sh .loop-dark::before{content:\"\";position:absolute;inset:0;background:radial-gradient(60% 90% at 88% 0,rgba(255,136,46,.12),transparent 55%);pointer-events:none}\n.did-sh .loop-dark .wrap{position:relative;z-index:2}\n.did-sh .loop-dark .center p{color:var(--muted-light)}\n.did-sh .loop-dark .flow-note{color:var(--muted-light)}\n.did-sh .loop-dark .flow-note b{color:#fff;font-weight:600}\n.did-sh .loop-dark .fnode:not(.accent-node){background:rgba(255,255,255,.06);border-color:var(--line-dark)}\n.did-sh .loop-dark .fnode:not(.accent-node) h3{color:#fff}\n.did-sh .loop-dark .fnode:not(.accent-node) .fi{background:rgba(255,136,46,.18);color:var(--orange-2)}\n.did-sh .flow{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}\n.did-sh .flow-controls{display:flex;justify-content:center;margin:0 0 22px}\n.did-sh .flow-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(22,22,22,.05);border:1px solid var(--line);color:var(--text);font-family:'Manrope',sans-serif;font-weight:600;font-size:12.5px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}\n.did-sh .flow-toggle:hover{background:rgba(22,22,22,.09);border-color:rgba(255,136,46,.5)}\n.did-sh .flow-toggle svg{width:13px;height:13px}\n.did-sh .flow-pulse{position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffb37f 45%,var(--orange) 100%);box-shadow:0 0 16px 4px rgba(255,136,46,.75);transform:translate(-50%,-50%);pointer-events:none;z-index:5;opacity:0}\n.did-sh .fnode.lit{border-color:rgba(255,136,46,.75)!important}\n.did-sh .fnode.lit .fi{transform:scale(1.14)}\n.did-sh .loop-dark .fnode:not(.accent-node).lit{box-shadow:0 0 0 4px rgba(255,136,46,.16),0 16px 34px rgba(0,0,0,.45)!important;background:rgba(255,136,46,.1)!important}\n.did-sh .fnode.accent-node.lit{box-shadow:0 0 0 9px rgba(255,136,46,.22),0 22px 46px rgba(255,136,46,.55)!important}\n\/* closed-loop orbit *\/\n.did-sh .floop{position:relative;height:520px;max-width:760px;margin:0 auto}\n.did-sh .floop-ring{position:absolute;left:50%;top:50%;width:420px;height:420px;max-width:94%;max-height:94%;transform:translate(-50%,-50%);pointer-events:none}\n.did-sh .floop .fnode{position:absolute;left:50%;top:50%;width:118px;min-height:98px;margin:0}\n.did-sh .floop.in .fnode{opacity:1}\n.did-sh .floop-core{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,rgba(255,136,46,.28),transparent 70%);color:#fff;pointer-events:none;z-index:1}\n.did-sh .floop-core b{font-family:'Manrope',sans-serif;font-size:17px;display:block;color:#fff}\n.did-sh .floop-core span{font-size:12px;color:var(--muted-light)}\n.did-sh .floop-core::after{content:\"\";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,136,46,.35);animation:floopRipple 3s ease-out infinite}\n@keyframes floopRipple{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.5);opacity:0}}\n.did-sh .floop-comet{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff,#ffb37f 45%,var(--orange) 100%);box-shadow:0 0 18px 5px rgba(255,136,46,.8);transform:translate(-50%,-50%);z-index:6;pointer-events:none;opacity:0}\n.did-sh .floop .fnode.avatar.lit{box-shadow:0 0 0 8px rgba(255,136,46,.22),0 20px 44px rgba(255,136,46,.5)!important}\n@media(max-width:560px){.did-sh .floop{height:430px}.did-sh .floop-core{width:118px;height:118px}.did-sh .floop .fnode{width:104px;min-height:86px;padding:14px 8px}.did-sh .floop .fnode h3{font-size:12px}}\n\/* horizontal flowing conduit (light how section) - PURE CSS, no JS *\/\n.did-sh .how-light{background:#fff}\n.did-sh .conduit{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;max-width:1000px;margin:0 auto;min-height:150px}\n\/* connector line + flowing dashes (spans first->last node centre) *\/\n.did-sh .conduit-line{position:absolute;top:50%;left:70px;right:70px;height:2px;transform:translateY(-50%);background:rgba(22,22,22,.12);border-radius:2px;z-index:0}\n.did-sh .conduit-line::before{content:\"\";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--orange) 0 3px,transparent 3px 16px);opacity:.5;animation:condDash 1.1s linear infinite}\n@keyframes condDash{to{background-position:16px 0}}\n\/* traveling comet *\/\n.did-sh .conduit-comet{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,#fff,#ffb37f 45%,var(--orange) 100%);box-shadow:0 0 14px 4px rgba(255,136,46,.7);animation:condComet 6s linear infinite}\n@keyframes condComet{0%{left:0;opacity:0}3%{opacity:1}80%{left:100%;opacity:1}86%{left:100%;opacity:0}100%{left:100%;opacity:0}}\n\/* nodes + sequential lighting (node i lights as the comet passes) *\/\n.did-sh .conduit .fnode{position:relative;z-index:1;width:140px;min-height:120px;margin:0;opacity:1;transform:none;animation:condNodeLit 6s linear infinite;animation-delay:calc(var(--i,0) * 0.96s)}\n.did-sh .conduit .fnode .fi{animation:condFiLit 6s linear infinite;animation-delay:calc(var(--i,0) * 0.96s)}\n@keyframes condNodeLit{0%,16%,100%{border-color:var(--line);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px rgba(16,24,40,.07)}2%,12%{border-color:rgba(255,136,46,.75);background:#fff6ef;box-shadow:0 0 0 4px rgba(255,136,46,.14),0 14px 30px rgba(16,24,40,.12)}}\n@keyframes condFiLit{0%,16%,100%{transform:scale(1);background:rgba(255,136,46,.1);color:var(--orange-ink)}2%,12%{transform:scale(1.12);background:var(--orange);color:#fff}}\n.did-sh .how-light .prov-line{color:var(--muted)}\n\/* CSS-only pause toggle (keyboard-operable checkbox, no JS) *\/\n.did-sh .flow-pause-cb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n.did-sh .flow-toggle .ft-ic{width:13px;height:13px;flex:0 0 auto;background:currentColor;-webkit-mask:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'\/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'\/%3E%3C\/svg%3E\") center\/contain no-repeat;mask:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'\/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'\/%3E%3C\/svg%3E\") center\/contain no-repeat}\n.did-sh .flow-toggle .ft-label::after{content:\"Datenfluss pausieren\"}\n#flowPause:checked ~ .flow-controls .flow-toggle .ft-ic{-webkit-mask-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5l12 7-12 7z'\/%3E%3C\/svg%3E\");mask-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5l12 7-12 7z'\/%3E%3C\/svg%3E\")}\n#flowPause:checked ~ .flow-controls .flow-toggle .ft-label::after{content:\"Datenfluss abspielen\"}\n.did-sh .flow-pause-cb:focus-visible ~ .flow-controls .flow-toggle{outline:3px solid var(--orange);outline-offset:3px}\n#flowPause:checked ~ .conduit .conduit-comet,\n#flowPause:checked ~ .conduit .conduit-line::before,\n#flowPause:checked ~ .conduit .fnode,\n#flowPause:checked ~ .conduit .fnode .fi{animation-play-state:paused}\n@media(max-width:640px){\n  .did-sh .conduit{flex-direction:column;gap:12px;max-width:340px}\n  .did-sh .conduit .fnode{width:100%;max-width:320px;flex-direction:row;justify-content:flex-start;gap:14px;text-align:left;min-height:0;padding:15px 18px}\n  .did-sh .conduit .fnode .fi{margin:0}\n  .did-sh .conduit .fnode h3{font-size:14px}\n  .did-sh .conduit-line{top:64px;bottom:64px;left:50%;right:auto;width:2px;height:auto;transform:translateX(-50%)}\n  .did-sh .conduit-line::before{background:repeating-linear-gradient(180deg,var(--orange) 0 3px,transparent 3px 16px);animation:condDashV 1.1s linear infinite}\n  .did-sh .conduit-comet{left:50%;margin-left:-7px;animation:condCometV 6s linear infinite}\n  @keyframes condDashV{to{background-position:0 16px}}\n  @keyframes condCometV{0%{top:0;opacity:0}3%{opacity:1}80%{top:100%;opacity:1}86%{top:100%;opacity:0}100%{top:100%;opacity:0}}\n}\n@media(prefers-reduced-motion:reduce){\n  .did-sh .conduit-comet{display:none}\n  .did-sh .conduit-line::before{animation:none}\n  .did-sh .conduit .fnode,.did-sh .conduit .fnode .fi{animation:none}\n  .did-sh .conduit .fnode.avatar{border-color:rgba(255,136,46,.75);background:#fff6ef;box-shadow:0 0 0 4px rgba(255,136,46,.14),0 14px 30px rgba(16,24,40,.12)}\n  .did-sh .conduit .fnode.avatar .fi{transform:scale(1.12);background:var(--orange);color:#fff}\n  .did-sh .flow-controls{display:none}\n}\n.did-sh .fnode{flex:0 0 auto;width:134px;min-height:132px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;transform:translateY(16px) scale(.96);transition:transform .5s var(--ease),box-shadow .3s var(--ease),opacity .5s var(--ease)}\n.did-sh .flow.in .fnode{opacity:1;transform:none}\n.did-sh .fnode .fi{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,136,46,.1);color:var(--orange-ink);transition:transform .3s var(--ease)}\n.did-sh .fnode .fi svg{width:23px;height:23px}\n.did-sh .fnode:hover{transform:translateY(-6px)}\n.did-sh .fnode:hover .fi{transform:scale(1.1)}\n.did-sh .loop-dark .fnode:not(.accent-node):hover{box-shadow:0 16px 34px rgba(0,0,0,.4)}\n.did-sh .fnode h3{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}\n.did-sh .fnode.accent-node{width:152px;min-height:152px;background:var(--orange);border-color:var(--orange);box-shadow:0 12px 30px rgba(255,136,46,.32)}\n.did-sh .fnode.accent-node .fi{background:rgba(255,255,255,.24);color:#fff}\n.did-sh .fnode.accent-node h3{color:#161616}\n.did-sh .flow.in .fnode.accent-node{animation:nodePop .7s var(--ease) .9s both}\n@keyframes nodePop{0%{box-shadow:0 12px 30px rgba(255,136,46,.32)}45%{box-shadow:0 0 0 10px rgba(255,136,46,.18),0 20px 44px rgba(255,136,46,.5)}100%{box-shadow:0 12px 30px rgba(255,136,46,.32)}}\n.did-sh .fnode.accent-node:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(255,136,46,.5)}\n.did-sh .farrow{display:flex;align-items:center;color:rgba(255,255,255,.3);opacity:0;transition:opacity .4s var(--ease),color .3s ease}\n.did-sh .flow.in .farrow{opacity:1}\n.did-sh .flow.in .farrow.pulse{color:var(--orange)}\n.did-sh .farrow svg{width:18px;height:18px}\n.did-sh .flow-note{max-width:760px;margin:34px auto 0;text-align:center;color:var(--muted);font-size:19px;font-weight:400;line-height:1.5;text-wrap:balance}\n.did-sh .flow-note b{color:var(--text);font-weight:600}\n\n\/* deploy anywhere *\/\n.did-sh .deploy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}\n.did-sh .dcard{position:relative;border:1px solid rgba(22,22,22,.06);border-radius:20px;padding:30px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px rgba(16,24,40,.07);transition:transform .25s var(--ease),box-shadow .3s var(--ease)}\n.did-sh .dcard::before{content:\"\";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(140deg,rgba(255,136,46,.55),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}\n.did-sh .dcard:hover{transform:translateY(-6px);box-shadow:0 1px 2px rgba(16,24,40,.04),0 22px 50px rgba(16,24,40,.14)}\n.did-sh .dcard:hover::before{opacity:1}\n.did-sh .dcard .tag{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink)}\n.did-sh .dcard h3{font-size:20px;margin:10px 0;font-weight:600}\n.did-sh .dcard p{color:var(--muted);font-size:15px;font-weight:400}\n\n\/* experts band *\/\n.did-sh .experts{background:var(--ink-2);color:#fff}\n.did-sh .experts-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}\n.did-sh .experts-grid h2{font-size:clamp(26px,3.4vw,38px)}\n.did-sh .experts-grid p{color:var(--muted-light);font-size:16.5px;font-weight:400;margin:18px 0 28px}\n.did-sh .ex-cards{display:flex;flex-direction:column;gap:14px}\n.did-sh .ex-card{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid var(--line-dark);border-radius:14px;padding:20px 22px;transition:transform .25s var(--ease),background .3s ease,border-color .3s ease}\n.did-sh .ex-card:hover{transform:translateX(6px);background:rgba(255,255,255,.06);border-color:rgba(255,136,46,.4)}\n.did-sh .ex-card .fi{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(255,136,46,.14);color:var(--orange-2);flex:0 0 auto}\n.did-sh .ex-card .fi svg{width:21px;height:21px}\n.did-sh .ex-card h3{font-size:16px;font-weight:600;color:#fff;margin-bottom:3px}\n.did-sh .ex-card p{font-size:14px;color:var(--muted-light);font-weight:400;margin:0}\n\n\/* trust *\/\n.did-sh .trust{background:var(--paper)}\n.did-sh .badges{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}\n.did-sh .bcard{position:relative;background:#fff;border:1px solid rgba(22,22,22,.06);border-radius:20px;padding:26px;text-align:center;box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px rgba(16,24,40,.07);transition:transform .25s var(--ease),box-shadow .3s var(--ease)}\n.did-sh .bcard::before{content:\"\";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(140deg,rgba(255,136,46,.55),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;pointer-events:none}\n.did-sh .bcard:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(16,24,40,.04),0 20px 46px rgba(16,24,40,.13)}\n.did-sh .bcard:hover::before{opacity:1}\n.did-sh .bcard .ic{margin:0 auto 14px}\n.did-sh .bcard:hover .ic{transform:scale(1.08);background:rgba(255,136,46,.24)}\n.did-sh .bcard h3{font-size:16px;margin-bottom:7px;font-weight:600}\n.did-sh .bcard p{font-size:13.5px;color:var(--muted);font-weight:400}\n\n\/* avatars \u2014 interactive picker (DARK section) *\/\n.did-sh .avatars{background:var(--ink-2);color:#fff}\n.did-sh .avatars .eyebrow{color:var(--orange)}\n.did-sh .avatars h2{color:#fff}\n.did-sh .av-panel{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line-dark);border-radius:28px;padding:clamp(26px,3.6vw,52px);box-shadow:0 30px 80px rgba(0,0,0,.35)}\n.did-sh .av-panel::before{content:\"\";position:absolute;inset:0;background:radial-gradient(58% 88% at 94% 2%,rgba(255,136,46,.16),transparent 56%);pointer-events:none}\n.did-sh .av-panel .av-grid{position:relative;z-index:1}\n.did-sh .av-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center}\n.did-sh .av-grid h2{margin-bottom:16px}\n.did-sh .av-grid p{color:var(--muted-light);font-size:17px;font-weight:400;margin-bottom:0}\n.did-sh .ap-rail-label{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:#fff;margin:26px 0 12px}\n.did-sh .ap-rail{display:flex;gap:12px;flex-wrap:wrap}\n.did-sh .ap-thumb{position:relative;width:74px;height:92px;border-radius:12px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--ink-2);padding:0;transition:border-color .2s,transform .2s var(--ease)}\n.did-sh .ap-thumb img{width:100%;height:100%;object-fit:cover;display:block}\n.did-sh .ap-thumb:hover{transform:translateY(-3px)}\n.did-sh .ap-thumb.is-on{border-color:var(--orange)}\n.did-sh .ap-thumb.is-on::after{content:\"\";position:absolute;top:5px;right:5px;width:15px;height:15px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px #fff}\n.did-sh .ap-byo{display:grid;place-items:center;border:2px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.04);color:var(--orange-2);font-size:11px;font-weight:700;text-align:center;font-family:'Manrope',sans-serif;line-height:1.3}\n.did-sh .ap-byo.is-on{border-color:var(--orange)}\n.did-sh .ap-byo.is-on::after{display:none}\n.did-sh .ap-featured{position:relative;aspect-ratio:4\/5;border-radius:20px;overflow:hidden;background:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.2);max-width:400px;width:100%;margin-left:auto}\n.did-sh .ap-stage{position:absolute;inset:0}\n.did-sh .ap-stage img,.did-sh .ap-stage video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s var(--ease)}\n.did-sh .ap-tag{position:absolute;top:14px;right:14px;z-index:3;background:rgba(11,11,15,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}\n.did-sh .ap-call{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:rgba(34,176,90,.95);border:3px solid rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;z-index:4;transition:transform .18s var(--ease)}\n.did-sh .ap-call::after{content:\"\";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(34,176,90,.6);animation:callPulse 2.4s ease-out infinite}\n@keyframes callPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}\n.did-sh .ap-call svg{width:24px;height:24px;color:#fff}\n.did-sh .ap-call:hover{transform:translateX(-50%) scale(1.08)}\n.did-sh .ap-byo-panel{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:34px;background:linear-gradient(160deg,#1b1016,#0e0c17)}\n.did-sh .ap-byo-panel[hidden]{display:none}\n.did-sh .ap-byo-panel .ic-up{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;background:rgba(255,136,46,.16);color:var(--orange-2);border:2px dashed rgba(255,136,46,.5)}\n.did-sh .ap-byo-panel .ic-up svg{width:26px;height:26px}\n.did-sh .ap-byo-panel h3{font-size:18px;color:#fff;font-family:'Manrope',sans-serif;font-weight:600}\n.did-sh .ap-byo-panel p{font-size:14px;color:var(--muted-light);max-width:250px;margin:0}\n.did-sh .ap-sound{position:absolute;top:14px;left:14px;z-index:5;width:34px;height:34px;border-radius:50%;background:rgba(11,11,15,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s,color .2s}\n.did-sh .ap-sound[hidden]{display:none}\n.did-sh .ap-sound:hover{transform:scale(1.08);background:rgba(11,11,15,.9)}\n.did-sh .ap-sound.on{background:var(--orange);color:#161616;border-color:transparent}\n.did-sh .ap-sound svg{width:16px;height:16px}\n\n\/* providers *\/\n.did-sh .prov-line{max-width:760px;margin:26px auto 0;text-align:center;font-size:15.5px;font-weight:400;letter-spacing:.01em;line-height:2.3}\n.did-sh .prov-line span{white-space:nowrap}\n.did-sh .prov-line .sep{opacity:.35;margin:0 16px}\n.did-sh .loop-dark .prov-line{color:var(--muted-light)}\n\/* provider chips (how section) *\/\n.did-sh .prov{max-width:860px;margin:36px auto 0;text-align:center}\n.did-sh .prov-lead{color:var(--muted);font-size:19px;font-weight:400;line-height:1.5;text-wrap:balance;margin:0 auto 22px;max-width:640px}\n.did-sh .prov-lead b{color:var(--text);font-weight:600}\n.did-sh .prov-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}\n.did-sh .prov-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:linear-gradient(180deg,#fff,#faf9f7);border:1px solid rgba(22,22,22,.1);font-family:'Manrope',sans-serif;font-weight:600;font-size:13.5px;color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.05);transition:transform .2s var(--ease),border-color .2s ease,box-shadow .2s ease}\n.did-sh .prov-chip::before{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:0 0 auto}\n.did-sh .prov-chip:hover{transform:translateY(-3px);border-color:rgba(255,136,46,.55);box-shadow:0 10px 22px rgba(16,24,40,.1)}\n\n\/* pricing *\/\n.did-sh .pricing{background:#fff}\n.did-sh #faq{background:var(--paper-2)}\n\/* pricing 3D tilt *\/\n.did-sh .price-scene{perspective:1200px}\n.did-sh .price-card{transform-style:preserve-3d;will-change:transform;transition:transform .25s var(--ease),box-shadow .3s var(--ease)}\n.did-sh .price-card .price-glare{position:absolute;inset:0;border-radius:24px;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(255,180,120,.45),transparent 60%);transition:opacity .3s ease;z-index:3}\n.did-sh .price-card.tilting{box-shadow:0 30px 70px rgba(16,24,40,.18)}\n.did-sh .price-card.tilting .price-glare{opacity:.6}\n.did-sh .price-card{position:relative;max-width:540px;margin:0 auto;background:linear-gradient(165deg,#ffffff 0%,#fff9f3 58%,#fff1e4 100%);border:1px solid rgba(255,136,46,.2);border-radius:24px;padding:42px 40px;text-align:center;box-shadow:0 1px 2px rgba(16,24,40,.04),0 22px 54px rgba(255,136,46,.14),0 18px 44px rgba(16,24,40,.1)}\n.did-sh .price-card .amt-sub{font-size:14px;color:var(--orange-ink);font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:20px}\n.did-sh .price-two{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}\n.did-sh .ptier{display:flex;flex-direction:column;align-items:center}\n.did-sh .pt-num{font-size:40px;font-weight:700;color:var(--text);letter-spacing:-.03em;line-height:1}\n.did-sh .pt-lbl{font-size:13px;color:var(--muted);font-weight:400;margin-top:8px}\n.did-sh .pplus{font-size:30px;color:var(--orange-ink);font-weight:400}\n.did-sh .price-list{text-align:left;max-width:430px;margin:28px auto 0;display:flex;flex-direction:column;gap:12px}\n.did-sh .pli{display:flex;gap:11px;font-size:14.5px;color:var(--text);font-weight:400;align-items:center;min-height:30px;line-height:1.35}\n.did-sh .pli svg{width:19px;height:19px;color:var(--orange-ink);flex:0 0 auto}\n.did-sh .price-note{font-size:12.5px;color:var(--muted);margin-top:26px;font-weight:400;line-height:1.5}\n.did-sh .price-card .btn{margin-top:26px}\n\n\/* FAQ *\/\n.did-sh .faq-list{max-width:820px;margin:0 auto}\n.did-sh details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:14px;overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease}\n.did-sh details:hover{box-shadow:0 8px 24px rgba(0,0,0,.07);border-color:rgba(0,0,0,.16)}\n.did-sh details[open]{box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:rgba(255,136,46,.35)}\n.did-sh details[open] p{animation:faqOpen .28s var(--ease)}\n@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n.did-sh summary{cursor:pointer;padding:22px 26px;font-weight:500;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}\n.did-sh summary::-webkit-details-marker{display:none}\n.did-sh summary::after{content:\"\";width:20px;height:20px;flex:0 0 auto;background:var(--orange-ink);-webkit-mask:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'\/%3E%3C\/svg%3E\") center\/contain no-repeat;mask:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'\/%3E%3C\/svg%3E\") center\/contain no-repeat;transition:transform .28s var(--ease)}\n.did-sh details[open] summary::after{transform:rotate(135deg)}\n.did-sh details p{padding:0 26px 24px;color:var(--muted);font-size:15px;font-weight:400}\n\n\/* final CTA *\/\n.did-sh .final{position:relative;background:var(--ink-2);color:#fff;overflow:hidden;padding:90px 0}\n.did-sh .final::before{content:\"\";position:absolute;inset:0;background:radial-gradient(680px 380px at 50% 0%,rgba(255,136,46,.34),transparent 65%)}\n.did-sh .final-inner{position:relative;z-index:2;text-align:center;max-width:680px;margin:0 auto}\n.did-sh .final .eyebrow{color:var(--orange)}\n.did-sh .final h2{font-size:clamp(30px,4.5vw,46px)}\n.did-sh .final p{color:var(--muted-light);font-size:18px;margin:18px 0 32px;font-weight:400}\n.did-sh .final .hero-cta{justify-content:center}\n\n\/* cursor-follow glow on dark sections *\/\n.did-sh .glow-dark{position:relative}\n.did-sh .glow-dark::after{content:\"\";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s ease;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(255,136,46,.10),transparent 55%)}\n.did-sh .glow-dark.glow-on::after{opacity:1}\n.did-sh .experts{overflow:hidden}\n.did-sh .experts .wrap{position:relative;z-index:2}\n\n\/* theme hardening (WordPress) *\/\n.did-sh a.btn,.did-sh a.btn:hover,.did-sh a.btn:focus,.did-sh a.btn:active{text-decoration:none}\n.did-sh a.btn-primary,.did-sh a.btn-primary:hover,.did-sh a.btn-primary:focus,.did-sh a.btn-primary:active{color:#161616 !important}\n.did-sh a.btn-ghost,.did-sh a.btn-ghost:hover,.did-sh a.btn-ghost:focus{color:#fff !important}\n.did-sh .btn::before{content:none !important}\n\n@media(max-width:900px){\n  .did-sh .hero-grid,.did-sh .why-grid,.did-sh .av-grid,.did-sh .deploy-grid,.did-sh .experts-grid{grid-template-columns:1fr}\n  .did-sh .kpi-grid{grid-template-columns:repeat(2,1fr);gap:30px}\n  .did-sh .hero{padding:72px 0 64px}\n  .did-sh .av-grid{gap:36px}\n}\n@media(max-width:560px){\n  .did-sh .kpi-grid,.did-sh .badges{grid-template-columns:1fr}\n  .did-sh section.block{padding:60px 0}\n  .did-sh .wrap{padding:0 20px}\n  .did-sh .btn{width:100%;justify-content:center}\n  .did-sh .hero-cta{width:100%}\n  .did-sh .flow{flex-direction:column;align-items:center;gap:10px}\n  .did-sh .fnode,.did-sh .fnode.accent-node{width:100%;max-width:300px}\n  .did-sh .farrow{transform:rotate(90deg)}\n  .did-sh .price-card{padding:34px 22px}\n}\n\n\/* REDUCED MOTION *\/\n@media(prefers-reduced-motion:reduce){\n  .did-sh *,.did-sh *::before,.did-sh *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}\n  .did-sh [data-reveal]{opacity:1 !important;transform:none !important}\n  .did-sh .hero .anim,.did-sh .hero .visual,.did-sh .hero .hl-frame{opacity:1 !important;transform:none !important;animation:none !important}\n  .did-sh .flow .fnode{opacity:1 !important;transform:none !important}\n  .did-sh .floop .fnode{opacity:1 !important}\n  .did-sh .floop-comet{display:none}\n  .did-sh .conduit .fnode{opacity:1 !important;transform:none !important}\n  .did-sh .conduit-comet{display:none}\n  .did-sh .farrow{opacity:1 !important}\n  .did-sh .av-call::after{display:none}\n  .did-sh .hero::before{animation:none !important}\n}\n\n\/* ===== BOOK-A-DEMO MODAL ===== *\/\n\/* z-index sits above the page (highest site element ~9999) but BELOW Google reCAPTCHA's\n   challenge overlay (z-index 2000000000, appended to the page body) so the select-all-images\n   challenge renders on top of the modal and stays clickable instead of behind it. Never put\n   literal HTML tag strings in this stylesheet - build.py delimits on the body tag. *\/\n.did-modal{position:fixed;inset:0;z-index:100000000;display:flex;align-items:center;justify-content:center;padding:20px;font-family:'Manrope',sans-serif}\n.did-modal[hidden]{display:none}\n.did-modal__backdrop{position:absolute;inset:0;background:rgba(11,11,15,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:didFade .2s var(--ease)}\n.did-modal__panel{position:relative;width:100%;max-width:560px;max-height:90vh;overflow:auto;background:#fff;border-radius:20px;padding:34px 32px 30px;box-shadow:0 30px 90px rgba(0,0,0,.4);animation:didPop .26s var(--ease)}\n.did-modal__title{font-family:'Manrope',sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em;color:#161616;margin:0 40px 20px 0;line-height:1.2}\n.did-modal__close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(22,22,22,.12);background:#fff;color:#161616;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,transform .2s ease}\n.did-modal__close:hover{background:rgba(22,22,22,.06)}\n.did-modal__close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}\n.did-modal__close svg{width:18px;height:18px}\n.did-modal__form{min-height:120px}\n.did-modal__loading{color:#5a5a63;font-size:14px;padding:24px 4px;text-align:center}\n@keyframes didFade{from{opacity:0}to{opacity:1}}\n@keyframes didPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}\nhtml.did-modal-open{overflow:hidden}\nbody.did-modal-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}\n@media(max-width:560px){.did-modal{padding:0}.did-modal__panel{max-width:100%;height:100%;max-height:100%;border-radius:0;padding:56px 20px 28px}}\n@media(prefers-reduced-motion:reduce){.did-modal__backdrop,.did-modal__panel{animation:none}}\n\n\/* ===== preview-only chrome (removed by build.py) ===== *\/\n<\/style>\n\n<div class=\"did-sh\">\n\n<!-- ==================== STRUCTURED DATA (SEO \/ AEO) ====================\n     JSON-LD is inert data, not JavaScript - WP Rocket's JS delay\/combine\n     does not touch application\/ld+json, so this needs no did-inline-js marker.\n     All text below is copied VERBATIM from the visible page (title, meta\n     description, hero lead, FAQ). Update this block if that copy changes,\n     so schema never drifts out of sync with what's on the page. -->\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"Organization\",\n      \"@id\": \"https:\/\/www.d-id.com\/#organization\",\n      \"name\": \"D-ID\",\n      \"url\": \"https:\/\/www.d-id.com\/\"\n    },\n    {\n      \"@type\": \"WebSite\",\n      \"@id\": \"https:\/\/www.d-id.com\/#website\",\n      \"url\": \"https:\/\/www.d-id.com\/\",\n      \"name\": \"D-ID\",\n      \"publisher\": { \"@id\": \"https:\/\/www.d-id.com\/#organization\" }\n    },\n    {\n      \"@type\": \"WebPage\",\n      \"@id\": \"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatars\/#webpage\",\n      \"url\": \"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatars\/\",\n      \"name\": \"Selbst gehostete Expressive Avatars: KI-Videos in Echtzeit in deiner Cloud\",\n      \"description\": \"D-ID Expressive Avatars in deiner eigenen Infrastruktur. Stelle konversationelle Echtzeit-Avatare vollst\u00e4ndig in deinem Netzwerk bereit, bei voller Datenhoheit.\",\n      \"isPartOf\": { \"@id\": \"https:\/\/www.d-id.com\/#website\" },\n      \"about\": { \"@id\": \"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatars\/#service\" },\n      \"breadcrumb\": { \"@id\": \"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatars\/#breadcrumb\" },\n      \"inLanguage\": \"de-DE\"\n    },\n    {\n      \"@type\": \"BreadcrumbList\",\n      \"@id\": \"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatars\/#breadcrumb\",\n      \"itemListElement\": [\n        { \"@type\": \"ListItem\", \"position\": 1, \"name\": \"D-ID\", \"item\": \"https:\/\/www.d-id.com\/\" },\n        { \"@type\": \"ListItem\", \"position\": 2, \"name\": \"Selbst gehostete Expressive Avatars\", \"item\": \"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatars\/\" }\n      ]\n    },\n    {\n      \"@type\": \"Service\",\n      \"@id\": \"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatars\/#service\",\n      \"name\": \"D-ID Selbst gehostete Expressive Avatars\",\n      \"description\": \"Stelle konversationelle Echtzeit-Avatare vollst\u00e4ndig in deiner eigenen Infrastruktur bereit. Deine Daten verlassen zu keinem Zeitpunkt dein Netzwerk, und das Avatar-Modell von D-ID rendert in weniger als 200 Millisekunden.\",\n      \"provider\": { \"@id\": \"https:\/\/www.d-id.com\/#organization\" },\n      \"serviceType\": \"Deployment selbst gehosteter KI-Avatare\",\n      \"areaServed\": \"Weltweit\"\n    },\n    {\n      \"@type\": \"FAQPage\",\n      \"@id\": \"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatars\/#faq\",\n      \"mainEntity\": [\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Verlassen meine Daten meine Umgebung?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Nein. Gespr\u00e4che, Avatar-Konfigurationen und Assets bleiben vollst\u00e4ndig in deinem eigenen Netzwerk. Auch das Avatar-Modell wird dort ausgef\u00fchrt. Ausgehende Daten werden ausschlie\u00dflich an die Speech-to-Text-, Sprachmodell- und Text-to-Speech-Anbieter \u00fcbermittelt, die du selbst eingebunden hast. W\u00e4hrend des Betriebs erh\u00e4lt D-ID keine Daten deiner Endnutzer.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Kann ich meine eigenen Modelle und Stimmen verwenden?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Ja. Die Pipeline ist anbieterunabh\u00e4ngig aufgebaut. Du kannst die Speech-to-Text-, Sprachmodell- und Text-to-Speech-Dienste deiner Wahl integrieren. So beh\u00e4ltst du die Kontrolle \u00fcber Kosten, Qualit\u00e4t und den Ort, an dem die einzelnen Anfragen verarbeitet werden.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Kann ich meine eigenen Avatare nutzen?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Ja. Nutze individuelle Avatare f\u00fcr einen vollst\u00e4ndig gebrandeten Auftritt oder w\u00e4hle einen Standard-Avatar aus der Bibliothek von D-ID, um schnell zu starten.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Welche Infrastruktur ben\u00f6tige ich?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Du hostest die L\u00f6sung in deinem eigenen Cloud-Account. F\u00fcr das Avatar-Rendering ben\u00f6tigst du GPU-Kapazit\u00e4t, f\u00fcr das Streaming-Backend regul\u00e4re Compute-Ressourcen. Die L\u00f6sung kann in Azure, AWS und Google Cloud bereitgestellt und \u00fcber die Azure- und AWS-Marketplaces bezogen werden. Unser Team unterst\u00fctzt dich beim Onboarding und bei der passenden Dimensionierung deiner Infrastruktur.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Wie l\u00e4sst sich die L\u00f6sung skalieren?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Es gibt kein festes Limit f\u00fcr gleichzeitige Sessions. Das Deployment kann anhand der von dir definierten Metriken automatisch hoch- oder herunterskalieren und die verf\u00fcgbare Kapazit\u00e4t flexibel an den Bedarf anpassen. Die maximale Anzahl gleichzeitiger Avatar-Gespr\u00e4che h\u00e4ngt dabei von deiner Infrastruktur ab. F\u00fcr den produktiven Betrieb stehen Hochverf\u00fcgbarkeitsoptionen zur Verf\u00fcgung.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Welchen Support erhalte ich?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Die Forward-Deployed Engineers von D-ID unterst\u00fctzen dich bei der Planung, Bereitstellung und Optimierung des gesamten Stacks. Zus\u00e4tzlich erh\u00e4ltst du regelm\u00e4\u00dfige Security-Patches, Bugfixes und direkten Zugang zu unseren Experten. In einer Demo besprechen wir deine Anforderungen und entwickeln gemeinsam einen passenden Deployment-Plan.\"\n          }\n        }\n      ]\n    }\n  ]\n}\n<\/script>\n<!-- ==================== BLOCK 1 - HERO ==================== -->\n<section class=\"hero glow-dark\">\n  <div class=\"wrap hero-grid\">\n    <div>\n      <span class=\"eyebrow anim d1\" style=\"color:var(--orange)\">D-ID Expressive Avatars &middot; Self-Hosted<\/span>\n      <h1 class=\"anim d2\">Hoste D-IDs <span class=\"accent\">Expressive Avatars<\/span> in deiner eigenen Cloud<\/h1>\n      <p class=\"lead anim d3\">Stelle konversationelle Echtzeit-Avatare vollst\u00e4ndig in deiner eigenen Infrastruktur bereit. Deine Daten verlassen zu keinem Zeitpunkt dein Netzwerk. Das Avatar-Modell von D-ID rendert dabei in weniger als 200 Millisekunden.<\/p>\n      <div class=\"hero-cta anim d4\">\n        <a href=\"#demo\" class=\"btn btn-primary\">Demo buchen<svg class=\"arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"><\/path><path d=\"M13 6l6 6-6 6\"><\/path><\/svg><\/a>\n        <a href=\"#how\" class=\"btn btn-ghost\">So funktioniert\u2019s<\/a>\n      <\/div>\n      <p class=\"hero-note anim d4\"><b>Dein Stack, deine Wahl.<\/b> Nutze deine eigenen Avatare, Stimmen und Sprachmodelle oder greife auf die Standardbibliothek von D-ID zur\u00fcck.<\/p>\n    <\/div>\n    <div class=\"hl-frame\">\n      <video class=\"hl-av\" id=\"heroVid\" autoplay muted loop playsinline preload=\"auto\" poster=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-hero-poster.jpg\" aria-label=\"D-ID Expressive-Avatar-Presenter in einem Live-Videocall, der ein selbst gehostetes Deployment zeigt\">\n        <source src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-hero.mp4\" type=\"video\/mp4\">\n      <\/video>\n      <div class=\"hl-scan\" aria-hidden=\"true\"><\/div>\n      <span class=\"hl-live\"><span class=\"dot\"><\/span>Live<\/span>\n      <span class=\"hl-private\">Deine Umgebung &middot; 100 % privat<\/span>\n      <button class=\"hl-pause\" id=\"heroPause\" type=\"button\" aria-label=\"Avatar-Video pausieren\"><svg id=\"heroPauseIcon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"><\/rect><rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"><\/rect><\/svg><\/button>\n      <div class=\"hl-bottom\"><span class=\"hl-wave\" id=\"heroWave\" aria-hidden=\"true\"><\/span><span class=\"hl-lat\">~180ms<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 2 - KPI ==================== -->\n<section class=\"kpi\">\n  <div class=\"wrap kpi-grid\">\n    <div data-reveal><div class=\"num\" data-count-to=\"200\" data-prefix=\"&lt; \" data-suffix=\" ms\">&lt; 200 ms<\/div><div class=\"lbl\">Latenz des D-ID Avatar-Modells<\/div><\/div>\n    <div data-reveal style=\"--rd:80ms\"><div class=\"num\">Unbegrenzt skalierbar<\/div><div class=\"lbl\">Gleichzeitige Avatar-Sessions<\/div><\/div>\n    <div data-reveal style=\"--rd:160ms\"><div class=\"num\" data-count-to=\"99.9\" data-decimals=\"1\" data-suffix=\" %\" data-decimal-sep=\",\">99,9 %<\/div><div class=\"lbl\">Verf\u00fcgbarkeit durch hochverf\u00fcgbares Failover<\/div><\/div>\n    <div data-reveal style=\"--rd:240ms\"><div class=\"num\" data-count-to=\"100\" data-suffix=\" %\">100 %<\/div><div class=\"lbl\">Deiner Daten bleiben in deiner Umgebung<\/div><\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 3 - SUBNAV ==================== -->\n<div class=\"seg-spacer\" id=\"segSpacer\" aria-hidden=\"true\"><\/div>\n<div class=\"seg-wrap\" id=\"segWrap\">\n  <nav class=\"seg\" id=\"segNav\" aria-label=\"Self-Hosting-Bereiche\">\n    <span class=\"seg-ind\" aria-hidden=\"true\"><\/span>\n    <a href=\"#why\">Warum Self-Hosting<\/a>\n    <a href=\"#avatars\">Avatare<\/a>\n    <a href=\"#how\">So funktioniert\u2019s<\/a>\n    <a href=\"#deploy\">Deployment<\/a>\n    <a href=\"#experts\">Experten-Support<\/a>\n    <a href=\"#pricing\">Preise<\/a>\n    <a href=\"#trust\">Sicherheit<\/a>\n    <a href=\"#faq\">FAQ<\/a>\n  <\/nav>\n<\/div>\n\n<!-- ==================== BLOCK 4 - WHY ==================== -->\n<section class=\"block\" id=\"why\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <span class=\"eyebrow\">Warum Self-Hosting?<\/span>\n      <h2>Volle Kontrolle \u00fcber Daten, Infrastruktur und Performance<\/h2>\n      <p>F\u00fcr Unternehmen mit hohen Anforderungen an Datenschutz, Latenz und Compliance ist eine \u00f6ffentliche API nicht immer die passende L\u00f6sung. Mit Self-Hosting bringst du das vollst\u00e4ndige Expressive-Avatars-Erlebnis in eine Infrastruktur, die bereits unter deiner Kontrolle steht.<\/p>\n    <\/div>\n    <div class=\"why-grid\">\n      <div class=\"card\" data-reveal>\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path><\/svg><\/div>\n        <h3>Volle Datenhoheit<\/h3>\n        <p>Gespr\u00e4che, Konfigurationen und Assets bleiben vollst\u00e4ndig in deinem Netzwerk. W\u00e4hrend des Betriebs werden keine Daten an D-ID \u00fcbertragen. Ideal f\u00fcr regulierte Branchen und Unternehmen mit strengen Vorgaben zur Datenresidenz.<\/p>\n      <\/div>\n      <div class=\"card\" data-reveal style=\"--rd:90ms\">\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2 3 14h9l-1 8 10-12h-9z\"><\/path><\/svg><\/div>\n        <h3>Niedrige, planbare Latenz<\/h3>\n        <p>Das Avatar-Modell von D-ID rendert in weniger als 200 Millisekunden. Da es direkt neben deiner Anwendung l\u00e4uft, entf\u00e4llt der Umweg \u00fcber das \u00f6ffentliche Internet.<\/p>\n      <\/div>\n      <div class=\"card\" data-reveal style=\"--rd:180ms\">\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 12a9 9 0 0 1 15-6.7L21 8\"><\/path><path d=\"M21 3v5h-5\"><\/path><path d=\"M21 12a9 9 0 0 1-15 6.7L3 16\"><\/path><path d=\"M3 21v-5h5\"><\/path><\/svg><\/div>\n        <h3>Kein Anbieter-Lock-in<\/h3>\n        <p>Tausche Speech-to-Text-, LLM- und Text-to-Speech-Anbieter jederzeit aus. Nutze deine eigenen Avatare und Stimmen oder greife auf die Standardbibliothek von D-ID zur\u00fcck.<\/p>\n      <\/div>\n      <div class=\"card\" data-reveal>\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3l8 4v5c0 5-3.4 7.8-8 9-4.6-1.2-8-4-8-9V7z\"><\/path><path d=\"M9 12l2 2 4-4\"><\/path><\/svg><\/div>\n        <h3>Compliance by Design<\/h3>\n        <p>Vereinfache interne Security-Reviews und erf\u00fclle regulatorische Anforderungen, indem Daten, Netzwerkzugriffe und Identit\u00e4ten vollst\u00e4ndig unter deiner Governance bleiben.<\/p>\n      <\/div>\n      <div class=\"card\" data-reveal style=\"--rd:90ms\">\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3v18h18\"><\/path><rect x=\"7\" y=\"11\" width=\"3\" height=\"7\"><\/rect><rect x=\"12\" y=\"7\" width=\"3\" height=\"11\"><\/rect><rect x=\"17\" y=\"14\" width=\"3\" height=\"4\"><\/rect><\/svg><\/div>\n        <h3>Integrierte Insights<\/h3>\n        <p>Erhalte vollst\u00e4ndige Transparenz \u00fcber jede Session. Nutzungs-, Latenz- und Engagement-Metriken stehen dir direkt in deinem eigenen Deployment zur Verf\u00fcgung.<\/p>\n      <\/div>\n      <div class=\"card\" data-reveal style=\"--rd:180ms\">\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 18l6-6-6-6\"><\/path><path d=\"M8 6l-6 6 6 6\"><\/path><\/svg><\/div>\n        <h3>Erweiterbar mit deiner eigenen Logik<\/h3>\n        <p>Verbinde die Avatare mit deinen Workflows, internen Tools und individuellen Gesch\u00e4ftsprozessen.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 5 - AVATARS ==================== -->\n<section class=\"block avatars glow-dark\" id=\"avatars\">\n  <div class=\"wrap\">\n    <div class=\"av-panel\">\n    <div class=\"av-grid\">\n    <div data-reveal>\n      <span class=\"eyebrow\">Avatare<\/span>\n      <h2>Nutze deinen eigenen Avatar oder w\u00e4hle aus unserer Bibliothek<\/h2>\n      <p>Setze einen individuellen Avatar ein, der zu deiner Marke passt und mit deiner gew\u00fcnschten Stimme spricht. Alternativ kannst du aus D-IDs Bibliothek ausdrucksstarker Standard-Presenter w\u00e4hlen.<\/p>\n      <div class=\"ap-rail-label\">Presenter ausw\u00e4hlen<\/div>\n      <div class=\"ap-rail\" id=\"apRail\" role=\"tablist\" aria-label=\"Presenter ausw\u00e4hlen\">\n        <button class=\"ap-thumb is-on\" role=\"tab\" aria-selected=\"true\" data-name=\"Mia\" data-src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de-poster.jpg\" data-video=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de.mp4\"><img decoding=\"async\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de-poster.jpg\" alt=\"Presenter Mia\" loading=\"lazy\"><\/button>\n        <button class=\"ap-thumb\" role=\"tab\" aria-selected=\"false\" data-name=\"Bob\" data-src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-bob-de-poster.jpg\" data-video=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-bob-de.mp4\"><img decoding=\"async\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-bob-de-poster.jpg\" alt=\"Presenter Bob\" loading=\"lazy\"><\/button>\n        <button class=\"ap-thumb\" role=\"tab\" aria-selected=\"false\" data-name=\"Aria\" data-src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-aria-de-poster.jpg\" data-video=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-aria-de.mp4\"><img decoding=\"async\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-aria-de-poster.jpg\" alt=\"Presenter Aria\" loading=\"lazy\"><\/button>\n        <button class=\"ap-thumb\" role=\"tab\" aria-selected=\"false\" data-name=\"Jamie\" data-src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-jamie-de-poster.jpg\" data-video=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-jamie-de.mp4\"><img decoding=\"async\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-jamie-de-poster.jpg\" alt=\"Presenter Jamie\" loading=\"lazy\"><\/button>\n        <button class=\"ap-thumb\" role=\"tab\" aria-selected=\"false\" data-name=\"Meera\" data-src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-meera-de-poster.jpg\" data-video=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-meera-de.mp4\"><img decoding=\"async\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-meera-de-poster.jpg\" alt=\"Presenter Meera\" loading=\"lazy\"><\/button>\n        <button class=\"ap-thumb ap-byo\" data-byo=\"1\" aria-label=\"Bring deinen eigenen Marken-Avatar mit\"><span>+ Deine<br>Marke<\/span><\/button>\n      <\/div>\n      <a href=\"#demo\" class=\"btn btn-primary\" style=\"margin-top:26px\">Demo buchen<svg class=\"arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"><\/path><path d=\"M13 6l6 6-6 6\"><\/path><\/svg><\/a>\n    <\/div>\n    <div class=\"ap-featured\" data-reveal style=\"--rd:120ms\">\n      <span class=\"ap-tag\" id=\"apTag\" aria-live=\"polite\">Mia<\/span>\n      <button class=\"ap-sound\" id=\"apSound\" type=\"button\" aria-label=\"Ton einschalten\" aria-pressed=\"false\" hidden>\n        <svg id=\"apSoundIcon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 9v6h4l5 4V5L8 9z\"><\/path><path d=\"M17 9l4 6M21 9l-4 6\"><\/path><\/svg>\n      <\/button>\n      <div class=\"ap-stage\"><img decoding=\"async\" id=\"apImg\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de-poster.jpg\" alt=\"Ausgew\u00e4hlter D-ID Presenter, Mia\"><\/div>\n      <div class=\"ap-byo-panel\" id=\"apByoPanel\" hidden>\n        <span class=\"ic-up\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 16V4M8 8l4-4 4 4\"><\/path><path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\"><\/path><\/svg><\/span>\n        <h3>Nutze deinen eigenen Avatar<\/h3>\n        <p>Setze einen individuellen Avatar ein, der zu deiner Marke passt und mit deiner gew\u00fcnschten Stimme spricht.<\/p>\n      <\/div>\n      <a class=\"ap-call\" href=\"#demo\" aria-label=\"Sprich mit uns\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path fill=\"currentColor\" d=\"M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.6a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z\"><\/path><\/svg><\/a>\n    <\/div>\n    <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 6 - HOW IT WORKS ==================== -->\n<section class=\"block how-light\" id=\"how\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <span class=\"eyebrow\">So funktioniert\u2019s<\/span>\n      <h2>Eine Echtzeit-Konversation in einer durchg\u00e4ngigen Schleife<\/h2>\n      <p>Der Client verbindet sich \u00fcber WebRTC mit deinem Backend. Das Audiosignal wird von den Speech-to-Text-, Sprachmodell- und Text-to-Speech-Diensten deiner Wahl verarbeitet. Anschlie\u00dfend generiert das D-ID-Modell das expressive Avatar-Video und streamt es direkt an den Client zur\u00fcck. Alles geschieht in Echtzeit.<\/p>\n    <\/div>\n    <input type=\"checkbox\" id=\"flowPause\" class=\"flow-pause-cb\">\n    <div class=\"flow-controls\">\n      <label for=\"flowPause\" class=\"flow-toggle\"><span class=\"ft-ic\" aria-hidden=\"true\"><\/span><span class=\"ft-label\"><\/span><\/label>\n    <\/div>\n    <div class=\"conduit\">\n      <span class=\"conduit-line\" aria-hidden=\"true\"><span class=\"conduit-comet\"><\/span><\/span>\n      <div class=\"fnode\" style=\"--i:0\"><span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 6h16v10H4z\"><\/path><path d=\"M8 20h8M12 16v4\"><\/path><path d=\"M9 11l2 2 4-4\"><\/path><\/svg><\/span><h3>Client stellt die Verbindung her<\/h3><\/div>\n      <div class=\"fnode\" style=\"--i:1\"><span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 9v6M8 5v14M12 8v8M16 6v12M20 10v4\"><\/path><\/svg><\/span><h3>Speech-to-Text verarbeitet die Sprache<\/h3><\/div>\n      <div class=\"fnode\" style=\"--i:2\"><span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M9 12l2 2 4-4\"><\/path><\/svg><\/span><h3>Sprecherwechsel wird erkannt<\/h3><\/div>\n      <div class=\"fnode\" style=\"--i:3\"><span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"7\" y=\"7\" width=\"10\" height=\"10\" rx=\"2.5\"><\/rect><path d=\"M10 7V4M14 7V4M10 20v-3M14 20v-3M7 10H4M7 14H4M20 10h-3M20 14h-3\"><\/path><\/svg><\/span><h3>Das LLM generiert die Antwort<\/h3><\/div>\n      <div class=\"fnode\" style=\"--i:4\"><span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 9v6h4l5 4V5L8 9z\"><\/path><path d=\"M17 9a4 4 0 0 1 0 6\"><\/path><\/svg><\/span><h3>Text-to-Speech erzeugt die Stimme<\/h3><\/div>\n      <div class=\"fnode avatar\" style=\"--i:5\"><span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"><\/rect><circle cx=\"12\" cy=\"10\" r=\"2.5\"><\/circle><path d=\"M7 18c1-2 3-3 5-3s4 1 5 3\"><\/path><\/svg><\/span><h3>Der Avatar streamt die Antwort zur\u00fcck<\/h3><\/div>\n    <\/div>\n    <div class=\"prov\" data-reveal>\n      <p class=\"prov-lead\">L\u00e4uft vollst\u00e4ndig in <b>deiner eigenen Umgebung<\/b>. Verbinde die KI-Dienste deiner Wahl.<\/p>\n      <div class=\"prov-chips\"><span class=\"prov-chip\">OpenAI<\/span><span class=\"prov-chip\">Anthropic<\/span><span class=\"prov-chip\">Google Gemini<\/span><span class=\"prov-chip\">Azure OpenAI<\/span><span class=\"prov-chip\">AWS Bedrock<\/span><span class=\"prov-chip\">ElevenLabs<\/span><span class=\"prov-chip\">Cartesia<\/span><span class=\"prov-chip\">Deepgram<\/span><span class=\"prov-chip\">dein eigenes Modell<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 7 - DEPLOY ==================== -->\n<section class=\"block how\" id=\"deploy\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <span class=\"eyebrow\">Flexibel deployen<\/span>\n      <h2>Ein Stack. <span class=\"accent-rust\">Deine Cloud. Deine Regeln.<\/span><\/h2>\n      <p>Hoste dieselben Expressive Avatars in der Umgebung und Region deiner Wahl. So erf\u00fcllst du deine Anforderungen an Latenz, Datenstandort und Compliance.<\/p>\n    <\/div>\n    <div class=\"deploy-grid\">\n      <div class=\"dcard\" data-reveal><div class=\"tag\">Public Cloud<\/div><h3>Azure &middot; AWS &middot; GCP<\/h3><p>Deploye die L\u00f6sung in deinem eigenen Cloud-Account und nutze die GPU-Kapazit\u00e4ten und Managed Services, die bereits Teil deiner Infrastruktur sind.<\/p><\/div>\n      <div class=\"dcard\" data-reveal style=\"--rd:90ms\"><div class=\"tag\">Privates Netzwerk<\/div><h3>Deine VPC, deine Zugangsdaten<\/h3><p>Hoste die L\u00f6sung in deinem privaten Netzwerk und verwalte Identit\u00e4ten und Zugriffe \u00fcber deine eigenen Systeme. Dauerhafte Zugangsdaten m\u00fcssen nicht an Dritte weitergegeben werden.<\/p><\/div>\n      <div class=\"dcard\" data-reveal style=\"--rd:180ms\"><div class=\"tag\">Cloud Marketplace<\/div><h3>Abrechnung \u00fcber Azure und AWS<\/h3><p>Beziehe die L\u00f6sung \u00fcber die Azure- oder AWS-Marketplaces. So k\u00f6nnen deine Ausgaben f\u00fcr D-ID auf bestehende Commitments und Enterprise-Rabattvereinbarungen angerechnet werden.<\/p><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 8 - EXPERTS ==================== -->\n<section class=\"block experts glow-dark\" id=\"experts\">\n  <div class=\"wrap experts-grid\">\n    <div data-reveal>\n      <span class=\"eyebrow\" style=\"color:var(--orange)\">Experten-Support<\/span>\n      <h2>Forward-Deployed Engineers an deiner Seite<\/h2>\n      <p>Die Forward-Deployed Engineers von D-ID arbeiten direkt mit deinem Team zusammen. Sie planen die Architektur, implementieren die L\u00f6sung in deiner Umgebung und optimieren sie f\u00fcr deine Anforderungen an Latenz, Skalierung und Kosten. Anschlie\u00dfend unterst\u00fctzen sie dich mit regelm\u00e4\u00dfigen Updates, Patches und Fehlerbehebungen.<\/p>\n      <a href=\"#demo\" class=\"btn btn-primary\">Sprich mit unseren Experten<svg class=\"arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"><\/path><path d=\"M13 6l6 6-6 6\"><\/path><\/svg><\/a>\n    <\/div>\n    <div class=\"ex-cards\">\n      <div class=\"ex-card\" data-reveal>\n        <span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4.5\"><\/rect><path d=\"M12 16.5V9M8.5 12.5 12 9l3.5 3.5\"><\/path><\/svg><\/span>\n        <div><h3>Gemeinsam deployen<\/h3><p>Unsere Engineers unterst\u00fctzen dich dabei, den vollst\u00e4ndigen Stack in deiner eigenen Cloud oder deinem Rechenzentrum einzurichten.<\/p><\/div>\n      <\/div>\n      <div class=\"ex-card\" data-reveal style=\"--rd:90ms\">\n        <span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"6\" y1=\"9.5\" x2=\"18\" y2=\"9.5\"><\/line><line x1=\"6\" y1=\"14.5\" x2=\"18\" y2=\"14.5\"><\/line><circle cx=\"10\" cy=\"9.5\" r=\"2.3\"><\/circle><circle cx=\"15\" cy=\"14.5\" r=\"2.3\"><\/circle><\/svg><\/span>\n        <div><h3>Optimieren und skalieren<\/h3><p>Stimme Latenz, Kapazit\u00e4t und Kosten auf deine tats\u00e4chlichen Nutzungsmuster und Traffic-Anforderungen ab.<\/p><\/div>\n      <\/div>\n      <div class=\"ex-card\" data-reveal style=\"--rd:180ms\">\n        <span class=\"fi\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 13a8 8 0 0 1 16 0\"><\/path><rect x=\"2.5\" y=\"13\" width=\"4\" height=\"6.5\" rx=\"1.5\"><\/rect><rect x=\"17.5\" y=\"13\" width=\"4\" height=\"6.5\" rx=\"1.5\"><\/rect><path d=\"M20 19.5a4 4 0 0 1-4 3h-2\"><\/path><\/svg><\/span>\n        <div><h3>Laufender Support<\/h3><p>Erhalte regelm\u00e4\u00dfige Security-Patches, Bugfixes und direkte Unterst\u00fctzung durch unsere Experten.<\/p><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 9 - PRICING ==================== -->\n<section class=\"block pricing\" id=\"pricing\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <span class=\"eyebrow\">Transparente Preise<\/span>\n      <h2>Ein einfaches Modell, das mit deiner Nutzung skaliert<\/h2>\n      <p>Die j\u00e4hrliche Plattformlizenz enth\u00e4lt ein festgelegtes Kontingent an Streaming-Minuten. Ben\u00f6tigst du mehr Kapazit\u00e4t, kannst du zus\u00e4tzliche Minuten flexibel nach Verbrauch abrechnen.<\/p>\n    <\/div>\n    <div class=\"price-scene\">\n    <div class=\"price-card\" data-reveal id=\"priceCard\">\n      <span class=\"price-glare\" aria-hidden=\"true\"><\/span>\n      <div class=\"amt-sub\">D-ID Self-Hosted<\/div>\n      <div class=\"price-two\">\n        <div class=\"ptier\"><div class=\"pt-num\">J\u00e4hrlich<\/div><div class=\"pt-lbl\">Plattformlizenz<\/div><\/div>\n        <div class=\"pplus\">+<\/div>\n        <div class=\"ptier\"><div class=\"pt-num\">$0,15<\/div><div class=\"pt-lbl\">pro Streaming-Minute<\/div><\/div>\n      <\/div>\n      <div class=\"price-list\">\n        <div class=\"pli\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg>J\u00e4hrliche Plattformlizenz inklusive Streaming-Minuten<\/div>\n        <div class=\"pli\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg>Zus\u00e4tzliche Minuten ab $0,15 pro Minute<\/div>\n        <div class=\"pli\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg>Individuelle Konditionen f\u00fcr gr\u00f6\u00dfere Volumen<\/div>\n        <div class=\"pli\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"><\/path><\/svg>Eigene KI-Anbieter ohne zus\u00e4tzlichen Aufschlag integrierbar<\/div>\n      <\/div>\n      <a href=\"#demo\" class=\"btn btn-primary\">Angebot anfordern<svg class=\"arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"><\/path><path d=\"M13 6l6 6-6 6\"><\/path><\/svg><\/a>\n    <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 10 - TRUST ==================== -->\n<section class=\"block trust\" id=\"trust\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <span class=\"eyebrow\">Vertrauensw\u00fcrdig und compliant<\/span>\n      <h2>Enterprise-Sicherheit <span class=\"accent-rust\">von Anfang bis Ende<\/span><\/h2>\n      <p>D-ID erm\u00f6glicht Digital-Human-Erlebnisse f\u00fcr internationale Unternehmen und Marken. Durch Self-Hosting bleiben deine Daten vollst\u00e4ndig in deiner eigenen Umgebung. Gleichzeitig profitierst du von den Sicherheitsstandards und Zertifizierungen, die Enterprise-Teams erwarten.<\/p>\n    <\/div>\n    <div class=\"badges\">\n      <div class=\"bcard\" data-reveal><div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3l8 4v5c0 5-3.4 7.8-8 9-4.6-1.2-8-4-8-9V7z\"><\/path><path d=\"M9 12l2 2 4-4\"><\/path><\/svg><\/div><h3>SOC 2 Type II<\/h3><p>Unabh\u00e4ngig gepr\u00fcfte Kontrollen f\u00fcr Sicherheit, Verf\u00fcgbarkeit und Vertraulichkeit.<\/p><\/div>\n      <div class=\"bcard\" data-reveal style=\"--rd:80ms\"><div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"6\"><\/circle><path d=\"M8.2 13.2 7 22l5-3 5 3-1.2-8.8\"><\/path><\/svg><\/div><h3>ISO 27001<\/h3><p>Zertifiziertes Informationssicherheitsmanagement f\u00fcr die gesamte Plattform.<\/p><\/div>\n      <div class=\"bcard\" data-reveal style=\"--rd:160ms\"><div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"><\/rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"><\/path><\/svg><\/div><h3>DSGVO und CCPA<\/h3><p>Entwickelt f\u00fcr die Einhaltung internationaler Datenschutz- und Privacy-Anforderungen.<\/p><\/div>\n      <div class=\"bcard\" data-reveal style=\"--rd:240ms\"><div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3v18\"><\/path><path d=\"M7 21h10\"><\/path><path d=\"M5 7h14\"><\/path><path d=\"M5 7l-2.5 5a2.5 2.5 0 0 0 5 0z\"><\/path><path d=\"M19 7l-2.5 5a2.5 2.5 0 0 0 5 0z\"><\/path><circle cx=\"12\" cy=\"4\" r=\"1.4\"><\/circle><\/svg><\/div><h3>Ethische KI<\/h3><p>Verbindliche Vorgaben f\u00fcr den verantwortungsvollen Einsatz von KI sowie fest in den Nutzungsbedingungen von D-ID verankerte Ethical-Use-Klauseln.<\/p><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 11 - FAQ ==================== -->\n<section class=\"block\" id=\"faq\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <span class=\"eyebrow\">FAQ<\/span>\n      <h2>Fragen und Antworten zum Self-Hosting auf einen Blick<\/h2>\n    <\/div>\n    <div class=\"faq-list\" data-reveal>\n      <details open=\"\">\n        <summary>Verlassen meine Daten meine Umgebung?<\/summary>\n        <p>Nein. Gespr\u00e4che, Avatar-Konfigurationen und Assets bleiben vollst\u00e4ndig in deinem eigenen Netzwerk. Auch das Avatar-Modell wird dort ausgef\u00fchrt. Ausgehende Daten werden ausschlie\u00dflich an die Speech-to-Text-, Sprachmodell- und Text-to-Speech-Anbieter \u00fcbermittelt, die du selbst eingebunden hast. W\u00e4hrend des Betriebs erh\u00e4lt D-ID keine Daten deiner Endnutzer.<\/p>\n      <\/details>\n      <details>\n        <summary>Kann ich meine eigenen Modelle und Stimmen verwenden?<\/summary>\n        <p>Ja. Die Pipeline ist anbieterunabh\u00e4ngig aufgebaut. Du kannst die Speech-to-Text-, Sprachmodell- und Text-to-Speech-Dienste deiner Wahl integrieren. So beh\u00e4ltst du die Kontrolle \u00fcber Kosten, Qualit\u00e4t und den Ort, an dem die einzelnen Anfragen verarbeitet werden.<\/p>\n      <\/details>\n      <details>\n        <summary>Kann ich meine eigenen Avatare nutzen?<\/summary>\n        <p>Ja. Nutze individuelle Avatare f\u00fcr einen vollst\u00e4ndig gebrandeten Auftritt oder w\u00e4hle einen Standard-Avatar aus der Bibliothek von D-ID, um schnell zu starten.<\/p>\n      <\/details>\n      <details>\n        <summary>Welche Infrastruktur ben\u00f6tige ich?<\/summary>\n        <p>Du hostest die L\u00f6sung in deinem eigenen Cloud-Account. F\u00fcr das Avatar-Rendering ben\u00f6tigst du GPU-Kapazit\u00e4t, f\u00fcr das Streaming-Backend regul\u00e4re Compute-Ressourcen. Die L\u00f6sung kann in Azure, AWS und Google Cloud bereitgestellt und \u00fcber die Azure- und AWS-Marketplaces bezogen werden. Unser Team unterst\u00fctzt dich beim Onboarding und bei der passenden Dimensionierung deiner Infrastruktur.<\/p>\n      <\/details>\n      <details>\n        <summary>Wie l\u00e4sst sich die L\u00f6sung skalieren?<\/summary>\n        <p>Es gibt kein festes Limit f\u00fcr gleichzeitige Sessions. Das Deployment kann anhand der von dir definierten Metriken automatisch hoch- oder herunterskalieren und die verf\u00fcgbare Kapazit\u00e4t flexibel an den Bedarf anpassen. Die maximale Anzahl gleichzeitiger Avatar-Gespr\u00e4che h\u00e4ngt dabei von deiner Infrastruktur ab. F\u00fcr den produktiven Betrieb stehen Hochverf\u00fcgbarkeitsoptionen zur Verf\u00fcgung.<\/p>\n      <\/details>\n      <details>\n        <summary>Welchen Support erhalte ich?<\/summary>\n        <p>Die Forward-Deployed Engineers von D-ID unterst\u00fctzen dich bei der Planung, Bereitstellung und Optimierung des gesamten Stacks. Zus\u00e4tzlich erh\u00e4ltst du regelm\u00e4\u00dfige Security-Patches, Bugfixes und direkten Zugang zu unseren Experten. In einer Demo besprechen wir deine Anforderungen und entwickeln gemeinsam einen passenden Deployment-Plan.<\/p>\n      <\/details>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 12 - FINAL CTA ==================== -->\n<section class=\"final glow-dark\" id=\"demo\">\n  <div class=\"wrap final-inner\" data-reveal>\n    <span class=\"eyebrow\">Bereit f\u00fcr Self-Hosting?<\/span>\n    <h2>Bring Expressive Avatars in deine eigene Cloud.<\/h2>\n    <p>Sprich mit unserem Team, um eine selbst gehostete Expressive-Avatars-L\u00f6sung zu entwerfen und auszurollen, die deine Anforderungen an Performance, Datenschutz und Compliance erf\u00fcllt.<\/p>\n    <div class=\"hero-cta\">\n      <a href=\"https:\/\/www.d-id.com\/de\/kontakt\/\" class=\"btn btn-primary\">Demo buchen<svg class=\"arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"><\/path><path d=\"M13 6l6 6-6 6\"><\/path><\/svg><\/a>\n      <a href=\"#how\" class=\"btn btn-ghost\">So funktioniert\u2019s<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BOOK-A-DEMO MODAL ==================== -->\n<div class=\"did-modal\" id=\"demoModal\" hidden role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demoModalTitle\">\n  <div class=\"did-modal__backdrop\" data-close><\/div>\n  <div class=\"did-modal__panel\" role=\"document\">\n    <button class=\"did-modal__close\" type=\"button\" data-close aria-label=\"Dialog schlie\u00dfen\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\"><\/path><\/svg>\n    <\/button>\n    <h2 id=\"demoModalTitle\" class=\"did-modal__title\">Buche deine D-ID Demo<\/h2>\n    <div id=\"demoFormMount\" class=\"did-modal__form\"><p class=\"did-modal__loading\">Formular wird geladen\u2026<\/p><\/div>\n  <\/div>\n<\/div>\n\n<\/div><!-- \/.did-sh -->\n\n<!-- ==================== BLOCK 13 - SCRIPTS ==================== -->\n\n<script>\/* did-inline-js *\/\n(function(){\n  var RM = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n  var root = document.querySelector('.did-sh');\n  if(!root) return;\n\n  \/* ---------- SCROLL REVEAL ---------- *\/\n  (function(){\n    var els = root.querySelectorAll('[data-reveal]');\n    if(RM || !('IntersectionObserver' in window)){\n      els.forEach(function(e){ e.classList.add('in'); });\n      return;\n    }\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(en){\n        if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); }\n      });\n    }, { rootMargin:'0px 0px -12% 0px', threshold:0.12 });\n    els.forEach(function(e){ io.observe(e); });\n  })();\n\n  \/* ---------- KPI COUNT-UP ---------- *\/\n  (function(){\n    var nums = root.querySelectorAll('.kpi .num[data-count-to]');\n    if(!nums.length) return;\n    function run(el){\n      var to = parseFloat(el.getAttribute('data-count-to'));\n      var dec = parseInt(el.getAttribute('data-decimals')||'0',10);\n      var pre = el.getAttribute('data-prefix')||'';\n      var suf = el.getAttribute('data-suffix')||'';\n      var dsep = el.getAttribute('data-decimal-sep')||'.';\n      function fmt(n){ var s = n.toFixed(dec); if(dsep !== '.'){ s = s.replace('.', dsep); } return s; }\n      pre = pre.replace(\/&lt;\/g,'<').replace(\/&gt;\/g,'>');\n      if(RM){ el.textContent = pre + fmt(to) + suf; return; }\n      var dur = 1500, start = null;\n      function step(ts){\n        if(start===null) start = ts;\n        var t = Math.min(1,(ts-start)\/dur);\n        var eased = 1 - Math.pow(1-t,3);\n        el.textContent = pre + fmt(to*eased) + suf;\n        if(t<1) requestAnimationFrame(step);\n        else el.textContent = pre + fmt(to) + suf;\n      }\n      requestAnimationFrame(step);\n    }\n    if(RM || !('IntersectionObserver' in window)){ nums.forEach(run); return; }\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(en){\n        if(en.isIntersecting){ run(en.target); io.unobserve(en.target); }\n      });\n    }, { threshold:0.5 });\n    nums.forEach(function(n){ io.observe(n); });\n  })();\n\n  \/* ---------- FLOW NODES REVEAL (continuous signal handled in its own script) ---------- *\/\n  (function(){\n    var flow = document.getElementById('flow');\n    if(!flow) return;\n    if(RM || !('IntersectionObserver' in window)){ flow.classList.add('in'); return; }\n    var io = new IntersectionObserver(function(entries){\n      entries.forEach(function(en){\n        if(!en.isIntersecting) return;\n        flow.classList.add('in');\n        io.unobserve(en.target);\n      });\n    }, { threshold:0.35 });\n    io.observe(flow);\n  })();\n})();\n<\/script>\n\n<script>\/* did-inline-js *\/\n\/* ---------- STICKY PILL NAV: sliding highlight + scroll-spy + click lock ---------- *\/\n(function(){\n  var RM = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n  var nav = document.getElementById('segNav');\n  if(!nav) return;\n  var wrap = nav.closest('.seg-wrap');\n  var spacer = document.getElementById('segSpacer');\n  var kpiEl = document.querySelector('.kpi');\n  var ind = nav.querySelector('.seg-ind');\n  var links = Array.prototype.slice.call(nav.querySelectorAll('a'));\n  if(!links.length) return;\n  var sections = links.map(function(a){ return document.querySelector(a.getAttribute('href')); });\n  var stopEl = document.getElementById('demo');\n\n  function headerBottom(){\n    var cands = document.querySelectorAll('header, .site-header, #masthead, .pv-header, #wpadminbar');\n    var b = 0;\n    Array.prototype.forEach.call(cands, function(el){\n      var cs = getComputedStyle(el);\n      if(cs.position === 'fixed' || cs.position === 'sticky'){\n        var r = el.getBoundingClientRect();\n        if(r.top <= 1){ if(r.bottom > b) b = r.bottom; }\n      }\n    });\n    return b;\n  }\n\n  function applyOffset(){\n    if(!wrap) return;\n    var hb = headerBottom();\n    \/\/ The pill belongs right after the KPI strip in normal flow, and should only start\n    \/\/ sticking to the top of the viewport once scrolling would carry it past that point -\n    \/\/ exactly what position:sticky is meant to do. Anchoring to the KPI section's own\n    \/\/ bottom edge (rather than the pill's own position) stays valid whether or not the\n    \/\/ pill is currently fixed, so this never drifts out of sync with itself over time.\n    var naturalTop = kpiEl ? (kpiEl.getBoundingClientRect().bottom + window.pageYOffset) : 0;\n    var shouldStick = window.pageYOffset >= (naturalTop - hb);\n    if(shouldStick){\n      wrap.classList.add('is-fixed');\n      var pillH = wrap.offsetHeight;\n      \/\/ Upper bound: once the pill's bottom would reach the final CTA (#demo), dock\n      \/\/ it there and let it ride up out of view with the page instead of staying\n      \/\/ pinned all the way to the footer. Still position:fixed (robust under the\n      \/\/ theme's overflow ancestors), just with a scroll-tracked top.\n      var top = hb;\n      if(stopEl){\n        var stopTop = stopEl.getBoundingClientRect().top + window.pageYOffset;\n        var endStick = stopTop - hb - pillH;\n        if(window.pageYOffset > endStick){ top = stopTop - window.pageYOffset - pillH; }\n      }\n      wrap.style.top = top + 'px';\n      if(spacer) spacer.style.height = pillH + 'px';\n    } else {\n      wrap.classList.remove('is-fixed');\n      wrap.style.top = '';\n      if(spacer) spacer.style.height = '0px';\n    }\n  }\n\n  function navBottom(){\n    var r = (wrap||nav).getBoundingClientRect();\n    return r.bottom;\n  }\n\n  function moveInd(link){\n    if(!ind || !link) return;\n    ind.style.width = link.offsetWidth + 'px';\n    ind.style.transform = 'translateX(' + link.offsetLeft + 'px)';\n  }\n\n  var current = null;\n  function setActive(link){\n    if(link === current) return;\n    current = link;\n    links.forEach(function(a){ a.classList.toggle('active', a === link); });\n    moveInd(link);\n    \/\/ keep active pill in view on mobile (horizontal scroll)\n    if(nav.scrollWidth > nav.clientWidth){\n      var l = link.offsetLeft, r = l + link.offsetWidth;\n      if(l < nav.scrollLeft) nav.scrollLeft = l - 12;\n      else if(r > nav.scrollLeft + nav.clientWidth) nav.scrollLeft = r - nav.clientWidth + 12;\n    }\n  }\n\n  var locked = false, lockTimer = null;\n  function lockSpy(){\n    locked = true;\n    clearTimeout(lockTimer);\n    lockTimer = setTimeout(function(){ locked = false; }, 900);\n  }\n\n  \/\/ scroll-spy: deterministic scroll-position (fixes the \"stuck on previous section\" bug)\n  function updateSpy(){\n    if(locked) return;\n    var probe = window.pageYOffset + navBottom() + 16;\n    var idx = 0;\n    for(var i=0;i<sections.length;i++){\n      var s = sections[i];\n      if(s){ if((s.getBoundingClientRect().top + window.pageYOffset) <= probe) idx = i; }\n    }\n    \/\/ bottom-of-page guard: force the last section active when scrolled to the very end\n    var docH = document.documentElement.scrollHeight;\n    if(window.innerHeight + window.pageYOffset >= docH - 2) idx = sections.length - 1;\n    setActive(links[idx]);\n  }\n\n  \/\/ click: set highlight, smooth-scroll with offset, lock spy until the scroll settles\n  links.forEach(function(link){\n    link.addEventListener('click', function(e){\n      var target = document.querySelector(link.getAttribute('href'));\n      if(!target) return;\n      e.preventDefault();\n      setActive(link);\n      lockSpy();\n      var offset = navBottom() + 14;\n      var top = target.getBoundingClientRect().top + window.pageYOffset - offset;\n      window.scrollTo({ top: Math.max(0, top), behavior: RM ? 'auto' : 'smooth' });\n      if('scrollend' in window){\n        window.addEventListener('scrollend', function(){ locked = false; updateSpy(); }, { once:true });\n      }\n      if(history.replaceState) history.replaceState(null, '', link.getAttribute('href'));\n    });\n  });\n\n  var ticking = false;\n  function onScroll(){\n    applyOffset();\n    if(!ticking){ ticking = true; requestAnimationFrame(function(){ updateSpy(); ticking = false; }); }\n  }\n  function recalc(){ applyOffset(); if(current) moveInd(current); updateSpy(); }\n  applyOffset();\n  updateSpy();\n  window.addEventListener('resize', recalc);\n  window.addEventListener('load', recalc);\n  window.addEventListener('scroll', onScroll, { passive:true });\n  if(document.fonts){ if(document.fonts.ready){ document.fonts.ready.then(function(){ applyOffset(); if(current) moveInd(current); }); } }\n})();\n<\/script>\n\n<script>\/* did-inline-js *\/\n\/* ---------- AVATAR PICKER (interactive, video-ready) ---------- *\/\n(function(){\n  function init(){\n  var RM = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n  var rail = document.getElementById('apRail');\n  var img = document.getElementById('apImg');\n  var tag = document.getElementById('apTag');\n  var byoPanel = document.getElementById('apByoPanel');\n  var sound = document.getElementById('apSound');\n  var soundIcon = document.getElementById('apSoundIcon');\n  var stage = img ? img.parentNode : null;\n  if(!rail || !img || !stage) return;\n  var thumbs = Array.prototype.slice.call(rail.querySelectorAll('.ap-thumb'));\n  var iconMuted = '<path d=\"M4 9v6h4l5 4V5L8 9z\"><\/path><path d=\"M17 9l4 6M21 9l-4 6\"><\/path>';\n  var iconOn = '<path d=\"M4 9v6h4l5 4V5L8 9z\"><\/path><path d=\"M16 8.5a4 4 0 0 1 0 7M18.6 6a7 7 0 0 1 0 12\"><\/path>';\n  var wantSound = false;  \/\/ remembered across selections\n\n  function clearOn(){ thumbs.forEach(function(t){ t.classList.remove('is-on'); if(t.getAttribute('role')) t.setAttribute('aria-selected','false'); }); }\n  function dropVideo(){ var v = stage.querySelector('video'); if(v){ try{v.pause();}catch(e){} v.remove(); } }\n  function updateSoundUI(v){\n    if(!sound) return;\n    if(!v){ sound.hidden = true; return; }\n    sound.hidden = false;\n    var on = !v.muted;\n    sound.classList.toggle('on', on);\n    sound.setAttribute('aria-pressed', on ? 'true' : 'false');\n    sound.setAttribute('aria-label', on ? 'Avatar stummschalten' : 'Ton einschalten');\n    if(soundIcon) soundIcon.innerHTML = on ? iconOn : iconMuted;\n  }\n\n  function selectAvatar(btn){\n    clearOn();\n    btn.classList.add('is-on'); if(btn.getAttribute('role')) btn.setAttribute('aria-selected','true');\n    if(byoPanel) byoPanel.hidden = true;\n    img.style.display = '';\n    var name = btn.getAttribute('data-name'), src = btn.getAttribute('data-src'), vid = btn.getAttribute('data-video');\n    if(tag) tag.textContent = name;\n    dropVideo();\n    if(vid){\n      var v = document.createElement('video');\n      v.loop = true; v.playsInline = true; v.setAttribute('playsinline','');\n      v.muted = RM ? true : !wantSound; v.defaultMuted = v.muted;\n      v.preload = 'metadata'; v.poster = src || '';\n      v.setAttribute('aria-label', name + ' Presenter, Loop');\n      v.src = vid; img.style.display = 'none'; stage.appendChild(v);\n      if(!RM){ var pr = v.play(); if(pr){ if(pr.catch) pr.catch(function(){ v.muted = true; wantSound = false; updateSoundUI(v); var p2=v.play(); if(p2){ if(p2.catch) p2.catch(function(){}); } }); } }\n      updateSoundUI(RM ? null : v);\n    } else {\n      updateSoundUI(null);\n      if(RM){ img.style.opacity='1'; img.src=src; img.alt='Selected D-ID presenter, '+name; }\n      else { img.style.opacity='0'; var pre=new Image(); pre.onload=pre.onerror=function(){ img.src=src; img.alt='Selected D-ID presenter, '+name; img.style.opacity='1'; }; pre.src=src; }\n    }\n  }\n\n  function selectByo(btn){\n    clearOn(); btn.classList.add('is-on');\n    dropVideo(); updateSoundUI(null);\n    img.style.display='none';\n    if(byoPanel) byoPanel.hidden=false;\n    if(tag) tag.textContent='Deine Marke';\n  }\n\n  if(sound){\n    sound.addEventListener('click', function(){\n      var v = stage.querySelector('video'); if(!v) return;\n      v.muted = !v.muted; wantSound = !v.muted;\n      if(!v.muted){ var pr=v.play(); if(pr){ if(pr.catch) pr.catch(function(){}); } }\n      updateSoundUI(v);\n    });\n  }\n\n  thumbs.forEach(function(btn){\n    btn.addEventListener('click', function(){ if(btn.getAttribute('data-byo')) selectByo(btn); else selectAvatar(btn); });\n    btn.addEventListener('keydown', function(e){\n      var idx = thumbs.indexOf(btn), n = thumbs.length;\n      if(e.key==='ArrowRight'||e.key==='ArrowDown'){ e.preventDefault(); thumbs[(idx+1)%n].focus(); }\n      else if(e.key==='ArrowLeft'||e.key==='ArrowUp'){ e.preventDefault(); thumbs[(idx-1+n)%n].focus(); }\n    });\n  });\n\n  \/\/ play the default (initially selected) avatar on load\n  var initial = rail.querySelector('.ap-thumb.is-on') || thumbs[0];\n  if(initial){ if(!initial.getAttribute('data-byo')) selectAvatar(initial); }\n  }\n  if(document.readyState==='loading') document.addEventListener('DOMContentLoaded', init); else init();\n})();\n<\/script>\n\n<script>\/* did-inline-js *\/\n\/* ---------- HERO live-avatar video (pause + reduced-motion) ---------- *\/\n(function(){\n  var RM = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n  var v = document.getElementById('heroVid');\n  var wave = document.getElementById('heroWave');\n  var btn = document.getElementById('heroPause');\n  var icon = document.getElementById('heroPauseIcon');\n  if(wave){ for(var i=0;i<12;i++){ var b=document.createElement('i'); b.style.animationDelay=(i*0.08)+'s'; b.style.animationDuration=(0.8+(i%3)*0.25)+'s'; wave.appendChild(b); } }\n  if(!v) return;\n  var iconPause='<rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"><\/rect><rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"><\/rect>';\n  var iconPlay='<path d=\"M7 5l12 7-12 7z\"><\/path>';\n  function setUI(playing){\n    if(btn){ btn.setAttribute('aria-label', playing ? 'Avatar-Video pausieren' : 'Avatar-Video abspielen'); if(icon) icon.innerHTML = playing ? iconPause : iconPlay; }\n  }\n  var userPaused = false;\n  if(RM){ v.removeAttribute('autoplay'); try{ v.pause(); }catch(e){} userPaused = true; setUI(false); }\n  else { var _p = v.play(); if(_p){ if(_p.catch) _p.catch(function(){}); } }\n  if(btn){ btn.addEventListener('click', function(){\n    if(v.paused){ userPaused=false; var p=v.play(); if(p){ if(p.catch)p.catch(function(){}); } }\n    else { userPaused=true; v.pause(); }\n  }); }\n  v.addEventListener('play', function(){ setUI(true); });\n  v.addEventListener('pause', function(){ setUI(false); });\n  document.addEventListener('visibilitychange', function(){\n    if(document.hidden){ try{v.pause();}catch(e){} }\n    else if(!userPaused){ var p=v.play(); if(p){ if(p.catch)p.catch(function(){}); } }\n  });\n})();\n<\/script>\n\n<script>\/* did-inline-js *\/\n\/* ---------- PRICING 3D cursor tilt ---------- *\/\n(function(){\n  var RM = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n  var coarse = window.matchMedia ? window.matchMedia('(pointer: coarse)').matches : false;\n  var card = document.getElementById('priceCard');\n  if(!card || RM || coarse) return;\n  var scene = card.closest('.price-scene') || card;\n  var ticking=false, ev=null;\n  scene.addEventListener('pointermove', function(e){\n    ev=e;\n    if(ticking) return; ticking=true;\n    requestAnimationFrame(function(){\n      var r=card.getBoundingClientRect();\n      var mx=(ev.clientX-r.left)\/r.width, my=(ev.clientY-r.top)\/r.height;\n      card.classList.add('tilting');\n      card.style.transform='rotateX('+((0.5-my)*8).toFixed(2)+'deg) rotateY('+((mx-0.5)*10).toFixed(2)+'deg)';\n      card.style.setProperty('--gx',(mx*100).toFixed(1)+'%');\n      card.style.setProperty('--gy',(my*100).toFixed(1)+'%');\n      ticking=false;\n    });\n  });\n  scene.addEventListener('pointerleave', function(){ card.classList.remove('tilting'); card.style.transform=''; });\n})();\n<\/script>\n\n<script>\/* did-inline-js *\/\n\/* ---------- CURSOR-GLOW on dark sections + magnetic buttons ---------- *\/\n(function(){\n  var RM = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n  var coarse = window.matchMedia ? window.matchMedia('(pointer: coarse)').matches : false;\n  if(RM || coarse) return;\n  var root = document.querySelector('.did-sh');\n  if(!root) return;\n\n  \/\/ cursor-follow spotlight\n  Array.prototype.forEach.call(root.querySelectorAll('.glow-dark'), function(sec){\n    var ticking = false, lx = 0, ly = 0;\n    sec.addEventListener('pointerenter', function(){ sec.classList.add('glow-on'); });\n    sec.addEventListener('pointerleave', function(){ sec.classList.remove('glow-on'); });\n    sec.addEventListener('pointermove', function(e){\n      var r = sec.getBoundingClientRect();\n      lx = e.clientX - r.left; ly = e.clientY - r.top;\n      if(!ticking){ ticking = true; requestAnimationFrame(function(){\n        sec.style.setProperty('--mx', lx + 'px');\n        sec.style.setProperty('--my', ly + 'px');\n        ticking = false;\n      }); }\n    });\n  });\n\n  \/\/ subtle magnetic pull on primary buttons\n  Array.prototype.forEach.call(root.querySelectorAll('.btn-primary'), function(b){\n    b.addEventListener('pointermove', function(e){\n      var r = b.getBoundingClientRect();\n      var mx = (e.clientX - r.left - r.width\/2) \/ r.width;\n      var my = (e.clientY - r.top - r.height\/2) \/ r.height;\n      b.style.transform = 'translate(' + (mx*6).toFixed(1) + 'px,' + (my*6 - 2).toFixed(1) + 'px)';\n    });\n    b.addEventListener('pointerleave', function(){ b.style.transform = ''; });\n  });\n})();\n<\/script>\n\n<script>\/* did-inline-js *\/\n\/* ---------- BOOK-A-DEMO MODAL (HubSpot form popup) ---------- *\/\n(function(){\n  function init(){\n    var root = document.querySelector('.did-sh');\n    var modal = document.getElementById('demoModal');\n    var mount = document.getElementById('demoFormMount');\n    if(!root){ return; }\n    if(!modal){ return; }\n    if(!mount){ return; }\n    var panel = modal.querySelector('.did-modal__panel');\n    var lastFocus = null;\n    var formLoaded = false;\n    var savedY = 0;\n    \/\/ The live WordPress theme hijacks hash-link clicks with a CAPTURE-phase smooth\n    \/\/ scroll that fires before our click handler, so by click time the page has\n    \/\/ already jumped toward #demo. pointerdown\/mousedown\/touchstart\/keydown all fire\n    \/\/ BEFORE that click-scroll, so we snapshot the true position there and pin to it.\n    var pendingY = null;\n    function capturePos(){ pendingY = window.pageYOffset || document.documentElement.scrollTop || 0; }\n\n    var triggers = Array.prototype.slice.call(root.querySelectorAll('a[href=\"#demo\"], a[href*=\"contact-us\"]'));\n\n    function createForm(){\n      \/\/ Render via the site-native HubSpot v4 embed (same as \/contact-us\/ and \/de\/kontakt\/):\n      \/\/ inject an .hs-form-frame div and let the per-portal embed script render it. We do NOT\n      \/\/ load forms\/v2.js here - the WordPress site already loads its own HubSpot form scripts,\n      \/\/ and a second framework double-inits the same form and neuters the submit postMessage\n      \/\/ port (DataCloneError: 'port already neutered'), so the form silently fails to send.\n      mount.innerHTML = '';\n      var frame = document.createElement('div');\n      frame.className = 'hs-form-frame';\n      frame.setAttribute('data-region', 'eu1');\n      frame.setAttribute('data-portal-id', '25480953');\n      frame.setAttribute('data-form-id', '31d140c7-2898-4ea6-98e9-c397380f00cd');\n      mount.appendChild(frame);\n    }\n\n    function loadForm(){\n      if(formLoaded){ return; }\n      formLoaded = true;\n      createForm();\n      \/\/ The per-portal embed script auto-renders any .hs-form-frame (via MutationObserver).\n      \/\/ The site usually loads it already; add it defensively if it is not present yet.\n      if(!document.querySelector('script[src*=\"\/forms\/embed\/25480953\"]')){\n        var s = document.createElement('script');\n        s.src = 'https:\/\/js-eu1.hsforms.net\/forms\/embed\/25480953.js';\n        s.defer = true;\n        s.onerror = function(){\n          formLoaded = false;\n          mount.innerHTML = '<p class=\"did-modal__loading\">Formular konnte nicht geladen werden. Bitte versuche es erneut oder schreib uns eine E-Mail.<\/p>';\n        };\n        document.head.appendChild(s);\n      }\n    }\n\n    function focusables(){\n      var list = Array.prototype.slice.call(panel.querySelectorAll('button, [href], input, select, textarea, iframe, [tabindex]:not([tabindex=\"-1\"])'));\n      return list.filter(function(el){\n        if(el.disabled){ return false; }\n        if(el.offsetParent === null){ return false; }\n        return true;\n      });\n    }\n\n    function focusNoScroll(el){\n      if(!el){ return; }\n      if(!el.focus){ return; }\n      try{ el.focus({ preventScroll: true }); }catch(err){ el.focus(); }\n    }\n\n    function openModal(trigger){\n      lastFocus = trigger || document.activeElement;\n      \/\/ Pin the page in place. overflow:hidden alone stops wheel scrolling but NOT\n      \/\/ programmatic scroll (a theme's hash smooth-scroll or the HubSpot iframe's\n      \/\/ autofocus), so we fix the body at its current offset and restore on close.\n      if(pendingY !== null){ savedY = pendingY; } else { savedY = window.pageYOffset || document.documentElement.scrollTop || 0; }\n      pendingY = null;\n      modal.hidden = false;\n      document.documentElement.classList.add('did-modal-open');\n      document.body.classList.add('did-modal-open');\n      document.body.style.top = (-savedY) + 'px';\n      loadForm();\n      focusNoScroll(modal.querySelector('.did-modal__close'));\n    }\n\n    function closeModal(){\n      modal.hidden = true;\n      document.documentElement.classList.remove('did-modal-open');\n      document.body.classList.remove('did-modal-open');\n      document.body.style.top = '';\n      \/\/ Unpinning drops the window to scroll 0, so we must restore to savedY - but the\n      \/\/ theme sets html{scroll-behavior:smooth}, which would visibly animate that restore\n      \/\/ from the top down to the CTA. Force it instant by overriding scroll-behavior for\n      \/\/ the one jump (belt-and-suspenders with behavior:'instant').\n      var docEl = document.documentElement;\n      var prevBehavior = docEl.style.scrollBehavior;\n      docEl.style.scrollBehavior = 'auto';\n      try{ window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); }catch(err){ window.scrollTo(0, savedY); }\n      docEl.style.scrollBehavior = prevBehavior;\n      focusNoScroll(lastFocus);\n    }\n\n    triggers.forEach(function(a){\n      a.addEventListener('pointerdown', capturePos, true);\n      a.addEventListener('mousedown', capturePos, true);\n      a.addEventListener('touchstart', capturePos, true);\n      a.addEventListener('keydown', function(e){\n        if(e.key === 'Enter'){ capturePos(); return; }\n        if(e.key === ' '){ capturePos(); return; }\n        if(e.key === 'Spacebar'){ capturePos(); }\n      }, true);\n      a.addEventListener('click', function(e){\n        e.preventDefault();\n        e.stopPropagation();\n        openModal(a);\n      });\n    });\n\n    modal.addEventListener('click', function(e){\n      var t = e.target;\n      if(t.closest){ if(t.closest('[data-close]')){ closeModal(); } }\n    });\n\n    document.addEventListener('keydown', function(e){\n      if(modal.hidden){ return; }\n      if(e.key === 'Escape'){ closeModal(); return; }\n      if(e.key === 'Tab'){\n        var f = focusables();\n        if(!f.length){ return; }\n        var first = f[0], last = f[f.length - 1];\n        if(e.shiftKey){\n          if(document.activeElement === first){ e.preventDefault(); last.focus(); }\n        } else {\n          if(document.activeElement === last){ e.preventDefault(); first.focus(); }\n        }\n      }\n    });\n  }\n  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); } else { init(); }\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>D-ID Expressive Avatars &middot; Self-Hosted Hoste D-IDs Expressive Avatars in deiner eigenen Cloud Stelle konversationelle Echtzeit-Avatare vollst\u00e4ndig in deiner eigenen Infrastruktur bereit. Deine Daten verlassen zu keinem Zeitpunkt dein Netzwerk. Das Avatar-Modell von D-ID rendert dabei in weniger als 200 Millisekunden. Demo buchen So funktioniert\u2019s Dein Stack, deine Wahl. Nutze deine eigenen Avatare, Stimmen und&#8230;<\/p>\n","protected":false},"author":88,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-14864","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.1 (Yoast SEO v28.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>D-ID Avatare selbst hosten: Echtzeit-KI in deiner Cloud<\/title>\n<meta name=\"description\" content=\"Hoste D-IDs KI-Avatare in deiner eigenen Cloud \u2013 mit Echtzeit-Performance, voller Datenkontrolle, flexiblen KI-Anbietern und Enterprise-Sicherheit.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Self Host\" \/>\n<meta property=\"og:description\" content=\"Hoste D-IDs KI-Avatare in deiner eigenen Cloud \u2013 mit Echtzeit-Performance, voller Datenkontrolle, flexiblen KI-Anbietern und Enterprise-Sicherheit.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/\" \/>\n<meta property=\"og:site_name\" content=\"D-ID\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/deidentification\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-28T13:07:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de-poster.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@D_ID_\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/self-hosting-realtime-avatare\\\/\",\"url\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/self-hosting-realtime-avatare\\\/\",\"name\":\"D-ID Avatare selbst hosten: Echtzeit-KI in deiner Cloud\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/self-hosting-realtime-avatare\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/self-hosting-realtime-avatare\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.d-id.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/avatar-mia-de-poster.jpg\",\"datePublished\":\"2026-07-23T11:32:19+00:00\",\"dateModified\":\"2026-07-28T13:07:30+00:00\",\"description\":\"Hoste D-IDs KI-Avatare in deiner eigenen Cloud \u2013 mit Echtzeit-Performance, voller Datenkontrolle, flexiblen KI-Anbietern und Enterprise-Sicherheit.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/self-hosting-realtime-avatare\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.d-id.com\\\/de\\\/self-hosting-realtime-avatare\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/self-hosting-realtime-avatare\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.d-id.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/avatar-mia-de-poster.jpg\",\"contentUrl\":\"https:\\\/\\\/www.d-id.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/avatar-mia-de-poster.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/self-hosting-realtime-avatare\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Self Host\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/\",\"name\":\"D-ID\",\"description\":\"Create AI Videos, Interactive Avatars to engage your audience. Custom AI-powered digital people at scale for businesses and creators.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/#organization\"},\"alternateName\":\"Interfaces, Evolved.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/#organization\",\"name\":\"D-ID\",\"url\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.d-id.com\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/d-id-logo-1.svg\",\"contentUrl\":\"https:\\\/\\\/www.d-id.com\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/d-id-logo-1.svg\",\"width\":66,\"height\":53,\"caption\":\"D-ID\"},\"image\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/deidentification\\\/\",\"https:\\\/\\\/x.com\\\/D_ID_\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"D-ID Avatare selbst hosten: Echtzeit-KI in deiner Cloud","description":"Hoste D-IDs KI-Avatare in deiner eigenen Cloud \u2013 mit Echtzeit-Performance, voller Datenkontrolle, flexiblen KI-Anbietern und Enterprise-Sicherheit.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/","og_locale":"de_DE","og_type":"article","og_title":"Self Host","og_description":"Hoste D-IDs KI-Avatare in deiner eigenen Cloud \u2013 mit Echtzeit-Performance, voller Datenkontrolle, flexiblen KI-Anbietern und Enterprise-Sicherheit.","og_url":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/","og_site_name":"D-ID","article_publisher":"https:\/\/www.facebook.com\/deidentification\/","article_modified_time":"2026-07-28T13:07:30+00:00","og_image":[{"url":"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de-poster.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@D_ID_","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/","url":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/","name":"D-ID Avatare selbst hosten: Echtzeit-KI in deiner Cloud","isPartOf":{"@id":"https:\/\/www.d-id.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/#primaryimage"},"image":{"@id":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/#primaryimage"},"thumbnailUrl":"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de-poster.jpg","datePublished":"2026-07-23T11:32:19+00:00","dateModified":"2026-07-28T13:07:30+00:00","description":"Hoste D-IDs KI-Avatare in deiner eigenen Cloud \u2013 mit Echtzeit-Performance, voller Datenkontrolle, flexiblen KI-Anbietern und Enterprise-Sicherheit.","breadcrumb":{"@id":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/#primaryimage","url":"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de-poster.jpg","contentUrl":"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/avatar-mia-de-poster.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.d-id.com\/de\/self-hosting-realtime-avatare\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.d-id.com\/de\/"},{"@type":"ListItem","position":2,"name":"Self Host"}]},{"@type":"WebSite","@id":"https:\/\/www.d-id.com\/de\/#website","url":"https:\/\/www.d-id.com\/de\/","name":"D-ID","description":"Create AI Videos, Interactive Avatars to engage your audience. Custom AI-powered digital people at scale for businesses and creators.","publisher":{"@id":"https:\/\/www.d-id.com\/de\/#organization"},"alternateName":"Interfaces, Evolved.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.d-id.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.d-id.com\/de\/#organization","name":"D-ID","url":"https:\/\/www.d-id.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.d-id.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.d-id.com\/wp-content\/uploads\/2023\/11\/d-id-logo-1.svg","contentUrl":"https:\/\/www.d-id.com\/wp-content\/uploads\/2023\/11\/d-id-logo-1.svg","width":66,"height":53,"caption":"D-ID"},"image":{"@id":"https:\/\/www.d-id.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/deidentification\/","https:\/\/x.com\/D_ID_"]}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"abhigyan","author_link":"https:\/\/www.d-id.com\/de\/author\/abhigyan\/"},"uagb_comment_info":0,"uagb_excerpt":"D-ID Expressive Avatars &middot; Self-Hosted Hoste D-IDs Expressive Avatars in deiner eigenen Cloud Stelle konversationelle Echtzeit-Avatare vollst\u00e4ndig in deiner eigenen Infrastruktur bereit. Deine Daten verlassen zu keinem Zeitpunkt dein Netzwerk. Das Avatar-Modell von D-ID rendert dabei in weniger als 200 Millisekunden. Demo buchen So funktioniert\u2019s Dein Stack, deine Wahl. Nutze deine eigenen Avatare, Stimmen und...","_links":{"self":[{"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/pages\/14864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/users\/88"}],"replies":[{"embeddable":true,"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/comments?post=14864"}],"version-history":[{"count":16,"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/pages\/14864\/revisions"}],"predecessor-version":[{"id":14906,"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/pages\/14864\/revisions\/14906"}],"wp:attachment":[{"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/media?parent=14864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}