.dmad-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f2f2f2;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: #595959;
    container-type: inline-size;
}
.dmad-hero__stage {
    position: relative;
    width: 1400px;
    height: 680px;
    transform-origin: top left;
}
.dmad-hero__stage img { position: absolute; max-width: none !important; margin: 0 !important; }
.dmad-hero__background { left: -400px; top: 0; width: 1920px; height: 950px; }
.dmad-hero__wordpress { left: 20px; top: 110px; width: 251px; height: auto; }
.dmad-hero__typo3 { left: 240px; top: 467px; width: 164px; height: auto; }
.dmad-hero__intro { display: none; }
.dmad-hero__intro p { position: absolute; margin: 0; font-size: 36px; line-height: 44px; font-weight: 400; }
.dmad-hero__intro-first { left: 707px; top: 412px; }
.dmad-hero__intro-second { left: 712px; top: 504px; }
.dmad-hero__benefits { position: absolute; left: 607px; top: 368px; width: 620px; }
.dmad-hero__benefit { display: flex; align-items: center; gap: 30px; height: 98px; }
.dmad-hero__benefit svg { width: 72px; height: 72px; flex-shrink: 0; fill: none; stroke: #c5c5c5; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dmad-hero__benefit p { font-size: 22px; line-height: 32px; font-weight: 700; margin: 0; color: #808080; }
.dmad-hero__smoke { left: 396px; top: 740px; width: 272px; height: 137px; opacity: 0; pointer-events: none; }
.dmad-hero__rocket { left: 495px; top: 634px; width: 77px; height: 400px; opacity: 0; pointer-events: none; }
.dmad-hero .dmad-hero__cta { position: absolute; left: 1033px; top: 576px; display: inline-flex; align-items: center; gap: 12px; padding: 16px 20px 14px; border-radius: 30px; background: rgba(35,84,35,.71); color: #fff; font-size: 24px; line-height: 24px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
.dmad-hero .dmad-hero__cta:hover { background: #fff; color: #686868; }
.dmad-hero a:focus-visible, .dmad-hero button:focus-visible { outline: 3px solid #235423; outline-offset: 4px; }
.dmad-hero__controls { position: absolute; right: 18px; bottom: 12px; display: flex; gap: 16px; }
.dmad-hero__controls[hidden] { display: none; }
.dmad-hero__controls button { border: 0; background: transparent; color: #595959; font: 16px/1.2 'Yanone Kaffeesatz', sans-serif; padding: 8px 2px; cursor: pointer; }
.dmad-hero.is-animated .dmad-hero__intro { display: block; }
.dmad-hero.is-animated .dmad-hero__intro p,
.dmad-hero.is-animated .dmad-hero__wordpress,
.dmad-hero.is-animated .dmad-hero__typo3,
.dmad-hero.is-animated .dmad-hero__benefit,
.dmad-hero.is-animated .dmad-hero__cta { opacity: 0; }
/* Ohne JavaScript bleiben Leistungsargumente und Link sichtbar. */
@supports (width: 1cqw) {
    .dmad-hero { height: 48.5714cqw; }
    .dmad-hero__stage { transform: scale(calc(100cqw / 1400px)); }
}
@media (min-width: 1800px) {
    .dmad-hero__wordpress { left: 20px; }
}
@media (max-width: 700px) {
    .dmad-hero { height: 820px; }
    .dmad-hero__stage { width: 100%; height: 820px; transform: none; }
    .dmad-hero__background { left: -40px; top: 0; width: 860px; height: auto; }
    .dmad-hero__wordpress { left: 52px; top: 64px; width: 150px; }
    .dmad-hero__typo3 { left: 215px; top: 232px; width: 94px; }
    .dmad-hero__intro p { left: 26px; top: 405px; font-size: 32px; line-height: 38px; }
    .dmad-hero__intro .dmad-hero__intro-second { top: 495px; }
    .dmad-hero__benefits { left: 22px; top: 414px; width: calc(100% - 44px); }
    .dmad-hero__benefit { height: 90px; gap: 18px; }
    .dmad-hero__benefit svg { width: 42px; height: 42px; }
    .dmad-hero__benefit p { font-size: 21px; line-height: 27px; }
    .dmad-hero__benefit br { display: none; }
    .dmad-hero .dmad-hero__cta { left: 82px; top: 706px; font-size: 22px; }
    .dmad-hero__rocket { left: auto; right: 18px; top: 740px; width: 42px; height: auto; }
    .dmad-hero__smoke { left: auto; right: 0; top: 790px; width: 130px; height: auto; }
    .dmad-hero__controls { right: 16px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .dmad-hero__intro { display: none !important; }
    .dmad-hero .dmad-hero__benefit, .dmad-hero .dmad-hero__wordpress, .dmad-hero .dmad-hero__typo3, .dmad-hero .dmad-hero__cta { opacity: 1 !important; }
    .dmad-hero__smoke, .dmad-hero__rocket, .dmad-hero__controls { display: none !important; }
}