.frame-type-wcoberatungregistration_teaser {
    @media (max-width: 768px) {
        margin-bottom: 30px;
    }

    .teaser-content {
        padding: 0 2rem;

        .steps-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 10px 0 30px;
        }

        .steps {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            gap: 20px;
            width: fit-content;
            max-width: 100%;
            margin: 0 auto;
            padding: 50px 30px 20px;

            @media (min-width: 768px) {
                gap: 30px;
            }

            @media (min-width: 992px) {
                gap: 40px;
                flex-wrap: nowrap;
            }

        }

        .step-item {
            position: relative;
            flex: 0 0 auto;
            margin-bottom: 20px;

            @media (min-width: 768px) {
                margin-bottom: 30px;
            }
        }

        .step-item:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 78px;
            left: calc(100% + 5px);
            width: calc(20px - 10px);
            border-top: 6px dashed var(--registration-teaser-accent, #9fd0f0);


            @media (min-width: 768px) {
                left: calc(100% + 7px);
                width: calc(30px - 14px);
            }

            @media (min-width: 992px) {
                left: calc(100% + 10px);
                width: calc(40px - 20px);
            }
        }

        .step-icon {
            position: absolute;
            top: -20px;
            left: -20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--registration-teaser-accent, #9fd0f0);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            z-index: 2;

            @media (min-width: 768px) {
                top: -26px;
                left: -34px;
                width: 70px;
                height: 70px;
                font-size: 34px;
            }
        }

        .step-card {
            width: 7rem;
            height: 7rem;
            background: var(--registration-teaser-card-bg, #efefef);
            border-radius: 22px;
            padding: 1rem 12px 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;

            @media (min-width: 768px) {
                width: 8rem;
                height: 8rem;
                padding: 1rem 18px 20px;
            }
        }

        .step-number {
            font-size: 1.25rem;
            font-weight: bold;
            line-height: 1;
            color: var(--registration-teaser-number-color, #24344d);
            margin-bottom: 12px;

            @media (min-width: 768px) {
                font-size: 1.5rem;
                margin-bottom: 16px;
            }
        }

        .step-title {
            margin: 0;
            font-size: 0.8rem;
            font-weight: bold;
            line-height: 1.25;
            color: var(--registration-teaser-title-color, #666);
            text-align: center;
            overflow-wrap: break-word;
            word-break: break-word;
            hyphens: auto;
            min-height: 3.4em;
            display: flex;
            align-items: center;
            justify-content: center;

            @media (min-width: 768px) {
                font-size: 0.9rem;
            }
        }
    }
}

.tx-wco-beratung-register {

    .radiobtn:checked,
    .checkbox:checked,
    .checkboxbtn:checked {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        accent-color: var(--bs-primary);
    }


    .steps {
        display: flex;
        flex-direction: column;
        background-color: var(--beratung-register-steps-bg, #f1f1f1);
        margin-bottom: 1rem;

        @media (min-width: 992px) {
            flex-direction: row;
        }
    }

    .step {
        color: var(--beratung-register-step-color, #595959);
        padding: 0.5rem 2rem;
        hyphens: auto;
        flex: 1;

        &.checked {
            color: var(--beratung-register-step-checked-color, #000);
            background-color: var(--beratung-register-step-checked-bg, #C2DDEE);
        }

        &.selected {
            color: var(--beratung-register-step-selected-color, #fff);
            background-color: var(--beratung-register-step-selected-bg, var(--bs-primary));
        }

        @media (min-width: 992px) {
            padding: 2rem;
        }
    }

    .w-3rem {
        width: 3rem;
    }

    .w-5rem {
        width: 5rem;
    }

    .mainpanel {
        background-color: #ffffff;
        margin: 0;
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        border: 1px solid #eee;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

        & > div {
            box-shadow: none !important;
            border: none !important;
        }

        @media screen and (min-width: 400px) {
            padding: 1rem 1.5rem;
        }

        @media screen and (min-width: 768px) {
            padding: 2rem;
        }

        h2 {
            padding-left: 0;
            color: #000;
            font-size: 1.25rem;
            font-weight: bold;
            margin-top: 2rem;
            margin-bottom: 1rem;
            line-height: 1.450;
        }

        h3 {
            padding-left: 0;
            color: #000;
            font-size: 1.15rem;
            font-weight: bold;
            line-height: 1.450;
        }

        .row {
            margin-bottom: 1rem;
        }

        &:last-child > * {
            margin-bottom: 0;
        }

        &:first-child > * {
            margin-top: 0;
        }

        .textfeld {
            background-color: #ededed;
            border: 1px solid #999;
        }

    }

    .bindlabel {
        display: flex;
        align-items: first baseline;
    }

    label:hover {
        cursor: pointer;
    }

    fieldset {
        padding: 0;

        &.checkbox {
            margin-top: 1rem;
            flex-shrink: 0;
        }
    }

    .radiolist, .checkboxlist {
        padding-left: 0;

        li {
            list-style-type: none;
            margin-bottom: 1rem;
        }
    }

    .checkboxbtn, .radiobtn {
        margin: 2px 1rem 2px 2px;
        flex-shrink: 0;
    }

    .checkboxlist li div {
        margin-top: 1rem;
    }

    .checkboxlist li p {
        margin-bottom: 0;
    }


    .checkboxlist > li > div > p {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .plz {
        margin-left: 0.5rem;
        padding: 0.2rem;
        width: 4rem;
        text-align: center;
        margin-top: 2px;
    }

    .textarea {
        background-color: white;
    }

    .matrix {
        .table_default {
            .head {
                display: none;
            }

            .td.first {
                font-weight: bold;
                margin-top: 1rem;
            }

            tbody tr {
                display: flex;
                flex-direction: column;
            }
        }

        @media screen and (min-width: 768px) {
            overflow-x: auto;
            margin-bottom: 2rem;
            min-width: 600px;

            fieldset {
                margin: 0;
            }

            .table_default {
                display: table;
                width: 100%;
                table-layout: fixed;

                .head {
                    display: table-header-group;

                    .th {
                        width: 8%;
                        border-bottom: 2px solid #000;
                        padding: 0.5rem;
                        display: table-cell;
                        vertical-align: bottom;
                        text-align: center;


                        span.pretext {
                            font-weight: normal;
                            font-size: 0.8rem;
                            text-align: left;
                            padding-bottom: 1rem;
                        }

                        span.name {
                            font-weight: bold;
                            text-align: center;
                            display: block;
                            width: 100%;
                        }

                        &.first {
                            width: 40%;
                        }
                    }
                }

                .tr {
                    display: table-row;

                    &.even {
                        background-color: #eee;
                    }
                }

                .td {
                    width: 8%;
                    border-bottom: 1px solid #ccc;
                    padding: 0.5rem;
                    text-align: center;
                    display: table-cell;

                    &.first {
                        width: 40%;
                        text-align: left;
                    }
                }
            }

            .hinweis {
                display: none;
            }
            .radiobtn {
                margin: 2px 0.5rem 2px 2px;
            }
        }
    }

    .problembel {
        .matrix {
            @media screen and (min-width: 768px) {
                .table_default {
                    .head .th {
                        width: 5%;

                        span {
                            display: none;
                        }

                        &.first {
                            width: 50%;
                        }
                    }

                    .td {
                        width: 5%;

                        .radiobtn {
                            margin: 0;
                        }

                        &.first {
                            width: 50%;
                        }
                    }
                }
            }
        }
    }

    .select, .input {
        padding: 0.2rem 0.4rem;
        margin: 2px;
    }

    .quest-type-14 {
        p:first-child > label {
            width: auto;
        }

        label {
            width: 15rem;
        }
    }

    .form1 {
        & > p > label {
            width: 15rem;
        }

        .inp {
            width: 100%;
            max-width: 100%;
            @media screen and (min-width: 768px) {
                width: 20rem;
            }
        }
    }

    .dflex2 {
        > p {
            > label {
                @media screen and (min-width: 768px) {
                    width: 25%;
                }
            }

            > span {
                @media screen and (min-width: 768px) {
                    width: 25%;
                }
            }
        }
    }

    .buttons {
        margin-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page_posttext {
        margin-top: 2rem;
    }

    .page_posttext:last-child > * {
        margin-bottom: 0;
    }

    .page_pretext {
        margin-bottom: 2rem;
    }

    .page_pretext > h2 {
        margin-top: 0;
    }


}

@media screen and (min-width: 400px) {
    .tx-wco-beratung-register .mainpanel {
        padding: 1rem 1.5rem;
    }
}

@media screen and (min-width: 768px) {
    .tx-wco-beratung-register .mainpanel {
        padding: 2rem;
    }

    .tx-wco-beratung-register .form1 .inp {
        width: 20rem;
    }

    .tx-wco-beratung-register .problembel .matrix .table_default .head .th {
        width: 5%;
    }


    .tx-wco-beratung-register .matrix {

        .my-visually-hidden-focusable {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }
    }


    .tx-wco-beratung-register .matrix .table_default .td {
        width: 8%;
        border-bottom: 1px solid #ccc;
        padding: 0.5rem;
        text-align: center;
        display: table-cell;
    }

    .tx-wco-beratung-register .problembel .matrix .table_default .td {
        width: 5%;
    }

    .tx-wco-beratung-register .problembel .matrix .table_default .td .radiobtn {
        margin: 0;
    }

}


@media (min-width: 992px) {
    .tx-wco-beratung-register .steps {
        flex-direction: row;
    }

    .tx-wco-beratung-register .step {
        padding: 2rem;
    }
}


@media (max-width: 768px) {
    .table_default {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .table_default thead {
        display: none;
    }

    .table_default tbody tr {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        margin-bottom: 15px;
        padding: 12px;
        border: 1px solid #73777D;
        border-radius: 6px;
        background: #fff;
    }

    .table_default tbody tr > td.first {
        grid-column: 1 / -1;
        padding: 0 0 12px 0;
        text-align: left;
        border: 0;
    }

    .table_default tbody tr > td {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 5px 2px;
        border: 0;
        text-align: center;
    }

    .table_default tbody tr > td label::after {
        content: attr(data-cell);
        display: block;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        margin-left: auto;
    }

    .table_default tbody tr > td input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;

        + label::before {
            content: "";
            width: 18px;
            height: 18px;
            margin-right: 1rem;
            margin-left: 0.5rem;
            border: 2px solid #73777D;
            border-radius: 50%;
            box-sizing: border-box;
        }

        &:checked + label::before {
            border-color: #027ABB;
            background: radial-gradient(circle, #0071ae 0%, #0071ae 5px, transparent 6px);
        }
    }

    .table_default tbody tr > td input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;

        + label::before {
            content: "";
            width: 18px;
            height: 18px;
            margin-right: 1rem;
            margin-left: 0.5rem;
            border: 2px solid #73777D;
            border-radius: 3px;
            box-sizing: border-box;
        }

        &:checked + label::before {
            content: "✓";
            display: flex;
            align-items: center;
            justify-content: center;
            background: #0071ae;
            border-color: #0071ae;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
        }
    }

    .table_default tbody td label {
        display: flex;
        align-items: center;
        flex-direction: row;
        width: 100%;
        min-height: 42px;
        box-sizing: border-box;
        padding: 8px 4px;
        border: 1px solid #73777D;
        border-radius: 6px;
        background: #ffffff;
        cursor: pointer;
    }

    .table_default tbody td input:checked + label {
        border: 2px solid #0071ae;
        background: #cfe3ef;
        font-weight: bold;
    }

    .table_default tbody td input:focus-visible + label {
        outline: 3px solid #027ABB;
    }
}