.ppz-stage {
    --ppz-grund: var(--color-dark);
    --ppz-flaeche: #262626;
    --ppz-glas: rgba(38, 38, 38, 0.72);
    --ppz-text: #ffffff;
    --ppz-leise: rgba(255, 255, 255, 0.66);
    --ppz-gehirn: url("../assets/img/praxisprofil-gehirn.webp?v=1");
    --ppz-gehirn-deckung: 0.18;

    background: var(--ppz-grund);
}

.ppz-intro {
    position: relative;
    isolation: isolate;
    padding: 5rem var(--gutter) 4rem;
    text-align: center;
}

.ppz-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ppz-gehirn) center 80% / 82% auto no-repeat;
    opacity: var(--ppz-gehirn-deckung);
    pointer-events: none;
}

.ppz-absatz {
    margin-left: auto;
    margin-right: auto;
}



.ppz-ablauf {
    position: relative;
}

.ppz-ablauf__klebe {
    background: var(--ppz-flaeche);
}

.ppz-etappe__kopf {
    margin-bottom: 3.2rem;
}

.ppz-etappe__titel {
    margin: 0 0 0.8rem;
    font-size: 2.2rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.016em;
    color: var(--ppz-text);
}

.ppz-etappe__satz {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--ppz-leise);
}

.ppz-schritte {
    display: none;
}

.ppz-etappe {
    padding: 9.6rem var(--gutter);
}

@media (max-width: 767px) {

    .ppz-etappe {
        opacity: 0;
        transform: translateY(2.4rem);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .ppz-etappe.is-sichtbar {
        opacity: 1;
        transform: none;
    }

    .ppz-block {
        opacity: 0;
        transform: translateY(2rem);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .ppz-block.is-sichtbar {
        opacity: 1;
        transform: none;
    }

    .ppz-block .ppz-aufgabe {
        opacity: 0;
        transform: translateY(0.8rem);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .ppz-block.is-sichtbar .ppz-aufgabe {
        opacity: 1;
        transform: none;
    }

    .ppz-block.is-sichtbar .ppz-aufgabe:nth-child(1) { transition-delay: 0.10s; }
    .ppz-block.is-sichtbar .ppz-aufgabe:nth-child(2) { transition-delay: 0.18s; }
    .ppz-block.is-sichtbar .ppz-aufgabe:nth-child(3) { transition-delay: 0.26s; }
}

.ppz-trennwinkel {
    display: block;
    width: 6.4rem;
    height: auto;
    margin: 0 auto;
    fill: none;
    stroke: var(--ppz-text);
    stroke-width: 10.61;
    stroke-linejoin: miter;
    stroke-linecap: butt;
}




.ppz-kicker {
    margin-bottom: 1.8rem;
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--ppz-text);
}

.ppz-titel {
    margin-bottom: 2.2rem;
    font-size: 3.2rem;
    font-weight: var(--fw-regular);
    line-height: 1.1;
    letter-spacing: -0.022em;
    color: var(--ppz-text);
}

.ppz-absatz {
    font-size: 1.6rem;
    line-height: 1.65;
    color: var(--ppz-leise);
    max-width: 46ch;
}

.ppz-absatz + .ppz-absatz {
    margin-top: 1.6rem;
}




.ppz-punkte {
    margin: 2.8rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem 3.2rem;
    list-style: none;
}

.ppz-punkt {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    color: var(--ppz-text);
}

.ppz-punkt .link-winkel__mark {
    color: var(--color-logo);
}

@media (max-width: 767px) {
    .ppz-punkt {
        display: block;
        text-align: center;
    }

    .ppz-punkt .link-winkel__mark {
        display: inline-block;
        margin-right: 1.2rem;
        vertical-align: middle;
    }
}


.ppz-strom + .ppz-strom {
    margin-top: 4.8rem;
}

.ppz-strom__band + .ppz-strom__band {
    margin-top: 0.6rem;
}

.ppz-strom__name {
    margin-bottom: 0.6rem;
    font-size: 1.3rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--strom-ton) 72%, #ffffff);
}

.ppz-strom__band {
    position: relative;
    height: 3rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 8rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 8rem), transparent 100%);
}

.ppz-strom__lauf {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    gap: 0.6rem;
    width: max-content;
    animation: ppz-stromlauf 46s linear infinite;
}

