/* =========================================================
   Registrierungsseite: Projektintegration
   Nur für /booking/register; keine globalen Projektfarben.
   ========================================================= */

body.zb-registration-page-body {
    background: var(--zb-canvas-warm);
}

.zb-public-shell.zb-registration-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.zb-registration-page .zb-account-entry-header {
    width: min(1180px, calc(100% - 2rem));
    margin: 18px auto 0;
    border-color: rgba(8, 167, 160, .16);
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 12px 34px rgba(23, 52, 59, .07);
    backdrop-filter: blur(16px);
}

.zb-registration-page .zb-account-entry-header .zb-brand-mark {
    background: linear-gradient(135deg, var(--zb-color-brand), var(--zb-primary-dark));
    box-shadow: 0 10px 24px rgba(8, 167, 160, .20);
}

.zb-registration-page .zb-account-entry-header .zb-header-navigation a:hover,
.zb-registration-page .zb-account-entry-header .zb-header-navigation a:focus-visible {
    border-color: rgba(8, 167, 160, .20);
    color: #087d79;
    background: #eafaf8;
}

@media (max-width: 720px) {
    .zb-registration-page .zb-account-entry-header {
        width: calc(100% - 1.15rem);
        margin-top: 9px;
    }
}

    /* =========================================================
       ZEKA BOOKING - REGISTRATION PAGE
       Nur lokal für diese Seite.
       Bestehende Projektfarben werden NICHT global verändert.
       ========================================================= */

    .zb-registration-page {
        position: relative;
        overflow: hidden;

        min-height: 100vh;

        background:
            radial-gradient(
                circle at 7% 10%,
                rgba(255, 138, 61, .11),
                transparent 24rem
            ),
            radial-gradient(
                circle at 91% 17%,
                rgba(8, 167, 160, .11),
                transparent 28rem
            ),
            linear-gradient(
                180deg,
                #fffaf6 0%,
                #ffffff 45%,
                #f7fcfb 100%
            );

        color: var(--zb-color-text);
    }


    /* =========================================================
       HAUPTBEREICH
       ========================================================= */

    .zb-reg-main {
        width: min(1180px, calc(100% - 2rem));
        margin: 0 auto;
        padding: 3.25rem 0 4rem;

        display: grid;
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(390px, .92fr);

        gap: clamp(2rem, 5vw, 5.5rem);
        align-items: center;
    }


    /* =========================================================
       LINKER HERO
       ========================================================= */

    .zb-reg-hero {
        min-width: 0;
    }

    .zb-reg-kicker {
        display: inline-flex;
        align-items: center;
        gap: .55rem;

        margin-bottom: 1.2rem;
        padding: .48rem .8rem;

        border: 1px solid rgba(8, 167, 160, .18);
        border-radius: 999px;

        background: rgba(255,255,255,.82);

        color: var(--zb-color-brand-hover);

        font-size: .78rem;
        font-weight: 800;

        box-shadow:
            0 8px 24px rgba(23, 52, 59, .05);
    }

    .zb-reg-kicker-dot {
        width: 8px;
        height: 8px;

        flex: 0 0 8px;

        border-radius: 50%;

        background: var(--zb-color-accent);

        box-shadow:
            0 0 0 5px rgba(255, 138, 61, .12);
    }


    .zb-reg-title {
        max-width: 720px;

        margin: 0;

        color: var(--zb-color-text);

        font-size: clamp(2.45rem, 5vw, 4.7rem);
        line-height: .99;

        letter-spacing: -.055em;
        font-weight: 850;
    }

    .zb-reg-title-accent {
        color: var(--zb-color-brand);
    }


    .zb-reg-description {
        max-width: 610px;

        margin: 1.45rem 0 0;

        color: var(--zb-color-text-strong-muted);

        font-size: clamp(1rem, 1.5vw, 1.12rem);
        line-height: 1.65;
    }

    .zb-reg-description strong {
        color: var(--zb-color-text);
        font-weight: 750;
    }


    /* Branchen */

    .zb-reg-audience {
        display: flex;
        flex-wrap: wrap;

        gap: .5rem;

        margin-top: 1.4rem;
    }

    .zb-reg-audience span {
        padding: .43rem .73rem;

        border: 1px solid var(--zb-color-border-subtle);
        border-radius: 999px;

        background: rgba(255,255,255,.8);

        color: #4e656a;

        font-size: .77rem;
        font-weight: 700;
    }


    /* =========================================================
       PRODUKT-VISUAL
       ========================================================= */

    .zb-reg-product {
        position: relative;

        margin-top: 2rem;
        padding: 1.15rem;

        border: 1px solid rgba(8,167,160,.16);
        border-radius: var(--zb-radius);

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.96),
                rgba(234,250,248,.78)
            );

        box-shadow:
            0 30px 70px rgba(28, 74, 78, .10);

        overflow: hidden;
    }


    .zb-reg-product-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        gap: 1rem;

        margin-bottom: 1rem;
    }

    .zb-reg-product-title span {
        display: block;

        margin-bottom: .15rem;

        color: var(--zb-color-brand);

        font-size: .7rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-weight: 900;
    }

    .zb-reg-product-title strong {
        display: block;

        color: var(--zb-color-text);

        font-size: .95rem;
    }


    .zb-reg-live {
        display: inline-flex;
        align-items: center;
        gap: .4rem;

        padding: .37rem .6rem;

        border-radius: 999px;

        background: var(--zb-color-brand-soft);
        color: var(--zb-color-brand-hover);

        font-size: .7rem;
        font-weight: 800;

        white-space: nowrap;
    }

    .zb-reg-live::before {
        content: "";

        width: 7px;
        height: 7px;

        border-radius: 50%;

        background: var(--zb-color-brand);
    }


    .zb-reg-product-content {
        position: relative;

        min-height: 360px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 1.25rem;

        border-radius: var(--zb-radius);

        background:
            radial-gradient(
                circle at top left,
                rgba(255, 138, 61, .12),
                transparent 45%
            ),
            linear-gradient(
                145deg,
                #fff8f2,
                #edfafa
            );
    }


    /* Smartphone */

    .zb-reg-phone {
        position: relative;

        width: 205px;
        height: 365px;

        padding: 8px;

        border-radius: var(--zb-radius);

        background: #17343b;

        box-shadow:
            0 22px 55px rgba(23,52,59,.25);

        transform: rotate(-2deg);

        overflow: hidden;
    }

    .zb-reg-phone::before {
        content: "";

        position: absolute;

        top: 13px;
        left: 50%;

        width: 62px;
        height: 16px;

        transform: translateX(-50%);

        border-radius: 999px;

        background: #17343b;

        z-index: 3;
    }

    .zb-reg-phone-screen {
        position: relative;

        width: 100%;
        height: 100%;

        border-radius: var(--zb-radius);

        overflow: hidden;

        background: #fff;
    }


    /* Produktvorschau ohne externe Bild-Abhängigkeit */

    .zb-reg-phone-demo {
        height: 100%;

        padding: 2.6rem .85rem 1rem;

        background:
            linear-gradient(
                180deg,
                #ffffff,
                #f8fcfb
            );
    }

    .zb-reg-phone-demo-logo {
        width: 42px;
        height: 42px;

        margin: 0 auto .65rem;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: var(--zb-radius);

        background:
            linear-gradient(
                135deg,
                var(--zb-color-accent),
                #ffb36f
            );

        color: #fff;

        font-size: 1.05rem;
        font-weight: 900;
    }

    .zb-reg-phone-demo h4 {
        margin: 0;

        text-align: center;

        color: var(--zb-color-text);

        font-size: .82rem;
    }

    .zb-reg-phone-demo p {
        margin: .25rem 0 1rem;

        text-align: center;

        color: #839397;

        font-size: .62rem;
    }

    .zb-reg-service {
        margin-bottom: .55rem;
        padding: .62rem;

        border: 1px solid #e7eeed;
        border-radius: var(--zb-radius);

        background: white;
    }

    .zb-reg-service strong {
        display: block;

        color: var(--zb-color-text);

        font-size: .66rem;
    }

    .zb-reg-service span {
        display: block;

        margin-top: .15rem;

        color: #8a999c;

        font-size: .57rem;
    }


    .zb-reg-times {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        gap: .35rem;

        margin-top: .8rem;
    }

    .zb-reg-times span {
        padding: .43rem .2rem;

        text-align: center;

        border-radius: var(--zb-radius);

        background: var(--zb-color-brand-soft);
        color: var(--zb-color-brand-hover);

        font-size: .57rem;
        font-weight: 800;
    }


    /* schwebende Info-Karten */

    .zb-reg-floating {
        position: absolute;

        display: flex;
        align-items: center;
        gap: .6rem;

        padding: .7rem .8rem;

        border: 1px solid rgba(23,52,59,.08);
        border-radius: var(--zb-radius);

        background: rgba(255,255,255,.96);

        box-shadow:
            0 15px 35px rgba(23,52,59,.10);

        font-size: .73rem;
        font-weight: 750;

        color: var(--zb-color-text);
    }

    .zb-reg-floating-icon {
        width: 30px;
        height: 30px;

        flex: 0 0 30px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: var(--zb-radius);

        font-size: .9rem;
    }


    .zb-reg-floating-one {
        top: 56px;
        right: 22px;
    }

    .zb-reg-floating-one .zb-reg-floating-icon {
        background: var(--zb-color-accent-soft);
        color: var(--zb-color-accent-hover);
    }


    .zb-reg-floating-two {
        bottom: 46px;
        left: 17px;
    }

    .zb-reg-floating-two .zb-reg-floating-icon {
        background: var(--zb-color-brand-soft);
        color: var(--zb-color-brand-hover);
    }


    /* =========================================================
       FORMULAR
       ========================================================= */

    .zb-reg-form-card {
        position: relative;

        padding: clamp(1.35rem, 3vw, 2rem);

        border: 1px solid rgba(23,52,59,.08);
        border-radius: var(--zb-radius);

        background: rgba(255,255,255,.97);

        box-shadow:
            0 30px 80px rgba(31, 68, 72, .13);
    }


    .zb-reg-form-header {
        margin-bottom: 1.3rem;
    }

    .zb-reg-form-header-kicker {
        margin: 0 0 .3rem;

        color: var(--zb-color-accent-hover);

        font-size: var(--zb-type-size-xs);
        text-transform: uppercase;
        letter-spacing: .07em;
        font-weight: 900;
    }

    .zb-reg-form-header h2 {
        margin: 0;

        color: var(--zb-color-text);

        font-size: clamp(1.6rem, 3vw, 2.15rem);
        letter-spacing: -.035em;
        line-height: 1.08;
    }

    .zb-reg-form-header p {
        margin: .55rem 0 0;

        color: var(--zb-color-text-strong-muted);

        font-size: .87rem;
        line-height: 1.5;
    }


    /* Trust direkt am Formular */

    .zb-reg-trust {
        display: flex;
        flex-wrap: wrap;

        gap: .45rem;

        margin: .9rem 0 0;
    }

    .zb-reg-trust span {
        display: inline-flex;
        align-items: center;
        gap: .35rem;

        padding: .33rem .55rem;

        border-radius: 999px;

        background: var(--zb-color-brand-soft);
        color: var(--zb-color-brand-hover);

        font-size: .7rem;
        font-weight: 750;
    }

    .zb-reg-trust span::before {
        content: "✓";

        font-weight: 900;
    }


    /* bestehende Form-Klassen lokal verbessern */

    .zb-registration-page .zb-field {
        margin-bottom: .95rem;
    }

    .zb-registration-page .zb-label {
        display: block;

        margin-bottom: .4rem;

        color: #314b51;

        font-size: .78rem;
        font-weight: 800;
    }

    .zb-registration-page .zb-input,
    .zb-registration-page .zb-select {
        width: 100%;

        min-height: 48px;

        padding: .72rem .85rem;

        border: 1px solid #cededd;
        border-radius: var(--zb-radius);

        background: #fff;

        color: var(--zb-color-text);

        outline: none;

        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            background .18s ease;
    }

    .zb-registration-page .zb-input:focus,
    .zb-registration-page .zb-select:focus {
        border-color: var(--zb-color-brand);

        box-shadow:
            0 0 0 4px rgba(8,167,160,.10);

        background: #fff;
    }

    .zb-registration-page .zb-select-shell {
        position: relative;
    }

    .zb-registration-page .zb-select-modern {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 3rem;
        border-color: rgba(23, 82, 86, .20);
        background: linear-gradient(180deg, #ffffff 0%, #fbfefe 100%);
        box-shadow: 0 5px 16px rgba(23, 74, 76, .055);
        cursor: pointer;
    }

    .zb-registration-page .zb-select-modern:hover {
        border-color: rgba(8, 167, 160, .48);
        box-shadow: 0 7px 20px rgba(23, 74, 76, .075);
    }

    .zb-registration-page .zb-select-modern:required:invalid {
        color: #789095;
    }

    .zb-registration-page .zb-select-modern option {
        color: var(--zb-color-text);
        background: #ffffff;
    }

    .zb-registration-page .zb-select-chevron {
        position: absolute;
        top: 50%;
        right: .95rem;
        width: 9px;
        height: 9px;
        border-right: 2px solid #41656a;
        border-bottom: 2px solid #41656a;
        transform: translateY(-70%) rotate(45deg);
        transform-origin: center;
        pointer-events: none;
        transition: border-color .18s ease, transform .18s ease;
    }

    .zb-registration-page .zb-select-modern:focus + .zb-select-chevron {
        border-color: var(--zb-color-brand);
        transform: translateY(-35%) rotate(225deg);
    }


    .zb-registration-page .zb-grid-2 {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: .8rem;
    }


    /* =========================================================
       PREIS / TEST INFO
       ========================================================= */

    .zb-reg-offer-box {
        margin: .25rem 0 1rem;
        padding: .85rem .9rem;

        border: 1px solid rgba(255,138,61,.22);
        border-radius: var(--zb-radius);

        background: var(--zb-color-accent-soft);
    }

    .zb-reg-offer-main {
        display: flex;
        align-items: center;

        gap: .6rem;

        color: #9c501d;

        font-size: .78rem;
        line-height: 1.4;
    }

    .zb-reg-offer-icon {
        width: 29px;
        height: 29px;

        flex: 0 0 29px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: var(--zb-radius);

        background: rgba(255,255,255,.8);

        font-weight: 900;
    }

    .zb-reg-offer-details {
        margin: .5rem 0 0 2.4rem;

        color: #8a684f;

        font-size: .7rem;
        line-height: 1.45;
    }


    /* =========================================================
       CHECKBOXEN
       ========================================================= */

    .zb-registration-page .zb-check-row {
        display: grid;
        grid-template-columns: 17px minmax(0, 1fr);
        align-items: flex-start;

        gap: .65rem;

        margin-top: .8rem;

        color: #62767a;

        font-size: .72rem;
        line-height: 1.48;
    }

    .zb-registration-page .zb-check-row input {
        width: 17px;
        height: 17px;

        margin-top: .18rem;
        justify-self: start;

        accent-color: var(--zb-color-brand);
    }

    .zb-registration-page .zb-check-row > label {
        min-width: 0;
        margin: 0;
        color: inherit;
        font: inherit;
        line-height: inherit;
        cursor: pointer;
    }

    .zb-registration-page .zb-check-row > label > .app-field-badge {
        margin-inline-start: .45rem;
    }

    .zb-registration-page .zb-check-row a {
        color: var(--zb-color-brand-hover);

        font-weight: 750;
        text-decoration: none;
    }

    .zb-registration-page .zb-check-row a:hover {
        text-decoration: underline;
    }


    /* =========================================================
       BUTTON
       ========================================================= */

    .zb-registration-page .zb-btn {
        width: 100%;

        min-height: 52px;

        margin-top: 1.15rem;

        border: 0;
        border-radius: var(--zb-radius);

        background:
            linear-gradient(
                135deg,
                var(--zb-color-accent),
                #ff7735
            );

        color: #fff;

        font-size: .92rem;
        font-weight: 850;

        box-shadow:
            0 14px 28px rgba(255, 122, 45, .22);

        cursor: pointer;

        transition:
            transform .16s ease,
            box-shadow .16s ease;
    }

    .zb-registration-page .zb-btn:hover {
        transform: translateY(-1px);

        box-shadow:
            0 18px 33px rgba(255,122,45,.28);
    }


    .zb-reg-submit-note {
        margin: .7rem 0 0;

        text-align: center;

        color: #87979a;

        font-size: .68rem;
        line-height: 1.45;
    }


    /* =========================================================
       3 VISUELLE ERKLÄRUNGEN
       ========================================================= */

    .zb-reg-explainer {
        width: min(1180px, calc(100% - 2rem));

        margin: 0 auto;
        padding: 1rem 0 5rem;
    }

    .zb-reg-explainer-header {
        max-width: 620px;

        margin: 0 auto 2rem;

        text-align: center;
    }

    .zb-reg-explainer-header span {
        color: var(--zb-color-brand);

        font-size: .72rem;
        letter-spacing: .09em;
        text-transform: uppercase;
        font-weight: 900;
    }

    .zb-reg-explainer-header h2 {
        margin: .45rem 0 0;

        color: var(--zb-color-text);

        font-size: clamp(1.65rem, 3vw, 2.3rem);
        letter-spacing: -.04em;
    }


    .zb-reg-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));

        gap: 1rem;
    }


    .zb-reg-step {
        min-width: 0;

        padding: 1rem;

        border: 1px solid var(--zb-color-border-subtle);
        border-radius: var(--zb-radius);

        background: rgba(255,255,255,.9);

        box-shadow:
            0 14px 40px rgba(33,73,77,.06);
    }


    /* visuelles Bild innerhalb der Karte */

    .zb-reg-step-visual {
        height: 155px;

        margin-bottom: 1rem;

        display: flex;
        align-items: center;
        justify-content: center;

        position: relative;

        overflow: hidden;

        border-radius: var(--zb-radius);
    }


    /* CARD 1 */

    .zb-reg-step:nth-child(1) .zb-reg-step-visual {
        background:
            linear-gradient(
                145deg,
                #fff0e5,
                #fff9f4
            );
    }

    .zb-reg-mini-calendar {
        width: 180px;

        padding: .7rem;

        border-radius: var(--zb-radius);

        background: #fff;

        box-shadow:
            0 12px 30px rgba(68,52,44,.12);
    }

    .zb-reg-mini-calendar-head {
        display: flex;
        justify-content: space-between;

        margin-bottom: .55rem;

        font-size: .55rem;
        font-weight: 900;

        color: #5d7074;
    }

    .zb-reg-mini-days {
        display: grid;
        grid-template-columns: repeat(4,1fr);

        gap: .3rem;
    }

    .zb-reg-mini-days span {
        padding: .38rem .1rem;

        text-align: center;

        border-radius: var(--zb-radius);

        background: #f5f7f7;

        color: #6f8083;

        font-size: .5rem;
        font-weight: 750;
    }

    .zb-reg-mini-days span:nth-child(3),
    .zb-reg-mini-days span:nth-child(6) {
        background: var(--zb-color-accent);
        color: white;
    }


    /* CARD 2 */

    .zb-reg-step:nth-child(2) .zb-reg-step-visual {
        background:
            linear-gradient(
                145deg,
                #e8fbf9,
                #f7fffe
            );
    }

    .zb-reg-link-card {
        width: 205px;

        padding: .8rem;

        border-radius: var(--zb-radius);

        background: #fff;

        box-shadow:
            0 12px 30px rgba(24,81,82,.11);
    }

    .zb-reg-link-card-top {
        display: flex;
        align-items: center;

        gap: .55rem;

        margin-bottom: .65rem;
    }

    .zb-reg-link-avatar {
        width: 31px;
        height: 31px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: var(--zb-radius);

        background: var(--zb-color-brand);

        color: white;

        font-size: .7rem;
        font-weight: 900;
    }

    .zb-reg-link-text strong,
    .zb-reg-link-text span {
        display: block;
    }

    .zb-reg-link-text strong {
        color: var(--zb-color-text);

        font-size: .58rem;
    }

    .zb-reg-link-text span {
        margin-top: .1rem;

        color: #92a0a2;

        font-size: .48rem;
    }

    .zb-reg-link-url {
        padding: .48rem .55rem;

        border-radius: var(--zb-radius);

        background: #f3f8f7;

        color: var(--zb-color-brand-hover);

        font-size: .48rem;
        font-weight: 800;
    }


    /* CARD 3 */

    .zb-reg-step:nth-child(3) .zb-reg-step-visual {
        background:
            linear-gradient(
                145deg,
                #effafa,
                #fff7f1
            );
    }

    .zb-reg-dashboard-mini {
        width: 210px;

        padding: .7rem;

        border-radius: var(--zb-radius);

        background: #fff;

        box-shadow:
            0 12px 30px rgba(27,66,70,.11);
    }

    .zb-reg-dashboard-mini-header {
        margin-bottom: .55rem;

        color: var(--zb-color-text);

        font-size: .55rem;
        font-weight: 900;
    }

    .zb-reg-dashboard-row {
        display: flex;
        align-items: center;

        gap: .45rem;

        margin-top: .4rem;
        padding: .42rem;

        border-radius: var(--zb-radius);

        background: #f8faf9;
    }

    .zb-reg-dashboard-time {
        color: var(--zb-color-brand-hover);

        font-size: .47rem;
        font-weight: 900;
    }

    .zb-reg-dashboard-name {
        flex: 1;

        color: #66797d;

        font-size: .46rem;
    }

    .zb-reg-dashboard-dot {
        width: 6px;
        height: 6px;

        border-radius: 50%;

        background: var(--zb-color-accent);
    }


    .zb-reg-step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 27px;
        height: 27px;

        margin-bottom: .55rem;

        border-radius: var(--zb-radius);

        background: var(--zb-color-brand-soft);
        color: var(--zb-color-brand-hover);

        font-size: .72rem;
        font-weight: 900;
    }

    .zb-reg-step h3 {
        margin: 0;

        color: var(--zb-color-text);

        font-size: .95rem;
    }

    .zb-reg-step p {
        margin: .35rem 0 0;

        color: var(--zb-color-text-strong-muted);

        font-size: .78rem;
        line-height: 1.5;
    }


    /* =========================================================
       MOBILE / TABLET
       ========================================================= */

    @media (max-width: 900px) {

        .zb-reg-main {
            grid-template-columns: 1fr;

            gap: 1.6rem;

            padding-top: 1.7rem;
        }

        .zb-reg-title {
            max-width: 600px;

            font-size: clamp(2.25rem, 9vw, 3.6rem);
        }

        .zb-reg-description {
            margin-top: 1rem;

            font-size: .98rem;
        }

        /*
         * WICHTIG:
         * Das große Produktbild kommt mobil NACH dem Formular.
         */

        .zb-reg-hero {
            display: contents;
        }

        .zb-reg-hero-copy {
            order: 1;
        }

        .zb-reg-form-card {
            order: 2;
        }

        .zb-reg-product {
            order: 3;

            margin-top: 0;
        }


        .zb-reg-product-content {
            min-height: 330px;
        }

        .zb-reg-steps {
            grid-template-columns: 1fr;
        }

        .zb-reg-explainer {
            padding-bottom: 3rem;
        }
    }


    @media (max-width: 580px) {

        .zb-reg-main {
            width: min(100% - 1.15rem, 1180px);

            padding-top: 1.15rem;
        }

        .zb-reg-kicker {
            margin-bottom: .85rem;

            font-size: .7rem;
        }

        .zb-reg-title {
            font-size: 2.35rem;
            line-height: 1.02;
        }

        .zb-reg-description {
            font-size: .9rem;
            line-height: 1.55;
        }


        /* Nicht zu viele Branchen-Chips mobil */

        .zb-reg-audience {
            margin-top: 1rem;
        }

        .zb-reg-audience span {
            padding: .35rem .57rem;

            font-size: .67rem;
        }


        /* Formular */

        .zb-reg-form-card {
            padding: 1.15rem;

            border-radius: var(--zb-radius);
        }

        .zb-reg-form-header h2 {
            font-size: 1.65rem;
        }


        /* Passwörter untereinander */

        .zb-registration-page .zb-grid-2 {
            grid-template-columns: 1fr;

            gap: 0;
        }


        /* Produkt */

        .zb-reg-product {
            padding: .75rem;

            border-radius: var(--zb-radius);
        }

        .zb-reg-product-top {
            padding: .15rem;
        }

        .zb-reg-product-content {
            min-height: 310px;

            padding: .7rem;
        }

        .zb-reg-phone {
            width: 175px;
            height: 310px;
        }

        .zb-reg-floating {
            padding: .55rem .6rem;

            font-size: .62rem;
        }

        .zb-reg-floating-icon {
            width: 25px;
            height: 25px;

            flex-basis: 25px;
        }

        .zb-reg-floating-one {
            top: 35px;
            right: 7px;
        }

        .zb-reg-floating-two {
            bottom: 28px;
            left: 5px;
        }


        /* Erklärungen */

        .zb-reg-explainer {
            width: min(100% - 1.15rem, 1180px);
        }

        .zb-reg-explainer-header {
            text-align: left;
        }

        .zb-reg-explainer-header h2 {
            font-size: 1.7rem;
        }
    }

