{"id":14627,"date":"2026-08-21T18:39:23","date_gmt":"2026-08-21T18:39:23","guid":{"rendered":"https:\/\/www.d-id.com\/?page_id=14627"},"modified":"2026-08-21T18:39:31","modified_gmt":"2026-08-21T18:39:31","slug":"ki-video-generator","status":"publish","type":"page","link":"https:\/\/www.d-id.com\/de\/ki-video-generator\/","title":{"rendered":"KI Video Generator"},"content":{"rendered":"\n\n<style>\n\/* ==================== BLOCK 0 - BASE STYLES ==================== *\/\n.did-kvg{\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  --maxw:1180px;\n\n  \/* ---- The four scales ----\n     Added 2026-08-05. Before this the page ran on 24 distinct vertical gaps, 13 radii,\n     21 font sizes and 17 one-off shadows: every component had been tuned in isolation,\n     which is what makes a page read as accumulated rather than composed. Everything now\n     resolves to one of these. When a component wants a value that is not here, the\n     question is which step it belongs to, not what number looks right. *\/\n\n  \/* Spacing. *\/\n  --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:24px;\n  --sp-5:36px; --sp-6:56px; --sp-7:80px; --sp-8:104px;\n\n  \/* The semantic layer, and the actual fix for the grouping failure. Call sites use\n     these, not the raw steps, because the NAME is the rule.\n     THE LAW: the interval BEFORE a heading is strictly larger than the interval AFTER\n     it, and both are larger than the interval between the items it introduces. The\n     ladder only ever descends inward. The section this page was judged on read\n     88 \/ 18 \/ 56 \/ 56, which descends nowhere and is why nothing grouped. *\/\n  --gap-micro:var(--sp-2);   \/* 10 - label to value, paragraph to paragraph *\/\n  --gap-item:var(--sp-3);    \/* 16 - item to item inside one group *\/\n  --gap-group:var(--sp-4);   \/* 24 - group to sibling group; every grid gap *\/\n  --gap-lede:var(--sp-5);    \/* 36 - a heading block down to its content *\/\n  --gap-cta:var(--sp-6);     \/* 56 - content down to the CTA that closes it *\/\n  --sp-section:clamp(52px,7vw,92px);   \/* every content section, top and bottom *\/\n  --sp-band:clamp(30px,3.4vw,44px);    \/* the slim proof bands only *\/\n  --gap-col:clamp(28px,3.6vw,54px);    \/* two-column gutters *\/\n  --pad-card:var(--sp-5);              \/* 36 - light bento cards *\/\n  --pad-tile:var(--sp-4);              \/* 24 - dark tiles and panels *\/\n  \/* The use-case shell. These two exist as tokens because the folded-surface read\n     depends on FOUR places holding the same value: the live row, its ::after, the\n     stage, and the hardened copy. As literals that identity was maintained by hand\n     and one careless edit broke it silently, on the most visible pixel in the\n     component. --uc-live must stay LIGHTER than --uc-rail or the fold inverts. *\/\n  --uc-rail:#1A1725; --uc-live:#2B2639;\n\n  \/* Radius. Four steps. Anything measured (the 4px marker, 1px rules) stays literal. *\/\n  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;\n\n  \/* Type. Nine roles, against the twenty-one sizes this replaces. Hierarchy comes from\n     weight against size, not from half-pixel steps. *\/\n  --t-h1:clamp(33px,3.5vw,46px);   \/* 46 is measured: the max at which the headline\n                                      holds two lines in its 617px column *\/\n  --t-h2:clamp(28px,3.6vw,40px);\n  --t-h2-sm:clamp(22px,2.6vw,28px);   \/* a heading that leads a panel, not a section *\/\n  --t-h3:19px; --t-lead:17px; --t-body:15px; --t-small:13.5px;\n  --t-micro:12px;                     \/* eyebrows, runtimes, chips *\/\n  --t-label:11px;                     \/* uppercase tracked micro-labels *\/\n\n  \/* Elevation. Three steps per ground. Dark grounds get black-based shadows plus a lit\n     top edge, because a navy drop shadow on near-black is invisible and the card reads\n     as a hole rather than an object. *\/\n  --e-1:0 1px 2px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.06);\n  --e-2:0 1px 2px rgba(16,24,40,.04),0 14px 34px rgba(16,24,40,.09);\n  --e-3:0 1px 2px rgba(16,24,40,.04),0 24px 56px rgba(16,24,40,.14);\n  \/* Drop-only, so they compose with --e-lit rather than restating it. *\/\n  --e-lit:inset 0 1px 0 rgba(255,255,255,.09);\n  --e-d1:0 8px 22px rgba(0,0,0,.35);\n  --e-d2:0 18px 44px rgba(0,0,0,.45);\n  --e-d3:0 30px 72px rgba(0,0,0,.55);\n\n  --ease:cubic-bezier(.16,1,.3,1);\n  --ease-out:cubic-bezier(.23,1,.32,1);     \/* entering and exiting *\/\n  --ease-in-out:cubic-bezier(.77,0,.175,1); \/* moving while on screen *\/\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-kvg *{box-sizing:border-box;margin:0;padding:0}\n.did-kvg a{text-decoration:none;color:inherit}\n.did-kvg img,.did-kvg svg,.did-kvg video{display:block;max-width:100%}\n.did-kvg .kvg-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n\/* LOAD-BEARING, and it does not look it. --maxw:1180, this 24px gutter and the\n   .hero-grid gap jointly produce a 617px hero copy column, which is the measured\n   minimum for a two-line headline. Widening any one of them puts the H1 on three\n   lines. If one has to change, --maxw goes to at least 1220px to compensate. *\/\n.did-kvg .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}\n.did-kvg h1,.did-kvg h2,.did-kvg h3{font-family:'Manrope',sans-serif;line-height:1.1;letter-spacing:-.03em;font-weight:600}\n.did-kvg h3{letter-spacing:-.02em}\n.did-kvg h2{font-size:var(--t-h2);font-weight:600;text-wrap:balance}\n.did-kvg .eyebrow{display:inline-block;font-size:var(--t-micro);line-height:1.5;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--orange-ink);margin-bottom:var(--gap-item);font-family:'Manrope',sans-serif}\n.did-kvg .accent-rust{color:var(--orange-ink)}\n\n\/* focus-visible. --orange is 8:1 on the dark bands but only 2.3:1 on the light ones,\n   which fails the 3:1 non-text minimum for a focus indicator, so the ring is tokenised:\n   --orange-ink on light, --orange on dark. Both clear 3:1 on their own ground. *\/\n.did-kvg{--focus:var(--orange-ink)}\n.did-kvg .hero,.did-kvg .vprops,.did-kvg .agentic,.did-kvg .uc,.did-kvg .trust,.did-kvg .final{--focus:var(--orange)}\n.did-kvg a:focus-visible,\n.did-kvg button:focus-visible,\n\/* No border-radius here. The outline already follows each element's own shape, and\n   forcing one squared off the ring on every pill and on the circular pause button. *\/\n.did-kvg summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}\n.did-kvg .btn:focus-visible{outline-offset:4px}\n\n\/* BUTTONS *\/\n.did-kvg .btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:16px 30px;border-radius:var(--r-sm) !important;font-weight:700;font-size:var(--t-small);font-family:'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.6px;line-height:1.5;cursor:pointer;border:none;overflow:hidden;transition:box-shadow .28s var(--ease),background .2s ease,transform .16s var(--ease)}\n.did-kvg .btn-primary{background:var(--orange);color:#161616}\n\/* Sheen sweep is the ONE motion on the primary CTA. *\/\n.did-kvg .btn-primary::after{content:\"\";position:absolute;z-index:-1;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-kvg .btn-primary:hover{background:var(--orange-hover);color:#161616}\n.did-kvg .btn-primary:hover::after{left:130%}\n.did-kvg .btn-primary:active{background:var(--orange-deep);transform:scale(.97)}\n.did-kvg .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}\n.did-kvg .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}\n\n\/* SCROLL REVEAL *\/\n\/* Gated behind the JS-added .js class so a dead script leaves the whole page visible;\n   without the gate every [data-reveal] element stays at opacity 0. *\/\n.did-kvg.js [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-kvg [data-reveal].in{opacity:1;transform:none}\n\/* opts an element into the observer's .in class WITHOUT the fade-and-rise. Used by the\n   trust field, which needs a reveal trigger of its own but must not move. *\/\n\n\/* sections *\/\n.did-kvg section.block{padding:var(--sp-section) 0}\n\/* A hash from another page, a Find-in-page jump or a restored scroll position all\n   bypass the JS click offset and would land the section under the fixed pill. *\/\n.did-kvg section[id]{scroll-margin-top:140px}\n.did-kvg .center{text-align:center;max-width:760px;margin:0 auto var(--gap-lede)}\n.did-kvg .center p{color:var(--muted);font-size:var(--t-lead);font-weight:400}\n\/* A heading and its lede are ONE object: micro inside, then --gap-lede to the content. *\/\n.did-kvg .center h2+p{margin-top:var(--gap-item)}\n.did-kvg .center p+p{margin-top:var(--gap-micro)}\n.did-kvg .ic{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:var(--gap-item);background:rgba(255,136,46,.16);color:var(--orange);transition:transform .3s var(--ease),background .3s ease}\n.did-kvg .ic svg{width:24px;height:24px}\n\/* The chip crosses three grounds on this page. On the two dark ones bright orange is\n   fine; on the white why-bento cards #FF882E composites to about 2.2:1 against the\n   pale chip, under the 3:1 non-text bar, so the light ground uses --orange-ink. *\/\n.did-kvg .card .ic{background:rgba(255,136,46,.14);color:var(--orange-ink)}\n\n\/* ==================== SHARED VIDEO TILE ==================== *\/\n\/* Square media tile for the square avatar sources: object-fit cover, poster set,\n   preload none (below the fold), play-on-scroll via JS, pause control.\n   .kvg-pause belongs to the AMBIENT loops only (hero and Agentic). The four narrated\n   demo videos use native <video controls> and carry no custom chrome. *\/\n.did-kvg .kvg-tile{position:relative;aspect-ratio:1\/1;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);box-shadow:var(--e-d2);border:1px solid rgba(255,255,255,.1);width:100%}\n.did-kvg .kvg-tile video{width:100%;height:100%;object-fit:cover}\n.did-kvg .kvg-tag{position:absolute;top:14px;right:14px;z-index:3;max-width:calc(100% - 108px);background:rgba(11,11,15,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:var(--sp-1) var(--gap-micro);border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18);font-family:'Manrope',sans-serif;text-align:right}\n.did-kvg .kvg-pause{position:absolute;left:14px;bottom:14px;z-index:4;width:38px;height:38px;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\/* !important for the same reason as .uc-btn:active: the hardening rule sets this\n   button's background !important, so the hover wash never fired. *\/\n\n.did-kvg .kvg-pause svg{width:15px;height:15px}\n\n\/* ==================== BLOCK 1 - HERO ==================== *\/\n\/* Split: the claim on the left, the product proving itself on the right.\n   Rebuilt 2026-08-05. The centred stack it replaces ran G2 pill, H1, two paragraphs,\n   CTA, logo marquee, compliance chips and only then the product, which put roughly\n   700px of text in front of the one thing that actually sells an AI video generator:\n   seeing a presenter who is not real. Three of them now play at once, beside the\n   headline, above the fold. The logo wall and the compliance marks moved out of the\n   hero entirely; three consecutive \"trust me\" strips before any evidence read as\n   nerves, and they belong where a buyer goes looking for them. *\/\n\/* ONE ground for the hero and the trusted-by band, which are now two divs inside a\n   single .stage section rather than two sibling sections.\n   The seam this replaces was not a colour step: both bands were #090604 and the hero's\n   own radial glow simply terminated at its overflow:hidden box, so the gradient's edge\n   WAS the seam. A single oversized radial on the parent cannot terminate anywhere.\n   Shape follows the 21st.dev snippet the stakeholder sent\n   (radial-gradient(125% 125% at 50% 10%, #000 40%, accent 100%)), with the accent\n   translated to D-ID: #3F230D is --orange composited onto --ink at .22, which keeps the\n   ramp inside brand rather than introducing a new hue. Verified: white 14.4:1 and muted\n   body 8.2:1 over its brightest point. *\/\n.did-kvg .stage{position:relative;isolation:isolate;color:#fff;\n  background:radial-gradient(125% 125% at 50% 10%,#090604 42%,#3F230D 100%)}\n\/* A second, slow ellipse keeps the breathing the old hero had, without the clip that\n   caused the seam: it is on the shared parent, so it has nothing to terminate against. *\/\n.did-kvg .stage::before{content:\"\";position:absolute;inset:0;z-index:0;pointer-events:none;\n  background:radial-gradient(70% 46% at 50% 6%,rgba(255,136,46,.16),transparent 64%);\n  animation:kvgHeroGlow 14s ease-in-out infinite alternate}\n@keyframes kvgHeroGlow{from{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.05)}}\n.did-kvg .hero{position:relative;z-index:1;padding:var(--sp-7) 0 var(--sp-7)}\n\/* 1.14\/.86 is not a taste call: it is the narrowest copy column at which the headline\n   holds two lines at 1440. It is verbatim client copy and has to carry the keyphrase,\n   so it cannot be shortened; the column gives way instead. *\/\n\/* Every fr track is minmax(0,fr), never bare. A bare 1fr's implicit minimum is\n   min-content, so one long word in one card silently holds a whole grid open past its\n   container: German's longer compounds did exactly that to the why-grid at 390 while\n   English, with the same sheet, happened to fit. Systemic, 2026-08-10. *\/\n.did-kvg .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(30px,3.4vw,50px);align-items:center}\n.did-kvg .hero h1{font-size:var(--t-h1);margin:0 0 var(--gap-item);font-weight:600;text-wrap:balance}\n.did-kvg .hero h1 .accent{color:var(--orange)}\n.did-kvg .hero p.lead{font-size:var(--t-lead);color:var(--muted-light);max-width:545px;margin:0 0 var(--gap-micro);font-weight:400}\n.did-kvg .hero p.lead b{color:#fff;font-weight:500}\n\/* --sp-5, not --gap-cta: this CTA closes a copy block, not a whole section. *\/\n.did-kvg .hero-cta{display:flex;gap:var(--gap-item);flex-wrap:wrap;margin-top:var(--sp-5)}\n.did-kvg .hero .anim{opacity:0;transform:translateY(22px);animation:kvgRise .9s var(--ease) forwards}\n\/* 65ms between steps, inside the 30-80ms band. Three copy steps now that the G2 pill\n   has moved to its own ribbon, then the presenter cards pick the beat up at .30s. *\/\n.did-kvg .hero .anim.d1{animation-delay:.05s}\n.did-kvg .hero .anim.d2{animation-delay:.115s}\n.did-kvg .hero .anim.d3{animation-delay:.18s}\n@keyframes kvgRise{to{opacity:1;transform:none}}\n\n\n\/* ---- BLOCK 1b: the trusted-by band ----\n   Its own strip between the hero and the value props, on the same near-black as the\n   hero so it reads as the hero settling rather than a new section starting. *\/\n.did-kvg .proofband{position:relative;z-index:1;padding:0 0 var(--sp-6)}\n.did-kvg .hero-proof{margin:0}\n\/* Theme hardening. A blanket `a{color:#000}` or `span{color:#000}` rule from the theme\n   or a plugin would black out this text on the dark hero and strip the pill shapes.\n   Verified under hostile-CSS injection; keep the !important flags. *\/\n\n\n\/* Compliance chips. Only certifications D-ID actually holds. *\/\n\n\/* The presenter wall: three AI presenters, all live, all eager. The two supporting\n   cards take their height from the lead card's 4:5 box rather than declaring one, so\n   the column can never disagree with itself: rows are (lead height - gap) \/ 2, which\n   lands them at almost exactly square, and object-fit does the rest. Nothing here can\n   over- or under-spill at any width.\n   All three files are small on purpose (407 + 114 + 79 KB): they are decorative loops\n   shown at ~340px, so they are encoded at 624px wide and stripped of their audio\n   tracks outright. Muted is a promise the markup makes; no audio stream is a promise\n   the file keeps. *\/\n.did-kvg .pwall{display:grid;grid-template-columns:minmax(0,1.66fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:var(--gap-item)}\n.did-kvg .pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0b0b0f;border:1px solid rgba(255,255,255,.12);\n  opacity:0;transform:translateY(26px) scale(.975);animation:kvgRise .9s var(--ease-out) forwards}\n\/* A 1px inner highlight along the top edge. On near-black these cards would otherwise\n   have no lit edge at all and read as holes rather than objects. *\/\n.did-kvg .pcard::after{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--e-lit)}\n\/* Absolute, so the video's intrinsic size never contributes height. Left in flow it\n   sizes its own card, the two supporting cards end up taller than the lead's box, and\n   the lead under-spills its two-row span by ~94px. *\/\n.did-kvg .pcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}\n\/* The pair declares the ratio and the lead fills whatever that adds up to, rather than\n   both declaring one and disagreeing. Two rows of 4:5 plus the gap is the lead's\n   height by construction, so there is no dead space at any width, and the ratios are\n   CSS rather than intrinsic to the files, so nothing shifts while the video loads. *\/\n.did-kvg .pcard--lead{grid-row:1 \/ span 2;height:100%;box-shadow:var(--e-d3);animation-delay:.30s}\n.did-kvg .pcard--a,.did-kvg .pcard--b{aspect-ratio:4\/5;box-shadow:var(--e-d2)}\n.did-kvg .pcard--a{animation-delay:.37s}\n.did-kvg .pcard--b{animation-delay:.44s}\n.did-kvg .hero-badge{position:absolute;top:14px;right:14px;z-index:3;background:var(--orange);color:#161616;font-size:var(--t-label);font-weight:700;padding:var(--sp-1) var(--gap-micro);border-radius:var(--r-pill);font-family:'Manrope',sans-serif}\n\n\/* ==================== BLOCK 2 - VALUE PROPS + LOGOS ==================== *\/\n\/* Hairline restored: the stage above ends on a warm dark and this starts on a cool one,\n   so the two need a stated edge rather than an accidental step. *\/\n.did-kvg .vprops{position:relative;overflow:hidden;background:var(--ink-2);color:#fff;padding:var(--sp-section) 0;border-top:1px solid rgba(255,255,255,.07)}\n\/* The house dark-section glow. Two of the four dark bands were missing it, which is\n   part of why they read as flat slabs next to the ones that had it. *\/\n.did-kvg .vprops::before{content:\"\";position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 88% at 12% 0%,rgba(255,136,46,.10),transparent 58%)}\n.did-kvg .vprops .wrap{position:relative;z-index:1}\n.did-kvg .vp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-group)}\n\/* Same recipe as .bcard: gradient surface, lit top edge, brighter border. At a flat 4%\n   white these tiles were below the design system's 6% floor and barely existed. *\/\n.did-kvg .vp-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:var(--pad-tile);box-shadow:var(--e-lit);transition:transform .25s var(--ease),background .3s ease,border-color .3s ease}\n@media(hover:hover) and (pointer:fine){.did-kvg .vp-tile:hover{transform:translateY(-5px);background:rgba(255,255,255,.07);border-color:rgba(255,136,46,.4)}}\n.did-kvg .vp-tile h3{font-size:var(--t-h3);color:#fff;margin-bottom:var(--gap-micro)}\n.did-kvg .vp-tile p{font-size:var(--t-body);color:var(--muted-light);font-weight:400}\n\/* trusted-by marquee *\/\n.did-kvg .logos-strip__title{text-align:center;font-family:'Manrope',sans-serif;font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0}\n.did-kvg .lmq{position:relative}\n.did-kvg .lmq-viewport{display:flex;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}\n.did-kvg .lmq-track{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:64px;flex:0 0 auto;padding-right:64px;animation:kvgLmq 46s linear infinite;will-change:transform}\n.did-kvg .lmq-track li{display:flex;align-items:center;justify-content:center;margin:0;flex:0 0 auto}\n.did-kvg .lmq-track img{height:30px;width:auto;max-width:158px;object-fit:contain;display:block;opacity:.9}\n@keyframes kvgLmq{from{transform:translateX(0)}to{transform:translateX(-100%)}}\n.did-kvg .lmq:hover .lmq-track{animation-play-state:paused}\n\/* keyboard-operable pause for the auto-scrolling logo strip (WCAG 2.2.2).\n   Rebuilt 2026-08-05 as an icon button. It used to be the sentence \"Pause logo\n   animation\" set as centred body copy under the logos, which is a control rendered as\n   prose and was the loudest undesigned thing on the page.\n   The label still does three jobs and all three survive the change: it is the only hit\n   target (the checkbox is clipped to 1px), the only visible focus indicator, and the\n   checkbox's entire accessible name. The name still comes from a ::after content string\n   that flips with :checked; what changed is that the text is now visually hidden and a\n   real SVG glyph pair carries the meaning on screen. Still no JS. *\/\n.did-kvg .lmq-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\/* Title row: the label sits at the end of it, so the control has a home aligned to\n   something rather than floating under the strip. *\/\n\/* Three explicit tracks, not a flex row. The title is assigned to column 2, so it stays\n   optically centred whether or not the button is present, and under reduced motion the\n   button is display:none, which is exactly the state a spacer-based layout gets wrong. *\/\n\/* 40px side tracks, matched to the button, rather than 1fr\/auto\/1fr: when the title\n   wraps at narrow widths an auto middle track gets squeezed asymmetrically and the\n   title drifts about 20px left of true centre. Fixed side tracks cannot do that. *\/\n.did-kvg .lmq-head{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:var(--gap-micro);margin:0 0 var(--gap-item)}\n.did-kvg .lmq-head .logos-strip__title{grid-column:2;text-align:center}\n.did-kvg .lmq-head .lmq-toggle{grid-column:3;justify-self:end}\n\/* 40px hit box around a 30px circle; the negative margin keeps the row height honest. *\/\n.did-kvg .lmq-toggle{display:inline-grid;place-items:center;width:40px;height:40px;margin:-5px 0;flex:0 0 auto;cursor:pointer;border-radius:var(--r-pill);background:transparent;border:none;color:rgba(255,255,255,.72);transition:color .2s ease}\n.did-kvg .lmq-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.24);transition:background .2s ease,border-color .2s ease}\n.did-kvg .lmq-toggle:hover{color:#fff}\n.did-kvg .lmq-toggle:hover .lmq-btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.42)}\n.did-kvg .lt-ic{width:12px;height:12px;grid-area:1\/1;fill:currentColor}\n.did-kvg .lt-ic--play{display:none}\n.did-kvg .lmq-toggle .lt-label::after{content:\"Logo-Animation pausieren\"}\n#lmqPause:checked ~ .lmq .lmq-track{animation-play-state:paused}\n#lmqPause:checked ~ .lmq-head .lmq-toggle .lt-label::after{content:\"Logo-Animation abspielen\"}\n#lmqPause:checked ~ .lmq-head .lt-ic--pause{display:none}\n#lmqPause:checked ~ .lmq-head .lt-ic--play{display:block}\n.did-kvg .lmq-pause-cb:focus-visible ~ .lmq-head .lmq-toggle .lmq-btn{outline:3px solid var(--focus);outline-offset:3px}\n\/* Hardening, kept beside the component it defends rather than three sections away.\n   A theme label{background:#eee} would put a grey slab behind the circle. *\/\n.did-kvg .lmq-toggle{background:transparent !important;border:none !important}\n\/* The viewport's clip is the only thing keeping a 1751px track inside a 1132px band.\n   A theme rule of `div{overflow:visible}` takes the page to 3023px of horizontal scroll,\n   which is the loudest possible failure and the cheapest possible fix. Found by\n   injection on 2026-08-06; it had never been hardened. *\/\n.did-kvg .lmq-viewport{overflow:hidden !important}\n.did-kvg .lmq-btn{background:transparent !important;border:1px solid rgba(255,255,255,.24) !important}\n.did-kvg .lt-ic{fill:currentColor !important}\n@media(prefers-reduced-motion:reduce){.did-kvg .lmq-toggle{display:none}}\n@media(max-width:900px){.did-kvg .lmq-track{gap:48px;padding-right:48px}.did-kvg .lmq-track img{height:26px;max-width:132px}}\n@media(max-width:560px){\n  .did-kvg .card--wide .card-body{grid-template-columns:minmax(0,1fr)}.did-kvg .lmq-track{gap:38px;padding-right:38px}.did-kvg .lmq-track img{height:22px;max-width:112px}}\n\/* ---- BLOCK 1c: the G2 credential ribbon ----\n   Built 2026-08-05, benchmarked on Synthesia's: rating and stars left, awards right,\n   one slim row. It replaces the old .g2shelf, which floated at the top of the #why\n   band with 56px of nothing under it and read as a stray object in another section's\n   air rather than as a band.\n   LIGHT GROUND IS FORCED, NOT CHOSEN. The badge PNG is one combined transparent image\n   with dark artwork; on dark it needs a white panel, and that panel was already tried\n   and rejected as a pasted-in slab. Conveniently that also breaks the three\n   consecutive dark bands this page used to open with, which is the design system's one\n   explicit background rule. *\/\n\/* No border: it meets a dark band below, and a ground change is its own separator. *\/\n\/* White, not --paper: it now follows the dark chapter and precedes the FAQ, and at\n   --paper both it and the FAQ sat within 1.09:1 of each other, which is not a step. *\/\n.did-kvg .gband{background:var(--paper-2);padding:var(--sp-5) 0}\n.did-kvg .gband__in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--gap-col)}\n.did-kvg .gband__rate{display:flex;flex-direction:column;gap:var(--gap-micro);align-items:flex-start}\n.did-kvg .gband__stars{display:flex;gap:3px}\n\/* --orange-ink, not --orange: bright orange is 2.15:1 on --paper and these are the one\n   non-text element here that has to clear 3:1. *\/\n.did-kvg .gband__stars svg{width:17px;height:17px;color:var(--orange-ink);fill:currentColor}\n.did-kvg .gband__claim{font-family:'Manrope',sans-serif;font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1.2}\n.did-kvg .gband__link{font-size:var(--t-small);font-weight:600}\n.did-kvg .gband__link a{color:var(--orange-ink);text-decoration:underline;text-underline-offset:3px}\n.did-kvg .gband__link a:hover{color:#9a3412}\n\/* Two images, one row: the combined award PNG and the standalone Users Love Us badge.\n   Heights are explicit because the two files have different aspect ratios and only a\n   shared height makes them read as one set. *\/\n.did-kvg .gband__badges{display:flex;align-items:center;gap:0;flex:0 0 auto}\n.did-kvg .gband__badges img{height:148px;width:auto;display:block}\n\/* Seam arithmetic: the combined sheet bakes 50\/330h of right padding but only 40\/330h\n   between its own badges. gap:0 plus this -10\/330h pull makes the fifth badge's gap\n   byte-identical to the sheet's internal ones at any height. Change a height step below\n   and its margin moves with it: -h * 10\/330. *\/\n.did-kvg .gband__badges img + img{margin-left:-4.5px}\n@media(max-width:900px){\n  .did-kvg .gband__in{grid-template-columns:1fr;justify-items:center;gap:var(--gap-lede)}\n  .did-kvg .gband__rate{align-items:center;text-align:center}\n  .did-kvg .gband__badges img{height:110px}\n  .did-kvg .gband__badges img + img{margin-left:-3.3px}\n}\n@media(max-width:560px){\n  \/* One row survives a 342px content box only if the set shrinks: the pair is 3.95x its\n     own height plus the gap. 72px keeps both badges legible and inside the wrap. *\/\n  .did-kvg .gband__badges img{height:72px}\n  .did-kvg .gband__badges img + img{margin-left:-2.2px}\n}\n\n\/* ==================== BLOCK 3 - SUBNAV ==================== *\/\n.did-kvg .seg-spacer{width:100%;height:0}\n\/* JS-toggled fixed positioning: native position:sticky silently fails when any theme\n   ancestor sets overflow or transform, so the pill sits in normal flow and switches to\n   position:fixed only once scrolled past its natural spot. The spacer reserves layout\n   space while fixed so nothing jumps. *\/\n.did-kvg .seg-wrap{position:relative;z-index:40;padding:var(--gap-item) var(--gap-micro);display:flex;justify-content:center;pointer-events:none}\n.did-kvg .seg-wrap.is-fixed{position:fixed;left:0;right:0}\n.did-kvg .seg-wrap .seg{pointer-events:auto}\n\/* Opaque, not translucent-plus-blur. At rgba(255,255,255,.86) the pill composited to a\n   murky grey over every dark section it floats across, which is most of the page now.\n   Shadow deepens on the stuck state instead of sitting at one weight forever: this is\n   the v4-tech-specs treatment, reused rather than reinvented. *\/\n.did-kvg .seg{position:relative;display:flex;align-items:center;gap:2px;max-width:100%;margin:0 auto;padding:var(--sp-1);background:var(--paper-2);border-radius:var(--r-pill);border:1px solid rgba(22,22,22,.08);box-shadow:var(--e-1);overflow-x:auto;scrollbar-width:none;transition:box-shadow .22s ease}\n.did-kvg .seg-wrap.is-fixed .seg{box-shadow:var(--e-3)}\n.did-kvg .seg::-webkit-scrollbar{display:none}\n.did-kvg .seg-ind{position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:var(--r-pill);background:var(--orange);box-shadow:0 4px 14px rgba(255,136,46,.4);transform:translateX(0);transition:transform .24s var(--ease),width .24s var(--ease);z-index:0;pointer-events:none}\n.did-kvg .seg a{position:relative;z-index:1;flex:0 0 auto;padding:var(--gap-micro) var(--sp-3);border-radius:var(--r-pill);font-family:'Manrope',sans-serif;font-weight:600;font-size:var(--t-small);letter-spacing:-.01em;color:var(--text);white-space:nowrap;transition:color .25s ease,background .2s ease}\n.did-kvg .seg a.active{color:#161616}\n.did-kvg .seg a:not(.active):hover{background:rgba(22,22,22,.05)}\n\/* restore the trailing gap that scrolling flex rows drop *\/\n@media(max-width:768px){.did-kvg .seg::after{content:\"\";flex:0 0 8px;align-self:stretch}}\n\n\/* ==================== BLOCK 4 - WHY (2x2 bento) ==================== *\/\n\/* Restructured 2026-08-05. This was a 2x2 of equal cells, and the first card carries\n   twice the copy of the other three (two paragraphs against one). In a 2x2 that ratio\n   has to go somewhere: it went into ~116px of empty white at the bottom of the card\n   beside it, which a piece of corner artwork used to cover up. The lead card now takes\n   the full row and sets its two paragraphs in two columns, and the other three, which\n   really are the same length as each other, run as an even 3-up. *\/\n.did-kvg .why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-group)}\n.did-kvg .card--wide{grid-column:1 \/ -1}\n.did-kvg .card--wide .card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-micro) var(--gap-col)}\n.did-kvg .card--wide .card-body p{margin:0}\n.did-kvg .card{position:relative;background:#fff;border:1px solid rgba(22,22,22,.06);border-radius:var(--r-lg);padding:var(--pad-card);box-shadow:var(--e-1);transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .3s ease}\n.did-kvg .card::before{content:\"\";position:absolute;inset:0;border-radius:var(--r-lg);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@media(hover:hover) and (pointer:fine){\n.did-kvg .card:hover{transform:translateY(-6px);box-shadow:var(--e-3)}\n.did-kvg .card:hover::before{opacity:1}\n.did-kvg .card:hover .ic{transform:translateY(-3px) scale(1.06);background:rgba(255,136,46,.24)}\n}\n.did-kvg .card h3{font-size:var(--t-h3);margin-bottom:var(--gap-micro);font-weight:600}\n.did-kvg .card p{color:var(--muted);font-size:var(--t-body);font-weight:400}\n.did-kvg .card p + p{margin-top:var(--gap-micro)}\n.did-kvg .card a{color:var(--orange-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}\n.did-kvg .card a:hover{color:var(--orange-deep)}\n\/* studio hotspot panel (2026-08-10). --focus flips to --orange here: the section ground\n   is light, but the ring lands on the dark screenshot composite where --orange-ink\n   would vanish. Fine pointers get dot-plus-tooltip; touch gets a static legend below\n   the image (no hover to discover, nothing to overlap at 390px, zero JS involved). *\/\n.did-kvg .studio-shot{--focus:var(--orange);position:relative;max-width:980px;margin:0 auto var(--gap-lede);border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(22,22,22,.08);box-shadow:var(--e-2);background:var(--ink)}\n\/* The figure reset below (.did-kvg figure{margin:0 !important}) exists to beat theme\n   figure margins, but it also beats the auto centering above. Re-assert at higher\n   specificity WITH !important so the panel centers on both the preview and the theme. *\/\n.did-kvg figure.studio-shot{margin:0 auto var(--gap-lede) !important}\n.did-kvg .studio-shot img{display:block;width:100%;height:auto;aspect-ratio:16\/9;object-fit:cover}\n.did-kvg .shot-hot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;background:transparent;border:none;cursor:pointer;padding:0}\n.did-kvg .shot-dot{width:22px;height:22px;border-radius:50%;background:var(--orange);border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.45);transition:transform .25s var(--ease)}\n.did-kvg .shot-tip{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,4px);width:max-content;max-width:240px;background:rgba(11,11,15,.88);color:#fff;font-family:'Manrope',sans-serif;font-size:var(--t-small);font-weight:600;line-height:1.45;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.16);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:5}\n.did-kvg .shot-hot--up .shot-tip{top:auto;bottom:calc(100% + 6px);transform:translate(-50%,-4px)}\n.did-kvg .shot-hot:focus-visible .shot-tip,.did-kvg .shot-hot.is-open .shot-tip{opacity:1;transform:translate(-50%,0)}\n@media(hover:hover) and (pointer:fine){\n  .did-kvg .shot-hot:hover .shot-tip{opacity:1;transform:translate(-50%,0)}\n  .did-kvg .shot-hot:hover .shot-dot{transform:scale(1.18)}\n}\n@media(hover:none){\n  .did-kvg .studio-shot{display:flex;flex-direction:column}\n  .did-kvg .shot-hot{position:static;transform:none;width:auto;height:auto;display:flex;align-items:center;gap:var(--gap-micro);padding:var(--sp-2) var(--sp-3);cursor:default;text-align:left}\n  .did-kvg .shot-hot .shot-dot{width:10px;height:10px;border-width:1px;flex:0 0 auto}\n  \/* Grouped selectors match every state variant's specificity; this block is later in\n     source, so the static legend wins over the --up flip and the focus\/pinned shifts. *\/\n  .did-kvg .shot-tip,.did-kvg .shot-hot--up .shot-tip,.did-kvg .shot-hot:focus-visible .shot-tip,.did-kvg .shot-hot.is-open .shot-tip{position:static;opacity:1;transform:none;pointer-events:auto;background:transparent;border:none;color:#fff;max-width:none;padding:0}\n}\n\n\/* ==================== BLOCK 5 - AGENTIC (dark split) ==================== *\/\n.did-kvg .agentic{position:relative;overflow:hidden;background:var(--ink-2);color:#fff}\n.did-kvg .agentic::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-kvg .agentic .wrap{position:relative;z-index:2}\n.did-kvg .agentic .center p{color:var(--muted-light)}\n.did-kvg .agentic .eyebrow{color:var(--orange)}\n.did-kvg .ag-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-col);align-items:center}\n.did-kvg .ag-grid h3{font-size:var(--t-h2-sm);color:#fff;margin-bottom:var(--gap-micro)}\n.did-kvg .ag-grid p{color:var(--muted-light);font-size:var(--t-lead);font-weight:400;margin-bottom:var(--gap-item)}\n.did-kvg .ag-grid p a{color:var(--orange-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}\n.did-kvg .ag-grid p a:hover{color:var(--orange)}\n.did-kvg .ag-lead{font-family:'Manrope',sans-serif;font-weight:600;color:#fff;font-size:var(--t-body);margin-bottom:var(--gap-micro)}\n.did-kvg .ag-list{list-style:none;display:flex;flex-direction:column;gap:var(--gap-micro)}\n.did-kvg .ag-list li{display:flex;gap:var(--gap-micro);align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-3);font-size:var(--t-body);color:var(--muted-light);transition:transform .25s var(--ease),background .3s ease,border-color .3s ease}\n@media(hover:hover) and (pointer:fine){.did-kvg .ag-list li:hover{transform:translateX(6px);background:rgba(255,255,255,.07);border-color:rgba(255,136,46,.4)}}\n.did-kvg .ag-list .li-ic{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(255,136,46,.16);color:var(--orange-2);flex:0 0 auto}\n.did-kvg .ag-list .li-ic svg{width:17px;height:17px}\n.did-kvg .ag-media{max-width:440px;width:100%;margin-left:auto}\n\/* Live Agentic embed tile (2026-08-10): EN-only markup for now (DE deliberately ships\n   without embeds); the rules stay here so the two stylesheets do not diverge. *\/\n.did-kvg .ag-media--live{max-width:none;aspect-ratio:16\/9}\n.did-kvg .ag-media--live img{width:100%;height:100%;object-fit:cover;display:block}\n.did-kvg .ag-media--live .uc-agentic-mount{position:absolute;inset:0}\n\/* Live-page hardening (2026-08-10): the widget's .av-stage insets ~2px inside the frame\n   with its own radius, and the theme paints figures light, so that gutter showed as\n   white lines down both sides on WordPress. Pin every layer behind the stage to the\n   tile's dark ground. Backgrounds only; the widget's own styling is otherwise untouched. *\/\n.did-kvg [data-agentic]{background:var(--ink) !important}\n.did-kvg [data-agentic] .uc-agentic-mount,.did-kvg [data-agentic] .av-root,.did-kvg [data-agentic] .av-stage{background:var(--ink) !important}\n\n\/* ==================== BLOCK 5a - HOW-TO STEPS ==================== *\/\n.did-kvg .howto{background:var(--paper-2)}\n.did-kvg .steps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-group)}\n.did-kvg .step{margin:0}\n\/* No card boxes: the screenshots are already dark framed squares, and a box in a box\n   would fight them. The shared 1:1 ratio keeps the four columns equal. *\/\n.did-kvg .step img{display:block;width:100%;height:auto;aspect-ratio:1\/1;border-radius:var(--r-md);border:1px solid rgba(22,22,22,.08);margin-bottom:var(--gap-item)}\n.did-kvg .step h3{font-size:var(--t-lead);letter-spacing:-.02em;margin-bottom:var(--gap-micro)}\n.did-kvg .step p{color:var(--muted);font-size:var(--t-body);font-weight:400}\n\n\/* ==================== BLOCK 6 - USE CASES (presenter roster, ported from the German page 2026-08-06) ==================== *\/\n.did-kvg .uc{background:var(--paper)}\n\/* One shell holds the roster and the stage, so the live card can share the stage\n   surface and read as a folder tab rather than a control floating above a card. *\/\n.did-kvg .uc-shell{background:#fff;border:1px solid rgba(22,22,22,.06);border-radius:24px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 16px 40px rgba(16,24,40,.08);overflow:hidden}\n.did-kvg .uc-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid rgba(22,22,22,.08);background:#FAF9F8}\n.did-kvg .uc-card{position:relative;display:flex;align-items:center;gap:12px;padding:16px 18px;border:none;background:transparent;cursor:pointer;text-align:left;font-family:'Manrope',sans-serif;border-right:1px solid rgba(22,22,22,.07);transition:background .25s ease}\n.did-kvg .uc-card:last-child{border-right:none}\n.did-kvg .uc-card[aria-selected=\"true\"]{background:#fff}\n\/* --orange-ink, not --orange: bright orange is only 2.38:1 on white and this bar\n   identifies which case is live, so it has to clear the 3:1 non-text minimum. *\/\n.did-kvg .uc-card::after{content:\"\";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--orange-ink);transform:scaleX(0);transform-origin:50% 50%;transition:transform .28s var(--ease)}\n.did-kvg .uc-card[aria-selected=\"true\"]::after{transform:scaleX(1)}\n@media(hover:hover) and (pointer:fine){.did-kvg .uc-card:not([aria-selected=\"true\"]):hover{background:rgba(22,22,22,.03)}}\n.did-kvg .uc-card .pf{width:44px;height:44px;border-radius:12px}\n.did-kvg .uc-card .pf img{filter:grayscale(1) contrast(.92);transition:filter .3s var(--ease)}\n.did-kvg .uc-card[aria-selected=\"true\"] .pf img,\n.did-kvg .uc-card.previewing .pf img{filter:none}\n.did-kvg .uc-card .uc-card-lbl{font-size:13px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--muted);transition:color .25s ease}\n.did-kvg .uc-card[aria-selected=\"true\"] .uc-card-lbl{color:var(--text)}\n\n\/* presenter face: poster by default, video fades in on hover\/focus preview *\/\n.did-kvg .pf{position:relative;display:block;flex:0 0 auto;border-radius:12px;overflow:hidden;background:var(--ink-2)}\n.did-kvg .pf img,.did-kvg .pf video{width:100%;height:100%;object-fit:cover;display:block}\n.did-kvg .pf video{position:absolute;inset:0;opacity:0;transition:opacity .25s var(--ease)}\n.did-kvg .uc-card.previewing .pf video{opacity:1}\n\n\/* 1.1fr\/.9fr (2026-08-10, was minmax(0,420px) 1fr): a 420px cap rendered the demo at\n   236px tall, card-sized next to a full column of copy. The video now takes just over\n   half the panel and the copy ladder spreads against its taller edge. *\/\n.did-kvg .uc-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:stretch;padding:clamp(24px,3.2vw,40px)}\n.did-kvg.js .uc-panel{display:none}\n.did-kvg.js .uc-panel.is-on{display:grid;animation:kvgPanelIn .26s var(--ease)}\n@keyframes kvgPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}\n.did-kvg .uc-panel + .uc-panel{border-top:1px solid rgba(22,22,22,.08)}\n.did-kvg.js .uc-panel + .uc-panel{border-top:none}\n.did-kvg .uc-panel h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:18px}\n\/* The copy column stretches to the video's height and the labelled rows divide that\n   height between them, so the orange rails read as an even ladder spanning the card\n   instead of a short block with dead space under it. flex-shrink stays 0 so a long\n   case grows the stage rather than squeezing its own text. *\/\n.did-kvg .uc-copy{display:flex;flex-direction:column}\n\/* Solutions hand-off row (ported from EN 2026-08-21): the section's close. Plain underlined\n   links, not buttons: four equal wayfinding paths, and a row of four buttons would shout. *\/\n.did-kvg .uc-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:var(--gap-group);row-gap:var(--gap-micro);margin-top:var(--gap-cta)}\n.did-kvg .uc-links-lbl{font-family:'Manrope',sans-serif;font-weight:600;font-size:var(--t-body);color:var(--muted)}\n.did-kvg .uc-links a{font-family:'Manrope',sans-serif;font-weight:600;font-size:var(--t-body);color:var(--orange-ink);text-decoration:underline;text-underline-offset:3px}\n.did-kvg .uc-links a:hover{color:var(--orange-deep)}\n.did-kvg .uc-rows{display:flex;flex-direction:column;gap:16px;flex:1 0 auto}\n.did-kvg .uc-row{border-left:3px solid rgba(255,136,46,.55);padding:2px 0 2px 16px;flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}\n.did-kvg .uc-row .lbl{display:block;font-family:'Manrope',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:3px}\n.did-kvg .uc-row p{font-size:15px;color:var(--muted);font-weight:400}\n.did-kvg .uc-note{display:flex;gap:11px;align-items:flex-start;margin-top:18px;background:#fff6ef;border:1px solid rgba(255,136,46,.3);border-radius:12px;padding:13px 16px;font-size:14px;color:var(--text)}\n.did-kvg .uc-note .li-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,136,46,.16);color:var(--orange-ink);flex:0 0 auto}\n.did-kvg .uc-note .li-ic svg{width:15px;height:15px}\n.did-kvg .uc-cta{display:flex;justify-content:center;margin-top:40px}\n\n\/* ==================== BLOCK 7 - ENTERPRISE TRUST (dark) ==================== *\/\n.did-kvg .trust{position:relative;overflow:hidden;background:var(--ink);color:#fff}\n.did-kvg .trust::before{content:\"\";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 90% at 88% 0%,rgba(255,136,46,.10),transparent 55%)}\n.did-kvg .trust .wrap{position:relative;z-index:1}\n.did-kvg .trust .center h2{color:#fff}\n.did-kvg .trust .center p{color:var(--muted-light)}\n.did-kvg .trust .eyebrow{color:var(--orange)}\n\/* Rebuilt 2026-08-05. Was five equal cards in a 3+2 grid: the bottom row ran nearly\n   twice as wide as its copy needed, every card carried the same weight so nothing led,\n   and at 5% white on near-black the cards barely existed as objects.\n   Now a full-width credential band opens the section and the four capability cards run\n   underneath it as a 4-up. A compliance officer scanning this page is hunting for three\n   names, and they used to be buried mid-sentence in a card identical to the other four.\n   (A tall left-hand panel was tried first and is the wrong shape: at the 2x2's height it\n   left a 160px hole between the copy and the marks.) *\/\n.did-kvg .badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-group)}\n.did-kvg .bcard{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:var(--pad-tile);box-shadow:var(--e-lit);transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .3s ease,background .3s ease}\n.did-kvg .bcard--cert{grid-column:1 \/ -1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--gap-col);align-items:center;padding:var(--pad-tile);\n  background:linear-gradient(115deg,rgba(255,136,46,.15),rgba(255,255,255,.03) 62%);border-color:rgba(255,136,46,.30)}\n.did-kvg .bcard--cert .ic{margin-bottom:var(--gap-micro)}\n.did-kvg .bcard--cert p{max-width:52ch}\n\/* The marks are plates, not a bullet list: this is the one place on the page where the\n   answer a buyer came for is three proper nouns, so they get the weight of objects. *\/\n\/* Hardened: a theme `ul,li{list-style:disc;padding-left:2em}` (WordPress themes ship\n   exactly that) put a bullet and a 32px indent on every plate. This is the only <ul>\n   on the page, so it is the only one that needed it. *\/\n.did-kvg .creds{list-style:none !important;padding-left:0 !important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-micro)}\n.did-kvg .creds li{list-style:none !important}\n.did-kvg .creds li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-micro);padding:var(--sp-3) var(--sp-3);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);background:rgba(255,255,255,.05);font-family:'Manrope',sans-serif;font-size:var(--t-body);font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.3}\n.did-kvg .creds svg{width:19px;height:19px;color:var(--orange);flex:0 0 auto}\n@media(hover:hover) and (pointer:fine){.did-kvg .bcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.24);box-shadow:var(--e-lit),var(--e-d2)}\n  .did-kvg .bcard--cert:hover{border-color:rgba(255,136,46,.5)}}\n.did-kvg .bcard .ic{background:rgba(255,136,46,.18);color:var(--orange-2)}\n\n\/* Two lines' worth of floor, so every body in the row starts at the same y. Without\n   it a one-line heading pulls its card's copy up and leaves 47px of slack at the\n   bottom, which is the ragged-start version of the same dead space the grids were\n   already fixed for. *\/\n.did-kvg .bcard h3{font-size:var(--t-h3);color:#fff;margin-bottom:var(--gap-micro);min-height:2.2em}\n.did-kvg .bcard--cert h3{min-height:0}\n.did-kvg .bcard p{font-size:var(--t-body);color:var(--muted-light);font-weight:400}\n.did-kvg .bcard p a{color:var(--orange-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}\n.did-kvg .bcard p a:hover{color:var(--orange)}\n.did-kvg .trust-cta{display:flex;justify-content:center;margin-top:var(--gap-cta)}\n\n\/* ==================== BLOCK 8 - FAQ ==================== *\/\n\/* --paper, not white. The question cards are white; on a white section they had no\n   separation at all, which is most of why the FAQ read as an undifferentiated slab. *\/\n.did-kvg .faq{background:var(--paper)}\n.did-kvg .faq-list{max-width:820px;margin:0 auto}\n.did-kvg details{border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;margin-bottom:var(--gap-item);overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease}\n.did-kvg details:hover{box-shadow:var(--e-1);border-color:rgba(0,0,0,.16)}\n.did-kvg details[open]{box-shadow:var(--e-1);border-color:rgba(255,136,46,.35)}\n.did-kvg details[open] p{animation:kvgFaqOpen .28s var(--ease)}\n@keyframes kvgFaqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}\n.did-kvg summary{cursor:pointer;padding:var(--pad-tile);font-weight:500;font-size:var(--t-lead);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--gap-item)}\n.did-kvg summary::-webkit-details-marker{display:none}\n.did-kvg 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-kvg details[open] summary::after{transform:rotate(135deg)}\n.did-kvg details p{padding:0 var(--pad-tile) var(--pad-tile);color:var(--muted);font-size:var(--t-body);font-weight:400}\n\n\/* ==================== BLOCK 9 - FINAL CTA ==================== *\/\n.did-kvg .final{position:relative;background:var(--ink-2);color:#fff;overflow:hidden;padding:var(--sp-section) 0}\n.did-kvg .final::before{content:\"\";position:absolute;inset:0;background:radial-gradient(680px 380px at 50% 0%,rgba(255,136,46,.34),transparent 65%)}\n.did-kvg .final-inner{position:relative;z-index:2;text-align:center;max-width:720px;margin:0 auto}\n.did-kvg .final .eyebrow{color:var(--orange)}\n.did-kvg .final h2{font-size:var(--t-h2)}\n.did-kvg .final p{color:var(--muted-light);font-size:var(--t-lead);margin:var(--gap-item) 0 var(--gap-cta);font-weight:400}\n.did-kvg .final .hero-cta{justify-content:center;margin-top:0}\n\n\/* theme hardening (WordPress) *\/\n.did-kvg a.btn,.did-kvg a.btn:hover,.did-kvg a.btn:focus,.did-kvg a.btn:active{text-decoration:none !important}\n.did-kvg a.btn-primary,.did-kvg a.btn-primary:hover,.did-kvg a.btn-primary:focus,.did-kvg a.btn-primary:active{color:#161616 !important}\n.did-kvg a.btn-ghost,.did-kvg a.btn-ghost:hover,.did-kvg a.btn-ghost:focus{color:#fff !important}\n.did-kvg .btn::before{content:none !important}\n\/* The roster cards are <button>s, so a theme rule like button{background:#eee!important}\n   would strip the live card's white surface and with it the folder-tab read. Same\n   specificity trick as the CTA hardening above: our selectors are more specific, so\n   marking these !important keeps the component intact under a hostile stylesheet. *\/\n.did-kvg .pf{border-radius:50% !important}\n\/* No hardening is applied to the widget's own DOM. The rule that used to sit here\n   (background\/border\/padding:0 !important on .av-root button) was flattening the widget's\n   Ask pill from 22px to 16px and stripping its border and fill: our cure was worse than\n   the disease. There is no clean way to defend third-party author styles from a hostile\n   author !important rule anyway, since `revert` would roll back the widget's own styles\n   too. Verify the control bar against the live theme at paste time instead. *\/\n\/* The CC toggle is ours, mounted into .av-root but not part of the widget, so the rule\n   above does not apply to it: harden it like any other button we own. Background and\n   colour matter as much as the border here, because it sits on video. A hostile\n   button{background:#eee;color:#000} left it as a grey chip with black text on a dark\n   frame, which is both unreadable and unrecognisable as a control. *\/\n.did-kvg .uc-cc{background:rgba(11,11,15,.72) !important;color:#fff !important;border:1px solid rgba(255,255,255,.22) !important;padding:0 var(--gap-micro) !important;border-radius:var(--r-pill) !important}\n.did-kvg .uc-cc:hover{background:rgba(11,11,15,.92) !important}\n.did-kvg .uc-cc[aria-pressed=\"true\"]{background:var(--orange) !important;color:#161616 !important;border-color:transparent !important}\n\/* .kvg-pause hardening still earns its place: the hero and Agentic ambient loops keep\n   their custom pause button. The four demo videos use native controls instead. *\/\n.did-kvg .kvg-pause{background:rgba(11,11,15,.7) !important;border:1px solid rgba(255,255,255,.2) !important;padding:0 !important}\n\/* A theme rule that hides native media controls would break playback entirely. *\/\n\/* Every figure on this page is a media frame sized by its own container. A theme\n   figure{margin:1em 40px} pushes each one off its slot; none of ours ever wants a margin. *\/\n.did-kvg figure{margin:0 !important}\n\/* Filling the frame is our layout contract, not a restyle of the widget: a theme\n   video{width:auto} would otherwise leave the demo floating inside its own frame. *\/\n.did-kvg .uc-agentic-mount video{width:100% !important;height:100% !important}\n\n\/* responsive *\/\n@media(max-width:900px){\n  .did-kvg .why-grid,.did-kvg .ag-grid{grid-template-columns:minmax(0,1fr)}\n  .did-kvg .vp-grid{grid-template-columns:1fr;gap:var(--gap-item)}\n  .did-kvg .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n  .did-kvg .ag-grid{gap:var(--sp-5)}\n  .did-kvg .ag-media{margin:0 auto}\n  \/* The panel stacks: media full width on top, copy below at its natural height. *\/\n  .did-kvg .uc-panel{grid-template-columns:1fr;gap:var(--gap-item)}\n  \n\n  \/* The hero stacks: claim first, then the presenters, still both on one screen. *\/\n  .did-kvg .hero-grid{grid-template-columns:1fr;gap:var(--sp-5)}\n  .did-kvg .hero-copy{text-align:center}\n  .did-kvg .hero p.lead{margin-left:auto;margin-right:auto}\n  .did-kvg .hero-cta{justify-content:center}\n  .did-kvg .pwall{max-width:520px;margin:0 auto;width:100%}\n  \/* The band stacks its two halves and the capability cards drop to a 2x2. *\/\n  .did-kvg .badges{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}\n  .did-kvg .bcard--cert{grid-template-columns:1fr;gap:var(--gap-group)}\n}\n@media(max-width:600px){\n  \/* Two supporting cards at 1.66:1 would be about 120px wide here, too small to read\n     as a face. The lead card takes the full width and the pair sits underneath it. *\/\n  .did-kvg .pwall{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:var(--gap-micro)}\n  \/* No two-row span left to fill, so the lead declares its own ratio again. *\/\n  .did-kvg .pcard--lead{grid-column:1 \/ span 2;grid-row:auto;height:auto;aspect-ratio:4\/5}\n  .did-kvg .pcard--a,.did-kvg .pcard--b{aspect-ratio:1\/1}\n}\n@media(max-width:560px){\n  \/* At ~284px the tag crowds the video's own burnt-in titles. The custom controls are\n     gone from these tiles, so the tag is the only chrome left to step down. *\/\n  .did-kvg .uc-media .kvg-tag{font-size:9.5px;letter-spacing:.06em;padding:4px var(--sp-1);top:9px;right:9px;max-width:calc(100% - 24px)}\n  .did-kvg .wrap{padding:0 20px}\n  .did-kvg .steps-grid{grid-template-columns:1fr;gap:var(--gap-item)}\n  .did-kvg .hero h1{font-size:clamp(30px,8vw,36px)}\n  .did-kvg .btn{width:100%;justify-content:center}\n  .did-kvg .hero-cta{width:100%}\n  .did-kvg .badges{grid-template-columns:minmax(0,1fr)}\n  \/* Three plates side by side would be about 90px wide here; they stack instead and\n     drop back to a single row each. *\/\n  .did-kvg .creds{grid-template-columns:1fr;gap:var(--gap-micro)}\n  .did-kvg .creds li{flex-direction:row;align-items:center;gap:var(--gap-micro);padding:var(--gap-micro) var(--sp-3)}\n  .did-kvg .uc-shell{--s4:18px;--s5:24px;--face:34px}\n  .did-kvg .uc-btn{font-size:var(--t-body)}\n}\n\n\/* REDUCED MOTION *\/\n@media(prefers-reduced-motion:reduce){\n  .did-kvg *,.did-kvg *::before,.did-kvg *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}\n  .did-kvg [data-reveal]{opacity:1 !important;transform:none !important}\n  \/* card art shows finished, with no drawing motion *\/\n  .did-kvg .lmq-track{animation:none !important}\n  \/* The strip is not moving, so its pause control has nothing to pause. Hiding only the\n     label left the visually-hidden checkbox in the tab order with its one visible\n     affordance gone, so keyboard focus landed on a control nobody could see (2.4.7).\n     Take the input out with it. *\/\n  .did-kvg .lmq-pause-cb{display:none}\n  .did-kvg .hero .anim,.did-kvg .pcard{opacity:1 !important;transform:none !important;animation:none !important}\n  .did-kvg .stage::before{animation:none !important}\n  \/* Fewer and gentler, not zero: the state change still reads, it just does not travel. *\/\n\n}\n.did-kvg .uc-card{background:transparent !important;border:none !important;border-right:1px solid rgba(22,22,22,.07) !important;padding:16px 18px !important}\n.did-kvg .uc-card:last-child{border-right:none !important}\n.did-kvg .uc-card[aria-selected=\"true\"]{background:#fff !important}\n\/* == presenter conveyor: generated by scripts\/apply_wall.py == *\/\n\n\/* ===================== THE PRESENTER CONVEYOR =====================\n   Adapted from the 21st.dev CollectionSurfer. What carried over: the diagonal 3D recede.\n   What could not: its 50,000px scroll runway and its position:fixed viewport takeover.\n   This hero is one of ten sections and its CTA has to clear the fold, so the wall never\n   owns the page scroll. Instead it runs on its own clock: nine cards advance toward the\n   viewer forever, fading in small at the back and dissolving out past the left edge.\n\n   Three things are worth knowing before touching any number here.\n\n   1. THE GEOMETRY IS PROPORTIONAL, not absolute. Every length is a share of the wall's\n      own width via container units, so the whole 3D scene is scale invariant: it is the\n      same picture at 466px and at 342px, just smaller. The previous build declared\n      pixel geometry per breakpoint, which is why it clipped everywhere below 1180.\n      One knob, --pw-k, scales the scene inside its box; --pw-asp shapes the box.\n\n   2. NO z-index ANYWHERE. .pw-track is preserve-3d inside .pw's perspective, so the\n      browser depth-sorts by computed 3D position. That is what lets cards travel\n      through the stacking order for free, and it is the whole reason a conveyor is\n      possible in CSS at all.\n\n   3. TWO LAYERS PER PRESENTER. .pw-slot carries the conveyor animation; .pw-card\n      carries the resting angle, the hover lift and every scrap of chrome. One element\n      cannot hold both: an animation and a transition on the same `transform` is a\n      fight the animation always wins. *\/\n.did-kvg .pw-frame,.did-kvg .pw-bleed{container-type:inline-size}\n.did-kvg .pw{\n  --pw-k:1;                 \/* scene scale inside the box *\/\n  --pw-asp:.88;             \/* box shape; the run climbs, so the box has to be tall *\/\n  --pw-dur:54s;             \/* one card's full traverse. A card enters every dur\/9 *\/\n  --pw-rot:-50deg;          \/* the source's own angle *\/\n  --pw-rot-hover:-20deg;    \/* square-on enough to actually watch a face *\/\n  --pw-persp:calc(365cqw * var(--pw-k));\n  --pw-lift:calc(15cqw * var(--pw-k));\n  position:relative;width:100%;aspect-ratio:var(--pw-asp);\n  perspective:var(--pw-persp);perspective-origin:22% 34%;\n  overflow:hidden;\n  \/* Feathered on both sides, which the previous build was not: it fed the right edge\n     into a fade and left the left edge a hard cut straight through the front card's\n     face. The left ramp is short because the exit is carried by the opacity keyframe,\n     not by the mask; this only softens the box boundary itself. *\/\n  -webkit-mask-image:linear-gradient(100deg,transparent 0%,#000 8%,#000 62%,rgba(0,0,0,.45) 84%,transparent 100%);\n  mask-image:linear-gradient(100deg,transparent 0%,#000 8%,#000 62%,rgba(0,0,0,.45) 84%,transparent 100%)}\n.did-kvg .pw-track{\n  \/* Declared here, not on .pw: container units resolve against the nearest ANCESTOR\n     container, so cqw written on the container itself would measure the wrong box. *\/\n  \/* These are the proportions of the wall that was signed off, carried over exactly:\n     card-to-step 1.89, step-to-rise 3.7, depth-to-step 1.27. An earlier solve maximised\n     face size and on-screen count instead and produced a denser, flatter deck that had\n     stopped reading as a wall. Density is the design; the clipping fix is the box. *\/\n  --pw-card:calc(45.52cqw * var(--pw-k));\n  --pw-x:calc(24.05cqw * var(--pw-k));\n  --pw-y:calc(-6.44cqw * var(--pw-k));\n  --pw-z:calc(-30.49cqw * var(--pw-k));\n  position:absolute;left:26%;top:52%;width:0;height:0;transform-style:preserve-3d}\n\n\/* ---- the conveyor ----\n   p runs 7.4 (far, entering) to -1.6 (fully past the left edge), a span of 9 across\n   nine cards, so neighbours stay exactly one unit apart. translate3d interpolates\n   linearly in 3D, and the perspective divide turns that into accelerating screen\n   motion: a card crawls at the back and sweeps out at the front, which is what a real\n   object passing a camera does. That is why the timing function is linear and stays\n   linear; a shared easing curve would make the cards bunch.\n\n   THE FADE IS ON THE CARD, NOT THE SLOT, and that is not tidiness. Any grouping property\n   forces an element's used transform-style to flat, and `opacity` below 1 is one of them.\n   An opacity keyframe on .pw-slot would flatten it, and .pw-card's rotateY would render\n   as a 2D horizontal squash with no perspective keystone: the deck would collapse into\n   a row of sheared rectangles. So the travel animates on the slot and the fade animates\n   on the card, which is already flat because it carries overflow:hidden. Both share\n   --pw-dur and --dp, so they are phase-locked by construction. *\/\n@keyframes pwDrift{\n  from{transform:translate3d(calc(7.4 * var(--pw-x)),calc(7.4 * var(--pw-y)),calc(7.4 * var(--pw-z)))}\n  to  {transform:translate3d(calc(-1.6 * var(--pw-x)),calc(-1.6 * var(--pw-y)),calc(-1.6 * var(--pw-z)))}\n}\n@keyframes pwFade{\n  0%  {opacity:0}\n  7%  {opacity:.5}\n  42% {opacity:1}\n  84% {opacity:1}\n  100%{opacity:0}\n}\n.did-kvg .pw-slot{position:absolute;width:var(--pw-card);height:calc(var(--pw-card)*4\/3);\n  \/* -w\/2 and -h\/2, so every card's centre lands on the track origin before it travels *\/\n  margin:calc(var(--pw-card)*-2\/3) 0 0 calc(var(--pw-card)\/-2);\n  transform-style:preserve-3d;\n  \/* Survivable static default: if animations never run, this is the laid-out wall the\n     conveyor replaced, not an empty box. *\/\n  transform:translate3d(calc(var(--i) * var(--pw-x)),calc(var(--i) * var(--pw-y)),calc(var(--i) * var(--pw-z)));\n  animation:pwDrift var(--pw-dur) linear infinite;\n  animation-delay:calc(var(--pw-dur) * var(--dp))}\n.did-kvg .pw-card{animation:pwFade var(--pw-dur) linear infinite;\n  animation-delay:calc(var(--pw-dur) * var(--dp))}\n\n\/* ---- the card ----\n   Premium here is four cheap things the previous build did not do: the page's large-card\n   radius instead of its small one, a warm ground instead of a cool one, a contact shadow\n   under the ambient one, and a rim that falls off around the card instead of ringing it. *\/\n.did-kvg .pw-card{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;\n  \/* warm, so it sits on the stage's #090604 -> #3F230D ramp rather than against it *\/\n  background:#140F0C;border:1px solid rgba(255,255,255,.10);\n  \/* contact + ambient + a warm 1px rim. The dark elevation tokens carry no contact\n     layer, unlike their light counterparts, which is why these cards used to float\n     rather than sit. Same fix v4-tech-specs uses on the same near-black. *\/\n  box-shadow:0 1px 2px rgba(0,0,0,.34),0 30px 72px rgba(0,0,0,.55),0 0 0 1px rgba(255,136,46,.08);\n  transform:translateZ(0) rotateY(var(--pw-rot)) scale(1);\n  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)}\n\/* The gradient rim: this recipe exists five times in the repo and every one of them is\n   on a white card on a light ground. First time it runs on dark. *\/\n.did-kvg .pw-card::before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;\n  background:linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.05) 44%,transparent 72%);\n  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);\n  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}\n\/* Lit top edge plus a corner light. A directional corner reads as light; the flat 200deg\n   wash this replaces read as an orange tint over someone's face. *\/\n.did-kvg .pw-card::after{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;\n  box-shadow:var(--e-lit);z-index:2;\n  background:radial-gradient(72% 52% at 88% 4%,rgba(255,136,46,.13),transparent 58%)}\n.did-kvg .pw-poster,.did-kvg .pw-vid{position:absolute;inset:0;width:100%;height:100%;\n  object-fit:cover;display:block;\n  \/* The clips are cut 3:4 for this card, so there is no runtime crop left to steer and\n     brightness no longer has to fight a light studio backdrop on a cool card ground. *\/\n  filter:saturate(.94) brightness(.9);transition:filter .3s var(--ease-out)}\n\/* The video sits over its own poster and crossfades in, so a first play never shows an\n   empty box while the first frame decodes. *\/\n.did-kvg .pw-vid{opacity:0;transition:opacity .3s var(--ease-out),filter .3s var(--ease-out)}\n.did-kvg .pw-card.is-live .pw-vid{opacity:1}\n\n\/* ---- hover ----\n   The wall stops first. Without that the target slides out from under the cursor, which\n   is the same reason the logo marquee pauses on hover. Then the card lifts, turns most\n   of the way toward the viewer and starts playing. The turn is what makes it read as a\n   person responding rather than a tile getting bigger, and it un-foreshortens the face\n   so the video you just started is actually watchable. *\/\n@media(hover:hover) and (pointer:fine){\n  .did-kvg .pw:hover .pw-slot,.did-kvg .pw:hover .pw-card{animation-play-state:paused}\n  .did-kvg .pw-card:hover{\n    transform:translateZ(var(--pw-lift)) rotateY(var(--pw-rot-hover)) scale(1.03);\n    border-color:rgba(255,255,255,.20);\n    box-shadow:0 2px 4px rgba(0,0,0,.4),0 44px 92px rgba(0,0,0,.62),0 0 0 1px rgba(255,136,46,.34)}\n  .did-kvg .pw-card:hover .pw-poster,.did-kvg .pw-card:hover .pw-vid{filter:none}\n  \/* Rack focus: the rest recede rather than the one shouting. This dims the MEDIA, not\n     the card. pwFade owns the card's opacity and an animation beats a plain declaration,\n     so an opacity rule here would simply never fire. *\/\n  .did-kvg .pw:hover .pw-card:not(:hover) .pw-poster,\n  .did-kvg .pw:hover .pw-card:not(:hover) .pw-vid{filter:saturate(.7) brightness(.55)}\n}\n.did-kvg .pw-card{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),\n  border-color .28s var(--ease-out),opacity .28s var(--ease-out)}\n\n\/* ---- the control ----\n   The logo strip's pattern, for the logo strip's reason: a CSS-only stop cannot be\n   killed by WordPress entity-mangling or delayed by WP Rocket. The checkbox is clipped\n   to 1px but NOT display:none, so it stays focusable; the label is the 40px hit target,\n   the visible focus ring and the whole accessible name.\n   One control, one intent: hold still and play, or drift and rest. Stopping the drift\n   is what satisfies WCAG 2.2.2, which a hover-pause does not. *\/\n.did-kvg .pw-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-kvg .pw-foot{display:flex;align-items:center;gap:var(--gap-item);margin-top:var(--gap-item)}\n.did-kvg .pw-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;\n  cursor:pointer;border-radius:var(--r-pill);background:transparent;border:none;\n  color:rgba(255,255,255,.72);transition:color .2s ease}\n.did-kvg .pw-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;\n  \/* .42, not the .24 the two shipping controls use: 24% white measures 2.01:1 on the\n     stage and the circle is this button's only visible boundary, so 1.4.11 applies. *\/\n  border:1px solid rgba(255,255,255,.42);transition:background .2s ease,border-color .2s ease}\n.did-kvg .pw-toggle:hover{color:#fff}\n.did-kvg .pw-toggle:hover .pw-btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.42)}\n.did-kvg .pw-ic{width:13px;height:13px;grid-area:1\/1;fill:currentColor}\n.did-kvg .pw-ic--stop{display:none}\n.did-kvg .pw-toggle .pw-label::after{content:\"Hold the wall still and play every presenter\"}\n[id$=\"pwHold\"]:checked ~ .pw .pw-slot,[id$=\"pwHold\"]:checked ~ .pw .pw-card,\n[id$=\"pwHold\"]:checked ~ .pw-bleed .pw-slot,[id$=\"pwHold\"]:checked ~ .pw-bleed .pw-card{animation-play-state:paused}\n[id$=\"pwHold\"]:checked ~ .pw-foot .pw-ic--play{display:none}\n[id$=\"pwHold\"]:checked ~ .pw-foot .pw-ic--stop{display:block}\n[id$=\"pwHold\"]:checked ~ .pw-foot .pw-toggle .pw-label::after{content:\"Let the wall drift again\"}\n.did-kvg .pw-cb:focus-visible ~ .pw-foot .pw-toggle .pw-btn{outline:3px solid var(--focus);outline-offset:3px}\n.did-kvg .pw-badge{position:static;display:inline-block}\n\n@media(max-width:900px){\n  \/* One column, so the wall is now full width and much shorter. The scene shrinks with\n     --pw-k rather than being re-declared in pixels, which is what kept the old build\n     clipping at every width it was not tuned at. *\/\n  .did-kvg .pw-frame .pw{--pw-asp:1.35;--pw-k:.60}\n}\n@media(max-width:560px){\n  .did-kvg .pw-frame .pw{--pw-asp:1.1;--pw-k:.66}\n  .did-kvg .pw-foot{flex-wrap:wrap;justify-content:center}\n}\n\n\/* ---- reduced motion ----\n   The conveyor stops and the cards hold their laid-out positions, which is the static\n   wall this replaced: a survivable default rather than an empty box.\n   The control STAYS. Its stop job is redundant once nothing drifts, but its play job is\n   not, and it is the only route to a moving presenter for anyone without a pointer.\n   That is the difference from the logo strip, whose control is hidden here because a\n   stopped marquee genuinely leaves it nothing to do. *\/\n@media(prefers-reduced-motion:reduce){\n  .did-kvg .pw-slot,.did-kvg .pw-card{animation:none}\n  \/* The fade envelope was the depth cue, so it needs a static stand-in or the deep cards\n     come back at full strength and the recede stops reading. *\/\n  .did-kvg .pw-card{opacity:calc(1 - var(--i) * .085)}\n  .did-kvg .pw-card,.did-kvg .pw-poster,.did-kvg .pw-vid{transition:none}\n  .did-kvg .pw-card:hover{transform:translateZ(0) rotateY(var(--pw-rot)) scale(1)}\n}\n\n\/* ---- theme hardening ----\n   Found by injection, not by guessing: the D-ID theme's `img{height:auto}` took the card\n   art from 271px to 203px and left a strip of card backing under every face, and its\n   button and figure resets pushed the badge out of the control row. The wall's clip is\n   in here too, because cards deliberately extend past the frame and a theme that unsets\n   overflow turns that bleed into real horizontal page scroll.\n   Every hardened property needs its hover counterpart hardened as well, or the state\n   silently never fires. This page has shipped that exact bug twice. *\/\n.did-kvg .pw{overflow:hidden !important}\n.did-kvg .pw-card{overflow:hidden !important;padding:0 !important;border-radius:var(--r-lg) !important;\n  border:1px solid rgba(255,255,255,.10) !important;background:#140F0C !important}\n\n.did-kvg .pw-poster,.did-kvg .pw-vid{width:100% !important;height:100% !important;\n  max-width:none !important;max-height:none !important;min-width:0 !important;\n  display:block !important;margin:0 !important;padding:0 !important;\n  object-fit:cover !important;border-radius:0 !important}\n.did-kvg .pw-toggle{background:transparent !important;border:none !important;padding:0 !important;\n  border-radius:var(--r-pill) !important}\n\/* content-box from a theme reset adds the card's 1px border to its own inset:0 box and\n   the media grows 2px past the radius. Cheap to pin, invisible until it is not. *\/\n.did-kvg .pw-card,.did-kvg .pw-slot,.did-kvg .pw-poster,.did-kvg .pw-vid{box-sizing:border-box !important}\n.did-kvg .pw-btn{background:transparent !important;border:1px solid rgba(255,255,255,.42) !important}\n\n.did-kvg .pw-ic{fill:currentColor !important}\n.did-kvg .pw-foot .hero-badge{margin:0 !important;line-height:1.6 !important;\n  border-radius:var(--r-pill) !important;text-decoration:none !important}\n.did-kvg .pw-toggle .pw-label::after{content:\"Hold the wall still and play every presenter\"}\n[id$=\"pwHold\"]:checked ~ .pw-foot .pw-toggle .pw-label::after{content:\"Let the wall drift again\"}\n\n\/* == end presenter conveyor == *\/\n\/* == D-ID house icon chips, restored 2026-08-06 ==\n   These are the marks; the .fig line drawings that briefly replaced them are not. Both\n   locales carry the same twelve now, which closes the divergence the 08-05 revert opened\n   when it landed on English only. == *\/\n.did-kvg .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-kvg .ic svg{width:24px;height:24px}\n\n.did-kvg .bcard .ic{background:rgba(255,136,46,.18);color:var(--orange-2)}\n.did-kvg .vp-tile .ic{background:rgba(255,136,46,.18);color:var(--orange-2);margin-bottom:16px}\n\n\/* == end house icon chips == *\/\n\/* == corrections, 2026-08-06 ==\n   English's panel media is an Agentic Video embed, not the square avatar tile the German\n   component was built around, so it needs its own box. Without a definite height the grid\n   column has nothing to size against and .uc-row{flex:1 0 auto} stretches the three rows\n   to fill whatever height the copy happens to be. align-self:start stops the media being\n   stretched back by align-items:stretch. == *\/\n.did-kvg .uc-panel .uc-media{position:relative;aspect-ratio:16\/9;border-radius:var(--r-lg);\n  overflow:hidden;background:var(--ink);box-shadow:var(--e-lit),var(--e-d2);align-self:start}\n.did-kvg .uc-panel .uc-media img,.did-kvg .uc-panel .uc-media video{width:100%;height:100%;object-fit:cover;display:block}\n.did-kvg .uc-panel .uc-agentic-mount{position:absolute;inset:0}\n\/* The wall's control row reads as the wall's caption, so it lines up with the wall, not\n   with the left edge of a column the wall does not fill. *\/\n.did-kvg .pw-foot{justify-content:center}\n.did-kvg .hero--b .pw-foot,.did-kvg .pw-band .pw-foot{justify-content:flex-start}\n\/* == end corrections == *\/\n\/* Hardened hover states, gated. The base hover rules are inside a hover gate;\n   re-asserting them !important OUTSIDE one un-gates them on touch, where a tap\n   leaves the state stuck. Gotcha 29 both ways: harden the state, keep the gate. *\/\n@media(hover:hover) and (pointer:fine){\/* hardened hover states *\/\n.did-kvg .bcard:hover .ic{transform:scale(1.08)}\n.did-kvg .pw-toggle:hover .pw-btn{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.42) !important}\n.did-kvg .kvg-pause:hover{transform:scale(1.08);background:rgba(11,11,15,.92) !important}\n.did-kvg .pw-card:hover{border:1px solid rgba(255,255,255,.20) !important}\n}\n\n\/* ---- hero loop -------------------------------------------------------------\n   The studio film that replaced the presenter wall. The hero column is capped at\n   ~465 CSS px by --maxw, so a 1080p source is already about twice what a 2x display\n   asks for here: AV1 first (4.5MB, measured higher quality than the h264), h264\n   second for Safari <17. The codecs= strings are load-bearing - with a bare\n   video\/mp4 a browser answers \"maybe\", picks AV1, fails, and never reaches the\n   fallback. WCAG 2.2.2: motion past 5s needs a stop control, hence .hl-btn. *\/\n.did-kvg .hl-fig{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#0d0906;\n  box-shadow:0 30px 70px -28px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.10)}\n.did-kvg .hl-vid{display:block;width:100%;height:auto;aspect-ratio:16\/9;object-fit:cover}\n.did-kvg .hl-foot{display:flex;align-items:center;gap:var(--gap-item);margin-top:var(--gap-item)}\n.did-kvg .hl-btn{display:inline-flex;align-items:center;gap:9px;background:transparent;color:#fff;\n  border:1px solid rgba(255,255,255,.42);border-radius:var(--r-pill);padding:9px 17px;cursor:pointer;\n  font-family:'Manrope',sans-serif;font-size:var(--t-label);font-weight:700;line-height:1}\n.did-kvg .hl-btn:hover{border-color:rgba(255,255,255,.75)}\n.did-kvg .hl-btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}\n.did-kvg .hl-btn svg{width:13px;height:13px;fill:currentColor;display:block}\n.did-kvg .hl-btn .hl-play{display:none}\n.did-kvg .hl-btn[aria-pressed=\"true\"] .hl-play{display:block}\n.did-kvg .hl-btn[aria-pressed=\"true\"] .hl-stop{display:none}\n@media (max-width:640px){.did-kvg .hl-foot{justify-content:center}}\n\n\/* ---- hero: cinema stage ---------------------------------------------------\n   The film is the centrepiece, so the copy sits above it and the film takes the full\n   container width (~1132 CSS). In the old narrow media column it rendered at 465px, and\n   its own captions - composed at 84px inside a 1920 frame - came out at 20 CSS px, which\n   is smaller than body text; at full width they land near 50px and the Studio UI becomes\n   readable. Going full width also retires the 617px copy-column floor that forced the\n   narrow column in the first place, since the copy no longer shares the row. *\/\n.did-kvg .hero-stage{display:block}\n.did-kvg .hero-stage .hero-copy{max-width:920px;margin:0 auto clamp(34px,4vw,60px);text-align:center}\n.did-kvg .hero-stage .hero-copy .lead{max-width:790px;margin-left:auto;margin-right:auto}\n.did-kvg .hero-stage .hero-cta{margin-top:var(--sp-4,26px)}\n.did-kvg .hero-stage .hero-cta{justify-content:center}\n.did-kvg .hero-stage .hl-foot{justify-content:center}\n.did-kvg .hero-stage .hl-fig{border-radius:20px}\n@media (max-width:900px){\n  .did-kvg .hero-stage .hero-copy{text-align:left}\n  .did-kvg .hero-stage .hero-cta{justify-content:flex-start}\n  .did-kvg .hero-stage .hl-foot{justify-content:flex-start}\n  \/* comfortable touch target: 33px clears WCAG 2.5.8 (24px) but is tight for a thumb *\/\n  .did-kvg .hl-btn{min-height:44px;padding:12px 18px}\n}\n\n\/* ---- agentic stage, ported from the EN page so the live widget renders ---- *\/\n\/* The full-width stage (2026-08-18): the demo is the one thing this section sells and\n   at column width it rendered card-sized. It now takes the wrap, capped at 1000px, the\n   copy above it split copy-left \/ bullets-right. The centring margin must out-rank the\n   theme figure reset, hence the second !important assertion (the studio-shot recipe). *\/\n.did-kvg .ag-stage{position:relative;max-width:1000px;margin:var(--gap-cta) auto 0;aspect-ratio:16\/9;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);border:1px solid rgba(255,255,255,.12);box-shadow:var(--e-lit),var(--e-d3)}\n.did-kvg figure.ag-stage{margin:var(--gap-cta) auto 0 !important}\n.did-kvg .ag-stage img{width:100%;height:100%;object-fit:cover;display:block}\n.did-kvg .ag-stage .uc-agentic-mount{position:absolute;inset:0}\n\/* The line that closes the argument, centred between the bullets and the stage. *\/\n.did-kvg .ag-close{text-align:center;max-width:640px;margin:var(--gap-lede) auto 0;color:var(--muted-light);font-size:var(--t-lead);font-weight:400}\n\n\/* ---- five-tab use-case roster, ported from the EN page ---- *\/\n.did-kvg .uc-shell--five .uc-roster,.did-kvg .uc-shell--steps .uc-roster{grid-template-columns:repeat(5,minmax(0,1fr))}\n<\/style>\n\n<div class=\"did-kvg\">\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     SLUG NOTE: \/de\/ki-video-generator\/ is baked into every @id below; if the\n     final slug differs, update this prelude before pasting into WordPress. -->\n<!-- schema-merge-ok: organization -->\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      \"@id\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/\",\n      \"about\": { \"@id\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#service\" }\n    },\n    {\n      \"@type\": \"Service\",\n      \"@id\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#service\",\n      \"name\": \"D-ID Enterprise-KI-Video-Generator\",\n      \"description\": \"D-ID bietet Unternehmen einen Enterprise-KI-Video-Generator, der f\u00fcr sichere Implementierungen, API-Integrationen und die skalierbare Erstellung gro\u00dfer Mengen an Videos entwickelt wurde.\",\n      \"provider\": { \"@id\": \"https:\/\/www.d-id.com\/#organization\" },\n      \"serviceType\": \"KI-Videoerstellung f\u00fcr Unternehmen\",\n      \"areaServed\": \"Weltweit\",\n      \"inLanguage\": \"de-DE\"\n    },\n    {\n      \"@type\": \"VideoObject\",\n      \"@id\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#herovideo\",\n      \"name\": \"Enterprise-KI-Video-Generator mit realistischen KI-Avataren: Beispielvideo\",\n      \"description\": \"Erstelle professionelle KI-Videos mit lebensechten digitalen Presentern. Verwandle Unternehmensinhalte in mehrsprachige Videos, passe sie an unterschiedliche Zielgruppen an und erm\u00f6gliche Interaktionen in Echtzeit, wenn Zuschauer Fragen haben.\",\n      \"thumbnailUrl\": \"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/avatar-hero-poster.jpg\",\n      \"contentUrl\": \"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/avatar-hero.mp4\",\n      \"uploadDate\": \"2026-07-30\",\n      \"inLanguage\": \"de\"\n    },\n    {\n      \"@type\": \"HowTo\",\n      \"@id\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#howto\",\n      \"name\": \"Wie entsteht ein KI-Video in D-ID Studio?\",\n      \"description\": \"Vom Skript zum fertigen Video in vier Schritten, ganz ohne Kamera, Crew oder Nachdrehs.\",\n      \"image\": \"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/Screen_UI.png\",\n      \"tool\": [{ \"@type\": \"HowToTool\", \"name\": \"D-ID Studio\" }],\n      \"step\": [\n        {\n          \"@type\": \"HowToStep\",\n          \"position\": 1,\n          \"name\": \"Vorlage w\u00e4hlen oder leer starten\",\n          \"text\": \"Vorlagen halten wiederkehrende Formate konsistent; die leere Arbeitsfl\u00e4che l\u00e4sst dir freie Hand.\",\n          \"image\": \"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/step-1-choose-template.png\",\n          \"url\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#so-gehts\"\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"position\": 2,\n          \"name\": \"Skript schreiben oder Voiceover hochladen\",\n          \"text\": \"F\u00fcge freigegebenen Text ein oder nutze eine vorhandene Sprachaufnahme; der Presenter spricht ihn.\",\n          \"image\": \"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/step-2-add-script.png\",\n          \"url\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#so-gehts\"\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"position\": 3,\n          \"name\": \"Presenter ausw\u00e4hlen und Tonalit\u00e4t festlegen\",\n          \"text\": \"W\u00e4hle einen Stock- oder Custom-Avatar und passe die Wirkung Szene f\u00fcr Szene an.\",\n          \"image\": \"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/step-3-choose-avatar.png\",\n          \"url\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#so-gehts\"\n        },\n        {\n          \"@type\": \"HowToStep\",\n          \"position\": 4,\n          \"name\": \"Branding anwenden und exportieren\",\n          \"text\": \"Passe Farben, Medien und Layouts an und rendere Versionen f\u00fcr jeden Markt.\",\n          \"image\": \"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/step-4-customize.png\",\n          \"url\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#so-gehts\"\n        }\n      ],\n      \"inLanguage\": \"de\"\n    },\n    {\n      \"@type\": \"FAQPage\",\n      \"@id\": \"https:\/\/www.d-id.com\/de\/ki-video-generator\/#faq\",\n      \"mainEntity\": [\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Warum sollte sich ein Unternehmen f\u00fcr D-ID als KI-Video-Generator entscheiden?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"D-ID verbindet die professionelle Erstellung von Videos mit KI-Avataren mit mehrsprachigen Funktionen, flexiblen Studio- und API-Workflows, Enterprise-Sicherheit und Agentic Videos. Unternehmen k\u00f6nnen Videoinhalte effizient \u00fcber Abteilungen, Systeme, Zielgruppen und internationale M\u00e4rkte hinweg erstellen, aktualisieren, lokalisieren, automatisieren und integrieren.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Kann D-ID Gesch\u00e4ftsdokumente in Videos umwandeln?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Ja. Teams k\u00f6nnen Skripte, Pr\u00e4sentationen, Dokumente, Bilder und Audiodateien in Videos mit digitalen Presentern verwandeln. So lassen sich vorhandenes Unternehmenswissen, Schulungsmaterialien und Kommunikationsinhalte wiederverwenden, ohne jede Botschaft neu aufzubauen oder jedes Video als separate Produktion entwickeln zu m\u00fcssen.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"K\u00f6nnen Unternehmen mit D-ID einen eigenen KI-Presenter erstellen?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Ja. Unternehmen k\u00f6nnen aus vorhandenen Presentern w\u00e4hlen oder autorisierte pers\u00f6nliche und individuelle Avatare erstellen. Derselbe KI-Presenter kann anschlie\u00dfend in unterschiedlichen Videos, Sprachen, Schulungsprogrammen, Onboarding-Materialien und Kommunikationskampagnen eingesetzt werden. So entsteht ein einheitlicher und wiedererkennbarer visueller Auftritt.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Kann ein D-ID-Video Fragen von Zuschauern beantworten?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Ja. Mit D-ID Agentic Videos k\u00f6nnen Zuschauer w\u00e4hrend des Videos per Sprache oder Chat Fragen stellen. Der Video-Agent nutzt das Skript und freigegebene zus\u00e4tzliche Wissensquellen, um innerhalb derselben Nutzererfahrung relevante Antworten zu geben. Dadurch werden Videos interaktiver und st\u00e4rker auf den einzelnen Zuschauer zugeschnitten.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Warum eignet sich D-ID f\u00fcr international t\u00e4tige Unternehmen?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"D-ID unterst\u00fctzt mehr als 120 Sprachen und Akzente, wiederverwendbare KI-Presenter, API-Integrationen und Enterprise-Sicherheit. Internationale Teams k\u00f6nnen lokalisierte Videoversionen in gro\u00dfem Umfang erstellen und gleichzeitig ihre Botschaften, ihr Branding, die Identit\u00e4t des Presenters und die gesamte Kommunikation \u00fcber Regionen und Zielgruppen hinweg konsistent halten.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Kann D-ID in bestehende Unternehmenssoftware integriert werden?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Ja. \u00dcber die D-ID API lassen sich die KI-Videoerstellung und interaktive Agenten mit Websites, Gesch\u00e4ftsanwendungen, Lernplattformen, Content-Management-Systemen, Kundenportalen und automatisierten Workflows verbinden. Unternehmen k\u00f6nnen Videoerstellung und Echtzeitinteraktionen so direkt in bestehende Prozesse und Produkte integrieren.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Welche Sicherheitsfunktionen sollten Unternehmen ber\u00fccksichtigen?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Unternehmen sollten unter anderem Einwilligungsmanagement, Datenschutz, Zugriffskontrollen, Inhaltsmoderation, Cloud-Sicherheit, KI-Governance und Unterst\u00fctzung bei der Implementierung pr\u00fcfen. D-ID deckt diese Bereiche mit Kontrollfunktionen auf Enterprise-Niveau sowie anerkannten SOC-2- und ISO-Zertifizierungen ab. Dadurch l\u00e4sst sich KI-Video innerhalb bestehender Sicherheits- und Compliance-Anforderungen einsetzen.\"\n          }\n        }\n      ]\n    }\n  ]\n}\n<\/script>\n<!-- ==================== BLOCK 1 - HERO ==================== -->\n<section class=\"stage\">\n<div class=\"hero\">\n  <div class=\"wrap hero-grid hero-stage\">\n   <div class=\"hero-copy\"><h1 class=\"anim d1\">Enterprise-<span class=\"accent\">KI-Video-Generator<\/span> mit realistischen KI-Avataren<\/h1><p class=\"lead anim d2\">Erstelle professionelle KI-Videos mit lebensechten digitalen Presentern. Verwandle Unternehmensinhalte in mehrsprachige Videos, passe sie an unterschiedliche Zielgruppen an und erm\u00f6gliche Interaktionen in Echtzeit, wenn Zuschauer Fragen haben.<\/p><p class=\"lead anim d2\">D-ID bietet Unternehmen einen <b>Enterprise-KI-Video-Generator<\/b>, der f\u00fcr sichere Implementierungen, API-Integrationen und die skalierbare Erstellung gro\u00dfer Mengen an Videos entwickelt wurde.<\/p><div class=\"hero-cta anim d3\">\n      <a href=\"https:\/\/studio.d-id.com\/\" class=\"btn btn-primary\">KI-Video erstellen<\/a>\n    <\/div><\/div>\n   <div class=\"hl anim d3\" data-reveal>\n    <figure class=\"hl-fig\">\n     <video class=\"hl-vid\" id=\"heroLoop\" width=\"2560\" height=\"1440\"\n            poster=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-hero-studio-loop-de-poster.jpg\"\n            autoplay muted loop playsinline preload=\"metadata\"\n            aria-label=\"D-ID KI-Videogenerator: Vorlagen durchsuchen, Avatar w&auml;hlen, Skript hinzuf&uuml;gen, Sprache w&auml;hlen, Video generieren und ein Agentic Video, das eine Zuschauerfrage beantwortet\">\n      <source src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-hero-studio-loop-de-av1.mp4\" type=\"video\/mp4; codecs=av01.0.08M.08\">\n      <source src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-hero-studio-loop-de.mp4\" type=\"video\/mp4; codecs=avc1.640032\">\n     <\/video>\n    <\/figure>\n    <div class=\"hl-foot\">\n     <button class=\"hl-btn\" type=\"button\" id=\"heroLoopBtn\" aria-pressed=\"false\"\n             aria-controls=\"heroLoop\" data-play=\"Abspielen\" data-pause=\"Pause\">\n      <svg class=\"hl-stop\" viewBox=\"0 0 24 24\" 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>\n      <svg class=\"hl-play\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 5l12 7-12 7z\"><\/path><\/svg>\n      <span class=\"hl-lab\">Pause<\/span>\n     <\/button>\n    <\/div>\n   <\/div>\n  <\/div>\n<\/div>\n\n<!-- ---- die Logoleiste, gleicher Grund, keine Naht ---- -->\n<div class=\"proofband\">\n  <div class=\"wrap\">\n    <div class=\"hero-proof\">\n      <input type=\"checkbox\" id=\"lmqPause\" class=\"lmq-pause-cb\">\n      <div class=\"lmq-head\"><p class=\"logos-strip__title\" id=\"trustedByTitle\">Weltweit f\u00fchrende Unternehmen vertrauen uns<\/p><label for=\"lmqPause\" class=\"lmq-toggle\"><span class=\"lmq-btn\" aria-hidden=\"true\"><svg class=\"lt-ic lt-ic--pause\" viewBox=\"0 0 24 24\"><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><svg class=\"lt-ic lt-ic--play\" viewBox=\"0 0 24 24\"><path d=\"M7 5l12 7-12 7z\"><\/path><\/svg><\/span><span class=\"lt-label kvg-vh\"><\/span><\/label><\/div>\n      <div class=\"lmq\" role=\"group\" aria-labelledby=\"trustedByTitle\">\n        <div class=\"lmq-viewport\">\n          <ul class=\"lmq-track\"><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-wayfair-white.png\" alt=\"Wayfair\" width=\"182\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-wb-white.png\" alt=\"Warner Bros.\" width=\"71\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-myheritage-white.png\" alt=\"MyHeritage\" width=\"284\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-gameloft-white.png\" alt=\"Gameloft\" width=\"257\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-burdaforward-white.png\" alt=\"BurdaForward\" width=\"298\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-coca-cola-white.png\" alt=\"Coca-Cola\" width=\"196\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/AWS-2.png\" alt=\"AWS\" width=\"107\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/Microsoft.png\" alt=\"Microsoft\" width=\"297\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-reddit-white.png\" alt=\"Reddit\" width=\"206\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-shell-white.png\" alt=\"Shell\" width=\"217\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-convo-ai-white.png\" alt=\"Convo.ai\" width=\"276\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-signit-white.png\" alt=\"Singit\" width=\"229\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><\/ul>\n          <ul class=\"lmq-track\" aria-hidden=\"true\"><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-wayfair-white.png\" alt=\"\" aria-hidden=\"true\" width=\"182\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-wb-white.png\" alt=\"\" aria-hidden=\"true\" width=\"71\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-myheritage-white.png\" alt=\"\" aria-hidden=\"true\" width=\"284\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-gameloft-white.png\" alt=\"\" aria-hidden=\"true\" width=\"257\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-burdaforward-white.png\" alt=\"\" aria-hidden=\"true\" width=\"298\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-coca-cola-white.png\" alt=\"\" aria-hidden=\"true\" width=\"196\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/AWS-2.png\" alt=\"\" aria-hidden=\"true\" width=\"107\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/Microsoft.png\" alt=\"\" aria-hidden=\"true\" width=\"297\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-reddit-white.png\" alt=\"\" aria-hidden=\"true\" width=\"206\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-shell-white.png\" alt=\"\" aria-hidden=\"true\" width=\"217\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-convo-ai-white.png\" alt=\"\" aria-hidden=\"true\" width=\"276\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><li><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2024\/09\/logo-signit-white.png\" alt=\"\" aria-hidden=\"true\" width=\"229\" height=\"80\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\"><\/li><\/ul>\n        <\/div>\n      <\/div>\n      \n    <\/div>\n  <\/div>\n<\/div>\n<\/section>\n\n<!-- ==================== BLOCK 2 - VALUE PROPS + LOGOS ==================== -->\n<section class=\"vprops\">\n  <div class=\"wrap\">\n    <h2 class=\"kvg-vh\">Skalierbarkeit, Sicherheit und Integration<\/h2>\n    <div class=\"vp-grid\">\n      <div class=\"vp-tile\" 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=\"M3 17l6-6 4 4 8-8\"><\/path><path d=\"M14 7h7v7\"><\/path><\/svg><\/div>\n        <h3>Skalierbarkeit<\/h3>\n        <p>Erstelle, aktualisiere und lokalisiere gro\u00dfe Mengen an Videos, ohne die Produktion jedes Mal von vorne beginnen zu m\u00fcssen.<\/p>\n      <\/div>\n      <div class=\"vp-tile\" data-reveal style=\"--rd:80ms\">\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>Sicherheit<\/h3>\n        <p>Sch\u00fctze Unternehmensinhalte und Nutzerdaten mit Sicherheits- und Kontrollfunktionen auf Enterprise-Niveau.<\/p>\n      <\/div>\n      <div class=\"vp-tile\" data-reveal style=\"--rd:160ms\">\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=\"M9 3H5a2 2 0 0 0-2 2v4\"><\/path><path d=\"M15 3h4a2 2 0 0 1 2 2v4\"><\/path><path d=\"M9 21H5a2 2 0 0 1-2-2v-4\"><\/path><path d=\"M15 21h4a2 2 0 0 0 2-2v-4\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg><\/div>\n        <h3>Integration<\/h3>\n        <p>Verbinde die Videoerstellung mit bestehenden Plattformen, Systemen und automatisierten Workflows.<\/p>\n      <\/div>\n    <\/div>\n\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=\"Seitenbereiche\">\n    <span class=\"seg-ind\" aria-hidden=\"true\"><\/span>\n    <a href=\"#warum\">Warum D-ID<\/a>\n    <a href=\"#agentic\">Agentic Videos<\/a>\n    <a href=\"#so-gehts\">So geht&#8217;s<\/a>\n    <a href=\"#anwendungsfaelle\">Anwendungsf&auml;lle<\/a>\n    <a href=\"#enterprise\">Enterprise-Einsatz<\/a>\n    <a href=\"#faq\">FAQ<\/a>\n  <\/nav>\n<\/div>\n\n<!-- ==================== BLOCK 4 - WHY ==================== -->\n<section class=\"block\" id=\"warum\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <h2>Warum entscheiden sich Unternehmen f&uuml;r D-ID?<\/h2>\n      <p>Unternehmensvideos sind selten ein einmaliges Projekt. Unternehmen m&uuml;ssen Inhalte f&uuml;r verschiedene Abteilungen produzieren, sie bei &Auml;nderungen aktualisieren, f&uuml;r internationale Zielgruppen &uuml;bersetzen und mit bestehenden Systemen verbinden.<\/p>\n      <p>D-ID vereint diese Anforderungen auf einer zentralen KI-Videoplattform.<\/p>\n    <\/div>\n    <!-- Studio hotspot panel (2026-08-10): the original page's Screen_UI composite,\n         reframed with our own hotspot labels. Labels live inside the buttons, so each\n         button's accessible name is its label regardless of visual state. -->\n    <figure class=\"studio-shot\" data-reveal>\n      <img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/Screen_UI.png\" width=\"1920\" height=\"1080\" loading=\"lazy\" decoding=\"async\" alt=\"D-ID Studio auf einem Desktop-Monitor: Skript- und Szenen-Editor, Avatar-Fl&auml;che, Hintergrund-Galerie und Szenen-Timeline\">\n      <button type=\"button\" class=\"shot-hot\" style=\"--x:48%;--y:44%\"><span class=\"shot-dot\" aria-hidden=\"true\"><\/span><span class=\"shot-tip\">Aus dem Skript wird eine Presenter-Szene<\/span><\/button>\n      <button type=\"button\" class=\"shot-hot\" style=\"--x:64%;--y:41%\"><span class=\"shot-dot\" aria-hidden=\"true\"><\/span><span class=\"shot-tip\">Stock-Avatar oder eigener Presenter<\/span><\/button>\n      <button type=\"button\" class=\"shot-hot shot-hot--up\" style=\"--x:55%;--y:64%\"><span class=\"shot-dot\" aria-hidden=\"true\"><\/span><span class=\"shot-tip\">Dasselbe Video in &uuml;ber 120 Sprachen<\/span><\/button>\n      <button type=\"button\" class=\"shot-hot\" style=\"--x:31%;--y:47%\"><span class=\"shot-dot\" aria-hidden=\"true\"><\/span><span class=\"shot-tip\">Szenen im eigenen Branding gestalten<\/span><\/button>\n    <\/figure>\n    <div class=\"why-grid\">\n      <div class=\"card card--wide\" 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=\"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><\/div>\n        <h3>Professionelle Videos mit KI-Avataren<\/h3>\n        <div class=\"card-body\">\n          <p>D-ID verwandelt Skripte, Pr&auml;sentationen, Dokumente, Bilder und Audiodateien in Videos mit digitalen Presentern. F&uuml;r neue Botschaften ist dadurch nicht jedes Mal eine neue Aufnahme erforderlich.<\/p>\n          <p>Unternehmen k&ouml;nnen die realistischen Expressive Avatars von D-ID verwenden oder eigene Presenter f&uuml;r wiederkehrende Trainings-, Produkt-, Vertriebs- und Kommunikationsinhalte erstellen.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"card\" data-reveal style=\"--rd:80ms\">\n        <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=\"12\" r=\"9\"><\/circle><path d=\"M3 12h18\"><\/path><path d=\"M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18\"><\/path><\/svg><\/div>\n        <h3>Mehrsprachige Videos in gro&szlig;em Umfang<\/h3>\n        <p>D-ID unterst&uuml;tzt mehr als 120 Sprachen und Akzente. Teams k&ouml;nnen lokalisierte Versionen erstellen und dabei den Presenter, das visuelle Format und die freigegebene Botschaft konsistent halten.<\/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=\"M16 18l6-6-6-6\"><\/path><path d=\"M8 6l-6 6 6 6\"><\/path><\/svg><\/div>\n        <h3>F&uuml;r Business-Teams und Entwickler<\/h3>\n        <p>Business-Teams k&ouml;nnen Videos direkt im <a href=\"https:\/\/studio.d-id.com\/\">D-ID Studio<\/a> erstellen. Entwickler k&ouml;nnen die API nutzen, um die Videoerstellung zu automatisieren und in bestehende Anwendungen und Workflows zu integrieren.<\/p>\n      <\/div>\n      <div class=\"card\" data-reveal style=\"--rd:80ms\">\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=\"M21 11.5a8.38 8.38 0 0 1-8.5 8.5c-1.6 0-3.1-.4-4.4-1.2L3 20l1.2-5.1A8.38 8.38 0 0 1 12.5 3a8.38 8.38 0 0 1 8.5 8.5z\"><\/path><\/svg><\/div>\n        <h3>Interaktive Videos, wenn lineare Inhalte nicht ausreichen<\/h3>\n        <p>Mit <a href=\"https:\/\/www.d-id.com\/de\/ki-agenten\/\">D-ID Agentic Videos<\/a> k&ouml;nnen Zuschauer w&auml;hrend des Videos per Sprache oder Chat Fragen stellen. Unternehmen k&ouml;nnen so kontrollierte Kommunikation mit individuellen Erkl&auml;rungen in Echtzeit verbinden.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 5 - AGENTIC ==================== -->\n<section class=\"block agentic\" id=\"agentic\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <span class=\"eyebrow\">Agentic Video<\/span>\n      <h2>Verwandle KI-Videos in Konversationen<\/h2>\n      <p>Bei klassischen KI-Videos sieht der Zuschauer das fertige Video &ndash; danach endet die Kommunikation.<\/p>\n      <p>Mit Agentic Video macht D-ID KI-Videos zu interaktiven Erlebnissen.<\/p>\n    <\/div>\n    <div class=\"ag-grid\">\n      <div data-reveal>\n        <h3>Was w&auml;re, wenn Zuschauer deinem Video Fragen stellen k&ouml;nnten?<\/h3>\n        <p>Agentic Video kombiniert Videoinhalte mit einem visuellen KI-Agenten in Echtzeit. W&auml;hrend oder nach dem Video k&ouml;nnen Zuschauer per Sprache oder Chat Fragen stellen und Antworten auf Basis der Videoinhalte und des verkn&uuml;pften Wissens erhalten.<\/p>\n      <\/div>\n      <div data-reveal style=\"--rd:100ms\">\n        <p class=\"ag-lead\">Das ist zum Beispiel hilfreich, wenn:<\/p>\n        <ul class=\"ag-list\">\n          <li><span class=\"li-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10L12 5 2 10l10 5z\"><\/path><path d=\"M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5\"><\/path><\/svg><\/span>Lernende eine zus&auml;tzliche Erkl&auml;rung brauchen<\/li>\n          <li><span class=\"li-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"><\/circle><path d=\"M21 21l-4.3-4.3\"><\/path><\/svg><\/span>Interessenten Fragen zu einem Produkt oder Service haben<\/li>\n          <li><span class=\"li-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.6-3 2.6\"><\/path><path d=\"M12 17h.01\"><\/path><\/svg><\/span>Kunden bei einem Schritt in einem Tutorial nicht weiterkommen<\/li>\n          <li><span class=\"li-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"9\" cy=\"8\" r=\"3.5\"><\/circle><path d=\"M2.5 20c.8-3.2 3.4-5 6.5-5s5.7 1.8 6.5 5\"><\/path><circle cx=\"17.5\" cy=\"9.5\" r=\"2.5\"><\/circle><path d=\"M16.5 15.2c2.4.3 4.3 1.8 5 4.3\"><\/path><\/svg><\/span>Mitarbeitende R&uuml;ckfragen zu einem Prozess oder einer Richtlinie haben<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n    <p class=\"ag-close\" data-reveal>Statt f&uuml;r jede m&ouml;gliche Frage ein weiteres Video zu erstellen, wird das urspr&uuml;ngliche Video zum Ausgangspunkt f&uuml;r einen interaktiven Dialog.<\/p>\n    <!-- Live Agentic Video demo, restaged full width 2026-08-18 on stakeholder feedback:\n         the split-column tile rendered the one thing this section sells at card size.\n         Rides its OWN working client key. On claude.ai previews the frame runtime lets\n         the widget mount but never play, painting black over the poster, so mounting is\n         gated off there in the embed IIFE and the poster holds; judge the live widget on\n         a real server or the published page. -->\n    <figure class=\"ag-stage\" data-agentic data-reveal\n            data-av-key=\"Z29vZ2xlLW9hdXRoMnwxMDIzMzEzNDM5MzkyNzY3MDQ2MTM6N2xBLVJRc2hpdUZyZXRQbnhnN0ds\"\n            data-av-id=\"agv_kyfbN1PjsE5g330eIaHN1\"\n            data-av-label=\"Agentic Video Beispiel: ein interaktiver KI-Presenter, der Fragen von Zuschauern beantwortet, erstellt mit D-ID\">\n      <img class=\"uc-av-poster\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-agentic-demo-poster.jpg\" alt=\"\" aria-hidden=\"true\" width=\"1280\" height=\"720\" loading=\"eager\" fetchpriority=\"low\" decoding=\"async\">\n      <div id=\"didAgenticShowcase\" class=\"uc-agentic-mount\"><\/div>\n      <figcaption class=\"kvg-tag\">Agentic Video Beispiel<\/figcaption>\n    <\/figure>\n    <div class=\"trust-cta\" data-reveal>\n      <a href=\"https:\/\/www.d-id.com\/de\/agentic-videos\/\" class=\"btn btn-primary\">Agentic Video entdecken<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 5a - HOW-TO STEPS ==================== -->\n<section class=\"block howto\" id=\"so-gehts\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <h2>Wie entsteht ein KI-Video in D-ID Studio?<\/h2>\n      <p>Vom Skript zum fertigen Video in vier Schritten, ganz ohne Kamera, Crew oder Nachdrehs.<\/p>\n    <\/div>\n    <!-- The baked \"Step 0N\" chips in the screenshots carry the numbering visually;\n         the ordered list carries it semantically. Screenshots show the English UI:\n         acceptable, the live product is English-first. -->\n    <ol class=\"steps-grid\">\n      <li class=\"step\" data-reveal>\n        <img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/step-1-choose-template.png\" width=\"600\" height=\"600\" loading=\"lazy\" decoding=\"async\" alt=\"Vorlagen-Galerie in D-ID Studio, der erste Schritt im KI-Video-Generator-Workflow\">\n        <h3>Vorlage w&auml;hlen oder leer starten<\/h3>\n        <p>Vorlagen halten wiederkehrende Formate konsistent; die leere Arbeitsfl&auml;che l&auml;sst dir freie Hand.<\/p>\n      <\/li>\n      <li class=\"step\" data-reveal style=\"--rd:80ms\">\n        <img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/step-2-add-script.png\" width=\"600\" height=\"600\" loading=\"lazy\" decoding=\"async\" alt=\"Skript-Editor in D-ID Studio mit Upload-Option f&uuml;r Voiceover\">\n        <h3>Skript schreiben oder Voiceover hochladen<\/h3>\n        <p>F&uuml;ge freigegebenen Text ein oder nutze eine vorhandene Sprachaufnahme; der Presenter spricht ihn.<\/p>\n      <\/li>\n      <li class=\"step\" data-reveal style=\"--rd:160ms\">\n        <img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/step-3-choose-avatar.png\" width=\"600\" height=\"600\" loading=\"lazy\" decoding=\"async\" alt=\"Avatar-Auswahl mit Stimmungsreglern pro Szene in D-ID Studio\">\n        <h3>Presenter ausw&auml;hlen und Tonalit&auml;t festlegen<\/h3>\n        <p>W&auml;hle einen Stock- oder Custom-Avatar und passe die Wirkung Szene f&uuml;r Szene an.<\/p>\n      <\/li>\n      <li class=\"step\" data-reveal style=\"--rd:240ms\">\n        <img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/07\/step-4-customize.png\" width=\"600\" height=\"600\" loading=\"lazy\" decoding=\"async\" alt=\"Branding-Bereich in D-ID Studio zur Anpassung von Farben und Layouts\">\n        <h3>Branding anwenden und exportieren<\/h3>\n        <p>Passe Farben, Medien und Layouts an und rendere Versionen f&uuml;r jeden Markt.<\/p>\n      <\/li>\n    <\/ol>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 6 - USE CASES ==================== -->\n<section class=\"block uc\" id=\"use-cases\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <h2>KI-Videos f&uuml;r deine wichtigsten Anwendungsf&auml;lle<\/h2>\n      <p>Nutze den KI-Video-Generator von D-ID f&uuml;r wiederkehrende Kommunikation in Learning &amp; Development, Marketing, Sales, Support und internen Teams.<\/p>\n    <\/div>\n\n    <div class=\"uc-shell uc-shell--five\" data-reveal>\n      <div class=\"uc-roster\" role=\"tablist\" aria-label=\"Use cases\">\n        <button class=\"uc-card\" id=\"ucTab1\" role=\"tab\" aria-selected=\"true\" aria-controls=\"ucPanel1\" type=\"button\"><span class=\"pf\"><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-training-onboarding-face.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"120\"><\/span><span class=\"uc-card-lbl\">Learning &amp; Development<\/span><\/button>\n        <button class=\"uc-card\" id=\"ucTab2\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ucPanel2\" tabindex=\"-1\" type=\"button\"><span class=\"pf\"><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-marketing-face.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"120\"><\/span><span class=\"uc-card-lbl\">Marketing<\/span><\/button>\n        <button class=\"uc-card\" id=\"ucTab3\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ucPanel3\" tabindex=\"-1\" type=\"button\"><span class=\"pf\"><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-sales-enablement-face.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"120\"><\/span><span class=\"uc-card-lbl\">Sales<\/span><\/button>\n        <button class=\"uc-card\" id=\"ucTab4\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ucPanel4\" tabindex=\"-1\" type=\"button\"><span class=\"pf\"><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-product-education-face.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"120\"><\/span><span class=\"uc-card-lbl\">Produktschulung und Kundensupport<\/span><\/button>\n        <button class=\"uc-card\" id=\"ucTab5\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ucPanel5\" tabindex=\"-1\" type=\"button\"><span class=\"pf\"><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-internal-comms-face.jpg\" alt=\"\" loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"120\"><\/span><span class=\"uc-card-lbl\">Interne Kommunikation<\/span><\/button>\n      <\/div>\n      <div class=\"uc-panel is-on\" id=\"ucPanel1\" role=\"tabpanel\" aria-labelledby=\"ucTab1\" tabindex=\"0\"><figure class=\"uc-media\" data-agentic\n                  data-av-key=\"YXV0aDB8NjhjYTdmNmVlMTAxOTQyNTZjOTg5ZDM1OlVaTkk0RjZBMF85RlV4cEg0NU92Mw==\"\n                  data-av-id=\"agv_EeYRNtp_pvE6MrXFyvAFb\"\n                  data-av-label=\"Beispielvideo: ein KI-Presenter mit einem Onboarding-Programm f&uuml;r Mitarbeitende, created with D-ID's AI video generator\"\n                  data-captions=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-training-onboarding-en.vtt\">\n            <img class=\"uc-av-poster\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-training-onboarding-poster.jpg\" alt=\"\" aria-hidden=\"true\" width=\"1280\" height=\"720\" loading=\"lazy\" decoding=\"async\">\n            <div id=\"didAgenticOnboarding\" class=\"uc-agentic-mount\"><\/div>\n            <figcaption class=\"kvg-tag\">Agentic Video Beispiel<\/figcaption>\n          <\/figure><div class=\"uc-copy\"><h3>Learning &amp; Development<\/h3>\n            <p>Verwandle Trainingsmaterialien, Pr&auml;sentationen, Richtlinien und bestehende Lerninhalte in ansprechende KI-Videos mit realistischen digitalen Avataren.<\/p>\n            <p>Erstelle Videos f&uuml;r Onboarding, Compliance, Skill-Training und Wissensaustausch, die sich einfach aktualisieren und f&uuml;r verschiedene Teams und Regionen lokalisieren lassen. Mit Agentic Video k&ouml;nnen Lernende au&szlig;erdem Fragen stellen und zus&auml;tzliche Erkl&auml;rungen erhalten, w&auml;hrend sie lernen.<\/p>\n          <\/div><\/div>\n      <div class=\"uc-panel\" id=\"ucPanel2\" role=\"tabpanel\" aria-labelledby=\"ucTab2\" tabindex=\"0\"><figure class=\"uc-media\" data-agentic\n                  data-av-key=\"YXV0aDB8NjhjYTdmNmVlMTAxOTQyNTZjOTg5ZDM1OlVaTkk0RjZBMF85RlV4cEg0NU92Mw==\"\n                  data-av-id=\"agv_eEnDgSqfwkt2muN4exdiJ\"\n                  data-av-label=\"Beispielvideo: ein KI-Presenter mit einem Produktmarketing-Video f&uuml;r ein fiktives Task-Manager, created with D-ID's AI video generator\"\n                  data-captions=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-marketing-en.vtt\">\n            <img class=\"uc-av-poster\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-marketing-poster.jpg\" alt=\"\" aria-hidden=\"true\" width=\"1280\" height=\"720\" loading=\"lazy\" decoding=\"async\">\n            <div id=\"didAgenticMarketing\" class=\"uc-agentic-mount\"><\/div>\n            <figcaption class=\"kvg-tag\">Agentic Video Beispiel<\/figcaption>\n          <\/figure><div class=\"uc-copy\"><h3>Marketing<\/h3>\n            <p>Erstelle KI-Videos f&uuml;r Kampagnen, Produktlaunches, Social Media, Erkl&auml;rvideos und personalisierte Videobotschaften, ohne f&uuml;r jedes Asset eine neue Produktion organisieren zu m&uuml;ssen.<\/p>\n            <p>Passe Botschaften, Avatare, Sprachen und Visuals an verschiedene Zielgruppen, Kan&auml;le und M&auml;rkte an. Mit Agentic Video k&ouml;nnen Zuschauer zudem direkt im Video Fragen stellen.<\/p>\n          <\/div><\/div>\n      <div class=\"uc-panel\" id=\"ucPanel3\" role=\"tabpanel\" aria-labelledby=\"ucTab3\" tabindex=\"0\"><figure class=\"uc-media\" data-agentic\n                  data-av-key=\"YXV0aDB8NjhjYTdmNmVlMTAxOTQyNTZjOTg5ZDM1OlVaTkk0RjZBMF85RlV4cEg0NU92Mw==\"\n                  data-av-id=\"agv_bzcv7IXRZFzoAA2QXVrQV\"\n                  data-av-label=\"Beispielvideo: ein KI-Presenter mit einem Sales-Enablement-Briefing, created with D-ID's AI video generator\"\n                  data-captions=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-sales-enablement-en.vtt\">\n            <img class=\"uc-av-poster\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-sales-enablement-poster.jpg\" alt=\"\" aria-hidden=\"true\" width=\"1280\" height=\"720\" loading=\"lazy\" decoding=\"async\">\n            <div id=\"didAgenticSales\" class=\"uc-agentic-mount\"><\/div>\n            <figcaption class=\"kvg-tag\">Agentic Video Beispiel<\/figcaption>\n          <\/figure><div class=\"uc-copy\"><h3>Sales<\/h3>\n            <p>Erstelle Videos mit KI-Avataren f&uuml;r Prospecting, Produkterkl&auml;rungen, Follow-ups und Sales Enablement.<\/p>\n            <p>Passe einzelne Versionen an Branchen, Buyer-Rollen oder unterschiedliche Phasen im Vertriebsprozess an. Mit Agentic Video k&ouml;nnen Interessenten direkt Fragen zu Produkten und Angeboten stellen und genau die Informationen erhalten, die f&uuml;r sie relevant sind.<\/p>\n          <\/div><\/div>\n      <div class=\"uc-panel\" id=\"ucPanel4\" role=\"tabpanel\" aria-labelledby=\"ucTab4\" tabindex=\"0\"><figure class=\"uc-media\" data-agentic\n                  data-av-key=\"YXV0aDB8NjhjYTdmNmVlMTAxOTQyNTZjOTg5ZDM1OlVaTkk0RjZBMF85RlV4cEg0NU92Mw==\"\n                  data-av-id=\"agv_RvU3KhNp4w5JTP1Zklh9m\"\n                  data-av-label=\"Beispielvideo: ein KI-Presenter, der ein Produkt-Feature erkl&auml;rt, created with D-ID's AI video generator\"\n                  data-captions=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-product-education-en.vtt\">\n            <img class=\"uc-av-poster\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-product-education-poster.jpg\" alt=\"\" aria-hidden=\"true\" width=\"1280\" height=\"720\" loading=\"lazy\" decoding=\"async\">\n            <div id=\"didAgenticProductEd\" class=\"uc-agentic-mount\"><\/div>\n            <figcaption class=\"kvg-tag\">Agentic Video Beispiel<\/figcaption>\n          <\/figure><div class=\"uc-copy\"><h3>Produktschulung und Kundensupport<\/h3>\n            <p>Verwandle Hilfeartikel, FAQs, Tutorials und Produktdokumentationen in visuelle Inhalte, die Kunden durch Produkte und Prozesse f&uuml;hren.<\/p>\n            <p>Mit Agentic Video k&ouml;nnen Kunden direkt R&uuml;ckfragen stellen, einzelne Schritte kl&auml;ren und passende Antworten erhalten, ohne nach weiteren Support-Inhalten suchen zu m&uuml;ssen.<\/p>\n          <\/div><\/div>\n      <div class=\"uc-panel\" id=\"ucPanel5\" role=\"tabpanel\" aria-labelledby=\"ucTab5\" tabindex=\"0\"><figure class=\"uc-media\" data-agentic\n                  data-av-key=\"YXV0aDB8NjhjYTdmNmVlMTAxOTQyNTZjOTg5ZDM1OlVaTkk0RjZBMF85RlV4cEg0NU92Mw==\"\n                  data-av-id=\"agv_Rmdd0BqyEFnKT0u3l0xtE\"\n                  data-av-label=\"Beispielvideo: ein KI-Presenter mit einem internen Unternehmens-Update, created with D-ID's AI video generator\"\n                  data-captions=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-internal-comms-en.vtt\">\n            <img class=\"uc-av-poster\" src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ai-video-generator-internal-comms-poster.jpg\" alt=\"\" aria-hidden=\"true\" width=\"1280\" height=\"720\" loading=\"lazy\" decoding=\"async\">\n            <div id=\"didAgenticInternal\" class=\"uc-agentic-mount\"><\/div>\n            <figcaption class=\"kvg-tag\">Agentic Video Beispiel<\/figcaption>\n          <\/figure><div class=\"uc-copy\"><h3>Interne Kommunikation<\/h3>\n            <p>Erstelle KI-Videos f&uuml;r Unternehmens-Updates, Prozess&auml;nderungen, Ank&uuml;ndigungen und den internen Wissensaustausch.<\/p>\n            <p>Nutze einen einheitlichen KI-Avatar und erstelle zus&auml;tzliche Sprachversionen, ohne dass eine Person jede Version neu aufnehmen muss. Bei komplexeren Themen k&ouml;nnen Mitarbeitende mit Agentic Video au&szlig;erdem direkt Fragen zu Richtlinien, Prozessen oder Unternehmensinformationen stellen.<\/p>\n          <\/div><\/div>\n    <\/div>\n    <div class=\"uc-links\" data-reveal>\n      <span class=\"uc-links-lbl\">L&ouml;sungen entdecken:<\/span>\n      <a href=\"https:\/\/www.d-id.com\/de\/elearning-und-corporate-training-talking-heads\/\">Learning &amp; Development<\/a>\n      <a href=\"https:\/\/www.d-id.com\/de\/marketing-suite\/\">Marketing<\/a>\n      <a href=\"https:\/\/www.d-id.com\/de\/sales-loesungen\/\">Sales<\/a>\n      <a href=\"https:\/\/www.d-id.com\/de\/customer-experience\/\">Customer Experience<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 7 - ENTERPRISE TRUST ==================== -->\n<section class=\"block trust\" id=\"enterprise\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <span class=\"eyebrow\">Enterprise-Einsatz<\/span>\n      <h2>Vom ersten Tag an bereit f&uuml;r den <span class=\"accent-rust\" style=\"color:var(--orange)\">Enterprise-Einsatz<\/span><\/h2>\n      <p>Sicherheit, Governance und weltweite Zuverl&auml;ssigkeit sind in allen Bereichen der Plattform fest verankert.<\/p>\n    <\/div>\n    <div class=\"badges\">\n      <!-- The lead panel, mirroring the English structure exactly: bcard--cert spans the\n           row, its two grid children are the copy and the credential plates. A compliance\n           officer scanning this section is looking for three names first. -->\n      <div class=\"bcard bcard--cert\" data-reveal>\n        <div>\n          <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>\n          <h3>Zertifiziert und auf Compliance ausgerichtet<\/h3>\n          <p>An ISO 27001, TISAX und SOC 2 ausgerichtet und vollst&auml;ndig <a href=\"https:\/\/eur-lex.europa.eu\/legal-content\/DE\/TXT\/?uri=CELEX:32016R0679\" target=\"_blank\" rel=\"noopener\">DSGVO<\/a>-konform. So bleiben deine Daten gesch&uuml;tzt und deine Rechts- und Sicherheitsteams k&ouml;nnen sich auf verl&auml;ssliche Standards verlassen.<\/p>\n        <\/div>\n        <ul class=\"creds\">\n          <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M20 6L9 17l-5-5\"><\/path><\/svg>SOC 2<\/li>\n          <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M20 6L9 17l-5-5\"><\/path><\/svg>ISO 27001<\/li>\n          <li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M20 6L9 17l-5-5\"><\/path><\/svg>DSGVO<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"bcard\" data-reveal style=\"--rd:80ms\">\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>Datenschutz, auf den du dich verlassen kannst<\/h3>\n        <p>Deine Videos, Skripte, Dokumente und Avatare bleiben dein Eigentum. Wir verwenden deine Inhalte niemals zum Trainieren unserer Modelle. Alle Daten werden sowohl bei der &Uuml;bertragung als auch bei der Speicherung verschl&uuml;sselt.<\/p>\n      <\/div>\n      <div class=\"bcard\" data-reveal style=\"--rd:160ms\">\n        <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=\"12\" r=\"9\"><\/circle><path d=\"M3 12h18\"><\/path><path d=\"M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18\"><\/path><\/svg><\/div>\n        <h3>F&uuml;r den weltweiten Einsatz entwickelt<\/h3>\n        <p>Eine sichere, verteilte Infrastruktur sorgt f&uuml;r schnelle Performance und hohe Verf&uuml;gbarkeit f&uuml;r Teams auf der ganzen Welt, unabh&auml;ngig davon, ob du zehn oder 10.000 Videos erstellst.<\/p>\n      <\/div>\n      <div class=\"bcard\" 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\"><circle cx=\"9\" cy=\"8\" r=\"3.5\"><\/circle><path d=\"M2.5 20c.8-3.2 3.4-5 6.5-5s5.7 1.8 6.5 5\"><\/path><circle cx=\"17.5\" cy=\"9.5\" r=\"2.5\"><\/circle><path d=\"M16.5 15.2c2.4.3 4.3 1.8 5 4.3\"><\/path><\/svg><\/div>\n        <h3>Governance und Kontrolle f&uuml;r jedes Team<\/h3>\n        <p>Rollenbasierte Berechtigungen, verbindliche Markenvorgaben, gemeinsam genutzte Asset-Bibliotheken und Administrationsfunktionen sorgen daf&uuml;r, dass Inhalte im gesamten Unternehmen sicher, konsistent und regelkonform erstellt werden.<\/p>\n      <\/div>\n      <div class=\"bcard\" data-reveal style=\"--rd:80ms\">\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 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>\n        <h3>KI, die du sicher einsetzen kannst<\/h3>\n        <p>Klare Regeln f&uuml;r das Eigentum an Inhalten, eine verantwortungsvolle Avatar-Erstellung und strenge Datenschutzkontrollen erm&ouml;glichen den sicheren Einsatz f&uuml;r sensible Anwendungsf&auml;lle und in regulierten Branchen.<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"trust-cta\" data-reveal>\n      <a href=\"https:\/\/studio.d-id.com\/\" class=\"btn btn-primary\">Jetzt loslegen<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 8a - G2 CREDENTIAL RIBBON ==================== -->\n<section class=\"gband\">\n  <div class=\"wrap gband__in\">\n    <div class=\"gband__rate\">\n      <span class=\"gband__stars\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5 7.3 14.03 2.6 9.45l6.5-.95z\"><\/path><\/svg><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5 7.3 14.03 2.6 9.45l6.5-.95z\"><\/path><\/svg><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5 7.3 14.03 2.6 9.45l6.5-.95z\"><\/path><\/svg><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5 7.3 14.03 2.6 9.45l6.5-.95z\"><\/path><\/svg><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><defs><linearGradient id=\"kvgHalf\"><stop offset=\"50%\" stop-color=\"currentColor\"><\/stop><stop offset=\"50%\" stop-color=\"currentColor\" stop-opacity=\".28\"><\/stop><\/linearGradient><\/defs><path fill=\"url(#kvgHalf)\" d=\"M12 2.6l2.9 5.9 6.5.95-4.7 4.58 1.11 6.47L12 17.44 6.19 20.5 7.3 14.03 2.6 9.45l6.5-.95z\"><\/path><\/svg><\/span>\n      <p class=\"gband__claim\">Mit 4,6 von 5 auf G2 bewertet<\/p>\n      <p class=\"gband__link\"><a href=\"https:\/\/www.g2.com\/products\/d-id\/reviews\" target=\"_blank\" rel=\"noopener noreferrer\">Unsere G2-Bewertungen ansehen<\/a><\/p>\n    <\/div>\n    <div class=\"gband__badges\"><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/06\/G2-Badges-Summer-2026-Combined-v3.png\" alt=\"D-ID G2-Auszeichnungen Sommer 2026: Leader bei KI-Video-Generatoren, High Performer bei Course Authoring, Easiest Setup f&uuml;r Small Business bei KI-Avatar-Generatoren, Regional Leader EMEA bei Synthetic Media\" loading=\"lazy\" decoding=\"async\"><img src=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/g2-badge-users-love-us.png\" alt=\"G2-Auszeichnung Users Love Us\" width=\"257\" height=\"423\" loading=\"lazy\" decoding=\"async\"><\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 8 - FAQ ==================== -->\n<section class=\"block faq\" id=\"faq\">\n  <div class=\"wrap\">\n    <div class=\"center\" data-reveal>\n      <h2>H&auml;ufig gestellte Fragen<\/h2>\n    <\/div>\n    <div class=\"faq-list\" data-reveal>\n      <details open=\"\">\n        <summary>Warum sollte sich ein Unternehmen f&uuml;r D-ID als KI-Video-Generator entscheiden?<\/summary>\n        <p>D-ID verbindet die professionelle Erstellung von Videos mit KI-Avataren mit mehrsprachigen Funktionen, flexiblen Studio- und API-Workflows, Enterprise-Sicherheit und Agentic Videos. Unternehmen k&ouml;nnen Videoinhalte effizient &uuml;ber Abteilungen, Systeme, Zielgruppen und internationale M&auml;rkte hinweg erstellen, aktualisieren, lokalisieren, automatisieren und integrieren.<\/p>\n      <\/details>\n      <details>\n        <summary>Kann D-ID Gesch&auml;ftsdokumente in Videos umwandeln?<\/summary>\n        <p>Ja. Teams k&ouml;nnen Skripte, Pr&auml;sentationen, Dokumente, Bilder und Audiodateien in Videos mit digitalen Presentern verwandeln. So lassen sich vorhandenes Unternehmenswissen, Schulungsmaterialien und Kommunikationsinhalte wiederverwenden, ohne jede Botschaft neu aufzubauen oder jedes Video als separate Produktion entwickeln zu m&uuml;ssen.<\/p>\n      <\/details>\n      <details>\n        <summary>K&ouml;nnen Unternehmen mit D-ID einen eigenen KI-Presenter erstellen?<\/summary>\n        <p>Ja. Unternehmen k&ouml;nnen aus vorhandenen Presentern w&auml;hlen oder autorisierte pers&ouml;nliche und individuelle Avatare erstellen. Derselbe KI-Presenter kann anschlie&szlig;end in unterschiedlichen Videos, Sprachen, Schulungsprogrammen, Onboarding-Materialien und Kommunikationskampagnen eingesetzt werden. So entsteht ein einheitlicher und wiedererkennbarer visueller Auftritt.<\/p>\n      <\/details>\n      <details>\n        <summary>Kann ein D-ID-Video Fragen von Zuschauern beantworten?<\/summary>\n        <p>Ja. Mit D-ID Agentic Videos k&ouml;nnen Zuschauer w&auml;hrend des Videos per Sprache oder Chat Fragen stellen. Der Video-Agent nutzt das Skript und freigegebene zus&auml;tzliche Wissensquellen, um innerhalb derselben Nutzererfahrung relevante Antworten zu geben. Dadurch werden Videos interaktiver und st&auml;rker auf den einzelnen Zuschauer zugeschnitten.<\/p>\n      <\/details>\n      <details>\n        <summary>Warum eignet sich D-ID f&uuml;r international t&auml;tige Unternehmen?<\/summary>\n        <p>D-ID unterst&uuml;tzt mehr als 120 Sprachen und Akzente, wiederverwendbare KI-Presenter, API-Integrationen und Enterprise-Sicherheit. Internationale Teams k&ouml;nnen lokalisierte Videoversionen in gro&szlig;em Umfang erstellen und gleichzeitig ihre Botschaften, ihr Branding, die Identit&auml;t des Presenters und die gesamte Kommunikation &uuml;ber Regionen und Zielgruppen hinweg konsistent halten.<\/p>\n      <\/details>\n      <details>\n        <summary>Kann D-ID in bestehende Unternehmenssoftware integriert werden?<\/summary>\n        <p>Ja. &Uuml;ber die D-ID API lassen sich die KI-Videoerstellung und interaktive Agenten mit Websites, Gesch&auml;ftsanwendungen, Lernplattformen, Content-Management-Systemen, Kundenportalen und automatisierten Workflows verbinden. Unternehmen k&ouml;nnen Videoerstellung und Echtzeitinteraktionen so direkt in bestehende Prozesse und Produkte integrieren.<\/p>\n      <\/details>\n      <details>\n        <summary>Welche Sicherheitsfunktionen sollten Unternehmen ber&uuml;cksichtigen?<\/summary>\n        <p>Unternehmen sollten unter anderem Einwilligungsmanagement, Datenschutz, Zugriffskontrollen, Inhaltsmoderation, Cloud-Sicherheit, KI-Governance und Unterst&uuml;tzung bei der Implementierung pr&uuml;fen. D-ID deckt diese Bereiche mit Kontrollfunktionen auf Enterprise-Niveau sowie anerkannten SOC-2- und ISO-Zertifizierungen ab. Dadurch l&auml;sst sich KI-Video innerhalb bestehender Sicherheits- und Compliance-Anforderungen einsetzen.<\/p>\n      <\/details>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== BLOCK 9 - FINAL CTA ==================== -->\n<section class=\"final\" id=\"cta-final\">\n  <div class=\"wrap final-inner\" data-reveal>\n    <h2>Erstelle professionelle KI-Videos mit lebensechten digitalen Presentern.<\/h2>\n    <p>Verwandle Unternehmensinhalte in mehrsprachige Videos, passe sie an unterschiedliche Zielgruppen an und erm&ouml;gliche Interaktionen in Echtzeit, wenn Zuschauer Fragen haben.<\/p>\n    <div class=\"hero-cta\">\n      <a href=\"https:\/\/studio.d-id.com\/\" class=\"btn btn-primary\">KI-Video erstellen<\/a>\n      <a href=\"https:\/\/www.d-id.com\/de\/kontakt\/\" class=\"btn btn-ghost\">Sprich mit unserem Team<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/div><!-- \/.did-kvg -->\n\n<!-- ==================== BLOCK 10 - 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-kvg');\n  if(!root) return;\n  root.classList.add('js');\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  \/* ---------- STICKY PILL NAV: sliding highlight + scroll-spy + click lock ---------- *\/\n  (function(){\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 anchorEl = root.querySelector('.vprops');\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('cta-final');\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      var naturalTop = anchorEl ? (anchorEl.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        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){\n        a.classList.toggle('active', a === link);\n        if(a === link){ a.setAttribute('aria-current', 'true'); }\n        else { a.removeAttribute('aria-current'); }\n      });\n      moveInd(link);\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    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      var docH = document.documentElement.scrollHeight;\n      if(window.innerHeight + window.pageYOffset >= docH - 2) idx = sections.length - 1;\n      setActive(links[idx]);\n    }\n\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\n  \/* ---------- HERO video (eager, pause control, reduced motion, tab visibility) ---------- *\/\n  (function(){\n    var v = document.getElementById('heroVid');\n    var btn = document.getElementById('heroPause');\n    var icon = document.getElementById('heroPauseIcon');\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 ? 'Video pausieren' : '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\n  \/* ---------- VIDEO TILES: play-on-scroll, pause + sound controls ---------- *\/\n  (function(){\n    var tiles = Array.prototype.slice.call(root.querySelectorAll('[data-tile]'));\n    if(!tiles.length) 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\n    tiles.forEach(function(tile){\n      var v = tile.querySelector('video');\n      if(!v) return;\n      var pauseBtn = tile.querySelector('.kvg-pause');\n      var state = { userPaused: RM, inView: false };\n      tile._kvg = state;\n\n      function panelHidden(){\n        var panel = tile.closest('.uc-panel');\n        if(!panel) return false;\n        if(panel.classList.contains('is-on')) return false;\n        return root.classList.contains('js');\n      }\n      function setPauseUI(playing){\n        if(!pauseBtn) return;\n        pauseBtn.setAttribute('aria-label', playing ? 'Video pausieren' : 'Video abspielen');\n        var svg = pauseBtn.querySelector('svg'); if(svg) svg.innerHTML = playing ? iconPause : iconPlay;\n      }\n      function tryPlay(){\n        if(state.userPaused || panelHidden() || !state.inView || document.hidden) return;\n        var p = v.play();\n        if(p){ if(p.catch) p.catch(function(){}); }\n      }\n      state.tryPlay = tryPlay;\n      state.stop = function(){ try{ v.pause(); }catch(e){} };\n\n      if(pauseBtn){ pauseBtn.addEventListener('click', function(){\n        if(v.paused){ state.userPaused = false; state.inView = true; tryPlay(); }\n        else { state.userPaused = true; v.pause(); }\n      }); }\n      v.addEventListener('play', function(){ setPauseUI(true); });\n      v.addEventListener('pause', function(){ setPauseUI(false); });\n      setPauseUI(false);\n\n      if('IntersectionObserver' in window){\n        var io = new IntersectionObserver(function(entries){\n          entries.forEach(function(en){\n            state.inView = en.isIntersecting;\n            if(en.isIntersecting){ tryPlay(); } else { try{ v.pause(); }catch(e){} }\n          });\n        }, { threshold:0.3 });\n        io.observe(tile);\n      } else if(!RM){ state.inView = true; tryPlay(); }\n    });\n\n    document.addEventListener('visibilitychange', function(){\n      tiles.forEach(function(tile){\n        var st = tile._kvg; if(!st) return;\n        if(document.hidden){ st.stop(); } else { st.tryPlay(); }\n      });\n    });\n  })();\n\n  \/* ---------- USE-CASE ROSTER: presenters are the switcher ----------\n     Selection, keyboard, hover\/focus preview, and swipe. The 9-second auto-advance and\n     its progress arc were removed: a panel that moves while someone is reading is the\n     standing complaint about the pattern, and none of the enterprise pages this was\n     benchmarked against rotate theirs. Nothing here moves on its own now, so WCAG 2.2.2\n     does not apply and no pause control is owed. All four panels stay in the DOM so\n     crawlers and answer engines still read every use case; only visibility is toggled. *\/\n  (function(){\n    var roster = root.querySelector('.uc-roster');\n    if(!roster) return;\n    var cards = Array.prototype.slice.call(roster.querySelectorAll('.uc-card'));\n    var panels = cards.map(function(c){ return document.getElementById(c.getAttribute('aria-controls')); });\n    var host = roster.closest('section');\n    var FINE = window.matchMedia ? window.matchMedia('(hover:hover) and (pointer:fine)').matches : false;\n    var idx = 0, inView = false;\n\n    function faceVid(i){ return cards[i].querySelector('.pf video'); }\n    function playFace(i){\n      var v = faceVid(i); if(!v || RM) return;\n      \/* The preview reuses its panel's own source instead of repeating the URL, so a\n         video is declared once per case (and inlined once in the artifact build). *\/\n      if(!v.src){\n        var pv = panels[i] ? panels[i].querySelector('video') : null;\n        var sEl = pv ? pv.querySelector('source') : null;\n        var s = sEl ? sEl.getAttribute('src') : (pv ? pv.getAttribute('src') : null);\n        if(s) v.src = s;\n      }\n      cards[i].classList.add('previewing');\n      var p = v.play(); if(p){ if(p.catch) p.catch(function(){}); }\n    }\n    function stopFace(i){\n      var v = faceVid(i); if(!v) return;\n      cards[i].classList.remove('previewing');\n      try{ v.pause(); }catch(e){}\n    }\n    function panelTile(i){ return panels[i] ? panels[i].querySelector('[data-tile]') : null; }\n\n\n    \/* PANEL HEIGHT LOCK. The four panels differ by a few lines of copy, and without a\n       floor the shell snaps to each panel's own height on every tab switch: the sections\n       below jump, and the jump reads as breakage. Measure every panel once (hidden ones\n       get one forced layout), set the tallest as the shell's min-height, re-measure on\n       resize. Heights are not animated, so nothing here touches a layout property per\n       frame. *\/\n    function lockShellHeight(){\n      var shell = root.querySelector('.uc-shell');\n      if(!shell) return;\n      var roster = root.querySelector('.uc-roster');\n      var tallest = 0;\n      panels.forEach(function(p){\n        if(!p) return;\n        var on = p.classList.contains('is-on');\n        if(!on) p.style.display = 'grid';\n        var h = p.offsetHeight;\n        if(!on) p.style.display = '';\n        if(h > tallest) tallest = h;\n      });\n      if(tallest > 0){\n        var rh = roster ? roster.offsetHeight : 0;\n        shell.style.minHeight = (tallest + rh) + 'px';\n      }\n    }\n    var lockTimer = null;\n    function lockSoon(){\n      if(lockTimer) clearTimeout(lockTimer);\n      lockTimer = setTimeout(lockShellHeight, 120);\n    }\n    window.addEventListener('resize', lockSoon);\n    window.addEventListener('load', function(){ setTimeout(lockShellHeight, 300); });\n    lockShellHeight();\n\n    function select(i, focusIt){\n      \/* State and focus always apply; only the panel swap is skipped when the target is\n         already live, so an arrow key aimed at the live case still moves focus instead\n         of silently doing nothing. *\/\n      var same = (i === idx);\n      idx = i;\n      cards.forEach(function(c, n){\n        c.setAttribute('aria-selected', n === i ? 'true' : 'false');\n        c.tabIndex = n === i ? 0 : -1;\n        if(n !== i) stopFace(n);\n      });\n      if(!same){\n        panels.forEach(function(p, n){\n          if(!p) return;\n          p.classList.toggle('is-on', n === i);\n          if(n !== i){\n            var t = p.querySelector('[data-tile]'); if(t){ if(t._kvg) t._kvg.stop(); }\n            var af = p.querySelector('[data-agentic]'); if(af){ if(af._kvg) af._kvg.deactivate(); }\n          }\n        });\n        var tile = panelTile(i);\n        if(tile){ if(tile._kvg) tile._kvg.tryPlay(); }\n        \/* Mount a newly selected panel's agentic widget on first visit, if it carries\n           one (ported from EN 2026-08-21). Without this only the first panel, mounted on\n           scroll-in, ever showed a video: the other four stayed black. The preflight\n           inside _avMount keeps this a no-op for a dead key. *\/\n        if(panels[i]){\n          var ag = panels[i].querySelector('[data-agentic]');\n          if(ag){\n            if(root._avMount) root._avMount(ag);\n            if(ag._kvg) ag._kvg.activate();\n          }\n        }\n      }\n      if(focusIt) cards[i].focus();\n    }\n\n    cards.forEach(function(c, i){\n      c.addEventListener('click', function(){ select(i, false); });\n      c.addEventListener('keydown', function(e){\n        var n = cards.length, next = null;\n        if(e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (i + 1) % n;\n        else if(e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (i - 1 + n) % n;\n        else if(e.key === 'Home') next = 0;\n        else if(e.key === 'End') next = n - 1;\n        if(next !== null){ e.preventDefault(); select(next, true); }\n      });\n      if(FINE){ if(!RM){\n        c.addEventListener('pointerenter', function(){ if(c.getAttribute('aria-selected') !== 'true') playFace(i); });\n        c.addEventListener('pointerleave', function(){ if(c.getAttribute('aria-selected') !== 'true') stopFace(i); });\n      } }\n      c.addEventListener('focus', function(){ if(RM) return; if(c.getAttribute('aria-selected') !== 'true') playFace(i); });\n      c.addEventListener('blur',  function(){ if(c.getAttribute('aria-selected') !== 'true') stopFace(i); });\n    });\n\n    \/* swipe: only clearly horizontal gestures act, so page scrolling is never hijacked *\/\n    var sx = 0, sy = 0, tracking = false;\n    var shell = root.querySelector('.uc-shell');\n    if(shell){\n      shell.addEventListener('touchstart', function(e){\n        if(e.touches.length !== 1) return;\n        sx = e.touches[0].clientX; sy = e.touches[0].clientY; tracking = true;\n      }, {passive:true});\n      shell.addEventListener('touchend', function(e){\n        if(!tracking) return; tracking = false;\n        var tch = e.changedTouches[0], dx = tch.clientX - sx, dy = tch.clientY - sy;\n        if(Math.abs(dx) > 46){ if(Math.abs(dx) > Math.abs(dy) * 1.6){\n          select(dx < 0 ? (idx + 1) % cards.length : (idx - 1 + cards.length) % cards.length, false);\n        } }\n      }, {passive:true});\n    }\n\n    \/* Split out of one condition because inline JS on this page carries no ampersands.\n       Both misses must still fall through to the same else: no observer support, or\n       no host, means the tiles can never be told they are on screen. *\/\n    var canObserve = ('IntersectionObserver' in window);\n    if(!host) canObserve = false;\n    if(canObserve){\n      new IntersectionObserver(function(entries){\n        entries.forEach(function(en){\n          inView = en.isIntersecting;\n          if(!inView) cards.forEach(function(c, n){ stopFace(n); });\n        });\n      }, {threshold:0.25}).observe(host);\n    } else { inView = true; }\n  })();\n\n  \/* ---------- STUDIO SHOT: click pins a hotspot label open ---------- *\/\n  (function(){\n    var hots = Array.prototype.slice.call(root.querySelectorAll('.shot-hot'));\n    if(!hots.length) return;\n    hots.forEach(function(b){\n      b.addEventListener('click', function(){\n        var open = b.classList.contains('is-open');\n        hots.forEach(function(o){ o.classList.remove('is-open'); });\n        if(!open) b.classList.add('is-open');\n      });\n    });\n  })();\n})();\n\/* == presenter conveyor JS: generated by scripts\/apply_wall.py == *\/\n\n\/* ---------- the presenter conveyor: video ----------\n   The drift itself is pure CSS and needs nothing from here, which is deliberate: on a\n   WordPress page the inline script is the fragile part, so the thing that satisfies WCAG\n   2.2.2 must not depend on it. If every line below dies, the wall still moves and the\n   control still stops it.\n   This file must contain zero ampersand characters, comments included. Every compound\n   condition is nested or split for that reason, not for style. *\/\n(function(){\n  var RM = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n  var FINE = window.matchMedia ? window.matchMedia('(hover:hover) and (pointer:fine)').matches : false;\n\n  function play(v){\n    if(!v) return;\n    if(!v.getAttribute('src')){\n      var d = v.getAttribute('data-src');\n      if(!d) return;\n      v.setAttribute('src', d);\n    }\n    var p = v.play();\n    if(p){ if(p.catch) p.catch(function(){}); }\n  }\n  function stop(v){\n    if(!v) return;\n    try{ v.pause(); }catch(e){}\n  }\n  \/* A card the mask has faded to a sliver is still inside the box and still hoverable.\n     Popping one of those looks broken, so the trigger is gated on what is actually\n     visible rather than on what happens to be under the cursor. *\/\n  function solid(card){\n    var o = parseFloat(window.getComputedStyle(card).opacity);\n    if(isNaN(o)) return true;\n    return o >= 0.55;\n  }\n\n  Array.prototype.forEach.call(document.querySelectorAll('.pw'), function(wall){\n    var cards = Array.prototype.slice.call(wall.querySelectorAll('.pw-card'));\n    if(!cards.length) return;\n\n    \/* Hover is desktop only. (hover:hover) never matches a touch device, so a phone\n       fetches no video at all unless the visitor presses the control. *\/\n    if(FINE){\n      cards.forEach(function(card){\n        var v = card.querySelector('.pw-vid');\n        card.addEventListener('pointerenter', function(){\n          if(!solid(card)) return;\n          card.classList.add('is-live');\n          play(v);\n        });\n        card.addEventListener('pointerleave', function(){\n          card.classList.remove('is-live');\n          \/* currentTime is deliberately left alone. Resuming a five second loop mid\n             phrase is invisible; resetting it snaps the frame under the crossfade. *\/\n          stop(v);\n        });\n      });\n    }\n\n    \/* The control. The CSS half has already stopped the drift by the time this runs;\n       all that is left is the video half. *\/\n    var frame = wall.closest('.pw-frame') || wall.closest('.pw-band') || wall.parentElement;\n    var cb = frame ? frame.querySelector('.pw-cb') : null;\n    if(!cb) cb = document.querySelector('.pw-cb');\n    if(!cb) return;\n\n    function eligible(){\n      \/* Nine decoders at once is fine on a desktop and is asking for trouble on a phone.\n         Pick by visibility so the ones that play are the ones you can see. *\/\n      var quota = window.innerWidth <= 640 ? 3 : 9;\n      var ranked = cards.slice().sort(function(a, b){\n        var oa = parseFloat(window.getComputedStyle(a).opacity) || 0;\n        var ob = parseFloat(window.getComputedStyle(b).opacity) || 0;\n        return ob - oa;\n      });\n      var out = [];\n      for(var i = 0; i < ranked.length; i++){\n        if(out.length >= quota) break;\n        var o = parseFloat(window.getComputedStyle(ranked[i]).opacity);\n        if(isNaN(o)) o = 1;\n        if(o < 0.2) continue;\n        out.push(ranked[i]);\n      }\n      return out;\n    }\n\n    function apply(){\n      if(cb.checked){\n        eligible().forEach(function(card){\n          card.classList.add('is-live');\n          play(card.querySelector('.pw-vid'));\n        });\n        return;\n      }\n      cards.forEach(function(card){\n        card.classList.remove('is-live');\n        stop(card.querySelector('.pw-vid'));\n      });\n    }\n    cb.addEventListener('change', apply);\n    if(RM){ \/* nothing drifts, so the control is a play button and starts unpressed *\/ }\n\n    document.addEventListener('visibilitychange', function(){\n      if(document.hidden){ cards.forEach(function(c){ stop(c.querySelector('.pw-vid')); }); return; }\n      if(cb.checked) apply();\n    });\n  });\n})();\n\n\/* == end presenter conveyor JS == *\/\n\n  \/* did-inline-js *\/\n  \/* Hero loop controls. WCAG 2.2.2: anything moving past five seconds needs a way to\n     stop it, and prefers-reduced-motion must not autoplay at all. Deliberately free of\n     the \"and\" operator: WordPress entity-encodes it inside inline script and the whole\n     block dies on a SyntaxError. *\/\n  (function(){\n    var v=document.getElementById('heroLoop');\n    if(!v){return;}\n    var b=document.getElementById('heroLoopBtn');\n    if(!b){return;}\n    var lab=b.querySelector('.hl-lab');\n    function sync(){\n      var p=v.paused;\n      b.setAttribute('aria-pressed',p?'true':'false');\n      if(lab){lab.textContent=p?b.getAttribute('data-play'):b.getAttribute('data-pause');}\n    }\n    var mq=window.matchMedia?window.matchMedia('(prefers-reduced-motion: reduce)'):null;\n    if(mq){if(mq.matches){try{v.pause();}catch(e){}v.removeAttribute('autoplay');}}\n    sync();\n    b.addEventListener('click',function(){\n      if(v.paused){var r=v.play();if(r){if(r.catch){r.catch(function(){});}}}\n      else{v.pause();}\n      sync();\n    });\n    v.addEventListener('play',sync);\n    v.addEventListener('pause',sync);\n  })();\n\n  \/* ---- live Agentic Video embed, ported from the EN page ----\n     Top-level on purpose (2026-08-21): it used to sit inside the hero-loop IIFE above,\n     whose early returns on a missing #heroLoop\/#heroLoopBtn would have silently\n     killed every use-case video with it. *\/\n  (function(){\n    \/* Preview gate (2026-08-18). The claude.ai artifact runtime injects\n       __FRAME_PREAMBLE and permits just enough network for the widget to mount a black\n       stage over the poster without ever playing. Previews keep the poster; the widget\n       mounts only on real pages. *\/\n    if(window.__FRAME_PREAMBLE) return;\n    \/* Ported from the EN page, so it cannot rely on the outer scope's `root`:\n       resolve it here. Without this the whole embed dies on a ReferenceError\n       and every widget stays an empty black box. *\/\n    var root = document.querySelector('.did-kvg');\n    if(!root) return;\n    \/* hasIO also lives in the EN page's outer scope; define it here so this block\n       is self-contained wherever it sits. No ampersand: see the note above. *\/\n    function hasIO(el){ if(!('IntersectionObserver' in window)) return false; return !!el; }\n    var frames = Array.prototype.slice.call(root.querySelectorAll('[data-agentic]'));\n    if(!frames.length) return;\n    var SRC = 'https:\/\/agentic-videos.d-id.com\/v1\/index.js';\n\n    function addCaptionToggle(frame, video){\n      var vtt = frame.getAttribute('data-captions');\n      if(!vtt || frame.querySelector('.uc-cc')) return;\n      var track = document.createElement('track');\n      track.kind = 'captions'; track.srclang = 'en'; track.label = 'English'; track.src = vtt;\n      video.appendChild(track);\n      \/* The widget's control bar has play, agent, mute and fullscreen but no captions\n         button, so the track needs a control of our own or it is unreachable. Off by\n         default: the narration is a scripted demo for a fictional company and its\n         figures must not read as D-ID's. *\/\n      var btn = document.createElement('button');\n      btn.type = 'button'; btn.className = 'uc-cc';\n      btn.setAttribute('aria-pressed', 'false');\n      btn.setAttribute('aria-label', 'Show captions');\n      btn.textContent = 'CC';\n      \/* mode 'hidden' keeps the cues firing cuechange without the UA drawing them, so the\n         text lands in our own plate above the widget's control bar. *\/\n      \/* Mounted inside .av-root, not the figure: the widget fullscreens .av-root alone,\n         and anything left outside it is simply not on screen while fullscreen is active.\n         .av-root is position:relative, so the absolute placement is unchanged. *\/\n      var host = frame.querySelector('.av-root') || frame;\n      var plate = document.createElement('div');\n      plate.className = 'uc-cap';\n      plate.setAttribute('aria-live', 'off');\n      host.appendChild(plate);\n      var showing = false;\n      function paint(){\n        var tt = video.textTracks[0];\n        var cue = null;\n        if(tt){ if(tt.activeCues){ if(tt.activeCues.length) cue = tt.activeCues[0]; } }\n        var text = '';\n        if(showing){ if(cue) text = cue.text.replace(\/<[^>]*>\/g, ''); }\n        plate.textContent = text;\n        plate.classList.toggle('on', !!text);\n      }\n      var tt0 = video.textTracks[0];\n      if(tt0){ tt0.mode = 'hidden'; tt0.addEventListener('cuechange', paint); }\n      btn.addEventListener('click', function(){\n        var tt = video.textTracks[0]; if(!tt) return;\n        showing = !showing;\n        tt.mode = 'hidden';\n        btn.setAttribute('aria-pressed', showing ? 'true' : 'false');\n        btn.setAttribute('aria-label', showing ? 'Hide captions' : 'Show captions');\n        paint();\n      });\n      host.appendChild(btn);\n    }\n\n    \/* The widget hides its control bar with .av-controls-hidden on an ancestor of the bar.\n       That element is nested inside a sibling of the caption plate, so no CSS selector\n       reaches it; mirror the state onto the frame instead and let CSS do the rest. *\/\n    function trackControlBar(frame){\n      var bar = frame.querySelector('.av-controls');\n      if(!bar) return;\n      var host = bar.parentElement;\n      while(host){\n        if(host === frame) break;\n        if(host.classList.contains('av-root')) break;\n        host = host.parentElement;\n      }\n      host = host || frame;\n      var avRoot = frame.querySelector('.av-root');\n      var sync = function(){\n        var hidden = !!(bar.closest('.av-controls-hidden'));\n        frame.classList.toggle('ctl-on', !hidden);\n        if(avRoot) avRoot.classList.toggle('ctl-on', !hidden);\n      };\n      sync();\n      new MutationObserver(sync).observe(host, {attributes:true, attributeFilter:['class'], subtree:true});\n    }\n\n    function adopt(frame){\n      var video = frame.querySelector('video');\n      if(!video) return false;\n      frame.classList.add('av-ready');\n      \/* The widget labels its <video> with the agentic video's internal name. Replace it\n         with the description this tile used to carry on its own <video>, so the \"Example\n         video\" framing survives for screen readers too. An ARIA attribute is the only\n         thing we set on the widget's DOM; its styles are left strictly alone. *\/\n      var lbl = frame.getAttribute('data-av-label');\n      if(lbl) video.setAttribute('aria-label', lbl);\n      \/* Join the shared audio preference and gain deactivate\/activate handles, so a\n         tab switch pauses a playing embed instead of letting it speak from a hidden\n         panel. This call was documented from the start but never wired (2026-08-19). *\/\n      if(root._kvgAdopt) root._kvgAdopt(frame, video);\n      addCaptionToggle(frame, video);\n      trackControlBar(frame);\n      return true;\n    }\n\n    \/* The widget gives no ready callback, so watch the mount for its first render. *\/\n    function watch(frame){\n      var mo = new MutationObserver(function(){ if(adopt(frame)) mo.disconnect(); });\n      mo.observe(frame, {childList:true, subtree:true});\n      setTimeout(function(){ if(adopt(frame)) mo.disconnect(); }, 8000);\n    }\n\n    \/* One module, four widgets.\n       The bundle only ever self-initialises ONE embed: it finds the first script[src] on\n       its own host and reads the data attributes off that, and a second module script tag\n       pointing at the same URL is deduplicated by the module map and never\n       re-evaluated. What it does expose is window.DID_AGENTIC_VIDEO_INIT, which takes the\n       same options as an object. So the first frame rides the script tag (the vendor's own\n       path, which keeps working even if that global is ever withdrawn) and the rest are\n       initialised through it. *\/\n    var loading = false, ready = false, queue = [];\n\n    \/* Preflight, added 2026-08-10, made per-key later that day: the use-case demos and\n       the agentic-section showcase ride different client keys (different accounts), so\n       one cached verdict would let a dead key silence a live one. An unchecked mount\n       hands the visitor the widget's own black \"Failed to fetch\" card on top of a\n       perfectly good poster. The widget fetches this same API from the browser, so CORS\n       is open to us too: ask once per key, cache the answer, and simply never mount when\n       the answer is no. The poster is only ever occluded by the mount, never removed, so\n       a skipped mount needs no cleanup. *\/\n    var probeStates = {}, probeWaits = {};\n    function preflight(frame, cb){\n      var key = frame.getAttribute('data-av-key');\n      if(Object.prototype.hasOwnProperty.call(probeStates, key)){ cb(probeStates[key]); return; }\n      if(!probeWaits[key]) probeWaits[key] = [];\n      var waiters = probeWaits[key];\n      waiters.push(cb);\n      if(waiters.length > 1) return;\n      var id = frame.getAttribute('data-av-id');\n      var done = function(ok){\n        probeStates[key] = ok;\n        if(!ok){ if(window.console) console.warn('[kvg] agentic API not reachable for this key; its posters stay'); }\n        waiters.splice(0).forEach(function(fn){ fn(ok); });\n      };\n      try {\n        fetch('https:\/\/api.d-id.com\/agentic-videos\/' + id + '?excludeAgent=true', {\n          headers: { Authorization: 'Client-Key ' + key }\n        }).then(function(r){ done(r.ok); }, function(){ done(false); });\n      } catch(e) { done(false); }\n    }\n\n    function init(frame){\n      var fn = window.DID_AGENTIC_VIDEO_INIT;\n      if(typeof fn !== 'function'){\n        \/* Poster stays; nothing else we can do without the vendor entry point. *\/\n        if(window.console) console.warn('[kvg] agentic embed: DID_AGENTIC_VIDEO_INIT unavailable');\n        return;\n      }\n      fn({\n        clientKey: frame.getAttribute('data-av-key'),\n        agenticVideoId: frame.getAttribute('data-av-id'),\n        target: frame.querySelector('.uc-agentic-mount').id\n      });\n    }\n\n    function loadModule(frame){\n      loading = true;\n      var sc = document.createElement('script');\n      sc.type = 'module';\n      sc.src = SRC;\n      sc.setAttribute('data-client-key', frame.getAttribute('data-av-key'));\n      sc.setAttribute('data-agentic-video-id', frame.getAttribute('data-av-id'));\n      sc.setAttribute('data-target-id', frame.querySelector('.uc-agentic-mount').id);\n      sc.onload = function(){ ready = true; queue.splice(0).forEach(init); };\n      \/* A failed bundle load must not strand three queued panels in silence. *\/\n      sc.onerror = function(){\n        loading = false; queue.splice(0);\n        if(window.console) console.warn('[kvg] agentic bundle failed to load; posters stay');\n      };\n      document.head.appendChild(sc);\n    }\n\n    \/* Mount one case, and only when it is wanted. The widget's own <video> ships\n       preload=\"auto\", so a mounted widget pulls its whole demo down: mounting all four on\n       scroll-in would cost four videos to a visitor who watches none. The live case mounts\n       when the section comes into view, the other three when they are selected. *\/\n    root._avMount = function(frame){\n      if(!frame || !frame.hasAttribute('data-agentic') || frame._avMounted) return;\n      frame._avMounted = true;\n      preflight(frame, function(ok){\n        if(!ok) return;\n        watch(frame);\n        if(!loading) loadModule(frame);\n        else if(ready) init(frame);\n        else queue.push(frame);\n      });\n    };\n\n    \/* One observer per hosting section (2026-08-10): the agentic split's showcase frame\n       and the use-case shell live in different sections and each mounts on its own\n       scroll-in. Inside a section the live tab's frame wins; frames in hidden panels\n       mount later, on selection only (2026-08-19: the fallback used to grab a\n       hidden-panel frame and download its whole demo for every visitor who merely\n       scrolled past - the exact cost the lazy mount exists to avoid). *\/\n    function liveFrameIn(section){\n      var on = section.querySelector('.uc-panel.is-on [data-agentic]');\n      if(on) return on;\n      var any = section.querySelector('[data-agentic]');\n      if(any){ if(any.closest('.uc-panel')) return null; }\n      return any;\n    }\n    var hosts = [];\n    frames.forEach(function(f){\n      var s = f.closest('section');\n      if(s){ if(hosts.indexOf(s) < 0) hosts.push(s); }\n    });\n    hosts.forEach(function(hostSec){\n      if(hasIO(hostSec)){\n        var io = new IntersectionObserver(function(en){\n          en.forEach(function(e){\n            if(e.isIntersecting){ root._avMount(liveFrameIn(hostSec)); io.disconnect(); }\n          });\n        }, {rootMargin:'200px'});\n        io.observe(hostSec);\n      } else {\n        root._avMount(liveFrameIn(hostSec));\n      }\n    });\n  })();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Enterprise-KI-Video-Generator mit realistischen KI-Avataren Erstelle professionelle KI-Videos mit lebensechten digitalen Presentern. Verwandle Unternehmensinhalte in mehrsprachige Videos, passe sie an unterschiedliche Zielgruppen an und erm\u00f6gliche Interaktionen in Echtzeit, wenn Zuschauer Fragen haben. D-ID bietet Unternehmen einen Enterprise-KI-Video-Generator, der f\u00fcr sichere Implementierungen, API-Integrationen und die skalierbare Erstellung gro\u00dfer Mengen an Videos entwickelt wurde. KI-Video erstellen Pause Weltweit&#8230;<\/p>\n","protected":false},"author":93,"featured_media":15330,"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-14627","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.1 (Yoast SEO v28.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>KI-Video-Generator mit realistischen KI-Avataren | D-ID<\/title>\n<meta name=\"description\" content=\"Erstelle professionelle KI-Videos mit realistischen Avataren, KI-Stimmen, Personalisierung und interaktiven Funktionen. Teste den KI-Video-Generator von D-ID.\" \/>\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\/ki-video-generator\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"KI Video Generator\" \/>\n<meta property=\"og:description\" content=\"Erstelle professionelle KI-Videos mit realistischen Avataren, KI-Stimmen, Personalisierung und interaktiven Funktionen. Teste den KI-Video-Generator von D-ID.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.d-id.com\/de\/ki-video-generator\/\" \/>\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-08-21T18:39:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"15\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\\\/ki-video-generator\\\/\",\"url\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/ki-video-generator\\\/\",\"name\":\"KI-Video-Generator mit realistischen KI-Avataren | D-ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/ki-video-generator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/ki-video-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.d-id.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/ki-video-generator-featured.jpg\",\"datePublished\":\"2026-08-21T18:39:23+00:00\",\"dateModified\":\"2026-08-21T18:39:31+00:00\",\"description\":\"Erstelle professionelle KI-Videos mit realistischen Avataren, KI-Stimmen, Personalisierung und interaktiven Funktionen. Teste den KI-Video-Generator von D-ID.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/ki-video-generator\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.d-id.com\\\/de\\\/ki-video-generator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/ki-video-generator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.d-id.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/ki-video-generator-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/www.d-id.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/ki-video-generator-featured.jpg\",\"width\":1600,\"height\":900,\"caption\":\"KI-Video generator featured image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/ki-video-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.d-id.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"KI Video Generator\"}]},{\"@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":"KI-Video-Generator mit realistischen KI-Avataren | D-ID","description":"Erstelle professionelle KI-Videos mit realistischen Avataren, KI-Stimmen, Personalisierung und interaktiven Funktionen. Teste den KI-Video-Generator von D-ID.","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\/ki-video-generator\/","og_locale":"de_DE","og_type":"article","og_title":"KI Video Generator","og_description":"Erstelle professionelle KI-Videos mit realistischen Avataren, KI-Stimmen, Personalisierung und interaktiven Funktionen. Teste den KI-Video-Generator von D-ID.","og_url":"https:\/\/www.d-id.com\/de\/ki-video-generator\/","og_site_name":"D-ID","article_publisher":"https:\/\/www.facebook.com\/deidentification\/","article_modified_time":"2026-08-21T18:39:31+00:00","og_image":[{"width":1600,"height":900,"url":"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@D_ID_","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"15\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.d-id.com\/de\/ki-video-generator\/","url":"https:\/\/www.d-id.com\/de\/ki-video-generator\/","name":"KI-Video-Generator mit realistischen KI-Avataren | D-ID","isPartOf":{"@id":"https:\/\/www.d-id.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.d-id.com\/de\/ki-video-generator\/#primaryimage"},"image":{"@id":"https:\/\/www.d-id.com\/de\/ki-video-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured.jpg","datePublished":"2026-08-21T18:39:23+00:00","dateModified":"2026-08-21T18:39:31+00:00","description":"Erstelle professionelle KI-Videos mit realistischen Avataren, KI-Stimmen, Personalisierung und interaktiven Funktionen. Teste den KI-Video-Generator von D-ID.","breadcrumb":{"@id":"https:\/\/www.d-id.com\/de\/ki-video-generator\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.d-id.com\/de\/ki-video-generator\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.d-id.com\/de\/ki-video-generator\/#primaryimage","url":"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured.jpg","contentUrl":"https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured.jpg","width":1600,"height":900,"caption":"KI-Video generator featured image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.d-id.com\/de\/ki-video-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.d-id.com\/de\/"},{"@type":"ListItem","position":2,"name":"KI Video Generator"}]},{"@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":["https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured.jpg",1600,900,false],"thumbnail":["https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured-150x150.jpg",150,150,true],"medium":["https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured-768x432.jpg",768,432,true],"large":["https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/www.d-id.com\/wp-content\/uploads\/2026\/08\/ki-video-generator-featured.jpg",1600,900,false]},"uagb_author_info":{"display_name":"Tim Moss","author_link":"https:\/\/www.d-id.com\/de\/author\/tim-moss\/"},"uagb_comment_info":0,"uagb_excerpt":"Enterprise-KI-Video-Generator mit realistischen KI-Avataren Erstelle professionelle KI-Videos mit lebensechten digitalen Presentern. Verwandle Unternehmensinhalte in mehrsprachige Videos, passe sie an unterschiedliche Zielgruppen an und erm\u00f6gliche Interaktionen in Echtzeit, wenn Zuschauer Fragen haben. D-ID bietet Unternehmen einen Enterprise-KI-Video-Generator, der f\u00fcr sichere Implementierungen, API-Integrationen und die skalierbare Erstellung gro\u00dfer Mengen an Videos entwickelt wurde. KI-Video erstellen Pause Weltweit...","_links":{"self":[{"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/pages\/14627","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\/93"}],"replies":[{"embeddable":true,"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/comments?post=14627"}],"version-history":[{"count":12,"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/pages\/14627\/revisions"}],"predecessor-version":[{"id":15337,"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/pages\/14627\/revisions\/15337"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/media\/15330"}],"wp:attachment":[{"href":"https:\/\/www.d-id.com\/de\/wp-json\/wp\/v2\/media?parent=14627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}