@keyframes ppz-stromlauf {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.ppz-strom {
    --ppz-signal-mix: 28%;
}

.ppz-signal {
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 1.1rem;
    background: color-mix(in srgb, var(--strom-ton) var(--ppz-signal-mix), #ffffff);
    font-size: 1.2rem;
    color: var(--color-text);
    white-space: nowrap;
}



.ppz-tafeln {
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
}

.ppz-tafel {
    background: var(--ppz-flaeche);
    padding: 1.6rem;
}

.ppz-tafelgruppe {
    display: flex;
    flex-direction: column;
}

.ppz-tafel__label {
    margin: 0 0 0.9rem;
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ppz-leise);
}



.ppz-nabe {
    position: relative;
    container-type: inline-size;
    width: 100%;
    aspect-ratio: 9.469;
}

.ppz-mosaik {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(37, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0.28cqw;
}




.ppz-kennzahlen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem 1.4rem;
}

.ppz-kennzahl__label {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--ppz-leise);
}

.ppz-kennzahl__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.8rem;
    margin: 0;
}

.ppz-kennzahl__wert {
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: -0.016em;
    color: var(--ppz-text);
}

.ppz-kennzahl__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-mint);
}

.ppz-kennzahl__pfeil {
    width: 0.9rem;
    height: 0.63rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ppz-kennzahl__delta--ab {
    color: color-mix(in srgb, var(--color-fehler) 52%, #ffffff);
}

.ppz-kennzahl__delta--ab .ppz-kennzahl__pfeil {
    transform: scaleY(-1);
}



.ppz-muster {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    list-style: none;
}

.ppz-muster__zeile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ppz-muster__zeile--gold    { --muster-ton: var(--color-gold); }
.ppz-muster__zeile--mint    { --muster-ton: var(--color-mint); }
.ppz-muster__zeile--blau    { --muster-ton: var(--color-blue); }
.ppz-muster__zeile--violett { --muster-ton: var(--color-violet); }

.ppz-muster__kaestchen {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    background: color-mix(in srgb, var(--muster-ton) 62%, var(--ppz-flaeche));
}

.ppz-muster__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ppz-muster__kopf {
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--ppz-text);
}

.ppz-muster__satz {
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ppz-leise);
}



.ppz-block--mint    { --karte-ton: var(--color-mint); }
.ppz-block--blau    { --karte-ton: var(--color-blue); }
.ppz-block--violett { --karte-ton: var(--color-violet); }

.ppz-block + .ppz-block {
    margin-top: 1.4rem;
}

.ppz-karte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.4rem 1.6rem;
    background: var(--karte-ton);
    color: #ffffff;
}


.ppz-karte__kopf {
    font-size: 1.8rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.016em;
    color: inherit;
}

.ppz-karte__zusatz {
    font-size: 1.1rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.82);
}

.ppz-block__koerper {
    background: var(--ppz-flaeche);
    padding: 1.6rem;
}

.ppz-aufgaben {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    list-style: none;
}

.ppz-aufgabe {
    display: flex;
    align-items: start;
    gap: 1rem;
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--ppz-text);
}