@media (max-width: 390px) {
    .zb-reg-title {
        font-size: 2.05rem;
    }

    .zb-reg-form-card {
        padding: 1rem;
    }

    .zb-reg-product-content {
        min-height: 292px;
    }

    .zb-reg-phone {
        width: 160px;
        height: 288px;
    }

    .zb-reg-floating {
        gap: .4rem;
        padding: .48rem .52rem;
        font-size: .57rem;
    }

    .zb-reg-floating-one {
        top: 30px;
        right: 3px;
    }

    .zb-reg-floating-two {
        bottom: 24px;
        left: 3px;
    }

    .zb-reg-live {
        display: none;
    }
}


/* =========================================================
   Phase 6 – Registration Journey

   Die Kontoerstellung erhält eine kompakte Fortschrittsanzeige. Sie dient
   ausschließlich der visuellen Orientierung und verändert weder Formular-
   Bindings noch den Verifizierungsablauf.
   ========================================================= */

.zb-reg-account-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.zb-reg-account-progress::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16.66%;
    left: 16.66%;
    height: 1px;
    background: var(--zb-color-border);
}

.zb-reg-account-progress li {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 5px;
    color: var(--zb-color-text-muted);
    font-size: 0.7rem;
    text-align: center;
}

.zb-reg-account-progress li > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--zb-color-border-strong);
    border-radius: 50%;
    color: var(--zb-color-text-strong-muted);
    background: var(--zb-color-surface);
    box-shadow: var(--zb-elevation-low);
    font-size: 0.72rem;
    font-weight: 900;
}

