.ppintro--punkte .pppunkte__grund--video {
    position: relative;
    inset: auto;
    grid-column: 1;
    align-self: stretch;
    background: var(--color-bg);
}

.ppvideo {
    position: absolute;
    inset: 0;
    container-type: size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}


.ppvideo__feld {
    --ppv-fuge: 0.42cqw;
    --ppv-pitch: 3.4777cqw;

    width: 90cqw;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(26, 1fr);
    gap: var(--ppv-fuge);
    -webkit-mask-image: radial-gradient(ellipse 64% 74% at 50% 50%, #000 44%, transparent 94%);
            mask-image: radial-gradient(ellipse 64% 74% at 50% 50%, #000 44%, transparent 94%);
}

.ppvideo__kachel {
    aspect-ratio: 1;
    background: #1f1f1f;
    opacity: 0;
    transform: translate(0, 0);
    transition: opacity 0.55s var(--ease-sine),
                background-color 0.7s var(--ease-cubic),
                transform 1.25s var(--ease-quart);
    transition-delay: calc(var(--i, 0) * 0.0038s);
}


.ppvideo[data-beat="1"] .ppvideo__kachel,
.ppvideo[data-beat="2"] .ppvideo__kachel {
    opacity: 0.16;
}

.ppvideo[data-beat="1"] .ppvideo__kachel--signal {
    background: var(--color-logo);
    opacity: 0.42;
    transition-delay: calc(0.45s + var(--i, 0) * 0.0038s);
}


.ppvideo[data-beat="2"] .ppvideo__kachel {
    opacity: 0.09;
    transform: translateX(calc(var(--schub, 0) * 1cqw));
    transition-delay: calc(var(--s, 0) * 0.012s);
}

.ppvideo[data-beat="2"] .ppvideo__kachel--signal {
    background: var(--ppv-ton, var(--color-logo));
    opacity: var(--ppv-deckung, 0.62);
    transition-delay: calc(var(--s, 0) * 0.012s);
}

.ppvideo__kachel[data-strom="zielgruppe"] { --ppv-ton: var(--color-gold);   --ppv-deckung: 0.74; --schub: -1.5; }
.ppvideo__kachel[data-strom="werbung"]    { --ppv-ton: var(--color-mint);   --ppv-deckung: 0.82; --schub: -0.5; }
.ppvideo__kachel[data-strom="website"]    { --ppv-ton: var(--color-blue);   --ppv-deckung: 0.58; --schub:  0.5; }
.ppvideo__kachel[data-strom="interesse"]  { --ppv-ton: var(--color-violet); --ppv-deckung: 0.60; --schub:  1.5; }


.ppvideo[data-beat="3"] .ppvideo__kachel {
    opacity: 0;
    transition-delay: calc(var(--w, 0) * 0.012s);
}

.ppvideo[data-beat="3"] .ppvideo__kachel--signal {
    transform: translateX(calc(var(--schub, 0) * 1cqw));
}

.ppvideo[data-beat="3"] .ppvideo__kachel--zeichen {
    opacity: 0.92;
    transform: translate(calc(var(--tx3, 0) * var(--ppv-pitch)),
                         calc(var(--ty3, 0) * var(--ppv-pitch)));
    transition-delay: calc(var(--w, 0) * 0.012s);
}

.ppvideo[data-beat="3"] .ppvideo__kachel--zeichen[data-ton="zielgruppe"] { background: var(--color-gold); }
.ppvideo[data-beat="3"] .ppvideo__kachel--zeichen[data-ton="werbung"]    { background: var(--color-mint); }
.ppvideo[data-beat="3"] .ppvideo__kachel--zeichen[data-ton="website"]    { background: var(--color-blue); }
.ppvideo[data-beat="3"] .ppvideo__kachel--zeichen[data-ton="interesse"]  { background: var(--color-violet); }


.ppvideo__text {
    flex: none;
    margin: 7cqw 5cqw 0;
}

.ppvideo__zeilen {
    position: relative;
    height: 8.6cqw;
}

.ppvideo__zeile {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    font-family: var(--font-base);
    font-size: 6.6cqw;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text);
    opacity: 0;
    transform: translateY(2cqw);
    transition: opacity 0.7s var(--ease-sine), transform 0.95s var(--ease-quart);
}

.ppvideo[data-beat="1"] .ppvideo__zeile[data-fuer="1"],
.ppvideo[data-beat="2"] .ppvideo__zeile[data-fuer="2"],
.ppvideo[data-beat="3"] .ppvideo__zeile[data-fuer="3"] {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.ppvideo[data-beat="2"] .ppvideo__zeile[data-fuer="1"],
.ppvideo[data-beat="3"] .ppvideo__zeile[data-fuer="1"],
.ppvideo[data-beat="3"] .ppvideo__zeile[data-fuer="2"] {
    opacity: 0;
    transform: translateY(-2cqw);
}


.ppvideo__logo {
    display: flex;
    align-items: center;
    gap: 1cqw;
    margin: 3cqw 0 0;
    font-family: var(--font-logo);
    font-weight: 600;
    font-size: 3.4cqw;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-logo);
    opacity: 0;
    transform: translateY(1cqw);
    transition: opacity 0.9s var(--ease-cubic), transform 1s var(--ease-quart);
}

.ppvideo[data-beat="3"] .ppvideo__logo {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.1s;
}

.ppvideo__winkel {
    display: block;
    flex: none;
    width: 0.433em;
    height: 0.693em;
}

.ppvideo__winkel svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ppvideo__med { color: var(--color-gold); }

@media (max-width: 1023px) {
    .ppintro--punkte .pppunkte__grund--video {
        grid-column: 1 / -1;
        aspect-ratio: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ppvideo__kachel,
    .ppvideo__zeile,
    .ppvideo__logo { transition-duration: 0.01ms; }
}