.ppz-aufgabe .link-winkel__mark {
    margin-top: 0.3em;
    color: color-mix(in srgb, var(--karte-ton) 78%, #ffffff);
}


@media (max-width: 767px) {
    .ppz-ablauf__klebe {
        padding-block: 6.4rem;
    }

    .ppz-buehne {
        display: flex;
        gap: 1.8rem;
        padding-inline: 7.5vw;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .ppz-buehne::-webkit-scrollbar {
        display: none;
    }

    .ppz-trennwinkel {
        display: none;
    }

    .ppz-etappe {
        --ppz-flaeche: #f1f1f1;
        --ppz-text: var(--color-text);
        --ppz-leise: var(--color-muted);

        flex: 0 0 85vw;
        scroll-snap-align: center;
        padding: 2rem 1.8rem;
        background: var(--color-bg);
    }

    .ppz-strom__name {
        color: color-mix(in srgb, var(--strom-ton) 50%, var(--color-text));
    }

    .ppz-kennzahl__delta {
        color: color-mix(in srgb, var(--color-mint) 45%, var(--color-text));
    }

    .ppz-kennzahl__delta--ab {
        color: var(--color-fehler);
    }

    .ppz-aufgabe .link-winkel__mark {
        color: color-mix(in srgb, var(--karte-ton) 75%, var(--color-text));
    }

    .ppz-etappe__kopf {
        margin-bottom: 1.6rem;
    }

    .ppz-etappe__titel {
        margin-bottom: 0.6rem;
        font-size: 2rem;
    }

    .ppz-etappe__satz {
        font-size: 1.4rem;
        line-height: 1.45;
    }

    .ppz-strom + .ppz-strom {
        margin-top: 2rem;
    }

    .ppz-tafeln {
        gap: 1.4rem;
    }

    .ppz-tafel {
        padding: 1.2rem;
    }

    .ppz-tafel__label {
        margin-bottom: 0.7rem;
    }

    .ppz-kennzahlen {
        gap: 1rem 1.2rem;
    }

    .ppz-muster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.2rem;
    }

    .ppz-muster__zeile {
        align-items: start;
        gap: 0.7rem;
    }

    .ppz-muster__kaestchen {
        width: 1.4rem;
        height: 1.4rem;
        margin-top: 0.1rem;
    }

    .ppz-block + .ppz-block {
        margin-top: 0.6rem;
    }

    .ppz-karte {
        gap: 0.2rem;
        padding: 0.9rem 1.2rem;
    }

    .ppz-karte__kopf {
        font-size: 1.6rem;
    }

    .ppz-block__koerper {
        padding: 0.8rem 1.2rem;
    }

    .ppz-aufgaben {
        gap: 0.5rem;
    }

    .ppz-aufgabe {
        gap: 0.8rem;
        line-height: 1.3;
    }
}


.ppz-etappe.ppz-etappe--start {
    display: none;
}

@media (max-width: 767px) {
    .ppz-etappe.ppz-etappe--start {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ppz-start__titel {
        margin: 0 0 1.2rem;
        font-size: 3.2rem;
        font-weight: var(--fw-regular);
        line-height: 1.1;
        letter-spacing: -0.022em;
        text-align: left;
        color: var(--ppz-text);
    }

    .ppz-start__text {
        margin: 0;
        font-size: 1.5rem;
        line-height: 1.5;
        text-align: left;
        color: var(--ppz-leise);
    }

    .ppz-start__link {
        display: flex;
        justify-content: center;
        margin: 3.2rem 0 0;
    }

    .ppz-start__knopf.cta-knopf {
        --ldet-leitfarbe: var(--color-schwarz);
        --knopf-polster: 0rem;
        padding: 0;
        gap: 0.8rem;
        overflow: visible;
        color: var(--ldet-leitfarbe);
        font-size: 1.8rem;
        font-weight: var(--fw-bold);
        letter-spacing: -0.014em;
    }

    .ppz-start__knopf.cta-knopf::before {
        display: none;
    }

    .ppz-start__knopf .cta-knopf__wort {
        background: none;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        color: var(--ldet-leitfarbe);
    }

    .ppz-start__knopf .link-winkel__mark {
        position: static;
        right: auto;
        width: 0.7em;
        height: 0.7em;
        opacity: 1;
        transform: none;
        background: var(--ldet-leitfarbe);
    }
}



@media (min-width: 768px) {

    .ppz-stage {
        --ppz-gehirn-deckung: 0.22;
        --ppz-glas: rgba(38, 38, 38, 0.6);

        position: relative;
        isolation: isolate;
        padding-bottom: 12rem;
    }

    .ppz-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--ppz-gehirn) center / auto 80% no-repeat;
        opacity: var(--ppz-gehirn-deckung);
        pointer-events: none;
    }

    .ppz-intro::before {
        content: none;
    }

    .ppz-intro {
        padding: 8.8rem 0 0;
    }

    .ppz-intro   { width: 78rem; margin: 0 auto; }
    .ppz-kicker  { font-size: 1.4rem; }
    .ppz-titel   { font-size: var(--h2-size); max-width: 78rem; margin-left: auto; margin-right: auto; }
    .ppz-absatz  { font-size: 1.7rem; max-width: 62.4rem; }

    .ppz-punkt {
        font-size: 1.7rem;
    }


    .ppz-ablauf {
        position: relative;
        height: auto;
        margin-top: 8.8rem;
    }

    .ppz-rast {
        display: none;
    }

    .ppz-ablauf__klebe {
        position: relative;
        display: grid;
        grid-template-columns: 40% 60%;
        align-items: start;
        width: var(--content-width);
        max-width: var(--content-width);
        margin: 0 auto;
        background: none;
    }

    .ppz-ablauf__klebe::before {
        content: "";
        position: absolute;
        inset: -6.4rem;
        background: var(--ppz-glas);
    }

    .ppz-schritte,
    .ppz-buehne {
        position: relative;
    }

    .ppz-etappe__kopf,
    .ppz-trennwinkel {
        display: none;
    }

    .ppz-schritte {
        display: block;
        padding-right: 6.4rem;
    }

    .ppz-schritte__innen {
        position: static;
    }

    .ppz-buehne {
        display: grid;
    }

    .ppz-etappe {
        grid-area: 1 / 1;
        min-height: 0;
        padding: 0;
        opacity: 0;
        transform: none;
        visibility: hidden;
        transition: opacity 0.45s ease, visibility 0.45s;
    }

    .ppz-etappe.is-aktiv {
        opacity: 1;
        visibility: visible;
    }


    .ppz-schritte__label {
        margin-bottom: 3.2rem;
        font-size: 1.4rem;
        font-weight: var(--fw-bold);
        line-height: 1.2;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--ppz-leise);
    }

    .ppz-schritte__liste {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        list-style: none;
    }

    .ppz-schritt {
        display: flex;
        opacity: 0.62;
        background: transparent;
        transition: background 0.35s ease, opacity 0.35s ease;
    }

    .ppz-schritt.is-aktiv {
        background: var(--ppz-text);
        opacity: 1;
    }

    .ppz-schritt__knopf {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 1.6rem 2rem;
        border: 0;
        background: none;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .ppz-schritt__titel {
        font-size: 2.2rem;
        font-weight: var(--fw-regular);
        line-height: 1.2;
        letter-spacing: -0.016em;
        color: var(--ppz-text);
        transition: color 0.35s ease;
    }

    .ppz-schritt.is-aktiv .ppz-schritt__titel {
        color: var(--color-text);
    }

    .ppz-schritt__satz {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows 0.35s ease, visibility 0.35s;
    }

    .ppz-schritt.is-aktiv .ppz-schritt__satz {
        grid-template-rows: 1fr;
        visibility: visible;
    }

    .ppz-schritt__satz-innen {
        min-height: 0;
        overflow: hidden;
    }

    .ppz-schritt__satz-text {
        display: block;
        padding-top: 0.8rem;
        font-size: 1.5rem;
        line-height: 1.45;
        color: rgba(31, 31, 31, 0.72);
    }


    .ppz-strom + .ppz-strom {
        margin-top: 5.4rem;
    }

    .ppz-strom__band + .ppz-strom__band {
        display: none;
    }

    .ppz-strom__band {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 7rem), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 7rem), transparent 100%);
    }

    .ppz-tafeln {
        display: flex;
        flex-direction: column;
        gap: 2.8rem;
    }

    .ppz-tafel {
        padding: 1.2rem;
        background: var(--ppz-glas);
    }

    .ppz-kennzahlen {
        grid-template-columns: repeat(4, 1fr);
    }

    .ppz-muster {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.9rem 1.4rem;
    }

    .ppz-leistungen {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        gap: 1.4rem;
        background: none;
        padding: 0;
    }

    .ppz-block + .ppz-block {
        margin-top: 0;
    }

    .ppz-karte {
        padding: 1.6rem 2rem;
    }

    .ppz-block__koerper {
        padding: 4rem 2rem;
        background: var(--ppz-glas);
    }

    .ppz-aufgaben {
        gap: 3.6rem;
    }

    .ppz-aufgabe {
        font-size: 1.3rem;
    }


    .ppz-aufgabe {
        opacity: 0;
        transform: translateY(0.8rem);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .ppz-etappe.is-aktiv .ppz-aufgabe {
        opacity: 1;
        transform: none;
    }

    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(1) .ppz-aufgabe:nth-child(1) { transition-delay: 0.00s; }
    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(1) .ppz-aufgabe:nth-child(2) { transition-delay: 0.06s; }
    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(1) .ppz-aufgabe:nth-child(3) { transition-delay: 0.12s; }
    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(2) .ppz-aufgabe:nth-child(1) { transition-delay: 0.18s; }
    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(2) .ppz-aufgabe:nth-child(2) { transition-delay: 0.24s; }
    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(2) .ppz-aufgabe:nth-child(3) { transition-delay: 0.30s; }
    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(3) .ppz-aufgabe:nth-child(1) { transition-delay: 0.36s; }
    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(3) .ppz-aufgabe:nth-child(2) { transition-delay: 0.42s; }
    .ppz-etappe.is-aktiv .ppz-block:nth-of-type(3) .ppz-aufgabe:nth-child(3) { transition-delay: 0.48s; }
}