.zb-reg-account-progress li > strong {
    color: inherit;
    font-size: 0.7rem;
    font-weight: 800;
}

.zb-reg-account-progress li.is-active {
    color: var(--zb-color-brand-hover);
}

.zb-reg-account-progress li.is-active > span {
    color: var(--zb-color-brand-contrast);
    border-color: var(--zb-color-brand);
    background: linear-gradient(135deg, var(--zb-color-brand), var(--zb-color-brand-hover));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--zb-color-brand) 24%, transparent);
}

@media (max-width: 420px) {
    .zb-reg-account-progress {
        gap: 4px;
    }

    .zb-reg-account-progress li > strong {
        font-size: 0.65rem;
    }
}

/* Neuer, nur auf der Registrierungsseite verwendeter Kopfbereich. */
.zb-registration-page .zb-registration-entry-header {
    min-height: 62px;
    padding: 10px 12px;
}

.zb-registration-page .zb-registration-entry-header .zb-brand-link {
    gap: 10px;
}

.zb-registration-page .zb-registration-entry-header .zb-brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 800;
    text-transform: lowercase;
}

.zb-registration-page .zb-registration-entry-header .zb-brand-title {
    font-size: 1.2rem;
    font-weight: 650;
    letter-spacing: -.035em;
    text-transform: lowercase;
}

.zb-registration-page .zb-registration-entry-header .zb-header-navigation {
    gap: 8px;
}

.zb-registration-page .zb-registration-login-prompt {
    color: var(--zb-color-text-muted);
    font-size: .76rem;
    font-weight: 500;
}

.zb-registration-page .zb-registration-entry-header .zb-registration-login-link {
    color: var(--zb-color-brand-hover);
    font-weight: 700;
}

.zb-registration-page .zb-registration-entry-header .zb-registration-header-cta {
    padding-inline: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--zb-color-accent), var(--zb-color-accent-hover));
    box-shadow: 0 8px 20px rgba(255, 138, 61, .22);
}

.zb-registration-page .zb-registration-entry-header .zb-header-primary-link {
    padding-inline: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--zb-color-accent), var(--zb-color-accent-hover));
    box-shadow: 0 8px 20px rgba(255, 138, 61, .22);
}

@media (max-width: 640px) {
    .zb-registration-page .zb-registration-entry-header {
        min-height: 56px;
        padding: 8px 9px;
    }

    .zb-registration-page .zb-registration-login-prompt {
        display: none;
    }

    .zb-registration-page .zb-registration-entry-header .zb-registration-header-cta {
        display: none;
    }
}