.ppz-cta {
    display: none;
}

@media (min-width: 768px) {
    .ppz-cta {
        display: flex;
        justify-content: center;
        margin: 2.4rem 0 0;
    }

    .ppz-cta__knopf.cta-knopf {
        --ldet-leitfarbe: var(--color-bg);
        --knopf-polster: 3.6rem;
        padding: 1.2rem var(--knopf-polster);
        font-size: 1.7rem;
        font-weight: var(--fw-bold);
        letter-spacing: -0.014em;
    }

    .ppz-cta__knopf .link-winkel__mark {
        right: 0.8rem;
    }

    .ppz-etappe[data-schritt="3"] .ppz-block__koerper {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .ppz-etappe[data-schritt="3"] .ppz-aufgaben {
        gap: 2.6rem;
    }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    @media (min-width: 768px) {
        .ppz-cta__knopf .cta-knopf__wort {
            background-image: linear-gradient(90deg,
                                              var(--color-bg) 50%,
                                              var(--color-text) 50%);
        }
    }
}



@media (prefers-reduced-motion: reduce) {

    .ppz-strom__lauf {
        animation: none;
    }

    .ppz-schritt__satz {
        transition: none;
    }

    .ppz-etappe,
    .ppz-block,
    .ppz-aufgabe {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}